designkit-ai 1.0.0

package/components/app-mobile/patterns/code-editor.html

@@ -0,0 +1,29 @@
+<!--
+  @name: Code Editor — Syntax Highlighted
+  @category: patterns
+  @kit: app-mobile
+  @width: 360
+  @height: 240
+  @tags: code, editor, syntax, highlight, developer
+-->
+<div data-component="Code Editor — Syntax Highlighted" style="width:100%;background:#1E1E2E;border-radius:var(--kit-radius-md, 12px);overflow:hidden;font-family:ui-monospace, SFMono-Regular, Menlo, monospace">
+  <div style="display:flex;align-items:center;height:36px;padding:0 12px;background:#181825;gap:6px">
+    <div style="width:12px;height:12px;border-radius:6px;background:#F38BA8"></div>
+    <div style="width:12px;height:12px;border-radius:6px;background:#FAB387"></div>
+    <div style="width:12px;height:12px;border-radius:6px;background:#A6E3A1"></div>
+    <span style="margin-left:auto;font-size:12px;color:#6C7086">app.ts</span>
+  </div>
+  <div style="padding:16px;font-size:13px;line-height:1.7;overflow-x:auto">
+    <div><span style="color:#CBA6F7">import</span> <span style="color:#89B4FA">{ useState }</span> <span style="color:#CBA6F7">from</span> <span style="color:#A6E3A1">'react'</span><span style="color:#6C7086">;</span></div>
+    <div style="height:8px"></div>
+    <div><span style="color:#CBA6F7">function</span> <span style="color:#89B4FA">Counter</span><span style="color:#F9E2AF">()</span> <span style="color:#F9E2AF">{</span></div>
+    <div style="padding-left:20px"><span style="color:#CBA6F7">const</span> <span style="color:#CDD6F4">[count, setCount]</span> <span style="color:#89DCEB">=</span> <span style="color:#89B4FA">useState</span><span style="color:#F9E2AF">(</span><span style="color:#FAB387">0</span><span style="color:#F9E2AF">)</span><span style="color:#6C7086">;</span></div>
+    <div style="height:8px"></div>
+    <div style="padding-left:20px"><span style="color:#CBA6F7">return</span> <span style="color:#F9E2AF">(</span></div>
+    <div style="padding-left:40px"><span style="color:#89DCEB">&lt;</span><span style="color:#89B4FA">button</span> <span style="color:#F9E2AF">onClick</span><span style="color:#89DCEB">=</span><span style="color:#F9E2AF">{()</span> <span style="color:#CBA6F7">=></span> <span style="color:#89B4FA">setCount</span><span style="color:#F9E2AF">(</span><span style="color:#CDD6F4">count</span> <span style="color:#89DCEB">+</span> <span style="color:#FAB387">1</span><span style="color:#F9E2AF">)}</span><span style="color:#89DCEB">></span></div>
+    <div style="padding-left:60px"><span style="color:#CDD6F4">Clicks: {count}</span></div>
+    <div style="padding-left:40px"><span style="color:#89DCEB">&lt;/</span><span style="color:#89B4FA">button</span><span style="color:#89DCEB">></span></div>
+    <div style="padding-left:20px"><span style="color:#F9E2AF">)</span><span style="color:#6C7086">;</span></div>
+    <div><span style="color:#F9E2AF">}</span></div>
+  </div>
+</div>

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

@@ -0,0 +1,15 @@
+<!--
+  @name: Comment Item
+  @category: patterns
+  @kit: app-mobile
+  @width: 360
+  @height: 64
+  @tags: comment, social, reply, user
+-->
+<div data-component="Comment Item" style="display:flex;gap:10px;padding:8px 0;font-family:var(--kit-font, system-ui, -apple-system, sans-serif)">
+  <div style="width:28px;height:28px;border-radius:14px;background:var(--kit-surface-2, #F1F5F9);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:11px;font-weight:600;color:var(--kit-text-2, #475569)">S</div>
+  <div style="flex:1;min-width:0">
+    <div style="font-size:13px;color:var(--kit-text, #0F172A);line-height:1.4"><span style="font-weight:600">Sarah</span> This looks amazing! Where was this taken?</div>
+    <div style="display:flex;gap:12px;margin-top:4px;font-size:11px;color:var(--kit-text-3, #94A3B8)"><span>2h</span><span style="cursor:pointer;font-weight:500">Reply</span><span style="cursor:pointer">♡ 3</span></div>
+  </div>
+</div>

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

@@ -0,0 +1,19 @@
+<!--
+  @name: Contact Card — with Actions
+  @category: patterns
+  @kit: app-mobile
+  @width: 360
+  @height: 80
+  @tags: contact, card, user, phone, message, call
+-->
+<div data-component="Contact Card — with Actions" style="display:flex;align-items:center;width:100%;padding:12px 16px;gap:12px;box-sizing:border-box;font-family:var(--kit-font, system-ui, -apple-system, sans-serif)">
+  <div style="width:48px;height:48px;border-radius:24px;background:var(--kit-primary, #6366F1);color:#FFFFFF;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:600;flex-shrink:0">AJ</div>
+  <div style="flex:1;min-width:0">
+    <div style="font-size:var(--kit-text-md, 16px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text, #0F172A)">Alex Johnson</div>
+    <div style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-3, #94A3B8);margin-top:1px">Last seen 5m ago</div>
+  </div>
+  <div style="display:flex;gap:4px">
+    <div style="width:36px;height:36px;border-radius:18px;background:var(--kit-surface-2, #F1F5F9);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--kit-primary, #6366F1)"><svg width="18" height="18" 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.72 12.84 12.84 0 0 0 .7 2.81 2 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-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg></div>
+    <div style="width:36px;height:36px;border-radius:18px;background:var(--kit-surface-2, #F1F5F9);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--kit-primary, #6366F1)"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg></div>
+  </div>
+</div>

package/components/app-mobile/patterns/data-table.html

@@ -0,0 +1,25 @@
+<!--
+  @name: Data Table — with Headers + Rows
+  @category: patterns
+  @kit: app-mobile
+  @width: 360
+  @height: 280
+  @tags: table, data, grid, rows, headers, admin
+-->
+<div data-component="Data Table — with Headers + Rows" style="width:100%;background:var(--kit-bg, #FFFFFF);border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius-md, 12px);overflow:hidden;font-family:var(--kit-font, system-ui, -apple-system, sans-serif)">
+  <div style="display:flex;background:var(--kit-surface, #F8FAFC);border-bottom:1px solid var(--kit-border, #E2E8F0);padding:0 16px;height:44px;align-items:center;font-size:12px;font-weight:var(--kit-font-semibold, 600);color:var(--kit-text-2, #475569);text-transform:uppercase;letter-spacing:0.5px">
+    <div style="flex:2">Name</div><div style="flex:1">Status</div><div style="flex:1;text-align:right">Amount</div>
+  </div>
+  <div style="display:flex;padding:0 16px;height:52px;align-items:center;font-size:14px;border-bottom:1px solid var(--kit-border, #E2E8F0)">
+    <div style="flex:2;color:var(--kit-text, #0F172A);font-weight:500">Sarah Chen</div><div style="flex:1"><span style="background:var(--kit-success-bg, #F0FDF4);color:var(--kit-success, #22C55E);padding:2px 10px;border-radius:12px;font-size:12px;font-weight:500">Paid</span></div><div style="flex:1;text-align:right;color:var(--kit-text, #0F172A);font-weight:500">$230.00</div>
+  </div>
+  <div style="display:flex;padding:0 16px;height:52px;align-items:center;font-size:14px;border-bottom:1px solid var(--kit-border, #E2E8F0)">
+    <div style="flex:2;color:var(--kit-text, #0F172A);font-weight:500">James Wilson</div><div style="flex:1"><span style="background:var(--kit-warning-bg, #FFFBEB);color:var(--kit-warning, #F59E0B);padding:2px 10px;border-radius:12px;font-size:12px;font-weight:500">Pending</span></div><div style="flex:1;text-align:right;color:var(--kit-text, #0F172A);font-weight:500">$180.50</div>
+  </div>
+  <div style="display:flex;padding:0 16px;height:52px;align-items:center;font-size:14px;border-bottom:1px solid var(--kit-border, #E2E8F0)">
+    <div style="flex:2;color:var(--kit-text, #0F172A);font-weight:500">Emma Brown</div><div style="flex:1"><span style="background:var(--kit-info-bg, #EFF6FF);color:var(--kit-info, #3B82F6);padding:2px 10px;border-radius:12px;font-size:12px;font-weight:500">Shipped</span></div><div style="flex:1;text-align:right;color:var(--kit-text, #0F172A);font-weight:500">$420.00</div>
+  </div>
+  <div style="display:flex;padding:0 16px;height:52px;align-items:center;font-size:14px">
+    <div style="flex:2;color:var(--kit-text, #0F172A);font-weight:500">Mike Davis</div><div style="flex:1"><span style="background:var(--kit-danger-bg, #FEF2F2);color:var(--kit-danger, #EF4444);padding:2px 10px;border-radius:12px;font-size:12px;font-weight:500">Failed</span></div><div style="flex:1;text-align:right;color:var(--kit-text, #0F172A);font-weight:500">$95.00</div>
+  </div>
+</div>

package/components/app-mobile/patterns/empty-state.html

@@ -0,0 +1,19 @@
+<!--
+  @name: Empty State — No Data
+  @category: patterns
+  @kit: app-mobile
+  @width: 360
+  @height: 300
+  @tags: empty, state, no-data, placeholder, illustration
+-->
+<div data-component="Empty State — No Data" style="width:100%;height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;box-sizing:border-box;font-family:var(--kit-font, system-ui, -apple-system, sans-serif);text-align:center">
+  <div style="width:80px;height:80px;border-radius:40px;background:var(--kit-surface-2, #F1F5F9);display:flex;align-items:center;justify-content:center;margin-bottom:20px;color:var(--kit-text-3, #94A3B8)">
+    <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><polyline points="13 2 13 9 20 9"/></svg>
+  </div>
+  <div style="font-size:var(--kit-text-lg, 18px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text, #0F172A);margin-bottom:8px">No items yet</div>
+  <div style="font-size:var(--kit-text-sm, 14px);color:var(--kit-text-2, #475569);line-height:1.5;max-width:260px;margin-bottom:24px">When you create items, they'll appear here. Get started by tapping the button below.</div>
+  <div style="display:inline-flex;align-items:center;justify-content:center;height:40px;background:var(--kit-primary, #6366F1);color:var(--kit-primary-fg, #FFFFFF);border-radius:20px;padding:0 24px;font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-medium, 500);cursor:pointer;gap:8px">
+    <svg width="18" height="18" 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>
+    Create First Item
+  </div>
+</div>

package/components/app-mobile/patterns/error-screen.html

@@ -0,0 +1,14 @@
+<!--
+  @name: Error Screen — No Connection
+  @category: patterns
+  @kit: app-mobile
+  @width: 360
+  @height: 400
+  @tags: error, screen, offline, no-connection, retry
+-->
+<div data-component="Error Screen — No Connection" style="width:100%;height:400px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;box-sizing:border-box;font-family:var(--kit-font, system-ui, -apple-system, sans-serif);text-align:center">
+  <div style="width:80px;height:80px;border-radius:40px;background:var(--kit-danger-bg, #FEF2F2);display:flex;align-items:center;justify-content:center;margin-bottom:24px;color:var(--kit-danger, #EF4444)"><svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M5 12.55a11 11 0 0 1 14.08 0"/><path d="M1.42 9a16 16 0 0 1 21.16 0"/><path d="M8.53 16.11a6 6 0 0 1 6.95 0"/><line x1="12" y1="20" x2="12.01" y2="20"/><line x1="1" y1="1" x2="23" y2="23" stroke-width="2"/></svg></div>
+  <div style="font-size:var(--kit-text-xl, 20px);font-weight:var(--kit-font-bold, 700);color:var(--kit-text, #0F172A);margin-bottom:8px">No Connection</div>
+  <div style="font-size:var(--kit-text-sm, 14px);color:var(--kit-text-2, #475569);line-height:1.5;max-width:260px;margin-bottom:28px">Please check your internet connection and try again.</div>
+  <div style="display:inline-flex;align-items:center;justify-content:center;height:44px;background:var(--kit-primary, #6366F1);color:#FFFFFF;border-radius:22px;padding:0 28px;font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-medium, 500);cursor:pointer;gap:8px"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" 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>Try Again</div>
+</div>

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

@@ -0,0 +1,22 @@
+<!--
+  @name: Event / Calendar Card
+  @category: patterns
+  @kit: app-mobile
+  @width: 360
+  @height: 72
+  @tags: event, calendar, schedule, appointment, time
+-->
+<div data-component="Event / Calendar Card" style="display:flex;align-items:center;width:100%;padding:8px 16px;gap:12px;box-sizing:border-box;font-family:var(--kit-font, system-ui, -apple-system, sans-serif)">
+  <div style="width:4px;height:48px;border-radius:2px;background:var(--kit-primary, #6366F1);flex-shrink:0"></div>
+  <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)">Team Standup Meeting</div>
+    <div style="display:flex;align-items:center;gap:6px;margin-top:3px">
+      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--kit-text-3, #94A3B8)" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+      <span style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-3, #94A3B8)">10:00 AM - 10:30 AM</span>
+    </div>
+  </div>
+  <div style="display:flex">
+    <div style="width:24px;height:24px;border-radius:12px;background:#6366F1;border:2px solid var(--kit-bg, #FFFFFF);display:flex;align-items:center;justify-content:center;color:#FFFFFF;font-size:10px;font-weight:600">A</div>
+    <div style="width:24px;height:24px;border-radius:12px;background:#EC4899;border:2px solid var(--kit-bg, #FFFFFF);display:flex;align-items:center;justify-content:center;color:#FFFFFF;font-size:10px;font-weight:600;margin-left:-6px">B</div>
+  </div>
+</div>

package/components/app-mobile/patterns/image-editor.html

@@ -0,0 +1,34 @@
+<!--
+  @name: Image Editor — Controls
+  @category: patterns
+  @kit: app-mobile
+  @width: 360
+  @height: 480
+  @tags: image, editor, crop, rotate, filter, editing
+-->
+<div data-component="Image Editor — Controls" style="width:100%;height:480px;background:#000;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:12px 16px">
+    <div style="font-size:15px;color:#FFFFFF;cursor:pointer">Cancel</div>
+    <div style="font-size:15px;font-weight:600;color:#FFFFFF">Edit</div>
+    <div style="font-size:15px;color:var(--kit-primary, #6366F1);font-weight:600;cursor:pointer">Done</div>
+  </div>
+  <div style="flex:1;display:flex;align-items:center;justify-content:center;padding:16px">
+    <img src="https://placehold.jp/300x300.png" style="max-width:100%;max-height:100%;border-radius:4px;object-fit:contain" alt="Editing"/>
+  </div>
+  <div style="padding:12px 16px">
+    <div style="display:flex;gap:8px;overflow-x:auto;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid rgba(255,255,255,0.1)">
+      <div style="width:56px;height:56px;border-radius:8px;border:2px solid var(--kit-primary, #6366F1);overflow:hidden;flex-shrink:0;cursor:pointer"><img src="https://placehold.jp/56x56.png" style="width:100%;height:100%;object-fit:cover" alt="Original"/></div>
+      <div style="width:56px;height:56px;border-radius:8px;overflow:hidden;flex-shrink:0;cursor:pointer;opacity:0.7;filter:grayscale(1)"><img src="https://placehold.jp/56x56.png" style="width:100%;height:100%;object-fit:cover" alt="B&W"/></div>
+      <div style="width:56px;height:56px;border-radius:8px;overflow:hidden;flex-shrink:0;cursor:pointer;opacity:0.7;filter:sepia(1)"><img src="https://placehold.jp/56x56.png" style="width:100%;height:100%;object-fit:cover" alt="Sepia"/></div>
+      <div style="width:56px;height:56px;border-radius:8px;overflow:hidden;flex-shrink:0;cursor:pointer;opacity:0.7;filter:saturate(2)"><img src="https://placehold.jp/56x56.png" style="width:100%;height:100%;object-fit:cover" alt="Vivid"/></div>
+      <div style="width:56px;height:56px;border-radius:8px;overflow:hidden;flex-shrink:0;cursor:pointer;opacity:0.7;filter:contrast(1.3)"><img src="https://placehold.jp/56x56.png" style="width:100%;height:100%;object-fit:cover" alt="Contrast"/></div>
+    </div>
+    <div style="display:flex;justify-content:space-around">
+      <div style="display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="1.8"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 3v18"/><path d="M3 9h18"/></svg><span style="font-size:10px;color:rgba(255,255,255,0.6)">Crop</span></div>
+      <div style="display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="1.8"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg><span style="font-size:10px;color:rgba(255,255,255,0.6)">Rotate</span></div>
+      <div style="display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="var(--kit-primary, #6366F1)" stroke-width="1.8"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/></svg><span style="font-size:10px;color:var(--kit-primary, #6366F1)">Adjust</span></div>
+      <div style="display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="1.8"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg><span style="font-size:10px;color:rgba(255,255,255,0.6)">Draw</span></div>
+      <div style="display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="1.8"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="8" y1="12" x2="16" y2="12"/><line x1="12" y1="16" x2="12" y2="8"/></svg><span style="font-size:10px;color:rgba(255,255,255,0.6)">Text</span></div>
+    </div>
+  </div>
+</div>

package/components/app-mobile/patterns/image-grid.html

@@ -0,0 +1,16 @@
+<!--
+  @name: Image Grid — 3 Column
+  @category: patterns
+  @kit: app-mobile
+  @width: 360
+  @height: 240
+  @tags: image, grid, gallery, photos, 3-column
+-->
+<div data-component="Image Grid — 3 Column" style="display:grid;grid-template-columns:repeat(3,1fr);gap:2px;width:100%">
+  <img src="https://placehold.jp/120x120.png" style="width:100%;aspect-ratio:1;object-fit:cover;display:block" alt="Photo 1"/>
+  <img src="https://placehold.jp/120x120.png" style="width:100%;aspect-ratio:1;object-fit:cover;display:block" alt="Photo 2"/>
+  <img src="https://placehold.jp/120x120.png" style="width:100%;aspect-ratio:1;object-fit:cover;display:block" alt="Photo 3"/>
+  <img src="https://placehold.jp/120x120.png" style="width:100%;aspect-ratio:1;object-fit:cover;display:block" alt="Photo 4"/>
+  <img src="https://placehold.jp/120x120.png" style="width:100%;aspect-ratio:1;object-fit:cover;display:block" alt="Photo 5"/>
+  <img src="https://placehold.jp/120x120.png" style="width:100%;aspect-ratio:1;object-fit:cover;display:block" alt="Photo 6"/>
+</div>

package/components/app-mobile/patterns/login-form.html

@@ -0,0 +1,22 @@
+<!--
+  @name: Login Form — with Social
+  @category: patterns
+  @kit: app-mobile
+  @width: 360
+  @height: 480
+  @tags: login, form, auth, social, sign-in
+-->
+<div data-component="Login Form — with Social" style="width:100%;padding:32px 24px;box-sizing:border-box;font-family:var(--kit-font, system-ui, -apple-system, sans-serif);display:flex;flex-direction:column;align-items:center">
+  <div style="width:56px;height:56px;border-radius:16px;background:var(--kit-primary, #6366F1);display:flex;align-items:center;justify-content:center;margin-bottom:24px"><svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg></div>
+  <div style="font-size:var(--kit-text-2xl, 24px);font-weight:var(--kit-font-bold, 700);color:var(--kit-text, #0F172A);margin-bottom:4px">Welcome back</div>
+  <div style="font-size:var(--kit-text-sm, 14px);color:var(--kit-text-2, #475569);margin-bottom:32px">Sign in to your account</div>
+  <div style="width:100%;margin-bottom:16px;position:relative"><div style="width:100%;height:56px;border:1px solid var(--kit-border, #E2E8F0);border-radius:4px;padding:16px;box-sizing:border-box;font-size:16px;color:var(--kit-text-3, #94A3B8)">email@example.com</div><div style="position:absolute;top:-8px;left:12px;background:var(--kit-bg, #FFFFFF);padding:0 4px;font-size:12px;color:var(--kit-text-2, #475569)">Email</div></div>
+  <div style="width:100%;margin-bottom:8px;position:relative"><div style="display:flex;align-items:center;width:100%;height:56px;border:1px solid var(--kit-border, #E2E8F0);border-radius:4px;padding:0 48px 0 16px;box-sizing:border-box;font-size:16px;color:var(--kit-text, #0F172A);letter-spacing:4px">••••••••</div><div style="position:absolute;top:-8px;left:12px;background:var(--kit-bg, #FFFFFF);padding:0 4px;font-size:12px;color:var(--kit-text-2, #475569)">Password</div><div style="position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--kit-text-3, #94A3B8)"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg></div></div>
+  <div style="width:100%;text-align:right;margin-bottom:24px"><span style="font-size:13px;color:var(--kit-primary, #6366F1);cursor:pointer">Forgot password?</span></div>
+  <div style="width:100%;height:48px;background:var(--kit-primary, #6366F1);color:var(--kit-primary-fg, #FFFFFF);border-radius:24px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:500;cursor:pointer;margin-bottom:24px">Sign In</div>
+  <div style="display:flex;align-items:center;gap:16px;width:100%;margin-bottom:24px"><div style="flex:1;height:1px;background:var(--kit-border, #E2E8F0)"></div><span style="font-size:13px;color:var(--kit-text-3, #94A3B8)">or</span><div style="flex:1;height:1px;background:var(--kit-border, #E2E8F0)"></div></div>
+  <div style="display:flex;gap:12px;width:100%">
+    <div style="flex:1;height:44px;border:1px solid var(--kit-border, #E2E8F0);border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" fill="#4285F4"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/></svg></div>
+    <div style="flex:1;height:44px;border:1px solid var(--kit-border, #E2E8F0);border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer"><svg width="20" height="20" viewBox="0 0 24 24" fill="var(--kit-text, #0F172A)"><path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/></svg></div>
+  </div>
+</div>

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

@@ -0,0 +1,19 @@
+<!--
+  @name: Map Card — Location Preview
+  @category: patterns
+  @kit: app-mobile
+  @width: 360
+  @height: 200
+  @tags: map, location, card, address, preview
+-->
+<div data-component="Map Card — Location Preview" style="width:100%;background:var(--kit-bg, #FFFFFF);border-radius:var(--kit-radius-md, 12px);overflow:hidden;box-shadow:var(--kit-shadow-sm, 0 1px 2px rgba(0,0,0,0.05));font-family:var(--kit-font, system-ui, -apple-system, sans-serif)">
+  <div style="width:100%;height:120px;background:linear-gradient(135deg, var(--kit-surface-2, #F1F5F9) 25%, var(--kit-surface, #F8FAFC) 50%, var(--kit-surface-2, #F1F5F9) 75%);display:flex;align-items:center;justify-content:center;position:relative">
+    <div style="color:var(--kit-danger, #EF4444)"><svg width="32" height="32" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3" fill="var(--kit-bg, #FFFFFF)"/></svg></div>
+    <div style="position:absolute;bottom:0;left:0;right:0;height:40px;background:linear-gradient(transparent, rgba(255,255,255,0.8))"></div>
+  </div>
+  <div style="padding:12px 16px;display:flex;align-items:center;gap:10px">
+    <div style="color:var(--kit-text-2, #475569)"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg></div>
+    <div style="flex:1"><div style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text, #0F172A)">123 Design Street</div><div style="font-size:12px;color:var(--kit-text-3, #94A3B8)">San Francisco, CA 94102</div></div>
+    <div style="color:var(--kit-primary, #6366F1);font-size:13px;font-weight:500;cursor:pointer">Directions</div>
+  </div>
+</div>

package/components/app-mobile/patterns/media-player.html

@@ -0,0 +1,26 @@
+<!--
+  @name: Media Player — Music Controls
+  @category: patterns
+  @kit: app-mobile
+  @width: 360
+  @height: 240
+  @tags: media, player, music, audio, controls
+-->
+<div data-component="Media Player — Music Controls" style="width:100%;background:var(--kit-surface, #F8FAFC);border-radius:var(--kit-radius-lg, 16px);padding:20px;box-sizing:border-box;font-family:var(--kit-font, system-ui, -apple-system, sans-serif)">
+  <div style="display:flex;gap:16px;margin-bottom:20px">
+    <img src="https://placehold.jp/80x80.png" style="width:80px;height:80px;border-radius:var(--kit-radius-md, 12px);object-fit:cover;flex-shrink:0" alt="Album"/>
+    <div style="flex:1;display:flex;flex-direction:column;justify-content:center"><div style="font-size:var(--kit-text-lg, 17px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A)">Midnight Dreams</div><div style="font-size:var(--kit-text-sm, 14px);color:var(--kit-text-2, #475569);margin-top:2px">Luna Artist</div></div>
+    <div style="display:flex;align-items:center;color:var(--kit-danger, #EF4444)"><svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg></div>
+  </div>
+  <div style="margin-bottom:16px">
+    <div style="width:100%;height:4px;background:var(--kit-surface-3, #E2E8F0);border-radius:2px;position:relative"><div style="width:35%;height:100%;background:var(--kit-primary, #6366F1);border-radius:2px"></div><div style="position:absolute;left:35%;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;border-radius:6px;background:var(--kit-primary, #6366F1)"></div></div>
+    <div style="display:flex;justify-content:space-between;margin-top:6px;font-size:11px;color:var(--kit-text-3, #94A3B8)"><span>1:23</span><span>3:45</span></div>
+  </div>
+  <div style="display:flex;align-items:center;justify-content:center;gap:24px">
+    <div style="color:var(--kit-text-2, #475569);cursor:pointer"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg></div>
+    <div style="color:var(--kit-text, #0F172A);cursor:pointer"><svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="19 20 9 12 19 4 19 20"/><line x1="5" y1="19" x2="5" y2="5"/></svg></div>
+    <div style="width:56px;height:56px;border-radius:28px;background:var(--kit-primary, #6366F1);display:flex;align-items:center;justify-content:center;cursor:pointer"><svg width="24" height="24" viewBox="0 0 24 24" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="1"><rect x="6" y="4" width="4" height="16" rx="1"/><rect x="14" y="4" width="4" height="16" rx="1"/></svg></div>
+    <div style="color:var(--kit-text, #0F172A);cursor:pointer"><svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 4 15 12 5 20 5 4"/><line x1="19" y1="5" x2="19" y2="19"/></svg></div>
+    <div style="color:var(--kit-text-2, #475569);cursor:pointer"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg></div>
+  </div>
+</div>

package/components/app-mobile/patterns/notification-list.html

@@ -0,0 +1,25 @@
+<!--
+  @name: Notification List — Grouped
+  @category: patterns
+  @kit: app-mobile
+  @width: 360
+  @height: 320
+  @tags: notification, list, inbox, alerts, grouped
+-->
+<div data-component="Notification List — Grouped" style="width:100%;font-family:var(--kit-font, system-ui, -apple-system, sans-serif)">
+  <div style="font-size:var(--kit-text-xs, 12px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text-3, #94A3B8);text-transform:uppercase;letter-spacing:0.5px;padding:12px 16px 8px">Today</div>
+  <div style="display:flex;align-items:flex-start;gap:12px;padding:12px 16px;background:rgba(99,102,241,0.03)">
+    <div style="width:40px;height:40px;border-radius:12px;background:var(--kit-primary, #6366F1);display:flex;align-items:center;justify-content:center;flex-shrink:0"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg></div>
+    <div style="flex:1"><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> replied to your comment</div><div style="font-size:12px;color:var(--kit-text-3, #94A3B8);margin-top:2px">5 min ago</div></div>
+    <div style="width:8px;height:8px;border-radius:4px;background:var(--kit-primary, #6366F1);margin-top:6px;flex-shrink:0"></div>
+  </div>
+  <div style="display:flex;align-items:flex-start;gap:12px;padding:12px 16px">
+    <div style="width:40px;height:40px;border-radius:12px;background:var(--kit-success, #22C55E);display:flex;align-items:center;justify-content:center;flex-shrink:0"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg></div>
+    <div style="flex:1"><div style="font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A);line-height:1.4">Order <span style="font-weight:600">#4023</span> delivered</div><div style="font-size:12px;color:var(--kit-text-3, #94A3B8);margin-top:2px">2 hours ago</div></div>
+  </div>
+  <div style="font-size:var(--kit-text-xs, 12px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text-3, #94A3B8);text-transform:uppercase;letter-spacing:0.5px;padding:12px 16px 8px">Yesterday</div>
+  <div style="display:flex;align-items:flex-start;gap:12px;padding:12px 16px">
+    <div style="width:40px;height:40px;border-radius:12px;background:var(--kit-warning, #F59E0B);display:flex;align-items:center;justify-content:center;flex-shrink:0"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></div>
+    <div style="flex:1"><div style="font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A);line-height:1.4">Storage almost full — <span style="font-weight:600">85%</span> used</div><div style="font-size:12px;color:var(--kit-text-3, #94A3B8);margin-top:2px">Yesterday at 3:45 PM</div></div>
+  </div>
+</div>

package/components/app-mobile/patterns/onboarding-slide.html

@@ -0,0 +1,24 @@
+<!--
+  @name: Onboarding Slide
+  @category: patterns
+  @kit: app-mobile
+  @width: 360
+  @height: 640
+  @tags: onboarding, slide, welcome, intro, tutorial
+-->
+<div data-component="Onboarding Slide" style="width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 32px;box-sizing:border-box;font-family:var(--kit-font, system-ui, -apple-system, sans-serif);text-align:center;background:var(--kit-bg, #FFFFFF)">
+  <div style="width:160px;height:160px;border-radius:80px;background:linear-gradient(135deg, var(--kit-primary, #6366F1), var(--kit-accent, #F59E0B));display:flex;align-items:center;justify-content:center;margin-bottom:40px;opacity:0.9">
+    <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
+  </div>
+  <div style="font-size:var(--kit-text-2xl, 24px);font-weight:var(--kit-font-bold, 700);color:var(--kit-text, #0F172A);margin-bottom:12px">Welcome to AppName</div>
+  <div style="font-size:var(--kit-text-md, 16px);color:var(--kit-text-2, #475569);line-height:1.6;max-width:280px;margin-bottom:48px">Discover a faster way to organize your life with smart tools and beautiful design.</div>
+  <div style="display:flex;gap:8px;margin-bottom:32px">
+    <div style="width:24px;height:8px;border-radius:4px;background:var(--kit-primary, #6366F1)"></div>
+    <div style="width:8px;height:8px;border-radius:4px;background:var(--kit-surface-3, #E2E8F0)"></div>
+    <div style="width:8px;height:8px;border-radius:4px;background:var(--kit-surface-3, #E2E8F0)"></div>
+  </div>
+  <div style="width:100%;display:flex;flex-direction:column;gap:8px">
+    <div style="display:flex;align-items:center;justify-content:center;height:48px;background:var(--kit-primary, #6366F1);color:var(--kit-primary-fg, #FFFFFF);border-radius:24px;font-size:var(--kit-text-md, 16px);font-weight:var(--kit-font-medium, 500);cursor:pointer">Get Started</div>
+    <div style="display:flex;align-items:center;justify-content:center;height:48px;color:var(--kit-primary, #6366F1);font-size:var(--kit-text-md, 16px);cursor:pointer">Skip</div>
+  </div>
+</div>

package/components/app-mobile/patterns/order-summary.html

@@ -0,0 +1,16 @@
+<!--
+  @name: Order Summary Card
+  @category: patterns
+  @kit: app-mobile
+  @width: 360
+  @height: 200
+  @tags: order, summary, checkout, total, ecommerce
+-->
+<div data-component="Order Summary Card" style="width:100%;background:var(--kit-surface, #F8FAFC);border-radius:var(--kit-radius-md, 12px);padding:16px;box-sizing:border-box;font-family:var(--kit-font, system-ui, -apple-system, sans-serif)">
+  <div style="font-size:var(--kit-text-md, 16px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A);margin-bottom:12px">Order Summary</div>
+  <div style="display:flex;justify-content:space-between;padding:6px 0;font-size:14px"><span style="color:var(--kit-text-2, #475569)">Subtotal (3 items)</span><span style="color:var(--kit-text, #0F172A)">$259.97</span></div>
+  <div style="display:flex;justify-content:space-between;padding:6px 0;font-size:14px"><span style="color:var(--kit-text-2, #475569)">Shipping</span><span style="color:var(--kit-success, #22C55E)">Free</span></div>
+  <div style="display:flex;justify-content:space-between;padding:6px 0;font-size:14px"><span style="color:var(--kit-text-2, #475569)">Tax</span><span style="color:var(--kit-text, #0F172A)">$20.80</span></div>
+  <div style="height:1px;background:var(--kit-border, #E2E8F0);margin:8px 0"></div>
+  <div style="display:flex;justify-content:space-between;padding:4px 0;font-size:var(--kit-text-lg, 18px);font-weight:var(--kit-font-bold, 700)"><span style="color:var(--kit-text, #0F172A)">Total</span><span style="color:var(--kit-text, #0F172A)">$280.77</span></div>
+</div>

package/components/app-mobile/patterns/order-tracker.html

@@ -0,0 +1,27 @@
+<!--
+  @name: Order Tracker — Shipping Steps
+  @category: patterns
+  @kit: app-mobile
+  @width: 360
+  @height: 280
+  @tags: order, tracker, shipping, status, ecommerce, steps
+-->
+<div data-component="Order Tracker — Shipping Steps" style="width:100%;padding:16px;box-sizing:border-box;font-family:var(--kit-font, system-ui, -apple-system, sans-serif)">
+  <div style="font-size:var(--kit-text-md, 16px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A);margin-bottom:20px">Order #4023</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:24px;height:24px;border-radius:12px;background:var(--kit-success, #22C55E);display:flex;align-items:center;justify-content:center;flex-shrink:0"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></div><div style="width:2px;flex:1;background:var(--kit-success, #22C55E)"></div></div>
+    <div><div style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text, #0F172A)">Order Confirmed</div><div style="font-size:12px;color:var(--kit-text-3, #94A3B8);margin-top:2px">Mar 22, 10:30 AM</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:24px;height:24px;border-radius:12px;background:var(--kit-success, #22C55E);display:flex;align-items:center;justify-content:center;flex-shrink:0"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></div><div style="width:2px;flex:1;background:var(--kit-primary, #6366F1)"></div></div>
+    <div><div style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text, #0F172A)">Shipped</div><div style="font-size:12px;color:var(--kit-text-3, #94A3B8);margin-top:2px">Mar 23, 2:15 PM</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:24px;height:24px;border-radius:12px;background:var(--kit-primary, #6366F1);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;font-size:11px;font-weight:700">3</div><div style="width:2px;flex:1;background:var(--kit-border, #E2E8F0)"></div></div>
+    <div><div style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-medium, 500);color:var(--kit-primary, #6366F1)">Out for Delivery</div><div style="font-size:12px;color:var(--kit-text-3, #94A3B8);margin-top:2px">Arriving today by 6 PM</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:24px;height:24px;border-radius:12px;border:2px solid var(--kit-border, #E2E8F0);box-sizing:border-box;flex-shrink:0"></div></div>
+    <div><div style="font-size:var(--kit-text-sm, 14px);color:var(--kit-text-3, #94A3B8)">Delivered</div></div>
+  </div>
+</div>

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

@@ -0,0 +1,17 @@
+<!--
+  @name: Pagination Controls
+  @category: patterns
+  @kit: app-mobile
+  @width: 300
+  @height: 40
+  @tags: pagination, page, navigation, controls
+-->
+<div data-component="Pagination Controls" style="display:flex;align-items:center;justify-content:center;gap:4px;font-family:var(--kit-font, system-ui, -apple-system, sans-serif)">
+  <div style="width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--kit-text-3, #94A3B8)"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg></div>
+  <div style="width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500;background:var(--kit-primary, #6366F1);color:#FFFFFF;cursor:pointer">1</div>
+  <div style="width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A);cursor:pointer">2</div>
+  <div style="width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A);cursor:pointer">3</div>
+  <div style="width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text-3, #94A3B8)">...</div>
+  <div style="width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kit-text, #0F172A);cursor:pointer">12</div>
+  <div style="width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--kit-text-2, #475569)"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg></div>
+</div>

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

@@ -0,0 +1,28 @@
+<!--
+  @name: Social Post Card
+  @category: patterns
+  @kit: app-mobile
+  @width: 360
+  @height: 440
+  @tags: post, card, social, feed, image, actions, comments
+-->
+<div data-component="Social Post Card" style="width:100%;background:var(--kit-bg, #FFFFFF);font-family:var(--kit-font, system-ui, -apple-system, sans-serif)">
+  <div style="display:flex;align-items:center;padding:12px 16px;gap:10px">
+    <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;flex-shrink:0">AJ</div>
+    <div style="flex:1"><div style="font-size:14px;font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A)">Alex Johnson</div><div style="font-size:12px;color:var(--kit-text-3, #94A3B8)">2 hours ago</div></div>
+    <div style="cursor:pointer;color:var(--kit-text-2, #475569)"><svg width="20" height="20" 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>
+  <img src="https://placehold.jp/360x270.png" style="width:100%;aspect-ratio:4/3;object-fit:cover;display:block" alt="Post image"/>
+  <div style="display:flex;align-items:center;padding:8px 12px;gap:4px">
+    <div style="padding:8px;cursor:pointer;color:var(--kit-danger, #EF4444)"><svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg></div>
+    <div style="padding:8px;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"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg></div>
+    <div style="padding:8px;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="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg></div>
+    <div style="flex:1"></div>
+    <div style="padding:8px;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"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg></div>
+  </div>
+  <div style="padding:0 16px 12px">
+    <div style="font-size:14px;font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A);margin-bottom:4px">1,234 likes</div>
+    <div style="font-size:14px;color:var(--kit-text, #0F172A);line-height:1.4"><span style="font-weight:600">Alex Johnson</span> Beautiful sunset from my balcony today. Nature never fails to amaze.</div>
+    <div style="font-size:13px;color:var(--kit-text-3, #94A3B8);margin-top:6px;cursor:pointer">View all 42 comments</div>
+  </div>
+</div>

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

@@ -0,0 +1,26 @@
+<!--
+  @name: Product Card — E-Commerce
+  @category: patterns
+  @kit: app-mobile
+  @width: 170
+  @height: 260
+  @tags: product, card, ecommerce, shop, price, rating
+-->
+<div data-component="Product Card — E-Commerce" style="width:100%;background:var(--kit-bg, #FFFFFF);border-radius:var(--kit-radius-md, 12px);overflow:hidden;font-family:var(--kit-font, system-ui, -apple-system, sans-serif);box-shadow:var(--kit-shadow-sm, 0 1px 2px rgba(0,0,0,0.05))">
+  <div style="width:100%;aspect-ratio:1;position:relative">
+    <img src="https://placehold.jp/200x200.png" style="width:100%;height:100%;object-fit:cover;display:block" alt="Product"/>
+    <div style="position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:16px;background:var(--kit-bg, #FFFFFF);display:flex;align-items:center;justify-content:center;box-shadow:var(--kit-shadow-sm, 0 1px 2px rgba(0,0,0,0.05));cursor:pointer"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--kit-text-2, #475569)" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg></div>
+    <div style="position:absolute;top:8px;left:8px;background:var(--kit-danger, #EF4444);color:#FFFFFF;font-size:10px;font-weight:600;padding:2px 8px;border-radius:4px">-20%</div>
+  </div>
+  <div style="padding:10px 12px">
+    <div style="font-size:var(--kit-text-sm, 13px);color:var(--kit-text, #0F172A);font-weight:var(--kit-font-medium, 500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Product Name</div>
+    <div style="display:flex;align-items:center;gap:4px;margin-top:4px">
+      <svg width="12" height="12" viewBox="0 0 24 24" fill="#FBBF24" stroke="#FBBF24" stroke-width="1"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
+      <span style="font-size:11px;color:var(--kit-text-3, #94A3B8)">4.5 (128)</span>
+    </div>
+    <div style="display:flex;align-items:center;gap:6px;margin-top:6px">
+      <span style="font-size:var(--kit-text-md, 16px);font-weight:var(--kit-font-bold, 700);color:var(--kit-text, #0F172A)">$79.99</span>
+      <span style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-3, #94A3B8);text-decoration:line-through">$99.99</span>
+    </div>
+  </div>
+</div>

package/components/app-mobile/patterns/profile-header.html

@@ -0,0 +1,18 @@
+<!--
+  @name: Profile Header — Avatar + Name + Bio
+  @category: patterns
+  @kit: app-mobile
+  @width: 360
+  @height: 200
+  @tags: profile, header, avatar, user, account
+-->
+<div data-component="Profile Header — Avatar + Name + Bio" style="width:100%;display:flex;flex-direction:column;align-items:center;padding:24px 16px;box-sizing:border-box;font-family:var(--kit-font, system-ui, -apple-system, sans-serif)">
+  <div style="width:80px;height:80px;border-radius:40px;background:var(--kit-primary, #6366F1);color:var(--kit-primary-fg, #FFFFFF);display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:var(--kit-font-bold, 700)">AJ</div>
+  <div style="font-size:var(--kit-text-xl, 20px);font-weight:var(--kit-font-bold, 700);color:var(--kit-text, #0F172A);margin-top:12px">Alex Johnson</div>
+  <div style="font-size:var(--kit-text-sm, 14px);color:var(--kit-text-2, #475569);margin-top:4px">alex.johnson@email.com</div>
+  <div style="display:flex;gap:24px;margin-top:16px">
+    <div style="text-align:center"><div style="font-size:var(--kit-text-lg, 18px);font-weight:var(--kit-font-bold, 700);color:var(--kit-text, #0F172A)">248</div><div style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-3, #94A3B8)">Posts</div></div>
+    <div style="text-align:center"><div style="font-size:var(--kit-text-lg, 18px);font-weight:var(--kit-font-bold, 700);color:var(--kit-text, #0F172A)">12.4k</div><div style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-3, #94A3B8)">Followers</div></div>
+    <div style="text-align:center"><div style="font-size:var(--kit-text-lg, 18px);font-weight:var(--kit-font-bold, 700);color:var(--kit-text, #0F172A)">891</div><div style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-3, #94A3B8)">Following</div></div>
+  </div>
+</div>

package/components/app-mobile/patterns/rating-stars.html

@@ -0,0 +1,15 @@
+<!--
+  @name: Rating Stars — 5 Star Display
+  @category: patterns
+  @kit: app-mobile
+  @width: 120
+  @height: 20
+  @tags: rating, stars, review, score
+-->
+<div data-component="Rating Stars — 5 Star Display" style="display:flex;gap:2px">
+  <svg width="18" height="18" viewBox="0 0 24 24" fill="#FBBF24" stroke="#FBBF24" stroke-width="1"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
+  <svg width="18" height="18" viewBox="0 0 24 24" fill="#FBBF24" stroke="#FBBF24" stroke-width="1"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
+  <svg width="18" height="18" viewBox="0 0 24 24" fill="#FBBF24" stroke="#FBBF24" stroke-width="1"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
+  <svg width="18" height="18" viewBox="0 0 24 24" fill="#FBBF24" stroke="#FBBF24" stroke-width="1"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
+  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--kit-surface-3, #E2E8F0)" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
+</div>

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

@@ -0,0 +1,22 @@
+<!--
+  @name: Review Card — Stars + Text + User
+  @category: patterns
+  @kit: app-mobile
+  @width: 360
+  @height: 140
+  @tags: review, rating, stars, testimonial, feedback
+-->
+<div data-component="Review Card — Stars + Text + User" style="width:100%;background:var(--kit-surface, #F8FAFC);border-radius:var(--kit-radius-md, 12px);padding:16px;box-sizing:border-box;font-family:var(--kit-font, system-ui, -apple-system, sans-serif)">
+  <div style="display:flex;gap:2px;margin-bottom:8px">
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="#FBBF24" stroke="#FBBF24" stroke-width="1"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="#FBBF24" stroke="#FBBF24" stroke-width="1"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="#FBBF24" stroke="#FBBF24" stroke-width="1"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="#FBBF24" stroke="#FBBF24" stroke-width="1"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="#FBBF24" stroke="#FBBF24" stroke-width="1"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
+  </div>
+  <div style="font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A);line-height:1.5;margin-bottom:12px">"Absolutely love this app! The interface is clean and everything just works. Best purchase I've made this year."</div>
+  <div style="display:flex;align-items:center;gap:8px">
+    <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">AJ</div>
+    <div><span style="font-size:13px;font-weight:600;color:var(--kit-text, #0F172A)">Alex Johnson</span><span style="font-size:12px;color:var(--kit-text-3, #94A3B8);margin-left:8px">3 days ago</span></div>
+  </div>
+</div>