@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/components/symbols/terminal-marks.tsx

@@ -0,0 +1,226 @@
+/**
+ * Terminal brand marks — the `digi` prompt lockup and the hairline wordmark.
+ *
+ * The house identity reads as a terminal line caught mid-prompt: the module
+ * name followed by a filled block cursor. The cursor is not a new shape — it is
+ * the `.term-cursor` geometry from @digithings-ai/design (site.css), 0.6em wide by
+ * 1.05em tall sitting at vertical-align -0.16em. 0.6em is exactly one Geist Mono
+ * advance, so the cursor occupies one character cell and the lockup sits on the
+ * mono grid without fudging.
+ *
+ * Three exports, each matching the weight of the surface it imitates:
+ *
+ * - TerminalMark: outlined `digi` + cursor, filled in currentColor. Geist Mono
+ *   400 — the weight terminal text actually renders at, since .term-body /
+ *   .cmdline / .app-input-field set no font-weight and inherit
+ *   body{font-weight:400}. Outlined rather than text because this same artwork
+ *   is the favicon source and must not depend on a loaded font. `variant`
+ *   selects the full `digi` lockup or the compact `d` reduction; use compact
+ *   below ~64px, where the full lockup's five character cells close up.
+ * - TerminalWordmark: the default wordmark. Deliberately TEXT, not outlined —
+ *   it is plain mono at tracking 0 with no overlapping contours to preserve, so
+ *   outlining would ship ~9KB of path data for a glyph-identical result
+ *   wherever Geist Mono is loaded. Carries token-backed utilities, so consumers
+ *   need an `@source "<path-to>/packages/ui/src/components/symbols"` line.
+ *   Deliberately ONE TONE — `text-ink`, never `--accent` — regardless of any
+ *   surrounding `.accent-<module>` livery scope: it reads as a real shell
+ *   prompt, and real terminal output does not recolor by module (`.term-body`
+ *   is one ink color throughout). See terminal-marks.render.test.tsx's "does
+ *   not dress the suffix in the accent" case.
+ * - HairlineWordmark: the display cut, replicating the footer colophon's
+ *   `.colo-word` — stroke 0.538% of the em (a 1px line on a ~186px glyph),
+ *   ink at 30%, tracking -0.05em, Geist Mono 500. FULL-BLEED ONLY. The stroke
+ *   scales with the art, so the floor is on the em, not on the rendered width:
+ *   below an em of ~173px it goes sub-pixel and greys out. For `digithings`
+ *   (10 cells at 0.6em) that means a rendered width of ~1036px before the
+ *   stroke reaches one device pixel; ~933px for `digiquant`. This is the
+ *   colophon's own scale — `.colo-word` is `clamp(3rem, 15.5vw, 15rem)`, i.e.
+ *   ~186px em and a ~1116px word at a 1200px viewport. Anywhere narrower, use
+ *   TerminalWordmark instead; do not shrink this one to fit.
+ *
+ * The hairline paths are outlined from the VARIABLE font, contours left
+ * overlapping and un-booleaned. That is load-bearing, not an oversight: stroked,
+ * those overlaps are what give the `t` its crossing grid and the `d` and `i`
+ * their stem spurs. Never run a boolean union / "remove overlap" / SVG
+ * "simplify paths" pass over this data, and never regenerate it from a static
+ * cut — the static `t` has one merged contour where the variable font has two,
+ * and the crossings vanish silently.
+ *
+ * No CSS ships with this family; TerminalMark and HairlineWordmark are pure
+ * SVG in currentColor, so whatever sets `color` in the ancestor chain dresses
+ * them — note an `.accent-<module>` scope alone does NOT: it only exposes
+ * `--accent` as a custom property, it does not set `color` itself, so a
+ * consumer wanting the livery effect must set `color: var(--accent)`
+ * explicitly somewhere between the scope and the mark (see symbols.css's
+ * `.sym-hairline--accent` for this reference site's opt-in pattern).
+ * TerminalWordmark is the deliberate exception — it never reads --accent at
+ * all, see its own bullet above.
+ */
+import type { ReactNode } from "react";
+
+/** Cursor geometry, in em.
+ *
+ * `w: 0.6` is one Geist Mono advance — exactly one character cell — and is taken
+ * straight from `.term-cursor` (@digithings-ai/design site.css).
+ *
+ * `h` deliberately DIVERGES from `.term-cursor`, which is 1.05em. That is the
+ * full line height, correct for a caret sitting in running terminal text, but
+ * wrong for a two-element logo: beside a lowercase `d` (0.71em) a 1.05em block
+ * is 1.48x taller than the letter, so at favicon sizes the pair stops reading as
+ * "letter + cursor" and becomes "a letter and a grey box". Matching the cursor to
+ * the ascender puts them at 1:1 and the mark reads at 16px.
+ *
+ * `.term-cursor` itself is unchanged — actual terminal UI still wants 1.05em. */
+const CURSOR = { w: 0.6, h: 0.71, v: 0 } as const;
+
+const MARK_FULL = [
+  "M14.654 58.084Q12.647333333333332 58.084 11.185333333333332 57.10933333333334Q9.723333333333333 56.13466666666667 8.934999999999999 54.35733333333333Q8.146666666666667 52.58 8.146666666666667 50.14333333333334Q8.146666666666667 47.70666666666667 8.934999999999999 45.92933333333333Q9.723333333333333 44.152 11.185333333333332 43.17733333333334Q12.647333333333332 42.20266666666667 14.654 42.20266666666667Q15.886666666666667 42.20266666666667 16.875666666666667 42.66133333333334Q17.864666666666665 43.120000000000005 18.538333333333334 43.80800000000001Q19.212 44.496 19.47 45.21266666666667L19.212 45.81466666666667V37.38666666666667H21.619999999999997V57.74H19.441333333333333L19.298000000000002 54.300000000000004L19.67066666666667 54.730000000000004Q19.326666666666668 55.762 18.595666666666666 56.52166666666667Q17.864666666666665 57.281333333333336 16.861333333333334 57.68266666666667Q15.858 58.084 14.654 58.084ZM14.797333333333334 55.79066666666667Q16.173333333333332 55.79066666666667 17.162333333333333 55.102666666666664Q18.151333333333334 54.41466666666667 18.681666666666665 53.139Q19.212 51.86333333333334 19.212 50.14333333333334Q19.212 48.366 18.681666666666665 47.10466666666667Q18.151333333333334 45.843333333333334 17.148 45.16966666666667Q16.144666666666666 44.496 14.74 44.496Q12.876666666666667 44.496 11.773 46.001000000000005Q10.669333333333334 47.506 10.669333333333334 50.14333333333334Q10.669333333333334 52.752 11.773 54.27133333333333Q12.876666666666667 55.79066666666667 14.797333333333334 55.79066666666667Z",
+  "M26.493333333333332 57.74V55.61866666666667H32.599333333333334V43.492666666666665L33.77466666666667 44.668000000000006H26.78V42.54666666666667H35.007333333333335V55.61866666666667H40.25333333333333V57.74H35.007333333333335H32.599333333333334ZM32.37 40.16733333333333V37.358000000000004H34.89266666666666V40.16733333333333Z",
+  "M49.914 62.384Q48.28 62.384 46.96133333333333 61.839333333333336Q45.64266666666666 61.29466666666667 44.754 60.29133333333334Q43.86533333333333 59.288000000000004 43.55 57.96933333333334L46.07266666666666 57.797333333333334Q46.416666666666664 58.858000000000004 47.291 59.474333333333334Q48.16533333333333 60.09066666666667 49.914 60.09066666666667Q51.977999999999994 60.09066666666667 53.08166666666666 59.25933333333334Q54.18533333333333 58.428000000000004 54.18533333333333 56.76533333333334V54.300000000000004Q53.64066666666666 55.504000000000005 52.43666666666667 56.22066666666667Q51.23266666666667 56.937333333333335 49.742 56.937333333333335Q47.82133333333333 56.937333333333335 46.31633333333333 55.99133333333333Q44.81133333333333 55.04533333333333 43.965666666666664 53.382666666666665Q43.12 51.72 43.12 49.57Q43.12 47.391333333333336 43.95133333333333 45.743Q44.782666666666664 44.09466666666667 46.259 43.14866666666667Q47.73533333333333 42.20266666666667 49.62733333333333 42.20266666666667Q51.23266666666667 42.20266666666667 52.50833333333333 42.94800000000001Q53.784 43.693333333333335 54.3 44.95466666666667V42.54666666666667H56.593333333333334V56.708Q56.593333333333334 58.48533333333334 55.79066666666667 59.761Q54.988 61.03666666666667 53.49733333333333 61.71033333333334Q52.00666666666667 62.384 49.914 62.384ZM49.85666666666667 54.644000000000005Q51.806 54.644000000000005 52.98133333333333 53.28233333333334Q54.156666666666666 51.92066666666667 54.18533333333333 49.57Q54.214 47.99333333333334 53.68366666666667 46.861000000000004Q53.153333333333336 45.72866666666667 52.16433333333333 45.11233333333334Q51.175333333333334 44.496 49.85666666666667 44.496Q47.85 44.496 46.74633333333333 45.857666666666674Q45.64266666666666 47.21933333333334 45.64266666666666 49.57Q45.64266666666666 51.92066666666667 46.775 53.28233333333334Q47.907333333333334 54.644000000000005 49.85666666666667 54.644000000000005Z",
+  "M60.89333333333333 57.74V55.61866666666667H66.99933333333333V43.492666666666665L68.17466666666667 44.668000000000006H61.17999999999999V42.54666666666667H69.40733333333333V55.61866666666667H74.65333333333334V57.74H69.40733333333333H66.99933333333333ZM66.77 40.16733333333333V37.358000000000004H69.29266666666666V40.16733333333333Z",
+] as const;
+
+const MARK_COMPACT = [
+  "M26.135 70.21Q21.118333333333332 70.21 17.46333333333333 67.77333333333333Q13.808333333333334 65.33666666666666 11.8375 60.89333333333333Q9.866666666666667 56.449999999999996 9.866666666666667 50.35833333333333Q9.866666666666667 44.26666666666666 11.8375 39.82333333333332Q13.808333333333334 35.379999999999995 17.46333333333333 32.94333333333333Q21.118333333333332 30.50666666666666 26.135 30.50666666666666Q29.21666666666667 30.50666666666666 31.68916666666667 31.653333333333325Q34.16166666666667 32.79999999999999 35.84583333333333 34.519999999999996Q37.53 36.239999999999995 38.175 38.03166666666666L37.53 39.53666666666666V18.46666666666666H43.550000000000004V69.35H38.10333333333334L37.745000000000005 60.74999999999999L38.67666666666667 61.824999999999996Q37.81666666666666 64.405 35.98916666666666 66.30416666666667Q34.16166666666667 68.20333333333333 31.653333333333336 69.20666666666666Q29.145 70.21 26.135 70.21ZM26.493333333333336 64.47666666666666Q29.933333333333334 64.47666666666666 32.405833333333334 62.75666666666666Q34.87833333333333 61.03666666666666 36.204166666666666 57.8475Q37.53 54.658333333333324 37.53 50.35833333333333Q37.53 45.91499999999999 36.204166666666666 42.761666666666656Q34.87833333333333 39.60833333333333 32.37 37.924166666666665Q29.861666666666668 36.239999999999995 26.35 36.239999999999995Q21.69166666666667 36.239999999999995 18.9325 40.0025Q16.173333333333332 43.76499999999999 16.173333333333332 50.35833333333333Q16.173333333333332 56.879999999999995 18.9325 60.67833333333333Q21.69166666666667 64.47666666666666 26.493333333333336 64.47666666666666Z",
+] as const;
+
+/** Cursor rects, pre-solved so the ink fits a circular crop (avatars). */
+const MARK_CURSOR = {
+  full: { x: 75.80, y: 37.39, width: 17.20, height: 20.35 },
+  compact: { x: 50.00, y: 18.47, width: 43.00, height: 50.88 },
+} as const;
+
+export interface TerminalMarkProps {
+  /** Rendered square size in px. Default 22. */
+  size?: number;
+  className?: string;
+  /** Accessible name (renders a `<title>` + role="img"); omitted → decorative. */
+  title?: string;
+  /** `full` = `digi` + cursor; `compact` = `d` + cursor. Use compact below ~64px. */
+  variant?: "full" | "compact";
+}
+
+export function TerminalMark({
+  size = 22,
+  className,
+  title,
+  variant = "full",
+}: TerminalMarkProps) {
+  const paths = variant === "compact" ? MARK_COMPACT : MARK_FULL;
+  const cursor = MARK_CURSOR[variant];
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 100 100"
+      fill="currentColor"
+      role={title ? "img" : undefined}
+      aria-hidden={title ? undefined : "true"}
+      focusable="false"
+      className={["terminal-mark", className].filter(Boolean).join(" ")}
+    >
+      {title ? <title>{title}</title> : null}
+      {paths.map((d) => (
+        <path key={d.slice(0, 24)} d={d} />
+      ))}
+      <rect {...cursor} />
+    </svg>
+  );
+}
+
+export interface TerminalWordmarkProps {
+  /** The module suffix after `digi` — e.g. "things", "quant". */
+  suffix: ReactNode;
+  /** Defaults to `digi`. */
+  prefix?: ReactNode;
+  className?: string;
+}
+
+export function TerminalWordmark({
+  suffix,
+  prefix = "digi",
+  className,
+}: TerminalWordmarkProps) {
+  return (
+    <span
+      className={[
+        "terminal-wordmark",
+        "font-mono text-[1.25rem] font-normal tracking-normal text-ink",
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+    >
+      {prefix}
+      {suffix}
+    </span>
+  );
+}
+
+const HAIRLINE = {
+  things: {
+    viewBox: "-29.38 -779.38 5569.75 1006.75",
+    paths: [
+      "M258.0 12.0Q190.0 12.0 140.0 -21.5Q90.0 -55.0 63.0 -117.5Q36.0 -180.0 36.0 -266.0Q36.0 -352.0 63.0 -414.5Q90.0 -477.0 140.0 -510.5Q190.0 -544.0 258.0 -544.0Q302.0 -544.0 337.0 -528.0Q372.0 -512.0 395.0 -487.0Q418.0 -462.0 427.0 -433.0L417.0 -412.0V-710.0H518.0V0.0H424.0L419.0 -127.0L432.0 -110.0Q421.0 -74.0 396.5 -46.0Q372.0 -18.0 337.0 -3.0Q302.0 12.0 258.0 12.0ZM275.0 -81.0Q319.0 -81.0 350.5 -103.5Q382.0 -126.0 399.5 -167.5Q417.0 -209.0 417.0 -266.0Q417.0 -325.0 399.5 -366.0Q382.0 -407.0 350.0 -429.0Q318.0 -451.0 273.0 -451.0Q212.0 -451.0 177.0 -402.0Q142.0 -353.0 142.0 -266.0Q142.0 -180.0 177.0 -130.5Q212.0 -81.0 275.0 -81.0Z",
+      "M626.0 0.0V-85.0H834.0V-493.0L881.0 -447.0H636.0V-532.0H936.0V-85.0H1114.0V0.0H936.0H834.0ZM828.0 -609.0V-714.0H932.0V-609.0Z",
+      "M1397.0 162.0Q1337.0 162.0 1290.0 143.0Q1243.0 124.0 1212.5 89.0Q1182.0 54.0 1170.0 8.0L1276.0 1.0Q1287.0 34.0 1315.0 53.0Q1343.0 72.0 1397.0 72.0Q1464.0 72.0 1499.5 44.0Q1535.0 16.0 1535.0 -39.0V-117.0Q1516.0 -76.0 1475.5 -52.0Q1435.0 -28.0 1382.0 -28.0Q1316.0 -28.0 1264.0 -61.0Q1212.0 -94.0 1183.0 -151.5Q1154.0 -209.0 1154.0 -284.0Q1154.0 -362.0 1182.5 -420.0Q1211.0 -478.0 1262.0 -511.0Q1313.0 -544.0 1378.0 -544.0Q1434.0 -544.0 1476.5 -518.5Q1519.0 -493.0 1538.0 -449.0L1539.0 -532.0H1636.0V-46.0Q1636.0 21.0 1607.0 67.5Q1578.0 114.0 1524.5 138.0Q1471.0 162.0 1397.0 162.0ZM1396.0 -118.0Q1458.0 -118.0 1496.0 -162.0Q1534.0 -206.0 1535.0 -285.0Q1536.0 -339.0 1518.5 -376.5Q1501.0 -414.0 1469.5 -434.0Q1438.0 -454.0 1396.0 -454.0Q1331.0 -454.0 1295.5 -409.5Q1260.0 -365.0 1260.0 -285.0Q1260.0 -206.0 1296.5 -162.0Q1333.0 -118.0 1396.0 -118.0Z",
+      "M1726.0 0.0V-85.0H1934.0V-493.0L1981.0 -447.0H1736.0V-532.0H2036.0V-85.0H2214.0V0.0H2036.0H1934.0ZM1928.0 -609.0V-714.0H2032.0V-609.0Z",
+      "M2576.0 0.0Q2495.0 0.0 2455.5 -37.5Q2416.0 -75.0 2416.0 -153.0V-657.0H2517.0V-158.0Q2517.0 -121.0 2534.5 -103.0Q2552.0 -85.0 2587.0 -85.0H2724.0V0.0ZM2248.0 -447.0V-532.0H2724.0V-447.0Z",
+      "M2843.0 0.0V-710.0H2944.0V-416.0L2934.0 -420.0Q2944.0 -463.0 2968.0 -490.5Q2992.0 -518.0 3026.0 -531.0Q3060.0 -544.0 3101.0 -544.0Q3157.0 -544.0 3195.5 -518.5Q3234.0 -493.0 3253.5 -447.5Q3273.0 -402.0 3273.0 -343.0V0.0H3172.0V-317.0Q3172.0 -389.0 3146.5 -422.5Q3121.0 -456.0 3071.0 -456.0Q3014.0 -456.0 2979.0 -420.0Q2944.0 -384.0 2944.0 -314.0V0.0Z",
+      "M3376.0 0.0V-85.0H3584.0V-493.0L3631.0 -447.0H3386.0V-532.0H3686.0V-85.0H3864.0V0.0H3686.0H3584.0ZM3578.0 -609.0V-714.0H3682.0V-609.0Z",
+      "M3930.0 0.0V-532.0H4023.0L4026.0 -393.0L4015.0 -401.0Q4025.0 -450.0 4050.5 -481.5Q4076.0 -513.0 4113.0 -528.5Q4150.0 -544.0 4192.0 -544.0Q4252.0 -544.0 4291.0 -517.5Q4330.0 -491.0 4350.0 -445.5Q4370.0 -400.0 4370.0 -343.0V0.0H4269.0V-317.0Q4269.0 -386.0 4242.5 -421.0Q4216.0 -456.0 4163.0 -456.0Q4126.0 -456.0 4096.5 -440.0Q4067.0 -424.0 4049.0 -392.5Q4031.0 -361.0 4031.0 -315.0V0.0Z",
+      "M4697.0 162.0Q4637.0 162.0 4590.0 143.0Q4543.0 124.0 4512.5 89.0Q4482.0 54.0 4470.0 8.0L4576.0 1.0Q4587.0 34.0 4615.0 53.0Q4643.0 72.0 4697.0 72.0Q4764.0 72.0 4799.5 44.0Q4835.0 16.0 4835.0 -39.0V-117.0Q4816.0 -76.0 4775.5 -52.0Q4735.0 -28.0 4682.0 -28.0Q4616.0 -28.0 4564.0 -61.0Q4512.0 -94.0 4483.0 -151.5Q4454.0 -209.0 4454.0 -284.0Q4454.0 -362.0 4482.5 -420.0Q4511.0 -478.0 4562.0 -511.0Q4613.0 -544.0 4678.0 -544.0Q4734.0 -544.0 4776.5 -518.5Q4819.0 -493.0 4838.0 -449.0L4839.0 -532.0H4936.0V-46.0Q4936.0 21.0 4907.0 67.5Q4878.0 114.0 4824.5 138.0Q4771.0 162.0 4697.0 162.0ZM4696.0 -118.0Q4758.0 -118.0 4796.0 -162.0Q4834.0 -206.0 4835.0 -285.0Q4836.0 -339.0 4818.5 -376.5Q4801.0 -414.0 4769.5 -434.0Q4738.0 -454.0 4696.0 -454.0Q4631.0 -454.0 4595.5 -409.5Q4560.0 -365.0 4560.0 -285.0Q4560.0 -206.0 4596.5 -162.0Q4633.0 -118.0 4696.0 -118.0Z",
+      "M5258.0 12.0Q5187.0 12.0 5136.0 -12.0Q5085.0 -36.0 5057.0 -76.5Q5029.0 -117.0 5025.0 -167.0L5128.0 -173.0Q5136.0 -130.0 5168.0 -104.5Q5200.0 -79.0 5259.0 -79.0Q5314.0 -79.0 5343.0 -94.0Q5372.0 -109.0 5372.0 -141.0Q5372.0 -161.0 5362.0 -174.5Q5352.0 -188.0 5324.5 -197.5Q5297.0 -207.0 5244.0 -217.0Q5165.0 -232.0 5120.5 -252.5Q5076.0 -273.0 5057.0 -304.5Q5038.0 -336.0 5038.0 -381.0Q5038.0 -427.0 5061.5 -464.0Q5085.0 -501.0 5131.0 -522.5Q5177.0 -544.0 5245.0 -544.0Q5316.0 -544.0 5362.0 -519.5Q5408.0 -495.0 5434.0 -456.0Q5460.0 -417.0 5467.0 -371.0L5364.0 -365.0Q5358.0 -391.0 5343.0 -410.5Q5328.0 -430.0 5303.0 -441.5Q5278.0 -453.0 5245.0 -453.0Q5192.0 -453.0 5167.0 -432.0Q5142.0 -411.0 5142.0 -381.0Q5142.0 -357.0 5154.0 -342.5Q5166.0 -328.0 5194.0 -318.5Q5222.0 -309.0 5270.0 -300.0Q5351.0 -287.0 5395.0 -266.5Q5439.0 -246.0 5457.0 -216.0Q5475.0 -186.0 5475.0 -142.0Q5475.0 -94.0 5447.5 -59.5Q5420.0 -25.0 5371.5 -6.5Q5323.0 12.0 5258.0 12.0Z",
+    ],
+  },
+  quant: {
+    viewBox: "-29.38 -779.38 5018.75 1006.75",
+    paths: [
+      "M258.0 12.0Q190.0 12.0 140.0 -21.5Q90.0 -55.0 63.0 -117.5Q36.0 -180.0 36.0 -266.0Q36.0 -352.0 63.0 -414.5Q90.0 -477.0 140.0 -510.5Q190.0 -544.0 258.0 -544.0Q302.0 -544.0 337.0 -528.0Q372.0 -512.0 395.0 -487.0Q418.0 -462.0 427.0 -433.0L417.0 -412.0V-710.0H518.0V0.0H424.0L419.0 -127.0L432.0 -110.0Q421.0 -74.0 396.5 -46.0Q372.0 -18.0 337.0 -3.0Q302.0 12.0 258.0 12.0ZM275.0 -81.0Q319.0 -81.0 350.5 -103.5Q382.0 -126.0 399.5 -167.5Q417.0 -209.0 417.0 -266.0Q417.0 -325.0 399.5 -366.0Q382.0 -407.0 350.0 -429.0Q318.0 -451.0 273.0 -451.0Q212.0 -451.0 177.0 -402.0Q142.0 -353.0 142.0 -266.0Q142.0 -180.0 177.0 -130.5Q212.0 -81.0 275.0 -81.0Z",
+      "M626.0 0.0V-85.0H834.0V-493.0L881.0 -447.0H636.0V-532.0H936.0V-85.0H1114.0V0.0H936.0H834.0ZM828.0 -609.0V-714.0H932.0V-609.0Z",
+      "M1397.0 162.0Q1337.0 162.0 1290.0 143.0Q1243.0 124.0 1212.5 89.0Q1182.0 54.0 1170.0 8.0L1276.0 1.0Q1287.0 34.0 1315.0 53.0Q1343.0 72.0 1397.0 72.0Q1464.0 72.0 1499.5 44.0Q1535.0 16.0 1535.0 -39.0V-117.0Q1516.0 -76.0 1475.5 -52.0Q1435.0 -28.0 1382.0 -28.0Q1316.0 -28.0 1264.0 -61.0Q1212.0 -94.0 1183.0 -151.5Q1154.0 -209.0 1154.0 -284.0Q1154.0 -362.0 1182.5 -420.0Q1211.0 -478.0 1262.0 -511.0Q1313.0 -544.0 1378.0 -544.0Q1434.0 -544.0 1476.5 -518.5Q1519.0 -493.0 1538.0 -449.0L1539.0 -532.0H1636.0V-46.0Q1636.0 21.0 1607.0 67.5Q1578.0 114.0 1524.5 138.0Q1471.0 162.0 1397.0 162.0ZM1396.0 -118.0Q1458.0 -118.0 1496.0 -162.0Q1534.0 -206.0 1535.0 -285.0Q1536.0 -339.0 1518.5 -376.5Q1501.0 -414.0 1469.5 -434.0Q1438.0 -454.0 1396.0 -454.0Q1331.0 -454.0 1295.5 -409.5Q1260.0 -365.0 1260.0 -285.0Q1260.0 -206.0 1296.5 -162.0Q1333.0 -118.0 1396.0 -118.0Z",
+      "M1726.0 0.0V-85.0H1934.0V-493.0L1981.0 -447.0H1736.0V-532.0H2036.0V-85.0H2214.0V0.0H2036.0H1934.0ZM1928.0 -609.0V-714.0H2032.0V-609.0Z",
+      "M2728.0 150.0H2627.0V-116.0L2640.0 -102.0Q2629.0 -66.0 2604.5 -40.5Q2580.0 -15.0 2545.0 -1.5Q2510.0 12.0 2469.0 12.0Q2393.0 12.0 2343.5 -26.5Q2294.0 -65.0 2270.0 -128.0Q2246.0 -191.0 2246.0 -266.0Q2246.0 -341.0 2270.0 -404.0Q2294.0 -467.0 2343.5 -505.5Q2393.0 -544.0 2469.0 -544.0Q2532.0 -544.0 2577.5 -511.5Q2623.0 -479.0 2642.0 -417.0L2630.0 -411.0L2632.0 -532.0H2728.0ZM2488.0 -81.0Q2531.0 -81.0 2562.0 -101.5Q2593.0 -122.0 2610.0 -163.0Q2627.0 -204.0 2627.0 -266.0Q2627.0 -328.0 2609.5 -369.0Q2592.0 -410.0 2561.0 -430.5Q2530.0 -451.0 2488.0 -451.0Q2424.0 -451.0 2388.0 -403.0Q2352.0 -355.0 2352.0 -266.0Q2352.0 -177.0 2388.0 -129.0Q2424.0 -81.0 2488.0 -81.0Z",
+      "M3004.0 12.0Q2927.0 12.0 2881.0 -40.5Q2835.0 -93.0 2835.0 -188.0V-532.0H2936.0V-214.0Q2936.0 -142.0 2961.0 -109.0Q2986.0 -76.0 3037.0 -76.0Q3092.0 -76.0 3125.5 -113.0Q3159.0 -150.0 3159.0 -218.0V-532.0H3260.0V0.0H3165.0L3164.0 -139.0L3178.0 -133.0Q3164.0 -64.0 3119.0 -26.0Q3074.0 12.0 3004.0 12.0Z",
+      "M3528.0 12.0Q3478.0 12.0 3438.0 -6.0Q3398.0 -24.0 3374.5 -57.0Q3351.0 -90.0 3351.0 -134.0Q3351.0 -202.0 3392.5 -240.0Q3434.0 -278.0 3518.0 -294.0L3690.0 -330.0Q3690.0 -392.0 3663.0 -423.0Q3636.0 -454.0 3582.0 -454.0Q3532.0 -454.0 3504.0 -431.0Q3476.0 -408.0 3466.0 -367.0L3360.0 -374.0Q3375.0 -450.0 3433.0 -497.0Q3491.0 -544.0 3582.0 -544.0Q3684.0 -544.0 3737.5 -486.0Q3791.0 -428.0 3791.0 -326.0V-116.0Q3791.0 -98.0 3799.0 -90.5Q3807.0 -83.0 3822.0 -83.0H3852.0V0.0Q3846.0 1.0 3832.5 2.0Q3819.0 3.0 3806.0 3.0Q3770.0 3.0 3745.0 -9.0Q3720.0 -21.0 3707.5 -46.5Q3695.0 -72.0 3693.0 -111.0H3709.0Q3703.0 -76.0 3678.0 -48.0Q3653.0 -20.0 3614.0 -4.0Q3575.0 12.0 3528.0 12.0ZM3543.0 -71.0Q3591.0 -71.0 3624.0 -88.0Q3657.0 -105.0 3673.5 -136.0Q3690.0 -167.0 3690.0 -209.0V-250.0L3542.0 -220.0Q3494.0 -211.0 3475.0 -192.0Q3456.0 -173.0 3456.0 -142.0Q3456.0 -109.0 3479.0 -90.0Q3502.0 -71.0 3543.0 -71.0Z",
+      "M3930.0 0.0V-532.0H4023.0L4026.0 -393.0L4015.0 -401.0Q4025.0 -450.0 4050.5 -481.5Q4076.0 -513.0 4113.0 -528.5Q4150.0 -544.0 4192.0 -544.0Q4252.0 -544.0 4291.0 -517.5Q4330.0 -491.0 4350.0 -445.5Q4370.0 -400.0 4370.0 -343.0V0.0H4269.0V-317.0Q4269.0 -386.0 4242.5 -421.0Q4216.0 -456.0 4163.0 -456.0Q4126.0 -456.0 4096.5 -440.0Q4067.0 -424.0 4049.0 -392.5Q4031.0 -361.0 4031.0 -315.0V0.0Z",
+      "M4776.0 0.0Q4695.0 0.0 4655.5 -37.5Q4616.0 -75.0 4616.0 -153.0V-657.0H4717.0V-158.0Q4717.0 -121.0 4734.5 -103.0Q4752.0 -85.0 4787.0 -85.0H4924.0V0.0ZM4448.0 -447.0V-532.0H4924.0V-447.0Z",
+    ],
+  },
+} as const;
+
+/** Stroke as a fraction of the em — a 1px line on a ~186px glyph (site.css). */
+const HAIRLINE_STROKE_RATIO = 1 / 186;
+const HAIRLINE_EM = 1000;
+
+export interface HairlineWordmarkProps {
+  /** Which wordmark to draw. */
+  word: keyof typeof HAIRLINE;
+  className?: string;
+  /** Accessible name (renders a `<title>` + role="img"); omitted → decorative. */
+  title?: string;
+}
+
+export function HairlineWordmark({ word, className, title }: HairlineWordmarkProps) {
+  const spec = HAIRLINE[word];
+  return (
+    <svg
+      viewBox={spec.viewBox}
+      fill="none"
+      stroke="currentColor"
+      strokeOpacity={0.3}
+      strokeWidth={HAIRLINE_STROKE_RATIO * HAIRLINE_EM}
+      role={title ? "img" : undefined}
+      aria-hidden={title ? undefined : "true"}
+      focusable="false"
+      className={["hairline-wordmark", className].filter(Boolean).join(" ")}
+    >
+      {title ? <title>{title}</title> : null}
+      {spec.paths.map((d) => (
+        <path key={d.slice(0, 24)} d={d} />
+      ))}
+    </svg>
+  );
+}
+
+export { CURSOR as TERMINAL_CURSOR };

package/src/components/terminal/ChatResponseLoader.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { ChatMessage } from "../chat/ChatMessage";
+import { TerminalStepCaret } from "./TerminalStepCaret";
+
+/**
+ * Chat response loader — the wait between sending a message and the first
+ * token of the answer. It occupies the assistant turn it is about to become:
+ * a <ChatMessage role="assistant"> row, so the `▸` marker, the
+ * `1.25rem minmax(0,1fr)` grid and the body ink are the transcript's own
+ * (canon §16) and nothing shifts when the real turn replaces it. The body is
+ * the house type-out — the running step types out at the block cursor, holds,
+ * deletes, and the next one follows — so the same caret that will stream the
+ * answer is already blinking while it is being written.
+ *
+ * The step labels are a promise about what is happening, so drive them from
+ * what IS happening wherever the transport can say: pass `activeIndex` from
+ * the stream's stage events or tool-call names and the caret erases and
+ * retypes on each change. Uncontrolled, it cycles the default path — which is
+ * honest for the first second and vague after that, so prefer real steps.
+ *
+ * Snappier than the boot loader by design (900ms dwell, cycling): this one is
+ * usually replaced within a second or two, and a slow hold there reads as a
+ * stall rather than as work.
+ *
+ * One motion moment: the caret. `prefers-reduced-motion` shows the active
+ * step's label whole with the caret still — which uncontrolled is the first,
+ * since the internal clock never starts; see <TerminalStepCaret>.
+ */
+export type ChatResponseLoaderProps = {
+  /** Stages, in order. Defaults to the common path. */
+  steps?: string[];
+  /** Caller-driven stage; omit to cycle on the internal clock. */
+  activeIndex?: number;
+  className?: string;
+};
+
+/** The common path. Illustrative — feed the real stages where you have them. */
+const RESPONSE_STEPS = [
+  "thinking",
+  "routing through digigraph",
+  "gathering context",
+  "composing the answer",
+];
+
+/**
+ * Snappier than the boot loader's 1200ms. Exported because a surface that
+ * already owns its assistant row (digichat's `.dc-msg`, which predates canon
+ * §16) renders <TerminalStepCaret> directly rather than nesting this component
+ * inside its own row and doubling the marker — it still has to wait at the
+ * same cadence, and a second literal is how the two drift apart.
+ */
+const RESPONSE_HOLD_MS = 900;
+
+export function ChatResponseLoader({
+  steps = RESPONSE_STEPS,
+  activeIndex,
+  className,
+}: ChatResponseLoaderProps) {
+  return (
+    <ChatMessage role="assistant" tone="mute" className={className}>
+      <TerminalStepCaret steps={steps} activeIndex={activeIndex} holdMs={RESPONSE_HOLD_MS} />
+    </ChatMessage>
+  );
+}
+
+export { RESPONSE_STEPS as CHAT_RESPONSE_STEPS, RESPONSE_HOLD_MS as CHAT_RESPONSE_HOLD_MS };

package/src/components/terminal/ContainerBootLoader.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import type { ReactNode } from "react";
+
+import { TerminalStepCaret } from "./TerminalStepCaret";
+
+/**
+ * Container-boot loader — the full-surface wait shown while the app's
+ * container is still coming up. A scale-to-zero container answers its first
+ * request in 15–25s, and a spinner spends all of it saying nothing; this says
+ * which phase is running, in the house type-out: the step label types out at
+ * the brand's block cursor, holds, deletes, and the next one follows.
+ *
+ * The composition is a terminal line caught mid-prompt — wordmark, hairline,
+ * the typing step, and one quiet note setting the expectation — left-aligned
+ * on a mono grid and centred in the surface. It carries **no** mark before the
+ * label: word plus block cursor is the lockup itself, and the mark is what
+ * makes this read as the brand rather than as a progress widget.
+ *
+ * The steps are a script, not telemetry: nothing can report progress from
+ * inside a container that has not started. So they default to the phases of an
+ * ordinary cold start and the last one HOLDS (`loop={false}`) — a boot screen
+ * that loops back to step one reads as stuck. Pass `steps` to name the real
+ * phases, or `activeIndex` once something outside the container can report
+ * them (a health-check poller, a readiness probe).
+ *
+ * One motion moment: the caret. No spinner, no progress rail, no counter.
+ * `prefers-reduced-motion` shows the active step's label whole with the caret
+ * still — which for an uncontrolled loader is the first, since its clock never
+ * starts; see <TerminalStepCaret>. Frame styles: `.tl-boot*` in
+ * `@digithings-ai/ui/styles/terminal-loaders.css`.
+ */
+export type ContainerBootLoaderProps = {
+  /** Boot phases, in order. Defaults to an ordinary cold start. */
+  steps?: string[];
+  /** Caller-driven phase; omit to run the script on the internal clock. */
+  activeIndex?: number;
+  /** Brand line above the rule — typically a wordmark. Omit for none. */
+  title?: ReactNode;
+  /** The expectation-setting line under the caret. Pass `null` to drop it. */
+  note?: ReactNode;
+  /** Pin to the viewport — the usual mode, over a not-yet-rendered app. */
+  fullscreen?: boolean;
+  className?: string;
+};
+
+/** The phases of an ordinary cold start. Illustrative — name your own. */
+const BOOT_STEPS = [
+  "waking the container",
+  "booting the chat surface",
+  "linking digigraph",
+  "restoring your session",
+  "warming the model runtime",
+];
+
+const BOOT_NOTE = "cold start · the container sleeps when idle";
+
+export function ContainerBootLoader({
+  steps = BOOT_STEPS,
+  activeIndex,
+  title,
+  note = BOOT_NOTE,
+  fullscreen = false,
+  className,
+}: ContainerBootLoaderProps) {
+  return (
+    <div
+      className={["tl-boot", fullscreen ? "is-fixed" : "", className ?? ""]
+        .filter(Boolean)
+        .join(" ")}
+    >
+      <div className="tl-boot-inner">
+        {title ? <p className="tl-boot-title">{title}</p> : null}
+        <hr className="tl-boot-rule" />
+        <TerminalStepCaret steps={steps} activeIndex={activeIndex} loop={false} />
+        {note ? <p className="tl-note">{note}</p> : null}
+      </div>
+    </div>
+  );
+}
+
+export { BOOT_STEPS as CONTAINER_BOOT_STEPS };

package/src/components/terminal/TerminalStepCaret.tsx

@@ -0,0 +1,202 @@
+"use client";
+
+import { useEffect, useRef, useState, type ReactNode } from "react";
+import { useReducedMotion } from "motion/react";
+
+import { ChatStreamCursor } from "../chat/ChatStreamCursor";
+
+/**
+ * Step caret — the house type-out, applied to waiting. The label of the step
+ * currently running types out at the blinking block cursor, holds long enough
+ * to read, deletes, and the next step follows: the same grammar the animated
+ * brand lockup uses to cycle module names (`AnimatedLockup`, symbols family),
+ * which is why a loader built on it reads as the mark rather than as chrome.
+ *
+ * The caret is not redrawn — it is <ChatStreamCursor> (canon §16), so the
+ * glyph-metric-free 7×14 accent block, the steps(1) blink and the
+ * reduced-motion still all come from chat-core.css and never drift.
+ *
+ * Two things are load-bearing:
+ *
+ * - **Typing is priced per character, not per step.** A fixed slot makes a
+ *   short label type at twice the speed of a long one and the rhythm limps —
+ *   the lockup's rule, and the reason the cadence constants are per-char.
+ *   Cadence diverges from the lockup's 140ms/char, which is tuned for 5-letter
+ *   suffixes; a step label is a phrase, so it runs at 58ms. Keep labels under
+ *   ~30 characters — the line does not wrap (the caret has to trail the text,
+ *   and a wrapped caret lands in the margin), and 30 is what the boot surface
+ *   holds on a 375px viewport.
+ * - **The label is written straight to the DOM, not re-rendered.** A character
+ *   is not a state change; `shownRef` tracks what is on screen so a step swap
+ *   erases what was actually there. That also keeps the typed node out of the
+ *   a11y tree — a live region on it would announce every keystroke — so what a
+ *   screen reader gets comes from a visually-hidden `role="status"` sibling.
+ *   That sibling narrates the STEP only when `activeIndex` is supplied, since
+ *   only then does a step mean progress; left to cycle its own script it
+ *   announces `waitingLabel` once instead of reciting invented phrases on a
+ *   ~10s loop for the length of the wait.
+ *
+ * Steps advance on the internal clock, or pass `activeIndex` to drive them
+ * from real progress (a stream's tool-call names, a health-check phase) and
+ * the caret erases and retypes on each change.
+ *
+ * `prefers-reduced-motion` renders the final state — the active step's label
+ * whole, no typing, no deleting, the caret still — and the internal clock
+ * never starts, so an uncontrolled caret holds its first step. A caller-driven
+ * `activeIndex` still swaps the label: that is information, not decoration.
+ * With scripts off the first step renders from `<noscript>`.
+ *
+ * Frame styles: `.tl-*` in `@digithings-ai/ui/styles/terminal-loaders.css`.
+ */
+export type TerminalStepCaretProps = {
+  /** The steps, in order. The first is the reduced-motion / no-JS state. */
+  steps: string[];
+  /** Caller-driven step; omit to advance on the internal clock. */
+  activeIndex?: number;
+  /** When self-advancing: cycle (default), or stop on the last step. */
+  loop?: boolean;
+  /** Prompt mark before the label. Omit when the surface owns the marker. */
+  mark?: ReactNode;
+  /** Per-character type / erase cadence, and the beats between, in ms. */
+  typeMs?: number;
+  eraseMs?: number;
+  holdMs?: number;
+  restMs?: number;
+  /** What a screen reader hears while the steps are the internal script. */
+  waitingLabel?: string;
+  className?: string;
+};
+
+/** Per-character cadence. `erase/type` holds the lockup's 90/140 ratio. */
+const TYPE_MS = 58;
+const ERASE_MS = 37;
+/** Dwell on a finished label, and the beat between erasing and typing. */
+const HOLD_MS = 1200;
+const REST_MS = 220;
+
+/** Announced once while the steps are the internal script. See the a11y note. */
+const WAITING_LABEL = "Working…";
+
+export function TerminalStepCaret({
+  steps,
+  activeIndex,
+  loop = true,
+  mark,
+  typeMs = TYPE_MS,
+  eraseMs = ERASE_MS,
+  holdMs = HOLD_MS,
+  restMs = REST_MS,
+  waitingLabel = WAITING_LABEL,
+  className,
+}: TerminalStepCaretProps) {
+  const reduced = useReducedMotion();
+  const labelRef = useRef<HTMLSpanElement | null>(null);
+  /** What is on screen right now — the DOM is written to, not re-rendered. */
+  const shownRef = useRef("");
+  const [ownIndex, setOwnIndex] = useState(0);
+
+  const controlled = activeIndex !== undefined;
+  const count = steps.length;
+  const index = count === 0 ? 0 : (((controlled ? activeIndex : ownIndex) % count) + count) % count;
+  const word = steps[index] ?? "";
+
+  useEffect(() => {
+    const node = labelRef.current;
+    if (!node) return;
+
+    const write = (text: string) => {
+      shownRef.current = text;
+      node.textContent = text;
+    };
+
+    let timer = 0;
+
+    // Reduced motion writes the label whole and stops.
+    if (reduced) {
+      write(word);
+      return;
+    }
+    // No steps at all: nothing to type and nothing to advance to. Falling
+    // through would schedule `setOwnIndex(i => (i + 1) % 0)` — NaN, which is
+    // absorbing: `steps[NaN]` is undefined forever after, and since
+    // Object.is(NaN, NaN) React bails out of both the state update and the
+    // effect, so the caret never recovers even once real steps arrive.
+    if (count === 0) {
+      write("");
+      return;
+    }
+    // An empty label must still advance. Returning early here (as the reduced
+    // branch does) skipped scheduling the next step, so one blank label — a
+    // stream handing over a nameless tool — froze the loader on an empty line
+    // forever. Same advance rule as the settled case in `type` below.
+    if (!word) {
+      write("");
+      if (controlled) return;
+      if (!loop && index >= count - 1) return;
+      timer = window.setTimeout(() => setOwnIndex((i) => (i + 1) % count), holdMs);
+      return () => window.clearTimeout(timer);
+    }
+
+    const from = shownRef.current;
+    let cut = from.length;
+    let typed = 0;
+
+    const type = () => {
+      if (typed < word.length) {
+        typed += 1;
+        write(word.slice(0, typed));
+        timer = window.setTimeout(type, typeMs);
+        return;
+      }
+      // Settled. A controlled caret waits for the caller; an unlooped one
+      // holds the last step for as long as the wait lasts.
+      if (controlled) return;
+      if (!loop && index >= count - 1) return;
+      timer = window.setTimeout(() => setOwnIndex((i) => (i + 1) % count), holdMs);
+    };
+
+    const erase = () => {
+      if (cut > 0) {
+        cut -= 1;
+        write(from.slice(0, cut));
+        timer = window.setTimeout(erase, eraseMs);
+        return;
+      }
+      timer = window.setTimeout(type, restMs);
+    };
+
+    erase();
+    return () => window.clearTimeout(timer);
+  }, [word, index, count, controlled, loop, reduced, typeMs, eraseMs, holdMs, restMs]);
+
+  return (
+    <span className={["tl-line", className ?? ""].filter(Boolean).join(" ")}>
+      {mark ? (
+        <span className="tl-mark" aria-hidden="true">
+          {mark}
+        </span>
+      ) : null}
+      {/* Typed imperatively — empty on the server so the first paint is the
+          start of the type-out, not a frame of finished text that clears. */}
+      <span className="tl-label" ref={labelRef} aria-hidden="true" />
+      <noscript>
+        <span className="tl-label">{steps[0] ?? ""}</span>
+      </noscript>
+      <ChatStreamCursor />
+      {/* `.tl-sr` and not Tailwind's `.sr-only`: a utility only exists in an app
+          whose own source happens to use it, and digithings.ai's does not — so
+          the shared component shipped a screen-reader span that rendered as
+          ordinary visible text, duplicating the label beside itself. A
+          component's a11y must not depend on the consumer's build config.
+
+          Announce the STEP only when a caller drives it, because only then is
+          it progress. The self-cycling script is invented — narrating it to a
+          screen reader repeats four fabricated phrases every ~10s for as long
+          as the wait lasts, which is worse than the one static line it
+          replaced. */}
+      <span className="tl-sr" role="status">
+        {controlled ? word : waitingLabel}
+      </span>
+    </span>
+  );
+}

package/src/components/themeInit.ts

@@ -0,0 +1,24 @@
+/**
+ * The pre-paint theme script, as a plain string module.
+ *
+ * It must NOT live in a "use client" file. Root layouts are server
+ * components; importing a non-component value from a client module gives
+ * them a client reference instead of the string. The HTML still rendered the
+ * script, but the RSC payload carried a lazy module reference in the root
+ * layout's <head> props, so hydration had to load that chunk first. When the
+ * chunk arrived after the document had parsed, the root hydrated out of step
+ * with the streamed metadata outlet and React threw #418, re-rendered the root
+ * from the server default (data-theme="dark"), and light-theme readers flipped
+ * to dark.
+ *
+ * Generated by scripts/generate_platform_palettes.py — do not edit the
+ * script body. The theme-color hexes are read by the browser and OS chrome,
+ * never by the page cascade, so a CSS token is unavailable here.
+ *
+ * `dt-theme` is light, dark, or absent (auto / follow the OS).
+ * `dt-palette` is a palette id or absent (default). The palette key is
+ * never written by the dashboard, and this script never writes storage.
+ */
+/** Inline in <head> before paint: <script dangerouslySetInnerHTML={{__html: themeInitScript}}/> */
+export const themeInitScript =
+  "try{var s=localStorage.getItem('dt-theme');var t=(s==='light'||s==='dark')?s:(matchMedia('(prefers-color-scheme: light)').matches?'light':'dark');var e=document.documentElement;e.setAttribute('data-theme',t);var P={'aura':{d:'#15141b',l:'#f5f0ff'},'ayu':{d:'#0f1419',l:'#fdfaf4'},'catppuccin':{d:'#1e1e2e',l:'#f5e0dc'},'catppuccin-frappe':{d:'#303446',l:'#303446'},'catppuccin-macchiato':{d:'#24273a',l:'#24273a'},'cobalt2':{d:'#193549',l:'#ffffff'},'cursor':{d:'#181818',l:'#fcfcfc'},'dracula':{d:'#1d1e28',l:'#f8f8f2'},'everforest':{d:'#2d353b',l:'#fdf6e3'},'flexoki':{d:'#100F0F',l:'#FFFCF0'},'github':{d:'#0d1117',l:'#ffffff'},'gruvbox':{d:'#282828',l:'#fbf1c7'},'kanagawa':{d:'#1F1F28',l:'#F2E9DE'},'material':{d:'#263238',l:'#fafafa'},'matrix':{d:'#0a0e0a',l:'#eef3ea'},'mercury':{d:'#171721',l:'#ffffff'},'monokai':{d:'#272822',l:'#fdf8ec'},'nightowl':{d:'#011627',l:'#f0f0f0'},'nord':{d:'#2e3440',l:'#eceff4'},'one-dark':{d:'#282c34',l:'#fafafa'},'osaka-jade':{d:'#111c18',l:'#F6F5DD'},'orng':{d:'#0a0a0a',l:'#ffffff'},'lucent-orng':{d:'#2a1a15',l:'#fff5f0'},'palenight':{d:'#292d3e',l:'#fafafa'},'rosepine':{d:'#191724',l:'#faf4ed'},'solarized':{d:'#002b36',l:'#fdf6e3'},'synthwave84':{d:'#262335',l:'#fafafa'},'tokyonight':{d:'#1a1b26',l:'#e1e2e7'},'vesper':{d:'#101010',l:'#F0F0F0'},'vercel':{d:'#000000',l:'#FFFFFF'},'zenburn':{d:'#3f3f3f',l:'#ffffef'},'carbonfox':{d:'#393939',l:'#8e8e8e'}};var p=localStorage.getItem('dt-palette');var c=t==='light'?'#FBFBF9':'#0A0E0C';if(p&&p!=='default'&&Object.prototype.hasOwnProperty.call(P,p)){e.setAttribute('data-palette',p);c=t==='light'?P[p].l:P[p].d;}else{e.removeAttribute('data-palette');}var m=document.querySelector('meta[name=\"theme-color\"]');if(!m){m=document.createElement('meta');m.setAttribute('name','theme-color');document.head.appendChild(m);}m.setAttribute('content',c);}catch(err){document.documentElement.setAttribute('data-theme','dark');}";