@cube-dev/ui-kit 0.0.0-canary-e056095 → 0.0.0-canary-31f7f8e

package/dist/utils/react/usePopoverSync.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e056095 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-31f7f8e | Cube Dev Team */
 import { EventBusContext, useEventBus } from "./useEventBus.js";
 import { useCallback, useContext, useEffect, useRef } from "react";
 

package/dist/utils/react/useQaProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e056095 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-31f7f8e | Cube Dev Team */
 //#region src/utils/react/useQaProps.ts
 /**
 * Processes QA props.

package/dist/utils/react/useScheme.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e056095 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-31f7f8e | Cube Dev Team */
 import { useSyncExternalStore } from "react";
 
 //#region src/utils/react/useScheme.ts

package/dist/utils/react/useViewportSize.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e056095 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-31f7f8e | Cube Dev Team */
 import { useEffect, useState } from "react";
 
 //#region src/utils/react/useViewportSize.ts

package/dist/utils/react/wrapNodeIfPlain.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e056095 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-31f7f8e | Cube Dev Team */
 import { isValidElement } from "react";
 import { isFragment } from "react-is";
 

package/dist/utils/selection.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e056095 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-31f7f8e | Cube Dev Team */
 //#region src/utils/selection.ts
 /**
 * Deduplicate/toggle keys in a selection: if a key appears twice it is

package/dist/utils/styles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e056095 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-31f7f8e | Cube Dev Team */
 //#region src/utils/styles.ts
 /**
 * Split properties into style and non-style properties.

package/dist/utils/tree.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e056095 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-31f7f8e | Cube Dev Team */
 //#region src/utils/tree.ts
 function toFlatTree(tree, includingFolders) {
 	return tree.reduce((result, node) => {

package/dist/utils/warnings.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e056095 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-31f7f8e | Cube Dev Team */
 //#region src/utils/warnings.ts
 const SUGGESTED_PROP_MAP = {
 	disabled: "isDisabled",

package/dist/version.js

@@ -1,6 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e056095 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-31f7f8e | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.0.0-canary-e056095";
+const VERSION = "0.0.0-canary-31f7f8e";
 const TASTY_VERSION = "3.7.0";
 if (typeof window !== "undefined") {
 	const version = VERSION;

package/docs/Usage.md

@@ -342,6 +342,24 @@ resolvePresetValues('s3'); // { fontFamily: 'ui-monospace, …', fontSize: '14px
 
 `useTokenValue()`, `useTokenValues()` and `usePresetValues()` are the same three readers as hooks, re-resolved whenever the palette is re-seeded or the scheme / contrast tier flips. The object `useTokenValues()` returns keeps its identity while the values do, so it is safe as a dependency of the theme object built from it.
 
+### Colors a Legacy Parser Will Accept
+
+Every color token computes to `oklch(...)`, and a large class of consumers validates colors against "HEX, `rgb()`, or `hsl()`" and **silently drops** anything else — Stripe's Appearance API falls back to its own light theme, `d3-color` (so Vega) throws, mapbox-gl rejects even an `#rrggbbaa` tail. Nothing warns, and a round trip through the DOM does not help: Chrome serializes `oklch` back as `oklch`. So `resolveTokenValue()` hands back a value that is correct and unusable at the same time, and `toLegacyColor()` is the step between them.
+
+```ts
+import { resolveTokenValue, toLegacyColor } from '@cube-dev/ui-kit';
+
+toLegacyColor(resolveTokenValue('#purple')); // '#6b53e4'
+toLegacyColor('oklch(0.55 0.21 285 / 0.4)'); // 'rgba(107, 83, 228, 0.4)'
+toLegacyColor('oklch(0.55 0.21 285 / 0.4)', { alpha: 'hex' }); // '#6b53e466'
+```
+
+An opaque color is always `#rrggbb`, which everything accepts. Only the translucent case has a choice, and `alpha` picks it, because the acceptable form differs per consumer: `'rgba'` (the default) is the widest — Stripe, mapbox-gl and CSS all take it — while `'hex'` gives the shorter `#rrggbbaa` that Vega and plain CSS prefer and mapbox-gl drops.
+
+It takes `null` so it composes with `resolveTokenValue()` directly, and reads every notation the kit emits or accepts: `oklch()`, `okhsl()`, `okhst()`, `rgb()`, `hsl()`, hex (3/4/6/8 digits) and `transparent`, in either the slash or the legacy comma alpha syntax, including the components a hand-rolled regex misses — a negative hue, any angle unit, scientific notation, a `none` component. A chroma outside the sRGB gamut is clipped to the gamut boundary rather than allowed to overflow a channel.
+
+A value it cannot read returns `fallback ?? null` rather than the input, which is the whole point: `color-mix()`, relative syntax (`oklch(from …)`) and a bare `var()` reference only have a value inside a CSS engine, and handing one back unchanged is exactly what makes the consumer drop the color and revert to its own theme.
+
 These resolve token _values_. For the ambient _conditions_ themselves — which scheme and contrast tier the document is in — see [Reading the scheme from JS](#reading-the-scheme-from-js).
 
 So these helpers do not inspect the value. They read `$tokens-applied`, a marker the token block declares alongside the tokens, which answers the question that matters — _are the kit's tokens in effect on this element?_ Off that surface every read returns `null` (or `fallback`) and warns once in development; on it, the computed value is taken as the truth.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.0.0-canary-e056095",
+  "version": "0.0.0-canary-31f7f8e",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {

package/dist/components/fields/ListBoxPopover/useCompositeFocus.d.ts

@@ -1,2 +0,0 @@
-
-import React, { RefObject } from "react";

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

@@ -1,19 +0,0 @@
-
-import { CubeDashboardContainerProps, CubeDashboardProps, CubeDashboardTabProps, CubeDashboardTabsProps, CubeDashboardWidgetProps, DashboardAddItemDefinition, DashboardAddItemInfo, DashboardAddItemKind, DashboardContainerKind, DashboardNodeAction, DashboardParentKind, DashboardPlacement, DashboardPlacementChangeInfo, DashboardPlacementChangeInput, DashboardPlacementChangeItem, DashboardPlacementChangePhase, DashboardPlacementChangeReason, DashboardPlacementProps, DashboardSelectionMode } from "./types.js";
-import { DashboardTab, DashboardTabs } from "./DashboardTabs.js";
-import { DashboardGrid, DashboardHorizontalStack, DashboardVerticalStack } from "./DashboardContainer.js";
-import { DashboardWidget } from "./DashboardWidget.js";
-import * as react from "react";
-
-//#region src/components/layout/Dashboard/Dashboard.d.ts
-declare const Dashboard: react.ForwardRefExoticComponent<CubeDashboardProps & react.RefAttributes<HTMLDivElement>> & {
-  HorizontalStack: react.ForwardRefExoticComponent<CubeDashboardContainerProps & react.RefAttributes<HTMLDivElement>>;
-  VerticalStack: react.ForwardRefExoticComponent<CubeDashboardContainerProps & react.RefAttributes<HTMLDivElement>>;
-  Grid: react.ForwardRefExoticComponent<CubeDashboardContainerProps & react.RefAttributes<HTMLDivElement>>;
-  Tabs: react.ForwardRefExoticComponent<CubeDashboardTabsProps & react.RefAttributes<HTMLDivElement>>;
-  Tab: typeof DashboardTab;
-  Widget: react.ForwardRefExoticComponent<CubeDashboardWidgetProps & react.RefAttributes<HTMLDivElement>>;
-};
-//#endregion
-export { Dashboard };
-//# sourceMappingURL=Dashboard.d.ts.map

package/dist/components/layout/Dashboard/Dashboard.js

@@ -1,188 +0,0 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e056095 | Cube Dev Team */
-import { extractStyles } from "../../../utils/styles.js";
-import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
-import { mergeProps } from "../../../utils/react/mergeProps.js";
-import { useEvent } from "../../../_internal/hooks/use-event.js";
-import { DashboardAuthoringContext, DashboardEditingContext, DashboardMetricsContext, DashboardSelectionContext, DashboardTreeContext } from "./context.js";
-import { normalizeGap } from "./placement.js";
-import { DashboardElement } from "./styles.js";
-import { DashboardRootAddControl } from "./DashboardContainerContent.js";
-import { DashboardGrid, DashboardHorizontalStack, DashboardVerticalStack } from "./DashboardContainer.js";
-import { DashboardTab, DashboardTabs } from "./DashboardTabs.js";
-import { DashboardWidget } from "./DashboardWidget.js";
-import { CONTAINER_STYLES, filterBaseProps } from "@tenphi/tasty";
-import { Children, forwardRef, useMemo, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/components/layout/Dashboard/Dashboard.tsx
-const DashboardRoot = forwardRef(function DashboardRoot(props, ref) {
-	const { children, rowHeight = 80, gap = 16, isEditing = false, selectionMode = "multiple", selectedKeys: controlledSelectedKeys, defaultSelectedKeys = [], onSelectionChange, addItems = [], onAddItem, styles: explicitStyles, style, ...otherProps } = props;
-	const [columnGap, rowGap] = normalizeGap(gap);
-	const [uncontrolledSelectedKeys, setUncontrolledSelectedKeys] = useState(defaultSelectedKeys);
-	const [movingId, setMovingId] = useState(null);
-	const [arrivingIds, setArrivingIds] = useState(() => /* @__PURE__ */ new Set());
-	const acceptsArrivalsRef = useRef(false);
-	const arrivalTimerRef = useRef(null);
-	const registrationsRef = useRef(/* @__PURE__ */ new Map());
-	const isControlled = controlledSelectedKeys !== void 0;
-	const selectedKeys = selectionMode === "none" ? [] : controlledSelectedKeys ?? uncontrolledSelectedKeys;
-	const selectedKeySet = useMemo(() => new Set(selectedKeys), [selectedKeys]);
-	const commitSelection = useEvent((next) => {
-		if (!isControlled) setUncontrolledSelectedKeys(next);
-		onSelectionChange?.(next);
-	});
-	const register = useEvent((id, registration) => {
-		registrationsRef.current.set(id, registration);
-		return () => {
-			if (registrationsRef.current.get(id) === registration) registrationsRef.current.delete(id);
-		};
-	});
-	const select = useEvent((id, additive) => {
-		if (selectionMode === "none") return;
-		const registration = registrationsRef.current.get(id);
-		if (!registration) return;
-		if (selectionMode === "single" || !additive) {
-			commitSelection([id]);
-			return;
-		}
-		const current = new Set(selectedKeySet);
-		if (current.has(id)) {
-			current.delete(id);
-			commitSelection([...current]);
-			return;
-		}
-		for (const selectedId of current) {
-			const selected = registrationsRef.current.get(selectedId);
-			if (!selected) continue;
-			if (registration.ancestorIds.includes(selectedId)) return;
-			if (selected.parentId !== registration.parentId) return;
-			if (selected.ancestorIds.includes(id)) current.delete(selectedId);
-		}
-		current.add(id);
-		commitSelection([...current]);
-	});
-	const handleRootClick = useEvent((event) => {
-		if (event.target.closest("[data-dashboard-node]")) return;
-		if (selectedKeySet.size > 0) commitSelection([]);
-	});
-	const startMoving = useEvent((id) => setMovingId(id));
-	const stopMoving = useEvent((id) => {
-		setMovingId((current) => current === id ? null : current);
-	});
-	const markArriving = useEvent((id) => {
-		if (!acceptsArrivalsRef.current) return;
-		if (arrivalTimerRef.current !== null) clearTimeout(arrivalTimerRef.current);
-		setArrivingIds((current) => new Set(current).add(id));
-		arrivalTimerRef.current = setTimeout(() => {
-			setArrivingIds(/* @__PURE__ */ new Set());
-			arrivalTimerRef.current = null;
-		}, 1e3);
-	});
-	useLayoutEffect$1(() => {
-		acceptsArrivalsRef.current = true;
-		return () => {
-			acceptsArrivalsRef.current = false;
-			if (arrivalTimerRef.current !== null) clearTimeout(arrivalTimerRef.current);
-		};
-	}, []);
-	const metrics = useMemo(() => ({
-		rowHeight: Math.max(1, rowHeight),
-		columnGap: Math.max(0, columnGap),
-		rowGap: Math.max(0, rowGap)
-	}), [
-		columnGap,
-		rowGap,
-		rowHeight
-	]);
-	const selection = useMemo(() => ({
-		selectionMode,
-		selectedKeys: selectedKeySet,
-		register,
-		select
-	}), [
-		register,
-		select,
-		selectedKeySet,
-		selectionMode
-	]);
-	const editing = useMemo(() => ({
-		isEditing,
-		movingId,
-		arrivingIds,
-		markArriving,
-		startMoving,
-		stopMoving
-	}), [
-		arrivingIds,
-		isEditing,
-		markArriving,
-		movingId,
-		startMoving,
-		stopMoving
-	]);
-	const authoring = useMemo(() => ({
-		addItems,
-		onAddItem
-	}), [addItems, onAddItem]);
-	const rootTree = useMemo(() => ({
-		containerDepth: 0,
-		parentKind: "root",
-		parentId: null,
-		layoutParentId: null,
-		parentColumns: 12,
-		parentRows: 1,
-		ancestorIds: []
-	}), []);
-	const styles = {
-		...extractStyles(otherProps, CONTAINER_STYLES),
-		...explicitStyles
-	};
-	const baseProps = filterBaseProps(otherProps, {
-		eventProps: true,
-		labelable: true
-	});
-	return /* @__PURE__ */ jsx(DashboardMetricsContext.Provider, {
-		value: metrics,
-		children: /* @__PURE__ */ jsx(DashboardSelectionContext.Provider, {
-			value: selection,
-			children: /* @__PURE__ */ jsx(DashboardEditingContext.Provider, {
-				value: editing,
-				children: /* @__PURE__ */ jsx(DashboardAuthoringContext.Provider, {
-					value: authoring,
-					children: /* @__PURE__ */ jsx(DashboardTreeContext.Provider, {
-						value: rootTree,
-						children: /* @__PURE__ */ jsxs(DashboardElement, {
-							...mergeProps(baseProps, { onClick: handleRootClick }),
-							ref,
-							styles,
-							style,
-							"data-editing": isEditing || void 0,
-							"data-dragging": movingId !== null || void 0,
-							"data-dashboard-root": "",
-							"data-dashboard-drop-target": "",
-							"data-dashboard-parent-id": "",
-							"data-dashboard-container-kind": "root",
-							"data-dashboard-columns": 12,
-							"data-dashboard-rows": Math.max(1, Children.count(children)),
-							"data-dashboard-depth": 0,
-							"data-dashboard-ancestor-ids": "[]",
-							children: [children, isEditing ? /* @__PURE__ */ jsx(DashboardRootAddControl, { row: Children.count(children) }) : null]
-						})
-					})
-				})
-			})
-		})
-	});
-});
-const Dashboard = Object.assign(DashboardRoot, {
-	HorizontalStack: DashboardHorizontalStack,
-	VerticalStack: DashboardVerticalStack,
-	Grid: DashboardGrid,
-	Tabs: DashboardTabs,
-	Tab: DashboardTab,
-	Widget: DashboardWidget
-});
-
-//#endregion
-export { Dashboard };
-//# sourceMappingURL=Dashboard.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Dashboard.js","names":[],"sources":["../../../../src/components/layout/Dashboard/Dashboard.tsx"],"sourcesContent":["import { CONTAINER_STYLES, filterBaseProps, Styles } from '@tenphi/tasty';\nimport { Children, forwardRef, useMemo, useRef, useState } from 'react';\n\nimport { useEvent } from '../../../_internal/hooks';\nimport { mergeProps, useLayoutEffect } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\n\nimport {\n  DashboardAuthoringContext,\n  DashboardEditingContext,\n  DashboardMetricsContext,\n  DashboardSelectionContext,\n  DashboardTreeContext,\n} from './context';\nimport {\n  DashboardGrid,\n  DashboardHorizontalStack,\n  DashboardVerticalStack,\n} from './DashboardContainer';\nimport {\n  DashboardContainerContent,\n  DashboardRootAddControl,\n} from './DashboardContainerContent';\nimport { DashboardTab, DashboardTabs } from './DashboardTabs';\nimport { DashboardWidget } from './DashboardWidget';\nimport { normalizeGap } from './placement';\nimport { DashboardElement } from './styles';\n\nimport type { ForwardedRef, MouseEvent as ReactMouseEvent } from 'react';\nimport type {\n  CubeDashboardProps,\n  DashboardAuthoringContextValue,\n  DashboardEditingContextValue,\n  DashboardMetrics,\n  DashboardNodeRegistration,\n  DashboardSelectionContextValue,\n  DashboardTreeContextValue,\n} from './types';\n\nexport const DashboardRoot = forwardRef(function DashboardRoot(\n  props: CubeDashboardProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    children,\n    rowHeight = 80,\n    gap = 16,\n    isEditing = false,\n    selectionMode = 'multiple',\n    selectedKeys: controlledSelectedKeys,\n    defaultSelectedKeys = [],\n    onSelectionChange,\n    addItems = [],\n    onAddItem,\n    styles: explicitStyles,\n    style,\n    ...otherProps\n  } = props;\n  const [columnGap, rowGap] = normalizeGap(gap);\n  const [uncontrolledSelectedKeys, setUncontrolledSelectedKeys] =\n    useState<string[]>(defaultSelectedKeys);\n  const [movingId, setMovingId] = useState<string | null>(null);\n  const [arrivingIds, setArrivingIds] = useState<ReadonlySet<string>>(\n    () => new Set(),\n  );\n  const acceptsArrivalsRef = useRef(false);\n  const arrivalTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const registrationsRef = useRef(new Map<string, DashboardNodeRegistration>());\n  const isControlled = controlledSelectedKeys !== undefined;\n  const selectedKeys =\n    selectionMode === 'none'\n      ? []\n      : controlledSelectedKeys ?? uncontrolledSelectedKeys;\n  const selectedKeySet = useMemo(() => new Set(selectedKeys), [selectedKeys]);\n\n  const commitSelection = useEvent((next: string[]) => {\n    if (!isControlled) setUncontrolledSelectedKeys(next);\n    onSelectionChange?.(next);\n  });\n\n  const register = useEvent(\n    (id: string, registration: DashboardNodeRegistration) => {\n      registrationsRef.current.set(id, registration);\n      return () => {\n        const current = registrationsRef.current.get(id);\n        if (current === registration) registrationsRef.current.delete(id);\n      };\n    },\n  );\n\n  const select = useEvent((id: string, additive: boolean) => {\n    if (selectionMode === 'none') return;\n    const registration = registrationsRef.current.get(id);\n    if (!registration) return;\n\n    if (selectionMode === 'single' || !additive) {\n      commitSelection([id]);\n      return;\n    }\n\n    const current = new Set(selectedKeySet);\n    if (current.has(id)) {\n      current.delete(id);\n      commitSelection([...current]);\n      return;\n    }\n\n    for (const selectedId of current) {\n      const selected = registrationsRef.current.get(selectedId);\n      if (!selected) continue;\n\n      if (registration.ancestorIds.includes(selectedId)) {\n        return;\n      }\n\n      if (selected.parentId !== registration.parentId) {\n        return;\n      }\n\n      if (selected.ancestorIds.includes(id)) {\n        current.delete(selectedId);\n      }\n    }\n\n    current.add(id);\n    commitSelection([...current]);\n  });\n  const handleRootClick = useEvent((event: ReactMouseEvent<HTMLElement>) => {\n    const target = event.target as HTMLElement;\n    if (target.closest('[data-dashboard-node]')) return;\n    if (selectedKeySet.size > 0) commitSelection([]);\n  });\n  const startMoving = useEvent((id: string) => setMovingId(id));\n  const stopMoving = useEvent((id: string) => {\n    setMovingId((current) => (current === id ? null : current));\n  });\n  const markArriving = useEvent((id: string) => {\n    if (!acceptsArrivalsRef.current) return;\n\n    if (arrivalTimerRef.current !== null) {\n      clearTimeout(arrivalTimerRef.current);\n    }\n    setArrivingIds((current) => new Set(current).add(id));\n    arrivalTimerRef.current = setTimeout(() => {\n      setArrivingIds(new Set());\n      arrivalTimerRef.current = null;\n    }, 1000);\n  });\n\n  useLayoutEffect(() => {\n    acceptsArrivalsRef.current = true;\n\n    return () => {\n      acceptsArrivalsRef.current = false;\n      if (arrivalTimerRef.current !== null) {\n        clearTimeout(arrivalTimerRef.current);\n      }\n    };\n  }, []);\n\n  const metrics = useMemo<DashboardMetrics>(\n    () => ({\n      rowHeight: Math.max(1, rowHeight),\n      columnGap: Math.max(0, columnGap),\n      rowGap: Math.max(0, rowGap),\n    }),\n    [columnGap, rowGap, rowHeight],\n  );\n  const selection = useMemo<DashboardSelectionContextValue>(\n    () => ({\n      selectionMode,\n      selectedKeys: selectedKeySet,\n      register,\n      select,\n    }),\n    [register, select, selectedKeySet, selectionMode],\n  );\n  const editing = useMemo<DashboardEditingContextValue>(\n    () => ({\n      isEditing,\n      movingId,\n      arrivingIds,\n      markArriving,\n      startMoving,\n      stopMoving,\n    }),\n    [arrivingIds, isEditing, markArriving, movingId, startMoving, stopMoving],\n  );\n  const authoring = useMemo<DashboardAuthoringContextValue>(\n    () => ({ addItems, onAddItem }),\n    [addItems, onAddItem],\n  );\n  const rootTree = useMemo<DashboardTreeContextValue>(\n    () => ({\n      containerDepth: 0,\n      parentKind: 'root',\n      parentId: null,\n      layoutParentId: null,\n      parentColumns: 12,\n      parentRows: 1,\n      ancestorIds: [],\n    }),\n    [],\n  );\n  // `otherProps` rather than `props`: `gap` is a container style prop as well as\n  // a Dashboard prop, and extracting it would write the in-container gap onto the\n  // root grid, overriding the fixed `1x` top-level channel.\n  const extractedStyles = extractStyles(otherProps, CONTAINER_STYLES);\n  const styles: Styles = { ...extractedStyles, ...explicitStyles };\n  const baseProps = filterBaseProps(otherProps, {\n    eventProps: true,\n    labelable: true,\n  });\n\n  return (\n    <DashboardMetricsContext.Provider value={metrics}>\n      <DashboardSelectionContext.Provider value={selection}>\n        <DashboardEditingContext.Provider value={editing}>\n          <DashboardAuthoringContext.Provider value={authoring}>\n            <DashboardTreeContext.Provider value={rootTree}>\n              <DashboardElement\n                {...mergeProps(baseProps, { onClick: handleRootClick })}\n                ref={ref}\n                styles={styles}\n                style={style}\n                data-editing={isEditing || undefined}\n                data-dragging={movingId !== null || undefined}\n                data-dashboard-root=\"\"\n                data-dashboard-drop-target=\"\"\n                data-dashboard-parent-id=\"\"\n                data-dashboard-container-kind=\"root\"\n                data-dashboard-columns={12}\n                data-dashboard-rows={Math.max(1, Children.count(children))}\n                data-dashboard-depth={0}\n                data-dashboard-ancestor-ids=\"[]\"\n              >\n                {children}\n                {isEditing ? (\n                  <DashboardRootAddControl row={Children.count(children)} />\n                ) : null}\n              </DashboardElement>\n            </DashboardTreeContext.Provider>\n          </DashboardAuthoringContext.Provider>\n        </DashboardEditingContext.Provider>\n      </DashboardSelectionContext.Provider>\n    </DashboardMetricsContext.Provider>\n  );\n});\n\nexport const Dashboard = Object.assign(DashboardRoot, {\n  HorizontalStack: DashboardHorizontalStack,\n  VerticalStack: DashboardVerticalStack,\n  Grid: DashboardGrid,\n  Tabs: DashboardTabs,\n  Tab: DashboardTab,\n  Widget: DashboardWidget,\n});\n\nexport {\n  DashboardGrid,\n  DashboardHorizontalStack,\n  DashboardVerticalStack,\n} from './DashboardContainer';\nexport { DashboardTab, DashboardTabs } from './DashboardTabs';\nexport { DashboardWidget } from './DashboardWidget';\n\nexport type {\n  CubeDashboardContainerProps,\n  CubeDashboardProps,\n  CubeDashboardTabProps,\n  CubeDashboardTabsProps,\n  CubeDashboardWidgetProps,\n  DashboardAddItemDefinition,\n  DashboardAddItemInfo,\n  DashboardAddItemKind,\n  DashboardContainerKind,\n  DashboardNodeAction,\n  DashboardParentKind,\n  DashboardPlacement,\n  DashboardPlacementChangeInfo,\n  DashboardPlacementChangeInput,\n  DashboardPlacementChangeItem,\n  DashboardPlacementChangePhase,\n  DashboardPlacementChangeReason,\n  DashboardPlacementProps,\n  DashboardSelectionMode,\n} from './types';\n"],"mappings":"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"}

package/dist/components/layout/Dashboard/DashboardContainer.d.ts

@@ -1,13 +0,0 @@
-
-import { CubeDashboardContainerProps } from "./types.js";
-import * as react from "react";
-import { ForwardedRef, ReactNode } from "react";
-import "react/jsx-runtime";
-
-//#region src/components/layout/Dashboard/DashboardContainer.d.ts
-declare const DashboardHorizontalStack: react.ForwardRefExoticComponent<CubeDashboardContainerProps & react.RefAttributes<HTMLDivElement>>;
-declare const DashboardVerticalStack: react.ForwardRefExoticComponent<CubeDashboardContainerProps & react.RefAttributes<HTMLDivElement>>;
-declare const DashboardGrid: react.ForwardRefExoticComponent<CubeDashboardContainerProps & react.RefAttributes<HTMLDivElement>>;
-//#endregion
-export { DashboardGrid, DashboardHorizontalStack, DashboardVerticalStack };
-//# sourceMappingURL=DashboardContainer.d.ts.map

package/dist/components/layout/Dashboard/DashboardContainer.js

@@ -1,272 +0,0 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e056095 | Cube Dev Team */
-import { extractStyles } from "../../../utils/styles.js";
-import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
-import { mergeProps } from "../../../utils/react/mergeProps.js";
-import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
-import { useEvent } from "../../../_internal/hooks/use-event.js";
-import { useI18n } from "../../../i18n/useI18n.js";
-import { DashboardMetricsContext, DashboardTreeContext } from "./context.js";
-import { GripVerticalIcon } from "../../../icons/GripVerticalIcon.js";
-import { clamp, clampRowOrigin, clampRows, clampSpan, getPlacementStyle, normalizePlacement } from "./placement.js";
-import { getContainerChildMinimum, getDashboardDescendantContainerDepth, hasContainerLayoutChildren } from "./occupancy.js";
-import { ContainerElement, ContainerHeaderElement, CornerResizeGripElement, ResizeHandleElement, TopLevelResizeHandleElement } from "./styles.js";
-import { DashboardContainerContent } from "./DashboardContainerContent.js";
-import { DashboardNodeActions } from "./DashboardNodeActions.js";
-import { renderDashboardDropPreview } from "./drag.js";
-import { useDashboardNodeInteraction } from "./use-dashboard-node.js";
-import { useDashboardGestures } from "./use-dashboard-gestures.js";
-import { CONTAINER_STYLES, filterBaseProps } from "@tenphi/tasty";
-import { forwardRef, useContext, useMemo, useRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/components/layout/Dashboard/DashboardContainer.tsx
-const DashboardContainerShell = forwardRef(function DashboardContainerShell(props, ref) {
-	const { id, title, kind, content, isSelectable, isMovable = false, isResizable = false, minColumns = 1, maxColumns = 12, minRows = 1, maxRows, onPlacementChange, moveLabel, resizeLabel, onSettingsPress, settingsLabel, onDeletePress, onDuplicatePress, duplicateLabel, actions, onMenuAction, deleteLabel, column, row, columns, rows = 1, children, mods, styles: explicitStyles, style, "aria-label": ariaLabel, ...otherProps } = props;
-	const { t } = useI18n();
-	const metrics = useContext(DashboardMetricsContext);
-	const localRef = useRef(null);
-	const combinedRef = useCombinedRefs(ref, localRef);
-	const node = useDashboardNodeInteraction({
-		id,
-		isContainer: true,
-		isSelectable
-	});
-	useLayoutEffect$1(() => {
-		node.editing.markArriving(id);
-	}, [id, node.editing.markArriving]);
-	if (node.containerDepth > 3) throw new Error(`Dashboard container "${id}" exceeds the maximum nesting depth of 3.`);
-	const styles = {
-		...extractStyles(props, CONTAINER_STYLES),
-		...explicitStyles
-	};
-	const normalizedPlacement = node.tree.parentKind === "root" ? {
-		column: 0,
-		row: clampRowOrigin(row),
-		columns: 12,
-		rows: clampRows(rows, 1)
-	} : normalizePlacement({
-		column,
-		row,
-		columns,
-		rows
-	}, node.tree.parentColumns, node.tree.parentRows);
-	const placementStyle = getPlacementStyle(node.tree, normalizedPlacement);
-	const childMinimum = getContainerChildMinimum(kind, children, normalizedPlacement.columns, normalizedPlacement.rows);
-	const descendantContainerDepth = getDashboardDescendantContainerDepth(children);
-	const isEmpty = !hasContainerLayoutChildren(kind, children);
-	const columnLimit = node.tree.parentColumns;
-	const rowLimit = node.tree.parentKind === "root" ? Math.max(childMinimum.rows, clampRows(maxRows, Math.max(12, normalizedPlacement.rows))) : node.tree.parentRows;
-	const resolvedMinColumns = clamp(Math.max(clampSpan(minColumns, 1), childMinimum.columns), 1, columnLimit);
-	const resolvedMaxColumns = clamp(clampSpan(maxColumns, columnLimit), resolvedMinColumns, columnLimit);
-	const resolvedMinRows = clamp(Math.max(clampRows(minRows, 1), childMinimum.rows), 1, rowLimit);
-	const resolvedMaxRows = clamp(clampRows(maxRows, rowLimit), resolvedMinRows, rowLimit);
-	const canMove = isMovable && !!onPlacementChange;
-	const canMoveColumns = canMove && node.tree.parentKind !== "root" && node.tree.parentKind !== "vertical-stack";
-	const canMoveRows = canMove && node.tree.parentKind !== "horizontal-stack";
-	const canResizeColumns = isResizable && !!onPlacementChange && node.tree.parentKind !== "root" && node.tree.parentKind !== "vertical-stack" && resolvedMaxColumns > resolvedMinColumns;
-	const canResizeRows = isResizable && !!onPlacementChange && node.tree.parentKind !== "horizontal-stack" && resolvedMaxRows > resolvedMinRows;
-	const canResize = canResizeColumns || canResizeRows;
-	const resizeAxis = canResizeColumns ? canResizeRows ? "both" : "x" : "y";
-	const shouldRenderTitle = kind === "tabs" && !!title;
-	const label = ariaLabel ?? (typeof title === "string" ? title : id);
-	const baseProps = filterBaseProps(otherProps, {
-		eventProps: true,
-		labelable: true
-	});
-	const gestures = useDashboardGestures({
-		id,
-		isContainer: true,
-		containerKind: kind,
-		nodeRef: localRef,
-		tree: node.tree,
-		editing: node.editing,
-		metrics,
-		placement: normalizedPlacement,
-		isSelected: node.isSelected,
-		selectSelf: node.selectSelf,
-		onPlacementChange,
-		canMove,
-		canMoveColumns,
-		canMoveRows,
-		canResize,
-		canResizeColumns,
-		canResizeRows,
-		minColumns: resolvedMinColumns,
-		maxColumns: resolvedMaxColumns,
-		minRows: resolvedMinRows,
-		maxRows: resolvedMaxRows,
-		isRootChild: node.tree.parentKind === "root",
-		maximumContainerParentDepth: Math.max(0, 2 - descendantContainerDepth)
-	});
-	const { isMoving, isResizing, dropPreview, surfaceMoveProps, resizeProps } = gestures;
-	const handleSettingsPress = useEvent(() => {
-		node.selectSelf(false);
-		onSettingsPress?.();
-	});
-	const handleDeletePress = useEvent(() => {
-		node.selectSelf(false);
-		onDeletePress?.();
-	});
-	const handleDuplicatePress = useEvent(() => {
-		node.selectSelf(false);
-		onDuplicatePress?.();
-	});
-	const handleMenuResize = useEvent((next) => {
-		gestures.reportPlacement(next, "resize", "commit", "command");
-	});
-	const resolvedMods = {
-		...mods,
-		depth: String(node.containerDepth),
-		titled: shouldRenderTitle,
-		selected: node.isSelected,
-		arriving: node.editing.arrivingIds.has(id),
-		hovered: node.isHovered,
-		"focus-within": node.isFocusWithin,
-		editing: node.editing.isEditing,
-		empty: isEmpty,
-		dragging: node.editing.movingId !== null,
-		movable: canMove,
-		moving: isMoving,
-		resizing: isResizing
-	};
-	const ContainerResizeHandleElement = node.tree.parentKind === "root" ? TopLevelResizeHandleElement : ResizeHandleElement;
-	return /* @__PURE__ */ jsxs(ContainerElement, {
-		...mergeProps(baseProps, node.interactionProps, surfaceMoveProps),
-		ref: combinedRef,
-		role: "group",
-		"aria-label": moveLabel ?? label,
-		"aria-roledescription": t("dashboard.container", "Dashboard container"),
-		tabIndex: node.canSelect || canMove ? 0 : void 0,
-		"data-dashboard-node": "container",
-		"data-dashboard-node-id": id,
-		"data-dashboard-depth": node.containerDepth,
-		"data-dashboard-column": normalizedPlacement.column,
-		"data-dashboard-row": normalizedPlacement.row,
-		"data-dashboard-columns": normalizedPlacement.columns,
-		"data-dashboard-rows": normalizedPlacement.rows,
-		"data-dashboard-min-columns": resolvedMinColumns,
-		"data-dashboard-max-columns": Math.max(resolvedMinColumns, clampSpan(maxColumns, 12)),
-		"data-dashboard-min-rows": resolvedMinRows,
-		"data-dashboard-max-rows": maxRows === void 0 ? Number.MAX_SAFE_INTEGER : Math.max(resolvedMinRows, clampRows(maxRows, resolvedMinRows)),
-		"data-selected": node.isSelected || void 0,
-		"data-arriving": node.editing.arrivingIds.has(id) || void 0,
-		"data-moving": isMoving || void 0,
-		"data-resizing": isResizing || void 0,
-		"data-dashboard-empty": isEmpty || void 0,
-		mods: resolvedMods,
-		styles,
-		style: {
-			...placementStyle,
-			...style
-		},
-		children: [
-			shouldRenderTitle ? /* @__PURE__ */ jsx(ContainerHeaderElement, { children: title }) : null,
-			content,
-			/* @__PURE__ */ jsx(DashboardNodeActions, {
-				label,
-				mods: resolvedMods,
-				qaAttribute: "data-dashboard-container-actions",
-				nodeId: id,
-				isSelected: node.isSelected,
-				placement: normalizedPlacement,
-				bounds: {
-					minColumns: resolvedMinColumns,
-					maxColumns: resolvedMaxColumns,
-					minRows: resolvedMinRows,
-					maxRows: resolvedMaxRows,
-					parentColumns: node.tree.parentColumns,
-					parentRows: rowLimit
-				},
-				canResizeColumns,
-				canResizeRows,
-				nodeRef: localRef,
-				actions,
-				settingsLabel,
-				duplicateLabel,
-				deleteLabel,
-				onResize: handleMenuResize,
-				onSettingsPress: onSettingsPress && handleSettingsPress,
-				onDuplicatePress: onDuplicatePress && handleDuplicatePress,
-				onDeletePress: onDeletePress && handleDeletePress,
-				onMenuAction
-			}),
-			canResize ? /* @__PURE__ */ jsx(ContainerResizeHandleElement, {
-				...resizeProps,
-				type: "button",
-				"aria-label": resizeLabel ?? t("dashboard.resizeContainer", "Resize dashboard container"),
-				"data-dashboard-container-resize-handle": "",
-				"data-dashboard-resize-axis": resizeAxis,
-				"data-dashboard-no-select": "",
-				"aria-hidden": !node.isSelected || void 0,
-				tabIndex: node.isSelected ? void 0 : -1,
-				mods: {
-					...resolvedMods,
-					axis: resizeAxis,
-					corner: resizeAxis === "both"
-				},
-				children: /* @__PURE__ */ jsx("span", {
-					"data-element": "Icon",
-					children: resizeAxis === "both" ? /* @__PURE__ */ jsx(CornerResizeGripElement, {}) : /* @__PURE__ */ jsx(GripVerticalIcon, { size: "1.5x" })
-				})
-			}) : null,
-			renderDashboardDropPreview(dropPreview, t("dashboard.dropBlocked", "This position is already taken"))
-		]
-	});
-});
-function DashboardContainer(kind, props, ref) {
-	const { id, columns, rows = 1, children } = props;
-	const tree = useContext(DashboardTreeContext);
-	const containerDepth = tree.containerDepth + 1;
-	const resolvedColumns = tree.parentKind === "root" ? 12 : Math.min(clampSpan(columns, tree.parentColumns), tree.parentColumns);
-	const resolvedRows = tree.parentKind === "root" ? clampRows(rows, 1) : Math.min(clampRows(rows, 1), tree.parentRows);
-	const childTree = useMemo(() => ({
-		containerDepth,
-		parentKind: kind,
-		parentId: id,
-		layoutParentId: id,
-		parentColumns: resolvedColumns,
-		parentRows: resolvedRows,
-		ancestorIds: [...tree.ancestorIds, id]
-	}), [
-		containerDepth,
-		id,
-		kind,
-		resolvedColumns,
-		resolvedRows,
-		tree.ancestorIds
-	]);
-	const content = /* @__PURE__ */ jsx(DashboardTreeContext.Provider, {
-		value: childTree,
-		children: /* @__PURE__ */ jsx(DashboardContainerContent, {
-			id,
-			kind,
-			columns: resolvedColumns,
-			rows: resolvedRows,
-			depth: containerDepth,
-			ancestorIds: [...tree.ancestorIds, id],
-			children
-		})
-	});
-	return /* @__PURE__ */ jsx(DashboardContainerShell, {
-		...props,
-		ref,
-		kind,
-		content
-	});
-}
-const DashboardHorizontalStack = forwardRef(function DashboardHorizontalStack(props, ref) {
-	return DashboardContainer("horizontal-stack", props, ref);
-});
-DashboardHorizontalStack.displayName = "DashboardHorizontalStack";
-const DashboardVerticalStack = forwardRef(function DashboardVerticalStack(props, ref) {
-	return DashboardContainer("vertical-stack", props, ref);
-});
-DashboardVerticalStack.displayName = "DashboardVerticalStack";
-const DashboardGrid = forwardRef(function DashboardGrid(props, ref) {
-	return DashboardContainer("grid", props, ref);
-});
-DashboardGrid.displayName = "DashboardGrid";
-
-//#endregion
-export { DashboardContainerShell, DashboardGrid, DashboardHorizontalStack, DashboardVerticalStack };
-//# sourceMappingURL=DashboardContainer.js.map