anentrypoint-design 0.0.322 → 0.0.324

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

@@ -0,0 +1,157 @@
+/* ============================================================
+   247420 design system — component sheet
+   "Acid Editorial": system-font display + body + mono, no custom web fonts.
+   Confident hierarchy, asymmetric grid tension, print texture over glow,
+   one electric lead accent. Indicator rails over hairlines.
+   ============================================================ */
+
+/* ============================================================
+   Base
+   ============================================================ */
+* { box-sizing: border-box; }
+html, body { margin: 0; padding: 0; }
+button, input, select, textarea { font: inherit; }
+
+/* ============================================================
+   Accessibility — Skip Link
+   ============================================================ */
+.skip-link {
+  position: absolute;
+  top: -40px;
+  left: 0;
+  background: var(--accent);
+  color: var(--accent-fg);
+  padding: 8px 16px;
+  text-decoration: none;
+  z-index: 100;
+  border-radius: var(--r-pill);
+  font-weight: 600;
+  font-size: var(--fs-sm);
+}
+.skip-link:focus {
+  top: 10px;
+  outline: var(--focus-w) solid var(--focus-color);
+  outline-offset: var(--focus-offset);
+}
+body {
+  background: var(--bg);
+  color: var(--fg);
+  font-family: var(--ff-body);
+  font-size: var(--fs-body);
+  line-height: var(--lh-base);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+/* Light (paper, the default theme) needs a stronger accent share than dark to
+   clear a visible selection tint against --bg-2 -- the dark-theme value (24%)
+   read too weak on paper. Dark/ink keeps its existing 24% mix, restored below
+   in the ink/dark + auto-dark blocks (mirrors the --danger/--flame pattern of
+   scoping a value per theme rather than sharing one across both). */
+::selection { background: color-mix(in oklab, var(--accent) 46%, var(--bg-2)); color: var(--fg); }
+
+/* Every root has a CQ container so fluid type can resolve to a meaningful inline-size. */
+.app, .ds-stage {
+  container-type: inline-size;
+  overflow-x: clip;
+  min-width: 0;
+}
+.app * { min-width: 0; }
+
+/* ============================================================
+   Typography
+   ============================================================ */
+h1, .t-h1 { font-family: var(--ff-display); font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); font-weight: 600; margin: 0; }
+h2, .t-h2 { font-family: var(--ff-display); font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); font-weight: 600; margin: 0; }
+h3, .t-h3 { font-family: var(--ff-display); font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: -0.01em;          font-weight: 600; margin: 0; }
+h4, .t-h4 { font-family: var(--ff-display); font-size: var(--fs-h4); line-height: var(--lh-snug);                                  font-weight: 600; margin: 0; }
+
+/* App/chrome typescale opt-in: compact heading ceiling for application UIs. */
+[data-typescale="app"] h1, [data-typescale="app"] .t-h1 { font-size: var(--fs-h1-app); line-height: 1.15; }
+[data-typescale="app"] h2, [data-typescale="app"] .t-h2 { font-size: var(--fs-h2-app); }
+[data-typescale="app"] h3, [data-typescale="app"] .t-h3 { font-size: var(--fs-h3-app); }
+[data-typescale="app"] h4, [data-typescale="app"] .t-h4 { font-size: var(--fs-h4-app); }
+
+.t-hero    { font-family: var(--ff-display); font-size: var(--fs-hero); line-height: var(--lh-tight); letter-spacing: var(--tr-tighter); font-weight: 700; margin: 0; }
+.t-mega    { font-family: var(--ff-display); font-size: var(--fs-mega); line-height: 0.92;            letter-spacing: var(--tr-tighter); font-weight: 700; margin: 0; }
+
+.t-display { font-family: var(--ff-display); font-weight: 600; letter-spacing: var(--tr-tight); }
+.t-mono    { font-family: var(--ff-mono); }
+.t-body    { font-family: var(--ff-body); }
+
+.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); }
+
+.lede, .t-lede {
+  font-family: var(--ff-body); font-size: var(--fs-xl);
+  line-height: var(--lh-tall); max-width: 38ch; font-weight: 400; color: var(--fg-2);
+  margin: 0;
+}
+
+.eyebrow {
+  font-family: var(--ff-mono);
+  font-size: var(--fs-tiny);
+  font-weight: 600;
+  letter-spacing: var(--tr-label);
+  text-transform: uppercase;
+  color: var(--accent-ink);
+  display: inline-flex; align-items: center; gap: 12px;
+}
+/* Editorial kicker mark — a short solid ink rule, the print-byline tell. */
+.eyebrow::before {
+  content: '';
+  width: 28px; height: 3px; background: currentColor;
+}
+
+.ds-prose {
+  font-family: var(--ff-body);
+  font-size: var(--fs-lg);
+  line-height: var(--lh-long);
+  max-width: var(--measure);
+  text-wrap: pretty;
+}
+.ds-prose p  { margin: 0 0 var(--space-4); }
+.ds-prose h1 { font-size: clamp(34px, 5.4cqi, 64px); margin-bottom: var(--space-3); }
+.ds-prose h2 { margin: var(--space-6) 0 var(--space-3); }
+.ds-prose h3 { margin: var(--space-5) 0 var(--space-2); font-size: var(--fs-lg); font-weight: 600; }
+
+.dim { color: var(--fg-3); }
+
+/* Links */
+a { color: inherit; text-decoration: none; }
+a.ds-link-accent, .ds-prose a {
+  color: var(--accent-ink);
+  text-decoration: underline;
+  text-underline-offset: 4px;
+  text-decoration-thickness: 2px;
+}
+a.ds-link-accent:hover, .ds-prose a:hover {
+  background: var(--accent); color: var(--accent-fg); text-decoration-color: transparent;
+}
+
+kbd {
+  font-family: var(--ff-mono); font-size: 0.85em;
+  background: var(--bg-2); padding: 2px 6px; border-radius: var(--r-1);
+}
+
+code {
+  font-family: var(--ff-mono); font-size: 0.92em;
+  background: var(--bg-2); padding: 0.15em 0.5em; border-radius: var(--r-1);
+}
+
+pre {
+  font-family: var(--ff-mono);
+  background: var(--panel-bg);
+  color: var(--panel-text, inherit);
+  padding: var(--space-5);
+  overflow-x: auto;
+  line-height: 1.55;
+  font-size: var(--fs-sm);
+  margin: 0;
+  border-radius: var(--r-3);
+}
+pre .k { color: var(--code-str-alt, var(--mascot)); }
+pre .s { color: var(--code-string, var(--green)); }
+pre .c { color: var(--fg-3); }
+pre .n { color: var(--code-num); }
+

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

@@ -0,0 +1,144 @@
+
+/* ============================================================
+   Catalog / demo shell — a shared, compact framing for the preview/*.html
+   component galleries, so each preview stops hand-rolling its own <style>
+   (body padding, section margins, demo boxes). Mirrors webgeist's dense
+   catalog: a 240px sticky sidebar + capped main + a hairline-bordered,
+   flex-wrapping .ds-demo cell that packs variants inline and reflows.
+   ============================================================ */
+.ds-catalog { display: flex; min-height: 100vh; gap: 0; }
+.ds-catalog-side {
+  width: 240px; flex-shrink: 0;
+  border-right: var(--bw-hair) solid var(--rule);
+  padding: var(--space-3);
+  position: sticky; top: 0; height: 100vh; overflow-y: auto;
+}
+.ds-catalog-side h1 { font-size: var(--fs-lg); margin: 0 0 var(--space-1); }
+.ds-catalog-side .subtitle { font-size: var(--fs-micro); color: var(--fg-3); margin: 0 0 var(--space-4); }
+.ds-catalog-side nav h4 {
+  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--tr-label);
+  color: var(--fg-3); margin: var(--space-3) 0 var(--space-1);
+}
+.ds-catalog-side nav a {
+  display: block; padding: var(--space-half) 0; font-size: var(--fs-tiny);
+  color: var(--fg-2); text-decoration: none;
+}
+.ds-catalog-side nav a:hover { color: var(--accent-ink); }
+.ds-catalog-main { flex: 1; padding: var(--space-5); max-width: var(--measure-wide); min-width: 0; }
+.ds-catalog-section { margin-bottom: var(--space-5); padding-top: var(--space-3); border-top: var(--bw-hair) solid var(--rule); }
+.ds-catalog-section > h2 { font-size: var(--fs-h3-app); margin: 0 0 var(--space-3); }
+
+/* The gallery cell: a hairline-bordered, flex-wrapping bin that packs a
+   component's variants inline and reflows — the signature "showcase" frame. */
+.ds-demo {
+  border: var(--bw-hair) solid var(--rule);
+  border-radius: var(--r-1);
+  padding: var(--space-3);
+  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
+  background: var(--bg);
+}
+.ds-demo + .ds-demo { margin-top: var(--space-2-75); }
+.ds-demo-label { font-size: var(--fs-xs); font-weight: 500; margin: 0 0 var(--space-1); }
+.ds-demo-desc { font-size: var(--fs-tiny); color: var(--fg-3); margin: 0 0 var(--space-2); }
+
+@media (max-width: 768px) {
+  .ds-catalog { flex-direction: column; }
+  .ds-catalog-side { width: 100%; height: auto; position: static; border-right: 0; border-bottom: var(--bw-hair) solid var(--rule); }
+  .ds-catalog-main { padding: var(--space-3); }
+}
+
+/* -- File browser UX affordances ---------------------------- */
+/* Toolbar filter input — compact search box. */
+.ds-filter-input {
+  width: clamp(120px, 22vw, 220px);
+  padding: 7px 12px;
+  background: var(--bg-2); border: var(--bw-hair) solid var(--rule);
+  border-radius: var(--r-pill); color: var(--fg);
+  font-family: inherit; font-size: var(--fs-xs);
+}
+.ds-filter-input:focus-visible { outline: none; box-shadow: var(--focus-ring-inset); }
+
+/* Loading skeleton: FileSkeleton renders `.ds-file-grid.ds-file-skeleton` with
+   `.ds-file-row.ds-file-row-skeleton` rows whose inner `.ds-skel` children shimmer
+   (via .ds-skel::after). The container therefore inherits the .ds-file-grid layout
+   and must NOT be a single 48px gradient bar (that collapsed every row and double-
+   shimmered). The dead .ds-file-grid-loading rule + unused ds-skeleton-shimmer
+   keyframe were removed; only the inner .ds-skel children animate. */
+
+/* Drag-to-move drop target highlight on a directory row. */
+.ds-file-row.ds-drop-target {
+  border-color: var(--accent);
+  background: var(--accent-tint);
+  box-shadow: inset 0 0 0 1px var(--accent);
+}
+.ds-file-row[draggable="true"] { cursor: grab; }
+.ds-file-row[draggable="true"]:active { cursor: grabbing; }
+
+/* (A stale duplicate multi-select block used to live here: an absolute-overlay
+   .ds-file-check hidden until hover, plus .ds-file-check.on / .ds-file-row.selected
+   / .ds-bulk-bar rules NO component ever emits. Being later in source at equal
+   specificity it clobbered the real in-flow checkbox at ~1243 - the shipped
+   multi-select rendered invisible-until-hover with clipped brackets. The live
+   rules are the earlier block; only the still-load-bearing bits remain below.) */
+.ds-file-row { position: relative; }
+/* Touch / coarse-pointer devices have no hover — keep the per-row action
+   buttons (rename/delete/download) visible so the file manager is fully
+   reachable without a pointer (e.g. an iPad in landscape). */
+@media (hover: none), (pointer: coarse) {
+  .ds-file-actions { opacity: 1; }
+}
+
+/* Keyboard-shortcuts hint — compact two-column legend. */
+.ds-shortcuts-hint {
+  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 4px var(--space-3);
+  padding: var(--space-3) var(--space-4);
+  background: var(--bg-2); border: var(--bw-hair) solid var(--rule);
+  border-radius: var(--r-2); font-size: var(--fs-xs);
+}
+.ds-shortcut-row { display: flex; align-items: center; gap: var(--space-2); }
+.ds-shortcuts-hint .ds-kbd-label { flex: 1 1 auto; opacity: .85; }
+.ds-shortcuts-hint .ds-kbd { white-space: normal; max-width: 100%; }
+.ds-kbd-caps { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
+.ds-kbd-sep { color: var(--fg-3); font-size: var(--fs-micro); padding: 0 2px; }
+.ds-kbd {
+  display: inline-block; min-width: 0;
+  padding: 2px 7px; border-radius: var(--r-0);
+  background: var(--bg); border: var(--bw-hair) solid var(--rule);
+  border-bottom-width: 2px;
+  font-family: var(--ff-mono); font-size: var(--fs-micro); color: var(--fg-2);
+  white-space: nowrap;
+}
+
+/* ============================================================
+   Theme toggle (segmented + compact) — bound to src/theme.js
+   ============================================================ */
+.ds-segmented {
+  display: inline-flex; gap: 0; padding: 2px;
+  background: var(--bg-2); border-radius: var(--r-pill);
+  font-family: var(--ff-mono); font-size: var(--fs-xs);
+}
+.ds-segmented .ds-seg-btn {
+  background: transparent; border: 0; color: var(--fg-3);
+  padding: 4px 12px; border-radius: var(--r-pill); cursor: pointer;
+  display: inline-flex; align-items: center; gap: 6px;
+  transition: color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
+}
+.ds-segmented .ds-seg-btn:hover { color: var(--fg); }
+.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);
+  box-shadow: inset 0 0 0 var(--bw-hair, 1px) var(--rule);
+}
+.ds-theme-toggle.btn {
+  font-family: var(--ff-mono); font-size: var(--fs-xs);
+  display: inline-flex; align-items: center; gap: 6px;
+}
+/* CSS-drawn half-disc mark on the compact theme toggle: keeps the control
+   legible when its text label is hidden (icon-only rail strip). */
+.ds-theme-disc {
+  flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%;
+  border: var(--bw-hair) solid var(--fg-3);
+  background: linear-gradient(90deg, var(--fg-3) 0 50%, transparent 50% 100%);
+}
+

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

@@ -0,0 +1,12 @@
+
+/* ============================================================
+   Chat — minimal styles (placeholder for full chat surface)
+   ============================================================ */
+.ds-chat { display: flex; flex-direction: column; gap: 12px; padding: var(--space-4); }
+.ds-chat-msg { padding: 12px 18px; background: var(--bg-2); border-radius: var(--r-3); max-width: min(90vw, 36em); }
+.ds-chat-msg.user { background: var(--accent-tint); color: var(--fg); align-self: flex-end; }
+.ds-chat-md { font-size: var(--fs-sm); line-height: 1.6; }
+.ds-chat-composer { display: flex; gap: 8px; padding: var(--space-4); }
+.ds-chat-composer input { flex: 1; padding: 13px 18px; background: var(--bg-2); border: 0; border-radius: var(--r-pill); font-family: inherit; font-size: var(--fs-sm); color: var(--fg); }
+.ds-chat-composer input:focus-visible { box-shadow: var(--focus-ring-inset); }
+