zark-design 1.0.0

package/templates/layouts.jsx

@@ -0,0 +1,232 @@
+// Zark — Layouts: full dashboard mock, hero/marketing, playground
+
+const HeaderBar = () => (
+  <div style={{
+    height: 56, padding:'0 24px',
+    display:'flex', alignItems:'center', justifyContent:'space-between',
+    borderBottom:'1px solid var(--line-200)', background:'var(--paper)',
+  }}>
+    <div style={{
+      display:'inline-flex', alignItems:'center', gap: 8,
+      padding:'6px 12px', background:'var(--ember-50)',
+      border:'1px solid var(--ember-200)', borderRadius:'var(--r-md)',
+    }}>
+      <Avatar name="P" size={18} square color="var(--ember-500)"/>
+      <span style={{ fontSize: 13, color:'var(--ember-700)', fontWeight: 500 }}>Personal Team</span>
+      <Icons.ChevDown size={12} style={{ color:'var(--ember-700)' }}/>
+    </div>
+    <div style={{ display:'flex', gap: 6, alignItems:'center' }}>
+      <Button variant="ghost" size="sm" icon={<Icons.Bell size={14}/>}/>
+      <Button variant="ghost" size="sm" icon={<Icons.Help size={14}/>}>Help</Button>
+      <Button variant="secondary" size="sm" icon={<Icons.Docs size={14}/>}>Docs</Button>
+      <Button variant="primary" size="sm" icon={<Icons.Upgrade size={14}/>}>Upgrade</Button>
+    </div>
+  </div>
+);
+
+const SidebarItem = ({ icon, label, active, sub }) => (
+  <div style={{
+    display:'flex', alignItems:'center', gap: 10,
+    padding:'7px 10px', fontSize: 13,
+    color: active ? 'var(--ember-700)' : 'var(--ink-500)',
+    background: active ? 'var(--ember-50)' : 'transparent',
+    borderRadius:'var(--r-md)', cursor:'pointer',
+    fontWeight: active ? 500 : 400,
+  }}>
+    <span style={{ color: active ? 'var(--ember-600)' : 'var(--ink-400)' }}>{icon}</span>
+    <span style={{ flex: 1 }}>{label}</span>
+    {sub && <Icons.ChevDown size={12}/>}
+  </div>
+);
+
+const Sidebar = () => (
+  <div style={{
+    width: 240, background:'var(--canvas)',
+    borderRight:'1px solid var(--line-200)',
+    padding: 12, display:'flex', flexDirection:'column', gap: 4,
+  }}>
+    <div style={{ padding:'8px 10px 16px' }}><ZarkLogo/></div>
+    <div style={{ padding:'0 4px 8px' }}>
+      <Input size="sm" icon={<Icons.Search size={12}/>} placeholder="Search" suffix={<Kbd>⌘K</Kbd>}/>
+    </div>
+    <SidebarItem icon={<Icons.Home size={16}/>} label="Overview" active/>
+    <SidebarItem icon={<Icons.Play size={16}/>} label="Playground"/>
+    <SidebarItem icon={<Icons.Extract size={16}/>} label="Extract" sub/>
+    <SidebarItem icon={<Icons.Activity size={16}/>} label="Activity Logs"/>
+    <SidebarItem icon={<Icons.Usage size={16}/>} label="Usage"/>
+    <SidebarItem icon={<Icons.Key size={16}/>} label="API Keys"/>
+    <SidebarItem icon={<Icons.Settings size={16}/>} label="Settings"/>
+  </div>
+);
+
+const DashboardLayout = () => (
+  <Panel title="Dashboard — overview" padded={false}>
+    <div style={{ display:'flex', minHeight: 540 }}>
+      <Sidebar/>
+      <div style={{ flex: 1, display:'flex', flexDirection:'column', background:'var(--paper)' }}>
+        <HeaderBar/>
+        <div style={{ padding: 28, display:'flex', flexDirection:'column', gap: 24, flex: 1 }}>
+          <div>
+            <h2 style={{ margin:0, fontSize: 22, fontWeight: 600, color:'var(--ink-700)', fontFamily:'var(--font-display)', letterSpacing:'-0.012em' }}>Explore our endpoints</h2>
+            <p style={{ margin:'4px 0 0', fontSize: 13, color:'var(--ink-400)' }}>Power your applications with our comprehensive scraping API</p>
+          </div>
+          <div style={{ display:'flex', border:'1px solid var(--line-200)' }}>
+            <EndpointCard icon={<Icons.Drag size={14}/>} label="Scrape" desc="Get llm-ready data from websites."/>
+            <EndpointCard icon={<Icons.Search size={14}/>} label="Search" tag="NEW" desc="Search the web and get full content."/>
+            <EndpointCard icon={<Icons.Globe size={14}/>} label="Crawl" desc="Crawl all the pages on a website."/>
+            <EndpointCard icon={<Icons.Sparkles size={14}/>} label="Extract" desc="Get structured data with AI."/>
+          </div>
+          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 24 }}>
+            <div style={{ background:'var(--surface)', border:'1px solid var(--line-200)', borderRadius:'var(--r-xl)', padding: 18 }}>
+              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline' }}>
+                <div>
+                  <div style={{ fontSize: 14, fontWeight: 600, color:'var(--ink-700)' }}>Scraped pages — Last 7 days</div>
+                  <div style={{ fontSize: 11, color:'var(--ink-400)', marginTop: 2 }}>Credit usage differs</div>
+                </div>
+                <div style={{ fontSize: 26, fontWeight: 600, fontFamily:'var(--font-display)' }}>2</div>
+              </div>
+              <div style={{ marginTop: 12, display:'flex', justifyContent:'center' }}>
+                <AsciiCurve width={66} height={9}/>
+              </div>
+            </div>
+            <div style={{ background:'var(--surface)', border:'1px solid var(--line-200)', borderRadius:'var(--r-xl)', padding: 18 }}>
+              <div style={{ fontSize: 14, fontWeight: 600, color:'var(--ink-700)' }}>API Key</div>
+              <div style={{ fontSize: 11, color:'var(--ink-400)', marginTop: 2, marginBottom: 12 }}>Start scraping right away</div>
+              <Input mono value="fc-9••••••••••••••••••••••aebf" readOnly suffix={<span style={{ display:'inline-flex', gap: 6, color:'var(--ink-400)' }}><Icons.Eye size={14}/><Icons.Copy size={14}/></span>}/>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Panel>
+);
+
+const HeroLayout = () => (
+  <Panel title="Marketing — hero" padded={false}>
+    <div style={{
+      position:'relative', minHeight: 480, padding: '40px 32px',
+      background: 'var(--paper)', overflow:'hidden',
+    }}>
+      <div style={{ position:'absolute', inset:0, opacity: 0.5, pointerEvents:'none' }}>
+        <AsciiBackdrop width={140} height={48} density={0.18} seed={3}/>
+      </div>
+      <div style={{ position:'relative', maxWidth: 720, margin:'0 auto', textAlign:'center', display:'flex', flexDirection:'column', alignItems:'center', gap: 24 }}>
+        <div style={{
+          display:'inline-flex', alignItems:'center', gap: 8,
+          padding:'5px 12px', background:'var(--surface)',
+          border:'1px solid var(--line-200)', borderRadius:'var(--r-pill)',
+          fontSize: 12, color:'var(--ink-600)', boxShadow:'var(--shadow-xs)',
+        }}>
+          2 Months Free — Annually <Icons.ChevRight size={12}/>
+        </div>
+        <h1 style={{
+          margin: 0,
+          fontFamily:'var(--font-display)', fontSize: 64, fontWeight: 700,
+          letterSpacing:'-0.025em', lineHeight: 1.05,
+          color:'var(--ink-700)',
+        }}>
+          Turn websites into<br/>
+          <span style={{ color:'var(--ember-500)' }}>LLM-ready</span> data
+        </h1>
+        <p style={{ margin: 0, fontSize: 16, color:'var(--ink-400)', maxWidth: 460, lineHeight: 1.55 }}>
+          Power your AI apps with clean data crawled from any website. It's also open source.
+        </p>
+        <div style={{
+          display:'flex', alignItems:'center', width: 480, height: 52,
+          background:'var(--surface)',
+          border:'1px solid var(--line-300)',
+          borderRadius:'var(--r-pill)',
+          boxShadow:'var(--shadow-md)', overflow:'hidden', padding: 4,
+        }}>
+          <span style={{ display:'inline-flex', alignItems:'center', gap: 6, padding:'0 16px', color:'var(--ink-400)' }}>
+            <Icons.Globe size={16}/>
+          </span>
+          <input placeholder="https://example.com" style={{
+            flex: 1, border:'none', outline:'none', background:'transparent',
+            fontSize: 14, color:'var(--ink-700)', fontFamily:'var(--font-mono)',
+          }}/>
+          <Button variant="primary" size="md" style={{ borderRadius: 999, width: 44, padding: 0 }}>
+            <Icons.ChevRight size={16}/>
+          </Button>
+        </div>
+      </div>
+    </div>
+  </Panel>
+);
+
+const PlaygroundLayout = () => (
+  <Panel title="Playground state" padded={false}>
+    <div style={{ position:'relative', minHeight: 380, padding:'48px 32px', background:'var(--paper)', overflow:'hidden' }}>
+      <div style={{ position:'absolute', top: 32, left: 32, opacity: 0.45, pointerEvents:'none' }}><AsciiBackdrop width={36} height={20} density={0.28} seed={11}/></div>
+      <div style={{ position:'absolute', top: 32, right: 32, opacity: 0.45, pointerEvents:'none' }}><AsciiBackdrop width={36} height={20} density={0.28} seed={22}/></div>
+
+      <div style={{ position:'relative', maxWidth: 640, margin:'0 auto', textAlign:'center', display:'flex', flexDirection:'column', alignItems:'center', gap: 24 }}>
+        <div>
+          <h1 style={{ margin: 0, fontFamily:'var(--font-display)', fontSize: 38, fontWeight: 600, letterSpacing:'-0.018em', color:'var(--ink-700)' }}>Playground</h1>
+          <p style={{ margin:'8px 0 0', fontSize: 14, color:'var(--ink-400)' }}>API, Docs and Playground - all in one place</p>
+        </div>
+        <Segmented value="scrape" onChange={()=>{}} items={[
+          { value:'scrape',  label:'Scrape', icon:<Icons.Drag size={14}/> },
+          { value:'search',  label:'Search', icon:<Icons.Search size={14}/>, tag:'New' },
+          { value:'map',     label:'Map',    icon:<Icons.Filter size={14}/> },
+          { value:'crawl',   label:'Crawl',  icon:<Icons.Close size={14}/> },
+        ]}/>
+        <div style={{
+          width: '100%', maxWidth: 540,
+          background:'var(--surface)',
+          border:'1px solid var(--line-200)',
+          borderRadius:'var(--r-xl)',
+          boxShadow:'var(--shadow-md)', padding: 14,
+          display:'flex', flexDirection:'column', gap: 12,
+        }}>
+          <div style={{ display:'flex', alignItems:'center', gap: 0, height: 36, border:'1px solid var(--line-200)', borderRadius:'var(--r-md)', overflow:'hidden' }}>
+            <span style={{ padding:'0 12px', fontFamily:'var(--font-mono)', fontSize: 12, color:'var(--ink-400)', borderRight:'1px solid var(--line-200)', height:'100%', display:'flex', alignItems:'center' }}>https://</span>
+            <input defaultValue="www.nngroup.com/articles/usability-101-introduction-to-usability/" style={{ flex: 1, border:'none', outline:'none', padding:'0 12px', fontFamily:'var(--font-mono)', fontSize: 12, color:'var(--ink-700)' }}/>
+          </div>
+          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
+            <div style={{ display:'flex', gap: 8 }}>
+              <Button variant="ghost" size="sm" icon={<Icons.Settings size={14}/>}/>
+              <Button variant="secondary" size="sm" icon={<Icons.Docs size={14}/>} iconRight={<Icons.ChevDown size={12}/>}>Format: Markdown</Button>
+            </div>
+            <div style={{ display:'flex', gap: 8 }}>
+              <Button variant="secondary" size="sm" icon={<Icons.Code size={14}/>}>Get code</Button>
+              <Button variant="primary" size="sm">Start scraping</Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Panel>
+);
+
+const FooterShowcase = () => (
+  <Panel title="Footer / brand bar" padded={false}>
+    <div style={{
+      background:'var(--ink-800)', color:'#fff',
+      padding:'18px 24px',
+      display:'flex', alignItems:'center', justifyContent:'space-between',
+    }}>
+      <div style={{ display:'flex', alignItems:'center', gap: 12 }}>
+        <Icons.Flame size={28} style={{ color:'var(--ember-500)' }}/>
+        <span style={{ fontFamily:'var(--font-display)', fontSize: 20, fontWeight: 600 }}>Zark</span>
+      </div>
+      <span style={{ fontSize: 12, color:'rgba(255,255,255,0.55)', fontFamily:'var(--font-mono)' }}>v2.0.0 · est. 2026</span>
+    </div>
+  </Panel>
+);
+
+const LayoutsSection = () => (
+  <Section
+    id="layouts"
+    eyebrow="07 — Layouts"
+    title="The system, fully composed"
+    description="Three canonical screens show every primitive in its native habitat. Hairlines stay warm, ascii fields appear behind hero moments, the URL pill is the connective tissue across product surfaces."
+  >
+    <DashboardLayout/>
+    <PlaygroundLayout/>
+    <HeroLayout/>
+    <FooterShowcase/>
+  </Section>
+);
+
+window.LayoutsSection = LayoutsSection;

package/templates/patterns.jsx

@@ -0,0 +1,268 @@
+// Zark — Patterns: modal, onboarding, code-block, data table, date picker, banner
+
+const ModalShowcase = () => (
+  <Panel title="Modal — onboarding step" padded={false}>
+    <div style={{
+      padding: 32, background: `
+        radial-gradient(ellipse at top, var(--paper) 0%, var(--canvas) 80%)
+      `, position:'relative', minHeight: 380,
+    }}>
+      <div style={{
+        position:'absolute', inset:0,
+        background:'rgba(20, 17, 12, 0.04)',
+        backdropFilter:'blur(2px)',
+      }}/>
+      <div style={{
+        position:'relative', maxWidth: 460, margin:'24px auto',
+        background:'var(--surface)',
+        border:'1px solid var(--line-200)',
+        borderRadius:'var(--r-2xl)',
+        boxShadow:'var(--shadow-modal)',
+        overflow:'hidden',
+      }}>
+        <div style={{ padding:'24px 24px 0' }}>
+          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom: 6 }}>
+            <h3 style={{ margin: 0, fontSize: 20, fontWeight: 600, fontFamily:'var(--font-display)', letterSpacing:'-0.012em', color:'var(--ink-700)' }}>Let's get you started</h3>
+            <Tag tone="default" size="xs" square>Optional</Tag>
+          </div>
+          <p style={{ margin:'0 0 16px', fontSize: 12, color:'var(--ink-400)' }}>Complete these quick actions to earn bonus credits for your account.</p>
+          <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom: 8 }}>
+            <div style={{ display:'flex', gap: 4 }}>
+              <span style={{ width: 28, height: 4, borderRadius: 2, background:'var(--ember-500)' }}/>
+              <span style={{ width: 12, height: 4, borderRadius: 2, background:'var(--ink-100)' }}/>
+              <span style={{ width: 12, height: 4, borderRadius: 2, background:'var(--ink-100)' }}/>
+              <span style={{ width: 12, height: 4, borderRadius: 2, background:'var(--ink-100)' }}/>
+            </div>
+            <Tag tone="default" size="xs" square>Step 1 of 4</Tag>
+          </div>
+        </div>
+        <div style={{ padding: 4 }}>
+          {[
+            {t:'Email Verified', d:'Your email has been verified', claimed: true, c: ''},
+            {t:'Star our GitHub repo', d:'Check out our open source code and contribute', c:'+100 credits'},
+            {t:'Join our Discord', d:'Connect with us and get community help', c:'+50 credits'},
+            {t:'Follow us on X', d:'Stay updated on new features and launches', c:'+50 credits'},
+          ].map(item => (
+            <div key={item.t} style={{ padding:'12px 20px', borderRadius:'var(--r-md)', display:'flex', alignItems:'center', justifyContent:'space-between' }}>
+              <div>
+                <div style={{ fontSize: 13, fontWeight: 500, color: item.claimed ? 'var(--success-700)' : 'var(--ember-700)' }}>{item.t}</div>
+                <div style={{ fontSize: 11, color:'var(--ink-400)', marginTop: 2 }}>{item.d}</div>
+              </div>
+              {item.claimed ? <Tag tone="success" size="xs">Claimed</Tag> : <span style={{ fontSize: 12, color:'var(--ink-500)', fontFamily:'var(--font-mono)' }}>{item.c}</span>}
+            </div>
+          ))}
+        </div>
+        <div style={{ padding:'16px 20px', borderTop:'1px solid var(--line-100)', display:'flex', justifyContent:'flex-end' }}>
+          <Button variant="secondary">Continue</Button>
+        </div>
+      </div>
+    </div>
+  </Panel>
+);
+
+const CodeBlock = () => (
+  <Panel title="Code block — MCP integration">
+    <div style={{
+      background:'var(--surface)',
+      border:'1px solid var(--line-200)',
+      borderRadius:'var(--r-lg)',
+      padding: 16,
+      fontFamily:'var(--font-mono)', fontSize: 12, lineHeight: 1.7,
+      color:'var(--ink-600)', position:'relative',
+    }}>
+      <div style={{ position:'absolute', top: 10, right: 10, display:'flex', gap: 4 }}>
+        <Button variant="ghost" size="xs" icon={<Icons.Eye size={12}/>}/>
+        <Button variant="ghost" size="xs" icon={<Icons.Copy size={12}/>}/>
+      </div>
+      <div>{'{'}</div>
+      <div style={{ paddingLeft: 16 }}><span style={{ color:'var(--code-fg)' }}>"mcpServers"</span>: {'{'}</div>
+      <div style={{ paddingLeft: 32 }}><span style={{ color:'var(--code-fg)' }}>"zark-mcp"</span>: {'{'}</div>
+      <div style={{ paddingLeft: 48 }}><span style={{ color:'var(--code-fg)' }}>"command"</span>: <span style={{ color:'var(--success-700)' }}>"npx"</span>,</div>
+      <div style={{ paddingLeft: 48 }}><span style={{ color:'var(--code-fg)' }}>"args"</span>: [<span style={{ color:'var(--success-700)' }}>"-y"</span>, <span style={{ color:'var(--success-700)' }}>"zark-mcp"</span>],</div>
+      <div style={{ paddingLeft: 48 }}><span style={{ color:'var(--code-fg)' }}>"env"</span>: {'{'}</div>
+      <div style={{ paddingLeft: 64 }}><span style={{ color:'var(--code-fg)' }}>"ZARK_API_KEY"</span>: <span style={{ color:'var(--success-700)' }}>"$API_KEY"</span></div>
+      <div style={{ paddingLeft: 48 }}>{'}'}</div>
+      <div style={{ paddingLeft: 32 }}>{'}'}</div>
+      <div style={{ paddingLeft: 16 }}>{'}'}</div>
+      <div>{'}'}</div>
+    </div>
+  </Panel>
+);
+
+const DataTableShowcase = () => (
+  <Panel title="Data table" padded={false}>
+    <div style={{
+      padding:'14px 18px',
+      borderBottom:'1px solid var(--line-100)',
+      display:'flex', alignItems:'center', justifyContent:'space-between',
+    }}>
+      <div style={{ display:'flex', gap: 8, alignItems:'center' }}>
+        <div style={{ width: 240 }}><Input size="sm" icon={<Icons.Search size={12}/>} placeholder="Search..."/></div>
+        <Button variant="secondary" size="sm" icon={<Icons.Filter size={12}/>}>/scrape</Button>
+      </div>
+      <Button variant="secondary" size="sm" icon={<Icons.Calendar size={12}/>} iconRight={<Icons.ChevDown size={12}/>}>Custom range</Button>
+    </div>
+    <div>
+      <div style={{
+        display:'grid', gridTemplateColumns:'120px 1fr 100px 60px 140px 40px',
+        padding:'10px 18px',
+        fontFamily:'var(--font-mono)', fontSize: 10,
+        letterSpacing:'var(--ls-wider)', textTransform:'uppercase',
+        color:'var(--ink-300)',
+        borderBottom:'1px solid var(--line-100)',
+      }}>
+        <span>Endpoint</span><span>URL</span><span>Status</span><span>Cr</span><span>Date</span><span></span>
+      </div>
+      {[
+        ['/SCRAPE','https://www.zark.dev/careers','Completed','1','Sep 08, 25 09:57 AM'],
+        ['/SCRAPE','https://www.zark.dev/playground/extract','Completed','2','Sep 08, 25 09:57 AM'],
+        ['/SCRAPE','https://www.zark.dev/extract','Failed','0','Sep 08, 25 09:55 AM'],
+        ['/SCRAPE','https://www.zark.dev/templates','Completed','1','Sep 08, 25 09:54 AM'],
+        ['/SCRAPE','https://www.zark.dev/signin/signup','Pending','—','Sep 08, 25 09:50 AM'],
+      ].map((row, i) => (
+        <div key={i} style={{
+          display:'grid', gridTemplateColumns:'120px 1fr 100px 60px 140px 40px',
+          padding:'14px 18px', alignItems:'center',
+          borderBottom: i < 4 ? '1px solid var(--line-100)' : 'none',
+          fontSize: 12,
+        }}>
+          <Tag tone="mono" size="xs" square>{row[0]}</Tag>
+          <span style={{ color:'var(--ink-600)', fontFamily:'var(--font-mono)', overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{row[1]}</span>
+          <Tag tone={row[2]==='Completed'?'success': row[2]==='Failed'?'danger':'warning'} size="xs">{row[2]}</Tag>
+          <span style={{ color:'var(--ink-500)', fontFamily:'var(--font-mono)' }}>{row[3]}</span>
+          <span style={{ color:'var(--ink-400)', fontFamily:'var(--font-mono)', fontSize: 11 }}>{row[4]}</span>
+          <Icons.Download size={14} style={{ color:'var(--ink-300)', cursor:'pointer' }}/>
+        </div>
+      ))}
+    </div>
+  </Panel>
+);
+
+const DatePickerShowcase = () => {
+  const month = (label, sel = []) => (
+    <div>
+      <div style={{ fontSize: 13, fontWeight: 600, color:'var(--ink-700)', textAlign:'center', marginBottom: 8 }}>{label}</div>
+      <div style={{ display:'grid', gridTemplateColumns:'repeat(7, 1fr)', gap: 2, fontFamily:'var(--font-mono)', fontSize: 10, color:'var(--ink-300)' }}>
+        {['Mo','Tu','We','Th','Fr','Sa','Su'].map(d=><div key={d} style={{ textAlign:'center', padding:'4px 0' }}>{d}</div>)}
+      </div>
+      <div style={{ display:'grid', gridTemplateColumns:'repeat(7, 1fr)', gap: 2, fontSize: 11 }}>
+        {Array.from({length: 30}, (_, i) => i + 1).map(d => {
+          const isSel = sel.includes(d);
+          return (
+            <div key={d} style={{
+              aspectRatio:'1/1', display:'flex', alignItems:'center', justifyContent:'center',
+              borderRadius:'var(--r-sm)',
+              background: isSel ? 'var(--ember-500)' : 'transparent',
+              color: isSel ? '#fff' : 'var(--ink-600)',
+              fontWeight: isSel ? 600 : 400,
+              cursor:'pointer',
+            }}>{d}</div>
+          );
+        })}
+      </div>
+    </div>
+  );
+  return (
+    <Panel title="Date range picker">
+      <div style={{
+        background:'var(--surface)', border:'1px solid var(--line-200)',
+        borderRadius:'var(--r-xl)', boxShadow:'var(--shadow-lg)',
+        maxWidth: 560, padding: 16,
+      }}>
+        <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom: 12 }}>
+          <div style={{ fontSize: 13, fontWeight: 600, color:'var(--ink-600)' }}>Date Range</div>
+          <Icons.Close size={14} style={{ color:'var(--ink-400)', cursor:'pointer' }}/>
+        </div>
+        <div style={{ display:'flex', justifyContent:'space-between', marginBottom: 8, padding:'0 8px' }}>
+          <Icons.ChevLeft size={14} style={{ color:'var(--ink-400)', cursor:'pointer' }}/>
+          <Icons.ChevRight size={14} style={{ color:'var(--ink-400)', cursor:'pointer' }}/>
+        </div>
+        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 24 }}>
+          {month('September 2025', [1, 8])}
+          {month('October 2025')}
+        </div>
+        <div style={{ display:'flex', justifyContent:'flex-end', gap: 8, marginTop: 16 }}>
+          <Button variant="secondary" size="sm">Cancel</Button>
+          <Button variant="primary" size="sm">Apply</Button>
+        </div>
+      </div>
+    </Panel>
+  );
+};
+
+const BannerShowcase = () => (
+  <Panel title="Banners & toasts">
+    <ComponentRow label="Top announcement bar">
+      <div style={{
+        width:'100%',
+        background:'var(--paper)',
+        border:'1px solid var(--line-200)',
+        borderRadius:'var(--r-md)',
+        padding:'10px 16px',
+        textAlign:'center',
+        fontSize: 13, color:'var(--ink-600)',
+      }}>
+        We just raised our Series A and shipped Zark v2 🎉 <a style={{ color:'var(--ember-700)', textDecoration:'underline' }}>Read the blog.</a>
+      </div>
+    </ComponentRow>
+    <ComponentRow label="In-page tip card">
+      <div style={{
+        display:'flex', gap: 12, padding: 14,
+        background:'var(--surface)',
+        border:'1px solid var(--line-200)',
+        borderRadius:'var(--r-lg)',
+        maxWidth: 320,
+        boxShadow:'var(--shadow-md)',
+      }}>
+        <Icons.Sparkles size={16} style={{ color:'var(--ember-500)', marginTop: 2 }}/>
+        <div style={{ flex: 1 }}>
+          <div style={{ fontSize: 12, fontFamily:'var(--font-mono)', letterSpacing:'var(--ls-wider)', color:'var(--ink-300)', textTransform:'uppercase', marginBottom: 4 }}>What's New</div>
+          <div style={{ fontSize: 13, fontWeight: 600, color:'var(--ink-700)', marginBottom: 4 }}>Introducing Zark v2</div>
+          <div style={{ fontSize: 12, color:'var(--ink-400)', lineHeight: 1.45 }}>10x faster scraping, news and image search, smart crawling and more.</div>
+        </div>
+        <Icons.Close size={12} style={{ color:'var(--ink-300)', cursor:'pointer' }}/>
+      </div>
+    </ComponentRow>
+    <ComponentRow label="Toast / pill">
+      <div style={{
+        display:'inline-flex', alignItems:'center', gap: 8,
+        padding:'8px 14px',
+        background:'var(--ink-700)',
+        color:'#fff',
+        borderRadius:'var(--r-pill)',
+        fontSize: 12, boxShadow:'var(--shadow-lg)',
+      }}>
+        Welcome to Zark! <Icons.Flame size={14} style={{ color:'var(--ember-400)' }}/>
+      </div>
+      <div style={{
+        display:'inline-flex', alignItems:'center', gap: 8,
+        padding:'8px 14px',
+        background:'var(--success-500)', color:'#fff',
+        borderRadius:'var(--r-pill)', fontSize: 12,
+      }}>
+        <Icons.Check size={14}/> Copied as Markdown
+      </div>
+    </ComponentRow>
+  </Panel>
+);
+
+const PatternsSection = () => (
+  <Section
+    id="patterns"
+    eyebrow="06 — Patterns"
+    title="Composed patterns, not isolated parts"
+    description="These templates encode opinion: the URL pill always sits inside an ascii field, code blocks always include eye+copy affordances, modals always announce a step counter, tables lead with a mono endpoint tag. Reach for these before improvising."
+  >
+    <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 24 }}>
+      <ModalShowcase/>
+      <CodeBlock/>
+    </div>
+    <DataTableShowcase/>
+    <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 24 }}>
+      <DatePickerShowcase/>
+      <BannerShowcase/>
+    </div>
+  </Section>
+);
+
+window.PatternsSection = PatternsSection;