designkit-ai 1.0.0

package/components/app-mobile/feedback/banner.html

@@ -0,0 +1,13 @@
+<!--
+  @name: Banner — Info with Action
+  @category: feedback
+  @kit: app-mobile
+  @width: 360
+  @height: 64
+  @tags: banner, info, alert, message, action
+-->
+<div data-component="Banner — Info with Action" style="display:flex;align-items:center;width:100%;min-height:64px;background:var(--kit-info-bg, #EFF6FF);padding:12px 16px;box-sizing:border-box;font-family:var(--kit-font, system-ui, -apple-system, sans-serif);gap:12px">
+  <div style="color:var(--kit-info, #3B82F6);flex-shrink:0;display:flex;align-items:center"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg></div>
+  <div style="flex:1;font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A);line-height:1.4">Your account is almost set up. Complete your profile to unlock all features.</div>
+  <div style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-medium, 500);color:var(--kit-info, #3B82F6);cursor:pointer;white-space:nowrap">Complete</div>
+</div>

package/components/app-mobile/feedback/progress-circular.html

@@ -0,0 +1,14 @@
+<!--
+  @name: Progress — Circular
+  @category: feedback
+  @kit: app-mobile
+  @width: 48
+  @height: 48
+  @tags: progress, circular, spinner, loading
+-->
+<div data-component="Progress — Circular" style="width:48px;height:48px;display:flex;align-items:center;justify-content:center">
+  <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
+    <circle cx="20" cy="20" r="16" stroke="var(--kit-surface-2, #F1F5F9)" stroke-width="4"/>
+    <circle cx="20" cy="20" r="16" stroke="var(--kit-primary, #6366F1)" stroke-width="4" stroke-dasharray="75 25" stroke-linecap="round" transform="rotate(-90 20 20)"/>
+  </svg>
+</div>

package/components/app-mobile/feedback/progress-linear.html

@@ -0,0 +1,11 @@
+<!--
+  @name: Progress — Linear
+  @category: feedback
+  @kit: app-mobile
+  @width: 360
+  @height: 4
+  @tags: progress, linear, loading, bar
+-->
+<div data-component="Progress — Linear" style="width:100%;height:4px;background:var(--kit-surface-2, #F1F5F9);border-radius:2px;overflow:hidden">
+  <div style="width:60%;height:100%;background:var(--kit-primary, #6366F1);border-radius:2px"></div>
+</div>

package/components/app-mobile/feedback/skeleton.html

@@ -0,0 +1,20 @@
+<!--
+  @name: Skeleton Loading
+  @category: feedback
+  @kit: app-mobile
+  @width: 360
+  @height: 120
+  @tags: skeleton, loading, placeholder
+-->
+<div data-component="Skeleton Loading" style="width:100%;font-family:var(--kit-font, system-ui, -apple-system, sans-serif)">
+  <div style="display:flex;gap:12px;align-items:center;margin-bottom:16px">
+    <div style="width:40px;height:40px;border-radius:20px;background:var(--kit-surface-2, #F1F5F9)"></div>
+    <div style="flex:1">
+      <div style="width:60%;height:12px;background:var(--kit-surface-2, #F1F5F9);border-radius:6px;margin-bottom:8px"></div>
+      <div style="width:40%;height:10px;background:var(--kit-surface-2, #F1F5F9);border-radius:5px"></div>
+    </div>
+  </div>
+  <div style="width:100%;height:14px;background:var(--kit-surface-2, #F1F5F9);border-radius:7px;margin-bottom:8px"></div>
+  <div style="width:85%;height:14px;background:var(--kit-surface-2, #F1F5F9);border-radius:7px;margin-bottom:8px"></div>
+  <div style="width:70%;height:14px;background:var(--kit-surface-2, #F1F5F9);border-radius:7px"></div>
+</div>

package/components/app-mobile/feedback/snackbar.html

@@ -0,0 +1,15 @@
+<!--
+  @name: Snackbar
+  @category: feedback
+  @kit: app-mobile
+  @width: 360
+  @height: 48
+  @tags: snackbar, toast, notification, message
+-->
+<div data-component="Snackbar" style="display:flex;align-items:center;width:100%;min-height:48px;background:var(--kit-text, #0F172A);border-radius:var(--kit-radius-sm, 4px);padding:0 8px 0 16px;box-sizing:border-box;font-family:var(--kit-font, system-ui, -apple-system, sans-serif);gap:8px">
+  <div style="flex:1;font-size:var(--kit-text-sm, 14px);color:var(--kit-text-inverse, #FFFFFF)">Message sent successfully</div>
+  <div style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-medium, 500);color:var(--kit-primary, #6366F1);padding:8px;cursor:pointer">Undo</div>
+  <div style="color:var(--kit-text-inverse, #FFFFFF);padding:8px;cursor:pointer;opacity:0.7;display:flex;align-items:center">
+    <svg width="18" height="18" 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>

package/components/app-mobile/feedback/tooltip.html

@@ -0,0 +1,9 @@
+<!--
+  @name: Tooltip — Plain
+  @category: feedback
+  @kit: app-mobile
+  @width: 160
+  @height: 32
+  @tags: tooltip, hint, help, popup
+-->
+<div data-component="Tooltip — Plain" style="display:inline-flex;align-items:center;padding:6px 12px;background:var(--kit-text, #0F172A);color:var(--kit-text-inverse, #FFFFFF);border-radius:var(--kit-radius-sm, 4px);font-family:var(--kit-font, system-ui, -apple-system, sans-serif);font-size:var(--kit-text-xs, 12px)">Tooltip label</div>

package/components/app-mobile/finance/bank-account-card.html

@@ -0,0 +1,36 @@
+<!--
+  @name: Bank Account Card
+  @kit: app-mobile
+  @width: 340
+  @height: 180
+  @tags: bank, account, card, finance, balance
+-->
+<div data-component="Bank Account Card" style="width:100%;max-width:340px;height:180px;box-sizing:border-box;font-family:var(--kit-font,Inter,system-ui,sans-serif);background:linear-gradient(135deg,var(--kit-primary,#6366F1),#818CF8);border-radius:var(--kit-radius-lg,16px);padding:20px;display:flex;flex-direction:column;justify-content:space-between;color:#FFFFFF;position:relative;overflow:hidden;">
+  <div style="position:absolute;top:-20px;right:-20px;width:100px;height:100px;border-radius:50%;background:rgba(255,255,255,0.1);"></div>
+  <div style="position:absolute;bottom:-30px;left:20px;width:80px;height:80px;border-radius:50%;background:rgba(255,255,255,0.06);"></div>
+  <div style="display:flex;justify-content:space-between;align-items:center;">
+    <div>
+      <div style="font-size:var(--kit-text-xs,12px);opacity:0.8;">Checking Account</div>
+      <div style="font-size:var(--kit-text-xs,12px);opacity:0.6;margin-top:1px;">****4567</div>
+    </div>
+    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="1.5"><rect x="1" y="4" width="22" height="16" rx="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg>
+  </div>
+  <div>
+    <div style="font-size:var(--kit-text-xs,12px);opacity:0.7;margin-bottom:2px;">Available Balance</div>
+    <div style="font-size:var(--kit-text-2xl,24px);font-weight:var(--kit-font-bold,700);">$12,458.32</div>
+  </div>
+  <div style="display:flex;gap:8px;">
+    <div style="flex:1;height:36px;background:rgba(255,255,255,0.2);border-radius:var(--kit-radius,8px);display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;font-size:var(--kit-text-xs,12px);font-weight:var(--kit-font-medium,500);">
+      <svg width="14" height="14" 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>
+      Send
+    </div>
+    <div style="flex:1;height:36px;background:rgba(255,255,255,0.2);border-radius:var(--kit-radius,8px);display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;font-size:var(--kit-text-xs,12px);font-weight:var(--kit-font-medium,500);">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg>
+      Request
+    </div>
+    <div style="flex:1;height:36px;background:rgba(255,255,255,0.2);border-radius:var(--kit-radius,8px);display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;font-size:var(--kit-text-xs,12px);font-weight:var(--kit-font-medium,500);">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="4" width="22" height="16" rx="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg>
+      Pay
+    </div>
+  </div>
+</div>

package/components/app-mobile/finance/budget-category.html

@@ -0,0 +1,24 @@
+<!--
+  @name: Budget Category Bar
+  @kit: app-mobile
+  @width: 360
+  @height: 60
+  @tags: budget, category, spending, finance
+-->
+<div data-component="Budget Category Bar" style="width:100%;max-width:360px;box-sizing:border-box;font-family:var(--kit-font,Inter,system-ui,sans-serif);padding:10px 16px;display:flex;align-items:center;gap:12px;">
+  <div style="width:36px;height:36px;border-radius:var(--kit-radius,8px);background:rgba(245,158,11,0.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#F59E0B" stroke-width="2"><path d="M18 8h1a4 4 0 0 1 0 8h-1"/><path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"/><line x1="6" y1="1" x2="6" y2="4"/><line x1="10" y1="1" x2="10" y2="4"/><line x1="14" y1="1" x2="14" y2="4"/></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);">Food & Dining</span>
+      <div style="display:flex;align-items:center;gap:6px;">
+        <span style="font-size:var(--kit-text-xs,12px);color:var(--kit-text-2,#475569);">$480 / $800</span>
+        <span style="font-size:var(--kit-text-xs,12px);font-weight:var(--kit-font-semibold,600);color:var(--kit-warning,#F59E0B);">60%</span>
+      </div>
+    </div>
+    <div style="width:100%;height:6px;background:var(--kit-surface-2,#F1F5F9);border-radius:var(--kit-radius-full,9999px);overflow:hidden;">
+      <div style="width:60%;height:100%;background:var(--kit-warning,#F59E0B);border-radius:var(--kit-radius-full,9999px);"></div>
+    </div>
+  </div>
+</div>

package/components/app-mobile/finance/credit-score.html

@@ -0,0 +1,29 @@
+<!--
+  @name: Credit Score Gauge
+  @kit: app-mobile
+  @width: 240
+  @height: 200
+  @tags: credit, score, gauge, finance
+-->
+<div data-component="Credit Score Gauge" style="width:100%;max-width:240px;box-sizing:border-box;font-family:var(--kit-font,Inter,system-ui,sans-serif);display:flex;flex-direction:column;align-items:center;padding:16px;">
+  <svg width="180" height="100" viewBox="0 0 180 100" style="display:block;">
+    <!-- Background arc -->
+    <path d="M15,90 A75,75 0 0,1 165,90" fill="none" stroke="var(--kit-surface-2,#F1F5F9)" stroke-width="12" stroke-linecap="round"/>
+    <!-- Poor segment (red) -->
+    <path d="M15,90 A75,75 0 0,1 42,30" fill="none" stroke="var(--kit-danger,#EF4444)" stroke-width="12" stroke-linecap="round"/>
+    <!-- Fair segment (orange) -->
+    <path d="M42,30 A75,75 0 0,1 75,11" fill="none" stroke="var(--kit-warning,#F59E0B)" stroke-width="12" stroke-linecap="round"/>
+    <!-- Good segment (blue) -->
+    <path d="M75,11 A75,75 0 0,1 120,16" fill="none" stroke="var(--kit-info,#3B82F6)" stroke-width="12" stroke-linecap="round"/>
+    <!-- Excellent segment (green) -->
+    <path d="M120,16 A75,75 0 0,1 165,90" fill="none" stroke="var(--kit-success,#22C55E)" stroke-width="12" stroke-linecap="round"/>
+    <!-- Needle indicator -->
+    <circle cx="125" cy="20" r="6" fill="var(--kit-primary,#6366F1)"/>
+    <circle cx="125" cy="20" r="3" fill="var(--kit-bg,#FFFFFF)"/>
+  </svg>
+  <div style="text-align:center;margin-top:-10px;">
+    <div style="font-size:var(--kit-text-3xl,30px);font-weight:var(--kit-font-bold,700);color:var(--kit-text,#0F172A);">742</div>
+    <div style="font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-semibold,600);color:var(--kit-success,#22C55E);">Good</div>
+    <div style="font-size:var(--kit-text-xs,12px);color:var(--kit-text-3,#94A3B8);margin-top:4px;">Updated Mar 25</div>
+  </div>
+</div>

package/components/app-mobile/finance/investment-portfolio.html

@@ -0,0 +1,52 @@
+<!--
+  @name: Investment Portfolio
+  @kit: app-mobile
+  @width: 360
+  @height: 300
+  @tags: investment, portfolio, stocks, finance
+-->
+<div data-component="Investment Portfolio" 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>
+    <div style="font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-semibold,600);color:var(--kit-text,#0F172A);">Portfolio</div>
+    <div style="display:flex;align-items:baseline;gap:8px;margin-top:4px;">
+      <span style="font-size:var(--kit-text-2xl,24px);font-weight:var(--kit-font-bold,700);color:var(--kit-text,#0F172A);">$34,521.80</span>
+      <span style="font-size:var(--kit-text-xs,12px);font-weight:var(--kit-font-semibold,600);color:var(--kit-success,#22C55E);">+$1,245 (+3.7%)</span>
+    </div>
+  </div>
+  <div style="display:flex;align-items:center;gap:16px;">
+    <!-- Donut Chart -->
+    <svg width="120" height="120" viewBox="0 0 120 120" style="flex-shrink:0;">
+      <!-- Stocks 45% -->
+      <circle cx="60" cy="60" r="45" fill="none" stroke="var(--kit-primary,#6366F1)" stroke-width="16" stroke-dasharray="127.2 155.5" stroke-dashoffset="0" transform="rotate(-90 60 60)"/>
+      <!-- Bonds 25% -->
+      <circle cx="60" cy="60" r="45" fill="none" stroke="#3B82F6" stroke-width="16" stroke-dasharray="70.7 212" stroke-dashoffset="-127.2" transform="rotate(-90 60 60)"/>
+      <!-- Crypto 20% -->
+      <circle cx="60" cy="60" r="45" fill="none" stroke="#F59E0B" stroke-width="16" stroke-dasharray="56.5 226.2" stroke-dashoffset="-197.9" transform="rotate(-90 60 60)"/>
+      <!-- Cash 10% -->
+      <circle cx="60" cy="60" r="45" fill="none" stroke="#22C55E" stroke-width="16" stroke-dasharray="28.3 254.5" stroke-dashoffset="-254.5" transform="rotate(-90 60 60)"/>
+    </svg>
+    <!-- Legend -->
+    <div style="display:flex;flex-direction:column;gap:10px;flex:1;">
+      <div style="display:flex;align-items:center;gap:8px;">
+        <span style="width:10px;height:10px;border-radius:2px;background:var(--kit-primary,#6366F1);flex-shrink:0;"></span>
+        <span style="font-size:var(--kit-text-sm,14px);color:var(--kit-text,#0F172A);flex:1;">Stocks</span>
+        <span style="font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-semibold,600);color:var(--kit-text,#0F172A);">45%</span>
+      </div>
+      <div style="display:flex;align-items:center;gap:8px;">
+        <span style="width:10px;height:10px;border-radius:2px;background:#3B82F6;flex-shrink:0;"></span>
+        <span style="font-size:var(--kit-text-sm,14px);color:var(--kit-text,#0F172A);flex:1;">Bonds</span>
+        <span style="font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-semibold,600);color:var(--kit-text,#0F172A);">25%</span>
+      </div>
+      <div style="display:flex;align-items:center;gap:8px;">
+        <span style="width:10px;height:10px;border-radius:2px;background:#F59E0B;flex-shrink:0;"></span>
+        <span style="font-size:var(--kit-text-sm,14px);color:var(--kit-text,#0F172A);flex:1;">Crypto</span>
+        <span style="font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-semibold,600);color:var(--kit-text,#0F172A);">20%</span>
+      </div>
+      <div style="display:flex;align-items:center;gap:8px;">
+        <span style="width:10px;height:10px;border-radius:2px;background:#22C55E;flex-shrink:0;"></span>
+        <span style="font-size:var(--kit-text-sm,14px);color:var(--kit-text,#0F172A);flex:1;">Cash</span>
+        <span style="font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-semibold,600);color:var(--kit-text,#0F172A);">10%</span>
+      </div>
+    </div>
+  </div>
+</div>

package/components/app-mobile/finance/transaction-row.html

@@ -0,0 +1,26 @@
+<!--
+  @name: Transaction Row
+  @kit: app-mobile
+  @width: 360
+  @height: 64
+  @tags: transaction, payment, history, finance
+-->
+<div data-component="Transaction Row" 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:var(--kit-surface,#F8FAFC);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--kit-text-2,#475569);">
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
+  </div>
+  <div style="flex:1;min-width:0;">
+    <div style="display:flex;align-items:center;gap:6px;">
+      <span style="font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-medium,500);color:var(--kit-text,#0F172A);">Spotify Premium</span>
+    </div>
+    <div style="display:flex;align-items:center;gap:6px;margin-top:1px;">
+      <span style="font-size:var(--kit-text-xs,12px);color:var(--kit-text-3,#94A3B8);">Subscription</span>
+      <span style="width:3px;height:3px;border-radius:50%;background:var(--kit-text-3,#94A3B8);"></span>
+      <span style="font-size:var(--kit-text-xs,12px);color:var(--kit-text-3,#94A3B8);">Mar 25</span>
+    </div>
+  </div>
+  <div style="text-align:right;flex-shrink:0;">
+    <div style="font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-semibold,600);color:var(--kit-danger,#EF4444);">-$9.99</div>
+    <span style="padding:1px 6px;background:rgba(245,158,11,0.1);color:var(--kit-warning,#F59E0B);font-size:10px;font-weight:var(--kit-font-semibold,600);border-radius:var(--kit-radius-sm,4px);">Pending</span>
+  </div>
+</div>

package/components/app-mobile/finance/transfer-form.html

@@ -0,0 +1,42 @@
+<!--
+  @name: Transfer Form
+  @kit: app-mobile
+  @width: 360
+  @height: 360
+  @tags: transfer, send, money, finance
+-->
+<div data-component="Transfer Form" 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:24px 16px;display:flex;flex-direction:column;gap:20px;border-radius:var(--kit-radius-md,12px);border:1px solid var(--kit-border,#E2E8F0);">
+  <div style="font-size:var(--kit-text-xl,20px);font-weight:var(--kit-font-bold,700);color:var(--kit-text,#0F172A);text-align:center;">Send Money</div>
+  <!-- Recipient -->
+  <div style="display:flex;align-items:center;gap:12px;padding:12px;background:var(--kit-surface,#F8FAFC);border-radius:var(--kit-radius-md,12px);">
+    <img src="https://placehold.jp/40x40.png" style="width:40px;height:40px;border-radius:var(--kit-radius-full,9999px);object-fit:cover;display:block;flex-shrink:0;" alt="Recipient"/>
+    <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);">Alex Johnson</div>
+      <div style="font-size:var(--kit-text-xs,12px);color:var(--kit-text-3,#94A3B8);">@alexjohnson</div>
+    </div>
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--kit-text-3,#94A3B8)" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
+  </div>
+  <!-- Amount -->
+  <div style="text-align:center;padding:8px 0;">
+    <div style="font-size:var(--kit-text-3xl,30px);font-weight:var(--kit-font-bold,700);color:var(--kit-text,#0F172A);">$250.00</div>
+  </div>
+  <!-- From Account -->
+  <div>
+    <div style="font-size:var(--kit-text-xs,12px);color:var(--kit-text-3,#94A3B8);margin-bottom:6px;">From</div>
+    <div style="display:flex;align-items:center;justify-content:space-between;padding:12px;border:1px solid var(--kit-border,#E2E8F0);border-radius:var(--kit-radius,8px);">
+      <div style="display:flex;align-items:center;gap:8px;">
+        <div style="width:28px;height:28px;border-radius:var(--kit-radius-sm,4px);background:var(--kit-primary,#6366F1);display:flex;align-items:center;justify-content:center;">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2"><rect x="1" y="4" width="22" height="16" rx="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg>
+        </div>
+        <div>
+          <div style="font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-medium,500);color:var(--kit-text,#0F172A);">Checking ****4567</div>
+        </div>
+      </div>
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--kit-text-3,#94A3B8)" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
+    </div>
+  </div>
+  <!-- Note -->
+  <div style="padding:10px 12px;border:1px solid var(--kit-border,#E2E8F0);border-radius:var(--kit-radius,8px);font-size:var(--kit-text-sm,14px);color:var(--kit-text-3,#94A3B8);">Add a note (optional)</div>
+  <!-- Send Button -->
+  <div style="width:100%;height:48px;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-md,16px);font-weight:var(--kit-font-semibold,600);cursor:pointer;">Send $250.00</div>
+</div>

package/components/app-mobile/fitness/body-metrics.html

@@ -0,0 +1,41 @@
+<!--
+  @name: Body Metrics
+  @kit: app-mobile
+  @width: 360
+  @height: 300
+  @tags: body, metrics, weight, bmi, fitness
+-->
+<div data-component="Body Metrics" style="width:100%;max-width:360px;box-sizing:border-box;padding:16px;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)">
+  <div style="font-size:var(--kit-text-md, 16px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A);margin-bottom:14px">Body Metrics</div>
+  <div style="display:flex;gap:10px;margin-bottom:16px">
+    <div style="flex:1;padding:12px;background:var(--kit-surface, #F8FAFC);border-radius:var(--kit-radius, 8px);text-align:center">
+      <div style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-3, #94A3B8);margin-bottom:4px">Weight</div>
+      <div style="font-size:var(--kit-text-lg, 18px);font-weight:var(--kit-font-bold, 700);color:var(--kit-text, #0F172A)">165 lbs</div>
+      <div style="display:flex;align-items:center;justify-content:center;gap:3px;margin-top:4px">
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success, #22C55E)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 18 13.5 8.5 8.5 13.5 1 6"/><polyline points="17 18 23 18 23 12"/></svg>
+        <span style="font-size:11px;color:var(--kit-success, #22C55E);font-weight:var(--kit-font-medium, 500)">-2.5</span>
+      </div>
+    </div>
+    <div style="flex:1;padding:12px;background:var(--kit-surface, #F8FAFC);border-radius:var(--kit-radius, 8px);text-align:center">
+      <div style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-3, #94A3B8);margin-bottom:4px">BMI</div>
+      <div style="font-size:var(--kit-text-lg, 18px);font-weight:var(--kit-font-bold, 700);color:var(--kit-text, #0F172A)">23.4</div>
+      <span style="display:inline-block;margin-top:4px;padding:2px 8px;background:rgba(34,197,94,0.1);color:var(--kit-success, #22C55E);font-size:11px;font-weight:var(--kit-font-medium, 500);border-radius:var(--kit-radius-full, 9999px)">Normal</span>
+    </div>
+    <div style="flex:1;padding:12px;background:var(--kit-surface, #F8FAFC);border-radius:var(--kit-radius, 8px);text-align:center">
+      <div style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-3, #94A3B8);margin-bottom:4px">Body Fat</div>
+      <div style="font-size:var(--kit-text-lg, 18px);font-weight:var(--kit-font-bold, 700);color:var(--kit-text, #0F172A)">18%</div>
+      <div style="display:flex;align-items:center;justify-content:center;gap:3px;margin-top:4px">
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success, #22C55E)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 18 13.5 8.5 8.5 13.5 1 6"/><polyline points="17 18 23 18 23 12"/></svg>
+        <span style="font-size:11px;color:var(--kit-success, #22C55E);font-weight:var(--kit-font-medium, 500)">-1.2</span>
+      </div>
+    </div>
+  </div>
+  <div style="margin-bottom:16px">
+    <div style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-3, #94A3B8);margin-bottom:8px">Weight Trend (last 6 months)</div>
+    <svg width="100%" height="60" viewBox="0 0 328 60" preserveAspectRatio="none" style="display:block">
+      <polyline points="0,50 55,45 110,38 165,35 220,28 275,20 328,15" fill="none" stroke="var(--kit-primary, #6366F1)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      <polyline points="0,50 55,45 110,38 165,35 220,28 275,20 328,15 328,60 0,60" fill="rgba(99,102,241,0.08)" stroke="none"/>
+    </svg>
+  </div>
+  <button style="width:100%;padding:10px 0;background:var(--kit-primary, #6366F1);color:#FFFFFF;border:none;border-radius:var(--kit-radius, 8px);font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-semibold, 600);font-family:var(--kit-font, Inter, system-ui, sans-serif);cursor:pointer">Log Measurement</button>
+</div>

package/components/app-mobile/fitness/calorie-tracker.html

@@ -0,0 +1,48 @@
+<!--
+  @name: Calorie Tracker
+  @kit: app-mobile
+  @width: 360
+  @height: 120
+  @tags: calories, tracker, nutrition, fitness
+-->
+<div data-component="Calorie Tracker" style="width:100%;max-width:360px;box-sizing:border-box;padding:14px 16px;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);display:flex;align-items:center;gap:16px">
+  <div style="position:relative;width:72px;height:72px;flex-shrink:0">
+    <svg width="72" height="72" viewBox="0 0 72 72" style="transform:rotate(-90deg)">
+      <circle cx="36" cy="36" r="30" fill="none" stroke="var(--kit-surface-2, #F1F5F9)" stroke-width="6"/>
+      <circle cx="36" cy="36" r="30" fill="none" stroke="var(--kit-primary, #6366F1)" stroke-width="6" stroke-linecap="round" stroke-dasharray="188.5" stroke-dashoffset="51.8"/>
+    </svg>
+    <div style="position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center">
+      <span style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-bold, 700);color:var(--kit-text, #0F172A);line-height:1">1,450</span>
+      <span style="font-size:9px;color:var(--kit-text-3, #94A3B8)">of 2,000</span>
+    </div>
+  </div>
+  <div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:8px">
+    <div>
+      <div style="display:flex;justify-content:space-between;margin-bottom:3px">
+        <span style="font-size:var(--kit-text-xs, 12px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text-2, #475569)">Protein</span>
+        <span style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-3, #94A3B8)">65g / 120g</span>
+      </div>
+      <div style="width:100%;height:6px;background:var(--kit-surface-2, #F1F5F9);border-radius:var(--kit-radius-full, 9999px);overflow:hidden">
+        <div style="width:54%;height:100%;background:var(--kit-info, #3B82F6);border-radius:var(--kit-radius-full, 9999px)"></div>
+      </div>
+    </div>
+    <div>
+      <div style="display:flex;justify-content:space-between;margin-bottom:3px">
+        <span style="font-size:var(--kit-text-xs, 12px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text-2, #475569)">Carbs</span>
+        <span style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-3, #94A3B8)">180g / 250g</span>
+      </div>
+      <div style="width:100%;height:6px;background:var(--kit-surface-2, #F1F5F9);border-radius:var(--kit-radius-full, 9999px);overflow:hidden">
+        <div style="width:72%;height:100%;background:var(--kit-success, #22C55E);border-radius:var(--kit-radius-full, 9999px)"></div>
+      </div>
+    </div>
+    <div>
+      <div style="display:flex;justify-content:space-between;margin-bottom:3px">
+        <span style="font-size:var(--kit-text-xs, 12px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text-2, #475569)">Fat</span>
+        <span style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-3, #94A3B8)">48g / 65g</span>
+      </div>
+      <div style="width:100%;height:6px;background:var(--kit-surface-2, #F1F5F9);border-radius:var(--kit-radius-full, 9999px);overflow:hidden">
+        <div style="width:74%;height:100%;background:var(--kit-warning, #F59E0B);border-radius:var(--kit-radius-full, 9999px)"></div>
+      </div>
+    </div>
+  </div>
+</div>

package/components/app-mobile/fitness/exercise-timer.html

@@ -0,0 +1,30 @@
+<!--
+  @name: Exercise Timer
+  @kit: app-mobile
+  @width: 360
+  @height: 220
+  @tags: exercise, timer, countdown, fitness
+-->
+<div data-component="Exercise Timer" style="width:100%;max-width:360px;box-sizing:border-box;padding:16px;font-family:var(--kit-font, Inter, system-ui, sans-serif);background:var(--kit-bg, #FFFFFF);border-radius:var(--kit-radius-md, 12px);display:flex;flex-direction:column;align-items:center">
+  <div style="position:relative;width:120px;height:120px;margin-bottom:16px">
+    <svg width="120" height="120" viewBox="0 0 120 120" style="transform:rotate(-90deg)">
+      <circle cx="60" cy="60" r="52" fill="none" stroke="var(--kit-surface-2, #F1F5F9)" stroke-width="8"/>
+      <circle cx="60" cy="60" r="52" fill="none" stroke="var(--kit-primary, #6366F1)" stroke-width="8" stroke-linecap="round" stroke-dasharray="326.73" stroke-dashoffset="81.68"/>
+    </svg>
+    <div style="position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center">
+      <span style="font-size:var(--kit-text-3xl, 30px);font-weight:var(--kit-font-bold, 700);color:var(--kit-text, #0F172A);line-height:1">00:45</span>
+    </div>
+  </div>
+  <div style="font-size:var(--kit-text-md, 16px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A);margin-bottom:4px">Burpees</div>
+  <div style="font-size:var(--kit-text-sm, 14px);color:var(--kit-text-3, #94A3B8);margin-bottom:16px">Set 3 of 4</div>
+  <div style="display:flex;gap:12px;width:100%">
+    <button style="flex:1;padding:12px 0;background:var(--kit-primary, #6366F1);color:#FFFFFF;border:none;border-radius:var(--kit-radius, 8px);font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-semibold, 600);font-family:var(--kit-font, Inter, system-ui, sans-serif);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="#FFFFFF" stroke="none"><rect x="6" y="4" width="4" height="16" rx="1"/><rect x="14" y="4" width="4" height="16" rx="1"/></svg>
+      Pause
+    </button>
+    <button style="flex:1;padding:12px 0;background:var(--kit-bg, #FFFFFF);color:var(--kit-text-2, #475569);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-semibold, 600);font-family:var(--kit-font, Inter, system-ui, sans-serif);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="5 4 15 12 5 20 5 4"/><line x1="19" y1="5" x2="19" y2="19"/></svg>
+      Skip
+    </button>
+  </div>
+</div>

package/components/app-mobile/fitness/meal-plan.html

@@ -0,0 +1,36 @@
+<!--
+  @name: Meal Plan Card
+  @kit: app-mobile
+  @width: 360
+  @height: 200
+  @tags: meal, plan, nutrition, diet, fitness
+-->
+<div data-component="Meal Plan Card" style="width:100%;max-width:360px;box-sizing:border-box;padding:16px;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)">
+  <div style="font-size:var(--kit-text-md, 16px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A);margin-bottom:14px">Today's Meals</div>
+  <div style="display:flex;flex-direction:column;gap:0">
+    <div style="display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--kit-border, #E2E8F0)">
+      <div style="width:36px;height:36px;border-radius:var(--kit-radius, 8px);background:rgba(59,130,246,0.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:18px">&#127773;</div>
+      <div style="flex:1;min-width:0">
+        <div style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-3, #94A3B8);font-weight:var(--kit-font-medium, 500)">Breakfast</div>
+        <div style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text, #0F172A)">Greek Yogurt Bowl</div>
+      </div>
+      <span style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text-2, #475569);flex-shrink:0">380 cal</span>
+    </div>
+    <div style="display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--kit-border, #E2E8F0)">
+      <div style="width:36px;height:36px;border-radius:var(--kit-radius, 8px);background:rgba(245,158,11,0.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:18px">&#9728;&#65039;</div>
+      <div style="flex:1;min-width:0">
+        <div style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-3, #94A3B8);font-weight:var(--kit-font-medium, 500)">Lunch</div>
+        <div style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text, #0F172A)">Grilled Chicken Salad</div>
+      </div>
+      <span style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text-2, #475569);flex-shrink:0">520 cal</span>
+    </div>
+    <div style="display:flex;align-items:center;gap:12px;padding:10px 0">
+      <div style="width:36px;height:36px;border-radius:var(--kit-radius, 8px);background:rgba(99,102,241,0.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:18px">&#127769;</div>
+      <div style="flex:1;min-width:0">
+        <div style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-3, #94A3B8);font-weight:var(--kit-font-medium, 500)">Dinner</div>
+        <div style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text, #0F172A)">Salmon with Veggies</div>
+      </div>
+      <span style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text-2, #475569);flex-shrink:0">480 cal</span>
+    </div>
+  </div>
+</div>

package/components/app-mobile/fitness/sleep-tracker.html

@@ -0,0 +1,50 @@
+<!--
+  @name: Sleep Tracker
+  @kit: app-mobile
+  @width: 360
+  @height: 200
+  @tags: sleep, tracker, health, fitness
+-->
+<div data-component="Sleep Tracker" style="width:100%;max-width:360px;box-sizing:border-box;padding:16px;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)">
+  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px">
+    <div style="display:flex;align-items:center;gap:8px">
+      <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">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--kit-primary, #6366F1)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
+      </div>
+      <div>
+        <div style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-3, #94A3B8)">Last Night</div>
+        <div style="font-size:var(--kit-text-xl, 20px);font-weight:var(--kit-font-bold, 700);color:var(--kit-text, #0F172A);line-height:1.2">7h 32m</div>
+      </div>
+    </div>
+    <span style="padding:4px 10px;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)">Good</span>
+  </div>
+  <div style="display:flex;gap:16px;margin-bottom:14px">
+    <div style="display:flex;align-items:center;gap:5px">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--kit-text-3, #94A3B8)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
+      <span style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-2, #475569)">Bedtime 11:15 PM</span>
+    </div>
+    <div style="display:flex;align-items:center;gap:5px">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--kit-text-3, #94A3B8)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
+      <span style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-2, #475569)">Wake 6:47 AM</span>
+    </div>
+  </div>
+  <div style="margin-bottom:8px">
+    <div style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-3, #94A3B8);margin-bottom:6px">Sleep Stages</div>
+    <div style="display:flex;width:100%;height:12px;border-radius:var(--kit-radius-full, 9999px);overflow:hidden;gap:1px">
+      <div style="width:20%;background:#6366F1;border-radius:var(--kit-radius-full, 9999px) 0 0 var(--kit-radius-full, 9999px)" title="Deep"></div>
+      <div style="width:35%;background:#818CF8" title="Light"></div>
+      <div style="width:25%;background:#A78BFA" title="REM"></div>
+      <div style="width:10%;background:#C4B5FD" title="Light"></div>
+      <div style="width:10%;background:var(--kit-border, #E2E8F0);border-radius:0 var(--kit-radius-full, 9999px) var(--kit-radius-full, 9999px) 0" title="Awake"></div>
+    </div>
+    <div style="display:flex;gap:12px;margin-top:6px">
+      <div style="display:flex;align-items:center;gap:4px"><span style="width:8px;height:8px;border-radius:var(--kit-radius-full, 9999px);background:#6366F1"></span><span style="font-size:10px;color:var(--kit-text-3, #94A3B8)">Deep</span></div>
+      <div style="display:flex;align-items:center;gap:4px"><span style="width:8px;height:8px;border-radius:var(--kit-radius-full, 9999px);background:#818CF8"></span><span style="font-size:10px;color:var(--kit-text-3, #94A3B8)">Light</span></div>
+      <div style="display:flex;align-items:center;gap:4px"><span style="width:8px;height:8px;border-radius:var(--kit-radius-full, 9999px);background:#A78BFA"></span><span style="font-size:10px;color:var(--kit-text-3, #94A3B8)">REM</span></div>
+      <div style="display:flex;align-items:center;gap:4px"><span style="width:8px;height:8px;border-radius:var(--kit-radius-full, 9999px);background:var(--kit-border, #E2E8F0)"></span><span style="font-size:10px;color:var(--kit-text-3, #94A3B8)">Awake</span></div>
+    </div>
+  </div>
+  <div style="text-align:center">
+    <span style="font-size:var(--kit-text-sm, 14px);color:var(--kit-primary, #6366F1);font-weight:var(--kit-font-medium, 500);cursor:pointer">View Details</span>
+  </div>
+</div>

package/components/app-mobile/fitness/workout-card.html

@@ -0,0 +1,37 @@
+<!--
+  @name: Workout Card
+  @kit: app-mobile
+  @width: 360
+  @height: 180
+  @tags: workout, exercise, fitness, gym
+-->
+<div data-component="Workout 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);border-radius:var(--kit-radius-md, 12px);overflow:hidden;border:1px solid var(--kit-border, #E2E8F0)">
+  <div style="position:relative;width:100%;height:80px;overflow:hidden">
+    <img src="https://placehold.jp/360x80.png" alt="Full Body HIIT" style="width:100%;height:100%;object-fit:cover;display:block"/>
+    <div style="position:absolute;inset:0;background:linear-gradient(to top, rgba(15,23,42,0.7) 0%, transparent 100%)"></div>
+    <div style="position:absolute;bottom:8px;left:12px;display:flex;align-items:center;gap:8px">
+      <span style="font-size:var(--kit-text-md, 16px);font-weight:var(--kit-font-bold, 700);color:#FFFFFF">Full Body HIIT</span>
+      <span style="padding:2px 8px;background:rgba(255,255,255,0.2);border-radius:var(--kit-radius-sm, 4px);font-size:var(--kit-text-xs, 12px);color:#FFFFFF;font-weight:var(--kit-font-medium, 500);backdrop-filter:blur(4px)">Intermediate</span>
+    </div>
+  </div>
+  <div style="padding:12px 14px">
+    <div style="display:flex;gap:16px;margin-bottom:12px">
+      <div style="display:flex;align-items:center;gap:5px">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--kit-text-3, #94A3B8)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+        <span style="font-size:var(--kit-text-sm, 14px);color:var(--kit-text-2, #475569)">30 min</span>
+      </div>
+      <div style="display:flex;align-items:center;gap:5px">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--kit-text-3, #94A3B8)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
+        <span style="font-size:var(--kit-text-sm, 14px);color:var(--kit-text-2, #475569)">350 kcal</span>
+      </div>
+      <div style="display:flex;align-items:center;gap:5px">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--kit-text-3, #94A3B8)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
+        <span style="font-size:var(--kit-text-sm, 14px);color:var(--kit-text-2, #475569)">12 exercises</span>
+      </div>
+    </div>
+    <button style="width:100%;padding:10px 0;background:var(--kit-primary, #6366F1);color:#FFFFFF;border:none;border-radius:var(--kit-radius, 8px);font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-semibold, 600);font-family:var(--kit-font, Inter, system-ui, sans-serif);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="#FFFFFF" stroke="none"><polygon points="5 3 19 12 5 21 5 3"/></svg>
+      Start Workout
+    </button>
+  </div>
+</div>