@livenetworks/ashlar 1.6.0 → 2.0.0

package/components/ln-upload/README.md

@@ -0,0 +1,133 @@
+# ln-upload
+
+> Applied to a `<div data-ln-upload="URL">` container enclosing an `<input type="file" hidden>` and a drop zone
+> (`[data-ln-upload-zone]`). It intercepts file drops and picker changes, validates file constraints, clones `<template data-ln-template="ln-upload-item">`,
+> and uploads files via `fetch(FormData)`. On upload completion, it injects an `<input type="hidden" name="file_ids[]" value="id">`
+> into the DOM for native form submission.
+
+## Rationale & Mindset
+
+The `ln-upload` component follows an **HTML-first declarative design mindset**:
+* **Inputs as Parameters**: Any metadata sent alongside uploaded files is defined via standard form fields (`<input type="hidden">`, `<select>`, etc.) inside the `[data-ln-upload]` container and dynamically serialized into `FormData`.
+* **Zero JS UI Strings**: Localized messages and unit labels live in `<ul hidden><li data-ln-upload-dict="..."></li></ul>` (read once via `buildDict`), with number formatting resolved via `Intl.NumberFormat` with `getLocale(dom)`.
+* **Pure Data Attributes (No BEM in JS)**: All JS behaviors bind strictly to declarative attributes (`[data-ln-upload-zone]`, `[data-ln-upload-list]`, `[data-ln-upload-item]`, `[data-ln-upload-progress]`, `[data-ln-progress]`, `[data-ln-upload-action="remove"]`).
+* **SSR Hydration**: Pre-rendered server files inside `[data-ln-upload-list]` carrying `data-ln-upload-id="123"` are automatically hydrated into internal state on mount.
+
+## Attributes
+
+| Attribute | Element | Description |
+|-----------|---------|-------------|
+| `data-ln-upload="URL"` | Container | Upload POST endpoint URL |
+| `data-ln-upload-accept=".pdf,.doc"` | Container / Input | Allowed extensions or MIME patterns (e.g. `pdf,doc`, `.pdf,.docx`, `image/*`) |
+| `data-ln-upload-delete="URL/{id}"` | Container | Optional delete URL pattern containing `{id}` |
+| `data-ln-upload-max-size="10485760"` | Container | Maximum allowed file size in bytes |
+| `data-ln-upload-max-files="5"` | Container | Maximum total uploaded files limit |
+| `data-ln-upload-file-field="file"` | Container | Name of the file field in `FormData` (default: `file`) |
+| `data-ln-upload-ids-field="file_ids[]"` | Container | Name of the synced hidden inputs (default: `file_ids[]`) |
+| `data-ln-upload-dict="key"` | Hidden `<li>` | Dictionary entries for translations |
+
+## Dictionary (i18n)
+
+All keys are optional. Dict entries are read once at init via `buildDict()` and removed from the DOM:
+
+| Key | Purpose | Fallback |
+|-----|---------|----------|
+| `remove` | Remove button aria-label and tooltip | `Remove` |
+| `error` | Status text when upload fails | `Error` |
+| `unit-b`, `unit-kb`, `unit-mb`, `unit-gb` | Localized byte units | `B`, `KB`, `MB`, `GB` |
+
+## HTML Structure
+
+```html
+<div data-ln-upload="/files/upload" data-ln-upload-accept="pdf,doc,docx" data-ln-upload-delete="/files/{id}">
+    <input type="file" multiple hidden>
+
+    <!-- Scoped Template -->
+    <template data-ln-template="ln-upload-item">
+        <li data-ln-upload-item>
+            <svg class="ln-icon" aria-hidden="true"><use href="#ln-icon-file"></use></svg>
+            <span data-ln-field="name"></span>
+            <span data-ln-field="sizeText"></span>
+            <button type="button" data-ln-upload-action="remove" data-ln-attr="aria-label:removeLabel, title:removeLabel">
+                <svg class="ln-icon" aria-hidden="true"><use href="#ln-icon-x"></use></svg>
+            </button>
+            <div data-ln-upload-progress>
+                <div data-ln-progress="0"></div>
+            </div>
+        </li>
+    </template>
+
+    <div data-ln-upload-zone>
+        <p>Drop files here or click to browse</p>
+    </div>
+
+    <ul data-ln-upload-list>
+        <!-- SSR Pre-rendered files are hydrated automatically on mount -->
+        <li data-ln-upload-item data-ln-upload-id="42" data-ln-upload-ext="pdf" data-ln-upload-size="1200000">
+            <span data-ln-field="name">contract.pdf</span>
+            <span data-ln-field="sizeText">1.2 MB</span>
+            <button type="button" data-ln-upload-action="remove"><svg class="ln-icon"><use href="#ln-icon-x"></use></svg></button>
+        </li>
+    </ul>
+</div>
+```
+
+## Programmatic API
+
+```javascript
+const el = document.querySelector('[data-ln-upload]');
+
+el.lnUpload.getFileIds();   // ['42', '43']
+el.lnUpload.getFiles();     // [{ serverId: '42', name: 'contract.pdf', size: 1200000 }]
+el.lnUpload.upload(files);  // Upload FileList or Array of File objects
+el.lnUpload.remove(id);     // Remove by localId or serverId
+el.lnUpload.clear();        // Clear and delete all files
+el.lnUpload.destroy();      // Clean up listeners and abort in-flight uploads
+```
+
+## Custom Events
+
+| Event | Type | Detail |
+|-------|------|--------|
+| `ln-upload:request-upload` | Command | `{ files: FileList \| File[] }` |
+| `ln-upload:request-remove` | Command | `{ localId?: string, serverId?: string\|number }` |
+| `ln-upload:request-clear` | Command | `{}` |
+| `ln-upload:before-upload` | Cancelable | `{ file: File }` |
+| `ln-upload:before-remove` | Cancelable | `{ localId: string, serverId: string\|number }` |
+| `ln-upload:before-clear` | Cancelable | `{}` |
+| `ln-upload:uploaded` | Notification | `{ localId, serverId, name, size, response }` |
+| `ln-upload:progress` | Notification | `{ localId, file, percent, loaded, total }` |
+| `ln-upload:removed` | Notification | `{ localId, serverId }` |
+| `ln-upload:invalid` | Notification | `{ file, reason }` |
+| `ln-upload:error` | Notification | `{ file, message, status, error }` |
+| `ln-upload:cleared` | Notification | `{}` |
+
+---
+
+## 🔧 Internals
+
+Source: `components/ln-upload/src/ln-upload.js`. Registered via `registerComponent('data-ln-upload', 'lnUpload', _component, 'ln-upload')`.
+
+### State & Storage
+Each container holds an internal `uploadedFiles` Map (`localId -> { serverId, name, size, xhr? }`). Unique local IDs (`file-1`, `file-2`, ...) identify in-DOM items across their lifecycle.
+
+### SSR Hydration Flow
+During `_hydrate()`, `ln-upload` scans `[data-ln-upload-list] [data-ln-upload-item]` and pre-rendered hidden inputs:
+1. Resolves `serverId` from `data-ln-upload-id` and assigns a local identifier (`data-ln-upload-local-id`).
+2. Reads `name` from `[data-ln-field="name"]` and `size` from `data-ln-upload-size` or `[data-ln-field="sizeText"]`.
+3. Registers existing files into `uploadedFiles` and ensures hidden `<input type="hidden" name="file_ids[]">` elements match without duplicates.
+
+### Upload Flow
+1. Files dropped or picked pass through client validation (`accept`, `maxSize`, `maxFiles`). If invalid, `ln-upload:invalid` is emitted.
+2. `dispatchCancelable('ln-upload:before-upload', { file })` is checked.
+3. The scoped template `ln-upload-item` is cloned and mounted into `[data-ln-upload-list]`, stamped with `data-ln-upload-local-id` and `data-ln-upload-ext`.
+4. `FormData` is built by appending the file under `fileFieldName` and serializing any nested inputs (skipping `idsFieldName`).
+5. Real-time progress updates `[data-ln-progress]` attribute and emits `ln-upload:progress`.
+6. On success, `data-ln-upload-id` is assigned, size is formatted via `Intl.NumberFormat`, hidden inputs are synced via `_syncHiddenInputs()`, and `ln-upload:uploaded` is dispatched.
+
+### Removal & Clear Flows
+- **`remove(id)`**: Cancels in-flight XHR if active. If `serverId` exists and a delete URL pattern is configured, sends a `DELETE` request. On success, removes the item from DOM, deletes from `uploadedFiles`, syncs hidden inputs, and emits `ln-upload:removed`.
+- **`clear()`**: Checks `ln-upload:before-clear` once. Aborts all active uploads, issues background DELETE requests for existing server files, clears `uploadedFiles`, empties the list container, syncs hidden inputs, and immediately emits `ln-upload:cleared`.
+
+### Teardown
+`destroy()` aborts all pending XHRs, removes event listeners (drag/drop, input change, removal clicks, command listeners), and clears internal state and dictionary.

package/components/ln-upload/ln-upload-dev.scss

@@ -0,0 +1,18 @@
+@use '../../theme/config/mixins' as *;
+
+[data-ln-debug] {
+	// 1. Upload File Input: [data-ln-upload] must contain an <input type="file">
+	[data-ln-upload]:not(:has(input[type="file"])) {
+		@include dev-dom-error("[data-ln-upload] is missing a required <input type=\"file\"> element.");
+	}
+
+	// 2. Upload Zone: [data-ln-upload] must contain a [data-ln-upload-zone] drop area
+	[data-ln-upload]:not(:has([data-ln-upload-zone])) {
+		@include dev-dom-error("[data-ln-upload] is missing a required [data-ln-upload-zone] element.");
+	}
+
+	// 3. Upload List: [data-ln-upload] must contain a [data-ln-upload-list] list container
+	[data-ln-upload]:not(:has([data-ln-upload-list])) {
+		@include dev-dom-error("[data-ln-upload] is missing a required [data-ln-upload-list] container.");
+	}
+}

package/components/ln-upload/ln-upload.js

@@ -0,0 +1 @@
+(function(){"use strict";function N(){return typeof window>"u"?!1:window.lnDebug===!0||window.lnCore&&window.lnCore._debugSink?!0:typeof document<"u"&&document.body?document.body.hasAttribute("data-ln-debug")||document.body.querySelector("[data-ln-debug]")!==null:!1}function x(e){if(typeof window>"u")return!1;if(window.lnDebug===!0)return!0;if(window.lnCore&&window.lnCore._debugIsContained)return e?window.lnCore._debugIsContained(e):window.lnCore._debugSink!==null;if(e&&e.closest){const t=e.closest("[data-ln-debug]");return!(!t||typeof document<"u"&&t===document.documentElement)}return typeof document<"u"&&document.body?document.body.hasAttribute("data-ln-debug"):!1}if(typeof window<"u"&&(window.lnCore=window.lnCore||{},!window.lnCore._warnBound)){window.lnCore._warnBound=!0;const e=console.warn;console.warn=function(...t){if(typeof t[0]=="string"&&(t[0].startsWith("[ln-")||t[0].startsWith("[lnCore"))){let r=null;for(let l=1;l<t.length;l++)if(t[l]&&t[l].nodeType===1){r=t[l];break}if(!x(r))return}e.apply(console,t)}}function C(e,t,n){const r=n||{};window.lnCore._debugSink&&window.lnCore._debugSink("event",t,e,r),e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:r}))}function k(e,t,n){const r=n||{};window.lnCore._debugSink&&window.lnCore._debugSink("event",t,e,r);const l=new CustomEvent(t,{bubbles:!0,cancelable:!0,detail:r});return e.dispatchEvent(l),l}function E(e,t){if(!document.body){document.addEventListener("DOMContentLoaded",function(){E(e,t)}),console.warn("["+t+'] Script loaded before <body> — add "defer" to your <script> tag');return}e()}const M={};function K(e,t){M[e]=t}function J(e){return M[e]||{ingress:t=>t,egress:t=>t}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerDataMapper=K,window.lnCore.getDataMapper=J);function Q(e){const t=e?e.closest("[lang]"):null,n=(t?t.getAttribute("lang")||t.lang:null)||(typeof document<"u"&&document.documentElement?document.documentElement.getAttribute("lang")||document.documentElement.lang:null)||(typeof navigator<"u"?navigator.language:null);return n?n.trim():"en-US"}function G(){typeof window>"u"||(window.lnCore=window.lnCore||{},!window.lnCore._localeObserverBound&&(window.lnCore._localeObserverBound=!0,E(function(){new MutationObserver(function(){C(document,"ln-core:locale-change",{})}).observe(document.documentElement,{attributes:!0,attributeFilter:["lang"],subtree:!0})},"ln-core")))}const U={};function Z(e,t){if(!e||typeof t!="object")return;const n=e.toLowerCase().split("-")[0];U[n]=t}function Y(e){if(!e)return null;const t=e.toLowerCase().split("-")[0];return U[t]||null}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerLocaleFallback=Z,window.lnCore.getLocaleFallback=Y,window.lnCore.ensureLocaleObserver=G);const L={};function B(e,t){L[e]||(L[e]=document.querySelector('[data-ln-template="'+e+'"]'));const n=L[e];return n?n.content.cloneNode(!0):(console.warn("["+(t||"ln-core")+'] Template "'+e+'" not found'),null)}function ee(e,t,n){if(e){const r=e.querySelector('[data-ln-template="'+t+'"]');if(r)return r.content.cloneNode(!0)}return B(t,n)}function _(e,t){if(!e||!t)return e;const n=e.querySelectorAll("[data-ln-field]");for(let s=0;s<n.length;s++){const c=n[s],d=c.getAttribute("data-ln-field");t[d]!=null&&(c.textContent=t[d])}const r=e.querySelectorAll("[data-ln-attr]");for(let s=0;s<r.length;s++){const c=r[s],d=c.getAttribute("data-ln-attr").split(",");for(let o=0;o<d.length;o++){const i=d[o].trim().split(":");if(i.length!==2)continue;const u=i[0].trim(),f=i[1].trim();t[f]!=null&&c.setAttribute(u,t[f])}}const l=e.querySelectorAll("[data-ln-show]");for(let s=0;s<l.length;s++){const c=l[s],d=c.getAttribute("data-ln-show");d in t&&c.classList.toggle("hidden",!t[d])}const a=e.querySelectorAll("[data-ln-class]");for(let s=0;s<a.length;s++){const c=a[s],d=c.getAttribute("data-ln-class").split(",");for(let o=0;o<d.length;o++){const i=d[o].trim().split(":");if(i.length!==2)continue;const u=i[0].trim(),f=i[1].trim();f in t&&c.classList.toggle(u,!!t[f])}}return e}function te(e,t){e.matches&&e.matches("[data-ln-form], [data-ln-fillable]")&&(window.lnCore._debugSink&&window.lnCore._debugSink("event","ln-fill",e,t??null),e.dispatchEvent(new CustomEvent("ln-fill",{detail:t??null,bubbles:!0})));const n=e.querySelectorAll("[data-ln-form], [data-ln-fillable]");for(let r=0;r<n.length;r++)window.lnCore._debugSink&&window.lnCore._debugSink("event","ln-fill",n[r],t??null),n[r].dispatchEvent(new CustomEvent("ln-fill",{detail:t??null,bubbles:!0}));return e}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore._fillBound||(window.lnCore._fillBound=!0,document.addEventListener("ln-fill",function(e){if(!(!e.target.matches||!e.target.matches("[data-ln-fillable]")))if(e.detail)_(e.target,e.detail);else{const t=e.target.querySelectorAll("[data-ln-field]");for(let n=0;n<t.length;n++)t[n].textContent=""}})));function $(e,t){if(!e||!t)return e;const n=document.createTreeWalker(e,NodeFilter.SHOW_TEXT);for(;n.nextNode();){const a=n.currentNode;a.textContent.indexOf("{{")!==-1&&(a.textContent=a.textContent.replace(/\{\{\s*(\w+)\s*\}\}/g,function(s,c){return t[c]!==void 0?t[c]:""}))}const r=function(a,s){return t[s]!==void 0?t[s]:""},l=Array.from(e.querySelectorAll("*"));e.nodeType===1&&l.push(e);for(let a=0;a<l.length;a++){const s=l[a],c=s.attributes;for(let d=0;d<c.length;d++){const o=c[d];o.value.indexOf("{{")!==-1&&s.setAttribute(o.name,o.value.replace(/\{\{\s*(\w+)\s*\}\}/g,r))}}return e}function ne(e,t,n,r,l,a){const s={};for(let d=0;d<e.children.length;d++){const o=e.children[d],i=o.getAttribute("data-ln-render-key");i&&(s[i]=o)}const c=document.createDocumentFragment();for(let d=0;d<t.length;d++){const o=t[d],i=String(r(o));let u=s[i];if(u)l(u,o,d);else{const f=B(n,a);if(!f||($(f,o),u=f.firstElementChild,!u))continue;u.setAttribute("data-ln-render-key",i),l(u,o,d)}c.appendChild(u)}e.textContent="",e.appendChild(c)}function re(e,t){const n={},r=e.querySelectorAll("["+t+"]");for(let l=0;l<r.length;l++)n[r[l].getAttribute(t)]=r[l].textContent,r[l].remove();return n}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.fillTemplate=$,window.lnCore.fill=_,window.lnCore.lnFill=te,window.lnCore.renderList=ne);function I(e,t,n){const r=e.getAttribute(t);return r===null?n:r}function F(e,t,n){const r=parseInt(e.getAttribute(t),10);return isNaN(r)?n:r}function oe(e,t,n=!1){const r=e.getAttribute(t);if(r===null)return!!n;const l=r.trim().toLowerCase();return!(l==="false"||l==="0")}function ie(e,t){return(e.getAttribute(t)||"").split(",").map(n=>n.trim()).filter(Boolean)}const D=new Map;function le(e,t){const n=(e?e.join("|"):"")+"::"+t;if(D.has(n))return D.get(n);const r=new Set(e||[]),l=function(a,s){const c=a.getAttribute(s);return c!==null&&r.has(c)?c:t};return D.set(n,l),l}function ae(e,t,n){const r=parseFloat(e.getAttribute(t));return isNaN(r)?n:r}function se(e,t,n){const r=e.getAttribute(t);if(!r)return n;try{return JSON.parse(r)}catch{return n}}function H(e,t,n,r,l){if(!e||t===null)return!0;const a=r||"ln-component",s=e.type;if(s==="trigger"||s==="marker"||s==="string"||s==="list"||!s||t===""&&e.fallback!==void 0)return!0;const c=d=>{l?console.warn(d,l):console.warn(d)};if(s==="boolean"){const d=t.trim().toLowerCase();return d!==""&&d!=="true"&&d!=="false"&&d!=="1"&&d!=="0"?(c(`[${a}] Invalid value "${t}" for boolean attribute "${n}". Allowed: "true", "false", or presence-only.`),!1):!0}if(s==="enum"){const d=e.values||[];return d.includes(t)?!0:(c(`[${a}] Invalid value "${t}" for attribute "${n}". Allowed: ${d.join(", ")}. Fallback: "${e.fallback}".`),!1)}if(s==="integer"){if(!/^-?\d+$/.test(t))return c(`[${a}] Invalid integer "${t}" for attribute "${n}". Fallback: ${e.fallback}.`),!1;const d=parseInt(t,10);return e.min!==void 0&&d<e.min?(c(`[${a}] Value ${d} for attribute "${n}" is less than min (${e.min}).`),!1):e.max!==void 0&&d>e.max?(c(`[${a}] Value ${d} for attribute "${n}" is greater than max (${e.max}).`),!1):!0}if(s==="float")return isNaN(Number(t))?(c(`[${a}] Invalid float "${t}" for attribute "${n}". Fallback: ${e.fallback}.`),!1):!0;if(s==="json")try{return JSON.parse(t),!0}catch(d){return c(`[${a}] Invalid JSON for attribute "${n}": ${d.message}. Fallback: ${e.fallback}.`),!1}return!0}function de(e,t,n){for(const r in n){const[l,a,s]=n[r];Object.defineProperty(e,r,{get:function(){return l(t,a,s)},enumerable:!0,configurable:!0})}return e}function ue(e){const t={};for(const n in e){const r=e[n];if(!r||!r.prop)continue;let l=r.read;if(!l&&r.type)switch(r.type){case"enum":l=le(r.values,r.fallback);break;case"integer":l=F;break;case"float":l=ae;break;case"boolean":l=oe;break;case"list":l=ie;break;case"json":l=se;break;case"string":default:l=I;break}l||(l=I),t[r.prop]=[l,n,r.fallback]}return t}function ce(e){const t={};for(const n in e){const r=e[n];r&&r.effect&&(t[n]=r.effect)}return Object.keys(t).length?t:null}function fe(e){if(e.onAttrChange&&!e.declared)return null;const t=new Set;if(e.effects)for(const n in e.effects)t.add(n);if(e.onAttrChange&&e.declared)for(const n of e.declared)t.add(n);return t}function q(e,t,n,r){if(e.nodeType!==1)return;const a=t.indexOf("[")!==-1||t.indexOf(".")!==-1||t.indexOf("#")!==-1?t:"["+t+"]",s=Array.from(e.querySelectorAll(a));e.matches&&e.matches(a)&&s.push(e);for(const c of s)if(!c[n]){window.lnCore._persistSink&&c.hasAttribute("data-ln-persist")&&window.lnCore._persistSink(c,t);try{c[n]=new r(c)}catch(d){console.error("["+n+"] init failed",c,d)}}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore._bootHolds=window.lnCore._bootHolds||0,window.lnCore._bootQueue=window.lnCore._bootQueue||[]);function pe(){return typeof window<"u"&&window.lnCore&&window.lnCore._bootHolds||0}function he(e){typeof window<"u"?(window.lnCore=window.lnCore||{},window.lnCore._bootHolds=window.lnCore._bootHolds||0,window.lnCore._bootQueue=window.lnCore._bootQueue||[],window.lnCore._bootHolds>0?window.lnCore._bootQueue.push(e):setTimeout(e,0)):e()}function W(){window.lnCore=window.lnCore||{};const e=window.lnCore._attrRegistry=window.lnCore._attrRegistry||{byAttr:new Map,reactive:[],persist:[]};return e.byReactive=e.byReactive||new Map,e.reactiveWildcard=e.reactiveWildcard||[],e}function me(e){const t=W(),n=e.observed||[];for(let r=0;r<n.length;r++){const l=n[r];t.byAttr.has(l)||t.byAttr.set(l,[]),t.byAttr.get(l).push(e)}if(t.byDeclaredAttr=t.byDeclaredAttr||new Map,e.attributes)for(const r in e.attributes){t.byDeclaredAttr.has(r)||t.byDeclaredAttr.set(r,[]);const l=t.byDeclaredAttr.get(r);l.some(a=>a.componentTag===e.componentTag)||l.push({spec:e.attributes[r],componentTag:e.componentTag})}if(e.onAttrChange||e.effects){t.reactive.push(e);const r=fe(e);if(r===null)t.reactiveWildcard.push(e);else for(const l of r)t.byReactive.has(l)||t.byReactive.set(l,[]),t.byReactive.get(l).push(e)}e.persist&&t.persist.push(e)}function j(e,t,n,r){for(let l=0;l<e.length;l++){const a=e[l];if(!t[a.attribute])continue;const s=a.effects&&a.effects[n];s?s(t,n,r):a.onAttrChange&&(!a.declared||a.declared.has(n))&&a.onAttrChange(t,n,r)}}function ge(e){const t=e.target,n=e.attributeName;if(e.oldValue===t.getAttribute(n))return;const r=W(),l=r.byAttr.get(n);if(N()&&r.byDeclaredAttr&&r.byDeclaredAttr.has(n)&&x(t)){const a=r.byDeclaredAttr.get(n),s=t.getAttribute(n);for(let c=0;c<a.length;c++)H(a[c].spec,s,n,a[c].componentTag,t)}if(window.lnCore._debugSink&&(n.indexOf("data-ln-")===0||l)&&window.lnCore._debugSink("attr",n,t,{oldValue:e.oldValue,newValue:t.getAttribute(n)}),n.indexOf("data-ln-")===0){const a=r.byReactive.get(n);a&&j(a,t,n,e.oldValue),r.reactiveWildcard.length&&j(r.reactiveWildcard,t,n,e.oldValue)}if(l)for(let a=0;a<l.length;a++){const s=l[a];if(s.handler){s.handler(t,n,e.oldValue);continue}s.onAttributeChange&&t[s.attribute]?s.onAttributeChange(t,n):(q(t,s.selector,s.attribute,s.ComponentFn),s.onInit&&s.onInit(t))}}function be(){window.lnCore=window.lnCore||{},!window.lnCore._attrObserverBound&&(window.lnCore._attrObserverBound=!0,E(function(){new MutationObserver(function(t){for(let n=0;n<t.length;n++)try{ge(t[n])}catch(r){console.error("[ln-core] mutation handler failed",t[n].target,r)}}).observe(document.body,{attributes:!0,subtree:!0,attributeOldValue:!0})},"ln-core"))}function P(){return window.lnCore=window.lnCore||{},window.lnCore._lifecycleRegistry=window.lnCore._lifecycleRegistry||[]}function we(e){const t=P();if(t.length){if(e.target)for(let n=0;n<t.length;n++){const r=t[n];if(r.onSubtreeChange){const l=r.query,a=e.target.nodeType===1?e.target.matches(l)?e.target:e.target.closest(l):e.target.parentElement?e.target.parentElement.closest(l):null;a&&r.onSubtreeChange(a,e)}}for(let n=0;n<e.addedNodes.length;n++){const r=e.addedNodes[n];if(r.nodeType===1)for(let l=0;l<t.length;l++){const a=t[l];q(r,a.selector,a.attribute,a.ComponentFn),a.onInit&&a.onInit(r)}}for(let n=0;n<e.removedNodes.length;n++){const r=e.removedNodes[n];if(r.nodeType===1)for(let l=0;l<t.length;l++){const a=t[l],s=a.query,c=Array.from(r.querySelectorAll(s));r.matches&&r.matches(s)&&c.push(r);for(let d=0;d<c.length;d++){const o=c[d];if(!document.contains(o)){const i=o[a.attribute];if(i&&typeof i.destroy=="function")try{i.destroy()}catch(u){console.error("["+a.attribute+"] destroy failed",o,u)}delete o[a.attribute]}}}}}}function ye(){window.lnCore=window.lnCore||{},!window.lnCore._lifecycleObserverBound&&(window.lnCore._lifecycleObserverBound=!0,E(function(){new MutationObserver(function(t){for(let n=0;n<t.length;n++){const r=t[n];if(r.type==="childList")try{we(r)}catch(l){console.error("[ln-core] lifecycle handler failed",r.target,l)}}}).observe(document.body,{childList:!0,subtree:!0})},"ln-core"))}function ve(e,t,n,r,l={}){const a=l.extraAttributes||[],s=l.onAttributeChange||null,c=l.onSubtreeChange||null,d=l.onInit||null,o=l.onAttrChange||null,i=l.effects||null,u=l.attributes||null,f=u?ce(u):i,p=u?new Set(Object.keys(u)):null,b=l.persist||null;function w(y){const v=y||document.body;if(q(v,e,t,n),u&&N())for(const S in u){const qe=u[S],R=Array.from(v.querySelectorAll("["+S+"]"));v.matches&&v.matches("["+S+"]")&&R.push(v);for(let O=0;O<R.length;O++){const T=R[O];x(T)&&H(qe,T.getAttribute(S),S,r,T)}}d&&d(v)}const m=[];if(e.indexOf("[")!==-1){const y=/\[([\w-]+)/g;let v;for(;(v=y.exec(e))!==null;)m.push(v[1])}else m.push(e);me({selector:e,attribute:t,componentTag:r,attributes:u,ComponentFn:n,onInit:d,observed:m.concat(a),onAttributeChange:s,onAttrChange:o,effects:f,declared:p,persist:b}),be();const g=e.indexOf("[")!==-1||e.indexOf(".")!==-1||e.indexOf("#")!==-1?e:"["+e+"]";P().push({selector:e,attribute:t,ComponentFn:n,onInit:d,onSubtreeChange:c,query:g}),ye(),window[t]=w;function h(){pe()>0?he(function(){w(document.body)}):w(document.body)}return document.readyState==="loading"?document.addEventListener("DOMContentLoaded",h):h(),w}function V(e){return(e||"").replace(/^#/,"")}function z(e){const t=e===void 0?location.hash:e,n={},r=V(t);if(!r)return n;const l=r.split("&");for(let a=0;a<l.length;a++){const s=l[a];if(!s)continue;const c=s.indexOf(":"),d=c>-1?s.slice(0,c):s,o=c>-1?s.slice(c+1):"";if(d)try{n[d]=decodeURIComponent(o)}catch{n[d]=o}}return n}function Ce(e){if(!e)return null;const t=z();return e in t?t[e]:null}function Ae(e,t){if(!e)return;const n=z();t==null?delete n[e]:n[e]=String(t);const l=Object.keys(n).map(function(a){const s=n[a];return s===""?a:a+":"+encodeURIComponent(s)}).join("&");V(location.hash)!==l&&(location.hash=l)}function _e(e){return e.button===1||e.ctrlKey||e.metaKey||e.shiftKey?!1:(e.preventDefault(),!0)}function Ie(e,t){if(!e||!e.hasAttribute("data-ln-hash"))return null;const n=e.getAttribute("data-ln-hash");if(n&&n.trim()!=="")return n.trim();const r=e.getAttribute("data-ln-sort")||e.getAttribute("data-ln-search-for")||e.getAttribute("data-ln-search")||e.getAttribute("data-ln-filter")||e.id;return r?t?r+"-"+t:r:t||null}function Se(e,t){return!t||t==="none"||e===null||e===void 0?null:String(e)+"."+t}function Ee(e){return!e||typeof e!="string"?null:e.endsWith(".asc")?{fieldOrColumn:e.slice(0,-4),direction:"asc"}:e.endsWith(".desc")?{fieldOrColumn:e.slice(0,-5),direction:"desc"}:null}function xe(e,t){return!e||!Array.isArray(t)||t.length===0?null:e+":"+t.map(encodeURIComponent).join(",")}function ke(e){if(!e||typeof e!="string")return null;const t=e.indexOf(":");if(t===-1)return null;const n=e.slice(0,t),r=e.slice(t+1),l=r?r.split(",").map(function(a){try{return decodeURIComponent(a)}catch{return a}}).filter(Boolean):[];return{key:n,values:l}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.hashParse=z,window.lnCore.hashGet=Ce,window.lnCore.hashSet=Ae,window.lnCore.hashLinkClick=_e,window.lnCore.resolveHashNamespace=Ie,window.lnCore.hashSortEncode=Se,window.lnCore.hashSortDecode=Ee,window.lnCore.hashFilterEncode=xe,window.lnCore.hashFilterDecode=ke);function Le(e){if(!e)return null;const t=String(e).split(",").map(n=>n.trim().toLowerCase()).filter(Boolean).map(n=>n.startsWith(".")?n.slice(1):n);return t.length?t:null}function X(e){return!e||typeof e!="string"||!e.includes(".")?"":e.split(".").pop().toLowerCase()}function Fe(e,t){if(!t||t.length===0)return!0;if(!e)return!1;const n=X(e.name),r=String(e.type||"").toLowerCase();return t.some(l=>{if(l.includes("/")){if(l.endsWith("/*")){const a=l.slice(0,-1);return r.startsWith(a)}return r===l}return n===l})}function De(e,t="en",n={}){if(typeof e!="number"||isNaN(e)||e===0)return"0 "+(n["unit-b"]||"B");const r=1024,l=[n["unit-b"]||"B",n["unit-kb"]||"KB",n["unit-mb"]||"MB",n["unit-gb"]||"GB"],a=Math.floor(Math.log(e)/Math.log(r)),s=Math.min(a,l.length-1),c=e/Math.pow(r,s);return new Intl.NumberFormat(t,{maximumFractionDigits:1,minimumFractionDigits:0}).format(c)+" "+l[s]}(function(){const e="data-ln-upload",t="lnUpload",n="file",r="file_ids[]";if(window[t]!==void 0)return;const l={"data-ln-upload":{prop:"uploadUrl",read:I,type:"string",fallback:"",description:"Endpoint URL for file uploads"},"data-ln-upload-accept":{type:"string",description:"Comma-separated list of allowed file extensions or MIME types"},"data-ln-upload-delete":{prop:"deleteUrlPattern",read:I,type:"string",fallback:"",description:"Endpoint URL pattern for deleting uploaded files"},"data-ln-upload-max-size":{prop:"maxSize",read:F,type:"integer",fallback:0,min:0,description:"Maximum allowed file size in bytes (0 for unlimited)"},"data-ln-upload-max-files":{prop:"maxFiles",read:F,type:"integer",fallback:0,min:0,description:"Maximum number of files allowed in upload queue (0 for unlimited)"},"data-ln-upload-file-field":{prop:"fileFieldName",read:I,type:"string",fallback:n,description:"Form data field name used for file payloads"},"data-ln-upload-ids-field":{prop:"idsFieldName",read:I,type:"string",fallback:r,description:"Form field name for submitting uploaded file IDs"},"data-ln-upload-dict":{type:"string",description:"Dictionary key prefix mapping for translatable upload messages"},"data-ln-upload-zone":{type:"marker",description:"Designates container as dropzone for drag-and-drop file uploads"},"data-ln-upload-list":{type:"marker",description:"Container element holding rendered upload items"},"data-ln-upload-item":{type:"marker",description:"Container element for an individual file upload item"},"data-ln-upload-action":{type:"enum",values:["remove","retry"],description:"Action button within upload item"},"data-ln-upload-state":{type:"enum",values:["ready","dragover","pending","uploading","success","error"],description:"Runtime status of dropzone or individual upload item"},"data-ln-upload-id":{type:"string",description:"Server-assigned file identifier for completed upload"},"data-ln-upload-local-id":{type:"string",description:"Client-generated unique ID for tracking file item in DOM"},"data-ln-upload-size":{type:"integer",min:0,description:"File size in bytes"},"data-ln-upload-ext":{type:"string",description:"Normalized file extension"}},a=ue(l);function s(o,i,u){return De(o,i,u)}function c(){const o=document.querySelector('meta[name="csrf-token"]');return o?o.getAttribute("content"):""}function d(o){this.dom=o,de(this,o,a),this.dict=re(o,"data-ln-upload-dict"),this.locale=Q(o),this.zone=o.querySelector("[data-ln-upload-zone]")||o,this.list=o.querySelector("[data-ln-upload-list]"),this.input=o.querySelector('input[type="file"]'),this.input||console.warn('[ln-upload] Missing <input type="file"> in container:',o);const i=o.getAttribute("data-ln-upload-accept")||(this.input?this.input.getAttribute("accept"):"");return this.allowedExts=Le(i),this.uploadedFiles=new Map,this.fileIdCounter=0,this._dragDepth=0,this._hydrate(),this._bindEvents(),this}d.prototype._hydrate=function(){const o=this;if(!this.list)return;const i=this.list.querySelectorAll("[data-ln-upload-item]");for(let f=0;f<i.length;f++){const p=i[f],b=p.getAttribute("data-ln-upload-id"),w="file-"+ ++o.fileIdCounter;p.setAttribute("data-ln-upload-local-id",w);const m=p.querySelector('[data-ln-field="name"]'),A=p.querySelector('[data-ln-field="sizeText"]'),g=p.getAttribute("data-ln-upload-size"),h=g?parseInt(g,10):null;o.uploadedFiles.set(w,{serverId:b||null,name:m?m.textContent.trim():"",size:h!==null&&!isNaN(h)?h:A?A.textContent.trim():""})}const u=this.dom.querySelectorAll('input[type="hidden"]');for(let f=0;f<u.length;f++){const p=u[f];if(p.name===o.idsFieldName&&p.value&&!Array.from(o.uploadedFiles.values()).some(function(w){return String(w.serverId)===String(p.value)})){const w="file-"+ ++o.fileIdCounter;o.uploadedFiles.set(w,{serverId:p.value,name:"",size:""})}}this._syncHiddenInputs()},d.prototype._syncHiddenInputs=function(){const o=this,i=this.dom.querySelectorAll('input[type="hidden"]');for(let u=0;u<i.length;u++)i[u].name===o.idsFieldName&&i[u].remove();for(const[,u]of this.uploadedFiles)if(u.serverId){const f=document.createElement("input");f.type="hidden",f.name=o.idsFieldName,f.value=u.serverId,o.dom.appendChild(f)}},d.prototype._bindEvents=function(){const o=this;this._onZoneClick=function(i){o.zone===o.dom&&i.target.closest("[data-ln-upload-list], [data-ln-upload-action], input, button, a")||o.input&&i.target!==o.input&&o.input.click()},this._onInputChange=function(){o.input&&o.input.files&&(o.upload(o.input.files),o.input.value="")},this._onDragEnter=function(i){i.preventDefault(),i.stopPropagation(),o._dragDepth++,o.zone.setAttribute("data-ln-upload-state","dragover")},this._onDragOver=function(i){i.preventDefault(),i.stopPropagation(),o.zone.setAttribute("data-ln-upload-state","dragover")},this._onDragLeave=function(i){i.preventDefault(),i.stopPropagation(),o._dragDepth--,o._dragDepth<=0&&(o._dragDepth=0,o.zone.removeAttribute("data-ln-upload-state"))},this._onDrop=function(i){i.preventDefault(),i.stopPropagation(),o._dragDepth=0,o.zone.removeAttribute("data-ln-upload-state"),i.dataTransfer&&i.dataTransfer.files&&o.upload(i.dataTransfer.files)},this._onListClick=function(i){const u=i.target.closest('[data-ln-upload-action="remove"]');if(!u||!o.list||!o.list.contains(u)||u.disabled)return;const f=u.closest("[data-ln-upload-item]");if(f){const p=f.getAttribute("data-ln-upload-local-id");p&&o.remove(p)}},this._onRequestUpload=function(i){i.detail&&i.detail.files&&o.upload(i.detail.files)},this._onRequestRemove=function(i){if(i.detail){const u=i.detail.localId!==void 0?i.detail.localId:i.detail.serverId;u!==void 0&&o.remove(u)}},this._onRequestClear=function(){o.clear()},this.zone.addEventListener("click",this._onZoneClick),this.input&&this.input.addEventListener("change",this._onInputChange),this.zone.addEventListener("dragenter",this._onDragEnter),this.zone.addEventListener("dragover",this._onDragOver),this.zone.addEventListener("dragleave",this._onDragLeave),this.zone.addEventListener("drop",this._onDrop),this.list&&this.list.addEventListener("click",this._onListClick),this.dom.addEventListener("ln-upload:request-upload",this._onRequestUpload),this.dom.addEventListener("ln-upload:request-remove",this._onRequestRemove),this.dom.addEventListener("ln-upload:request-clear",this._onRequestClear)},d.prototype.upload=function(o){const i=this,u=Array.from(o);for(let f=0;f<u.length;f++){const p=u[f];if(i.maxFiles>0&&i.uploadedFiles.size>=i.maxFiles){C(i.dom,"ln-upload:invalid",{file:p,reason:"max-files"});continue}if(!Fe(p,i.allowedExts)){C(i.dom,"ln-upload:invalid",{file:p,reason:"accept"});continue}if(i.maxSize>0&&p.size>i.maxSize){C(i.dom,"ln-upload:invalid",{file:p,reason:"max-size"});continue}k(i.dom,"ln-upload:before-upload",{file:p}).defaultPrevented||i._uploadSingleFile(p)}},d.prototype._uploadSingleFile=function(o){const i=this,u="file-"+ ++i.fileIdCounter,f=X(o.name);let p=null;if(this.list){const g=ee(this.dom,"ln-upload-item","ln-upload");if(g&&(p=g.firstElementChild,p)){p.setAttribute("data-ln-upload-item",""),p.setAttribute("data-ln-upload-local-id",u),p.setAttribute("data-ln-upload-ext",f),p.setAttribute("data-ln-upload-state","uploading"),_(p,{name:o.name,sizeText:"0%",removeLabel:i.dict.remove||"Remove",uploading:!0,error:!1,deleting:!1});const h=p.querySelector('[data-ln-upload-action="remove"]');h&&(h.disabled=!0);const y=p.querySelector("[data-ln-progress]");y&&y.setAttribute("data-ln-progress","0"),i.list.appendChild(p)}}const b=new FormData;b.append(i.fileFieldName,o);const w=this.dom.querySelectorAll("input, select, textarea");for(let g=0;g<w.length;g++){const h=w[g];!h.name||h.name===i.idsFieldName||h.type==="file"||(h.type==="checkbox"||h.type==="radio")&&!h.checked||b.append(h.name,h.value)}const m=new XMLHttpRequest;i.uploadedFiles.set(u,{serverId:null,name:o.name,size:o.size,xhr:m}),m.upload.addEventListener("progress",function(g){if(g.lengthComputable){const h=Math.round(g.loaded/g.total*100);if(p){const y=p.querySelector("[data-ln-progress]");y&&y.setAttribute("data-ln-progress",String(h)),_(p,{sizeText:h+"%"})}C(i.dom,"ln-upload:progress",{localId:u,file:o,percent:h,loaded:g.loaded,total:g.total})}}),m.addEventListener("load",function(){const g=i.uploadedFiles.get(u);if(g&&delete g.xhr,m.status>=200&&m.status<300){let h;try{h=JSON.parse(m.responseText)}catch(v){A(i.dict.error||"Error",m.status,v);return}const y=h.id||h.serverId;if(p){p.removeAttribute("data-ln-upload-state"),y&&p.setAttribute("data-ln-upload-id",String(y)),_(p,{sizeText:s(h.size||o.size,i.locale,i.dict),uploading:!1});const v=p.querySelector('[data-ln-upload-action="remove"]');v&&(v.disabled=!1)}g&&(g.serverId=y,g.size=h.size||o.size,g.name=h.name||o.name),i._syncHiddenInputs(),C(i.dom,"ln-upload:uploaded",{localId:u,serverId:y,name:h.name||o.name,size:h.size||o.size,response:h})}else{let h="";try{h=JSON.parse(m.responseText).message||""}catch{}A(h,m.status,null)}}),m.addEventListener("error",function(){const g=i.uploadedFiles.get(u);g&&delete g.xhr,A("",0,null)});function A(g,h,y){if(p){p.setAttribute("data-ln-upload-state","error"),_(p,{sizeText:i.dict.error||"Error",uploading:!1,error:!0});const v=p.querySelector('[data-ln-upload-action="remove"]');v&&(v.disabled=!1)}C(i.dom,"ln-upload:error",{file:o,message:g,status:h,error:y})}i.uploadUrl?(m.open("POST",i.uploadUrl),m.setRequestHeader("X-CSRF-TOKEN",c()),m.setRequestHeader("X-Requested-With","XMLHttpRequest"),m.setRequestHeader("Accept","application/json"),m.send(b)):console.warn("[ln-upload] No upload URL configured (missing data-ln-upload)")},d.prototype.remove=function(o){const i=this;let u=null,f=null;if(i.uploadedFiles.has(o))u=o,f=i.uploadedFiles.get(o);else for(const[m,A]of i.uploadedFiles)if(String(A.serverId)===String(o)){u=m,f=A;break}if(!u||!f||k(i.dom,"ln-upload:before-remove",{localId:u,serverId:f.serverId}).defaultPrevented)return;const b=i.list?i.list.querySelector('[data-ln-upload-local-id="'+u+'"]'):null;if(f.xhr&&typeof f.xhr.abort=="function"&&f.xhr.abort(),!f.serverId){b&&b.remove(),i.uploadedFiles.delete(u),i._syncHiddenInputs(),C(i.dom,"ln-upload:removed",{localId:u,serverId:null});return}let w=null;if(i.deleteUrlPattern?w=i.deleteUrlPattern.replace("{id}",encodeURIComponent(f.serverId)):i.uploadUrl&&i.uploadUrl.includes("{id}")&&(w=i.uploadUrl.replace("{id}",encodeURIComponent(f.serverId))),!w){b&&b.remove(),i.uploadedFiles.delete(u),i._syncHiddenInputs(),C(i.dom,"ln-upload:removed",{localId:u,serverId:f.serverId});return}b&&(b.setAttribute("data-ln-upload-state","deleting"),_(b,{deleting:!0})),fetch(w,{method:"DELETE",headers:{"X-CSRF-TOKEN":c(),"X-Requested-With":"XMLHttpRequest",Accept:"application/json"}}).then(function(m){m.ok?(b&&b.remove(),i.uploadedFiles.delete(u),i._syncHiddenInputs(),C(i.dom,"ln-upload:removed",{localId:u,serverId:f.serverId})):(b&&(b.removeAttribute("data-ln-upload-state"),_(b,{deleting:!1})),C(i.dom,"ln-upload:error",{file:f,message:"",status:m.status}))}).catch(function(m){b&&(b.removeAttribute("data-ln-upload-state"),_(b,{deleting:!1})),C(i.dom,"ln-upload:error",{file:f,message:"",status:0,error:m})})},d.prototype.clear=function(){const o=this;if(!k(o.dom,"ln-upload:before-clear",{}).defaultPrevented){for(const[,u]of this.uploadedFiles)if(u.xhr&&typeof u.xhr.abort=="function"&&u.xhr.abort(),u.serverId){let f=null;o.deleteUrlPattern?f=o.deleteUrlPattern.replace("{id}",encodeURIComponent(u.serverId)):o.uploadUrl&&o.uploadUrl.includes("{id}")&&(f=o.uploadUrl.replace("{id}",encodeURIComponent(u.serverId))),f&&fetch(f,{method:"DELETE",headers:{"X-CSRF-TOKEN":c(),"X-Requested-With":"XMLHttpRequest",Accept:"application/json"}}).catch(function(){})}o.uploadedFiles.clear(),o.list&&(o.list.innerHTML=""),o._syncHiddenInputs(),C(o.dom,"ln-upload:cleared",{})}},d.prototype.getFileIds=function(){return Array.from(this.uploadedFiles.values()).map(function(o){return o.serverId}).filter(Boolean)},d.prototype.getFiles=function(){return Array.from(this.uploadedFiles.values()).map(function(o){return{serverId:o.serverId,name:o.name,size:o.size}})},d.prototype.destroy=function(){if(this.dom[t]){for(const[,o]of this.uploadedFiles)o.xhr&&typeof o.xhr.abort=="function"&&o.xhr.abort();this.zone.removeEventListener("click",this._onZoneClick),this.input&&this.input.removeEventListener("change",this._onInputChange),this.zone.removeEventListener("dragenter",this._onDragEnter),this.zone.removeEventListener("dragover",this._onDragOver),this.zone.removeEventListener("dragleave",this._onDragLeave),this.zone.removeEventListener("drop",this._onDrop),this.list&&this.list.removeEventListener("click",this._onListClick),this.dom.removeEventListener("ln-upload:request-upload",this._onRequestUpload),this.dom.removeEventListener("ln-upload:request-remove",this._onRequestRemove),this.dom.removeEventListener("ln-upload:request-clear",this._onRequestClear),this.uploadedFiles.clear(),this.dict={},delete this.dom[t]}},ve(e,t,d,"ln-upload",{attributes:l})})()})();

package/components/ln-upload/ln-upload.schema.json

@@ -0,0 +1,193 @@
+{
+	"$comment": "This file is partly generated. The $comment, component, generator, and each attribute's direction, sources, type, values, fallback, and description keys are owned by the generator and synchronized from JS source code. All other keys are preserved and safe to hand-author. Regenerate with `npm run sync:ln-schemas`.",
+	"component": "ln-upload",
+	"generator": "scripts/sync-ln-schemas.mjs",
+	"attributes": {
+		"data-ln-debug": {
+			"direction": null,
+			"sources": [
+				"ln-upload-dev.scss"
+			]
+		},
+		"data-ln-field": {
+			"direction": "author",
+			"sources": [
+				"src/ln-upload.js"
+			]
+		},
+		"data-ln-progress": {
+			"direction": "both",
+			"sources": [
+				"src/ln-upload.js"
+			]
+		},
+		"data-ln-upload": {
+			"direction": null,
+			"sources": [
+				"ln-upload-dev.scss",
+				"ln-upload.scss",
+				"src/ln-upload.js"
+			],
+			"type": "string",
+			"fallback": "",
+			"description": "Endpoint URL for file uploads"
+		},
+		"data-ln-upload-accept": {
+			"direction": "author",
+			"sources": [
+				"src/ln-upload.js"
+			],
+			"type": "string",
+			"description": "Comma-separated list of allowed file extensions or MIME types"
+		},
+		"data-ln-upload-action": {
+			"direction": "author",
+			"sources": [
+				"src/ln-upload.js"
+			],
+			"type": "enum",
+			"values": [
+				"remove",
+				"retry"
+			],
+			"description": "Action button within upload item"
+		},
+		"data-ln-upload-delete": {
+			"direction": null,
+			"sources": [
+				"src/ln-upload.js"
+			],
+			"type": "string",
+			"fallback": "",
+			"description": "Endpoint URL pattern for deleting uploaded files"
+		},
+		"data-ln-upload-dict": {
+			"direction": null,
+			"sources": [
+				"ln-upload.scss",
+				"src/ln-upload.js"
+			],
+			"type": "string",
+			"description": "Dictionary key prefix mapping for translatable upload messages"
+		},
+		"data-ln-upload-ext": {
+			"direction": "runtime",
+			"sources": [
+				"src/ln-upload.js"
+			],
+			"type": "string",
+			"description": "Normalized file extension"
+		},
+		"data-ln-upload-file-field": {
+			"direction": null,
+			"sources": [
+				"src/ln-upload.js"
+			],
+			"type": "string",
+			"description": "Form data field name used for file payloads"
+		},
+		"data-ln-upload-id": {
+			"direction": "both",
+			"sources": [
+				"src/ln-upload.js"
+			],
+			"type": "string",
+			"description": "Server-assigned file identifier for completed upload"
+		},
+		"data-ln-upload-ids-field": {
+			"direction": null,
+			"sources": [
+				"src/ln-upload.js"
+			],
+			"type": "string",
+			"description": "Form field name for submitting uploaded file IDs"
+		},
+		"data-ln-upload-item": {
+			"direction": "both",
+			"sources": [
+				"ln-upload.scss",
+				"src/ln-upload.js"
+			],
+			"type": "marker",
+			"description": "Container element for an individual file upload item"
+		},
+		"data-ln-upload-list": {
+			"direction": "author",
+			"sources": [
+				"ln-upload-dev.scss",
+				"src/ln-upload.js"
+			],
+			"type": "marker",
+			"description": "Container element holding rendered upload items"
+		},
+		"data-ln-upload-local-id": {
+			"direction": "both",
+			"sources": [
+				"src/ln-upload.js"
+			],
+			"type": "string",
+			"description": "Client-generated unique ID for tracking file item in DOM"
+		},
+		"data-ln-upload-max-files": {
+			"direction": null,
+			"sources": [
+				"src/ln-upload.js"
+			],
+			"type": "integer",
+			"fallback": 0,
+			"min": 0,
+			"description": "Maximum number of files allowed in upload queue (0 for unlimited)"
+		},
+		"data-ln-upload-max-size": {
+			"direction": null,
+			"sources": [
+				"src/ln-upload.js"
+			],
+			"type": "integer",
+			"fallback": 0,
+			"min": 0,
+			"description": "Maximum allowed file size in bytes (0 for unlimited)"
+		},
+		"data-ln-upload-progress": {
+			"direction": null,
+			"sources": [
+				"ln-upload.scss"
+			]
+		},
+		"data-ln-upload-size": {
+			"direction": "author",
+			"sources": [
+				"src/ln-upload.js"
+			],
+			"type": "integer",
+			"min": 0,
+			"description": "File size in bytes"
+		},
+		"data-ln-upload-state": {
+			"direction": "runtime",
+			"sources": [
+				"ln-upload.scss",
+				"src/ln-upload.js"
+			],
+			"type": "enum",
+			"values": [
+				"ready",
+				"dragover",
+				"pending",
+				"uploading",
+				"success",
+				"error"
+			],
+			"description": "Runtime status of dropzone or individual upload item"
+		},
+		"data-ln-upload-zone": {
+			"direction": "author",
+			"sources": [
+				"ln-upload-dev.scss",
+				"src/ln-upload.js"
+			],
+			"type": "marker",
+			"description": "Designates container as dropzone for drag-and-drop file uploads"
+		}
+	}
+}

package/components/ln-upload/ln-upload.scss

@@ -0,0 +1,20 @@
+// ==========================================================================
+// ln-upload — Functional State & File Input Mechanics
+// ==========================================================================
+
+[data-ln-upload] [data-ln-upload-dict] {
+	display: none;
+}
+
+[data-ln-upload-item][data-ln-upload-state="uploading"] [data-ln-upload-progress] {
+	display: block;
+}
+
+[data-ln-upload-item]:not([data-ln-upload-state="uploading"]) [data-ln-upload-progress] {
+	display: none;
+}
+
+[data-ln-upload-item][data-ln-upload-state="deleting"] {
+	opacity: 0.7;
+	pointer-events: none;
+}