@realiizlabs/admin 0.11.2 → 0.13.0

package/dist/forms-ui/index.js

@@ -1,9 +1,235 @@
 "use client";
-import { walkSchema, titlecase } from '../chunk-JLR5K6RP.js';
-import { FORM_CSS } from '../chunk-2GSYBARR.js';
 import { useState, useRef, useId, useEffect, useCallback, useMemo } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
+// src/forms-ui/ContentForm.tsx
+
+// src/forms/internals.ts
+function asNode(schema, what = "schema") {
+  const n = schema;
+  if (!n || typeof n !== "object" || !n._zod?.def?.type) {
+    throw new TypeError(`walkSchema: ${what} is not a zod 4 schema`);
+  }
+  return n;
+}
+function checkMessage(def) {
+  const e = def.error;
+  if (!e) return void 0;
+  if (typeof e === "string") return e;
+  const out = e({});
+  if (typeof out === "string") return out;
+  return out?.message;
+}
+
+// src/forms/checks.ts
+function readChecks(node) {
+  const constraints = {};
+  const messages = {};
+  for (const c of node._zod.def.checks ?? []) {
+    const d = c._zod.def;
+    const msg = checkMessage(d);
+    let key;
+    switch (d.check) {
+      case "min_length":
+        constraints.min = d.minimum;
+        key = "min_length";
+        break;
+      case "max_length":
+        constraints.max = d.maximum;
+        key = "max_length";
+        break;
+      case "length_equals":
+        constraints.exact = d.length;
+        key = "length_equals";
+        break;
+      case "greater_than":
+        constraints.min = d.inclusive ? d.value : (d.value ?? 0) + 1;
+        key = "greater_than";
+        break;
+      case "less_than":
+        constraints.max = d.inclusive ? d.value : (d.value ?? 0) - 1;
+        key = "less_than";
+        break;
+      case "string_format":
+        if (d.format === "regex" && d.pattern) {
+          constraints.pattern = d.pattern.source;
+          constraints.format = "regex";
+          key = "regex";
+        } else if (d.format === "url" || d.format === "email") {
+          constraints.format = d.format;
+          key = d.format;
+        } else {
+          key = d.format;
+        }
+        break;
+      case "number_format":
+        if (d.format === "safeint" || d.format === "int32") {
+          constraints.format = "int";
+          key = "int";
+        }
+        break;
+      case "custom":
+        key = "custom";
+        break;
+      default:
+        key = d.check;
+    }
+    if (key && msg) messages[key] = msg;
+  }
+  return { constraints, messages };
+}
+
+// src/forms/unwrap.ts
+function unwrap(start) {
+  let node = start;
+  let required = true;
+  for (let i = 0; i < 16; i++) {
+    const def = node._zod.def;
+    if (def.type === "optional" || def.type === "nullable" || def.type === "default") {
+      required = false;
+      if (!def.innerType) break;
+      node = def.innerType;
+    } else if (def.type === "pipe") {
+      const next = def.out ?? def.in;
+      if (!next) break;
+      node = next;
+    } else {
+      break;
+    }
+  }
+  return { node, type: node._zod.def.type, required };
+}
+
+// src/forms/inputs.ts
+var TEXTAREA_MIN_MAX = 120;
+function inputFor(node) {
+  const def = node._zod.def;
+  const { constraints, messages } = readChecks(node);
+  switch (def.type) {
+    case "string": {
+      if (constraints.format === "url") return { input: "url", constraints, messages };
+      const long = (constraints.max ?? 0) > TEXTAREA_MIN_MAX;
+      return { input: long ? "textarea" : "text", constraints, messages };
+    }
+    case "date":
+      return { input: "date", constraints, messages };
+    case "number":
+    case "int":
+      return { input: "number", constraints, messages };
+    case "boolean":
+      return { input: "boolean", constraints, messages };
+    case "enum":
+    case "literal": {
+      const options = Object.values(def.entries ?? {}).map(String);
+      return { input: "select", constraints, messages, options };
+    }
+    case "array": {
+      if (def.element) {
+        const item = unwrap(def.element);
+        const inner = readChecks(item.node);
+        constraints.item = inner;
+      }
+      return { input: "tags", constraints, messages };
+    }
+    default:
+      return { input: "text", constraints, messages };
+  }
+}
+
+// src/forms/labels.ts
+function readMeta(schema) {
+  const s = schema;
+  const raw = typeof s.meta === "function" ? s.meta() ?? {} : {};
+  const pick = (k) => typeof raw[k] === "string" ? raw[k] : void 0;
+  const rec = raw.recommended;
+  const recommended = Array.isArray(rec) && rec.length === 2 && rec.every((n) => typeof n === "number") ? [rec[0], rec[1]] : void 0;
+  const INPUTS = ["text", "textarea", "date", "number", "boolean", "select", "tags", "image", "url", "time"];
+  const input = typeof raw.input === "string" && INPUTS.includes(raw.input) ? raw.input : void 0;
+  return {
+    label: pick("label"),
+    placeholder: pick("placeholder"),
+    description: pick("description") ?? (typeof s.description === "string" ? s.description : void 0),
+    recommended,
+    suffix: pick("suffix"),
+    help: pick("help"),
+    input
+  };
+}
+function inputOverrideFor(name, schema, entry) {
+  return entry?.inputs?.[name] ?? readMeta(schema).input;
+}
+function recommendedFor(name, schema, entry) {
+  return entry?.recommended?.[name] ?? readMeta(schema).recommended;
+}
+function titlecase(name) {
+  const words = name.replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/[_-]+/g, " ").toLowerCase().trim();
+  return words.charAt(0).toUpperCase() + words.slice(1);
+}
+function labelFor(name, schema, entry) {
+  const fromRegistry = entry?.labels?.[name];
+  if (fromRegistry) return fromRegistry;
+  const meta = readMeta(schema);
+  return meta.label ?? meta.description ?? titlecase(name);
+}
+function placeholderFor(name, schema, entry) {
+  return entry?.placeholders?.[name] ?? readMeta(schema).placeholder;
+}
+function helpFor(name, schema, entry) {
+  return entry?.help?.[name] ?? readMeta(schema).help;
+}
+
+// src/forms/walk.ts
+function walkSchema(schema, entry = {}) {
+  const root = asNode(schema);
+  const shape = shapeOf(root);
+  const names = Object.keys(shape);
+  const specs = names.map((name) => {
+    const raw = shape[name];
+    const { node, required } = unwrap(raw);
+    const info = inputFor(node);
+    const role = roleFor(name, entry);
+    return {
+      name,
+      label: labelFor(name, raw, entry),
+      input: role === "image" ? "image" : inputOverrideFor(name, raw, entry) ?? info.input,
+      required,
+      constraints: info.constraints,
+      messages: info.messages,
+      placeholder: placeholderFor(name, raw, entry),
+      recommended: recommendedFor(name, raw, entry),
+      suffix: readMeta(raw).suffix,
+      help: helpFor(name, raw, entry),
+      order: 0,
+      role,
+      options: entry.options?.[name] ?? info.options
+    };
+  });
+  return applyOrder(specs, entry.order ?? []);
+}
+function shapeOf(root) {
+  let node = root;
+  for (let i = 0; i < 8 && !node._zod.def.shape; i++) {
+    const def = node._zod.def;
+    const next = def.innerType ?? def.in;
+    if (!next) break;
+    node = next;
+  }
+  const shape = node._zod.def.shape;
+  if (!shape) throw new TypeError(`walkSchema: expected an object schema, got "${root._zod.def.type}"`);
+  return shape;
+}
+function roleFor(name, entry) {
+  if (entry.hidden?.includes(name)) return "hidden";
+  if (entry.body === name) return "body";
+  if (entry.images?.includes(name)) return "image";
+  return "field";
+}
+function applyOrder(specs, order) {
+  const rank = new Map(order.map((n, i) => [n, i]));
+  const named = specs.filter((s) => rank.has(s.name)).sort((a, b) => rank.get(a.name) - rank.get(b.name));
+  const rest = specs.filter((s) => !rank.has(s.name));
+  return [...named, ...rest].map((s, i) => ({ ...s, order: i }));
+}
 function ChipsInput({ id, name, value, onChange, onBlur, placeholder, invalid, max }) {
   const [draft, setDraft] = useState("");
   const commit = () => {
@@ -48,7 +274,7 @@ function ChipsInput({ id, name, value, onChange, onBlur, placeholder, invalid, m
     ] })
   ] });
 }
-function labelFor(value, labels) {
+function labelFor2(value, labels) {
   if (labels?.[value]) return labels[value];
   return value ? titlecase(value) : "\u2014";
 }
@@ -122,7 +348,7 @@ function SelectInput(p) {
       default: {
         if (e.key.length === 1 && /\S/.test(e.key)) {
           const k = e.key.toLowerCase();
-          const idx = choices.findIndex((c) => labelFor(c, p.labels).toLowerCase().startsWith(k));
+          const idx = choices.findIndex((c) => labelFor2(c, p.labels).toLowerCase().startsWith(k));
           if (idx >= 0) setActive(idx);
         }
       }
@@ -146,7 +372,7 @@ function SelectInput(p) {
         disabled: p.disabled,
         onClick: () => open ? close() : setOpen(true),
         children: [
-          /* @__PURE__ */ jsx("span", { className: p.value ? void 0 : "realiiz-select__placeholder", children: labelFor(p.value, p.labels) }),
+          /* @__PURE__ */ jsx("span", { className: p.value ? void 0 : "realiiz-select__placeholder", children: labelFor2(p.value, p.labels) }),
           /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M6 9l6 6 6-6" }) })
         ]
       }
@@ -163,7 +389,7 @@ function SelectInput(p) {
         onClick: () => pick(c),
         children: [
           /* @__PURE__ */ jsx("span", { className: "realiiz-select__check", "aria-hidden": "true", children: c === p.value ? "\u2713" : "" }),
-          /* @__PURE__ */ jsx("span", { children: labelFor(c, p.labels) })
+          /* @__PURE__ */ jsx("span", { children: labelFor2(c, p.labels) })
         ]
       },
       c || "__empty"
@@ -1082,6 +1308,129 @@ function groupIssues(list) {
   return { byField, formLevel };
 }
 
+// src/forms-ui/styles.ts
+var FORM_CSS = `
+.realiiz-form{
+  --_fg:var(--realiiz-form-fg,#111);
+  --_muted:var(--realiiz-form-muted,#666);
+  --_border:var(--realiiz-form-border,#cfcfcf);
+  --_accent:var(--realiiz-form-accent,#111);
+  --_accent-fg:var(--realiiz-form-accent-fg,#fff);
+  --_danger:var(--realiiz-form-danger,#b3261e);
+  --_radius:var(--realiiz-form-radius,6px);
+  --_font:var(--realiiz-form-font,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif);
+  --_ring:var(--realiiz-form-focus-ring,0 0 0 3px rgba(0,0,0,.15));
+  box-sizing:border-box;max-width:100%;color:var(--_fg);font-family:var(--_font);font-size:15px;line-height:1.4;
+}
+.realiiz-form *,.realiiz-form *::before,.realiiz-form *::after{box-sizing:inherit}
+.realiiz-form fieldset{border:0;margin:0 0 20px;padding:0;min-width:0}
+.realiiz-form legend{font-weight:600;font-size:13px;letter-spacing:.02em;text-transform:uppercase;color:var(--_muted);margin-bottom:12px;padding:0}
+.realiiz-form__field{display:block;margin:0 0 16px}
+.realiiz-form__label{display:block;font-weight:500;margin-bottom:6px}
+.realiiz-form__required{color:var(--_danger);margin-left:3px}
+.realiiz-form__control{display:block;width:100%;max-width:100%;font:inherit;color:inherit;background:#fff;border:1px solid var(--_border);border-radius:var(--_radius);padding:9px 11px;min-height:40px}
+.realiiz-form__control:focus{outline:none;border-color:var(--_accent);box-shadow:var(--_ring)}
+.realiiz-form__control--textarea{min-height:110px;resize:vertical}
+.realiiz-form__control--body{min-height:280px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px}
+.realiiz-form__control--invalid{border-color:var(--_danger)}
+.realiiz-select{position:relative}
+.realiiz-select__btn{display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;cursor:pointer;background:#fff}
+.realiiz-select__btn svg{flex-shrink:0;color:var(--_muted);transition:transform .15s}
+.realiiz-select__btn--open{border-color:var(--_accent);box-shadow:var(--_ring)}
+.realiiz-select__btn--open svg{transform:rotate(180deg)}
+.realiiz-select__btn:disabled{opacity:.6;cursor:default}
+.realiiz-select__placeholder{color:var(--_muted)}
+.realiiz-select__menu{position:absolute;left:0;right:0;top:calc(100% + 6px);margin:0;padding:6px 0;list-style:none;background:#fff;border:1px solid var(--_border);border-radius:var(--_radius);box-shadow:0 8px 24px rgba(14,23,38,.14);max-height:260px;overflow:auto;z-index:40}
+.realiiz-select__item{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:14px;color:var(--_fg);cursor:pointer}
+.realiiz-select__item--active{background:var(--realiiz-form-hover,rgba(0,0,0,.05))}
+.realiiz-select__item--selected{font-weight:600}
+.realiiz-select__check{width:1em;flex-shrink:0;color:var(--_accent);font-weight:700}
+.realiiz-form__check{display:flex;align-items:center;gap:8px;font-weight:500}
+.realiiz-form__check input{width:18px;height:18px;margin:0}
+.realiiz-form__helper{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--_muted);margin-top:4px;min-height:1em}
+.realiiz-form__count{margin-left:auto;font-variant-numeric:tabular-nums}
+.realiiz-form__error{color:var(--_danger);font-size:13px;margin-top:4px}
+.realiiz-image{border:1px dashed var(--_border);border-radius:var(--_radius);padding:16px 18px;background:#fff;outline:none;transition:border-color .15s}
+.realiiz-image--over{border-color:var(--_accent);border-style:solid}
+.realiiz-image--invalid{border-color:var(--_danger)}
+.realiiz-image--busy{opacity:.7}
+.realiiz-image__empty{display:flex;align-items:center;gap:14px;flex-wrap:wrap;color:var(--_muted)}
+.realiiz-image__icon{flex-shrink:0;color:var(--_muted)}
+.realiiz-image__or{font-size:13px}
+.realiiz-image__has{display:flex;align-items:flex-start;gap:16px}
+.realiiz-image__thumb{display:block;max-height:160px;max-width:min(320px,55%);width:auto;object-fit:cover;border-radius:8px;border:1px solid var(--_border);background:#f6f8fa}
+.realiiz-image__meta{display:flex;flex-direction:column;gap:10px;min-width:0}
+.realiiz-image__detail{font-size:13px;color:var(--_muted);word-break:break-all}
+.realiiz-image__actions{display:flex;align-items:center;gap:14px}
+.realiiz-image__remove{font:inherit;font-size:13px;background:none;border:0;padding:0;color:var(--_muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
+.realiiz-image__remove:hover{color:var(--_danger)}
+.realiiz-image__hint{font-size:12px;color:var(--_muted);margin-top:10px}
+.realiiz-image .realiiz-form__error{margin-top:8px}
+@media (max-width:720px){.realiiz-image__has{flex-direction:column}.realiiz-image__thumb{max-width:100%}}
+.realiiz-form__alert{border:1px solid var(--_danger);border-radius:var(--_radius);padding:12px 14px;margin:0 0 20px;color:var(--_danger)}
+.realiiz-form__alert ul{margin:6px 0 0;padding-left:18px}
+.realiiz-form__actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:8px}
+.realiiz-form__help{text-decoration:underline dotted;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);text-underline-offset:4px;cursor:help}
+.realiiz-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
+.realiiz-form__footer{max-width:920px}
+.realiiz-form__bar{display:flex;align-items:center;gap:10px;margin-top:16px;padding:12px 0;border-top:1px solid var(--_border);background:#fff}
+.realiiz-form__status{margin-right:auto;font-size:.85rem;color:var(--_muted)}
+.realiiz-form__bar[data-dirty] .realiiz-form__status{color:var(--_fg)}
+.realiiz-form__button{font:inherit;font-weight:600;border-radius:var(--_radius);padding:10px 16px;border:1px solid var(--_border);background:#fff;color:var(--_fg);cursor:pointer;min-height:40px}
+.realiiz-form__button--primary{background:var(--_accent);color:var(--_accent-fg);border-color:var(--_accent)}
+.realiiz-form__button:disabled{opacity:.6;cursor:default}
+.realiiz-md{--_md-head:#fafbfd;--_md-hover:#f4f8fd;--_md-hover-line:#bcd0ea;--_md-on:#eef4fb;--_md-tip:#1f2933;position:relative}
+.realiiz-md__mode{display:inline-flex;align-self:flex-start;width:max-content;gap:2px;padding:3px;background:color-mix(in srgb,var(--_border) 40%,transparent);border-radius:8px;margin-bottom:8px}
+.realiiz-md__mode button{font:inherit;font-size:.8rem;padding:5px 13px;border:0;border-radius:6px;background:transparent;color:var(--_muted);cursor:pointer}
+.realiiz-md__mode button[aria-selected="true"]{background:#fff;color:var(--_fg);box-shadow:0 1px 2px rgba(0,0,0,.12)}
+.realiiz-md__panel{position:relative;z-index:0;display:flex;flex-direction:column;border:1px solid var(--_border);border-radius:10px;background:#fff;overflow:hidden}
+.realiiz-md__panel:focus-within{border-color:var(--_md-hover-line)}
+.realiiz-md__head{position:relative;z-index:5;display:flex;align-items:center;gap:2px;flex-wrap:wrap;padding:5px 7px;background:var(--_md-head);border-bottom:1px solid var(--_border);flex-shrink:0}
+.realiiz-md__tools{display:flex;align-items:center;gap:3px;flex-wrap:wrap}
+.realiiz-md__spacer{flex:1}
+.realiiz-md__head button{position:relative;min-width:31px;height:28px;padding:0 9px;display:inline-flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--_border);border-radius:6px;font-family:inherit;font-size:.82rem;color:var(--_fg);cursor:pointer;line-height:1}
+.realiiz-md__head button:hover:not(:disabled){border-color:var(--_md-hover-line);background:var(--_md-hover)}
+.realiiz-md__head button:active{background:var(--_md-on)}
+.realiiz-md__head button.on{background:var(--_md-on);border-color:var(--_accent);color:var(--_accent);font-weight:600}
+.realiiz-md__ico{width:15px;height:15px;display:block}
+.realiiz-md__dot{font-size:1.05rem;line-height:1}
+.realiiz-md__sep{width:1px;height:17px;background:var(--_border);margin:0 5px}
+.realiiz-md__insert{display:inline-flex;align-items:center;gap:3px;border-left:1px solid var(--_border);padding-left:8px;margin-left:6px}
+.realiiz-md__insert button{background:#f6f8fa;color:var(--_muted);padding:0;width:31px}
+.realiiz-md__insert button:hover{color:var(--_accent)}
+.realiiz-md__lab{font-size:.74rem;color:var(--_muted);margin-right:3px}
+.realiiz-md__head button[data-tip]::after{content:attr(data-tip);position:absolute;top:calc(100% + 6px);left:0;background:var(--_md-tip);color:#fff;font-size:.72rem;padding:4px 8px;border-radius:5px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s;z-index:20}
+.realiiz-md__head button[data-tip]:hover::after,.realiiz-md__head button[data-tip]:focus-visible::after{opacity:1}
+.realiiz-md__expand[data-tip]::after{left:auto;right:0}
+.realiiz-md__tgwrap{position:relative;display:inline-flex}
+.realiiz-md__tgrid{position:absolute;top:calc(100% + 6px);left:0;background:#fff;border:1px solid var(--_border);border-radius:9px;padding:9px;box-shadow:0 10px 28px rgba(0,0,0,.14);z-index:7;display:block}
+.realiiz-md__tgcells{display:grid;grid-template-columns:repeat(6,17px);gap:3px}
+.realiiz-md__tgcells i{width:17px;height:15px;border:1px solid var(--_border);border-radius:2px;background:#fff;cursor:pointer;display:block}
+.realiiz-md__tgcells i.hot{background:#dbe9fb;border-color:var(--_accent)}
+.realiiz-md__tglab{display:block;margin-top:8px;font-size:.74rem;color:var(--_muted);text-align:center;white-space:nowrap}
+.realiiz-md .realiiz-md__ta{flex:1 1 auto;border:0;border-radius:0;resize:vertical;background:#fff;max-width:none;padding:16px 18px;line-height:1.65}
+.realiiz-md .realiiz-md__ta:focus{outline:none;box-shadow:none}
+.realiiz-md__preview{padding:20px 24px;background:#fff}
+.realiiz-md__note{padding:4px 2px}
+.realiiz-md--fs{position:fixed;inset:0;z-index:60;background:#fff;padding:14px 22px 22px;overflow:auto;display:flex;flex-direction:column}
+.realiiz-md--fs .realiiz-md__panel{flex:1;min-height:0}
+.realiiz-md--fs .realiiz-md__ta,.realiiz-md--fs .realiiz-md__preview{flex:1;min-height:0;overflow:auto;resize:none}
+.realiiz-prose{max-width:68ch;line-height:1.65}
+.realiiz-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:40px;padding:5px 8px;background:#fff;border:1px solid var(--_border);border-radius:var(--_radius)}
+.realiiz-chips:focus-within{border-color:var(--_accent);box-shadow:var(--_ring)}
+.realiiz-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 4px 2px 9px;border:1px solid var(--_border);border-radius:999px;font-size:.8rem}
+.realiiz-chip button{font:inherit;line-height:1;width:18px;height:18px;border-radius:50%;border:0;background:transparent;color:var(--_muted);cursor:pointer}
+.realiiz-chips__input{flex:1;min-width:120px;border:0;background:transparent;font:inherit;color:inherit;outline:none;padding:4px}
+.realiiz-chips__count{margin-left:auto;color:var(--_muted);font-size:.75rem}
+.realiiz-gauge{display:inline-flex;align-items:center;gap:10px;font-size:.75rem;color:var(--_muted)}
+.realiiz-gauge__bar{position:relative;width:140px;height:6px;border-radius:3px;background:var(--_border);overflow:hidden}
+.realiiz-gauge__zone{position:absolute;top:0;bottom:0;background:rgba(21,128,61,.28)}
+.realiiz-gauge__fill{position:absolute;top:0;bottom:0;left:0;background:var(--_muted);border-radius:3px;transition:width .12s}
+.realiiz-gauge__text b{font-weight:600;color:inherit}
+.realiiz-gauge--ok{color:#15803d}.realiiz-gauge--ok .realiiz-gauge__fill{background:#15803d}
+.realiiz-gauge--over{color:var(--_danger)}.realiiz-gauge--over .realiiz-gauge__fill{background:var(--_danger)}
+`;
+
 // src/forms-ui/values.ts
 function toControl(spec, raw) {
   if (raw === void 0 || raw === null) return spec.input === "boolean" ? false : "";