designkit-ai 1.0.0

package/components/web/patterns/chat-web.html

@@ -0,0 +1,24 @@
+<!--
+  @name: Chat Window — Web
+  @kit: web
+  @width: 400
+  @height: 480
+  @tags: chat, message, conversation, web, inbox
+-->
+<div data-component="Chat Window — Web" style="width:400px;height:480px;background:var(--kit-bg, #FFFFFF);border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius-md, 12px);display:flex;flex-direction:column;overflow:hidden;font-family:var(--kit-font, Inter, system-ui, sans-serif)">
+  <div style="display:flex;align-items:center;padding:14px 20px;border-bottom:1px solid var(--kit-border, #E2E8F0);gap:10px">
+    <div style="width:36px;height:36px;border-radius:18px;background:var(--kit-primary, #6366F1);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;flex-shrink:0">SC</div>
+    <div style="flex:1"><div style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A)">Sarah Chen</div><div style="font-size:11px;color:var(--kit-success, #22C55E)">Online</div></div>
+    <div style="cursor:pointer;color:var(--kit-text-3, #94A3B8)"><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="12" cy="19" r="1.5"/></svg></div>
+  </div>
+  <div style="flex:1;padding:20px;display:flex;flex-direction:column;gap:16px;overflow-y:auto">
+    <div style="display:flex;gap:8px;max-width:80%"><div style="width:28px;height:28px;border-radius:14px;background:var(--kit-primary, #6366F1);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex-shrink:0;margin-top:2px">SC</div><div><div style="background:var(--kit-surface, #F8FAFC);border-radius:4px 12px 12px 12px;padding:10px 14px;font-size:14px;color:var(--kit-text, #0F172A);line-height:1.4">Hey! How's the project going?</div><div style="font-size:11px;color:var(--kit-text-3, #94A3B8);margin-top:4px">10:30 AM</div></div></div>
+    <div style="display:flex;justify-content:flex-end"><div><div style="background:var(--kit-primary, #6366F1);color:#fff;border-radius:12px 4px 12px 12px;padding:10px 14px;font-size:14px;line-height:1.4">Going great! Just finished the homepage design.</div><div style="font-size:11px;color:var(--kit-text-3, #94A3B8);margin-top:4px;text-align:right">10:32 AM</div></div></div>
+    <div style="display:flex;gap:8px;max-width:80%"><div style="width:28px;height:28px;border-radius:14px;background:var(--kit-primary, #6366F1);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex-shrink:0;margin-top:2px">SC</div><div><div style="background:var(--kit-surface, #F8FAFC);border-radius:4px 12px 12px 12px;padding:10px 14px;font-size:14px;color:var(--kit-text, #0F172A);line-height:1.4">Awesome! Can you share the Figma link?</div><div style="font-size:11px;color:var(--kit-text-3, #94A3B8);margin-top:4px">10:33 AM</div></div></div>
+  </div>
+  <div style="display:flex;align-items:center;padding:12px 16px;border-top:1px solid var(--kit-border, #E2E8F0);gap:8px">
+    <div style="cursor:pointer;color:var(--kit-text-3, #94A3B8)"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></div>
+    <div style="flex:1;height:36px;background:var(--kit-surface, #F8FAFC);border-radius:18px;padding:0 14px;display:flex;align-items:center;font-size:14px;color:var(--kit-text-3, #94A3B8)">Type a message...</div>
+    <div style="width:36px;height:36px;border-radius:18px;background:var(--kit-primary, #6366F1);display:flex;align-items:center;justify-content:center;cursor:pointer"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg></div>
+  </div>
+</div>

package/components/web/patterns/code-editor.html

@@ -0,0 +1,34 @@
+<!--
+  @name: Code Editor — Web (with line numbers)
+  @kit: web
+  @width: 640
+  @height: 320
+  @tags: code, editor, syntax, highlight, developer, ide
+-->
+<div data-component="Code Editor — Web (with line numbers)" style="width:100%;background:#1E1E2E;border-radius:var(--kit-radius-md, 12px);overflow:hidden;font-family:ui-monospace, SFMono-Regular, Menlo, monospace;border:1px solid #313244">
+  <div style="display:flex;align-items:center;height:40px;padding:0 16px;background:#181825;gap:8px;border-bottom:1px solid #313244">
+    <div style="display:flex;gap:6px"><div style="width:12px;height:12px;border-radius:6px;background:#F38BA8"></div><div style="width:12px;height:12px;border-radius:6px;background:#FAB387"></div><div style="width:12px;height:12px;border-radius:6px;background:#A6E3A1"></div></div>
+    <div style="display:flex;gap:0;margin-left:16px">
+      <div style="padding:6px 16px;background:#1E1E2E;border-radius:6px 6px 0 0;font-size:12px;color:#CDD6F4;border:1px solid #313244;border-bottom:1px solid #1E1E2E;margin-bottom:-1px">index.tsx</div>
+      <div style="padding:6px 16px;font-size:12px;color:#6C7086;cursor:pointer">styles.css</div>
+    </div>
+  </div>
+  <div style="display:flex;padding:16px 0;font-size:13px;line-height:1.8">
+    <div style="width:48px;text-align:right;padding-right:16px;color:#45475A;user-select:none;flex-shrink:0">
+      <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div>
+    </div>
+    <div style="flex:1;overflow-x:auto;padding-right:16px;border-left:1px solid #313244;padding-left:16px">
+      <div><span style="color:#CBA6F7">import</span> <span style="color:#89B4FA">{ useState, useEffect }</span> <span style="color:#CBA6F7">from</span> <span style="color:#A6E3A1">'react'</span><span style="color:#6C7086">;</span></div>
+      <div><span style="color:#CBA6F7">import</span> <span style="color:#89B4FA">type</span> <span style="color:#F9E2AF">{ User }</span> <span style="color:#CBA6F7">from</span> <span style="color:#A6E3A1">'./types'</span><span style="color:#6C7086">;</span></div>
+      <div style="height:4px"></div>
+      <div><span style="color:#CBA6F7">export function</span> <span style="color:#89B4FA">UserProfile</span><span style="color:#F9E2AF">({ id }: { id: </span><span style="color:#F9E2AF">string</span><span style="color:#F9E2AF"> })</span> <span style="color:#F9E2AF">{</span></div>
+      <div>  <span style="color:#CBA6F7">const</span> <span style="color:#CDD6F4">[user, setUser]</span> <span style="color:#89DCEB">=</span> <span style="color:#89B4FA">useState</span><span style="color:#CBA6F7">&lt;</span><span style="color:#F9E2AF">User</span> <span style="color:#89DCEB">|</span> <span style="color:#CBA6F7">null></span><span style="color:#F9E2AF">(</span><span style="color:#CBA6F7">null</span><span style="color:#F9E2AF">)</span><span style="color:#6C7086">;</span></div>
+      <div style="height:4px"></div>
+      <div>  <span style="color:#89B4FA">useEffect</span><span style="color:#F9E2AF">(() =></span> <span style="color:#F9E2AF">{</span></div>
+      <div>    <span style="color:#89B4FA">fetchUser</span><span style="color:#F9E2AF">(</span><span style="color:#CDD6F4">id</span><span style="color:#F9E2AF">)</span><span style="color:#89DCEB">.</span><span style="color:#89B4FA">then</span><span style="color:#F9E2AF">(</span><span style="color:#CDD6F4">setUser</span><span style="color:#F9E2AF">)</span><span style="color:#6C7086">;</span></div>
+      <div>  <span style="color:#F9E2AF">}</span><span style="color:#6C7086">,</span> <span style="color:#F9E2AF">[</span><span style="color:#CDD6F4">id</span><span style="color:#F9E2AF">])</span><span style="color:#6C7086">;</span></div>
+      <div style="height:4px"></div>
+      <div style="background:rgba(137,180,250,0.06)">  <span style="color:#CBA6F7">return</span> <span style="color:#89DCEB">&lt;</span><span style="color:#89B4FA">div</span><span style="color:#89DCEB">></span><span style="color:#CDD6F4">{user?.name}</span><span style="color:#89DCEB">&lt;/</span><span style="color:#89B4FA">div</span><span style="color:#89DCEB">></span><span style="color:#6C7086">;</span></div>
+    </div>
+  </div>
+</div>

package/components/web/patterns/comparison-table.html

@@ -0,0 +1,39 @@
+<!--
+  @name: Comparison Table — Feature Matrix
+  @kit: web
+  @width: 800
+  @height: 300
+  @tags: comparison, table, features, matrix, pricing, plans
+-->
+<div data-component="Comparison Table — Feature Matrix" style="width:100%;background:var(--kit-bg, #FFFFFF);border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius-md, 12px);overflow:hidden;font-family:var(--kit-font, Inter, system-ui, sans-serif)">
+  <div style="display:flex;background:var(--kit-surface, #F8FAFC);border-bottom:1px solid var(--kit-border, #E2E8F0)">
+    <div style="flex:2;padding:14px 20px;font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A)">Feature</div>
+    <div style="flex:1;padding:14px 16px;text-align:center;font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A)">Free</div>
+    <div style="flex:1;padding:14px 16px;text-align:center;font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-primary, #6366F1);background:rgba(99,102,241,0.03)">Pro</div>
+    <div style="flex:1;padding:14px 16px;text-align:center;font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A)">Enterprise</div>
+  </div>
+  <div style="display:flex;border-bottom:1px solid var(--kit-border, #E2E8F0)">
+    <div style="flex:2;padding:12px 20px;font-size:14px;color:var(--kit-text, #0F172A)">Projects</div>
+    <div style="flex:1;padding:12px 16px;text-align:center;font-size:14px;color:var(--kit-text-2, #475569)">3</div>
+    <div style="flex:1;padding:12px 16px;text-align:center;font-size:14px;color:var(--kit-text, #0F172A);background:rgba(99,102,241,0.03);font-weight:500">Unlimited</div>
+    <div style="flex:1;padding:12px 16px;text-align:center;font-size:14px;color:var(--kit-text, #0F172A);font-weight:500">Unlimited</div>
+  </div>
+  <div style="display:flex;border-bottom:1px solid var(--kit-border, #E2E8F0)">
+    <div style="flex:2;padding:12px 20px;font-size:14px;color:var(--kit-text, #0F172A)">Storage</div>
+    <div style="flex:1;padding:12px 16px;text-align:center;font-size:14px;color:var(--kit-text-2, #475569)">1 GB</div>
+    <div style="flex:1;padding:12px 16px;text-align:center;font-size:14px;color:var(--kit-text, #0F172A);background:rgba(99,102,241,0.03);font-weight:500">50 GB</div>
+    <div style="flex:1;padding:12px 16px;text-align:center;font-size:14px;color:var(--kit-text, #0F172A);font-weight:500">Unlimited</div>
+  </div>
+  <div style="display:flex;border-bottom:1px solid var(--kit-border, #E2E8F0)">
+    <div style="flex:2;padding:12px 20px;font-size:14px;color:var(--kit-text, #0F172A)">Priority Support</div>
+    <div style="flex:1;padding:12px 16px;text-align:center;color:var(--kit-text-3, #94A3B8)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg></div>
+    <div style="flex:1;padding:12px 16px;text-align:center;background:rgba(99,102,241,0.03)"><svg width="16" height="16" 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></div>
+    <div style="flex:1;padding:12px 16px;text-align:center"><svg width="16" height="16" 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></div>
+  </div>
+  <div style="display:flex">
+    <div style="flex:2;padding:12px 20px;font-size:14px;color:var(--kit-text, #0F172A)">SSO / SAML</div>
+    <div style="flex:1;padding:12px 16px;text-align:center;color:var(--kit-text-3, #94A3B8)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg></div>
+    <div style="flex:1;padding:12px 16px;text-align:center;color:var(--kit-text-3, #94A3B8);background:rgba(99,102,241,0.03)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg></div>
+    <div style="flex:1;padding:12px 16px;text-align:center"><svg width="16" height="16" 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></div>
+  </div>
+</div>

package/components/web/patterns/cookie-banner.html

@@ -0,0 +1,14 @@
+<!--
+  @name: Cookie Banner — Bottom
+  @kit: web
+  @width: 1440
+  @height: 72
+  @tags: cookie, banner, consent, gdpr, privacy
+-->
+<div data-component="Cookie Banner — Bottom" style="width:100%;display:flex;align-items:center;padding:16px 32px;box-sizing:border-box;background:var(--kit-text, #0F172A);font-family:var(--kit-font, Inter, system-ui, sans-serif);gap:24px;flex-wrap:wrap">
+  <div style="flex:1;min-width:200px;font-size:var(--kit-text-sm, 14px);color:#CBD5E1;line-height:1.4">We use cookies to enhance your experience. By continuing, you agree to our <span style="color:#FFFFFF;text-decoration:underline;cursor:pointer">Privacy Policy</span>.</div>
+  <div style="display:flex;gap:8px;flex-shrink:0">
+    <div style="height:36px;border:1px solid #475569;border-radius:var(--kit-radius, 8px);padding:0 16px;display:flex;align-items:center;font-size:13px;font-weight:500;color:#CBD5E1;cursor:pointer">Decline</div>
+    <div style="height:36px;background:#FFFFFF;border-radius:var(--kit-radius, 8px);padding:0 16px;display:flex;align-items:center;font-size:13px;font-weight:500;color:var(--kit-text, #0F172A);cursor:pointer">Accept All</div>
+  </div>
+</div>

package/components/web/patterns/error-page.html

@@ -0,0 +1,16 @@
+<!--
+  @name: Error Page — 404
+  @kit: web
+  @width: 600
+  @height: 400
+  @tags: error, 404, not-found, page, empty
+-->
+<div data-component="Error Page — 404" style="width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:64px 32px;box-sizing:border-box;font-family:var(--kit-font, Inter, system-ui, sans-serif);text-align:center">
+  <div style="font-size:80px;font-weight:var(--kit-font-bold, 700);color:var(--kit-surface-3, #E2E8F0);line-height:1;margin-bottom:16px">404</div>
+  <div style="font-size:var(--kit-text-2xl, 24px);font-weight:var(--kit-font-bold, 700);color:var(--kit-text, #0F172A);margin-bottom:8px">Page not found</div>
+  <div style="font-size:var(--kit-text-md, 16px);color:var(--kit-text-2, #475569);line-height:1.5;max-width:400px;margin-bottom:32px">The page you're looking for doesn't exist or has been moved. Let's get you back on track.</div>
+  <div style="display:flex;gap:12px;flex-wrap:wrap;justify-content:center">
+    <div style="height:44px;background:var(--kit-primary, #6366F1);color:#fff;border-radius:var(--kit-radius, 8px);padding:0 24px;display:flex;align-items:center;font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-medium, 500);cursor:pointer;gap:6px"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>Go Home</div>
+    <div style="height:44px;border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius, 8px);padding:0 24px;display:flex;align-items:center;font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text, #0F172A);cursor:pointer">Contact Support</div>
+  </div>
+</div>

package/components/web/patterns/file-list.html

@@ -0,0 +1,24 @@
+<!--
+  @name: File List — with Actions
+  @kit: web
+  @width: 600
+  @height: 240
+  @tags: file, list, document, download, manager
+-->
+<div data-component="File List — with Actions" style="width:100%;background:var(--kit-bg, #FFFFFF);border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius-md, 12px);overflow:hidden;font-family:var(--kit-font, Inter, system-ui, sans-serif)">
+  <div style="display:flex;align-items:center;padding:12px 20px;border-bottom:1px solid var(--kit-border, #E2E8F0);gap:12px">
+    <div style="width:36px;height:36px;border-radius:8px;background:rgba(59,130,246,0.08);display:flex;align-items:center;justify-content:center;flex-shrink:0"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--kit-info, #3B82F6)" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg></div>
+    <div style="flex:1"><div style="font-size:14px;font-weight:500;color:var(--kit-text, #0F172A)">project-brief.pdf</div><div style="font-size:12px;color:var(--kit-text-3, #94A3B8)">2.4 MB · Mar 24, 2026</div></div>
+    <div style="display:flex;gap:4px"><div style="width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--kit-text-2, #475569)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg></div><div style="width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--kit-text-3, #94A3B8)"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="12" cy="19" r="1.5"/></svg></div></div>
+  </div>
+  <div style="display:flex;align-items:center;padding:12px 20px;border-bottom:1px solid var(--kit-border, #E2E8F0);gap:12px">
+    <div style="width:36px;height:36px;border-radius:8px;background:rgba(34,197,94,0.08);display:flex;align-items:center;justify-content:center;flex-shrink:0"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success, #22C55E)" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg></div>
+    <div style="flex:1"><div style="font-size:14px;font-weight:500;color:var(--kit-text, #0F172A)">hero-image.png</div><div style="font-size:12px;color:var(--kit-text-3, #94A3B8)">4.8 MB · Mar 23, 2026</div></div>
+    <div style="display:flex;gap:4px"><div style="width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--kit-text-2, #475569)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg></div><div style="width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--kit-text-3, #94A3B8)"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="12" cy="19" r="1.5"/></svg></div></div>
+  </div>
+  <div style="display:flex;align-items:center;padding:12px 20px;gap:12px">
+    <div style="width:36px;height:36px;border-radius:8px;background:rgba(139,92,246,0.08);display:flex;align-items:center;justify-content:center;flex-shrink:0"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#8B5CF6" stroke-width="2"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg></div>
+    <div style="flex:1"><div style="font-size:14px;font-weight:500;color:var(--kit-text, #0F172A)">app.config.ts</div><div style="font-size:12px;color:var(--kit-text-3, #94A3B8)">12 KB · Mar 22, 2026</div></div>
+    <div style="display:flex;gap:4px"><div style="width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--kit-text-2, #475569)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg></div><div style="width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--kit-text-3, #94A3B8)"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="12" cy="19" r="1.5"/></svg></div></div>
+  </div>
+</div>

package/components/web/patterns/filter-toolbar.html

@@ -0,0 +1,14 @@
+<!--
+  @name: Filter Toolbar — Search + Filters + Actions
+  @kit: web
+  @width: 800
+  @height: 48
+  @tags: filter, toolbar, search, actions, admin, table
+-->
+<div data-component="Filter Toolbar — Search + Filters + Actions" style="display:flex;align-items:center;width:100%;gap:12px;font-family:var(--kit-font, Inter, system-ui, sans-serif);flex-wrap:wrap">
+  <div style="display:flex;align-items:center;gap:8px;flex:1;min-width:200px;height:36px;border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius, 8px);padding:0 12px;box-sizing:border-box"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--kit-text-3, #94A3B8)" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg><span style="font-size:13px;color:var(--kit-text-3, #94A3B8)">Search...</span></div>
+  <div style="display:flex;align-items:center;gap:6px;height:36px;border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius, 8px);padding:0 12px;cursor:pointer;font-size:13px;color:var(--kit-text-2, #475569)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>Filter</div>
+  <div style="display:flex;align-items:center;gap:6px;height:36px;border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius, 8px);padding:0 12px;cursor:pointer;font-size:13px;color:var(--kit-text-2, #475569)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="4" y1="6" x2="20" y2="6"/><line x1="4" y1="12" x2="14" y2="12"/><line x1="4" y1="18" x2="8" y2="18"/></svg>Sort</div>
+  <div style="display:flex;gap:4px"><div style="width:36px;height:36px;border:1px solid var(--kit-primary, #6366F1);background:rgba(99,102,241,0.05);border-radius:var(--kit-radius, 8px);display:flex;align-items:center;justify-content:center;color:var(--kit-primary, #6366F1);cursor:pointer"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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></div><div style="width:36px;height:36px;border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius, 8px);display:flex;align-items:center;justify-content:center;color:var(--kit-text-3, #94A3B8);cursor:pointer"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg></div></div>
+  <div style="height:36px;background:var(--kit-primary, #6366F1);color:#fff;border-radius:var(--kit-radius, 8px);padding:0 14px;display:flex;align-items:center;font-size:13px;font-weight:500;cursor:pointer;gap:6px;white-space:nowrap"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>Add New</div>
+</div>

package/components/web/patterns/kanban-column.html

@@ -0,0 +1,27 @@
+<!--
+  @name: Kanban Column — with Task Cards
+  @kit: web
+  @width: 300
+  @height: 480
+  @tags: kanban, column, board, tasks, project, drag
+-->
+<div data-component="Kanban Column — with Task Cards" style="width:300px;background:var(--kit-surface, #F8FAFC);border-radius:var(--kit-radius-md, 12px);padding:16px;box-sizing:border-box;font-family:var(--kit-font, Inter, system-ui, sans-serif);display:flex;flex-direction:column;gap:12px">
+  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px">
+    <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)">In Progress</span><span style="background:var(--kit-surface-2, #F1F5F9);color:var(--kit-text-3, #94A3B8);font-size:12px;font-weight:600;padding:1px 8px;border-radius:10px">3</span></div>
+    <div style="cursor:pointer;color:var(--kit-text-3, #94A3B8)"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></div>
+  </div>
+  <div style="background:var(--kit-bg, #FFFFFF);border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius, 8px);padding:14px">
+    <div style="display:flex;gap:6px;margin-bottom:10px"><span style="background:rgba(99,102,241,0.08);color:var(--kit-primary, #6366F1);font-size:11px;font-weight:500;padding:2px 8px;border-radius:4px">Design</span><span style="background:rgba(245,158,11,0.08);color:var(--kit-warning, #F59E0B);font-size:11px;font-weight:500;padding:2px 8px;border-radius:4px">Urgent</span></div>
+    <div style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text, #0F172A);margin-bottom:10px">Redesign checkout flow</div>
+    <div style="display:flex;align-items:center;justify-content:space-between"><div style="display:flex"><div style="width:24px;height:24px;border-radius:12px;background:#6366F1;border:2px solid var(--kit-bg, #FFFFFF);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600">A</div><div style="width:24px;height:24px;border-radius:12px;background:#EC4899;border:2px solid var(--kit-bg, #FFFFFF);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;margin-left:-6px">B</div></div><span style="font-size:12px;color:var(--kit-text-3, #94A3B8)">Mar 28</span></div>
+  </div>
+  <div style="background:var(--kit-bg, #FFFFFF);border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius, 8px);padding:14px">
+    <div style="display:flex;gap:6px;margin-bottom:10px"><span style="background:rgba(34,197,94,0.08);color:var(--kit-success, #22C55E);font-size:11px;font-weight:500;padding:2px 8px;border-radius:4px">Dev</span></div>
+    <div style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text, #0F172A);margin-bottom:10px">API integration for payments</div>
+    <div style="display:flex;align-items:center;justify-content:space-between"><div style="width:24px;height:24px;border-radius:12px;background:#10B981;border:2px solid var(--kit-bg, #FFFFFF);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600">C</div><span style="font-size:12px;color:var(--kit-text-3, #94A3B8)">Apr 2</span></div>
+  </div>
+  <div style="background:var(--kit-bg, #FFFFFF);border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius, 8px);padding:14px">
+    <div style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text, #0F172A);margin-bottom:10px">Update documentation</div>
+    <div style="display:flex;align-items:center;justify-content:space-between"><div style="width:24px;height:24px;border-radius:12px;background:#F59E0B;border:2px solid var(--kit-bg, #FFFFFF);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600">D</div><span style="font-size:12px;color:var(--kit-text-3, #94A3B8)">Apr 5</span></div>
+  </div>
+</div>

package/components/web/patterns/notification-list.html

@@ -0,0 +1,26 @@
+<!--
+  @name: Notification List
+  @kit: web
+  @width: 380
+  @height: 320
+  @tags: notification, list, dropdown, inbox, alerts
+-->
+<div data-component="Notification List" style="width:380px;background:var(--kit-bg, #FFFFFF);border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius-md, 12px);box-shadow:0 8px 24px rgba(0,0,0,0.08);font-family:var(--kit-font, Inter, system-ui, sans-serif);overflow:hidden">
+  <div style="display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--kit-border, #E2E8F0)">
+    <span style="font-size:var(--kit-text-md, 16px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A)">Notifications</span>
+    <span style="font-size:var(--kit-text-xs, 13px);color:var(--kit-primary, #6366F1);cursor:pointer;font-weight:500">Mark all read</span>
+  </div>
+  <div style="display:flex;align-items:flex-start;gap:12px;padding:14px 20px;background:rgba(99,102,241,0.03);cursor:pointer">
+    <div style="width:36px;height:36px;border-radius:18px;background:var(--kit-primary, #6366F1);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;flex-shrink:0">SC</div>
+    <div style="flex:1;min-width:0"><div style="font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A);line-height:1.4"><span style="font-weight:600">Sarah Chen</span> commented on your design</div><div style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-3, #94A3B8);margin-top:3px">5 minutes ago</div></div>
+    <div style="width:8px;height:8px;border-radius:4px;background:var(--kit-primary, #6366F1);flex-shrink:0;margin-top:6px"></div>
+  </div>
+  <div style="display:flex;align-items:flex-start;gap:12px;padding:14px 20px;cursor:pointer">
+    <div style="width:36px;height:36px;border-radius:18px;background:#10B981;color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg></div>
+    <div style="flex:1"><div style="font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A);line-height:1.4">Build <span style="font-weight:600">#423</span> deployed successfully</div><div style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-3, #94A3B8);margin-top:3px">1 hour ago</div></div>
+  </div>
+  <div style="display:flex;align-items:flex-start;gap:12px;padding:14px 20px;cursor:pointer">
+    <div style="width:36px;height:36px;border-radius:18px;background:#F59E0B;color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></div>
+    <div style="flex:1"><div style="font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A);line-height:1.4">Storage usage at <span style="font-weight:600">85%</span> capacity</div><div style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-3, #94A3B8);margin-top:3px">Yesterday</div></div>
+  </div>
+</div>

package/components/web/patterns/order-tracker.html

@@ -0,0 +1,16 @@
+<!--
+  @name: Order Status Tracker
+  @kit: web
+  @width: 640
+  @height: 80
+  @tags: order, status, tracker, ecommerce, shipping, steps
+-->
+<div data-component="Order Status Tracker" style="width:100%;display:flex;align-items:center;font-family:var(--kit-font, Inter, system-ui, sans-serif)">
+  <div style="display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0"><div style="width:28px;height:28px;border-radius:14px;background:var(--kit-success, #22C55E);color:#fff;display:flex;align-items:center;justify-content:center"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></div><span style="font-size:11px;font-weight:500;color:var(--kit-success, #22C55E)">Ordered</span></div>
+  <div style="flex:1;height:2px;background:var(--kit-success, #22C55E);margin:0 8px 18px"></div>
+  <div style="display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0"><div style="width:28px;height:28px;border-radius:14px;background:var(--kit-success, #22C55E);color:#fff;display:flex;align-items:center;justify-content:center"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></div><span style="font-size:11px;font-weight:500;color:var(--kit-success, #22C55E)">Packed</span></div>
+  <div style="flex:1;height:2px;background:var(--kit-primary, #6366F1);margin:0 8px 18px"></div>
+  <div style="display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0"><div style="width:28px;height:28px;border-radius:14px;background:var(--kit-primary, #6366F1);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600">3</div><span style="font-size:11px;font-weight:500;color:var(--kit-primary, #6366F1)">Shipped</span></div>
+  <div style="flex:1;height:2px;background:var(--kit-border, #E2E8F0);margin:0 8px 18px"></div>
+  <div style="display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0"><div style="width:28px;height:28px;border-radius:14px;border:2px solid var(--kit-border, #E2E8F0);color:var(--kit-text-3, #94A3B8);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;box-sizing:border-box">4</div><span style="font-size:11px;color:var(--kit-text-3, #94A3B8)">Delivered</span></div>
+</div>

package/components/web/patterns/pagination.html

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

package/components/web/patterns/product-card-web.html

@@ -0,0 +1,23 @@
+<!--
+  @name: Product Card — E-Commerce Web
+  @kit: web
+  @width: 300
+  @height: 380
+  @tags: product, card, ecommerce, shop, price, web
+-->
+<div data-component="Product Card — E-Commerce Web" style="width:100%;background:var(--kit-bg, #FFFFFF);border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius-md, 12px);overflow:hidden;font-family:var(--kit-font, Inter, system-ui, sans-serif)">
+  <div style="position:relative">
+    <img src="https://placehold.jp/300x220.png" style="width:100%;height:220px;object-fit:cover;display:block" alt="Product"/>
+    <div style="position:absolute;top:12px;left:12px;background:var(--kit-danger, #EF4444);color:#fff;font-size:11px;font-weight:600;padding:3px 10px;border-radius:6px">-20% OFF</div>
+    <div style="position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:18px;background:var(--kit-bg, #FFFFFF);box-shadow:var(--kit-shadow-sm, 0 1px 2px rgba(0,0,0,0.05));display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--kit-text-2, #475569)"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg></div>
+  </div>
+  <div style="padding:16px">
+    <div style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-3, #94A3B8);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:4px">Electronics</div>
+    <div style="font-size:var(--kit-text-md, 16px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text, #0F172A);margin-bottom:6px">Wireless Headphones Pro</div>
+    <div style="display:flex;align-items:center;gap:4px;margin-bottom:10px"><svg width="14" height="14" viewBox="0 0 24 24" fill="#FBBF24" stroke="#FBBF24" stroke-width="1"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg><svg width="14" height="14" viewBox="0 0 24 24" fill="#FBBF24" stroke="#FBBF24" stroke-width="1"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg><svg width="14" height="14" viewBox="0 0 24 24" fill="#FBBF24" stroke="#FBBF24" stroke-width="1"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg><svg width="14" height="14" viewBox="0 0 24 24" fill="#FBBF24" stroke="#FBBF24" stroke-width="1"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--kit-border, #E2E8F0)" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg><span style="font-size:12px;color:var(--kit-text-3, #94A3B8);margin-left:4px">(128)</span></div>
+    <div style="display:flex;align-items:center;justify-content:space-between">
+      <div style="display:flex;align-items:baseline;gap:6px"><span style="font-size:var(--kit-text-xl, 20px);font-weight:var(--kit-font-bold, 700);color:var(--kit-text, #0F172A)">$79.99</span><span style="font-size:var(--kit-text-sm, 14px);color:var(--kit-text-3, #94A3B8);text-decoration:line-through">$99.99</span></div>
+      <div style="width:36px;height:36px;border-radius:var(--kit-radius, 8px);background:var(--kit-primary, #6366F1);display:flex;align-items:center;justify-content:center;cursor:pointer"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg></div>
+    </div>
+  </div>
+</div>

package/components/web/patterns/settings-form.html

@@ -0,0 +1,24 @@
+<!--
+  @name: Settings Form — Profile
+  @kit: web
+  @width: 640
+  @height: 400
+  @tags: settings, form, profile, account, admin
+-->
+<div data-component="Settings Form — Profile" style="width:100%;background:var(--kit-bg, #FFFFFF);border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius-md, 12px);padding:28px;box-sizing:border-box;font-family:var(--kit-font, Inter, system-ui, sans-serif)">
+  <div style="font-size:var(--kit-text-lg, 18px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A);margin-bottom:4px">Profile Settings</div>
+  <div style="font-size:var(--kit-text-sm, 14px);color:var(--kit-text-2, #475569);margin-bottom:24px">Update your personal information</div>
+  <div style="display:flex;align-items:center;gap:16px;margin-bottom:24px">
+    <div style="width:64px;height:64px;border-radius:32px;background:var(--kit-primary, #6366F1);color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;flex-shrink:0">JD</div>
+    <div><div style="display:inline-flex;align-items:center;height:32px;border:1px solid var(--kit-border, #E2E8F0);border-radius:6px;padding:0 12px;font-size:13px;font-weight:500;color:var(--kit-text, #0F172A);cursor:pointer;gap:6px"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>Upload</div><div style="font-size:12px;color:var(--kit-text-3, #94A3B8);margin-top:4px">JPG, PNG. Max 2MB.</div></div>
+  </div>
+  <div style="display:flex;gap:16px;margin-bottom:16px;flex-wrap:wrap">
+    <div style="flex:1;min-width:200px"><div style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text, #0F172A);margin-bottom:6px">First name</div><div style="width:100%;height:40px;border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius, 8px);padding:0 12px;box-sizing:border-box;display:flex;align-items:center;font-size:14px;color:var(--kit-text, #0F172A)">John</div></div>
+    <div style="flex:1;min-width:200px"><div style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text, #0F172A);margin-bottom:6px">Last name</div><div style="width:100%;height:40px;border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius, 8px);padding:0 12px;box-sizing:border-box;display:flex;align-items:center;font-size:14px;color:var(--kit-text, #0F172A)">Doe</div></div>
+  </div>
+  <div style="margin-bottom:24px"><div style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text, #0F172A);margin-bottom:6px">Email</div><div style="width:100%;height:40px;border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius, 8px);padding:0 12px;box-sizing:border-box;display:flex;align-items:center;font-size:14px;color:var(--kit-text, #0F172A)">john@example.com</div></div>
+  <div style="display:flex;justify-content:flex-end;gap:12px">
+    <div style="height:40px;border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius, 8px);padding:0 20px;display:flex;align-items:center;font-size:14px;font-weight:500;color:var(--kit-text, #0F172A);cursor:pointer">Cancel</div>
+    <div style="height:40px;background:var(--kit-primary, #6366F1);color:#fff;border-radius:var(--kit-radius, 8px);padding:0 20px;display:flex;align-items:center;font-size:14px;font-weight:500;cursor:pointer">Save changes</div>
+  </div>
+</div>

package/components/web/patterns/stepper.html

@@ -0,0 +1,16 @@
+<!--
+  @name: Stepper — Horizontal Steps
+  @kit: web
+  @width: 600
+  @height: 64
+  @tags: stepper, wizard, steps, progress, form
+-->
+<div data-component="Stepper — Horizontal Steps" style="display:flex;align-items:center;width:100%;font-family:var(--kit-font, Inter, system-ui, sans-serif)">
+  <div style="display:flex;align-items:center;gap:8px;flex-shrink:0"><div style="width:32px;height:32px;border-radius:16px;background:var(--kit-primary, #6366F1);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></div><span style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-medium, 500);color:var(--kit-primary, #6366F1)">Account</span></div>
+  <div style="flex:1;height:2px;background:var(--kit-primary, #6366F1);margin:0 16px"></div>
+  <div style="display:flex;align-items:center;gap:8px;flex-shrink:0"><div style="width:32px;height:32px;border-radius:16px;background:var(--kit-primary, #6366F1);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600">2</div><span style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-medium, 500);color:var(--kit-primary, #6366F1)">Details</span></div>
+  <div style="flex:1;height:2px;background:var(--kit-border, #E2E8F0);margin:0 16px"></div>
+  <div style="display:flex;align-items:center;gap:8px;flex-shrink:0"><div style="width:32px;height:32px;border-radius:16px;border:2px solid var(--kit-border, #E2E8F0);color:var(--kit-text-3, #94A3B8);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;box-sizing:border-box">3</div><span style="font-size:var(--kit-text-sm, 14px);color:var(--kit-text-3, #94A3B8)">Payment</span></div>
+  <div style="flex:1;height:2px;background:var(--kit-border, #E2E8F0);margin:0 16px"></div>
+  <div style="display:flex;align-items:center;gap:8px;flex-shrink:0"><div style="width:32px;height:32px;border-radius:16px;border:2px solid var(--kit-border, #E2E8F0);color:var(--kit-text-3, #94A3B8);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;box-sizing:border-box">4</div><span style="font-size:var(--kit-text-sm, 14px);color:var(--kit-text-3, #94A3B8)">Confirm</span></div>
+</div>

package/components/web/patterns/user-table-row.html

@@ -0,0 +1,15 @@
+<!--
+  @name: User Table Row
+  @kit: web
+  @width: 800
+  @height: 56
+  @tags: user, table, row, admin, team, role
+-->
+<div data-component="User Table Row" style="display:flex;align-items:center;width:100%;height:56px;padding:0 20px;font-family:var(--kit-font, Inter, system-ui, sans-serif);font-size:14px;border-bottom:1px solid var(--kit-border, #E2E8F0)">
+  <div style="width:40px"><div style="width:18px;height:18px;border:1.5px solid var(--kit-border-strong, #CBD5E1);border-radius:4px"></div></div>
+  <div style="flex:2;display:flex;align-items:center;gap:10px"><div style="width:32px;height:32px;border-radius:16px;background:#6366F1;color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600">SC</div><div><div style="font-weight:500;color:var(--kit-text, #0F172A)">Sarah Chen</div><div style="font-size:12px;color:var(--kit-text-3, #94A3B8)">sarah@acme.com</div></div></div>
+  <div style="flex:1"><span style="background:rgba(99,102,241,0.08);color:var(--kit-primary, #6366F1);padding:3px 10px;border-radius:12px;font-size:12px;font-weight:500">Admin</span></div>
+  <div style="flex:1"><span style="background:var(--kit-success-bg, #F0FDF4);color:var(--kit-success, #22C55E);padding:3px 10px;border-radius:12px;font-size:12px;font-weight:500">Active</span></div>
+  <div style="flex:1;color:var(--kit-text-3, #94A3B8);font-size:13px">Mar 24, 2026</div>
+  <div style="width:40px;display:flex;justify-content:flex-end;cursor:pointer;color:var(--kit-text-3, #94A3B8)"><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="12" cy="19" r="1.5"/></svg></div>
+</div>

package/components/web/patterns/video-player.html

@@ -0,0 +1,26 @@
+<!--
+  @name: Video Player — Web
+  @kit: web
+  @width: 800
+  @height: 480
+  @tags: video, player, controls, web, media
+-->
+<div data-component="Video Player — Web" style="width:100%;background:#000;border-radius:var(--kit-radius-md, 12px);overflow:hidden;font-family:var(--kit-font, Inter, system-ui, sans-serif);position:relative">
+  <img src="https://placehold.jp/cccccc/333333/800x420.png?text=16:9+Video" style="width:100%;height:420px;object-fit:cover;display:block" alt="Video"/>
+  <div style="position:absolute;top:0;left:0;right:0;bottom:60px;display:flex;align-items:center;justify-content:center">
+    <div style="width:64px;height:64px;border-radius:32px;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;cursor:pointer"><svg width="28" height="28" viewBox="0 0 24 24" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="1"><polygon points="5 3 19 12 5 21 5 3"/></svg></div>
+  </div>
+  <div style="height:60px;background:linear-gradient(transparent, rgba(0,0,0,0.85));padding:8px 20px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;position:absolute;bottom:0;left:0;right:0">
+    <div style="width:100%;height:4px;background:rgba(255,255,255,0.2);border-radius:2px;cursor:pointer;position:relative"><div style="width:35%;height:100%;background:#FFFFFF;border-radius:2px"></div><div style="width:55%;height:100%;background:rgba(255,255,255,0.15);border-radius:2px;position:absolute;top:0;left:0"></div></div>
+    <div style="display:flex;align-items:center;gap:12px">
+      <div style="cursor:pointer"><svg width="18" height="18" viewBox="0 0 24 24" fill="#FFFFFF"><rect x="6" y="4" width="4" height="16" rx="1"/><rect x="14" y="4" width="4" height="16" rx="1"/></svg></div>
+      <div style="cursor:pointer"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2"><polygon points="5 4 15 12 5 20 5 4"/><line x1="19" y1="5" x2="19" y2="19"/></svg></div>
+      <div style="cursor:pointer"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/></svg></div>
+      <span style="font-size:13px;color:rgba(255,255,255,0.8)">2:14 / 8:30</span>
+      <div style="flex:1"></div>
+      <div style="cursor:pointer"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.8)" stroke-width="2"><rect x="2" y="7" width="20" height="10" rx="2"/><line x1="12" y1="17" x2="12" y2="21"/><line x1="8" y1="21" x2="16" y2="21"/></svg></div>
+      <div style="cursor:pointer"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.8)" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09"/></svg></div>
+      <div style="cursor:pointer"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.8)" stroke-width="2"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg></div>
+    </div>
+  </div>
+</div>

package/components/web/presentation/slide-content.html

@@ -0,0 +1,17 @@
+<!--
+  @name: Presentation Slide — Content (2 Column)
+  @kit: web
+  @width: 1920
+  @height: 1080
+  @tags: presentation, slide, content, two-column, 16:9
+-->
+<div data-component="Presentation Slide — Content (2 Column)" style="width:100%;height:100%;background:#0F172A;display:flex;align-items:center;padding:80px;box-sizing:border-box;font-family:var(--kit-font, Inter, system-ui, sans-serif);gap:64px">
+  <div style="flex:1">
+    <div style="font-size:14px;font-weight:600;color:var(--kit-primary, #6366F1);text-transform:uppercase;letter-spacing:2px;margin-bottom:16px">Section Title</div>
+    <div style="font-size:48px;font-weight:800;color:#FFFFFF;line-height:1.15;margin-bottom:24px">Key point that you want to make</div>
+    <div style="font-size:18px;color:#94A3B8;line-height:1.7">Supporting text that explains the key point in more detail. Keep it concise and focused on the main message you want to convey.</div>
+  </div>
+  <div style="flex:1">
+    <img src="https://placehold.jp/700x500.png" style="width:100%;border-radius:16px;box-shadow:0 16px 48px rgba(0,0,0,0.3)" alt="Content"/>
+  </div>
+</div>

package/components/web/presentation/slide-title.html

@@ -0,0 +1,13 @@
+<!--
+  @name: Presentation Slide — Title
+  @kit: web
+  @width: 1920
+  @height: 1080
+  @tags: presentation, slide, title, deck, 16:9
+-->
+<div data-component="Presentation Slide — Title" style="width:100%;height:100%;background:linear-gradient(135deg, #0F172A, #1E293B);display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--kit-font, Inter, system-ui, sans-serif);text-align:center;padding:80px;box-sizing:border-box">
+  <div style="width:80px;height:80px;border-radius:20px;background:var(--kit-primary, #6366F1);display:flex;align-items:center;justify-content:center;margin-bottom:40px"><svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg></div>
+  <div style="font-size:72px;font-weight:800;color:#FFFFFF;line-height:1.1;margin-bottom:20px">Presentation Title</div>
+  <div style="font-size:24px;color:#94A3B8;max-width:700px;margin-bottom:48px">Subtitle or tagline goes here. Keep it short and impactful.</div>
+  <div style="font-size:18px;color:#64748B">Company Name · Date</div>
+</div>

package/components/web/pricing/pricing-table.html

@@ -0,0 +1,51 @@
+<!--
+  @name: Pricing — Feature Comparison Table
+  @kit: web
+  @width: 1440
+  @height: 480
+  @tags: pricing, table, comparison, features, plans, starter, pro, enterprise
+-->
+<div data-component="Pricing — Feature Comparison Table" style="width:100%;box-sizing:border-box;background:var(--kit-bg, #FFFFFF);padding:48px 80px;font-family:var(--kit-font, Inter, system-ui, sans-serif)">
+  <div style="text-align:center;margin-bottom:32px">
+    <div style="font-size:28px;font-weight:var(--kit-font-bold, 700);color:var(--kit-text, #0F172A);margin-bottom:8px">Compare Plans</div>
+    <div style="font-size:var(--kit-text-md, 16px);color:var(--kit-text-2, #475569)">See which plan is right for you</div>
+  </div>
+  <div style="border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius-md, 12px);overflow:hidden">
+    <div style="display:flex;background:var(--kit-surface, #F8FAFC);border-bottom:1px solid var(--kit-border, #E2E8F0)">
+      <div style="flex:2.5;padding:16px 24px;font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A)">Feature</div>
+      <div style="flex:1;padding:16px 16px;text-align:center;font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text-2, #475569)">Starter</div>
+      <div style="flex:1;padding:16px 16px;text-align:center;font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-primary, #6366F1);background:rgba(99,102,241,0.04)">Pro</div>
+      <div style="flex:1;padding:16px 16px;text-align:center;font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A)">Enterprise</div>
+    </div>
+    <div style="display:flex;border-bottom:1px solid var(--kit-border, #E2E8F0)">
+      <div style="flex:2.5;padding:14px 24px;font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A)">Unlimited projects</div>
+      <div style="flex:1;padding:14px 16px;text-align:center;color:var(--kit-text-3, #94A3B8)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="5" y1="12" x2="19" y2="12"/></svg></div>
+      <div style="flex:1;padding:14px 16px;text-align:center;background:rgba(99,102,241,0.04)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success, #22C55E)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg></div>
+      <div style="flex:1;padding:14px 16px;text-align:center"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success, #22C55E)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg></div>
+    </div>
+    <div style="display:flex;border-bottom:1px solid var(--kit-border, #E2E8F0)">
+      <div style="flex:2.5;padding:14px 24px;font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A)">Custom domain</div>
+      <div style="flex:1;padding:14px 16px;text-align:center;color:var(--kit-text-3, #94A3B8)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="5" y1="12" x2="19" y2="12"/></svg></div>
+      <div style="flex:1;padding:14px 16px;text-align:center;background:rgba(99,102,241,0.04)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success, #22C55E)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg></div>
+      <div style="flex:1;padding:14px 16px;text-align:center"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success, #22C55E)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg></div>
+    </div>
+    <div style="display:flex;border-bottom:1px solid var(--kit-border, #E2E8F0)">
+      <div style="flex:2.5;padding:14px 24px;font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A)">Priority support</div>
+      <div style="flex:1;padding:14px 16px;text-align:center;color:var(--kit-text-3, #94A3B8)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="5" y1="12" x2="19" y2="12"/></svg></div>
+      <div style="flex:1;padding:14px 16px;text-align:center;background:rgba(99,102,241,0.04)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success, #22C55E)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg></div>
+      <div style="flex:1;padding:14px 16px;text-align:center"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success, #22C55E)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg></div>
+    </div>
+    <div style="display:flex;border-bottom:1px solid var(--kit-border, #E2E8F0)">
+      <div style="flex:2.5;padding:14px 24px;font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A)">Advanced analytics</div>
+      <div style="flex:1;padding:14px 16px;text-align:center"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success, #22C55E)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg></div>
+      <div style="flex:1;padding:14px 16px;text-align:center;background:rgba(99,102,241,0.04)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success, #22C55E)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg></div>
+      <div style="flex:1;padding:14px 16px;text-align:center"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success, #22C55E)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg></div>
+    </div>
+    <div style="display:flex">
+      <div style="flex:2.5;padding:14px 24px;font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A)">SSO / SAML authentication</div>
+      <div style="flex:1;padding:14px 16px;text-align:center;color:var(--kit-text-3, #94A3B8)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="5" y1="12" x2="19" y2="12"/></svg></div>
+      <div style="flex:1;padding:14px 16px;text-align:center;color:var(--kit-text-3, #94A3B8);background:rgba(99,102,241,0.04)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="5" y1="12" x2="19" y2="12"/></svg></div>
+      <div style="flex:1;padding:14px 16px;text-align:center"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success, #22C55E)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg></div>
+    </div>
+  </div>
+</div>