@riducms/admin 0.2.2 → 0.3.0

package/src/fields/select/select-field.svelte

@@ -1,10 +1,17 @@
 <script lang="ts">
+	import {
+		Combobox,
+		ComboboxInput,
+		ComboboxTrigger,
+		ComboboxPortal,
+		ComboboxViewport,
+		ComboboxContent,
+		ComboboxItem,
+	} from "@admin/components/ui/combobox";
 	import type { SchemaField } from "@riducms/protocol";
 	import { fieldControlARIA } from "@riducms/ui";
 	import XIcon from "~icons/lucide/x";
-
-	import { Button } from "@admin/components/ui/button";
-	import { Select, SelectContent, SelectItem, SelectTrigger } from "@admin/components/ui/select";
+	import ChevronDownIcon from "~icons/lucide/chevron-down";
 	import type { FormController } from "@admin/core/forms/form-controller.svelte";
 	import { getAdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
 	import FieldShell from "@admin/fields/field-shell.svelte";
@@ -13,120 +20,151 @@
 		selectOptionLabel,
 		selectManyValues,
 	} from "@admin/fields/select/select-value";
+	import "@admin/components/ui/combobox/combobox.scss";
 
-	interface Props {
-		field: SchemaField;
-		form: FormController;
-	}
-
-	let { field, form }: Props = $props();
+	let { field, form }: { field: SchemaField; form: FormController } = $props();
 	const runtime = getAdminRuntime();
-	const hasMany = $derived(field.type === "select" && field.select?.hasMany === true);
+	let anchor = $state<HTMLDivElement | null>(null);
+	let open = $state(false);
+	let query = $state("");
+
+	const hasMany = $derived(field.select?.hasMany === true);
 	const value = $derived(String(form.get(field.path) ?? ""));
 	const values = $derived(selectManyValues(form.get(field.path)));
+	const options = $derived(field.select?.options ?? []);
+	const filtered = $derived(
+		options.filter((option) =>
+			option.label
+				.toLocaleLowerCase(runtime.i18n.language)
+				.includes(query.toLocaleLowerCase(runtime.i18n.language))
+		)
+	);
+	const selectedLabel = $derived(options.find((option) => option.value === value)?.label ?? "");
 	const placeholder = $derived(
 		field.admin.placeholder ?? runtime.i18n.t("fields:select", { label: field.admin.label })
 	);
-	const selectedLabel = $derived(
-		field.select?.options.find((option) => option.value === value)?.label ?? placeholder
-	);
-	const selectedLabels = $derived(
-		values.map((selected) => selectOptionLabel(field.select?.options ?? [], selected))
-	);
 	const issues = $derived(form.issuesFor(field.path));
 	const editingBlocked = $derived(field.admin.readOnly === true || form.editingBlocked);
 	const controlARIA = $derived(
 		fieldControlARIA(field.id, field.admin.description !== undefined, issues.length > 0)
 	);
+	const selection = $derived(
+		hasMany
+			? { type: "multiple" as const, value: values, onValueChange: setValues }
+			: { type: "single" as const, value, onValueChange: setValue }
+	);
 
 	$effect(() => form.register(field.path));
 
 	function setValues(next: string[]) {
-		if (editingBlocked) return;
-		form.set(field.path, [...next]);
+		if (!editingBlocked) form.set(field.path, [...next]);
 	}
 
-	function removeValue(selected: string) {
-		if (editingBlocked) return;
-		form.set(field.path, removeSelectValue(values, selected));
+	function setValue(next: string) {
+		if (!editingBlocked) form.set(field.path, next);
 	}
 </script>
 
 <FieldShell {field} {issues}>
-	{#if hasMany}
-		<Select type="multiple" value={values} onValueChange={setValues} disabled={editingBlocked}>
-			<SelectTrigger
-				id={field.id}
-				class="w-full"
-				{...controlARIA}
-				aria-required={field.required}
-				aria-label={field.admin.label}
-			>
-				<span class={values.length === 0 ? "text-foreground-placeholder" : "truncate"}>
-					{values.length === 0 ? placeholder : runtime.i18n.formatList(selectedLabels)}
-				</span>
-			</SelectTrigger>
-			<SelectContent>
-				{#each field.select?.options ?? [] as option (option.value)}
-					<SelectItem value={option.value} label={option.label} />
-				{/each}
-			</SelectContent>
-		</Select>
-		{#if values.length > 0}
-			<ul
-				class="mt-2 flex flex-wrap gap-1.5"
-				aria-label={runtime.i18n.t("general:selected", { count: values.length })}
-			>
-				{#each values as selected, index (`${selected}:${index}`)}
-					<li
-						class="inline-flex max-w-full items-center gap-1 rounded-[3px] border border-control-border bg-background py-0.5 pe-0.5 ps-2 text-[12px] text-foreground-muted"
-					>
-						<span class="max-w-64 truncate">
-							{selectOptionLabel(field.select?.options ?? [], selected)}
-						</span>
-						{#if !field.admin.readOnly}
-							<Button
-								variant="ghost"
-								size="icon-xs"
-								disabled={editingBlocked}
-								onclick={() => removeValue(selected)}
-								aria-label={runtime.i18n.t("fields:remove", {
-									label: selectOptionLabel(field.select?.options ?? [], selected),
-								})}
-							>
-								<XIcon class="size-3" aria-hidden="true" />
-							</Button>
-						{/if}
-					</li>
-				{/each}
-			</ul>
-		{/if}
-	{:else}
-		<Select
-			type="single"
-			{value}
-			allowDeselect={!field.required}
-			onValueChange={(next) => {
-				if (!editingBlocked) form.set(field.path, next);
-			}}
+	<!-- The combobox must restart when a retained field switches between single and multiple. -->
+	{#key hasMany}
+		<Combobox
+			{...selection}
+			allowDeselect={false}
+			items={options}
 			disabled={editingBlocked}
+			bind:open={
+				() => open,
+				(next) => {
+					open = next;
+					if (!next) query = "";
+				}
+			}
+			inputValue={open || hasMany ? query : selectedLabel}
 		>
-			<SelectTrigger
-				id={field.id}
-				class="w-full"
-				{...controlARIA}
-				aria-required={field.required}
-				aria-label={field.admin.label}
+			<div
+				bind:this={anchor}
+				class="ridu-combobox"
+				aria-invalid={issues.length > 0}
+				data-disabled={editingBlocked}
 			>
-				<span class={value === "" ? "text-foreground-placeholder" : undefined}>
-					{selectedLabel}
-				</span>
-			</SelectTrigger>
-			<SelectContent>
-				{#each field.select?.options ?? [] as option (option.value)}
-					<SelectItem value={option.value} label={option.label} />
-				{/each}
-			</SelectContent>
-		</Select>
-	{/if}
+				<div class="ridu-combobox-value">
+					{#if hasMany}
+						{#each values as selected (selected)}
+							<span class="ridu-combobox-tag">
+								{selectOptionLabel(options, selected)}
+								<button
+									type="button"
+									class="ridu-combobox-icon"
+									disabled={editingBlocked}
+									aria-label={runtime.i18n.t("fields:remove", {
+										label: selectOptionLabel(options, selected),
+									})}
+									onclick={() => setValues(removeSelectValue(values, selected))}
+								>
+									<XIcon />
+								</button>
+							</span>
+						{/each}
+					{/if}
+					<ComboboxInput
+						id={field.id}
+						class="ridu-combobox-input"
+						autocomplete="off"
+						autocorrect="off"
+						autocapitalize="none"
+						spellcheck={false}
+						{placeholder}
+						{...controlARIA}
+						aria-label={field.admin.label}
+						aria-required={field.required}
+						clearOnDeselect
+						onpointerdown={() => (open = true)}
+						oninput={(event) => {
+							query = event.currentTarget.value;
+							open = true;
+						}}
+					/>
+				</div>
+				{#if !hasMany && value}
+					<button
+						type="button"
+						class="ridu-combobox-icon"
+						disabled={editingBlocked}
+						aria-label={runtime.i18n.t("general:clearSelection")}
+						onclick={() => setValue("")}
+					>
+						<XIcon />
+					</button>
+				{/if}
+				<ComboboxTrigger
+					type="button"
+					class="ridu-combobox-icon ridu-combobox-trigger"
+					aria-label={placeholder}
+				>
+					<ChevronDownIcon />
+				</ComboboxTrigger>
+			</div>
+			<ComboboxPortal>
+				<ComboboxContent
+					customAnchor={anchor}
+					sideOffset={0}
+					align="start"
+					class="ridu-combobox-popup"
+				>
+					<ComboboxViewport>
+						{#each filtered as option (option.value)}
+							<ComboboxItem value={option.value} label={option.label} class="ridu-combobox-option">
+								{option.label}
+							</ComboboxItem>
+						{:else}
+							<p class="ridu-combobox-message">
+								{runtime.i18n.t("fields:noMatch", { label: field.admin.label })}
+							</p>
+						{/each}
+					</ComboboxViewport>
+				</ComboboxContent>
+			</ComboboxPortal>
+		</Combobox>
+	{/key}
 </FieldShell>

package/src/fields/text/slug-field.scss

@@ -0,0 +1,28 @@
+@use "@riducms/ui/styles.scss";
+
+@layer ridu.components {
+	.ridu-slug-field {
+		display: flex;
+		align-items: center;
+		flex-wrap: wrap;
+		gap: 4px 8px;
+		min-width: 0;
+	}
+
+	.ridu-slug-field__input {
+		min-width: 0;
+		flex: 1 1 18rem;
+		font-family: var(--font-mono);
+	}
+
+	.ridu-slug-field__actions {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		flex: 0 0 max-content;
+		flex-wrap: wrap;
+		gap: 4px;
+		max-width: 100%;
+		margin-inline-start: auto;
+	}
+}

package/src/fields/text/slug-field.svelte

@@ -1,10 +1,8 @@
 <script lang="ts">
 	import type { SchemaField } from "@riducms/protocol";
-	import { fieldControlARIA } from "@riducms/ui";
+	import { fieldControlARIA, Button, Input } from "@riducms/ui";
 	import { untrack } from "svelte";
 
-	import { Button } from "@admin/components/ui/button";
-	import { Input } from "@admin/components/ui/input";
 	import type {
 		DerivedTextBinding,
 		FormController,
@@ -12,6 +10,7 @@
 	import { getAdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
 	import FieldShell from "@admin/fields/field-shell.svelte";
 	import { normalizeSlug, slugFollowsSource } from "@admin/fields/text/slug";
+	import "@admin/fields/text/slug-field.scss";
 
 	interface Props {
 		field: SchemaField;
@@ -27,21 +26,26 @@
 		fieldControlARIA(field.id, field.admin.description !== undefined, issues.length > 0)
 	);
 	let locked = $state(true);
-	let binding = $state<DerivedTextBinding>();
+	let binding: DerivedTextBinding | undefined;
 
 	$effect(() => {
 		form.revision;
 		const sourcePath = field.text?.slug?.sourcePath;
 		const fieldPath = field.path;
 		if (sourcePath === undefined) return;
-		return untrack(() => {
-			binding = form.bindDerivedText(
-				fieldPath,
-				sourcePath,
-				(source) => normalizeSlug(String(source ?? "")),
-				(current, source) => String(current ?? "") === "" || slugFollowsSource(current, source)
-			);
-		});
+		// Only the initialization snapshot is excluded: later changes are observed by
+		// FormController, while form.revision above owns reset/rebind synchronization.
+		const initial = untrack(() => ({
+			current: form.get(fieldPath),
+			source: form.get(sourcePath),
+		}));
+		binding = form.bindDerivedText(
+			fieldPath,
+			sourcePath,
+			(source) => normalizeSlug(String(source ?? "")),
+			(current, source) => String(current ?? "") === "" || slugFollowsSource(current, source),
+			initial
+		);
 	});
 
 	function generate() {
@@ -60,7 +64,7 @@
 </script>
 
 <FieldShell {field} {issues}>
-	<div class="flex items-center gap-2">
+	<div class="ridu-slug-field">
 		<Input
 			id={field.id}
 			name={field.path}
@@ -70,13 +74,13 @@
 			placeholder={field.admin.placeholder}
 			{...controlARIA}
 			readonly={editingBlocked || locked}
-			class="min-w-0 flex-1 font-mono"
+			class="ridu-slug-field__input"
 			{value}
 			oninput={(event) => setManualValue(event.currentTarget.value)}
 			onblur={normalizeManualValue}
 		/>
 		{#if !field.admin.readOnly}
-			<div class="flex shrink-0 items-center gap-1">
+			<div class="ridu-slug-field__actions">
 				{#if !locked}
 					<Button
 						type="button"

package/src/fields/text/text-field.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
 	import type { SchemaField } from "@riducms/protocol";
-	import { fieldControlARIA } from "@riducms/ui";
+	import { fieldControlARIA, Input } from "@riducms/ui";
 
-	import { Input } from "@admin/components/ui/input";
 	import type { FormController } from "@admin/core/forms/form-controller.svelte";
 	import FieldShell from "@admin/fields/field-shell.svelte";
 	import SlugField from "@admin/fields/text/slug-field.svelte";

package/src/fields/ui/ui-field.svelte

@@ -1,12 +1,15 @@
 <script lang="ts">
 	import type { SchemaField } from "@riducms/protocol";
+	import "@admin/fields/field-layout.scss";
 
 	let { field }: { field: SchemaField } = $props();
 </script>
 
-<aside class="border-s-2 border-control-border py-0.5 ps-3" data-ui-field={field.name}>
-	<p class="text-[13px] font-medium text-foreground">{field.admin.label}</p>
-	{#if field.admin.description}<p class="mt-1 text-[12.5px] leading-5 text-foreground-muted">
+<aside class="ridu-ui-field" data-ui-field={field.name}>
+	<p class="ridu-ui-field__title">{field.admin.label}</p>
+	{#if field.admin.description}
+		<p class="ridu-ui-field__description">
 			{field.admin.description}
-		</p>{/if}
+		</p>
+	{/if}
 </aside>

package/src/fields/virtual/virtual-field.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import "@admin/fields/field-layout.scss";
 	import type { SchemaField } from "@riducms/protocol";
 
 	import type { FormController } from "@admin/core/forms/form-controller.svelte";
@@ -18,11 +19,7 @@
 </script>
 
 <FieldShell {field} issues={[]}>
-	<output
-		id={field.id}
-		class="block min-h-10 whitespace-pre-wrap rounded-[3px] border border-control-border-disabled bg-control-disabled px-3 py-2.5 text-[13px] leading-5 text-foreground-label"
-		data-virtual-field={field.name}
-	>
+	<output id={field.id} class="ridu-virtual-field" data-virtual-field={field.name}>
 		{formatted}
 	</output>
 </FieldShell>

package/src/index.ts

@@ -1,5 +1,4 @@
-import "@fontsource-variable/geist/wght.css";
-import "@fontsource-variable/spline-sans-mono/wght.css";
+import "@riducms/ui/theme.css";
 import "uno.css";
 import "@admin/app.css";
 

package/src/routing.ts

@@ -0,0 +1,2 @@
+/** Public router-aware primitives for application-owned admin navigation. */
+export { Link, type LinkProps } from "@hvniel/svelte-router";

package/src/app/deferred-redirect.svelte

@@ -1,23 +0,0 @@
-<script lang="ts">
-	import { useNavigate } from "@hvniel/svelte-router";
-
-	interface Props {
-		to: string;
-		replace?: boolean;
-	}
-
-	let { to, replace = false }: Props = $props();
-	const navigate = useNavigate();
-
-	$effect(() => {
-		let active = true;
-		// The router activates useNavigate in a parent effect. Deferring one
-		// microtask prevents a mounted redirect from racing that activation.
-		queueMicrotask(() => {
-			if (active) navigate(to, { replace });
-		});
-		return () => {
-			active = false;
-		};
-	});
-</script>

package/src/components/code-block/code-block.svelte

@@ -1,107 +0,0 @@
-<script lang="ts">
-	import Prism from "prismjs";
-	import "prismjs/components/prism-bash";
-	import "prismjs/components/prism-javascript";
-	import "prismjs/components/prism-json";
-	import { getAdminI18n } from "@riducms/plugin";
-
-	let {
-		value,
-		language = "javascript",
-		class: className = "",
-	}: {
-		value: string;
-		language?: "javascript" | "bash" | "json";
-		class?: string;
-	} = $props();
-	const i18n = getAdminI18n();
-
-	const normalized = $derived(normalize(value));
-	const highlighted = $derived(
-		Prism.highlight(normalized, Prism.languages[language] ?? Prism.languages.javascript, language)
-	);
-
-	function normalize(source: string) {
-		const lines = source.replaceAll("\t", "  ").split("\n");
-		while (lines[0]?.trim() === "") lines.shift();
-		while (lines.at(-1)?.trim() === "") lines.pop();
-		const indentation = lines
-			.filter((line) => line.trim() !== "")
-			.map((line) => line.match(/^\s*/)?.[0].length ?? 0);
-		const minimum = indentation.length === 0 ? 0 : Math.min(...indentation);
-		return lines.map((line) => line.slice(minimum)).join("\n");
-	}
-</script>
-
-<!-- Keyboard focus lets users scroll long examples without a pointer. -->
-<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-<pre
-	class={[
-		"overflow-x-auto bg-background p-4 font-mono text-[11.5px] leading-6 text-foreground-muted selection:bg-primary/25",
-		className,
-	]}
-	tabindex="0"
-	role="region"
-	aria-label={i18n.t("general:codeExample")}><code
-		class={`language-${language}`}>{@html highlighted}</code></pre>
-
-<style>
-	:global(.token.comment),
-	:global(.token.prolog),
-	:global(.token.doctype),
-	:global(.token.cdata) {
-		color: color-mix(in srgb, var(--foreground) 42%, transparent);
-		font-style: italic;
-	}
-
-	:global(.token.punctuation) {
-		color: color-mix(in srgb, var(--foreground) 62%, transparent);
-	}
-
-	:global(.token.property),
-	:global(.token.tag),
-	:global(.token.constant),
-	:global(.token.symbol),
-	:global(.token.deleted) {
-		color: var(--syntax-property);
-	}
-
-	:global(.token.boolean),
-	:global(.token.number) {
-		color: var(--syntax-number);
-	}
-
-	:global(.token.selector),
-	:global(.token.attr-name),
-	:global(.token.string),
-	:global(.token.char),
-	:global(.token.builtin),
-	:global(.token.inserted) {
-		color: var(--syntax-string);
-	}
-
-	:global(.token.operator),
-	:global(.token.entity),
-	:global(.token.url),
-	:global(.language-css .token.string),
-	:global(.style .token.string) {
-		color: var(--syntax-operator);
-	}
-
-	:global(.token.atrule),
-	:global(.token.attr-value),
-	:global(.token.keyword) {
-		color: var(--syntax-keyword);
-	}
-
-	:global(.token.function),
-	:global(.token.class-name) {
-		color: var(--syntax-function);
-	}
-
-	:global(.token.regex),
-	:global(.token.important),
-	:global(.token.variable) {
-		color: var(--syntax-variable);
-	}
-</style>

package/src/components/ui/bulk-action-bar/bulk-action-bar.svelte

@@ -1,50 +0,0 @@
-<script lang="ts">
-	import XIcon from "~icons/lucide/x";
-	import type { Snippet } from "svelte";
-	import { getAdminI18n } from "@riducms/plugin";
-
-	import { Button } from "@admin/components/ui/button";
-
-	let {
-		count,
-		onClear,
-		label,
-		selectionLabel,
-		clearLabel,
-		children,
-	}: {
-		count: number;
-		onClear: () => void;
-		label?: string;
-		selectionLabel?: string;
-		clearLabel?: string;
-		children?: Snippet;
-	} = $props();
-	const i18n = getAdminI18n();
-	const resolvedLabel = $derived(label ?? i18n.t("general:bulkActions"));
-	const resolvedSelectionLabel = $derived(selectionLabel ?? i18n.t("general:selected", { count }));
-	const resolvedClearLabel = $derived(clearLabel ?? i18n.t("general:clearSelection"));
-</script>
-
-{#if count > 0}
-	<div
-		data-slot="bulk-action-bar"
-		class="ridu-popover-enter fixed bottom-6 left-1/2 z-40 flex max-w-[calc(100vw-2rem)] -translate-x-1/2 items-center gap-2 rounded-[4px] border border-control-border bg-popover px-3 py-2 text-popover-foreground shadow-[var(--shadow-popover)]"
-		role="region"
-		aria-label={resolvedLabel}
-	>
-		<span
-			class="whitespace-nowrap px-2 text-[13.5px] font-medium text-foreground"
-			role="status"
-			aria-live="polite"
-			aria-atomic="true"
-		>
-			{resolvedSelectionLabel}
-		</span>
-		<span class="h-5 w-px bg-control-border" aria-hidden="true"></span>
-		{@render children?.()}
-		<Button variant="ghost" size="icon-sm" onclick={onClear} aria-label={resolvedClearLabel}>
-			<XIcon class="size-3.5" />
-		</Button>
-	</div>
-{/if}

package/src/components/ui/bulk-action-bar/index.ts

@@ -1 +0,0 @@
-export { default as BulkActionBar } from "@admin/components/ui/bulk-action-bar/bulk-action-bar.svelte";

package/src/components/ui/button/index.ts

@@ -1,8 +0,0 @@
-export {
-	Button,
-	buttonVariants,
-	type ButtonProps,
-	type ButtonSize,
-	type ButtonVariant,
-	type ButtonProps as Props,
-} from "@riducms/ui";