@humain/ui 2.1.63 → 2.1.65

package/dist/index220.js.map

@@ -1 +1 @@
-{"version":3,"file":"index220.js","names":[],"sources":["../src/components/templates/AppShell/AppShellPanel.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cn } from '@/lib/utils';\nimport { PanelExpansionContext, PanelLayoutContext } from './AppShellContext';\n\nexport const APPSHELL_PANEL_TYPE = 'AppShell.Panel' as const;\n\nexport interface AppShellPanelProps extends React.ComponentProps<'div'> {\n  /** Fixed width in pixels (number) or CSS string */\n  width?: number | string;\n  /** Flex grow value */\n  flex?: number | string;\n  /** Minimum width in pixels (number) or CSS string */\n  minWidth?: number | string;\n  /** When true, panel takes all content space (flex: 1), sibling panels hidden */\n  expanded?: boolean;\n  /** Callback when expanded state should change */\n  onExpandedChange?: (expanded: boolean) => void;\n  /** Label shown in mobile tab bar */\n  label?: string;\n}\n\nexport interface AppShellPanelComponent {\n  (props: AppShellPanelProps): React.ReactElement;\n  displayName?: string;\n  __appShellType: typeof APPSHELL_PANEL_TYPE;\n}\n\n/**\n * Generic content slot for AppShell. Max 2 panels visible at a time.\n *\n * Sizing priority: expanded > width/flex > default (flex: 1)\n *\n * Reads PanelLayoutContext to self-manage visibility and mobile sizing,\n * eliminating the need for cloneElement style injection from Root.\n */\nfunction AppShellPanelRoot({\n  width,\n  flex,\n  minWidth,\n  expanded = false,\n  onExpandedChange,\n  label,\n  className,\n  style,\n  children,\n  ...props\n}: AppShellPanelProps): React.ReactElement {\n  const layout = React.useContext(PanelLayoutContext);\n  const resolvedExpanded = layout.expanded ?? expanded;\n  const resolvedOnExpandedChange = layout.onExpandedChange ?? onExpandedChange;\n\n  const expansionValue = React.useMemo(\n    () => ({\n      expanded: resolvedExpanded,\n      onExpandedChange: resolvedOnExpandedChange,\n    }),\n    [resolvedExpanded, resolvedOnExpandedChange],\n  );\n\n  // Compute inline styles based on layout context + sizing rules\n  const computedStyle = React.useMemo((): React.CSSProperties => {\n    // Hidden panel (desktop: non-visible overflow or non-expanded sibling)\n    if (!layout.visible && !layout.isMobile) {\n      if (layout.collapseMode === 'animated') {\n        return {\n          ...style,\n          opacity: 0,\n          width: '0px',\n          maxWidth: '0px',\n          minWidth: '0px',\n          flex: '0 1 0px',\n          overflow: 'hidden',\n          pointerEvents: 'none',\n        };\n      }\n\n      return {\n        ...style,\n        display: 'none',\n        opacity: 0,\n        width: '0px',\n        flex: '0',\n        overflow: 'hidden',\n        pointerEvents: 'none',\n      };\n    }\n\n    // Mobile active panel: fill available space\n    if (layout.isMobile) {\n      return { ...style, flex: '1' };\n    }\n\n    if (layout.sizeManagedByRoot) {\n      return { ...style };\n    }\n\n    // Desktop visible panel: apply sizing rules\n    const sizeStyles: React.CSSProperties = {};\n    if (resolvedExpanded) {\n      sizeStyles.flex = '1';\n    } else if (width !== undefined) {\n      sizeStyles.width = typeof width === 'number' ? `${width}px` : width;\n      sizeStyles.maxWidth = '100%';\n    } else if (flex !== undefined) {\n      sizeStyles.flex = String(flex);\n    } else {\n      sizeStyles.flex = '1';\n    }\n\n    if (minWidth !== undefined) {\n      sizeStyles.minWidth =\n        typeof minWidth === 'number' ? `${minWidth}px` : minWidth;\n    }\n\n    return { ...sizeStyles, ...style };\n  }, [\n    layout.visible,\n    layout.isMobile,\n    layout.collapseMode,\n    layout.sizeManagedByRoot,\n    resolvedExpanded,\n    width,\n    flex,\n    minWidth,\n    style,\n  ]);\n\n  const isHidden = !layout.visible && !layout.isMobile;\n\n  return (\n    <PanelExpansionContext.Provider value={expansionValue}>\n      <div\n        data-slot=\"app-shell-panel\"\n        data-expanded={resolvedExpanded || undefined}\n        aria-hidden={isHidden || undefined}\n        inert={isHidden || undefined}\n        {...(layout.panelId\n          ? {\n              role: 'tabpanel' as const,\n              id: layout.panelId,\n              'aria-labelledby': layout.tabId,\n            }\n          : {})}\n        className={cn(\n          'flex h-full min-w-0 flex-col',\n          isHidden && 'overflow-clip',\n          width !== undefined &&\n            !resolvedExpanded &&\n            !isHidden &&\n            !layout.isMobile &&\n            !layout.sizeManagedByRoot &&\n            'shrink-0',\n          // Mobile panel entrance — subtle fade on tab switch\n          layout.isMobile && 'animate-[delight-fade-in_150ms_ease-out_both]',\n          layout.isMobile && 'motion-reduce:animate-none',\n          // Transitions for show/hide (desktop)\n          'transition-[flex,width,opacity] duration-300 ease-[cubic-bezier(0.16,1,0.3,1)]',\n          'motion-reduce:transition-none',\n          className,\n        )}\n        style={computedStyle}\n        {...props}\n      >\n        {children}\n      </div>\n    </PanelExpansionContext.Provider>\n  );\n}\n\nconst AppShellPanel = Object.assign(AppShellPanelRoot, {\n  displayName: 'AppShell.Panel',\n  __appShellType: APPSHELL_PANEL_TYPE,\n}) satisfies AppShellPanelComponent;\n\nexport { AppShellPanel };\n"],"mappings":";;;;;;AAMA,IAAa,sBAAsB;;;;;;;;;AA+BnC,SAAS,kBAAkB,EACzB,OACA,MACA,UACA,WAAW,OACX,kBACA,OACA,WACA,OACA,UACA,GAAG,SACsC;CACzC,MAAM,SAAS,MAAM,WAAW,kBAAkB;CAClD,MAAM,mBAAmB,OAAO,YAAY;CAC5C,MAAM,2BAA2B,OAAO,oBAAoB;CAE5D,MAAM,iBAAiB,MAAM,eACpB;EACL,UAAU;EACV,kBAAkB;CACpB,IACA,CAAC,kBAAkB,wBAAwB,CAC7C;CAGA,MAAM,gBAAgB,MAAM,cAAmC;EAE7D,IAAI,CAAC,OAAO,WAAW,CAAC,OAAO,UAAU;GACvC,IAAI,OAAO,iBAAiB,YAC1B,OAAO;IACL,GAAG;IACH,SAAS;IACT,OAAO;IACP,UAAU;IACV,UAAU;IACV,MAAM;IACN,UAAU;IACV,eAAe;GACjB;GAGF,OAAO;IACL,GAAG;IACH,SAAS;IACT,SAAS;IACT,OAAO;IACP,MAAM;IACN,UAAU;IACV,eAAe;GACjB;EACF;EAGA,IAAI,OAAO,UACT,OAAO;GAAE,GAAG;GAAO,MAAM;EAAI;EAG/B,IAAI,OAAO,mBACT,OAAO,EAAE,GAAG,MAAM;EAIpB,MAAM,aAAkC,CAAC;EACzC,IAAI,kBACF,WAAW,OAAO;OACb,IAAI,UAAU,KAAA,GAAW;GAC9B,WAAW,QAAQ,OAAO,UAAU,WAAW,GAAG,MAAM,MAAM;GAC9D,WAAW,WAAW;EACxB,OAAO,IAAI,SAAS,KAAA,GAClB,WAAW,OAAO,OAAO,IAAI;OAE7B,WAAW,OAAO;EAGpB,IAAI,aAAa,KAAA,GACf,WAAW,WACT,OAAO,aAAa,WAAW,GAAG,SAAS,MAAM;EAGrD,OAAO;GAAE,GAAG;GAAY,GAAG;EAAM;CACnC,GAAG;EACD,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;EACP;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,WAAW,CAAC,OAAO,WAAW,CAAC,OAAO;CAE5C,OACE,oBAAC,sBAAsB,UAAvB;EAAgC,OAAO;YACrC,oBAAC,OAAD;GACE,aAAU;GACV,iBAAe,oBAAoB,KAAA;GACnC,eAAa,YAAY,KAAA;GACzB,OAAO,YAAY,KAAA;GACnB,GAAK,OAAO,UACR;IACE,MAAM;IACN,IAAI,OAAO;IACX,mBAAmB,OAAO;GAC5B,IACA,CAAC;GACL,WAAW,GACT,gCACA,YAAY,iBACZ,UAAU,KAAA,KACR,CAAC,oBACD,CAAC,YACD,CAAC,OAAO,YACR,CAAC,OAAO,qBACR,YAEF,OAAO,YAAY,iDACnB,OAAO,YAAY,8BAEnB,kFACA,iCACA,SACF;GACA,OAAO;GACP,GAAI;GAEH;EACE,CAAA;CACyB,CAAA;AAEpC;AAEA,IAAM,gBAAgB,OAAO,OAAO,mBAAmB;CACrD,aAAa;CACb,gBAAgB;AAClB,CAAC"}
+{"version":3,"file":"index220.js","names":[],"sources":["../src/components/templates/AppShell/AppShellMobileTabBar.tsx"],"sourcesContent":["'use client';\n\nimport { Menu } from 'lucide-react';\nimport * as React from 'react';\nimport { cn } from '@/lib/utils';\n\nexport interface MobileTabBarPanel {\n  key?: React.Key;\n  label?: string;\n}\n\nexport interface AppShellMobileTabBarProps {\n  panels: MobileTabBarPanel[];\n  activeIndex: number;\n  onActiveChange: (index: number) => void;\n  onSidebarOpen?: () => void;\n  /** Base ID for generating ARIA tab/panel IDs */\n  baseId?: string;\n}\n\nfunction getMobileTabKey(\n  panel: MobileTabBarPanel,\n  fallbackLabel: string,\n): React.Key {\n  return panel.key ?? panel.label ?? fallbackLabel;\n}\n\n/**\n * Internal mobile tab bar for switching between panels on small viewports.\n * Implements the ARIA Tabs pattern with roving tabIndex and arrow key navigation.\n * Renders only when there are 2+ panels.\n */\nfunction AppShellMobileTabBar({\n  panels,\n  activeIndex,\n  onActiveChange,\n  onSidebarOpen,\n  baseId,\n}: AppShellMobileTabBarProps) {\n  const tabListRef = React.useRef<HTMLDivElement>(null);\n\n  const handleKeyDown = React.useCallback(\n    (e: React.KeyboardEvent) => {\n      let nextIndex: number | null = null;\n\n      switch (e.key) {\n        case 'ArrowRight':\n          nextIndex = (activeIndex + 1) % panels.length;\n          break;\n        case 'ArrowLeft':\n          nextIndex = (activeIndex - 1 + panels.length) % panels.length;\n          break;\n        case 'Home':\n          nextIndex = 0;\n          break;\n        case 'End':\n          nextIndex = panels.length - 1;\n          break;\n        default:\n          return;\n      }\n\n      e.preventDefault();\n      onActiveChange(nextIndex);\n\n      // Move focus to the newly active tab\n      const tabList = tabListRef.current;\n      if (tabList) {\n        const buttons =\n          tabList.querySelectorAll<HTMLButtonElement>('[role=\"tab\"]');\n        buttons[nextIndex]?.focus();\n      }\n    },\n    [activeIndex, panels.length, onActiveChange],\n  );\n\n  // Sliding pill indicator — measure active tab position\n  const [indicator, setIndicator] = React.useState<{\n    left: number;\n    width: number;\n  } | null>(null);\n\n  React.useEffect(() => {\n    const tabList = tabListRef.current;\n    if (!tabList || panels.length <= 1) return;\n    const buttons = tabList.querySelectorAll<HTMLButtonElement>('[role=\"tab\"]');\n    const activeBtn = buttons[activeIndex];\n    if (!activeBtn) return;\n    const left = activeBtn.offsetLeft;\n    const width = activeBtn.offsetWidth;\n    setIndicator((prev) =>\n      prev && prev.left === left && prev.width === width\n        ? prev\n        : { left, width },\n    );\n  }, [activeIndex, panels.length]);\n\n  const sidebarTrigger = onSidebarOpen ? (\n    <button\n      type=\"button\"\n      onClick={onSidebarOpen}\n      className={cn(\n        'flex min-h-11 min-w-11 items-center justify-center rounded-lg',\n        'text-secondary-foreground hover:bg-accent',\n        'active:scale-[0.95]',\n        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',\n        'transition-colors motion-reduce:transition-none',\n      )}\n      aria-label=\"Open sidebar\"\n    >\n      <Menu className=\"size-5\" />\n    </button>\n  ) : null;\n\n  if (panels.length <= 1) {\n    return sidebarTrigger ? (\n      <div\n        data-slot=\"app-shell-mobile-tab-bar\"\n        className=\"flex h-12 shrink-0 items-center px-3\"\n      >\n        {sidebarTrigger}\n      </div>\n    ) : null;\n  }\n\n  return (\n    <div\n      data-slot=\"app-shell-mobile-tab-bar\"\n      className=\"flex h-12 shrink-0 items-center gap-1 px-3\"\n    >\n      {sidebarTrigger}\n      <div\n        ref={tabListRef}\n        role=\"tablist\"\n        className=\"relative flex gap-1\"\n        onKeyDown={handleKeyDown}\n      >\n        {/* Sliding pill indicator */}\n        {indicator && (\n          <div\n            className={cn(\n              'absolute top-1/2 -translate-y-1/2 h-9 rounded-lg bg-accent',\n              'transition-[left,width] duration-200 ease-[cubic-bezier(0.16,1,0.3,1)]',\n              'motion-reduce:transition-none',\n            )}\n            style={{ left: indicator.left, width: indicator.width }}\n            aria-hidden=\"true\"\n          />\n        )}\n        {panels.map((panel, panelPosition) => {\n          const label = panel.label || `Panel ${panelPosition + 1}`;\n          const isActive = panelPosition === activeIndex;\n          const tabId = baseId ? `${baseId}-tab-${panelPosition}` : undefined;\n          const panelId = baseId\n            ? `${baseId}-tabpanel-${panelPosition}`\n            : undefined;\n          return (\n            <button\n              key={getMobileTabKey(panel, label)}\n              id={tabId}\n              type=\"button\"\n              role=\"tab\"\n              aria-selected={isActive}\n              aria-controls={panelId}\n              tabIndex={isActive ? 0 : -1}\n              onClick={() => onActiveChange(panelPosition)}\n              className={cn(\n                'relative z-10 rounded-lg px-3 min-h-9 text-sm font-medium',\n                'transition-colors duration-150 motion-reduce:transition-none',\n                'active:scale-[0.97]',\n                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',\n                isActive\n                  ? 'text-foreground'\n                  : 'text-secondary-foreground hover:text-foreground',\n              )}\n            >\n              {label}\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\nAppShellMobileTabBar.displayName = 'AppShellMobileTabBar';\n\nexport { AppShellMobileTabBar };\n"],"mappings":";;;;;;AAoBA,SAAS,gBACP,OACA,eACW;CACX,OAAO,MAAM,OAAO,MAAM,SAAS;AACrC;;;;;;AAOA,SAAS,qBAAqB,EAC5B,QACA,aACA,gBACA,eACA,UAC4B;CAC5B,MAAM,aAAa,MAAM,OAAuB,IAAI;CAEpD,MAAM,gBAAgB,MAAM,aACzB,MAA2B;EAC1B,IAAI,YAA2B;EAE/B,QAAQ,EAAE,KAAV;GACE,KAAK;IACH,aAAa,cAAc,KAAK,OAAO;IACvC;GACF,KAAK;IACH,aAAa,cAAc,IAAI,OAAO,UAAU,OAAO;IACvD;GACF,KAAK;IACH,YAAY;IACZ;GACF,KAAK;IACH,YAAY,OAAO,SAAS;IAC5B;GACF,SACE;EACJ;EAEA,EAAE,eAAe;EACjB,eAAe,SAAS;EAGxB,MAAM,UAAU,WAAW;EAC3B,IAAI,SAGF,QADU,iBAAoC,gBAC9C,CAAA,CAAQ,UAAU,EAAE,MAAM;CAE9B,GACA;EAAC;EAAa,OAAO;EAAQ;CAAc,CAC7C;CAGA,MAAM,CAAC,WAAW,gBAAgB,MAAM,SAG9B,IAAI;CAEd,MAAM,gBAAgB;EACpB,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,WAAW,OAAO,UAAU,GAAG;EAEpC,MAAM,YADU,QAAQ,iBAAoC,gBAC1C,CAAA,CAAQ;EAC1B,IAAI,CAAC,WAAW;EAChB,MAAM,OAAO,UAAU;EACvB,MAAM,QAAQ,UAAU;EACxB,cAAc,SACZ,QAAQ,KAAK,SAAS,QAAQ,KAAK,UAAU,QACzC,OACA;GAAE;GAAM;EAAM,CACpB;CACF,GAAG,CAAC,aAAa,OAAO,MAAM,CAAC;CAE/B,MAAM,iBAAiB,gBACrB,oBAAC,UAAD;EACE,MAAK;EACL,SAAS;EACT,WAAW,GACT,iEACA,6CACA,uBACA,2EACA,iDACF;EACA,cAAW;YAEX,oBAAC,MAAD,EAAM,WAAU,SAAU,CAAA;CACpB,CAAA,IACN;CAEJ,IAAI,OAAO,UAAU,GACnB,OAAO,iBACL,oBAAC,OAAD;EACE,aAAU;EACV,WAAU;YAET;CACE,CAAA,IACH;CAGN,OACE,qBAAC,OAAD;EACE,aAAU;EACV,WAAU;YAFZ,CAIG,gBACD,qBAAC,OAAD;GACE,KAAK;GACL,MAAK;GACL,WAAU;GACV,WAAW;aAJb,CAOG,aACC,oBAAC,OAAD;IACE,WAAW,GACT,8DACA,0EACA,+BACF;IACA,OAAO;KAAE,MAAM,UAAU;KAAM,OAAO,UAAU;IAAM;IACtD,eAAY;GACb,CAAA,GAEF,OAAO,KAAK,OAAO,kBAAkB;IACpC,MAAM,QAAQ,MAAM,SAAS,SAAS,gBAAgB;IACtD,MAAM,WAAW,kBAAkB;IAKnC,OACE,oBAAC,UAAD;KAEE,IAPU,SAAS,GAAG,OAAO,OAAO,kBAAkB,KAAA;KAQtD,MAAK;KACL,MAAK;KACL,iBAAe;KACf,iBAVY,SACZ,GAAG,OAAO,YAAY,kBACtB,KAAA;KASA,UAAU,WAAW,IAAI;KACzB,eAAe,eAAe,aAAa;KAC3C,WAAW,GACT,6DACA,gEACA,uBACA,2EACA,WACI,oBACA,iDACN;eAEC;IACK,GAnBD,gBAAgB,OAAO,KAAK,CAmB3B;GAEZ,CAAC,CACE;IACF;;AAET;AAEA,qBAAqB,cAAc"}

package/dist/index221.js

@@ -1,33 +1,101 @@
-//#region src/components/templates/AppShell/AppShellResize.ts
-var DEFAULT_PANEL_SIZES = [35, 65];
-function isFinitePositive(value) {
-	return Number.isFinite(value) && value > 0;
-}
-function normalizePanelSizes(sizes) {
-	if (!sizes) return DEFAULT_PANEL_SIZES;
-	const [first, second] = sizes;
-	if (!isFinitePositive(first) || !isFinitePositive(second)) return DEFAULT_PANEL_SIZES;
-	const total = first + second;
-	return [Number((first / total * 100).toFixed(4)), Number((second / total * 100).toFixed(4))];
-}
-function toResizablePercentageSize(size) {
-	return String(size);
-}
-function toResizableMinSize(minWidth) {
-	if (minWidth === void 0) return void 0;
-	return typeof minWidth === "number" ? `${minWidth}px` : minWidth;
-}
-function layoutMapToTuple(layout) {
-	return normalizePanelSizes([layout.panel0, layout.panel1]);
-}
-function getExpandedPanelFromLayout(layout, threshold = 85) {
-	const first = layout.panel0;
-	const second = layout.panel1;
-	if (first >= threshold) return 0;
-	if (second >= threshold) return 1;
-	return null;
+"use client";
+import { cn } from "./index2.js";
+import { PanelExpansionContext, PanelLayoutContext } from "./index218.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/templates/AppShell/AppShellPanel.tsx
+var APPSHELL_PANEL_TYPE = "AppShell.Panel";
+/**
+* Generic content slot for AppShell. Max 2 panels visible at a time.
+*
+* Sizing priority: expanded > width/flex > default (flex: 1)
+*
+* Reads PanelLayoutContext to self-manage visibility and mobile sizing,
+* eliminating the need for cloneElement style injection from Root.
+*/
+function AppShellPanelRoot({ width, flex, minWidth, expanded = false, onExpandedChange, label, className, style, children, ...props }) {
+	const layout = React.useContext(PanelLayoutContext);
+	const resolvedExpanded = layout.expanded ?? expanded;
+	const resolvedOnExpandedChange = layout.onExpandedChange ?? onExpandedChange;
+	const expansionValue = React.useMemo(() => ({
+		expanded: resolvedExpanded,
+		onExpandedChange: resolvedOnExpandedChange
+	}), [resolvedExpanded, resolvedOnExpandedChange]);
+	const computedStyle = React.useMemo(() => {
+		if (!layout.visible && !layout.isMobile) {
+			if (layout.collapseMode === "animated") return {
+				...style,
+				opacity: 0,
+				width: "0px",
+				maxWidth: "0px",
+				minWidth: "0px",
+				flex: "0 1 0px",
+				overflow: "hidden",
+				pointerEvents: "none"
+			};
+			return {
+				...style,
+				display: "none",
+				opacity: 0,
+				width: "0px",
+				flex: "0",
+				overflow: "hidden",
+				pointerEvents: "none"
+			};
+		}
+		if (layout.isMobile) return {
+			...style,
+			flex: "1"
+		};
+		if (layout.sizeManagedByRoot) return { ...style };
+		const sizeStyles = {};
+		if (resolvedExpanded) sizeStyles.flex = "1";
+		else if (width !== void 0) {
+			sizeStyles.width = typeof width === "number" ? `${width}px` : width;
+			sizeStyles.maxWidth = "100%";
+		} else if (flex !== void 0) sizeStyles.flex = String(flex);
+		else sizeStyles.flex = "1";
+		if (minWidth !== void 0) sizeStyles.minWidth = typeof minWidth === "number" ? `${minWidth}px` : minWidth;
+		return {
+			...sizeStyles,
+			...style
+		};
+	}, [
+		layout.visible,
+		layout.isMobile,
+		layout.collapseMode,
+		layout.sizeManagedByRoot,
+		resolvedExpanded,
+		width,
+		flex,
+		minWidth,
+		style
+	]);
+	const isHidden = !layout.visible && !layout.isMobile;
+	return /* @__PURE__ */ jsx(PanelExpansionContext.Provider, {
+		value: expansionValue,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "app-shell-panel",
+			"data-expanded": resolvedExpanded || void 0,
+			"aria-hidden": isHidden || void 0,
+			inert: isHidden || void 0,
+			...layout.panelId ? {
+				role: "tabpanel",
+				id: layout.panelId,
+				"aria-labelledby": layout.tabId
+			} : {},
+			className: cn("flex h-full min-w-0 flex-col", isHidden && "overflow-clip", width !== void 0 && !resolvedExpanded && !isHidden && !layout.isMobile && !layout.sizeManagedByRoot && "shrink-0", layout.isMobile && "animate-[delight-fade-in_150ms_ease-out_both]", layout.isMobile && "motion-reduce:animate-none", "transition-[flex,width,opacity] duration-300 ease-[cubic-bezier(0.16,1,0.3,1)]", "motion-reduce:transition-none", className),
+			style: computedStyle,
+			...props,
+			children
+		})
+	});
 }
+var AppShellPanel = Object.assign(AppShellPanelRoot, {
+	displayName: "AppShell.Panel",
+	__appShellType: APPSHELL_PANEL_TYPE
+});
 //#endregion
-export { DEFAULT_PANEL_SIZES, getExpandedPanelFromLayout, layoutMapToTuple, normalizePanelSizes, toResizableMinSize, toResizablePercentageSize };
+export { APPSHELL_PANEL_TYPE, AppShellPanel };
 
 //# sourceMappingURL=index221.js.map

package/dist/index221.js.map

@@ -1 +1 @@
-{"version":3,"file":"index221.js","names":[],"sources":["../src/components/templates/AppShell/AppShellResize.ts"],"sourcesContent":["export type PanelSizeTuple = [number, number];\nexport type PanelLayoutMap = Record<string, number>;\n\nexport const DEFAULT_PANEL_SIZES: PanelSizeTuple = [35, 65];\nexport const DEFAULT_EXPAND_THRESHOLD = 85;\n\nfunction isFinitePositive(value: number): boolean {\n  return Number.isFinite(value) && value > 0;\n}\n\nexport function normalizePanelSizes(\n  sizes: readonly [number, number] | undefined,\n): PanelSizeTuple {\n  if (!sizes) return DEFAULT_PANEL_SIZES;\n  const [first, second] = sizes;\n  if (!isFinitePositive(first) || !isFinitePositive(second)) {\n    return DEFAULT_PANEL_SIZES;\n  }\n\n  const total = first + second;\n  return [\n    Number(((first / total) * 100).toFixed(4)),\n    Number(((second / total) * 100).toFixed(4)),\n  ];\n}\n\nexport function toResizablePercentageSize(size: number): string {\n  return String(size);\n}\n\nexport function toResizableMinSize(\n  minWidth: number | string | undefined,\n): string | undefined {\n  if (minWidth === undefined) return undefined;\n  return typeof minWidth === 'number' ? `${minWidth}px` : minWidth;\n}\n\nexport function layoutMapToTuple(layout: PanelLayoutMap): PanelSizeTuple {\n  return normalizePanelSizes([layout.panel0, layout.panel1]);\n}\n\nexport function getExpandedPanelFromLayout(\n  layout: PanelLayoutMap,\n  threshold = DEFAULT_EXPAND_THRESHOLD,\n): number | null {\n  const first = layout.panel0;\n  const second = layout.panel1;\n  if (first >= threshold) return 0;\n  if (second >= threshold) return 1;\n  return null;\n}\n"],"mappings":";AAGA,IAAa,sBAAsC,CAAC,IAAI,EAAE;AAG1D,SAAS,iBAAiB,OAAwB;CAChD,OAAO,OAAO,SAAS,KAAK,KAAK,QAAQ;AAC3C;AAEA,SAAgB,oBACd,OACgB;CAChB,IAAI,CAAC,OAAO,OAAO;CACnB,MAAM,CAAC,OAAO,UAAU;CACxB,IAAI,CAAC,iBAAiB,KAAK,KAAK,CAAC,iBAAiB,MAAM,GACtD,OAAO;CAGT,MAAM,QAAQ,QAAQ;CACtB,OAAO,CACL,QAAS,QAAQ,QAAS,IAAA,CAAK,QAAQ,CAAC,CAAC,GACzC,QAAS,SAAS,QAAS,IAAA,CAAK,QAAQ,CAAC,CAAC,CAC5C;AACF;AAEA,SAAgB,0BAA0B,MAAsB;CAC9D,OAAO,OAAO,IAAI;AACpB;AAEA,SAAgB,mBACd,UACoB;CACpB,IAAI,aAAa,KAAA,GAAW,OAAO,KAAA;CACnC,OAAO,OAAO,aAAa,WAAW,GAAG,SAAS,MAAM;AAC1D;AAEA,SAAgB,iBAAiB,QAAwC;CACvE,OAAO,oBAAoB,CAAC,OAAO,QAAQ,OAAO,MAAM,CAAC;AAC3D;AAEA,SAAgB,2BACd,QACA,YAAA,IACe;CACf,MAAM,QAAQ,OAAO;CACrB,MAAM,SAAS,OAAO;CACtB,IAAI,SAAS,WAAW,OAAO;CAC/B,IAAI,UAAU,WAAW,OAAO;CAChC,OAAO;AACT"}
+{"version":3,"file":"index221.js","names":[],"sources":["../src/components/templates/AppShell/AppShellPanel.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cn } from '@/lib/utils';\nimport { PanelExpansionContext, PanelLayoutContext } from './AppShellContext';\n\nexport const APPSHELL_PANEL_TYPE = 'AppShell.Panel' as const;\n\nexport interface AppShellPanelProps extends React.ComponentProps<'div'> {\n  /** Fixed width in pixels (number) or CSS string */\n  width?: number | string;\n  /** Flex grow value */\n  flex?: number | string;\n  /** Minimum width in pixels (number) or CSS string */\n  minWidth?: number | string;\n  /** When true, panel takes all content space (flex: 1), sibling panels hidden */\n  expanded?: boolean;\n  /** Callback when expanded state should change */\n  onExpandedChange?: (expanded: boolean) => void;\n  /** Label shown in mobile tab bar */\n  label?: string;\n}\n\nexport interface AppShellPanelComponent {\n  (props: AppShellPanelProps): React.ReactElement;\n  displayName?: string;\n  __appShellType: typeof APPSHELL_PANEL_TYPE;\n}\n\n/**\n * Generic content slot for AppShell. Max 2 panels visible at a time.\n *\n * Sizing priority: expanded > width/flex > default (flex: 1)\n *\n * Reads PanelLayoutContext to self-manage visibility and mobile sizing,\n * eliminating the need for cloneElement style injection from Root.\n */\nfunction AppShellPanelRoot({\n  width,\n  flex,\n  minWidth,\n  expanded = false,\n  onExpandedChange,\n  label,\n  className,\n  style,\n  children,\n  ...props\n}: AppShellPanelProps): React.ReactElement {\n  const layout = React.useContext(PanelLayoutContext);\n  const resolvedExpanded = layout.expanded ?? expanded;\n  const resolvedOnExpandedChange = layout.onExpandedChange ?? onExpandedChange;\n\n  const expansionValue = React.useMemo(\n    () => ({\n      expanded: resolvedExpanded,\n      onExpandedChange: resolvedOnExpandedChange,\n    }),\n    [resolvedExpanded, resolvedOnExpandedChange],\n  );\n\n  // Compute inline styles based on layout context + sizing rules\n  const computedStyle = React.useMemo((): React.CSSProperties => {\n    // Hidden panel (desktop: non-visible overflow or non-expanded sibling)\n    if (!layout.visible && !layout.isMobile) {\n      if (layout.collapseMode === 'animated') {\n        return {\n          ...style,\n          opacity: 0,\n          width: '0px',\n          maxWidth: '0px',\n          minWidth: '0px',\n          flex: '0 1 0px',\n          overflow: 'hidden',\n          pointerEvents: 'none',\n        };\n      }\n\n      return {\n        ...style,\n        display: 'none',\n        opacity: 0,\n        width: '0px',\n        flex: '0',\n        overflow: 'hidden',\n        pointerEvents: 'none',\n      };\n    }\n\n    // Mobile active panel: fill available space\n    if (layout.isMobile) {\n      return { ...style, flex: '1' };\n    }\n\n    if (layout.sizeManagedByRoot) {\n      return { ...style };\n    }\n\n    // Desktop visible panel: apply sizing rules\n    const sizeStyles: React.CSSProperties = {};\n    if (resolvedExpanded) {\n      sizeStyles.flex = '1';\n    } else if (width !== undefined) {\n      sizeStyles.width = typeof width === 'number' ? `${width}px` : width;\n      sizeStyles.maxWidth = '100%';\n    } else if (flex !== undefined) {\n      sizeStyles.flex = String(flex);\n    } else {\n      sizeStyles.flex = '1';\n    }\n\n    if (minWidth !== undefined) {\n      sizeStyles.minWidth =\n        typeof minWidth === 'number' ? `${minWidth}px` : minWidth;\n    }\n\n    return { ...sizeStyles, ...style };\n  }, [\n    layout.visible,\n    layout.isMobile,\n    layout.collapseMode,\n    layout.sizeManagedByRoot,\n    resolvedExpanded,\n    width,\n    flex,\n    minWidth,\n    style,\n  ]);\n\n  const isHidden = !layout.visible && !layout.isMobile;\n\n  return (\n    <PanelExpansionContext.Provider value={expansionValue}>\n      <div\n        data-slot=\"app-shell-panel\"\n        data-expanded={resolvedExpanded || undefined}\n        aria-hidden={isHidden || undefined}\n        inert={isHidden || undefined}\n        {...(layout.panelId\n          ? {\n              role: 'tabpanel' as const,\n              id: layout.panelId,\n              'aria-labelledby': layout.tabId,\n            }\n          : {})}\n        className={cn(\n          'flex h-full min-w-0 flex-col',\n          isHidden && 'overflow-clip',\n          width !== undefined &&\n            !resolvedExpanded &&\n            !isHidden &&\n            !layout.isMobile &&\n            !layout.sizeManagedByRoot &&\n            'shrink-0',\n          // Mobile panel entrance — subtle fade on tab switch\n          layout.isMobile && 'animate-[delight-fade-in_150ms_ease-out_both]',\n          layout.isMobile && 'motion-reduce:animate-none',\n          // Transitions for show/hide (desktop)\n          'transition-[flex,width,opacity] duration-300 ease-[cubic-bezier(0.16,1,0.3,1)]',\n          'motion-reduce:transition-none',\n          className,\n        )}\n        style={computedStyle}\n        {...props}\n      >\n        {children}\n      </div>\n    </PanelExpansionContext.Provider>\n  );\n}\n\nconst AppShellPanel = Object.assign(AppShellPanelRoot, {\n  displayName: 'AppShell.Panel',\n  __appShellType: APPSHELL_PANEL_TYPE,\n}) satisfies AppShellPanelComponent;\n\nexport { AppShellPanel };\n"],"mappings":";;;;;;AAMA,IAAa,sBAAsB;;;;;;;;;AA+BnC,SAAS,kBAAkB,EACzB,OACA,MACA,UACA,WAAW,OACX,kBACA,OACA,WACA,OACA,UACA,GAAG,SACsC;CACzC,MAAM,SAAS,MAAM,WAAW,kBAAkB;CAClD,MAAM,mBAAmB,OAAO,YAAY;CAC5C,MAAM,2BAA2B,OAAO,oBAAoB;CAE5D,MAAM,iBAAiB,MAAM,eACpB;EACL,UAAU;EACV,kBAAkB;CACpB,IACA,CAAC,kBAAkB,wBAAwB,CAC7C;CAGA,MAAM,gBAAgB,MAAM,cAAmC;EAE7D,IAAI,CAAC,OAAO,WAAW,CAAC,OAAO,UAAU;GACvC,IAAI,OAAO,iBAAiB,YAC1B,OAAO;IACL,GAAG;IACH,SAAS;IACT,OAAO;IACP,UAAU;IACV,UAAU;IACV,MAAM;IACN,UAAU;IACV,eAAe;GACjB;GAGF,OAAO;IACL,GAAG;IACH,SAAS;IACT,SAAS;IACT,OAAO;IACP,MAAM;IACN,UAAU;IACV,eAAe;GACjB;EACF;EAGA,IAAI,OAAO,UACT,OAAO;GAAE,GAAG;GAAO,MAAM;EAAI;EAG/B,IAAI,OAAO,mBACT,OAAO,EAAE,GAAG,MAAM;EAIpB,MAAM,aAAkC,CAAC;EACzC,IAAI,kBACF,WAAW,OAAO;OACb,IAAI,UAAU,KAAA,GAAW;GAC9B,WAAW,QAAQ,OAAO,UAAU,WAAW,GAAG,MAAM,MAAM;GAC9D,WAAW,WAAW;EACxB,OAAO,IAAI,SAAS,KAAA,GAClB,WAAW,OAAO,OAAO,IAAI;OAE7B,WAAW,OAAO;EAGpB,IAAI,aAAa,KAAA,GACf,WAAW,WACT,OAAO,aAAa,WAAW,GAAG,SAAS,MAAM;EAGrD,OAAO;GAAE,GAAG;GAAY,GAAG;EAAM;CACnC,GAAG;EACD,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;EACP;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,WAAW,CAAC,OAAO,WAAW,CAAC,OAAO;CAE5C,OACE,oBAAC,sBAAsB,UAAvB;EAAgC,OAAO;YACrC,oBAAC,OAAD;GACE,aAAU;GACV,iBAAe,oBAAoB,KAAA;GACnC,eAAa,YAAY,KAAA;GACzB,OAAO,YAAY,KAAA;GACnB,GAAK,OAAO,UACR;IACE,MAAM;IACN,IAAI,OAAO;IACX,mBAAmB,OAAO;GAC5B,IACA,CAAC;GACL,WAAW,GACT,gCACA,YAAY,iBACZ,UAAU,KAAA,KACR,CAAC,oBACD,CAAC,YACD,CAAC,OAAO,YACR,CAAC,OAAO,qBACR,YAEF,OAAO,YAAY,iDACnB,OAAO,YAAY,8BAEnB,kFACA,iCACA,SACF;GACA,OAAO;GACP,GAAI;GAEH;EACE,CAAA;CACyB,CAAA;AAEpC;AAEA,IAAM,gBAAgB,OAAO,OAAO,mBAAmB;CACrD,aAAa;CACb,gBAAgB;AAClB,CAAC"}