@particle-academy/fancy-slides 0.2.0 → 0.3.0

package/dist/index.d.cts

@@ -349,6 +349,14 @@ declare function TextElementRenderer({ element, theme, slideWidthPx, editing, se
 interface ImageElementRendererProps {
     element: ImageElement;
 }
+/**
+ * Renders an image element. When `element.crop` is set (a window in
+ * image-relative 0..1 coords `{x,y,w,h}`), the image is shown cropped to that
+ * window: an `overflow:hidden` box clips an inner `<img>` that's been scaled up
+ * by `1/w` × `1/h` and offset so the crop window exactly fills the box. Without
+ * a crop it's the plain `object-fit` image. The same renderer feeds both the
+ * editor canvas and the viewer, so a crop is visible everywhere.
+ */
 declare function ImageElementRenderer({ element }: ImageElementRendererProps): react_jsx_runtime.JSX.Element;
 
 interface ShapeElementRendererProps {

package/dist/index.d.ts

@@ -349,6 +349,14 @@ declare function TextElementRenderer({ element, theme, slideWidthPx, editing, se
 interface ImageElementRendererProps {
     element: ImageElement;
 }
+/**
+ * Renders an image element. When `element.crop` is set (a window in
+ * image-relative 0..1 coords `{x,y,w,h}`), the image is shown cropped to that
+ * window: an `overflow:hidden` box clips an inner `<img>` that's been scaled up
+ * by `1/w` × `1/h` and offset so the crop window exactly fills the box. Without
+ * a crop it's the plain `object-fit` image. The same renderer feeds both the
+ * editor canvas and the viewer, so a crop is visible everywhere.
+ */
 declare function ImageElementRenderer({ element }: ImageElementRendererProps): react_jsx_runtime.JSX.Element;
 
 interface ShapeElementRendererProps {

package/dist/index.js

@@ -159,6 +159,22 @@ function weight(w) {
   return void 0;
 }
 function ImageElementRenderer({ element }) {
+  const crop = element.crop;
+  const fit = element.fit ?? "contain";
+  if (crop && crop.w > 0 && crop.h > 0) {
+    const inner = {
+      position: "absolute",
+      left: 0,
+      top: 0,
+      width: `${1 / crop.w * 100}%`,
+      height: `${1 / crop.h * 100}%`,
+      transform: `translate(${-crop.x / crop.w * 100}%, ${-crop.y / crop.h * 100}%)`,
+      transformOrigin: "top left",
+      objectFit: fit,
+      display: "block"
+    };
+    return /* @__PURE__ */ jsx("div", { style: { position: "relative", width: "100%", height: "100%", overflow: "hidden" }, children: /* @__PURE__ */ jsx("img", { src: element.src, alt: element.alt ?? "", style: inner, draggable: false }) });
+  }
   return /* @__PURE__ */ jsx(
     "img",
     {
@@ -167,7 +183,7 @@ function ImageElementRenderer({ element }) {
       style: {
         width: "100%",
         height: "100%",
-        objectFit: element.fit ?? "contain",
+        objectFit: fit,
         display: "block"
       },
       draggable: false
@@ -1279,6 +1295,113 @@ function chartStarterOption(kind) {
       };
   }
 }
+var CHART_PALETTE = [
+  "#8b5cf6",
+  "#3b82f6",
+  "#10b981",
+  "#f59e0b",
+  "#ef4444",
+  "#ec4899",
+  "#14b8a6",
+  "#6366f1"
+];
+function chartColorAt(index) {
+  return CHART_PALETTE[index % CHART_PALETTE.length];
+}
+function isPlainObject(v) {
+  return typeof v === "object" && v !== null && !Array.isArray(v);
+}
+function toNumber(v) {
+  const n = typeof v === "number" ? v : parseFloat(String(v));
+  return Number.isFinite(n) ? n : 0;
+}
+function chartModelFromOption(option) {
+  if (!isPlainObject(option)) return null;
+  const seriesRaw = option.series;
+  if (!Array.isArray(seriesRaw) || seriesRaw.length === 0) return null;
+  if (!seriesRaw.every(isPlainObject)) return null;
+  const types = seriesRaw.map((s) => String(s.type ?? ""));
+  if (types[0] === "pie") {
+    if (seriesRaw.length !== 1) return null;
+    const data = seriesRaw[0].data;
+    if (!Array.isArray(data)) return null;
+    const slices = [];
+    for (const d of data) {
+      if (!isPlainObject(d)) return null;
+      slices.push({ name: String(d.name ?? ""), value: toNumber(d.value) });
+    }
+    return { kind: "pie", categories: [], series: [], slices };
+  }
+  const cartesian = /* @__PURE__ */ new Set(["bar", "line", "scatter"]);
+  if (!types.every((t) => cartesian.has(t))) return null;
+  if (new Set(types).size !== 1) return null;
+  const baseType = types[0];
+  const isArea = baseType === "line" && seriesRaw.every((s) => isPlainObject(s.areaStyle) || s.areaStyle != null);
+  const kind = baseType === "line" ? isArea ? "area" : "line" : baseType;
+  const xAxis = option.xAxis;
+  const axisData = isPlainObject(xAxis) ? xAxis.data : void 0;
+  const categories = Array.isArray(axisData) ? axisData.map((c) => String(c)) : [];
+  const firstData = seriesRaw[0].data;
+  const valueCount = Array.isArray(firstData) ? firstData.length : 0;
+  const cats = categories.length > 0 ? categories : Array.from({ length: valueCount }, (_, i) => String(i + 1));
+  const series = [];
+  for (const s of seriesRaw) {
+    const data = s.data;
+    if (!Array.isArray(data)) return null;
+    const values = data.map((d) => {
+      if (Array.isArray(d)) return toNumber(d[1]);
+      if (isPlainObject(d)) return toNumber(d.value);
+      return toNumber(d);
+    });
+    series.push({ name: String(s.name ?? "Series"), color: typeof s.itemStyle === "object" && s.itemStyle && isPlainObject(s.itemStyle) ? typeof s.itemStyle.color === "string" ? s.itemStyle.color : void 0 : typeof s.color === "string" ? s.color : void 0, values });
+  }
+  return { kind, categories: cats, series, slices: [] };
+}
+function chartOptionFromModel(model) {
+  if (model.kind === "pie") {
+    return {
+      tooltip: { trigger: "item" },
+      legend: { bottom: 0 },
+      color: model.slices.map((_, i) => chartColorAt(i)),
+      series: [
+        {
+          type: "pie",
+          radius: ["40%", "70%"],
+          name: "Segment",
+          data: model.slices.map((s) => ({ name: s.name, value: s.value }))
+        }
+      ]
+    };
+  }
+  const isScatter = model.kind === "scatter";
+  const isArea = model.kind === "area";
+  const seriesType = model.kind === "bar" ? "bar" : model.kind === "scatter" ? "scatter" : "line";
+  const series = model.series.map((s, i) => {
+    const color = s.color ?? chartColorAt(i);
+    const base = {
+      type: seriesType,
+      name: s.name,
+      itemStyle: { color }
+    };
+    if (isScatter) {
+      base.symbolSize = 12;
+      base.data = s.values.map((v, idx) => [idx, v]);
+    } else {
+      base.data = s.values;
+    }
+    if (seriesType === "line") base.smooth = true;
+    if (isArea) base.areaStyle = { color };
+    return base;
+  });
+  return {
+    grid: { top: 24, left: 56, right: 16, bottom: isScatter ? 32 : 40 },
+    tooltip: { trigger: isScatter ? "item" : "axis" },
+    legend: model.series.length > 1 ? { bottom: 0 } : void 0,
+    xAxis: isScatter ? { type: "value" } : { type: "category", data: [...model.categories] },
+    yAxis: { type: "value" },
+    series
+  };
+}
 function SlideRail({
   slides,
   selectedId,
@@ -1632,7 +1755,35 @@ function TextStyleControls({ element, onPatch }) {
   ] });
 }
 function ImageStyleControls({ element, onPatch }) {
+  const fileRef = useRef(null);
+  const crop = element.crop;
+  const onFile = (file) => {
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = () => {
+      if (typeof reader.result === "string") onPatch({ src: reader.result });
+    };
+    reader.readAsDataURL(file);
+  };
+  const setCrop = (next) => {
+    const base = crop ?? { x: 0, y: 0, w: 1, h: 1 };
+    onPatch({ crop: { ...base, ...next } });
+  };
   return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: fileRef,
+        type: "file",
+        accept: "image/*",
+        className: "hidden",
+        onChange: (e) => {
+          onFile(e.target.files?.[0]);
+          e.target.value = "";
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(Action, { size: "sm", variant: "ghost", icon: "upload", onClick: () => fileRef.current?.click(), children: "Upload image" }),
     /* @__PURE__ */ jsx(Textarea, { label: "Image URL", value: element.src, onValueChange: (v) => onPatch({ src: v }), rows: 2 }),
     /* @__PURE__ */ jsx(Input, { label: "Alt text", value: element.alt ?? "", onChange: (e) => onPatch({ alt: e.target.value }) }),
     /* @__PURE__ */ jsx(
@@ -1648,7 +1799,17 @@ function ImageStyleControls({ element, onPatch }) {
         value: element.fit ?? "contain",
         onValueChange: (v) => onPatch({ fit: v })
       }
-    )
+    ),
+    /* @__PURE__ */ jsx(Separator, {}),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx(Heading, { as: "h4", size: "xs", className: "!uppercase !tracking-wider !text-zinc-500", children: "Crop" }),
+      crop && /* @__PURE__ */ jsx(Action, { size: "xs", variant: "ghost", onClick: () => onPatch({ crop: void 0 }), children: "Clear crop" })
+    ] }),
+    /* @__PURE__ */ jsx(Slider, { label: "X", value: crop?.x ?? 0, onValueChange: (v) => setCrop({ x: Number(v) }), min: 0, max: 1, step: 0.01, showValue: true }),
+    /* @__PURE__ */ jsx(Slider, { label: "Y", value: crop?.y ?? 0, onValueChange: (v) => setCrop({ y: Number(v) }), min: 0, max: 1, step: 0.01, showValue: true }),
+    /* @__PURE__ */ jsx(Slider, { label: "Width", value: crop?.w ?? 1, onValueChange: (v) => setCrop({ w: Number(v) }), min: 0.01, max: 1, step: 0.01, showValue: true }),
+    /* @__PURE__ */ jsx(Slider, { label: "Height", value: crop?.h ?? 1, onValueChange: (v) => setCrop({ h: Number(v) }), min: 0.01, max: 1, step: 0.01, showValue: true }),
+    /* @__PURE__ */ jsx(Text, { size: "xs", className: "!text-zinc-500", children: "Crop is a window into the source image (0..1). Width/height shrink the visible region; X/Y pan it." })
   ] });
 }
 function ShapeStyleControls({ element, onPatch }) {
@@ -1695,54 +1856,254 @@ function CodeStyleControls({ element, onPatch }) {
   ] });
 }
 function ChartStyleControls({ element, onPatch }) {
+  const model = chartModelFromOption(element.option);
+  const writeModel = (m) => onPatch({ option: chartOptionFromModel(m) });
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    model ? /* @__PURE__ */ jsx(ChartModelEditor, { model, onChange: writeModel }) : /* @__PURE__ */ jsx(Text, { size: "sm", className: "rounded-md bg-amber-50 p-2 !text-amber-700 dark:bg-amber-950/40 dark:!text-amber-400", children: "This chart's option is too custom for the visual editor. Edit it as JSON below." }),
+    /* @__PURE__ */ jsxs("details", { className: "rounded-md border border-zinc-200 dark:border-zinc-800", children: [
+      /* @__PURE__ */ jsx("summary", { className: "cursor-pointer select-none px-2 py-1.5 text-xs font-medium text-zinc-600 dark:text-zinc-400", children: "Advanced \u2014 edit option JSON" }),
+      /* @__PURE__ */ jsx("div", { className: "p-2 pt-0", children: /* @__PURE__ */ jsx(
+        Textarea,
+        {
+          label: "ECharts option (JSON)",
+          value: JSON.stringify(element.option, null, 2),
+          onValueChange: (v) => {
+            try {
+              onPatch({ option: JSON.parse(v) });
+            } catch {
+            }
+          },
+          rows: 10
+        }
+      ) })
+    ] })
+  ] });
+}
+var CHART_TYPE_OPTIONS = [
+  { value: "bar", label: "Bar" },
+  { value: "line", label: "Line" },
+  { value: "area", label: "Area" },
+  { value: "pie", label: "Pie" },
+  { value: "scatter", label: "Scatter" }
+];
+function ChartModelEditor({ model, onChange }) {
+  const setKind = (kind) => {
+    if (kind === model.kind) return;
+    if (kind === "pie") {
+      const first = model.series[0];
+      const slices = model.slices.length ? model.slices : model.categories.length ? model.categories.map((name, i) => ({ name, value: first?.values[i] ?? 0 })) : [{ name: "Slice 1", value: 1 }];
+      onChange({ ...model, kind, slices });
+      return;
+    }
+    if (model.kind === "pie") {
+      const categories = model.slices.length ? model.slices.map((s) => s.name) : ["A", "B", "C"];
+      const values = model.slices.length ? model.slices.map((s) => s.value) : [1, 2, 3];
+      onChange({ ...model, kind, categories, series: [{ name: "Series 1", color: chartColorAt(0), values }] });
+      return;
+    }
+    onChange({ ...model, kind });
+  };
   return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-    /* @__PURE__ */ jsx(Text, { size: "sm", className: "!text-zinc-500", children: "Chart option is JSON \u2014 paste any ECharts option here." }),
     /* @__PURE__ */ jsx(
-      Textarea,
+      Select,
       {
-        label: "ECharts option (JSON)",
-        value: JSON.stringify(element.option, null, 2),
-        onValueChange: (v) => {
-          try {
-            onPatch({ option: JSON.parse(v) });
-          } catch {
-          }
-        },
-        rows: 10
+        label: "Chart type",
+        list: CHART_TYPE_OPTIONS,
+        value: model.kind,
+        onValueChange: (v) => setKind(v)
       }
-    )
+    ),
+    model.kind === "pie" ? /* @__PURE__ */ jsx(PieSliceEditor, { model, onChange }) : /* @__PURE__ */ jsx(CartesianChartEditor, { model, onChange })
+  ] });
+}
+function PieSliceEditor({ model, onChange }) {
+  const slices = model.slices;
+  const update = (i, next) => {
+    const copy = slices.map((s, idx) => idx === i ? { ...s, ...next } : s);
+    onChange({ ...model, slices: copy });
+  };
+  const remove = (i) => onChange({ ...model, slices: slices.filter((_, idx) => idx !== i) });
+  const add = () => onChange({ ...model, slices: [...slices, { name: `Slice ${slices.length + 1}`, value: 0 }] });
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsx(Heading, { as: "h4", size: "xs", className: "!uppercase !tracking-wider !text-zinc-500", children: "Slices" }),
+    slices.map((s, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(Input, { label: i === 0 ? "Name" : void 0, value: s.name, onChange: (e) => update(i, { name: e.target.value }) }) }),
+      /* @__PURE__ */ jsx("div", { className: "w-20", children: /* @__PURE__ */ jsx(Input, { label: i === 0 ? "Value" : void 0, type: "number", value: String(s.value), onChange: (e) => update(i, { value: parseFloat(e.target.value) || 0 }) }) }),
+      /* @__PURE__ */ jsx(Action, { size: "xs", variant: "ghost", color: "red", icon: "x", onClick: () => remove(i), "aria-label": "Remove slice" })
+    ] }, i)),
+    /* @__PURE__ */ jsx(Action, { size: "xs", variant: "ghost", icon: "plus", onClick: add, children: "Add slice" })
+  ] });
+}
+function CartesianChartEditor({ model, onChange }) {
+  const { categories, series } = model;
+  const updateCategory = (i, label) => {
+    onChange({ ...model, categories: categories.map((c, idx) => idx === i ? label : c) });
+  };
+  const removeCategory = (i) => {
+    onChange({
+      ...model,
+      categories: categories.filter((_, idx) => idx !== i),
+      series: series.map((s) => ({ ...s, values: s.values.filter((_, idx) => idx !== i) }))
+    });
+  };
+  const addCategory = () => {
+    onChange({
+      ...model,
+      categories: [...categories, `Cat ${categories.length + 1}`],
+      series: series.map((s) => ({ ...s, values: [...s.values, 0] }))
+    });
+  };
+  const updateSeries = (si, next) => {
+    onChange({ ...model, series: series.map((s, idx) => idx === si ? { ...s, ...next } : s) });
+  };
+  const updateValue = (si, ci, value) => {
+    onChange({
+      ...model,
+      series: series.map(
+        (s, idx) => idx === si ? { ...s, values: s.values.map((v, vi) => vi === ci ? value : v) } : s
+      )
+    });
+  };
+  const removeSeries = (si) => onChange({ ...model, series: series.filter((_, idx) => idx !== si) });
+  const addSeries = () => onChange({
+    ...model,
+    series: [
+      ...series,
+      { name: `Series ${series.length + 1}`, color: chartColorAt(series.length), values: categories.map(() => 0) }
+    ]
+  });
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx(Heading, { as: "h4", size: "xs", className: "!uppercase !tracking-wider !text-zinc-500", children: "Categories" }),
+      categories.map((c, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(Input, { value: c, onChange: (e) => updateCategory(i, e.target.value) }) }),
+        /* @__PURE__ */ jsx(Action, { size: "xs", variant: "ghost", color: "red", icon: "x", onClick: () => removeCategory(i), "aria-label": "Remove category" })
+      ] }, i)),
+      /* @__PURE__ */ jsx(Action, { size: "xs", variant: "ghost", icon: "plus", onClick: addCategory, children: "Add category" })
+    ] }),
+    /* @__PURE__ */ jsx(Separator, {}),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsx(Heading, { as: "h4", size: "xs", className: "!uppercase !tracking-wider !text-zinc-500", children: "Series" }),
+      series.map((s, si) => /* @__PURE__ */ jsxs("div", { className: "space-y-2 rounded-md border border-zinc-200 p-2 dark:border-zinc-800", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(Input, { label: "Name", value: s.name, onChange: (e) => updateSeries(si, { name: e.target.value }) }) }),
+          /* @__PURE__ */ jsx(FieldLabel, { label: "Color", children: /* @__PURE__ */ jsx(ColorPicker, { value: s.color ?? chartColorAt(si), onChange: (c) => updateSeries(si, { color: c }) }) }),
+          /* @__PURE__ */ jsx(Action, { size: "xs", variant: "ghost", color: "red", icon: "x", onClick: () => removeSeries(si), "aria-label": "Remove series" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2", children: categories.map((c, ci) => /* @__PURE__ */ jsx(
+          Input,
+          {
+            label: c,
+            type: "number",
+            value: String(s.values[ci] ?? 0),
+            onChange: (e) => updateValue(si, ci, parseFloat(e.target.value) || 0)
+          },
+          ci
+        )) })
+      ] }, si)),
+      /* @__PURE__ */ jsx(Action, { size: "xs", variant: "ghost", icon: "plus", onClick: addSeries, children: "Add series" })
+    ] })
   ] });
 }
 function TableStyleControls({ element, onPatch }) {
+  const columns = element.columns;
+  const rows = element.rows;
+  const nextColKey = () => {
+    const existing = new Set(columns.map((c) => c.key));
+    let n = columns.length + 1;
+    while (existing.has(`col${n}`)) n++;
+    return `col${n}`;
+  };
+  const setColumnLabel = (i, label) => {
+    onPatch({ columns: columns.map((c, idx) => idx === i ? { ...c, label } : c) });
+  };
+  const removeColumn = (i) => {
+    const key = columns[i]?.key;
+    const nextCols = columns.filter((_, idx) => idx !== i);
+    const nextRows = key ? rows.map((r) => {
+      const { [key]: _drop, ...rest } = r;
+      return rest;
+    }) : rows;
+    onPatch({ columns: nextCols, rows: nextRows });
+  };
+  const addColumn = () => {
+    const key = nextColKey();
+    onPatch({
+      columns: [...columns, { key, label: `Column ${columns.length + 1}` }],
+      rows: rows.map((r) => ({ ...r, [key]: "" }))
+    });
+  };
+  const setCell = (rowIdx, key, value) => {
+    onPatch({ rows: rows.map((r, idx) => idx === rowIdx ? { ...r, [key]: value } : r) });
+  };
+  const removeRow = (rowIdx) => onPatch({ rows: rows.filter((_, idx) => idx !== rowIdx) });
+  const addRow = () => {
+    const blank = {};
+    for (const c of columns) blank[c.key] = "";
+    onPatch({ rows: [...rows, blank] });
+  };
   return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-    /* @__PURE__ */ jsx(
-      Textarea,
-      {
-        label: "Columns (JSON)",
-        value: JSON.stringify(element.columns, null, 2),
-        onValueChange: (v) => {
-          try {
-            onPatch({ columns: JSON.parse(v) });
-          } catch {
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx(Heading, { as: "h4", size: "xs", className: "!uppercase !tracking-wider !text-zinc-500", children: "Columns" }),
+      columns.map((c, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(Input, { value: c.label, onChange: (e) => setColumnLabel(i, e.target.value), "aria-label": `Column ${i + 1} label` }) }),
+        /* @__PURE__ */ jsx(Text, { size: "xs", className: "!font-mono !text-zinc-400", children: c.key }),
+        /* @__PURE__ */ jsx(Action, { size: "xs", variant: "ghost", color: "red", icon: "x", onClick: () => removeColumn(i), "aria-label": "Remove column" })
+      ] }, c.key)),
+      /* @__PURE__ */ jsx(Action, { size: "xs", variant: "ghost", icon: "plus", onClick: addColumn, children: "Add column" })
+    ] }),
+    /* @__PURE__ */ jsx(Separator, {}),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx(Heading, { as: "h4", size: "xs", className: "!uppercase !tracking-wider !text-zinc-500", children: "Rows" }),
+      columns.length === 0 ? /* @__PURE__ */ jsx(Text, { size: "xs", className: "!text-zinc-500", children: "Add a column to start adding rows." }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        rows.map((r, rowIdx) => /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 border-b border-zinc-100 pb-2 dark:border-zinc-800", children: [
+          /* @__PURE__ */ jsx("div", { className: "grid flex-1 grid-cols-1 gap-1", children: columns.map((c) => /* @__PURE__ */ jsx(
+            Input,
+            {
+              label: c.label,
+              value: r[c.key] == null ? "" : String(r[c.key]),
+              onChange: (e) => setCell(rowIdx, c.key, e.target.value)
+            },
+            c.key
+          )) }),
+          /* @__PURE__ */ jsx(Action, { size: "xs", variant: "ghost", color: "red", icon: "x", onClick: () => removeRow(rowIdx), "aria-label": "Remove row" })
+        ] }, rowIdx)),
+        /* @__PURE__ */ jsx(Action, { size: "xs", variant: "ghost", icon: "plus", onClick: addRow, children: "Add row" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("details", { className: "rounded-md border border-zinc-200 dark:border-zinc-800", children: [
+      /* @__PURE__ */ jsx("summary", { className: "cursor-pointer select-none px-2 py-1.5 text-xs font-medium text-zinc-600 dark:text-zinc-400", children: "Edit as JSON" }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-3 p-2 pt-0", children: [
+        /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            label: "Columns (JSON)",
+            value: JSON.stringify(columns, null, 2),
+            onValueChange: (v) => {
+              try {
+                onPatch({ columns: JSON.parse(v) });
+              } catch {
+              }
+            },
+            rows: 5
           }
-        },
-        rows: 5
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Textarea,
-      {
-        label: "Rows (JSON)",
-        value: JSON.stringify(element.rows, null, 2),
-        onValueChange: (v) => {
-          try {
-            onPatch({ rows: JSON.parse(v) });
-          } catch {
+        ),
+        /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            label: "Rows (JSON)",
+            value: JSON.stringify(rows, null, 2),
+            onValueChange: (v) => {
+              try {
+                onPatch({ rows: JSON.parse(v) });
+              } catch {
+              }
+            },
+            rows: 8
           }
-        },
-        rows: 8
-      }
-    )
+        )
+      ] })
+    ] })
   ] });
 }
 function EmbedStyleControls({ element, onPatch }) {