anentrypoint-design 0.0.325 → 0.0.327

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.325",
+  "version": "0.0.327",
   "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",
@@ -81,7 +81,10 @@
     "build": "node scripts/build.mjs",
     "lint:null-children": "node scripts/lint-null-children.mjs",
     "lint:classes": "node scripts/lint-classes.mjs",
-    "tokens": "node scripts/generate-tokens-json.mjs"
+    "lint:ui-kits": "node scripts/generate-ui-kit-scaffolds.mjs --check",
+    "tokens": "node scripts/generate-tokens-json.mjs",
+    "generate:ui-kits": "node scripts/generate-ui-kit-scaffolds.mjs",
+    "generate:preview-index": "node scripts/generate-preview-index.mjs"
   },
   "repository": {
     "type": "git",

package/src/components/freddie.js

@@ -9,6 +9,7 @@ import { makePage, api, loadingState, errorState, emptyState } from './freddie/r
 import { getRecentPaths, saveRecentPath, skillLabel, renderChatMessages } from './freddie/helpers.js';
 import { Panel, Row, Table, Kpi, PageHeader, SearchInput, TextField, Select } from './content.js';
 import { Chip, Btn, Icon } from './shell.js';
+import { formatTime } from '../locale.js';
 import { ChatMessage, ChatComposer } from './chat.js';
 import { fmtTime, fmtAgo } from './sessions.js';
 
@@ -109,14 +110,14 @@ export const chat = makePage((ctx) => {
     async function send(text) {
         const t = (text || ctx.state.draft || '').trim();
         if (!t || ctx.state.sending) return;
-        ctx.state.messages.push({ role: 'user', text: t, time: new Date().toLocaleTimeString() });
+        ctx.state.messages.push({ role: 'user', text: t, time: formatTime(Date.now()) });
         ctx.set({ draft: '', sending: true });
         try {
             const r = await api('/api/chat', { method: 'POST', body: { prompt: t } });
             const reply = r.result || r.content || r.message || (r.messages && r.messages.at(-1)?.content) || JSON.stringify(r);
-            ctx.state.messages.push({ role: 'assistant', text: String(reply), time: new Date().toLocaleTimeString() });
+            ctx.state.messages.push({ role: 'assistant', text: String(reply), time: formatTime(Date.now()) });
         } catch (e) {
-            ctx.state.messages.push({ role: 'assistant', text: 'Error: ' + String(e.message || e), time: new Date().toLocaleTimeString() });
+            ctx.state.messages.push({ role: 'assistant', text: 'Error: ' + String(e.message || e), time: formatTime(Date.now()) });
         }
         ctx.set({ sending: false });
     }

package/src/components/sessions.js

@@ -6,6 +6,7 @@
 import * as webjsx from '../../vendor/webjsx/index.js';
 import { Btn, Icon } from './shell.js';
 import { Select, SearchInput } from './content.js';
+import { formatDateTime, formatNumber } from '../locale.js';
 const h = webjsx.createElement;
 
 // ONE duration format for every surface (live cards, running panel, session
@@ -15,7 +16,7 @@ const h = webjsx.createElement;
 // timestamp (freddie pages, chat transcripts). fmtTime -> localized
 // date+time string; fmtAgo -> coarse relative ('Ns/Nm/Nh/Nd ago').
 export function fmtTime(t) {
-  try { return new Date(t).toLocaleString(); } catch { return String(t || ''); }
+  try { return formatDateTime(t); } catch { return String(t || ''); }
 }
 export function fmtAgo(t) {
   if (!t) return '';
@@ -231,7 +232,7 @@ export function SessionCard({ session = {}, onStop, onOpen, onView, active = fal
   const elapsedText = s.elapsedMs != null ? fmtDuration(s.elapsedMs) : (s.elapsed != null ? s.elapsed : null);
   // At-a-glance cost/usage (the prompt's named command-center signal). Null-safe:
   // sessions with no cost source (external tally rows) simply omit the segment.
-  const tokText = s.tokens != null ? (typeof s.tokens === 'number' ? s.tokens.toLocaleString() : s.tokens) + ' tok' : null;
+  const tokText = s.tokens != null ? (typeof s.tokens === 'number' ? formatNumber(s.tokens) : s.tokens) + ' tok' : null;
   const costText = s.cost != null ? (typeof s.cost === 'number' ? '$' + s.cost.toFixed(4) : String(s.cost)) : null;
   // Cost is rendered as its own emphasized segment (not buried in the mono run)
   // so the command-center cost-at-a-glance signal is scannable.

package/src/css/app-shell/states-interactions.css

@@ -3,6 +3,20 @@
    Comprehensive improvements for perfect UX across all surfaces
    ============================================================ */
 
+/* ------------------------------------------------------------
+   Table — clickable row focus ring
+   Table()'s onRowClick path (content.js) sets class="clickable"
+   role="button" tabindex="0" on the <tr>; the browser's native
+   :focus-visible outline on a <tr> renders inconsistently across
+   engines (often clipped by table border-collapse), so it needs
+   the same explicit outline treatment every other interactive
+   primitive in this file gets, via the shared --focus-* tokens.
+   -------------------------------------------------------------- */
+tr.clickable:focus-visible {
+  outline: var(--focus-w) solid var(--focus-color);
+  outline-offset: calc(-1 * var(--focus-offset));
+}
+
 /* ------------------------------------------------------------
    Component States — Disabled, Loading, Error, Success
    -------------------------------------------------------------- */

package/src/locale.js

@@ -0,0 +1,84 @@
+// 247420 design system — locale controller.
+//
+// User-configurable locale override for date/time formatting; persists to
+// localStorage like theme.js's controller. Absent an override, falls back to
+// navigator.language (the browser's own locale) explicitly rather than
+// relying on Intl's implicit-undefined-locale default, so a caller can always
+// know which locale actually formatted a given string.
+
+const KEY = '247420:locale';
+
+function isBrowser() {
+    return typeof navigator !== 'undefined' && typeof window !== 'undefined';
+}
+
+function readStored() {
+    try { return window.localStorage.getItem(KEY) || null; } catch { return null; }
+}
+
+export function getLocale() {
+    const stored = readStored();
+    if (stored) return stored;
+    if (isBrowser() && navigator.language) return navigator.language;
+    return 'en-US';
+}
+
+export function setLocale(locale) {
+    if (!isBrowser()) return locale;
+    try {
+        if (locale) window.localStorage.setItem(KEY, locale);
+        else window.localStorage.removeItem(KEY);
+    } catch { /* swallow: persistence is best-effort, locale still applies in-memory this session */ }
+    return locale;
+}
+
+function hour12Preference(locale) {
+    try { return Intl.DateTimeFormat(locale).resolvedOptions().hour12; }
+    catch { return undefined; }
+}
+
+// formatTime: replaces bare `new Date().toLocaleTimeString()` -- explicit
+// locale (never the implicit-undefined default) plus the locale's own
+// resolved hour12 preference (never hardcoded 12/24h).
+export function formatTime(date, locale = getLocale()) {
+    const hour12 = hour12Preference(locale);
+    try { return new Date(date).toLocaleTimeString(locale, hour12 === undefined ? undefined : { hour12 }); }
+    catch { return new Date(date).toLocaleTimeString(); }
+}
+
+export function formatDateTime(date, locale = getLocale()) {
+    const hour12 = hour12Preference(locale);
+    try { return new Date(date).toLocaleString(locale, hour12 === undefined ? undefined : { hour12 }); }
+    catch { return new Date(date).toLocaleString(); }
+}
+
+// formatNumber: replaces bare `n.toLocaleString()` -- explicit locale for
+// thousands-separator/decimal conventions that genuinely differ (e.g.
+// '1,234.5' en-US vs '1.234,5' de-DE).
+export function formatNumber(n, locale = getLocale()) {
+    try { return n.toLocaleString(locale); } catch { return String(n); }
+}
+
+const RTF_DIVISIONS = [
+    { amount: 60, unit: 'seconds' },
+    { amount: 60, unit: 'minutes' },
+    { amount: 24, unit: 'hours' },
+    { amount: 7, unit: 'days' },
+    { amount: 4.34524, unit: 'weeks' },
+    { amount: 12, unit: 'months' },
+    { amount: Infinity, unit: 'years' },
+];
+
+// formatRelativeTime: "2 hours ago" via the real Intl.RelativeTimeFormat,
+// never a hand-rolled string-concat implementation.
+export function formatRelativeTime(date, locale = getLocale(), now = Date.now()) {
+    let duration = (new Date(date).getTime() - now) / 1000;
+    try {
+        const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });
+        for (const division of RTF_DIVISIONS) {
+            if (Math.abs(duration) < division.amount) return rtf.format(Math.round(duration), division.unit);
+            duration /= division.amount;
+        }
+    } catch { /* fall through to the plain-time fallback below */ }
+    return formatTime(date, locale);
+}