@rimelight/ui 0.0.32 → 0.0.34

package/src/presets/index.ts

@@ -1,537 +1,683 @@
-import { dirname, join } from "node:path"
-import { fileURLToPath } from "node:url"
-import {
-  definePreset,
-  presetTypography,
-  presetWind4,
-  presetIcons,
-  transformerDirectives,
-  transformerVariantGroup
-} from "unocss"
-import { defaultColorScales } from "./defaults"
-
-const __dirname = dirname(fileURLToPath(import.meta.url))
-export const uiSrcGlob = join(__dirname, "../**/*.{js,ts,jsx,tsx,vue,svelte,astro}")
-export const uiFilesystemGlob = join(__dirname, "../**/*")
-
-type ColorShades = Record<string, string>
-type ColorModeShades = { light?: ColorShades; dark?: ColorShades; flat?: ColorShades }
-export type ColorConfigValue = ColorShades | ColorModeShades
-
-function generateLightShade(shade: string, value: string): string {
-  const num = Number(shade)
-  if (isNaN(num)) return value
-  const mixPct = Math.min(60, ((950 - num) / 950) * 60)
-  return `color-mix(in oklch, ${value}, white ${mixPct.toFixed(0)}%)`
-}
-
-function generateDarkShade(shade: string, value: string): string {
-  const num = Number(shade)
-  if (isNaN(num)) return value
-  const mixPct = Math.min(60, ((num - 50) / 900) * 60)
-  return `color-mix(in oklch, ${value}, black ${mixPct.toFixed(0)}%)`
-}
-
-function resolveColorModes(entry: ColorConfigValue, autogenerate?: boolean): { light: Record<string, string>; dark: Record<string, string>; flat: Record<string, string> } {
-  const raw = entry as Record<string, unknown>
-
-  const modeLight = typeof raw.light === "object" && raw.light !== null ? raw.light as ColorShades : {}
-  const modeDark = typeof raw.dark === "object" && raw.dark !== null ? raw.dark as ColorShades : {}
-  const modeFlat = typeof raw.flat === "object" && raw.flat !== null ? raw.flat as ColorShades : {}
-
-  const modeKeys = new Set(["light", "dark", "flat"])
-  const flatShades: ColorShades = {}
-  for (const [k, v] of Object.entries(raw)) {
-    if (!modeKeys.has(k) && typeof v === "string") {
-      flatShades[k] = v
-    }
-  }
-
-  const allShades = [...new Set([
-    ...Object.keys(modeLight),
-    ...Object.keys(modeDark),
-    ...Object.keys(modeFlat),
-    ...Object.keys(flatShades)
-  ])]
-
-  if (autogenerate) {
-    if (Object.keys(modeLight).length === 0) {
-      for (const shade of allShades) {
-        const value = flatShades[shade] ?? modeFlat[shade] ?? modeDark[shade]
-        if (value) modeLight[shade] = generateLightShade(shade, value)
-      }
-    }
-    if (Object.keys(modeDark).length === 0) {
-      for (const shade of allShades) {
-        const value = flatShades[shade] ?? modeFlat[shade] ?? modeLight[shade]
-        if (value) modeDark[shade] = generateDarkShade(shade, value)
-      }
-    }
-  }
-
-  const light: ColorShades = {}
-  const dark: ColorShades = {}
-  const flat: ColorShades = {}
-
-  for (const shade of allShades) {
-    const lv = modeLight[shade] ?? flatShades[shade] ?? modeFlat[shade] ?? modeDark[shade]
-    if (lv !== undefined) light[shade] = lv
-
-    const dv = modeDark[shade] ?? flatShades[shade] ?? modeFlat[shade] ?? modeLight[shade]
-    if (dv !== undefined) dark[shade] = dv
-
-    const fv = modeFlat[shade] ?? flatShades[shade] ?? modeLight[shade] ?? modeDark[shade]
-    if (fv !== undefined) flat[shade] = fv
-  }
-
-  return { light, dark, flat }
-}
-
-const createScale = (colorName: string, shadeKeys: string[]) => ({
-  "DEFAULT": `var(--${colorName})`,
-  "foreground": `var(--${colorName}-foreground)`,
-  "accent": `var(--${colorName}-accent)`,
-  ...Object.fromEntries(shadeKeys.flatMap((shade) => [
-    [shade, `var(--color-${colorName}-${shade})`],
-    [`${shade}-f`, `var(--color-${colorName}-${shade}-f)`],
-    [`${shade}-l`, `var(--color-${colorName}-${shade}-l)`],
-    [`${shade}-d`, `var(--color-${colorName}-${shade}-d)`]
-  ]))
-})
-
-export interface RimelightPresetOptions {
-  colors?: Record<string, ColorConfigValue>
-  autogenerateColorModes?: boolean
-}
-
-export default definePreset((options?: RimelightPresetOptions) => {
-  const userColors = options?.colors ?? {}
-  const autoGen = options?.autogenerateColorModes ?? true
-  const coreColors = [
-    "primary",
-    "secondary",
-    "info",
-    "success",
-    "warning",
-    "error",
-    "commentary",
-    "ideation",
-    "source",
-    "neutral"
-  ]
-  const mergedColorScales = { ...defaultColorScales, ...userColors }
-  const allColors = [...new Set([...coreColors, ...Object.keys(userColors)])]
-
-  const resolvedColors = Object.fromEntries(
-    Object.entries(mergedColorScales).map(([name, entry]) => [name, resolveColorModes(entry, autoGen)])
-  )
-
-  const safelist = allColors.flatMap((color) => [
-    `rl-color-${color}`
-  ])
-
-  return {
-    name: "rimelight-ui",
-    safelist,
-    presets: [
-      presetWind4({ preflights: { reset: false } }),
-      presetTypography({
-        cssExtend: {
-          "h1,h2,h3,h4,h5,h6": {
-            "font-family": "var(--font-sans), system-ui, sans-serif"
-          },
-          "p,li,blockquote,code": {
-            "font-family": "var(--font-sans), system-ui, sans-serif"
-          },
-          "pre,code": {
-            "font-family": "var(--font-mono), monospace"
-          }
-        }
-      }),
-      presetIcons({
-        extraProperties: {
-          "display": "inline-block",
-          "vertical-align": "middle"
-        }
-      })
-    ],
-    transformers: [transformerDirectives(), transformerVariantGroup()],
-
-    outputToCssLayers: true,
-    layers: {
-      theme: 1,
-      preflights: 2,
-      shortcuts: 3,
-      default: 4
-    },
-
-    content: {
-      pipeline: {
-        include: [
-          /\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
-          "src/**/*.{js,ts,jsx,tsx,vue,svelte,astro}",
-          uiSrcGlob,
-          "../ui/src/**/*.{js,ts,jsx,tsx,vue,svelte,astro}"
-        ]
-      },
-      filesystem: [uiFilesystemGlob, "../ui/src/**/*", "src/components/**/*", "src/pages/**/*"]
-    },
-
-    shortcuts: {
-      "container": "mx-auto w-full max-w-90rem px-md",
-      "sr-only":
-        "absolute w-px h-px p-0 m-0 overflow-hidden clip-rect-1-1-1-1 whitespace-nowrap border-0"
-    },
-    rules: [
-      [
-        /^clip-rect-(\d+)-(\d+)-(\d+)-(\d+)$/,
-        ([, t, r, b, l]) => ({ clip: `rect(${t}px, ${r}px, ${b}px, ${l}px)` })
-      ],
-      [
-        /^rl-color-(.+)$/,
-        ([, color]) => ({
-          "--rl-bg": `var(--color-${color}-500)`,
-          "--rl-bg-hover": `var(--color-${color}-600)`,
-          "--rl-text": `var(--color-${color}-600)`,
-          "--rl-ring": `var(--color-${color}-500)`,
-          "--rl-border": `var(--color-${color}-500)`,
-          "--rl-bg-f": `var(--color-${color}-500-f)`,
-          "--rl-bg-hover-f": `var(--color-${color}-600-f)`,
-          "--rl-text-f": `var(--color-${color}-600-f)`,
-          "--rl-ring-f": `var(--color-${color}-500-f)`,
-          "--rl-border-f": `var(--color-${color}-500-f)`,
-          "--rl-bg-l": `var(--color-${color}-500-l)`,
-          "--rl-bg-hover-l": `var(--color-${color}-600-l)`,
-          "--rl-text-l": `var(--color-${color}-600-l)`,
-          "--rl-ring-l": `var(--color-${color}-500-l)`,
-          "--rl-border-l": `var(--color-${color}-500-l)`,
-          "--rl-bg-d": `var(--color-${color}-500-d)`,
-          "--rl-bg-hover-d": `var(--color-${color}-600-d)`,
-          "--rl-text-d": `var(--color-${color}-600-d)`,
-          "--rl-ring-d": `var(--color-${color}-500-d)`,
-          "--rl-border-d": `var(--color-${color}-500-d)`,
-        })
-      ],
-      ["rl-flat", {
-        "--rl-bg": "var(--rl-bg-f)",
-        "--rl-bg-hover": "var(--rl-bg-hover-f)",
-        "--rl-text": "var(--rl-text-f)",
-        "--rl-ring": "var(--rl-ring-f)",
-        "--rl-border": "var(--rl-border-f)",
-      }],
-      ["rl-light", {
-        "--rl-bg": "var(--rl-bg-l, var(--rl-bg-f))",
-        "--rl-bg-hover": "var(--rl-bg-hover-l, var(--rl-bg-hover-f))",
-        "--rl-text": "var(--rl-text-l, var(--rl-text-f))",
-        "--rl-ring": "var(--rl-ring-l, var(--rl-ring-f))",
-        "--rl-border": "var(--rl-border-l, var(--rl-border-f))",
-      }],
-      ["rl-dark", {
-        "--rl-bg": "var(--rl-bg-d, var(--rl-bg-f))",
-        "--rl-bg-hover": "var(--rl-bg-hover-d, var(--rl-bg-hover-f))",
-        "--rl-text": "var(--rl-text-d, var(--rl-text-f))",
-        "--rl-ring": "var(--rl-ring-d, var(--rl-ring-f))",
-        "--rl-border": "var(--rl-border-d, var(--rl-border-f))",
-      }]
-    ],
-
-    theme: {
-      spacing: {
-        "6xs": "0.125rem",
-        "5xs": "0.25rem",
-        "4xs": "0.375rem",
-        "3xs": "0.5rem",
-        "2xs": "0.625rem",
-        "xs": "0.75rem",
-        "sm": "0.875rem",
-        "md": "1rem",
-        "lg": "1.25rem",
-        "xl": "1.5rem",
-        "2xl": "2rem",
-        "3xl": "3rem",
-        "4xl": "4rem",
-        "5xl": "6rem",
-        "6xl": "8rem"
-      },
-      colors: {
-        "background": "var(--background)",
-        "foreground": "var(--foreground)",
-        "card": {
-          DEFAULT: "var(--card)",
-          foreground: "var(--card-foreground)"
-        },
-        "popover": {
-          DEFAULT: "var(--popover)",
-          foreground: "var(--popover-foreground)"
-        },
-        ...Object.fromEntries(allColors.map((color) => {
-          const m = resolvedColors[color]!
-          const shadeKeys = [...new Set([...Object.keys(m.light), ...Object.keys(m.dark), ...Object.keys(m.flat)])]
-          return [color, createScale(color, shadeKeys)]
-        })),
-        "muted": {
-          DEFAULT: "var(--muted)",
-          foreground: "var(--muted-foreground)"
-        },
-        "accent": {
-          DEFAULT: "var(--accent)",
-          foreground: "var(--accent-foreground)"
-        },
-        "border": "var(--border)",
-        "input": "var(--input)",
-        "outline": "var(--outline)",
-        "ring": "var(--ring)",
-        "destructive": {
-          DEFAULT: "var(--destructive)",
-          subtle: "var(--color-destructive-subtle)"
-        },
-        "sidebar": {
-          DEFAULT: "var(--sidebar)",
-          foreground: "var(--sidebar-foreground)",
-          primary: {
-            DEFAULT: "var(--sidebar-primary)",
-            foreground: "var(--sidebar-primary-foreground)"
-          },
-          accent: {
-            DEFAULT: "var(--sidebar-accent)",
-            foreground: "var(--sidebar-accent-foreground)"
-          },
-          border: "var(--sidebar-border)",
-          ring: "var(--sidebar-ring)"
-        },
-        "chart": {
-          "1": "var(--chart-1)",
-          "2": "var(--chart-2)",
-          "3": "var(--chart-3)",
-          "4": "var(--chart-4)",
-          "5": "var(--chart-5)"
-        },
-        "hover": "var(--color-hover)",
-        "surface": "var(--color-surface)",
-        "muted-strong": "var(--color-muted-strong)",
-        "foreground-secondary": "var(--color-foreground-secondary)",
-        "foreground-tertiary": "var(--color-foreground-tertiary)",
-        "placeholder": "var(--color-placeholder)",
-        "input-border": "var(--color-input-border)",
-        "accent-subtle": "var(--color-accent-subtle)"
-      },
-      radius: {
-        "xs": "calc(var(--radius) - 0.375rem)",
-        "sm": "calc(var(--radius) - 0.25rem)",
-        "md": "calc(var(--radius) - 0.125rem)",
-        "lg": "var(--radius)",
-        "xl": "calc(var(--radius) + 0.25rem)",
-        "2xl": "calc(var(--radius) + 0.5rem)",
-        "3xl": "calc(var(--radius) + 1rem)"
-      },
-      animation: {
-        keyframes: {
-          "accordion-down":
-            "{ from { height: 0; } to { height: var(--starwind-accordion-content-height); } }",
-          "accordion-up":
-            "{ from { height: var(--starwind-accordion-content-height); } to { height: 0; } }",
-          "marquee": "{ from { transform: translateX(0); } to { transform: translateX(-100%); } }"
-        },
-        durations: {
-          "accordion-down": "0.2s",
-          "accordion-up": "0.2s",
-          "marquee": "30s"
-        },
-        timingFns: {
-          "accordion-down": "ease-out",
-          "accordion-up": "ease-out",
-          "marquee": "linear"
-        },
-        counts: { marquee: "infinite" }
-      }
-    },
-
-    preflights: [
-      {
-        getCSS: () => {
-          const lightLines = Object.entries(resolvedColors).flatMap(([color, modes]) =>
-              Object.entries(modes.light).map(([shade, value]) =>
-                `            --color-${color}-${shade}: ${value};`
-              )
-            ).join("\n")
-
-          const flatLines = Object.entries(resolvedColors).flatMap(([color, modes]) => {
-            const u = modes.flat
-            return Object.entries(u).map(([shade, value]) =>
-              `            --color-${color}-${shade}-f: ${value};`
-            )
-          }).join("\n")
-
-          const lightPinnedLines = Object.entries(resolvedColors).flatMap(([color, modes]) =>
-              Object.entries(modes.light)
-                .filter(([shade, value]) => value !== modes.flat[shade])
-                .map(([shade, value]) =>
-                  `            --color-${color}-${shade}-l: ${value};`
-                )
-            ).join("\n")
-
-          const darkPinnedLines = Object.entries(resolvedColors).flatMap(([color, modes]) =>
-              Object.entries(modes.dark)
-                .filter(([shade, value]) => value !== modes.flat[shade])
-                .map(([shade, value]) =>
-                  `            --color-${color}-${shade}-d: ${value};`
-                )
-            ).join("\n")
-
-          const darkLines = Object.entries(resolvedColors).flatMap(([color, modes]) =>
-              Object.entries(modes.dark).filter(([shade, value]) =>
-                modes.light[shade] !== value
-              ).map(([shade, value]) =>
-                `            --color-${color}-${shade}: ${value};`
-              )
-            ).join("\n")
-
-          return `
-        :root {
-          --background: #ffffff;
-          --foreground: #030712;
-          --card: #ffffff;
-          --card-foreground: #030712;
-          --popover: #ffffff;
-          --popover-foreground: #030712;
-          --primary: #f97316;
-          --primary-foreground: #f9fafb;
-          --primary-accent: #ea580c;
-          --secondary: #8b5cf6;
-          --secondary-foreground: #f9fafb;
-          --secondary-accent: #7c3aed;
-          --muted: #f3f4f6;
-          --muted-foreground: #4b5563;
-          --accent: #f3f4f6;
-          --accent-foreground: #111827;
-          --info: #3b82f6;
-          --info-foreground: #ffffff;
-          --info-accent: #2563eb;
-          --success: #22c55e;
-          --success-foreground: #ffffff;
-          --success-accent: #16a34a;
-          --warning: #f59e0b;
-          --warning-foreground: #000000;
-          --warning-accent: #d97706;
-          --error: #ef4444;
-          --error-foreground: #f9fafb;
-          --error-accent: #dc2626;
-          --commentary: #ec4899;
-          --commentary-foreground: #f9fafb;
-          --commentary-accent: #db2777;
-          --ideation: #8b5cf6;
-          --ideation-foreground: #f9fafb;
-          --ideation-accent: #7c3aed;
-          --source: #38bdf8;
-          --source-foreground: #0f172a;
-          --source-accent: #0284c7;
-          --border: #e5e7eb;
-          --input: #e5e7eb;
-          --outline: #9ca3af;
-          --ring: #9ca3af;
-          --radius: 0.625rem;
-          --sidebar: #f9fafb;
-          --sidebar-foreground: #030712;
-          --sidebar-primary: #1d4ed8;
-          --sidebar-primary-foreground: #f9fafb;
-          --sidebar-accent: #f3f4f6;
-          --sidebar-accent-foreground: #111827;
-          --sidebar-border: #e5e7eb;
-          --sidebar-ring: #9ca3af;
-          --chart-1: #3b82f6;
-          --chart-2: #6366f1;
-          --chart-3: #8b5cf6;
-          --chart-4: #a855f7;
-          --chart-5: #ec4899;
-          --destructive: #ef4444;
-          --color-surface: #ffffff;
-          --color-muted-strong: #e5e7eb;
-          --color-foreground-secondary: #4b5563;
-          --color-foreground-tertiary: #6b7280;
-          --color-placeholder: #9ca3af;
-          --color-input-border: #d1d5db;
-          --color-hover: #f3f4f6;
-          --color-destructive-subtle: #fef2f2;
-          --color-accent-subtle: #eff6ff;
-          --font-sans: "Noto Sans", sans-serif;
-          --font-serif: "Noto Serif", serif;
-          --font-mono: "Noto Sans Mono", monospace;
-${lightLines}
-${flatLines}
-${lightPinnedLines}
-${darkPinnedLines}
-        }
-
-        .dark {
-          --background: #030712;
-          --foreground: #f9fafb;
-          --card: #111827;
-          --card-foreground: #f9fafb;
-          --popover: #1f2937;
-          --popover-foreground: #f9fafb;
-          --primary: #f97316;
-          --primary-foreground: #f9fafb;
-          --primary-accent: #fb923c;
-          --secondary: #8b5cf6;
-          --secondary-foreground: #f9fafb;
-          --secondary-accent: #a78bfa;
-          --muted: #1f2937;
-          --muted-foreground: #9ca3af;
-          --accent: #374151;
-          --accent-foreground: #f3f4f6;
-          --info: #3b82f6;
-          --info-foreground: #ffffff;
-          --info-accent: #60a5fa;
-          --success: #22c55e;
-          --success-foreground: #ffffff;
-          --success-accent: #4ade80;
-          --warning: #f59e0b;
-          --warning-foreground: #000000;
-          --warning-accent: #fbbf24;
-          --error: #ef4444;
-          --error-foreground: #f9fafb;
-          --error-accent: #f87171;
-          --commentary: #f472b6;
-          --commentary-foreground: #0f172a;
-          --commentary-accent: #f9a8d4;
-          --ideation: #a78bfa;
-          --ideation-foreground: #0f172a;
-          --ideation-accent: #c4b5fd;
-          --source: #7dd3fc;
-          --source-foreground: #0f172a;
-          --source-accent: #bae6fd;
-          --border: rgba(249, 250, 251, 0.1);
-          --input: rgba(249, 250, 251, 0.15);
-          --outline: #6b7280;
-          --ring: #6b7280;
-          --sidebar: #111827;
-          --sidebar-foreground: #f9fafb;
-          --sidebar-primary: #1d4ed8;
-          --sidebar-primary-foreground: #f9fafb;
-          --sidebar-accent: #1f2937;
-          --sidebar-accent-foreground: #f3f4f6;
-          --sidebar-border: #1f2937;
-          --sidebar-ring: #6b7280;
-          --chart-1: #60a5fa;
-          --chart-2: #818cf8;
-          --chart-3: #a78bfa;
-          --chart-4: #c084fc;
-          --chart-5: #f472b6;
-          --destructive: #f87171;
-          --color-surface: #1f2937;
-          --color-muted-strong: #374151;
-          --color-foreground-secondary: #d1d5db;
-          --color-foreground-tertiary: #9ca3af;
-          --color-placeholder: #6b7280;
-          --color-input-border: #4b5563;
-          --color-hover: #374151;
-          --color-destructive-subtle: #451a1a;
-          --color-accent-subtle: #1e293b;
-${darkLines}
-        }
-        `
-        }
-      }
-    ],
-  }
-})
+import { dirname, join } from "node:path"
+import { fileURLToPath } from "node:url"
+import {
+  definePreset,
+  presetTypography,
+  presetWind4,
+  presetIcons,
+  transformerDirectives,
+  transformerVariantGroup
+} from "unocss"
+import { defaultColorScales, defaultColors } from "./defaults"
+
+const pathDirname = dirname(fileURLToPath(import.meta.url))
+export const uiSrcGlob = join(pathDirname, "../**/*.{js,ts,jsx,tsx,vue,svelte,astro}")
+export const uiFilesystemGlob = join(pathDirname, "../**/*")
+
+type ColorShades = Record<string, string>
+type ColorModeShades = { light?: ColorShades; dark?: ColorShades; flat?: ColorShades }
+export type ColorConfigValue = ColorShades | ColorModeShades
+
+function generateLightShade(shade: string, value: string): string {
+  const num = Number(shade)
+  if (isNaN(num)) return value
+  const mixPct = Math.min(60, ((950 - num) / 950) * 60)
+  return `color-mix(in oklch, ${value}, white ${mixPct.toFixed(0)}%)`
+}
+
+function generateDarkShade(shade: string, value: string): string {
+  const num = Number(shade)
+  if (isNaN(num)) return value
+  const mixPct = Math.min(60, ((num - 50) / 900) * 60)
+  return `color-mix(in oklch, ${value}, black ${mixPct.toFixed(0)}%)`
+}
+
+function resolveColorModes(
+  entry: ColorConfigValue,
+  autogenerate?: boolean
+): { light: Record<string, string>; dark: Record<string, string>; flat: Record<string, string> } {
+  const raw = entry as Record<string, unknown>
+
+  const modeLight =
+    typeof raw.light === "object" && raw.light !== null
+      ? ({ ...raw.light } as ColorShades)
+      : ({} as ColorShades)
+  const modeDark =
+    typeof raw.dark === "object" && raw.dark !== null
+      ? ({ ...raw.dark } as ColorShades)
+      : ({} as ColorShades)
+  const modeFlat =
+    typeof raw.flat === "object" && raw.flat !== null
+      ? ({ ...raw.flat } as ColorShades)
+      : ({} as ColorShades)
+
+  const modeKeys = new Set(["light", "dark", "flat"])
+  const flatShades: ColorShades = {}
+  for (const [k, v] of Object.entries(raw)) {
+    if (!modeKeys.has(k) && typeof v === "string") {
+      flatShades[k] = v
+    }
+  }
+
+  const allShades = [
+    ...new Set([
+      ...Object.keys(modeLight),
+      ...Object.keys(modeDark),
+      ...Object.keys(modeFlat),
+      ...Object.keys(flatShades)
+    ])
+  ]
+
+  if (autogenerate) {
+    if (Object.keys(modeLight).length === 0) {
+      for (const shade of allShades) {
+        const value = flatShades[shade] ?? modeFlat[shade] ?? modeDark[shade]
+        if (value) modeLight[shade] = generateLightShade(shade, value)
+      }
+    }
+    if (Object.keys(modeDark).length === 0) {
+      for (const shade of allShades) {
+        const value = flatShades[shade] ?? modeFlat[shade] ?? modeLight[shade]
+        if (value) modeDark[shade] = generateDarkShade(shade, value)
+      }
+    }
+  }
+
+  const light: ColorShades = {}
+  const dark: ColorShades = {}
+  const flat: ColorShades = {}
+
+  for (const shade of allShades) {
+    const lv = modeLight[shade] ?? flatShades[shade] ?? modeFlat[shade] ?? modeDark[shade]
+    if (lv !== undefined) light[shade] = lv
+
+    const dv = modeDark[shade] ?? flatShades[shade] ?? modeFlat[shade] ?? modeLight[shade]
+    if (dv !== undefined) dark[shade] = dv
+
+    const fv = modeFlat[shade] ?? flatShades[shade] ?? modeLight[shade] ?? modeDark[shade]
+    if (fv !== undefined) flat[shade] = fv
+  }
+
+  return { light, dark, flat }
+}
+
+const createScale = (colorName: string, shadeKeys: string[]) => ({
+  DEFAULT: `var(--${colorName})`,
+  foreground: `var(--${colorName}-foreground)`,
+  accent: `var(--${colorName}-accent)`,
+  ...Object.fromEntries(
+    shadeKeys.flatMap((shade) => [
+      [shade, `var(--color-${colorName}-${shade})`],
+      [`${shade}-f`, `var(--color-${colorName}-${shade}-f)`],
+      [`${shade}-l`, `var(--color-${colorName}-${shade}-l)`],
+      [`${shade}-d`, `var(--color-${colorName}-${shade}-d)`]
+    ])
+  )
+})
+
+export interface RimelightPresetOptions {
+  colors?: Record<string, ColorConfigValue>
+  autogenerateColorModes?: boolean
+}
+
+export default definePreset((options?: RimelightPresetOptions) => {
+  const userColors = options?.colors ?? {}
+  const autoGen = options?.autogenerateColorModes ?? true
+  const coreColors = [...defaultColors, "neutral"]
+  const mergedColorScales = { ...defaultColorScales, ...userColors }
+  const allColors = [...new Set([...coreColors, ...Object.keys(userColors)])]
+
+  const resolvedColors = Object.fromEntries(
+    Object.entries(mergedColorScales).map(([name, entry]) => [
+      name,
+      resolveColorModes(entry, autoGen)
+    ])
+  )
+
+  const safelist = allColors.flatMap((color) => ["rl-color-" + color])
+
+  return {
+    name: "rimelight-ui",
+    safelist,
+    presets: [
+      presetWind4(),
+      presetTypography({
+        cssExtend: {
+          "h1,h2,h3,h4,h5,h6": {
+            "font-family": "var(--font-sans), system-ui, sans-serif"
+          },
+          "p,li,blockquote,code": {
+            "font-family": "var(--font-sans), system-ui, sans-serif"
+          },
+          "pre,code": {
+            "font-family": "var(--font-mono), monospace"
+          }
+        }
+      }),
+      presetIcons({
+        extraProperties: {
+          "display": "inline-block",
+          "vertical-align": "middle"
+        }
+      })
+    ],
+    transformers: [transformerDirectives(), transformerVariantGroup()],
+
+    outputToCssLayers: true,
+    layers: {
+      theme: 1,
+      preflights: 2,
+      shortcuts: 3,
+      default: 4
+    },
+
+    content: {
+      pipeline: {
+        include: [
+          /\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
+          "src/**/*.{js,ts,jsx,tsx,vue,svelte,astro}",
+          uiSrcGlob,
+          "../ui/src/**/*.{js,ts,jsx,tsx,vue,svelte,astro}"
+        ]
+      },
+      filesystem: [uiFilesystemGlob, "../ui/src/**/*", "src/components/**/*", "src/pages/**/*"]
+    },
+
+    shortcuts: {
+      "container": "mx-auto w-full max-w-90rem px-md",
+      "sr-only":
+        "absolute w-px h-px p-0 m-0 overflow-hidden clip-rect-1-1-1-1 whitespace-nowrap border-0"
+    },
+    rules: [
+      [
+        /^clip-rect-(\d+)-(\d+)-(\d+)-(\d+)$/,
+        ([, t, r, b, l]) => ({ clip: `rect(${t}px, ${r}px, ${b}px, ${l}px)` })
+      ],
+      [
+        /^rl-color-(.+)$/,
+        ([, color]) => ({
+          "--rl-bg": `var(--color-${color}-500)`,
+          "--rl-bg-hover": `var(--color-${color}-600)`,
+          "--rl-text": `var(--color-${color}-600)`,
+          "--rl-ring": `var(--color-${color}-500)`,
+          "--rl-border": `var(--color-${color}-500)`,
+          "--rl-bg-f": `var(--color-${color}-500-f)`,
+          "--rl-bg-hover-f": `var(--color-${color}-600-f)`,
+          "--rl-text-f": `var(--color-${color}-600-f)`,
+          "--rl-ring-f": `var(--color-${color}-500-f)`,
+          "--rl-border-f": `var(--color-${color}-500-f)`,
+          "--rl-bg-l": `var(--color-${color}-500-l)`,
+          "--rl-bg-hover-l": `var(--color-${color}-600-l)`,
+          "--rl-text-l": `var(--color-${color}-600-l)`,
+          "--rl-ring-l": `var(--color-${color}-500-l)`,
+          "--rl-border-l": `var(--color-${color}-500-l)`,
+          "--rl-bg-d": `var(--color-${color}-500-d)`,
+          "--rl-bg-hover-d": `var(--color-${color}-600-d)`,
+          "--rl-text-d": `var(--color-${color}-600-d)`,
+          "--rl-ring-d": `var(--color-${color}-500-d)`,
+          "--rl-border-d": `var(--color-${color}-500-d)`
+        })
+      ],
+      [
+        "rl-flat",
+        {
+          "--rl-bg": "var(--rl-bg-f)",
+          "--rl-bg-hover": "var(--rl-bg-hover-f)",
+          "--rl-text": "var(--rl-text-f)",
+          "--rl-ring": "var(--rl-ring-f)",
+          "--rl-border": "var(--rl-border-f)"
+        }
+      ],
+      [
+        "rl-light",
+        {
+          "--rl-bg": "var(--rl-bg-l, var(--rl-bg-f))",
+          "--rl-bg-hover": "var(--rl-bg-hover-l, var(--rl-bg-hover-f))",
+          "--rl-text": "var(--rl-text-l, var(--rl-text-f))",
+          "--rl-ring": "var(--rl-ring-l, var(--rl-ring-f))",
+          "--rl-border": "var(--rl-border-l, var(--rl-border-f))"
+        }
+      ],
+      [
+        "rl-dark",
+        {
+          "--rl-bg": "var(--rl-bg-d, var(--rl-bg-f))",
+          "--rl-bg-hover": "var(--rl-bg-hover-d, var(--rl-bg-hover-f))",
+          "--rl-text": "var(--rl-text-d, var(--rl-text-f))",
+          "--rl-ring": "var(--rl-ring-d, var(--rl-ring-f))",
+          "--rl-border": "var(--rl-border-d, var(--rl-border-f))"
+        }
+      ],
+      [
+        /^(text)-(default|inverted)(?:\/(\d+))?$/,
+        ([, , name, opacity]) =>
+          opacity
+            ? { color: `color-mix(in srgb, var(--text-color-${name}) ${opacity}%, transparent)` }
+            : { color: `var(--text-color-${name})` }
+      ],
+      [
+        /^(bg)-(default|inverted)(?:\/(\d+))?$/,
+        ([, , name, opacity]) =>
+          opacity
+            ? {
+                "background-color": `color-mix(in srgb, var(--background-color-${name}) ${opacity}%, transparent)`
+              }
+            : { "background-color": `var(--background-color-${name})` }
+      ],
+      [
+        /^(ring)-(default|inverted)(?:\/(\d+))?$/,
+        ([, , name, opacity]) =>
+          opacity
+            ? {
+                "--un-ring-color": `color-mix(in srgb, var(--ring-color-${name}) ${opacity}%, transparent)`
+              }
+            : { "--un-ring-color": `var(--ring-color-${name})` }
+      ],
+      [
+        /^(divide)-(default)(?:\/(\d+))?$/,
+        ([, , name, opacity]) =>
+          opacity
+            ? {
+                "border-color": `color-mix(in srgb, var(--divide-color-${name}) ${opacity}%, transparent)`
+              }
+            : { "border-color": `var(--divide-color-${name})` }
+      ],
+      [
+        /^(border)-(default)(?:\/(\d+))?$/,
+        ([, , name, opacity]) =>
+          opacity
+            ? {
+                "border-color": `color-mix(in srgb, var(--border-color-${name}) ${opacity}%, transparent)`
+              }
+            : { "border-color": `var(--border-color-${name})` }
+      ],
+      [
+        /^(outline)-(inverted)(?:\/(\d+))?$/,
+        ([, , name, opacity]) =>
+          opacity
+            ? {
+                "outline-color": `color-mix(in srgb, var(--ring-color-${name}) ${opacity}%, transparent)`
+              }
+            : { "outline-color": `var(--ring-color-${name})` }
+      ]
+    ],
+
+    theme: {
+      spacing: {
+        "6xs": "0.125rem",
+        "5xs": "0.25rem",
+        "4xs": "0.375rem",
+        "3xs": "0.5rem",
+        "2xs": "0.625rem",
+        "xs": "0.75rem",
+        "sm": "0.875rem",
+        "md": "1rem",
+        "lg": "1.25rem",
+        "xl": "1.5rem",
+        "2xl": "2rem",
+        "3xl": "3rem",
+        "4xl": "4rem",
+        "5xl": "6rem",
+        "6xl": "8rem"
+      },
+      colors: {
+        "background": "var(--background)",
+        "foreground": "var(--foreground)",
+        "card": {
+          DEFAULT: "var(--card)",
+          foreground: "var(--card-foreground)"
+        },
+        "popover": {
+          DEFAULT: "var(--popover)",
+          foreground: "var(--popover-foreground)"
+        },
+        ...Object.fromEntries(
+          allColors.map((color) => {
+            const m = resolvedColors[color]!
+            const shadeKeys = [
+              ...new Set([...Object.keys(m.light), ...Object.keys(m.dark), ...Object.keys(m.flat)])
+            ]
+            return [color, createScale(color, shadeKeys)]
+          })
+        ),
+        "muted": {
+          DEFAULT: "var(--muted)",
+          foreground: "var(--muted-foreground)"
+        },
+        "accent": {
+          DEFAULT: "var(--accent)",
+          foreground: "var(--accent-foreground)"
+        },
+        "border": "var(--border)",
+        "input": "var(--input)",
+        "outline": "var(--outline)",
+        "ring": "var(--ring)",
+        "destructive": {
+          DEFAULT: "var(--destructive)",
+          subtle: "var(--color-destructive-subtle)"
+        },
+        "sidebar": {
+          DEFAULT: "var(--sidebar)",
+          foreground: "var(--sidebar-foreground)",
+          primary: {
+            DEFAULT: "var(--sidebar-primary)",
+            foreground: "var(--sidebar-primary-foreground)"
+          },
+          accent: {
+            DEFAULT: "var(--sidebar-accent)",
+            foreground: "var(--sidebar-accent-foreground)"
+          },
+          border: "var(--sidebar-border)",
+          ring: "var(--sidebar-ring)"
+        },
+        "chart": {
+          "1": "var(--chart-1)",
+          "2": "var(--chart-2)",
+          "3": "var(--chart-3)",
+          "4": "var(--chart-4)",
+          "5": "var(--chart-5)"
+        },
+        "hover": "var(--color-hover)",
+        "surface": "var(--color-surface)",
+        "muted-strong": "var(--color-muted-strong)",
+        "foreground-secondary": "var(--color-foreground-secondary)",
+        "foreground-tertiary": "var(--color-foreground-tertiary)",
+        "placeholder": "var(--color-placeholder)",
+        "input-border": "var(--color-input-border)",
+        "accent-subtle": "var(--color-accent-subtle)",
+        "elevated": "var(--background-color-elevated)",
+        "accented": "var(--ring-color-accented)",
+        "dimmed": "var(--text-color-dimmed)",
+        "toned": "var(--text-color-toned)",
+        "highlighted": "var(--text-color-highlighted)"
+      },
+      radius: {
+        "xs": "calc(var(--radius) - 0.375rem)",
+        "sm": "calc(var(--radius) - 0.25rem)",
+        "md": "calc(var(--radius) - 0.125rem)",
+        "lg": "var(--radius)",
+        "xl": "calc(var(--radius) + 0.25rem)",
+        "2xl": "calc(var(--radius) + 0.5rem)",
+        "3xl": "calc(var(--radius) + 1rem)"
+      },
+      animation: {
+        keyframes: {
+          "accordion-down":
+            "{ from { height: 0; } to { height: var(--starwind-accordion-content-height); } }",
+          "accordion-up":
+            "{ from { height: var(--starwind-accordion-content-height); } to { height: 0; } }",
+          "marquee": "{ from { transform: translateX(0); } to { transform: translateX(-100%); } }"
+        },
+        durations: {
+          "accordion-down": "0.2s",
+          "accordion-up": "0.2s",
+          "marquee": "30s"
+        },
+        timingFns: {
+          "accordion-down": "ease-out",
+          "accordion-up": "ease-out",
+          "marquee": "linear"
+        },
+        counts: { marquee: "infinite" }
+      }
+    },
+
+    preflights: [
+      {
+        getCSS: () => {
+          const lightLines = Object.entries(resolvedColors)
+            .flatMap(([color, modes]) =>
+              Object.entries(modes.light).map(
+                ([shade, value]) => `            --color-${color}-${shade}: ${value};`
+              )
+            )
+            .join("\n")
+
+          const flatLines = Object.entries(resolvedColors)
+            .flatMap(([color, modes]) => {
+              const u = modes.flat
+              return Object.entries(u).map(
+                ([shade, value]) => `            --color-${color}-${shade}-f: ${value};`
+              )
+            })
+            .join("\n")
+
+          const lightPinnedLines = Object.entries(resolvedColors)
+            .flatMap(([color, modes]) =>
+              Object.entries(modes.light)
+                .filter(([shade, value]) => value !== modes.flat[shade])
+                .map(([shade, value]) => `            --color-${color}-${shade}-l: ${value};`)
+            )
+            .join("\n")
+
+          const darkPinnedLines = Object.entries(resolvedColors)
+            .flatMap(([color, modes]) =>
+              Object.entries(modes.dark)
+                .filter(([shade, value]) => value !== modes.flat[shade])
+                .map(([shade, value]) => `            --color-${color}-${shade}-d: ${value};`)
+            )
+            .join("\n")
+
+          const darkLines = Object.entries(resolvedColors)
+            .flatMap(([color, modes]) =>
+              Object.entries(modes.dark)
+                .filter(([shade, value]) => modes.light[shade] !== value)
+                .map(([shade, value]) => `            --color-${color}-${shade}: ${value};`)
+            )
+            .join("\n")
+
+          return `
+        :root {
+          --background: #ffffff;
+          --foreground: #030712;
+          --card: #ffffff;
+          --card-foreground: #030712;
+          --popover: #ffffff;
+          --popover-foreground: #030712;
+          --primary: #0064d7;
+          --primary-foreground: #ffffff;
+          --primary-accent: #0050ac;
+          --secondary: #8b5cf6;
+          --secondary-foreground: #f9fafb;
+          --secondary-accent: #7c3aed;
+          --muted: #f3f4f6;
+          --muted-foreground: #4b5563;
+          --accent: #f3f4f6;
+          --accent-foreground: #111827;
+          --info: #3b82f6;
+          --info-foreground: #ffffff;
+          --info-accent: #2563eb;
+          --success: #22c55e;
+          --success-foreground: #ffffff;
+          --success-accent: #16a34a;
+          --warning: #f59e0b;
+          --warning-foreground: #000000;
+          --warning-accent: #d97706;
+          --error: #ef4444;
+          --error-foreground: #f9fafb;
+          --error-accent: #dc2626;
+          --commentary: #ec4899;
+          --commentary-foreground: #f9fafb;
+          --commentary-accent: #db2777;
+          --ideation: #8b5cf6;
+          --ideation-foreground: #f9fafb;
+          --ideation-accent: #7c3aed;
+          --source: #38bdf8;
+          --source-foreground: #0f172a;
+          --source-accent: #0284c7;
+          --border: #e5e7eb;
+          --input: #e5e7eb;
+          --outline: #9ca3af;
+          --ring: #9ca3af;
+          --radius: 0.625rem;
+          --sidebar: #f9fafb;
+          --sidebar-foreground: #030712;
+          --sidebar-primary: #1d4ed8;
+          --sidebar-primary-foreground: #f9fafb;
+          --sidebar-accent: #f3f4f6;
+          --sidebar-accent-foreground: #111827;
+          --sidebar-border: #e5e7eb;
+          --sidebar-ring: #9ca3af;
+          --chart-1: #3b82f6;
+          --chart-2: #6366f1;
+          --chart-3: #8b5cf6;
+          --chart-4: #a855f7;
+          --chart-5: #ec4899;
+          --destructive: #ef4444;
+          --color-surface: #ffffff;
+          --color-muted-strong: #e5e7eb;
+          --color-foreground-secondary: #4b5563;
+          --color-foreground-tertiary: #6b7280;
+          --color-placeholder: #9ca3af;
+          --color-input-border: #d1d5db;
+          --color-hover: #f3f4f6;
+          --color-destructive-subtle: #fef2f2;
+          --color-accent-subtle: #eff6ff;
+          --font-sans: "Noto Sans", sans-serif;
+          --font-serif: "Noto Serif", serif;
+          --font-mono: "Noto Sans Mono", monospace;
+
+          --ui-header-height: 4rem;
+          --ui-container: 80rem;
+          --text-color-default: var(--color-neutral-700);
+          --text-color-muted: var(--color-neutral-500);
+          --text-color-dimmed: var(--color-neutral-400);
+          --text-color-toned: var(--color-neutral-600);
+          --text-color-highlighted: var(--color-neutral-900);
+          --text-color-inverted: #ffffff;
+          --background-color-default: #ffffff;
+          --background-color-muted: var(--color-neutral-50);
+          --background-color-elevated: var(--color-neutral-100);
+          --background-color-accented: var(--color-neutral-200);
+          --background-color-inverted: var(--color-neutral-900);
+          --border-color-default: var(--color-neutral-200);
+          --border-color-muted: var(--color-neutral-200);
+          --border-color-accented: var(--color-neutral-300);
+          --border-color-inverted: var(--color-neutral-900);
+          --ring-color-default: var(--color-neutral-200);
+          --ring-color-muted: var(--color-neutral-200);
+          --ring-color-accented: var(--color-neutral-300);
+          --ring-color-inverted: var(--color-neutral-900);
+          --divide-color-default: var(--color-neutral-200);
+${lightLines}
+${flatLines}
+${lightPinnedLines}
+${darkPinnedLines}
+
+          /* Shiki / Expressive Code */
+          --shiki-foreground: #e1e4e8;
+          --shiki-background: #1f2428;
+          --shiki-token-keyword: #f97583;
+          --shiki-token-string: #9ecbff;
+          --shiki-token-comment: #6a737d;
+          --shiki-token-function: #b392f0;
+          --shiki-token-constant: #79b8ff;
+          --shiki-token-parameter: #ffab70;
+          --shiki-token-punctuation: #e1e4e8;
+        }
+
+        .dark {
+          --background: #030712;
+          --foreground: #f9fafb;
+          --card: #111827;
+          --card-foreground: #f9fafb;
+          --popover: #1f2937;
+          --popover-foreground: #f9fafb;
+          --primary: #3b82f6;
+          --primary-foreground: #ffffff;
+          --primary-accent: #60a5fa;
+          --secondary: #8b5cf6;
+          --secondary-foreground: #f9fafb;
+          --secondary-accent: #a78bfa;
+          --muted: #1f2937;
+          --muted-foreground: #9ca3af;
+          --accent: #374151;
+          --accent-foreground: #f3f4f6;
+          --info: #3b82f6;
+          --info-foreground: #ffffff;
+          --info-accent: #60a5fa;
+          --success: #22c55e;
+          --success-foreground: #ffffff;
+          --success-accent: #4ade80;
+          --warning: #f59e0b;
+          --warning-foreground: #000000;
+          --warning-accent: #fbbf24;
+          --error: #ef4444;
+          --error-foreground: #f9fafb;
+          --error-accent: #f87171;
+          --commentary: #f472b6;
+          --commentary-foreground: #0f172a;
+          --commentary-accent: #f9a8d4;
+          --ideation: #a78bfa;
+          --ideation-foreground: #0f172a;
+          --ideation-accent: #c4b5fd;
+          --source: #7dd3fc;
+          --source-foreground: #0f172a;
+          --source-accent: #bae6fd;
+          --border: rgba(249, 250, 251, 0.1);
+          --input: rgba(249, 250, 251, 0.15);
+          --outline: #6b7280;
+          --ring: #6b7280;
+          --sidebar: #111827;
+          --sidebar-foreground: #f9fafb;
+          --sidebar-primary: #1d4ed8;
+          --sidebar-primary-foreground: #f9fafb;
+          --sidebar-accent: #1f2937;
+          --sidebar-accent-foreground: #f3f4f6;
+          --sidebar-border: #1f2937;
+          --sidebar-ring: #6b7280;
+          --chart-1: #60a5fa;
+          --chart-2: #818cf8;
+          --chart-3: #a78bfa;
+          --chart-4: #c084fc;
+          --chart-5: #f472b6;
+          --destructive: #f87171;
+          --color-surface: #1f2937;
+          --color-muted-strong: #374151;
+          --color-foreground-secondary: #d1d5db;
+          --color-foreground-tertiary: #9ca3af;
+          --color-placeholder: #6b7280;
+          --color-input-border: #4b5563;
+          --color-hover: #374151;
+          --color-destructive-subtle: #451a1a;
+          --color-accent-subtle: #1e293b;
+
+          --text-color-default: var(--color-neutral-200);
+          --text-color-muted: var(--color-neutral-400);
+          --text-color-dimmed: var(--color-neutral-500);
+          --text-color-toned: var(--color-neutral-300);
+          --text-color-highlighted: #ffffff;
+          --text-color-inverted: #030712;
+          --background-color-default: var(--color-neutral-900);
+          --background-color-muted: var(--color-neutral-800);
+          --background-color-elevated: var(--color-neutral-800);
+          --background-color-accented: var(--color-neutral-700);
+          --background-color-inverted: #ffffff;
+          --border-color-default: var(--color-neutral-800);
+          --border-color-muted: var(--color-neutral-700);
+          --border-color-accented: var(--color-neutral-700);
+          --border-color-inverted: #ffffff;
+          --ring-color-default: var(--color-neutral-800);
+          --ring-color-muted: var(--color-neutral-700);
+          --ring-color-accented: var(--color-neutral-700);
+          --ring-color-inverted: #ffffff;
+          --divide-color-default: var(--color-neutral-800);
+${darkLines}
+
+          /* Shiki / Expressive Code */
+          --shiki-foreground: #e1e4e8;
+          --shiki-background: #1f2428;
+          --shiki-token-keyword: #f97583;
+          --shiki-token-string: #9ecbff;
+          --shiki-token-comment: #6a737d;
+          --shiki-token-function: #b392f0;
+          --shiki-token-constant: #79b8ff;
+          --shiki-token-parameter: #ffab70;
+          --shiki-token-punctuation: #e1e4e8;
+        }
+        `
+        }
+      }
+    ]
+  }
+})