@stackone/malachite 2.56.0 → 2.57.1

package/dist/components/SidePanel.js

@@ -1,153 +1,170 @@
 import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import { useState as g, useRef as s, useEffect as V } from "react";
-import { createPortal as L } from "react-dom";
-import { ShadowRootWrapper as M } from "../ShadowRootWrapper.js";
-import W from "./CustomIcons/ArrowLeftIcon.js";
-import j from "./CustomIcons/DismissIcon.js";
-import w from "./Typography/EllipsisText.js";
-import { useOverlayBehaviour as D, OVERLAY_ICON_BUTTON_CLASSES as I } from "./overlayBehaviour.js";
-import { OVERLAY_ELEVATED_ATTR as F, overlayIdentity as R } from "./portalOverlay.js";
-const S = 200, X = (l) => typeof l == "number" ? `${l}px` : l, Z = ({
-  open: l,
-  onClose: n,
-  title: i,
-  subtitle: o,
-  titleExtra: c,
-  description: d,
-  headerDivider: A = !1,
-  icon: m,
-  headerExtra: u,
-  footer: p,
-  onBack: f,
-  maxWidth: k = 1080,
-  "aria-label": z,
-  "aria-labelledby": x,
-  bodyPadding: h = !0,
-  stacking: E = "default",
-  children: b
+import { useState as R, useRef as d, useEffect as F } from "react";
+import { createPortal as X } from "react-dom";
+import { ShadowRootWrapper as Y } from "../ShadowRootWrapper.js";
+import q from "./CalloutStrip.js";
+import U from "./CustomIcons/ArrowLeftIcon.js";
+import G from "./CustomIcons/DismissIcon.js";
+import A from "./Typography/EllipsisText.js";
+import { useOverlayBehaviour as H, OVERLAY_ICON_BUTTON_CLASSES as k } from "./overlayBehaviour.js";
+import { OVERLAY_ELEVATED_ATTR as J, overlayIdentity as z } from "./portalOverlay.js";
+const E = 200, K = (t) => typeof t == "number" ? `${t}px` : t, oe = ({
+  open: t,
+  onClose: o,
+  title: n,
+  subtitle: c,
+  titleExtra: p,
+  description: u,
+  headerDivider: O = !1,
+  icon: f,
+  headerExtra: x,
+  footer: h,
+  onBack: b,
+  maxWidth: _ = 1080,
+  "aria-label": $,
+  "aria-labelledby": v,
+  bodyPadding: y = !0,
+  stacking: P = "default",
+  callouts: m,
+  renderLink: V,
+  children: N
 }) => {
-  const [v, N] = g(!1), [O, y] = g(!1), t = s(null), r = s(null), T = s(null), {
-    ref: _,
-    isTopmost: $,
-    zIndex: C,
-    elevated: P
-  } = D({
-    open: l,
-    onClose: n,
-    elevated: E === "above-app-overlays",
-    hostRef: T
+  const [g, T] = R(!1), [C, w] = R(!1), i = d(null), r = d(null), S = d(null), {
+    ref: L,
+    isTopmost: M,
+    zIndex: W,
+    elevated: j
+  } = H({
+    open: t,
+    onClose: o,
+    elevated: P === "above-app-overlays",
+    hostRef: S
   });
-  return V(() => (l ? (y(!0), r.current && (clearTimeout(r.current), r.current = null), t.current = requestAnimationFrame(() => {
-    t.current = null, N(!0);
-  })) : (N(!1), r.current = setTimeout(() => {
-    r.current = null, y(!1);
-  }, S)), () => {
-    t.current !== null && (cancelAnimationFrame(t.current), t.current = null), r.current && (clearTimeout(r.current), r.current = null);
-  }), [l]), O ? L(
+  if (F(() => (t ? (w(!0), r.current && (clearTimeout(r.current), r.current = null), i.current = requestAnimationFrame(() => {
+    i.current = null, T(!0);
+  })) : (T(!1), r.current = setTimeout(() => {
+    r.current = null, w(!1);
+  }, E)), () => {
+    i.current !== null && (cancelAnimationFrame(i.current), i.current = null), r.current && (clearTimeout(r.current), r.current = null);
+  }), [t]), !C)
+    return null;
+  const l = m == null ? void 0 : m.filter((s) => s.message.trim()), I = !!(l != null && l.length), B = y ? /* @__PURE__ */ e("div", { className: I ? "p-[28px]" : "py-[28px]", children: N }) : N;
+  return X(
     // Host carries the stacking context — ShadowRootWrapper's `isolation` would
     // otherwise flatten our z-index and let sticky page elements paint over us.
     /* @__PURE__ */ e(
-      M,
+      Y,
       {
-        hostRef: T,
-        hostStyle: { position: "relative", zIndex: C },
-        hostProps: P ? { ...R("sidepanel"), [F]: "" } : R("sidepanel"),
+        hostRef: S,
+        hostStyle: { position: "relative", zIndex: W },
+        hostProps: j ? { ...z("sidepanel"), [J]: "" } : z("sidepanel"),
         children: /* @__PURE__ */ a("div", { className: "fixed inset-0 z-[1000]", children: [
           /* @__PURE__ */ e(
             "div",
             {
               "aria-hidden": "true",
-              onClick: n,
-              className: `absolute inset-0 bg-[var(--malachite-overlay-scrim)] transition-opacity duration-200 ease-in-out ${v ? "opacity-100" : "opacity-0"}`
+              onClick: o,
+              className: `absolute inset-0 bg-[var(--malachite-overlay-scrim)] transition-opacity duration-200 ease-in-out ${g ? "opacity-100" : "opacity-0"}`
             }
           ),
           /* @__PURE__ */ a(
             "div",
             {
-              ref: _,
+              ref: L,
               role: "dialog",
-              "aria-modal": $ ? "true" : void 0,
+              "aria-modal": M ? "true" : void 0,
               tabIndex: -1,
-              "aria-label": x ? void 0 : z ?? (typeof i == "string" ? i : void 0),
-              "aria-labelledby": x,
+              "aria-label": v ? void 0 : $ ?? (typeof n == "string" ? n : void 0),
+              "aria-labelledby": v,
               className: "absolute top-[8px] right-[8px] bottom-[8px] flex flex-col overflow-hidden rounded-[20px] border border-solid border-[var(--malachite-card-border)] bg-[var(--malachite-card-background)] text-[var(--malachite-card-foreground)] outline-none [box-shadow:var(--malachite-shadow-lg)]",
               style: {
-                width: `min(calc(100% - 16px), ${X(k)})`,
+                width: `min(calc(100% - 16px), ${K(_)})`,
                 // Inline: Tailwind translate utilities silently break inside
                 // shadow roots (see CLAUDE.md Shadow DOM caveats).
-                transform: v ? "translateX(0)" : "translateX(calc(100% + 16px))",
-                transition: `transform ${S}ms ease-in-out`
+                transform: g ? "translateX(0)" : "translateX(calc(100% + 16px))",
+                transition: `transform ${E}ms ease-in-out`
               },
               children: [
                 /* @__PURE__ */ a(
                   "div",
                   {
-                    className: `flex flex-col gap-[20px] px-[20px] py-[18px] ${A ? "border-0 border-b border-solid border-[var(--malachite-card-border)]" : ""}`,
+                    className: `flex flex-col gap-[20px] px-[20px] py-[18px] ${O ? "border-0 border-b border-solid border-[var(--malachite-card-border)]" : ""}`,
                     children: [
                       /* @__PURE__ */ a("div", { className: "flex items-center gap-[12px]", children: [
-                        f ? /* @__PURE__ */ e(
+                        b ? /* @__PURE__ */ e(
                           "button",
                           {
                             type: "button",
                             "aria-label": "Back",
-                            onClick: f,
-                            className: I,
-                            children: /* @__PURE__ */ e(W, { size: 16 })
+                            onClick: b,
+                            className: k,
+                            children: /* @__PURE__ */ e(U, { size: 16 })
                           }
                         ) : null,
-                        m ? /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center", children: m }) : null,
+                        f ? /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center", children: f }) : null,
                         /* @__PURE__ */ a("div", { className: "flex min-w-0 flex-1 items-baseline gap-[12px]", children: [
                           /* @__PURE__ */ a("div", { className: "flex min-w-0 flex-1 items-baseline gap-[8px]", children: [
                             /* @__PURE__ */ a("div", { className: "flex min-w-0 items-baseline gap-[8px]", children: [
                               /* @__PURE__ */ e("span", { className: "flex min-w-0 max-w-full shrink-0", children: /* @__PURE__ */ e(
-                                w,
+                                A,
                                 {
-                                  tooltip: i,
+                                  tooltip: n,
                                   tooltipWhenTruncated: !0,
                                   tooltipPlacement: "bottom",
                                   className: "min-w-0 text-[length:var(--malachite-font-size-15,15px)] font-semibold",
-                                  children: i
+                                  children: n
                                 }
                               ) }),
-                              o ? /* @__PURE__ */ e(
-                                w,
+                              c ? /* @__PURE__ */ e(
+                                A,
                                 {
-                                  tooltip: o,
+                                  tooltip: c,
                                   tooltipWhenTruncated: !0,
                                   tooltipPlacement: "bottom",
                                   color: "secondary",
                                   className: "min-w-0 text-[13px]",
-                                  children: o
+                                  children: c
                                 }
                               ) : null
                             ] }),
-                            c ? /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center", children: c }) : null
+                            p ? /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center", children: p }) : null
                           ] }),
-                          u ? /* @__PURE__ */ e("span", { className: "flex shrink-0 items-baseline", children: u }) : null
+                          x ? /* @__PURE__ */ e("span", { className: "flex shrink-0 items-baseline", children: x }) : null
                         ] }),
                         /* @__PURE__ */ e(
                           "button",
                           {
                             type: "button",
                             "aria-label": "Close",
-                            onClick: n,
-                            className: I,
-                            children: /* @__PURE__ */ e(j, { size: 10 })
+                            onClick: o,
+                            className: k,
+                            children: /* @__PURE__ */ e(G, { size: 10 })
                           }
                         )
                       ] }),
-                      d ? /* @__PURE__ */ e("div", { className: "text-[13px] leading-[1.6] text-[var(--malachite-text-secondary)]", children: d }) : null
+                      u ? /* @__PURE__ */ e("div", { className: "text-[13px] leading-[1.6] text-[var(--malachite-text-secondary)]", children: u }) : null
                     ]
                   }
                 ),
-                /* @__PURE__ */ e(
+                /* @__PURE__ */ a(
                   "div",
                   {
-                    className: `min-h-0 flex-1 overflow-y-auto ${h ? "px-[28px]" : ""}`,
-                    children: h ? /* @__PURE__ */ e("div", { className: "py-[28px]", children: b }) : b
+                    className: `min-h-0 flex-1 overflow-y-auto ${y && !I ? "px-[28px]" : ""}`,
+                    children: [
+                      l == null ? void 0 : l.map((s, D) => /* @__PURE__ */ e(
+                        q,
+                        {
+                          type: s.type,
+                          message: s.message,
+                          renderLink: V
+                        },
+                        D
+                      )),
+                      B
+                    ]
                   }
                 ),
-                p ? /* @__PURE__ */ e("div", { className: "border-0 border-t border-solid border-[var(--malachite-card-border)] px-[24px] py-[16px]", children: p }) : null
+                h ? /* @__PURE__ */ e("div", { className: "border-0 border-t border-solid border-[var(--malachite-card-border)] px-[24px] py-[16px]", children: h }) : null
               ]
             }
           )
@@ -155,10 +172,10 @@ const S = 200, X = (l) => typeof l == "number" ? `${l}px` : l, Z = ({
       }
     ),
     document.body
-  ) : null;
+  );
 };
 export {
-  Z as SidePanel,
-  Z as default
+  oe as SidePanel,
+  oe as default
 };
 //# sourceMappingURL=SidePanel.js.map

package/dist/components/SidePanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanel.js","sources":["../../src/components/SidePanel.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { ShadowRootWrapper } from '../ShadowRootWrapper';\nimport ArrowLeftIcon from './CustomIcons/ArrowLeftIcon';\nimport DismissIcon from './CustomIcons/DismissIcon';\nimport EllipsisText from './Typography/EllipsisText';\nimport { OVERLAY_ICON_BUTTON_CLASSES, useOverlayBehaviour } from './overlayBehaviour';\nimport { OVERLAY_ELEVATED_ATTR, overlayIdentity } from './portalOverlay';\n\nexport interface SidePanelProps {\n    open: boolean;\n    /** Dismiss handler — close button, ESC, or overlay click. */\n    onClose: () => void;\n    title: React.ReactNode;\n    /** Secondary text, inline after the title. */\n    subtitle?: React.ReactNode;\n    /** Content at the end of the title row, after the subtitle (e.g. a status tag). */\n    titleExtra?: React.ReactNode;\n    /** Block paragraph below the title row, spanning the header width. */\n    description?: React.ReactNode;\n    /** Divider under the header. Default: false. */\n    headerDivider?: boolean;\n    /** Leading header slot, typically a logo or icon. */\n    icon?: React.ReactNode;\n    /** Content pinned right in the header, before the close button. */\n    headerExtra?: React.ReactNode;\n    footer?: React.ReactNode;\n    /** Renders a back button before the header icon. */\n    onBack?: () => void;\n    /** Maximum panel width. Default: 1080. */\n    maxWidth?: number | string;\n    /** Accessible dialog name; required when `title` isn't a plain string. */\n    'aria-label'?: string;\n    /** ID of a visible element naming the dialog (alternative to `aria-label`). */\n    'aria-labelledby'?: string;\n    /** Whether the body gets default padding. Default: true. */\n    bodyPadding?: boolean;\n    /** `above-app-overlays` lifts the overlay stack clear of chrome pinned near max-int. */\n    stacking?: 'default' | 'above-app-overlays';\n    children: React.ReactNode;\n}\n\nconst TRANSITION_MS = 200;\n\nconst toCssSize = (value: number | string): string =>\n    typeof value === 'number' ? `${value}px` : value;\n\n/**\n * A right-hand slide-in overlay panel (drawer) for inspecting or editing an entity\n * without leaving the page. Portals to `document.body`, locks background scroll and\n * traps keyboard focus while open (restoring both on close), dismisses on ESC\n * (topmost open overlay only), overlay click or the close button, and exposes header\n * (back/icon/title/subtitle/extra), scrollable body and optional footer slots.\n */\nconst SidePanel: React.FC<SidePanelProps> = ({\n    open,\n    onClose,\n    title,\n    subtitle,\n    titleExtra,\n    description,\n    headerDivider = false,\n    icon,\n    headerExtra,\n    footer,\n    onBack,\n    maxWidth = 1080,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    bodyPadding = true,\n    stacking = 'default',\n    children,\n}) => {\n    const [isVisible, setIsVisible] = useState(false);\n    const [isMounted, setIsMounted] = useState(false);\n    const frameRef = useRef<number | null>(null);\n    const unmountTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n    const hostRef = useRef<HTMLDivElement | null>(null);\n    const {\n        ref: handlePanelRef,\n        isTopmost,\n        zIndex,\n        elevated,\n    } = useOverlayBehaviour({\n        open,\n        onClose,\n        elevated: stacking === 'above-app-overlays',\n        hostRef,\n    });\n\n    useEffect(() => {\n        if (open) {\n            setIsMounted(true);\n            if (unmountTimerRef.current) {\n                clearTimeout(unmountTimerRef.current);\n                unmountTimerRef.current = null;\n            }\n            frameRef.current = requestAnimationFrame(() => {\n                frameRef.current = null;\n                setIsVisible(true);\n            });\n        } else {\n            setIsVisible(false);\n            unmountTimerRef.current = setTimeout(() => {\n                unmountTimerRef.current = null;\n                setIsMounted(false);\n            }, TRANSITION_MS);\n        }\n        return () => {\n            if (frameRef.current !== null) {\n                cancelAnimationFrame(frameRef.current);\n                frameRef.current = null;\n            }\n            if (unmountTimerRef.current) {\n                clearTimeout(unmountTimerRef.current);\n                unmountTimerRef.current = null;\n            }\n        };\n    }, [open]);\n\n    if (!isMounted) {\n        return null;\n    }\n\n    return createPortal(\n        // Host carries the stacking context — ShadowRootWrapper's `isolation` would\n        // otherwise flatten our z-index and let sticky page elements paint over us.\n        <ShadowRootWrapper\n            hostRef={hostRef}\n            hostStyle={{ position: 'relative', zIndex }}\n            hostProps={\n                elevated\n                    ? { ...overlayIdentity('sidepanel'), [OVERLAY_ELEVATED_ATTR]: '' }\n                    : overlayIdentity('sidepanel')\n            }\n        >\n            <div className=\"fixed inset-0 z-[1000]\">\n                <div\n                    aria-hidden=\"true\"\n                    onClick={onClose}\n                    className={`absolute inset-0 bg-[var(--malachite-overlay-scrim)] transition-opacity duration-200 ease-in-out ${\n                        isVisible ? 'opacity-100' : 'opacity-0'\n                    }`}\n                />\n                <div\n                    ref={handlePanelRef}\n                    role=\"dialog\"\n                    // Only the topmost overlay may claim it, or a screen reader can still\n                    // browse the one underneath.\n                    aria-modal={isTopmost ? 'true' : undefined}\n                    tabIndex={-1}\n                    // Prefer aria-labelledby; only fall back to aria-label when it's absent.\n                    aria-label={\n                        ariaLabelledBy\n                            ? undefined\n                            : (ariaLabel ?? (typeof title === 'string' ? title : undefined))\n                    }\n                    aria-labelledby={ariaLabelledBy}\n                    className=\"absolute top-[8px] right-[8px] bottom-[8px] flex flex-col overflow-hidden rounded-[20px] border border-solid border-[var(--malachite-card-border)] bg-[var(--malachite-card-background)] text-[var(--malachite-card-foreground)] outline-none [box-shadow:var(--malachite-shadow-lg)]\"\n                    style={{\n                        width: `min(calc(100% - 16px), ${toCssSize(maxWidth)})`,\n                        // Inline: Tailwind translate utilities silently break inside\n                        // shadow roots (see CLAUDE.md Shadow DOM caveats).\n                        transform: isVisible ? 'translateX(0)' : 'translateX(calc(100% + 16px))',\n                        transition: `transform ${TRANSITION_MS}ms ease-in-out`,\n                    }}\n                >\n                    <div\n                        className={`flex flex-col gap-[20px] px-[20px] py-[18px] ${\n                            headerDivider\n                                ? 'border-0 border-b border-solid border-[var(--malachite-card-border)]'\n                                : ''\n                        }`}\n                    >\n                        <div className=\"flex items-center gap-[12px]\">\n                            {onBack ? (\n                                <button\n                                    type=\"button\"\n                                    aria-label=\"Back\"\n                                    onClick={onBack}\n                                    className={OVERLAY_ICON_BUTTON_CLASSES}\n                                >\n                                    <ArrowLeftIcon size={16} />\n                                </button>\n                            ) : null}\n                            {icon ? (\n                                <span className=\"flex shrink-0 items-center\">{icon}</span>\n                            ) : null}\n                            <div className=\"flex min-w-0 flex-1 items-baseline gap-[12px]\">\n                                <div className=\"flex min-w-0 flex-1 items-baseline gap-[8px]\">\n                                    <div className=\"flex min-w-0 items-baseline gap-[8px]\">\n                                        <span className=\"flex min-w-0 max-w-full shrink-0\">\n                                            <EllipsisText\n                                                tooltip={title}\n                                                tooltipWhenTruncated\n                                                tooltipPlacement=\"bottom\"\n                                                className=\"min-w-0 text-[length:var(--malachite-font-size-15,15px)] font-semibold\"\n                                            >\n                                                {title}\n                                            </EllipsisText>\n                                        </span>\n                                        {subtitle ? (\n                                            <EllipsisText\n                                                tooltip={subtitle}\n                                                tooltipWhenTruncated\n                                                tooltipPlacement=\"bottom\"\n                                                color=\"secondary\"\n                                                className=\"min-w-0 text-[13px]\"\n                                            >\n                                                {subtitle}\n                                            </EllipsisText>\n                                        ) : null}\n                                    </div>\n                                    {titleExtra ? (\n                                        <span className=\"flex shrink-0 items-center\">\n                                            {titleExtra}\n                                        </span>\n                                    ) : null}\n                                </div>\n                                {headerExtra ? (\n                                    <span className=\"flex shrink-0 items-baseline\">\n                                        {headerExtra}\n                                    </span>\n                                ) : null}\n                            </div>\n                            <button\n                                type=\"button\"\n                                aria-label=\"Close\"\n                                onClick={onClose}\n                                className={OVERLAY_ICON_BUTTON_CLASSES}\n                            >\n                                <DismissIcon size={10} />\n                            </button>\n                        </div>\n                        {description ? (\n                            <div className=\"text-[13px] leading-[1.6] text-[var(--malachite-text-secondary)]\">\n                                {description}\n                            </div>\n                        ) : null}\n                    </div>\n                    <div\n                        className={`min-h-0 flex-1 overflow-y-auto ${bodyPadding ? 'px-[28px]' : ''}`}\n                    >\n                        {bodyPadding ? <div className=\"py-[28px]\">{children}</div> : children}\n                    </div>\n                    {footer ? (\n                        <div className=\"border-0 border-t border-solid border-[var(--malachite-card-border)] px-[24px] py-[16px]\">\n                            {footer}\n                        </div>\n                    ) : null}\n                </div>\n            </div>\n        </ShadowRootWrapper>,\n        document.body,\n    );\n};\n\nexport default SidePanel;\nexport { SidePanel };\n"],"names":["TRANSITION_MS","toCssSize","value","SidePanel","open","onClose","title","subtitle","titleExtra","description","headerDivider","icon","headerExtra","footer","onBack","maxWidth","ariaLabel","ariaLabelledBy","bodyPadding","stacking","children","isVisible","setIsVisible","useState","isMounted","setIsMounted","frameRef","useRef","unmountTimerRef","hostRef","handlePanelRef","isTopmost","zIndex","elevated","useOverlayBehaviour","useEffect","createPortal","jsx","ShadowRootWrapper","overlayIdentity","OVERLAY_ELEVATED_ATTR","jsxs","OVERLAY_ICON_BUTTON_CLASSES","ArrowLeftIcon","EllipsisText","DismissIcon"],"mappings":"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"}
+{"version":3,"file":"SidePanel.js","sources":["../../src/components/SidePanel.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { ShadowRootWrapper } from '../ShadowRootWrapper';\nimport type { AlertType } from './Alert';\nimport CalloutStrip from './CalloutStrip';\nimport ArrowLeftIcon from './CustomIcons/ArrowLeftIcon';\nimport DismissIcon from './CustomIcons/DismissIcon';\nimport type { RenderLink } from './PageLayout/types';\nimport EllipsisText from './Typography/EllipsisText';\nimport { OVERLAY_ICON_BUTTON_CLASSES, useOverlayBehaviour } from './overlayBehaviour';\nimport { OVERLAY_ELEVATED_ATTR, overlayIdentity } from './portalOverlay';\n\nexport interface SidePanelProps {\n    open: boolean;\n    /** Dismiss handler — close button, ESC, or overlay click. */\n    onClose: () => void;\n    title: React.ReactNode;\n    /** Secondary text, inline after the title. */\n    subtitle?: React.ReactNode;\n    /** Content at the end of the title row, after the subtitle (e.g. a status tag). */\n    titleExtra?: React.ReactNode;\n    /** Block paragraph below the title row, spanning the header width. */\n    description?: React.ReactNode;\n    /** Divider under the header. Default: false. */\n    headerDivider?: boolean;\n    /** Leading header slot, typically a logo or icon. */\n    icon?: React.ReactNode;\n    /** Content pinned right in the header, before the close button. */\n    headerExtra?: React.ReactNode;\n    footer?: React.ReactNode;\n    /** Renders a back button before the header icon. */\n    onBack?: () => void;\n    /** Maximum panel width. Default: 1080. */\n    maxWidth?: number | string;\n    /** Accessible dialog name; required when `title` isn't a plain string. */\n    'aria-label'?: string;\n    /** ID of a visible element naming the dialog (alternative to `aria-label`). */\n    'aria-labelledby'?: string;\n    /** Whether the body gets default padding. Default: true. */\n    bodyPadding?: boolean;\n    /** `above-app-overlays` lifts the overlay stack clear of chrome pinned near max-int. */\n    stacking?: 'default' | 'above-app-overlays';\n    /** Full-width Alert bands at the top of the body, above `children`, in order. Unaffected by\n     *  `bodyPadding`. The message is markdown. */\n    callouts?: { type?: AlertType; message: string }[];\n    /** Routes root-relative links in `callouts` through the app's router; see `MarkdownBlock`. */\n    renderLink?: RenderLink;\n    children: React.ReactNode;\n}\n\nconst TRANSITION_MS = 200;\n\nconst toCssSize = (value: number | string): string =>\n    typeof value === 'number' ? `${value}px` : value;\n\n/**\n * A right-hand slide-in overlay panel (drawer) for inspecting or editing an entity\n * without leaving the page. Portals to `document.body`, locks background scroll and\n * traps keyboard focus while open (restoring both on close), dismisses on ESC\n * (topmost open overlay only), overlay click or the close button, and exposes header\n * (back/icon/title/subtitle/extra), scrollable body and optional footer slots.\n */\nconst SidePanel: React.FC<SidePanelProps> = ({\n    open,\n    onClose,\n    title,\n    subtitle,\n    titleExtra,\n    description,\n    headerDivider = false,\n    icon,\n    headerExtra,\n    footer,\n    onBack,\n    maxWidth = 1080,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    bodyPadding = true,\n    stacking = 'default',\n    callouts,\n    renderLink,\n    children,\n}) => {\n    const [isVisible, setIsVisible] = useState(false);\n    const [isMounted, setIsMounted] = useState(false);\n    const frameRef = useRef<number | null>(null);\n    const unmountTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n    const hostRef = useRef<HTMLDivElement | null>(null);\n    const {\n        ref: handlePanelRef,\n        isTopmost,\n        zIndex,\n        elevated,\n    } = useOverlayBehaviour({\n        open,\n        onClose,\n        elevated: stacking === 'above-app-overlays',\n        hostRef,\n    });\n\n    useEffect(() => {\n        if (open) {\n            setIsMounted(true);\n            if (unmountTimerRef.current) {\n                clearTimeout(unmountTimerRef.current);\n                unmountTimerRef.current = null;\n            }\n            frameRef.current = requestAnimationFrame(() => {\n                frameRef.current = null;\n                setIsVisible(true);\n            });\n        } else {\n            setIsVisible(false);\n            unmountTimerRef.current = setTimeout(() => {\n                unmountTimerRef.current = null;\n                setIsMounted(false);\n            }, TRANSITION_MS);\n        }\n        return () => {\n            if (frameRef.current !== null) {\n                cancelAnimationFrame(frameRef.current);\n                frameRef.current = null;\n            }\n            if (unmountTimerRef.current) {\n                clearTimeout(unmountTimerRef.current);\n                unmountTimerRef.current = null;\n            }\n        };\n    }, [open]);\n\n    if (!isMounted) {\n        return null;\n    }\n\n    const shownCallouts = callouts?.filter((callout) => callout.message.trim());\n    const hasCallouts = !!shownCallouts?.length;\n    const paddedBody = bodyPadding ? (\n        <div className={hasCallouts ? 'p-[28px]' : 'py-[28px]'}>{children}</div>\n    ) : (\n        children\n    );\n\n    return createPortal(\n        // Host carries the stacking context — ShadowRootWrapper's `isolation` would\n        // otherwise flatten our z-index and let sticky page elements paint over us.\n        <ShadowRootWrapper\n            hostRef={hostRef}\n            hostStyle={{ position: 'relative', zIndex }}\n            hostProps={\n                elevated\n                    ? { ...overlayIdentity('sidepanel'), [OVERLAY_ELEVATED_ATTR]: '' }\n                    : overlayIdentity('sidepanel')\n            }\n        >\n            <div className=\"fixed inset-0 z-[1000]\">\n                <div\n                    aria-hidden=\"true\"\n                    onClick={onClose}\n                    className={`absolute inset-0 bg-[var(--malachite-overlay-scrim)] transition-opacity duration-200 ease-in-out ${\n                        isVisible ? 'opacity-100' : 'opacity-0'\n                    }`}\n                />\n                <div\n                    ref={handlePanelRef}\n                    role=\"dialog\"\n                    // Only the topmost overlay may claim it, or a screen reader can still\n                    // browse the one underneath.\n                    aria-modal={isTopmost ? 'true' : undefined}\n                    tabIndex={-1}\n                    // Prefer aria-labelledby; only fall back to aria-label when it's absent.\n                    aria-label={\n                        ariaLabelledBy\n                            ? undefined\n                            : (ariaLabel ?? (typeof title === 'string' ? title : undefined))\n                    }\n                    aria-labelledby={ariaLabelledBy}\n                    className=\"absolute top-[8px] right-[8px] bottom-[8px] flex flex-col overflow-hidden rounded-[20px] border border-solid border-[var(--malachite-card-border)] bg-[var(--malachite-card-background)] text-[var(--malachite-card-foreground)] outline-none [box-shadow:var(--malachite-shadow-lg)]\"\n                    style={{\n                        width: `min(calc(100% - 16px), ${toCssSize(maxWidth)})`,\n                        // Inline: Tailwind translate utilities silently break inside\n                        // shadow roots (see CLAUDE.md Shadow DOM caveats).\n                        transform: isVisible ? 'translateX(0)' : 'translateX(calc(100% + 16px))',\n                        transition: `transform ${TRANSITION_MS}ms ease-in-out`,\n                    }}\n                >\n                    <div\n                        className={`flex flex-col gap-[20px] px-[20px] py-[18px] ${\n                            headerDivider\n                                ? 'border-0 border-b border-solid border-[var(--malachite-card-border)]'\n                                : ''\n                        }`}\n                    >\n                        <div className=\"flex items-center gap-[12px]\">\n                            {onBack ? (\n                                <button\n                                    type=\"button\"\n                                    aria-label=\"Back\"\n                                    onClick={onBack}\n                                    className={OVERLAY_ICON_BUTTON_CLASSES}\n                                >\n                                    <ArrowLeftIcon size={16} />\n                                </button>\n                            ) : null}\n                            {icon ? (\n                                <span className=\"flex shrink-0 items-center\">{icon}</span>\n                            ) : null}\n                            <div className=\"flex min-w-0 flex-1 items-baseline gap-[12px]\">\n                                <div className=\"flex min-w-0 flex-1 items-baseline gap-[8px]\">\n                                    <div className=\"flex min-w-0 items-baseline gap-[8px]\">\n                                        <span className=\"flex min-w-0 max-w-full shrink-0\">\n                                            <EllipsisText\n                                                tooltip={title}\n                                                tooltipWhenTruncated\n                                                tooltipPlacement=\"bottom\"\n                                                className=\"min-w-0 text-[length:var(--malachite-font-size-15,15px)] font-semibold\"\n                                            >\n                                                {title}\n                                            </EllipsisText>\n                                        </span>\n                                        {subtitle ? (\n                                            <EllipsisText\n                                                tooltip={subtitle}\n                                                tooltipWhenTruncated\n                                                tooltipPlacement=\"bottom\"\n                                                color=\"secondary\"\n                                                className=\"min-w-0 text-[13px]\"\n                                            >\n                                                {subtitle}\n                                            </EllipsisText>\n                                        ) : null}\n                                    </div>\n                                    {titleExtra ? (\n                                        <span className=\"flex shrink-0 items-center\">\n                                            {titleExtra}\n                                        </span>\n                                    ) : null}\n                                </div>\n                                {headerExtra ? (\n                                    <span className=\"flex shrink-0 items-baseline\">\n                                        {headerExtra}\n                                    </span>\n                                ) : null}\n                            </div>\n                            <button\n                                type=\"button\"\n                                aria-label=\"Close\"\n                                onClick={onClose}\n                                className={OVERLAY_ICON_BUTTON_CLASSES}\n                            >\n                                <DismissIcon size={10} />\n                            </button>\n                        </div>\n                        {description ? (\n                            <div className=\"text-[13px] leading-[1.6] text-[var(--malachite-text-secondary)]\">\n                                {description}\n                            </div>\n                        ) : null}\n                    </div>\n                    {/* Callouts move the horizontal padding inward so their strips run full-bleed. */}\n                    <div\n                        className={`min-h-0 flex-1 overflow-y-auto ${bodyPadding && !hasCallouts ? 'px-[28px]' : ''}`}\n                    >\n                        {shownCallouts?.map((callout, index) => (\n                            <CalloutStrip\n                                key={index}\n                                type={callout.type}\n                                message={callout.message}\n                                renderLink={renderLink}\n                            />\n                        ))}\n                        {paddedBody}\n                    </div>\n                    {footer ? (\n                        <div className=\"border-0 border-t border-solid border-[var(--malachite-card-border)] px-[24px] py-[16px]\">\n                            {footer}\n                        </div>\n                    ) : null}\n                </div>\n            </div>\n        </ShadowRootWrapper>,\n        document.body,\n    );\n};\n\nexport default SidePanel;\nexport { SidePanel };\n"],"names":["TRANSITION_MS","toCssSize","value","SidePanel","open","onClose","title","subtitle","titleExtra","description","headerDivider","icon","headerExtra","footer","onBack","maxWidth","ariaLabel","ariaLabelledBy","bodyPadding","stacking","callouts","renderLink","children","isVisible","setIsVisible","useState","isMounted","setIsMounted","frameRef","useRef","unmountTimerRef","hostRef","handlePanelRef","isTopmost","zIndex","elevated","useOverlayBehaviour","useEffect","shownCallouts","callout","hasCallouts","paddedBody","jsx","createPortal","ShadowRootWrapper","overlayIdentity","OVERLAY_ELEVATED_ATTR","jsxs","OVERLAY_ICON_BUTTON_CLASSES","ArrowLeftIcon","EllipsisText","DismissIcon","index","CalloutStrip"],"mappings":"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"}