@timebraid/vue 1.3.0 → 1.5.0

package/README.md

@@ -13,7 +13,7 @@ import { TBtn, TPill, TIcon } from '@timebraid/vue'
 
 <template>
   <TBtn size="xl" icon="download">Download for macOS</TBtn>
-  <TPill :running="[{ id: '1', task: 'Logo exploration', project: 'Acme rebrand', color: 'var(--chart-1)', since: '9:12', seconds: 8047 }]" />
+  <TPill :running="[{ id: '1', task: 'Logo exploration', project: 'Acme rebrand', projectId: 'acme', color: 'var(--chart-1)', since: '9:12', seconds: 8047 }]" />
   <TIcon name="play" :size="16" />
 </template>
 ```
@@ -34,22 +34,27 @@ Import `@timebraid/tokens/styles.css` once in `main.ts` (or `@timebraid/vue/styl
 | `TSelect` | Trailing-value select with `chevrons-up-down`, used inside `TRow`; name the control with `label` (rendered visually hidden) or `ariaLabel` |
 | `TBadge` | Status pill: neutral, running, green, red, soon |
 | `TBar` | Animated value bar |
-| `TAvatar` | Initials avatar |
-| `TLargeTitle` | Large collapsing page title |
-| `TSheet` | Centred sheet on desktop, bottom sheet on phones |
+| `TAvatar` | Initials avatar; pass `src` for a photo instead |
+| `TAvatarStack` | Overlapping `TAvatar`s with a `+N` overflow count |
+| `TLargeTitle` | Large collapsing page title; `sticky` pins it above its scrolling content |
+| `TSheet` | Centred sheet on desktop, bottom sheet on phones; drag the grabber or header to dismiss on phones |
 | `TDot` | Status dot with a pulsing ring when running |
 | `TDur` | Duration readout, mono and tabular |
-| `TWaterfall` | Parallel-time waterfall timeline for reports |
-| `TPill` | The floating always-visible timer pill; the `popover` slot (scoped with `running`) replaces the popover body, and `open` is consumer-owned through `update:open` |
-| `TWorkspaceSwitcher` | Workspace picker popover |
-| `TTimerBar` | Phone bottom timer bar |
+| `TWaterfall` | Parallel-time waterfall timeline for reports, one lane per task grouped under its project; `showWs` adds a workspace tag per project |
+| `TPill` | The floating always-visible timer pill: count first, the longest timer leads; the `popover` slot (scoped with `running`) replaces the popover body, grouped by workspace then project, and `open` is consumer-owned through `update:open` |
+| `TWsIcon` | Workspace glyph: a coloured initial square, or the app mark when `all` |
+| `TWsTag` | Small workspace label, the square plus its name; appears only in the All-workspaces scope |
+| `TWorkspaceSwitcher` | Scope selector: All workspaces or one |
+| `TWorkspaceMenu` | The workspace list shared by the switcher's popover and the drawer; `embedded` drops its shadow for inline use |
+| `TWorkspaceDrawer` | Full-height phone workspace list; drag the panel to dismiss |
+| `TTimerBar` | Phone bottom timer bar: takes the full `timers` array, count first with the longest leading |
 | `TStrokes` | Oversized faded tally strokes behind sign-in and empty states |
-| `TIOSNav` | iOS large-title nav bar that collapses on scroll |
+| `TIOSNav` | iOS large-title nav bar that collapses on scroll; `leading` slot for a leading control |
 | `TIOSTabBar` | iOS tab bar |
-| `TAndroidTop` | Android top app bar |
+| `TAndroidTop` | Android top app bar; `sub` for a subtitle, `scrolled` for its elevated state, `title` slot to replace the text |
 | `TAndroidNavBar` | Android bottom navigation bar |
-| `TIcon` | Lucide glyph via CSS mask, follows `currentColor` |
-| `TLogo` | The mark, correct artwork per size |
+| `TIcon` | Bundled inline Lucide glyph, follows `currentColor` |
+| `TLogo` | The stopwatch mark, correct artwork per size; `mono` paints it in currentColor |
 | `TCodeInput` | 6-digit code entry |
 | `TAuthCard` | Sign-in layout card |
 | `TCheckbox` | Checkbox control |
@@ -57,14 +62,7 @@ Import `@timebraid/tokens/styles.css` once in `main.ts` (or `@timebraid/vue/styl
 
 Also exported: `formatDuration(seconds, 'clock' | 'short' | 'compact')`, `PROJECT_COLORS`, `TIMEBRAID_ICON_BASE`, `DEFAULT_ICON_BASE`, `resolveTheme`, `applyTheme`, `watchTheme`, `THEME_PREFERENCES`.
 
-`TIcon` masks its glyph from `https://unpkg.com/lucide-static@latest/icons/`. Self-host the glyphs and point every icon at them in one line. An iOS WebView under `tauri://localhost` needs this, because it cannot paint a cross-origin mask:
-
-```ts
-import { TIMEBRAID_ICON_BASE } from '@timebraid/vue'
-app.provide(TIMEBRAID_ICON_BASE, '/icons/')
-```
-
-A `base` prop on a single `TIcon` still wins over the provided value.
+`TIcon` ships its glyphs: `scripts/glyphs.mjs` writes the Lucide paths for every name the products use into `packages/vue/src/icons/glyphs.ts`, and the component renders them inline in `currentColor`. Nothing is fetched at runtime. To add a glyph, add its name to `NAMES` in the script and run `pnpm glyphs`. `ICON_NAMES` and `hasIcon()` are exported so an app can assert every name it uses is bundled. A name missing from the table still masks from `TIMEBRAID_ICON_BASE` (or the `base` prop) with a dev warning, so nothing breaks while the table catches up.
 
 ## Rules