@tightknitai/block-kitchen 0.8.5 → 0.8.7

package/dist/{palette-Dco-CVMi.d.cts → palette-WZCUVJTn.d.cts}

@@ -151,7 +151,7 @@ declare function buildVariantById(sections: readonly PaletteSection[]): Readonly
 /**
  * The Slack Block Kit block types supported by the builder in v1.
  */
-type SupportedBlockType = 'section' | 'header' | 'divider' | 'context' | 'actions' | 'image' | 'markdown' | 'rich_text' | 'table' | 'alert' | 'card' | 'carousel' | 'context_actions' | 'input' | 'video' | 'plan' | 'task_card';
+type SupportedBlockType = 'section' | 'header' | 'divider' | 'context' | 'actions' | 'image' | 'markdown' | 'rich_text' | 'table' | 'alert' | 'card' | 'carousel' | 'context_actions' | 'input' | 'video' | 'plan' | 'task_card' | 'data_visualization';
 /**
  * Slack `markdown` block payload. Renders standard markdown (GFM)
  * via `slack-blocks-to-jsx`'s react-markdown integration.
@@ -399,6 +399,80 @@ interface PlanBlock {
     tasks?: TaskCardBlock[];
     block_id?: string;
 }
+/**
+ * One `{ label, value }` data point inside a {@link ChartSeries}. `label`
+ * is the x-axis category the point belongs to; `value` is the numeric
+ * measurement and may be negative.
+ */
+interface ChartDataPoint {
+    label: string;
+    value: number;
+}
+/**
+ * A named series of {@link ChartDataPoint}s. Line / bar / area charts may
+ * carry one or more series; each renders as its own line, set of bars, or
+ * filled region with a matching legend entry.
+ */
+interface ChartSeries {
+    name: string;
+    data: ChartDataPoint[];
+}
+/**
+ * Axis configuration shared by the cartesian chart types (line / bar /
+ * area). `categories` is the ordered set of x-axis tick labels; `x_label`
+ * and `y_label` title the axes.
+ */
+interface ChartAxisConfig {
+    categories: string[];
+    x_label?: string;
+    y_label?: string;
+}
+/**
+ * One `{ label, value }` slice of a {@link PieChart}.
+ */
+interface PieChartSegment {
+    label: string;
+    value: number;
+}
+/**
+ * Cartesian chart spec (line / bar / area) used by a
+ * {@link DataVisualizationBlock}: one or more named series plotted against
+ * a shared category axis.
+ */
+interface CartesianChart {
+    type: 'line' | 'bar' | 'area';
+    series: ChartSeries[];
+    axis_config?: ChartAxisConfig;
+}
+/**
+ * Pie chart spec used by a {@link DataVisualizationBlock}. Unlike the
+ * cartesian charts it has no axes — just a flat list of labeled segments.
+ */
+interface PieChart {
+    type: 'pie';
+    segments: PieChartSegment[];
+}
+/**
+ * The `chart` payload of a {@link DataVisualizationBlock}: either a
+ * cartesian chart (line / bar / area) or a pie chart.
+ */
+type Chart = CartesianChart | PieChart;
+/**
+ * The chart shape rendered by a {@link DataVisualizationBlock}.
+ */
+type ChartType = Chart['type'];
+/**
+ * Slack `data_visualization` block payload. Renders a line, bar, area, or
+ * pie chart from inline data. Valid on the message surface only.
+ * `slack-web-api-client` doesn't ship this type yet, so we declare it.
+ * @see https://docs.slack.dev/reference/block-kit/blocks/data-visualization-block
+ */
+interface DataVisualizationBlock {
+    type: 'data_visualization';
+    title: string;
+    chart: Chart;
+    block_id?: string;
+}
 /**
  * Header heading level shown in the preview. Slack's API has no
  * `level` field on header blocks, so this is a builder-only extension
@@ -417,7 +491,7 @@ type SupportedHeaderBlock = HeaderBlock & {
  * Subset of {@link AnyMessageBlock} from `slack-web-api-client`,
  * plus a header `level` extension.
  */
-type SupportedBlock = SectionBlock | SupportedHeaderBlock | DividerBlock | ContextBlock | ActionsBlock | ImageBlock | MarkdownBlock | RichTextBlock | TableBlock | AlertBlock | CardBlock | CarouselBlock | ContextActionsBlock | InputBlock | VideoBlock | PlanBlock | TaskCardBlock;
+type SupportedBlock = SectionBlock | SupportedHeaderBlock | DividerBlock | ContextBlock | ActionsBlock | ImageBlock | MarkdownBlock | RichTextBlock | TableBlock | AlertBlock | CardBlock | CarouselBlock | ContextActionsBlock | InputBlock | VideoBlock | PlanBlock | TaskCardBlock | DataVisualizationBlock;
 /**
  * A block as represented inside the builder's working state.
  * `id` is an ephemeral client-side identifier used by DnD and selection.
@@ -650,7 +724,10 @@ interface BlockKitchenProps {
     /**
      * Whether the toolbar exposes the light/dark theme dropdown.
      * Defaults to `true`. When `false`, the theme is locked to
-     * {@link PreviewTheme} `'light'`.
+     * {@link BlockKitchenProps.defaultPreviewTheme} (or `'light'`).
+     *
+     * Ignored when {@link BlockKitchenProps.previewTheme} is provided — a
+     * controlled theme always hides the toggle.
      */
     showThemeControl?: boolean;
     /**
@@ -668,13 +745,40 @@ interface BlockKitchenProps {
         label?: string;
     };
     /**
-     * Initial preview theme. Defaults to `'light'`. Pass the host app's
-     * current theme (e.g. from `next-themes` or your own theme hook) so
-     * the preview opens matched to the consuming app's appearance. The
-     * user can still override via the toolbar dropdown if
+     * Initial preview theme (uncontrolled). Defaults to `'light'`. Pass the
+     * host app's current theme (e.g. from `next-themes` or your own theme
+     * hook) so the preview opens matched to the consuming app's appearance.
+     * The user can still override via the toolbar dropdown if
      * {@link BlockKitchenProps.showThemeControl} is `true`.
+     *
+     * Used only as the initial value when {@link BlockKitchenProps.previewTheme}
+     * is `undefined`. When `previewTheme` is provided, the preview is fully
+     * controlled and this prop is ignored.
      */
     defaultPreviewTheme?: PreviewTheme;
+    /**
+     * Controlled preview theme. When provided, the preview renders in this
+     * theme, updates reactively whenever it changes, and the toolbar's
+     * light/dark toggle is hidden entirely so the host app fully owns the
+     * theme. Leave `undefined` to keep the preview uncontrolled — it seeds
+     * from {@link BlockKitchenProps.defaultPreviewTheme} and the toggle is
+     * shown (subject to {@link BlockKitchenProps.showThemeControl}).
+     */
+    previewTheme?: PreviewTheme;
+    /**
+     * Label for the toolbar's Send button, which opens the send dialog.
+     * Defaults to `'Send'`. Use this to signal that a configuration step
+     * follows (e.g. `'Send to channel…'`) without hardcoding
+     * product-specific copy in the package. Also used as the button's
+     * accessible name.
+     */
+    sendButtonLabel?: string;
+    /**
+     * Label for the send dialog's final confirm button, which dispatches
+     * the message via {@link BlockKitchenProps.onSend}. Defaults to `'Send'`
+     * (and shows `'Sending…'` while in flight regardless of this value).
+     */
+    confirmSendLabel?: string;
     /**
      * Branding tokens applied to the builder chrome (toolbar, palette,
      * popover editors, send dialog, JSON drawer, issues sheet). The
@@ -702,4 +806,4 @@ interface BlockKitchenProps {
     theme?: BrandTheme | BrandPreset;
 }
 
-export { type AlertBlock as A, type BlockKitchenProps as B, type CardBlock as C, type TaskCardStatus as D, type Template as E, type FeedbackButtonSubobject as F, buildVariantById as G, type HeaderLevel as H, type IconButtonElement as I, defaultPalette as J, extraAlertVariant as K, legacyInputVariants as L, type MarkdownBlock as M, type PaletteSection as P, type SendAsUserStatus as S, type TableBlock as T, type UrlSourceElement as U, type VideoBlock as V, type AlertLevel as a, type BrandPreset as b, type BrandTheme as c, type BrandTokens as d, type BuilderBlock as e, type CarouselBlock as f, type ChannelOption as g, type ContextActionsBlock as h, type ContextActionsElement as i, type CustomEmoji as j, type FeedbackButtonsElement as k, type IconButtonIcon as l, type InputBlock as m, type PaletteVariant as n, type PlanBlock as o, type PreviewHooks as p, type PreviewSurface as q, type PreviewTheme as r, type SendPayload as s, type SendResult as t, type SupportedBlock as u, type SupportedBlockType as v, type SupportedHeaderBlock as w, type TableCell as x, type TableColumnSetting as y, type TaskCardBlock as z };
+export { type AlertBlock as A, type BlockKitchenProps as B, type CardBlock as C, type DataVisualizationBlock as D, type SendPayload as E, type FeedbackButtonSubobject as F, type SendResult as G, type HeaderLevel as H, type IconButtonElement as I, type SupportedBlock as J, type SupportedBlockType as K, type SupportedHeaderBlock as L, type MarkdownBlock as M, type TableCell as N, type TableColumnSetting as O, type PaletteSection as P, type TaskCardBlock as Q, type TaskCardStatus as R, type SendAsUserStatus as S, type TableBlock as T, type Template as U, type UrlSourceElement as V, type VideoBlock as W, buildVariantById as X, defaultPalette as Y, extraAlertVariant as Z, legacyInputVariants as _, type AlertLevel as a, type BrandPreset as b, type BrandTheme as c, type BrandTokens as d, type BuilderBlock as e, type CarouselBlock as f, type CartesianChart as g, type ChannelOption as h, type Chart as i, type ChartAxisConfig as j, type ChartDataPoint as k, type ChartSeries as l, type ChartType as m, type ContextActionsBlock as n, type ContextActionsElement as o, type CustomEmoji as p, type FeedbackButtonsElement as q, type IconButtonIcon as r, type InputBlock as s, type PaletteVariant as t, type PieChart as u, type PieChartSegment as v, type PlanBlock as w, type PreviewHooks as x, type PreviewSurface as y, type PreviewTheme as z };

package/dist/{palette-Dco-CVMi.d.ts → palette-WZCUVJTn.d.ts}

@@ -151,7 +151,7 @@ declare function buildVariantById(sections: readonly PaletteSection[]): Readonly
 /**
  * The Slack Block Kit block types supported by the builder in v1.
  */
-type SupportedBlockType = 'section' | 'header' | 'divider' | 'context' | 'actions' | 'image' | 'markdown' | 'rich_text' | 'table' | 'alert' | 'card' | 'carousel' | 'context_actions' | 'input' | 'video' | 'plan' | 'task_card';
+type SupportedBlockType = 'section' | 'header' | 'divider' | 'context' | 'actions' | 'image' | 'markdown' | 'rich_text' | 'table' | 'alert' | 'card' | 'carousel' | 'context_actions' | 'input' | 'video' | 'plan' | 'task_card' | 'data_visualization';
 /**
  * Slack `markdown` block payload. Renders standard markdown (GFM)
  * via `slack-blocks-to-jsx`'s react-markdown integration.
@@ -399,6 +399,80 @@ interface PlanBlock {
     tasks?: TaskCardBlock[];
     block_id?: string;
 }
+/**
+ * One `{ label, value }` data point inside a {@link ChartSeries}. `label`
+ * is the x-axis category the point belongs to; `value` is the numeric
+ * measurement and may be negative.
+ */
+interface ChartDataPoint {
+    label: string;
+    value: number;
+}
+/**
+ * A named series of {@link ChartDataPoint}s. Line / bar / area charts may
+ * carry one or more series; each renders as its own line, set of bars, or
+ * filled region with a matching legend entry.
+ */
+interface ChartSeries {
+    name: string;
+    data: ChartDataPoint[];
+}
+/**
+ * Axis configuration shared by the cartesian chart types (line / bar /
+ * area). `categories` is the ordered set of x-axis tick labels; `x_label`
+ * and `y_label` title the axes.
+ */
+interface ChartAxisConfig {
+    categories: string[];
+    x_label?: string;
+    y_label?: string;
+}
+/**
+ * One `{ label, value }` slice of a {@link PieChart}.
+ */
+interface PieChartSegment {
+    label: string;
+    value: number;
+}
+/**
+ * Cartesian chart spec (line / bar / area) used by a
+ * {@link DataVisualizationBlock}: one or more named series plotted against
+ * a shared category axis.
+ */
+interface CartesianChart {
+    type: 'line' | 'bar' | 'area';
+    series: ChartSeries[];
+    axis_config?: ChartAxisConfig;
+}
+/**
+ * Pie chart spec used by a {@link DataVisualizationBlock}. Unlike the
+ * cartesian charts it has no axes — just a flat list of labeled segments.
+ */
+interface PieChart {
+    type: 'pie';
+    segments: PieChartSegment[];
+}
+/**
+ * The `chart` payload of a {@link DataVisualizationBlock}: either a
+ * cartesian chart (line / bar / area) or a pie chart.
+ */
+type Chart = CartesianChart | PieChart;
+/**
+ * The chart shape rendered by a {@link DataVisualizationBlock}.
+ */
+type ChartType = Chart['type'];
+/**
+ * Slack `data_visualization` block payload. Renders a line, bar, area, or
+ * pie chart from inline data. Valid on the message surface only.
+ * `slack-web-api-client` doesn't ship this type yet, so we declare it.
+ * @see https://docs.slack.dev/reference/block-kit/blocks/data-visualization-block
+ */
+interface DataVisualizationBlock {
+    type: 'data_visualization';
+    title: string;
+    chart: Chart;
+    block_id?: string;
+}
 /**
  * Header heading level shown in the preview. Slack's API has no
  * `level` field on header blocks, so this is a builder-only extension
@@ -417,7 +491,7 @@ type SupportedHeaderBlock = HeaderBlock & {
  * Subset of {@link AnyMessageBlock} from `slack-web-api-client`,
  * plus a header `level` extension.
  */
-type SupportedBlock = SectionBlock | SupportedHeaderBlock | DividerBlock | ContextBlock | ActionsBlock | ImageBlock | MarkdownBlock | RichTextBlock | TableBlock | AlertBlock | CardBlock | CarouselBlock | ContextActionsBlock | InputBlock | VideoBlock | PlanBlock | TaskCardBlock;
+type SupportedBlock = SectionBlock | SupportedHeaderBlock | DividerBlock | ContextBlock | ActionsBlock | ImageBlock | MarkdownBlock | RichTextBlock | TableBlock | AlertBlock | CardBlock | CarouselBlock | ContextActionsBlock | InputBlock | VideoBlock | PlanBlock | TaskCardBlock | DataVisualizationBlock;
 /**
  * A block as represented inside the builder's working state.
  * `id` is an ephemeral client-side identifier used by DnD and selection.
@@ -650,7 +724,10 @@ interface BlockKitchenProps {
     /**
      * Whether the toolbar exposes the light/dark theme dropdown.
      * Defaults to `true`. When `false`, the theme is locked to
-     * {@link PreviewTheme} `'light'`.
+     * {@link BlockKitchenProps.defaultPreviewTheme} (or `'light'`).
+     *
+     * Ignored when {@link BlockKitchenProps.previewTheme} is provided — a
+     * controlled theme always hides the toggle.
      */
     showThemeControl?: boolean;
     /**
@@ -668,13 +745,40 @@ interface BlockKitchenProps {
         label?: string;
     };
     /**
-     * Initial preview theme. Defaults to `'light'`. Pass the host app's
-     * current theme (e.g. from `next-themes` or your own theme hook) so
-     * the preview opens matched to the consuming app's appearance. The
-     * user can still override via the toolbar dropdown if
+     * Initial preview theme (uncontrolled). Defaults to `'light'`. Pass the
+     * host app's current theme (e.g. from `next-themes` or your own theme
+     * hook) so the preview opens matched to the consuming app's appearance.
+     * The user can still override via the toolbar dropdown if
      * {@link BlockKitchenProps.showThemeControl} is `true`.
+     *
+     * Used only as the initial value when {@link BlockKitchenProps.previewTheme}
+     * is `undefined`. When `previewTheme` is provided, the preview is fully
+     * controlled and this prop is ignored.
      */
     defaultPreviewTheme?: PreviewTheme;
+    /**
+     * Controlled preview theme. When provided, the preview renders in this
+     * theme, updates reactively whenever it changes, and the toolbar's
+     * light/dark toggle is hidden entirely so the host app fully owns the
+     * theme. Leave `undefined` to keep the preview uncontrolled — it seeds
+     * from {@link BlockKitchenProps.defaultPreviewTheme} and the toggle is
+     * shown (subject to {@link BlockKitchenProps.showThemeControl}).
+     */
+    previewTheme?: PreviewTheme;
+    /**
+     * Label for the toolbar's Send button, which opens the send dialog.
+     * Defaults to `'Send'`. Use this to signal that a configuration step
+     * follows (e.g. `'Send to channel…'`) without hardcoding
+     * product-specific copy in the package. Also used as the button's
+     * accessible name.
+     */
+    sendButtonLabel?: string;
+    /**
+     * Label for the send dialog's final confirm button, which dispatches
+     * the message via {@link BlockKitchenProps.onSend}. Defaults to `'Send'`
+     * (and shows `'Sending…'` while in flight regardless of this value).
+     */
+    confirmSendLabel?: string;
     /**
      * Branding tokens applied to the builder chrome (toolbar, palette,
      * popover editors, send dialog, JSON drawer, issues sheet). The
@@ -702,4 +806,4 @@ interface BlockKitchenProps {
     theme?: BrandTheme | BrandPreset;
 }
 
-export { type AlertBlock as A, type BlockKitchenProps as B, type CardBlock as C, type TaskCardStatus as D, type Template as E, type FeedbackButtonSubobject as F, buildVariantById as G, type HeaderLevel as H, type IconButtonElement as I, defaultPalette as J, extraAlertVariant as K, legacyInputVariants as L, type MarkdownBlock as M, type PaletteSection as P, type SendAsUserStatus as S, type TableBlock as T, type UrlSourceElement as U, type VideoBlock as V, type AlertLevel as a, type BrandPreset as b, type BrandTheme as c, type BrandTokens as d, type BuilderBlock as e, type CarouselBlock as f, type ChannelOption as g, type ContextActionsBlock as h, type ContextActionsElement as i, type CustomEmoji as j, type FeedbackButtonsElement as k, type IconButtonIcon as l, type InputBlock as m, type PaletteVariant as n, type PlanBlock as o, type PreviewHooks as p, type PreviewSurface as q, type PreviewTheme as r, type SendPayload as s, type SendResult as t, type SupportedBlock as u, type SupportedBlockType as v, type SupportedHeaderBlock as w, type TableCell as x, type TableColumnSetting as y, type TaskCardBlock as z };
+export { type AlertBlock as A, type BlockKitchenProps as B, type CardBlock as C, type DataVisualizationBlock as D, type SendPayload as E, type FeedbackButtonSubobject as F, type SendResult as G, type HeaderLevel as H, type IconButtonElement as I, type SupportedBlock as J, type SupportedBlockType as K, type SupportedHeaderBlock as L, type MarkdownBlock as M, type TableCell as N, type TableColumnSetting as O, type PaletteSection as P, type TaskCardBlock as Q, type TaskCardStatus as R, type SendAsUserStatus as S, type TableBlock as T, type Template as U, type UrlSourceElement as V, type VideoBlock as W, buildVariantById as X, defaultPalette as Y, extraAlertVariant as Z, legacyInputVariants as _, type AlertLevel as a, type BrandPreset as b, type BrandTheme as c, type BrandTokens as d, type BuilderBlock as e, type CarouselBlock as f, type CartesianChart as g, type ChannelOption as h, type Chart as i, type ChartAxisConfig as j, type ChartDataPoint as k, type ChartSeries as l, type ChartType as m, type ContextActionsBlock as n, type ContextActionsElement as o, type CustomEmoji as p, type FeedbackButtonsElement as q, type IconButtonIcon as r, type InputBlock as s, type PaletteVariant as t, type PieChart as u, type PieChartSegment as v, type PlanBlock as w, type PreviewHooks as x, type PreviewSurface as y, type PreviewTheme as z };

package/dist/palette.cjs

@@ -935,6 +935,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 = [