@cube-dev/ui-kit 0.0.0-canary-855d62e → 0.0.0-canary-29fafcf

package/dist/components/layout/ResizablePanel.js

@@ -1,278 +0,0 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-855d62e | Cube Dev Team */
-import { tasty } from "../../tasty/tasty.js";
-import { mergeProps as mergeProps$1 } from "../../utils/react/mergeProps.js";
-import { useCombinedRefs } from "../../utils/react/useCombinedRefs.js";
-import { useEvent } from "../../_internal/hooks/use-event.js";
-import { useDebouncedValue } from "../../_internal/hooks/use-debounced-value.js";
-import { _Panel } from "./Panel.js";
-import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useHover, useMove } from "react-aria";
-import { useResizeObserver } from "@react-aria/utils";
-
-//#region src/components/layout/ResizablePanel.tsx
-const HandlerElement = tasty({
-	qa: "ResizeHandler",
-	styles: {
-		width: {
-			"": "initial",
-			horizontal: "9px",
-			"disabled & horizontal": "1bw"
-		},
-		height: {
-			"": "9px",
-			horizontal: "initial",
-			"disabled & !horizontal": "1bw"
-		},
-		top: {
-			"": 0,
-			"[data-direction=\"top\"]": "initial"
-		},
-		bottom: {
-			"": 0,
-			"[data-direction=\"bottom\"]": "initial"
-		},
-		right: {
-			"": 0,
-			"[data-direction=\"right\"]": "initial"
-		},
-		left: {
-			"": 0,
-			"[data-direction=\"left\"]": "initial"
-		},
-		transform: {
-			"[data-direction=\"top\"]": "translate(0, ($size-compensation - $visual-size))",
-			"[data-direction=\"right\"]": "translate(($visual-size - $size-compensation), 0)",
-			"[data-direction=\"bottom\"]": "translate(0, ($visual-size - $size-compensation))",
-			"[data-direction=\"left\"]": "translate(($size-compensation - $visual-size), 0)"
-		},
-		position: "absolute",
-		zIndex: 1,
-		cursor: {
-			"": "row-resize",
-			horizontal: "col-resize",
-			disabled: "not-allowed"
-		},
-		padding: 0,
-		boxSizing: "border-box",
-		transition: "theme",
-		"--size-compensation": {
-			"": "6px",
-			disabled: "1bw"
-		},
-		Track: {
-			width: {
-				"": "initial",
-				horizontal: "3px",
-				"disabled & horizontal": "1px"
-			},
-			height: {
-				"": "3px",
-				horizontal: "initial",
-				"disabled & !horizontal": "1px"
-			},
-			position: "absolute",
-			inset: {
-				"": "3px 0",
-				horizontal: "0 3px",
-				disabled: "0 0"
-			},
-			fill: {
-				"": "#border",
-				"(hovered | drag) & !disabled": "#purple-03"
-			},
-			transition: "theme",
-			outline: {
-				"": "1bw #primary-text.0",
-				drag: "1bw #primary-text"
-			},
-			outlineOffset: 1
-		},
-		Drag: {
-			display: "grid",
-			gap: "2bw",
-			flow: {
-				"": "row",
-				horizontal: "column"
-			},
-			gridColumns: {
-				"": "3px 3px 3px 3px 3px",
-				horizontal: "auto"
-			},
-			gridRows: {
-				"": "auto",
-				horizontal: "3px 3px 3px 3px 3px"
-			},
-			width: {
-				"": "auto",
-				horizontal: "1px"
-			},
-			height: {
-				"": "1px",
-				horizontal: "auto"
-			},
-			inset: {
-				"": "4px 50% auto auto",
-				horizontal: "50% 4px auto auto"
-			},
-			transform: {
-				"": "translate(-50%, 0)",
-				horizontal: "translate(0, -50%)"
-			},
-			position: "absolute",
-			transition: "theme"
-		},
-		DragPart: {
-			radius: true,
-			fill: {
-				"": "#dark-03",
-				"hovered | drag": "#dark-02",
-				disabled: "#dark-04"
-			}
-		}
-	}
-});
-const Handler = (props) => {
-	const { direction = "right", isDisabled, ...otherProps } = props;
-	const { hoverProps, isHovered } = useHover({});
-	const isHorizontal = direction === "left" || direction === "right";
-	return /* @__PURE__ */ jsxs(HandlerElement, {
-		...mergeProps$1(hoverProps, {
-			mods: {
-				hovered: useDebouncedValue(isHovered, 150),
-				horizontal: isHorizontal,
-				disabled: isDisabled
-			},
-			"data-direction": direction
-		}, otherProps),
-		children: [/* @__PURE__ */ jsx("div", { "data-element": "Track" }), !isDisabled ? /* @__PURE__ */ jsxs("div", {
-			"data-element": "Drag",
-			children: [
-				/* @__PURE__ */ jsx("div", { "data-element": "DragPart" }),
-				/* @__PURE__ */ jsx("div", { "data-element": "DragPart" }),
-				/* @__PURE__ */ jsx("div", { "data-element": "DragPart" }),
-				/* @__PURE__ */ jsx("div", { "data-element": "DragPart" }),
-				/* @__PURE__ */ jsx("div", { "data-element": "DragPart" })
-			]
-		}) : null]
-	});
-};
-const StyledPanel = tasty(_Panel, { styles: {
-	flexGrow: 0,
-	width: {
-		"": "$min-size $size $max-size",
-		"[data-direction=\"top\"] | [data-direction=\"bottom\"]": "initial"
-	},
-	height: {
-		"": "$min-size $size $max-size",
-		"[data-direction=\"left\"] | [data-direction=\"right\"]": "initial"
-	},
-	placeSelf: "stretch",
-	touchAction: "none",
-	"$indent-compensation": {
-		"": "3px",
-		disabled: "1bw"
-	}
-} });
-function ResizablePanel(props, ref) {
-	const timerRef = useRef(null);
-	const isControllable = typeof props.size === "number";
-	const { isDisabled, direction = "right", size: providedSize, onSizeChange, minSize = 200, maxSize = isControllable ? void 0 : "min(50%, 400px)", ...restProps } = props;
-	const [isDragging, setIsDragging] = useState(false);
-	const isHorizontal = direction === "left" || direction === "right";
-	ref = useCombinedRefs(ref);
-	const onResize = useEvent(() => {
-		if (ref?.current) {
-			const offsetProp = isHorizontal ? "offsetWidth" : "offsetHeight";
-			const containerSize = ref.current[offsetProp];
-			if (Math.abs(containerSize - size) < 1 && !isDisabled) setVisualSize(size);
-			else setVisualSize(containerSize);
-		}
-	});
-	useResizeObserver({
-		ref,
-		onResize
-	});
-	function clamp(size) {
-		if (typeof maxSize === "number") size = Math.min(maxSize, size);
-		if (typeof minSize === "number" || !minSize) size = Math.max(minSize || 0, size);
-		return Math.max(size, 0);
-	}
-	let [size, setSize] = useState(providedSize != null ? clamp(providedSize) : 200);
-	let [visualSize, setVisualSize] = useState(null);
-	let { moveProps } = useMove({
-		onMoveStart(e) {
-			if (isDisabled) return;
-			setIsDragging(true);
-			const offsetProp = isHorizontal ? "offsetWidth" : "offsetHeight";
-			if (ref.current && Math.abs(ref.current[offsetProp] - size) >= 1) setSize(Math.round(ref.current[offsetProp]));
-		},
-		onMove(e) {
-			setSize((size) => {
-				if (isDisabled) return size;
-				if (e.pointerType === "keyboard") return size;
-				size += isHorizontal ? e.deltaX * (direction === "right" ? 1 : -1) : e.deltaY * (direction === "bottom" ? 1 : -1);
-				return size;
-			});
-		},
-		onMoveEnd(e) {
-			setIsDragging(false);
-			setSize((size) => clamp(Math.round(size)));
-		}
-	});
-	const notifyChange = useEvent(() => {
-		setSize((size) => {
-			if (providedSize && Math.abs(providedSize - size) > .5) return providedSize;
-			return size;
-		});
-	});
-	useEffect(() => {
-		onResize();
-	}, [size, isDisabled]);
-	useEffect(() => {
-		if (!isDragging && visualSize != null && (providedSize == null || Math.abs(providedSize - visualSize) > .5)) onSizeChange?.(Math.round(visualSize));
-	}, [visualSize, isDragging]);
-	useEffect(() => {
-		timerRef.current = setTimeout(notifyChange, 500);
-		return () => {
-			if (timerRef.current) clearTimeout(timerRef.current);
-		};
-	}, [providedSize]);
-	const mods = useMemo(() => {
-		return {
-			drag: isDragging,
-			horizontal: isHorizontal,
-			disabled: isDisabled
-		};
-	}, [
-		isDragging,
-		isHorizontal,
-		isDisabled
-	]);
-	return /* @__PURE__ */ jsx(StyledPanel, {
-		ref,
-		"data-direction": direction,
-		mods,
-		extra: /* @__PURE__ */ jsx(Handler, {
-			isDisabled: isDisabled || visualSize == null,
-			direction,
-			...moveProps,
-			mods
-		}),
-		...mergeProps$1(restProps, {
-			style: {
-				"--size": `${size}px`,
-				"--visual-size": `${visualSize}px`,
-				"--min-size": typeof minSize === "number" ? `${minSize}px` : minSize,
-				"--max-size": typeof maxSize === "number" ? `${maxSize}px` : maxSize
-			},
-			innerStyles: { margin: `$indent-compensation ${direction}` }
-		})
-	});
-}
-const _ResizablePanel = forwardRef(ResizablePanel);
-_ResizablePanel.displayName = "ResizablePanel";
-
-//#endregion
-export { _ResizablePanel };
-//# sourceMappingURL=ResizablePanel.js.map

package/dist/components/layout/ResizablePanel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ResizablePanel.js","names":["mergeProps","Panel"],"sources":["../../../src/components/layout/ResizablePanel.tsx"],"sourcesContent":["import { useResizeObserver } from '@react-aria/utils';\nimport {\n  ForwardedRef,\n  forwardRef,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useHover, useMove } from 'react-aria';\n\nimport { useDebouncedValue, useEvent } from '../../_internal/hooks';\nimport { BasePropsWithoutChildren, Styles, tasty } from '../../tasty/index';\nimport { mergeProps, useCombinedRefs } from '../../utils/react';\n\nimport { CubePanelProps, Panel } from './Panel';\n\ntype Direction = 'top' | 'right' | 'bottom' | 'left';\n\nexport interface CubeResizablePanelProps extends CubePanelProps {\n  handlerStyles?: Styles;\n  direction: Direction;\n  size?: number;\n  onSizeChange?: (size: number) => void;\n  minSize?: string | number;\n  maxSize?: string | number;\n  isDisabled?: boolean;\n}\n\nconst HandlerElement = tasty({\n  qa: 'ResizeHandler',\n  styles: {\n    // The real size is slightly bigger than the visual one.\n    width: {\n      '': 'initial',\n      horizontal: '9px',\n      'disabled & horizontal': '1bw',\n    },\n    height: {\n      '': '9px',\n      horizontal: 'initial',\n      'disabled & !horizontal': '1bw',\n    },\n    top: {\n      '': 0,\n      '[data-direction=\"top\"]': 'initial',\n    },\n    bottom: {\n      '': 0,\n      '[data-direction=\"bottom\"]': 'initial',\n    },\n    right: {\n      '': 0,\n      '[data-direction=\"right\"]': 'initial',\n    },\n    left: {\n      '': 0,\n      '[data-direction=\"left\"]': 'initial',\n    },\n    // Transform requires a separate visual size property to respect size boundaries\n    transform: {\n      '[data-direction=\"top\"]':\n        'translate(0, ($size-compensation - $visual-size))',\n      '[data-direction=\"right\"]':\n        'translate(($visual-size - $size-compensation), 0)',\n      '[data-direction=\"bottom\"]':\n        'translate(0, ($visual-size - $size-compensation))',\n      '[data-direction=\"left\"]':\n        'translate(($size-compensation - $visual-size), 0)',\n    },\n    position: 'absolute',\n    zIndex: 1,\n    cursor: {\n      '': 'row-resize',\n      horizontal: 'col-resize',\n      disabled: 'not-allowed',\n    },\n    padding: 0,\n    boxSizing: 'border-box',\n    transition: 'theme',\n    '--size-compensation': {\n      '': '6px',\n      disabled: '1bw',\n    },\n\n    Track: {\n      width: {\n        '': 'initial',\n        horizontal: '3px',\n        'disabled & horizontal': '1px',\n      },\n      height: {\n        '': '3px',\n        horizontal: 'initial',\n        'disabled & !horizontal': '1px',\n      },\n      position: 'absolute',\n      inset: {\n        '': '3px 0',\n        horizontal: '0 3px',\n        disabled: '0 0',\n      },\n      fill: {\n        '': '#border',\n        '(hovered | drag) & !disabled': '#purple-03',\n      },\n      transition: 'theme',\n      outline: {\n        '': '1bw #primary-text.0',\n        drag: '1bw #primary-text',\n      },\n      outlineOffset: 1,\n    },\n\n    Drag: {\n      display: 'grid',\n      gap: '2bw',\n      flow: {\n        '': 'row',\n        horizontal: 'column',\n      },\n      gridColumns: {\n        '': '3px 3px 3px 3px 3px',\n        horizontal: 'auto',\n      },\n      gridRows: {\n        '': 'auto',\n        horizontal: '3px 3px 3px 3px 3px',\n      },\n      width: {\n        '': 'auto',\n        horizontal: '1px',\n      },\n      height: {\n        '': '1px',\n        horizontal: 'auto',\n      },\n      inset: {\n        '': '4px 50% auto auto',\n        horizontal: '50% 4px auto auto',\n      },\n      transform: {\n        '': 'translate(-50%, 0)',\n        horizontal: 'translate(0, -50%)',\n      },\n      position: 'absolute',\n      transition: 'theme',\n    },\n\n    DragPart: {\n      radius: true,\n      fill: {\n        '': '#dark-03',\n        'hovered | drag': '#dark-02',\n        disabled: '#dark-04',\n      },\n    },\n  },\n});\n\ninterface HandlerProps extends BasePropsWithoutChildren {\n  direction: Direction;\n}\n\nconst Handler = (props: HandlerProps) => {\n  const { direction = 'right', isDisabled, ...otherProps } = props;\n  const { hoverProps, isHovered } = useHover({});\n  const isHorizontal = direction === 'left' || direction === 'right';\n  const localIsHovered = useDebouncedValue(isHovered, 150);\n\n  return (\n    <HandlerElement\n      {...mergeProps(\n        hoverProps,\n        {\n          mods: {\n            hovered: localIsHovered,\n            horizontal: isHorizontal,\n            disabled: isDisabled,\n          },\n          'data-direction': direction,\n        },\n        otherProps,\n      )}\n    >\n      <div data-element=\"Track\" />\n      {!isDisabled ? (\n        <div data-element=\"Drag\">\n          <div data-element=\"DragPart\" />\n          <div data-element=\"DragPart\" />\n          <div data-element=\"DragPart\" />\n          <div data-element=\"DragPart\" />\n          <div data-element=\"DragPart\" />\n        </div>\n      ) : null}\n    </HandlerElement>\n  );\n};\n\nconst StyledPanel = tasty(Panel, {\n  styles: {\n    flexGrow: 0,\n    width: {\n      '': '$min-size $size $max-size',\n      '[data-direction=\"top\"] | [data-direction=\"bottom\"]': 'initial',\n    },\n    height: {\n      '': '$min-size $size $max-size',\n      '[data-direction=\"left\"] | [data-direction=\"right\"]': 'initial',\n    },\n    placeSelf: 'stretch',\n    touchAction: 'none',\n\n    '$indent-compensation': {\n      '': '3px',\n      disabled: '1bw',\n    },\n  },\n});\n\nfunction ResizablePanel(\n  props: CubeResizablePanelProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const timerRef = useRef<ReturnType<typeof setTimeout>>(null);\n  const isControllable = typeof props.size === 'number';\n  const {\n    isDisabled,\n    direction = 'right',\n    size: providedSize,\n    onSizeChange,\n    minSize = 200,\n    maxSize = isControllable ? undefined : 'min(50%, 400px)',\n    ...restProps\n  } = props;\n  const [isDragging, setIsDragging] = useState(false);\n  const isHorizontal = direction === 'left' || direction === 'right';\n\n  ref = useCombinedRefs(ref);\n\n  const onResize = useEvent(() => {\n    if (ref?.current) {\n      const offsetProp = isHorizontal ? 'offsetWidth' : 'offsetHeight';\n      const containerSize = ref.current[offsetProp];\n\n      if (Math.abs(containerSize - size) < 1 && !isDisabled) {\n        setVisualSize(size);\n      } else {\n        setVisualSize(containerSize);\n      }\n    }\n  });\n\n  useResizeObserver({\n    ref,\n    onResize,\n  });\n\n  function clamp(size: number) {\n    if (typeof maxSize === 'number') {\n      size = Math.min(maxSize, size);\n    }\n\n    if (typeof minSize === 'number' || !minSize) {\n      size = Math.max((minSize as number) || 0, size);\n    }\n\n    return Math.max(size, 0);\n  }\n\n  let [size, setSize] = useState<number>(\n    providedSize != null ? clamp(providedSize) : 200,\n  );\n  let [visualSize, setVisualSize] = useState<number | null>(null);\n\n  let { moveProps } = useMove({\n    onMoveStart(e) {\n      if (isDisabled) {\n        return;\n      }\n\n      setIsDragging(true);\n\n      const offsetProp = isHorizontal ? 'offsetWidth' : 'offsetHeight';\n\n      if (ref.current && Math.abs(ref.current[offsetProp] - size) >= 1) {\n        setSize(Math.round(ref.current[offsetProp]));\n      }\n    },\n    onMove(e) {\n      setSize((size) => {\n        if (isDisabled) {\n          return size;\n        }\n\n        if (e.pointerType === 'keyboard') {\n          return size;\n        }\n\n        size += isHorizontal\n          ? e.deltaX * (direction === 'right' ? 1 : -1)\n          : e.deltaY * (direction === 'bottom' ? 1 : -1);\n\n        return size;\n      });\n    },\n    onMoveEnd(e) {\n      setIsDragging(false);\n      setSize((size) => clamp(Math.round(size)));\n    },\n  });\n\n  // Since we sync provided size and the local one in two ways,\n  // we need a way to prevent infinite loop in some cases.\n  // We will run this in setTimeout and make sure it will get the most recent state.\n  const notifyChange = useEvent(() => {\n    setSize((size) => {\n      if (providedSize && Math.abs(providedSize - size) > 0.5) {\n        return providedSize;\n      }\n\n      return size;\n    });\n  });\n\n  useEffect(() => {\n    onResize();\n  }, [size, isDisabled]);\n\n  useEffect(() => {\n    if (\n      !isDragging &&\n      visualSize != null &&\n      (providedSize == null || Math.abs(providedSize - visualSize) > 0.5)\n    ) {\n      onSizeChange?.(Math.round(visualSize));\n    }\n  }, [visualSize, isDragging]);\n\n  useEffect(() => {\n    timerRef.current = setTimeout(notifyChange, 500);\n\n    return () => {\n      if (timerRef.current) {\n        clearTimeout(timerRef.current);\n      }\n    };\n  }, [providedSize]);\n\n  const mods = useMemo(() => {\n    return {\n      drag: isDragging,\n      horizontal: isHorizontal,\n      disabled: isDisabled,\n    };\n  }, [isDragging, isHorizontal, isDisabled]);\n\n  return (\n    <StyledPanel\n      ref={ref}\n      data-direction={direction}\n      mods={mods}\n      extra={\n        <Handler\n          isDisabled={isDisabled || visualSize == null}\n          direction={direction}\n          {...moveProps}\n          mods={mods}\n        />\n      }\n      {...mergeProps(restProps, {\n        style: {\n          // We set the current size further via width/min-width/max-width styles to respect size boundaries\n          '--size': `${size}px`,\n          // We use a separate visual size to paint the handler for a smoother experience\n          '--visual-size': `${visualSize}px`,\n          '--min-size': typeof minSize === 'number' ? `${minSize}px` : minSize,\n          '--max-size': typeof maxSize === 'number' ? `${maxSize}px` : maxSize,\n        },\n        innerStyles: {\n          // The panel inner space compensation for the handler\n          margin: `$indent-compensation ${direction}`,\n        },\n      })}\n    />\n  );\n}\n\nconst _ResizablePanel = forwardRef(ResizablePanel);\n\n_ResizablePanel.displayName = 'ResizablePanel';\n\nexport { _ResizablePanel as ResizablePanel };\n"],"mappings":"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"}

package/dist/components/layout/Space.d.ts

@@ -1,13 +0,0 @@
-
-import { AllBaseProps, ContainerStyleProps } from "../../tasty/types.js";
-import "../../tasty/index.js";
-import * as react from "react";
-
-//#region src/components/layout/Space.d.ts
-interface CubeSpaceProps extends AllBaseProps, ContainerStyleProps {
-  direction?: 'vertical' | 'horizontal';
-}
-declare const Space: react.ForwardRefExoticComponent<CubeSpaceProps & react.RefAttributes<unknown>>;
-//#endregion
-export { CubeSpaceProps, Space };
-//# sourceMappingURL=Space.d.ts.map

package/dist/components/layout/Space.js

@@ -1,38 +0,0 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-855d62e | Cube Dev Team */
-import { extractStyles } from "../../tasty/utils/styles.js";
-import { CONTAINER_STYLES } from "../../tasty/styles/list.js";
-import { tasty } from "../../tasty/tasty.js";
-import { filterBaseProps } from "../../tasty/utils/filter-base-props.js";
-import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
-
-//#region src/components/layout/Space.tsx
-const SpaceElement = tasty({ styles: {
-	display: "flex",
-	gap: true,
-	flow: {
-		"": "row",
-		vertical: "column"
-	},
-	placeItems: {
-		"": "center stretch",
-		vertical: "stretch"
-	}
-} });
-const Space = forwardRef(function Space(props, ref) {
-	const { mods, direction, ...otherProps } = props;
-	const styles = extractStyles(otherProps, CONTAINER_STYLES);
-	return /* @__PURE__ */ jsx(SpaceElement, {
-		...filterBaseProps(otherProps, { eventProps: true }),
-		ref,
-		mods: {
-			vertical: direction === "vertical" || otherProps.flow === "column" || styles.flow === "column",
-			...mods
-		},
-		styles
-	});
-});
-
-//#endregion
-export { Space };
-//# sourceMappingURL=Space.js.map

package/dist/components/layout/Space.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Space.js","names":[],"sources":["../../../src/components/layout/Space.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport {\n  AllBaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  filterBaseProps,\n  tasty,\n} from '../../tasty';\n\nconst SpaceElement = tasty({\n  styles: {\n    display: 'flex',\n    gap: true,\n    flow: {\n      '': 'row',\n      vertical: 'column',\n    },\n    placeItems: {\n      '': 'center stretch',\n      vertical: 'stretch',\n    },\n  },\n});\n\nexport interface CubeSpaceProps extends AllBaseProps, ContainerStyleProps {\n  direction?: 'vertical' | 'horizontal';\n}\n\nexport const Space = forwardRef(function Space(props: CubeSpaceProps, ref) {\n  const { mods, direction, ...otherProps } = props;\n  const styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  return (\n    <SpaceElement\n      {...filterBaseProps(otherProps, { eventProps: true })}\n      ref={ref}\n      mods={{\n        vertical:\n          direction === 'vertical' ||\n          otherProps.flow === 'column' ||\n          styles.flow === 'column',\n        ...mods,\n      }}\n      styles={styles}\n    />\n  );\n});\n"],"mappings":";;;;;;;;;AAWA,MAAM,eAAe,MAAM,EACzB,QAAQ;CACN,SAAS;CACT,KAAK;CACL,MAAM;EACJ,IAAI;EACJ,UAAU;EACX;CACD,YAAY;EACV,IAAI;EACJ,UAAU;EACX;CACF,EACF,CAAC;AAMF,MAAa,QAAQ,WAAW,SAAS,MAAM,OAAuB,KAAK;CACzE,MAAM,EAAE,MAAM,WAAW,GAAG,eAAe;CAC3C,MAAM,SAAS,cAAc,YAAY,iBAAiB;AAE1D,QACE,oBAAC;EACC,GAAI,gBAAgB,YAAY,EAAE,YAAY,MAAM,CAAC;EAChD;EACL,MAAM;GACJ,UACE,cAAc,cACd,WAAW,SAAS,YACpB,OAAO,SAAS;GAClB,GAAG;GACJ;EACO;GACR;EAEJ"}

package/dist/components/layout/Suffix.d.ts

@@ -1,15 +0,0 @@
-
-import { BaseProps, ContainerStyleProps } from "../../tasty/types.js";
-import "../../tasty/index.js";
-import * as react from "react";
-import { CSSProperties } from "react";
-
-//#region src/components/layout/Suffix.d.ts
-interface CubeSuffixProps extends BaseProps, ContainerStyleProps {
-  onWidthChange?: Function;
-  outerGap?: CSSProperties['gap'];
-}
-declare const Suffix: react.ForwardRefExoticComponent<CubeSuffixProps & react.RefAttributes<HTMLDivElement>>;
-//#endregion
-export { CubeSuffixProps, Suffix };
-//# sourceMappingURL=Suffix.d.ts.map

package/dist/components/layout/Suffix.js

@@ -1,49 +0,0 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-855d62e | Cube Dev Team */
-import { extractStyles, parseStyle } from "../../tasty/utils/styles.js";
-import { CONTAINER_STYLES } from "../../tasty/styles/list.js";
-import { tasty } from "../../tasty/tasty.js";
-import { filterBaseProps } from "../../tasty/utils/filter-base-props.js";
-import { useCombinedRefs } from "../../utils/react/useCombinedRefs.js";
-import { forwardRef, useEffect } from "react";
-import { jsx } from "react/jsx-runtime";
-
-//#region src/components/layout/Suffix.tsx
-const SuffixElement = tasty({
-	element: "Suffix",
-	styles: {
-		position: "absolute",
-		display: "grid",
-		placeContent: "stretch",
-		placeItems: "center",
-		flow: "column",
-		gap: 0,
-		right: "$suffix-gap",
-		top: "$suffix-gap",
-		bottom: "$suffix-gap",
-		color: "#dark-02",
-		height: "(100% - (2 * $suffix-gap))"
-	}
-});
-const Suffix = forwardRef(function Suffix(allProps, outerRef) {
-	let { onWidthChange, outerGap = "1bw", children, ...props } = allProps;
-	const styles = extractStyles(props, CONTAINER_STYLES);
-	const ref = useCombinedRefs(outerRef);
-	useEffect(() => {
-		if (ref && ref.current && onWidthChange) onWidthChange(ref.current.offsetWidth);
-	}, [
-		children,
-		ref,
-		onWidthChange
-	]);
-	return /* @__PURE__ */ jsx(SuffixElement, {
-		...filterBaseProps(props, { eventProps: true }),
-		ref,
-		styles,
-		style: { "--suffix-gap": parseStyle(outerGap).output },
-		children
-	});
-});
-
-//#endregion
-export { Suffix };
-//# sourceMappingURL=Suffix.js.map

package/dist/components/layout/Suffix.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Suffix.js","names":[],"sources":["../../../src/components/layout/Suffix.tsx"],"sourcesContent":["import { CSSProperties, forwardRef, useEffect } from 'react';\n\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  filterBaseProps,\n  parseStyle,\n  tasty,\n} from '../../tasty';\nimport { useCombinedRefs } from '../../utils/react';\n\nconst SuffixElement = tasty({\n  element: 'Suffix',\n  styles: {\n    position: 'absolute',\n    display: 'grid',\n    placeContent: 'stretch',\n    placeItems: 'center',\n    flow: 'column',\n    gap: 0,\n    right: '$suffix-gap',\n    top: '$suffix-gap',\n    bottom: '$suffix-gap',\n    color: '#dark-02',\n    height: '(100% - (2 * $suffix-gap))',\n  },\n});\n\nexport interface CubeSuffixProps extends BaseProps, ContainerStyleProps {\n  onWidthChange?: Function;\n  outerGap?: CSSProperties['gap'];\n}\n\nexport const Suffix = forwardRef<HTMLDivElement, CubeSuffixProps>(\n  function Suffix(allProps, outerRef) {\n    let { onWidthChange, outerGap = '1bw', children, ...props } = allProps;\n    const styles = extractStyles(props, CONTAINER_STYLES);\n    const ref = useCombinedRefs(outerRef);\n\n    useEffect(() => {\n      if (ref && ref.current && onWidthChange) {\n        onWidthChange(ref.current.offsetWidth);\n      }\n    }, [children, ref, onWidthChange]);\n\n    return (\n      <SuffixElement\n        {...filterBaseProps(props, { eventProps: true })}\n        ref={ref}\n        styles={styles}\n        style={{\n          '--suffix-gap': parseStyle(outerGap).output,\n        }}\n      >\n        {children}\n      </SuffixElement>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;AAaA,MAAM,gBAAgB,MAAM;CAC1B,SAAS;CACT,QAAQ;EACN,UAAU;EACV,SAAS;EACT,cAAc;EACd,YAAY;EACZ,MAAM;EACN,KAAK;EACL,OAAO;EACP,KAAK;EACL,QAAQ;EACR,OAAO;EACP,QAAQ;EACT;CACF,CAAC;AAOF,MAAa,SAAS,WACpB,SAAS,OAAO,UAAU,UAAU;CAClC,IAAI,EAAE,eAAe,WAAW,OAAO,UAAU,GAAG,UAAU;CAC9D,MAAM,SAAS,cAAc,OAAO,iBAAiB;CACrD,MAAM,MAAM,gBAAgB,SAAS;AAErC,iBAAgB;AACd,MAAI,OAAO,IAAI,WAAW,cACxB,eAAc,IAAI,QAAQ,YAAY;IAEvC;EAAC;EAAU;EAAK;EAAc,CAAC;AAElC,QACE,oBAAC;EACC,GAAI,gBAAgB,OAAO,EAAE,YAAY,MAAM,CAAC;EAC3C;EACG;EACR,OAAO,EACL,gBAAgB,WAAW,SAAS,CAAC,QACtC;EAEA;GACa;EAGrB"}

package/dist/components/navigation/Tabs/DraggableTabList.js

@@ -1,73 +0,0 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-855d62e | Cube Dev Team */
-import { useEvent } from "../../../_internal/hooks/use-event.js";
-import { useCallback, useMemo } from "react";
-import { ListDropTargetDelegate, ListKeyboardDelegate, useDraggableCollection, useDroppableCollection } from "react-aria";
-import { useDraggableCollectionState, useDroppableCollectionState } from "react-stately";
-
-//#region src/components/navigation/Tabs/DraggableTabList.tsx
-const getAllowedDropOperations = () => ["move"];
-/**
-* Component that enables drag-and-drop reordering for tabs.
-*
-* This component encapsulates all drag/drop hook calls, ensuring they're only
-* called when reordering is actually enabled. It uses the render prop pattern
-* to pass the drag/drop states to its children.
-*/
-function DraggableTabList({ state, listRef, orderedKeys, onReorder, children }) {
-	const handleReorder = useEvent((e) => {
-		if (!onReorder) return;
-		const { target, keys: movableKeys } = e;
-		const { dropPosition, key: targetKey } = target;
-		const movableKey = [...movableKeys][0];
-		const movableIndex = orderedKeys.indexOf(movableKey);
-		const targetIndex = orderedKeys.indexOf(String(targetKey));
-		if (movableIndex === -1 || targetIndex === -1) return;
-		onReorder(movableIndex !== targetIndex ? orderedKeys.reduce((arr, key, i) => {
-			if (i === movableIndex) return arr;
-			if (i === targetIndex) if (dropPosition === "before") {
-				arr.push(movableKey);
-				arr.push(key);
-			} else {
-				arr.push(key);
-				arr.push(movableKey);
-			}
-			else arr.push(key);
-			return arr;
-		}, []) : orderedKeys);
-	});
-	const getItems = useCallback((keys) => {
-		return [...keys].map((key) => {
-			const item = state.collection.getItem(key);
-			return { "text/plain": item?.textValue || String(key) };
-		});
-	}, [state.collection]);
-	const dragState = useDraggableCollectionState({
-		collection: state.collection,
-		selectionManager: state.selectionManager,
-		getItems,
-		getAllowedDropOperations
-	});
-	useDraggableCollection({
-		getItems,
-		getAllowedDropOperations
-	}, dragState, listRef);
-	const dropState = useDroppableCollectionState({
-		collection: state.collection,
-		selectionManager: state.selectionManager,
-		onReorder: handleReorder
-	});
-	const { collectionProps } = useDroppableCollection({
-		keyboardDelegate: useMemo(() => new ListKeyboardDelegate(state.collection, state.disabledKeys, listRef), [
-			state.collection,
-			state.disabledKeys,
-			listRef
-		]),
-		dropTargetDelegate: useMemo(() => new ListDropTargetDelegate(state.collection, listRef, { orientation: "horizontal" }), [state.collection, listRef]),
-		onReorder: handleReorder
-	}, dropState, listRef);
-	return children(dragState, dropState, collectionProps);
-}
-
-//#endregion
-export { DraggableTabList };
-//# sourceMappingURL=DraggableTabList.js.map

package/dist/components/navigation/Tabs/DraggableTabList.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DraggableTabList.js","names":[],"sources":["../../../../src/components/navigation/Tabs/DraggableTabList.tsx"],"sourcesContent":["import { ReactNode, RefObject, useCallback, useMemo } from 'react';\nimport {\n  DragItem,\n  DroppableCollectionReorderEvent,\n  ListDropTargetDelegate,\n  ListKeyboardDelegate,\n  useDraggableCollection,\n  useDroppableCollection,\n} from 'react-aria';\nimport {\n  DraggableCollectionState,\n  DroppableCollectionState,\n  TabListState,\n  useDraggableCollectionState,\n  useDroppableCollectionState,\n} from 'react-stately';\n\nimport { useEvent } from '../../../_internal/hooks';\n\nimport type { DropOperation, Key } from '@react-types/shared';\n\n// Stable function reference to avoid re-renders in drag/drop hooks\nconst getAllowedDropOperations = (): DropOperation[] => ['move'];\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface DraggableTabListProps {\n  /** Tab list state from React Stately */\n  state: TabListState<object>;\n  /** Ref to the tab list container */\n  listRef: RefObject<HTMLDivElement | null>;\n  /** Current ordered keys */\n  orderedKeys: string[];\n  /** Callback when tabs are reordered */\n  onReorder?: (newOrder: string[]) => void;\n  /** Render function that receives drag/drop states */\n  children: (\n    dragState: DraggableCollectionState,\n    dropState: DroppableCollectionState,\n    collectionProps: Record<string, unknown>,\n  ) => ReactNode;\n}\n\n// =============================================================================\n// Component\n// =============================================================================\n\n/**\n * Component that enables drag-and-drop reordering for tabs.\n *\n * This component encapsulates all drag/drop hook calls, ensuring they're only\n * called when reordering is actually enabled. It uses the render prop pattern\n * to pass the drag/drop states to its children.\n */\nexport function DraggableTabList({\n  state,\n  listRef,\n  orderedKeys,\n  onReorder,\n  children,\n}: DraggableTabListProps) {\n  // Handle reorder event from drag-and-drop\n  const handleReorder = useEvent((e: DroppableCollectionReorderEvent) => {\n    if (!onReorder) return;\n\n    const { target, keys: movableKeys } = e;\n    const { dropPosition, key: targetKey } = target;\n    const movableKey = [...movableKeys][0] as string;\n\n    const movableIndex = orderedKeys.indexOf(movableKey);\n    const targetIndex = orderedKeys.indexOf(String(targetKey));\n\n    if (movableIndex === -1 || targetIndex === -1) return;\n\n    // Reorder keys\n    const newKeys =\n      movableIndex !== targetIndex\n        ? orderedKeys.reduce((arr, key, i) => {\n            // Skip the key we are moving\n            if (i === movableIndex) {\n              return arr;\n            }\n\n            // Insert the movable key at the target position\n            if (i === targetIndex) {\n              if (dropPosition === 'before') {\n                arr.push(movableKey);\n                arr.push(key);\n              } else {\n                // 'after' or 'on' - treat 'on' as 'after' since tabs are linear\n                arr.push(key);\n                arr.push(movableKey);\n              }\n            } else {\n              arr.push(key);\n            }\n\n            return arr;\n          }, [] as string[])\n        : orderedKeys;\n\n    onReorder(newKeys);\n  });\n\n  // Get items for draggable collection\n  const getItems = useCallback(\n    (keys: Set<Key>): DragItem[] => {\n      return [...keys].map((key) => {\n        const item = state.collection.getItem(key);\n        return {\n          'text/plain': item?.textValue || String(key),\n        };\n      });\n    },\n    [state.collection],\n  );\n\n  // Setup drag state for the collection\n  const dragState = useDraggableCollectionState({\n    collection: state.collection,\n    selectionManager: state.selectionManager,\n    getItems,\n    getAllowedDropOperations,\n  });\n\n  // Enable the draggable collection\n  useDraggableCollection(\n    {\n      getItems,\n      getAllowedDropOperations,\n    },\n    dragState,\n    listRef,\n  );\n\n  // Setup drop state for the collection\n  const dropState = useDroppableCollectionState({\n    collection: state.collection,\n    selectionManager: state.selectionManager,\n    onReorder: handleReorder,\n  });\n\n  // Create delegates for drop handling\n  const keyboardDelegate = useMemo(\n    () =>\n      new ListKeyboardDelegate(state.collection, state.disabledKeys, listRef),\n    [state.collection, state.disabledKeys, listRef],\n  );\n\n  const dropTargetDelegate = useMemo(\n    () =>\n      new ListDropTargetDelegate(state.collection, listRef, {\n        orientation: 'horizontal',\n      }),\n    [state.collection, listRef],\n  );\n\n  const { collectionProps } = useDroppableCollection(\n    {\n      keyboardDelegate,\n      dropTargetDelegate,\n      onReorder: handleReorder,\n    },\n    dropState,\n    listRef,\n  );\n\n  return children(dragState, dropState, collectionProps);\n}\n"],"mappings":";;;;;;;AAsBA,MAAM,iCAAkD,CAAC,OAAO;;;;;;;;AAkChE,SAAgB,iBAAiB,EAC/B,OACA,SACA,aACA,WACA,YACwB;CAExB,MAAM,gBAAgB,UAAU,MAAuC;AACrE,MAAI,CAAC,UAAW;EAEhB,MAAM,EAAE,QAAQ,MAAM,gBAAgB;EACtC,MAAM,EAAE,cAAc,KAAK,cAAc;EACzC,MAAM,aAAa,CAAC,GAAG,YAAY,CAAC;EAEpC,MAAM,eAAe,YAAY,QAAQ,WAAW;EACpD,MAAM,cAAc,YAAY,QAAQ,OAAO,UAAU,CAAC;AAE1D,MAAI,iBAAiB,MAAM,gBAAgB,GAAI;AA6B/C,YAzBE,iBAAiB,cACb,YAAY,QAAQ,KAAK,KAAK,MAAM;AAElC,OAAI,MAAM,aACR,QAAO;AAIT,OAAI,MAAM,YACR,KAAI,iBAAiB,UAAU;AAC7B,QAAI,KAAK,WAAW;AACpB,QAAI,KAAK,IAAI;UACR;AAEL,QAAI,KAAK,IAAI;AACb,QAAI,KAAK,WAAW;;OAGtB,KAAI,KAAK,IAAI;AAGf,UAAO;KACN,EAAE,CAAa,GAClB,YAEY;GAClB;CAGF,MAAM,WAAW,aACd,SAA+B;AAC9B,SAAO,CAAC,GAAG,KAAK,CAAC,KAAK,QAAQ;GAC5B,MAAM,OAAO,MAAM,WAAW,QAAQ,IAAI;AAC1C,UAAO,EACL,cAAc,MAAM,aAAa,OAAO,IAAI,EAC7C;IACD;IAEJ,CAAC,MAAM,WAAW,CACnB;CAGD,MAAM,YAAY,4BAA4B;EAC5C,YAAY,MAAM;EAClB,kBAAkB,MAAM;EACxB;EACA;EACD,CAAC;AAGF,wBACE;EACE;EACA;EACD,EACD,WACA,QACD;CAGD,MAAM,YAAY,4BAA4B;EAC5C,YAAY,MAAM;EAClB,kBAAkB,MAAM;EACxB,WAAW;EACZ,CAAC;CAiBF,MAAM,EAAE,oBAAoB,uBAC1B;EACE,kBAhBqB,cAErB,IAAI,qBAAqB,MAAM,YAAY,MAAM,cAAc,QAAQ,EACzE;GAAC,MAAM;GAAY,MAAM;GAAc;GAAQ,CAChD;EAaG,oBAXuB,cAEvB,IAAI,uBAAuB,MAAM,YAAY,SAAS,EACpD,aAAa,cACd,CAAC,EACJ,CAAC,MAAM,YAAY,QAAQ,CAC5B;EAMG,WAAW;EACZ,EACD,WACA,QACD;AAED,QAAO,SAAS,WAAW,WAAW,gBAAgB"}

package/dist/components/navigation/Tabs/EditableTitle.js

@@ -1,100 +0,0 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-855d62e | Cube Dev Team */
-import { useEvent } from "../../../_internal/hooks/use-event.js";
-import { EditableTitleInputElement, HiddenMeasure } from "./styled.js";
-import { useLayoutEffect, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { useTextField } from "react-aria";
-
-//#region src/components/navigation/Tabs/EditableTitle.tsx
-/**
-* Inline editable title component for tab labels.
-*
-* When not editing, displays the title as a span with double-click to edit.
-* When editing, displays an auto-sizing input field.
-*/
-function EditableTitle({ title, isEditing, editValue, onEditValueChange, onStartEditing, onSubmit, onCancel }) {
-	const inputRef = useRef(null);
-	const measureRef = useRef(null);
-	const [inputWidth, setInputWidth] = useState(null);
-	const justEnteredEditModeRef = useRef(false);
-	const { inputProps } = useTextField({
-		"aria-label": "Edit tab title",
-		value: editValue,
-		onChange: onEditValueChange
-	}, inputRef);
-	useLayoutEffect(() => {
-		if (isEditing && inputRef.current) {
-			const input = inputRef.current;
-			justEnteredEditModeRef.current = true;
-			input.focus();
-			requestAnimationFrame(() => {
-				input.select();
-				requestAnimationFrame(() => {
-					requestAnimationFrame(() => {
-						justEnteredEditModeRef.current = false;
-					});
-				});
-			});
-		} else justEnteredEditModeRef.current = false;
-	}, [isEditing]);
-	useLayoutEffect(() => {
-		if (isEditing && measureRef.current) {
-			const width = measureRef.current.scrollWidth;
-			setInputWidth(width);
-		}
-	}, [isEditing, editValue]);
-	const handleKeyDown = useEvent((e) => {
-		if (e.key === "Enter") {
-			e.preventDefault();
-			onSubmit();
-		} else if (e.key === "Escape") {
-			e.preventDefault();
-			onCancel();
-		} else if (e.key === "ArrowLeft" || e.key === "ArrowRight" || e.key === " " || e.key === "Delete" || e.key === "Backspace") e.stopPropagation();
-	});
-	const handleBlur = useEvent(() => {
-		if (justEnteredEditModeRef.current) {
-			requestAnimationFrame(() => {
-				inputRef.current?.focus();
-				inputRef.current?.select();
-			});
-			return;
-		}
-		onSubmit();
-	});
-	const handleDoubleClick = useEvent((e) => {
-		e.preventDefault();
-		e.stopPropagation();
-		onStartEditing();
-	});
-	if (isEditing) {
-		const mergedProps = {
-			...inputProps,
-			onKeyDown: (e) => {
-				handleKeyDown(e);
-				inputProps.onKeyDown?.(e);
-			},
-			onBlur: (e) => {
-				handleBlur();
-				inputProps.onBlur?.(e);
-			}
-		};
-		return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(HiddenMeasure, {
-			ref: measureRef,
-			"aria-hidden": "true",
-			children: editValue || " "
-		}), /* @__PURE__ */ jsx(EditableTitleInputElement, {
-			...mergedProps,
-			ref: inputRef,
-			tokens: { "$input-width": inputWidth ? `${inputWidth}px` : "auto" }
-		})] });
-	}
-	return /* @__PURE__ */ jsx("span", {
-		onDoubleClick: handleDoubleClick,
-		children: title
-	});
-}
-
-//#endregion
-export { EditableTitle };
-//# sourceMappingURL=EditableTitle.js.map

package/dist/components/navigation/Tabs/EditableTitle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"EditableTitle.js","names":[],"sources":["../../../../src/components/navigation/Tabs/EditableTitle.tsx"],"sourcesContent":["import { useLayoutEffect, useRef, useState } from 'react';\nimport { useTextField } from 'react-aria';\n\nimport { useEvent } from '../../../_internal/hooks';\n\nimport { EditableTitleInputElement, HiddenMeasure } from './styled';\n\nimport type { FocusEvent, KeyboardEvent, MouseEvent, ReactNode } from 'react';\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface EditableTitleProps {\n  /** The current title to display (when not editing) */\n  title: ReactNode;\n  /** Whether the title is currently being edited */\n  isEditing: boolean;\n  /** Current edit input value */\n  editValue: string;\n  /** Callback when edit value changes */\n  onEditValueChange: (value: string) => void;\n  /** Callback to start editing (e.g., on double-click) */\n  onStartEditing: () => void;\n  /** Callback when editing is submitted (Enter or blur) */\n  onSubmit: () => void;\n  /** Callback when editing is cancelled (Escape) */\n  onCancel: () => void;\n}\n\n// =============================================================================\n// Component\n// =============================================================================\n\n/**\n * Inline editable title component for tab labels.\n *\n * When not editing, displays the title as a span with double-click to edit.\n * When editing, displays an auto-sizing input field.\n */\nexport function EditableTitle({\n  title,\n  isEditing,\n  editValue,\n  onEditValueChange,\n  onStartEditing,\n  onSubmit,\n  onCancel,\n}: EditableTitleProps) {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const measureRef = useRef<HTMLSpanElement>(null);\n  const [inputWidth, setInputWidth] = useState<number | null>(null);\n  const justEnteredEditModeRef = useRef(false);\n\n  // React Aria text field hook\n  const { inputProps } = useTextField(\n    {\n      'aria-label': 'Edit tab title',\n      value: editValue,\n      onChange: onEditValueChange,\n    },\n    inputRef,\n  );\n\n  // Focus and select input when entering edit mode\n  useLayoutEffect(() => {\n    if (isEditing && inputRef.current) {\n      const input = inputRef.current;\n\n      // Set flag to ignore immediate blur events\n      justEnteredEditModeRef.current = true;\n\n      input.focus();\n      // Use requestAnimationFrame to ensure selection happens after focus\n      requestAnimationFrame(() => {\n        input.select();\n        // Clear the flag after focus is established (allow 2 frames for menu to fully close)\n        requestAnimationFrame(() => {\n          requestAnimationFrame(() => {\n            justEnteredEditModeRef.current = false;\n          });\n        });\n      });\n    } else {\n      justEnteredEditModeRef.current = false;\n    }\n  }, [isEditing]);\n\n  // Measure text width and update input width\n  useLayoutEffect(() => {\n    if (isEditing && measureRef.current) {\n      const width = measureRef.current.scrollWidth;\n      setInputWidth(width);\n    }\n  }, [isEditing, editValue]);\n\n  const handleKeyDown = useEvent((e: KeyboardEvent) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      onSubmit();\n    } else if (e.key === 'Escape') {\n      e.preventDefault();\n      onCancel();\n    } else if (\n      e.key === 'ArrowLeft' ||\n      e.key === 'ArrowRight' ||\n      e.key === ' ' ||\n      e.key === 'Delete' ||\n      e.key === 'Backspace'\n    ) {\n      // Stop propagation to prevent tab navigation/deletion while editing\n      e.stopPropagation();\n    }\n  });\n\n  const handleBlur = useEvent(() => {\n    // Ignore blur events immediately after entering edit mode (menu closing causes focus loss)\n    if (justEnteredEditModeRef.current) {\n      // Re-focus the input since something else stole focus\n      requestAnimationFrame(() => {\n        inputRef.current?.focus();\n        inputRef.current?.select();\n      });\n      return;\n    }\n    // Submit on blur\n    onSubmit();\n  });\n\n  const handleDoubleClick = useEvent((e: MouseEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    onStartEditing();\n  });\n\n  if (isEditing) {\n    // Merge our handlers with React Aria's inputProps\n    const mergedProps = {\n      ...inputProps,\n      onKeyDown: (e: KeyboardEvent<HTMLInputElement>) => {\n        handleKeyDown(e);\n        inputProps.onKeyDown?.(e);\n      },\n      onBlur: (e: FocusEvent<HTMLInputElement>) => {\n        handleBlur();\n        inputProps.onBlur?.(e);\n      },\n    };\n\n    return (\n      <>\n        <HiddenMeasure ref={measureRef} aria-hidden=\"true\">\n          {editValue || ' '}\n        </HiddenMeasure>\n        <EditableTitleInputElement\n          {...mergedProps}\n          ref={inputRef}\n          tokens={{ '$input-width': inputWidth ? `${inputWidth}px` : 'auto' }}\n        />\n      </>\n    );\n  }\n\n  return <span onDoubleClick={handleDoubleClick}>{title}</span>;\n}\n"],"mappings":";;;;;;;;;;;;;;AAwCA,SAAgB,cAAc,EAC5B,OACA,WACA,WACA,mBACA,gBACA,UACA,YACqB;CACrB,MAAM,WAAW,OAAyB,KAAK;CAC/C,MAAM,aAAa,OAAwB,KAAK;CAChD,MAAM,CAAC,YAAY,iBAAiB,SAAwB,KAAK;CACjE,MAAM,yBAAyB,OAAO,MAAM;CAG5C,MAAM,EAAE,eAAe,aACrB;EACE,cAAc;EACd,OAAO;EACP,UAAU;EACX,EACD,SACD;AAGD,uBAAsB;AACpB,MAAI,aAAa,SAAS,SAAS;GACjC,MAAM,QAAQ,SAAS;AAGvB,0BAAuB,UAAU;AAEjC,SAAM,OAAO;AAEb,+BAA4B;AAC1B,UAAM,QAAQ;AAEd,gCAA4B;AAC1B,iCAA4B;AAC1B,6BAAuB,UAAU;OACjC;MACF;KACF;QAEF,wBAAuB,UAAU;IAElC,CAAC,UAAU,CAAC;AAGf,uBAAsB;AACpB,MAAI,aAAa,WAAW,SAAS;GACnC,MAAM,QAAQ,WAAW,QAAQ;AACjC,iBAAc,MAAM;;IAErB,CAAC,WAAW,UAAU,CAAC;CAE1B,MAAM,gBAAgB,UAAU,MAAqB;AACnD,MAAI,EAAE,QAAQ,SAAS;AACrB,KAAE,gBAAgB;AAClB,aAAU;aACD,EAAE,QAAQ,UAAU;AAC7B,KAAE,gBAAgB;AAClB,aAAU;aAEV,EAAE,QAAQ,eACV,EAAE,QAAQ,gBACV,EAAE,QAAQ,OACV,EAAE,QAAQ,YACV,EAAE,QAAQ,YAGV,GAAE,iBAAiB;GAErB;CAEF,MAAM,aAAa,eAAe;AAEhC,MAAI,uBAAuB,SAAS;AAElC,+BAA4B;AAC1B,aAAS,SAAS,OAAO;AACzB,aAAS,SAAS,QAAQ;KAC1B;AACF;;AAGF,YAAU;GACV;CAEF,MAAM,oBAAoB,UAAU,MAAkB;AACpD,IAAE,gBAAgB;AAClB,IAAE,iBAAiB;AACnB,kBAAgB;GAChB;AAEF,KAAI,WAAW;EAEb,MAAM,cAAc;GAClB,GAAG;GACH,YAAY,MAAuC;AACjD,kBAAc,EAAE;AAChB,eAAW,YAAY,EAAE;;GAE3B,SAAS,MAAoC;AAC3C,gBAAY;AACZ,eAAW,SAAS,EAAE;;GAEzB;AAED,SACE,8CACE,oBAAC;GAAc,KAAK;GAAY,eAAY;aACzC,aAAa;IACA,EAChB,oBAAC;GACC,GAAI;GACJ,KAAK;GACL,QAAQ,EAAE,gBAAgB,aAAa,GAAG,WAAW,MAAM,QAAQ;IACnE,IACD;;AAIP,QAAO,oBAAC;EAAK,eAAe;YAAoB;GAAa"}