@riducms/admin 0.1.0

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

@@ -0,0 +1,132 @@
+<script lang="ts">
+	import type { SchemaField } from "@riducms/protocol";
+	import XIcon from "~icons/lucide/x";
+
+	import { Button } from "@admin/components/ui/button";
+	import { Select, SelectContent, SelectItem, SelectTrigger } from "@admin/components/ui/select";
+	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";
+	import {
+		removeSelectValue,
+		selectChoiceLabel,
+		selectManyValues,
+	} from "@admin/fields/select/select-value";
+
+	interface Props {
+		field: SchemaField;
+		form: FormController;
+	}
+
+	let { field, form }: Props = $props();
+	const runtime = getAdminRuntime();
+	const hasMany = $derived(field.type === "select" && field.select?.hasMany === true);
+	const value = $derived(String(form.get(field.path) ?? ""));
+	const values = $derived(selectManyValues(form.get(field.path)));
+	const placeholder = $derived(
+		field.admin.placeholder ?? runtime.i18n.t("fields:select", { label: field.admin.label })
+	);
+	const selectedLabel = $derived(
+		field.select?.choices.find((choice) => choice.value === value)?.label ?? placeholder
+	);
+	const selectedLabels = $derived(
+		values.map((selected) => selectChoiceLabel(field.select?.choices ?? [], selected))
+	);
+	const issues = $derived(form.issuesFor(field.path));
+	const hasMessage = $derived(issues.length > 0 || field.admin.description !== undefined);
+
+	$effect(() => form.register(field.path));
+
+	function setValues(next: string[]) {
+		form.set(field.path, [...next]);
+	}
+
+	function removeValue(selected: string) {
+		form.set(field.path, removeSelectValue(values, selected));
+	}
+</script>
+
+<FieldShell {field} {issues}>
+	{#if hasMany}
+		<Select
+			type="multiple"
+			value={values}
+			onValueChange={setValues}
+			disabled={field.admin.readOnly}
+		>
+			<SelectTrigger
+				id={field.id}
+				class="w-full"
+				aria-invalid={issues.length > 0}
+				aria-required={field.required}
+				aria-describedby={hasMessage ? `${field.id}-message` : undefined}
+				aria-errormessage={issues.length > 0 ? `${field.id}-message` : undefined}
+				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?.choices ?? [] as choice (choice.value)}
+					<SelectItem value={choice.value} label={choice.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">
+							{selectChoiceLabel(field.select?.choices ?? [], selected)}
+						</span>
+						{#if !field.admin.readOnly}
+							<Button
+								variant="ghost"
+								size="icon-xs"
+								onclick={() => removeValue(selected)}
+								aria-label={runtime.i18n.t("fields:remove", {
+									label: selectChoiceLabel(field.select?.choices ?? [], selected),
+								})}
+							>
+								<XIcon class="size-3" aria-hidden="true" />
+							</Button>
+						{/if}
+					</li>
+				{/each}
+			</ul>
+		{/if}
+	{:else}
+		<Select
+			type="single"
+			{value}
+			allowDeselect={!field.required}
+			onValueChange={(next) => form.set(field.path, next)}
+			disabled={field.admin.readOnly}
+		>
+			<SelectTrigger
+				id={field.id}
+				class="w-full"
+				aria-invalid={issues.length > 0}
+				aria-required={field.required}
+				aria-describedby={hasMessage ? `${field.id}-message` : undefined}
+				aria-errormessage={issues.length > 0 ? `${field.id}-message` : undefined}
+				aria-label={field.admin.label}
+			>
+				<span class={value === "" ? "text-foreground-placeholder" : undefined}>
+					{selectedLabel}
+				</span>
+			</SelectTrigger>
+			<SelectContent>
+				{#each field.select?.choices ?? [] as choice (choice.value)}
+					<SelectItem value={choice.value} label={choice.label} />
+				{/each}
+			</SelectContent>
+		</Select>
+	{/if}
+</FieldShell>

package/src/fields/select/select-value.ts

@@ -0,0 +1,14 @@
+import type { SchemaSelectChoice } from "@riducms/protocol";
+
+export function selectManyValues(value: unknown): string[] {
+	if (!Array.isArray(value)) return [];
+	return value.filter((candidate): candidate is string => typeof candidate === "string");
+}
+
+export function selectChoiceLabel(choices: readonly SchemaSelectChoice[], value: string) {
+	return choices.find((choice) => choice.value === value)?.label ?? value;
+}
+
+export function removeSelectValue(values: readonly string[], value: string) {
+	return values.filter((candidate) => candidate !== value);
+}

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

@@ -0,0 +1,87 @@
+<script lang="ts">
+	import type { SchemaField } from "@riducms/protocol";
+	import { untrack } from "svelte";
+
+	import { Button } from "@admin/components/ui/button";
+	import { Input } from "@admin/components/ui/input";
+	import type {
+		DerivedTextBinding,
+		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";
+	import { normalizeSlug, slugFollowsSource } from "@admin/fields/text/slug";
+
+	interface Props {
+		field: SchemaField;
+		form: FormController;
+	}
+
+	let { field, form }: Props = $props();
+	const runtime = getAdminRuntime();
+	const value = $derived(String(form.get(field.path) ?? ""));
+	const issues = $derived(form.issuesFor(field.path));
+	const hasMessage = $derived(issues.length > 0 || field.admin.description !== undefined);
+	let locked = $state(true);
+	let binding = $state<DerivedTextBinding>();
+
+	$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)
+			);
+		});
+	});
+
+	function generate() {
+		binding?.follow();
+	}
+
+	function normalizeManualValue() {
+		if (!locked) binding?.setManual(normalizeSlug(value));
+	}
+
+	function setManualValue(value: string) {
+		binding?.setManual(value);
+	}
+</script>
+
+<FieldShell {field} {issues}>
+	<div class="flex items-center gap-2">
+		<Input
+			id={field.id}
+			name={field.path}
+			required={field.required}
+			minlength={field.text?.minLength}
+			maxlength={field.text?.maxLength}
+			placeholder={field.admin.placeholder}
+			aria-invalid={issues.length > 0}
+			aria-describedby={hasMessage ? `${field.id}-message` : undefined}
+			aria-errormessage={issues.length > 0 ? `${field.id}-message` : undefined}
+			readonly={field.admin.readOnly || locked}
+			class="min-w-0 flex-1 font-mono"
+			{value}
+			oninput={(event) => setManualValue(event.currentTarget.value)}
+			onblur={normalizeManualValue}
+		/>
+		{#if !field.admin.readOnly}
+			<div class="flex shrink-0 items-center gap-1">
+				{#if !locked}
+					<Button type="button" size="xs" variant="ghost" onclick={generate}>
+						{runtime.i18n.t("fields:generateSlug")}
+					</Button>
+				{/if}
+				<Button type="button" size="xs" variant="ghost" onclick={() => (locked = !locked)}>
+					{runtime.i18n.t(locked ? "fields:unlockSlug" : "fields:lockSlug")}
+				</Button>
+			</div>
+		{/if}
+	</div>
+</FieldShell>

package/src/fields/text/slug.ts

@@ -0,0 +1,38 @@
+export function normalizeSlug(value: string) {
+	let normalized = "";
+	let pendingSeparator = false;
+	for (const character of value.trim()) {
+		const code = character.charCodeAt(0);
+		if (code >= 65 && code <= 90) {
+			if (pendingSeparator && normalized.length > 0) normalized += "-";
+			normalized += String.fromCharCode(code + 32);
+			pendingSeparator = false;
+			continue;
+		}
+		if ((code >= 97 && code <= 122) || (code >= 48 && code <= 57) || character === "_") {
+			if (pendingSeparator && normalized.length > 0) normalized += "-";
+			normalized += character;
+			pendingSeparator = false;
+			continue;
+		}
+		if (character === "-" || isASCIISpace(character)) {
+			pendingSeparator = normalized.length > 0;
+		}
+	}
+	return normalized;
+}
+
+export function slugFollowsSource(slug: unknown, source: unknown) {
+	return String(slug ?? "") === normalizeSlug(String(source ?? ""));
+}
+
+function isASCIISpace(character: string) {
+	return (
+		character === " " ||
+		character === "\t" ||
+		character === "\n" ||
+		character === "\r" ||
+		character === "\f" ||
+		character === "\v"
+	);
+}

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

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import type { SchemaField } from "@riducms/protocol";
+
+	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";
+
+	interface Props {
+		field: SchemaField;
+		form: FormController;
+	}
+
+	let { field, form }: Props = $props();
+	const value = $derived(String(form.get(field.path) ?? ""));
+	const issues = $derived(form.issuesFor(field.path));
+	const hasMessage = $derived(issues.length > 0 || field.admin.description !== undefined);
+
+	$effect(() => form.register(field.path));
+</script>
+
+{#if field.text?.slug !== undefined}
+	<SlugField {field} {form} />
+{:else}
+	<FieldShell {field} {issues}>
+		<Input
+			id={field.id}
+			name={field.path}
+			required={field.required}
+			minlength={field.text?.minLength}
+			maxlength={field.text?.maxLength}
+			placeholder={field.admin.placeholder}
+			aria-invalid={issues.length > 0}
+			aria-describedby={hasMessage ? `${field.id}-message` : undefined}
+			aria-errormessage={issues.length > 0 ? `${field.id}-message` : undefined}
+			readonly={field.admin.readOnly}
+			{value}
+			oninput={(event) => form.set(field.path, event.currentTarget.value)}
+		/>
+	</FieldShell>
+{/if}

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

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import type { SchemaField } from "@riducms/protocol";
+
+	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">
+			{field.admin.description}
+		</p>{/if}
+</aside>

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

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import type { SchemaField } from "@riducms/protocol";
+
+	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";
+
+	let { field, form }: { field: SchemaField; form: FormController } = $props();
+	const runtime = getAdminRuntime();
+	const value = $derived(form.get(field.path));
+	const formatted = $derived(
+		value === undefined || value === null
+			? runtime.i18n.t("general:none")
+			: typeof value === "object"
+				? JSON.stringify(value, null, 2)
+				: String(value)
+	);
+</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}
+	>
+		{formatted}
+	</output>
+</FieldShell>

package/src/index.ts

@@ -0,0 +1,49 @@
+import "@fontsource-variable/geist/wght.css";
+import "@fontsource-variable/spline-sans-mono/wght.css";
+import "uno.css";
+import "@admin/app.css";
+
+import { mount } from "svelte";
+
+import type { AdminPlugin, FieldPlugin } from "@riducms/plugin";
+import type { RiduClient, RiduConfigShape } from "@riducms/sdk";
+import type { TranslationLanguage } from "@riducms/translations";
+
+import App from "@admin/app.svelte";
+import type { AdminClient } from "@admin/core/api/admin-client";
+
+export interface MountAdminOptions<Config extends RiduConfigShape> {
+	/** Existing DOM element that receives the Ridu admin application. */
+	target: Element;
+	/** Creates the generated, application-specific Fetch client. */
+	clientFactory: () => RiduClient<Config>;
+	/** Route prefix used when the admin is not mounted at /admin. */
+	adminBasePath?: string;
+	/** Statically paired packaged plugins, including fields and routes. */
+	plugins?: readonly AdminPlugin[];
+	/** Application-local field renderers that have no packaged backend pair. */
+	fieldPlugins?: readonly FieldPlugin[];
+	/** Statically imported catalogs available to the Go-configured admin languages. */
+	languages?: readonly TranslationLanguage[];
+}
+
+export function mountAdmin<Config extends RiduConfigShape>(
+	options: MountAdminOptions<Config>
+): ReturnType<typeof mount> {
+	// AdminClient is the admin's capability-wide erased view. Generated clients keep exact
+	// collection capabilities while sharing invariant runtime methods and envelopes; the manifest
+	// gates which of those methods the admin exposes for each resource.
+	const clientFactory: () => AdminClient = () => options.clientFactory() as unknown as AdminClient;
+	return mount(App, {
+		target: options.target,
+		props: {
+			clientFactory,
+			...(options.adminBasePath === undefined ? {} : { adminBasePath: options.adminBasePath }),
+			...(options.plugins === undefined ? {} : { plugins: options.plugins }),
+			...(options.fieldPlugins === undefined ? {} : { fieldPlugins: options.fieldPlugins }),
+			...(options.languages === undefined ? {} : { languages: options.languages }),
+		},
+	});
+}
+
+export type { AdminClient } from "@admin/core/api/admin-client";

package/src/main.ts

@@ -0,0 +1,12 @@
+import { createAdminClient } from "@admin/core/api/admin-client";
+import { mountAdmin } from "@admin/index";
+
+const target = document.getElementById("app");
+
+if (target === null) {
+	throw new Error('Ridu admin could not find its required "#app" mount element.');
+}
+
+const app = mountAdmin({ target, clientFactory: createAdminClient });
+
+export default app;

package/src/vite-env.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />
+
+declare module "~icons/*" {
+	import type { Component } from "svelte";
+	import type { SvelteHTMLElements } from "svelte/elements";
+	const icon: Component<SvelteHTMLElements["svg"]>;
+	export default icon;
+}