@djangocfg/ui-core 2.1.512 → 2.1.514

package/src/components/forms/datetime-field/date-time-utils.ts

@@ -0,0 +1,48 @@
+/**
+ * Local-date <-> string helpers for the native fields.
+ *
+ * Native `type="date"` / `type="datetime-local"` speak plain, timezone-less
+ * wall-clock strings (`YYYY-MM-DD`, `YYYY-MM-DDTHH:mm`). We parse/format them
+ * MANUALLY rather than via `new Date(str)` / `.toISOString()` — those go through
+ * UTC and shift the calendar day for users west/east of UTC (the classic
+ * "picked the 5th, got the 4th" bug). The `Calendar` popover works in `Date`, so
+ * we bridge with these local-safe converters.
+ */
+
+function pad(n: number): string {
+  return String(n).padStart(2, '0');
+}
+
+/** `YYYY-MM-DD` -> local `Date` (midnight local). Empty/invalid -> undefined. */
+export function parseDateString(value: string): Date | undefined {
+  const match = value.match(/^(\d{4})-(\d{2})-(\d{2})/);
+  if (!match) return undefined;
+  const [, y, m, d] = match;
+  return new Date(Number(y), Number(m) - 1, Number(d));
+}
+
+/** local `Date` -> `YYYY-MM-DD`. */
+export function formatDateString(date: Date): string {
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+}
+
+/** `YYYY-MM-DDTHH:mm` -> { date, time } split. */
+export function splitDateTime(value: string): { date: string; time: string } {
+  const [date = '', time = ''] = value.split('T');
+  return { date, time };
+}
+
+/** Join a `YYYY-MM-DD` date and `HH:mm` time into `YYYY-MM-DDTHH:mm`. Returns
+ *  empty string when the date is missing (a time alone has no valid datetime). */
+export function joinDateTime(date: string, time: string): string {
+  if (!date) return '';
+  return `${date}T${time || '00:00'}`;
+}
+
+/** `YYYY-MM-DDTHH:mm` -> local `Date`. Empty/invalid -> undefined. */
+export function parseDateTimeString(value: string): Date | undefined {
+  const match = value.match(/^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})/);
+  if (!match) return undefined;
+  const [, y, mo, d, h, mi] = match;
+  return new Date(Number(y), Number(mo) - 1, Number(d), Number(h), Number(mi));
+}

package/src/components/forms/datetime-field/index.ts

@@ -0,0 +1,30 @@
+/**
+ * Native-engine date/time fields.
+ *
+ * A typeable, token-skinned field family built on the browser's native
+ * `<input type="date|time|datetime-local">` engine, with an optional
+ * calendar/columns popover for pointer users. See
+ * `@dev/planned/ui-core-datetime-fields/PLAN.md` for the rationale.
+ *
+ * @module datetime-field
+ */
+
+export { DateField } from './date-field';
+export type { DateFieldProps } from './date-field';
+
+export { TimeField } from './time-field';
+export type { TimeFieldProps } from './time-field';
+
+export { DateTimeField } from './date-time-field';
+export type { DateTimeFieldProps } from './date-time-field';
+
+// Low-level building blocks, exported for advanced composition.
+export { NativeFieldShell, NATIVE_FIELD_INPUT_CLASS } from './native-field-shell';
+export type { NativeFieldShellProps } from './native-field-shell';
+export {
+  parseDateString,
+  formatDateString,
+  parseDateTimeString,
+  splitDateTime,
+  joinDateTime,
+} from './date-time-utils';

package/src/components/forms/datetime-field/native-field-shell.tsx

@@ -0,0 +1,113 @@
+'use client';
+
+/**
+ * NativeFieldShell — the shared visual layer for the native-engine date/time
+ * fields (`DateField`, `TimeField`, `DateTimeField`).
+ *
+ * The strategy (see @dev/planned/ui-core-datetime-fields/PLAN.md): the browser's
+ * native `<input type="date|time|datetime-local">` is the *input engine* — it
+ * gives segmented keyboard entry, locale-aware order, 12/24h, arrow-key
+ * increment, screen-reader support, and OS wheels on mobile for free. This shell
+ * owns everything the native input CANNOT do to our standard: the token-styled
+ * box (`bg-input`, `border-border`, `--ring` focus, `--radius`), a leading
+ * lucide icon, invalid/disabled states, and an OPTIONAL trailing popover trigger
+ * for pointer users.
+ *
+ * The native browser indicator (the clock/calendar glyph) is suppressed via
+ * `native-datetime-input` (see datetime-field.css) so there is exactly one
+ * icon — ours — and one picker — ours. Typing in the field and opening the
+ * popover both write the same value.
+ */
+
+import * as React from 'react';
+
+import { cn } from '../../../lib/utils';
+
+export interface NativeFieldShellProps {
+  /** Leading icon (lucide element). */
+  icon?: React.ReactNode;
+  /**
+   * When true, the leading icon is a real, sizeable click target that opens the
+   * popover — not a decorative glyph. The field wraps the shell in a
+   * `PopoverTrigger asChild` around the icon so tapping the icon (a much bigger,
+   * left-edge target than the small chevron) opens the picker. The centre of the
+   * field still belongs to the native `<input>` for typing.
+   */
+  iconOpensPopover?: boolean;
+  /** Invalid state — wires `aria-invalid` and a destructive border. Usually
+   *  driven by the surrounding `Field` / `Form` layer. */
+  invalid?: boolean;
+  disabled?: boolean;
+  className?: string;
+  /** The native `<input>` element, already typed and wired by the field. */
+  children: React.ReactNode;
+  /**
+   * Optional popover affordance. When provided, a trailing chevron button is
+   * shown; `open`/`onOpenChange` are controlled by the field so the icon and
+   * the button share one popover.
+   */
+  popoverTrigger?: React.ReactNode;
+}
+
+/**
+ * The class applied to the native `<input>` INSIDE the shell. Mirrors the
+ * standard `Input` surface/focus (bg-input, border, --ring) but drops the
+ * focus ring here — the ring is drawn on the shell so it wraps the icon and
+ * popover button too, reading as one control.
+ */
+export const NATIVE_FIELD_INPUT_CLASS = cn(
+  'native-datetime-input',
+  'peer w-full bg-transparent text-base md:text-sm outline-none',
+  'text-foreground placeholder:text-muted-foreground',
+  'disabled:cursor-not-allowed',
+  // Empty native date/time inputs render their placeholder segments muted so an
+  // unset field reads like a placeholder, not a value.
+  '[&:invalid]:text-muted-foreground',
+);
+
+/**
+ * The outer box. Draws the token surface + the crisp `--ring` focus edge when
+ * anything inside is focused (`focus-within`), matching the standard Input's
+ * sharp Vercel/Linear look rather than a blurry halo.
+ */
+export const NativeFieldShell = React.forwardRef<HTMLDivElement, NativeFieldShellProps>(
+  ({ icon, iconOpensPopover, invalid, disabled, className, children, popoverTrigger }, ref) => {
+    return (
+      <div
+        ref={ref}
+        data-invalid={invalid ? '' : undefined}
+        data-disabled={disabled ? '' : undefined}
+        aria-invalid={invalid || undefined}
+        className={cn(
+          'flex h-10 w-full items-center gap-2 rounded-[var(--radius)] border bg-input px-3 shadow-sm',
+          'transition-[color,background-color,border-color,box-shadow]',
+          'border-border',
+          // Crisp focus edge on the whole shell (border + 1px ring = ~2px clean
+          // outline). `:focus-within` so it lights whether the user tabs into
+          // the input or the popover button.
+          'focus-within:border-ring focus-within:ring-1 focus-within:ring-ring',
+          invalid &&
+            'border-destructive focus-within:border-destructive focus-within:ring-destructive',
+          disabled && 'cursor-not-allowed opacity-50',
+          className,
+        )}
+      >
+        {icon ? (
+          <span
+            className={cn(
+              'flex shrink-0 text-muted-foreground [&_svg]:size-4',
+              // Decorative by default (clicks fall through to the input). When
+              // the icon is a real popover trigger, it must receive clicks.
+              !iconOpensPopover && 'pointer-events-none',
+            )}
+          >
+            {icon}
+          </span>
+        ) : null}
+        {children}
+        {popoverTrigger}
+      </div>
+    );
+  },
+);
+NativeFieldShell.displayName = 'NativeFieldShell';

package/src/components/forms/datetime-field/popover-chevron.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+/**
+ * Shared popover triggers for the date/time fields, so the two large click
+ * targets (leading icon + trailing chevron) look and behave identically across
+ * all three fields. Both are `PopoverTrigger asChild` children, so the shell's
+ * `focus-within` ring covers them.
+ *
+ * Why two targets: the CENTRE of the field is the native `<input>` (for typing),
+ * so the popover can't open from there without stealing keyboard entry. The
+ * icon and the chevron are the two edges that DON'T type, so both open the
+ * picker — the icon in particular is a big, obvious left-edge target, far easier
+ * to hit than a lone chevron.
+ */
+
+import { ChevronDown } from 'lucide-react';
+import * as React from 'react';
+
+import { cn } from '../../../lib/utils';
+
+export const PopoverChevron = React.forwardRef<
+  HTMLButtonElement,
+  React.ButtonHTMLAttributes<HTMLButtonElement> & { label?: string }
+>(({ className, label = 'Open picker', ...props }, ref) => (
+  <button
+    ref={ref}
+    type="button"
+    aria-label={label}
+    className={cn(
+      'flex size-6 shrink-0 items-center justify-center rounded-[var(--radius-sm)] text-muted-foreground',
+      'transition-colors hover:bg-accent hover:text-foreground',
+      'focus-visible:outline-none disabled:pointer-events-none',
+      className,
+    )}
+    {...props}
+  >
+    <ChevronDown className="size-4" aria-hidden />
+  </button>
+));
+PopoverChevron.displayName = 'PopoverChevron';
+
+/**
+ * IconTrigger — the leading icon rendered as a real, comfortably-sized popover
+ * button. It hugs the left edge (`-ml-1` reclaims the shell's px-3) and carries
+ * a generous padded hit area so the target is far bigger than the glyph itself.
+ */
+export const IconTrigger = React.forwardRef<
+  HTMLButtonElement,
+  React.ButtonHTMLAttributes<HTMLButtonElement> & { label?: string }
+>(({ className, label = 'Open picker', children, ...props }, ref) => (
+  <button
+    ref={ref}
+    type="button"
+    aria-label={label}
+    className={cn(
+      '-ml-1 flex h-8 shrink-0 items-center rounded-[var(--radius-sm)] px-1.5 text-muted-foreground',
+      'transition-colors hover:bg-accent hover:text-foreground',
+      'focus-visible:outline-none disabled:pointer-events-none [&_svg]:size-4',
+      className,
+    )}
+    {...props}
+  >
+    {children}
+  </button>
+));
+IconTrigger.displayName = 'IconTrigger';

package/src/components/forms/datetime-field/time-field.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+/**
+ * TimeField — native `<input type="time">` in our token skin. Type `14:30`
+ * straight in (segmented keyboard entry, arrow increment); on touch the OS time
+ * wheel opens on tap. AM/PM vs 24-hour is decided by the browser from the user's
+ * locale — we don't render our own picker, so there's nothing to desync.
+ *
+ * Wire value is `HH:mm` (24h) — or `HH:mm:ss` when `step` yields seconds —
+ * matching the native input and the old `TimePicker` contract, so migration from
+ * the click-only `TimePicker` (kept as a back-compat alias) is mechanical.
+ */
+
+import { Clock } from 'lucide-react';
+import * as React from 'react';
+
+import { NativeFieldShell, NATIVE_FIELD_INPUT_CLASS } from './native-field-shell';
+
+export interface TimeFieldProps {
+  /** Value as `HH:mm` (24h). Controlled. */
+  value?: string;
+  /** Uncontrolled initial value. */
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  disabled?: boolean;
+  /** Invalid state — usually driven by the `Field` / `Form` layer. */
+  invalid?: boolean;
+  /** Native min/max (`HH:mm`). */
+  min?: string;
+  max?: string;
+  /**
+   * Native `step` in seconds. `60` (default) → HH:mm; smaller values expose a
+   * seconds segment. Controls the arrow-key increment too.
+   */
+  step?: number;
+  /** Form field name — the native input IS the form control. */
+  name?: string;
+  /**
+   * DOM id for the native control, so an external `<label htmlFor>` binds to
+   * the field a user actually focuses.
+   */
+  id?: string;
+  className?: string;
+  'aria-label'?: string;
+}
+
+export const TimeField = React.forwardRef<HTMLInputElement, TimeFieldProps>(
+  (
+    {
+      value: controlledValue,
+      defaultValue,
+      onChange,
+      disabled = false,
+      invalid = false,
+      min,
+      max,
+      step,
+      name,
+      id,
+      className,
+      'aria-label': ariaLabel,
+    },
+    ref,
+  ) => {
+    const isControlled = controlledValue !== undefined;
+    const [internal, setInternal] = React.useState(defaultValue ?? '');
+    const value = isControlled ? controlledValue : internal;
+
+    const commit = React.useCallback(
+      (next: string) => {
+        if (!isControlled) setInternal(next);
+        onChange?.(next);
+      },
+      [isControlled, onChange],
+    );
+
+    return (
+      <NativeFieldShell
+        icon={<Clock aria-hidden />}
+        invalid={invalid}
+        disabled={disabled}
+        className={className}
+      >
+        <input
+          ref={ref}
+          type="time"
+          className={NATIVE_FIELD_INPUT_CLASS}
+          value={value}
+          onChange={(e) => commit(e.target.value)}
+          disabled={disabled}
+          min={min}
+          max={max}
+          step={step}
+          name={name}
+          id={id}
+          aria-label={ariaLabel}
+          aria-invalid={invalid || undefined}
+        />
+      </NativeFieldShell>
+    );
+  },
+);
+TimeField.displayName = 'TimeField';

package/src/components/forms/label/index.tsx

@@ -7,8 +7,16 @@ import * as LabelPrimitive from '@radix-ui/react-label';
 
 import { cn } from '../../../lib/utils';
 
+// `select-none` is not cosmetic here.
+//
+// A label is text whose whole purpose is to be CLICKED, and a click that lands
+// slightly off — or a click that drags a pixel — leaves the word highlighted in
+// the selection colour. In a filter rail that reads as a selected FILTER rather
+// than selected TEXT, so the control reports a state the user never set. The
+// same shape appears in every checkbox list, radio group and switch row, which
+// is why it belongs to the primitive and not to any one screen.
 const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+  "select-none text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 )
 
 const Label = React.forwardRef<

package/src/components/forms/radio-group/index.tsx

@@ -29,7 +29,9 @@ const RadioGroupItem = React.forwardRef<
     <RadioGroupPrimitive.Item
       ref={ref}
       className={cn(
-        "aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        // `select-none` for the same reason as Checkbox and Switch: the dot is
+        // a click target, and a click that drags must not select text.
+        "aspect-square h-4 w-4 shrink-0 select-none rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
       {...props}

package/src/components/forms/switch/index.tsx

@@ -13,7 +13,9 @@ const Switch = React.forwardRef<
   <SwitchPrimitives.Root
     className={cn(
       // Track: generous Cloudflare-style pill (44×24) with an inset thumb.
-      "peer group relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full",
+      // `select-none`: a drag starting on the pill must toggle or do nothing —
+      // never paint a text selection across the row the switch sits in.
+      "peer group relative inline-flex h-6 w-11 shrink-0 cursor-pointer select-none items-center rounded-full",
       "p-0.5 outline-none transition-colors duration-200 ease-out",
       // On/off surfaces — all on-token so every preset & theme follows along.
       "data-[state=unchecked]:bg-input data-[state=checked]:bg-primary",

package/src/components/index.ts

@@ -42,10 +42,30 @@ export type { SegmentedInputProps } from './forms/segmented-input';
 export { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemText, TagsInputItemDelete } from './forms/tags-input';
 export type { TagsInputRootProps, TagsInputInputProps, TagsInputItemProps, TagsInputItemTextProps, TagsInputItemDeleteProps } from './forms/tags-input';
 
-// Time Picker
+// Time Picker (click-only legacy; prefer the native-engine TimeField below).
 export { TimePicker } from './forms/time-picker';
 export type { TimePickerProps } from './forms/time-picker';
 
+// Native-engine date/time fields — typeable, token-skinned, optional popover.
+export {
+  DateField,
+  TimeField,
+  DateTimeField,
+  NativeFieldShell,
+  NATIVE_FIELD_INPUT_CLASS,
+  parseDateString,
+  formatDateString,
+  parseDateTimeString,
+  splitDateTime,
+  joinDateTime,
+} from './forms/datetime-field';
+export type {
+  DateFieldProps,
+  TimeFieldProps,
+  DateTimeFieldProps,
+  NativeFieldShellProps,
+} from './forms/datetime-field';
+
 // Editable
 export { Editable, EditablePreview, EditableInput, EditableTextarea } from './forms/editable';
 export type { EditableRootProps, EditablePreviewProps, EditableInputProps, EditableTextareaProps } from './forms/editable';

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

@@ -34,6 +34,13 @@ const PopoverContent = React.forwardRef<
     <PopoverPrimitive.Content
       forceMount={forceMount}
       ref={ref}
+      // `data-slot` lets descendants detect they're inside a popover surface.
+      // The Calendar keys its `bg-transparent` override off
+      // `[[data-slot=popover-content]_&]` so a calendar rendered in a popover
+      // drops its own `bg-background` panel and inherits the popover surface —
+      // without this attribute that rule never matches and the calendar shows a
+      // mismatched darker rectangle inside the popover.
+      data-slot="popover-content"
       aria-describedby={undefined}
       align={align}
       sideOffset={sideOffset}

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

@@ -21,9 +21,20 @@
   --radius: 0.25rem;
   --border: hsl(0 0% 24%);
   --input: hsl(0 0% 24%);
-  --divider: hsl(0 0% 46% / 0.18);
+    /* 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%);
-  --card: hsl(0 0% 10%);
+  /* 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%);

package/src/styles/css/presets/ios.css

@@ -62,7 +62,11 @@
 .dark {
   --background: hsl(240 6% 10%);
   --foreground: hsl(0 0% 96%);
-  --card: hsl(240 6% 16%);
+    /* 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 6% 14%);
   --card-foreground: hsl(0 0% 96%);
   --popover: hsl(240 6% 20%);
   --popover-foreground: hsl(0 0% 96%);
@@ -76,10 +80,20 @@
   --accent-foreground: hsl(0 0% 96%);
   --destructive: hsl(0 100% 67%);
   --destructive-foreground: hsl(0 0% 100%);
-  --border: hsl(240 5% 27%);
+    /* A hairline divides, it does not glow. Ten points over --background is a
+     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 5% 20%);
   --input: hsl(240 5% 22%);
   --ring: hsl(211 100% 55%);
-  --divider: hsl(240 5% 48% / 0.18);
+    /* 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 5% 48% / 0.10);
   --radius: 0.75rem;
   --overlay: hsl(0 0% 0% / 0.55);
   --sidebar-background: hsl(240 6% 8%);

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

@@ -83,7 +83,11 @@
 .dark {
   --background: hsl(240 5% 8%);
   --foreground: hsl(0 0% 95%);
-  --card: hsl(240 3% 15%);
+    /* 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%);
@@ -99,9 +103,19 @@
   --accent-foreground: hsl(211 100% 72%);
   --destructive: hsl(3 100% 62%);
   --destructive-foreground: hsl(0 0% 9%);
-  --border: hsl(240 3% 22%);
+    /* A hairline divides, it does not glow. Ten points over --background is a
+     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%);
-  --divider: hsl(240 4% 46% / 0.18);
+    /* 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);
   --ring: hsl(211 100% 58%);
   --radius: 0.625rem;
   --overlay: hsl(0 0% 0% / 0.55);

package/src/styles/css/presets/soft.css

@@ -34,9 +34,19 @@
   --muted-foreground: hsl(240 5% 64%);
   --accent: hsl(240 5% 16%);
   --accent-foreground: hsl(0 0% 96%);
-  --border: hsl(240 5% 20%);
+    /* A hairline divides, it does not glow. Ten points over --background is a
+     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 5% 18%);
   --input: hsl(240 5% 20%);
-  --divider: hsl(240 5% 48% / 0.18);
+    /* 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 5% 48% / 0.10);
   --radius: 1rem;
   --sidebar-background: hsl(240 6% 6%);
   --sidebar-accent: hsl(240 5% 14%);

package/src/styles/css/presets/windows.css

@@ -92,9 +92,19 @@
   --accent-foreground: hsl(200 100% 75%);
   --destructive: hsl(0 90% 62%);
   --destructive-foreground: hsl(0 0% 100%);
-  --border: hsl(0 0% 28%);
+    /* A hairline divides, it does not glow. Ten points over --background is a
+     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(0 0% 23%);
   --input: hsl(0 0% 24%);
-  --divider: hsl(0 0% 46% / 0.18);
+    /* 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);
   --ring: hsl(200 100% 69%);
   --overlay: hsl(0 0% 0% / 0.55);
   --radius: 0.375rem;

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

@@ -44,14 +44,24 @@
   --destructive-foreground: hsl(0 0% 98%);
   /* Soft warm border — Claude draws hairlines from a light border at low
    * contrast, so a mid warm-gray keeps lines visible but never harsh. */
-  --border: hsl(48 3% 28%);
+    /* A hairline divides, it does not glow. Ten points over --background is a
+     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%);
   /* Input surface — a notch above card so fields read as raised controls. */
   --input: hsl(48 2.5% 24%);
   /* 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
    * hard opaque rule. Backs default + django-cfg (they don't re-declare it). */
-  --divider: hsl(48 4% 46% / 0.18);
+    /* 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(48 4% 46% / 0.10);
   /* 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);