@muibook/components 6.1.0 → 7.0.0

package/dist/esm/agent/prompts/index.js

@@ -2,668 +2,122 @@ const i = [
   {
     role: "system",
     content: `
-      You are an assistant that converts UI prompts into MUI-style web components using custom tags.
-
-      Each user message may include tags like [button], [card], etc. Use these to help determine intent.
-
-      Here is the full list of supported components:
-      <mui-field>, <mui-file-upload>, <mui-addon>, <mui-input>, <mui-select>, <mui-switch>, 
-      <mui-table>, <mui-table-cell>, <mui-table-row>, <mui-table-row-group>, 
-      <mui-slat>, <mui-slat-accessory>, 
-      <mui-accordion-group>, <mui-accordion-inline>, <mui-accordion-block>, 
-      <mui-heading>, <mui-body>, <mui-quote>, <mui-code>, <mui-image>, 
-      <mui-smart-card>, 
-      <mui-list>, <mui-list-item>, 
-      <mui-icon-accessibility>, <mui-icon-add>, <mui-icon-attention>, <mui-icon-check>, 
-      <mui-icon-close>, <mui-icon-down-chevron>, <mui-icon-globe>, <mui-icon-grid>, 
-      <mui-icon-info>, <mui-icon-left-arrow>, <mui-icon-left-sidebar>, <mui-icon-left-chevron>, 
-      <mui-icon-menu>, <mui-icon-message>, <mui-icon-moon>, <mui-icon-notification>, 
-      <mui-icon-right-chevron>, <mui-icon-stop>, <mui-icon-subtract>, <mui-icon-sun>, 
-      <mui-icon-toggle>, <mui-icon-up-arrow>, <mui-icon-up-chevron>, <mui-icon-warning>, 
-      <mui-icon-down-arrow-circle>, <mui-icon-ellipsis>, 
-      <mui-h-stack>, <mui-v-stack>, <mui-grid>, <mui-responsive>, <mui-container>, <mui-rule>, 
-      <mui-card>, <mui-card-header>, <mui-card-body>, <mui-card-footer>, 
-      <mui-alert>, <mui-message>, <mui-badge>, 
-      <mui-button>, <mui-button-group>, <mui-link>, 
-      <mui-tabs-controller>, <mui-tabs-item>, <mui-tabs-panel>, <mui-tabs-tab-bar>, 
-      <mui-carousel-controller>, <mui-carousel-panel>
-
-      Use only these components when constructing UIs. When helpful, you may suggest new components, but clearly mark them with a comment like:
-      <!-- 🚧 Not yet in system, consider adding -->
-
-      Structure layouts using primitives like <mui-v-stack>, <mui-h-stack>, <mui-grid> or <mui-card-body> when composing forms or groups of fields.
-    `
-  },
-  // FIELD
-  {
-    role: "user",
-    content: "[input] Add a field to enter an email address"
-  },
-  {
-    role: "assistant",
-    content: `<mui-field label="Email">
-  <mui-input type="email" placeholder="you@example.com"></mui-input>
-</mui-field>`
-  },
-  // SLAT
-  {
-    role: "user",
-    content: "[slat] Create a default slat with heading and body"
-  },
-  {
-    role: "assistant",
-    content: `
-      <mui-slat>
-        <mui-heading slot="start" size="5">...</mui-heading>
-        <mui-h-stack slot="end">
-          <mui-body>...</mui-body>
-        </mui-h-stack>
-      </mui-slat>
-    `
-  },
-  {
-    role: "user",
-    content: "[slat] Create a header slat"
-  },
-  {
-    role: "assistant",
-    content: `
-      <mui-slat variant="header">
-        <mui-heading slot="start" size="6">Heading</mui-heading>
-        <mui-h-stack slot="end" alignX="end">
-          <mui-body size="small">End slot</mui-body>
-        </mui-h-stack>
-      </mui-slat>`
-  },
-  {
-    role: "user",
-    content: "[slat] Create a row slat with vertical stacks"
-  },
-  {
-    role: "assistant",
-    content: `
-      <mui-slat variant="row">
-        <mui-v-stack slot="start">
-          <mui-body size="medium" weight="bold">...</mui-body>
-          <mui-body size="small">...</mui-body>
-        </mui-v-stack>
-        <mui-v-stack slot="end" alignX="end">
-          <mui-body size="small">...</mui-body>
-          <mui-body size="small">...</mui-body>
-        </mui-v-stack>
-      </mui-slat>`
-  },
-  {
-    role: "user",
-    content: "[slat] Create a row slat with an icon accessory"
-  },
-  {
-    role: "assistant",
-    content: `
-      <mui-slat variant="row">
-        <mui-slat-accessory slot="accessory">
-          <mui-icon-left-sidebar size="small"></mui-icon-left-sidebar>
-        </mui-slat-accessory>
-        <mui-v-stack slot="start" space="0">
-          <mui-body size="medium" weight="bold">Espresso & Muffin Bar</mui-body>
-          <mui-body size="small">Food & Drink • Richmond, VIC</mui-body>
-        </mui-v-stack>
-        <mui-v-stack slot="end" space="0" alignX="end">
-          <mui-body size="x-small">Pending</mui-body>
-          <mui-body size="small" weight="bold">-$8.12</mui-body>
-        </mui-v-stack>
-      </mui-slat>`
-  },
-  {
-    role: "user",
-    content: "[card] Create a card with a slat header and action rows"
-  },
-  {
-    role: "assistant",
-    content: `
-      <mui-card>
-        <mui-card-body>
-          <mui-slat variant="header">
-            <mui-heading slot="start" size="6">Today</mui-heading>
-            <mui-h-stack slot="end" alignX="end">
-              <mui-body size="small">22 July 2025</mui-body>
-            </mui-h-stack>
-          </mui-slat>
-          <mui-rule></mui-rule>
-          <mui-v-stack space="var(--space-000)" style="margin-top: var(--space-200)">
-            <mui-slat variant="action">
-              <mui-slat-accessory slot="accessory">
-                <mui-icon-left-sidebar size="small"></mui-icon-left-sidebar>
-              </mui-slat-accessory>
-              <mui-v-stack slot="start" space="0">
-                <mui-body size="medium" weight="bold">Espresso & Muffin Bar</mui-body>
-                <mui-body size="small">Food & Drink • Richmond, VIC</mui-body>
-              </mui-v-stack>
-              <mui-v-stack slot="end" space="0">
-                <mui-body size="x-small">Pending</mui-body>
-                <mui-body size="small" weight="bold">-$8.12</mui-body>
-              </mui-v-stack>
-            </mui-slat>
-          </mui-v-stack>
-        </mui-card-body>
-      </mui-card>`
-  },
-  // TABLE
-  {
-    role: "user",
-    content: "[table] Add a table"
-  },
-  {
-    role: "assistant",
-    content: `
-      <mui-table>
-        <mui-row-group heading>
-          <mui-row columns="1fr 1fr">
-            <mui-cell>Heading 1</mui-cell>
-            <mui-cell>Heading 2</mui-cell>
-          </mui-row>
-        </mui-row-group>
-        <mui-row-group>
-          <mui-row columns="1fr 1fr">
-            <mui-cell>Row 1</mui-cell>
-            <mui-cell>Row 1</mui-cell>
-          </mui-row>
-        </mui-row-group>
-      </mui-table>`
-  },
-  // ACCORDION
-  {
-    role: "user",
-    content: "[accordion] Add a block accordion with two sections"
-  },
-  {
-    role: "assistant",
-    content: `
-      <mui-accordion-group>
-        <mui-accordion-block heading="Section A">
-          <div slot="detail">Details A</div>
-        </mui-accordion-block>
-        <mui-accordion-block heading="Section B">
-          <div slot="detail">Details B</div>
-        </mui-accordion-block>
-      </mui-accordion-group>`
-  },
-  // ICONS
-  { role: "user", content: "[icon] Add an icon" },
-  { role: "assistant", content: "<mui-icon-{name}></mui-icon-{name}]>" },
-  // IMAGE
-  {
-    role: "user",
-    content: "[image] Show an image with a caption"
-  },
-  {
-    role: "assistant",
-    content: `
-      <mui-image>
-        <img slot="image" src="..." alt="Descriptive alt text" />
-        <figcaption slot="caption">This is a caption</figcaption>
-      </mui-image>`
-  },
-  // STACK
-  {
-    role: "user",
-    content: "[stack] Create a horizontal stack with two cards and spacing"
-  },
-  {
-    role: "assistant",
-    content: `<mui-h-stack space="var(--space-500)">
-  <mui-card>...</mui-card>
-  <mui-card>...</mui-card>
-</mui-h-stack>`
-  },
-  {
-    role: "user",
-    content: "[stack] Create a vertical stack with two cards and spacing"
-  },
-  {
-    role: "assistant",
-    content: `<mui-v-stack space="var(--space-500)">
-  <mui-card>...</mui-card>
-  <mui-card>...</mui-card>
-</mui-v-stack>`
-  },
-  // GRID
-  {
-    role: "user",
-    content: "[layout] Create a grid with 2 columns and card content"
-  },
-  {
-    role: "assistant",
-    content: `<mui-grid col="1fr 1fr" space="var(--space-200)">
-  <mui-card>...</mui-card>
-  <mui-card>...</mui-card>
-</mui-grid>`
-  },
-  // RESPONSIVE
-  {
-    role: "user",
-    content: "[responsive] Show a div above 600px and a different one below"
-  },
-  {
-    role: "assistant",
-    content: `<mui-responsive breakpoint="600">
-  <div slot="showAbove">...</div>
-  <div slot="showBelow">...</div>
-</mui-responsive>`
-  },
-  // CONTAINER
-  { role: "user", content: "[layout] Create a small container" },
-  { role: "assistant", content: "<mui-container small>...</mui-container>" },
-  { role: "user", content: "[layout] Create a medium container" },
-  { role: "assistant", content: "<mui-container medium>...</mui-container>" },
-  { role: "user", content: "[layout] Create a large container" },
-  { role: "assistant", content: "<mui-container large>...</mui-container>" },
-  { role: "user", content: "[layout] Create a fluid container" },
-  { role: "assistant", content: "<mui-container fluid>...</mui-container>" },
-  { role: "user", content: "[layout] Create a small container and centered" },
-  { role: "assistant", content: "<mui-container small center>...</mui-container>" },
-  { role: "user", content: "[button] Create a primary button" },
-  { role: "assistant", content: "<mui-button variant='primary'>...</mui-button>" },
-  // RULE
-  {
-    role: "user",
-    content: "[rule] Insert a horizontal divider"
-  },
-  {
-    role: "assistant",
-    content: '<mui-rule direction="horizontal" length="100%"></mui-rule>'
-  },
-  {
-    role: "user",
-    content: "[rule] Insert a vertical rule of 100px"
-  },
-  {
-    role: "assistant",
-    content: '<mui-rule direction="vertical" length="100px"></mui-rule>'
-  },
-  // CARD
-  { role: "user", content: "[card] Create a vertical stack with two cards" },
-  {
-    role: "assistant",
-    content: `<mui-v-stack space="var(--space-400)">
-  <mui-card>...</mui-card>
-  <mui-card>...</mui-card>
-</mui-v-stack>`
-  },
-  {
-    role: "user",
-    content: "[card] Create a card with heading and footer actions"
-  },
-  {
-    role: "assistant",
-    content: `
-      <mui-card>
-        <mui-card-header>
-          <mui-heading size="3">...</mui-heading>
-        </mui-card-header>
-        <mui-card-body>...</mui-card-body>
-        <mui-card-footer>
-          <mui-button-group right>
-            <mui-button variant="secondary">Cancel</mui-button>
-            <mui-button variant="primary">Submit</mui-button>
-          </mui-button-group>
-        </mui-card-footer>
-      </mui-card>`
-  },
-  {
-    role: "user",
-    content: "[table] Show a table with heading row and add buttons"
-  },
-  {
-    role: "assistant",
-    content: `
-      <mui-card>
-        <mui-card-header>
-          <mui-heading size="3">Title</mui-heading>
-        </mui-card-header>
-        <mui-rule></mui-rule>
-        <mui-card-body>
-          <mui-table>
-            <mui-row-group heading>
-              <mui-row columns="1fr 1fr 1fr auto">
-                <mui-cell heading>Office</mui-cell>
-                <mui-cell heading>Revenue</mui-cell>
-                <mui-cell heading>Cost</mui-cell>
-                <mui-cell heading action></mui-cell>
-              </mui-row>
-            </mui-row-group>
-            <mui-row-group>
-              <mui-row columns="1fr 1fr 1fr auto">
-                <mui-cell>Whalen</mui-cell>
-                <mui-cell>$4,400.00</mui-cell>
-                <mui-cell>$1,100.00</mui-cell>
-                <mui-cell action>
-                  <mui-button variant="tertiary">
-                    <mui-icon-add size="small"></mui-icon-add>
-                  </mui-button>
-                </mui-cell>
-              </mui-row>
-            </mui-row-group>
-          </mui-table>
-        </mui-card-body>
-      </mui-card>`
-  },
-  {
-    role: "system",
-    content: "You are an assistant that converts UI prompts into MUI-style web components using custom tags like <mui-button>, <mui-alert>, <mui-message>, <mui-badge>, <mui-tab-controller>, and <mui-carousel-controller>. Each user message may include tags like [button], [alert], [tab], etc. Use these to help determine intent."
-  },
-  // ALERTS
-  { role: "user", content: "[alert] Show a success alert" },
-  { role: "assistant", content: '<mui-alert variant="success">...</mui-alert>' },
-  { role: "user", content: "[alert] Show an error alert" },
-  { role: "assistant", content: '<mui-alert variant="error">...</mui-alert>' },
-  // MESSAGES
-  { role: "user", content: "[message] Create an info message with heading and body" },
-  {
-    role: "assistant",
-    content: `
-      <mui-message heading="Message heading" variant="info">
-        <mui-body>...</mui-body>
-      </mui-message>`
-  },
-  { role: "user", content: "[message] Create a positive message with link" },
-  {
-    role: "assistant",
-    content: `
-      <mui-message heading="Message heading" variant="positive">
-        <mui-body>The report has been...</mui-body>
-        <mui-link>Download Your Report</mui-link>
-      </mui-message>`
-  },
-  { role: "user", content: "[message] Create a message with a list" },
-  {
-    role: "assistant",
-    content: `
-      <mui-message heading="Message heading">
-        <mui-list as="ul">
-          <mui-list-item size="small">Item 1</mui-list-item>
-          <mui-list-item size="small">Item 2</mui-list-item>
-        </mui-list>
-      </mui-message>`
-  },
-  // BADGES
-  { role: "user", content: "[badge] Show a warning badge" },
-  { role: "assistant", content: '<mui-badge variant="warning">...</mui-badge>' },
-  // BUTTON
-  { role: "user", content: "[button] Create a primary button" },
-  { role: "assistant", content: '<mui-button variant="primary">...</mui-button>' },
-  { role: "user", content: "[button-group] Create a right-aligned button group with cancel and submit" },
-  {
-    role: "assistant",
-    content: `
-      <mui-button-group right>
-        <mui-button variant="secondary">Cancel</mui-button>
-        <mui-button variant="primary">Submit</mui-button>
-      </mui-button-group>`
-  },
-  { role: "user", content: "[button] Create a tertiary button with add icon" },
-  {
-    role: "assistant",
-    content: `
-      <mui-button variant="tertiary">
-        <mui-icon-add></mui-icon-add>
-      </mui-button>`
-  },
-  // LINK
-  { role: "user", content: "[link] Create a primary link" },
-  { role: "assistant", content: '<mui-link variant="primary" href="links.html">...</mui-link>' },
-  { role: "user", content: "[link] Create a small sized link" },
-  { role: "assistant", content: '<mui-link size="small">Link text</mui-link>' },
-  // TABS
-  { role: "user", content: "[tab] Create a tab controller with three tabs" },
-  {
-    role: "assistant",
-    content: `
-      <mui-tab-controller>
-        <mui-tab-bar>
-          <mui-tab-item active id="item1">Item 1</mui-tab-item>
-          <mui-tab-item id="item2">Item 2</mui-tab-item>
-          <mui-tab-item id="item3">Item 3</mui-tab-item>
-        </mui-tab-bar>
-        <mui-tab-panel item="item1">Content 1</mui-tab-panel>
-        <mui-tab-panel item="item2">Content 2</mui-tab-panel>
-        <mui-tab-panel item="item3">Content 3</mui-tab-panel>
-      </mui-tab-controller>`
-  },
-  // CAROUSEL
-  { role: "user", content: "[carousel] Create a carousel controller with tabs and panels" },
-  {
-    role: "assistant",
-    content: `
-      <mui-carousel-controller>
-        <mui-tab-bar slot="controls">
-          <mui-tab-item active id="one">1</mui-tab-item>
-          <!-- Add other tabs -->
-        </mui-tab-bar>
-        <mui-carousel-panel slot="item" item="one">
-          <mui-grid col="1fr" style="padding-bottom: var(--carousel-tab-offset);">
-            <mui-v-stack style="padding: var(--space-500) var(--space-600);">
-              <mui-heading level="3" size="2">Item 1</mui-heading>
-              <mui-body>Content...</mui-body>
-            </mui-v-stack>
-          </mui-grid>
-        </mui-carousel-panel>
-        <!-- Add other panels -->
-      </mui-carousel-controller>`
-  },
-  // SMART CARD
-  { role: "user", content: "[smart-card] Basic plain card with number and logo" },
-  {
-    role: "assistant",
-    content: `
-      <mui-smart-card
-        number="1234"
-        type="Debit"
-        logo="https://muibook.com/images/image-220.png"
-        partner="https://muibook.com/images/visa-black.svg"
-        variant="plain"
-      />`
-  },
-  { role: "user", content: "[smart-card] Plain card with inverted style" },
-  {
-    role: "assistant",
-    content: `
-      <mui-smart-card
-        inverted
-        number="1234"
-        type="Debit"
-        logo="https://muibook.com/images/image-220.png"
-        partner="https://muibook.com/images/visa-white.svg"
-        variant="plain"
-      />`
-  },
-  { role: "user", content: "[smart-card] Animated card with background image" },
-  {
-    role: "assistant",
-    content: `
-      <mui-smart-card
-        number="1234"
-        type="Debit"
-        bg-image="https://muibook.com/images/buttercup.png"
-        logo="https://muibook.com/images/image-220.png"
-        partner="https://muibook.com/images/visa-black.svg"
-        variant="animated"
-      />`
-  },
-  { role: "user", content: "[smart-card] Card with custom logo size" },
-  {
-    role: "assistant",
-    content: `
-      <mui-smart-card
-        logo="https://muibook.com/images/guides.svg"
-        logo-height="80"
-      />`
-  },
-  { role: "user", content: "[smart-card] Frozen card state" },
-  {
-    role: "assistant",
-    content: `
-      <mui-smart-card
-        state="frozen"
-        number="1234"
-        type="Debit"
-        logo="https://muibook.com/images/image-220.png"
-        partner="https://muibook.com/images/visa-black.svg"
-        variant="plain"
-      />`
-  },
-  { role: "user", content: "[smart-card] Card with background color" },
-  {
-    role: "assistant",
-    content: `
-      <mui-smart-card
-        variant="plain"
-        bg-color="#a4fc67"
-        number="1234"
-        type="Debit"
-        logo="https://muibook.com/images/image-220.png"
-        partner="https://muibook.com/images/visa-black.svg"
-      />`
-  },
-  { role: "user", content: "[smart-card] Card with background image (non-animated)" },
-  {
-    role: "assistant",
-    content: `
-      <mui-smart-card
-        variant="plain"
-        bg-image="https://muibook.com/images/image-395.png"
-        number="1234"
-        type="Debit"
-        logo="https://muibook.com/images/image-220.png"
-        partner="https://muibook.com/images/visa-black.svg"
-      />`
-  },
-  { role: "user", content: "[smart-card] Premier reward card" },
-  {
-    role: "assistant",
-    content: `
-      <mui-smart-card
-        type="Premier"
-        partner="https://muibook.com/images/emerald.svg"
-        bg-image="https://muibook.com/images/premier.png"
-      />`
-  },
-  { role: "user", content: "[smart-card] Diamond reward card (inverted)" },
-  {
-    role: "assistant",
-    content: `
-      <mui-smart-card
-        inverted
-        type="Diamond"
-        partner="https://muibook.com/images/emerald.svg"
-        bg-image="https://muibook.com/images/diamond.png"
-      />`
-  },
-  // COMPOSITION: WALLET
-  {
-    role: "user",
-    content: "[wallet] Create a wallet layout with a smart card and tabbed transactions"
-  },
-  {
-    role: "assistant",
-    content: `
-      <mui-v-stack alignX="stretch" slot="body" style="max-width: 365px; margin: 0 auto; padding-top: var(--space-700); padding-bottom: var(--space-700)">
-        <mui-smart-card
-          variant="animated"
-          partner="https://muibook.com/images/visa-black.svg"
-          type="Debit"
-          number="1234"
-          logo="https://muibook.com/images/guides.svg"
-          logo-height="80"
-          bg-image="https://muibook.com/images/buttercup.png"
-        ></mui-smart-card>
-
-        <mui-tab-controller>
-          <mui-v-stack alignX="stretch" style="max-width: 100%;" space="var(--space-300)">
-            <mui-tab-bar>
-              <mui-tab-item active id="item1">Transactions</mui-tab-item>
-              <mui-tab-item id="item2">Statements</mui-tab-item>
-            </mui-tab-bar>
-
-            <mui-tab-panel item="item1">
-              <mui-v-stack alignX="stretch" space="var(--space-000)">
-                <mui-slat variant="header">
-                  <mui-heading slot="start" size="6">Today</mui-heading>
-                  <mui-h-stack slot="end" alignX="end">
-                    <mui-body size="small">22 July 2025</mui-body>
-                  </mui-h-stack>
-                </mui-slat>
-
-                <mui-v-stack space="var(--space-025)">
-                  <mui-slat variant="row">
-                    <mui-v-stack slot="start" space="0">
-                      <mui-body size="medium" weight="bold">Espresso Bar</mui-body>
-                      <mui-body size="small">Food & Drink</mui-body>
-                    </mui-v-stack>
-                    <mui-v-stack space="0" slot="end" alignX="end">
-                      <mui-body size="small">Pending</mui-body>
-                      <mui-body size="small">-$8.12</mui-body>
-                    </mui-v-stack>
-                  </mui-slat>
-                </mui-v-stack>
-
-              </mui-v-stack>
-            </mui-tab-panel>
-
-            <mui-tab-panel item="item2">
-              <mui-v-stack alignX="stretch" space="var(--space-000)">
-                <mui-slat variant="header">
-                  <mui-heading size="6" slot="start">Recents</mui-heading>
-                </mui-slat>
-                <mui-v-stack space="var(--space-025)">
-                  <mui-slat variant="action">
-                    <mui-v-stack space="0" slot="start">
-                      <mui-body size="medium" weight="bold">Get a Transactions Report</mui-body>
-                      <mui-body size="small">Generate a PDF of your recent transactions</mui-body>
-                    </mui-v-stack>
-                  </mui-slat>
-              </mui-v-stack>
-            </mui-tab-panel>
-          </mui-v-stack>
-        </mui-tab-controller>
-      </mui-v-stack>`
-  },
-  // COMPOSITION: SIGN UP
-  {
-    role: "user",
-    content: "[composition] Create a sign-up form with fields for first name, last name, email, password, confirm password, a checkbox to agree to terms, and a submit button."
-  },
-  {
-    role: "assistant",
-    content: `
-      <mui-container small center>
-        <mui-card>
-          <mui-card-header>
-            <mui-heading size="3">Sign up for our product!</mui-heading>
-          </mui-card-header>
-          <mui-card-body>
-            <form>
-              <mui-v-stack space="var(--space-400)">
-                <mui-field id="emailField" label="Email">
-                  <mui-input type="email" placeholder="john@example.com" />
-                </mui-field>
-                <mui-field id="passwordField" label="Password">
-                  <mui-input type="password" />
-                </mui-field>
-                <mui-field id="confirmPasswordField" label="Confirm Password">
-                  <mui-input type="password" />
-                </mui-field>
-                <mui-field id="termsField">
-                  <mui-checkbox id="agreeTerms">I agree to the <mui-link href="/terms">terms and conditions</mui-link></mui-checkbox>
-                </mui-field>
-                <mui-button-group right>
-                  <mui-button variant="primary">Sign up</mui-button>
-                </mui-button-group>
-              </mui-v-stack>
-            </form>
-          </mui-card-body>
-        </mui-card>
-      </mui-container>`
+You convert UI prompts into MUI-style custom elements.
+Supported components:
+- Inputs: <mui-addon>, <mui-checkbox>, <mui-field>, <mui-file-upload>, <mui-input>, <mui-progress>, <mui-select>, <mui-switch>
+- Content: <mui-accordion>, <mui-heading>, <mui-body>, <mui-code>, <mui-dialog>, <mui-drawer>, <mui-quote>, <mui-slat>, <mui-smart-card>, <mui-table>, <mui-image>, <figcaption>, <img>, <mui-list>, <mui-list-item>, <mui-icon-*>
+- Layout: <mui-card>, <mui-container>, <mui-responsive>, <mui-rule>, <mui-v-stack>, <mui-h-stack>, <mui-grid>
+- Feedback: <mui-alert>, <mui-badge>, <mui-message>, <mui-loader>
+- Actions: <mui-button>, <mui-button-group>, <mui-chip>, <mui-dropdown>, <mui-link>
+- Navigation: <mui-carousel-controller>, <mui-stepper>, <mui-step>, <mui-tab-controller>, <mui-tab-bar>, <mui-tab-item>
+Rules:
+- If 'mui-scan' is detected, convert the mui-scan code to web components. Refer to this prompt file for context on how to use the components.
+- For mui-scan, preserve the hierarchy and nesting of elements as in the original design.
+- When translating mui-scan code, if you encounter <mui-v-stack>, <mui-h-stack>, or <mui-grid>, append the inline styles like this: <mui-v-stack style="...">.
+- All mui-* components should carry over their props, appended like this: <mui-v-stack space="..." alignx="..." aligny="...">.
+- Maintain proper closing of all custom elements to avoid HTML parsing issues.
+- When responding to a text prompt, strictly follow the user’s directions. Do not include text, content, or components unrelated to the request.
+`
+  },
+  {
+    role: "assistant",
+    name: "examples",
+    content: JSON.stringify({
+      // Inputs
+      field: {
+        placeholder: '<mui-field label="Email"><mui-input type="email" placeholder="you@example.com" value="..."></mui-input></mui-field>',
+        message: `<mui-field label="Name" message="This field doesn't accept special characters"><mui-input></mui-input></mui-field>`,
+        select: `<mui-field label="Brand"><mui-select options='[{ "value": "jpy", "label": "JPY" },{ "value": "usd", "label": "USD" }]'></mui-select></mui-field>`,
+        inputAndSelect: `<mui-field label="Amount to transfer" slot="body"><mui-input type="number"><mui-select slot="after" label="Currency" hide-label style="width: 100px;" options='[{ "value": "jpy", "label": "JPY" },{ "value": "usd", "label": "USD" }]'></mui-select></mui-input></mui-field>`
+      },
+      addon: "<mui-addon>...</mui-addon>",
+      checkbox: "<mui-checkbox>...</mui-checkbox>",
+      fileUpload: "<mui-file-upload>...</mui-file-upload>",
+      input: "<mui-input>...</mui-input>",
+      progress: "<mui-progress>...</mui-progress>",
+      select: "<mui-select>...</mui-select>",
+      switch: "<mui-switch>...</mui-switch>",
+      // Content
+      slat: {
+        default: '<mui-slat><mui-heading slot="start" size="5">...</mui-heading><mui-h-stack slot="end"><mui-body>...</mui-body></mui-h-stack></mui-slat>',
+        header: '<mui-slat variant="header"><mui-heading slot="start" size="6">Heading</mui-heading><mui-h-stack slot="end" alignX="end"><mui-body size="small">End slot</mui-body></mui-h-stack></mui-slat>',
+        row: '<mui-slat variant="row"><mui-v-stack slot="start"><mui-body size="medium" weight="bold">...</mui-body><mui-body size="small">...</mui-body></mui-v-stack><mui-v-stack slot="end" alignX="end"><mui-body size="small">...</mui-body><mui-body size="small">...</mui-body></mui-v-stack></mui-slat>',
+        action: '<mui-slat variant="action"><mui-v-stack slot="start"><mui-body size="medium" weight="bold">...</mui-body><mui-body size="small">...</mui-body></mui-v-stack></mui-slat>'
+      },
+      table: {
+        basic: '<mui-table><mui-row-group heading><mui-row columns="1fr 1fr"><mui-cell>Heading 1</mui-cell><mui-cell>Heading 2</mui-cell></mui-row></mui-row-group><mui-row-group><mui-row columns="1fr 1fr"><mui-cell>Row 1</mui-cell><mui-cell>Row 1</mui-cell></mui-row></mui-row-group></mui-table>'
+      },
+      accordion: {
+        block: '<mui-accordion-group><mui-accordion-block heading="Section A"><div slot="detail">...</div></mui-accordion-block><mui-accordion-block heading="Section B"><div slot="detail">...</div></mui-accordion-block></mui-accordion-group>',
+        inline: '<mui-accordion-inline heading="..."><mui-list as="ul" slot="detail">...</mui-list></mui-accordion-inline>',
+        exclusiveGroup: '<mui-accordion-group exclusive><mui-accordion-block heading="..."><div slot="detail">...</div></mui-accordion-block><mui-accordion-block heading="..."><div slot="detail">...</div></mui-accordion-block></mui-accordion-group>',
+        withLinks: '<mui-accordion-block heading="..." detail-space="none" style="width:26rem;"><mui-v-stack slot="detail" space="var(--space-000)" style="padding:var(--space-100)"><mui-link variant="tertiary" class="nav-link">...</mui-link><mui-link variant="tertiary" class="nav-link">...</mui-link><mui-link variant="tertiary" class="nav-link">...</mui-link></mui-v-stack></mui-accordion-block>',
+        slat: '<mui-accordion-group exclusive><mui-accordion-block heading="..."><mui-v-stack slot="detail"><mui-body>...</mui-body><mui-slat-group><mui-slat variant="header"><mui-heading slot="start" size="6">...</mui-heading><mui-h-stack slot="end" alignX="end"><mui-body size="small">...</mui-body></mui-h-stack></mui-slat><mui-slat variant="action"><mui-v-stack slot="start" space="0"><mui-body size="small" weight="bold">...</mui-body><mui-body size="x-small">...</mui-body></mui-v-stack><mui-v-stack space="0" slot="end" alignX="end"><mui-body size="x-small">...</mui-body></mui-v-stack></mui-slat><mui-slat variant="action"><mui-v-stack slot="start" space="0"><mui-body size="small" weight="bold">...</mui-body><mui-body size="x-small">...</mui-body></mui-v-stack><mui-v-stack space="0" slot="end" alignX="end"><mui-body size="x-small">...</mui-body></mui-v-stack></mui-slat><mui-rule></mui-rule></mui-slat-group></mui-v-stack></mui-accordion-block><mui-accordion-block heading="..."><mui-v-stack slot="detail" space="var(--space-200)" style="max-width:400px;margin:var(--space-200) auto 0;">...</mui-v-stack></mui-accordion-block></mui-accordion-group>'
+      },
+      image: {
+        default: '<mui-image><img slot="image" src="https://muibook.com/images/buttercup.png" alt="..."/></mui-image>',
+        caption: '<mui-image><img slot="image" src="https://muibook.com/images/buttercup.png" alt="..."/><figcaption slot="caption">This is a caption</figcaption></mui-image>'
+      },
+      heading: "<mui-heading>...</mui-heading>",
+      body: "<mui-body>...</mui-body>",
+      code: "<mui-code>...</mui-code>",
+      dialog: "<mui-dialog>...</mui-dialog>",
+      drawer: "<mui-drawer>...</mui-drawer>",
+      quote: "<mui-quote>...</mui-quote>",
+      list: "<mui-list>...</mui-list>",
+      listItem: "<mui-list-item>...</mui-list-item>",
+      icon: "<mui-icon-...></mui-icon-...>",
+      smartCard: {
+        plain: '<mui-smart-card number="1234" type="Debit" logo="https://muibook.com/images/image-220.png" partner="https://muibook.com/images/visa-black.svg" variant="plain"/>'
+      },
+      // Layout
+      card: "<mui-card>...</mui-card>",
+      container: "<mui-container>...</mui-container>",
+      responsive: "<mui-responsive>...</mui-responsive>",
+      rule: "<mui-rule />",
+      vStack: "<mui-v-stack>...</mui-v-stack>",
+      hStack: "<mui-h-stack>...</mui-h-stack>",
+      grid: "<mui-grid>...</mui-grid>",
+      // Feedback
+      alert: {
+        success: '<mui-alert variant="success">...</mui-alert>',
+        info: '<mui-alert variant="info">...</mui-alert>',
+        warning: '<mui-alert variant="warning">...</mui-alert>',
+        attention: '<mui-alert variant="attention">...</mui-alert>',
+        errorWithButton: '<mui-alert variant="error"><mui-button slot="action"><mui-icon-close></mui-icon-close></mui-button></mui-alert>',
+        successWithButton: '<mui-alert variant="success"><mui-button slot="action">Undo</mui-button></mui-alert>',
+        warningWithLink: '<mui-alert variant="warning"><mui-link slot="action">Upgrade</mui-link></mui-alert>'
+      },
+      badge: "<mui-badge>...</mui-badge>",
+      loader: "<mui-loader>...</mui-loader>",
+      // Actions
+      button: {
+        primary: '<mui-button variant="primary">...</mui-button>',
+        secondary: '<mui-button variant="secondary">...</mui-button>',
+        tertiary: '<mui-button variant="tertiary">...</mui-button>',
+        attention: '<mui-button variant="attention">...</mui-button>',
+        before: '<mui-button variant="primary">Add New<mui-icon-add slot="before" size="x-small"></mui-icon-add></mui-button>',
+        after: '<mui-button variant="primary">More<mui-icon-down-chevron slot="after" size="x-small"></mui-icon-down-chevron></mui-button>',
+        iconOnly: '<mui-button variant="primary"><mui-icon-add></mui-icon-add></mui-button>',
+        disabled: "<mui-button disabled>...</mui-button>",
+        toggle: '<mui-button id="btn" variant="primary"><mui-icon-toggle><mui-icon-add slot="start"></mui-icon-add><mui-icon-subtract slot="end"></mui-icon-subtract></mui-icon-toggle></mui-button>',
+        toggleRotate: '<mui-button id="btn" variant="primary"><mui-icon-toggle rotate><mui-icon-add slot="start"></mui-icon-add><mui-icon-subtract slot="end"></mui-icon-subtract></mui-icon-toggle></mui-button>'
+      },
+      buttonGroup: {
+        default: "<mui-button-group>...</mui-button-group>",
+        alignedRight: "<mui-button-group right>...</mui-button-group>"
+      },
+      chip: "<mui-chip>...</mui-chip>",
+      dropdown: "<mui-dropdown>...</mui-dropdown>",
+      link: "<mui-link>...</mui-link>",
+      // Navigation
+      carouselController: "<mui-carousel-controller>...</mui-carousel-controller>",
+      stepper: "<mui-stepper>...</mui-stepper>",
+      step: "<mui-step>...</mui-step>",
+      tabController: "<mui-tab-controller>...</mui-tab-controller>",
+      tabBar: "<mui-tab-bar>...</mui-tab-bar>",
+      tabItem: "<mui-tab-item>...</mui-tab-item>"
+    })
   }
 ];
 export {