@timebraid/vue 1.16.0 → 1.17.0

package/README.md

@@ -35,6 +35,7 @@ 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 |
@@ -49,9 +50,9 @@ Import `@timebraid/tokens/styles.css` once in `main.ts` (or `@timebraid/vue/styl
 | `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` |
@@ -78,6 +79,9 @@ Import `@timebraid/tokens/styles.css` once in `main.ts` (or `@timebraid/vue/styl
 | `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' | '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`.
 

package/dist/index.d.ts

@@ -57,6 +57,18 @@ multiple: boolean;
 addLabel: string;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
+declare const __VLS_component_16: DefineComponent<__VLS_Props_66, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+action: () => any;
+}, string, PublicProps, Readonly<__VLS_Props_66> & Readonly<{
+onAction?: (() => any) | undefined;
+}>, {
+text: string;
+icon: string;
+tone: keyof typeof TONES_5;
+action: string;
+compact: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+
 declare const __VLS_component_2: DefineComponent<__VLS_Props_2, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 click: (event: MouseEvent | KeyboardEvent) => any;
 }, string, PublicProps, Readonly<__VLS_Props_2> & Readonly<{
@@ -378,6 +390,7 @@ declare type __VLS_Props_35 = {
     modelValue: string;
     showAll?: boolean;
     teleport?: boolean;
+    actions?: readonly WorkspaceAction[];
 };
 
 declare type __VLS_Props_36 = {
@@ -385,6 +398,7 @@ declare type __VLS_Props_36 = {
     modelValue: string;
     showAll?: boolean;
     embedded?: boolean;
+    actions?: readonly WorkspaceAction[];
 };
 
 declare type __VLS_Props_37 = {
@@ -394,6 +408,7 @@ declare type __VLS_Props_37 = {
     showAll?: boolean;
     teleport?: boolean;
     user?: DrawerUser | null;
+    actions?: readonly WorkspaceAction[];
 };
 
 declare type __VLS_Props_38 = {
@@ -619,6 +634,39 @@ declare type __VLS_Props_62 = {
     query?: string;
 };
 
+declare type __VLS_Props_63 = {
+    page: number;
+    pageSize: number;
+    total: number;
+    sizes?: readonly number[];
+    compact?: boolean;
+    mobile?: boolean;
+    teleport?: boolean;
+    last?: boolean;
+};
+
+declare type __VLS_Props_64 = {
+    width?: string;
+    height?: number;
+    shape?: keyof typeof RADIUS;
+};
+
+declare type __VLS_Props_65 = {
+    rows?: number;
+    leading?: keyof typeof LEADING;
+    trailing?: boolean;
+    subtitle?: boolean;
+};
+
+declare type __VLS_Props_66 = {
+    title: string;
+    text?: string;
+    icon?: string;
+    action?: string;
+    tone?: keyof typeof TONES_5;
+    compact?: boolean;
+};
+
 declare type __VLS_Props_7 = {
     modelValue: string;
     options: {
@@ -728,6 +776,15 @@ declare function __VLS_template_15(): {
     rootEl: HTMLDivElement;
 };
 
+declare function __VLS_template_16(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+
 declare function __VLS_template_2(): {
     attrs: Partial<{}>;
     slots: {
@@ -826,6 +883,8 @@ declare type __VLS_TemplateResult_14 = ReturnType<typeof __VLS_template_14>;
 
 declare type __VLS_TemplateResult_15 = ReturnType<typeof __VLS_template_15>;
 
+declare type __VLS_TemplateResult_16 = ReturnType<typeof __VLS_template_16>;
+
 declare type __VLS_TemplateResult_2 = ReturnType<typeof __VLS_template_2>;
 
 declare type __VLS_TemplateResult_3 = ReturnType<typeof __VLS_template_3>;
@@ -884,6 +943,12 @@ declare type __VLS_WithTemplateSlots_15<T, S> = T & {
     };
 };
 
+declare type __VLS_WithTemplateSlots_16<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
 declare type __VLS_WithTemplateSlots_2<T, S> = T & {
     new (): {
         $slots: S;
@@ -953,6 +1018,8 @@ export declare function clampOffset(x: number, y: number, z: number, stage: numb
     y: number;
 };
 
+export declare const clampPage: (page: number, total: number, size: number) => number;
+
 export declare const clampZoom: (z: number) => number;
 
 export declare function clockToMinutes(clock: string): number | null;
@@ -977,6 +1044,8 @@ export declare interface CustomRange {
 /** Where TIcon masks from when nothing overrides it. */
 export declare const DEFAULT_ICON_BASE = "https://unpkg.com/lucide-static@0.545.0/icons/";
 
+export declare const DEFAULT_PAGE_SIZE = 10;
+
 export declare const DIMENSION_KEYS: Readonly<Record<FilterDimension, 'workspaces' | 'projects' | 'tasks' | 'people'>>;
 
 export declare interface DrawerUser {
@@ -1088,6 +1157,25 @@ declare const KINDS: {
     };
 };
 
+declare const LEADING: {
+    readonly none: null;
+    readonly dot: {
+        readonly width: "10px";
+        readonly height: 10;
+        readonly shape: "circle";
+    };
+    readonly avatar: {
+        readonly width: "30px";
+        readonly height: 30;
+        readonly shape: "circle";
+    };
+    readonly square: {
+        readonly width: "var(--icon-square)";
+        readonly height: 30;
+        readonly shape: "block";
+    };
+};
+
 export declare function longestTimer(timers: PillTimer[]): PillTimer | null;
 
 export declare const MASK_INSET = 6;
@@ -1133,6 +1221,32 @@ export declare function orderRange(a: string, b: string): {
 
 export declare const OUTPUT_SIZE = 512;
 
+export declare const PAGE_SIZES: readonly number[];
+
+export declare const pageable: (total: number, sizes?: readonly number[]) => boolean;
+
+export declare interface PageBounds {
+    page: number;
+    pages: number;
+    from: number;
+    to: number;
+}
+
+export declare function pageBounds(page: number, total: number, size: number): PageBounds;
+
+export declare const pageCount: (total: number, size: number) => number;
+
+export declare const pageRangeLabel: ({ from, to }: Pick<PageBounds, "from" | "to">, total: number) => string;
+
+export declare const pageSizeLabel: (size: number) => string;
+
+export declare interface PageSlice<T> extends PageBounds {
+    rows: T[];
+    total: number;
+}
+
+export declare function pageSlice<T>(items: readonly T[], page: number, size: number): PageSlice<T>;
+
 export declare function parallelMinutes(spans: readonly TimelineSpan[]): number;
 
 export declare function parallelPartners(spans: readonly TimelineSpan[]): Map<string, string[]>;
@@ -1214,6 +1328,13 @@ export declare function presetRange(kind: RangePreset, today: string): {
 /** Okabe-Ito, the only palette permitted for projects and charts. */
 export declare const PROJECT_COLORS: string[];
 
+declare const RADIUS: {
+    readonly text: "6px";
+    readonly block: "var(--r-btn)";
+    readonly circle: "50%";
+    readonly pill: "var(--r-pill)";
+};
+
 export declare const RANGE_PRESETS: {
     value: RangePreset;
     label: string;
@@ -1221,6 +1342,9 @@ export declare const RANGE_PRESETS: {
 
 export declare type RangePreset = 'today' | 'week' | 'last7' | 'month';
 
+/** Draws an SVG document onto a square canvas and hands back a PNG, the way the sheet saves an uploaded icon. */
+export declare function rasterizeSvg(svg: string, size?: number): Promise<Blob>;
+
 export declare interface RecentTask {
     id: string;
     task: string;
@@ -1347,6 +1471,8 @@ max: number;
 
 export declare const TBadge: __VLS_WithTemplateSlots_7<typeof __VLS_component_7, __VLS_TemplateResult_7["slots"]>;
 
+export declare const TBanner: __VLS_WithTemplateSlots_16<typeof __VLS_component_16, __VLS_TemplateResult_16["slots"]>;
+
 export declare const TBar: DefineComponent<__VLS_Props_20, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_20> & Readonly<{}>, {
 color: string;
 to: string | string[];
@@ -1701,6 +1827,17 @@ declare const TONES_4: {
     readonly faint: "var(--label-3)";
 };
 
+declare const TONES_5: {
+    readonly inverse: {
+        readonly bar: readonly ["var(--label)", "var(--bg)"];
+        readonly pill: readonly ["var(--bg)", "var(--label)"];
+    };
+    readonly accent: {
+        readonly bar: readonly ["var(--accent)", "var(--on-accent)"];
+        readonly pill: readonly ["var(--on-accent)", "var(--accent)"];
+    };
+};
+
 export declare const TOrderButton: DefineComponent<__VLS_Props_53, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 click: (e: MouseEvent) => any;
 }, string, PublicProps, Readonly<__VLS_Props_53> & Readonly<{
@@ -1709,6 +1846,22 @@ onClick?: ((e: MouseEvent) => any) | undefined;
 compact: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
+export declare const TPager: DefineComponent<__VLS_Props_63, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+"update:page": (page: number) => any;
+"update:pageSize": (size: number) => any;
+}, string, PublicProps, Readonly<__VLS_Props_63> & Readonly<{
+"onUpdate:page"?: ((page: number) => any) | undefined;
+"onUpdate:pageSize"?: ((size: number) => any) | undefined;
+}>, {
+last: boolean;
+compact: boolean;
+teleport: boolean;
+mobile: boolean;
+sizes: readonly number[];
+}, {}, {}, {}, string, ComponentProvideOptions, false, {
+anchor: HTMLButtonElement;
+}, HTMLDivElement>;
+
 export declare const TParallelMark: DefineComponent<__VLS_Props_57, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_57> & Readonly<{}>, {
 others: string[];
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLSpanElement>;
@@ -1818,6 +1971,19 @@ disabled: boolean;
 
 export declare const TSheet: __VLS_WithTemplateSlots_9<typeof __VLS_component_9, __VLS_TemplateResult_9["slots"]>;
 
+export declare const TSkeleton: DefineComponent<__VLS_Props_64, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_64> & Readonly<{}>, {
+width: string;
+height: number;
+shape: keyof typeof RADIUS;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLSpanElement>;
+
+export declare const TSkeletonList: DefineComponent<__VLS_Props_65, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_65> & Readonly<{}>, {
+subtitle: boolean;
+leading: keyof typeof LEADING;
+trailing: boolean;
+rows: number;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+
 export declare const TStartHero: DefineComponent<__VLS_Props_40, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 open: () => any;
 pick: (taskId: string) => any;
@@ -1897,12 +2063,14 @@ list: HTMLDivElement;
 
 export declare const TWorkspaceDrawer: DefineComponent<__VLS_Props_37, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 help: () => any;
+action: (id: string) => any;
 "update:modelValue": (id: string) => any;
 close: () => any;
 create: () => any;
 account: () => any;
 }, string, PublicProps, Readonly<__VLS_Props_37> & Readonly<{
 onHelp?: (() => any) | undefined;
+onAction?: ((id: string) => any) | undefined;
 "onUpdate:modelValue"?: ((id: string) => any) | undefined;
 onClose?: (() => any) | undefined;
 onCreate?: (() => any) | undefined;
@@ -1910,29 +2078,36 @@ onAccount?: (() => any) | undefined;
 }>, {
 teleport: boolean;
 showAll: boolean;
+actions: readonly WorkspaceAction[];
 user: DrawerUser | null;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
 export declare const TWorkspaceMenu: DefineComponent<__VLS_Props_36, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+action: (id: string) => any;
 "update:modelValue": (id: string) => any;
 create: () => any;
 }, string, PublicProps, Readonly<__VLS_Props_36> & Readonly<{
+onAction?: ((id: string) => any) | undefined;
 "onUpdate:modelValue"?: ((id: string) => any) | undefined;
 onCreate?: (() => any) | undefined;
 }>, {
 showAll: boolean;
 embedded: boolean;
+actions: readonly WorkspaceAction[];
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
 export declare const TWorkspaceSwitcher: DefineComponent<__VLS_Props_35, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+action: (id: string) => any;
 "update:modelValue": (id: string) => any;
 create: () => any;
 }, string, PublicProps, Readonly<__VLS_Props_35> & Readonly<{
+onAction?: ((id: string) => any) | undefined;
 "onUpdate:modelValue"?: ((id: string) => any) | undefined;
 onCreate?: (() => any) | undefined;
 }>, {
 teleport: boolean;
 showAll: boolean;
+actions: readonly WorkspaceAction[];
 }, {}, {}, {}, string, ComponentProvideOptions, false, {
 trigger: HTMLButtonElement;
 }, HTMLDivElement>;
@@ -1976,11 +2151,29 @@ export declare interface WaterfallSegment {
 
 export declare const WEEKDAYS: string[];
 
+export declare const WHEEL_TICK = "timebraid-tick";
+
 export declare interface WheelOption {
     value: number;
     label: string;
 }
 
+export declare const WORKSPACE_ICONS: readonly WorkspaceGalleryIcon[];
+
+export declare interface WorkspaceAction {
+    id: string;
+    label: string;
+    icon: string;
+}
+
+export declare interface WorkspaceGalleryIcon {
+    id: string;
+    label: string;
+    svg: string;
+}
+
+export declare const workspaceIconDataUrl: (icon: WorkspaceGalleryIcon) => string;
+
 export declare interface WorkspaceOption {
     id: string;
     name: string;

package/dist/style.css

@@ -1 +1 @@
-@import"https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=JetBrains+Mono:wght@400..700&display=swap";:root{--font-display:var(--font-sans);--font-ui:var(--font-sans);--font-numeric:var(--font-mono)}:root{--font-sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;--font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;--indigo-400:#6C77DE;--indigo-500:#4A57D2;--indigo-600:#3A44AF;--indigo-700:#2C3391;--chart-1:#0072B2;--chart-2:#E69F00;--chart-3:#009E73;--chart-4:#CC79A7;--chart-5:#56B4E9;--chart-6:#D55E00;--chart-7:#F0E442;--chart-8:#6B7085;--bg:#F2F3F8;--bg-elev:#FFFFFF;--bg-elev-2:#F7F8FC;--bg-sidebar:rgba(244,245,250,.86);--bg-bar:rgba(242,243,248,.82);--fill:rgba(20,22,40,.06);--fill-2:rgba(20,22,40,.1);--fill-3:rgba(20,22,40,.16);--sep:rgba(20,22,40,.1);--sep-strong:rgba(20,22,40,.18);--label:#0E1024;--label-2:#5C6178;--label-3:#8B90A5;--label-4:#B7BBCB;--on-accent:#FFFFFF;--accent:#4A57D2;--accent-hover:#3F4BC0;--accent-soft:rgba(74,87,210,.12);--accent-soft-2:rgba(74,87,210,.2);--running:#4A57D2;--running-soft:rgba(74,87,210,.1);--green:#1E9E6A;--green-soft:rgba(30,158,106,.12);--red:#D6453D;--red-soft:rgba(214,69,61,.1);--orange:#D97B0F;--r-cell:12px;--r-card:14px;--r-btn:10px;--r-pill:999px;--r-sheet:20px;--r-window:12px;--sh-card:0 1px 2px rgba(14,16,36,.04),0 0 0 1px rgba(14,16,36,.04);--sh-float:0 12px 32px -8px rgba(14,16,36,.22),0 2px 6px rgba(14,16,36,.08),0 0 0 1px rgba(14,16,36,.05);--sh-sheet:0 -8px 40px -8px rgba(14,16,36,.24);--sh-thumb:0 2px 6px rgba(0,0,0,.25);--sh-seg:0 1px 2px rgba(0,0,0,.14),0 3px 8px -2px rgba(0,0,0,.12),0 0 0 .5px var(--sep);--blur:saturate(180%) blur(22px);--scrim:rgba(10,11,20,.42);--dash:rgba(255,255,255,.7);--ease:cubic-bezier(.2,0,.2,1);--ease-out:cubic-bezier(.16,1,.3,1);--ease-sheet:cubic-bezier(.32,.72,0,1);--t-fast:.14s;--t-base:.22s;--t-sheet:.42s}[data-theme=dark]{--bg:#15161F;--bg-elev:#1F2030;--bg-elev-2:#282A3C;--bg-sidebar:rgba(24,25,36,.86);--bg-bar:rgba(21,22,31,.78);--fill:rgba(255,255,255,.07);--fill-2:rgba(255,255,255,.11);--fill-3:rgba(255,255,255,.17);--sep:rgba(255,255,255,.09);--sep-strong:rgba(255,255,255,.16);--label:#F3F4FA;--label-2:#A7ABC0;--label-3:#7D8199;--label-4:#575B70;--accent:#7A84E6;--accent-hover:#8C95EC;--accent-soft:rgba(122,132,230,.16);--accent-soft-2:rgba(122,132,230,.26);--running:#8A93EC;--running-soft:rgba(122,132,230,.14);--green:#3CC08A;--green-soft:rgba(60,192,138,.14);--red:#F06B62;--red-soft:rgba(240,107,98,.14);--orange:#F0A24B;--chart-8:#9A9FB4;--sh-card:0 1px 2px rgba(0,0,0,.2),0 0 0 1px rgba(255,255,255,.04);--sh-float:0 16px 40px -8px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.08);--sh-sheet:0 -8px 40px -8px rgba(0,0,0,.6);--scrim:rgba(0,0,0,.55)}:root{--text-display-1:64px;--leading-display-1:1.02;--tracking-display-1:-.03em;--text-display-2:48px;--leading-display-2:1.06;--tracking-display-2:-.025em;--text-large-title:30px;--text-large-title-phone:34px;--tracking-large-title:-.025em;--leading-large-title:1.1;--text-title:17px;--text-row:15px;--text-subtitle:12.5px;--text-section:12px;--tracking-section:.04em;--text-body:14px;--text-body-lg:18px;--leading-body-lg:1.6;--text-caption:12px;--text-footnote:11.5px;--text-timer-xl:44px;--text-timer-lg:28px;--text-timer-md:22px;--text-timer-sm:15px;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700}:root{--space-0:0px;--space-1:2px;--space-2:4px;--space-3:8px;--space-4:12px;--space-5:16px;--space-6:20px;--space-7:24px;--space-8:32px;--space-9:40px;--space-10:48px;--space-11:64px;--space-12:80px;--space-13:112px;--space-14:160px;--section-y:112px;--section-y-tight:72px;--container-max:1160px;--container-prose:660px;--gutter:24px;--sidebar-w:232px;--content-max:1040px;--content-max-narrow:760px;--gutter-phone:16px;--row-h:46px;--row-h-sub:56px;--row-h-dense:40px;--control-h-sm:30px;--control-h-md:36px;--control-h-lg:44px;--control-h-xl:50px;--pill-h:46px;--pill-h-compact:30px;--timer-bar-h:56px;--timer-bar-pad:72px;--inset-top:env(safe-area-inset-top,0px);--inset-bottom:env(safe-area-inset-bottom,0px);--tab-bar-inset-ios:max(10px,calc(var(--inset-bottom) - 12px));--tab-bar-h-ios:calc(42px + var(--tab-bar-inset-ios));--timer-bar-bottom-ios:calc(var(--tab-bar-h-ios) + 10px);--tab-bar-pad-ios:calc(var(--tab-bar-h-ios) + 16px);--nav-bar-h-android:80px;--nav-bar-pad-android:96px;--toggle-w:46px;--toggle-h:28px;--field-h:38px;--seg-h:36px;--seg-h-sm:30px;--icon-square:28px}*,*:before,*:after{box-sizing:border-box}html,body{margin:0}html{-webkit-text-size-adjust:100%}body{font-family:var(--font-sans);color:var(--label);background:var(--bg);-webkit-font-smoothing:antialiased;font-size:var(--text-body);line-height:1.45}button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}input,select,textarea{font:inherit;color:inherit}a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent-hover)}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}.clamp-2{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere;line-height:1.3;min-width:0}.ellipsis{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::selection{background:var(--accent-soft-2)}@keyframes t-pulse{0%,to{opacity:1}50%{opacity:.35}}@keyframes t-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes t-sheet{0%{transform:translateY(100%)}to{transform:none}}@keyframes t-drawer{0%{transform:translate(-100%)}to{transform:none}}@keyframes t-scrim{0%{opacity:0}to{opacity:1}}@keyframes t-pop{0%{opacity:0;transform:scale(.96) translateY(6px)}to{opacity:1;transform:none}}@keyframes t-island{0%{transform:scaleX(.6);opacity:.4}to{transform:none;opacity:1}}.view-in{animation:t-in var(--t-base) var(--ease-out) both}.press{transition:transform var(--t-fast) var(--ease),background var(--t-fast) var(--ease),opacity var(--t-fast) var(--ease)}.press:active{transform:scale(.98)}.row-press:active{background:var(--fill-2)!important}@media (prefers-reduced-motion:reduce){*{animation-duration:0ms!important;transition-duration:0ms!important}}.t-wheel-list[data-v-4bb937c1]{scrollbar-width:none}.t-wheel-list[data-v-4bb937c1]::-webkit-scrollbar{display:none}.t-wheel-list[data-v-4bb937c1]:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:var(--r-btn)}.check:focus-within .box[data-v-8c783040]{outline:2px solid var(--accent);outline-offset:2px}.t-spinner[data-v-a41169e8]{animation:t-spinner-turn-a41169e8 .7s linear infinite}@keyframes t-spinner-turn-a41169e8{to{transform:rotate(360deg)}}
+@import"https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=JetBrains+Mono:wght@400..700&display=swap";:root{--font-display:var(--font-sans);--font-ui:var(--font-sans);--font-numeric:var(--font-mono)}:root{--font-sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;--font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;--indigo-400:#6C77DE;--indigo-500:#4A57D2;--indigo-600:#3A44AF;--indigo-700:#2C3391;--chart-1:#0072B2;--chart-2:#E69F00;--chart-3:#009E73;--chart-4:#CC79A7;--chart-5:#56B4E9;--chart-6:#D55E00;--chart-7:#F0E442;--chart-8:#6B7085;--bg:#F2F3F8;--bg-elev:#FFFFFF;--bg-elev-2:#F7F8FC;--bg-sidebar:rgba(244,245,250,.86);--bg-bar:rgba(242,243,248,.82);--fill:rgba(20,22,40,.06);--fill-2:rgba(20,22,40,.1);--fill-3:rgba(20,22,40,.16);--sep:rgba(20,22,40,.1);--sep-strong:rgba(20,22,40,.18);--label:#0E1024;--label-2:#5C6178;--label-3:#8B90A5;--label-4:#B7BBCB;--on-accent:#FFFFFF;--accent:#4A57D2;--accent-hover:#3F4BC0;--accent-soft:rgba(74,87,210,.12);--accent-soft-2:rgba(74,87,210,.2);--running:#4A57D2;--running-soft:rgba(74,87,210,.1);--green:#1E9E6A;--green-soft:rgba(30,158,106,.12);--red:#D6453D;--red-soft:rgba(214,69,61,.1);--orange:#D97B0F;--r-cell:12px;--r-card:14px;--r-btn:10px;--r-pill:999px;--r-sheet:20px;--r-window:12px;--sh-card:0 1px 2px rgba(14,16,36,.04),0 0 0 1px rgba(14,16,36,.04);--sh-float:0 12px 32px -8px rgba(14,16,36,.22),0 2px 6px rgba(14,16,36,.08),0 0 0 1px rgba(14,16,36,.05);--sh-sheet:0 -8px 40px -8px rgba(14,16,36,.24);--sh-thumb:0 2px 6px rgba(0,0,0,.25);--sh-seg:0 1px 2px rgba(0,0,0,.14),0 3px 8px -2px rgba(0,0,0,.12),0 0 0 .5px var(--sep);--blur:saturate(180%) blur(22px);--scrim:rgba(10,11,20,.42);--dash:rgba(255,255,255,.7);--ease:cubic-bezier(.2,0,.2,1);--ease-out:cubic-bezier(.16,1,.3,1);--ease-sheet:cubic-bezier(.32,.72,0,1);--t-fast:.14s;--t-base:.22s;--t-sheet:.42s}[data-theme=dark]{--bg:#15161F;--bg-elev:#1F2030;--bg-elev-2:#282A3C;--bg-sidebar:rgba(24,25,36,.86);--bg-bar:rgba(21,22,31,.78);--fill:rgba(255,255,255,.07);--fill-2:rgba(255,255,255,.11);--fill-3:rgba(255,255,255,.17);--sep:rgba(255,255,255,.09);--sep-strong:rgba(255,255,255,.16);--label:#F3F4FA;--label-2:#A7ABC0;--label-3:#7D8199;--label-4:#575B70;--accent:#7A84E6;--accent-hover:#8C95EC;--accent-soft:rgba(122,132,230,.16);--accent-soft-2:rgba(122,132,230,.26);--running:#8A93EC;--running-soft:rgba(122,132,230,.14);--green:#3CC08A;--green-soft:rgba(60,192,138,.14);--red:#F06B62;--red-soft:rgba(240,107,98,.14);--orange:#F0A24B;--chart-8:#9A9FB4;--sh-card:0 1px 2px rgba(0,0,0,.2),0 0 0 1px rgba(255,255,255,.04);--sh-float:0 16px 40px -8px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.08);--sh-sheet:0 -8px 40px -8px rgba(0,0,0,.6);--scrim:rgba(0,0,0,.55)}:root{--text-display-1:64px;--leading-display-1:1.02;--tracking-display-1:-.03em;--text-display-2:48px;--leading-display-2:1.06;--tracking-display-2:-.025em;--text-large-title:30px;--text-large-title-phone:34px;--tracking-large-title:-.025em;--leading-large-title:1.1;--text-title:17px;--text-row:15px;--text-subtitle:12.5px;--text-section:12px;--tracking-section:.04em;--text-body:14px;--text-body-lg:18px;--leading-body-lg:1.6;--text-caption:12px;--text-footnote:11.5px;--text-timer-xl:44px;--text-timer-lg:28px;--text-timer-md:22px;--text-timer-sm:15px;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700}:root{--space-0:0px;--space-1:2px;--space-2:4px;--space-3:8px;--space-4:12px;--space-5:16px;--space-6:20px;--space-7:24px;--space-8:32px;--space-9:40px;--space-10:48px;--space-11:64px;--space-12:80px;--space-13:112px;--space-14:160px;--section-y:112px;--section-y-tight:72px;--container-max:1160px;--container-prose:660px;--gutter:24px;--sidebar-w:232px;--content-max:1040px;--content-max-narrow:760px;--gutter-phone:16px;--row-h:46px;--row-h-sub:56px;--row-h-dense:40px;--control-h-sm:30px;--control-h-md:36px;--control-h-lg:44px;--control-h-xl:50px;--pill-h:46px;--pill-h-compact:30px;--timer-bar-h:56px;--timer-bar-pad:72px;--inset-top:env(safe-area-inset-top,0px);--inset-bottom:env(safe-area-inset-bottom,0px);--tab-bar-inset-ios:max(10px,calc(var(--inset-bottom) - 12px));--tab-bar-h-ios:calc(42px + var(--tab-bar-inset-ios));--timer-bar-bottom-ios:calc(var(--tab-bar-h-ios) + 10px);--tab-bar-pad-ios:calc(var(--tab-bar-h-ios) + 16px);--nav-bar-h-android:80px;--nav-bar-pad-android:96px;--toggle-w:46px;--toggle-h:28px;--field-h:38px;--seg-h:36px;--seg-h-sm:30px;--icon-square:28px}*,*:before,*:after{box-sizing:border-box}html,body{margin:0}html{-webkit-text-size-adjust:100%}body{font-family:var(--font-sans);color:var(--label);background:var(--bg);-webkit-font-smoothing:antialiased;font-size:var(--text-body);line-height:1.45}button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}input,select,textarea{font:inherit;color:inherit}a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent-hover)}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}.clamp-2{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere;line-height:1.3;min-width:0}.ellipsis{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::selection{background:var(--accent-soft-2)}@keyframes t-pulse{0%,to{opacity:1}50%{opacity:.35}}@keyframes t-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.t-skeleton{background:linear-gradient(90deg,var(--fill) 25%,var(--fill-2) 50%,var(--fill) 75%);background-size:400% 100%;animation:t-shimmer 1.6s linear infinite}@media (prefers-reduced-motion:reduce){.t-skeleton{animation:none;background:var(--fill)}}@keyframes t-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes t-sheet{0%{transform:translateY(100%)}to{transform:none}}@keyframes t-drawer{0%{transform:translate(-100%)}to{transform:none}}@keyframes t-scrim{0%{opacity:0}to{opacity:1}}@keyframes t-pop{0%{opacity:0;transform:scale(.96) translateY(6px)}to{opacity:1;transform:none}}@keyframes t-island{0%{transform:scaleX(.6);opacity:.4}to{transform:none;opacity:1}}.view-in{animation:t-in var(--t-base) var(--ease-out) both}.press{transition:transform var(--t-fast) var(--ease),background var(--t-fast) var(--ease),opacity var(--t-fast) var(--ease)}.press:active{transform:scale(.98)}.row-press:active{background:var(--fill-2)!important}@media (prefers-reduced-motion:reduce){*{animation-duration:0ms!important;transition-duration:0ms!important}}.t-wheel-list[data-v-f89240c7]{scrollbar-width:none}.t-wheel-list[data-v-f89240c7]::-webkit-scrollbar{display:none}.t-wheel-list[data-v-f89240c7]:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:var(--r-btn)}.check:focus-within .box[data-v-8c783040]{outline:2px solid var(--accent);outline-offset:2px}.t-spinner[data-v-a41169e8]{animation:t-spinner-turn-a41169e8 .7s linear infinite}@keyframes t-spinner-turn-a41169e8{to{transform:rotate(360deg)}}