anentrypoint-design 0.0.481 → 0.0.482

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.481",
+  "version": "0.0.482",
   "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/css/app-shell/chat-polish.css

@@ -387,7 +387,7 @@
 
 .chat-typing { display: inline-flex; gap: var(--space-1); align-items: center; }
 .chat-typing span {
-  width: 6px; height: 6px; border-radius: 50%; background: var(--fg-3);
+  width: 8px; height: 8px; border-radius: 50%; background: var(--fg-3);
 }
 
 @media (prefers-reduced-motion: no-preference) {

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

@@ -14,10 +14,6 @@
 
 /* PhaseWalk */
 .ds-phasewalk { display: inline-flex; gap: var(--space-hair); vertical-align: middle; }
-/* NOTE: a second toggle-switch-shaped implementation exists in
-   plugins-config.css:91 (.ds-plugins-toggle) at a different scale (40x22 vs
-   this 18x10) — consider consolidating into a shared .ds-switch primitive
-   with a size modifier. */
 .ds-phasewalk-seg {
   width: 18px; height: 10px; border-radius: var(--r-hair);
   background: var(--bg-3); position: relative;

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

@@ -455,7 +455,7 @@
   padding: var(--space-4) var(--space-3); text-align: center;
 }
 /* Icon size, not type — see .ds-file-cell-media .ds-file-icon above. */
-.ds-dropzone-glyph { font-size: 22px; color: var(--fg-3); }
+.ds-dropzone-glyph { font-size: var(--icon-lg, 24px); color: var(--fg-3); }
 .ds-dropzone-label { font-size: var(--fs-sm); color: var(--fg-3); }
 .ds-dropzone.dragover {
   border-color: var(--accent);

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

@@ -484,13 +484,12 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
 /* ============================================================
    Empty state
    ============================================================ */
+/* Shares its base declarations with .ds-empty-state (primitives.css) via the
+   combined selector there -- .empty only adds its own font-size/background/
+   radius modifiers on top. Was --space-8 (96px) padding; --space-6 (48px)
+   still centres a message with air without the empty state dominating the
+   fold. */
 .empty {
-  /* Was --space-8 (96px) — an empty list spent 192px of vertical space on
-     nothing. --space-6 (48px) still centres a message with air, without the
-     empty state dominating the fold. Mobile drops it further (below). */
-  padding: var(--space-6);
-  text-align: center;
-  color: var(--fg-3);
   background: var(--bg-2);
   border-radius: var(--r-1);
   font-size: var(--fs-sm);

package/src/css/app-shell/loading-alerts.css

@@ -25,13 +25,13 @@
 .ds-spinner-lg { height: 24px; gap: var(--space-1-75); }
 .ds-spinner-lg span { width: var(--space-1-75); height: var(--space-1-75); }
 
-.ds-spinner-sm { height: 12px; gap: var(--space-hair); }
+.ds-spinner-sm { height: var(--space-2-5); gap: var(--space-hair); }
 .ds-spinner-sm span { width: var(--space-hair); height: var(--space-hair); }
 
-.ds-spinner-xs { height: 8px; gap: 1px; }
+.ds-spinner-xs { height: var(--space-2); gap: 1px; }
 .ds-spinner-xs span { width: 1.5px; height: 1.5px; }
 
-.ds-spinner-xl { height: 32px; gap: var(--space-2); }
+.ds-spinner-xl { height: var(--space-5); gap: var(--space-2); }
 .ds-spinner-xl span { width: var(--space-2); height: var(--space-2); }
 
 @keyframes ds-bounce {
@@ -39,6 +39,11 @@
   40% { transform: translateY(-8px); }
 }
 
+/* Two spinner visual languages coexist intentionally: dots (.ds-spinner*)
+   are for small inline/compact loading states (buttons, chips, list rows),
+   the ring (.loading::after in states-interactions.css) is for larger
+   blocking/full-region loading states (panels, full views). */
+
 /* ============================================================
    Skeleton — animated loading placeholder
    ============================================================ */
@@ -82,7 +87,7 @@
   flex-shrink: 0;
   color: var(--alert-tone);
   font-weight: 600;
-  min-width: var(--space-3-5);
+  min-width: var(--icon-md);
   text-align: center;
 }
 
@@ -113,7 +118,7 @@
   padding: 0;
   font-size: var(--fs-xs);
   line-height: 1;
-  min-width: var(--space-3-5);
+  min-width: var(--icon-md);
   text-align: center;
   transition: color var(--dur-snap) var(--ease);
 }

package/src/css/app-shell/plugins-config.css

@@ -87,15 +87,16 @@
 }
 .ds-plugins-version { font-size: var(--fs-micro); color: var(--fg-3); }
 
-/* NOTE: a second toggle-switch implementation exists in data-density.css:18
-   (.ds-phasewalk-seg) at a different scale (18x10 vs this 40x22) — consider
-   consolidating into a shared .ds-switch primitive with a size modifier. */
+/* Same track/knob proportions as the shared .ds-toggle primitive
+   (states-interactions.css) -- kept as its own class since ds-plugins-toggle
+   is a plain <button>+.on instead of .ds-toggle's [aria-checked] contract,
+   but sized and colored to match it exactly rather than drifting. */
 .ds-plugins-toggle {
-  flex: 0 0 auto; width: 40px; height: 22px; border-radius: 11px; border: none; padding: 0;
+  flex: 0 0 auto; width: 40px; height: 22px; border-radius: var(--r-pill, 999px); border: none; padding: 0;
   background: var(--rule); position: relative; cursor: pointer;
   transition: background var(--dur-snap) var(--ease);
 }
-.ds-plugins-toggle.on { background: var(--accent); }
+.ds-plugins-toggle.on { background: var(--accent-ink); }
 .ds-plugins-toggle[disabled] { cursor: wait; opacity: 0.65; }
 .ds-plugins-toggle-knob {
   position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;

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

@@ -38,6 +38,9 @@
   padding: 0 var(--space-4); font-size: var(--fs-body); gap: var(--space-2);
 }
 
+/* App chrome is compact/dense (see --fs-h1-app etc in colors_and_type.css) --
+   the marketing-scale hover lift/shadow reads as an oversized flourish at
+   this density, so app-typescale buttons opt out of it deliberately. */
 [data-typescale="app"] .btn:hover,
 [data-typescale="app"] .btn-primary:hover,
 [data-typescale="app"] .btn-ghost:hover { transform: none; box-shadow: none; }
@@ -51,7 +54,7 @@
 .ds-icon-btn {
   display: inline-flex; align-items: center; justify-content: center;
   padding: 0; border: none; cursor: pointer;
-  border-radius: var(--r-1, 6px);
+  border-radius: var(--r-1, 8px);
   background: transparent; color: var(--fg);
   width: 32px; height: 32px;
   transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
@@ -83,7 +86,7 @@
   border-radius: var(--r-pill);
   background: var(--bg-3); color: var(--fg-2);
 }
-.ds-badge.ds-badge--sm { min-width: 14px; height: 14px; padding: 0 var(--space-1); font-size: var(--fs-pico); }
+.ds-badge.ds-badge--sm { min-width: var(--icon-xs); height: var(--icon-xs); padding: 0 var(--space-1); font-size: var(--fs-pico); }
 .ds-badge.ds-badge--lg { min-width: 22px; height: 22px; padding: 0 var(--space-2); font-size: var(--fs-tiny); }
 .ds-badge.tone-green, .ds-badge.tone-live, .ds-badge.tone-success {
   background: var(--green-tint); color: var(--green-deep);
@@ -100,7 +103,7 @@
   background: var(--sun); color: var(--ink);
 }
 .ds-badge.tone-blue    { background: var(--accent-tint); color: var(--accent-ink); }
-.ds-badge.tone-orange  { background: color-mix(in oklab, var(--flame) 22%, var(--bg)); color: color-mix(in oklab, var(--flame) 65%, black); }
+.ds-badge.tone-orange  { background: color-mix(in oklab, var(--flame) 22%, var(--bg)); color: var(--flame); }
 
 .chip {
   display: inline-flex; align-items: center; gap: var(--space-1-75);
@@ -151,10 +154,10 @@
   cursor: pointer;
 }
 .ds-chip-remove-btn:hover, .ds-chip-remove-btn:focus-visible { opacity: 1; background: color-mix(in oklab, currentColor 16%, transparent); }
-.ds-chip-remove-btn svg { width: 10px; height: 10px; }
+.ds-chip-remove-btn svg { width: var(--icon-xs); height: var(--icon-xs); }
 @media (pointer: coarse) {
   .ds-chip-remove-btn { width: 24px; height: 24px; margin-left: 0; }
-  .ds-chip-remove-btn svg { width: 12px; height: 12px; }
+  .ds-chip-remove-btn svg { width: var(--icon-xs); height: var(--icon-xs); }
 }
 
 .ds-pill {
@@ -179,6 +182,22 @@
   opacity: 0.8;
 }
 .glyph { --glyph-size-sm: var(--fs-nano); --glyph-size-base: var(--fs-tiny); --glyph-size-lg: var(--fs-body); }
-.glyph-sm { width: 14px; height: 14px; }
+.glyph-sm { width: var(--icon-xs); height: var(--icon-xs); }
 .glyph-lg { width: 22px; height: 22px; }
 
+/* Shared empty-state base -- hero-content.css's .empty and community.css's
+   .fd-empty previously duplicated this full rule set; both are joined into
+   this selector list so the shared declarations live in one place, with
+   each keeping its own file-local rule for context-specific extras
+   (background/radius/font-size for .empty; padding for .fd-empty). New
+   consumers can add .ds-empty-state directly instead of a fresh copy. */
+.ds-empty-state, .empty, .fd-empty {
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  gap: var(--space-2);
+  padding: var(--space-6) var(--space-3);
+  text-align: center;
+  color: var(--fg-3);
+}
+.ds-empty-state--panel { background: var(--bg-2); border-radius: var(--r-1); }
+.ds-empty-state--compact { padding: var(--space-5) var(--space-3); }
+

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

@@ -11,9 +11,9 @@
      of this value, worth aligning to 768px when touched.
    - Tablet/desktop boundary: 900px (max-width) / 901px (min-width) — used for
      main layout reflow (hero-content.css, responsive2-workspace.css)
-   - Legacy tablet band: 481px–1024px (min-width 481px / max-width 1025px) —
-     used in this file (responsive.css) for a specific tablet treatment,
-     consider migrating to the 768/900 pair
+   - Tablet landscape band: 768px–1024px (min-width 768px / max-width 1024px) —
+     used in this file (responsive.css) for a specific tablet treatment;
+     aligned to the 768px mobile/tablet boundary above (was 481px, a near-miss).
 */
 
 /* --------------------------------------------------------------------
@@ -194,7 +194,7 @@
 /* --------------------------------------------------------------------
    Tablet Landscape Breakpoint (768px to 1024px)
    ---------------------------------------------------------------------- */
-@media (min-width: 481px) and (max-width: 1024px) {
+@media (min-width: 768px) and (max-width: 1024px) {
   /* App Layout — side handled by 900px drawer block; restore for 901-1024 */
   .app-side a {
     padding: var(--space-2-75) var(--space-2-75); gap: var(--space-2);

package/src/css/app-shell/responsive2-workspace.css

@@ -326,8 +326,14 @@
    because the chat thread carries its own --measure gutter. */
 .ws-main { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; padding: var(--space-4) var(--space-5); }
 .ws-main.ws-main--flush { padding: 0; }
-/* Non-interactive scroll region (content column), not a focusable control — outline intentionally suppressed. */
+/* Skip-link target (workspace-shell.js's "#ws-main" skip-link, tabindex="-1")
+   — it does receive real keyboard-driven focus when the skip link is
+   activated, so it needs a visible ring rather than a bare outline:none. */
 .ws-main:focus { outline: none; }
+.ws-main:focus-visible {
+  outline: var(--focus-w) solid var(--focus-color);
+  outline-offset: calc(-1 * var(--focus-offset));
+}
 
 /* Right context pane */
 .ws-pane {

package/src/css/app-shell/row-print.css

@@ -37,7 +37,7 @@
 }
 
 /* Disabled file actions (read-only row / in-flight mutation) stay visible but inert. */
-.ds-file-act:disabled { opacity: .45; cursor: default; }
+.ds-file-act:disabled { opacity: .5; cursor: default; }
 .ds-file-act:disabled:hover { background: transparent; color: var(--fg-3); }
 .ds-file-act:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 

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

@@ -300,13 +300,26 @@ body.canvas-host { background: transparent !important; }
 .app-main > .ds-file-stage,
 .app-main > .ds-files-stack,
 .app-main > .grow { flex: 1 1 auto; min-height: 0; }
-.app-main.narrow { max-width: var(--measure-narrow); margin: 0 auto; }
+/* width:100% is load-bearing, not redundant with max-width: .app-body is a
+   CSS grid, and margin:auto on a grid item overrides the default stretch,
+   shrinking the item to its max-content width instead of filling the track
+   and then clamping -- confirmed live at 2560px viewport where mainWidth
+   measured 688px against a correctly-resolved 1400px max-width. Explicit
+   width:100% restores fill-then-cap for every .narrow page, not just wide
+   viewports (the shrink-to-fit bug undersized even the base 760px case). */
+.app-main.narrow { width: 100%; max-width: var(--measure-narrow); margin: 0 auto; }
 /* A shell with no sidebar has no competing column, so the prose clamp there was
    leaving the whole sidebar's worth of width empty -- 760px of content inside a
    1413px shell on a real page. Widen the clamp by the space the absent sidebar
-   would have taken so the measure still reads as prose, just not starved. */
+   would have taken so the measure still reads as prose, just not starved.
+   The floor stays a fixed 980px (no-side is still readable narrow); the
+   ceiling grows with viewport instead of staying pinned at 980px forever --
+   on a 2560px ultrawide the old fixed value left over half the shell as dead
+   side margin. 1400px ceiling keeps prose measure sane (nobody wants a
+   2400px-wide paragraph) while letting non-prose content (index rows, meta)
+   actually use the extra room. */
 .app-body.no-side .app-main.narrow {
-  max-width: calc(var(--measure-narrow) + var(--sidebar-width));
+  max-width: clamp(calc(var(--measure-narrow) + var(--sidebar-width)), 60vw, 1400px);
 }
 /* Article-body heading rhythm and lede spacing, consumed by flatspace-rendered
    long-form pages (docs, papers) that drop headings/panels directly into .app-main. */

package/src/kits/spoint/host-join-lobby.css

@@ -15,8 +15,8 @@
   width: min(360px, 88vw);
   display: flex;
   flex-direction: column;
-  gap: 12px;
-  padding: 24px;
+  gap: var(--space-2-75);
+  padding: var(--space-4);
   background: var(--bg-2);
   border: 1px solid var(--bw-rule, var(--rule));
   border-radius: var(--r-2, 10px);
@@ -45,7 +45,7 @@
   font-family: var(--ff-mono);
   font-size: var(--fs-body);
   padding: 10px 14px;
-  border-radius: var(--r-1, 6px);
+  border-radius: var(--r-1, 8px);
   cursor: pointer;
 }
 .sp-lobby-btn:hover { background: var(--bg-2); }
@@ -77,7 +77,7 @@
   color: var(--accent);
   padding: 8px;
   background: var(--bg);
-  border-radius: var(--r-1, 6px);
+  border-radius: var(--r-1, 8px);
 }
 .sp-lobby-err { min-height: 16px; color: var(--danger); font-size: var(--fs-small, 11px); }
 .sp-lobby-close {