entangle-ui 0.9.0 → 0.11.0

package/dist/esm/components/editor/AssetBrowser/assetBrowserGeometry.js

@@ -0,0 +1,70 @@
+/** Thumbnail edge length (px) for the named scales. */
+const THUMB_PX = {
+    sm: 72,
+    md: 104,
+    lg: 144,
+};
+const CELL_PADDING = 6;
+const LABEL_HEIGHT = 32;
+const GRID_GAP = 8;
+function resolveThumbPx(size) {
+    if (typeof size === 'number')
+        return Math.max(32, size);
+    return THUMB_PX[size];
+}
+function cellWidth(thumbPx) {
+    return thumbPx + CELL_PADDING * 2 + 2; // + border
+}
+function cellHeight(thumbPx) {
+    return thumbPx + CELL_PADDING * 2 + LABEL_HEIGHT + 2;
+}
+function rowHeight(thumbPx) {
+    return cellHeight(thumbPx) + GRID_GAP;
+}
+/** How many columns fit in `width` px of usable (padding-excluded) space. */
+function columnsFor(width, thumbPx) {
+    if (width <= 0)
+        return 1;
+    const stride = cellWidth(thumbPx) + GRID_GAP;
+    return Math.max(1, Math.floor((width + GRID_GAP) / stride));
+}
+/** Content-space rectangle of the item at `index` for a given column count. */
+function itemRect(index, columns, thumbPx) {
+    const cols = Math.max(1, columns);
+    const col = index % cols;
+    const row = Math.floor(index / cols);
+    const stride = cellWidth(thumbPx) + GRID_GAP;
+    return {
+        x: col * stride,
+        y: row * rowHeight(thumbPx),
+        width: cellWidth(thumbPx),
+        height: cellHeight(thumbPx),
+    };
+}
+function rectsIntersect(a, b) {
+    return (a.x < b.x + b.width &&
+        a.x + a.width > b.x &&
+        a.y < b.y + b.height &&
+        a.y + a.height > b.y);
+}
+/**
+ * Stable DOM id for a grid cell, namespaced by the grid's `useId`. Used to
+ * wire the grid's `aria-activedescendant` to the roving-focus cell. CSS.escape
+ * is unnecessary — this is set on the element's `id`/attribute as a raw value,
+ * never used in a selector.
+ */
+function cellDomId(gridId, assetId) {
+    return `${gridId}-cell-${assetId}`;
+}
+/** Normalize two content-space points into a positive-size rectangle. */
+function rectFromPoints(ax, ay, bx, by) {
+    return {
+        x: Math.min(ax, bx),
+        y: Math.min(ay, by),
+        width: Math.abs(ax - bx),
+        height: Math.abs(ay - by),
+    };
+}
+
+export { CELL_PADDING, GRID_GAP, LABEL_HEIGHT, THUMB_PX, cellDomId, cellHeight, cellWidth, columnsFor, itemRect, rectFromPoints, rectsIntersect, resolveThumbPx, rowHeight };
+//# sourceMappingURL=assetBrowserGeometry.js.map

package/dist/esm/components/editor/AssetBrowser/assetBrowserGeometry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"assetBrowserGeometry.js","sources":["src/components/editor/AssetBrowser/assetBrowserGeometry.ts"],"sourcesContent":["import type { AssetThumbnailSize } from './AssetBrowser.types';\nimport type { MarqueeRect } from './AssetBrowserStore';\n\n/** Thumbnail edge length (px) for the named scales. */\nexport const THUMB_PX: Record<'sm' | 'md' | 'lg', number> = {\n  sm: 72,\n  md: 104,\n  lg: 144,\n};\n\nexport const CELL_PADDING = 6;\nexport const LABEL_HEIGHT = 32;\nexport const GRID_GAP = 8;\n\nexport function resolveThumbPx(size: AssetThumbnailSize): number {\n  if (typeof size === 'number') return Math.max(32, size);\n  return THUMB_PX[size];\n}\n\nexport function cellWidth(thumbPx: number): number {\n  return thumbPx + CELL_PADDING * 2 + 2; // + border\n}\n\nexport function cellHeight(thumbPx: number): number {\n  return thumbPx + CELL_PADDING * 2 + LABEL_HEIGHT + 2;\n}\n\nexport function rowHeight(thumbPx: number): number {\n  return cellHeight(thumbPx) + GRID_GAP;\n}\n\n/** How many columns fit in `width` px of usable (padding-excluded) space. */\nexport function columnsFor(width: number, thumbPx: number): number {\n  if (width <= 0) return 1;\n  const stride = cellWidth(thumbPx) + GRID_GAP;\n  return Math.max(1, Math.floor((width + GRID_GAP) / stride));\n}\n\n/** Content-space rectangle of the item at `index` for a given column count. */\nexport function itemRect(\n  index: number,\n  columns: number,\n  thumbPx: number\n): MarqueeRect {\n  const cols = Math.max(1, columns);\n  const col = index % cols;\n  const row = Math.floor(index / cols);\n  const stride = cellWidth(thumbPx) + GRID_GAP;\n  return {\n    x: col * stride,\n    y: row * rowHeight(thumbPx),\n    width: cellWidth(thumbPx),\n    height: cellHeight(thumbPx),\n  };\n}\n\nexport function rectsIntersect(a: MarqueeRect, b: MarqueeRect): boolean {\n  return (\n    a.x < b.x + b.width &&\n    a.x + a.width > b.x &&\n    a.y < b.y + b.height &&\n    a.y + a.height > b.y\n  );\n}\n\n/**\n * Stable DOM id for a grid cell, namespaced by the grid's `useId`. Used to\n * wire the grid's `aria-activedescendant` to the roving-focus cell. CSS.escape\n * is unnecessary — this is set on the element's `id`/attribute as a raw value,\n * never used in a selector.\n */\nexport function cellDomId(gridId: string, assetId: string): string {\n  return `${gridId}-cell-${assetId}`;\n}\n\n/** Normalize two content-space points into a positive-size rectangle. */\nexport function rectFromPoints(\n  ax: number,\n  ay: number,\n  bx: number,\n  by: number\n): MarqueeRect {\n  return {\n    x: Math.min(ax, bx),\n    y: Math.min(ay, by),\n    width: Math.abs(ax - bx),\n    height: Math.abs(ay - by),\n  };\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/components/editor/AssetBrowser/assetBrowserKeyboard.js

@@ -0,0 +1,62 @@
+/**
+ * Pure 2D grid keyboard navigation. Given the focused index and a key, return
+ * the next index. Returns the clamped target, or the original index when the
+ * key is not a navigation key or the move would leave the grid.
+ */
+function nextGridIndex(current, key, params) {
+    const { count } = params;
+    if (count === 0)
+        return -1;
+    const columns = Math.max(1, params.columns);
+    const rowsPerPage = Math.max(1, params.rowsPerPage);
+    const last = count - 1;
+    const clamp = (n) => Math.min(last, Math.max(0, n));
+    // Starting from "nothing focused", any nav key lands on the first item.
+    if (current < 0) {
+        switch (key) {
+            case 'ArrowRight':
+            case 'ArrowDown':
+            case 'ArrowLeft':
+            case 'ArrowUp':
+            case 'Home':
+            case 'PageUp':
+                return 0;
+            case 'End':
+            case 'PageDown':
+                return last;
+            default:
+                return current;
+        }
+    }
+    switch (key) {
+        case 'ArrowRight':
+            return current < last ? current + 1 : current;
+        case 'ArrowLeft':
+            return current > 0 ? current - 1 : current;
+        case 'ArrowDown': {
+            const target = current + columns;
+            return target <= last ? target : current;
+        }
+        case 'ArrowUp': {
+            const target = current - columns;
+            return target >= 0 ? target : current;
+        }
+        case 'Home':
+            return 0;
+        case 'End':
+            return last;
+        case 'PageDown':
+            return clamp(current + columns * rowsPerPage);
+        case 'PageUp':
+            return clamp(current - columns * rowsPerPage);
+        default:
+            return current;
+    }
+}
+/** Inclusive index range between two indices, regardless of order. */
+function indexRange(a, b) {
+    return a <= b ? [a, b] : [b, a];
+}
+
+export { indexRange, nextGridIndex };
+//# sourceMappingURL=assetBrowserKeyboard.js.map

package/dist/esm/components/editor/AssetBrowser/assetBrowserKeyboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"assetBrowserKeyboard.js","sources":["src/components/editor/AssetBrowser/assetBrowserKeyboard.ts"],"sourcesContent":["export interface GridNavParams {\n  /** Number of columns currently laid out. */\n  columns: number;\n  /** Total item count. */\n  count: number;\n  /** Rows that fit in one viewport — used by PageUp/PageDown. */\n  rowsPerPage: number;\n}\n\n/**\n * Pure 2D grid keyboard navigation. Given the focused index and a key, return\n * the next index. Returns the clamped target, or the original index when the\n * key is not a navigation key or the move would leave the grid.\n */\nexport function nextGridIndex(\n  current: number,\n  key: string,\n  params: GridNavParams\n): number {\n  const { count } = params;\n  if (count === 0) return -1;\n\n  const columns = Math.max(1, params.columns);\n  const rowsPerPage = Math.max(1, params.rowsPerPage);\n  const last = count - 1;\n  const clamp = (n: number): number => Math.min(last, Math.max(0, n));\n\n  // Starting from \"nothing focused\", any nav key lands on the first item.\n  if (current < 0) {\n    switch (key) {\n      case 'ArrowRight':\n      case 'ArrowDown':\n      case 'ArrowLeft':\n      case 'ArrowUp':\n      case 'Home':\n      case 'PageUp':\n        return 0;\n      case 'End':\n      case 'PageDown':\n        return last;\n      default:\n        return current;\n    }\n  }\n\n  switch (key) {\n    case 'ArrowRight':\n      return current < last ? current + 1 : current;\n    case 'ArrowLeft':\n      return current > 0 ? current - 1 : current;\n    case 'ArrowDown': {\n      const target = current + columns;\n      return target <= last ? target : current;\n    }\n    case 'ArrowUp': {\n      const target = current - columns;\n      return target >= 0 ? target : current;\n    }\n    case 'Home':\n      return 0;\n    case 'End':\n      return last;\n    case 'PageDown':\n      return clamp(current + columns * rowsPerPage);\n    case 'PageUp':\n      return clamp(current - columns * rowsPerPage);\n    default:\n      return current;\n  }\n}\n\n/** Inclusive index range between two indices, regardless of order. */\nexport function indexRange(a: number, b: number): [number, number] {\n  return a <= b ? [a, b] : [b, a];\n}\n"],"names":[],"mappings":"AASA;;;;AAIG;SACa,aAAa,CAC3B,OAAe,EACf,GAAW,EACX,MAAqB,EAAA;AAErB,IAAA,MAAM,EAAE,KAAK,EAAE,GAAG,MAAM;IACxB,IAAI,KAAK,KAAK,CAAC;QAAE,OAAO,EAAE;AAE1B,IAAA,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC;AAC3C,IAAA,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,WAAW,CAAC;AACnD,IAAA,MAAM,IAAI,GAAG,KAAK,GAAG,CAAC;IACtB,MAAM,KAAK,GAAG,CAAC,CAAS,KAAa,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;;AAGnE,IAAA,IAAI,OAAO,GAAG,CAAC,EAAE;QACf,QAAQ,GAAG;AACT,YAAA,KAAK,YAAY;AACjB,YAAA,KAAK,WAAW;AAChB,YAAA,KAAK,WAAW;AAChB,YAAA,KAAK,SAAS;AACd,YAAA,KAAK,MAAM;AACX,YAAA,KAAK,QAAQ;AACX,gBAAA,OAAO,CAAC;AACV,YAAA,KAAK,KAAK;AACV,YAAA,KAAK,UAAU;AACb,gBAAA,OAAO,IAAI;AACb,YAAA;AACE,gBAAA,OAAO,OAAO;;IAEpB;IAEA,QAAQ,GAAG;AACT,QAAA,KAAK,YAAY;AACf,YAAA,OAAO,OAAO,GAAG,IAAI,GAAG,OAAO,GAAG,CAAC,GAAG,OAAO;AAC/C,QAAA,KAAK,WAAW;AACd,YAAA,OAAO,OAAO,GAAG,CAAC,GAAG,OAAO,GAAG,CAAC,GAAG,OAAO;QAC5C,KAAK,WAAW,EAAE;AAChB,YAAA,MAAM,MAAM,GAAG,OAAO,GAAG,OAAO;YAChC,OAAO,MAAM,IAAI,IAAI,GAAG,MAAM,GAAG,OAAO;QAC1C;QACA,KAAK,SAAS,EAAE;AACd,YAAA,MAAM,MAAM,GAAG,OAAO,GAAG,OAAO;YAChC,OAAO,MAAM,IAAI,CAAC,GAAG,MAAM,GAAG,OAAO;QACvC;AACA,QAAA,KAAK,MAAM;AACT,YAAA,OAAO,CAAC;AACV,QAAA,KAAK,KAAK;AACR,YAAA,OAAO,IAAI;AACb,QAAA,KAAK,UAAU;YACb,OAAO,KAAK,CAAC,OAAO,GAAG,OAAO,GAAG,WAAW,CAAC;AAC/C,QAAA,KAAK,QAAQ;YACX,OAAO,KAAK,CAAC,OAAO,GAAG,OAAO,GAAG,WAAW,CAAC;AAC/C,QAAA;AACE,YAAA,OAAO,OAAO;;AAEpB;AAEA;AACM,SAAU,UAAU,CAAC,CAAS,EAAE,CAAS,EAAA;AAC7C,IAAA,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC;AACjC;;;;"}

package/dist/esm/components/editor/AssetBrowser/assetBrowserLabels.js

@@ -0,0 +1,52 @@
+const DEFAULT_ASSET_BROWSER_LABELS = {
+    searchPlaceholder: 'Search assets…',
+    viewModeAria: 'View mode',
+    gridViewTooltip: 'Grid view',
+    listViewTooltip: 'List view',
+    gridAria: 'Assets',
+    sort: 'Sort',
+    sortAscending: 'Ascending',
+    sortDescending: 'Descending',
+    filter: 'Filter',
+    back: 'Back',
+    forward: 'Forward',
+    thumbnailSizeAria: 'Thumbnail size',
+    empty: 'This folder is empty.',
+    loading: 'Loading assets…',
+    errorTitle: 'Couldn’t load assets',
+    errorDescription: 'Something went wrong while loading this folder.',
+    retry: 'Retry',
+    importOverlay: 'Drop files to import',
+    folder: 'Folder',
+    rename: 'Rename',
+    delete: 'Delete',
+    duplicate: 'Duplicate',
+    newFolder: 'New folder',
+    sortFields: {
+        name: 'Name',
+        type: 'Type',
+        size: 'Size',
+        modified: 'Modified',
+    },
+    itemCount: count => `${count} item${count === 1 ? '' : 's'}`,
+    selectedCount: count => `, ${count} selected`,
+};
+/**
+ * Merge a consumer's partial `labels` onto the English defaults. `sortFields`
+ * is merged one level deep so overriding a single column label keeps the rest.
+ */
+function resolveLabels(overrides) {
+    if (!overrides)
+        return DEFAULT_ASSET_BROWSER_LABELS;
+    return {
+        ...DEFAULT_ASSET_BROWSER_LABELS,
+        ...overrides,
+        sortFields: {
+            ...DEFAULT_ASSET_BROWSER_LABELS.sortFields,
+            ...overrides.sortFields,
+        },
+    };
+}
+
+export { DEFAULT_ASSET_BROWSER_LABELS, resolveLabels };
+//# sourceMappingURL=assetBrowserLabels.js.map

package/dist/esm/components/editor/AssetBrowser/assetBrowserLabels.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"assetBrowserLabels.js","sources":["src/components/editor/AssetBrowser/assetBrowserLabels.ts"],"sourcesContent":["import type { AssetSortField } from './AssetBrowser.types';\n\n/**\n * Every user-facing string in the AssetBrowser chrome. Pass a partial\n * `labels` prop to translate or reword any subset; unspecified keys fall back\n * to {@link DEFAULT_ASSET_BROWSER_LABELS} (English).\n *\n * The `*Aria` keys are accessible names (screen-reader only); the rest are\n * visible text. `sortFields` maps each sortable field id to its menu/column\n * label. `itemCount` / `selectedCount` build the live-region announcement and\n * receive the relevant counts.\n */\nexport interface AssetBrowserLabels {\n  /** Search input placeholder. @default \"Search assets…\" */\n  searchPlaceholder: string;\n  /** Accessible name of the view-mode toggle. @default \"View mode\" */\n  viewModeAria: string;\n  /** Grid-view tooltip. @default \"Grid view\" */\n  gridViewTooltip: string;\n  /** List-view tooltip. @default \"List view\" */\n  listViewTooltip: string;\n  /** Accessible name of the grid region. @default \"Assets\" */\n  gridAria: string;\n  /** Sort menu trigger. @default \"Sort\" */\n  sort: string;\n  /** Ascending radio item. @default \"Ascending\" */\n  sortAscending: string;\n  /** Descending radio item. @default \"Descending\" */\n  sortDescending: string;\n  /** Filter menu trigger. @default \"Filter\" */\n  filter: string;\n  /** Back button accessible name. @default \"Back\" */\n  back: string;\n  /** Forward button accessible name. @default \"Forward\" */\n  forward: string;\n  /** Thumbnail-size control accessible name. @default \"Thumbnail size\" */\n  thumbnailSizeAria: string;\n  /** Default empty-folder message. @default \"This folder is empty.\" */\n  empty: string;\n  /** Loading message (list view) / skeleton aria. @default \"Loading assets…\" */\n  loading: string;\n  /** Built-in error title. @default \"Couldn’t load assets\" */\n  errorTitle: string;\n  /** Built-in error description. */\n  errorDescription: string;\n  /** Retry button. @default \"Retry\" */\n  retry: string;\n  /** File-import drop overlay. @default \"Drop files to import\" */\n  importOverlay: string;\n  /** List \"Type\" value for folders. @default \"Folder\" */\n  folder: string;\n  /** Rename default-action label + rename-field accessible name. @default \"Rename\" */\n  rename: string;\n  /** Delete default-action label. @default \"Delete\" */\n  delete: string;\n  /** Duplicate default-action label. @default \"Duplicate\" */\n  duplicate: string;\n  /** New-folder default-action label. @default \"New folder\" */\n  newFolder: string;\n  /** Per-sort-field labels (also the list column headers). */\n  sortFields: Record<AssetSortField, string>;\n  /** Live-region item count, e.g. `n => \\`${n} items\\``. */\n  itemCount: (count: number) => string;\n  /** Live-region selected count suffix, e.g. `n => \\`, ${n} selected\\``. */\n  selectedCount: (count: number) => string;\n}\n\nexport const DEFAULT_ASSET_BROWSER_LABELS: AssetBrowserLabels = {\n  searchPlaceholder: 'Search assets…',\n  viewModeAria: 'View mode',\n  gridViewTooltip: 'Grid view',\n  listViewTooltip: 'List view',\n  gridAria: 'Assets',\n  sort: 'Sort',\n  sortAscending: 'Ascending',\n  sortDescending: 'Descending',\n  filter: 'Filter',\n  back: 'Back',\n  forward: 'Forward',\n  thumbnailSizeAria: 'Thumbnail size',\n  empty: 'This folder is empty.',\n  loading: 'Loading assets…',\n  errorTitle: 'Couldn’t load assets',\n  errorDescription: 'Something went wrong while loading this folder.',\n  retry: 'Retry',\n  importOverlay: 'Drop files to import',\n  folder: 'Folder',\n  rename: 'Rename',\n  delete: 'Delete',\n  duplicate: 'Duplicate',\n  newFolder: 'New folder',\n  sortFields: {\n    name: 'Name',\n    type: 'Type',\n    size: 'Size',\n    modified: 'Modified',\n  },\n  itemCount: count => `${count} item${count === 1 ? '' : 's'}`,\n  selectedCount: count => `, ${count} selected`,\n};\n\n/**\n * Merge a consumer's partial `labels` onto the English defaults. `sortFields`\n * is merged one level deep so overriding a single column label keeps the rest.\n */\nexport function resolveLabels(\n  overrides: Partial<AssetBrowserLabels> | undefined\n): AssetBrowserLabels {\n  if (!overrides) return DEFAULT_ASSET_BROWSER_LABELS;\n  return {\n    ...DEFAULT_ASSET_BROWSER_LABELS,\n    ...overrides,\n    sortFields: {\n      ...DEFAULT_ASSET_BROWSER_LABELS.sortFields,\n      ...overrides.sortFields,\n    },\n  };\n}\n"],"names":[],"mappings":"AAmEO,MAAM,4BAA4B,GAAuB;AAC9D,IAAA,iBAAiB,EAAE,gBAAgB;AACnC,IAAA,YAAY,EAAE,WAAW;AACzB,IAAA,eAAe,EAAE,WAAW;AAC5B,IAAA,eAAe,EAAE,WAAW;AAC5B,IAAA,QAAQ,EAAE,QAAQ;AAClB,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,aAAa,EAAE,WAAW;AAC1B,IAAA,cAAc,EAAE,YAAY;AAC5B,IAAA,MAAM,EAAE,QAAQ;AAChB,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,iBAAiB,EAAE,gBAAgB;AACnC,IAAA,KAAK,EAAE,uBAAuB;AAC9B,IAAA,OAAO,EAAE,iBAAiB;AAC1B,IAAA,UAAU,EAAE,sBAAsB;AAClC,IAAA,gBAAgB,EAAE,iDAAiD;AACnE,IAAA,KAAK,EAAE,OAAO;AACd,IAAA,aAAa,EAAE,sBAAsB;AACrC,IAAA,MAAM,EAAE,QAAQ;AAChB,IAAA,MAAM,EAAE,QAAQ;AAChB,IAAA,MAAM,EAAE,QAAQ;AAChB,IAAA,SAAS,EAAE,WAAW;AACtB,IAAA,SAAS,EAAE,YAAY;AACvB,IAAA,UAAU,EAAE;AACV,QAAA,IAAI,EAAE,MAAM;AACZ,QAAA,IAAI,EAAE,MAAM;AACZ,QAAA,IAAI,EAAE,MAAM;AACZ,QAAA,QAAQ,EAAE,UAAU;AACrB,KAAA;AACD,IAAA,SAAS,EAAE,KAAK,IAAI,CAAA,EAAG,KAAK,CAAA,KAAA,EAAQ,KAAK,KAAK,CAAC,GAAG,EAAE,GAAG,GAAG,CAAA,CAAE;AAC5D,IAAA,aAAa,EAAE,KAAK,IAAI,CAAA,EAAA,EAAK,KAAK,CAAA,SAAA,CAAW;;AAG/C;;;AAGG;AACG,SAAU,aAAa,CAC3B,SAAkD,EAAA;AAElD,IAAA,IAAI,CAAC,SAAS;AAAE,QAAA,OAAO,4BAA4B;IACnD,OAAO;AACL,QAAA,GAAG,4BAA4B;AAC/B,QAAA,GAAG,SAAS;AACZ,QAAA,UAAU,EAAE;YACV,GAAG,4BAA4B,CAAC,UAAU;YAC1C,GAAG,SAAS,CAAC,UAAU;AACxB,SAAA;KACF;AACH;;;;"}

package/dist/esm/components/editor/AssetBrowser/slots.js

@@ -0,0 +1,18 @@
+/**
+ * Symbol marker identifying an AssetBrowser compound slot. Survives
+ * `React.memo`, function wrapping, and minification — unlike `displayName`.
+ */
+const ASSET_BROWSER_SLOT = Symbol.for('etui.assetBrowser.slot');
+/** Tags a component function with its slot kind. */
+function markSlot(component, kind) {
+    component[ASSET_BROWSER_SLOT] = kind;
+    return component;
+}
+/** Reads the slot kind off a React element's component type, or `null`. */
+function getSlotKind(el) {
+    const type = el.type;
+    return type?.[ASSET_BROWSER_SLOT] ?? null;
+}
+
+export { ASSET_BROWSER_SLOT, getSlotKind, markSlot };
+//# sourceMappingURL=slots.js.map

package/dist/esm/components/editor/AssetBrowser/slots.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slots.js","sources":["src/components/editor/AssetBrowser/slots.ts"],"sourcesContent":["import type React from 'react';\n\n/**\n * Symbol marker identifying an AssetBrowser compound slot. Survives\n * `React.memo`, function wrapping, and minification — unlike `displayName`.\n */\nexport const ASSET_BROWSER_SLOT: unique symbol = Symbol.for(\n  'etui.assetBrowser.slot'\n);\n\nexport type AssetBrowserSlotKind = 'toolbar' | 'sidebar';\n\ninterface SlotMarker {\n  [ASSET_BROWSER_SLOT]: AssetBrowserSlotKind;\n}\n\n/** Tags a component function with its slot kind. */\nexport function markSlot<T>(component: T, kind: AssetBrowserSlotKind): T {\n  (component as unknown as SlotMarker)[ASSET_BROWSER_SLOT] = kind;\n  return component;\n}\n\n/** Reads the slot kind off a React element's component type, or `null`. */\nexport function getSlotKind(\n  el: React.ReactElement\n): AssetBrowserSlotKind | null {\n  const type = el.type as Partial<SlotMarker> | null | undefined;\n  return type?.[ASSET_BROWSER_SLOT] ?? null;\n}\n"],"names":[],"mappings":"AAEA;;;AAGG;AACI,MAAM,kBAAkB,GAAkB,MAAM,CAAC,GAAG,CACzD,wBAAwB;AAS1B;AACM,SAAU,QAAQ,CAAI,SAAY,EAAE,IAA0B,EAAA;AACjE,IAAA,SAAmC,CAAC,kBAAkB,CAAC,GAAG,IAAI;AAC/D,IAAA,OAAO,SAAS;AAClB;AAEA;AACM,SAAU,WAAW,CACzB,EAAsB,EAAA;AAEtB,IAAA,MAAM,IAAI,GAAG,EAAE,CAAC,IAA8C;AAC9D,IAAA,OAAO,IAAI,GAAG,kBAAkB,CAAC,IAAI,IAAI;AAC3C;;;;"}

package/dist/esm/components/editor/AssetBrowser/useAssetBrowserAnnouncement.js

@@ -0,0 +1,19 @@
+"use client";
+import { useAssetBrowserContext, useAssetSelection } from './AssetBrowserContext.js';
+
+/**
+ * The polite-live a11y announcement string ("N items, M selected"). Subscribes
+ * to the displayed-items count from the item context and the selection-size
+ * slice from the store, so consumers can use it inside a tightly-scoped
+ * subcomponent without lifting the value to the root.
+ */
+function useAssetBrowserAnnouncement() {
+    const { displayedItems, labels } = useAssetBrowserContext();
+    const selectionSet = useAssetSelection();
+    const count = displayedItems.length;
+    const selected = selectionSet.size;
+    return `${labels.itemCount(count)}${selected > 0 ? labels.selectedCount(selected) : ''}`;
+}
+
+export { useAssetBrowserAnnouncement };
+//# sourceMappingURL=useAssetBrowserAnnouncement.js.map

package/dist/esm/components/editor/AssetBrowser/useAssetBrowserAnnouncement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAssetBrowserAnnouncement.js","sources":["src/components/editor/AssetBrowser/useAssetBrowserAnnouncement.ts"],"sourcesContent":["'use client';\n\nimport {\n  useAssetBrowserContext,\n  useAssetSelection,\n} from './AssetBrowserContext';\n\n/**\n * The polite-live a11y announcement string (\"N items, M selected\"). Subscribes\n * to the displayed-items count from the item context and the selection-size\n * slice from the store, so consumers can use it inside a tightly-scoped\n * subcomponent without lifting the value to the root.\n */\nexport function useAssetBrowserAnnouncement(): string {\n  const { displayedItems, labels } = useAssetBrowserContext();\n  const selectionSet = useAssetSelection();\n  const count = displayedItems.length;\n  const selected = selectionSet.size;\n  return `${labels.itemCount(count)}${selected > 0 ? labels.selectedCount(selected) : ''}`;\n}\n"],"names":[],"mappings":";;;AAOA;;;;;AAKG;;;AAGD;AACA;AACA;;AAEF;;"}

package/dist/esm/components/editor/AssetBrowser/useAssetBrowserHandle.js

@@ -0,0 +1,70 @@
+"use client";
+import { useCallback, useImperativeHandle } from 'react';
+import '../../../utils/devWarn.js';
+import { useLatest } from '../../../hooks/useLatest/useLatest.js';
+import '../../../hooks/useBreakpoint/useBreakpoint.js';
+import './../../../assets/src/theme/lightTheme.css.ts.vanilla-Ct6f9Iym.css';
+import '@vanilla-extract/css';
+import './../../../assets/src/theme/darkTheme.css.ts.vanilla-BHZ3ecRn.css';
+import 'react/jsx-runtime';
+import './../../../assets/src/theme/globalScrollbars.css.ts.vanilla-BAJwnUEJ.css';
+import '../../../hooks/useNavigationHistory/useNavigationHistory.js';
+
+function cssEscape(value) {
+    if (typeof CSS !== 'undefined' && typeof CSS.escape === 'function') {
+        return CSS.escape(value);
+    }
+    return value.replace(/["\\]/g, '\\$&');
+}
+/**
+ * Wires the imperative `AssetBrowserHandle` onto the consumer-provided ref.
+ * Each handle method has a stable identity (`useCallback`) and reads the latest
+ * props through `useLatest` refs, so the handle object is built once and its
+ * methods always see the latest props. `scrollToItem` prefers the
+ * store-registered grid scroller (works under virtualization) and falls back
+ * to a `data-asset-id` DOM query for the list view or when no grid is mounted.
+ */
+function useAssetBrowserHandle(options) {
+    const { ref, rootRef, store, items, displayed, selectAll, clearSelection, beginRename, } = options;
+    const itemsRef = useLatest(items);
+    const displayedRef = useLatest(displayed);
+    const focus = useCallback(() => {
+        rootRef.current?.focus();
+    }, [rootRef]);
+    const getElement = useCallback(() => rootRef.current, [rootRef]);
+    const scrollToItem = useCallback((id) => {
+        store.setFocusedId(id);
+        const index = displayedRef.current.findIndex(it => it.id === id);
+        if (index >= 0 && store.scrollToIndex(index))
+            return;
+        const el = rootRef.current?.querySelector(`[data-asset-id="${cssEscape(id)}"]`);
+        el?.scrollIntoView({ block: 'nearest' });
+    }, [store, rootRef, displayedRef]);
+    const getSelectedItems = useCallback(() => itemsRef.current.filter(it => store.getSelection().has(it.id)), [store, itemsRef]);
+    const beginRenameHandle = useCallback((id) => {
+        // Bring the target into view first so the rename field is visible even
+        // when it was outside the virtualization window.
+        scrollToItem(id);
+        beginRename(id);
+    }, [scrollToItem, beginRename]);
+    useImperativeHandle(ref, () => ({
+        focus,
+        getElement,
+        selectAll,
+        clearSelection,
+        scrollToItem,
+        getSelectedItems,
+        beginRename: beginRenameHandle,
+    }), [
+        focus,
+        getElement,
+        selectAll,
+        clearSelection,
+        scrollToItem,
+        getSelectedItems,
+        beginRenameHandle,
+    ]);
+}
+
+export { useAssetBrowserHandle };
+//# sourceMappingURL=useAssetBrowserHandle.js.map

package/dist/esm/components/editor/AssetBrowser/useAssetBrowserHandle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAssetBrowserHandle.js","sources":["src/components/editor/AssetBrowser/useAssetBrowserHandle.ts"],"sourcesContent":["'use client';\n\nimport { useCallback, useImperativeHandle } from 'react';\n\nimport { useLatest } from '@/hooks';\n\nimport type { AssetBrowserHandle, AssetItem } from './AssetBrowser.types';\nimport type { AssetBrowserStore } from './AssetBrowserStore';\nimport type { Ref, RefObject } from 'react';\n\nfunction cssEscape(value: string): string {\n  if (typeof CSS !== 'undefined' && typeof CSS.escape === 'function') {\n    return CSS.escape(value);\n  }\n  return value.replace(/[\"\\\\]/g, '\\\\$&');\n}\n\nexport interface UseAssetBrowserHandleOptions {\n  ref: Ref<AssetBrowserHandle> | undefined;\n  rootRef: RefObject<HTMLDivElement | null>;\n  store: AssetBrowserStore;\n  /** Latest `items` — read by `getSelectedItems`. */\n  items: readonly AssetItem[];\n  /** Latest displayed (filtered + sorted) list — used to resolve scroll targets. */\n  displayed: readonly AssetItem[];\n  selectAll: () => void;\n  clearSelection: () => void;\n  /** Stable mutation handler — enters inline rename for an id. */\n  beginRename: (id: string) => void;\n}\n\n/**\n * Wires the imperative `AssetBrowserHandle` onto the consumer-provided ref.\n * Each handle method has a stable identity (`useCallback`) and reads the latest\n * props through `useLatest` refs, so the handle object is built once and its\n * methods always see the latest props. `scrollToItem` prefers the\n * store-registered grid scroller (works under virtualization) and falls back\n * to a `data-asset-id` DOM query for the list view or when no grid is mounted.\n */\nexport function useAssetBrowserHandle(\n  options: UseAssetBrowserHandleOptions\n): void {\n  const {\n    ref,\n    rootRef,\n    store,\n    items,\n    displayed,\n    selectAll,\n    clearSelection,\n    beginRename,\n  } = options;\n\n  const itemsRef = useLatest(items);\n  const displayedRef = useLatest(displayed);\n\n  const focus = useCallback((): void => {\n    rootRef.current?.focus();\n  }, [rootRef]);\n\n  const getElement = useCallback(\n    (): HTMLDivElement | null => rootRef.current,\n    [rootRef]\n  );\n\n  const scrollToItem = useCallback(\n    (id: string): void => {\n      store.setFocusedId(id);\n      const index = displayedRef.current.findIndex(it => it.id === id);\n      if (index >= 0 && store.scrollToIndex(index)) return;\n      const el = rootRef.current?.querySelector(\n        `[data-asset-id=\"${cssEscape(id)}\"]`\n      );\n      el?.scrollIntoView({ block: 'nearest' });\n    },\n    [store, rootRef, displayedRef]\n  );\n\n  const getSelectedItems = useCallback(\n    (): AssetItem[] =>\n      itemsRef.current.filter(it => store.getSelection().has(it.id)),\n    [store, itemsRef]\n  );\n\n  const beginRenameHandle = useCallback(\n    (id: string): void => {\n      // Bring the target into view first so the rename field is visible even\n      // when it was outside the virtualization window.\n      scrollToItem(id);\n      beginRename(id);\n    },\n    [scrollToItem, beginRename]\n  );\n\n  useImperativeHandle(\n    ref,\n    (): AssetBrowserHandle => ({\n      focus,\n      getElement,\n      selectAll,\n      clearSelection,\n      scrollToItem,\n      getSelectedItems,\n      beginRename: beginRenameHandle,\n    }),\n    [\n      focus,\n      getElement,\n      selectAll,\n      clearSelection,\n      scrollToItem,\n      getSelectedItems,\n      beginRenameHandle,\n    ]\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAUA;AACE;AACE;;;AAGJ;AAgBA;;;;;;;AAOG;AACG;AAGJ;AAWA;AACA;AAEA;AACE;AACF;AAEA;AAKA;AAEI;AACA;;;AAEA;;;AAQJ;AAMA;;;;;AAME;AAIF;;;;;;;AASI;AACD;;;;;;;;AASA;AAEL;;"}

package/dist/esm/components/editor/AssetBrowser/useAssetBrowserViewState.js

@@ -0,0 +1,108 @@
+"use client";
+import { useDeferredValue, useMemo } from 'react';
+import '../../../utils/devWarn.js';
+import { useControlledState } from '../../../hooks/useControlledState/useControlledState.js';
+import '../../../hooks/useBreakpoint/useBreakpoint.js';
+import './../../../assets/src/theme/lightTheme.css.ts.vanilla-Ct6f9Iym.css';
+import '@vanilla-extract/css';
+import './../../../assets/src/theme/darkTheme.css.ts.vanilla-BHZ3ecRn.css';
+import 'react/jsx-runtime';
+import './../../../assets/src/theme/globalScrollbars.css.ts.vanilla-BAJwnUEJ.css';
+import '../../../hooks/useNavigationHistory/useNavigationHistory.js';
+import { collectTypes, shapeAssets } from './assetBrowserFilter.js';
+import { resolveThumbPx } from './assetBrowserGeometry.js';
+
+const DEFAULT_SORT = { field: 'name', direction: 'asc' };
+/**
+ * View-state aggregate for `AssetBrowser`. Wraps the five `useControlledState`
+ * pairs (view / thumbnailSize / search / filters / sort) and computes the
+ * derived values (`thumbnailSizePx`, `filterableTypes`, `displayed`,
+ * `marqueeEnabled`). Search is run through `useDeferredValue` so heavy filter
+ * + sort passes can lag behind responsive keystrokes.
+ */
+function useAssetBrowserViewState(options) {
+    const [view, setView] = useControlledState({
+        value: options.view,
+        defaultValue: options.defaultView,
+        onChange: options.onViewChange,
+        fallback: 'grid',
+    });
+    const [thumbnailSize, setThumbnailSize] = useControlledState({
+        value: options.thumbnailSize,
+        defaultValue: options.defaultThumbnailSize,
+        onChange: options.onThumbnailSizeChange,
+        fallback: 'md',
+    });
+    const [search, setSearch] = useControlledState({
+        value: options.search,
+        defaultValue: options.defaultSearch,
+        onChange: options.onSearchChange,
+        fallback: '',
+    });
+    const [filters, setFilters] = useControlledState({
+        value: options.filters,
+        defaultValue: options.defaultFilters,
+        onChange: options.onFiltersChange,
+        fallback: {},
+    });
+    const [sort, setSort] = useControlledState({
+        value: options.sort,
+        defaultValue: options.defaultSort,
+        onChange: options.onSortChange,
+        fallback: DEFAULT_SORT,
+    });
+    const deferredSearch = useDeferredValue(search);
+    const thumbnailSizePx = resolveThumbPx(thumbnailSize);
+    const marqueeEnabled = options.selectionMode === 'multiple' && options.marquee;
+    const filterableTypes = useMemo(() => options.filterableTypesProp ?? collectTypes(options.items), [options.filterableTypesProp, options.items]);
+    const displayed = useMemo(() => shapeAssets(options.items, {
+        search: deferredSearch,
+        filters,
+        sort,
+        manualSearch: options.manualSearch,
+        manualFilter: options.manualFilter,
+        manualSort: options.manualSort,
+    }), [
+        options.items,
+        deferredSearch,
+        filters,
+        sort,
+        options.manualSearch,
+        options.manualFilter,
+        options.manualSort,
+    ]);
+    return useMemo(() => ({
+        view,
+        setView,
+        thumbnailSize,
+        setThumbnailSize,
+        thumbnailSizePx,
+        search,
+        setSearch,
+        filters,
+        setFilters,
+        sort,
+        setSort,
+        filterableTypes,
+        displayed,
+        marqueeEnabled,
+    }), [
+        view,
+        setView,
+        thumbnailSize,
+        setThumbnailSize,
+        thumbnailSizePx,
+        search,
+        setSearch,
+        filters,
+        setFilters,
+        sort,
+        setSort,
+        filterableTypes,
+        displayed,
+        marqueeEnabled,
+    ]);
+}
+
+export { useAssetBrowserViewState };
+//# sourceMappingURL=useAssetBrowserViewState.js.map

package/dist/esm/components/editor/AssetBrowser/useAssetBrowserViewState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAssetBrowserViewState.js","sources":["src/components/editor/AssetBrowser/useAssetBrowserViewState.ts"],"sourcesContent":["'use client';\n\nimport { useDeferredValue, useMemo } from 'react';\n\nimport { useControlledState } from '@/hooks';\n\nimport { collectTypes, shapeAssets } from './assetBrowserFilter';\nimport { resolveThumbPx } from './assetBrowserGeometry';\n\nimport type {\n  AssetFilterState,\n  AssetItem,\n  AssetSortState,\n  AssetThumbnailSize,\n  AssetType,\n  AssetView,\n} from './AssetBrowser.types';\n\nconst DEFAULT_SORT: AssetSortState = { field: 'name', direction: 'asc' };\n\nexport interface UseAssetBrowserViewStateOptions {\n  items: readonly AssetItem[];\n  selectionMode: 'single' | 'multiple' | false;\n  marquee: boolean;\n\n  view?: AssetView;\n  defaultView?: AssetView;\n  onViewChange?: (view: AssetView) => void;\n\n  thumbnailSize?: AssetThumbnailSize;\n  defaultThumbnailSize?: AssetThumbnailSize;\n  onThumbnailSizeChange?: (size: AssetThumbnailSize) => void;\n\n  search?: string;\n  defaultSearch?: string;\n  onSearchChange?: (query: string) => void;\n  manualSearch: boolean;\n\n  filters?: AssetFilterState;\n  defaultFilters?: AssetFilterState;\n  onFiltersChange?: (filters: AssetFilterState) => void;\n  manualFilter: boolean;\n\n  sort?: AssetSortState;\n  defaultSort?: AssetSortState;\n  onSortChange?: (sort: AssetSortState) => void;\n  manualSort: boolean;\n\n  filterableTypesProp?: AssetType[];\n}\n\nexport interface AssetBrowserViewState {\n  view: AssetView;\n  setView: (view: AssetView) => void;\n  thumbnailSize: AssetThumbnailSize;\n  setThumbnailSize: (size: AssetThumbnailSize) => void;\n  thumbnailSizePx: number;\n  search: string;\n  setSearch: (query: string) => void;\n  filters: AssetFilterState;\n  setFilters: (filters: AssetFilterState) => void;\n  sort: AssetSortState;\n  setSort: (sort: AssetSortState) => void;\n  filterableTypes: string[];\n  /** Search (deferred) + filter + sort applied — what the views render. */\n  displayed: AssetItem[];\n  /** Resolved from `selectionMode === 'multiple'` and the `marquee` prop. */\n  marqueeEnabled: boolean;\n}\n\n/**\n * View-state aggregate for `AssetBrowser`. Wraps the five `useControlledState`\n * pairs (view / thumbnailSize / search / filters / sort) and computes the\n * derived values (`thumbnailSizePx`, `filterableTypes`, `displayed`,\n * `marqueeEnabled`). Search is run through `useDeferredValue` so heavy filter\n * + sort passes can lag behind responsive keystrokes.\n */\nexport function useAssetBrowserViewState(\n  options: UseAssetBrowserViewStateOptions\n): AssetBrowserViewState {\n  const [view, setView] = useControlledState<AssetView>({\n    value: options.view,\n    defaultValue: options.defaultView,\n    onChange: options.onViewChange,\n    fallback: 'grid',\n  });\n  const [thumbnailSize, setThumbnailSize] =\n    useControlledState<AssetThumbnailSize>({\n      value: options.thumbnailSize,\n      defaultValue: options.defaultThumbnailSize,\n      onChange: options.onThumbnailSizeChange,\n      fallback: 'md',\n    });\n  const [search, setSearch] = useControlledState<string>({\n    value: options.search,\n    defaultValue: options.defaultSearch,\n    onChange: options.onSearchChange,\n    fallback: '',\n  });\n  const [filters, setFilters] = useControlledState<AssetFilterState>({\n    value: options.filters,\n    defaultValue: options.defaultFilters,\n    onChange: options.onFiltersChange,\n    fallback: {},\n  });\n  const [sort, setSort] = useControlledState<AssetSortState>({\n    value: options.sort,\n    defaultValue: options.defaultSort,\n    onChange: options.onSortChange,\n    fallback: DEFAULT_SORT,\n  });\n\n  const deferredSearch = useDeferredValue(search);\n  const thumbnailSizePx = resolveThumbPx(thumbnailSize);\n  const marqueeEnabled =\n    options.selectionMode === 'multiple' && options.marquee;\n\n  const filterableTypes = useMemo(\n    () => options.filterableTypesProp ?? collectTypes(options.items),\n    [options.filterableTypesProp, options.items]\n  );\n\n  const displayed = useMemo(\n    () =>\n      shapeAssets(options.items, {\n        search: deferredSearch,\n        filters,\n        sort,\n        manualSearch: options.manualSearch,\n        manualFilter: options.manualFilter,\n        manualSort: options.manualSort,\n      }),\n    [\n      options.items,\n      deferredSearch,\n      filters,\n      sort,\n      options.manualSearch,\n      options.manualFilter,\n      options.manualSort,\n    ]\n  );\n\n  return useMemo(\n    () => ({\n      view,\n      setView,\n      thumbnailSize,\n      setThumbnailSize,\n      thumbnailSizePx,\n      search,\n      setSearch,\n      filters,\n      setFilters,\n      sort,\n      setSort,\n      filterableTypes,\n      displayed,\n      marqueeEnabled,\n    }),\n    [\n      view,\n      setView,\n      thumbnailSize,\n      setThumbnailSize,\n      thumbnailSizePx,\n      search,\n      setSearch,\n      filters,\n      setFilters,\n      sort,\n      setSort,\n      filterableTypes,\n      displayed,\n      marqueeEnabled,\n    ]\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAkBA;AAoDA;;;;;;AAMG;AACG;AAGJ;;;;AAIE;AACD;AACD;;;;AAKI;AACD;AACH;;;;AAIE;AACD;AACD;;;;AAIE;AACD;AACD;;;;AAIE;AACD;AAED;AACA;;AAIA;AAKA;AAGM;;;;;;AAMD;AAED;;;;AAIA;AACA;AACA;AACD;AAGH;;;;;;;;;;;;;;;AAgBG;;;;;;;;;;;;;;;AAgBA;AAEL;;"}