@riducms/admin 0.2.2 → 0.3.0

package/src/components/json-tree/json-viewer.svelte

@@ -1,113 +1,74 @@
 <script lang="ts">
-	import { onDestroy } from "svelte";
 	import CheckIcon from "~icons/lucide/check";
 	import CopyIcon from "~icons/lucide/copy";
 	import Maximize2Icon from "~icons/lucide/maximize-2";
 	import Minimize2Icon from "~icons/lucide/minimize-2";
 	import { getAdminI18n } from "@riducms/plugin";
-
 	import JsonTreeNode from "@admin/components/json-tree/json-tree-node.svelte";
-	import { Button, buttonVariants } from "@admin/components/ui/button";
-	import {
-		Dialog,
-		DialogClose,
-		DialogContent,
-		DialogDescription,
-		DialogTitle,
-		DialogTrigger,
-	} from "@admin/components/ui/dialog";
-
-	let { value, class: className = "" }: { value: unknown; class?: string } = $props();
-	const i18n = getAdminI18n();
-	let copied = $state(false);
-	let copyFailed = $state(false);
-	let copyResetTimer: ReturnType<typeof setTimeout> | undefined;
+	import { CopyFeedback } from "@admin/core/clipboard/copy-feedback.svelte";
+	import "@admin/components/json-tree/json-viewer.scss";
 
-	onDestroy(() => clearTimeout(copyResetTimer));
+	let {
+		value,
+		expanded = $bindable<boolean>(),
+		class: className,
+	}: {
+		value: unknown;
+		expanded?: boolean;
+		class?: string;
+	} = $props();
 
-	async function copy() {
-		try {
-			await navigator.clipboard.writeText(JSON.stringify(value, null, 2));
-			copied = true;
-			copyFailed = false;
-		} catch {
-			copyFailed = true;
-		}
-		clearTimeout(copyResetTimer);
-		copyResetTimer = window.setTimeout(() => {
-			copied = false;
-			copyFailed = false;
-		}, 1_500);
-	}
+	const i18n = getAdminI18n();
+	const copyFeedback = new CopyFeedback();
+	const source = $derived(JSON.stringify(value, null, 2) ?? "undefined");
+	const copyResult = $derived(
+		copyFeedback.result?.source === source ? copyFeedback.result : undefined
+	);
 </script>
 
-{#snippet viewer(expanded: boolean)}
-	<div
-		class={[
-			"flex min-h-0 flex-col overflow-hidden rounded-[4px] border border-control-border bg-control",
-			!expanded && className,
-			expanded && "h-full rounded-none border-0 bg-background",
-		]}
-	>
-		<div class="flex items-center justify-between border-b border-control-border px-3 py-2">
-			<span class="font-mono text-[9.5px] tracking-[0.12em] text-foreground-faint uppercase">
-				JSON
-			</span>
-			<div class="flex items-center gap-1">
-				{#if expanded}
-					<DialogClose
-						class={buttonVariants({ variant: "ghost", size: "icon-xs" })}
-						aria-label={i18n.t("general:exitExpandedJSONView")}
-						title={i18n.t("general:exitExpandedJSONView")}
-					>
-						<Minimize2Icon class="size-3.5" />
-					</DialogClose>
+<div class={["ridu-json-viewer", className]}>
+	<div class="ridu-json-viewer__toolbar">
+		<div class="ridu-json-viewer__actions">
+			<button
+				type="button"
+				class="ridu-json-viewer__copy"
+				onclick={() => copyFeedback.copy(source)}
+				aria-label={i18n.t("general:copyJSON")}
+				title={copyResult?.copied === true
+					? i18n.t("general:copied")
+					: copyResult?.copied === false
+						? i18n.t("general:copyUnavailable")
+						: i18n.t("general:copyJSON")}
+			>
+				{#if copyResult?.copied}
+					<CheckIcon />
 				{:else}
-					<DialogTrigger
-						class={buttonVariants({ variant: "ghost", size: "icon-xs" })}
-						aria-label={i18n.t("general:expandJSONView")}
-						title={i18n.t("general:expandJSONView")}
-					>
-						<Maximize2Icon class="size-3.5" />
-					</DialogTrigger>
+					<CopyIcon />
 				{/if}
-				<Button
-					variant="ghost"
-					size="xs"
-					onclick={copy}
-					aria-label={i18n.t("general:copyJSON")}
-					tooltip={copied
-						? i18n.t("general:copied")
-						: copyFailed
-							? i18n.t("general:copyUnavailable")
-							: i18n.t("general:copyJSON")}
+			</button>
+			{#if expanded !== undefined}
+				<button
+					type="button"
+					class="ridu-json-viewer__expand"
+					aria-label={i18n.t(expanded ? "general:exitExpandedJSONView" : "general:expandJSONView")}
+					title={i18n.t(expanded ? "general:exitExpandedJSONView" : "general:expandJSONView")}
+					aria-pressed={expanded}
+					onclick={() => (expanded = !expanded)}
 				>
-					{#if copied}<CheckIcon class="size-3" /> {i18n.t("general:copied")}{:else}<CopyIcon
-							class="size-3"
-						/>
-						{copyFailed ? i18n.t("general:copyUnavailable") : i18n.t("general:copy")}{/if}
-				</Button>
-			</div>
+					{#if expanded}
+						<Minimize2Icon />
+					{:else}
+						<Maximize2Icon />
+					{/if}
+				</button>
+			{/if}
 		</div>
-		<section
-			class="min-h-72 flex-1 overflow-auto p-4 font-mono text-[11.5px] leading-6"
-			aria-label={i18n.t("general:jsonData")}
-		>
-			<JsonTreeNode {value} />
-		</section>
+		<span class="sr-only" role="status">
+			{copyResult ? i18n.t(copyResult.copied ? "general:copied" : "general:copyUnavailable") : ""}
+		</span>
 	</div>
-{/snippet}
 
-<Dialog>
-	{@render viewer(false)}
-	<DialogContent
-		showCloseButton={false}
-		class="inset-3 top-3 left-3 h-auto w-auto max-w-none translate-x-0 translate-y-0 gap-0 overflow-hidden p-0 sm:max-w-none"
-	>
-		<DialogTitle class="sr-only">{i18n.t("general:expandedJSONResponse")}</DialogTitle>
-		<DialogDescription class="sr-only">
-			{i18n.t("general:expandedJSONDescription")}
-		</DialogDescription>
-		{@render viewer(true)}
-	</DialogContent>
-</Dialog>
+	<section class="ridu-json-viewer__data" aria-label={i18n.t("general:jsonData")} dir="ltr">
+		<ul class="ridu-json-viewer__tree"><JsonTreeNode {value} root /></ul>
+	</section>
+</div>

package/src/components/ui/banner/banner.scss

@@ -0,0 +1,28 @@
+@use "@riducms/ui/layers.css";
+
+@layer ridu.components {
+	.ridu-banner {
+		--banner-surface: var(--background-layer);
+		--banner-color: var(--ink-strong);
+		display: flex;
+		align-items: start;
+		gap: 12px;
+		min-width: 0;
+		padding: 10px;
+		border: 0;
+		border-radius: 4px;
+		background: var(--banner-surface);
+		color: var(--banner-color);
+		font-size: var(--font-size-body);
+		line-height: var(--line-height-body);
+		overflow-wrap: anywhere;
+	}
+	.ridu-banner--warning {
+		--banner-surface: var(--status-warning-surface);
+		--banner-color: var(--status-warning-foreground);
+	}
+	.ridu-banner--destructive {
+		--banner-surface: var(--status-error-surface);
+		--banner-color: var(--status-error-action);
+	}
+}

package/src/components/ui/banner/banner.svelte

@@ -1,13 +1,14 @@
 <script lang="ts" module>
-	import { tv, type VariantProps } from "@riducms/ui";
+	import "@admin/components/ui/banner/banner.scss";
+	import { cv, type VariantProps } from "@riducms/ui";
 
-	export const bannerVariants = tv({
-		base: "flex min-w-0 items-start gap-3 rounded-[3px] border px-3.5 py-3 text-[13.5px] leading-5",
+	const bannerVariants = cv({
+		base: "ridu-banner",
 		variants: {
 			tone: {
-				warning: "border-warning/30 bg-warning/8 text-warning",
-				destructive: "border-destructive/30 bg-destructive/8 text-destructive",
-				neutral: "border-border bg-muted/35 text-foreground-muted",
+				warning: "ridu-banner--warning",
+				destructive: "ridu-banner--destructive",
+				neutral: "ridu-banner--neutral",
 			},
 		},
 		defaultVariants: { tone: "neutral" },
@@ -19,7 +20,7 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
 
-	import { cn, type WithElementRef } from "@riducms/ui";
+	import type { WithElementRef } from "@riducms/ui";
 
 	let {
 		ref = $bindable(null),
@@ -33,7 +34,7 @@
 <div
 	bind:this={ref}
 	data-slot="banner"
-	class={cn(bannerVariants({ tone }), className)}
+	class={[bannerVariants({ tone }), className]}
 	role={tone === "destructive" ? "alert" : "status"}
 	{...restProps}
 >

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

@@ -1,5 +1 @@
-export {
-	default as Banner,
-	bannerVariants,
-	type BannerTone,
-} from "@admin/components/ui/banner/banner.svelte";
+export { default as Banner, type BannerTone } from "@admin/components/ui/banner/banner.svelte";

package/src/components/ui/code-editor/code-editor.scss

@@ -0,0 +1,20 @@
+@layer ridu.components {
+	.ridu-code-editor {
+		min-width: 0;
+		border: 1px solid var(--control-border);
+		border-radius: var(--control-radius);
+		background: var(--control-surface);
+		overflow: hidden;
+		&:focus-within {
+			border-color: var(--ring);
+		}
+		&[data-invalid="true"] {
+			border-color: var(--control-invalid-border);
+			background: var(--control-invalid-surface);
+		}
+		&[data-readonly="true"] {
+			color: var(--control-disabled-foreground);
+			background: var(--control-surface-disabled);
+		}
+	}
+}

package/src/components/ui/code-editor/code-editor.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import { getAdminI18n } from "@riducms/plugin";
+	import type {
+		CodeEditor,
+		CodeEditorConfiguration,
+	} from "@admin/components/ui/code-editor/code-editor";
+	import "@admin/components/ui/code-editor/code-editor.scss";
+
+	let {
+		value,
+		language,
+		configuration,
+		onChange,
+	}: {
+		value: string;
+		language: string;
+		configuration: CodeEditorConfiguration;
+		onChange: (value: string) => void;
+	} = $props();
+
+	const i18n = getAdminI18n();
+	let editor = $state.raw<CodeEditor>();
+	let loadFailed = $state(false);
+
+	function mount(element: HTMLElement) {
+		let disposed = false;
+		let instance: CodeEditor | undefined;
+
+		import("@admin/components/ui/code-editor/code-editor")
+			.then(({ CodeEditor }) => {
+				if (disposed) return;
+				instance = new CodeEditor(element, value, configuration, (next) => onChange(next));
+				editor = instance;
+			})
+			.catch(() => {
+				if (!disposed) loadFailed = true;
+			});
+
+		return () => {
+			disposed = true;
+			instance?.destroy();
+		};
+	}
+
+	$effect(() => {
+		editor?.configure(configuration);
+	});
+	$effect(() => {
+		const current = editor;
+		const next = value;
+		current?.setValue(next);
+	});
+	$effect(() => {
+		editor?.setLanguage(language).catch(() => {
+			loadFailed = true;
+		});
+	});
+</script>
+
+<div
+	class="ridu-code-editor"
+	data-language={language}
+	data-invalid={configuration.invalid}
+	data-readonly={configuration.readOnly}
+	aria-busy={!editor && !loadFailed}
+>
+	<div {@attach mount}></div>
+	{#if loadFailed}
+		<p role="alert">{i18n.t("fields:codeEditorLoadFailed")}</p>
+	{/if}
+</div>

package/src/components/ui/code-editor/code-editor.ts

@@ -0,0 +1,151 @@
+import { Compartment, EditorState, type Extension } from "@codemirror/state";
+import {
+	EditorView,
+	keymap,
+	lineNumbers,
+	highlightActiveLineGutter,
+	drawSelection,
+} from "@codemirror/view";
+import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
+import {
+	bracketMatching,
+	HighlightStyle,
+	indentOnInput,
+	syntaxHighlighting,
+} from "@codemirror/language";
+import { closeBrackets, closeBracketsKeymap } from "@codemirror/autocomplete";
+import { tags } from "@lezer/highlight";
+
+const highlighting = HighlightStyle.define([
+	{ tag: [tags.keyword, tags.bool, tags.null], color: "var(--code-keyword)" },
+	{ tag: [tags.string, tags.special(tags.string)], color: "var(--code-string)" },
+	{ tag: [tags.number, tags.literal], color: "var(--code-number)" },
+	{ tag: [tags.propertyName, tags.attributeName], color: "var(--code-property)" },
+	{ tag: tags.comment, color: "var(--code-comment)", fontStyle: "italic" },
+	{ tag: [tags.typeName, tags.className], color: "var(--code-type)" },
+]);
+
+// CodeMirror injects unlayered base CSS. Its theme API overrides those defaults while
+// consuming Ridu tokens, so gutters and selection follow the surrounding admin theme.
+const editorTheme = EditorView.theme({
+	"&": { minHeight: "68px", fontSize: "13px" },
+	"&.cm-focused": { outline: "none" },
+	".cm-scroller": {
+		fontFamily: "var(--font-mono)",
+		lineHeight: "20px",
+		overflow: "auto",
+		maxHeight: "500px",
+	},
+	".cm-content": { padding: "12px 0", caretColor: "var(--foreground)" },
+	".cm-line": { paddingInline: "10px 16px" },
+	".cm-gutters": {
+		backgroundColor: "transparent",
+		color: "var(--foreground-faint)",
+		border: "0",
+		minWidth: "44px",
+	},
+	".cm-lineNumbers .cm-gutterElement": { padding: "0 10px" },
+	".cm-activeLineGutter": { backgroundColor: "transparent", color: "var(--foreground)" },
+	".cm-selectionBackground": { backgroundColor: "var(--control-surface-hover)" },
+	"&.cm-focused .cm-selectionBackground": {
+		backgroundColor: "color-mix(in srgb, var(--foreground) 20%, transparent)",
+	},
+	".cm-cursor": { borderLeftColor: "var(--foreground)" },
+	".cm-matchingBracket": { outline: "1px solid var(--foreground-faint)" },
+});
+
+export interface CodeEditorConfiguration {
+	id: string;
+	label: string;
+	readOnly: boolean;
+	invalid: boolean;
+	describedBy?: string;
+	errorMessage?: string;
+}
+
+/** CodeMirror owns its DOM and selection; Svelte owns value, access and lifetime. */
+export class CodeEditor {
+	readonly view: EditorView;
+	readonly #configuration = new Compartment();
+	readonly #language = new Compartment();
+	readonly #history = new Compartment();
+	#languageRequest = 0;
+	#destroyed = false;
+
+	constructor(
+		parent: HTMLElement,
+		value: string,
+		configuration: CodeEditorConfiguration,
+		onChange: (value: string) => void
+	) {
+		this.view = new EditorView({
+			parent,
+			state: EditorState.create({
+				doc: value,
+				extensions: [
+					editorTheme,
+					lineNumbers(),
+					highlightActiveLineGutter(),
+					this.#history.of(history()),
+					drawSelection(),
+					indentOnInput(),
+					bracketMatching(),
+					closeBrackets(),
+					keymap.of([...closeBracketsKeymap, ...defaultKeymap, ...historyKeymap]),
+					syntaxHighlighting(highlighting),
+					this.#configuration.of(this.#attributes(configuration)),
+					this.#language.of([]),
+					EditorView.updateListener.of((update) => {
+						if (update.docChanged) onChange(update.state.doc.toString());
+					}),
+				],
+			}),
+		});
+	}
+
+	configure(configuration: CodeEditorConfiguration) {
+		this.view.dispatch({
+			effects: this.#configuration.reconfigure(this.#attributes(configuration)),
+		});
+	}
+
+	async setLanguage(language: string) {
+		const request = ++this.#languageRequest;
+		const { codeLanguage } = await import("@admin/components/ui/code-editor/code-languages");
+		if (this.#destroyed || request !== this.#languageRequest) return;
+		const extension = codeLanguage(language);
+		this.view.dispatch({ effects: this.#language.reconfigure(extension) });
+	}
+
+	setValue(value: string) {
+		if (value === this.view.state.doc.toString()) return;
+		// An external replacement starts a new editing lifetime, including undo history.
+		this.view.dispatch({
+			changes: { from: 0, to: this.view.state.doc.length, insert: value },
+			effects: this.#history.reconfigure([]),
+		});
+		this.view.dispatch({ effects: this.#history.reconfigure(history()) });
+	}
+
+	destroy() {
+		this.#destroyed = true;
+		this.view.destroy();
+	}
+
+	#attributes(configuration: CodeEditorConfiguration): Extension {
+		return [
+			EditorState.readOnly.of(configuration.readOnly),
+			EditorView.editable.of(!configuration.readOnly),
+			EditorView.contentAttributes.of({
+				id: configuration.id,
+				"aria-label": configuration.label,
+				"aria-readonly": String(configuration.readOnly),
+				"aria-invalid": String(configuration.invalid),
+				...(configuration.describedBy ? { "aria-describedby": configuration.describedBy } : {}),
+				...(configuration.errorMessage ? { "aria-errormessage": configuration.errorMessage } : {}),
+				spellcheck: "false",
+				tabindex: "0",
+			}),
+		];
+	}
+}

package/src/components/ui/code-editor/code-languages.ts

@@ -0,0 +1,29 @@
+import type { Extension } from "@codemirror/state";
+import { json } from "@codemirror/lang-json";
+import { javascript } from "@codemirror/lang-javascript";
+import { css } from "@codemirror/lang-css";
+import { html } from "@codemirror/lang-html";
+
+export function codeLanguage(language: string): Extension {
+	switch (language.toLowerCase()) {
+		case "json":
+			return json();
+		case "javascript":
+		case "js":
+		case "jsx":
+			return javascript({ jsx: true });
+		case "typescript":
+		case "ts":
+		case "tsx":
+			return javascript({
+				typescript: true,
+				jsx: true,
+			});
+		case "css":
+			return css();
+		case "html":
+			return html();
+		default:
+			return [];
+	}
+}

package/src/components/ui/collapsible-panel/collapsible-panel.scss

@@ -0,0 +1,38 @@
+@use "@riducms/ui/layers.css";
+
+@layer ridu.components {
+	.ridu-collapsible-panel:not([hidden]) {
+		// Contain the panel's top margin in the measured height.
+		display: flow-root;
+		animation: ridu-collapsible-panel-open 300ms ease;
+
+		&[data-state="closed"] {
+			animation-name: ridu-collapsible-panel-close;
+		}
+	}
+	@keyframes ridu-collapsible-panel-open {
+		from {
+			height: 0;
+			overflow: hidden;
+		}
+		to {
+			height: var(--bits-collapsible-content-height);
+			overflow: hidden;
+		}
+	}
+	@keyframes ridu-collapsible-panel-close {
+		from {
+			height: var(--bits-collapsible-content-height);
+			overflow: hidden;
+		}
+		to {
+			height: 0;
+			overflow: hidden;
+		}
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.ridu-collapsible-panel:not([hidden]) {
+			animation: none;
+		}
+	}
+}

package/src/components/ui/collapsible-panel/collapsible-panel.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { Collapsible } from "bits-ui";
+	import type { Snippet } from "svelte";
+	import "@admin/components/ui/collapsible-panel/collapsible-panel.scss";
+
+	let { id, open, children }: { id: string; open: boolean; children: Snippet } = $props();
+</script>
+
+<Collapsible.Root {open}>
+	<Collapsible.Content {id} class="ridu-collapsible-panel" inert={!open} aria-hidden={!open}>
+		{@render children()}
+	</Collapsible.Content>
+</Collapsible.Root>

package/src/components/ui/collapsible-panel/index.ts

@@ -0,0 +1 @@
+export { default as CollapsiblePanel } from "@admin/components/ui/collapsible-panel/collapsible-panel.svelte";