@heyramzi/tasks 0.3.0 → 0.5.0

package/src/time/time-types.ts

@@ -0,0 +1,74 @@
+/** A running timer. The host persists it, the tracker only reads it. */
+export type TimeRunning = {
+	startedAt: Date | string | number;
+};
+
+/** What the tracker hands back when a manual entry is submitted. */
+export type TimeLogInput = {
+	minutes: number;
+	/** The day worked, `YYYY-MM-DD`. */
+	day: string;
+	note?: string;
+};
+
+/** What the tracker hands back when the timer stops. */
+export type TimeStopInfo = {
+	/** Elapsed whole minutes, never below 1. */
+	minutes: number;
+	startedAt: Date;
+	stoppedAt: Date;
+	/** The day it started, `YYYY-MM-DD`, in the reader's calendar. */
+	day: string;
+};
+
+export type TimeLabels = {
+	title: string;
+	timer: string;
+	start: string;
+	stop: string;
+	running: string;
+	since: (time: string) => string;
+	started: string;
+	runningFor: (duration: string) => string;
+	stopped: (duration: string) => string;
+	elapsed: string;
+	logged: string;
+	duration: string;
+	durationPlaceholder: string;
+	date: string;
+	note: string;
+	notePlaceholder: string;
+	log: string;
+	saving: string;
+	invalid: string;
+	empty: string;
+	remaining: (left: string, estimate: string) => string;
+	over: (over: string, estimate: string) => string;
+	deleteEntry: (duration: string) => string;
+};
+
+export const DEFAULT_TIME_LABELS: TimeLabels = {
+	title: "Time",
+	timer: "Timer",
+	start: "Start timer",
+	stop: "Stop timer",
+	running: "Running",
+	since: (time) => `Since ${time}`,
+	started: "Timer started",
+	runningFor: (duration) => `Timer running, ${duration}`,
+	stopped: (duration) => `Timer stopped, ${duration} to log`,
+	elapsed: "Elapsed time",
+	logged: "Logged",
+	duration: "Time spent",
+	durationPlaceholder: "1h30",
+	date: "Date worked",
+	note: "Note",
+	notePlaceholder: "What was done",
+	log: "Log",
+	saving: "Saving",
+	invalid: "Try 45m, 1h30 or 1.5h",
+	empty: "Log your first hour",
+	remaining: (left, estimate) => `${left} left of ${estimate}`,
+	over: (over, estimate) => `${over} over ${estimate}`,
+	deleteEntry: (duration) => `Delete ${duration} entry`,
+};

package/src/use-kanban-dnd.svelte.ts

@@ -132,9 +132,14 @@ export function createKanbanDnd<T>(config: KanbanDndConfig<T>) {
       .getColumnItems(targetColumnId)
       .filter((entry) => config.getId(entry) !== movedId);
     const index = manualInsertIndex(column, overId, targetColumnId);
+    const before = column[index - 1];
+    const after = column[index];
+    const orderOf = config.boardOrder;
     void config.onMove(movedId, {
       columnId: targetColumnId,
-      boardOrder: boardOrderAt(column, index, config.boardOrder ?? (() => null)),
+      ...(orderOf ? { boardOrder: boardOrderAt(column, index, orderOf) } : {}),
+      beforeId: before === undefined ? null : config.getId(before),
+      afterId: after === undefined ? null : config.getId(after),
     });
   }
 

package/src/icons/board-icon.svelte

@@ -1,9 +0,0 @@
-<script lang="ts">
-	let { size = 16, class: className }: { size?: number; class?: string } = $props();
-</script>
-
-<svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true" class={className}>
-	<rect x="2" y="2.5" width="3.5" height="11" rx="1.25" stroke="currentColor" stroke-width="1.5"></rect>
-	<rect x="7" y="2.5" width="3.5" height="7" rx="1.25" stroke="currentColor" stroke-width="1.5"></rect>
-	<rect x="12" y="2.5" width="2" height="9" rx="1" stroke="currentColor" stroke-width="1.5"></rect>
-</svg>

package/src/icons/chevron-right.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M6 4l4 4-4 4" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/src/icons/gantt-icon.svelte

@@ -1,11 +0,0 @@
-<script lang="ts">
-	let { size = 16, class: className }: { size?: number; class?: string } = $props();
-</script>
-
-<svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true" class={className}>
-	<g stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
-		<line x1="2" y1="4" x2="8" y2="4"></line>
-		<line x1="5" y1="8" x2="12" y2="8"></line>
-		<line x1="9" y1="12" x2="14" y2="12"></line>
-	</g>
-</svg>

package/src/icons/list-icon.svelte

@@ -1,16 +0,0 @@
-<script lang="ts">
-	let { size = 16, class: className }: { size?: number; class?: string } = $props();
-</script>
-
-<svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true" class={className}>
-	<g stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
-		<line x1="6" y1="4" x2="14" y2="4"></line>
-		<line x1="6" y1="8" x2="14" y2="8"></line>
-		<line x1="6" y1="12" x2="14" y2="12"></line>
-	</g>
-	<g fill="currentColor">
-		<circle cx="2.75" cy="4" r="1"></circle>
-		<circle cx="2.75" cy="8" r="1"></circle>
-		<circle cx="2.75" cy="12" r="1"></circle>
-	</g>
-</svg>

package/src/icons/spinner.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="3" opacity="0.25"/><path d="M21 12a9 9 0 0 0-9-9" stroke="currentColor" stroke-width="3" stroke-linecap="round"/></svg>

package/src/lib/cn.ts

@@ -1,11 +0,0 @@
-export type ClassValue = string | false | null | undefined;
-
-/** Join class values, dropping empties. Deliberately dependency-free. */
-export function cn(...values: ClassValue[]): string {
-  let out = "";
-  for (const value of values) {
-    if (!value) continue;
-    out = out ? out + " " + value : value;
-  }
-  return out;
-}

package/src/task-view-switch.svelte

@@ -1,118 +0,0 @@
-<script lang="ts">
-	import { cn } from "./lib/cn.js";
-	import type { TaskView } from "./task-types.js";
-
-	type Props = {
-		views: TaskView[];
-		/** The active view id. Bindable. */
-		value: string;
-		onchange?: (id: string) => void;
-		label?: string;
-		class?: string;
-	};
-
-	let {
-		views,
-		value = $bindable(),
-		onchange,
-		label = "View",
-		class: className,
-	}: Props = $props();
-
-	let track = $state<HTMLDivElement>();
-	let pill = $state<{ x: number; width: number } | null>(null);
-	// The pill's first position is written without a transition, or it slides in from 0.
-	let placed = $state(false);
-
-	function measure(): void {
-		const button = track?.querySelector<HTMLElement>(`[data-view="${CSS.escape(value)}"]`);
-		if (!button) return;
-		pill = { x: button.offsetLeft, width: button.offsetWidth };
-	}
-
-	$effect(() => {
-		void value;
-		void views.length;
-		measure();
-		if (!placed) requestAnimationFrame(() => (placed = true));
-	});
-
-	$effect(() => {
-		if (!track) return;
-		const observer = new ResizeObserver(() => measure());
-		observer.observe(track);
-		return () => observer.disconnect();
-	});
-
-	function select(id: string): void {
-		if (id === value) return;
-		value = id;
-		onchange?.(id);
-	}
-
-	function onKeyDown(e: KeyboardEvent): void {
-		if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
-		e.preventDefault();
-		const at = views.findIndex((view) => view.id === value);
-		const next = views[(at + (e.key === "ArrowRight" ? 1 : -1) + views.length) % views.length];
-		select(next.id);
-		track?.querySelector<HTMLElement>(`[data-view="${CSS.escape(next.id)}"]`)?.focus();
-	}
-</script>
-
-<div
-	bind:this={track}
-	role="tablist"
-	aria-label={label}
-	tabindex="-1"
-	onkeydown={onKeyDown}
-	class={cn(
-		"task-view-switch relative inline-flex shrink-0 items-center gap-0.5 rounded-lg bg-muted/70 p-0.5 dark:bg-muted/40",
-		className,
-	)}
->
-	{#if pill}
-		<span
-			aria-hidden="true"
-			class="tvs-pill absolute inset-y-0.5 left-0 rounded-md bg-background shadow-sm ring-1 ring-foreground/5 dark:bg-foreground/10"
-			class:tvs-pill-placed={placed}
-			style:width="{pill.width}px"
-			style:transform="translateX({pill.x}px)"
-		></span>
-	{/if}
-	{#each views as view (view.id)}
-		{@const active = view.id === value}
-		<button
-			type="button"
-			role="tab"
-			data-view={view.id}
-			aria-selected={active}
-			tabindex={active ? 0 : -1}
-			onclick={() => select(view.id)}
-			class={cn(
-				"relative z-10 inline-flex h-7 items-center gap-1.5 rounded-md px-2.5 text-xs font-medium outline-none transition-colors duration-[var(--duration-quick,150ms)] focus-visible:ring-2 focus-visible:ring-ring/60",
-				active ? "text-foreground" : "text-muted-foreground hover:text-foreground",
-			)}
-		>
-			{#if view.icon}
-				{@const Icon = view.icon}
-				<Icon size={14} class="shrink-0" />
-			{/if}
-			{view.label}
-		</button>
-	{/each}
-</div>
-
-<style>
-	.tvs-pill-placed {
-		transition:
-			transform var(--duration-fast, 250ms) var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1)),
-			width var(--duration-fast, 250ms) var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
-	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.tvs-pill-placed {
-			transition: none;
-		}
-	}
-</style>

package/src/tone.ts

@@ -1,51 +0,0 @@
-import type { Tone } from "./status-types.js";
-
-/**
- * The severity scale, as Tailwind classes for a chip and as CSS colors for the
- * dot. Tokens are plain CSS variables, so a host app can retheme them.
- */
-
-export const TONE_CLASS: Record<Tone, string> = {
-	neutral: "border-border bg-muted/40 text-muted-foreground",
-	accent: "border-primary/30 bg-primary/10 text-primary",
-	info: "border-info/30 bg-info/10 text-info-800 dark:text-info-400",
-	success: "border-success/30 bg-success/10 text-success-800 dark:text-success-400",
-	warning: "border-warning/30 bg-warning/10 text-warning-800 dark:text-warning-400",
-	destructive: "border-destructive/30 bg-destructive/10 text-destructive",
-};
-
-/** The same scale as text, for a verdict inside a line of muted facts. */
-export const TONE_TEXT: Record<Tone, string> = {
-	neutral: "text-muted-foreground",
-	accent: "text-primary",
-	info: "text-info-800 dark:text-info-400",
-	success: "text-success-800 dark:text-success-400",
-	warning: "text-warning-800 dark:text-warning-400",
-	destructive: "text-destructive",
-};
-
-/** The same scale as icon color. */
-export const TONE_ICON: Record<Tone, string> = {
-	neutral: "text-muted-foreground",
-	accent: "text-primary",
-	info: "text-info",
-	success: "text-success",
-	warning: "text-warning",
-	destructive: "text-destructive",
-};
-
-/** The scale as CSS colors, for the SVG dot. */
-export const TONE_COLOR: Record<Tone, string> = {
-	neutral: "var(--color-muted-foreground)",
-	accent: "var(--color-primary)",
-	info: "var(--color-info)",
-	success: "var(--color-success)",
-	warning: "var(--color-warning)",
-	destructive: "var(--color-destructive)",
-};
-
-/**
- * The inset well for a control block inside a panel. A visible step
- * at the same depth, for filter rows and grouped controls.
- */
-export const insetWellClass = "rounded-lg border border-border bg-muted/40 p-2";