@expcat/tigercat-react 1.0.7 → 1.2.0

package/dist/{chunk-UBKOITHT.mjs → chunk-GYQ2DN6Z.mjs}

@@ -1,8 +1,21 @@
-import { ChartCanvas } from './chunk-IS467WAO.mjs';
-import React, { useMemo } from 'react';
-import { getChartInnerRect, valueToGaugeAngle, computeGaugeTicks, createGaugeArcPath, createGaugeNeedlePath, classNames, chartAxisTickTextClasses } from '@expcat/tigercat-core';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import {
+  ChartCanvas
+} from "./chunk-DKNVSQSV.mjs";
 
+// src/components/GaugeChart.tsx
+import React, { useId, useMemo, useState, useRef, useEffect } from "react";
+import {
+  classNames,
+  createGaugeArcPath,
+  createGaugeNeedlePath,
+  valueToGaugeAngle,
+  computeGaugeTicks,
+  getChartInnerRect,
+  chartAxisTickTextClasses,
+  getStableChartGradientPrefix,
+  createGaugeAnimation
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
 var GaugeChart = ({
   width = 280,
   height = 200,
@@ -20,6 +33,7 @@ var GaugeChart = ({
   segments,
   trackColor = "var(--tiger-border,#e5e7eb)",
   color = "var(--tiger-primary,#2563eb)",
+  gradient = false,
   title: chartTitle,
   desc,
   className
@@ -38,14 +52,34 @@ var GaugeChart = ({
     () => valueToGaugeAngle(value, min, max, startAngle, endAngle),
     [value, min, max, startAngle, endAngle]
   );
+  const [animatedAngle, setAnimatedAngle] = useState(needleAngle);
+  const prevAngleRef = useRef(needleAngle);
+  useEffect(() => {
+    const from = prevAngleRef.current;
+    const to = needleAngle;
+    prevAngleRef.current = to;
+    if (from === to) return;
+    const ctrl = createGaugeAnimation({
+      from,
+      to,
+      onUpdate: (v) => setAnimatedAngle(v)
+    });
+    return () => ctrl.stop();
+  }, [needleAngle]);
   const ticks = useMemo(
     () => showTicks ? computeGaugeTicks(cx, cy, radius, min, max, startAngle, endAngle, tickCount) : [],
     [showTicks, cx, cy, radius, min, max, startAngle, endAngle, tickCount]
   );
   const trackPath = createGaugeArcPath(cx, cy, radius, startAngle, endAngle, arcWidth);
-  const valuePath = needleAngle > startAngle ? createGaugeArcPath(cx, cy, radius, startAngle, needleAngle, arcWidth) : null;
-  const needlePath = createGaugeNeedlePath(cx, cy, radius - arcWidth - 6, needleAngle);
+  const valuePath = animatedAngle > startAngle ? createGaugeArcPath(cx, cy, radius, startAngle, animatedAngle, arcWidth) : null;
+  const needlePath = createGaugeNeedlePath(cx, cy, radius - arcWidth - 6, animatedAngle);
   const formattedValue = valueFormatter ? valueFormatter(value) : `${value}`;
+  const gradientId = useId();
+  const gradientPrefix = useMemo(
+    () => getStableChartGradientPrefix("gauge", gradientId),
+    [gradientId]
+  );
+  const valueGradientId = `${gradientPrefix}-value`;
   return /* @__PURE__ */ jsxs(
     ChartCanvas,
     {
@@ -56,6 +90,10 @@ var GaugeChart = ({
       desc,
       className: classNames(className),
       children: [
+        gradient && !segments && valuePath && /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: valueGradientId, x1: 0, y1: 0, x2: 0, y2: 1, children: [
+          /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 1 }),
+          /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.55 })
+        ] }) }),
         /* @__PURE__ */ jsx("path", { d: trackPath, fill: trackColor, strokeWidth: 0 }),
         segments ? segments.map((seg, i) => {
           const sStart = valueToGaugeAngle(seg.range[0], min, max, startAngle, endAngle);
@@ -73,9 +111,8 @@ var GaugeChart = ({
           "path",
           {
             d: valuePath,
-            fill: color,
-            strokeWidth: 0,
-            style: { transition: "all 0.3s ease-out" }
+            fill: gradient ? `url(#${valueGradientId})` : color,
+            strokeWidth: 0
           }
         ),
         ticks.map((tick, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
@@ -103,21 +140,14 @@ var GaugeChart = ({
             }
           )
         ] }, `tick-${i}`)),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: needlePath,
-            fill: "var(--tiger-text,#374151)",
-            style: { transition: "all 0.3s ease-out" }
-          }
-        ),
+        /* @__PURE__ */ jsx("path", { d: needlePath, fill: "var(--tiger-text,#374151)" }),
         /* @__PURE__ */ jsx("circle", { cx, cy, r: 5, fill: "var(--tiger-text,#374151)" }),
         /* @__PURE__ */ jsx(
           "text",
           {
             x: cx,
             y: cy + radius * 0.35,
-            className: "fill-[color:var(--tiger-text,#374151)] text-lg font-semibold",
+            className: "fill-[color:var(--tiger-text,#374151)] text-lg font-semibold tabular-nums",
             textAnchor: "middle",
             dominantBaseline: "middle",
             children: formattedValue
@@ -139,4 +169,6 @@ var GaugeChart = ({
   );
 };
 
-export { GaugeChart };
+export {
+  GaugeChart
+};

package/dist/chunk-H6NC6SBX.js

@@ -0,0 +1,330 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 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 _chunkXTV5JLLCjs = require('./chunk-XTV5JLLC.js');
+
+
+var _chunkUVMQJOTXjs = require('./chunk-UVMQJOTX.js');
+
+
+var _chunkUKLVOR4Ejs = require('./chunk-UKLVOR4E.js');
+
+// src/components/HeatmapChart.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var _jsxruntime = require('react/jsx-runtime');
+var HeatmapChart = ({
+  width = 400,
+  height = 300,
+  padding = 40,
+  data,
+  xLabels,
+  yLabels,
+  minColor = "#f0f9ff",
+  maxColor = "#2563eb",
+  colorSpace = "rgb",
+  cellRadius = 2,
+  cellGap = 1,
+  showValues = false,
+  valueFormatter,
+  renderMode = "auto",
+  canvasThreshold,
+  hoverable = false,
+  hoveredIndex: hoveredIndexProp,
+  activeOpacity = 1,
+  inactiveOpacity = 0.25,
+  selectable = false,
+  selectedIndex: selectedIndexProp,
+  showTooltip = true,
+  title,
+  desc,
+  className,
+  onHoveredIndexChange,
+  onSelectedIndexChange,
+  onCellClick,
+  onCellHover
+}) => {
+  const canvasRef = _react.useRef.call(void 0, null);
+  const {
+    tooltipPosition,
+    resolvedHoveredIndex,
+    activeIndex,
+    handleMouseEnter,
+    handleMouseMove,
+    handleMouseLeave,
+    handleClick
+  } = _chunkXTV5JLLCjs.useChartInteraction.call(void 0, {
+    hoverable,
+    hoveredIndexProp,
+    selectable,
+    selectedIndexProp,
+    activeOpacity,
+    inactiveOpacity,
+    getData: (index) => data[index],
+    onHoveredIndexChange: (index) => {
+      _optionalChain([onHoveredIndexChange, 'optionalCall', _ => _(index)]);
+      _optionalChain([onCellHover, 'optionalCall', _2 => _2(index, index !== null ? data[index] : null)]);
+    },
+    onSelectedIndexChange,
+    callbacks: { onClick: onCellClick }
+  });
+  const innerRect = _react.useMemo.call(void 0, 
+    () => _tigercatcore.getChartInnerRect.call(void 0, width, height, padding),
+    [width, height, padding]
+  );
+  const cells = _react.useMemo.call(void 0, 
+    () => _tigercatcore.computeHeatmapCells.call(void 0, data, {
+      xLabels,
+      yLabels,
+      width: innerRect.width,
+      height: innerRect.height,
+      cellGap,
+      minColor,
+      maxColor,
+      colorSpace
+    }),
+    [
+      data,
+      xLabels,
+      yLabels,
+      innerRect.width,
+      innerRect.height,
+      cellGap,
+      minColor,
+      maxColor,
+      colorSpace
+    ]
+  );
+  const tooltipContent = _react.useMemo.call(void 0, 
+    () => _tigercatcore.resolveChartTooltipContent.call(void 0, resolvedHoveredIndex, cells, void 0, (cell) => {
+      const val = valueFormatter ? valueFormatter(cell.value) : `${cell.value}`;
+      return `${cell.xLabel} \xD7 ${cell.yLabel}: ${val}`;
+    }),
+    [resolvedHoveredIndex, cells, valueFormatter]
+  );
+  const interactive = hoverable || selectable;
+  const rect = innerRect;
+  const cellW = (rect.width - cellGap * (xLabels.length - 1)) / xLabels.length;
+  const cellH = (rect.height - cellGap * (yLabels.length - 1)) / yLabels.length;
+  const resolvedRenderMode = _tigercatcore.resolveHeatmapRenderMode.call(void 0, cells.length, {
+    renderMode,
+    canvasThreshold
+  });
+  const shouldRenderCanvas = resolvedRenderMode === "canvas";
+  _react.useEffect.call(void 0, () => {
+    if (!shouldRenderCanvas) return;
+    const canvas = canvasRef.current;
+    const context = _optionalChain([canvas, 'optionalAccess', _3 => _3.getContext, 'call', _4 => _4("2d")]);
+    if (!canvas || !context) return;
+    context.clearRect(0, 0, rect.width, rect.height);
+    context.textAlign = "center";
+    context.textBaseline = "middle";
+    context.font = "10px sans-serif";
+    cells.forEach((cell, idx) => {
+      context.globalAlpha = _nullishCoalesce(_tigercatcore.getChartElementOpacity.call(void 0, idx, activeIndex, {
+        activeOpacity,
+        inactiveOpacity
+      }), () => ( 1));
+      context.fillStyle = cell.fill;
+      const radius = Math.max(0, Math.min(cellRadius, cell.w / 2, cell.h / 2));
+      if (radius > 0) {
+        context.beginPath();
+        context.moveTo(cell.x + radius, cell.y);
+        context.lineTo(cell.x + cell.w - radius, cell.y);
+        context.quadraticCurveTo(cell.x + cell.w, cell.y, cell.x + cell.w, cell.y + radius);
+        context.lineTo(cell.x + cell.w, cell.y + cell.h - radius);
+        context.quadraticCurveTo(
+          cell.x + cell.w,
+          cell.y + cell.h,
+          cell.x + cell.w - radius,
+          cell.y + cell.h
+        );
+        context.lineTo(cell.x + radius, cell.y + cell.h);
+        context.quadraticCurveTo(cell.x, cell.y + cell.h, cell.x, cell.y + cell.h - radius);
+        context.lineTo(cell.x, cell.y + radius);
+        context.quadraticCurveTo(cell.x, cell.y, cell.x + radius, cell.y);
+        context.closePath();
+        context.fill();
+      } else {
+        context.fillRect(cell.x, cell.y, cell.w, cell.h);
+      }
+      if (showValues) {
+        context.globalAlpha = 1;
+        context.fillStyle = "var(--tiger-text,#374151)";
+        context.fillText(
+          valueFormatter ? valueFormatter(cell.value) : `${cell.value}`,
+          cell.x + cell.w / 2,
+          cell.y + cell.h / 2
+        );
+      }
+    });
+    context.globalAlpha = 1;
+  }, [
+    shouldRenderCanvas,
+    cells,
+    rect.width,
+    rect.height,
+    activeIndex,
+    activeOpacity,
+    inactiveOpacity,
+    cellRadius,
+    showValues,
+    valueFormatter
+  ]);
+  const getCanvasPoint = _react.useCallback.call(void 0, (event) => {
+    const canvas = event.currentTarget;
+    const bounds = canvas.getBoundingClientRect();
+    const nativeEvent = event.nativeEvent;
+    const offsetX = typeof nativeEvent.offsetX === "number" && Number.isFinite(nativeEvent.offsetX) ? nativeEvent.offsetX : event.clientX - bounds.left;
+    const offsetY = typeof nativeEvent.offsetY === "number" && Number.isFinite(nativeEvent.offsetY) ? nativeEvent.offsetY : event.clientY - bounds.top;
+    const scaleX = bounds.width > 0 ? canvas.width / bounds.width : 1;
+    const scaleY = bounds.height > 0 ? canvas.height / bounds.height : 1;
+    return { x: offsetX * scaleX, y: offsetY * scaleY };
+  }, []);
+  const handleCanvasMouseMove = _react.useCallback.call(void 0, 
+    (event) => {
+      const point = getCanvasPoint(event);
+      const index = _tigercatcore.getHeatmapCellIndexAtPoint.call(void 0, cells, point.x, point.y);
+      if (index === null) {
+        handleMouseLeave();
+        return;
+      }
+      handleMouseEnter(index, event);
+      handleMouseMove(event);
+    },
+    [cells, getCanvasPoint, handleMouseEnter, handleMouseLeave, handleMouseMove]
+  );
+  const handleCanvasClick = _react.useCallback.call(void 0, 
+    (event) => {
+      const point = getCanvasPoint(event);
+      const index = _tigercatcore.getHeatmapCellIndexAtPoint.call(void 0, cells, point.x, point.y);
+      if (index !== null) {
+        handleClick(index);
+      }
+    },
+    [cells, getCanvasPoint, handleClick]
+  );
+  const chart = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    _chunkUKLVOR4Ejs.ChartCanvas,
+    {
+      width,
+      height,
+      padding,
+      title,
+      desc,
+      className: _tigercatcore.classNames.call(void 0, className),
+      children: [
+        xLabels.map((lbl, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "text",
+          {
+            x: i * (cellW + cellGap) + cellW / 2,
+            y: rect.height + 16,
+            className: _tigercatcore.chartAxisTickTextClasses,
+            textAnchor: "middle",
+            children: lbl
+          },
+          `x-${i}`
+        )),
+        yLabels.map((lbl, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "text",
+          {
+            x: -8,
+            y: i * (cellH + cellGap) + cellH / 2,
+            className: _tigercatcore.chartAxisTickTextClasses,
+            textAnchor: "end",
+            dominantBaseline: "middle",
+            children: lbl
+          },
+          `y-${i}`
+        )),
+        !shouldRenderCanvas && cells.map((cell, idx) => {
+          const opacity = _tigercatcore.getChartElementOpacity.call(void 0, idx, activeIndex, {
+            activeOpacity,
+            inactiveOpacity
+          });
+          return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _react2.default.Fragment, { children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "rect",
+              {
+                x: cell.x,
+                y: cell.y,
+                width: cell.w,
+                height: cell.h,
+                rx: cellRadius,
+                fill: cell.fill,
+                opacity,
+                className: _tigercatcore.classNames.call(void 0, interactive && "cursor-pointer"),
+                style: {
+                  transition: "opacity var(--tiger-motion-duration-base,0.2s) var(--tiger-motion-ease-decelerate,ease-out)",
+                  rx: `var(--tiger-chart-block-radius, ${cellRadius}px)`
+                },
+                onMouseEnter: (e) => handleMouseEnter(idx, e),
+                onMouseMove: handleMouseMove,
+                onMouseLeave: handleMouseLeave,
+                onClick: () => handleClick(idx)
+              }
+            ),
+            showValues && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "text",
+              {
+                x: cell.x + cell.w / 2,
+                y: cell.y + cell.h / 2,
+                className: "fill-[color:var(--tiger-text,#374151)] text-[10px]",
+                textAnchor: "middle",
+                dominantBaseline: "middle",
+                children: valueFormatter ? valueFormatter(cell.value) : `${cell.value}`
+              }
+            )
+          ] }, `cell-${idx}`);
+        })
+      ]
+    }
+  );
+  const tooltip = showTooltip && hoverable ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunkUVMQJOTXjs.ChartTooltip,
+    {
+      content: tooltipContent,
+      visible: resolvedHoveredIndex !== null && tooltipContent !== "",
+      x: tooltipPosition.x,
+      y: tooltipPosition.y
+    }
+  ) : null;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "inline-block relative", children: [
+    chart,
+    shouldRenderCanvas && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "canvas",
+      {
+        ref: canvasRef,
+        width: rect.width,
+        height: rect.height,
+        "data-heatmap-canvas": "true",
+        "data-heatmap-render-mode": resolvedRenderMode,
+        className: _tigercatcore.classNames.call(void 0, interactive && "cursor-pointer"),
+        style: {
+          position: "absolute",
+          left: `${rect.x}px`,
+          top: `${rect.y}px`,
+          width: `${rect.width}px`,
+          height: `${rect.height}px`,
+          pointerEvents: interactive ? "auto" : "none"
+        },
+        onMouseMove: interactive ? handleCanvasMouseMove : void 0,
+        onMouseLeave: interactive ? handleMouseLeave : void 0,
+        onClick: interactive ? handleCanvasClick : void 0
+      }
+    ),
+    tooltip
+  ] });
+};
+
+
+
+exports.HeatmapChart = HeatmapChart;

package/dist/chunk-HLS4CHWX.mjs

@@ -1,7 +1,6 @@
-import React from 'react';
-import { classNames, getTextClasses } from '@expcat/tigercat-core';
-
 // src/components/Text.tsx
+import React from "react";
+import { classNames, getTextClasses } from "@expcat/tigercat-core";
 var Text = React.memo(
   ({
     tag = "p",
@@ -26,4 +25,6 @@ var Text = React.memo(
 );
 Text.displayName = "Text";
 
-export { Text };
+export {
+  Text
+};

package/dist/chunk-HQ3QOT7H.js

@@ -1,33 +1,38 @@
-'use strict';
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/components/shared/icons.tsx
 
-var tigercatCore = require('@expcat/tigercat-core');
-var jsxRuntime = require('react/jsx-runtime');
 
-// src/components/shared/icons.tsx
-var StatusIcon = ({ path, className, ...svgProps }) => /* @__PURE__ */ jsxRuntime.jsx(
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var _jsxruntime = require('react/jsx-runtime');
+var StatusIcon = ({ path, className, ...svgProps }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
   "svg",
   {
     className,
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
-    viewBox: tigercatCore.icon24ViewBox,
+    viewBox: _tigercatcore.icon24ViewBox,
     stroke: "currentColor",
-    strokeWidth: tigercatCore.icon24StrokeWidth,
+    strokeWidth: _tigercatcore.icon24StrokeWidth,
     ...svgProps,
-    children: /* @__PURE__ */ jsxRuntime.jsx(
+    children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "path",
       {
-        strokeLinecap: tigercatCore.icon24PathStrokeLinecap,
-        strokeLinejoin: tigercatCore.icon24PathStrokeLinejoin,
+        strokeLinecap: _tigercatcore.icon24PathStrokeLinecap,
+        strokeLinejoin: _tigercatcore.icon24PathStrokeLinejoin,
         d: path
       }
     )
   }
 );
 var StatusIconWithLoading = ({ path, className, isLoading = false, spinnerClass = "" }) => {
-  const merged = tigercatCore.classNames(className, isLoading && spinnerClass);
-  return /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { path, className: merged });
+  const merged = _tigercatcore.classNames.call(void 0, className, isLoading && spinnerClass);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StatusIcon, { path, className: merged });
 };
 
-exports.StatusIcon = StatusIcon;
-exports.StatusIconWithLoading = StatusIconWithLoading;
+
+
+
+exports.StatusIcon = StatusIcon; exports.StatusIconWithLoading = StatusIconWithLoading;

package/dist/chunk-HR5GBE3P.js

@@ -0,0 +1,168 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); 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; }// src/components/FileManager.tsx
+var _react = require('react');
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var _jsxruntime = require('react/jsx-runtime');
+var FileManager = ({
+  files = [],
+  viewMode = "list",
+  selectedKeys = [],
+  multiple = false,
+  sortField = "name",
+  sortOrder = "asc",
+  currentPath = [],
+  showHidden = false,
+  draggable = false,
+  loading = false,
+  emptyText = "Empty folder",
+  searchable = false,
+  searchText = "",
+  className,
+  onSelect,
+  onOpen,
+  onNavigate,
+  onSelectedKeysChange,
+  onCurrentPathChange,
+  onSearchTextChange,
+  renderIcon
+}) => {
+  const [localSearch, setLocalSearch] = _react.useState.call(void 0, searchText);
+  const model = _react.useMemo.call(void 0, 
+    () => _tigercatcore.deriveFileManagerModel.call(void 0, {
+      files,
+      currentPath,
+      selectedKeys,
+      sortField,
+      sortOrder,
+      showHidden,
+      searchText: localSearch || searchText
+    }),
+    [files, currentPath, selectedKeys, sortField, sortOrder, showHidden, localSearch, searchText]
+  );
+  const containerClasses = _react.useMemo.call(void 0, () => _tigercatcore.getFileManagerContainerClasses.call(void 0, className), [className]);
+  const handleSelect = _react.useCallback.call(void 0, 
+    (item) => {
+      if (item.disabled) return;
+      _optionalChain([onSelect, 'optionalCall', _ => _(item)]);
+      const keys = _tigercatcore.toggleFileSelection.call(void 0, selectedKeys, item.key, multiple);
+      _optionalChain([onSelectedKeysChange, 'optionalCall', _2 => _2(keys)]);
+    },
+    [selectedKeys, multiple, onSelect, onSelectedKeysChange]
+  );
+  const handleOpen = _react.useCallback.call(void 0, 
+    (item) => {
+      const result = _tigercatcore.resolveFileOpen.call(void 0, item, currentPath);
+      if (!result) return;
+      if (result.type === "navigate") {
+        _optionalChain([onCurrentPathChange, 'optionalCall', _3 => _3(result.path)]);
+        _optionalChain([onNavigate, 'optionalCall', _4 => _4(result.path)]);
+      } else {
+        _optionalChain([onOpen, 'optionalCall', _5 => _5(result.item)]);
+      }
+    },
+    [currentPath, onOpen, onNavigate, onCurrentPathChange]
+  );
+  const navigateToBreadcrumb = _react.useCallback.call(void 0, 
+    (index) => {
+      const newPath = _tigercatcore.sliceBreadcrumbPath.call(void 0, currentPath, index);
+      _optionalChain([onCurrentPathChange, 'optionalCall', _6 => _6(newPath)]);
+      _optionalChain([onNavigate, 'optionalCall', _7 => _7(newPath)]);
+    },
+    [currentPath, onNavigate, onCurrentPathChange]
+  );
+  const breadcrumbItems = [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "span",
+      {
+        className: _tigercatcore.fileManagerBreadcrumbItemClasses,
+        onClick: () => navigateToBreadcrumb(0),
+        children: "Root"
+      },
+      "root"
+    ),
+    ...currentPath.flatMap((seg, i) => [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: _tigercatcore.fileManagerBreadcrumbSeparatorClasses, children: "/" }, `sep-${i}`),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "span",
+        {
+          className: _tigercatcore.fileManagerBreadcrumbItemClasses,
+          onClick: () => navigateToBreadcrumb(i + 1),
+          children: seg
+        },
+        `path-${i}`
+      )
+    ])
+  ];
+  const contentClass = viewMode === "grid" ? `${_tigercatcore.fileManagerContentClasses} grid grid-cols-4 gap-2` : _tigercatcore.fileManagerContentClasses;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _tigercatcore.classNames.call(void 0, containerClasses), children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _tigercatcore.fileManagerToolbarClasses, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "nav", { className: _tigercatcore.fileManagerBreadcrumbClasses, "aria-label": "File path", children: breadcrumbItems }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-1" }),
+      searchable && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "input",
+        {
+          type: "text",
+          className: _tigercatcore.fileManagerSearchClasses,
+          placeholder: "Search...",
+          value: localSearch,
+          onChange: (e) => {
+            setLocalSearch(e.target.value);
+            _optionalChain([onSearchTextChange, 'optionalCall', _8 => _8(e.target.value)]);
+          }
+        }
+      )
+    ] }),
+    model.processedItems.length > 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: contentClass, role: "listbox", "aria-multiselectable": multiple, children: model.processedItems.map((item, index) => {
+      const isSelected = model.selectedSet.has(item.key);
+      const itemClass = _tigercatcore.getFileItemClasses.call(void 0, viewMode, isSelected);
+      const dragItem = draggable && !item.disabled ? _tigercatcore.toFileDragItem.call(void 0, item, index) : void 0;
+      return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        "div",
+        {
+          className: itemClass,
+          role: "option",
+          "aria-selected": isSelected,
+          "data-disabled": item.disabled || void 0,
+          "data-drag-id": _optionalChain([dragItem, 'optionalAccess', _9 => _9.id]),
+          onClick: () => handleSelect(item),
+          onDoubleClick: () => handleOpen(item),
+          draggable: draggable && !item.disabled,
+          children: [
+            renderIcon ? renderIcon(item) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: _tigercatcore.fileManagerItemIconClasses, "aria-hidden": "true", children: item.type === "folder" ? "\u{1F4C1}" : "\u{1F4C4}" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: _tigercatcore.fileManagerItemNameClasses, children: item.name }),
+            viewMode === "list" && item.size !== void 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: _tigercatcore.fileManagerItemMetaClasses, children: _tigercatcore.formatFileSizeLabel.call(void 0, item.size) }),
+            viewMode === "list" && item.modified && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: _tigercatcore.fileManagerItemMetaClasses, children: item.modified })
+          ]
+        },
+        item.key
+      );
+    }) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.fileManagerEmptyClasses, children: emptyText }),
+    loading && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.fileManagerLoadingClasses, children: "Loading..." })
+  ] });
+};
+var FileManager_default = FileManager;
+
+
+
+
+exports.FileManager = FileManager; exports.FileManager_default = FileManager_default;