@jinmi/ui 0.0.0-stage → 6.0.2

package/es/dashboard/ConsoleShell/ConsoleShell.mjs

@@ -0,0 +1,149 @@
+"use client";
+import FlexBasic_default from "../../Flex/FlexBasic.mjs";
+import Button from "../../base-ui/Button/Button.mjs";
+import Drawer from "../../base-ui/Drawer/Drawer.mjs";
+import { ConsoleShellContext } from "./context.mjs";
+import { useIsCompact, useLocalStorage, usePrefersReducedMotion } from "../hooks.mjs";
+import { styles } from "./style.mjs";
+import { useEffect, useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { PanelLeft } from "lucide-react";
+//#region src/dashboard/ConsoleShell/ConsoleShell.tsx
+function isTypingTarget(target) {
+	if (!(target instanceof HTMLElement)) return false;
+	const tag = target.tagName;
+	return tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || target.isContentEditable;
+}
+function ConsoleShell({ brand, breadcrumb, children, className, collapsed, collapseLabel = "Collapse sidebar", defaultCollapsed = false, expandLabel = "Expand sidebar", footer, hotkey = true, navigation, onCollapsedChange, openNavigationLabel = "Open navigation", skipToContentLabel = "Skip to content", storageKey, tools, ...rest }) {
+	const mainId = `console-main-${useId().replaceAll(":", "")}`;
+	const shellRef = useRef(null);
+	const isCompact = useIsCompact();
+	const reducedMotion = usePrefersReducedMotion();
+	const [storedCollapsed, setStoredCollapsed] = useLocalStorage(storageKey, defaultCollapsed);
+	const [drawerOpen, setDrawerOpen] = useState(false);
+	const isControlled = collapsed !== void 0;
+	const railCollapsed = isControlled ? collapsed : storedCollapsed;
+	const railed = railCollapsed && !isCompact;
+	const setCollapsed = (next) => {
+		if (!isControlled) setStoredCollapsed(next);
+		onCollapsedChange?.(next);
+	};
+	const closeNavigation = () => setDrawerOpen(false);
+	const toggleNavigation = () => {
+		if (isCompact) {
+			setDrawerOpen((open) => !open);
+			return;
+		}
+		setCollapsed(!railCollapsed);
+	};
+	const toggleRef = useRef(toggleNavigation);
+	toggleRef.current = toggleNavigation;
+	useEffect(() => {
+		if (!hotkey) return;
+		const node = shellRef.current;
+		if (!node) return;
+		const onKeyDown = (event) => {
+			if (event.key.toLowerCase() !== "b" || !(event.metaKey || event.ctrlKey) || event.altKey) return;
+			if (event.repeat || isTypingTarget(event.target)) return;
+			if (!node.contains(event.target)) return;
+			event.preventDefault();
+			toggleRef.current();
+		};
+		document.addEventListener("keydown", onKeyDown);
+		return () => document.removeEventListener("keydown", onKeyDown);
+	}, [hotkey]);
+	const stateFor = (rail) => ({
+		closeNavigation,
+		collapsed: rail,
+		compact: isCompact
+	});
+	const sidebar = (rail) => /* @__PURE__ */ jsxs(ConsoleShellContext, {
+		value: stateFor(rail),
+		children: [
+			brand ? /* @__PURE__ */ jsx("div", {
+				className: styles.brand,
+				"data-collapsed": rail,
+				children: brand
+			}) : null,
+			navigation ? /* @__PURE__ */ jsx("div", {
+				className: styles.navSlot,
+				children: navigation
+			}) : null,
+			footer ? /* @__PURE__ */ jsx("div", {
+				className: styles.sidebarBottom,
+				children: footer
+			}) : null
+		]
+	});
+	const toggleLabel = isCompact ? openNavigationLabel : railed ? expandLabel : collapseLabel;
+	return /* @__PURE__ */ jsxs("div", {
+		className: className ? `${styles.shell} ${className}` : styles.shell,
+		"data-console-shell": "",
+		ref: shellRef,
+		...rest,
+		children: [
+			/* @__PURE__ */ jsx("a", {
+				className: styles.skipLink,
+				href: `#${mainId}`,
+				onClick: (event) => {
+					event.preventDefault();
+					document.getElementById(mainId)?.focus();
+				},
+				children: skipToContentLabel
+			}),
+			/* @__PURE__ */ jsx("aside", {
+				className: styles.sidebar,
+				"data-collapsed": railed,
+				"data-instant": reducedMotion,
+				children: !isCompact && sidebar(railed)
+			}),
+			isCompact ? /* @__PURE__ */ jsx(Drawer, {
+				noHeader: true,
+				open: drawerOpen,
+				placement: "left",
+				width: 272,
+				onClose: closeNavigation,
+				children: /* @__PURE__ */ jsx(FlexBasic_default, {
+					height: "100%",
+					children: sidebar(false)
+				})
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				className: styles.workspace,
+				children: [/* @__PURE__ */ jsxs("header", {
+					className: styles.topbar,
+					children: [
+						/* @__PURE__ */ jsx(Button, {
+							"aria-label": toggleLabel,
+							icon: PanelLeft,
+							type: "text",
+							onClick: toggleNavigation
+						}),
+						/* @__PURE__ */ jsx("span", {
+							"aria-hidden": true,
+							className: styles.topbarDivider
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: styles.topbarMain,
+							children: breadcrumb
+						}),
+						tools ? /* @__PURE__ */ jsx("div", {
+							className: styles.tools,
+							children: tools
+						}) : null
+					]
+				}), /* @__PURE__ */ jsx("main", {
+					className: styles.main,
+					id: mainId,
+					tabIndex: -1,
+					children
+				})]
+			})
+		]
+	});
+}
+ConsoleShell.displayName = "ConsoleShell";
+//#endregion
+export { ConsoleShell as default };
+
+//# sourceMappingURL=ConsoleShell.mjs.map

package/es/dashboard/ConsoleShell/ConsoleShell.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConsoleShell.mjs","names":["Flexbox"],"sources":["../../../src/dashboard/ConsoleShell/ConsoleShell.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { PanelLeft } from 'lucide-react';\r\nimport { useEffect, useId, useRef, useState } from 'react';\r\n\r\nimport Button from '@/base-ui/Button';\r\nimport { Drawer } from '@/base-ui/Drawer';\r\nimport { Flexbox } from '@/Flex';\r\n\r\nimport { useIsCompact, useLocalStorage, usePrefersReducedMotion } from '../hooks';\r\nimport { ConsoleShellContext } from './context';\r\nimport { styles } from './style';\r\nimport type { ConsoleShellProps, ConsoleShellState } from './type';\r\n\r\nfunction isTypingTarget(target: EventTarget | null) {\r\n  if (!(target instanceof HTMLElement)) return false;\r\n  const tag = target.tagName;\r\n  return tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || target.isContentEditable;\r\n}\r\n\r\nfunction ConsoleShell({\r\n  brand,\r\n  breadcrumb,\r\n  children,\r\n  className,\r\n  collapsed,\r\n  collapseLabel = 'Collapse sidebar',\r\n  defaultCollapsed = false,\r\n  expandLabel = 'Expand sidebar',\r\n  footer,\r\n  hotkey = true,\r\n  navigation,\r\n  onCollapsedChange,\r\n  openNavigationLabel = 'Open navigation',\r\n  skipToContentLabel = 'Skip to content',\r\n  storageKey,\r\n  tools,\r\n  ...rest\r\n}: ConsoleShellProps) {\r\n  const mainId = `console-main-${useId().replaceAll(':', '')}`;\r\n  const shellRef = useRef<HTMLDivElement>(null);\r\n  const isCompact = useIsCompact();\r\n  const reducedMotion = usePrefersReducedMotion();\r\n  const [storedCollapsed, setStoredCollapsed] = useLocalStorage(storageKey, defaultCollapsed);\r\n  const [drawerOpen, setDrawerOpen] = useState(false);\r\n  const isControlled = collapsed !== undefined;\r\n  const railCollapsed = isControlled ? collapsed : storedCollapsed;\r\n  const railed = railCollapsed && !isCompact;\r\n\r\n  const setCollapsed = (next: boolean) => {\r\n    if (!isControlled) setStoredCollapsed(next);\r\n    onCollapsedChange?.(next);\r\n  };\r\n\r\n  const closeNavigation = () => setDrawerOpen(false);\r\n  const toggleNavigation = () => {\r\n    if (isCompact) {\r\n      setDrawerOpen((open) => !open);\r\n      return;\r\n    }\r\n    setCollapsed(!railCollapsed);\r\n  };\r\n  const toggleRef = useRef(toggleNavigation);\r\n  toggleRef.current = toggleNavigation;\r\n\r\n  useEffect(() => {\r\n    if (!hotkey) return;\r\n    const node = shellRef.current;\r\n    if (!node) return;\r\n\r\n    const onKeyDown = (event: KeyboardEvent) => {\r\n      if (event.key.toLowerCase() !== 'b' || !(event.metaKey || event.ctrlKey) || event.altKey) {\r\n        return;\r\n      }\r\n      if (event.repeat || isTypingTarget(event.target)) return;\r\n      if (!node.contains(event.target as Node)) return;\r\n      event.preventDefault();\r\n      toggleRef.current();\r\n    };\r\n\r\n    document.addEventListener('keydown', onKeyDown);\r\n    return () => document.removeEventListener('keydown', onKeyDown);\r\n  }, [hotkey]);\r\n\r\n  const stateFor = (rail: boolean): ConsoleShellState => ({\r\n    closeNavigation,\r\n    collapsed: rail,\r\n    compact: isCompact,\r\n  });\r\n\r\n  const sidebar = (rail: boolean) => (\r\n    <ConsoleShellContext value={stateFor(rail)}>\r\n      {brand ? (\r\n        <div className={styles.brand} data-collapsed={rail}>\r\n          {brand}\r\n        </div>\r\n      ) : null}\r\n      {navigation ? <div className={styles.navSlot}>{navigation}</div> : null}\r\n      {footer ? <div className={styles.sidebarBottom}>{footer}</div> : null}\r\n    </ConsoleShellContext>\r\n  );\r\n\r\n  const toggleLabel = isCompact ? openNavigationLabel : railed ? expandLabel : collapseLabel;\r\n\r\n  return (\r\n    <div\r\n      className={className ? `${styles.shell} ${className}` : styles.shell}\r\n      data-console-shell=\"\"\r\n      ref={shellRef}\r\n      {...rest}\r\n    >\r\n      <a\r\n        className={styles.skipLink}\r\n        href={`#${mainId}`}\r\n        onClick={(event) => {\r\n          event.preventDefault();\r\n          document.getElementById(mainId)?.focus();\r\n        }}\r\n      >\r\n        {skipToContentLabel}\r\n      </a>\r\n      <aside className={styles.sidebar} data-collapsed={railed} data-instant={reducedMotion}>\r\n        {!isCompact && sidebar(railed)}\r\n      </aside>\r\n      {isCompact ? (\r\n        <Drawer noHeader open={drawerOpen} placement=\"left\" width={272} onClose={closeNavigation}>\r\n          <Flexbox height=\"100%\">{sidebar(false)}</Flexbox>\r\n        </Drawer>\r\n      ) : null}\r\n      <div className={styles.workspace}>\r\n        <header className={styles.topbar}>\r\n          <Button\r\n            aria-label={toggleLabel}\r\n            icon={PanelLeft}\r\n            type=\"text\"\r\n            onClick={toggleNavigation}\r\n          />\r\n          <span aria-hidden className={styles.topbarDivider} />\r\n          <div className={styles.topbarMain}>{breadcrumb}</div>\r\n          {tools ? <div className={styles.tools}>{tools}</div> : null}\r\n        </header>\r\n        <main className={styles.main} id={mainId} tabIndex={-1}>\r\n          {children}\r\n        </main>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n\r\nConsoleShell.displayName = 'ConsoleShell';\r\n\r\nexport default ConsoleShell;\r\n"],"mappings":"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"}

package/es/dashboard/ConsoleShell/context.d.mts

@@ -0,0 +1,6 @@
+import { ConsoleShellState } from "./type.mjs";
+//#region src/dashboard/ConsoleShell/context.d.ts
+declare function useConsoleShell(): ConsoleShellState;
+//#endregion
+export { useConsoleShell };
+//# sourceMappingURL=context.d.mts.map

package/es/dashboard/ConsoleShell/context.mjs

@@ -0,0 +1,16 @@
+"use client";
+import { createContext, use } from "react";
+//#region src/dashboard/ConsoleShell/context.ts
+const ConsoleShellContext = createContext(null);
+function useConsoleShell() {
+	const value = use(ConsoleShellContext);
+	if (!value) throw new Error("useConsoleShell must be used within ConsoleShell");
+	return value;
+}
+function useConsoleShellState() {
+	return use(ConsoleShellContext);
+}
+//#endregion
+export { ConsoleShellContext, useConsoleShell, useConsoleShellState };
+
+//# sourceMappingURL=context.mjs.map

package/es/dashboard/ConsoleShell/context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.mjs","names":[],"sources":["../../../src/dashboard/ConsoleShell/context.ts"],"sourcesContent":["'use client';\r\n\r\nimport { createContext, use } from 'react';\r\n\r\nimport type { ConsoleShellState } from './type';\r\n\r\nexport const ConsoleShellContext = createContext<ConsoleShellState | null>(null);\r\n\r\nexport function useConsoleShell(): ConsoleShellState {\r\n  const value = use(ConsoleShellContext);\r\n  if (!value) throw new Error('useConsoleShell must be used within ConsoleShell');\r\n  return value;\r\n}\r\n\r\nexport function useConsoleShellState(): ConsoleShellState | null {\r\n  return use(ConsoleShellContext);\r\n}\r\n"],"mappings":";;;AAMA,MAAa,sBAAsB,cAAwC,IAAI;AAE/E,SAAgB,kBAAqC;CACnD,MAAM,QAAQ,IAAI,mBAAmB;CACrC,IAAI,CAAC,OAAO,MAAM,IAAI,MAAM,kDAAkD;CAC9E,OAAO;AACT;AAEA,SAAgB,uBAAiD;CAC/D,OAAO,IAAI,mBAAmB;AAChC"}

package/es/dashboard/ConsoleShell/index.d.mts

@@ -0,0 +1,5 @@
+import { ConsoleBrandLinkProps, ConsoleBrandProps, ConsoleShellProps, ConsoleShellState } from "./type.mjs";
+import ConsoleBrand from "./ConsoleBrand.mjs";
+import ConsoleShell from "./ConsoleShell.mjs";
+import { useConsoleShell } from "./context.mjs";
+export { ConsoleBrand, type ConsoleBrandProps, type ConsoleShellProps, type ConsoleShellState, ConsoleShell as default, useConsoleShell };

package/es/dashboard/ConsoleShell/style.mjs

@@ -0,0 +1,213 @@
+import { createStaticStyles } from "antd-style";
+//#region src/dashboard/ConsoleShell/style.ts
+const SIDEBAR_INLINE_SIZE = 248;
+const SIDEBAR_RAIL_INLINE_SIZE = 54;
+const WORKSPACE_INSET = 8;
+/**
+* `responsive.laptop`, not `responsive.tablet`. The aliases are named for
+* devices, and only `laptop` (max-width 991px) lines up with `useIsCompact`.
+*/
+const styles = createStaticStyles(({ css, cssVar, responsive }) => ({
+	brand: css`
+    display: flex;
+    flex: none;
+    align-items: center;
+
+    block-size: 56px;
+    margin-block-start: ${WORKSPACE_INSET}px;
+    padding-inline: 15px;
+
+    color: ${cssVar.colorText};
+    white-space: nowrap;
+
+    ${responsive.laptop} {
+      margin-block-start: 0;
+    }
+  `,
+	brandAnchor: css`
+    display: flex;
+    align-items: center;
+
+    inline-size: 100%;
+    min-inline-size: 0;
+
+    color: inherit;
+    text-decoration: none;
+  `,
+	brandLockup: css`
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    min-inline-size: 0;
+  `,
+	brandName: css`
+    overflow: hidden;
+
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 1.3;
+    color: ${cssVar.colorText};
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    transition: opacity 120ms ease 80ms;
+
+    [data-collapsed='true'] & {
+      text-overflow: clip;
+      opacity: 0;
+      transition-delay: 0s;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  `,
+	main: css`
+    overflow: auto;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: 20px;
+
+    min-inline-size: 0;
+    min-block-size: 0;
+    padding: 24px;
+
+    /*
+     * A page that owns a full-height split sets data-page-layout="flush" and
+     * takes over padding and scrolling, so its sidebar can sit on the card edge.
+     */
+    &:has([data-page-layout='flush']) {
+      overflow: hidden;
+      gap: 0;
+      padding: 0;
+    }
+
+    ${responsive.mobile} {
+      gap: 16px;
+      padding: 16px;
+    }
+  `,
+	navSlot: css`
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-block-size: 0;
+  `,
+	shell: css`
+    overflow: hidden;
+    display: flex;
+    flex: 1;
+
+    block-size: 100%;
+    min-block-size: 0;
+
+    background: ${cssVar.colorBgLayout};
+  `,
+	sidebar: css`
+    overflow: hidden;
+    display: flex;
+    flex: none;
+    flex-direction: column;
+
+    inline-size: ${SIDEBAR_INLINE_SIZE}px;
+    block-size: 100%;
+    min-block-size: 0;
+
+    transition: inline-size 200ms ease;
+
+    &[data-collapsed='true'] {
+      inline-size: ${SIDEBAR_RAIL_INLINE_SIZE}px;
+    }
+
+    &[data-instant='true'] {
+      transition: none;
+    }
+
+    ${responsive.laptop} {
+      display: none;
+    }
+  `,
+	sidebarBottom: css`
+    flex: none;
+    padding: 8px;
+  `,
+	skipLink: css`
+    position: fixed;
+    z-index: 2000;
+    inset-block-start: -100px;
+    inset-inline-start: 12px;
+
+    padding-block: 8px;
+    padding-inline: 12px;
+    border-radius: ${cssVar.borderRadius};
+
+    color: ${cssVar.colorText};
+
+    background: ${cssVar.colorBgElevated};
+
+    &:focus {
+      inset-block-start: 12px;
+    }
+  `,
+	topbar: css`
+    display: flex;
+    flex: none;
+    gap: 8px;
+    align-items: center;
+
+    block-size: 56px;
+    padding-inline: 12px;
+    border-block-end: 1px solid ${cssVar.colorBorderSecondary};
+  `,
+	topbarDivider: css`
+    flex: none;
+
+    inline-size: 1px;
+    block-size: 18px;
+    margin-inline: 2px;
+
+    background: ${cssVar.colorBorderSecondary};
+  `,
+	topbarMain: css`
+    display: flex;
+    flex: 1;
+    align-items: center;
+    min-inline-size: 0;
+  `,
+	tools: css`
+    display: flex;
+    flex: none;
+    gap: 6px;
+    align-items: center;
+
+    margin-inline-start: auto;
+  `,
+	workspace: css`
+    overflow: hidden;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+
+    min-inline-size: 0;
+    min-block-size: 0;
+    margin-block: ${WORKSPACE_INSET}px;
+    margin-inline: 0 ${WORKSPACE_INSET}px;
+    border: 1px solid ${cssVar.colorBorderSecondary};
+    border-radius: ${cssVar.borderRadiusLG};
+
+    background: ${cssVar.colorBgContainer};
+    box-shadow: ${cssVar.boxShadowTertiary};
+
+    ${responsive.laptop} {
+      margin: 0;
+      border: none;
+      border-radius: 0;
+      box-shadow: none;
+    }
+  `
+}));
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

package/es/dashboard/ConsoleShell/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/ConsoleShell/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\r\n\r\nconst SIDEBAR_INLINE_SIZE = 248;\r\n// Twice the nav icon inset (8px nav padding + 10px item padding) plus the 18px icon, so the icons\r\n// land centered on the rail without moving sideways.\r\nconst SIDEBAR_RAIL_INLINE_SIZE = 54;\r\nconst WORKSPACE_INSET = 8;\r\n\r\n/**\r\n * `responsive.laptop`, not `responsive.tablet`. The aliases are named for\r\n * devices, and only `laptop` (max-width 991px) lines up with `useIsCompact`.\r\n */\r\nexport const styles = createStaticStyles(({ css, cssVar, responsive }) => ({\r\n  brand: css`\r\n    display: flex;\r\n    flex: none;\r\n    align-items: center;\r\n\r\n    block-size: 56px;\r\n    margin-block-start: ${WORKSPACE_INSET}px;\r\n    padding-inline: 15px;\r\n\r\n    color: ${cssVar.colorText};\r\n    white-space: nowrap;\r\n\r\n    ${responsive.laptop} {\r\n      margin-block-start: 0;\r\n    }\r\n  `,\r\n  brandAnchor: css`\r\n    display: flex;\r\n    align-items: center;\r\n\r\n    inline-size: 100%;\r\n    min-inline-size: 0;\r\n\r\n    color: inherit;\r\n    text-decoration: none;\r\n  `,\r\n  brandLockup: css`\r\n    display: flex;\r\n    gap: 10px;\r\n    align-items: center;\r\n    min-inline-size: 0;\r\n  `,\r\n  brandName: css`\r\n    overflow: hidden;\r\n\r\n    font-size: 14px;\r\n    font-weight: 600;\r\n    line-height: 1.3;\r\n    color: ${cssVar.colorText};\r\n    text-overflow: ellipsis;\r\n    white-space: nowrap;\r\n\r\n    transition: opacity 120ms ease 80ms;\r\n\r\n    [data-collapsed='true'] & {\r\n      text-overflow: clip;\r\n      opacity: 0;\r\n      transition-delay: 0s;\r\n    }\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n      transition: none;\r\n    }\r\n  `,\r\n  main: css`\r\n    overflow: auto;\r\n    display: flex;\r\n    flex: 1;\r\n    flex-direction: column;\r\n    gap: 20px;\r\n\r\n    min-inline-size: 0;\r\n    min-block-size: 0;\r\n    padding: 24px;\r\n\r\n    /*\r\n     * A page that owns a full-height split sets data-page-layout=\"flush\" and\r\n     * takes over padding and scrolling, so its sidebar can sit on the card edge.\r\n     */\r\n    &:has([data-page-layout='flush']) {\r\n      overflow: hidden;\r\n      gap: 0;\r\n      padding: 0;\r\n    }\r\n\r\n    ${responsive.mobile} {\r\n      gap: 16px;\r\n      padding: 16px;\r\n    }\r\n  `,\r\n  navSlot: css`\r\n    display: flex;\r\n    flex: 1;\r\n    flex-direction: column;\r\n    min-block-size: 0;\r\n  `,\r\n  shell: css`\r\n    overflow: hidden;\r\n    display: flex;\r\n    flex: 1;\r\n\r\n    block-size: 100%;\r\n    min-block-size: 0;\r\n\r\n    background: ${cssVar.colorBgLayout};\r\n  `,\r\n  sidebar: css`\r\n    overflow: hidden;\r\n    display: flex;\r\n    flex: none;\r\n    flex-direction: column;\r\n\r\n    inline-size: ${SIDEBAR_INLINE_SIZE}px;\r\n    block-size: 100%;\r\n    min-block-size: 0;\r\n\r\n    transition: inline-size 200ms ease;\r\n\r\n    &[data-collapsed='true'] {\r\n      inline-size: ${SIDEBAR_RAIL_INLINE_SIZE}px;\r\n    }\r\n\r\n    &[data-instant='true'] {\r\n      transition: none;\r\n    }\r\n\r\n    ${responsive.laptop} {\r\n      display: none;\r\n    }\r\n  `,\r\n  sidebarBottom: css`\r\n    flex: none;\r\n    padding: 8px;\r\n  `,\r\n  skipLink: css`\r\n    position: fixed;\r\n    z-index: 2000;\r\n    inset-block-start: -100px;\r\n    inset-inline-start: 12px;\r\n\r\n    padding-block: 8px;\r\n    padding-inline: 12px;\r\n    border-radius: ${cssVar.borderRadius};\r\n\r\n    color: ${cssVar.colorText};\r\n\r\n    background: ${cssVar.colorBgElevated};\r\n\r\n    &:focus {\r\n      inset-block-start: 12px;\r\n    }\r\n  `,\r\n  topbar: css`\r\n    display: flex;\r\n    flex: none;\r\n    gap: 8px;\r\n    align-items: center;\r\n\r\n    block-size: 56px;\r\n    padding-inline: 12px;\r\n    border-block-end: 1px solid ${cssVar.colorBorderSecondary};\r\n  `,\r\n  topbarDivider: css`\r\n    flex: none;\r\n\r\n    inline-size: 1px;\r\n    block-size: 18px;\r\n    margin-inline: 2px;\r\n\r\n    background: ${cssVar.colorBorderSecondary};\r\n  `,\r\n  topbarMain: css`\r\n    display: flex;\r\n    flex: 1;\r\n    align-items: center;\r\n    min-inline-size: 0;\r\n  `,\r\n  tools: css`\r\n    display: flex;\r\n    flex: none;\r\n    gap: 6px;\r\n    align-items: center;\r\n\r\n    margin-inline-start: auto;\r\n  `,\r\n  workspace: css`\r\n    overflow: hidden;\r\n    display: flex;\r\n    flex: 1;\r\n    flex-direction: column;\r\n\r\n    min-inline-size: 0;\r\n    min-block-size: 0;\r\n    margin-block: ${WORKSPACE_INSET}px;\r\n    margin-inline: 0 ${WORKSPACE_INSET}px;\r\n    border: 1px solid ${cssVar.colorBorderSecondary};\r\n    border-radius: ${cssVar.borderRadiusLG};\r\n\r\n    background: ${cssVar.colorBgContainer};\r\n    box-shadow: ${cssVar.boxShadowTertiary};\r\n\r\n    ${responsive.laptop} {\r\n      margin: 0;\r\n      border: none;\r\n      border-radius: 0;\r\n      box-shadow: none;\r\n    }\r\n  `,\r\n}));\r\n"],"mappings":";;AAEA,MAAM,sBAAsB;AAG5B,MAAM,2BAA2B;AACjC,MAAM,kBAAkB;;;;;AAMxB,MAAa,SAAS,oBAAoB,EAAE,KAAK,QAAQ,kBAAkB;CACzE,OAAO,GAAG;;;;;;0BAMc,gBAAgB;;;aAG7B,OAAO,UAAU;;;MAGxB,WAAW,OAAO;;;;CAItB,aAAa,GAAG;;;;;;;;;;CAUhB,aAAa,GAAG;;;;;;CAMhB,WAAW,GAAG;;;;;;aAMH,OAAO,UAAU;;;;;;;;;;;;;;;;CAgB5B,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;MAqBL,WAAW,OAAO;;;;;CAKtB,SAAS,GAAG;;;;;;CAMZ,OAAO,GAAG;;;;;;;;kBAQM,OAAO,cAAc;;CAErC,SAAS,GAAG;;;;;;mBAMK,oBAAoB;;;;;;;qBAOlB,yBAAyB;;;;;;;MAOxC,WAAW,OAAO;;;;CAItB,eAAe,GAAG;;;;CAIlB,UAAU,GAAG;;;;;;;;qBAQM,OAAO,aAAa;;aAE5B,OAAO,UAAU;;kBAEZ,OAAO,gBAAgB;;;;;;CAMvC,QAAQ,GAAG;;;;;;;;kCAQqB,OAAO,qBAAqB;;CAE5D,eAAe,GAAG;;;;;;;kBAOF,OAAO,qBAAqB;;CAE5C,YAAY,GAAG;;;;;;CAMf,OAAO,GAAG;;;;;;;;CAQV,WAAW,GAAG;;;;;;;;oBAQI,gBAAgB;uBACb,gBAAgB;wBACf,OAAO,qBAAqB;qBAC/B,OAAO,eAAe;;kBAEzB,OAAO,iBAAiB;kBACxB,OAAO,kBAAkB;;MAErC,WAAW,OAAO;;;;;;;AAOxB,EAAE"}

package/es/dashboard/ConsoleShell/type.d.mts

@@ -0,0 +1,67 @@
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/dashboard/ConsoleShell/type.d.ts
+interface ConsoleShellState {
+  /** Closes the compact navigation drawer. */
+  closeNavigation: () => void;
+  /** Icon rail, only when the sidebar is collapsed on a wide viewport. */
+  collapsed: boolean;
+  /** Sidebar is a drawer. Matches the laptop breakpoint. */
+  compact: boolean;
+}
+interface ConsoleBrandLinkProps {
+  'aria-label': string;
+  'children': ReactNode;
+  'className': string;
+  'href': string;
+  'onClick': () => void;
+}
+interface ConsoleBrandProps {
+  href?: string;
+  /** Accessible name for the home link. Defaults to `title`. */
+  label?: string;
+  /** Mark shown on its own when the sidebar is an icon rail. */
+  logo: ReactNode;
+  /**
+   * Renders the home link. Use this to plug in a router `Link`.
+   * The default render is an anchor.
+   */
+  renderLink?: (props: ConsoleBrandLinkProps) => ReactNode;
+  /**
+   * Name beside the mark. Omit when `logo` already includes the wordmark,
+   * such as a combine lockup.
+   */
+  title?: ReactNode;
+}
+interface ConsoleShellProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  /** Home mark. Rendered at the top of the sidebar. */
+  brand?: ReactNode;
+  /** Location shown in the top bar, usually a `Breadcrumb`. */
+  breadcrumb?: ReactNode;
+  children?: ReactNode;
+  /** Collapse the sidebar to an icon rail. Ignored while compact. */
+  collapsed?: boolean;
+  collapseLabel?: string;
+  defaultCollapsed?: boolean;
+  expandLabel?: string;
+  /** Account menu or other content pinned to the bottom of the sidebar. */
+  footer?: ReactNode;
+  /**
+   * Collapse and expand with Mod+B while focus is inside the shell.
+   * @default true
+   */
+  hotkey?: boolean;
+  /** Grouped navigation. Collapsed state comes from the shell. */
+  navigation?: ReactNode;
+  onCollapsedChange?: (collapsed: boolean) => void;
+  openNavigationLabel?: string;
+  skipToContentLabel?: string;
+  /**
+   * Persists the collapsed rail. Omit to keep the choice in memory only.
+   */
+  storageKey?: string;
+  /** Actions at the end of the top bar. */
+  tools?: ReactNode;
+}
+//#endregion
+export { ConsoleBrandLinkProps, ConsoleBrandProps, ConsoleShellProps, ConsoleShellState };
+//# sourceMappingURL=type.d.mts.map

package/es/dashboard/FilterSidebar/FilterSidebar.d.mts

@@ -0,0 +1,17 @@
+import { FilterOptionProps, FilterRowProps, FilterSidebarProps } from "./type.mjs";
+//#region src/dashboard/FilterSidebar/FilterSidebar.d.ts
+declare function FilterSidebar({ body, children, flush, head, header, label, storageKey, summary, wide }: FilterSidebarProps): import("react").JSX.Element;
+declare namespace FilterSidebar {
+  var displayName: string;
+}
+declare function FilterRow({ count, name }: FilterRowProps): import("react").JSX.Element;
+declare namespace FilterRow {
+  var displayName: string;
+}
+declare function FilterOption({ count, icon, label, name, onClick, selected, title }: FilterOptionProps): import("react").JSX.Element;
+declare namespace FilterOption {
+  var displayName: string;
+}
+//#endregion
+export { FilterOption, FilterRow, FilterSidebar as default };
+//# sourceMappingURL=FilterSidebar.d.mts.map

package/es/dashboard/FilterSidebar/FilterSidebar.mjs

@@ -0,0 +1,151 @@
+"use client";
+import Button from "../../base-ui/Button/Button.mjs";
+import Drawer from "../../base-ui/Drawer/Drawer.mjs";
+import DraggablePanel from "../../base-ui/DraggablePanel/DraggablePanel.mjs";
+import { styles } from "../Surface/style.mjs";
+import { useIsCompact, useLocalStorage } from "../hooks.mjs";
+import { FilterSplitProvider } from "./context.mjs";
+import { styles as styles$1 } from "./style.mjs";
+import { clampSidebarWidth, sidebarWidth } from "./width.mjs";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Filter } from "lucide-react";
+//#region src/dashboard/FilterSidebar/FilterSidebar.tsx
+function usePageSidebar(wide, storageKey) {
+	const fallback = wide ? sidebarWidth.wide : sidebarWidth.narrow;
+	const [prefs, setPrefs] = useLocalStorage(storageKey, {
+		expand: true,
+		width: fallback
+	});
+	return {
+		expand: prefs.expand !== false,
+		onExpandChange: (expand) => setPrefs((current) => ({
+			...current,
+			expand
+		})),
+		onSizeChange: (size) => {
+			const next = typeof size.width === "number" ? size.width : fallback;
+			setPrefs((current) => ({
+				...current,
+				width: clampSidebarWidth(next, fallback)
+			}));
+		},
+		width: clampSidebarWidth(Number(prefs.width), fallback)
+	};
+}
+function FilterSidebar({ body, children, flush, head, header, label, storageKey, summary, wide }) {
+	const isCompact = useIsCompact();
+	const [drawerOpen, setDrawerOpen] = useState(false);
+	const sidebar = usePageSidebar(wide, storageKey);
+	const close = () => setDrawerOpen(false);
+	if (isCompact) return /* @__PURE__ */ jsx(FilterSplitProvider, {
+		active: !flush,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: styles$1.layout,
+			children: [
+				header,
+				/* @__PURE__ */ jsx(Button, {
+					block: true,
+					icon: Filter,
+					onClick: () => setDrawerOpen(true),
+					children: summary
+				}),
+				/* @__PURE__ */ jsx(Drawer, {
+					open: drawerOpen,
+					placement: "left",
+					title: label,
+					width: 300,
+					onClose: close,
+					children: /* @__PURE__ */ jsxs("div", {
+						className: styles$1.drawerPanel,
+						children: [head?.(close), body(close)]
+					})
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: styles$1.content,
+					children
+				})
+			]
+		})
+	});
+	return /* @__PURE__ */ jsx(FilterSplitProvider, {
+		active: !flush,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: flush ? styles$1.layout : `${styles$1.layout} ${styles.card}`,
+			"data-flush": flush ? true : void 0,
+			"data-page-layout": flush ? "flush" : void 0,
+			"data-split-card": flush ? void 0 : true,
+			children: [/* @__PURE__ */ jsxs(DraggablePanel, {
+				expandable: true,
+				showHandleWhenCollapsed: true,
+				"aria-label": label,
+				className: styles$1.sidebar,
+				classNames: { content: styles$1.panel },
+				collapseThreshold: sidebarWidth.collapse,
+				"data-flush": flush ? true : void 0,
+				defaultSize: { width: wide ? sidebarWidth.wide : sidebarWidth.narrow },
+				expand: sidebar.expand,
+				maxWidth: sidebarWidth.max,
+				minWidth: sidebarWidth.min,
+				mode: "fixed",
+				placement: "left",
+				showBorder: false,
+				size: { width: sidebar.width },
+				onExpandChange: sidebar.onExpandChange,
+				onSizeChange: (_delta, size) => sidebar.onSizeChange(size),
+				children: [head ? /* @__PURE__ */ jsx("div", {
+					className: styles$1.head,
+					children: head(close)
+				}) : null, /* @__PURE__ */ jsx("div", {
+					className: styles$1.body,
+					"data-flush": flush ? true : void 0,
+					children: body(close)
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: styles$1.content,
+				"data-flush": flush ? true : void 0,
+				children: [header, children]
+			})]
+		})
+	});
+}
+FilterSidebar.displayName = "FilterSidebar";
+function FilterRow({ count, name }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: styles$1.row,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: styles$1.name,
+			children: name
+		}), count !== void 0 ? /* @__PURE__ */ jsx("span", {
+			className: styles$1.count,
+			children: count
+		}) : null]
+	});
+}
+FilterRow.displayName = "FilterRow";
+function FilterOption({ count, icon, label, name, onClick, selected, title }) {
+	return /* @__PURE__ */ jsxs("button", {
+		"aria-label": label,
+		"aria-pressed": selected,
+		className: styles$1.option,
+		title,
+		type: "button",
+		onClick,
+		children: [
+			icon,
+			/* @__PURE__ */ jsx("span", {
+				className: styles$1.name,
+				children: name
+			}),
+			count !== void 0 ? /* @__PURE__ */ jsx("span", {
+				className: styles$1.count,
+				children: count
+			}) : null
+		]
+	});
+}
+FilterOption.displayName = "FilterOption";
+//#endregion
+export { FilterOption, FilterRow, FilterSidebar as default };
+
+//# sourceMappingURL=FilterSidebar.mjs.map