@opencode-ai/ui 0.0.0-dev-202609032018 → 0.0.0-dev-19034

package/src/{v2/components/dialog-v2.tsx → overlays/dialog/dialog.tsx}

@@ -1,7 +1,7 @@
-import { Dialog as Kobalte } from "@kobalte/core/dialog"
+import { CloseButton, Content, Description, Title } from "@kobalte/core/dialog"
 import { type ComponentProps, type JSXElement, type ParentProps, Show, children, splitProps } from "solid-js"
 import { useI18n } from "../../context/i18n"
-import "./dialog-v2.css"
+import "./dialog.css"
 
 export interface DialogProps extends ParentProps {
   size?: "normal" | "large" | "x-large"
@@ -36,7 +36,7 @@ export function DialogBody(props: ParentProps & { class?: ComponentProps<"div">[
 }
 
 export function DialogTitle(props: ParentProps) {
-  return <Kobalte.Title data-slot="dialog-header-title">{props.children}</Kobalte.Title>
+  return <Title data-slot="dialog-header-title">{props.children}</Title>
 }
 
 export function DialogTitleGroup(props: DialogTitleGroupProps) {
@@ -45,8 +45,8 @@ export function DialogTitleGroup(props: DialogTitleGroupProps) {
 
   return (
     <div data-slot="dialog-title-group">
-      <Show when={title()}>{(t) => <Kobalte.Title data-slot="dialog-title">{t()}</Kobalte.Title>}</Show>
-      <Kobalte.Description data-slot="dialog-description">{description()}</Kobalte.Description>
+      <Show when={title()}>{(t) => <Title data-slot="dialog-title">{t()}</Title>}</Show>
+      <Description data-slot="dialog-description">{description()}</Description>
     </div>
   )
 }
@@ -59,8 +59,8 @@ export function DialogHeader(props: DialogHeaderProps) {
   return (
     <div data-slot="dialog-header" data-hide-close={hideClose() ? "" : undefined}>
       {local.children}
-      {!hideClose() && (
-        <Kobalte.CloseButton data-slot="dialog-close-button" aria-label={local.closeLabel ?? i18n.t("ui.common.close")}>
+      <Show when={!hideClose()}>
+        <CloseButton data-slot="dialog-close-button" aria-label={local.closeLabel ?? i18n.t("ui.common.close")}>
           <svg
             width="16"
             height="16"
@@ -75,8 +75,8 @@ export function DialogHeader(props: DialogHeaderProps) {
               stroke-linejoin="round"
             />
           </svg>
-        </Kobalte.CloseButton>
-      )}
+        </CloseButton>
+      </Show>
     </div>
   )
 }
@@ -92,7 +92,7 @@ export function Dialog(props: DialogProps) {
       data-size={local.size || "normal"}
     >
       <div data-slot="dialog-container" class={local.containerClass}>
-        <Kobalte.Content
+        <Content
           data-slot="dialog-content"
           classList={{
             ...local.classList,
@@ -108,10 +108,8 @@ export function Dialog(props: DialogProps) {
           }}
         >
           {local.children}
-        </Kobalte.Content>
+        </Content>
       </div>
     </div>
   )
 }
-
-export const DialogV2 = Dialog

package/src/{v2/components/tooltip-v2.css → overlays/tooltip/tooltip.css}

@@ -39,6 +39,32 @@
   }
 }
 
+[data-component="tooltip-v2"][data-appearance="standard"] {
+  display: block;
+  max-width: 320px;
+  padding: 2px 8px;
+  border: 1px solid var(--border-weak-base, rgba(0, 0, 0, 0.07));
+  border-radius: var(--radius-sm);
+  background: var(--surface-float-base);
+  color: var(--text-invert-strong);
+  box-shadow: var(--shadow-md);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-small);
+  font-style: normal;
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-large);
+  letter-spacing: var(--letter-spacing-normal);
+  font-variant-numeric: normal;
+  font-variation-settings: normal;
+  user-select: text;
+  animation: none;
+
+  &[data-closed]:not([data-force-open="true"]) {
+    opacity: 0;
+    animation: none;
+  }
+}
+
 @keyframes tooltipV2In {
   from {
     opacity: 0;

package/src/{v2/components/tooltip-v2.tsx → overlays/tooltip/tooltip.tsx}

@@ -1,19 +1,21 @@
-import { Tooltip as KobalteTooltip } from "@kobalte/core/tooltip"
-import { createEffect, Match, onCleanup, splitProps, Switch, type JSX } from "solid-js"
+import { Content, Portal, Root, Trigger } from "@kobalte/core/tooltip"
+import { createEffect, Match, onCleanup, splitProps, Switch, untrack, type JSX } from "solid-js"
 import type { ComponentProps } from "solid-js"
 import { createStore } from "solid-js/store"
-import "./tooltip-v2.css"
+import "./tooltip.css"
 
-export interface TooltipV2Props extends ComponentProps<typeof KobalteTooltip> {
+export interface TooltipProps extends ComponentProps<typeof Root> {
   value: JSX.Element
+  appearance?: "standard" | "compact"
   class?: string
   contentClass?: string
   contentStyle?: JSX.CSSProperties
   inactive?: boolean
   forceOpen?: boolean
+  triggerTabIndex?: number
 }
 
-export function TooltipV2(props: TooltipV2Props) {
+export function Tooltip(props: TooltipProps) {
   let ref: HTMLDivElement | undefined
   const [state, setState] = createStore({
     open: false,
@@ -22,16 +24,19 @@ export function TooltipV2(props: TooltipV2Props) {
   })
   const [local, others] = splitProps(props, [
     "children",
+    "appearance",
     "class",
     "contentClass",
     "contentStyle",
     "inactive",
     "forceOpen",
+    "triggerTabIndex",
     "ignoreSafeArea",
     "value",
   ])
 
   const close = () => setState("open", false)
+  const controlled = () => local.forceOpen !== undefined
 
   const inside = () => {
     const active = document.activeElement
@@ -40,7 +45,7 @@ export function TooltipV2(props: TooltipV2Props) {
   }
 
   const drop = (expand = state.expand) => {
-    if (expand) return
+    if (expand || !state.block) return
     if (ref?.matches(":hover")) return
     if (inside()) return
     setState("block", false)
@@ -69,7 +74,7 @@ export function TooltipV2(props: TooltipV2Props) {
 
   createEffect(() => {
     if (!ref) return
-    sync()
+    untrack(sync)
     const obs = new MutationObserver(sync)
     obs.observe(ref, {
       subtree: true,
@@ -86,16 +91,16 @@ export function TooltipV2(props: TooltipV2Props) {
     <Switch>
       <Match when={local.inactive}>{local.children}</Match>
       <Match when={true}>
-        <KobalteTooltip
+        <Root
           gutter={4}
           openDelay={400}
           skipDelayDuration={300}
           {...others}
           closeDelay={0}
           ignoreSafeArea={local.ignoreSafeArea ?? true}
-          open={local.forceOpen || state.open}
+          open={controlled() ? local.forceOpen : state.open}
           onOpenChange={(open) => {
-            if (local.forceOpen) return
+            if (controlled()) return
             if (state.block && open) return
             if (justClickedTrigger) {
               justClickedTrigger = false
@@ -104,9 +109,10 @@ export function TooltipV2(props: TooltipV2Props) {
             setState("open", open)
           }}
         >
-          <KobalteTooltip.Trigger
+          <Trigger
             ref={ref}
             as="div"
+            tabIndex={local.triggerTabIndex}
             data-component="tooltip-v2-trigger"
             class={local.class}
             onPointerDownCapture={arm}
@@ -118,14 +124,15 @@ export function TooltipV2(props: TooltipV2Props) {
             onFocusOut={() => requestAnimationFrame(() => drop())}
           >
             {local.children}
-          </KobalteTooltip.Trigger>
-          <KobalteTooltip.Portal>
-            <KobalteTooltip.Content
+          </Trigger>
+          <Portal>
+            <Content
               ref={(el) => {
                 const theme = ref?.closest("[data-theme]")?.getAttribute("data-theme")
                 if (theme) el.setAttribute("data-theme", theme)
               }}
               data-component="tooltip-v2"
+              data-appearance={local.appearance ?? "compact"}
               data-placement={props.placement}
               data-force-open={local.forceOpen}
               class={local.contentClass}
@@ -138,9 +145,9 @@ export function TooltipV2(props: TooltipV2Props) {
               }}
             >
               {local.value}
-            </KobalteTooltip.Content>
-          </KobalteTooltip.Portal>
-        </KobalteTooltip>
+            </Content>
+          </Portal>
+        </Root>
       </Match>
     </Switch>
   )

package/src/styles/base.css

@@ -401,4 +401,9 @@ input:where([type="button"], [type="reset"], [type="submit"]),
   [contenteditable="true"] {
     font-size: 16px !important;
   }
+
+  input::placeholder,
+  textarea::placeholder {
+    font-size: 13px;
+  }
 }

package/src/styles/index.css

@@ -6,47 +6,31 @@
 @import "./base.css" layer(base);
 @import "katex/dist/katex.min.css" layer(base);
 
-@import "../components/accordion.css" layer(components);
+@import "../data-display/accordion/accordion.css" layer(components);
 @import "../components/animated-number.css" layer(components);
 @import "../components/app-icon.css" layer(components);
-@import "../components/avatar.css" layer(components);
-@import "../components/button.css" layer(components);
 @import "../components/card.css" layer(components);
-@import "../components/checkbox.css" layer(components);
+@import "../forms/checkbox/checkbox.css" layer(components);
 @import "../components/collapsible.css" layer(components);
-@import "../components/diff-changes.css" layer(components);
 @import "../components/context-menu.css" layer(components);
-@import "../components/dropdown-menu.css" layer(components);
-@import "../components/dialog.css" layer(components);
 @import "../components/file-icon.css" layer(components);
 @import "../components/hover-card.css" layer(components);
 @import "../components/provider-icon.css" layer(components);
 @import "../components/dock-surface.css" layer(components);
-@import "../components/icon.css" layer(components);
-@import "../components/icon-button.css" layer(components);
 @import "../components/image-preview.css" layer(components);
-@import "../components/keybind.css" layer(components);
+@import "../forms/inline-input/inline-input.css" layer(components);
 @import "../components/text-field.css" layer(components);
-@import "../components/inline-input.css" layer(components);
 @import "../components/list.css" layer(components);
 @import "../components/logo.css" layer(components);
 @import "../components/popover.css" layer(components);
 @import "../components/progress.css" layer(components);
-@import "../components/progress-circle.css" layer(components);
-@import "../components/radio-group.css" layer(components);
 @import "../components/resize-handle.css" layer(components);
-@import "../components/select.css" layer(components);
 @import "../components/spinner.css" layer(components);
-@import "../components/switch.css" layer(components);
 @import "../components/scroll-view.css" layer(components);
 @import "../components/sticky-accordion-header.css" layer(components);
-@import "../components/tabs.css" layer(components);
-@import "../components/tag.css" layer(components);
+@import "../navigation/tabs/tabs.css" layer(components);
 @import "../components/text-reveal.css" layer(components);
 @import "../components/text-strikethrough.css" layer(components);
-@import "../components/text-shimmer.css" layer(components);
-@import "../components/toast.css" layer(components);
-@import "../components/tooltip.css" layer(components);
 @import "../components/typewriter.css" layer(components);
 
 @import "./utilities.css" layer(utilities);

package/src/styles/tailwind/colors.css

@@ -252,6 +252,7 @@
   --color-v2-text-text-code-accent: var(--v2-text-text-code-accent);
   --color-v2-icon-icon-base: var(--v2-icon-icon-base);
   --color-v2-icon-icon-muted: var(--v2-icon-icon-muted);
+  --color-v2-icon-icon-faint: var(--v2-icon-icon-faint);
   --color-v2-icon-icon-inverse: var(--v2-icon-icon-inverse);
   --color-v2-icon-icon-contrast: var(--v2-icon-icon-contrast);
   --color-v2-icon-icon-accent: var(--v2-icon-icon-accent);

package/src/styles/tailwind/index.css

@@ -1,7 +1,21 @@
 @layer theme, base, components, utilities;
 
 @import "tailwindcss/theme.css" layer(theme);
-@import "tailwindcss/utilities.css" layer(utilities) source("../../../../");
+@import "tailwindcss/utilities.css" layer(utilities) source(none);
+@source "../../../../app/src";
+@source "../../../../app/index.html";
+@source not "../../../../app/src/i18n";
+@source not "../../../../app/src/**/*.test.{ts,tsx}";
+@source "../../../../desktop/src/renderer";
+@source not "../../../../desktop/src/renderer/**/*.test.{ts,tsx}";
+@source "../../../../enterprise/src";
+@source "../../../../session-ui/src";
+@source not "../../../../session-ui/src/**/*.test.{ts,tsx}";
+@source "../../../../storybook";
+@source "../../../src";
+@source not "../../../src/assets";
+@source not "../../../src/i18n";
+@source not "../../../src/**/*.test.{ts,tsx}";
 @import "./utilities.css";
 
 @import "../index.css";
@@ -51,6 +65,9 @@
   --leading-lg: var(--line-height-large);
   --leading-xl: var(--line-height-x-large);
   --leading-2xl: var(--line-height-2x-large);
+  --leading-text-tight: var(--line-height-tight);
+  --leading-text-compact: var(--line-height-compact);
+  --leading-text-base: var(--line-height-base);
 
   --tracking-normal: var(--letter-spacing-normal);
   --tracking-tight: var(--letter-spacing-tight);

package/src/styles/theme.css

@@ -1,8 +1,8 @@
 :root {
-  --font-family-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --font-family-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --font-family-sans--font-feature-settings: normal;
   --font-family-mono:
-    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   --font-family-mono--font-feature-settings: normal;
 
   --font-size-small: 13px;

package/src/{v2/styles → styles/tokens}/colors.css

@@ -128,18 +128,18 @@
     --v2-cyan-1200: #00353fff;
 
     /* ── Blue ── */
-    --v2-blue-100: #ecf1feff;
-    --v2-blue-200: #d7e2fcff;
+    --v2-blue-100: #f5f8ffff;
+    --v2-blue-200: #ecf1feff;
     --v2-blue-300: #c3d4fdff;
     --v2-blue-400: #a2bcffff;
     --v2-blue-500: #7698fdff;
     --v2-blue-600: #3b5cf6ff;
-    --v2-blue-700: #3250dfff;
-    --v2-blue-800: #2c47c8ff;
-    --v2-blue-900: #263fa9ff;
-    --v2-blue-1000: #22388fff;
-    --v2-blue-1100: #1c2e70ff;
-    --v2-blue-1200: #1b2852ff;
+    --v2-blue-700: #0b34f4ff;
+    --v2-blue-800: #3250dfff;
+    --v2-blue-900: #2c47c8ff;
+    --v2-blue-1000: #263fa9ff;
+    --v2-blue-1100: #22388fff;
+    --v2-blue-1200: #021945ff;
 
     /* ── Purple ── */
     --v2-purple-100: #ebecfeff;

package/src/{v2/styles → styles/tokens}/theme.css

@@ -1,16 +1,4 @@
 @layer theme {
-  html[data-theme="oc-2"] body:not([data-new-layout]) {
-    --text-diff-add-base: light-dark(#167517, #c4ffc0);
-    --text-diff-delete-base: light-dark(#fa3012, #ec2f14);
-    --syntax-comment: light-dark(#7a7a7a, #8f8f8f);
-    --syntax-keyword: light-dark(#a753ae, #edb2f1);
-    --syntax-string: #00ceb9;
-    --syntax-primitive: light-dark(#034cff, #8cb0ff);
-    --syntax-property: light-dark(#a753ae, #fab283);
-    --syntax-type: light-dark(#8a6f00, #fcd53a);
-    --syntax-critical: light-dark(#ff8c00, #fab283);
-  }
-
   :root {
     color-scheme: light;
 
@@ -25,6 +13,7 @@
     --v2-background-bg-contrast: var(--v2-grey-1000);
     --v2-background-bg-button-neutral: var(--v2-grey-50);
     --v2-background-bg-accent: var(--v2-blue-600);
+    --v2-background-bg-code-path: var(--v2-cyan-100);
 
     /* ── Text ── */
     --v2-text-text-base: var(--v2-grey-1100);
@@ -35,10 +24,12 @@
     --v2-text-text-accent: var(--v2-blue-600);
     --v2-text-text-accent-hover: var(--v2-blue-700);
     --v2-text-text-code-accent: var(--v2-blue-900);
+    --v2-text-text-code-path: var(--v2-blue-900);
 
     /* ── Icon ── */
     --v2-icon-icon-base: var(--v2-grey-800);
     --v2-icon-icon-muted: var(--v2-grey-600);
+    --v2-icon-icon-faint: var(--v2-grey-500);
     --v2-icon-icon-inverse: var(--v2-grey-50);
     --v2-icon-icon-contrast: var(--v2-grey-100);
     --v2-icon-icon-accent: var(--v2-blue-600);
@@ -73,7 +64,7 @@
     --v2-state-bg-danger: var(--v2-red-100);
     --v2-state-fg-danger: var(--v2-red-800);
     --v2-state-border-danger: var(--v2-red-300);
-    --v2-state-bg-info: var(--v2-blue-100);
+    --v2-state-bg-info: var(--v2-blue-200);
     --v2-state-fg-info: var(--v2-blue-800);
     --v2-state-border-info: var(--v2-blue-300);
 
@@ -140,8 +131,12 @@
     --v2-illustration-illustration-layer-02: var(--v2-grey-400);
     --v2-illustration-illustration-layer-03: var(--v2-grey-500);
 
-    --font-family-text: "Inter", sans-serif;
-    --v2-font-family-sans: "Inter", sans-serif;
+    --font-family-text: var(--font-family-sans);
+    --v2-font-family-sans: var(--font-family-sans);
+    --v2-font-family-code: var(--font-family-mono);
+    --line-height-tight: 12px;
+    --line-height-compact: 16px;
+    --line-height-base: 20px;
   }
 
   /* OS preference fallback (no JS needed) */
@@ -158,6 +153,7 @@
       --v2-background-bg-contrast: var(--v2-grey-700);
       --v2-background-bg-button-neutral: var(--v2-alpha-light-6);
       --v2-background-bg-accent: var(--v2-blue-600);
+      --v2-background-bg-code-path: var(--v2-cyan-1200);
 
       --v2-text-text-base: var(--v2-grey-200);
       --v2-text-text-muted: var(--v2-grey-500);
@@ -167,9 +163,11 @@
       --v2-text-text-accent: var(--v2-blue-400);
       --v2-text-text-accent-hover: var(--v2-blue-300);
       --v2-text-text-code-accent: var(--v2-blue-400);
+      --v2-text-text-code-path: var(--v2-blue-300);
 
       --v2-icon-icon-base: var(--v2-grey-400);
       --v2-icon-icon-muted: var(--v2-grey-600);
+      --v2-icon-icon-faint: var(--v2-grey-500);
       --v2-icon-icon-inverse: var(--v2-grey-1000);
       --v2-icon-icon-contrast: var(--v2-grey-200);
       --v2-icon-icon-accent: var(--v2-blue-400);
@@ -271,6 +269,7 @@
     --v2-background-bg-contrast: var(--v2-grey-1000);
     --v2-background-bg-button-neutral: var(--v2-grey-50);
     --v2-background-bg-accent: var(--v2-blue-600);
+    --v2-background-bg-code-path: var(--v2-cyan-100);
 
     --v2-text-text-base: var(--v2-grey-1100);
     --v2-text-text-muted: var(--v2-grey-700);
@@ -280,9 +279,11 @@
     --v2-text-text-accent: var(--v2-blue-600);
     --v2-text-text-accent-hover: var(--v2-blue-700);
     --v2-text-text-code-accent: var(--v2-blue-900);
+    --v2-text-text-code-path: var(--v2-blue-900);
 
     --v2-icon-icon-base: var(--v2-grey-800);
     --v2-icon-icon-muted: var(--v2-grey-600);
+    --v2-icon-icon-faint: var(--v2-grey-500);
     --v2-icon-icon-inverse: var(--v2-grey-50);
     --v2-icon-icon-contrast: var(--v2-grey-100);
     --v2-icon-icon-accent: var(--v2-blue-600);
@@ -314,7 +315,7 @@
     --v2-state-bg-danger: var(--v2-red-100);
     --v2-state-fg-danger: var(--v2-red-800);
     --v2-state-border-danger: var(--v2-red-300);
-    --v2-state-bg-info: var(--v2-blue-100);
+    --v2-state-bg-info: var(--v2-blue-200);
     --v2-state-fg-info: var(--v2-blue-800);
     --v2-state-border-info: var(--v2-blue-300);
 
@@ -393,6 +394,7 @@
     --v2-background-bg-contrast: var(--v2-grey-700);
     --v2-background-bg-button-neutral: var(--v2-alpha-light-6);
     --v2-background-bg-accent: var(--v2-blue-600);
+    --v2-background-bg-code-path: var(--v2-cyan-1200);
 
     --v2-text-text-base: var(--v2-grey-100);
     --v2-text-text-muted: var(--v2-grey-500);
@@ -402,9 +404,11 @@
     --v2-text-text-accent: var(--v2-blue-400);
     --v2-text-text-accent-hover: var(--v2-blue-300);
     --v2-text-text-code-accent: var(--v2-blue-400);
+    --v2-text-text-code-path: var(--v2-blue-300);
 
     --v2-icon-icon-base: var(--v2-grey-400);
     --v2-icon-icon-muted: var(--v2-grey-600);
+    --v2-icon-icon-faint: var(--v2-grey-500);
     --v2-icon-icon-inverse: var(--v2-grey-1100);
     --v2-icon-icon-contrast: var(--v2-grey-100);
     --v2-icon-icon-accent: var(--v2-blue-400);

package/src/theme/context.tsx

@@ -84,8 +84,9 @@ const names: Record<string, string> = {
 }
 const oc2Theme = oc2ThemeJson as DesktopTheme
 
-function normalize(id: string | null | undefined) {
-  return id === "oc-1" ? "oc-2" : id
+function resolveStoredTheme(id: string | null | undefined, registered?: Record<string, DesktopTheme>) {
+  if (id === "oc-2" || (id && (knownThemes().has(id) || registered?.[id]))) return id
+  return "oc-2"
 }
 
 function read(key: string) {
@@ -177,7 +178,12 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
     defaultTheme?: string
     onThemeApplied?: (theme: DesktopTheme, mode: "light" | "dark", scheme: ColorScheme) => void
   }) => {
-    const themeId = normalize(read(STORAGE_KEYS.THEME_ID) ?? props.defaultTheme) ?? "oc-2"
+    const rawTheme = read(STORAGE_KEYS.THEME_ID) ?? props.defaultTheme
+    const themeId = resolveStoredTheme(rawTheme)
+    if (rawTheme && rawTheme !== themeId) {
+      write(STORAGE_KEYS.THEME_ID, themeId)
+      clear()
+    }
     const colorScheme = (read(STORAGE_KEYS.COLOR_SCHEME) as ColorScheme | null) ?? "system"
     const mode = colorScheme === "system" ? getSystemMode() : colorScheme
     const [store, setStore] = createStore({
@@ -194,7 +200,7 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
     const loads = new Map<string, Promise<DesktopTheme | undefined>>()
 
     const load = (id: string) => {
-      const next = normalize(id)
+      const next = id
       if (!next) return Promise.resolve(undefined)
       const hit = store.themes[next]
       if (hit) return Promise.resolve(hit)
@@ -233,9 +239,11 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
 
     const onStorage = (e: StorageEvent) => {
       if (e.key === STORAGE_KEYS.THEME_ID && e.newValue) {
-        const next = normalize(e.newValue)
-        if (!next) return
-        if (next !== "oc-2" && !knownThemes().has(next) && !store.themes[next]) return
+        const next = resolveStoredTheme(e.newValue, store.themes)
+        if (next !== e.newValue) {
+          write(STORAGE_KEYS.THEME_ID, next)
+          clear()
+        }
         setStore("themeId", next)
         if (next === "oc-2") {
           clear()
@@ -262,8 +270,8 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
       }
       makeEventListener(mediaQuery, "change", onMedia)
 
-      const rawTheme = read(STORAGE_KEYS.THEME_ID)
-      const savedTheme = normalize(rawTheme ?? props.defaultTheme) ?? "oc-2"
+      const rawTheme = read(STORAGE_KEYS.THEME_ID) ?? props.defaultTheme
+      const savedTheme = resolveStoredTheme(rawTheme, store.themes)
       const savedScheme = (read(STORAGE_KEYS.COLOR_SCHEME) as ColorScheme | null) ?? "system"
       if (rawTheme && rawTheme !== savedTheme) {
         write(STORAGE_KEYS.THEME_ID, savedTheme)
@@ -285,7 +293,7 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
     })
 
     const setTheme = (id: string) => {
-      const next = normalize(id)
+      const next = id
       if (!next) {
         console.warn(`Theme "${id}" not found`)
         return
@@ -325,7 +333,7 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
       setColorScheme,
       registerTheme: (theme: DesktopTheme) => setStore("themes", theme.id, theme),
       previewTheme: (id: string) => {
-        const next = normalize(id)
+        const next = id
         if (!next) return
         if (next !== "oc-2" && !knownThemes().has(next) && !store.themes[next]) return
         setStore("previewThemeId", next)