@xeplr/ui-factory 1.0.1

package/src/designs/PropertyPanel.jsx

@@ -0,0 +1,228 @@
+import { getAtPath } from '../propertyPath.js'
+import { slugify } from '../document.js'
+
+// The selected control's properties, GENERATED from its entry in controls.js:
+// each field there names a path and an editor type, and this file owns only
+// what each editor type looks like. A new property is a line in controls.js.
+
+export default function PropertyPanel({ node, control, errors, tables, onChange, onRemove, selectionCount }) {
+  if (selectionCount > 1) {
+    return (
+      <aside className="xeplr-factory-panel">
+        <p className="xeplr-factory-panel-empty">{selectionCount} controls selected</p>
+        <button type="button" className="xeplr-factory-danger" onClick={onRemove}>Delete them</button>
+      </aside>
+    )
+  }
+  if (!node || !control) {
+    return (
+      <aside className="xeplr-factory-panel">
+        <p className="xeplr-factory-panel-empty">
+          Select a control to set its label, validation and options — or drag one in from the left.
+        </p>
+      </aside>
+    )
+  }
+
+  const nodeErrors = errors || []
+  const errorsFor = (path) => nodeErrors.filter((e) => e.field === path || e.field.startsWith(path + '.') || e.field.startsWith(path + '['))
+  const shown = new Set()
+
+  return (
+    <aside className="xeplr-factory-panel" aria-label={`${control.label} properties`}>
+      <header className="xeplr-factory-panel-head">
+        <span className="xeplr-factory-panel-type">{control.label}</span>
+        <button type="button" className="xeplr-factory-link-danger" onClick={onRemove} title="Delete (Del)">Delete</button>
+      </header>
+
+      {control.properties.map((group) => (
+        <fieldset key={group.key} className="xeplr-factory-group">
+          <legend>{group.title}</legend>
+          {group.fields.map((field) => {
+            const errs = errorsFor(field.path)
+            errs.forEach((e) => shown.add(e))
+            const Editor = EDITORS[field.type] || TextEditor
+            const id = `xf-prop-${node.id}-${field.path.replace(/\W+/g, '-')}`
+            return (
+              <div key={field.path} className={`xeplr-factory-prop${errs.length ? ' has-error' : ''}`}>
+                {field.type !== 'toggle' && <label className="xeplr-factory-prop-label" htmlFor={id}>{field.label}</label>}
+                <Editor
+                  id={id}
+                  field={field}
+                  value={getAtPath(node, field.path)}
+                  onChange={(v) => onChange(field.path, v)}
+                  tables={tables}
+                  node={node}
+                  errors={errs}
+                />
+                {field.help && <div className="xeplr-factory-prop-help">{field.help}</div>}
+                {errs.filter((e) => e.field === field.path).map((e, i) => (
+                  <div key={i} className="xeplr-factory-prop-error">{e.message}</div>
+                ))}
+              </div>
+            )
+          })}
+        </fieldset>
+      ))}
+
+      {/* Anything the checker found that no editor above owns — geometry, a
+          property the panel does not offer. Shown rather than dropped: a save
+          that fails for a reason nowhere on screen is the worst kind. */}
+      {nodeErrors.filter((e) => !shown.has(e)).length > 0 && (
+        <div className="xeplr-factory-panel-errors" role="alert">
+          {nodeErrors.filter((e) => !shown.has(e)).map((e, i) => (
+            <div key={i}><code>{e.field || e.path}</code> {e.message}</div>
+          ))}
+        </div>
+      )}
+    </aside>
+  )
+}
+
+function TextEditor({ id, value, onChange }) {
+  return <input id={id} className="xeplr-factory-prop-input" type="text" value={value ?? ''} onChange={(e) => onChange(e.target.value)} />
+}
+
+function TextareaEditor({ id, value, onChange }) {
+  return <textarea id={id} className="xeplr-factory-prop-input" rows={3} value={value ?? ''} onChange={(e) => onChange(e.target.value)} />
+}
+
+function NumberEditor({ id, value, onChange }) {
+  return (
+    <input
+      id={id}
+      className="xeplr-factory-prop-input"
+      type="number"
+      value={value ?? ''}
+      onChange={(e) => {
+        const raw = e.target.value
+        onChange(raw === '' ? undefined : Number(raw))
+      }}
+    />
+  )
+}
+
+function DateEditor({ id, value, onChange }) {
+  return <input id={id} className="xeplr-factory-prop-input" type="date" value={value ?? ''} onChange={(e) => onChange(e.target.value)} />
+}
+
+function ToggleEditor({ id, field, value, onChange }) {
+  return (
+    <label className="xeplr-factory-toggle" htmlFor={id}>
+      <input id={id} type="checkbox" checked={Boolean(value)} onChange={(e) => onChange(e.target.checked ? true : undefined)} />
+      <span>{field.label}</span>
+    </label>
+  )
+}
+
+function SelectEditor({ id, field, value, onChange }) {
+  return (
+    <select id={id} className="xeplr-factory-prop-input" value={value ?? ''} onChange={(e) => onChange(e.target.value)}>
+      {field.options.map((o) => <option key={o.value} value={o.value}>{o.label}</option>)}
+    </select>
+  )
+}
+
+/**
+ * A dropdown's options: typed in here, or read from a table. Either way each
+ * option is { id, name } — the id is saved, the name is shown.
+ */
+function DataSourceEditor({ id, value, onChange, tables, errors }) {
+  const data = value || { source: 'static', options: [] }
+  const setSource = (source) => {
+    if (source === data.source) return
+    onChange(source === 'table' ? { source: 'table', table: '' } : { source: 'static', options: [] })
+  }
+  const errorAt = (suffix) => errors.filter((e) => e.field.endsWith(suffix)).map((e) => e.message)[0]
+
+  return (
+    <div className="xeplr-factory-datasource" id={id}>
+      <div className="xeplr-factory-segment" role="radiogroup" aria-label="Options come from">
+        <button type="button" role="radio" aria-checked={data.source === 'static'} className={data.source === 'static' ? 'is-on' : ''} onClick={() => setSource('static')}>Fixed list</button>
+        <button type="button" role="radio" aria-checked={data.source === 'table'} className={data.source === 'table' ? 'is-on' : ''} onClick={() => setSource('table')}>From a table</button>
+      </div>
+
+      {data.source === 'table' ? (
+        <div className="xeplr-factory-table-pick">
+          {tables && tables.items.length > 0 ? (
+            <select
+              className="xeplr-factory-prop-input"
+              value={data.table || ''}
+              onChange={(e) => onChange({ source: 'table', table: e.target.value })}
+              aria-label="Table"
+            >
+              <option value="">{tables.loading ? 'Loading tables…' : 'Choose a table…'}</option>
+              {tables.items.map((t) => <option key={String(t.id)} value={String(t.id)}>{t.name}</option>)}
+            </select>
+          ) : (
+            <input
+              className="xeplr-factory-prop-input"
+              type="text"
+              placeholder={tables?.loading ? 'Loading tables…' : 'Table name'}
+              value={data.table || ''}
+              onChange={(e) => onChange({ source: 'table', table: e.target.value })}
+              aria-label="Table"
+            />
+          )}
+          {tables?.error && <div className="xeplr-factory-prop-error">{tables.error}</div>}
+          {errorAt('.table') && <div className="xeplr-factory-prop-error">{errorAt('.table')}</div>}
+          <div className="xeplr-factory-prop-help">Rows are read as <code>id</code> (saved) and <code>name</code> (shown).</div>
+        </div>
+      ) : (
+        <StaticOptions data={data} onChange={onChange} errors={errors} />
+      )}
+    </div>
+  )
+}
+
+function StaticOptions({ data, onChange, errors }) {
+  const options = data.options || []
+  const set = (next) => onChange({ source: 'static', options: next })
+  const update = (i, patch) => set(options.map((o, j) => (j === i ? { ...o, ...patch } : o)))
+  const rowError = (i) => errors.filter((e) => e.field.includes(`options[${i}]`)).map((e) => e.message)[0]
+
+  return (
+    <div className="xeplr-factory-options">
+      {options.length > 0 && (
+        <div className="xeplr-factory-options-head"><span>Shown as</span><span>Saved as</span><span /></div>
+      )}
+      {options.map((o, i) => (
+        <div key={i} className="xeplr-factory-option-row">
+          <input
+            className="xeplr-factory-prop-input"
+            type="text"
+            placeholder="Full time"
+            value={o.name ?? ''}
+            aria-label={`Option ${i + 1} name`}
+            onChange={(e) => update(i, { name: e.target.value })}
+            // An id nobody typed follows the name, so a list can be made by
+            // typing names alone. Once an id is set it is left alone — it is
+            // what saved records point at.
+            onBlur={(e) => { if (o.id === '' || o.id === undefined) update(i, { id: slugify(e.target.value, '_') }) }}
+          />
+          <input
+            className="xeplr-factory-prop-input xeplr-factory-mono"
+            type="text"
+            placeholder="full_time"
+            value={o.id ?? ''}
+            aria-label={`Option ${i + 1} id`}
+            onChange={(e) => update(i, { id: e.target.value })}
+          />
+          <button type="button" className="xeplr-factory-icon-button" aria-label={`Remove option ${i + 1}`} onClick={() => set(options.filter((_, j) => j !== i))}>×</button>
+          {rowError(i) && <div className="xeplr-factory-prop-error xeplr-factory-option-error">{rowError(i)}</div>}
+        </div>
+      ))}
+      <button type="button" className="xeplr-factory-add" onClick={() => set([...options, { id: '', name: '' }])}>+ Add option</button>
+    </div>
+  )
+}
+
+export const EDITORS = {
+  text: TextEditor,
+  textarea: TextareaEditor,
+  number: NumberEditor,
+  date: DateEditor,
+  toggle: ToggleEditor,
+  select: SelectEditor,
+  dataSource: DataSourceEditor
+}

package/src/designs/ScreenSample.jsx

@@ -0,0 +1,65 @@
+import ControlView from './ControlView.jsx'
+import { contentBottom, MARGIN } from '../document.js'
+
+// A saved screen, drawn. Presentation only — everything comes from
+// useFactoryScreen.
+//
+// NO MEASURING. Positions are CSS: x and w as percentages of the width, y and h
+// in container-query units (cqw = 1% of the screen's width) times the aspect.
+// So the screen keeps exactly its proportions at any width, renders on the
+// server, and never flashes at the wrong size while a ResizeObserver catches up.
+
+export default function ScreenSample({ ctrl, className, style }) {
+  const { document: doc } = ctrl
+
+  if (ctrl.documentErrors.length) {
+    return (
+      <div className="xeplr-factory-invalid" role="alert">
+        <strong>This screen cannot be shown — its definition has problems:</strong>
+        <ul>
+          {ctrl.documentErrors.map((e, i) => <li key={i}><code>{e.path || '(screen)'}</code> {e.message}</li>)}
+        </ul>
+      </div>
+    )
+  }
+
+  const aspect = doc.aspect
+  const pageHeight = (contentBottom(doc) + MARGIN) * aspect * 100
+
+  return (
+    <div className={'xeplr-factory-screen' + (className ? ' ' + className : '')} style={style}>
+      <form
+        className="xeplr-factory-page"
+        style={{ height: `${pageHeight}cqw` }}
+        onSubmit={ctrl.submit}
+        noValidate
+        aria-label={doc.name}
+      >
+        {[...doc.nodes].sort((a, b) => (a.z || 0) - (b.z || 0)).map((node) => (
+          <div
+            key={node.id}
+            className={`xeplr-factory-node xeplr-factory-node--${node.type}`}
+            style={{
+              left: `${node.x * 100}%`,
+              top: `${node.y * aspect * 100}cqw`,
+              width: `${node.w * 100}%`,
+              height: `${node.h * aspect * 100}cqw`
+            }}
+          >
+            <ControlView
+              node={node}
+              mode="live"
+              value={node.props?.name ? ctrl.values[node.props.name] : undefined}
+              error={node.props?.name ? ctrl.errors[node.props.name] : undefined}
+              options={node.type === 'dropdown' ? ctrl.optionsFor(node) : undefined}
+              onChange={(raw) => ctrl.setValue(node, raw)}
+              onAction={(action) => { if (action === 'reset') ctrl.reset() }}
+              disabled={ctrl.submitting}
+            />
+          </div>
+        ))}
+      </form>
+      {ctrl.submitError && <div className="xeplr-factory-submit-error" role="alert">{ctrl.submitError}</div>}
+    </div>
+  )
+}

package/src/designs/factory.css

@@ -0,0 +1,177 @@
+/* @xeplr/ui-factory — builder and screen.
+   Colours come from the xeplr theme variables, each with a light fallback, so
+   a host that defines none still gets a finished look.
+
+   ONE SIZE UNIT, --xf-u: one design pixel on an 800px-wide screen. It is in
+   container-query units, so text and controls scale with the screen exactly as
+   their positions do — the whole screen keeps its proportions at any width. */
+
+.xeplr-factory-screen,
+.xeplr-factory-canvas {
+  container-type: inline-size;
+  --xf-u: calc(100cqw / 800);
+  --xf-accent: var(--xeplr-accent, #2563eb);
+  --xf-ink: var(--xeplr-text, #1a1a19);
+  --xf-muted: var(--xeplr-muted, #6b6a63);
+  --xf-border: var(--xeplr-border, #d9d8d0);
+  --xf-surface: var(--xeplr-surface, #ffffff);
+  --xf-danger: var(--xeplr-danger, #c2372e);
+}
+
+/* ── the screen ─────────────────────────────────────────────────────────── */
+.xeplr-factory-screen { position: relative; width: 100%; color: var(--xf-ink); }
+.xeplr-factory-page { position: relative; width: 100%; margin: 0; }
+.xeplr-factory-node { position: absolute; box-sizing: border-box; }
+
+.xeplr-factory-invalid {
+  border: 1px solid var(--xeplr-danger, #c2372e); border-radius: 8px; padding: 12px 16px;
+  color: var(--xeplr-danger, #c2372e); background: color-mix(in srgb, var(--xeplr-danger, #c2372e) 6%, transparent);
+  font-size: 13px;
+}
+.xeplr-factory-invalid ul { margin: 8px 0 0; padding-left: 18px; }
+.xeplr-factory-submit-error { margin-top: 8px; color: var(--xf-danger); font-size: 13px; }
+
+/* ── controls (shared by the screen and the canvas) ─────────────────────── */
+.xeplr-factory-field {
+  position: relative;
+  display: flex; flex-direction: column; gap: calc(4 * var(--xf-u));
+  width: 100%; height: 100%; box-sizing: border-box;
+  font-size: max(11px, calc(14 * var(--xf-u)));
+}
+.xeplr-factory-field--inline { justify-content: center; }
+.xeplr-factory-label { font-weight: 600; font-size: max(11px, calc(13 * var(--xf-u))); color: var(--xf-ink); line-height: 1.2; }
+.xeplr-factory-required { color: var(--xf-danger); }
+.xeplr-factory-input {
+  flex: 1; min-height: 0; width: 100%; box-sizing: border-box;
+  font: inherit; color: var(--xf-ink); background: var(--xeplr-input-bg, var(--xf-surface));
+  border: 1px solid var(--xeplr-input-border, var(--xf-border)); border-radius: calc(6 * var(--xf-u));
+  padding: 0 calc(10 * var(--xf-u));
+}
+.xeplr-factory-textarea { padding-block: calc(8 * var(--xf-u)); resize: none; }
+.xeplr-factory-input:focus { outline: 2px solid color-mix(in srgb, var(--xf-accent) 40%, transparent); border-color: var(--xf-accent); }
+.xeplr-factory-field.has-error .xeplr-factory-input { border-color: var(--xf-danger); }
+.xeplr-factory-error {
+  /* In the gap BELOW the field, out of flow: a message appearing must not
+     shrink the input it is about, or the whole form jumps as you type. */
+  position: absolute; top: calc(100% + 2 * var(--xf-u)); left: 0; right: 0;
+  color: var(--xf-danger); font-size: max(10px, calc(12 * var(--xf-u))); line-height: 1.2;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.xeplr-factory-hint { color: var(--xf-muted); font-size: max(10px, calc(11 * var(--xf-u))); }
+.xeplr-factory-check { display: flex; align-items: center; gap: calc(8 * var(--xf-u)); cursor: pointer; font-weight: 500; }
+.xeplr-factory-check input { width: calc(18 * var(--xf-u)); height: calc(18 * var(--xf-u)); min-width: 12px; min-height: 12px; margin: 0; accent-color: var(--xf-accent); }
+
+.xeplr-factory-text { margin: 0; color: var(--xf-ink); height: 100%; overflow: hidden; line-height: 1.25; }
+.xeplr-factory-text--heading { font-size: max(16px, calc(26 * var(--xf-u))); font-weight: 700; }
+.xeplr-factory-text--subheading { font-size: max(13px, calc(18 * var(--xf-u))); font-weight: 600; }
+.xeplr-factory-text--text { font-size: max(11px, calc(14 * var(--xf-u))); color: var(--xf-muted); }
+
+.xeplr-factory-button {
+  width: 100%; height: 100%; box-sizing: border-box; cursor: pointer;
+  padding: 0 calc(8 * var(--xf-u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  font: inherit; font-weight: 600; font-size: max(12px, calc(14 * var(--xf-u)));
+  border-radius: calc(6 * var(--xf-u)); border: 1px solid var(--xf-accent);
+}
+.xeplr-factory-button--submit { background: var(--xf-accent); color: #fff; }
+.xeplr-factory-button--reset { background: var(--xf-surface); color: var(--xf-accent); }
+.xeplr-factory-button:disabled { opacity: .6; cursor: default; }
+
+/* ── the builder ────────────────────────────────────────────────────────── */
+.xeplr-factory-builder {
+  display: flex; flex-direction: column; height: 100%; min-height: 560px;
+  color: var(--xeplr-text, #1a1a19); font-size: 13px;
+  --xf-accent: var(--xeplr-accent, #2563eb);
+  --xf-border: var(--xeplr-border, #d9d8d0);
+  --xf-muted: var(--xeplr-muted, #6b6a63);
+  --xf-danger: var(--xeplr-danger, #c2372e);
+}
+.xeplr-factory-bar {
+  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
+  border-bottom: 1px solid var(--xf-border); background: var(--xeplr-surface, #fff);
+}
+.xeplr-factory-name {
+  flex: 1; min-width: 0; font: inherit; font-size: 16px; font-weight: 600;
+  border: 1px solid transparent; border-radius: 6px; padding: 5px 8px; background: transparent; color: inherit;
+}
+.xeplr-factory-name:hover, .xeplr-factory-name:focus { border-color: var(--xf-border); outline: none; }
+.xeplr-factory-bar-status { color: var(--xf-muted); font-size: 12px; white-space: nowrap; }
+.xeplr-factory-problems { font-size: 12px; color: var(--xf-muted); white-space: nowrap; cursor: help; }
+.xeplr-factory-problems.is-loud { color: var(--xf-danger); font-weight: 600; }
+.xeplr-factory-primary, .xeplr-factory-secondary, .xeplr-factory-danger {
+  font: inherit; font-weight: 600; padding: 6px 14px; border-radius: 6px; cursor: pointer; border: 1px solid var(--xf-accent);
+}
+.xeplr-factory-primary { background: var(--xf-accent); color: #fff; }
+.xeplr-factory-primary:disabled { opacity: .6; }
+.xeplr-factory-secondary { background: transparent; color: var(--xf-accent); }
+.xeplr-factory-danger { background: transparent; color: var(--xf-danger); border-color: var(--xf-danger); }
+.xeplr-factory-save-error { padding: 6px 12px; color: var(--xf-danger); background: color-mix(in srgb, var(--xf-danger) 7%, transparent); font-size: 12px; }
+
+.xeplr-factory-body { flex: 1; min-height: 0; display: flex; }
+.xeplr-factory-preview { flex: 1; min-height: 0; overflow: auto; padding: 16px; background: var(--xeplr-plane, #f7f7f5); }
+.xeplr-factory-preview > .xeplr-factory-screen { max-width: 960px; margin: 0 auto; background: var(--xeplr-surface, #fff); border: 1px solid var(--xf-border); border-radius: 8px; }
+
+/* palette */
+.xeplr-factory-palette { width: 168px; flex: 0 0 auto; overflow-y: auto; padding: 10px; border-right: 1px solid var(--xf-border); background: var(--xeplr-surface, #fff); }
+.xeplr-factory-palette-group + .xeplr-factory-palette-group { margin-top: 12px; }
+.xeplr-factory-palette-title { margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--xf-muted); }
+.xeplr-factory-palette-item {
+  display: flex; align-items: center; gap: 8px; width: 100%; margin-bottom: 4px; padding: 7px 8px;
+  font: inherit; text-align: left; color: inherit; background: var(--xeplr-surface, #fff);
+  border: 1px solid var(--xf-border); border-radius: 6px; cursor: grab;
+}
+.xeplr-factory-palette-item:hover { border-color: var(--xf-accent); }
+.xeplr-factory-palette-icon { width: 14px; height: 10px; border: 1.5px solid var(--xf-muted); border-radius: 2px; flex: 0 0 auto; }
+.xeplr-factory-palette-icon--checkbox { width: 10px; }
+.xeplr-factory-palette-icon--label { border: none; border-top: 2px solid var(--xf-muted); border-bottom: 2px solid var(--xf-muted); height: 6px; }
+.xeplr-factory-palette-icon--button { background: var(--xf-muted); }
+.xeplr-factory-palette-icon--textarea { height: 14px; }
+
+/* canvas */
+.xeplr-factory-stage { flex: 1; min-width: 0; min-height: 0; display: flex; background: var(--xeplr-plane, #f7f7f5); }
+.xeplr-factory-canvas {
+  flex: 1; height: 100%;
+  background:
+    radial-gradient(circle, var(--xeplr-border-secondary, #e4e3db) 1px, transparent 1px) 0 0 / 20px 20px,
+    var(--xeplr-surface, #ffffff);
+}
+.xeplr-factory-design-node { width: 100%; height: 100%; box-sizing: border-box; border-radius: 4px; outline: 1px dashed transparent; cursor: move; }
+.xeplr-factory-design-node:hover { outline-color: color-mix(in srgb, var(--xf-accent) 45%, transparent); }
+.xeplr-factory-design-node.is-selected { outline: 1.5px solid var(--xf-accent); }
+.xeplr-factory-design-node.has-error { outline: 1.5px solid var(--xf-danger); }
+/* Inert on the canvas: a press drags the control, it does not type into it. */
+.xeplr-factory-design-node * { pointer-events: none; }
+.xeplr-factory-empty {
+  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
+  color: var(--xf-muted); font-size: 14px; pointer-events: none;
+}
+
+/* property panel */
+.xeplr-factory-panel { width: 280px; flex: 0 0 auto; overflow-y: auto; padding: 10px 12px; border-left: 1px solid var(--xf-border); background: var(--xeplr-surface, #fff); }
+.xeplr-factory-panel-empty { color: var(--xf-muted); line-height: 1.5; }
+.xeplr-factory-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
+.xeplr-factory-panel-type { font-weight: 700; font-size: 14px; }
+.xeplr-factory-link-danger { background: none; border: none; color: var(--xf-danger); cursor: pointer; font: inherit; padding: 2px 4px; }
+.xeplr-factory-group { border: none; border-top: 1px solid var(--xf-border); margin: 0; padding: 10px 0 4px; }
+.xeplr-factory-group legend { padding: 0 4px 0 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--xf-muted); }
+.xeplr-factory-prop { margin-bottom: 10px; }
+.xeplr-factory-prop-label { display: block; margin-bottom: 3px; font-weight: 600; font-size: 12px; }
+.xeplr-factory-prop-input {
+  width: 100%; box-sizing: border-box; font: inherit; padding: 5px 7px; color: inherit;
+  border: 1px solid var(--xf-border); border-radius: 5px; background: var(--xeplr-input-bg, #fff);
+}
+.xeplr-factory-prop.has-error .xeplr-factory-prop-input { border-color: var(--xf-danger); }
+.xeplr-factory-prop-help { margin-top: 3px; color: var(--xf-muted); font-size: 11px; line-height: 1.4; }
+.xeplr-factory-prop-error { margin-top: 3px; color: var(--xf-danger); font-size: 11px; }
+.xeplr-factory-panel-errors { margin-top: 8px; padding: 8px; border-radius: 6px; color: var(--xf-danger); background: color-mix(in srgb, var(--xf-danger) 7%, transparent); font-size: 11px; }
+.xeplr-factory-toggle { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 12px; cursor: pointer; }
+.xeplr-factory-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
+
+.xeplr-factory-segment { display: flex; margin-bottom: 8px; border: 1px solid var(--xf-border); border-radius: 6px; overflow: hidden; }
+.xeplr-factory-segment button { flex: 1; font: inherit; font-size: 12px; padding: 5px; border: none; background: transparent; cursor: pointer; color: inherit; }
+.xeplr-factory-segment button.is-on { background: var(--xf-accent); color: #fff; }
+.xeplr-factory-options-head, .xeplr-factory-option-row { display: grid; grid-template-columns: 1fr 1fr 24px; gap: 4px; align-items: center; }
+.xeplr-factory-options-head { font-size: 11px; color: var(--xf-muted); margin-bottom: 3px; }
+.xeplr-factory-option-row { margin-bottom: 4px; }
+.xeplr-factory-option-error { grid-column: 1 / -1; margin-top: 0; }
+.xeplr-factory-icon-button { border: none; background: none; cursor: pointer; font-size: 16px; color: var(--xf-muted); padding: 0; }
+.xeplr-factory-add { font: inherit; font-size: 12px; background: none; border: 1px dashed var(--xf-border); border-radius: 5px; padding: 5px; width: 100%; cursor: pointer; color: var(--xf-accent); }

package/src/designs/index.js

@@ -0,0 +1,7 @@
+import './factory.css'
+
+export { default as BuilderSample } from './BuilderSample.jsx'
+export { default as ScreenSample } from './ScreenSample.jsx'
+export { default as ControlView, VIEWS } from './ControlView.jsx'
+export { default as Palette, DRAG_TYPE } from './Palette.jsx'
+export { default as PropertyPanel, EDITORS } from './PropertyPanel.jsx'