lynx-openui

Lynx OpenUI プログラムの生成

<OpenUiRenderer response={...}>で使用される、有効な OpenUI Lang v0.5 を生成します。アプリケーションコードではなく、宣言型の DSL を出力してください。

リファレンスを読む

• プログラムを生成する前に、必ずcomponents.mdを読んでください。呼び出し元から提供されたコンポーネントシグネチャは、拡張または置き換えとして、常に正しいものとして扱ってください。
• リクエストに状態、ツール、ライブデータ、変更、アクション、繰り返しのクエリデータ、編集が含まれる場合は、runtime.mdを読んでください。
• 複雑なレイアウトやツールのワークフローでは、examples.mdを読んでください。パターンを応用し、関係のない内容はコピーしないでください。

ワークフロー

1. 要求された UI、正確な有効コンポーネントカタログ、設定されたルートコンポーネント、利用可能なツールスキーマ、ホストから提供された事前取得済み Query キー、メディア URL、ホストが完全なプログラムまたはmergeStatementsパッチに対応しているかを特定します。
2. データモードを選択します。
   • 自己完結型のコンテンツやツールがない場合は、静的な値を使用します。
   • 呼び出し元またはホストから実際の読み取りツールが提供されている場合に限り、Queryを使用します。
   • 実際の書き込みツールがあり、明示的なActionからトリガーする場合に限り、Mutationを使用します。
3. 有効なカタログで許可されているコンポーネントと位置引数だけを選択します。明示的に縮小されたカタログは、完全な語彙として扱ってください。カタログに含まれない組み込み要素は利用できません。ホストに明示的なルートの上書きがある場合はそれを使用し、ない場合は Library のデフォルトのStackルートを使用します。
4. ストリーミングに適したグラフを記述します。完全なプログラムでは、ルートを先頭に置き、その後に状態、クエリまたはミューテーション、構造コンポーネント、リーフコンテンツを続けます。編集モードのパッチでは、変更されたステートメントだけを返します。
5. プログラムを返す前に、構文、参照、到達可能性、コンポーネント名、引数の順序、ツール名、アクションの対象を検証します。

出力仕様

• OpenUI Lang のみを返してください。Markdown、コードフェンス、文章、JSON、XML、HTML、JavaScript、TypeScript、JSX、CSS は返さないでください。
• 1 行につき 1 つの代入ステートメントを記述してください。
• 完全なプログラムでは、最初の空でない行でrootにホストの明示的なルートの上書きを呼び出す式を代入してください。例：root = Shell(...)。それ以外の場合は、Library のデフォルトであるroot = Stack(...)を使用してください。
• デフォルトでは完全なプログラムを返してください。呼び出し元がホストで編集モードまたはmergeStatementsを使用すると明示した場合は、変更されたステートメントだけを返し、ルートグラフが変更される場合に限りrootを含めてください。
• リクエストに利用できないコンポーネントや機能が必要な場合は、構文を捏造せず、サポートされている OpenUI コンポーネントを使って簡潔に説明してください。

構文ルール

• 通常の宣言にはidentifier = Expressionを、変更可能な状態には$identifier = defaultValueを使用します。
• コンポーネントの引数は位置指定で渡します。gap: "m"のような名前付き引数は使用しないでください。
• 省略可能な引数は、末尾からのみ省略してください。後ろの引数を設定する場合は、それより前のすべての位置に有効な値を指定してください。
• 文字列には二重引用符を使用し、埋め込みの引用符とバックスラッシュはエスケープしてください。
• 参照またはインラインコンポーネントを使用します。ストリーミングで構造が段階的に表示されるよう、ルートと主要セクションには参照を優先してください。
• 参照される識別子がすべて定義されていることを確認してください。root以外のすべての宣言が、root、rootから到達可能な式、またはrootから到達可能なアクションのいずれかから到達可能であることを確認してください。
• ドキュメントに記載された演算子、組み込み要素、コンポーネント、アクションステップのみを使用してください。

デフォルトのStackルートを使用した正しい位置指定のレイアウト：

root = Stack([header, content], "column", false, "l", "stretch", "start")

誤った位置指定のレイアウト：

root = Stack([header, content], "column", "l", "stretch")

誤った形式では文字列がwrapに渡され、その後のすべてのプロパティの位置がずれます。

データとインタラクションのルール

• ツール名を創作しないでください。ツールスキーマが提供されていない場合は、静的データまたは説明用の UI を使用してください。
• すべての Query に、実際のツールの形式に合った代表的なデフォルト結果を設定してください。これにより、レスポンスが安定した後、リクエストが解決する前の最初の同期レンダリングで UI が描画されます。
• ホストから事前取得済みの Query 結果が提供される場合は、対応する Query の割り当て名を保持してください。これらは文の ID と事前取得キーであり、ツール名ではありません。runtime.md を参照してください。
• Query と Mutation の宣言には、$identifiers ではなく通常の識別子を使用してください。
• クエリに基づく繰り返し UI には @Each を使用してください。ループに依存するコンポーネントは @Each の内部に記述してください。
• 書き込み操作は、アクティブなカタログのコンポーネントで、明示的な送信または確認操作が行われた場合にのみ実行してください。デフォルトのカタログでは Button を使用してください。入力の変更アクションにミューテーションを関連付けないでください。
• 入力によって $variable を更新する必要がある場合は、runtime.md に記載されている同一キーの name パターンを使用してください。イベント値の変数を創作しないでください。
• 複数ステップのアクションは、意図した順序で実行してください。ミューテーションが失敗すると、残りのステップは停止することに注意してください。
• 会話を続けるには @ToAssistant を使用し、@OpenUrl は呼び出し元から提供された信頼できる URL に対してのみ使用してください。
• 呼び出し元から提供されたメディア URL を使用してください。CDN の URL を捏造したり、ホストが画像検索文字列を解決すると想定したりしないでください。

Lynx UI のルール

• シンプルなコンポーネントツリーで、モバイルを優先したコンパクトなレイアウトにしてください。
• コンポーネント固有の設定は、そのコンポーネントがアクティブなカタログに存在する場合にのみ適用してください。それ以外の場合は、提供されたカスタムシグネチャに従ってください。
• デフォルトのカタログでは、通常の縦方向の構成に Stack または Column、小さな横方向のグループに Row、グループ化されたコンテンツや繰り返しコンテンツに List を使用してください。
• Image がある場合は、Lynx レンダラーで具体的なサイズが指定されるよう、明示的なバリアントを優先してください。
• デフォルトのカタログでは、読みやすいテキストを Text または TextContent に記述してください。生の Lynx 要素は出力しないでください。
• 利用可能な場合は、切り替え表示に Tabs、タップして開く詳細表示に Modal を使用してください。モーダルのトリガーを先に、コンテンツを後に渡してください。トリガーを兄弟要素として別途レンダリングしないでください。

最終確認

返答する前に、以下をすべて確認してください。

• 完全なプログラムでは、ホストから明示的なルートの上書きが提供されている場合は root をその値に割り当て、それ以外の場合は Library のデフォルトの Stack ルートに割り当てます。編集モードのパッチでは、ルートグラフが変更されない限り root を省略します。レスポンスには OpenUI Lang のみを含めます。
• すべてのコンポーネントがアクティブなカタログに存在し、すべての引数が位置引数のスキーマに一致しています。縮小されたカタログには暗黙の組み込み要素が含まれず、ルート呼び出しには設定済みのルートコンポーネントが使用されています。
• 呼び出し元からカスタムコンポーネントが提供されていない限り、Form、Input、Select、SelectItem、FormControl、テーブル、チャートは使用されていません。
• すべての参照が解決され、孤立した宣言がありません。
• すべての Query または Mutation が実際に提供されたツールを使用し、表示される UI またはアクションから参照されています。
• 事前取得を意図したすべての Query で、ホストから提供された正確なキーが割り当て名として使用され、すべての Query に引き続き形状の正しいデフォルト結果が設定されています。
• すべての $variable が表示される UI、クエリ引数、またはアクションで使用されています。
• すべての @Each ループ変数が、インラインのテンプレート式の内部にとどまっています。
• 動作する動的リストが、組み込みの Lynx レンダラーで TemplateChildren に依存していません。
• パーサーが利用可能な場合は、ルートが存在し、検証エラー、未解決の参照、孤立した文がない状態で解析が完了しています。