@reddb-io/ui-kit 0.4.1 → 0.4.3

package/vendor/ds/kits/app/test/workspace-harvest.test.ts

@@ -0,0 +1,187 @@
+import { mount, unmount, flushSync } from "svelte";
+import { act, createElement as h } from "react";
+import { createRoot } from "react-dom/client";
+import { expect, it, vi } from "vitest";
+import { WorkspaceTabs } from "../react/src/WorkspaceTabs";
+import { ChangeReview } from "../react/src/ChangeReview";
+import WorkspaceFixture from "./fixtures/WorkspaceTabs.svelte";
+import ReviewFixture from "./fixtures/ChangeReview.svelte";
+import { workspaceTabs } from "../src/core/workspace-tabs";
+import { reviewChanges } from "../src/core/change-review";
+import { shortcutGroups } from "../src/core/shortcut-help";
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+it("refuses ambiguous identities and invalid review/chord data", () => {
+  expect(() =>
+    workspaceTabs([
+      { id: "a", label: "A" },
+      { id: "a", label: "B" },
+    ]),
+  ).toThrow();
+  expect(() =>
+    reviewChanges([
+      { id: "a", label: "A", before: "1", after: "2", state: "guessed" as any },
+    ]),
+  ).toThrow();
+  expect(() =>
+    shortcutGroups([
+      { id: "a", label: "Global", items: [{ id: "x", label: "X", keys: [] }] },
+    ]),
+  ).toThrow();
+});
+async function harness(
+  flavor: string,
+  Component: any,
+  Fixture: any,
+  initial: any,
+) {
+  const target = document.createElement("div");
+  document.body.append(target);
+  if (flavor === "svelte") {
+    const app = mount(Fixture, { target, props: { options: initial } });
+    flushSync();
+    return {
+      target,
+      update: async (options: any) => {
+        flushSync(() => app.update(options));
+      },
+      dispose: async () => {
+        await unmount(app);
+        target.remove();
+      },
+    };
+  }
+  const root = createRoot(target);
+  await act(() => root.render(h(Component, initial)));
+  return {
+    target,
+    update: async (options: any) => {
+      await act(() => root.render(h(Component, options)));
+    },
+    dispose: async () => {
+      await act(() => root.unmount());
+      target.remove();
+    },
+  };
+}
+for (const flavor of ["svelte", "react"]) {
+  it(`${flavor} requests closing a dirty tab without discarding it and recovers focus after accepted removal`, async () => {
+    const close = vi.fn(),
+      select = vi.fn();
+    let options: any = {
+      label: "Editors",
+      items: [
+        { id: "a", label: "Draft", dirty: true },
+        { id: "b", label: "Result", busy: true },
+        { id: "c", label: "Unavailable", disabled: true },
+      ],
+      selected: "a",
+      oncloserequest: close,
+      onselectedchange: select,
+    };
+    const app = await harness(flavor, WorkspaceTabs, WorkspaceFixture, options);
+    try {
+      expect(
+        app.target
+          .querySelector('[role="tab"][aria-selected="true"]')
+          ?.getAttribute("aria-label"),
+      ).toBe("Draft");
+      const button = app.target.querySelector<HTMLButtonElement>(
+        '[aria-label="Close Draft"]',
+      )!;
+      await act(() => {
+        button.focus();
+        button.click();
+        flushSync();
+      });
+      expect(close).toHaveBeenCalledWith("a");
+      expect(app.target.querySelectorAll('[role="tab"]')).toHaveLength(3);
+      options = { ...options, items: options.items.slice(1), selected: "b" };
+      await app.update(options);
+      expect(document.activeElement?.getAttribute("data-workspace-tab")).toBe(
+        "b",
+      );
+      expect(
+        app.target.querySelector<HTMLButtonElement>('[data-workspace-tab="c"]')
+          ?.disabled,
+      ).toBe(true);
+      const current = app.target.querySelector<HTMLElement>(
+        '[data-workspace-tab="b"]',
+      )!;
+      await act(() => {
+        current.dispatchEvent(
+          new KeyboardEvent("keydown", { key: "Delete", bubbles: true }),
+        );
+        flushSync();
+      });
+      expect(close).toHaveBeenLastCalledWith("b");
+    } finally {
+      await app.dispose();
+    }
+  });
+  it(`${flavor} preserves exact changes and requests only pending/failed ids after partial results`, async () => {
+    const apply = vi.fn(),
+      discard = vi.fn();
+    let options: any = {
+      title: "Review",
+      items: [
+        {
+          id: "a",
+          label: "Applied",
+          before: "0",
+          after: "1",
+          state: "applied",
+        },
+        {
+          id: "b",
+          label: "Conflict",
+          before: "2",
+          after: "3",
+          state: "failed",
+          error: "Version conflict",
+        },
+      ],
+      onapplyrequest: apply,
+      ondiscardrequest: discard,
+    };
+    const app = await harness(flavor, ChangeReview, ReviewFixture, options);
+    try {
+      const button = [
+        ...app.target.querySelectorAll<HTMLButtonElement>("button"),
+      ].find((b) => b.textContent?.trim() === "Apply changes")!;
+      await act(() => {
+        button.click();
+        flushSync();
+      });
+      expect(apply).toHaveBeenCalledWith(["b"]);
+      expect(
+        app.target.querySelector('[data-review-change="b"] [role="alert"]')
+          ?.textContent,
+      ).toBe("Version conflict");
+      expect(options.items[1].state).toBe("failed");
+      options = { ...options, blockedReason: "Read only" };
+      await app.update(options);
+      expect(
+        [...app.target.querySelectorAll<HTMLButtonElement>("button")].find(
+          (b) => b.textContent?.trim() === "Apply changes",
+        )?.disabled,
+      ).toBe(true);
+      const discardButton = app.target.querySelector<HTMLButtonElement>(
+        '[aria-label="Discard Conflict"]',
+      )!;
+      await act(() => {
+        discardButton.click();
+        flushSync();
+      });
+      expect(discard).toHaveBeenCalledWith(["b"]);
+      options = { ...options, applying: true };
+      await app.update(options);
+      expect(
+        [...app.target.querySelectorAll<HTMLButtonElement>("button")].every(
+          (button) => button.disabled,
+        ),
+      ).toBe(true);
+    } finally {
+      await app.dispose();
+    }
+  });
+}

package/vendor/ds/kits/base/README.md

@@ -1480,3 +1480,19 @@ Import `PhoneInput` from the canonical Base Kit. Its pinned
 `libphonenumber-js/min` engine and metadata are component-scoped; unrelated
 components retain their tree-shaking boundary. Flags need no image bundle or
 external requests. Sync selects `framework: "react"` or `"svelte"`.
+
+## Protected values
+
+`SecretValue` presents a named sensitive value as selectable text, masked by
+default with a fixed-length visual marker. Set `revealable` only after the
+application has authorized the action. `onrevealedchange(true, "control")`
+requests retrieval; supply `value` and `revealed` only after that succeeds.
+Loading and caller-safe errors remain application-owned.
+
+The shared exposure controller expires after `hideAfter` milliseconds (30000 by
+default; zero explicitly disables expiry), without extending the deadline on
+ordinary refreshes. Hiding, permission loss, replacement values and hidden
+documents remove plaintext from the rendered DOM. Handle false callbacks by
+clearing the supplied value as well. The component stores no credentials and
+provides no access control; masking does not make client-held plaintext secret.
+See `/kit/secret-value` and `/examples/operations-workbench` for both flavors.

package/vendor/ds/kits/base/src/SecretValue.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  import Button from "./Button.svelte";
+  import { secretValue } from "./secret-value.variants";
+  import { createSecretExposure, secretIsVisible } from "./core/secret-value";
+  import type { SecretValueContract } from "./core/contracts/secretvalue";
+  interface Props extends SecretValueContract {
+    /** Additional composition classes. */
+    class?: string;
+  }
+  let {
+    label,
+    value,
+    revealable = false,
+    revealed = false,
+    pending = false,
+    error,
+    onrevealedchange,
+    hideAfter = 30000,
+    hiddenLabel = "Hidden value",
+    revealLabel = "Reveal",
+    hideLabel = "Hide",
+    class: className,
+  }: Props = $props();
+  const s = secretValue(),
+    id = $props.id();
+  let exposed = $state(false);
+  let root: HTMLDivElement;
+  const options = () => ({
+    label,
+    value,
+    revealable,
+    revealed,
+    pending,
+    error,
+    onrevealedchange,
+    hideAfter,
+  });
+  const exposure = createSecretExposure(options, (next) => {
+    exposed = next;
+  });
+  const visible = $derived(
+    exposed && secretIsVisible(options()) && exposure.matches(value),
+  );
+  $effect(() => {
+    exposure.sync();
+  });
+  $effect(() => {
+    const document = root.ownerDocument;
+    const changed = () => {
+      if (document.visibilityState === "hidden") exposure.hide("visibility");
+    };
+    document.addEventListener("visibilitychange", changed);
+    return () => {
+      document.removeEventListener("visibilitychange", changed);
+      exposure.destroy();
+    };
+  });
+</script>
+
+<div
+  bind:this={root}
+  data-secret-value
+  data-revealed={visible}
+  role="group"
+  aria-labelledby={`${id}-label`}
+  class={s.root({ class: className })}
+>
+  <span id={`${id}-label`} class={s.label()}>{label}</span>
+  <div class={s.row()} aria-busy={pending}>
+    <span data-secret-content class={s.value()}
+      >{#if visible}{value}{:else}<span aria-hidden="true">••••••••</span><span
+          class="sr-only">{hiddenLabel}</span
+        >{/if}</span
+    >
+    {#if revealable && onrevealedchange}<Button
+        variant="ghost"
+        size="sm"
+        loading={pending}
+        aria-label={`${visible ? hideLabel : revealLabel} ${label}`}
+        aria-pressed={visible}
+        onclick={() => exposure.request(!visible)}
+        >{visible ? hideLabel : revealLabel}</Button
+      >{/if}
+  </div>
+  {#if error}<p role="alert" class={s.error()}>{error}</p>{/if}
+</div>

package/vendor/ds/kits/base/src/button.variants.ts

@@ -33,10 +33,12 @@ const TONE = {
   danger: "",
 } as const satisfies Record<Tone, string>;
 
+// A control owns a minimum rhythm, not a fixed text box: long labels and
+// enlarged text may add lines without clipping or widening their container.
 const SIZE = {
-  sm: "h-[var(--reddb-spatial-control-height-sm)] px-[var(--reddb-spatial-inset-sm)] text-sm",
-  md: "h-[var(--reddb-spatial-control-height-md)] px-[var(--reddb-spatial-inset-md)] text-sm",
-  lg: "h-[var(--reddb-spatial-control-height-lg)] px-[var(--reddb-spatial-inset-lg)] text-base",
+  sm: "min-h-[var(--reddb-spatial-control-height-sm)] px-[var(--reddb-spatial-inset-sm)] text-sm",
+  md: "min-h-[var(--reddb-spatial-control-height-md)] px-[var(--reddb-spatial-inset-md)] text-sm",
+  lg: "min-h-[var(--reddb-spatial-control-height-lg)] px-[var(--reddb-spatial-inset-lg)] text-base",
 } as const;
 
 const BLOCK = {
@@ -50,7 +52,7 @@ export const button = tv({
   base: [
     "inline-flex items-center justify-center gap-[var(--reddb-spatial-gap-md)]",
     "rounded-md border border-transparent",
-    "font-medium leading-tight whitespace-nowrap",
+    "h-auto min-w-0 max-w-full font-medium leading-tight whitespace-normal [overflow-wrap:anywhere]",
     // No colour transition (quiet-control.variants.ts): states and a Color
     // Scheme switch land at full contrast at once.
     // One ink focus ring for every variant and tone (ADR 0023): 2px, offset

package/vendor/ds/kits/base/src/core/contracts/secretvalue.ts

@@ -0,0 +1,27 @@
+export type SecretHideReason =
+  "control" | "timeout" | "unavailable" | "value-change" | "visibility";
+/** Explicit presentation of a server-authorized value; not an authorization boundary. */
+export interface SecretValueContract {
+  /** Visible name of the sensitive value. */
+  label: string;
+  /** Plaintext only after application-authorized retrieval; omit while masked. */
+  value?: string | null;
+  /** Permission to offer reveal; defaults to false and never checks authorization itself. */
+  revealable?: boolean;
+  /** Caller-approved exposure; defaults to false. */
+  revealed?: boolean;
+  /** Application-owned retrieval in progress. */
+  pending?: boolean;
+  /** Caller-safe retrieval error, never inferred from exception text. */
+  error?: string;
+  /** Requests exposure or reports hiding; applications should drop plaintext when hiding. */
+  onrevealedchange?: (revealed: boolean, reason: SecretHideReason) => void;
+  /** Exposure lifetime in milliseconds; defaults to 30000; zero explicitly disables expiry. */
+  hideAfter?: number;
+  /** Masked-state text, independent of the secret length. */
+  hiddenLabel?: string;
+  /** Reveal action label. */
+  revealLabel?: string;
+  /** Hide action label. */
+  hideLabel?: string;
+}

package/vendor/ds/kits/base/src/core/secret-value.ts

@@ -0,0 +1,78 @@
+import type {
+  SecretValueContract,
+  SecretHideReason,
+} from "./contracts/secretvalue";
+export function secretIsVisible(options: SecretValueContract): boolean {
+  return (
+    !!options.revealable &&
+    !!options.revealed &&
+    !options.pending &&
+    !options.error &&
+    options.value != null
+  );
+}
+/** Portable exposure lifetime. Refreshing props never extends the current deadline. */
+export function createSecretExposure(
+  read: () => SecretValueContract,
+  publish: (visible: boolean) => void,
+) {
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  let visible = false,
+    blocked = false,
+    observed = false;
+  let previousValue: string | null | undefined;
+  const clear = () => {
+    clearTimeout(timer);
+    timer = undefined;
+  };
+  const hide = (reason: SecretHideReason) => {
+    clear();
+    blocked = true;
+    const was = visible;
+    visible = false;
+    publish(false);
+    if (was || reason === "control") read().onrevealedchange?.(false, reason);
+  };
+  return {
+    sync() {
+      const options = read();
+      if (!options.revealed) blocked = false;
+      if (visible && previousValue !== options.value) {
+        hide("value-change");
+        previousValue = options.value;
+        return;
+      }
+      const next = secretIsVisible(options) && !blocked;
+      if (visible && !next) {
+        hide("unavailable");
+        previousValue = options.value;
+        observed = !!options.revealed;
+        return;
+      }
+      if (options.revealed && !observed) blocked = false;
+      observed = !!options.revealed;
+      if (next && !visible) {
+        clear();
+        const lifetime = Number.isFinite(options.hideAfter ?? 30000)
+          ? Math.max(0, options.hideAfter ?? 30000)
+          : 30000;
+        if (lifetime > 0) timer = setTimeout(() => hide("timeout"), lifetime);
+      }
+      visible = next;
+      previousValue = options.value;
+      publish(next);
+    },
+    matches(value: string | null | undefined) {
+      return visible && value === previousValue;
+    },
+    request(next: boolean) {
+      if (!next) hide("control");
+      else if (read().revealable && !read().pending)
+        read().onrevealedchange?.(true, "control");
+    },
+    hide,
+    destroy() {
+      clear();
+    },
+  };
+}

package/vendor/ds/kits/base/src/index.ts

@@ -252,6 +252,7 @@ export const BASE_COMPONENTS = [
   "Reveal",
   "ScrollArea",
   "SearchSelect",
+  "SecretValue",
   "SectionHeading",
   "SectionSlide",
   "Select",
@@ -399,6 +400,7 @@ export const BASE_COMPONENT_PURPOSES = {
   ScrollArea: "Layout",
   SectionHeading: "Data display",
   SectionSlide: "Layout",
+  SecretValue: "Data display",
   SearchSelect: "Data input",
   Select: "Data input",
   Skeleton: "Feedback",
@@ -502,6 +504,7 @@ export const BASE_COMPOSITES = [
   "RangeCalendar",
   "Rating",
   "SearchSelect",
+  "SecretValue",
   "SectionSlide",
   "Slider",
   "Statistic",
@@ -1037,3 +1040,6 @@ export { afterFormReset, associatedForm } from "./core/native-controls";
 
 export { default as Transfer } from "./Transfer.svelte";
 export { observeActivity } from "./core/operational-motion";
+
+export { default as SecretValue } from "./SecretValue.svelte";
+export type { SecretValueContract, SecretHideReason } from "./core/contracts/secretvalue";

package/vendor/ds/kits/base/src/recipes.ts

@@ -98,3 +98,5 @@ export { fieldAssociation } from "./core/field";
 export { typeRoleMerge, TYPE_ROLE_UTILITIES } from "./type-roles";
 
 export * from "./phone-input.variants";
+
+export * from "./secret-value.variants";

package/vendor/ds/kits/base/src/secret-value.variants.ts

@@ -0,0 +1,16 @@
+import { tv } from "tailwind-variants";
+import { typeRoleMerge } from "./type-roles";
+export const secretValue = tv(
+  {
+    slots: {
+      root: "@container/secret-value grid min-w-0 gap-[var(--reddb-spatial-gap-sm)] text-foreground",
+      label: "text-caption font-medium [overflow-wrap:anywhere]",
+      row: "flex min-w-0 flex-wrap items-center gap-[var(--reddb-spatial-gap-sm)]",
+      value:
+        "min-w-0 flex-1 whitespace-pre-wrap font-mono text-body [overflow-wrap:anywhere]",
+      error:
+        "m-0 text-caption text-feedback-danger-foreground [overflow-wrap:anywhere]",
+    },
+  },
+  typeRoleMerge,
+);

package/vendor/ds/kits/base/test/components.test.ts

@@ -91,6 +91,7 @@ describe("the Base Kit's public surface", () => {
       "RangeCalendar",
       "Rating",
       "SearchSelect",
+      "SecretValue",
       "SectionSlide",
       "Slider",
       "Statistic",

package/vendor/ds/kits/base/test/control-size.test.ts

@@ -23,7 +23,7 @@ describe("field control sizes", () => {
       const buttonClasses = classesOf(button({ size }));
       const height = `h-${role(`control-height-${size}`)}`;
       const inset = `px-${role(INSET[size])}`;
-      expect(buttonClasses.has(height) && buttonClasses.has(inset)).toBe(true);
+      expect(buttonClasses.has(`min-${height}`) && buttonClasses.has(inset)).toBe(true);
 
       const field = rendered(render(Input, { controlSize: size }));
       const choice = rendered(render(Select, { controlSize: size, options: [{ value: "a", label: "A" }] }));

package/vendor/ds/kits/base/test/disclosure.test.ts

@@ -43,7 +43,7 @@ describe("the Base Disclosure", () => {
     const styles = disclosure();
 
     expect(classes(root)).toEqual(classesOf(styles.root()));
-    expect(classes(root.querySelector("button")!).has("h-[var(--reddb-spatial-control-height-sm)]")).toBe(true);
+    expect(classes(root.querySelector("button")!).has("min-h-[var(--reddb-spatial-control-height-sm)]")).toBe(true);
     expect(root.hasAttribute("data-theme")).toBe(false);
     expect(root.hasAttribute("data-color-scheme")).toBe(false);
     expect(root.hasAttribute("data-density")).toBe(false);

package/vendor/ds/kits/base/test/dropdown-menu.test.ts

@@ -286,7 +286,7 @@ describe("the Base DropdownMenu appearance", () => {
   it("moves trigger and rows to the requested density size", async () => {
     const trigger = mountMenu({ size: "sm" });
     await open(trigger);
-    expect(classes(trigger).has("h-[var(--reddb-spatial-control-height-sm)]")).toBe(true);
+    expect(classes(trigger).has("min-h-[var(--reddb-spatial-control-height-sm)]")).toBe(true);
     expect(classes(rows()[0]!).has("h-[var(--reddb-spatial-control-height-sm)]")).toBe(true);
   });
 

package/vendor/ds/kits/base/test/fixtures/SecretValue.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { untrack } from "svelte";
+  import SecretValue from "../../src/SecretValue.svelte";
+  let { options }: { options: any } = $props();
+  let current = $state(untrack(() => options));
+  export function update(next: any) {
+    current = next;
+  }
+</script>
+
+<SecretValue {...current} />

package/vendor/ds/kits/base/test/navbar.test.ts

@@ -381,7 +381,7 @@ describe("the Base Navbar appearance", () => {
   it("uses a canonical Button for the collapsed toggle", () => {
     const worn = classes(toggle(mountNavbar({ collapse: "collapsed" })));
     expect(worn.has("inline-flex")).toBe(true);
-    expect(worn.has("h-[var(--reddb-spatial-control-height-md)]")).toBe(true);
+    expect(worn.has("min-h-[var(--reddb-spatial-control-height-md)]")).toBe(true);
   });
 
   it("merges caller classes over its canonical appearance", () => {

package/vendor/ds/kits/base/test/secret-value.test.ts

@@ -0,0 +1,94 @@
+import { mount, unmount, flushSync } from "svelte";
+import { act, createElement as h } from "react";
+import { createRoot } from "react-dom/client";
+import { expect, it, vi } from "vitest";
+import { SecretValue } from "../react/src/SecretValue";
+import Fixture from "./fixtures/SecretValue.svelte";
+import { createSecretExposure } from "../src/core/secret-value";
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+it("expires without extending exposure on refresh, blocks stale approvals and masks replacement values", () => {
+  vi.useFakeTimers();
+  const changed = vi.fn(),
+    publish = vi.fn();
+  let options: any = {
+    label: "Token",
+    value: "sample-alpha",
+    revealed: true,
+    revealable: true,
+    hideAfter: 1000,
+    onrevealedchange: changed,
+  };
+  const controller = createSecretExposure(() => options, publish);
+  try {
+    controller.sync();
+    vi.advanceTimersByTime(600);
+    controller.sync();
+    vi.advanceTimersByTime(400);
+    expect(publish).toHaveBeenLastCalledWith(false);
+    expect(changed).toHaveBeenLastCalledWith(false, "timeout");
+    controller.sync();
+    expect(publish).toHaveBeenLastCalledWith(false);
+    options = { ...options, revealed: false };
+    controller.sync();
+    options = { ...options, revealed: true };
+    controller.sync();
+    expect(publish).toHaveBeenLastCalledWith(true);
+    options = { ...options, value: "sample-beta" };
+    expect(controller.matches(options.value)).toBe(false);
+    controller.sync();
+    expect(publish).toHaveBeenLastCalledWith(false);
+    expect(changed).toHaveBeenLastCalledWith(false, "value-change");
+  } finally {
+    controller.destroy();
+    vi.useRealTimers();
+  }
+});
+for (const flavor of ["react", "svelte"])
+  it(`${flavor} keeps masked plaintext out of the DOM and immediately masks revoked access`, async () => {
+    const target = document.createElement("div");
+    document.body.append(target);
+    const changed = vi.fn();
+    let options: any = {
+      label: "Token",
+      value: "sample-sensitive-value",
+      revealable: true,
+      onrevealedchange: changed,
+    };
+    let update: (next: any) => Promise<void>, dispose: () => Promise<void>;
+    if (flavor === "svelte") {
+      const app = mount(Fixture, { target, props: { options } });
+      flushSync();
+      update = async (next) => {
+        flushSync(() => app.update(next));
+      };
+      dispose = () => unmount(app);
+    } else {
+      const root = createRoot(target);
+      await act(() => root.render(h(SecretValue, options)));
+      update = async (next) => {
+        await act(() => root.render(h(SecretValue, next)));
+      };
+      dispose = async () => {
+        await act(() => root.unmount());
+      };
+    }
+    try {
+      expect(target.innerHTML).not.toContain("sample-sensitive-value");
+      await act(() => {
+        target.querySelector<HTMLButtonElement>("button")!.click();
+        flushSync();
+      });
+      expect(changed).toHaveBeenLastCalledWith(true, "control");
+      expect(target.innerHTML).not.toContain("sample-sensitive-value");
+      options = { ...options, revealed: true };
+      await update(options);
+      expect(target.textContent).toContain("sample-sensitive-value");
+      options = { ...options, revealable: false };
+      await update(options);
+      expect(target.innerHTML).not.toContain("sample-sensitive-value");
+      expect(target.querySelector("button")).toBeNull();
+    } finally {
+      await dispose();
+      target.remove();
+    }
+  });