@nikala-ui/core 0.11.0 → 0.12.0

package/src/registry/components/ui/updater-modal.tsx

@@ -0,0 +1,254 @@
+import {
+  Show,
+  splitProps,
+  type Component,
+  type ParentComponent,
+  type JSX,
+} from "solid-js";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Progress } from "@/components/ui/progress";
+import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
+import type {
+  CreateAppUpdaterReturn,
+  UpdateManifestInfo,
+  UpdateProgressInfo,
+} from "@/hooks/create-app-updater";
+import {
+  Download,
+  RotateCcw,
+  CheckCircle2,
+  AlertTriangle,
+  ArrowRight,
+  Package,
+} from "lucide-solid";
+import { cn } from "@/lib/cn";
+
+function formatBytes(bytes: number): string {
+  if (!bytes || bytes === 0) return "0 MB";
+  const mb = bytes / (1024 * 1024);
+  return `${mb.toFixed(1)} MB`;
+}
+
+/* --- 1. Sub-components for Clean Modularity & Zero Repetition --- */
+
+export interface UpdaterHeaderProps {
+  appName: string;
+  status: string;
+  info?: UpdateManifestInfo | null;
+}
+
+export const UpdaterHeader: Component<UpdaterHeaderProps> = (props) => (
+  <DialogHeader class="space-y-1.5 text-left">
+    <div class="flex items-center justify-between">
+      <div class="size-8 rounded-lg bg-primary/10 text-primary flex items-center justify-center">
+        <Package class="size-4" />
+      </div>
+      <Show when={props.info?.version}>
+        <div class="flex items-center gap-1.5 text-xs font-mono">
+          <span class="text-muted-foreground">{props.info?.currentVersion || "v1.0.0"}</span>
+          <ArrowRight class="size-3 text-muted-foreground" />
+          <Badge variant="default" class="text-xs px-1.5 py-0 bg-primary text-primary-foreground font-semibold">
+            {props.info?.version}
+          </Badge>
+        </div>
+      </Show>
+    </div>
+
+    <DialogTitle class="text-base font-bold tracking-tight text-foreground">
+      {props.status === "downloaded"
+        ? "Update Ready to Install"
+        : props.status === "downloading"
+        ? "Downloading Update..."
+        : props.status === "up-to-date"
+        ? "Up to Date"
+        : `New Update Available for ${props.appName}`}
+    </DialogTitle>
+
+    <DialogDescription class="text-xs text-muted-foreground leading-relaxed">
+      {props.status === "downloaded"
+        ? "The update has been downloaded and verified. Restart to apply changes."
+        : props.status === "downloading"
+        ? "Please wait while update packages are being downloaded."
+        : props.status === "up-to-date"
+        ? `${props.appName} is running on the latest version.`
+        : "A new version with features and bug fixes is ready to install."}
+    </DialogDescription>
+  </DialogHeader>
+);
+
+export interface UpdaterReleaseNotesProps {
+  body?: string;
+  date?: string;
+}
+
+export const UpdaterReleaseNotes: Component<UpdaterReleaseNotesProps> = (props) => (
+  <div class="space-y-1">
+    <div class="flex items-center justify-between text-xs text-muted-foreground font-medium">
+      <span>Release Notes</span>
+      <Show when={props.date}>
+        <span class="text-[11px] font-mono">{props.date}</span>
+      </Show>
+    </div>
+    <pre class="max-h-28 overflow-y-auto rounded-md border border-border bg-black/5 dark:bg-black/50 p-2.5 text-xs text-foreground font-mono whitespace-pre-wrap leading-relaxed select-text shadow-inner">
+      {props.body}
+    </pre>
+  </div>
+);
+
+export interface UpdaterProgressBarProps {
+  progress: UpdateProgressInfo;
+}
+
+export const UpdaterProgressBar: Component<UpdaterProgressBarProps> = (props) => (
+  <div class="space-y-1.5 py-1">
+    <div class="flex items-center justify-between text-xs font-mono">
+      <span class="text-muted-foreground font-sans">Progress</span>
+      <span class="font-semibold text-primary">{props.progress.percentage}%</span>
+    </div>
+    <Progress value={props.progress.percentage} class="h-1.5" />
+    <div class="flex items-center justify-between text-[11px] font-mono text-muted-foreground">
+      <span>{formatBytes(props.progress.downloaded)}</span>
+      <span>{formatBytes(props.progress.total)}</span>
+    </div>
+  </div>
+);
+
+/* --- 2. Main UpdaterModal Compound Component --- */
+
+export interface UpdaterModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  updater: CreateAppUpdaterReturn;
+  appName?: string;
+  class?: string;
+}
+
+export const UpdaterModal: Component<UpdaterModalProps> = (props) => {
+  const [local, rest] = splitProps(props, [
+    "open",
+    "onOpenChange",
+    "updater",
+    "appName",
+    "class",
+  ]);
+
+  const appName = () => local.appName || "Nikala Desktop";
+  const status = () => local.updater.status();
+  const info = () => local.updater.updateInfo();
+  const progress = () => local.updater.progress();
+  const error = () => local.updater.error();
+
+  return (
+    <Dialog open={local.open} onOpenChange={local.onOpenChange}>
+      <DialogContent class={cn("sm:max-w-sm", local.class)}>
+        {/* Header */}
+        <UpdaterHeader
+          appName={appName()}
+          status={status()}
+          info={info()}
+        />
+
+        {/* Error Alert */}
+        <Show when={error()}>
+          <Alert variant="destructive" class="py-2 text-xs">
+            <AlertTriangle class="size-3.5" />
+            <AlertTitle class="font-semibold text-xs">Update Failed</AlertTitle>
+            <AlertDescription class="text-[11px]">{error()}</AlertDescription>
+          </Alert>
+        </Show>
+
+        {/* Release Notes */}
+        <Show when={info()?.body && (status() === "available" || status() === "downloading")}>
+          <UpdaterReleaseNotes body={info()?.body} date={info()?.date} />
+        </Show>
+
+        {/* Progress Bar */}
+        <Show when={status() === "downloading"}>
+          <UpdaterProgressBar progress={progress()} />
+        </Show>
+
+        {/* Success Callout */}
+        <Show when={status() === "downloaded"}>
+          <div class="flex items-center gap-2.5 p-2.5 rounded-md border border-primary/30 bg-primary/5 text-xs text-foreground">
+            <CheckCircle2 class="size-4 text-primary shrink-0" />
+            <p class="font-medium text-foreground text-xs">Package downloaded & verified.</p>
+          </div>
+        </Show>
+
+        {/* Actions Footer */}
+        <DialogFooter class="flex-row items-center justify-end gap-1.5 pt-1">
+          <Show when={status() === "available" || status() === "error"}>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => local.onOpenChange(false)}
+              class="text-xs h-7.5 px-3 cursor-pointer"
+            >
+              Later
+            </Button>
+            <Button
+              variant="default"
+              size="sm"
+              onClick={() => local.updater.downloadAndInstall()}
+              class="text-xs h-7.5 px-3 gap-1.5 cursor-pointer font-medium"
+            >
+              <Download class="size-3.5" />
+              <span>Update Now</span>
+            </Button>
+          </Show>
+
+          <Show when={status() === "downloading"}>
+            <Button
+              variant="outline"
+              size="sm"
+              disabled
+              class="text-xs h-7.5 w-full opacity-70 justify-center"
+            >
+              Downloading ({progress().percentage}%)
+            </Button>
+          </Show>
+
+          <Show when={status() === "downloaded"}>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => local.onOpenChange(false)}
+              class="text-xs h-7.5 px-3 cursor-pointer"
+            >
+              Later
+            </Button>
+            <Button
+              variant="default"
+              size="sm"
+              onClick={() => local.updater.relaunch()}
+              class="text-xs h-7.5 px-3 gap-1.5 cursor-pointer font-semibold shadow-xs"
+            >
+              <RotateCcw class="size-3.5" />
+              <span>Relaunch</span>
+            </Button>
+          </Show>
+
+          <Show when={status() === "up-to-date" || status() === "idle"}>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => local.onOpenChange(false)}
+              class="text-xs h-7.5 px-3 cursor-pointer"
+            >
+              Close
+            </Button>
+          </Show>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

package/src/registry/metadata.ts

@@ -56,7 +56,7 @@ export const COMPONENT_METADATA: Record<string, ComponentMeta> = {
   "form-message": {
     title: "Form Message",
     description: "Validation message helper connected to createForm errors and touched state.",
-    registryDependencies: ["field"],
+    registryDependencies: ["field", "create-form"],
   },
   field: {
     title: "Field",
@@ -69,6 +69,11 @@ export const COMPONENT_METADATA: Record<string, ComponentMeta> = {
     description: "A versatile container component with header, content, and footer sections.",
     dependencies: ["clsx", "tailwind-merge"],
   },
+  container: {
+    title: "Container",
+    description: "A responsive layout container constraining maximum width with semantic padding tokens.",
+    dependencies: ["clsx", "tailwind-merge", "class-variance-authority"],
+  },
   badge: {
     title: "Badge",
     description: "A small badge component for status indicators and tags.",
@@ -103,11 +108,13 @@ export const COMPONENT_METADATA: Record<string, ComponentMeta> = {
     title: "Switch",
     description: "A control that allows the user to toggle between checked and unchecked states.",
     dependencies: ["clsx", "tailwind-merge"],
+    registryDependencies: ["create-controllable-signal"],
   },
   checkbox: {
     title: "Checkbox",
     description: "A control that allows the user to toggle between checked and unchecked options.",
     dependencies: ["clsx", "tailwind-merge"],
+    registryDependencies: ["create-controllable-signal"],
   },
   "radio-group": {
     title: "Radio Group",
@@ -118,7 +125,7 @@ export const COMPONENT_METADATA: Record<string, ComponentMeta> = {
     title: "Select",
     description: "Displays a list of options for the user to pick from, built on Kobalte primitives.",
     dependencies: ["clsx", "tailwind-merge", "@kobalte/core"],
-    registryDependencies: ["scroll-area"],
+    registryDependencies: ["scroll-area", "create-click-outside"],
   },
   combobox: {
     title: "Combobox",
@@ -130,6 +137,7 @@ export const COMPONENT_METADATA: Record<string, ComponentMeta> = {
     title: "Tabs",
     description: "A set of layered sections of content displayed one at a time.",
     dependencies: ["clsx", "tailwind-merge"],
+    registryDependencies: ["create-controllable-signal"],
   },
   accordion: {
     title: "Accordion",
@@ -162,13 +170,13 @@ export const COMPONENT_METADATA: Record<string, ComponentMeta> = {
     title: "Dropdown Menu",
     description: "Displays a menu to the user—such as a set of actions or functions—triggered by a button or avatar.",
     dependencies: ["clsx", "tailwind-merge", "@kobalte/core"],
-    registryDependencies: ["scroll-area"],
+    registryDependencies: ["scroll-area", "create-click-outside"],
   },
   "theme-manager": {
     title: "Theme Manager",
     description: "Zero-dependency ThemeProvider and ThemeToggle component for switching light, dark, and system themes.",
     dependencies: ["clsx", "tailwind-merge", "@kobalte/core", "lucide-solid"],
-    registryDependencies: ["button", "dropdown-menu"],
+    registryDependencies: ["button", "dropdown-menu", "create-color-mode"],
   },
   banner: {
     title: "Banner",
@@ -201,7 +209,7 @@ export const COMPONENT_METADATA: Record<string, ComponentMeta> = {
       "lucide-solid",
       "@kobalte/core",
     ],
-    registryDependencies: ["kbd", "input-group", "list", "scroll-area"],
+    registryDependencies: ["kbd", "input-group", "list", "scroll-area", "create-keybindings"],
   },
   toast: {
     title: "Toast / Sonner",
@@ -217,6 +225,7 @@ export const COMPONENT_METADATA: Record<string, ComponentMeta> = {
     title: "Popover",
     description: "Displays rich content in a portal layer triggered by a button, built on Kobalte primitives.",
     dependencies: ["clsx", "tailwind-merge", "@kobalte/core", "lucide-solid"],
+    registryDependencies: ["create-click-outside"],
   },
   progress: {
     title: "Progress",
@@ -342,6 +351,12 @@ export const COMPONENT_METADATA: Record<string, ComponentMeta> = {
     dependencies: ["clsx", "tailwind-merge", "class-variance-authority", "lucide-solid"],
     registryDependencies: ["create-pagination"],
   },
+  pager: {
+    title: "Pager",
+    description: "Previous and next article navigation links with card previews for documentation and blog layouts.",
+    dependencies: ["clsx", "tailwind-merge", "lucide-solid"],
+    registryDependencies: ["card"],
+  },
   message: {
     title: "Message",
     description: "A structured chat and conversation message layout with avatars, alignment, headers, footers, and actions.",
@@ -363,6 +378,112 @@ export const COMPONENT_METADATA: Record<string, ComponentMeta> = {
     dependencies: ["clsx", "tailwind-merge", "class-variance-authority", "lucide-solid"],
     registryDependencies: ["tooltip", "skeleton", "separator"],
   },
+  titlebar: {
+    title: "Titlebar",
+    description: "A native-feeling custom titlebar for frameless desktop windows supporting macOS Traffic Lights and Windows 11 controls.",
+    dependencies: ["clsx", "tailwind-merge", "class-variance-authority", "lucide-solid"],
+    registryDependencies: ["titlebar-tabs", "button", "tooltip", "create-tauri-window", "create-document-tabs"],
+  },
+  "titlebar-tabs": {
+    title: "Titlebar Tabs",
+    description: "Native draggable tab bar integrated directly inside desktop titlebars for multi-document applications.",
+    dependencies: ["clsx", "tailwind-merge", "class-variance-authority", "lucide-solid"],
+    registryDependencies: ["button", "tooltip", "create-document-tabs"],
+  },
+  "updater-modal": {
+    title: "Updater Modal",
+    description: "An automated application auto-updater dialog for Tauri v2 with release notes preview, download progress bar, and relaunch actions.",
+    dependencies: ["clsx", "tailwind-merge", "lucide-solid"],
+    registryDependencies: ["dialog", "button", "badge", "progress", "alert", "create-app-updater"],
+  },
+  "rich-text-editor": {
+    title: "Rich Text Editor",
+    description: "A full-featured WYSIWYG rich text editor with toolbar, bubble formatting, tables, task lists, and image uploads built on Tiptap.",
+    dependencies: [
+      "@tiptap/core",
+      "@tiptap/starter-kit",
+      "@tiptap/extension-link",
+      "@tiptap/extension-image",
+      "@tiptap/extension-placeholder",
+      "@tiptap/extension-task-list",
+      "@tiptap/extension-task-item",
+      "@tiptap/extension-table",
+      "@tiptap/extension-table-row",
+      "@tiptap/extension-table-cell",
+      "@tiptap/extension-table-header",
+      "@tiptap/extension-underline",
+      "@tiptap/extension-text-align",
+      "@tiptap/extension-highlight",
+      "@tiptap/extension-character-count",
+      "@tiptap/extension-subscript",
+      "@tiptap/extension-superscript",
+      "@tiptap/extension-typography",
+      "tiptap-markdown",
+      "clsx",
+      "tailwind-merge",
+      "lucide-solid",
+    ],
+    registryDependencies: ["create-tiptap-editor"],
+  },
+  callout: {
+    title: "Callout",
+    description: "A semantic callout and alert block with status variants, icons, and titles for documentation and notices.",
+    dependencies: ["clsx", "tailwind-merge", "class-variance-authority", "lucide-solid"],
+  },
+  "code-block": {
+    title: "Code Block",
+    description: "A code block container with filename header, language indicator, and interactive copy to clipboard button.",
+    dependencies: ["clsx", "tailwind-merge", "lucide-solid", "shiki"],
+    registryDependencies: ["button", "badge", "tooltip", "tabs", "create-clipboard"],
+  },
+  "package-manager-tabs": {
+    title: "Package Manager Tabs",
+    description: "An interactive command tab bar supporting customizable package managers (bun, pnpm, npm, yarn, deno, bunx, npx) with copy functionality.",
+    dependencies: ["clsx", "tailwind-merge", "lucide-solid"],
+    registryDependencies: ["button", "tooltip", "tabs", "create-clipboard"],
+  },
+  "code-group": {
+    title: "Code Group",
+    description: "A compound tabbed code container for organizing multiple files, languages, and snippets built on Tabs.",
+    dependencies: ["clsx", "tailwind-merge"],
+    registryDependencies: ["tabs"],
+  },
+  steps: {
+    title: "Steps",
+    description: "A vertical multi-step instruction container with connecting progress line and numbered step indicators.",
+    dependencies: ["clsx", "tailwind-merge"],
+    registryDependencies: ["badge"],
+  },
+  "file-tree": {
+    title: "File Tree",
+    description: "An interactive hierarchical directory file tree component built on Collapsible.",
+    dependencies: ["clsx", "tailwind-merge", "lucide-solid"],
+    registryDependencies: ["collapsible"],
+  },
+  "section-heading": {
+    title: "Section Heading",
+    description: "A reusable heading block with title, optional badge, and description. Supports page and section variants.",
+    dependencies: ["clsx", "tailwind-merge", "class-variance-authority"],
+    registryDependencies: ["badge"],
+  },
+  "api-table": {
+    title: "API Table",
+    description: "A structured, clean API reference table component for documenting props, options, and events.",
+    dependencies: ["clsx", "tailwind-merge"],
+    registryDependencies: ["table", "section-heading"],
+  },
+  "component-viewer": {
+    title: "Component Viewer",
+    description: "An interactive preview canvas and code viewer container with responsive viewports, canvas grid, and AI prompts.",
+    dependencies: ["clsx", "tailwind-merge", "lucide-solid"],
+    registryDependencies: ["tabs", "button", "tooltip", "code-block", "create-clipboard"],
+  },
+  "table-of-contents": {
+    title: "Table of Contents",
+    description: "An accessible heading navigation tree with ScrollSpy tracking and smooth scrolling, composed of ScrollArea and List.",
+    dependencies: ["clsx", "tailwind-merge", "class-variance-authority"],
+    registryDependencies: ["scroll-area", "list", "create-scroll-position"],
+  },
 };
 
 /**
@@ -541,6 +662,47 @@ export const HOOK_METADATA: Record<string, ComponentMeta> = {
     title: "createChatScroll",
     description: "SolidJS reactive primitive for automated chat container scrolling with manual scroll-up detection",
   },
+  "create-tauri-window": {
+    title: "createTauriWindow",
+    description: "SolidJS reactive primitive for interacting with and controlling Tauri v2 application window states",
+  },
+  "create-global-shortcut": {
+    title: "createGlobalShortcut",
+    description: "SolidJS reactive primitive for registering OS-level global keyboard shortcuts via Tauri v2 plugin",
+  },
+  "create-app-updater": {
+    title: "createAppUpdater",
+    description: "SolidJS reactive primitive for controlling and observing Tauri v2 application updates",
+  },
+  "create-document-tabs": {
+    title: "createDocumentTabs",
+    description: "SolidJS reactive primitive for managing multi-document tabs, editor buffers, and browser tab stacks with adjacent activation and pinned state",
+  },
+  "create-tiptap-editor": {
+    title: "createTiptapEditor",
+    description: "Fine-grained reactive SolidJS primitive for managing Tiptap rich text editor instances, signals, and formatting commands.",
+    dependencies: [
+      "@tiptap/core",
+      "@tiptap/starter-kit",
+      "@tiptap/extension-link",
+      "@tiptap/extension-image",
+      "@tiptap/extension-placeholder",
+      "@tiptap/extension-task-list",
+      "@tiptap/extension-task-item",
+      "@tiptap/extension-table",
+      "@tiptap/extension-table-row",
+      "@tiptap/extension-table-cell",
+      "@tiptap/extension-table-header",
+      "@tiptap/extension-underline",
+      "@tiptap/extension-text-align",
+      "@tiptap/extension-highlight",
+      "@tiptap/extension-character-count",
+      "@tiptap/extension-subscript",
+      "@tiptap/extension-superscript",
+      "@tiptap/extension-typography",
+      "tiptap-markdown",
+    ],
+  },
 };
 
 /**
@@ -578,4 +740,3 @@ export const BLOCK_METADATA: Record<string, ComponentMeta> = {
     registryDependencies: ["card", "input", "label", "button", "alert", "form", "field", "form-message"],
   },
 };
-

package/src/registry/providers/theme-provider.tsx

@@ -10,7 +10,7 @@ import {
 } from "solid-js";
 
 export type Theme = "light" | "dark" | "system";
-export type AccentColor = "wine" | "violet" | "sky" | "emerald" | "rose" | "amber" | "zinc";
+export type AccentColor = "yellow" | "red" | "violet" | "sky" | "emerald" | "zinc";
 export type Radius = "0" | "0.3" | "0.5" | "0.75" | "1.0";
 
 export interface ThemeProviderProps {
@@ -28,13 +28,12 @@ const ACCENT_COLORS: Record<
   AccentColor,
   { light: string; dark: string; lightFg: string; darkFg: string }
 > = {
-  wine: { light: "#722f37", dark: "#9e3b47", lightFg: "#ffffff", darkFg: "#ffffff" },
-  violet: { light: "#7c3aed", dark: "#8b5cf6", lightFg: "#ffffff", darkFg: "#ffffff" },
-  sky: { light: "#0284c7", dark: "#38bdf8", lightFg: "#ffffff", darkFg: "#0f172a" },
-  emerald: { light: "#059669", dark: "#34d399", lightFg: "#ffffff", darkFg: "#052e16" },
-  rose: { light: "#e11d48", dark: "#fb7185", lightFg: "#ffffff", darkFg: "#ffffff" },
-  amber: { light: "#d97706", dark: "#fbbf24", lightFg: "#ffffff", darkFg: "#111827" },
-  zinc: { light: "#18181b", dark: "#fafafa", lightFg: "#fafafa", darkFg: "#18181b" },
+  yellow: { light: "oklch(0.795 0.184 86.047)", dark: "oklch(0.852 0.199 91.936)", lightFg: "oklch(0.145 0 0)", darkFg: "oklch(0.145 0 0)" },
+  red: { light: "oklch(0.577 0.245 27.325)", dark: "oklch(0.637 0.237 25.331)", lightFg: "oklch(0.985 0 0)", darkFg: "oklch(0.985 0 0)" },
+  violet: { light: "oklch(0.541 0.281 293.009)", dark: "oklch(0.606 0.25 292.717)", lightFg: "oklch(0.985 0 0)", darkFg: "oklch(0.985 0 0)" },
+  sky: { light: "oklch(0.588 0.158 241.966)", dark: "oklch(0.672 0.154 238.29)", lightFg: "oklch(0.985 0 0)", darkFg: "oklch(0.145 0 0)" },
+  emerald: { light: "oklch(0.596 0.145 163.225)", dark: "oklch(0.696 0.17 162.48)", lightFg: "oklch(0.985 0 0)", darkFg: "oklch(0.145 0 0)" },
+  zinc: { light: "oklch(0.205 0 0)", dark: "oklch(0.985 0 0)", lightFg: "oklch(0.985 0 0)", darkFg: "oklch(0.205 0 0)" },
 };
 
 interface ThemeProviderContextValue {
@@ -106,6 +105,7 @@ export const ThemeProvider: ParentComponent<ThemeProviderProps> = (props) => {
       resolvedDark = targetTheme === "dark";
       root.classList.add(targetTheme);
     }
+    root.style.colorScheme = resolvedDark ? "dark" : "light";
 
     // Override --primary CSS variables ONLY if explicitly chosen
     if (currentAccent && ACCENT_COLORS[currentAccent]) {
@@ -115,11 +115,16 @@ export const ThemeProvider: ParentComponent<ThemeProviderProps> = (props) => {
 
       root.style.setProperty("--primary", primaryHex);
       root.style.setProperty("--primary-foreground", primaryFgHex);
+    } else {
+      root.style.removeProperty("--primary");
+      root.style.removeProperty("--primary-foreground");
     }
 
     // Override --radius CSS variable ONLY if explicitly chosen
     if (currentRadius) {
       root.style.setProperty("--radius", `${currentRadius}rem`);
+    } else {
+      root.style.removeProperty("--radius");
     }
   };
 
@@ -135,7 +140,9 @@ export const ThemeProvider: ParentComponent<ThemeProviderProps> = (props) => {
       try {
         localStorage.setItem(`${storageKey}-mode`, t);
         if (a) localStorage.setItem(`${storageKey}-accent`, a);
+        else localStorage.removeItem(`${storageKey}-accent`);
         if (r) localStorage.setItem(`${storageKey}-radius`, r);
+        else localStorage.removeItem(`${storageKey}-radius`);
       } catch { }
     }
   });
@@ -150,6 +157,7 @@ export const ThemeProvider: ParentComponent<ThemeProviderProps> = (props) => {
         const root = document.documentElement;
         root.classList.remove("light", "dark");
         root.classList.add(e.matches ? "dark" : "light");
+        root.style.colorScheme = e.matches ? "dark" : "light";
 
         const currentAccent = accent();
         if (currentAccent && ACCENT_COLORS[currentAccent]) {

package/src/registry/providers/theme-script.tsx

@@ -1,4 +1,5 @@
-import { type Component } from "solid-js";
+import { isServer } from "solid-js/web";
+import type { Component } from "solid-js";
 
 export interface ThemeScriptProps {
   /** Storage key namespace used in localStorage (default: "nikala-theme") */
@@ -15,6 +16,7 @@ export interface ThemeScriptProps {
  * Pre-hydration inline script executed synchronously before DOM paint to prevent theme flickering (anti-FOUC).
  */
 export const ThemeScript: Component<ThemeScriptProps> = (props) => {
+  if (!isServer) return null;
   const key = props.storageKey || "nikala-theme";
   const defTheme = props.defaultTheme || "system";
   const defAccent = props.defaultAccent || "";
@@ -35,17 +37,35 @@ export const ThemeScript: Component<ThemeScriptProps> = (props) => {
   root.style.colorScheme = resolvedDark ? 'dark' : 'light';
 
   var colorMap = {
-    wine: resolvedDark ? '#9e3b47' : '#722f37',
-    violet: resolvedDark ? '#8b5cf6' : '#7c3aed',
-    sky: resolvedDark ? '#38bdf8' : '#0284c7',
-    emerald: resolvedDark ? '#34d399' : '#059669',
-    rose: resolvedDark ? '#fb7185' : '#e11d48',
-    amber: resolvedDark ? '#fbbf24' : '#d97706',
-    zinc: resolvedDark ? '#fafafa' : '#18181b'
+    yellow: {
+      primary: resolvedDark ? 'oklch(0.852 0.199 91.936)' : 'oklch(0.795 0.184 86.047)',
+      foreground: 'oklch(0.145 0 0)'
+    },
+    red: {
+      primary: resolvedDark ? 'oklch(0.637 0.237 25.331)' : 'oklch(0.577 0.245 27.325)',
+      foreground: 'oklch(0.985 0 0)'
+    },
+    violet: {
+      primary: resolvedDark ? 'oklch(0.606 0.25 292.717)' : 'oklch(0.541 0.281 293.009)',
+      foreground: 'oklch(0.985 0 0)'
+    },
+    sky: {
+      primary: resolvedDark ? 'oklch(0.672 0.154 238.29)' : 'oklch(0.588 0.158 241.966)',
+      foreground: resolvedDark ? 'oklch(0.145 0 0)' : 'oklch(0.985 0 0)'
+    },
+    emerald: {
+      primary: resolvedDark ? 'oklch(0.696 0.17 162.48)' : 'oklch(0.596 0.145 163.225)',
+      foreground: resolvedDark ? 'oklch(0.145 0 0)' : 'oklch(0.985 0 0)'
+    },
+    zinc: {
+      primary: resolvedDark ? 'oklch(0.985 0 0)' : 'oklch(0.205 0 0)',
+      foreground: resolvedDark ? 'oklch(0.205 0 0)' : 'oklch(0.985 0 0)'
+    }
   };
 
   if (accent && colorMap[accent]) {
-    root.style.setProperty('--primary', colorMap[accent]);
+    root.style.setProperty('--primary', colorMap[accent].primary);
+    root.style.setProperty('--primary-foreground', colorMap[accent].foreground);
   }
 
   if (radius) {