agentcss 0.0.0-stage → 0.11.2

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

@@ -0,0 +1,398 @@
+(function (global) {
+'use strict';
+
+var FOCUSABLE = [
+'a[href]',
+'button:not([disabled])',
+'input:not([disabled]):not([type="hidden"])',
+'select:not([disabled])',
+'textarea:not([disabled])',
+'[tabindex]:not([tabindex="-1"])'
+].join(',');
+
+var lockCount = 0;
+
+var scrollLock = { changed: false, saved: '', varSet: false };
+
+var inertRefs = [];
+
+var ariaRefs = [];
+
+function focusableIn(root) {
+var all = Array.prototype.slice.call(root.querySelectorAll(FOCUSABLE));
+
+return all.filter(function (el) {
+return el.offsetParent !== null || el === document.activeElement;
+});
+}
+
+function lockScroll() {
+if (lockCount++ > 0) return;
+
+var sbw = window.innerWidth - document.documentElement.clientWidth;
+if (sbw > 0) {
+var cur = parseFloat(getComputedStyle(document.body).paddingRight) || 0;
+scrollLock.saved = document.body.style.paddingRight;
+document.body.style.paddingRight = (cur + sbw) + 'px';
+scrollLock.changed = true;
+document.documentElement.style.setProperty(
+'--overlay-scrollbar-width', sbw + 'px');
+scrollLock.varSet = true;
+}
+document.body.setAttribute('data-scroll-locked', 'true');
+}
+
+function unlockScroll() {
+if (--lockCount > 0) return;
+document.body.removeAttribute('data-scroll-locked');
+if (scrollLock.varSet) {
+document.documentElement.style.removeProperty('--overlay-scrollbar-width');
+scrollLock.varSet = false;
+}
+
+if (scrollLock.changed) {
+document.body.style.paddingRight = scrollLock.saved;
+scrollLock.changed = false;
+scrollLock.saved = '';
+}
+}
+
+function inertAcquire(node) {
+for (var i = 0; i < inertRefs.length; i++) {
+if (inertRefs[i].node === node) { inertRefs[i].count++; return; }
+}
+inertRefs.push({ node: node, count: 1 });
+node.inert = true;
+}
+
+function inertRelease(node) {
+for (var i = 0; i < inertRefs.length; i++) {
+if (inertRefs[i].node !== node) continue;
+inertRefs[i].count--;
+if (inertRefs[i].count <= 0) {
+node.inert = false;
+inertRefs.splice(i, 1);
+}
+return;
+}
+}
+
+function ariaAcquire(node) {
+for (var i = 0; i < ariaRefs.length; i++) {
+if (ariaRefs[i].node === node) { ariaRefs[i].count++; return; }
+}
+
+ariaRefs.push({ node: node, count: 1, prev: node.getAttribute('aria-hidden') });
+node.setAttribute('aria-hidden', 'true');
+}
+
+function ariaRelease(node) {
+for (var i = 0; i < ariaRefs.length; i++) {
+if (ariaRefs[i].node !== node) continue;
+ariaRefs[i].count--;
+if (ariaRefs[i].count <= 0) {
+var prev = ariaRefs[i].prev;
+if (prev === null) node.removeAttribute('aria-hidden');
+else node.setAttribute('aria-hidden', prev);
+ariaRefs.splice(i, 1);
+}
+return;
+}
+}
+
+var openStack = [];
+
+function installIsolation(entry) {
+var box = entry.box;
+var backdrop = entry.backdrop;
+var lastInside = null;
+
+function topmost() { return openStack[openStack.length - 1]; }
+
+function pullBack() {
+if (lastInside && document.contains(lastInside) && box.contains(lastInside)) {
+lastInside.focus();
+return;
+}
+var f = focusableIn(box);
+if (f.length) { f[0].focus(); return; }
+box.focus();
+}
+
+function onFocusIn(e) {
+if (topmost() !== entry) return;
+var t = e.target;
+if (box.contains(t) || backdrop.contains(t)) { lastInside = t; return; }
+pullBack();
+}
+
+function onPointer(e) {
+if (topmost() !== entry) return;
+if (backdrop.contains(e.target)) return;
+if (e.cancelable) e.preventDefault();
+e.stopPropagation();
+}
+
+document.addEventListener('focusin', onFocusIn, true);
+document.addEventListener('pointerdown', onPointer, true);
+document.addEventListener('mousedown', onPointer, true);
+document.addEventListener('touchstart', onPointer, true);
+
+document.addEventListener('click', onPointer, true);
+
+return function uninstall() {
+document.removeEventListener('focusin', onFocusIn, true);
+document.removeEventListener('pointerdown', onPointer, true);
+document.removeEventListener('mousedown', onPointer, true);
+document.removeEventListener('touchstart', onPointer, true);
+document.removeEventListener('click', onPointer, true);
+};
+}
+
+function toast(opts) {
+opts = opts || {};
+
+var region = document.querySelector('.toast-region');
+if (!region) {
+region = document.createElement('div');
+region.className = 'toast-region';
+
+region.setAttribute('role', 'status');
+region.setAttribute('aria-live', 'polite');
+document.body.appendChild(region);
+}
+
+var el = document.createElement('div');
+el.className = 'toast' + (opts.variant ? ' toast--' + opts.variant : '');
+
+var body = document.createElement('div');
+body.className = 'toast__body';
+if (opts.title) {
+var t = document.createElement('p');
+t.className = 'toast__title';
+t.textContent = opts.title;
+body.appendChild(t);
+}
+if (opts.desc) {
+var d = document.createElement('p');
+d.className = 'toast__desc';
+d.textContent = opts.desc;
+body.appendChild(d);
+}
+el.appendChild(body);
+
+var auto = opts.duration;
+if (auto === undefined) {
+auto = (opts.variant === 'error') ? 0 : 4000;
+}
+
+if (auto > 0) {
+var timer = document.createElement('div');
+timer.className = 'toast__timer';
+timer.style.animationDuration = auto + 'ms';
+el.appendChild(timer);
+}
+
+var closeBtn = document.createElement('button');
+closeBtn.className = 'toast__close';
+closeBtn.type = 'button';
+closeBtn.setAttribute('aria-label', '关闭提示');
+closeBtn.textContent = '×';
+el.appendChild(closeBtn);
+
+var closed = false;
+function close() {
+if (closed) return;
+closed = true;
+if (auto) clearTimeout(timerId);
+el.setAttribute('data-state', 'leaving');
+
+setTimeout(function () {
+if (el.parentNode) el.parentNode.removeChild(el);
+}, 220);
+}
+
+closeBtn.addEventListener('click', close);
+region.appendChild(el);
+
+var timerId = auto > 0 ? setTimeout(close, auto) : null;
+return { el: el, close: close };
+}
+
+var flFocusReturn = function (opts) {
+var opt = opts || {};
+var saved = null;
+
+return {
+save: function () {
+var a = document.activeElement;
+saved = (a && a !== document.body && a.focus) ? a : null;
+return saved;
+},
+
+restore: function () {
+var target = saved;
+
+if (!target || !document.contains(target)) target = opt.fallback || null;
+if (!target) { saved = null; return false; }
+try {
+target.focus();
+} catch (e) {
+saved = null;
+return false;
+}
+var ok = document.activeElement === target;
+saved = null;
+return ok;
+},
+
+target: function () { return saved; },
+clear: function () { saved = null; },
+};
+};
+
+function dialog(opts) {
+opts = opts || {};
+
+var fr = flFocusReturn();
+fr.save();
+
+var backdrop = document.createElement('div');
+backdrop.className = 'dialog-backdrop';
+
+var box = document.createElement('div');
+box.className = 'dialog' + (opts.danger ? ' dialog--danger' : '');
+box.setAttribute('role', 'dialog');
+box.setAttribute('aria-modal', 'true');
+
+box.setAttribute('tabindex', '-1');
+
+if (opts.title) {
+var h = document.createElement('h2');
+h.className = 'dialog__title';
+h.id = 'dlg-title-' + Date.now();
+h.textContent = opts.title;
+box.appendChild(h);
+box.setAttribute('aria-labelledby', h.id);
+}
+if (opts.desc) {
+var p = document.createElement('p');
+p.className = 'dialog__desc';
+p.id = 'dlg-desc-' + Date.now();
+p.textContent = opts.desc;
+box.appendChild(p);
+box.setAttribute('aria-describedby', p.id);
+}
+
+var act = document.createElement('div');
+act.className = 'dialog__actions';
+(opts.actions || []).forEach(function (a) {
+var b = document.createElement('button');
+b.type = 'button';
+b.className = 'btn ' + (a.variant === 'danger' ? 'btn--danger'
+: a.variant === 'primary' ? 'btn--primary' : 'btn--secondary');
+b.textContent = a.label;
+b.addEventListener('click', function () {
+if (a.onClick) a.onClick(close);
+if (a.keepOpen !== true) close();
+});
+act.appendChild(b);
+});
+box.appendChild(act);
+
+backdrop.appendChild(box);
+document.body.appendChild(backdrop);
+lockScroll();
+
+var useInert = 'inert' in HTMLElement.prototype;
+var stackEntry = { backdrop: backdrop, box: box };
+var uninstallIsolation = null;
+openStack.push(stackEntry);
+if (!useInert) uninstallIsolation = installIsolation(stackEntry);
+
+function focusables() { return focusableIn(box); }
+
+box.addEventListener('keydown', function (e) {
+if (e.key === 'Escape') {
+e.preventDefault();
+
+e.stopPropagation();
+close();
+return;
+}
+if (e.key !== 'Tab') return;
+
+var f = focusables();
+if (!f.length) { e.preventDefault(); box.focus(); return; }
+var first = f[0], last = f[f.length - 1];
+
+if (e.shiftKey && (document.activeElement === first || document.activeElement === box)) {
+e.preventDefault(); last.focus();
+} else if (!e.shiftKey && document.activeElement === last) {
+e.preventDefault(); first.focus();
+}
+});
+
+if (opts.initialFocus === 'cancel') {
+var cancel = box.querySelector('.btn:not(.btn--danger)');
+if (cancel) cancel.focus();
+else box.focus();
+} else {
+box.focus();
+}
+
+if (opts.closeOnBackdrop !== false && !opts.danger) {
+backdrop.addEventListener('mousedown', function (e) {
+if (e.target === backdrop) close();
+});
+}
+
+var closed = false;
+var inerted = [];
+var ariaed = [];
+
+var nodes = Array.prototype.slice.call(
+document.body.querySelectorAll('body > *')
+);
+nodes.forEach(function (n) {
+
+if (n.classList.contains('dialog-backdrop')) return;
+if (useInert) {
+inerted.push(n);
+inertAcquire(n);
+} else {
+ariaed.push(n);
+ariaAcquire(n);
+}
+});
+
+function close() {
+if (closed) return;
+closed = true;
+
+var ae = document.activeElement;
+var focusIsMine = !ae || ae === document.body ||
+box.contains(ae) || backdrop.contains(ae);
+
+if (backdrop.parentNode) backdrop.parentNode.removeChild(backdrop);
+
+for (var si = openStack.length - 1; si >= 0; si--) {
+if (openStack[si] === stackEntry) { openStack.splice(si, 1); break; }
+}
+if (uninstallIsolation) { uninstallIsolation(); uninstallIsolation = null; }
+
+inerted.forEach(inertRelease);
+
+ariaed.forEach(ariaRelease);
+unlockScroll();
+
+fr.restore();
+
+}
+
+return { el: box, close: close };
+}
+
+global.Overlay = { toast: toast, dialog: dialog };
+
+})(window);

package/dist/03-patterns/pagination/pagination.css

@@ -0,0 +1 @@
+.pagination {display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;}.pagination__list {display:flex;align-items:center;gap:2px;flex-wrap:wrap;list-style:none;margin:0;padding:0;}.pagination__item {margin:0;}.pagination__link {display:inline-flex;align-items:center;justify-content:center;min-width:var(--sz-touch);min-height:var(--sz-touch);padding:0 var(--sp-2);font-size:var(--fs-sm);font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--text-primary);text-decoration:none;background:var(--surface);border:1px solid var(--border-decor);border-radius:var(--r-sm);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);}.pagination__link:hover:not([aria-disabled="true"]):not([disabled]) {background:var(--surface-sunken);}.pagination__link:focus-visible {outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset);}.pagination__link[aria-disabled="true"], .pagination__link:disabled {color:var(--text-tertiary);background:var(--surface-sunken);border-color:transparent;cursor:not-allowed;}.pagination__link[aria-current="page"]:not([disabled]) {color:var(--text-on-accent);background:var(--accent);border-color:var(--accent);font-weight:600;box-shadow:var(--lift-sm);cursor:default;opacity:1;z-index:var(--z-raised);}.pagination__ellipsis {display:inline-flex;align-items:center;justify-content:center;min-width:var(--sz-touch);min-height:var(--sz-touch);color:var(--text-tertiary);font-size:var(--fs-sm);user-select:none;}.pagination__status {margin-inline-start:auto;font-size:var(--fs-xs);color:var(--text-secondary);font-variant-numeric:tabular-nums;}.pagination__status:empty {display:none;}.pagination__sr {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;}.pagination__live {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;}@media (max-width:480px) {.pagination__status {margin-inline-start:0;width:100%;}}@media (prefers-reduced-motion:reduce) {.pagination__link {transition:none;}}@media (hover:hover) and (pointer:fine) {.pagination__link:hover:not([aria-disabled="true"]):not([disabled]) {background:var(--surface-sunken);}}

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

@@ -0,0 +1,273 @@
+(function () {
+'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 SLOTS = 7;
+
+function el(tag, cls, text) {
+var n = document.createElement(tag);
+if (cls) n.className = cls;
+if (text !== undefined && text !== null) n.textContent = text;
+return n;
+}
+
+function pageWindow(cur, total, slots) {
+slots = slots || SLOTS;
+if (total <= slots - 2) {
+var all = [];
+for (var i = 1; i <= total; i++) all.push(i);
+return all;
+}
+
+var MAX_MID = slots - 4;
+if (MAX_MID < 1) MAX_MID = 1;
+
+var mid = [];
+var start = cur - Math.floor(MAX_MID / 2);
+if (start < 2) start = 2;
+if (start + MAX_MID - 1 > total - 1) start = total - MAX_MID;
+if (start < 2) start = 2;
+for (var j = start; j < start + MAX_MID; j++) {
+if (j > 1 && j < total) mid.push(j);
+}
+
+var out = [1];
+
+if (mid.length && mid[0] > 2) out.push('…');
+for (var k = 0; k < mid.length; k++) out.push(mid[k]);
+if (mid.length && mid[mid.length - 1] < total - 1) out.push('…');
+if (total > 1) out.push(total);
+return out;
+}
+
+function Pagination(node) {
+this.node = node;
+this.total = Math.max(1, parseInt(node.getAttribute('data-total') || '1', 10));
+this.size = Math.max(1, parseInt(node.getAttribute('data-page-size') || '20', 10));
+this.page = Math.max(1, parseInt(node.getAttribute('data-page') || '1', 10));
+this.label = node.getAttribute('aria-label') || '分页';
+this.pages = Math.max(1, Math.ceil(this.total / this.size));
+this.onChange = null;
+
+try {
+var u = node.getAttribute('data-pg-param') || 'page';
+var q = parseInt(new URL(location.href).searchParams.get(u) || '0', 10);
+if (q > 0) this.page = Math.min(q, this.pages);
+} catch (e) {  }
+
+this.listNode = node.querySelector('[data-pg-list]');
+this.statusNode = node.querySelector('[data-pg-status]');
+this.liveNode = node.querySelector('[data-pg-live]');
+
+var self = this;
+node.addEventListener('click', function (e) {
+var t = e.target;
+while (t && t !== node && t.tagName !== 'BUTTON' && t.tagName !== 'A') {
+t = t.parentNode;
+}
+if (!t || t === node) return;
+if (t.disabled || t.getAttribute('aria-disabled') === 'true') return;
+var to = t.getAttribute('data-goto');
+if (to === 'prev') { self.go(self.page - 1); }
+else if (to === 'next') { self.go(self.page + 1); }
+else if (to === 'first') { self.go(1); }
+else if (to === 'last') { self.go(self.pages); }
+else if (to) { self.go(parseInt(to, 10)); }
+});
+
+this._onKey = function (e) {
+if (e.metaKey || e.ctrlKey || e.altKey) return;
+var act = document.activeElement;
+var inside = act && (act === self.node || self.node.contains(act));
+
+if (act && /^(INPUT|TEXTAREA|SELECT)$/.test(act.tagName)) return;
+if (act && act.isContentEditable) return;
+
+if (!inside && act && act !== document.body) return;
+
+var k = e.key;
+if (k === 'ArrowLeft') { self.go(self.page - 1); }
+else if (k === 'ArrowRight') { self.go(self.page + 1); }
+else if (k === 'Home') { self.go(1); }
+else if (k === 'End') { self.go(self.pages); }
+else return;
+e.preventDefault();
+
+self.focusCurrent();
+};
+document.addEventListener('keydown', this._onKey);
+
+this.render();
+}
+
+Pagination.prototype.pages = 1;
+
+Pagination.prototype.destroy = function () {
+if (this._destroyed) return;
+this._destroyed = true;
+document.removeEventListener('keydown', this._onKey);
+
+if (this.node && document.activeElement &&
+this.node.contains &&
+this.node.contains(document.activeElement)) {
+document.activeElement.blur();
+}
+};
+
+Pagination.prototype.go = function (n, opts) {
+opts = opts || {};
+n = Math.max(1, Math.min(this.pages, n));
+if (n === this.page && !opts.force) { this.focusCurrent(); return; }
+this.page = n;
+this.render();
+this.announce();
+
+if (opts.scroll !== false) this.scrollToTop();
+this.syncURL();
+flEmit(this.node, 'fl-change', { value: n, page: n });
+if (typeof this.onChange === 'function') this.onChange(n);
+};
+
+Pagination.prototype.scrollToTop = function () {
+var target = this.node.getAttribute('data-pg-scroll-target')
+|| this.node.getAttribute('aria-controls');
+var el = target ? document.getElementById(target) : null;
+if (!el || !el.scrollIntoView) {
+
+if (this.node.scrollIntoView) {
+try { this.node.scrollIntoView({ block: 'nearest' }); } catch (e) {}
+}
+return;
+}
+try {
+el.scrollIntoView({ block: 'start' });
+} catch (e) {
+el.scrollIntoView(true);
+}
+};
+
+Pagination.prototype.syncURL = function () {
+if (typeof history === 'undefined' || !history.replaceState) return;
+if (this.node.getAttribute('data-pg-nourl') === 'true') return;
+try {
+var u = this.node.getAttribute('data-pg-param') || 'page';
+var url = new URL(location.href);
+if (this.page <= 1) url.searchParams.delete(u);
+else url.searchParams.set(u, String(this.page));
+history.replaceState(null, '', url.toString());
+} catch (e) {  }
+};
+
+Pagination.prototype.focusCurrent = function () {
+var cur = this.listNode.querySelector('[aria-current="page"]');
+if (cur && cur.focus) cur.focus();
+};
+
+Pagination.prototype.announce = function () {
+if (!this.liveNode) return;
+this.liveNode.textContent = '第 ' + this.page + ' 页，共 ' + this.pages + ' 页';
+};
+
+Pagination.prototype.render = function () {
+if (!this.listNode) return;
+var L = this.listNode;
+while (L.firstChild) L.removeChild(L.firstChild);
+var self = this;
+
+function addBtn(text, ariaLabel, goto, disabled) {
+var li = el('li', 'pagination__item');
+var b = el('button', 'pagination__link', text);
+b.type = 'button';
+b.setAttribute('data-goto', goto);
+
+if (disabled) { b.disabled = true; b.setAttribute('aria-disabled', 'true'); }
+if (ariaLabel) b.setAttribute('aria-label', ariaLabel);
+li.appendChild(b);
+L.appendChild(li);
+return b;
+}
+
+addBtn('‹', '上一页', 'prev', self.page <= 1);
+
+var win = pageWindow(self.page, self.pages, SLOTS);
+for (var i = 0; i < win.length; i++) {
+var p = win[i];
+if (p === '…') {
+var li = el('li', 'pagination__item');
+li.appendChild(el('span', 'pagination__ellipsis', '…'));
+
+li.firstChild.setAttribute('aria-hidden', 'true');
+L.appendChild(li);
+continue;
+}
+
+var isCur = (p === self.page);
+var li2 = el('li', 'pagination__item');
+var b2 = el('button', 'pagination__link', String(p));
+b2.type = 'button';
+b2.setAttribute('data-goto', String(p));
+b2.setAttribute('aria-label', '第 ' + p + ' 页' + (isCur ? '（当前页）' : ''));
+if (isCur) {
+b2.setAttribute('aria-current', 'page');
+b2.setAttribute('aria-disabled', 'true');
+}
+li2.appendChild(b2);
+L.appendChild(li2);
+}
+
+addBtn('›', '下一页', 'next', self.page >= self.pages);
+
+if (this.statusNode) {
+this.statusNode.textContent =
+'第 '+ self.page + ' 页 / 共 ' + self.pages + ' 页';
+}
+};
+
+var API = {
+
+create: function (node) {
+if (!node) return null;
+if (node.__pg) return node.__pg;
+node.__pg = new Pagination(node);
+return node.__pg;
+},
+
+update: function (root) {
+var list = (root || document).querySelectorAll('[data-pagination]');
+for (var i = 0; i < list.length; i++) API.create(list[i]);
+},
+
+pagesOf: function (total, pageSize) {
+return Math.max(1, Math.ceil((total || 1) / (pageSize || 20)));
+},
+};
+
+if (typeof window !== 'undefined') window.Pagination = API;
+
+if (document.readyState === 'loading') {
+document.addEventListener('DOMContentLoaded', function () { API.update(); });
+} else {
+API.update();
+}
+})();

package/dist/03-patterns/reveal/reveal.css

@@ -0,0 +1 @@
+[data-reveal], .reveal {--reveal-x:0px;--reveal-y:0px;--reveal-scale:1;--reveal-delay:0ms;transform:translate(var(--reveal-x), var(--reveal-y)) scale(var(--reveal-scale));transition-property:transform, opacity;transition-duration:var(--dur-base);transition-timing-function:var(--ease-out);transition-delay:var(--reveal-delay);}[data-reveal="up"] {--reveal-y:8px;}[data-reveal="down"] {--reveal-y:-8px;}[data-reveal="left"] {--reveal-x:8px;}[data-reveal="right"] {--reveal-x:-8px;}[data-reveal="scale"] {--reveal-scale:.97;}[data-reveal="none"] {--reveal-x:0px;--reveal-y:0px;--reveal-scale:1;}[data-reveal-ready] [data-reveal]:not([data-reveal-done]) {opacity:0;}[data-reveal-ready] [data-reveal][data-reveal-done] {opacity:1;--reveal-x:0px;--reveal-y:0px;--reveal-scale:1;}[data-reveal-children] > * {transition-delay:var(--reveal-delay, 0ms);}@media (prefers-reduced-motion:reduce) {[data-reveal] {transform:none;transition-property:opacity;transition-duration:var(--dur-fast);}[data-reveal-ready] [data-reveal]:not([data-reveal-done]) {opacity:1;}}