+
+
+
+
+
+ );
+}
diff --git a/application/v2_ui/src/components/admin/BrandingImageField.tsx b/application/v2_ui/src/components/admin/BrandingImageField.tsx
new file mode 100644
index 000000000..b3772da4d
--- /dev/null
+++ b/application/v2_ui/src/components/admin/BrandingImageField.tsx
@@ -0,0 +1,159 @@
+// BrandingImageField.tsx
+// Upload control for a logo or favicon.
+//
+// Branding images cannot ride along with the JSON settings PATCH, so this control saves
+// immediately through the multipart branding endpoint rather than joining the page's
+// buffered draft. That is a deliberate exception to the save-bar model: a file input has no
+// meaningful "unsaved" state to show, and the server has to convert the image before
+// anything can be previewed.
+
+import { useRef, useState } from 'react';
+import { clsx } from 'clsx';
+import { AlertCircle, Check, ImageOff, Loader2, Upload } from 'lucide-react';
+import { ApiError, uploadFile } from '../../lib/apiClient';
+import type { AdminField, BrandingAsset, BrandingUploadResponse } from '../../lib/adminFields';
+import { GlassButton } from '../ui/primitives';
+
+export function BrandingImageField({
+ field,
+ asset,
+ scalePercent,
+ onUploaded,
+}: {
+ field: AdminField;
+ asset?: BrandingAsset;
+ /** Applied to the preview so the logo size control can be judged against the real image. */
+ scalePercent?: number;
+ onUploaded: (target: string, result: BrandingUploadResponse) => void;
+}) {
+ const inputRef = useRef
+
+
+
+
+
+ {title}
+ {description ? ( +{description}
+ ) : null} +{children}
+
+ {footer ? (
+
+ {footer}
+
+ ) : null}
+
+
+ );
+}
diff --git a/application/v2_ui/src/components/admin/CustomPageDesigner.tsx b/application/v2_ui/src/components/admin/CustomPageDesigner.tsx
new file mode 100644
index 000000000..265339fae
--- /dev/null
+++ b/application/v2_ui/src/components/admin/CustomPageDesigner.tsx
@@ -0,0 +1,368 @@
+// CustomPageDesigner.tsx
+// Create and edit static custom page metadata.
+//
+// Backed by the same `/api/admin/custom-pages` CRUD the server-rendered designer uses, so a
+// page created in either interface is identical. The form only writes metadata: the HTML,
+// CSS, JS and asset files themselves are deployed with the application, and this names
+// which of them a page uses.
+
+import { useState } from 'react';
+import { clsx } from 'clsx';
+import { AlertCircle, Loader2, Plus, X } from 'lucide-react';
+import { AdminModal } from './AdminModal';
+import { GlassButton } from '../ui/primitives';
+import {
+ ACCESS_LEVEL_LABELS,
+ parseRoles,
+ validateCustomPage,
+ type CustomPage,
+} from '../../lib/customPages';
+
+const inputClass = clsx(
+ 'w-full rounded-lg border border-edge bg-surface-1 px-2.5 py-1.5',
+ 'text-sm text-text-1 placeholder:text-text-3',
+ 'focus:border-accent focus:outline-none',
+);
+
+const FILE_FIELDS: Array<{ key: 'css_files' | 'js_files' | 'asset_files' | 'json_files'; label: string; placeholder: string }> = [
+ { key: 'css_files', label: 'CSS files', placeholder: 'my-page.css' },
+ { key: 'js_files', label: 'JavaScript files', placeholder: 'my-page.js' },
+ { key: 'asset_files', label: 'Asset files', placeholder: 'logo.png' },
+ { key: 'json_files', label: 'JSON files', placeholder: 'config.json' },
+];
+
+function Field({
+ label,
+ error,
+ help,
+ children,
+}: {
+ label: string;
+ error?: string;
+ help?: string;
+ children: React.ReactNode;
+}) {
+ return (
+
+ {field.label}
+ {asset?.present ? (
+ version {asset.version}
+ ) : null}
+
+
+
+
+
+ {asset?.url ? (
+ 
+ ) : (
+
+ )}
+
+
+
+ {
+ const file = event.target.files?.[0];
+ if (file) {
+ void handleFile(file);
+ }
+ }}
+ />
+
+
+ inputRef.current?.click()}
+ >
+ {uploading ? (
+
+
+ {savedAt ? (
+
+
+
+ {field.help ? (
+ {field.help}
+ ) : null} + + {error ? ( +
+
+
+ {children}
+ {help ?
+ );
+}
+
+/** A named list of deployed files, added one at a time. */
+function FileListEditor({
+ label,
+ placeholder,
+ files,
+ error,
+ onChange,
+}: {
+ label: string;
+ placeholder: string;
+ files: string[];
+ error?: string;
+ onChange: (next: string[]) => void;
+}) {
+ const [entry, setEntry] = useState('');
+
+ const add = () => {
+ const candidate = entry.trim();
+ if (!candidate || files.includes(candidate)) {
+ setEntry('');
+ return;
+ }
+ onChange([...files, candidate]);
+ setEntry('');
+ };
+
+ return (
+ {help}
: null} + {error ? ( +
+
+ setEntry(event.target.value)}
+ onKeyDown={(event) => {
+ if (event.key === 'Enter') {
+ event.preventDefault();
+ add();
+ }
+ }}
+ />
+
+
+
+
+ {files.length ? (
+ -
+ {files.map((file) => (
+
- + {file} + + + ))} +
+ {serverError ? (
+
+
+
+ '}
+ >
+
+ patch({ slug: event.target.value.trim().toLowerCase() })
+ }
+ />
+
+
+
+ patch({ title: event.target.value })}
+ />
+
+
+
+