designkit-ai 1.0.0

package/components/app-mobile/data-display/avatar-group.html

@@ -0,0 +1,35 @@
+<!--
+  @name: Avatar Group
+  @kit: app-mobile
+  @width: 200
+  @height: 40
+  @tags: avatar, group, users, stack
+-->
+<div data-component="Avatar Group" style="width:100%;box-sizing:border-box;display:flex;align-items:center;font-family:var(--kit-font, Inter, system-ui, sans-serif);">
+
+  <!-- Avatar 1 -->
+  <div style="width:36px;height:36px;border-radius:var(--kit-radius-full, 9999px);overflow:hidden;border:2px solid var(--kit-bg, #FFFFFF);flex-shrink:0;position:relative;z-index:4;">
+    <img src="https://placehold.jp/3d4070/ffffff/36x36?text=A" alt="User 1" style="width:100%;height:100%;object-fit:cover;display:block;" />
+  </div>
+
+  <!-- Avatar 2 -->
+  <div style="width:36px;height:36px;border-radius:var(--kit-radius-full, 9999px);overflow:hidden;border:2px solid var(--kit-bg, #FFFFFF);flex-shrink:0;position:relative;z-index:3;margin-left:-10px;">
+    <img src="https://placehold.jp/704070/ffffff/36x36?text=B" alt="User 2" style="width:100%;height:100%;object-fit:cover;display:block;" />
+  </div>
+
+  <!-- Avatar 3 -->
+  <div style="width:36px;height:36px;border-radius:var(--kit-radius-full, 9999px);overflow:hidden;border:2px solid var(--kit-bg, #FFFFFF);flex-shrink:0;position:relative;z-index:2;margin-left:-10px;">
+    <img src="https://placehold.jp/407050/ffffff/36x36?text=C" alt="User 3" style="width:100%;height:100%;object-fit:cover;display:block;" />
+  </div>
+
+  <!-- Avatar 4 -->
+  <div style="width:36px;height:36px;border-radius:var(--kit-radius-full, 9999px);overflow:hidden;border:2px solid var(--kit-bg, #FFFFFF);flex-shrink:0;position:relative;z-index:1;margin-left:-10px;">
+    <img src="https://placehold.jp/704040/ffffff/36x36?text=D" alt="User 4" style="width:100%;height:100%;object-fit:cover;display:block;" />
+  </div>
+
+  <!-- Counter -->
+  <div style="width:36px;height:36px;border-radius:var(--kit-radius-full, 9999px);background:var(--kit-surface-2, #F1F5F9);border:2px solid var(--kit-bg, #FFFFFF);display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;z-index:0;margin-left:-10px;">
+    <span style="font-size:var(--kit-text-xs, 12px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text-2, #475569);">+3</span>
+  </div>
+
+</div>

package/components/app-mobile/dialogs/dialog-basic.html

@@ -0,0 +1,16 @@
+<!--
+  @name: Dialog — Basic
+  @category: dialogs
+  @kit: app-mobile
+  @width: 312
+  @height: 200
+  @tags: dialog, modal, alert, confirm
+-->
+<div data-component="Dialog — Basic" style="width:312px;background:var(--kit-bg, #FFFFFF);border-radius:var(--kit-radius-xl, 28px);box-shadow:var(--kit-shadow-lg, 0 10px 24px rgba(0,0,0,0.08),0 4px 8px rgba(0,0,0,0.04));padding:24px;box-sizing:border-box;font-family:var(--kit-font, system-ui, -apple-system, sans-serif)">
+  <div style="font-size:var(--kit-text-xl, 24px);font-weight:var(--kit-font-normal, 400);color:var(--kit-text, #0F172A);margin-bottom:16px">Dialog Title</div>
+  <div style="font-size:var(--kit-text-sm, 14px);color:var(--kit-text-2, #475569);margin-bottom:24px;line-height:1.5">A dialog is a modal window that appears in front of app content to provide critical information or ask for a decision.</div>
+  <div style="display:flex;justify-content:flex-end;gap:8px">
+    <div style="padding:8px 16px;border-radius:20px;font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-medium, 500);color:var(--kit-primary, #6366F1);cursor:pointer">Cancel</div>
+    <div style="padding:8px 16px;border-radius:20px;font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-medium, 500);color:var(--kit-primary, #6366F1);cursor:pointer">Confirm</div>
+  </div>
+</div>

package/components/app-mobile/dialogs/dialog-fullscreen.html

@@ -0,0 +1,18 @@
+<!--
+  @name: Dialog — Full Screen
+  @category: dialogs
+  @kit: app-mobile
+  @width: 360
+  @height: 640
+  @tags: dialog, fullscreen, modal, form
+-->
+<div data-component="Dialog — Full Screen" style="width:100%;height:100%;background:var(--kit-bg, #FFFFFF);font-family:var(--kit-font, system-ui, -apple-system, sans-serif);display:flex;flex-direction:column">
+  <div style="display:flex;align-items:center;height:56px;padding:0 8px;border-bottom:1px solid var(--kit-border, #E2E8F0)">
+    <div style="padding:12px;cursor:pointer;color:var(--kit-text, #0F172A);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"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></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);margin-left:4px">Full Screen Dialog</div>
+    <div style="padding:8px 16px;font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-medium, 500);color:var(--kit-primary, #6366F1);cursor:pointer">Save</div>
+  </div>
+  <div style="flex:1;padding:24px 16px;color:var(--kit-text-2, #475569);font-size:var(--kit-text-sm, 14px)">Dialog content area</div>
+</div>

package/components/app-mobile/dividers/divider-full.html

@@ -0,0 +1,9 @@
+<!--
+  @name: Divider — Full Width
+  @category: dividers
+  @kit: app-mobile
+  @width: 360
+  @height: 1
+  @tags: divider, separator, line
+-->
+<div data-component="Divider — Full Width" style="width:100%;height:1px;background:var(--kit-border, #E2E8F0)"></div>

package/components/app-mobile/dividers/divider-inset.html

@@ -0,0 +1,9 @@
+<!--
+  @name: Divider — Inset (with left margin)
+  @category: dividers
+  @kit: app-mobile
+  @width: 360
+  @height: 1
+  @tags: divider, separator, inset, list
+-->
+<div data-component="Divider — Inset (with left margin)" style="width:100%;height:1px;padding-left:72px;box-sizing:border-box"><div style="width:100%;height:1px;background:var(--kit-border, #E2E8F0)"></div></div>

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

@@ -0,0 +1,29 @@
+<!--
+  @name: Cart Item
+  @kit: app-mobile
+  @width: 360
+  @height: 100
+  @tags: cart, item, product, ecommerce
+-->
+<div data-component="Cart Item" style="width:100%;max-width:360px;box-sizing:border-box;font-family:var(--kit-font,Inter,system-ui,sans-serif);background:var(--kit-bg,#FFFFFF);padding:12px;display:flex;flex-direction:row;align-items:center;gap:12px;">
+  <div style="width:80px;min-width:80px;height:80px;border-radius:var(--kit-radius,8px);overflow:hidden;">
+    <img src="https://placehold.jp/80x80" alt="Running Shoes" style="width:100%;height:100%;object-fit:cover;display:block;" />
+  </div>
+  <div style="flex:1;display:flex;flex-direction:column;gap:6px;">
+    <div style="display:flex;flex-direction:column;gap:2px;">
+      <span style="font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-semibold,600);color:var(--kit-text,#0F172A);line-height:1.3;">Running Shoes</span>
+      <span style="font-size:var(--kit-text-xs,12px);color:var(--kit-text-3,#94A3B8);">Size: 42 / Black</span>
+    </div>
+    <div style="display:flex;align-items:center;justify-content:space-between;">
+      <div style="display:flex;align-items:center;gap:2px;border:1px solid var(--kit-border,#E2E8F0);border-radius:var(--kit-radius,8px);overflow:hidden;">
+        <button style="width:28px;height:28px;border:none;background:var(--kit-surface,#F8FAFC);color:var(--kit-text-2,#475569);font-size:var(--kit-text-sm,14px);cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:var(--kit-font,Inter,system-ui,sans-serif);">−</button>
+        <span style="width:24px;text-align:center;font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-medium,500);color:var(--kit-text,#0F172A);">2</span>
+        <button style="width:28px;height:28px;border:none;background:var(--kit-surface,#F8FAFC);color:var(--kit-text-2,#475569);font-size:var(--kit-text-sm,14px);cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:var(--kit-font,Inter,system-ui,sans-serif);">+</button>
+      </div>
+      <span style="font-size:var(--kit-text-md,16px);font-weight:var(--kit-font-bold,700);color:var(--kit-text,#0F172A);">$59.99</span>
+    </div>
+  </div>
+  <button style="width:32px;height:32px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;flex-shrink:0;">
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--kit-danger,#EF4444)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/></svg>
+  </button>
+</div>

package/components/app-mobile/ecommerce/cart-summary.html

@@ -0,0 +1,31 @@
+<!--
+  @name: Cart Summary
+  @kit: app-mobile
+  @width: 360
+  @height: 220
+  @tags: cart, summary, total, checkout, ecommerce
+-->
+<div data-component="Cart Summary" style="width:100%;max-width:360px;box-sizing:border-box;font-family:var(--kit-font,Inter,system-ui,sans-serif);background:var(--kit-bg,#FFFFFF);padding:16px;display:flex;flex-direction:column;gap:12px;border-radius:var(--kit-radius-md,12px);border:1px solid var(--kit-border,#E2E8F0);">
+  <div style="display:flex;justify-content:space-between;align-items:center;">
+    <span style="font-size:var(--kit-text-sm,14px);color:var(--kit-text-2,#475569);">Subtotal</span>
+    <span style="font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-medium,500);color:var(--kit-text,#0F172A);">$189.97</span>
+  </div>
+  <div style="display:flex;justify-content:space-between;align-items:center;">
+    <span style="font-size:var(--kit-text-sm,14px);color:var(--kit-text-2,#475569);">Shipping</span>
+    <span style="font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-medium,500);color:var(--kit-success,#22C55E);">Free</span>
+  </div>
+  <div style="display:flex;justify-content:space-between;align-items:center;">
+    <span style="font-size:var(--kit-text-sm,14px);color:var(--kit-text-2,#475569);">Tax</span>
+    <span style="font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-medium,500);color:var(--kit-text,#0F172A);">$15.20</span>
+  </div>
+  <div style="height:1px;background:var(--kit-border,#E2E8F0);"></div>
+  <div style="display:flex;justify-content:space-between;align-items:center;">
+    <span style="font-size:var(--kit-text-md,16px);font-weight:var(--kit-font-bold,700);color:var(--kit-text,#0F172A);">Total</span>
+    <span style="font-size:var(--kit-text-lg,18px);font-weight:var(--kit-font-bold,700);color:var(--kit-text,#0F172A);">$205.17</span>
+  </div>
+  <div style="display:flex;gap:8px;">
+    <input type="text" placeholder="Enter promo code" style="flex:1;padding:10px 12px;border:1px solid var(--kit-border,#E2E8F0);border-radius:var(--kit-radius,8px);font-size:var(--kit-text-sm,14px);font-family:var(--kit-font,Inter,system-ui,sans-serif);color:var(--kit-text,#0F172A);background:var(--kit-surface,#F8FAFC);outline:none;" />
+    <button style="padding:10px 16px;background:var(--kit-surface-2,#F1F5F9);color:var(--kit-text,#0F172A);border:1px solid var(--kit-border,#E2E8F0);border-radius:var(--kit-radius,8px);font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-medium,500);font-family:var(--kit-font,Inter,system-ui,sans-serif);cursor:pointer;">Apply</button>
+  </div>
+  <button style="width:100%;padding:14px 0;background:var(--kit-primary,#6366F1);color:var(--kit-bg,#FFFFFF);border:none;border-radius:var(--kit-radius-md,12px);font-size:var(--kit-text-md,16px);font-weight:var(--kit-font-semibold,600);font-family:var(--kit-font,Inter,system-ui,sans-serif);cursor:pointer;">Proceed to Checkout</button>
+</div>

package/components/app-mobile/ecommerce/color-selector.html

@@ -0,0 +1,17 @@
+<!--
+  @name: Color Selector
+  @kit: app-mobile
+  @width: 220
+  @height: 40
+  @tags: color, selector, swatch, ecommerce
+-->
+<div data-component="Color Selector" style="width:100%;max-width:220px;box-sizing:border-box;font-family:var(--kit-font,Inter,system-ui,sans-serif);display:flex;flex-direction:row;align-items:center;gap:10px;">
+  <span style="font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-medium,500);color:var(--kit-text-2,#475569);min-width:36px;">Color</span>
+  <div style="display:flex;align-items:center;gap:8px;">
+    <div style="width:28px;height:28px;border-radius:var(--kit-radius-full,9999px);background:#000000;cursor:pointer;border:2px solid var(--kit-primary,#6366F1);box-shadow:0 0 0 2px var(--kit-bg,#FFFFFF) inset;"></div>
+    <div style="width:28px;height:28px;border-radius:var(--kit-radius-full,9999px);background:#6366F1;cursor:pointer;border:2px solid transparent;"></div>
+    <div style="width:28px;height:28px;border-radius:var(--kit-radius-full,9999px);background:#EF4444;cursor:pointer;border:2px solid transparent;"></div>
+    <div style="width:28px;height:28px;border-radius:var(--kit-radius-full,9999px);background:#22C55E;cursor:pointer;border:2px solid transparent;"></div>
+    <div style="width:28px;height:28px;border-radius:var(--kit-radius-full,9999px);background:#F59E0B;cursor:pointer;border:2px solid transparent;"></div>
+  </div>
+</div>

package/components/app-mobile/ecommerce/order-status.html

@@ -0,0 +1,25 @@
+<!--
+  @name: Order Status
+  @kit: app-mobile
+  @width: 360
+  @height: 120
+  @tags: order, status, tracking, ecommerce
+-->
+<div data-component="Order Status" style="width:100%;max-width:360px;box-sizing:border-box;font-family:var(--kit-font,Inter,system-ui,sans-serif);background:var(--kit-bg,#FFFFFF);padding:16px;display:flex;flex-direction:column;gap:12px;border-radius:var(--kit-radius-md,12px);border:1px solid var(--kit-border,#E2E8F0);">
+  <div style="display:flex;justify-content:space-between;align-items:center;">
+    <div style="display:flex;align-items:center;gap:8px;">
+      <span style="font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-semibold,600);color:var(--kit-text,#0F172A);">Order #12345</span>
+      <span style="padding:2px 8px;background:rgba(34,197,94,0.1);color:var(--kit-success,#22C55E);font-size:var(--kit-text-xs,12px);font-weight:var(--kit-font-semibold,600);border-radius:var(--kit-radius-full,9999px);">Shipped</span>
+    </div>
+    <span style="font-size:var(--kit-text-xs,12px);color:var(--kit-text-3,#94A3B8);">Mar 24, 2026</span>
+  </div>
+  <div style="display:flex;flex-direction:column;gap:6px;">
+    <div style="width:100%;height:6px;background:var(--kit-surface-2,#F1F5F9);border-radius:var(--kit-radius-full,9999px);overflow:hidden;">
+      <div style="width:75%;height:100%;background:var(--kit-success,#22C55E);border-radius:var(--kit-radius-full,9999px);"></div>
+    </div>
+    <div style="display:flex;justify-content:space-between;align-items:center;">
+      <span style="font-size:var(--kit-text-xs,12px);color:var(--kit-text-2,#475569);">In transit</span>
+      <span style="font-size:var(--kit-text-xs,12px);color:var(--kit-text-2,#475569);">Est. delivery: Mar 28, 2026</span>
+    </div>
+  </div>
+</div>

package/components/app-mobile/ecommerce/product-detail-hero.html

@@ -0,0 +1,45 @@
+<!--
+  @name: Product Detail Hero
+  @kit: app-mobile
+  @width: 360
+  @height: 420
+  @tags: product, detail, hero, ecommerce
+-->
+<div data-component="Product Detail Hero" style="width:100%;max-width:360px;box-sizing:border-box;font-family:var(--kit-font,Inter,system-ui,sans-serif);background:var(--kit-bg,#FFFFFF);display:flex;flex-direction:column;">
+  <div style="width:100%;height:240px;overflow:hidden;">
+    <img src="https://placehold.jp/360x240" alt="Wireless Headphones Pro" style="width:100%;height:100%;object-fit:cover;display:block;" />
+  </div>
+  <div style="padding:16px;display:flex;flex-direction:column;gap:12px;">
+    <span style="font-size:var(--kit-text-xl,20px);font-weight:var(--kit-font-bold,700);color:var(--kit-text,#0F172A);line-height:1.3;">Wireless Headphones Pro</span>
+    <div style="display:flex;align-items:center;gap:8px;">
+      <div style="display:flex;align-items:center;gap:2px;">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="var(--kit-warning,#F59E0B)" stroke="none"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="var(--kit-warning,#F59E0B)" stroke="none"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="var(--kit-warning,#F59E0B)" stroke="none"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="var(--kit-warning,#F59E0B)" stroke="none"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="var(--kit-border,#E2E8F0)" stroke="none"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>
+      </div>
+      <span style="font-size:var(--kit-text-sm,14px);color:var(--kit-text-2,#475569);">4.0</span>
+      <span style="font-size:var(--kit-text-sm,14px);color:var(--kit-text-3,#94A3B8);">(128 reviews)</span>
+    </div>
+    <span style="font-size:var(--kit-text-2xl,24px);font-weight:var(--kit-font-bold,700);color:var(--kit-text,#0F172A);">$249.00</span>
+    <div style="display:flex;flex-direction:column;gap:6px;">
+      <span style="font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-medium,500);color:var(--kit-text-2,#475569);">Color</span>
+      <div style="display:flex;align-items:center;gap:8px;">
+        <div style="width:28px;height:28px;border-radius:var(--kit-radius-full,9999px);background:#0F172A;border:2px solid var(--kit-primary,#6366F1);box-shadow:0 0 0 2px var(--kit-bg,#FFFFFF) inset;cursor:pointer;"></div>
+        <div style="width:28px;height:28px;border-radius:var(--kit-radius-full,9999px);background:#6366F1;border:2px solid transparent;cursor:pointer;"></div>
+        <div style="width:28px;height:28px;border-radius:var(--kit-radius-full,9999px);background:#F8FAFC;border:1px solid var(--kit-border,#E2E8F0);cursor:pointer;"></div>
+      </div>
+    </div>
+    <div style="display:flex;flex-direction:column;gap:6px;">
+      <span style="font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-medium,500);color:var(--kit-text-2,#475569);">Size</span>
+      <div style="display:flex;align-items:center;gap:8px;">
+        <div style="width:40px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--kit-radius,8px);border:1px solid var(--kit-border,#E2E8F0);font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-medium,500);color:var(--kit-text-2,#475569);cursor:pointer;">S</div>
+        <div style="width:40px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--kit-radius,8px);background:var(--kit-primary,#6366F1);color:var(--kit-bg,#FFFFFF);font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-semibold,600);cursor:pointer;border:1px solid var(--kit-primary,#6366F1);">M</div>
+        <div style="width:40px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--kit-radius,8px);border:1px solid var(--kit-border,#E2E8F0);font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-medium,500);color:var(--kit-text-2,#475569);cursor:pointer;">L</div>
+        <div style="width:40px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--kit-radius,8px);border:1px solid var(--kit-border,#E2E8F0);font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-medium,500);color:var(--kit-text-2,#475569);cursor:pointer;">XL</div>
+      </div>
+    </div>
+    <button style="width:100%;padding:14px 0;background:var(--kit-primary,#6366F1);color:var(--kit-bg,#FFFFFF);border:none;border-radius:var(--kit-radius-md,12px);font-size:var(--kit-text-md,16px);font-weight:var(--kit-font-semibold,600);font-family:var(--kit-font,Inter,system-ui,sans-serif);cursor:pointer;">Add to Cart</button>
+  </div>
+</div>

package/components/app-mobile/ecommerce/size-selector.html

@@ -0,0 +1,17 @@
+<!--
+  @name: Size Selector
+  @kit: app-mobile
+  @width: 300
+  @height: 48
+  @tags: size, selector, variant, ecommerce
+-->
+<div data-component="Size Selector" style="width:100%;max-width:300px;box-sizing:border-box;font-family:var(--kit-font,Inter,system-ui,sans-serif);display:flex;flex-direction:row;align-items:center;gap:10px;">
+  <span style="font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-medium,500);color:var(--kit-text-2,#475569);min-width:32px;">Size</span>
+  <div style="display:flex;align-items:center;gap:8px;">
+    <div style="width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:var(--kit-radius,8px);border:1px solid var(--kit-border,#E2E8F0);font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-medium,500);color:var(--kit-text-2,#475569);cursor:pointer;background:var(--kit-bg,#FFFFFF);">XS</div>
+    <div style="width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:var(--kit-radius,8px);border:1px solid var(--kit-border,#E2E8F0);font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-medium,500);color:var(--kit-text-2,#475569);cursor:pointer;background:var(--kit-bg,#FFFFFF);">S</div>
+    <div style="width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:var(--kit-radius,8px);background:var(--kit-primary,#6366F1);color:var(--kit-bg,#FFFFFF);font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-semibold,600);cursor:pointer;border:1px solid var(--kit-primary,#6366F1);">M</div>
+    <div style="width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:var(--kit-radius,8px);border:1px solid var(--kit-border,#E2E8F0);font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-medium,500);color:var(--kit-text-2,#475569);cursor:pointer;background:var(--kit-bg,#FFFFFF);">L</div>
+    <div style="width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:var(--kit-radius,8px);border:1px solid var(--kit-border,#E2E8F0);font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-medium,500);color:var(--kit-text-2,#475569);cursor:pointer;background:var(--kit-bg,#FFFFFF);">XL</div>
+  </div>
+</div>

package/components/app-mobile/ecommerce/wishlist-item.html

@@ -0,0 +1,22 @@
+<!--
+  @name: Wishlist Item
+  @kit: app-mobile
+  @width: 360
+  @height: 80
+  @tags: wishlist, favorite, saved, ecommerce
+-->
+<div data-component="Wishlist Item" style="width:100%;max-width:360px;box-sizing:border-box;font-family:var(--kit-font,Inter,system-ui,sans-serif);background:var(--kit-bg,#FFFFFF);padding:10px 12px;display:flex;flex-direction:row;align-items:center;gap:12px;">
+  <div style="width:60px;min-width:60px;height:60px;border-radius:var(--kit-radius,8px);overflow:hidden;">
+    <img src="https://placehold.jp/60x60" alt="Silk Scarf" style="width:100%;height:100%;object-fit:cover;display:block;" />
+  </div>
+  <div style="flex:1;display:flex;flex-direction:column;gap:4px;">
+    <span style="font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-semibold,600);color:var(--kit-text,#0F172A);">Silk Scarf</span>
+    <span style="font-size:var(--kit-text-md,16px);font-weight:var(--kit-font-bold,700);color:var(--kit-text,#0F172A);">$45.00</span>
+  </div>
+  <div style="display:flex;align-items:center;gap:10px;">
+    <button style="border:none;background:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;">
+      <svg width="22" height="22" viewBox="0 0 24 24" fill="var(--kit-danger,#EF4444)" stroke="var(--kit-danger,#EF4444)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg>
+    </button>
+    <button style="padding:8px 14px;background:var(--kit-primary,#6366F1);color:var(--kit-bg,#FFFFFF);border:none;border-radius:var(--kit-radius,8px);font-size:var(--kit-text-xs,12px);font-weight:var(--kit-font-semibold,600);font-family:var(--kit-font,Inter,system-ui,sans-serif);cursor:pointer;white-space:nowrap;">Add to Cart</button>
+  </div>
+</div>

package/components/app-mobile/education/assignment-card.html

@@ -0,0 +1,24 @@
+<!--
+  @name: Assignment Card
+  @kit: app-mobile
+  @width: 360
+  @height: 120
+  @tags: assignment, task, homework, education
+-->
+<div data-component="Assignment Card" style="width:100%;max-width:360px;box-sizing:border-box;font-family:var(--kit-font,Inter,system-ui,sans-serif);background:var(--kit-bg,#FFFFFF);padding:14px 16px;display:flex;align-items:center;gap:12px;border-radius:var(--kit-radius-md,12px);border:1px solid var(--kit-border,#E2E8F0);">
+  <div style="width:44px;height:44px;border-radius:var(--kit-radius,8px);background:var(--kit-surface,#F8FAFC);display:flex;align-items:center;justify-content:center;flex-shrink:0;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="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/></svg>
+  </div>
+  <div style="flex:1;min-width:0;">
+    <div style="display:flex;align-items:center;gap:8px;margin-bottom:2px;">
+      <span style="font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-semibold,600);color:var(--kit-text,#0F172A);">Design a Landing Page</span>
+      <span style="padding:2px 8px;background:rgba(245,158,11,0.1);color:var(--kit-warning,#F59E0B);font-size:var(--kit-text-xs,12px);font-weight:var(--kit-font-semibold,600);border-radius:var(--kit-radius-full,9999px);white-space:nowrap;">In Progress</span>
+    </div>
+    <div style="font-size:var(--kit-text-xs,12px);color:var(--kit-text-3,#94A3B8);margin-bottom:2px;">UI/UX Design Fundamentals</div>
+    <div style="display:flex;align-items:center;gap:4px;color:var(--kit-text-2,#475569);">
+      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
+      <span style="font-size:var(--kit-text-xs,12px);">Due Mar 30</span>
+    </div>
+  </div>
+  <div style="height:36px;padding:0 16px;background:var(--kit-primary,#6366F1);color:var(--kit-primary-fg,#FFFFFF);border-radius:var(--kit-radius,8px);display:flex;align-items:center;justify-content:center;font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-semibold,600);cursor:pointer;flex-shrink:0;">Submit</div>
+</div>

package/components/app-mobile/education/certificate.html

@@ -0,0 +1,30 @@
+<!--
+  @name: Certificate
+  @kit: app-mobile
+  @width: 500
+  @height: 350
+  @tags: certificate, achievement, education, award
+-->
+<div data-component="Certificate" style="width:100%;max-width:500px;height:350px;box-sizing:border-box;font-family:var(--kit-font,Inter,system-ui,sans-serif);background:var(--kit-bg,#FFFFFF);border:3px solid var(--kit-primary,#6366F1);border-radius:var(--kit-radius-lg,16px);padding:32px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden;">
+  <!-- Corner ornaments -->
+  <div style="position:absolute;top:8px;left:8px;right:8px;bottom:8px;border:1px solid var(--kit-border,#E2E8F0);border-radius:var(--kit-radius-md,12px);pointer-events:none;"></div>
+  <!-- Seal icon -->
+  <div style="width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--kit-primary,#6366F1),#818CF8);display:flex;align-items:center;justify-content:center;margin-bottom:16px;">
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2"><circle cx="12" cy="8" r="7"/><polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88"/></svg>
+  </div>
+  <div style="font-size:var(--kit-text-xs,12px);text-transform:uppercase;letter-spacing:2px;color:var(--kit-text-3,#94A3B8);margin-bottom:4px;">Certificate of Completion</div>
+  <div style="font-size:var(--kit-text-sm,14px);color:var(--kit-text-2,#475569);margin-bottom:8px;">This is proudly presented to</div>
+  <div style="font-size:var(--kit-text-2xl,24px);font-weight:var(--kit-font-bold,700);color:var(--kit-primary,#6366F1);margin-bottom:8px;">Alex Johnson</div>
+  <div style="font-size:var(--kit-text-sm,14px);color:var(--kit-text-2,#475569);margin-bottom:4px;">for successfully completing the course</div>
+  <div style="font-size:var(--kit-text-md,16px);font-weight:var(--kit-font-semibold,600);color:var(--kit-text,#0F172A);margin-bottom:20px;">UI/UX Design Fundamentals</div>
+  <div style="display:flex;align-items:flex-end;gap:48px;">
+    <div style="text-align:center;">
+      <div style="width:100px;border-bottom:1px solid var(--kit-border,#E2E8F0);padding-bottom:4px;margin-bottom:4px;font-size:var(--kit-text-sm,14px);font-style:italic;color:var(--kit-text-2,#475569);">S. Miller</div>
+      <div style="font-size:var(--kit-text-xs,12px);color:var(--kit-text-3,#94A3B8);">Instructor</div>
+    </div>
+    <div style="text-align:center;">
+      <div style="width:100px;border-bottom:1px solid var(--kit-border,#E2E8F0);padding-bottom:4px;margin-bottom:4px;font-size:var(--kit-text-sm,14px);color:var(--kit-text-2,#475569);">Mar 26, 2026</div>
+      <div style="font-size:var(--kit-text-xs,12px);color:var(--kit-text-3,#94A3B8);">Date</div>
+    </div>
+  </div>
+</div>

package/components/app-mobile/education/course-card.html

@@ -0,0 +1,32 @@
+<!--
+  @name: Course Card
+  @kit: app-mobile
+  @width: 340
+  @height: 260
+  @tags: course, card, learning, education
+-->
+<div data-component="Course Card" style="width:100%;max-width:340px;box-sizing:border-box;font-family:var(--kit-font,Inter,system-ui,sans-serif);background:var(--kit-bg,#FFFFFF);border-radius:var(--kit-radius-md,12px);border:1px solid var(--kit-border,#E2E8F0);overflow:hidden;">
+  <div style="position:relative;">
+    <img src="https://placehold.jp/340x140.png" style="width:100%;height:140px;object-fit:cover;display:block;" alt="Course"/>
+    <span style="position:absolute;top:10px;left:10px;padding:3px 10px;background:var(--kit-primary,#6366F1);color:#FFFFFF;font-size:var(--kit-text-xs,12px);font-weight:var(--kit-font-semibold,600);border-radius:var(--kit-radius-sm,4px);">Design</span>
+  </div>
+  <div style="padding:12px 14px;">
+    <div style="font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-bold,700);color:var(--kit-text,#0F172A);margin-bottom:8px;">UI/UX Design Fundamentals</div>
+    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;">
+      <div style="display:flex;align-items:center;gap:6px;">
+        <img src="https://placehold.jp/24x24.png" style="width:24px;height:24px;border-radius:50%;object-fit:cover;display:block;" alt="Instructor"/>
+        <span style="font-size:var(--kit-text-xs,12px);color:var(--kit-text-2,#475569);">Sarah Miller</span>
+      </div>
+      <div style="display:flex;align-items:center;gap:3px;">
+        <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:var(--kit-text-xs,12px);font-weight:var(--kit-font-semibold,600);color:var(--kit-text,#0F172A);">4.8</span>
+      </div>
+    </div>
+    <div style="display:flex;align-items:center;gap:8px;">
+      <div style="flex:1;height:4px;background:var(--kit-surface-2,#F1F5F9);border-radius:var(--kit-radius-full,9999px);overflow:hidden;">
+        <div style="width:65%;height:100%;background:var(--kit-primary,#6366F1);border-radius:var(--kit-radius-full,9999px);"></div>
+      </div>
+      <span style="font-size:var(--kit-text-xs,12px);color:var(--kit-text-3,#94A3B8);flex-shrink:0;">12 of 18</span>
+    </div>
+  </div>
+</div>

package/components/app-mobile/education/grade-report.html

@@ -0,0 +1,53 @@
+<!--
+  @name: Grade Report
+  @kit: app-mobile
+  @width: 360
+  @height: 300
+  @tags: grade, report, score, education
+-->
+<div data-component="Grade Report" style="width:100%;max-width:360px;box-sizing:border-box;font-family:var(--kit-font,Inter,system-ui,sans-serif);background:var(--kit-bg,#FFFFFF);padding:20px 16px;display:flex;flex-direction:column;gap:16px;border-radius:var(--kit-radius-md,12px);border:1px solid var(--kit-border,#E2E8F0);">
+  <div style="display:flex;align-items:center;justify-content:space-between;">
+    <div style="font-size:var(--kit-text-md,16px);font-weight:var(--kit-font-bold,700);color:var(--kit-text,#0F172A);">Term Grades</div>
+    <div style="width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--kit-primary,#6366F1),#818CF8);display:flex;align-items:center;justify-content:center;">
+      <span style="font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-bold,700);color:#FFFFFF;">3.8</span>
+    </div>
+  </div>
+  <div style="display:flex;flex-direction:column;gap:12px;">
+    <!-- Course 1 -->
+    <div style="display:flex;align-items:center;gap:12px;">
+      <div style="width:4px;height:36px;border-radius:2px;background:var(--kit-success,#22C55E);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);">UI/UX Design</div>
+        <div style="font-size:var(--kit-text-xs,12px);color:var(--kit-text-3,#94A3B8);">96%</div>
+      </div>
+      <span style="font-size:var(--kit-text-md,16px);font-weight:var(--kit-font-bold,700);color:var(--kit-success,#22C55E);">A</span>
+    </div>
+    <!-- Course 2 -->
+    <div style="display:flex;align-items:center;gap:12px;">
+      <div style="width:4px;height:36px;border-radius:2px;background:var(--kit-success,#22C55E);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);">Web Development</div>
+        <div style="font-size:var(--kit-text-xs,12px);color:var(--kit-text-3,#94A3B8);">92%</div>
+      </div>
+      <span style="font-size:var(--kit-text-md,16px);font-weight:var(--kit-font-bold,700);color:var(--kit-success,#22C55E);">A-</span>
+    </div>
+    <!-- Course 3 -->
+    <div style="display:flex;align-items:center;gap:12px;">
+      <div style="width:4px;height:36px;border-radius:2px;background:var(--kit-info,#3B82F6);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);">Data Structures</div>
+        <div style="font-size:var(--kit-text-xs,12px);color:var(--kit-text-3,#94A3B8);">87%</div>
+      </div>
+      <span style="font-size:var(--kit-text-md,16px);font-weight:var(--kit-font-bold,700);color:var(--kit-info,#3B82F6);">B+</span>
+    </div>
+    <!-- Course 4 -->
+    <div style="display:flex;align-items:center;gap:12px;">
+      <div style="width:4px;height:36px;border-radius:2px;background:var(--kit-info,#3B82F6);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);">Digital Marketing</div>
+        <div style="font-size:var(--kit-text-xs,12px);color:var(--kit-text-3,#94A3B8);">84%</div>
+      </div>
+      <span style="font-size:var(--kit-text-md,16px);font-weight:var(--kit-font-bold,700);color:var(--kit-info,#3B82F6);">B</span>
+    </div>
+  </div>
+</div>

package/components/app-mobile/education/lesson-progress.html

@@ -0,0 +1,21 @@
+<!--
+  @name: Lesson Progress
+  @kit: app-mobile
+  @width: 360
+  @height: 64
+  @tags: lesson, progress, learning, education
+-->
+<div data-component="Lesson Progress" style="width:100%;max-width:360px;box-sizing:border-box;font-family:var(--kit-font,Inter,system-ui,sans-serif);padding:12px 16px;display:flex;align-items:center;gap:12px;">
+  <div style="width:40px;height:40px;border-radius:var(--kit-radius-full,9999px);background:rgba(99,102,241,0.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="var(--kit-primary,#6366F1)" stroke="none"><polygon points="5 3 19 12 5 21 5 3"/></svg>
+  </div>
+  <div style="flex:1;min-width:0;">
+    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;">
+      <span style="font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-medium,500);color:var(--kit-text,#0F172A);">Lesson 5: Color Theory</span>
+      <span style="font-size:var(--kit-text-xs,12px);color:var(--kit-text-3,#94A3B8);">15 min</span>
+    </div>
+    <div style="width:100%;height:4px;background:var(--kit-surface-2,#F1F5F9);border-radius:var(--kit-radius-full,9999px);overflow:hidden;">
+      <div style="width:60%;height:100%;background:var(--kit-primary,#6366F1);border-radius:var(--kit-radius-full,9999px);"></div>
+    </div>
+  </div>
+</div>

package/components/app-mobile/education/quiz-mcq.html

@@ -0,0 +1,35 @@
+<!--
+  @name: Quiz — Multiple Choice
+  @kit: app-mobile
+  @width: 360
+  @height: 340
+  @tags: quiz, question, multiple choice, education
+-->
+<div data-component="Quiz — Multiple Choice" style="width:100%;max-width:360px;box-sizing:border-box;font-family:var(--kit-font,Inter,system-ui,sans-serif);background:var(--kit-bg,#FFFFFF);padding:20px 16px;display:flex;flex-direction:column;gap:16px;border-radius:var(--kit-radius-md,12px);border:1px solid var(--kit-border,#E2E8F0);">
+  <div style="display:flex;align-items:center;justify-content:space-between;">
+    <span style="font-size:var(--kit-text-xs,12px);font-weight:var(--kit-font-semibold,600);color:var(--kit-primary,#6366F1);">Question 3 of 10</span>
+    <div style="width:80px;height:4px;background:var(--kit-surface-2,#F1F5F9);border-radius:var(--kit-radius-full,9999px);overflow:hidden;">
+      <div style="width:30%;height:100%;background:var(--kit-primary,#6366F1);border-radius:var(--kit-radius-full,9999px);"></div>
+    </div>
+  </div>
+  <div style="font-size:var(--kit-text-md,16px);font-weight:var(--kit-font-semibold,600);color:var(--kit-text,#0F172A);line-height:1.4;">Which principle emphasizes visual hierarchy in UI design?</div>
+  <div style="display:flex;flex-direction:column;gap:8px;">
+    <div style="padding:12px 14px;border:1px solid var(--kit-border,#E2E8F0);border-radius:var(--kit-radius,8px);font-size:var(--kit-text-sm,14px);color:var(--kit-text,#0F172A);cursor:pointer;display:flex;align-items:center;gap:10px;">
+      <span style="width:24px;height:24px;border-radius:50%;border:2px solid var(--kit-border,#E2E8F0);display:flex;align-items:center;justify-content:center;font-size:var(--kit-text-xs,12px);font-weight:var(--kit-font-semibold,600);color:var(--kit-text-2,#475569);flex-shrink:0;">A</span>
+      <span>Consistency</span>
+    </div>
+    <div style="padding:12px 14px;border:2px solid var(--kit-primary,#6366F1);border-radius:var(--kit-radius,8px);font-size:var(--kit-text-sm,14px);color:var(--kit-primary,#6366F1);font-weight:var(--kit-font-medium,500);cursor:pointer;background:rgba(99,102,241,0.05);display:flex;align-items:center;gap:10px;">
+      <span style="width:24px;height:24px;border-radius:50%;background:var(--kit-primary,#6366F1);color:#FFFFFF;display:flex;align-items:center;justify-content:center;font-size:var(--kit-text-xs,12px);font-weight:var(--kit-font-semibold,600);flex-shrink:0;">B</span>
+      <span>Scale and proportion</span>
+    </div>
+    <div style="padding:12px 14px;border:1px solid var(--kit-border,#E2E8F0);border-radius:var(--kit-radius,8px);font-size:var(--kit-text-sm,14px);color:var(--kit-text,#0F172A);cursor:pointer;display:flex;align-items:center;gap:10px;">
+      <span style="width:24px;height:24px;border-radius:50%;border:2px solid var(--kit-border,#E2E8F0);display:flex;align-items:center;justify-content:center;font-size:var(--kit-text-xs,12px);font-weight:var(--kit-font-semibold,600);color:var(--kit-text-2,#475569);flex-shrink:0;">C</span>
+      <span>Proximity</span>
+    </div>
+    <div style="padding:12px 14px;border:1px solid var(--kit-border,#E2E8F0);border-radius:var(--kit-radius,8px);font-size:var(--kit-text-sm,14px);color:var(--kit-text,#0F172A);cursor:pointer;display:flex;align-items:center;gap:10px;">
+      <span style="width:24px;height:24px;border-radius:50%;border:2px solid var(--kit-border,#E2E8F0);display:flex;align-items:center;justify-content:center;font-size:var(--kit-text-xs,12px);font-weight:var(--kit-font-semibold,600);color:var(--kit-text-2,#475569);flex-shrink:0;">D</span>
+      <span>Alignment</span>
+    </div>
+  </div>
+  <div style="width:100%;height:44px;background:var(--kit-primary,#6366F1);color:var(--kit-primary-fg,#FFFFFF);border-radius:var(--kit-radius,8px);display:flex;align-items:center;justify-content:center;font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-semibold,600);cursor:pointer;">Next Question</div>
+</div>

package/components/app-mobile/education/quiz-truefalse.html

@@ -0,0 +1,26 @@
+<!--
+  @name: Quiz — True/False
+  @kit: app-mobile
+  @width: 360
+  @height: 220
+  @tags: quiz, true false, education
+-->
+<div data-component="Quiz — True/False" style="width:100%;max-width:360px;box-sizing:border-box;font-family:var(--kit-font,Inter,system-ui,sans-serif);background:var(--kit-bg,#FFFFFF);padding:20px 16px;display:flex;flex-direction:column;gap:16px;border-radius:var(--kit-radius-md,12px);border:1px solid var(--kit-border,#E2E8F0);">
+  <div style="display:flex;align-items:center;justify-content:space-between;">
+    <span style="font-size:var(--kit-text-xs,12px);font-weight:var(--kit-font-semibold,600);color:var(--kit-primary,#6366F1);">Question 7 of 10</span>
+    <div style="width:80px;height:4px;background:var(--kit-surface-2,#F1F5F9);border-radius:var(--kit-radius-full,9999px);overflow:hidden;">
+      <div style="width:70%;height:100%;background:var(--kit-primary,#6366F1);border-radius:var(--kit-radius-full,9999px);"></div>
+    </div>
+  </div>
+  <div style="font-size:var(--kit-text-md,16px);font-weight:var(--kit-font-semibold,600);color:var(--kit-text,#0F172A);line-height:1.4;">White space is considered wasted space in UI design.</div>
+  <div style="display:flex;gap:12px;">
+    <div style="flex:1;height:56px;border:2px solid var(--kit-success,#22C55E);border-radius:var(--kit-radius-md,12px);display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;background:rgba(34,197,94,0.05);">
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success,#22C55E)" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
+      <span style="font-size:var(--kit-text-md,16px);font-weight:var(--kit-font-semibold,600);color:var(--kit-success,#22C55E);">True</span>
+    </div>
+    <div style="flex:1;height:56px;border:2px solid var(--kit-danger,#EF4444);border-radius:var(--kit-radius-md,12px);display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;background:rgba(239,68,68,0.05);">
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--kit-danger,#EF4444)" stroke-width="2.5"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+      <span style="font-size:var(--kit-text-md,16px);font-weight:var(--kit-font-semibold,600);color:var(--kit-danger,#EF4444);">False</span>
+    </div>
+  </div>
+</div>

package/components/app-mobile/education/student-dashboard.html

@@ -0,0 +1,57 @@
+<!--
+  @name: Student Dashboard
+  @kit: app-mobile
+  @width: 360
+  @height: 300
+  @tags: student, dashboard, stats, education
+-->
+<div data-component="Student Dashboard" style="width:100%;max-width:360px;box-sizing:border-box;font-family:var(--kit-font,Inter,system-ui,sans-serif);padding:20px 16px;display:flex;flex-direction:column;gap:16px;">
+  <div style="display:flex;align-items:center;justify-content:space-between;">
+    <div>
+      <div style="font-size:var(--kit-text-xl,20px);font-weight:var(--kit-font-bold,700);color:var(--kit-text,#0F172A);">Hi, Alex!</div>
+      <div style="display:flex;align-items:center;gap:4px;margin-top:2px;">
+        <span style="font-size:var(--kit-text-sm,14px);color:var(--kit-text-2,#475569);">5 day streak</span>
+        <span style="font-size:16px;">&#128293;</span>
+      </div>
+    </div>
+    <img src="https://placehold.jp/40x40.png" style="width:40px;height:40px;border-radius:var(--kit-radius-full,9999px);object-fit:cover;display:block;" alt="Avatar"/>
+  </div>
+  <div style="display:flex;gap:10px;">
+    <div style="flex:1;background:var(--kit-surface,#F8FAFC);border-radius:var(--kit-radius-md,12px);padding:14px;text-align:center;">
+      <div style="width:32px;height:32px;border-radius:var(--kit-radius,8px);background:rgba(99,102,241,0.1);display:flex;align-items:center;justify-content:center;margin:0 auto 8px;">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--kit-primary,#6366F1)" stroke-width="2"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
+      </div>
+      <div style="font-size:var(--kit-text-xl,20px);font-weight:var(--kit-font-bold,700);color:var(--kit-text,#0F172A);">4</div>
+      <div style="font-size:var(--kit-text-xs,12px);color:var(--kit-text-3,#94A3B8);">Courses</div>
+    </div>
+    <div style="flex:1;background:var(--kit-surface,#F8FAFC);border-radius:var(--kit-radius-md,12px);padding:14px;text-align:center;">
+      <div style="width:32px;height:32px;border-radius:var(--kit-radius,8px);background:rgba(59,130,246,0.1);display:flex;align-items:center;justify-content:center;margin:0 auto 8px;">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#3B82F6" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+      </div>
+      <div style="font-size:var(--kit-text-xl,20px);font-weight:var(--kit-font-bold,700);color:var(--kit-text,#0F172A);">28</div>
+      <div style="font-size:var(--kit-text-xs,12px);color:var(--kit-text-3,#94A3B8);">Hours</div>
+    </div>
+    <div style="flex:1;background:var(--kit-surface,#F8FAFC);border-radius:var(--kit-radius-md,12px);padding:14px;text-align:center;">
+      <div style="width:32px;height:32px;border-radius:var(--kit-radius,8px);background:rgba(34,197,94,0.1);display:flex;align-items:center;justify-content:center;margin:0 auto 8px;">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#22C55E" stroke-width="2"><circle cx="12" cy="8" r="7"/><polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88"/></svg>
+      </div>
+      <div style="font-size:var(--kit-text-xl,20px);font-weight:var(--kit-font-bold,700);color:var(--kit-text,#0F172A);">2</div>
+      <div style="font-size:var(--kit-text-xs,12px);color:var(--kit-text-3,#94A3B8);">Certificates</div>
+    </div>
+  </div>
+  <div>
+    <div style="font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-semibold,600);color:var(--kit-text,#0F172A);margin-bottom:10px;">Continue Learning</div>
+    <div style="display:flex;align-items:center;gap:12px;background:var(--kit-bg,#FFFFFF);padding:12px;border-radius:var(--kit-radius-md,12px);border:1px solid var(--kit-border,#E2E8F0);">
+      <img src="https://placehold.jp/56x56.png" style="width:56px;height:56px;border-radius:var(--kit-radius,8px);object-fit:cover;display:block;flex-shrink:0;" alt="Course"/>
+      <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);margin-bottom:4px;">UI/UX Design Fundamentals</div>
+        <div style="display:flex;align-items:center;gap:8px;">
+          <div style="flex:1;height:4px;background:var(--kit-surface-2,#F1F5F9);border-radius:var(--kit-radius-full,9999px);overflow:hidden;">
+            <div style="width:65%;height:100%;background:var(--kit-primary,#6366F1);border-radius:var(--kit-radius-full,9999px);"></div>
+          </div>
+          <span style="font-size:var(--kit-text-xs,12px);color:var(--kit-text-3,#94A3B8);flex-shrink:0;">65%</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>