exploreda 0.0.5 → 0.0.6

package/dist/ExplorEda.js

@@ -1,10 +1,10 @@
 import * as THREE2 from 'three';
 import { Vector3 } from 'three';
-import { X, SearchIcon, BarChart as BarChart$1, ChartBarBig, ScatterChart, Box, Table, Info, FileText, Palette, LineChart, Filter, Download, Loader2, ChevronsUpDown, Check, Search, ChevronUp, ChevronDown, ChevronLeft, ChevronRight, ArrowUpDown, AlertCircle, ArrowRight, ChevronDownIcon, CheckIcon, Table2 as Table2$1, HelpCircle, ToggleLeft, Type, Calendar, Hash, ArrowUp, ArrowDown, ChevronUpIcon, Calculator as Calculator$1, FilterX, MoreHorizontal, Copy, Grid, Plus, XIcon, GripVertical, Settings2, PlusCircle, Eye, Edit, Shapes, RotateCcw } from 'lucide-react';
+import { X, SearchIcon, BarChart as BarChart$1, ChartBarBig, ScatterChart, Box, Table, Info, FileText, Palette, LineChart, Filter, Download, Loader2, ChevronsUpDown, Check, Search, ChevronUp, ChevronDown, ChevronLeft, ChevronRight, ArrowUpDown, AlertCircle, Eye, Type, Monitor, ArrowRight, ChevronDownIcon, CheckIcon, Table2 as Table2$1, HelpCircle, ToggleLeft, Calendar, Hash, ArrowUp, ArrowDown, ChevronUpIcon, Bold, Italic, Strikethrough, Code, Trash2, PilcrowSquare, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, List, ListOrdered, Quote, Minus, WrapText, Undo2, Redo2, Calculator as Calculator$1, FilterX, MoreHorizontal, Copy, Grid, Plus, XIcon, GripVertical, Settings2, PlusCircle, Edit, Shapes, RotateCcw } from 'lucide-react';
 import { schemeCategory10, schemeSet3, interpolateViridis, interpolateInferno, interpolateMagma, interpolatePlasma, interpolateWarm, interpolateCool } from 'd3-scale-chromatic';
 import { scaleLinear, scaleBand, scaleSequential, scaleOrdinal } from 'd3-scale';
 import * as React2 from 'react';
-import { createContext, forwardRef, useEffect, useMemo, useCallback, useRef, useState, useContext } from 'react';
+import React2__default, { createContext, forwardRef, useEffect, useMemo, useCallback, useRef, useState, useContext } from 'react';
 import isEqual from 'react-fast-compare';
 import { create, useStore, createStore } from 'zustand';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -27,6 +27,13 @@ import { CSS } from '@dnd-kit/utilities';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import * as ProgressPrimitive from '@radix-ui/react-progress';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { Color } from '@tiptap/extension-color';
+import ListItem from '@tiptap/extension-list-item';
+import TextStyle from '@tiptap/extension-text-style';
+import { EditorProvider, useCurrentEditor } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import '@radix-ui/react-toggle';
 import natsort from 'natsort';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import { extent } from 'd3-array';
@@ -1134,11 +1141,9 @@ function useFilterExtent({
   }, [settings, xScale, yScale, innerHeight, convertFilterRangeToExtent]);
   return extent2;
 }
-var defaultMargin = { top: 20, right: 20, bottom: 30, left: 60 };
 function BaseChart({
   width,
   height,
-  margin = defaultMargin,
   xScale,
   yScale,
   brushingMode = "none",
@@ -1147,6 +1152,7 @@ function BaseChart({
   className,
   settings
 }) {
+  const margin = settings.margin;
   const innerWidth = width - margin.left - margin.right;
   const innerHeight = height - margin.top - margin.bottom;
   const svgRef = useRef(null);
@@ -1288,7 +1294,7 @@ function BarChart({ settings, width, height, facetIds }) {
   const { getColorForValue } = useColorScales();
   const registerAxisLimits = useFacetAxis((s) => s.registerAxisLimits);
   const getGlobalAxisLimits = useFacetAxis((s) => s.getGlobalAxisLimits);
-  const margin = { top: 20, right: 20, bottom: 30, left: 60 };
+  const margin = settings.margin;
   const innerWidth = width - margin.left - margin.right;
   const innerHeight = height - margin.top - margin.bottom;
   const isNumeric2 = useMemo(
@@ -1489,7 +1495,6 @@ function BarChart({ settings, width, height, facetIds }) {
     {
       width,
       height,
-      margin,
       xScale,
       yScale,
       brushingMode: isBandScale ? "none" : "horizontal",
@@ -2090,7 +2095,7 @@ var barChartDefinition = {
     type: "bar",
     title: "Bar Chart",
     layout,
-    margin: {},
+    margin: { top: 20, right: 20, bottom: 30, left: 60 },
     filters: []
   }),
   validateSettings: (settings) => {
@@ -2257,7 +2262,7 @@ function ScatterPlot({
     canvas.height = height * dpr;
     ctx.scale(dpr, dpr);
     ctx.clearRect(0, 0, width, height);
-    ctx.translate(60, 20);
+    ctx.translate(settings.margin.left, settings.margin.top);
     const xFilter = getRangeFilterForField(settings.filters, settings.xField);
     const yFilter = getRangeFilterForField(settings.filters, settings.yField);
     for (let i = 0; i < xValues.length; i++) {
@@ -2373,7 +2378,7 @@ var scatterPlotDefinition = {
     type: "scatter",
     title: "Scatter Plot",
     layout,
-    margin: {},
+    margin: { top: 20, right: 20, bottom: 20, left: 20 },
     xField: "__ID",
     yField: field ?? "",
     filters: []
@@ -3195,7 +3200,7 @@ function PivotTable({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn("w-full h-full border rounded-md flex flex-col"),
+      className: cn("w-full h-full border rounded-md flex flex-col p-4"),
       style: { height },
       children: /* @__PURE__ */ jsx("div", { className: "overflow-auto flex-1", children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse relative", children: [
         /* @__PURE__ */ jsxs("thead", { className: "sticky top-0 bg-background z-40", children: [
@@ -3897,7 +3902,7 @@ var pivotTableDefinition = {
     type: "pivot",
     title: "Pivot Table",
     layout,
-    margin: {},
+    margin: { top: 0, right: 0, bottom: 0, left: 0 },
     rowFields: [],
     columnField: "",
     valueFields: [{ field: "", aggregation: "count" }],
@@ -4662,7 +4667,7 @@ var dataTableDefinition = {
     type: "data-table",
     title: "Data Table",
     layout,
-    margin: {},
+    margin: { top: 5, right: 5, bottom: 5, left: 5 },
     columns: [],
     pageSize: 25,
     currentPage: 1,
@@ -5341,7 +5346,7 @@ var summaryTableDefinition = {
     type: "summary",
     title: "Summary Table",
     layout,
-    margin: {}
+    margin: { top: 20, right: 20, bottom: 20, left: 20 }
   }),
   validateSettings: (settings) => {
     return true;
@@ -5350,32 +5355,398 @@ var summaryTableDefinition = {
     return (d) => true;
   }
 };
-function Textarea({ className, ...props }) {
+var toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 focus-visible:ring-4 focus-visible:outline-1 aria-invalid:focus-visible:ring-0 transition-[color,box-shadow]",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground"
+      },
+      size: {
+        default: "h-9 px-2 min-w-9",
+        sm: "h-8 px-1.5 min-w-8",
+        lg: "h-10 px-2.5 min-w-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var ToggleGroupContext = React2.createContext({
+  size: "default",
+  variant: "default"
+});
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  children,
+  ...props
+}) {
   return /* @__PURE__ */ jsx(
-    "textarea",
+    ToggleGroupPrimitive.Root,
     {
-      "data-slot": "textarea",
+      "data-slot": "toggle-group",
+      "data-variant": variant,
+      "data-size": size,
       className: cn(
-        "border-input placeholder:text-muted-foreground ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 aria-invalid:outline-destructive/60 dark:aria-invalid:outline-destructive dark:aria-invalid:ring-destructive/40 aria-invalid:ring-destructive/20 aria-invalid:border-destructive/60 dark:aria-invalid:border-destructive dark:aria-invalid:ring-destructive/50 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:focus-visible:ring-[3px] aria-invalid:focus-visible:outline-none md:text-sm dark:aria-invalid:focus-visible:ring-4",
+        "group/toggle-group flex items-center justify-center rounded-md data-[variant=outline]:shadow-xs",
         className
       ),
-      ...props
+      ...props,
+      children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: { variant, size }, children })
+    }
+  );
+}
+function ToggleGroupItem({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}) {
+  const context = React2.useContext(ToggleGroupContext);
+  return /* @__PURE__ */ jsx(
+    ToggleGroupPrimitive.Item,
+    {
+      "data-slot": "toggle-group-item",
+      "data-variant": context.variant || variant,
+      "data-size": context.size || size,
+      className: cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size
+        }),
+        "min-w-0 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
+        className
+      ),
+      ...props,
+      children
     }
   );
 }
-var Markdown = ({
+function MenuBar() {
+  const { editor } = useCurrentEditor();
+  const [showControls, setShowControls] = useState(false);
+  const [displayMode, setDisplayMode] = useState("icon");
+  if (!editor) {
+    return null;
+  }
+  const renderContent = (icon, text) => {
+    if (displayMode === "icon") {
+      return icon;
+    }
+    if (displayMode === "text") {
+      return text;
+    }
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      icon,
+      /* @__PURE__ */ jsx("span", { className: "ml-2", children: text })
+    ] });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "control-group", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-2 mb-2", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          onClick: () => setShowControls(!showControls),
+          title: showControls ? "Hide toolbar controls" : "Show toolbar controls",
+          children: showControls ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            "Hide Controls ",
+            /* @__PURE__ */ jsx(ChevronUp, { className: "ml-2 h-4 w-4" })
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            "Show Controls ",
+            /* @__PURE__ */ jsx(ChevronDown, { className: "ml-2 h-4 w-4" })
+          ] })
+        }
+      ),
+      showControls && /* @__PURE__ */ jsxs(
+        ToggleGroup,
+        {
+          type: "single",
+          value: displayMode,
+          onValueChange: (value) => value && setDisplayMode(value),
+          children: [
+            /* @__PURE__ */ jsxs(ToggleGroupItem, { value: "icon", title: "Show icons only", children: [
+              /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsx("span", { className: "ml-2", children: "Icons Only" })
+            ] }),
+            /* @__PURE__ */ jsxs(ToggleGroupItem, { value: "text", title: "Show text only", children: [
+              /* @__PURE__ */ jsx(Type, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsx("span", { className: "ml-2", children: "Text Only" })
+            ] }),
+            /* @__PURE__ */ jsxs(ToggleGroupItem, { value: "both", title: "Show both icons and text", children: [
+              /* @__PURE__ */ jsx(Monitor, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsx("span", { className: "ml-2", children: "Icons & Text" })
+            ] })
+          ]
+        }
+      )
+    ] }),
+    showControls && /* @__PURE__ */ jsxs("div", { className: "button-group flex flex-wrap gap-2", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "sm",
+          onClick: () => editor.chain().focus().toggleBold().run(),
+          disabled: !editor.can().chain().focus().toggleBold().run(),
+          className: editor.isActive("bold") ? "is-active" : "",
+          title: "Toggle bold text",
+          children: renderContent(/* @__PURE__ */ jsx(Bold, { className: "h-4 w-4" }), "Bold")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "sm",
+          onClick: () => editor.chain().focus().toggleItalic().run(),
+          disabled: !editor.can().chain().focus().toggleItalic().run(),
+          className: editor.isActive("italic") ? "is-active" : "",
+          title: "Toggle italic text",
+          children: renderContent(/* @__PURE__ */ jsx(Italic, { className: "h-4 w-4" }), "Italic")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "sm",
+          onClick: () => editor.chain().focus().toggleStrike().run(),
+          disabled: !editor.can().chain().focus().toggleStrike().run(),
+          className: editor.isActive("strike") ? "is-active" : "",
+          title: "Toggle strikethrough text",
+          children: renderContent(/* @__PURE__ */ jsx(Strikethrough, { className: "h-4 w-4" }), "Strike")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "sm",
+          onClick: () => editor.chain().focus().toggleCode().run(),
+          disabled: !editor.can().chain().focus().toggleCode().run(),
+          className: editor.isActive("code") ? "is-active" : "",
+          title: "Toggle inline code",
+          children: renderContent(/* @__PURE__ */ jsx(Code, { className: "h-4 w-4" }), "Code")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "sm",
+          onClick: () => editor.chain().focus().unsetAllMarks().run(),
+          title: "Clear all text formatting",
+          children: renderContent(/* @__PURE__ */ jsx(X, { className: "h-4 w-4" }), "Clear marks")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "sm",
+          onClick: () => editor.chain().focus().clearNodes().run(),
+          title: "Clear all block formatting",
+          children: renderContent(/* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" }), "Clear nodes")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "sm",
+          onClick: () => editor.chain().focus().setParagraph().run(),
+          className: editor.isActive("paragraph") ? "is-active" : "",
+          title: "Convert to paragraph",
+          children: renderContent(/* @__PURE__ */ jsx(PilcrowSquare, { className: "h-4 w-4" }), "Paragraph")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "sm",
+          onClick: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
+          className: editor.isActive("heading", { level: 1 }) ? "is-active" : "",
+          title: "Toggle heading 1",
+          children: renderContent(/* @__PURE__ */ jsx(Heading1, { className: "h-4 w-4" }), "H1")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "sm",
+          onClick: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
+          className: editor.isActive("heading", { level: 2 }) ? "is-active" : "",
+          title: "Toggle heading 2",
+          children: renderContent(/* @__PURE__ */ jsx(Heading2, { className: "h-4 w-4" }), "H2")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "sm",
+          onClick: () => editor.chain().focus().toggleHeading({ level: 3 }).run(),
+          className: editor.isActive("heading", { level: 3 }) ? "is-active" : "",
+          title: "Toggle heading 3",
+          children: renderContent(/* @__PURE__ */ jsx(Heading3, { className: "h-4 w-4" }), "H3")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "sm",
+          onClick: () => editor.chain().focus().toggleHeading({ level: 4 }).run(),
+          className: editor.isActive("heading", { level: 4 }) ? "is-active" : "",
+          title: "Toggle heading 4",
+          children: renderContent(/* @__PURE__ */ jsx(Heading4, { className: "h-4 w-4" }), "H4")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "sm",
+          onClick: () => editor.chain().focus().toggleHeading({ level: 5 }).run(),
+          className: editor.isActive("heading", { level: 5 }) ? "is-active" : "",
+          title: "Toggle heading 5",
+          children: renderContent(/* @__PURE__ */ jsx(Heading5, { className: "h-4 w-4" }), "H5")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "sm",
+          onClick: () => editor.chain().focus().toggleHeading({ level: 6 }).run(),
+          className: editor.isActive("heading", { level: 6 }) ? "is-active" : "",
+          title: "Toggle heading 6",
+          children: renderContent(/* @__PURE__ */ jsx(Heading6, { className: "h-4 w-4" }), "H6")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "sm",
+          onClick: () => editor.chain().focus().toggleBulletList().run(),
+          className: editor.isActive("bulletList") ? "is-active" : "",
+          title: "Toggle bullet list",
+          children: renderContent(/* @__PURE__ */ jsx(List, { className: "h-4 w-4" }), "Bullet list")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "sm",
+          onClick: () => editor.chain().focus().toggleOrderedList().run(),
+          className: editor.isActive("orderedList") ? "is-active" : "",
+          title: "Toggle ordered list",
+          children: renderContent(/* @__PURE__ */ jsx(ListOrdered, { className: "h-4 w-4" }), "Ordered list")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "sm",
+          onClick: () => editor.chain().focus().toggleCodeBlock().run(),
+          className: editor.isActive("codeBlock") ? "is-active" : "",
+          title: "Toggle code block",
+          children: renderContent(/* @__PURE__ */ jsx(Code, { className: "h-4 w-4" }), "Code block")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "sm",
+          onClick: () => editor.chain().focus().toggleBlockquote().run(),
+          className: editor.isActive("blockquote") ? "is-active" : "",
+          title: "Toggle blockquote",
+          children: renderContent(/* @__PURE__ */ jsx(Quote, { className: "h-4 w-4" }), "Blockquote")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "sm",
+          onClick: () => editor.chain().focus().setHorizontalRule().run(),
+          title: "Insert horizontal rule",
+          children: renderContent(/* @__PURE__ */ jsx(Minus, { className: "h-4 w-4" }), "Horizontal rule")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "sm",
+          onClick: () => editor.chain().focus().setHardBreak().run(),
+          title: "Insert hard break",
+          children: renderContent(/* @__PURE__ */ jsx(WrapText, { className: "h-4 w-4" }), "Hard break")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "sm",
+          onClick: () => editor.chain().focus().undo().run(),
+          disabled: !editor.can().chain().focus().undo().run(),
+          title: "Undo last change",
+          children: renderContent(/* @__PURE__ */ jsx(Undo2, { className: "h-4 w-4" }), "Undo")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "sm",
+          onClick: () => editor.chain().focus().redo().run(),
+          disabled: !editor.can().chain().focus().redo().run(),
+          title: "Redo last change",
+          children: renderContent(/* @__PURE__ */ jsx(Redo2, { className: "h-4 w-4" }), "Redo")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "sm",
+          onClick: () => editor.chain().focus().setColor("#958DF1").run(),
+          className: editor.isActive("textStyle", { color: "#958DF1" }) ? "is-active" : "",
+          title: "Set text color to purple",
+          children: renderContent(/* @__PURE__ */ jsx(Palette, { className: "h-4 w-4" }), "Purple")
+        }
+      )
+    ] })
+  ] });
+}
+function Markdown({
   settings,
   width,
   height
-}) => {
-  useDataLayer((s) => s.updateChart);
-  const [localContent, setLocalContent] = useState(settings.content);
-  localContent !== settings.content;
-  const handleChange = (value) => {
-    setLocalContent(value);
-  };
-  return /* @__PURE__ */ jsx("div", { style: { width, height }, className: "flex flex-col", children: /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ jsx(Textarea, { value: localContent, onChange: handleChange }) }) });
-};
+}) {
+  const updateChart = useDataLayer((s) => s.updateChart);
+  return /* @__PURE__ */ jsx("div", { style: { width, height }, className: "flex flex-col overflow-auto p-1", children: /* @__PURE__ */ jsx(
+    EditorProvider,
+    {
+      slotBefore: /* @__PURE__ */ jsx(MenuBar, {}),
+      extensions,
+      content: settings.content,
+      onUpdate: (value) => {
+        updateChart(settings.id, {
+          ...settings,
+          content: value.editor.getHTML()
+        });
+      }
+    }
+  ) });
+}
+var extensions = [
+  Color.configure({ types: [TextStyle.name, ListItem.name] }),
+  TextStyle.configure({ types: [ListItem.name] }),
+  StarterKit.configure({
+    bulletList: {
+      keepMarks: true,
+      keepAttributes: false
+    },
+    orderedList: {
+      keepMarks: true,
+      keepAttributes: false
+    }
+  })
+];
 
 // src/components/charts/Markdown/definition.ts
 var markdownDefinition = {
@@ -5545,7 +5916,7 @@ function BoxPlot({
     facetIds
   );
   const hasColorField = !!settings.colorField;
-  const margin = { top: 20, right: 20, bottom: 30, left: 60 };
+  const margin = settings.margin;
   const innerWidth = width - margin.left - margin.right;
   const innerHeight = height - margin.top - margin.bottom;
   const groupedData = useMemo(() => {
@@ -5772,7 +6143,6 @@ function BoxPlot({
     {
       width,
       height,
-      margin,
       xScale,
       yScale,
       brushingMode: "2d",
@@ -6479,6 +6849,52 @@ var colorLegendDefinition = {
   getFilterFunction: () => () => true
 };
 
+// src/lib/chartUtils.ts
+function reduceDataPoints(data, numBuckets) {
+  if (!data || data.length === 0) {
+    return [];
+  }
+  const validBuckets = Math.max(1, Math.min(1e3, Math.floor(numBuckets)));
+  if (data.length <= validBuckets * 3) {
+    return data.map((point2) => ({ ...point2, type: "start" }));
+  }
+  const xExtent = {
+    min: Math.min(...data.map((d) => d.x)),
+    max: Math.max(...data.map((d) => d.x))
+  };
+  if (xExtent.min === xExtent.max) {
+    return [{ ...data[0], type: "start" }];
+  }
+  const buckets = Array(validBuckets).fill(null).map(() => []);
+  data.forEach((point2) => {
+    const bucketIndex = Math.min(
+      Math.floor(
+        (point2.x - xExtent.min) / (xExtent.max - xExtent.min) * validBuckets
+      ),
+      validBuckets - 1
+    );
+    buckets[bucketIndex].push({ ...point2, type: "start" });
+  });
+  const result = [];
+  buckets.forEach((bucket) => {
+    if (bucket.length === 0) {
+      return;
+    }
+    result.push({ ...bucket[0], type: "start" });
+    if (bucket.length > 1) {
+      const minPoint = bucket.reduce((min, p) => p.y < min.y ? p : min);
+      const maxPoint = bucket.reduce((max, p) => p.y > max.y ? p : max);
+      if (minPoint !== bucket[0]) {
+        result.push({ ...minPoint, type: "min" });
+      }
+      if (maxPoint !== bucket[0] && maxPoint !== minPoint) {
+        result.push({ ...maxPoint, type: "max" });
+      }
+    }
+  });
+  return result.sort((a, b) => a.x - b.x);
+}
+
 // ../../node_modules/.pnpm/d3-shape@3.2.0/node_modules/d3-shape/src/constant.js
 function constant_default(x2) {
   return function constant() {
@@ -6800,52 +7216,6 @@ Step.prototype = {
 function stepAfter(context) {
   return new Step(context, 1);
 }
-
-// src/lib/chartUtils.ts
-function reduceDataPoints(data, numBuckets) {
-  if (!data || data.length === 0) {
-    return [];
-  }
-  const validBuckets = Math.max(1, Math.min(1e3, Math.floor(numBuckets)));
-  if (data.length <= validBuckets * 3) {
-    return data.map((point2) => ({ ...point2, type: "start" }));
-  }
-  const xExtent = {
-    min: Math.min(...data.map((d) => d.x)),
-    max: Math.max(...data.map((d) => d.x))
-  };
-  if (xExtent.min === xExtent.max) {
-    return [{ ...data[0], type: "start" }];
-  }
-  const buckets = Array(validBuckets).fill(null).map(() => []);
-  data.forEach((point2) => {
-    const bucketIndex = Math.min(
-      Math.floor(
-        (point2.x - xExtent.min) / (xExtent.max - xExtent.min) * validBuckets
-      ),
-      validBuckets - 1
-    );
-    buckets[bucketIndex].push({ ...point2, type: "start" });
-  });
-  const result = [];
-  buckets.forEach((bucket) => {
-    if (bucket.length === 0) {
-      return;
-    }
-    result.push({ ...bucket[0], type: "start" });
-    if (bucket.length > 1) {
-      const minPoint = bucket.reduce((min, p) => p.y < min.y ? p : min);
-      const maxPoint = bucket.reduce((max, p) => p.y > max.y ? p : max);
-      if (minPoint !== bucket[0]) {
-        result.push({ ...minPoint, type: "min" });
-      }
-      if (maxPoint !== bucket[0] && maxPoint !== minPoint) {
-        result.push({ ...maxPoint, type: "max" });
-      }
-    }
-  });
-  return result.sort((a, b) => a.x - b.x);
-}
 var curveTypes = {
   linear: linear_default,
   monotoneX,
@@ -6901,7 +7271,7 @@ var LineChart2 = ({
     settings.seriesField,
     facetIds
   );
-  const margin = { top: 20, right: 60, bottom: 30, left: 60 };
+  const margin = settings.margin;
   if (settings.showLegend) {
     switch (settings.legendPosition) {
       case "top":
@@ -7090,7 +7460,6 @@ var LineChart2 = ({
       {
         width,
         height,
-        margin,
         xScale,
         yScale: leftYScale,
         settings,
@@ -7558,7 +7927,7 @@ var lineChartDefinition = {
     },
     xAxis: {},
     yAxis: {},
-    margin: {},
+    margin: { top: 20, right: 60, bottom: 30, left: 60 },
     filters: [],
     xAxisLabel: "",
     yAxisLabel: "",
@@ -7611,7 +7980,7 @@ function RowChart({ settings, width, height, facetIds }) {
       filters: newFilters
     });
   };
-  const margin = { top: 20, right: 40, bottom: 30, left: 100 };
+  const margin = settings.margin;
   const innerWidth = width - margin.left - margin.right;
   const innerHeight = height - margin.top - margin.bottom;
   const { displayCounts } = useMemo(() => {
@@ -7679,7 +8048,6 @@ function RowChart({ settings, width, height, facetIds }) {
     {
       width,
       height,
-      margin,
       xScale,
       yScale,
       settings,
@@ -9639,10 +10007,7 @@ function GridBackground({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn(
-        "absolute inset-0 pointer-events-none border border-dashed border-gray-200",
-        className
-      ),
+      className: cn("absolute inset-0 pointer-events-none", className),
       style: {
         width,
         height
@@ -9650,7 +10015,7 @@ function GridBackground({
       children: /* @__PURE__ */ jsxs(
         "div",
         {
-          className: "absolute inset-0",
+          className: "absolute inset-0 border border-dashed border-gray-200",
           style: {
             margin: settings.containerPadding
           },
@@ -9718,17 +10083,77 @@ function ChartGridLayout({
         cols: gridSettings.columnCount,
         rowHeight: gridSettings.rowHeight,
         width: containerWidth,
+        margin: [0, 0],
         containerPadding: [
           gridSettings.containerPadding,
           gridSettings.containerPadding
         ],
         onLayoutChange,
         draggableHandle: ".drag-handle",
+        style: { position: "absolute", inset: 0 },
+        resizeHandle: /* @__PURE__ */ jsx(BottomRightHandle, {}),
         children
       }
     )
   ] });
 }
+var SouthEastArrow = () => {
+  const size = 100;
+  const margin = 20;
+  const rightEdgeX = size - margin;
+  const startX = margin;
+  const startY = size - margin;
+  const bottomRightX = rightEdgeX;
+  const bottomRightY = size - margin;
+  const topRightX = rightEdgeX;
+  const topRightY = margin;
+  const controlX = Math.floor(startX + (rightEdgeX - startX) * 0.7);
+  const controlY = Math.floor(startY - (startY - topRightY) * 0.3);
+  const path2 = `
+    M ${startX} ${startY}
+    L ${bottomRightX} ${bottomRightY}
+    L ${topRightX} ${topRightY}
+    Q ${controlX} ${controlY} ${startX} ${startY}
+    Z
+  `;
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "20px",
+      height: "20px",
+      version: "1.1",
+      viewBox: `0 0 ${size} ${size}`,
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx("path", { d: path2, fill: "currentColor" })
+    }
+  );
+};
+var BottomRightHandle = React2__default.forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          width: "20px",
+          height: "20px",
+          position: "absolute",
+          bottom: 0,
+          right: 0,
+          padding: 0,
+          cursor: "se-resize"
+        },
+        className: "handle-se",
+        ref,
+        ...props,
+        children: [
+          " ",
+          /* @__PURE__ */ jsx(SouthEastArrow, {}),
+          " "
+        ]
+      }
+    );
+  }
+);
 function ChartRenderer({
   settings,
   width,
@@ -10503,16 +10928,18 @@ function PlotChartPanel({
       onDelete();
     }
   };
+  const widthWithPadding = width - 8;
+  const heightWithPadding = height - 8;
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: "bg-card border rounded-lg",
-      style: { width, height },
+      className: "bg-card border rounded-lg flex flex-col overflow-hidden m-1",
+      style: { width: widthWithPadding, height: heightWithPadding },
       children: [
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: "flex items-center justify-between select-none",
+            className: "flex items-center justify-between select-none px-2",
             style: { height: 24 },
             children: [
               /* @__PURE__ */ jsxs("div", { className: "drag-handle cursor-move flex items-center gap-2", children: [
@@ -10539,20 +10966,19 @@ function PlotChartPanel({
             ]
           }
         ),
-        /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(FacetAxisProvider, { children: settings.facet?.enabled ? /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(FacetAxisProvider, { children: settings.facet?.enabled ? /* @__PURE__ */ jsx(
           FacetContainer,
           {
             settings,
             width: width - 32,
-            height: height - 56
+            height: height - 36
           }
         ) : /* @__PURE__ */ jsx(
           ChartRenderer,
           {
             settings,
             width: width - 32,
-            height: height - 56,
-            facetIds: void 0
+            height: height - 36
           }
         ) }) })
       ]