@ampless/admin 1.0.0-alpha.52 → 1.0.0-alpha.54

package/dist/chunk-OPRC3VJQ.js

@@ -0,0 +1,589 @@
+'use client';
+import {
+  invalidateSiteSettingsCache
+} from "./chunk-D72XF3Q3.js";
+import {
+  useLocale,
+  useT
+} from "./chunk-2SVJONQ7.js";
+
+// src/components/plugin-settings-form.tsx
+import { useState as useState2 } from "react";
+import {
+  resolveLocalized as resolveLocalized2
+} from "ampless";
+import { Button, Input, Label as Label2, Textarea } from "@ampless/runtime/ui";
+
+// src/lib/plugin-settings.ts
+import {
+  getKvStore,
+  SITE_CONFIG_PK,
+  isValidPluginKey,
+  validatePluginSettingValue
+} from "ampless";
+function pluginSettingKey(instanceId, fieldKey) {
+  return `plugins.${instanceId}.${fieldKey}`;
+}
+async function setPluginPublicSetting(instanceId, field, rawValue) {
+  if (!isValidPluginKey(instanceId)) {
+    throw new Error(`Invalid plugin instanceId: "${instanceId}"`);
+  }
+  if (!isValidPluginKey(field.key)) {
+    throw new Error(`Invalid plugin field key: "${field.key}"`);
+  }
+  const validated = validatePluginSettingValue(field, rawValue, "strict");
+  if (validated === null) {
+    throw new Error(`Invalid value for plugin field "${field.key}"`);
+  }
+  const store = getKvStore();
+  await store.put(SITE_CONFIG_PK, pluginSettingKey(instanceId, field.key), validated);
+}
+async function deletePluginPublicSetting(instanceId, field) {
+  if (!isValidPluginKey(instanceId)) {
+    throw new Error(`Invalid plugin instanceId: "${instanceId}"`);
+  }
+  if (!isValidPluginKey(field.key)) {
+    throw new Error(`Invalid plugin field key: "${field.key}"`);
+  }
+  const store = getKvStore();
+  await store.remove(SITE_CONFIG_PK, pluginSettingKey(instanceId, field.key));
+}
+
+// src/components/repeatable-field-editor.tsx
+import { useEffect, useState } from "react";
+import { resolveLocalized } from "ampless";
+import { Label } from "@ampless/runtime/ui";
+
+// src/lib/repeatable-field.ts
+function parseRepeatableValue(raw) {
+  if (!raw || raw.trim() === "") return [];
+  try {
+    const parsed = JSON.parse(raw);
+    if (!Array.isArray(parsed)) return [];
+    return parsed.filter(
+      (item) => item !== null && typeof item === "object" && !Array.isArray(item)
+    );
+  } catch {
+    return [];
+  }
+}
+function serializeRepeatableValue(items) {
+  return JSON.stringify(items);
+}
+function subFieldValueToFormString(_subField, value) {
+  if (value === void 0 || value === null) return "";
+  if (typeof value === "boolean") return value ? "true" : "false";
+  if (typeof value === "number") return String(value);
+  if (typeof value === "string") return value;
+  return String(value);
+}
+function formStringToSubFieldValue(subField, formString) {
+  switch (subField.type) {
+    case "boolean":
+      return formString === "true";
+    case "number": {
+      if (formString.trim() === "") return void 0;
+      const n = Number(formString);
+      return Number.isNaN(n) ? void 0 : n;
+    }
+    default:
+      return formString;
+  }
+}
+function makeEmptyItem(field) {
+  const item = {};
+  for (const sf of field.fields) {
+    if (sf.default !== void 0) {
+      item[sf.key] = sf.default;
+      continue;
+    }
+    if (sf.type === "boolean") {
+      item[sf.key] = false;
+    }
+  }
+  return item;
+}
+function itemLabel(field, item, index) {
+  if (field.itemLabelKey) {
+    const v = item[field.itemLabelKey];
+    if (v !== void 0 && v !== null && String(v).trim() !== "") {
+      return String(v);
+    }
+  }
+  return `Item ${index + 1}`;
+}
+function canAddItem(field, currentCount) {
+  const max = field.maxItems ?? 50;
+  return currentCount < max;
+}
+
+// src/components/repeatable-field-editor.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function RepeatableFieldEditor({
+  field,
+  id,
+  value,
+  invalid,
+  onChange
+}) {
+  const locale = useLocale();
+  const [items, setItems] = useState(
+    () => parseRepeatableValue(value)
+  );
+  useEffect(() => {
+    const incoming = parseRepeatableValue(value);
+    if (JSON.stringify(incoming) !== JSON.stringify(items)) {
+      setItems(incoming);
+    }
+  }, [value]);
+  function commit(next) {
+    setItems(next);
+    onChange(serializeRepeatableValue(next));
+  }
+  function updateCell(itemIdx, key, cellValue) {
+    const next = items.map(
+      (item, idx) => idx === itemIdx ? { ...item, [key]: cellValue } : item
+    );
+    commit(next);
+  }
+  function removeItem(itemIdx) {
+    commit(items.filter((_, idx) => idx !== itemIdx));
+  }
+  function addItem() {
+    if (!canAddItem(field, items.length)) return;
+    commit([...items, makeEmptyItem(field)]);
+  }
+  const addLabelText = field.addLabel ? resolveLocalized(field.addLabel, locale) : "+ Add item";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id,
+      "aria-invalid": invalid,
+      className: [
+        "space-y-3 rounded-md border p-3",
+        invalid ? "border-destructive" : "border-border"
+      ].join(" "),
+      children: [
+        items.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "No items yet." }),
+        items.map((item, itemIdx) => {
+          const label = itemLabel(field, item, itemIdx);
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "space-y-2 rounded-md border border-border bg-muted/30 p-3",
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-xs font-medium", children: label }),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "text-xs text-muted-foreground underline-offset-2 hover:text-destructive hover:underline",
+                      onClick: () => removeItem(itemIdx),
+                      "aria-label": `Remove ${label}`,
+                      children: "\xD7 Remove"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "space-y-2", children: field.fields.map((sf) => {
+                  const cellId = `${id}-${itemIdx}-${sf.key}`;
+                  const formString = subFieldValueToFormString(sf, item[sf.key]);
+                  return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+                    /* @__PURE__ */ jsxs(Label, { htmlFor: cellId, className: "text-xs", children: [
+                      resolveLocalized(sf.label, locale),
+                      sf.required && /* @__PURE__ */ jsx("span", { className: "ml-1 text-destructive", children: "*" })
+                    ] }),
+                    renderScalarInput(
+                      sf,
+                      cellId,
+                      formString,
+                      /* invalid */
+                      false,
+                      (s) => updateCell(itemIdx, sf.key, formStringToSubFieldValue(sf, s))
+                    )
+                  ] }, sf.key);
+                }) })
+              ]
+            },
+            itemIdx
+          );
+        }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "text-xs text-muted-foreground underline-offset-2 hover:underline disabled:cursor-not-allowed disabled:opacity-50",
+            onClick: addItem,
+            disabled: !canAddItem(field, items.length),
+            children: addLabelText
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/plugin-settings-form.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var CACHE_REBUILD_DELAY_MS = 8e3;
+function stringify(field, raw) {
+  if (raw === void 0 || raw === null) return "";
+  switch (field.type) {
+    case "boolean":
+      return raw === true ? "true" : raw === false ? "false" : String(raw);
+    case "json":
+      if (typeof raw === "string") return raw;
+      try {
+        return JSON.stringify(raw, null, 2);
+      } catch {
+        return "";
+      }
+    case "repeatable":
+      if (typeof raw === "string") return raw;
+      try {
+        return JSON.stringify(raw);
+      } catch {
+        return "[]";
+      }
+    default:
+      return typeof raw === "string" ? raw : String(raw);
+  }
+}
+function parse(field, raw) {
+  switch (field.type) {
+    case "boolean":
+      if (raw === "true") return true;
+      if (raw === "false") return false;
+      return null;
+    case "number": {
+      const trimmed = raw.trim();
+      if (trimmed === "") return null;
+      const n = Number(trimmed);
+      return Number.isNaN(n) ? null : n;
+    }
+    case "json": {
+      const trimmed = raw.trim();
+      if (trimmed === "") return null;
+      try {
+        return JSON.parse(trimmed);
+      } catch {
+        return null;
+      }
+    }
+    case "repeatable": {
+      const trimmed = raw.trim();
+      if (trimmed === "") return [];
+      try {
+        const parsed = JSON.parse(trimmed);
+        return Array.isArray(parsed) ? parsed : null;
+      } catch {
+        return null;
+      }
+    }
+    default:
+      return raw;
+  }
+}
+function PluginSettingsForm({
+  instanceId,
+  displayName,
+  fields,
+  initialValues
+}) {
+  const t = useT();
+  const locale = useLocale();
+  function defaultDisplay(field) {
+    return field.default !== void 0 ? stringify(field, field.default) : "";
+  }
+  const [state, setState] = useState2(() => {
+    const values = {};
+    for (const field of fields) {
+      const has = Object.prototype.hasOwnProperty.call(initialValues, field.key);
+      values[field.key] = has ? stringify(field, initialValues[field.key]) : defaultDisplay(field);
+    }
+    return { values, touched: {}, invalid: {} };
+  });
+  const [storedKeys, setStoredKeys] = useState2(
+    () => new Set(Object.keys(initialValues))
+  );
+  const [saving, setSaving] = useState2(false);
+  const [error, setError] = useState2(null);
+  const [info, setInfo] = useState2(null);
+  function update(key, value) {
+    setState((prev) => ({
+      values: { ...prev.values, [key]: value },
+      touched: { ...prev.touched, [key]: true },
+      invalid: { ...prev.invalid, [key]: false }
+    }));
+    setInfo(null);
+  }
+  function scheduleCacheInvalidation() {
+    setTimeout(async () => {
+      try {
+        await invalidateSiteSettingsCache();
+      } catch (err) {
+        console.warn("[plugin] cache invalidation failed", err);
+      }
+    }, CACHE_REBUILD_DELAY_MS);
+  }
+  async function reset(field) {
+    setError(null);
+    setInfo(null);
+    try {
+      await deletePluginPublicSetting(instanceId, field);
+      setState((prev) => ({
+        values: { ...prev.values, [field.key]: defaultDisplay(field) },
+        touched: { ...prev.touched, [field.key]: false },
+        invalid: { ...prev.invalid, [field.key]: false }
+      }));
+      setStoredKeys((prev) => {
+        if (!prev.has(field.key)) return prev;
+        const next = new Set(prev);
+        next.delete(field.key);
+        return next;
+      });
+      setInfo(t("plugins.resetDone"));
+      scheduleCacheInvalidation();
+    } catch (err) {
+      console.error("[plugin] reset failed", err);
+      setError(err instanceof Error ? err.message : String(err));
+    }
+  }
+  async function save(e) {
+    e.preventDefault();
+    setSaving(true);
+    setError(null);
+    setInfo(null);
+    const newInvalid = {};
+    const writes = [];
+    const writtenKeys = [];
+    for (const field of fields) {
+      if (!state.touched[field.key]) continue;
+      const raw = state.values[field.key] ?? "";
+      const parsed = parse(field, raw);
+      if (parsed === null && raw !== "") {
+        newInvalid[field.key] = true;
+        continue;
+      }
+      if (parsed === null) continue;
+      writes.push(setPluginPublicSetting(instanceId, field, parsed));
+      writtenKeys.push(field.key);
+    }
+    if (Object.keys(newInvalid).length > 0) {
+      setState((prev) => ({ ...prev, invalid: newInvalid }));
+      setSaving(false);
+      setError(t("plugins.invalidValue"));
+      return;
+    }
+    try {
+      await Promise.all(writes);
+      setInfo(t("plugins.saved"));
+      setState((prev) => ({ ...prev, touched: {}, invalid: {} }));
+      if (writtenKeys.length > 0) {
+        setStoredKeys((prev) => {
+          const next = new Set(prev);
+          for (const k of writtenKeys) next.add(k);
+          return next;
+        });
+      }
+      scheduleCacheInvalidation();
+    } catch (err) {
+      console.error("[plugin] save failed", err);
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setSaving(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs2("form", { onSubmit: save, className: "max-w-2xl space-y-5 rounded-md border p-4", children: [
+    /* @__PURE__ */ jsxs2("div", { children: [
+      /* @__PURE__ */ jsx2("h2", { className: "text-base font-semibold", children: displayName ? resolveLocalized2(displayName, locale) : instanceId }),
+      /* @__PURE__ */ jsx2("p", { className: "text-xs text-muted-foreground", children: instanceId })
+    ] }),
+    fields.map((field) => /* @__PURE__ */ jsx2(
+      FieldRow,
+      {
+        field,
+        value: state.values[field.key] ?? "",
+        invalid: !!state.invalid[field.key],
+        onChange: (v) => update(field.key, v),
+        onReset: () => void reset(field),
+        hasStoredValue: storedKeys.has(field.key)
+      },
+      field.key
+    )),
+    info && /* @__PURE__ */ jsx2("p", { className: "text-sm text-muted-foreground", children: info }),
+    error && /* @__PURE__ */ jsx2("p", { className: "text-sm text-destructive", children: error }),
+    /* @__PURE__ */ jsx2(Button, { type: "submit", disabled: saving, children: saving ? t("plugins.saving") : t("plugins.save") })
+  ] });
+}
+function FieldRow({ field, value, invalid, onChange, onReset, hasStoredValue }) {
+  const t = useT();
+  const locale = useLocale();
+  const id = `plugin-${field.key}`;
+  const labelEl = /* @__PURE__ */ jsxs2(Label2, { htmlFor: id, className: invalid ? "text-destructive" : void 0, children: [
+    resolveLocalized2(field.label, locale),
+    field.required && /* @__PURE__ */ jsx2("span", { className: "ml-1 text-destructive", children: "*" })
+  ] });
+  const description = field.description ? /* @__PURE__ */ jsx2("p", { className: "text-xs text-muted-foreground", children: resolveLocalized2(field.description, locale) }) : null;
+  const input = renderInput(field, id, value, invalid, onChange);
+  const placeholder = renderDefaultHint(field, locale);
+  return /* @__PURE__ */ jsxs2("div", { className: "space-y-1.5", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between", children: [
+      labelEl,
+      hasStoredValue && /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          className: "text-xs text-muted-foreground underline-offset-2 hover:underline",
+          onClick: onReset,
+          children: t("plugins.resetToDefault")
+        }
+      )
+    ] }),
+    description,
+    input,
+    placeholder
+  ] });
+}
+function renderDefaultHint(field, _locale) {
+  if (field.default === void 0) return null;
+  let preview;
+  if (typeof field.default === "string") preview = field.default;
+  else if (typeof field.default === "boolean" || typeof field.default === "number") {
+    preview = String(field.default);
+  } else {
+    try {
+      preview = JSON.stringify(field.default);
+    } catch {
+      return null;
+    }
+  }
+  if (!preview) return null;
+  return /* @__PURE__ */ jsx2("p", { className: "text-xs text-muted-foreground", children: /* @__PURE__ */ jsx2("code", { children: preview }) });
+}
+function renderScalarInput(field, id, value, invalid, onChange) {
+  switch (field.type) {
+    case "text":
+    case "url":
+      return /* @__PURE__ */ jsx2(
+        Input,
+        {
+          id,
+          value,
+          maxLength: field.type === "text" ? field.maxLength : void 0,
+          placeholder: "placeholder" in field ? field.placeholder : void 0,
+          onChange: (e) => onChange(e.target.value),
+          "aria-invalid": invalid,
+          type: field.type === "url" ? "url" : "text"
+        }
+      );
+    case "textarea":
+      return /* @__PURE__ */ jsx2(
+        Textarea,
+        {
+          id,
+          value,
+          rows: field.rows ?? 4,
+          maxLength: field.maxLength,
+          placeholder: field.placeholder,
+          onChange: (e) => onChange(e.target.value),
+          "aria-invalid": invalid
+        }
+      );
+    case "code":
+      return /* @__PURE__ */ jsxs2("div", { className: "space-y-1", children: [
+        field.language && /* @__PURE__ */ jsx2("p", { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: field.language }),
+        /* @__PURE__ */ jsx2(
+          Textarea,
+          {
+            id,
+            value,
+            rows: field.rows ?? 8,
+            maxLength: field.maxLength,
+            placeholder: field.placeholder,
+            onChange: (e) => onChange(e.target.value),
+            "aria-invalid": invalid,
+            className: "font-mono text-xs"
+          }
+        )
+      ] });
+    case "boolean":
+      return /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            id,
+            type: "checkbox",
+            checked: value === "true",
+            onChange: (e) => onChange(e.target.checked ? "true" : "false"),
+            className: "h-4 w-4"
+          }
+        ),
+        /* @__PURE__ */ jsx2("span", { className: "text-xs text-muted-foreground", children: value === "true" ? "on" : "off" })
+      ] });
+    case "number":
+      return /* @__PURE__ */ jsx2(
+        Input,
+        {
+          id,
+          type: "number",
+          value,
+          min: field.min,
+          max: field.max,
+          step: field.step,
+          onChange: (e) => onChange(e.target.value),
+          "aria-invalid": invalid
+        }
+      );
+    case "select":
+      return /* @__PURE__ */ jsxs2(
+        "select",
+        {
+          id,
+          className: "w-full rounded-md border bg-background px-2 py-1.5 text-sm",
+          value,
+          onChange: (e) => onChange(e.target.value),
+          "aria-invalid": invalid,
+          children: [
+            /* @__PURE__ */ jsx2("option", { value: "", children: "\u2014" }),
+            field.options.map((opt) => /* @__PURE__ */ jsx2("option", { value: opt.value, children: typeof opt.label === "string" ? opt.label : opt.value }, opt.value))
+          ]
+        }
+      );
+    case "json":
+      return /* @__PURE__ */ jsx2(
+        Textarea,
+        {
+          id,
+          value,
+          rows: field.rows ?? 8,
+          placeholder: field.placeholder ?? "{}",
+          onChange: (e) => onChange(e.target.value),
+          "aria-invalid": invalid,
+          className: "font-mono text-xs"
+        }
+      );
+  }
+}
+function renderInput(field, id, value, invalid, onChange) {
+  switch (field.type) {
+    case "repeatable":
+      return /* @__PURE__ */ jsx2(
+        RepeatableFieldEditor,
+        {
+          field,
+          id,
+          value,
+          invalid,
+          onChange
+        }
+      );
+    default:
+      return renderScalarInput(field, id, value, invalid, onChange);
+  }
+}
+
+export {
+  PluginSettingsForm,
+  renderScalarInput
+};

package/dist/components/plugin-settings-form.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { LocalizedString, PluginSettingField } from 'ampless';
+import { LocalizedString, PluginSettingField, PluginRepeatableField } from 'ampless';
 
 interface Props {
     instanceId: string;
@@ -13,5 +13,13 @@ interface Props {
     initialValues: Record<string, unknown>;
 }
 declare function PluginSettingsForm({ instanceId, displayName, fields, initialValues, }: Props): react_jsx_runtime.JSX.Element;
+/**
+ * Render a scalar (non-repeatable) plugin field input. Handles the 8
+ * scalar variant types: text, url, textarea, code, boolean, number,
+ * select, json. Factored out of `renderInput` so the repeatable case
+ * can call back into it per sub-field cell without interleaving with
+ * the repeatable branch.
+ */
+declare function renderScalarInput(field: Exclude<PluginSettingField, PluginRepeatableField>, id: string, value: string, invalid: boolean, onChange: (v: string) => void): React.ReactNode;
 
-export { PluginSettingsForm };
+export { PluginSettingsForm, renderScalarInput };

package/dist/components/plugin-settings-form.js

@@ -1,10 +1,12 @@
 "use client";
 import {
-  PluginSettingsForm
-} from "../chunk-6VT6V3XF.js";
+  PluginSettingsForm,
+  renderScalarInput
+} from "../chunk-OPRC3VJQ.js";
 import "../chunk-D72XF3Q3.js";
 import "../chunk-2SVJONQ7.js";
 import "../chunk-KYFSM7MS.js";
 export {
-  PluginSettingsForm
+  PluginSettingsForm,
+  renderScalarInput
 };