@riducms/admin 0.2.2 → 0.3.0

package/src/app-meta.ts

@@ -1,2 +1,15 @@
+import type { SchemaManifest } from "@riducms/protocol";
+import type { AdminI18n } from "@riducms/translations";
+
 export const ADMIN_NAME = "Ridu";
 export const ADMIN_TITLE = `${ADMIN_NAME} Admin`;
+
+export function adminApplicationName(
+	manifest: SchemaManifest | undefined,
+	i18n: Pick<AdminI18n, "text">,
+	fallback: string
+): string {
+	return manifest === undefined
+		? fallback
+		: i18n.text(manifest.application.name, manifest.application.nameTranslations);
+}

package/src/app.css

@@ -1,526 +1,168 @@
-:root {
-	color-scheme: dark;
-	--radius: 0.25rem;
-	--background: oklch(0.145 0 0);
-	--background-surface: oklch(0.18 0 0);
-	--background-layer: oklch(0.205 0 0);
-	--foreground: oklch(0.985 0 0);
-	--foreground-muted: oklch(0.708 0 0);
-	--foreground-sub: oklch(0.625 0 0);
-	--foreground-soft: oklch(0.556 0 0);
-	--card: oklch(0.205 0 0);
-	--card-foreground: oklch(0.985 0 0);
-	--popover: oklch(0.205 0 0);
-	--popover-foreground: oklch(0.985 0 0);
-	--primary: oklch(0.922 0 0);
-	--primary-foreground: oklch(0.205 0 0);
-	--secondary: oklch(0.269 0 0);
-	--secondary-foreground: oklch(0.985 0 0);
-	--muted: oklch(0.269 0 0);
-	--muted-foreground: oklch(0.708 0 0);
-	--accent: oklch(0.269 0 0);
-	--accent-foreground: oklch(0.985 0 0);
-	--destructive: oklch(0.704 0.191 22.216);
-	--destructive-foreground: oklch(0.985 0 0);
-	--destructive-hover: oklch(0.76 0.17 22.216);
-	--border: oklch(1 0 0 / 10%);
-	--input: oklch(1 0 0 / 15%);
-	--ring: oklch(0.708 0 0);
-	--control-surface: oklch(0.205 0 0);
-	--control-surface-hover: oklch(0.235 0 0);
-	--control-surface-disabled: oklch(0.18 0 0);
-	--control-border: oklch(1 0 0 / 15%);
-	--control-border-hover: oklch(1 0 0 / 24%);
-	--control-border-disabled: oklch(1 0 0 / 8%);
-	--stroke-soft: oklch(1 0 0 / 8%);
-	--brand-primary: oklch(0.922 0 0);
-	--brand-primary-foreground: oklch(0.205 0 0);
-	--brand-primary-soft: oklch(0.708 0 0);
-	--tabs-segment-surface: oklch(0.205 0 0);
-	--tabs-segment-active: oklch(0.269 0 0);
-	--tabs-segment-text-active: oklch(0.985 0 0);
-	--tabs-segment-text-inactive: oklch(0.708 0 0);
-	--sidebar: oklch(0.18 0 0);
-	--sidebar-foreground: oklch(0.708 0 0);
-	--sidebar-primary: oklch(0.922 0 0);
-	--sidebar-primary-foreground: oklch(0.205 0 0);
-	--sidebar-accent: oklch(0.269 0 0);
-	--sidebar-accent-foreground: oklch(0.985 0 0);
-	--sidebar-border: oklch(1 0 0 / 10%);
-	--sidebar-ring: oklch(0.708 0 0);
-	--warning: oklch(0.79 0.14 82);
-	--success: oklch(0.72 0.14 145);
-	--accent-hover: oklch(0.82 0 0);
-	--accent-soft: oklch(0.708 0 0);
-	--ink-strong: oklch(0.985 0 0);
-	--ink-body: oklch(0.922 0 0);
-	--ink-secondary: oklch(0.78 0 0);
-	--ink-muted: oklch(0.708 0 0);
-	--ink-faint: oklch(0.556 0 0);
-	--ink-placeholder: oklch(0.625 0 0);
-	--ink-label: oklch(0.82 0 0);
-	--ink-tag: oklch(0.625 0 0);
-	--surface-raised: oklch(0.18 0 0);
-	--surface-overlay: oklch(0.205 0 0);
-	--toast-surface: var(--background-layer);
-	--backdrop: oklch(0 0 0 / 68%);
-	--media-overlay: oklch(0 0 0 / 40%);
-	--media-foreground: oklch(1 0 0);
-	--preview-canvas: oklch(1 0 0);
-	--shadow-popover: 0 16px 48px oklch(0 0 0 / 50%);
-	--shadow-dialog: 0 24px 80px oklch(0 0 0 / 60%);
-	--syntax-property: oklch(0.72 0.1 30);
-	--syntax-number: oklch(0.76 0.07 85);
-	--syntax-string: oklch(0.76 0.09 135);
-	--syntax-operator: oklch(0.75 0.06 220);
-	--syntax-keyword: oklch(0.72 0.09 315);
-	--syntax-function: oklch(0.72 0.1 235);
-	--syntax-variable: oklch(0.72 0.11 70);
-	--font-sans: "Geist Variable", "Geist", ui-sans-serif, system-ui, sans-serif;
-	--font-serif: var(--font-sans);
-	--font-mono: "Spline Sans Mono Variable", "Spline Sans Mono", ui-monospace, monospace;
-}
-
-:root[data-theme="light"] {
-	color-scheme: light;
-	--background: oklch(1 0 0);
-	--background-surface: oklch(0.985 0 0);
-	--background-layer: oklch(0.97 0 0);
-	--foreground: oklch(0.145 0 0);
-	--foreground-muted: oklch(0.556 0 0);
-	--foreground-sub: oklch(0.485 0 0);
-	--foreground-soft: oklch(0.625 0 0);
-	--card: oklch(1 0 0);
-	--card-foreground: oklch(0.145 0 0);
-	--popover: oklch(1 0 0);
-	--popover-foreground: oklch(0.145 0 0);
-	--primary: oklch(0.205 0 0);
-	--primary-foreground: oklch(0.985 0 0);
-	--secondary: oklch(0.97 0 0);
-	--secondary-foreground: oklch(0.205 0 0);
-	--muted: oklch(0.97 0 0);
-	--muted-foreground: oklch(0.556 0 0);
-	--accent: oklch(0.97 0 0);
-	--accent-foreground: oklch(0.205 0 0);
-	--destructive: oklch(0.577 0.245 27.325);
-	--destructive-foreground: oklch(0.985 0 0);
-	--destructive-hover: oklch(0.52 0.23 27.325);
-	--border: oklch(0.922 0 0);
-	--input: oklch(0.922 0 0);
-	--ring: oklch(0.556 0 0);
-	--control-surface: oklch(0.985 0 0);
-	--control-surface-hover: oklch(0.97 0 0);
-	--control-surface-disabled: oklch(0.97 0 0);
-	--control-border: oklch(0.86 0 0);
-	--control-border-hover: oklch(0.72 0 0);
-	--control-border-disabled: oklch(0.922 0 0);
-	--stroke-soft: oklch(0.922 0 0);
-	--brand-primary: oklch(0.205 0 0);
-	--brand-primary-foreground: oklch(0.985 0 0);
-	--brand-primary-soft: oklch(0.556 0 0);
-	--tabs-segment-surface: oklch(0.97 0 0);
-	--tabs-segment-active: oklch(0.922 0 0);
-	--tabs-segment-text-active: oklch(0.145 0 0);
-	--tabs-segment-text-inactive: oklch(0.556 0 0);
-	--sidebar: oklch(0.985 0 0);
-	--sidebar-foreground: oklch(0.556 0 0);
-	--sidebar-primary: oklch(0.205 0 0);
-	--sidebar-primary-foreground: oklch(0.985 0 0);
-	--sidebar-accent: oklch(0.97 0 0);
-	--sidebar-accent-foreground: oklch(0.205 0 0);
-	--sidebar-border: oklch(0.922 0 0);
-	--sidebar-ring: oklch(0.556 0 0);
-	--warning: oklch(0.58 0.14 78);
-	--success: oklch(0.52 0.14 145);
-	--accent-hover: oklch(0.269 0 0);
-	--accent-soft: oklch(0.556 0 0);
-	--ink-strong: oklch(0.145 0 0);
-	--ink-body: oklch(0.205 0 0);
-	--ink-secondary: oklch(0.371 0 0);
-	--ink-muted: oklch(0.556 0 0);
-	--ink-faint: oklch(0.625 0 0);
-	--ink-placeholder: oklch(0.556 0 0);
-	--ink-label: oklch(0.371 0 0);
-	--ink-tag: oklch(0.556 0 0);
-	--surface-raised: oklch(0.985 0 0);
-	--surface-overlay: oklch(1 0 0);
-	--toast-surface: var(--background-layer);
-	--backdrop: oklch(0 0 0 / 46%);
-	--media-overlay: oklch(0 0 0 / 40%);
-	--media-foreground: oklch(1 0 0);
-	--preview-canvas: oklch(1 0 0);
-	--shadow-popover: 0 16px 48px oklch(0 0 0 / 18%);
-	--shadow-dialog: 0 24px 80px oklch(0 0 0 / 24%);
-	--syntax-property: oklch(0.5 0.13 30);
-	--syntax-number: oklch(0.5 0.1 80);
-	--syntax-string: oklch(0.5 0.12 140);
-	--syntax-operator: oklch(0.5 0.09 220);
-	--syntax-keyword: oklch(0.5 0.12 315);
-	--syntax-function: oklch(0.5 0.13 235);
-	--syntax-variable: oklch(0.52 0.14 70);
-}
-
-* {
-	--at-apply: border-border;
-	box-sizing: border-box;
-}
-
-html {
-	font-family: var(--font-sans);
-	font-synthesis: none;
-	text-rendering: optimizeLegibility;
-	scroll-behavior: smooth;
-}
-
-body {
-	margin: 0;
-	min-width: 20rem;
-	background: var(--background);
-	color: var(--foreground);
-	font-size: 0.90625rem;
-	line-height: 1.5;
-	-webkit-font-smoothing: antialiased;
-}
-
-button,
-input,
-select,
-textarea {
-	font: inherit;
-}
-
-button,
-a,
-input,
-select,
-textarea {
-	-webkit-tap-highlight-color: transparent;
-}
-
-a {
-	color: inherit;
-	text-decoration: none;
-}
-
-::selection {
-	background: color-mix(in oklab, var(--foreground) 18%, transparent);
-}
-
-::placeholder {
-	color: var(--ink-placeholder);
-	opacity: 1;
-}
-
-::-webkit-scrollbar {
-	width: 10px;
-	height: 12px;
-}
-
-::-webkit-scrollbar-thumb {
-	border: 3px solid var(--background);
-	border-radius: 5px;
-	background: color-mix(in oklab, var(--foreground) 12%, transparent);
-	background-clip: padding-box;
-}
-
-::-webkit-scrollbar-track {
-	background: transparent;
-}
-
-:focus-visible {
-	outline: 2px solid color-mix(in oklab, var(--ring) 72%, transparent);
-	outline-offset: 2px;
-}
-
-[data-slot="input"]:not([aria-invalid="true"]):focus-visible,
-[data-slot="textarea"]:not([aria-invalid="true"]):focus-visible,
-[data-slot="command-input"]:not([aria-invalid="true"]):focus-visible,
-select:not([aria-invalid="true"]):focus-visible {
-	border-color: color-mix(in oklab, var(--ring) 78%, transparent);
-	box-shadow: none;
-	outline: none;
-}
-
-[data-slot="input"][aria-invalid="true"]:focus-visible,
-[data-slot="textarea"][aria-invalid="true"]:focus-visible,
-[data-slot="command-input"][aria-invalid="true"]:focus-visible,
-select[aria-invalid="true"]:focus-visible {
-	box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--destructive) 65%, transparent);
-	outline: none;
-}
-
-.font-serif {
-	font-family: var(--font-serif);
-}
-
-.font-mono {
-	font-family: var(--font-mono);
-}
-
-.ridu-popover-enter[data-state="open"],
-.ridu-popover-enter:not([data-state]) {
-	animation: ridu-pop-in 0.16s ease both;
-}
-
-.ridu-dialog-enter[data-state="open"] {
-	animation: ridu-dialog-in 0.16s ease both;
-}
-
-.ridu-dialog-enter.ridu-command-dialog[data-state="open"] {
-	animation-name: ridu-command-dialog-in;
-}
-
-.ridu-surface-grid {
-	background-image:
-		linear-gradient(color-mix(in oklab, var(--foreground) 2%, transparent) 1px, transparent 1px),
-		linear-gradient(
-			90deg,
-			color-mix(in oklab, var(--foreground) 2%, transparent) 1px,
-			transparent 1px
-		);
-	background-size: 32px 32px;
-	background-position: -1px -1px;
-}
-
-.ridu-field-label {
-	color: var(--ink-label);
-	font-size: 0.8125rem;
-	font-weight: 550;
-}
-
-.ridu-field-required {
-	margin-inline-start: 0.2rem;
-	color: var(--destructive);
-	font-weight: 650;
-}
-
-.ridu-field-status {
-	border: 1px solid var(--border);
-	border-radius: 999px;
-	padding: 0.08rem 0.42rem;
-	font-family: var(--font-mono);
-	font-size: 0.625rem;
-	font-weight: 400;
-	color: var(--ink-muted);
-}
+@import "@riducms/ui/layers.css";
 
-.ridu-field-help {
-	color: var(--ink-muted);
-	font-size: 0.8125rem;
-	line-height: 1.5;
-}
-
-.ridu-field-error {
-	color: var(--destructive);
-	font-size: 0.8125rem;
-	line-height: 1.5;
-}
-
-/*
- * Validation feedback is a status surface, not an interactive tooltip. Keep it
- * anchored to the control without covering its hit target or replacing help copy.
- */
-.ridu-field-error-tooltip {
-	position: absolute;
-	z-index: 20;
-	inset-inline-end: 0;
-	inset-block-end: calc(100% + 0.4rem);
-	max-inline-size: min(80%, 42rem);
-	margin: 0;
-	border-radius: calc(var(--radius) - 0.0625rem);
-	padding: 0.32rem 0.55rem;
-	background: var(--destructive);
-	box-shadow: 0 0.3rem 1rem oklch(0 0 0 / 18%);
-	color: var(--destructive-foreground);
-	font-size: 0.8125rem;
-	font-weight: 500;
-	line-height: 1.35;
-	list-style: none;
-	overflow-wrap: anywhere;
-	pointer-events: none;
-}
-
-.ridu-field-error-tooltip::after {
-	position: absolute;
-	inset-block-start: 100%;
-	inset-inline-end: 0.7rem;
-	inline-size: 0;
-	block-size: 0;
-	border: 0.32rem solid transparent;
-	border-block-start-color: var(--destructive);
-	content: "";
-}
-
-.ridu-field-error-tooltip > :where(ul, ol) {
-	margin: 0;
-	padding: 0;
-	list-style: none;
-}
-
-.ridu-field-error-tooltip li + li {
-	margin-block-start: 0.2rem;
-}
+@layer ridu.base {
+	* {
+		--at-apply: border-border;
+		box-sizing: border-box;
+	}
 
-@media (max-width: 34rem) {
-	.ridu-field-error-tooltip {
-		max-inline-size: calc(100% - 0.5rem);
+	html {
+		font-family: var(--font-sans);
+		font-synthesis: none;
+		text-rendering: optimizeLegibility;
+		scroll-behavior: smooth;
 	}
-}
 
-/*
- * Tone lives in the text and the wash, matching `banner`: no rails, chips, or icons.
- * `--normal-*` are sonner's own theming variables; its dark-theme rules paint the
- * close button from them at a specificity we cannot outrank, so we set them here
- * per tone rather than fighting the selector.
- */
-.ridu-toast {
-	--toast-title: var(--foreground);
-	--toast-body: var(--foreground-muted);
-	--toast-wash: var(--toast-surface);
-	--toast-edge: var(--border);
-	/*
-	 * Sonner's dark theme paints the close button from these; keep them tone-neutral
-	 * so the chip reads as a consistent dismiss affordance, not a decorative extension
-	 * of the tinted wash. Inverted fill gives it its own identity on any tone.
-	 */
-	--normal-bg: var(--foreground);
-	--normal-bg-hover: var(--ink-strong);
-	--normal-border: transparent;
-	--normal-border-hover: transparent;
-	--normal-text: var(--background);
-	position: relative;
-	border: 1px solid var(--toast-edge);
-	background: var(--toast-wash);
-	color: var(--toast-body);
-}
+	body {
+		margin: 0;
+		min-width: 20rem;
+		background: var(--background);
+		color: var(--foreground);
+		font-size: 0.90625rem;
+		line-height: 1.5;
+		-webkit-font-smoothing: antialiased;
+	}
 
-/* Only the loading spinner keeps an icon; tone is carried by text and wash. */
-[data-sonner-toaster] .ridu-toast[data-sonner-toast]:not([data-type="loading"]) [data-icon] {
-	display: none;
-}
+	button,
+	input,
+	select,
+	textarea {
+		font: inherit;
+	}
 
-[data-sonner-toaster] .ridu-toast[data-sonner-toast] [data-title] {
-	color: var(--toast-title);
-}
+	button,
+	a,
+	input,
+	select,
+	textarea {
+		-webkit-tap-highlight-color: transparent;
+	}
 
-[data-sonner-toaster] .ridu-toast[data-sonner-toast] [data-description] {
-	color: var(--toast-body);
-}
+	a {
+		color: inherit;
+		text-decoration: none;
+	}
 
-/*
- * The toaster mirrors with interface direction, so the dismiss control uses
- * the matching logical corner. Colors come from the `--normal-*` variables
- * above; only geometry is set here, since sonner skips its own geometry rules
- * while `unstyled`.
- */
-[data-sonner-toaster] .ridu-toast[data-sonner-toast] [data-close-button] {
-	position: absolute;
-	top: -0.4375rem;
-	inset-inline-start: -0.4375rem;
-	display: grid;
-	place-items: center;
-	width: 1.375rem;
-	height: 1.375rem;
-	padding: 0;
-	border-width: 1px;
-	border-style: solid;
-	border-radius: 999px;
-	cursor: pointer;
-	transition:
-		background-color 0.12s ease,
-		border-color 0.12s ease;
-}
+	::selection {
+		background: color-mix(in oklab, var(--foreground) 18%, transparent);
+	}
 
-/* In a collapsed stack only the front toast is actionable, so only it shows one. */
-[data-sonner-toaster]
-	.ridu-toast[data-sonner-toast][data-front="false"]:not([data-expanded="true"])
-	[data-close-button] {
-	display: none;
-}
+	::placeholder {
+		color: var(--ink-placeholder);
+		opacity: 1;
+	}
 
-.ridu-toast[data-type="success"] {
-	--toast-title: color-mix(in oklab, var(--success) 58%, var(--foreground));
-	--toast-body: color-mix(in oklab, var(--success) 34%, var(--foreground-muted));
-	--toast-edge: color-mix(in oklab, var(--success) 26%, transparent);
-	--toast-wash: color-mix(in oklab, var(--success) 8%, var(--toast-surface));
-}
+	:focus-visible {
+		outline: var(--focus-outline);
+		outline-offset: var(--focus-outline-offset);
+	}
 
-.ridu-toast[data-type="warning"] {
-	--toast-title: color-mix(in oklab, var(--warning) 58%, var(--foreground));
-	--toast-body: color-mix(in oklab, var(--warning) 34%, var(--foreground-muted));
-	--toast-edge: color-mix(in oklab, var(--warning) 26%, transparent);
-	--toast-wash: color-mix(in oklab, var(--warning) 9%, var(--toast-surface));
-}
+	[data-slot="textarea"]:not([aria-invalid="true"]):focus-visible,
+	[data-slot="command-input"]:not([aria-invalid="true"]):focus-visible,
+	select:not([aria-invalid="true"]):focus-visible {
+		border-color: color-mix(in oklab, var(--ring) 78%, transparent);
+		box-shadow: none;
+		outline: none;
+	}
 
-.ridu-toast[data-type="info"] {
-	--toast-edge: color-mix(in oklab, var(--ink-secondary) 16%, transparent);
-	--toast-wash: color-mix(in oklab, var(--ink-secondary) 4%, var(--toast-surface));
-}
+	[data-slot="textarea"][aria-invalid="true"]:focus-visible,
+	[data-slot="command-input"][aria-invalid="true"]:focus-visible,
+	select[aria-invalid="true"]:focus-visible {
+		box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--destructive) 65%, transparent);
+		outline: none;
+	}
 
-.ridu-toast[data-type="error"] {
-	--toast-title: color-mix(in oklab, var(--destructive) 62%, var(--foreground));
-	--toast-body: color-mix(in oklab, var(--destructive) 38%, var(--foreground-muted));
-	--toast-edge: color-mix(in oklab, var(--destructive) 30%, transparent);
-	--toast-wash: color-mix(in oklab, var(--destructive) 9%, var(--toast-surface));
-}
+	.font-serif {
+		font-family: var(--font-serif);
+	}
 
-@keyframes ridu-fade-up {
-	from {
-		opacity: 0;
-		transform: translateY(7px);
+	.font-mono {
+		font-family: var(--font-mono);
 	}
-	to {
-		opacity: 1;
-		transform: none;
+
+	.ridu-popover-enter[data-state="open"],
+	.ridu-popover-enter:not([data-state]) {
+		animation: ridu-pop-in 0.16s ease both;
 	}
-}
 
-@keyframes ridu-pop-in {
-	from {
-		opacity: 0;
-		scale: 0.985;
-		translate: 0 -6px;
+	.ridu-dialog-enter[data-state="open"] {
+		animation: ridu-dialog-in 0.16s ease both;
 	}
-	to {
-		opacity: 1;
-		scale: 1;
-		translate: 0 0;
+
+	.ridu-dialog-enter.ridu-command-dialog[data-state="open"] {
+		animation-name: ridu-command-dialog-in;
 	}
-}
 
-@keyframes ridu-dialog-in {
-	from {
-		opacity: 0;
-		scale: 0.985;
+	.ridu-surface-grid {
+		background-image:
+			linear-gradient(color-mix(in oklab, var(--foreground) 2%, transparent) 1px, transparent 1px),
+			linear-gradient(
+				90deg,
+				color-mix(in oklab, var(--foreground) 2%, transparent) 1px,
+				transparent 1px
+			);
+		background-size: 32px 32px;
+		background-position: -1px -1px;
 	}
-	to {
-		opacity: 1;
-		scale: 1;
+
+	@keyframes ridu-fade-up {
+		from {
+			opacity: 0;
+			transform: translateY(7px);
+		}
+		to {
+			opacity: 1;
+			transform: none;
+		}
 	}
-}
 
-@keyframes ridu-command-dialog-in {
-	from {
-		opacity: 0;
-		scale: 0.985;
+	@keyframes ridu-pop-in {
+		from {
+			opacity: 0;
+			scale: 0.985;
+			translate: 0 -6px;
+		}
+		to {
+			opacity: 1;
+			scale: 1;
+			translate: 0 0;
+		}
 	}
-	to {
-		opacity: 1;
-		scale: 1;
+
+	@keyframes ridu-dialog-in {
+		from {
+			opacity: 0;
+			scale: 0.985;
+		}
+		to {
+			opacity: 1;
+			scale: 1;
+		}
 	}
-}
 
-@media (prefers-reduced-motion: reduce) {
-	html {
-		scroll-behavior: auto;
+	@keyframes ridu-command-dialog-in {
+		from {
+			opacity: 0;
+			scale: 0.985;
+		}
+		to {
+			opacity: 1;
+			scale: 1;
+		}
 	}
 
-	*,
-	*::before,
-	*::after {
-		animation-duration: 0.01ms !important;
-		animation-iteration-count: 1 !important;
-		transition-duration: 0.01ms !important;
-		scroll-behavior: auto !important;
+	@media (prefers-reduced-motion: reduce) {
+		html {
+			scroll-behavior: auto;
+		}
+
+		*,
+		*::before,
+		*::after {
+			animation-duration: 0.01ms !important;
+			animation-iteration-count: 1 !important;
+			transition-duration: 0.01ms !important;
+			scroll-behavior: auto !important;
+		}
 	}
 }