@expcat/tigercat-react 1.0.7 → 1.2.0

package/dist/chunk-BFAZZUD6.js

@@ -0,0 +1,236 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+var _chunkUKGQ7256js = require('./chunk-UKGQ7256.js');
+
+// src/components/MarkdownEditor.tsx
+var _react = require('react');
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var _jsxruntime = require('react/jsx-runtime');
+var modes = ["edit", "split", "preview"];
+function scheduleSelectionRestore(textarea, result) {
+  const schedule = typeof requestAnimationFrame === "function" ? requestAnimationFrame : (callback) => window.setTimeout(callback, 0);
+  schedule(() => {
+    textarea.selectionStart = result.selectionStart;
+    textarea.selectionEnd = result.selectionEnd;
+    textarea.focus();
+  });
+}
+var MarkdownEditor = ({
+  value,
+  defaultValue = "",
+  placeholder,
+  mode,
+  defaultMode = "split",
+  toolbar,
+  showModeSwitch = true,
+  height = 360,
+  readOnly = false,
+  disabled = false,
+  renderer,
+  onChange,
+  onModeChange,
+  className,
+  style,
+  ...restProps
+}) => {
+  const textareaRef = _react.useRef.call(void 0, null);
+  const [currentValue, setInternalValue, isValueControlled] = _chunkUKGQ7256js.useControlledState.call(void 0, 
+    value,
+    defaultValue
+  );
+  const [currentMode, setInternalMode, isModeControlled] = _chunkUKGQ7256js.useControlledState.call(void 0, mode, defaultMode);
+  const toolbarItems = _react.useMemo.call(void 0, 
+    () => toolbar === false ? [] : _nullishCoalesce(toolbar, () => ( _tigercatcore.defaultMarkdownToolbar)),
+    [toolbar]
+  );
+  const previewHtml = _react.useMemo.call(void 0, 
+    () => _tigercatcore.renderMarkdownToHtml.call(void 0, currentValue, renderer),
+    [currentValue, renderer]
+  );
+  const containerStyle = _react.useMemo.call(void 0, () => {
+    const parsedHeight = _tigercatcore.parseMarkdownHeight.call(void 0, height);
+    return { ...parsedHeight ? { height: parsedHeight } : {}, ...style };
+  }, [height, style]);
+  const commitValue = _react.useCallback.call(void 0, 
+    (nextValue) => {
+      if (!isValueControlled) setInternalValue(nextValue);
+      _optionalChain([onChange, 'optionalCall', _ => _(nextValue)]);
+    },
+    [isValueControlled, onChange, setInternalValue]
+  );
+  const commitMode = _react.useCallback.call(void 0, 
+    (nextMode) => {
+      if (!isModeControlled) setInternalMode(nextMode);
+      _optionalChain([onModeChange, 'optionalCall', _2 => _2(nextMode)]);
+    },
+    [isModeControlled, onModeChange, setInternalMode]
+  );
+  const applyToolbarButton = _react.useCallback.call(void 0, 
+    (button) => {
+      if (readOnly || disabled) return;
+      const textarea = textareaRef.current;
+      const selection = {
+        value: currentValue,
+        selectionStart: _nullishCoalesce(_optionalChain([textarea, 'optionalAccess', _3 => _3.selectionStart]), () => ( currentValue.length)),
+        selectionEnd: _nullishCoalesce(_optionalChain([textarea, 'optionalAccess', _4 => _4.selectionEnd]), () => ( currentValue.length))
+      };
+      const result = _tigercatcore.applyMarkdownToolbarAction.call(void 0, button, selection);
+      commitValue(result.value);
+      if (textarea) scheduleSelectionRestore(textarea, result);
+    },
+    [commitValue, currentValue, disabled, readOnly]
+  );
+  const handleKeyDown = _react.useCallback.call(void 0, 
+    (event) => {
+      if (event.key === "Tab") {
+        event.preventDefault();
+        const textarea = event.currentTarget;
+        const before = textarea.value.slice(0, textarea.selectionStart);
+        const after = textarea.value.slice(textarea.selectionEnd);
+        const result = {
+          value: `${before}  ${after}`,
+          selectionStart: textarea.selectionStart + 2,
+          selectionEnd: textarea.selectionStart + 2
+        };
+        commitValue(result.value);
+        scheduleSelectionRestore(textarea, result);
+        return;
+      }
+      const match = _tigercatcore.findMarkdownHotkeyMatch.call(void 0, toolbarItems, event.nativeEvent);
+      if (match) {
+        event.preventDefault();
+        applyToolbarButton(match);
+      }
+    },
+    [applyToolbarButton, commitValue, toolbarItems]
+  );
+  const showFormattingToolbar = toolbar !== false;
+  const showTopbar = showFormattingToolbar || showModeSwitch;
+  const showEditor = currentMode === "edit" || currentMode === "split";
+  const showPreview = currentMode === "preview" || currentMode === "split";
+  const previewNode = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      className: _tigercatcore.classNames.call(void 0, 
+        _tigercatcore.markdownEditorPreviewClasses,
+        currentMode === "split" ? _tigercatcore.markdownEditorSplitDividerClasses : void 0,
+        !currentValue ? _tigercatcore.markdownEditorEmptyPreviewClasses : void 0
+      ),
+      role: "region",
+      "aria-label": "Markdown preview",
+      dangerouslySetInnerHTML: { __html: currentValue ? previewHtml : placeholder || "" }
+    }
+  );
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      className: _tigercatcore.getMarkdownContainerClasses.call(void 0, disabled, className),
+      style: containerStyle,
+      "data-mode": currentMode,
+      ...restProps,
+      children: [
+        showTopbar && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _tigercatcore.markdownEditorToolbarClasses, children: [
+          showFormattingToolbar ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "div",
+            {
+              className: _tigercatcore.markdownEditorToolbarGroupClasses,
+              role: "toolbar",
+              "aria-label": "Markdown formatting",
+              children: toolbarItems.map((item, index) => {
+                if (_tigercatcore.isMarkdownToolbarSeparator.call(void 0, item)) {
+                  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                    "div",
+                    {
+                      className: _tigercatcore.markdownEditorToolbarSeparatorClasses,
+                      role: "separator",
+                      "aria-orientation": "vertical"
+                    },
+                    `separator-${index}`
+                  );
+                }
+                return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  "button",
+                  {
+                    type: "button",
+                    className: _tigercatcore.getMarkdownToolbarButtonClasses.call(void 0, false),
+                    title: _nullishCoalesce(item.tooltip, () => ( item.label)),
+                    "aria-label": _nullishCoalesce(item.tooltip, () => ( item.label)),
+                    disabled: disabled || readOnly,
+                    onClick: () => applyToolbarButton(item),
+                    children: item.icon ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { dangerouslySetInnerHTML: { __html: item.icon } }) : item.label
+                  },
+                  item.name
+                );
+              })
+            }
+          ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", {}),
+          showModeSwitch && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "div",
+            {
+              className: _tigercatcore.markdownEditorToolbarGroupClasses,
+              role: "toolbar",
+              "aria-label": "Markdown view mode",
+              children: modes.map((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                "button",
+                {
+                  type: "button",
+                  className: _tigercatcore.getMarkdownToolbarButtonClasses.call(void 0, currentMode === item),
+                  "aria-label": _tigercatcore.markdownModeLabels[item],
+                  "aria-pressed": currentMode === item,
+                  disabled,
+                  onClick: () => commitMode(item),
+                  children: _tigercatcore.markdownModeLabels[item]
+                },
+                item
+              ))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _tigercatcore.getMarkdownBodyClasses.call(void 0, currentMode), children: [
+          showEditor && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "textarea",
+            {
+              ref: textareaRef,
+              className: _tigercatcore.markdownEditorTextareaClasses,
+              value: currentValue,
+              onChange: (event) => commitValue(event.target.value),
+              onKeyDown: handleKeyDown,
+              placeholder,
+              readOnly: readOnly || disabled,
+              disabled,
+              spellCheck: true,
+              "aria-label": "Markdown editor",
+              "aria-multiline": true
+            }
+          ),
+          showPreview && previewNode
+        ] })
+      ]
+    }
+  );
+};
+var MarkdownEditor_default = MarkdownEditor;
+
+
+
+
+exports.MarkdownEditor = MarkdownEditor; exports.MarkdownEditor_default = MarkdownEditor_default;

package/dist/{chunk-6E7FPBRR.mjs → chunk-BJQIYELW.mjs}

@@ -1,8 +1,28 @@
-import { useState, useEffect, useCallback, useMemo } from 'react';
-import { classNames, imageViewerBackdropClasses, imageViewerCounterClasses, imageViewerCloseBtnClasses, imageViewerIcons, imageViewerNavBtnClasses, imageViewerImgClasses, imageViewerToolbarClasses, imageViewerToolbarBtnClasses, clampZoom, normalizeRotation } from '@expcat/tigercat-core';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-
 // src/components/ImageViewer.tsx
+import { useState, useCallback, useEffect, useMemo, useRef } from "react";
+import {
+  classNames,
+  imageViewerBackdropClasses,
+  imageViewerImgClasses,
+  imageViewerToolbarClasses,
+  imageViewerToolbarBtnClasses,
+  imageViewerNavBtnClasses,
+  imageViewerCloseBtnClasses,
+  imageViewerCounterClasses,
+  imageViewerIcons,
+  clampZoom,
+  normalizeRotation,
+  createDefaultTransform,
+  getImageTransformStyle,
+  applyWheelZoom,
+  createPanState,
+  startPan,
+  movePan,
+  createPinchState,
+  startPinch,
+  movePinch
+} from "@expcat/tigercat-core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function SvgIcon({ pathD, label }) {
   return /* @__PURE__ */ jsx(
     "svg",
@@ -31,32 +51,38 @@ var ImageViewer = ({
   minZoom = 0.5,
   maxZoom = 3,
   className,
+  onOpenChange,
   onClose,
   onIndexChange
 }) => {
   const [index, setIndex] = useState(currentIndex);
-  const [zoom, setZoom] = useState(1);
-  const [rotation, setRotation] = useState(0);
+  const [transform, setTransform] = useState(createDefaultTransform);
+  const panRef = useRef(createPanState());
+  const pinchRef = useRef(createPinchState());
   useEffect(() => {
     setIndex(currentIndex);
   }, [currentIndex]);
+  const resetTransform = useCallback(() => {
+    setTransform(createDefaultTransform());
+    panRef.current = createPanState();
+    pinchRef.current = createPinchState();
+  }, []);
   const handleClose = useCallback(() => {
+    onOpenChange?.(false);
     onClose?.();
-  }, [onClose]);
+  }, [onOpenChange, onClose]);
   const handlePrev = 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 = 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]);
   useEffect(() => {
     if (!open) return;
     const handler = (e) => {
@@ -134,8 +160,72 @@ var ImageViewer = ({
             className: imageViewerImgClasses,
             src: images[index],
             alt: `Image ${index + 1}`,
-            style: { transform: `scale(${zoom}) rotate(${rotation}deg)` },
-            draggable: false
+            style: { transform: getImageTransformStyle(transform), touchAction: "none" },
+            draggable: false,
+            onWheel: (e) => {
+              if (!zoomable) return;
+              e.preventDefault();
+              const newScale = applyWheelZoom(transform.scale, e.deltaY, { minZoom, maxZoom });
+              setTransform((t) => ({ ...t, scale: newScale }));
+            },
+            onMouseDown: (e) => {
+              if (e.button !== 0) return;
+              e.preventDefault();
+              panRef.current = startPan(
+                e.clientX,
+                e.clientY,
+                transform.translateX,
+                transform.translateY
+              );
+            },
+            onMouseMove: (e) => {
+              if (!panRef.current.isPanning) return;
+              const result = movePan(panRef.current, e.clientX, e.clientY);
+              setTransform((t) => ({ ...t, ...result }));
+            },
+            onMouseUp: () => {
+              panRef.current = createPanState();
+            },
+            onMouseLeave: () => {
+              panRef.current = createPanState();
+            },
+            onTouchStart: (e) => {
+              if (e.touches.length === 2 && zoomable) {
+                e.preventDefault();
+                pinchRef.current = startPinch(e.touches[0], e.touches[1], transform.scale);
+              } else if (e.touches.length === 1) {
+                panRef.current = 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 = 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 = movePan(panRef.current, e.touches[0].clientX, e.touches[0].clientY);
+                setTransform((t) => ({ ...t, ...result }));
+              }
+            },
+            onTouchEnd: () => {
+              pinchRef.current = createPinchState();
+              panRef.current = createPanState();
+            },
+            onTouchCancel: () => {
+              pinchRef.current = createPinchState();
+              panRef.current = createPanState();
+            }
           }
         ),
         (zoomable || rotatable) && /* @__PURE__ */ jsxs("div", { className: imageViewerToolbarClasses, children: [
@@ -144,7 +234,10 @@ var ImageViewer = ({
               "button",
               {
                 className: imageViewerToolbarBtnClasses,
-                onClick: () => setZoom(clampZoom(zoom - 0.25, minZoom, maxZoom)),
+                onClick: () => setTransform((t) => ({
+                  ...t,
+                  scale: clampZoom(t.scale - 0.25, minZoom, maxZoom)
+                })),
                 "aria-label": "Zoom out",
                 type: "button",
                 children: /* @__PURE__ */ jsx(SvgIcon, { pathD: imageViewerIcons.zoomOut, label: "Zoom out" })
@@ -154,7 +247,10 @@ var ImageViewer = ({
               "button",
               {
                 className: imageViewerToolbarBtnClasses,
-                onClick: () => setZoom(clampZoom(zoom + 0.25, minZoom, maxZoom)),
+                onClick: () => setTransform((t) => ({
+                  ...t,
+                  scale: clampZoom(t.scale + 0.25, minZoom, maxZoom)
+                })),
                 "aria-label": "Zoom in",
                 type: "button",
                 children: /* @__PURE__ */ jsx(SvgIcon, { pathD: imageViewerIcons.zoomIn, label: "Zoom in" })
@@ -166,7 +262,7 @@ var ImageViewer = ({
               "button",
               {
                 className: imageViewerToolbarBtnClasses,
-                onClick: () => setRotation(normalizeRotation(rotation - 90)),
+                onClick: () => setTransform((t) => ({ ...t, rotation: normalizeRotation(t.rotation - 90) })),
                 "aria-label": "Rotate left",
                 type: "button",
                 children: /* @__PURE__ */ jsx(SvgIcon, { pathD: imageViewerIcons.rotateLeft, label: "Rotate left" })
@@ -176,7 +272,7 @@ var ImageViewer = ({
               "button",
               {
                 className: imageViewerToolbarBtnClasses,
-                onClick: () => setRotation(normalizeRotation(rotation + 90)),
+                onClick: () => setTransform((t) => ({ ...t, rotation: normalizeRotation(t.rotation + 90) })),
                 "aria-label": "Rotate right",
                 type: "button",
                 children: /* @__PURE__ */ jsx(SvgIcon, { pathD: imageViewerIcons.rotateRight, label: "Rotate right" })
@@ -189,4 +285,6 @@ var ImageViewer = ({
   );
 };
 
-export { ImageViewer };
+export {
+  ImageViewer
+};