@heyramzi/ui 3.7.0 → 3.8.0

package/src/shadcn/calendar/calendar.svelte

@@ -1,9 +1,19 @@
 <script lang="ts">
 	import { Calendar as CalendarPrimitive } from "bits-ui";
-	// The root component composes its own sibling sub-components through the barrel it
-	// is re-exported from; standard shadcn-svelte shape, not an initialization hazard.
-	// fallow-ignore-next-line circular-dependency
-	import * as Calendar from "./index.js";
+	import CalendarCaption from "./calendar-caption.svelte";
+	import CalendarCell from "./calendar-cell.svelte";
+	import CalendarDay from "./calendar-day.svelte";
+	import CalendarGridBody from "./calendar-grid-body.svelte";
+	import CalendarGridHead from "./calendar-grid-head.svelte";
+	import CalendarGridRow from "./calendar-grid-row.svelte";
+	import CalendarGrid from "./calendar-grid.svelte";
+	import CalendarHeadCell from "./calendar-head-cell.svelte";
+	import CalendarHeader from "./calendar-header.svelte";
+	import CalendarMonth from "./calendar-month.svelte";
+	import CalendarMonths from "./calendar-months.svelte";
+	import CalendarNav from "./calendar-nav.svelte";
+	import CalendarNextButton from "./calendar-next-button.svelte";
+	import CalendarPrevButton from "./calendar-prev-button.svelte";
 	import { cn, type WithoutChildrenOrChild } from "../../lib/utils.js";
 	import type { ButtonVariant } from "../button/button.svelte";
 	import { isEqualMonth, type DateValue } from "@internationalized/date";
@@ -68,15 +78,15 @@ get along, so we shut typescript up by casting `value` to `never`.
 	{...restProps}
 >
 	{#snippet children({ months, weekdays })}
-		<Calendar.Months>
-			<Calendar.Nav>
-				<Calendar.PrevButton variant={buttonVariant} />
-				<Calendar.NextButton variant={buttonVariant} />
-			</Calendar.Nav>
+		<CalendarMonths>
+			<CalendarNav>
+				<CalendarPrevButton variant={buttonVariant} />
+				<CalendarNextButton variant={buttonVariant} />
+			</CalendarNav>
 			{#each months as month, monthIndex (month)}
-				<Calendar.Month>
-					<Calendar.Header>
-						<Calendar.Caption
+				<CalendarMonth>
+					<CalendarHeader>
+						<CalendarCaption
 							{captionLayout}
 							months={monthsProp}
 							{monthFormat}
@@ -87,38 +97,38 @@ get along, so we shut typescript up by casting `value` to `never`.
 							{locale}
 							{monthIndex}
 						/>
-					</Calendar.Header>
-					<Calendar.Grid>
-						<Calendar.GridHead>
-							<Calendar.GridRow class="select-none">
+					</CalendarHeader>
+					<CalendarGrid>
+						<CalendarGridHead>
+							<CalendarGridRow class="select-none">
 								{#each weekdays as weekday (weekday)}
-									<Calendar.HeadCell>
+									<CalendarHeadCell>
 										{weekday.slice(0, 2)}
-									</Calendar.HeadCell>
+									</CalendarHeadCell>
 								{/each}
-							</Calendar.GridRow>
-						</Calendar.GridHead>
-						<Calendar.GridBody>
+							</CalendarGridRow>
+						</CalendarGridHead>
+						<CalendarGridBody>
 							{#each month.weeks as weekDates (weekDates)}
-								<Calendar.GridRow class="mt-2 w-full">
+								<CalendarGridRow class="mt-2 w-full">
 									{#each weekDates as date (date)}
-										<Calendar.Cell {date} month={month.value}>
+										<CalendarCell {date} month={month.value}>
 											{#if day}
 												{@render day({
 													day: date,
 													outsideMonth: !isEqualMonth(date, month.value),
 												})}
 											{:else}
-												<Calendar.Day />
+												<CalendarDay />
 											{/if}
-										</Calendar.Cell>
+										</CalendarCell>
 									{/each}
-								</Calendar.GridRow>
+								</CalendarGridRow>
 							{/each}
-						</Calendar.GridBody>
-					</Calendar.Grid>
-				</Calendar.Month>
+						</CalendarGridBody>
+					</CalendarGrid>
+				</CalendarMonth>
 			{/each}
-		</Calendar.Months>
+		</CalendarMonths>
 	{/snippet}
 </CalendarPrimitive.Root>

package/src/shadcn/calendar/calendar.svelte.d.ts

@@ -1,5 +1,4 @@
 import { Calendar as CalendarPrimitive } from "bits-ui";
-import * as Calendar from "./index.js";
 import { type WithoutChildrenOrChild } from "../../lib/utils.js";
 import type { ButtonVariant } from "../button/button.svelte";
 import { type DateValue } from "@internationalized/date";

package/src/shadcn/hooks/is-mobile.svelte.js

@@ -0,0 +1,7 @@
+import { MediaQuery } from "svelte/reactivity";
+const DEFAULT_MOBILE_BREAKPOINT = 768;
+export class IsMobile extends MediaQuery {
+	constructor(breakpoint = DEFAULT_MOBILE_BREAKPOINT) {
+		super(`max-width: ${breakpoint - 1}px`);
+	}
+}

package/src/shadcn/hooks/use-highlighted-code.svelte.js

@@ -0,0 +1,65 @@
+import { loadHighlighter } from "./highlighter.js";
+/**
+* Highlights `code`. Each `current` entry is a plain string until the highlighter loads, then
+* tokens, so pass it to `CodeBlock.Line`'s `code` prop either way.
+*/
+export function useHighlightedCode(value, language) {
+	let loaded = $state.raw(null);
+	$effect(() => {
+		const lang = language();
+		let cancelled = false;
+		loadHighlighter(lang).then((next) => {
+			if (!cancelled) {
+				loaded = {
+					language: lang,
+					highlighter: next
+				};
+			}
+		}).catch(() => {});
+		return () => {
+			cancelled = true;
+		};
+	});
+	// The complete lines, highlighted. While the code streams, only the new
+	// lines are tokenized, starting from the grammar state of the last one.
+	let done = {
+		highlighter: null,
+		text: "",
+		lines: []
+	};
+	const lines = $derived.by(() => {
+		const raw = value();
+		// A trailing newline would render as an extra empty line.
+		const code = raw.endsWith("\n") ? raw.slice(0, -1) : raw;
+		const lang = language();
+		const highlighter = loaded?.language === lang ? loaded.highlighter : null;
+		if (!highlighter) {
+			return code.split("\n");
+		}
+		let next = done;
+		if (next.highlighter !== highlighter || !code.startsWith(next.text)) {
+			next = {
+				highlighter,
+				text: "",
+				lines: []
+			};
+		}
+		const end = code.lastIndexOf("\n") + 1;
+		if (end > next.text.length) {
+			const result = highlighter.highlight(code.slice(next.text.length, end - 1), next.state);
+			next = {
+				highlighter,
+				text: code.slice(0, end),
+				lines: [...next.lines, ...result.lines],
+				state: result.state
+			};
+		}
+		done = next;
+		// The last line is still being written, so it is tokenized every time.
+		const tail = code.slice(end);
+		return [...next.lines, highlighter.highlight(tail, next.state).lines[0]];
+	});
+	return { get current() {
+		return lines;
+	} };
+}

package/src/shadcn/input/input.svelte

@@ -6,7 +6,7 @@
 
 	type Props = WithElementRef<
 		Omit<HTMLInputAttributes, "type"> &
-			({ type: "file"; files?: FileList } | { type?: InputType; files?: undefined })
+			({ type: "file"; files?: FileList | null } | { type?: InputType; files?: undefined })
 	>;
 
 	let {

package/src/shadcn/input/input.svelte.d.ts

@@ -3,7 +3,7 @@ import { type WithElementRef } from "../../lib/utils.js";
 type InputType = Exclude<HTMLInputTypeAttribute, "file">;
 type Props = WithElementRef<Omit<HTMLInputAttributes, "type"> & ({
     type: "file";
-    files?: FileList;
+    files?: FileList | null;
 } | {
     type?: InputType;
     files?: undefined;

package/src/shadcn/input-group/input-group-input.svelte.d.ts

@@ -1,6 +1,6 @@
 declare const $$Component: import("svelte").Component<(Omit<import("svelte/elements").HTMLInputAttributes, "type"> & ({
     type: "file";
-    files?: FileList;
+    files?: FileList | null;
 } | {
     type?: "number" | "hidden" | "color" | "text" | "search" | "submit" | "reset" | "button" | "checkbox" | "radio" | (string & {}) | "tel" | "url" | "email" | "date" | "image" | "time" | "month" | "datetime-local" | "password" | "range" | "week";
     files?: undefined;

package/src/shadcn/input-otp/input-otp-group.svelte

@@ -13,6 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="input-otp-group"
+	aria-hidden="true"
 	class={cn("flex items-center", className)}
 	{...restProps}
 >

package/src/shadcn/input-otp/input-otp-slot.svelte

@@ -22,5 +22,9 @@
 	)}
 	{...restProps}
 >
-	{cell.char}
+	{#snippet child({ props })}
+		<div {...props} data-active={cell.isActive}>
+			{cell.char}
+		</div>
+	{/snippet}
 </InputOTPPrimitive.Cell>

package/src/shadcn/input-otp/input-otp.svelte

@@ -4,6 +4,7 @@
 
 	let {
 		ref = $bindable(null),
+		inputRef = $bindable(null),
 		class: className,
 		value = $bindable(""),
 		...restProps
@@ -12,6 +13,7 @@
 
 <InputOTPPrimitive.Root
 	bind:ref
+	bind:inputRef
 	bind:value
 	data-slot="input-otp"
 	class={cn(

package/src/shadcn/input-otp/input-otp.svelte.d.ts

@@ -1,4 +1,4 @@
 import { PinInput as InputOTPPrimitive } from "bits-ui";
-declare const $$Component: import("svelte").Component<InputOTPPrimitive.RootProps, {}, "value" | "ref">;
+declare const $$Component: import("svelte").Component<InputOTPPrimitive.RootProps, {}, "value" | "ref" | "inputRef">;
 type $$Component = ReturnType<typeof $$Component>;
 export default $$Component;

package/src/shadcn/sidebar/context.svelte.js

@@ -0,0 +1,63 @@
+import { IsMobile } from "../hooks/is-mobile.svelte.js";
+import { getContext, setContext } from "svelte";
+import { SIDEBAR_KEYBOARD_SHORTCUT } from "./constants.js";
+// Cmd+B in a field means bold, so the shortcut leaves typing alone.
+function isEditable(target) {
+	if (!(target instanceof HTMLElement)) return false;
+	return target.closest("input, textarea, [contenteditable]:not([contenteditable=\"false\"])") !== null;
+}
+class SidebarState {
+	props;
+	open = $derived.by(() => this.props.open());
+	openMobile = $state(false);
+	setOpen;
+	#isMobile;
+	state = $derived.by(() => this.open ? "expanded" : "collapsed");
+	id;
+	constructor(props) {
+		this.setOpen = props.setOpen;
+		this.id = props.id;
+		this.#isMobile = new IsMobile();
+		this.props = props;
+	}
+	// Convenience getter for checking if the sidebar is mobile
+	// without this, we would need to use `sidebar.isMobile.current` everywhere
+	get isMobile() {
+		return this.#isMobile.current;
+	}
+	/** Whether the sidebar a trigger controls is showing: the sheet on a phone, the panel otherwise. */
+	get expanded() {
+		return this.#isMobile.current ? this.openMobile : this.open;
+	}
+	// Event handler to apply to the `<svelte:window>`
+	handleShortcutKeydown = (e) => {
+		if (e.key === SIDEBAR_KEYBOARD_SHORTCUT && (e.metaKey || e.ctrlKey) && !isEditable(e.target)) {
+			e.preventDefault();
+			this.toggle();
+		}
+	};
+	setOpenMobile = (value) => {
+		this.openMobile = value;
+	};
+	toggle = () => {
+		return this.#isMobile.current ? this.openMobile = !this.openMobile : this.setOpen(!this.open);
+	};
+}
+const SYMBOL_KEY = "scn-sidebar";
+/**
+* Instantiates a new `SidebarState` instance and sets it in the context.
+*
+* @param props The constructor props for the `SidebarState` class.
+* @returns  The `SidebarState` instance.
+*/
+export function setSidebar(props) {
+	return setContext(Symbol.for(SYMBOL_KEY), new SidebarState(props));
+}
+/**
+* Retrieves the `SidebarState` instance from the context. This is a class instance,
+* so you cannot destructure it.
+* @returns The `SidebarState` instance.
+*/
+export function useSidebar() {
+	return getContext(Symbol.for(SYMBOL_KEY));
+}

package/src/shadcn/sidebar/sidebar-input.svelte.d.ts

@@ -1,6 +1,6 @@
 declare const $$Component: import("svelte").Component<(Omit<import("svelte/elements").HTMLInputAttributes, "type"> & ({
     type: "file";
-    files?: FileList;
+    files?: FileList | null;
 } | {
     type?: "number" | "hidden" | "color" | "text" | "search" | "submit" | "reset" | "button" | "checkbox" | "radio" | (string & {}) | "tel" | "url" | "email" | "date" | "image" | "time" | "month" | "datetime-local" | "password" | "range" | "week";
     files?: undefined;

package/src/slides/deck-controller.svelte.js

@@ -0,0 +1,254 @@
+import { untrack } from "svelte";
+import { fitBox, gridBoxes } from "./layout.js";
+import { keyAction, nextPosition, ordinalOf, prevPosition, progressOf, settle, visibleIndexes } from "./navigation.js";
+import { resolveLabels } from "./labels.js";
+import { DEFAULT_CANVAS } from "./types.js";
+/** Height the controls bar takes at the bottom of the overview, in px. */
+const CONTROLS_ROOM = 56;
+const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+/**
+* Where `cell` lands when the camera moves `target` onto `fit`. Every box shares one scale and
+* shift, and a transform tween is linear in both, so the grid stays rigid while it zooms.
+*/
+function frame(cell, target, fit) {
+	const k = fit.scale / target.scale;
+	return {
+		x: fit.x + (cell.x - target.x) * k,
+		y: fit.y + (cell.y - target.y) * k,
+		scale: cell.scale * k
+	};
+}
+function isEditable(el) {
+	return el.isContentEditable || [
+		"INPUT",
+		"TEXTAREA",
+		"SELECT"
+	].includes(el.tagName);
+}
+const byDocumentOrder = (a, b) => a.el && b.el ? a.el.compareDocumentPosition(b.el) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1 : 0;
+export class DeckController {
+	entries = $state.raw([]);
+	view = $state("slide");
+	/** The highlighted thumbnail in the overview, as an index among the visible slides. */
+	cursor = $state(0);
+	direction = $state(1);
+	zoom = $state(null);
+	size = $state({
+		w: 0,
+		h: 0
+	});
+	options;
+	#listeners = new Set();
+	#timer;
+	#frame = 0;
+	constructor(options) {
+		this.options = options;
+	}
+	canvas = $derived(this.options.canvas ?? DEFAULT_CANVAS);
+	labels = $derived(resolveLabels(this.options.labels));
+	slides = $derived(this.entries.map((entry) => ({
+		steps: this.options.fragments === false ? 0 : entry.steps,
+		hidden: entry.hidden
+	})));
+	visible = $derived(visibleIndexes(this.slides));
+	position = $derived(settle(this.slides, {
+		index: this.options.index,
+		step: this.options.step
+	}));
+	ordinal = $derived(ordinalOf(this.slides, this.position.index));
+	progress = $derived(progressOf(this.slides, this.position));
+	current = $derived(this.entries[this.position.index]);
+	/** The slide after this one, for a presenter's preview. Null on the last. */
+	upcoming = $derived(this.visible.find((i) => i > this.position.index) ?? null);
+	overview = $derived(this.view === "overview");
+	/** True when every fragment shows: in the overview, or on a deck that doesn't stage reveals. */
+	revealAll = $derived(this.overview || this.options.fragments === false);
+	atStart = $derived(prevPosition(this.slides, this.position, this.options.loop) === null);
+	atEnd = $derived(nextPosition(this.slides, this.position, this.options.loop) === null);
+	fit = $derived(fitBox(this.size, this.canvas));
+	grid = $derived(gridBoxes({
+		w: this.size.w,
+		h: Math.max(0, this.size.h - (this.options.controls === false ? 0 : CONTROLS_ROOM))
+	}, this.canvas, this.visible.length));
+	/** Where slide `index` sits right now: centred to fit, or in its overview cell. */
+	boxOf(index) {
+		const zoom = this.zoom;
+		const cell = this.grid.boxes[this.visible.indexOf(index)];
+		if (zoom?.framed) {
+			const target = this.grid.boxes[this.visible.indexOf(zoom.index)];
+			return cell && target ? frame(cell, target, this.fit) : this.fit;
+		}
+		return this.overview || zoom ? cell : this.fit;
+	}
+	register(entry) {
+		untrack(() => {
+			this.entries = [...this.entries, entry].sort(byDocumentOrder);
+		});
+		return () => untrack(() => {
+			this.entries = this.entries.filter((candidate) => candidate !== entry);
+			this.#write(this.position);
+		});
+	}
+	listen(listener) {
+		this.#listeners.add(listener);
+		return () => this.#listeners.delete(listener);
+	}
+	mount() {
+		return () => this.#stopZoom();
+	}
+	/** Which deck hears a key is the page's call: Deck passes only keys from focus inside it. */
+	get listening() {
+		return this.options.keyboard !== false;
+	}
+	#write(position) {
+		this.options.index = position.index;
+		this.options.step = position.step;
+	}
+	/** `animate: false` skips the slide transition, for a move the overview zoom already shows. */
+	commit(target, source = "local", animate = true) {
+		if (!target) return;
+		const from = this.position;
+		const to = settle(this.slides, target);
+		if (to.index === from.index && to.step === from.step) return;
+		this.direction = to.index >= from.index ? 1 : -1;
+		const apply = () => this.#write(to);
+		if (animate && to.index !== from.index && this.options.transition) this.options.transition(apply);
+		else apply();
+		for (const listener of this.#listeners) listener(to, source);
+	}
+	next() {
+		this.commit(nextPosition(this.slides, this.position, this.options.loop));
+	}
+	prev() {
+		this.commit(prevPosition(this.slides, this.position, this.options.loop));
+	}
+	go(index, step = 0, source = "local") {
+		this.commit({
+			index,
+			step
+		}, source);
+	}
+	/**
+	* Opening zooms the camera out from the current slide to the whole grid. Closing zooms into
+	* the current slide, so `select` moves there first.
+	*/
+	toggleOverview(force) {
+		const open = force ?? !this.overview;
+		if (open === this.overview) return;
+		const index = this.position.index;
+		if (open) this.cursor = Math.max(0, this.visible.indexOf(index));
+		this.view = open ? "overview" : "slide";
+		this.#stopZoom();
+		const ms = this.options.zoomMs?.() ?? 0;
+		if (ms <= 0 || !this.visible.includes(index)) return;
+		/*
+		* Each way paints its start state first and moves on a later frame. Moved in the same
+		* flush, a style read in between (the overview handing focus back) commits the boxes
+		* before the transition rule is on, and the zoom jumps to its end.
+		*/
+		this.zoom = {
+			index,
+			framed: open,
+			running: !open
+		};
+		this.#frame = requestAnimationFrame(() => {
+			this.#frame = requestAnimationFrame(() => {
+				this.zoom = {
+					index,
+					framed: !open,
+					running: true
+				};
+				this.#timer = setTimeout(() => this.#stopZoom(), ms);
+			});
+		});
+	}
+	/** Leaves the overview on slide `index`. Picking the current slide keeps its step. */
+	select(index) {
+		const keep = index === this.position.index;
+		this.commit({
+			index,
+			step: keep ? this.position.step : 0
+		}, "local", false);
+		this.toggleOverview(false);
+	}
+	#stopZoom() {
+		clearTimeout(this.#timer);
+		cancelAnimationFrame(this.#frame);
+		this.zoom = null;
+	}
+	#moveCursor(to) {
+		this.cursor = clamp(to, 0, this.visible.length - 1);
+	}
+	/**
+	* Runs the deck's own keys. Returns the action it took, or null when the key wasn't its.
+	* `fullscreen` and `presenter` are returned untouched, since they need the page.
+	*/
+	handleKey(event) {
+		if (event.defaultPrevented || !this.listening || event.altKey || event.ctrlKey || event.metaKey) return null;
+		const target = event.target instanceof HTMLElement ? event.target : null;
+		if (target && isEditable(target)) return null;
+		const action = keyAction(event.key, event.shiftKey);
+		if (!action) return null;
+		/* Space and Enter belong to a focused control, not to the deck. */
+		if ((event.key === " " || event.key === "Enter") && target?.closest("button, a, summary")) return null;
+		const handled = this.overview ? this.#overviewKey(action) : this.#slideKey(action);
+		if (!handled) return null;
+		event.preventDefault();
+		return action;
+	}
+	#slideKey(action) {
+		switch (action) {
+			case "next":
+				this.next();
+				return true;
+			case "prev":
+				this.prev();
+				return true;
+			case "first":
+				this.go(this.visible[0] ?? 0);
+				return true;
+			case "last":
+				this.go(this.visible[this.visible.length - 1] ?? 0);
+				return true;
+			case "overview":
+				this.toggleOverview(true);
+				return true;
+			case "fullscreen": return true;
+			case "presenter": return !!this.options.presenter;
+			default: return false;
+		}
+	}
+	#overviewKey(action) {
+		const cols = this.grid.cols;
+		switch (action) {
+			case "next":
+				this.#moveCursor(this.cursor + 1);
+				return true;
+			case "prev":
+				this.#moveCursor(this.cursor - 1);
+				return true;
+			case "down":
+				this.#moveCursor(this.cursor + cols);
+				return true;
+			case "up":
+				this.#moveCursor(this.cursor - cols);
+				return true;
+			case "first":
+				this.#moveCursor(0);
+				return true;
+			case "last":
+				this.#moveCursor(this.visible.length - 1);
+				return true;
+			case "select":
+				this.select(this.visible[this.cursor] ?? this.position.index);
+				return true;
+			case "close":
+			case "overview":
+				this.toggleOverview(false);
+				return true;
+			case "fullscreen": return true;
+			case "presenter": return !!this.options.presenter;
+			default: return false;
+		}
+	}
+}