zark-design 1.0.0

package/templates/foundations.jsx

@@ -0,0 +1,363 @@
+// Zark — Foundation sections (colors, type, spacing, radii, shadows, motion, icons)
+
+const Swatch = ({ name, value, tone='dark' }) => (
+  <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
+    <div style={{
+      height: 80, borderRadius:'var(--r-lg)',
+      background: value,
+      border: tone==='light' ? '1px solid var(--line-200)' : 'none',
+      boxShadow: 'var(--shadow-xs)',
+      position:'relative', overflow:'hidden',
+    }}>
+      <span style={{
+        position:'absolute', bottom:8, left:10,
+        fontFamily:'var(--font-mono)', fontSize: 10,
+        color: tone==='light' ? 'var(--ink-500)' : 'rgba(255,255,255,0.85)',
+      }}>{value}</span>
+    </div>
+    <div style={{ display:'flex', justifyContent:'space-between', fontSize:11 }}>
+      <span style={{ color:'var(--ink-600)', fontWeight: 500 }}>{name}</span>
+    </div>
+  </div>
+);
+
+const ColorRamp = ({ title, prefix, steps, tones }) => (
+  <Panel title={title} kicker={`${steps.length} stops`}>
+    <div style={{ display:'grid', gridTemplateColumns:`repeat(${steps.length}, 1fr)`, gap: 8 }}>
+      {steps.map((step, i) => (
+        <Swatch key={step}
+          name={step}
+          value={`var(--${prefix}-${step})`}
+          tone={tones[i] || 'dark'}
+        />
+      ))}
+    </div>
+  </Panel>
+);
+
+const ColorsSection = () => (
+  <Section
+    id="colors"
+    eyebrow="01 — Colors"
+    title="A warm, ember-driven palette"
+    description="Tones lean warm to evoke a paper-and-ink feel. The orange ember scale carries brand and primary action; neutrals are subtly toned and never pure-cool gray. Semantic colors are reserved exclusively for system feedback."
+  >
+    <ColorRamp
+      title="Ember — Brand & primary action"
+      prefix="ember"
+      steps={[50,100,200,300,400,500,600,700,800,900]}
+      tones={['light','light','light','dark','dark','dark','dark','dark','dark','dark']}
+    />
+    <ColorRamp
+      title="Ink — Text & UI neutrals"
+      prefix="ink"
+      steps={[50,100,200,300,400,500,600,700,800,900]}
+      tones={['light','light','light','light','dark','dark','dark','dark','dark','dark']}
+    />
+
+    <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 24 }}>
+      <Panel title="Surface & lines" kicker="paper, canvas, hairlines">
+        <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 8 }}>
+          <Swatch name="paper"   value="var(--paper)"   tone="light"/>
+          <Swatch name="canvas"  value="var(--canvas)"  tone="light"/>
+          <Swatch name="surface" value="var(--surface)" tone="light"/>
+          <Swatch name="line-100" value="var(--line-100)" tone="light"/>
+          <Swatch name="line-200" value="var(--line-200)" tone="light"/>
+          <Swatch name="line-300" value="var(--line-300)" tone="light"/>
+        </div>
+        <div style={{ marginTop: 16, fontSize: 12, color:'var(--ink-400)', lineHeight: 1.5 }}>
+          App background uses <strong style={{color:'var(--ink-600)'}}>paper</strong>. Sidebar shifts to <strong style={{color:'var(--ink-600)'}}>canvas</strong>. Cards always sit on pure <strong style={{color:'var(--ink-600)'}}>surface</strong>. Hairlines are all warm-toned.
+        </div>
+      </Panel>
+
+      <Panel title="Semantic" kicker="status only">
+        <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 8 }}>
+          <Swatch name="success" value="var(--success-500)"/>
+          <Swatch name="warning" value="var(--warning-500)"/>
+          <Swatch name="danger"  value="var(--danger-500)"/>
+          <Swatch name="info"    value="var(--info-500)"/>
+        </div>
+        <div style={{ marginTop:16, display:'flex', flexWrap:'wrap', gap:8 }}>
+          <Tag tone="success">Completed</Tag>
+          <Tag tone="warning">Pending</Tag>
+          <Tag tone="danger">Failed</Tag>
+          <Tag tone="info">Live</Tag>
+          <Tag tone="ember">New</Tag>
+          <Tag tone="default">Optional</Tag>
+        </div>
+      </Panel>
+    </div>
+
+    <Panel title="Usage rules" kicker="when to reach for what">
+      <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 24 }}>
+        <div>
+          <div style={{ fontSize:12, fontWeight:600, color:'var(--ember-700)', marginBottom: 8 }}>Ember</div>
+          <ul style={{ margin: 0, padding: '0 0 0 16px', fontSize: 12, color:'var(--ink-500)', lineHeight: 1.7 }}>
+            <li>Primary CTAs (Upgrade, Start)</li>
+            <li>Selected nav state (soft tint)</li>
+            <li>Live data accents on charts</li>
+            <li>Keyword highlights in copy</li>
+          </ul>
+        </div>
+        <div>
+          <div style={{ fontSize:12, fontWeight:600, color:'var(--ink-700)', marginBottom: 8 }}>Ink</div>
+          <ul style={{ margin: 0, padding: '0 0 0 16px', fontSize: 12, color:'var(--ink-500)', lineHeight: 1.7 }}>
+            <li>Body copy: ink-700</li>
+            <li>Secondary copy: ink-400</li>
+            <li>Disabled / placeholder: ink-300</li>
+            <li>Footer chrome: ink-800</li>
+          </ul>
+        </div>
+        <div>
+          <div style={{ fontSize:12, fontWeight:600, color:'var(--info-700)', marginBottom: 8 }}>Semantic</div>
+          <ul style={{ margin: 0, padding: '0 0 0 16px', fontSize: 12, color:'var(--ink-500)', lineHeight: 1.7 }}>
+            <li>Use only for status / feedback</li>
+            <li>Always pair with an icon</li>
+            <li>Avoid using as decoration</li>
+            <li>50-tints for subtle backgrounds</li>
+          </ul>
+        </div>
+      </div>
+    </Panel>
+  </Section>
+);
+
+// ---------- TYPOGRAPHY ----------
+const TypeRow = ({ size, name, sample, weight, ls, lh, mono }) => (
+  <div style={{
+    display:'grid', gridTemplateColumns:'140px 1fr 220px',
+    gap:24, padding:'20px 0',
+    borderTop:'1px solid var(--line-100)',
+    alignItems:'baseline',
+  }}>
+    <div>
+      <div style={{ fontSize:12, color:'var(--ink-600)', fontWeight: 500 }}>{name}</div>
+      <div style={{ fontSize:10, color:'var(--ink-300)', fontFamily:'var(--font-mono)', marginTop: 2 }}>{size}px / {weight}</div>
+    </div>
+    <div style={{
+      fontFamily: mono ? 'var(--font-mono)' : 'var(--font-display)',
+      fontSize: size, fontWeight: weight,
+      letterSpacing: ls, lineHeight: lh,
+      color:'var(--ink-700)',
+    }}>{sample}</div>
+    <div style={{ fontSize:11, color:'var(--ink-400)', fontFamily:'var(--font-mono)' }}>
+      ls: {ls} · lh: {lh}
+    </div>
+  </div>
+);
+
+const TypographySection = () => (
+  <Section
+    id="type"
+    eyebrow="02 — Typography"
+    title="Inter Tight for display, Inter for UI, JetBrains Mono for technical"
+    description="The display face is tight and confident — used at large sizes for hero moments and section titles. UI text uses Inter at standard tracking. Mono is reserved for code, keys, IDs, and the small uppercase eyebrows that mark categories."
+  >
+    <Panel title="Type scale" kicker="display & UI" padded={false}>
+      <div style={{ padding:'8px 24px 24px' }}>
+        <TypeRow size={88} name="Display"  sample="Turn data into signal" weight={600} ls="-0.025em" lh={1.05}/>
+        <TypeRow size={48} name="H1"       sample="Activity Logs"         weight={600} ls="-0.02em"  lh={1.1}/>
+        <TypeRow size={36} name="H2"       sample="Explore our endpoints" weight={600} ls="-0.018em" lh={1.15}/>
+        <TypeRow size={28} name="H3"       sample="Where did you hear about us?" weight={600} ls="-0.015em" lh={1.2}/>
+        <TypeRow size={22} name="H4"       sample="Concurrent Browsers"   weight={600} ls="-0.012em" lh={1.25}/>
+        <TypeRow size={18} name="Lead"     sample="API, docs and playground — all in one place" weight={500} ls="-0.005em" lh={1.4}/>
+        <TypeRow size={14} name="Body"     sample="Power your applications with our comprehensive scraping API." weight={400} ls="0" lh={1.55}/>
+        <TypeRow size={13} name="Body sm"  sample="Take a look at your requests activity"   weight={400} ls="0" lh={1.5}/>
+        <TypeRow size={12} name="Caption"  sample="Credit usage differs"                    weight={400} ls="0" lh={1.45}/>
+        <TypeRow size={11} name="Eyebrow"  sample="STEP 2 OF 4"                              weight={500} ls="0.14em" lh={1.4} mono/>
+        <TypeRow size={12} name="Mono"     sample="fc-9••••••••••••aebf"                    weight={400} ls="0" lh={1.5} mono/>
+      </div>
+    </Panel>
+
+    <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:24 }}>
+      <Panel title="Font families" kicker="3 faces, no exceptions">
+        <div style={{ display:'flex', flexDirection:'column', gap: 16 }}>
+          <div>
+            <div style={{ fontFamily:'var(--font-display)', fontSize: 32, fontWeight: 600, letterSpacing:'-0.018em', color:'var(--ink-700)', lineHeight: 1.1 }}>Inter Tight</div>
+            <div style={{ fontFamily:'var(--font-mono)', fontSize: 10, color:'var(--ink-400)', marginTop: 4 }}>display · 500 / 600 / 700</div>
+          </div>
+          <div>
+            <div style={{ fontFamily:'var(--font-sans)', fontSize: 24, fontWeight: 500, color:'var(--ink-700)' }}>Inter</div>
+            <div style={{ fontFamily:'var(--font-mono)', fontSize: 10, color:'var(--ink-400)', marginTop: 4 }}>UI · 400 / 500 / 600</div>
+          </div>
+          <div>
+            <div style={{ fontFamily:'var(--font-mono)', fontSize: 22, color:'var(--ink-700)' }}>JetBrains Mono</div>
+            <div style={{ fontFamily:'var(--font-mono)', fontSize: 10, color:'var(--ink-400)', marginTop: 4 }}>code, keys, eyebrows · 400 / 500</div>
+          </div>
+        </div>
+      </Panel>
+
+      <Panel title="Pairings in context" kicker="rhythm">
+        <div style={{ display:'flex', flexDirection:'column', gap:18 }}>
+          <div>
+            <div style={{ fontFamily:'var(--font-mono)', fontSize: 11, letterSpacing:'var(--ls-widest)', textTransform:'uppercase', color:'var(--ember-600)', marginBottom: 6 }}>02 — TYPOGRAPHY</div>
+            <div style={{ fontFamily:'var(--font-display)', fontSize: 28, fontWeight: 600, letterSpacing:'-0.015em', color:'var(--ink-700)', lineHeight: 1.15 }}>The mono carries the meta</div>
+            <div style={{ fontSize: 14, color:'var(--ink-400)', marginTop: 8, lineHeight: 1.55 }}>Inter handles supporting copy at body sizes — comfortable to read in long blocks, comfortable to compress in tables.</div>
+          </div>
+          <div style={{ height: 1, background:'var(--line-100)' }}/>
+          <div>
+            <div style={{ fontFamily:'var(--font-display)', fontSize: 36, fontWeight: 600, letterSpacing:'-0.02em', color:'var(--ink-700)', lineHeight: 1.05 }}>
+              Turn websites into <span style={{ color:'var(--ember-500)' }}>LLM-ready</span> data
+            </div>
+          </div>
+        </div>
+      </Panel>
+    </div>
+  </Section>
+);
+
+// ---------- SPACING / RADII / SHADOWS / MOTION ----------
+const SpacingSection = () => {
+  const steps = [
+    {n:1, v:2}, {n:2, v:4}, {n:3, v:6}, {n:4, v:8}, {n:5, v:10},
+    {n:6, v:12}, {n:7, v:14}, {n:8, v:16}, {n:10, v:20}, {n:12, v:24},
+    {n:14, v:28}, {n:16, v:32}, {n:20, v:40}, {n:24, v:48}, {n:32, v:64}, {n:40, v:80}, {n:48, v:96},
+  ];
+  const radii = [
+    {n:'xs',  v:'3px'}, {n:'sm', v:'4px'}, {n:'md', v:'6px'},
+    {n:'lg',  v:'8px'}, {n:'xl', v:'12px'}, {n:'2xl', v:'16px'}, {n:'3xl', v:'20px'}, {n:'pill', v:'999px'},
+  ];
+  const shadows = [
+    {n:'xs',  v:'var(--shadow-xs)'},
+    {n:'sm',  v:'var(--shadow-sm)'},
+    {n:'md',  v:'var(--shadow-md)'},
+    {n:'lg',  v:'var(--shadow-lg)'},
+    {n:'xl',  v:'var(--shadow-xl)'},
+    {n:'modal', v:'var(--shadow-modal)'},
+  ];
+  return (
+    <Section
+      id="space"
+      eyebrow="03 — Spacing, radii, shadows"
+      title="A 4-pixel base, never broken"
+      description="Density is high but never cramped. The spacing scale uses 4px as its atom; smaller increments exist (2px, 6px) for fine adjustment. Radii grow with surface size — chips are pill-shaped, inputs use 8px, cards 12px, modals 16px."
+    >
+      <Panel title="Spacing scale" kicker="4px atom">
+        <div style={{ display:'flex', flexDirection:'column', gap: 4 }}>
+          {steps.map(s => (
+            <div key={s.n} style={{ display:'grid', gridTemplateColumns:'80px 60px 1fr', gap:12, alignItems:'center', fontSize: 11, fontFamily:'var(--font-mono)', color:'var(--ink-500)', padding:'4px 0' }}>
+              <span style={{ color:'var(--ink-700)' }}>--sp-{s.n}</span>
+              <span style={{ color:'var(--ink-300)' }}>{s.v}px</span>
+              <span style={{ height: 14, width: s.v, background:'var(--ember-300)', borderRadius:2 }}/>
+            </div>
+          ))}
+        </div>
+      </Panel>
+
+      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 24 }}>
+        <Panel title="Radii" kicker="surface size → corner size">
+          <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 16 }}>
+            {radii.map(r => (
+              <div key={r.n} style={{ textAlign:'center' }}>
+                <div style={{
+                  width:'100%', aspectRatio:'1/1',
+                  background:'var(--ember-50)',
+                  border:'1px solid var(--ember-200)',
+                  borderRadius: r.v, marginBottom: 8,
+                }}/>
+                <div style={{ fontSize:11, color:'var(--ink-600)', fontWeight: 500 }}>r-{r.n}</div>
+                <div style={{ fontSize:10, color:'var(--ink-300)', fontFamily:'var(--font-mono)' }}>{r.v}</div>
+              </div>
+            ))}
+          </div>
+        </Panel>
+
+        <Panel title="Shadows" kicker="elevation steps">
+          <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 20 }}>
+            {shadows.map(s => (
+              <div key={s.n}>
+                <div style={{
+                  height: 70, background:'var(--surface)',
+                  borderRadius:'var(--r-lg)', boxShadow: s.v,
+                  marginBottom: 8,
+                }}/>
+                <div style={{ fontSize:11, color:'var(--ink-600)' }}>shadow-{s.n}</div>
+              </div>
+            ))}
+          </div>
+        </Panel>
+      </div>
+
+      <Panel title="Motion" kicker="curves & timings">
+        <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 24, fontSize: 12 }}>
+          <div>
+            <div style={{ color:'var(--ink-600)', fontWeight: 600, marginBottom: 8 }}>Easings</div>
+            <Spec mono label="ease-out" value="(0.22, 1, 0.36, 1)"/>
+            <Spec mono label="in-out"   value="(0.65, 0, 0.35, 1)"/>
+            <Spec mono label="spring"   value="(0.34, 1.56, 0.64, 1)"/>
+          </div>
+          <div>
+            <div style={{ color:'var(--ink-600)', fontWeight: 600, marginBottom: 8 }}>Durations</div>
+            <Spec mono label="t-fast"   value="120ms"/>
+            <Spec mono label="t-base"   value="180ms"/>
+            <Spec mono label="t-slow"   value="280ms"/>
+            <Spec mono label="t-slower" value="420ms"/>
+          </div>
+          <div style={{ gridColumn:'span 2' }}>
+            <div style={{ color:'var(--ink-600)', fontWeight: 600, marginBottom: 8 }}>Rules</div>
+            <ul style={{ margin: 0, padding:'0 0 0 16px', color:'var(--ink-500)', lineHeight: 1.7 }}>
+              <li>Hover/press: <strong style={{color:'var(--ink-700)'}}>t-fast / ease-out</strong></li>
+              <li>Toggle, tab, dropdown: <strong style={{color:'var(--ink-700)'}}>t-base / ease-out</strong></li>
+              <li>Modal entrance: <strong style={{color:'var(--ink-700)'}}>t-slow / spring</strong> for scale, <strong style={{color:'var(--ink-700)'}}>t-base</strong> for fade</li>
+              <li>Page transitions: avoid; let content swap instantly with subtle fade only</li>
+            </ul>
+          </div>
+        </div>
+      </Panel>
+    </Section>
+  );
+};
+
+// ---------- ICONS ----------
+const IconsSection = () => {
+  const list = [
+    'Search','Home','Play','Extract','Activity','Usage','Key','Settings',
+    'Bell','Help','Docs','Upgrade','ChevDown','ChevUp','ChevLeft','ChevRight',
+    'Plus','Close','Check','Eye','Copy','Download','Upload','External',
+    'Filter','Calendar','Cmd','Sparkles','Globe','Code','Spinner','Stop','Share','Warning','Drag','Flame'
+  ];
+  return (
+    <Section
+      id="icons"
+      eyebrow="04 — Iconography"
+      title="One stroke weight, one personality"
+      description="Outline icons drawn on an 18px grid with a 1.5px stroke and round caps. They sit at 16px in dense UI (nav, inputs) and 18–20px in section headers. Filled flames and shapes are the only exception, used for the brand mark."
+    >
+      <Panel title="The set" kicker={`${list.length} symbols`}>
+        <div style={{ display:'grid', gridTemplateColumns:'repeat(8, 1fr)', gap: 4 }}>
+          {list.map(name => {
+            const I = Icons[name];
+            return (
+              <div key={name} style={{
+                display:'flex', flexDirection:'column', alignItems:'center', gap: 6,
+                padding:'14px 6px', borderRadius:'var(--r-md)',
+                color:'var(--ink-600)',
+                transition:'background var(--t-fast)', cursor:'default',
+              }} onMouseEnter={e=>e.currentTarget.style.background='var(--paper)'}
+                 onMouseLeave={e=>e.currentTarget.style.background='transparent'}>
+                <I size={20}/>
+                <span style={{ fontSize:10, color:'var(--ink-400)', fontFamily:'var(--font-mono)' }}>{name}</span>
+              </div>
+            );
+          })}
+        </div>
+      </Panel>
+
+      <Panel title="Sizes & contexts">
+        <div style={{ display:'flex', alignItems:'center', gap: 32, color:'var(--ink-600)' }}>
+          <div style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:6 }}><Icons.Search size={12}/><span style={{ fontSize:10, fontFamily:'var(--font-mono)', color:'var(--ink-400)' }}>12 · inline</span></div>
+          <div style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:6 }}><Icons.Search size={14}/><span style={{ fontSize:10, fontFamily:'var(--font-mono)', color:'var(--ink-400)' }}>14 · button</span></div>
+          <div style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:6 }}><Icons.Search size={16}/><span style={{ fontSize:10, fontFamily:'var(--font-mono)', color:'var(--ink-400)' }}>16 · nav / input</span></div>
+          <div style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:6 }}><Icons.Search size={20}/><span style={{ fontSize:10, fontFamily:'var(--font-mono)', color:'var(--ink-400)' }}>20 · section</span></div>
+          <div style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:6 }}><Icons.Search size={24}/><span style={{ fontSize:10, fontFamily:'var(--font-mono)', color:'var(--ink-400)' }}>24 · feature</span></div>
+          <div style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:6 }}><Icons.Search size={32}/><span style={{ fontSize:10, fontFamily:'var(--font-mono)', color:'var(--ink-400)' }}>32 · empty state</span></div>
+        </div>
+      </Panel>
+    </Section>
+  );
+};
+
+window.ColorsSection = ColorsSection;
+window.TypographySection = TypographySection;
+window.SpacingSection = SpacingSection;
+window.IconsSection = IconsSection;

package/templates/icons.jsx

@@ -0,0 +1,65 @@
+// Zark Icon Set — outline, 1.5px stroke, 18px viewBox, currentColor
+// Modeled after the simple line iconography of the source.
+
+const Ico = ({ d, size = 16, stroke = 1.5, fill = 'none', children, vb = 18, ...rest }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox={`0 0 ${vb} ${vb}`}
+    fill={fill}
+    stroke="currentColor"
+    strokeWidth={stroke}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden="true"
+    {...rest}
+  >
+    {d ? <path d={d} /> : children}
+  </svg>
+);
+
+const Icons = {
+  Search:    (p) => <Ico {...p}><circle cx="8" cy="8" r="5"/><path d="M15 15l-3-3"/></Ico>,
+  Home:      (p) => <Ico {...p}><path d="M3 9l6-5 6 5v6a1 1 0 0 1-1 1h-3v-4H7v4H4a1 1 0 0 1-1-1V9z"/></Ico>,
+  Play:      (p) => <Ico {...p}><circle cx="9" cy="9" r="6.5"/><path d="M7.5 6.5l4 2.5-4 2.5z" fill="currentColor"/></Ico>,
+  Extract:   (p) => <Ico {...p}><path d="M3 4h12M3 9h8M3 14h12"/><path d="M14 6l2 2-2 2"/></Ico>,
+  Activity:  (p) => <Ico {...p}><path d="M2 9h3l2-5 4 10 2-5h3"/></Ico>,
+  Usage:     (p) => <Ico {...p}><path d="M3 14h12"/><rect x="4" y="9" width="2" height="5"/><rect x="8" y="6" width="2" height="8"/><rect x="12" y="3" width="2" height="11"/></Ico>,
+  Key:       (p) => <Ico {...p}><circle cx="6" cy="9" r="3"/><path d="M9 9h7l-2 2 2 2"/></Ico>,
+  Settings:  (p) => <Ico {...p}><circle cx="9" cy="9" r="2.5"/><path d="M9 1.5v2M9 14.5v2M16.5 9h-2M3.5 9h-2M14.3 3.7l-1.4 1.4M5.1 12.9l-1.4 1.4M14.3 14.3l-1.4-1.4M5.1 5.1L3.7 3.7"/></Ico>,
+  Bell:      (p) => <Ico {...p}><path d="M4 12V8a5 5 0 0 1 10 0v4l1 1H3l1-1z"/><path d="M7.5 15a1.5 1.5 0 0 0 3 0"/></Ico>,
+  Help:      (p) => <Ico {...p}><circle cx="9" cy="9" r="6.5"/><path d="M7 7a2 2 0 0 1 4 0c0 1-2 1.5-2 3"/><circle cx="9" cy="13" r="0.7" fill="currentColor"/></Ico>,
+  Docs:      (p) => <Ico {...p}><path d="M4 2h7l3 3v11H4z"/><path d="M11 2v3h3M6 8h6M6 11h6M6 14h4"/></Ico>,
+  Upgrade:   (p) => <Ico {...p}><path d="M9 3l5 5h-3v6H7V8H4l5-5z"/></Ico>,
+  ChevDown:  (p) => <Ico {...p}><path d="M4 7l5 4 5-4"/></Ico>,
+  ChevUp:    (p) => <Ico {...p}><path d="M4 11l5-4 5 4"/></Ico>,
+  ChevLeft:  (p) => <Ico {...p}><path d="M11 4L7 9l4 5"/></Ico>,
+  ChevRight: (p) => <Ico {...p}><path d="M7 4l4 5-4 5"/></Ico>,
+  Plus:      (p) => <Ico {...p}><path d="M9 3v12M3 9h12"/></Ico>,
+  Close:     (p) => <Ico {...p}><path d="M4 4l10 10M14 4L4 14"/></Ico>,
+  Check:     (p) => <Ico {...p}><path d="M3 9l4 4 8-9"/></Ico>,
+  Eye:       (p) => <Ico {...p}><path d="M1.5 9S4 4 9 4s7.5 5 7.5 5-2.5 5-7.5 5-7.5-5-7.5-5z"/><circle cx="9" cy="9" r="2.2"/></Ico>,
+  Copy:      (p) => <Ico {...p}><rect x="5" y="5" width="9" height="10" rx="1.5"/><path d="M11 5V4a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h1"/></Ico>,
+  Download:  (p) => <Ico {...p}><path d="M9 3v9M5 9l4 4 4-4M3 15h12"/></Ico>,
+  Upload:    (p) => <Ico {...p}><path d="M9 13V4M5 7l4-4 4 4M3 15h12"/></Ico>,
+  External:  (p) => <Ico {...p}><path d="M7 3H4v11h11v-3"/><path d="M10 3h5v5M15 3l-7 7"/></Ico>,
+  Filter:    (p) => <Ico {...p}><path d="M3 4h12l-4.5 6V15l-3-2v-3z"/></Ico>,
+  Calendar:  (p) => <Ico {...p}><rect x="3" y="4" width="12" height="11" rx="1.5"/><path d="M3 7h12M6 2v3M12 2v3"/></Ico>,
+  Cmd:       (p) => <Ico {...p}><path d="M5 5h8v8H5z"/><path d="M5 5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zM13 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM5 13a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM13 13a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3z"/></Ico>,
+  Sparkles:  (p) => <Ico {...p}><path d="M9 2l1.5 4.5L15 8l-4.5 1.5L9 14l-1.5-4.5L3 8l4.5-1.5L9 2z"/></Ico>,
+  Globe:     (p) => <Ico {...p}><circle cx="9" cy="9" r="6.5"/><path d="M3 9h12M9 2.5c2 2 3 4 3 6.5s-1 4.5-3 6.5c-2-2-3-4-3-6.5s1-4.5 3-6.5z"/></Ico>,
+  Code:      (p) => <Ico {...p}><path d="M6 5l-4 4 4 4M12 5l4 4-4 4M11 3l-4 12"/></Ico>,
+  Spinner:   (p) => <Ico {...p}><path d="M9 2.5a6.5 6.5 0 1 1-6.5 6.5"/></Ico>,
+  Stop:      (p) => <Ico {...p}><rect x="4" y="4" width="10" height="10" rx="1.5"/></Ico>,
+  Share:     (p) => <Ico {...p}><path d="M9 2v9M5 6l4-4 4 4M3 11v3a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-3"/></Ico>,
+  Warning:   (p) => <Ico {...p}><path d="M9 2l7 13H2L9 2z"/><path d="M9 7v3"/><circle cx="9" cy="13" r="0.6" fill="currentColor"/></Ico>,
+  Drag:      (p) => <Ico {...p} stroke={0}><circle cx="6" cy="5" r="1" fill="currentColor"/><circle cx="6" cy="9" r="1" fill="currentColor"/><circle cx="6" cy="13" r="1" fill="currentColor"/><circle cx="12" cy="5" r="1" fill="currentColor"/><circle cx="12" cy="9" r="1" fill="currentColor"/><circle cx="12" cy="13" r="1" fill="currentColor"/></Ico>,
+  Flame: (p) => (
+    <Ico {...p} fill="currentColor" stroke="none">
+      <path d="M9 1.5c0 2.5-2 3.5-3.5 5.5C4 9 4 11.5 5.5 13.5 6.5 14.8 8 15.5 9 15.5s2.5-.7 3.5-2c1.5-2 1.5-4.5 0-6.5C11 5 9 4 9 1.5z M9 9c.5 1 1.5 1.2 1.5 2.5S9.8 13.5 9 13.5s-1.5-.7-1.5-2S8.5 10 9 9z" fillRule="evenodd"/>
+    </Ico>
+  ),
+};
+
+window.Icons = Icons;
+window.Ico = Ico;