@djangocfg/ui-core 2.1.591 → 2.1.593

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.591",
+  "version": "2.1.593",
   "description": "Pure React UI component library without Next.js dependencies - for Electron, Vite, CRA apps",
   "keywords": [
     "ui-components",
@@ -130,8 +130,8 @@
     "check:contrast": "node scripts/check-preset-contrast.mjs"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.591",
-    "@djangocfg/i18n": "^2.1.591",
+    "@djangocfg/api": "^2.1.593",
+    "@djangocfg/i18n": "^2.1.593",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
     "moment": "^2.30.1",
@@ -207,10 +207,10 @@
     "vaul": "1.1.2"
   },
   "devDependencies": {
-    "@djangocfg/api": "^2.1.591",
-    "@djangocfg/eslint-config": "^2.1.591",
-    "@djangocfg/i18n": "^2.1.591",
-    "@djangocfg/typescript-config": "^2.1.591",
+    "@djangocfg/api": "^2.1.593",
+    "@djangocfg/eslint-config": "^2.1.593",
+    "@djangocfg/i18n": "^2.1.593",
+    "@djangocfg/typescript-config": "^2.1.593",
     "@storybook/react-vite": "^10.5.0",
     "@types/node": "^24.13.3",
     "@types/react": "19.2.15",

package/src/components/data/relative-time-card/index.tsx

@@ -51,6 +51,8 @@ interface RelativeTimeCardProps
   locale?: string;
   /** Use UTC for all calculations. @default true */
   utc?: boolean;
+  /** IANA zone the wall-clock text is shown in (`useTimezone().timezone`). @default the browser zone */
+  timeZone?: string;
 }
 
 /* Built on `Intl`, not moment.
@@ -110,35 +112,40 @@ function getRelativeTime(date: Date, locale: string = "en"): string {
   return formatter.format(0, "second");
 }
 
-function getAutoFormat(date: Date, locale: string = "en"): string {
+function getAutoFormat(date: Date, locale: string = "en", timeZone?: string): string {
   const diffHours = (Date.now() - date.getTime()) / 3_600_000;
   const diffDays = diffHours / 24;
 
   if (diffHours < 24) {
     return new Intl.DateTimeFormat(locale, {
+    timeZone,
       hour: "2-digit",
       minute: "2-digit",
       hour12: false,
     }).format(date);
   }
   if (diffDays < 7) {
-    return new Intl.DateTimeFormat(locale, { weekday: "short" }).format(date);
+    return new Intl.DateTimeFormat(locale, {
+    timeZone, weekday: "short" }).format(date);
   }
   if (diffDays < 365) {
     return new Intl.DateTimeFormat(locale, {
+    timeZone,
       month: "short",
       day: "numeric",
     }).format(date);
   }
   return new Intl.DateTimeFormat(locale, {
+    timeZone,
     year: "numeric",
     month: "short",
     day: "numeric",
   }).format(date);
 }
 
-function getDateTimeFormat(date: Date, locale: string = "en"): string {
+function getDateTimeFormat(date: Date, locale: string = "en", timeZone?: string): string {
   return new Intl.DateTimeFormat(locale, {
+    timeZone,
     year: "numeric",
     month: "short",
     day: "numeric",
@@ -149,15 +156,25 @@ function getDateTimeFormat(date: Date, locale: string = "en"): string {
 }
 
 /** The moment-style tokens this component shipped with, and only those. */
-function applyCustomFormat(date: Date, pattern: string): string {
-  const pad = (n: number) => String(n).padStart(2, "0");
+function applyCustomFormat(date: Date, pattern: string, timeZone?: string): string {
+  const parts = new Intl.DateTimeFormat("en-GB", {
+    timeZone,
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hourCycle: "h23",
+  }).formatToParts(date);
+  const get = (type: string) => parts.find((p) => p.type === type)?.value ?? "";
   const tokens: Record<string, string> = {
-    YYYY: String(date.getFullYear()),
-    MM: pad(date.getMonth() + 1),
-    DD: pad(date.getDate()),
-    HH: pad(date.getHours()),
-    mm: pad(date.getMinutes()),
-    ss: pad(date.getSeconds()),
+    YYYY: get("year"),
+    MM: get("month"),
+    DD: get("day"),
+    HH: get("hour"),
+    mm: get("minute"),
+    ss: get("second"),
   };
   return pattern.replace(/YYYY|MM|DD|HH|mm|ss/g, (t) => tokens[t] ?? t);
 }
@@ -166,17 +183,18 @@ function formatDate(
   date: Date,
   format: "relative" | "auto" | "datetime" | "custom",
   locale: string,
-  outputFormat?: string
+  outputFormat?: string,
+  timeZone?: string
 ): string {
   switch (format) {
     case "relative":
       return getRelativeTime(date, locale);
     case "auto":
-      return getAutoFormat(date, locale);
+      return getAutoFormat(date, locale, timeZone);
     case "datetime":
-      return getDateTimeFormat(date, locale);
+      return getDateTimeFormat(date, locale, timeZone);
     case "custom":
-      return applyCustomFormat(date, outputFormat || "YYYY-MM-DD HH:mm");
+      return applyCustomFormat(date, outputFormat || "YYYY-MM-DD HH:mm", timeZone);
   }
 }
 
@@ -195,6 +213,7 @@ const RelativeTimeCard = React.forwardRef<
       suffix,
       locale = "en",
       utc = true,
+      timeZone,
       className,
       variant,
       size,
@@ -205,17 +224,17 @@ const RelativeTimeCard = React.forwardRef<
     const dateObj = React.useMemo(() => toDate(date, utc), [date, utc]);
 
     const [display, setDisplay] = React.useState(() =>
-      formatDate(dateObj, format, locale, outputFormat)
+      formatDate(dateObj, format, locale, outputFormat, timeZone)
     );
 
     React.useEffect(() => {
-      setDisplay(formatDate(dateObj, format, locale, outputFormat));
+      setDisplay(formatDate(dateObj, format, locale, outputFormat, timeZone));
       if (format !== "relative") return;
       const id = setInterval(() => {
-        setDisplay(formatDate(dateObj, format, locale, outputFormat));
+        setDisplay(formatDate(dateObj, format, locale, outputFormat, timeZone));
       }, updateInterval);
       return () => clearInterval(id);
-    }, [dateObj, format, locale, outputFormat, updateInterval]);
+    }, [dateObj, format, locale, outputFormat, timeZone, updateInterval]);
 
     // An invalid date would throw from `toISOString`, where moment returned
     // null and rendered "Invalid date". Both attributes are omitted instead.
@@ -223,6 +242,7 @@ const RelativeTimeCard = React.forwardRef<
     const isoString = valid ? dateObj.toISOString() : undefined;
     const title = valid
       ? new Intl.DateTimeFormat(locale, {
+          timeZone,
           dateStyle: "full",
           timeStyle: "short",
         }).format(dateObj)

package/src/components/forms/setting-row/index.tsx

@@ -326,7 +326,7 @@ export interface SettingsBlockProps {
   defaultOpen?: boolean;
 }
 
-const BLOCK_TITLE = 'text-[13px] font-semibold uppercase tracking-wide text-muted-foreground';
+const BLOCK_TITLE = 'text-base font-medium text-foreground';
 
 export const SettingsBlock: React.FC<SettingsBlockProps> = ({
   title,

package/src/components/layout/resizable/index.tsx

@@ -156,7 +156,7 @@ const ResizableHandle = ({
       className={cn(
         "relative flex items-center justify-center bg-divider",
         "w-px h-full",
-        "hover:bg-primary/20 active:bg-primary/30",
+        "hover:bg-primary/60 active:bg-primary",
         "transition-colors",
         // Touch handling for better drag performance
         "touch-none select-none",

package/src/components/navigation/dropdown-menu/index.tsx

@@ -127,7 +127,7 @@ const DropdownMenuItem = React.forwardRef<
   }
 >(({ className, inset, href, variant = "default", children, ...props }, ref) => {
   const classes = cn(
-    "relative flex cursor-default select-none items-center gap-2 rounded-[var(--radius-sm)] px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+    "relative flex cursor-default select-none items-center gap-2 rounded-[var(--radius-sm)] px-2.5 py-1 text-sm outline-none transition-colors focus:bg-foreground/[0.07] data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
     "data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive",
     inset && "pl-8",
     className
@@ -228,7 +228,7 @@ const DropdownMenuSeparator = React.forwardRef<
     ref={ref}
     // Soft hairline via the --divider token (was bg-muted, which is darker than
     // the popover surface and read as a hard dark groove).
-    className={cn("-mx-1 my-1 h-px bg-divider", className)}
+    className={cn("mx-1.5 my-1 h-px bg-divider", className)}
     {...props}
   />
 ))

package/src/components/navigation/menu/render-items.tsx

@@ -44,7 +44,7 @@ export function renderItems(
 
       case 'label':
         return (
-          <DropdownMenuLabel key={item.id ?? `label-${index}`}>
+          <DropdownMenuLabel key={item.id ?? `label-${index}`} className="font-normal text-muted-foreground">
             {item.label}
           </DropdownMenuLabel>
         );

package/src/components/navigation/sidebar/sidebar.tsx

@@ -196,7 +196,7 @@ const Sidebar = React.forwardRef<
               data-sidebar="sidebar"
               data-mobile="true"
               className={cn(
-                "flex h-[100dvh] max-h-[100dvh] min-h-0 !w-[min(80vw,320px)] max-w-[min(80vw,320px)] flex-col gap-0 border-sidebar-border/60 p-0 text-sidebar-foreground shadow-xl",
+                "flex h-[100dvh] max-h-[100dvh] min-h-0 !w-[min(88vw,22rem)] max-w-[min(88vw,22rem)] flex-col gap-0 border-sidebar-border/60 p-0 text-sidebar-foreground shadow-xl",
                 drawerSide === "left" ? "border-r" : "border-l",
               )}
               style={
@@ -287,11 +287,7 @@ const Sidebar = React.forwardRef<
             {variant === "sidebar" && (
               <div
                 aria-hidden
-                className={cn(
-                  "pointer-events-none absolute inset-y-0 right-0 z-[1] w-px",
-                  "bg-[linear-gradient(180deg,color-mix(in_oklab,var(--sidebar-border)_2%,transparent)_0%,color-mix(in_oklab,var(--sidebar-border)_22%,transparent)_18%,color-mix(in_oklab,var(--sidebar-border)_40%,transparent)_50%,color-mix(in_oklab,var(--sidebar-border)_20%,transparent)_82%,color-mix(in_oklab,var(--sidebar-border)_3%,transparent)_100%)]",
-                  "dark:bg-[linear-gradient(180deg,color-mix(in_oklab,var(--sidebar-border)_8%,transparent)_0%,color-mix(in_oklab,var(--sidebar-border)_34%,transparent)_22%,color-mix(in_oklab,var(--sidebar-border)_55%,transparent)_50%,color-mix(in_oklab,var(--sidebar-border)_28%,transparent)_78%,color-mix(in_oklab,var(--sidebar-border)_6%,transparent)_100%)]"
-                )}
+                className="pointer-events-none absolute inset-y-0 right-0 z-[1] w-px bg-sidebar-border"
               />
             )}
             <div className="relative z-0 flex min-h-0 flex-1 flex-col">{children}</div>

package/src/components/overlay/dialog/index.tsx

@@ -47,6 +47,12 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
  * widens it and the viewport margin is kept for you. A Tailwind `max-w-*`
  * instead does nothing — the width is declared, and a maximum above a declared
  * width is inert. Ignored when `fullscreen`.
+ *
+ * Proportional cards: set `--aspect-dialog` (width / height) and the card keeps
+ * that ratio at every size — the width shrinks to `(100dvh - 2rem) * ratio` when
+ * the window is short, so the height never overflows. Pure CSS, no measuring:
+ *
+ *     <DialogContent className="[--width-dialog:1024px] [--aspect-dialog:1.28]">
  */
 interface DialogContentProps
   extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
@@ -117,7 +123,7 @@ const DialogContent = React.forwardRef<
           // scrolls. The cap is only a ceiling — a card that must scroll adds
           // `overflow-y-auto`, and one laying out its own regions overrides
           // `max-h` as before.
-          : "left-1/2 top-1/2 grid max-h-[calc(100dvh-2rem)] grid-cols-[minmax(0,1fr)] w-[min(var(--width-dialog),calc(100vw-2rem))] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-[var(--radius-dialog)] border p-6 shadow-lg data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+          : "left-1/2 top-1/2 grid max-h-[calc(100dvh-2rem)] grid-cols-[minmax(0,1fr)] [aspect-ratio:var(--aspect-dialog,auto)] w-[min(var(--width-dialog),calc(100vw-2rem),calc((100dvh-2rem)*var(--aspect-dialog,1000)))] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-[var(--radius-dialog)] border p-6 shadow-lg data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
         className
       )}
       {...props}

package/src/components/overlay/popover/index.tsx

@@ -15,7 +15,7 @@ const PopoverAnchor = PopoverPrimitive.Anchor
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, collisionPadding = 8, forceMount, ...props }, ref) => (
+>(({ className, align = "center", sideOffset = 4, collisionPadding = 8, forceMount, onWheel, onTouchMove, ...props }, ref) => (
   // `forceMount` must reach BOTH halves, and that is the whole reason it is
   // destructured rather than swept up by `...props` (live 2026-08-15).
   //
@@ -42,6 +42,12 @@ const PopoverContent = React.forwardRef<
       // mismatched darker rectangle inside the popover.
       data-slot="popover-content"
       aria-describedby={undefined}
+      // A popover is portaled to <body>, outside an open Dialog's content, so the
+      // Dialog's scroll lock (react-remove-scroll) swallows wheel/touch scrolling
+      // inside it — a long list inside a settings dialog would not scroll at all.
+      // Stopping propagation here keeps those events from reaching the lock.
+      onWheel={(e) => { onWheel?.(e); e.stopPropagation(); }}
+      onTouchMove={(e) => { onTouchMove?.(e); e.stopPropagation(); }}
       align={align}
       sideOffset={sideOffset}
       // Radix defaults this to 0, which lets a popover that does not fit below

package/src/components/select/index.ts

@@ -63,6 +63,10 @@ export { CountrySelect } from './country-select';
 export type { CountrySelectProps, CountryOption } from './country-select';
 export type { TCountryCode } from 'countries-list';
 
+// TimezoneSelect
+export { TimezoneSelect, detectTimezone, timezoneOffsetLabel } from './timezone-select';
+export type { TimezoneSelectProps } from './timezone-select';
+
 // LanguageSelect
 export { LanguageSelect } from './language-select';
 export type {

package/src/components/select/timezone-select.tsx

@@ -0,0 +1,146 @@
+"use client"
+
+import * as React from 'react';
+
+import { Combobox, type ComboboxOption } from './combobox';
+
+/** Sentinel option value for "follow the browser" — never an IANA name. */
+const AUTO = '__auto__';
+
+export interface TimezoneSelectProps {
+  /** IANA zone (e.g. `Europe/Madrid`); `null`/`undefined` = automatic (browser). */
+  value?: string | null;
+  onChange?: (timezone: string | null) => void;
+  /** Offer the "Automatic" option. Default: true. */
+  allowAuto?: boolean;
+  /** Label of the automatic option (the detected zone is its description). */
+  autoLabel?: string;
+  placeholder?: string;
+  searchPlaceholder?: string;
+  emptyText?: string;
+  className?: string;
+  disabled?: boolean;
+}
+
+/** The browser's zone, or `UTC` where Intl cannot tell. */
+export function detectTimezone(): string {
+  try {
+    return Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC';
+  } catch {
+    return 'UTC';
+  }
+}
+
+/** Current offset of a zone as `UTC+01:00` (`UTC` for zero). */
+export function timezoneOffsetLabel(timeZone: string, at: Date = new Date()): string {
+  try {
+    const part = new Intl.DateTimeFormat('en-US', { timeZone, timeZoneName: 'longOffset' })
+      .formatToParts(at)
+      .find((p) => p.type === 'timeZoneName')?.value;
+    if (!part || part === 'GMT') return 'UTC';
+    return part.replace('GMT', 'UTC');
+  } catch {
+    return 'UTC';
+  }
+}
+
+/** Offset in minutes, for ordering. */
+function offsetMinutes(label: string): number {
+  const m = /UTC([+-])(\d{2}):(\d{2})/.exec(label);
+  if (!m) return 0;
+  return (m[1] === '-' ? -1 : 1) * (Number(m[2]) * 60 + Number(m[3]));
+}
+
+/** `America/Argentina/Buenos_Aires` → `Buenos Aires`. */
+function cityOf(timeZone: string): string {
+  return (timeZone.split('/').pop() ?? timeZone).replace(/_/g, ' ');
+}
+
+function listTimezones(): string[] {
+  const supported = (Intl as { supportedValuesOf?: (key: string) => string[] }).supportedValuesOf;
+  const zones = supported ? supported('timeZone') : [];
+  // `UTC` is not always part of supportedValuesOf — keep it reachable.
+  return zones.includes('UTC') ? zones : ['UTC', ...zones];
+}
+
+/**
+ * Time zone picker — a thin layer over `Combobox`: options come from
+ * `Intl.supportedValuesOf('timeZone')` (no data dependency), each shown as
+ * city + region with its current UTC offset, ordered by offset.
+ *
+ * `value` is an IANA name or `null` for "Automatic" (browser zone), so the
+ * caller can store `null` and keep following the device.
+ *
+ * @example
+ * ```tsx
+ * <TimezoneSelect value={tz} onChange={setTz} />
+ * ```
+ */
+export function TimezoneSelect({
+  value,
+  onChange,
+  allowAuto = true,
+  autoLabel = 'Automatic',
+  placeholder = 'Select time zone…',
+  searchPlaceholder = 'Search city or offset…',
+  emptyText = 'No time zones found',
+  className,
+  disabled,
+}: TimezoneSelectProps) {
+  const detected = React.useMemo(detectTimezone, []);
+
+  const options = React.useMemo<ComboboxOption[]>(() => {
+    const now = new Date();
+    const zones = listTimezones()
+      .map((tz) => ({ tz, offset: timezoneOffsetLabel(tz, now) }))
+      .sort((a, b) => offsetMinutes(a.offset) - offsetMinutes(b.offset) || a.tz.localeCompare(b.tz))
+      .map<ComboboxOption>(({ tz, offset }) => ({
+        value: tz,
+        label: cityOf(tz),
+        description: tz.includes('/') ? tz.split('/')[0]! : undefined,
+        badge: offset,
+      }));
+    return allowAuto
+      ? [{ value: AUTO, label: autoLabel, description: detected, badge: timezoneOffsetLabel(detected, now) }, ...zones]
+      : zones;
+  }, [allowAuto, autoLabel, detected]);
+
+  const filter = React.useCallback((o: ComboboxOption, search: string) => {
+    const q = search.trim().toLowerCase();
+    if (!q) return true;
+    // `+9` must find `UTC+09:00`: compare offsets without prefix, leading zero and `:00`.
+    const short = (v: string) => v.toLowerCase().replace(/utc/g, '').replace(/([+-])0/g, '$1').replace(/:00/g, '');
+    const offset = typeof o.badge === 'string' ? o.badge : '';
+    return (
+      o.value.toLowerCase().replace(/_/g, ' ').includes(q) ||
+      o.label.toLowerCase().includes(q) ||
+      offset.toLowerCase().includes(q) ||
+      short(offset).includes(short(q))
+    );
+  }, []);
+
+  return (
+    <Combobox
+      options={options}
+      value={value ?? (allowAuto ? AUTO : '')}
+      onValueChange={(v) => onChange?.(v === AUTO || v === '' ? null : v)}
+      placeholder={placeholder}
+      searchPlaceholder={searchPlaceholder}
+      emptyText={emptyText}
+      className={className}
+      disabled={disabled}
+      filterFunction={filter}
+      contentClassName="w-72"
+      renderValue={(o) =>
+        o ? (
+          <span className="flex min-w-0 items-baseline gap-2">
+            <span className="truncate">{o.value === AUTO ? `${o.label} · ${cityOf(detected)}` : o.label}</span>
+            <span className="shrink-0 text-xs text-muted-foreground">{o.badge}</span>
+          </span>
+        ) : (
+          <span className="text-muted-foreground">{placeholder}</span>
+        )
+      }
+    />
+  );
+}

package/src/styles/css/base.css

@@ -110,4 +110,6 @@ body {
   line-height: var(--line-height-base);
   letter-spacing: var(--letter-spacing-base);
   font-feature-settings: "rlig" 1, "calt" 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }

package/src/styles/css/presets/dense.css

@@ -31,25 +31,6 @@
 
 .dark {
   --radius: 0.25rem;
-  --border: hsl(0 0% 24%);
-  --input: hsl(0 0% 24%);
-    /* 0.10, not 0.18. A divider separates rows INSIDE a panel, so it must be
-     weaker than that panel's own --border — otherwise the five lines between
-     rows shout as loudly as the one frame around them, which is what was
-     left of "кондово" after the fills were calmed. Over a 12% card this
-     lands at 15.4% (step 3.4) against the border's 18% (step 6.0): a clear
-     hierarchy, frame first. */
-  --divider: hsl(0 0% 46% / 0.10);
-  --muted: hsl(0 0% 12%);
-  /* 12%, against an INHERITED --background of 14.5% from dark.css — this
-     preset declares no background of its own, so the card sits DARKER than the
-     page here rather than lighter. Direction is not the contract; the size of
-     the step is. Capped by MAXIMUM_RESTING_SURFACE_GAP in
-     check-preset-contrast.mjs. */
-  --card: hsl(0 0% 12%);
-  /* 20%, not 14%: --background is 14.5%, so this was HALF a point — the
-     hover was effectively invisible. */
-  --accent: hsl(0 0% 20%);
   --radius-xs: calc(0.25rem - 6px);
   --radius-sm: calc(0.25rem - 4px);
   --radius-md: calc(0.25rem - 2px);

package/src/styles/css/presets/django-cfg.css

@@ -27,13 +27,13 @@
 .dark {
   --primary: hsl(189 100% 50%);
   --primary-foreground: hsl(0 0% 9%);
-  /* 20%, not 18%: --background is 14.5%, so this was 3.5 points. */
+  /* 20%: a clear step above the 10% page. */
   --accent: hsl(189 40% 20%);
   --accent-foreground: hsl(189 100% 78%);
   --ring: hsl(189 100% 50%);
   --sidebar-primary: hsl(189 100% 50%);
   --sidebar-primary-foreground: hsl(0 0% 9%);
-  --sidebar-accent: hsl(189 35% 16%);
+  --sidebar-accent: hsl(189 35% 17.5%);
   --sidebar-accent-foreground: hsl(189 100% 78%);
   --sidebar-ring: hsl(189 100% 50%);
   --info: hsl(189 100% 55%);

package/src/styles/css/presets/macos.css

@@ -81,24 +81,24 @@
 }
 
 .dark {
-  --background: hsl(240 5% 8%);
-  --foreground: hsl(0 0% 95%);
+  --background: hsl(0 0% 10%);
+  --foreground: hsl(0 0% 97.6%);
     /* Three points above --background, not seven. A resting surface is
      separated by its BORDER; when the fill does that job the page reads as
      stacked plates and a table looks like a sticker laid over it. Capped by
      MAXIMUM_RESTING_SURFACE_GAP in check-preset-contrast.mjs. */
-  --card: hsl(240 3% 12%);
-  --card-foreground: hsl(0 0% 95%);
-  --popover: hsl(240 3% 20%);
-  --popover-foreground: hsl(0 0% 95%);
+  --card: hsl(0 0% 13%);
+  --card-foreground: hsl(0 0% 97.6%);
+  --popover: hsl(0 0% 18.8%);
+  --popover-foreground: hsl(0 0% 97.6%);
   --primary: hsl(211 100% 58%);
   /* Bright system blue needs dark ink for compact controls (5.59:1). */
   --primary-foreground: hsl(0 0% 9%);
-  --secondary: hsl(240 3% 20%);
+  --secondary: hsl(0 0% 17%);
   --secondary-foreground: hsl(0 0% 88%);
-  --muted: hsl(240 3% 11%);
+  --muted: hsl(0 0% 8%);
   /* Clears AA on background, card, popover, muted, and accent surfaces. */
-  --muted-foreground: hsl(240 4% 62%);
+  --muted-foreground: hsl(0 0% 62%);
   --accent: hsl(211 25% 19%);
   --accent-foreground: hsl(211 100% 72%);
   --destructive: hsl(3 100% 62%);
@@ -114,25 +114,25 @@
      definite edge at one device pixel without becoming the loudest thing on
      the page — which it was once the fills stopped separating surfaces.
      Capped by MAXIMUM_BORDER_GAP in check-preset-contrast.mjs. */
-  --border: hsl(240 3% 18%);
-  --input: hsl(240 3% 22%);
+  --border: hsl(0 0% 18%);
+  --input: hsl(0 0% 20%);
     /* 0.10, not 0.18. A divider separates rows INSIDE a panel, so it must be
      weaker than that panel's own --border — otherwise the five lines between
      rows shout as loudly as the one frame around them, which is what was
      left of "кондово" after the fills were calmed. Over a 12% card this
      lands at 15.4% (step 3.4) against the border's 18% (step 6.0): a clear
      hierarchy, frame first. */
-  --divider: hsl(240 4% 46% / 0.10);
+  --divider: hsl(0 0% 100% / 0.08);
   --ring: hsl(211 100% 58%);
   --radius: 0.625rem;
   --overlay: hsl(0 0% 0% / 0.55);
-  --sidebar-background: hsl(240 5% 5%);
-  --sidebar-foreground: hsl(0 0% 90%);
+  --sidebar-background: hsl(0 0% 12.5%);
+  --sidebar-foreground: hsl(0 0% 97.6%);
   --sidebar-primary: hsl(211 100% 58%);
   --sidebar-primary-foreground: hsl(0 0% 9%);
-  --sidebar-accent: hsl(211 22% 16%);
-  --sidebar-accent-foreground: hsl(211 100% 72%);
-  --sidebar-border: hsl(240 3% 22%);
+  --sidebar-accent: hsl(0 0% 19%);
+  --sidebar-accent-foreground: hsl(0 0% 97.6%);
+  --sidebar-border: hsl(0 0% 18%);
   --sidebar-ring: hsl(211 100% 58%);
   --chart-1: hsl(211 100% 58%);
   --chart-2: hsl(142 52% 50%);

package/src/styles/css/theme/dark.css

@@ -14,27 +14,26 @@
  */
 
 .dark {
-  /* Warm-gray surface ladder mapped from Claude's dark theme (hue ~48–60, a
-   * faint warm tint instead of pure neutral). The VISIBLE page background is
-   * Claude's bg-100 (~14.5%) — NOT near-black; card/popover lift above it so
+  /* Neutral surface ladder (hue 0) measured on the Claude app: page 10%,
+   * sidebar/card 12.5–13%. Hue 0 on purpose — the earlier warm tint read as brown; card/popover lift above it so
    * panels and menus read as raised. muted recesses below the page.
-   *   page ≈ bg-100   card ≈ bg-000(18.4%)   popover ≈ slightly above card */
-  --background: hsl(60 2.7% 14.5%);
-  --foreground: hsl(48 33% 97%);
-  --card: hsl(60 2.1% 18.4%);
-  --card-foreground: hsl(48 33% 97%);
-  --popover: hsl(48 2.5% 21%);
-  --popover-foreground: hsl(48 33% 97%);
+   *   page ≈ bg-100   card ≈ bg-000(18.4%)   popover 18.8% (claude.ai menus) */
+  --background: hsl(0 0% 10%);
+  --foreground: hsl(0 0% 97.6%);
+  --card: hsl(0 0% 13%);
+  --card-foreground: hsl(0 0% 97.6%);
+  --popover: hsl(0 0% 18.8%);
+  --popover-foreground: hsl(0 0% 97.6%);
   /* Brand clay #d97757 (Claude). Bright enough on dark chrome to carry the full swatch. */
   --primary: hsl(15 63% 60%);
   /* Dark label on clay — 5.8:1, stronger than white-on-clay (3.1:1) */
   --primary-foreground: hsl(0 0% 9%);
   /* Secondary: elevated warm-gray control surface + light label */
-  --secondary: hsl(60 2.1% 18.4%);
-  --secondary-foreground: hsl(48 33% 97%);
+  --secondary: hsl(0 0% 17%);
+  --secondary-foreground: hsl(0 0% 97.6%);
   /* Recessed surface — below the page (Claude bg-200), for input rest / chips. */
-  --muted: hsl(30 3.3% 11.8%);
-  --muted-foreground: hsl(48 5% 59%);
+  --muted: hsl(0 0% 8%);
+  --muted-foreground: hsl(0 0% 62%);
   /* Neutral interaction surface: a quiet lift above the current dark page. */
   --surface-hover: color-mix(in oklab, var(--card) 96%, var(--foreground));
   /* The counterpart to --surface-hover: a surface that reads as sunk BELOW the
@@ -50,8 +49,8 @@
    * and composites over whatever surface the band happens to sit on. */
   --surface-recessed: rgb(0 0 0 / 0.35);
   /* Hover/active surface (rails, menus, tabs) — a quiet warm lift above the page. */
-  --accent: hsl(48 3% 24%);
-  --accent-foreground: hsl(48 33% 97%);
+  --accent: hsl(0 0% 15.5%);
+  --accent-foreground: hsl(0 0% 97.6%);
   --destructive: hsl(0 67% 60%);
   --destructive-foreground: hsl(0 0% 98%);
   /* Soft warm border — Claude draws hairlines from a light border at low
@@ -60,9 +59,9 @@
      definite edge at one device pixel without becoming the loudest thing on
      the page — which it was once the fills stopped separating surfaces.
      Capped by MAXIMUM_BORDER_GAP in check-preset-contrast.mjs. */
-  --border: hsl(48 3% 24%);
+  --border: hsl(0 0% 18%);
   /* Input surface — a notch above card so fields read as raised controls. */
-  --input: hsl(48 2.5% 24%);
+  --input: hsl(0 0% 17%);
   /* Divider — TRANSLUCENT hairline (Apple-style): a light warm-gray at low alpha
    * that dissolves into whatever sits behind it, so structural separators
    * (columns, headers, rows) stay quiet on the dark page instead of reading as a
@@ -73,7 +72,7 @@
      left of "кондово" after the fills were calmed. Over a 12% card this
      lands at 15.4% (step 3.4) against the border's 18% (step 6.0): a clear
      hierarchy, frame first. */
-  --divider: hsl(48 4% 46% / 0.10);
+  --divider: hsl(0 0% 100% / 0.08);
   /* Overlay — modal scrim / backdrop behind dialogs, drawers, sheets. Black in
    * both themes; slightly darker here so it still reads on the dark page. */
   --overlay: hsl(0 0% 0% / 0.7);
@@ -94,13 +93,13 @@
   /* Sidebar — same warm-gray family as the page (Claude has NO black sidebar
    * block; rail and page share one tone). A hair darker than --background for
    * subtle separation, not a hard black slab. */
-  --sidebar-background: hsl(30 3% 11.8%);
-  --sidebar-foreground: hsl(48 33% 97%);
+  --sidebar-background: hsl(0 0% 12.5%);
+  --sidebar-foreground: hsl(0 0% 97.6%);
   --sidebar-primary: hsl(15 63% 60%);
   --sidebar-primary-foreground: hsl(0 0% 9%);
-  --sidebar-accent: hsl(48 3% 24%);
-  --sidebar-accent-foreground: hsl(48 33% 97%);
-  --sidebar-border: hsl(48 3% 28%);
+  --sidebar-accent: hsl(0 0% 19%);
+  --sidebar-accent-foreground: hsl(0 0% 97.6%);
+  --sidebar-border: hsl(0 0% 18%);
   --sidebar-ring: hsl(217 91% 60%);
   /* ── Status surfaces (dark) ──────────────────────────────────────
    * Dark variants: dim backgrounds (~8-12% lightness) so banners

package/src/styles/css/utilities/glass.css

@@ -16,7 +16,6 @@
  */
 .glass-macos {
   backdrop-filter: blur(20px) saturate(180%);
-  -webkit-backdrop-filter: blur(20px) saturate(180%);
   background-color: color-mix(in oklab, var(--background) 72%, transparent);
 }
 
@@ -27,7 +26,6 @@
  */
 .glass-win11 {
   backdrop-filter: blur(60px) saturate(125%);
-  -webkit-backdrop-filter: blur(60px) saturate(125%);
   background-color: color-mix(in oklab, var(--background) 85%, transparent);
 }
 
@@ -38,7 +36,6 @@
  */
 .glass-liquid {
   backdrop-filter: blur(12px) saturate(180%);
-  -webkit-backdrop-filter: blur(12px) saturate(180%);
   background-color: color-mix(in oklab, var(--card) 60%, transparent);
   border: 1px solid color-mix(in oklab, var(--foreground) 8%, transparent);
   box-shadow:
@@ -52,7 +49,6 @@
  */
 .glass-header {
   backdrop-filter: blur(8px) saturate(160%);
-  -webkit-backdrop-filter: blur(8px) saturate(160%);
   background-color: color-mix(in oklab, var(--background) 80%, transparent);
 }
 
@@ -64,7 +60,6 @@
  */
 .nav-dropdown-glass {
   backdrop-filter: blur(var(--overlay-blur, 5px)) saturate(150%);
-  -webkit-backdrop-filter: blur(var(--overlay-blur, 5px)) saturate(150%);
   background-color: color-mix(in oklab, var(--background) 55%, transparent);
 }
 

package/src/styles/css/utilities/overlay.css

@@ -12,6 +12,9 @@
  * override it per theme/preset to make the backdrop crisper or softer, or set
  * it to `0px` to disable frosting entirely without touching the scrim color.
  *
+ * Only the unprefixed `backdrop-filter` is written: lightningcss (Tailwind v4, Next) adds `-webkit-` itself, and when both are
+ * written it DROPS the unprefixed one (verified), leaving Chromium with no blur at all.
+ *
  * Plain CSS (NOT a JIT-scanned Tailwind utility) so it compiles regardless of
  * which package's source the Tailwind content scan covers — same rationale as
  * `divider.css`.
@@ -20,7 +23,6 @@
 .bg-overlay {
   /* `--overlay-blur` defaults in base.css; a 0px value cleanly no-ops the blur. */
   backdrop-filter: blur(var(--overlay-blur, 0px));
-  -webkit-backdrop-filter: blur(var(--overlay-blur, 0px));
 }
 
 /**