@mosetta/ui 0.0.0-stage → 0.0.10

package/css/typography.css

@@ -0,0 +1,136 @@
+/* GENERATED by scripts/buildCss.mjs — do not edit. Source: src/components/typography.tsx */
+
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
+@layer properties;
+.dui-root {
+  --dui-spacing: 0.25rem;
+  --dui-text-sm: 0.875rem;
+  --dui-text-sm--line-height: calc(1.25 / 0.875);
+  --dui-text-base: 1rem;
+  --dui-text-base--line-height: calc(1.5 / 1);
+  --dui-text-lg: 1.125rem;
+  --dui-text-lg--line-height: calc(1.75 / 1.125);
+  --dui-text-xl: 1.25rem;
+  --dui-text-xl--line-height: calc(1.75 / 1.25);
+  --dui-text-2xl: 1.5rem;
+  --dui-text-2xl--line-height: calc(2 / 1.5);
+  --dui-text-3xl: 1.875rem;
+  --dui-text-3xl--line-height: calc(2.25 / 1.875);
+  --dui-text-4xl: 2.25rem;
+  --dui-text-4xl--line-height: calc(2.5 / 2.25);
+  --dui-font-weight-semibold: 600;
+  --dui-font-weight-extrabold: 800;
+  --dui-tracking-tight: -0.025em;
+}
+.dui\:list-decimal {
+  list-style-type: decimal;
+}
+.dui\:list-disc {
+  list-style-type: disc;
+}
+:where(.dui\:space-y-1 > :not(:last-child)) {
+  --tw-space-y-reverse: 0;
+  margin-block-start: calc(var(--dui-spacing) * var(--tw-space-y-reverse));
+  margin-block-end: calc(var(--dui-spacing) * calc(1 - var(--tw-space-y-reverse)));
+}
+:where(.dui\:space-y-2 > :not(:last-child)) {
+  --tw-space-y-reverse: 0;
+  margin-block-start: calc(calc(var(--dui-spacing) * 2) * var(--tw-space-y-reverse));
+  margin-block-end: calc(calc(var(--dui-spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
+}
+.dui\:border-l-4 {
+  border-left-style: var(--tw-border-style);
+  border-left-width: 4px;
+}
+.dui\:border-border {
+  border-color: var(--dui-border);
+}
+.dui\:pl-4 {
+  padding-left: calc(var(--dui-spacing) * 4);
+}
+.dui\:pl-6 {
+  padding-left: calc(var(--dui-spacing) * 6);
+}
+.dui\:text-2xl {
+  font-size: var(--dui-text-2xl);
+  line-height: var(--tw-leading, var(--dui-text-2xl--line-height));
+}
+.dui\:text-3xl {
+  font-size: var(--dui-text-3xl);
+  line-height: var(--tw-leading, var(--dui-text-3xl--line-height));
+}
+.dui\:text-4xl {
+  font-size: var(--dui-text-4xl);
+  line-height: var(--tw-leading, var(--dui-text-4xl--line-height));
+}
+.dui\:text-base {
+  font-size: var(--dui-text-base);
+  line-height: var(--tw-leading, var(--dui-text-base--line-height));
+}
+.dui\:text-lg {
+  font-size: var(--dui-text-lg);
+  line-height: var(--tw-leading, var(--dui-text-lg--line-height));
+}
+.dui\:text-sm {
+  font-size: var(--dui-text-sm);
+  line-height: var(--tw-leading, var(--dui-text-sm--line-height));
+}
+.dui\:text-xl {
+  font-size: var(--dui-text-xl);
+  line-height: var(--tw-leading, var(--dui-text-xl--line-height));
+}
+.dui\:font-extrabold {
+  --tw-font-weight: var(--dui-font-weight-extrabold);
+  font-weight: var(--dui-font-weight-extrabold);
+}
+.dui\:font-semibold {
+  --tw-font-weight: var(--dui-font-weight-semibold);
+  font-weight: var(--dui-font-weight-semibold);
+}
+.dui\:tracking-tight {
+  --tw-tracking: var(--dui-tracking-tight);
+  letter-spacing: var(--dui-tracking-tight);
+}
+.dui\:text-destructive {
+  color: var(--dui-destructive);
+}
+.dui\:text-foreground {
+  color: var(--dui-foreground);
+}
+.dui\:text-muted-foreground {
+  color: var(--dui-muted-foreground);
+}
+.dui\:italic {
+  font-style: italic;
+}
+.dui\:not-italic {
+  font-style: normal;
+}
+@property --tw-space-y-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-tracking {
+  syntax: "*";
+  inherits: false;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-space-y-reverse: 0;
+      --tw-border-style: solid;
+      --tw-font-weight: initial;
+      --tw-tracking: initial;
+    }
+  }
+}

package/package.json

@@ -1,6 +1,38 @@
 {
   "name": "@mosetta/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.0.10",
+  "description": "mosetta UI base library: shadcn-style primitives with prefix-scoped tailwind",
+  "license": "MIT",
+  "type": "commonjs",
+  "exports": {
+    ".": "./src/ui.ts",
+    "./base.css": "./css/base.css",
+    "./button.css": "./css/button.css",
+    "./card.css": "./css/card.css",
+    "./form.css": "./css/form.css",
+    "./input.css": "./css/input.css",
+    "./stack.css": "./css/stack.css",
+    "./typography.css": "./css/typography.css",
+    "./inline.css": "./css/inline.css",
+    "./inline-field.css": "./css/inline-field.css",
+    "./styler.css": "./css/styler.css"
+  },
+  "dependencies": {
+    "react": "*",
+    "@mosetta/di": "0.0.10",
+    "@mosetta/core": "0.0.10"
+  },
+  "devDependencies": {
+    "@tailwindcss/cli": "^4.3.3",
+    "@types/react": "*",
+    "tailwindcss": "^4",
+    "typescript": "*"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "css": "node scripts/buildCss.mjs",
+    "typecheck": "tsc --noEmit"
+  }
 }

package/scripts/buildCss.mjs

@@ -0,0 +1,73 @@
+// Offline css build: tailwind runs HERE via the local bin (@tailwindcss/cli in devDeps; npx is
+// banned in this repo — it wipes symlinks), never in the CLI module pipeline. Output — css/:
+//   base.css        theme + scoped mini-preflight (styles/theme.css) — shared by nature
+//   <slice>.css     per-component slice: `dui:` utilities used ONLY in that component's source
+//                   (shared utilities are duplicated across slices deliberately)
+// Residual global roots (:root/:host) are rewritten under .dui-root. The files are COMMITTED
+// (consumer builds do not generate them). Regenerate after editing dui:* classes in src/:
+//   pnpm --dir packages/ui run css
+import { spawnSync } from 'node:child_process';
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const here = path.dirname(fileURLToPath(import.meta.url));
+const pkg = path.resolve(here, '..');
+const outDir = path.join(pkg, 'css');
+const bin = path.join(pkg, 'node_modules', '.bin', 'tailwindcss');
+const template = fs.readFileSync(path.join(pkg, 'styles', 'tw.css'), 'utf8');
+
+const SLICES = [
+  ['button', 'src/components/button.tsx'],
+  ['input', 'src/components/input.tsx'],
+  ['card', 'src/components/card.tsx'],
+  ['stack', 'src/components/stack.tsx'],
+  ['typography', 'src/components/typography.tsx'],
+  ['form', 'src/components/form.tsx'],
+  ['inline', 'src/components/inline.tsx'],
+  ['inline-field', 'src/components/inlineField.tsx'],
+  ['styler', 'src/components/styler.tsx'],
+];
+
+const banner = (source) => `/* GENERATED by scripts/buildCss.mjs — do not edit. Source: ${source} */\n`;
+
+// isolation: no output file may carry a global selector
+function guard(name, css) {
+  const globals = [...css.matchAll(/(^|[}\n])\s*(html|body|:root|:host)[\s{,]/g)];
+  if (globals.length) {
+    console.error(`${name}: ${globals.length} global selector(s) — isolation broken`);
+    process.exit(1);
+  }
+}
+
+fs.mkdirSync(outDir, { recursive: true });
+
+// base: theme + mini-preflight — already scoped by the author (.dui-root)
+const theme = fs.readFileSync(path.join(pkg, 'styles', 'theme.css'), 'utf8');
+const base = `${banner('styles/theme.css')}\n${theme}`;
+guard('base.css', base);
+fs.writeFileSync(path.join(outDir, 'base.css'), base);
+console.log(`css/base.css written (${base.length} bytes)`);
+
+for (const [name, srcRel] of SLICES) {
+  const entryPath = path.join(pkg, 'styles', `.tw-entry-${name}.css`);
+  const twOut = path.join(pkg, `.tw-out-${name}.css`);
+  fs.writeFileSync(entryPath, template.replace("@source '../src';", `@source '../${srcRel}';`));
+  const run = spawnSync(bin, ['-i', entryPath, '-o', twOut], { cwd: pkg, stdio: ['ignore', 'inherit', 'inherit'] });
+  fs.rmSync(entryPath, { force: true });
+  if (run.status !== 0) {
+    console.error(`tailwind css generation failed for ${name}`);
+    process.exit(run.status ?? 1);
+  }
+  let utilities = fs.readFileSync(twOut, 'utf8');
+  fs.rmSync(twOut, { force: true });
+  // tailwind emits some var/property blocks on global roots — rescope them (isolation)
+  utilities = utilities
+    .replace(/:root\s*,\s*:host/g, '.dui-root')
+    .replace(/(^|[}\s]):root(?![\w-])/g, '$1.dui-root')
+    .replace(/(^|[}\s]):host(?![\w-])/g, '$1.dui-root');
+  const css = `${banner(srcRel)}\n${utilities}`;
+  guard(`${name}.css`, css);
+  fs.writeFileSync(path.join(outDir, `${name}.css`), css);
+  console.log(`css/${name}.css written (${css.length} bytes)`);
+}

package/src/cn.ts

@@ -0,0 +1,28 @@
+// Tiny clsx-style class joiner — ZERO runtime deps by design (the library bundles into
+// every consuming module as a dependency artifact; each dep is weight on every page).
+// NO tailwind-merge conflict resolution: the variants() system composes non-overlapping class sets,
+// and callers override via ORDER (later wins only when properties differ — don't fight specificity).
+export type ClassValue
+  = | string
+  | number
+  | null
+  | false
+  | undefined
+  | ClassValue[]
+  | Record<string, boolean | null | undefined>;
+
+export function cn(...inputs: ClassValue[]): string {
+  const out: string[] = [];
+  for (const input of inputs) {
+    if (!input && input !== 0) continue;
+    if (typeof input === 'string' || typeof input === 'number') {
+      out.push(String(input));
+    } else if (Array.isArray(input)) {
+      const nested = cn(...input);
+      if (nested) out.push(nested);
+    } else if (typeof input === 'object') {
+      for (const [key, on] of Object.entries(input)) if (on) out.push(key);
+    }
+  }
+  return out.join(' ');
+}

package/src/components/button.tsx

@@ -0,0 +1,46 @@
+// shadcn button, adapted: `dui:` prefix (scoped tailwind), no asChild/Slot
+// (radix arrives with a later batch — the dep ritual is not worth one prop now).
+import { forwardRef, type ButtonHTMLAttributes } from 'react';
+import { variants, type VariantProps } from '../variants';
+
+export const buttonVariants = variants({
+  base:
+    'dui:inline-flex dui:items-center dui:justify-center dui:gap-2 dui:whitespace-nowrap '
+    + 'dui:rounded-md dui:text-sm dui:font-medium dui:transition-colors dui:outline-none '
+    + 'dui:focus-visible:ring-2 dui:focus-visible:ring-ring '
+    + 'dui:disabled:pointer-events-none dui:disabled:opacity-50 dui:shrink-0 dui:cursor-pointer '
+    // a button is often an anchor (a block's button leads somewhere): no browser underline on it
+    + 'dui:no-underline',
+  variants: {
+    variant: {
+      default: 'dui:bg-primary dui:text-primary-foreground dui:hover:bg-primary/90',
+      secondary: 'dui:bg-secondary dui:text-secondary-foreground dui:hover:bg-secondary/80',
+      destructive: 'dui:bg-destructive dui:text-destructive-foreground dui:hover:bg-destructive/90',
+      outline: 'dui:border dui:border-input dui:bg-background dui:hover:bg-accent dui:hover:text-accent-foreground',
+      ghost: 'dui:hover:bg-accent dui:hover:text-accent-foreground',
+      link: 'dui:text-primary dui:underline-offset-4 dui:hover:underline',
+    },
+    size: {
+      default: 'dui:h-9 dui:px-4 dui:py-2',
+      sm: 'dui:h-8 dui:rounded-md dui:px-3 dui:text-xs',
+      lg: 'dui:h-10 dui:rounded-md dui:px-8',
+      icon: 'dui:h-9 dui:w-9',
+    },
+  },
+  defaultVariants: { variant: 'default', size: 'default' },
+});
+
+export interface IButtonProps
+  extends ButtonHTMLAttributes<HTMLButtonElement>,
+  VariantProps<{ variant: Record<'default' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link', string>;
+    size: Record<'default' | 'sm' | 'lg' | 'icon', string> }> {}
+
+export const Button = forwardRef<HTMLButtonElement, IButtonProps>(
+  ({ className, variant, size, type, ...props }, ref) => (
+    <button ref={ref}
+            type={type ?? 'button'}
+            className={buttonVariants({ variant, size, className })}
+            {...props} />
+  ),
+);
+Button.displayName = 'Button';

package/src/components/card.tsx

@@ -0,0 +1,23 @@
+// shadcn card family, `dui:`-prefixed (scoped tailwind).
+import { forwardRef, type HTMLAttributes } from 'react';
+import { cn } from '../cn';
+
+type DivProps = HTMLAttributes<HTMLDivElement>;
+
+const part = (name: string, classes: string) => {
+  const Part = forwardRef<HTMLDivElement, DivProps>(({ className, ...props }, ref) => (
+    <div ref={ref}
+         className={cn(classes, className)}
+         {...props} />
+  ));
+  Part.displayName = name;
+  return Part;
+};
+
+export const Card = part('Card',
+  'dui:rounded-xl dui:border dui:border-border dui:bg-card dui:text-card-foreground dui:shadow-sm');
+export const CardHeader = part('CardHeader', 'dui:flex dui:flex-col dui:gap-1.5 dui:p-6');
+export const CardTitle = part('CardTitle', 'dui:font-semibold dui:leading-none dui:tracking-tight');
+export const CardDescription = part('CardDescription', 'dui:text-sm dui:text-muted-foreground');
+export const CardContent = part('CardContent', 'dui:p-6 dui:pt-0');
+export const CardFooter = part('CardFooter', 'dui:flex dui:items-center dui:p-6 dui:pt-0');

package/src/components/form.tsx

@@ -0,0 +1,31 @@
+// The editor-form look dictionary: the SINGLE source of dui:* classes for editor facets —
+// the tailwind scan for '@mosetta/ui/form.css' runs over THIS file. A new class in the
+// editor goes here first, otherwise the utility misses the slice and the look silently breaks
+// (the invariant is held by uiKitE2E: every dui:* class in ui-kit sources must be covered by css).
+// Leftover: migrate editor facets from hand-written class strings to these presets.
+import type { HTMLAttributes } from 'react';
+import { cn } from '../cn';
+
+export const editorForm = {
+  /** a horizontal form row: label + control */
+  row: 'dui:flex dui:items-center dui:gap-2',
+  /** a text field/select in a settings form */
+  field: 'dui:flex dui:h-9 dui:w-full dui:rounded-md dui:border dui:border-input dui:bg-transparent dui:px-3 dui:text-sm',
+  /** a select in a settings form: the field, with room on the right for the chevron */
+  select: 'dui:flex dui:h-9 dui:w-full dui:rounded-md dui:border dui:border-input dui:bg-transparent dui:pl-3 dui:pr-9 dui:text-sm',
+  /** a small secondary button in a settings form (upload, pick, …) */
+  button: 'dui:inline-flex dui:h-8 dui:items-center dui:rounded-md dui:border dui:border-input dui:px-3 dui:text-sm dui:hover:bg-accent',
+  /** a control that exists for the script, not the eye (a hidden file input) */
+  hidden: 'dui:hidden',
+  /**
+   * a field's label: small and grey, so it reads apart from the values the author types — and
+   * set off from the field above it, which is what spaces a form's fields out
+   */
+  label: 'dui:block dui:mt-3 dui:mb-1 dui:first:mt-0 dui:text-xs dui:font-medium dui:text-muted-foreground',
+} as const;
+
+/** a field's label in a settings form (editorForm.label) */
+export function FormLabel({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn(editorForm.label, className)}
+              {...props} />;
+}

package/src/components/inline.tsx

@@ -0,0 +1,30 @@
+// The react half of the inline grammar: parsed nodes → elements. Bold, italic and code are
+// plain tags; a link is honoured only when its target is safe, otherwise its text stays text.
+import { Fragment, type ReactNode } from 'react';
+import { isSafeHref, parseInline, type TInlineNode } from '../inline';
+
+function renderNodes(nodes: readonly TInlineNode[], keyBase: string): ReactNode[] {
+  return nodes.map((node, index) => {
+    const key = `${keyBase}${index}`;
+    switch (node.kind) {
+      case 'text': return <Fragment key={key}>{node.text}</Fragment>;
+      case 'code': return <code key={key}
+                                className="dui:rounded dui:bg-muted dui:px-1 dui:font-mono dui:text-[0.9em]">{node.text}</code>;
+      case 'bold': return <strong key={key}
+                                  className="dui:font-semibold">{renderNodes(node.children, `${key}.`)}</strong>;
+      case 'italic': return <em key={key}>{renderNodes(node.children, `${key}.`)}</em>;
+      case 'link':
+        return isSafeHref(node.href)
+          ? <a key={key}
+               className="dui-inline-link dui:underline dui:underline-offset-2"
+               href={node.href}>{renderNodes(node.children, `${key}.`)}</a>
+          : <Fragment key={key}>{renderNodes(node.children, `${key}.`)}</Fragment>;
+      default: return null;
+    }
+  });
+}
+
+/** a string setting with inline markup, rendered — what Text, Heading and list items show */
+export function Inline({ text }: { readonly text: string }) {
+  return <>{renderNodes(parseInline(text), '')}</>;
+}

package/src/components/inlineField.tsx

@@ -0,0 +1,118 @@
+// The settings-form field for a string with inline markup: a growing textarea and three buttons
+// that wrap the selection in the grammar's marks — **bold**, *italic*, [text](url). No
+// contentEditable, no preview inside the field: the canvas beside the form IS the preview. The
+// field asks for focus on mount when told to, so picking a block in the tree lands the cursor
+// where the writing happens. It is at least `minRows` tall and grows with its text, and it is a
+// WIDE field (`data-wide-field`): a host with room — the canvas's settings card — widens for it.
+import { useEffect, useRef, type TextareaHTMLAttributes } from 'react';
+import { cn } from '../cn';
+
+export interface IInlineFieldProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onChange'> {
+  readonly value: string;
+  readonly onValueChange: (next: string) => void;
+  /** take the focus on mount (the tree just picked this block) */
+  readonly focusOnMount?: boolean;
+  /** how a link's target is asked for; default: window.prompt */
+  readonly askHref?: () => string | null;
+  /** the least height, in rows of text — writing needs room to see a paragraph (default 5) */
+  readonly minRows?: number;
+}
+
+type TMark = { readonly kind: 'bold' | 'italic' | 'link'; readonly label: string; readonly title: string };
+
+const MARKS: readonly TMark[] = [
+  { kind: 'bold', label: 'B', title: 'Bold (**text**)' },
+  { kind: 'italic', label: 'I', title: 'Italic (*text*)' },
+  { kind: 'link', label: '⛓', title: 'Link ([text](url))' },
+];
+
+/** the string with the selection wrapped; the caret lands after the closing mark */
+export function wrapSelection(value: string, start: number, end: number, kind: TMark['kind'], href = ''): { next: string; caret: number } {
+  const picked = value.slice(start, end);
+  const wrapped = kind === 'bold' ? `**${picked || 'bold'}**`
+    : kind === 'italic' ? `*${picked || 'italic'}*`
+      : `[${picked || 'link'}](${href})`;
+  return { next: value.slice(0, start) + wrapped + value.slice(end), caret: start + wrapped.length };
+}
+
+/** the textarea as tall as its text: the content height plus its own borders (border-box) */
+function fitHeight(el: HTMLTextAreaElement): void {
+  el.style.height = 'auto';
+  el.style.height = `${el.scrollHeight + el.offsetHeight - el.clientHeight}px`;
+}
+
+const MARK_CLASS = 'dui:inline-flex dui:h-7 dui:min-w-7 dui:items-center dui:justify-center dui:rounded-md dui:border dui:border-input dui:px-2 dui:text-xs dui:font-semibold dui:hover:bg-accent';
+
+export function InlineField({ value, onValueChange, focusOnMount, askHref, minRows = 5, className, ...props }: IInlineFieldProps) {
+  const ref = useRef<HTMLTextAreaElement>(null);
+  useEffect(() => {
+    if (focusOnMount) ref.current?.focus();
+  }, [focusOnMount]);
+  // the textarea follows its content: an article paragraph is longer than one row — and its
+  // WIDTH: the same text wraps into more rows when the form narrows (a resized popover), so the
+  // height is measured again whenever the width changes, not only when the text does
+  useEffect(() => {
+    if (ref.current) fitHeight(ref.current);
+  }, [value]);
+  useEffect(() => {
+    const el = ref.current;
+    const Observer = el?.ownerDocument.defaultView?.ResizeObserver;
+    if (!el || !Observer) return undefined;
+    let width = el.clientWidth;
+    const observer = new Observer(() => {
+      if (el.clientWidth === width) return; // our own height write — nothing to re-measure
+      width = el.clientWidth;
+      fitHeight(el);
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
+  const apply = (kind: TMark['kind']) => {
+    const el = ref.current;
+    if (!el) return;
+    let href = '';
+    if (kind === 'link') {
+      const asked = (askHref ?? ((): string | null => (typeof window !== 'undefined' ? window.prompt('Link address') : null)))();
+      if (asked === null) return;
+      href = asked.trim();
+    }
+    const { next, caret } = wrapSelection(value, el.selectionStart, el.selectionEnd, kind, href);
+    onValueChange(next);
+    requestAnimationFrame(() => {
+      el.focus();
+      el.setSelectionRange(caret, caret);
+    });
+  };
+
+  return (
+    <div className="dui:flex dui:flex-col dui:gap-1">
+      <div className="dui:flex dui:gap-1"
+           data-inline-toolbar>
+        {MARKS.map((mark) => (
+          <button key={mark.kind}
+                  type="button"
+                  className={MARK_CLASS}
+                  title={mark.title}
+                  aria-label={mark.title}
+                  data-inline-mark={mark.kind}
+                  onMouseDown={(e) => e.preventDefault()} // keep the textarea's selection alive
+                  onClick={() => apply(mark.kind)}>
+            {mark.label}
+          </button>
+        ))}
+      </div>
+      <textarea ref={ref}
+                className={cn(
+                  'dui:flex dui:min-h-9 dui:w-full dui:resize-none dui:rounded-md dui:border dui:border-input dui:bg-transparent',
+                  'dui:px-3 dui:py-1.5 dui:text-sm dui:shadow-sm dui:outline-none dui:focus-visible:ring-2 dui:focus-visible:ring-ring',
+                  className,
+                )}
+                rows={minRows}
+                data-wide-field=""
+                value={value ?? ''}
+                onChange={(e) => onValueChange(e.target.value)}
+                {...props} />
+    </div>
+  );
+}

package/src/components/input.tsx

@@ -0,0 +1,18 @@
+// shadcn input, `dui:`-prefixed (scoped tailwind).
+import { forwardRef, type InputHTMLAttributes } from 'react';
+import { cn } from '../cn';
+
+export interface IInputProps extends InputHTMLAttributes<HTMLInputElement> {}
+
+export const Input = forwardRef<HTMLInputElement, IInputProps>(({ className, ...props }, ref) => (
+  <input ref={ref}
+         className={cn(
+           'dui:flex dui:h-9 dui:w-full dui:rounded-md dui:border dui:border-input dui:bg-transparent',
+           'dui:px-3 dui:py-1 dui:text-sm dui:shadow-sm dui:transition-colors dui:outline-none',
+           'dui:placeholder:text-muted-foreground dui:focus-visible:ring-2 dui:focus-visible:ring-ring',
+           'dui:disabled:cursor-not-allowed dui:disabled:opacity-50',
+           className,
+         )}
+         {...props} />
+));
+Input.displayName = 'Input';

package/src/components/mosaic.tsx

@@ -0,0 +1,52 @@
+// A MOSAIC — a 4×4 pattern of tiles drawn from a name. mosetta builds pages from blocks the way
+// a mosaic is laid from tiles; the pattern makes a site (or a person) recognisable at a glance
+// and never changes while the name does not. The cabinet wears it on every site, the workbench
+// on the project and the account.
+import { ComponentProps } from 'react';
+
+const TILES = ['#2f5bea', '#11a69a', '#f2b635', '#f0685a', '#7a4cc2'];
+
+function digest(text: string): number {
+  let hash = 0x811c9dc5;
+  for (let i = 0; i < text.length; i += 1) {
+    hash ^= text.charCodeAt(i);
+    hash = Math.imul(hash, 0x01000193);
+  }
+  return hash >>> 0;
+}
+
+export interface IMosaicProps extends Omit<ComponentProps<'svg'>, 'width' | 'height' | 'viewBox'> {
+  /** the name the tiles are drawn from */
+  readonly seed: string;
+  /** the square's side, in pixels */
+  readonly size: number;
+  /** the colour of a bare cell — defaults to a faint grey */
+  readonly bare?: string;
+}
+
+/** a name's tiles: sixteen cells, some left bare, the rest coloured — the same name, the same mosaic */
+export function Mosaic({ seed, size, bare = 'rgba(127, 127, 127, 0.14)', ...rest }: IMosaicProps) {
+  const cell = size / 4;
+  const gap = Math.max(1, Math.round(size / 24));
+  const cells = Array.from({ length: 16 }, (_, i) => {
+    const h = digest(`${seed}#${i}`);
+    return h % 5 === 0 ? null : TILES[(h >>> 4) % TILES.length];
+  });
+  return (
+    <svg width={size}
+         height={size}
+         viewBox={`0 0 ${size} ${size}`}
+         aria-hidden="true"
+         {...rest}>
+      {cells.map((fill, i) => (
+        <rect key={i}
+              x={(i % 4) * cell + gap / 2}
+              y={Math.floor(i / 4) * cell + gap / 2}
+              width={cell - gap}
+              height={cell - gap}
+              rx={gap}
+              fill={fill ?? bare} />
+      ))}
+    </svg>
+  );
+}

package/src/components/stack.tsx

@@ -0,0 +1,42 @@
+// Layout stack — lives in the LIBRARY so its dui:* classes are covered by the css scan
+// (consumers may not introduce utilities). The `stack` protocol module wraps this.
+import { forwardRef, type HTMLAttributes } from 'react';
+import { variants, type VariantProps } from '../variants';
+
+export const stackVariants = variants({
+  base: 'dui:flex',
+  variants: {
+    direction: {
+      vertical: 'dui:flex-col',
+      horizontal: 'dui:flex-row',
+    },
+    gap: {
+      none: 'dui:gap-0',
+      sm: 'dui:gap-2',
+      md: 'dui:gap-4',
+      lg: 'dui:gap-6',
+    },
+    align: {
+      start: 'dui:items-start',
+      center: 'dui:items-center',
+      end: 'dui:items-end',
+      stretch: 'dui:items-stretch',
+    },
+  },
+  defaultVariants: { direction: 'vertical', gap: 'md', align: 'stretch' },
+});
+
+export interface IStackProps
+  extends HTMLAttributes<HTMLDivElement>,
+  VariantProps<{ direction: Record<'vertical' | 'horizontal', string>;
+    gap: Record<'none' | 'sm' | 'md' | 'lg', string>;
+    align: Record<'start' | 'center' | 'end' | 'stretch', string> }> {}
+
+export const Stack = forwardRef<HTMLDivElement, IStackProps>(
+  ({ className, direction, gap, align, ...props }, ref) => (
+    <div ref={ref}
+         className={stackVariants({ direction, gap, align, className })}
+         {...props} />
+  ),
+);
+Stack.displayName = 'Stack';