@12-apps/ui 6.11.0 → 6.11.1

package/dist/chunk-C2PB3NUO.js

@@ -0,0 +1,210 @@
+import {
+  DashboardAction,
+  DashboardExport,
+  DashboardFilterToggle,
+  DashboardInfo,
+  DashboardSettings,
+  DashboardSpacer
+} from "./chunk-6A2SQM5W.js";
+import {
+  DashboardContext,
+  useDashboardContext
+} from "./chunk-CUMSPE6B.js";
+
+// src/components/layout/Dashboard/Dashboard.tsx
+import ExpandLessIcon from "@mui/icons-material/ExpandLess";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import FilterIcon from "@mui/icons-material/FilterListRounded";
+import NavigateNextIcon from "@mui/icons-material/NavigateNext";
+import {
+  Box,
+  Breadcrumbs as MuiBreadcrumbs,
+  Button,
+  Collapse,
+  Link as MuiLink,
+  Typography
+} from "@mui/material";
+import { styled } from "@mui/material";
+import React, { useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SLOT_ORDER = ["breadcrumb", "header", "filters", "body"];
+function markDashboardSlot(component, slot) {
+  component.dashboardSlot = slot;
+  return component;
+}
+var Root = styled(Box)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing(2),
+  width: "100%"
+}));
+function slotRank(node) {
+  if (React.isValidElement(node)) {
+    const slot = node.type.dashboardSlot;
+    if (slot) {
+      const rank = SLOT_ORDER.indexOf(slot);
+      if (rank >= 0) {
+        return rank;
+      }
+    }
+  }
+  return SLOT_ORDER.length;
+}
+var Dashboard = ({
+  children,
+  defaultFiltersVisible = true,
+  activeFilterCount = 0,
+  testIdPrefix = "dashboard",
+  className
+}) => {
+  const [filtersVisible, setFiltersVisible] = useState(defaultFiltersVisible);
+  const [moreFiltersOpen, setMoreFiltersOpen] = useState(false);
+  const value = useMemo(
+    () => ({
+      filtersVisible,
+      toggleFilters: () => setFiltersVisible((v) => !v),
+      moreFiltersOpen,
+      toggleMoreFilters: () => setMoreFiltersOpen((v) => !v),
+      activeFilterCount,
+      testIdPrefix
+    }),
+    [filtersVisible, moreFiltersOpen, activeFilterCount, testIdPrefix]
+  );
+  const ordered = useMemo(() => {
+    const arr = React.Children.toArray(children);
+    return arr.map((node, index) => ({ node, index, rank: slotRank(node) })).sort((a, b) => a.rank === b.rank ? a.index - b.index : a.rank - b.rank).map((entry) => entry.node);
+  }, [children]);
+  return /* @__PURE__ */ jsx(DashboardContext.Provider, { value, children: /* @__PURE__ */ jsx(Root, { className, "data-testid": testIdPrefix, children: ordered }) });
+};
+Dashboard.displayName = "Dashboard";
+var DashboardBreadcrumb = ({
+  items,
+  renderLink,
+  className
+}) => {
+  const { testIdPrefix } = useDashboardContext();
+  return /* @__PURE__ */ jsx(
+    MuiBreadcrumbs,
+    {
+      separator: /* @__PURE__ */ jsx(NavigateNextIcon, { fontSize: "small" }),
+      className,
+      "aria-label": "breadcrumb",
+      "data-testid": `${testIdPrefix}-breadcrumb`,
+      sx: { fontSize: "0.875rem", color: "text.secondary" },
+      children: items.map((item, index) => {
+        const isLast = index === items.length - 1;
+        if (isLast || !item.href) {
+          return /* @__PURE__ */ jsx(
+            Typography,
+            {
+              component: "span",
+              sx: { fontSize: "0.875rem", color: isLast ? "text.primary" : "text.secondary" },
+              "aria-current": isLast ? "page" : void 0,
+              children: item.label
+            },
+            `${item.label}-${index}`
+          );
+        }
+        const linkContent = item.label;
+        if (renderLink) {
+          return /* @__PURE__ */ jsx(React.Fragment, { children: renderLink(item, linkContent) }, `${item.label}-${index}`);
+        }
+        return /* @__PURE__ */ jsx(
+          MuiLink,
+          {
+            href: item.href,
+            underline: "hover",
+            color: "inherit",
+            sx: { fontSize: "0.875rem" },
+            children: linkContent
+          },
+          `${item.label}-${index}`
+        );
+      })
+    }
+  );
+};
+DashboardBreadcrumb.displayName = "Dashboard.Breadcrumb";
+DashboardBreadcrumb.dashboardSlot = "breadcrumb";
+var DashboardHeader = ({ title, children, className }) => {
+  const { testIdPrefix } = useDashboardContext();
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className,
+      "data-testid": `${testIdPrefix}-header`,
+      sx: { display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap", minHeight: 40 },
+      children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "h5", component: "h1", sx: { fontWeight: 600, mr: 0.5 }, children: title }),
+        children
+      ]
+    }
+  );
+};
+DashboardHeader.displayName = "Dashboard.Header";
+DashboardHeader.dashboardSlot = "header";
+var DashboardFilters = ({ children, className }) => {
+  const { filtersVisible, testIdPrefix } = useDashboardContext();
+  return /* @__PURE__ */ jsx(Collapse, { in: filtersVisible, unmountOnExit: true, "data-testid": `${testIdPrefix}-filters`, children: /* @__PURE__ */ jsx(
+    Box,
+    {
+      className,
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 1.5,
+        p: 2,
+        borderRadius: 1,
+        border: 1,
+        borderColor: "divider",
+        bgcolor: "action.hover"
+      },
+      children
+    }
+  ) });
+};
+DashboardFilters.displayName = "Dashboard.Filters";
+DashboardFilters.dashboardSlot = "filters";
+var DashboardMoreFilters = ({ children, label = "More filters" }) => {
+  const { moreFiltersOpen, toggleMoreFilters, testIdPrefix } = useDashboardContext();
+  return /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "text",
+        size: "small",
+        startIcon: /* @__PURE__ */ jsx(FilterIcon, { fontSize: "small" }),
+        endIcon: moreFiltersOpen ? /* @__PURE__ */ jsx(ExpandLessIcon, { fontSize: "small" }) : /* @__PURE__ */ jsx(ExpandMoreIcon, { fontSize: "small" }),
+        onClick: toggleMoreFilters,
+        "aria-expanded": moreFiltersOpen,
+        "data-testid": `${testIdPrefix}-more-filters-toggle`,
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsx(Collapse, { in: moreFiltersOpen, unmountOnExit: true, "data-testid": `${testIdPrefix}-more-filters-panel`, children: /* @__PURE__ */ jsx(Box, { sx: { mt: 1.5, p: 2, borderRadius: 1, border: 1, borderColor: "divider", bgcolor: "background.paper" }, children }) })
+  ] });
+};
+DashboardMoreFilters.displayName = "Dashboard.MoreFilters";
+var DashboardBody = ({ children, className }) => {
+  const { testIdPrefix } = useDashboardContext();
+  return /* @__PURE__ */ jsx(Box, { className, "data-testid": `${testIdPrefix}-body`, children });
+};
+DashboardBody.displayName = "Dashboard.Body";
+DashboardBody.dashboardSlot = "body";
+Dashboard.Breadcrumb = DashboardBreadcrumb;
+Dashboard.Header = DashboardHeader;
+Dashboard.Spacer = DashboardSpacer;
+Dashboard.Info = DashboardInfo;
+Dashboard.FilterToggle = DashboardFilterToggle;
+Dashboard.Settings = DashboardSettings;
+Dashboard.Export = DashboardExport;
+Dashboard.Action = DashboardAction;
+Dashboard.Filters = DashboardFilters;
+Dashboard.MoreFilters = DashboardMoreFilters;
+Dashboard.Body = DashboardBody;
+
+export {
+  markDashboardSlot,
+  Dashboard
+};
+//# sourceMappingURL=chunk-C2PB3NUO.js.map

package/dist/chunk-C2PB3NUO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Dashboard/Dashboard.tsx"],"sourcesContent":["'use client';\n\nimport ExpandLessIcon from '@mui/icons-material/ExpandLess';\nimport ExpandMoreIcon from '@mui/icons-material/ExpandMore';\nimport FilterIcon from '@mui/icons-material/FilterListRounded';\nimport NavigateNextIcon from '@mui/icons-material/NavigateNext';\nimport {\n  Box,\n  Breadcrumbs as MuiBreadcrumbs,\n  Button,\n  Collapse,\n  Link as MuiLink,\n  Typography,\n} from '@mui/material';\nimport { styled } from '@mui/material';\nimport React, { useMemo, useState } from 'react';\n\nimport { DashboardContext, useDashboardContext } from './DashboardContext';\nimport {\n  DashboardAction,\n  DashboardExport,\n  DashboardFilterToggle,\n  DashboardInfo,\n  DashboardSettings,\n  DashboardSpacer,\n} from './DashboardParts';\nimport type {\n  DashboardBodyProps,\n  DashboardBreadcrumbProps,\n  DashboardFiltersProps,\n  DashboardHeaderProps,\n  DashboardMoreFiltersProps,\n  DashboardProps,\n} from './Dashboard.types';\n\n/**\n * Ordered slot keys. The root reorders composed children into this sequence so\n * authoring order in JSX never matters — a `<Dashboard.Filters>` placed above\n * a `<Dashboard.Header>` still renders below it.\n */\nconst SLOT_ORDER = ['breadcrumb', 'header', 'filters', 'body'] as const;\n/** A slot a component can occupy in the canonical Dashboard order. */\nexport type DashboardSlot = (typeof SLOT_ORDER)[number];\n\n/** Marker attached to each sub-component so the root can rank it by slot. */\ntype SlottedComponent = { dashboardSlot?: DashboardSlot };\n\n/**\n * Tag a component with the Dashboard slot it occupies so the root ranks it in\n * canonical order. The root inspects only its DIRECT children's `type`, so a\n * page that wraps a `<Dashboard.Header>` (or any part) in its own component MUST\n * mark that wrapper — otherwise it counts as an unrecognised child and sinks\n * below the body. Returns the component for convenient inline use.\n *\n * @example\n * ```tsx\n * function ProductsHeader(props) {\n *   return <Dashboard.Header title=\"Products\">{/* … *\\/}</Dashboard.Header>;\n * }\n * markDashboardSlot(ProductsHeader, 'header');\n * ```\n */\nexport function markDashboardSlot<T>(component: T, slot: DashboardSlot): T {\n  (component as SlottedComponent).dashboardSlot = slot;\n  return component;\n}\n\nconst Root = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(2),\n  width: '100%',\n}));\n\nfunction slotRank(node: React.ReactNode): number {\n  if (React.isValidElement(node)) {\n    const slot = (node.type as SlottedComponent).dashboardSlot;\n    if (slot) {\n      const rank = SLOT_ORDER.indexOf(slot);\n      if (rank >= 0) {\n        return rank;\n      }\n    }\n  }\n  // Unknown / arbitrary children keep their relative position after the\n  // recognised slots.\n  return SLOT_ORDER.length;\n}\n\n/**\n * Composable page shell. `<Dashboard>` provides shared state through context\n * and renders whichever sub-components you compose — nothing is implied. Drop\n * in only the parts you need; omit `<Dashboard.Filters>` and there is simply no\n * filter UI.\n *\n * @example\n * ```tsx\n * <Dashboard activeFilterCount={2}>\n *   <Dashboard.Breadcrumb items={[{ label: 'Admin', href: '/admin' }, { label: 'Products' }]} />\n *   <Dashboard.Header title=\"Products\">\n *     <Dashboard.Info>What this page does…</Dashboard.Info>\n *     <Dashboard.FilterToggle />\n *     <Dashboard.Settings>In development</Dashboard.Settings>\n *     <Dashboard.Spacer />\n *     <Dashboard.Export onExport={handleExport} />\n *     <Dashboard.Action><Button variant=\"contained\">New product</Button></Dashboard.Action>\n *   </Dashboard.Header>\n *   <Dashboard.Filters>{/* search + pills *\\/}</Dashboard.Filters>\n *   <Dashboard.Body>{table}</Dashboard.Body>\n * </Dashboard>\n * ```\n */\nexport const Dashboard = ({\n  children,\n  defaultFiltersVisible = true,\n  activeFilterCount = 0,\n  testIdPrefix = 'dashboard',\n  className,\n}: DashboardProps): React.JSX.Element => {\n  const [filtersVisible, setFiltersVisible] = useState(defaultFiltersVisible);\n  const [moreFiltersOpen, setMoreFiltersOpen] = useState(false);\n\n  const value = useMemo(\n    () => ({\n      filtersVisible,\n      toggleFilters: () => setFiltersVisible((v) => !v),\n      moreFiltersOpen,\n      toggleMoreFilters: () => setMoreFiltersOpen((v) => !v),\n      activeFilterCount,\n      testIdPrefix,\n    }),\n    [filtersVisible, moreFiltersOpen, activeFilterCount, testIdPrefix],\n  );\n\n  // Stable sort recognised slots into canonical order, preserving the original\n  // order of anything unrecognised.\n  const ordered = useMemo(() => {\n    const arr = React.Children.toArray(children);\n    return arr\n      .map((node, index) => ({ node, index, rank: slotRank(node) }))\n      .sort((a, b) => (a.rank === b.rank ? a.index - b.index : a.rank - b.rank))\n      .map((entry) => entry.node);\n  }, [children]);\n\n  return (\n    <DashboardContext.Provider value={value}>\n      <Root className={className} data-testid={testIdPrefix}>\n        {ordered}\n      </Root>\n    </DashboardContext.Provider>\n  );\n};\n\nDashboard.displayName = 'Dashboard';\n\n/* -------------------------------------------------------------------------- */\n/* Breadcrumb                                                                 */\n/* -------------------------------------------------------------------------- */\n\nconst DashboardBreadcrumb = ({\n  items,\n  renderLink,\n  className,\n}: DashboardBreadcrumbProps): React.JSX.Element => {\n  const { testIdPrefix } = useDashboardContext();\n  return (\n    <MuiBreadcrumbs\n      separator={<NavigateNextIcon fontSize=\"small\" />}\n      className={className}\n      aria-label=\"breadcrumb\"\n      data-testid={`${testIdPrefix}-breadcrumb`}\n      sx={{ fontSize: '0.875rem', color: 'text.secondary' }}\n    >\n      {items.map((item, index) => {\n        const isLast = index === items.length - 1;\n        if (isLast || !item.href) {\n          return (\n            <Typography\n              key={`${item.label}-${index}`}\n              component=\"span\"\n              sx={{ fontSize: '0.875rem', color: isLast ? 'text.primary' : 'text.secondary' }}\n              aria-current={isLast ? 'page' : undefined}\n            >\n              {item.label}\n            </Typography>\n          );\n        }\n        const linkContent = item.label;\n        if (renderLink) {\n          return <React.Fragment key={`${item.label}-${index}`}>{renderLink(item, linkContent)}</React.Fragment>;\n        }\n        return (\n          <MuiLink\n            key={`${item.label}-${index}`}\n            href={item.href}\n            underline=\"hover\"\n            color=\"inherit\"\n            sx={{ fontSize: '0.875rem' }}\n          >\n            {linkContent}\n          </MuiLink>\n        );\n      })}\n    </MuiBreadcrumbs>\n  );\n};\nDashboardBreadcrumb.displayName = 'Dashboard.Breadcrumb';\n(DashboardBreadcrumb as SlottedComponent).dashboardSlot = 'breadcrumb';\n\n/* -------------------------------------------------------------------------- */\n/* Header + action parts                                                      */\n/* -------------------------------------------------------------------------- */\n\nconst DashboardHeader = ({ title, children, className }: DashboardHeaderProps): React.JSX.Element => {\n  const { testIdPrefix } = useDashboardContext();\n  return (\n    <Box\n      className={className}\n      data-testid={`${testIdPrefix}-header`}\n      sx={{ display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'wrap', minHeight: 40 }}\n    >\n      <Typography variant=\"h5\" component=\"h1\" sx={{ fontWeight: 600, mr: 0.5 }}>\n        {title}\n      </Typography>\n      {children}\n    </Box>\n  );\n};\nDashboardHeader.displayName = 'Dashboard.Header';\n(DashboardHeader as SlottedComponent).dashboardSlot = 'header';\n\n/** Flexible spacer — everything composed after it is pushed to the right. */\n/* -------------------------------------------------------------------------- */\n/* Filters                                                                    */\n/* -------------------------------------------------------------------------- */\n\nconst DashboardFilters = ({ children, className }: DashboardFiltersProps): React.JSX.Element => {\n  const { filtersVisible, testIdPrefix } = useDashboardContext();\n  return (\n    <Collapse in={filtersVisible} unmountOnExit data-testid={`${testIdPrefix}-filters`}>\n      <Box\n        className={className}\n        sx={{\n          display: 'flex',\n          flexDirection: 'column',\n          gap: 1.5,\n          p: 2,\n          borderRadius: 1,\n          border: 1,\n          borderColor: 'divider',\n          bgcolor: 'action.hover',\n        }}\n      >\n        {children}\n      </Box>\n    </Collapse>\n  );\n};\nDashboardFilters.displayName = 'Dashboard.Filters';\n(DashboardFilters as SlottedComponent).dashboardSlot = 'filters';\n\nconst DashboardMoreFilters = ({ children, label = 'More filters' }: DashboardMoreFiltersProps): React.JSX.Element => {\n  const { moreFiltersOpen, toggleMoreFilters, testIdPrefix } = useDashboardContext();\n  return (\n    <Box>\n      <Button\n        variant=\"text\"\n        size=\"small\"\n        startIcon={<FilterIcon fontSize=\"small\" />}\n        endIcon={moreFiltersOpen ? <ExpandLessIcon fontSize=\"small\" /> : <ExpandMoreIcon fontSize=\"small\" />}\n        onClick={toggleMoreFilters}\n        aria-expanded={moreFiltersOpen}\n        data-testid={`${testIdPrefix}-more-filters-toggle`}\n      >\n        {label}\n      </Button>\n      <Collapse in={moreFiltersOpen} unmountOnExit data-testid={`${testIdPrefix}-more-filters-panel`}>\n        <Box sx={{ mt: 1.5, p: 2, borderRadius: 1, border: 1, borderColor: 'divider', bgcolor: 'background.paper' }}>\n          {children}\n        </Box>\n      </Collapse>\n    </Box>\n  );\n};\nDashboardMoreFilters.displayName = 'Dashboard.MoreFilters';\n\n/* -------------------------------------------------------------------------- */\n/* Body                                                                       */\n/* -------------------------------------------------------------------------- */\n\nconst DashboardBody = ({ children, className }: DashboardBodyProps): React.JSX.Element => {\n  const { testIdPrefix } = useDashboardContext();\n  return (\n    <Box className={className} data-testid={`${testIdPrefix}-body`}>\n      {children}\n    </Box>\n  );\n};\nDashboardBody.displayName = 'Dashboard.Body';\n(DashboardBody as SlottedComponent).dashboardSlot = 'body';\n\n/* -------------------------------------------------------------------------- */\n/* Attach sub-components as dot-notation parts                                */\n/* -------------------------------------------------------------------------- */\n\nDashboard.Breadcrumb = DashboardBreadcrumb;\nDashboard.Header = DashboardHeader;\nDashboard.Spacer = DashboardSpacer;\nDashboard.Info = DashboardInfo;\nDashboard.FilterToggle = DashboardFilterToggle;\nDashboard.Settings = DashboardSettings;\nDashboard.Export = DashboardExport;\nDashboard.Action = DashboardAction;\nDashboard.Filters = DashboardFilters;\nDashboard.MoreFilters = DashboardMoreFilters;\nDashboard.Body = DashboardBody;\n"],"mappings":"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","names":[]}

package/dist/chunk-C3UKR3NT.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-C3UKR3NT.js.map

package/dist/chunk-C3UKR3NT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-C3ZI3AVR.js

@@ -0,0 +1,123 @@
+// src/components/layout/Sidebar/Sidebar.tsx
+import { alpha, Box, useTheme } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+var Sidebar = ({
+  children,
+  variant = "fixed",
+  open = true,
+  onToggle: _onToggle,
+  width = 280,
+  collapsedWidth = 64,
+  position = "left",
+  className,
+  dataTestId = "sidebar",
+  ...rest
+}) => {
+  void _onToggle;
+  const theme = useTheme();
+  const isCollapsed = variant === "collapsible" && !open;
+  const currentWidth = isCollapsed ? collapsedWidth : width;
+  const getVariantStyles = () => {
+    switch (variant) {
+      case "floating":
+        return {
+          position: "fixed",
+          top: theme.spacing(2),
+          bottom: theme.spacing(2),
+          [position]: theme.spacing(2),
+          borderRadius: theme.spacing(2),
+          boxShadow: theme.shadows[8],
+          zIndex: theme.zIndex.drawer
+        };
+      case "glass":
+        return {
+          backgroundColor: alpha(theme.palette.background.paper, 0.1),
+          backdropFilter: "blur(20px)",
+          border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`,
+          boxShadow: `0 8px 32px ${alpha(theme.palette.common.black, 0.1)}`
+        };
+      case "collapsible":
+        return {
+          transition: theme.transitions.create("width", {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.leavingScreen
+          })
+        };
+      default:
+        return {
+          backgroundColor: theme.palette.background.paper,
+          borderRight: `1px solid ${theme.palette.divider}`
+        };
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      className,
+      "data-testid": dataTestId,
+      ...rest,
+      sx: {
+        width: currentWidth,
+        height: "100vh",
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden",
+        ...getVariantStyles()
+      },
+      children
+    }
+  );
+};
+var SidebarHeader = ({ children, dataTestId = "sidebar-header", ...rest }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      "data-testid": dataTestId,
+      ...rest,
+      sx: {
+        padding: theme.spacing(2),
+        borderBottom: `1px solid ${theme.palette.divider}`,
+        flexShrink: 0,
+        overflow: "hidden"
+      },
+      children
+    }
+  );
+};
+var SidebarContent = ({ children, dataTestId = "sidebar-content", ...rest }) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    "data-testid": dataTestId,
+    ...rest,
+    sx: {
+      flex: 1,
+      overflow: "auto"
+    },
+    children
+  }
+);
+var SidebarFooter = ({ children, dataTestId = "sidebar-footer", ...rest }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      "data-testid": dataTestId,
+      ...rest,
+      sx: {
+        padding: theme.spacing(2),
+        borderTop: `1px solid ${theme.palette.divider}`,
+        flexShrink: 0
+      },
+      children
+    }
+  );
+};
+
+export {
+  Sidebar,
+  SidebarHeader,
+  SidebarContent,
+  SidebarFooter
+};
+//# sourceMappingURL=chunk-C3ZI3AVR.js.map

package/dist/chunk-C3ZI3AVR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Sidebar/Sidebar.tsx"],"sourcesContent":["import { alpha,Box, useTheme } from '@mui/material';\nimport React from 'react';\n\nimport type {\n  SidebarContentProps,\n  SidebarFooterProps,\n  SidebarHeaderProps,\n  SidebarProps,\n} from './Sidebar.types';\n\nexport const Sidebar: React.FC<SidebarProps> = ({\n  children,\n  variant = 'fixed',\n  open = true,\n  onToggle: _onToggle,\n  width = 280,\n  collapsedWidth = 64,\n  position = 'left',\n  className,\n  dataTestId = 'sidebar',\n  ...rest\n}) => {\n  // Prevent unused variable warning for onToggle\n  void _onToggle;\n  const theme = useTheme();\n\n  const isCollapsed = variant === 'collapsible' && !open;\n  const currentWidth = isCollapsed ? collapsedWidth : width;\n\n  const getVariantStyles = () => {\n    switch (variant) {\n      case 'floating':\n        return {\n          position: 'fixed' as const,\n          top: theme.spacing(2),\n          bottom: theme.spacing(2),\n          [position]: theme.spacing(2),\n          borderRadius: theme.spacing(2),\n          boxShadow: theme.shadows[8],\n          zIndex: theme.zIndex.drawer,\n        };\n      case 'glass':\n        return {\n          backgroundColor: alpha(theme.palette.background.paper, 0.1),\n          backdropFilter: 'blur(20px)',\n          border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`,\n          boxShadow: `0 8px 32px ${alpha(theme.palette.common.black, 0.1)}`,\n        };\n      case 'collapsible':\n        return {\n          transition: theme.transitions.create('width', {\n            easing: theme.transitions.easing.sharp,\n            duration: theme.transitions.duration.leavingScreen,\n          }),\n        };\n      default:\n        return {\n          backgroundColor: theme.palette.background.paper,\n          borderRight: `1px solid ${theme.palette.divider}`,\n        };\n    }\n  };\n\n  return (\n    <Box\n      className={className}\n      data-testid={dataTestId}\n      {...rest}\n      sx={{\n        width: currentWidth,\n        height: '100vh',\n        display: 'flex',\n        flexDirection: 'column',\n        overflow: 'hidden',\n        ...getVariantStyles(),\n      }}\n    >\n      {children}\n    </Box>\n  );\n};\n\nexport const SidebarHeader: React.FC<SidebarHeaderProps> = ({ children, dataTestId = 'sidebar-header', ...rest }) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      data-testid={dataTestId}\n      {...rest}\n      sx={{\n        padding: theme.spacing(2),\n        borderBottom: `1px solid ${theme.palette.divider}`,\n        flexShrink: 0,\n        overflow: 'hidden',\n      }}\n    >\n      {children}\n    </Box>\n  );\n};\n\nexport const SidebarContent: React.FC<SidebarContentProps> = ({ children, dataTestId = 'sidebar-content', ...rest }) => (\n    <Box\n      data-testid={dataTestId}\n      {...rest}\n      sx={{\n        flex: 1,\n        overflow: 'auto',\n      }}\n    >\n      {children}\n    </Box>\n  );\n\nexport const SidebarFooter: React.FC<SidebarFooterProps> = ({ children, dataTestId = 'sidebar-footer', ...rest }) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      data-testid={dataTestId}\n      {...rest}\n      sx={{\n        padding: theme.spacing(2),\n        borderTop: `1px solid ${theme.palette.divider}`,\n        flexShrink: 0,\n      }}\n    >\n      {children}\n    </Box>\n  );\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-C5H7HUF3.js

@@ -0,0 +1,68 @@
+import {
+  ErrorState
+} from "./chunk-OP3EGS6R.js";
+import {
+  LoadingState
+} from "./chunk-U24LRH5M.js";
+import {
+  EmptyState
+} from "./chunk-KXF4RD5B.js";
+
+// src/components/data-display/AsyncStateContainer/AsyncStateContainer.tsx
+import { Box } from "@mui/material";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+var StateBox = ({ state, className, dataTestId, children }) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    className,
+    "data-testid": dataTestId || "async-state-container",
+    "data-state": state,
+    children
+  }
+);
+var errorMessageOf = (error) => {
+  if (!error) return "";
+  if (typeof error === "string") return error;
+  if (error instanceof Error) return error.message;
+  return "An unexpected error occurred";
+};
+var pickNode = (node, render, fallback) => node || render?.() || fallback;
+var AsyncStateContainer = React.memo(
+  ({
+    isLoading = false,
+    error,
+    isEmpty = false,
+    children,
+    loadingComponent,
+    renderLoading,
+    errorComponent,
+    renderError,
+    emptyComponent,
+    emptyTitle,
+    renderEmpty,
+    className,
+    dataTestId
+  }) => {
+    const box = { className, dataTestId };
+    if (isLoading) {
+      return /* @__PURE__ */ jsx(StateBox, { state: "loading", ...box, children: pickNode(loadingComponent, renderLoading, /* @__PURE__ */ jsx(LoadingState, {})) });
+    }
+    if (error) {
+      const message = errorMessageOf(error);
+      return /* @__PURE__ */ jsx(StateBox, { state: "error", ...box, children: errorComponent || renderError?.(message) || /* @__PURE__ */ jsx(ErrorState, { message }) });
+    }
+    if (isEmpty) {
+      return /* @__PURE__ */ jsx(StateBox, { state: "empty", ...box, children: pickNode(emptyComponent, renderEmpty, /* @__PURE__ */ jsx(EmptyState, { title: emptyTitle })) });
+    }
+    return /* @__PURE__ */ jsx(StateBox, { state: "success", ...box, children });
+  }
+);
+AsyncStateContainer.displayName = "AsyncStateContainer";
+var AsyncStateContainer_default = AsyncStateContainer;
+
+export {
+  AsyncStateContainer,
+  AsyncStateContainer_default
+};
+//# sourceMappingURL=chunk-C5H7HUF3.js.map

package/dist/chunk-C5H7HUF3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/AsyncStateContainer/AsyncStateContainer.tsx"],"sourcesContent":["import { Box } from '@mui/material';\nimport React from 'react';\n\nimport { EmptyState } from '../EmptyState/EmptyState';\nimport { ErrorState } from '../ErrorState/ErrorState';\nimport { LoadingState } from '../LoadingState/LoadingState';\n\nimport type { AsyncStateContainerProps } from './AsyncStateContainer.types';\n\n/**\n * AsyncStateContainer - A composition-based wrapper for handling async data states\n *\n * Priority order: loading > error > empty > children\n *\n * @example\n * // With component props (composition pattern)\n * <AsyncStateContainer\n *   isLoading={isLoading}\n *   error={error}\n *   isEmpty={data.length === 0}\n *   loadingComponent={<LoadingState variant=\"skeleton\" />}\n *   errorComponent={<ErrorState message={error} onRetry={refetch} />}\n *   emptyComponent={<EmptyState title=\"No items\" onCreate={handleCreate} />}\n * >\n *   <DataGrid data={data} />\n * </AsyncStateContainer>\n *\n * @example\n * // With render props for more control\n * <AsyncStateContainer\n *   isLoading={isLoading}\n *   error={error}\n *   isEmpty={data.length === 0}\n *   renderLoading={() => <CustomLoader />}\n *   renderError={(error) => <CustomError error={error} />}\n *   renderEmpty={() => <CustomEmpty />}\n * >\n *   <DataGrid data={data} />\n * </AsyncStateContainer>\n */\n// The four states render the same wrapper, differing only in data-state and\n// what goes inside it.\nconst StateBox: React.FC<{\n  state: 'loading' | 'error' | 'empty' | 'success';\n  className?: string;\n  dataTestId?: string;\n  children: React.ReactNode;\n}> = ({ state, className, dataTestId, children }) => (\n  <Box\n    className={className}\n    data-testid={dataTestId || 'async-state-container'}\n    data-state={state}\n  >\n    {children}\n  </Box>\n);\n\nconst errorMessageOf = (error: unknown): string => {\n  if (!error) return '';\n  if (typeof error === 'string') return error;\n  if (error instanceof Error) return error.message;\n  return 'An unexpected error occurred';\n};\n\n// Each state takes a ready-made node, else a render function, else the default.\nconst pickNode = (\n  node: React.ReactNode,\n  render: (() => React.ReactNode) | undefined,\n  fallback: React.ReactNode,\n): React.ReactNode => node || render?.() || fallback;\n\nexport const AsyncStateContainer: React.FC<AsyncStateContainerProps> = React.memo(\n  ({\n    isLoading = false,\n    error,\n    isEmpty = false,\n    children,\n    loadingComponent,\n    renderLoading,\n    errorComponent,\n    renderError,\n    emptyComponent,\n    emptyTitle,\n    renderEmpty,\n    className,\n    dataTestId,\n  }) => {\n    const box = { className, dataTestId };\n\n    // Priority: loading > error > empty > children\n    if (isLoading) {\n      return (\n        <StateBox state=\"loading\" {...box}>\n          {pickNode(loadingComponent, renderLoading, <LoadingState />)}\n        </StateBox>\n      );\n    }\n\n    if (error) {\n      const message = errorMessageOf(error);\n      return (\n        <StateBox state=\"error\" {...box}>\n          {errorComponent || renderError?.(message) || <ErrorState message={message} />}\n        </StateBox>\n      );\n    }\n\n    if (isEmpty) {\n      return (\n        <StateBox state=\"empty\" {...box}>\n          {pickNode(emptyComponent, renderEmpty, <EmptyState title={emptyTitle} />)}\n        </StateBox>\n      );\n    }\n\n    return (\n      <StateBox state=\"success\" {...box}>\n        {children}\n      </StateBox>\n    );\n  },\n);\n\nAsyncStateContainer.displayName = 'AsyncStateContainer';\n\nexport default AsyncStateContainer;\n"],"mappings":";;;;;;;;;;;AAAA,SAAS,WAAW;AACpB,OAAO,WAAW;AA+ChB;AANF,IAAM,WAKD,CAAC,EAAE,OAAO,WAAW,YAAY,SAAS,MAC7C;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,eAAa,cAAc;AAAA,IAC3B,cAAY;AAAA,IAEX;AAAA;AACH;AAGF,IAAM,iBAAiB,CAAC,UAA2B;AACjD,MAAI,CAAC,MAAO,QAAO;AACnB,MAAI,OAAO,UAAU,SAAU,QAAO;AACtC,MAAI,iBAAiB,MAAO,QAAO,MAAM;AACzC,SAAO;AACT;AAGA,IAAM,WAAW,CACf,MACA,QACA,aACoB,QAAQ,SAAS,KAAK;AAErC,IAAM,sBAA0D,MAAM;AAAA,EAC3E,CAAC;AAAA,IACC,YAAY;AAAA,IACZ;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAM;AACJ,UAAM,MAAM,EAAE,WAAW,WAAW;AAGpC,QAAI,WAAW;AACb,aACE,oBAAC,YAAS,OAAM,WAAW,GAAG,KAC3B,mBAAS,kBAAkB,eAAe,oBAAC,gBAAa,CAAE,GAC7D;AAAA,IAEJ;AAEA,QAAI,OAAO;AACT,YAAM,UAAU,eAAe,KAAK;AACpC,aACE,oBAAC,YAAS,OAAM,SAAS,GAAG,KACzB,4BAAkB,cAAc,OAAO,KAAK,oBAAC,cAAW,SAAkB,GAC7E;AAAA,IAEJ;AAEA,QAAI,SAAS;AACX,aACE,oBAAC,YAAS,OAAM,SAAS,GAAG,KACzB,mBAAS,gBAAgB,aAAa,oBAAC,cAAW,OAAO,YAAY,CAAE,GAC1E;AAAA,IAEJ;AAEA,WACE,oBAAC,YAAS,OAAM,WAAW,GAAG,KAC3B,UACH;AAAA,EAEJ;AACF;AAEA,oBAAoB,cAAc;AAElC,IAAO,8BAAQ;","names":[]}

package/dist/chunk-C6ATAHBX.js

@@ -0,0 +1,56 @@
+// src/components/data-display/DataViews/data-views-types.ts
+var CARD_ASPECT_RATIOS = {
+  "1:1": 1,
+  "4:3": 4 / 3,
+  "16:9": 16 / 9,
+  "9:16": 9 / 16,
+  "3:4": 3 / 4,
+  /**
+   * The BANNER tile: too short for media, sized for two lines of text.
+   *
+   * Every other ratio here is picture-shaped, because they were added for cards
+   * built around a thumbnail. A card whose subject is a NAME and a NUMBER — a
+   * cart, an order, anything triaged rather than browsed — spends most of a 4:3
+   * tile on an icon that repeats down the whole grid and says nothing.
+   */
+  "3:1": 3
+};
+function emptyViewState(visibleColumns) {
+  return { search: "", pills: {}, ranges: {}, sortBy: [], visibleColumns };
+}
+function coerceViewState(raw, allColumnIds) {
+  const value = raw ?? {};
+  return {
+    search: typeof value.search === "string" ? value.search : "",
+    pills: asRecord(value.pills),
+    ranges: asRecord(value.ranges),
+    sortBy: Array.isArray(value.sortBy) ? value.sortBy : [],
+    visibleColumns: Array.isArray(value.visibleColumns) ? value.visibleColumns : allColumnIds,
+    order: Array.isArray(value.order) ? value.order : void 0,
+    // Carried through UNVALIDATED against the declared scopes on purpose: a view
+    // written before scopes existed has none (⇒ undefined ⇒ the first declared
+    // scope at render), and one naming a since-removed scope keeps its stored id
+    // here and falls back at READ time. Resolving here would rewrite the view.
+    scope: typeof value.scope === "string" ? value.scope : void 0,
+    layout: isLayout(value.layout) ? value.layout : void 0
+  };
+}
+var DATA_VIEWS_LAYOUTS = ["cards", "list", "board", "table"];
+function isLayout(value) {
+  return DATA_VIEWS_LAYOUTS.includes(value);
+}
+function asRecord(value) {
+  return value !== null && typeof value === "object" ? value : {};
+}
+function toSavedViewSummary(record) {
+  return { ...record, state: record.state ?? {} };
+}
+
+export {
+  CARD_ASPECT_RATIOS,
+  emptyViewState,
+  coerceViewState,
+  DATA_VIEWS_LAYOUTS,
+  toSavedViewSummary
+};
+//# sourceMappingURL=chunk-C6ATAHBX.js.map

package/dist/chunk-C6ATAHBX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/data-views-types.ts"],"sourcesContent":["import type { GridColumn, GridSort } from \"../DataGrid\";\nimport type { DropdownMenuItem } from \"../../navigation/DropdownMenu\";\n// A re-export does not bring the name into local scope, and the state/query\n// types below are written in terms of it.\nimport type { RangeValue } from \"./data-views-range-types\";\n\n/**\n * Shared types for the reusable admin \"DataViews\" table (FUT-88): a filter bar\n * (search-across-all + typed multi-select pills + column visibility) whose full\n * state — filters + sort + visible columns — a saved view (FUT-89) can capture\n * and restore. Each table declares its own columns + filter fields.\n */\n\n/**\n * A single, reusable row action. ONE definition drives BOTH the per-row \"⋮\"\n * kebab menu and the bulk-actions menu (tabwoah model): `onSelect` receives the\n * affected rows — `[row]` from a kebab, the whole selection from the bulk menu.\n * Single-item-only actions (e.g. \"Editar\") set `bulk: false` so they never\n * appear in the bulk menu.\n */\nexport interface RowAction<T extends Record<string, unknown>> {\n  /** Stable id (also the `data-testid` suffix). */\n  id: string;\n  /** Menu label. In the kebab, `rowLabel` overrides it per row when provided. */\n  label: string;\n  /** Menu-item colour (e.g. `\"error\"` for destructive). */\n  color?: DropdownMenuItem[\"color\"];\n  /**\n   * Runs on the affected rows: `[row]` from the kebab, all selected from bulk.\n   * May be async — the bulk menu awaits it and only clears the selection once it\n   * settles (keeping the selection on failure so the user can retry).\n   */\n  onSelect: (rows: T[]) => void | Promise<void>;\n  /** Include in the bulk menu (2+ selected). Defaults to `true`. */\n  bulk?: boolean;\n  /** Include in the per-row kebab. Defaults to `true`. */\n  row?: boolean;\n  /** Per-row kebab label (e.g. `row.active ? \"Inativar\" : \"Ativar\"`). */\n  rowLabel?: (row: T) => string;\n  /**\n   * Per-row applicability (e.g. state-machine guards). `false` hides the\n   * kebab item for that row; in bulk the action runs only on the passing\n   * rows and is dropped when none pass. Defaults to applicable.\n   */\n  isVisible?: (row: T) => boolean;\n}\n\n/** Selection state handed to a card renderer so it can drive its own checkbox. */\nexport interface DataViewCardSelection {\n  selected: boolean;\n  onToggleSelect: () => void;\n  /**\n   * Card SIZE multiplier from the toolbar zoom slider. The grid sizes the card's\n   * width to `base × scale`; a card passes this to {@link BaseCard} `scale` so its\n   * padding + typography grow by the same factor — the whole card scales together\n   * (scale 2 → ~2× size). The proportion (aspect ratio) stays constant.\n   */\n  scale: number;\n}\n\n/**\n * The fixed proportions a {@link BaseCard} tile can take. The tile keeps this\n * ratio and grows in BOTH width and height as the zoom slider widens its grid\n * track, so a grid of cards stays visually uniform.\n */\nexport type CardAspectRatio = \"1:1\" | \"4:3\" | \"16:9\" | \"9:16\" | \"3:4\" | \"3:1\";\n\n/** Numeric width/height factor for each {@link CardAspectRatio} (CSS `aspect-ratio`). */\nexport const CARD_ASPECT_RATIOS: Record<CardAspectRatio, number> = {\n  \"1:1\": 1,\n  \"4:3\": 4 / 3,\n  \"16:9\": 16 / 9,\n  \"9:16\": 9 / 16,\n  \"3:4\": 3 / 4,\n  /**\n   * The BANNER tile: too short for media, sized for two lines of text.\n   *\n   * Every other ratio here is picture-shaped, because they were added for cards\n   * built around a thumbnail. A card whose subject is a NAME and a NUMBER — a\n   * cart, an order, anything triaged rather than browsed — spends most of a 4:3\n   * tile on an icon that repeats down the whole grid and says nothing.\n   */\n  \"3:1\": 3,\n};\n\n/** One selectable value inside a filter pill. */\nexport interface FilterOption {\n  value: string;\n  label: string;\n  /**\n   * Parent option's `value`, for a hierarchical field (`control: \"category\"`).\n   * Ignored by the flat controls, so one option list serves both.\n   */\n  parentId?: string | null;\n}\n\n/** A typed, multi-select filter pill's configuration for a table. */\nexport interface FilterFieldConfig<T extends Record<string, unknown>> {\n  /** Stable id; also the default row key when no `accessor` is given. */\n  id: string;\n  label: string;\n  options: FilterOption[];\n  /**\n   * How the field renders in the filter panel. `checkboxes` (default) is best for\n   * a few fixed options; `multiselect` is a compact dropdown for long option\n   * lists; `category` is the hierarchical picker, for an option set that nests\n   * via {@link FilterOption.parentId} — it renders parents as headings and\n   * their children as the selectable rows, rather than flattening the tree into\n   * one indistinguishable list.\n   */\n  control?: \"checkboxes\" | \"multiselect\" | \"category\";\n  /**\n   * Forces this filter to render as a searchable multi-select dropdown with the\n   * search box always shown, regardless of how many options are currently\n   * loaded. Use it when the option set can grow unbounded (e.g. a filter backed\n   * by a relation such as Roles or Categories). Omit it for a closed value set\n   * (an enum), which keeps the plain checkbox / \"search only when long\"\n   * behavior.\n   */\n  searchEnabled?: boolean;\n  /**\n   * Reads the row's value(s) for this field. A row matches the pill when any of\n   * its values is selected. Defaults to `String(row[id])`.\n   */\n  accessor?: (row: T) => string | string[];\n}\n\n/**\n * The range types live in `data-views-range-types` (this file outgrew the\n * size gate); they are re-exported here so `data-views-types` stays the one\n * name every consumer imports the model from.\n */\nexport type {\n  DayRangeFieldConfig,\n  NumberRangeFieldConfig,\n  RangeFieldConfig,\n  RangeFieldKind,\n  RangePreset,\n  RangeValue,\n} from \"./data-views-range-types\";\n\n/** A grid column that can join the search scan and the column-visibility menu. */\nexport interface DataViewColumn<T extends Record<string, unknown>> extends GridColumn<T> {\n  /** Included in \"search across all columns\" (needs a resolvable value). */\n  searchable?: boolean;\n  /** Toggleable in the column-visibility menu. Defaults to true; set false for\n   *  structural columns (image thumbnail, actions kebab) that must always show. */\n  hideable?: boolean;\n}\n\n/**\n * The DataViews layout (view type): the dense \"Tabela\" grid, the \"Grade\" of\n * cards, the \"Lista\" of full-width rows, or the \"Quadro\" board of state columns.\n * Lives with the state types rather than with the toggle because a saved view\n * CAPTURES it — see {@link DataViewState.layout}.\n */\nexport type DataViewsLayout = \"cards\" | \"list\" | \"board\" | \"table\";\n\n/** The full, serializable state a view captures. */\nexport interface DataViewState {\n  /** Free text matched across every `searchable` column. */\n  search: string;\n  /** fieldId → selected option values (empty/absent = no constraint). */\n  pills: Record<string, string[]>;\n  /** fieldId → selected numeric range (min/max). Absent/empty = no constraint. */\n  ranges?: Record<string, RangeValue>;\n  sortBy: GridSort[];\n  /** Column ids kept visible; a hideable column not listed here is hidden. */\n  visibleColumns: string[];\n  /**\n   * Column ids in READING ORDER. Absent ⇒ the order the table declared them in.\n   *\n   * Order is view state for the same reason visibility is: reordering columns is\n   * an operator deciding what to read FIRST, and a saved view that restored the\n   * columns but not their order would restore half a decision. Ids the table no\n   * longer declares are ignored at render, and ids missing from a stale list\n   * fall in after it — so a column added since the view was saved appears rather\n   * than disappearing.\n   */\n  order?: string[];\n  /**\n   * The active SCOPE id — the page-level partition the scope tabs select (see\n   * `ScopeConfig`). Optional, so a table that declares no scopes is untouched\n   * and no view persisted before scopes existed breaks.\n   *\n   * Stored raw and RESOLVED at read time: the declared scopes change underneath\n   * a saved view, and a view naming a scope that has since been removed must\n   * fall back at render rather than break.\n   */\n  scope?: string;\n  /**\n   * The layout the view was saved in. Optional — absent means \"whatever the user\n   * is currently using\", which is the pre-existing behaviour.\n   *\n   * A LAYOUT FALLBACK IS NOT A LAYOUT CHANGE: a table rendered as stacked rows\n   * on a phone still has `\"table\"` stored here, so the view round-trips the\n   * stored layout regardless of the device that opened it.\n   */\n  layout?: DataViewsLayout;\n}\n\n/** A pristine view state showing every given column and no filters/sort. */\nexport function emptyViewState(visibleColumns: string[]): DataViewState {\n  return { search: \"\", pills: {}, ranges: {}, sortBy: [], visibleColumns };\n}\n\n/**\n * The URL-driven slice of {@link DataViewState} — the controls a server-mode host\n * mirrors from the address bar (search / pills / ranges / sort), WITHOUT\n * `visibleColumns`. Supplying it re-applies those controls when its reference\n * changes (e.g. browser back/forward or a deep-link on the same route), merging\n * over the current state so a user's show/hide column choices are preserved —\n * unlike `appliedState`, which fully replaces the state to apply a saved view.\n */\nexport type DataViewSyncState = Pick<\n  DataViewState,\n  \"search\" | \"pills\" | \"ranges\" | \"sortBy\" | \"scope\"\n>;\n\n/**\n * The query a SERVER-mode table emits whenever its filter/sort/page changes\n * (FUT-180). The host translates this into a backend request (see\n * `@12-apps/shared-helpers/search`) — in server mode the grid never filters,\n * sorts, or paginates in the browser; it renders exactly the page the server\n * returned. `page` is 1-based to match the backend contract.\n */\nexport interface DataViewQuery {\n  search: string;\n  pills: Record<string, string[]>;\n  ranges: Record<string, RangeValue>;\n  sortBy: GridSort[];\n  /**\n   * The RESOLVED active scope (see `resolveScope`), when the table declares\n   * scopes. The KEY IS ABSENT for a table that declares none — not present-and-\n   * undefined — so a host that never opted in sees a byte-identical query.\n   *\n   * It carries the resolved id, never the stored one: a deep link or a saved\n   * view naming a scope the table no longer declares must not put that id on the\n   * wire, where the backend would reject it and replace the page with an error.\n   */\n  scope?: string;\n  page: number;\n  pageSize: number;\n}\n\n/**\n * Server-mode wiring for a DataViews table. Its PRESENCE flips the table from\n * in-browser filtering/sorting/pagination to backend-driven: the rows handed in\n * are already the current page, `totalCount` is the unpaginated total, and\n * `onQueryChange` fires (search debounced by the host) whenever the user changes\n * a filter, the sort, or the page. This is the ONLY way an admin list should run\n * (see the app-side `DataViewsTable` wrapper, which requires it).\n */\nexport interface DataViewServer {\n  /** Total matched rows across all pages (drives the counter + page count). */\n  totalCount: number;\n  /** Current 1-based page. */\n  page: number;\n  /** Rows per page. */\n  pageSize: number;\n  /** Fired when the effective query changes; the host re-fetches the page. */\n  onQueryChange: (query: DataViewQuery) => void;\n  /**\n   * Per-scope totals for the scope tabs: `scopeId → count`. THE ONLY PIECE OF\n   * THIS CONTRACT THAT CANNOT BE DONE CLIENT-SIDE — a count computed from the\n   * loaded page is wrong the moment there is a second page, which is the\n   * concrete bug scopes exist to fix.\n   *\n   * Compute it over search + pills + ranges while IGNORING the active scope.\n   * Computed WITH the scope applied, every inactive tab reads zero, which is\n   * worse than no counts at all.\n   *\n   * Omit it and the tabs render with no numbers. Nothing is ever invented from\n   * the loaded rows to fill the gap.\n   */\n  scopeCounts?: Record<string, number>;\n}\n\n/**\n * Coerce an opaque persisted state (a saved view's JSON) into a valid\n * DataViewState, filling any missing part with a sane default. Guards against\n * legacy/older shapes so applying a saved view never renders an empty grid.\n */\nexport function coerceViewState(raw: unknown, allColumnIds: string[]): DataViewState {\n  const value = (raw ?? {}) as Partial<DataViewState>;\n  return {\n    search: typeof value.search === \"string\" ? value.search : \"\",\n    pills: asRecord<string[]>(value.pills),\n    ranges: asRecord<RangeValue>(value.ranges),\n    sortBy: Array.isArray(value.sortBy) ? value.sortBy : [],\n    visibleColumns: Array.isArray(value.visibleColumns) ? value.visibleColumns : allColumnIds,\n    order: Array.isArray(value.order) ? value.order : undefined,\n    // Carried through UNVALIDATED against the declared scopes on purpose: a view\n    // written before scopes existed has none (⇒ undefined ⇒ the first declared\n    // scope at render), and one naming a since-removed scope keeps its stored id\n    // here and falls back at READ time. Resolving here would rewrite the view.\n    scope: typeof value.scope === \"string\" ? value.scope : undefined,\n    layout: isLayout(value.layout) ? value.layout : undefined,\n  };\n}\n\n/** Every layout this build knows how to render — the guard's single source. */\nexport const DATA_VIEWS_LAYOUTS: readonly DataViewsLayout[] = [\"cards\", \"list\", \"board\", \"table\"];\n\n/** Is this a layout this build knows how to render? Guards persisted JSON. */\nfunction isLayout(value: unknown): value is DataViewsLayout {\n  return DATA_VIEWS_LAYOUTS.includes(value as DataViewsLayout);\n}\n\n/** A persisted map, or an empty one — persisted JSON can hold anything. */\nfunction asRecord<V>(value: unknown): Record<string, V> {\n  return value !== null && typeof value === \"object\" ? (value as Record<string, V>) : {};\n}\n\n/** A saved view as consumed by the DataViews UI (FUT-89), with ownership flag. */\nexport interface SavedViewSummary {\n  id: string;\n  name: string;\n  description: string | null;\n  state: DataViewState;\n  shared: boolean;\n  pinned: boolean;\n  isDefault: boolean;\n  /** True when the current user owns the view (may edit/delete/pin/share it). */\n  isOwner: boolean;\n}\n\n/** A saved-view repository record (opaque `state`), as returned to server pages. */\ninterface SavedViewRecordLike {\n  id: string;\n  name: string;\n  description: string | null;\n  state: unknown;\n  shared: boolean;\n  pinned: boolean;\n  isDefault: boolean;\n  isOwner: boolean;\n}\n\n/** Map a repository record to the client summary (opaque state → DataViewState). */\nexport function toSavedViewSummary(record: SavedViewRecordLike): SavedViewSummary {\n  return { ...record, state: (record.state ?? {}) as DataViewState };\n}\n\n/**\n * Dependency-injection contracts for the framework-agnostic DataViewsTableBase:\n * the host app supplies saved-view persistence + router side-effects so the ui\n * component imports neither a backend (server actions) nor a framework router.\n */\n\n/** A saved view's editable fields, as the host persists them. */\nexport interface DataViewSaveInput {\n  name: string;\n  description: string;\n  state: DataViewState;\n  shared: boolean;\n  pinned: boolean;\n  isDefault: boolean;\n}\n\n/** Result of a persistence call — mirrors the app's `Result` without importing it. */\nexport type DataViewMutationResult = { ok: true } | { ok: false; error: string };\n\n/** Injected saved-view persistence (create/update/delete), wired by the host. */\nexport interface DataViewPersistence {\n  create: (input: DataViewSaveInput) => Promise<DataViewMutationResult>;\n  update: (id: string, input: DataViewSaveInput) => Promise<DataViewMutationResult>;\n  remove: (id: string) => Promise<DataViewMutationResult>;\n}\n\n/** Injected router side-effects: sync the `?view=` param and re-fetch on change. */\nexport interface DataViewRouter {\n  syncViewParam: (viewId: string | null) => void;\n  refresh: () => void;\n}\n"],"mappings":";AAoEO,IAAM,qBAAsD;AAAA,EACjE,OAAO;AAAA,EACP,OAAO,IAAI;AAAA,EACX,QAAQ,KAAK;AAAA,EACb,QAAQ,IAAI;AAAA,EACZ,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASX,OAAO;AACT;AAuHO,SAAS,eAAe,gBAAyC;AACtE,SAAO,EAAE,QAAQ,IAAI,OAAO,CAAC,GAAG,QAAQ,CAAC,GAAG,QAAQ,CAAC,GAAG,eAAe;AACzE;AA+EO,SAAS,gBAAgB,KAAc,cAAuC;AACnF,QAAM,QAAS,OAAO,CAAC;AACvB,SAAO;AAAA,IACL,QAAQ,OAAO,MAAM,WAAW,WAAW,MAAM,SAAS;AAAA,IAC1D,OAAO,SAAmB,MAAM,KAAK;AAAA,IACrC,QAAQ,SAAqB,MAAM,MAAM;AAAA,IACzC,QAAQ,MAAM,QAAQ,MAAM,MAAM,IAAI,MAAM,SAAS,CAAC;AAAA,IACtD,gBAAgB,MAAM,QAAQ,MAAM,cAAc,IAAI,MAAM,iBAAiB;AAAA,IAC7E,OAAO,MAAM,QAAQ,MAAM,KAAK,IAAI,MAAM,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,IAKlD,OAAO,OAAO,MAAM,UAAU,WAAW,MAAM,QAAQ;AAAA,IACvD,QAAQ,SAAS,MAAM,MAAM,IAAI,MAAM,SAAS;AAAA,EAClD;AACF;AAGO,IAAM,qBAAiD,CAAC,SAAS,QAAQ,SAAS,OAAO;AAGhG,SAAS,SAAS,OAA0C;AAC1D,SAAO,mBAAmB,SAAS,KAAwB;AAC7D;AAGA,SAAS,SAAY,OAAmC;AACtD,SAAO,UAAU,QAAQ,OAAO,UAAU,WAAY,QAA8B,CAAC;AACvF;AA4BO,SAAS,mBAAmB,QAA+C;AAChF,SAAO,EAAE,GAAG,QAAQ,OAAQ,OAAO,SAAS,CAAC,EAAoB;AACnE;","names":[]}