anentrypoint-design 0.0.29 → 0.0.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.29",
+  "version": "0.0.31",
   "description": "247420 design system SDK — webjsx + modified ripple-ui, single-file ESM bundle for reproducible use of the AnEntrypoint design.",
   "type": "module",
   "main": "./dist/247420.js",

package/src/components/files-modals.js

@@ -0,0 +1,105 @@
+import * as webjsx from '../../vendor/webjsx/index.js';
+import { Btn } from './shell.js';
+import { fileGlyph, fmtFileSize } from './files.js';
+const h = webjsx.createElement;
+
+function Backdrop({ onClose, children, kind = '' } = {}) {
+    return h('div', {
+        class: 'ds-modal-backdrop',
+        onclick: (e) => { if (e.target === e.currentTarget && onClose) onClose(); }
+    },
+        h('div', { class: 'ds-modal' + (kind ? ' ds-modal-' + kind : '') }, ...(Array.isArray(children) ? children : [children]))
+    );
+}
+
+export function ConfirmDialog({ title = 'confirm', message, confirmLabel = 'confirm', cancelLabel = 'cancel', destructive, onConfirm, onCancel } = {}) {
+    return Backdrop({
+        onClose: onCancel,
+        kind: 'small',
+        children: [
+            h('div', { class: 'ds-modal-head' }, title),
+            h('div', { class: 'ds-modal-body' }, message || ''),
+            h('div', { class: 'ds-modal-actions' },
+                Btn({ onClick: onCancel, children: cancelLabel }),
+                h('button', {
+                    class: destructive ? 'btn-stamp flame' : 'btn-stamp green',
+                    onclick: onConfirm
+                }, confirmLabel)
+            )
+        ]
+    });
+}
+
+export function PromptDialog({ title = 'name', value = '', placeholder = '', confirmLabel = 'ok', cancelLabel = 'cancel', onConfirm, onCancel, onInput } = {}) {
+    return Backdrop({
+        onClose: onCancel,
+        kind: 'small',
+        children: [
+            h('div', { class: 'ds-modal-head' }, title),
+            h('div', { class: 'ds-modal-body' },
+                h('input', {
+                    class: 'input ds-modal-input',
+                    type: 'text',
+                    value,
+                    placeholder,
+                    autofocus: true,
+                    oninput: (e) => onInput && onInput(e.target.value),
+                    onkeydown: (e) => {
+                        if (e.key === 'Enter') { e.preventDefault(); onConfirm && onConfirm(e.target.value); }
+                        if (e.key === 'Escape') { e.preventDefault(); onCancel && onCancel(); }
+                    }
+                })
+            ),
+            h('div', { class: 'ds-modal-actions' },
+                Btn({ onClick: onCancel, children: cancelLabel }),
+                h('button', { class: 'btn-stamp green', onclick: () => onConfirm && onConfirm(value) }, confirmLabel)
+            )
+        ]
+    });
+}
+
+export function FilePreviewMedia({ src, type = 'other', name } = {}) {
+    if (type === 'image') return h('img', { class: 'ds-preview-media', src, alt: name || '' });
+    if (type === 'video') return h('video', { class: 'ds-preview-media', src, controls: true });
+    if (type === 'audio') return h('audio', { class: 'ds-preview-audio', src, controls: true });
+    return h('div', { class: 'ds-preview-fallback' },
+        h('span', { class: 'ds-preview-glyph' }, fileGlyph(type)),
+        h('span', {}, 'no inline preview for ' + (type || 'this file'))
+    );
+}
+
+export function FilePreviewCode({ content = '', lang } = {}) {
+    return h('pre', { class: 'ds-preview-code' + (lang ? ' lang-' + lang : '') },
+        h('code', { class: lang ? 'language-' + lang : '' }, content)
+    );
+}
+
+export function FilePreviewText({ content = '', truncated } = {}) {
+    return h('pre', { class: 'ds-preview-text' },
+        h('code', {}, content),
+        truncated ? h('div', { class: 'ds-preview-truncated' }, '… (truncated)') : null
+    );
+}
+
+export function FileViewer({ file, body, onClose, onAction } = {}) {
+    if (!file) return null;
+    const meta = [file.type, file.size != null ? fmtFileSize(file.size) : null, file.modified || null]
+        .filter(Boolean).join(' · ');
+    return Backdrop({
+        onClose,
+        kind: 'preview',
+        children: [
+            h('div', { class: 'ds-modal-head ds-preview-head', 'data-file-type': file.type || 'other' },
+                h('span', { class: 'ds-preview-name' }, file.name || ''),
+                h('span', { class: 'ds-preview-meta' }, meta),
+                h('span', { class: 'ds-preview-actions' },
+                    onAction ? h('button', { class: 'ds-file-act', title: 'download', onclick: () => onAction('download') }, '↓') : null,
+                    h('button', { class: 'ds-file-act', title: 'close', onclick: onClose }, '✕')
+                )
+            ),
+            h('div', { class: 'ds-preview-body', 'data-file-type': file.type || 'other' },
+                ...(Array.isArray(body) ? body : [body])
+            )
+        ]
+    });
+}

package/src/components/files.js

@@ -0,0 +1,126 @@
+import * as webjsx from '../../vendor/webjsx/index.js';
+import { Btn, Glyph } from './shell.js';
+const h = webjsx.createElement;
+
+const FILE_TYPES = ['dir', 'image', 'video', 'audio', 'code', 'text', 'archive', 'document', 'symlink', 'other'];
+const TYPE_GLYPH = {
+    dir: '▣', image: '◰', video: '▰', audio: '◎', code: '⌘',
+    text: '§', archive: '◐', document: '▢', symlink: '↗', other: '◌'
+};
+
+export function fileGlyph(type) {
+    return TYPE_GLYPH[type] || TYPE_GLYPH.other;
+}
+
+export function fmtFileSize(bytes) {
+    if (bytes == null || bytes === 0) return '—';
+    const u = ['B', 'KB', 'MB', 'GB', 'TB'];
+    let i = 0, n = bytes;
+    while (n >= 1024 && i < u.length - 1) { n /= 1024; i++; }
+    return n.toFixed(i === 0 ? 0 : 1) + ' ' + u[i];
+}
+
+export function FileIcon({ type = 'other' } = {}) {
+    return h('span', { class: 'ds-file-icon', 'data-file-type': type }, fileGlyph(type));
+}
+
+export function FileRow({ name, type = 'other', size, modified, code, onOpen, onAction, active, key } = {}) {
+    const meta = [type === 'dir' ? null : fmtFileSize(size), modified || null].filter(Boolean).join(' · ');
+    return h('div', {
+        key,
+        class: 'ds-file-row row' + (active ? ' active' : ''),
+        'data-file-type': type,
+        onclick: onOpen
+    },
+        code != null ? h('span', { class: 'code' }, code) : null,
+        FileIcon({ type }),
+        h('span', { class: 'title' }, name),
+        h('span', { class: 'ds-file-meta meta' }, meta || '—'),
+        onAction ? h('span', { class: 'ds-file-actions', onclick: (e) => e.stopPropagation() },
+            h('button', { class: 'ds-file-act', title: 'download', onclick: () => onAction('download') }, '↓'),
+            h('button', { class: 'ds-file-act', title: 'rename', onclick: () => onAction('rename') }, '✎'),
+            h('button', { class: 'ds-file-act ds-file-act-warn', title: 'delete', onclick: () => onAction('delete') }, '✕')
+        ) : null
+    );
+}
+
+export function FileGrid({ files = [], onOpen, onAction, emptyText = 'no files here yet' } = {}) {
+    if (!files.length) return EmptyState({ text: emptyText });
+    return h('div', { class: 'ds-file-grid' },
+        ...files.map((f, i) => FileRow({
+            key: f.path || f.name + i,
+            name: f.name,
+            type: f.type,
+            size: f.size,
+            modified: f.modified,
+            code: f.code,
+            active: f.active,
+            onOpen: onOpen ? () => onOpen(f) : null,
+            onAction: onAction ? (act) => onAction(act, f) : null
+        }))
+    );
+}
+
+export function FileToolbar({ left = [], right = [] } = {}) {
+    return h('div', { class: 'ds-file-toolbar' },
+        h('div', { class: 'ds-file-toolbar-left' }, ...left),
+        h('div', { class: 'ds-file-toolbar-right' }, ...right)
+    );
+}
+
+export function DropZone({ children, dragover, onDrop, onDragOver, onDragLeave, label = 'drop files here', onPick } = {}) {
+    return h('div', {
+        class: 'ds-dropzone' + (dragover ? ' dragover' : ''),
+        ondragover: (e) => { e.preventDefault(); onDragOver && onDragOver(e); },
+        ondragleave: (e) => { onDragLeave && onDragLeave(e); },
+        ondrop: (e) => { e.preventDefault(); onDrop && onDrop(e.dataTransfer.files); }
+    },
+        h('div', { class: 'ds-dropzone-inner' },
+            h('span', { class: 'ds-dropzone-glyph' }, '⇪'),
+            h('span', { class: 'ds-dropzone-label' }, label),
+            onPick ? Btn({ onClick: onPick, children: 'pick files' }) : null
+        ),
+        ...(Array.isArray(children) ? children : children ? [children] : [])
+    );
+}
+
+export function UploadProgress({ items = [] } = {}) {
+    if (!items.length) return null;
+    return h('div', { class: 'ds-upload-progress' },
+        ...items.map((it, i) => h('div', {
+            key: it.name + i,
+            class: 'ds-upload-item' + (it.done ? ' done' : '') + (it.error ? ' error' : '')
+        },
+            h('span', { class: 'ds-upload-name' }, it.name),
+            h('span', { class: 'ds-upload-bar' },
+                h('span', {
+                    class: 'ds-upload-fill',
+                    'data-pct': String(Math.max(0, Math.min(100, it.pct || 0)))
+                })
+            ),
+            h('span', { class: 'ds-upload-pct' }, (it.error ? 'err' : (it.done ? 'ok' : (it.pct || 0) + '%')))
+        ))
+    );
+}
+
+export function EmptyState({ text = 'nothing here', glyph = '◌' } = {}) {
+    return h('div', { class: 'ds-file-empty' },
+        h('span', { class: 'ds-file-empty-glyph' }, glyph),
+        h('span', { class: 'ds-file-empty-text' }, text)
+    );
+}
+
+export function BreadcrumbPath({ segments = [], onNav, root = 'root' } = {}) {
+    const parts = [
+        h('button', { key: 'root', class: 'ds-crumb-seg', onclick: () => onNav && onNav(0) }, root)
+    ];
+    segments.forEach((seg, i) => {
+        parts.push(h('span', { key: 'sep' + i, class: 'ds-crumb-sep' }, '›'));
+        parts.push(h('button', {
+            key: 'seg' + i,
+            class: 'ds-crumb-seg' + (i === segments.length - 1 ? ' leaf' : ''),
+            onclick: () => onNav && onNav(i + 1)
+        }, seg));
+    });
+    return h('div', { class: 'ds-crumb-path' }, ...parts);
+}

package/src/components.js

@@ -19,3 +19,14 @@ export {
     ChatMessage, ChatComposer, Chat,
     AICAT_FACE, AICatPortrait, AICat
 } from './components/chat.js';
+
+export {
+    fileGlyph, fmtFileSize,
+    FileIcon, FileRow, FileGrid, FileToolbar,
+    DropZone, UploadProgress, EmptyState, BreadcrumbPath
+} from './components/files.js';
+
+export {
+    ConfirmDialog, PromptDialog,
+    FilePreviewMedia, FilePreviewCode, FilePreviewText, FileViewer
+} from './components/files-modals.js';

package/src/highlight.js

@@ -1,60 +1,18 @@
 import { register } from './debug.js';
 
-const PRISM_BASE = 'https://cdn.jsdelivr.net/npm/prismjs@1.30.0';
-const LANGS = ['markup', 'css', 'clike', 'javascript', 'jsx', 'tsx', 'typescript', 'json', 'bash', 'python'];
-let _prism = null;
-let _stats = { highlights: 0, errors: 0 };
+let _stats = { highlights: 0 };
 
-function injectScript(src) {
-    return new Promise((resolve, reject) => {
-        const s = document.createElement('script');
-        s.src = src; s.async = false;
-        s.onload = () => resolve();
-        s.onerror = () => reject(new Error('script failed: ' + src));
-        document.head.appendChild(s);
-    });
-}
-
-let _loadPromise = null;
 export function ensurePrism() {
-    if (_prism) return Promise.resolve(_prism);
-    if (_loadPromise) return _loadPromise;
-    _loadPromise = (async () => {
-        if (!window.Prism) {
-            window.Prism = window.Prism || { manual: true, disableWorkerMessageHandler: true };
-            await injectScript(PRISM_BASE + '/prism.min.js');
-        }
-        for (const lang of LANGS) {
-            const has = window.Prism && window.Prism.languages && window.Prism.languages[lang];
-            if (has) continue;
-            try { await injectScript(`${PRISM_BASE}/components/prism-${lang}.min.js`); }
-            catch { _stats.errors += 1; }
-        }
-        _prism = window.Prism;
-        return _prism;
-    })();
-    return _loadPromise;
+    return Promise.resolve(null);
 }
 
 export async function highlightElement(el) {
-    const prism = await ensurePrism();
-    if (!el) return;
-    prism.highlightElement(el);
     _stats.highlights += 1;
 }
 
 export async function highlightAllUnder(root) {
-    const prism = await ensurePrism();
     const els = (root || document).querySelectorAll('pre code[class*="lang-"], pre code[class*="language-"]');
-    els.forEach((el) => {
-        const cls = el.className;
-        if (/lang-(\w+)/.test(cls) && !/language-/.test(cls)) {
-            const m = cls.match(/lang-(\w+)/);
-            if (m) el.classList.add('language-' + m[1]);
-        }
-        prism.highlightElement(el);
-        _stats.highlights += 1;
-    });
+    _stats.highlights += els.length;
 }
 
-register('highlight', () => ({ loaded: !!_prism, langs: _prism ? Object.keys(_prism.languages || {}) : [], ...(_stats) }));
+register('highlight', () => ({ loaded: false, ...(_stats) }));

package/src/motion.js

@@ -1,122 +1,22 @@
-const ANIMATE_CSS_ID = 'animate-style-cdn';
-const ANIMATE_CSS_HREF = 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css';
-const MOTION_STYLE_ID = 'ds-247420-motion';
-
 function hasDom() {
     return typeof document !== 'undefined';
 }
 
 export function shouldReduceMotion() {
-    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return false;
-    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    return true;
 }
 
 export function installMotion() {
-    if (!hasDom()) return;
-
-    if (!document.getElementById(ANIMATE_CSS_ID)) {
-        const link = document.createElement('link');
-        link.id = ANIMATE_CSS_ID;
-        link.rel = 'stylesheet';
-        link.href = ANIMATE_CSS_HREF;
-        document.head.appendChild(link);
-    }
-
-    if (!document.getElementById(MOTION_STYLE_ID)) {
-        const style = document.createElement('style');
-        style.id = MOTION_STYLE_ID;
-        style.textContent = `
-:root {
-  --motion-fast: 220ms;
-  --motion-base: 420ms;
-  --motion-slow: 720ms;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .animate__animated {
-    animation-duration: 1ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 1ms !important;
-  }
-}
-`.trim();
-        document.head.appendChild(style);
-    }
 }
 
-export function animateElement(el, name, {
-    duration = null,
-    delay = null,
-    speedClass = '',
-    repeat = null,
-    cleanup = true
-} = {}) {
-    if (!el || !name || shouldReduceMotion()) return Promise.resolve(false);
-
-    const classes = ['animate__animated', `animate__${name}`];
-    if (speedClass) classes.push(`animate__${speedClass}`);
-
-    el.classList.remove(...classes);
-    void el.offsetWidth;
-    el.classList.add(...classes);
-
-    if (duration) el.style.setProperty('--animate-duration', duration);
-    if (delay) el.style.setProperty('--animate-delay', delay);
-    if (repeat != null) el.style.setProperty('--animate-repeat', String(repeat));
-
-    return new Promise((resolve) => {
-        const onEnd = () => {
-            if (cleanup) {
-                el.classList.remove(...classes);
-            }
-            if (duration) el.style.removeProperty('--animate-duration');
-            if (delay) el.style.removeProperty('--animate-delay');
-            if (repeat != null) el.style.removeProperty('--animate-repeat');
-            resolve(true);
-        };
-        el.addEventListener('animationend', onEnd, { once: true });
-    });
+export function animateElement(el, name, opts = {}) {
+    return Promise.resolve(false);
 }
 
 export function animateSelector(selector, name, opts = {}) {
-    if (!hasDom()) return Promise.resolve(false);
-    const el = document.querySelector(selector);
-    return animateElement(el, name, opts);
-}
-
-function defaultEffectFor(el) {
-    const tag = String(el.tagName || '').toLowerCase();
-    if (tag === 'aside') return 'fadeInLeft';
-    if (tag === 'header') return 'fadeInDown';
-    if (tag === 'footer') return 'fadeInUp';
-    if (tag === 'main' || tag === 'section' || tag === 'article') return 'fadeIn';
-    if (tag === 'a' || tag === 'button' || tag === 'input' || tag === 'textarea' || tag === 'select') return 'fadeInUp';
-    return 'fadeIn';
+    return Promise.resolve(false);
 }
 
-export function animateTree(root, {
-    selector = '*',
-    baseDelayMs = 14,
-    duration = 'var(--motion-base)'
-} = {}) {
-    if (!hasDom() || !root || shouldReduceMotion()) return 0;
-
-    const nodes = Array.from(root.querySelectorAll(selector));
-    let animated = 0;
-
-    nodes.forEach((el) => {
-        if (!el || !el.classList) return;
-        if (el.matches('script,style,link,meta,title')) return;
-        if (el.hasAttribute('data-no-motion')) return;
-        if (el.dataset.motionApplied === '1') return;
-
-        const effect = el.dataset.motionEffect || defaultEffectFor(el);
-        el.classList.add('animate__animated', `animate__${effect}`);
-        el.style.setProperty('--animate-duration', duration);
-        el.style.setProperty('--animate-delay', `${animated * baseDelayMs}ms`);
-        el.dataset.motionApplied = '1';
-        animated += 1;
-    });
-
-    return animated;
+export function animateTree(root, opts = {}) {
+    return 0;
 }