agentcss 0.16.1 → 0.24.1

package/dist/02-primitives/skeleton/skeleton.css

@@ -1 +1 @@
-.skeleton {display:block;background:var(--skeleton-bg);border-radius:var(--r-sm);height:var(--skeleton-h, 1em);width:100%;position:relative;overflow:hidden;}.skeleton--text {height:auto;padding-bottom:0.55em;margin-bottom:var(--sp-2);border-radius:var(--r-xs);}.skeleton--block {border-radius:var(--r-md);}.skeleton--circle {border-radius:50%;width:var(--skeleton-size, 40px);height:var(--skeleton-size, 40px);flex:none;}.skeleton--text:last-child {margin-bottom:0;}@media (prefers-reduced-motion:no-preference) {.skeleton::after {content:'';position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient( 90deg, transparent 0%, var(--skeleton-shimmer) 50%, transparent 100% );animation:skeleton-sweep var(--skeleton-duration, 1.4s) ease-in-out infinite;}}@keyframes skeleton-sweep {100% {transform:translateX(100%);}}@media (prefers-reduced-motion:reduce) {.skeleton::after {animation:none;opacity:0;}}.skeleton-list {display:flex;flex-direction:column;gap:var(--sp-3);}.skeleton-list__row {display:flex;align-items:center;gap:var(--sp-3);}
+.skeleton {display:block;background:var(--skeleton-bg);border-radius:var(--r-sm);height:var(--skeleton-h, 1em);width:100%;position:relative;overflow:hidden;}.skeleton--text {height:auto;padding-bottom:0.55em;margin-bottom:var(--sp-2);border-radius:var(--r-xs);}.skeleton--block {border-radius:var(--r-md);}.skeleton--circle {border-radius:50%;width:var(--skeleton-size, 40px);height:var(--skeleton-size, 40px);flex:none;}.skeleton--text:last-child {margin-bottom:0;}@media (prefers-reduced-motion:no-preference) {.skeleton::after {content:'';position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient( 90deg, transparent 0%, var(--skeleton-shimmer) 50%, transparent 100% );animation:skeleton-sweep var(--skeleton-duration, 1.4s) ease-in-out infinite;}}@keyframes skeleton-sweep {100% {transform:translateX(100%);}}@media (prefers-reduced-motion:reduce) {.skeleton::after {animation:none;opacity:0;}}@media (forced-colors:active) {.skeleton {background:GrayText;}}.skeleton-list {display:flex;flex-direction:column;gap:var(--sp-3);}.skeleton-list__row {display:flex;align-items:center;gap:var(--sp-3);}

package/dist/02-primitives/switch/switch.css

@@ -1 +1 @@
-.switch {position:relative;display:inline-flex;align-items:center;gap:var(--sp-3);cursor:pointer;min-height:44px;min-width:44px;}.switch__input {position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer;z-index:1;}.switch__track {position:relative;flex:0 0 auto;--sw-h:24px;--sw-inset:1px;--sw-pad:1px;--sw-gap:var(--sw-pad);--sw-thumb:calc(var(--sw-h) - var(--sw-inset) * 2 - var(--sw-pad) * 2);box-sizing:border-box;width:calc(var(--sw-h) * 1.75);height:var(--sw-h);border-radius:var(--r-pill);background:var(--surface-sunken);border:1px solid var(--border-decor);transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);}.switch__thumb {position:absolute;top:var(--sw-gap);inset-inline-start:var(--sw-gap);width:var(--sw-thumb);height:var(--sw-thumb);border-radius:50%;background:var(--surface);border:0;box-shadow:0 1px 2px rgba(0, 0, 0, .28);transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);}.switch__input:checked ~ .switch__track {background:var(--switch-on, var(--accent));border-color:var(--switch-on, var(--accent));}.switch__input:checked ~ .switch__track .switch__thumb {transform:translateX(calc(var(--sw-h) * 1.75 - var(--sw-inset) * 2 - var(--sw-pad) * 2 - (var(--sw-h) - var(--sw-inset) * 2 - var(--sw-pad) * 2)));border-color:var(--accent);}.switch__input {outline:none;}.switch__input:focus-visible ~ .switch__track {outline:2px solid var(--accent);outline-offset:2px;}.switch__input:disabled ~ .switch__track {background:var(--surface-sunken);border-color:var(--border-decor);cursor:not-allowed;}.switch__input:disabled ~ .switch__track .switch__thumb {background:var(--surface);border-color:var(--border-decor);box-shadow:none;}.switch__input:disabled ~ .switch__label {color:var(--text-tertiary);cursor:not-allowed;}.switch__label {cursor:pointer;user-select:none;}.switch__label--sr {position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}@media (hover:hover) and (pointer:fine) {.switch:not(.switch--disabled):hover .switch__track {border-color:var(--accent-hover);}}.switch--lg .switch__track {--sw-h:28px;width:48px;height:28px;}.switch--lg .switch__thumb {width:22px;height:22px;}.switch--lg .switch__input:checked ~ .switch__track .switch__thumb {transform:translateX(calc(var(--sw-h) * 1.75 - var(--sw-inset) * 2 - var(--sw-pad) * 2 - (var(--sw-h) - var(--sw-inset) * 2 - var(--sw-pad) * 2)));}
+.switch {position:relative;display:inline-flex;align-items:center;gap:var(--sp-3);cursor:pointer;min-height:44px;min-width:44px;}.switch__input {position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer;z-index:1;}.switch__track {position:relative;flex:0 0 auto;--sw-h:24px;--sw-inset:1px;--sw-pad:1px;--sw-gap:var(--sw-pad);--sw-thumb:calc(var(--sw-h) - var(--sw-inset) * 2 - var(--sw-pad) * 2);box-sizing:border-box;width:calc(var(--sw-h) * 1.75);height:var(--sw-h);border-radius:var(--r-pill);background:var(--surface-sunken);border:1px solid var(--border-decor);transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);}.switch__thumb {position:absolute;top:var(--sw-gap);inset-inline-start:var(--sw-gap);width:var(--sw-thumb);height:var(--sw-thumb);border-radius:50%;background:var(--surface);border:1px solid transparent;box-shadow:0 1px 2px rgba(0, 0, 0, .28);transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);}.switch__input:checked ~ .switch__track {background:var(--switch-on, var(--accent));border-color:var(--switch-on, var(--accent));}.switch__input:checked ~ .switch__track .switch__thumb {transform:translateX(calc(var(--sw-h) * 1.75 - var(--sw-inset) * 2 - var(--sw-pad) * 2 - (var(--sw-h) - var(--sw-inset) * 2 - var(--sw-pad) * 2)));border-color:transparent;}.switch__input {outline:none;}.switch__input:focus-visible ~ .switch__track {outline:2px solid var(--accent);outline-offset:2px;}.switch__input:disabled ~ .switch__track {background:var(--surface-sunken);border-color:var(--border-decor);cursor:not-allowed;}.switch__input:disabled ~ .switch__track .switch__thumb {background:var(--surface);border-color:var(--border-decor);box-shadow:none;}.switch__input:disabled ~ .switch__label {color:var(--text-tertiary);cursor:not-allowed;}.switch__label {cursor:pointer;user-select:none;}.switch__label--sr {position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}@media (hover:hover) and (pointer:fine) {.switch:not(.switch--disabled):hover .switch__track {border-color:var(--accent-hover);}}.switch--lg .switch__track {--sw-h:28px;width:48px;height:28px;}.switch--lg .switch__thumb {width:22px;height:22px;}.switch--lg .switch__input:checked ~ .switch__track .switch__thumb {transform:translateX(calc(var(--sw-h) * 1.75 - var(--sw-inset) * 2 - var(--sw-pad) * 2 - (var(--sw-h) - var(--sw-inset) * 2 - var(--sw-pad) * 2)));}@media (forced-colors:active) {.switch__input:checked ~ .switch__track {background:Highlight;}.switch__input:disabled ~ .switch__track {border-color:GrayText;}.switch__input:disabled ~ .switch__track .switch__thumb {border-color:GrayText;}.switch__input:disabled ~ .switch__label {color:GrayText;}}

package/dist/02-primitives/timeline/timeline.css

@@ -0,0 +1 @@
+.timeline {--tl-dot:8px;--tl-axis:4px;list-style:none;margin:0;padding:0;min-width:0;}.timeline__item {position:relative;padding-inline-start:var(--sp-5);padding-block-end:var(--sp-4);}.timeline__item:last-child {padding-block-end:0;}.timeline__item:not(:last-child)::before {content:"";position:absolute;inset-inline-start:calc(var(--tl-axis) - 1px);inset-block-start:calc(var(--fs-xs) * var(--lh-base) / 2);inset-block-end:calc(var(--fs-xs) * var(--lh-base) / -2);width:2px;background:var(--border-decor-str);}.timeline__item::after {content:"";position:absolute;inset-inline-start:calc(var(--tl-axis) - var(--tl-dot) / 2);inset-block-start:calc(var(--fs-xs) * var(--lh-base) / 2 - var(--tl-dot) / 2);width:var(--tl-dot);height:var(--tl-dot);border-radius:var(--r-full);background:var(--accent);}.timeline__item--latest {--tl-dot:12px;}.timeline__item--latest .timeline__title {font-weight:600;}.timeline__time {display:block;line-height:var(--lh-base);color:var(--text-tertiary);font-size:var(--fs-xs);}.timeline__title {margin:0;color:var(--text-primary);font-weight:500;}.timeline__body {margin:var(--sp-1) 0 0;color:var(--text-secondary);font-size:var(--fs-sm);}.timeline--compact .timeline__item {padding-block-end:var(--sp-2);}.timeline--compact .timeline__time {display:inline;margin-inline-end:var(--sp-2);}@media (forced-colors:active) {.timeline__item::after {background:CanvasText;}.timeline__item:not(:last-child)::before {background:GrayText;}}

package/dist/02-primitives/upload/upload.css

@@ -0,0 +1 @@
+.upload {--upload-pad:var(--sp-4);--upload-gap:var(--sp-3);--upload-icon:28px;--upload-item-pad:var(--sp-2) var(--sp-3);--upload-radius:var(--r-md);display:flex;flex-direction:column;gap:var(--upload-gap);min-width:0;}.upload__input {font:inherit;font-size:var(--fs-sm);color:var(--text-primary);max-width:100%;outline:1px solid transparent;outline-offset:2px;border-radius:var(--r-sm);}.upload__input::file-selector-button {font:inherit;font-size:var(--fs-sm);font-weight:500;color:var(--text-primary);background:var(--surface);border:1px solid var(--border-control);border-radius:var(--r-sm);padding:var(--sp-2) var(--sp-3);margin-inline-end:var(--sp-3);min-height:var(--sz-touch-sm);cursor:pointer;transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);}.upload__input:focus-visible {outline:2px solid var(--accent);outline-offset:2px;}.upload__input:disabled {color:var(--text-tertiary);cursor:not-allowed;}.upload__input:disabled::file-selector-button {color:var(--text-tertiary);background:var(--surface-sunken);border-color:var(--border-decor);cursor:not-allowed;}.upload--drop {gap:var(--sp-2);position:relative;}.upload--drop .upload__input {position:absolute;inset-block-start:0;inset-inline-start:0;width:1px;height:1px;opacity:0;}.upload__dropzone {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-2);padding:var(--upload-pad) var(--sp-3);min-height:calc(var(--sz-touch) * 2);text-align:center;color:var(--text-secondary);background:var(--surface-sunken);border:1px dashed var(--border-control);border-radius:var(--upload-radius);cursor:pointer;transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);}.upload--drop[data-state="dragover"] .upload__dropzone {background:var(--accent-soft);border-color:var(--accent);border-style:solid;color:var(--text-primary);}.upload--drop .upload__input:focus-visible ~ .upload__dropzone {outline:2px solid var(--accent);outline-offset:2px;}.upload--drop .upload__input:disabled ~ .upload__dropzone {color:var(--text-tertiary);background:var(--surface-sunken);border-color:var(--border-decor);border-style:solid;cursor:not-allowed;}.upload--drop .upload__input:disabled ~ .upload__dropzone .upload__title, .upload--drop .upload__input:disabled ~ .upload__dropzone .upload__browse {color:var(--text-tertiary);text-decoration:none;}@media (hover:hover) and (pointer:fine) {.upload__input::file-selector-button:hover {background:var(--surface-sunken);border-color:var(--accent);}.upload--drop .upload__dropzone:hover {background:var(--accent-soft);border-color:var(--accent);}.upload__remove:hover {color:var(--danger);background:var(--danger-bg);}}.upload__icon {width:var(--upload-icon);height:var(--upload-icon);color:var(--text-tertiary);flex:none;}.upload--drop[data-state="dragover"] .upload__icon {color:var(--accent);}.upload__title {font-size:var(--fs-sm);color:var(--text-primary);}.upload__browse {color:var(--accent);text-decoration:underline;text-underline-offset:2px;}.upload__hint {font-size:var(--fs-xs);color:var(--text-tertiary);max-width:42ch;}.upload__list {display:flex;flex-direction:column;gap:var(--sp-1);margin:0;padding:0;list-style:none;}.upload__list:empty {display:none;}.upload__item {display:grid;grid-template-columns:auto minmax(0, 1fr) auto auto;grid-template-areas:"mark name meta remove";align-items:center;gap:var(--sp-1) var(--sp-2);padding:var(--upload-item-pad);background:var(--surface);border:1px solid var(--border-decor);border-radius:var(--r-sm);font-size:var(--fs-sm);}.upload__item[data-state="error"]::after {content:"";grid-area:remove;width:var(--sz-touch-sm);height:var(--sz-touch-sm);}.upload__mark {grid-area:mark;display:flex;align-items:center;justify-content:center;width:18px;height:18px;color:var(--text-tertiary);flex:none;}.upload__item[data-state="done"] .upload__mark {color:var(--success);}.upload__item[data-state="error"] .upload__mark {color:var(--danger);}.upload__item[data-state="pending"] .upload__mark {color:var(--text-secondary);}.upload__mark svg {width:16px;height:16px;display:block;}.upload__name {grid-area:name;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-primary);overflow-wrap:anywhere;}.upload__meta {grid-area:meta;font-size:var(--fs-xs);color:var(--text-secondary);white-space:nowrap;}.upload__item[data-state="error"] .upload__meta {color:var(--danger);white-space:normal;text-align:end;}.upload__progress {grid-column:1 / -1;display:block;min-width:0;}.upload__item[data-state="done"] .upload__progress, .upload__item[data-state="error"] .upload__progress {display:none;}.upload__remove {grid-area:remove;display:inline-flex;align-items:center;justify-content:center;width:var(--sz-touch-sm);height:var(--sz-touch-sm);padding:0;color:var(--text-tertiary);background:none;border:0;border-radius:var(--r-sm);cursor:pointer;transition:color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);}.upload__remove:focus-visible {outline:2px solid var(--accent);outline-offset:2px;}.upload__remove svg {width:16px;height:16px;display:block;pointer-events:none;}.upload__status {position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}.upload--compact .upload__dropzone {flex-direction:row;justify-content:flex-start;text-align:start;min-height:var(--sz-touch);padding:var(--sp-2) var(--sp-3);}.upload--compact .upload__icon {--upload-icon:20px;}.upload--compact .upload__hint {display:none;}@container (max-width:26rem) {.upload--drop .upload__dropzone {padding:var(--sp-3);}.upload--drop .upload__icon {--upload-icon:22px;}}@container (min-width:26.0625rem) {.upload--drop .upload__dropzone {padding:var(--upload-pad) var(--sp-3);}.upload--drop .upload__icon {--upload-icon:28px;}}

package/dist/02-primitives/upload/upload.js

@@ -0,0 +1,515 @@
+(function (global) {
+'use strict';
+
+var flEmit = function (el, name, detail) {
+if (!el || !el.dispatchEvent) return null;
+var type = name.indexOf('fl-') === 0 ? name : 'fl-' + name;
+var ev = null;
+
+if (typeof window.CustomEvent === 'function') {
+try {
+ev = new window.CustomEvent(type, {
+detail: detail || null, bubbles: true, cancelable: false
+});
+} catch (e) { ev = null; }
+}
+if (!ev) {
+try {
+ev = document.createEvent('CustomEvent');
+ev.initCustomEvent(type, true, false, detail || null);
+} catch (e2) { return null; }
+}
+el.dispatchEvent(ev);
+return ev;
+};
+
+var SVG_NS = 'http://www.w3.org/2000/svg';
+
+var ICON = {
+pending: 'M8 1.7a6.3 6.3 0 1 0 0 12.6A6.3 6.3 0 0 0 8 1.7zM8 4.6V8l2.3 1.5',
+done: 'M3.3 8.4l3.1 3.1 6.3-6.9',
+error: 'M8 1.7a6.3 6.3 0 1 0 0 12.6A6.3 6.3 0 0 0 8 1.7zM8 4.9v3.4M8 11.1v.5',
+remove: 'M4.2 4.2l7.6 7.6M11.8 4.2l-7.6 7.6'
+};
+
+var STATE_TEXT = { pending: '待上传', done: '已完成', error: '失败' };
+
+function humanSize(n) {
+if (typeof n !== 'number' || n < 0) return '';
+if (n < 1024) return n + ' B';
+if (n < 1024 * 1024) {
+return (n < 10240 ? oneDecimal(n / 1024) : Math.round(n / 1024)) + ' KB';
+}
+return (n < 10 * 1048576 ? oneDecimal(n / 1048576) : Math.round(n / 1048576)) + ' MB';
+}
+
+function oneDecimal(v) {
+return v.toFixed(1).replace(/\.0$/, '');
+}
+
+function trim(s) { return String(s == null ? '' : s).replace(/^\s+|\s+$/g, ''); }
+
+function matchesAccept(file, accept) {
+if (!accept) return true;
+var parts = String(accept).split(',');
+var name = (file.name || '').toLowerCase();
+var type = (file.type || '').toLowerCase();
+for (var i = 0; i < parts.length; i++) {
+var p = trim(parts[i]).toLowerCase();
+if (!p) continue;
+if (p.charAt(0) === '.') {
+
+if (name.length > p.length && name.slice(-p.length) === p) return true;
+} else if (p.indexOf('/*') > 0) {
+if (type.indexOf(p.slice(0, p.indexOf('/')) + '/') === 0) return true;
+} else if (type === p) {
+return true;
+}
+}
+return false;
+}
+
+function currentFiles(input) {
+var out = [];
+var fl = input && input.files;
+if (!fl) return out;
+for (var i = 0; i < fl.length; i++) out.push(fl[i]);
+return out;
+}
+
+function writeFiles(input, files) {
+if (typeof global.DataTransfer !== 'function') return false;
+try {
+var dt = new global.DataTransfer();
+for (var i = 0; i < files.length; i++) {
+if (dt.items && dt.items.add) dt.items.add(files[i]);
+}
+input.files = dt.files;
+return true;
+} catch (e) {
+return false;
+}
+}
+
+function iconEl(name) {
+var svg = document.createElementNS(SVG_NS, 'svg');
+svg.setAttribute('viewBox', '0 0 16 16');
+svg.setAttribute('fill', 'none');
+svg.setAttribute('stroke', 'currentColor');
+svg.setAttribute('stroke-width', '1.6');
+svg.setAttribute('stroke-linecap', 'round');
+svg.setAttribute('stroke-linejoin', 'round');
+svg.setAttribute('aria-hidden', 'true');
+var path = document.createElementNS(SVG_NS, 'path');
+path.setAttribute('d', ICON[name] || ICON.pending);
+svg.appendChild(path);
+return svg;
+}
+
+function Upload(root, opts) {
+var opt = opts || {};
+
+this.root = root;
+this.input = root.querySelector('.upload__input');
+this.list = root.querySelector('.upload__list');
+this.status = root.querySelector('.upload__status');
+this.dropzone = root.querySelector('.upload__dropzone');
+
+if (!this.input) {
+throw new Error('upload: 缺少 .upload__input —— 没有它就没有真值，组件无法工作');
+}
+
+this.maxSize = opt.maxSize || parseInt(root.getAttribute('data-max-size'), 10) || 0;
+this.maxFiles = opt.maxFiles || parseInt(root.getAttribute('data-max-files'), 10) || 0;
+
+this.progress = [];
+this.rejected = [];
+this._announceTimer = null;
+this._dragDepth = 0;
+
+var self = this;
+this._onChange = function () { self._handleChange(); };
+this.input.addEventListener('change', this._onChange);
+
+if (this.dropzone) {
+this._onDragOver = function (e) { self._handleDragOver(e); };
+this._onDragEnter = function (e) { self._handleDragEnter(e); };
+this._onDragLeave = function (e) { self._handleDragLeave(e); };
+this._onDrop = function (e) { self._handleDrop(e); };
+this.dropzone.addEventListener('dragover', this._onDragOver);
+this.dropzone.addEventListener('dragenter', this._onDragEnter);
+this.dropzone.addEventListener('dragleave', this._onDragLeave);
+this.dropzone.addEventListener('drop', this._onDrop);
+}
+
+this.render();
+}
+
+Upload.prototype = {
+constructor: Upload,
+
+_handleDragOver: function (e) {
+
+e.preventDefault();
+if (e.dataTransfer) {
+
+try { e.dataTransfer.dropEffect = 'copy'; } catch (err) {  }
+}
+},
+
+_handleDragEnter: function (e) {
+e.preventDefault();
+this._dragDepth++;
+this.setState('dragover');
+},
+
+_handleDragLeave: function (e) {
+e.preventDefault();
+
+this._dragDepth--;
+if (this._dragDepth <= 0) {
+this._dragDepth = 0;
+this.setState('');
+}
+},
+
+_handleDrop: function (e) {
+e.preventDefault();
+this._dragDepth = 0;
+this.setState('');
+
+var dt = e.dataTransfer;
+if (!dt) return;
+
+var dropped = [];
+var dirCount = 0;
+if (dt.items && dt.items.length) {
+for (var i = 0; i < dt.items.length; i++) {
+var it = dt.items[i];
+if (it.kind !== 'file') continue;
+var entry = it.webkitGetAsEntry && it.webkitGetAsEntry();
+if (entry && entry.isDirectory) { dirCount++; continue; }
+var f = it.getAsFile && it.getAsFile();
+if (f) dropped.push(f);
+}
+} else if (dt.files) {
+for (var j = 0; j < dt.files.length; j++) dropped.push(dt.files[j]);
+}
+
+if (!dropped.length && !dirCount) return;
+this.add(dropped, dirCount);
+},
+
+_validate: function (incoming) {
+var keep = [];
+var rejected = [];
+var maxFiles = this.maxFiles || (this.input.multiple ? 0 : 1);
+var accept = this.input.getAttribute('accept');
+
+for (var i = 0; i < incoming.length; i++) {
+var f = incoming[i];
+if (maxFiles && keep.length >= maxFiles) {
+rejected.push({ file: f, reason: 'count', text: '最多 ' + maxFiles + ' 个文件' });
+continue;
+}
+if (this.maxSize && f.size > this.maxSize) {
+rejected.push({ file: f, reason: 'size', text: '超过 ' + humanSize(this.maxSize) });
+continue;
+}
+if (!matchesAccept(f, accept)) {
+rejected.push({ file: f, reason: 'type', text: '类型不支持' });
+continue;
+}
+keep.push(f);
+}
+return { keep: keep, rejected: rejected };
+},
+
+add: function (incoming, dirCount) {
+var r = this._validate(incoming);
+
+if (dirCount) {
+r.rejected.push({
+file: { name: dirCount + ' 个文件夹', size: 0 },
+reason: 'dir', text: '请拖入文件，不支持文件夹'
+});
+}
+
+if (!r.keep.length) {
+
+this.rejected = r.rejected;
+this.render();
+this.announce(r.rejected.length ? '未添加任何文件：' + r.rejected[0].text : '未添加任何文件');
+flEmit(this.root, 'fl-upload', {
+files: currentFiles(this.input), added: 0, rejected: r.rejected
+});
+return false;
+}
+
+if (!writeFiles(this.input, r.keep)) {
+
+this.rejected = [{ file: r.keep[0], reason: 'unsupported',
+text: '当前浏览器不支持拖放，请点「选择文件」' }];
+this.render();
+this.announce('当前浏览器不支持拖放，请点选择文件');
+return false;
+}
+
+this.progress = [];
+this.rejected = r.rejected;
+this.render();
+this.announce(this.summary(r.keep.length, r.rejected.length));
+flEmit(this.root, 'fl-upload', {
+files: currentFiles(this.input), added: r.keep.length, rejected: r.rejected
+});
+
+return true;
+},
+
+_handleChange: function () {
+var files = currentFiles(this.input);
+var r = this._validate(files);
+
+if (r.rejected.length) writeFiles(this.input, r.keep);
+
+this.progress = [];
+this.rejected = r.rejected;
+this.render();
+this.announce(this.summary(r.keep.length, r.rejected.length));
+flEmit(this.root, 'fl-upload', {
+files: currentFiles(this.input), added: r.keep.length, rejected: r.rejected
+});
+},
+
+render: function () {
+var files = currentFiles(this.input);
+var keep = [];
+
+this.list.innerHTML = '';
+
+for (var i = 0; i < files.length; i++) {
+var pct = this.progress[i];
+keep.push(pct === undefined ? null : pct);
+this.list.appendChild(this.itemEl(files[i], i, null, pct));
+}
+this.progress = keep;
+
+var rej = this.rejected || [];
+for (var j = 0; j < rej.length; j++) {
+this.list.appendChild(this.itemEl(rej[j].file, -1, rej[j].text, null));
+}
+
+this.syncCount();
+},
+
+itemEl: function (file, index, note, pct) {
+var self = this;
+var rejected = index < 0;
+var state = rejected ? 'error' : (pct === -1 ? 'done' : 'pending');
+
+var li = document.createElement('li');
+li.className = 'upload__item';
+li.setAttribute('data-state', state);
+
+var mark = document.createElement('span');
+mark.className = 'upload__mark';
+mark.appendChild(iconEl(state === 'done' ? 'done' : state === 'error' ? 'error' : 'pending'));
+
+var sr = document.createElement('span');
+sr.className = 'upload__status';
+sr.textContent = STATE_TEXT[state] || '';
+mark.appendChild(sr);
+
+var name = document.createElement('span');
+name.className = 'upload__name';
+name.textContent = file.name || '—';
+name.title = file.name || '';
+
+var meta = document.createElement('span');
+
+meta.className = 'upload__meta num';
+meta.textContent = note || humanSize(file.size);
+
+li.appendChild(mark);
+li.appendChild(name);
+li.appendChild(meta);
+
+if (!rejected) {
+
+if (pct != null && pct >= 0) {
+var bar0 = document.createElement('span');
+bar0.className = 'upload__progress';
+li.appendChild(bar0);
+this.paintProgress(bar0, pct);
+}
+
+var rm = document.createElement('button');
+rm.className = 'upload__remove';
+rm.type = 'button';
+rm.setAttribute('aria-label', '移除 ' + (file.name || ''));
+rm.appendChild(iconEl('remove'));
+rm.addEventListener('click', function () { self.removeAt(index); });
+li.appendChild(rm);
+
+if (pct != null && pct >= 0) meta.textContent = '上传中 ' + Math.round(pct) + '%';
+}
+
+return li;
+},
+
+paintProgress: function (bar, pct) {
+
+if (!bar || pct == null || pct < 0) return;
+bar.innerHTML = '';
+var track = document.createElement('span');
+track.className = 'progress';
+var fill = document.createElement('span');
+fill.className = 'progress__bar';
+fill.style.setProperty('--progress', Math.max(0, Math.min(100, pct)) + '%');
+track.appendChild(fill);
+bar.appendChild(track);
+},
+
+syncCount: function () {
+
+this.root.setAttribute('data-count', String(currentFiles(this.input).length));
+},
+
+setState: function (s) {
+if (s) this.root.setAttribute('data-state', s);
+else this.root.removeAttribute('data-state');
+},
+
+setProgress: function (i, pct) {
+var li = this.list.querySelectorAll('.upload__item')[i];
+if (!li || li.getAttribute('data-state') === 'error') return;
+var files = currentFiles(this.input);
+var f = files[i];
+var meta = li.querySelector('.upload__meta');
+
+if (pct < 0 || pct >= 100) {
+this.progress[i] = -1;
+li.setAttribute('data-state', 'done');
+var mark = li.querySelector('.upload__mark');
+if (mark) {
+mark.innerHTML = '';
+mark.appendChild(iconEl('done'));
+var sr = document.createElement('span');
+sr.className = 'upload__status';
+sr.textContent = STATE_TEXT.done;
+mark.appendChild(sr);
+}
+if (meta && f) meta.textContent = humanSize(f.size);
+var bar = li.querySelector('.upload__progress');
+if (bar && bar.parentNode) bar.parentNode.removeChild(bar);
+return;
+}
+
+this.progress[i] = pct;
+li.setAttribute('data-state', 'pending');
+var bar = li.querySelector('.upload__progress');
+if (!bar) {
+
+bar = document.createElement('span');
+bar.className = 'upload__progress';
+var rmBtn = li.querySelector('.upload__remove');
+li.insertBefore(bar, rmBtn || null);
+}
+this.paintProgress(bar, pct);
+
+if (meta) meta.textContent = '上传中 ' + Math.round(pct) + '%';
+},
+
+removeAt: function (i) {
+var files = currentFiles(this.input);
+if (i < 0 || i >= files.length) return false;
+
+var removed = files[i];
+var rest = files.slice(0, i).concat(files.slice(i + 1));
+if (!writeFiles(this.input, rest)) return false;
+
+this.progress.splice(i, 1);
+
+var li = this.list.querySelectorAll('.upload__item')[i];
+if (li && li.parentNode) li.parentNode.removeChild(li);
+
+this.rebind();
+this.syncCount();
+this.announce('已移除 ' + (removed.name || '文件') + '，还剩 ' + rest.length + ' 个');
+flEmit(this.root, 'fl-upload', {
+files: rest, added: 0, removed: removed, rejected: []
+});
+return true;
+},
+
+rebind: function () {
+
+var self = this;
+var items = this.list.querySelectorAll('.upload__item');
+for (var i = 0; i < items.length; i++) {
+var btn = items[i].querySelector('.upload__remove');
+if (!btn) continue;
+var fresh = btn.cloneNode(true);
+btn.parentNode.replaceChild(fresh, btn);
+(function (idx) {
+fresh.addEventListener('click', function () { self.removeAt(idx); });
+})(i);
+}
+},
+
+announce: function (msg) {
+if (!this.status) return;
+var el = this.status;
+if (this._announceTimer) global.clearTimeout(this._announceTimer);
+el.textContent = '';
+this._announceTimer = global.setTimeout(function () { el.textContent = msg; }, 60);
+},
+
+summary: function (added, rejected) {
+var total = currentFiles(this.input).length;
+var s = '已添加 ' + added + ' 个文件，共 ' + total + ' 个';
+if (rejected) s += '；' + rejected + ' 个未通过校验';
+return s;
+},
+
+destroy: function () {
+this.input.removeEventListener('change', this._onChange);
+if (this.dropzone) {
+this.dropzone.removeEventListener('dragover', this._onDragOver);
+this.dropzone.removeEventListener('dragenter', this._onDragEnter);
+this.dropzone.removeEventListener('dragleave', this._onDragLeave);
+this.dropzone.removeEventListener('drop', this._onDrop);
+}
+if (this._announceTimer) global.clearTimeout(this._announceTimer);
+if (this.list) this.list.innerHTML = '';
+this.root.removeAttribute('data-count');
+this.root.removeAttribute('data-state');
+if (this.root.uploadInstance === this) this.root.uploadInstance = null;
+}
+};
+
+global.Upload = Upload;
+
+function init() {
+var nodes = document.querySelectorAll('[data-upload]');
+for (var i = 0; i < nodes.length; i++) {
+
+if (nodes[i].uploadInstance) continue;
+try {
+nodes[i].uploadInstance = new Upload(nodes[i]);
+} catch (e) {
+
+if (global.console && global.console.warn) {
+global.console.warn('upload: 初始化失败，已跳过该元素 —— ' + (e && e.message));
+}
+}
+}
+}
+
+if (typeof document === 'undefined') return;
+if (document.readyState === 'loading') {
+document.addEventListener('DOMContentLoaded', init);
+} else {
+init();
+}
+})(typeof window !== 'undefined' ? window : globalThis);

package/dist/03-patterns/drawer/drawer.js

@@ -231,12 +231,22 @@ setBackgroundInert(true);
 lockScroll();
 
 var f = d.querySelectorAll(FOCUSABLE);
+var landed = false;
 if (opt.initialFocus) {
 var t = d.querySelector(opt.initialFocus);
-if (t) t.focus();
-else (f[0] || d).focus();
-} else {
-(f[0] || d).focus();
+if (t) {
+try { t.focus(); } catch (e) {  }
+landed = document.activeElement === t;
+}
+}
+if (!landed) {
+var first = null;
+for (var fi = 0; fi < f.length; fi++) {
+if (f[fi].offsetParent === null) continue;
+first = f[fi];
+break;
+}
+(first || d).focus();
 }
 
 var dm = flDismissable({

package/dist/04-recipes/app-shell/app-shell.css

@@ -0,0 +1 @@
+.shell {--shell-side-w:15rem;--shell-topbar-h:3.5rem;--shell-gap:var(--sp-4);--shell-pad:var(--sp-4);--shell-bp:48rem;display:grid;grid-template-columns:var(--shell-side-w) minmax(0, 1fr);grid-template-rows:auto minmax(0, 1fr);grid-template-areas:"side topbar" "side main";min-height:100vh;min-height:100dvh;background:var(--surface);}.shell__side {grid-area:side;display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--shell-pad) var(--sp-3);position:sticky;inset-block-start:0;align-self:start;max-height:100vh;max-height:100dvh;overflow-y:auto;overscroll-behavior:contain;outline:1px solid transparent;outline-offset:-1px;}.shell__brand {display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-2) var(--sp-3);font-weight:500;color:var(--text-primary);text-decoration:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.shell__brand-mark {flex:0 0 auto;display:inline-flex;color:var(--accent);}.shell__brand-text {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.shell__side-group {display:flex;flex-direction:column;gap:2px;margin:0;padding:0;list-style:none;}.shell__side-group + .shell__side-group {margin-top:var(--sp-2);padding-top:var(--sp-2);border-top:1px solid var(--border-decor);}.shell__side-label {padding:var(--sp-2) var(--sp-2) var(--sp-1);font-size:var(--fs-xs);color:var(--text-tertiary);letter-spacing:var(--tracking-normal);text-transform:uppercase;}.shell__link {display:flex;align-items:center;gap:var(--sp-2);min-height:var(--sz-touch);padding:var(--sp-2) var(--sp-3);border-radius:var(--r-sm);color:var(--text-secondary);font-size:var(--fs-sm);text-decoration:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);}.shell__link[aria-current="page"] {color:var(--text-primary);background:var(--surface-sunken);font-weight:500;box-shadow:inset 3px 0 0 var(--accent);}.shell__link:focus-visible {outline:2px solid var(--accent);outline-offset:2px;}@media (hover:hover) and (pointer:fine) {.shell__link:hover {color:var(--text-primary);}}[dir="rtl"] .shell__link[aria-current="page"] {box-shadow:inset -3px 0 0 var(--accent);}@media (forced-colors:active) {.shell__link {position:relative;box-shadow:none;}.shell__link[aria-current="page"] {font-weight:700;}.shell__link[aria-current="page"]::before {content:"";position:absolute;inset-inline-start:3px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:CanvasText;}}.shell__topbar {grid-area:topbar;display:flex;align-items:center;gap:var(--sp-3);min-height:var(--shell-topbar-h);padding:0 var(--shell-pad);background:var(--surface);border-block-end:1px solid var(--border-decor);position:sticky;inset-block-start:0;z-index:var(--z-header);}.shell__menu {display:none;align-items:center;justify-content:center;flex:none;width:var(--sz-touch);height:var(--sz-touch);margin-inline-start:calc(-1 * var(--sp-2));padding:0;color:var(--text-secondary);background:none;border:1px solid transparent;border-radius:var(--r-sm);cursor:pointer;}.shell__menu:focus-visible {outline:2px solid var(--accent);outline-offset:2px;}@media (hover:hover) and (pointer:fine) {.shell__menu:hover {color:var(--text-primary);background:var(--surface-sunken);}}.shell__topbar-end {display:flex;align-items:center;gap:var(--sp-2);margin-inline-start:auto;flex:none;}.shell__topbar .shell__title {margin:0;font-size:var(--fs-md);font-weight:500;color:var(--text-primary);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.shell__main {grid-area:main;padding:var(--shell-pad);background:var(--paper);border-inline-start:1px solid var(--border-decor);min-width:0;}.shell__content {max-width:var(--measure-page);margin-inline:auto;}.shell__scroll {overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;}@media (max-width:47.99rem) {.shell {grid-template-columns:minmax(0, 1fr);grid-template-rows:auto minmax(0, 1fr);grid-template-areas:"topbar" "main";--shell-pad:var(--sp-3);}.shell__side {display:none;}.shell__menu {display:inline-flex;}}.shell__side.shell__side--drawer {display:flex;max-height:none;overflow-y:visible;position:static;}.shell--rail {--shell-side-w:4.5rem;}.shell--rail .shell__side {padding-inline:var(--sp-1);align-items:center;}.shell--rail .shell__link {position:relative;justify-content:center;padding-inline:0;width:var(--sz-touch);}.shell--rail .shell__link-label {position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}.shell--rail .shell__brand {justify-content:center;padding-inline:0;gap:0;}.shell--rail .shell__brand-text {position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}.shell--rail .shell__side-label {display:none;}.shell--rail .shell__side-group {align-items:center;width:100%;}.shell--flat {background:var(--paper);}.shell--flat .shell__main {border-inline-start-color:transparent;}.shell--scroll-main {height:100vh;height:100dvh;min-height:0;overflow:hidden;}.shell--scroll-main .shell__side {position:static;max-height:none;height:100%;}.shell--scroll-main .shell__topbar {position:static;}.shell--scroll-main .shell__main {overflow-y:auto;overscroll-behavior:contain;}