@omnitron-dev/prism 0.3.0 → 0.3.2

package/dist/chunk-KPY7TA4D.js

@@ -0,0 +1,191 @@
+import { useSettingsStore } from './chunk-NJM5AVBM.js';
+import { Scrollbar } from './chunk-4Q5L7LDG.js';
+import { PanelExpandIcon, PanelCollapseIcon, MenuIcon, CloseIcon } from './chunk-VQVVHMPG.js';
+import IconButton from '@mui/material/IconButton';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useId, useEffect } from 'react';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Drawer from '@mui/material/Drawer';
+import Typography from '@mui/material/Typography';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { useTheme } from '@mui/material/styles';
+
+function SidebarToggle({ collapsed, labels, sx, ...props }) {
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      ...props,
+      size: "small",
+      "aria-label": collapsed ? labels.expand : labels.collapse,
+      "aria-expanded": !collapsed,
+      sx: [
+        (theme) => ({
+          position: "absolute",
+          top: 36,
+          insetInlineEnd: 0,
+          // Centre on the rail edge even when the host enlarges the hit target.
+          // A logical inset and an unflipped custom value also work with RTL caches.
+          "--prism-sidebar-toggle-shift": theme.direction === "rtl" ? "-50%" : "50%",
+          transform: "translate(var(--prism-sidebar-toggle-shift), -50%)",
+          width: 24,
+          height: 24,
+          bgcolor: "background.paper",
+          border: 1,
+          borderColor: "divider",
+          boxShadow: 1,
+          // Keep an opaque surface over the rail divider in every interactive state.
+          "&:hover, &.Mui-focusVisible": {
+            bgcolor: "background.paper",
+            backgroundImage: `linear-gradient(${(theme.vars ?? theme).palette.action.hover}, ${(theme.vars ?? theme).palette.action.hover})`
+          }
+        }),
+        ...Array.isArray(sx) ? sx : [sx]
+      ],
+      children: collapsed ? /* @__PURE__ */ jsx(PanelExpandIcon, { sx: { fontSize: 18 } }) : /* @__PURE__ */ jsx(PanelCollapseIcon, { sx: { fontSize: 18 } })
+    }
+  );
+}
+function PanelLayout({
+  children,
+  panel,
+  title,
+  labels,
+  persistKey,
+  defaultCollapsed = false,
+  navigationKey,
+  width = 264,
+  collapsedWidth = 64,
+  height,
+  layoutQuery = "md",
+  offset = 88,
+  sx
+}) {
+  const theme = useTheme();
+  const wide = useMediaQuery(theme.breakpoints.up(layoutQuery));
+  const saved = useSettingsStore((s) => s.sidebarCollapsed);
+  const save = useSettingsStore((s) => s.setSidebarCollapsed);
+  const [collapsed, setCollapsed] = useState(
+    () => persistKey ? saved[persistKey] ?? defaultCollapsed : defaultCollapsed
+  );
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const id = useId();
+  const renderPanel = (compact) => typeof panel === "function" ? panel({ collapsed: compact }) : panel;
+  useEffect(() => {
+    setMobileOpen(false);
+  }, [navigationKey, wide]);
+  const toggle = () => {
+    const next = !collapsed;
+    setCollapsed(next);
+    if (persistKey) save(persistKey, next);
+  };
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: [
+        { display: "flex", alignItems: "flex-start", gap: { xs: 0, md: 3 }, minWidth: 0 },
+        ...Array.isArray(sx) ? sx : [sx]
+      ],
+      children: [
+        wide && /* @__PURE__ */ jsxs(
+          Box,
+          {
+            component: "aside",
+            "aria-label": title,
+            sx: {
+              width: collapsed ? collapsedWidth : width,
+              height: height ?? `calc(100dvh - ${offset + 24}px)`,
+              minHeight: 160,
+              display: "flex",
+              flexDirection: "column",
+              flexShrink: 0,
+              position: "sticky",
+              top: offset,
+              borderRight: 1,
+              borderColor: "divider",
+              transition: theme.transitions.create("width", { duration: theme.transitions.duration.shorter }),
+              "@media (prefers-reduced-motion: reduce)": { transition: "none" }
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                Box,
+                {
+                  sx: {
+                    height: 48,
+                    flexShrink: 0,
+                    display: "flex",
+                    alignItems: "center",
+                    pr: 3,
+                    pl: 1.5,
+                    overflow: "hidden"
+                  },
+                  children: !collapsed && /* @__PURE__ */ jsx(Typography, { component: "div", variant: "subtitle2", noWrap: true, children: title })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                SidebarToggle,
+                {
+                  collapsed,
+                  labels,
+                  onClick: toggle,
+                  "aria-controls": id + "-desktop",
+                  sx: { top: 24 }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Scrollbar,
+                {
+                  id: id + "-desktop",
+                  hidden: collapsed && typeof panel !== "function",
+                  sx: { flex: 1, overscrollBehavior: "contain", px: collapsed ? 0.5 : 1.5, pb: 2 },
+                  children: renderPanel(collapsed)
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(Box, { sx: { flex: "1 1 auto", minWidth: 0 }, children: [
+          !wide && /* @__PURE__ */ jsx(
+            Button,
+            {
+              onClick: () => setMobileOpen(true),
+              "aria-haspopup": "dialog",
+              "aria-expanded": mobileOpen,
+              sx: { mb: 2 },
+              startIcon: /* @__PURE__ */ jsx(MenuIcon, {}),
+              children: title
+            }
+          ),
+          children
+        ] }),
+        !wide && /* @__PURE__ */ jsxs(
+          Drawer,
+          {
+            open: mobileOpen,
+            onClose: () => setMobileOpen(false),
+            ModalProps: { keepMounted: true },
+            slotProps: {
+              paper: {
+                role: "dialog",
+                "aria-modal": true,
+                "aria-label": title,
+                sx: { width: `min(${width + 32}px, calc(100vw - 32px))` }
+              }
+            },
+            children: [
+              /* @__PURE__ */ jsxs(Box, { sx: { minHeight: 64, px: 2, display: "flex", alignItems: "center", gap: 1 }, children: [
+                /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", sx: { flex: 1 }, children: title }),
+                /* @__PURE__ */ jsx(IconButton, { onClick: () => setMobileOpen(false), "aria-label": labels.close, children: /* @__PURE__ */ jsx(CloseIcon, { fontSize: "small" }) })
+              ] }),
+              /* @__PURE__ */ jsx(Scrollbar, { sx: { flex: 1, px: 2, pb: 2 }, children: renderPanel(false) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { PanelLayout, SidebarToggle };
+//# sourceMappingURL=chunk-KPY7TA4D.js.map
+//# sourceMappingURL=chunk-KPY7TA4D.js.map

package/dist/chunk-KPY7TA4D.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/layouts/sidebar-toggle.tsx","../src/layouts/panel-layout.tsx"],"names":["jsx","IconButton"],"mappings":"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","file":"chunk-KPY7TA4D.js","sourcesContent":["import { PanelExpandIcon, PanelCollapseIcon } from '../icons/controls.js';\nimport IconButton, { type IconButtonProps } from '@mui/material/IconButton';\nexport interface SidebarToggleProps extends Omit<IconButtonProps, 'children' | 'aria-label' | 'aria-expanded'> {\n  collapsed: boolean;\n  labels: { expand: string; collapse: string };\n}\n/** Shared edge control for the application sidebar and nested tool panels. */\nexport function SidebarToggle({ collapsed, labels, sx, ...props }: SidebarToggleProps) {\n  return (\n    <IconButton\n      {...props}\n      size=\"small\"\n      aria-label={collapsed ? labels.expand : labels.collapse}\n      aria-expanded={!collapsed}\n      sx={[\n        (theme) => ({\n          position: 'absolute',\n          top: 36,\n          insetInlineEnd: 0,\n          // Centre on the rail edge even when the host enlarges the hit target.\n          // A logical inset and an unflipped custom value also work with RTL caches.\n          '--prism-sidebar-toggle-shift': theme.direction === 'rtl' ? '-50%' : '50%',\n          transform: 'translate(var(--prism-sidebar-toggle-shift), -50%)',\n          width: 24,\n          height: 24,\n          bgcolor: 'background.paper',\n          border: 1,\n          borderColor: 'divider',\n          boxShadow: 1,\n          // Keep an opaque surface over the rail divider in every interactive state.\n          '&:hover, &.Mui-focusVisible': {\n            bgcolor: 'background.paper',\n            backgroundImage: `linear-gradient(${(theme.vars ?? theme).palette.action.hover}, ${(theme.vars ?? theme).palette.action.hover})`,\n          },\n        }),\n        ...(Array.isArray(sx) ? sx : [sx]),\n      ]}\n    >\n      {collapsed ? <PanelExpandIcon sx={{ fontSize: 18 }} /> : <PanelCollapseIcon sx={{ fontSize: 18 }} />}\n    </IconButton>\n  );\n}\n","import { MenuIcon, CloseIcon } from '../icons/controls.js';\nimport { useEffect, useId, useState, type ReactNode } from 'react';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport Drawer from '@mui/material/Drawer';\nimport IconButton from '@mui/material/IconButton';\nimport Typography from '@mui/material/Typography';\nimport useMediaQuery from '@mui/material/useMediaQuery';\nimport { useTheme, type SxProps, type Theme, type Breakpoint } from '@mui/material/styles';\nimport { Scrollbar } from '../components/scrollbar/scrollbar.js';\nimport { SidebarToggle } from './sidebar-toggle.js';\nimport { useSettingsStore } from '../state/stores/settings.js';\n\nexport interface PanelLayoutProps {\n  children: ReactNode;\n  /** Render a compact, actionable index while keeping the same component mounted. */\n  panel: ReactNode | ((state: { collapsed: boolean }) => ReactNode);\n  title: string;\n  /** Translate all three action labels in the host application. */\n  labels: { expand: string; collapse: string; close: string };\n  /** Independent from the dashboard and other panels. */\n  persistKey?: string;\n  defaultCollapsed?: boolean;\n  /** Close the mobile drawer when the host changes its active document/selection. */\n  navigationKey?: string;\n  width?: number;\n  collapsedWidth?: number;\n  /** Stable in both modes. A graph can use the same height as its canvas. */\n  height?: number | string;\n  layoutQuery?: Breakpoint;\n  /** Top of the sticky panel below the application header. */\n  offset?: number;\n  sx?: SxProps<Theme>;\n}\n\n/** Secondary navigation: a collapsible desktop rail and an accessible mobile drawer.\n * Collapse hides, rather than destroys, panel content. The document/editor is never\n * reparented or remounted when either navigation panel changes state.\n */\nexport function PanelLayout({\n  children,\n  panel,\n  title,\n  labels,\n  persistKey,\n  defaultCollapsed = false,\n  navigationKey,\n  width = 264,\n  collapsedWidth = 64,\n  height,\n  layoutQuery = 'md',\n  offset = 88,\n  sx,\n}: PanelLayoutProps) {\n  const theme = useTheme();\n  const wide = useMediaQuery(theme.breakpoints.up(layoutQuery));\n  const saved = useSettingsStore((s) => s.sidebarCollapsed);\n  const save = useSettingsStore((s) => s.setSidebarCollapsed);\n  const [collapsed, setCollapsed] = useState(() =>\n    persistKey ? (saved[persistKey] ?? defaultCollapsed) : defaultCollapsed\n  );\n  const [mobileOpen, setMobileOpen] = useState(false);\n  const id = useId();\n  const renderPanel = (compact: boolean) => (typeof panel === 'function' ? panel({ collapsed: compact }) : panel);\n  useEffect(() => {\n    setMobileOpen(false);\n  }, [navigationKey, wide]);\n  const toggle = () => {\n    const next = !collapsed;\n    setCollapsed(next);\n    if (persistKey) save(persistKey, next);\n  };\n  return (\n    <Box\n      sx={[\n        { display: 'flex', alignItems: 'flex-start', gap: { xs: 0, md: 3 }, minWidth: 0 },\n        ...(Array.isArray(sx) ? sx : [sx]),\n      ]}\n    >\n      {wide && (\n        <Box\n          component=\"aside\"\n          aria-label={title}\n          sx={{\n            width: collapsed ? collapsedWidth : width,\n            height: height ?? `calc(100dvh - ${offset + 24}px)`,\n            minHeight: 160,\n            display: 'flex',\n            flexDirection: 'column',\n            flexShrink: 0,\n            position: 'sticky',\n            top: offset,\n            borderRight: 1,\n            borderColor: 'divider',\n            transition: theme.transitions.create('width', { duration: theme.transitions.duration.shorter }),\n            '@media (prefers-reduced-motion: reduce)': { transition: 'none' },\n          }}\n        >\n          <Box\n            sx={{\n              height: 48,\n              flexShrink: 0,\n              display: 'flex',\n              alignItems: 'center',\n              pr: 3,\n              pl: 1.5,\n              overflow: 'hidden',\n            }}\n          >\n            {!collapsed && (\n              <Typography component=\"div\" variant=\"subtitle2\" noWrap>\n                {title}\n              </Typography>\n            )}\n          </Box>\n          <SidebarToggle\n            collapsed={collapsed}\n            labels={labels}\n            onClick={toggle}\n            aria-controls={id + '-desktop'}\n            sx={{ top: 24 }}\n          />\n          <Scrollbar\n            id={id + '-desktop'}\n            hidden={collapsed && typeof panel !== 'function'}\n            sx={{ flex: 1, overscrollBehavior: 'contain', px: collapsed ? 0.5 : 1.5, pb: 2 }}\n          >\n            {renderPanel(collapsed)}\n          </Scrollbar>\n        </Box>\n      )}\n      <Box sx={{ flex: '1 1 auto', minWidth: 0 }}>\n        {!wide && (\n          <Button\n            onClick={() => setMobileOpen(true)}\n            aria-haspopup=\"dialog\"\n            aria-expanded={mobileOpen}\n            sx={{ mb: 2 }}\n            startIcon={<MenuIcon />}\n          >\n            {title}\n          </Button>\n        )}\n        {children}\n      </Box>\n      {!wide && (\n        <Drawer\n          open={mobileOpen}\n          onClose={() => setMobileOpen(false)}\n          ModalProps={{ keepMounted: true }}\n          slotProps={{\n            paper: {\n              role: 'dialog',\n              'aria-modal': true,\n              'aria-label': title,\n              sx: { width: `min(${width + 32}px, calc(100vw - 32px))` },\n            },\n          }}\n        >\n          <Box sx={{ minHeight: 64, px: 2, display: 'flex', alignItems: 'center', gap: 1 }}>\n            <Typography variant=\"subtitle1\" sx={{ flex: 1 }}>\n              {title}\n            </Typography>\n            <IconButton onClick={() => setMobileOpen(false)} aria-label={labels.close}>\n              <CloseIcon fontSize=\"small\" />\n            </IconButton>\n          </Box>\n          <Scrollbar sx={{ flex: 1, px: 2, pb: 2 }}>{renderPanel(false)}</Scrollbar>\n        </Drawer>\n      )}\n    </Box>\n  );\n}\n"]}