anentrypoint-design 0.0.379 → 0.0.381

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.379",
+  "version": "0.0.381",
   "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/content.js

@@ -538,14 +538,23 @@ export function ProcessRegistryTable({ processes = [], emptyText = 'no live proc
 
 export function HomeView({ state = {}, onNav, onToggleWork, works = [], posts = [], manifesto = [], currentlyShipping } = {}) {
     return [
+        // The page's one deliberate kicker. 'an entrypoint' is the collective's
+        // name-as-tagline — it says something the <h1> does not, and it is the
+        // masthead position where a print eyebrow actually belongs. The sections
+        // below intentionally carry NO eyebrow: each has a heading that already
+        // names it, so a kicker there would only restate the <h3> one word
+        // shorter. Do not add eyebrows to the sibling sections to "match" this.
         Hero({
             eyebrow: 'an entrypoint',
             title: 'Small, weird, useful tools — built in public.',
             body: '247420 is a creative collective of eight, scattered across three timezones. We have been shipping open-source tools for the web since 2018.',
             accent: 'Some become the future. Most don\'t. That\'s the deal.'
         }),
+        // Titleless section: promoted its former eyebrow to the actual heading
+        // rather than leaving a kicker hovering over an unnamed panel. The label
+        // was carrying the section's only name, so it became the <h3>.
         currentlyShipping ? Section({
-            eyebrow: 'currently shipping',
+            title: 'currently shipping',
             children: Panel({
                 kind: 'wide',
                 children: currentlyShipping.map((row, i) => {
@@ -560,15 +569,15 @@ export function HomeView({ state = {}, onNav, onToggleWork, works = [], posts =
             })
         }) : null,
         works.length ? Section({
-            eyebrow: 'works', title: 'Everything else.',
+            title: 'Everything else.',
             children: WorksList({ works, openedIndex: state.opened ?? -1, onToggle: onToggleWork })
         }) : null,
         posts.length ? Section({
-            eyebrow: 'writing', title: 'When we have something to say.',
+            title: 'When we have something to say.',
             children: WritingList({ posts })
         }) : null,
         manifesto.length ? Section({
-            eyebrow: 'who\'s here', title: 'Eight people, three timezones, one ongoing conversation.',
+            title: 'Eight people, three timezones, one ongoing conversation.',
             children: Manifesto({ paragraphs: manifesto })
         }) : null
     ].filter(Boolean);

package/src/components/freddie/helpers.js

@@ -10,6 +10,13 @@
 import * as webjsx from '../../../vendor/webjsx/index.js';
 const h = webjsx.createElement;
 
+// The ONE eyebrow on the freddie surface, and it earns it by being the only
+// label that varies: `freddie · <id>` names the specific unimplemented route,
+// which is the whole point of a stub — the reader needs to know WHICH page
+// failed to resolve, and the <h2> below only shows a human title. The real
+// freddie pages (src/components/freddie.js) deliberately carry NO eyebrow:
+// there, the kicker was the constant string 'freddie' on all 22 headers, which
+// named nothing the topbar/crumb did not already say. Do not add siblings.
 export function renderPageStub({ id, title }) {
     return h('div', { class: 'ds-freddie-stub' },
         h('span', { class: 'eyebrow' }, 'freddie · ' + id),

package/src/components/freddie.js

@@ -80,7 +80,7 @@ export const home = makePage((ctx) => {
         const tools = ctx.host?.pi?.tools?.size ?? s.toolsCount ?? '—';
         const skills = ctx.host?.pi?.skills?.size ?? s.skillsCount ?? '—';
         return [
-            PageHeader({ eyebrow: 'freddie', title: 'dashboard', lede: 'agent harness · live overview' }),
+            PageHeader({ title: 'dashboard', lede: 'agent harness · live overview' }),
             Kpi({ items: [
                 [tools, 'tools'],
                 [skills, 'skills'],
@@ -315,7 +315,7 @@ export const voice = makePage((ctx) => {
         const v = s.voice;
         const enabled = v && (v.enabled || v.transcription || v.tts);
         return [
-            PageHeader({ eyebrow: 'freddie', title: 'voice', lede: 'voice surfaces', right: enabled ? Chip({ tone: 'ok', children: 'enabled' }) : Chip({ tone: 'neutral', children: 'not configured' }) }),
+            PageHeader({ title: 'voice', lede: 'voice surfaces', right: enabled ? Chip({ tone: 'ok', children: 'enabled' }) : Chip({ tone: 'neutral', children: 'not configured' }) }),
             enabled
                 ? section('backends', Table({ headers: ['capability', 'status'], rows: [['transcription', v.transcription ? Chip({ tone: 'ok', children: 'on' }) : Chip({ tone: 'neutral', children: 'off' })], ['tts', v.tts ? Chip({ tone: 'ok', children: 'on' }) : Chip({ tone: 'neutral', children: 'off' })]] }))
                 : section('status', emptyState('no voice backend wired in this build. configure a transcription/tts plugin to enable.')),
@@ -349,7 +349,7 @@ export const sessions = makePage((ctx) => {
         if (s.error && !s.list) return errorState(s.error, load);
         const list = Array.isArray(s.list) ? s.list : [];
         return [
-            PageHeader({ eyebrow: 'freddie', title: 'sessions', lede: list.length + ' sessions', right: refreshBtn(refresh, s.refreshing) }),
+            PageHeader({ title: 'sessions', lede: list.length + ' sessions', right: refreshBtn(refresh, s.refreshing) }),
             s.error && s.list ? refreshError(s.error) : null,
             SearchInput({ value: s.q, label: 'search sessions', placeholder: 'search messages…', onInput: (v) => { s.q = v; }, onSubmit: (v) => search(v) }),
             section('sessions',
@@ -392,7 +392,7 @@ export const projects = makePage((ctx) => {
         const d = s.data || {}; const list = d.projects || [];
         const activeName = (d.active && d.active.name) || d.active || 'default';
         return [
-            PageHeader({ eyebrow: 'freddie', title: 'projects', lede: 'isolated workspaces · active: ' + activeName }),
+            PageHeader({ title: 'projects', lede: 'isolated workspaces · active: ' + activeName }),
             noteAlert(s.note),
             section('projects',
                 list.length ? list.map((p, i) => Row({
@@ -421,7 +421,7 @@ export const agents = makePage((ctx) => {
         if (s.error && !s.data) return errorState(s.error, load);
         const d = s.data || {};
         return [
-            PageHeader({ eyebrow: 'freddie', title: 'agents', lede: 'live agent activity' }),
+            PageHeader({ title: 'agents', lede: 'live agent activity' }),
             s.error && s.data ? refreshError(s.error) : null,
             Kpi({ items: [[d.count ?? 0, 'active'], [d.turns ?? 0, 'total turns'], [d.last_activity ? fmtAgo(d.last_activity) : '—', 'last activity']] }),
             section('detail', Table({ headers: ['field', 'value'], rows: Object.entries(d).map(([k, v]) => [k, String(v)]) })),
@@ -450,7 +450,7 @@ export const analytics = makePage((ctx) => {
         const ok = samp.filter(x => x && x.available !== false).length;
         const sum = s.avail?.summary || {};
         return [
-            PageHeader({ eyebrow: 'freddie', title: 'analytics', lede: 'provider availability & sampler health' }),
+            PageHeader({ title: 'analytics', lede: 'provider availability & sampler health' }),
             s.error && (s.sampler || s.avail) ? refreshError(s.error) : null,
             Kpi({ items: [[ok + '/' + samp.length, 'providers up'], [sum.total_models ?? '—', 'models'], [sum.usable_in_any_mode ?? '—', 'usable']] }),
             section('sampler', samp.length ? Table({ headers: ['provider', 'available', 'fails'], rows: Object.entries(s.sampler.status).map(([k, v]) => [k, v.available === false ? 'no' : 'yes', String(v.failCount ?? 0)]) }) : emptyState('no sampler data')),
@@ -482,7 +482,7 @@ export const models = makePage((ctx) => {
     return () => {
         const s = ctx.state;
         return [
-            PageHeader({ eyebrow: 'freddie', title: 'models', lede: s.data ? (s.data.summary?.total_models ?? 0) + ' models across ' + (s.data.summary?.total_providers ?? 0) + ' providers' : 'model availability matrix' }),
+            PageHeader({ title: 'models', lede: s.data ? (s.data.summary?.total_models ?? 0) + ' models across ' + (s.data.summary?.total_providers ?? 0) + ' providers' : 'model availability matrix' }),
             ModelsConfig({
                 data: s.data, loading: s.loading, error: s.error,
                 selectedProviderId: s.selectedProviderId, onSelectProvider: (id) => ctx.set({ selectedProviderId: id, selectedModel: null }),
@@ -514,7 +514,7 @@ export const cron = makePage((ctx) => {
         if (s.error && !s.list) return errorState(s.error, load);
         const list = Array.isArray(s.list) ? s.list : [];
         return [
-            PageHeader({ eyebrow: 'freddie', title: 'cron', lede: list.length + ' scheduled jobs' }),
+            PageHeader({ title: 'cron', lede: list.length + ' scheduled jobs' }),
             noteAlert(s.note),
             section('jobs', list.length ? list.map((j, i) => Row({
                 key: i, code: j.enabled ? Icon('play') : Icon('pause'), title: j.cron, sub: trunc(j.prompt, TRUNC_SUB).text,
@@ -553,7 +553,7 @@ export const skills = makePage((ctx) => {
             enabled: skillState[sk.name] !== false,
         }));
         return [
-            PageHeader({ eyebrow: 'freddie', title: 'skills', lede: mapped.length + ' skills' }),
+            PageHeader({ title: 'skills', lede: mapped.length + ' skills' }),
             SkillsConfig({
                 skills: mapped, selected: s.selected, loading: s.loading, error: s.error,
                 busyName: s.busyName, query: s.query, onQuery: (q) => ctx.set({ query: q }),
@@ -577,7 +577,7 @@ export const plugins = makePage((ctx) => {
         const s = ctx.state;
         const list = Array.isArray(s.list) ? s.list : (s.list?.plugins || []);
         return [
-            PageHeader({ eyebrow: 'freddie', title: 'plugins', lede: list.length + ' plugins loaded' }),
+            PageHeader({ title: 'plugins', lede: list.length + ' plugins loaded' }),
             PluginsConfig({
                 plugins: list, selected: s.selected, loading: s.loading, error: s.error,
                 onSelect: (name) => ctx.set({ selected: s.selected === name ? null : name }),
@@ -620,7 +620,7 @@ export const config = makePage((ctx) => {
         const skinList = Array.isArray(s.skins) ? s.skins : (s.skins?.skins || s.skins?.available || []);
         const activeSkin = cfg.skin || s.skins?.active || '';
         return [
-            PageHeader({ eyebrow: 'freddie', title: 'config', lede: 'runtime configuration' }),
+            PageHeader({ title: 'config', lede: 'runtime configuration' }),
             noteAlert(s.note),
             liveRegion(s.busy ? 'saving configuration' : ''),
             nested.length ? h('div', { class: 'ds-alert ds-alert-info', role: 'note' },
@@ -676,7 +676,7 @@ export const env = makePage((ctx) => {
         const providerEnvs = new Set(auth.map(a => a.env));
         const otherRows = vars.filter(v => !providerEnvs.has(v.key)).map(v => [v.key, v.set ? Chip({ tone: 'ok', children: v.source || 'set' }) : Chip({ tone: 'neutral', children: 'unset' })]);
         return [
-            PageHeader({ eyebrow: 'freddie', title: 'keys', lede: 'provider api keys · stored locally, never displayed' }),
+            PageHeader({ title: 'keys', lede: 'provider api keys · stored locally, never displayed' }),
             noteAlert(s.note),
             section('provider keys',
                 auth.length ? auth.map((a, i) => Row({
@@ -707,7 +707,7 @@ export const tools = makePage((ctx) => {
         const groups = {};
         for (const t of list) { const g = t.toolset || 'core'; (groups[g] = groups[g] || []).push(t); }
         return [
-            PageHeader({ eyebrow: 'freddie', title: 'tools', lede: list.length + ' tools' }),
+            PageHeader({ title: 'tools', lede: list.length + ' tools' }),
             SearchInput({ value: s.q, label: 'filter tools', placeholder: 'filter tools…', onInput: (v) => ctx.set({ q: v }) }),
             ...Object.entries(groups).map(([g, ts]) => section(g + ' · ' + ts.length, ts.map((t, i) => h('div', { key: i },
                 Row({ title: t.name, sub: trunc(t.schema?.description || t.description, TRUNC_DESC).text, onClick: () => ctx.set({ open: ctx.state.open === t.name ? null : t.name }), active: ctx.state.open === t.name }),
@@ -733,7 +733,7 @@ export const batch = makePage((ctx) => {
     return () => {
         const s = ctx.state;
         return [
-            PageHeader({ eyebrow: 'freddie', title: 'batch', lede: 'parallel prompt runner' }),
+            PageHeader({ title: 'batch', lede: 'parallel prompt runner' }),
             noteAlert(s.note),
             section('prompts',
                 TextField({ label: 'prompts (one per line)', value: s.prompts, multiline: true, rows: 6, onInput: (v) => { s.prompts = v; } }),
@@ -767,7 +767,7 @@ export const gateway = makePage((ctx) => {
         const platforms = d.platforms || d;
         const rows = Object.entries(platforms).map(([k, v]) => [k, typeof v === 'object' ? (v.running || v.up ? Chip({ tone: 'ok', children: 'up' }) : Chip({ tone: 'miss', children: 'down' })) : String(v)]);
         return [
-            PageHeader({ eyebrow: 'freddie', title: 'gateway', lede: 'messaging platform status' }),
+            PageHeader({ title: 'gateway', lede: 'messaging platform status' }),
             s.error && s.data ? refreshError(s.error) : null,
             section('platforms', rows.length ? Table({ headers: ['platform', 'status'], rows }) : emptyState('no platforms configured')),
         ].filter(Boolean);
@@ -806,7 +806,7 @@ export const chains = makePage((ctx) => {
         const chainsList = s.list?.chains || s.list || [];
         const up = s.health && (s.health.ok || s.health.status === 'ok' || s.health.healthy);
         return [
-            PageHeader({ eyebrow: 'freddie', title: 'chains', lede: 'acptoapi fallback chains', right: up ? Chip({ tone: 'ok', children: 'acptoapi up' }) : Chip({ tone: 'miss', children: 'acptoapi down' }) }),
+            PageHeader({ title: 'chains', lede: 'acptoapi fallback chains', right: up ? Chip({ tone: 'ok', children: 'acptoapi up' }) : Chip({ tone: 'miss', children: 'acptoapi down' }) }),
             noteAlert(s.note),
             section('chains', Array.isArray(chainsList) && chainsList.length ? chainsList.map((c, i) => Row({
                 key: i, title: c.name || c, sub: Array.isArray(c.links) ? c.links.join(' -> ') : '',
@@ -833,7 +833,7 @@ export const machines = makePage((ctx) => {
         const d = s.data || {};
         const list = Array.isArray(d) ? d : (d.machines || Object.entries(d).map(([kind, v]) => ({ kind, ...(typeof v === 'object' ? v : { value: v }) })));
         return [
-            PageHeader({ eyebrow: 'freddie', title: 'machines', lede: 'persisted xstate machine census' }),
+            PageHeader({ title: 'machines', lede: 'persisted xstate machine census' }),
             s.error && s.data ? refreshError(s.error) : null,
             section('machines', list.length ? Table({
                 headers: ['kind', 'key', 'state'],
@@ -863,7 +863,7 @@ export const health = makePage((ctx) => {
         const hd = s.health || {};
         const provs = Array.isArray(s.providers) ? s.providers : (s.providers?.providers || []);
         return [
-            PageHeader({ eyebrow: 'freddie', title: 'health', lede: 'system & provider health', right: hd.ok ? Chip({ tone: 'ok', children: 'healthy' }) : Chip({ tone: 'miss', children: 'degraded' }) }),
+            PageHeader({ title: 'health', lede: 'system & provider health', right: hd.ok ? Chip({ tone: 'ok', children: 'healthy' }) : Chip({ tone: 'miss', children: 'degraded' }) }),
             s.error && (s.health || s.providers) ? refreshError(s.error) : null,
             section('checks', Object.keys(hd).length ? Table({ headers: ['check', 'status'], rows: Object.entries(hd).map(([k, v]) => [k, typeof v === 'object' ? truncJson(v) : (v === true ? Chip({ tone: 'ok', children: 'ok' }) : v === false ? Chip({ tone: 'miss', children: 'no' }) : String(v))]) }) : emptyState('no health data')),
             provs.length ? section('providers', Table({ headers: ['provider', 'status'], rows: provs.map(p => { const n = typeof p === 'string' ? p : p.name || p.id; const ok = typeof p === 'object' ? (p.ok ?? p.available) : null; return [n, ok == null ? '—' : (ok ? Chip({ tone: 'ok', children: 'up' }) : Chip({ tone: 'miss', children: 'down' }))]; }) })) : null,
@@ -931,7 +931,7 @@ export const logs = makePage((ctx) => {
         const severities = ['error', 'warning', 'info', 'debug'];
         return [
             PageHeader({
-                eyebrow: 'freddie', title: 'logs', lede: 'live JSONL log tail — /api/logs/stream',
+                title: 'logs', lede: 'live JSONL log tail — /api/logs/stream',
                 right: s.connected ? Chip({ tone: 'ok', children: 'live' }) : Chip({ tone: 'miss', children: 'reconnecting…' }),
             }),
             s.wsError ? refreshError(s.wsError) : null,
@@ -981,7 +981,7 @@ export const debug = makePage((ctx) => {
         const d = s.data || {};
         const subsystems = d.subsystems || Object.keys(d);
         return [
-            PageHeader({ eyebrow: 'freddie', title: 'debug', lede: 'subsystem snapshots & logs' }),
+            PageHeader({ title: 'debug', lede: 'subsystem snapshots & logs' }),
             section('subsystems', subsystems.length ? subsystems.map((name, i) => Row({
                 key: i, title: name, onClick: () => loadLogs(name), active: s.sub === name,
             })) : emptyState('no debug subsystems')),
@@ -1041,7 +1041,7 @@ export const git = makePage((ctx) => {
         const worktrees = wtFailed ? [] : (s.worktrees && s.worktrees.worktrees) || s.worktrees || [];
         const current = Array.isArray(worktrees) ? (worktrees.find(w => w.path === s.cwd) || {}).path : undefined;
         return [
-            PageHeader({ eyebrow: 'freddie', title: 'git', lede: s.cwd || 'active project' }),
+            PageHeader({ title: 'git', lede: s.cwd || 'active project' }),
             noteAlert(s.note),
             statusFailed ? refreshError(statusFailed) : null,
             section('worktrees',

package/src/css/app-shell/base.css

@@ -23,7 +23,10 @@ button, input, select, textarea { font: inherit; }
   color: var(--accent-fg);
   padding: 8px 16px;
   text-decoration: none;
-  z-index: 100;
+  /* Must outrank every layer of chrome once focused, or the first Tab press
+     lands on a control hidden behind the sticky header (was z-index:100,
+     which the header alone now matches). */
+  z-index: var(--z-top);
   border-radius: var(--r-pill);
   font-weight: 600;
   font-size: var(--fs-sm);
@@ -78,6 +81,13 @@ h4, .t-h4 { font-family: var(--ff-display); font-size: var(--fs-h4); line-height
 .t-mono    { font-family: var(--ff-mono); }
 .t-body    { font-family: var(--ff-body); }
 
+/* House small-label voice, in two sizes. Every declaration here is sourced
+   from a token, so a sheet that cannot join these selector lists (community.css
+   and gm-prose.css ship as separate <link>-able exports and must not depend on
+   app-shell.css being present) still composes the same voice by referencing the
+   same four tokens — --ff-mono / --fs-* / uppercase / --tr-label. That token
+   set, not this rule, is the single source of truth; a selector that restates a
+   literal instead of the token is the drift this pairing exists to prevent. */
 .t-label   { font-family: var(--ff-mono); font-size: var(--fs-tiny); text-transform: uppercase; letter-spacing: var(--tr-label); font-weight: 500; }
 .t-micro   { font-family: var(--ff-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--tr-label); color: var(--fg-3); }
 .t-meta    { font-family: var(--ff-body); font-size: var(--fs-sm); color: var(--fg-3); }

package/src/css/app-shell/catalog-theme.css

@@ -121,6 +121,13 @@
   transition: color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
 }
 .ds-segmented .ds-seg-btn:hover { color: var(--fg); }
+/* Touch floor — a segmented control is a primary mode switch but renders ~30px
+   tall from its 4px padding, below the 44px minimum the rest of the system
+   holds. Grows the hit area only; the pill's visual size is unchanged at
+   fine-pointer sizes. */
+@media (pointer: coarse) {
+  .ds-segmented .ds-seg-btn { min-height: 44px; padding-inline: var(--space-3); }
+}
 .ds-segmented .ds-seg-btn:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 .ds-segmented .ds-seg-btn.is-on {
   background: var(--bg); color: var(--fg);

package/src/css/app-shell/chat-polish.css

@@ -126,7 +126,12 @@
 .chat-bubble.chat-md li { margin: var(--space-1) 0; }
 .chat-bubble.chat-md blockquote {
   margin: var(--space-2) 0; padding: 4px 12px;
-  border-left: 3px solid color-mix(in oklab, currentColor 30%, transparent);
+  /* DELIBERATE, but slimmed to the --bw-rule tier. This is a real markdown
+     <blockquote> inside a chat bubble: the left rule is the standard
+     typographic quotation mark, not a colored alert stripe (the tone is a
+     currentColor mix that inherits the bubble's own ink — never an accent).
+     A 3px off-scale literal read as the generic tell; 2px reads as type. */
+  border-left: var(--bw-rule) solid color-mix(in oklab, currentColor 30%, transparent);
   color: color-mix(in oklab, currentColor 75%, transparent); font-style: italic;
 }
 .chat-bubble.chat-md pre {

package/src/css/app-shell/data-density.css

@@ -102,10 +102,28 @@
 .ds-sub-btn:hover { border-color: var(--accent); color: var(--accent-ink); }
 .ds-sub-btn span { display: block; font-size: 18px; font-weight: 700; color: var(--accent-ink); }
 
-/* SessionRow — base .ds-session-row (layout, hover/focus/active states,
-   rail-tone indicators) is canonically defined in chat.css alongside the
-   rest of the chat session-list component; this file only carries the
-   dev/admin-row sub-parts (id/counts/devcnt/span) that decorate it. */
+/* SessionRow — the RICH treatment (hover/focus/active, rail tones, nesting,
+   inline rename/delete) lives in chat.css with the rest of the chat session
+   list. But SessionRow is part of this data-density family and is used by kits
+   that never link chat.css (gm_inspector links only colors_and_type +
+   app-shell + editor-primitives), where the component rendered with NO layout
+   at all: gap resolved to `normal`, so id/counts/devcnt/phasewalk/span all
+   butted together at 0px. The layout floor therefore belongs here, next to the
+   sub-parts it positions, so the component is never shipped shapeless.
+   chat.css still layers its interactive states on top; these declarations are
+   identical to the ones there, so a kit loading both gets the same result. */
+.ds-session-row {
+  position: relative; display: flex; align-items: center; gap: var(--space-2);
+  width: 100%; padding: var(--space-2); min-height: 52px; margin-bottom: 2px;
+  background: transparent; border: none; border-radius: var(--r-1);
+  text-align: left; color: var(--fg);
+}
+/* Only an interactive row gets the pointer affordance (chat.css sets cursor
+   unconditionally because every row there is clickable; here rows are often
+   static readouts). */
+.ds-session-row[role="button"], a.ds-session-row { cursor: pointer; }
+
+/* Sub-parts that decorate the row above. */
 .ds-session-row-id {
   font-family: var(--ff-mono); font-size: var(--fs-micro); color: var(--accent-ink);
   flex: 0 1 160px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;

package/src/css/app-shell/files.css

@@ -301,7 +301,7 @@
 }
 .ds-file-cell-meta { font-family: var(--ff-mono); font-size: var(--fs-micro); color: var(--fg-3); text-align: left; }
 .ds-file-cell-check {
-  position: absolute; top: 4px; left: 4px; z-index: 1;
+  position: absolute; top: 4px; left: 4px; z-index: var(--z-raised);
   background: color-mix(in oklab, var(--bg) 78%, transparent);
 }
 
@@ -447,7 +447,7 @@
 .ds-dropzone--wrap { position: relative; border: none; border-radius: 0; background: transparent; }
 .ds-dropzone--wrap > .ds-dropzone-inner { display: none; }
 .ds-dropzone--wrap.dragover > .ds-dropzone-inner {
-  display: flex; position: absolute; inset: 0; z-index: 5;
+  display: flex; position: absolute; inset: 0; z-index: var(--z-raised);
   margin: 0; padding: var(--space-3);
   align-items: center; justify-content: center;
   background: color-mix(in srgb, var(--bg) 84%, transparent);
@@ -539,7 +539,7 @@
 
 /* -- Modals ------------------------------------------------- */
 .ds-modal-backdrop {
-  position: fixed; inset: 0; z-index: var(--z-modal, 800);
+  position: fixed; inset: 0; z-index: var(--z-modal);
   display: flex; align-items: center; justify-content: center;
   /* Notch/home-indicator safe: near-fullscreen modals must not slide under. */
   padding: max(var(--space-3), env(safe-area-inset-top))

package/src/css/app-shell/hero-content.css

@@ -100,7 +100,7 @@
    ============================================================ */
 .ds-grain { position: relative; isolation: isolate; }
 .ds-grain::after {
-  content: ''; position: absolute; inset: 0; z-index: -1;
+  content: ''; position: absolute; inset: 0; z-index: var(--z-below);
   pointer-events: none;
   background-image: var(--grain);
   background-size: 160px 160px;