anentrypoint-design 0.0.304 → 0.0.306

package/app-shell.css

@@ -4088,6 +4088,10 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
 .ds-stat-val.err-rate { font-size: clamp(24px, 7cqi, 32px); color: var(--warn); }
 .ds-stat-lbl { font-size: var(--fs-micro); color: var(--fg-3); margin-top: 2px; }
 
+/* Inline row — flex row with centered items and a small gap, for demo/kit
+   markup that needs to lay siblings out horizontally without an inline style. */
+.ds-inline-row { display: flex; align-items: center; gap: var(--space-2, 8px); }
+
 /* SubGrid */
 .ds-sub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; margin-top: 8px; }
 .ds-sub-grid-empty { padding: var(--space-3); color: var(--fg-3); font-size: var(--fs-tiny); }
@@ -4385,10 +4389,10 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
   font-weight: 600;
 }
 .ds-quickstart {
-  padding: var(--space-3, 16px) var(--space-4, 22px);
+  padding: var(--space-3, 16px) var(--space-4, 24px);
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: var(--space-1-75, 6px);
 }
 /* Table() scroll containment — wide tables scroll inside their own box,
    never the page body. */
@@ -4402,21 +4406,21 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
 
 /* == appended: settings kit cleanup == */
 /* == appended: settings kit == */
-.ds-settings-main { padding: 8px; }
+.ds-settings-main { padding: var(--space-2, 8px); }
 .ds-settings-body { padding: 14px 18px; }
-.ds-settings-body-stack { display: flex; flex-direction: column; gap: 10px; }
-.ds-field-block { margin: 10px 0; }
+.ds-settings-body-stack { display: flex; flex-direction: column; gap: var(--space-2-5, 10px); }
+.ds-field-block { margin: var(--space-2-5, 10px) 0; }
 .ds-field-eyebrow {
   font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.06em;
   text-transform: uppercase; color: var(--panel-text-3);
 }
 .ds-hint-sm { font-size: 12px; color: var(--panel-text-2); }
 .ds-note-quiet { margin: 0; color: var(--panel-text-2); }
-.ds-btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
-.ds-btn-row-tight { gap: 6px; }
+.ds-btn-row { display: flex; gap: var(--space-2, 8px); flex-wrap: wrap; }
+.ds-btn-row-tight { gap: var(--space-1-75, 6px); }
 .ds-key-input { flex: 1 1 160px; min-width: 0; font-family: var(--ff-mono); }
 .ds-toggle-btn { min-width: 78px; }
-.ds-toggle-label { margin-left: 8px; color: inherit; opacity: 0.7; }
+.ds-toggle-label { margin-left: var(--space-2, 8px); color: inherit; opacity: 0.7; }
 .ds-btn-warn { color: var(--warn); }
 /* Raw --mascot text measures 3.11:1 on paper (fails 4.5:1); --mascot-deep is
    the text-safe tone, same accent/accent-ink split used everywhere else. */

package/dist/247420.css

@@ -4612,6 +4612,10 @@
 .ds-247420 .ds-stat-val.err-rate { font-size: clamp(24px, 7cqi, 32px); color: var(--warn); }
 .ds-247420 .ds-stat-lbl { font-size: var(--fs-micro); color: var(--fg-3); margin-top: 2px; }
 
+/* Inline row — flex row with centered items and a small gap, for demo/kit
+   markup that needs to lay siblings out horizontally without an inline style. */
+.ds-247420 .ds-inline-row { display: flex; align-items: center; gap: var(--space-2, 8px); }
+
 /* SubGrid */
 .ds-247420 .ds-sub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; margin-top: 8px; }
 .ds-247420 .ds-sub-grid-empty { padding: var(--space-3); color: var(--fg-3); font-size: var(--fs-tiny); }
@@ -4909,10 +4913,10 @@
   font-weight: 600;
 }
 .ds-247420 .ds-quickstart {
-  padding: var(--space-3, 16px) var(--space-4, 22px);
+  padding: var(--space-3, 16px) var(--space-4, 24px);
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: var(--space-1-75, 6px);
 }
 /* Table() scroll containment — wide tables scroll inside their own box,
    never the page body. */
@@ -4926,21 +4930,21 @@
 
 /* == appended: settings kit cleanup == */
 /* == appended: settings kit == */
-.ds-247420 .ds-settings-main { padding: 8px; }
+.ds-247420 .ds-settings-main { padding: var(--space-2, 8px); }
 .ds-247420 .ds-settings-body { padding: 14px 18px; }
-.ds-247420 .ds-settings-body-stack { display: flex; flex-direction: column; gap: 10px; }
-.ds-247420 .ds-field-block { margin: 10px 0; }
+.ds-247420 .ds-settings-body-stack { display: flex; flex-direction: column; gap: var(--space-2-5, 10px); }
+.ds-247420 .ds-field-block { margin: var(--space-2-5, 10px) 0; }
 .ds-247420 .ds-field-eyebrow {
   font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.06em;
   text-transform: uppercase; color: var(--panel-text-3);
 }
 .ds-247420 .ds-hint-sm { font-size: 12px; color: var(--panel-text-2); }
 .ds-247420 .ds-note-quiet { margin: 0; color: var(--panel-text-2); }
-.ds-247420 .ds-btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
-.ds-247420 .ds-btn-row-tight { gap: 6px; }
+.ds-247420 .ds-btn-row { display: flex; gap: var(--space-2, 8px); flex-wrap: wrap; }
+.ds-247420 .ds-btn-row-tight { gap: var(--space-1-75, 6px); }
 .ds-247420 .ds-key-input { flex: 1 1 160px; min-width: 0; font-family: var(--ff-mono); }
 .ds-247420 .ds-toggle-btn { min-width: 78px; }
-.ds-247420 .ds-toggle-label { margin-left: 8px; color: inherit; opacity: 0.7; }
+.ds-247420 .ds-toggle-label { margin-left: var(--space-2, 8px); color: inherit; opacity: 0.7; }
 .ds-247420 .ds-btn-warn { color: var(--warn); }
 /* Raw --mascot text measures 3.11:1 on paper (fails 4.5:1); --mascot-deep is
    the text-safe tone, same accent/accent-ink split used everywhere else. */
@@ -8130,6 +8134,76 @@
 .ds-247420 .ds-ep-pager-btn:disabled { opacity: 0.4; cursor: default; }
 .ds-247420 .ds-ep-pager-label { white-space: nowrap; }
 
+.ds-247420 .ds-ep-pager-numbered { flex-wrap: wrap; }
+.ds-247420 .ds-ep-pager-num {
+    appearance: none; cursor: pointer;
+    background: var(--panel-2, var(--bg-2));
+    border: 1px solid var(--rule);
+    color: var(--panel-text, var(--fg));
+    min-width: 1.75em;
+    padding: var(--space-half, 3px) var(--space-1, 5px);
+    border-radius: var(--r-1, 4px);
+    font: inherit;
+    text-align: center;
+}
+.ds-247420 .ds-ep-pager-num:hover { background: color-mix(in oklab, var(--accent) 10%, transparent); }
+.ds-247420 .ds-ep-pager-num.is-current {
+    background: var(--accent);
+    color: var(--accent-ink);
+    border-color: var(--accent);
+}
+.ds-247420 .ds-ep-pager-ellipsis { padding: 0 var(--space-hair, 2px); opacity: 0.6; }
+.ds-247420 .ds-ep-pager-total { white-space: nowrap; margin-left: auto; }
+
+/* Grid / GridItem — 24-column responsive layout. GridItem's flex-basis is
+   set per-tier via --xs-basis/--sm-basis/--md-basis/--lg-basis/--xl-basis
+   custom properties (computed in JS from a 1-24 span); each @media tier
+   below picks up whichever property is set for that breakpoint, cascading
+   down from xs as the mobile-first default. Mirrors BP_SM/MD/LG/XL. */
+.ds-247420 .ds-ep-grid {
+    display: flex; flex-wrap: wrap;
+    gap: var(--space-2, 8px);
+}
+.ds-247420 .ds-ep-grid-item {
+    box-sizing: border-box;
+    flex-grow: var(--xs-grow, 1);
+    flex-basis: var(--xs-basis, 100%);
+    max-width: var(--xs-basis, 100%);
+    display: var(--xs-display, inherit);
+}
+@media (min-width: 480px) {
+    .ds-247420 .ds-ep-grid-item[style*="--sm-basis"] {
+        flex-grow: var(--sm-grow, 1);
+        flex-basis: var(--sm-basis, 100%);
+        max-width: var(--sm-basis, 100%);
+        display: var(--sm-display, inherit);
+    }
+}
+@media (min-width: 768px) {
+    .ds-247420 .ds-ep-grid-item[style*="--md-basis"] {
+        flex-grow: var(--md-grow, 1);
+        flex-basis: var(--md-basis, 100%);
+        max-width: var(--md-basis, 100%);
+        display: var(--md-display, inherit);
+    }
+}
+@media (min-width: 1024px) {
+    .ds-247420 .ds-ep-grid-item[style*="--lg-basis"] {
+        flex-grow: var(--lg-grow, 1);
+        flex-basis: var(--lg-basis, 100%);
+        max-width: var(--lg-basis, 100%);
+        display: var(--lg-display, inherit);
+    }
+}
+@media (min-width: 1440px) {
+    .ds-247420 .ds-ep-grid-item[style*="--xl-basis"] {
+        flex-grow: var(--xl-grow, 1);
+        flex-basis: var(--xl-basis, 100%);
+        max-width: var(--xl-basis, 100%);
+        display: var(--xl-display, inherit);
+    }
+}
+
 /* JsonViewer */
 .ds-247420 .ds-ep-json {
     font-size: var(--fs-tiny, 12px);
@@ -9141,6 +9215,62 @@
     .ds-247420 .ds-ep-dock-left.collapsed { top: 6px; bottom: auto; }
 }
 
+/* Collapse / CollapseGroup — progressive-disclosure toggle panel. */
+.ds-247420 .ds-ep-collapse {
+    border: 1px solid var(--rule);
+    border-radius: var(--r-1, 4px);
+    background: var(--panel-2, var(--bg-2));
+}
+.ds-247420 .ds-ep-collapse + .ds-ep-collapse { margin-top: var(--space-1, 5px); }
+.ds-247420 .ds-ep-collapse-head {
+    appearance: none; cursor: pointer; width: 100%;
+    display: flex; align-items: center; gap: var(--space-1-5, 5px);
+    background: transparent; border: none;
+    padding: var(--space-1-5, 5px) var(--space-2, 8px);
+    font: inherit; color: var(--panel-text, var(--fg));
+    text-align: left;
+}
+.ds-247420 .ds-ep-collapse-head:hover { background: color-mix(in oklab, var(--accent) 6%, transparent); }
+.ds-247420 .ds-ep-collapse-chevron {
+    font-family: var(--ff-mono, monospace);
+    width: 1em; flex-shrink: 0;
+    color: var(--panel-text-3, var(--fg-3));
+}
+.ds-247420 .ds-ep-collapse-title { flex: 1; font-weight: 600; }
+.ds-247420 .ds-ep-collapse-body {
+    padding: var(--space-2, 8px);
+    border-top: 1px solid var(--rule);
+}
+.ds-247420 .ds-ep-collapse-group { display: flex; flex-direction: column; }
+
+/* Divider — plain rule / labeled rule / vertical separator. */
+.ds-247420 .ds-ep-divider {
+    border: none; border-top: 1px solid var(--rule);
+    margin: var(--space-2, 8px) 0;
+}
+.ds-247420 .ds-ep-divider-labeled {
+    display: flex; align-items: center; gap: var(--space-1-5, 5px);
+    margin: var(--space-2, 8px) 0;
+}
+.ds-247420 .ds-ep-divider-labeled::before,
+.ds-247420 .ds-ep-divider-labeled::after {
+    content: '';
+    flex: 1;
+    border-top: 1px solid var(--rule);
+}
+.ds-247420 .ds-ep-divider-label {
+    font: var(--fs-tiny, 12px)/1 var(--ff-mono, monospace);
+    color: var(--panel-text-3, var(--fg-3));
+    white-space: nowrap;
+}
+.ds-247420 .ds-ep-divider-vertical {
+    display: inline-block;
+    align-self: stretch;
+    width: 0;
+    border-left: 1px solid var(--rule);
+    margin: 0 var(--space-1-5, 5px);
+}
+
 /* community-app.css */
 /* community-app.css — layout glue for mountCommunityApp (the full chat/community
    app GUI). Reuses the canonical app/body/main classes from app-shell.css and