@heyramzi/ui 2.24.0 → 3.1.0

package/src/work/gantt/gantt-bar.svelte

@@ -22,9 +22,11 @@
 		tipBelow: boolean;
 		drag: Drag | null;
 		setDrag: (drag: Drag | null) => void;
-		onhover: (id: string, on: boolean) => void;
-		onChange?: (id: string, change: GanttChange) => void | Promise<void>;
+		onHover: (id: string, on: boolean) => void;
+		onDatesChange?: (id: string, change: GanttChange) => void | Promise<void>;
 		onSelect?: (id: string) => void;
+		/** After an arrow key's change is saved, with the bar's new dates. */
+		onKeyMove?: (id: string, span: Span) => void;
 		describe: (span: Span) => string;
 	}
 
@@ -41,13 +43,14 @@
 		tipBelow,
 		drag,
 		setDrag,
-		onhover,
-		onChange,
+		onHover,
+		onDatesChange,
 		onSelect,
+		onKeyMove,
 		describe,
 	}: Props = $props();
 
-	let editable = $derived(!!onChange);
+	let editable = $derived(!!onDatesChange);
 	let dragging = $derived(drag?.id === id);
 	let width = $derived(barWidth(span, layout));
 	let left = $derived(dayX(layout, span.start) + layout.inset);
@@ -71,12 +74,13 @@
 		if (!drag || drag.id !== id) return;
 		const moved = drag.dx !== 0;
 		setDrag(null);
-		if (moved) void onChange?.(id, { start: isoFromDay(span.start), end: isoFromDay(span.end) });
+		if (moved)
+			void onDatesChange?.(id, { start: isoFromDay(span.start), end: isoFromDay(span.end) });
 		else onSelect?.(id);
 	}
 
 	/** Arrow keys move a bar a day. Shift plus an arrow moves its end, so the task grows or shrinks. */
-	function onKeyDown(e: KeyboardEvent): void {
+	async function onKeyDown(e: KeyboardEvent): Promise<void> {
 		if (e.key === "Enter" || e.key === " ") {
 			e.preventDefault();
 			onSelect?.(id);
@@ -89,12 +93,13 @@
 			? { start: span.start, end: Math.max(span.start, span.end + step) }
 			: { start: span.start + step, end: span.end + step };
 		if (next.start === span.start && next.end === span.end) return;
-		void onChange?.(id, { start: isoFromDay(next.start), end: isoFromDay(next.end) });
+		await onDatesChange?.(id, { start: isoFromDay(next.start), end: isoFromDay(next.end) });
+		onKeyMove?.(id, next);
 	}
 </script>
 
 <div
-	data-bar
+	data-bar={id}
 	role="button"
 	tabindex="0"
 	aria-roledescription="task bar"
@@ -116,9 +121,9 @@
 	onpointermove={onPointerMove}
 	onpointerup={onPointerUp}
 	onpointercancel={() => setDrag(null)}
-	onpointerenter={() => onhover(id, true)}
-	onpointerleave={() => onhover(id, false)}
-	onkeydown={onKeyDown}
+	onpointerenter={() => onHover(id, true)}
+	onpointerleave={() => onHover(id, false)}
+	onkeydown={(e) => void onKeyDown(e)}
 >
 	{#if progress > 0}
 		<!-- The clip keeps the bar's rounded corners while the fill scales. -->
@@ -165,78 +170,92 @@
 {/if}
 
 <style>
-	.g-bar {
-		touch-action: pan-y;
-		background: color-mix(in oklab, var(--g-hue) 16%, var(--color-card, white));
-		box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--g-hue) 34%, transparent);
-		/* Snapping to whole days reads as a glide, not a jump. */
-		transition:
-			left var(--duration-quick) var(--ease-smooth-out),
-			width var(--duration-quick) var(--ease-smooth-out),
-			box-shadow var(--duration-quick) var(--ease-smooth-out);
-	}
+	@layer theme, base, components, utilities;
+
+	@layer components {
+		.g-bar {
+			touch-action: pan-y;
+			background: color-mix(in oklab, var(--g-hue) 16%, var(--color-card, white));
+			box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--g-hue) 34%, transparent);
+			/* Snapping to whole days reads as a glide, not a jump. */
+			transition:
+				left var(--duration-quick) var(--ease-smooth-out),
+				width var(--duration-quick) var(--ease-smooth-out),
+				box-shadow var(--duration-quick) var(--ease-smooth-out);
+		}
+
+		@media (hover: hover) and (pointer: fine) {
+			.g-bar:hover {
+				box-shadow:
+					inset 0 0 0 1px color-mix(in oklab, var(--g-hue) 55%, transparent),
+					0 1px 2px rgb(0 0 0 / 0.06),
+					0 4px 12px color-mix(in oklab, var(--g-hue) 18%, transparent);
+			}
+		}
 
-	@media (hover: hover) and (pointer: fine) {
-		.g-bar:hover {
+		.g-bar-dragging {
 			box-shadow:
 				inset 0 0 0 1px color-mix(in oklab, var(--g-hue) 55%, transparent),
 				0 1px 2px rgb(0 0 0 / 0.06),
 				0 4px 12px color-mix(in oklab, var(--g-hue) 18%, transparent);
 		}
-	}
 
-	.g-bar-dragging {
-		box-shadow:
-			inset 0 0 0 1px color-mix(in oklab, var(--g-hue) 55%, transparent),
-			0 1px 2px rgb(0 0 0 / 0.06),
-			0 4px 12px color-mix(in oklab, var(--g-hue) 18%, transparent);
-	}
+		.g-bar-dragging {
+			z-index: 15;
+		}
 
-	.g-bar-dragging {
-		z-index: 15;
-	}
+		.g-progress {
+			background: color-mix(in oklab, var(--g-hue) 32%, var(--color-card, white));
+			transition: transform var(--duration-fast) var(--ease-smooth-out);
+		}
 
-	.g-progress {
-		background: color-mix(in oklab, var(--g-hue) 32%, var(--color-card, white));
-		transition: transform var(--duration-fast) var(--ease-smooth-out);
-	}
+		/* Resize grips: a wide invisible hit area, a slim pill that shows on hover. */
+		.g-handle {
+			position: absolute;
+			top: 0;
+			bottom: 0;
+			width: 12px;
+			cursor: ew-resize;
+			touch-action: none;
+		}
 
-	/* Resize grips: a wide invisible hit area, a slim pill that shows on hover. */
-	.g-handle {
-		position: absolute;
-		top: 0;
-		bottom: 0;
-		width: 12px;
-		cursor: ew-resize;
-		touch-action: none;
-	}
+		.g-handle::after {
+			content: "";
+			position: absolute;
+			top: 25%;
+			bottom: 25%;
+			left: 50%;
+			width: 3px;
+			translate: -50% 0;
+			background: color-mix(in oklab, var(--g-hue) 70%, var(--color-foreground));
+			opacity: 0;
+			transition: opacity var(--duration-quick) var(--ease-smooth-out);
+		}
 
-	.g-handle::after {
-		content: "";
-		position: absolute;
-		top: 25%;
-		bottom: 25%;
-		left: 50%;
-		width: 3px;
-		translate: -50% 0;
-		background: color-mix(in oklab, var(--g-hue) 70%, var(--color-foreground));
-		opacity: 0;
-		transition: opacity var(--duration-quick) var(--ease-smooth-out);
-	}
+		@media (hover: hover) and (pointer: fine) {
+			.g-bar:hover .g-handle::after {
+				opacity: 0.6;
+			}
+		}
 
-	@media (hover: hover) and (pointer: fine) {
-		.g-bar:hover .g-handle::after {
+		.g-bar:focus-visible .g-handle::after,
+		.g-bar-dragging .g-handle::after {
 			opacity: 0.6;
 		}
-	}
 
-	.g-bar:focus-visible .g-handle::after,
-	.g-bar-dragging .g-handle::after {
-		opacity: 0.6;
-	}
+		.g-tip {
+			animation: g-tip-in var(--duration-quick) var(--ease-smooth-out) both;
+		}
 
-	.g-tip {
-		animation: g-tip-in var(--duration-quick) var(--ease-smooth-out) both;
+		@media (prefers-reduced-motion: reduce) {
+			.g-tip {
+				animation: none;
+			}
+			.g-bar,
+			.g-progress {
+				transition: none;
+			}
+		}
 	}
 
 	@keyframes g-tip-in {
@@ -245,14 +264,4 @@
 			translate: 0 var(--distance-micro);
 		}
 	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.g-tip {
-			animation: none;
-		}
-		.g-bar,
-		.g-progress {
-			transition: none;
-		}
-	}
 </style>

package/src/work/gantt/gantt-bar.svelte.d.ts

@@ -0,0 +1,29 @@
+import type { GanttChange } from "../task-types.js";
+import { type Drag, type Layout, type Span } from "./logic.js";
+import "./gantt.css";
+interface Props {
+    id: string;
+    title: string;
+    /** The task's own dates, with a live drag applied. */
+    span: Span;
+    hue: string;
+    progress: number;
+    order: number;
+    layout: Layout;
+    staggerCap: number;
+    /** A bar narrower than this shows its title outside, to the right. */
+    inlineTitleMin: number;
+    /** The first row has no room above it, so its drag tip opens below. */
+    tipBelow: boolean;
+    drag: Drag | null;
+    setDrag: (drag: Drag | null) => void;
+    onHover: (id: string, on: boolean) => void;
+    onDatesChange?: (id: string, change: GanttChange) => void | Promise<void>;
+    onSelect?: (id: string) => void;
+    /** After an arrow key's change is saved, with the bar's new dates. */
+    onKeyMove?: (id: string, span: Span) => void;
+    describe: (span: Span) => string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/work/gantt/gantt-grid.svelte

@@ -73,28 +73,40 @@
 </div>
 
 <style>
-	.g-today {
-		transform-origin: top;
-		animation: g-today-in var(--duration-slow) var(--ease-smooth-out) backwards;
-	}
+	@layer theme, base, components, utilities;
 
-	.g-arrow {
-		stroke: color-mix(in oklab, var(--color-muted-foreground, gray) 55%, transparent);
-		transition: stroke var(--duration-quick) var(--ease-smooth-out);
-	}
+	@layer components {
+		.g-today {
+			transform-origin: top;
+			animation: g-today-in var(--duration-slow) var(--ease-smooth-out) backwards;
+		}
 
-	.g-arrow-lit {
-		stroke: var(--color-foreground, currentColor);
-	}
+		.g-arrow {
+			stroke: color-mix(in oklab, var(--color-muted-foreground, gray) 55%, transparent);
+			transition: stroke var(--duration-quick) var(--ease-smooth-out);
+		}
 
-	.g-arrow-line {
-		stroke-dasharray: 1;
-		stroke-dashoffset: 0;
-		animation: g-draw var(--duration-slow) var(--ease-smooth-out) 300ms backwards;
-	}
+		.g-arrow-lit {
+			stroke: var(--color-foreground, currentColor);
+		}
+
+		.g-arrow-line {
+			stroke-dasharray: 1;
+			stroke-dashoffset: 0;
+			animation: g-draw var(--duration-slow) var(--ease-smooth-out) 300ms backwards;
+		}
 
-	.g-arrow-head {
-		animation: g-fade var(--duration-quick) var(--ease-smooth-out) 700ms backwards;
+		.g-arrow-head {
+			animation: g-fade var(--duration-quick) var(--ease-smooth-out) 700ms backwards;
+		}
+
+		@media (prefers-reduced-motion: reduce) {
+			.g-today,
+			.g-arrow-line,
+			.g-arrow-head {
+				animation: none;
+			}
+		}
 	}
 
 	@keyframes g-today-in {
@@ -114,12 +126,4 @@
 			opacity: 0;
 		}
 	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.g-today,
-		.g-arrow-line,
-		.g-arrow-head {
-			animation: none;
-		}
-	}
 </style>

package/src/work/gantt/gantt-grid.svelte.d.ts

@@ -0,0 +1,14 @@
+import { type Arrow, type GanttDay, type Layout } from "./logic.js";
+interface Props {
+    layout: Layout;
+    days: GanttDay[];
+    arrows: Arrow[];
+    rowCount: number;
+    /** The row id the pointer is over, so its arrows light up. */
+    hoveredId: string | null;
+    /** The id being dragged. */
+    draggingId: string | null;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/work/gantt/gantt-group-row.svelte

@@ -43,16 +43,20 @@
 </div>
 
 <style>
-	.g-summary {
-		background: color-mix(in oklab, var(--g-hue) 45%, transparent);
-		transition:
-			left var(--duration-quick) var(--ease-smooth-out),
-			width var(--duration-quick) var(--ease-smooth-out);
-	}
+	@layer theme, base, components, utilities;
 
-	@media (prefers-reduced-motion: reduce) {
+	@layer components {
 		.g-summary {
-			transition: none;
+			background: color-mix(in oklab, var(--g-hue) 45%, transparent);
+			transition:
+				left var(--duration-quick) var(--ease-smooth-out),
+				width var(--duration-quick) var(--ease-smooth-out);
+		}
+
+		@media (prefers-reduced-motion: reduce) {
+			.g-summary {
+				transition: none;
+			}
 		}
 	}
 </style>

package/src/work/gantt/gantt-group-row.svelte.d.ts

@@ -0,0 +1,12 @@
+import { type GroupRow, type Layout } from "./logic.js";
+import "./gantt.css";
+interface Props {
+    row: GroupRow;
+    /** The row's position, which sets how late its summary bar enters. */
+    index: number;
+    layout: Layout;
+    staggerCap: number;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/work/gantt/gantt-header.svelte

@@ -50,15 +50,13 @@
 				<div
 					class={cn(
 						"relative flex shrink-0 flex-col items-center justify-center text-[10px] leading-none tabular-nums",
-						d.weekend ? "text-muted-foreground/50" : "text-muted-foreground",
+						d.weekend ? "text-muted-foreground/85" : "text-muted-foreground",
 						layout.dayWidth < 18 && d.wd === 1 && "border-l border-border/60",
 					)}
 					style:width="{layout.dayWidth}px"
 				>
 					{#if layout.dayWidth >= 26}
-						<span class="mb-0.5 opacity-70"
-							>{weekdayFormat.format(new Date(d.day * 86_400_000))}</span
-						>
+						<span class="mb-0.5">{weekdayFormat.format(new Date(d.day * 86_400_000))}</span>
 					{/if}
 					{#if showNumber}
 						<span

package/src/work/gantt/gantt-header.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { GanttDay, Layout } from "./logic.js";
+interface Props {
+    layout: Layout;
+    days: GanttDay[];
+    months: {
+        key: string;
+        label: string;
+        i: number;
+        length: number;
+    }[];
+    labelHeading: string;
+    locale: string;
+    corner?: HTMLDivElement;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "corner">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/work/gantt/gantt-task-row.svelte

@@ -33,10 +33,11 @@
 		tipBelow: boolean;
 		drag: Drag | null;
 		setDrag: (drag: Drag | null) => void;
-		onhover: (id: string, on: boolean) => void;
+		onHover: (id: string, on: boolean) => void;
 		onToggle: (id: string) => void;
-		onChange?: (id: string, change: GanttChange) => void | Promise<void>;
+		onDatesChange?: (id: string, change: GanttChange) => void | Promise<void>;
 		onSelect?: (id: string) => void;
+		onKeyMove?: (id: string, span: Span) => void;
 		renderLabel?: Snippet<[T, GanttLabelContext]>;
 		describe: (span: Span) => string;
 	}
@@ -57,10 +58,11 @@
 		tipBelow,
 		drag,
 		setDrag,
-		onhover,
+		onHover,
 		onToggle,
-		onChange,
+		onDatesChange,
 		onSelect,
+		onKeyMove,
 		renderLabel,
 		describe,
 	}: Props<T> = $props();
@@ -96,7 +98,7 @@
 						class:g-chevron-open={row.open}
 						aria-hidden="true"
 					>
-						<CaretRight weight="bold" />
+						<CaretRight aria-hidden="true" weight="bold" />
 					</span>
 				</Button>
 			{:else}
@@ -112,7 +114,7 @@
 	<div class="relative shrink-0" style:width="{layout.timelineWidth}px">
 		{#if !span}
 			<span
-				class="pointer-events-none absolute top-1/2 -translate-y-1/2 text-xs whitespace-nowrap text-muted-foreground/70"
+				class="pointer-events-none absolute top-1/2 -translate-y-1/2 text-xs whitespace-nowrap text-muted-foreground"
 				style:left="{Math.max(dayX(layout, layout.todayDay) - 40, 0) + 8}px"
 			>
 				{noDatesLabel}
@@ -129,11 +131,11 @@
 				style:--g-hue={hue}
 				style:left="{dayX(layout, span.end) + layout.dayWidth / 2}px"
 				onclick={() => onSelect?.(row.id)}
-				onpointerenter={() => onhover(row.id, true)}
-				onpointerleave={() => onhover(row.id, false)}
+				onpointerenter={() => onHover(row.id, true)}
+				onpointerleave={() => onHover(row.id, false)}
 			>
 				<span class="size-5 [&>svg]:size-full" aria-hidden="true"
-					><FlagPennant weight="fill" /></span
+					><FlagPennant aria-hidden="true" weight="fill" /></span
 				>
 			</button>
 		{:else if !row.own}
@@ -155,8 +157,8 @@
 				onclick={() => onSelect?.(row.id)}
 				onkeydown={(e) =>
 					(e.key === "Enter" || e.key === " ") && (e.preventDefault(), onSelect?.(row.id))}
-				onpointerenter={() => onhover(row.id, true)}
-				onpointerleave={() => onhover(row.id, false)}
+				onpointerenter={() => onHover(row.id, true)}
+				onpointerleave={() => onHover(row.id, false)}
 			></div>
 		{:else}
 			<GanttBar
@@ -172,9 +174,10 @@
 				{tipBelow}
 				{drag}
 				{setDrag}
-				{onhover}
-				{onChange}
+				{onHover}
+				{onDatesChange}
 				{onSelect}
+				{onKeyMove}
 				{describe}
 			/>
 		{/if}
@@ -182,35 +185,39 @@
 </div>
 
 <style>
-	.g-row {
-		transition: background-color var(--duration-quick) var(--ease-smooth-out);
-	}
+	@layer theme, base, components, utilities;
 
-	.g-row-hot {
-		background: color-mix(in oklab, var(--color-foreground, currentColor) 3%, transparent);
-	}
+	@layer components {
+		.g-row {
+			transition: background-color var(--duration-quick) var(--ease-smooth-out);
+		}
 
-	.g-chevron {
-		transition: rotate var(--duration-fast) var(--ease-smooth-out);
-	}
+		.g-row-hot {
+			background: color-mix(in oklab, var(--color-foreground, currentColor) 3%, transparent);
+		}
 
-	.g-chevron-open {
-		rotate: 90deg;
-	}
+		.g-chevron {
+			transition: rotate var(--duration-fast) var(--ease-smooth-out);
+		}
 
-	/* A summary of what is below: an outline, so it never reads as a task you can drag. */
-	.g-derived {
-		background: color-mix(in oklab, var(--g-hue) 10%, transparent);
-		box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--g-hue) 45%, transparent);
-	}
+		.g-chevron-open {
+			rotate: 90deg;
+		}
 
-	.g-flag {
-		color: var(--g-hue);
-	}
+		/* A summary of what is below: an outline, so it never reads as a task you can drag. */
+		.g-derived {
+			background: color-mix(in oklab, var(--g-hue) 10%, transparent);
+			box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--g-hue) 45%, transparent);
+		}
 
-	@media (prefers-reduced-motion: reduce) {
-		.g-chevron {
-			transition: none;
+		.g-flag {
+			color: var(--g-hue);
+		}
+
+		@media (prefers-reduced-motion: reduce) {
+			.g-chevron {
+				transition: none;
+			}
 		}
 	}
 </style>

package/src/work/gantt/gantt-task-row.svelte.d.ts

@@ -0,0 +1,53 @@
+import type { Snippet } from "svelte";
+import type { GanttChange, GanttLabelContext } from "../task-types.js";
+import { type Drag, type Layout, type Span, type TaskRow } from "./logic.js";
+import "./gantt.css";
+interface Props<T> {
+    row: TaskRow<T>;
+    layout: Layout;
+    title: string;
+    hue: string;
+    progress: number;
+    milestone: boolean;
+    /** Set when tasks nest: the label column indents and shows a fold button. */
+    nested: boolean;
+    indent: number;
+    staggerCap: number;
+    inlineTitleMin: number;
+    noDatesLabel: string;
+    hovered: boolean;
+    tipBelow: boolean;
+    drag: Drag | null;
+    setDrag: (drag: Drag | null) => void;
+    onHover: (id: string, on: boolean) => void;
+    onToggle: (id: string) => void;
+    onDatesChange?: (id: string, change: GanttChange) => void | Promise<void>;
+    onSelect?: (id: string) => void;
+    onKeyMove?: (id: string, span: Span) => void;
+    renderLabel?: Snippet<[T, GanttLabelContext]>;
+    describe: (span: Span) => 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/src/work/gantt/gantt.css

@@ -1,7 +1,17 @@
-/* Shared by the bar, the derived bar and the group summary: they all slide in the same way. */
-.g-enter {
-  animation: g-bar-in var(--duration-slow) var(--ease-smooth-out) backwards;
-  animation-delay: calc(var(--g-i, 0) * var(--duration-stagger));
+@layer theme, base, components, utilities;
+
+@layer components {
+  /* Shared by the bar, the derived bar and the group summary: they all slide in the same way. */
+  .g-enter {
+    animation: g-bar-in var(--duration-slow) var(--ease-smooth-out) backwards;
+    animation-delay: calc(var(--g-i, 0) * var(--duration-stagger));
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .g-enter {
+      animation: none;
+    }
+  }
 }
 
 @keyframes g-bar-in {
@@ -14,9 +24,3 @@
     clip-path: inset(0 0 0 0 round var(--radius-lg));
   }
 }
-
-@media (prefers-reduced-motion: reduce) {
-  .g-enter {
-    animation: none;
-  }
-}