@cosmicdrift/kumiko-renderer-web 0.351.0 → 0.352.0

package/dist/app/dashboard-body.js

@@ -225,12 +225,17 @@ function readDelta(panel, record) {
     const tone = readTone(panel.deltaToneField !== undefined ? record[panel.deltaToneField] : undefined);
     return { value: String(value), direction, ...(tone !== undefined && { tone }) };
 }
+function labeledGroupColumns(valueCount) {
+    if (valueCount <= 1)
+        return "";
+    return valueCount === 2 ? "sm:grid-cols-2" : "sm:grid-cols-3";
+}
 function StatGroupPanelBody({ panel, label, screenId, screenParams, translate, }) {
     const testId = `dashboard-panel-${panel.id}`;
     if (label === undefined) {
         return (_jsx("div", { "data-testid": testId, className: "grid grid-cols-2 gap-y-2 rounded-lg border border-border bg-card py-1 lg:auto-cols-fr lg:grid-flow-col lg:divide-x lg:divide-border-row", children: panel.stats.map((stat) => (_jsx(StatPanelBody, { panel: stat, label: translate(stat.label), screenId: screenId, screenParams: screenParams, translate: translate, variant: "strip" }, stat.id))) }));
     }
-    return (_jsx(SectionCard, { title: label, ...(panel.subtitle !== undefined && { subtitle: translate(panel.subtitle) }), testId: testId, children: _jsx("section", { className: "grid grid-cols-1 gap-3 sm:grid-cols-3", children: panel.stats.map((stat) => (_jsx(StatPanelBody, { panel: stat, label: translate(stat.label), screenId: screenId, screenParams: screenParams, translate: translate, variant: "card" }, stat.id))) }) }));
+    return (_jsx(SectionCard, { title: label, ...(panel.subtitle !== undefined && { subtitle: translate(panel.subtitle) }), testId: testId, children: _jsx("section", { className: `grid grid-cols-1 gap-3 ${labeledGroupColumns(panel.stats.length)}`, children: panel.stats.map((stat) => (_jsx(StatPanelBody, { panel: stat, label: translate(stat.label), screenId: screenId, screenParams: screenParams, translate: translate, variant: "card" }, stat.id))) }) }));
 }
 function markerKindColor(kind) {
     if (kind === undefined)

package/dist/layout/nav-tree.js

@@ -468,11 +468,12 @@ export function buildNavRegistrySliceForApp(app, allowedNavQns) {
             });
         }
     }
+    const existing = dropNavsWithNonexistentParent(qualified);
     // Workspace filter: drop nav entries whose qualified id isn't in the
     // allow-set. A child whose parent gets dropped surfaces as a top-level
     // entry — the workspace owner should list parents explicitly if they
     // want the grouping preserved.
-    const filtered = allowedNavQns !== undefined ? qualified.filter((n) => allowedNavQns.has(n.id)) : qualified;
+    const filtered = allowedNavQns !== undefined ? existing.filter((n) => allowedNavQns.has(n.id)) : existing;
     const allowedQnSet = new Set(filtered.map((n) => n.id));
     const topLevel = [];
     const byParentMap = new Map();
@@ -495,6 +496,18 @@ export function buildNavRegistrySliceForApp(app, allowedNavQns) {
         byParent: (parent) => byParentMap.get(parent) ?? [],
     };
 }
+// A parent absent from the (role-projected) schema is not a workspace
+// filter result: the child must not leak to the top level. Transitive.
+function dropNavsWithNonexistentParent(navs) {
+    let current = [...navs];
+    for (;;) {
+        const ids = new Set(current.map((n) => n.id));
+        const kept = current.filter((n) => n.parent === undefined || ids.has(n.parent));
+        if (kept.length === current.length)
+            return current;
+        current = kept;
+    }
+}
 // Exported (not part of the package's public index.ts surface) so other
 // modules under layout/ — e.g. filter-app-schema-navs.ts — qualify nav ids
 // the same way instead of keeping a second copy in sync.

package/dist/primitives/combobox.d.ts

@@ -6,6 +6,8 @@ export type ComboboxOption = {
     readonly description?: string;
     /** Group heading; see `groupOptions` for the ordering rule. */
     readonly group?: string;
+    /** Visible but not choosable. */
+    readonly disabled?: boolean;
 };
 type ComboboxBaseProps = {
     readonly id: string;

package/dist/primitives/combobox.js

@@ -105,7 +105,7 @@ export function ComboboxInput(props) {
                                             const isSelected = multiple
                                                 ? selectedValues.has(opt.value)
                                                 : opt.value === singleValue;
-                                            return (_jsxs(Command.Item, { "data-testid": `combobox-${id}-option-${opt.value}`, value: opt.label, keywords: opt.description !== undefined ? [opt.description] : undefined, onSelect: () => {
+                                            return (_jsxs(Command.Item, { "data-testid": `combobox-${id}-option-${opt.value}`, value: opt.label, keywords: opt.description !== undefined ? [opt.description] : undefined, disabled: opt.disabled, onSelect: () => {
                                                     if (props.multiple === true) {
                                                         toggleMulti(opt.value);
                                                     }
@@ -117,7 +117,7 @@ export function ComboboxInput(props) {
                                                 // No pointer-events toggles on the item: with Tailwind active,
                                                 // `data-[disabled]:pointer-events-none` silently swallowed mouse
                                                 // clicks (keyboard select still worked, jsdom tests stayed green).
-                                                className: "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground", children: [isSelected && (_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(Check, { className: "h-4 w-4" }) })), _jsxs("span", { className: "flex min-w-0 flex-col", children: [_jsx("span", { children: opt.label }), opt.description !== undefined && (_jsx("span", { className: "text-xs text-muted-foreground", children: opt.description }))] })] }, opt.value));
+                                                className: cn("relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground", opt.disabled === true && "cursor-not-allowed opacity-50"), children: [isSelected && (_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(Check, { className: "h-4 w-4" }) })), _jsxs("span", { className: "flex min-w-0 flex-col", children: [_jsx("span", { children: opt.label }), opt.description !== undefined && (_jsx("span", { className: "text-xs text-muted-foreground", children: opt.description }))] })] }, opt.value));
                                         });
                                         return section.heading === undefined ? (items) : (_jsx(Command.Group, { heading: section.heading, className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground", children: items }, section.heading));
                                     })] }), onCreate !== undefined && (_jsxs("button", { type: "button", "data-testid": `combobox-${id}-create`, onClick: () => {

package/dist/primitives/index.js

@@ -257,21 +257,30 @@ function SegmentedSelect({ id, name, value, onChange, options, disabled, require
         onChange(target.value);
         buttonRefs.current[index]?.focus();
     };
+    // Arrow keys skip disabled segments; with none enabled they stay put.
+    const nextEnabledIndex = (from, step) => {
+        for (let hop = 1; hop <= options.length; hop++) {
+            const candidate = (from + step * hop + options.length * hop) % options.length;
+            if (options[candidate]?.disabled !== true)
+                return candidate;
+        }
+        return from;
+    };
     const handleKeyDown = (e, index) => {
         if (e.key === "ArrowRight" || e.key === "ArrowDown") {
             e.preventDefault();
-            selectAt((index + 1) % options.length);
+            selectAt(nextEnabledIndex(index, 1));
         }
         else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
             e.preventDefault();
-            selectAt((index - 1 + options.length) % options.length);
+            selectAt(nextEnabledIndex(index, -1));
         }
     };
     return (_jsxs("div", { role: "radiogroup", "aria-labelledby": fieldLabelId(id), "aria-required": required, "aria-invalid": hasError === true ? true : undefined, "data-testid": `segmented-${id}`, className: cn("inline-flex min-h-9 w-fit flex-wrap overflow-hidden rounded-md border", hasError === true ? "border-destructive" : "border-input"), children: [_jsx("input", { type: "hidden", name: name, value: value }), options.map((opt, index) => {
                 const checked = opt.value === value;
                 return (_jsx("button", { ref: (node) => {
                         buttonRefs.current[index] = node;
-                    }, type: "button", role: "radio", "aria-checked": checked, tabIndex: index === tabStopIndex ? 0 : -1, disabled: disabled, "data-testid": `segmented-${id}-${opt.value}`, onClick: () => onChange(opt.value), onKeyDown: (e) => handleKeyDown(e, index), className: cn(
+                    }, type: "button", role: "radio", "aria-checked": checked, tabIndex: index === tabStopIndex ? 0 : -1, disabled: disabled === true || opt.disabled === true, "data-testid": `segmented-${id}-${opt.value}`, onClick: () => onChange(opt.value), onKeyDown: (e) => handleKeyDown(e, index), className: cn(
                     // Per-segment top/left border instead of the container's
                     // `divide-x`: divide-x only draws verticals between siblings
                     // in source order, which misplaces borders the moment a
@@ -302,7 +311,7 @@ function RadioListSelect({ id, name, value, onChange, options, variant = "list",
     const descriptionIdOf = (opt) => `${id}-option-${options.findIndex((o) => o.value === opt.value)}-description`;
     return (_jsx("div", { role: "radiogroup", "aria-labelledby": fieldLabelId(id), "aria-required": required, "aria-invalid": hasError === true ? true : undefined, "data-testid": `radio-list-${id}`, "data-radio-list": "", className: "flex flex-col gap-2", children: groupOptions(options).map((section) => (_jsxs(Fragment, { children: [section.heading !== undefined && (_jsx("div", { "data-testid": `radio-list-${id}-group-${section.heading}`, className: "mt-1 text-xs font-medium text-muted-foreground", children: section.heading })), section.options.map((opt) => (_jsxs("label", { className: card
                         ? RADIO_CARD_CLASS
-                        : "flex items-start gap-2 text-sm font-normal text-foreground", children: [_jsx("input", { type: "radio", name: name, value: opt.value, checked: opt.value === value, disabled: disabled, "aria-describedby": opt.description !== undefined ? descriptionIdOf(opt) : undefined, "data-testid": `radio-list-${id}-${opt.value}`, onChange: () => onChange(opt.value), className: cn("size-4 accent-primary", card ? "mt-0.5 shrink-0" : "mt-0.5") }), _jsxs("span", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: cn(card && "font-semibold"), children: opt.label }), opt.description !== undefined && (_jsx("span", { id: descriptionIdOf(opt), className: "text-[13px] text-foreground-secondary", children: opt.description }))] })] }, opt.value)))] }, section.heading ?? ""))) }));
+                        : "flex items-start gap-2 text-sm font-normal text-foreground has-[:disabled]:opacity-50", children: [_jsx("input", { type: "radio", name: name, value: opt.value, checked: opt.value === value, disabled: disabled === true || opt.disabled === true, "aria-describedby": opt.description !== undefined ? descriptionIdOf(opt) : undefined, "data-testid": `radio-list-${id}-${opt.value}`, onChange: () => onChange(opt.value), className: cn("size-4 accent-primary", card ? "mt-0.5 shrink-0" : "mt-0.5") }), _jsxs("span", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: cn(card && "font-semibold"), children: opt.label }), opt.description !== undefined && (_jsx("span", { id: descriptionIdOf(opt), className: "text-[13px] text-foreground-secondary", children: opt.description }))] })] }, opt.value)))] }, section.heading ?? ""))) }));
 }
 // The row count reaches the textarea through an untyped view-model hint, so a
 // sloppy schema can hand over a fraction or a zero — neither renders a sane
@@ -318,6 +327,16 @@ function normalizedTextareaRows(rows) {
 function textareaMinHeight(rows) {
     return { minHeight: `calc(${rows} * 1lh + 1rem + 2px)` };
 }
+function withInlineDisabledHint(option) {
+    if (option.disabled !== true || option.description === undefined)
+        return option;
+    return {
+        value: option.value,
+        label: `${option.label} (${option.description})`,
+        disabled: true,
+        ...(option.group !== undefined && { group: option.group }),
+    };
+}
 function DefaultInput(props) {
     // Vendored ui/input + ui/checkbox stylen Fehler über `aria-invalid`
     // selbst — kein manuelles border-destructive mehr nötig.
@@ -365,6 +384,8 @@ function DefaultInput(props) {
             // 4-Item-Status-Selects vorhanden, das ist eine bewusst akzeptierte
             // UX-Konsequenz für Style-Konsistenz.
             const comboOptions = props.options.map((o) => typeof o === "string" ? { value: o, label: o } : o);
+            // The dropdown shows a disabled option's hint inline, so it stays readable in the trigger and search.
+            const dropdownOptions = comboOptions.map(withInlineDisabledHint);
             // The radio group can't render the unselected placeholder as its own
             // segment, so it counts and renders on the real options only — the
             // dropdown below keeps comboOptions (placeholder included) since it
@@ -392,7 +413,7 @@ function DefaultInput(props) {
             if (presentation === "segmented" && radioGroupOptions.length > 0) {
                 return (_jsx(SegmentedSelect, { id: props.id, name: props.name, value: props.value, onChange: props.onChange, options: radioGroupOptions, ...(props.disabled !== undefined && { disabled: props.disabled }), ...(props.required !== undefined && { required: props.required }), ...(props.hasError !== undefined && { hasError: props.hasError }) }));
             }
-            return (_jsx(ComboboxInput, { id: props.id, name: props.name, value: props.value, onChange: props.onChange, options: comboOptions, ...(props.disabled !== undefined && { disabled: props.disabled }), ...(props.required !== undefined && { required: props.required }), ...(props.hasError !== undefined && { hasError: props.hasError }) }));
+            return (_jsx(ComboboxInput, { id: props.id, name: props.name, value: props.value, onChange: props.onChange, options: dropdownOptions, ...(props.disabled !== undefined && { disabled: props.disabled }), ...(props.required !== undefined && { required: props.required }), ...(props.hasError !== undefined && { hasError: props.hasError }) }));
         }
         case "combobox": {
             // Tier 2.1c + Tier 2.7e: Discriminated-Union per `multiple` —

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.351.0",
+  "version": "0.352.0",
   "description": "Web-platform bindings for @cosmicdrift/kumiko-renderer. HTML default-primitives, browser history-based navigation, EventSource-backed live events, and a one-call createKumikoApp that mounts the whole stack via react-dom.",
   "license": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -20,11 +20,11 @@
     }
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-dispatcher-live": "0.351.0",
-    "@cosmicdrift/kumiko-framework": "0.351.0",
-    "@cosmicdrift/kumiko-headless": "0.351.0",
-    "@cosmicdrift/kumiko-renderer": "0.351.0",
-    "@cosmicdrift/kumiko-types": "0.351.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.352.0",
+    "@cosmicdrift/kumiko-framework": "0.352.0",
+    "@cosmicdrift/kumiko-headless": "0.352.0",
+    "@cosmicdrift/kumiko-renderer": "0.352.0",
+    "@cosmicdrift/kumiko-types": "0.352.0",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
@@ -72,7 +72,7 @@
     "@types/react-dom": "^19.2.3",
     "jsdom": "^29.1.1",
     "tailwindcss": "^4.3.0",
-    "@cosmicdrift/kumiko-locale-de": "0.351.0"
+    "@cosmicdrift/kumiko-locale-de": "0.352.0"
   },
   "repository": {
     "type": "git",

package/src/changes.json

@@ -1,4 +1,21 @@
 [
+  {
+    "version": "0.352.0",
+    "type": "improvement",
+    "title": "Stat group span and column count",
+    "detail": "Set span: \"half\" on a stat-group to place two groups side by side."
+  },
+  {
+    "version": "0.352.0",
+    "type": "fix",
+    "title": "The sidebar drops navs whose parent is missing from the role-projected schema instead of promoting them to the top level",
+    "detail": "Navs whose parent does not exist in the app schema are dropped, transitively, instead of being promoted to the top level. A role-projected schema no longer shows an adopted child nav (e.g. AI providers for a TenantAdmin) when its parent section is system-admin only. Children whose parent exists but is filtered out by a workspace allowlist still surface at the top level."
+  },
+  {
+    "version": "0.352.0",
+    "type": "improvement",
+    "title": "Disabled select options are muted and not choosable in dropdown, radio list, radio cards and segmented control"
+  },
   {
     "version": "0.351.0",
     "type": "improvement",