@elytracms/studio 0.0.87 → 0.0.88

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

@@ -1,9 +1,17 @@
+import type { AssetFieldDef } from '@elytracms/core/cms-core';
 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.
+ * side-effect-free so the media browser's "what shows", "what an upload may send" and
+ * "what a pick/upload commits" are unit-testable without a browser — the picker
+ * component is just the stage shell around these.
+ *
+ * EC-588: the picker takes the field's STRUCTURED `accept` list — the one shape the
+ * schema declares — and derives everything from it here or in core: the grid filter
+ * ({@link visiblePickerAssets}), the drop/upload split ({@link splitByAccept}), the
+ * file-input attribute (`assetAcceptAttr`, core), and the commit filter
+ * ({@link uploadBatchProgress}). An absent `accept` is unrestricted everywhere; there is
+ * no hidden `image/*` default.
  */
 /**
  * The stage width preset the media browser mounts with (EC-432 / EC-431 AD-A):
@@ -12,62 +20,70 @@ import type { AssetRecord } from '@elytracms/core/persistence';
  * (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[];
+export declare function visiblePickerAssets(assets: readonly AssetRecord[], query: string, accept: readonly 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.
+ * THE drop rule (EC-301 → EC-588): split files about to be uploaded into the ones the
+ * field's `accept` admits and the NAMES of the ones it refuses. A drag-drop bypasses
+ * the file dialog's soft filter, so every upload path — the field's drop zone, a drop
+ * into the open picker, the picker's Upload dialog — passes through this, and the
+ * caller names the refused files in a visible notice instead of uploading them.
  */
-export declare function uploadedSelection(before: Iterable<string>, after: readonly string[]): string | null;
+export declare function splitByAccept<F extends {
+    name: string;
+    type: string;
+}>(files: readonly F[], accept: readonly string[] | undefined): {
+    accepted: F[];
+    rejected: string[];
+};
 /**
- * One upload BATCH (EC-460): the pre-upload library snapshot plus how many
- * files the interaction submitted. The old flow tracked only `before` and
- * committed on the FIRST library growth — with N concurrent uploads landing at
- * different instants, files 2…N reached the library but never the field
- * (silent partial data loss, the EC-276 multi-upload symptom).
+ * One upload BATCH (EC-460): the upload-queue ids THIS interaction started.
+ *
+ * EC-588 A7: it used to be a pre-upload library snapshot, and whatever the library
+ * gained since was committed — so an upload from another tab (re-listed with ours) or
+ * from a sibling field's drop could land in this field. A batch now names exactly its
+ * own uploads, and the store reports which asset each one landed as.
  */
 export interface UploadBatch {
-    before: ReadonlySet<string>;
-    /** How many files this batch submitted (post `accept`-filter). */
-    expected: number;
+    uploadIds: readonly string[];
+}
+/** What batch progress reads from the assets store (`AssetsStore` satisfies it). */
+export interface UploadSource {
+    assets: readonly AssetRecord[];
+    uploads: readonly {
+        id: string;
+        state: {
+            phase: string;
+        };
+    }[];
+    /** The asset id an upload landed as, once its record is confirmed. */
+    landedAssetId(uploadId: string): string | undefined;
 }
 export interface UploadBatchProgress {
-    /** Every id the library gained since the batch started, in library order. */
+    /** The batch's landed asset ids that the field accepts, in upload order. */
     added: string[];
     /**
-     * The batch is finished: every expected file landed, OR nothing is uploading
-     * anymore (the remainder failed — visible in the upload queue, never awaited
-     * forever). Commit/attach decisions happen only once settled for `many`
-     * targets; a single-select target still commits on the first arrival.
+     * The batch is finished: none of its uploads is still running, and every one that
+     * landed is in the library. A failed (or dismissed) upload is terminal — it stays in
+     * the queue for retry and is never awaited forever. Commit/attach decisions happen
+     * only once settled for `many` targets; a single-select target commits on the first
+     * arrival.
      */
     settled: boolean;
 }
 /**
- * Where a batch stands, given the current library ids and how many uploads are
- * still in flight (non-terminal upload-queue entries). Pure — the picker and
- * the asset field both drive their effects with this.
+ * Where a batch stands. An upload is in one of four states: running (in the queue,
+ * not failed), landed-but-not-listed (the store confirmed it, the library re-list has
+ * not arrived), landed (attachable), or terminal (failed / dismissed). Only landed
+ * uploads whose RECORD satisfies `accept` are `added` (A7: the commit is filtered,
+ * not just the dialog). Pure — the picker and the asset field both drive their
+ * effects with this.
  */
-export declare function uploadBatchProgress(batch: UploadBatch, libraryIds: readonly string[], uploadsInFlight: number): UploadBatchProgress;
+export declare function uploadBatchProgress(batch: UploadBatch, source: UploadSource, accept: readonly string[] | undefined): UploadBatchProgress;
 /** The picker's commit callbacks — a pick fires `onChange` then closes the stage. */
 export interface PickerCommit {
     onChange: (assetId: string | null) => void;
@@ -90,3 +106,24 @@ export interface PickerCommitMany {
  * files in one picker interaction attaches all N, not just the first to land.
  */
 export declare function commitPickerSelectionMany(assetIds: string[], { onChangeMany, onOpenChange }: PickerCommitMany): void;
+/**
+ * The picker props a field's value position needs, derived from the field alone
+ * (EC-570 #1 → EC-588): the selected id, the field's structured `accept`, whether it
+ * holds many, and the commits — a pick through the carry rule (EC-558), a settled
+ * upload batch appended for a `many` field (EC-460).
+ */
+export interface AssetPickerBinding {
+    value: string | null;
+    accept?: readonly string[];
+    multiple: boolean;
+    onChange: (assetId: string | null) => void;
+    onChangeMany?: (assetIds: string[]) => void;
+}
+/**
+ * ONE picker configuration for every surface that edits an asset field — the detail
+ * editor and the table cell — so the two cannot drift. Before, the cell opened the
+ * picker with no `accept`, no `multiple` and no batch commit: its grid offered PDFs to
+ * an image field and an N-file upload attached one (EC-570 #1). `write` receives the
+ * next stored value; the caller decides how to land it (form state, cell commit).
+ */
+export declare function assetPickerBinding(field: Pick<AssetFieldDef, 'multiple' | 'accept' | 'fields'>, value: unknown, write: (next: unknown) => void): AssetPickerBinding;

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

@@ -1,11 +1,18 @@
 import { assetMatchesAccept } from '@elytracms/core/cms-core';
 import { filterAssets } from '../assets/asset-search.js';
-import { newlyAddedAssetIds } from '../assets/focal-point.js';
+import { appendAssetSelections, applyAssetSelection, assetPickForm, singleAssetIdOf, } from '../assets/asset-selection.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.
+ * side-effect-free so the media browser's "what shows", "what an upload may send" and
+ * "what a pick/upload commits" are unit-testable without a browser — the picker
+ * component is just the stage shell around these.
+ *
+ * EC-588: the picker takes the field's STRUCTURED `accept` list — the one shape the
+ * schema declares — and derives everything from it here or in core: the grid filter
+ * ({@link visiblePickerAssets}), the drop/upload split ({@link splitByAccept}), the
+ * file-input attribute (`assetAcceptAttr`, core), and the commit filter
+ * ({@link uploadBatchProgress}). An absent `accept` is unrestricted everywhere; there is
+ * no hidden `image/*` default.
  */
 /**
  * The stage width preset the media browser mounts with (EC-432 / EC-431 AD-A):
@@ -14,60 +21,62 @@ import { newlyAddedAssetIds } from '../assets/focal-point.js';
  * (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));
+    return filterAssets(assets, query).filter((asset) => assetMatchesAccept(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.
+ * THE drop rule (EC-301 → EC-588): split files about to be uploaded into the ones the
+ * field's `accept` admits and the NAMES of the ones it refuses. A drag-drop bypasses
+ * the file dialog's soft filter, so every upload path — the field's drop zone, a drop
+ * into the open picker, the picker's Upload dialog — passes through this, and the
+ * caller names the refused files in a visible notice instead of uploading them.
  */
-export function uploadedSelection(before, after) {
-    return newlyAddedAssetIds(before, after)[0] ?? null;
+export function splitByAccept(files, accept) {
+    const accepted = [];
+    const rejected = [];
+    for (const file of files) {
+        if (assetMatchesAccept({ contentType: file.type, filename: file.name }, accept))
+            accepted.push(file);
+        else
+            rejected.push(file.name);
+    }
+    return { accepted, rejected };
 }
 /**
- * Where a batch stands, given the current library ids and how many uploads are
- * still in flight (non-terminal upload-queue entries). Pure — the picker and
- * the asset field both drive their effects with this.
+ * Where a batch stands. An upload is in one of four states: running (in the queue,
+ * not failed), landed-but-not-listed (the store confirmed it, the library re-list has
+ * not arrived), landed (attachable), or terminal (failed / dismissed). Only landed
+ * uploads whose RECORD satisfies `accept` are `added` (A7: the commit is filtered,
+ * not just the dialog). Pure — the picker and the asset field both drive their
+ * effects with this.
  */
-export function uploadBatchProgress(batch, libraryIds, uploadsInFlight) {
-    const added = newlyAddedAssetIds(batch.before, libraryIds);
-    return {
-        added,
-        settled: added.length >= batch.expected || uploadsInFlight === 0,
-    };
+export function uploadBatchProgress(batch, source, accept) {
+    const running = new Set(source.uploads.filter((u) => u.state.phase !== 'failed').map((u) => u.id));
+    const library = new Map(source.assets.map((asset) => [asset.id, asset]));
+    const added = [];
+    let pending = false;
+    for (const uploadId of batch.uploadIds) {
+        if (running.has(uploadId)) {
+            pending = true;
+            continue;
+        }
+        const assetId = source.landedAssetId(uploadId);
+        if (assetId === undefined)
+            continue; // failed or dismissed — terminal
+        const record = library.get(assetId);
+        if (!record) {
+            pending = true; // confirmed, but the library re-list has not landed yet
+            continue;
+        }
+        if (assetMatchesAccept(record, accept))
+            added.push(assetId);
+    }
+    return { added, settled: !pending };
 }
 /**
  * Commit a picked asset (or a clear, `assetId === null`) and close the picker —
@@ -87,4 +96,22 @@ export function commitPickerSelectionMany(assetIds, { onChangeMany, onOpenChange
     onChangeMany(assetIds);
     onOpenChange(false);
 }
+/**
+ * ONE picker configuration for every surface that edits an asset field — the detail
+ * editor and the table cell — so the two cannot drift. Before, the cell opened the
+ * picker with no `accept`, no `multiple` and no batch commit: its grid offered PDFs to
+ * an image field and an N-file upload attached one (EC-570 #1). `write` receives the
+ * next stored value; the caller decides how to land it (form state, cell commit).
+ */
+export function assetPickerBinding(field, value, write) {
+    const form = assetPickForm(field);
+    const multiple = field.multiple;
+    return {
+        value: multiple ? null : singleAssetIdOf(value),
+        ...(field.accept ? { accept: field.accept } : {}),
+        multiple,
+        onChange: (picked) => write(applyAssetSelection(value, picked, multiple, form)),
+        ...(multiple ? { onChangeMany: (picked) => write(appendAssetSelections(value, picked, form)) } : {}),
+    };
+}
 //# sourceMappingURL=asset-picker-core.js.map

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

@@ -1 +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;AA2BD;;;;GAIG;AACH,MAAM,UAAU,mBAAmB,CACjC,KAAkB,EAClB,UAA6B,EAC7B,eAAuB;IAEvB,MAAM,KAAK,GAAG,kBAAkB,CAAC,KAAK,CAAC,MAAM,EAAE,UAAU,CAAC,CAAA;IAC1D,OAAO;QACL,KAAK;QACL,OAAO,EAAE,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,QAAQ,IAAI,eAAe,KAAK,CAAC;KACjE,CAAA;AACH,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;AAQD;;;;GAIG;AACH,MAAM,UAAU,yBAAyB,CACvC,QAAkB,EAClB,EAAE,YAAY,EAAE,YAAY,EAAoB;IAEhD,YAAY,CAAC,QAAQ,CAAC,CAAA;IACtB,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/**\n * One upload BATCH (EC-460): the pre-upload library snapshot plus how many\n * files the interaction submitted. The old flow tracked only `before` and\n * committed on the FIRST library growth — with N concurrent uploads landing at\n * different instants, files 2…N reached the library but never the field\n * (silent partial data loss, the EC-276 multi-upload symptom).\n */\nexport interface UploadBatch {\n  before: ReadonlySet<string>\n  /** How many files this batch submitted (post `accept`-filter). */\n  expected: number\n}\n\nexport interface UploadBatchProgress {\n  /** Every id the library gained since the batch started, in library order. */\n  added: string[]\n  /**\n   * The batch is finished: every expected file landed, OR nothing is uploading\n   * anymore (the remainder failed — visible in the upload queue, never awaited\n   * forever). Commit/attach decisions happen only once settled for `many`\n   * targets; a single-select target still commits on the first arrival.\n   */\n  settled: boolean\n}\n\n/**\n * Where a batch stands, given the current library ids and how many uploads are\n * still in flight (non-terminal upload-queue entries). Pure — the picker and\n * the asset field both drive their effects with this.\n */\nexport function uploadBatchProgress(\n  batch: UploadBatch,\n  libraryIds: readonly string[],\n  uploadsInFlight: number,\n): UploadBatchProgress {\n  const added = newlyAddedAssetIds(batch.before, libraryIds)\n  return {\n    added,\n    settled: added.length >= batch.expected || uploadsInFlight === 0,\n  }\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\n/** The multi-commit callbacks (EC-460): a settled upload batch on a `many` field. */\nexport interface PickerCommitMany {\n  onChangeMany: (assetIds: string[]) => void\n  onOpenChange: (open: boolean) => void\n}\n\n/**\n * Commit EVERY asset a settled upload batch added (EC-460) and close the picker —\n * the `many`-field counterpart of {@link commitPickerSelection}, so selecting N\n * files in one picker interaction attaches all N, not just the first to land.\n */\nexport function commitPickerSelectionMany(\n  assetIds: string[],\n  { onChangeMany, onOpenChange }: PickerCommitMany,\n): void {\n  onChangeMany(assetIds)\n  onOpenChange(false)\n}\n"]}
+{"version":3,"file":"asset-picker-core.js","sourceRoot":"","sources":["../../../src/components/cms/asset-picker-core.ts"],"names":[],"mappings":"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","sourcesContent":["import type { AssetFieldDef } from '@elytracms/core/cms-core'\nimport type { AssetRecord } from '@elytracms/core/persistence'\nimport { assetMatchesAccept } from '@elytracms/core/cms-core'\nimport { filterAssets } from '../assets/asset-search'\nimport {\n  appendAssetSelections,\n  applyAssetSelection,\n  assetPickForm,\n  singleAssetIdOf,\n} from '../assets/asset-selection'\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\", \"what an upload may send\" and\n * \"what a pick/upload commits\" are unit-testable without a browser — the picker\n * component is just the stage shell around these.\n *\n * EC-588: the picker takes the field's STRUCTURED `accept` list — the one shape the\n * schema declares — and derives everything from it here or in core: the grid filter\n * ({@link visiblePickerAssets}), the drop/upload split ({@link splitByAccept}), the\n * file-input attribute (`assetAcceptAttr`, core), and the commit filter\n * ({@link uploadBatchProgress}). An absent `accept` is unrestricted everywhere; there is\n * no hidden `image/*` default.\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 * 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: readonly string[] | undefined,\n): AssetRecord[] {\n  return filterAssets(assets, query).filter((asset) => assetMatchesAccept(asset, accept))\n}\n\n/**\n * THE drop rule (EC-301 → EC-588): split files about to be uploaded into the ones the\n * field's `accept` admits and the NAMES of the ones it refuses. A drag-drop bypasses\n * the file dialog's soft filter, so every upload path — the field's drop zone, a drop\n * into the open picker, the picker's Upload dialog — passes through this, and the\n * caller names the refused files in a visible notice instead of uploading them.\n */\nexport function splitByAccept<F extends { name: string; type: string }>(\n  files: readonly F[],\n  accept: readonly string[] | undefined,\n): { accepted: F[]; rejected: string[] } {\n  const accepted: F[] = []\n  const rejected: string[] = []\n  for (const file of files) {\n    if (assetMatchesAccept({ contentType: file.type, filename: file.name }, accept)) accepted.push(file)\n    else rejected.push(file.name)\n  }\n  return { accepted, rejected }\n}\n\n/**\n * One upload BATCH (EC-460): the upload-queue ids THIS interaction started.\n *\n * EC-588 A7: it used to be a pre-upload library snapshot, and whatever the library\n * gained since was committed — so an upload from another tab (re-listed with ours) or\n * from a sibling field's drop could land in this field. A batch now names exactly its\n * own uploads, and the store reports which asset each one landed as.\n */\nexport interface UploadBatch {\n  uploadIds: readonly string[]\n}\n\n/** What batch progress reads from the assets store (`AssetsStore` satisfies it). */\nexport interface UploadSource {\n  assets: readonly AssetRecord[]\n  uploads: readonly { id: string; state: { phase: string } }[]\n  /** The asset id an upload landed as, once its record is confirmed. */\n  landedAssetId(uploadId: string): string | undefined\n}\n\nexport interface UploadBatchProgress {\n  /** The batch's landed asset ids that the field accepts, in upload order. */\n  added: string[]\n  /**\n   * The batch is finished: none of its uploads is still running, and every one that\n   * landed is in the library. A failed (or dismissed) upload is terminal — it stays in\n   * the queue for retry and is never awaited forever. Commit/attach decisions happen\n   * only once settled for `many` targets; a single-select target commits on the first\n   * arrival.\n   */\n  settled: boolean\n}\n\n/**\n * Where a batch stands. An upload is in one of four states: running (in the queue,\n * not failed), landed-but-not-listed (the store confirmed it, the library re-list has\n * not arrived), landed (attachable), or terminal (failed / dismissed). Only landed\n * uploads whose RECORD satisfies `accept` are `added` (A7: the commit is filtered,\n * not just the dialog). Pure — the picker and the asset field both drive their\n * effects with this.\n */\nexport function uploadBatchProgress(\n  batch: UploadBatch,\n  source: UploadSource,\n  accept: readonly string[] | undefined,\n): UploadBatchProgress {\n  const running = new Set(source.uploads.filter((u) => u.state.phase !== 'failed').map((u) => u.id))\n  const library = new Map(source.assets.map((asset) => [asset.id, asset]))\n  const added: string[] = []\n  let pending = false\n  for (const uploadId of batch.uploadIds) {\n    if (running.has(uploadId)) {\n      pending = true\n      continue\n    }\n    const assetId = source.landedAssetId(uploadId)\n    if (assetId === undefined) continue // failed or dismissed — terminal\n    const record = library.get(assetId)\n    if (!record) {\n      pending = true // confirmed, but the library re-list has not landed yet\n      continue\n    }\n    if (assetMatchesAccept(record, accept)) added.push(assetId)\n  }\n  return { added, settled: !pending }\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\n/** The multi-commit callbacks (EC-460): a settled upload batch on a `many` field. */\nexport interface PickerCommitMany {\n  onChangeMany: (assetIds: string[]) => void\n  onOpenChange: (open: boolean) => void\n}\n\n/**\n * Commit EVERY asset a settled upload batch added (EC-460) and close the picker —\n * the `many`-field counterpart of {@link commitPickerSelection}, so selecting N\n * files in one picker interaction attaches all N, not just the first to land.\n */\nexport function commitPickerSelectionMany(\n  assetIds: string[],\n  { onChangeMany, onOpenChange }: PickerCommitMany,\n): void {\n  onChangeMany(assetIds)\n  onOpenChange(false)\n}\n\n/**\n * The picker props a field's value position needs, derived from the field alone\n * (EC-570 #1 → EC-588): the selected id, the field's structured `accept`, whether it\n * holds many, and the commits — a pick through the carry rule (EC-558), a settled\n * upload batch appended for a `many` field (EC-460).\n */\nexport interface AssetPickerBinding {\n  value: string | null\n  accept?: readonly string[]\n  multiple: boolean\n  onChange: (assetId: string | null) => void\n  onChangeMany?: (assetIds: string[]) => void\n}\n\n/**\n * ONE picker configuration for every surface that edits an asset field — the detail\n * editor and the table cell — so the two cannot drift. Before, the cell opened the\n * picker with no `accept`, no `multiple` and no batch commit: its grid offered PDFs to\n * an image field and an N-file upload attached one (EC-570 #1). `write` receives the\n * next stored value; the caller decides how to land it (form state, cell commit).\n */\nexport function assetPickerBinding(\n  field: Pick<AssetFieldDef, 'multiple' | 'accept' | 'fields'>,\n  value: unknown,\n  write: (next: unknown) => void,\n): AssetPickerBinding {\n  const form = assetPickForm(field)\n  const multiple = field.multiple\n  return {\n    value: multiple ? null : singleAssetIdOf(value),\n    ...(field.accept ? { accept: field.accept } : {}),\n    multiple,\n    onChange: (picked) => write(applyAssetSelection(value, picked, multiple, form)),\n    ...(multiple ? { onChangeMany: (picked: string[]) => write(appendAssetSelections(value, picked, form)) } : {}),\n  }\n}\n"]}

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

@@ -1,3 +1,17 @@
+import type { AssetsStore } from '../assets/assets-store.js';
+/** The picker's props — see {@link AssetPicker}. */
+export interface AssetPickerProps {
+    value: string | null;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onChange: (assetId: string | null) => void;
+    /** EC-460: commit a whole settled upload batch (a `many` field passes this). */
+    onChangeMany?: (assetIds: string[]) => void;
+    /** Whether the consuming field holds many assets (enables batch commit). */
+    multiple?: boolean;
+    /** The field's `accept` list (EC-588) — absent means any file. */
+    accept?: readonly string[];
+}
 /**
  * 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
@@ -14,24 +28,39 @@
  * 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. EC-460 adds an
- * OPTIONAL multi-commit pair (`multiple` + `onChangeMany`): a `many` asset field
- * passes both so uploading N files in ONE picker interaction attaches ALL N
- * (the old flow committed the first upload to land and closed — the rest
- * reached the library but never the field, silent partial data loss). Grid
- * clicks stay single-pick-and-close in every mode.
+ * The component CONTRACT (`{ open, onOpenChange, value, accept, onChange }`) serves
+ * every call site — asset fields, rich-text image insertion, editable cells. EC-460
+ * adds an OPTIONAL multi-commit pair (`multiple` + `onChangeMany`): a `many` asset
+ * field passes both so uploading N files in ONE picker interaction attaches ALL N
+ * (the old flow committed the first upload to land and closed — the rest reached the
+ * library but never the field, silent partial data loss). Grid clicks stay
+ * single-pick-and-close in every mode.
+ *
+ * EC-588: `accept` is the field's STRUCTURED list (it was a file-input string that the
+ * core re-split — two shapes for one fact). The grid filter, the file-input attribute
+ * and the drop/upload split all derive from it, and an absent `accept` is unrestricted
+ * everywhere (the Upload dialog used to fall back to `image/*`). A field-backed caller
+ * passes `assetPickerBinding`'s output (`asset-picker-core`) rather than wiring props
+ * by hand.
  */
-export declare function AssetPicker({ value, open, onOpenChange, onChange, onChangeMany, multiple, accept, }: {
-    value: string | null;
-    open: boolean;
-    onOpenChange: (open: boolean) => void;
-    onChange: (assetId: string | null) => void;
-    /** EC-460: commit a whole settled upload batch (a `many` field passes this). */
-    onChangeMany?: (assetIds: string[]) => void;
-    /** Whether the consuming field holds many assets (enables batch commit). */
-    multiple?: boolean;
-    /** The file input's `accept` attribute for in-picker upload + grid filter (field-derived). */
-    accept?: string;
+export declare function AssetPicker({ value, open, onOpenChange, onChange, onChangeMany, multiple, accept, }: AssetPickerProps): import("react").JSX.Element | null;
+/** The slice of the assets store the browser reads and drives. */
+export type AssetPickerStore = Pick<AssetsStore, 'status' | 'errorMessage' | 'assets' | 'uploads' | 'upload' | 'landedAssetId'>;
+/**
+ * The media browser itself — search, Upload, the grid, the drop zone — rendered inside
+ * the stage. A named component of its own (EC-588) so its markup is reachable by a
+ * node-env smoke render (the stage portal is `null` there): the file input's `accept`
+ * attribute and the grid's filter are pinned against the field's `accept`.
+ */
+export declare function AssetPickerBrowser({ store, value, onOpenChange, onChange, onChangeMany, multiple, accept, }: Omit<AssetPickerProps, 'open'> & {
+    store: AssetPickerStore;
+}): import("react").JSX.Element;
+/**
+ * The visible notice for files an upload path refused against the field's `accept`
+ * (EC-301 → EC-588): named, never silently dropped. Shared by the field's drop zone and
+ * the picker, which apply the same rule. Renders nothing when nothing was refused.
+ */
+export declare function AssetRejectedNotice({ rejected, accept, }: {
+    rejected: readonly string[];
+    accept: readonly string[] | undefined;
 }): import("react").JSX.Element | null;

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

@@ -1,13 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AlertTriangle, Check, ImageIcon, Search, Upload } from 'lucide-react';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import { assetAcceptAttr, describeAccept } from '@elytracms/core/cms-core';
 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 { AssetThumb } from '../assets/asset-thumb.js';
 import { AssetsProvider, useAssets, useOptionalAssets } from '../assets/assets-store.js';
 import { useCollectionView } from '../collection-view/collection-view-context.js';
-import { ASSET_PICKER_STAGE_PRESET, commitPickerSelection, commitPickerSelectionMany, uploadBatchProgress, visiblePickerAssets, } from './asset-picker-core.js';
+import { ASSET_PICKER_STAGE_PRESET, commitPickerSelection, commitPickerSelectionMany, splitByAccept, uploadBatchProgress, 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
@@ -24,14 +25,20 @@ import { ASSET_PICKER_STAGE_PRESET, commitPickerSelection, commitPickerSelection
  * 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. EC-460 adds an
- * OPTIONAL multi-commit pair (`multiple` + `onChangeMany`): a `many` asset field
- * passes both so uploading N files in ONE picker interaction attaches ALL N
- * (the old flow committed the first upload to land and closed — the rest
- * reached the library but never the field, silent partial data loss). Grid
- * clicks stay single-pick-and-close in every mode.
+ * The component CONTRACT (`{ open, onOpenChange, value, accept, onChange }`) serves
+ * every call site — asset fields, rich-text image insertion, editable cells. EC-460
+ * adds an OPTIONAL multi-commit pair (`multiple` + `onChangeMany`): a `many` asset
+ * field passes both so uploading N files in ONE picker interaction attaches ALL N
+ * (the old flow committed the first upload to land and closed — the rest reached the
+ * library but never the field, silent partial data loss). Grid clicks stay
+ * single-pick-and-close in every mode.
+ *
+ * EC-588: `accept` is the field's STRUCTURED list (it was a file-input string that the
+ * core re-split — two shapes for one fact). The grid filter, the file-input attribute
+ * and the drop/upload split all derive from it, and an absent `accept` is unrestricted
+ * everywhere (the Upload dialog used to fall back to `image/*`). A field-backed caller
+ * passes `assetPickerBinding`'s output (`asset-picker-core`) rather than wiring props
+ * by hand.
  */
 export function AssetPicker({ value, open, onOpenChange, onChange, onChangeMany, multiple = false, accept, }) {
     const source = useCollectionView();
@@ -51,52 +58,69 @@ export function AssetPicker({ value, open, onOpenChange, onChange, onChangeMany,
     return (_jsx(AssetsProvider, { projectId: source.projectId, children: _jsx(AssetPickerStage, { value: value, onOpenChange: onOpenChange, onChange: onChange, ...(onChangeMany ? { onChangeMany } : {}), multiple: multiple, accept: accept }) }));
 }
 /** The open media-browser stage over a mounted assets store. */
-function AssetPickerStage({ value, onOpenChange, onChange, onChangeMany, multiple = false, accept, }) {
+function AssetPickerStage(props) {
     const store = useAssets();
+    return (_jsx(ExpandableSurface, { title: translate('cms.asset.pickTitle'), closeLabel: translate('common.close'), variant: "stage", preset: ASSET_PICKER_STAGE_PRESET, onDismiss: () => props.onOpenChange(false), headerLeading: _jsx(ImageIcon, { className: "size-4 text-muted-foreground", "aria-hidden": true }), children: _jsx(AssetPickerBrowser, { store: store, ...props }) }));
+}
+/**
+ * The media browser itself — search, Upload, the grid, the drop zone — rendered inside
+ * the stage. A named component of its own (EC-588) so its markup is reachable by a
+ * node-env smoke render (the stage portal is `null` there): the file input's `accept`
+ * attribute and the grid's filter are pinned against the field's `accept`.
+ */
+export function AssetPickerBrowser({ store, value, onOpenChange, onChange, onChangeMany, multiple = false, accept, }) {
     // Fresh per open: the picker unmounts entirely while closed.
     const [query, setQuery] = useState('');
     const [dragging, setDragging] = useState(false);
+    // Names of files a drop/upload refused against the field's `accept` (EC-588) — shown
+    // as a visible notice and never uploaded. Cleared by the next upload attempt.
+    const [rejected, setRejected] = useState([]);
     const fileInputRef = useRef(null);
-    // The active upload BATCH (EC-460): pre-upload library snapshot + how many
-    // files the interaction submitted, so the effect below can attach the WHOLE
-    // batch (the `upload()` API returns nothing — the library diff is the signal).
+    // The active upload BATCH (EC-460): exactly the upload ids this interaction started
+    // (EC-588 A7), so the effect below attaches this batch's uploads and nothing else.
     const pendingRef = useRef(null);
     // Drag depth (EC-301): keeps the drop overlay steady as the pointer crosses
     // 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 = visiblePickerAssets(store.assets, query, accept);
-    const libraryIds = useMemo(() => store.assets.map((a) => a.id), [store.assets]);
-    // Uploads still running (failed entries are terminal — they stay in the queue
-    // for retry, and must not keep a batch waiting forever).
-    const uploadsInFlight = store.uploads.filter((u) => u.state.phase !== 'failed').length;
     // Auto-select what an in-picker upload added, then close. A `many` consumer
     // (multiple + onChangeMany) waits for the batch to SETTLE and commits every
     // added id — uploading 2 files attaches 2 (EC-460); a single consumer keeps
-    // the first-to-land commit.
+    // the first-to-land commit. Only uploads whose record satisfies `accept` commit.
     useEffect(() => {
         const batch = pendingRef.current;
         if (!batch)
             return;
-        const progress = uploadBatchProgress(batch, libraryIds, uploadsInFlight);
+        const progress = uploadBatchProgress(batch, store, accept);
         if (multiple && onChangeMany) {
-            if (!progress.settled || progress.added.length === 0)
+            if (!progress.settled)
                 return;
             pendingRef.current = null;
-            commitPickerSelectionMany(progress.added, { onChangeMany, onOpenChange });
+            if (progress.added.length > 0) {
+                commitPickerSelectionMany(progress.added, { onChangeMany, onOpenChange });
+            }
             return;
         }
         const picked = progress.added[0] ?? null;
-        if (picked === null)
+        if (picked === null) {
+            if (progress.settled)
+                pendingRef.current = null; // everything failed — disarm
             return;
+        }
         pendingRef.current = null;
         commitPickerSelection(picked, { onChange, onOpenChange });
-    }, [libraryIds, uploadsInFlight, multiple, onChange, onChangeMany, onOpenChange]);
+    }, [store, accept, multiple, onChange, onChangeMany, onOpenChange]);
     function handleUpload(files) {
         if (files.length === 0)
             return;
-        pendingRef.current = { before: new Set(libraryIds), expected: files.length };
-        store.upload(files);
+        // EC-588: the drop rule — the same split the field's drop zone uses. A drop
+        // bypasses the dialog's soft filter; refused files are named, never uploaded.
+        const { accepted, rejected: refused } = splitByAccept(files, accept);
+        setRejected(refused);
+        if (accepted.length === 0)
+            return;
+        pendingRef.current = { uploadIds: store.upload(accepted) };
     }
     // 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,
@@ -129,10 +153,25 @@ function AssetPickerStage({ value, onOpenChange, onChange, onChangeMany, multipl
         setDragging(false);
         handleUpload(Array.from(e.dataTransfer.files));
     }
-    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: "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] }) }));
+    return (_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: assetAcceptAttr(accept), className: "hidden", "data-testid": "asset-picker-file-input", onChange: (e) => {
+                            handleUpload(Array.from(e.target.files ?? []));
+                            e.target.value = '';
+                        } })] }), _jsx(AssetRejectedNotice, { rejected: rejected, accept: accept }), _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] }));
+}
+/**
+ * The visible notice for files an upload path refused against the field's `accept`
+ * (EC-301 → EC-588): named, never silently dropped. Shared by the field's drop zone and
+ * the picker, which apply the same rule. Renders nothing when nothing was refused.
+ */
+export function AssetRejectedNotice({ rejected, accept, }) {
+    if (rejected.length === 0)
+        return null;
+    return (_jsxs(Row, { gap: "2", align: "center", "data-testid": "asset-rejected-notice", children: [_jsx(AlertTriangle, { className: "size-4 shrink-0 text-warning" }), _jsx(Text, { size: "xs", tone: "muted", children: rejected.length === 1
+                    ? translate('cms.asset.rejected.one', { name: rejected[0], types: describeAccept(accept) })
+                    : translate('cms.asset.rejected.other', {
+                        count: rejected.length,
+                        types: describeAccept(accept),
+                    }) })] }));
 }
 /** 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). */