anentrypoint-design 0.0.322 → 0.0.324

package/src/css/app-shell/kits-appended.css

@@ -0,0 +1,361 @@
+/* == appended: popovers-files == */
+/* FilePreviewMedia controls row — spacing + coarse-pointer tap floor */
+.ds-preview-media-controls {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+}
+@media (hover: none), (pointer: coarse) {
+  .ds-preview-media-controls .chat-code-copy,
+  .chat-code-copy-head {
+    min-height: 44px;
+    min-width: 44px;
+  }
+}
+
+/* == appended: ui-kits == */
+/* ============================================================
+   ui_kit responsive helpers (kits-grids sweep) */
+.ds-section-pad { padding: clamp(6px, 1.2vw, 16px); }
+.ds-panel-gap { margin: var(--space-2) 0; }
+.ds-panel-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin: var(--space-2) 0; }
+@media (max-width: 760px) {
+  .ds-panel-duo { grid-template-columns: 1fr; }
+}
+/* wide dense rows/tables scroll inside their panel, never the page */
+.ds-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
+
+/* --- slide deck ------------------------------------------- */
+.ds-deck-stage {
+  aspect-ratio: 16 / 9;
+  width: 100%;
+  max-width: min(1100px, 100%);
+  margin: var(--space-3) auto;
+  background: var(--bg-2);
+  border-radius: var(--r-2);
+  padding: clamp(16px, 5vw, 64px);
+  box-sizing: border-box;
+  display: flex;
+  overflow: hidden;
+  container-type: inline-size; /* cqw units track the stage, not the viewport */
+}
+@media (max-height: 500px) and (orientation: landscape) {
+  .ds-deck-stage {
+    max-height: calc(100vh - 140px);
+    max-height: calc(100dvh - 140px);
+    aspect-ratio: auto;
+  }
+}
+.ds-deck-slide { flex: 1; display: flex; min-width: 0; }
+.ds-deck-controls {
+  display: flex; align-items: center; justify-content: center; gap: 14px;
+  padding: 8px; font-family: var(--ff-mono); font-size: var(--fs-sm);
+}
+.ds-deck-count { color: var(--fg-3); }
+@media (pointer: coarse) {
+  .ds-deck-controls .btn { min-height: 44px; min-width: 44px; }
+}
+.ds-slide-eyebrow {
+  font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.1em;
+  text-transform: uppercase; color: var(--fg-3); margin-bottom: clamp(12px, 2.5cqw, 24px);
+}
+.ds-slide-col { display: flex; flex-direction: column; justify-content: center; gap: clamp(12px, 2.5cqw, 24px); min-width: 0; }
+.ds-slide-col--start { align-items: flex-start; }
+.ds-slide-col--narrow { max-width: 38ch; }
+.ds-slide-col--quote { max-width: 42ch; }
+.ds-slide-hero {
+  font-size: clamp(var(--fs-h2), 6cqw, var(--fs-hero));
+  line-height: var(--lh-tight); letter-spacing: var(--tr-tight); font-weight: 600;
+  color: var(--slide-accent, var(--accent-ink));
+  overflow-wrap: anywhere;
+}
+.ds-slide-h1 {
+  font-size: clamp(var(--fs-h3), 4.5cqw, var(--fs-h1));
+  line-height: var(--lh-snug); color: var(--fg); font-weight: 500; min-width: 0;
+}
+.ds-slide-h1--lead { margin-bottom: 12px; }
+.ds-slide-quote-body {
+  font-size: clamp(var(--fs-lg), 3.5cqw, var(--fs-h2));
+  line-height: var(--lh-snug); color: var(--fg); font-weight: 400; font-style: italic;
+}
+.ds-slide-cite { font-family: var(--ff-mono); font-size: var(--fs-sm); color: var(--fg-3); }
+.ds-slide-bullet {
+  display: flex; gap: clamp(8px, 2vw, 18px); align-items: baseline;
+  border-bottom: 1px solid var(--rule); padding: 12px 0; flex-wrap: wrap;
+}
+.ds-slide-bullet-key {
+  flex: 0 1 clamp(56px, 18%, 100px); min-width: 0;
+  font-family: var(--ff-mono); font-size: var(--fs-sm);
+  color: var(--slide-accent, var(--accent-ink));
+}
+.ds-slide-bullet-val { color: var(--fg-2); font-size: var(--fs-lg); min-width: 0; }
+.ds-slide-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 3vw, 32px); margin-top: 12px; }
+@media (max-width: 760px) {
+  .ds-slide-split { grid-template-columns: 1fr; }
+}
+.ds-slide-split-cell {
+  padding: 18px; background: var(--bg-2); border-radius: var(--r-2);
+  color: var(--fg-2); font-size: var(--fs-lg); line-height: var(--lh-base); min-width: 0;
+}
+.ds-slide-split-cell--accent { border-left: 3px solid var(--slide-accent, var(--accent)); }
+
+/* --- error 404 --------------------------------------------- */
+.ds-err-hero {
+  padding: clamp(16px, 5vw, 36px) clamp(12px, 4vw, 22px);
+  text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center;
+}
+.ds-err-numeral {
+  font-family: var(--ff-mono); font-size: clamp(56px, 20vw, 120px);
+  line-height: 1; color: var(--panel-text-3); letter-spacing: -0.03em;
+}
+.ds-err-path {
+  display: inline-flex; gap: 6px; align-items: baseline; flex-wrap: wrap; max-width: 100%;
+  font-family: var(--ff-mono); font-size: 13px; color: var(--panel-text-2);
+  background: var(--panel-1); padding: 6px 12px; border-radius: var(--r-0);
+  overflow-wrap: anywhere; word-break: break-all;
+}
+
+/* --- gallery ------------------------------------------------ */
+.ds-tile-grid {
+  padding: clamp(8px, 2.5vw, 16px);
+  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); gap: 8px;
+}
+.ds-tile-grid--tight { grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); }
+.ds-swatch-grid {
+  padding: clamp(8px, 2.5vw, 16px);
+  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); gap: 12px;
+}
+.ds-gallery-tile {
+  cursor: pointer; display: flex; flex-direction: column; gap: 6px;
+  padding: 12px; border-radius: var(--r-1); min-height: clamp(120px, 18vw, 160px);
+  border: 0; text-align: left; font: inherit; color: inherit;
+  background: var(--tile-tone, var(--panel-1));
+  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
+}
+/* Flat tonal fill only (house style: no bespoke tile chrome, no borders — see
+   .ds-feature above), so the hover affordance is a lift, matching the same
+   translateY + shadow idiom .chat-msg:hover .chat-bubble already uses. */
+.ds-gallery-tile:hover { transform: translateY(-2px); box-shadow: 0 2px 8px color-mix(in oklab, var(--fg) 10%, transparent); }
+.ds-gallery-tile:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
+.ds-gallery-tile--tight { min-height: clamp(96px, 14vw, 120px); }
+.ds-lightbox {
+  position: fixed; inset: 0; background: var(--scrim);
+  display: flex; align-items: center; justify-content: center;
+  padding: clamp(12px, 4vw, 32px);
+  padding-bottom: max(clamp(12px, 4vw, 32px), env(safe-area-inset-bottom));
+  z-index: 50;
+}
+.ds-lightbox-card {
+  background: var(--panel-0); border-radius: var(--r-2); padding: clamp(16px, 4vw, 28px);
+  width: min(520px, 100%); min-width: 0;
+  max-height: calc(100vh - 24px);
+  max-height: calc(100dvh - 24px);
+  overflow: auto;
+  display: flex; flex-direction: column; gap: 14px;
+}
+.ds-lightbox-preview {
+  padding: clamp(16px, 6vw, 36px); border-radius: var(--r-1); text-align: center;
+  font-family: var(--ff-mono); white-space: pre-line; font-size: clamp(16px, 5vw, 24px);
+  background: var(--tile-tone, var(--panel-1));
+}
+
+/* --- search ------------------------------------------------- */
+.ds-topbar-search { width: min(280px, 100%); min-width: 0; flex: 1 1 clamp(140px, 30vw, 280px); }
+@media (max-width: 480px) {
+  .ds-topbar-search { flex-basis: 100%; }
+}
+.ds-empty-state { padding: clamp(16px, 5vw, 24px); text-align: center; color: var(--panel-text-3); }
+.ds-empty-state-glyph { font-size: clamp(24px, 6vw, 32px); }
+.ds-empty-state-msg { margin: 6px 0; }
+.ds-empty-state-hint { margin: 0; font-size: var(--fs-sm); }
+
+/* --- system primer ------------------------------------------ */
+.ds-swatch-grid-sm {
+  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(110px, 100%), 1fr));
+  gap: 12px; padding: clamp(10px, 2.5vw, 14px) clamp(10px, 3vw, 18px);
+}
+.ds-swatch-grid-lg { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); }
+.ds-swatch-col { display: flex; flex-direction: column; gap: 6px; }
+.ds-swatch-chip { height: 48px; border-radius: var(--r-1); border: 1px solid var(--rule); background: var(--swatch, var(--panel-1)); }
+.ds-swatch-chip--big { height: 64px; }
+.ds-swatch-name { font-family: var(--ff-mono); font-size: 11px; color: var(--fg-3); }
+.ds-type-panel { padding: clamp(10px, 2.5vw, 14px) clamp(10px, 3vw, 18px); display: flex; flex-direction: column; gap: 14px; }
+.ds-type-row {
+  display: flex; align-items: baseline; gap: 14px;
+  border-bottom: 1px solid var(--rule); padding-bottom: 8px; flex-wrap: wrap;
+}
+.ds-type-row-label { flex: 0 0 64px; font-family: var(--ff-mono); font-size: 11px; color: var(--fg-3); }
+.ds-type-sample {
+  min-width: 0; overflow-wrap: anywhere; line-height: var(--lh-tight); color: var(--fg);
+  font-size: var(--sample-size, var(--fs-body));
+}
+.ds-prim-panel { padding: clamp(10px, 2.5vw, 14px) clamp(10px, 3vw, 18px); display: flex; flex-direction: column; gap: 18px; }
+.ds-prim-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
+.ds-prim-label { flex: 0 0 64px; font-family: var(--ff-mono); font-size: 11px; color: var(--fg-3); }
+
+/* == appended: content-site == */
+/* Home landing wrappers (site/theme.mjs) — replace banned inline styles. */
+.ds-home-hero-wrap { padding: 0 var(--space-2, 8px); }
+.ds-home-panel { margin: var(--space-2, 8px); }
+@media (max-width: 480px) {
+  .ds-home-panel { margin: var(--space-1, 4px) 0; }
+}
+/* Home landing section tablist (site/theme.mjs Tabs()) — bare .tabs had no
+   rule anywhere, so the four links rendered as unstyled inline text jammed
+   together with no separation. Mirror the topbar nav pill-tab treatment. */
+.tabs[role="tablist"] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-1, 4px);
+  font-size: var(--fs-sm);
+}
+.tabs[role="tablist"] a {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1, 4px);
+  padding: var(--space-2, 8px) var(--space-3, 12px);
+  border-radius: var(--r-pill);
+  color: var(--fg-2);
+  transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease),
+    transform var(--dur-base) var(--ease-spring);
+}
+.tabs[role="tablist"] a:hover { background: var(--bg-2); color: var(--fg); transform: translateY(-1px); }
+.tabs[role="tablist"] a.active {
+  color: var(--accent-ink);
+  background: color-mix(in oklab, var(--accent) 16%, transparent);
+  box-shadow: inset 0 -2px 0 0 var(--accent);
+  font-weight: 600;
+}
+.ds-quickstart {
+  padding: var(--space-3, 16px) var(--space-4, 24px);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1-75, 6px);
+}
+/* Table() scroll containment — wide tables scroll inside their own box,
+   never the page body. */
+.ds-table-wrap {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  max-width: 100%;
+}
+.ds-table-wrap > table { min-width: 100%; }
+
+
+/* == appended: settings kit cleanup == */
+/* == appended: settings kit == */
+.ds-settings-main { padding: var(--space-2, 8px); }
+.ds-settings-body { padding: 14px 18px; }
+.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: 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: 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. */
+.ds-btn-mascot { color: var(--mascot-deep); }
+.ds-savebar {
+  position: sticky; bottom: 8px; display: flex; align-items: center;
+  justify-content: flex-end; gap: 8px; flex-wrap: wrap; padding: 10px;
+  background: var(--panel-2); border-radius: var(--r-1); margin: 8px 0;
+}
+.ds-savebar-note { flex: 1 1 160px; min-width: 0; color: var(--panel-text-2); }
+.ds-settings-modal { min-width: min(320px, calc(100vw - 32px)); max-width: 480px; }
+.ds-modal-body-form { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
+.ds-modal-note { margin: 0 0 8px; color: var(--panel-text-2); font-size: 14px; }
+.ds-draft-preview {
+  background: var(--panel-1); padding: 12px; border-radius: var(--r-0);
+  font-size: 13px; color: var(--panel-text-2); max-height: 120px;
+  overflow-y: auto; font-family: var(--ff-mono); overflow-wrap: anywhere;
+}
+.ds-modal-actions { display: flex; gap: 8px; margin-top: 12px; justify-content: space-between; flex-wrap: wrap; }
+
+/* == appended: signin kit cleanup == */
+/* -- signin kit (ui_kits/signin) -- */
+.ds-auth-wrap { padding: var(--space-2, 8px); display: flex; flex-direction: column; align-items: center; }
+.ds-auth-col { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 8px; margin: clamp(12px, 4vw, 24px) 0; min-width: 0; }
+.ds-auth-form { padding: clamp(12px, 3vw, 18px); display: flex; flex-direction: column; gap: 10px; }
+.ds-auth-sent { align-items: center; text-align: center; }
+.ds-auth-sent-glyph { font-size: 32px; color: var(--panel-accent); }
+.ds-auth-sent-title { margin: 0; font-weight: 600; }
+.ds-auth-sent-sub { margin: 0; color: var(--panel-text-2); overflow-wrap: anywhere; }
+.ds-auth-field { display: flex; flex-direction: column; gap: 4px; }
+.ds-auth-field-label { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--panel-text-3); }
+.ds-auth-row-between { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
+.ds-auth-remember { display: flex; align-items: center; gap: 6px; cursor: pointer; }
+.ds-auth-remember-text { color: var(--panel-text-2); font-size: 13px; }
+.ds-auth-forgot { font-size: 13px; }
+.ds-auth-error { padding: 8px 10px; background: var(--panel-1); border-radius: var(--r-0); color: var(--danger); font-size: 13px; overflow-wrap: anywhere; }
+.ds-auth-providers { display: flex; gap: 8px; flex-wrap: wrap; }
+.ds-auth-provider-btn { flex: 1 1 100px; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; }
+.ds-auth-provider-btn--loading { opacity: 0.7; pointer-events: none; }
+.ds-auth-provider-glyph { font-family: var(--ff-mono); color: var(--panel-text-3); display: inline-flex; }
+.ds-auth-modes { display: flex; justify-content: center; gap: 14px; margin-top: 8px; font-size: 13px; flex-wrap: wrap; }
+.ds-auth-mode-link { color: var(--panel-text-3); text-decoration: none; }
+.ds-auth-mode-link--active { color: var(--panel-text); text-decoration: underline; }
+.ds-auth-fineprint { text-align: center; font-size: 12px; color: var(--panel-text-3); margin: 6px 0; }
+
+/* == appended: gallery-misc kit cleanup == */
+/* --- shared helpers (converted from inline styles) --- */
+.ds-m0 { margin: 0; }
+.ds-text-2 { color: var(--panel-text-2); }
+.ds-text-3 { color: var(--panel-text-3); }
+.ds-kit-head { display: flex; align-items: center; justify-content: space-between; gap: clamp(8px, 2vw, 16px); flex-wrap: wrap; }
+
+/* --- gallery kit --- */
+.ds-tile-cap { flex: 1; display: flex; align-items: center; justify-content: center; font-family: var(--ff-mono); white-space: pre-line; color: var(--panel-text-2); font-size: 18px; min-width: 0; text-align: center; }
+.ds-tile-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 12px; flex-wrap: wrap; min-width: 0; }
+.ds-tile-glyph { font-family: var(--ff-mono); color: var(--panel-text-3); }
+.ds-tile-label { color: var(--panel-text); overflow-wrap: anywhere; }
+.ds-gal-swatch { height: 64px; border-radius: var(--r-0); background: var(--swatch, var(--panel-1)); }
+.ds-gal-swatch-meta { display: flex; justify-content: space-between; gap: 6px; flex-wrap: wrap; font-family: var(--ff-mono); font-size: 11px; min-width: 0; }
+.ds-gal-swatch-name { color: var(--panel-text); }
+.ds-gal-swatch-hint { color: var(--panel-text-3); overflow-wrap: anywhere; }
+.ds-lightbox-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
+.ds-lightbox-tag { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--panel-text-3); }
+
+/* --- error_404 kit --- */
+.ds-err-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
+.ds-err-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
+
+/* == appended: terminal-capp kit cleanup == */
+/* --- terminal kit ------------------------------------------ */
+.ds-section-pad-sm { padding: 8px; }
+.ds-kit-head-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
+.ds-cli-cmt .cmd { color: var(--fg-3); }
+.ds-cli-out .cmd { color: var(--fg-2); }
+.ds-cli-ok .prompt, .ds-cli-ok .cmd { color: var(--accent-ink); }
+.ds-cli-warn .prompt, .ds-cli-warn .cmd { color: var(--mascot-deep); }
+.ds-cli-log .prompt { color: var(--fg-3); }
+.ds-cli-log .cmd { color: var(--fg-2); font-family: var(--ff-mono); }
+.ds-term-body { padding: 14px 18px; display: flex; flex-direction: column; gap: 4px; background: var(--bg-2); border-radius: var(--r-1); }
+.ds-term-body--tall { min-height: 280px; }
+.ds-term-input-row { margin-top: 6px; }
+.ds-term-input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; font-family: var(--ff-mono); font-size: 13px; color: var(--fg); }
+/* full-viewport render root (community-app) */
+.ds-root-viewport { height: 100vh; height: 100dvh; }
+
+/* --- chat kit: widescreen detail pane -----------------------
+   .chat itself stays single-column (shared component, untouched) and
+   stretches full-width on ultrawide via the existing .app-main > .chat
+   max-width:none rule above (~L380) — that's fine for a bare thread, but
+   it leaves a lone thread column growing to 1400px+ with no other use of
+   the extra width. This wrapper adds a persistent "thread info" rail once
+   there is room to spare, instead of just widening the message column. */
+.ds-chat-layout { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: var(--space-3); }
+.ds-chat-layout > .chat { min-width: 0; }
+.ds-chat-detail { display: none; }
+@media (min-width: 1100px) {
+  .ds-chat-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; align-items: start; gap: var(--space-4); }
+  .ds-chat-detail { display: block; position: sticky; top: 0; }
+}

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

@@ -0,0 +1,120 @@
+
+/* ============================================================
+   Spinner — animated loading indicator
+   ============================================================ */
+.ds-spinner {
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
+  height: 16px;
+}
+.ds-spinner span {
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: var(--accent);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .ds-spinner span { animation: ds-bounce 1.4s infinite ease-in-out; }
+  .ds-spinner span:nth-child(1) { animation-delay: 0s; }
+  .ds-spinner span:nth-child(2) { animation-delay: 0.18s; }
+  .ds-spinner span:nth-child(3) { animation-delay: 0.36s; }
+}
+
+.ds-spinner-lg { height: 24px; gap: 6px; }
+.ds-spinner-lg span { width: 6px; height: 6px; }
+
+.ds-spinner-sm { height: 12px; gap: 2px; }
+.ds-spinner-sm span { width: 2px; height: 2px; }
+
+.ds-spinner-xs { height: 8px; gap: 1px; }
+.ds-spinner-xs span { width: 1.5px; height: 1.5px; }
+
+.ds-spinner-xl { height: 32px; gap: 8px; }
+.ds-spinner-xl span { width: 8px; height: 8px; }
+
+@keyframes ds-bounce {
+  0%, 80%, 100% { transform: translateY(0); }
+  40% { transform: translateY(-8px); }
+}
+
+/* ============================================================
+   Skeleton — animated loading placeholder
+   ============================================================ */
+.ds-skeleton-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+.ds-skeleton {
+  background: linear-gradient(90deg, var(--bg-2) 25%, var(--bg-3) 50%, var(--bg-2) 75%);
+  background-size: 200% 100%;
+  animation: ds-shimmer 1.5s infinite;
+  border-radius: var(--r-1);
+}
+
+@keyframes ds-shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+/* ============================================================
+   Alert — contextual message banner
+   ============================================================ */
+.ds-alert {
+  display: flex;
+  gap: var(--space-3);
+  align-items: flex-start;
+  padding: var(--space-3) var(--space-4);
+  border-radius: var(--r-1);
+  background: var(--panel-1);
+  border: 1px solid var(--rule-strong);
+  color: var(--fg);
+}
+
+.ds-alert-info { --alert-tone: var(--sky); }
+.ds-alert-success { --alert-tone: var(--green); }
+.ds-alert-warn { --alert-tone: var(--amber); }
+.ds-alert-error { --alert-tone: var(--warn); }
+
+.ds-alert-icon {
+  flex-shrink: 0;
+  color: var(--alert-tone);
+  font-weight: 600;
+  min-width: 20px;
+  text-align: center;
+}
+
+.ds-alert-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.ds-alert-title {
+  font-weight: 500;
+  font-size: var(--fs-sm);
+}
+
+.ds-alert-message {
+  font-size: var(--fs-sm);
+  color: var(--fg-2);
+}
+.ds-alert-retry { margin-top: var(--space-2); }
+
+.ds-alert-dismiss {
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--fg-3);
+  padding: 0;
+  font-size: 14px;
+  line-height: 1;
+  min-width: 20px;
+  text-align: center;
+  transition: color var(--dur-snap) var(--ease);
+}
+.ds-alert-dismiss:hover { color: var(--fg); }
+

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

@@ -0,0 +1,177 @@
+/* ============================================================
+   Panel — soft tonal container, no border decoration
+   ============================================================ */
+.panel {
+  background: var(--panel-1, var(--bg-2));
+  border: var(--bw-hair) solid var(--rule);
+  border-radius: var(--r-2);
+  margin: 0 0 var(--space-4);
+  padding: var(--space-3);
+  position: relative;
+  /* Crisp, restrained elevation — a hairline border does the edge definition;
+     the shadow only adds a whisper of lift, not a soft glow-card float. */
+  box-shadow: var(--shadow-1);
+  transition: box-shadow var(--dur-base) var(--ease-spring), border-color var(--dur-snap) var(--ease),
+    transform var(--dur-base) var(--ease-spring);
+}
+/* Editorial accent spine — an opt-in printed-ink rule down the left edge that
+   reads as a magazine pull-quote bar, not a glow card. */
+.panel.panel-spine {
+  border-radius: 0 var(--r-2) var(--r-2) 0;
+  padding-left: calc(var(--space-3) + var(--bw-chunk));
+}
+.panel.panel-spine::before {
+  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
+  width: var(--bw-chunk); background: var(--accent);
+  border-radius: var(--bw-chunk) 0 0 var(--bw-chunk);
+}
+.panel.panel-inline { background: var(--bg-2); padding: var(--space-3) var(--space-3); }
+.panel.panel-wide   { background: transparent; box-shadow: none; border: none; }
+/* Dense panel — a compact container for app surfaces (inspector sections,
+   sidebars) that want the .panel look without the roomy 16px pad + 24px stack
+   gap. Tighter corner + padding + head, so it sits between .panel and the
+   flush editor .ds-ep-panel. */
+.panel.panel--dense {
+  padding: var(--space-2); margin-bottom: var(--space-2-75);
+  border-radius: var(--r-1);
+}
+.panel.panel--dense .panel-head { padding: var(--space-1-5) var(--space-2); }
+.panel.panel--dense .panel-body { padding: var(--space-1-5) var(--space-2) var(--space-2); }
+.panel.panel--dense .panel-body > * + * { margin-top: var(--space-2); }
+.panel-head {
+  display: flex; align-items: baseline; justify-content: space-between;
+  /* Shares the .panel-body 16px side padding so the caps label and the body
+     rows sit on ONE left axis (the old 24/32 padding was authored for the
+     pre-padding .panel-wide era and indented the label 16px past its content). */
+  padding: var(--space-2) var(--space-3);
+  font-size: var(--fs-tiny); font-weight: 600;
+  color: var(--fg-3);
+  letter-spacing: var(--tr-caps); text-transform: uppercase;
+}
+.panel.panel-wide .panel-head { padding-left: 0; padding-right: 0; }
+.panel-head > :last-child {
+  font-weight: 500; color: var(--fg-3);
+  font-family: var(--ff-mono); letter-spacing: 0;
+}
+.panel-body { padding: var(--space-2) var(--space-3) var(--space-3); }
+.panel-body > * { margin: 0; }
+.panel-body > * + * { margin-top: var(--space-3); }
+.panel.panel-wide .panel-body { padding: 0; }
+
+/* ============================================================
+   Row — primary list pattern. Indicator rail on the left,
+   no hairlines between rows.
+   ============================================================ */
+.row {
+  display: grid;
+  grid-template-columns: minmax(80px, 12ch) minmax(0, 1fr) auto;
+  gap: var(--space-3);
+  align-items: baseline;
+  /* App density is the BASE: a list row is quiet working chrome, so it defaults
+     to the compact 12px/16px rhythm (density-scaled) rather than the old
+     16px/24px marketing padding. .row--lede restores the roomier marketing
+     voice for editorial index pages. */
+  padding: calc(var(--space-2-75) * var(--density)) var(--space-3);
+  background: var(--bg);
+  border-radius: var(--r-1);
+  color: var(--fg);
+  position: relative;
+  /* Only background + the leading rail animate; padding/size never change on
+     interaction, so they are deliberately absent (a padding transition here was
+     dead and misleading). */
+  transition: background var(--dur-snap) var(--ease), box-shadow var(--dur-base) var(--ease-spring);
+}
+.row + .row { margin-top: 2px; }
+/* Interactive rows (anchor/button wrappers) get a hairline lift on hover,
+   matching the btn/panel elevation language — non-interactive rows (plain
+   divs used as static list items) are unaffected since the selector needs a
+   real interactive role. */
+a.row:hover, button.row:hover, .row[role="button"]:hover {
+  box-shadow: var(--shadow-1);
+}
+/* `detail` drops to its own full-width line. The row is a grid, so span every
+   track (grid-column 1/-1); flex-basis:100% covers the flex-row fallback. */
+.ds-row-detail {
+  white-space: pre-wrap;
+  font-family: var(--ff-mono);
+  font-size: var(--fs-sm);
+  line-height: var(--lh-snug);
+  margin-top: var(--space-2);
+  padding: 10px 12px;
+  background: var(--bg);
+  border-radius: var(--r-1);
+  overflow-x: auto;
+  flex-basis: 100%;
+  grid-column: 1 / -1;
+}
+.row::before {
+  content: '';
+  position: absolute; left: 7px; top: 0; bottom: 0; width: 3px;
+  margin: auto 0;
+  height: 0;                 /* collapsed by default; reveals from centre */
+  background: var(--rule-strong);
+  border-radius: var(--r-pill);
+  opacity: 0;
+  transition: height var(--dur-base) var(--ease), opacity var(--dur-snap) var(--ease), background var(--dur-snap) var(--ease);
+}
+/* A clickable row (onClick -> role=button, or a link row) is interactive, so it
+   carries a pointer cursor; without this the click affordance is invisible. */
+.row[role="button"], a.row { cursor: pointer; }
+/* Hover reveals the rail (grows from centre) only on interactive rows — a static
+   row should not signal an affordance it does not have. */
+.row[role="button"]:hover, a.row:hover { background: var(--bg-2); }
+.row[role="button"]:hover::before, a.row:hover::before { height: 56%; opacity: 1; }
+/* Editorial hover-reveal — the row's meta (cta) slides toward the lead accent
+   and nudges right, the printed-index "open ->" affordance. */
+.row .meta { transition: color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease-spring); }
+a.row:hover .meta, .row[role="button"]:hover .meta { color: var(--accent-ink); transform: translateX(3px); }
+.row.active { background: color-mix(in oklab, var(--accent) 10%, var(--bg-2)); }
+.row.active::before { height: 64%; opacity: 1; background: var(--accent); }
+.row.active .title { color: var(--accent-ink); }
+.row.row-state-disabled { opacity: 0.5; pointer-events: none; }
+.row.row-state-error { background: color-mix(in oklab, var(--flame) 10%, var(--bg-2)); }
+.row.row-state-error::before { height: 64%; opacity: 1; background: var(--flame); }
+/* rail tones — a persistent status colour on the leading rail (the ::before
+   bar). Always shown (a status indicator, not a hover affordance). Active/error
+   still win via their own rules below in source order. */
+.row.rail-green::before,
+.row.rail-purple::before,
+.row.rail-flame::before { height: 56%; opacity: 1; }
+.row.rail-green::before  { background: var(--accent-ink); }
+.row.rail-purple::before { background: var(--purple-2); }
+.row.rail-flame::before  { background: var(--flame); }
+/* Differentiate the rail by SHAPE, not hue alone (color-blind safety): error
+   reads as a taller solid bar, subagent as a dashed/gapped fill, ok stays the
+   short solid bar. Paired with the sr-only status word emitted by Row(). */
+.row.rail-flame::before  { height: 64%; }
+.row.rail-purple::before { background: repeating-linear-gradient(var(--purple-2) 0 4px, transparent 4px 7px); }
+.row-grid { /* explicit grid-template-columns set inline */ }
+/* A row with no leading code/index drops the empty first column so the title
+   takes the full width instead of wrapping in the narrow code gutter. */
+.row.row-nocode { grid-template-columns: minmax(0, 1fr) auto; }
+
+.row .code  { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
+/* Title defaults to the quiet app voice (fs-sm/500) — the 18px/600 marketing
+   voice is now opt-in via .row--lede. */
+.row .title { font-family: var(--ff-body); font-weight: 500; font-size: var(--fs-sm); line-height: var(--lh-snug); display: flex; align-items: baseline; gap: var(--space-2-5); flex-wrap: wrap; min-width: 0; }
+.row .title .sub { font-family: var(--ff-body); font-weight: 400; font-size: var(--fs-sm); color: var(--fg-3); }
+/* Marketing/editorial index row — restores the roomier padding + larger title
+   the default carried before app-scale became the base. */
+.row--lede { padding: var(--space-3) var(--space-4); }
+.row--lede .title { font-size: var(--fs-lg); font-weight: 600; }
+/* App typescale: list rows are quiet working chrome (the 18px/600 default is a
+   marketing-surface voice). One size for ALL app list rows - matches
+   .ds-file-row/.ds-session-title at fs-sm/500; values mirror the kit's own
+   mobile block below. Marketing pages without data-typescale keep the default. */
+[data-typescale="app"] .row { padding: 12px 16px; }
+[data-typescale="app"] .row .title { font-size: var(--fs-sm); font-weight: 500; }
+.row .sub   { font-family: var(--ff-body); font-weight: 400; font-size: var(--fs-sm); color: var(--fg-3); }
+/* Context-pane cwd fact reads as a path (like .ds-dash-cwd/.ds-session-agent/
+   .ds-dash-model) -- scoped to that one row so no other Row .sub is affected. */
+.ds-context-cwd-row .row .sub { font-family: var(--ff-mono); }
+.row .meta  { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; align-self: center; }
+/* WorksList meta pairs a label with a disclosure chevron, inline-aligned. */
+.ds-works-meta { display: inline-flex; align-items: center; gap: .4em; }
+
+a.row { text-decoration: none; }
+