initial commit

docs/design-system/ui_kits/home/SubdomainIndex.jsx

@@ -0,0 +1,79 @@
+// SubdomainIndex — the navigation as a refined index, not a button farm.
+// Tolerates a growing, uneven set; a "not yet live" item is quiet, not broken.
+// Hover: row indents a touch and a hairline tick draws in (felt, not seen).
+const SUBDOMAINS = [
+  { n: '01', name: 'Blog', desc: 'Writing', live: true },
+  { n: '02', name: 'Code', desc: 'Experiments & tools', live: true },
+  { n: '03', name: 'Art', desc: 'Generative & physical', live: true },
+  { n: '04', name: 'Signage', desc: 'Chalk on easel', live: true },
+  { n: '05', name: 'Keycaps', desc: 'Mechanical', live: true },
+  { n: '06', name: 'Social', desc: '', live: false },
+];
+
+function IndexRow({ item, onDark }) {
+  const [hover, setHover] = React.useState(false);
+  const live = item.live;
+  const c = onDark
+    ? { fg: 'var(--fg-on-dark-1)', dim: 'var(--fg-on-dark-3)', rule: 'var(--hairline-on-dark)' }
+    : { fg: 'var(--fg-1)', dim: 'var(--fg-3)', rule: 'var(--hairline)' };
+
+  const row = {
+    display: 'flex', alignItems: 'baseline', gap: '16px',
+    textDecoration: 'none', padding: '13px 0',
+    borderTop: `1px solid ${c.rule}`,
+    paddingLeft: hover && live ? '10px' : '0',
+    transition: 'padding-left var(--dur-base) var(--ease-out)',
+    cursor: live ? 'pointer' : 'default',
+  };
+  const num = {
+    fontFamily: 'var(--font-mono)', fontSize: '10px',
+    color: c.dim, width: '24px', flex: 'none', fontFeatureSettings: '"onum" 1',
+  };
+  const name = {
+    fontFamily: 'var(--font-display)', fontWeight: 500,
+    fontSize: 'clamp(19px, 2vw, 24px)', letterSpacing: '0.01em',
+    color: live ? c.fg : c.dim,
+  };
+  const tick = {
+    width: hover && live ? '22px' : '0px', height: '1px',
+    background: 'var(--accent-deep)', alignSelf: 'center',
+    transition: 'width var(--dur-base) var(--ease-out)',
+  };
+  const desc = {
+    fontFamily: 'var(--font-body)', fontSize: '12px', color: c.dim,
+    marginLeft: 'auto',
+  };
+  const soon = {
+    fontFamily: 'var(--font-mono)', fontSize: '9.5px', letterSpacing: '0.12em',
+    textTransform: 'uppercase', color: c.dim, marginLeft: 'auto',
+    border: `1px solid ${c.rule}`, borderRadius: '2px', padding: '2px 7px',
+  };
+
+  return (
+    <a
+      href="#"
+      style={row}
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+      onClick={(e) => e.preventDefault()}
+    >
+      <span style={num}>{item.n}</span>
+      <span style={name}>{item.name}</span>
+      <span style={tick} />
+      {live
+        ? <span style={desc}>{item.desc}</span>
+        : <span style={soon}>soon</span>}
+    </a>
+  );
+}
+
+function SubdomainIndex({ onDark = false }) {
+  return (
+    <nav>
+      {SUBDOMAINS.map((it) => (
+        <IndexRow key={it.n} item={it} onDark={onDark} />
+      ))}
+    </nav>
+  );
+}
+Object.assign(window, { SubdomainIndex });