@cosmicdrift/kumiko-renderer-web 0.48.0 → 0.50.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.48.0",
+  "version": "0.50.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>",

package/src/app/browser-locale.ts

@@ -63,7 +63,7 @@ export function createBrowserLocaleResolver(
 
   return {
     translate: (key) => key,
-    locale: () => store.getSnapshot(),
+    locale: () => store.getSnapshot(), // @wrapper-known semantic-alias
     timeZone: () => timeZone,
     subscribe: store.subscribe,
     setLocale: (next) => {

package/src/layout/__tests__/settings-hub-visibility.test.ts

@@ -0,0 +1,170 @@
+// End-to-end Settings-Hub visibility on the REAL boot path:
+//   createRegistry → buildAppSchema → buildNavRegistrySliceForApp → resolveNavigation.
+// These are the actual functions the shell runs at boot; no stubs. Proves a
+// config key declared with `mask` surfaces as a role-filtered nav tree that
+// only shows inside its own synthetic "settings" workspace.
+
+import { describe, expect, test } from "bun:test";
+import {
+  access,
+  buildAppSchema,
+  createRegistry,
+  createSystemConfig,
+  createTenantConfig,
+  createUserConfig,
+  defineFeature,
+} from "@cosmicdrift/kumiko-framework/engine";
+import { resolveNavigation } from "@cosmicdrift/kumiko-headless";
+import { qualifyScreenId } from "@cosmicdrift/kumiko-renderer";
+import { buildNavRegistrySliceForApp } from "../nav-tree";
+
+const billing = defineFeature("billing", (r) => {
+  r.config({
+    keys: {
+      stripeKey: createTenantConfig("text", { mask: { title: "billing.stripe-key" } }),
+      // system-scope default write = ["system"] (internal actor) → human-hidden
+      platformFee: createSystemConfig("number", { mask: { title: "billing.platform-fee" } }),
+    },
+  });
+});
+const notify = defineFeature("notify", (r) => {
+  r.config({
+    keys: { digest: createUserConfig("boolean", { mask: { title: "notify.digest" } }) },
+  });
+});
+// A system-scope key that explicitly opts a HUMAN role into write → its
+// settings entry becomes visible to that admin (the opt-in path).
+const ops = defineFeature("ops", (r) => {
+  r.config({
+    keys: {
+      maintenanceMode: createSystemConfig("boolean", {
+        write: access.systemAdmin,
+        mask: { title: "ops.maintenance" },
+      }),
+    },
+  });
+});
+// A real work-workspace, so the app is in workspace (filter) mode.
+const shell = defineFeature("shell", (r) => {
+  r.entity("thing", { fields: { label: { type: "text" } } });
+  r.screen({ id: "home", type: "entityList", entity: "thing", columns: ["label"] });
+  r.nav({ id: "home", label: "Home", screen: "home" });
+  r.workspace({ id: "main", label: "Main", nav: ["shell:nav:home"] });
+});
+
+const app = buildAppSchema(createRegistry([shell, billing, notify, ops]));
+
+function navMembersOf(workspaceId: string): ReadonlySet<string> {
+  const ws = app.workspaces?.find((w) => w.definition.id === workspaceId);
+  if (ws === undefined) throw new Error(`no workspace "${workspaceId}"`);
+  return new Set(ws.navMembers);
+}
+
+function qualifiedNames(tree: ReturnType<typeof resolveNavigation>): string[] {
+  const out: string[] = [];
+  const walk = (nodes: ReturnType<typeof resolveNavigation>): void => {
+    for (const n of nodes) {
+      out.push(n.qualifiedName);
+      walk(n.children);
+    }
+  };
+  walk(tree);
+  return out;
+}
+
+// Mirrors the exact screen lookup KumikoScreen runs (kumiko-screen.tsx:102) —
+// the REAL qualifyScreenId against the FeatureSchema's short screen ids. Proves
+// a nav's screen-QN resolves to a renderable definition, not just that the ref
+// string matches a convention.
+function resolveScreenDef(qn: string) {
+  for (const f of app.features) {
+    const hit = f.screens.find((s) => qualifyScreenId(f.featureName, s.id) === qn);
+    if (hit !== undefined) return hit;
+  }
+  return undefined;
+}
+
+function screenRefsIn(tree: ReturnType<typeof resolveNavigation>): string[] {
+  const out: string[] = [];
+  const walk = (nodes: ReturnType<typeof resolveNavigation>): void => {
+    for (const n of nodes) {
+      if (n.screen !== undefined) out.push(n.screen);
+      walk(n.children);
+    }
+  };
+  walk(tree);
+  return out;
+}
+
+describe("Settings-Hub visibility — full boot pipeline", () => {
+  test("privileged user sees the human-relevant hub; system-internal keys stay hidden", () => {
+    const slice = buildNavRegistrySliceForApp(app, navMembersOf("settings"));
+    const tree = resolveNavigation({
+      source: slice,
+      user: { id: "u-1", roles: ["TenantAdmin", "SystemAdmin"] },
+    });
+    const names = qualifiedNames(tree);
+
+    expect(names).toContain("config:nav:audience-tenant");
+    expect(names).toContain("config:nav:audience-user");
+    // system audience surfaces ONLY because `ops` opted a human (SystemAdmin)
+    // into write; its child ops-system shows, billing's system-internal key
+    // (write ["system"]) stays hidden from the same admin.
+    expect(names).toContain("config:nav:audience-system");
+    expect(names).toContain("config:nav:ops-system");
+    expect(names).not.toContain("config:nav:billing-system");
+
+    // schema-level completeness: the hidden key IS generated (a system actor
+    // could resolve it) — it's gated at resolve-time, not omitted at build-time.
+    expect(navMembersOf("settings").has("config:nav:billing-system")).toBe(true);
+
+    // hierarchy: the billing-tenant screen hangs under the tenant audience
+    const tenantAudience = tree.find((n) => n.qualifiedName === "config:nav:audience-tenant");
+    expect(tenantAudience?.children.map((c) => c.qualifiedName)).toContain(
+      "config:nav:billing-tenant",
+    );
+    expect(tenantAudience?.children[0]?.screen).toBe("config:screen:billing-tenant");
+  });
+
+  test("anonymous user sees only the openToAll (user-scope) audience", () => {
+    const slice = buildNavRegistrySliceForApp(app, navMembersOf("settings"));
+    const tree = resolveNavigation({ source: slice }); // no user
+    const names = qualifiedNames(tree);
+
+    // digest is createUserConfig → write `all` → openToAll → visible to anyone
+    expect(names).toContain("config:nav:audience-user");
+    // admin/system audiences are role-gated → hidden from anonymous
+    expect(names).not.toContain("config:nav:audience-tenant");
+    expect(names).not.toContain("config:nav:audience-system");
+  });
+
+  test("every visible leaf nav resolves to a real configEdit screen (nav → screen → definition)", () => {
+    const slice = buildNavRegistrySliceForApp(app, navMembersOf("settings"));
+    const tree = resolveNavigation({
+      source: slice,
+      user: { id: "u-1", roles: ["TenantAdmin", "SystemAdmin"] },
+    });
+    const refs = screenRefsIn(tree);
+    expect(refs.length).toBeGreaterThan(0); // audiences have no screen; children do
+
+    // the short screen ids in the config FeatureSchema must qualify back to the
+    // exact QN the nav carries — qualifyScreenId is NOT idempotent, so a mismatch
+    // would render "Screen not found" on every settings click.
+    for (const qn of refs) {
+      expect(resolveScreenDef(qn)?.type).toBe("configEdit");
+    }
+    expect(resolveScreenDef("config:screen:billing-tenant")?.type).toBe("configEdit");
+  });
+
+  test("the work workspace does NOT leak the settings hub", () => {
+    const slice = buildNavRegistrySliceForApp(app, navMembersOf("main"));
+    const tree = resolveNavigation({
+      source: slice,
+      user: { id: "u-1", roles: ["TenantAdmin", "SystemAdmin"] },
+    });
+    const names = qualifiedNames(tree);
+
+    expect(names).toContain("shell:nav:home");
+    expect(names.some((n) => n.startsWith("config:nav:"))).toBe(false);
+  });
+});

package/src/styles.css

@@ -19,12 +19,17 @@
    Defaults bleiben rdp's eigenes Stylesheet. */
 @import "react-day-picker/style.css";
 
-/* Tailwind v4 scannt per default vom Import-Ort aus; da das CSS
-   aus einem temp-dir kompiliert wird, findet es sonst keine
-   Source-Dateien. Explizite @source-Direktiven decken alle
-   Workspace-Sources ab — der CLI scannt dann unsere Primitives,
-   Layout-Components UND die Sample-App. */
-@source "../../renderer-web/src/**/*.{ts,tsx}";
+/* Tailwind v4 scannt per default vom Import-Ort aus; da das CSS aus
+   einem temp-dir kompiliert wird, findet es sonst keine Source-Dateien.
+   Die erste Zeile ist self-relativ (`./` = dieses src/) und MUSS es
+   bleiben: das Paket shippt `src`, also löst sie in jedem Install-Layout
+   auf — Workspace UND Standalone-Consumer (node_modules). Ein monorepo-
+   relativer Pfad fand im Standalone-Build die eigenen Shell-Klassen
+   nicht → unstyled prod, 15KB statt 48KB (#359). Die restlichen Zeilen
+   sind Monorepo-Build-Quellen (renderer hat keine eigenen Klassen,
+   samples nur für den In-Monorepo-Sample-Build) — im Consumer matchen
+   sie nichts und sind dort ein harmloser No-op. */
+@source "./**/*.{ts,tsx}";
 @source "../../renderer/src/**/*.{ts,tsx}";
 @source "../../../samples/**/src/**/*.{ts,tsx}";
 

package/src/tokens.ts

@@ -35,10 +35,12 @@ function readCurrentMode(): ThemeMode {
   return document.documentElement.classList.contains("dark") ? "dark" : "light";
 }
 
+// @wrapper-known semantic-alias
 function notifyThemeChange(): void {
   themeTick.setState((t) => t + 1);
 }
 
+// @wrapper-known semantic-alias
 function persistMode(mode: ThemeMode): void {
   try {
     window.localStorage.setItem(THEME_STORAGE_KEY, mode);