@elytracms/studio 0.0.21 → 0.0.23

package/convex/assets.ts

@@ -26,6 +26,8 @@ export const upsert = mutation({
     storageKey: v.string(),
     url: v.optional(v.string()),
     focalPoint: v.optional(v.object({ x: v.number(), y: v.number() })),
+    /** Schema-driven asset metadata bag (EC-301): alt, copyright, credit, …. */
+    meta: v.optional(v.any()),
     createdAt: v.string(),
     updatedAt: v.string(),
   },

package/convex/content.ts

@@ -209,6 +209,12 @@ export async function createContent(
       ...(row.width !== undefined ? { width: row.width } : {}),
       ...(row.height !== undefined ? { height: row.height } : {}),
       ...(row.alt !== undefined ? { alt: row.alt } : {}),
+      // EC-301: focalPoint (EC-230) and the schema-driven metadata bag must reach
+      // delivery — both were dropped here, so a studio-set hotspot/metadata never
+      // made it into the LIVE snapshot (only the studio canvas, which reads records
+      // directly, showed them).
+      ...(row.focalPoint !== undefined ? { focalPoint: row.focalPoint } : {}),
+      ...(row.meta !== undefined ? { meta: row.meta } : {}),
       storageKey: row.storageKey,
       ...(url !== undefined ? { url } : {}),
       createdAt: row.createdAt,

package/convex/delivery.ts

@@ -178,6 +178,11 @@ export async function loadSnapshot(
       ...(row.width !== undefined ? { width: row.width } : {}),
       ...(row.height !== undefined ? { height: row.height } : {}),
       ...(row.alt !== undefined ? { alt: row.alt } : {}),
+      // EC-301: thread focalPoint (EC-230) + the schema-driven metadata bag into
+      // the delivery snapshot — both were omitted here, dropping a studio-set
+      // hotspot/metadata on the LIVE path.
+      ...(row.focalPoint !== undefined ? { focalPoint: row.focalPoint } : {}),
+      ...(row.meta !== undefined ? { meta: row.meta } : {}),
       storageKey: row.storageKey,
       ...(url !== undefined ? { url } : {}),
       createdAt: row.createdAt,

package/convex/schema.ts

@@ -126,6 +126,8 @@ export default defineSchema({
     url: v.optional(v.string()),
     /** Normalized image focal point `{ x, y }` in 0–1 (EC-230); CSS object-position. */
     focalPoint: v.optional(v.object({ x: v.number(), y: v.number() })),
+    /** Schema-driven asset metadata bag (EC-301): alt, copyright, credit, …. */
+    meta: v.optional(v.any()),
     createdAt: v.string(),
     updatedAt: v.string(),
   }).index('by_asset', ['assetId']),

package/dist/components/assets/asset-metadata.d.ts

@@ -23,6 +23,13 @@ export interface AssetMetadataPatch {
         x: number;
         y: number;
     } | null;
+    /**
+     * Schema-driven asset metadata bag (EC-301): alt, copyright, credit, … keyed by
+     * the asset collection's `fields`. A present object **replaces** the whole bag
+     * (the image options dialog holds the complete edited meta); an absent key
+     * leaves the current bag untouched.
+     */
+    meta?: Record<string, unknown>;
 }
 /** The full upsert input that re-states `current` with the patch applied. */
 export declare function assetMetadataUpsertInput(current: AssetRecord, patch: AssetMetadataPatch): NewAssetInput;

package/dist/components/assets/asset-metadata.js

@@ -11,6 +11,8 @@ export function assetMetadataUpsertInput(current, patch) {
     const title = mergeField(patch.title, 'title' in patch, current.title);
     // present `{x,y}` sets, present `null` clears, absent keeps the current point.
     const focalPoint = 'focalPoint' in patch ? (patch.focalPoint ?? undefined) : current.focalPoint;
+    // present object replaces the whole bag; absent keeps the current one (EC-301).
+    const meta = 'meta' in patch ? patch.meta : current.meta;
     return {
         id: current.id,
         filename: current.filename,
@@ -23,6 +25,7 @@ export function assetMetadataUpsertInput(current, patch) {
         ...(alt !== undefined ? { alt } : {}),
         ...(title !== undefined ? { title } : {}),
         ...(focalPoint !== undefined ? { focalPoint } : {}),
+        ...(meta !== undefined ? { meta } : {}),
     };
 }
 /**

package/dist/components/assets/asset-metadata.js.map

@@ -1 +1 @@
-{"version":3,"file":"asset-metadata.js","sourceRoot":"","sources":["../../../src/components/assets/asset-metadata.ts"],"names":[],"mappings":"AA0BA,qFAAqF;AACrF,SAAS,UAAU,CACjB,UAA8B,EAC9B,WAAoB,EACpB,YAAgC;IAEhC,IAAI,CAAC,WAAW;QAAE,OAAO,YAAY,CAAA;IACrC,MAAM,OAAO,GAAG,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,CAAA;IACxC,OAAO,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAA;AACjD,CAAC;AAED,6EAA6E;AAC7E,MAAM,UAAU,wBAAwB,CACtC,OAAoB,EACpB,KAAyB;IAEzB,MAAM,GAAG,GAAG,UAAU,CAAC,KAAK,CAAC,GAAG,EAAE,KAAK,IAAI,KAAK,EAAE,OAAO,CAAC,GAAG,CAAC,CAAA;IAC9D,MAAM,KAAK,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,EAAE,OAAO,IAAI,KAAK,EAAE,OAAO,CAAC,KAAK,CAAC,CAAA;IACtE,+EAA+E;IAC/E,MAAM,UAAU,GAAG,YAAY,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,UAAU,IAAI,SAAS,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,UAAU,CAAA;IAC/F,OAAO;QACL,EAAE,EAAE,OAAO,CAAC,EAAE;QACd,QAAQ,EAAE,OAAO,CAAC,QAAQ;QAC1B,WAAW,EAAE,OAAO,CAAC,WAAW;QAChC,QAAQ,EAAE,OAAO,CAAC,QAAQ;QAC1B,UAAU,EAAE,OAAO,CAAC,UAAU;QAC9B,GAAG,CAAC,OAAO,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QAChE,GAAG,CAAC,OAAO,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QACnE,GAAG,CAAC,OAAO,CAAC,GAAG,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QAC1D,GAAG,CAAC,GAAG,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QACrC,GAAG,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QACzC,GAAG,CAAC,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;KACpD,CAAA;AACH,CAAC;AAMD;;;;GAIG;AACH,MAAM,CAAC,KAAK,UAAU,mBAAmB,CACvC,IAAiC,EACjC,SAAiB,EACjB,OAAe,EACf,KAAyB;IAEzB,IAAI,CAAC;QACH,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC,CAAA;QAC9D,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,SAAS,EAAE,wBAAwB,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAA;QAChG,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,CAAA;IAC5B,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAA;IACvF,CAAC;AACH,CAAC","sourcesContent":["import type { AssetRecord, AssetRepository, NewAssetInput } from '@elytracms/core/persistence'\n\n/**\n * Asset metadata editing (EC-152). A patch is applied through the\n * {@link AssetRepository} interface — in the studio that is the EC-141\n * operations facade, so every edit runs the `assets.upsert` command\n * (validate → authorize → mutate → event). Pure orchestration; injectable\n * for tests.\n */\n\nexport interface AssetMetadataPatch {\n  /**\n   * New alt text. A present key overwrites; a trimmed-empty string clears\n   * the field. An absent key leaves the current value untouched.\n   */\n  alt?: string\n  /** New display title; same present/empty/absent semantics as `alt`. */\n  title?: string\n  /**\n   * New focal point (EC-248), the normalized 0–1 hotspot threaded to delivery's\n   * `object-position` (EC-230). A present `{x,y}` sets it, `null` clears it, an\n   * absent key leaves the current value untouched.\n   */\n  focalPoint?: { x: number; y: number } | null\n}\n\n/** Merge one patch field: present+empty clears, present+value sets, absent keeps. */\nfunction mergeField(\n  patchValue: string | undefined,\n  patchHasKey: boolean,\n  currentValue: string | undefined,\n): string | undefined {\n  if (!patchHasKey) return currentValue\n  const trimmed = patchValue?.trim() ?? ''\n  return trimmed.length > 0 ? trimmed : undefined\n}\n\n/** The full upsert input that re-states `current` with the patch applied. */\nexport function assetMetadataUpsertInput(\n  current: AssetRecord,\n  patch: AssetMetadataPatch,\n): NewAssetInput {\n  const alt = mergeField(patch.alt, 'alt' in patch, current.alt)\n  const title = mergeField(patch.title, 'title' in patch, current.title)\n  // present `{x,y}` sets, present `null` clears, absent keeps the current point.\n  const focalPoint = 'focalPoint' in patch ? (patch.focalPoint ?? undefined) : current.focalPoint\n  return {\n    id: current.id,\n    filename: current.filename,\n    contentType: current.contentType,\n    byteSize: current.byteSize,\n    storageKey: current.storageKey,\n    ...(current.width !== undefined ? { width: current.width } : {}),\n    ...(current.height !== undefined ? { height: current.height } : {}),\n    ...(current.url !== undefined ? { url: current.url } : {}),\n    ...(alt !== undefined ? { alt } : {}),\n    ...(title !== undefined ? { title } : {}),\n    ...(focalPoint !== undefined ? { focalPoint } : {}),\n  }\n}\n\nexport type UpdateAssetMetadataResult =\n  | { ok: true; asset: AssetRecord }\n  | { ok: false; message: string }\n\n/**\n * Load the current record, apply the patch, and persist it via the\n * repository (the operations facade in the studio). Failures come back as a\n * structured result — never a throw the UI has to guess about.\n */\nexport async function updateAssetMetadata(\n  deps: { assets: AssetRepository },\n  projectId: string,\n  assetId: string,\n  patch: AssetMetadataPatch,\n): Promise<UpdateAssetMetadataResult> {\n  try {\n    const current = await deps.assets.getAsset(projectId, assetId)\n    const asset = await deps.assets.upsertAsset(projectId, assetMetadataUpsertInput(current, patch))\n    return { ok: true, asset }\n  } catch (cause) {\n    return { ok: false, message: cause instanceof Error ? cause.message : String(cause) }\n  }\n}\n"]}
+{"version":3,"file":"asset-metadata.js","sourceRoot":"","sources":["../../../src/components/assets/asset-metadata.ts"],"names":[],"mappings":"AAiCA,qFAAqF;AACrF,SAAS,UAAU,CACjB,UAA8B,EAC9B,WAAoB,EACpB,YAAgC;IAEhC,IAAI,CAAC,WAAW;QAAE,OAAO,YAAY,CAAA;IACrC,MAAM,OAAO,GAAG,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,CAAA;IACxC,OAAO,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAA;AACjD,CAAC;AAED,6EAA6E;AAC7E,MAAM,UAAU,wBAAwB,CACtC,OAAoB,EACpB,KAAyB;IAEzB,MAAM,GAAG,GAAG,UAAU,CAAC,KAAK,CAAC,GAAG,EAAE,KAAK,IAAI,KAAK,EAAE,OAAO,CAAC,GAAG,CAAC,CAAA;IAC9D,MAAM,KAAK,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,EAAE,OAAO,IAAI,KAAK,EAAE,OAAO,CAAC,KAAK,CAAC,CAAA;IACtE,+EAA+E;IAC/E,MAAM,UAAU,GAAG,YAAY,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,UAAU,IAAI,SAAS,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,UAAU,CAAA;IAC/F,gFAAgF;IAChF,MAAM,IAAI,GAAG,MAAM,IAAI,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAA;IACxD,OAAO;QACL,EAAE,EAAE,OAAO,CAAC,EAAE;QACd,QAAQ,EAAE,OAAO,CAAC,QAAQ;QAC1B,WAAW,EAAE,OAAO,CAAC,WAAW;QAChC,QAAQ,EAAE,OAAO,CAAC,QAAQ;QAC1B,UAAU,EAAE,OAAO,CAAC,UAAU;QAC9B,GAAG,CAAC,OAAO,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QAChE,GAAG,CAAC,OAAO,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QACnE,GAAG,CAAC,OAAO,CAAC,GAAG,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QAC1D,GAAG,CAAC,GAAG,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QACrC,GAAG,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QACzC,GAAG,CAAC,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QACnD,GAAG,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;KACxC,CAAA;AACH,CAAC;AAMD;;;;GAIG;AACH,MAAM,CAAC,KAAK,UAAU,mBAAmB,CACvC,IAAiC,EACjC,SAAiB,EACjB,OAAe,EACf,KAAyB;IAEzB,IAAI,CAAC;QACH,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC,CAAA;QAC9D,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,SAAS,EAAE,wBAAwB,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAA;QAChG,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,CAAA;IAC5B,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAA;IACvF,CAAC;AACH,CAAC","sourcesContent":["import type { AssetRecord, AssetRepository, NewAssetInput } from '@elytracms/core/persistence'\n\n/**\n * Asset metadata editing (EC-152). A patch is applied through the\n * {@link AssetRepository} interface — in the studio that is the EC-141\n * operations facade, so every edit runs the `assets.upsert` command\n * (validate → authorize → mutate → event). Pure orchestration; injectable\n * for tests.\n */\n\nexport interface AssetMetadataPatch {\n  /**\n   * New alt text. A present key overwrites; a trimmed-empty string clears\n   * the field. An absent key leaves the current value untouched.\n   */\n  alt?: string\n  /** New display title; same present/empty/absent semantics as `alt`. */\n  title?: string\n  /**\n   * New focal point (EC-248), the normalized 0–1 hotspot threaded to delivery's\n   * `object-position` (EC-230). A present `{x,y}` sets it, `null` clears it, an\n   * absent key leaves the current value untouched.\n   */\n  focalPoint?: { x: number; y: number } | null\n  /**\n   * Schema-driven asset metadata bag (EC-301): alt, copyright, credit, … keyed by\n   * the asset collection's `fields`. A present object **replaces** the whole bag\n   * (the image options dialog holds the complete edited meta); an absent key\n   * leaves the current bag untouched.\n   */\n  meta?: Record<string, unknown>\n}\n\n/** Merge one patch field: present+empty clears, present+value sets, absent keeps. */\nfunction mergeField(\n  patchValue: string | undefined,\n  patchHasKey: boolean,\n  currentValue: string | undefined,\n): string | undefined {\n  if (!patchHasKey) return currentValue\n  const trimmed = patchValue?.trim() ?? ''\n  return trimmed.length > 0 ? trimmed : undefined\n}\n\n/** The full upsert input that re-states `current` with the patch applied. */\nexport function assetMetadataUpsertInput(\n  current: AssetRecord,\n  patch: AssetMetadataPatch,\n): NewAssetInput {\n  const alt = mergeField(patch.alt, 'alt' in patch, current.alt)\n  const title = mergeField(patch.title, 'title' in patch, current.title)\n  // present `{x,y}` sets, present `null` clears, absent keeps the current point.\n  const focalPoint = 'focalPoint' in patch ? (patch.focalPoint ?? undefined) : current.focalPoint\n  // present object replaces the whole bag; absent keeps the current one (EC-301).\n  const meta = 'meta' in patch ? patch.meta : current.meta\n  return {\n    id: current.id,\n    filename: current.filename,\n    contentType: current.contentType,\n    byteSize: current.byteSize,\n    storageKey: current.storageKey,\n    ...(current.width !== undefined ? { width: current.width } : {}),\n    ...(current.height !== undefined ? { height: current.height } : {}),\n    ...(current.url !== undefined ? { url: current.url } : {}),\n    ...(alt !== undefined ? { alt } : {}),\n    ...(title !== undefined ? { title } : {}),\n    ...(focalPoint !== undefined ? { focalPoint } : {}),\n    ...(meta !== undefined ? { meta } : {}),\n  }\n}\n\nexport type UpdateAssetMetadataResult =\n  | { ok: true; asset: AssetRecord }\n  | { ok: false; message: string }\n\n/**\n * Load the current record, apply the patch, and persist it via the\n * repository (the operations facade in the studio). Failures come back as a\n * structured result — never a throw the UI has to guess about.\n */\nexport async function updateAssetMetadata(\n  deps: { assets: AssetRepository },\n  projectId: string,\n  assetId: string,\n  patch: AssetMetadataPatch,\n): Promise<UpdateAssetMetadataResult> {\n  try {\n    const current = await deps.assets.getAsset(projectId, assetId)\n    const asset = await deps.assets.upsertAsset(projectId, assetMetadataUpsertInput(current, patch))\n    return { ok: true, asset }\n  } catch (cause) {\n    return { ok: false, message: cause instanceof Error ? cause.message : String(cause) }\n  }\n}\n"]}

package/dist/components/assets/asset-thumb.d.ts

@@ -14,15 +14,28 @@ export declare function AssetThumb({ record, className, alt, }: {
     alt?: string;
 }): import("react").JSX.Element;
 /**
- * The focal-point picker (EC-248): click (or keyboard-nudge) anywhere on the
- * image to place the normalized 0–1 hotspot delivery threads to `object-position`
- * (EC-230). The marker shows the current point; clicking commits a new one,
- * `onChange(null)` resets to centre. Renders a muted note when the asset has no
- * resolvable image to place a point on.
+ * The focal-point picker (EC-248/EC-301): click or **drag** anywhere on the image
+ * to place the normalized 0–1 hotspot delivery threads to `object-position`
+ * (EC-230). The marker follows the pointer live while dragging and only commits on
+ * release (`onPreview` updates the marker, `onChange` commits). `onChange(null)`
+ * resets to centre. Shows a placeholder until the image loads; renders a muted note
+ * when the asset has no resolvable image.
  */
-export declare function FocalPointPicker({ record, point, onChange, disabled, }: {
+export declare function FocalPointPicker({ record, point, onChange, onPreview, disabled, }: {
     record: AssetRecord | undefined;
     point: FocalPoint | undefined;
     onChange: (point: FocalPoint | null) => void;
+    /** Called continuously while dragging to move the marker without committing. */
+    onPreview?: (point: FocalPoint) => void;
     disabled?: boolean;
 }): import("react").JSX.Element;
+/**
+ * A row of common-ratio crop previews (EC-301), each cropping the image with the
+ * same `object-position` delivery uses — so the editor sees how the focal point
+ * holds the subject across portrait/square/landscape crops. Updates live as the
+ * point is dragged.
+ */
+export declare function FocalCropPreviews({ record, point, }: {
+    record: AssetRecord | undefined;
+    point: FocalPoint | undefined;
+}): import("react").JSX.Element | null;

package/dist/components/assets/asset-thumb.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from 'react';
+import { useMemo, useRef, useState } from 'react';
 import { Image } from 'lucide-react';
 import { Text } from '@elytracms/studio/ui';
 import { cn } from '@elytracms/studio/lib/utils';
@@ -34,22 +34,60 @@ export function AssetThumb({ record, className, alt, }) {
     return (_jsx("div", { className: cn('flex items-center justify-center rounded border border-border bg-muted text-muted-foreground', className), children: _jsx(Image, { className: "size-4", "aria-hidden": true }) }));
 }
 /**
- * The focal-point picker (EC-248): click (or keyboard-nudge) anywhere on the
- * image to place the normalized 0–1 hotspot delivery threads to `object-position`
- * (EC-230). The marker shows the current point; clicking commits a new one,
- * `onChange(null)` resets to centre. Renders a muted note when the asset has no
- * resolvable image to place a point on.
+ * The focal-point picker (EC-248/EC-301): click or **drag** anywhere on the image
+ * to place the normalized 0–1 hotspot delivery threads to `object-position`
+ * (EC-230). The marker follows the pointer live while dragging and only commits on
+ * release (`onPreview` updates the marker, `onChange` commits). `onChange(null)`
+ * resets to centre. Shows a placeholder until the image loads; renders a muted note
+ * when the asset has no resolvable image.
  */
-export function FocalPointPicker({ record, point, onChange, disabled, }) {
+export function FocalPointPicker({ record, point, onChange, onPreview, disabled, }) {
     const marker = point ?? CENTER_FOCAL_POINT;
+    const dragging = useRef(false);
+    const [loaded, setLoaded] = useState(false);
     if (!isResolvableImage(record)) {
         return (_jsx(Text, { size: "xs", tone: "subtle", children: "No image preview \u2014 upload or pick an image asset to set a focal point." }));
     }
-    function place(clientX, clientY, target) {
+    const pointFrom = (e) => focalPointFromPoint(e.currentTarget.getBoundingClientRect(), e.clientX, e.clientY);
+    function onPointerDown(e) {
         if (disabled)
             return;
-        onChange(focalPointFromPoint(target.getBoundingClientRect(), clientX, clientY));
+        dragging.current = true;
+        e.currentTarget.setPointerCapture(e.pointerId);
+        (onPreview ?? onChange)(pointFrom(e));
     }
-    return (_jsxs("button", { type: "button", "aria-label": "Set focal point", disabled: disabled, onClick: (e) => place(e.clientX, e.clientY, e.currentTarget), className: cn('relative block w-full overflow-hidden rounded border border-border bg-muted', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40', disabled ? 'cursor-default opacity-60' : 'cursor-crosshair'), children: [_jsx("img", { src: record.url, alt: record.alt ?? record.filename, loading: "lazy", draggable: false, className: "block h-auto w-full select-none" }), _jsx("span", { "aria-hidden": true, className: "pointer-events-none absolute size-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-[0_0_0_1.5px_rgba(0,0,0,0.55)] ring-1 ring-black/40", style: { left: `${marker.x * 100}%`, top: `${marker.y * 100}%` } })] }));
+    function onPointerMove(e) {
+        if (disabled || !dragging.current)
+            return;
+        (onPreview ?? onChange)(pointFrom(e));
+    }
+    function onPointerUp(e) {
+        if (disabled || !dragging.current)
+            return;
+        dragging.current = false;
+        e.currentTarget.releasePointerCapture(e.pointerId);
+        onChange(pointFrom(e)); // commit on release only
+    }
+    return (_jsxs("button", { type: "button", "aria-label": "Set focal point", disabled: disabled, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, className: cn('relative block w-full touch-none select-none overflow-hidden rounded border border-border bg-muted', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40', disabled ? 'cursor-default opacity-60' : 'cursor-crosshair'), children: [_jsx("img", { src: record.url, alt: record.alt ?? record.filename, draggable: false, onLoad: () => setLoaded(true), className: cn('block h-auto w-full select-none transition-opacity', loaded ? 'opacity-100' : 'opacity-0') }), !loaded ? (_jsx("span", { className: "absolute inset-0 grid aspect-video place-items-center bg-muted", children: _jsx(Image, { className: "size-6 animate-pulse text-muted-foreground", "aria-hidden": true }) })) : (_jsx("span", { "aria-hidden": true, className: "pointer-events-none absolute size-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-[0_0_0_1.5px_rgba(0,0,0,0.55)] ring-1 ring-black/40", style: { left: `${marker.x * 100}%`, top: `${marker.y * 100}%` } }))] }));
+}
+/** Common crop aspect ratios shown as focal-aware previews (EC-301). */
+const FOCAL_CROP_RATIOS = [
+    { label: '9:16', className: 'aspect-[9/16]' },
+    { label: '3:4', className: 'aspect-[3/4]' },
+    { label: '1:1', className: 'aspect-square' },
+    { label: '4:3', className: 'aspect-[4/3]' },
+    { label: '16:9', className: 'aspect-video' },
+];
+/**
+ * A row of common-ratio crop previews (EC-301), each cropping the image with the
+ * same `object-position` delivery uses — so the editor sees how the focal point
+ * holds the subject across portrait/square/landscape crops. Updates live as the
+ * point is dragged.
+ */
+export function FocalCropPreviews({ record, point, }) {
+    if (!isResolvableImage(record))
+        return null;
+    const objectPosition = focalPointObjectPosition(point);
+    return (_jsx("div", { className: "flex items-end gap-2", children: FOCAL_CROP_RATIOS.map((ratio) => (_jsxs("div", { className: "flex min-w-0 flex-col items-center gap-1", children: [_jsx("div", { className: cn('h-14 overflow-hidden rounded border border-border bg-muted', ratio.className), children: _jsx("img", { src: record.url, alt: "", draggable: false, style: { objectPosition }, className: "h-full w-full object-cover" }) }), _jsx(Text, { size: "xs", tone: "subtle", children: ratio.label })] }, ratio.label))) }));
 }
 //# sourceMappingURL=asset-thumb.js.map

package/dist/components/assets/asset-thumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"asset-thumb.js","sourceRoot":"","sources":["../../../src/components/assets/asset-thumb.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useMemo } from 'react'\nimport { Image } from 'lucide-react'\nimport type { AssetRecord } from '@elytracms/core/persistence'\nimport { Text } from '@elytracms/studio/ui'\nimport { cn } from '@elytracms/studio/lib/utils'\nimport { useOptionalAssets } from './assets-store'\nimport {\n  CENTER_FOCAL_POINT,\n  focalPointFromPoint,\n  focalPointObjectPosition,\n} from './focal-point'\nimport type { FocalPoint } from './focal-point'\n\n/** Resolve an asset record by id from the ambient library, if one is mounted. */\nexport function useAssetRecord(assetId: string | null | undefined): AssetRecord | undefined {\n  const store = useOptionalAssets()\n  return useMemo(() => {\n    if (!assetId || !store || store.status !== 'ready') return undefined\n    return store.assets.find((a) => a.id === assetId)\n  }, [assetId, store])\n}\n\n/** True when the record is an image with a browser-resolvable URL (EC-212). */\nfunction isResolvableImage(record: AssetRecord | undefined): record is AssetRecord & { url: string } {\n  return (\n    record !== undefined &&\n    record.contentType.startsWith('image/') &&\n    typeof record.url === 'string' &&\n    record.url.startsWith('http')\n  )\n}\n\n/**\n * A read-only image thumbnail honouring the asset's focal point (EC-248): the\n * preview crops with the same `object-position` delivery uses (EC-230), so the\n * editor sees exactly what a focal-point change does. Non-image / unresolvable\n * assets fall back to the labelled icon, matching the table cell's preview.\n */\nexport function AssetThumb({\n  record,\n  className,\n  alt,\n}: {\n  record: AssetRecord | undefined\n  className?: string\n  alt?: string\n}) {\n  if (isResolvableImage(record)) {\n    return (\n      <img\n        src={record.url}\n        alt={alt ?? record.alt ?? record.title ?? record.filename}\n        loading=\"lazy\"\n        style={{ objectPosition: focalPointObjectPosition(record.focalPoint) }}\n        className={cn('rounded border border-border bg-muted object-cover', className)}\n      />\n    )\n  }\n  return (\n    <div\n      className={cn(\n        'flex items-center justify-center rounded border border-border bg-muted text-muted-foreground',\n        className,\n      )}\n    >\n      <Image className=\"size-4\" aria-hidden />\n    </div>\n  )\n}\n\n/**\n * The focal-point picker (EC-248): click (or keyboard-nudge) anywhere on the\n * image to place the normalized 0–1 hotspot delivery threads to `object-position`\n * (EC-230). The marker shows the current point; clicking commits a new one,\n * `onChange(null)` resets to centre. Renders a muted note when the asset has no\n * resolvable image to place a point on.\n */\nexport function FocalPointPicker({\n  record,\n  point,\n  onChange,\n  disabled,\n}: {\n  record: AssetRecord | undefined\n  point: FocalPoint | undefined\n  onChange: (point: FocalPoint | null) => void\n  disabled?: boolean\n}) {\n  const marker = point ?? CENTER_FOCAL_POINT\n\n  if (!isResolvableImage(record)) {\n    return (\n      <Text size=\"xs\" tone=\"subtle\">\n        No image preview — upload or pick an image asset to set a focal point.\n      </Text>\n    )\n  }\n\n  function place(clientX: number, clientY: number, target: HTMLElement) {\n    if (disabled) return\n    onChange(focalPointFromPoint(target.getBoundingClientRect(), clientX, clientY))\n  }\n\n  return (\n    <button\n      type=\"button\"\n      aria-label=\"Set focal point\"\n      disabled={disabled}\n      onClick={(e) => place(e.clientX, e.clientY, e.currentTarget)}\n      className={cn(\n        'relative block w-full overflow-hidden rounded border border-border bg-muted',\n        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40',\n        disabled ? 'cursor-default opacity-60' : 'cursor-crosshair',\n      )}\n    >\n      {/* Width-constrained, natural aspect (no object-fit), so the button wraps\n          the image tightly and the bounding rect equals the image box — the\n          normalized click coordinates are then exact, with no letterbox offset. */}\n      <img\n        src={record.url}\n        alt={record.alt ?? record.filename}\n        loading=\"lazy\"\n        draggable={false}\n        className=\"block h-auto w-full select-none\"\n      />\n      <span\n        aria-hidden\n        className=\"pointer-events-none absolute size-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-[0_0_0_1.5px_rgba(0,0,0,0.55)] ring-1 ring-black/40\"\n        style={{ left: `${marker.x * 100}%`, top: `${marker.y * 100}%` }}\n      />\n    </button>\n  )\n}\n"]}
+{"version":3,"file":"asset-thumb.js","sourceRoot":"","sources":["../../../src/components/assets/asset-thumb.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useMemo, useRef, useState } from 'react'\nimport { Image } from 'lucide-react'\nimport type { AssetRecord } from '@elytracms/core/persistence'\nimport { Text } from '@elytracms/studio/ui'\nimport { cn } from '@elytracms/studio/lib/utils'\nimport { useOptionalAssets } from './assets-store'\nimport {\n  CENTER_FOCAL_POINT,\n  focalPointFromPoint,\n  focalPointObjectPosition,\n} from './focal-point'\nimport type { FocalPoint } from './focal-point'\n\n/** Resolve an asset record by id from the ambient library, if one is mounted. */\nexport function useAssetRecord(assetId: string | null | undefined): AssetRecord | undefined {\n  const store = useOptionalAssets()\n  return useMemo(() => {\n    if (!assetId || !store || store.status !== 'ready') return undefined\n    return store.assets.find((a) => a.id === assetId)\n  }, [assetId, store])\n}\n\n/** True when the record is an image with a browser-resolvable URL (EC-212). */\nfunction isResolvableImage(record: AssetRecord | undefined): record is AssetRecord & { url: string } {\n  return (\n    record !== undefined &&\n    record.contentType.startsWith('image/') &&\n    typeof record.url === 'string' &&\n    record.url.startsWith('http')\n  )\n}\n\n/**\n * A read-only image thumbnail honouring the asset's focal point (EC-248): the\n * preview crops with the same `object-position` delivery uses (EC-230), so the\n * editor sees exactly what a focal-point change does. Non-image / unresolvable\n * assets fall back to the labelled icon, matching the table cell's preview.\n */\nexport function AssetThumb({\n  record,\n  className,\n  alt,\n}: {\n  record: AssetRecord | undefined\n  className?: string\n  alt?: string\n}) {\n  if (isResolvableImage(record)) {\n    return (\n      <img\n        src={record.url}\n        alt={alt ?? record.alt ?? record.title ?? record.filename}\n        loading=\"lazy\"\n        style={{ objectPosition: focalPointObjectPosition(record.focalPoint) }}\n        className={cn('rounded border border-border bg-muted object-cover', className)}\n      />\n    )\n  }\n  return (\n    <div\n      className={cn(\n        'flex items-center justify-center rounded border border-border bg-muted text-muted-foreground',\n        className,\n      )}\n    >\n      <Image className=\"size-4\" aria-hidden />\n    </div>\n  )\n}\n\n/**\n * The focal-point picker (EC-248/EC-301): click or **drag** anywhere on the image\n * to place the normalized 0–1 hotspot delivery threads to `object-position`\n * (EC-230). The marker follows the pointer live while dragging and only commits on\n * release (`onPreview` updates the marker, `onChange` commits). `onChange(null)`\n * resets to centre. Shows a placeholder until the image loads; renders a muted note\n * when the asset has no resolvable image.\n */\nexport function FocalPointPicker({\n  record,\n  point,\n  onChange,\n  onPreview,\n  disabled,\n}: {\n  record: AssetRecord | undefined\n  point: FocalPoint | undefined\n  onChange: (point: FocalPoint | null) => void\n  /** Called continuously while dragging to move the marker without committing. */\n  onPreview?: (point: FocalPoint) => void\n  disabled?: boolean\n}) {\n  const marker = point ?? CENTER_FOCAL_POINT\n  const dragging = useRef(false)\n  const [loaded, setLoaded] = useState(false)\n\n  if (!isResolvableImage(record)) {\n    return (\n      <Text size=\"xs\" tone=\"subtle\">\n        No image preview — upload or pick an image asset to set a focal point.\n      </Text>\n    )\n  }\n\n  const pointFrom = (e: React.PointerEvent<HTMLElement>): FocalPoint =>\n    focalPointFromPoint(e.currentTarget.getBoundingClientRect(), e.clientX, e.clientY)\n\n  function onPointerDown(e: React.PointerEvent<HTMLButtonElement>) {\n    if (disabled) return\n    dragging.current = true\n    e.currentTarget.setPointerCapture(e.pointerId)\n    ;(onPreview ?? onChange)(pointFrom(e))\n  }\n  function onPointerMove(e: React.PointerEvent<HTMLButtonElement>) {\n    if (disabled || !dragging.current) return\n    ;(onPreview ?? onChange)(pointFrom(e))\n  }\n  function onPointerUp(e: React.PointerEvent<HTMLButtonElement>) {\n    if (disabled || !dragging.current) return\n    dragging.current = false\n    e.currentTarget.releasePointerCapture(e.pointerId)\n    onChange(pointFrom(e)) // commit on release only\n  }\n\n  return (\n    <button\n      type=\"button\"\n      aria-label=\"Set focal point\"\n      disabled={disabled}\n      onPointerDown={onPointerDown}\n      onPointerMove={onPointerMove}\n      onPointerUp={onPointerUp}\n      className={cn(\n        'relative block w-full touch-none select-none overflow-hidden rounded border border-border bg-muted',\n        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40',\n        disabled ? 'cursor-default opacity-60' : 'cursor-crosshair',\n      )}\n    >\n      {/* Width-constrained, natural aspect (no object-fit), so the button wraps\n          the image tightly and the bounding rect equals the image box — the\n          normalized pointer coordinates are then exact, with no letterbox offset. */}\n      <img\n        src={record.url}\n        alt={record.alt ?? record.filename}\n        draggable={false}\n        onLoad={() => setLoaded(true)}\n        className={cn('block h-auto w-full select-none transition-opacity', loaded ? 'opacity-100' : 'opacity-0')}\n      />\n      {!loaded ? (\n        <span className=\"absolute inset-0 grid aspect-video place-items-center bg-muted\">\n          <Image className=\"size-6 animate-pulse text-muted-foreground\" aria-hidden />\n        </span>\n      ) : (\n        <span\n          aria-hidden\n          className=\"pointer-events-none absolute size-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-[0_0_0_1.5px_rgba(0,0,0,0.55)] ring-1 ring-black/40\"\n          style={{ left: `${marker.x * 100}%`, top: `${marker.y * 100}%` }}\n        />\n      )}\n    </button>\n  )\n}\n\n/** Common crop aspect ratios shown as focal-aware previews (EC-301). */\nconst FOCAL_CROP_RATIOS = [\n  { label: '9:16', className: 'aspect-[9/16]' },\n  { label: '3:4', className: 'aspect-[3/4]' },\n  { label: '1:1', className: 'aspect-square' },\n  { label: '4:3', className: 'aspect-[4/3]' },\n  { label: '16:9', className: 'aspect-video' },\n] as const\n\n/**\n * A row of common-ratio crop previews (EC-301), each cropping the image with the\n * same `object-position` delivery uses — so the editor sees how the focal point\n * holds the subject across portrait/square/landscape crops. Updates live as the\n * point is dragged.\n */\nexport function FocalCropPreviews({\n  record,\n  point,\n}: {\n  record: AssetRecord | undefined\n  point: FocalPoint | undefined\n}) {\n  if (!isResolvableImage(record)) return null\n  const objectPosition = focalPointObjectPosition(point)\n  return (\n    <div className=\"flex items-end gap-2\">\n      {FOCAL_CROP_RATIOS.map((ratio) => (\n        <div key={ratio.label} className=\"flex min-w-0 flex-col items-center gap-1\">\n          <div className={cn('h-14 overflow-hidden rounded border border-border bg-muted', ratio.className)}>\n            <img\n              src={record.url}\n              alt=\"\"\n              draggable={false}\n              style={{ objectPosition }}\n              className=\"h-full w-full object-cover\"\n            />\n          </div>\n          <Text size=\"xs\" tone=\"subtle\">\n            {ratio.label}\n          </Text>\n        </div>\n      ))}\n    </div>\n  )\n}\n"]}

package/dist/components/assets/assets-store.js

@@ -103,10 +103,16 @@ export function AssetsProvider({ projectId, children, }) {
         // operations facade (EC-141) — never straight at a repository.
         const { assetRepo } = await studio();
         const result = await updateAssetMetadata({ assets: assetRepo }, projectId, assetId, patch);
-        if (result.ok)
-            await refresh();
+        if (result.ok) {
+            // Patch the one updated record into local state rather than re-listing the
+            // whole library (EC-301). A focal-point or alt edit must not trigger a full
+            // `assets.list` round-trip — that re-list (plus the marker only moving once
+            // it returned) was the focal-point picker's lag and query storm.
+            const updated = result.asset;
+            setAssets((prev) => prev.map((a) => (a.id === assetId ? updated : a)));
+        }
         return result;
-    }, [studio, projectId, refresh]);
+    }, [studio, projectId]);
     const store = useMemo(() => ({
         projectId,
         status,

package/dist/components/assets/assets-store.js.map

@@ -1 +1 @@
-{"version":3,"file":"assets-store.js","sourceRoot":"","sources":["../../../src/components/assets/assets-store.tsx"],"names":[],"mappings":"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","sourcesContent":["import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'\nimport type { ReactNode } from 'react'\nimport type { AssetRecord, AssetRepository } from '@elytracms/core/persistence'\nimport { deleteAsset, runUpload, xhrUploadTransport } from '@elytracms/studio/lib/assets'\nimport type { DeleteAssetResult, UploadState, UploadableFile } from '@elytracms/studio/lib/assets'\nimport { loadInboundAssetReferenceViews } from '@elytracms/studio/lib/references'\nimport type { ReferenceEntryView } from '@elytracms/studio/lib/references'\nimport { getStudioOperations, operationsAssetRepository } from '@elytracms/studio/lib/operations'\nimport type { StudioOperations } from '@elytracms/studio/lib/operations'\nimport { updateAssetMetadata } from './asset-metadata'\nimport type { AssetMetadataPatch, UpdateAssetMetadataResult } from './asset-metadata'\n\n/**\n * Asset library store (EC-151, EC-141). Asset *metadata* mutations go through\n * the shared operations client (`assets.*` commands — validate → authorize →\n * mutate → event); blob *bytes* ride on `adapter.blobs`, which is transport,\n * not domain. The UI works identically against the in-memory seed and a live\n * Convex deployment.\n */\n\nexport interface UploadEntry {\n  id: string\n  filename: string\n  state: UploadState\n}\n\nexport interface AssetsStore {\n  /** The active project (e.g. for reference deep links, EC-202). */\n  projectId: string\n  status: 'loading' | 'ready' | 'error'\n  errorMessage?: string\n  assets: readonly AssetRecord[]\n  uploads: readonly UploadEntry[]\n  upload(files: Iterable<UploadableFile>): void\n  retryUpload(uploadId: string): void\n  dismissUpload(uploadId: string): void\n  /**\n   * Index-accurate inbound references of an asset (EC-202): the \"used by\"\n   * pre-flight of the block-or-confirm delete dialog, read from the EC-155\n   * reference index (not the retired string scan).\n   */\n  usagesOf(assetId: string): Promise<ReferenceEntryView[]>\n  remove(assetId: string, options?: { confirmInUse?: boolean }): Promise<DeleteAssetResult>\n  /** Edit alt/title (EC-152); persists through the operations asset facade. */\n  updateMetadata(assetId: string, patch: AssetMetadataPatch): Promise<UpdateAssetMetadataResult>\n  refresh(): Promise<void>\n}\n\nconst AssetsContext = createContext<AssetsStore | null>(null)\n\nexport function AssetsProvider({\n  projectId,\n  children,\n}: {\n  projectId: string\n  children: ReactNode\n}) {\n  const uploadFilesRef = useRef(new Map<string, UploadableFile>())\n  const uploadSeq = useRef(0)\n  const [status, setStatus] = useState<AssetsStore['status']>('loading')\n  const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined)\n  const [assets, setAssets] = useState<readonly AssetRecord[]>([])\n  const [uploads, setUploads] = useState<readonly UploadEntry[]>([])\n\n  /** The shared studio operations bundle + the metadata-write facade over it. */\n  const studio = useCallback(async (): Promise<\n    StudioOperations & { assetRepo: AssetRepository }\n  > => {\n    const bundle = await getStudioOperations()\n    return { ...bundle, assetRepo: operationsAssetRepository(bundle.operations) }\n  }, [])\n\n  const refresh = useCallback(async () => {\n    try {\n      const { operations } = await studio()\n      const result = await operations.assets.list({ projectId })\n      if (!result.ok) {\n        setStatus('error')\n        setErrorMessage(result.error.message)\n        return\n      }\n      setAssets(result.value)\n      setStatus('ready')\n      setErrorMessage(undefined)\n    } catch (error) {\n      setStatus('error')\n      setErrorMessage(error instanceof Error ? error.message : String(error))\n    }\n  }, [studio, projectId])\n\n  useEffect(() => {\n    void refresh()\n  }, [refresh])\n\n  const setUploadState = useCallback((uploadId: string, state: UploadState) => {\n    setUploads((prev) => prev.map((u) => (u.id === uploadId ? { ...u, state } : u)))\n  }, [])\n\n  const runEntry = useCallback(\n    async (uploadId: string, file: UploadableFile, previous?: UploadState) => {\n      const { adapter, assetRepo } = await studio()\n      const result = await runUpload(\n        {\n          // Bytes ride on blob storage (transport); the metadata record is\n          // confirmed through the `assets.upsert` operation command.\n          blobs: adapter.blobs,\n          assets: assetRepo,\n          ...(typeof XMLHttpRequest !== 'undefined' ? { transport: xhrUploadTransport } : {}),\n        },\n        {\n          projectId,\n          file,\n          onState: (state) => setUploadState(uploadId, state),\n        },\n        previous,\n      )\n      if (result.ok) {\n        // Completed uploads leave the queue; the asset appears in the library.\n        uploadFilesRef.current.delete(uploadId)\n        setUploads((prev) => prev.filter((u) => u.id !== uploadId))\n        await refresh()\n      }\n    },\n    [studio, projectId, refresh, setUploadState],\n  )\n\n  const upload = useCallback(\n    (files: Iterable<UploadableFile>) => {\n      for (const file of files) {\n        uploadSeq.current += 1\n        const uploadId = `upload-${uploadSeq.current}`\n        uploadFilesRef.current.set(uploadId, file)\n        setUploads((prev) => [\n          ...prev,\n          { id: uploadId, filename: file.name, state: { phase: 'idle', progress: 0, attempt: 0 } },\n        ])\n        void runEntry(uploadId, file)\n      }\n    },\n    [runEntry],\n  )\n\n  const retryUpload = useCallback(\n    (uploadId: string) => {\n      const file = uploadFilesRef.current.get(uploadId)\n      const entry = uploads.find((u) => u.id === uploadId)\n      if (!file || !entry || entry.state.phase !== 'failed') return\n      void runEntry(uploadId, file, entry.state)\n    },\n    [runEntry, uploads],\n  )\n\n  const dismissUpload = useCallback((uploadId: string) => {\n    uploadFilesRef.current.delete(uploadId)\n    setUploads((prev) => prev.filter((u) => u.id !== uploadId))\n  }, [])\n\n  const usagesOf = useCallback(\n    // Index-accurate (EC-202): inbound references from the EC-155 index via the\n    // operations queries — the same machinery the References panel uses.\n    async (assetId: string) => loadInboundAssetReferenceViews(projectId, assetId),\n    [projectId],\n  )\n\n  const remove = useCallback(\n    async (assetId: string, options?: { confirmInUse?: boolean }) => {\n      const { adapter, assetRepo } = await studio()\n      // Metadata removal goes through the `assets.remove` command (via the\n      // facade); blob byte deletion stays on the adapter; the usage gate reads\n      // the EC-155 reference index (`adapter.references`, EC-202).\n      const result = await deleteAsset(\n        { assets: assetRepo, blobs: adapter.blobs, references: adapter.references },\n        projectId,\n        assetId,\n        options,\n      )\n      if (result.outcome === 'deleted' || result.outcome === 'not-found') await refresh()\n      return result\n    },\n    [studio, projectId, refresh],\n  )\n\n  const updateMetadata = useCallback(\n    async (assetId: string, patch: AssetMetadataPatch) => {\n      // Metadata writes go through the `assets.upsert` command via the\n      // operations facade (EC-141) — never straight at a repository.\n      const { assetRepo } = await studio()\n      const result = await updateAssetMetadata({ assets: assetRepo }, projectId, assetId, patch)\n      if (result.ok) await refresh()\n      return result\n    },\n    [studio, projectId, refresh],\n  )\n\n  const store = useMemo<AssetsStore>(\n    () => ({\n      projectId,\n      status,\n      ...(errorMessage !== undefined ? { errorMessage } : {}),\n      assets,\n      uploads,\n      upload,\n      retryUpload,\n      dismissUpload,\n      usagesOf,\n      remove,\n      updateMetadata,\n      refresh,\n    }),\n    [\n      projectId,\n      status,\n      errorMessage,\n      assets,\n      uploads,\n      upload,\n      retryUpload,\n      dismissUpload,\n      usagesOf,\n      remove,\n      updateMetadata,\n      refresh,\n    ],\n  )\n\n  return <AssetsContext.Provider value={store}>{children}</AssetsContext.Provider>\n}\n\nexport function useAssets(): AssetsStore {\n  const store = useContext(AssetsContext)\n  if (!store) throw new Error('useAssets must be used within an <AssetsProvider>.')\n  return store\n}\n\n/**\n * The assets store when an `<AssetsProvider>` is mounted above, else `null`.\n * Lets surfaces outside the Assets section (the CMS asset picker, EC-152)\n * reuse an ambient provider or mount their own.\n */\nexport function useOptionalAssets(): AssetsStore | null {\n  return useContext(AssetsContext)\n}\n"]}
+{"version":3,"file":"assets-store.js","sourceRoot":"","sources":["../../../src/components/assets/assets-store.tsx"],"names":[],"mappings":"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","sourcesContent":["import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'\nimport type { ReactNode } from 'react'\nimport type { AssetRecord, AssetRepository } from '@elytracms/core/persistence'\nimport { deleteAsset, runUpload, xhrUploadTransport } from '@elytracms/studio/lib/assets'\nimport type { DeleteAssetResult, UploadState, UploadableFile } from '@elytracms/studio/lib/assets'\nimport { loadInboundAssetReferenceViews } from '@elytracms/studio/lib/references'\nimport type { ReferenceEntryView } from '@elytracms/studio/lib/references'\nimport { getStudioOperations, operationsAssetRepository } from '@elytracms/studio/lib/operations'\nimport type { StudioOperations } from '@elytracms/studio/lib/operations'\nimport { updateAssetMetadata } from './asset-metadata'\nimport type { AssetMetadataPatch, UpdateAssetMetadataResult } from './asset-metadata'\n\n/**\n * Asset library store (EC-151, EC-141). Asset *metadata* mutations go through\n * the shared operations client (`assets.*` commands — validate → authorize →\n * mutate → event); blob *bytes* ride on `adapter.blobs`, which is transport,\n * not domain. The UI works identically against the in-memory seed and a live\n * Convex deployment.\n */\n\nexport interface UploadEntry {\n  id: string\n  filename: string\n  state: UploadState\n}\n\nexport interface AssetsStore {\n  /** The active project (e.g. for reference deep links, EC-202). */\n  projectId: string\n  status: 'loading' | 'ready' | 'error'\n  errorMessage?: string\n  assets: readonly AssetRecord[]\n  uploads: readonly UploadEntry[]\n  upload(files: Iterable<UploadableFile>): void\n  retryUpload(uploadId: string): void\n  dismissUpload(uploadId: string): void\n  /**\n   * Index-accurate inbound references of an asset (EC-202): the \"used by\"\n   * pre-flight of the block-or-confirm delete dialog, read from the EC-155\n   * reference index (not the retired string scan).\n   */\n  usagesOf(assetId: string): Promise<ReferenceEntryView[]>\n  remove(assetId: string, options?: { confirmInUse?: boolean }): Promise<DeleteAssetResult>\n  /** Edit alt/title (EC-152); persists through the operations asset facade. */\n  updateMetadata(assetId: string, patch: AssetMetadataPatch): Promise<UpdateAssetMetadataResult>\n  refresh(): Promise<void>\n}\n\nconst AssetsContext = createContext<AssetsStore | null>(null)\n\nexport function AssetsProvider({\n  projectId,\n  children,\n}: {\n  projectId: string\n  children: ReactNode\n}) {\n  const uploadFilesRef = useRef(new Map<string, UploadableFile>())\n  const uploadSeq = useRef(0)\n  const [status, setStatus] = useState<AssetsStore['status']>('loading')\n  const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined)\n  const [assets, setAssets] = useState<readonly AssetRecord[]>([])\n  const [uploads, setUploads] = useState<readonly UploadEntry[]>([])\n\n  /** The shared studio operations bundle + the metadata-write facade over it. */\n  const studio = useCallback(async (): Promise<\n    StudioOperations & { assetRepo: AssetRepository }\n  > => {\n    const bundle = await getStudioOperations()\n    return { ...bundle, assetRepo: operationsAssetRepository(bundle.operations) }\n  }, [])\n\n  const refresh = useCallback(async () => {\n    try {\n      const { operations } = await studio()\n      const result = await operations.assets.list({ projectId })\n      if (!result.ok) {\n        setStatus('error')\n        setErrorMessage(result.error.message)\n        return\n      }\n      setAssets(result.value)\n      setStatus('ready')\n      setErrorMessage(undefined)\n    } catch (error) {\n      setStatus('error')\n      setErrorMessage(error instanceof Error ? error.message : String(error))\n    }\n  }, [studio, projectId])\n\n  useEffect(() => {\n    void refresh()\n  }, [refresh])\n\n  const setUploadState = useCallback((uploadId: string, state: UploadState) => {\n    setUploads((prev) => prev.map((u) => (u.id === uploadId ? { ...u, state } : u)))\n  }, [])\n\n  const runEntry = useCallback(\n    async (uploadId: string, file: UploadableFile, previous?: UploadState) => {\n      const { adapter, assetRepo } = await studio()\n      const result = await runUpload(\n        {\n          // Bytes ride on blob storage (transport); the metadata record is\n          // confirmed through the `assets.upsert` operation command.\n          blobs: adapter.blobs,\n          assets: assetRepo,\n          ...(typeof XMLHttpRequest !== 'undefined' ? { transport: xhrUploadTransport } : {}),\n        },\n        {\n          projectId,\n          file,\n          onState: (state) => setUploadState(uploadId, state),\n        },\n        previous,\n      )\n      if (result.ok) {\n        // Completed uploads leave the queue; the asset appears in the library.\n        uploadFilesRef.current.delete(uploadId)\n        setUploads((prev) => prev.filter((u) => u.id !== uploadId))\n        await refresh()\n      }\n    },\n    [studio, projectId, refresh, setUploadState],\n  )\n\n  const upload = useCallback(\n    (files: Iterable<UploadableFile>) => {\n      for (const file of files) {\n        uploadSeq.current += 1\n        const uploadId = `upload-${uploadSeq.current}`\n        uploadFilesRef.current.set(uploadId, file)\n        setUploads((prev) => [\n          ...prev,\n          { id: uploadId, filename: file.name, state: { phase: 'idle', progress: 0, attempt: 0 } },\n        ])\n        void runEntry(uploadId, file)\n      }\n    },\n    [runEntry],\n  )\n\n  const retryUpload = useCallback(\n    (uploadId: string) => {\n      const file = uploadFilesRef.current.get(uploadId)\n      const entry = uploads.find((u) => u.id === uploadId)\n      if (!file || !entry || entry.state.phase !== 'failed') return\n      void runEntry(uploadId, file, entry.state)\n    },\n    [runEntry, uploads],\n  )\n\n  const dismissUpload = useCallback((uploadId: string) => {\n    uploadFilesRef.current.delete(uploadId)\n    setUploads((prev) => prev.filter((u) => u.id !== uploadId))\n  }, [])\n\n  const usagesOf = useCallback(\n    // Index-accurate (EC-202): inbound references from the EC-155 index via the\n    // operations queries — the same machinery the References panel uses.\n    async (assetId: string) => loadInboundAssetReferenceViews(projectId, assetId),\n    [projectId],\n  )\n\n  const remove = useCallback(\n    async (assetId: string, options?: { confirmInUse?: boolean }) => {\n      const { adapter, assetRepo } = await studio()\n      // Metadata removal goes through the `assets.remove` command (via the\n      // facade); blob byte deletion stays on the adapter; the usage gate reads\n      // the EC-155 reference index (`adapter.references`, EC-202).\n      const result = await deleteAsset(\n        { assets: assetRepo, blobs: adapter.blobs, references: adapter.references },\n        projectId,\n        assetId,\n        options,\n      )\n      if (result.outcome === 'deleted' || result.outcome === 'not-found') await refresh()\n      return result\n    },\n    [studio, projectId, refresh],\n  )\n\n  const updateMetadata = useCallback(\n    async (assetId: string, patch: AssetMetadataPatch) => {\n      // Metadata writes go through the `assets.upsert` command via the\n      // operations facade (EC-141) — never straight at a repository.\n      const { assetRepo } = await studio()\n      const result = await updateAssetMetadata({ assets: assetRepo }, projectId, assetId, patch)\n      if (result.ok) {\n        // Patch the one updated record into local state rather than re-listing the\n        // whole library (EC-301). A focal-point or alt edit must not trigger a full\n        // `assets.list` round-trip — that re-list (plus the marker only moving once\n        // it returned) was the focal-point picker's lag and query storm.\n        const updated = result.asset\n        setAssets((prev) => prev.map((a) => (a.id === assetId ? updated : a)))\n      }\n      return result\n    },\n    [studio, projectId],\n  )\n\n  const store = useMemo<AssetsStore>(\n    () => ({\n      projectId,\n      status,\n      ...(errorMessage !== undefined ? { errorMessage } : {}),\n      assets,\n      uploads,\n      upload,\n      retryUpload,\n      dismissUpload,\n      usagesOf,\n      remove,\n      updateMetadata,\n      refresh,\n    }),\n    [\n      projectId,\n      status,\n      errorMessage,\n      assets,\n      uploads,\n      upload,\n      retryUpload,\n      dismissUpload,\n      usagesOf,\n      remove,\n      updateMetadata,\n      refresh,\n    ],\n  )\n\n  return <AssetsContext.Provider value={store}>{children}</AssetsContext.Provider>\n}\n\nexport function useAssets(): AssetsStore {\n  const store = useContext(AssetsContext)\n  if (!store) throw new Error('useAssets must be used within an <AssetsProvider>.')\n  return store\n}\n\n/**\n * The assets store when an `<AssetsProvider>` is mounted above, else `null`.\n * Lets surfaces outside the Assets section (the CMS asset picker, EC-152)\n * reuse an ambient provider or mount their own.\n */\nexport function useOptionalAssets(): AssetsStore | null {\n  return useContext(AssetsContext)\n}\n"]}

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

@@ -8,6 +8,7 @@ import { Badge, Code, Field, Input, InspectorSection, PanelHeader, Row, Select,
 import { humanizeName } from '@elytracms/studio/lib/utils';
 import { componentDisplayName } from '@elytracms/studio/lib/persona/labels';
 import { FieldControl } from '../cms/field-control';
+import { FieldDensityProvider } from '../cms/field-density';
 import { useBuilder } from './builder-store';
 import { LayoutSection, layoutManagedPropNames } from './layout-inspector';
 export function PropertyInspector() {
@@ -125,7 +126,7 @@ function StaticControl({ node, name, spec, value, }) {
         // preview; `object` = the nested/repeater form; `relation` = the document picker
         // (resolves the ref to its title, instead of stringifying it to "[object Object]").
         // All edit a structured static prop value through the same shared control documents use.
-        control = (_jsx(FieldControl, { id: id, field: { ...spec, name }, value: current, onChange: (v) => (v === undefined || v === null ? clear() : set(v)), readOnly: false }));
+        control = (_jsx(FieldDensityProvider, { density: "compact", children: _jsx(FieldControl, { id: id, field: { ...spec, name }, value: current, onChange: (v) => (v === undefined || v === null ? clear() : set(v)), readOnly: false }) }));
     }
     else {
         control = (_jsx(Input, { id: id, value: typeof current === 'string' ? current : String(current ?? ''), onChange: (e) => set(e.target.value) }));

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, useState } from 'react'\nimport { staticProp } from '@elytracms/core/project-graph'\nimport type { ComponentNode, JsonValue, PropValue } from '@elytracms/core/project-graph'\nimport type { ComponentManifest, PropField } from '@elytracms/core/component-registry'\nimport { manifestSlots } from '@elytracms/core/component-registry'\nimport { fieldValueValidator } from '@elytracms/core/cms-core'\nimport type { FieldDef, SelectOption } from '@elytracms/core/cms-core'\nimport { getStudioRegistry } from '@elytracms/studio/lib/registry'\nimport {\n  Badge,\n  Code,\n  Field,\n  Input,\n  InspectorSection,\n  PanelHeader,\n  Row,\n  Select,\n  Spacer,\n  Stack,\n  Text,\n} from '@elytracms/studio/ui'\nimport { humanizeName } from '@elytracms/studio/lib/utils'\nimport { componentDisplayName } from '@elytracms/studio/lib/persona/labels'\nimport { FieldControl } from '../cms/field-control'\nimport { useBuilder } from './builder-store'\nimport { LayoutSection, layoutManagedPropNames } from './layout-inspector'\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          Select a node in the tree or canvas to edit its properties.\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          Inspector\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 (named child regions), edited via the page\n  // tree / composition surface, not as a scalar control — so they show in the\n  // Slots section, not Props.\n  const props = manifest\n    ? Object.entries(manifest.props).filter(\n        ([name, spec]) => !layoutManaged.has(name) && spec.type !== 'blocks',\n      )\n    : []\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\">unknown component</Badge>\n          <Text size=\"xs\" tone=\"muted\" className=\"mt-2\">\n            No manifest is registered for this component, so its props can't be edited.\n          </Text>\n        </div>\n      ) : (\n        <InspectorSection title=\"Props\">\n          {props.length === 0 ? (\n            <Text size=\"xs\" tone=\"subtle\">\n              No editable props.\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=\"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'}>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            Add or reorder slot children from the page tree.\n          </Text>\n        </InspectorSection>\n      ) : null}\n    </>\n  )\n}\n\nfunction PropField({ node, name, spec }: { node: ComponentNode; name: string; spec: PropField }) {\n  const value = node.props?.[name]\n\n  return (\n    <Field label={spec.form?.label ?? name} htmlFor={`prop-${node.id}-${name}`}>\n      <StaticControl node={node} name={name} spec={spec} value={value} />\n    </Field>\n  )\n}\n\n/**\n * EC-190: the inspector control to render for a prop field-def. The old\n * `control.kind` vocabulary derives from the field `type` plus the optional\n * `form.control` presentation hint on `text` fields. Slice 3 unifies this with\n * the CMS `FieldControl`; for now it keeps the existing per-kind control set.\n */\ntype ControlKind =\n  | 'text'\n  | 'textarea'\n  | 'number'\n  | 'boolean'\n  | 'select'\n  | 'json'\n  | 'color'\n  | 'richtext'\n  | 'asset'\n  | 'object'\n  | 'relation'\nfunction controlKind(spec: PropField): ControlKind {\n  switch (spec.type) {\n    case 'boolean':\n      return 'boolean'\n    case 'number':\n      return 'number'\n    case 'select':\n      return 'select'\n    case 'richText':\n      return 'richtext'\n    // EC-195: an `asset`-typed prop (e.g. the Image `src`) picks from the asset\n    // library — never a raw asset id typed into a text box (the EC-192 persona).\n    case 'asset':\n      return 'asset'\n    // EC-253: an `object`/repeater prop reuses the CMS repeater control below.\n    case 'object':\n      return 'object'\n    // EC-262: a `relation`-typed prop (e.g. a ProductGrid's `category`) reuses the\n    // CMS relation picker — never a text box that stringifies the ref to \"[object Object]\".\n    case 'relation':\n      return 'relation'\n    case 'text': {\n      const c = spec.form?.control\n      if (c === 'textarea') return 'textarea'\n      if (c === 'color') return 'color'\n      if (c === 'json') return 'json'\n      return 'text'\n    }\n    default:\n      return 'text'\n  }\n}\n\nfunction StaticControl({\n  node,\n  name,\n  spec,\n  value,\n}: {\n  node: ComponentNode\n  name: string\n  spec: PropField\n  value: PropValue | undefined\n}) {\n  const builder = useBuilder()\n  const current = value?.kind === 'static' ? value.value : (spec.default as JsonValue | undefined)\n  const id = `prop-${node.id}-${name}`\n  const coalesceKey = `${node.id}:${name}`\n\n  function set(v: JsonValue) {\n    builder.dispatch({ type: 'setProp', id: node.id, name, value: staticProp(v), coalesceKey })\n  }\n  function clear() {\n    builder.dispatch({ type: 'removeProp', id: node.id, name })\n  }\n\n  // EC-190: validate with the prop's field-def value validator (was `spec.schema.safeParse`).\n  const valid = current === undefined || fieldValueValidator({ ...spec, name } as FieldDef)(current)\n  // EC-190: derive the editor control from the field `type` + optional `form.control`.\n  const kind = controlKind(spec)\n  // Select options live on the `select` field-def (was `spec.control.options`).\n  const options: readonly SelectOption[] = spec.type === 'select' ? spec.options : []\n\n  let control\n  if (kind === 'boolean') {\n    control = (\n      <label className=\"flex h-8 items-center gap-2 text-sm\">\n        <input\n          id={id}\n          type=\"checkbox\"\n          checked={current === true}\n          onChange={(e) => set(e.target.checked)}\n          className=\"size-4 accent-primary\"\n        />\n        <Text size=\"sm\" tone=\"muted\">\n          {current === true ? 'true' : 'false'}\n        </Text>\n      </label>\n    )\n  } else if (kind === 'select') {\n    control = (\n      <Select\n        id={id}\n        value={String(current ?? '')}\n        onChange={(e) => {\n          // EC-190: select option values are strings (field-def `options`).\n          const opt = options.find((o) => o.value === e.target.value)\n          set(opt ? opt.value : e.target.value)\n        }}\n      >\n        {options.map((opt) => (\n          <option key={opt.value} value={opt.value}>\n            {opt.label ?? opt.value}\n          </option>\n        ))}\n      </Select>\n    )\n  } else if (kind === 'number') {\n    control = <NumberControl id={id} current={current} onSet={set} onClear={clear} />\n  } else if (kind === 'json') {\n    control = <JsonControl id={id} current={current} onSet={set} />\n  } else if (kind === 'color') {\n    control = (\n      <Row gap=\"2\">\n        <input\n          id={id}\n          type=\"color\"\n          value={\n            typeof current === 'string' && /^#[0-9a-f]{6}$/i.test(current) ? current : '#000000'\n          }\n          onChange={(e) => set(e.target.value)}\n          className=\"h-8 w-10 shrink-0 rounded-md border border-input bg-background\"\n        />\n        <Input\n          value={typeof current === 'string' ? current : ''}\n          onChange={(e) => set(e.target.value)}\n        />\n      </Row>\n    )\n  } else if (kind === 'textarea' || kind === 'richtext') {\n    control = (\n      <textarea\n        id={id}\n        rows={2}\n        value={typeof current === 'string' ? current : ''}\n        onChange={(e) => set(e.target.value)}\n        className=\"flex w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-sm text-foreground shadow-sm focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40 outline-none\"\n      />\n    )\n  } else if (kind === 'asset' || kind === 'object' || kind === 'relation') {\n    // EC-195/EC-253/EC-262: reuse the CMS field control. `asset` = library picker +\n    // preview; `object` = the nested/repeater form; `relation` = the document picker\n    // (resolves the ref to its title, instead of stringifying it to \"[object Object]\").\n    // All edit a structured static prop value through the same shared control documents use.\n    control = (\n      <FieldControl\n        id={id}\n        field={{ ...spec, name } as FieldDef}\n        value={current}\n        onChange={(v) => (v === undefined || v === null ? clear() : set(v as JsonValue))}\n        readOnly={false}\n      />\n    )\n  } else {\n    control = (\n      <Input\n        id={id}\n        value={typeof current === 'string' ? current : String(current ?? '')}\n        onChange={(e) => set(e.target.value)}\n      />\n    )\n  }\n\n  return (\n    <Stack gap=\"1\">\n      {control}\n      {!valid ? (\n        <Text size=\"xs\" className=\"text-destructive\">\n          Value doesn't match the prop schema — the canvas falls back to the default.\n        </Text>\n      ) : null}\n    </Stack>\n  )\n}\n\n/** Number input with a local buffer: commits only finite values, never NaN; empty clears the prop. */\nfunction NumberControl({\n  id,\n  current,\n  onSet,\n  onClear,\n}: {\n  id: string\n  current: JsonValue | undefined\n  onSet: (v: number) => void\n  onClear: () => void\n}) {\n  const [raw, setRaw] = useState(typeof current === 'number' ? String(current) : '')\n  useEffect(() => {\n    setRaw(typeof current === 'number' ? String(current) : '')\n  }, [current])\n  return (\n    <Input\n      id={id}\n      type=\"number\"\n      value={raw}\n      onChange={(e) => {\n        const v = e.target.value\n        setRaw(v)\n        if (v.trim() === '') {\n          onClear()\n          return\n        }\n        const n = Number(v)\n        if (Number.isFinite(n)) onSet(n)\n      }}\n    />\n  )\n}\n\n/** JSON textarea with a local buffer: commits only when the text parses; flags parse errors. */\nfunction JsonControl({\n  id,\n  current,\n  onSet,\n}: {\n  id: string\n  current: JsonValue | undefined\n  onSet: (v: JsonValue) => void\n}) {\n  const [raw, setRaw] = useState(() => JSON.stringify(current ?? null))\n  const [error, setError] = useState<string | null>(null)\n  useEffect(() => {\n    setRaw(JSON.stringify(current ?? null))\n    setError(null)\n  }, [current])\n  return (\n    <Stack gap=\"1\">\n      <textarea\n        id={id}\n        rows={3}\n        value={raw}\n        onChange={(e) => {\n          const v = e.target.value\n          setRaw(v)\n          try {\n            onSet(JSON.parse(v) as JsonValue)\n            setError(null)\n          } catch {\n            setError('Invalid JSON')\n          }\n        }}\n        className=\"flex w-full rounded-md border border-input bg-background px-2.5 py-1.5 font-mono text-xs text-foreground shadow-sm focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40 outline-none\"\n      />\n      {error ? (\n        <Text size=\"xs\" className=\"text-destructive\">\n          {error}\n        </Text>\n      ) : null}\n    </Stack>\n  )\n}\n\n"]}
+{"version":3,"file":"property-inspector.js","sourceRoot":"","sources":["../../../src/components/builder/property-inspector.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useState } from 'react'\nimport { staticProp } from '@elytracms/core/project-graph'\nimport type { ComponentNode, JsonValue, PropValue } from '@elytracms/core/project-graph'\nimport type { ComponentManifest, PropField } from '@elytracms/core/component-registry'\nimport { manifestSlots } from '@elytracms/core/component-registry'\nimport { fieldValueValidator } from '@elytracms/core/cms-core'\nimport type { FieldDef, SelectOption } from '@elytracms/core/cms-core'\nimport { getStudioRegistry } from '@elytracms/studio/lib/registry'\nimport {\n  Badge,\n  Code,\n  Field,\n  Input,\n  InspectorSection,\n  PanelHeader,\n  Row,\n  Select,\n  Spacer,\n  Stack,\n  Text,\n} from '@elytracms/studio/ui'\nimport { humanizeName } from '@elytracms/studio/lib/utils'\nimport { componentDisplayName } from '@elytracms/studio/lib/persona/labels'\nimport { FieldControl } from '../cms/field-control'\nimport { FieldDensityProvider } from '../cms/field-density'\nimport { useBuilder } from './builder-store'\nimport { LayoutSection, layoutManagedPropNames } from './layout-inspector'\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          Select a node in the tree or canvas to edit its properties.\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          Inspector\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 (named child regions), edited via the page\n  // tree / composition surface, not as a scalar control — so they show in the\n  // Slots section, not Props.\n  const props = manifest\n    ? Object.entries(manifest.props).filter(\n        ([name, spec]) => !layoutManaged.has(name) && spec.type !== 'blocks',\n      )\n    : []\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\">unknown component</Badge>\n          <Text size=\"xs\" tone=\"muted\" className=\"mt-2\">\n            No manifest is registered for this component, so its props can't be edited.\n          </Text>\n        </div>\n      ) : (\n        <InspectorSection title=\"Props\">\n          {props.length === 0 ? (\n            <Text size=\"xs\" tone=\"subtle\">\n              No editable props.\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=\"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'}>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            Add or reorder slot children from the page tree.\n          </Text>\n        </InspectorSection>\n      ) : null}\n    </>\n  )\n}\n\nfunction PropField({ node, name, spec }: { node: ComponentNode; name: string; spec: PropField }) {\n  const value = node.props?.[name]\n\n  return (\n    <Field label={spec.form?.label ?? name} htmlFor={`prop-${node.id}-${name}`}>\n      <StaticControl node={node} name={name} spec={spec} value={value} />\n    </Field>\n  )\n}\n\n/**\n * EC-190: the inspector control to render for a prop field-def. The old\n * `control.kind` vocabulary derives from the field `type` plus the optional\n * `form.control` presentation hint on `text` fields. Slice 3 unifies this with\n * the CMS `FieldControl`; for now it keeps the existing per-kind control set.\n */\ntype ControlKind =\n  | 'text'\n  | 'textarea'\n  | 'number'\n  | 'boolean'\n  | 'select'\n  | 'json'\n  | 'color'\n  | 'richtext'\n  | 'asset'\n  | 'object'\n  | 'relation'\nfunction controlKind(spec: PropField): ControlKind {\n  switch (spec.type) {\n    case 'boolean':\n      return 'boolean'\n    case 'number':\n      return 'number'\n    case 'select':\n      return 'select'\n    case 'richText':\n      return 'richtext'\n    // EC-195: an `asset`-typed prop (e.g. the Image `src`) picks from the asset\n    // library — never a raw asset id typed into a text box (the EC-192 persona).\n    case 'asset':\n      return 'asset'\n    // EC-253: an `object`/repeater prop reuses the CMS repeater control below.\n    case 'object':\n      return 'object'\n    // EC-262: a `relation`-typed prop (e.g. a ProductGrid's `category`) reuses the\n    // CMS relation picker — never a text box that stringifies the ref to \"[object Object]\".\n    case 'relation':\n      return 'relation'\n    case 'text': {\n      const c = spec.form?.control\n      if (c === 'textarea') return 'textarea'\n      if (c === 'color') return 'color'\n      if (c === 'json') return 'json'\n      return 'text'\n    }\n    default:\n      return 'text'\n  }\n}\n\nfunction StaticControl({\n  node,\n  name,\n  spec,\n  value,\n}: {\n  node: ComponentNode\n  name: string\n  spec: PropField\n  value: PropValue | undefined\n}) {\n  const builder = useBuilder()\n  const current = value?.kind === 'static' ? value.value : (spec.default as JsonValue | undefined)\n  const id = `prop-${node.id}-${name}`\n  const coalesceKey = `${node.id}:${name}`\n\n  function set(v: JsonValue) {\n    builder.dispatch({ type: 'setProp', id: node.id, name, value: staticProp(v), coalesceKey })\n  }\n  function clear() {\n    builder.dispatch({ type: 'removeProp', id: node.id, name })\n  }\n\n  // EC-190: validate with the prop's field-def value validator (was `spec.schema.safeParse`).\n  const valid = current === undefined || fieldValueValidator({ ...spec, name } as FieldDef)(current)\n  // EC-190: derive the editor control from the field `type` + optional `form.control`.\n  const kind = controlKind(spec)\n  // Select options live on the `select` field-def (was `spec.control.options`).\n  const options: readonly SelectOption[] = spec.type === 'select' ? spec.options : []\n\n  let control\n  if (kind === 'boolean') {\n    control = (\n      <label className=\"flex h-8 items-center gap-2 text-sm\">\n        <input\n          id={id}\n          type=\"checkbox\"\n          checked={current === true}\n          onChange={(e) => set(e.target.checked)}\n          className=\"size-4 accent-primary\"\n        />\n        <Text size=\"sm\" tone=\"muted\">\n          {current === true ? 'true' : 'false'}\n        </Text>\n      </label>\n    )\n  } else if (kind === 'select') {\n    control = (\n      <Select\n        id={id}\n        value={String(current ?? '')}\n        onChange={(e) => {\n          // EC-190: select option values are strings (field-def `options`).\n          const opt = options.find((o) => o.value === e.target.value)\n          set(opt ? opt.value : e.target.value)\n        }}\n      >\n        {options.map((opt) => (\n          <option key={opt.value} value={opt.value}>\n            {opt.label ?? opt.value}\n          </option>\n        ))}\n      </Select>\n    )\n  } else if (kind === 'number') {\n    control = <NumberControl id={id} current={current} onSet={set} onClear={clear} />\n  } else if (kind === 'json') {\n    control = <JsonControl id={id} current={current} onSet={set} />\n  } else if (kind === 'color') {\n    control = (\n      <Row gap=\"2\">\n        <input\n          id={id}\n          type=\"color\"\n          value={\n            typeof current === 'string' && /^#[0-9a-f]{6}$/i.test(current) ? current : '#000000'\n          }\n          onChange={(e) => set(e.target.value)}\n          className=\"h-8 w-10 shrink-0 rounded-md border border-input bg-background\"\n        />\n        <Input\n          value={typeof current === 'string' ? current : ''}\n          onChange={(e) => set(e.target.value)}\n        />\n      </Row>\n    )\n  } else if (kind === 'textarea' || kind === 'richtext') {\n    control = (\n      <textarea\n        id={id}\n        rows={2}\n        value={typeof current === 'string' ? current : ''}\n        onChange={(e) => set(e.target.value)}\n        className=\"flex w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-sm text-foreground shadow-sm focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40 outline-none\"\n      />\n    )\n  } else if (kind === 'asset' || kind === 'object' || kind === 'relation') {\n    // EC-195/EC-253/EC-262: reuse the CMS field control. `asset` = library picker +\n    // preview; `object` = the nested/repeater form; `relation` = the document picker\n    // (resolves the ref to its title, instead of stringifying it to \"[object Object]\").\n    // All edit a structured static prop value through the same shared control documents use.\n    control = (\n      <FieldDensityProvider density=\"compact\">\n        <FieldControl\n          id={id}\n          field={{ ...spec, name } as FieldDef}\n          value={current}\n          onChange={(v) => (v === undefined || v === null ? clear() : set(v as JsonValue))}\n          readOnly={false}\n        />\n      </FieldDensityProvider>\n    )\n  } else {\n    control = (\n      <Input\n        id={id}\n        value={typeof current === 'string' ? current : String(current ?? '')}\n        onChange={(e) => set(e.target.value)}\n      />\n    )\n  }\n\n  return (\n    <Stack gap=\"1\">\n      {control}\n      {!valid ? (\n        <Text size=\"xs\" className=\"text-destructive\">\n          Value doesn't match the prop schema — the canvas falls back to the default.\n        </Text>\n      ) : null}\n    </Stack>\n  )\n}\n\n/** Number input with a local buffer: commits only finite values, never NaN; empty clears the prop. */\nfunction NumberControl({\n  id,\n  current,\n  onSet,\n  onClear,\n}: {\n  id: string\n  current: JsonValue | undefined\n  onSet: (v: number) => void\n  onClear: () => void\n}) {\n  const [raw, setRaw] = useState(typeof current === 'number' ? String(current) : '')\n  useEffect(() => {\n    setRaw(typeof current === 'number' ? String(current) : '')\n  }, [current])\n  return (\n    <Input\n      id={id}\n      type=\"number\"\n      value={raw}\n      onChange={(e) => {\n        const v = e.target.value\n        setRaw(v)\n        if (v.trim() === '') {\n          onClear()\n          return\n        }\n        const n = Number(v)\n        if (Number.isFinite(n)) onSet(n)\n      }}\n    />\n  )\n}\n\n/** JSON textarea with a local buffer: commits only when the text parses; flags parse errors. */\nfunction JsonControl({\n  id,\n  current,\n  onSet,\n}: {\n  id: string\n  current: JsonValue | undefined\n  onSet: (v: JsonValue) => void\n}) {\n  const [raw, setRaw] = useState(() => JSON.stringify(current ?? null))\n  const [error, setError] = useState<string | null>(null)\n  useEffect(() => {\n    setRaw(JSON.stringify(current ?? null))\n    setError(null)\n  }, [current])\n  return (\n    <Stack gap=\"1\">\n      <textarea\n        id={id}\n        rows={3}\n        value={raw}\n        onChange={(e) => {\n          const v = e.target.value\n          setRaw(v)\n          try {\n            onSet(JSON.parse(v) as JsonValue)\n            setError(null)\n          } catch {\n            setError('Invalid JSON')\n          }\n        }}\n        className=\"flex w-full rounded-md border border-input bg-background px-2.5 py-1.5 font-mono text-xs text-foreground shadow-sm focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40 outline-none\"\n      />\n      {error ? (\n        <Text size=\"xs\" className=\"text-destructive\">\n          {error}\n        </Text>\n      ) : null}\n    </Stack>\n  )\n}\n\n"]}

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

@@ -2,11 +2,15 @@
  * 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.
+ * 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).
  */
-export declare function AssetPicker({ value, open, onOpenChange, onChange, }: {
+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). */
+    accept?: string;
 }): import("react").JSX.Element | null;