exploreda 0.0.5 → 0.0.6

package/dist/ExplorEda.cjs

@@ -27,6 +27,13 @@ var utilities = require('@dnd-kit/utilities');
 var SelectPrimitive = require('@radix-ui/react-select');
 var ProgressPrimitive = require('@radix-ui/react-progress');
 var TooltipPrimitive = require('@radix-ui/react-tooltip');
+var extensionColor = require('@tiptap/extension-color');
+var ListItem = require('@tiptap/extension-list-item');
+var TextStyle = require('@tiptap/extension-text-style');
+var react = require('@tiptap/react');
+var StarterKit = require('@tiptap/starter-kit');
+var ToggleGroupPrimitive = require('@radix-ui/react-toggle-group');
+require('@radix-ui/react-toggle');
 var natsort = require('natsort');
 var ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
 var d3Array = require('d3-array');
@@ -73,6 +80,10 @@ var SwitchPrimitive__namespace = /*#__PURE__*/_interopNamespace(SwitchPrimitive)
 var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespace(SelectPrimitive);
 var ProgressPrimitive__namespace = /*#__PURE__*/_interopNamespace(ProgressPrimitive);
 var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
+var ListItem__default = /*#__PURE__*/_interopDefault(ListItem);
+var TextStyle__default = /*#__PURE__*/_interopDefault(TextStyle);
+var StarterKit__default = /*#__PURE__*/_interopDefault(StarterKit);
+var ToggleGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(ToggleGroupPrimitive);
 var natsort__default = /*#__PURE__*/_interopDefault(natsort);
 var ScrollAreaPrimitive__namespace = /*#__PURE__*/_interopNamespace(ScrollAreaPrimitive);
 var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
@@ -1174,11 +1185,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",
@@ -1187,6 +1196,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 = React2.useRef(null);
@@ -1328,7 +1338,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 = React2.useMemo(
@@ -1529,7 +1539,6 @@ function BarChart({ settings, width, height, facetIds }) {
     {
       width,
       height,
-      margin,
       xScale,
       yScale,
       brushingMode: isBandScale ? "none" : "horizontal",
@@ -2130,7 +2139,7 @@ var barChartDefinition = {
     type: "bar",
     title: "Bar Chart",
     layout,
-    margin: {},
+    margin: { top: 20, right: 20, bottom: 30, left: 60 },
     filters: []
   }),
   validateSettings: (settings) => {
@@ -2297,7 +2306,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++) {
@@ -2413,7 +2422,7 @@ var scatterPlotDefinition = {
     type: "scatter",
     title: "Scatter Plot",
     layout,
-    margin: {},
+    margin: { top: 20, right: 20, bottom: 20, left: 20 },
     xField: "__ID",
     yField: field ?? "",
     filters: []
@@ -3235,7 +3244,7 @@ function PivotTable({
   return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "overflow-auto flex-1", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full border-collapse relative", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("thead", { className: "sticky top-0 bg-background z-40", children: [
@@ -3937,7 +3946,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" }],
@@ -4702,7 +4711,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,
@@ -5381,7 +5390,7 @@ var summaryTableDefinition = {
     type: "summary",
     title: "Summary Table",
     layout,
-    margin: {}
+    margin: { top: 20, right: 20, bottom: 20, left: 20 }
   }),
   validateSettings: (settings) => {
     return true;
@@ -5390,32 +5399,398 @@ var summaryTableDefinition = {
     return (d) => true;
   }
 };
-function Textarea({ className, ...props }) {
+var toggleVariants = classVarianceAuthority.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__namespace.createContext({
+  size: "default",
+  variant: "default"
+});
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  children,
+  ...props
+}) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "textarea",
+    ToggleGroupPrimitive__namespace.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__ */ jsxRuntime.jsx(ToggleGroupContext.Provider, { value: { variant, size }, children })
+    }
+  );
+}
+function ToggleGroupItem({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}) {
+  const context = React2__namespace.useContext(ToggleGroupContext);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ToggleGroupPrimitive__namespace.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 } = react.useCurrentEditor();
+  const [showControls, setShowControls] = React2.useState(false);
+  const [displayMode, setDisplayMode] = React2.useState("icon");
+  if (!editor) {
+    return null;
+  }
+  const renderContent = (icon, text) => {
+    if (displayMode === "icon") {
+      return icon;
+    }
+    if (displayMode === "text") {
+      return text;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      icon,
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2", children: text })
+    ] });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "control-group", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 mb-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          onClick: () => setShowControls(!showControls),
+          title: showControls ? "Hide toolbar controls" : "Show toolbar controls",
+          children: showControls ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            "Hide Controls ",
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "ml-2 h-4 w-4" })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            "Show Controls ",
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "ml-2 h-4 w-4" })
+          ] })
+        }
+      ),
+      showControls && /* @__PURE__ */ jsxRuntime.jsxs(
+        ToggleGroup,
+        {
+          type: "single",
+          value: displayMode,
+          onValueChange: (value) => value && setDisplayMode(value),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(ToggleGroupItem, { value: "icon", title: "Show icons only", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2", children: "Icons Only" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(ToggleGroupItem, { value: "text", title: "Show text only", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Type, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2", children: "Text Only" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(ToggleGroupItem, { value: "both", title: "Show both icons and text", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Monitor, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2", children: "Icons & Text" })
+            ] })
+          ]
+        }
+      )
+    ] }),
+    showControls && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "button-group flex flex-wrap gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Bold, { className: "h-4 w-4" }), "Bold")
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Italic, { className: "h-4 w-4" }), "Italic")
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Strikethrough, { className: "h-4 w-4" }), "Strike")
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Code, { className: "h-4 w-4" }), "Code")
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          size: "sm",
+          onClick: () => editor.chain().focus().unsetAllMarks().run(),
+          title: "Clear all text formatting",
+          children: renderContent(/* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }), "Clear marks")
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          size: "sm",
+          onClick: () => editor.chain().focus().clearNodes().run(),
+          title: "Clear all block formatting",
+          children: renderContent(/* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-4 w-4" }), "Clear nodes")
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          size: "sm",
+          onClick: () => editor.chain().focus().setParagraph().run(),
+          className: editor.isActive("paragraph") ? "is-active" : "",
+          title: "Convert to paragraph",
+          children: renderContent(/* @__PURE__ */ jsxRuntime.jsx(lucideReact.PilcrowSquare, { className: "h-4 w-4" }), "Paragraph")
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Heading1, { className: "h-4 w-4" }), "H1")
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Heading2, { className: "h-4 w-4" }), "H2")
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Heading3, { className: "h-4 w-4" }), "H3")
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Heading4, { className: "h-4 w-4" }), "H4")
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Heading5, { className: "h-4 w-4" }), "H5")
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Heading6, { className: "h-4 w-4" }), "H6")
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          size: "sm",
+          onClick: () => editor.chain().focus().toggleBulletList().run(),
+          className: editor.isActive("bulletList") ? "is-active" : "",
+          title: "Toggle bullet list",
+          children: renderContent(/* @__PURE__ */ jsxRuntime.jsx(lucideReact.List, { className: "h-4 w-4" }), "Bullet list")
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          size: "sm",
+          onClick: () => editor.chain().focus().toggleOrderedList().run(),
+          className: editor.isActive("orderedList") ? "is-active" : "",
+          title: "Toggle ordered list",
+          children: renderContent(/* @__PURE__ */ jsxRuntime.jsx(lucideReact.ListOrdered, { className: "h-4 w-4" }), "Ordered list")
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          size: "sm",
+          onClick: () => editor.chain().focus().toggleCodeBlock().run(),
+          className: editor.isActive("codeBlock") ? "is-active" : "",
+          title: "Toggle code block",
+          children: renderContent(/* @__PURE__ */ jsxRuntime.jsx(lucideReact.Code, { className: "h-4 w-4" }), "Code block")
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          size: "sm",
+          onClick: () => editor.chain().focus().toggleBlockquote().run(),
+          className: editor.isActive("blockquote") ? "is-active" : "",
+          title: "Toggle blockquote",
+          children: renderContent(/* @__PURE__ */ jsxRuntime.jsx(lucideReact.Quote, { className: "h-4 w-4" }), "Blockquote")
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          size: "sm",
+          onClick: () => editor.chain().focus().setHorizontalRule().run(),
+          title: "Insert horizontal rule",
+          children: renderContent(/* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minus, { className: "h-4 w-4" }), "Horizontal rule")
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          size: "sm",
+          onClick: () => editor.chain().focus().setHardBreak().run(),
+          title: "Insert hard break",
+          children: renderContent(/* @__PURE__ */ jsxRuntime.jsx(lucideReact.WrapText, { className: "h-4 w-4" }), "Hard break")
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          size: "sm",
+          onClick: () => editor.chain().focus().undo().run(),
+          disabled: !editor.can().chain().focus().undo().run(),
+          title: "Undo last change",
+          children: renderContent(/* @__PURE__ */ jsxRuntime.jsx(lucideReact.Undo2, { className: "h-4 w-4" }), "Undo")
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          size: "sm",
+          onClick: () => editor.chain().focus().redo().run(),
+          disabled: !editor.can().chain().focus().redo().run(),
+          title: "Redo last change",
+          children: renderContent(/* @__PURE__ */ jsxRuntime.jsx(lucideReact.Redo2, { className: "h-4 w-4" }), "Redo")
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Palette, { className: "h-4 w-4" }), "Purple")
+        }
+      )
+    ] })
+  ] });
+}
+function Markdown({
   settings,
   width,
   height
-}) => {
-  useDataLayer((s) => s.updateChart);
-  const [localContent, setLocalContent] = React2.useState(settings.content);
-  localContent !== settings.content;
-  const handleChange = (value) => {
-    setLocalContent(value);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width, height }, className: "flex flex-col", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx(Textarea, { value: localContent, onChange: handleChange }) }) });
-};
+}) {
+  const updateChart = useDataLayer((s) => s.updateChart);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width, height }, className: "flex flex-col overflow-auto p-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+    react.EditorProvider,
+    {
+      slotBefore: /* @__PURE__ */ jsxRuntime.jsx(MenuBar, {}),
+      extensions,
+      content: settings.content,
+      onUpdate: (value) => {
+        updateChart(settings.id, {
+          ...settings,
+          content: value.editor.getHTML()
+        });
+      }
+    }
+  ) });
+}
+var extensions = [
+  extensionColor.Color.configure({ types: [TextStyle__default.default.name, ListItem__default.default.name] }),
+  TextStyle__default.default.configure({ types: [ListItem__default.default.name] }),
+  StarterKit__default.default.configure({
+    bulletList: {
+      keepMarks: true,
+      keepAttributes: false
+    },
+    orderedList: {
+      keepMarks: true,
+      keepAttributes: false
+    }
+  })
+];
 
 // src/components/charts/Markdown/definition.ts
 var markdownDefinition = {
@@ -5585,7 +5960,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 = React2.useMemo(() => {
@@ -5812,7 +6187,6 @@ function BoxPlot({
     {
       width,
       height,
-      margin,
       xScale,
       yScale,
       brushingMode: "2d",
@@ -6519,6 +6893,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() {
@@ -6840,52 +7260,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,
@@ -6941,7 +7315,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":
@@ -7130,7 +7504,6 @@ var LineChart2 = ({
       {
         width,
         height,
-        margin,
         xScale,
         yScale: leftYScale,
         settings,
@@ -7598,7 +7971,7 @@ var lineChartDefinition = {
     },
     xAxis: {},
     yAxis: {},
-    margin: {},
+    margin: { top: 20, right: 60, bottom: 30, left: 60 },
     filters: [],
     xAxisLabel: "",
     yAxisLabel: "",
@@ -7651,7 +8024,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 } = React2.useMemo(() => {
@@ -7719,7 +8092,6 @@ function RowChart({ settings, width, height, facetIds }) {
     {
       width,
       height,
-      margin,
       xScale,
       yScale,
       settings,
@@ -9679,10 +10051,7 @@ function GridBackground({
   return /* @__PURE__ */ jsxRuntime.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
@@ -9690,7 +10059,7 @@ function GridBackground({
       children: /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: "absolute inset-0",
+          className: "absolute inset-0 border border-dashed border-gray-200",
           style: {
             margin: settings.containerPadding
           },
@@ -9758,17 +10127,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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: "20px",
+      height: "20px",
+      version: "1.1",
+      viewBox: `0 0 ${size} ${size}`,
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: path2, fill: "currentColor" })
+    }
+  );
+};
+var BottomRightHandle = React2__namespace.default.forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(SouthEastArrow, {}),
+          " "
+        ]
+      }
+    );
+  }
+);
 function ChartRenderer({
   settings,
   width,
@@ -10543,16 +10972,18 @@ function PlotChartPanel({
       onDelete();
     }
   };
+  const widthWithPadding = width - 8;
+  const heightWithPadding = height - 8;
   return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "drag-handle cursor-move flex items-center gap-2", children: [
@@ -10579,20 +11010,19 @@ function PlotChartPanel({
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(FacetAxisProvider, { children: settings.facet?.enabled ? /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(FacetAxisProvider, { children: settings.facet?.enabled ? /* @__PURE__ */ jsxRuntime.jsx(
           FacetContainer,
           {
             settings,
             width: width - 32,
-            height: height - 56
+            height: height - 36
           }
         ) : /* @__PURE__ */ jsxRuntime.jsx(
           ChartRenderer,
           {
             settings,
             width: width - 32,
-            height: height - 56,
-            facetIds: void 0
+            height: height - 36
           }
         ) }) })
       ]