@nextlyhq/ui 0.0.2-alpha.56 → 0.0.2-alpha.58

package/dist/tailwind-preset.d.ts

@@ -6,8 +6,13 @@ declare const uiPreset: {
                 overlay: string;
                 "overlay-soft": string;
                 "overlay-strong": string;
-                border: string;
+                border: {
+                    DEFAULT: string;
+                    subtle: string;
+                    strong: string;
+                };
                 input: string;
+                "control-border": string;
                 ring: string;
                 background: string;
                 foreground: string;
@@ -41,6 +46,37 @@ declare const uiPreset: {
                     DEFAULT: string;
                     foreground: string;
                 };
+                highlight: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                code: {
+                    bg: string;
+                    fg: string;
+                    comment: string;
+                    keyword: string;
+                    string: string;
+                    number: string;
+                    function: string;
+                    operator: string;
+                    punctuation: string;
+                    variable: string;
+                    tag: string;
+                    deleted: string;
+                    inserted: string;
+                };
+                sidebar: {
+                    DEFAULT: string;
+                    background: string;
+                    foreground: string;
+                    primary: string;
+                    "primary-foreground": string;
+                    accent: string;
+                    "accent-background": string;
+                    "accent-foreground": string;
+                    border: string;
+                    ring: string;
+                };
                 popover: {
                     DEFAULT: string;
                     foreground: string;

package/dist/tailwind-preset.mjs

@@ -1,5 +1,5 @@
 // src/tailwind-preset.ts
-var statusScale = (base) => ({
+var tintScale = (base) => ({
   50: `color-mix(in srgb, var(${base}), white 95%)`,
   100: `color-mix(in srgb, var(${base}), white 90%)`,
   200: `color-mix(in srgb, var(${base}), white 70%)`,
@@ -23,14 +23,24 @@ var uiPreset = {
         overlay: "var(--nx-overlay)",
         "overlay-soft": "var(--nx-overlay-soft)",
         "overlay-strong": "var(--nx-overlay-strong)",
-        border: "var(--nx-border)",
+        border: {
+          DEFAULT: "var(--nx-border)",
+          subtle: "var(--nx-border-subtle)",
+          strong: "var(--nx-border-strong)"
+        },
         input: "var(--nx-input)",
+        // The boundary of a control that draws no fill of its own -- an
+        // unchecked checkbox, radio or switch. Separate from `input` because
+        // that one is the field border weight, which sits below the 3:1
+        // non-text minimum by design.
+        "control-border": "var(--nx-control-border)",
         ring: "var(--nx-ring)",
         background: "var(--nx-background)",
         foreground: "var(--nx-foreground)",
         primary: {
           DEFAULT: "var(--nx-primary)",
-          foreground: "var(--nx-primary-foreground)"
+          foreground: "var(--nx-primary-foreground)",
+          ...tintScale("--nx-primary")
         },
         secondary: {
           DEFAULT: "var(--nx-secondary)",
@@ -41,18 +51,18 @@ var uiPreset = {
           // Saturated fill for solid buttons, distinct from the text-tuned base.
           solid: "var(--nx-destructive-solid)",
           foreground: "var(--nx-destructive-foreground)",
-          ...statusScale("--nx-destructive")
+          ...tintScale("--nx-destructive")
         },
         success: {
           DEFAULT: "var(--nx-success)",
           solid: "var(--nx-success-solid)",
           foreground: "var(--nx-success-foreground)",
-          ...statusScale("--nx-success")
+          ...tintScale("--nx-success")
         },
         warning: {
           DEFAULT: "var(--nx-warning)",
           foreground: "var(--nx-warning-foreground)",
-          ...statusScale("--nx-warning")
+          ...tintScale("--nx-warning")
         },
         muted: {
           DEFAULT: "var(--nx-muted)",
@@ -60,7 +70,45 @@ var uiPreset = {
         },
         accent: {
           DEFAULT: "var(--nx-accent)",
-          foreground: "var(--nx-accent-foreground)"
+          foreground: "var(--nx-accent-foreground)",
+          ...tintScale("--nx-accent")
+        },
+        // The editor's highlight mark, and the syntax colors, so authored
+        // content and code blocks theme like everything else.
+        highlight: {
+          DEFAULT: "var(--nx-highlight)",
+          foreground: "var(--nx-highlight-foreground)"
+        },
+        code: {
+          bg: "var(--nx-code-bg)",
+          fg: "var(--nx-code-fg)",
+          comment: "var(--nx-code-comment)",
+          keyword: "var(--nx-code-keyword)",
+          string: "var(--nx-code-string)",
+          number: "var(--nx-code-number)",
+          function: "var(--nx-code-function)",
+          operator: "var(--nx-code-operator)",
+          punctuation: "var(--nx-code-punctuation)",
+          variable: "var(--nx-code-variable)",
+          tag: "var(--nx-code-tag)",
+          deleted: "var(--nx-code-deleted)",
+          inserted: "var(--nx-code-inserted)"
+        },
+        // `sidebar` and `sidebar-background` are the same value under two
+        // names, and `sidebar-accent` and `sidebar-accent-background` likewise.
+        // Both pairs exist in the v4 block and both spellings are in use, so
+        // dropping either here would leave a live utility generating nothing.
+        sidebar: {
+          DEFAULT: "var(--nx-sidebar-background)",
+          background: "var(--nx-sidebar-background)",
+          foreground: "var(--nx-sidebar-foreground)",
+          primary: "var(--nx-sidebar-primary)",
+          "primary-foreground": "var(--nx-sidebar-primary-foreground)",
+          accent: "var(--nx-sidebar-accent)",
+          "accent-background": "var(--nx-sidebar-accent)",
+          "accent-foreground": "var(--nx-sidebar-accent-foreground)",
+          border: "var(--nx-sidebar-border)",
+          ring: "var(--nx-sidebar-ring)"
         },
         popover: {
           DEFAULT: "var(--nx-popover)",

package/dist/tailwind-preset.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/tailwind-preset.ts"],"names":[],"mappings":"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","file":"tailwind-preset.mjs","sourcesContent":["/**\n * Tailwind CSS preset for @nextlyhq/ui components.\n *\n * Defines the CSS custom property contract that all UI components expect.\n * Consumers must provide the actual CSS variable values in their stylesheets.\n *\n * Usage (Tailwind v3, ESM):\n *   // tailwind.config.ts\n *   import uiPreset from \"@nextlyhq/ui/tailwind-preset\";\n *   export default { presets: [uiPreset], ... };\n *\n * Usage (Tailwind v3, CommonJS):\n *   // tailwind.config.js\n *   const { uiPreset } = require(\"@nextlyhq/ui/tailwind-preset\");\n *   module.exports = { presets: [uiPreset], ... };\n *\n * Usage (Tailwind v4 with @config):\n *   Consumers define the equivalent @theme tokens in their CSS.\n *   This file serves as the reference contract.\n */\n/**\n * The numbered shade scale for a status color, mixed from its base the same way\n * the v4 `@theme` block does, so v3 preset consumers get the same utilities the\n * components emit (`bg-destructive-700`, `bg-success-100 text-success-700`, ...).\n */\nconst statusScale = (base: string): Record<number, string> => ({\n  50: `color-mix(in srgb, var(${base}), white 95%)`,\n  100: `color-mix(in srgb, var(${base}), white 90%)`,\n  200: `color-mix(in srgb, var(${base}), white 70%)`,\n  300: `color-mix(in srgb, var(${base}), white 50%)`,\n  400: `color-mix(in srgb, var(${base}), white 30%)`,\n  500: `var(${base})`,\n  600: `color-mix(in srgb, var(${base}), black 10%)`,\n  700: `color-mix(in srgb, var(${base}), black 30%)`,\n  800: `color-mix(in srgb, var(${base}), black 50%)`,\n  900: `color-mix(in srgb, var(${base}), black 70%)`,\n  950: `color-mix(in srgb, var(${base}), black 85%)`,\n});\n\n/** @experimental */\nconst uiPreset = {\n  theme: {\n    extend: {\n      colors: {\n        // The modal scrim. Mapped here as well as in the v4 `@theme` block,\n        // because this preset is the documented Tailwind v3 path and reads\n        // none of that: without these two, `bg-overlay` generates no rule at\n        // all and every backdrop is transparent rather than merely unthemed.\n        overlay: \"var(--nx-overlay)\",\n        \"overlay-soft\": \"var(--nx-overlay-soft)\",\n        \"overlay-strong\": \"var(--nx-overlay-strong)\",\n        border: \"var(--nx-border)\",\n        input: \"var(--nx-input)\",\n        ring: \"var(--nx-ring)\",\n        background: \"var(--nx-background)\",\n        foreground: \"var(--nx-foreground)\",\n        primary: {\n          DEFAULT: \"var(--nx-primary)\",\n          foreground: \"var(--nx-primary-foreground)\",\n        },\n        secondary: {\n          DEFAULT: \"var(--nx-secondary)\",\n          foreground: \"var(--nx-secondary-foreground)\",\n        },\n        destructive: {\n          DEFAULT: \"var(--nx-destructive)\",\n          // Saturated fill for solid buttons, distinct from the text-tuned base.\n          solid: \"var(--nx-destructive-solid)\",\n          foreground: \"var(--nx-destructive-foreground)\",\n          ...statusScale(\"--nx-destructive\"),\n        },\n        success: {\n          DEFAULT: \"var(--nx-success)\",\n          solid: \"var(--nx-success-solid)\",\n          foreground: \"var(--nx-success-foreground)\",\n          ...statusScale(\"--nx-success\"),\n        },\n        warning: {\n          DEFAULT: \"var(--nx-warning)\",\n          foreground: \"var(--nx-warning-foreground)\",\n          ...statusScale(\"--nx-warning\"),\n        },\n        muted: {\n          DEFAULT: \"var(--nx-muted)\",\n          foreground: \"var(--nx-muted-foreground)\",\n        },\n        accent: {\n          DEFAULT: \"var(--nx-accent)\",\n          foreground: \"var(--nx-accent-foreground)\",\n        },\n        popover: {\n          DEFAULT: \"var(--nx-popover)\",\n          foreground: \"var(--nx-popover-foreground)\",\n        },\n        card: {\n          DEFAULT: \"var(--nx-card)\",\n          foreground: \"var(--nx-card-foreground)\",\n        },\n      },\n      borderRadius: {\n        lg: \"var(--radius)\",\n        md: \"calc(var(--radius) - 2px)\",\n        sm: \"calc(var(--radius) - 4px)\",\n      },\n      keyframes: {\n        \"accordion-down\": {\n          from: { height: \"0\" },\n          to: { height: \"var(--radix-accordion-content-height)\" },\n        },\n        \"accordion-up\": {\n          from: { height: \"var(--radix-accordion-content-height)\" },\n          to: { height: \"0\" },\n        },\n      },\n      animation: {\n        \"accordion-down\": \"accordion-down 0.3s cubic-bezier(0.87, 0, 0.13, 1)\",\n        \"accordion-up\": \"accordion-up 0.3s cubic-bezier(0.87, 0, 0.13, 1)\",\n      },\n    },\n  },\n};\n\n// Exported both ways on purpose. CommonJS cannot represent a default-only\n// module without `module.exports =`, which makes the emitted declarations\n// disagree with the runtime shape (attw's FalseExportDefault); a named export\n// alongside it keeps `require()` and `import` consistent and typed.\nexport { uiPreset };\nexport default uiPreset;\n"]}
+{"version":3,"sources":["../src/tailwind-preset.ts"],"names":[],"mappings":"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","file":"tailwind-preset.mjs","sourcesContent":["/**\n * Tailwind CSS preset for @nextlyhq/ui components.\n *\n * Defines the CSS custom property contract that all UI components expect.\n * Consumers must provide the actual CSS variable values in their stylesheets.\n *\n * Usage (Tailwind v3, ESM):\n *   // tailwind.config.ts\n *   import uiPreset from \"@nextlyhq/ui/tailwind-preset\";\n *   export default { presets: [uiPreset], ... };\n *\n * Usage (Tailwind v3, CommonJS):\n *   // tailwind.config.js\n *   const { uiPreset } = require(\"@nextlyhq/ui/tailwind-preset\");\n *   module.exports = { presets: [uiPreset], ... };\n *\n * Usage (Tailwind v4 with @config):\n *   Consumers define the equivalent @theme tokens in their CSS.\n *   This file serves as the reference contract.\n */\n/**\n * The numbered shade scale for a color, mixed from its base the same way the v4\n * `@theme` block does, so v3 preset consumers get the same utilities the\n * components emit (`bg-destructive-700`, `bg-primary-500`, `border-primary-300`).\n *\n * Named for the derivation rather than for one caller: the status colors, the\n * primary and the accent all use it, and `@theme` derives all five identically.\n */\nconst tintScale = (base: string): Record<number, string> => ({\n  50: `color-mix(in srgb, var(${base}), white 95%)`,\n  100: `color-mix(in srgb, var(${base}), white 90%)`,\n  200: `color-mix(in srgb, var(${base}), white 70%)`,\n  300: `color-mix(in srgb, var(${base}), white 50%)`,\n  400: `color-mix(in srgb, var(${base}), white 30%)`,\n  500: `var(${base})`,\n  600: `color-mix(in srgb, var(${base}), black 10%)`,\n  700: `color-mix(in srgb, var(${base}), black 30%)`,\n  800: `color-mix(in srgb, var(${base}), black 50%)`,\n  900: `color-mix(in srgb, var(${base}), black 70%)`,\n  950: `color-mix(in srgb, var(${base}), black 85%)`,\n});\n\n/** @experimental */\nconst uiPreset = {\n  theme: {\n    extend: {\n      colors: {\n        // The modal scrim. Mapped here as well as in the v4 `@theme` block,\n        // because this preset is the documented Tailwind v3 path and reads\n        // none of that: without these two, `bg-overlay` generates no rule at\n        // all and every backdrop is transparent rather than merely unthemed.\n        overlay: \"var(--nx-overlay)\",\n        \"overlay-soft\": \"var(--nx-overlay-soft)\",\n        \"overlay-strong\": \"var(--nx-overlay-strong)\",\n        border: {\n          DEFAULT: \"var(--nx-border)\",\n          subtle: \"var(--nx-border-subtle)\",\n          strong: \"var(--nx-border-strong)\",\n        },\n        input: \"var(--nx-input)\",\n        // The boundary of a control that draws no fill of its own -- an\n        // unchecked checkbox, radio or switch. Separate from `input` because\n        // that one is the field border weight, which sits below the 3:1\n        // non-text minimum by design.\n        \"control-border\": \"var(--nx-control-border)\",\n        ring: \"var(--nx-ring)\",\n        background: \"var(--nx-background)\",\n        foreground: \"var(--nx-foreground)\",\n        primary: {\n          DEFAULT: \"var(--nx-primary)\",\n          foreground: \"var(--nx-primary-foreground)\",\n          ...tintScale(\"--nx-primary\"),\n        },\n        secondary: {\n          DEFAULT: \"var(--nx-secondary)\",\n          foreground: \"var(--nx-secondary-foreground)\",\n        },\n        destructive: {\n          DEFAULT: \"var(--nx-destructive)\",\n          // Saturated fill for solid buttons, distinct from the text-tuned base.\n          solid: \"var(--nx-destructive-solid)\",\n          foreground: \"var(--nx-destructive-foreground)\",\n          ...tintScale(\"--nx-destructive\"),\n        },\n        success: {\n          DEFAULT: \"var(--nx-success)\",\n          solid: \"var(--nx-success-solid)\",\n          foreground: \"var(--nx-success-foreground)\",\n          ...tintScale(\"--nx-success\"),\n        },\n        warning: {\n          DEFAULT: \"var(--nx-warning)\",\n          foreground: \"var(--nx-warning-foreground)\",\n          ...tintScale(\"--nx-warning\"),\n        },\n        muted: {\n          DEFAULT: \"var(--nx-muted)\",\n          foreground: \"var(--nx-muted-foreground)\",\n        },\n        accent: {\n          DEFAULT: \"var(--nx-accent)\",\n          foreground: \"var(--nx-accent-foreground)\",\n          ...tintScale(\"--nx-accent\"),\n        },\n        // The editor's highlight mark, and the syntax colors, so authored\n        // content and code blocks theme like everything else.\n        highlight: {\n          DEFAULT: \"var(--nx-highlight)\",\n          foreground: \"var(--nx-highlight-foreground)\",\n        },\n        code: {\n          bg: \"var(--nx-code-bg)\",\n          fg: \"var(--nx-code-fg)\",\n          comment: \"var(--nx-code-comment)\",\n          keyword: \"var(--nx-code-keyword)\",\n          string: \"var(--nx-code-string)\",\n          number: \"var(--nx-code-number)\",\n          function: \"var(--nx-code-function)\",\n          operator: \"var(--nx-code-operator)\",\n          punctuation: \"var(--nx-code-punctuation)\",\n          variable: \"var(--nx-code-variable)\",\n          tag: \"var(--nx-code-tag)\",\n          deleted: \"var(--nx-code-deleted)\",\n          inserted: \"var(--nx-code-inserted)\",\n        },\n        // `sidebar` and `sidebar-background` are the same value under two\n        // names, and `sidebar-accent` and `sidebar-accent-background` likewise.\n        // Both pairs exist in the v4 block and both spellings are in use, so\n        // dropping either here would leave a live utility generating nothing.\n        sidebar: {\n          DEFAULT: \"var(--nx-sidebar-background)\",\n          background: \"var(--nx-sidebar-background)\",\n          foreground: \"var(--nx-sidebar-foreground)\",\n          primary: \"var(--nx-sidebar-primary)\",\n          \"primary-foreground\": \"var(--nx-sidebar-primary-foreground)\",\n          accent: \"var(--nx-sidebar-accent)\",\n          \"accent-background\": \"var(--nx-sidebar-accent)\",\n          \"accent-foreground\": \"var(--nx-sidebar-accent-foreground)\",\n          border: \"var(--nx-sidebar-border)\",\n          ring: \"var(--nx-sidebar-ring)\",\n        },\n        popover: {\n          DEFAULT: \"var(--nx-popover)\",\n          foreground: \"var(--nx-popover-foreground)\",\n        },\n        card: {\n          DEFAULT: \"var(--nx-card)\",\n          foreground: \"var(--nx-card-foreground)\",\n        },\n      },\n      borderRadius: {\n        lg: \"var(--radius)\",\n        md: \"calc(var(--radius) - 2px)\",\n        sm: \"calc(var(--radius) - 4px)\",\n      },\n      keyframes: {\n        \"accordion-down\": {\n          from: { height: \"0\" },\n          to: { height: \"var(--radix-accordion-content-height)\" },\n        },\n        \"accordion-up\": {\n          from: { height: \"var(--radix-accordion-content-height)\" },\n          to: { height: \"0\" },\n        },\n      },\n      animation: {\n        \"accordion-down\": \"accordion-down 0.3s cubic-bezier(0.87, 0, 0.13, 1)\",\n        \"accordion-up\": \"accordion-up 0.3s cubic-bezier(0.87, 0, 0.13, 1)\",\n      },\n    },\n  },\n};\n\n// Exported both ways on purpose. CommonJS cannot represent a default-only\n// module without `module.exports =`, which makes the emitted declarations\n// disagree with the runtime shape (attw's FalseExportDefault); a named export\n// alongside it keeps `require()` and `import` consistent and typed.\nexport { uiPreset };\nexport default uiPreset;\n"]}

package/dist/theme.css

@@ -139,6 +139,7 @@
   --color-border-subtle: var(--nx-border-subtle);
   --color-border-strong: var(--nx-border-strong);
   --color-input: var(--nx-input);
+  --color-control-border: var(--nx-control-border);
   --color-ring: var(--nx-ring);
   --color-background: var(--nx-background);
   --color-foreground: var(--nx-foreground);
@@ -418,16 +419,18 @@
    * rounded-xl / rounded-2xl are NOT tiers of this knob. `tailwind-preset.ts`
    * exports only lg/md/sm, so a plugin using the preset gets Tailwind's fixed
    * 0.75rem / 1rem for them, detached from --radius; and the definitions below
-   * add to the knob rather than subtracting, so at the shipped --radius: 0 they
-   * resolve to 4px and 8px — visibly round inside a square admin. Nothing in the
-   * repo uses them. Treat them as off-contract and pick from sm/md/lg.
+   * ADD to the knob rather than subtracting, so they always sit rounder than
+   * the container tier and drift further as the knob grows. Nothing in the repo
+   * uses them. Treat them as off-contract and pick from sm/md/lg.
    *
-   * What --radius: 0 really does: `lg` is 0, and `sm` and `md` compute to -4px
-   * and -2px. They render square only because border-radius clamps a negative
-   * length to 0 at used-value time. The token itself stays negative, so reading
-   * `--radius-sm` for padding, an inset, or through getComputedStyle yields
-   * -4px, not 0. Anything that consumes a step as a length rather than as a
-   * corner must clamp it itself.
+   * At the shipped 0.5rem the three tiers are 4px, 6px and 8px. All positive,
+   * which matters: `sm` and `md` SUBTRACT from the knob, so a knob under 4px
+   * makes them negative. They still render square, because border-radius clamps
+   * a negative length to 0 at used-value time — but the token keeps its
+   * negative value, so reading `--radius-sm` for a padding, an inset, or
+   * through getComputedStyle yields -4px rather than 0. Anything consuming a
+   * step as a LENGTH rather than as a corner must clamp it itself, and that
+   * obligation returns the moment someone dials the knob back down.
    *
    * A site that genuinely must stay square keeps `rounded-none` WITH an inline
    * comment saying why — overlapped-border strips, full-bleed fills inside an
@@ -519,11 +522,34 @@
  * and it shadows the real weight utility rather than adding to it.
  * ============================================ */
 @theme {
-  --font-sans: var(--font-inter), Inter, sans-serif;
+  /* The host app supplies the face through the variable; the family name is the
+   * var()'s own FALLBACK ARGUMENT, covering a host that installed the font
+   * without `next/font`, and the generic stack after it covers a host that did
+   * neither. Naming only the family would resolve to nothing under `next/font`,
+   * which self-hosts the face and exposes it ONLY as a variable -- a bare
+   * "Geist" there silently falls through to the system sans.
+   *
+   * The fallback has to sit INSIDE the parentheses. A family listed after the
+   * closing `)` is not reached when the variable is undefined: an unresolved
+   * `var()` with no fallback makes the whole declaration invalid at
+   * computed-value time, which for an inherited property like font-family means
+   * the element inherits its parent's face and the entire stack is discarded.
+   * The comma list looks like a fallback chain and is not one, so a host that
+   * skipped the variable rendered in whatever the page already used rather than
+   * in the generic sans this stack names.
+   *
+   * These are declared in a non-inline `@theme`, so they are emitted into
+   * `:root` and substitution happens THERE, not on the consuming element. A
+   * host must expose the variable at or above that scope -- `next/font`'s
+   * generated class belongs on `<html>`. On `<body>` the variable is invisible
+   * to this declaration no matter how it is spelled. */
+  --font-sans:
+    var(--font-geist, Geist), ui-sans-serif, system-ui, -apple-system,
+    "Segoe UI", sans-serif;
   --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
   --font-mono:
-    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
-    "Courier New", monospace;
+    var(--font-geist-mono, "Geist Mono"), ui-monospace, SFMono-Regular, Menlo,
+    Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 
   /* Body text, captions */
   --font-weight-normal: 400;
@@ -733,9 +759,12 @@
    * light enough to read as text on the page is too light for white text, so
    * success splits the fill and destructive flips its ink to black instead.
    * The on-color token is what varies, not just the fill. */
-  /* Darkened from red-500; renders as #d92c32, ~4.8:1 as text on white. */
-  --nx-destructive: oklch(0.5661 0.19 23.03);
-  --nx-destructive-solid: oklch(0.5661 0.19 23.03);
+  /* red-500 itself, the reference palette's red. It is lighter than the 4.5:1
+   * text minimum allows; darkening it to pass reads as a different colour, and
+   * the palette is built around this one. `contrast/accepted.ts` records the
+   * affected pairings with their measured ratios. */
+  --nx-destructive: oklch(0.63 0.19 23.03);
+  --nx-destructive-solid: oklch(0.63 0.19 23.03);
   --nx-destructive-foreground: oklch(1 0 0);
   /* white */
   /* Darkened from green-600; renders as #00852c, ~4.8:1 as text on white. */
@@ -803,10 +832,33 @@
   --nx-overlay-soft: oklch(0 0 0 / 0.4);
   --nx-border-subtle: color-mix(in srgb, oklch(0.92 0 0), transparent 60%);
   --nx-border: oklch(0.92 0 0);
-  /* Alpha raised so the composited strong border clears WCAG 3:1 / ~4:1 (was 2.11:1). */
-  --nx-border-strong: oklch(0.58 0 0);
-  /* Darkened so the field border clears WCAG 3:1 on the page (was 2.32:1). */
-  --nx-input: oklch(0.6154 0 0);
+  /* These two sit BELOW the WCAG 1.4.11 3:1 minimum for a control boundary,
+   * deliberately, to keep the light border weight the palette is designed
+   * around. `contrast/accepted.ts` records each affected pairing with its
+   * measured ratio and is what keeps that visible rather than silent; the
+   * contrast suite reads that list, so neither token can drift further without
+   * failing. */
+  --nx-border-strong: color-mix(in srgb, oklch(0.92 0 0), black 25%);
+  --nx-input: oklch(0.94 0 0);
+  /* The boundary of a control that has NOTHING ELSE to identify it.
+   *
+   * A text field at --nx-input is identifiable without its edge: it carries a
+   * label, a placeholder, a value, and a focus ring the moment it is used. An
+   * unchecked checkbox or radio is only the box. Its border is not decoration
+   * around the control, it IS the control, so 1.4.11's 3:1 applies with nothing
+   * to fall back on -- and at the reference palette's border weight the box is
+   * effectively invisible.
+   *
+   * These were one token, which is why the reference weight could not be taken
+   * without losing the checkbox. They are two questions -- "how heavy is a field
+   * edge" and "can this control be seen at all" -- and they only shared an
+   * answer by accident. Splitting them is what lets the field borders match the
+   * reference while the controls stay identifiable.
+   *
+   * Solved to the LIGHTEST value that still clears 3:1 with the margin the
+   * contrast suite requires, against the darkest surface a control lands on, so
+   * it sits as close to the reference weight as the criterion permits. */
+  --nx-control-border: oklch(0.62 0 0);
   --nx-ring: var(--nx-primary);
 
   /* The base colour of the elevation ramp (--shadow-sm..xl, -inner-subtle,
@@ -825,7 +877,10 @@
   /* red-500 */
 
   /* Design tokens */
-  --radius: 0px;
+  /* The one corner knob. Every tier below derives from it, so this single
+   * declaration re-rounds the whole admin and a plugin built against the
+   * published preset re-rounds with it. */
+  --radius: 0.5rem;
 
   /* Control sizing — derived from a single height knob so control density
    * scales from one place. Steps map to the control size variants:
@@ -843,19 +898,35 @@
   /* Sidebar specific colors - using Slate scale */
   --nx-sidebar-background: oklch(0.99 0 0);
   /* flat with the content surface; nav is separated by borders, not fill */
-  /* Resting nav ink sits a step back from the active ink, so an active row
-   * reads as emphasised by its INK as well as its fill. The chosen palette
-   * used one value for both, which leaves the fill carrying the whole signal
-   * -- and the fill is the part a low-contrast surface weakens first. */
-  --nx-sidebar-foreground: oklch(0.44 0 0);
+  /* Resting and active nav ink are the same value in light mode: nav labels sit
+   * at body-text weight rather than a step back from it, which is the reference
+   * palette's arrangement.
+   *
+   * So the active row is marked by its FILL (--nx-sidebar-accent) TOGETHER WITH
+   * a font-weight change, and the pair is load-bearing rather than decorative.
+   * The fill alone is about 1.11:1, far under the 3:1 WCAG 1.4.11 asks of
+   * information identifying a component's state, and there is no exemption for
+   * a large filled region -- that is 1.4.3, and it is about text. The weight
+   * change is what satisfies the criterion, being a difference that is not a
+   * colour and so carries no ratio at all.
+   *
+   * Removing `data-[active=true]:font-medium` from the sidebar menu buttons
+   * therefore leaves the nav with no conforming active state, and
+   * `contrast/__tests__/sidebar-ink-hierarchy.test.ts` fails per variant if
+   * either loses it.
+   *
+   * Dark mode keeps the two-step ink relationship instead, where a near-white
+   * active ink on a dark row is what separates the states. */
+  --nx-sidebar-foreground: oklch(0 0 0);
   --nx-sidebar-primary: oklch(0 0 0);
   --nx-sidebar-primary-foreground: oklch(1 0 0);
   /* slate-50 */
   --nx-sidebar-accent: oklch(0.94 0 0);
   /* slate-100 */
   --nx-sidebar-accent-foreground: oklch(0 0 0);
-  /* Darkened so the sidebar border clears WCAG 3:1 on its surface (was 1.23:1). */
-  --nx-sidebar-border: oklch(0.63 0 0);
+  /* Below the 3:1 boundary minimum, deliberately, to match the border weight of
+   * the rest of the palette. Recorded in `contrast/accepted.ts`. */
+  --nx-sidebar-border: oklch(0.94 0 0);
   --nx-sidebar-ring: var(--nx-primary);
 
   /* Data table specific colors */
@@ -930,7 +1001,11 @@
   --nx-destructive-foreground: oklch(0 0 0);
   /* Lightened green so it reads as text at WCAG 4.5:1 on the dark page and on
    * the lighter popover surface (was 4.17:1 on the page, 4.29:1 on a popover). */
-  --nx-success: oklch(0.6 0.1921 149.58);
+  /* Lightened a step so success ink clears 4.5:1 on --nx-muted with the margin
+   * the suite requires. Muted is the binding surface here, being the lightest
+   * of the dark surfaces this ink lands on; against card or page it was never
+   * close. */
+  --nx-success: oklch(0.61 0.1921 149.58);
   /* Darker green fill so white on-color button text clears 4.5:1. */
   --nx-success-solid: oklch(0.5225 0.1921 149.58);
   --nx-success-foreground: oklch(1 0 0);
@@ -982,6 +1057,9 @@
   /* Brightened so the field border clears WCAG 3:1 on the lighter popover
    * surface as well as the page and card (was 1.73:1 on a popover). */
   --nx-input: oklch(0.5445 0 0);
+  /* Dark mode never gave up the boundary minimum, so the control border simply
+     tracks the field border here and the split costs nothing. */
+  --nx-control-border: oklch(0.5445 0 0);
   --nx-ring: var(--nx-primary);
 
   /* Black in dark mode too: the ramp reads as depth against the deep surfaces

package/docs/plugin-ui-authoring.md

@@ -88,8 +88,8 @@ Do not hardcode hex, `rgb()`, `rgba()`, or named colors. The only literals allow
 
 ### Corner radius: pick a tier, never a value
 
-The admin ships square today (`--radius: 0`), but the whole scale derives from that one
-knob, so an operator who sets `--radius: 12px` re-rounds every surface at once. Your plugin
+The admin ships rounded today (`--radius: 0.5rem`), and the whole scale derives from that
+one knob, so an operator who sets `--radius: 0` squares every surface at once. Your plugin
 keeps up with that only if it picks a **tier by element category** rather than writing a
 length. Hardcoding a corner — `rounded-none` just as much as `rounded-[6px]` or
 `border-radius: 4px` — pins your UI at that value and opts it out of the knob.
@@ -113,14 +113,16 @@ Four consequences worth internalising:
 - **`rounded-xl` and `rounded-2xl` are not tiers of this knob.** The preset exports only
   `lg`, `md` and `sm`, so a plugin built against it gets Tailwind's fixed `0.75rem` /
   `1rem` for those two, detached from `--radius`. Inside the admin's own build they are
-  defined, but as `--radius + 4px` and `--radius + 8px`, so at the shipped `--radius: 0`
-  they resolve to `4px` and `8px` — visibly round inside a square admin. Pick from
-  `sm` / `md` / `lg`.
-- **`--radius: 0` is not "every step is zero".** `--radius-lg` is `0`, but `--radius-sm`
-  and `--radius-md` compute to `-4px` and `-2px`. They _render_ square only because
-  `border-radius` clamps a negative length to `0`. The token keeps its negative value, so
-  reading a step for padding, for an inset, or through `getComputedStyle` gives you `-4px`,
-  not `0`. Clamp it yourself if you consume a step as a length rather than as a corner.
+  defined, but as `--radius + 4px` and `--radius + 8px`, so at the shipped `--radius: 0.5rem`
+  they resolve to `12px` and `16px` — rounder than the container tier, and drifting further
+  as the knob grows. Pick from `sm` / `md` / `lg`.
+- **A low knob drives the lower steps negative.** At the shipped `0.5rem` the three tiers
+  are `4px`, `6px` and `8px`, all positive. But `sm` and `md` SUBTRACT from the knob, so
+  anything under `4px` — `--radius: 0` most obviously — computes them to `-4px` and `-2px`.
+  They _render_ square only because `border-radius` clamps a negative length to `0` at
+  used-value time. The token keeps its negative value, so reading a step for padding, for an
+  inset, or through `getComputedStyle` gives you `-4px`, not `0`. Clamp it yourself if you
+  consume a step as a length rather than as a corner.
 - **A rounded container must handle full-bleed children.** If a child paints a background
   all the way to the container's edge (a tinted footer, a sticky header, a hover row), give
   the container `overflow-hidden` or give the child a matching corner with

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextlyhq/ui",
-  "version": "0.0.2-alpha.56",
+  "version": "0.0.2-alpha.58",
   "description": "Nextly UI — Reusable React component library for Nextly plugins and custom admin UIs",
   "license": "MIT",
   "keywords": [
@@ -65,10 +65,11 @@
   ],
   "files": [
     "dist",
-    "docs"
+    "docs",
+    "!dist/metafile-*.json"
   ],
   "engines": {
-    "node": ">=20.0.0"
+    "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
   },
   "peerDependencies": {
     "lucide-react": ">=0.400.0",
@@ -94,12 +95,14 @@
     "rimraf": "^6.1.3",
     "tailwindcss": "^4.3.2",
     "tsup": "^8.5.0",
+    "tsx": "^4.20.5",
     "typescript": "^5.9.3",
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^4.1.0",
-    "@nextlyhq/eslint-config": "0.0.2-alpha.56",
-    "@nextlyhq/admin-css": "0.0.2-alpha.56",
-    "@nextlyhq/tsconfig": "0.0.2-alpha.56"
+    "@nextlyhq/admin-css": "0.0.2-alpha.58",
+    "@nextlyhq/eslint-config": "0.0.2-alpha.58",
+    "@nextlyhq/module-specifiers": "0.0.2-alpha.58",
+    "@nextlyhq/tsconfig": "0.0.2-alpha.58"
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.2.12",
@@ -145,9 +148,9 @@
   "author": "Nextly <contact@nextlyhq.com> (https://nextlyhq.com)",
   "scripts": {
     "build": "pnpm build:js && node scripts/build-css.mjs",
-    "build:js": "rimraf dist && tsup && tsup --config tsup.server-safe.config.ts && node scripts/check-client-directive.mjs",
+    "build:js": "rimraf dist && tsup && tsup --config tsup.server-safe.config.ts && tsx scripts/check-client-directive.ts && tsx scripts/check-server-safe-artifacts.ts",
     "build:css": "node scripts/build-css.mjs",
-    "dev": "tsup --watch & tsup --config tsup.server-safe.config.ts --watch & wait",
+    "dev": "node scripts/dev.mjs",
     "check-types": "tsc --noEmit && tsc --noEmit -p tsconfig.tests.json",
     "lint": "eslint . --max-warnings 0",
     "lint:fix": "eslint . --fix",