anentrypoint-design 0.0.322 → 0.0.324

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

@@ -0,0 +1,197 @@
+/* ============================================================
+   Primitives
+   ============================================================ */
+.btn, .btn-primary, .btn-ghost {
+  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+  /* Fixed height + horizontal-only padding: the control height is exact and
+     alignable (flex centres the label vertically), the way webgeist snaps every
+     control to a height ladder. Default is the --ctl-md rung; --btn-sm/--btn-lg
+     retune height + h-padding + font per size. Density scales the ladder. */
+  height: var(--ctl-md); min-height: var(--ctl-md);
+  padding: 0 var(--space-2-75);
+  font-family: var(--ff-body);
+  font-weight: 600; font-size: var(--fs-sm);
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  /* Rounded-rect app chrome, not a marketing-page stadium CTA.
+     Shape vocabulary: r-1/r-2 = actionable buttons, icon-buttons, and
+     containers; r-pill = reserved for status/input/chip/badge/progress
+     surfaces (composer input, chips, badges, progress bars, theme-toggle
+     segments) - never for actions. */
+  border-radius: var(--r-1);
+  border: var(--bw-hair) solid transparent;
+  box-shadow: none;
+  /* Restrained hover-lift: a 1px rise + hairline shadow reads as a crisp,
+     confident affordance rather than a soft glow-card float. */
+  transition: transform var(--dur-base) var(--ease-spring), background var(--dur-snap) var(--ease),
+    color var(--dur-snap) var(--ease), box-shadow var(--dur-base) var(--ease-spring),
+    border-color var(--dur-snap) var(--ease);
+}
+.btn { background: var(--bg-2); color: var(--fg); border-color: var(--rule); }
+.btn:hover { background: var(--bg-3); color: var(--fg); transform: translateY(-1px); box-shadow: var(--shadow-1); }
+/* Primary CTA — the electric lead as a solid editorial block; hover inverts to
+   an ink block with the lead as text, a confident two-tone flip. */
+.btn-primary {
+  background: var(--accent); color: var(--accent-fg);
+  font-weight: 700;
+}
+.btn-primary:hover { background: var(--fg); color: var(--accent-ink); transform: translateY(-1px); box-shadow: var(--shadow-2); }
+.btn-ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 2px var(--fg); }
+.btn-ghost:hover { background: var(--fg); color: var(--bg); transform: translateY(-1px); }
+.btn:active, .btn-primary:active, .btn-ghost:active { transform: translateY(1px); box-shadow: none; }
+.btn:focus-visible, .btn-primary:focus-visible, .btn-ghost:focus-visible, .ds-icon-btn:focus-visible {
+  outline: var(--focus-w) solid var(--focus-color);
+  outline-offset: var(--focus-offset);
+}
+
+/* Button size ladder — the size prop on Btn() (sm | md | lg). md is the base
+   rule above; sm/lg retune height (off the --ctl-* ladder), horizontal padding,
+   and font-size so a size swap is one class, never inline padding overrides
+   (the old preview faked sizes with style=). Applies to every variant. */
+.btn-sm, .btn-sm.btn-primary, .btn-sm.btn-ghost {
+  height: var(--ctl-sm); min-height: var(--ctl-sm);
+  padding: 0 var(--space-2); font-size: var(--fs-tiny); gap: var(--space-1);
+}
+.btn-lg, .btn-lg.btn-primary, .btn-lg.btn-ghost {
+  height: var(--ctl-lg); min-height: var(--ctl-lg);
+  padding: 0 var(--space-4); font-size: var(--fs-body); gap: var(--space-2);
+}
+
+/* App-mode quiet interactions — the marketing hover-lift (translateY + shadow)
+   and the .row .meta slide read as decorative float on a dense working surface.
+   Under [data-typescale="app"], state changes are background/border-only: crisp,
+   no motion, no elevation. Marketing surfaces (no data-typescale) keep the lift. */
+[data-typescale="app"] .btn:hover,
+[data-typescale="app"] .btn-primary:hover,
+[data-typescale="app"] .btn-ghost:hover { transform: none; box-shadow: none; }
+[data-typescale="app"] .btn:active,
+[data-typescale="app"] .btn-primary:active,
+[data-typescale="app"] .btn-ghost:active { transform: none; }
+[data-typescale="app"] .panel { transition: box-shadow var(--dur-snap) var(--ease), border-color var(--dur-snap) var(--ease); }
+[data-typescale="app"] a.row:hover .meta,
+[data-typescale="app"] .row[role="button"]:hover .meta { transform: none; }
+
+/* ============================================================
+   IconButton — square icon-only button
+   ============================================================ */
+.ds-icon-btn {
+  display: inline-flex; align-items: center; justify-content: center;
+  padding: 0; border: none; cursor: pointer;
+  border-radius: var(--r-1, 6px);
+  background: transparent; color: var(--fg);
+  width: 32px; height: 32px;
+}
+.ds-icon-btn-xs { width: 22px; height: 22px; }
+.ds-icon-btn-sm { width: 26px; height: 26px; }
+.ds-icon-btn-base { width: 32px; height: 32px; }
+.ds-icon-btn-lg { width: 40px; height: 40px; }
+.ds-icon-btn-xl { width: 48px; height: 48px; }
+.ds-icon-btn-ghost { background: transparent; }
+.ds-icon-btn-ghost:hover { background: var(--fg); color: var(--bg); }
+.ds-icon-btn-primary { background: var(--accent); color: var(--accent-fg); }
+.ds-icon-btn-primary:hover { background: var(--fg); color: var(--accent-ink); }
+/* warn = destructive ACTION tone; flame stays exclusively error STATUS. */
+.ds-icon-btn-danger { background: var(--warn); color: var(--on-color); }
+.ds-icon-btn-danger:hover { filter: brightness(0.92); }
+.ds-icon-btn:active { transform: translateY(1px); }
+.ds-icon-btn:disabled, .ds-icon-btn.is-disabled {
+  opacity: 0.5; cursor: not-allowed; pointer-events: none;
+}
+
+/* ============================================================
+   Badge — small inline count/status pill
+   ============================================================ */
+.ds-badge {
+  display: inline-flex; align-items: center; justify-content: center;
+  min-width: 18px; height: 18px; padding: 0 6px;
+  font-size: var(--fs-micro); font-weight: 600; line-height: 1;
+  border-radius: var(--r-pill);
+  background: var(--bg-3); color: var(--fg-2);
+}
+/* Badge size ladder — sm for dense inline counts, lg for prominent markers.
+   Base (above) stays the 18px default. */
+.ds-badge.ds-badge--sm { min-width: 14px; height: 14px; padding: 0 var(--space-1); font-size: 10px; }
+.ds-badge.ds-badge--lg { min-width: 22px; height: 22px; padding: 0 var(--space-2); font-size: var(--fs-tiny); }
+/* Canonical tone names are tone-success / tone-error / tone-neutral. Every
+   other tone name grouped into the same rule below (tone-green/tone-live,
+   tone-flame, tone-wip, tone-sun/tone-yellow, tone-ok/tone-miss) is a
+   true-synonym legacy alias, kept working but sharing one declaration so the
+   tone-family colors can't drift apart across names. */
+.ds-badge.tone-green, .ds-badge.tone-live, .ds-badge.tone-success {
+  background: var(--green-tint); color: var(--green-deep);
+}
+.ds-badge.tone-flame, .ds-badge.tone-error {
+  background: var(--flame); color: var(--on-color);
+}
+.ds-badge.tone-wip, .ds-badge.tone-neutral {
+  background: var(--bg-3); color: var(--fg-2);
+}
+.ds-badge.tone-purple  { background: var(--purple-tint); color: var(--purple-deep); }
+.ds-badge.tone-mascot  { background: var(--mascot-tint); color: var(--ink); }
+.ds-badge.tone-sun, .ds-badge.tone-yellow {
+  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) 30%, var(--sun) 70%); color: var(--ink); }
+
+.chip {
+  display: inline-flex; align-items: center; gap: var(--space-1-75);
+  padding: 3px 10px;
+  background: var(--bg-2); color: var(--fg-2);
+  font-family: var(--ff-body);
+  font-size: var(--fs-tiny); font-weight: 600;
+  letter-spacing: var(--tr-caps); text-transform: uppercase;
+  border-radius: var(--r-pill);
+}
+/* Chip size ladder — sm for dense toolbars/table cells, lg for prominent
+   status. tone-* colouring (below) is orthogonal to size. */
+.chip.chip--sm { padding: var(--space-half) var(--space-2); font-size: var(--fs-micro); gap: var(--space-1); }
+.chip.chip--lg { padding: var(--space-1-75) var(--space-2-75); font-size: var(--fs-xs); }
+/* Tag variant — a rectangular, sentence-case chip for dense data (table cells,
+   inline labels) where the all-caps pill reads too shouty and space-hungry.
+   Keeps the tone-* palette; drops the caps + pill for a tight --r-0 corner. */
+.chip.chip--tag {
+  text-transform: none; letter-spacing: 0; font-weight: 500;
+  border-radius: var(--r-0); padding: var(--space-half) var(--space-2);
+}
+/* Same canonical/legacy-alias grouping as .ds-badge above. */
+.chip.tone-green, .chip.tone-live, .chip.tone-success, .chip.tone-ok {
+  background: var(--green-tint); color: var(--green-deep);
+}
+.chip.tone-flame, .chip.tone-error, .chip.tone-miss {
+  background: var(--flame); color: var(--on-color);
+}
+.chip.tone-wip, .chip.tone-neutral {
+  background: var(--bg-3); color: var(--fg-2);
+}
+.chip.tone-purple  { background: var(--purple-tint); color: var(--purple-deep); }
+.chip.tone-mascot  { background: var(--mascot-tint); color: var(--ink); }
+.chip.tone-sun, .chip.tone-yellow {
+  background: var(--sun); color: var(--ink);
+}
+.chip.tone-disabled { background: var(--bg-3);        color: var(--fg-3); }
+.chip.tone-blue     { background: var(--accent-tint); color: var(--accent-ink); }
+.chip.tone-orange   { background: color-mix(in oklab, var(--flame) 30%, var(--sun) 70%); color: var(--ink); }
+.chip.tone-yellow   { background: var(--sun);         color: var(--ink); }
+
+/* ds-pill — plain neutral chip, distinct from the toned .ds-badge/.chip family
+   (gmsniff's .pill: a bare rounded label with no semantic tone). */
+.ds-pill {
+  display: inline-block;
+  padding: 1px 7px;
+  border-radius: var(--r-pill);
+  font-size: var(--fs-micro);
+  background: var(--bg-3); color: var(--fg-2);
+  margin: 1px;
+}
+.ds-pill.tone-accent { background: var(--accent-tint); color: var(--accent-ink); }
+.ds-pill.tone-muted  { background: transparent; color: var(--fg-3); box-shadow: inset 0 0 0 1px var(--rule); }
+
+.glyph {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 18px; height: 18px;
+  font-family: var(--ff-mono); font-size: var(--fs-tiny);
+  opacity: 0.8;
+}
+

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

@@ -0,0 +1,266 @@
+
+/* ============================================================
+   Responsive Design — Mobile (480px), Tablet (1024px), Desktop (1440px+)
+   ============================================================ */
+
+/* --------------------------------------------------------------------
+   Mobile Portrait Breakpoint (480px and below)
+   ---------------------------------------------------------------------- */
+@media (max-width: 480px) {
+  /* App Layout: single-column + drawer is handled once in the ≤900px block;
+     no need to re-declare grid-template-columns here (was a redundant !important). */
+
+  /* Topbar Navigation: stack the nav onto its own full-width row below the
+     brand and let it scroll horizontally. The brand stays on the first row;
+     nav wraps to a second row at 100% width (flex-wrap on .app-topbar). */
+  .app-topbar {
+    gap: var(--space-2); padding: 12px var(--space-3);
+  }
+  /* When the topbar is folded into .app-chrome it is a flex:0 0 auto child, so
+     it sizes to its nav's content and overflows the viewport instead of letting
+     the nav's own overflow-x:auto engage. Constrain it to the chrome width so
+     the horizontally-scrolling nav stays inside the screen. */
+  .app-chrome > .app-topbar { max-width: 100%; min-width: 0; flex-basis: 100%; }
+  .app-topbar > nav {
+    flex: 1 1 100%; margin-left: 0; order: 3; min-width: 0; max-width: 100%;
+    display: flex; gap: 2px; flex-wrap: nowrap;
+    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
+    /* Fade the trailing edge so a clipped last item (e.g. "source ->" cut to
+       "sour") reads as scrollable content, not a broken/truncated label. */
+    mask-image: linear-gradient(90deg, var(--fg) 0 calc(100% - 28px), transparent 100%);
+    -webkit-mask-image: linear-gradient(90deg, var(--fg) 0 calc(100% - 28px), transparent 100%);
+  }
+  .app-topbar nav::-webkit-scrollbar { display: none; }
+  .app-topbar nav a {
+    flex: 0 0 auto; padding: 10px 12px; min-height: 44px; white-space: nowrap;
+  }
+  .brand { font-size: var(--fs-tiny); font-weight: 600; }
+
+  /* Search */
+  .app-search {
+    display: none; /* Hide search on mobile unless explicitly pinned */
+  }
+
+  /* Main Content */
+  .app-main { padding: var(--space-4) var(--space-2); }
+  .app-main.narrow { max-width: 100%; margin: 0; }
+
+  /* Headings stay on the fluid base clamps (cqi) — no mobile re-clamp. */
+
+  /* Panel & Row */
+  .panel { margin: 0 0 var(--space-3); }
+  .panel-head { padding: var(--space-3) var(--space-2); gap: var(--space-2); }
+  .panel-body { padding: var(--space-2); overflow-x: auto; -webkit-overflow-scrolling: touch; }
+  .panel-body > table { min-width: 100%; }
+
+  .row {
+    grid-template-columns: minmax(0, 1fr) auto !important;
+    gap: var(--space-2); padding: 12px 16px;
+    row-gap: 4px !important;
+  }
+  .row .sub { grid-column: 1 / -1; order: 3; }
+  .row .title { font-size: var(--fs-sm); }
+  /* Changelog carries 3 children: give date+ver line one, message wraps below
+     (the generic 2-col .row override staggers it into an implicit row). */
+  .ds-changelog-row { grid-template-columns: minmax(70px, 10ch) minmax(0, 1fr) !important; }
+  .ds-changelog-row .title { grid-column: 1 / -1; }
+
+  /* Buttons */
+  .btn, .btn-primary, .btn-ghost {
+    padding: 11px 16px; font-size: var(--fs-tiny);
+    min-height: 44px; /* Touch target minimum */
+  }
+
+  /* File Grid */
+  .ds-file-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+  }
+  .ds-file-row {
+    gap: 8px; padding: 10px 12px;
+    font-size: var(--fs-xs);
+  }
+  .ds-file-open { gap: 10px; }
+  /* At mobile row widths, a fixed-size meta column (date/size) plus the
+     always-visible action buttons leave the flexible title only a few px —
+     not enough for even one legible character before the two collide. Drop
+     the metadata column here; the title + actions still fully identify and
+     operate on the row, and meta stays available in the file viewer. */
+  .ds-file-row .ds-file-meta { display: none; }
+  .ds-file-row .ds-file-actions { opacity: 1; }
+  /* H4: floor finger-sized controls so file actions/sort/filter/breadcrumb are
+     reachable by touch (cohesion sweep). */
+  .ds-file-act, .ds-file-sort-btn, .ds-crumb-seg { min-height: 44px; }
+  .ds-file-filter-input { min-height: 44px; }
+  .ds-file-check, .ds-file-selectall, .ds-density-btn { min-height: 44px; min-width: 44px; }
+
+  /* Chat */
+  .chat-stack { max-width: 100%; min-width: 0; }
+  .chat-bubble {
+    padding: 10px 12px; font-size: var(--fs-sm);
+  }
+  .chat-avatar { width: 28px; height: 28px; font-size: 11px; }
+  .chat-msg:hover { padding: 4px 0; margin: 0; background: transparent; }
+  .chat-composer { padding: 8px; gap: 6px; }
+  .chat-composer textarea { padding: 10px 12px; font-size: var(--fs-sm); }
+
+  /* KPI Cards */
+  .kpi {
+    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+    gap: var(--space-2);
+  }
+  .kpi-card { padding: var(--space-3); }
+  /* Container-relative like the base rule (5vw sized against the viewport and
+     jumped across the breakpoint). */
+  .kpi-card .num { font-size: clamp(22px, 8cqi, 32px); }
+
+  /* Empty State */
+  .empty { padding: var(--space-5); font-size: var(--fs-xs); }
+
+  /* Form */
+  .row-form { gap: 10px; padding: var(--space-3); }
+  .row-form input,
+  .row-form textarea { padding: 11px 12px; font-size: var(--fs-sm); }
+
+  /* Hero Section — keep fluid base font-size, just unconstrain width on mobile. */
+  .ds-hero { padding: var(--space-6) 0 var(--space-5); }
+  .ds-hero-title { max-width: 100%; }
+  .ds-hero-body { max-width: 100%; }
+
+  /* Table Responsiveness */
+  table { font-size: var(--fs-xs); }
+  table th,
+  table td { padding: 10px 12px; }
+
+  /* CLI Block */
+  .cli {
+    flex-direction: column; align-items: flex-start; gap: 10px;
+    padding: 16px 12px; font-size: var(--fs-xs);
+  }
+  .cli .copy { padding: 6px 12px; font-size: var(--fs-micro); }
+}
+
+/* --------------------------------------------------------------------
+   Container Query Responsive (720px and below)
+   ---------------------------------------------------------------------- */
+@container (max-width: 760px) {
+  .app-body { grid-template-columns: 1fr !important; }
+  .app-side-shell { border-right: 0; border-bottom: 1px solid var(--rule); }
+  .app-topbar nav { font-size: var(--fs-xs); gap: 14px; }
+  .row { grid-template-columns: minmax(0, 1fr) auto !important; row-gap: 4px !important; }
+  .row .sub { grid-column: 1 / -1; order: 3; }
+  .ds-changelog-row { grid-template-columns: minmax(70px, 10ch) minmax(0, 1fr) !important; }
+  .ds-changelog-row .title { grid-column: 1 / -1; }
+}
+
+/* --------------------------------------------------------------------
+   Tablet Landscape Breakpoint (768px to 1024px)
+   ---------------------------------------------------------------------- */
+@media (min-width: 481px) and (max-width: 1024px) {
+  /* App Layout — side handled by 900px drawer block; restore for 901-1024 */
+  .app-side a {
+    padding: 12px 12px; gap: 8px;
+    grid-template-columns: 16px 1fr auto;
+    font-size: var(--fs-xs);
+    min-height: 44px;
+  }
+
+  /* Topbar Navigation (flex container — no grid-template here) */
+  .app-topbar {
+    gap: var(--space-3); padding: 12px var(--space-4);
+  }
+  .app-topbar nav {
+    display: flex; gap: 8px; font-size: var(--fs-xs);
+    flex-wrap: wrap;
+  }
+  .app-topbar nav a {
+    padding: 12px 12px; font-size: var(--fs-xs);
+    min-height: 44px;
+  }
+  .brand { font-size: var(--fs-sm); }
+
+  /* Search */
+  .app-search {
+    display: inline-flex;
+    max-width: 280px; font-size: var(--fs-xs);
+    padding: 8px 14px;
+  }
+
+  /* Main Content */
+  .app-main { padding: var(--space-6) var(--space-4); }
+  .app-main.narrow { max-width: 100%; }
+
+  /* Headings stay on the fluid base clamps (cqi) — no tablet re-clamp. */
+
+  /* File list — single column rows on tablet (cards only via data-columns) */
+  .ds-file-row {
+    grid-template-columns: 24px minmax(0, 1fr) auto auto;
+    gap: 12px; padding: 12px 14px;
+  }
+
+  /* Chat Bubbles */
+  .chat-stack { max-width: min(75%, 420px); }
+  .chat-bubble {
+    padding: 11px 14px; font-size: var(--fs-sm);
+  }
+  .chat-avatar { width: 32px; height: 32px; font-size: 12px; }
+
+  /* KPI Cards */
+  .kpi {
+    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+    gap: var(--space-3);
+  }
+
+  /* Buttons */
+  .btn, .btn-primary, .btn-ghost {
+    padding: 12px 18px; font-size: var(--fs-sm);
+  }
+
+  /* Panel - keep the head on the body's left axis at laptop widths too. */
+  .panel-head { padding: var(--space-2) var(--space-3); }
+  .panel-body { padding: var(--space-2) var(--space-3); }
+
+  /* Hero — fluid base font-size; only width unconstrained on tablet. */
+  .ds-hero { padding: var(--space-7) 0 var(--space-6); max-width: 100%; }
+  .ds-hero-title { max-width: 100%; }
+
+  /* Row */
+  .row {
+    grid-template-columns: minmax(90px, 12ch) minmax(0, 1fr) auto;
+    gap: var(--space-2); padding: 14px 16px;
+  }
+}
+
+/* --------------------------------------------------------------------
+   Mid Breakpoint (768px and below) — collapse sidebar + simplify row grid
+   ---------------------------------------------------------------------- */
+@media (max-width: 768px) {
+  /* Sidebar stacks above main rather than sitting beside it */
+  .app-body { grid-template-columns: 1fr; }
+  .app-side { width: 100%; max-width: none; }
+
+  /* Row drops the leading code column; title + meta share the line */
+  .row {
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: var(--space-2);
+  }
+  .row .code { display: none; }
+  /* Changelog's date lives in span.code — hiding it is data loss, not reflow. */
+  .ds-changelog-row .code { display: inline; font-size: var(--fs-micro); }
+  .row .sub { grid-column: 1 / -1; }
+}
+
+/* --------------------------------------------------------------------
+   Desktop Breakpoint Enhancements (1025px and up)
+   ---------------------------------------------------------------------- */
+@media (min-width: 1025px) {
+  /* Chat Bubbles */
+  .chat-stack { max-width: min(70%, 480px); }
+
+  /* KPI Cards */
+  .kpi {
+    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+    gap: var(--space-3);
+  }
+}