@djangocfg/ui-core 2.1.444 → 2.1.446

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.444",
+  "version": "2.1.446",
   "description": "Pure React UI component library without Next.js dependencies - for Electron, Vite, CRA apps",
   "keywords": [
     "ui-components",
@@ -116,7 +116,7 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.444",
+    "@djangocfg/i18n": "^2.1.446",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
     "moment": "^2.30.1",
@@ -194,8 +194,8 @@
     "@chenglou/pretext": "*"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.444",
-    "@djangocfg/typescript-config": "^2.1.444",
+    "@djangocfg/i18n": "^2.1.446",
+    "@djangocfg/typescript-config": "^2.1.446",
     "@types/node": "^25.2.3",
     "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",

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

@@ -136,7 +136,9 @@ const ResizableHandle = ({
     return (
       <div
         className={cn(
-          "bg-border w-px",
+          // Separator between panels → `bg-divider` (soft hairline), not the
+          // opaque `bg-border` outline weight, so a resize seam stays quiet.
+          "bg-divider w-px",
           "data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full",
           className
         )}
@@ -147,7 +149,7 @@ const ResizableHandle = ({
   return (
     <ResizablePrimitive.PanelResizeHandle
       className={cn(
-        "relative flex items-center justify-center bg-border",
+        "relative flex items-center justify-center bg-divider",
         "w-px h-full",
         "hover:bg-primary/20 active:bg-primary/30",
         "transition-colors",

package/src/styles/README.md

@@ -68,8 +68,8 @@ This makes opacity modifiers (`bg-card/40`, `border-foreground/20`) resolve thro
 | `bg-primary` / `text-primary-foreground` | `--primary` | Brand CTA (filled buttons, links) — cyan |
 | `bg-secondary` / `text-secondary-foreground` | `--secondary` | Neutral filled controls |
 | `bg-destructive` / `text-destructive-foreground` | `--destructive` | Error / delete filled controls |
-| `border-border` | `--border` | Card outlines, control borders |
-| `border-divider` / `.divider-b` | `--divider` | **Hairline between rows** — deliberately *lighter than `--card`* so it stays visible on elevated surfaces (a `--border` line vanishes on a card) |
+| `border-border` | `--border` | **Outlines only** — card frames, control/input edges. *Not* for separators (see Presets § Border vs divider) |
+| `border-divider` / `.divider-b` / `bg-divider` | `--divider` | **All separators** — columns, header `border-b`, list rows, resize handles. A soft hairline (translucent on dark themes) so the chrome never reads as a heavy grid |
 | `bg-overlay` | `--overlay` | Modal scrim / backdrop behind dialogs, drawers, sheets — black scrim in both themes, the token owns the opacity |
 | `bg-input` | `--input` | Input **fill** — a notch off the panel so fields read as real controls (not flush holes). The input *border* uses `--border`, not `--input` |
 | `ring-ring` | `--ring` | Focus rings, selected outlines — **blue** (system-accent feel), independent of the cyan brand |
@@ -299,6 +299,35 @@ Two families, with different coverage by design:
 | `dense` | modifier | Smaller radius (0.25rem) — data-heavy admin UIs |
 | `high-contrast` | modifier | A11y boost — stronger borders, harder text, pure canvas |
 
+#### Border vs divider — outline weight vs translucent hairline
+
+`--border` and `--divider` are **two different roles**, not two shades of one:
+
+- **`--border`** — an OUTLINE: opaque, control-weight. Card frames, input
+  edges, panel outlines. Use `border-border` / `border border-border`.
+- **`--divider`** — a SEPARATOR: a soft hairline between things. Shell columns,
+  header `border-b` rules, list rows, resize handles. Use `border-divider` /
+  `.divider-b` / `bg-divider`, or `divide-*` on a `divide-y` stack.
+
+On the **dark** themes the separator token is now a **translucent** hairline —
+`hsl(H S 46-48% / 0.18)` — mirroring Apple's own `rgba(84,84,88,0.36)` approach:
+a light grey at low alpha that *dissolves into whatever sits behind it* instead
+of a fixed opaque line. This is deliberate. An opaque separator (even a dim one)
+read as a hard grid on a near-black canvas — every column edge and header rule
+looked heavy. A translucent hairline self-adapts: heavier where it crosses an
+elevated card, lighter on the page. Every dark preset carries it (`macos`,
+`ios`, `windows`, `dense`, `soft`, and the base `dark.css` behind
+`default`/`django-cfg`); **`high-contrast` keeps an opaque divider on purpose**
+(a11y wants the harder line). Light themes keep an opaque divider too — a
+translucent line on white gains nothing.
+
+The alpha was tuned by eye in a live cmdop-web session (0.18 is quiet-but-present;
+lower starts to vanish on the page).
+
+**If a dark surface looks too contrasty**, the culprit is almost always a
+column/row/header separator wrongly drawn with `--border` (the outline weight)
+instead of `--divider` — move it to `border-divider` / `var(--divider)`.
+
 ### Apply a preset
 
 ```tsx

package/src/styles/presets/themes/dense.ts

@@ -23,7 +23,7 @@ export const densePreset: ThemePreset = {
     radius: '0.25rem',
     border: 'hsl(0 0% 24%)',
     input: 'hsl(0 0% 24%)',
-    divider: 'hsl(0 0% 18%)',
+    divider: 'hsl(0 0% 46% / 0.18)',  // translucent hairline — dissolves into the page
     muted: 'hsl(0 0% 12%)',
     card: 'hsl(0 0% 10%)',
     accent: 'hsl(0 0% 14%)',

package/src/styles/presets/themes/ios.ts

@@ -78,7 +78,7 @@ export const iosPreset: ThemePreset = {
     border: 'hsl(240 5% 27%)',   // raised so outlines read on the dark page
     input: 'hsl(240 5% 22%)',
     ring: 'hsl(211 100% 55%)',
-    divider: 'hsl(240 5% 21%)',  // hairline, softer than border
+    divider: 'hsl(240 5% 48% / 0.18)',  // translucent hairline — dissolves into the page
     radius: '0.75rem',
     // Modal scrim — lighter than base 0.7 so the dark page still reads behind.
     overlay: 'hsl(0 0% 0% / 0.55)',

package/src/styles/presets/themes/macos.ts

@@ -53,9 +53,10 @@ export const macosPreset: ThemePreset = {
     destructive: 'hsl(2 100% 59%)',
     'destructive-foreground': 'hsl(0 0% 100%)',
     // Apple opaque separator: rgba(60,60,67,0.29) on white ≈ #C6C6C8 → HSL 240 3% 78%.
-    // Nudged a touch darker (78→74) so control/panel outlines actually read on
-    // white cards — the pure hairline vanished on elevated surfaces.
-    border: 'hsl(240 3% 74%)',
+    // Kept at the Apple hairline value (78%). An earlier build nudged this darker
+    // (78→74) to force outlines onto white cards, but that over-contrasted every
+    // panel/header `border-b` on the grouped canvas — back to the HIG hairline.
+    border: 'hsl(240 3% 78%)',
     input: 'hsl(240 8% 93%)',
     // Row hairline — a touch lighter than border so it reads on white cards
     divider: 'hsl(240 4% 83%)',
@@ -128,14 +129,22 @@ export const macosPreset: ThemePreset = {
     // systemRed dark #FF453A
     destructive: 'hsl(3 100% 62%)',
     'destructive-foreground': 'hsl(0 0% 100%)',
-    // Separator dark: rgba(84,84,88,0.36). Raised 22→28 — Apple's hairline is
-    // authored for content-on-content, but on the near-black #141414 page it was
-    // invisible, so control/panel outlines had no edge. 28 keeps it a hairline
-    // while actually drawing against the dark canvas.
-    border: 'hsl(240 3% 28%)',
+    // Control/panel OUTLINE — input & card frames, not separators. Opaque 22%
+    // reads cleanly as a control edge on card (L15) surfaces. Structural
+    // separators (shell columns, headers, list rows) do NOT use this — they use
+    // `--divider`, which is a softer translucent hairline (see below), so the
+    // outline weight here never turns the chrome into a hard grid.
+    border: 'hsl(240 3% 22%)',
     input: 'hsl(240 3% 22%)',
-    // Row hairline — softer than border so dark rows don't read as a hard rule
-    divider: 'hsl(240 3% 22%)',
+    // Separator hairline — TRANSLUCENT, mirroring Apple's rgba(84,84,88,0.36):
+    // a light grey at low alpha that dissolves into whatever sits behind it
+    // instead of a fixed opaque line. This is the token for ALL structural
+    // separators — shell columns (rail↔list↔chat), header `border-b` rules, and
+    // list-row hairlines — deliberately softer than the opaque `--border`
+    // outline so the chrome never reads as a hard grid on the near-black canvas.
+    // 46% L @ 0.18 alpha picked live in cmdop-web: a quiet, self-adapting
+    // hairline (heavier over an elevated card, lighter on the page).
+    divider: 'hsl(240 4% 46% / 0.18)',
     ring: 'hsl(211 100% 58%)',
     radius: '0.625rem',
     // Modal scrim — a touch lighter than the base 0.7. The page is already near
@@ -149,8 +158,9 @@ export const macosPreset: ThemePreset = {
     'sidebar-primary-foreground': 'hsl(0 0% 100%)',
     'sidebar-accent': 'hsl(211 22% 16%)',
     'sidebar-accent-foreground': 'hsl(211 100% 72%)',
-    // Raised 15→22 to match --border: the sidebar edge was lost against the
-    // near-black rail + page.
+    // 22 — the sidebar rail floor is #0D0D0F (L5), darker than the page (L8), so
+    // its edge needs a touch more lift than the page-calibrated `--border` (18)
+    // to read at all. Still a hairline, not the hard rule an outline weight draws.
     'sidebar-border': 'hsl(240 3% 22%)',
     'sidebar-ring': 'hsl(211 100% 58%)',
     // Chart: brighter variants for contrast on dark

package/src/styles/presets/themes/soft.ts

@@ -39,7 +39,7 @@ export const softPreset: ThemePreset = {
     'accent-foreground': 'hsl(0 0% 96%)',
     border: 'hsl(240 5% 20%)',
     input: 'hsl(240 5% 20%)',
-    divider: 'hsl(240 5% 16%)',
+    divider: 'hsl(240 5% 48% / 0.18)',  // translucent hairline — dissolves into the page
     radius: '1rem',
     'sidebar-background': 'hsl(240 6% 6%)',
     'sidebar-accent': 'hsl(240 5% 14%)',

package/src/styles/presets/themes/windows.ts

@@ -115,7 +115,7 @@ export const windowsPreset: ThemePreset = {
     border: 'hsl(0 0% 28%)',
     input: 'hsl(0 0% 24%)',
     // Hairline between rows — softer than border
-    divider: 'hsl(0 0% 22%)',
+    divider: 'hsl(0 0% 46% / 0.18)',  // translucent hairline — dissolves into the page
     ring: 'hsl(200 100% 69%)',
     // Fluent SmokeFillColorDefault dark — dims the dark page behind the dialog.
     overlay: 'hsl(0 0% 0% / 0.55)',

package/src/styles/theme/dark.css

@@ -44,9 +44,11 @@
   --border: hsl(48 3% 28%);
   /* Input surface — a notch above card so fields read as raised controls. */
   --input: hsl(48 2.5% 24%);
-  /* Divider — hairline; slightly softer than --border so rows don't read as a
-   * hard rule (Claude menus/rows). */
-  --divider: hsl(48 3% 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);
   /* 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);