hazo_ui 6.5.0 → 6.8.0

package/dist/index.d.cts

@@ -565,6 +565,11 @@ interface CommandItem$1 {
     icon?: React$1.ReactNode;
     /** Optional group name for categorizing commands in the dropdown */
     group?: string;
+    /**
+     * Text inserted instead of a pill, for prefixes configured with
+     * `insert_as_text`. Defaults to `action`. Ignored by pill prefixes.
+     */
+    insert_text?: string;
 }
 /**
  * Configuration for a prefix trigger character
@@ -578,6 +583,14 @@ interface PrefixConfig {
     allow_free_text?: boolean;
     /** Custom color styling for this prefix's pills */
     color?: PrefixColor;
+    /**
+     * Insert the picked command as plain, editable text instead of a pill, and
+     * drop the trigger character with it. For `/`-style snippet menus, where the
+     * menu is a way to discover and type something rather than a reference to an
+     * entity — the inserted characters must survive as text (e.g. a formula's
+     * `SUM(`), and no `InsertedCommand` is reported for them.
+     */
+    insert_as_text?: boolean;
 }
 /**
  * Represents a command that has been inserted into the text
@@ -867,6 +880,8 @@ type PrefixConfigForParsing = {
         action_label: string;
     }[];
     color?: PrefixColor;
+    /** Text prefixes never produce pills, so they are skipped when parsing. */
+    insert_as_text?: boolean;
 };
 /**
  * Utility to parse plain text with commands into structured format
@@ -875,7 +890,7 @@ type PrefixConfigForParsing = {
  * @param prefixes - Prefix configurations to detect
  * @returns Parsed commands with positions
  */
-declare const parse_commands_from_text: (text: string, prefixes: PrefixConfigForParsing[]) => {
+declare const parse_commands_from_text: (text: string, all_prefixes: PrefixConfigForParsing[]) => {
     action: string;
     action_label: string;
     prefix: string;
@@ -1902,6 +1917,17 @@ interface KanbanLane {
     title: string;
     /** Optional gate: returning false rejects a drop into this lane. */
     accepts?: (item: KanbanItem) => boolean;
+    /**
+     * Per-lane controls rendered in the lane heading, between the rule and the
+     * count — an "add to this lane" button, an overflow menu, a lane filter.
+     * Also rendered (right-aligned) on a `collapseWhenEmpty` lane's drop strip,
+     * so a lane's actions do not disappear the moment it empties.
+     *
+     * The heading is a drop target but not a drag handle, so interactive nodes
+     * here work without any `stopPropagation` dance — unlike controls rendered
+     * inside a card by `renderCard`.
+     */
+    actions?: React$1.ReactNode;
     /**
      * When true and the lane currently holds no cards, it renders as a thin
      * full-width drop strip instead of a heading plus an empty column grid.
@@ -2031,6 +2057,22 @@ interface HazoUiKanbanProps<T extends KanbanItem = KanbanItem> {
     announcements?: Partial<KanbanAnnouncements>;
     /** Rendered when a column has zero items. Default: muted "—" placeholder. */
     emptyColumn?: React$1.ReactNode;
+    /**
+     * Rendered at the foot of every column body, below the cards (or below the
+     * `emptyColumn` placeholder). Called once per rendered copy of a column, so
+     * on a laned board it fires once per (lane, column) pair and `laneKey` says
+     * which — that is what makes a per-lane "＋ Add item" affordance possible
+     * without the consumer having to reach into the board's internals.
+     *
+     * Return `null` for the columns that should not have one. The footer sits
+     * inside the column's droppable but outside its `SortableContext`, so it
+     * never participates in ordering and never becomes a drop target itself.
+     */
+    renderColumnFooter?: (ctx: {
+        columnKey: string;
+        /** `undefined` on a board without lanes. */
+        laneKey?: string;
+    }) => React$1.ReactNode;
     /** Class on the board root. */
     className?: string;
     /** Class on each card shell (the wrapper around renderCard output). */
@@ -2214,7 +2256,7 @@ declare function applyKanbanFilter<T extends KanbanItem>(items: T[], filter: Kan
  * event.revert() and the overlay entry is dropped.
  */
 
-declare function HazoUiKanban<T extends KanbanItem = KanbanItem>({ columns, lanes, items, renderCard, onMove, onReorder, mobileBreakpoint, announcements, emptyColumn, className, cardClassName, itemLabel, editorFields, editorPriorities, editorTitle, renderCardEditor, hideEditorFooter, onCardSave, disableEdit, }: HazoUiKanbanProps<T>): React$1.JSX.Element;
+declare function HazoUiKanban<T extends KanbanItem = KanbanItem>({ columns, lanes, items, renderCard, onMove, onReorder, mobileBreakpoint, announcements, emptyColumn, renderColumnFooter, className, cardClassName, itemLabel, editorFields, editorPriorities, editorTitle, renderCardEditor, hideEditorFooter, onCardSave, disableEdit, }: HazoUiKanbanProps<T>): React$1.JSX.Element;
 
 declare const Table: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableElement> & React$1.RefAttributes<HTMLTableElement>>;
 declare const TableHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableSectionElement> & React$1.RefAttributes<HTMLTableSectionElement>>;

package/dist/index.d.ts

@@ -565,6 +565,11 @@ interface CommandItem$1 {
     icon?: React$1.ReactNode;
     /** Optional group name for categorizing commands in the dropdown */
     group?: string;
+    /**
+     * Text inserted instead of a pill, for prefixes configured with
+     * `insert_as_text`. Defaults to `action`. Ignored by pill prefixes.
+     */
+    insert_text?: string;
 }
 /**
  * Configuration for a prefix trigger character
@@ -578,6 +583,14 @@ interface PrefixConfig {
     allow_free_text?: boolean;
     /** Custom color styling for this prefix's pills */
     color?: PrefixColor;
+    /**
+     * Insert the picked command as plain, editable text instead of a pill, and
+     * drop the trigger character with it. For `/`-style snippet menus, where the
+     * menu is a way to discover and type something rather than a reference to an
+     * entity — the inserted characters must survive as text (e.g. a formula's
+     * `SUM(`), and no `InsertedCommand` is reported for them.
+     */
+    insert_as_text?: boolean;
 }
 /**
  * Represents a command that has been inserted into the text
@@ -867,6 +880,8 @@ type PrefixConfigForParsing = {
         action_label: string;
     }[];
     color?: PrefixColor;
+    /** Text prefixes never produce pills, so they are skipped when parsing. */
+    insert_as_text?: boolean;
 };
 /**
  * Utility to parse plain text with commands into structured format
@@ -875,7 +890,7 @@ type PrefixConfigForParsing = {
  * @param prefixes - Prefix configurations to detect
  * @returns Parsed commands with positions
  */
-declare const parse_commands_from_text: (text: string, prefixes: PrefixConfigForParsing[]) => {
+declare const parse_commands_from_text: (text: string, all_prefixes: PrefixConfigForParsing[]) => {
     action: string;
     action_label: string;
     prefix: string;
@@ -1902,6 +1917,17 @@ interface KanbanLane {
     title: string;
     /** Optional gate: returning false rejects a drop into this lane. */
     accepts?: (item: KanbanItem) => boolean;
+    /**
+     * Per-lane controls rendered in the lane heading, between the rule and the
+     * count — an "add to this lane" button, an overflow menu, a lane filter.
+     * Also rendered (right-aligned) on a `collapseWhenEmpty` lane's drop strip,
+     * so a lane's actions do not disappear the moment it empties.
+     *
+     * The heading is a drop target but not a drag handle, so interactive nodes
+     * here work without any `stopPropagation` dance — unlike controls rendered
+     * inside a card by `renderCard`.
+     */
+    actions?: React$1.ReactNode;
     /**
      * When true and the lane currently holds no cards, it renders as a thin
      * full-width drop strip instead of a heading plus an empty column grid.
@@ -2031,6 +2057,22 @@ interface HazoUiKanbanProps<T extends KanbanItem = KanbanItem> {
     announcements?: Partial<KanbanAnnouncements>;
     /** Rendered when a column has zero items. Default: muted "—" placeholder. */
     emptyColumn?: React$1.ReactNode;
+    /**
+     * Rendered at the foot of every column body, below the cards (or below the
+     * `emptyColumn` placeholder). Called once per rendered copy of a column, so
+     * on a laned board it fires once per (lane, column) pair and `laneKey` says
+     * which — that is what makes a per-lane "＋ Add item" affordance possible
+     * without the consumer having to reach into the board's internals.
+     *
+     * Return `null` for the columns that should not have one. The footer sits
+     * inside the column's droppable but outside its `SortableContext`, so it
+     * never participates in ordering and never becomes a drop target itself.
+     */
+    renderColumnFooter?: (ctx: {
+        columnKey: string;
+        /** `undefined` on a board without lanes. */
+        laneKey?: string;
+    }) => React$1.ReactNode;
     /** Class on the board root. */
     className?: string;
     /** Class on each card shell (the wrapper around renderCard output). */
@@ -2214,7 +2256,7 @@ declare function applyKanbanFilter<T extends KanbanItem>(items: T[], filter: Kan
  * event.revert() and the overlay entry is dropped.
  */
 
-declare function HazoUiKanban<T extends KanbanItem = KanbanItem>({ columns, lanes, items, renderCard, onMove, onReorder, mobileBreakpoint, announcements, emptyColumn, className, cardClassName, itemLabel, editorFields, editorPriorities, editorTitle, renderCardEditor, hideEditorFooter, onCardSave, disableEdit, }: HazoUiKanbanProps<T>): React$1.JSX.Element;
+declare function HazoUiKanban<T extends KanbanItem = KanbanItem>({ columns, lanes, items, renderCard, onMove, onReorder, mobileBreakpoint, announcements, emptyColumn, renderColumnFooter, className, cardClassName, itemLabel, editorFields, editorPriorities, editorTitle, renderCardEditor, hideEditorFooter, onCardSave, disableEdit, }: HazoUiKanbanProps<T>): React$1.JSX.Element;
 
 declare const Table: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableElement> & React$1.RefAttributes<HTMLTableElement>>;
 declare const TableHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableSectionElement> & React$1.RefAttributes<HTMLTableSectionElement>>;

package/dist/index.js

@@ -5585,6 +5585,9 @@ var insert_command_at_position = (editor, command, prefix, range, variant = "def
     color: color2
   }).run();
 };
+var insert_text_at_position = (editor, command, range) => {
+  editor.chain().focus().deleteRange(range).insertContent(command.insert_text ?? command.action).run();
+};
 var get_variant_classes2 = (variant = "default") => {
   switch (variant) {
     case "outline":
@@ -5787,7 +5790,9 @@ var CommandPopover = ({
 CommandPopover.displayName = "CommandPopover";
 
 // src/components/hazo_ui_command/index.tsx
-var parse_commands_from_text = (text, prefixes) => {
+var parse_commands_from_text = (text, all_prefixes) => {
+  const prefixes = all_prefixes.filter((p) => !p.insert_as_text);
+  if (prefixes.length === 0) return [];
   const result = [];
   const action_to_label = /* @__PURE__ */ new Map();
   for (const prefix_config of prefixes) {
@@ -6097,13 +6102,18 @@ var HazoUiTextbox = ({
     }
   }, [suggestion_state, editor]);
   React27.useEffect(() => {
-    if (is_controlled && editor && !editor.isFocused) {
-      const current_text = editor.getText();
-      if (value !== current_text) {
-        const content = text_to_tiptap_content(value || "", prefixes, pill_variant);
-        editor.commands.setContent(content, { emitUpdate: false });
-      }
-    }
+    if (!is_controlled || !editor || editor.isFocused) return;
+    if (value === editor.getText()) return;
+    let cancelled = false;
+    queueMicrotask(() => {
+      if (cancelled || editor.isDestroyed || editor.isFocused) return;
+      if (value === editor.getText()) return;
+      const content = text_to_tiptap_content(value || "", prefixes, pill_variant);
+      editor.commands.setContent(content, { emitUpdate: false });
+    });
+    return () => {
+      cancelled = true;
+    };
   }, [value, editor, is_controlled, prefixes, pill_variant]);
   React27.useEffect(() => {
     if (editor) {
@@ -6115,6 +6125,11 @@ var HazoUiTextbox = ({
       if (!editor || !suggestion_state) return;
       const prefix_config = prefixes.find((p) => p.char === suggestion_state.prefix);
       const prefix_color = prefix_config?.color;
+      if (prefix_config?.insert_as_text) {
+        insert_text_at_position(editor, command, suggestion_state.range);
+        set_suggestion_state(null);
+        return;
+      }
       insert_command_at_position(
         editor,
         command,
@@ -6665,6 +6680,11 @@ var HazoUiTextarea = ({
       if (!editor || !suggestion_state) return;
       const prefix_config = prefixes.find((p) => p.char === suggestion_state.prefix);
       const prefix_color = prefix_config?.color;
+      if (prefix_config?.insert_as_text) {
+        insert_text_at_position(editor, command, suggestion_state.range);
+        set_suggestion_state(null);
+        return;
+      }
       insert_command_at_position(
         editor,
         command,
@@ -9038,6 +9058,12 @@ function KanbanCard({
     backgroundColor: "hsl(var(--hazo-kanban-card-bg))",
     border: `1px solid hsl(var(--hazo-kanban-card-border))`,
     borderLeft: priority_var ? `4px solid hsl(var(${priority_var}))` : `1px solid hsl(var(--hazo-kanban-card-border))`,
+    // Opt-in lift. A card whose background equals the column's (the case for
+    // every palette where --card and --background resolve to the same value)
+    // is separated by nothing but a 1px border, which reads as flat at a
+    // glance. The fallback is `none`, so a consumer that never sets the token
+    // renders exactly as before.
+    boxShadow: "var(--hazo-kanban-card-shadow, none)",
     opacity: isDragging && !dragging ? 0.4 : 1,
     cursor: "grab"
   };
@@ -9046,6 +9072,9 @@ function KanbanCard({
     {
       ref: setNodeRef,
       style,
+      "data-column-key": item.columnKey,
+      "data-lane-key": item.laneKey,
+      "data-section-key": item.sectionKey,
       className: cn(
         "cls_hazo_kanban_card group relative rounded-md p-3 mb-2 select-none",
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
@@ -9117,6 +9146,7 @@ function KanbanColumn({
   items,
   renderCard,
   emptyColumn,
+  footer,
   cardClassName,
   showEdit,
   onEditRequest,
@@ -9162,6 +9192,8 @@ function KanbanColumn({
     "div",
     {
       ref: setNodeRef,
+      "data-column-key": column.key,
+      "data-lane-key": laneKey,
       className: cn(
         "cls_hazo_kanban_column flex flex-col rounded-md p-2",
         isOver && "cls_hazo_kanban_column_over bg-accent/30 ring-2 ring-ring/40"
@@ -9183,34 +9215,43 @@ function KanbanColumn({
           {
             items: ordered.map((i) => i.id),
             strategy: verticalListSortingStrategy,
-            children: /* @__PURE__ */ jsx("div", { className: "cls_hazo_kanban_column_body flex-1 min-h-[40px]", children: !sections ? items.length === 0 ? /* @__PURE__ */ jsx("div", { className: "cls_hazo_kanban_column_empty text-xs text-muted-foreground py-2 px-1", children: emptyColumn }) : render_cards(items) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
-              expanded_sections.map((section) => /* @__PURE__ */ jsx(
-                KanbanSectionBand,
-                {
-                  columnKey: column.key,
-                  laneKey,
-                  treeKey,
-                  section,
-                  items: bySection.get(section.key) ?? [],
-                  emptyColumn,
-                  renderCards: render_cards
-                },
-                section.key
-              )),
-              unmatched.length > 0 && /* @__PURE__ */ jsx("div", { className: "cls_hazo_kanban_section cls_hazo_kanban_section_unmatched", children: render_cards(unmatched) }),
-              collapsed_sections.length > 0 && /* @__PURE__ */ jsx("div", { className: "cls_hazo_kanban_section_strips mt-2 flex flex-wrap gap-1 border-t border-dashed border-border pt-2", children: collapsed_sections.map((section) => /* @__PURE__ */ jsx(
-                KanbanSectionStrip,
-                {
-                  columnKey: column.key,
-                  laneKey,
-                  treeKey,
-                  section
-                },
-                section.key
-              )) })
-            ] }) })
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                "data-column-key": column.key,
+                "data-lane-key": laneKey,
+                className: "cls_hazo_kanban_column_body flex-1 min-h-[40px]",
+                children: !sections ? items.length === 0 ? /* @__PURE__ */ jsx("div", { className: "cls_hazo_kanban_column_empty text-xs text-muted-foreground py-2 px-1", children: emptyColumn }) : render_cards(items) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+                  expanded_sections.map((section) => /* @__PURE__ */ jsx(
+                    KanbanSectionBand,
+                    {
+                      columnKey: column.key,
+                      laneKey,
+                      treeKey,
+                      section,
+                      items: bySection.get(section.key) ?? [],
+                      emptyColumn,
+                      renderCards: render_cards
+                    },
+                    section.key
+                  )),
+                  unmatched.length > 0 && /* @__PURE__ */ jsx("div", { className: "cls_hazo_kanban_section cls_hazo_kanban_section_unmatched", children: render_cards(unmatched) }),
+                  collapsed_sections.length > 0 && /* @__PURE__ */ jsx("div", { className: "cls_hazo_kanban_section_strips mt-2 flex flex-wrap gap-1 border-t border-dashed border-border pt-2", children: collapsed_sections.map((section) => /* @__PURE__ */ jsx(
+                    KanbanSectionStrip,
+                    {
+                      columnKey: column.key,
+                      laneKey,
+                      treeKey,
+                      section
+                    },
+                    section.key
+                  )) })
+                ] })
+              }
+            )
           }
-        )
+        ),
+        footer ? /* @__PURE__ */ jsx("div", { className: "cls_hazo_kanban_column_footer mt-1", children: footer }) : null
       ]
     }
   );
@@ -9232,6 +9273,8 @@ function KanbanColumnHead({
     "div",
     {
       ref: droppable ? setNodeRef : void 0,
+      "data-column-key": columnKey,
+      "data-lane-key": laneKey,
       className: cn(
         "cls_hazo_kanban_column_head mb-2 flex items-center justify-between rounded-sm px-1 text-xs uppercase tracking-wider text-muted-foreground",
         droppable && "py-1",
@@ -9321,6 +9364,7 @@ function KanbanLaneHead({
       children: [
         /* @__PURE__ */ jsx("span", { className: "cls_hazo_kanban_lane_title text-xs font-semibold uppercase tracking-wider text-foreground", children: lane.title }),
         /* @__PURE__ */ jsx("span", { className: "cls_hazo_kanban_lane_rule h-px flex-1 bg-border" }),
+        lane.actions ? /* @__PURE__ */ jsx("span", { className: "cls_hazo_kanban_lane_actions flex items-center gap-1", children: lane.actions }) : null,
         /* @__PURE__ */ jsx("span", { className: "cls_hazo_kanban_lane_count rounded-full bg-muted px-2 py-0.5 text-[11px] tabular-nums text-foreground", children: count })
       ]
     }
@@ -9334,15 +9378,18 @@ function KanbanLaneStrip({
     id: lane_droppable_id(lane.key, treeKey),
     data: { laneKey: lane.key, isLane: true }
   });
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       ref: setNodeRef,
       className: cn(
-        "cls_hazo_kanban_lane_strip mb-2 rounded-md border border-dashed border-border px-2 py-1 text-[11px] uppercase tracking-wider text-muted-foreground",
+        "cls_hazo_kanban_lane_strip mb-2 flex items-center gap-3 rounded-md border border-dashed border-border px-2 py-1 text-[11px] uppercase tracking-wider text-muted-foreground",
         isOver && "cls_hazo_kanban_lane_strip_over border-solid bg-accent/30 text-foreground ring-1 ring-ring/30"
       ),
-      children: lane.title
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "cls_hazo_kanban_lane_title", children: lane.title }),
+        lane.actions ? /* @__PURE__ */ jsx("span", { className: "cls_hazo_kanban_lane_actions ml-auto flex items-center gap-1", children: lane.actions }) : null
+      ]
     }
   );
 }
@@ -9815,6 +9862,7 @@ function HazoUiKanban({
   mobileBreakpoint = 640,
   announcements,
   emptyColumn = "\u2014",
+  renderColumnFooter,
   className,
   cardClassName,
   itemLabel,
@@ -10068,7 +10116,7 @@ function HazoUiKanban({
       total += (grouped.get(bucket_key(lane_key, col.key)) ?? []).length;
     return total;
   }
-  function render_column(col, tree_key, lane_key) {
+  function render_column(col, tree_key, lane_key, with_footer = true) {
     return /* @__PURE__ */ jsx(
       KanbanColumn,
       {
@@ -10078,6 +10126,7 @@ function HazoUiKanban({
         items: grouped.get(bucket_key(lane_key, col.key)) ?? [],
         renderCard,
         emptyColumn,
+        footer: with_footer ? renderColumnFooter?.({ columnKey: col.key, laneKey: lane_key }) ?? null : null,
         cardClassName,
         showEdit: show_edit,
         onEditRequest: handle_edit_request
@@ -10098,8 +10147,8 @@ function HazoUiKanban({
   function render_unmatched_lane(tree_key, only_column) {
     const count = only_column ? (grouped.get(bucket_key(UNMATCHED_LANE_KEY, only_column.key)) ?? []).length : lane_total(UNMATCHED_LANE_KEY);
     if (count === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: "cls_hazo_kanban_lane cls_hazo_kanban_lane_unmatched", children: only_column ? render_column(only_column, tree_key, UNMATCHED_LANE_KEY) : /* @__PURE__ */ jsx("div", { className: "cls_hazo_kanban_lane_grid grid gap-3", style: grid_style, children: columns.map(
-      (col) => render_column(col, tree_key, UNMATCHED_LANE_KEY)
+    return /* @__PURE__ */ jsx("div", { className: "cls_hazo_kanban_lane cls_hazo_kanban_lane_unmatched", children: only_column ? render_column(only_column, tree_key, UNMATCHED_LANE_KEY, false) : /* @__PURE__ */ jsx("div", { className: "cls_hazo_kanban_lane_grid grid gap-3", style: grid_style, children: columns.map(
+      (col) => render_column(col, tree_key, UNMATCHED_LANE_KEY, false)
     ) }) });
   }
   return /* @__PURE__ */ jsxs(