@heyramzi/ui 2.23.0 → 3.0.0

package/src/work/time/duration.ts

@@ -1,3 +1,4 @@
+import { localDay as dayOf } from "../../lib/dates.js";
 import type { Tone } from "../../lib/tone.js";
 
 /** "90", "45m", "1h", "1.5h", "1h30", "1h 30m" and "1:30" to whole minutes. Null when it isn't a duration. */
@@ -35,9 +36,7 @@ export function formatClock(ms: number): { hours: string; minutes: string; secon
 
 /** The reader's own calendar day as `YYYY-MM-DD`. */
 export function localDay(date: Date = new Date()): string {
-  const month = String(date.getMonth() + 1).padStart(2, "0");
-  const day = String(date.getDate()).padStart(2, "0");
-  return `${date.getFullYear()}-${month}-${day}`;
+  return dayOf(date);
 }
 
 /** "Today", "Yesterday", then "Mon, Oct 12", in the given locale. */

package/src/work/time/time-chip.svelte

@@ -54,10 +54,8 @@
 		{/snippet}
 		<span aria-hidden="true">
 			{formatMinutes(minutes)}{#if estimate}<span
-					class={cn(
-						"font-normal",
-						tone === "neutral" ? "text-muted-foreground/70" : TONE_TEXT[tone],
-					)}>{`\u2009/\u2009${formatMinutes(estimate)}`}</span
+					class={cn("font-normal", tone === "neutral" ? "text-muted-foreground" : TONE_TEXT[tone])}
+					>{`\u2009/\u2009${formatMinutes(estimate)}`}</span
 				>{/if}
 		</span>
 	</StatusPill>

package/src/work/time/time-chip.svelte.d.ts

@@ -0,0 +1,14 @@
+interface Props {
+    /** Minutes logged on the task. */
+    minutes: number;
+    /** Minutes budgeted. Draws a small ring and tints the chip as the budget runs out. */
+    estimate?: number;
+    /** A timer is running on the task. */
+    running?: boolean;
+    /** Replaces the spoken name. Defaults to a sentence built from the numbers. */
+    label?: string;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/work/time/time-dot.svelte

@@ -18,24 +18,37 @@
 ></span>
 
 <style>
-	.time-dot {
-		position: relative;
-		display: inline-block;
-		flex: none;
-		width: var(--time-dot-size);
-		height: var(--time-dot-size);
-		/* A dot, the one round shape DESIGN rule 15 allows for a status. */
-		border-radius: 50%;
-		background: currentColor;
-	}
+	@layer theme, base, components, utilities;
+
+	@layer components {
+		.time-dot {
+			position: relative;
+			display: inline-block;
+			flex: none;
+			width: var(--time-dot-size);
+			height: var(--time-dot-size);
+			/* A dot, the one round shape DESIGN rule 15 allows for a status. */
+			border-radius: 50%;
+			background: currentColor;
+		}
+
+		.time-dot.is-running::after {
+			content: "";
+			position: absolute;
+			inset: 0;
+			border-radius: inherit;
+			background: currentColor;
+			animation: time-dot-pulse var(--time-pulse-duration, 2000ms) var(--ease-out, ease-out)
+				infinite;
+		}
 
-	.time-dot.is-running::after {
-		content: "";
-		position: absolute;
-		inset: 0;
-		border-radius: inherit;
-		background: currentColor;
-		animation: time-dot-pulse var(--time-pulse-duration, 2000ms) var(--ease-out, ease-out) infinite;
+		@media (prefers-reduced-motion: reduce) {
+			.time-dot.is-running::after {
+				animation: none;
+				transform: scale(1.9);
+				opacity: 0.25;
+			}
+		}
 	}
 
 	@keyframes time-dot-pulse {
@@ -48,12 +61,4 @@
 			opacity: 0;
 		}
 	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.time-dot.is-running::after {
-			animation: none;
-			transform: scale(1.9);
-			opacity: 0.25;
-		}
-	}
 </style>

package/src/work/time/time-dot.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    /** Pulses while true. The dot takes its color from the text around it. */
+    running?: boolean;
+    size?: number;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/work/time/time-ring.svelte

@@ -63,19 +63,23 @@
 </span>
 
 <style>
-	.time-ring-arc {
-		transition:
-			stroke-dasharray var(--duration-slow) var(--ease-smooth-out),
-			color var(--duration-fast) var(--ease-smooth-out);
-	}
-
-	.time-ring-arc.is-empty {
-		opacity: 0;
-	}
+	@layer theme, base, components, utilities;
 
-	@media (prefers-reduced-motion: reduce) {
+	@layer components {
 		.time-ring-arc {
-			transition: none;
+			transition:
+				stroke-dasharray var(--duration-slow) var(--ease-smooth-out),
+				color var(--duration-fast) var(--ease-smooth-out);
+		}
+
+		.time-ring-arc.is-empty {
+			opacity: 0;
+		}
+
+		@media (prefers-reduced-motion: reduce) {
+			.time-ring-arc {
+				transition: none;
+			}
 		}
 	}
 </style>

package/src/work/time/time-ring.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from "svelte";
+interface Props {
+    /** Minutes logged. */
+    value: number;
+    /** Minutes budgeted. The ring turns warning at 90% and destructive past 100%. */
+    max: number;
+    /** Pixels. */
+    size?: number;
+    /** Stroke width in a 36 unit box. */
+    stroke?: number;
+    label?: string;
+    /** Rendered in the middle, e.g. the percentage. */
+    children?: Snippet;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/work/time/time-tracker.svelte

@@ -313,7 +313,7 @@
 				</Button>
 			</form>
 			{#if invalid}
-				<p id="time-invalid" class="text-xs text-destructive" role="alert">{labels.invalid}</p>
+				<p id="time-invalid" class="text-xs text-destructive-ink" role="alert">{labels.invalid}</p>
 			{/if}
 
 			{#if entries.length > 0 || estimate}
@@ -433,50 +433,68 @@
 </section>
 
 <style>
-	/* A running timer tints the whole split button in the accent. */
-	.time-chip {
-		transition: background-color var(--duration-fast) var(--ease-smooth-out);
-	}
-
-	.time-chip.is-running {
-		background: color-mix(in oklab, var(--tone-accent, var(--color-primary)) 10%, transparent);
-	}
+	@layer theme, base, components, utilities;
 
+	/* Unlayered: the ghost button's hover and open text-foreground would otherwise drop the running accent. */
 	.time-chip.is-running :global(.time-open) {
 		color: var(--tone-accent, var(--color-primary));
 	}
 
-	.time-segment {
-		transition: width var(--duration-slow) var(--ease-smooth-out);
-	}
-
-	.time-row :global(.time-delete) {
-		opacity: 0;
-	}
+	@layer components {
+		/* A running timer tints the whole split button in the accent. */
+		.time-chip {
+			transition: background-color var(--duration-fast) var(--ease-smooth-out);
+		}
 
-	.time-row:focus-within :global(.time-delete) {
-		opacity: 1;
-	}
+		.time-chip.is-running {
+			background: color-mix(in oklab, var(--tone-accent, var(--color-primary)) 10%, transparent);
+		}
 
-	@media (hover: hover) and (pointer: fine) {
-		.time-row:hover :global(.time-delete) {
-			opacity: 1;
+		.time-segment {
+			transition: width var(--duration-slow) var(--ease-smooth-out);
 		}
-	}
 
-	@media (hover: none) {
 		.time-row :global(.time-delete) {
+			opacity: 0;
+		}
+
+		.time-row:focus-within :global(.time-delete) {
 			opacity: 1;
 		}
-	}
 
-	.time-pop,
-	.time-preview {
-		animation: time-pop var(--duration-quick) var(--ease-smooth-out) backwards;
-	}
+		@media (hover: hover) and (pointer: fine) {
+			.time-row:hover :global(.time-delete) {
+				opacity: 1;
+			}
+		}
+
+		@media (hover: none) {
+			.time-row :global(.time-delete) {
+				opacity: 1;
+			}
+		}
+
+		.time-pop,
+		.time-preview {
+			animation: time-pop var(--duration-quick) var(--ease-smooth-out) backwards;
+		}
+
+		.time-row.is-new {
+			animation: time-row-in var(--duration-fast) var(--ease-smooth-out) backwards;
+		}
+
+		@media (prefers-reduced-motion: reduce) {
+			.time-chip,
+			.time-segment {
+				transition: none;
+			}
 
-	.time-row.is-new {
-		animation: time-row-in var(--duration-fast) var(--ease-smooth-out) backwards;
+			.time-pop,
+			.time-preview,
+			.time-row.is-new {
+				animation: none;
+			}
+		}
 	}
 
 	@keyframes time-pop {
@@ -494,17 +512,4 @@
 			filter: blur(var(--blur-small));
 		}
 	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.time-chip,
-		.time-segment {
-			transition: none;
-		}
-
-		.time-pop,
-		.time-preview,
-		.time-row.is-new {
-			animation: none;
-		}
-	}
 </style>

package/src/work/time/time-tracker.svelte.d.ts

@@ -0,0 +1,59 @@
+import type { Snippet } from "svelte";
+import type { TimeLabels, TimeLogInput, TimeRunning, TimeStopInfo } from "./time-types.js";
+interface Props<T> {
+    /** Every entry logged on the task. Order within a day is kept. */
+    entries: T[];
+    getId: (entry: T) => string;
+    getMinutes: (entry: T) => number;
+    /** The day worked, `YYYY-MM-DD`. */
+    getDay: (entry: T) => string;
+    /** The name shown for the person who logged it. */
+    getPerson: (entry: T) => string;
+    /** Groups the split by id when two people share a name. Defaults to the name. */
+    getPersonId?: (entry: T) => string;
+    getNote?: (entry: T) => string | null | undefined;
+    /** The timer in progress, or null. The host stores it, so it survives a reload. */
+    running?: TimeRunning | null;
+    /** Minutes budgeted for the task. Draws the progress ring. */
+    estimate?: number;
+    onStart?: () => void | Promise<void>;
+    /** Called with the elapsed time. Log it, then clear `running`. */
+    onStop?: (info: TimeStopInfo) => void | Promise<void>;
+    /** A manual entry. Return false, or throw, to keep what was typed. */
+    onLog: (input: TimeLogInput) => void | boolean | Promise<void | boolean>;
+    /** Shows a delete button on rows where `canDelete` allows it. */
+    onDelete?: (entry: T) => void | Promise<void>;
+    canDelete?: (entry: T) => boolean;
+    /** Extra text after the note, e.g. the project. */
+    renderMeta?: Snippet<[T]>;
+    /** BCP 47 tag for day names. Defaults to the browser's. */
+    locale?: string;
+    labels?: Partial<TimeLabels>;
+    /** Kept so existing callers compile. The tracker is always the compact chip now, so it does nothing. */
+    flat?: boolean;
+    class?: string;
+}
+declare function $$render<T>(): {
+    props: Props<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const $$Component: $$IsomorphicComponent;
+type $$Component<T> = InstanceType<typeof $$Component<T>>;
+export default $$Component;

package/dist/ai/index.js

@@ -1,44 +0,0 @@
-// =========================
-// TYPING DOTS
-// =========================
-export { TypingDots } from "./typing-dots/index.js";
-// =========================
-// RESPONSE (markdown)
-// =========================
-export { Response } from "./response/index.js";
-// =========================
-// SUGGESTION
-// =========================
-export { Suggestion, Suggestions } from "./suggestion/index.js";
-// =========================
-// PROMPT INPUT
-// =========================
-export { PromptInput, PromptInputBody, PromptInputToolbar, PromptInputTextarea, PromptInputSubmit } from "./prompt-input/index.js";
-// =========================
-// CONFIRMATION
-// =========================
-export { Confirmation, ConfirmationTitle, ConfirmationRequest, ConfirmationAccepted, ConfirmationRejected, ConfirmationActions, ConfirmationAction } from "./confirmation/index.js";
-// =========================
-// THINKING DOTS
-// =========================
-export { ThinkingDots } from "./thinking-dots/index.js";
-// =========================
-// VOICE WAVEFORM
-// =========================
-export { VoiceWaveform } from "./voice-waveform/index.js";
-// =========================
-// REASONING
-// =========================
-export { Reasoning, ReasoningTrigger, ReasoningContent } from "./reasoning/index.js";
-// =========================
-// LOADING STATE
-// =========================
-export { PixelLoader } from "./loading-state/index.js";
-// =========================
-// AI BUTTON
-// =========================
-export { AiButton } from "./ai-button/index.js";
-// =========================
-// GENERATION PROGRESS
-// =========================
-export { GenerationProgress } from "./generation-progress/index.js";

package/dist/ai/thinking-dots/index.js

@@ -1,3 +0,0 @@
-import ThinkingDots from "../../../src/ai/thinking-dots/ThinkingDots.svelte";
-export { ThinkingDots };
-export default ThinkingDots;

package/dist/components/icon/index.js

@@ -1 +0,0 @@
-export { default as Icon } from "../../../src/components/icon/icon.svelte";

package/dist/components/locale-switch/index.js

@@ -1 +0,0 @@
-export { default as LocaleSwitch } from "../../../src/components/locale-switch/locale-switch.svelte";

package/dist/icons/trades.js

@@ -1,49 +0,0 @@
-/**
-* Trade icon map. Tabler covers the domain Lucide and Phosphor miss.
-*/
-/*
-* Lucide/Phosphor gap audit (Sept 2026) against the 14 trade pills in the "NOT SURE? TAP WHAT YOU DO" strip. Lucide has `hammer`, `wrench`, `hard-hat`, `bolt`, `brick-wall`,
-*/
-/*
-* `building`, `car`, but no `trowel`, no tiling grid, no `window` cleaning `spray/squeegee`, no `crane`, no dedicated `handyman` toolset. Phosphor has `hammer`, `wrench`, `hard-hat`, `paint-roller`, and also no `trowel`.
-*/
-/*
-* Tabler 3.46 (6184 icons, MIT) has all 14 at a consistent 2px stroke on 24×24: droplet/pipe, bolt, home (roof), tools, key, window,
-*/
-/*
-* car-garage, hammer / wave-saw-tool, helmet, trowel, grid-dots, leaf, car, crane. Svelte 5 port is ` @tabler/icons-svelte-runes` (runes, not the Svelte 4 ` @tabler/icons-svelte`).
-*/
-import { IconBolt, IconCar, IconCarGarage, IconCrane, IconDroplet, IconGridDots, IconHammer, IconHelmet, IconHome, IconKey, IconLeaf, IconTools, IconTrowel, IconWindow } from "@tabler/icons-svelte-runes";
-export const tradeIconMap = {
-	plumbers: IconDroplet,
-	electricians: IconBolt,
-	roofers: IconHome,
-	handymen: IconTools,
-	locksmiths: IconKey,
-	"window-cleaners": IconWindow,
-	garages: IconCarGarage,
-	carpenters: IconHammer,
-	builders: IconHelmet,
-	plasterers: IconTrowel,
-	tilers: IconGridDots,
-	gardeners: IconLeaf,
-	"mobile-mechanics": IconCar,
-	"construction-companies": IconCrane
-};
-export const tradeLabels = {
-	plumbers: "PLUMBERS",
-	electricians: "ELECTRICIANS",
-	roofers: "ROOFERS",
-	handymen: "HANDYMEN",
-	locksmiths: "LOCKSMITHS",
-	"window-cleaners": "WINDOW CLEANERS",
-	garages: "GARAGES",
-	carpenters: "CARPENTERS",
-	builders: "BUILDERS",
-	plasterers: "PLASTERERS",
-	tilers: "TILERS",
-	gardeners: "GARDENERS",
-	"mobile-mechanics": "MOBILE MECHANICS",
-	"construction-companies": "CONSTRUCTION COMPANIES"
-};
-export const tradeSlugs = Object.keys(tradeIconMap);

package/dist/index.js

@@ -1,18 +0,0 @@
-export { default as BorderBeam } from "../src/effects/border-beam/BorderBeam.svelte";
-export { sizePresets, sizeThemePresets, themeColors } from "./effects/border-beam/presets.js";
-export { default as ThemeToggle } from "../src/effects/theme-toggle/ThemeToggle.svelte";
-export { default as AnimatedBeam } from "../src/effects/animated-beam/AnimatedBeam.svelte";
-export { default as Spotlight } from "../src/effects/spotlight/Spotlight.svelte";
-export { default as MagicCard } from "../src/effects/magic-card/MagicCard.svelte";
-export { default as Marquee } from "../src/effects/marquee/Marquee.svelte";
-export { default as ImageReveal } from "../src/effects/image-reveal/ImageReveal.svelte";
-export { default as ShaderGradient } from "../src/effects/shader-gradient/ShaderGradient.svelte";
-export { default as InView } from "../src/effects/reveal/InView.svelte";
-export { default as AnimatedGroup } from "../src/effects/reveal/AnimatedGroup.svelte";
-export { default as TextEffect } from "../src/effects/reveal/TextEffect.svelte";
-export { observeInView } from "./effects/reveal/observe.js";
-export { default as ProgressiveBlur } from "../src/effects/progressive-blur/ProgressiveBlur.svelte";
-export { default as InteractiveHoverButton } from "../src/effects/interactive-hover-button/InteractiveHoverButton.svelte";
-export { default as ImageComparison } from "../src/effects/image-comparison/ImageComparison.svelte";
-export { magnetic } from "./effects/magnetic/magnetic.js";
-export { revealTheme } from "./lib/theme-transition.js";