@tensor_1/react 2.12.0 → 2.14.2

package/README.md

@@ -40,4 +40,20 @@ import { Chart } from "@tensor_1/react/chart/preset";
 Large fixed-height tables can use `useVirtualRows(rows, { rowHeight })`; attach its `containerRef` to
 `TableWrap` and render the returned row window between spacer rows.
 
+## UIX-V3 capability components
+
+Phase 46.9 adds eleven controlled, domain-neutral components:
+
+- Authoring: `RuleBuilder` and `BuilderCanvas`.
+- Time: `SchedulingCalendar` and `DateRangePicker`.
+- Relationships and review: `RelationshipGraph` and `MatchReview`.
+- Configuration: `MetricInput`, `LicensePositionBar`, `BrandProfiles` (also
+  `BrandProfileEditor`), `DiffViewer`, and `ColorPicker`.
+
+Their serializable helpers are exported from the main entry as well: immutable
+rule-tree operations, calendar/time-zone helpers, bounded graph layout and
+traversal, three-way JSON diffing, metric parsing/stepping, color conversion and
+contrast checks, plus brand-profile apply/restore helpers. No graph or date
+runtime dependency is required.
+
 Ships **ESM + CJS + types**, with per-file `"use client"` so it's safe under React Server Components. Part of the **[UIx v2 styleguide](https://github.com/COx-ORG-H/UIx)**.

package/dist/calendar-model.d.ts

@@ -0,0 +1,31 @@
+interface CalendarDay {
+    date: string;
+    day: number;
+    inMonth: boolean;
+    weekday: number;
+}
+interface DateRangeValue {
+    start?: string;
+    end?: string;
+}
+interface ZonedDateSpan {
+    start: string;
+    end: string;
+}
+declare function toDateKey(date: Date): string;
+declare function addCalendarDays(value: string, amount: number): string;
+declare function addCalendarMonths(value: string, amount: number): string;
+declare function startOfMonth(value: string): string;
+declare function buildMonthGrid(month: string, weekStartsOn?: 0 | 1): CalendarDay[];
+declare function zonedDateKey(instant: string | Date, timeZone: string): string;
+declare function zonedDateSpan(start: string, end: string, timeZone: string): ZonedDateSpan;
+declare function enumerateDateSpan(span: ZonedDateSpan, limit?: number): string[];
+declare function selectRangeDate(current: DateRangeValue, date: string): DateRangeValue;
+declare function isDateInRange(date: string, value: DateRangeValue): boolean;
+declare function isDateUnavailable(date: string, options: {
+    min?: string;
+    max?: string;
+    isDisabled?: (date: string) => boolean;
+}): boolean;
+
+export { type CalendarDay, type DateRangeValue, type ZonedDateSpan, addCalendarDays, addCalendarMonths, buildMonthGrid, enumerateDateSpan, isDateInRange, isDateUnavailable, selectRangeDate, startOfMonth, toDateKey, zonedDateKey, zonedDateSpan };

package/dist/calendar-model.js

@@ -0,0 +1,89 @@
+function fromDateKey(value) {
+  const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value);
+  if (!match) throw new TypeError(`Invalid ISO date: ${value}`);
+  return new Date(Date.UTC(Number(match[1]), Number(match[2]) - 1, Number(match[3])));
+}
+function toDateKey(date) {
+  return `${date.getUTCFullYear().toString().padStart(4, "0")}-${(date.getUTCMonth() + 1).toString().padStart(2, "0")}-${date.getUTCDate().toString().padStart(2, "0")}`;
+}
+function addCalendarDays(value, amount) {
+  const date = fromDateKey(value);
+  date.setUTCDate(date.getUTCDate() + amount);
+  return toDateKey(date);
+}
+function addCalendarMonths(value, amount) {
+  const date = fromDateKey(value);
+  const day = date.getUTCDate();
+  date.setUTCDate(1);
+  date.setUTCMonth(date.getUTCMonth() + amount);
+  const last = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth() + 1, 0)).getUTCDate();
+  date.setUTCDate(Math.min(day, last));
+  return toDateKey(date);
+}
+function startOfMonth(value) {
+  return `${value.slice(0, 7)}-01`;
+}
+function buildMonthGrid(month, weekStartsOn = 1) {
+  const first = fromDateKey(startOfMonth(month));
+  const offset = (first.getUTCDay() - weekStartsOn + 7) % 7;
+  const start = addCalendarDays(toDateKey(first), -offset);
+  return Array.from({ length: 42 }, (_, index) => {
+    const date = addCalendarDays(start, index);
+    const parsed = fromDateKey(date);
+    return {
+      date,
+      day: parsed.getUTCDate(),
+      inMonth: date.slice(0, 7) === month.slice(0, 7),
+      weekday: parsed.getUTCDay()
+    };
+  });
+}
+function zonedDateKey(instant, timeZone) {
+  const date = instant instanceof Date ? instant : new Date(instant);
+  if (Number.isNaN(date.getTime())) throw new TypeError(`Invalid instant: ${String(instant)}`);
+  const parts = new Intl.DateTimeFormat("en-CA", {
+    timeZone,
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit"
+  }).formatToParts(date);
+  const get = (type) => parts.find((part) => part.type === type)?.value ?? "";
+  return `${get("year")}-${get("month")}-${get("day")}`;
+}
+function zonedDateSpan(start, end, timeZone) {
+  const startKey = zonedDateKey(start, timeZone);
+  const endKey = zonedDateKey(end, timeZone);
+  return startKey <= endKey ? { start: startKey, end: endKey } : { start: endKey, end: startKey };
+}
+function enumerateDateSpan(span, limit = 370) {
+  const dates = [];
+  let current = span.start;
+  while (current <= span.end && dates.length < limit) {
+    dates.push(current);
+    current = addCalendarDays(current, 1);
+  }
+  return dates;
+}
+function selectRangeDate(current, date) {
+  if (!current.start || current.end) return { start: date };
+  return date < current.start ? { start: date, end: current.start } : { start: current.start, end: date };
+}
+function isDateInRange(date, value) {
+  return !!value.start && !!value.end && date >= value.start && date <= value.end;
+}
+function isDateUnavailable(date, options) {
+  return !!options.min && date < options.min || !!options.max && date > options.max || !!options.isDisabled?.(date);
+}
+export {
+  addCalendarDays,
+  addCalendarMonths,
+  buildMonthGrid,
+  enumerateDateSpan,
+  isDateInRange,
+  isDateUnavailable,
+  selectRangeDate,
+  startOfMonth,
+  toDateKey,
+  zonedDateKey,
+  zonedDateSpan
+};

package/dist/color-model.d.ts

@@ -0,0 +1,20 @@
+interface RgbColor {
+    r: number;
+    g: number;
+    b: number;
+}
+interface HsvColor {
+    h: number;
+    s: number;
+    v: number;
+}
+declare function normalizeHex(value: string): string | undefined;
+declare function hexToRgb(value: string): RgbColor | undefined;
+declare function rgbToHex({ r, g, b }: RgbColor): string;
+declare function rgbToHsv({ r, g, b }: RgbColor): HsvColor;
+declare function hsvToRgb({ h, s, v }: HsvColor): RgbColor;
+declare function hsvToHex(value: HsvColor): string;
+declare function contrastRatio(background: string, foreground: string): number | undefined;
+declare function meetsContrast(background: string, foreground: string, minimum?: number): boolean;
+
+export { type HsvColor, type RgbColor, contrastRatio, hexToRgb, hsvToHex, hsvToRgb, meetsContrast, normalizeHex, rgbToHex, rgbToHsv };

package/dist/color-model.js

@@ -0,0 +1,74 @@
+const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+function normalizeHex(value) {
+  const raw = value.trim().replace(/^#/, "");
+  if (/^[\da-f]{3}$/i.test(raw)) return `#${raw.split("").map((char) => char + char).join("").toUpperCase()}`;
+  if (/^[\da-f]{6}$/i.test(raw)) return `#${raw.toUpperCase()}`;
+  return void 0;
+}
+function hexToRgb(value) {
+  const hex = normalizeHex(value);
+  if (!hex) return void 0;
+  return {
+    r: Number.parseInt(hex.slice(1, 3), 16),
+    g: Number.parseInt(hex.slice(3, 5), 16),
+    b: Number.parseInt(hex.slice(5, 7), 16)
+  };
+}
+function rgbToHex({ r, g, b }) {
+  return `#${[r, g, b].map((value) => Math.round(clamp(value, 0, 255)).toString(16).padStart(2, "0")).join("").toUpperCase()}`;
+}
+function rgbToHsv({ r, g, b }) {
+  const values = [r, g, b].map((value) => clamp(value, 0, 255) / 255);
+  const max = Math.max(...values);
+  const min = Math.min(...values);
+  const delta = max - min;
+  let h = 0;
+  if (delta !== 0) {
+    if (max === values[0]) h = 60 * ((values[1] - values[2]) / delta % 6);
+    else if (max === values[1]) h = 60 * ((values[2] - values[0]) / delta + 2);
+    else h = 60 * ((values[0] - values[1]) / delta + 4);
+  }
+  if (h < 0) h += 360;
+  return { h, s: max === 0 ? 0 : delta / max, v: max };
+}
+function hsvToRgb({ h, s, v }) {
+  const hue = (h % 360 + 360) % 360;
+  const sat = clamp(s, 0, 1);
+  const value = clamp(v, 0, 1);
+  const chroma = value * sat;
+  const x = chroma * (1 - Math.abs(hue / 60 % 2 - 1));
+  const m = value - chroma;
+  const sector = Math.floor(hue / 60);
+  const rgb = sector === 0 ? [chroma, x, 0] : sector === 1 ? [x, chroma, 0] : sector === 2 ? [0, chroma, x] : sector === 3 ? [0, x, chroma] : sector === 4 ? [x, 0, chroma] : [chroma, 0, x];
+  return { r: (rgb[0] + m) * 255, g: (rgb[1] + m) * 255, b: (rgb[2] + m) * 255 };
+}
+function hsvToHex(value) {
+  return rgbToHex(hsvToRgb(value));
+}
+function relativeLuminance({ r, g, b }) {
+  const linear = [r, g, b].map((channel) => {
+    const value = channel / 255;
+    return value <= 0.04045 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;
+  });
+  return 0.2126 * linear[0] + 0.7152 * linear[1] + 0.0722 * linear[2];
+}
+function contrastRatio(background, foreground) {
+  const bg = hexToRgb(background);
+  const fg = hexToRgb(foreground);
+  if (!bg || !fg) return void 0;
+  const [light, dark] = [relativeLuminance(bg), relativeLuminance(fg)].sort((a, b) => b - a);
+  return (light + 0.05) / (dark + 0.05);
+}
+function meetsContrast(background, foreground, minimum = 4.5) {
+  return (contrastRatio(background, foreground) ?? 0) >= minimum;
+}
+export {
+  contrastRatio,
+  hexToRgb,
+  hsvToHex,
+  hsvToRgb,
+  meetsContrast,
+  normalizeHex,
+  rgbToHex,
+  rgbToHsv
+};

package/dist/components/BrandProfiles.d.ts

@@ -0,0 +1,45 @@
+import * as react from 'react';
+
+interface BrandProfileTypography {
+    sans?: string;
+    heading?: string;
+    mono?: string;
+}
+interface BrandProfileLogo {
+    src: string;
+    alt: string;
+}
+interface BrandProfile {
+    id: string;
+    name: string;
+    brand: string;
+    brandForeground: string;
+    typography?: BrandProfileTypography;
+    logo?: BrandProfileLogo;
+}
+interface AppliedBrandProfileSnapshot {
+    profileId?: string;
+    properties: Record<string, string>;
+    logoSrc?: string;
+    logoAlt?: string;
+}
+/** Apply only the existing UIx brand/font slots and readable logo metadata. */
+declare function applyBrandProfile(profile: BrandProfile, target?: HTMLElement | null): AppliedBrandProfileSnapshot | undefined;
+declare function restoreBrandProfile(snapshot: AppliedBrandProfileSnapshot, target?: HTMLElement | null): void;
+interface BrandProfileEditorProps {
+    value: BrandProfile;
+    onChange: (profile: BrandProfile) => void;
+    profiles?: BrandProfile[];
+    onSelectProfile?: (profile: BrandProfile) => void;
+    onApply?: (profile: BrandProfile) => void;
+    applyTarget?: HTMLElement | null;
+    onLogoFile?: (file: File) => void;
+    colorPresets?: string[];
+    className?: string;
+}
+/** Small controlled editor composition for serializable UIx brand profiles. */
+declare function BrandProfileEditor({ value, onChange, profiles, onSelectProfile, onApply, applyTarget, onLogoFile, colorPresets, className, }: BrandProfileEditorProps): react.JSX.Element;
+/** Canonical Phase 46.9 export; equivalent to BrandProfileEditor. */
+declare const BrandProfiles: typeof BrandProfileEditor;
+
+export { type AppliedBrandProfileSnapshot, type BrandProfile, BrandProfileEditor, type BrandProfileEditorProps, type BrandProfileLogo, type BrandProfileTypography, BrandProfiles, applyBrandProfile, restoreBrandProfile };

package/dist/components/BrandProfiles.js

@@ -0,0 +1,150 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { cx } from "../cx.js";
+import { normalizeHex } from "../color-model.js";
+import { ColorPicker } from "./ColorPicker.js";
+const PROFILE_PROPERTIES = {
+  brand: "--uix-brand",
+  brandForeground: "--uix-brand-fg",
+  sans: "--uix-font-sans",
+  heading: "--uix-font-heading",
+  mono: "--uix-font-mono"
+};
+const EMPTY_PROFILES = [];
+const EMPTY_COLORS = [];
+function applyBrandProfile(profile, target) {
+  const element = target ?? (typeof document === "undefined" ? void 0 : document.documentElement);
+  if (!element) return void 0;
+  const brand = normalizeHex(profile.brand);
+  const foreground = normalizeHex(profile.brandForeground);
+  if (!brand || !foreground) throw new TypeError("Brand profiles require valid hex brand and foreground colors.");
+  const properties = {};
+  Object.values(PROFILE_PROPERTIES).forEach((property) => {
+    properties[property] = element.style.getPropertyValue(property);
+  });
+  const snapshot = {
+    profileId: element.dataset.uixBrandProfile,
+    properties,
+    logoSrc: element.dataset.uixBrandLogoSrc,
+    logoAlt: element.dataset.uixBrandLogoAlt
+  };
+  element.style.setProperty(PROFILE_PROPERTIES.brand, brand);
+  element.style.setProperty(PROFILE_PROPERTIES.brandForeground, foreground);
+  const typography = profile.typography ?? {};
+  for (const [key, property] of Object.entries({ sans: PROFILE_PROPERTIES.sans, heading: PROFILE_PROPERTIES.heading, mono: PROFILE_PROPERTIES.mono })) {
+    const value = typography[key];
+    if (value) element.style.setProperty(property, value);
+    else element.style.removeProperty(property);
+  }
+  element.dataset.uixBrandProfile = profile.id;
+  if (profile.logo) {
+    element.dataset.uixBrandLogoSrc = profile.logo.src;
+    element.dataset.uixBrandLogoAlt = profile.logo.alt;
+  } else {
+    delete element.dataset.uixBrandLogoSrc;
+    delete element.dataset.uixBrandLogoAlt;
+  }
+  return snapshot;
+}
+function restoreBrandProfile(snapshot, target) {
+  const element = target ?? (typeof document === "undefined" ? void 0 : document.documentElement);
+  if (!element) return;
+  Object.entries(snapshot.properties).forEach(([property, value]) => {
+    if (value) element.style.setProperty(property, value);
+    else element.style.removeProperty(property);
+  });
+  if (snapshot.profileId) element.dataset.uixBrandProfile = snapshot.profileId;
+  else delete element.dataset.uixBrandProfile;
+  if (snapshot.logoSrc) element.dataset.uixBrandLogoSrc = snapshot.logoSrc;
+  else delete element.dataset.uixBrandLogoSrc;
+  if (snapshot.logoAlt) element.dataset.uixBrandLogoAlt = snapshot.logoAlt;
+  else delete element.dataset.uixBrandLogoAlt;
+}
+function BrandProfileEditor({
+  value,
+  onChange,
+  profiles = EMPTY_PROFILES,
+  onSelectProfile,
+  onApply,
+  applyTarget,
+  onLogoFile,
+  colorPresets = EMPTY_COLORS,
+  className
+}) {
+  const [announcement, setAnnouncement] = useState("");
+  const update = (patch) => onChange({ ...value, ...patch });
+  const apply = () => {
+    if (applyTarget !== null) applyBrandProfile(value, applyTarget);
+    onApply?.(value);
+    setAnnouncement(`${value.name} applied.`);
+  };
+  const onFile = (event) => {
+    const file = event.currentTarget.files?.[0];
+    if (file) onLogoFile?.(file);
+  };
+  const previewStyle = {
+    "--uix-brand": normalizeHex(value.brand) ?? value.brand,
+    "--uix-brand-fg": normalizeHex(value.brandForeground) ?? value.brandForeground,
+    ...value.typography?.sans ? { "--uix-font-sans": value.typography.sans } : {},
+    ...value.typography?.heading ? { "--uix-font-heading": value.typography.heading } : {}
+  };
+  return /* @__PURE__ */ jsxs("section", { className: cx("uix-brand-profiles", className), "aria-label": "Brand profile editor", children: [
+    /* @__PURE__ */ jsxs("div", { className: "uix-brand-profiles__form", children: [
+      profiles.length > 0 && /* @__PURE__ */ jsxs("label", { className: "uix-field__label", children: [
+        "Profile",
+        /* @__PURE__ */ jsx("select", { className: "uix-select", value: value.id, onChange: (event) => {
+          const selected = profiles.find((profile) => profile.id === event.currentTarget.value);
+          if (selected) onSelectProfile?.(selected);
+        }, children: profiles.map((profile) => /* @__PURE__ */ jsx("option", { value: profile.id, children: profile.name }, profile.id)) })
+      ] }),
+      /* @__PURE__ */ jsxs("label", { className: "uix-field__label", children: [
+        "Name",
+        /* @__PURE__ */ jsx("input", { className: "uix-input", value: value.name, onChange: (event) => update({ name: event.currentTarget.value }) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "uix-brand-profiles__colors", children: [
+        /* @__PURE__ */ jsxs("label", { children: [
+          "Brand",
+          /* @__PURE__ */ jsx(ColorPicker, { label: "Brand color", value: value.brand, foreground: value.brandForeground, presets: colorPresets, onChange: (brand) => update({ brand }) })
+        ] }),
+        /* @__PURE__ */ jsxs("label", { children: [
+          "On brand",
+          /* @__PURE__ */ jsx(ColorPicker, { label: "Brand foreground color", value: value.brandForeground, foreground: value.brand, presets: colorPresets, onChange: (brandForeground) => update({ brandForeground }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("label", { className: "uix-field__label", children: [
+        "Body font",
+        /* @__PURE__ */ jsx("input", { className: "uix-input", value: value.typography?.sans ?? "", onChange: (event) => update({ typography: { ...value.typography, sans: event.currentTarget.value || void 0 } }) })
+      ] }),
+      /* @__PURE__ */ jsxs("label", { className: "uix-field__label", children: [
+        "Heading font",
+        /* @__PURE__ */ jsx("input", { className: "uix-input", value: value.typography?.heading ?? "", onChange: (event) => update({ typography: { ...value.typography, heading: event.currentTarget.value || void 0 } }) })
+      ] }),
+      /* @__PURE__ */ jsxs("label", { className: "uix-file-upload uix-brand-profiles__upload", children: [
+        "Logo file",
+        /* @__PURE__ */ jsx("input", { type: "file", accept: "image/*", onChange: onFile })
+      ] }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--primary", onClick: apply, children: "Apply profile" }),
+      /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", "aria-live": "polite", children: announcement })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "uix-brand-profiles__preview", style: previewStyle, "aria-label": `Live preview of ${value.name}`, children: [
+      /* @__PURE__ */ jsxs("div", { className: "uix-brand-profiles__preview-header", children: [
+        value.logo ? /* @__PURE__ */ jsx("img", { src: value.logo.src, alt: value.logo.alt }) : /* @__PURE__ */ jsx("span", { className: "uix-brand-profiles__logo-placeholder", children: "Logo" }),
+        /* @__PURE__ */ jsx("strong", { children: value.name || "Brand preview" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "uix-brand-profiles__preview-body", children: [
+        /* @__PURE__ */ jsx("h3", { children: "Readable, serializable branding" }),
+        /* @__PURE__ */ jsx("p", { children: "Accent, links, rings, and muted states continue through the existing UIx token chain." }),
+        /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--primary", children: "Primary action" }),
+        /* @__PURE__ */ jsx("a", { href: "#brand-profile-preview", children: "Preview link" })
+      ] })
+    ] })
+  ] });
+}
+const BrandProfiles = BrandProfileEditor;
+export {
+  BrandProfileEditor,
+  BrandProfiles,
+  applyBrandProfile,
+  restoreBrandProfile
+};

package/dist/components/BuilderCanvas.d.ts

@@ -0,0 +1,34 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface BuilderCanvasItem {
+    id: string;
+    type: string;
+    label: string;
+    description?: string;
+    properties?: Record<string, unknown>;
+}
+interface BuilderPaletteItem {
+    id: string;
+    label: string;
+    description?: string;
+    create: () => BuilderCanvasItem;
+}
+interface BuilderCanvasProps {
+    items: BuilderCanvasItem[];
+    onItemsChange: (items: BuilderCanvasItem[]) => void;
+    palette: BuilderPaletteItem[];
+    selectedId?: string;
+    onSelect?: (id: string | undefined) => void;
+    renderItem?: (item: BuilderCanvasItem, selected: boolean) => ReactNode;
+    renderProperties?: (item: BuilderCanvasItem, onChange: (item: BuilderCanvasItem) => void) => ReactNode;
+    loading?: boolean;
+    error?: string;
+    onRetry?: () => void;
+    emptyMessage?: string;
+    className?: string;
+}
+/** Palette + sortable canvas + property panel scaffold. Owns interaction, never persistence. */
+declare function BuilderCanvas({ items, onItemsChange, palette, selectedId: controlledSelectedId, onSelect, renderItem, renderProperties, loading, error, onRetry, emptyMessage, className, }: BuilderCanvasProps): react.JSX.Element;
+
+export { BuilderCanvas, type BuilderCanvasItem, type BuilderCanvasProps, type BuilderPaletteItem };

package/dist/components/BuilderCanvas.js

@@ -0,0 +1,117 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { cx } from "../cx.js";
+import { reorder } from "../table-engine.js";
+function BuilderCanvas({
+  items,
+  onItemsChange,
+  palette,
+  selectedId: controlledSelectedId,
+  onSelect,
+  renderItem,
+  renderProperties,
+  loading,
+  error,
+  onRetry,
+  emptyMessage = "Add an item from the palette to begin.",
+  className
+}) {
+  const [internalSelectedId, setInternalSelectedId] = useState();
+  const [draggedId, setDraggedId] = useState();
+  const propertyHeadingRef = useRef(null);
+  const shouldFocusProperties = useRef(false);
+  const selectedId = controlledSelectedId ?? internalSelectedId;
+  const selected = items.find((item) => item.id === selectedId);
+  useEffect(() => {
+    if (shouldFocusProperties.current && selected) {
+      propertyHeadingRef.current?.focus();
+      shouldFocusProperties.current = false;
+    }
+  }, [selected]);
+  const select = (id, focusProperties = true) => {
+    shouldFocusProperties.current = focusProperties;
+    if (controlledSelectedId === void 0) setInternalSelectedId(id);
+    onSelect?.(id);
+  };
+  const move = (id, direction) => {
+    const index = items.findIndex((item) => item.id === id);
+    const target = index + direction;
+    if (index < 0 || target < 0 || target >= items.length) return;
+    onItemsChange(reorder(items, index, target));
+  };
+  const add = (paletteItem) => {
+    const item = paletteItem.create();
+    onItemsChange([...items, item]);
+    select(item.id);
+  };
+  const remove = (id) => {
+    onItemsChange(items.filter((item) => item.id !== id));
+    if (selectedId === id) select(void 0, false);
+  };
+  const drop = (event, targetId) => {
+    event.preventDefault();
+    if (!draggedId || draggedId === targetId) return;
+    const from = items.findIndex((item) => item.id === draggedId);
+    const to = items.findIndex((item) => item.id === targetId);
+    if (from >= 0 && to >= 0) onItemsChange(reorder(items, from, to));
+    setDraggedId(void 0);
+  };
+  return /* @__PURE__ */ jsxs("section", { className: cx("uix-builder-canvas", className), "aria-label": "Builder canvas", children: [
+    /* @__PURE__ */ jsxs("aside", { className: "uix-builder-canvas__palette", "aria-label": "Item palette", children: [
+      /* @__PURE__ */ jsx("h3", { children: "Palette" }),
+      palette.length === 0 ? /* @__PURE__ */ jsx("p", { children: "No item types available." }) : /* @__PURE__ */ jsx("ul", { children: palette.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => add(item), children: [
+        /* @__PURE__ */ jsx("strong", { children: item.label }),
+        item.description && /* @__PURE__ */ jsx("span", { children: item.description }),
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "Add" })
+      ] }) }, item.id)) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "uix-builder-canvas__workspace", children: [
+      /* @__PURE__ */ jsx("h3", { children: "Canvas" }),
+      loading ? /* @__PURE__ */ jsx("div", { className: "uix-builder-canvas__state", role: "status", children: "Loading canvas\u2026" }) : error ? /* @__PURE__ */ jsxs("div", { className: "uix-builder-canvas__state", role: "alert", children: [
+        /* @__PURE__ */ jsx("p", { children: error }),
+        onRetry && /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--secondary", onClick: onRetry, children: "Try again" })
+      ] }) : items.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "uix-builder-canvas__state", children: [
+        /* @__PURE__ */ jsx("p", { children: emptyMessage }),
+        palette[0] && /* @__PURE__ */ jsxs("button", { type: "button", className: "uix-btn uix-btn--primary", onClick: () => add(palette[0]), children: [
+          "Add ",
+          palette[0].label
+        ] })
+      ] }) : /* @__PURE__ */ jsx("ol", { className: "uix-builder-canvas__items", children: items.map((item, index) => /* @__PURE__ */ jsxs(
+        "li",
+        {
+          draggable: true,
+          onDragStart: () => setDraggedId(item.id),
+          onDragEnd: () => setDraggedId(void 0),
+          onDragOver: (event) => event.preventDefault(),
+          onDrop: (event) => drop(event, item.id),
+          className: cx("uix-builder-canvas__item", selectedId === item.id && "uix-builder-canvas__item--selected"),
+          children: [
+            /* @__PURE__ */ jsx("button", { type: "button", className: "uix-builder-canvas__item-main", "aria-pressed": selectedId === item.id, onClick: () => select(item.id), children: renderItem?.(item, selectedId === item.id) ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("strong", { children: item.label }),
+              item.description && /* @__PURE__ */ jsx("span", { children: item.description })
+            ] }) }),
+            /* @__PURE__ */ jsxs("span", { className: "uix-builder-canvas__item-actions", children: [
+              /* @__PURE__ */ jsx("button", { type: "button", onClick: () => move(item.id, -1), disabled: index === 0, "aria-label": `Move ${item.label} up`, children: "Up" }),
+              /* @__PURE__ */ jsx("button", { type: "button", onClick: () => move(item.id, 1), disabled: index === items.length - 1, "aria-label": `Move ${item.label} down`, children: "Down" }),
+              /* @__PURE__ */ jsx("button", { type: "button", onClick: () => remove(item.id), "aria-label": `Remove ${item.label}`, children: "Remove" })
+            ] })
+          ]
+        },
+        item.id
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxs("aside", { className: "uix-builder-canvas__properties", "aria-label": "Item properties", children: [
+      /* @__PURE__ */ jsx("h3", { ref: propertyHeadingRef, tabIndex: -1, children: "Properties" }),
+      !selected ? /* @__PURE__ */ jsx("p", { children: "Select a canvas item to edit its properties." }) : renderProperties?.(selected, (updated) => onItemsChange(items.map((item) => item.id === updated.id ? updated : item))) ?? /* @__PURE__ */ jsxs("dl", { children: [
+        /* @__PURE__ */ jsx("dt", { children: "Type" }),
+        /* @__PURE__ */ jsx("dd", { children: selected.type }),
+        /* @__PURE__ */ jsx("dt", { children: "Label" }),
+        /* @__PURE__ */ jsx("dd", { children: selected.label })
+      ] })
+    ] })
+  ] });
+}
+export {
+  BuilderCanvas
+};

package/dist/components/ColorPicker.d.ts

@@ -0,0 +1,17 @@
+import * as react from 'react';
+
+interface ColorPickerProps {
+    value: string;
+    onChange: (value: string) => void;
+    foreground: string;
+    presets?: string[];
+    recent?: string[];
+    minimumContrast?: number;
+    label?: string;
+    disabled?: boolean;
+    className?: string;
+}
+/** Token-friendly HSV/hex picker with a fully keyboard-operable path and contrast feedback. */
+declare function ColorPicker({ value, onChange, foreground, presets, recent, minimumContrast, label, disabled, className, }: ColorPickerProps): react.JSX.Element;
+
+export { ColorPicker, type ColorPickerProps };