@krizaka/ui 3.35.0 → 3.37.0

package/dist/loader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/loader/loader.tsx"],"sourcesContent":["// Client (timers). The whole life of a wait, done right once: nothing for the first instants (a fast answer never\n// flashes a spinner), then the Krizaka glyph with its words and an ETA, held long enough to be read, ending on a\n// check or a cross that is drawn and announced. `LoadingRegion` hands a region over from its content to a skeleton of\n// the same shape, then to words when the wait grows long, then back to the content.\nimport * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { LoaderGlyph } from \"../spinner/glyph\";\n\nexport const loader = tv({\n  slots: {\n    root: \"text-fg-secondary\",\n    box: \"kz-fade flex items-center gap-3\",\n    glyph: \"shrink-0 text-accent\",\n    mark: \"block shrink-0 [&>svg]:block [&>svg]:h-full [&>svg]:w-full\",\n    text: \"flex min-w-0 flex-col\",\n    label: \"font-medium text-fg\",\n    detail: \"text-xs text-fg-secondary tabular-nums\",\n  },\n  variants: {\n    variant: {\n      inline: { box: \"text-sm\", glyph: \"h-5 w-5\", mark: \"h-5 w-5\" },\n      block: { box: \"flex-col justify-center py-10 text-center text-sm\", glyph: \"h-9 w-9\", mark: \"h-9 w-9\", text: \"items-center\" },\n      overlay: {\n        root: \"absolute inset-0 z-10 flex items-center justify-center rounded-[inherit] empty:hidden\",\n        box: \"flex-col rounded-xl border border-border-default bg-surface-1/90 px-6 py-5 text-center text-sm shadow-lg backdrop-blur-sm\",\n        glyph: \"h-9 w-9\", mark: \"h-9 w-9\",\n        text: \"items-center\",\n      },\n      page: {\n        root: \"fixed inset-0 z-50 flex items-center justify-center bg-surface-0/80 backdrop-blur-sm empty:hidden\",\n        box: \"flex-col text-center\",\n        glyph: \"h-14 w-14\", mark: \"h-14 w-14\",\n        text: \"items-center\",\n        label: \"font-display text-lg\",\n      },\n    },\n    ended: {\n      success: { glyph: \"text-fg-success\" },\n      error: { glyph: \"text-fg-danger\" },\n    },\n  },\n  defaultVariants: { variant: \"inline\" },\n});\n\nexport type LoaderVariants = VariantProps<typeof loader>;\n\n/**\n * `true` once `active` has lasted `delay` ms; then stays `true` at least `minDuration` ms — a wait that ends early never\n * shows, one that shows never blinks.\n */\nexport function useDelayedWait(active: boolean, delay = 250, minDuration = 600): boolean {\n  const [shown, setShown] = React.useState(false);\n  const since = React.useRef(0);\n  React.useEffect(() => {\n    if (active === shown) return;\n    const wait = active ? delay : Math.max(0, minDuration - (Date.now() - since.current));\n    const timer = setTimeout(() => {\n      since.current = Date.now();\n      setShown(active);\n    }, wait);\n    return () => clearTimeout(timer);\n  }, [active, shown, delay, minDuration]);\n  return shown;\n}\n\nexport interface LoaderProps extends Omit<React.ComponentProps<\"div\">, \"children\"> {\n  /** What is loading, in words (“Loading your invoices”) — passed translated; shown and announced. */\n  label: string;\n  /**\n   * loading · success · error. When the wait ends, the loader shows how it ended for `endDuration` ms, then disappears.\n   * @default \"loading\"\n   */\n  status?: \"loading\" | \"success\" | \"error\";\n  /** The words of a success (“Invoices loaded”) — passed translated. Default: nothing more than the check. */\n  successLabel?: string;\n  /** The words of a failure (“Could not load the invoices”) — passed translated. */\n  errorLabel?: string;\n  /** Between 0 and 1: a determinate wait — the trace grows to it and the percentage shows. */\n  value?: number | null;\n  /** The time left, in words (“About 20 s left”) — passed translated (`@krizaka/intl` formats durations). */\n  eta?: string;\n  /**\n   * Milliseconds before anything shows: a wait shorter than this never flashes.\n   * @default 250\n   */\n  delay?: number;\n  /**\n   * Once shown, the least milliseconds it stays: it never blinks.\n   * @default 600\n   */\n  minDuration?: number;\n  /**\n   * Milliseconds the ending (check or cross) stays before the loader disappears; `0` never shows it, `Infinity` keeps it.\n   * @default 1600\n   */\n  endDuration?: number;\n  /**\n   * inline (beside the content) · block (a region's centre) · overlay (over a `relative` parent, frosted) · page (the\n   * whole screen).\n   * @default \"inline\"\n   */\n  variant?: LoaderVariants[\"variant\"];\n  /**\n   * The product's mark in place of the Krizaka glyph while it waits — `<OrochiaLogo animated />` (or `ProductLogo`) of\n   * `@krizaka/ui`; it takes the loader's size. The ending (check or cross) stays the glyph's. Decorative: leave `title` off.\n   */\n  mark?: React.ReactNode;\n}\n\n/**\n * A wait, from start to end. `role=\"status\"` (polite): its words are announced when it shows and when it ends. Under\n * prefers-reduced-motion the glyph rests on a still frame; the delay and the ending stay.\n */\nexport function Loader({\n  label,\n  status = \"loading\",\n  successLabel,\n  errorLabel,\n  value,\n  eta,\n  delay = 250,\n  minDuration = 600,\n  endDuration = 1600,\n  variant,\n  mark,\n  className,\n  ...props\n}: LoaderProps) {\n  const waiting = useDelayedWait(status === \"loading\", delay, minDuration);\n  // Rendered already ended (a result to show), it shows its ending; otherwise only a wait that was seen ends visibly.\n  const [ending, setEnding] = React.useState<\"success\" | \"error\" | null>(() => (status !== \"loading\" && endDuration > 0 ? status : null));\n  const wasWaiting = React.useRef(false);\n  React.useEffect(() => {\n    if (!Number.isFinite(endDuration)) return;\n    const hide = setTimeout(() => setEnding((e) => (wasWaiting.current ? e : null)), endDuration);\n    return () => clearTimeout(hide);\n    // Only the ending a loader was mounted with: later endings have their own timer below.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n  React.useEffect(() => {\n    if (waiting) {\n      wasWaiting.current = true;\n      return;\n    }\n    if (!wasWaiting.current || status === \"loading\") return;\n    wasWaiting.current = false;\n    const end = status;\n    const show = setTimeout(() => setEnding(endDuration > 0 ? end : null), 0);\n    const hide = Number.isFinite(endDuration) ? setTimeout(() => setEnding(null), endDuration) : undefined;\n    return () => {\n      clearTimeout(show);\n      clearTimeout(hide);\n    };\n  }, [waiting, status, endDuration]);\n\n  const phase = waiting ? \"loading\" : ending;\n  const s = loader({ variant, ended: phase === \"success\" || phase === \"error\" ? phase : undefined });\n  const known = phase === \"loading\" && typeof value === \"number\" && Number.isFinite(value);\n  const words = phase === \"success\" ? (successLabel ?? label) : phase === \"error\" ? (errorLabel ?? label) : label;\n  const detail = phase === \"loading\" ? [known ? `${Math.round(Math.min(1, Math.max(0, value)) * 100)} %` : null, eta].filter(Boolean).join(\" · \") : \"\";\n  return (\n    <div role=\"status\" aria-live=\"polite\" data-phase={phase ?? \"idle\"} className={s.root({ className })} {...props}>\n      {phase && (\n        <div className={s.box()}>\n          {mark && phase === \"loading\" ? (\n            <span aria-hidden className={s.mark()} data-mark=\"\">\n              {mark}\n            </span>\n          ) : (\n            <LoaderGlyph state={phase} value={known ? value : null} className={s.glyph()} />\n          )}\n          <span className={s.text()}>\n            <span className={s.label()}>{words}</span>\n            {detail && <span className={s.detail()}>{detail}</span>}\n          </span>\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport interface LoadingRegionProps extends React.ComponentProps<\"div\"> {\n  /** Whether the content is on its way. */\n  loading: boolean;\n  /** What stands in while it loads: skeletons the shape of the content (no layout shift when it arrives). */\n  skeleton: React.ReactNode;\n  /** What is loading, in words — passed translated; announced when the wait shows. */\n  label: string;\n  /** The words when the wait grows long (“Still loading — the server is busy”) — passed translated. */\n  slowLabel?: string;\n  /**\n   * Milliseconds of skeleton before the words of a long wait appear over it.\n   * @default 4000\n   */\n  slowAfter?: number;\n  /**\n   * Milliseconds before the skeleton shows: a fast answer goes straight to the content.\n   * @default 200\n   */\n  delay?: number;\n  /**\n   * Once shown, the least milliseconds the skeleton stays.\n   * @default 500\n   */\n  minDuration?: number;\n}\n\n/**\n * A region that hands over: its content → (after `delay`) a skeleton of the same shape → (after `slowAfter`) words over\n * the skeleton → its content again, fading in. `aria-busy` while it waits; the wait is announced once.\n */\nexport function LoadingRegion({\n  loading,\n  skeleton,\n  label,\n  slowLabel,\n  slowAfter = 4000,\n  delay = 200,\n  minDuration = 500,\n  className,\n  children,\n  ...props\n}: LoadingRegionProps) {\n  const waiting = useDelayedWait(loading, delay, minDuration);\n  const slow = useDelayedWait(waiting && loading, slowAfter, 0);\n  const busy = loading || waiting;\n  return (\n    <div aria-busy={busy} data-phase={waiting ? (slow ? \"slow\" : \"skeleton\") : busy ? \"pending\" : \"ready\"} className={[\"relative\", className].filter(Boolean).join(\" \")} {...props}>\n      <span role=\"status\" className=\"sr-only\">\n        {waiting ? (slow ? (slowLabel ?? label) : label) : \"\"}\n      </span>\n      {waiting ? (\n        <div aria-hidden className=\"kz-fade\">\n          {skeleton}\n        </div>\n      ) : busy ? (\n        // Within the delay: the skeleton holds the place, invisible — nothing flashes, nothing jumps.\n        <div aria-hidden className=\"invisible\">\n          {skeleton}\n        </div>\n      ) : (\n        <div className=\"kz-fade\">{children}</div>\n      )}\n      {waiting && slow && <Loader label={slowLabel ?? label} variant=\"overlay\" delay={0} minDuration={0} endDuration={0} aria-live=\"off\" role=\"presentation\" />}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/loader/loader.tsx"],"sourcesContent":["// Client (timers). The whole life of a wait, done right once: nothing for the first instants (a fast answer never\n// flashes a spinner), then the Krizaka glyph with its words and an ETA, held long enough to be read, ending on a\n// check or a cross that is drawn and announced. `LoadingRegion` hands a region over from its content to a skeleton of\n// the same shape, then to words when the wait grows long, then back to the content.\nimport * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { LoaderGlyph } from \"../spinner/glyph\";\n\nexport const loader = tv({\n  slots: {\n    root: \"text-fg-secondary\",\n    box: \"kz-fade flex items-center gap-3\",\n    glyph: \"shrink-0 text-accent\",\n    mark: \"block shrink-0 [&>svg]:block [&>svg]:h-full [&>svg]:w-full\",\n    text: \"flex min-w-0 flex-col\",\n    label: \"font-medium text-fg\",\n    detail: \"text-xs text-fg-secondary tabular-nums\",\n  },\n  variants: {\n    variant: {\n      inline: { box: \"text-sm\", glyph: \"h-5 w-5\", mark: \"h-5 w-5\" },\n      block: { box: \"flex-col justify-center py-10 text-center text-sm\", glyph: \"h-9 w-9\", mark: \"h-9 w-9\", text: \"items-center\" },\n      overlay: {\n        root: \"absolute inset-0 z-10 flex items-center justify-center rounded-[inherit] empty:hidden\",\n        box: \"flex-col rounded-xl border border-border-default bg-surface-1 px-6 py-5 text-center text-sm shadow-lg\",\n        glyph: \"h-9 w-9\", mark: \"h-9 w-9\",\n        text: \"items-center\",\n      },\n      page: {\n        root: \"fixed inset-0 z-50 flex items-center justify-center bg-surface-0 empty:hidden\",\n        box: \"flex-col text-center\",\n        glyph: \"h-14 w-14\", mark: \"h-14 w-14\",\n        text: \"items-center\",\n        label: \"font-display text-lg\",\n      },\n    },\n    ended: {\n      success: { glyph: \"text-fg-success\" },\n      error: { glyph: \"text-fg-danger\" },\n    },\n  },\n  defaultVariants: { variant: \"inline\" },\n});\n\nexport type LoaderVariants = VariantProps<typeof loader>;\n\n/**\n * `true` once `active` has lasted `delay` ms; then stays `true` at least `minDuration` ms — a wait that ends early never\n * shows, one that shows never blinks.\n */\nexport function useDelayedWait(active: boolean, delay = 250, minDuration = 600): boolean {\n  const [shown, setShown] = React.useState(false);\n  const since = React.useRef(0);\n  React.useEffect(() => {\n    if (active === shown) return;\n    const wait = active ? delay : Math.max(0, minDuration - (Date.now() - since.current));\n    const timer = setTimeout(() => {\n      since.current = Date.now();\n      setShown(active);\n    }, wait);\n    return () => clearTimeout(timer);\n  }, [active, shown, delay, minDuration]);\n  return shown;\n}\n\nexport interface LoaderProps extends Omit<React.ComponentProps<\"div\">, \"children\"> {\n  /** What is loading, in words (“Loading your invoices”) — passed translated; shown and announced. */\n  label: string;\n  /**\n   * loading · success · error. When the wait ends, the loader shows how it ended for `endDuration` ms, then disappears.\n   * @default \"loading\"\n   */\n  status?: \"loading\" | \"success\" | \"error\";\n  /** The words of a success (“Invoices loaded”) — passed translated. Default: nothing more than the check. */\n  successLabel?: string;\n  /** The words of a failure (“Could not load the invoices”) — passed translated. */\n  errorLabel?: string;\n  /** Between 0 and 1: a determinate wait — the trace grows to it and the percentage shows. */\n  value?: number | null;\n  /** The time left, in words (“About 20 s left”) — passed translated (`@krizaka/intl` formats durations). */\n  eta?: string;\n  /**\n   * Milliseconds before anything shows: a wait shorter than this never flashes.\n   * @default 250\n   */\n  delay?: number;\n  /**\n   * Once shown, the least milliseconds it stays: it never blinks.\n   * @default 600\n   */\n  minDuration?: number;\n  /**\n   * Milliseconds the ending (check or cross) stays before the loader disappears; `0` never shows it, `Infinity` keeps it.\n   * @default 1600\n   */\n  endDuration?: number;\n  /**\n   * inline (beside the content) · block (a region's centre) · overlay (over a `relative` parent, frosted) · page (the\n   * whole screen).\n   * @default \"inline\"\n   */\n  variant?: LoaderVariants[\"variant\"];\n  /**\n   * The product's mark in place of the Krizaka glyph while it waits — `<OrochiaLogo animated />` (or `ProductLogo`) of\n   * `@krizaka/ui`; it takes the loader's size. The ending (check or cross) stays the glyph's. Decorative: leave `title` off.\n   */\n  mark?: React.ReactNode;\n}\n\n/**\n * A wait, from start to end. `role=\"status\"` (polite): its words are announced when it shows and when it ends. Under\n * prefers-reduced-motion the glyph rests on a still frame; the delay and the ending stay.\n */\nexport function Loader({\n  label,\n  status = \"loading\",\n  successLabel,\n  errorLabel,\n  value,\n  eta,\n  delay = 250,\n  minDuration = 600,\n  endDuration = 1600,\n  variant,\n  mark,\n  className,\n  ...props\n}: LoaderProps) {\n  const waiting = useDelayedWait(status === \"loading\", delay, minDuration);\n  // Rendered already ended (a result to show), it shows its ending; otherwise only a wait that was seen ends visibly.\n  const [ending, setEnding] = React.useState<\"success\" | \"error\" | null>(() => (status !== \"loading\" && endDuration > 0 ? status : null));\n  const wasWaiting = React.useRef(false);\n  React.useEffect(() => {\n    if (!Number.isFinite(endDuration)) return;\n    const hide = setTimeout(() => setEnding((e) => (wasWaiting.current ? e : null)), endDuration);\n    return () => clearTimeout(hide);\n    // Only the ending a loader was mounted with: later endings have their own timer below.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n  React.useEffect(() => {\n    if (waiting) {\n      wasWaiting.current = true;\n      return;\n    }\n    if (!wasWaiting.current || status === \"loading\") return;\n    wasWaiting.current = false;\n    const end = status;\n    const show = setTimeout(() => setEnding(endDuration > 0 ? end : null), 0);\n    const hide = Number.isFinite(endDuration) ? setTimeout(() => setEnding(null), endDuration) : undefined;\n    return () => {\n      clearTimeout(show);\n      clearTimeout(hide);\n    };\n  }, [waiting, status, endDuration]);\n\n  const phase = waiting ? \"loading\" : ending;\n  const s = loader({ variant, ended: phase === \"success\" || phase === \"error\" ? phase : undefined });\n  const known = phase === \"loading\" && typeof value === \"number\" && Number.isFinite(value);\n  const words = phase === \"success\" ? (successLabel ?? label) : phase === \"error\" ? (errorLabel ?? label) : label;\n  const detail = phase === \"loading\" ? [known ? `${Math.round(Math.min(1, Math.max(0, value)) * 100)} %` : null, eta].filter(Boolean).join(\" · \") : \"\";\n  return (\n    <div role=\"status\" aria-live=\"polite\" data-phase={phase ?? \"idle\"} className={s.root({ className })} {...props}>\n      {phase && (\n        <div className={s.box()}>\n          {mark && phase === \"loading\" ? (\n            <span aria-hidden className={s.mark()} data-mark=\"\">\n              {mark}\n            </span>\n          ) : (\n            <LoaderGlyph state={phase} value={known ? value : null} className={s.glyph()} />\n          )}\n          <span className={s.text()}>\n            <span className={s.label()}>{words}</span>\n            {detail && <span className={s.detail()}>{detail}</span>}\n          </span>\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport interface LoadingRegionProps extends React.ComponentProps<\"div\"> {\n  /** Whether the content is on its way. */\n  loading: boolean;\n  /** What stands in while it loads: skeletons the shape of the content (no layout shift when it arrives). */\n  skeleton: React.ReactNode;\n  /** What is loading, in words — passed translated; announced when the wait shows. */\n  label: string;\n  /** The words when the wait grows long (“Still loading — the server is busy”) — passed translated. */\n  slowLabel?: string;\n  /**\n   * Milliseconds of skeleton before the words of a long wait appear over it.\n   * @default 4000\n   */\n  slowAfter?: number;\n  /**\n   * Milliseconds before the skeleton shows: a fast answer goes straight to the content.\n   * @default 200\n   */\n  delay?: number;\n  /**\n   * Once shown, the least milliseconds the skeleton stays.\n   * @default 500\n   */\n  minDuration?: number;\n}\n\n/**\n * A region that hands over: its content → (after `delay`) a skeleton of the same shape → (after `slowAfter`) words over\n * the skeleton → its content again, fading in. `aria-busy` while it waits; the wait is announced once.\n */\nexport function LoadingRegion({\n  loading,\n  skeleton,\n  label,\n  slowLabel,\n  slowAfter = 4000,\n  delay = 200,\n  minDuration = 500,\n  className,\n  children,\n  ...props\n}: LoadingRegionProps) {\n  const waiting = useDelayedWait(loading, delay, minDuration);\n  const slow = useDelayedWait(waiting && loading, slowAfter, 0);\n  const busy = loading || waiting;\n  return (\n    <div aria-busy={busy} data-phase={waiting ? (slow ? \"slow\" : \"skeleton\") : busy ? \"pending\" : \"ready\"} className={[\"relative\", className].filter(Boolean).join(\" \")} {...props}>\n      <span role=\"status\" className=\"sr-only\">\n        {waiting ? (slow ? (slowLabel ?? label) : label) : \"\"}\n      </span>\n      {waiting ? (\n        <div aria-hidden className=\"kz-fade\">\n          {skeleton}\n        </div>\n      ) : busy ? (\n        // Within the delay: the skeleton holds the place, invisible — nothing flashes, nothing jumps.\n        <div aria-hidden className=\"invisible\">\n          {skeleton}\n        </div>\n      ) : (\n        <div className=\"kz-fade\">{children}</div>\n      )}\n      {waiting && slow && <Loader label={slowLabel ?? label} variant=\"overlay\" delay={0} minDuration={0} endDuration={0} aria-live=\"off\" role=\"presentation\" />}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/map.js

@@ -137,17 +137,17 @@ function usePrefersReducedMotion() {
 
 // ../tokens/dist/native.js
 var themes = /* @__PURE__ */ Object.freeze({ dark: /* @__PURE__ */ Object.freeze({
-  "surface0": "#0c0c0e",
-  "surface1": "#161618",
-  "surface2": "#1f1f23",
-  "surface3": "#2a2a2d",
-  "media": "#1b1b1d",
-  "borderSubtle": "rgba(255,255,255,0.06)",
-  "borderDefault": "rgba(255,255,255,0.1)",
-  "borderStrong": "rgba(255,255,255,0.16)",
-  "textPrimary": "#f5f5f5",
-  "textSecondary": "#a0a0a7",
-  "textMuted": "#92929b",
+  "surface0": "#151b18",
+  "surface1": "#191f1c",
+  "surface2": "#1c221f",
+  "surface3": "#262e2a",
+  "media": "#1e2521",
+  "borderSubtle": "rgba(231,240,230,0.07)",
+  "borderDefault": "rgba(231,240,230,0.12)",
+  "borderStrong": "rgba(231,240,230,0.2)",
+  "textPrimary": "#ecf0ea",
+  "textSecondary": "#bcc8c0",
+  "textMuted": "#a7b4ab",
   "textOnMedia": "#ffffff",
   "accent": "#3e76a8",
   "accentHover": "#346793",
@@ -156,9 +156,9 @@ var themes = /* @__PURE__ */ Object.freeze({ dark: /* @__PURE__ */ Object.freeze
   "accent2": "#3e76a8",
   "onAccent": "#ffffff",
   "ring": "#3e76a8",
-  "brandGradientFrom": "#121a21",
-  "brandGradientVia": "#0f1114",
-  "brandGradientTo": "#0c0c0e",
+  "brandGradientFrom": "#151b18",
+  "brandGradientVia": "#151b18",
+  "brandGradientTo": "#151b18",
   "success": "#10b77f",
   "successText": "#36d399",
   "successSoft": "rgba(16,183,127,0.14)",
@@ -173,25 +173,31 @@ var themes = /* @__PURE__ */ Object.freeze({ dark: /* @__PURE__ */ Object.freeze
   "scrim": "rgba(0,0,0,0.6)",
   "scrimStrong": "rgba(0,0,0,0.8)",
   "overlay": "rgba(0,0,0,0.7)",
-  "surfaceSheen": "rgba(255,255,255,0.045)",
+  "paperRuleMajor": "rgba(217,232,222,0.09)",
+  "paperRuleMinor": "rgba(217,232,222,0.045)",
+  "paperRuleMargin": "#e08071",
+  "paperTag": "#2d3932",
+  "paperTagEdge": "#586a5f",
+  "paperTagInk": "#e9eee7",
+  "surfaceSheen": "rgba(255,255,255,0)",
   "fillShade": "rgba(0,0,0,0.12)",
-  "edgeLight": "rgba(255,255,255,0.07)",
+  "edgeLight": "rgba(255,255,255,0)",
   "edgeOnFill": "rgba(255,255,255,0.22)",
   "edgeWell": "rgba(4,4,7,0.5)",
-  "glassBg": "rgba(29,29,32,0.88)",
+  "glassBg": "#191f1c",
   "glassBorder": "rgba(255,255,255,0.1)"
 }), light: /* @__PURE__ */ Object.freeze({
-  "surface0": "#fafafa",
-  "surface1": "#ffffff",
-  "surface2": "#f1f1f3",
-  "surface3": "#e4e4e7",
-  "media": "#e9e9ec",
-  "borderSubtle": "rgba(0,0,0,0.06)",
-  "borderDefault": "rgba(0,0,0,0.1)",
-  "borderStrong": "rgba(0,0,0,0.16)",
-  "textPrimary": "#18181b",
-  "textSecondary": "#56565d",
-  "textMuted": "#64646d",
+  "surface0": "#f4f6f3",
+  "surface1": "#fbfcfb",
+  "surface2": "#f0f3ef",
+  "surface3": "#dfe3de",
+  "media": "#e5e8e3",
+  "borderSubtle": "rgba(31,59,91,0.1)",
+  "borderDefault": "rgba(31,59,91,0.17)",
+  "borderStrong": "rgba(31,59,91,0.28)",
+  "textPrimary": "#1d3654",
+  "textSecondary": "#405064",
+  "textMuted": "#4f5b69",
   "textOnMedia": "#ffffff",
   "accent": "#2a5f8d",
   "accentHover": "#1f4d75",
@@ -200,9 +206,9 @@ var themes = /* @__PURE__ */ Object.freeze({ dark: /* @__PURE__ */ Object.freeze
   "accent2": "#2a5f8d",
   "onAccent": "#ffffff",
   "ring": "#2a5f8d",
-  "brandGradientFrom": "#e7eef4",
-  "brandGradientVia": "#f5f7fa",
-  "brandGradientTo": "#fafafa",
+  "brandGradientFrom": "#f4f6f3",
+  "brandGradientVia": "#f4f6f3",
+  "brandGradientTo": "#f4f6f3",
   "success": "#10b77f",
   "successText": "#0a714e",
   "successSoft": "rgba(16,183,127,0.1)",
@@ -217,12 +223,18 @@ var themes = /* @__PURE__ */ Object.freeze({ dark: /* @__PURE__ */ Object.freeze
   "scrim": "rgba(0,0,0,0.6)",
   "scrimStrong": "rgba(0,0,0,0.8)",
   "overlay": "rgba(0,0,0,0.7)",
-  "surfaceSheen": "rgba(255,255,255,0.7)",
+  "paperRuleMajor": "rgba(69,109,161,0.24)",
+  "paperRuleMinor": "rgba(69,109,161,0.1)",
+  "paperRuleMargin": "#a53127",
+  "paperTag": "#eadfc2",
+  "paperTagEdge": "#b4a274",
+  "paperTagInk": "#282620",
+  "surfaceSheen": "rgba(255,255,255,0)",
   "fillShade": "rgba(0,0,0,0.12)",
-  "edgeLight": "rgba(255,255,255,0.9)",
+  "edgeLight": "rgba(255,255,255,0)",
   "edgeOnFill": "rgba(255,255,255,0.22)",
   "edgeWell": "rgba(48,52,80,0.08)",
-  "glassBg": "rgba(255,255,255,0.88)",
+  "glassBg": "#fbfcfb",
   "glassBorder": "rgba(0,0,0,0.08)"
 }) });
 var brands = /* @__PURE__ */ Object.freeze({
@@ -237,9 +249,9 @@ var brands = /* @__PURE__ */ Object.freeze({
       "ring": "#3e76a8",
       "info": "#3e76a8",
       "infoText": "#8ebde1",
-      "brandGradientFrom": "#121a21",
-      "brandGradientVia": "#0f1114",
-      "brandGradientTo": "#0c0c0e"
+      "brandGradientFrom": "#151b18",
+      "brandGradientVia": "#151b18",
+      "brandGradientTo": "#151b18"
     },
     "light": {
       "accent": "#2a5f8d",
@@ -251,9 +263,9 @@ var brands = /* @__PURE__ */ Object.freeze({
       "ring": "#2a5f8d",
       "info": "#2a5f8d",
       "infoText": "#275782",
-      "brandGradientFrom": "#e7eef4",
-      "brandGradientVia": "#f5f7fa",
-      "brandGradientTo": "#fafafa"
+      "brandGradientFrom": "#f4f6f3",
+      "brandGradientVia": "#f4f6f3",
+      "brandGradientTo": "#f4f6f3"
     }
   },
   "orazaka": {
@@ -267,9 +279,9 @@ var brands = /* @__PURE__ */ Object.freeze({
       "ring": "#f67e23",
       "info": "#5e99c9",
       "infoText": "#8ebde1",
-      "brandGradientFrom": "#28170b",
-      "brandGradientVia": "#17130c",
-      "brandGradientTo": "#0c0c0e"
+      "brandGradientFrom": "#151b18",
+      "brandGradientVia": "#151b18",
+      "brandGradientTo": "#151b18"
     },
     "light": {
       "accent": "#b45309",
@@ -281,9 +293,9 @@ var brands = /* @__PURE__ */ Object.freeze({
       "ring": "#b45309",
       "info": "#2a5f8d",
       "infoText": "#275782",
-      "brandGradientFrom": "#ffebd6",
-      "brandGradientVia": "#fdf7ed",
-      "brandGradientTo": "#fafafa"
+      "brandGradientFrom": "#f4f6f3",
+      "brandGradientVia": "#f4f6f3",
+      "brandGradientTo": "#f4f6f3"
     }
   },
   "orochia": {
@@ -297,9 +309,9 @@ var brands = /* @__PURE__ */ Object.freeze({
       "ring": "#a78bfa",
       "info": "#7c3aed",
       "infoText": "#a78bfa",
-      "brandGradientFrom": "#1a0e2a",
-      "brandGradientVia": "#1c0d17",
-      "brandGradientTo": "#0c0c0e"
+      "brandGradientFrom": "#151b18",
+      "brandGradientVia": "#151b18",
+      "brandGradientTo": "#151b18"
     },
     "light": {
       "accent": "#7c3aed",
@@ -311,9 +323,9 @@ var brands = /* @__PURE__ */ Object.freeze({
       "ring": "#7c3aed",
       "info": "#7c3aed",
       "infoText": "#6d28d9",
-      "brandGradientFrom": "#efe7fe",
-      "brandGradientVia": "#fdedf5",
-      "brandGradientTo": "#fafafa"
+      "brandGradientFrom": "#f4f6f3",
+      "brandGradientVia": "#f4f6f3",
+      "brandGradientTo": "#f4f6f3"
     }
   },
   "yasakia": {
@@ -327,9 +339,9 @@ var brands = /* @__PURE__ */ Object.freeze({
       "ring": "#24dbc9",
       "info": "#5e99c9",
       "infoText": "#8ebde1",
-      "brandGradientFrom": "#0a241e",
-      "brandGradientVia": "#0c1818",
-      "brandGradientTo": "#0c0c0e"
+      "brandGradientFrom": "#151b18",
+      "brandGradientVia": "#151b18",
+      "brandGradientTo": "#151b18"
     },
     "light": {
       "accent": "#097169",
@@ -341,9 +353,9 @@ var brands = /* @__PURE__ */ Object.freeze({
       "ring": "#097169",
       "info": "#2a5f8d",
       "infoText": "#275782",
-      "brandGradientFrom": "#e1faf1",
-      "brandGradientVia": "#e9fbfa",
-      "brandGradientTo": "#fafafa"
+      "brandGradientFrom": "#f4f6f3",
+      "brandGradientVia": "#f4f6f3",
+      "brandGradientTo": "#f4f6f3"
     }
   },
   "yororis": {
@@ -357,9 +369,9 @@ var brands = /* @__PURE__ */ Object.freeze({
       "ring": "#98b587",
       "info": "#5e99c9",
       "infoText": "#8ebde1",
-      "brandGradientFrom": "#1c1812",
-      "brandGradientVia": "#11140f",
-      "brandGradientTo": "#0c0c0e"
+      "brandGradientFrom": "#151b18",
+      "brandGradientVia": "#151b18",
+      "brandGradientTo": "#151b18"
     },
     "light": {
       "accent": "#456237",
@@ -371,9 +383,9 @@ var brands = /* @__PURE__ */ Object.freeze({
       "ring": "#456237",
       "info": "#2a5f8d",
       "infoText": "#275782",
-      "brandGradientFrom": "#f5efe5",
-      "brandGradientVia": "#f1f6ee",
-      "brandGradientTo": "#fafafa"
+      "brandGradientFrom": "#f4f6f3",
+      "brandGradientVia": "#f4f6f3",
+      "brandGradientTo": "#f4f6f3"
     }
   },
   "yomizaka": {
@@ -387,9 +399,9 @@ var brands = /* @__PURE__ */ Object.freeze({
       "ring": "#8888f2",
       "info": "#5e99c9",
       "infoText": "#8ebde1",
-      "brandGradientFrom": "#121321",
-      "brandGradientVia": "#111019",
-      "brandGradientTo": "#0c0c0e"
+      "brandGradientFrom": "#151b18",
+      "brandGradientVia": "#151b18",
+      "brandGradientTo": "#151b18"
     },
     "light": {
       "accent": "#3c38b2",
@@ -401,9 +413,9 @@ var brands = /* @__PURE__ */ Object.freeze({
       "ring": "#3c38b2",
       "info": "#2a5f8d",
       "infoText": "#275782",
-      "brandGradientFrom": "#ebecfa",
-      "brandGradientVia": "#f0f0fa",
-      "brandGradientTo": "#fafafa"
+      "brandGradientFrom": "#f4f6f3",
+      "brandGradientVia": "#f4f6f3",
+      "brandGradientTo": "#f4f6f3"
     }
   },
   "kachizaka": {
@@ -417,9 +429,9 @@ var brands = /* @__PURE__ */ Object.freeze({
       "ring": "#fbcf23",
       "info": "#5e99c9",
       "infoText": "#8ebde1",
-      "brandGradientFrom": "#101628",
-      "brandGradientVia": "#0f111a",
-      "brandGradientTo": "#0c0c0e"
+      "brandGradientFrom": "#151b18",
+      "brandGradientVia": "#151b18",
+      "brandGradientTo": "#151b18"
     },
     "light": {
       "accent": "#fac905",
@@ -431,9 +443,9 @@ var brands = /* @__PURE__ */ Object.freeze({
       "ring": "#1743d3",
       "info": "#2a5f8d",
       "infoText": "#275782",
-      "brandGradientFrom": "#e8edfc",
-      "brandGradientVia": "#fcf8e8",
-      "brandGradientTo": "#fafafa"
+      "brandGradientFrom": "#f4f6f3",
+      "brandGradientVia": "#f4f6f3",
+      "brandGradientTo": "#f4f6f3"
     }
   },
   "akinaza": {
@@ -447,9 +459,9 @@ var brands = /* @__PURE__ */ Object.freeze({
       "ring": "#65c374",
       "info": "#5e99c9",
       "infoText": "#8ebde1",
-      "brandGradientFrom": "#111d15",
-      "brandGradientVia": "#181410",
-      "brandGradientTo": "#0c0c0e"
+      "brandGradientFrom": "#151b18",
+      "brandGradientVia": "#151b18",
+      "brandGradientTo": "#151b18"
     },
     "light": {
       "accent": "#21692f",
@@ -461,9 +473,9 @@ var brands = /* @__PURE__ */ Object.freeze({
       "ring": "#21692f",
       "info": "#2a5f8d",
       "infoText": "#275782",
-      "brandGradientFrom": "#e9f7eb",
-      "brandGradientVia": "#faf1eb",
-      "brandGradientTo": "#fafafa"
+      "brandGradientFrom": "#f4f6f3",
+      "brandGradientVia": "#f4f6f3",
+      "brandGradientTo": "#f4f6f3"
     }
   }
 });
@@ -618,7 +630,7 @@ var map = tv({
     fallback: "absolute inset-0",
     controls: "absolute right-3 top-3 z-10 flex flex-col overflow-hidden rounded-xl border border-border-default bg-surface-1 shadow-floating",
     control: "inline-flex h-10 w-10 items-center justify-center text-lg font-semibold text-fg-secondary transition-colors hover:bg-surface-3 hover:text-fg focus-visible:outline-hidden focus-visible:focus-ring-inset disabled:opacity-40 [&+&]:border-t [&+&]:border-border-subtle",
-    attribution: "absolute bottom-1.5 right-1.5 z-10 rounded-md bg-surface-1/85 px-1.5 py-0.5 text-[10px] text-fg-secondary backdrop-blur-sm [&_a]:underline-offset-2 hover:[&_a]:underline",
+    attribution: "absolute bottom-1.5 right-1.5 z-10 rounded-md bg-surface-1 px-1.5 py-0.5 text-[10px] text-fg-secondary [&_a]:underline-offset-2 hover:[&_a]:underline",
     places: "sr-only",
     marker: "group relative flex -translate-y-1/2 cursor-pointer items-center justify-center rounded-full border-2 border-on-accent bg-accent shadow-floating outline-hidden transition-transform hover:scale-110 focus-visible:focus-ring motion-reduce:transition-none motion-reduce:hover:scale-100 data-[selected]:scale-125",
     markerLabel: "pointer-events-none absolute bottom-full mb-2 whitespace-nowrap rounded-lg border border-border-default bg-surface-1 px-2 py-1 text-xs font-semibold text-fg shadow-floating"