@open-mercato/ui 0.4.2-canary-c02407ff85

package/dist/backend/JsonBuilder.js

@@ -0,0 +1,322 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Button } from "../primitives/button.js";
+import { Plus, Trash2, ChevronRight, ChevronDown, Code, LayoutList } from "lucide-react";
+function cn(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+function getJsonType(value) {
+  if (value === null) return "null";
+  if (Array.isArray(value)) return "array";
+  return typeof value;
+}
+function JsonBuilder({
+  value,
+  onChange,
+  disabled,
+  error
+}) {
+  const [mode, setMode] = React.useState("raw");
+  const [rawString, setRawString] = React.useState(() => {
+    if (value === null) return "{}";
+    return typeof value === "object" ? JSON.stringify(value, null, 2) : String(value || "{}");
+  });
+  const [parseError, setParseError] = React.useState(null);
+  React.useEffect(() => {
+    if (value === null) {
+      if (!disabled) {
+        onChange({});
+      }
+      setRawString("{}");
+      setParseError(null);
+      return;
+    }
+    if (typeof value === "object") {
+      setRawString(JSON.stringify(value, null, 2));
+      setParseError(null);
+    }
+  }, [value, disabled, onChange]);
+  const handleRawChange = (str) => {
+    setRawString(str);
+    try {
+      if (str.trim() === "") {
+        onChange({});
+        setParseError(null);
+      } else {
+        const parsed = JSON.parse(str);
+        onChange(parsed);
+        setParseError(null);
+      }
+    } catch (e) {
+      onChange(str);
+      setParseError("Invalid JSON");
+    }
+  };
+  const switchToBuilder = () => {
+    try {
+      if (typeof value === "string") {
+        JSON.parse(value);
+      }
+      setMode("builder");
+    } catch (e) {
+      alert("Cannot switch to Builder mode: Invalid JSON");
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4 border rounded-md p-4 bg-card", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2 border-b pb-2 mb-2", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => setMode("raw"),
+          className: cn(
+            "flex items-center gap-2 px-3 py-1.5 text-sm font-medium rounded-md transition-colors",
+            mode === "raw" ? "bg-muted text-foreground" : "text-muted-foreground hover:text-foreground hover:bg-muted"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(Code, { className: "w-4 h-4" }),
+            "Raw JSON"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: switchToBuilder,
+          className: cn(
+            "flex items-center gap-2 px-3 py-1.5 text-sm font-medium rounded-md transition-colors",
+            mode === "builder" ? "bg-muted text-foreground" : "text-muted-foreground hover:text-foreground hover:bg-muted"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(LayoutList, { className: "w-4 h-4" }),
+            "Builder"
+          ]
+        }
+      )
+    ] }),
+    mode === "raw" ? /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          value: rawString,
+          onChange: (e) => handleRawChange(e.target.value),
+          onBlur: () => {
+            try {
+              const parsed = JSON.parse(rawString);
+              setRawString(JSON.stringify(parsed, null, 2));
+            } catch {
+            }
+          },
+          placeholder: '{"key": "value"}',
+          className: "w-full rounded border px-3 py-2 min-h-[300px] text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500",
+          disabled
+        }
+      ),
+      parseError && /* @__PURE__ */ jsx("div", { className: "text-xs text-red-600", children: "Invalid JSON format" })
+    ] }) : /* @__PURE__ */ jsx("div", { className: "min-h-[300px] text-sm overflow-x-auto", children: typeof value === "object" && value !== null ? /* @__PURE__ */ jsx(
+      JsonNode,
+      {
+        data: value,
+        onChange,
+        readOnly: disabled,
+        isRoot: true
+      }
+    ) : /* @__PURE__ */ jsx("div", { className: "text-muted-foreground italic p-4 text-center", children: "Value is not an object or array. Switch to Raw to edit." }) }),
+    error && /* @__PURE__ */ jsx("div", { className: "text-xs text-red-600", children: error })
+  ] });
+}
+function JsonNode({ data, onChange, onDelete, readOnly, label, isRoot }) {
+  const type = getJsonType(data);
+  const isContainer = type === "object" || type === "array";
+  const [collapsed, setCollapsed] = React.useState(false);
+  const handleTypeChange = (newType) => {
+    let newVal = "";
+    switch (newType) {
+      case "string":
+        newVal = "";
+        break;
+      case "number":
+        newVal = 0;
+        break;
+      case "boolean":
+        newVal = false;
+        break;
+      case "object":
+        newVal = {};
+        break;
+      case "array":
+        newVal = [];
+        break;
+      case "null":
+        newVal = null;
+        break;
+    }
+    onChange(newVal);
+  };
+  const handleAddKey = () => {
+    if (type === "object") {
+      const newKey = `newKey_${Object.keys(data).length}`;
+      onChange({ ...data, [newKey]: "" });
+    } else if (type === "array") {
+      onChange([...data, ""]);
+    }
+  };
+  const handleChildChange = (key, newVal) => {
+    if (type === "object") {
+      onChange({ ...data, [key]: newVal });
+    } else if (type === "array") {
+      const arr = [...data];
+      arr[Number(key)] = newVal;
+      onChange(arr);
+    }
+  };
+  const handleKeyRename = (oldKey, newKey) => {
+    if (oldKey === newKey) return;
+    const keys = Object.keys(data);
+    const newData = {};
+    keys.forEach((k) => {
+      if (k === oldKey) {
+        newData[newKey] = data[k];
+      } else {
+        newData[k] = data[k];
+      }
+    });
+    onChange(newData);
+  };
+  const handleChildDelete = (key) => {
+    if (type === "object") {
+      const newData = { ...data };
+      delete newData[key];
+      onChange(newData);
+    } else if (type === "array") {
+      onChange(data.filter((_, i) => i !== key));
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("pl-0", !isRoot && "pl-4 border-l border-border ml-1"), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 py-1 group", children: [
+      isContainer && /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setCollapsed(!collapsed), className: "mt-1 text-muted-foreground hover:text-foreground", children: collapsed ? /* @__PURE__ */ jsx(ChevronRight, { className: "w-3 h-3" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "w-3 h-3" }) }),
+      !isContainer && !isRoot && /* @__PURE__ */ jsx("div", { className: "w-3" }),
+      " ",
+      label !== void 0 && !isRoot && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground font-mono", children: label }),
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs", children: ":" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 flex gap-2 items-center flex-wrap", children: [
+        !readOnly && /* @__PURE__ */ jsxs(
+          "select",
+          {
+            value: type,
+            onChange: (e) => handleTypeChange(e.target.value),
+            className: "text-xs border rounded px-1 py-0.5 bg-muted text-foreground focus:ring-1 focus:ring-blue-500",
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "string", children: "String" }),
+              /* @__PURE__ */ jsx("option", { value: "number", children: "Number" }),
+              /* @__PURE__ */ jsx("option", { value: "boolean", children: "Boolean" }),
+              /* @__PURE__ */ jsx("option", { value: "object", children: "Object" }),
+              /* @__PURE__ */ jsx("option", { value: "array", children: "Array" }),
+              /* @__PURE__ */ jsx("option", { value: "null", children: "Null" })
+            ]
+          }
+        ),
+        type === "string" && /* @__PURE__ */ jsx(
+          "input",
+          {
+            className: "flex-1 min-w-[120px] text-sm border rounded px-2 py-0.5 focus:outline-none focus:border-blue-500",
+            value: data,
+            onChange: (e) => onChange(e.target.value),
+            disabled: readOnly
+          }
+        ),
+        type === "number" && /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "number",
+            className: "flex-1 w-[100px] text-sm border rounded px-2 py-0.5 focus:outline-none focus:border-blue-500",
+            value: data,
+            onChange: (e) => onChange(parseFloat(e.target.value) || 0),
+            disabled: readOnly
+          }
+        ),
+        type === "boolean" && /* @__PURE__ */ jsxs(
+          "select",
+          {
+            className: "flex-1 w-[100px] text-sm border rounded px-2 py-0.5 focus:outline-none focus:border-blue-500",
+            value: String(data),
+            onChange: (e) => onChange(e.target.value === "true"),
+            disabled: readOnly,
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "true", children: "true" }),
+              /* @__PURE__ */ jsx("option", { value: "false", children: "false" })
+            ]
+          }
+        ),
+        type === "null" && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "null" }),
+        isContainer && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: type === "object" ? `{ ${Object.keys(data).length} items }` : `[ ${data.length} items ]` }),
+        onDelete && !readOnly && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onDelete,
+            className: "text-muted-foreground hover:text-red-500 opacity-0 group-hover:opacity-100 transition-opacity",
+            title: "Remove item",
+            children: /* @__PURE__ */ jsx(Trash2, { className: "w-3.5 h-3.5" })
+          }
+        )
+      ] })
+    ] }),
+    isContainer && !collapsed && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 w-full pl-2", children: [
+      type === "object" && Object.entries(data).map(([key, val], idx) => /* @__PURE__ */ jsxs("div", { className: "flex", children: [
+        /* @__PURE__ */ jsx("div", { className: "pt-2", children: /* @__PURE__ */ jsx(
+          "input",
+          {
+            className: "w-[100px] text-xs font-mono border-b border-transparent hover:border-gray-300 focus:border-blue-500 bg-transparent focus:outline-none text-right pr-1",
+            value: key,
+            onChange: (e) => handleKeyRename(key, e.target.value),
+            disabled: readOnly
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
+          JsonNode,
+          {
+            data: val,
+            onChange: (v) => handleChildChange(key, v),
+            onDelete: () => handleChildDelete(key),
+            readOnly
+          }
+        ) })
+      ] }, idx)),
+      type === "array" && data.map((val, idx) => /* @__PURE__ */ jsx(
+        JsonNode,
+        {
+          label: String(idx),
+          data: val,
+          onChange: (v) => handleChildChange(idx, v),
+          onDelete: () => handleChildDelete(idx),
+          readOnly
+        },
+        idx
+      )),
+      !readOnly && /* @__PURE__ */ jsx("div", { className: "pl-4 mt-1", children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          size: "sm",
+          onClick: handleAddKey,
+          className: "h-6 text-xs",
+          children: [
+            /* @__PURE__ */ jsx(Plus, { className: "w-3 h-3 mr-1" }),
+            "Add ",
+            type === "object" ? "Property" : "Item"
+          ]
+        }
+      ) })
+    ] })
+  ] });
+}
+export {
+  JsonBuilder
+};
+//# sourceMappingURL=JsonBuilder.js.map

package/dist/backend/JsonBuilder.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/backend/JsonBuilder.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { Button } from '../primitives/button'\nimport { Plus, Trash2, ChevronRight, ChevronDown, Code, LayoutList } from 'lucide-react'\n\nfunction cn(...classes: (string | undefined | null | false)[]) {\n    return classes.filter(Boolean).join(' ')\n}\n\nexport type JsonBuilderProps = {\n    value: any\n    onChange: (value: any) => void\n    disabled?: boolean\n    error?: string\n}\n\ntype JsonNodeType = 'string' | 'number' | 'boolean' | 'object' | 'array' | 'null'\n\nfunction getJsonType(value: any): JsonNodeType {\n    if (value === null) return 'null'\n    if (Array.isArray(value)) return 'array'\n    return typeof value as JsonNodeType\n}\n\nexport function JsonBuilder({\n    value,\n    onChange,\n    disabled,\n    error\n}: JsonBuilderProps) {\n    const [mode, setMode] = React.useState<'raw' | 'builder'>('raw')\n    const [rawString, setRawString] = React.useState(() => {\n        if (value === null) return '{}'\n        return typeof value === 'object' ? JSON.stringify(value, null, 2) : String(value || '{}')\n    })\n    const [parseError, setParseError] = React.useState<string | null>(null)\n\n    React.useEffect(() => {\n        if (value === null) {\n            if (!disabled) {\n                onChange({})\n            }\n            setRawString('{}')\n            setParseError(null)\n            return\n        }\n        if (typeof value === 'object') {\n            setRawString(JSON.stringify(value, null, 2))\n            setParseError(null)\n        }\n    }, [value, disabled, onChange])\n\n    const handleRawChange = (str: string) => {\n        setRawString(str)\n        try {\n            if (str.trim() === '') {\n                onChange({})\n                setParseError(null)\n            } else {\n                const parsed = JSON.parse(str)\n                onChange(parsed)\n                setParseError(null)\n            }\n        } catch (e) {\n            onChange(str)\n            setParseError(\"Invalid JSON\")\n        }\n    }\n\n    const switchToBuilder = () => {\n        try {\n            if (typeof value === 'string') {\n                JSON.parse(value)\n            }\n            setMode('builder')\n        } catch (e) {\n            alert(\"Cannot switch to Builder mode: Invalid JSON\")\n        }\n    }\n\n    return (\n        <div className=\"space-y-4 border rounded-md p-4 bg-card\">\n            <div className=\"flex items-center space-x-2 border-b pb-2 mb-2\">\n                <button\n                    type=\"button\"\n                    onClick={() => setMode('raw')}\n                    className={cn(\n                        \"flex items-center gap-2 px-3 py-1.5 text-sm font-medium rounded-md transition-colors\",\n                        mode === 'raw'\n                            ? \"bg-muted text-foreground\"\n                            : \"text-muted-foreground hover:text-foreground hover:bg-muted\"\n                    )}\n                >\n                    <Code className=\"w-4 h-4\" />\n                    Raw JSON\n                </button>\n                <button\n                    type=\"button\"\n                    onClick={switchToBuilder}\n                    className={cn(\n                        \"flex items-center gap-2 px-3 py-1.5 text-sm font-medium rounded-md transition-colors\",\n                        mode === 'builder'\n                            ? \"bg-muted text-foreground\"\n                            : \"text-muted-foreground hover:text-foreground hover:bg-muted\"\n                    )}\n                >\n                    <LayoutList className=\"w-4 h-4\" />\n                    Builder\n                </button>\n            </div>\n\n            {mode === 'raw' ? (\n                <div className=\"space-y-2\">\n                    <textarea\n                        value={rawString}\n                        onChange={(e) => handleRawChange(e.target.value)}\n                        onBlur={() => {\n                            try {\n                                const parsed = JSON.parse(rawString)\n                                setRawString(JSON.stringify(parsed, null, 2))\n                            } catch { }\n                        }}\n                        placeholder='{\"key\": \"value\"}'\n                        className=\"w-full rounded border px-3 py-2 min-h-[300px] text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500\"\n                        disabled={disabled}\n                    />\n                    {parseError && (\n                        <div className=\"text-xs text-red-600\">Invalid JSON format</div>\n                    )}\n                </div>\n            ) : (\n                <div className=\"min-h-[300px] text-sm overflow-x-auto\">\n                    {typeof value === 'object' && value !== null ? (\n                        <JsonNode\n                            data={value}\n                            onChange={onChange}\n                            readOnly={disabled}\n                            isRoot\n                        />\n                    ) : (\n                        <div className=\"text-muted-foreground italic p-4 text-center\">\n                            Value is not an object or array. Switch to Raw to edit.\n                        </div>\n                    )}\n                </div>\n            )}\n\n            {error && <div className=\"text-xs text-red-600\">{error}</div>}\n        </div>\n    )\n}\n\ninterface JsonNodeProps {\n    data: any\n    onChange: (val: any) => void\n    onDelete?: () => void\n    readOnly?: boolean\n    label?: string\n    isRoot?: boolean\n}\n\nfunction JsonNode({ data, onChange, onDelete, readOnly, label, isRoot }: JsonNodeProps) {\n    const type = getJsonType(data)\n    const isContainer = type === 'object' || type === 'array'\n    const [collapsed, setCollapsed] = React.useState(false)\n\n    const handleTypeChange = (newType: JsonNodeType) => {\n        let newVal: any = ''\n        switch (newType) {\n            case 'string': newVal = \"\"; break;\n            case 'number': newVal = 0; break;\n            case 'boolean': newVal = false; break;\n            case 'object': newVal = {}; break;\n            case 'array': newVal = []; break;\n            case 'null': newVal = null; break;\n        }\n        onChange(newVal)\n    }\n\n    const handleAddKey = () => {\n        if (type === 'object') {\n            const newKey = `newKey_${Object.keys(data).length}`\n            onChange({ ...data, [newKey]: \"\" })\n        } else if (type === 'array') {\n            onChange([...data, \"\"])\n        }\n    }\n\n    const handleChildChange = (key: string | number, newVal: any) => {\n        if (type === 'object') {\n            onChange({ ...data, [key]: newVal })\n        } else if (type === 'array') {\n            const arr = [...data]\n            arr[Number(key)] = newVal\n            onChange(arr)\n        }\n    }\n\n    const handleKeyRename = (oldKey: string, newKey: string) => {\n        if (oldKey === newKey) return\n        const keys = Object.keys(data)\n        const newData: any = {}\n        keys.forEach(k => {\n            if (k === oldKey) {\n                newData[newKey] = data[k]\n            } else {\n                newData[k] = data[k]\n            }\n        })\n        onChange(newData)\n    }\n\n    const handleChildDelete = (key: string | number) => {\n        if (type === 'object') {\n            const newData = { ...data }\n            delete newData[key as string]\n            onChange(newData)\n        } else if (type === 'array') {\n            onChange(data.filter((_: any, i: number) => i !== key))\n        }\n    }\n\n    return (\n        <div className={cn(\"pl-0\", !isRoot && \"pl-4 border-l border-border ml-1\")}>\n            <div className=\"flex items-start gap-2 py-1 group\">\n\n                {isContainer && (\n                    <button type=\"button\" onClick={() => setCollapsed(!collapsed)} className=\"mt-1 text-muted-foreground hover:text-foreground\">\n                        {collapsed ? <ChevronRight className=\"w-3 h-3\" /> : <ChevronDown className=\"w-3 h-3\" />}\n                    </button>\n                )}\n                {!isContainer && !isRoot && <div className=\"w-3\" />} {/* Spacer */}\n\n                {label !== undefined && !isRoot && (\n                    <div className=\"flex items-center gap-1\">\n                        <span className=\"text-xs text-muted-foreground font-mono\">\n                            {label}\n                        </span>\n                        <span className=\"text-muted-foreground text-xs\">:</span>\n                    </div>\n                )}\n\n                <div className=\"flex-1 flex gap-2 items-center flex-wrap\">\n\n                    {!readOnly && (\n                        <select\n                            value={type}\n                            onChange={(e) => handleTypeChange(e.target.value as JsonNodeType)}\n                            className=\"text-xs border rounded px-1 py-0.5 bg-muted text-foreground focus:ring-1 focus:ring-blue-500\"\n                        >\n                            <option value=\"string\">String</option>\n                            <option value=\"number\">Number</option>\n                            <option value=\"boolean\">Boolean</option>\n                            <option value=\"object\">Object</option>\n                            <option value=\"array\">Array</option>\n                            <option value=\"null\">Null</option>\n                        </select>\n                    )}\n\n                    {type === 'string' && (\n                        <input\n                            className=\"flex-1 min-w-[120px] text-sm border rounded px-2 py-0.5 focus:outline-none focus:border-blue-500\"\n                            value={data}\n                            onChange={e => onChange(e.target.value)}\n                            disabled={readOnly}\n                        />\n                    )}\n                    {type === 'number' && (\n                        <input\n                            type=\"number\"\n                            className=\"flex-1 w-[100px] text-sm border rounded px-2 py-0.5 focus:outline-none focus:border-blue-500\"\n                            value={data}\n                            onChange={e => onChange(parseFloat(e.target.value) || 0)}\n                            disabled={readOnly}\n                        />\n                    )}\n                    {type === 'boolean' && (\n                        <select\n                            className=\"flex-1 w-[100px] text-sm border rounded px-2 py-0.5 focus:outline-none focus:border-blue-500\"\n                            value={String(data)}\n                            onChange={e => onChange(e.target.value === 'true')}\n                            disabled={readOnly}\n                        >\n                            <option value=\"true\">true</option>\n                            <option value=\"false\">false</option>\n                        </select>\n                    )}\n                    {type === 'null' && <span className=\"text-xs text-muted-foreground\">null</span>}\n                    {isContainer && (\n                        <span className=\"text-xs text-muted-foreground\">\n                            {type === 'object' ? `{ ${Object.keys(data).length} items }` : `[ ${data.length} items ]`}\n                        </span>\n                    )}\n\n                    {onDelete && !readOnly && (\n                        <button\n                            type=\"button\"\n                            onClick={onDelete}\n                            className=\"text-muted-foreground hover:text-red-500 opacity-0 group-hover:opacity-100 transition-opacity\"\n                            title=\"Remove item\"\n                        >\n                            <Trash2 className=\"w-3.5 h-3.5\" />\n                        </button>\n                    )}\n                </div>\n            </div>\n\n            {isContainer && !collapsed && (\n                <div className=\"flex flex-col gap-1 w-full pl-2\">\n                    {type === 'object' && Object.entries(data).map(([key, val], idx) => (\n                        <div key={idx} className=\"flex\">\n                            <div className=\"pt-2\">\n                                {/* Key Renamer */}\n                                <input\n                                    className=\"w-[100px] text-xs font-mono border-b border-transparent hover:border-gray-300 focus:border-blue-500 bg-transparent focus:outline-none text-right pr-1\"\n                                    value={key}\n                                    onChange={(e) => handleKeyRename(key, e.target.value)}\n                                    disabled={readOnly}\n                                />\n                            </div>\n                            <div className=\"flex-1\">\n                                <JsonNode\n                                    data={val}\n                                    onChange={(v) => handleChildChange(key, v)}\n                                    onDelete={() => handleChildDelete(key)}\n                                    readOnly={readOnly}\n                                />\n                            </div>\n                        </div>\n                    ))}\n\n                    {type === 'array' && (data as any[]).map((val, idx) => (\n                        <JsonNode\n                            key={idx}\n                            label={String(idx)}\n                            data={val}\n                            onChange={(v) => handleChildChange(idx, v)}\n                            onDelete={() => handleChildDelete(idx)}\n                            readOnly={readOnly}\n                        />\n                    ))}\n\n                    {!readOnly && (\n                        <div className=\"pl-4 mt-1\">\n                            <Button\n                                type=\"button\"\n                                variant=\"outline\"\n                                size=\"sm\"\n                                onClick={handleAddKey}\n                                className=\"h-6 text-xs\"\n                            >\n                                <Plus className=\"w-3 h-3 mr-1\" />\n                                Add {type === 'object' ? 'Property' : 'Item'}\n                            </Button>\n                        </div>\n                    )}\n                </div>\n            )}\n        </div>\n    )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/backend/JsonDisplay.js

@@ -0,0 +1,203 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@open-mercato/shared/lib/utils";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { Check, Copy, ChevronRight, ChevronDown } from "lucide-react";
+function JsonDisplay({
+  data,
+  title,
+  className,
+  defaultExpanded = false,
+  maxInitialDepth = 2,
+  theme = "light",
+  showCopy = true,
+  maxHeight
+}) {
+  const [copied, setCopied] = React.useState(false);
+  const jsonString = React.useMemo(() => {
+    try {
+      return JSON.stringify(data, null, 2);
+    } catch (err) {
+      return String(data);
+    }
+  }, [data]);
+  const handleCopy = React.useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(jsonString);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch (err) {
+      console.error("Failed to copy to clipboard:", err);
+    }
+  }, [jsonString]);
+  const containerClasses = cn(
+    "rounded-lg border bg-card p-6",
+    className
+  );
+  return /* @__PURE__ */ jsxs("div", { className: containerClasses, children: [
+    (title || showCopy) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4", children: [
+      title && /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold", children: title }),
+      showCopy && /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "sm",
+          onClick: handleCopy,
+          className: "h-7 px-2",
+          children: copied ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Check, { className: "h-3 w-3 mr-1" }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs", children: "Copied" })
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Copy, { className: "h-3 w-3 mr-1" }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs", children: "Copy" })
+          ] })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "bg-muted p-4 rounded overflow-x-auto font-mono text-sm",
+        style: maxHeight ? { maxHeight, overflowY: "auto" } : void 0,
+        children: /* @__PURE__ */ jsx(
+          JsonNode,
+          {
+            data,
+            depth: 0,
+            maxInitialDepth: defaultExpanded ? Infinity : maxInitialDepth,
+            theme
+          }
+        )
+      }
+    )
+  ] });
+}
+const JsonNode = React.memo(({ data, depth, maxInitialDepth, theme, isLast = true, parentKey }) => {
+  const [isExpanded, setIsExpanded] = React.useState(depth < maxInitialDepth);
+  const indent = depth * 16;
+  const themeClasses = {
+    key: theme === "light" ? "text-blue-600" : "text-blue-400",
+    string: theme === "light" ? "text-green-600" : "text-green-400",
+    number: theme === "light" ? "text-purple-600" : "text-purple-400",
+    boolean: theme === "light" ? "text-orange-600" : "text-orange-400",
+    null: "text-muted-foreground",
+    punctuation: "text-muted-foreground"
+  };
+  if (data === null) {
+    return /* @__PURE__ */ jsx("span", { className: themeClasses.null, children: "null" });
+  }
+  if (data === void 0) {
+    return /* @__PURE__ */ jsx("span", { className: themeClasses.null, children: "undefined" });
+  }
+  if (typeof data === "string") {
+    return /* @__PURE__ */ jsxs("span", { className: themeClasses.string, children: [
+      '"',
+      data,
+      '"'
+    ] });
+  }
+  if (typeof data === "number") {
+    return /* @__PURE__ */ jsx("span", { className: themeClasses.number, children: data });
+  }
+  if (typeof data === "boolean") {
+    return /* @__PURE__ */ jsx("span", { className: themeClasses.boolean, children: String(data) });
+  }
+  if (Array.isArray(data)) {
+    if (data.length === 0) {
+      return /* @__PURE__ */ jsx("span", { className: themeClasses.punctuation, children: "[]" });
+    }
+    return /* @__PURE__ */ jsxs("span", { children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => setIsExpanded(!isExpanded),
+          className: "inline-flex items-center hover:bg-muted-foreground/10 rounded px-1 -mx-1 transition-colors cursor-pointer",
+          children: [
+            isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3 mr-1" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3 mr-1" }),
+            /* @__PURE__ */ jsxs("span", { className: themeClasses.punctuation, children: [
+              "[",
+              data.length,
+              "]"
+            ] })
+          ]
+        }
+      ),
+      isExpanded && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("br", {}),
+        data.map((item, index) => /* @__PURE__ */ jsxs("div", { style: { paddingLeft: `${indent + 16}px` }, children: [
+          /* @__PURE__ */ jsx(
+            JsonNode,
+            {
+              data: item,
+              depth: depth + 1,
+              maxInitialDepth,
+              theme,
+              isLast: index === data.length - 1
+            }
+          ),
+          index < data.length - 1 && /* @__PURE__ */ jsx("span", { className: themeClasses.punctuation, children: "," }),
+          /* @__PURE__ */ jsx("br", {})
+        ] }, index)),
+        /* @__PURE__ */ jsx("span", { style: { paddingLeft: `${indent}px` }, className: themeClasses.punctuation, children: "]" })
+      ] })
+    ] });
+  }
+  if (typeof data === "object") {
+    const entries = Object.entries(data);
+    if (entries.length === 0) {
+      return /* @__PURE__ */ jsx("span", { className: themeClasses.punctuation, children: "{}" });
+    }
+    return /* @__PURE__ */ jsxs("span", { children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => setIsExpanded(!isExpanded),
+          className: "inline-flex items-center hover:bg-muted-foreground/10 rounded px-1 -mx-1 transition-colors cursor-pointer",
+          children: [
+            isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3 mr-1" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3 mr-1" }),
+            /* @__PURE__ */ jsxs("span", { className: themeClasses.punctuation, children: [
+              "{",
+              entries.length,
+              "}"
+            ] })
+          ]
+        }
+      ),
+      isExpanded && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("br", {}),
+        entries.map(([key, value], index) => /* @__PURE__ */ jsxs("div", { style: { paddingLeft: `${indent + 16}px` }, children: [
+          /* @__PURE__ */ jsxs("span", { className: themeClasses.key, children: [
+            '"',
+            key,
+            '"'
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: themeClasses.punctuation, children: ": " }),
+          /* @__PURE__ */ jsx(
+            JsonNode,
+            {
+              data: value,
+              depth: depth + 1,
+              maxInitialDepth,
+              theme,
+              isLast: index === entries.length - 1,
+              parentKey: key
+            }
+          ),
+          index < entries.length - 1 && /* @__PURE__ */ jsx("span", { className: themeClasses.punctuation, children: "," }),
+          /* @__PURE__ */ jsx("br", {})
+        ] }, key)),
+        /* @__PURE__ */ jsx("span", { style: { paddingLeft: `${indent}px` }, className: themeClasses.punctuation, children: "}" })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("span", { className: themeClasses.null, children: String(data) });
+});
+JsonNode.displayName = "JsonNode";
+export {
+  JsonDisplay
+};
+//# sourceMappingURL=JsonDisplay.js.map

package/dist/backend/JsonDisplay.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/backend/JsonDisplay.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { Check, Copy, ChevronRight, ChevronDown } from 'lucide-react'\n\ntype JsonDisplayProps = {\n  data: unknown\n  title?: string\n  className?: string\n  defaultExpanded?: boolean\n  maxInitialDepth?: number\n  theme?: 'light' | 'dark'\n  showCopy?: boolean\n  maxHeight?: string\n}\n\ntype JsonNodeProps = {\n  data: unknown\n  depth: number\n  maxInitialDepth: number\n  theme: 'light' | 'dark'\n  isLast?: boolean\n  parentKey?: string\n}\n\nexport function JsonDisplay({\n  data,\n  title,\n  className,\n  defaultExpanded = false,\n  maxInitialDepth = 2,\n  theme = 'light',\n  showCopy = true,\n  maxHeight,\n}: JsonDisplayProps) {\n  const [copied, setCopied] = React.useState(false)\n\n  const jsonString = React.useMemo(() => {\n    try {\n      return JSON.stringify(data, null, 2)\n    } catch (err) {\n      return String(data)\n    }\n  }, [data])\n\n  const handleCopy = React.useCallback(async () => {\n    try {\n      await navigator.clipboard.writeText(jsonString)\n      setCopied(true)\n      setTimeout(() => setCopied(false), 2000)\n    } catch (err) {\n      console.error('Failed to copy to clipboard:', err)\n    }\n  }, [jsonString])\n\n  const containerClasses = cn(\n    'rounded-lg border bg-card p-6',\n    className\n  )\n\n  return (\n    <div className={containerClasses}>\n      {(title || showCopy) && (\n        <div className=\"flex items-center justify-between mb-4\">\n          {title && <h2 className=\"text-lg font-semibold\">{title}</h2>}\n          {showCopy && (\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"sm\"\n              onClick={handleCopy}\n              className=\"h-7 px-2\"\n            >\n              {copied ? (\n                <>\n                  <Check className=\"h-3 w-3 mr-1\" />\n                  <span className=\"text-xs\">Copied</span>\n                </>\n              ) : (\n                <>\n                  <Copy className=\"h-3 w-3 mr-1\" />\n                  <span className=\"text-xs\">Copy</span>\n                </>\n              )}\n            </Button>\n          )}\n        </div>\n      )}\n      <div\n        className=\"bg-muted p-4 rounded overflow-x-auto font-mono text-sm\"\n        style={maxHeight ? { maxHeight, overflowY: 'auto' } : undefined}\n      >\n        <JsonNode\n          data={data}\n          depth={0}\n          maxInitialDepth={defaultExpanded ? Infinity : maxInitialDepth}\n          theme={theme}\n        />\n      </div>\n    </div>\n  )\n}\n\nconst JsonNode = React.memo<JsonNodeProps>(({ data, depth, maxInitialDepth, theme, isLast = true, parentKey }) => {\n  const [isExpanded, setIsExpanded] = React.useState(depth < maxInitialDepth)\n\n  const indent = depth * 16\n\n  const themeClasses = {\n    key: theme === 'light' ? 'text-blue-600' : 'text-blue-400',\n    string: theme === 'light' ? 'text-green-600' : 'text-green-400',\n    number: theme === 'light' ? 'text-purple-600' : 'text-purple-400',\n    boolean: theme === 'light' ? 'text-orange-600' : 'text-orange-400',\n    null: 'text-muted-foreground',\n    punctuation: 'text-muted-foreground',\n  }\n\n  if (data === null) {\n    return (\n      <span className={themeClasses.null}>null</span>\n    )\n  }\n\n  if (data === undefined) {\n    return (\n      <span className={themeClasses.null}>undefined</span>\n    )\n  }\n\n  if (typeof data === 'string') {\n    return (\n      <span className={themeClasses.string}>\"{data}\"</span>\n    )\n  }\n\n  if (typeof data === 'number') {\n    return (\n      <span className={themeClasses.number}>{data}</span>\n    )\n  }\n\n  if (typeof data === 'boolean') {\n    return (\n      <span className={themeClasses.boolean}>{String(data)}</span>\n    )\n  }\n\n  if (Array.isArray(data)) {\n    if (data.length === 0) {\n      return <span className={themeClasses.punctuation}>[]</span>\n    }\n\n    return (\n      <span>\n        <button\n          type=\"button\"\n          onClick={() => setIsExpanded(!isExpanded)}\n          className=\"inline-flex items-center hover:bg-muted-foreground/10 rounded px-1 -mx-1 transition-colors cursor-pointer\"\n        >\n          {isExpanded ? (\n            <ChevronDown className=\"h-3 w-3 mr-1\" />\n          ) : (\n            <ChevronRight className=\"h-3 w-3 mr-1\" />\n          )}\n          <span className={themeClasses.punctuation}>\n            [{data.length}]\n          </span>\n        </button>\n        {isExpanded && (\n          <>\n            <br />\n            {data.map((item, index) => (\n              <div key={index} style={{ paddingLeft: `${indent + 16}px` }}>\n                <JsonNode\n                  data={item}\n                  depth={depth + 1}\n                  maxInitialDepth={maxInitialDepth}\n                  theme={theme}\n                  isLast={index === data.length - 1}\n                />\n                {index < data.length - 1 && (\n                  <span className={themeClasses.punctuation}>,</span>\n                )}\n                <br />\n              </div>\n            ))}\n            <span style={{ paddingLeft: `${indent}px` }} className={themeClasses.punctuation}>\n              ]\n            </span>\n          </>\n        )}\n      </span>\n    )\n  }\n\n  if (typeof data === 'object') {\n    const entries = Object.entries(data)\n\n    if (entries.length === 0) {\n      return <span className={themeClasses.punctuation}>{'{}'}</span>\n    }\n\n    return (\n      <span>\n        <button\n          type=\"button\"\n          onClick={() => setIsExpanded(!isExpanded)}\n          className=\"inline-flex items-center hover:bg-muted-foreground/10 rounded px-1 -mx-1 transition-colors cursor-pointer\"\n        >\n          {isExpanded ? (\n            <ChevronDown className=\"h-3 w-3 mr-1\" />\n          ) : (\n            <ChevronRight className=\"h-3 w-3 mr-1\" />\n          )}\n          <span className={themeClasses.punctuation}>\n            {'{'}{entries.length}{'}'}\n          </span>\n        </button>\n        {isExpanded && (\n          <>\n            <br />\n            {entries.map(([key, value], index) => (\n              <div key={key} style={{ paddingLeft: `${indent + 16}px` }}>\n                <span className={themeClasses.key}>\"{key}\"</span>\n                <span className={themeClasses.punctuation}>: </span>\n                <JsonNode\n                  data={value}\n                  depth={depth + 1}\n                  maxInitialDepth={maxInitialDepth}\n                  theme={theme}\n                  isLast={index === entries.length - 1}\n                  parentKey={key}\n                />\n                {index < entries.length - 1 && (\n                  <span className={themeClasses.punctuation}>,</span>\n                )}\n                <br />\n              </div>\n            ))}\n            <span style={{ paddingLeft: `${indent}px` }} className={themeClasses.punctuation}>\n              {'}'}\n            </span>\n          </>\n        )}\n      </span>\n    )\n  }\n\n  return <span className={themeClasses.null}>{String(data)}</span>\n})\n\nJsonNode.displayName = 'JsonNode'\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/backend/Page.js

@@ -0,0 +1,27 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@open-mercato/shared/lib/utils";
+function Page({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("space-y-6", className), children });
+}
+function PageHeader({
+  title,
+  description,
+  actions
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold leading-tight", children: title }),
+      description ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-1", children: description }) : null
+    ] }),
+    actions ? /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: actions }) : null
+  ] });
+}
+function PageBody({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("space-y-4", className), children });
+}
+export {
+  Page,
+  PageBody,
+  PageHeader
+};
+//# sourceMappingURL=Page.js.map

package/dist/backend/Page.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/backend/Page.tsx"],
+  "sourcesContent": ["import * as React from 'react'\nimport { cn } from '@open-mercato/shared/lib/utils'\n\nexport function Page({ children, className }: { children: React.ReactNode; className?: string }) {\n  return <div className={cn('space-y-6', className)}>{children}</div>\n}\n\nexport function PageHeader({\n  title,\n  description,\n  actions,\n}: {\n  title: string\n  description?: string\n  actions?: React.ReactNode\n}) {\n  return (\n    <div className=\"flex items-start justify-between gap-4\">\n      <div>\n        <h1 className=\"text-2xl font-semibold leading-tight\">{title}</h1>\n        {description ? <p className=\"text-sm text-muted-foreground mt-1\">{description}</p> : null}\n      </div>\n      {actions ? <div className=\"flex items-center gap-2\">{actions}</div> : null}\n    </div>\n  )\n}\n\nexport function PageBody({ children, className }: { children: React.ReactNode; className?: string }) {\n  return <div className={cn('space-y-4', className)}>{children}</div>\n}\n"],
+  "mappings": "AAIS,cAcH,YAdG;AAHT,SAAS,UAAU;AAEZ,SAAS,KAAK,EAAE,UAAU,UAAU,GAAsD;AAC/F,SAAO,oBAAC,SAAI,WAAW,GAAG,aAAa,SAAS,GAAI,UAAS;AAC/D;AAEO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,SACE,qBAAC,SAAI,WAAU,0CACb;AAAA,yBAAC,SACC;AAAA,0BAAC,QAAG,WAAU,wCAAwC,iBAAM;AAAA,MAC3D,cAAc,oBAAC,OAAE,WAAU,sCAAsC,uBAAY,IAAO;AAAA,OACvF;AAAA,IACC,UAAU,oBAAC,SAAI,WAAU,2BAA2B,mBAAQ,IAAS;AAAA,KACxE;AAEJ;AAEO,SAAS,SAAS,EAAE,UAAU,UAAU,GAAsD;AACnG,SAAO,oBAAC,SAAI,WAAW,GAAG,aAAa,SAAS,GAAI,UAAS;AAC/D;",
+  "names": []
+}