@livx.cc/bare-v3 0.1.0-alpha.73 → 0.1.0-alpha.74

package/dist/manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.0-alpha.73",
+  "version": "0.1.0-alpha.74",
   "cssSha256": "22fd9b0597887cc93f1c1429bace791fee5efcc4268bf9c24c68cc263cfdd88b",
   "classes": [
     "b3-accordion",
@@ -450,6 +450,25 @@
       ],
       "guidance": "Combine b3-mobile-app b3-app-frame with direct header, main, and exactly one bottom region: nav OR a footer containing nav. Never put sibling nav and footer elements in the frame; both occupy its third grid row. Main scrolls; grid reserves the actual navigation height, including large labels. The frame owns top and side device insets. With bottom navigation, its surface paints to the bottom edge and owns the home-indicator padding; do not add that inset again to the frame or host. Without bottom navigation, the frame retains its bottom inset. Set --b3-frame-height for a bounded embedded preview; otherwise the frame uses 100dvh. Do not add a fixed-nav padding estimate or change its navigation to position:fixed. For transient messages, add b3-toast-region as a direct sibling of main and nav/footer. It overlays the content row and scrolls when messages exceed the available height. Keep custom footer-anchored feedback only when its interaction requires it; do not guess a bar-height offset. Restore per-route scroll with main.scrollTop, not window.scrollY. Keep the DOM order meaningful and use intrinsic grids inside main for wider screens. The frame fills available inline space up to its app-width cap. Bottom navigation wraps whole destinations when enlarged labels cannot fit on one row; use short destination names and let the frame measure navigation height. Existing b3-mobile-app without this atom retains its original fixed-navigation behavior. The hosting platform owns any external chrome; do not reproduce a host footer or fake OS bars inside the app.",
       "example": "<div class=\"b3-mobile-app b3-app-frame\" data-b3-platform=\"ios\"><header class=\"b3-app-bar\"><strong>Today</strong><button class=\"b3-button\">New plan</button></header><main class=\"b3-shell b3-stack\" tabindex=\"-1\" aria-label=\"Plans\"><h1 class=\"b3-title\">Make a little progress</h1><div class=\"b3-grid\"><article class=\"b3-surface\">Your first plan</article></div></main><nav class=\"b3-bottom-nav\" aria-label=\"Main\"><a class=\"b3-bottom-link\" href=\"#today\" aria-current=\"page\">Today</a><a class=\"b3-bottom-link\" href=\"#saved\">Saved</a></nav></div>"
+    },
+    {
+      "id": "tui",
+      "title": "Terminal UI (opt-in sheet)",
+      "classes": [
+        "b3-tui",
+        "b3-tui-frame",
+        "b3-tui-edge",
+        "b3-tui-fill",
+        "b3-tui-box",
+        "b3-tui-list",
+        "b3-tui-prompt",
+        "b3-tui-row",
+        "b3-tui-tag",
+        "b3-tui-section",
+        "b3-tui-keys"
+      ],
+      "guidance": "Opt-in: link @livx.cc/bare-v3/css/tui (standalone or after bare.css); these classes are not in the core sheet. For a picker or card that should look like the terminal it sits in: monospace, xterm palette, box-drawing frame. b3-tui on the root sets --b3-tui-* tokens (bg, fg, muted, faint, line, selected, accent, success, warning, danger, font); data-b3-tone=accent|success|warning|danger|muted|faint colors any descendant. b3-tui-frame is a column: a top b3-tui-edge (optional <b> title, <span class=b3-tui-fill>, optional <i> meta), b3-tui-box rows for fixed content, one b3-tui-box b3-tui-list that takes the rest and is the only scroller, a bottom edge (data-b3-edge=bottom), then b3-tui-keys with <kbd> hints. The list hides its scrollbar: put ▲/▼ in the bottom edge's <i> from a scroll listener. b3-tui-prompt is a label whose input gets a > prefix. b3-tui-row is a button (or a summary) with a 1ch cursor column; the app moves aria-selected=\"true\" to draw > and keeps keyboard focus in the prompt. details.b3-tui-section > summary.b3-tui-row gets a ▸/▾ twisty. b3-tui-tag brackets a state word: [open]. Touch gets 44px rows and a 16px input.",
+      "example": "<main class=\"b3-tui b3-tui-frame\"><div class=\"b3-tui-edge\"><b>sessions</b><span class=\"b3-tui-fill\"></span><i>3 live</i></div><div class=\"b3-tui-box\"><label class=\"b3-tui-prompt\"><input placeholder=\"filter\" aria-label=\"Filter\"></label></div><div class=\"b3-tui-box b3-tui-list\"><button class=\"b3-tui-row\" aria-selected=\"true\"><span data-b3-tone=\"success\">●</span>api server<span class=\"b3-tui-tag\" data-b3-tone=\"success\">open</span></button><details class=\"b3-tui-section\"><summary class=\"b3-tui-row\">ended (1)</summary><button class=\"b3-tui-row\"><span data-b3-tone=\"faint\">●</span>build<span class=\"b3-tui-tag\" data-b3-tone=\"danger\">crashed</span></button></details></div><div class=\"b3-tui-edge\" data-b3-edge=\"bottom\"><span class=\"b3-tui-fill\"></span><i></i></div><div class=\"b3-tui-keys\"><kbd>↑↓</kbd> select · <kbd>⏎</kbd> open</div></main>"
     }
   ],
   "references": [
@@ -482,6 +501,7 @@
     "conversation.md",
     "mobile.md",
     "app-frame.md",
+    "tui.md",
     "cross-screen.md",
     "date-picker.md",
     "editable-filtered-rows.md",

package/dist/references/tui.md

@@ -0,0 +1,9 @@
+# Terminal UI (opt-in sheet)
+
+Opt-in: link @livx.cc/bare-v3/css/tui (standalone or after bare.css); these classes are not in the core sheet. For a picker or card that should look like the terminal it sits in: monospace, xterm palette, box-drawing frame. b3-tui on the root sets --b3-tui-* tokens (bg, fg, muted, faint, line, selected, accent, success, warning, danger, font); data-b3-tone=accent|success|warning|danger|muted|faint colors any descendant. b3-tui-frame is a column: a top b3-tui-edge (optional <b> title, <span class=b3-tui-fill>, optional <i> meta), b3-tui-box rows for fixed content, one b3-tui-box b3-tui-list that takes the rest and is the only scroller, a bottom edge (data-b3-edge=bottom), then b3-tui-keys with <kbd> hints. The list hides its scrollbar: put ▲/▼ in the bottom edge's <i> from a scroll listener. b3-tui-prompt is a label whose input gets a > prefix. b3-tui-row is a button (or a summary) with a 1ch cursor column; the app moves aria-selected="true" to draw > and keeps keyboard focus in the prompt. details.b3-tui-section > summary.b3-tui-row gets a ▸/▾ twisty. b3-tui-tag brackets a state word: [open]. Touch gets 44px rows and a 16px input.
+
+Classes: b3-tui, b3-tui-frame, b3-tui-edge, b3-tui-fill, b3-tui-box, b3-tui-list, b3-tui-prompt, b3-tui-row, b3-tui-tag, b3-tui-section, b3-tui-keys
+
+```html
+<main class="b3-tui b3-tui-frame"><div class="b3-tui-edge"><b>sessions</b><span class="b3-tui-fill"></span><i>3 live</i></div><div class="b3-tui-box"><label class="b3-tui-prompt"><input placeholder="filter" aria-label="Filter"></label></div><div class="b3-tui-box b3-tui-list"><button class="b3-tui-row" aria-selected="true"><span data-b3-tone="success">●</span>api server<span class="b3-tui-tag" data-b3-tone="success">open</span></button><details class="b3-tui-section"><summary class="b3-tui-row">ended (1)</summary><button class="b3-tui-row"><span data-b3-tone="faint">●</span>build<span class="b3-tui-tag" data-b3-tone="danger">crashed</span></button></details></div><div class="b3-tui-edge" data-b3-edge="bottom"><span class="b3-tui-fill"></span><i></i></div><div class="b3-tui-keys"><kbd>↑↓</kbd> select · <kbd>⏎</kbd> open</div></main>
+```

package/dist/tui.css

@@ -0,0 +1,269 @@
+@layer bare.components {
+  .b3-tui {
+    --b3-tui-bg: #1c1c1f;
+    --b3-tui-fg: #e6e6e6;
+    --b3-tui-muted: #999;
+    --b3-tui-faint: #666;
+    --b3-tui-line: #555;
+    --b3-tui-selected: #303036;
+    --b3-tui-accent: #11a8cd;
+    --b3-tui-success: #0dbc79;
+    --b3-tui-warning: #e5e510;
+    --b3-tui-danger: #f14c4c;
+    --b3-tui-font: Menlo, Consolas, "DejaVu Sans Mono", monospace;
+    color-scheme: dark;
+    background: var(--b3-tui-bg);
+    color: var(--b3-tui-fg);
+    font: 13px/1.5 var(--b3-tui-font);
+  }
+
+  :where(.b3-tui) [data-b3-tone="accent"] {
+    color: var(--b3-tui-accent);
+  }
+
+  :where(.b3-tui) [data-b3-tone="success"] {
+    color: var(--b3-tui-success);
+  }
+
+  :where(.b3-tui) [data-b3-tone="warning"] {
+    color: var(--b3-tui-warning);
+  }
+
+  :where(.b3-tui) [data-b3-tone="danger"] {
+    color: var(--b3-tui-danger);
+  }
+
+  :where(.b3-tui) [data-b3-tone="muted"] {
+    color: var(--b3-tui-muted);
+  }
+
+  :where(.b3-tui) [data-b3-tone="faint"] {
+    color: var(--b3-tui-faint);
+  }
+
+  .b3-tui-frame {
+    flex-direction: column;
+    min-block-size: 0;
+    display: flex;
+  }
+
+  .b3-tui-edge {
+    white-space: pre;
+    color: var(--b3-tui-line);
+    flex: none;
+    line-height: normal;
+    display: flex;
+    overflow: hidden;
+  }
+
+  .b3-tui-edge:before {
+    content: "┌";
+  }
+
+  .b3-tui-edge:has( > b):before {
+    content: "┌─ ";
+  }
+
+  .b3-tui-edge:after {
+    content: "─┐";
+  }
+
+  .b3-tui-edge[data-b3-edge="bottom"]:before {
+    content: "└";
+  }
+
+  .b3-tui-edge[data-b3-edge="bottom"]:has( > b):before {
+    content: "└─ ";
+  }
+
+  .b3-tui-edge[data-b3-edge="bottom"]:after {
+    content: "┘";
+  }
+
+  .b3-tui-edge > b {
+    color: var(--b3-tui-accent);
+    font-weight: 400;
+  }
+
+  .b3-tui-edge > b:after {
+    content: " ";
+  }
+
+  .b3-tui-edge > i {
+    color: var(--b3-tui-muted);
+    font-style: normal;
+  }
+
+  .b3-tui-edge > i:not(:empty):before, .b3-tui-edge > i:not(:empty):after {
+    content: " ";
+  }
+
+  .b3-tui-fill {
+    flex: 1;
+    min-inline-size: 0;
+    overflow: hidden;
+  }
+
+  .b3-tui-fill:before {
+    content: "────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────";
+  }
+
+  .b3-tui-box {
+    border: solid var(--b3-tui-line);
+    border-width: 0 1px;
+    flex: none;
+    margin: 0 .5ch;
+    padding: 4px 1ch 0 calc(.5ch - 1px);
+  }
+
+  .b3-tui-list {
+    overscroll-behavior: contain;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+    flex: auto;
+    min-block-size: 0;
+    padding-block: 0 4px;
+    overflow-y: auto;
+  }
+
+  .b3-tui-list::-webkit-scrollbar {
+    display: none;
+  }
+
+  .b3-tui-prompt {
+    min-block-size: 26px;
+    color: var(--b3-tui-accent);
+    cursor: text;
+    align-items: center;
+    gap: 1ch;
+    display: flex;
+  }
+
+  .b3-tui-prompt:before {
+    content: ">";
+  }
+
+  .b3-tui-prompt > input {
+    min-inline-size: 0;
+    color: var(--b3-tui-fg);
+    font: inherit;
+    caret-color: var(--b3-tui-success);
+    background: none;
+    border: 0;
+    outline: none;
+    flex: 1;
+    padding: 0;
+  }
+
+  .b3-tui-prompt > input::placeholder {
+    color: var(--b3-tui-faint);
+  }
+
+  .b3-tui-row {
+    box-sizing: border-box;
+    min-block-size: 26px;
+    inline-size: 100%;
+    color: inherit;
+    font: inherit;
+    text-align: start;
+    cursor: pointer;
+    white-space: nowrap;
+    -webkit-tap-highlight-color: transparent;
+    background: none;
+    border: 0;
+    outline: none;
+    align-items: center;
+    gap: 1ch;
+    padding: 1px 0;
+    display: flex;
+  }
+
+  .b3-tui-row:before {
+    content: " ";
+    color: var(--b3-tui-success);
+    flex: 0 0 1ch;
+    order: -2;
+  }
+
+  .b3-tui-row[aria-selected="true"] {
+    background: var(--b3-tui-selected);
+  }
+
+  .b3-tui-row[aria-selected="true"]:before {
+    content: ">";
+  }
+
+  .b3-tui-row:focus-visible {
+    box-shadow: inset 0 0 0 1px var(--b3-tui-accent);
+  }
+
+  .b3-tui-row:disabled {
+    opacity: .5;
+    cursor: default;
+  }
+
+  @media (hover: hover) {
+    .b3-tui-row:hover {
+      background: var(--b3-tui-selected);
+    }
+  }
+
+  .b3-tui-tag {
+    white-space: nowrap;
+  }
+
+  .b3-tui-tag:before {
+    content: "[";
+  }
+
+  .b3-tui-tag:after {
+    content: "]";
+  }
+
+  .b3-tui-section > summary {
+    color: var(--b3-tui-muted);
+    list-style: none;
+  }
+
+  .b3-tui-section > summary::-webkit-details-marker {
+    display: none;
+  }
+
+  .b3-tui-section > summary:after {
+    content: "▸";
+    order: -1;
+  }
+
+  .b3-tui-section[open] > summary:after {
+    content: "▾";
+  }
+
+  .b3-tui-keys {
+    color: var(--b3-tui-faint);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    flex: none;
+    margin-block-start: 6px;
+    padding: 0 1.5ch;
+    overflow: hidden;
+  }
+
+  .b3-tui-keys kbd {
+    font: inherit;
+    color: var(--b3-tui-muted);
+  }
+
+  @media (pointer: coarse) {
+    .b3-tui {
+      font-size: 14px;
+    }
+
+    .b3-tui-row, .b3-tui-prompt {
+      min-block-size: 44px;
+    }
+
+    .b3-tui-prompt > input {
+      font-size: 16px;
+    }
+  }
+}

package/dist/tui.min.css

@@ -0,0 +1 @@
+@layer bare.components{.b3-tui{--b3-tui-bg:#1c1c1f;--b3-tui-fg:#e6e6e6;--b3-tui-muted:#999;--b3-tui-faint:#666;--b3-tui-line:#555;--b3-tui-selected:#303036;--b3-tui-accent:#11a8cd;--b3-tui-success:#0dbc79;--b3-tui-warning:#e5e510;--b3-tui-danger:#f14c4c;--b3-tui-font:Menlo, Consolas, "DejaVu Sans Mono", monospace;color-scheme:dark;background:var(--b3-tui-bg);color:var(--b3-tui-fg);font:13px/1.5 var(--b3-tui-font)}:where(.b3-tui) [data-b3-tone=accent]{color:var(--b3-tui-accent)}:where(.b3-tui) [data-b3-tone=success]{color:var(--b3-tui-success)}:where(.b3-tui) [data-b3-tone=warning]{color:var(--b3-tui-warning)}:where(.b3-tui) [data-b3-tone=danger]{color:var(--b3-tui-danger)}:where(.b3-tui) [data-b3-tone=muted]{color:var(--b3-tui-muted)}:where(.b3-tui) [data-b3-tone=faint]{color:var(--b3-tui-faint)}.b3-tui-frame{flex-direction:column;min-block-size:0;display:flex}.b3-tui-edge{white-space:pre;color:var(--b3-tui-line);flex:none;line-height:normal;display:flex;overflow:hidden}.b3-tui-edge:before{content:"┌"}.b3-tui-edge:has(>b):before{content:"┌─ "}.b3-tui-edge:after{content:"─┐"}.b3-tui-edge[data-b3-edge=bottom]:before{content:"└"}.b3-tui-edge[data-b3-edge=bottom]:has(>b):before{content:"└─ "}.b3-tui-edge[data-b3-edge=bottom]:after{content:"┘"}.b3-tui-edge>b{color:var(--b3-tui-accent);font-weight:400}.b3-tui-edge>b:after{content:" "}.b3-tui-edge>i{color:var(--b3-tui-muted);font-style:normal}.b3-tui-edge>i:not(:empty):before,.b3-tui-edge>i:not(:empty):after{content:" "}.b3-tui-fill{flex:1;min-inline-size:0;overflow:hidden}.b3-tui-fill:before{content:"────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────"}.b3-tui-box{border:solid var(--b3-tui-line);border-width:0 1px;flex:none;margin:0 .5ch;padding:4px 1ch 0 calc(.5ch - 1px)}.b3-tui-list{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex:auto;min-block-size:0;padding-block:0 4px;overflow-y:auto}.b3-tui-list::-webkit-scrollbar{display:none}.b3-tui-prompt{min-block-size:26px;color:var(--b3-tui-accent);cursor:text;align-items:center;gap:1ch;display:flex}.b3-tui-prompt:before{content:">"}.b3-tui-prompt>input{min-inline-size:0;color:var(--b3-tui-fg);font:inherit;caret-color:var(--b3-tui-success);background:0 0;border:0;outline:none;flex:1;padding:0}.b3-tui-prompt>input::placeholder{color:var(--b3-tui-faint)}.b3-tui-row{box-sizing:border-box;min-block-size:26px;inline-size:100%;color:inherit;font:inherit;text-align:start;cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent;background:0 0;border:0;outline:none;align-items:center;gap:1ch;padding:1px 0;display:flex}.b3-tui-row:before{content:" ";color:var(--b3-tui-success);flex:0 0 1ch;order:-2}.b3-tui-row[aria-selected=true]{background:var(--b3-tui-selected)}.b3-tui-row[aria-selected=true]:before{content:">"}.b3-tui-row:focus-visible{box-shadow:inset 0 0 0 1px var(--b3-tui-accent)}.b3-tui-row:disabled{opacity:.5;cursor:default}@media (hover:hover){.b3-tui-row:hover{background:var(--b3-tui-selected)}}.b3-tui-tag{white-space:nowrap}.b3-tui-tag:before{content:"["}.b3-tui-tag:after{content:"]"}.b3-tui-section>summary{color:var(--b3-tui-muted);list-style:none}.b3-tui-section>summary::-webkit-details-marker{display:none}.b3-tui-section>summary:after{content:"▸";order:-1}.b3-tui-section[open]>summary:after{content:"▾"}.b3-tui-keys{color:var(--b3-tui-faint);white-space:nowrap;text-overflow:ellipsis;flex:none;margin-block-start:6px;padding:0 1.5ch;overflow:hidden}.b3-tui-keys kbd{font:inherit;color:var(--b3-tui-muted)}@media (pointer:coarse){.b3-tui{font-size:14px}.b3-tui-row,.b3-tui-prompt{min-block-size:44px}.b3-tui-prompt>input{font-size:16px}}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livx.cc/bare-v3",
-  "version": "0.1.0-alpha.73",
+  "version": "0.1.0-alpha.74",
   "type": "module",
   "files": [
     "dist",
@@ -9,6 +9,8 @@
   "exports": {
     "./css": "./dist/bare.css",
     "./css/min": "./dist/bare.min.css",
+    "./css/tui": "./dist/tui.css",
+    "./css/tui/min": "./dist/tui.min.css",
     "./manifest": "./dist/manifest.json",
     "./references/*": "./dist/references/*",
     "./ui": "./dist/ui.js",