@timebraid/vue 1.15.0 → 1.17.0

package/README.md

@@ -35,22 +35,24 @@ Import `@timebraid/tokens/styles.css` once in `main.ts` (or `@timebraid/vue/styl
 | `TField` | Filled text field |
 | `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 |
+| `TBanner` | Full-width bar for a standing notice such as "Signed in as Mia Okafor" while an admin acts as another person: an optional icon, a bold title with the text (or the default slot) under it, and a pill `action` on the right; `inverse` (the tooltip's `--label` and `--bg` pairing) by default or `accent`, `compact` for the phone sizes |
 | `TBar` | Animated value bar |
+| `TBudgetBar` | A budget bar for Reports: used fills the track, the gap up to where the budget stands by now is tinted and marked, time past the budget runs red |
 | `TGoalBar` | Today's goal bar: done fills a `--fill` track in green and the catch-up share of the target is hatched in orange at the right end until the goal is met |
 | `TGoalStatus` | Today's goal status pill: "+19m catch-up" ("+19m" when `short`), Ahead or Done; nothing for `none` |
 | `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; on phones drag the grabber, the header or, at the top of its scroll, the content to dismiss - it follows the finger and closes or springs back by release direction |
+| `TSheet` | Centred sheet on desktop, bottom sheet on phones, capped at the window height minus 48px (54px on phones) with the header and desktop footer pinned and the body scrolling; the phone header is a `1fr auto 1fr` grid whose left spot is Cancel, the `left` slot, or nothing with `cancelLabel` `null`; on phones drag the grabber, the header or, at the top of its scroll, the content to dismiss - it follows the finger and closes or springs back by release direction |
 | `TDot` | Status dot with a pulsing ring when running |
 | `TDur` | Duration readout, mono and tabular |
 | `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`; with several timers its stop control opens the popover, where Stop all sits top right |
 | `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 |
+| `TWorkspaceSwitcher` | Scope selector: All workspaces or one; `actions` adds rows such as Admin portal under the list, each closing the menu and emitting `action` with its id |
+| `TWorkspaceMenu` | The workspace list shared by the switcher's popover and the drawer; `embedded` drops its shadow for inline use; `actions` sit between two hairlines above New workspace |
+| `TWorkspaceDrawer` | Full-height phone workspace list; drag the panel to dismiss; `actions` pin above Add a workspace and emit `action` with the id, then `close` |
 | `TTimerBar` | Phone bottom timer bar: takes the full `timers` array, count first with the longest leading; with several timers its stop control emits `open` for the running sheet instead of stopping them all |
 | `TStrokes` | Oversized faded tally strokes behind sign-in and empty states |
 | `TStartHero` | The pill-shaped start field that opens Today: "Start a timer" with "Quick start" chips on desktop when nothing runs, "Start another timer" with a "Runs in parallel" hint (chips kept) when `hasRunning`, the bare pill when `mobile` |
@@ -64,8 +66,24 @@ Import `@timebraid/tokens/styles.css` once in `main.ts` (or `@timebraid/vue/styl
 | `TAuthCard` | Sign-in layout card |
 | `TCheckbox` | Checkbox control |
 | `TTooltip` | Hover tooltip |
+| `TDaysTimeline` | Several days as bands on one shared am/pm hour axis (minutes from midnight), the day in a left gutter: parallel timers stack into lanes per day, each task in its `taskSwatches` colour (striped past seven), names inside wide bars, running bars run to the now line, `hiddenIds` leave the chart, hover syncs with the rows, and `highlightIds` fades non-matching bars in place |
+| `TEyeToggle` | The eye that hides an entry from the chart (crossed out when hidden), with a tooltip that says so |
+| `TOrderButton` | The sort icon beside Filters, newest or oldest first, with a tooltip that explains the order |
+| `TPeriodStepper` | ‹ This week › at the top of a chart card: the arrows step one day, week or month, the label opens a `TMenu` of Day, Week, Month and Custom range…, and a text link returns to the current period |
+| `TMenu` | A small choice menu: a 230px popover under its anchor on the desktop, a bottom sheet of rows on the phone, the chosen item in accent with a check |
+| `TSearchField` | Page search field with a `/` keycap that focuses it from anywhere, a clear button once there is text, and Escape to clear and blur; `size="sm"` for lists in sheets, `busy` for a spinner |
+| `TParallelMark` | Two short running bars, titled "Ran alongside {names}"; replaces the "in parallel" chip on rows |
+| `TAutoStopMark` | An orange `timer-off`, titled "Stopped automatically. Check the end time"; replaces that chip on rows |
+| `TFilterButton` | The Filters button beside search; accent with a count badge when filters are on, icon-only with a corner badge when `compact` |
+| `TChipRow` | Add entry's chip row: section label, 30px pills with a colour dot or an icon, single or `multiple` |
+| `TFilterSheet` | The Filters sheet of Entries and Reports: an accordion of Workspace, Project, Task and Person (each a `TPickList` fed by `fetchOptions`), Show only (switch rows) and Notes (a check list), with each value on the right; picks cascade through `parentOf`, it keeps a draft and emits `apply` |
+| `TPickList` | A long multi-pick list that stays five rows tall: debounced server search with a spinner and dimmed old rows, picked rows first and frozen while open, 20 more rows per page as you scroll, and a fade at the bottom until the end |
+| `THighlight` | Text with every word of a query marked in `--accent-soft-2` |
+| `TPager` | The strip under a paged list: a flat, right-aligned stepper ‹ 10 per page ▾ › under a hairline (a menu of 10, 25 and 50, arrows through the pages) with the range ("1–10 of 34") small on the left; `pageSlice` and `pageable` do the paging |
+| `TSkeleton` | A shimmering placeholder block (text line, block, circle or pill) for a page that has not drawn yet; `.t-skeleton` in the tokens paints the shimmer |
+| `TSkeletonList` | The skeleton of a list card: rows of a leading mark, two lines of differing length and a short right block |
 
-Also exported: `formatDuration(seconds, 'clock' | 'short' | 'compact')`, `PROJECT_COLORS`, `TIMEBRAID_ICON_BASE`, `DEFAULT_ICON_BASE`, `resolveTheme`, `applyTheme`, `watchTheme`, `THEME_PREFERENCES`.
+Also exported: `formatDuration(seconds, 'clock' | 'short' | 'compact' | 'friendly')`, the timeline helpers (`timelineSpan`, `isRunningEntry`, `parallelMinutes`, `parallelPartners`), the task colours (`taskSwatches`, `swatchFill`, `swatchInk`, `SWATCH_COLORS`, `STRIPES`, `RUNNING_SHEEN`), `hourLabel`, `minutesToAmPm`, `toggleId`, the filter helpers (`emptyFilters`, `copyFilters`, `filterCount`, `entriesText`, `ENTRY_FLAGS`, `NOTE_FILTERS`, `DIMENSION_KEYS`, `FLAG_LABELS`, `FLAG_HINTS`, `NOTE_LABELS`) and their types, `PickItem` and `PickPage`, `highlightSegments`, `PROJECT_COLORS`, `TIMEBRAID_ICON_BASE`, `DEFAULT_ICON_BASE`, `resolveTheme`, `applyTheme`, `watchTheme`, `THEME_PREFERENCES`.
 
 `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.
 
@@ -74,6 +92,8 @@ Also exported: `formatDuration(seconds, 'clock' | 'short' | 'compact')`, `PROJEC
 - `TBadge tone="soon"` with the words "Coming soon" on every roadmap item.
 - Indigo (`--accent`) is the accent and the running colour. Amber lives in the app icon only.
 - Project colours come from `PROJECT_COLORS` (Okabe-Ito). Nothing else.
+- No chips on list rows; marks with tooltips instead (`TParallelMark`, `TAutoStopMark`, and the workspace once as a `TWsIcon` beside the project).
+- Long option lists use `TPickList` (server search, 5 rows, paged by 20). On/off filters are switch rows, single choices are check lists. No pills or tabs in sheets.
 
 ## Develop