designkit-ai 1.0.0

package/components/app-mobile/navbars/top-app-bar-center.html

@@ -0,0 +1,17 @@
+<!--
+  @name: Top App Bar — Center Aligned
+  @category: navbars
+  @kit: app-mobile
+  @width: 360
+  @height: 64
+  @tags: appbar, top, center, navigation
+-->
+<div data-component="Top App Bar — Center Aligned" style="display:flex;align-items:center;width:100%;height:64px;background:var(--kit-bg, #FFFFFF);font-family:var(--kit-font, system-ui, -apple-system, sans-serif);padding:0 8px;box-sizing:border-box">
+  <div style="color:var(--kit-text, #0F172A);padding:12px;cursor:pointer;display:flex;align-items:center;justify-content:center">
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
+  </div>
+  <div style="flex:1;text-align:center;font-size:var(--kit-text-xl, 20px);font-weight:var(--kit-font-normal, 400);color:var(--kit-text, #0F172A)">Title</div>
+  <div style="color:var(--kit-text, #0F172A);padding:12px;cursor:pointer;display:flex;align-items:center;justify-content:center">
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="12" cy="19" r="1.5"/></svg>
+  </div>
+</div>

package/components/app-mobile/navbars/top-app-bar-large.html

@@ -0,0 +1,20 @@
+<!--
+  @name: Top App Bar — Large
+  @category: navbars
+  @kit: app-mobile
+  @width: 360
+  @height: 152
+  @tags: appbar, top, large, display, navigation
+-->
+<div data-component="Top App Bar — Large" style="display:flex;flex-direction:column;width:100%;height:152px;background:var(--kit-bg, #FFFFFF);font-family:var(--kit-font, system-ui, -apple-system, sans-serif);box-sizing:border-box">
+  <div style="display:flex;align-items:center;height:64px;padding:0 8px">
+    <div style="color:var(--kit-text, #0F172A);padding:12px;cursor:pointer;display:flex;align-items:center">
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/></svg>
+    </div>
+    <div style="flex:1"></div>
+    <div style="color:var(--kit-text, #0F172A);padding:12px;cursor:pointer;display:flex;align-items:center">
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="12" cy="19" r="1.5"/></svg>
+    </div>
+  </div>
+  <div style="flex:1;display:flex;align-items:flex-end;padding:0 16px 16px;font-size:var(--kit-text-3xl, 30px);font-weight:var(--kit-font-normal, 400);color:var(--kit-text, #0F172A)">Large Title</div>
+</div>

package/components/app-mobile/navbars/top-app-bar-medium.html

@@ -0,0 +1,20 @@
+<!--
+  @name: Top App Bar — Medium
+  @category: navbars
+  @kit: app-mobile
+  @width: 360
+  @height: 112
+  @tags: appbar, top, medium, headline, navigation
+-->
+<div data-component="Top App Bar — Medium" style="display:flex;flex-direction:column;width:100%;height:112px;background:var(--kit-bg, #FFFFFF);font-family:var(--kit-font, system-ui, -apple-system, sans-serif);box-sizing:border-box">
+  <div style="display:flex;align-items:center;height:64px;padding:0 8px">
+    <div style="color:var(--kit-text, #0F172A);padding:12px;cursor:pointer;display:flex;align-items:center">
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/></svg>
+    </div>
+    <div style="flex:1"></div>
+    <div style="color:var(--kit-text, #0F172A);padding:12px;cursor:pointer;display:flex;align-items:center">
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="12" cy="19" r="1.5"/></svg>
+    </div>
+  </div>
+  <div style="padding:0 16px;font-size:var(--kit-text-2xl, 24px);font-weight:var(--kit-font-normal, 400);color:var(--kit-text, #0F172A)">Medium Title</div>
+</div>

package/components/app-mobile/navbars/top-app-bar-small.html

@@ -0,0 +1,22 @@
+<!--
+  @name: Top App Bar — Small
+  @category: navbars
+  @kit: app-mobile
+  @width: 360
+  @height: 64
+  @tags: appbar, top, small, back, navigation
+-->
+<div data-component="Top App Bar — Small" style="display:flex;align-items:center;width:100%;height:64px;background:var(--kit-bg, #FFFFFF);font-family:var(--kit-font, system-ui, -apple-system, sans-serif);padding:0 8px;box-sizing:border-box;gap:4px">
+  <div style="color:var(--kit-text, #0F172A);padding:12px;cursor:pointer;display:flex;align-items:center">
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/></svg>
+  </div>
+  <div style="flex:1;font-size:var(--kit-text-xl, 20px);font-weight:var(--kit-font-normal, 400);color:var(--kit-text, #0F172A)">Title</div>
+  <div style="display:flex">
+    <div style="color:var(--kit-text, #0F172A);padding:12px;cursor:pointer;display:flex;align-items:center">
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+    </div>
+    <div style="color:var(--kit-text, #0F172A);padding:12px;cursor:pointer;display:flex;align-items:center">
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="12" cy="19" r="1.5"/></svg>
+    </div>
+  </div>
+</div>

package/components/app-mobile/navigation/back-header.html

@@ -0,0 +1,32 @@
+<!--
+  @name: Back Header
+  @kit: app-mobile
+  @width: 360
+  @height: 56
+  @tags: header, back, navigation, title
+-->
+<header data-component="Back Header" style="width:100%;height:56px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;padding:0 var(--kit-space-4, 16px);background:var(--kit-bg, #FFFFFF);border-bottom:1px solid var(--kit-border, #E2E8F0);font-family:var(--kit-font, Inter, system-ui, sans-serif);">
+
+  <!-- Back button -->
+  <button style="width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;cursor:pointer;border-radius:var(--kit-radius, 8px);padding:0;flex-shrink:0;">
+    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="var(--kit-text, #0F172A)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <line x1="19" y1="12" x2="5" y2="12"/>
+      <polyline points="12 19 5 12 12 5"/>
+    </svg>
+  </button>
+
+  <!-- Title -->
+  <span style="font-size:var(--kit-text-md, 16px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A);position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;">Project Details</span>
+
+  <!-- Action button (share) -->
+  <button style="width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;cursor:pointer;border-radius:var(--kit-radius, 8px);padding:0;flex-shrink:0;">
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--kit-text, #0F172A)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <circle cx="18" cy="5" r="3"/>
+      <circle cx="6" cy="12" r="3"/>
+      <circle cx="18" cy="19" r="3"/>
+      <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/>
+      <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/>
+    </svg>
+  </button>
+
+</header>

package/components/app-mobile/navigation/segmented-control.html

@@ -0,0 +1,19 @@
+<!--
+  @name: Segmented Control
+  @kit: app-mobile
+  @width: 320
+  @height: 36
+  @tags: segment, tabs, toggle, control
+-->
+<div data-component="Segmented Control" style="width:100%;height:36px;box-sizing:border-box;display:flex;align-items:center;background:var(--kit-surface-2, #F1F5F9);border-radius:var(--kit-radius, 8px);padding:3px;gap:2px;font-family:var(--kit-font, Inter, system-ui, sans-serif);">
+
+  <!-- All — Active -->
+  <button style="flex:1;height:100%;border:none;border-radius:6px;background:var(--kit-bg, #FFFFFF);color:var(--kit-text, #0F172A);font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-semibold, 600);cursor:pointer;font-family:inherit;box-shadow:0 1px 3px rgba(0,0,0,0.08);display:flex;align-items:center;justify-content:center;">All</button>
+
+  <!-- Active -->
+  <button style="flex:1;height:100%;border:none;border-radius:6px;background:transparent;color:var(--kit-text-2, #475569);font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-medium, 500);cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;">Active</button>
+
+  <!-- Completed -->
+  <button style="flex:1;height:100%;border:none;border-radius:6px;background:transparent;color:var(--kit-text-2, #475569);font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-medium, 500);cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;">Completed</button>
+
+</div>

package/components/app-mobile/navigation/stepper-vertical.html

@@ -0,0 +1,65 @@
+<!--
+  @name: Stepper — Vertical
+  @kit: app-mobile
+  @width: 300
+  @height: 280
+  @tags: stepper, steps, vertical, progress
+-->
+<div data-component="Stepper — Vertical" style="width:100%;box-sizing:border-box;display:flex;flex-direction:column;padding:var(--kit-space-4, 16px);font-family:var(--kit-font, Inter, system-ui, sans-serif);">
+
+  <!-- Step 1: Account — Done -->
+  <div style="display:flex;gap:var(--kit-space-3, 12px);">
+    <div style="display:flex;flex-direction:column;align-items:center;flex-shrink:0;">
+      <div style="width:28px;height:28px;border-radius:var(--kit-radius-full, 9999px);background:var(--kit-success, #22C55E);display:flex;align-items:center;justify-content:center;">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
+      </div>
+      <div style="width:2px;flex:1;background:var(--kit-success, #22C55E);margin:var(--kit-space-1, 4px) 0;min-height:28px;"></div>
+    </div>
+    <div style="padding-bottom:var(--kit-space-4, 16px);">
+      <div style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A);">Create Account</div>
+      <div style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-3, #94A3B8);margin-top:2px;">Sign up with email and password</div>
+    </div>
+  </div>
+
+  <!-- Step 2: Profile — Active -->
+  <div style="display:flex;gap:var(--kit-space-3, 12px);">
+    <div style="display:flex;flex-direction:column;align-items:center;flex-shrink:0;">
+      <div style="width:28px;height:28px;border-radius:var(--kit-radius-full, 9999px);background:var(--kit-primary, #6366F1);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 4px rgba(99,102,241,0.2);">
+        <span style="font-size:var(--kit-text-xs, 12px);font-weight:var(--kit-font-bold, 700);color:#FFFFFF;">2</span>
+      </div>
+      <div style="width:2px;flex:1;background:var(--kit-border, #E2E8F0);margin:var(--kit-space-1, 4px) 0;min-height:28px;"></div>
+    </div>
+    <div style="padding-bottom:var(--kit-space-4, 16px);">
+      <div style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-primary, #6366F1);">Complete Profile</div>
+      <div style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-2, #475569);margin-top:2px;">Add your name and photo</div>
+    </div>
+  </div>
+
+  <!-- Step 3: Preferences — Pending -->
+  <div style="display:flex;gap:var(--kit-space-3, 12px);">
+    <div style="display:flex;flex-direction:column;align-items:center;flex-shrink:0;">
+      <div style="width:28px;height:28px;border-radius:var(--kit-radius-full, 9999px);background:var(--kit-surface-2, #F1F5F9);border:2px solid var(--kit-border, #E2E8F0);display:flex;align-items:center;justify-content:center;">
+        <span style="font-size:var(--kit-text-xs, 12px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text-3, #94A3B8);">3</span>
+      </div>
+      <div style="width:2px;flex:1;background:var(--kit-border, #E2E8F0);margin:var(--kit-space-1, 4px) 0;min-height:28px;"></div>
+    </div>
+    <div style="padding-bottom:var(--kit-space-4, 16px);">
+      <div style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text-3, #94A3B8);">Set Preferences</div>
+      <div style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-3, #94A3B8);margin-top:2px;">Choose your interests</div>
+    </div>
+  </div>
+
+  <!-- Step 4: Done — Pending -->
+  <div style="display:flex;gap:var(--kit-space-3, 12px);">
+    <div style="display:flex;flex-direction:column;align-items:center;flex-shrink:0;">
+      <div style="width:28px;height:28px;border-radius:var(--kit-radius-full, 9999px);background:var(--kit-surface-2, #F1F5F9);border:2px solid var(--kit-border, #E2E8F0);display:flex;align-items:center;justify-content:center;">
+        <span style="font-size:var(--kit-text-xs, 12px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text-3, #94A3B8);">4</span>
+      </div>
+    </div>
+    <div>
+      <div style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text-3, #94A3B8);">Get Started</div>
+      <div style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-3, #94A3B8);margin-top:2px;">You're all set!</div>
+    </div>
+  </div>
+
+</div>

package/components/app-mobile/patterns/accordion.html

@@ -0,0 +1,20 @@
+<!--
+  @name: Accordion / Expandable Section
+  @category: patterns
+  @kit: app-mobile
+  @width: 360
+  @height: 180
+  @tags: accordion, expandable, collapse, faq, section
+-->
+<div data-component="Accordion / Expandable Section" style="width:100%;font-family:var(--kit-font, system-ui, -apple-system, sans-serif);border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius-md, 12px);overflow:hidden">
+  <div style="display:flex;align-items:center;padding:16px;cursor:pointer;background:var(--kit-surface, #F8FAFC)">
+    <div style="flex:1;font-size:var(--kit-text-md, 16px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text, #0F172A)">Section Title (Expanded)</div>
+    <div style="color:var(--kit-text-2, #475569);transform:rotate(180deg)"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></div>
+  </div>
+  <div style="padding:0 16px 16px;font-size:var(--kit-text-sm, 14px);color:var(--kit-text-2, #475569);line-height:1.5">This is the expanded content area. You can put any content here including text, lists, images, or other components.</div>
+  <div style="border-top:1px solid var(--kit-border, #E2E8F0)"></div>
+  <div style="display:flex;align-items:center;padding:16px;cursor:pointer">
+    <div style="flex:1;font-size:var(--kit-text-md, 16px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text, #0F172A)">Collapsed Section</div>
+    <div style="color:var(--kit-text-2, #475569)"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></div>
+  </div>
+</div>

package/components/app-mobile/patterns/activity-feed.html

@@ -0,0 +1,26 @@
+<!--
+  @name: Activity Feed — Timeline
+  @category: patterns
+  @kit: app-mobile
+  @width: 360
+  @height: 300
+  @tags: activity, feed, timeline, log, history
+-->
+<div data-component="Activity Feed — Timeline" style="width:100%;font-family:var(--kit-font, system-ui, -apple-system, sans-serif);padding:0 16px;box-sizing:border-box">
+  <div style="display:flex;gap:12px;padding-bottom:20px">
+    <div style="display:flex;flex-direction:column;align-items:center;width:24px;flex-shrink:0"><div style="width:10px;height:10px;border-radius:5px;background:var(--kit-success, #22C55E);margin-top:4px;flex-shrink:0"></div><div style="width:2px;flex:1;background:var(--kit-border, #E2E8F0)"></div></div>
+    <div><div style="font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A);line-height:1.4"><span style="font-weight:600">Alex</span> completed <span style="font-weight:600">Homepage design</span></div><div style="font-size:11px;color:var(--kit-text-3, #94A3B8);margin-top:3px">2 hours ago</div></div>
+  </div>
+  <div style="display:flex;gap:12px;padding-bottom:20px">
+    <div style="display:flex;flex-direction:column;align-items:center;width:24px;flex-shrink:0"><div style="width:10px;height:10px;border-radius:5px;background:var(--kit-primary, #6366F1);margin-top:4px;flex-shrink:0"></div><div style="width:2px;flex:1;background:var(--kit-border, #E2E8F0)"></div></div>
+    <div><div style="font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A);line-height:1.4"><span style="font-weight:600">Sarah</span> commented on <span style="font-weight:600">API docs</span></div><div style="font-size:11px;color:var(--kit-text-3, #94A3B8);margin-top:3px">5 hours ago</div></div>
+  </div>
+  <div style="display:flex;gap:12px;padding-bottom:20px">
+    <div style="display:flex;flex-direction:column;align-items:center;width:24px;flex-shrink:0"><div style="width:10px;height:10px;border-radius:5px;background:var(--kit-warning, #F59E0B);margin-top:4px;flex-shrink:0"></div><div style="width:2px;flex:1;background:var(--kit-border, #E2E8F0)"></div></div>
+    <div><div style="font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A);line-height:1.4"><span style="font-weight:600">Mike</span> created project <span style="font-weight:600">v2 Launch</span></div><div style="font-size:11px;color:var(--kit-text-3, #94A3B8);margin-top:3px">Yesterday</div></div>
+  </div>
+  <div style="display:flex;gap:12px">
+    <div style="display:flex;flex-direction:column;align-items:center;width:24px;flex-shrink:0"><div style="width:10px;height:10px;border-radius:5px;background:var(--kit-text-3, #94A3B8);margin-top:4px"></div></div>
+    <div><div style="font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A)"><span style="font-weight:600">Emma</span> joined the team</div><div style="font-size:11px;color:var(--kit-text-3, #94A3B8);margin-top:3px">2 days ago</div></div>
+  </div>
+</div>

package/components/app-mobile/patterns/audio-waveform.html

@@ -0,0 +1,34 @@
+<!--
+  @name: Audio Waveform — Voice Message
+  @category: patterns
+  @kit: app-mobile
+  @width: 260
+  @height: 48
+  @tags: audio, waveform, voice, message, sound
+-->
+<div data-component="Audio Waveform — Voice Message" style="display:flex;align-items:center;gap:10px;width:260px;height:48px;background:var(--kit-surface, #F8FAFC);border-radius:24px;padding:0 6px 0 4px;box-sizing:border-box;font-family:var(--kit-font, system-ui, -apple-system, sans-serif)">
+  <div style="width:36px;height:36px;border-radius:18px;background:var(--kit-primary, #6366F1);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0"><svg width="14" height="14" viewBox="0 0 24 24" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="1"><polygon points="5 3 19 12 5 21 5 3"/></svg></div>
+  <div style="flex:1;display:flex;align-items:center;gap:1.5px;height:28px">
+    <div style="width:3px;height:6px;background:var(--kit-primary, #6366F1);border-radius:2px;opacity:0.9"></div>
+    <div style="width:3px;height:14px;background:var(--kit-primary, #6366F1);border-radius:2px;opacity:0.9"></div>
+    <div style="width:3px;height:8px;background:var(--kit-primary, #6366F1);border-radius:2px;opacity:0.9"></div>
+    <div style="width:3px;height:20px;background:var(--kit-primary, #6366F1);border-radius:2px;opacity:0.9"></div>
+    <div style="width:3px;height:12px;background:var(--kit-primary, #6366F1);border-radius:2px;opacity:0.9"></div>
+    <div style="width:3px;height:24px;background:var(--kit-primary, #6366F1);border-radius:2px;opacity:0.9"></div>
+    <div style="width:3px;height:10px;background:var(--kit-primary, #6366F1);border-radius:2px;opacity:0.9"></div>
+    <div style="width:3px;height:18px;background:var(--kit-primary, #6366F1);border-radius:2px;opacity:0.9"></div>
+    <div style="width:3px;height:6px;background:var(--kit-primary, #6366F1);border-radius:2px;opacity:0.9"></div>
+    <div style="width:3px;height:16px;background:var(--kit-primary, #6366F1);border-radius:2px;opacity:0.9"></div>
+    <div style="width:3px;height:22px;background:var(--kit-primary, #6366F1);border-radius:2px;opacity:0.9"></div>
+    <div style="width:3px;height:8px;background:var(--kit-primary, #6366F1);border-radius:2px;opacity:0.9"></div>
+    <div style="width:3px;height:14px;background:var(--kit-text-3, #94A3B8);border-radius:2px;opacity:0.4"></div>
+    <div style="width:3px;height:6px;background:var(--kit-text-3, #94A3B8);border-radius:2px;opacity:0.4"></div>
+    <div style="width:3px;height:18px;background:var(--kit-text-3, #94A3B8);border-radius:2px;opacity:0.4"></div>
+    <div style="width:3px;height:10px;background:var(--kit-text-3, #94A3B8);border-radius:2px;opacity:0.4"></div>
+    <div style="width:3px;height:20px;background:var(--kit-text-3, #94A3B8);border-radius:2px;opacity:0.4"></div>
+    <div style="width:3px;height:8px;background:var(--kit-text-3, #94A3B8);border-radius:2px;opacity:0.4"></div>
+    <div style="width:3px;height:12px;background:var(--kit-text-3, #94A3B8);border-radius:2px;opacity:0.4"></div>
+    <div style="width:3px;height:6px;background:var(--kit-text-3, #94A3B8);border-radius:2px;opacity:0.4"></div>
+  </div>
+  <span style="font-size:12px;color:var(--kit-text-3, #94A3B8);flex-shrink:0">0:23</span>
+</div>

package/components/app-mobile/patterns/avatar-group.html

@@ -0,0 +1,14 @@
+<!--
+  @name: Avatar Group — Stacked
+  @category: patterns
+  @kit: app-mobile
+  @width: 120
+  @height: 32
+  @tags: avatar, group, stack, team, users
+-->
+<div data-component="Avatar Group — Stacked" style="display:flex;align-items:center;font-family:var(--kit-font, system-ui, -apple-system, sans-serif)">
+  <div style="width:32px;height:32px;border-radius:16px;background:#6366F1;border:2px solid var(--kit-bg, #FFFFFF);display:flex;align-items:center;justify-content:center;color:#FFFFFF;font-size:12px;font-weight:600;z-index:4">A</div>
+  <div style="width:32px;height:32px;border-radius:16px;background:#EC4899;border:2px solid var(--kit-bg, #FFFFFF);display:flex;align-items:center;justify-content:center;color:#FFFFFF;font-size:12px;font-weight:600;margin-left:-8px;z-index:3">B</div>
+  <div style="width:32px;height:32px;border-radius:16px;background:#10B981;border:2px solid var(--kit-bg, #FFFFFF);display:flex;align-items:center;justify-content:center;color:#FFFFFF;font-size:12px;font-weight:600;margin-left:-8px;z-index:2">C</div>
+  <div style="width:32px;height:32px;border-radius:16px;background:var(--kit-surface-2, #F1F5F9);border:2px solid var(--kit-bg, #FFFFFF);display:flex;align-items:center;justify-content:center;color:var(--kit-text-2, #475569);font-size:11px;font-weight:600;margin-left:-8px;z-index:1">+5</div>
+</div>

package/components/app-mobile/patterns/breadcrumb.html

@@ -0,0 +1,15 @@
+<!--
+  @name: Breadcrumb Navigation
+  @category: patterns
+  @kit: app-mobile
+  @width: 360
+  @height: 32
+  @tags: breadcrumb, navigation, path, hierarchy
+-->
+<div data-component="Breadcrumb Navigation" style="display:flex;align-items:center;gap:4px;font-family:var(--kit-font, system-ui, -apple-system, sans-serif);font-size:var(--kit-text-sm, 14px);padding:0 16px">
+  <span style="color:var(--kit-primary, #6366F1);cursor:pointer">Home</span>
+  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--kit-text-3, #94A3B8)" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
+  <span style="color:var(--kit-primary, #6366F1);cursor:pointer">Products</span>
+  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--kit-text-3, #94A3B8)" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
+  <span style="color:var(--kit-text-2, #475569)">Electronics</span>
+</div>

package/components/app-mobile/patterns/calendar-month.html

@@ -0,0 +1,56 @@
+<!--
+  @name: Calendar — Month View
+  @category: patterns
+  @kit: app-mobile
+  @width: 360
+  @height: 380
+  @tags: calendar, month, grid, date, schedule, events
+-->
+<div data-component="Calendar — Month View" style="width:100%;background:var(--kit-bg, #FFFFFF);font-family:var(--kit-font, system-ui, -apple-system, sans-serif);padding:16px;box-sizing:border-box">
+  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px">
+    <div style="cursor:pointer;color:var(--kit-text-2, #475569)"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg></div>
+    <div style="font-size:var(--kit-text-lg, 18px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A)">March 2026</div>
+    <div style="cursor:pointer;color:var(--kit-text-2, #475569)"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg></div>
+  </div>
+  <div style="display:grid;grid-template-columns:repeat(7,1fr);gap:0;text-align:center">
+    <div style="height:32px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--kit-text-3, #94A3B8)">Sun</div>
+    <div style="height:32px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--kit-text-3, #94A3B8)">Mon</div>
+    <div style="height:32px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--kit-text-3, #94A3B8)">Tue</div>
+    <div style="height:32px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--kit-text-3, #94A3B8)">Wed</div>
+    <div style="height:32px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--kit-text-3, #94A3B8)">Thu</div>
+    <div style="height:32px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--kit-text-3, #94A3B8)">Fri</div>
+    <div style="height:32px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--kit-text-3, #94A3B8)">Sat</div>
+    <div style="height:44px"></div>
+    <div style="height:44px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">1</div>
+    <div style="height:44px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">2</div>
+    <div style="height:44px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">3</div>
+    <div style="height:44px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">4</div>
+    <div style="height:44px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">5</div>
+    <div style="height:44px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">6</div>
+    <div style="height:44px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">7</div>
+    <div style="height:44px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">8</div>
+    <div style="height:44px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">9</div>
+    <div style="height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">10<div style="width:4px;height:4px;border-radius:2px;background:var(--kit-primary, #6366F1);margin-top:2px"></div></div>
+    <div style="height:44px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">11</div>
+    <div style="height:44px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">12</div>
+    <div style="height:44px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">13</div>
+    <div style="height:44px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">14</div>
+    <div style="height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">15<div style="width:4px;height:4px;border-radius:2px;background:var(--kit-danger, #EF4444);margin-top:2px"></div></div>
+    <div style="height:44px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">16</div>
+    <div style="height:44px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">17</div>
+    <div style="height:44px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">18</div>
+    <div style="height:44px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">19</div>
+    <div style="height:44px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">20</div>
+    <div style="height:44px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">21</div>
+    <div style="height:44px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">22</div>
+    <div style="height:44px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">23</div>
+    <div style="height:44px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">24</div>
+    <div style="height:44px;display:flex;align-items:center;justify-content:center"><div style="width:36px;height:36px;border-radius:18px;background:var(--kit-primary, #6366F1);color:#FFFFFF;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600">25</div></div>
+    <div style="height:44px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">26</div>
+    <div style="height:44px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">27</div>
+    <div style="height:44px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">28</div>
+    <div style="height:44px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">29</div>
+    <div style="height:44px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">30</div>
+    <div style="height:44px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A)">31</div>
+  </div>
+</div>

package/components/app-mobile/patterns/camera-viewfinder.html

@@ -0,0 +1,33 @@
+<!--
+  @name: Camera Viewfinder — with Capture
+  @category: patterns
+  @kit: app-mobile
+  @width: 360
+  @height: 640
+  @tags: camera, viewfinder, capture, photo, shutter
+-->
+<div data-component="Camera Viewfinder — with Capture" style="width:100%;height:100%;background:#000;position:relative;font-family:var(--kit-font, system-ui, -apple-system, sans-serif);display:flex;flex-direction:column">
+  <div style="display:flex;align-items:center;justify-content:space-between;padding:16px;z-index:1">
+    <div style="cursor:pointer"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></div>
+    <div style="cursor:pointer"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg></div>
+    <div style="cursor:pointer"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9c.26.604.852.997 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1.08z"/></svg></div>
+  </div>
+  <div style="flex:1;display:flex;align-items:center;justify-content:center;position:relative">
+    <div style="width:260px;height:260px;border:2px solid rgba(255,255,255,0.3);border-radius:16px;position:relative">
+      <div style="position:absolute;top:-2px;left:-2px;width:24px;height:24px;border-top:3px solid #FFFFFF;border-left:3px solid #FFFFFF;border-radius:8px 0 0 0"></div>
+      <div style="position:absolute;top:-2px;right:-2px;width:24px;height:24px;border-top:3px solid #FFFFFF;border-right:3px solid #FFFFFF;border-radius:0 8px 0 0"></div>
+      <div style="position:absolute;bottom:-2px;left:-2px;width:24px;height:24px;border-bottom:3px solid #FFFFFF;border-left:3px solid #FFFFFF;border-radius:0 0 0 8px"></div>
+      <div style="position:absolute;bottom:-2px;right:-2px;width:24px;height:24px;border-bottom:3px solid #FFFFFF;border-right:3px solid #FFFFFF;border-radius:0 0 8px 0"></div>
+    </div>
+  </div>
+  <div style="display:flex;align-items:center;justify-content:center;gap:48px;padding:24px 0 48px">
+    <div style="width:48px;height:48px;border-radius:8px;border:2px solid rgba(255,255,255,0.3);overflow:hidden;cursor:pointer"><img src="https://placehold.jp/48x48.png" style="width:100%;height:100%;object-fit:cover" alt="Last photo"/></div>
+    <div style="width:72px;height:72px;border-radius:36px;border:4px solid #FFFFFF;display:flex;align-items:center;justify-content:center;cursor:pointer"><div style="width:60px;height:60px;border-radius:30px;background:#FFFFFF"></div></div>
+    <div style="width:48px;height:48px;display:flex;align-items:center;justify-content:center;cursor:pointer"><svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg></div>
+  </div>
+  <div style="display:flex;justify-content:center;gap:24px;padding-bottom:16px">
+    <span style="font-size:13px;color:rgba(255,255,255,0.5);cursor:pointer">Video</span>
+    <span style="font-size:13px;color:#FFFFFF;font-weight:600">Photo</span>
+    <span style="font-size:13px;color:rgba(255,255,255,0.5);cursor:pointer">Portrait</span>
+  </div>
+</div>

package/components/app-mobile/patterns/card-horizontal.html

@@ -0,0 +1,15 @@
+<!--
+  @name: Card — Horizontal (Image + Content)
+  @category: patterns
+  @kit: app-mobile
+  @width: 360
+  @height: 100
+  @tags: card, horizontal, image, list, article
+-->
+<div data-component="Card — Horizontal (Image + Content)" style="display:flex;width:100%;background:var(--kit-surface, #F8FAFC);border-radius:var(--kit-radius-md, 12px);overflow:hidden;font-family:var(--kit-font, system-ui, -apple-system, sans-serif)">
+  <img src="https://placehold.jp/100x100.png" style="width:100px;height:100px;object-fit:cover;flex-shrink:0;display:block" alt="Card image"/>
+  <div style="flex:1;padding:12px 16px;display:flex;flex-direction:column;justify-content:center;min-width:0">
+    <div style="font-size:var(--kit-text-md, 16px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text, #0F172A);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Card Title Here</div>
+    <div style="font-size:var(--kit-text-sm, 13px);color:var(--kit-text-2, #475569);margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4">Supporting text with a brief description that may span two lines.</div>
+  </div>
+</div>

package/components/app-mobile/patterns/cart-item.html

@@ -0,0 +1,23 @@
+<!--
+  @name: Cart Item Row
+  @category: patterns
+  @kit: app-mobile
+  @width: 360
+  @height: 100
+  @tags: cart, item, ecommerce, quantity, price
+-->
+<div data-component="Cart Item Row" style="display:flex;width:100%;padding:12px 0;gap:12px;font-family:var(--kit-font, system-ui, -apple-system, sans-serif);align-items:center">
+  <img src="https://placehold.jp/80x80.png" style="width:80px;height:80px;border-radius:var(--kit-radius, 8px);object-fit:cover;flex-shrink:0;display:block" alt="Product"/>
+  <div style="flex:1;min-width:0">
+    <div style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text, #0F172A)">Product Name</div>
+    <div style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-3, #94A3B8);margin-top:2px">Size: M • Color: Blue</div>
+    <div style="display:flex;align-items:center;justify-content:space-between;margin-top:10px">
+      <div style="display:flex;align-items:center;gap:0;border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius, 8px);overflow:hidden">
+        <div style="width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--kit-text-2, #475569)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="5" y1="12" x2="19" y2="12"/></svg></div>
+        <div style="width:36px;height:32px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500;color:var(--kit-text, #0F172A);border-left:1px solid var(--kit-border, #E2E8F0);border-right:1px solid var(--kit-border, #E2E8F0)">2</div>
+        <div style="width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--kit-text-2, #475569)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></div>
+      </div>
+      <div style="font-size:var(--kit-text-md, 16px);font-weight:var(--kit-font-bold, 700);color:var(--kit-text, #0F172A)">$79.99</div>
+    </div>
+  </div>
+</div>

package/components/app-mobile/patterns/category-pills.html

@@ -0,0 +1,15 @@
+<!--
+  @name: Category Pills — Horizontal Scroll
+  @category: patterns
+  @kit: app-mobile
+  @width: 360
+  @height: 40
+  @tags: category, pills, filter, tags, horizontal, scroll
+-->
+<div data-component="Category Pills — Horizontal Scroll" style="display:flex;gap:8px;width:100%;overflow-x:auto;font-family:var(--kit-font, system-ui, -apple-system, sans-serif);padding:0 16px;box-sizing:border-box">
+  <div style="height:32px;padding:0 16px;border-radius:16px;background:var(--kit-primary, #6366F1);color:#FFFFFF;font-size:var(--kit-text-sm, 13px);font-weight:var(--kit-font-medium, 500);display:flex;align-items:center;white-space:nowrap;flex-shrink:0">All</div>
+  <div style="height:32px;padding:0 16px;border-radius:16px;background:var(--kit-surface-2, #F1F5F9);color:var(--kit-text, #0F172A);font-size:var(--kit-text-sm, 13px);display:flex;align-items:center;white-space:nowrap;flex-shrink:0">Popular</div>
+  <div style="height:32px;padding:0 16px;border-radius:16px;background:var(--kit-surface-2, #F1F5F9);color:var(--kit-text, #0F172A);font-size:var(--kit-text-sm, 13px);display:flex;align-items:center;white-space:nowrap;flex-shrink:0">Recent</div>
+  <div style="height:32px;padding:0 16px;border-radius:16px;background:var(--kit-surface-2, #F1F5F9);color:var(--kit-text, #0F172A);font-size:var(--kit-text-sm, 13px);display:flex;align-items:center;white-space:nowrap;flex-shrink:0">Trending</div>
+  <div style="height:32px;padding:0 16px;border-radius:16px;background:var(--kit-surface-2, #F1F5F9);color:var(--kit-text, #0F172A);font-size:var(--kit-text-sm, 13px);display:flex;align-items:center;white-space:nowrap;flex-shrink:0">Favorites</div>
+</div>

package/components/app-mobile/patterns/chat-bubble-received.html

@@ -0,0 +1,15 @@
+<!--
+  @name: Chat Bubble — Received
+  @category: patterns
+  @kit: app-mobile
+  @width: 260
+  @height: 60
+  @tags: chat, bubble, message, received, incoming
+-->
+<div data-component="Chat Bubble — Received" style="display:flex;justify-content:flex-start;width:100%;font-family:var(--kit-font, system-ui, -apple-system, sans-serif);gap:8px">
+  <div style="width:32px;height:32px;border-radius:16px;background:var(--kit-surface-2, #F1F5F9);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--kit-text-3, #94A3B8)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg></div>
+  <div style="max-width:70%;background:var(--kit-surface, #F8FAFC);color:var(--kit-text, #0F172A);border-radius:18px 18px 18px 4px;padding:10px 16px;font-size:var(--kit-text-sm, 14px);line-height:1.4">
+    Sure! That new ramen place sounds great 🍜
+    <div style="font-size:11px;color:var(--kit-text-3, #94A3B8);margin-top:4px">10:31 AM</div>
+  </div>
+</div>

package/components/app-mobile/patterns/chat-bubble-sent.html

@@ -0,0 +1,14 @@
+<!--
+  @name: Chat Bubble — Sent
+  @category: patterns
+  @kit: app-mobile
+  @width: 260
+  @height: 60
+  @tags: chat, bubble, message, sent, outgoing
+-->
+<div data-component="Chat Bubble — Sent" style="display:flex;justify-content:flex-end;width:100%;font-family:var(--kit-font, system-ui, -apple-system, sans-serif)">
+  <div style="max-width:75%;background:var(--kit-primary, #6366F1);color:var(--kit-primary-fg, #FFFFFF);border-radius:18px 18px 4px 18px;padding:10px 16px;font-size:var(--kit-text-sm, 14px);line-height:1.4">
+    Hey! Are you free for lunch today?
+    <div style="font-size:11px;opacity:0.7;text-align:right;margin-top:4px">10:30 AM ✓✓</div>
+  </div>
+</div>

package/components/app-mobile/patterns/chat-conversation.html

@@ -0,0 +1,27 @@
+<!--
+  @name: Chat Conversation — Full Screen
+  @category: patterns
+  @kit: app-mobile
+  @width: 360
+  @height: 640
+  @tags: chat, conversation, messages, full-screen, inbox
+-->
+<div data-component="Chat Conversation — Full Screen" style="width:100%;height:100%;display:flex;flex-direction:column;background:var(--kit-bg, #FFFFFF);font-family:var(--kit-font, system-ui, -apple-system, sans-serif)">
+  <div style="display:flex;align-items:center;height:56px;padding:0 8px;border-bottom:1px solid var(--kit-border, #E2E8F0);gap:8px;flex-shrink:0">
+    <div style="padding:8px;color:var(--kit-text, #0F172A);cursor:pointer"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/></svg></div>
+    <div style="width:36px;height:36px;border-radius:18px;background:var(--kit-primary, #6366F1);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;flex-shrink:0">SC</div>
+    <div style="flex:1"><div style="font-size:15px;font-weight:600;color:var(--kit-text, #0F172A)">Sarah Chen</div><div style="font-size:12px;color:var(--kit-success, #22C55E)">Online</div></div>
+    <div style="padding:8px;color:var(--kit-text-2, #475569)"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg></div>
+  </div>
+  <div style="flex:1;padding:16px;display:flex;flex-direction:column;gap:12px;overflow-y:auto">
+    <div style="display:flex;gap:8px;max-width:80%"><div style="width:28px;height:28px;border-radius:14px;background:var(--kit-primary, #6366F1);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex-shrink:0;margin-top:2px">SC</div><div><div style="background:var(--kit-surface, #F8FAFC);border-radius:4px 16px 16px 16px;padding:10px 14px;font-size:15px;color:var(--kit-text, #0F172A);line-height:1.4">Hey! How's the project coming along?</div><div style="font-size:11px;color:var(--kit-text-3, #94A3B8);margin-top:3px">10:30 AM</div></div></div>
+    <div style="display:flex;justify-content:flex-end"><div><div style="background:var(--kit-primary, #6366F1);color:#fff;border-radius:16px 4px 16px 16px;padding:10px 14px;font-size:15px;line-height:1.4">Almost done! Just finishing the dark mode.</div><div style="font-size:11px;color:var(--kit-text-3, #94A3B8);margin-top:3px;text-align:right">10:32 AM</div></div></div>
+    <div style="display:flex;gap:8px;max-width:80%"><div style="width:28px;height:28px;border-radius:14px;background:var(--kit-primary, #6366F1);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex-shrink:0;margin-top:2px">SC</div><div><div style="background:var(--kit-surface, #F8FAFC);border-radius:4px 16px 16px 16px;padding:10px 14px;font-size:15px;color:var(--kit-text, #0F172A);line-height:1.4">Awesome! Can't wait to see it</div><div style="font-size:11px;color:var(--kit-text-3, #94A3B8);margin-top:3px">10:33 AM</div></div></div>
+    <div style="display:flex;justify-content:flex-end"><div><div style="background:var(--kit-primary, #6366F1);color:#fff;border-radius:16px 4px 16px 16px;padding:10px 14px;font-size:15px;line-height:1.4">I'll share the preview link tonight</div><div style="font-size:11px;color:var(--kit-text-3, #94A3B8);margin-top:3px;text-align:right">10:35 AM</div></div></div>
+  </div>
+  <div style="display:flex;align-items:center;padding:8px 12px;border-top:1px solid var(--kit-border, #E2E8F0);gap:8px;flex-shrink:0">
+    <div style="padding:6px;cursor:pointer;color:var(--kit-text-2, #475569)"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></div>
+    <div style="flex:1;height:40px;background:var(--kit-surface, #F8FAFC);border-radius:20px;padding:0 16px;display:flex;align-items:center;font-size:15px;color:var(--kit-text-3, #94A3B8)">Message...</div>
+    <div style="width:40px;height:40px;border-radius:20px;background:var(--kit-primary, #6366F1);display:flex;align-items:center;justify-content:center;cursor:pointer"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg></div>
+  </div>
+</div>

package/components/app-mobile/patterns/chat-input-bar.html

@@ -0,0 +1,13 @@
+<!--
+  @name: Chat Input Bar
+  @category: patterns
+  @kit: app-mobile
+  @width: 360
+  @height: 56
+  @tags: chat, input, message, compose, send, attach
+-->
+<div data-component="Chat Input Bar" style="display:flex;align-items:center;width:100%;height:56px;padding:8px;gap:8px;box-sizing:border-box;font-family:var(--kit-font, system-ui, -apple-system, sans-serif)">
+  <div style="padding:8px;cursor:pointer;color:var(--kit-text-2, #475569);display:flex;align-items:center"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></div>
+  <div style="flex:1;height:40px;background:var(--kit-surface, #F8FAFC);border-radius:20px;padding:0 16px;display:flex;align-items:center;font-size:var(--kit-text-sm, 14px);color:var(--kit-text-3, #94A3B8)">Type a message...</div>
+  <div style="width:40px;height:40px;border-radius:20px;background:var(--kit-primary, #6366F1);display:flex;align-items:center;justify-content:center;cursor:pointer"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg></div>
+</div>