@jinmi/ui 6.0.1 → 6.1.0

package/es/base-ui/DetailPage/style.mjs

@@ -0,0 +1,226 @@
+import { brandCssVar } from "../../styles/brandCssVar.mjs";
+import { createStaticStyles, cssVar } from "antd-style";
+// src/base-ui/DetailPage/style.ts
+const styles = createStaticStyles(({ css }) => ({
+	actions: css`
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    align-items: center;
+  `,
+	aside: css`
+    position: sticky;
+    inset-block-start: 0;
+  `,
+	back: css`
+    cursor: pointer;
+
+    display: inline-flex;
+    gap: 6px;
+    align-items: center;
+    align-self: flex-start;
+
+    padding: 0;
+    border: 0;
+
+    font: inherit;
+    font-size: 13px;
+    color: ${cssVar.colorTextSecondary};
+
+    background: transparent;
+
+    &:hover {
+      color: ${cssVar.colorText};
+    }
+  `,
+	badge: css`
+    display: inline-flex;
+    align-items: center;
+
+    height: 22px;
+    padding-block: 0;
+    padding-inline: 8px;
+    border-radius: 6px;
+
+    font-size: 12px;
+    color: ${cssVar.colorTextSecondary};
+
+    background: ${cssVar.colorFillTertiary};
+  `,
+	byline: css`
+    font-size: 13px;
+    color: ${cssVar.colorTextTertiary};
+  `,
+	card: css`
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    padding: 18px;
+    border: 1px solid ${cssVar.colorBorderSecondary};
+    border-radius: 16px;
+  `,
+	cardTitle: css`
+    margin: 0;
+    font-size: 13px;
+    font-weight: 600;
+  `,
+	description: css`
+    max-width: 640px;
+    margin-block: 4px 0;
+    margin-inline: 0;
+
+    font-size: 15px;
+    line-height: 1.6;
+    color: ${cssVar.colorTextSecondary};
+  `,
+	fact: css`
+    display: flex;
+    gap: 12px;
+    justify-content: space-between;
+    font-size: 13px;
+
+    dt {
+      flex: none;
+      color: ${cssVar.colorTextTertiary};
+    }
+
+    dd {
+      overflow: hidden;
+
+      min-width: 0;
+      margin: 0;
+
+      color: ${cssVar.colorText};
+      text-align: end;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    &[data-tone='warning'] dd {
+      color: ${cssVar.colorWarningText};
+    }
+  `,
+	facts: css`
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin: 0;
+  `,
+	factsTitle: css`
+    margin-block: 8px 0;
+    margin-inline: 0;
+    font-size: 13px;
+    font-weight: 600;
+  `,
+	grid: css`
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 300px;
+    gap: 32px;
+    align-items: start;
+
+    margin-block-start: 26px;
+
+    &[data-aside='false'] {
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    @media (width <= 900px) {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  `,
+	header: css`
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    align-items: flex-start;
+
+    margin-block-start: 20px;
+  `,
+	headText: css`
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: 6px;
+
+    min-width: 280px;
+  `,
+	icon: css`
+    position: relative;
+
+    display: flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+
+    width: 68px;
+    height: 68px;
+    border-radius: 18px;
+
+    background: ${cssVar.colorFillTertiary};
+  `,
+	main: css`
+    display: flex;
+    flex-direction: column;
+    gap: 28px;
+    min-width: 0;
+  `,
+	page: css`
+    display: flex;
+    flex-direction: column;
+
+    max-width: 1080px;
+    margin-inline: auto;
+    padding-block: 28px 56px;
+    padding-inline: 40px;
+
+    @media (width <= 720px) {
+      padding-block: 20px 40px;
+      padding-inline: 16px;
+    }
+  `,
+	readonly: css`
+    padding-block: 12px;
+    padding-inline: 14px;
+    border: 1px solid ${cssVar.colorBorderSecondary};
+    border-radius: 14px;
+
+    font-size: 14px;
+    line-height: 1.6;
+    color: ${cssVar.colorText};
+    white-space: pre-wrap;
+
+    background: ${cssVar.colorFillQuaternary};
+  `,
+	running: css`
+    position: absolute;
+    inset-block-start: -3px;
+    inset-inline-end: -3px;
+
+    width: 12px;
+    height: 12px;
+    border: 2px solid ${cssVar.colorBgContainer};
+    border-radius: 999px;
+
+    background: ${brandCssVar.colorBrand};
+    box-shadow: 0 0 8px ${brandCssVar.colorBrandGlow};
+  `,
+	title: css`
+    margin: 0;
+
+    font-size: 26px;
+    font-weight: 600;
+    line-height: 1.25;
+    color: ${cssVar.colorText};
+    letter-spacing: -0.03em;
+  `,
+	titleRow: css`
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    align-items: center;
+  `
+}));
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

package/es/base-ui/DetailPage/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/DetailPage/style.ts"],"sourcesContent":["import { createStaticStyles, cssVar } from 'antd-style';\n\nimport { brandCssVar } from '@/styles/brandCssVar';\n\nexport const styles = createStaticStyles(({ css }) => ({\n  actions: css`\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n    align-items: center;\n  `,\n  aside: css`\n    position: sticky;\n    inset-block-start: 0;\n  `,\n  back: css`\n    cursor: pointer;\n\n    display: inline-flex;\n    gap: 6px;\n    align-items: center;\n    align-self: flex-start;\n\n    padding: 0;\n    border: 0;\n\n    font: inherit;\n    font-size: 13px;\n    color: ${cssVar.colorTextSecondary};\n\n    background: transparent;\n\n    &:hover {\n      color: ${cssVar.colorText};\n    }\n  `,\n  badge: css`\n    display: inline-flex;\n    align-items: center;\n\n    height: 22px;\n    padding-block: 0;\n    padding-inline: 8px;\n    border-radius: 6px;\n\n    font-size: 12px;\n    color: ${cssVar.colorTextSecondary};\n\n    background: ${cssVar.colorFillTertiary};\n  `,\n  byline: css`\n    font-size: 13px;\n    color: ${cssVar.colorTextTertiary};\n  `,\n  card: css`\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n\n    padding: 18px;\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    border-radius: 16px;\n  `,\n  cardTitle: css`\n    margin: 0;\n    font-size: 13px;\n    font-weight: 600;\n  `,\n  description: css`\n    max-width: 640px;\n    margin-block: 4px 0;\n    margin-inline: 0;\n\n    font-size: 15px;\n    line-height: 1.6;\n    color: ${cssVar.colorTextSecondary};\n  `,\n  fact: css`\n    display: flex;\n    gap: 12px;\n    justify-content: space-between;\n    font-size: 13px;\n\n    dt {\n      flex: none;\n      color: ${cssVar.colorTextTertiary};\n    }\n\n    dd {\n      overflow: hidden;\n\n      min-width: 0;\n      margin: 0;\n\n      color: ${cssVar.colorText};\n      text-align: end;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    &[data-tone='warning'] dd {\n      color: ${cssVar.colorWarningText};\n    }\n  `,\n  facts: css`\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n    margin: 0;\n  `,\n  factsTitle: css`\n    margin-block: 8px 0;\n    margin-inline: 0;\n    font-size: 13px;\n    font-weight: 600;\n  `,\n  grid: css`\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) 300px;\n    gap: 32px;\n    align-items: start;\n\n    margin-block-start: 26px;\n\n    &[data-aside='false'] {\n      grid-template-columns: minmax(0, 1fr);\n    }\n\n    @media (width <= 900px) {\n      grid-template-columns: minmax(0, 1fr);\n    }\n  `,\n  header: css`\n    display: flex;\n    flex-wrap: wrap;\n    gap: 20px;\n    align-items: flex-start;\n\n    margin-block-start: 20px;\n  `,\n  headText: css`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: 6px;\n\n    min-width: 280px;\n  `,\n  icon: css`\n    position: relative;\n\n    display: flex;\n    flex: none;\n    align-items: center;\n    justify-content: center;\n\n    width: 68px;\n    height: 68px;\n    border-radius: 18px;\n\n    background: ${cssVar.colorFillTertiary};\n  `,\n  main: css`\n    display: flex;\n    flex-direction: column;\n    gap: 28px;\n    min-width: 0;\n  `,\n  page: css`\n    display: flex;\n    flex-direction: column;\n\n    max-width: 1080px;\n    margin-inline: auto;\n    padding-block: 28px 56px;\n    padding-inline: 40px;\n\n    @media (width <= 720px) {\n      padding-block: 20px 40px;\n      padding-inline: 16px;\n    }\n  `,\n  readonly: css`\n    padding-block: 12px;\n    padding-inline: 14px;\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    border-radius: 14px;\n\n    font-size: 14px;\n    line-height: 1.6;\n    color: ${cssVar.colorText};\n    white-space: pre-wrap;\n\n    background: ${cssVar.colorFillQuaternary};\n  `,\n  running: css`\n    position: absolute;\n    inset-block-start: -3px;\n    inset-inline-end: -3px;\n\n    width: 12px;\n    height: 12px;\n    border: 2px solid ${cssVar.colorBgContainer};\n    border-radius: 999px;\n\n    background: ${brandCssVar.colorBrand};\n    box-shadow: 0 0 8px ${brandCssVar.colorBrandGlow};\n  `,\n  title: css`\n    margin: 0;\n\n    font-size: 26px;\n    font-weight: 600;\n    line-height: 1.25;\n    color: ${cssVar.colorText};\n    letter-spacing: -0.03em;\n  `,\n  titleRow: css`\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n    align-items: center;\n  `,\n}));\n"],"mappings":";;;AAIA,MAAa,SAAS,oBAAoB,EAAE,WAAW;CACrD,SAAS,GAAG;;;;;;CAMZ,OAAO,GAAG;;;;CAIV,MAAM,GAAG;;;;;;;;;;;;;aAaE,OAAO,mBAAmB;;;;;eAKxB,OAAO,UAAU;;;CAG9B,OAAO,GAAG;;;;;;;;;;aAUC,OAAO,mBAAmB;;kBAErB,OAAO,kBAAkB;;CAEzC,QAAQ,GAAG;;aAEA,OAAO,kBAAkB;;CAEpC,MAAM,GAAG;;;;;;wBAMa,OAAO,qBAAqB;;;CAGlD,WAAW,GAAG;;;;;CAKd,aAAa,GAAG;;;;;;;aAOL,OAAO,mBAAmB;;CAErC,MAAM,GAAG;;;;;;;;eAQI,OAAO,kBAAkB;;;;;;;;;eASzB,OAAO,UAAU;;;;;;;eAOjB,OAAO,iBAAiB;;;CAGrC,OAAO,GAAG;;;;;;CAMV,YAAY,GAAG;;;;;;CAMf,MAAM,GAAG;;;;;;;;;;;;;;;;CAgBT,QAAQ,GAAG;;;;;;;;CAQX,UAAU,GAAG;;;;;;;;CAQb,MAAM,GAAG;;;;;;;;;;;;kBAYO,OAAO,kBAAkB;;CAEzC,MAAM,GAAG;;;;;;CAMT,MAAM,GAAG;;;;;;;;;;;;;;CAcT,UAAU,GAAG;;;wBAGS,OAAO,qBAAqB;;;;;aAKvC,OAAO,UAAU;;;kBAGZ,OAAO,oBAAoB;;CAE3C,SAAS,GAAG;;;;;;;wBAOU,OAAO,iBAAiB;;;kBAG9B,YAAY,WAAW;0BACf,YAAY,eAAe;;CAEnD,OAAO,GAAG;;;;;;aAMC,OAAO,UAAU;;;CAG5B,UAAU,GAAG;;;;;;AAMf,EAAE"}

package/es/base-ui/DetailPage/type.d.mts

@@ -0,0 +1,53 @@
+import { ComponentProps, ReactNode, Ref } from "react";
+interface DetailPageProps extends ComponentProps<'div'> {
+  /** "← Back" link above the header. */
+  back?: {
+    label: ReactNode;
+    onClick: () => void;
+  };
+  ref?: Ref<HTMLDivElement>;
+}
+interface DetailHeaderProps extends Omit<ComponentProps<'header'>, 'title'> {
+  /** Buttons on the right (chat, add, share, …). */
+  actions?: ReactNode;
+  /** Content of the 68px icon tile (avatar, emoji, brand mark). */
+  avatar?: ReactNode;
+  /** Small grey badges after the title ("Chia sẻ", "Bản nháp"). */
+  badges?: ReactNode[];
+  /** One meta line under the title ("by Jinmi · 1.2k uses"). */
+  byline?: ReactNode;
+  description?: ReactNode;
+  ref?: Ref<HTMLElement>;
+  /** Brand-colored dot on the icon tile: working right now. */
+  running?: boolean;
+  title: ReactNode;
+}
+interface DetailGridProps extends ComponentProps<'div'> {
+  /** The 300px side column (usually an `InfoCard`). */
+  aside?: ReactNode;
+  /** Keep the aside mounted but hidden, giving the main column the full width. */
+  asideHidden?: boolean;
+  ref?: Ref<HTMLDivElement>;
+}
+interface InfoCardProps extends Omit<ComponentProps<'div'>, 'title'> {
+  ref?: Ref<HTMLDivElement>;
+  title?: ReactNode;
+}
+type FactTone = 'default' | 'warning';
+interface FactItem {
+  key?: string;
+  label: ReactNode;
+  tone?: FactTone;
+  value: ReactNode;
+}
+interface FactListProps {
+  className?: string;
+  items: FactItem[];
+  /** Small heading above the list, inside an `InfoCard` ("Cần kết nối"). */
+  title?: ReactNode;
+}
+interface ReadonlyBlockProps extends ComponentProps<'div'> {
+  ref?: Ref<HTMLDivElement>;
+}
+export { DetailGridProps, DetailHeaderProps, DetailPageProps, FactItem, FactListProps, FactTone, InfoCardProps, ReadonlyBlockProps };
+//# sourceMappingURL=type.d.mts.map

package/es/base-ui/Divider/Divider.d.mts

@@ -1,6 +1,4 @@
 import { DividerProps } from "./type.mjs";
-//#region src/base-ui/Divider/Divider.d.ts
 declare const Divider: import("react").NamedExoticComponent<DividerProps>;
-//#endregion
 export { Divider as default };
 //# sourceMappingURL=Divider.d.mts.map

package/es/base-ui/Divider/Divider.mjs

@@ -4,7 +4,7 @@ import { memo } from "react";
 import { jsx } from "react/jsx-runtime";
 import { cx } from "antd-style";
 import { Separator } from "@base-ui/react/separator";
-//#region src/base-ui/Divider/Divider.tsx
+// src/base-ui/Divider/Divider.tsx
 const Divider = memo(({ children, className, dashed = false, orientation = "horizontal", ref, ...rest }) => {
 	if (children != null && orientation === "horizontal") return /* @__PURE__ */ jsx(Separator, {
 		className: cx(styles.withText, dashed && styles.dashed, className),
@@ -24,7 +24,6 @@ const Divider = memo(({ children, className, dashed = false, orientation = "hori
 	});
 });
 Divider.displayName = "Divider";
-//#endregion
 export { Divider as default };
 
 //# sourceMappingURL=Divider.mjs.map

package/es/base-ui/Divider/style.mjs

@@ -1,5 +1,5 @@
 import { createStaticStyles } from "antd-style";
-//#region src/base-ui/Divider/style.ts
+// src/base-ui/Divider/style.ts
 const styles = createStaticStyles(({ css, cssVar }) => ({
 	dashed: css`
     border-style: dashed;
@@ -53,7 +53,6 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     }
   `
 }));
-//#endregion
 export { styles };
 
 //# sourceMappingURL=style.mjs.map

package/es/base-ui/Divider/type.d.mts

@@ -1,5 +1,4 @@
 import { ComponentProps, ReactNode, Ref } from "react";
-//#region src/base-ui/Divider/type.d.ts
 type DividerOrientation = 'horizontal' | 'vertical';
 interface DividerProps extends Omit<ComponentProps<'div'>, 'children'> {
   children?: ReactNode;
@@ -7,6 +6,5 @@ interface DividerProps extends Omit<ComponentProps<'div'>, 'children'> {
   orientation?: DividerOrientation;
   ref?: Ref<HTMLDivElement>;
 }
-//#endregion
 export { DividerOrientation, DividerProps };
 //# sourceMappingURL=type.d.mts.map

package/es/base-ui/DraggablePanel/DraggablePanel.d.mts

@@ -1,6 +1,4 @@
 import { DraggablePanelProps } from "./type.mjs";
-//#region src/base-ui/DraggablePanel/DraggablePanel.d.ts
 declare const DraggablePanel: import("react").NamedExoticComponent<DraggablePanelProps>;
-//#endregion
 export { DraggablePanel as default };
 //# sourceMappingURL=DraggablePanel.d.mts.map

package/es/base-ui/DraggablePanel/DraggablePanel.mjs

@@ -4,7 +4,7 @@ import { DraggablePanelContent, DraggablePanelHandle, DraggablePanelRoot, Dragga
 import { memo, useCallback } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "antd-style";
-//#region src/base-ui/DraggablePanel/DraggablePanel.tsx
+// src/base-ui/DraggablePanel/DraggablePanel.tsx
 const toNumber = (value) => typeof value === "number" ? Math.max(value, 0) : void 0;
 const DraggablePanel = memo(({ backgroundColor, children, className, classNames, collapseThreshold, defaultExpand, defaultSize, expand, expandable = true, maxHeight, maxWidth, minHeight, minWidth, mode = "fixed", onExpandChange, onSizeChange, onSizeDragging, placement = "right", showBorder = true, showHandleWhenCollapsed, showHandleWideArea = true, size, style, styles: customStyles, ...rest }) => {
 	const { vertical } = AXES[placement];
@@ -65,7 +65,6 @@ const DraggablePanel = memo(({ backgroundColor, children, className, classNames,
 	});
 });
 DraggablePanel.displayName = "DraggablePanel";
-//#endregion
 export { DraggablePanel as default };
 
 //# sourceMappingURL=DraggablePanel.mjs.map

package/es/base-ui/DraggablePanel/atoms.d.mts

@@ -1,7 +1,6 @@
 import { DivProps } from "../../types/index.mjs";
 import { Placement } from "./core/axes.mjs";
 import { ReactNode } from "react";
-//#region src/base-ui/DraggablePanel/atoms.d.ts
 interface DraggablePanelRootProps extends Omit<DivProps, 'onDrag'> {
   backgroundColor?: string;
   collapseThreshold?: number;
@@ -42,6 +41,5 @@ interface DraggablePanelHeaderProps extends Omit<DivProps, 'children' | 'title'>
   title?: ReactNode;
 }
 declare const DraggablePanelHeader: import("react").NamedExoticComponent<DraggablePanelHeaderProps>;
-//#endregion
 export { DraggablePanelBody, DraggablePanelBodyProps, DraggablePanelContainer, DraggablePanelContainerProps, DraggablePanelContent, DraggablePanelContentProps, DraggablePanelFooter, DraggablePanelFooterProps, DraggablePanelHandle, DraggablePanelHandleProps, DraggablePanelHeader, DraggablePanelHeaderProps, DraggablePanelRoot, DraggablePanelRootProps, DraggablePanelToggle, DraggablePanelToggleProps };
 //# sourceMappingURL=atoms.d.mts.map

package/es/base-ui/DraggablePanel/atoms.mjs

@@ -14,7 +14,7 @@ import { cx } from "antd-style";
 import { useTransform } from "motion/react";
 import useMergeState from "use-merge-value";
 import { ChevronLeft } from "lucide-react";
-//#region src/base-ui/DraggablePanel/atoms.tsx
+// src/base-ui/DraggablePanel/atoms.tsx
 const PAN_THRESHOLD = 3;
 const ARROW_BOX = (SEAM_ARROW.half + SEAM_ARROW.lead) * 2;
 const ARROW_C = ARROW_BOX / 2;
@@ -336,7 +336,6 @@ const DraggablePanelHeader = memo(({ className, extra, onCollapse, title, ...res
 	});
 });
 DraggablePanelHeader.displayName = "DraggablePanelHeader";
-//#endregion
 export { DraggablePanelBody, DraggablePanelContainer, DraggablePanelContent, DraggablePanelFooter, DraggablePanelHandle, DraggablePanelHeader, DraggablePanelRoot, DraggablePanelToggle };
 
 //# sourceMappingURL=atoms.mjs.map

package/es/base-ui/DraggablePanel/context.d.mts

@@ -1,6 +1,5 @@
 import { Axis, Placement } from "./core/axes.mjs";
 import { PanelController, PanelState } from "./core/controller.mjs";
-//#region src/base-ui/DraggablePanel/context.d.ts
 interface DraggablePanelContextValue {
   axis: Axis;
   controller: PanelController;
@@ -12,6 +11,5 @@ interface DraggablePanelContextValue {
   toggleExpand: () => void;
 }
 declare const useDraggablePanelContext: () => DraggablePanelContextValue;
-//#endregion
 export { DraggablePanelContextValue, useDraggablePanelContext };
 //# sourceMappingURL=context.d.mts.map

package/es/base-ui/DraggablePanel/context.mjs

@@ -1,13 +1,12 @@
 "use client";
 import { createContext, use } from "react";
-//#region src/base-ui/DraggablePanel/context.ts
+// src/base-ui/DraggablePanel/context.ts
 const DraggablePanelContext = createContext(null);
 const useDraggablePanelContext = () => {
 	const context = use(DraggablePanelContext);
 	if (!context) throw new Error("DraggablePanel atoms must be used inside DraggablePanelRoot");
 	return context;
 };
-//#endregion
 export { DraggablePanelContext, useDraggablePanelContext };
 
 //# sourceMappingURL=context.mjs.map

package/es/base-ui/DraggablePanel/core/axes.d.mts

@@ -1,4 +1,3 @@
-//#region src/base-ui/DraggablePanel/core/axes.d.ts
 type Placement = 'bottom' | 'left' | 'right' | 'top';
 interface Axis {
   anchorEnd: boolean;
@@ -11,6 +10,5 @@ interface Axis {
   point: 'x' | 'y';
   vertical: boolean;
 }
-//#endregion
 export { Axis, Placement };
 //# sourceMappingURL=axes.d.mts.map

package/es/base-ui/DraggablePanel/core/axes.mjs

@@ -1,4 +1,4 @@
-//#region src/base-ui/DraggablePanel/core/axes.ts
+// src/base-ui/DraggablePanel/core/axes.ts
 const AXES = {
 	bottom: {
 		anchorEnd: true,
@@ -45,7 +45,6 @@ const AXES = {
 		vertical: true
 	}
 };
-//#endregion
 export { AXES };
 
 //# sourceMappingURL=axes.mjs.map

package/es/base-ui/DraggablePanel/core/controller.d.mts

@@ -1,6 +1,5 @@
 import { Axis, Placement } from "./axes.mjs";
 import { MotionValue } from "motion/react";
-//#region src/base-ui/DraggablePanel/core/controller.d.ts
 interface PanelControllerOptions {
   collapseThreshold?: number;
   defaultSize: number;
@@ -51,6 +50,5 @@ interface PanelController {
   sync: (options: PanelControllerOptions) => void;
   target: number;
 }
-//#endregion
 export { PanelController, PanelControllerOptions, PanelKeyEvent, PanelState };
 //# sourceMappingURL=controller.d.mts.map

package/es/base-ui/DraggablePanel/core/controller.mjs

@@ -3,7 +3,7 @@ import { isRtl, lockBody } from "./dom.mjs";
 import { timing } from "./transition.mjs";
 import { clamp, emitter } from "./utils.mjs";
 import { animate, motionValue } from "motion/react";
-//#region src/base-ui/DraggablePanel/core/controller.ts
+// src/base-ui/DraggablePanel/core/controller.ts
 const KEY_STEP = 10;
 const KEY_STEP_FAST = 50;
 const SCREEN_DELTA = {
@@ -200,7 +200,6 @@ const createPanelController = (initial) => {
 		}
 	};
 };
-//#endregion
 export { createPanelController };
 
 //# sourceMappingURL=controller.mjs.map

package/es/base-ui/DraggablePanel/core/dom.mjs

@@ -1,4 +1,4 @@
-//#region src/base-ui/DraggablePanel/core/dom.ts
+// src/base-ui/DraggablePanel/core/dom.ts
 const isRtl = (element) => !!element && getComputedStyle(element).direction === "rtl";
 let locks = 0;
 let saved = {};
@@ -28,7 +28,6 @@ const lockBody = (cursor, onEscape) => {
 		removeEventListener("keydown", onKeyDown, true);
 	};
 };
-//#endregion
 export { isRtl, lockBody };
 
 //# sourceMappingURL=dom.mjs.map

package/es/base-ui/DraggablePanel/core/env.mjs

@@ -1,4 +1,4 @@
-//#region src/base-ui/DraggablePanel/core/env.ts
+// src/base-ui/DraggablePanel/core/env.ts
 const media = (query) => {
 	let list;
 	const get = () => {
@@ -22,7 +22,6 @@ const handleSize = (wide = true) => {
 	if (coarsePointer.get()) return HANDLE_SIZE_COARSE;
 	return wide ? HANDLE_SIZE_WIDE : HANDLE_SIZE_FINE;
 };
-//#endregion
 export { coarsePointer, handleSize, reducedMotion };
 
 //# sourceMappingURL=env.mjs.map

package/es/base-ui/DraggablePanel/core/internal.mjs

@@ -1,9 +1,8 @@
 "use client";
 import { useEffect, useLayoutEffect, useSyncExternalStore } from "react";
-//#region src/base-ui/DraggablePanel/core/internal.ts
+// src/base-ui/DraggablePanel/core/internal.ts
 const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 const useStore = (subscribe, get) => useSyncExternalStore(subscribe, get, get);
-//#endregion
 export { useIsomorphicLayoutEffect, useStore };
 
 //# sourceMappingURL=internal.mjs.map

package/es/base-ui/DraggablePanel/core/transition.mjs

@@ -1,5 +1,5 @@
 import { reducedMotion } from "./env.mjs";
-//#region src/base-ui/DraggablePanel/core/transition.ts
+// src/base-ui/DraggablePanel/core/transition.ts
 const TRANSITION = {
 	duration: .25,
 	ease: [
@@ -11,7 +11,6 @@ const TRANSITION = {
 };
 const INSTANT = { duration: 0 };
 const timing = (transition) => reducedMotion.get() ? INSTANT : transition ?? TRANSITION;
-//#endregion
 export { TRANSITION, timing };
 
 //# sourceMappingURL=transition.mjs.map

package/es/base-ui/DraggablePanel/core/utils.mjs

@@ -1,4 +1,4 @@
-//#region src/base-ui/DraggablePanel/core/utils.ts
+// src/base-ui/DraggablePanel/core/utils.ts
 const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
 const emitter = () => {
 	const listeners = /* @__PURE__ */ new Set();
@@ -14,7 +14,6 @@ const emitter = () => {
 		}
 	};
 };
-//#endregion
 export { clamp, emitter };
 
 //# sourceMappingURL=utils.mjs.map

package/es/base-ui/DraggablePanel/style.mjs

@@ -1,7 +1,7 @@
 import { brandCssVar } from "../../styles/brandCssVar.mjs";
 import { createStaticStyles, cx } from "antd-style";
 import { cva } from "class-variance-authority";
-//#region src/base-ui/DraggablePanel/style.ts
+// src/base-ui/DraggablePanel/style.ts
 const TOGGLE_HIT_SHORT = 26;
 const TOGGLE_HIT_LONG = 40;
 const SEAM_ARROW = {
@@ -356,7 +356,6 @@ const toggleVariants = cva(styles.toggleRoot, { variants: { placement: {
 	right: styles.toggleLeft,
 	top: styles.toggleBottom
 } } });
-//#endregion
 export { SEAM_ARROW, handleVariants, rootVariants, styles, toggleVariants };
 
 //# sourceMappingURL=style.mjs.map

package/es/base-ui/DraggablePanel/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/DraggablePanel/style.ts"],"sourcesContent":["import { createStaticStyles, cx } from 'antd-style';\r\nimport { cva } from 'class-variance-authority';\r\n\nimport { brandCssVar } from '@/styles/brandCssVar';\n\r\nconst TOGGLE_HIT_SHORT = 26;\r\nconst TOGGLE_HIT_LONG = 40;\r\n\r\nexport const SEAM_ARROW = {\r\n  depth: 6.5,\r\n  half: 11,\r\n  lead: 6,\r\n  stroke: 1.25,\r\n};\r\n\r\nconst prefix = 'base-draggable-panel';\r\n\r\nexport const styles = createStaticStyles(({ css, cssVar }) => {\r\n  const float = css`\r\n    position: absolute;\r\n    z-index: 200;\r\n  `;\r\n\r\n  const toggleRoot = cx(\r\n    `${prefix}-toggle`,\r\n    css`\r\n      pointer-events: none;\r\n\r\n      position: absolute;\r\n      z-index: 110;\r\n\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n\r\n      > button {\r\n        pointer-events: all;\r\n        cursor: pointer;\r\n\r\n        position: relative;\r\n\r\n        width: ${TOGGLE_HIT_SHORT}px;\r\n        height: ${TOGGLE_HIT_LONG}px;\r\n        padding: 0;\r\n        border: none;\r\n\r\n        background: none;\r\n\r\n        &:focus-visible {\r\n          outline: 2px solid ${brandCssVar.colorBrand};\r\n          outline-offset: 3px;\r\n        }\r\n      }\r\n\r\n      svg {\r\n        pointer-events: none;\r\n\r\n        position: absolute;\r\n        inset-block-start: 50%;\r\n        inset-inline-start: 50%;\r\n        transform: translate(-50%, -50%);\r\n\r\n        overflow: visible;\r\n\r\n        opacity: 0;\r\n\r\n        transition: opacity 0.18s ${cssVar.motionEaseOut};\r\n      }\r\n\r\n      path {\r\n        transform-origin: center;\r\n        transform: scaleX(0);\r\n        vector-effect: non-scaling-stroke;\r\n        transition: transform 0.24s ${cssVar.motionEaseOut};\r\n      }\r\n\r\n      /* The ends fade into the seam so the bend reads as the seam itself, not a drawn icon. */\r\n      stop[data-end] {\r\n        stop-color: ${cssVar.colorBorderSecondary};\r\n        transition: stop-opacity 0.18s ${cssVar.motionEaseOut};\r\n      }\r\n\r\n      stop[data-tip] {\r\n        stop-color: ${cssVar.colorTextTertiary};\r\n        transition: stop-color 0.16s ${cssVar.motionEaseOut};\r\n      }\r\n\r\n      button:hover stop[data-tip] {\r\n        stop-color: ${cssVar.colorTextSecondary};\r\n      }\r\n    `,\r\n  );\r\n\r\n  return {\r\n    body: css`\r\n      overflow: hidden auto;\r\n      padding: 16px;\r\n    `,\r\n    bottomFloat: cx(\r\n      float,\r\n      css`\r\n        inset-block-end: 0;\r\n        inset-inline: 0;\r\n        width: 100%;\r\n      `,\r\n    ),\r\n    container: css`\r\n      position: relative;\r\n      overflow: hidden;\r\n      display: flex;\r\n      flex-direction: column;\r\n    `,\r\n    content: cx(\r\n      `${prefix}-content`,\r\n      css`\r\n        display: flex;\r\n        flex-direction: column;\r\n        flex-shrink: 0;\r\n\r\n        min-width: 0;\r\n        min-height: 0;\r\n\r\n        background: var(--draggable-panel-bg, transparent);\r\n      `,\r\n    ),\r\n    fixed: css`\r\n      position: relative;\r\n    `,\r\n    footer: css`\r\n      display: flex;\r\n      flex: none;\r\n      gap: 8px;\r\n      align-items: center;\r\n\r\n      padding-block: 8px;\r\n      padding-inline: 16px;\r\n      border-block-start: 1px solid ${cssVar.colorBorderSecondary};\r\n    `,\r\n    handle: cx(\r\n      `${prefix}-handle`,\r\n      css`\r\n        touch-action: none;\r\n        position: absolute;\r\n        z-index: 100;\r\n\r\n        &::before,\r\n        &::after {\r\n          content: '';\r\n          position: absolute;\r\n          background: ${cssVar.colorBorderSecondary};\r\n          transition:\r\n            width 0.25s ${cssVar.motionEaseOut},\r\n            height 0.25s ${cssVar.motionEaseOut},\r\n            background 0.16s ${cssVar.motionEaseOut};\r\n        }\r\n\r\n        &:hover::before,\r\n        &:hover::after {\r\n          background: ${cssVar.colorFill};\r\n        }\r\n\r\n        &[data-resizing]::before,\r\n        &[data-resizing]::after {\r\n          background: ${cssVar.colorPrimary};\r\n        }\r\n\r\n        &[data-border='false']::before,\r\n        &[data-border='false']::after {\r\n          background: transparent;\r\n        }\r\n\r\n        &:focus-visible {\r\n          outline: 2px solid ${brandCssVar.colorBrand};\r\n          outline-offset: -2px;\r\n        }\r\n      `,\r\n    ),\r\n    handleHorizontal: css`\r\n      cursor: row-resize;\r\n      inset-inline: 0;\r\n      height: var(--draggable-panel-handle-size);\r\n\r\n      &::before,\r\n      &::after {\r\n        inset-block-start: 50%;\r\n        height: 1px;\r\n        margin-block-start: -0.5px;\r\n      }\r\n\r\n      &::before {\r\n        inset-inline-start: 0;\r\n        width: calc(50% - var(--draggable-panel-gap, 0px));\r\n      }\r\n\r\n      &::after {\r\n        inset-inline-end: 0;\r\n        width: calc(50% - var(--draggable-panel-gap, 0px));\r\n      }\r\n    `,\r\n    handleVertical: css`\r\n      cursor: col-resize;\r\n      inset-block: 0;\r\n      width: var(--draggable-panel-handle-size);\r\n\r\n      &::before,\r\n      &::after {\r\n        inset-inline-start: 50%;\r\n        width: 1px;\r\n        margin-inline-start: -0.5px;\r\n      }\r\n\r\n      &::before {\r\n        inset-block-start: 0;\r\n        height: calc(50% - var(--draggable-panel-gap, 0px));\r\n      }\r\n\r\n      &::after {\r\n        inset-block-end: 0;\r\n        height: calc(50% - var(--draggable-panel-gap, 0px));\r\n      }\r\n    `,\r\n    header: css`\r\n      display: flex;\r\n      flex: none;\r\n      gap: 8px;\r\n      align-items: center;\r\n      justify-content: space-between;\r\n\r\n      padding-block: 8px;\r\n      padding-inline: 16px;\r\n      border-block-end: 1px solid ${cssVar.colorBorderSecondary};\r\n\r\n      font-weight: 500;\r\n    `,\r\n    leftFloat: cx(\r\n      float,\r\n      css`\r\n        inset-block: 0;\r\n        inset-inline-start: 0;\r\n        height: 100%;\r\n      `,\r\n    ),\r\n    rightFloat: cx(\r\n      float,\r\n      css`\r\n        inset-block: 0;\r\n        inset-inline-end: 0;\r\n        height: 100%;\r\n      `,\r\n    ),\r\n    root: cx(\r\n      prefix,\r\n      css`\r\n        --draggable-panel-gap: 0px;\r\n\r\n        display: flex;\r\n        flex-shrink: 0;\r\n        min-width: 0;\r\n        min-height: 0;\r\n\r\n        &[data-expandable='true']:hover,\r\n        &[data-expandable='true']:focus-within,\r\n        &[data-expandable='true'][data-expand='false'] {\r\n          --draggable-panel-gap: ${SEAM_ARROW.half + SEAM_ARROW.lead}px;\r\n        }\r\n\r\n        /* The wrapper carries an inline opacity when collapsed, so beat it. */\r\n        &[data-expandable='true']:hover\r\n          .${prefix}-toggle,\r\n          &[data-expandable='true']:focus-within\r\n          .${prefix}-toggle {\r\n          opacity: 1 !important;\r\n        }\r\n\r\n        &[data-expandable='true']:hover .${prefix}-toggle svg,\r\n        &[data-expandable='true']:focus-within .${prefix}-toggle svg,\r\n        &[data-expandable='true'][data-expand='false'] .${prefix}-toggle svg {\r\n          opacity: 1;\r\n        }\r\n\r\n        &[data-expandable='true']:hover .${prefix}-toggle path,\r\n        &[data-expandable='true']:focus-within .${prefix}-toggle path,\r\n        &[data-expandable='true'][data-expand='false'] .${prefix}-toggle path {\r\n          transform: scaleX(var(--seam-bend));\r\n        }\r\n\r\n        &[data-expandable='true'][data-resizing='true'] {\r\n          --draggable-panel-gap: 0px;\r\n        }\r\n\r\n        &[data-expandable='true'][data-resizing='true'] .${prefix}-toggle svg {\r\n          opacity: 0;\r\n        }\r\n      `,\r\n    ),\r\n    toggleBottom: cx(\r\n      `${prefix}-toggle-bottom`,\r\n      css`\r\n        inset-block-end: -${TOGGLE_HIT_SHORT / 2}px;\r\n        inset-inline: 0;\r\n        height: ${TOGGLE_HIT_SHORT}px;\r\n\r\n        > button {\r\n          width: ${TOGGLE_HIT_LONG}px;\r\n          height: ${TOGGLE_HIT_SHORT}px;\r\n        }\r\n      `,\r\n    ),\r\n    toggleLeft: cx(\r\n      `${prefix}-toggle-left`,\r\n      css`\r\n        inset-block: 0;\r\n        inset-inline-start: -${TOGGLE_HIT_SHORT / 2}px;\r\n        width: ${TOGGLE_HIT_SHORT}px;\r\n      `,\r\n    ),\r\n    toggleRight: cx(\r\n      `${prefix}-toggle-right`,\r\n      css`\r\n        inset-block: 0;\r\n        inset-inline-end: -${TOGGLE_HIT_SHORT / 2}px;\r\n        width: ${TOGGLE_HIT_SHORT}px;\r\n      `,\r\n    ),\r\n    toggleRoot,\r\n    toggleTop: cx(\r\n      `${prefix}-toggle-top`,\r\n      css`\r\n        inset-block-start: -${TOGGLE_HIT_SHORT / 2}px;\r\n        inset-inline: 0;\r\n        height: ${TOGGLE_HIT_SHORT}px;\r\n\r\n        > button {\r\n          width: ${TOGGLE_HIT_LONG}px;\r\n          height: ${TOGGLE_HIT_SHORT}px;\r\n        }\r\n      `,\r\n    ),\r\n\r\n    topFloat: cx(\r\n      float,\r\n      css`\r\n        inset-block-start: 0;\r\n        inset-inline: 0;\r\n        width: 100%;\r\n      `,\r\n    ),\r\n  };\r\n});\r\n\r\nexport const rootVariants = cva(styles.root, {\r\n  compoundVariants: [\r\n    { class: styles.leftFloat, mode: 'float', placement: 'left' },\r\n    { class: styles.rightFloat, mode: 'float', placement: 'right' },\r\n    { class: styles.topFloat, mode: 'float', placement: 'top' },\r\n    { class: styles.bottomFloat, mode: 'float', placement: 'bottom' },\r\n  ],\r\n  defaultVariants: { mode: 'fixed', placement: 'right' },\r\n  variants: {\r\n    mode: { fixed: styles.fixed, float: null },\r\n    placement: { bottom: null, left: null, right: null, top: null },\r\n  },\r\n});\r\n\r\nexport const handleVariants = cva(styles.handle, {\r\n  variants: {\r\n    edge: {\r\n      bottom: styles.handleHorizontal,\r\n      left: styles.handleVertical,\r\n      right: styles.handleVertical,\r\n      top: styles.handleHorizontal,\r\n    },\r\n  },\r\n});\r\n\r\nexport const toggleVariants = cva(styles.toggleRoot, {\r\n  variants: {\r\n    placement: {\r\n      bottom: styles.toggleTop,\r\n      left: styles.toggleRight,\r\n      right: styles.toggleLeft,\r\n      top: styles.toggleBottom,\r\n    },\r\n  },\r\n});\r\n"],"mappings":"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"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/DraggablePanel/style.ts"],"sourcesContent":["import { createStaticStyles, cx } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { brandCssVar } from '@/styles/brandCssVar';\n\nconst TOGGLE_HIT_SHORT = 26;\nconst TOGGLE_HIT_LONG = 40;\n\nexport const SEAM_ARROW = {\n  depth: 6.5,\n  half: 11,\n  lead: 6,\n  stroke: 1.25,\n};\n\nconst prefix = 'base-draggable-panel';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  const float = css`\n    position: absolute;\n    z-index: 200;\n  `;\n\n  const toggleRoot = cx(\n    `${prefix}-toggle`,\n    css`\n      pointer-events: none;\n\n      position: absolute;\n      z-index: 110;\n\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      > button {\n        pointer-events: all;\n        cursor: pointer;\n\n        position: relative;\n\n        width: ${TOGGLE_HIT_SHORT}px;\n        height: ${TOGGLE_HIT_LONG}px;\n        padding: 0;\n        border: none;\n\n        background: none;\n\n        &:focus-visible {\n          outline: 2px solid ${brandCssVar.colorBrand};\n          outline-offset: 3px;\n        }\n      }\n\n      svg {\n        pointer-events: none;\n\n        position: absolute;\n        inset-block-start: 50%;\n        inset-inline-start: 50%;\n        transform: translate(-50%, -50%);\n\n        overflow: visible;\n\n        opacity: 0;\n\n        transition: opacity 0.18s ${cssVar.motionEaseOut};\n      }\n\n      path {\n        transform-origin: center;\n        transform: scaleX(0);\n        vector-effect: non-scaling-stroke;\n        transition: transform 0.24s ${cssVar.motionEaseOut};\n      }\n\n      /* The ends fade into the seam so the bend reads as the seam itself, not a drawn icon. */\n      stop[data-end] {\n        stop-color: ${cssVar.colorBorderSecondary};\n        transition: stop-opacity 0.18s ${cssVar.motionEaseOut};\n      }\n\n      stop[data-tip] {\n        stop-color: ${cssVar.colorTextTertiary};\n        transition: stop-color 0.16s ${cssVar.motionEaseOut};\n      }\n\n      button:hover stop[data-tip] {\n        stop-color: ${cssVar.colorTextSecondary};\n      }\n    `,\n  );\n\n  return {\n    body: css`\n      overflow: hidden auto;\n      padding: 16px;\n    `,\n    bottomFloat: cx(\n      float,\n      css`\n        inset-block-end: 0;\n        inset-inline: 0;\n        width: 100%;\n      `,\n    ),\n    container: css`\n      position: relative;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    `,\n    content: cx(\n      `${prefix}-content`,\n      css`\n        display: flex;\n        flex-direction: column;\n        flex-shrink: 0;\n\n        min-width: 0;\n        min-height: 0;\n\n        background: var(--draggable-panel-bg, transparent);\n      `,\n    ),\n    fixed: css`\n      position: relative;\n    `,\n    footer: css`\n      display: flex;\n      flex: none;\n      gap: 8px;\n      align-items: center;\n\n      padding-block: 8px;\n      padding-inline: 16px;\n      border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n    `,\n    handle: cx(\n      `${prefix}-handle`,\n      css`\n        touch-action: none;\n        position: absolute;\n        z-index: 100;\n\n        &::before,\n        &::after {\n          content: '';\n          position: absolute;\n          background: ${cssVar.colorBorderSecondary};\n          transition:\n            width 0.25s ${cssVar.motionEaseOut},\n            height 0.25s ${cssVar.motionEaseOut},\n            background 0.16s ${cssVar.motionEaseOut};\n        }\n\n        &:hover::before,\n        &:hover::after {\n          background: ${cssVar.colorFill};\n        }\n\n        &[data-resizing]::before,\n        &[data-resizing]::after {\n          background: ${cssVar.colorPrimary};\n        }\n\n        &[data-border='false']::before,\n        &[data-border='false']::after {\n          background: transparent;\n        }\n\n        &:focus-visible {\n          outline: 2px solid ${brandCssVar.colorBrand};\n          outline-offset: -2px;\n        }\n      `,\n    ),\n    handleHorizontal: css`\n      cursor: row-resize;\n      inset-inline: 0;\n      height: var(--draggable-panel-handle-size);\n\n      &::before,\n      &::after {\n        inset-block-start: 50%;\n        height: 1px;\n        margin-block-start: -0.5px;\n      }\n\n      &::before {\n        inset-inline-start: 0;\n        width: calc(50% - var(--draggable-panel-gap, 0px));\n      }\n\n      &::after {\n        inset-inline-end: 0;\n        width: calc(50% - var(--draggable-panel-gap, 0px));\n      }\n    `,\n    handleVertical: css`\n      cursor: col-resize;\n      inset-block: 0;\n      width: var(--draggable-panel-handle-size);\n\n      &::before,\n      &::after {\n        inset-inline-start: 50%;\n        width: 1px;\n        margin-inline-start: -0.5px;\n      }\n\n      &::before {\n        inset-block-start: 0;\n        height: calc(50% - var(--draggable-panel-gap, 0px));\n      }\n\n      &::after {\n        inset-block-end: 0;\n        height: calc(50% - var(--draggable-panel-gap, 0px));\n      }\n    `,\n    header: css`\n      display: flex;\n      flex: none;\n      gap: 8px;\n      align-items: center;\n      justify-content: space-between;\n\n      padding-block: 8px;\n      padding-inline: 16px;\n      border-block-end: 1px solid ${cssVar.colorBorderSecondary};\n\n      font-weight: 500;\n    `,\n    leftFloat: cx(\n      float,\n      css`\n        inset-block: 0;\n        inset-inline-start: 0;\n        height: 100%;\n      `,\n    ),\n    rightFloat: cx(\n      float,\n      css`\n        inset-block: 0;\n        inset-inline-end: 0;\n        height: 100%;\n      `,\n    ),\n    root: cx(\n      prefix,\n      css`\n        --draggable-panel-gap: 0px;\n\n        display: flex;\n        flex-shrink: 0;\n        min-width: 0;\n        min-height: 0;\n\n        &[data-expandable='true']:hover,\n        &[data-expandable='true']:focus-within,\n        &[data-expandable='true'][data-expand='false'] {\n          --draggable-panel-gap: ${SEAM_ARROW.half + SEAM_ARROW.lead}px;\n        }\n\n        /* The wrapper carries an inline opacity when collapsed, so beat it. */\n        &[data-expandable='true']:hover\n          .${prefix}-toggle,\n          &[data-expandable='true']:focus-within\n          .${prefix}-toggle {\n          opacity: 1 !important;\n        }\n\n        &[data-expandable='true']:hover .${prefix}-toggle svg,\n        &[data-expandable='true']:focus-within .${prefix}-toggle svg,\n        &[data-expandable='true'][data-expand='false'] .${prefix}-toggle svg {\n          opacity: 1;\n        }\n\n        &[data-expandable='true']:hover .${prefix}-toggle path,\n        &[data-expandable='true']:focus-within .${prefix}-toggle path,\n        &[data-expandable='true'][data-expand='false'] .${prefix}-toggle path {\n          transform: scaleX(var(--seam-bend));\n        }\n\n        &[data-expandable='true'][data-resizing='true'] {\n          --draggable-panel-gap: 0px;\n        }\n\n        &[data-expandable='true'][data-resizing='true'] .${prefix}-toggle svg {\n          opacity: 0;\n        }\n      `,\n    ),\n    toggleBottom: cx(\n      `${prefix}-toggle-bottom`,\n      css`\n        inset-block-end: -${TOGGLE_HIT_SHORT / 2}px;\n        inset-inline: 0;\n        height: ${TOGGLE_HIT_SHORT}px;\n\n        > button {\n          width: ${TOGGLE_HIT_LONG}px;\n          height: ${TOGGLE_HIT_SHORT}px;\n        }\n      `,\n    ),\n    toggleLeft: cx(\n      `${prefix}-toggle-left`,\n      css`\n        inset-block: 0;\n        inset-inline-start: -${TOGGLE_HIT_SHORT / 2}px;\n        width: ${TOGGLE_HIT_SHORT}px;\n      `,\n    ),\n    toggleRight: cx(\n      `${prefix}-toggle-right`,\n      css`\n        inset-block: 0;\n        inset-inline-end: -${TOGGLE_HIT_SHORT / 2}px;\n        width: ${TOGGLE_HIT_SHORT}px;\n      `,\n    ),\n    toggleRoot,\n    toggleTop: cx(\n      `${prefix}-toggle-top`,\n      css`\n        inset-block-start: -${TOGGLE_HIT_SHORT / 2}px;\n        inset-inline: 0;\n        height: ${TOGGLE_HIT_SHORT}px;\n\n        > button {\n          width: ${TOGGLE_HIT_LONG}px;\n          height: ${TOGGLE_HIT_SHORT}px;\n        }\n      `,\n    ),\n\n    topFloat: cx(\n      float,\n      css`\n        inset-block-start: 0;\n        inset-inline: 0;\n        width: 100%;\n      `,\n    ),\n  };\n});\n\nexport const rootVariants = cva(styles.root, {\n  compoundVariants: [\n    { class: styles.leftFloat, mode: 'float', placement: 'left' },\n    { class: styles.rightFloat, mode: 'float', placement: 'right' },\n    { class: styles.topFloat, mode: 'float', placement: 'top' },\n    { class: styles.bottomFloat, mode: 'float', placement: 'bottom' },\n  ],\n  defaultVariants: { mode: 'fixed', placement: 'right' },\n  variants: {\n    mode: { fixed: styles.fixed, float: null },\n    placement: { bottom: null, left: null, right: null, top: null },\n  },\n});\n\nexport const handleVariants = cva(styles.handle, {\n  variants: {\n    edge: {\n      bottom: styles.handleHorizontal,\n      left: styles.handleVertical,\n      right: styles.handleVertical,\n      top: styles.handleHorizontal,\n    },\n  },\n});\n\nexport const toggleVariants = cva(styles.toggleRoot, {\n  variants: {\n    placement: {\n      bottom: styles.toggleTop,\n      left: styles.toggleRight,\n      right: styles.toggleLeft,\n      top: styles.toggleBottom,\n    },\n  },\n});\n"],"mappings":"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"}

package/es/base-ui/DraggablePanel/type.d.mts

@@ -1,7 +1,6 @@
 import { DivProps } from "../../types/index.mjs";
 import { Placement } from "./core/axes.mjs";
 import { CSSProperties } from "react";
-//#region src/base-ui/DraggablePanel/type.d.ts
 type DraggablePanelPlacement = Placement;
 interface DraggablePanelSize {
   height?: number | string;
@@ -48,6 +47,5 @@ interface DraggablePanelProps extends Omit<DivProps, 'onDrag'> {
     content?: CSSProperties;
   };
 }
-//#endregion
 export { DraggablePanelPlacement, DraggablePanelProps, DraggablePanelSize };
 //# sourceMappingURL=type.d.mts.map