@godxjp/ui 28.2.0 → 28.3.0

package/dist/components/data-entry/command-palette.d.ts

@@ -49,6 +49,21 @@ export type CommandPaletteProps = {
     shouldFilter?: boolean;
     loading?: boolean;
     error?: React.ReactNode;
+    /**
+     * The control that opens the palette.
+     *
+     * `undefined` (omitted) — the default outline Button with the ⌘K hint.
+     * `null` — **NO trigger at all**, for a palette driven purely by `shortcut`.
+     *
+     * The two are deliberately NOT the same, and that is the whole point of gh#778: the previous
+     * `trigger ?? <default/>` collapsed them, so `null` — the spelling every consumer reaches for —
+     * silently rendered the very Button it was asked to remove. The only working spelling was
+     * `trigger={<></>}`, which is a hack that renders an empty fragment into the trigger slot.
+     *
+     * A keyboard-only palette is a NORMAL shape: `shortcut` already binds ⌘K/Ctrl+K and handles
+     * `event.isComposing` (i.e. every keystroke of a Japanese IME) and focus restore, so it is a
+     * better handler than a consumer's own. A topbar with no width to spare should be able to say so.
+     */
     trigger?: React.ReactNode;
     shortcut?: boolean;
 };

package/dist/components/data-entry/command-palette.js

@@ -73,13 +73,13 @@ function CommandPalette({
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [open, setOpen, shortcut]);
   const hasItems = React.useMemo(() => groups.some((group) => group.items.length > 0), [groups]);
-  const triggerNode = trigger ?? /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", className: "ui-command-palette-trigger", children: [
+  const triggerNode = trigger === void 0 ? /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", className: "ui-command-palette-trigger", children: [
     /* @__PURE__ */ jsx(Search, { "aria-hidden": "true" }),
     /* @__PURE__ */ jsx("span", { children: labels.open }),
     /* @__PURE__ */ jsx("span", { className: "kbd", "aria-hidden": "true", children: "\u2318K" })
-  ] });
+  ] }) : trigger;
   return /* @__PURE__ */ jsxs(Dialog, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(Dialog.Trigger, { asChild: true, children: triggerNode }),
+    triggerNode === null ? null : /* @__PURE__ */ jsx(Dialog.Trigger, { asChild: true, children: triggerNode }),
     /* @__PURE__ */ jsxs(
       DialogContent,
       {

package/dist/contracts/measurement.json

@@ -1,6 +1,6 @@
 {
   "$comment": "AUTO-GENERATED by scripts/gen-measurement-contract.mjs — do not edit. Read this instead of guessing: docs/MEASUREMENT-CONTRACT.md.",
-  "version": "28.2.0",
+  "version": "28.3.0",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

package/dist/props/components/data-display.prop.d.ts

@@ -2,7 +2,15 @@
 import type * as React from "react";
 /** @see CodeBlock — a block of preformatted text (request bodies, logs, snippets). */
 export type CodeBlockProp = {
-    /** The text. Pass a string; a highlighter's spans also work. */
+    /**
+     * The text. Pass a string, or a highlighter's spans.
+     *
+     * Tag each span `data-code-token="keyword" | "string" | "comment" | …` — the twelve names Shiki's
+     * `createCssVariablesTheme` emits — and the package colours it from the `--code-block-token-*`
+     * knobs. Do NOT put `style={{ color }}` or a palette `className` on the spans: both are visual
+     * overrides, and this used to be the only spelling available, which made the documented path
+     * unbuildable for a rule-following consumer (gh#784).
+     */
     children?: ChildrenProp;
     /** Soft-wrap long lines (default true). `false` scrolls horizontally instead. */
     wrap?: boolean;
@@ -12,7 +20,7 @@ export type CodeBlockProp = {
     };
     /** Type size. Default `sm`. */
     size?: Extract<SizeProp, "xs" | "sm">;
-    /** Cosmetic: lands on `data-language`; no highlighter is bundled. */
+    /** Lands on `data-language`; no highlighter is bundled — see `children` for colouring its output. */
     language?: string;
     className?: ClassNameProp;
 };

package/dist/styles/data-display-layout.css

@@ -973,7 +973,7 @@
     border-radius: var(--code-block-radius);
     background: hsl(var(--muted));
     padding: var(--code-block-space-inset);
-    color: hsl(var(--foreground));
+    color: var(--code-block-foreground, hsl(var(--foreground)));
     font-family: var(--font-mono);
     font-size: var(--code-block-font-size);
     line-height: var(--code-block-line-height);
@@ -1009,6 +1009,65 @@
     max-block-size: var(--code-block-max-height-lg);
   }
 
+  .ui-code-block [data-code-token="comment"],
+  .ui-prose pre [data-code-token="comment"] {
+    color: var(--code-block-token-comment-color, hsl(var(--muted-foreground)));
+  }
+
+  .ui-code-block [data-code-token="keyword"],
+  .ui-prose pre [data-code-token="keyword"] {
+    color: var(--code-block-token-keyword-color, hsl(var(--primary)));
+  }
+
+  .ui-code-block [data-code-token="string"],
+  .ui-prose pre [data-code-token="string"] {
+    color: var(--code-block-token-string-color, hsl(var(--text-success)));
+  }
+
+  .ui-code-block [data-code-token="string-expression"],
+  .ui-prose pre [data-code-token="string-expression"] {
+    color: var(--code-block-token-string-expression-color, hsl(var(--text-success)));
+  }
+
+  .ui-code-block [data-code-token="function"],
+  .ui-prose pre [data-code-token="function"] {
+    color: var(--code-block-token-function-color, hsl(var(--text-info)));
+  }
+
+  .ui-code-block [data-code-token="constant"],
+  .ui-prose pre [data-code-token="constant"] {
+    color: var(--code-block-token-constant-color, hsl(var(--text-warning)));
+  }
+
+  .ui-code-block [data-code-token="parameter"],
+  .ui-prose pre [data-code-token="parameter"] {
+    color: var(--code-block-token-parameter-color, hsl(var(--foreground)));
+  }
+
+  .ui-code-block [data-code-token="punctuation"],
+  .ui-prose pre [data-code-token="punctuation"] {
+    color: var(--code-block-token-punctuation-color, hsl(var(--muted-foreground)));
+  }
+
+  .ui-code-block [data-code-token="link"],
+  .ui-prose pre [data-code-token="link"] {
+    color: var(--code-block-token-link-color, hsl(var(--text-link)));
+    text-decoration-line: underline;
+
+    text-underline-offset: var(--text-link-underline-offset);
+    text-decoration-skip-ink: auto;
+  }
+
+  .ui-code-block [data-code-token="inserted"],
+  .ui-prose pre [data-code-token="inserted"] {
+    color: var(--code-block-token-inserted-color, hsl(var(--text-success)));
+  }
+
+  .ui-code-block [data-code-token="deleted"],
+  .ui-prose pre [data-code-token="deleted"] {
+    color: var(--code-block-token-deleted-color, hsl(var(--text-error)));
+  }
+
   .ui-prose {
     font-size: var(--prose-font-size);
     line-height: var(--prose-line-height);

package/dist/styles/navigation-layout.css

@@ -220,27 +220,27 @@
   }
 
   [data-slot="tabs"][data-variant="card"][data-placement="start"] [data-slot="tabs-list"],
-  [data-slot="tabs"][data-variant="editable-card"][data-placement="start"] [data-slot="tabs-list"] {
+  [data-slot="tabs"][data-variant="editable-card"][data-placement="start"]
+    [data-slot="tabs-list"] {
     box-shadow: inset calc(-1 * var(--tabs-card-rail-border-width)) 0 0 hsl(var(--border));
   }
 
   [data-slot="tabs"][data-variant="card"][data-placement="end"] [data-slot="tabs-list"],
-  [data-slot="tabs"][data-variant="editable-card"][data-placement="end"] [data-slot="tabs-list"] {
+  [data-slot="tabs"][data-variant="editable-card"][data-placement="end"]
+    [data-slot="tabs-list"] {
     box-shadow: inset var(--tabs-card-rail-border-width) 0 0 hsl(var(--border));
   }
 
-  [dir="rtl"]
-    [data-slot="tabs"][data-variant="card"][data-placement="start"]
+  [dir="rtl"] [data-slot="tabs"][data-variant="card"][data-placement="start"]
     [data-slot="tabs-list"],
-  [dir="rtl"]
-    [data-slot="tabs"][data-variant="editable-card"][data-placement="start"]
+  [dir="rtl"] [data-slot="tabs"][data-variant="editable-card"][data-placement="start"]
     [data-slot="tabs-list"] {
     box-shadow: inset var(--tabs-card-rail-border-width) 0 0 hsl(var(--border));
   }
 
-  [dir="rtl"] [data-slot="tabs"][data-variant="card"][data-placement="end"] [data-slot="tabs-list"],
-  [dir="rtl"]
-    [data-slot="tabs"][data-variant="editable-card"][data-placement="end"]
+  [dir="rtl"] [data-slot="tabs"][data-variant="card"][data-placement="end"]
+    [data-slot="tabs-list"],
+  [dir="rtl"] [data-slot="tabs"][data-variant="editable-card"][data-placement="end"]
     [data-slot="tabs-list"] {
     box-shadow: inset calc(-1 * var(--tabs-card-rail-border-width)) 0 0 hsl(var(--border));
   }
@@ -277,7 +277,7 @@
     margin-inline-start: calc(var(--tabs-panel-space-inset) + var(--tabs-panel-border-width));
   }
 
-  [data-slot="tabs"][data-bodied="true"] > [data-slot="tabs-panel"],
+    [data-slot="tabs"][data-bodied="true"] > [data-slot="tabs-panel"],
   [data-slot="tabs"][data-bodied="true"] > [data-slot="tabs-content"] {
     border: var(--tabs-panel-border-width) solid hsl(var(--border));
     border-radius: var(--tabs-panel-radius);

package/dist/styles/shell-layout.css

@@ -2003,6 +2003,8 @@
   }
   .ui-topbar-start {
     flex: 0 1 auto;
+
+    min-inline-size: var(--topbar-item-min-width);
   }
 
   .ui-topbar-start > :last-child:not(:is(button, a, [role="button"], .ui-button)) {
@@ -2041,10 +2043,6 @@
     min-inline-size: auto;
   }
 
-  .ui-topbar[data-overflow="scroll"] > .ui-topbar-start {
-    min-inline-size: var(--topbar-item-min-width);
-  }
-
   .ui-topbar-item {
     display: inline-flex;
     min-width: var(--topbar-item-min-width);

package/dist/tokens/components/data-display.css

@@ -18,6 +18,19 @@
   --code-block-max-height-md: 20rem;
   --code-block-max-height-lg: 32rem;
 
+  --code-block-foreground: initial;
+  --code-block-token-comment-color: initial;
+  --code-block-token-keyword-color: initial;
+  --code-block-token-string-color: initial;
+  --code-block-token-string-expression-color: initial;
+  --code-block-token-function-color: initial;
+  --code-block-token-constant-color: initial;
+  --code-block-token-parameter-color: initial;
+  --code-block-token-punctuation-color: initial;
+  --code-block-token-link-color: initial;
+  --code-block-token-inserted-color: initial;
+  --code-block-token-deleted-color: initial;
+
   --prose-font-size: var(--font-size-base);
   --prose-font-size-sm: var(--font-size-xs);
   --prose-line-height: var(--line-height-body);

package/docs/data-display/code-block.tsx

@@ -84,6 +84,74 @@ export default function Demo() {
             </Flex>
           </CardContent>
         </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Syntax colour · the package owns the palette (gh#784)</CardTitle>
+            <CardDescription>
+              CodeBlock bundles no highlighter. Bring your own, then tag each span with
+              data-code-token and the package colours it. The twelve names are Shiki
+              createCssVariablesTheme&apos;s verbatim, so mapping is a rename rather than a
+              translation. Note what the consumer never writes: no style attribute, no palette
+              class. Every knob is a role-mirror, so this follows the theme into dark with no second
+              palette.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <CodeBlock language="ts" aria-label="Highlighted TypeScript">
+              <span data-code-token="comment">{"// resolve the active tenant\n"}</span>
+              <span data-code-token="keyword">export</span>{" "}
+              <span data-code-token="keyword">async</span>{" "}
+              <span data-code-token="keyword">function</span>{" "}
+              <span data-code-token="function">loadTenant</span>
+              <span data-code-token="punctuation">(</span>
+              <span data-code-token="parameter">slug</span>
+              <span data-code-token="punctuation">:</span>{" "}
+              <span data-code-token="constant">string</span>
+              <span data-code-token="punctuation">)</span>{" "}
+              <span data-code-token="punctuation">{"{"}</span>
+              {"\n  "}
+              <span data-code-token="keyword">const</span> res{" "}
+              <span data-code-token="punctuation">=</span>{" "}
+              <span data-code-token="keyword">await</span>{" "}
+              <span data-code-token="function">fetch</span>
+              <span data-code-token="punctuation">(</span>
+              <span data-code-token="string">{"`/api/tenants/"}</span>
+              <span data-code-token="string-expression">{"${slug}"}</span>
+              <span data-code-token="string">{"`"}</span>
+              <span data-code-token="punctuation">)</span>
+              <span data-code-token="punctuation">;</span>
+              {"\n  "}
+              <span data-code-token="keyword">return</span> res
+              <span data-code-token="punctuation">.</span>
+              <span data-code-token="function">json</span>
+              <span data-code-token="punctuation">()</span>
+              <span data-code-token="punctuation">;</span>
+              {"\n"}
+              <span data-code-token="punctuation">{"}"}</span>
+            </CodeBlock>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Diff tokens · inserted and deleted</CardTitle>
+            <CardDescription>
+              The same vocabulary carries a diff. inserted and deleted default to the success and
+              destructive roles, so they agree with every other affirmative and destructive mark in
+              the system rather than inventing a second green and red.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <CodeBlock language="diff" aria-label="Patch">
+              <span data-code-token="comment">{"--- a/tokens.css\n+++ b/tokens.css\n"}</span>
+              <span data-code-token="deleted">{"-  --code-block-foreground: #111;\n"}</span>
+              <span data-code-token="inserted">{"+  --code-block-foreground: initial;\n"}</span>
+              <span data-code-token="punctuation">
+                {"   /* role-mirror: the default moved to the call site */"}
+              </span>
+            </CodeBlock>
+          </CardContent>
+        </Card>
       </Flex>
     </PageContainer>
   );

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "28.2.0",
-  "godxUiMcp": "28.2.0",
+  "version": "28.3.0",
+  "godxUiMcp": "28.3.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -410,7 +410,8 @@
     "check:mcp-token-sync": "node scripts/gen-component-tokens.mjs --check",
     "check:email-token-sync": "node scripts/gen-email-tokens.mjs --check",
     "check:focus-ring-paint": "node scripts/check-focus-ring-paint.mjs",
-    "typecheck:mcp": "node node_modules/typescript-7/bin/tsc --noEmit -p mcp/tsconfig.json"
+    "typecheck:mcp": "node node_modules/typescript-7/bin/tsc --noEmit -p mcp/tsconfig.json",
+    "check:pr-closes-keyword": "node scripts/check-pr-closes-keyword.mjs"
   },
   "peerDependencies": {
     "@hookform/resolvers": "^5.2.0",