anentrypoint-design 0.0.304 → 0.0.306

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.304",
+  "version": "0.0.306",
   "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/editor-primitives.js

@@ -223,6 +223,45 @@ export function useMediaQuery(query) {
     };
 }
 
+// ---------------------------------------------------------------------------
+// Grid / GridItem — 24-column responsive layout primitive (screen-real-estate
+// density: dense multi-column panels without a hand-rolled grid-template-
+// columns per consumer). Column-span props are integers 1-24 (or `true` for
+// full-width/auto-grow, or `0` to hide at that breakpoint) evaluated at four
+// tiers mirroring BP_SM/MD/LG/XL (480/768/1024/1440) via media queries in
+// editor-primitives.css — no JS-side matchMedia needed, CSS custom
+// properties + @media do the layout work so it degrades gracefully with
+// SSR/no-hydration. Grid itself is a flex row wrapper; GridItem computes
+// flex-basis/max-width from its span at each tier.
+// ---------------------------------------------------------------------------
+export function Grid({ gap, justify, align, children, key } = {}) {
+    const style = [
+        gap != null ? `gap:${typeof gap === 'number' ? gap + 'px' : gap}` : '',
+        justify ? `justify-content:${justify}` : '',
+        align ? `align-items:${align}` : '',
+    ].filter(Boolean).join(';');
+    return h('div', { key, class: 'ds-ep-grid', style: style || null }, children);
+}
+
+function gridSpanStyle(prefix, val) {
+    if (val === undefined) return '';
+    if (val === true) return `--${prefix}-basis:100%;--${prefix}-grow:1;--${prefix}-display:inherit;`;
+    if (val === 0) return `--${prefix}-display:none;`;
+    const pct = Math.max(0, Math.min(100, (100 / 24) * val));
+    return `--${prefix}-basis:${pct}%;--${prefix}-grow:0;--${prefix}-display:inherit;`;
+}
+
+export function GridItem({ xs, sm, md, lg, xl, children, key } = {}) {
+    const style = [
+        gridSpanStyle('xs', xs),
+        gridSpanStyle('sm', sm),
+        gridSpanStyle('md', md),
+        gridSpanStyle('lg', lg),
+        gridSpanStyle('xl', xl),
+    ].join('');
+    return h('div', { key, class: 'ds-ep-grid-item', style: style || null }, children);
+}
+
 // ---------------------------------------------------------------------------
 // FocusTrap — wraps subtree, traps Tab/Shift+Tab. Mount/unmount lifecycle is
 // managed via DOM-level keydown listener attached when first focused.
@@ -592,25 +631,69 @@ export function toast({ message, kind = 'info', duration = 3000 } = {}) {
 // gm-pager. page is 1-indexed; pageCount<=1 disables both buttons (no
 // divide-by-zero, no dead-end enabled control). total (optional) renders an
 // item-count suffix ("42 items") alongside the page label.
+//
+// numbered=true switches to a compact numbered-button row (screen-real-estate
+// dense mode) instead of the prev/next label: always shows first, last, the
+// current page, and up to `siblingCount` neighbors either side, collapsing
+// gaps into an ellipsis span. Falls back to prev/next automatically when
+// pageCount<=1. The prev/next contract (default) is untouched.
 // ---------------------------------------------------------------------------
-export function Pager({ page = 1, pageCount = 1, onPage, total, itemLabel = 'items' } = {}) {
+function buildPageRange(count, page, siblingCount) {
+    const limit = siblingCount * 2 + 3; // first + last + current + siblings
+    if (count <= limit) return Array.from({ length: count }, (_, i) => i + 1);
+    const pages = new Set([1, count, page]);
+    for (let i = 1; i <= siblingCount; i++) {
+        pages.add(page - i);
+        pages.add(page + i);
+    }
+    const sorted = [...pages].filter((p) => p >= 1 && p <= count).sort((a, b) => a - b);
+    const result = [];
+    let prev = null;
+    for (const p of sorted) {
+        if (prev !== null && p - prev > 1) result.push('...');
+        result.push(p);
+        prev = p;
+    }
+    return result;
+}
+
+export function Pager({ page = 1, pageCount = 1, onPage, total, itemLabel = 'items', numbered = false, siblingCount = 1 } = {}) {
     const safeCount = Math.max(1, pageCount || 1);
     const safePage = Math.min(Math.max(1, page || 1), safeCount);
     const atStart = safePage <= 1;
     const atEnd = safePage >= safeCount;
+    const prevBtn = h('button', {
+        type: 'button', class: 'ds-ep-pager-btn', disabled: atStart ? 'disabled' : null,
+        'aria-label': 'previous page',
+        onclick: () => { if (!atStart && onPage) onPage(safePage - 1); },
+    }, '<-');
+    const nextBtn = h('button', {
+        type: 'button', class: 'ds-ep-pager-btn', disabled: atEnd ? 'disabled' : null,
+        'aria-label': 'next page',
+        onclick: () => { if (!atEnd && onPage) onPage(safePage + 1); },
+    }, '->');
+    if (numbered) {
+        const range = buildPageRange(safeCount, safePage, Math.max(1, siblingCount || 1));
+        return h('div', { class: 'ds-ep-pager ds-ep-pager-numbered', role: 'group', 'aria-label': 'pagination' },
+            prevBtn,
+            ...range.map((p, i) => p === '...'
+                ? h('span', { key: 'ellipsis-' + i, class: 'ds-ep-pager-ellipsis' }, '...')
+                : h('button', {
+                    key: 'p' + p, type: 'button',
+                    class: 'ds-ep-pager-num' + (p === safePage ? ' is-current' : ''),
+                    'aria-current': p === safePage ? 'page' : null,
+                    'aria-label': 'page ' + p,
+                    onclick: () => { if (p !== safePage && onPage) onPage(p); },
+                }, String(p))),
+            nextBtn,
+            total != null ? h('span', { class: 'ds-ep-pager-total' }, total + ' ' + itemLabel) : null
+        );
+    }
     return h('div', { class: 'ds-ep-pager', role: 'group', 'aria-label': 'pagination' },
-        h('button', {
-            type: 'button', class: 'ds-ep-pager-btn', disabled: atStart ? 'disabled' : null,
-            'aria-label': 'previous page',
-            onclick: () => { if (!atStart && onPage) onPage(safePage - 1); },
-        }, '<-'),
+        prevBtn,
         h('span', { class: 'ds-ep-pager-label' },
             'page ' + safePage + ' / ' + safeCount + (total != null ? ' (' + total + ' ' + itemLabel + ')' : '')),
-        h('button', {
-            type: 'button', class: 'ds-ep-pager-btn', disabled: atEnd ? 'disabled' : null,
-            'aria-label': 'next page',
-            onclick: () => { if (!atEnd && onPage) onPage(safePage + 1); },
-        }, '->')
+        nextBtn
     );
 }
 
@@ -747,3 +830,53 @@ export function IconButtonGroup({ items = [], value, onChange, dense = false } =
         }, it.glyph != null ? it.glyph : it.label))
     );
 }
+
+// ---------------------------------------------------------------------------
+// Collapse — progressive-disclosure toggle panel (screen-real-estate
+// density: property inspectors, nested settings, FAQ-style panels).
+// Controlled component: caller owns `expanded` state and passes `onToggle`,
+// same pattern as Drawer/Dialog `open`/`onClose` above — no internal state.
+// ---------------------------------------------------------------------------
+export function Collapse({ title, expanded = false, onToggle, children, key } = {}) {
+    return h('div', { key, class: 'ds-ep-collapse' + (expanded ? ' is-expanded' : '') },
+        h('button', {
+            type: 'button', class: 'ds-ep-collapse-head',
+            'aria-expanded': expanded ? 'true' : 'false',
+            onclick: () => { if (onToggle) onToggle(!expanded); },
+        },
+            h('span', { class: 'ds-ep-collapse-chevron' }, expanded ? 'v' : '>'),
+            h('span', { class: 'ds-ep-collapse-title' }, title)),
+        expanded ? h('div', { class: 'ds-ep-collapse-body' }, children) : null);
+}
+
+// ---------------------------------------------------------------------------
+// CollapseGroup — accordion wrapper enforcing single-open-at-a-time when
+// `accordion=true` (default false — group just lays out children, each
+// Collapse still individually controlled). `openId`/`onOpenChange` drive the
+// accordion; `items` is [{id, title, children}].
+// ---------------------------------------------------------------------------
+export function CollapseGroup({ items = [], openId, onOpenChange, accordion = false, key } = {}) {
+    return h('div', { key, class: 'ds-ep-collapse-group' },
+        ...items.map((it) => Collapse({
+            key: it.id,
+            title: it.title,
+            expanded: accordion ? it.id === openId : Boolean(it.expanded),
+            onToggle: (next) => {
+                if (!onOpenChange) return;
+                if (accordion) onOpenChange(next ? it.id : null);
+                else onOpenChange(it.id, next);
+            },
+            children: it.children,
+        })));
+}
+
+// ---------------------------------------------------------------------------
+// Divider — plain rule, optional centered text label, optional vertical
+// orientation (for segmenting dense panels without a full Section wrapper).
+// ---------------------------------------------------------------------------
+export function Divider({ label, vertical = false, key } = {}) {
+    if (vertical) return h('span', { key, class: 'ds-ep-divider ds-ep-divider-vertical', role: 'separator', 'aria-orientation': 'vertical' });
+    if (!label) return h('hr', { key, class: 'ds-ep-divider' });
+    return h('div', { key, class: 'ds-ep-divider ds-ep-divider-labeled', role: 'separator' },
+        h('span', { class: 'ds-ep-divider-label' }, label));
+}

package/src/components.js

@@ -80,6 +80,9 @@ export {
     Drawer, Dialog, FocusTrap,
     Toast, toast,
     Pager, JsonViewer,
+    Grid, GridItem,
+    Collapse, CollapseGroup,
+    Divider,
     useMediaQuery,
     BP_SM, BP_MD, BP_LG, BP_XL
 } from './components/editor-primitives.js';