@silverpoint/core 0.1.1 → 0.3.0

package/dist/ui.js

@@ -0,0 +1,715 @@
+import { round2, roundPathData, arcPath, circlePath, diagnose, resolveSeed, DEFAULTS } from './chunk-I6BAZ7MJ.js';
+
+// src/ui/catalog.ts
+var BATCH = {
+  Button: "B1",
+  Input: "B1",
+  Checkbox: "B1",
+  Switch: "B1",
+  Card: "B1",
+  Divider: "B1",
+  RadioGroup: "B2",
+  Segmented: "B2",
+  Tabs: "B2",
+  Slider: "B2",
+  Rate: "B2"
+};
+var row = (name, group, states) => Object.freeze({
+  name,
+  batch: BATCH[name] ?? "B3",
+  slug: name.replace(/[A-Z]/g, (m, i) => (i ? "-" : "") + m.toLowerCase()),
+  component: `Sp${name}`,
+  group,
+  states: Object.freeze([...states])
+});
+var UI_COMPONENTS = /* @__PURE__ */ Object.freeze([
+  row("Button", "actions", ["default", "primary", "danger", "disabled"]),
+  row("Input", "data-entry", ["empty", "filled", "invalid", "disabled"]),
+  row("Checkbox", "data-entry", ["unchecked", "checked", "indeterminate", "disabled"]),
+  row("RadioGroup", "data-entry", ["selected", "disabled-item"]),
+  row("Switch", "data-entry", ["off", "on", "disabled"]),
+  row("Slider", "data-entry", ["marks", "disabled"]),
+  row("Rate", "data-entry", ["three", "read-only"]),
+  row("Segmented", "data-entry", ["first", "middle"]),
+  row("Tabs", "navigation", ["first", "disabled-tab"]),
+  row("Steps", "navigation", ["current", "error"]),
+  row("Card", "data-display", ["plain", "titled"]),
+  row("Tag", "data-display", ["tone-1", "closable"]),
+  row("Badge", "data-display", ["count", "dot", "overflow"]),
+  row("Divider", "data-display", ["plain", "text"]),
+  row("Progress", "feedback", ["line", "circle", "indeterminate"]),
+  row("Alert", "feedback", ["info", "success", "warning", "error"]),
+  row("Skeleton", "feedback", ["paragraph", "avatar"])
+]);
+
+// src/ui/value.ts
+var DEFAULT_RANGE = { min: 0, max: 100, step: 1 };
+function warn(component, property, message) {
+  if (process.env.NODE_ENV !== "production") diagnose("SP017", component, { property, message });
+}
+var tidy = (x) => Number.parseFloat(x.toPrecision(12));
+function uiRange(range, component = "UiValue") {
+  const { min, max, step } = range;
+  const stepOk = step === void 0 || Number.isFinite(step) && step > 0;
+  if (Number.isFinite(min) && Number.isFinite(max) && min < max && stepOk) return range;
+  warn(component, "min", `The range ${min}..${max} step ${step} is not valid; 0..100 step 1 is used.`);
+  return DEFAULT_RANGE;
+}
+function uiValue(value, range, component = "UiValue") {
+  const valid = uiRange(range, component);
+  const { min, max, step } = valid;
+  let next = Number.isFinite(value) ? Math.min(Math.max(value, min), max) : min;
+  if (step !== void 0) {
+    const steps = Math.min(Math.round((next - min) / step), Math.floor(tidy((max - min) / step)));
+    next = tidy(min + steps * step);
+  }
+  const corrected = valid !== range || next !== value;
+  if (next !== value) warn(component, "value", `${value} is drawn as ${next}.`);
+  return { value: next, fraction: round2((next - min) / (max - min)), corrected };
+}
+function uiRateCount(count, component = "SpRate") {
+  if (count === void 0) return 5;
+  const next = Number.isFinite(count) ? Math.min(Math.max(Math.round(count), 1), 10) : 5;
+  if (next !== count) warn(component, "count", `${count} is drawn as ${next}.`);
+  return next;
+}
+
+// src/ui/progress.ts
+var UI_PROGRESS_VIEWBOX = 100;
+function uiProgressArc(fraction, stroke) {
+  const centre = UI_PROGRESS_VIEWBOX / 2;
+  const radius = centre - stroke / 2;
+  const frame2 = { cx: centre, cy: centre, radius };
+  const f = Number.isFinite(fraction) ? Math.min(Math.max(fraction, 0), 1) : 0;
+  return {
+    track: { d: roundPathData(circlePath(centre, centre, radius)), role: "encoding", part: "rule" },
+    fill: { d: roundPathData(arcPath(frame2, radius, 0, f * 2 * Math.PI)), role: "encoding", part: "ink" }
+  };
+}
+
+// src/ui/items.ts
+function uiItems(items, component) {
+  const seen = /* @__PURE__ */ new Set();
+  const kept = [];
+  for (const item of items) {
+    if (item.key !== "" && !seen.has(item.key)) {
+      seen.add(item.key);
+      kept.push(item);
+    } else if (process.env.NODE_ENV !== "production") {
+      const why = item.key === "" ? "An item has an empty key" : `The key "${item.key}" repeats`;
+      diagnose("SP019", component, { property: "items", message: `${why}; that item is skipped.` });
+    }
+  }
+  return kept.length === items.length ? items : kept;
+}
+function uiSelectedKey(items, value, fallback) {
+  if (items.some((item) => item.key === value && item.disabled !== true)) return value;
+  return fallback === "first" ? items.find((item) => item.disabled !== true)?.key ?? null : null;
+}
+
+// src/ui/steps.ts
+function uiSteps(items, current, component = "SpSteps") {
+  const steps = uiItems(items, component);
+  if (steps.length === 0) return [];
+  const last = steps.length - 1;
+  const at = Number.isFinite(current) ? Math.min(Math.max(Math.round(current), 0), last) : 0;
+  if (at !== current && process.env.NODE_ENV !== "production") {
+    diagnose("SP017", component, { property: "current", message: `${current} is drawn as ${at}.` });
+  }
+  const statuses = steps.map((item, i) => item.status ?? (i < at ? "finish" : i === at ? "process" : "wait"));
+  return steps.map((item, i) => ({ key: item.key, status: statuses[i], connector: i < last ? statuses[i + 1] : null, current: i === at }));
+}
+
+// src/ui/keyboard.ts
+function direction(key, orientation, dir) {
+  if (orientation === "vertical") return key === "ArrowDown" ? 1 : key === "ArrowUp" ? -1 : 0;
+  const forward = key === "ArrowRight" ? 1 : key === "ArrowLeft" ? -1 : 0;
+  return dir === "rtl" ? -forward : forward;
+}
+function uiRovingKey(state, key, orientation, dir) {
+  const { index, count, disabled } = state;
+  const enabled = (i2) => disabled[i2] !== true;
+  if (key === "Home" || key === "End") {
+    const step2 = key === "Home" ? 1 : -1;
+    for (let n = 0, i2 = key === "Home" ? 0 : count - 1; n < count; n++, i2 += step2) if (enabled(i2)) return i2;
+    return index;
+  }
+  const step = direction(key, orientation, dir);
+  if (step === 0) return index;
+  let i = index < 0 || index >= count ? step > 0 ? -1 : count : index;
+  for (let n = 0; n < count; n++) {
+    i = ((i + step) % count + count) % count;
+    if (enabled(i)) return i;
+  }
+  return index;
+}
+var ROVING = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"]);
+var uiIsRovingKey = (key) => ROVING.has(key);
+
+// src/ui/roving.ts
+function uiRovingFocus(event, root2, selector, orientation, activate) {
+  const { key } = event;
+  if (!uiIsRovingKey(key)) return;
+  const items = Array.from(root2.querySelectorAll(selector));
+  const index = items.indexOf(root2.ownerDocument?.activeElement);
+  if (index < 0) return;
+  const axis = orientation !== "both" ? orientation : key === "ArrowUp" || key === "ArrowDown" ? "vertical" : "horizontal";
+  const dir = root2.closest("[dir]")?.getAttribute("dir") === "rtl" ? "rtl" : "ltr";
+  const next = uiRovingKey({ index, count: items.length, disabled: items.map((item) => item.disabled === true) }, key, axis, dir);
+  if (next === index) return;
+  event.preventDefault();
+  items[next].focus();
+  if (activate) items[next].click();
+}
+
+// src/ui/frame.ts
+var UI_FRAME_KINDS = /* @__PURE__ */ Object.freeze({
+  control: Object.freeze({ size: 24, slice: 8, radius: 2 }),
+  pill: Object.freeze({ size: 36, slice: 12, radius: 12 }),
+  box: Object.freeze({ size: 16, slice: 8, radius: 2 }),
+  card: Object.freeze({ size: 48, slice: 16, radius: 2 }),
+  round: Object.freeze({ size: 24, slice: 12, radius: 12 })
+});
+var MAX_VARIANTS = 6;
+function uiFrameVariant(seed, id, variants) {
+  const n = Number.isFinite(variants) ? Math.min(Math.max(Math.floor(variants), 1), MAX_VARIANTS) : 1;
+  if (seed === void 0 && !id) return 0;
+  return resolveSeed(seed, id ?? "") % n;
+}
+var INSET = 0.5;
+function roundedSquare(size, radius) {
+  const lo = INSET;
+  const hi = size - INSET;
+  const r = Math.min(radius, (hi - lo) / 2);
+  const arc = (x, y) => `A${r},${r},0,0,1,${x},${y}`;
+  return `M${lo + r},${lo}H${hi - r}${arc(hi, lo + r)}V${hi - r}${arc(hi - r, hi)}H${lo + r}${arc(lo, hi - r)}V${lo + r}${arc(lo + r, lo)}Z`;
+}
+function uiFrameOutline(kind) {
+  const { size, radius } = UI_FRAME_KINDS[kind];
+  const box = { x: 0, y: 0, width: size, height: size };
+  return {
+    viewBox: box,
+    plot: box,
+    strokes: [{ d: roundPathData(roundedSquare(size, radius)), role: "ornament", part: "ink" }],
+    labels: [],
+    hitAreas: [],
+    defs: []
+  };
+}
+
+// src/ui/names.ts
+function uiRequireName(component, text2, label) {
+  if (process.env.NODE_ENV === "production") return;
+  if (text2?.trim() || label?.trim()) return;
+  diagnose("SP018", component, { property: "label" });
+}
+
+// src/ui/tokens.ts
+var UI_TOKEN_DEFAULTS = /* @__PURE__ */ Object.freeze({
+  frame: "css",
+  frameVariants: 1,
+  controlHeight: Object.freeze({ sm: 24, md: 32, lg: 40 }),
+  radius: 2,
+  focusWidth: 2,
+  tone: Object.freeze({ selected: 3, primary: 2, danger: 4, disabled: 1, alertError: 1 })
+});
+var MIN_HEIGHT = 24;
+var MIN_FOCUS = 2;
+var within = (value, lo, hi, fallback) => Number.isFinite(value) ? Math.min(Math.max(value, lo), hi) : fallback;
+function resolveUiTokens(ground) {
+  const ui = ground.ui ?? UI_TOKEN_DEFAULTS;
+  const inked = ui.frame === "inked" && ground.tonalMechanism === "hatch";
+  const { sm, md, lg } = ui.controlHeight;
+  return {
+    frame: inked ? "inked" : "css",
+    frameVariants: inked ? Math.round(within(ui.frameVariants, 1, 6, 1)) : 1,
+    controlHeight: {
+      sm: within(sm, MIN_HEIGHT, Infinity, 24),
+      md: within(md, MIN_HEIGHT, Infinity, 32),
+      lg: within(lg, MIN_HEIGHT, Infinity, 40)
+    },
+    radius: within(ui.radius, 0, Infinity, 2),
+    focusWidth: within(ui.focusWidth, MIN_FOCUS, Infinity, 2),
+    tone: ui.tone
+  };
+}
+
+// src/ui/tone.ts
+var RAD = Math.PI / 180;
+var EPSILON = 1e-6;
+var TILE_SPAN = 24;
+function family(gap, angle) {
+  const sin = Math.sin(angle * RAD);
+  const cos = Math.cos(angle * RAD);
+  const lines = Math.max(2, Math.round(TILE_SPAN / gap));
+  const width = Math.abs(sin) < EPSILON ? lines * gap : lines * gap / Math.abs(sin);
+  const height = Math.abs(cos) < EPSILON ? lines * gap : lines * gap / Math.abs(cos);
+  const offset = (x, y) => -sin * x + cos * y;
+  const corners = [offset(0, 0), offset(width, 0), offset(0, height), offset(width, height)];
+  const first = Math.ceil(Math.min(...corners) / gap - 0.5);
+  const last = Math.floor(Math.max(...corners) / gap - 0.5);
+  const strokes = [];
+  for (let k = first; k <= last; k++) {
+    const c = (k + 0.5) * gap;
+    const at = (t) => ({ x: -sin * c + cos * t, y: cos * c + sin * t, t });
+    const hits = [
+      Math.abs(cos) > EPSILON ? [(0 + sin * c) / cos, (width + sin * c) / cos] : [],
+      Math.abs(sin) > EPSILON ? [(0 - cos * c) / sin, (height - cos * c) / sin] : []
+    ].flat().map(at).filter((p) => p.x >= -EPSILON && p.x <= width + EPSILON && p.y >= -EPSILON && p.y <= height + EPSILON).sort((a, b) => a.t - b.t);
+    const from = hits[0];
+    const to = hits.at(-1);
+    if (!from || !to || to.t - from.t < EPSILON * 1e3) continue;
+    const clamp = (v, hi) => round2(Math.min(Math.max(v, 0), hi));
+    const w = round2(width);
+    const h = round2(height);
+    strokes.push({
+      d: `M${clamp(from.x, w)},${clamp(from.y, h)}L${clamp(to.x, w)},${clamp(to.y, h)}`,
+      role: "ornament",
+      part: "ink"
+    });
+  }
+  return { width: round2(width), height: round2(height), strokes };
+}
+function uiToneTile(spec) {
+  if (spec.style === "weight") return [];
+  const layers = [family(spec.gap, spec.angle)];
+  if (spec.style === "cross-hatch") layers.push(family(spec.gap, spec.angle + 90));
+  return layers;
+}
+
+// src/ui/view-kit.ts
+function clean(attrs) {
+  const out = {};
+  for (const [name, value] of Object.entries(attrs)) if (value !== void 0 && value !== false) out[name] = value;
+  return out;
+}
+var el = (tag, attrs, children = [], bind) => ({
+  tag,
+  attrs: clean(attrs),
+  children,
+  ...bind ? { bind } : {}
+});
+var text = (value) => ({ text: value });
+var slot = (name) => ({ slot: name });
+function root(slug, props, r, attrs = {}) {
+  return {
+    class: ["sp-ui", `sp-${slug}`, `sp-ground-${r.ground}`, props.className].filter(Boolean).join(" "),
+    "data-ground": r.ground,
+    "data-substrate": r.substrate,
+    "data-mode": r.mode,
+    "data-size": r.size,
+    "data-frame": String(r.frame),
+    ...attrs
+  };
+}
+var frame = (kind) => el("span", { part: "sp-frame", "data-kind": kind, "aria-hidden": "true" });
+var tone = (value, kind) => el("span", { part: "sp-tone", "data-tone": value, "data-kind": kind, "aria-hidden": "true" });
+var UI_GLYPHS = Object.freeze({
+  tick: "M3.5,8.5L6.5,11.5L12.5,4.5",
+  dash: "M4,8H12",
+  cross: "M4.5,4.5L11.5,11.5M11.5,4.5L4.5,11.5",
+  warning: "M8,2.5L14.5,13.5H1.5Z M8,6.5V9.5 M8,11.5V11.5",
+  /** A radio's selection: filled by ui.css. */
+  dot: "M11,8A3,3 0 1,1 5,8A3,3 0 1,1 11,8Z",
+  /** A Rate mark (C-2). */
+  lozenge: "M8,1.5L14.5,8L8,14.5L1.5,8Z",
+  info: "M14.5,8A6.5,6.5 0 1,1 1.5,8A6.5,6.5 0 1,1 14.5,8Z M8,7.5V11.5 M8,4.75V4.75"
+});
+var glyph = (name) => el("svg", { part: "sp-mark", "data-glyph": name, viewBox: "0 0 16 16", "aria-hidden": "true" }, [el("path", { d: UI_GLYPHS[name] })]);
+var sr = (value) => el("span", { class: "sp-ui-sr" }, [text(value)]);
+var baseOf = (props) => props.id ?? props.name;
+function nativeInput(type, attrs) {
+  return el("input", { type, class: "sp-ui-native", ...attrs }, [], "native");
+}
+
+// src/ui/view.ts
+var FRAME_SLOTS = 6;
+function resolveUi(props, env) {
+  const { provider = {}, cell = {} } = env;
+  const ground = props.ground ?? cell.ground ?? provider.ground ?? DEFAULTS.ground;
+  return {
+    ground: typeof ground === "string" ? ground : ground.name,
+    substrate: props.substrate ?? cell.substrate ?? provider.substrate ?? DEFAULTS.substrate,
+    mode: env.forcedPrecision ? "precision" : props.mode ?? cell.mode ?? provider.mode ?? DEFAULTS.mode,
+    size: props.size ?? "md",
+    frame: uiFrameVariant(props.seed, props.id, FRAME_SLOTS)
+  };
+}
+function uiButtonView(props, r, content) {
+  uiRequireName("SpButton", content.text, props.label);
+  const variant = props.variant ?? "default";
+  const link = props.href !== void 0;
+  const toned = props.disabled ? "disabled" : variant === "default" ? void 0 : variant;
+  return el(
+    link ? "a" : "button",
+    root("button", props, r, {
+      id: props.id,
+      type: link ? void 0 : props.type ?? "button",
+      href: link && !props.disabled ? props.href : void 0,
+      disabled: !link && props.disabled === true,
+      "aria-disabled": link && props.disabled ? "true" : void 0,
+      "aria-label": props.label,
+      "data-variant": variant,
+      "data-block": props.block ? "true" : void 0
+    }),
+    [
+      frame("control"),
+      ...toned ? [tone(toned, "control")] : [],
+      ...variant === "danger" ? [glyph("cross")] : [],
+      el("span", { class: toned ? "sp-ui-label sp-ui-plate" : "sp-ui-label" }, [slot("content")])
+    ]
+  );
+}
+function uiInputView(props, r, state) {
+  const base = baseOf(props);
+  const message = props.message ? props.message : void 0;
+  const messageId = message && base ? `${base}--message` : void 0;
+  return el("span", root("input", props, r, { "data-invalid": props.invalid ? "true" : void 0 }), [
+    el("span", { class: "sp-ui-box" }, [
+      frame("control"),
+      ...state.prefix ? [el("span", { class: "sp-ui-affix", "data-slot": "prefix" }, [slot("prefix")])] : [],
+      el(
+        "input",
+        {
+          class: "sp-ui-control",
+          id: props.id,
+          type: props.type ?? "text",
+          name: props.name,
+          value: state.value,
+          placeholder: props.placeholder,
+          disabled: props.disabled === true,
+          readonly: props.readOnly === true,
+          "aria-label": props.label,
+          "aria-invalid": props.invalid ? "true" : void 0,
+          "aria-describedby": messageId
+        },
+        [],
+        "native"
+      ),
+      ...state.suffix ? [el("span", { class: "sp-ui-affix", "data-slot": "suffix" }, [slot("suffix")])] : [],
+      ...props.invalid ? [glyph("warning")] : []
+    ]),
+    ...message ? [el("span", { class: "sp-ui-message", id: messageId }, [text(message)])] : []
+  ]);
+}
+function nativeCheckbox(props, checked, role) {
+  return el(
+    "input",
+    { type: "checkbox", class: "sp-ui-native", role, id: props.id, name: props.name, checked, disabled: props.disabled === true },
+    [],
+    "native"
+  );
+}
+function uiCheckboxView(props, r, state) {
+  return el("label", root("checkbox", props, r, { "data-indeterminate": props.indeterminate ? "true" : void 0 }), [
+    nativeCheckbox(props, state.checked),
+    el("span", { class: "sp-ui-box", "aria-hidden": "true" }, [frame("box"), tone("selected", "box"), glyph("tick"), glyph("dash")]),
+    el("span", { class: "sp-ui-label" }, [text(props.label)])
+  ]);
+}
+function uiSwitchView(props, r, state) {
+  return el("label", root("switch", props, r), [
+    nativeCheckbox(props, state.checked, "switch"),
+    el("span", { class: "sp-ui-track", "aria-hidden": "true" }, [frame("pill"), tone("selected", "pill"), el("span", { part: "sp-knob" })]),
+    el("span", { class: "sp-ui-label" }, [text(props.label)])
+  ]);
+}
+function uiCardView(props, r, slots) {
+  const titled = props.title !== void 0;
+  const titleId = titled && props.id ? `${props.id}--title` : void 0;
+  const header = titled || slots.extra;
+  return el(
+    titled ? "article" : "section",
+    root("card", props, r, { id: props.id, "aria-labelledby": titleId, "aria-label": titled && !titleId ? props.title : void 0 }),
+    [
+      frame("card"),
+      ...header ? [
+        el("div", { class: "sp-ui-card-header" }, [
+          ...titled ? [el(`h${props.headingLevel ?? 3}`, { class: "sp-ui-card-title", id: titleId }, [text(props.title)])] : [],
+          ...slots.extra ? [el("div", { class: "sp-ui-card-extra" }, [slot("extra")])] : []
+        ]),
+        el("span", { part: "sp-rule", "aria-hidden": "true" })
+      ] : [],
+      el("div", { class: "sp-ui-card-body" }, [slot("content")]),
+      ...slots.footer ? [el("div", { class: "sp-ui-card-footer" }, [slot("footer")])] : []
+    ]
+  );
+}
+function uiDividerView(props, r) {
+  const vertical = props.orientation === "vertical";
+  const rule = () => el("span", { part: "sp-rule", "aria-hidden": "true" });
+  return el(
+    "div",
+    root("divider", props, r, {
+      id: props.id,
+      role: "separator",
+      "aria-orientation": vertical ? "vertical" : void 0,
+      "data-orientation": vertical ? "vertical" : "horizontal",
+      "data-align": props.text ? props.align ?? "center" : void 0
+    }),
+    props.text ? [rule(), el("span", { class: "sp-ui-divider-text" }, [text(props.text)]), rule()] : [rule()]
+  );
+}
+
+// src/ui/view-b2.ts
+var heighten = () => el("span", { part: "sp-heighten", "aria-hidden": "true" });
+var legend = (label, forSight) => el("legend", { class: forSight ? "sp-ui-legend" : "sp-ui-legend sp-ui-sr" }, [text(label)]);
+var groupName = (props) => props.name ?? (props.id ? `${props.id}--value` : void 0);
+function uiRadioGroupView(props, r, state) {
+  const items = uiItems(props.items, "SpRadioGroup");
+  const value = uiSelectedKey(items, state.value, "none");
+  return el("fieldset", root("radio-group", props, r, { id: props.id, "data-orientation": props.orientation ?? "vertical" }), [
+    legend(props.label, true),
+    ...items.map(
+      (item) => el("label", { class: "sp-ui-item", "data-key": item.key, "data-disabled": item.disabled ? "true" : void 0 }, [
+        nativeInput("radio", {
+          id: props.id ? `${props.id}--${item.key}` : void 0,
+          name: props.name,
+          value: item.key,
+          checked: item.key === value,
+          disabled: item.disabled === true
+        }),
+        el("span", { class: "sp-ui-box", "aria-hidden": "true" }, [frame("round"), tone("selected", "round"), glyph("dot")]),
+        el("span", { class: "sp-ui-label" }, [text(item.label)])
+      ])
+    )
+  ]);
+}
+function uiSegmentedView(props, r, state) {
+  const items = uiItems(props.items, "SpSegmented");
+  const value = uiSelectedKey(items, state.value, "first");
+  const name = groupName(props);
+  return el("fieldset", root("segmented", props, r, { id: props.id, "data-block": props.block ? "true" : void 0 }), [
+    legend(props.label, false),
+    el("span", { class: "sp-ui-segments" }, [
+      frame("control"),
+      ...items.map((item) => {
+        const selected = item.key === value;
+        return el("label", { class: "sp-ui-item", "data-key": item.key, "data-disabled": item.disabled ? "true" : void 0 }, [
+          nativeInput("radio", { name, value: item.key, checked: selected, disabled: item.disabled === true }),
+          el("span", { class: "sp-ui-segment" }, [
+            ...selected ? [tone("selected", "control"), heighten()] : [],
+            el("span", { class: selected ? "sp-ui-label sp-ui-plate" : "sp-ui-label" }, [text(item.label)])
+          ])
+        ]);
+      })
+    ])
+  ]);
+}
+function uiTabsView(props, r, state) {
+  const items = uiItems(props.items, "SpTabs");
+  const value = uiSelectedKey(items, state.value, "first");
+  const vertical = props.orientation === "vertical";
+  const id = props.id;
+  return el("div", root("tabs", props, r, { id, "data-orientation": vertical ? "vertical" : "horizontal" }), [
+    el("div", { class: "sp-ui-tablist", role: "tablist", "aria-label": props.label, "aria-orientation": vertical ? "vertical" : void 0 }, [
+      ...items.map((item) => {
+        const selected = item.key === value;
+        return el(
+          "button",
+          {
+            type: "button",
+            class: "sp-ui-tab",
+            role: "tab",
+            id: id ? `${id}--tab-${item.key}` : void 0,
+            "aria-selected": selected ? "true" : "false",
+            "aria-controls": id ? `${id}--panel-${item.key}` : void 0,
+            tabindex: selected ? "0" : "-1",
+            disabled: item.disabled === true,
+            "data-key": item.key
+          },
+          [...selected ? [heighten()] : [], el("span", { class: "sp-ui-label" }, [text(item.label)])],
+          "native"
+        );
+      }),
+      el("span", { part: "sp-rule", "aria-hidden": "true" })
+    ]),
+    el("div", { class: "sp-ui-tabpanels" }, [slot("content")])
+  ]);
+}
+function uiTabPanelView(props, tabs) {
+  const { id } = tabs;
+  return el(
+    "div",
+    {
+      class: "sp-ui-tabpanel",
+      role: "tabpanel",
+      id: id ? `${id}--panel-${props.value}` : void 0,
+      "aria-labelledby": id ? `${id}--tab-${props.value}` : void 0,
+      tabindex: "0",
+      hidden: props.value !== tabs.value
+    },
+    [slot("content")]
+  );
+}
+function uiSliderView(props, r, state) {
+  const valid = uiRange({ min: props.min ?? 0, max: props.max ?? 100, step: props.step ?? 1 }, "SpSlider");
+  const { value, fraction } = uiValue(state.value, valid, "SpSlider");
+  const span = valid.max - valid.min;
+  const marks = (props.marks ?? []).filter((m) => Number.isFinite(m) && m >= valid.min && m <= valid.max);
+  return el("label", root("slider", props, r, { style: `--sp-ui-fraction: ${fraction}`, "data-disabled": props.disabled ? "true" : void 0 }), [
+    el("span", { class: "sp-ui-label" }, [text(props.label)]),
+    el("span", { class: "sp-ui-rail" }, [
+      el("span", { part: "sp-track", "aria-hidden": "true" }),
+      el("span", { part: "sp-fill", "aria-hidden": "true" }, [tone("selected", "pill")]),
+      el("span", { part: "sp-thumb sp-heighten", "aria-hidden": "true" }),
+      el(
+        "input",
+        {
+          type: "range",
+          class: "sp-ui-range",
+          id: props.id,
+          name: props.name,
+          min: String(valid.min),
+          max: String(valid.max),
+          step: String(valid.step ?? 1),
+          value: String(value),
+          disabled: props.disabled === true
+        },
+        [],
+        "native"
+      )
+    ]),
+    ...marks.length ? [
+      el(
+        "span",
+        { class: "sp-ui-scale", "aria-hidden": "true" },
+        marks.map((m) => el("span", { class: "sp-ui-scale-mark", style: `--sp-ui-at: ${round2((m - valid.min) / span)}` }, [text(String(m))]))
+      )
+    ] : []
+  ]);
+}
+function uiRateView(props, r, state) {
+  const count = uiRateCount(props.count);
+  const { value } = uiValue(state.value, { min: 0, max: count, step: 1 }, "SpRate");
+  const name = groupName(props);
+  const readOnly = props.readOnly === true;
+  return el(
+    "fieldset",
+    root("rate", props, r, {
+      id: props.id,
+      role: readOnly ? "radiogroup" : void 0,
+      "aria-readonly": readOnly ? "true" : void 0,
+      "data-readonly": readOnly ? "true" : void 0
+    }),
+    [
+      legend(props.label, false),
+      ...Array.from({ length: count }, (_, i) => {
+        const n = i + 1;
+        const filled = n <= value;
+        return el("label", { class: "sp-ui-item", "data-filled": filled ? "true" : void 0 }, [
+          nativeInput("radio", { name, value: String(n), checked: n === value, disabled: props.disabled === true, "aria-label": String(n) }),
+          el("span", { class: "sp-ui-box", "aria-hidden": "true" }, [...filled ? [tone("selected", "round")] : [], glyph("lozenge")])
+        ]);
+      })
+    ]
+  );
+}
+
+// src/ui/view-b3.ts
+var closeButton = (label) => el("button", { type: "button", class: "sp-ui-close", "aria-label": label }, [glyph("cross")], "close");
+function uiStepsView(props, r) {
+  const steps = uiSteps(props.items, props.current);
+  const titles = new Map(props.items.map((item) => [item.key, item]));
+  return el(
+    "ol",
+    root("steps", props, r, { id: props.id, "aria-label": props.label, "data-orientation": props.orientation === "vertical" ? "vertical" : "horizontal" }),
+    steps.map((step, i) => {
+      const item = titles.get(step.key);
+      const mark = step.status === "finish" ? glyph("tick") : step.status === "error" ? glyph("cross") : text(String(i + 1));
+      return el("li", { class: "sp-ui-step", "data-status": step.status, "aria-current": step.current ? "step" : void 0 }, [
+        el("span", { class: "sp-ui-step-mark", part: step.current ? "sp-heighten" : void 0, "aria-hidden": "true" }, [mark]),
+        el("span", { class: "sp-ui-step-text" }, [
+          el("span", { class: "sp-ui-step-title" }, [text(item.title)]),
+          ...item.description ? [el("span", { class: "sp-ui-step-description" }, [text(item.description)])] : []
+        ]),
+        // Exact, dashed while it leads to a step still waiting (C-4, DD-026).
+        ...step.connector ? [el("span", { part: "sp-connector", "data-status": step.connector, "aria-hidden": "true" })] : []
+      ]);
+    })
+  );
+}
+function uiTagView(props, r, content) {
+  const level = String(props.tone ?? 1);
+  const label = props.closeLabel ?? (content.text ? `Remove ${content.text}` : "Remove");
+  return el("span", root("tag", props, r, { id: props.id, "data-tone": level }), [
+    frame("control"),
+    tone(level, "control"),
+    el("span", { class: "sp-ui-label sp-ui-plate" }, [slot("content")]),
+    ...props.closable ? [closeButton(label)] : []
+  ]);
+}
+function uiBadgeView(props, r, content) {
+  const max = props.max ?? 99;
+  const count = props.count !== void 0 && Number.isFinite(props.count) ? Math.max(Math.round(props.count), 0) : void 0;
+  const shown = count === void 0 ? void 0 : count > max ? `${max}+` : String(count);
+  const dot = props.dot === true;
+  uiRequireName("SpBadge", content.text ?? (dot ? void 0 : shown), props.label);
+  return el("span", root("badge", props, r, { id: props.id }), [
+    el("span", { class: "sp-ui-label" }, [slot("content")]),
+    ...dot ? [el("span", { class: "sp-ui-badge-dot", "aria-hidden": "true" })] : shown !== void 0 ? [el("span", { class: "sp-ui-badge-count" }, [frame("pill"), el("span", { class: "sp-ui-badge-text" }, [text(shown)])])] : [],
+    ...props.label ? [sr(props.label)] : []
+  ]);
+}
+var RING = 8;
+function uiProgressView(props, r) {
+  const determinate = props.value !== void 0;
+  const { value, fraction } = determinate ? uiValue(props.value, { min: 0, max: 100 }, "SpProgress") : { value: 0, fraction: 0 };
+  const circle = props.shape === "circle";
+  const drawing = circle ? (() => {
+    const arc = uiProgressArc(determinate ? fraction : 0.25, RING);
+    return el("svg", { class: "sp-ui-ring", viewBox: `0 0 ${UI_PROGRESS_VIEWBOX} ${UI_PROGRESS_VIEWBOX}`, "aria-hidden": "true" }, [
+      el("path", { class: "sp-ui-ring-track", d: arc.track.d }),
+      el("path", { class: "sp-ui-ring-fill", d: arc.fill.d })
+    ]);
+  })() : el("span", { class: "sp-ui-rail" }, [
+    el("span", { part: "sp-track", "aria-hidden": "true" }),
+    el("span", { part: "sp-fill", "aria-hidden": "true" }, [tone(determinate ? "selected" : "1", "pill")])
+  ]);
+  return el(
+    "div",
+    root("progress", props, r, {
+      id: props.id,
+      role: "progressbar",
+      "aria-label": props.label,
+      "aria-valuemin": "0",
+      "aria-valuemax": "100",
+      "aria-valuenow": determinate ? String(value) : void 0,
+      "data-shape": circle ? "circle" : "line",
+      "data-indeterminate": determinate ? void 0 : "true",
+      style: determinate ? `--sp-ui-fraction: ${fraction}` : void 0
+    }),
+    [drawing, ...determinate && props.showValue !== false ? [el("span", { class: "sp-ui-value", "aria-hidden": "true" }, [text(`${value}%`)])] : []]
+  );
+}
+var ALERT_GLYPHS = { info: "info", success: "tick", warning: "warning", error: "cross" };
+function uiAlertView(props, r, state) {
+  const kind = props.kind ?? "info";
+  const error = kind === "error";
+  return el("div", root("alert", props, r, { id: props.id, role: error || kind === "warning" ? "alert" : "status", "data-kind": kind }), [
+    frame("card"),
+    ...error ? [tone("alertError", "card")] : [],
+    glyph(ALERT_GLYPHS[kind]),
+    el("div", { class: error ? "sp-ui-alert-body sp-ui-plate" : "sp-ui-alert-body" }, [
+      ...props.title ? [el("div", { class: "sp-ui-alert-title" }, [text(props.title)])] : [],
+      el("div", { class: "sp-ui-alert-text" }, [slot("content")])
+    ]),
+    ...state.closable ? [closeButton(props.closeLabel ?? "Close")] : []
+  ]);
+}
+function uiSkeletonView(props, r) {
+  const lines = props.lines !== void 0 && Number.isFinite(props.lines) ? Math.min(Math.max(Math.round(props.lines), 1), 8) : 3;
+  return el("div", root("skeleton", props, r, { id: props.id, "aria-busy": "true" }), [
+    sr(props.label ?? "Loading"),
+    ...props.avatar ? [el("span", { class: "sp-ui-skeleton-avatar", "aria-hidden": "true" }, [tone("1", "round")])] : [],
+    el(
+      "span",
+      { class: "sp-ui-skeleton-lines", "aria-hidden": "true" },
+      Array.from({ length: lines }, () => el("span", { class: "sp-ui-skeleton-line" }, [tone("1", "control")]))
+    )
+  ]);
+}
+
+export { UI_COMPONENTS, UI_FRAME_KINDS, UI_GLYPHS, UI_PROGRESS_VIEWBOX, UI_TOKEN_DEFAULTS, resolveUi, resolveUiTokens, uiAlertView, uiBadgeView, uiButtonView, uiCardView, uiCheckboxView, uiDividerView, uiFrameOutline, uiFrameVariant, uiInputView, uiIsRovingKey, uiItems, uiProgressArc, uiProgressView, uiRadioGroupView, uiRange, uiRateCount, uiRateView, uiRequireName, uiRovingFocus, uiRovingKey, uiSegmentedView, uiSelectedKey, uiSkeletonView, uiSliderView, uiSteps, uiStepsView, uiSwitchView, uiTabPanelView, uiTabsView, uiTagView, uiToneTile, uiValue };
+//# sourceMappingURL=ui.js.map
+//# sourceMappingURL=ui.js.map