@camstack/ui-library 0.1.35 → 0.1.36

package/dist/index.cjs

@@ -1006,31 +1006,111 @@ function TooltipContent({ className, children, ...props }) {
 }
 
 // src/primitives/popover.tsx
+var import_react19 = require("react");
+
+// src/hooks/use-is-mobile.ts
 var import_react17 = require("react");
+var MOBILE_QUERY = "(max-width: 767px)";
+function subscribe(callback) {
+  const mql = window.matchMedia(MOBILE_QUERY);
+  mql.addEventListener("change", callback);
+  return () => mql.removeEventListener("change", callback);
+}
+function getSnapshot() {
+  return window.matchMedia(MOBILE_QUERY).matches;
+}
+function getServerSnapshot() {
+  return false;
+}
+function useIsMobile() {
+  return (0, import_react17.useSyncExternalStore)(subscribe, getSnapshot, getServerSnapshot);
+}
+
+// src/primitives/bottom-sheet.tsx
+var import_react18 = require("react");
+var import_lucide_react4 = require("lucide-react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
-var PopoverContext = (0, import_react17.createContext)(null);
+function BottomSheet({ open, onClose, title, children, className }) {
+  (0, import_react18.useEffect)(() => {
+    if (!open) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.body.style.overflow = "";
+    };
+  }, [open, onClose]);
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      "div",
+      {
+        className: cn(
+          "fixed inset-0 z-40 bg-black/50 transition-opacity duration-200",
+          open ? "opacity-100" : "pointer-events-none opacity-0"
+        ),
+        onClick: onClose,
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+      "div",
+      {
+        role: "dialog",
+        "aria-modal": "true",
+        className: cn(
+          "fixed inset-x-0 bottom-0 z-50 flex flex-col bg-background-elevated border-t border-border rounded-t-xl shadow-2xl transition-transform duration-200 ease-out",
+          "max-h-[80dvh]",
+          open ? "translate-y-0" : "translate-y-full",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "flex justify-center pt-2 pb-1", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "h-1 w-8 rounded-full bg-foreground-subtle/30" }) }),
+          title && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center justify-between px-4 pb-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-sm font-medium text-foreground", children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              "button",
+              {
+                onClick: onClose,
+                className: "p-1 rounded-md hover:bg-surface-hover text-foreground-muted transition-colors",
+                children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react4.X, { className: "h-4 w-4" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "flex-1 overflow-y-auto px-4 pb-4", children })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/primitives/popover.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var PopoverContext = (0, import_react19.createContext)(null);
 function usePopoverContext() {
-  const ctx = (0, import_react17.useContext)(PopoverContext);
+  const ctx = (0, import_react19.useContext)(PopoverContext);
   if (!ctx) throw new Error("Popover compound components must be used within <Popover>");
   return ctx;
 }
 function Popover({ children, open: controlledOpen, onOpenChange }) {
-  const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react17.useState)(false);
+  const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react19.useState)(false);
   const open = controlledOpen ?? uncontrolledOpen;
-  const triggerId = (0, import_react17.useId)();
-  const contentId = (0, import_react17.useId)();
-  const setOpen = (0, import_react17.useCallback)(
+  const triggerId = (0, import_react19.useId)();
+  const contentId = (0, import_react19.useId)();
+  const setOpen = (0, import_react19.useCallback)(
     (next) => {
       onOpenChange?.(next);
       if (controlledOpen === void 0) setUncontrolledOpen(next);
     },
     [controlledOpen, onOpenChange]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(PopoverContext.Provider, { value: { open, setOpen, triggerId, contentId }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "relative inline-block", children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(PopoverContext.Provider, { value: { open, setOpen, triggerId, contentId }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "relative inline-block", children }) });
 }
 function PopoverTrigger({ children, ...props }) {
   const { open, setOpen, triggerId, contentId } = usePopoverContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "button",
     {
       type: "button",
@@ -1046,9 +1126,10 @@ function PopoverTrigger({ children, ...props }) {
 }
 function PopoverContent({ className, children, ...props }) {
   const { open, setOpen, contentId, triggerId } = usePopoverContext();
-  const ref = (0, import_react17.useRef)(null);
-  (0, import_react17.useEffect)(() => {
-    if (!open) return;
+  const isMobile = useIsMobile();
+  const ref = (0, import_react19.useRef)(null);
+  (0, import_react19.useEffect)(() => {
+    if (!open || isMobile) return;
     const handler = (e) => {
       const el = ref.current;
       const trigger = document.getElementById(triggerId);
@@ -1065,9 +1146,12 @@ function PopoverContent({ className, children, ...props }) {
       document.removeEventListener("mousedown", handler);
       document.removeEventListener("keydown", escHandler);
     };
-  }, [open, setOpen, triggerId]);
+  }, [open, setOpen, triggerId, isMobile]);
   if (!open) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  if (isMobile) {
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(BottomSheet, { open, onClose: () => setOpen(false), children });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "div",
     {
       ref,
@@ -1085,11 +1169,11 @@ function PopoverContent({ className, children, ...props }) {
 }
 
 // src/primitives/tabs.tsx
-var import_react18 = require("react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var TabsContext = (0, import_react18.createContext)(null);
+var import_react20 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var TabsContext = (0, import_react20.createContext)(null);
 function useTabsContext() {
-  const ctx = (0, import_react18.useContext)(TabsContext);
+  const ctx = (0, import_react20.useContext)(TabsContext);
   if (!ctx) throw new Error("Tabs compound components must be used within <Tabs>");
   return ctx;
 }
@@ -1100,19 +1184,19 @@ function Tabs({
   className,
   ...props
 }) {
-  const [uncontrolledValue, setUncontrolledValue] = (0, import_react18.useState)(defaultValue);
+  const [uncontrolledValue, setUncontrolledValue] = (0, import_react20.useState)(defaultValue);
   const value = controlledValue ?? uncontrolledValue;
-  const setValue = (0, import_react18.useCallback)(
+  const setValue = (0, import_react20.useCallback)(
     (next) => {
       onValueChange?.(next);
       if (controlledValue === void 0) setUncontrolledValue(next);
     },
     [controlledValue, onValueChange]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TabsContext.Provider, { value: { value, setValue }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className, ...props }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TabsContext.Provider, { value: { value, setValue }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className, ...props }) });
 }
 function TabsList({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "div",
     {
       role: "tablist",
@@ -1125,7 +1209,7 @@ function TabsTrigger({ value, className, ...props }) {
   const { value: activeValue, setValue } = useTabsContext();
   const isActive = value === activeValue;
   const panelId = `tabpanel-${value}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "button",
     {
       type: "button",
@@ -1146,7 +1230,7 @@ function TabsTrigger({ value, className, ...props }) {
 function TabsContent({ value, className, ...props }) {
   const { value: activeValue } = useTabsContext();
   if (value !== activeValue) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "div",
     {
       role: "tabpanel",
@@ -1158,11 +1242,11 @@ function TabsContent({ value, className, ...props }) {
 }
 
 // src/primitives/scroll-area.tsx
-var import_react19 = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var ScrollArea = (0, import_react19.forwardRef)(
+var import_react21 = require("react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var ScrollArea = (0, import_react21.forwardRef)(
   ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "div",
       {
         ref,
@@ -1178,29 +1262,9 @@ var ScrollArea = (0, import_react19.forwardRef)(
 ScrollArea.displayName = "ScrollArea";
 
 // src/primitives/floating-panel.tsx
-var import_react21 = require("react");
-var import_lucide_react4 = require("lucide-react");
-
-// src/hooks/use-is-mobile.ts
-var import_react20 = require("react");
-var MOBILE_QUERY = "(max-width: 767px)";
-function subscribe(callback) {
-  const mql = window.matchMedia(MOBILE_QUERY);
-  mql.addEventListener("change", callback);
-  return () => mql.removeEventListener("change", callback);
-}
-function getSnapshot() {
-  return window.matchMedia(MOBILE_QUERY).matches;
-}
-function getServerSnapshot() {
-  return false;
-}
-function useIsMobile() {
-  return (0, import_react20.useSyncExternalStore)(subscribe, getSnapshot, getServerSnapshot);
-}
-
-// src/primitives/floating-panel.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_react22 = require("react");
+var import_lucide_react5 = require("lucide-react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function FloatingPanel({
   title,
   onClose,
@@ -1212,25 +1276,25 @@ function FloatingPanel({
   offsetIndex = 0,
   className
 }) {
-  const [pos, setPos] = (0, import_react21.useState)({ x: 80 + offsetIndex * 30, y: 80 + offsetIndex * 30 });
-  const [size, setSize] = (0, import_react21.useState)({ w: defaultWidth, h: defaultHeight });
-  const [minimized, setMinimized] = (0, import_react21.useState)(false);
-  const dragging = (0, import_react21.useRef)(false);
-  const resizing = (0, import_react21.useRef)(false);
-  const offset = (0, import_react21.useRef)({ x: 0, y: 0 });
+  const [pos, setPos] = (0, import_react22.useState)({ x: 80 + offsetIndex * 30, y: 80 + offsetIndex * 30 });
+  const [size, setSize] = (0, import_react22.useState)({ w: defaultWidth, h: defaultHeight });
+  const [minimized, setMinimized] = (0, import_react22.useState)(false);
+  const dragging = (0, import_react22.useRef)(false);
+  const resizing = (0, import_react22.useRef)(false);
+  const offset = (0, import_react22.useRef)({ x: 0, y: 0 });
   const isMobile = useIsMobile();
-  const onDragStart = (0, import_react21.useCallback)((e) => {
+  const onDragStart = (0, import_react22.useCallback)((e) => {
     e.preventDefault();
     dragging.current = true;
     offset.current = { x: e.clientX - pos.x, y: e.clientY - pos.y };
   }, [pos]);
-  const onResizeStart = (0, import_react21.useCallback)((e) => {
+  const onResizeStart = (0, import_react22.useCallback)((e) => {
     e.preventDefault();
     e.stopPropagation();
     resizing.current = true;
     offset.current = { x: e.clientX, y: e.clientY };
   }, []);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     const onMouseMove = (e) => {
       if (dragging.current) setPos({ x: e.clientX - offset.current.x, y: e.clientY - offset.current.y });
       if (resizing.current) {
@@ -1252,7 +1316,7 @@ function FloatingPanel({
     };
   }, [minWidth, minHeight]);
   if (isMobile) {
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
       "div",
       {
         className: cn(
@@ -1261,33 +1325,33 @@ function FloatingPanel({
         ),
         style: { maxHeight: "60dvh" },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center justify-between gap-2 px-3 py-2 border-b border-border shrink-0 bg-surface", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-[11px] font-medium truncate", children: title }),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-1 shrink-0", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center justify-between gap-2 px-3 py-2 border-b border-border shrink-0 bg-surface", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-[11px] font-medium truncate", children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-1 shrink-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                 "button",
                 {
                   onClick: () => setMinimized(!minimized),
                   className: "p-0.5 rounded hover:bg-surface-hover text-foreground-muted transition-colors",
-                  children: minimized ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react4.Maximize2, { size: 12 }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react4.Minimize2, { size: 12 })
+                  children: minimized ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react5.Maximize2, { size: 12 }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react5.Minimize2, { size: 12 })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                 "button",
                 {
                   onClick: onClose,
                   className: "p-0.5 rounded hover:bg-danger/20 text-foreground-muted hover:text-danger transition-colors",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react4.X, { size: 12 })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react5.X, { size: 12 })
                 }
               )
             ] })
           ] }),
-          !minimized && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex-1 min-h-0 overflow-y-auto", children })
+          !minimized && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex-1 min-h-0 overflow-y-auto", children })
         ]
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
     "div",
     {
       className: cn(
@@ -1296,42 +1360,42 @@ function FloatingPanel({
       ),
       style: { left: pos.x, top: pos.y, width: minimized ? 280 : size.w, height: minimized ? "auto" : size.h },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
           "div",
           {
             onMouseDown: onDragStart,
             className: "flex items-center justify-between gap-2 px-3 py-2 border-b border-border cursor-move select-none shrink-0 bg-surface",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-2 min-w-0", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react4.GripHorizontal, { size: 12, className: "text-foreground-subtle shrink-0" }),
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-[11px] font-medium truncate", children: title })
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-2 min-w-0", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react5.GripHorizontal, { size: 12, className: "text-foreground-subtle shrink-0" }),
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-[11px] font-medium truncate", children: title })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-1 shrink-0", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-1 shrink-0", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                   "button",
                   {
                     onClick: () => setMinimized(!minimized),
                     className: "p-0.5 rounded hover:bg-surface-hover text-foreground-muted transition-colors",
                     title: minimized ? "Restore" : "Minimize",
-                    children: minimized ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react4.Maximize2, { size: 12 }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react4.Minimize2, { size: 12 })
+                    children: minimized ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react5.Maximize2, { size: 12 }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react5.Minimize2, { size: 12 })
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                   "button",
                   {
                     onClick: onClose,
                     className: "p-0.5 rounded hover:bg-danger/20 text-foreground-muted hover:text-danger transition-colors",
                     title: "Close",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react4.X, { size: 12 })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react5.X, { size: 12 })
                   }
                 )
               ] })
             ]
           }
         ),
-        !minimized && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex-1 min-h-0 overflow-y-auto relative", children: [
+        !minimized && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex-1 min-h-0 overflow-y-auto relative", children: [
           children,
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             "div",
             {
               onMouseDown: onResizeStart,
@@ -1346,11 +1410,11 @@ function FloatingPanel({
 }
 
 // src/primitives/mobile-drawer.tsx
-var import_react22 = require("react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_react23 = require("react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function MobileDrawer({ open, onClose, children, className, width = "w-64" }) {
-  const drawerRef = (0, import_react22.useRef)(null);
-  (0, import_react22.useEffect)(() => {
+  const drawerRef = (0, import_react23.useRef)(null);
+  (0, import_react23.useEffect)(() => {
     if (!open) return;
     const handleKeyDown = (e) => {
       if (e.key === "Escape") onClose();
@@ -1362,8 +1426,8 @@ function MobileDrawer({ open, onClose, children, className, width = "w-64" }) {
       document.body.style.overflow = "";
     };
   }, [open, onClose]);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       "div",
       {
         className: cn(
@@ -1374,7 +1438,7 @@ function MobileDrawer({ open, onClose, children, className, width = "w-64" }) {
         "aria-hidden": "true"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       "div",
       {
         ref: drawerRef,
@@ -1392,66 +1456,6 @@ function MobileDrawer({ open, onClose, children, className, width = "w-64" }) {
   ] });
 }
 
-// src/primitives/bottom-sheet.tsx
-var import_react23 = require("react");
-var import_lucide_react5 = require("lucide-react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
-function BottomSheet({ open, onClose, title, children, className }) {
-  (0, import_react23.useEffect)(() => {
-    if (!open) return;
-    const handleKeyDown = (e) => {
-      if (e.key === "Escape") onClose();
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    document.body.style.overflow = "hidden";
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown);
-      document.body.style.overflow = "";
-    };
-  }, [open, onClose]);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-      "div",
-      {
-        className: cn(
-          "fixed inset-0 z-40 bg-black/50 transition-opacity duration-200",
-          open ? "opacity-100" : "pointer-events-none opacity-0"
-        ),
-        onClick: onClose,
-        "aria-hidden": "true"
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
-      "div",
-      {
-        role: "dialog",
-        "aria-modal": "true",
-        className: cn(
-          "fixed inset-x-0 bottom-0 z-50 flex flex-col bg-background-elevated border-t border-border rounded-t-xl shadow-2xl transition-transform duration-200 ease-out",
-          "max-h-[80dvh]",
-          open ? "translate-y-0" : "translate-y-full",
-          className
-        ),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex justify-center pt-2 pb-1", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "h-1 w-8 rounded-full bg-foreground-subtle/30" }) }),
-          title && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center justify-between px-4 pb-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-sm font-medium text-foreground", children: title }),
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-              "button",
-              {
-                onClick: onClose,
-                className: "p-1 rounded-md hover:bg-surface-hover text-foreground-muted transition-colors",
-                children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react5.X, { className: "h-4 w-4" })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex-1 overflow-y-auto px-4 pb-4", children })
-        ]
-      }
-    )
-  ] });
-}
-
 // src/composites/status-badge.tsx
 var import_jsx_runtime22 = require("react/jsx-runtime");
 var statusConfig = {
@@ -1707,12 +1711,79 @@ function CodeBlock({ children, maxHeight = 300, className }) {
 }
 
 // src/composites/filter-bar.tsx
+var import_react25 = require("react");
 var import_lucide_react8 = require("lucide-react");
 var import_jsx_runtime32 = require("react/jsx-runtime");
 function FilterBar({ filters, values, onChange, className }) {
+  const isMobile = useIsMobile();
+  const [sheetOpen, setSheetOpen] = (0, import_react25.useState)(false);
   const handleChange = (key, value) => {
     onChange({ ...values, [key]: value });
   };
+  const activeCount = Object.values(values).filter((v) => v !== void 0 && v !== "").length;
+  if (isMobile) {
+    const searchFilter = filters.find((f) => f.type === "search");
+    const hasNonSearchFilters = filters.some((f) => f.type !== "search");
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: cn("flex items-center gap-2", className), children: [
+      searchFilter && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        Input,
+        {
+          placeholder: searchFilter.placeholder ?? "Search...",
+          value: values[searchFilter.key] ?? "",
+          onChange: (e) => handleChange(searchFilter.key, e.target.value),
+          leftSlot: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react8.Search, { className: "h-3 w-3 text-foreground-subtle" }),
+          className: "flex-1"
+        }
+      ),
+      hasNonSearchFilters && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+          "button",
+          {
+            onClick: () => setSheetOpen(true),
+            className: "flex items-center gap-1.5 rounded-md border border-border px-2.5 py-1.5 text-xs text-foreground-muted hover:bg-surface-hover transition-colors shrink-0",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react8.SlidersHorizontal, { className: "h-3.5 w-3.5" }),
+              "Filters",
+              activeCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Badge, { variant: "info", className: "ml-1 text-[10px] px-1 py-0", children: activeCount })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(BottomSheet, { open: sheetOpen, onClose: () => setSheetOpen(false), title: "Filters", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex flex-col gap-3", children: filters.filter((f) => f.type !== "search").map((filter) => {
+          switch (filter.type) {
+            case "select":
+              return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("label", { className: "text-xs text-foreground-muted mb-1 block", children: filter.label }),
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                  Select,
+                  {
+                    options: filter.options,
+                    value: values[filter.key] ?? "",
+                    onChange: (e) => handleChange(filter.key, e.target.value),
+                    className: "w-full"
+                  }
+                )
+              ] }, filter.key);
+            case "badge-toggle":
+              return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex items-center gap-1 flex-wrap", children: filter.options.map((option) => {
+                const currentValue = values[filter.key];
+                const isActive = currentValue === option.value;
+                return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => handleChange(filter.key, isActive ? void 0 : option.value),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Badge, { variant: isActive ? "info" : "default", className: "cursor-pointer", children: option.label })
+                  },
+                  option.value
+                );
+              }) }, filter.key);
+            default:
+              return null;
+          }
+        }) }) })
+      ] })
+    ] });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: cn("flex items-center gap-2 flex-wrap", className), children: filters.map((filter) => {
     switch (filter.type) {
       case "search":
@@ -1746,18 +1817,8 @@ function FilterBar({ filters, values, onChange, className }) {
             "button",
             {
               type: "button",
-              onClick: () => handleChange(
-                filter.key,
-                isActive ? void 0 : option.value
-              ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-                Badge,
-                {
-                  variant: isActive ? "info" : "default",
-                  className: "cursor-pointer",
-                  children: option.label
-                }
-              )
+              onClick: () => handleChange(filter.key, isActive ? void 0 : option.value),
+              children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Badge, { variant: isActive ? "info" : "default", className: "cursor-pointer", children: option.label })
             },
             option.value
           );
@@ -1822,12 +1883,12 @@ function Sidebar({ logo, sections, footer, onNavigate, className }) {
 }
 
 // src/composites/app-shell/app-shell.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 var import_lucide_react9 = require("lucide-react");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 function AppShell({ sidebar, header, mobileLogo, mobileActions, children, className }) {
   const isMobile = useIsMobile();
-  const [drawerOpen, setDrawerOpen] = (0, import_react25.useState)(false);
+  const [drawerOpen, setDrawerOpen] = (0, import_react26.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: cn("flex h-screen", className), children: [
     !isMobile && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Sidebar, { ...sidebar, className: cn("w-44", sidebar.className) }),
     isMobile && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(MobileDrawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), width: "w-64", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
@@ -1875,7 +1936,7 @@ function AppShell({ sidebar, header, mobileLogo, mobileActions, children, classN
 }
 
 // src/composites/data-table/data-table.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 var import_react_table = require("@tanstack/react-table");
 
 // src/composites/data-table/data-table-header.tsx
@@ -2059,9 +2120,10 @@ function DataTable({
   selectable = false,
   compact = true,
   stickyHeader = false,
-  className
+  className,
+  mobileMode = "scroll"
 }) {
-  const columns = (0, import_react26.useMemo)(() => {
+  const columns = (0, import_react27.useMemo)(() => {
     if (!selectable) return userColumns;
     const selectColumn = {
       id: "__select",
@@ -2111,7 +2173,69 @@ function DataTable({
     pageCount: pagination ? Math.ceil(pagination.total / pagination.pageSize) : void 0
   });
   const hasActions = !!rowActions;
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: cn("overflow-auto", className), children: [
+  const isMobile = useIsMobile();
+  const showCards = isMobile && mobileMode === "cards";
+  if (showCards) {
+    const rows = table.getRowModel().rows;
+    if (loading) {
+      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: cn("space-y-2", className), children: Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "rounded-lg border border-border bg-surface p-3 space-y-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Skeleton, { className: "h-3 w-3/4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Skeleton, { className: "h-3 w-1/2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Skeleton, { className: "h-3 w-2/3" })
+      ] }, i)) });
+    }
+    if (rows.length === 0) {
+      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: cn("text-center py-8 text-xs text-foreground-muted", className), children: emptyState ?? "No data" });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: cn("space-y-2", className), children: [
+      rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+        "div",
+        {
+          className: cn(
+            "rounded-lg border border-border bg-surface p-3 space-y-1.5",
+            onRowClick && "cursor-pointer hover:bg-surface-hover transition-colors"
+          ),
+          onClick: onRowClick ? () => onRowClick(row.original) : void 0,
+          children: [
+            row.getVisibleCells().filter((cell) => cell.column.id !== "__select").map((cell) => {
+              const header = cell.column.columnDef.header;
+              const label = typeof header === "string" ? header : cell.column.id;
+              return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex items-baseline justify-between gap-2 text-xs", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "text-foreground-muted shrink-0", children: label }),
+                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "text-foreground text-right truncate", children: (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()) })
+              ] }, cell.id);
+            }),
+            rowActions && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "flex items-center gap-1 pt-1 border-t border-border mt-1.5", children: rowActions(row.original).map((action, i) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+              "button",
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  action.onClick();
+                },
+                className: cn(
+                  "text-[11px] px-2 py-1 rounded-md transition-colors",
+                  action.variant === "danger" ? "text-danger hover:bg-danger/10" : "text-foreground-muted hover:bg-surface-hover"
+                ),
+                children: action.label
+              },
+              i
+            )) })
+          ]
+        },
+        row.id
+      )),
+      pagination && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        DataTablePagination,
+        {
+          page: pagination.page,
+          pageSize: pagination.pageSize,
+          total: pagination.total,
+          onPaginationChange
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: cn("overflow-x-auto", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("table", { className: "w-full border-collapse", children: [
       /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         DataTableHeader,
@@ -2263,7 +2387,7 @@ function DeviceGrid({
 }
 
 // src/composites/pipeline-step.tsx
-var import_react27 = require("react");
+var import_react28 = require("react");
 var import_lucide_react13 = require("lucide-react");
 var import_jsx_runtime42 = require("react/jsx-runtime");
 var ADDON_COLORS = {
@@ -2341,7 +2465,7 @@ function PipelineStep({
   onDelete,
   readOnly = false
 }) {
-  const [expanded, setExpanded] = (0, import_react27.useState)(false);
+  const [expanded, setExpanded] = (0, import_react28.useState)(false);
   const color = borderColor(step.addonId, step.slot);
   const backends = backendsForRuntime(step.runtime, capabilities, schema);
   const rtOptions = runtimeOptions(capabilities);
@@ -2529,7 +2653,7 @@ function PipelineRuntimeSelector({ options, value, onChange }) {
 }
 
 // src/composites/pipeline-builder.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 var import_lucide_react15 = require("lucide-react");
 
 // src/lib/validate-template.ts
@@ -2625,9 +2749,9 @@ function PipelineBuilder({
   readOnly = false,
   excludeAddons = []
 }) {
-  const excluded = (0, import_react28.useMemo)(() => new Set(excludeAddons), [excludeAddons]);
-  const schemaMap = (0, import_react28.useMemo)(() => buildSchemaMap(schema), [schema]);
-  const [warnings, setWarnings] = (0, import_react28.useState)([]);
+  const excluded = (0, import_react29.useMemo)(() => new Set(excludeAddons), [excludeAddons]);
+  const schemaMap = (0, import_react29.useMemo)(() => buildSchemaMap(schema), [schema]);
+  const [warnings, setWarnings] = (0, import_react29.useState)([]);
   const bestPlatformScore = capabilities.platformScores?.find((s) => s.available);
   const hasPython = capabilities.runtimes.python.available && capabilities.runtimes.python.backends.some((b) => b.available);
   const defaultRuntime = bestPlatformScore?.runtime ?? (hasPython ? "python" : "node");
@@ -2972,7 +3096,7 @@ function getClassColor(className, customColors) {
 }
 
 // src/composites/detection-canvas.tsx
-var import_react29 = require("react");
+var import_react30 = require("react");
 var import_jsx_runtime45 = require("react/jsx-runtime");
 var DEFAULT_CLASS_COLORS = CLASS_COLORS;
 function DetectionCanvas({
@@ -3068,7 +3192,7 @@ function BoundingBox({
   const labelCount = 1 + (detection.labelsData?.length ?? 0);
   const labelHeightPx = labelCount * 16 + 4;
   const topPct = y1 / imageHeight * 100;
-  const containerRef = (0, import_react29.useRef)(null);
+  const containerRef = (0, import_react30.useRef)(null);
   const showBelow = topPct < labelHeightPx / imageHeight * 100 * 1.5;
   const labelsElement = /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
     "div",
@@ -3134,8 +3258,8 @@ function MaskOverlay({
   imageHeight,
   color
 }) {
-  const canvasRef = (0, import_react29.useRef)(null);
-  (0, import_react29.useEffect)(() => {
+  const canvasRef = (0, import_react30.useRef)(null);
+  (0, import_react30.useEffect)(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
     const ctx = canvas.getContext("2d");
@@ -3589,16 +3713,16 @@ function InferenceConfigSelector({
 }
 
 // src/composites/mount-addon-page.tsx
-var import_react32 = require("react");
+var import_react33 = require("react");
 var import_client2 = require("react-dom/client");
 
 // src/composites/dev-shell.tsx
-var import_react31 = require("react");
+var import_react32 = require("react");
 var import_client = require("@trpc/client");
 var import_superjson = __toESM(require("superjson"), 1);
 
 // src/composites/login-form.tsx
-var import_react30 = require("react");
+var import_react31 = require("react");
 var import_jsx_runtime50 = require("react/jsx-runtime");
 function EyeIcon({ className }) {
   return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
@@ -3663,11 +3787,11 @@ function LoginForm({
   error: externalError,
   className
 }) {
-  const [username, setUsername] = (0, import_react30.useState)("");
-  const [password, setPassword] = (0, import_react30.useState)("");
-  const [showPassword, setShowPassword] = (0, import_react30.useState)(false);
-  const [submitting, setSubmitting] = (0, import_react30.useState)(false);
-  const [internalError, setInternalError] = (0, import_react30.useState)(null);
+  const [username, setUsername] = (0, import_react31.useState)("");
+  const [password, setPassword] = (0, import_react31.useState)("");
+  const [showPassword, setShowPassword] = (0, import_react31.useState)(false);
+  const [submitting, setSubmitting] = (0, import_react31.useState)(false);
+  const [internalError, setInternalError] = (0, import_react31.useState)(null);
   const error = externalError ?? internalError;
   const handleSubmit = async (e) => {
     e.preventDefault();
@@ -3763,9 +3887,9 @@ function LoginForm({
 // src/composites/dev-shell.tsx
 var import_jsx_runtime51 = require("react/jsx-runtime");
 var STORAGE_KEY = "camstack_dev_token";
-var DevShellContext = (0, import_react31.createContext)(null);
+var DevShellContext = (0, import_react32.createContext)(null);
 function useDevShell() {
-  const ctx = (0, import_react31.useContext)(DevShellContext);
+  const ctx = (0, import_react32.useContext)(DevShellContext);
   if (!ctx) {
     throw new Error("useDevShell must be used within a DevShell");
   }
@@ -3825,7 +3949,7 @@ function DevShellInner({
   onLogout
 }) {
   const theme = useThemeMode();
-  const trpc = (0, import_react31.useMemo)(
+  const trpc = (0, import_react32.useMemo)(
     () => {
       const wsUrl = serverUrl.replace(/^http/, "ws") + "/trpc";
       const wsClient = (0, import_client.createWSClient)({
@@ -3848,7 +3972,7 @@ function DevShellInner({
     },
     [serverUrl, token]
   );
-  const contextValue = (0, import_react31.useMemo)(
+  const contextValue = (0, import_react32.useMemo)(
     () => ({ trpc, token, logout: onLogout }),
     [trpc, token, onLogout]
   );
@@ -3892,8 +4016,8 @@ function DevShell({
   serverUrl = "https://localhost:4443",
   title
 }) {
-  const [token, setToken] = (0, import_react31.useState)(getStoredToken);
-  const handleLogin = (0, import_react31.useCallback)(
+  const [token, setToken] = (0, import_react32.useState)(getStoredToken);
+  const handleLogin = (0, import_react32.useCallback)(
     async (username, password) => {
       const anonClient = (0, import_client.createTRPCClient)({
         links: [
@@ -3910,7 +4034,7 @@ function DevShell({
     },
     [serverUrl]
   );
-  const handleLogout = (0, import_react31.useCallback)(() => {
+  const handleLogout = (0, import_react32.useCallback)(() => {
     localStorage.removeItem(STORAGE_KEY);
     setToken(null);
   }, []);
@@ -3942,10 +4066,10 @@ function mountAddonPage(PageComponent, options = {}) {
     return;
   }
   (0, import_client2.createRoot)(root).render(
-    (0, import_react32.createElement)(DevShell, {
+    (0, import_react33.createElement)(DevShell, {
       serverUrl,
       title,
-      children: ({ trpc, theme }) => (0, import_react32.createElement)(PageComponent, {
+      children: ({ trpc, theme }) => (0, import_react33.createElement)(PageComponent, {
         trpc,
         theme: { isDark: theme.resolvedMode === "dark" },
         navigate: (path) => {