@reddb-io/ui-kit 0.3.3 → 0.3.5

package/vendor/ds/kits/base/test/vocabulary-contrast.test.ts

@@ -0,0 +1,258 @@
+// Every colour a component's vocabulary offers, measured where it lands.
+//
+// The Foundation's contrast contract (packages/theme) measures roles; it cannot
+// see which role a component's prop resolves to. Icon offered `color="muted"`
+// and the neutral StatusIndicator drew its mark in `muted` — a surface role,
+// ink at 8% since ADR 0019 — and both painted at 1.19:1 while every role-level
+// test stayed green. So this contract mounts each component with every value of
+// its colour vocabulary, reads the paint it actually carries, resolves that
+// through the generated Theme × Color Scheme artifacts and measures it on every
+// ground it can sit on. A glyph or a status mark is a non-text graphic: 3:1
+// (WCAG 1.4.11).
+
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { createRawSnippet } from "svelte";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  APPEARANCE_THEMES,
+  BASE_THEME,
+  COLOR_SCHEMES,
+} from "../../../packages/theme/src/appearance";
+import {
+  DIST_DIR,
+  appearanceThemeCssPath,
+  colorSchemeCssPath,
+} from "../../../packages/theme/src/paths";
+import {
+  cascadeFor,
+  over,
+  parseStylesheets,
+  resolveColor,
+  resolveProperty,
+} from "../../../packages/theme/test/support/cascade";
+import {
+  Alert,
+  BADGE_VARIANTS,
+  Badge,
+  Button,
+  Card,
+  ICON_COLORS,
+  Icon,
+  STATUS_INDICATOR_STATUSES,
+  StatusIndicator,
+  TONES,
+} from "../src/index";
+import TestGlyph from "./fixtures/TestGlyph.svelte";
+import { classes, render, rendered } from "./mount";
+
+const NON_TEXT_AA = 3;
+
+/** Every opaque ground a Kit places a graphic on: the page and each elevation. */
+const GROUNDS = ["background", "sunken", "base", "raised", "overlay"].map((ground) =>
+  ground === "background" ? "--reddb-color-background" : `--reddb-color-elevation-${ground}-surface`,
+);
+
+const composition = parseStylesheets([
+  readFileSync(
+    join(import.meta.dirname, "..", "..", "..", "packages", "tokens", "dist", "tokens.css"),
+    "utf8",
+  ),
+  readFileSync(appearanceThemeCssPath(BASE_THEME), "utf8"),
+  ...APPEARANCE_THEMES.map((theme) => readFileSync(appearanceThemeCssPath(theme), "utf8")),
+  ...COLOR_SCHEMES.map((scheme) => readFileSync(colorSchemeCssPath(scheme), "utf8")),
+]);
+
+/** The Tailwind @theme surface: a named colour utility -> the role it paints. */
+const UTILITY_ROLES = new Map(
+  [
+    ...readFileSync(join(DIST_DIR, "theme.css"), "utf8").matchAll(
+      /--color-([a-z0-9-]+):\s*var\((--reddb-color-[a-z0-9-]+)\)/g,
+    ),
+  ].map(([, utility, role]) => [utility!, role!]),
+);
+
+const VAR_ROLE_RE = /^var\((--reddb-color-[a-z0-9-]+)\)$/;
+
+/** The role a `var(--reddb-color-*)` paint value draws in. */
+function roleOfPaint(value: string | null): string {
+  const role = VAR_ROLE_RE.exec(value ?? "")?.[1];
+  if (!role) throw new Error(`paint "${value}" is not a DS colour role`);
+  return role;
+}
+
+/** The single colour role an element's `bg-*` or `border-*` utility paints. */
+function roleOfUtility(element: Element, utility: "bg" | "border" | "text"): string {
+  const roles = [...classes(element)].flatMap((name) => {
+    if (!name.startsWith(`${utility}-`)) return [];
+    const value = name.slice(utility.length + 1);
+    const arbitrary = /^\[(var\(--reddb-color-[a-z0-9-]+\))\]$/.exec(value)?.[1];
+    if (arbitrary) return [roleOfPaint(arbitrary)];
+    const named = UTILITY_ROLES.get(value);
+    return named ? [named] : [];
+  });
+  expect(roles, `${utility} colour of <${element.tagName.toLowerCase()} class="${element.getAttribute("class")}">`).toHaveLength(1);
+  return roles[0]!;
+}
+
+function channel(hex: string, offset: number): number {
+  const value = Number.parseInt(hex.slice(offset, offset + 2), 16) / 255;
+  return value <= 0.04045 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;
+}
+
+function luminance(hex: string): number {
+  return 0.2126 * channel(hex, 1) + 0.7152 * channel(hex, 3) + 0.0722 * channel(hex, 5);
+}
+
+function contrast(left: string, right: string): number {
+  const [lighter, darker] = [luminance(left), luminance(right)].sort((a, b) => b - a);
+  return (lighter + 0.05) / (darker + 0.05);
+}
+
+/** Every Theme × Color Scheme a component renders in, with its resolved cascade. */
+function appearances() {
+  return APPEARANCE_THEMES.flatMap((theme) =>
+    COLOR_SCHEMES.map((scheme) => ({
+      name: `${theme.name}/${scheme.name}`,
+      cascade: cascadeFor(composition, [
+        { "data-theme": theme.name, "data-color-scheme": scheme.name },
+      ]),
+    })),
+  );
+}
+
+describe("the Icon colour vocabulary contrast contract", () => {
+  // The deprecated alias warns once in development; the warning has its own test.
+  beforeEach(() => {
+    vi.spyOn(console, "warn").mockImplementation(() => {});
+  });
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  // `current` inherits the ink of whatever it sits in, which that context's own
+  // contract measures. `on-primary` is ink for a glyph on a primary fill.
+  // `muted` is still accepted for one release, so it is held to the same floor.
+  const measured = [...ICON_COLORS.filter((color) => color !== "current"), "muted"] as const;
+  const groundsOf = (color: string) => (color === "on-primary" ? ["--reddb-color-primary"] : GROUNDS);
+
+  it("draws every colour it accepts at 3:1 on every ground, in every appearance", () => {
+    const failures: string[] = [];
+    for (const color of measured) {
+      const glyph = rendered(
+        render(Icon, { icon: TestGlyph, color: color as (typeof ICON_COLORS)[number], "aria-hidden": "true" }),
+      );
+      const role = roleOfPaint(glyph.getAttribute("stroke"));
+      for (const { name, cascade } of appearances()) {
+        const paint = resolveColor(cascade, role);
+        for (const groundRole of groundsOf(color)) {
+          const ground = resolveProperty(cascade, groundRole);
+          const ratio = contrast(over(paint, ground), ground);
+          if (ratio < NON_TEXT_AA) {
+            failures.push(`color="${color}" (${role}) on ${groundRole} at ${name}: ${ratio.toFixed(2)}:1`);
+          }
+        }
+      }
+    }
+    expect(failures).toEqual([]);
+  });
+});
+
+describe("the StatusIndicator tone contrast contract", () => {
+  it("draws every status mark at 3:1 on every ground, in every appearance", () => {
+    const failures: string[] = [];
+    for (const status of STATUS_INDICATOR_STATUSES) {
+      const mark = rendered(render(StatusIndicator, { label: `${status} status`, tone: status }))
+        .querySelector("[data-status-mark]")!;
+      const fillRole = roleOfUtility(mark, "bg");
+      const edgeRole = roleOfUtility(mark, "border");
+      for (const { name, cascade } of appearances()) {
+        const fill = resolveColor(cascade, fillRole);
+        const edge = resolveColor(cascade, edgeRole);
+        for (const groundRole of GROUNDS) {
+          const ground = resolveProperty(cascade, groundRole);
+          // The fill runs under the 1px edge (background-clip: border-box), so
+          // the ring is the edge composited over the fill over the ground.
+          const centre = over(fill, ground);
+          const ring = over(edge, centre);
+          for (const [part, paint] of [["fill", centre], ["edge", ring]] as const) {
+            const ratio = contrast(paint, ground);
+            if (ratio < NON_TEXT_AA) {
+              failures.push(`${status} ${part} on ${groundRole} at ${name}: ${ratio.toFixed(2)}:1`);
+            }
+          }
+        }
+      }
+    }
+    expect(failures).toEqual([]);
+  });
+});
+
+// One vocabulary (ADR 0026): a tone names the same Feedback Role on every
+// component, and the copy each tone sets holds AA on the surface it paints, in
+// every Theme × Color Scheme. A transparent surface (an outlined Badge, a
+// secondary Button) is measured on every ground it can sit on; a translucent
+// one (the neutral muted surface, ADR 0019) composited over each ground.
+describe("the tone text contrast contract", () => {
+  const NORMAL_TEXT_AA = 4.5;
+  const text = createRawSnippet(() => ({ render: () => "<span>Status</span>" }));
+
+  function paintRoles(element: Element): { copy: string; surface: string | null } {
+    const painted = [...classes(element)].some((name) => name.startsWith("bg-") && name !== "bg-transparent");
+    const surface = painted ? roleOfUtility(element, "bg") : null;
+    return { copy: roleOfUtility(element, "text"), surface };
+  }
+
+  function measure(label: string, element: Element, failures: string[]): void {
+    const { copy, surface } = paintRoles(element);
+    for (const { name, cascade } of appearances()) {
+      const ink = resolveColor(cascade, copy);
+      for (const groundRole of GROUNDS) {
+        const ground = resolveProperty(cascade, groundRole);
+        const fill = surface === null ? ground : over(resolveColor(cascade, surface), ground);
+        const ratio = contrast(over(ink, fill), fill);
+        if (ratio < NORMAL_TEXT_AA) {
+          failures.push(`${label}: ${copy} on ${surface ?? groundRole} over ${groundRole} at ${name}: ${ratio.toFixed(2)}:1`);
+        }
+      }
+    }
+  }
+
+  beforeEach(() => {
+    vi.spyOn(console, "warn").mockImplementation(() => {});
+  });
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("resolves every tone to the same Feedback Role on Badge, Alert, Card and Button", () => {
+    for (const tone of TONES.filter((value) => value !== "neutral")) {
+      const roles = [
+        roleOfUtility(rendered(render(Badge, { tone, children: text })), "text"),
+        roleOfUtility(rendered(render(Alert, { tone })), "text"),
+        roleOfUtility(rendered(render(Card, { tone, title: "Title" })), "text"),
+        roleOfUtility(rendered(render(Button, { tone, variant: "ghost" })), "text"),
+      ];
+      expect(new Set(roles), tone).toEqual(new Set([`--reddb-color-feedback-${tone}-foreground`]));
+    }
+  });
+
+  it("keeps every Badge tone at every emphasis at AA, in every appearance", () => {
+    const failures: string[] = [];
+    for (const variant of BADGE_VARIANTS) {
+      for (const tone of TONES) {
+        measure(`Badge ${tone}/${variant}`, rendered(render(Badge, { tone, variant, children: text })), failures);
+      }
+    }
+    expect(failures).toEqual([]);
+  });
+
+  it("keeps every Alert and Card tone at AA, in every appearance", () => {
+    const failures: string[] = [];
+    for (const tone of TONES) {
+      measure(`Alert ${tone}`, rendered(render(Alert, { tone })), failures);
+      measure(`Card ${tone}`, rendered(render(Card, { tone, title: "Title" })), failures);
+    }
+    expect(failures).toEqual([]);
+  });
+});

package/vendor/ds/kits/base/test/wave2-bindings-overlays.test.ts

@@ -0,0 +1,174 @@
+import { flushSync } from "svelte";
+import { describe, expect, it, vi } from "vitest";
+import BindingConsumer from "./fixtures/BindingConsumer.svelte";
+import ControlledDialogConsumer from "./fixtures/ControlledDialogConsumer.svelte";
+import TooltipChildConsumer from "./fixtures/TooltipChildConsumer.svelte";
+import UncontrolledFieldConsumer from "./fixtures/UncontrolledFieldConsumer.svelte";
+import { Dialog } from "./fixtures/dialog-tooltip-consumer";
+import { render } from "./mount";
+
+function type(input: HTMLInputElement | HTMLTextAreaElement, value: string): void {
+  input.value = value;
+  input.dispatchEvent(new Event("input", { bubbles: true }));
+  flushSync();
+}
+
+function toggle(input: HTMLInputElement): void {
+  input.click();
+  flushSync();
+}
+
+describe("native form controls bind like the elements they wrap", () => {
+  it("propagates bind:value from Input and Textarea to the parent", () => {
+    const root = render(BindingConsumer);
+    type(root.querySelector<HTMLInputElement>("[data-bound-input]")!, "typed");
+    type(root.querySelector<HTMLTextAreaElement>("[data-bound-textarea]")!, "second");
+    expect(root.querySelector("[data-text]")!.textContent).toBe("typed");
+    expect(root.querySelector("[data-notes]")!.textContent).toBe("second");
+  });
+
+  it("propagates bind:checked from Checkbox and Switch to the parent", () => {
+    const root = render(BindingConsumer);
+    toggle(root.querySelector<HTMLInputElement>("[data-bound-checkbox]")!);
+    toggle(root.querySelector<HTMLInputElement>("[data-bound-switch]")!);
+    expect(root.querySelector("[data-accepted]")!.textContent).toBe("true");
+    expect(root.querySelector("[data-enabled]")!.textContent).toBe("false");
+  });
+
+  it("writes parent changes back into the controls", () => {
+    const root = render(BindingConsumer);
+    root.querySelector<HTMLButtonElement>("[data-reset]")!.click();
+    flushSync();
+    expect(root.querySelector<HTMLInputElement>("[data-bound-input]")!.value).toBe("reset");
+    expect(root.querySelector<HTMLInputElement>("[data-bound-checkbox]")!.checked).toBe(true);
+  });
+});
+
+describe("uncontrolled controls keep what the person typed", () => {
+  it("survives the surrounding Field re-rendering its validation state", () => {
+    const root = render(UncontrolledFieldConsumer);
+    const input = root.querySelector<HTMLInputElement>("[data-uncontrolled-input]")!;
+    const checkbox = root.querySelector<HTMLInputElement>("[data-uncontrolled-checkbox]")!;
+    type(input, "maya@example.com");
+    toggle(checkbox);
+
+    for (let pass = 0; pass < 2; pass += 1) {
+      root.querySelector<HTMLButtonElement>("[data-validate]")!.click();
+      flushSync();
+      expect(input.value).toBe("maya@example.com");
+      expect(checkbox.checked).toBe(true);
+    }
+  });
+});
+
+describe("a Dialog driven through bind:open", () => {
+  it("renders no DS trigger when triggerLabel is omitted and opens from outside", () => {
+    const root = render(ControlledDialogConsumer);
+    const dialog = root.querySelector<HTMLDialogElement>("[data-settings-dialog]")!;
+    expect(root.querySelector("[data-dialog-trigger]")).toBeNull();
+    expect(dialog.open).toBe(false);
+
+    root.querySelector<HTMLButtonElement>("[data-open-settings]")!.click();
+    flushSync();
+    expect(dialog.open).toBe(true);
+  });
+
+  it("writes every close path back to the bound state and reports it", () => {
+    const root = render(ControlledDialogConsumer);
+    const dialog = root.querySelector<HTMLDialogElement>("[data-settings-dialog]")!;
+    root.querySelector<HTMLButtonElement>("[data-open-settings]")!.click();
+    flushSync();
+
+    dialog.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
+    flushSync();
+    expect(dialog.open).toBe(false);
+    expect(root.querySelector("[data-settings-open]")!.textContent).toBe("false");
+    expect(root.querySelector("[data-changes]")!.textContent).toBe("false");
+  });
+
+  it("locks page scroll while open and restores it on close", () => {
+    const root = render(ControlledDialogConsumer);
+    const before = document.documentElement.style.overflow;
+    root.querySelector<HTMLButtonElement>("[data-open-settings]")!.click();
+    flushSync();
+    expect(document.documentElement.style.overflow).toBe("hidden");
+
+    root.querySelector<HTMLButtonElement>("[data-settings-dialog] [data-dialog-close]")!.click();
+    flushSync();
+    expect(document.documentElement.style.overflow).toBe(before);
+  });
+
+  it("dismisses on a click outside the surface but not inside it", () => {
+    const root = render(Dialog, { triggerLabel: "Open", title: "Settings" });
+    root.querySelector<HTMLButtonElement>("[data-dialog-trigger]")!.click();
+    const dialog = root.querySelector<HTMLDialogElement>("dialog")!;
+    dialog.getBoundingClientRect = () =>
+      ({ left: 100, right: 400, top: 100, bottom: 300 }) as DOMRect;
+
+    dialog.dispatchEvent(new MouseEvent("click", { bubbles: true, clientX: 200, clientY: 200 }));
+    expect(dialog.open).toBe(true);
+    dialog.dispatchEvent(new MouseEvent("click", { bubbles: true, clientX: 20, clientY: 20 }));
+    expect(dialog.open).toBe(false);
+  });
+
+  it("derives SSR-stable ids per instance instead of a module counter", () => {
+    const first = render(Dialog, { triggerLabel: "One", title: "One", description: "a" });
+    const second = render(Dialog, { triggerLabel: "Two", title: "Two", description: "b" });
+    const ids = [first, second].map((root) => root.querySelector("dialog")!.getAttribute("aria-labelledby"));
+    expect(ids[0]).not.toBe(ids[1]);
+    expect(ids[0]).not.toMatch(/^reddb-dialog-\d+/);
+  });
+});
+
+describe("an AlertDialog with an asynchronous confirmation", () => {
+  it("stays open and busy until the promise fulfils, then closes", async () => {
+    let resolve!: () => void;
+    const onconfirm = vi.fn(() => new Promise<void>((done) => (resolve = done)));
+    const root = render(ControlledDialogConsumer, { onconfirm });
+    root.querySelector<HTMLButtonElement>("[data-open-confirm]")!.click();
+    flushSync();
+    const dialog = root.querySelector<HTMLDialogElement>('dialog[role="alertdialog"]')!;
+    const confirm = dialog.querySelector<HTMLButtonElement>("[data-alert-dialog-confirm]")!;
+
+    confirm.click();
+    flushSync();
+    expect(dialog.open).toBe(true);
+    expect(confirm.getAttribute("aria-busy")).toBe("true");
+
+    resolve();
+    await Promise.resolve();
+    await Promise.resolve();
+    flushSync();
+    expect(dialog.open).toBe(false);
+  });
+
+  it("stays open when the confirmation rejects", async () => {
+    const onconfirm = vi.fn(() => Promise.reject(new Error("forbidden")));
+    const root = render(ControlledDialogConsumer, { onconfirm });
+    root.querySelector<HTMLButtonElement>("[data-open-confirm]")!.click();
+    flushSync();
+    const dialog = root.querySelector<HTMLDialogElement>('dialog[role="alertdialog"]')!;
+    dialog.querySelector<HTMLButtonElement>("[data-alert-dialog-confirm]")!.click();
+    await Promise.resolve();
+    await Promise.resolve();
+    flushSync();
+    expect(dialog.open).toBe(true);
+  });
+
+  it("marks the confirmation as the destructive intent, not the Brand accent", () => {
+    const root = render(ControlledDialogConsumer);
+    const confirm = root.querySelector<HTMLButtonElement>("[data-alert-dialog-confirm]")!;
+    expect(confirm.className).toContain("feedback-danger");
+    expect(confirm.className).not.toMatch(/(?:^|\s)bg-primary(?:\s|$)/);
+  });
+});
+
+describe("a Tooltip on a trigger the consumer owns", () => {
+  it("decorates the consumer's element instead of rendering its own button", () => {
+    const root = render(TooltipChildConsumer);
+    const own = root.querySelector<HTMLAnchorElement>("[data-own-trigger]")!;
+    expect(own).not.toBeNull();
+    expect(own.hasAttribute("data-tooltip-trigger")).toBe(true);
+    expect(root.querySelector("button[data-tooltip-trigger]")).toBeNull();
+  });
+});

package/vendor/ds/kits/base/test/window-mockup.test.ts

@@ -0,0 +1,49 @@
+import { createRawSnippet } from "svelte";
+import { describe, expect, it } from "vitest";
+import {
+  DEFAULT_WINDOW_MOCKUP_RATIO,
+  WindowMockup,
+  windowMockup as windowMockupAppearance,
+} from "../src/index";
+import { classes, classesOf, render, rendered, styleOf } from "./mount";
+
+const buildLogs = () =>
+  createRawSnippet(() => ({
+    render: () =>
+      '<section aria-label="Build logs"><pre tabindex="0">pnpm test\nall green</pre></section>',
+  }));
+
+describe("the Base WindowMockup", () => {
+  it("frames caller content without adding a named window or focus stop", () => {
+    const element = rendered(
+      render(WindowMockup, {
+        title: "Terminal",
+        ratio: 2,
+        class: "max-w-3xl",
+        children: buildLogs(),
+      }),
+    );
+    const chrome = element.querySelector<HTMLElement>("[data-window-mockup-chrome]")!;
+    const viewport = element.querySelector<HTMLElement>("[data-window-mockup-viewport]")!;
+    const section = viewport.querySelector<HTMLElement>('section[aria-label="Build logs"]')!;
+    const code = section.querySelector<HTMLElement>("pre")!;
+
+    expect(DEFAULT_WINDOW_MOCKUP_RATIO).toBe(16 / 9);
+    expect(element.getAttribute("role")).toBe("presentation");
+    expect(element.hasAttribute("aria-label")).toBe(false);
+    expect(element.hasAttribute("aria-hidden")).toBe(false);
+    expect(chrome.getAttribute("aria-hidden")).toBe("true");
+    expect(chrome.textContent).toContain("Terminal");
+    expect(chrome.querySelector("a, button, input, select, textarea")).toBeNull();
+    expect(section.getAttribute("aria-label")).toBe("Build logs");
+    code.focus();
+    expect(document.activeElement).toBe(code);
+    expect(styleOf(viewport, "aspect-ratio")).toBe("2 / 1");
+    expect(classes(element)).toEqual(
+      classesOf(windowMockupAppearance().root({ class: "max-w-3xl" })),
+    );
+    expect(element.hasAttribute("data-theme")).toBe(false);
+    expect(element.hasAttribute("data-color-scheme")).toBe(false);
+    expect(element.hasAttribute("data-density")).toBe(false);
+  });
+});

package/vendor/ds/kits/base/tools/build-cli.ts

@@ -0,0 +1,29 @@
+// Build command for the Base Kit.
+//
+//   pnpm --filter kit-base build
+//
+// A Kit's artifact is its source (ADR 0002), so "building" is staging exactly
+// what a consumer receives into dist/ — the directory the release bundler
+// collects from every package and Kit (scripts/producer/src/collect.ts). Same
+// shape as the application Kit's build, for the same reason: the release
+// bundle must be reproducible from a commit, so the copy is made in sorted
+// order and the file list is printed.
+
+import { cpSync, mkdirSync, rmSync } from "node:fs";
+import { basename, join, relative } from "node:path";
+import { DIST_DIR, KIT_MANIFEST, KIT_ROOT, SRC_DIR, filesUnder } from "./paths";
+
+rmSync(DIST_DIR, { recursive: true, force: true });
+mkdirSync(DIST_DIR, { recursive: true });
+
+cpSync(SRC_DIR, join(DIST_DIR, "src"), { recursive: true });
+cpSync(join(KIT_ROOT, "react"), join(DIST_DIR, "react"), { recursive: true });
+for (const file of [KIT_MANIFEST, join(KIT_ROOT, "README.md")]) {
+  cpSync(file, join(DIST_DIR, basename(file)));
+}
+
+const staged = filesUnder(DIST_DIR);
+for (const file of staged) {
+  process.stdout.write(`Staged ${relative(KIT_ROOT, file)}\n`);
+}
+process.stdout.write(`Wrote ${staged.length} file(s) to ${DIST_DIR}\n`);

package/vendor/ds/kits/base/tools/lint-cli.ts

@@ -0,0 +1,18 @@
+// Anti-hardcode lint command for the Base Kit.
+//
+//   pnpm --filter kit-base lint            # lint the Kit's own source
+//   pnpm --filter kit-base lint <file...>  # lint specific files
+//
+// The Kit's README said this rule would arrive by EXTRACTING the application
+// Kit's linter into something both Kits run, rather than by copying it. This
+// file is what is left after that: the rule, the vocabulary and the reporting
+// are @reddb-io/kit-lint's, and what is the Base Kit's own is only which files
+// to read.
+
+import { runLint } from "@reddb-io/kit-lint";
+import { join } from "node:path";
+import { KIT_ROOT, kitSourceFiles } from "./paths";
+
+const args = process.argv.slice(2);
+
+process.exit(runLint(KIT_ROOT, args.length > 0 ? args : [...kitSourceFiles(), ...kitSourceFiles(join(KIT_ROOT, "react/src"))]));

package/vendor/ds/kits/base/tools/paths.ts

@@ -0,0 +1,46 @@
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { filesUnder, kitSourceFiles as sourceFilesUnder } from "@reddb-io/kit-lint";
+
+// kits/base/tools
+const here = dirname(fileURLToPath(import.meta.url));
+
+export const KIT_ROOT = join(here, "..");
+/** The vendorable component source — the whole of what a consumer receives. */
+export const SRC_DIR = join(KIT_ROOT, "src");
+/**
+ * The Kit's own copy of the Brand's Marks, vendored inside `src` because that
+ * is the whole of what a consumer receives: a Logo whose drawing lived outside
+ * the Kit would arrive out there with nothing to render. The bytes are the
+ * pinned release's, checked against `vendor/brand/brand.lock.json` by
+ * `test/marks.test.ts` — one pin, two places it has to hold.
+ */
+export const MARKS_DIR = join(SRC_DIR, "marks");
+/** The Kit's routing manifest, read by ds-sync (ADR 0002). */
+export const KIT_MANIFEST = join(KIT_ROOT, "kit.json");
+/** Build output: the vendorable source, staged for the release bundle. */
+export const DIST_DIR = join(KIT_ROOT, "dist");
+/** The repo's vendored Brand release — the Marks' single upstream. */
+export const VENDOR_DIR = join(KIT_ROOT, "..", "..", "vendor", "brand");
+
+/** Every file under `dir`, recursively, sorted — a stable, reproducible order. */
+export { filesUnder };
+
+/**
+ * The Kit's lintable source. Which files count is the linter's answer, shared
+ * with every other Kit (@reddb-io/kit-lint) — the Marks are not among them,
+ * because a Mark's colours are the Brand's drawing and not a Kit hardcoding one.
+ */
+export function kitSourceFiles(dir: string = SRC_DIR): string[] {
+  return sourceFilesUnder(dir);
+}
+
+/** The Kit's Svelte components, by file. */
+export function kitComponentFiles(dir: string = SRC_DIR): string[] {
+  return filesUnder(dir).filter((file) => file.endsWith(".svelte"));
+}
+
+/** The Marks this Kit ships, by file. */
+export function kitMarkFiles(dir: string = MARKS_DIR): string[] {
+  return filesUnder(dir).filter((file) => file.endsWith(".svg"));
+}

package/vendor/ds/kits/base/tsconfig.consumer.json

@@ -0,0 +1,19 @@
+{
+  "//": "The tsconfig a consumer's own svelte-check stands in for: strict, no DS base config behind it, `src` and nothing else. It is what the Kit is compiled against out there, so it is what the Kit is checked against here. `vite/client` is the one thing it adds over the application Kit's, and it is the point: the Logo reaches a Mark by importing the .svg, and a consumer's own bundler is what declares that module — which is exactly why this Kit ships no declaration of its own (types/marks.d.ts).",
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "verbatimModuleSyntax": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "noEmit": true,
+    "types": ["vite/client"]
+  },
+  "include": ["src"]
+}

package/vendor/ds/kits/base/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "verbatimModuleSyntax": true,
+    "types": [
+      "node"
+    ]
+  },
+  "include": [
+    "src",
+    "test",
+    "tools",
+    "types"
+  ]
+}

package/vendor/ds/kits/base/type-ledger.json

@@ -0,0 +1,4 @@
+{
+  "$comment": "Type debt this Kit carried when kit-lint's type rule arrived (ADR 0025), deferred to the type-role migration (wave 3). Each entry is a file, a class as written and its occurrences. The lint fails on any type violation beyond these entries and on any entry larger than what the source still holds, so this ledger only shrinks: remove a line when its debt is migrated. Base paid its debt in full in wave 3a (ADR 0025): the ledger stays, empty, so any new type violation fails.",
+  "debts": {}
+}

package/vendor/ds/kits/base/types/marks.d.ts

@@ -0,0 +1,20 @@
+// What an `.svg` import is, for this repo's own compiler — and deliberately
+// NOT for a consumer's.
+//
+// The Logo reaches a Mark the way every bundler already understands: it
+// imports the file and gets back the URL the bundler emitted for it. That
+// keeps the drawing opaque bytes the whole way through, which is what ADR 0004
+// asks — the Brand owns the Mark, the DS places it and never reads it.
+//
+// The declaration lives in `types/`, outside `src/`, so it is NOT vendored
+// with the Kit. A wildcard ambient module can only be declared once in a
+// program, and every Vite or SvelteKit consumer already declares this one
+// through `vite/client`; shipping a second copy inside the Kit would break a
+// consumer's type-check the day they vendored it, with a duplicate-identifier
+// error in a file they did not write.
+
+declare module "*.svg" {
+  /** The URL the bundler emits for the file. */
+  const src: string;
+  export default src;
+}