anentrypoint-design 0.0.425 → 0.0.426

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.425",
+  "version": "0.0.426",
   "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/calendar/calendar.js

@@ -0,0 +1,144 @@
+// Calendar — controlled date-grid primitive. mode='single' calls
+// onSelect(date) on click/Enter; mode='range' uses a two-click anchor
+// (first click sets the range start, second sets the end) with a
+// hover-preview highlight between anchor and the hovered cell. selected/
+// month are owned entirely by the caller; the only state this module keeps
+// is UI-only (hover-preview cell, keyboard-focused cell) via `ref`-captured
+// DOM roving tabindex, matching the FileGrid/DensityPicker roving pattern in
+// this codebase (querySelectorAll the live day buttons, move focus by index,
+// tabindex follows focus) rather than reimplementing useRovingMenu's popup-
+// menu open/close machinery, which this inline grid does not need.
+
+import * as webjsx from '../../../vendor/webjsx/index.js';
+import { Icon } from '../shell.js';
+import { getLocale } from '../../i18n.js';
+import {
+    WEEKDAY_LABELS, buildMonthGrid, key, sameDay, addMonths, isBefore, isAfter,
+    isDisabled, monthLabel,
+} from './grid.js';
+const h = webjsx.createElement;
+
+// Module-scoped hover-preview state for range mode, keyed by the grid's own
+// wrapper element — pure UI-only concern (never handed back to the caller),
+// same shape as Popover's WeakMap-keyed instance bookkeeping.
+const _hoverPreview = new WeakMap();
+
+function rangeBounds(selected) {
+    if (!selected) return { from: null, to: null };
+    const { from, to } = selected;
+    if (from && to && isAfter(from, to)) return { from: to, to: from };
+    return { from, to };
+}
+
+/**
+ * A month date-grid. Fully controlled: `selected`/`month` are owned by the
+ * caller, this component holds no selection state of its own.
+ *
+ * @param {Object} props
+ * @param {'single'|'range'} [props.mode='single']
+ * @param {Date|{from:?Date,to:?Date}} [props.selected] - a Date in single mode, `{from,to}` in range mode.
+ * @param {Function} [props.onSelect] - single mode: `onSelect(date)`. range mode: `onSelect({from,to})`.
+ * @param {Date} props.month - the currently-displayed month (any date within it).
+ * @param {Function} [props.onMonthChange] - `onMonthChange(newMonthDate)`, fired by the prev/next nav.
+ * @param {Date} [props.minDate]
+ * @param {Date} [props.maxDate]
+ * @param {string} [props.locale] - BCP-47 locale for weekday/month labels; defaults to the SDK's active locale.
+ * @returns {*} webjsx vnode
+ */
+export function Calendar({ mode = 'single', selected, onSelect, month, onMonthChange, minDate, maxDate, locale = getLocale() } = {}) {
+    const monthDate = month ? new Date(month) : new Date();
+    const cells = buildMonthGrid(monthDate);
+    const today = new Date();
+    const { from, to } = mode === 'range' ? rangeBounds(selected) : { from: null, to: null };
+
+    const onDayActivate = (date) => {
+        if (isDisabled(date, minDate, maxDate) || !onSelect) return;
+        if (mode === 'single') { onSelect(date); return; }
+        // Range: no anchor yet, or a full range already picked -> start fresh.
+        if (!from || (from && to)) { onSelect({ from: date, to: null }); return; }
+        // One anchor set -> this click closes the range (either order).
+        onSelect(isBefore(date, from) ? { from: date, to: from } : { from, to: date });
+    };
+
+    const onGridKeyDown = (e) => {
+        const grid = e.currentTarget;
+        const days = Array.from(grid.querySelectorAll('.ds-cal-day:not([disabled])'));
+        const cur = days.indexOf(document.activeElement);
+        let target = -1;
+        if (e.key === 'ArrowRight') target = cur + 1;
+        else if (e.key === 'ArrowLeft') target = cur - 1;
+        else if (e.key === 'ArrowDown') target = cur + 7;
+        else if (e.key === 'ArrowUp') target = cur - 7;
+        else if (e.key === 'Home') target = 0;
+        else if (e.key === 'End') target = days.length - 1;
+        else if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); days[cur]?.click(); return; }
+        else return;
+        e.preventDefault();
+        if (target < 0 || target >= days.length) return;
+        days[target].focus();
+    };
+
+    const onDayHover = (date) => {
+        if (mode !== 'range' || !from || to) return;
+        _hoverPreview.set(monthDate, date);
+    };
+
+    const hoverDate = mode === 'range' ? _hoverPreview.get(monthDate) : null;
+    const previewFrom = from && !to && hoverDate ? (isBefore(hoverDate, from) ? hoverDate : from) : null;
+    const previewTo = from && !to && hoverDate ? (isBefore(hoverDate, from) ? from : hoverDate) : null;
+
+    const dayCell = (cell, idx) => {
+        const disabled = isDisabled(cell.date, minDate, maxDate);
+        const isToday = sameDay(cell.date, today);
+        const isSelected = mode === 'single' ? sameDay(cell.date, selected) : (sameDay(cell.date, from) || sameDay(cell.date, to));
+        const isRangeStart = mode === 'range' && from && sameDay(cell.date, from);
+        const isRangeEnd = mode === 'range' && to && sameDay(cell.date, to);
+        const inCommittedRange = mode === 'range' && from && to && !isBefore(cell.date, from) && !isAfter(cell.date, to) && !isRangeStart && !isRangeEnd;
+        const inPreviewRange = mode === 'range' && previewFrom && previewTo
+            && !isBefore(cell.date, previewFrom) && !isAfter(cell.date, previewTo);
+        const cls = ['ds-cal-day',
+            !cell.inMonth ? 'ds-cal-day-outside' : '',
+            isToday ? 'ds-cal-day-today' : '',
+            isSelected ? 'ds-cal-day-selected' : '',
+            isRangeStart ? 'ds-cal-day-range-start' : '',
+            isRangeEnd ? 'ds-cal-day-range-end' : '',
+            (inCommittedRange || (inPreviewRange && !isSelected)) ? 'ds-cal-day-in-range' : '',
+            disabled ? 'ds-cal-day-disabled' : ''].filter(Boolean).join(' ');
+        // Roving tabindex: only one day is a tab stop at a time (the selected
+        // day, today, or the first in-month day as fallback), matching
+        // DensityPicker's rovingRadio contract in files/grid-controls.js.
+        const isTabStop = isSelected || (!selected && isToday) || (!selected && !isToday && idx === cells.findIndex(c => c.inMonth));
+        return h('button', {
+            key: key(cell.date),
+            type: 'button',
+            class: cls,
+            disabled: disabled ? true : null,
+            'aria-pressed': isSelected ? 'true' : 'false',
+            'aria-current': isToday ? 'date' : null,
+            'aria-label': cell.date.toDateString(),
+            tabindex: isTabStop ? '0' : '-1',
+            onclick: () => onDayActivate(cell.date),
+            onmouseenter: () => onDayHover(cell.date),
+        }, String(cell.date.getDate()));
+    };
+
+    return h('div', { class: 'ds-cal' },
+        h('div', { class: 'ds-cal-head' },
+            h('button', {
+                type: 'button', class: 'ds-cal-nav ds-cal-nav-prev',
+                'aria-label': 'previous month',
+                onclick: () => onMonthChange && onMonthChange(addMonths(monthDate, -1)),
+            }, Icon('chevron-left', { size: 16 })),
+            h('span', { class: 'ds-cal-title' }, monthLabel(monthDate, locale)),
+            h('button', {
+                type: 'button', class: 'ds-cal-nav ds-cal-nav-next',
+                'aria-label': 'next month',
+                onclick: () => onMonthChange && onMonthChange(addMonths(monthDate, 1)),
+            }, Icon('chevron-right', { size: 16 }))),
+        h('div', { class: 'ds-cal-weekdays', 'aria-hidden': 'true' },
+            ...WEEKDAY_LABELS.map((w, i) => h('span', { key: i, class: 'ds-cal-weekday-label' }, w))),
+        h('div', {
+            class: 'ds-cal-grid', role: 'grid', 'aria-label': monthLabel(monthDate, locale),
+            onkeydown: onGridKeyDown,
+        }, ...cells.map((c, i) => dayCell(c, i))));
+}

package/src/components/calendar/date-picker.js

@@ -0,0 +1,106 @@
+// DatePicker / DateRangePicker — trigger button + Popover-hosted Calendar.
+// Fully controlled, matching Dialog/Drawer/Popover's shape exactly: the
+// CALLER owns `open`/`onOpenChange` and `month`/`onMonthChange` as real props
+// (no internal open-state toggle). The one DOM-timing wrinkle: Popover needs
+// the trigger's live DOM node as `anchorEl` at the moment `open` flips true,
+// but that node is a same-render sibling, so a `ref` callback captured during
+// THIS render is too late (Popover is constructed synchronously, before
+// webjsx attaches anything to the DOM). chat/composer.js's EmojiPicker
+// trigger hits the same problem and solves it the same way: look the trigger
+// up via `document.querySelector` (already mounted from the prior closed-
+// state render) rather than a same-pass ref value. `name` gives the query a
+// stable per-instance scope so two pickers on one page don't collide.
+import * as webjsx from '../../../vendor/webjsx/index.js';
+import { Popover } from '../overlay-primitives/popover.js';
+import { Icon } from '../shell.js';
+import { getLocale } from '../../i18n.js';
+import { Calendar } from './calendar.js';
+import { formatDate } from './grid.js';
+const h = webjsx.createElement;
+
+function findAnchor(name) {
+    return typeof document !== 'undefined' ? document.querySelector('.ds-dp-trigger[data-dp-name="' + name + '"]') : null;
+}
+
+/**
+ * Trigger button that opens a Popover hosting a single-mode Calendar.
+ *
+ * @param {Object} props
+ * @param {Date} [props.value] - the selected date.
+ * @param {Function} [props.onChange] - `onChange(date)`, fired on day select.
+ * @param {boolean} [props.open] - popover open state, owned by the caller.
+ * @param {Function} [props.onOpenChange] - `onOpenChange(nextOpen)`, fired by the trigger click and on close (Escape/outside-click/selection).
+ * @param {Date} [props.month] - displayed month; defaults to `value` or today when omitted.
+ * @param {Function} [props.onMonthChange] - `onMonthChange(newMonthDate)`, fired by the prev/next nav.
+ * @param {string} [props.placeholder='Select date'] - trigger label when `value` is unset.
+ * @param {Date} [props.minDate]
+ * @param {Date} [props.maxDate]
+ * @param {string} [props.name='dp'] - stable id distinguishing multiple pickers' anchor lookup; set explicitly when rendering more than one DatePicker on a page.
+ * @param {string} [props.locale]
+ * @returns {*} webjsx vnode
+ */
+export function DatePicker({ value, onChange, open = false, onOpenChange, month, onMonthChange, placeholder = 'Select date', minDate, maxDate, name = 'dp', locale = getLocale() } = {}) {
+    const close = () => onOpenChange && onOpenChange(false);
+    const displayedMonth = month || value || new Date();
+    const label = value ? formatDate(value, locale) : placeholder;
+    const trigger = h('button', {
+        type: 'button', class: 'ds-dp-trigger', 'data-dp-name': name,
+        'aria-haspopup': 'dialog', 'aria-expanded': open ? 'true' : 'false',
+        onclick: () => onOpenChange && onOpenChange(!open),
+    }, Icon('page', { size: 15 }), h('span', { class: 'ds-dp-trigger-label' }, label));
+    const popover = Popover({
+        open, anchorEl: open ? findAnchor(name) : null, onClose: close,
+        ariaLabel: 'choose date',
+        children: Calendar({
+            mode: 'single',
+            selected: value,
+            month: displayedMonth,
+            onMonthChange: (m) => onMonthChange && onMonthChange(m),
+            onSelect: (d) => { onChange && onChange(d); close(); },
+            minDate, maxDate, locale,
+        }),
+    });
+    return h('span', { class: 'ds-dp' }, trigger, popover);
+}
+
+/**
+ * Trigger button that opens a Popover hosting a range-mode Calendar.
+ *
+ * @param {Object} props
+ * @param {{from:?Date,to:?Date}} [props.value]
+ * @param {Function} [props.onChange] - `onChange({from,to})`, fired on each click.
+ * @param {boolean} [props.open] - popover open state, owned by the caller.
+ * @param {Function} [props.onOpenChange] - `onOpenChange(nextOpen)`; also fired with `false` once both ends of the range are picked.
+ * @param {Date} [props.month]
+ * @param {Function} [props.onMonthChange]
+ * @param {string} [props.placeholder='Select dates']
+ * @param {Date} [props.minDate]
+ * @param {Date} [props.maxDate]
+ * @param {string} [props.name='drp'] - stable id distinguishing multiple pickers' anchor lookup.
+ * @param {string} [props.locale]
+ * @returns {*} webjsx vnode
+ */
+export function DateRangePicker({ value, onChange, open = false, onOpenChange, month, onMonthChange, placeholder = 'Select dates', minDate, maxDate, name = 'drp', locale = getLocale() } = {}) {
+    const close = () => onOpenChange && onOpenChange(false);
+    const from = value && value.from, to = value && value.to;
+    const displayedMonth = month || from || new Date();
+    const label = from ? (formatDate(from, locale) + ' – ' + (to ? formatDate(to, locale) : '…')) : placeholder;
+    const trigger = h('button', {
+        type: 'button', class: 'ds-dp-trigger', 'data-dp-name': name,
+        'aria-haspopup': 'dialog', 'aria-expanded': open ? 'true' : 'false',
+        onclick: () => onOpenChange && onOpenChange(!open),
+    }, Icon('page', { size: 15 }), h('span', { class: 'ds-dp-trigger-label' }, label));
+    const popover = Popover({
+        open, anchorEl: open ? findAnchor(name) : null, onClose: close,
+        ariaLabel: 'choose date range',
+        children: Calendar({
+            mode: 'range',
+            selected: { from, to },
+            month: displayedMonth,
+            onMonthChange: (m) => onMonthChange && onMonthChange(m),
+            onSelect: (range) => { onChange && onChange(range); if (range.from && range.to) close(); },
+            minDate, maxDate, locale,
+        }),
+    });
+    return h('span', { class: 'ds-dp ds-drp' }, trigger, popover);
+}

package/src/components/calendar/grid.js

@@ -0,0 +1,79 @@
+// Pure date-grid math for Calendar — no DOM, no webjsx. Builds the 6x7 cell
+// matrix for a given month (leading/trailing days from adjacent months
+// included so every row is full), plus small date-key/compare helpers shared
+// by grid.js, calendar.js and the picker shells. All dates are normalized to
+// local-midnight Date objects; `key(d)` ('YYYY-MM-DD') is the identity used
+// for selection/range membership comparisons instead of Date reference
+// equality (which two independently-constructed Dates never satisfy).
+
+export const WEEKDAY_LABELS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+
+export function startOfDay(d) {
+    const n = new Date(d);
+    n.setHours(0, 0, 0, 0);
+    return n;
+}
+
+export function key(d) {
+    if (!d) return null;
+    const n = startOfDay(d);
+    return n.getFullYear() + '-' + String(n.getMonth() + 1).padStart(2, '0') + '-' + String(n.getDate()).padStart(2, '0');
+}
+
+export function sameDay(a, b) {
+    return !!a && !!b && key(a) === key(b);
+}
+
+export function addMonths(monthDate, delta) {
+    const n = new Date(monthDate);
+    n.setDate(1);
+    n.setMonth(n.getMonth() + delta);
+    return n;
+}
+
+export function addDays(d, delta) {
+    const n = startOfDay(d);
+    n.setDate(n.getDate() + delta);
+    return n;
+}
+
+export function isBefore(a, b) {
+    return startOfDay(a).getTime() < startOfDay(b).getTime();
+}
+
+export function isAfter(a, b) {
+    return startOfDay(a).getTime() > startOfDay(b).getTime();
+}
+
+export function isDisabled(d, minDate, maxDate) {
+    if (minDate && isBefore(d, minDate)) return true;
+    if (maxDate && isAfter(d, maxDate)) return true;
+    return false;
+}
+
+// Build the 42-cell (6 week rows x 7) matrix for `monthDate`'s month. Each
+// cell: { date, inMonth }. Always 6 rows so the grid height never reflows
+// between months (a 4-row Feb next to a 6-row Oct would otherwise jump the
+// popover/page height under it).
+export function buildMonthGrid(monthDate) {
+    const first = new Date(monthDate.getFullYear(), monthDate.getMonth(), 1);
+    const startOffset = first.getDay(); // 0=Sun
+    const gridStart = addDays(first, -startOffset);
+    const cells = [];
+    for (let i = 0; i < 42; i++) {
+        const date = addDays(gridStart, i);
+        cells.push({ date, inMonth: date.getMonth() === monthDate.getMonth() });
+    }
+    return cells;
+}
+
+export function monthLabel(monthDate, locale) {
+    try { return new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric' }).format(monthDate); }
+    catch { return monthDate.toDateString(); }
+}
+
+export function formatDate(d, locale) {
+    if (!d) return '';
+    try { return new Intl.DateTimeFormat(locale, { year: 'numeric', month: 'short', day: 'numeric' }).format(d); }
+    catch { return startOfDay(d).toDateString(); }
+}

package/src/components/calendar.js

@@ -0,0 +1,15 @@
+// Calendar / DatePicker / DateRangePicker — date-grid primitive plus its two
+// trigger+popover shells. Barrel over ./calendar/*.js submodules (each stays
+// single-responsibility and under the 200-line cap); the public export
+// surface here matches the group-barrel shape used by editor-primitives.js /
+// overlay-primitives.js (import-then-bare-export, never `export … from`).
+
+import { Calendar } from './calendar/calendar.js';
+import { DatePicker, DateRangePicker } from './calendar/date-picker.js';
+import { WEEKDAY_LABELS, buildMonthGrid, formatDate, monthLabel } from './calendar/grid.js';
+
+export {
+    Calendar,
+    DatePicker, DateRangePicker,
+    WEEKDAY_LABELS, buildMonthGrid, formatDate, monthLabel,
+};

package/src/components/carousel.js

@@ -0,0 +1,53 @@
+// Carousel — horizontal (or vertical) scroll-snap content carousel. Native
+// CSS scroll-snap does the heavy lifting; prev/next Btns call scrollBy() on
+// the track element via a `ref` callback (the same raw-DOM-node-reference
+// pattern used across the codebase, e.g. editor-primitives/split-panel.js's
+// `ref: (el) => { rootEl = el; }`). No drag-library dependency.
+
+import * as webjsx from '../../vendor/webjsx/index.js';
+import { Btn } from './shell/atoms.js';
+import { Icon } from './shell/icons.js';
+const h = webjsx.createElement;
+
+/**
+ * A scroll-snap content carousel with prev/next controls.
+ *
+ * @param {Object} [props]
+ * @param {Array} [props.items=[]]
+ * @param {Function} props.renderItem - (item, index) => vnode.
+ * @param {'horizontal'|'vertical'} [props.orientation='horizontal']
+ * @param {string} [props.label] - accessible name for the region.
+ * @param {*} [props.key]
+ * @returns {*} webjsx vnode
+ */
+export function Carousel({ items = [], renderItem, orientation = 'horizontal', label = 'carousel', key } = {}) {
+    const isVert = orientation === 'vertical';
+    let trackEl = null;
+    const scrollByPage = (dir) => {
+        if (!trackEl) return;
+        const delta = isVert
+            ? trackEl.clientHeight * 0.9 * dir
+            : trackEl.clientWidth * 0.9 * dir;
+        trackEl.scrollBy(isVert ? { top: delta, behavior: 'smooth' } : { left: delta, behavior: 'smooth' });
+    };
+    const track = h('div', {
+        key: 'track',
+        class: 'ds-carousel-track' + (isVert ? ' ds-carousel-track--vertical' : ''),
+        role: 'group',
+        'aria-label': label,
+        ref: (el) => { trackEl = el; }
+    }, ...items.map((item, i) => h('div', { key: 'item-' + i, class: 'ds-carousel-item' }, renderItem(item, i))));
+    return h('div', { key, class: 'ds-carousel' + (isVert ? ' ds-carousel--vertical' : '') },
+        Btn({
+            key: 'prev', variant: 'ghost', class: 'ds-carousel-prev',
+            'aria-label': 'previous', onClick: () => scrollByPage(-1),
+            children: Icon(isVert ? 'chevron-up' : 'chevron-left')
+        }),
+        track,
+        Btn({
+            key: 'next', variant: 'ghost', class: 'ds-carousel-next',
+            'aria-label': 'next', onClick: () => scrollByPage(1),
+            children: Icon(isVert ? 'chevron-down' : 'chevron-right')
+        })
+    );
+}

package/src/components/collab/cursors.js

@@ -0,0 +1,68 @@
+// LiveCursorOverlay + RemoteSelectionRings + RecentEditHighlightFlash — the
+// real-time multiplayer layer: remote collaborators' pointer positions, text
+// selections, and just-edited regions. No existing precedent in this kit
+// (community/presence.js is Discord-style voice/member presence, a different
+// shape entirely) — these three are full-bleed overlays meant to sit inside
+// a positioned editor/canvas container, `pointer-events: none` throughout so
+// they never intercept the local user's own input.
+
+import * as webjsx from '../../../vendor/webjsx/index.js';
+import { Icon } from '../shell.js';
+const h = webjsx.createElement;
+
+// LiveCursorOverlay({ cursors }) — cursors: [{ userId, x, y, color, label }]
+export function LiveCursorOverlay({ cursors = [] } = {}) {
+    return h('div', { class: 'ds-collab-cursor-overlay', 'aria-hidden': 'true' },
+        ...cursors.map((c) => h('div', {
+            key: c.userId, class: 'ds-collab-cursor', style: `left:${c.x}px;top:${c.y}px;color:${c.color}`,
+        },
+            Icon('cursor', { size: 18 }),
+            c.label ? h('span', { class: 'ds-collab-cursor-label', style: `background:${c.color}` }, c.label) : null)));
+}
+
+// LiveCursorOverlay above takes FLAT `x`/`y`, so a caller reasonably passes the
+// same flat shape here — and `s.rect.left` on a flat object throws a bare
+// TypeError during synchronous mount, which blanks the WHOLE kit rather than one
+// specimen. Accept either shape, and if neither is present fail loudly naming
+// the offending entry, per the fail-fast-with-exact-state invariant.
+function rectOf(entry, component) {
+    const r = entry.rect || entry;
+    const has = (v) => typeof v === 'number' && Number.isFinite(v);
+    const left = has(r.left) ? r.left : r.x;
+    const top = has(r.top) ? r.top : r.y;
+    if (!has(left) || !has(top) || !has(r.width) || !has(r.height)) {
+        throw new Error(`${component}: entry needs {rect:{top,left,width,height}} or flat {x,y,width,height}; got ${JSON.stringify(entry)}`);
+    }
+    return { left, top, width: r.width, height: r.height };
+}
+
+// RemoteSelectionRings({ selections }) — selections: [{ userId, rect: {top,left,width,height}, color }]
+// A flat { x, y, width, height } entry is accepted too, matching LiveCursorOverlay.
+export function RemoteSelectionRings({ selections = [] } = {}) {
+    return h('div', { class: 'ds-collab-selection-overlay', 'aria-hidden': 'true' },
+        ...selections.map((s) => {
+            const r = rectOf(s, 'RemoteSelectionRings');
+            return h('div', {
+                key: s.userId,
+                class: 'ds-collab-selection-ring',
+                style: `left:${r.left}px;top:${r.top}px;width:${r.width}px;height:${r.height}px;--ring-color:${s.color}`,
+            });
+        }));
+}
+
+// RecentEditHighlightFlash({ edits }) — edits: [{ rect, color, timestamp }]
+// A flat { x, y, width, height } entry is accepted too, matching LiveCursorOverlay.
+// Brief fade-out background flash per recently-edited region. Reduced-motion
+// users get an instant flash with no animation (the `ds-no-anim` modifier
+// class, toggled off any transition/animation in CSS) instead of a fade.
+export function RecentEditHighlightFlash({ edits = [] } = {}) {
+    return h('div', { class: 'ds-collab-flash-overlay', 'aria-hidden': 'true' },
+        ...edits.map((e, i) => {
+            const r = rectOf(e, 'RecentEditHighlightFlash');
+            return h('div', {
+                key: e.timestamp != null ? String(e.timestamp) + i : i,
+                class: 'ds-collab-flash',
+                style: `left:${r.left}px;top:${r.top}px;width:${r.width}px;height:${r.height}px;--flash-color:${e.color}`,
+            });
+        }));
+}

package/src/components/collab/presence.js

@@ -0,0 +1,29 @@
+// AgentPresenceChip + PresenceBar — small avatar-chip-in-a-row collaborator
+// presence, generalized from community/presence.js's Discord-style VoiceUser/
+// MemberItem chips (same avatar-circle-with-initial + name-label shape, same
+// --avatar-bg custom-property color hook) but for arbitrary collaborator
+// identity rather than voice/member semantics specifically — prefixed
+// ds-collab-chip (not cm-*) since this is a conceptually different feature
+// living in its own group.
+
+import * as webjsx from '../../../vendor/webjsx/index.js';
+import { avatarInitial } from '../content.js';
+const h = webjsx.createElement;
+
+// AgentPresenceChip({ userId, label, color, status })
+//   status: 'active' | 'idle' | 'offline' — mirrors MemberItem's status dot.
+export function AgentPresenceChip({ userId, label, color, status = 'active', key } = {}) {
+    const initial = avatarInitial(label || userId);
+    return h('div', { key, class: 'ds-collab-chip', title: label || userId },
+        h('div', { class: 'ds-collab-chip-avatar', style: color ? `--avatar-bg:${color}` : null },
+            h('span', { class: 'ds-collab-chip-status ds-collab-chip-status-' + status }),
+            initial),
+        h('span', { class: 'ds-collab-chip-name' }, label || userId));
+}
+
+// PresenceBar({ users }) — users: [{ userId, label, color, status }]
+export function PresenceBar({ users = [] } = {}) {
+    if (!users.length) return h('div', { class: 'ds-collab-bar ds-collab-bar-empty', role: 'status' }, 'no collaborators online');
+    return h('div', { class: 'ds-collab-bar', role: 'group', 'aria-label': 'collaborators online' },
+        ...users.map((u) => AgentPresenceChip({ ...u, key: u.userId })));
+}

package/src/components/collab.js

@@ -0,0 +1,11 @@
+// Collab — real-time multiplayer co-editing presence: live remote cursors,
+// selection rings, recent-edit flashes, and a generalized collaborator
+// presence chip/bar (visually related to community/presence.js's Discord-
+// style voice/member chips but for arbitrary collaborator identity, not
+// voice/member semantics). Group barrel over ./collab/*.js submodules,
+// following the same group-barrel pattern as community.js/editor-primitives.js.
+
+import { LiveCursorOverlay, RemoteSelectionRings, RecentEditHighlightFlash } from './collab/cursors.js';
+import { AgentPresenceChip, PresenceBar } from './collab/presence.js';
+
+export { LiveCursorOverlay, RemoteSelectionRings, RecentEditHighlightFlash, AgentPresenceChip, PresenceBar };

package/src/components/content/otp-input.js

@@ -0,0 +1,91 @@
+// InputOTP — segmented PIN/code-entry input. `length` real <input> boxes
+// (not a single overlaid input) so each box gets a real accessible name and
+// native text-cursor behavior; auto-advance-on-type, backspace-retreat, and
+// paste-splits-across-boxes are wired by hand since no browser gives this
+// pattern for free. First box carries autocomplete="one-time-code" so mobile
+// SMS/keychain autofill still targets the group.
+
+import * as webjsx from '../../../vendor/webjsx/index.js';
+const h = webjsx.createElement;
+
+let _uid = 0;
+function uid(prefix) { _uid += 1; return prefix + '-' + _uid; }
+
+/**
+ * Segmented one-time-code / PIN entry.
+ *
+ * @param {Object} [props]
+ * @param {number} [props.length=6] - number of boxes.
+ * @param {string} [props.value=''] - the full code so far (controlled).
+ * @param {Function} [props.onChange] - called with (nextValue:string, event) on every edit.
+ * @param {Function} [props.onComplete] - called with (code:string) once all boxes are filled.
+ * @param {boolean} [props.disabled]
+ * @param {boolean} [props.error]
+ * @param {string} [props.label] - accessible name for the group.
+ * @param {*} [props.key]
+ * @returns {*} webjsx vnode
+ */
+export function InputOTP({ length = 6, value = '', onChange, onComplete, disabled, error, label = 'code', key } = {}) {
+    const groupId = uid('ds-otp');
+    const chars = value.split('').slice(0, length);
+    const setValue = (next, e) => {
+        const clipped = next.slice(0, length);
+        if (onChange) onChange(clipped, e);
+        if (clipped.length === length && onComplete) onComplete(clipped);
+    };
+    const focusBox = (root, idx) => {
+        const boxes = root.querySelectorAll('.ds-otp-box');
+        if (boxes[idx]) boxes[idx].focus();
+    };
+    const boxes = [];
+    for (let i = 0; i < length; i++) {
+        const ch = chars[i] || '';
+        boxes.push(h('input', {
+            key: 'b' + i,
+            type: 'text',
+            inputmode: 'numeric',
+            autocomplete: i === 0 ? 'one-time-code' : 'off',
+            class: 'ds-otp-box' + (ch ? ' ds-otp-box-filled' : '') + (error ? ' ds-otp-box-error' : ''),
+            maxlength: '1',
+            value: ch,
+            disabled: disabled ? true : null,
+            'aria-label': label + ' digit ' + (i + 1) + ' of ' + length,
+            'aria-invalid': error ? 'true' : null,
+            oninput: (e) => {
+                const raw = e.target.value.replace(/\s/g, '');
+                const c = raw.slice(-1);
+                const arr = chars.slice();
+                arr[i] = c;
+                setValue(arr.join('').slice(0, length), e);
+                if (c && i < length - 1) focusBox(e.currentTarget.closest('.ds-otp'), i + 1);
+            },
+            onkeydown: (e) => {
+                if (e.key === 'Backspace' && !e.currentTarget.value && i > 0) {
+                    e.preventDefault();
+                    const arr = chars.slice();
+                    arr[i - 1] = '';
+                    setValue(arr.join(''), e);
+                    focusBox(e.currentTarget.closest('.ds-otp'), i - 1);
+                } else if (e.key === 'ArrowLeft' && i > 0) {
+                    e.preventDefault();
+                    focusBox(e.currentTarget.closest('.ds-otp'), i - 1);
+                } else if (e.key === 'ArrowRight' && i < length - 1) {
+                    e.preventDefault();
+                    focusBox(e.currentTarget.closest('.ds-otp'), i + 1);
+                }
+            },
+            onpaste: (e) => {
+                e.preventDefault();
+                const text = (e.clipboardData || window.clipboardData).getData('text').replace(/\s/g, '');
+                if (!text) return;
+                setValue(text.slice(0, length), e);
+                const root = e.currentTarget.closest('.ds-otp');
+                const landAt = Math.min(text.length, length) - 1;
+                if (landAt >= 0) focusBox(root, landAt);
+            }
+        }));
+    }
+    return h('div', { key, id: groupId, class: 'ds-otp', role: 'group', 'aria-label': label },
+        ...boxes
+    );
+}

package/src/components/content.js

@@ -15,6 +15,7 @@ import { WorksList, WritingList, EventList } from './content/lists.js';
 import { Kpi, Sparkline, BarChart } from './content/charts.js';
 import { Table, HealthTable, ProcessRegistryTable } from './content/table.js';
 import { SearchInput, TextField, Select, Form } from './content/fields.js';
+import { InputOTP } from './content/otp-input.js';
 import { Spinner, Skeleton, Alert, FilterPills } from './content/feedback.js';
 import { HomeView, ProjectView } from './content/views.js';
 
@@ -27,7 +28,7 @@ export {
     WorksList, WritingList, EventList,
     Kpi, Sparkline, BarChart,
     Table, HealthTable, ProcessRegistryTable,
-    SearchInput, TextField, Select, Form,
+    SearchInput, TextField, Select, Form, InputOTP,
     Spinner, Skeleton, Alert, FilterPills,
     HomeView, ProjectView,
 };