anentrypoint-design 0.0.141 → 0.0.143

package/app-shell.css

@@ -644,17 +644,18 @@ table tr.clickable:hover td { background: var(--bg-2); }
 
   /* File Grid */
   .ds-file-grid {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: var(--space-2);
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
   }
   .ds-file-row {
-    grid-template-columns: 24px 1fr auto;
+    grid-template-columns: 22px minmax(0, 1fr) auto;
     gap: 10px; padding: 10px 12px;
     font-size: var(--fs-xs);
   }
-  .ds-file-row .name { font-size: var(--fs-sm); }
-  .ds-file-row .size { font-size: var(--fs-micro); }
+  /* On mobile, fold meta under the title and keep actions inline. */
+  .ds-file-row .ds-file-meta { font-size: var(--fs-micro); }
+  .ds-file-row .ds-file-actions { opacity: 1; }
 
   /* Chat */
   .chat-stack { max-width: 100%; min-width: 0; }
@@ -760,14 +761,9 @@ table tr.clickable:hover td { background: var(--bg-2); }
   h2, .t-h2 { font-size: clamp(20px, 4cqi, 36px); }
   h3, .t-h3 { font-size: clamp(18px, 3.5cqi, 28px); }
 
-  /* File Grid — 2-3 columns on tablet */
-  .ds-file-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-    gap: var(--space-3);
-  }
+  /* File list — single column rows on tablet (cards only via data-columns) */
   .ds-file-row {
-    grid-template-columns: 24px 1fr auto;
+    grid-template-columns: 24px minmax(0, 1fr) auto auto;
     gap: 12px; padding: 12px 14px;
   }
 
@@ -809,13 +805,6 @@ table tr.clickable:hover td { background: var(--bg-2); }
    Desktop Breakpoint Enhancements (1025px and up)
    ────────────────────────────────────────────────────────────────────── */
 @media (min-width: 1025px) {
-  /* File Grid — 3-4 columns on desktop */
-  .ds-file-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-    gap: var(--space-4);
-  }
-
   /* Chat Bubbles */
   .chat-stack { max-width: min(70%, 480px); }
   .chat-bubble {
@@ -844,43 +833,377 @@ table tr.clickable:hover td { background: var(--bg-2); }
    File surface — responsive grid + row layouts
    ============================================================ */
 
-/* Default file grid — auto-responsive with CSS Grid */
+/* Default file grid — a vertical list of rows. Each row lays out its own
+   columns internally; the container only stacks them. Card mode (multi-column)
+   is opt-in via [data-columns]. */
 .ds-file-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: var(--space-4);
-  /* Responsive via container queries in media breakpoints below */
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
 }
 
-/* File row — linear layout (used in list view) */
+/* File row — linear layout (icon · title · meta · actions) */
 .ds-file-row {
-  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto;
+  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto;
   gap: 14px; align-items: center;
-  padding: 12px 18px; background: var(--bg);
+  padding: 11px 16px; background: var(--bg);
+  border: var(--bw-hair) solid transparent;
   border-radius: var(--r-2); color: var(--fg);
-  transition: background var(--dur-snap) var(--ease);
+  cursor: pointer;
+  transition: background var(--dur-snap) var(--ease),
+              border-color var(--dur-snap) var(--ease),
+              transform var(--dur-snap) var(--ease);
+}
+.ds-file-row:hover {
+  background: var(--bg-2);
+  border-color: var(--rule);
+}
+.ds-file-row:active { transform: translateY(1px); }
+.ds-file-row.active { background: var(--accent-tint); border-color: var(--accent); }
+.ds-file-row[data-file-type="dir"]      { border-left-width: 3px; border-left-color: var(--accent); }
+.ds-file-row[data-file-type="image"]    { border-left-width: 3px; border-left-color: var(--mascot); }
+.ds-file-row[data-file-type="video"]    { border-left-width: 3px; border-left-color: var(--purple-2); }
+.ds-file-row[data-file-type="audio"]    { border-left-width: 3px; border-left-color: var(--sky); }
+.ds-file-row[data-file-type="code"]     { border-left-width: 3px; border-left-color: var(--green-2); }
+.ds-file-row[data-file-type="text"]     { border-left-width: 3px; border-left-color: var(--ink-3); }
+.ds-file-row[data-file-type="archive"]  { border-left-width: 3px; border-left-color: var(--flame); }
+.ds-file-row[data-file-type="document"] { border-left-width: 3px; border-left-color: var(--sun); }
+.ds-file-row[data-file-type="symlink"]  { border-left-width: 3px; border-left-color: var(--purple); }
+.ds-file-row[data-file-type="other"]    { border-left-width: 3px; border-left-color: var(--fg-3); }
+
+/* Row internals — these are the classes FileRow actually renders. */
+.ds-file-row .title {
+  font-weight: 500; font-size: var(--fs-sm);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  min-width: 0;
+}
+.ds-file-row .code {
+  font-family: var(--ff-mono); font-size: var(--fs-micro);
+  color: var(--fg-3);
+}
+.ds-file-row .ds-file-meta {
+  font-family: var(--ff-mono); font-size: var(--fs-xs);
+  color: var(--fg-3); white-space: nowrap;
+}
+
+/* File icon — glyph chip, tinted per type. */
+.ds-file-icon {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 26px; height: 26px; font-size: 15px; line-height: 1;
+  color: var(--fg-2);
 }
-.ds-file-row + .ds-file-row { margin-top: 3px; }
-.ds-file-row:hover { background: var(--bg-2); }
-.ds-file-row[data-file-type="dir"]      { border-left: 3px solid var(--accent); padding-left: 11px; }
-.ds-file-row[data-file-type="image"]    { border-left: 3px solid var(--mascot); padding-left: 11px; }
-.ds-file-row[data-file-type="video"]    { border-left: 3px solid var(--purple-2); padding-left: 11px; }
-.ds-file-row[data-file-type="audio"]    { border-left: 3px solid var(--sky); padding-left: 11px; }
-.ds-file-row[data-file-type="code"]     { border-left: 3px solid var(--green-2); padding-left: 11px; }
-.ds-file-row[data-file-type="text"]     { border-left: 3px solid var(--ink-3); padding-left: 11px; }
-.ds-file-row[data-file-type="archive"]  { border-left: 3px solid var(--flame); padding-left: 11px; }
-.ds-file-row[data-file-type="document"] { border-left: 3px solid var(--sun); padding-left: 11px; }
-.ds-file-row[data-file-type="other"]    { border-left: 3px solid var(--fg-3); padding-left: 11px; }
-.ds-file-row .name { font-weight: 500; font-size: var(--fs-sm); }
-.ds-file-row .size { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3); }
-.ds-file-row .time { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3); }
-
-/* File grid — data-columns attribute (explicit column override) */
+.ds-file-row[data-file-type="dir"]      .ds-file-icon { color: var(--accent); }
+.ds-file-row[data-file-type="image"]    .ds-file-icon { color: var(--mascot); }
+.ds-file-row[data-file-type="video"]    .ds-file-icon { color: var(--purple-2); }
+.ds-file-row[data-file-type="audio"]    .ds-file-icon { color: var(--sky); }
+.ds-file-row[data-file-type="code"]     .ds-file-icon { color: var(--green-2); }
+.ds-file-row[data-file-type="archive"]  .ds-file-icon { color: var(--flame); }
+.ds-file-row[data-file-type="document"] .ds-file-icon { color: var(--sun); }
+
+/* Row actions — hidden until hover/focus, revealed without layout shift. */
+.ds-file-actions {
+  display: inline-flex; gap: 2px; align-items: center;
+  opacity: 0; transition: opacity var(--dur-base) var(--ease);
+}
+.ds-file-row:hover .ds-file-actions,
+.ds-file-row:focus-within .ds-file-actions { opacity: 1; }
+.ds-file-act {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 28px; height: 28px; padding: 0;
+  background: transparent; border: 0; border-radius: var(--r-1);
+  color: var(--fg-3); font-size: 14px; cursor: pointer;
+  transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
+}
+.ds-file-act:hover { background: var(--bg-3); color: var(--fg); }
+.ds-file-act-warn:hover { background: color-mix(in oklab, var(--warn) 18%, var(--bg)); color: var(--warn); }
+
+/* Card mode — opt-in via data-columns; switches the list to a grid. */
+.ds-file-grid[data-columns] { display: grid; gap: var(--space-3); }
 .ds-file-grid[data-columns="1"] { grid-template-columns: 1fr; }
 .ds-file-grid[data-columns="2"] { grid-template-columns: repeat(2, 1fr); }
 .ds-file-grid[data-columns="3"] { grid-template-columns: repeat(3, 1fr); }
 .ds-file-grid[data-columns="4"] { grid-template-columns: repeat(4, 1fr); }
 
+/* ============================================================
+   File browser surface — stage, toolbar, breadcrumb, dropzone,
+   upload progress, empty state, modals, preview. Authored for
+   fsbrowse but lives in the shared kit under .ds-247420 scope.
+   ============================================================ */
+
+/* Stage — the scrollable content column. */
+.ds-file-stage {
+  display: flex; flex-direction: column; gap: var(--space-3);
+  width: 100%; max-width: 920px; margin: 0 auto;
+  padding: var(--space-2) var(--space-3) var(--space-4);
+}
+/* When the stage is the app-main child, the shell already supplies top
+   padding — collapse the stage's own so content isn't pushed down. */
+.app-main > div > .ds-file-stage,
+.app-main .ds-file-stage { padding-top: 0; }
+
+/* Breadcrumb path */
+.ds-crumb-path {
+  display: flex; align-items: center; flex-wrap: wrap; gap: 2px;
+  font-size: var(--fs-sm);
+}
+.ds-crumb-seg {
+  background: transparent; border: 0; cursor: pointer;
+  padding: 4px 8px; border-radius: var(--r-1);
+  color: var(--fg-3); font-family: inherit; font-size: var(--fs-sm);
+  transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
+}
+.ds-crumb-seg:hover { background: var(--bg-2); color: var(--fg); }
+.ds-crumb-seg.leaf { color: var(--fg); font-weight: 600; }
+.ds-crumb-sep { color: var(--fg-3); opacity: 0.6; user-select: none; }
+
+/* Toolbar */
+.ds-file-toolbar {
+  display: flex; align-items: center; justify-content: space-between;
+  gap: var(--space-2); flex-wrap: wrap;
+}
+.ds-file-toolbar-left,
+.ds-file-toolbar-right {
+  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
+}
+.ds-meta-mono {
+  font-family: var(--ff-mono); font-size: var(--fs-xs);
+  color: var(--fg-3); letter-spacing: var(--tr-caps);
+}
+
+/* Error banner — dismissible toast row. */
+.ds-error-banner {
+  padding: 10px 14px; border-radius: var(--r-2);
+  background: color-mix(in oklab, var(--warn) 14%, var(--bg));
+  border: var(--bw-hair) solid color-mix(in oklab, var(--warn) 40%, transparent);
+  color: var(--warn); font-size: var(--fs-sm); cursor: pointer;
+}
+.ds-error-banner:hover { background: color-mix(in oklab, var(--warn) 20%, var(--bg)); }
+
+/* Dropzone */
+.ds-dropzone {
+  border: var(--bw-rule) dashed var(--rule);
+  border-radius: var(--r-3); background: var(--bg);
+  transition: border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
+}
+.ds-dropzone-inner {
+  display: flex; align-items: center; justify-content: center;
+  gap: var(--space-2); flex-wrap: wrap;
+  padding: var(--space-4) var(--space-3); text-align: center;
+}
+.ds-dropzone-glyph { font-size: 22px; color: var(--fg-3); }
+.ds-dropzone-label { font-size: var(--fs-sm); color: var(--fg-3); }
+.ds-dropzone.dragover {
+  border-color: var(--accent);
+  background: var(--accent-tint);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .ds-dropzone.dragover { animation: ds-dropzone-pulse 1.1s var(--ease) infinite; }
+}
+.ds-dropzone.dragover .ds-dropzone-glyph,
+.ds-dropzone.dragover .ds-dropzone-label { color: var(--accent); }
+@keyframes ds-dropzone-pulse {
+  0%, 100% { border-color: var(--accent); }
+  50% { border-color: color-mix(in oklab, var(--accent) 45%, transparent); }
+}
+
+/* Upload progress */
+.ds-upload-progress { display: flex; flex-direction: column; gap: 6px; }
+.ds-upload-item {
+  display: grid; grid-template-columns: minmax(0, 1fr) 120px 44px;
+  gap: var(--space-2); align-items: center;
+  padding: 8px 12px; border-radius: var(--r-2);
+  background: var(--bg-2); font-size: var(--fs-xs);
+}
+.ds-upload-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ds-upload-bar {
+  height: 6px; border-radius: var(--r-pill);
+  background: var(--bg-3); overflow: hidden;
+}
+.ds-upload-fill {
+  display: block; height: 100%; width: 0;
+  background: var(--accent); border-radius: var(--r-pill);
+  transition: width var(--dur-base) var(--ease);
+}
+.ds-upload-pct {
+  font-family: var(--ff-mono); font-size: var(--fs-micro);
+  color: var(--fg-3); text-align: right;
+}
+.ds-upload-item.done .ds-upload-fill { background: var(--success); }
+.ds-upload-item.done .ds-upload-pct { color: var(--success); }
+.ds-upload-item.error .ds-upload-fill { background: var(--warn); }
+.ds-upload-item.error .ds-upload-pct { color: var(--warn); }
+
+/* Empty state */
+.ds-file-empty {
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  gap: var(--space-2); padding: var(--space-6) var(--space-3);
+  color: var(--fg-3); text-align: center;
+}
+.ds-file-empty-glyph { font-size: 34px; opacity: 0.55; }
+.ds-file-empty-text { font-size: var(--fs-sm); }
+
+/* ── Modals ───────────────────────────────────────────────── */
+.ds-modal-backdrop {
+  position: fixed; inset: 0; z-index: var(--z-modal, 800);
+  display: flex; align-items: center; justify-content: center;
+  padding: var(--space-3);
+  background: color-mix(in oklab, var(--ink) 55%, transparent);
+  backdrop-filter: blur(3px);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .ds-modal-backdrop { animation: ds-modal-fade var(--dur-base) var(--ease); }
+}
+@keyframes ds-modal-fade { from { opacity: 0; } to { opacity: 1; } }
+.ds-modal {
+  display: flex; flex-direction: column;
+  width: 100%; max-width: 460px; max-height: calc(100vh - 2 * var(--space-4));
+  background: var(--bg); color: var(--fg);
+  border: var(--bw-hair) solid var(--rule);
+  border-radius: var(--r-3); box-shadow: var(--shadow-3);
+  overflow: hidden;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .ds-modal { animation: ds-modal-rise var(--dur-base) var(--ease); }
+}
+@keyframes ds-modal-rise {
+  from { opacity: 0; transform: translateY(8px) scale(0.98); }
+  to   { opacity: 1; transform: none; }
+}
+.ds-modal-small { max-width: 380px; }
+.ds-modal-preview { max-width: 880px; }
+.ds-modal-head {
+  padding: var(--space-3) var(--space-4);
+  font-weight: 600; font-size: var(--fs-body);
+  border-bottom: var(--bw-hair) solid var(--rule);
+}
+.ds-modal-body { padding: var(--space-4); overflow: auto; font-size: var(--fs-sm); }
+.ds-modal-actions {
+  display: flex; justify-content: flex-end; gap: var(--space-2);
+  padding: var(--space-3) var(--space-4);
+  border-top: var(--bw-hair) solid var(--rule);
+}
+.ds-modal-input {
+  width: 100%; padding: 10px 12px;
+  background: var(--bg-2); border: var(--bw-hair) solid var(--rule);
+  border-radius: var(--r-2); color: var(--fg);
+  font-family: inherit; font-size: var(--fs-sm);
+}
+.ds-modal-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
+.btn-primary.danger {
+  background: var(--warn);
+  border-color: var(--warn);
+  color: #fff;
+}
+
+/* ── Preview ──────────────────────────────────────────────── */
+.ds-preview-head {
+  display: flex; align-items: center; gap: var(--space-3);
+  padding: var(--space-3) var(--space-4);
+  border-bottom: var(--bw-hair) solid var(--rule);
+}
+.ds-preview-name {
+  font-weight: 600; font-size: var(--fs-body);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
+}
+.ds-preview-meta {
+  font-family: var(--ff-mono); font-size: var(--fs-xs);
+  color: var(--fg-3); white-space: nowrap;
+}
+.ds-preview-actions { display: inline-flex; gap: 2px; margin-left: auto; }
+.ds-preview-body {
+  flex: 1; min-height: 0; overflow: auto;
+  padding: var(--space-3) var(--space-4);
+  display: flex; flex-direction: column;
+}
+.ds-preview-media {
+  max-width: 100%; max-height: 70vh; margin: 0 auto;
+  border-radius: var(--r-2); object-fit: contain;
+}
+.ds-preview-audio { width: 100%; }
+.ds-preview-code,
+.ds-preview-text {
+  margin: 0; flex: 1; min-height: 0; overflow: auto;
+  padding: var(--space-3);
+  background: var(--ink); color: var(--paper);
+  border-radius: var(--r-2);
+  font-family: var(--ff-mono); font-size: var(--fs-xs); line-height: var(--lh-base);
+  white-space: pre; tab-size: 2;
+}
+.ds-preview-text { white-space: pre-wrap; word-break: break-word; }
+.ds-preview-code code, .ds-preview-text code { font: inherit; color: inherit; background: none; }
+.ds-preview-truncated {
+  margin-top: var(--space-2); padding-top: var(--space-2);
+  border-top: var(--bw-hair) solid color-mix(in oklab, var(--paper) 20%, transparent);
+  color: var(--paper-3); font-size: var(--fs-micro);
+}
+.ds-preview-fallback {
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  gap: var(--space-2); padding: var(--space-6); color: var(--fg-3);
+}
+.ds-preview-glyph { font-size: 34px; opacity: 0.6; }
+
+/* Thin scrollbars inside preview bodies. */
+.ds-preview-code, .ds-preview-text, .ds-modal-body, .ds-preview-body {
+  scrollbar-width: thin;
+}
+.ds-preview-code::-webkit-scrollbar,
+.ds-preview-text::-webkit-scrollbar,
+.ds-preview-body::-webkit-scrollbar,
+.ds-modal-body::-webkit-scrollbar { width: 10px; height: 10px; }
+.ds-preview-code::-webkit-scrollbar-thumb,
+.ds-preview-text::-webkit-scrollbar-thumb {
+  background: color-mix(in oklab, var(--paper) 28%, transparent);
+  border-radius: var(--r-pill); border: 2px solid transparent; background-clip: padding-box;
+}
+.ds-preview-body::-webkit-scrollbar-thumb,
+.ds-modal-body::-webkit-scrollbar-thumb {
+  background: var(--bg-3); border-radius: var(--r-pill);
+}
+
+/* Mobile — modals go near-fullscreen, preview media shrinks. */
+@media (max-width: 560px) {
+  .ds-modal { max-width: 100%; max-height: calc(100vh - 2 * var(--space-3)); }
+  .ds-modal-preview { width: 100%; height: calc(100vh - 2 * var(--space-3)); max-height: none; }
+  .ds-preview-media { max-height: 50vh; }
+  .ds-file-stage { padding: var(--space-3) var(--space-2); }
+}
+
+/* ── 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 { outline: 2px solid var(--accent); outline-offset: 1px; }
+
+/* Loading skeleton — placeholder rows while a directory loads. */
+.ds-file-grid-loading { display: flex; flex-direction: column; gap: 4px; }
+.ds-file-skeleton {
+  height: 48px; border-radius: var(--r-2);
+  background: linear-gradient(90deg,
+    var(--bg) 0%, var(--bg-2) 50%, var(--bg) 100%);
+  background-size: 200% 100%;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .ds-file-skeleton { animation: ds-skeleton-shimmer 1.2s var(--ease) infinite; }
+}
+@keyframes ds-skeleton-shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+/* 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; }
+
 /* ============================================================
    Theme toggle (segmented + compact) — bound to src/theme.js
    ============================================================ */

package/colors_and_type.css

@@ -175,7 +175,8 @@ select:focus-visible {
   outline-offset: 2px;
 }
 
-[data-theme="ink"] {
+[data-theme="ink"],
+[data-theme="dark"] {
   --bg:        var(--ink);
   --bg-2:      var(--ink-2);
   --bg-3:      #464650;