@volter/sdk 0.0.0-stage → 0.5.203

package/src/widgets/inspector-widgets/AlignmentGrid.tsx

@@ -0,0 +1,182 @@
+import { Button } from '../design-system';
+/**
+ * AlignmentGrid — a 3×3 flex `justify-content`×`align-items` picker (spec 27
+ * §5 C1). Ported from `visual-edit/inspector.tsx`'s `AlignmentGrid`
+ * (:304-351). `AnchorPresets` below REUSES the existing `ui-editor/
+ * inspector.tsx` `ANCHOR_PRESETS` table's VALUES (now exported there for
+ * this reuse) as a data-only copy — not a live import — because
+ * `ui-editor/inspector.tsx` pulls in `UIEditStore`/`react-store`/
+ * `node-ops`/the inspector-section-registry (a whole editing-mode runtime
+ * graph this pure, adapter-free widget kit must not drag in, Rule zero's
+ * "talk ONLY to the AuthoringAdapter contract" spirit extended to "don't
+ * import a store-coupled module just for one constant"). Keep this table in
+ * sync with `ui-editor/inspector.tsx`'s `ANCHOR_PRESETS` if either changes —
+ * C2's wiring step is the natural point to collapse them into one shared,
+ * dependency-free `anchor-presets.ts` module both sides import.
+ */
+
+import { type ChangeHandlers, THEME } from './shared';
+
+const ANCHOR_PRESETS: Record<
+  string,
+  { anchor: AnchorRect['anchor']; offset: AnchorRect['offset'] }
+> = {
+  full: {
+    anchor: { left: 0, top: 0, right: 1, bottom: 1 },
+    offset: { left: 0, top: 0, right: 0, bottom: 0 },
+  },
+  top: {
+    anchor: { left: 0, top: 0, right: 1, bottom: 0 },
+    offset: { left: 0, top: 0, right: 0, bottom: 0 },
+  },
+  bottom: {
+    anchor: { left: 0, top: 1, right: 1, bottom: 1 },
+    offset: { left: 0, top: 0, right: 0, bottom: 0 },
+  },
+  left: {
+    anchor: { left: 0, top: 0, right: 0, bottom: 1 },
+    offset: { left: 0, top: 0, right: 0, bottom: 0 },
+  },
+  right: {
+    anchor: { left: 1, top: 0, right: 1, bottom: 1 },
+    offset: { left: 0, top: 0, right: 0, bottom: 0 },
+  },
+  center: {
+    anchor: { left: 0.5, top: 0.5, right: 0.5, bottom: 0.5 },
+    offset: { left: -60, top: -20, right: 60, bottom: 20 },
+  },
+  'top-left': {
+    anchor: { left: 0, top: 0, right: 0, bottom: 0 },
+    offset: { left: 0, top: 0, right: 120, bottom: 40 },
+  },
+  'top-right': {
+    anchor: { left: 1, top: 0, right: 1, bottom: 0 },
+    offset: { left: -120, top: 0, right: 0, bottom: 40 },
+  },
+};
+
+const JUSTIFY = ['flex-start', 'center', 'flex-end'] as const;
+const ALIGN = ['flex-start', 'center', 'flex-end'] as const;
+
+export interface AlignmentValue {
+  justify: (typeof JUSTIFY)[number];
+  align: (typeof ALIGN)[number];
+}
+
+/** One 3×3 dot — split out of `AlignmentGrid`'s double `.map` purely to keep
+ *  each function under biome's cognitive-complexity ceiling; same markup. */
+function AlignmentCell({
+  row,
+  col,
+  justify,
+  align,
+  isActive,
+  disabled,
+  onSelect,
+}: {
+  row: number;
+  col: number;
+  justify: AlignmentValue['justify'];
+  align: AlignmentValue['align'];
+  isActive: boolean;
+  disabled?: boolean | undefined;
+  onSelect: (justify: AlignmentValue['justify'], align: AlignmentValue['align']) => void;
+}): React.ReactElement {
+  return (
+    <div
+      data-testid={`alignment-grid-${row}-${col}`}
+      onClick={() => {
+        if (!disabled) onSelect(justify, align);
+      }}
+      style={{
+        width: 16,
+        height: 16,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        borderRadius: THEME.radiusSmall,
+        background: isActive ? THEME.accent : 'transparent',
+      }}
+    >
+      <div
+        style={{
+          width: isActive ? 6 : 4,
+          height: isActive ? 6 : 4,
+          borderRadius: '50%',
+          background: isActive ? THEME.onAccent : THEME.textMuted,
+        }}
+      />
+    </div>
+  );
+}
+
+export function AlignmentGrid({
+  value,
+  onChange,
+  disabled,
+}: ChangeHandlers<AlignmentValue>): React.ReactElement {
+  const jIdx = JUSTIFY.indexOf(value.justify);
+  const aIdx = ALIGN.indexOf(value.align);
+
+  return (
+    <div
+      data-testid="alignment-grid"
+      style={{
+        display: 'inline-grid',
+        gridTemplateColumns: 'repeat(3, 16px)',
+        gridTemplateRows: 'repeat(3, 16px)',
+        gap: 1,
+        background: THEME.inputBg,
+        borderRadius: THEME.radiusMedium,
+        padding: 4,
+        opacity: disabled ? 0.35 : 1,
+      }}
+    >
+      {ALIGN.map((a, row) =>
+        JUSTIFY.map((j, col) => (
+          <AlignmentCell
+            key={`${row}-${col}`}
+            row={row}
+            col={col}
+            justify={j}
+            align={a}
+            isActive={row === aIdx && col === jIdx}
+            disabled={disabled}
+            onSelect={(justify, align) => onChange({ justify, align })}
+          />
+        )),
+      )}
+    </div>
+  );
+}
+
+export interface AnchorRect {
+  anchor: { left: number; top: number; right: number; bottom: number };
+  offset: { left: number; top: number; right: number; bottom: number };
+}
+
+export interface AnchorPresetsProps {
+  onSelect: (name: string, preset: AnchorRect) => void;
+  disabled?: boolean | undefined;
+}
+
+export function AnchorPresets({ onSelect, disabled }: AnchorPresetsProps): React.ReactElement {
+  return (
+    <div data-testid="anchor-presets" style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
+      {Object.entries(ANCHOR_PRESETS).map(([name, preset]) => (
+        <Button
+          key={name}
+          type="button"
+          variant="secondary"
+          size="compact"
+          data-testid={`anchor-preset-${name}`}
+          disabled={disabled}
+          onClick={() => onSelect(name, preset)}
+        >
+          {name}
+        </Button>
+      ))}
+    </div>
+  );
+}

package/src/widgets/inspector-widgets/AssetSlotPicker.tsx

@@ -0,0 +1,123 @@
+/**
+ * AssetSlotPicker — the widget for a `PropertyDescriptor.type: 'asset'` row:
+ * ONE slot on the inspected thing that either holds a project asset or is
+ * empty (a material's `map`, `normalMap`, …).
+ *
+ * Kit-pure like every other widget here (`index.ts`): it takes the candidate
+ * paths and a preview-URL function from its caller and imports no editor
+ * state, so the same control serves any lane that can name its own assets.
+ *
+ * Deliberately NOT a second asset browser. The choices are a flat list of
+ * project-relative paths in a `<Select>` — the Asset Browser panel remains the
+ * place to look through, tag, import and preview assets; this is the one-click
+ * assignment at the point of use, which is the gesture a material author is
+ * making. The thumbnail is the assigned file itself, so the row shows WHAT is
+ * assigned and not only its name.
+ */
+
+import { faXmark } from '@fortawesome/free-solid-svg-icons';
+import type React from 'react';
+import { EditorIcon, IconButton, Select, themeVars } from '../design-system';
+import { THEME } from './shared';
+
+const THUMB = 22;
+
+const thumbStyle: React.CSSProperties = {
+  width: THUMB,
+  height: THUMB,
+  flex: `0 0 ${THUMB}px`,
+  borderRadius: THEME.radiusSmall,
+  border: `1px solid ${THEME.border}`,
+  background: THEME.inputBg,
+  objectFit: 'cover',
+  // A checker under a transparent PNG, so an alpha map does not read as white.
+  backgroundImage:
+    'linear-gradient(45deg,rgba(128,128,128,.35) 25%,transparent 25%,transparent 75%,rgba(128,128,128,.35) 75%),' +
+    'linear-gradient(45deg,rgba(128,128,128,.35) 25%,transparent 25%,transparent 75%,rgba(128,128,128,.35) 75%)',
+  backgroundSize: '8px 8px',
+  backgroundPosition: '0 0, 4px 4px',
+};
+
+export interface AssetSlotPickerProps {
+  /** The assigned asset's project path, or `''` when the slot is empty. */
+  readonly value: string;
+  /** Assign a path, or `''` to CLEAR the slot. */
+  readonly onChange: (value: string) => void;
+  /** The paths this slot may be filled from, already filtered by the caller to
+   *  the kinds it can honor. */
+  readonly options: readonly string[];
+  /** Browser URL for a path's preview image. */
+  readonly previewUrlFor: (path: string) => string;
+  readonly disabled?: boolean | undefined;
+  /**
+   * What the last assignment ANSWERED — the write ack's own sentence when it
+   * did not persist. Rendered under the control because an edit whose file half
+   * silently did not happen is exactly the invisible failure the write pipe
+   * exists to make loud.
+   */
+  readonly note?: string | undefined;
+  readonly testId: string;
+}
+
+export function AssetSlotPicker({
+  value,
+  onChange,
+  options,
+  previewUrlFor,
+  disabled,
+  note,
+  testId,
+}: AssetSlotPickerProps): React.ReactElement {
+  // A value assigned outside this list (a texture the game's own code loaded,
+  // or a file since deleted) must still be SHOWN — dropping it from the select
+  // would silently redisplay the slot as empty while it is not.
+  const choices = value && !options.includes(value) ? [value, ...options] : options;
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 2, minWidth: 0, flex: 1 }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 4, minWidth: 0 }}>
+        {value ? (
+          <img
+            src={previewUrlFor(value)}
+            alt=""
+            style={thumbStyle}
+            data-testid={`${testId}-thumb`}
+          />
+        ) : (
+          <span style={thumbStyle} aria-hidden="true" />
+        )}
+        <Select
+          data-testid={testId}
+          disabled={disabled}
+          value={value}
+          title={value || 'No texture assigned'}
+          onChange={(e) => onChange(e.target.value)}
+          style={{ flex: 1, minWidth: 0 }}
+        >
+          <option value="">—</option>
+          {choices.map((path) => (
+            <option key={path} value={path}>
+              {path}
+            </option>
+          ))}
+        </Select>
+        <IconButton
+          data-testid={`${testId}-clear`}
+          aria-label="Clear this texture slot"
+          title="Clear this texture slot"
+          disabled={disabled || !value}
+          onClick={() => onChange('')}
+        >
+          <EditorIcon icon={faXmark} />
+        </IconButton>
+      </div>
+      {note && (
+        <span
+          data-testid={`${testId}-note`}
+          style={{ fontSize: 'var(--volter-font-sm)', color: themeVars.content.muted }}
+        >
+          {note}
+        </span>
+      )}
+    </div>
+  );
+}

package/src/widgets/inspector-widgets/BorderEditor.tsx

@@ -0,0 +1,309 @@
+import { Button, Select } from '../design-system';
+/**
+ * BorderEditor (per-side width/style/color) + BorderRadiusEditor (per-corner)
+ * (spec 27 §5 C1). Ported from `visual-edit/inspector.tsx`'s `BorderEditor`
+ * (:1853-1951) and `BorderRadiusEditor` (:1794-1847) — both keep the
+ * reference's uniform<->per-side/per-corner expand toggle (a single border/
+ * radius is the common case; independent sides are one click away).
+ */
+
+import { faBorderAll, faBorderTopLeft } from '@fortawesome/free-solid-svg-icons';
+import { useState } from 'react';
+import { EditorIcon } from '../design-system';
+import { ColorSwatch } from './ColorPicker';
+import { ScrubbableInput } from './ScrubbableInput';
+import { type ChangeHandlers, fireChange, fireEnd, THEME } from './shared';
+
+const BORDER_STYLES = ['none', 'solid', 'dashed', 'dotted', 'double'];
+
+export interface BorderSide {
+  width: number;
+  style: string;
+  color: string;
+}
+
+export interface BorderValue {
+  top: BorderSide;
+  right: BorderSide;
+  bottom: BorderSide;
+  left: BorderSide;
+}
+
+export function uniformBorder(side: BorderSide): BorderValue {
+  return { top: side, right: side, bottom: side, left: side };
+}
+
+/** `true` when all 4 sides share width/style/color (safe to render collapsed). */
+export function isUniformBorder(v: BorderValue): boolean {
+  const key = (s: BorderSide): string => `${s.width}|${s.style}|${s.color}`;
+  const k = key(v.top);
+  return key(v.right) === k && key(v.bottom) === k && key(v.left) === k;
+}
+
+export interface BorderEditorProps extends ChangeHandlers<BorderValue> {
+  recentColors?: string[] | undefined;
+  onAddRecentColor?: ((color: string) => void) | undefined;
+}
+
+export function BorderEditor({
+  value,
+  onChange,
+  onChangeEnd,
+  disabled,
+  recentColors,
+  onAddRecentColor,
+}: BorderEditorProps): React.ReactElement {
+  const [expanded, setExpanded] = useState(!isUniformBorder(value));
+
+  const applyAll = (partial: Partial<BorderSide>, commit: boolean): void => {
+    const side = { ...value.top, ...partial };
+    const next = uniformBorder(side);
+    if (commit) fireEnd({ onChange, onChangeEnd }, next);
+    else fireChange({ onChange }, next);
+  };
+
+  const applySide = (
+    key: keyof BorderValue,
+    partial: Partial<BorderSide>,
+    commit: boolean,
+  ): void => {
+    const next = { ...value, [key]: { ...value[key], ...partial } };
+    if (commit) fireEnd({ onChange, onChangeEnd }, next);
+    else fireChange({ onChange }, next);
+  };
+
+  if (!expanded) {
+    return (
+      <div
+        data-testid="border-editor-uniform"
+        style={{ display: 'flex', gap: 6, alignItems: 'center' }}
+      >
+        <ColorSwatch
+          testId="border-color"
+          value={value.top.color}
+          disabled={disabled}
+          onChange={(c) => applyAll({ color: c }, false)}
+          onChangeEnd={(c) => applyAll({ color: c }, true)}
+          recentColors={recentColors}
+          onAddRecentColor={onAddRecentColor}
+        />
+        <ScrubbableInput
+          testId="border-width"
+          label="W"
+          value={value.top.width}
+          min={0}
+          disabled={disabled}
+          onChange={(v) => applyAll({ width: v }, false)}
+          onChangeEnd={(v) => applyAll({ width: v }, true)}
+          style={{ width: 64 }}
+        />
+        <Select
+          className="volter-select"
+          data-testid="border-style"
+          value={value.top.style}
+          disabled={disabled}
+          data-dynamic={disabled || undefined}
+          onChange={(e) => applyAll({ style: e.target.value }, true)}
+          style={{ flex: 1 }}
+        >
+          {BORDER_STYLES.map((o) => (
+            <option key={o} value={o}>
+              {o}
+            </option>
+          ))}
+        </Select>
+        <Button
+          type="button"
+          data-testid="border-expand"
+          title="Per-side borders"
+          aria-label="Edit borders per side"
+          onClick={() => setExpanded(true)}
+          variant="ghost"
+          size="compact"
+        >
+          <EditorIcon icon={faBorderAll} />
+        </Button>
+      </div>
+    );
+  }
+
+  const sides: Array<{ key: keyof BorderValue; label: string }> = [
+    { key: 'top', label: 'T' },
+    { key: 'right', label: 'R' },
+    { key: 'bottom', label: 'B' },
+    { key: 'left', label: 'L' },
+  ];
+
+  return (
+    <div
+      data-testid="border-editor-expanded"
+      style={{ display: 'flex', flexDirection: 'column', gap: 4 }}
+    >
+      <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+        <span style={{ fontSize: 10, color: THEME.textMuted }}>Per-side</span>
+        <div style={{ flex: 1 }} />
+        <Button
+          type="button"
+          variant="primary"
+          size="compact"
+          data-testid="border-collapse"
+          title="Uniform border"
+          aria-label="Use one border for all sides"
+          onClick={() => setExpanded(false)}
+        >
+          <EditorIcon icon={faBorderAll} />
+        </Button>
+      </div>
+      {sides.map(({ key, label }) => (
+        <div key={key} style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
+          <span style={{ fontSize: 10, color: THEME.textMuted, width: 10, textAlign: 'center' }}>
+            {label}
+          </span>
+          <ColorSwatch
+            testId={`border-${key}-color`}
+            value={value[key].color}
+            disabled={disabled}
+            onChange={(c) => applySide(key, { color: c }, false)}
+            onChangeEnd={(c) => applySide(key, { color: c }, true)}
+            recentColors={recentColors}
+            onAddRecentColor={onAddRecentColor}
+          />
+          <ScrubbableInput
+            testId={`border-${key}-width`}
+            label=""
+            value={value[key].width}
+            min={0}
+            disabled={disabled}
+            onChange={(v) => applySide(key, { width: v }, false)}
+            onChangeEnd={(v) => applySide(key, { width: v }, true)}
+            style={{ width: 48 }}
+          />
+          <Select
+            className="volter-select"
+            data-testid={`border-${key}-style`}
+            value={value[key].style}
+            disabled={disabled}
+            data-density="compact"
+            data-dynamic={disabled || undefined}
+            onChange={(e) => applySide(key, { style: e.target.value }, true)}
+            style={{ flex: 1 }}
+          >
+            {BORDER_STYLES.map((o) => (
+              <option key={o} value={o}>
+                {o}
+              </option>
+            ))}
+          </Select>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export interface BorderRadiusValue {
+  topLeft: number;
+  topRight: number;
+  bottomLeft: number;
+  bottomRight: number;
+}
+
+export function uniformRadius(n: number): BorderRadiusValue {
+  return { topLeft: n, topRight: n, bottomLeft: n, bottomRight: n };
+}
+
+export function isUniformRadius(v: BorderRadiusValue): boolean {
+  return v.topLeft === v.topRight && v.topRight === v.bottomLeft && v.bottomLeft === v.bottomRight;
+}
+
+export function BorderRadiusEditor({
+  value,
+  onChange,
+  onChangeEnd,
+  disabled,
+}: ChangeHandlers<BorderRadiusValue>): React.ReactElement {
+  const [expanded, setExpanded] = useState(!isUniformRadius(value));
+
+  const applyAll = (n: number, commit: boolean): void => {
+    const next = uniformRadius(n);
+    if (commit) fireEnd({ onChange, onChangeEnd }, next);
+    else fireChange({ onChange }, next);
+  };
+
+  const applyCorner = (key: keyof BorderRadiusValue, n: number, commit: boolean): void => {
+    const next = { ...value, [key]: n };
+    if (commit) fireEnd({ onChange, onChangeEnd }, next);
+    else fireChange({ onChange }, next);
+  };
+
+  if (!expanded) {
+    return (
+      <div
+        data-testid="border-radius-editor-uniform"
+        style={{ display: 'flex', gap: 4, alignItems: 'center' }}
+      >
+        <ScrubbableInput
+          testId="border-radius"
+          label={<EditorIcon icon={faBorderTopLeft} label="Radius" />}
+          value={value.topLeft}
+          min={0}
+          disabled={disabled}
+          onChange={(v) => applyAll(v, false)}
+          onChangeEnd={(v) => applyAll(v, true)}
+          style={{ flex: 1 }}
+        />
+        <Button
+          type="button"
+          data-testid="border-radius-expand"
+          title="Independent corners"
+          aria-label="Edit radius per corner"
+          onClick={() => setExpanded(true)}
+          variant="ghost"
+          size="compact"
+        >
+          <EditorIcon icon={faBorderTopLeft} />
+        </Button>
+      </div>
+    );
+  }
+
+  const corners: Array<{ key: keyof BorderRadiusValue; label: string }> = [
+    { key: 'topLeft', label: 'TL' },
+    { key: 'topRight', label: 'TR' },
+    { key: 'bottomLeft', label: 'BL' },
+    { key: 'bottomRight', label: 'BR' },
+  ];
+
+  return (
+    <div data-testid="border-radius-editor-expanded">
+      <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginBottom: 4 }}>
+        <span style={{ fontSize: 10, color: THEME.textMuted }}>Corners</span>
+        <div style={{ flex: 1 }} />
+        <Button
+          type="button"
+          variant="primary"
+          size="compact"
+          data-testid="border-radius-collapse"
+          title="Uniform radius"
+          aria-label="Use one radius for all corners"
+          onClick={() => setExpanded(false)}
+        >
+          <EditorIcon icon={faBorderTopLeft} />
+        </Button>
+      </div>
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 3 }}>
+        {corners.map(({ key, label }) => (
+          <ScrubbableInput
+            key={key}
+            testId={`border-radius-${key}`}
+            label={label}
+            value={value[key]}
+            min={0}
+            disabled={disabled}
+            onChange={(v) => applyCorner(key, v, false)}
+            onChangeEnd={(v) => applyCorner(key, v, true)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}