@livx.cc/bare-v3 0.1.0-alpha.145 → 0.1.0-alpha.147

package/README.md

@@ -19,7 +19,7 @@ Install the published alpha with `bun add @livx.cc/bare-v3@alpha`; use `bun pm p
 
 Live batches are explicit: save `bun lab plan config.json` output, then run `bun lab execute saved-plan.json artifacts/batches/name/runs --live --max-new-jobs 4` with `CURSOR_API_KEY` available in the environment (and the configured `CURSOR_REAL_NODE` where required). This can incur provider charges. The job cap limits new generations in that invocation, not dollars; provider cost is currently unavailable. Obtain the resource budget before execution. Resume with the exact saved plan, artifact directory and unchanged built source. Before starting, the CLI checks installed AgentX/AI package versions against the pinned versions and boots Node through the isolation launcher without a model request. Install the frozen lock and use a self-contained `CURSOR_REAL_NODE` if Homebrew dynamic libraries are blocked. Generation failure, timeout, cancellation or a request for input stops the batch for investigation. Terminal attempts are retained, including failures; they are not retried automatically. A remaining `.batch.lock` or nonterminal attempt requires checking the recorded process and child handles before any manual recovery. Completion of attempts is never quality qualification. Review that batch with `bun lab compare artifacts/batches/name`; replay one run with `bun lab replay <run-id> artifacts/batches/name/runs`. These explicit paths keep unrelated pilots out of the batch review.
 
-`bun lab plan config.json` creates a seeded, capped development job plan. `bun lab prepare run.json` prepares one isolated workspace and manifest without invoking a model. The [visual playground](http://127.0.0.1:4313/fixtures/playground.html) demonstrates the current component contracts and shows the bare-v2 coverage audit. Composed apps include Signal (system performance), Elsewhere (local discovery/booking), Daylight (iOS/Android web studies), Relay, Gather setup and sign-in, Counter, Margin, Still, Fieldnotes, Interval, and the Forma project workspace. New components are an implemented subset, not full bare-v2 parity or a qualified release. Two public layers ship: `/css` (CSS only) and `/components` — light-DOM custom elements (`<b3-tabs>`, `<b3-reel>`, `<b3-dropdown>`, `<b3-dialog>`, `<b3-sheet>`, `<b3-command>`, `<b3-toast-region>`, `<b3-toc>`) that enhance native markup, plus the document-wide `data-b3-confirm` guard and the `motion`/`layout`/`sequence`/`settle` helpers. Loading the entry (ESM, or re-bundled as a classic script) registers everything; there is no setup call or cleanup, and loading twice is a no-op. Heavier components are opt-in subpaths: `/components/board` (`<b3-board>`), `/components/date-picker` and `/components/image-viewer`. They are separate files rather than one bundle because of weight: the core is ~20 KB minified (~7 KB gzip), the board alone ~117 KB (~36 KB gzip, it bundles a reactive template runtime privately — one that needs no `'unsafe-eval'` under a Content-Security-Policy and loads only when a board first renders), so a single bundle would multiply every page's always-loaded cost by ~5x for a component most pages never show. `/markdown-stream` is a plain module (`MarkdownStream`, a class, not a tag) for streaming LLM markdown into bare-v3 components. Every entry ships `.d.ts` typings. Read `recipes/board.md`, `recipes/image-viewer.md`, `recipes/date-picker.md` or `recipes/markdown-stream.md` for markup and lifecycle; `fixtures/elements/markdown-stream.html` demos the stream; `bun run chat` serves it as a live chat against a real model (needs `OPENROUTER_API_KEY` or `OPENAI_API_KEY`; offline it replays canned replies). The plain/React/Vue demos in `fixtures/elements/` exercise the image viewer; run `bun scripts/verify-image-viewer.ts` through the authorized AgentX browser workflow to verify measured transforms. `bun scripts/verify-components.ts`, `verify-reel.ts` and `verify-confirm.ts` drive headless Chrome against `fixtures/checks/` and re-run every check against a control build without the code.
+`bun lab plan config.json` creates a seeded, capped development job plan. `bun lab prepare run.json` prepares one isolated workspace and manifest without invoking a model. The [visual playground](http://127.0.0.1:4313/fixtures/playground.html) demonstrates the current component contracts and shows the bare-v2 coverage audit. Composed apps include Signal (system performance), Elsewhere (local discovery/booking), Daylight (iOS/Android web studies), Relay, Gather setup and sign-in, Counter, Margin, Still, Fieldnotes, Interval, and the Forma project workspace. New components are an implemented subset, not full bare-v2 parity or a qualified release. Two public layers ship: `/css` (CSS only) and `/components` — light-DOM custom elements (`<b3-tabs>`, `<b3-reel>`, `<b3-dropdown>`, `<b3-dialog>`, `<b3-sheet>`, `<b3-command>`, `<b3-toast-region>`, `<b3-toc>`) that enhance native markup, plus the document-wide `data-b3-confirm` guard and the `motion`/`layout`/`sequence`/`settle` helpers. Loading the entry (ESM, or re-bundled as a classic script) registers everything; there is no setup call or cleanup, and loading twice is a no-op. Heavier components are opt-in subpaths: `/components/board` (`<b3-board>`), `/components/date-picker`, `/components/image-viewer` and `/components/audio-player`. They are separate files rather than one bundle because of weight: the core is ~20 KB minified (~7 KB gzip), the board alone ~117 KB (~36 KB gzip, it bundles a reactive template runtime privately — one that needs no `'unsafe-eval'` under a Content-Security-Policy and loads only when a board first renders), so a single bundle would multiply every page's always-loaded cost by ~5x for a component most pages never show. `/markdown-stream` is a plain module (`MarkdownStream`, a class, not a tag) for streaming LLM markdown into bare-v3 components. Every entry ships `.d.ts` typings. Read `recipes/board.md`, `recipes/image-viewer.md`, `recipes/date-picker.md`, `recipes/audio-player.md` or `recipes/markdown-stream.md` for markup and lifecycle; `fixtures/elements/markdown-stream.html` demos the stream; `bun run chat` serves it as a live chat against a real model (needs `OPENROUTER_API_KEY` or `OPENAI_API_KEY`; offline it replays canned replies). The plain/React/Vue demos in `fixtures/elements/` exercise the image viewer; run `bun scripts/verify-image-viewer.ts` through the authorized AgentX browser workflow to verify measured transforms. `bun scripts/verify-components.ts`, `verify-reel.ts` and `verify-confirm.ts` drive headless Chrome against `fixtures/checks/` and re-run every check against a control build without the code.
 
 Playground previews accept shareable app/width links, for example [Signal at 390px](http://127.0.0.1:4313/fixtures/playground.html?demo=metrics&width=390#demos). The controls keep these query parameters in sync; unknown values fall back to the authored defaults. This is an iframe layout preview, not mobile-device qualification.
 

package/dist/components/audio-player.d.ts

@@ -0,0 +1,18 @@
+/**
+ * <b3-audio-player> — transport controls around an authored <audio>.
+ *
+ * Light DOM, opt-in entry (`@livx.cc/bare-v3/components/audio-player`). Without the module the
+ * child is a native `<audio controls>`; with it the native controls are hidden and replaced by
+ * play/pause, a seek bar, current / total time, skip back/forward and a speed cycle — the parts a
+ * WebView's native player shrinks away on a phone. The <audio> stays the source of truth: set its
+ * `src`, `currentTime` or call `play()` from your code and the controls follow.
+ */
+import { B3Element } from './base';
+/** Seconds as m:ss, or h:mm:ss past an hour. Not-yet-known (NaN/Infinity) reads as --:--. */
+export declare function clock(seconds: number): string;
+export declare class B3AudioPlayer extends B3Element<HTMLAudioElement> {
+    /** Seconds the skip buttons move (attribute `skip`, default 15). */
+    get skip(): number;
+    protected target(): HTMLAudioElement | null;
+    protected mount(audio: HTMLAudioElement, signal: AbortSignal): void;
+}

package/dist/components/audio-player.js

@@ -0,0 +1,15 @@
+var E=typeof HTMLElement==="function"?HTMLElement:class{};function g(e,n){if(typeof customElements>"u"||customElements.get?.(e))return;try{customElements.define(e,n)}catch(r){console.warn(`bare-v3: ${e} was not registered`,r)}}class m extends E{#e=null;#n=null;#t=null;target(){return this}connectedCallback(){let e=this.ownerDocument;if(e.readyState==="loading"){e.addEventListener("DOMContentLoaded",()=>{if(this.isConnected)this.#r()},{once:!0});return}this.#r()}disconnectedCallback(){this.#a(),this.#t?.disconnect(),this.#t=null}#r(){if(this.#e)return;let e=this.target();if(e!==this&&!this.#t)this.#t=new MutationObserver(()=>{if(this.target()!==this.#n)this.#a(),this.#r()}),this.#t.observe(this,{childList:!0});if(!e)return;this.#e=new AbortController,this.#n=e,this.mount(e,this.#e.signal)}#a(){this.#e?.abort(),this.#e=null,this.#n=null}}var T=Symbol.for("bare-v3.styles");function v(e,n,r){if(!e?.head||e.getElementById(n))return;let s=e[T]??=new Set;if(s.has(n))return;let a=e.defaultView;if(a&&"adoptedStyleSheets"in e&&"replaceSync"in a.CSSStyleSheet.prototype){let i=new a.CSSStyleSheet;i.replaceSync(r),e.adoptedStyleSheets=[...e.adoptedStyleSheets,i],s.add(n);return}let o=e.createElement("style");o.id=n,o.textContent=r,e.head.append(o)}function p(e){if(!Number.isFinite(e)||e<0)return"--:--";let n=Math.floor(e),r=Math.floor(n/3600),s=Math.floor(n/60)%60,a=(o)=>String(o).padStart(2,"0");return r?`${r}:${a(s)}:${a(n%60)}`:`${s}:${a(n%60)}`}var w="b3-audio-player-style",M=`
+b3-audio-player{container-type:inline-size;inline-size:100%;display:flex;align-items:center;gap:.25rem;min-inline-size:0;font-variant-numeric:tabular-nums;}
+b3-audio-player > audio{display:none;}
+b3-audio-player:not(:defined) > audio{display:block;inline-size:100%;}
+b3-audio-player button{flex:none;display:inline-flex;align-items:center;justify-content:center;
+  min-inline-size:var(--b3-touch,44px);min-block-size:var(--b3-touch,44px);padding:0;border:0;border-radius:var(--b3-radius-small,.375rem);
+  background:none;color:inherit;font:inherit;font-size:.8125em;cursor:pointer;}
+b3-audio-player button:hover{background:var(--b3-color-canvas,#f6f5f0);}
+b3-audio-player button:focus-visible,b3-audio-player input:focus-visible{outline:2px solid var(--b3-color-focus,#276bdd);outline-offset:1px;}
+b3-audio-player svg{inline-size:1.25rem;block-size:1.25rem;fill:currentColor;}
+b3-audio-player [data-b3-part="time"]{flex:none;font-size:.8125em;color:var(--b3-color-muted,#5d6b60);white-space:nowrap;}
+b3-audio-player input[type=range]{flex:1;min-inline-size:3rem;margin:0;accent-color:var(--b3-color-accent,#276bdd);cursor:pointer;}
+@container (max-width:22rem){[data-b3-part="rate"]{display:none;} b3-audio-player button{min-inline-size:2.25rem;}}
+@container (max-width:14rem){[data-b3-part="back"],[data-b3-part="fwd"]{display:none;}}
+`,f={play:'<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg>',pause:'<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 5h4v14H7zm6 0h4v14h-4z"/></svg>'},y=[1,1.25,1.5,2,0.75];class S extends m{get skip(){return Number(this.getAttribute("skip"))||15}target(){return this.querySelector(":scope > audio")}mount(e,n){v(this.ownerDocument,w,M);for(let t of this.querySelectorAll(":scope > [data-b3-part]"))t.remove();let r=this.skip,s=`<button type="button" data-b3-part="back" aria-label="Back ${r} seconds">−${r}</button><button type="button" data-b3-part="play" aria-label="Play">${f.play}</button><button type="button" data-b3-part="fwd" aria-label="Forward ${r} seconds">+${r}</button><input type="range" data-b3-part="seek" min="0" max="0" step="0.1" value="0" aria-label="Seek"><span data-b3-part="time"></span>`+'<button type="button" data-b3-part="rate" aria-label="Playback speed">1×</button>';e.insertAdjacentHTML("afterend",s);let a=(t)=>this.querySelector(`:scope > [data-b3-part="${t}"]`),o=a("play"),i=a("seek"),k=a("time"),h=a("rate"),u=!1,d=()=>{let{duration:t,currentTime:c}=e;if(Number.isFinite(t))i.max=String(t);if(!u)i.value=String(c);i.setAttribute("aria-valuetext",`${p(c)} of ${p(t)}`),k.textContent=`${p(u?Number(i.value):c)} / ${p(t)}`,o.innerHTML=e.paused?f.play:f.pause,o.setAttribute("aria-label",e.paused?"Play":"Pause"),h.textContent=`${e.playbackRate}×`},l=(t,c,x)=>t.addEventListener(c,x,{signal:n});for(let t of["timeupdate","durationchange","loadedmetadata","play","pause","ended","ratechange","emptied","seeked"])l(e,t,d);let b=(t)=>{e.currentTime=Math.max(0,Math.min(t,Number.isFinite(e.duration)?e.duration:t))};l(o,"click",()=>{if(e.paused)e.play().catch((t)=>this.dispatchEvent(new CustomEvent("b3-error",{detail:t,bubbles:!0})));else e.pause()}),l(a("back"),"click",()=>b(e.currentTime-r)),l(a("fwd"),"click",()=>b(e.currentTime+r)),l(h,"click",()=>{e.playbackRate=y[(y.indexOf(e.playbackRate)+1)%y.length]}),l(i,"input",()=>{u=!0,d()}),l(i,"change",()=>{u=!1,b(Number(i.value))}),n.addEventListener("abort",()=>{for(let t of this.querySelectorAll(":scope > [data-b3-part]"))t.remove()},{once:!0}),d()}}g("b3-audio-player",S);export{S as B3AudioPlayer,p as clock};

package/dist/manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.0-alpha.145",
+  "version": "0.1.0-alpha.147",
   "cssSha256": "a1e97a6aa21ed495e8de168d029455630332805d056b112c8e40fe7127611142",
   "classes": [
     "b3-accordion",
@@ -513,6 +513,7 @@
     "mobile.md",
     "app-frame.md",
     "tui.md",
+    "audio-player.md",
     "board.md",
     "cross-screen.md",
     "date-picker.md",

package/dist/references/audio-player.md

@@ -0,0 +1,30 @@
+# Audio player element
+
+`<b3-audio-player>` is an opt-in component for recordings: play/pause, a seek bar, current / total
+time, skip back/forward and a speed cycle. A WebView's native `<audio controls>` shrinks to a lone
+play button on a phone; this does not.
+
+```html
+<script type="module" src="@livx.cc/bare-v3/components/audio-player"></script>
+
+<!-- Without the module this is the native player. -->
+<b3-audio-player skip="15">
+  <audio controls preload="metadata" src="/rec/mix.webm"></audio>
+</b3-audio-player>
+```
+
+Always author the `<audio>` yourself: it is the degraded experience and stays the source of truth.
+Set `audio.src`, `audio.currentTime`, call `audio.play()` from your code — the controls follow.
+A replaced `<audio>` child is re-mounted.
+
+The element is a size container (it fills its line; the controls fold by its own width). As a
+grid item, give the track a size (`grid-template-columns: minmax(0, 1fr)`): an `auto` track
+sizes a container to zero.
+
+| Attribute | Meaning |
+| --- | --- |
+| `skip` | Seconds the back/forward buttons move (default 15). |
+
+Events: `b3-error` (bubbles) when `play()` is refused. Narrow (a phone bar) drops speed under ~22rem
+and skip under ~14rem; play, seek and time always stay. `clock(seconds)` (m:ss / h:mm:ss) is exported for matching
+timestamps elsewhere on the page.

package/dist/third-party.json

@@ -8,6 +8,7 @@
   ],
   "dist/components/date-picker.js": [],
   "dist/components/image-viewer.js": [],
+  "dist/components/audio-player.js": [],
   "dist/markdown-stream.js": []
  },
  "packages": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livx.cc/bare-v3",
-  "version": "0.1.0-alpha.145",
+  "version": "0.1.0-alpha.147",
   "type": "module",
   "thirdPartyNotices": "./dist/third-party.json",
   "files": [
@@ -27,6 +27,10 @@
       "types": "./dist/components/date-picker.d.ts",
       "default": "./dist/components/date-picker.js"
     },
+    "./components/audio-player": {
+      "types": "./dist/components/audio-player.d.ts",
+      "default": "./dist/components/audio-player.js"
+    },
     "./components/image-viewer": {
       "types": "./dist/components/image-viewer.d.ts",
       "default": "./dist/components/image-viewer.js"