@expcat/tigercat-react 1.0.4 → 1.1.0

package/dist/chunk-5OMSQ5PV.mjs

@@ -0,0 +1,401 @@
+import { useTigerConfig } from './chunk-VBZE77VM.mjs';
+import React, { useMemo, useState, useEffect, useRef, useCallback } from 'react';
+import { classNames, taskBoardCardClasses, taskBoardCardDraggingClasses, isWipExceeded, getColumnCardCount, taskBoardColumnClasses, taskBoardColumnDropTargetClasses, taskBoardColumnDraggingClasses, taskBoardDropIndicatorClasses, resolveLocaleText, taskBoardEmptyClasses, taskBoardColumnHeaderClasses, taskBoardWipExceededClasses, kanbanCardCountClasses, taskBoardColumnBodyClasses, taskBoardAddCardClasses, mergeTigerLocale, getTaskBoardLabels, filterColumns, createDefaultDragSnapshot, moveCard, reorderColumns, createTaskBoardDragController, taskBoardBaseClasses, kanbanAddColumnClasses } from '@expcat/tigercat-core';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var CardItem = React.memo(
+  ({
+    card,
+    column,
+    isDragging,
+    isKbGrabbed,
+    draggable,
+    dragHintText,
+    renderCard,
+    dragCtrl
+  }) => {
+    const cardClasses = classNames(
+      taskBoardCardClasses,
+      isDragging && taskBoardCardDraggingClasses,
+      isKbGrabbed && "ring-2 ring-[var(--tiger-primary,#2563eb)]"
+    );
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cardClasses,
+        draggable,
+        tabIndex: 0,
+        role: "listitem",
+        "aria-roledescription": dragHintText,
+        "aria-grabbed": isKbGrabbed ? "true" : void 0,
+        "data-tiger-taskboard-card": "",
+        "data-tiger-taskboard-card-id": String(card.id),
+        onDragStart: (e) => {
+          if (e.dataTransfer) dragCtrl.cardDragStart(e.dataTransfer, card, column);
+        },
+        onDragEnd: () => dragCtrl.dragEnd(),
+        onTouchStart: (e) => dragCtrl.cardTouchStart(e.nativeEvent, e.currentTarget, card, column),
+        onTouchMove: (e) => dragCtrl.cardTouchMove(e.nativeEvent),
+        onTouchEnd: () => dragCtrl.cardTouchEnd(),
+        onKeyDown: (e) => {
+          if (dragCtrl.cardKeyDown(e.key, card, column)) e.preventDefault();
+        },
+        children: renderCard ? renderCard(card, column.id) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "font-medium text-sm text-[var(--tiger-text,#1f2937)]", children: card.title }),
+          card.description && /* @__PURE__ */ jsx("div", { className: "mt-1 text-xs text-[var(--tiger-text-muted,#6b7280)] line-clamp-2", children: card.description })
+        ] })
+      }
+    );
+  },
+  (prev, next) => prev.card.id === next.card.id && prev.isDragging === next.isDragging && prev.isKbGrabbed === next.isKbGrabbed && prev.draggable === next.draggable && prev.card === next.card
+);
+CardItem.displayName = "TaskBoardCardItem";
+var ColumnItem = React.memo(
+  ({
+    column,
+    colIndex,
+    isDropTarget,
+    isColDragging,
+    dropIdx,
+    draggable,
+    columnDraggable,
+    labels,
+    renderCardProp,
+    renderColumnHeader,
+    renderColumnFooter,
+    renderEmptyColumn,
+    onCardAdd,
+    dragType,
+    dragCtrl,
+    dragStateId,
+    kbDragStateId,
+    showCardCount,
+    allowAddCard
+  }) => {
+    const wipOver = isWipExceeded(column);
+    const cardCount = showCardCount ? getColumnCardCount(column) : null;
+    const colClasses = classNames(
+      taskBoardColumnClasses,
+      isDropTarget && taskBoardColumnDropTargetClasses,
+      isColDragging && taskBoardColumnDraggingClasses
+    );
+    let cardsContent;
+    if (column.cards.length > 0) {
+      const nodes = [];
+      column.cards.forEach((card, i) => {
+        if (isDropTarget && dropIdx === i) {
+          nodes.push(/* @__PURE__ */ jsx("div", { className: taskBoardDropIndicatorClasses }, `drop-${i}`));
+        }
+        const isDragging = dragStateId === card.id;
+        const isKbGrabbed = kbDragStateId === card.id;
+        nodes.push(
+          /* @__PURE__ */ jsx(
+            CardItem,
+            {
+              card,
+              column,
+              isDragging,
+              isKbGrabbed,
+              draggable,
+              dragHintText: labels.dragHintText,
+              renderCard: renderCardProp,
+              dragCtrl
+            },
+            String(card.id)
+          )
+        );
+      });
+      if (isDropTarget && dropIdx >= column.cards.length) {
+        nodes.push(/* @__PURE__ */ jsx("div", { className: taskBoardDropIndicatorClasses }, "drop-end"));
+      }
+      cardsContent = nodes;
+    } else {
+      cardsContent = isDropTarget ? /* @__PURE__ */ jsx("div", { className: taskBoardDropIndicatorClasses }, "drop-empty") : renderEmptyColumn ? renderEmptyColumn(column) : /* @__PURE__ */ jsx("div", { className: taskBoardEmptyClasses, children: resolveLocaleText(labels.emptyColumnText) });
+    }
+    const wipTitle = column.wipLimit != null ? resolveLocaleText(labels.wipLimitText.replace("{limit}", String(column.wipLimit))) : void 0;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: colClasses,
+        "data-tiger-taskboard-column": "",
+        "data-tiger-taskboard-column-id": String(column.id),
+        onDragOver: dragType === "column" ? (e) => {
+          e.preventDefault();
+          dragCtrl.columnDragOver();
+        } : void 0,
+        onDrop: dragType === "column" ? (e) => {
+          e.preventDefault();
+          if (e.dataTransfer) dragCtrl.columnDrop(e.dataTransfer, e.clientX);
+        } : void 0,
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: taskBoardColumnHeaderClasses,
+              draggable: columnDraggable,
+              onDragStart: (e) => {
+                if (e.dataTransfer) dragCtrl.columnDragStart(e.dataTransfer, column, colIndex);
+              },
+              onDragEnd: () => dragCtrl.dragEnd(),
+              onTouchStart: (e) => dragCtrl.columnTouchStart(e.nativeEvent, e.currentTarget, column, colIndex),
+              onTouchMove: (e) => dragCtrl.columnTouchMove(e.nativeEvent),
+              onTouchEnd: () => dragCtrl.columnTouchEnd(),
+              style: columnDraggable ? { cursor: "grab" } : void 0,
+              children: renderColumnHeader ? renderColumnHeader(column) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs("span", { className: wipOver ? taskBoardWipExceededClasses : void 0, children: [
+                  column.title,
+                  showCardCount && cardCount ? null : column.wipLimit != null ? /* @__PURE__ */ jsxs("span", { className: "ml-2 text-xs font-normal opacity-70", title: wipTitle, children: [
+                    "(",
+                    column.cards.length,
+                    "/",
+                    column.wipLimit,
+                    ")"
+                  ] }) : /* @__PURE__ */ jsx("span", { className: "ml-2 text-xs font-normal opacity-50", children: column.cards.length })
+                ] }),
+                showCardCount && cardCount && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: classNames(
+                      kanbanCardCountClasses,
+                      wipOver && taskBoardWipExceededClasses
+                    ),
+                    children: cardCount.limit ? `${cardCount.count}/${cardCount.limit}` : `${cardCount.count}`
+                  }
+                ),
+                column.description && /* @__PURE__ */ jsx("span", { className: "text-xs font-normal text-[var(--tiger-text-muted,#6b7280)] truncate max-w-[120px]", children: column.description })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: taskBoardColumnBodyClasses,
+              role: "list",
+              "aria-label": column.title,
+              onDragOver: (e) => {
+                e.preventDefault();
+                dragCtrl.cardDragOver(e.clientY, e.currentTarget, column);
+              },
+              onDrop: (e) => {
+                e.preventDefault();
+                if (e.dataTransfer) dragCtrl.cardDrop(e.dataTransfer, column);
+              },
+              onDragLeave: (e) => dragCtrl.dragLeave(e.currentTarget, e.relatedTarget),
+              children: cardsContent
+            }
+          ),
+          renderColumnFooter ? renderColumnFooter(column) : onCardAdd || allowAddCard ? /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: classNames(
+                "border-t border-[var(--tiger-border,#e5e7eb)]",
+                taskBoardAddCardClasses
+              ),
+              role: "button",
+              tabIndex: 0,
+              onClick: () => onCardAdd?.(column.id),
+              onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  onCardAdd?.(column.id);
+                }
+              },
+              children: [
+                /* @__PURE__ */ jsx("span", { children: "+" }),
+                /* @__PURE__ */ jsx("span", { children: resolveLocaleText(labels.addCardText) })
+              ]
+            }
+          ) : null
+        ]
+      }
+    );
+  },
+  (prev, next) => prev.column === next.column && prev.colIndex === next.colIndex && prev.isDropTarget === next.isDropTarget && prev.isColDragging === next.isColDragging && prev.dropIdx === next.dropIdx && prev.draggable === next.draggable && prev.columnDraggable === next.columnDraggable && prev.dragType === next.dragType && prev.dragStateId === next.dragStateId && prev.kbDragStateId === next.kbDragStateId && prev.onCardAdd === next.onCardAdd && prev.showCardCount === next.showCardCount && prev.allowAddCard === next.allowAddCard
+);
+ColumnItem.displayName = "TaskBoardColumnItem";
+var TaskBoard = ({
+  columns: controlledColumns,
+  defaultColumns = [],
+  draggable = true,
+  columnDraggable = true,
+  enforceWipLimit = false,
+  beforeCardMove,
+  beforeColumnMove,
+  onCardMove,
+  onColumnMove,
+  onColumnsChange,
+  onCardAdd,
+  filterText = "",
+  hiddenColumns,
+  showCardCount = false,
+  allowAddCard = false,
+  allowAddColumn = false,
+  onColumnAdd,
+  renderCard: renderCardProp,
+  renderColumnHeader,
+  renderColumnFooter,
+  renderEmptyColumn,
+  locale,
+  className,
+  style,
+  ...rest
+}) => {
+  const config = useTigerConfig();
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const labels = useMemo(() => getTaskBoardLabels(mergedLocale), [mergedLocale]);
+  const [innerColumns, setInnerColumns] = useState(defaultColumns);
+  useEffect(() => {
+    if (controlledColumns !== void 0) setInnerColumns(controlledColumns);
+  }, [controlledColumns]);
+  const currentColumns = controlledColumns ?? innerColumns;
+  const visibleColumns = useMemo(() => {
+    if (!filterText && (!hiddenColumns || hiddenColumns.length === 0)) {
+      return currentColumns;
+    }
+    return filterColumns(currentColumns, filterText, hiddenColumns);
+  }, [currentColumns, filterText, hiddenColumns]);
+  const columnsRef = useRef(currentColumns);
+  columnsRef.current = currentColumns;
+  const updateColumns = useCallback(
+    (next) => {
+      setInnerColumns(next);
+      onColumnsChange?.(next);
+    },
+    [onColumnsChange]
+  );
+  const [dragSnap, setDragSnap] = useState(createDefaultDragSnapshot);
+  const boardRef = useRef(null);
+  const beforeCardMoveRef = useRef(beforeCardMove);
+  beforeCardMoveRef.current = beforeCardMove;
+  const beforeColumnMoveRef = useRef(beforeColumnMove);
+  beforeColumnMoveRef.current = beforeColumnMove;
+  const onCardMoveRef = useRef(onCardMove);
+  onCardMoveRef.current = onCardMove;
+  const onColumnMoveRef = useRef(onColumnMove);
+  onColumnMoveRef.current = onColumnMove;
+  const enforceWipLimitRef = useRef(enforceWipLimit);
+  enforceWipLimitRef.current = enforceWipLimit;
+  const applyCardMove = useCallback(
+    async (cardId, fromColumnId, toColumnId, toIdx) => {
+      const result = moveCard(columnsRef.current, cardId, fromColumnId, toColumnId, toIdx, {
+        enforceWipLimit: enforceWipLimitRef.current
+      });
+      if (!result) return;
+      if (beforeCardMoveRef.current) {
+        const ok = await beforeCardMoveRef.current(result.event);
+        if (!ok) return;
+      }
+      updateColumns(result.columns);
+      onCardMoveRef.current?.(result.event);
+    },
+    [updateColumns]
+  );
+  const applyColumnMove = useCallback(
+    async (fromIdx, toIdx) => {
+      const cols = columnsRef.current;
+      const result = reorderColumns(cols, fromIdx, Math.min(toIdx, cols.length - 1));
+      if (!result) return;
+      if (beforeColumnMoveRef.current) {
+        const ok = await beforeColumnMoveRef.current(result.event);
+        if (!ok) return;
+      }
+      updateColumns(result.columns);
+      onColumnMoveRef.current?.(result.event);
+    },
+    [updateColumns]
+  );
+  const dragCtrlRef = useRef(null);
+  if (!dragCtrlRef.current) {
+    dragCtrlRef.current = createTaskBoardDragController(
+      {
+        onStateChange: setDragSnap,
+        applyCardMove: (...args) => applyCardMoveRef.current(...args),
+        applyColumnMove: (...args) => applyColumnMoveRef.current(...args),
+        getBoardEl: () => boardRef.current,
+        getColumnCount: () => columnsRef.current.length
+      },
+      { draggable, columnDraggable }
+    );
+  }
+  const dragCtrl = dragCtrlRef.current;
+  const applyCardMoveRef = useRef(applyCardMove);
+  applyCardMoveRef.current = applyCardMove;
+  const applyColumnMoveRef = useRef(applyColumnMove);
+  applyColumnMoveRef.current = applyColumnMove;
+  useEffect(() => {
+    dragCtrl.setOptions({ draggable, columnDraggable });
+  }, [draggable, columnDraggable, dragCtrl]);
+  useEffect(() => {
+    dragCtrl.init();
+    return () => dragCtrl.dispose();
+  }, [dragCtrl]);
+  const wrapperClasses = useMemo(() => classNames(taskBoardBaseClasses, className), [className]);
+  const dragType = dragSnap.drag?.type ?? null;
+  const dragStateId = dragSnap.drag?.type === "card" ? dragSnap.drag.id : null;
+  const kbDragStateId = dragSnap.kbDrag?.id ?? null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: boardRef,
+      className: wrapperClasses,
+      style,
+      role: "region",
+      "aria-label": resolveLocaleText(labels.boardAriaLabel),
+      "data-tiger-task-board": "",
+      ...rest,
+      children: [
+        visibleColumns.map((col, i) => {
+          const isDropTarget = dragSnap.drag?.type === "card" && dragSnap.dropTargetColumnId === col.id;
+          const isColDragging = dragSnap.drag?.type === "column" && dragSnap.drag.id === col.id;
+          return /* @__PURE__ */ jsx(
+            ColumnItem,
+            {
+              column: col,
+              colIndex: i,
+              isDropTarget,
+              isColDragging,
+              dropIdx: isDropTarget ? dragSnap.dropIndex : -1,
+              draggable,
+              columnDraggable,
+              labels,
+              renderCardProp,
+              renderColumnHeader,
+              renderColumnFooter,
+              renderEmptyColumn,
+              onCardAdd,
+              dragType,
+              dragCtrl,
+              dragStateId,
+              kbDragStateId,
+              showCardCount,
+              allowAddCard
+            },
+            String(col.id)
+          );
+        }),
+        allowAddColumn && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: kanbanAddColumnClasses,
+            role: "button",
+            tabIndex: 0,
+            onClick: () => onColumnAdd?.(),
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onColumnAdd?.();
+              }
+            },
+            children: "+ Add column"
+          }
+        )
+      ]
+    }
+  );
+};
+var TaskBoard_default = TaskBoard;
+
+export { TaskBoard, TaskBoard_default };

package/dist/{chunk-YLZEOXFS.mjs → chunk-6GU5NH5F.mjs}

@@ -18,7 +18,8 @@ var CodeEditor = ({
   disabled = false,
   className,
   style,
-  onChange
+  onChange,
+  highlighter
 }) => {
   const [internalValue, setInternalValue] = useState(defaultValue);
   const textareaRef = useRef(null);
@@ -68,12 +69,24 @@ var CodeEditor = ({
     return cls ? /* @__PURE__ */ jsx("span", { className: cls, children: token.value }, idx) : /* @__PURE__ */ jsx(React.Fragment, { children: token.value }, idx);
   };
   const renderLine = (line, lineIndex) => {
+    if (highlighter?.highlightLine) {
+      const html = highlighter.highlightLine(line, language, theme) || (line === "" ? "\n" : "");
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "min-h-[1.625rem]",
+          dangerouslySetInnerHTML: { __html: html }
+        },
+        lineIndex
+      );
+    }
     const tokens = tokenizeLine(line, language);
     return /* @__PURE__ */ jsxs("div", { className: "min-h-[1.625rem]", children: [
       tokens.map(renderToken),
       line === "" ? "\n" : null
     ] }, lineIndex);
   };
+  const blockHtml = highlighter && !highlighter.highlightLine && highlighter.highlightCode ? highlighter.highlightCode(code, language, theme) : null;
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -84,7 +97,14 @@ var CodeEditor = ({
       children: /* @__PURE__ */ jsxs("div", { className: "flex h-full", children: [
         lineNumbers && /* @__PURE__ */ jsx("div", { className: getLineNumberClasses(theme), "aria-hidden": "true", children: lineNums.map((n) => /* @__PURE__ */ jsx("div", { className: "min-h-[1.625rem]", children: n }, n)) }),
         /* @__PURE__ */ jsxs("div", { className: "relative flex-1 overflow-auto", children: [
-          /* @__PURE__ */ jsx("div", { className: classNames(codeEditorHighlightClasses, wrapClass), "aria-hidden": "true", children: lines.map(renderLine) }),
+          blockHtml !== null ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: classNames(codeEditorHighlightClasses, wrapClass),
+              "aria-hidden": "true",
+              dangerouslySetInnerHTML: { __html: blockHtml }
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: classNames(codeEditorHighlightClasses, wrapClass), "aria-hidden": "true", children: lines.map(renderLine) }),
           /* @__PURE__ */ jsx(
             "textarea",
             {

package/dist/{chunk-XEYP62CR.js → chunk-6LDJSFUQ.js}

@@ -37,28 +37,32 @@ var ImageViewer = ({
   onIndexChange
 }) => {
   const [index, setIndex] = react.useState(currentIndex);
-  const [zoom, setZoom] = react.useState(1);
-  const [rotation, setRotation] = react.useState(0);
+  const [transform, setTransform] = react.useState(tigercatCore.createDefaultTransform);
+  const panRef = react.useRef(tigercatCore.createPanState());
+  const pinchRef = react.useRef(tigercatCore.createPinchState());
   react.useEffect(() => {
     setIndex(currentIndex);
   }, [currentIndex]);
+  const resetTransform = react.useCallback(() => {
+    setTransform(tigercatCore.createDefaultTransform());
+    panRef.current = tigercatCore.createPanState();
+    pinchRef.current = tigercatCore.createPinchState();
+  }, []);
   const handleClose = react.useCallback(() => {
     onClose?.();
   }, [onClose]);
   const handlePrev = react.useCallback(() => {
     const newIndex = (index - 1 + images.length) % images.length;
     setIndex(newIndex);
-    setZoom(1);
-    setRotation(0);
+    resetTransform();
     onIndexChange?.(newIndex);
-  }, [index, images.length, onIndexChange]);
+  }, [index, images.length, onIndexChange, resetTransform]);
   const handleNext = react.useCallback(() => {
     const newIndex = (index + 1) % images.length;
     setIndex(newIndex);
-    setZoom(1);
-    setRotation(0);
+    resetTransform();
     onIndexChange?.(newIndex);
-  }, [index, images.length, onIndexChange]);
+  }, [index, images.length, onIndexChange, resetTransform]);
   react.useEffect(() => {
     if (!open) return;
     const handler = (e) => {
@@ -136,8 +140,61 @@ var ImageViewer = ({
             className: tigercatCore.imageViewerImgClasses,
             src: images[index],
             alt: `Image ${index + 1}`,
-            style: { transform: `scale(${zoom}) rotate(${rotation}deg)` },
-            draggable: false
+            style: { transform: tigercatCore.getImageTransformStyle(transform), touchAction: "none" },
+            draggable: false,
+            onWheel: (e) => {
+              if (!zoomable) return;
+              e.preventDefault();
+              const newScale = tigercatCore.applyWheelZoom(transform.scale, e.deltaY, { minZoom, maxZoom });
+              setTransform((t) => ({ ...t, scale: newScale }));
+            },
+            onMouseDown: (e) => {
+              if (e.button !== 0) return;
+              e.preventDefault();
+              panRef.current = tigercatCore.startPan(e.clientX, e.clientY, transform.translateX, transform.translateY);
+            },
+            onMouseMove: (e) => {
+              if (!panRef.current.isPanning) return;
+              const result = tigercatCore.movePan(panRef.current, e.clientX, e.clientY);
+              setTransform((t) => ({ ...t, ...result }));
+            },
+            onMouseUp: () => {
+              panRef.current = tigercatCore.createPanState();
+            },
+            onMouseLeave: () => {
+              panRef.current = tigercatCore.createPanState();
+            },
+            onTouchStart: (e) => {
+              if (e.touches.length === 2 && zoomable) {
+                e.preventDefault();
+                pinchRef.current = tigercatCore.startPinch(e.touches[0], e.touches[1], transform.scale);
+              } else if (e.touches.length === 1) {
+                panRef.current = tigercatCore.startPan(
+                  e.touches[0].clientX,
+                  e.touches[0].clientY,
+                  transform.translateX,
+                  transform.translateY
+                );
+              }
+            },
+            onTouchMove: (e) => {
+              if (e.touches.length === 2 && pinchRef.current.isPinching) {
+                e.preventDefault();
+                const newScale = tigercatCore.movePinch(pinchRef.current, e.touches[0], e.touches[1], minZoom, maxZoom);
+                setTransform((t) => ({ ...t, scale: newScale }));
+              } else if (e.touches.length === 1 && panRef.current.isPanning) {
+                const result = tigercatCore.movePan(panRef.current, e.touches[0].clientX, e.touches[0].clientY);
+                setTransform((t) => ({ ...t, ...result }));
+              }
+            },
+            onTouchEnd: () => {
+              pinchRef.current = tigercatCore.createPinchState();
+              panRef.current = tigercatCore.createPanState();
+            },
+            onTouchCancel: () => {
+              pinchRef.current = tigercatCore.createPinchState();
+              panRef.current = tigercatCore.createPanState();
+            }
           }
         ),
         (zoomable || rotatable) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tigercatCore.imageViewerToolbarClasses, children: [
@@ -146,7 +203,7 @@ var ImageViewer = ({
               "button",
               {
                 className: tigercatCore.imageViewerToolbarBtnClasses,
-                onClick: () => setZoom(tigercatCore.clampZoom(zoom - 0.25, minZoom, maxZoom)),
+                onClick: () => setTransform((t) => ({ ...t, scale: tigercatCore.clampZoom(t.scale - 0.25, minZoom, maxZoom) })),
                 "aria-label": "Zoom out",
                 type: "button",
                 children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { pathD: tigercatCore.imageViewerIcons.zoomOut, label: "Zoom out" })
@@ -156,7 +213,7 @@ var ImageViewer = ({
               "button",
               {
                 className: tigercatCore.imageViewerToolbarBtnClasses,
-                onClick: () => setZoom(tigercatCore.clampZoom(zoom + 0.25, minZoom, maxZoom)),
+                onClick: () => setTransform((t) => ({ ...t, scale: tigercatCore.clampZoom(t.scale + 0.25, minZoom, maxZoom) })),
                 "aria-label": "Zoom in",
                 type: "button",
                 children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { pathD: tigercatCore.imageViewerIcons.zoomIn, label: "Zoom in" })
@@ -168,7 +225,7 @@ var ImageViewer = ({
               "button",
               {
                 className: tigercatCore.imageViewerToolbarBtnClasses,
-                onClick: () => setRotation(tigercatCore.normalizeRotation(rotation - 90)),
+                onClick: () => setTransform((t) => ({ ...t, rotation: tigercatCore.normalizeRotation(t.rotation - 90) })),
                 "aria-label": "Rotate left",
                 type: "button",
                 children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { pathD: tigercatCore.imageViewerIcons.rotateLeft, label: "Rotate left" })
@@ -178,7 +235,7 @@ var ImageViewer = ({
               "button",
               {
                 className: tigercatCore.imageViewerToolbarBtnClasses,
-                onClick: () => setRotation(tigercatCore.normalizeRotation(rotation + 90)),
+                onClick: () => setTransform((t) => ({ ...t, rotation: tigercatCore.normalizeRotation(t.rotation + 90) })),
                 "aria-label": "Rotate right",
                 type: "button",
                 children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { pathD: tigercatCore.imageViewerIcons.rotateRight, label: "Rotate right" })

package/dist/{chunk-RYW4CV7U.js → chunk-6N6CWBPP.js}

@@ -1,7 +1,6 @@
 'use strict';
 
-var chunkEQWQXURG_js = require('./chunk-EQWQXURG.js');
-var chunkZYPEO2KY_js = require('./chunk-ZYPEO2KY.js');
+var chunkPGBKMW4Q_js = require('./chunk-PGBKMW4Q.js');
 var React = require('react');
 var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
@@ -11,6 +10,16 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 var React__default = /*#__PURE__*/_interopDefault(React);
 
 var DropdownContext = React.createContext(null);
+var DropdownMenu = ({
+  className,
+  style,
+  children,
+  role,
+  ...divProps
+}) => {
+  const menuClasses = tigercatCore.classNames(tigercatCore.getDropdownMenuClasses(), className);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: menuClasses, style, role: role ?? "menu", ...divProps, children });
+};
 var Dropdown = ({
   trigger = "hover",
   placement: initialPlacement = "bottom-start",
@@ -93,16 +102,16 @@ var Dropdown = ({
       tigercatCore.handleMenuNavigation(floatingRef.current, event.nativeEvent);
     }
   }, []);
-  chunkZYPEO2KY_js.useClickOutside({
+  chunkPGBKMW4Q_js.useClickOutside({
     enabled: trigger === "click" && visible,
     refs: [containerRef],
     onOutsideClick: () => setVisible(false)
   });
-  chunkZYPEO2KY_js.useEscapeKey({
+  chunkPGBKMW4Q_js.useEscapeKey({
     enabled: visible,
     onEscape: () => setVisible(false)
   });
-  const { x, y, placement } = chunkZYPEO2KY_js.useFloating({
+  const { x, y, placement } = chunkPGBKMW4Q_js.useFloating({
     referenceRef: triggerRef,
     floatingRef,
     enabled: visible,
@@ -143,7 +152,7 @@ var Dropdown = ({
       if (triggerElement == null) triggerElement = child;
       return;
     }
-    if (child.type === chunkEQWQXURG_js.DropdownMenu) {
+    if (child.type === DropdownMenu) {
       menuElement = child;
       return;
     }
@@ -201,3 +210,4 @@ var Dropdown = ({
 
 exports.Dropdown = Dropdown;
 exports.DropdownContext = DropdownContext;
+exports.DropdownMenu = DropdownMenu;

package/dist/{chunk-6P3JIUSI.mjs → chunk-6OOGL43U.mjs}

@@ -1,5 +1,5 @@
 import { Textarea } from './chunk-7QZ4XT2P.mjs';
-import { Button } from './chunk-3KMKMAE3.mjs';
+import { Button } from './chunk-GKJNQUTW.mjs';
 import { Tag } from './chunk-TGKNEMD4.mjs';
 import { Text } from './chunk-HLS4CHWX.mjs';
 import { Avatar } from './chunk-FE7PEZTI.mjs';
@@ -178,7 +178,7 @@ var CommentThread = ({
             ] }),
             /* @__PURE__ */ jsx("div", { className: "text-sm text-[var(--tiger-text-secondary,#4b5563)] leading-relaxed break-words mt-1.5 mb-2", children: node.content }),
             actions.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-1", children: actions }) : null,
-            replyingTo === node.id ? /* @__PURE__ */ jsxs("div", { className: "mt-3 space-y-2 bg-[var(--tiger-surface-muted,#f9fafb)] p-3 rounded-lg", children: [
+            replyingTo === node.id ? /* @__PURE__ */ jsxs("div", { className: "mt-3 space-y-2 bg-[var(--tiger-surface-muted,#f9fafb)] p-3 rounded-[var(--tiger-radius-md,0.5rem)]", children: [
               /* @__PURE__ */ jsx(
                 Textarea,
                 {
@@ -249,6 +249,7 @@ var CommentThread = ({
     "div",
     {
       className: classNames("tiger-comment-thread flex flex-col", className),
+      role: divProps.role ?? "feed",
       "data-tiger-comment-thread": true,
       "aria-label": divProps["aria-label"] ?? (divProps["aria-labelledby"] ? void 0 : "\u8BC4\u8BBA\u7EBF\u7A0B"),
       ...divProps,