@heyramzi/ui 2.24.0 → 3.1.0

package/src/editor/image-toolbar.svelte

@@ -9,14 +9,14 @@
 	// =========================
 	interface Props {
 		pos: { top: number; left: number };
-		onalign: (align: "left" | "center" | "right") => void;
-		ondelete: () => void;
+		onAlign: (align: "left" | "center" | "right") => void;
+		onDelete: () => void;
 	}
 
 	// =========================
 	// PROPS
 	// =========================
-	let { pos, onalign, ondelete }: Props = $props();
+	let { pos, onAlign, onDelete }: Props = $props();
 </script>
 
 <!-- =========================== -->
@@ -27,34 +27,34 @@
 		type="button"
 		class="image-toolbar-btn"
 		title="Align left"
-		onclick={() => onalign("left")}
+		onclick={() => onAlign("left")}
 	>
-		<TextAlignLeft size={14} />
+		<TextAlignLeft aria-hidden="true" size={14} />
 	</button>
 	<button
 		type="button"
 		class="image-toolbar-btn"
 		title="Align center"
-		onclick={() => onalign("center")}
+		onclick={() => onAlign("center")}
 	>
-		<TextAlignCenter size={14} />
+		<TextAlignCenter aria-hidden="true" size={14} />
 	</button>
 	<button
 		type="button"
 		class="image-toolbar-btn"
 		title="Align right"
-		onclick={() => onalign("right")}
+		onclick={() => onAlign("right")}
 	>
-		<TextAlignRight size={14} />
+		<TextAlignRight aria-hidden="true" size={14} />
 	</button>
 	<div class="image-toolbar-divider"></div>
 	<button
 		type="button"
 		class="image-toolbar-btn destructive"
 		title="Delete image"
-		onclick={ondelete}
+		onclick={onDelete}
 	>
-		<Trash size={14} />
+		<Trash aria-hidden="true" size={14} />
 	</button>
 </div>
 
@@ -62,60 +62,76 @@
 <!-- STYLE -->
 <!-- =========================== -->
 <style>
-	/* ---- IMAGE TOOLBAR ---- */
-	.image-toolbar {
-		position: absolute;
-		z-index: 40;
-		display: flex;
-		align-items: center;
-		gap: 1px;
-		padding: 3px;
-		background: var(--color-popover);
-		border: 1px solid var(--color-border);
-		border-radius: var(--radius-lg);
-		box-shadow: var(--elev-raised);
-		animation: slash-enter var(--duration-fast) var(--ease-out);
-	}
+	@layer theme, base, components, utilities;
 
-	.image-toolbar-btn {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		width: 1.75rem;
-		height: 1.75rem;
-		border: none;
-		border-radius: var(--radius-sm);
-		background: transparent;
-		color: var(--color-muted-foreground);
-		cursor: pointer;
-		transition:
-			opacity var(--duration-quick) var(--ease-smooth-out),
-			transform var(--duration-quick) var(--ease-smooth-out);
-	}
+	@layer components {
+		/* ---- IMAGE TOOLBAR ---- */
+		.image-toolbar {
+			position: absolute;
+			z-index: 40;
+			display: flex;
+			align-items: center;
+			gap: 1px;
+			padding: 3px;
+			background: var(--color-popover);
+			border: 1px solid var(--color-border);
+			border-radius: var(--radius-lg);
+			box-shadow: var(--elev-raised);
+			animation: slash-enter var(--duration-fast) var(--ease-out);
+		}
 
-	@media (hover: hover) and (pointer: fine) {
-		.image-toolbar-btn:hover {
-			background: var(--color-accent);
-			color: var(--color-foreground);
+		.image-toolbar-btn {
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			width: 1.75rem;
+			height: 1.75rem;
+			border: none;
+			border-radius: var(--radius-sm);
+			background: transparent;
+			color: var(--color-muted-foreground);
+			cursor: pointer;
+			transition:
+				opacity var(--duration-quick) var(--ease-smooth-out),
+				transform var(--duration-quick) var(--ease-smooth-out);
 		}
 
-		.image-toolbar-btn.destructive:hover {
-			background: oklch(from var(--color-error) l c h / 0.1);
-			color: var(--color-error);
+		@media (hover: hover) and (pointer: fine) {
+			.image-toolbar-btn:hover {
+				background: var(--color-accent);
+				color: var(--color-foreground);
+			}
+
+			.image-toolbar-btn.destructive:hover {
+				background: oklch(from var(--color-error) l c h / 0.1);
+				color: var(--color-error);
+			}
 		}
-	}
 
-	.image-toolbar-divider {
-		width: 1px;
-		height: 1rem;
-		background: var(--color-border);
-		margin: 0 2px;
-		opacity: 0.6;
+		.image-toolbar-divider {
+			width: 1px;
+			height: 1rem;
+			background: var(--color-border);
+			margin: 0 2px;
+			opacity: 0.6;
+		}
+
+		@media (prefers-reduced-motion: reduce) {
+			.image-toolbar {
+				animation: none;
+			}
+		}
 	}
 
-	@media (prefers-reduced-motion: reduce) {
-		.image-toolbar {
-			animation: none;
+	/* Svelte scopes keyframes per component, so slash-menu's copy never reached this toolbar. */
+	@keyframes slash-enter {
+		from {
+			opacity: 0;
+			transform: translateY(-3px) scale(0.98);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0) scale(1);
 		}
 	}
 </style>

package/src/editor/image-toolbar.svelte.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    pos: {
+        top: number;
+        left: number;
+    };
+    onAlign: (align: "left" | "center" | "right") => void;
+    onDelete: () => void;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/editor/inline-editor.svelte

@@ -55,11 +55,13 @@
 		selectAll?: boolean;
 		/** Opens with the text replaced by these characters and the caret after them. */
 		seed?: string;
-		onchange: (doc: InlineDoc) => void;
-		onexit: () => void;
-		onlink?: () => void;
-		onstate?: () => void;
-		onready?: (api: InlineEditorApi) => void;
+		onDocChange: (doc: InlineDoc) => void;
+		onExit: () => void;
+		onLink?: () => void;
+		onState?: () => void;
+		onReady?: (api: InlineEditorApi) => void;
+		/** The editable region's accessible name. */
+		label?: string;
 	}
 
 	// =========================
@@ -73,11 +75,12 @@
 		at,
 		selectAll = false,
 		seed,
-		onchange,
-		onexit,
-		onlink,
-		onstate,
-		onready,
+		onDocChange,
+		onExit,
+		onLink,
+		onState,
+		onReady,
+		label = "Text editor",
 	}: Props = $props();
 
 	// =========================
@@ -141,6 +144,9 @@
 				const paint = () => {
 					li.dataset.checked = String(current.attrs.checked);
 					input.checked = current.attrs.checked === true;
+					// The rich editor's library TaskItem names its box with the same words.
+					const text = current.textContent || "empty task item";
+					input.setAttribute("aria-label", `Task item checkbox for ${text}`);
 				};
 				paint();
 				input.addEventListener("change", () => {
@@ -185,11 +191,11 @@
 				return {
 					"Mod-Shift-x": () => this.editor.commands.toggleStrike(),
 					"Mod-k": () => {
-						onlink?.();
+						onLink?.();
 						return true;
 					},
 					Escape: () => {
-						onexit();
+						onExit();
 						return true;
 					},
 					// Lists stay flat: the stored text has no nesting, so Tab does nothing.
@@ -236,7 +242,12 @@
 				keys,
 			],
 			editorProps: {
-				attributes: { class: `rich-text ${klass}`, role: "textbox", "aria-multiline": "true" },
+				attributes: () => ({
+					class: `rich-text ${klass}`,
+					role: "textbox",
+					"aria-multiline": "true",
+					"aria-label": label,
+				}),
 				handleKeyDown: (_view, event) => {
 					// Every key typed here is the field's. Only save leaves, so no canvas shortcut fires while typing.
 					if (!((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "s"))
@@ -253,9 +264,9 @@
 				},
 			},
 			onUpdate: ({ editor: ed, transaction }) => {
-				if (transaction.docChanged) onchange(ed.getJSON());
+				if (transaction.docChanged) onDocChange(ed.getJSON());
 			},
-			onTransaction: () => onstate?.(),
+			onTransaction: () => onState?.(),
 		});
 
 		const hit = at ? editor.view.posAtCoords({ left: at.x, top: at.y }) : null;
@@ -264,7 +275,7 @@
 		else if (hit) editor.chain().setTextSelection(hit.pos).focus().run();
 		else editor.commands.focus("end");
 
-		onready?.({
+		onReady?.({
 			toggle: (command) => {
 				if (
 					marksOnly &&

package/src/editor/inline-editor.svelte.d.ts

@@ -0,0 +1,40 @@
+export type InlineDoc = Record<string, unknown>;
+export type InlineCommand = "bold" | "italic" | "strike" | "bulletList" | "orderedList" | "taskList";
+export type InlineEditorApi = {
+    toggle: (command: InlineCommand) => void;
+    setLink: (href: string | null) => void;
+    isActive: (name: string) => boolean;
+    linkHref: () => string;
+    hasSelection: () => boolean;
+    /** Types at the caret, replacing any selection. */
+    insertText: (text: string) => void;
+    setDoc: (doc: InlineDoc) => void;
+    getDoc: () => InlineDoc;
+    focus: () => void;
+};
+interface Props {
+    doc: InlineDoc;
+    placeholder?: string;
+    class?: string;
+    /** Marks only: bold, italic, strike, code and link. No lists, so a table cell stays a line of words. */
+    inline?: boolean;
+    /** Where the click landed, so the caret opens there. Without it the caret goes to the end. */
+    at?: {
+        x: number;
+        y: number;
+    };
+    /** Opens with all the text selected, so the first key replaces it. */
+    selectAll?: boolean;
+    /** Opens with the text replaced by these characters and the caret after them. */
+    seed?: string;
+    onDocChange: (doc: InlineDoc) => void;
+    onExit: () => void;
+    onLink?: () => void;
+    onState?: () => void;
+    onReady?: (api: InlineEditorApi) => void;
+    /** The editable region's accessible name. */
+    label?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/editor/renderer.svelte.d.ts

@@ -0,0 +1,11 @@
+import "./content.css";
+interface Props {
+    content: Record<string, unknown>;
+    /** Optional URL prefix to rewrite in rendered HTML (e.g. storage CDN -> local proxy). */
+    storagePrefix?: string;
+    /** Replacement path for storagePrefix rewrites. */
+    storageReplacement?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/editor/slash-menu.svelte

@@ -8,36 +8,47 @@
 	// TYPES
 	// =========================
 	interface Props {
+		/** The listbox id. Option `i` is `${id}-${i}`, which the text points at while it's highlighted. */
+		id: string;
 		items: SlashItem[];
 		pos: { top: number; left: number };
 		selectedIndex: number;
 		/** The menu element, so the parent can close it on an outside click. */
 		el?: HTMLDivElement;
-		onselect: (item: SlashItem) => void;
+		onSelect: (item: SlashItem) => void;
 	}
 
 	// =========================
 	// PROPS
 	// =========================
-	let { items, pos, selectedIndex = $bindable(), el = $bindable(), onselect }: Props = $props();
+	let { id, items, pos, selectedIndex = $bindable(), el = $bindable(), onSelect }: Props = $props();
 </script>
 
 <!-- =========================== -->
 <!-- MARKUP -->
 <!-- =========================== -->
-<div bind:this={el} class="slash-menu" style="top: {pos.top}px; left: {pos.left}px;" role="listbox">
+<div
+	bind:this={el}
+	{id}
+	class="slash-menu"
+	style="top: {pos.top}px; left: {pos.left}px;"
+	role="listbox"
+	aria-label="Commands"
+>
 	{#each items as item, i}
 		<button
+			id="{id}-{i}"
+			tabindex="-1"
 			type="button"
 			class="slash-item"
 			class:selected={i === selectedIndex}
-			onclick={() => onselect(item)}
+			onclick={() => onSelect(item)}
 			onpointerenter={() => (selectedIndex = i)}
 			role="option"
 			aria-selected={i === selectedIndex}
 		>
 			<span class="slash-icon">
-				<item.icon size={18} />
+				<item.icon aria-hidden="true" size={18} />
 			</span>
 			<span class="slash-text">
 				<span class="slash-label">{item.label}</span>
@@ -51,106 +62,110 @@
 <!-- STYLE -->
 <!-- =========================== -->
 <style>
-	/* ---- SLASH COMMAND MENU ---- */
-	.slash-menu {
-		position: absolute;
-		z-index: 50;
-		min-width: 260px;
-		max-height: 340px;
-		overflow-y: auto;
-		padding: 6px;
-		background: var(--color-popover);
-		border: 1px solid var(--color-border);
-		border-radius: var(--radius-xl);
-		box-shadow: var(--elev-overlay);
-		animation: slash-enter var(--duration-fast) var(--ease-out);
-	}
+	@layer theme, base, components, utilities;
 
-	@keyframes slash-enter {
-		from {
-			opacity: 0;
-			transform: translateY(-3px) scale(0.98);
-		}
-		to {
-			opacity: 1;
-			transform: translateY(0) scale(1);
+	@layer components {
+		/* ---- SLASH COMMAND MENU ---- */
+		.slash-menu {
+			position: absolute;
+			z-index: 50;
+			min-width: 260px;
+			max-height: 340px;
+			overflow-y: auto;
+			padding: 6px;
+			background: var(--color-popover);
+			border: 1px solid var(--color-border);
+			border-radius: var(--radius-xl);
+			box-shadow: var(--elev-overlay);
+			animation: slash-enter var(--duration-fast) var(--ease-out);
 		}
-	}
-
-	.slash-item {
-		display: flex;
-		align-items: center;
-		gap: 0.75rem;
-		width: 100%;
-		padding: 0.5rem 0.625rem;
-		border: none;
-		border-radius: var(--radius-md);
-		background: transparent;
-		color: var(--color-foreground);
-		cursor: pointer;
-		text-align: left;
-		transition: background-color var(--duration-micro) var(--ease-smooth-out);
-	}
 
-	.slash-item.selected {
-		background: var(--color-accent);
-	}
+		.slash-item {
+			display: flex;
+			align-items: center;
+			gap: 0.75rem;
+			width: 100%;
+			padding: 0.5rem 0.625rem;
+			border: none;
+			border-radius: var(--radius-md);
+			background: transparent;
+			color: var(--color-foreground);
+			cursor: pointer;
+			text-align: left;
+			transition: background-color var(--duration-micro) var(--ease-smooth-out);
+		}
 
-	@media (hover: hover) and (pointer: fine) {
-		.slash-item:hover {
+		.slash-item.selected {
 			background: var(--color-accent);
 		}
-	}
 
-	.slash-icon {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 2rem;
-		height: 2rem;
-		border-radius: var(--radius-sm);
-		background: var(--color-muted);
-		color: var(--color-muted-foreground);
-		flex-shrink: 0;
-		transition:
-			background-color var(--duration-micro) var(--ease-smooth-out),
-			color var(--duration-micro) var(--ease-smooth-out);
-	}
+		@media (hover: hover) and (pointer: fine) {
+			.slash-item:hover {
+				background: var(--color-accent);
+			}
+		}
 
-	.slash-item.selected .slash-icon {
-		background: oklch(from var(--color-brand) l c h / 0.1);
-		color: var(--color-brand);
-	}
+		.slash-icon {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: 2rem;
+			height: 2rem;
+			border-radius: var(--radius-sm);
+			background: var(--color-muted);
+			color: var(--color-muted-foreground);
+			flex-shrink: 0;
+			transition:
+				background-color var(--duration-micro) var(--ease-smooth-out),
+				color var(--duration-micro) var(--ease-smooth-out);
+		}
 
-	@media (hover: hover) and (pointer: fine) {
-		.slash-item:hover .slash-icon {
+		.slash-item.selected .slash-icon {
 			background: oklch(from var(--color-brand) l c h / 0.1);
 			color: var(--color-brand);
 		}
-	}
 
-	.slash-text {
-		display: flex;
-		flex-direction: column;
-		gap: 0;
-		min-width: 0;
-	}
+		@media (hover: hover) and (pointer: fine) {
+			.slash-item:hover .slash-icon {
+				background: oklch(from var(--color-brand) l c h / 0.1);
+				color: var(--color-brand);
+			}
+		}
 
-	.slash-label {
-		font-size: 0.8125rem;
-		font-weight: 500;
-		line-height: 1.3;
-	}
+		.slash-text {
+			display: flex;
+			flex-direction: column;
+			gap: 0;
+			min-width: 0;
+		}
 
-	.slash-desc {
-		font-size: 0.6875rem;
-		color: var(--color-muted-foreground);
-		line-height: 1.3;
+		.slash-label {
+			font-size: 0.8125rem;
+			font-weight: 500;
+			line-height: 1.3;
+		}
+
+		.slash-desc {
+			font-size: 0.6875rem;
+			color: var(--color-muted-foreground);
+			line-height: 1.3;
+		}
+
+		@media (prefers-reduced-motion: reduce) {
+			.slash-menu {
+				animation: none;
+			}
+		}
 	}
 
-	@media (prefers-reduced-motion: reduce) {
-		.slash-menu {
-			animation: none;
+	@keyframes slash-enter {
+		from {
+			opacity: 0;
+			transform: translateY(-3px) scale(0.98);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0) scale(1);
 		}
 	}
 </style>

package/src/editor/slash-menu.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { SlashItem } from "./slash-items.js";
+interface Props {
+    /** The listbox id. Option `i` is `${id}-${i}`, which the text points at while it's highlighted. */
+    id: string;
+    items: SlashItem[];
+    pos: {
+        top: number;
+        left: number;
+    };
+    selectedIndex: number;
+    /** The menu element, so the parent can close it on an outside click. */
+    el?: HTMLDivElement;
+    onSelect: (item: SlashItem) => void;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "selectedIndex" | "el">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/effects/animated-beam/AnimatedBeam.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { AnimatedBeamProps } from "./types.js";
+declare const $$Component: import("svelte").Component<AnimatedBeamProps, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/effects/animated-beam/diagrams/BeamSvg.svelte.d.ts

@@ -0,0 +1,22 @@
+interface Props {
+    id: string;
+    class?: string;
+    width: number;
+    height: number;
+    pathD: string;
+    pathColor: string;
+    pathWidth: number;
+    pathOpacity: number;
+    motionOK: boolean;
+    coords: {
+        x1: string;
+        x2: string;
+    };
+    duration: number;
+    delay: number;
+    gradientStartColor: string;
+    gradientStopColor: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/effects/border-beam/BorderBeam.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { BorderBeamProps } from "./types.js";
+declare const $$Component: import("svelte").Component<BorderBeamProps, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/effects/border-beam/index.ts

@@ -0,0 +1,10 @@
+export { default as BorderBeam } from "./BorderBeam.svelte";
+export type { BorderBeamProps } from "./types.js";
+export type {
+  BorderBeamColorVariant,
+  BorderBeamSize,
+  BorderBeamTheme,
+  SizeConfig,
+  ThemeColors,
+} from "./presets.js";
+export { sizePresets, sizeThemePresets, themeColors } from "./presets.js";