designkit-ai 1.0.0

package/components/web/marketing/testimonial-grid.html

@@ -0,0 +1,75 @@
+<!--
+  @name: Testimonial — Grid
+  @kit: web
+  @width: 1200
+  @height: 450
+  @tags: testimonial, grid, reviews, social proof
+-->
+<div data-component="Testimonial — Grid" style="width:100%;box-sizing:border-box;padding:64px 40px;background:var(--kit-bg,#FFFFFF);font-family:var(--kit-font,Inter,system-ui,sans-serif);">
+  <!-- Header -->
+  <div style="text-align:center;margin-bottom:48px;">
+    <h2 style="margin:0 0 12px 0;font-size:var(--kit-text-2xl,24px);font-weight:var(--kit-font-bold,700);color:var(--kit-text,#0F172A);letter-spacing:-0.02em;">What our customers say</h2>
+    <p style="margin:0;font-size:var(--kit-text-md,16px);color:var(--kit-text-2,#475569);">Trusted by thousands of teams around the world</p>
+  </div>
+
+  <!-- Testimonial Cards -->
+  <div style="display:flex;gap:24px;">
+    <!-- Card 1 -->
+    <div style="flex:1;padding:28px;border-radius:var(--kit-radius-md,12px);border:1px solid var(--kit-border,#E2E8F0);background:var(--kit-bg,#FFFFFF);display:flex;flex-direction:column;">
+      <!-- Stars -->
+      <div style="display:flex;gap:2px;margin-bottom:16px;">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="var(--kit-accent,#EC4899)" stroke="none"><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="20" height="20" viewBox="0 0 24 24" fill="var(--kit-accent,#EC4899)" stroke="none"><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="20" height="20" viewBox="0 0 24 24" fill="var(--kit-accent,#EC4899)" stroke="none"><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="20" height="20" viewBox="0 0 24 24" fill="var(--kit-accent,#EC4899)" stroke="none"><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="20" height="20" viewBox="0 0 24 24" fill="var(--kit-accent,#EC4899)" stroke="none"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
+      </div>
+      <p style="margin:0 0 20px 0;font-size:var(--kit-text-sm,14px);color:var(--kit-text,#0F172A);line-height:1.6;flex:1;">"The best tool we've added to our stack this year. Onboarding was seamless and our team was productive within a day. The analytics alone paid for the subscription."</p>
+      <div style="display:flex;align-items:center;gap:12px;">
+        <img src="https://placehold.jp/40x40" alt="Alex Rivera" style="width:40px;height:40px;border-radius:50%;" />
+        <div>
+          <div style="font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-semibold,600);color:var(--kit-text,#0F172A);">Alex Rivera</div>
+          <div style="font-size:var(--kit-text-xs,12px);color:var(--kit-text-2,#475569);">CTO, Startup Labs</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Card 2 -->
+    <div style="flex:1;padding:28px;border-radius:var(--kit-radius-md,12px);border:1px solid var(--kit-border,#E2E8F0);background:var(--kit-bg,#FFFFFF);display:flex;flex-direction:column;">
+      <div style="display:flex;gap:2px;margin-bottom:16px;">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="var(--kit-accent,#EC4899)" stroke="none"><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="20" height="20" viewBox="0 0 24 24" fill="var(--kit-accent,#EC4899)" stroke="none"><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="20" height="20" viewBox="0 0 24 24" fill="var(--kit-accent,#EC4899)" stroke="none"><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="20" height="20" viewBox="0 0 24 24" fill="var(--kit-accent,#EC4899)" stroke="none"><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="20" height="20" viewBox="0 0 24 24" fill="var(--kit-accent,#EC4899)" stroke="none"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
+      </div>
+      <p style="margin:0 0 20px 0;font-size:var(--kit-text-sm,14px);color:var(--kit-text,#0F172A);line-height:1.6;flex:1;">"We replaced three different tools with this one platform. The workflow automation saved us 20+ hours per week. Customer support is also incredibly responsive."</p>
+      <div style="display:flex;align-items:center;gap:12px;">
+        <img src="https://placehold.jp/40x40" alt="Maria Santos" style="width:40px;height:40px;border-radius:50%;" />
+        <div>
+          <div style="font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-semibold,600);color:var(--kit-text,#0F172A);">Maria Santos</div>
+          <div style="font-size:var(--kit-text-xs,12px);color:var(--kit-text-2,#475569);">Product Lead, DesignCo</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Card 3 -->
+    <div style="flex:1;padding:28px;border-radius:var(--kit-radius-md,12px);border:1px solid var(--kit-border,#E2E8F0);background:var(--kit-bg,#FFFFFF);display:flex;flex-direction:column;">
+      <div style="display:flex;gap:2px;margin-bottom:16px;">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="var(--kit-accent,#EC4899)" stroke="none"><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="20" height="20" viewBox="0 0 24 24" fill="var(--kit-accent,#EC4899)" stroke="none"><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="20" height="20" viewBox="0 0 24 24" fill="var(--kit-accent,#EC4899)" stroke="none"><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="20" height="20" viewBox="0 0 24 24" fill="var(--kit-accent,#EC4899)" stroke="none"><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="20" height="20" viewBox="0 0 24 24" fill="var(--kit-accent,#EC4899)" stroke="none"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
+      </div>
+      <p style="margin:0 0 20px 0;font-size:var(--kit-text-sm,14px);color:var(--kit-text,#0F172A);line-height:1.6;flex:1;">"Finally, a platform that scales with our needs. We started with 5 users and now have 200+. The enterprise features like SSO and audit logs are top-notch."</p>
+      <div style="display:flex;align-items:center;gap:12px;">
+        <img src="https://placehold.jp/40x40" alt="James Kim" style="width:40px;height:40px;border-radius:50%;" />
+        <div>
+          <div style="font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-semibold,600);color:var(--kit-text,#0F172A);">James Kim</div>
+          <div style="font-size:var(--kit-text-xs,12px);color:var(--kit-text-2,#475569);">Director of Ops, ScaleUp Inc</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

package/components/web/media/blog-post-card.html

@@ -0,0 +1,24 @@
+<!--
+  @name: Blog Post Card
+  @kit: web
+  @width: 360
+  @height: 340
+  @tags: blog, post, card, article, content
+-->
+<div data-component="Blog Post 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);border:1px solid var(--kit-border,#E2E8F0);overflow:hidden;display:flex;flex-direction:column;">
+  <div style="width:100%;height:160px;overflow:hidden;">
+    <img src="https://placehold.jp/360x160" alt="Blog post cover" style="width:100%;height:100%;object-fit:cover;display:block;" />
+  </div>
+  <div style="padding:16px;display:flex;flex-direction:column;gap:10px;flex:1;">
+    <span style="display:inline-block;width:fit-content;padding:3px 10px;background:rgba(99,102,241,0.1);color:var(--kit-primary,#6366F1);font-size:var(--kit-text-xs,12px);font-weight:var(--kit-font-semibold,600);border-radius:var(--kit-radius-full,9999px);">Design</span>
+    <span style="font-size:var(--kit-text-lg,18px);font-weight:var(--kit-font-bold,700);color:var(--kit-text,#0F172A);line-height:1.3;">Building Scalable Design Systems for Modern Teams</span>
+    <span style="font-size:var(--kit-text-sm,14px);color:var(--kit-text-2,#475569);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;">Learn how to create a design system that scales with your organization and keeps your team aligned across products and platforms.</span>
+    <div style="display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:4px;">
+      <div style="width:28px;height:28px;border-radius:var(--kit-radius-full,9999px);overflow:hidden;">
+        <img src="https://placehold.jp/28x28" alt="Sophie Lane" style="width:100%;height:100%;object-fit:cover;display:block;" />
+      </div>
+      <span style="font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-medium,500);color:var(--kit-text,#0F172A);">Sophie Lane</span>
+      <span style="font-size:var(--kit-text-xs,12px);color:var(--kit-text-3,#94A3B8);">Mar 22, 2026</span>
+    </div>
+  </div>
+</div>

package/components/web/media/comment-single.html

@@ -0,0 +1,26 @@
+<!--
+  @name: Comment — Single
+  @kit: web
+  @width: 500
+  @height: 120
+  @tags: comment, single, review, feedback
+-->
+<div data-component="Comment — Single" style="width:100%;max-width:500px;box-sizing:border-box;font-family:var(--kit-font,Inter,system-ui,sans-serif);background:var(--kit-bg,#FFFFFF);padding:16px;display:flex;flex-direction:row;gap:12px;">
+  <div style="width:40px;min-width:40px;height:40px;border-radius:var(--kit-radius-full,9999px);overflow:hidden;flex-shrink:0;">
+    <img src="https://placehold.jp/40x40" alt="Michael Torres" style="width:100%;height:100%;object-fit:cover;display:block;" />
+  </div>
+  <div style="flex:1;display:flex;flex-direction:column;gap:8px;">
+    <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);">Michael Torres</span>
+      <span style="font-size:var(--kit-text-xs,12px);color:var(--kit-text-3,#94A3B8);">5 minutes ago</span>
+    </div>
+    <p style="margin:0;font-size:var(--kit-text-sm,14px);color:var(--kit-text,#0F172A);line-height:1.6;">This is exactly what I was looking for! The step-by-step breakdown makes it so much easier to understand. Thanks for sharing this detailed guide.</p>
+    <div style="display:flex;align-items:center;gap:16px;">
+      <div style="display:flex;align-items:center;gap:5px;cursor:pointer;">
+        <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="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg>
+        <span style="font-size:var(--kit-text-xs,12px);color:var(--kit-text-3,#94A3B8);font-weight:var(--kit-font-medium,500);">24</span>
+      </div>
+      <span style="font-size:var(--kit-text-xs,12px);color:var(--kit-primary,#6366F1);font-weight:var(--kit-font-medium,500);cursor:pointer;">Reply</span>
+    </div>
+  </div>
+</div>

package/components/web/media/image-gallery-grid.html

@@ -0,0 +1,18 @@
+<!--
+  @name: Image Gallery — Grid
+  @kit: web
+  @width: 500
+  @height: 340
+  @tags: gallery, grid, images, photos
+-->
+<div data-component="Image Gallery — Grid" style="width:100%;max-width:500px;box-sizing:border-box;font-family:var(--kit-font,Inter,system-ui,sans-serif);display:grid;grid-template-columns:1fr 1fr;grid-template-rows:200px 132px;gap:8px;">
+  <div style="grid-column:1 / -1;border-radius:var(--kit-radius-md,12px);overflow:hidden;">
+    <img src="https://placehold.jp/500x200" alt="Gallery hero image" style="width:100%;height:100%;object-fit:cover;display:block;" />
+  </div>
+  <div style="border-radius:var(--kit-radius-md,12px);overflow:hidden;">
+    <img src="https://placehold.jp/246x132" alt="Gallery image 2" style="width:100%;height:100%;object-fit:cover;display:block;" />
+  </div>
+  <div style="border-radius:var(--kit-radius-md,12px);overflow:hidden;">
+    <img src="https://placehold.jp/246x132" alt="Gallery image 3" style="width:100%;height:100%;object-fit:cover;display:block;" />
+  </div>
+</div>

package/components/web/media/rich-text-block.html

@@ -0,0 +1,20 @@
+<!--
+  @name: Rich Text Block
+  @kit: web
+  @width: 600
+  @height: 350
+  @tags: rich text, content, article, typography
+-->
+<div data-component="Rich Text Block" style="width:100%;max-width:600px;box-sizing:border-box;font-family:var(--kit-font,Inter,system-ui,sans-serif);background:var(--kit-bg,#FFFFFF);display:flex;flex-direction:column;gap:16px;">
+  <h2 style="margin:0;font-size:var(--kit-text-2xl,24px);font-weight:var(--kit-font-bold,700);color:var(--kit-text,#0F172A);line-height:1.3;">The Future of Responsive Design</h2>
+  <p style="margin:0;font-size:var(--kit-text-md,16px);color:var(--kit-text-2,#475569);line-height:1.7;">Modern web design has evolved significantly over the past decade. With the rise of mobile-first approaches and container queries, designers now have more tools than ever to create fluid, adaptive experiences that work across every device and screen size.</p>
+  <div style="width:100%;height:150px;border-radius:var(--kit-radius-md,12px);overflow:hidden;">
+    <img src="https://placehold.jp/600x150" alt="Responsive design illustration" style="width:100%;height:100%;object-fit:cover;display:block;" />
+  </div>
+  <ul style="margin:0;padding:0 0 0 20px;display:flex;flex-direction:column;gap:8px;">
+    <li style="font-size:var(--kit-text-md,16px);color:var(--kit-text-2,#475569);line-height:1.6;"><span style="font-weight:var(--kit-font-semibold,600);color:var(--kit-text,#0F172A);">Container queries</span> allow components to respond to their parent container rather than the viewport</li>
+    <li style="font-size:var(--kit-text-md,16px);color:var(--kit-text-2,#475569);line-height:1.6;"><span style="font-weight:var(--kit-font-semibold,600);color:var(--kit-text,#0F172A);">CSS Grid and Subgrid</span> provide powerful layout tools for complex two-dimensional arrangements</li>
+    <li style="font-size:var(--kit-text-md,16px);color:var(--kit-text-2,#475569);line-height:1.6;"><span style="font-weight:var(--kit-font-semibold,600);color:var(--kit-text,#0F172A);">Logical properties</span> ensure designs adapt seamlessly to different writing modes and directions</li>
+  </ul>
+  <p style="margin:0;font-size:var(--kit-text-md,16px);color:var(--kit-text-2,#475569);line-height:1.7;">As we look ahead, the combination of AI-driven design systems and advanced CSS capabilities will continue to push the boundaries of what is possible on the web. The key is to embrace these tools while keeping user experience at the center of every decision.</p>
+</div>

package/components/web/media/testimonial-quote.html

@@ -0,0 +1,20 @@
+<!--
+  @name: Testimonial — Quote
+  @kit: web
+  @width: 400
+  @height: 200
+  @tags: testimonial, quote, review, social proof
+-->
+<div data-component="Testimonial — Quote" style="width:100%;max-width:400px;box-sizing:border-box;font-family:var(--kit-font,Inter,system-ui,sans-serif);background:var(--kit-surface,#F8FAFC);padding:24px;border-radius:var(--kit-radius-lg,16px);display:flex;flex-direction:column;gap:16px;">
+  <svg width="32" height="32" viewBox="0 0 24 24" fill="var(--kit-primary,#6366F1)" stroke="none" style="opacity:0.3;"><path d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z"/><path d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z"/></svg>
+  <p style="margin:0;font-size:var(--kit-text-md,16px);color:var(--kit-text,#0F172A);line-height:1.6;font-style:italic;">Pixeliro completely transformed our design workflow. What used to take our team weeks now happens in days. The collaboration features are top-notch and the export quality is phenomenal.</p>
+  <div style="display:flex;align-items:center;gap:12px;">
+    <div style="width:40px;height:40px;border-radius:var(--kit-radius-full,9999px);overflow:hidden;">
+      <img src="https://placehold.jp/40x40" alt="David Kim" style="width:100%;height:100%;object-fit:cover;display:block;" />
+    </div>
+    <div style="display:flex;flex-direction:column;gap:1px;">
+      <span style="font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-semibold,600);color:var(--kit-text,#0F172A);">David Kim</span>
+      <span style="font-size:var(--kit-text-xs,12px);color:var(--kit-text-3,#94A3B8);">Head of Design, TechCorp</span>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,44 @@
+<!--
+  @name: Video Player
+  @kit: web
+  @width: 500
+  @height: 300
+  @tags: video, player, media, embed
+-->
+<div data-component="Video Player" style="width:100%;max-width:500px;box-sizing:border-box;font-family:var(--kit-font,Inter,system-ui,sans-serif);position:relative;background:#0F172A;border-radius:var(--kit-radius-md,12px);overflow:hidden;height:300px;display:flex;flex-direction:column;">
+  <!-- Video area -->
+  <div style="flex:1;display:flex;align-items:center;justify-content:center;position:relative;">
+    <img src="https://placehold.jp/500x260" alt="Video thumbnail" style="width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0;opacity:0.6;" />
+    <!-- Play button -->
+    <button style="width:56px;height:56px;border-radius:var(--kit-radius-full,9999px);background:rgba(255,255,255,0.95);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:1;box-shadow:0 4px 12px rgba(0,0,0,0.3);">
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="#0F172A" stroke="none"><polygon points="6 3 20 12 6 21 6 3"/></svg>
+    </button>
+  </div>
+  <!-- Controls bar -->
+  <div style="padding:8px 12px;display:flex;flex-direction:column;gap:6px;background:linear-gradient(transparent, rgba(0,0,0,0.8));">
+    <!-- Progress bar -->
+    <div style="width:100%;height:4px;background:rgba(255,255,255,0.2);border-radius:var(--kit-radius-full,9999px);cursor:pointer;">
+      <div style="width:27%;height:100%;background:var(--kit-primary,#6366F1);border-radius:var(--kit-radius-full,9999px);position:relative;">
+        <div style="position:absolute;right:-4px;top:50%;transform:translateY(-50%);width:10px;height:10px;border-radius:var(--kit-radius-full,9999px);background:var(--kit-bg,#FFFFFF);"></div>
+      </div>
+    </div>
+    <div style="display:flex;align-items:center;justify-content:space-between;">
+      <div style="display:flex;align-items:center;gap:12px;">
+        <button style="border:none;background:none;cursor:pointer;padding:0;display:flex;align-items:center;">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="white" stroke="none"><polygon points="6 3 20 12 6 21 6 3"/></svg>
+        </button>
+        <span style="font-size:var(--kit-text-xs,12px);color:rgba(255,255,255,0.8);font-variant-numeric:tabular-nums;">2:45 / 10:30</span>
+      </div>
+      <div style="display:flex;align-items:center;gap:12px;">
+        <!-- Volume -->
+        <button style="border:none;background:none;cursor:pointer;padding:0;display:flex;align-items:center;">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M19.07 4.93a10 10 0 010 14.14"/><path d="M15.54 8.46a5 5 0 010 7.07"/></svg>
+        </button>
+        <!-- Fullscreen -->
+        <button style="border:none;background:none;cursor:pointer;padding:0;display:flex;align-items:center;">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>

package/components/web/menus/dropdown-menu.html

@@ -0,0 +1,14 @@
+<!--
+  @name: Dropdown Menu
+  @kit: web
+  @width: 220
+  @height: 240
+  @tags: menu, dropdown, popup, context, actions
+-->
+<div data-component="Dropdown Menu" style="width:220px;background:var(--kit-bg, #FFFFFF);border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius, 8px);box-shadow:0 4px 16px rgba(0,0,0,0.08);padding:4px;font-family:var(--kit-font, Inter, system-ui, sans-serif)">
+  <div style="display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:6px;cursor:pointer;font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--kit-text-2, #475569)" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>Edit</div>
+  <div style="display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:6px;cursor:pointer;font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--kit-text-2, #475569)" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>Duplicate</div>
+  <div style="display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:6px;cursor:pointer;font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--kit-text-2, #475569)" stroke-width="2"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>Share</div>
+  <div style="height:1px;background:var(--kit-border, #E2E8F0);margin:4px 8px"></div>
+  <div style="display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:6px;cursor:pointer;font-size:var(--kit-text-sm, 14px);color:var(--kit-danger, #EF4444)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>Delete</div>
+</div>

package/components/web/metrics/kpi-row.html

@@ -0,0 +1,13 @@
+<!--
+  @name: KPI Row — 4 Metric Cards
+  @kit: web
+  @width: 1200
+  @height: 130
+  @tags: kpi, metrics, dashboard, stats, saas
+-->
+<div data-component="KPI Row — 4 Metric Cards" style="display:flex;gap:16px;flex-wrap:wrap;width:100%;font-family:var(--kit-font, Inter, system-ui, sans-serif)">
+  <div style="flex:1;min-width:200px;background:var(--kit-bg, #FFFFFF);border:1px solid var(--kit-border, #E2E8F0);border-radius:12px;padding:20px"><div style="display:flex;justify-content:space-between;margin-bottom:12px"><span style="font-size:13px;color:var(--kit-text-2, #475569)">Total Revenue</span><div style="width:36px;height:36px;border-radius:8px;background:rgba(99,102,241,0.08);display:flex;align-items:center;justify-content:center;color:var(--kit-primary, #6366F1)"><svg width="16" height="16" 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></div></div><div style="font-size:28px;font-weight:700;color:var(--kit-text, #0F172A);margin-bottom:4px">$45,231</div><div style="font-size:12px;color:var(--kit-success, #22C55E);font-weight:500">+20.1% vs last month</div></div>
+  <div style="flex:1;min-width:200px;background:var(--kit-bg, #FFFFFF);border:1px solid var(--kit-border, #E2E8F0);border-radius:12px;padding:20px"><div style="display:flex;justify-content:space-between;margin-bottom:12px"><span style="font-size:13px;color:var(--kit-text-2, #475569)">Active Users</span><div style="width:36px;height:36px;border-radius:8px;background:rgba(34,197,94,0.08);display:flex;align-items:center;justify-content:center;color:var(--kit-success, #22C55E)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg></div></div><div style="font-size:28px;font-weight:700;color:var(--kit-text, #0F172A);margin-bottom:4px">2,350</div><div style="font-size:12px;color:var(--kit-success, #22C55E);font-weight:500">+12.5%</div></div>
+  <div style="flex:1;min-width:200px;background:var(--kit-bg, #FFFFFF);border:1px solid var(--kit-border, #E2E8F0);border-radius:12px;padding:20px"><div style="display:flex;justify-content:space-between;margin-bottom:12px"><span style="font-size:13px;color:var(--kit-text-2, #475569)">Conversion</span><div style="width:36px;height:36px;border-radius:8px;background:rgba(245,158,11,0.08);display:flex;align-items:center;justify-content:center;color:var(--kit-warning, #F59E0B)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg></div></div><div style="font-size:28px;font-weight:700;color:var(--kit-text, #0F172A);margin-bottom:4px">3.2%</div><div style="font-size:12px;color:var(--kit-danger, #EF4444);font-weight:500">-0.4%</div></div>
+  <div style="flex:1;min-width:200px;background:var(--kit-bg, #FFFFFF);border:1px solid var(--kit-border, #E2E8F0);border-radius:12px;padding:20px"><div style="display:flex;justify-content:space-between;margin-bottom:12px"><span style="font-size:13px;color:var(--kit-text-2, #475569)">Avg. Session</span><div style="width:36px;height:36px;border-radius:8px;background:rgba(59,130,246,0.08);display:flex;align-items:center;justify-content:center;color:var(--kit-info, #3B82F6)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></div></div><div style="font-size:28px;font-weight:700;color:var(--kit-text, #0F172A);margin-bottom:4px">4m 32s</div><div style="font-size:12px;color:var(--kit-success, #22C55E);font-weight:500">+8.1%</div></div>
+</div>

package/components/web/modals/modal-basic.html

@@ -0,0 +1,21 @@
+<!--
+  @name: Modal — Basic Confirm
+  @kit: web
+  @width: 480
+  @height: 240
+  @tags: modal, dialog, confirm, overlay
+-->
+<div data-component="Modal — Basic Confirm" style="width:480px;background:var(--kit-bg, #FFFFFF);border-radius:var(--kit-radius-lg, 16px);box-shadow:0 20px 60px rgba(0,0,0,0.15);font-family:var(--kit-font, Inter, system-ui, sans-serif);overflow:hidden">
+  <div style="padding:24px 24px 0;display:flex;align-items:flex-start;justify-content:space-between">
+    <div style="width:44px;height:44px;border-radius:var(--kit-radius, 8px);background:var(--kit-danger-bg, #FEF2F2);display:flex;align-items:center;justify-content:center;color:var(--kit-danger, #EF4444)"><svg width="22" height="22" 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="cursor:pointer;color:var(--kit-text-3, #94A3B8);padding:4px"><svg width="20" height="20" 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>
+  <div style="padding:16px 24px 24px">
+    <div style="font-size:var(--kit-text-lg, 18px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A);margin-bottom:8px">Delete project?</div>
+    <div style="font-size:var(--kit-text-sm, 14px);color:var(--kit-text-2, #475569);line-height:1.5;margin-bottom:24px">This action cannot be undone. All data associated with this project will be permanently removed.</div>
+    <div style="display:flex;gap:12px;justify-content:flex-end">
+      <div style="display:flex;align-items:center;justify-content:center;height:40px;border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius, 8px);padding:0 20px;font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text, #0F172A);cursor:pointer">Cancel</div>
+      <div style="display:flex;align-items:center;justify-content:center;height:40px;background:var(--kit-danger, #EF4444);border-radius:var(--kit-radius, 8px);padding:0 20px;font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-medium, 500);color:#FFFFFF;cursor:pointer">Delete</div>
+    </div>
+  </div>
+</div>

package/components/web/modals/modal-form.html

@@ -0,0 +1,22 @@
+<!--
+  @name: Modal — with Form
+  @kit: web
+  @width: 480
+  @height: 380
+  @tags: modal, form, dialog, create, edit
+-->
+<div data-component="Modal — with Form" style="width:480px;background:var(--kit-bg, #FFFFFF);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,0.15);font-family:var(--kit-font, Inter, system-ui, sans-serif);overflow:hidden">
+  <div style="display:flex;align-items:center;padding:20px 24px;border-bottom:1px solid var(--kit-border, #E2E8F0)">
+    <div style="flex:1;font-size:18px;font-weight:600;color:var(--kit-text, #0F172A)">Create Project</div>
+    <div style="cursor:pointer;color:var(--kit-text-3, #94A3B8);padding:4px"><svg width="20" height="20" 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>
+  <div style="padding:24px">
+    <div style="margin-bottom:16px"><div style="font-size:14px;font-weight:500;color:var(--kit-text, #0F172A);margin-bottom:6px">Project name</div><div style="width:100%;height:40px;border:1px solid var(--kit-border, #E2E8F0);border-radius:8px;padding:0 12px;box-sizing:border-box;display:flex;align-items:center;font-size:14px;color:var(--kit-text-3, #94A3B8)">Enter project name</div></div>
+    <div style="margin-bottom:16px"><div style="font-size:14px;font-weight:500;color:var(--kit-text, #0F172A);margin-bottom:6px">Description</div><div style="width:100%;height:80px;border:1px solid var(--kit-border, #E2E8F0);border-radius:8px;padding:10px 12px;box-sizing:border-box;font-size:14px;color:var(--kit-text-3, #94A3B8)">Optional description...</div></div>
+    <div style="margin-bottom:0"><div style="font-size:14px;font-weight:500;color:var(--kit-text, #0F172A);margin-bottom:6px">Visibility</div><div style="display:flex;align-items:center;width:100%;height:40px;border:1px solid var(--kit-border, #E2E8F0);border-radius:8px;padding:0 12px;box-sizing:border-box;cursor:pointer"><span style="flex:1;font-size:14px;color:var(--kit-text, #0F172A)">Private</span><svg width="14" height="14" 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>
+  </div>
+  <div style="display:flex;gap:12px;padding:16px 24px;border-top:1px solid var(--kit-border, #E2E8F0);justify-content:flex-end">
+    <div style="height:40px;padding:0 20px;border:1px solid var(--kit-border, #E2E8F0);border-radius:8px;display:flex;align-items:center;font-size:14px;font-weight:500;color:var(--kit-text, #0F172A);cursor:pointer">Cancel</div>
+    <div style="height:40px;padding:0 20px;background:var(--kit-primary, #6366F1);color:#fff;border-radius:8px;display:flex;align-items:center;font-size:14px;font-weight:500;cursor:pointer">Create</div>
+  </div>
+</div>

package/components/web/navbars/breadcrumb.html

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

package/components/web/navbars/footer.html

@@ -0,0 +1,35 @@
+<!--
+  @name: Footer — Multi Column
+  @kit: web
+  @width: 1440
+  @height: 320
+  @tags: footer, navigation, links, responsive
+-->
+<div data-component="Footer — Multi Column" style="width:100%;background:var(--kit-text, #0F172A);padding:48px 64px 32px;box-sizing:border-box;font-family:var(--kit-font, Inter, system-ui, sans-serif)">
+  <div style="display:flex;flex-wrap:wrap;gap:48px;margin-bottom:40px">
+    <div style="flex:1;min-width:200px">
+      <div style="font-size:var(--kit-text-xl, 20px);font-weight:var(--kit-font-bold, 700);color:#FFFFFF;margin-bottom:16px">Brand</div>
+      <div style="font-size:var(--kit-text-sm, 14px);color:#94A3B8;line-height:1.6;max-width:280px">Building the future of design tools. Beautiful, fast, and accessible for everyone.</div>
+    </div>
+    <div style="min-width:140px">
+      <div style="font-size:var(--kit-text-xs, 12px);font-weight:var(--kit-font-semibold, 600);color:#94A3B8;text-transform:uppercase;letter-spacing:1px;margin-bottom:16px">Product</div>
+      <div style="display:flex;flex-direction:column;gap:10px;font-size:var(--kit-text-sm, 14px);color:#CBD5E1"><span style="cursor:pointer">Features</span><span style="cursor:pointer">Pricing</span><span style="cursor:pointer">Changelog</span><span style="cursor:pointer">Docs</span></div>
+    </div>
+    <div style="min-width:140px">
+      <div style="font-size:var(--kit-text-xs, 12px);font-weight:var(--kit-font-semibold, 600);color:#94A3B8;text-transform:uppercase;letter-spacing:1px;margin-bottom:16px">Company</div>
+      <div style="display:flex;flex-direction:column;gap:10px;font-size:var(--kit-text-sm, 14px);color:#CBD5E1"><span style="cursor:pointer">About</span><span style="cursor:pointer">Blog</span><span style="cursor:pointer">Careers</span><span style="cursor:pointer">Contact</span></div>
+    </div>
+    <div style="min-width:140px">
+      <div style="font-size:var(--kit-text-xs, 12px);font-weight:var(--kit-font-semibold, 600);color:#94A3B8;text-transform:uppercase;letter-spacing:1px;margin-bottom:16px">Legal</div>
+      <div style="display:flex;flex-direction:column;gap:10px;font-size:var(--kit-text-sm, 14px);color:#CBD5E1"><span style="cursor:pointer">Privacy</span><span style="cursor:pointer">Terms</span><span style="cursor:pointer">Cookies</span></div>
+    </div>
+  </div>
+  <div style="border-top:1px solid #1E293B;padding-top:24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px">
+    <div style="font-size:var(--kit-text-sm, 13px);color:#64748B">2026 Brand. All rights reserved.</div>
+    <div style="display:flex;gap:16px">
+      <div style="cursor:pointer;color:#64748B"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg></div>
+      <div style="cursor:pointer;color:#64748B"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg></div>
+      <div style="cursor:pointer;color:#64748B"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg></div>
+    </div>
+  </div>
+</div>

package/components/web/navbars/sidebar-dark.html

@@ -0,0 +1,21 @@
+<!--
+  @name: Sidebar Navigation — Dark
+  @kit: web
+  @width: 240
+  @height: 900
+  @tags: sidebar, navigation, dark, vertical, menu
+-->
+<div data-component="Sidebar Navigation — Dark" style="width:240px;height:100%;background:#0F172A;font-family:var(--kit-font, Inter, system-ui, sans-serif);display:flex;flex-direction:column;box-sizing:border-box;padding:20px 12px">
+  <div style="font-size:var(--kit-text-xl, 20px);font-weight:var(--kit-font-bold, 700);color:#FFFFFF;padding:0 12px;margin-bottom:24px">AppName</div>
+  <div style="display:flex;flex-direction:column;gap:2px;flex:1">
+    <div style="display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--kit-radius, 8px);background:rgba(255,255,255,0.1);color:#FFFFFF;font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-medium, 500);cursor:pointer"><svg width="18" height="18" 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>Dashboard</div>
+    <div style="display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--kit-radius, 8px);color:#94A3B8;font-size:var(--kit-text-sm, 14px);cursor:pointer"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>Customers</div>
+    <div style="display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--kit-radius, 8px);color:#94A3B8;font-size:var(--kit-text-sm, 14px);cursor:pointer"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22 6 12 13 2 6"/></svg>Messages<div style="margin-left:auto;background:#818CF8;color:#fff;font-size:11px;font-weight:600;padding:1px 7px;border-radius:10px">5</div></div>
+    <div style="display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--kit-radius, 8px);color:#94A3B8;font-size:var(--kit-text-sm, 14px);cursor:pointer"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>Analytics</div>
+    <div style="display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--kit-radius, 8px);color:#94A3B8;font-size:var(--kit-text-sm, 14px);cursor:pointer"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9c.26.604.852.997 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1.08z"/></svg>Settings</div>
+  </div>
+  <div style="border-top:1px solid #1E293B;padding-top:12px;display:flex;align-items:center;gap:10px;padding:12px;cursor:pointer">
+    <div style="width:32px;height:32px;border-radius:16px;background:#1E293B;color:#94A3B8;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600">JD</div>
+    <div style="flex:1"><div style="font-size:13px;font-weight:500;color:#F1F5F9">John Doe</div><div style="font-size:11px;color:#64748B">john@example.com</div></div>
+  </div>
+</div>

package/components/web/navbars/sidebar.html

@@ -0,0 +1,23 @@
+<!--
+  @name: Sidebar Navigation
+  @kit: web
+  @width: 240
+  @height: 900
+  @tags: sidebar, navigation, vertical, menu, responsive
+-->
+<div data-component="Sidebar Navigation" style="width:240px;height:100%;background:var(--kit-bg, #FFFFFF);border-right:1px solid var(--kit-border, #E2E8F0);font-family:var(--kit-font, Inter, system-ui, sans-serif);display:flex;flex-direction:column;box-sizing:border-box;padding:20px 12px">
+  <div style="font-size:var(--kit-text-xl, 20px);font-weight:var(--kit-font-bold, 700);color:var(--kit-primary, #6366F1);padding:0 12px;margin-bottom:24px">AppName</div>
+  <div style="display:flex;flex-direction:column;gap:2px;flex:1">
+    <div style="display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--kit-radius, 8px);background:rgba(99,102,241,0.08);color:var(--kit-primary, #6366F1);font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-medium, 500);cursor:pointer"><svg width="18" height="18" 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>Dashboard</div>
+    <div style="display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--kit-radius, 8px);color:var(--kit-text-2, #475569);font-size:var(--kit-text-sm, 14px);cursor:pointer"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>Customers</div>
+    <div style="display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--kit-radius, 8px);color:var(--kit-text-2, #475569);font-size:var(--kit-text-sm, 14px);cursor:pointer"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22 6 12 13 2 6"/></svg>Messages<div style="margin-left:auto;background:var(--kit-primary, #6366F1);color:#fff;font-size:11px;font-weight:600;padding:1px 7px;border-radius:10px">5</div></div>
+    <div style="display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--kit-radius, 8px);color:var(--kit-text-2, #475569);font-size:var(--kit-text-sm, 14px);cursor:pointer"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>Analytics</div>
+    <div style="display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--kit-radius, 8px);color:var(--kit-text-2, #475569);font-size:var(--kit-text-sm, 14px);cursor:pointer"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><polyline points="13 2 13 9 20 9"/></svg>Documents</div>
+    <div style="font-size:11px;font-weight:var(--kit-font-semibold, 600);color:var(--kit-text-3, #94A3B8);text-transform:uppercase;letter-spacing:0.5px;padding:16px 12px 6px">Settings</div>
+    <div style="display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--kit-radius, 8px);color:var(--kit-text-2, #475569);font-size:var(--kit-text-sm, 14px);cursor:pointer"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9c.26.604.852.997 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1.08z"/></svg>Settings</div>
+  </div>
+  <div style="border-top:1px solid var(--kit-border, #E2E8F0);padding-top:12px;display:flex;align-items:center;gap:10px;padding:12px;cursor:pointer">
+    <div style="width:32px;height:32px;border-radius:16px;background:var(--kit-surface-2, #F1F5F9);display:flex;align-items:center;justify-content:center;color:var(--kit-text-2, #475569);font-size:13px;font-weight:600">JD</div>
+    <div style="flex:1;min-width:0"><div style="font-size:13px;font-weight:500;color:var(--kit-text, #0F172A);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">John Doe</div><div style="font-size:11px;color:var(--kit-text-3, #94A3B8)">john@example.com</div></div>
+  </div>
+</div>

package/components/web/navbars/topnav-search.html

@@ -0,0 +1,25 @@
+<!--
+  @name: Top Navigation — with Search
+  @kit: web
+  @width: 1440
+  @height: 64
+  @tags: navbar, top, search, header, responsive
+-->
+<div data-component="Top Navigation — with Search" style="display:flex;align-items:center;width:100%;height:64px;background:var(--kit-bg, #FFFFFF);border-bottom:1px solid var(--kit-border, #E2E8F0);padding:0 24px;box-sizing:border-box;font-family:var(--kit-font, Inter, system-ui, sans-serif);gap:16px">
+  <div style="font-size:var(--kit-text-xl, 20px);font-weight:var(--kit-font-bold, 700);color:var(--kit-primary, #6366F1)">Brand</div>
+  <div style="flex:1;max-width:480px;display:flex;align-items:center;gap:8px;background:var(--kit-surface, #F8FAFC);border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius, 8px);padding:8px 14px">
+    <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:var(--kit-text-sm, 14px);color:var(--kit-text-3, #94A3B8)">Search...</span>
+    <span style="margin-left:auto;font-size:11px;color:var(--kit-text-3, #94A3B8);background:var(--kit-bg, #FFFFFF);border:1px solid var(--kit-border, #E2E8F0);border-radius:4px;padding:1px 6px">⌘K</span>
+  </div>
+  <div style="flex:1"></div>
+  <div style="display:flex;align-items:center;gap:8px">
+    <div style="width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--kit-text-2, #475569);position:relative"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg><div style="position:absolute;top:4px;right:4px;width:8px;height:8px;border-radius:4px;background:var(--kit-danger, #EF4444);border:2px solid var(--kit-bg, #FFFFFF)"></div></div>
+    <div style="height:24px;width:1px;background:var(--kit-border, #E2E8F0)"></div>
+    <div style="display:flex;align-items:center;gap:8px;cursor:pointer">
+      <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:13px;font-weight:600">JD</div>
+      <span style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text, #0F172A)">John Doe</span>
+      <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>
+</div>

package/components/web/navbars/topnav.html

@@ -0,0 +1,20 @@
+<!--
+  @name: Top Navigation Bar
+  @kit: web
+  @width: 1440
+  @height: 64
+  @tags: navbar, top, header, navigation, responsive
+-->
+<div data-component="Top Navigation Bar" style="display:flex;align-items:center;width:100%;height:64px;background:var(--kit-bg, #FFFFFF);border-bottom:1px solid var(--kit-border, #E2E8F0);padding:0 24px;box-sizing:border-box;font-family:var(--kit-font, Inter, system-ui, sans-serif)">
+  <div style="font-size:var(--kit-text-xl, 20px);font-weight:var(--kit-font-bold, 700);color:var(--kit-primary, #6366F1);margin-right:32px">Brand</div>
+  <div style="display:flex;gap:4px;flex:1">
+    <div style="padding:8px 16px;border-radius:var(--kit-radius, 8px);font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-medium, 500);color:var(--kit-primary, #6366F1);background:rgba(99,102,241,0.08);cursor:pointer">Dashboard</div>
+    <div style="padding:8px 16px;border-radius:var(--kit-radius, 8px);font-size:var(--kit-text-sm, 14px);color:var(--kit-text-2, #475569);cursor:pointer">Projects</div>
+    <div style="padding:8px 16px;border-radius:var(--kit-radius, 8px);font-size:var(--kit-text-sm, 14px);color:var(--kit-text-2, #475569);cursor:pointer">Team</div>
+    <div style="padding:8px 16px;border-radius:var(--kit-radius, 8px);font-size:var(--kit-text-sm, 14px);color:var(--kit-text-2, #475569);cursor:pointer">Reports</div>
+  </div>
+  <div style="display:flex;align-items:center;gap:12px">
+    <div style="width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--kit-text-2, #475569)"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg></div>
+    <div style="width:36px;height:36px;border-radius:18px;background:var(--kit-primary, #6366F1);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;cursor:pointer">JD</div>
+  </div>
+</div>