@elytracms/studio 0.0.57 → 0.0.59

package/dist/components/cms/field-control-lib.d.ts

@@ -0,0 +1,43 @@
+import type { ObjectFieldDef, SelectFieldDef } from '@elytracms/core/cms-core';
+/**
+ * Pure companions of the document-editor field controls (EC-330, split from
+ * `field-control.tsx`): the repeater reorder/summary/shape decisions and the
+ * depth-encoding palette the object-array editors render from, plus the
+ * `options` segmented control. Small and dependency-light so the behavioural
+ * pins in `field-control.test.ts` reach them without pulling the whole
+ * field-control dispatcher.
+ */
+/**
+ * Move `from` → `to`, returning a NEW array (all elements preserved). The repeater
+ * applies the same `(from, to)` to its value array AND its parallel stable-key array,
+ * so the two stay aligned through a reorder — a row's child/DOM state (an open
+ * relation/asset picker, focus) never mis-associates (EC-253 C2, EC-294).
+ */
+export declare function reorder<T>(list: readonly T[], from: number, to: number): T[];
+/**
+ * A scannable one-line summary for a collapsed repeater item (EC-294): the first
+ * meaningful scalar subfield value — preferring title-ish field names — else `#n`.
+ * Pure (no store): summarises from the item's own scalar values, so it works for
+ * any object shape without resolving relations/assets.
+ */
+export declare function objectItemSummary(fields: readonly {
+    name: string;
+}[], item: Record<string, unknown>, index: number): string;
+export declare const depthRail: (d: number) => string;
+export declare const depthTint: (d: number) => string;
+export declare function isTabularObjectType(field: ObjectFieldDef): boolean;
+/**
+ * EC-295: the `options` control — a `select` shown as inline segmented buttons
+ * (`[[Page]] [URL] [File]`) instead of a dropdown. Engine built-in (no consumer
+ * registration); single-select only. Each option shows `label ?? value` and a
+ * `title` tooltip from the option's `description`; the field `default` + `readOnly`
+ * flow through the shared form. Picks one — to allow an empty/unset value use the
+ * default dropdown control.
+ */
+export declare function SegmentedOptions({ field, value, onChange, readOnly, id, }: {
+    field: SelectFieldDef;
+    value: unknown;
+    onChange: (value: unknown) => void;
+    readOnly: boolean;
+    id: string;
+}): import("react").JSX.Element;

package/dist/components/cms/field-control-lib.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button, Row } from '@elytracms/studio/ui';
+import { localizedLabel } from '@elytracms/studio/lib/i18n';
+import { fieldLabel } from './cms-labels.js';
+/**
+ * Pure companions of the document-editor field controls (EC-330, split from
+ * `field-control.tsx`): the repeater reorder/summary/shape decisions and the
+ * depth-encoding palette the object-array editors render from, plus the
+ * `options` segmented control. Small and dependency-light so the behavioural
+ * pins in `field-control.test.ts` reach them without pulling the whole
+ * field-control dispatcher.
+ */
+/**
+ * Move `from` → `to`, returning a NEW array (all elements preserved). The repeater
+ * applies the same `(from, to)` to its value array AND its parallel stable-key array,
+ * so the two stay aligned through a reorder — a row's child/DOM state (an open
+ * relation/asset picker, focus) never mis-associates (EC-253 C2, EC-294).
+ */
+export function reorder(list, from, to) {
+    const next = list.slice();
+    const [moved] = next.splice(from, 1);
+    if (moved !== undefined)
+        next.splice(to, 0, moved);
+    return next;
+}
+const SUMMARY_PREFERRED_FIELDS = ['title', 'label', 'name', 'heading', 'text', 'linkType'];
+/**
+ * A scannable one-line summary for a collapsed repeater item (EC-294): the first
+ * meaningful scalar subfield value — preferring title-ish field names — else `#n`.
+ * Pure (no store): summarises from the item's own scalar values, so it works for
+ * any object shape without resolving relations/assets.
+ */
+export function objectItemSummary(fields, item, index) {
+    const scalar = (name) => {
+        const v = item[name];
+        if (typeof v === 'string' && v.trim())
+            return v.trim();
+        if (typeof v === 'number' || typeof v === 'boolean')
+            return String(v);
+        return null;
+    };
+    const names = fields.map((f) => f.name);
+    for (const name of SUMMARY_PREFERRED_FIELDS) {
+        if (names.includes(name)) {
+            const s = scalar(name);
+            if (s)
+                return truncateSummary(s);
+        }
+    }
+    for (const name of names) {
+        const s = scalar(name);
+        if (s)
+            return truncateSummary(s);
+    }
+    return `#${index + 1}`;
+}
+function truncateSummary(s, max = 60) {
+    return s.length > max ? `${s.slice(0, max - 1)}…` : s;
+}
+// (B) Depth-keyed visuals: a coloured left rail + a matching faint tint, DISTINCT
+// per level so nesting reads at a glance. The outermost array (depth 0) starts at
+// the brand primary — no more neutral, un-encoded first level — then a fixed
+// high-contrast rotation whose adjacent hues never collide (primary→amber→green→red;
+// note `info` is a near-primary blue, so it is deliberately NOT adjacent to primary).
+// It cycles (mod) so pathological depth still renders. Literal classes so Tailwind emits them.
+const DEPTH_RAIL = ['border-l-primary', 'border-l-warning', 'border-l-success', 'border-l-destructive'];
+const DEPTH_TINT = ['bg-primary/5', 'bg-warning/5', 'bg-success/5', 'bg-destructive/5'];
+// `d` is always ≥ 0, so `d % length` is in-bounds — the assertion is sound and gives
+// callers a definite `string` (cn tolerates undefined, but tests read the value).
+export const depthRail = (d) => DEPTH_RAIL[d % DEPTH_RAIL.length];
+export const depthTint = (d) => DEPTH_TINT[d % DEPTH_TINT.length];
+// (C) An object array renders as a compact TABLE when every subfield is a scalar (a
+// flat row) and there are few enough columns to read; richer/nested object types stay
+// as cards with depth encoding (B). Conditional (function-hidden) subfields force the
+// card path — a table has no place to show/hide a column per row.
+const TABULAR_FIELD_TYPES = new Set(['text', 'number', 'boolean', 'select', 'date']);
+const MAX_TABLE_COLUMNS = 4;
+export function isTabularObjectType(field) {
+    return (field.fields.length > 0 &&
+        field.fields.length <= MAX_TABLE_COLUMNS &&
+        field.fields.every((f) => TABULAR_FIELD_TYPES.has(f.type) && typeof f.form?.hidden !== 'function'));
+}
+/**
+ * EC-295: the `options` control — a `select` shown as inline segmented buttons
+ * (`[[Page]] [URL] [File]`) instead of a dropdown. Engine built-in (no consumer
+ * registration); single-select only. Each option shows `label ?? value` and a
+ * `title` tooltip from the option's `description`; the field `default` + `readOnly`
+ * flow through the shared form. Picks one — to allow an empty/unset value use the
+ * default dropdown control.
+ */
+export function SegmentedOptions({ field, value, onChange, readOnly, id, }) {
+    const current = typeof value === 'string' ? value : '';
+    return (_jsx(Row, { gap: "1", wrap: true, role: "radiogroup", id: id, "aria-label": fieldLabel(field), children: field.options.map((opt) => {
+            const active = current === opt.value;
+            return (_jsx(Button, { type: "button", variant: active ? 'default' : 'outline', size: "sm", role: "radio", "aria-checked": active, title: localizedLabel(opt.description) || undefined, disabled: readOnly, onClick: () => onChange(opt.value), children: localizedLabel(opt.label, opt.value) }, opt.value));
+        }) }));
+}
+//# sourceMappingURL=field-control-lib.js.map

package/dist/components/cms/field-control-lib.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-control-lib.js","sourceRoot":"","sources":["../../../src/components/cms/field-control-lib.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ObjectFieldDef, SelectFieldDef } from '@elytracms/core/cms-core'\nimport { Button, Row } from '@elytracms/studio/ui'\nimport { localizedLabel } from '@elytracms/studio/lib/i18n'\nimport { fieldLabel } from './cms-labels'\n\n/**\n * Pure companions of the document-editor field controls (EC-330, split from\n * `field-control.tsx`): the repeater reorder/summary/shape decisions and the\n * depth-encoding palette the object-array editors render from, plus the\n * `options` segmented control. Small and dependency-light so the behavioural\n * pins in `field-control.test.ts` reach them without pulling the whole\n * field-control dispatcher.\n */\n\n/**\n * Move `from` → `to`, returning a NEW array (all elements preserved). The repeater\n * applies the same `(from, to)` to its value array AND its parallel stable-key array,\n * so the two stay aligned through a reorder — a row's child/DOM state (an open\n * relation/asset picker, focus) never mis-associates (EC-253 C2, EC-294).\n */\nexport function reorder<T>(list: readonly T[], from: number, to: number): T[] {\n  const next = list.slice()\n  const [moved] = next.splice(from, 1)\n  if (moved !== undefined) next.splice(to, 0, moved)\n  return next\n}\n\nconst SUMMARY_PREFERRED_FIELDS = ['title', 'label', 'name', 'heading', 'text', 'linkType']\n\n/**\n * A scannable one-line summary for a collapsed repeater item (EC-294): the first\n * meaningful scalar subfield value — preferring title-ish field names — else `#n`.\n * Pure (no store): summarises from the item's own scalar values, so it works for\n * any object shape without resolving relations/assets.\n */\nexport function objectItemSummary(\n  fields: readonly { name: string }[],\n  item: Record<string, unknown>,\n  index: number,\n): string {\n  const scalar = (name: string): string | null => {\n    const v = item[name]\n    if (typeof v === 'string' && v.trim()) return v.trim()\n    if (typeof v === 'number' || typeof v === 'boolean') return String(v)\n    return null\n  }\n  const names = fields.map((f) => f.name)\n  for (const name of SUMMARY_PREFERRED_FIELDS) {\n    if (names.includes(name)) {\n      const s = scalar(name)\n      if (s) return truncateSummary(s)\n    }\n  }\n  for (const name of names) {\n    const s = scalar(name)\n    if (s) return truncateSummary(s)\n  }\n  return `#${index + 1}`\n}\n\nfunction truncateSummary(s: string, max = 60): string {\n  return s.length > max ? `${s.slice(0, max - 1)}…` : s\n}\n\n// (B) Depth-keyed visuals: a coloured left rail + a matching faint tint, DISTINCT\n// per level so nesting reads at a glance. The outermost array (depth 0) starts at\n// the brand primary — no more neutral, un-encoded first level — then a fixed\n// high-contrast rotation whose adjacent hues never collide (primary→amber→green→red;\n// note `info` is a near-primary blue, so it is deliberately NOT adjacent to primary).\n// It cycles (mod) so pathological depth still renders. Literal classes so Tailwind emits them.\nconst DEPTH_RAIL = ['border-l-primary', 'border-l-warning', 'border-l-success', 'border-l-destructive']\nconst DEPTH_TINT = ['bg-primary/5', 'bg-warning/5', 'bg-success/5', 'bg-destructive/5']\n// `d` is always ≥ 0, so `d % length` is in-bounds — the assertion is sound and gives\n// callers a definite `string` (cn tolerates undefined, but tests read the value).\nexport const depthRail = (d: number) => DEPTH_RAIL[d % DEPTH_RAIL.length]!\nexport const depthTint = (d: number) => DEPTH_TINT[d % DEPTH_TINT.length]!\n\n// (C) An object array renders as a compact TABLE when every subfield is a scalar (a\n// flat row) and there are few enough columns to read; richer/nested object types stay\n// as cards with depth encoding (B). Conditional (function-hidden) subfields force the\n// card path — a table has no place to show/hide a column per row.\nconst TABULAR_FIELD_TYPES = new Set(['text', 'number', 'boolean', 'select', 'date'])\nconst MAX_TABLE_COLUMNS = 4\nexport function isTabularObjectType(field: ObjectFieldDef): boolean {\n  return (\n    field.fields.length > 0 &&\n    field.fields.length <= MAX_TABLE_COLUMNS &&\n    field.fields.every(\n      (f) => TABULAR_FIELD_TYPES.has(f.type) && typeof f.form?.hidden !== 'function',\n    )\n  )\n}\n\n/**\n * EC-295: the `options` control — a `select` shown as inline segmented buttons\n * (`[[Page]] [URL] [File]`) instead of a dropdown. Engine built-in (no consumer\n * registration); single-select only. Each option shows `label ?? value` and a\n * `title` tooltip from the option's `description`; the field `default` + `readOnly`\n * flow through the shared form. Picks one — to allow an empty/unset value use the\n * default dropdown control.\n */\nexport function SegmentedOptions({\n  field,\n  value,\n  onChange,\n  readOnly,\n  id,\n}: {\n  field: SelectFieldDef\n  value: unknown\n  onChange: (value: unknown) => void\n  readOnly: boolean\n  id: string\n}) {\n  const current = typeof value === 'string' ? value : ''\n  return (\n    <Row gap=\"1\" wrap role=\"radiogroup\" id={id} aria-label={fieldLabel(field)}>\n      {field.options.map((opt) => {\n        const active = current === opt.value\n        return (\n          <Button\n            key={opt.value}\n            type=\"button\"\n            variant={active ? 'default' : 'outline'}\n            size=\"sm\"\n            role=\"radio\"\n            aria-checked={active}\n            title={localizedLabel(opt.description) || undefined}\n            disabled={readOnly}\n            onClick={() => onChange(opt.value)}\n          >\n            {localizedLabel(opt.label, opt.value)}\n          </Button>\n        )\n      })}\n    </Row>\n  )\n}\n"]}

package/dist/components/cms/field-control.d.ts

@@ -1,4 +1,4 @@
-import type { FieldDef, ObjectFieldDef, SelectFieldDef } from '@elytracms/core/cms-core';
+import type { FieldDef } from '@elytracms/core/cms-core';
 interface FieldControlProps {
     field: FieldDef;
     value: unknown;
@@ -15,40 +15,12 @@ interface FieldControlProps {
  * naming a control with NO renderer and NO built-in name (a typo) shows the
  * built-in with a loud issue — never a silent fall-through; otherwise the built-in
  * renders alone.
+ *
+ * EC-330 split: the asset-field family lives in `asset-field.tsx`, the object /
+ * repeater editors in `object-array-field.tsx`, and their pure companions
+ * (reorder/summary/depth/table decisions, the `options` segmented control) in
+ * `field-control-lib.tsx` — this file keeps the dispatcher plus the slug and
+ * relation controls.
  */
 export declare function FieldControl(props: FieldControlProps): import("react").JSX.Element;
-/**
- * EC-295: the `options` control — a `select` shown as inline segmented buttons
- * (`[[Page]] [URL] [File]`) instead of a dropdown. Engine built-in (no consumer
- * registration); single-select only. Each option shows `label ?? value` and a
- * `title` tooltip from the option's `description`; the field `default` + `readOnly`
- * flow through the shared form. Picks one — to allow an empty/unset value use the
- * default dropdown control.
- */
-export declare function SegmentedOptions({ field, value, onChange, readOnly, id, }: {
-    field: SelectFieldDef;
-    value: unknown;
-    onChange: (value: unknown) => void;
-    readOnly: boolean;
-    id: string;
-}): import("react").JSX.Element;
-/**
- * Move `from` → `to`, returning a NEW array (all elements preserved). The repeater
- * applies the same `(from, to)` to its value array AND its parallel stable-key array,
- * so the two stay aligned through a reorder — a row's child/DOM state (an open
- * relation/asset picker, focus) never mis-associates (EC-253 C2, EC-294).
- */
-export declare function reorder<T>(list: readonly T[], from: number, to: number): T[];
-/**
- * A scannable one-line summary for a collapsed repeater item (EC-294): the first
- * meaningful scalar subfield value — preferring title-ish field names — else `#n`.
- * Pure (no store): summarises from the item's own scalar values, so it works for
- * any object shape without resolving relations/assets.
- */
-export declare function objectItemSummary(fields: readonly {
-    name: string;
-}[], item: Record<string, unknown>, index: number): string;
-export declare const depthRail: (d: number) => string;
-export declare const depthTint: (d: number) => string;
-export declare function isTabularObjectType(field: ObjectFieldDef): boolean;
 export {};