anentrypoint-design 0.0.239 → 0.0.241

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.239",
+  "version": "0.0.241",
   "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/community.js

@@ -102,7 +102,7 @@ export function ChannelCategory({ id, name, channels = [], collapsed, activeId,
             onclick: () => onToggle && onToggle(id),
             oncontextmenu: onContextMenu ? (e) => { e.preventDefault(); onContextMenu(id, e.clientX, e.clientY); } : null
         },
-            h('svg', { class: 'cm-cat-arrow', viewBox: '0 0 24 24' }, h('path', { d: 'M7 10l5 5 5-5z' })),
+            h('span', { class: 'cm-cat-arrow' }, Icon('chevron-down')),
             h('span', { class: 'cm-cat-name' }, name),
             extraButton ? h('button', { class: 'cm-cat-extra', onclick: (e) => { e.stopPropagation(); extraButton.onClick && extraButton.onClick(id, e); }, 'aria-label': extraButton.title || 'Category action' }, extraButton.icon || extraButton.label || '+') : null,
             onAddChannel ? h('button', { class: 'cm-cat-add', onclick: (e) => { e.stopPropagation(); onAddChannel(id); }, 'aria-label': 'Add channel to ' + name }, '+') : null
@@ -157,7 +157,15 @@ export function UserPanel({ name, tag, color, muted, deafened, onMute, onDeafen,
     );
 }
 
-export function ChannelSidebar({ serverName, channels = [], categories = [], activeId, collapsedCats, onChannelClick, onCategoryToggle, onAddChannel, onChannelContext, userPanelProps } = {}) {
+// Skeleton rows for a cold channel-list load — reuses the kit-wide .ds-skel
+// shimmer primitive (sessions.js / files.js) rather than a bare spinner.
+function ChannelListSkeleton({ rows = 6 } = {}) {
+    return h('div', { class: 'cm-channel-list cm-channel-skeleton', 'aria-hidden': 'true' },
+        ...Array.from({ length: rows }, (_, i) => h('div', { key: 'csk' + i, class: 'cm-channel-item-skeleton' },
+            h('span', { class: 'ds-skel ds-skel-icon' }), h('span', { class: 'ds-skel ds-skel-title' }))));
+}
+
+export function ChannelSidebar({ serverName, channels = [], categories = [], activeId, collapsedCats, onChannelClick, onCategoryToggle, onAddChannel, onChannelContext, userPanelProps, loading = false } = {}) {
     const collapsed = collapsedCats || new Set();
     const uncategorized = channels.filter(c => !c.categoryId || !categories.find(cat => cat.id === c.categoryId));
     const sorted = [...categories].sort((a, b) => (a.position || 0) - (b.position || 0));
@@ -165,9 +173,11 @@ export function ChannelSidebar({ serverName, channels = [], categories = [], act
         h('div', { class: 'cm-server-header' },
             h('span', { class: 'cm-server-header-name' }, serverName || 'Server'),
         ),
-        h('div', { class: 'cm-channel-list' },
+        loading ? ChannelListSkeleton() : h('div', { class: 'cm-channel-list' },
             (sorted.length === 0 && uncategorized.length === 0)
-                ? h('div', { class: 'cm-channel-empty' }, 'no channels yet')
+                ? h('div', { class: 'cm-channel-empty', role: 'status' },
+                    Icon('hash', { size: 20 }),
+                    h('span', { class: 'cm-channel-empty-text' }, 'no channels yet — add one to get this server started'))
                 : null,
             ...sorted.map(cat => ChannelCategory({
                 id: cat.id,
@@ -204,11 +214,22 @@ export function MemberItem({ identity, name, color, status = 'online' } = {}) {
     );
 }
 
-export function MemberList({ categories = [], open } = {}) {
+// Skeleton rows for a cold member-list load, matching FileSkeleton/session
+// skeleton shape (icon + title placeholder), never a bare spinner.
+function MemberListSkeleton({ rows = 6 } = {}) {
+    return h('div', { class: 'cm-member-list cm-member-skeleton open', 'aria-hidden': 'true' },
+        ...Array.from({ length: rows }, (_, i) => h('div', { key: 'msk' + i, class: 'cm-member-item-skeleton' },
+            h('span', { class: 'ds-skel ds-skel-icon' }), h('span', { class: 'ds-skel ds-skel-title' }))));
+}
+
+export function MemberList({ categories = [], open, loading = false } = {}) {
+    if (loading) return MemberListSkeleton();
     const total = categories.reduce((n, cat) => n + (cat.members ? cat.members.length : 0), 0);
     return h('div', { class: 'cm-member-list' + (open ? ' open' : '') },
         total === 0
-            ? h('div', { key: '_empty', class: 'cm-member-empty' }, 'no members')
+            ? h('div', { key: '_empty', class: 'cm-member-empty', role: 'status' },
+                Icon('members', { size: 20 }),
+                h('span', { class: 'cm-member-empty-text' }, 'no members in this channel yet'))
             : null,
         ...categories.flatMap(cat => [
             h('div', { class: 'cm-member-category', key: cat.label }, `${cat.label} — ${cat.members.length}`),
@@ -310,7 +331,16 @@ function fmtRelTime(ts) {
     return Math.floor(hr / 24) + 'd';
 }
 
-export function ThreadPanel({ threads = [], activeId = null, title = 'Threads', onSelect, onCreate, onClose } = {}) {
+// Skeleton rows for a cold thread/post-list load. Two lines per row (title +
+// meta) mirrors cm-tp-item/cm-forum-item's actual shape so the shimmer
+// doesn't jump on load. Reuses the kit-wide .ds-skel shimmer primitive.
+function ListSkeleton({ cls, rows = 5 } = {}) {
+    return h('div', { class: cls + ' cm-list-skeleton', 'aria-hidden': 'true' },
+        ...Array.from({ length: rows }, (_, i) => h('div', { key: 'lsk' + i, class: 'cm-list-item-skeleton' },
+            h('span', { class: 'ds-skel ds-skel-title' }), h('span', { class: 'ds-skel ds-skel-meta' }))));
+}
+
+export function ThreadPanel({ threads = [], activeId = null, title = 'Threads', onSelect, onCreate, onClose, loading = false } = {}) {
     const list = Array.isArray(threads) ? threads : [];
     return h('div', { class: 'cm-thread-panel', role: 'complementary', 'aria-label': title },
         h('div', { class: 'cm-tp-head' },
@@ -320,7 +350,7 @@ export function ThreadPanel({ threads = [], activeId = null, title = 'Threads',
                 onClose ? h('button', { type: 'button', class: 'cm-tp-close', 'aria-label': 'close', title: 'Close', onclick: onClose }, Icon('x')) : null
             )
         ),
-        h('div', { class: 'cm-tp-list' },
+        loading ? ListSkeleton({ cls: 'cm-tp-list' }) : h('div', { class: 'cm-tp-list' },
             list.length
                 ? list.map(t => h('button', {
                     type: 'button', key: 'tp-' + t.id,
@@ -335,12 +365,14 @@ export function ThreadPanel({ threads = [], activeId = null, title = 'Threads',
                         t.time ? h('span', { class: 'cm-tp-item-time' }, fmtRelTime(t.time)) : null
                     )
                 ))
-                : h('div', { class: 'cm-tp-empty' }, 'No threads yet')
+                : h('div', { class: 'cm-tp-empty', role: 'status' },
+                    Icon('thread', { size: 20 }),
+                    h('span', { class: 'cm-tp-empty-text' }, onCreate ? 'no threads yet — start one' : 'no threads yet'))
         )
     );
 }
 
-export function ForumView({ posts = [], onSearch, onSort, onSelect, onNewPost } = {}) {
+export function ForumView({ posts = [], onSearch, onSort, onSelect, onNewPost, loading = false } = {}) {
     const list = Array.isArray(posts) ? posts : [];
     return h('div', { class: 'cm-forum', role: 'region', 'aria-label': 'forum' },
         h('div', { class: 'cm-forum-toolbar' },
@@ -359,7 +391,7 @@ export function ForumView({ posts = [], onSearch, onSort, onSelect, onNewPost }
             ),
             onNewPost ? h('button', { type: 'button', class: 'cm-forum-new', onclick: onNewPost }, 'New post') : null
         ),
-        h('div', { class: 'cm-forum-list' },
+        loading ? ListSkeleton({ cls: 'cm-forum-list' }) : h('div', { class: 'cm-forum-list' },
             list.length
                 ? list.map(p => h('button', {
                     type: 'button', key: 'fp-' + p.id, class: 'cm-forum-item',
@@ -379,7 +411,9 @@ export function ForumView({ posts = [], onSearch, onSort, onSelect, onNewPost }
                             : null
                     )
                 ))
-                : h('div', { class: 'cm-forum-empty' }, 'No posts yet')
+                : h('div', { class: 'cm-forum-empty', role: 'status' },
+                    Icon('forum', { size: 20 }),
+                    h('span', { class: 'cm-forum-empty-text' }, onNewPost ? 'no posts yet — start the discussion' : 'no posts yet'))
         )
     );
 }

package/src/components/content.js

@@ -128,7 +128,7 @@ export function Section({ title, eyebrow, children, id }) {
     );
 }
 
-export function Hero({ eyebrow, title, body, accent, badge, badgeCount, actions }) {
+export function Hero({ eyebrow, title, body, accent, actions }) {
     // Eyebrow + title share the title grid-area so the named-area layout stays
     // intact; body and actions occupy the offset lower columns.
     return h('div', { class: 'ds-hero' },
@@ -140,8 +140,7 @@ export function Hero({ eyebrow, title, body, accent, badge, badgeCount, actions
             body,
             accent ? h('span', { class: 'ds-hero-accent' }, ' ' + accent) : null
         ) : null,
-        actions ? h('div', { class: 'ds-hero-actions' }, ...(Array.isArray(actions) ? actions : [actions])) : null,
-        badge ? h('div', { class: 'ds-hero-badge' }, Panel({ title: badge, count: badgeCount, kind: 'inline', children: [] })) : null
+        actions ? h('div', { class: 'ds-hero-actions' }, ...(Array.isArray(actions) ? actions : [actions])) : null
     );
 }
 
@@ -169,7 +168,8 @@ export function Install({ cmd, copied, onCopy }) {
     );
 }
 
-export function Receipt({ rows = [] }) {
+export function Receipt({ rows = [], emptyText = 'nothing here yet' }) {
+    if (!rows.length) return h('div', { class: 'empty' }, emptyText);
     return h('table', { class: 'kv' },
         h('tbody', {}, ...rows.map(([k, v], i) =>
             h('tr', { key: i }, h('td', {}, k), h('td', {}, v))
@@ -177,7 +177,8 @@ export function Receipt({ rows = [] }) {
     );
 }
 
-export function Changelog({ entries = [] }) {
+export function Changelog({ entries = [], emptyText = 'no changelog entries yet' }) {
+    if (!entries.length) return h('div', { class: 'empty' }, emptyText);
     return Panel({
         kind: 'wide',
         children: entries.map((e, i) =>
@@ -242,7 +243,8 @@ export function Manifesto({ paragraphs = [], maxWidth }) {
     );
 }
 
-export function Kpi({ items = [] }) {
+export function Kpi({ items = [], emptyText = 'no metrics yet' }) {
+    if (!items.length) return h('div', { class: 'empty' }, emptyText);
     return h('div', { class: 'kpi' }, ...items.map(([n, l], i) =>
         h('div', { key: i, class: 'kpi-card' },
             h('div', { class: 'num' }, String(n)),

package/src/components/shell.js

@@ -87,7 +87,7 @@ export function Glyph({ children, color, size = 'base', label } = {}) {
 
 // Monochrome inline-SVG icons (stroke=currentColor) so chrome reads as one
 // coherent line-icon set instead of multicolor OS emoji. 16px box, 1.6 stroke.
-const ICON_PATHS = {
+export const ICON_PATHS = {
     mic: '<path d="M12 3a3 3 0 0 0-3 3v5a3 3 0 0 0 6 0V6a3 3 0 0 0-3-3z"/><path d="M5 11a7 7 0 0 0 14 0M12 18v3"/>',
     'mic-off': '<path d="M9 9v2a3 3 0 0 0 4.5 2.6M15 11V6a3 3 0 0 0-5.9-.8"/><path d="M5 11a7 7 0 0 0 11.5 5.4M12 18v3"/><path d="m4 4 16 16"/>',
     speaker: '<path d="M11 5 6 9H3v6h3l5 4z"/><path d="M15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13"/>',

package/src/kits/os/freddie-dashboard.css

@@ -59,7 +59,7 @@
 .fd-chat-config .fd-chat-field { display: flex; flex-direction: column; gap: var(--space-1, 4px); min-width: 120px; }
 .fd-chat-config .fd-chat-field > label { font-family: var(--os-mono, monospace); font-size: 10px; opacity: 0.6; letter-spacing: 0.05em; text-transform: uppercase; }
 .fd-chat-config .fd-chat-field > input,
-.fd-chat-config .fd-chat-field > select { width: 100%; box-sizing: border-box; padding: 6px 8px; background: var(--panel-1, transparent); color: var(--fg, inherit); border: 1px solid color-mix(in oklab, var(--fg) 14%, transparent); border-radius: 6px; font: inherit; font-size: 12px; }
+.fd-chat-config .fd-chat-field > select { width: 100%; box-sizing: border-box; padding: 6px 8px; background: var(--panel-1, transparent); color: var(--fg, inherit); border: 1px solid color-mix(in oklab, var(--fg) 14%, transparent); border-radius: var(--r-0); font: inherit; font-size: 12px; }
 .fd-chat-config .fd-chat-field > input:focus-visible,
 .fd-chat-config .fd-chat-field > select:focus-visible { outline: 2px solid var(--os-accent, #247420); outline-offset: 0; border-color: color-mix(in oklab, var(--os-accent, #247420) 60%, transparent); }
 .fd-chat-config .fd-chat-row { display: flex; gap: var(--space-2, 8px); flex-wrap: wrap; }
@@ -68,5 +68,5 @@
 .app-fd ds-chat.fd-dashboard-chat { flex: 1 1 auto; min-height: 280px; display: flex; flex-direction: column; overflow: hidden; }
 
 .fd-chat-actions { display: inline-flex; gap: var(--space-1, 4px); align-items: center; }
-.fd-chat-actions .btn-secondary { background: transparent; color: var(--danger, #c0392b); border: 1px solid color-mix(in oklab, var(--danger, #c0392b) 40%, transparent); cursor: pointer; padding: 2px 8px; border-radius: 4px; font: inherit; font-size: 12px; }
+.fd-chat-actions .btn-secondary { background: transparent; color: var(--danger, #c0392b); border: 1px solid color-mix(in oklab, var(--danger, #c0392b) 40%, transparent); cursor: pointer; padding: 2px 8px; border-radius: var(--r-0); font: inherit; font-size: 12px; }
 .fd-chat-actions .btn-secondary:hover { background: color-mix(in oklab, var(--danger, #c0392b) 10%, transparent); }

package/src/kits/os/icons.js

@@ -1,17 +1,39 @@
-export const icons = {
-    terminal: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M7 9l3 3-3 3M13 15h4"/></svg>',
-    browser: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 010 18M12 3a14 14 0 000 18"/></svg>',
-    canvas: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="14" rx="2"/><path d="M3 17l6-5 4 3 5-4 3 2"/></svg>',
-    files: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6a2 2 0 012-2h4l2 2h8a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2z"/></svg>',
-    monitor: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12l4-8 4 14 4-10 4 8 2-3"/></svg>',
-    validator: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4L19 6"/></svg>',
-    about: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 8v.01M11 12h1v5h1"/></svg>',
-    apps: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></svg>',
-    plus: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>',
-    home: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6h16M4 12h16M4 18h16"/></svg>',
-    xdisplay: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="13" rx="1.5"/><path d="M8 21h8M12 17v4M9 9l6 4M15 9l-6 4"/></svg>',
-    close: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6l12 12M18 6l-12 12"/></svg>',
-    chat: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5h16v11H8l-4 4z"/><path d="M8 9h8M8 12h6"/></svg>',
-    tools: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M14 7l3-3 3 3-3 3-3-3zM7 14l3 3-7 7-3-3 7-7zM5 7l3-3M14 14l6 6"/></svg>',
-    freddie: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2M8 12a4 4 0 008 0"/></svg>',
+import { ICON_PATHS } from '../../components/shell.js';
+
+// os-window-manager app icons. Concepts here (terminal/browser/canvas/monitor/
+// apps/xdisplay/tools/freddie) are OS-app glyphs with no equivalent in the
+// shared ICON_PATHS UI-icon set, so they keep their own path data — but every
+// entry renders through iconMarkup()'s attribute contract (viewBox 0 0 24 24,
+// stroke=currentColor, shared --ds-icon-stroke var) instead of a second
+// hardcoded stroke-width, so this module can't drift from the system's
+// visual weight. Where a concept already exists in ICON_PATHS (close/files/
+// validator/about/apps/home/chat), reuse that entry's path data directly.
+const OS_PATHS = {
+    terminal: '<rect x="3" y="4" width="18" height="16" rx="2"/><path d="M7 9l3 3-3 3M13 15h4"/>',
+    browser: '<circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 010 18M12 3a14 14 0 000 18"/>',
+    canvas: '<rect x="3" y="3" width="18" height="14" rx="2"/><path d="M3 17l6-5 4 3 5-4 3 2"/>',
+    files: ICON_PATHS.folder,
+    monitor: '<path d="M3 12l4-8 4 14 4-10 4 8 2-3"/>',
+    validator: ICON_PATHS.check,
+    about: ICON_PATHS.info,
+    apps: ICON_PATHS.grid,
+    plus: '<path d="M12 5v14M5 12h14"/>',
+    home: ICON_PATHS.menu,
+    xdisplay: '<rect x="3" y="4" width="18" height="13" rx="1.5"/><path d="M8 21h8M12 17v4M9 9l6 4M15 9l-6 4"/>',
+    close: ICON_PATHS.x,
+    chat: ICON_PATHS.forum,
+    tools: '<path d="M14 7l3-3 3 3-3 3-3-3zM7 14l3 3-7 7-3-3 7-7zM5 7l3-3M14 14l6 6"/>',
+    freddie: '<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2M8 12a4 4 0 008 0"/>',
 };
+
+// iconMarkup() only resolves names already registered in the shared
+// ICON_PATHS table; this module's names are private to the os kit, so each
+// entry is rendered against the identical attr contract iconMarkup() uses
+// (viewBox/stroke/linecap/--ds-icon-stroke) rather than forking a second
+// stroke-width constant.
+export const icons = Object.fromEntries(
+    Object.entries(OS_PATHS).map(([name, inner]) => [
+        name,
+        `<svg class="ds-icon ds-icon-${name}" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="var(--ds-icon-stroke, 1.6)" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${inner}</svg>`
+    ])
+);

package/src/kits/os/theme.css

@@ -104,7 +104,7 @@ html, body {
     font: inherit;
     font-family: var(--os-font);
     font-size: 13px;
-    border-radius: 999px;
+    border-radius: var(--r-pill, 999px);
     transition: background 80ms ease, color 80ms ease;
     display: inline-flex;
     align-items: center;
@@ -173,7 +173,7 @@ html, body {
     border: none;
     background: var(--os-bg-1);
     color: var(--os-fg-2);
-    border-radius: 999px;
+    border-radius: var(--r-pill, 999px);
     padding: 6px 14px;
     font-size: 12px;
     font-family: var(--os-font);
@@ -575,7 +575,7 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
   z-index: 9050;
   background: color-mix(in oklab, var(--os-accent) 20%, transparent);
   border: 2px solid var(--os-accent);
-  border-radius: 8px;
+  border-radius: var(--r-0);
   /* Animate only geometry, never `all` — `transition: all` animated display/
    * opacity too, producing a one-frame ghost on show (jank-pass fix). */
   transition: left 80ms ease, top 80ms ease, width 80ms ease, height 80ms ease;
@@ -593,7 +593,7 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
   padding: 16px 20px;
   background: var(--os-bg-2);
   border: 1px solid var(--os-accent);
-  border-radius: 8px;
+  border-radius: var(--r-0);
   z-index: 9600;
   font-family: var(--ff-ui);
   color: var(--os-fg);
@@ -602,7 +602,7 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 }
 .ds-247420 .wm-switcher-item {
   padding: 8px 12px;
-  border-radius: 4px;
+  border-radius: var(--r-0);
   display: flex;
   align-items: center;
   gap: 10px;
@@ -664,7 +664,7 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 .ds-247420 .tb-sess-badge {
   display: inline-flex; align-items: center; justify-content: center;
   min-width: 16px; height: 14px; padding: 0 4px;
-  border-radius: 7px;
+  border-radius: var(--r-0);
   background: color-mix(in oklab, var(--fg) 14%, transparent);
   font-size: 9px; font-weight: 600; line-height: 1;
 }
@@ -708,7 +708,7 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 .tb-sess-modal {
   background: var(--bg);
   color: var(--fg);
-  border-radius: 12px;
+  border-radius: var(--r-1);
   box-shadow: var(--shadow-overlay);
   min-width: 320px; max-width: 480px;
   border: 1px solid color-mix(in oklab, var(--fg) 12%, transparent);
@@ -724,7 +724,7 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
   width: 100%; box-sizing: border-box;
   height: 32px; padding: 0 10px;
   border: 1px solid color-mix(in oklab, var(--fg) 20%, transparent);
-  border-radius: 6px;
+  border-radius: var(--r-0);
   background: color-mix(in oklab, var(--fg) 6%, var(--bg));
   color: inherit;
   font-family: inherit; font-size: 13px;
@@ -735,7 +735,7 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 .tb-sess-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid color-mix(in oklab, var(--fg) 8%, transparent); }
 .tb-sess-modal-btn {
   height: 28px; padding: 0 14px;
-  border-radius: 6px; border: 1px solid color-mix(in oklab, var(--fg) 20%, transparent);
+  border-radius: var(--r-0); border: 1px solid color-mix(in oklab, var(--fg) 20%, transparent);
   background: transparent; color: inherit;
   font-family: inherit; font-size: 12px; font-weight: 500; cursor: pointer;
   transition: background 120ms ease, border-color 120ms ease;
@@ -756,7 +756,7 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
   background: var(--bg);
   color: var(--fg);
   border: 1px solid color-mix(in oklab, var(--fg) 14%, transparent);
-  border-radius: 16px;
+  border-radius: var(--r-2);
   box-shadow: var(--shadow-3);
   padding: 32px 40px; text-align: center;
   font-family: var(--ff-ui);
@@ -767,7 +767,7 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 .tb-sess-empty-cta {
   height: 40px; padding: 0 24px;
   background: var(--os-accent); color: var(--on-color);
-  border: 0; border-radius: 999px;
+  border: 0; border-radius: var(--r-pill, 999px);
   font-family: inherit; font-size: 14px; font-weight: 600;
   cursor: pointer;
   transition: transform 120ms ease, box-shadow 120ms ease;
@@ -780,23 +780,23 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 .ds-247420 .tb-sessions-title { font-weight: 600; font-size: 14px; }
 .ds-247420 .tb-sessions-count { font-size: 12px; opacity: 0.6; margin-left: 4px; }
 .ds-247420 .tb-sessions-spacer { flex: 1; }
-.ds-247420 .tb-sessions-btn { height: 28px; padding: 0 12px; border-radius: 6px; border: 1px solid color-mix(in oklab, var(--fg) 20%, transparent); background: transparent; color: inherit; font-size: 12px; font-weight: 500; cursor: pointer; font-family: inherit; }
+.ds-247420 .tb-sessions-btn { height: 28px; padding: 0 12px; border-radius: var(--r-0); border: 1px solid color-mix(in oklab, var(--fg) 20%, transparent); background: transparent; color: inherit; font-size: 12px; font-weight: 500; cursor: pointer; font-family: inherit; }
 .ds-247420 .tb-sessions-btn:hover { background: color-mix(in oklab, var(--fg) 6%, transparent); }
 .ds-247420 .tb-sessions-btn.primary { background: var(--os-accent); color: var(--on-color); border-color: var(--os-accent); }
 .ds-247420 .tb-sessions-btn.danger { background: var(--danger); color: var(--on-color); border-color: var(--danger); }
 .ds-247420 .tb-sessions-btn:disabled { opacity: 0.4; cursor: not-allowed; }
 .ds-247420 .tb-sessions-grid { flex: 1; overflow: auto; padding: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; align-content: start; }
-.ds-247420 .tb-sessions-card { padding: 12px; border-radius: 10px; border: 1px solid color-mix(in oklab, var(--fg) 12%, transparent); background: color-mix(in oklab, var(--fg) 3%, transparent); display: flex; flex-direction: column; gap: 8px; transition: border-color 120ms ease, transform 120ms ease; }
+.ds-247420 .tb-sessions-card { padding: 12px; border-radius: var(--r-1, 10px); border: 1px solid color-mix(in oklab, var(--fg) 12%, transparent); background: color-mix(in oklab, var(--fg) 3%, transparent); display: flex; flex-direction: column; gap: 8px; transition: border-color 120ms ease, transform 120ms ease; }
 .ds-247420 .tb-sessions-card:hover { border-color: var(--os-accent); }
 .ds-247420 .tb-sessions-card.active { border-color: var(--os-accent); box-shadow: 0 0 0 2px color-mix(in oklab, var(--os-accent) 30%, transparent); }
 .ds-247420 .tb-sessions-card-head { display: flex; align-items: center; gap: 8px; }
 .ds-247420 .tb-sessions-card-check { width: 14px; height: 14px; cursor: pointer; flex: 0 0 14px; }
-.ds-247420 .tb-sessions-card-name { font-weight: 600; font-size: 13px; flex: 1; outline: none; padding: 2px 4px; border-radius: 4px; }
+.ds-247420 .tb-sessions-card-name { font-weight: 600; font-size: 13px; flex: 1; outline: none; padding: 2px 4px; border-radius: var(--r-0); }
 .ds-247420 .tb-sessions-card-name[contenteditable="true"] { background: color-mix(in oklab, var(--fg) 8%, transparent); }
 .ds-247420 .tb-sessions-card-id { font-family: var(--os-mono, monospace); font-size: 10px; opacity: 0.5; }
 .ds-247420 .tb-sessions-card-stats { font-size: 11px; opacity: 0.7; display: flex; gap: 12px; }
 .ds-247420 .tb-sessions-card-actions { display: flex; gap: 6px; margin-top: 4px; }
-.ds-247420 .tb-sessions-card-actions button { flex: 1; height: 24px; font-size: 11px; padding: 0 8px; border-radius: 4px; border: 1px solid color-mix(in oklab, var(--fg) 16%, transparent); background: transparent; color: inherit; cursor: pointer; font-family: inherit; }
+.ds-247420 .tb-sessions-card-actions button { flex: 1; height: 24px; font-size: 11px; padding: 0 8px; border-radius: var(--r-0); border: 1px solid color-mix(in oklab, var(--fg) 16%, transparent); background: transparent; color: inherit; cursor: pointer; font-family: inherit; }
 .ds-247420 .tb-sessions-card-actions button:hover { background: color-mix(in oklab, var(--fg) 6%, transparent); }
 .ds-247420 .tb-sessions-card-actions button.danger:hover { background: var(--danger); color: var(--on-color); border-color: var(--danger); }
 .ds-247420 .tb-sessions-empty-mid { padding: 40px; text-align: center; opacity: 0.6; font-size: 13px; }
@@ -846,7 +846,7 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 .ds-247420 .cc-field { display: flex; flex-direction: column; gap: .2em; }
 .ds-247420 .cc-field-label { font-size: 11px; opacity: .65; text-transform: lowercase; }
 .ds-247420 .cc-strip select,
-.ds-247420 .cc-strip input { font: inherit; font-size: 12px; padding: .3em .4em; width: 100%; box-sizing: border-box; background: var(--panel-1, transparent); color: var(--fg, inherit); border: 1px solid color-mix(in oklab, var(--fg) 18%, transparent); border-radius: 6px; }
+.ds-247420 .cc-strip input { font: inherit; font-size: 12px; padding: .3em .4em; width: 100%; box-sizing: border-box; background: var(--panel-1, transparent); color: var(--fg, inherit); border: 1px solid color-mix(in oklab, var(--fg) 18%, transparent); border-radius: var(--r-0); }
 .ds-247420 .cc-acp-mode-wrap { display: flex; align-items: center; gap: .4em; }
 .ds-247420 .cc-acp-mode-wrap select { flex: 1; }
 .ds-247420 .cc-acp-status { opacity: .5; font-size: 13px; }
@@ -865,7 +865,7 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 .ds-247420 .fsb-crumb { cursor: pointer; opacity: .75; text-decoration: none; color: inherit; }
 .ds-247420 .fsb-crumb:hover { opacity: 1; text-decoration: underline; }
 .ds-247420 .fsb-crumb-sep { opacity: .4; }
-.ds-247420 .fsb-btn { all: unset; cursor: pointer; padding: .3em .55em; border: 1px solid color-mix(in oklab, var(--fg) 18%, transparent); border-radius: 6px; opacity: .85; }
+.ds-247420 .fsb-btn { all: unset; cursor: pointer; padding: .3em .55em; border: 1px solid color-mix(in oklab, var(--fg) 18%, transparent); border-radius: var(--r-0); opacity: .85; }
 .ds-247420 .fsb-btn:hover { opacity: 1; background: color-mix(in oklab, var(--fg) 6%, transparent); }
 .ds-247420 .fsb-list { flex: 1; min-height: 0; overflow: auto; padding: .3em 0; }
 .ds-247420 .fsb-row { display: flex; align-items: center; gap: .6em; padding: .35em .7em; cursor: pointer; border: 0; }
@@ -880,7 +880,7 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 .ds-247420 .fsb-row:hover .fsb-actions,
 .ds-247420 .fsb-row:focus-within .fsb-actions { opacity: 1; }
 @media (hover: none) { .ds-247420 .fsb-actions { opacity: 1; } }
-.ds-247420 .fsb-act { all: unset; cursor: pointer; padding: .1em .35em; border-radius: 5px; opacity: .7; font-size: 12px; }
+.ds-247420 .fsb-act { all: unset; cursor: pointer; padding: .1em .35em; border-radius: var(--r-0); opacity: .7; font-size: 12px; }
 .ds-247420 .fsb-act:hover { opacity: 1; background: color-mix(in oklab, var(--fg) 12%, transparent); }
 .ds-247420 .fsb-empty { opacity: .5; padding: 1.5em; text-align: center; font-style: italic; }
 .ds-247420 .fsb-view { flex: 1; min-height: 0; overflow: auto; margin: 0; padding: .7em; white-space: pre-wrap; word-break: break-word; font: 12px/1.5 var(--os-mono, ui-monospace, monospace); background: var(--panel-1, transparent); }
@@ -893,16 +893,16 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 .ds-247420 .wm-canvas { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
 
 /* ---- wm context menu (was: docs/wm.js showWindowMenu cssText) ---- */
-.ds-247420 .wm-context-menu { position: fixed; background: var(--panel-2, #1a1a1a); border: 1px solid color-mix(in oklab, var(--fg) 18%, transparent); border-radius: 6px; z-index: 9700; font-family: var(--ff-ui); color: var(--fg, #fff); min-width: 140px; box-shadow: 0 8px 32px rgba(0, 0, 0, .35); padding: 4px; }
-.ds-247420 .wm-context-menu-item { display: block; width: 100%; padding: 7px 10px; border: none; border-radius: 4px; background: none; color: inherit; font-family: inherit; text-align: left; cursor: pointer; font-size: 13px; }
+.ds-247420 .wm-context-menu { position: fixed; background: var(--panel-2, #1a1a1a); border: 1px solid color-mix(in oklab, var(--fg) 18%, transparent); border-radius: var(--r-0); z-index: 9700; font-family: var(--ff-ui); color: var(--fg, #fff); min-width: 140px; box-shadow: 0 8px 32px rgba(0, 0, 0, .35); padding: 4px; }
+.ds-247420 .wm-context-menu-item { display: block; width: 100%; padding: 7px 10px; border: none; border-radius: var(--r-0); background: none; color: inherit; font-family: inherit; text-align: left; cursor: pointer; font-size: 13px; }
 .ds-247420 .wm-context-menu-item:hover { background: color-mix(in oklab, var(--fg) 8%, transparent); }
 
 /* ---- todo app (was: docs/apps.js todo-app cssText) ---- */
 .ds-247420 .tb-todo-bar { display: flex; gap: 6px; margin-bottom: 8px; }
-.ds-247420 .tb-todo-input { flex: 1; padding: 5px 8px; border: 1px solid color-mix(in oklab, var(--fg) 18%, transparent); border-radius: 4px; font: inherit; background: var(--panel-1, transparent); color: var(--fg, inherit); }
+.ds-247420 .tb-todo-input { flex: 1; padding: 5px 8px; border: 1px solid color-mix(in oklab, var(--fg) 18%, transparent); border-radius: var(--r-0); font: inherit; background: var(--panel-1, transparent); color: var(--fg, inherit); }
 .ds-247420 .tb-todo-list { list-style: none; padding: 0; margin: 6px 0; }
 .ds-247420 .tb-todo-footer { display: flex; gap: 8px; align-items: center; margin-top: 6px; font-size: 11px; }
-.ds-247420 .tb-todo-status { margin-top: 10px; font-size: 11px; color: color-mix(in oklab, var(--fg) 55%, transparent); padding: 6px 8px; background: var(--panel-1, transparent); border-radius: 4px; min-height: 14px; }
+.ds-247420 .tb-todo-status { margin-top: 10px; font-size: 11px; color: color-mix(in oklab, var(--fg) 55%, transparent); padding: 6px 8px; background: var(--panel-1, transparent); border-radius: var(--r-0); min-height: 14px; }
 .ds-247420 .tb-todo-item { display: flex; gap: 8px; align-items: center; padding: 5px 6px; border-bottom: 1px solid color-mix(in oklab, var(--fg) 8%, transparent); }
 .ds-247420 .tb-todo-text { flex: 1; }
 .ds-247420 .tb-todo-text.is-done { text-decoration: line-through; color: color-mix(in oklab, var(--fg) 45%, transparent); }
@@ -916,7 +916,7 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 .ds-247420 .fk-title { font-weight: 600; margin-bottom: 8px; }
 .ds-247420 .fk-nim-wrap { display: flex; gap: 6px; align-items: center; margin: 4px 0 10px 0; }
 .ds-247420 .fk-nim-in { font-family: var(--os-mono, monospace); font-size: 11px; padding: 2px 4px; flex: 1; }
-.ds-247420 .fk-badge { font-size: 10px; padding: 2px 6px; border: 1px solid color-mix(in oklab, var(--fg) 18%, transparent); border-radius: 3px; color: var(--os-accent, #247420); }
+.ds-247420 .fk-badge { font-size: 10px; padding: 2px 6px; border: 1px solid color-mix(in oklab, var(--fg) 18%, transparent); border-radius: var(--r-hair); color: var(--os-accent, #247420); }
 .ds-247420 .fk-agent-title,
 .ds-247420 .fk-host-title { margin-top: 14px; font-size: 11px; color: color-mix(in oklab, var(--fg) 60%, transparent); }
 .ds-247420 .fk-summary { font-size: 10px; color: color-mix(in oklab, var(--fg) 60%, transparent); margin: 6px 0; }
@@ -935,7 +935,7 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 .ds-247420 .chat-msg.system .chat-bubble { background: transparent; border: 0; font-style: italic; opacity: 0.65; font-size: 12px; padding: 4px 8px; text-align: center; max-width: 100%; }
 
 /* Tool-call card — collapsible details with status icon + name + label. */
-.ds-247420 .chat-tool { display: block; background: var(--panel-1, color-mix(in oklab, var(--fg) 4%, transparent)); border: 1px solid color-mix(in oklab, var(--fg) 14%, transparent); border-radius: 8px; padding: 0; max-width: min(640px, 92%); overflow: hidden; font-size: 12px; }
+.ds-247420 .chat-tool { display: block; background: var(--panel-1, color-mix(in oklab, var(--fg) 4%, transparent)); border: 1px solid color-mix(in oklab, var(--fg) 14%, transparent); border-radius: var(--r-0); padding: 0; max-width: min(640px, 92%); overflow: hidden; font-size: 12px; }
 .ds-247420 .chat-tool[open] { background: var(--panel-1, color-mix(in oklab, var(--fg) 6%, transparent)); }
 .ds-247420 .chat-tool.tool-error { border-color: color-mix(in oklab, var(--danger, #c0392b) 60%, transparent); }
 .ds-247420 .chat-tool.tool-done { border-color: color-mix(in oklab, var(--os-accent, #247420) 35%, transparent); }
@@ -952,7 +952,7 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 .ds-247420 .chat-tool-body { padding: 4px 10px 10px; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid color-mix(in oklab, var(--fg) 8%, transparent); }
 .ds-247420 .chat-tool-section { display: flex; flex-direction: column; gap: 3px; }
 .ds-247420 .chat-tool-section-label { font-size: 10px; opacity: 0.5; text-transform: lowercase; letter-spacing: 0.05em; }
-.ds-247420 .chat-tool-pre { margin: 0; padding: 6px 8px; background: color-mix(in oklab, var(--fg) 4%, transparent); border-radius: 4px; max-height: 200px; overflow: auto; font: 11px/1.45 var(--os-mono, ui-monospace, monospace); white-space: pre-wrap; word-break: break-word; }
+.ds-247420 .chat-tool-pre { margin: 0; padding: 6px 8px; background: color-mix(in oklab, var(--fg) 4%, transparent); border-radius: var(--r-0); max-height: 200px; overflow: auto; font: 11px/1.45 var(--os-mono, ui-monospace, monospace); white-space: pre-wrap; word-break: break-word; }
 .ds-247420 .chat-tool-pre.is-error { color: var(--danger, #c0392b); }
 
 /* Thinking indicator — typing dots + label, transient (assistant-side). */
@@ -969,7 +969,7 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 
 /* Empty-state suggestion chips — clickable prompts. */
 .ds-247420 .chat-empty-suggestions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 12px; max-width: 480px; }
-.ds-247420 .chat-empty-suggestion { all: unset; cursor: pointer; font-size: 12px; padding: 6px 10px; border: 1px solid color-mix(in oklab, var(--fg) 18%, transparent); border-radius: 999px; background: var(--panel-1, transparent); transition: background 120ms ease, border-color 120ms ease; }
+.ds-247420 .chat-empty-suggestion { all: unset; cursor: pointer; font-size: 12px; padding: 6px 10px; border: 1px solid color-mix(in oklab, var(--fg) 18%, transparent); border-radius: var(--r-pill, 999px); background: var(--panel-1, transparent); transition: background 120ms ease, border-color 120ms ease; }
 .ds-247420 .chat-empty-suggestion:hover { background: color-mix(in oklab, var(--os-accent, #247420) 10%, transparent); border-color: var(--os-accent, #247420); }
 .ds-247420 .chat-empty-suggestion:focus-visible { outline: 2px solid var(--os-accent, #247420); outline-offset: 2px; }
 
@@ -1103,7 +1103,7 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 .ds-247420 .chat-thread::-webkit-scrollbar-track { background: transparent; }
 .ds-247420 .chat-thread::-webkit-scrollbar-thumb {
   background: color-mix(in oklab, var(--fg) 18%, transparent);
-  border-radius: 4px;
+  border-radius: var(--r-0);
 }
 .ds-247420 .chat-thread::-webkit-scrollbar-thumb:hover {
   background: color-mix(in oklab, var(--fg) 30%, transparent);
@@ -1161,7 +1161,7 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
   background: var(--panel-1, color-mix(in oklab, var(--fg) 5%, transparent));
   color: var(--fg);
   border: 1px solid color-mix(in oklab, var(--fg) 8%, transparent);
-  border-radius: 12px;
+  border-radius: var(--r-1);
   padding: 8px 12px;
   font-size: 14px;
   line-height: 1.5;
@@ -1185,7 +1185,7 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
   margin: 6px 0 0;
   padding: 8px 10px;
   background: color-mix(in oklab, var(--fg) 6%, transparent);
-  border-radius: 6px;
+  border-radius: var(--r-0);
   max-height: 320px;
   overflow: auto;
   white-space: pre;
@@ -1252,7 +1252,7 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
   background: var(--panel-1, color-mix(in oklab, var(--fg) 5%, transparent));
   color: var(--fg);
   border: 1px solid color-mix(in oklab, var(--fg) 14%, transparent);
-  border-radius: 8px;
+  border-radius: var(--r-0);
   padding: 8px 10px;
   resize: none;
   outline: none;
@@ -1283,7 +1283,7 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
   justify-content: center;
   width: 32px;
   height: 32px;
-  border-radius: 6px;
+  border-radius: var(--r-0);
   color: var(--fg);
   opacity: 0.65;
   transition: background-color 120ms ease, opacity 120ms ease;
@@ -1303,7 +1303,7 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
   margin-left: auto;
   width: 36px;
   height: 32px;
-  border-radius: 6px;
+  border-radius: var(--r-0);
   background: var(--os-accent, #247420);
   color: var(--on-color, #fff);
   display: inline-flex;
@@ -1349,7 +1349,7 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 }
 .ds-247420 .gm-recall-hit {
   border: 1px solid color-mix(in oklab, var(--fg) 14%, transparent);
-  border-radius: 6px;
+  border-radius: var(--r-0);
   padding: 8px 10px;
   background: color-mix(in oklab, var(--bg) 92%, var(--fg) 2%);
 }

package/src/kits/spoint/loading-screen.css

@@ -45,7 +45,7 @@
 }
 .sp-loading-bar-track {
   height: 6px;
-  border-radius: 3px;
+  border-radius: var(--r-hair);
   background: var(--bg-3);
   overflow: hidden;
 }