@ozankurt/file-chips 0.0.0-stage → 1.1.0

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# Changelog
+
+## 1.1.0
+
+- `@fileChipsStyles` and `@fileChipsScripts` add the published file's modification time as `?v=`, and the script tag carries the Vite CSP nonce.
+- TypeScript declarations (`dist/file-chips.d.ts`), including the `file-chips:change` event.
+- CI tests Laravel 11, 12 and 13.
+
+## 1.0.0
+
+- Initial release: framework-free file chips with a preview popover and mark-for-removal (`@ozankurt/file-chips` on npm), and a Laravel `<x-file-chips>` Blade component with optional Spatie Media Library support (`ozankurt/laravel-file-chips`).

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Ozan Kurt
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,221 @@
-# Temporary Holding Version
+# File Chips
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Compact file chips for forms and detail pages. Each chip opens a preview popover with a thumbnail, file details and View / Download links, and can mark the file for removal: a hidden input is added to your form and your server deletes the file on save.
+
+![An expense claim form with six file chips; the chip for client-dinner-receipt.jpg has opened a popover with a receipt thumbnail, the file size and date, a note, and View, Download and Remove on save buttons.](docs/images/popover-light.png)
+
+- **JavaScript + CSS** on npm as [`@ozankurt/file-chips`](https://www.npmjs.com/package/@ozankurt/file-chips): no dependencies, no framework, about 3 KB minified.
+- **Laravel** on Packagist as `ozankurt/laravel-file-chips`: a `<x-file-chips>` Blade component that renders the markup, with optional [Spatie Media Library](https://spatie.be/docs/laravel-medialibrary) support, and ships the same built JS and CSS.
+
+Both come from this one repository and share one markup contract, so you can use the Blade component, write the markup yourself, or render it from any other backend.
+
+## Laravel
+
+```bash
+composer require ozankurt/laravel-file-chips
+php artisan vendor:publish --tag=file-chips-assets
+```
+
+In your layout:
+
+```blade
+<head>
+    @fileChipsStyles
+</head>
+<body>
+    ...
+    @fileChipsScripts
+</body>
+```
+
+Both URLs carry the published file's modification time (`?v=...`), so browsers fetch the new files after you upgrade and publish the assets again. The script tag gets your CSP nonce when the app uses `Vite::useCspNonce()`.
+
+In a form:
+
+```blade
+<form method="POST" action="{{ route('posts.update', $post) }}">
+    @csrf
+    @method('PUT')
+    <x-file-chips :files="$post->getMedia('attachments')" input="delete_media_ids[]" />
+    <button>Save</button>
+</form>
+```
+
+```php
+// Controller
+foreach ($request->input('delete_media_ids', []) as $id) {
+    $post->media()->whereKey($id)->first()?->delete();
+}
+```
+
+Always scope the deletion to the owning model as above; the ids come from the browser.
+
+Marking a file adds the hidden input and strikes the chip through until the form is saved:
+
+![The PDF chip is outlined in red with its name struck through, and its popover shows a red Marked button.](docs/images/marked-light.png)
+
+### Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `files` | iterable of `Media`, `FileChip` or arrays | `[]` | The files to show. Renders nothing when empty. |
+| `input` | `string\|null` | `null` | Name of the hidden input that collects ids marked for removal. `null` hides the remove button. |
+| `id-prefix` | `string\|null` | derived | Prefix for the popover element ids. By default it is derived from the files and `input`, so it stays the same across re-renders (Livewire, Turbo, htmx). Set it when two lists on one page show the same files. |
+
+Other attributes (`id`, `class`, `data-*`, ...) go onto the wrapper `<div>`.
+
+### Files that are not Media Library models
+
+Pass arrays or `FileChip` objects:
+
+```blade
+<x-file-chips :files="[
+    ['id' => $doc->id, 'name' => $doc->filename, 'size' => $doc->bytes, 'view_url' => route('docs.show', $doc)],
+]" />
+```
+
+| Key | Required | Notes |
+|---|---|---|
+| `id` | yes | Sent back in the removal input |
+| `name` | yes | File name shown on the chip |
+| `extension` | no | Taken from `name` when missing |
+| `mime_type` | no | Used for the category when the extension is unknown |
+| `size` | no | Bytes (formatted for you) or a ready string |
+| `thumb_url`, `view_url`, `download_url` | no | `download_url` defaults to `view_url`. Only relative, `http(s):` and `blob:` URLs are kept (plus `data:image/...` for thumbnails); `javascript:` and other schemes are dropped. |
+| `excerpt` | no | Short text under the details |
+| `is_image` | no | Derived from extension and MIME type |
+| `created_at` | no | `DateTimeInterface` or a date string |
+
+`FileChip::fromMedia($media)` turns a Media Library model into a chip. S3 disks get temporary URLs; the download link adds a `Content-Disposition: attachment` header that keeps non-ASCII file names. Images browsers cannot show (HEIC, for example) get no thumbnail unless a thumb conversion exists.
+
+### Configuration
+
+```bash
+php artisan vendor:publish --tag=file-chips-config
+```
+
+| Key | Default | Description |
+|---|---|---|
+| `asset_path` | `vendor/file-chips` | Where the assets are published |
+| `icons` | `null` | Icon classes per category, e.g. `['pdf' => 'far fa-file-pdf', 'file' => 'far fa-file']`. `null` shows an extension badge, so no icon font is needed. |
+| `date_format` | `d M Y H:i` | Format of the "Added" date |
+| `thumb_conversion` | `thumb` | Media Library conversion used as thumbnail; `null` to skip |
+| `temporary_url_minutes` | `30` | Lifetime of temporary S3 view and thumbnail URLs |
+| `download_url_minutes` | `15` | Lifetime of temporary S3 download URLs |
+| `summary_property` | `summary` | Media custom property shown as excerpt; `null` to skip |
+| `summary_limit` | `160` | Excerpt length |
+
+Categories: `pdf`, `image`, `document`, `spreadsheet`, `presentation`, `archive`, `audio`, `video`, `code`, `email`, `file`.
+
+Labels are translatable (`php artisan vendor:publish --tag=file-chips-lang`), and the view can be published with `--tag=file-chips-views`.
+
+## JavaScript only
+
+```bash
+npm i @ozankurt/file-chips
+```
+
+```js
+import FileChips from '@ozankurt/file-chips';
+import '@ozankurt/file-chips/style.css';
+
+FileChips.init();
+```
+
+Or with script tags (starts automatically when the DOM is ready; add `data-manual` to the `<script>` tag to start it yourself):
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ozankurt/file-chips@1/dist/file-chips.min.css">
+<script src="https://cdn.jsdelivr.net/npm/@ozankurt/file-chips@1/dist/file-chips.min.js" defer></script>
+```
+
+### Markup contract
+
+```html
+<form>
+    <div class="fc-chips" data-file-chips>
+        <div data-file-chips-bucket hidden></div>
+
+        <button type="button" class="fc-chip" data-file-chip="doc-12" aria-controls="doc-12" aria-expanded="false">
+            <span class="fc-chip__ext">pdf</span>
+            <span class="fc-chip__name">contract.pdf</span>
+        </button>
+
+        <div id="doc-12" class="fc-popover" data-file-chip-popover hidden>
+            <!-- anything you like: thumbnail, details, links -->
+            <button type="button" class="fc-btn fc-btn--danger" data-file-chip-remove
+                    data-file-chip-id="12" data-file-chip-input="delete_ids[]"
+                    data-label-marked="Marked" data-label-unmarked="Remove on save" aria-pressed="false">
+                <span data-file-chip-remove-label>Remove on save</span>
+            </button>
+        </div>
+    </div>
+</form>
+```
+
+| Attribute | On | Meaning |
+|---|---|---|
+| `data-file-chips` | container | Groups chips; its bucket receives the hidden inputs |
+| `data-file-chips-bucket` | optional element in the container | Where hidden inputs go; the closest `<form>` is used when missing |
+| `data-file-chip="<id>"` | chip | Opens the popover with that element id |
+| `data-file-chip-popover` | popover | Start it with `hidden` |
+| `data-file-chip-remove` | button in the popover | Toggles the mark; needs `data-file-chip-id` and `data-file-chip-input` |
+| `data-file-chip-remove-label` | element in the button | Text swapped between `data-label-marked` and `data-label-unmarked` |
+
+Keep each popover right after its chip. Popovers stay where they are in the DOM and use `position: fixed`, so they follow the chip in tab order, inherit the CSS variables of their container, and disappear with it when the page re-renders. They flip above the chip when there is no room below, and their position is corrected when a transformed ancestor (for example an animated modal) moves the fixed origin. Outside click and Escape close them; Escape returns focus to the chip.
+
+### API
+
+| Call | Description |
+|---|---|
+| `FileChips.init({ root = document })` | Start handling chips inside `root`. A root that is already handled, itself or through an ancestor, is a no-op, so several roots and the script build's automatic start can coexist. Returns a function that stops handling that root. |
+| `FileChips.open(chip)` | Open a chip's popover; returns the popover or `null` |
+| `FileChips.close()` | Close the open popover |
+| `FileChips.getOpen()` | The open popover or `null` |
+| `FileChips.position(chip, popover)` | Re-place a popover next to its chip |
+
+Marking and unmarking dispatch a bubbling `file-chips:change` event on the chip with `detail: { id, input, marked }`. The chip gets `fc-chip--marked` and the button `fc-btn--active` plus `aria-pressed="true"` while marked.
+
+## Styling
+
+Every colour, radius and size is a CSS custom property. Override them on `:root` or on any wrapper around the chips (popovers inherit them too):
+
+```css
+.dark {
+    --fc-chip-bg: #1f2937;
+    --fc-chip-bg-hover: #273244;
+    --fc-border: rgba(255, 255, 255, 0.12);
+    --fc-popover-bg: #111827;
+    --fc-popover-border: rgba(255, 255, 255, 0.12);
+    --fc-muted: #9ca3af;
+    --fc-thumb-bg: #1f2937;
+}
+```
+
+![The same form and popover in a dark theme set only through the custom properties above.](docs/images/popover-dark.png)
+
+Full list: `--fc-font-size`, `--fc-gap`, `--fc-radius`, `--fc-chip-max-width`, `--fc-chip-bg`, `--fc-chip-bg-hover`, `--fc-border`, `--fc-text`, `--fc-muted`, `--fc-danger`, `--fc-danger-bg`, `--fc-primary`, `--fc-primary-text`, `--fc-focus`, `--fc-ext-bg`, `--fc-popover-width`, `--fc-popover-bg`, `--fc-popover-border`, `--fc-popover-radius`, `--fc-popover-shadow`, `--fc-popover-z`, `--fc-thumb-size`, `--fc-thumb-bg`.
+
+## Development
+
+```bash
+npm install && composer install
+npm test            # JS (Vitest + happy-dom)
+vendor/bin/pest     # PHP
+npm run build       # rebuild dist/, which is committed
+npm run examples    # the showcase on http://localhost:5183/showcase.html
+npm run screenshots # recapture docs/images/ from the showcase
+npm run typecheck   # the TypeScript declarations
+```
+
+CI runs the PHP suite on PHP 8.3 with Laravel 11, and PHP 8.4 with Laravel 12 and 13, plus the JS tests, the typecheck and a check that the committed `dist/` matches the sources.
+
+### TypeScript
+
+`dist/file-chips.d.ts` types the JS API and the `file-chips:change` event, so `import FileChips from '@ozankurt/file-chips'` is typed in TypeScript and editors.
+
+The showcase takes `?scheme=light|dark` and `?scene=popover|marked`.
+
+## License
+
+MIT

package/dist/esm/file-chips.mjs

@@ -0,0 +1,200 @@
+// js/popover.js
+var GAP = 8;
+var EDGE = 8;
+var openPopover = null;
+var openChip = null;
+var clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+var popoverFor = (chip) => chip.ownerDocument.getElementById(chip.dataset.fileChip);
+var position = (chip, popover) => {
+  const rect = chip.getBoundingClientRect();
+  const width = popover.offsetWidth;
+  const height = popover.offsetHeight;
+  let top = rect.bottom + GAP;
+  const left = clamp(rect.left, EDGE, Math.max(EDGE, window.innerWidth - width - EDGE));
+  if (top + height > window.innerHeight) {
+    const above = rect.top - height - GAP;
+    if (above >= EDGE) {
+      top = above;
+    }
+  }
+  top = clamp(top, EDGE, window.innerHeight - height - EDGE);
+  popover.style.top = "0px";
+  popover.style.left = "0px";
+  const origin = popover.getBoundingClientRect();
+  popover.style.top = `${Math.round(top - origin.top)}px`;
+  popover.style.left = `${Math.round(left - origin.left)}px`;
+};
+var close = ({ restoreFocus = false } = {}) => {
+  if (!openPopover) {
+    return;
+  }
+  const popover = openPopover;
+  const chip = openChip;
+  const hadFocus = popover.contains(popover.ownerDocument.activeElement);
+  popover.hidden = true;
+  chip?.setAttribute("aria-expanded", "false");
+  openPopover = null;
+  openChip = null;
+  if (restoreFocus && hadFocus) {
+    chip?.focus();
+  }
+};
+var open = (chip) => {
+  close();
+  const popover = popoverFor(chip);
+  if (!popover) {
+    return null;
+  }
+  popover.hidden = false;
+  chip.setAttribute("aria-expanded", "true");
+  openPopover = popover;
+  openChip = chip;
+  position(chip, popover);
+  if (typeof requestAnimationFrame === "function") {
+    requestAnimationFrame(() => openPopover === popover && position(chip, popover));
+  }
+  return popover;
+};
+var getOpen = () => openPopover;
+var getOpenChip = () => openChip;
+
+// js/marks.js
+var DEFAULT_MARKED = "Marked";
+var DEFAULT_UNMARKED = "Remove on save";
+var targetFor = (chip) => chip.closest("[data-file-chips]")?.querySelector("[data-file-chips-bucket]") ?? chip.closest("form");
+var findInput = (target, name, id) => [...target.querySelectorAll('input[type="hidden"]')].find((input) => input.name === name && input.value === id) ?? null;
+var render = (chip, button, marked) => {
+  chip.classList.toggle("fc-chip--marked", marked);
+  button.classList.toggle("fc-btn--active", marked);
+  button.setAttribute("aria-pressed", String(marked));
+  const label = button.querySelector("[data-file-chip-remove-label]") ?? button;
+  label.textContent = marked ? button.dataset.labelMarked ?? DEFAULT_MARKED : button.dataset.labelUnmarked ?? DEFAULT_UNMARKED;
+};
+var buttonIn = (popover) => popover.querySelector("[data-file-chip-remove]");
+var sync = (chip, popover) => {
+  const button = buttonIn(popover);
+  const target = targetFor(chip);
+  if (!button || !target) {
+    return;
+  }
+  render(chip, button, findInput(target, button.dataset.fileChipInput, button.dataset.fileChipId) !== null);
+};
+var toggle = (chip, button) => {
+  const target = targetFor(chip);
+  if (!target) {
+    console.warn("[FileChips] No [data-file-chips-bucket] or <form> found for this chip; cannot mark it for removal.");
+    return;
+  }
+  const name = button.dataset.fileChipInput;
+  const id = button.dataset.fileChipId;
+  const existing = findInput(target, name, id);
+  if (existing) {
+    existing.remove();
+  } else {
+    const input = chip.ownerDocument.createElement("input");
+    input.type = "hidden";
+    input.name = name;
+    input.value = id;
+    target.appendChild(input);
+  }
+  const marked = !existing;
+  render(chip, button, marked);
+  chip.dispatchEvent(new CustomEvent("file-chips:change", { bubbles: true, detail: { id, input: name, marked } }));
+};
+
+// js/index.js
+var documents = /* @__PURE__ */ new Map();
+var handled = (doc, element) => [...documents.get(doc)?.roots ?? []].some((root) => root.contains(element));
+var openWithState = (chip) => {
+  const popover = open(chip);
+  if (popover) {
+    sync(chip, popover);
+  }
+  return popover;
+};
+var listenersFor = (doc) => ({
+  click(event) {
+    const target = event.target;
+    const remove = target.closest?.("[data-file-chip-remove]");
+    if (remove && getOpen()?.contains(remove)) {
+      toggle(getOpenChip(), remove);
+      return;
+    }
+    const chip = target.closest?.("[data-file-chip]");
+    if (!chip || !handled(doc, chip)) {
+      return;
+    }
+    event.preventDefault();
+    if (getOpenChip() === chip) {
+      close();
+    } else {
+      openWithState(chip);
+    }
+  },
+  mousedown(event) {
+    const popover = getOpen();
+    if (popover && !popover.contains(event.target) && !event.target.closest?.("[data-file-chip]")) {
+      close();
+    }
+  },
+  keydown(event) {
+    if (event.key === "Escape" && getOpen()) {
+      close({ restoreFocus: true });
+    }
+  },
+  reposition() {
+    const popover = getOpen();
+    if (popover) {
+      position(getOpenChip(), popover);
+    }
+  }
+});
+var listen = (doc, listeners, method) => {
+  doc[method]("click", listeners.click);
+  doc[method]("mousedown", listeners.mousedown);
+  doc[method]("keydown", listeners.keydown);
+  doc.defaultView?.[method]("resize", listeners.reposition);
+  doc.defaultView?.[method]("scroll", listeners.reposition, true);
+};
+var init = ({ root = document } = {}) => {
+  const doc = root.ownerDocument ?? root;
+  if (handled(doc, root)) {
+    return () => {
+    };
+  }
+  if (!documents.has(doc)) {
+    const listeners = listenersFor(doc);
+    documents.set(doc, { roots: /* @__PURE__ */ new Set(), listeners });
+    listen(doc, listeners, "addEventListener");
+  }
+  const entry = documents.get(doc);
+  entry.roots.add(root);
+  return () => {
+    if (!entry.roots.delete(root)) {
+      return;
+    }
+    if (getOpenChip() && root.contains(getOpenChip())) {
+      close();
+    }
+    if (entry.roots.size === 0) {
+      listen(doc, entry.listeners, "removeEventListener");
+      documents.delete(doc);
+    }
+  };
+};
+var FileChips = {
+  init,
+  open: openWithState,
+  close: () => close(),
+  getOpen,
+  position
+};
+var index_default = FileChips;
+export {
+  close,
+  index_default as default,
+  getOpen,
+  init,
+  position
+};
+//# sourceMappingURL=file-chips.mjs.map

package/dist/esm/file-chips.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../js/popover.js", "../../js/marks.js", "../../js/index.js"],
+  "sourcesContent": ["/**\n * Popover open/close state and viewport-aware positioning.\n *\n * Popovers stay in place in the DOM, next to their chip, so they inherit the\n * chip container's CSS variables, follow it in tab order, and disappear with\n * it when the page re-renders. They are position: fixed; position() corrects\n * for ancestors (transforms, filters) that move the fixed origin.\n */\n\nconst GAP = 8;\nconst EDGE = 8;\n\nlet openPopover = null;\nlet openChip = null;\n\nconst clamp = (value, min, max) => Math.max(min, Math.min(max, value));\n\nconst popoverFor = (chip) => chip.ownerDocument.getElementById(chip.dataset.fileChip);\n\n/**\n * Place the popover below the chip, flip it above when there is no room,\n * and keep it inside the viewport.\n */\nconst position = (chip, popover) => {\n    const rect = chip.getBoundingClientRect();\n    const width = popover.offsetWidth;\n    const height = popover.offsetHeight;\n\n    let top = rect.bottom + GAP;\n    const left = clamp(rect.left, EDGE, Math.max(EDGE, window.innerWidth - width - EDGE));\n\n    if (top + height > window.innerHeight) {\n        const above = rect.top - height - GAP;\n        if (above >= EDGE) {\n            top = above;\n        }\n    }\n\n    top = clamp(top, EDGE, window.innerHeight - height - EDGE);\n\n    // Where does (0, 0) land? Non-zero when a transformed ancestor becomes\n    // the containing block of this fixed element.\n    popover.style.top = '0px';\n    popover.style.left = '0px';\n    const origin = popover.getBoundingClientRect();\n\n    popover.style.top = `${Math.round(top - origin.top)}px`;\n    popover.style.left = `${Math.round(left - origin.left)}px`;\n};\n\n/**\n * Close the open popover. With restoreFocus, focus that was inside the\n * popover goes back to its chip.\n */\nconst close = ({ restoreFocus = false } = {}) => {\n    if (!openPopover) {\n        return;\n    }\n\n    const popover = openPopover;\n    const chip = openChip;\n    const hadFocus = popover.contains(popover.ownerDocument.activeElement);\n\n    popover.hidden = true;\n    chip?.setAttribute('aria-expanded', 'false');\n    openPopover = null;\n    openChip = null;\n\n    if (restoreFocus && hadFocus) {\n        chip?.focus();\n    }\n};\n\n/**\n * Open the popover that belongs to a chip. Returns the popover, or null when\n * the chip has none.\n */\nconst open = (chip) => {\n    close();\n\n    const popover = popoverFor(chip);\n    if (!popover) {\n        return null;\n    }\n\n    popover.hidden = false;\n    chip.setAttribute('aria-expanded', 'true');\n    openPopover = popover;\n    openChip = chip;\n\n    position(chip, popover);\n    if (typeof requestAnimationFrame === 'function') {\n        requestAnimationFrame(() => openPopover === popover && position(chip, popover));\n    }\n\n    return popover;\n};\n\nconst getOpen = () => openPopover;\n\nconst getOpenChip = () => openChip;\n\nexport { open, close, getOpen, getOpenChip, position, popoverFor };\n", "/**\n * Mark-for-removal: toggles a hidden input carrying the file id so the\n * server can delete the file when the form is saved.\n */\n\nconst DEFAULT_MARKED = 'Marked';\nconst DEFAULT_UNMARKED = 'Remove on save';\n\n/**\n * The element hidden inputs go into: the [data-file-chips-bucket] of the\n * chip's [data-file-chips] container, otherwise the chip's form.\n */\nconst targetFor = (chip) => chip.closest('[data-file-chips]')?.querySelector('[data-file-chips-bucket]') ?? chip.closest('form');\n\n// Compare in JS instead of building a CSS selector, so ids and input\n// names containing quotes or brackets cannot break the lookup.\nconst findInput = (target, name, id) => [...target.querySelectorAll('input[type=\"hidden\"]')]\n    .find((input) => input.name === name && input.value === id) ?? null;\n\nconst render = (chip, button, marked) => {\n    chip.classList.toggle('fc-chip--marked', marked);\n    button.classList.toggle('fc-btn--active', marked);\n    button.setAttribute('aria-pressed', String(marked));\n\n    const label = button.querySelector('[data-file-chip-remove-label]') ?? button;\n    label.textContent = marked\n        ? (button.dataset.labelMarked ?? DEFAULT_MARKED)\n        : (button.dataset.labelUnmarked ?? DEFAULT_UNMARKED);\n};\n\nconst buttonIn = (popover) => popover.querySelector('[data-file-chip-remove]');\n\n/**\n * Reflect the current mark state of a chip in its popover button.\n */\nconst sync = (chip, popover) => {\n    const button = buttonIn(popover);\n    const target = targetFor(chip);\n    if (!button || !target) {\n        return;\n    }\n\n    render(chip, button, findInput(target, button.dataset.fileChipInput, button.dataset.fileChipId) !== null);\n};\n\n/**\n * Toggle the mark of the chip whose popover holds this button.\n */\nconst toggle = (chip, button) => {\n    const target = targetFor(chip);\n    if (!target) {\n        console.warn('[FileChips] No [data-file-chips-bucket] or <form> found for this chip; cannot mark it for removal.');\n        return;\n    }\n\n    const name = button.dataset.fileChipInput;\n    const id = button.dataset.fileChipId;\n    const existing = findInput(target, name, id);\n\n    if (existing) {\n        existing.remove();\n    } else {\n        const input = chip.ownerDocument.createElement('input');\n        input.type = 'hidden';\n        input.name = name;\n        input.value = id;\n        target.appendChild(input);\n    }\n\n    const marked = !existing;\n    render(chip, button, marked);\n    chip.dispatchEvent(new CustomEvent('file-chips:change', { bubbles: true, detail: { id, input: name, marked } }));\n};\n\nexport { sync, toggle };\n", "/**\n * File Chips\n *\n * Compact file chips with a preview popover and mark-for-removal.\n * Markup contract (see README):\n *   [data-file-chips]             container\n *   [data-file-chips-bucket]      optional element that receives hidden inputs\n *   [data-file-chip=\"<id>\"]       chip, points at its popover by id\n *   [data-file-chip-popover]      popover panel (starts hidden)\n *   [data-file-chip-remove]       toggle button with data-file-chip-id and data-file-chip-input\n */\n\nimport { close, getOpen, getOpenChip, open, position } from './popover.js';\nimport { sync, toggle } from './marks.js';\n\n// One set of document listeners per document, shared by every root on it,\n// so several roots never handle the same event twice.\nconst documents = new Map();\n\nconst handled = (doc, element) => [...(documents.get(doc)?.roots ?? [])].some((root) => root.contains(element));\n\nconst openWithState = (chip) => {\n    const popover = open(chip);\n    if (popover) {\n        sync(chip, popover);\n    }\n\n    return popover;\n};\n\nconst listenersFor = (doc) => ({\n    click(event) {\n        const target = event.target;\n\n        const remove = target.closest?.('[data-file-chip-remove]');\n        if (remove && getOpen()?.contains(remove)) {\n            toggle(getOpenChip(), remove);\n            return;\n        }\n\n        const chip = target.closest?.('[data-file-chip]');\n        if (!chip || !handled(doc, chip)) {\n            return;\n        }\n\n        event.preventDefault();\n\n        if (getOpenChip() === chip) {\n            close();\n        } else {\n            openWithState(chip);\n        }\n    },\n\n    mousedown(event) {\n        const popover = getOpen();\n        if (popover && !popover.contains(event.target) && !event.target.closest?.('[data-file-chip]')) {\n            close();\n        }\n    },\n\n    keydown(event) {\n        if (event.key === 'Escape' && getOpen()) {\n            close({ restoreFocus: true });\n        }\n    },\n\n    reposition() {\n        const popover = getOpen();\n        if (popover) {\n            position(getOpenChip(), popover);\n        }\n    },\n});\n\nconst listen = (doc, listeners, method) => {\n    doc[method]('click', listeners.click);\n    doc[method]('mousedown', listeners.mousedown);\n    doc[method]('keydown', listeners.keydown);\n    doc.defaultView?.[method]('resize', listeners.reposition);\n    doc.defaultView?.[method]('scroll', listeners.reposition, true);\n};\n\n/**\n * Start handling chips inside `root` (default: the whole document). A root\n * that is already handled, itself or through an ancestor, is a no-op.\n * Returns a function that stops handling this root.\n */\nconst init = ({ root = document } = {}) => {\n    const doc = root.ownerDocument ?? root;\n\n    if (handled(doc, root)) {\n        return () => {};\n    }\n\n    if (!documents.has(doc)) {\n        const listeners = listenersFor(doc);\n        documents.set(doc, { roots: new Set(), listeners });\n        listen(doc, listeners, 'addEventListener');\n    }\n\n    const entry = documents.get(doc);\n    entry.roots.add(root);\n\n    return () => {\n        if (!entry.roots.delete(root)) {\n            return;\n        }\n\n        if (getOpenChip() && root.contains(getOpenChip())) {\n            close();\n        }\n\n        if (entry.roots.size === 0) {\n            listen(doc, entry.listeners, 'removeEventListener');\n            documents.delete(doc);\n        }\n    };\n};\n\nconst FileChips = {\n    init,\n    open: openWithState,\n    close: () => close(),\n    getOpen,\n    position,\n};\n\nexport { init, close, getOpen, position };\nexport default FileChips;\n"],
+  "mappings": ";AASA,IAAM,MAAM;AACZ,IAAM,OAAO;AAEb,IAAI,cAAc;AAClB,IAAI,WAAW;AAEf,IAAM,QAAQ,CAAC,OAAO,KAAK,QAAQ,KAAK,IAAI,KAAK,KAAK,IAAI,KAAK,KAAK,CAAC;AAErE,IAAM,aAAa,CAAC,SAAS,KAAK,cAAc,eAAe,KAAK,QAAQ,QAAQ;AAMpF,IAAM,WAAW,CAAC,MAAM,YAAY;AAChC,QAAM,OAAO,KAAK,sBAAsB;AACxC,QAAM,QAAQ,QAAQ;AACtB,QAAM,SAAS,QAAQ;AAEvB,MAAI,MAAM,KAAK,SAAS;AACxB,QAAM,OAAO,MAAM,KAAK,MAAM,MAAM,KAAK,IAAI,MAAM,OAAO,aAAa,QAAQ,IAAI,CAAC;AAEpF,MAAI,MAAM,SAAS,OAAO,aAAa;AACnC,UAAM,QAAQ,KAAK,MAAM,SAAS;AAClC,QAAI,SAAS,MAAM;AACf,YAAM;AAAA,IACV;AAAA,EACJ;AAEA,QAAM,MAAM,KAAK,MAAM,OAAO,cAAc,SAAS,IAAI;AAIzD,UAAQ,MAAM,MAAM;AACpB,UAAQ,MAAM,OAAO;AACrB,QAAM,SAAS,QAAQ,sBAAsB;AAE7C,UAAQ,MAAM,MAAM,GAAG,KAAK,MAAM,MAAM,OAAO,GAAG,CAAC;AACnD,UAAQ,MAAM,OAAO,GAAG,KAAK,MAAM,OAAO,OAAO,IAAI,CAAC;AAC1D;AAMA,IAAM,QAAQ,CAAC,EAAE,eAAe,MAAM,IAAI,CAAC,MAAM;AAC7C,MAAI,CAAC,aAAa;AACd;AAAA,EACJ;AAEA,QAAM,UAAU;AAChB,QAAM,OAAO;AACb,QAAM,WAAW,QAAQ,SAAS,QAAQ,cAAc,aAAa;AAErE,UAAQ,SAAS;AACjB,QAAM,aAAa,iBAAiB,OAAO;AAC3C,gBAAc;AACd,aAAW;AAEX,MAAI,gBAAgB,UAAU;AAC1B,UAAM,MAAM;AAAA,EAChB;AACJ;AAMA,IAAM,OAAO,CAAC,SAAS;AACnB,QAAM;AAEN,QAAM,UAAU,WAAW,IAAI;AAC/B,MAAI,CAAC,SAAS;AACV,WAAO;AAAA,EACX;AAEA,UAAQ,SAAS;AACjB,OAAK,aAAa,iBAAiB,MAAM;AACzC,gBAAc;AACd,aAAW;AAEX,WAAS,MAAM,OAAO;AACtB,MAAI,OAAO,0BAA0B,YAAY;AAC7C,0BAAsB,MAAM,gBAAgB,WAAW,SAAS,MAAM,OAAO,CAAC;AAAA,EAClF;AAEA,SAAO;AACX;AAEA,IAAM,UAAU,MAAM;AAEtB,IAAM,cAAc,MAAM;;;AC/F1B,IAAM,iBAAiB;AACvB,IAAM,mBAAmB;AAMzB,IAAM,YAAY,CAAC,SAAS,KAAK,QAAQ,mBAAmB,GAAG,cAAc,0BAA0B,KAAK,KAAK,QAAQ,MAAM;AAI/H,IAAM,YAAY,CAAC,QAAQ,MAAM,OAAO,CAAC,GAAG,OAAO,iBAAiB,sBAAsB,CAAC,EACtF,KAAK,CAAC,UAAU,MAAM,SAAS,QAAQ,MAAM,UAAU,EAAE,KAAK;AAEnE,IAAM,SAAS,CAAC,MAAM,QAAQ,WAAW;AACrC,OAAK,UAAU,OAAO,mBAAmB,MAAM;AAC/C,SAAO,UAAU,OAAO,kBAAkB,MAAM;AAChD,SAAO,aAAa,gBAAgB,OAAO,MAAM,CAAC;AAElD,QAAM,QAAQ,OAAO,cAAc,+BAA+B,KAAK;AACvE,QAAM,cAAc,SACb,OAAO,QAAQ,eAAe,iBAC9B,OAAO,QAAQ,iBAAiB;AAC3C;AAEA,IAAM,WAAW,CAAC,YAAY,QAAQ,cAAc,yBAAyB;AAK7E,IAAM,OAAO,CAAC,MAAM,YAAY;AAC5B,QAAM,SAAS,SAAS,OAAO;AAC/B,QAAM,SAAS,UAAU,IAAI;AAC7B,MAAI,CAAC,UAAU,CAAC,QAAQ;AACpB;AAAA,EACJ;AAEA,SAAO,MAAM,QAAQ,UAAU,QAAQ,OAAO,QAAQ,eAAe,OAAO,QAAQ,UAAU,MAAM,IAAI;AAC5G;AAKA,IAAM,SAAS,CAAC,MAAM,WAAW;AAC7B,QAAM,SAAS,UAAU,IAAI;AAC7B,MAAI,CAAC,QAAQ;AACT,YAAQ,KAAK,oGAAoG;AACjH;AAAA,EACJ;AAEA,QAAM,OAAO,OAAO,QAAQ;AAC5B,QAAM,KAAK,OAAO,QAAQ;AAC1B,QAAM,WAAW,UAAU,QAAQ,MAAM,EAAE;AAE3C,MAAI,UAAU;AACV,aAAS,OAAO;AAAA,EACpB,OAAO;AACH,UAAM,QAAQ,KAAK,cAAc,cAAc,OAAO;AACtD,UAAM,OAAO;AACb,UAAM,OAAO;AACb,UAAM,QAAQ;AACd,WAAO,YAAY,KAAK;AAAA,EAC5B;AAEA,QAAM,SAAS,CAAC;AAChB,SAAO,MAAM,QAAQ,MAAM;AAC3B,OAAK,cAAc,IAAI,YAAY,qBAAqB,EAAE,SAAS,MAAM,QAAQ,EAAE,IAAI,OAAO,MAAM,OAAO,EAAE,CAAC,CAAC;AACnH;;;ACvDA,IAAM,YAAY,oBAAI,IAAI;AAE1B,IAAM,UAAU,CAAC,KAAK,YAAY,CAAC,GAAI,UAAU,IAAI,GAAG,GAAG,SAAS,CAAC,CAAE,EAAE,KAAK,CAAC,SAAS,KAAK,SAAS,OAAO,CAAC;AAE9G,IAAM,gBAAgB,CAAC,SAAS;AAC5B,QAAM,UAAU,KAAK,IAAI;AACzB,MAAI,SAAS;AACT,SAAK,MAAM,OAAO;AAAA,EACtB;AAEA,SAAO;AACX;AAEA,IAAM,eAAe,CAAC,SAAS;AAAA,EAC3B,MAAM,OAAO;AACT,UAAM,SAAS,MAAM;AAErB,UAAM,SAAS,OAAO,UAAU,yBAAyB;AACzD,QAAI,UAAU,QAAQ,GAAG,SAAS,MAAM,GAAG;AACvC,aAAO,YAAY,GAAG,MAAM;AAC5B;AAAA,IACJ;AAEA,UAAM,OAAO,OAAO,UAAU,kBAAkB;AAChD,QAAI,CAAC,QAAQ,CAAC,QAAQ,KAAK,IAAI,GAAG;AAC9B;AAAA,IACJ;AAEA,UAAM,eAAe;AAErB,QAAI,YAAY,MAAM,MAAM;AACxB,YAAM;AAAA,IACV,OAAO;AACH,oBAAc,IAAI;AAAA,IACtB;AAAA,EACJ;AAAA,EAEA,UAAU,OAAO;AACb,UAAM,UAAU,QAAQ;AACxB,QAAI,WAAW,CAAC,QAAQ,SAAS,MAAM,MAAM,KAAK,CAAC,MAAM,OAAO,UAAU,kBAAkB,GAAG;AAC3F,YAAM;AAAA,IACV;AAAA,EACJ;AAAA,EAEA,QAAQ,OAAO;AACX,QAAI,MAAM,QAAQ,YAAY,QAAQ,GAAG;AACrC,YAAM,EAAE,cAAc,KAAK,CAAC;AAAA,IAChC;AAAA,EACJ;AAAA,EAEA,aAAa;AACT,UAAM,UAAU,QAAQ;AACxB,QAAI,SAAS;AACT,eAAS,YAAY,GAAG,OAAO;AAAA,IACnC;AAAA,EACJ;AACJ;AAEA,IAAM,SAAS,CAAC,KAAK,WAAW,WAAW;AACvC,MAAI,MAAM,EAAE,SAAS,UAAU,KAAK;AACpC,MAAI,MAAM,EAAE,aAAa,UAAU,SAAS;AAC5C,MAAI,MAAM,EAAE,WAAW,UAAU,OAAO;AACxC,MAAI,cAAc,MAAM,EAAE,UAAU,UAAU,UAAU;AACxD,MAAI,cAAc,MAAM,EAAE,UAAU,UAAU,YAAY,IAAI;AAClE;AAOA,IAAM,OAAO,CAAC,EAAE,OAAO,SAAS,IAAI,CAAC,MAAM;AACvC,QAAM,MAAM,KAAK,iBAAiB;AAElC,MAAI,QAAQ,KAAK,IAAI,GAAG;AACpB,WAAO,MAAM;AAAA,IAAC;AAAA,EAClB;AAEA,MAAI,CAAC,UAAU,IAAI,GAAG,GAAG;AACrB,UAAM,YAAY,aAAa,GAAG;AAClC,cAAU,IAAI,KAAK,EAAE,OAAO,oBAAI,IAAI,GAAG,UAAU,CAAC;AAClD,WAAO,KAAK,WAAW,kBAAkB;AAAA,EAC7C;AAEA,QAAM,QAAQ,UAAU,IAAI,GAAG;AAC/B,QAAM,MAAM,IAAI,IAAI;AAEpB,SAAO,MAAM;AACT,QAAI,CAAC,MAAM,MAAM,OAAO,IAAI,GAAG;AAC3B;AAAA,IACJ;AAEA,QAAI,YAAY,KAAK,KAAK,SAAS,YAAY,CAAC,GAAG;AAC/C,YAAM;AAAA,IACV;AAEA,QAAI,MAAM,MAAM,SAAS,GAAG;AACxB,aAAO,KAAK,MAAM,WAAW,qBAAqB;AAClD,gBAAU,OAAO,GAAG;AAAA,IACxB;AAAA,EACJ;AACJ;AAEA,IAAM,YAAY;AAAA,EACd;AAAA,EACA,MAAM;AAAA,EACN,OAAO,MAAM,MAAM;AAAA,EACnB;AAAA,EACA;AACJ;AAGA,IAAO,gBAAQ;",
+  "names": []
+}