@cube-dev/ui-kit 0.143.1 → 0.145.0

package/dist/components/layout/Board/BoardProvider.js

@@ -0,0 +1,47 @@
+/** @license MIT | @cube-dev/ui-kit v0.145.0 | Cube Dev Team */
+import { BoardDragActiveContext, BoardRegistryContext } from "./board-context.js";
+import { useBoardRegistry } from "./use-board-registry.js";
+import { tasty } from "@tenphi/tasty";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/layout/Board/BoardProvider.tsx
+const OverlayElement = tasty({
+	qa: "BoardDragOverlay",
+	styles: {
+		position: "fixed",
+		top: 0,
+		left: 0,
+		right: 0,
+		bottom: 0,
+		zIndex: 999999,
+		pointerEvents: "none",
+		overflow: "visible"
+	}
+});
+/**
+* Shares a single drag context across multiple `Board`s so widgets can be
+* dragged from one board to another (including out of a nested board into its
+* parent). Also hosts the fixed drag overlay used to render the dragged widget
+* above everything, so ancestor `overflow: hidden` never clips it.
+*
+* A standalone `Board` provides its own registry automatically; wrap several
+* boards in a `BoardProvider` only when you need cross-board dragging.
+*/
+function BoardProvider(props) {
+	const { children, onWidgetTransfer } = props;
+	const registry = useBoardRegistry({ onWidgetTransfer });
+	return /* @__PURE__ */ jsx(BoardRegistryContext.Provider, {
+		value: registry,
+		children: /* @__PURE__ */ jsxs(BoardDragActiveContext.Provider, {
+			value: registry.dragState != null,
+			children: [children, /* @__PURE__ */ jsx(OverlayElement, {
+				ref: registry.overlayRef,
+				"aria-hidden": "true"
+			})]
+		})
+	});
+}
+
+//#endregion
+export { BoardProvider };
+//# sourceMappingURL=BoardProvider.js.map

package/dist/components/layout/Board/BoardProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BoardProvider.js","names":[],"sources":["../../../../src/components/layout/Board/BoardProvider.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { ReactNode } from 'react';\n\nimport {\n  BoardDragActiveContext,\n  BoardRegistryContext,\n  WidgetTransferInfo,\n} from './board-context';\nimport { useBoardRegistry } from './use-board-registry';\n\nconst OverlayElement = tasty({\n  qa: 'BoardDragOverlay',\n  styles: {\n    position: 'fixed',\n    top: 0,\n    left: 0,\n    right: 0,\n    bottom: 0,\n    zIndex: 999999,\n    pointerEvents: 'none',\n    overflow: 'visible',\n  },\n});\n\nexport interface CubeBoardProviderProps {\n  children?: ReactNode;\n  /**\n   * Fired when a widget is dropped from one board into another. Use it to move\n   * the widget's `Board.Widget` declaration into the destination container when\n   * the source container can unmount (e.g. an inactive `Tab`).\n   */\n  onWidgetTransfer?: (info: WidgetTransferInfo) => void;\n}\n\n/**\n * Shares a single drag context across multiple `Board`s so widgets can be\n * dragged from one board to another (including out of a nested board into its\n * parent). Also hosts the fixed drag overlay used to render the dragged widget\n * above everything, so ancestor `overflow: hidden` never clips it.\n *\n * A standalone `Board` provides its own registry automatically; wrap several\n * boards in a `BoardProvider` only when you need cross-board dragging.\n */\nexport function BoardProvider(props: CubeBoardProviderProps) {\n  const { children, onWidgetTransfer } = props;\n  const registry = useBoardRegistry({ onWidgetTransfer });\n\n  return (\n    <BoardRegistryContext.Provider value={registry}>\n      <BoardDragActiveContext.Provider value={registry.dragState != null}>\n        {children}\n        <OverlayElement ref={registry.overlayRef} aria-hidden=\"true\" />\n      </BoardDragActiveContext.Provider>\n    </BoardRegistryContext.Provider>\n  );\n}\n"],"mappings":";;;;;;;AAUA,MAAM,iBAAiB,MAAM;CAC3B,IAAI;CACJ,QAAQ;EACN,UAAU;EACV,KAAK;EACL,MAAM;EACN,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,eAAe;EACf,UAAU;EACX;CACF,CAAC;;;;;;;;;;AAqBF,SAAgB,cAAc,OAA+B;CAC3D,MAAM,EAAE,UAAU,qBAAqB;CACvC,MAAM,WAAW,iBAAiB,EAAE,kBAAkB,CAAC;AAEvD,QACE,oBAAC,qBAAqB;EAAS,OAAO;YACpC,qBAAC,uBAAuB;GAAS,OAAO,SAAS,aAAa;cAC3D,UACD,oBAAC;IAAe,KAAK,SAAS;IAAY,eAAY;KAAS;IAC/B;GACJ"}

package/dist/components/layout/Board/BoardResponsive.d.ts

@@ -0,0 +1,52 @@
+
+import { LayoutItem } from "./grid-core/types.js";
+import { CubeBoardProps } from "./Board.js";
+import { BreakpointCols, Breakpoints, ResponsiveLayouts } from "./responsive-utils.js";
+import * as react from "react";
+
+//#region src/components/layout/Board/BoardResponsive.d.ts
+interface CubeBoardResponsiveProps extends Omit<CubeBoardProps, 'layout' | 'defaultLayout' | 'cols' | 'onLayoutChange' | 'width' | 'breakpoints'> {
+  /** Map of breakpoint name -> minimum container width in pixels. */
+  breakpoints: Breakpoints;
+  /** Map of breakpoint name -> column count. */
+  cols: BreakpointCols;
+  /** Controlled per-breakpoint layouts. */
+  layouts?: ResponsiveLayouts;
+  /** Initial per-breakpoint layouts for uncontrolled usage. */
+  defaultLayouts?: ResponsiveLayouts;
+  /**
+   * Called when a drag or resize is committed. Receives the active breakpoint's
+   * layout and the full map of all breakpoint layouts.
+   */
+  onLayoutChange?: (currentLayout: LayoutItem[], allLayouts: ResponsiveLayouts) => void;
+  /** Called when the active breakpoint changes. */
+  onBreakpointChange?: (breakpoint: string, cols: number) => void;
+  /**
+   * Called when the measured container width changes, with the current column
+   * count for the active breakpoint. Mirrors react-grid-layout's
+   * `WidthProvider` `onWidthChange`. Not fired while width is unmeasured (0) or
+   * when an explicit `width` is provided.
+   */
+  onWidthChange?: (width: number, cols: number) => void;
+  /**
+   * Force a specific breakpoint regardless of the measured width (e.g. for a
+   * fixed-size screenshot or PDF export).
+   */
+  breakpoint?: string;
+  /**
+   * Explicit container width in pixels. When provided, disables automatic width
+   * measurement (useful for SSR, tests, and forced-size exports).
+   */
+  width?: number;
+}
+/**
+ * A responsive wrapper around `Board` that selects a layout and column count
+ * based on the container's width (or a forced breakpoint). Mirrors the model of
+ * react-grid-layout's `Responsive` + `WidthProvider`: per-breakpoint `layouts`
+ * and `cols`, with `onLayoutChange` reporting both the active layout and the
+ * full map.
+ */
+declare const BoardResponsive: react.ForwardRefExoticComponent<CubeBoardResponsiveProps & react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { BoardResponsive, CubeBoardResponsiveProps };
+//# sourceMappingURL=BoardResponsive.d.ts.map

package/dist/components/layout/Board/BoardResponsive.js

@@ -0,0 +1,101 @@
+/** @license MIT | @cube-dev/ui-kit v0.145.0 | Cube Dev Team */
+import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
+import { useEvent } from "../../../_internal/hooks/use-event.js";
+import { getCompactor } from "./grid-core/compactors.js";
+import { Board } from "./Board.js";
+import { findOrGenerateResponsiveLayout, getBreakpointFromWidth, getColsFromBreakpoint } from "./responsive-utils.js";
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useResizeObserver } from "@react-aria/utils";
+
+//#region src/components/layout/Board/BoardResponsive.tsx
+function compactTypeToCore(compact) {
+	if (compact === "free") return null;
+	return compact;
+}
+function BoardResponsiveInner(props, ref) {
+	const { breakpoints, cols, layouts: controlledLayouts, defaultLayouts, onLayoutChange, onBreakpointChange, onWidthChange, breakpoint: forcedBreakpoint, width: providedWidth, compact = "vertical", allowOverlap = false, preventCollision = false, ...boardProps } = props;
+	const boardRef = useRef(null);
+	const combinedRef = useCombinedRefs(ref, boardRef);
+	const [measuredWidth, setMeasuredWidth] = useState(0);
+	useResizeObserver({
+		ref: boardRef,
+		onResize: useEvent(() => {
+			const next = boardRef.current?.offsetWidth ?? 0;
+			if (next > 0) setMeasuredWidth((prev) => prev === next ? prev : next);
+		})
+	});
+	const isControlled = controlledLayouts !== void 0;
+	const [internalLayouts, setInternalLayouts] = useState(() => controlledLayouts ?? defaultLayouts ?? {});
+	const currentLayouts = isControlled ? controlledLayouts : internalLayouts;
+	const layoutsRef = useRef(currentLayouts);
+	layoutsRef.current = currentLayouts;
+	const widthForBreakpoint = providedWidth ?? measuredWidth;
+	const activeBreakpoint = forcedBreakpoint ?? getBreakpointFromWidth(breakpoints, widthForBreakpoint);
+	const activeCols = getColsFromBreakpoint(activeBreakpoint, cols);
+	const lastBreakpointRef = useRef(activeBreakpoint);
+	const compactor = useMemo(() => getCompactor(compactTypeToCore(compact), allowOverlap, preventCollision), [
+		compact,
+		allowOverlap,
+		preventCollision
+	]);
+	const currentLayout = useMemo(() => {
+		const existing = currentLayouts[activeBreakpoint];
+		if (existing) return existing;
+		return findOrGenerateResponsiveLayout(currentLayouts, breakpoints, activeBreakpoint, lastBreakpointRef.current, activeCols, compactor);
+	}, [
+		currentLayouts,
+		breakpoints,
+		activeBreakpoint,
+		activeCols,
+		compactor
+	]);
+	const onBreakpointChangeEvent = useEvent(() => onBreakpointChange?.(activeBreakpoint, activeCols));
+	const bpInitializedRef = useRef(false);
+	useEffect(() => {
+		if (!bpInitializedRef.current) {
+			bpInitializedRef.current = true;
+			lastBreakpointRef.current = activeBreakpoint;
+			return;
+		}
+		onBreakpointChangeEvent();
+		lastBreakpointRef.current = activeBreakpoint;
+	}, [activeBreakpoint]);
+	const onWidthChangeEvent = useEvent(() => onWidthChange?.(widthForBreakpoint, activeCols));
+	useEffect(() => {
+		if (providedWidth != null) return;
+		if (measuredWidth <= 0) return;
+		onWidthChangeEvent();
+	}, [measuredWidth, activeCols]);
+	return /* @__PURE__ */ jsx(Board, {
+		ref: combinedRef,
+		layout: currentLayout,
+		cols: activeCols,
+		width: providedWidth,
+		compact,
+		allowOverlap,
+		preventCollision,
+		onLayoutChange: useEvent((next) => {
+			const merged = {
+				...layoutsRef.current,
+				[activeBreakpoint]: next
+			};
+			layoutsRef.current = merged;
+			if (!isControlled) setInternalLayouts(merged);
+			onLayoutChange?.(next, merged);
+		}),
+		...boardProps
+	});
+}
+/**
+* A responsive wrapper around `Board` that selects a layout and column count
+* based on the container's width (or a forced breakpoint). Mirrors the model of
+* react-grid-layout's `Responsive` + `WidthProvider`: per-breakpoint `layouts`
+* and `cols`, with `onLayoutChange` reporting both the active layout and the
+* full map.
+*/
+const BoardResponsive = forwardRef(BoardResponsiveInner);
+
+//#endregion
+export { BoardResponsive };
+//# sourceMappingURL=BoardResponsive.js.map

package/dist/components/layout/Board/BoardResponsive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BoardResponsive.js","names":[],"sources":["../../../../src/components/layout/Board/BoardResponsive.tsx"],"sourcesContent":["import { useResizeObserver } from '@react-aria/utils';\nimport { forwardRef, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { useEvent } from '../../../_internal/hooks';\nimport { useCombinedRefs } from '../../../utils/react';\n\nimport { Board } from './Board';\nimport { Compactor, CompactType, getCompactor, LayoutItem } from './grid-core';\nimport {\n  BreakpointCols,\n  Breakpoints,\n  findOrGenerateResponsiveLayout,\n  getBreakpointFromWidth,\n  getColsFromBreakpoint,\n  ResponsiveLayouts,\n} from './responsive-utils';\n\nimport type { BoardCompactType, CubeBoardProps } from './Board';\n\nexport interface CubeBoardResponsiveProps\n  extends Omit<\n    CubeBoardProps,\n    | 'layout'\n    | 'defaultLayout'\n    | 'cols'\n    | 'onLayoutChange'\n    | 'width'\n    | 'breakpoints'\n  > {\n  /** Map of breakpoint name -> minimum container width in pixels. */\n  breakpoints: Breakpoints;\n  /** Map of breakpoint name -> column count. */\n  cols: BreakpointCols;\n  /** Controlled per-breakpoint layouts. */\n  layouts?: ResponsiveLayouts;\n  /** Initial per-breakpoint layouts for uncontrolled usage. */\n  defaultLayouts?: ResponsiveLayouts;\n  /**\n   * Called when a drag or resize is committed. Receives the active breakpoint's\n   * layout and the full map of all breakpoint layouts.\n   */\n  onLayoutChange?: (\n    currentLayout: LayoutItem[],\n    allLayouts: ResponsiveLayouts,\n  ) => void;\n  /** Called when the active breakpoint changes. */\n  onBreakpointChange?: (breakpoint: string, cols: number) => void;\n  /**\n   * Called when the measured container width changes, with the current column\n   * count for the active breakpoint. Mirrors react-grid-layout's\n   * `WidthProvider` `onWidthChange`. Not fired while width is unmeasured (0) or\n   * when an explicit `width` is provided.\n   */\n  onWidthChange?: (width: number, cols: number) => void;\n  /**\n   * Force a specific breakpoint regardless of the measured width (e.g. for a\n   * fixed-size screenshot or PDF export).\n   */\n  breakpoint?: string;\n  /**\n   * Explicit container width in pixels. When provided, disables automatic width\n   * measurement (useful for SSR, tests, and forced-size exports).\n   */\n  width?: number;\n}\n\nfunction compactTypeToCore(compact: BoardCompactType): CompactType {\n  if (compact === 'free') return null;\n  return compact;\n}\n\nfunction BoardResponsiveInner(\n  props: CubeBoardResponsiveProps,\n  ref: React.ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    breakpoints,\n    cols,\n    layouts: controlledLayouts,\n    defaultLayouts,\n    onLayoutChange,\n    onBreakpointChange,\n    onWidthChange,\n    breakpoint: forcedBreakpoint,\n    width: providedWidth,\n    compact = 'vertical',\n    allowOverlap = false,\n    preventCollision = false,\n    ...boardProps\n  } = props;\n\n  const boardRef = useRef<HTMLDivElement | null>(null);\n  const combinedRef = useCombinedRefs(ref, boardRef);\n  const [measuredWidth, setMeasuredWidth] = useState(0);\n\n  const onResizeElement = useEvent(() => {\n    const next = boardRef.current?.offsetWidth ?? 0;\n    if (next > 0) setMeasuredWidth((prev) => (prev === next ? prev : next));\n  });\n  useResizeObserver({ ref: boardRef, onResize: onResizeElement });\n\n  const isControlled = controlledLayouts !== undefined;\n  const [internalLayouts, setInternalLayouts] = useState<ResponsiveLayouts>(\n    () => controlledLayouts ?? defaultLayouts ?? {},\n  );\n  const currentLayouts = isControlled ? controlledLayouts! : internalLayouts;\n  const layoutsRef = useRef(currentLayouts);\n  layoutsRef.current = currentLayouts;\n\n  const widthForBreakpoint = providedWidth ?? measuredWidth;\n  const activeBreakpoint =\n    forcedBreakpoint ?? getBreakpointFromWidth(breakpoints, widthForBreakpoint);\n  const activeCols = getColsFromBreakpoint(activeBreakpoint, cols);\n\n  // Previous breakpoint, used as the preferred source when synthesizing a layout\n  // for a breakpoint that has none yet.\n  const lastBreakpointRef = useRef(activeBreakpoint);\n\n  // This compactor is only used to synthesize a layout for a breakpoint that has\n  // none yet (compaction/bounds correction), so `preventCollision` has no effect\n  // here - the drag-time behavior comes from the child `Board`'s own compactor\n  // (see the free-mode note in `Board.tsx`).\n  const compactor = useMemo<Compactor>(\n    () =>\n      getCompactor(compactTypeToCore(compact), allowOverlap, preventCollision),\n    [compact, allowOverlap, preventCollision],\n  );\n\n  // Keep a stable reference for an existing breakpoint's layout so the child\n  // `Board` (which syncs controlled layout by reference) is not reset every\n  // render or mid-drag. Only a genuinely missing breakpoint is synthesized.\n  const currentLayout = useMemo(() => {\n    const existing = currentLayouts[activeBreakpoint];\n    if (existing) return existing;\n    return findOrGenerateResponsiveLayout(\n      currentLayouts,\n      breakpoints,\n      activeBreakpoint,\n      lastBreakpointRef.current,\n      activeCols,\n      compactor,\n    );\n  }, [currentLayouts, breakpoints, activeBreakpoint, activeCols, compactor]);\n\n  // Remember the last breakpoint (for synthesizing a missing one) and emit\n  // breakpoint changes after commit, skipping the initial mount.\n  const onBreakpointChangeEvent = useEvent(() =>\n    onBreakpointChange?.(activeBreakpoint, activeCols),\n  );\n  const bpInitializedRef = useRef(false);\n  useEffect(() => {\n    if (!bpInitializedRef.current) {\n      bpInitializedRef.current = true;\n      lastBreakpointRef.current = activeBreakpoint;\n      return;\n    }\n    onBreakpointChangeEvent();\n    lastBreakpointRef.current = activeBreakpoint;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [activeBreakpoint]);\n\n  // Report width changes (measured widths only; an explicit `width` disables\n  // measurement, and an unmeasured board reports 0 which we skip).\n  const onWidthChangeEvent = useEvent(() =>\n    onWidthChange?.(widthForBreakpoint, activeCols),\n  );\n  useEffect(() => {\n    if (providedWidth != null) return;\n    if (measuredWidth <= 0) return;\n    onWidthChangeEvent();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [measuredWidth, activeCols]);\n\n  const handleLayoutChange = useEvent((next: LayoutItem[]) => {\n    const merged = { ...layoutsRef.current, [activeBreakpoint]: next };\n    layoutsRef.current = merged;\n    if (!isControlled) setInternalLayouts(merged);\n    onLayoutChange?.(next, merged);\n  });\n\n  return (\n    <Board\n      ref={combinedRef}\n      layout={currentLayout}\n      cols={activeCols}\n      width={providedWidth}\n      compact={compact}\n      allowOverlap={allowOverlap}\n      preventCollision={preventCollision}\n      onLayoutChange={handleLayoutChange}\n      {...boardProps}\n    />\n  );\n}\n\n/**\n * A responsive wrapper around `Board` that selects a layout and column count\n * based on the container's width (or a forced breakpoint). Mirrors the model of\n * react-grid-layout's `Responsive` + `WidthProvider`: per-breakpoint `layouts`\n * and `cols`, with `onLayoutChange` reporting both the active layout and the\n * full map.\n */\nexport const BoardResponsive = forwardRef(BoardResponsiveInner);\n"],"mappings":";;;;;;;;;;;AAkEA,SAAS,kBAAkB,SAAwC;AACjE,KAAI,YAAY,OAAQ,QAAO;AAC/B,QAAO;;AAGT,SAAS,qBACP,OACA,KACA;CACA,MAAM,EACJ,aACA,MACA,SAAS,mBACT,gBACA,gBACA,oBACA,eACA,YAAY,kBACZ,OAAO,eACP,UAAU,YACV,eAAe,OACf,mBAAmB,OACnB,GAAG,eACD;CAEJ,MAAM,WAAW,OAA8B,KAAK;CACpD,MAAM,cAAc,gBAAgB,KAAK,SAAS;CAClD,MAAM,CAAC,eAAe,oBAAoB,SAAS,EAAE;AAMrD,mBAAkB;EAAE,KAAK;EAAU,UAJX,eAAe;GACrC,MAAM,OAAO,SAAS,SAAS,eAAe;AAC9C,OAAI,OAAO,EAAG,mBAAkB,SAAU,SAAS,OAAO,OAAO,KAAM;IACvE;EAC4D,CAAC;CAE/D,MAAM,eAAe,sBAAsB;CAC3C,MAAM,CAAC,iBAAiB,sBAAsB,eACtC,qBAAqB,kBAAkB,EAAE,CAChD;CACD,MAAM,iBAAiB,eAAe,oBAAqB;CAC3D,MAAM,aAAa,OAAO,eAAe;AACzC,YAAW,UAAU;CAErB,MAAM,qBAAqB,iBAAiB;CAC5C,MAAM,mBACJ,oBAAoB,uBAAuB,aAAa,mBAAmB;CAC7E,MAAM,aAAa,sBAAsB,kBAAkB,KAAK;CAIhE,MAAM,oBAAoB,OAAO,iBAAiB;CAMlD,MAAM,YAAY,cAEd,aAAa,kBAAkB,QAAQ,EAAE,cAAc,iBAAiB,EAC1E;EAAC;EAAS;EAAc;EAAiB,CAC1C;CAKD,MAAM,gBAAgB,cAAc;EAClC,MAAM,WAAW,eAAe;AAChC,MAAI,SAAU,QAAO;AACrB,SAAO,+BACL,gBACA,aACA,kBACA,kBAAkB,SAClB,YACA,UACD;IACA;EAAC;EAAgB;EAAa;EAAkB;EAAY;EAAU,CAAC;CAI1E,MAAM,0BAA0B,eAC9B,qBAAqB,kBAAkB,WAAW,CACnD;CACD,MAAM,mBAAmB,OAAO,MAAM;AACtC,iBAAgB;AACd,MAAI,CAAC,iBAAiB,SAAS;AAC7B,oBAAiB,UAAU;AAC3B,qBAAkB,UAAU;AAC5B;;AAEF,2BAAyB;AACzB,oBAAkB,UAAU;IAE3B,CAAC,iBAAiB,CAAC;CAItB,MAAM,qBAAqB,eACzB,gBAAgB,oBAAoB,WAAW,CAChD;AACD,iBAAgB;AACd,MAAI,iBAAiB,KAAM;AAC3B,MAAI,iBAAiB,EAAG;AACxB,sBAAoB;IAEnB,CAAC,eAAe,WAAW,CAAC;AAS/B,QACE,oBAAC;EACC,KAAK;EACL,QAAQ;EACR,MAAM;EACN,OAAO;EACE;EACK;EACI;EAClB,gBAhBuB,UAAU,SAAuB;GAC1D,MAAM,SAAS;IAAE,GAAG,WAAW;KAAU,mBAAmB;IAAM;AAClE,cAAW,UAAU;AACrB,OAAI,CAAC,aAAc,oBAAmB,OAAO;AAC7C,oBAAiB,MAAM,OAAO;IAC9B;EAYE,GAAI;GACJ;;;;;;;;;AAWN,MAAa,kBAAkB,WAAW,qBAAqB"}

package/dist/components/layout/Board/Widget.d.ts

@@ -0,0 +1,69 @@
+
+import { LayoutConstraint, ResizeHandleAxis } from "./grid-core/types.js";
+import { ContainerStyleProps, Styles } from "@tenphi/tasty";
+import { ReactNode } from "react";
+
+//#region src/components/layout/Board/Widget.d.ts
+interface CubeBoardWidgetProps extends ContainerStyleProps {
+  /** Unique id, must match the `i` of a layout item in a `Board`. */
+  id: string;
+  /** Widget content. */
+  children?: ReactNode;
+  /** Disable dragging for this widget. */
+  isDraggable?: boolean;
+  /** Disable resizing for this widget. */
+  isResizable?: boolean;
+  /** Which resize handles to show (overrides the board default). */
+  resizeHandles?: ResizeHandleAxis[];
+  /**
+   * Render this widget as a card by adding a border. Widgets are always filled
+   * (`#surface-2`) and rounded; `isCard` adds the border on top. Defaults to
+   * `false` (borderless) unless the owning `Board`'s `widgetProps.isCard` opts
+   * in. Override per widget to enable or disable.
+   */
+  isCard?: boolean;
+  /** Minimum width in grid columns (used when the layout item omits `minW`). */
+  minW?: number;
+  /** Maximum width in grid columns (used when the layout item omits `maxW`). */
+  maxW?: number;
+  /** Minimum height in grid rows (used when the layout item omits `minH`). */
+  minH?: number;
+  /** Maximum height in grid rows (used when the layout item omits `maxH`). */
+  maxH?: number;
+  /** Per-widget layout constraints. */
+  constraints?: LayoutConstraint[];
+  /** Test id applied to the rendered widget element. */
+  qa?: string;
+  /**
+   * Style overrides applied to the rendered widget element. Individual style
+   * props (`fill`, `padding`, `radius`, `border`, ...) can also be passed
+   * directly on `Board.Widget`, just like on `Board`; they are merged into
+   * these styles (a direct prop wins over the same key in the `styles` object).
+   */
+  styles?: Styles;
+  /**
+   * Grow this widget's height in its board to fit its content (only ever
+   * increases). Pair with a nested `Board isAligned` to make the container
+   * expand until the inner board's rows fit at the parent's row height.
+   */
+  isAutoHeight?: boolean;
+  /**
+   * CSS selector for elements that must not start a pointer drag inside this
+   * widget (overrides the board's `dragCancel`).
+   */
+  dragCancel?: string;
+  /**
+   * CSS selector for the only elements from which a pointer drag may start
+   * inside this widget (overrides the board's `dragHandle`).
+   */
+  dragHandle?: string;
+}
+/**
+ * Declares a widget's content and per-widget options. Rendering and positioning
+ * are performed by the owning `Board` (the component itself renders nothing),
+ * which is what allows a widget to be transferred between boards.
+ */
+declare function Widget(props: CubeBoardWidgetProps): null;
+//#endregion
+export { CubeBoardWidgetProps, Widget };
+//# sourceMappingURL=Widget.d.ts.map

package/dist/components/layout/Board/Widget.js

@@ -0,0 +1,68 @@
+/** @license MIT | @cube-dev/ui-kit v0.145.0 | Cube Dev Team */
+import { extractStyles } from "../../../utils/styles.js";
+import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
+import { useBoardRegistry } from "./board-context.js";
+import { CONTAINER_STYLES } from "@tenphi/tasty";
+import { useEffect, useRef } from "react";
+
+//#region src/components/layout/Board/Widget.tsx
+/**
+* Shallow-compare two style maps by their top-level keys. Direct style props
+* (e.g. `fill`) are primitives, so this reliably detects a real change while
+* ignoring the fresh object identity `extractStyles` produces each render.
+*/
+function shallowEqualStyles(a, b) {
+	if (a === b) return true;
+	if (!a || !b) return false;
+	const aKeys = Object.keys(a);
+	const bKeys = Object.keys(b);
+	if (aKeys.length !== bKeys.length) return false;
+	for (const key of aKeys) if (a[key] !== b[key]) return false;
+	return true;
+}
+/**
+* Declares a widget's content and per-widget options. Rendering and positioning
+* are performed by the owning `Board` (the component itself renders nothing),
+* which is what allows a widget to be transferred between boards.
+*/
+function Widget(props) {
+	const { id, children, isDraggable, isResizable, resizeHandles, isCard, minW, maxW, minH, maxH, constraints, qa, isAutoHeight, dragCancel, dragHandle } = props;
+	const registry = useBoardRegistry();
+	const extractedStyles = extractStyles(props, CONTAINER_STYLES);
+	const nextStyles = Object.keys(extractedStyles).length > 0 ? extractedStyles : void 0;
+	const stylesRef = useRef(void 0);
+	if (!shallowEqualStyles(stylesRef.current, nextStyles)) stylesRef.current = nextStyles;
+	const styles = stylesRef.current;
+	const ownerRef = useRef({});
+	useLayoutEffect$1(() => {
+		registry?.store.register({
+			id,
+			content: children,
+			isDraggable,
+			isResizable,
+			resizeHandles,
+			isCard,
+			minW,
+			maxW,
+			minH,
+			maxH,
+			constraints,
+			qa,
+			styles,
+			isAutoHeight,
+			dragCancel,
+			dragHandle
+		}, ownerRef.current);
+	});
+	useEffect(() => {
+		const owner = ownerRef.current;
+		return () => {
+			registry?.store.unregister(id, owner);
+		};
+	}, [id]);
+	return null;
+}
+
+//#endregion
+export { Widget };
+//# sourceMappingURL=Widget.js.map

package/dist/components/layout/Board/Widget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Widget.js","names":[],"sources":["../../../../src/components/layout/Board/Widget.tsx"],"sourcesContent":["import { CONTAINER_STYLES, ContainerStyleProps, Styles } from '@tenphi/tasty';\nimport { ReactNode, useEffect, useRef } from 'react';\n\nimport { useLayoutEffect } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\n\nimport { useBoardRegistry } from './board-context';\nimport { LayoutConstraint, ResizeHandleAxis } from './grid-core';\n\nexport interface CubeBoardWidgetProps extends ContainerStyleProps {\n  /** Unique id, must match the `i` of a layout item in a `Board`. */\n  id: string;\n  /** Widget content. */\n  children?: ReactNode;\n  /** Disable dragging for this widget. */\n  isDraggable?: boolean;\n  /** Disable resizing for this widget. */\n  isResizable?: boolean;\n  /** Which resize handles to show (overrides the board default). */\n  resizeHandles?: ResizeHandleAxis[];\n  /**\n   * Render this widget as a card by adding a border. Widgets are always filled\n   * (`#surface-2`) and rounded; `isCard` adds the border on top. Defaults to\n   * `false` (borderless) unless the owning `Board`'s `widgetProps.isCard` opts\n   * in. Override per widget to enable or disable.\n   */\n  isCard?: boolean;\n  /** Minimum width in grid columns (used when the layout item omits `minW`). */\n  minW?: number;\n  /** Maximum width in grid columns (used when the layout item omits `maxW`). */\n  maxW?: number;\n  /** Minimum height in grid rows (used when the layout item omits `minH`). */\n  minH?: number;\n  /** Maximum height in grid rows (used when the layout item omits `maxH`). */\n  maxH?: number;\n  /** Per-widget layout constraints. */\n  constraints?: LayoutConstraint[];\n  /** Test id applied to the rendered widget element. */\n  qa?: string;\n  /**\n   * Style overrides applied to the rendered widget element. Individual style\n   * props (`fill`, `padding`, `radius`, `border`, ...) can also be passed\n   * directly on `Board.Widget`, just like on `Board`; they are merged into\n   * these styles (a direct prop wins over the same key in the `styles` object).\n   */\n  styles?: Styles;\n  /**\n   * Grow this widget's height in its board to fit its content (only ever\n   * increases). Pair with a nested `Board isAligned` to make the container\n   * expand until the inner board's rows fit at the parent's row height.\n   */\n  isAutoHeight?: boolean;\n  /**\n   * CSS selector for elements that must not start a pointer drag inside this\n   * widget (overrides the board's `dragCancel`).\n   */\n  dragCancel?: string;\n  /**\n   * CSS selector for the only elements from which a pointer drag may start\n   * inside this widget (overrides the board's `dragHandle`).\n   */\n  dragHandle?: string;\n}\n\n/**\n * Shallow-compare two style maps by their top-level keys. Direct style props\n * (e.g. `fill`) are primitives, so this reliably detects a real change while\n * ignoring the fresh object identity `extractStyles` produces each render.\n */\nfunction shallowEqualStyles(a?: Styles, b?: Styles): boolean {\n  if (a === b) return true;\n  if (!a || !b) return false;\n  const aKeys = Object.keys(a);\n  const bKeys = Object.keys(b);\n  if (aKeys.length !== bKeys.length) return false;\n  for (const key of aKeys) {\n    if (\n      (a as Record<string, unknown>)[key] !==\n      (b as Record<string, unknown>)[key]\n    ) {\n      return false;\n    }\n  }\n  return true;\n}\n\n/**\n * Declares a widget's content and per-widget options. Rendering and positioning\n * are performed by the owning `Board` (the component itself renders nothing),\n * which is what allows a widget to be transferred between boards.\n */\nexport function Widget(props: CubeBoardWidgetProps) {\n  const {\n    id,\n    children,\n    isDraggable,\n    isResizable,\n    resizeHandles,\n    isCard,\n    minW,\n    maxW,\n    minH,\n    maxH,\n    constraints,\n    qa,\n    isAutoHeight,\n    dragCancel,\n    dragHandle,\n  } = props;\n  const registry = useBoardRegistry();\n\n  // Collect direct style props (e.g. `fill`, `padding`, `radius`) and merge them\n  // with the explicit `styles` prop, mirroring how `Board` extracts its own\n  // styles. Fall back to `undefined` when nothing was provided so widgets with\n  // no styling keep a stable registration (avoids needless store churn).\n  const extractedStyles = extractStyles(props, CONTAINER_STYLES);\n  const nextStyles =\n    Object.keys(extractedStyles).length > 0 ? extractedStyles : undefined;\n\n  // `extractStyles` returns a fresh object every render, so passing it straight\n  // to `register` would make the store treat every render as a style change,\n  // bump its version, and re-render the hosting board in a loop. Keep a stable\n  // reference across renders and only swap it when the shallow style values\n  // actually change (direct props are primitives; a `styles` object is compared\n  // per top-level key).\n  const stylesRef = useRef<Styles | undefined>(undefined);\n  if (!shallowEqualStyles(stylesRef.current, nextStyles)) {\n    stylesRef.current = nextStyles;\n  }\n  const styles = stylesRef.current;\n\n  // Stable per-instance token so a stale unregister (from an unmounting copy of\n  // this widget) can't wipe out a newer instance's registration.\n  const ownerRef = useRef({});\n\n  // Register/update content on every render so content stays fresh in the store.\n  useLayoutEffect(() => {\n    registry?.store.register(\n      {\n        id,\n        content: children,\n        isDraggable,\n        isResizable,\n        resizeHandles,\n        isCard,\n        minW,\n        maxW,\n        minH,\n        maxH,\n        constraints,\n        qa,\n        styles,\n        isAutoHeight,\n        dragCancel,\n        dragHandle,\n      },\n      ownerRef.current,\n    );\n  });\n\n  // Remove from the store on unmount.\n  useEffect(() => {\n    const owner = ownerRef.current;\n    return () => {\n      registry?.store.unregister(id, owner);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [id]);\n\n  return null;\n}\n"],"mappings":";;;;;;;;;;;;;AAqEA,SAAS,mBAAmB,GAAY,GAAqB;AAC3D,KAAI,MAAM,EAAG,QAAO;AACpB,KAAI,CAAC,KAAK,CAAC,EAAG,QAAO;CACrB,MAAM,QAAQ,OAAO,KAAK,EAAE;CAC5B,MAAM,QAAQ,OAAO,KAAK,EAAE;AAC5B,KAAI,MAAM,WAAW,MAAM,OAAQ,QAAO;AAC1C,MAAK,MAAM,OAAO,MAChB,KACG,EAA8B,SAC9B,EAA8B,KAE/B,QAAO;AAGX,QAAO;;;;;;;AAQT,SAAgB,OAAO,OAA6B;CAClD,MAAM,EACJ,IACA,UACA,aACA,aACA,eACA,QACA,MACA,MACA,MACA,MACA,aACA,IACA,cACA,YACA,eACE;CACJ,MAAM,WAAW,kBAAkB;CAMnC,MAAM,kBAAkB,cAAc,OAAO,iBAAiB;CAC9D,MAAM,aACJ,OAAO,KAAK,gBAAgB,CAAC,SAAS,IAAI,kBAAkB;CAQ9D,MAAM,YAAY,OAA2B,OAAU;AACvD,KAAI,CAAC,mBAAmB,UAAU,SAAS,WAAW,CACpD,WAAU,UAAU;CAEtB,MAAM,SAAS,UAAU;CAIzB,MAAM,WAAW,OAAO,EAAE,CAAC;AAG3B,yBAAsB;AACpB,YAAU,MAAM,SACd;GACE;GACA,SAAS;GACT;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,EACD,SAAS,QACV;GACD;AAGF,iBAAgB;EACd,MAAM,QAAQ,SAAS;AACvB,eAAa;AACX,aAAU,MAAM,WAAW,IAAI,MAAM;;IAGtC,CAAC,GAAG,CAAC;AAER,QAAO"}