@elytracms/studio 0.0.66 → 0.0.68

package/dist/components/builder/property-inspector.d.ts

@@ -1,22 +1 @@
-import type { ComponentNode } from '@elytracms/core/project-graph';
-import type { ComponentManifest, PropField } from '@elytracms/core/component-registry';
 export declare function PropertyInspector(): import("react").JSX.Element;
-/**
- * The prop rows the inspector renders for a node (EC-393). Manifest props MINUS:
- * layout-managed props (they render in the Layout section, EC-162); `blocks` props
- * (they are child regions shown in Slots, EC-190); and any prop hidden RIGHT NOW by
- * its `form.hidden` — static `true`, or a predicate over the SIBLING prop values.
- *
- * The predicate's context is the component instance's EFFECTIVE prop values
- * (`effectivePropValues` — static values with manifest defaults filled), the prop
- * analogue of the document form's active-locale draft values (`isFieldHidden` there).
- * So a conditional row shows/hides live as a sibling prop changes and unmounts
- * exactly like a document-form field. Pure (no store) so the behaviour is testable.
- */
-export declare function visibleInspectorProps(manifest: ComponentManifest, node: ComponentNode, layoutManaged: ReadonlySet<string>): [string, PropField][];
-declare function PropField({ node, name, spec }: {
-    node: ComponentNode;
-    name: string;
-    spec: PropField;
-}): import("react").JSX.Element;
-export {};

package/dist/components/builder/property-inspector.js

@@ -2,14 +2,14 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useRef } from 'react';
 import { Lock } from 'lucide-react';
 import { staticProp } from '@elytracms/core/project-graph';
-import { effectivePropValues, manifestSlots } from '@elytracms/core/component-registry';
-import { isFieldHidden } from '@elytracms/core/cms-core';
+import { manifestSlots } from '@elytracms/core/component-registry';
 import { getStudioRegistry } from '@elytracms/studio/lib/registry';
 import { Badge, Code, Field, InspectorSection, PanelHeader, Row, Spacer, Stack, Text, } from '@elytracms/studio/ui';
 import { humanizeName } from '@elytracms/studio/lib/utils';
 import { localizedLabel, translate } from '@elytracms/studio/lib/i18n';
 import { componentDisplayName } from '@elytracms/studio/lib/persona/labels';
 import { PropValueControl } from '../cms/prop-fields.js';
+import { visiblePropFields } from '../cms/prop-visibility.js';
 import { useBuilder } from './builder-store.js';
 import { LayoutSection, layoutManagedPropNames } from './layout-inspector.js';
 import { usePropSync } from './prop-sync-context.js';
@@ -23,32 +23,15 @@ export function PropertyInspector() {
     const manifest = studio.registry.getManifest(node.componentId);
     return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [_jsxs(PanelHeader, { children: [_jsx(Text, { size: "sm", weight: "semibold", children: translate('builder.inspector.title') }), _jsx(Spacer, {}), _jsx(Code, { tone: "muted", title: node.componentId, children: componentDisplayName(node.componentId, manifest) })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: _jsx(SettingsTab, { node: node, manifest: manifest }) })] }));
 }
-/**
- * The prop rows the inspector renders for a node (EC-393). Manifest props MINUS:
- * layout-managed props (they render in the Layout section, EC-162); `blocks` props
- * (they are child regions shown in Slots, EC-190); and any prop hidden RIGHT NOW by
- * its `form.hidden` — static `true`, or a predicate over the SIBLING prop values.
- *
- * The predicate's context is the component instance's EFFECTIVE prop values
- * (`effectivePropValues` — static values with manifest defaults filled), the prop
- * analogue of the document form's active-locale draft values (`isFieldHidden` there).
- * So a conditional row shows/hides live as a sibling prop changes and unmounts
- * exactly like a document-form field. Pure (no store) so the behaviour is testable.
- */
-export function visibleInspectorProps(manifest, node, layoutManaged) {
-    const ctx = { values: effectivePropValues(manifest, node) };
-    return Object.entries(manifest.props).filter(([name, spec]) => !layoutManaged.has(name) &&
-        spec.type !== 'blocks' &&
-        !isFieldHidden({ ...spec, name }, ctx));
-}
 /** The full property surface: node identity, static props, condition, slots. */
 function SettingsTab({ node, manifest, }) {
     // Container layout props render in the dedicated Layout section (EC-162),
     // not as a second set of generic controls.
     const layoutManaged = new Set(layoutManagedPropNames(node));
     // EC-190: `blocks` props are slots; EC-393: `form.hidden` props are omitted —
-    // evaluated against the node's effective sibling prop values, live as they change.
-    const props = manifest ? visibleInspectorProps(manifest, node, layoutManaged) : [];
+    // evaluated against the node's effective sibling prop values, live as they change
+    // (the shared pure core in `cms/prop-visibility.ts`, EC-430).
+    const props = manifest ? visiblePropFields(manifest, node, layoutManaged) : [];
     const slots = manifest ? manifestSlots(manifest) : [];
     return (_jsxs(_Fragment, { children: [_jsx(LayoutSection, { node: node }), !manifest ? (_jsxs("div", { className: "p-3", children: [_jsx(Badge, { variant: "error", children: translate('builder.inspector.unknownComponent') }), _jsx(Text, { size: "xs", tone: "muted", className: "mt-2", children: translate('builder.inspector.noManifest') })] })) : (_jsx(InspectorSection, { title: translate('builder.inspector.props'), children: props.length === 0 ? (_jsx(Text, { size: "xs", tone: "subtle", children: translate('builder.inspector.noEditableProps') })) : (_jsx(Stack, { gap: "4", children: props.map(([name, spec]) => (_jsx(PropField, { node: node, name: name, spec: spec }, `${node.id}:${name}`))) })) })), slots.length > 0 ? (_jsxs(InspectorSection, { title: translate('builder.inspector.slots'), children: [_jsx(Stack, { gap: "1", children: slots.map((slot) => {
                             const count = node.slots?.[slot.name]?.length ?? 0;

package/dist/components/builder/property-inspector.js.map

@@ -1 +1 @@
-{"version":3,"file":"property-inspector.js","sourceRoot":"","sources":["../../../src/components/builder/property-inspector.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useRef } from 'react'\nimport { Lock } from 'lucide-react'\nimport { staticProp } from '@elytracms/core/project-graph'\nimport type { ComponentNode } from '@elytracms/core/project-graph'\nimport type { ComponentManifest, PropField } from '@elytracms/core/component-registry'\nimport { effectivePropValues, manifestSlots } from '@elytracms/core/component-registry'\nimport { isFieldHidden } from '@elytracms/core/cms-core'\nimport type { FieldConditionContext, FieldDef } from '@elytracms/core/cms-core'\nimport { getStudioRegistry } from '@elytracms/studio/lib/registry'\nimport {\n  Badge,\n  Code,\n  Field,\n  InspectorSection,\n  PanelHeader,\n  Row,\n  Spacer,\n  Stack,\n  Text,\n} from '@elytracms/studio/ui'\nimport { humanizeName } from '@elytracms/studio/lib/utils'\nimport { localizedLabel, translate } from '@elytracms/studio/lib/i18n'\nimport { componentDisplayName } from '@elytracms/studio/lib/persona/labels'\nimport { PropValueControl } from '../cms/prop-fields'\nimport { useBuilder } from './builder-store'\nimport { LayoutSection, layoutManagedPropNames } from './layout-inspector'\nimport { usePropSync } from './prop-sync-context'\n\nexport function PropertyInspector() {\n  const builder = useBuilder()\n  const studio = getStudioRegistry()\n  const node = builder.selectedNode\n\n  if (!node) {\n    return (\n      <div className=\"grid h-full place-items-center p-6 text-center\">\n        <Text size=\"sm\" tone=\"muted\">\n          {translate('builder.inspector.emptySelection')}\n        </Text>\n      </div>\n    )\n  }\n\n  const manifest = studio.registry.getManifest(node.componentId)\n\n  return (\n    <div className=\"flex h-full min-h-0 flex-col\">\n      <PanelHeader>\n        <Text size=\"sm\" weight=\"semibold\">\n          {translate('builder.inspector.title')}\n        </Text>\n        <Spacer />\n        <Code tone=\"muted\" title={node.componentId}>\n          {componentDisplayName(node.componentId, manifest)}\n        </Code>\n      </PanelHeader>\n\n      <div className=\"min-h-0 flex-1 overflow-auto\">\n        <SettingsTab node={node} manifest={manifest} />\n      </div>\n    </div>\n  )\n}\n\n/**\n * The prop rows the inspector renders for a node (EC-393). Manifest props MINUS:\n * layout-managed props (they render in the Layout section, EC-162); `blocks` props\n * (they are child regions shown in Slots, EC-190); and any prop hidden RIGHT NOW by\n * its `form.hidden` — static `true`, or a predicate over the SIBLING prop values.\n *\n * The predicate's context is the component instance's EFFECTIVE prop values\n * (`effectivePropValues` — static values with manifest defaults filled), the prop\n * analogue of the document form's active-locale draft values (`isFieldHidden` there).\n * So a conditional row shows/hides live as a sibling prop changes and unmounts\n * exactly like a document-form field. Pure (no store) so the behaviour is testable.\n */\nexport function visibleInspectorProps(\n  manifest: ComponentManifest,\n  node: ComponentNode,\n  layoutManaged: ReadonlySet<string>,\n): [string, PropField][] {\n  const ctx: FieldConditionContext = { values: effectivePropValues(manifest, node) }\n  return Object.entries(manifest.props).filter(\n    ([name, spec]) =>\n      !layoutManaged.has(name) &&\n      spec.type !== 'blocks' &&\n      !isFieldHidden({ ...spec, name } as FieldDef, ctx),\n  )\n}\n\n/** The full property surface: node identity, static props, condition, slots. */\nfunction SettingsTab({\n  node,\n  manifest,\n}: {\n  node: ComponentNode\n  manifest: ComponentManifest | undefined\n}) {\n  // Container layout props render in the dedicated Layout section (EC-162),\n  // not as a second set of generic controls.\n  const layoutManaged = new Set(layoutManagedPropNames(node))\n  // EC-190: `blocks` props are slots; EC-393: `form.hidden` props are omitted —\n  // evaluated against the node's effective sibling prop values, live as they change.\n  const props = manifest ? visibleInspectorProps(manifest, node, layoutManaged) : []\n  const slots = manifest ? manifestSlots(manifest) : []\n\n  return (\n    <>\n      {/* EC-192: the editor-facing inspector no longer renders the raw node id or\n          namespaced component id (the persona promise). The component's human name\n          is in the panel header (with the manifest id in its `title`); the canvas\n          and tree provide selection. */}\n      {/* Contextual layout inspector for Stack/Grid containers (EC-162). */}\n      <LayoutSection node={node} />\n\n      {!manifest ? (\n        <div className=\"p-3\">\n          <Badge variant=\"error\">{translate('builder.inspector.unknownComponent')}</Badge>\n          <Text size=\"xs\" tone=\"muted\" className=\"mt-2\">\n            {translate('builder.inspector.noManifest')}\n          </Text>\n        </div>\n      ) : (\n        <InspectorSection title={translate('builder.inspector.props')}>\n          {props.length === 0 ? (\n            <Text size=\"xs\" tone=\"subtle\">\n              {translate('builder.inspector.noEditableProps')}\n            </Text>\n          ) : (\n            <Stack gap=\"4\">\n              {props.map(([name, spec]) => (\n                // Key by node id so per-node local control state never leaks\n                // across a selection change to a same-named prop.\n                <PropField key={`${node.id}:${name}`} node={node} name={name} spec={spec} />\n              ))}\n            </Stack>\n          )}\n        </InspectorSection>\n      )}\n\n      {slots.length > 0 ? (\n        <InspectorSection title={translate('builder.inspector.slots')}>\n          <Stack gap=\"1\">\n            {slots.map((slot) => {\n              const count = node.slots?.[slot.name]?.length ?? 0\n              const missing = slot.required && count === 0\n              return (\n                <Row key={slot.name} gap=\"2\">\n                  <Text size=\"xs\" title={slot.name}>\n                    {humanizeName(slot.name)}\n                  </Text>\n                  {slot.required ? (\n                    <Badge variant={missing ? 'error' : 'outline'}>{translate('common.required')}</Badge>\n                  ) : null}\n                  <Spacer />\n                  <Text size=\"xs\" tone=\"subtle\" mono>\n                    {count}\n                  </Text>\n                </Row>\n              )\n            })}\n          </Stack>\n          <Text size=\"xs\" tone=\"subtle\" className=\"mt-2\">\n            {translate('builder.inspector.slotsHint')}\n          </Text>\n        </InspectorSection>\n      ) : null}\n    </>\n  )\n}\n\nfunction PropField({ node, name, spec }: { node: ComponentNode; name: string; spec: PropField }) {\n  const builder = useBuilder()\n  const sync = usePropSync()\n  const anchorRef = useRef<HTMLDivElement>(null)\n  const value = node.props?.[name]\n  const id = `prop-${node.id}-${name}`\n  // Coalesce rapid edits to the same prop into one undo step (EC-190).\n  const coalesceKey = `${node.id}:${name}`\n\n  // EC-408 FORWARD: a sub-part click that resolved to THIS prop scrolls its\n  // control into view and focuses the first focusable element. Keyed on the\n  // request object (a fresh nonce every request) so re-clicking re-focuses.\n  const request = sync?.focusRequest\n  useEffect(() => {\n    if (!request || request.nodeId !== node.id || request.propName !== name) return\n    const anchor = anchorRef.current\n    if (!anchor) return\n    anchor.scrollIntoView({ block: 'nearest' })\n    anchor\n      .querySelector<HTMLElement>('input, textarea, select, button, [contenteditable=\"true\"], [tabindex]')\n      ?.focus()\n  }, [request, node.id, name])\n\n  return (\n    // EC-408: the stable per-prop anchor. Focus (bubbling) inside any control\n    // highlights the matching sub-part on the canvas (REVERSE); blur that leaves\n    // the field clears it.\n    <div\n      ref={anchorRef}\n      data-ec-prop-anchor={name}\n      onFocus={() => sync?.setHighlighted({ nodeId: node.id, propName: name })}\n      onBlur={(e) => {\n        if (!e.currentTarget.contains(e.relatedTarget as Node | null)) sync?.setHighlighted(null)\n      }}\n    >\n      {/* EC-393: honor `form.description` as the field hint, at parity with the document\n          form (`detail-editor.tsx` passes the same to its `Field`). */}\n      <Field\n        label={\n          spec.form?.readOnly === true ? (\n            // EC-395: the SAME read-only badge the document form renders next to a\n            // `read`-access field label (`detail-editor.tsx`'s `fieldLevelReadOnly`\n            // row) — identical icon, i18n key, and `Badge` variant, so a locked prop\n            // reads exactly like a locked document field, never a bespoke treatment.\n            <Row gap=\"2\">\n              <span>{localizedLabel(spec.form?.label, name)}</span>\n              <Badge variant=\"outline\">\n                <Lock className=\"size-3\" /> {translate('cms.editor.readOnlyBadge')}\n              </Badge>\n            </Row>\n          ) : (\n            localizedLabel(spec.form?.label, name)\n          )\n        }\n        htmlFor={id}\n        hint={localizedLabel(spec.form?.description) || undefined}\n      >\n        <PropValueControl\n          id={id}\n          name={name}\n          spec={spec}\n          value={value}\n          onSet={(v) => builder.dispatch({ type: 'setProp', id: node.id, name, value: staticProp(v), coalesceKey })}\n          onClear={() => builder.dispatch({ type: 'removeProp', id: node.id, name })}\n        />\n      </Field>\n    </div>\n  )\n}\n\n"]}
+{"version":3,"file":"property-inspector.js","sourceRoot":"","sources":["../../../src/components/builder/property-inspector.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACnC,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAA;AAG1D,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAA;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAClE,OAAO,EACL,KAAK,EACL,IAAI,EACJ,KAAK,EACL,gBAAgB,EAChB,WAAW,EACX,GAAG,EACH,MAAM,EACN,KAAK,EACL,IAAI,GACL,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAC1D,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAA;AACtE,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAA;AAC3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAC5C,OAAO,EAAE,aAAa,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAA;AAC1E,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAEjD,MAAM,UAAU,iBAAiB;IAC/B,MAAM,OAAO,GAAG,UAAU,EAAE,CAAA;IAC5B,MAAM,MAAM,GAAG,iBAAiB,EAAE,CAAA;IAClC,MAAM,IAAI,GAAG,OAAO,CAAC,YAAY,CAAA;IAEjC,IAAI,CAAC,IAAI,EAAE,CAAC;QACV,OAAO,CACL,cAAK,SAAS,EAAC,gDAAgD,YAC7D,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,YACzB,SAAS,CAAC,kCAAkC,CAAC,GACzC,GACH,CACP,CAAA;IACH,CAAC;IAED,MAAM,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;IAE9D,OAAO,CACL,eAAK,SAAS,EAAC,8BAA8B,aAC3C,MAAC,WAAW,eACV,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,MAAM,EAAC,UAAU,YAC9B,SAAS,CAAC,yBAAyB,CAAC,GAChC,EACP,KAAC,MAAM,KAAG,EACV,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,IAAI,CAAC,WAAW,YACvC,oBAAoB,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,GAC5C,IACK,EAEd,cAAK,SAAS,EAAC,8BAA8B,YAC3C,KAAC,WAAW,IAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,GAAI,GAC3C,IACF,CACP,CAAA;AACH,CAAC;AAED,gFAAgF;AAChF,SAAS,WAAW,CAAC,EACnB,IAAI,EACJ,QAAQ,GAIT;IACC,0EAA0E;IAC1E,2CAA2C;IAC3C,MAAM,aAAa,GAAG,IAAI,GAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,CAAC,CAAA;IAC3D,8EAA8E;IAC9E,kFAAkF;IAClF,8DAA8D;IAC9D,MAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,QAAQ,EAAE,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;IAC9E,MAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;IAErD,OAAO,CACL,8BAME,KAAC,aAAa,IAAC,IAAI,EAAE,IAAI,GAAI,EAE5B,CAAC,QAAQ,CAAC,CAAC,CAAC,CACX,eAAK,SAAS,EAAC,KAAK,aAClB,KAAC,KAAK,IAAC,OAAO,EAAC,OAAO,YAAE,SAAS,CAAC,oCAAoC,CAAC,GAAS,EAChF,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,MAAM,YAC1C,SAAS,CAAC,8BAA8B,CAAC,GACrC,IACH,CACP,CAAC,CAAC,CAAC,CACF,KAAC,gBAAgB,IAAC,KAAK,EAAE,SAAS,CAAC,yBAAyB,CAAC,YAC1D,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CACpB,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,YAC1B,SAAS,CAAC,mCAAmC,CAAC,GAC1C,CACR,CAAC,CAAC,CAAC,CACF,KAAC,KAAK,IAAC,GAAG,EAAC,GAAG,YACX,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,CAG3B,KAAC,SAAS,IAA4B,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,IAAxD,GAAG,IAAI,CAAC,EAAE,IAAI,IAAI,EAAE,CAAwC,CAC7E,CAAC,GACI,CACT,GACgB,CACpB,EAEA,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAClB,MAAC,gBAAgB,IAAC,KAAK,EAAE,SAAS,CAAC,yBAAyB,CAAC,aAC3D,KAAC,KAAK,IAAC,GAAG,EAAC,GAAG,YACX,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;4BAClB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,MAAM,IAAI,CAAC,CAAA;4BAClD,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,IAAI,KAAK,KAAK,CAAC,CAAA;4BAC5C,OAAO,CACL,MAAC,GAAG,IAAiB,GAAG,EAAC,GAAG,aAC1B,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAE,IAAI,CAAC,IAAI,YAC7B,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,GACnB,EACN,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CACf,KAAC,KAAK,IAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,YAAG,SAAS,CAAC,iBAAiB,CAAC,GAAS,CACtF,CAAC,CAAC,CAAC,IAAI,EACR,KAAC,MAAM,KAAG,EACV,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,kBAC/B,KAAK,GACD,KAVC,IAAI,CAAC,IAAI,CAWb,CACP,CAAA;wBACH,CAAC,CAAC,GACI,EACR,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,MAAM,YAC3C,SAAS,CAAC,6BAA6B,CAAC,GACpC,IACU,CACpB,CAAC,CAAC,CAAC,IAAI,IACP,CACJ,CAAA;AACH,CAAC;AAED,SAAS,SAAS,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAA0D;IAC7F,MAAM,OAAO,GAAG,UAAU,EAAE,CAAA;IAC5B,MAAM,IAAI,GAAG,WAAW,EAAE,CAAA;IAC1B,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC9C,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,IAAI,CAAC,CAAA;IAChC,MAAM,EAAE,GAAG,QAAQ,IAAI,CAAC,EAAE,IAAI,IAAI,EAAE,CAAA;IACpC,qEAAqE;IACrE,MAAM,WAAW,GAAG,GAAG,IAAI,CAAC,EAAE,IAAI,IAAI,EAAE,CAAA;IAExC,0EAA0E;IAC1E,0EAA0E;IAC1E,0EAA0E;IAC1E,MAAM,OAAO,GAAG,IAAI,EAAE,YAAY,CAAA;IAClC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,MAAM,KAAK,IAAI,CAAC,EAAE,IAAI,OAAO,CAAC,QAAQ,KAAK,IAAI;YAAE,OAAM;QAC/E,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,CAAA;QAChC,IAAI,CAAC,MAAM;YAAE,OAAM;QACnB,MAAM,CAAC,cAAc,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAA;QAC3C,MAAM;aACH,aAAa,CAAc,uEAAuE,CAAC;YACpG,EAAE,KAAK,EAAE,CAAA;IACb,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC,CAAA;IAE5B,OAAO,CAIL,cACE,GAAG,EAAE,SAAS,yBACO,IAAI,EACzB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,EAAE,cAAc,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,EACxE,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE;YACZ,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,aAA4B,CAAC;gBAAE,IAAI,EAAE,cAAc,CAAC,IAAI,CAAC,CAAA;QAC3F,CAAC,YAID,KAAC,KAAK,IACJ,KAAK,EACH,IAAI,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC,CAAC,CAAC,CAK7B,MAAC,GAAG,IAAC,GAAG,EAAC,GAAG,aACV,yBAAO,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,GAAQ,EACrD,MAAC,KAAK,IAAC,OAAO,EAAC,SAAS,aACtB,KAAC,IAAI,IAAC,SAAS,EAAC,QAAQ,GAAG,OAAE,SAAS,CAAC,0BAA0B,CAAC,IAC5D,IACJ,CACP,CAAC,CAAC,CAAC,CACF,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,CACvC,EAEH,OAAO,EAAE,EAAE,EACX,IAAI,EAAE,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,IAAI,SAAS,YAEzD,KAAC,gBAAgB,IACf,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,CAAC,EACzG,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,IAAI,EAAE,CAAC,GAC1E,GACI,GACJ,CACP,CAAA;AACH,CAAC","sourcesContent":["import { useEffect, useRef } from 'react'\nimport { Lock } from 'lucide-react'\nimport { staticProp } from '@elytracms/core/project-graph'\nimport type { ComponentNode } from '@elytracms/core/project-graph'\nimport type { ComponentManifest, PropField } from '@elytracms/core/component-registry'\nimport { manifestSlots } from '@elytracms/core/component-registry'\nimport { getStudioRegistry } from '@elytracms/studio/lib/registry'\nimport {\n  Badge,\n  Code,\n  Field,\n  InspectorSection,\n  PanelHeader,\n  Row,\n  Spacer,\n  Stack,\n  Text,\n} from '@elytracms/studio/ui'\nimport { humanizeName } from '@elytracms/studio/lib/utils'\nimport { localizedLabel, translate } from '@elytracms/studio/lib/i18n'\nimport { componentDisplayName } from '@elytracms/studio/lib/persona/labels'\nimport { PropValueControl } from '../cms/prop-fields'\nimport { visiblePropFields } from '../cms/prop-visibility'\nimport { useBuilder } from './builder-store'\nimport { LayoutSection, layoutManagedPropNames } from './layout-inspector'\nimport { usePropSync } from './prop-sync-context'\n\nexport function PropertyInspector() {\n  const builder = useBuilder()\n  const studio = getStudioRegistry()\n  const node = builder.selectedNode\n\n  if (!node) {\n    return (\n      <div className=\"grid h-full place-items-center p-6 text-center\">\n        <Text size=\"sm\" tone=\"muted\">\n          {translate('builder.inspector.emptySelection')}\n        </Text>\n      </div>\n    )\n  }\n\n  const manifest = studio.registry.getManifest(node.componentId)\n\n  return (\n    <div className=\"flex h-full min-h-0 flex-col\">\n      <PanelHeader>\n        <Text size=\"sm\" weight=\"semibold\">\n          {translate('builder.inspector.title')}\n        </Text>\n        <Spacer />\n        <Code tone=\"muted\" title={node.componentId}>\n          {componentDisplayName(node.componentId, manifest)}\n        </Code>\n      </PanelHeader>\n\n      <div className=\"min-h-0 flex-1 overflow-auto\">\n        <SettingsTab node={node} manifest={manifest} />\n      </div>\n    </div>\n  )\n}\n\n/** The full property surface: node identity, static props, condition, slots. */\nfunction SettingsTab({\n  node,\n  manifest,\n}: {\n  node: ComponentNode\n  manifest: ComponentManifest | undefined\n}) {\n  // Container layout props render in the dedicated Layout section (EC-162),\n  // not as a second set of generic controls.\n  const layoutManaged = new Set(layoutManagedPropNames(node))\n  // EC-190: `blocks` props are slots; EC-393: `form.hidden` props are omitted —\n  // evaluated against the node's effective sibling prop values, live as they change\n  // (the shared pure core in `cms/prop-visibility.ts`, EC-430).\n  const props = manifest ? visiblePropFields(manifest, node, layoutManaged) : []\n  const slots = manifest ? manifestSlots(manifest) : []\n\n  return (\n    <>\n      {/* EC-192: the editor-facing inspector no longer renders the raw node id or\n          namespaced component id (the persona promise). The component's human name\n          is in the panel header (with the manifest id in its `title`); the canvas\n          and tree provide selection. */}\n      {/* Contextual layout inspector for Stack/Grid containers (EC-162). */}\n      <LayoutSection node={node} />\n\n      {!manifest ? (\n        <div className=\"p-3\">\n          <Badge variant=\"error\">{translate('builder.inspector.unknownComponent')}</Badge>\n          <Text size=\"xs\" tone=\"muted\" className=\"mt-2\">\n            {translate('builder.inspector.noManifest')}\n          </Text>\n        </div>\n      ) : (\n        <InspectorSection title={translate('builder.inspector.props')}>\n          {props.length === 0 ? (\n            <Text size=\"xs\" tone=\"subtle\">\n              {translate('builder.inspector.noEditableProps')}\n            </Text>\n          ) : (\n            <Stack gap=\"4\">\n              {props.map(([name, spec]) => (\n                // Key by node id so per-node local control state never leaks\n                // across a selection change to a same-named prop.\n                <PropField key={`${node.id}:${name}`} node={node} name={name} spec={spec} />\n              ))}\n            </Stack>\n          )}\n        </InspectorSection>\n      )}\n\n      {slots.length > 0 ? (\n        <InspectorSection title={translate('builder.inspector.slots')}>\n          <Stack gap=\"1\">\n            {slots.map((slot) => {\n              const count = node.slots?.[slot.name]?.length ?? 0\n              const missing = slot.required && count === 0\n              return (\n                <Row key={slot.name} gap=\"2\">\n                  <Text size=\"xs\" title={slot.name}>\n                    {humanizeName(slot.name)}\n                  </Text>\n                  {slot.required ? (\n                    <Badge variant={missing ? 'error' : 'outline'}>{translate('common.required')}</Badge>\n                  ) : null}\n                  <Spacer />\n                  <Text size=\"xs\" tone=\"subtle\" mono>\n                    {count}\n                  </Text>\n                </Row>\n              )\n            })}\n          </Stack>\n          <Text size=\"xs\" tone=\"subtle\" className=\"mt-2\">\n            {translate('builder.inspector.slotsHint')}\n          </Text>\n        </InspectorSection>\n      ) : null}\n    </>\n  )\n}\n\nfunction PropField({ node, name, spec }: { node: ComponentNode; name: string; spec: PropField }) {\n  const builder = useBuilder()\n  const sync = usePropSync()\n  const anchorRef = useRef<HTMLDivElement>(null)\n  const value = node.props?.[name]\n  const id = `prop-${node.id}-${name}`\n  // Coalesce rapid edits to the same prop into one undo step (EC-190).\n  const coalesceKey = `${node.id}:${name}`\n\n  // EC-408 FORWARD: a sub-part click that resolved to THIS prop scrolls its\n  // control into view and focuses the first focusable element. Keyed on the\n  // request object (a fresh nonce every request) so re-clicking re-focuses.\n  const request = sync?.focusRequest\n  useEffect(() => {\n    if (!request || request.nodeId !== node.id || request.propName !== name) return\n    const anchor = anchorRef.current\n    if (!anchor) return\n    anchor.scrollIntoView({ block: 'nearest' })\n    anchor\n      .querySelector<HTMLElement>('input, textarea, select, button, [contenteditable=\"true\"], [tabindex]')\n      ?.focus()\n  }, [request, node.id, name])\n\n  return (\n    // EC-408: the stable per-prop anchor. Focus (bubbling) inside any control\n    // highlights the matching sub-part on the canvas (REVERSE); blur that leaves\n    // the field clears it.\n    <div\n      ref={anchorRef}\n      data-ec-prop-anchor={name}\n      onFocus={() => sync?.setHighlighted({ nodeId: node.id, propName: name })}\n      onBlur={(e) => {\n        if (!e.currentTarget.contains(e.relatedTarget as Node | null)) sync?.setHighlighted(null)\n      }}\n    >\n      {/* EC-393: honor `form.description` as the field hint, at parity with the document\n          form (`detail-editor.tsx` passes the same to its `Field`). */}\n      <Field\n        label={\n          spec.form?.readOnly === true ? (\n            // EC-395: the SAME read-only badge the document form renders next to a\n            // `read`-access field label (`detail-editor.tsx`'s `fieldLevelReadOnly`\n            // row) — identical icon, i18n key, and `Badge` variant, so a locked prop\n            // reads exactly like a locked document field, never a bespoke treatment.\n            <Row gap=\"2\">\n              <span>{localizedLabel(spec.form?.label, name)}</span>\n              <Badge variant=\"outline\">\n                <Lock className=\"size-3\" /> {translate('cms.editor.readOnlyBadge')}\n              </Badge>\n            </Row>\n          ) : (\n            localizedLabel(spec.form?.label, name)\n          )\n        }\n        htmlFor={id}\n        hint={localizedLabel(spec.form?.description) || undefined}\n      >\n        <PropValueControl\n          id={id}\n          name={name}\n          spec={spec}\n          value={value}\n          onSet={(v) => builder.dispatch({ type: 'setProp', id: node.id, name, value: staticProp(v), coalesceKey })}\n          onClear={() => builder.dispatch({ type: 'removeProp', id: node.id, name })}\n        />\n      </Field>\n    </div>\n  )\n}\n\n"]}

package/dist/components/cms/asset-picker-core.d.ts

@@ -0,0 +1,52 @@
+import type { AssetRecord } from '@elytracms/core/persistence';
+/**
+ * Pure selection/filter core for the asset picker (EC-432). DOM-free and
+ * side-effect-free so the media browser's "what shows" and "what a pick/upload
+ * commits" are unit-testable without a browser — the picker component is just the
+ * stage shell around these.
+ */
+/**
+ * The stage width preset the media browser mounts with (EC-432 / EC-431 AD-A):
+ * the roomy `grid` measure (`min(1240px, 94vw)`) — browsing assets is spatial.
+ * Exported so the geometry contract is pinnable without rendering the portal
+ * (which is `null` in the node test env).
+ */
+export declare const ASSET_PICKER_STAGE_PRESET: "grid";
+/**
+ * Split a file-input `accept` string ("image/*", "image/png,image/jpeg",
+ * ".pdf") into the token list the core matcher understands. The picker receives
+ * `accept` as the file-input attribute string (from `assetAcceptAttr(field.accept)`,
+ * a literal like `"image/*"`, or `undefined`), not a field's structured list —
+ * so we re-split it here. Empty/undefined ⇒ no tokens (no restriction).
+ */
+export declare function pickerAcceptTokens(accept: string | undefined): string[];
+/**
+ * Does an asset satisfy the picker's `accept`? Reuses the core
+ * {@link assetMatchesAccept} matcher over the split tokens — an empty/absent
+ * `accept` accepts everything, so a picker opened WITHOUT an accept (the editable
+ * cell) still browses the whole library, unchanged.
+ */
+export declare function matchesPickerAccept(asset: Pick<AssetRecord, 'contentType' | 'filename'>, accept: string | undefined): boolean;
+/**
+ * The assets shown in the picker grid: the shipped search filter (EC-152) then
+ * the `accept` filter (EC-432) — an image field's picker browses only images,
+ * never the project's PDFs. Order follows the library.
+ */
+export declare function visiblePickerAssets(assets: readonly AssetRecord[], query: string, accept: string | undefined): AssetRecord[];
+/**
+ * The id an upload just added to the library, if any (upload-then-select, EC-301):
+ * the `upload()` API is fire-and-forget, so the picker diffs the library against
+ * the pre-upload id set to learn the new asset. `null` when nothing new landed.
+ */
+export declare function uploadedSelection(before: Iterable<string>, after: readonly string[]): string | null;
+/** The picker's commit callbacks — a pick fires `onChange` then closes the stage. */
+export interface PickerCommit {
+    onChange: (assetId: string | null) => void;
+    onOpenChange: (open: boolean) => void;
+}
+/**
+ * Commit a picked asset (or a clear, `assetId === null`) and close the picker —
+ * the selection semantic (click = pick, fire `onChange`, close). Both the grid
+ * card and the Clear affordance route through this.
+ */
+export declare function commitPickerSelection(assetId: string | null, { onChange, onOpenChange }: PickerCommit): void;

package/dist/components/cms/asset-picker-core.js

@@ -0,0 +1,69 @@
+import { assetMatchesAccept } from '@elytracms/core/cms-core';
+import { filterAssets } from '../assets/asset-search.js';
+import { newlyAddedAssetIds } from '../assets/focal-point.js';
+/**
+ * Pure selection/filter core for the asset picker (EC-432). DOM-free and
+ * side-effect-free so the media browser's "what shows" and "what a pick/upload
+ * commits" are unit-testable without a browser — the picker component is just the
+ * stage shell around these.
+ */
+/**
+ * The stage width preset the media browser mounts with (EC-432 / EC-431 AD-A):
+ * the roomy `grid` measure (`min(1240px, 94vw)`) — browsing assets is spatial.
+ * Exported so the geometry contract is pinnable without rendering the portal
+ * (which is `null` in the node test env).
+ */
+export const ASSET_PICKER_STAGE_PRESET = 'grid';
+/**
+ * Split a file-input `accept` string ("image/*", "image/png,image/jpeg",
+ * ".pdf") into the token list the core matcher understands. The picker receives
+ * `accept` as the file-input attribute string (from `assetAcceptAttr(field.accept)`,
+ * a literal like `"image/*"`, or `undefined`), not a field's structured list —
+ * so we re-split it here. Empty/undefined ⇒ no tokens (no restriction).
+ */
+export function pickerAcceptTokens(accept) {
+    if (!accept)
+        return [];
+    return accept
+        .split(',')
+        .map((token) => token.trim())
+        .filter(Boolean);
+}
+/**
+ * Does an asset satisfy the picker's `accept`? Reuses the core
+ * {@link assetMatchesAccept} matcher over the split tokens — an empty/absent
+ * `accept` accepts everything, so a picker opened WITHOUT an accept (the editable
+ * cell) still browses the whole library, unchanged.
+ */
+export function matchesPickerAccept(asset, accept) {
+    const tokens = pickerAcceptTokens(accept);
+    if (tokens.length === 0)
+        return true;
+    return assetMatchesAccept({ contentType: asset.contentType, filename: asset.filename }, tokens);
+}
+/**
+ * The assets shown in the picker grid: the shipped search filter (EC-152) then
+ * the `accept` filter (EC-432) — an image field's picker browses only images,
+ * never the project's PDFs. Order follows the library.
+ */
+export function visiblePickerAssets(assets, query, accept) {
+    return filterAssets(assets, query).filter((asset) => matchesPickerAccept(asset, accept));
+}
+/**
+ * The id an upload just added to the library, if any (upload-then-select, EC-301):
+ * the `upload()` API is fire-and-forget, so the picker diffs the library against
+ * the pre-upload id set to learn the new asset. `null` when nothing new landed.
+ */
+export function uploadedSelection(before, after) {
+    return newlyAddedAssetIds(before, after)[0] ?? null;
+}
+/**
+ * Commit a picked asset (or a clear, `assetId === null`) and close the picker —
+ * the selection semantic (click = pick, fire `onChange`, close). Both the grid
+ * card and the Clear affordance route through this.
+ */
+export function commitPickerSelection(assetId, { onChange, onOpenChange }) {
+    onChange(assetId);
+    onOpenChange(false);
+}
+//# sourceMappingURL=asset-picker-core.js.map

package/dist/components/cms/asset-picker-core.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"asset-picker-core.js","sourceRoot":"","sources":["../../../src/components/cms/asset-picker-core.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAA;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAA;AAE1D;;;;;GAKG;AAEH;;;;;GAKG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,MAAe,CAAA;AAExD;;;;;;GAMG;AACH,MAAM,UAAU,kBAAkB,CAAC,MAA0B;IAC3D,IAAI,CAAC,MAAM;QAAE,OAAO,EAAE,CAAA;IACtB,OAAO,MAAM;SACV,KAAK,CAAC,GAAG,CAAC;SACV,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;SAC5B,MAAM,CAAC,OAAO,CAAC,CAAA;AACpB,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,mBAAmB,CACjC,KAAoD,EACpD,MAA0B;IAE1B,MAAM,MAAM,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAAA;IACzC,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAA;IACpC,OAAO,kBAAkB,CAAC,EAAE,WAAW,EAAE,KAAK,CAAC,WAAW,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,EAAE,MAAM,CAAC,CAAA;AACjG,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,mBAAmB,CACjC,MAA8B,EAC9B,KAAa,EACb,MAA0B;IAE1B,OAAO,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,mBAAmB,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAA;AAC1F,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,iBAAiB,CAAC,MAAwB,EAAE,KAAwB;IAClF,OAAO,kBAAkB,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,CAAA;AACrD,CAAC;AAQD;;;;GAIG;AACH,MAAM,UAAU,qBAAqB,CAAC,OAAsB,EAAE,EAAE,QAAQ,EAAE,YAAY,EAAgB;IACpG,QAAQ,CAAC,OAAO,CAAC,CAAA;IACjB,YAAY,CAAC,KAAK,CAAC,CAAA;AACrB,CAAC","sourcesContent":["import type { AssetRecord } from '@elytracms/core/persistence'\nimport { assetMatchesAccept } from '@elytracms/core/cms-core'\nimport { filterAssets } from '../assets/asset-search'\nimport { newlyAddedAssetIds } from '../assets/focal-point'\n\n/**\n * Pure selection/filter core for the asset picker (EC-432). DOM-free and\n * side-effect-free so the media browser's \"what shows\" and \"what a pick/upload\n * commits\" are unit-testable without a browser — the picker component is just the\n * stage shell around these.\n */\n\n/**\n * The stage width preset the media browser mounts with (EC-432 / EC-431 AD-A):\n * the roomy `grid` measure (`min(1240px, 94vw)`) — browsing assets is spatial.\n * Exported so the geometry contract is pinnable without rendering the portal\n * (which is `null` in the node test env).\n */\nexport const ASSET_PICKER_STAGE_PRESET = 'grid' as const\n\n/**\n * Split a file-input `accept` string (\"image/*\", \"image/png,image/jpeg\",\n * \".pdf\") into the token list the core matcher understands. The picker receives\n * `accept` as the file-input attribute string (from `assetAcceptAttr(field.accept)`,\n * a literal like `\"image/*\"`, or `undefined`), not a field's structured list —\n * so we re-split it here. Empty/undefined ⇒ no tokens (no restriction).\n */\nexport function pickerAcceptTokens(accept: string | undefined): string[] {\n  if (!accept) return []\n  return accept\n    .split(',')\n    .map((token) => token.trim())\n    .filter(Boolean)\n}\n\n/**\n * Does an asset satisfy the picker's `accept`? Reuses the core\n * {@link assetMatchesAccept} matcher over the split tokens — an empty/absent\n * `accept` accepts everything, so a picker opened WITHOUT an accept (the editable\n * cell) still browses the whole library, unchanged.\n */\nexport function matchesPickerAccept(\n  asset: Pick<AssetRecord, 'contentType' | 'filename'>,\n  accept: string | undefined,\n): boolean {\n  const tokens = pickerAcceptTokens(accept)\n  if (tokens.length === 0) return true\n  return assetMatchesAccept({ contentType: asset.contentType, filename: asset.filename }, tokens)\n}\n\n/**\n * The assets shown in the picker grid: the shipped search filter (EC-152) then\n * the `accept` filter (EC-432) — an image field's picker browses only images,\n * never the project's PDFs. Order follows the library.\n */\nexport function visiblePickerAssets(\n  assets: readonly AssetRecord[],\n  query: string,\n  accept: string | undefined,\n): AssetRecord[] {\n  return filterAssets(assets, query).filter((asset) => matchesPickerAccept(asset, accept))\n}\n\n/**\n * The id an upload just added to the library, if any (upload-then-select, EC-301):\n * the `upload()` API is fire-and-forget, so the picker diffs the library against\n * the pre-upload id set to learn the new asset. `null` when nothing new landed.\n */\nexport function uploadedSelection(before: Iterable<string>, after: readonly string[]): string | null {\n  return newlyAddedAssetIds(before, after)[0] ?? null\n}\n\n/** The picker's commit callbacks — a pick fires `onChange` then closes the stage. */\nexport interface PickerCommit {\n  onChange: (assetId: string | null) => void\n  onOpenChange: (open: boolean) => void\n}\n\n/**\n * Commit a picked asset (or a clear, `assetId === null`) and close the picker —\n * the selection semantic (click = pick, fire `onChange`, close). Both the grid\n * card and the Clear affordance route through this.\n */\nexport function commitPickerSelection(assetId: string | null, { onChange, onOpenChange }: PickerCommit): void {\n  onChange(assetId)\n  onOpenChange(false)\n}\n"]}

package/dist/components/cms/asset-picker.d.ts

@@ -2,15 +2,27 @@
  * Pick an asset for a CMS `asset` field (brief §8.4, §8.6, EC-075 → EC-152).
  * Backed by the *real* asset library (the assets store over the operations
  * client) — the same records the Assets section lists — not by fixture
- * documents. Selecting stores the asset id on the document field. The dialog
- * is form-width with a maximize toggle and supports drag/click upload that
- * auto-selects the new asset (EC-301).
+ * documents. Selecting stores the asset id on the document field.
+ *
+ * EC-432 (AD-C): the picker is a real MEDIA BROWSER on the {@link ExpandableSurface}
+ * `stage` (`grid` preset — `min(1240px, 94vw)`, near-full height), replacing the
+ * old `max-w-md` (448px) Dialog. It reuses the shipped assets-rail machinery: the
+ * assets store, the EC-152 search, the EC-400 thumb tile ({@link AssetThumb}), and
+ * the upload-then-select path. It is a SELECTION browser, not a form — click = pick
+ * (fires `onChange`, closes) plus the shipped clear/cancel affordances; the
+ * forms-never-modal rule governs document forms and is untouched. Opened from the
+ * expanded rich-text stage toolbar it rides ABOVE that stage on the EC-392 layer
+ * stack — Escape closes the browser first, the rich-text stage stays.
+ *
+ * The component CONTRACT is unchanged (`{ open, onOpenChange, value, accept,
+ * onChange }`) so every call site — asset fields, rich-text image insertion,
+ * editable cells — works with zero edits, just a bigger surface.
  */
 export declare function AssetPicker({ value, open, onOpenChange, onChange, accept, }: {
     value: string | null;
     open: boolean;
     onOpenChange: (open: boolean) => void;
     onChange: (assetId: string | null) => void;
-    /** The file input's `accept` attribute for in-picker upload (field-derived). */
+    /** The file input's `accept` attribute for in-picker upload + grid filter (field-derived). */
     accept?: string;
 }): import("react").JSX.Element | null;

package/dist/components/cms/asset-picker.js

@@ -1,20 +1,32 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AlertTriangle, Check, ImageIcon, Maximize2, Minimize2, Search, Upload } from 'lucide-react';
+import { AlertTriangle, Check, ImageIcon, Search, Upload } from 'lucide-react';
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { Button, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, Input, Row, Spacer, Stack, Text, } from '@elytracms/studio/ui';
+import { Button, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, ExpandableSurface, Input, Row, Spacer, Text, } from '@elytracms/studio/ui';
 import { cn } from '@elytracms/studio/lib/utils';
 import { translate } from '@elytracms/studio/lib/i18n';
-import { filterAssets } from '../assets/asset-search.js';
+import { AssetThumb } from '../assets/asset-thumb.js';
 import { AssetsProvider, useAssets, useOptionalAssets } from '../assets/assets-store.js';
-import { newlyAddedAssetIds } from '../assets/focal-point.js';
 import { useCollectionView } from '../collection-view/collection-view-context.js';
+import { ASSET_PICKER_STAGE_PRESET, commitPickerSelection, uploadedSelection, visiblePickerAssets, } from './asset-picker-core.js';
 /**
  * Pick an asset for a CMS `asset` field (brief §8.4, §8.6, EC-075 → EC-152).
  * Backed by the *real* asset library (the assets store over the operations
  * client) — the same records the Assets section lists — not by fixture
- * documents. Selecting stores the asset id on the document field. The dialog
- * is form-width with a maximize toggle and supports drag/click upload that
- * auto-selects the new asset (EC-301).
+ * documents. Selecting stores the asset id on the document field.
+ *
+ * EC-432 (AD-C): the picker is a real MEDIA BROWSER on the {@link ExpandableSurface}
+ * `stage` (`grid` preset — `min(1240px, 94vw)`, near-full height), replacing the
+ * old `max-w-md` (448px) Dialog. It reuses the shipped assets-rail machinery: the
+ * assets store, the EC-152 search, the EC-400 thumb tile ({@link AssetThumb}), and
+ * the upload-then-select path. It is a SELECTION browser, not a form — click = pick
+ * (fires `onChange`, closes) plus the shipped clear/cancel affordances; the
+ * forms-never-modal rule governs document forms and is untouched. Opened from the
+ * expanded rich-text stage toolbar it rides ABOVE that stage on the EC-392 layer
+ * stack — Escape closes the browser first, the rich-text stage stays.
+ *
+ * The component CONTRACT is unchanged (`{ open, onOpenChange, value, accept,
+ * onChange }`) so every call site — asset fields, rich-text image insertion,
+ * editable cells — works with zero edits, just a bigger surface.
  */
 export function AssetPicker({ value, open, onOpenChange, onChange, accept, }) {
     const source = useCollectionView();
@@ -24,21 +36,20 @@ export function AssetPicker({ value, open, onOpenChange, onChange, accept, }) {
     if (!open)
         return null;
     if (ambient) {
-        return (_jsx(AssetPickerDialog, { value: value, onOpenChange: onOpenChange, onChange: onChange, accept: accept }));
+        return (_jsx(AssetPickerStage, { value: value, onOpenChange: onOpenChange, onChange: onChange, accept: accept }));
     }
     if (source.projectId === undefined) {
         // No project scope (fixture-only CMS session): the library is
         // unreachable — say so instead of silently showing nothing.
         return (_jsx(Dialog, { open: true, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "max-w-md", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: translate('cms.asset.pickTitle') }), _jsx(DialogDescription, { children: translate('cms.asset.pickDescription') })] }), _jsxs(Row, { gap: "2", "data-testid": "asset-picker-no-project", children: [_jsx(AlertTriangle, { className: "size-4 text-warning" }), _jsx(Text, { size: "sm", tone: "muted", children: translate('cms.asset.noProject') })] })] }) }));
     }
-    return (_jsx(AssetsProvider, { projectId: source.projectId, children: _jsx(AssetPickerDialog, { value: value, onOpenChange: onOpenChange, onChange: onChange, accept: accept }) }));
+    return (_jsx(AssetsProvider, { projectId: source.projectId, children: _jsx(AssetPickerStage, { value: value, onOpenChange: onOpenChange, onChange: onChange, accept: accept }) }));
 }
-/** The open dialog over a mounted assets store. */
-function AssetPickerDialog({ value, onOpenChange, onChange, accept, }) {
+/** The open media-browser stage over a mounted assets store. */
+function AssetPickerStage({ value, onOpenChange, onChange, accept, }) {
     const store = useAssets();
     // Fresh per open: the picker unmounts entirely while closed.
     const [query, setQuery] = useState('');
-    const [maximized, setMaximized] = useState(false);
     const [dragging, setDragging] = useState(false);
     const fileInputRef = useRef(null);
     // Library ids when an upload started; the effect below diffs against it to
@@ -48,18 +59,17 @@ function AssetPickerDialog({ value, onOpenChange, onChange, accept, }) {
     // child boundaries — the same per-element dragenter/dragleave flicker the field
     // fixes. Only hide when the count returns to zero.
     const dragDepth = useRef(0);
-    const assets = filterAssets(store.assets, query);
+    const assets = visiblePickerAssets(store.assets, query, accept);
     const libraryIds = useMemo(() => store.assets.map((a) => a.id), [store.assets]);
     // Auto-select an asset uploaded from within the picker, then close.
     useEffect(() => {
         if (!pendingRef.current)
             return;
-        const added = newlyAddedAssetIds(pendingRef.current, libraryIds);
-        if (added.length === 0)
+        const picked = uploadedSelection(pendingRef.current, libraryIds);
+        if (picked === null)
             return;
         pendingRef.current = null;
-        onChange(added[0]);
-        onOpenChange(false);
+        commitPickerSelection(picked, { onChange, onOpenChange });
     }, [libraryIds, onChange, onOpenChange]);
     function handleUpload(files) {
         if (files.length === 0)
@@ -67,10 +77,10 @@ function AssetPickerDialog({ value, onOpenChange, onChange, accept, }) {
         pendingRef.current = new Set(libraryIds);
         store.upload(files);
     }
-    // Radix portals the dialog in the DOM, but React synthetic events still bubble up
+    // The stage portals to document.body, but React synthetic events still bubble up
     // the COMPONENT tree — and this picker is rendered as a child of the asset field,
     // which has its own drag-to-upload handlers. Without stopPropagation a drop inside
-    // the dialog would fire BOTH the picker's and the field's `onDrop`, uploading the
+    // the stage would fire BOTH the picker's and the field's `onDrop`, uploading the
     // file twice. Stop every DnD event here so the picker owns its drop entirely.
     function onDragEnter(e) {
         e.preventDefault();
@@ -98,40 +108,14 @@ function AssetPickerDialog({ value, onOpenChange, onChange, accept, }) {
         setDragging(false);
         handleUpload(Array.from(e.dataTransfer.files));
     }
-    return (_jsx(Dialog, { open: true, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: cn(maximized ? 'max-w-[95vw]' : 'max-w-2xl'), onDragEnter: onDragEnter, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, children: [_jsx(DialogHeader, { children: _jsxs(Row, { gap: "2", align: "center", children: [_jsxs(Stack, { gap: "1", className: "min-w-0 flex-1", children: [_jsx(DialogTitle, { children: translate('cms.asset.pickTitle') }), _jsx(DialogDescription, { children: translate('cms.asset.pickDescription') })] }), _jsx(Button, { variant: "ghost", size: "icon", "aria-label": maximized ? translate('cms.asset.restoreDialogSize') : translate('cms.asset.maximizeDialog'), onClick: () => setMaximized((v) => !v), className: "mr-7", children: maximized ? _jsx(Minimize2, { className: "size-4" }) : _jsx(Maximize2, { className: "size-4" }) })] }) }), _jsxs(Row, { gap: "2", align: "center", children: [_jsxs("span", { className: "relative flex-1", children: [_jsx(Search, { className: "pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { autoFocus: true, value: query, onChange: (e) => setQuery(e.target.value), placeholder: translate('cms.asset.searchPlaceholder'), className: "pl-8", "data-testid": "asset-picker-search" })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => fileInputRef.current?.click(), children: [_jsx(Upload, {}), " ", translate('common.upload')] }), _jsx("input", { ref: fileInputRef, type: "file", multiple: true, accept: accept ?? 'image/*', className: "hidden", onChange: (e) => {
+    return (_jsx(ExpandableSurface, { title: translate('cms.asset.pickTitle'), closeLabel: translate('common.close'), variant: "stage", preset: ASSET_PICKER_STAGE_PRESET, onDismiss: () => onOpenChange(false), headerLeading: _jsx(ImageIcon, { className: "size-4 text-muted-foreground", "aria-hidden": true }), children: _jsxs("div", { className: "relative flex min-h-0 flex-1 flex-col gap-3 p-4", onDragEnter: onDragEnter, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, children: [_jsxs(Row, { gap: "2", align: "center", children: [_jsxs("span", { className: "relative flex-1", children: [_jsx(Search, { className: "pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { autoFocus: true, value: query, onChange: (e) => setQuery(e.target.value), placeholder: translate('cms.asset.searchPlaceholder'), className: "pl-8", "data-testid": "asset-picker-search" })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => fileInputRef.current?.click(), children: [_jsx(Upload, {}), " ", translate('common.upload')] }), _jsx("input", { ref: fileInputRef, type: "file", multiple: true, accept: accept ?? 'image/*', className: "hidden", onChange: (e) => {
                                 handleUpload(Array.from(e.target.files ?? []));
                                 e.target.value = '';
-                            } })] }), _jsx("div", { className: cn('grid gap-2 overflow-auto', maximized
-                        ? 'max-h-[78vh] grid-cols-4 lg:grid-cols-6'
-                        : 'max-h-[60vh] grid-cols-3 sm:grid-cols-4'), "data-testid": "asset-picker-grid", children: store.status === 'loading' ? (_jsx(Text, { size: "sm", tone: "muted", className: "col-span-full p-3", children: translate('cms.asset.loading') })) : store.status === 'error' ? (_jsxs(Row, { gap: "2", className: "col-span-full p-3", "data-testid": "asset-picker-error", children: [_jsx(AlertTriangle, { className: "size-4 text-destructive" }), _jsx(Text, { size: "sm", tone: "muted", children: store.errorMessage ?? translate('cms.asset.loadError') })] })) : assets.length === 0 ? (_jsx(Text, { size: "sm", tone: "muted", className: "col-span-full p-3", children: query.trim()
-                            ? translate('cms.asset.noMatches')
-                            : translate('cms.asset.empty') })) : (assets.map((asset) => (_jsx(AssetPickerCard, { asset: asset, selected: asset.id === value, onPick: () => {
-                            onChange(asset.id);
-                            onOpenChange(false);
-                        } }, asset.id)))) }), _jsxs(Row, { gap: "2", children: [_jsx(Spacer, {}), value ? (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => {
-                                onChange(null);
-                                onOpenChange(false);
-                            }, children: translate('common.clear') })) : null] }), dragging ? (_jsx("div", { className: "pointer-events-none absolute inset-0 z-10 grid place-items-center rounded-xl border-2 border-dashed border-primary bg-background/85", children: _jsxs(Row, { gap: "2", align: "center", children: [_jsx(Upload, { className: "size-5 text-primary" }), _jsx(Text, { className: "font-medium", children: translate('cms.asset.dropToUpload') })] }) })) : null] }) }));
+                            } })] }), _jsx("div", { className: "grid min-h-0 flex-1 auto-rows-min grid-cols-2 gap-2 overflow-y-auto sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5", "data-testid": "asset-picker-grid", children: store.status === 'loading' ? (_jsx(Text, { size: "sm", tone: "muted", className: "col-span-full p-3", children: translate('cms.asset.loading') })) : store.status === 'error' ? (_jsxs(Row, { gap: "2", className: "col-span-full p-3", "data-testid": "asset-picker-error", children: [_jsx(AlertTriangle, { className: "size-4 text-destructive" }), _jsx(Text, { size: "sm", tone: "muted", children: store.errorMessage ?? translate('cms.asset.loadError') })] })) : assets.length === 0 ? (_jsx(Text, { size: "sm", tone: "muted", className: "col-span-full p-3", children: query.trim() ? translate('cms.asset.noMatches') : translate('cms.asset.empty') })) : (assets.map((asset) => (_jsx(AssetPickerCard, { asset: asset, selected: asset.id === value, onPick: () => commitPickerSelection(asset.id, { onChange, onOpenChange }) }, asset.id)))) }), _jsxs(Row, { gap: "2", children: [_jsx(Spacer, {}), value ? (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => commitPickerSelection(null, { onChange, onOpenChange }), children: translate('common.clear') })) : null] }), dragging ? (_jsx("div", { className: "pointer-events-none absolute inset-0 z-10 grid place-items-center rounded-lg border-2 border-dashed border-primary bg-background/85", children: _jsxs(Row, { gap: "2", align: "center", children: [_jsx(Upload, { className: "size-5 text-primary" }), _jsx(Text, { className: "font-medium", children: translate('cms.asset.dropToUpload') })] }) })) : null] }) }));
 }
-/** One selectable asset: thumbnail + title/filename + alt text. The internal
- *  asset id is intentionally not shown — it's noise to editors (EC-301). */
+/** One selectable asset: EC-400 thumb tile + title/filename + alt text. The
+ *  internal asset id is intentionally not shown — it's noise to editors (EC-301). */
 function AssetPickerCard({ asset, selected, onPick, }) {
-    return (_jsxs("button", { type: "button", onClick: onPick, className: cn('flex flex-col gap-1.5 rounded-lg border p-2 text-left transition-colors', selected ? 'border-primary bg-primary/5' : 'border-border hover:bg-muted'), "data-testid": "asset-picker-card", children: [_jsx(PickerThumbnail, { asset: asset }), _jsxs(Row, { gap: "1", children: [_jsx(Text, { size: "xs", className: "min-w-0 flex-1 truncate font-medium", children: asset.title ?? asset.filename }), selected ? _jsx(Check, { className: "size-3.5 text-primary" }) : null] }), _jsx(Text, { size: "xs", tone: asset.alt ? 'muted' : 'subtle', className: "truncate", children: asset.alt ?? translate('cms.asset.noAltText') })] }));
-}
-/** Image preview: the EC-400 downscaled thumb when resolvable, else the full
- *  original; icon fallback for other types. In-memory/opaque locators
- *  (memory://, convex://) are not fetchable by <img>, so those degrade too. */
-function PickerThumbnail({ asset }) {
-    const isImage = asset.contentType.startsWith('image/');
-    const thumbUrl = asset.thumb?.url;
-    const src = thumbUrl?.startsWith('http') === true
-        ? thumbUrl
-        : asset.url?.startsWith('http') === true
-            ? asset.url
-            : undefined;
-    if (isImage && src) {
-        return (_jsx("img", { src: src, alt: asset.alt ?? asset.filename, className: "aspect-video w-full rounded-md bg-muted object-cover" }));
-    }
-    return (_jsx("span", { className: "grid aspect-video w-full place-items-center rounded-md bg-muted text-muted-foreground", children: _jsx(ImageIcon, { className: "size-6" }) }));
+    return (_jsxs("button", { type: "button", onClick: onPick, className: cn('flex flex-col gap-1.5 rounded-lg border p-2 text-left transition-colors', selected ? 'border-primary bg-primary/5' : 'border-border hover:bg-muted'), "data-testid": "asset-picker-card", "aria-pressed": selected, children: [_jsxs("span", { className: "relative block", children: [_jsx(AssetThumb, { record: asset, className: "aspect-video w-full" }), selected ? (_jsx("span", { className: "absolute right-1 top-1 grid size-5 place-items-center rounded-full bg-primary text-primary-foreground shadow", children: _jsx(Check, { className: "size-3" }) })) : null] }), _jsx(Text, { size: "xs", className: "min-w-0 truncate font-medium", children: asset.title ?? asset.filename }), _jsx(Text, { size: "xs", tone: asset.alt ? 'muted' : 'subtle', className: "truncate", children: asset.alt ?? translate('cms.asset.noAltText') })] }));
 }
 //# sourceMappingURL=asset-picker.js.map

package/dist/components/cms/asset-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"asset-picker.js","sourceRoot":"","sources":["../../../src/components/cms/asset-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AlertTriangle, Check, ImageIcon, Maximize2, Minimize2, Search, Upload } from 'lucide-react'\nimport { useEffect, useMemo, useRef, useState } from 'react'\nimport type { AssetRecord } from '@elytracms/core/persistence'\nimport {\n  Button,\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  Input,\n  Row,\n  Spacer,\n  Stack,\n  Text,\n} from '@elytracms/studio/ui'\nimport { cn } from '@elytracms/studio/lib/utils'\nimport { translate } from '@elytracms/studio/lib/i18n'\nimport { filterAssets } from '../assets/asset-search'\nimport { AssetsProvider, useAssets, useOptionalAssets } from '../assets/assets-store'\nimport { newlyAddedAssetIds } from '../assets/focal-point'\nimport { useCollectionView } from '../collection-view/collection-view-context'\n\n/**\n * Pick an asset for a CMS `asset` field (brief §8.4, §8.6, EC-075 → EC-152).\n * Backed by the *real* asset library (the assets store over the operations\n * client) — the same records the Assets section lists — not by fixture\n * documents. Selecting stores the asset id on the document field. The dialog\n * is form-width with a maximize toggle and supports drag/click upload that\n * auto-selects the new asset (EC-301).\n */\nexport function AssetPicker({\n  value,\n  open,\n  onOpenChange,\n  onChange,\n  accept,\n}: {\n  value: string | null\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  onChange: (assetId: string | null) => void\n  /** The file input's `accept` attribute for in-picker upload (field-derived). */\n  accept?: string\n}) {\n  const source = useCollectionView()\n  const ambient = useOptionalAssets()\n  // Mount nothing while closed: the self-provided assets store would\n  // otherwise load the library eagerly for every asset field on the form.\n  if (!open) return null\n  if (ambient) {\n    return (\n      <AssetPickerDialog value={value} onOpenChange={onOpenChange} onChange={onChange} accept={accept} />\n    )\n  }\n  if (source.projectId === undefined) {\n    // No project scope (fixture-only CMS session): the library is\n    // unreachable — say so instead of silently showing nothing.\n    return (\n      <Dialog open onOpenChange={onOpenChange}>\n        <DialogContent className=\"max-w-md\">\n          <DialogHeader>\n            <DialogTitle>{translate('cms.asset.pickTitle')}</DialogTitle>\n            <DialogDescription>{translate('cms.asset.pickDescription')}</DialogDescription>\n          </DialogHeader>\n          <Row gap=\"2\" data-testid=\"asset-picker-no-project\">\n            <AlertTriangle className=\"size-4 text-warning\" />\n            <Text size=\"sm\" tone=\"muted\">\n              {translate('cms.asset.noProject')}\n            </Text>\n          </Row>\n        </DialogContent>\n      </Dialog>\n    )\n  }\n  return (\n    <AssetsProvider projectId={source.projectId}>\n      <AssetPickerDialog value={value} onOpenChange={onOpenChange} onChange={onChange} accept={accept} />\n    </AssetsProvider>\n  )\n}\n\n/** The open dialog over a mounted assets store. */\nfunction AssetPickerDialog({\n  value,\n  onOpenChange,\n  onChange,\n  accept,\n}: {\n  value: string | null\n  onOpenChange: (open: boolean) => void\n  onChange: (assetId: string | null) => void\n  accept?: string\n}) {\n  const store = useAssets()\n  // Fresh per open: the picker unmounts entirely while closed.\n  const [query, setQuery] = useState('')\n  const [maximized, setMaximized] = useState(false)\n  const [dragging, setDragging] = useState(false)\n  const fileInputRef = useRef<HTMLInputElement>(null)\n  // Library ids when an upload started; the effect below diffs against it to\n  // learn the new asset and select it (the `upload()` API returns nothing).\n  const pendingRef = useRef<ReadonlySet<string> | null>(null)\n  // Drag depth (EC-301): keeps the drop overlay steady as the pointer crosses\n  // child boundaries — the same per-element dragenter/dragleave flicker the field\n  // fixes. Only hide when the count returns to zero.\n  const dragDepth = useRef(0)\n  const assets = filterAssets(store.assets, query)\n  const libraryIds = useMemo(() => store.assets.map((a) => a.id), [store.assets])\n\n  // Auto-select an asset uploaded from within the picker, then close.\n  useEffect(() => {\n    if (!pendingRef.current) return\n    const added = newlyAddedAssetIds(pendingRef.current, libraryIds)\n    if (added.length === 0) return\n    pendingRef.current = null\n    onChange(added[0]!)\n    onOpenChange(false)\n  }, [libraryIds, onChange, onOpenChange])\n\n  function handleUpload(files: File[]) {\n    if (files.length === 0) return\n    pendingRef.current = new Set(libraryIds)\n    store.upload(files)\n  }\n  // Radix portals the dialog in the DOM, but React synthetic events still bubble up\n  // the COMPONENT tree — and this picker is rendered as a child of the asset field,\n  // which has its own drag-to-upload handlers. Without stopPropagation a drop inside\n  // the dialog would fire BOTH the picker's and the field's `onDrop`, uploading the\n  // file twice. Stop every DnD event here so the picker owns its drop entirely.\n  function onDragEnter(e: React.DragEvent) {\n    e.preventDefault()\n    e.stopPropagation()\n    dragDepth.current += 1\n    if (!dragging) setDragging(true)\n  }\n  function onDragOver(e: React.DragEvent) {\n    e.preventDefault()\n    e.stopPropagation()\n  }\n  function onDragLeave(e: React.DragEvent) {\n    e.stopPropagation()\n    dragDepth.current -= 1\n    if (dragDepth.current <= 0) {\n      dragDepth.current = 0\n      setDragging(false)\n    }\n  }\n  function onDrop(e: React.DragEvent) {\n    e.preventDefault()\n    e.stopPropagation()\n    dragDepth.current = 0\n    setDragging(false)\n    handleUpload(Array.from(e.dataTransfer.files))\n  }\n\n  return (\n    <Dialog open onOpenChange={onOpenChange}>\n      <DialogContent\n        className={cn(maximized ? 'max-w-[95vw]' : 'max-w-2xl')}\n        onDragEnter={onDragEnter}\n        onDragOver={onDragOver}\n        onDragLeave={onDragLeave}\n        onDrop={onDrop}\n      >\n        <DialogHeader>\n          <Row gap=\"2\" align=\"center\">\n            <Stack gap=\"1\" className=\"min-w-0 flex-1\">\n              <DialogTitle>{translate('cms.asset.pickTitle')}</DialogTitle>\n              <DialogDescription>{translate('cms.asset.pickDescription')}</DialogDescription>\n            </Stack>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              aria-label={maximized ? translate('cms.asset.restoreDialogSize') : translate('cms.asset.maximizeDialog')}\n              onClick={() => setMaximized((v) => !v)}\n              className=\"mr-7\"\n            >\n              {maximized ? <Minimize2 className=\"size-4\" /> : <Maximize2 className=\"size-4\" />}\n            </Button>\n          </Row>\n        </DialogHeader>\n\n        <Row gap=\"2\" align=\"center\">\n          <span className=\"relative flex-1\">\n            <Search className=\"pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground\" />\n            <Input\n              autoFocus\n              value={query}\n              onChange={(e) => setQuery(e.target.value)}\n              placeholder={translate('cms.asset.searchPlaceholder')}\n              className=\"pl-8\"\n              data-testid=\"asset-picker-search\"\n            />\n          </span>\n          <Button variant=\"outline\" size=\"sm\" onClick={() => fileInputRef.current?.click()}>\n            <Upload /> {translate('common.upload')}\n          </Button>\n          <input\n            ref={fileInputRef}\n            type=\"file\"\n            multiple\n            accept={accept ?? 'image/*'}\n            className=\"hidden\"\n            onChange={(e) => {\n              handleUpload(Array.from(e.target.files ?? []))\n              e.target.value = ''\n            }}\n          />\n        </Row>\n\n        <div\n          className={cn(\n            'grid gap-2 overflow-auto',\n            maximized\n              ? 'max-h-[78vh] grid-cols-4 lg:grid-cols-6'\n              : 'max-h-[60vh] grid-cols-3 sm:grid-cols-4',\n          )}\n          data-testid=\"asset-picker-grid\"\n        >\n          {store.status === 'loading' ? (\n            <Text size=\"sm\" tone=\"muted\" className=\"col-span-full p-3\">\n              {translate('cms.asset.loading')}\n            </Text>\n          ) : store.status === 'error' ? (\n            <Row gap=\"2\" className=\"col-span-full p-3\" data-testid=\"asset-picker-error\">\n              <AlertTriangle className=\"size-4 text-destructive\" />\n              <Text size=\"sm\" tone=\"muted\">\n                {store.errorMessage ?? translate('cms.asset.loadError')}\n              </Text>\n            </Row>\n          ) : assets.length === 0 ? (\n            <Text size=\"sm\" tone=\"muted\" className=\"col-span-full p-3\">\n              {query.trim()\n                ? translate('cms.asset.noMatches')\n                : translate('cms.asset.empty')}\n            </Text>\n          ) : (\n            assets.map((asset) => (\n              <AssetPickerCard\n                key={asset.id}\n                asset={asset}\n                selected={asset.id === value}\n                onPick={() => {\n                  onChange(asset.id)\n                  onOpenChange(false)\n                }}\n              />\n            ))\n          )}\n        </div>\n\n        <Row gap=\"2\">\n          <Spacer />\n          {value ? (\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              onClick={() => {\n                onChange(null)\n                onOpenChange(false)\n              }}\n            >\n              {translate('common.clear')}\n            </Button>\n          ) : null}\n        </Row>\n\n        {dragging ? (\n          <div className=\"pointer-events-none absolute inset-0 z-10 grid place-items-center rounded-xl border-2 border-dashed border-primary bg-background/85\">\n            <Row gap=\"2\" align=\"center\">\n              <Upload className=\"size-5 text-primary\" />\n              <Text className=\"font-medium\">{translate('cms.asset.dropToUpload')}</Text>\n            </Row>\n          </div>\n        ) : null}\n      </DialogContent>\n    </Dialog>\n  )\n}\n\n/** One selectable asset: thumbnail + title/filename + alt text. The internal\n *  asset id is intentionally not shown — it's noise to editors (EC-301). */\nfunction AssetPickerCard({\n  asset,\n  selected,\n  onPick,\n}: {\n  asset: AssetRecord\n  selected: boolean\n  onPick: () => void\n}) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onPick}\n      className={cn(\n        'flex flex-col gap-1.5 rounded-lg border p-2 text-left transition-colors',\n        selected ? 'border-primary bg-primary/5' : 'border-border hover:bg-muted',\n      )}\n      data-testid=\"asset-picker-card\"\n    >\n      <PickerThumbnail asset={asset} />\n      <Row gap=\"1\">\n        <Text size=\"xs\" className=\"min-w-0 flex-1 truncate font-medium\">\n          {asset.title ?? asset.filename}\n        </Text>\n        {selected ? <Check className=\"size-3.5 text-primary\" /> : null}\n      </Row>\n      <Text size=\"xs\" tone={asset.alt ? 'muted' : 'subtle'} className=\"truncate\">\n        {asset.alt ?? translate('cms.asset.noAltText')}\n      </Text>\n    </button>\n  )\n}\n\n/** Image preview: the EC-400 downscaled thumb when resolvable, else the full\n *  original; icon fallback for other types. In-memory/opaque locators\n *  (memory://, convex://) are not fetchable by <img>, so those degrade too. */\nfunction PickerThumbnail({ asset }: { asset: AssetRecord }) {\n  const isImage = asset.contentType.startsWith('image/')\n  const thumbUrl = asset.thumb?.url\n  const src =\n    thumbUrl?.startsWith('http') === true\n      ? thumbUrl\n      : asset.url?.startsWith('http') === true\n        ? asset.url\n        : undefined\n  if (isImage && src) {\n    return (\n      <img\n        src={src}\n        alt={asset.alt ?? asset.filename}\n        className=\"aspect-video w-full rounded-md bg-muted object-cover\"\n      />\n    )\n  }\n  return (\n    <span className=\"grid aspect-video w-full place-items-center rounded-md bg-muted text-muted-foreground\">\n      <ImageIcon className=\"size-6\" />\n    </span>\n  )\n}\n"]}
+{"version":3,"file":"asset-picker.js","sourceRoot":"","sources":["../../../src/components/cms/asset-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AlertTriangle, Check, ImageIcon, Search, Upload } from 'lucide-react'\nimport { useEffect, useMemo, useRef, useState } from 'react'\nimport type { AssetRecord } from '@elytracms/core/persistence'\nimport {\n  Button,\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  ExpandableSurface,\n  Input,\n  Row,\n  Spacer,\n  Text,\n} from '@elytracms/studio/ui'\nimport { cn } from '@elytracms/studio/lib/utils'\nimport { translate } from '@elytracms/studio/lib/i18n'\nimport { AssetThumb } from '../assets/asset-thumb'\nimport { AssetsProvider, useAssets, useOptionalAssets } from '../assets/assets-store'\nimport { useCollectionView } from '../collection-view/collection-view-context'\nimport {\n  ASSET_PICKER_STAGE_PRESET,\n  commitPickerSelection,\n  uploadedSelection,\n  visiblePickerAssets,\n} from './asset-picker-core'\n\n/**\n * Pick an asset for a CMS `asset` field (brief §8.4, §8.6, EC-075 → EC-152).\n * Backed by the *real* asset library (the assets store over the operations\n * client) — the same records the Assets section lists — not by fixture\n * documents. Selecting stores the asset id on the document field.\n *\n * EC-432 (AD-C): the picker is a real MEDIA BROWSER on the {@link ExpandableSurface}\n * `stage` (`grid` preset — `min(1240px, 94vw)`, near-full height), replacing the\n * old `max-w-md` (448px) Dialog. It reuses the shipped assets-rail machinery: the\n * assets store, the EC-152 search, the EC-400 thumb tile ({@link AssetThumb}), and\n * the upload-then-select path. It is a SELECTION browser, not a form — click = pick\n * (fires `onChange`, closes) plus the shipped clear/cancel affordances; the\n * forms-never-modal rule governs document forms and is untouched. Opened from the\n * expanded rich-text stage toolbar it rides ABOVE that stage on the EC-392 layer\n * stack — Escape closes the browser first, the rich-text stage stays.\n *\n * The component CONTRACT is unchanged (`{ open, onOpenChange, value, accept,\n * onChange }`) so every call site — asset fields, rich-text image insertion,\n * editable cells — works with zero edits, just a bigger surface.\n */\nexport function AssetPicker({\n  value,\n  open,\n  onOpenChange,\n  onChange,\n  accept,\n}: {\n  value: string | null\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  onChange: (assetId: string | null) => void\n  /** The file input's `accept` attribute for in-picker upload + grid filter (field-derived). */\n  accept?: string\n}) {\n  const source = useCollectionView()\n  const ambient = useOptionalAssets()\n  // Mount nothing while closed: the self-provided assets store would\n  // otherwise load the library eagerly for every asset field on the form.\n  if (!open) return null\n  if (ambient) {\n    return (\n      <AssetPickerStage value={value} onOpenChange={onOpenChange} onChange={onChange} accept={accept} />\n    )\n  }\n  if (source.projectId === undefined) {\n    // No project scope (fixture-only CMS session): the library is\n    // unreachable — say so instead of silently showing nothing.\n    return (\n      <Dialog open onOpenChange={onOpenChange}>\n        <DialogContent className=\"max-w-md\">\n          <DialogHeader>\n            <DialogTitle>{translate('cms.asset.pickTitle')}</DialogTitle>\n            <DialogDescription>{translate('cms.asset.pickDescription')}</DialogDescription>\n          </DialogHeader>\n          <Row gap=\"2\" data-testid=\"asset-picker-no-project\">\n            <AlertTriangle className=\"size-4 text-warning\" />\n            <Text size=\"sm\" tone=\"muted\">\n              {translate('cms.asset.noProject')}\n            </Text>\n          </Row>\n        </DialogContent>\n      </Dialog>\n    )\n  }\n  return (\n    <AssetsProvider projectId={source.projectId}>\n      <AssetPickerStage value={value} onOpenChange={onOpenChange} onChange={onChange} accept={accept} />\n    </AssetsProvider>\n  )\n}\n\n/** The open media-browser stage over a mounted assets store. */\nfunction AssetPickerStage({\n  value,\n  onOpenChange,\n  onChange,\n  accept,\n}: {\n  value: string | null\n  onOpenChange: (open: boolean) => void\n  onChange: (assetId: string | null) => void\n  accept?: string\n}) {\n  const store = useAssets()\n  // Fresh per open: the picker unmounts entirely while closed.\n  const [query, setQuery] = useState('')\n  const [dragging, setDragging] = useState(false)\n  const fileInputRef = useRef<HTMLInputElement>(null)\n  // Library ids when an upload started; the effect below diffs against it to\n  // learn the new asset and select it (the `upload()` API returns nothing).\n  const pendingRef = useRef<ReadonlySet<string> | null>(null)\n  // Drag depth (EC-301): keeps the drop overlay steady as the pointer crosses\n  // child boundaries — the same per-element dragenter/dragleave flicker the field\n  // fixes. Only hide when the count returns to zero.\n  const dragDepth = useRef(0)\n  const assets = visiblePickerAssets(store.assets, query, accept)\n  const libraryIds = useMemo(() => store.assets.map((a) => a.id), [store.assets])\n\n  // Auto-select an asset uploaded from within the picker, then close.\n  useEffect(() => {\n    if (!pendingRef.current) return\n    const picked = uploadedSelection(pendingRef.current, libraryIds)\n    if (picked === null) return\n    pendingRef.current = null\n    commitPickerSelection(picked, { onChange, onOpenChange })\n  }, [libraryIds, onChange, onOpenChange])\n\n  function handleUpload(files: File[]) {\n    if (files.length === 0) return\n    pendingRef.current = new Set(libraryIds)\n    store.upload(files)\n  }\n  // The stage portals to document.body, but React synthetic events still bubble up\n  // the COMPONENT tree — and this picker is rendered as a child of the asset field,\n  // which has its own drag-to-upload handlers. Without stopPropagation a drop inside\n  // the stage would fire BOTH the picker's and the field's `onDrop`, uploading the\n  // file twice. Stop every DnD event here so the picker owns its drop entirely.\n  function onDragEnter(e: React.DragEvent) {\n    e.preventDefault()\n    e.stopPropagation()\n    dragDepth.current += 1\n    if (!dragging) setDragging(true)\n  }\n  function onDragOver(e: React.DragEvent) {\n    e.preventDefault()\n    e.stopPropagation()\n  }\n  function onDragLeave(e: React.DragEvent) {\n    e.stopPropagation()\n    dragDepth.current -= 1\n    if (dragDepth.current <= 0) {\n      dragDepth.current = 0\n      setDragging(false)\n    }\n  }\n  function onDrop(e: React.DragEvent) {\n    e.preventDefault()\n    e.stopPropagation()\n    dragDepth.current = 0\n    setDragging(false)\n    handleUpload(Array.from(e.dataTransfer.files))\n  }\n\n  return (\n    <ExpandableSurface\n      title={translate('cms.asset.pickTitle')}\n      closeLabel={translate('common.close')}\n      variant=\"stage\"\n      preset={ASSET_PICKER_STAGE_PRESET}\n      onDismiss={() => onOpenChange(false)}\n      headerLeading={<ImageIcon className=\"size-4 text-muted-foreground\" aria-hidden />}\n    >\n      <div\n        className=\"relative flex min-h-0 flex-1 flex-col gap-3 p-4\"\n        onDragEnter={onDragEnter}\n        onDragOver={onDragOver}\n        onDragLeave={onDragLeave}\n        onDrop={onDrop}\n      >\n        <Row gap=\"2\" align=\"center\">\n          <span className=\"relative flex-1\">\n            <Search className=\"pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground\" />\n            <Input\n              autoFocus\n              value={query}\n              onChange={(e) => setQuery(e.target.value)}\n              placeholder={translate('cms.asset.searchPlaceholder')}\n              className=\"pl-8\"\n              data-testid=\"asset-picker-search\"\n            />\n          </span>\n          <Button variant=\"outline\" size=\"sm\" onClick={() => fileInputRef.current?.click()}>\n            <Upload /> {translate('common.upload')}\n          </Button>\n          <input\n            ref={fileInputRef}\n            type=\"file\"\n            multiple\n            accept={accept ?? 'image/*'}\n            className=\"hidden\"\n            onChange={(e) => {\n              handleUpload(Array.from(e.target.files ?? []))\n              e.target.value = ''\n            }}\n          />\n        </Row>\n\n        <div\n          className=\"grid min-h-0 flex-1 auto-rows-min grid-cols-2 gap-2 overflow-y-auto sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5\"\n          data-testid=\"asset-picker-grid\"\n        >\n          {store.status === 'loading' ? (\n            <Text size=\"sm\" tone=\"muted\" className=\"col-span-full p-3\">\n              {translate('cms.asset.loading')}\n            </Text>\n          ) : store.status === 'error' ? (\n            <Row gap=\"2\" className=\"col-span-full p-3\" data-testid=\"asset-picker-error\">\n              <AlertTriangle className=\"size-4 text-destructive\" />\n              <Text size=\"sm\" tone=\"muted\">\n                {store.errorMessage ?? translate('cms.asset.loadError')}\n              </Text>\n            </Row>\n          ) : assets.length === 0 ? (\n            <Text size=\"sm\" tone=\"muted\" className=\"col-span-full p-3\">\n              {query.trim() ? translate('cms.asset.noMatches') : translate('cms.asset.empty')}\n            </Text>\n          ) : (\n            assets.map((asset) => (\n              <AssetPickerCard\n                key={asset.id}\n                asset={asset}\n                selected={asset.id === value}\n                onPick={() => commitPickerSelection(asset.id, { onChange, onOpenChange })}\n              />\n            ))\n          )}\n        </div>\n\n        <Row gap=\"2\">\n          <Spacer />\n          {value ? (\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              onClick={() => commitPickerSelection(null, { onChange, onOpenChange })}\n            >\n              {translate('common.clear')}\n            </Button>\n          ) : null}\n        </Row>\n\n        {dragging ? (\n          <div className=\"pointer-events-none absolute inset-0 z-10 grid place-items-center rounded-lg border-2 border-dashed border-primary bg-background/85\">\n            <Row gap=\"2\" align=\"center\">\n              <Upload className=\"size-5 text-primary\" />\n              <Text className=\"font-medium\">{translate('cms.asset.dropToUpload')}</Text>\n            </Row>\n          </div>\n        ) : null}\n      </div>\n    </ExpandableSurface>\n  )\n}\n\n/** One selectable asset: EC-400 thumb tile + title/filename + alt text. The\n *  internal asset id is intentionally not shown — it's noise to editors (EC-301). */\nfunction AssetPickerCard({\n  asset,\n  selected,\n  onPick,\n}: {\n  asset: AssetRecord\n  selected: boolean\n  onPick: () => void\n}) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onPick}\n      className={cn(\n        'flex flex-col gap-1.5 rounded-lg border p-2 text-left transition-colors',\n        selected ? 'border-primary bg-primary/5' : 'border-border hover:bg-muted',\n      )}\n      data-testid=\"asset-picker-card\"\n      aria-pressed={selected}\n    >\n      <span className=\"relative block\">\n        <AssetThumb record={asset} className=\"aspect-video w-full\" />\n        {selected ? (\n          <span className=\"absolute right-1 top-1 grid size-5 place-items-center rounded-full bg-primary text-primary-foreground shadow\">\n            <Check className=\"size-3\" />\n          </span>\n        ) : null}\n      </span>\n      <Text size=\"xs\" className=\"min-w-0 truncate font-medium\">\n        {asset.title ?? asset.filename}\n      </Text>\n      <Text size=\"xs\" tone={asset.alt ? 'muted' : 'subtle'} className=\"truncate\">\n        {asset.alt ?? translate('cms.asset.noAltText')}\n      </Text>\n    </button>\n  )\n}\n"]}