@tightknitai/block-kitchen 0.8.6 → 0.8.7

package/dist/helpers.d.cts

@@ -1,5 +1,5 @@
-import { u as SupportedBlock } from './palette-DToUE_3J.cjs';
-export { v as SupportedBlockType } from './palette-DToUE_3J.cjs';
+import { J as SupportedBlock } from './palette-WZCUVJTn.cjs';
+export { K as SupportedBlockType } from './palette-WZCUVJTn.cjs';
 import 'react';
 import 'slack-web-api-client';
 

package/dist/helpers.d.ts

@@ -1,5 +1,5 @@
-import { u as SupportedBlock } from './palette-DToUE_3J.js';
-export { v as SupportedBlockType } from './palette-DToUE_3J.js';
+import { J as SupportedBlock } from './palette-WZCUVJTn.js';
+export { K as SupportedBlockType } from './palette-WZCUVJTn.js';
 import 'react';
 import 'slack-web-api-client';
 

package/dist/index.cjs

@@ -1014,6 +1014,143 @@ var defaultPalette = [
         })
       }
     ]
+  },
+  {
+    name: "Data Visualization",
+    icon: lucideReact.ChartColumnBig,
+    variants: [
+      {
+        id: "dataviz_line",
+        label: "Line chart",
+        factory: () => ({
+          type: "data_visualization",
+          title: "Weekly active users by platform",
+          chart: {
+            type: "line",
+            series: [
+              {
+                name: "Desktop",
+                data: [
+                  { label: "Mon", value: 800 },
+                  { label: "Tue", value: 920 },
+                  { label: "Wed", value: 880 },
+                  { label: "Thu", value: 1010 },
+                  { label: "Fri", value: 1120 }
+                ]
+              },
+              {
+                name: "Mobile",
+                data: [
+                  { label: "Mon", value: 400 },
+                  { label: "Tue", value: 530 },
+                  { label: "Wed", value: 500 },
+                  { label: "Thu", value: 590 },
+                  { label: "Fri", value: 600 }
+                ]
+              }
+            ],
+            axis_config: {
+              categories: ["Mon", "Tue", "Wed", "Thu", "Fri"],
+              x_label: "Day",
+              y_label: "Users"
+            }
+          }
+        })
+      },
+      {
+        id: "dataviz_bar",
+        label: "Bar chart",
+        factory: () => ({
+          type: "data_visualization",
+          title: "Messages sent by platform",
+          chart: {
+            type: "bar",
+            series: [
+              {
+                name: "Desktop",
+                data: [
+                  { label: "Mon", value: 1500 },
+                  { label: "Tue", value: 1400 },
+                  { label: "Wed", value: 1700 },
+                  { label: "Thu", value: 1600 },
+                  { label: "Fri", value: 1280 }
+                ]
+              },
+              {
+                name: "Mobile",
+                data: [
+                  { label: "Mon", value: 800 },
+                  { label: "Tue", value: 750 },
+                  { label: "Wed", value: 920 },
+                  { label: "Thu", value: 880 },
+                  { label: "Fri", value: 700 }
+                ]
+              }
+            ],
+            axis_config: {
+              categories: ["Mon", "Tue", "Wed", "Thu", "Fri"],
+              x_label: "Day",
+              y_label: "Messages"
+            }
+          }
+        })
+      },
+      {
+        id: "dataviz_area",
+        label: "Area chart",
+        factory: () => ({
+          type: "data_visualization",
+          title: "Concurrent users by platform",
+          chart: {
+            type: "area",
+            series: [
+              {
+                name: "Desktop",
+                data: [
+                  { label: "Mon", value: 2800 },
+                  { label: "Tue", value: 3e3 },
+                  { label: "Wed", value: 3400 },
+                  { label: "Thu", value: 3200 },
+                  { label: "Fri", value: 3500 }
+                ]
+              },
+              {
+                name: "Mobile",
+                data: [
+                  { label: "Mon", value: 1400 },
+                  { label: "Tue", value: 1500 },
+                  { label: "Wed", value: 1700 },
+                  { label: "Thu", value: 1600 },
+                  { label: "Fri", value: 1800 }
+                ]
+              }
+            ],
+            axis_config: {
+              categories: ["Mon", "Tue", "Wed", "Thu", "Fri"],
+              x_label: "Day",
+              y_label: "Users"
+            }
+          }
+        })
+      },
+      {
+        id: "dataviz_pie",
+        label: "Pie chart",
+        factory: () => ({
+          type: "data_visualization",
+          title: "Plan distribution by tier",
+          chart: {
+            type: "pie",
+            segments: [
+              { label: "Free", value: 4200 },
+              { label: "Pro", value: 2300 },
+              { label: "Business+", value: 1100 },
+              { label: "Enterprise", value: 480 }
+            ]
+          }
+        })
+      }
+    ]
   }
 ];
 var legacyInputVariants = [
@@ -1492,6 +1629,8 @@ function labelForBlockType(type) {
       return "Plan";
     case "task_card":
       return "Task Card";
+    case "data_visualization":
+      return "Data Visualization";
   }
 }
 function cn(...inputs) {
@@ -3844,6 +3983,294 @@ function ImageItemCard({
     ) })
   ] });
 }
+var CHART_TYPES = ["line", "bar", "area", "pie"];
+function isCartesian(chart) {
+  return chart.type !== "pie";
+}
+function cartesianToSegments(chart) {
+  return (chart.series[0]?.data ?? []).map((d) => ({ label: d.label, value: d.value }));
+}
+function segmentsToCartesian(type, segments) {
+  return {
+    type,
+    series: [{ name: "Series 1", data: segments.map((s) => ({ label: s.label, value: s.value })) }],
+    axis_config: { categories: segments.map((s) => s.label) }
+  };
+}
+function convertChart(chart, nextType) {
+  if (nextType === chart.type) {
+    return chart;
+  }
+  if (nextType === "pie") {
+    return { type: "pie", segments: isCartesian(chart) ? cartesianToSegments(chart) : chart.segments };
+  }
+  if (isCartesian(chart)) {
+    return { ...chart, type: nextType };
+  }
+  return segmentsToCartesian(nextType, chart.segments);
+}
+function DataVisualizationEditor({ block, onChange }) {
+  const { chart } = block;
+  const setChart = (next) => onChange({ ...block, chart: next });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Title", help: "Heading shown above the chart.", htmlFor: "dataviz-title", children: /* @__PURE__ */ jsxRuntime.jsx(
+      Input,
+      {
+        id: "dataviz-title",
+        value: block.title,
+        placeholder: "e.g. Weekly active users",
+        onChange: (e) => onChange({ ...block, title: e.target.value })
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Chart type", children: /* @__PURE__ */ jsxRuntime.jsx(
+      RadioGroup,
+      {
+        value: chart.type,
+        onValueChange: (v) => setChart(convertChart(chart, v)),
+        className: "flex flex-row flex-wrap gap-3",
+        children: CHART_TYPES.map((t) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(RadioGroupItem, { value: t, id: `dataviz-type-${t}` }),
+          /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: `dataviz-type-${t}`, className: "text-xs capitalize", children: t })
+        ] }, t))
+      }
+    ) }),
+    isCartesian(chart) ? /* @__PURE__ */ jsxRuntime.jsx(CartesianFields, { chart, onChange: setChart }) : /* @__PURE__ */ jsxRuntime.jsx(PieFields, { chart, onChange: setChart })
+  ] });
+}
+function NumberInput({
+  id,
+  value,
+  onCommit,
+  ariaLabel,
+  className
+}) {
+  const [draft, setDraft] = React.useState(String(value));
+  React.useEffect(() => {
+    setDraft(String(value));
+  }, [value]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Input,
+    {
+      id,
+      type: "number",
+      inputMode: "numeric",
+      "aria-label": ariaLabel,
+      value: draft,
+      className,
+      onChange: (e) => {
+        const raw = e.target.value;
+        setDraft(raw);
+        if (raw === "" || raw === "-" || raw === "." || raw === "-.") {
+          return;
+        }
+        const next = Number(raw);
+        if (!Number.isNaN(next)) {
+          onCommit(next);
+        }
+      },
+      onBlur: () => {
+        const next = Number(draft);
+        const safe = draft.trim() === "" || Number.isNaN(next) ? 0 : next;
+        onCommit(safe);
+        setDraft(String(safe));
+      }
+    }
+  );
+}
+function CartesianFields({ chart, onChange }) {
+  const series = chart.series;
+  const categories = chart.axis_config?.categories && chart.axis_config.categories.length > 0 ? chart.axis_config.categories : series[0]?.data.map((d) => d.label) ?? [];
+  const xLabel = chart.axis_config?.x_label ?? "";
+  const yLabel = chart.axis_config?.y_label ?? "";
+  const commit = (nextCategories, nextSeries, axis) => {
+    const aligned = nextSeries.map((s) => ({
+      name: s.name,
+      data: nextCategories.map((label, i) => ({ label, value: s.data[i]?.value ?? 0 }))
+    }));
+    const x = axis?.x_label ?? xLabel;
+    const y = axis?.y_label ?? yLabel;
+    onChange({
+      type: chart.type,
+      series: aligned,
+      axis_config: {
+        categories: nextCategories,
+        ...x ? { x_label: x } : {},
+        ...y ? { y_label: y } : {}
+      }
+    });
+  };
+  const setCategory = (col, label) => commit(
+    categories.map((c, i) => i === col ? label : c),
+    series
+  );
+  const addCategory = () => commit([...categories, `Cat ${categories.length + 1}`], series);
+  const removeCategory = (col) => commit(
+    categories.filter((_, i) => i !== col),
+    series.map((s) => ({ name: s.name, data: s.data.filter((_, i) => i !== col) }))
+  );
+  const setCell = (seriesIdx, col, value) => commit(
+    categories,
+    series.map(
+      (s, i) => i === seriesIdx ? { name: s.name, data: s.data.map((d, j) => j === col ? { ...d, value } : d) } : s
+    )
+  );
+  const setSeriesName = (seriesIdx, name) => commit(
+    categories,
+    series.map((s, i) => i === seriesIdx ? { ...s, name } : s)
+  );
+  const addSeries = () => commit(categories, [
+    ...series,
+    { name: `Series ${series.length + 1}`, data: categories.map((label) => ({ label, value: 0 })) }
+  ]);
+  const removeSeries = (seriesIdx) => commit(
+    categories,
+    series.filter((_, i) => i !== seriesIdx)
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "X-axis label", htmlFor: "dataviz-x-label", children: /* @__PURE__ */ jsxRuntime.jsx(
+        Input,
+        {
+          id: "dataviz-x-label",
+          value: xLabel,
+          placeholder: "e.g. Day",
+          onChange: (e) => commit(categories, series, { x_label: e.target.value })
+        }
+      ) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Y-axis label", htmlFor: "dataviz-y-label", children: /* @__PURE__ */ jsxRuntime.jsx(
+        Input,
+        {
+          id: "dataviz-y-label",
+          value: yLabel,
+          placeholder: "e.g. Users",
+          onChange: (e) => commit(categories, series, { y_label: e.target.value })
+        }
+      ) }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Data", help: "Categories are the x-axis; each series is plotted across them.", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 overflow-x-auto", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-36 shrink-0", "aria-hidden": "true" }),
+        categories.map((cat, c) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-[88px] flex-1 items-center gap-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Input,
+            {
+              "aria-label": `Category ${c + 1}`,
+              value: cat,
+              placeholder: `Cat ${c + 1}`,
+              onChange: (e) => setCategory(c, e.target.value),
+              className: "h-8 text-xs"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": `Remove category ${c + 1}`,
+              onClick: () => removeCategory(c),
+              className: "flex h-6 w-6 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-destructive/10 hover:text-destructive",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-3 w-3" })
+            }
+          )
+        ] }, c))
+      ] }),
+      series.map((s, si) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-36 shrink-0 items-center gap-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Input,
+            {
+              "aria-label": `Series ${si + 1} name`,
+              value: s.name,
+              placeholder: `Series ${si + 1}`,
+              onChange: (e) => setSeriesName(si, e.target.value),
+              className: "h-8 text-xs"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": `Remove series ${si + 1}`,
+              onClick: () => removeSeries(si),
+              className: "flex h-6 w-6 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-destructive/10 hover:text-destructive",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-3 w-3" })
+            }
+          )
+        ] }),
+        categories.map((cat, c) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-[88px] flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+          NumberInput,
+          {
+            value: s.data[c]?.value ?? 0,
+            onCommit: (n) => setCell(si, c, n),
+            ariaLabel: `${s.name || `Series ${si + 1}`} value for ${cat || `category ${c + 1}`}`,
+            className: "h-8 text-xs"
+          }
+        ) }, c))
+      ] }, si))
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", size: "sm", onClick: addSeries, className: "self-start", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-3.5 w-3.5" }),
+        " Add series"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", size: "sm", variant: "outline", onClick: addCategory, className: "self-start", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-3.5 w-3.5" }),
+        " Add category"
+      ] })
+    ] })
+  ] });
+}
+function PieFields({ chart, onChange }) {
+  const segments = chart.segments;
+  const setSegment = (idx, change) => onChange({ ...chart, segments: segments.map((s, i) => i === idx ? { ...s, ...change } : s) });
+  const removeSegment = (idx) => onChange({ ...chart, segments: segments.filter((_, i) => i !== idx) });
+  const addSegment = () => onChange({ ...chart, segments: [...segments, { label: `Segment ${segments.length + 1}`, value: 0 }] });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 rounded-md border bg-muted/20 p-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-foreground", children: "Segments" }),
+    segments.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[11px] leading-snug text-muted-foreground", children: "No segments. Add one to render a slice." }) : null,
+    segments.map((seg, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 rounded border bg-background p-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-medium text-foreground", children: [
+          "Segment ",
+          idx + 1
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Remove segment",
+            onClick: () => removeSegment(idx),
+            className: "rounded p-1 text-muted-foreground hover:bg-destructive/10 hover:text-destructive",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-3.5 w-3.5" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Label", htmlFor: `pie-label-${idx}`, children: /* @__PURE__ */ jsxRuntime.jsx(
+          Input,
+          {
+            id: `pie-label-${idx}`,
+            value: seg.label,
+            placeholder: "e.g. Free",
+            onChange: (e) => setSegment(idx, { label: e.target.value })
+          }
+        ) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-28", children: /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Value", htmlFor: `pie-value-${idx}`, children: /* @__PURE__ */ jsxRuntime.jsx(
+          NumberInput,
+          {
+            id: `pie-value-${idx}`,
+            value: seg.value,
+            onCommit: (n) => setSegment(idx, { value: n }),
+            ariaLabel: `Segment ${idx + 1} value`
+          }
+        ) }) })
+      ] })
+    ] }, idx)),
+    /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", size: "sm", onClick: addSegment, className: "self-start", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-3.5 w-3.5" }),
+      " Add segment"
+    ] })
+  ] });
+}
 function DividerEditor() {
   return /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "A horizontal line that separates content. This block has no options to configure." });
 }
@@ -5292,7 +5719,7 @@ var SUPPORTED_BLOCK_KINDS = /* @__PURE__ */ new Set([
   "rich_text_preformatted"
 ]);
 var SUPPORTED_INLINE_KINDS = /* @__PURE__ */ new Set(["text", "link", "emoji"]);
-var SUPPORTED_TEXT_STYLE_KEYS = /* @__PURE__ */ new Set(["bold", "italic", "strike", "code"]);
+var SUPPORTED_TEXT_STYLE_KEYS = /* @__PURE__ */ new Set(["bold", "italic", "strike", "underline", "code"]);
 var MAX_LIST_INDENT = 8;
 function detectLossy(block) {
   const out = [];
@@ -5476,6 +5903,9 @@ function styleToMarks(style) {
   if (style.strike) {
     marks.push({ type: "strike" });
   }
+  if (style.underline) {
+    marks.push({ type: "underline" });
+  }
   if (style.code) {
     marks.push({ type: "code" });
   }
@@ -5622,6 +6052,9 @@ function marksToStyle(marks) {
     if (m.type === "strike") {
       style.strike = true;
     }
+    if (m.type === "underline") {
+      style.underline = true;
+    }
     if (m.type === "code") {
       style.code = true;
     }
@@ -5709,7 +6142,7 @@ var INLINE_LABEL = {
   broadcast: "Broadcast",
   usergroup: "User group"
 };
-var STYLE_KEYS = ["bold", "italic", "strike", "code"];
+var STYLE_KEYS = ["bold", "italic", "strike", "underline", "code"];
 function RichTextStructuredEditor({ block, onChange }) {
   const elements = block.elements ?? [];
   const replaceElements = (next) => {
@@ -6388,6 +6821,15 @@ function Toolbar({ editor }) {
         Icon: lucideReact.Strikethrough
       }
     ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ToolbarButton,
+      {
+        label: "Underline",
+        active: editor.isActive("underline"),
+        onClick: () => editor.chain().focus().toggleUnderline().run(),
+        Icon: lucideReact.Underline
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx(
       ToolbarButton,
       {
@@ -7270,6 +7712,8 @@ function dispatch(block, onChange) {
       return /* @__PURE__ */ jsxRuntime.jsx(PlanEditor, { block, onChange: (next) => onChange(next) });
     case "task_card":
       return /* @__PURE__ */ jsxRuntime.jsx(TaskCardEditor, { block, onChange: (next) => onChange(next) });
+    case "data_visualization":
+      return /* @__PURE__ */ jsxRuntime.jsx(DataVisualizationEditor, { block, onChange: (next) => onChange(next) });
     default:
       return null;
   }
@@ -7345,7 +7789,8 @@ var BLOCK_TYPE_LABELS = {
   input: "Input",
   video: "Video",
   plan: "Plan",
-  task_card: "Task Card"
+  task_card: "Task Card",
+  data_visualization: "Data Visualization"
 };
 function BlockRow({
   builderBlock,