@bygghammar/cms-platform 0.14.0 → 0.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "Shared CMS platform: blocks, block types, i18n core, UI primitives and design-token contract used by every Bygghammar/Voyara site.",
   "type": "module",
   "sideEffects": false,
@@ -95,7 +95,8 @@
     "./platform/contract": "./src/platform/contract.ts",
     "./backoffice/media/ReviewImageUpload": "./src/backoffice/media/ReviewImageUpload.tsx",
     "./migrations/*": "./migrations/*",
-    "./backoffice/seo/PageSeoPanelView": "./src/backoffice/seo/PageSeoPanelView.tsx"
+    "./backoffice/seo/PageSeoPanelView": "./src/backoffice/seo/PageSeoPanelView.tsx",
+    "./backoffice/SectionFormView": "./src/backoffice/SectionFormView.tsx"
   },
   "dependencies": {
     "fflate": "^0.8.3"

package/src/backoffice/SectionFormView.tsx

@@ -0,0 +1,799 @@
+import {
+  createContext,
+  useContext,
+  useState,
+  type ComponentType,
+  type CSSProperties,
+  type ReactNode,
+} from "react";
+import {
+  ChevronDown,
+  ChevronRight,
+  GripVertical,
+  Plus,
+  Trash2,
+  ArrowUp,
+  ArrowDown,
+  Image as ImageIcon,
+  Crosshair,
+} from "lucide-react";
+import {
+  DndContext,
+  closestCenter,
+  PointerSensor,
+  KeyboardSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  arrayMove,
+  useSortable,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+
+import { MediaPickerDialog } from "./inspectors/fields";
+
+/**
+ * Generic recursive editor for CMS section values, shared by every site.
+ *
+ * Shape detection (no per-section schema needed):
+ *  - Localized<string>  → object whose keys are a subset of the host locales
+ *                         and whose values are strings.
+ *  - LocalizedImage     → object with a string `src` and a Localized `alt`.
+ *  - Array              → sortable list of items of the array's element shape.
+ *  - Plain object       → recurse into fields.
+ *  - string/number/bool → primitive input.
+ *
+ * Everything site-specific (locale list, image renderer, focus editor, the
+ * managed-forms list) is injected by the host.
+ * Backoffice copy is English by project rule.
+ */
+
+type AnyVal = unknown;
+
+export type SectionFormImageProps = {
+  src: string;
+  alt: string;
+  className?: string;
+  responsive?: boolean;
+};
+
+export type SectionFormFocusPickerProps = {
+  src: string;
+  modal?: boolean;
+  title?: string;
+  onClose?: () => void;
+};
+
+export type SectionFormManagedForm = {
+  key: string;
+  name: string;
+  is_active?: boolean | null;
+};
+
+export type SectionFormDeps = {
+  /** Locale codes the site edits, in tab order. */
+  locales: readonly string[];
+  /** Locale shown first and used for list summaries. */
+  defaultLocale: string;
+  /** Host image component (focal cropping, responsive sources, …). */
+  ImageComponent: ComponentType<SectionFormImageProps>;
+  /** Host focus-point editor, already wired to its persistence calls. */
+  FocusPickerComponent: ComponentType<SectionFormFocusPickerProps>;
+  /** Managed forms offered by the `formKey` picker. */
+  forms: SectionFormManagedForm[];
+};
+
+const DepsContext = createContext<SectionFormDeps | null>(null);
+
+function useDeps(): SectionFormDeps {
+  const deps = useContext(DepsContext);
+  if (!deps) throw new Error("SectionFormView deps are missing");
+  return deps;
+}
+
+function isPlainObject(v: unknown): v is Record<string, unknown> {
+  return typeof v === "object" && v !== null && !Array.isArray(v);
+}
+
+function makeIsLocalizedString(locales: readonly string[]) {
+  const set = new Set<string>(locales);
+  return (v: unknown): v is Record<string, string> => {
+    if (!isPlainObject(v)) return false;
+    const keys = Object.keys(v);
+    if (keys.length === 0) return false;
+    return keys.every((k) => set.has(k) && typeof v[k] === "string");
+  };
+}
+
+function isLocalizedImage(
+  v: unknown,
+): v is { src: string; alt: Record<string, string>; width?: number; height?: number } {
+  return isPlainObject(v) && typeof v.src === "string" && isPlainObject(v.alt);
+}
+
+function labelize(key: string): string {
+  return key
+    .replace(/([A-Z])/g, " $1")
+    .replace(/[_-]+/g, " ")
+    .replace(/\s+/g, " ")
+    .trim()
+    .replace(/^./, (c) => c.toUpperCase());
+}
+
+function useIsLocalizedString() {
+  const { locales } = useDeps();
+  return makeIsLocalizedString(locales);
+}
+
+function blankLike(template: unknown, deps: SectionFormDeps): unknown {
+  const isLocalizedString = makeIsLocalizedString(deps.locales);
+  if (isLocalizedString(template)) return { [deps.defaultLocale]: "" };
+  if (isLocalizedImage(template)) return { src: "", alt: { [deps.defaultLocale]: "" } };
+  if (Array.isArray(template)) return [];
+  if (isPlainObject(template)) {
+    const out: Record<string, unknown> = {};
+    for (const [k, v] of Object.entries(template)) out[k] = blankLike(v, deps);
+    if (typeof out["id"] === "string") out["id"] = `it_${Math.random().toString(36).slice(2, 8)}`;
+    return out;
+  }
+  if (typeof template === "string") return "";
+  if (typeof template === "number") return 0;
+  if (typeof template === "boolean") return false;
+  return "";
+}
+
+export function SectionFormView({
+  value,
+  onChange,
+  deps,
+}: {
+  value: AnyVal;
+  onChange: (next: AnyVal) => void;
+  deps: SectionFormDeps;
+}) {
+  return (
+    <DepsContext.Provider value={deps}>
+      <Node value={value} onChange={onChange} path="" depth={0} />
+    </DepsContext.Provider>
+  );
+}
+
+function Node({
+  value,
+  onChange,
+  path,
+  depth,
+  fieldLabel,
+}: {
+  value: AnyVal;
+  onChange: (v: AnyVal) => void;
+  path: string;
+  depth: number;
+  fieldLabel?: string;
+}) {
+  const isLocalizedString = useIsLocalizedString();
+  if (isLocalizedString(value)) {
+    return <LocalizedStringField value={value} onChange={onChange} label={fieldLabel} />;
+  }
+  if (isLocalizedImage(value)) {
+    return <ImageField value={value} onChange={onChange} label={fieldLabel} />;
+  }
+  if (Array.isArray(value)) {
+    return (
+      <ArrayField value={value} onChange={onChange} path={path} depth={depth} label={fieldLabel} />
+    );
+  }
+  if (isPlainObject(value)) {
+    return (
+      <ObjectField value={value} onChange={onChange} path={path} depth={depth} label={fieldLabel} />
+    );
+  }
+  if (path.endsWith("formKey") && (typeof value === "string" || value == null)) {
+    return (
+      <FormKeyField
+        value={(value as string) ?? ""}
+        onChange={onChange}
+        label={fieldLabel ?? "Form"}
+      />
+    );
+  }
+  return (
+    <PrimitiveField
+      value={value}
+      onChange={onChange}
+      label={fieldLabel}
+      hint={
+        path.endsWith("autoplayMs")
+          ? "Autoplay speed in milliseconds (e.g. 5000 = 5 seconds). Set to 0 to turn autoplay off."
+          : undefined
+      }
+    />
+  );
+}
+
+/* -------------------- Managed form picker -------------------- */
+
+function FormKeyField({
+  value,
+  onChange,
+  label,
+}: {
+  value: string;
+  onChange: (v: AnyVal) => void;
+  label?: string;
+}) {
+  const { forms } = useDeps();
+  const known = forms.some((f) => f.key === value);
+
+  return (
+    <Field label={label}>
+      <select
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        className="w-full border border-ink/20 bg-white px-3 py-2 text-sm"
+      >
+        <option value="">Select a form…</option>
+        {forms.map((f) => (
+          <option key={f.key} value={f.key}>
+            {f.name} ({f.key}){f.is_active === false ? " — inactive" : ""}
+          </option>
+        ))}
+        {value && !known ? <option value={value}>{value} — missing</option> : null}
+      </select>
+      <p className="mt-1 text-xs text-ink/50">
+        Fields, notifications and submissions are managed in Forms.
+      </p>
+    </Field>
+  );
+}
+
+/* -------------------- Localized string -------------------- */
+
+function LocalizedStringField({
+  value,
+  onChange,
+  label,
+}: {
+  value: Record<string, string>;
+  onChange: (v: Record<string, string>) => void;
+  label?: string;
+}) {
+  const { locales, defaultLocale } = useDeps();
+  const [locale, setLocale] = useState<string>(defaultLocale);
+  const current = value[locale] ?? "";
+  const multiline = current.length > 60 || current.includes("\n");
+  return (
+    <Field label={label}>
+      <div className="border border-ink/15 bg-white">
+        <div className="flex items-center gap-1 border-b border-ink/10 px-2 py-1">
+          {locales.map((loc) => {
+            const filled = typeof value[loc] === "string" && value[loc]!.trim().length > 0;
+            return (
+              <button
+                key={loc}
+                type="button"
+                onClick={() => setLocale(loc)}
+                className={`px-2 py-1 text-[0.65rem] uppercase tracking-[0.18em] ${
+                  loc === locale ? "bg-ink text-paper" : "text-ink/60 hover:text-ink"
+                }`}
+                title={filled ? "Has content" : "Empty"}
+              >
+                {loc}
+                {!filled && <span className="ml-1 opacity-50">·</span>}
+              </button>
+            );
+          })}
+        </div>
+        {multiline ? (
+          <textarea
+            value={current}
+            onChange={(e) => onChange({ ...value, [locale]: e.target.value })}
+            className="w-full p-3 text-sm bg-white text-ink outline-none min-h-[100px] resize-y font-sans"
+          />
+        ) : (
+          <input
+            type="text"
+            value={current}
+            onChange={(e) => onChange({ ...value, [locale]: e.target.value })}
+            className="w-full p-3 text-sm bg-white text-ink outline-none"
+          />
+        )}
+      </div>
+    </Field>
+  );
+}
+
+/* -------------------- Image -------------------- */
+
+function ImageField({
+  value,
+  onChange,
+  label,
+}: {
+  value: { src: string; alt: Record<string, string>; width?: number; height?: number };
+  onChange: (v: {
+    src: string;
+    alt: Record<string, string>;
+    width?: number;
+    height?: number;
+  }) => void;
+  label?: string;
+}) {
+  const { ImageComponent, FocusPickerComponent } = useDeps();
+  const [pickerOpen, setPickerOpen] = useState(false);
+  const isVideo = /\.(mp4|webm|mov)(\?|$)/i.test(value.src);
+  const [focusOpen, setFocusOpen] = useState(false);
+  return (
+    <Field label={label}>
+      <div className="border border-ink/15 bg-white p-3 space-y-3 min-w-0">
+        <div className="flex gap-3 items-start min-w-0">
+          {value.src ? (
+            isVideo ? (
+              <video
+                src={value.src}
+                muted
+                className="w-24 h-24 shrink-0 object-cover border border-ink/10 bg-ice/40"
+              />
+            ) : (
+              <ImageComponent
+                src={value.src}
+                responsive={false}
+                alt=""
+                className="w-24 h-24 shrink-0 object-cover border border-ink/10 bg-ice/40"
+              />
+            )
+          ) : (
+            <div className="w-24 h-24 shrink-0 border border-dashed border-ink/20 grid place-items-center text-[0.6rem] uppercase tracking-[0.2em] text-ink/40">
+              no media
+            </div>
+          )}
+          <div className="flex-1 min-w-0 space-y-2">
+            <label className="block text-[0.6rem] uppercase tracking-[0.2em] text-ink/55">
+              Source URL
+            </label>
+            <div className="flex flex-wrap gap-2 min-w-0">
+              <input
+                type="text"
+                value={value.src}
+                onChange={(e) => onChange({ ...value, src: e.target.value })}
+                placeholder="https://…"
+                className="w-full min-w-0 border border-ink/15 p-2 text-sm text-ink bg-white outline-none"
+              />
+              <button
+                type="button"
+                onClick={() => setPickerOpen(true)}
+                className="inline-flex shrink-0 items-center gap-1 border border-ink/20 px-3 py-2 text-[0.7rem] uppercase tracking-widest hover:border-sea"
+              >
+                <ImageIcon className="size-3.5" /> Library
+              </button>
+              {value.src && !isVideo ? (
+                <button
+                  type="button"
+                  onClick={() => setFocusOpen(true)}
+                  className="inline-flex shrink-0 items-center gap-1 border border-ink/20 px-3 py-2 text-[0.7rem] uppercase tracking-widest hover:border-sea"
+                  title="Choose which part of the image stays visible when cropped"
+                >
+                  <Crosshair className="size-3.5" /> Focus
+                </button>
+              ) : null}
+            </div>
+
+            <div className="flex flex-wrap gap-2 min-w-0">
+              <div className="flex-1 min-w-[6rem]">
+                <label className="block text-[0.6rem] uppercase tracking-[0.2em] text-ink/55">
+                  Width
+                </label>
+                <input
+                  type="number"
+                  value={value.width ?? ""}
+                  onChange={(e) =>
+                    onChange({
+                      ...value,
+                      width: e.target.value ? Number(e.target.value) : undefined,
+                    })
+                  }
+                  className="w-full min-w-0 border border-ink/15 p-2 text-sm bg-white text-ink outline-none"
+                />
+              </div>
+              <div className="flex-1 min-w-[6rem]">
+                <label className="block text-[0.6rem] uppercase tracking-[0.2em] text-ink/55">
+                  Height
+                </label>
+                <input
+                  type="number"
+                  value={value.height ?? ""}
+                  onChange={(e) =>
+                    onChange({
+                      ...value,
+                      height: e.target.value ? Number(e.target.value) : undefined,
+                    })
+                  }
+                  className="w-full min-w-0 border border-ink/15 p-2 text-sm bg-white text-ink outline-none"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <LocalizedStringField
+          value={value.alt}
+          onChange={(alt) => onChange({ ...value, alt })}
+          label="Alt text (per language, required for SEO)"
+        />
+      </div>
+      {pickerOpen && (
+        <MediaPickerDialog
+          accept="any"
+          onPick={(m) => onChange({ ...value, src: m.url })}
+          onClose={() => setPickerOpen(false)}
+        />
+      )}
+      {focusOpen && value.src ? (
+        <FocusPickerComponent
+          src={value.src}
+          modal
+          title={value.src.split("/").pop()}
+          onClose={() => setFocusOpen(false)}
+        />
+      ) : null}
+    </Field>
+  );
+}
+
+/* -------------------- Array -------------------- */
+
+function ArrayField({
+  value,
+  onChange,
+  path,
+  depth,
+  label,
+}: {
+  value: unknown[];
+  onChange: (v: unknown[]) => void;
+  path: string;
+  depth: number;
+  label?: string;
+}) {
+  const deps = useDeps();
+  const [openIdx, setOpenIdx] = useState<number | null>(value.length <= 3 ? 0 : null);
+  // Stable per-position ids so dnd-kit can reorder items whose original data has no id.
+  const [ids, setIds] = useState<string[]>(() =>
+    value.map((_, i) => `row_${i}_${Math.random().toString(36).slice(2, 8)}`),
+  );
+  if (ids.length !== value.length) {
+    // Rebuild when items are added/removed externally (add/remove below always keeps ids in sync).
+    setIds(value.map((_, i) => `row_${i}_${Math.random().toString(36).slice(2, 8)}`));
+  }
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
+  );
+
+  const update = (i: number, next: unknown) => {
+    const copy = value.slice();
+    copy[i] = next;
+    onChange(copy);
+  };
+  const move = (i: number, dir: -1 | 1) => {
+    const j = i + dir;
+    if (j < 0 || j >= value.length) return;
+    onChange(arrayMove(value.slice(), i, j));
+    setIds((prev) => arrayMove(prev, i, j));
+    setOpenIdx(j);
+  };
+  const remove = (i: number) => {
+    const copy = value.slice();
+    copy.splice(i, 1);
+    onChange(copy);
+    setIds((prev) => {
+      const nx = prev.slice();
+      nx.splice(i, 1);
+      return nx;
+    });
+    setOpenIdx(null);
+  };
+  const add = () => {
+    const template = value[0] ?? "";
+    const next = value.concat([blankLike(template, deps)]);
+    onChange(next);
+    setIds((prev) => [...prev, `row_${prev.length}_${Math.random().toString(36).slice(2, 8)}`]);
+    setOpenIdx(next.length - 1);
+  };
+
+  const onDragEnd = (e: DragEndEvent) => {
+    const { active, over } = e;
+    if (!over || active.id === over.id) return;
+    const oi = ids.indexOf(String(active.id));
+    const ni = ids.indexOf(String(over.id));
+    if (oi < 0 || ni < 0) return;
+    onChange(arrayMove(value.slice(), oi, ni));
+    setIds((prev) => arrayMove(prev, oi, ni));
+    if (openIdx === oi) setOpenIdx(ni);
+    else if (openIdx === ni) setOpenIdx(oi);
+  };
+
+  return (
+    <Field label={label ? `${label} (${value.length})` : undefined}>
+      <div className="border border-ink/10 bg-ice/20 min-w-0">
+        {value.length === 0 && <div className="p-4 text-xs text-ink/50 italic">Empty list</div>}
+        <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={onDragEnd}>
+          <SortableContext items={ids} strategy={verticalListSortingStrategy}>
+            <ul className="divide-y divide-ink/10">
+              {value.map((item, i) => (
+                <SortableArrayRow
+                  key={ids[i]}
+                  id={ids[i]!}
+                  index={i}
+                  lastIndex={value.length - 1}
+                  open={openIdx === i}
+                  summary={itemSummary(item, deps)}
+                  onToggle={() => setOpenIdx(openIdx === i ? null : i)}
+                  onMoveUp={() => move(i, -1)}
+                  onMoveDown={() => move(i, 1)}
+                  onRemove={() => {
+                    if (confirm("Remove this item?")) remove(i);
+                  }}
+                >
+                  {openIdx === i && (
+                    <div className="border-t border-ink/10 p-4 bg-ice/10">
+                      <Node
+                        value={item}
+                        onChange={(next) => update(i, next)}
+                        path={`${path}[${i}]`}
+                        depth={depth + 1}
+                      />
+                    </div>
+                  )}
+                </SortableArrayRow>
+              ))}
+            </ul>
+          </SortableContext>
+        </DndContext>
+        <div className="border-t border-ink/10 p-2">
+          <button
+            type="button"
+            onClick={add}
+            className="inline-flex items-center gap-2 text-xs uppercase tracking-[0.18em] text-ink/70 hover:text-ink px-2 py-1"
+          >
+            <Plus className="size-3" /> Add item
+          </button>
+        </div>
+      </div>
+    </Field>
+  );
+}
+
+function SortableArrayRow({
+  id,
+  index,
+  lastIndex,
+  open,
+  summary,
+  onToggle,
+  onMoveUp,
+  onMoveDown,
+  onRemove,
+  children,
+}: {
+  id: string;
+  index: number;
+  lastIndex: number;
+  open: boolean;
+  summary: string;
+  onToggle: () => void;
+  onMoveUp: () => void;
+  onMoveDown: () => void;
+  onRemove: () => void;
+  children?: ReactNode;
+}) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id,
+  });
+  const style: CSSProperties = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+  return (
+    <li ref={setNodeRef} style={style} className="bg-white min-w-0">
+      <div className="flex items-center gap-2 px-3 py-2 min-w-0">
+        <button
+          {...attributes}
+          {...listeners}
+          type="button"
+          className="shrink-0 cursor-grab active:cursor-grabbing text-ink/30 hover:text-ink/70 p-1"
+          title="Drag to reorder"
+          onClick={(e) => e.stopPropagation()}
+        >
+          <GripVertical className="size-3.5" />
+        </button>
+        <button
+          type="button"
+          onClick={onToggle}
+          className="flex-1 min-w-0 text-left text-xs flex items-center gap-2"
+        >
+          {open ? (
+            <ChevronDown className="size-3 shrink-0" />
+          ) : (
+            <ChevronRight className="size-3 shrink-0" />
+          )}
+          <span className="text-ink/50 shrink-0">#{index + 1}</span>
+          <span className="text-ink truncate">{summary}</span>
+        </button>
+
+        <button
+          type="button"
+          onClick={onMoveUp}
+          disabled={index === 0}
+          className="shrink-0 p-1 text-ink/50 hover:text-ink disabled:opacity-30"
+          title="Move up"
+        >
+          <ArrowUp className="size-3" />
+        </button>
+        <button
+          type="button"
+          onClick={onMoveDown}
+          disabled={index === lastIndex}
+          className="shrink-0 p-1 text-ink/50 hover:text-ink disabled:opacity-30"
+          title="Move down"
+        >
+          <ArrowDown className="size-3" />
+        </button>
+        <button
+          type="button"
+          onClick={onRemove}
+          className="shrink-0 p-1 text-ink/50 hover:text-red-600"
+          title="Remove"
+        >
+          <Trash2 className="size-3" />
+        </button>
+      </div>
+      {children}
+    </li>
+  );
+}
+
+/** Best-effort one-line summary for a collapsed list row. */
+export function itemSummary(item: unknown, deps: SectionFormDeps): string {
+  const isLocalizedString = makeIsLocalizedString(deps.locales);
+  const fallback = deps.defaultLocale;
+  if (typeof item === "string") return item.slice(0, 60);
+  if (typeof item === "number" || typeof item === "boolean") return String(item);
+  if (isLocalizedString(item)) return item[fallback] ?? Object.values(item)[0] ?? "";
+  if (isLocalizedImage(item))
+    return item.alt?.[fallback] ?? item.src.split("/").pop() ?? "image";
+  if (isPlainObject(item)) {
+    for (const k of [
+      "name",
+      "label",
+      "title",
+      "quote",
+      "value",
+      "tripNo",
+      "courseNo",
+      "location",
+    ]) {
+      const v = item[k];
+      if (isLocalizedString(v)) return v[fallback] ?? Object.values(v)[0] ?? "";
+      if (typeof v === "string") return v;
+    }
+    return "…";
+  }
+  return "";
+}
+
+/* -------------------- Object -------------------- */
+
+function ObjectField({
+  value,
+  onChange,
+  path,
+  depth,
+  label,
+}: {
+  value: Record<string, unknown>;
+  onChange: (v: Record<string, unknown>) => void;
+  path: string;
+  depth: number;
+  label?: string;
+}) {
+  const entries = Object.entries(value);
+  const content = (
+    <div className={depth === 0 ? "space-y-5" : "space-y-4"}>
+      {entries.map(([k, v]) => (
+        <Node
+          key={k}
+          value={v}
+          onChange={(nv) => onChange({ ...value, [k]: nv })}
+          path={path ? `${path}.${k}` : k}
+          depth={depth + 1}
+          fieldLabel={labelize(k)}
+        />
+      ))}
+    </div>
+  );
+  if (depth === 0) return content;
+  return (
+    <Field label={label}>
+      <div className="border border-ink/10 bg-white p-4 min-w-0">{content}</div>
+    </Field>
+  );
+}
+
+/* -------------------- Primitive -------------------- */
+
+function PrimitiveField({
+  value,
+  onChange,
+  label,
+  hint,
+}: {
+  value: unknown;
+  onChange: (v: unknown) => void;
+  label?: string;
+  hint?: string;
+}) {
+  if (typeof value === "boolean") {
+    return (
+      <Field label={label}>
+        <label className="inline-flex items-center gap-2 text-sm text-ink">
+          <input
+            type="checkbox"
+            checked={value}
+            onChange={(e) => onChange(e.target.checked)}
+            className="size-4"
+          />
+          <span className="text-ink/70">{value ? "On" : "Off"}</span>
+        </label>
+      </Field>
+    );
+  }
+  if (typeof value === "number") {
+    return (
+      <Field label={label}>
+        <input
+          type="number"
+          min={0}
+          value={value}
+          onChange={(e) => onChange(e.target.value === "" ? 0 : Number(e.target.value))}
+          className="w-full border border-ink/15 p-2 text-sm bg-white text-ink outline-none"
+        />
+        {hint && <p className="mt-1 text-[0.7rem] leading-snug text-ink/55">{hint}</p>}
+      </Field>
+    );
+  }
+  const str = value == null ? "" : String(value);
+  const isUrl =
+    /^https?:\/\//.test(str) ||
+    (label?.toLowerCase().includes("url") ?? false) ||
+    (label?.toLowerCase().includes("href") ?? false);
+  return (
+    <Field label={label}>
+      <input
+        type="text"
+        value={str}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={isUrl ? "https://… or /path" : ""}
+        className="w-full border border-ink/15 p-2 text-sm bg-white text-ink outline-none"
+      />
+    </Field>
+  );
+}
+
+/* -------------------- Field wrapper -------------------- */
+
+function Field({ label, children }: { label?: string; children: ReactNode }) {
+  if (!label) return <>{children}</>;
+  return (
+    <div className="min-w-0">
+      <div className="mb-1 text-[0.65rem] uppercase tracking-[0.2em] text-ink/60">{label}</div>
+      {children}
+    </div>
+  );
+}