@vuu-ui/vuu-layout 0.8.43 → 0.8.45

package/esm/drag-drop/DropTargetRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropTargetRenderer.js","sources":["../../src/drag-drop/DropTargetRenderer.tsx"],"sourcesContent":["import { PopupService } from \"@vuu-ui/vuu-popups\";\nimport { RelativeDropPosition } from \"./BoxModel\";\nimport { DragDropRect } from \"./dragDropTypes\";\nimport { DragState } from \"./DragState\";\nimport { computeMenuPosition, DropMenu } from \"./DropMenu\";\nimport { DropTarget, GuideLine } from \"./DropTarget\";\n\nimport \"./DropTargetRenderer.css\";\n\ntype Point = [number, number];\ntype TabMode = \"full-view\" | \"tab-only\";\n\nlet _multiDropOptions = false;\nlet _hoverDropTarget: DropTarget | null = null;\nlet _shiftedTab: HTMLElement | null = null;\n\nconst onHoverDropTarget = (dropTarget: DropTarget | null) =>\n  (_hoverDropTarget = dropTarget);\n\nconst start = ([x, y]: Point) => `M${x},${y}`;\nconst point = ([x, y]: Point) => `L${x},${y}`;\nconst pathFromPoints = ([p1, ...points]: Point[]) =>\n  `${start(p1)} ${points.map(point)}Z`;\n\nconst pathFromGuideLines = (guideLines?: GuideLine) => {\n  if (guideLines) {\n    const [x1, y1, x2, y2, x3, y3, x4, y4] = guideLines;\n    return `M${x1},${y1} L${x2},${y2} M${x3},${y3} L${x4},${y4}`;\n  } else {\n    return \"\";\n  }\n};\n\nfunction insertSVGRoot() {\n  if (document.getElementById(\"hw-drag-canvas\") === null) {\n    const root = document.getElementById(\"root\");\n    const container = document.createElement(\"div\");\n    container.id = \"hw-drag-canvas\";\n    container.innerHTML = `\n      <svg width=\"100%\" height=\"100%\">\n        <path id=\"hw-drop-guides\" />\n        <path\n          id=\"vuu-drop-outline\"\n          d=\"M300,132 L380,132 L380,100 L460,100 L460,132, L550,132 L550,350 L300,350z\">\n          <animate\n            attributeName=\"d\"\n            id=\"hw-drop-outline-animate\"\n            begin=\"indefinite\"\n            dur=\"300ms\"\n            fill=\"freeze\"\n            to=\"M255,33 L255,33,L255,1,L315,1,L315,1,L794,1,L794,164,L255,164Z\"\n          />\n        </path>\n      </svg>\n      `;\n    document.body.insertBefore(container, root);\n  }\n}\nexport default class DropTargetCanvas {\n  private currentPath: string | null = null;\n  private tabMode: TabMode | null = null;\n\n  constructor() {\n    insertSVGRoot();\n  }\n\n  prepare(dragRect: DragDropRect, tabMode: TabMode = \"full-view\") {\n    // don't do this on body\n    document.body.classList.add(\"drawing\");\n    this.currentPath = null;\n    this.tabMode = tabMode;\n\n    const points = this.getPoints(0, 0, 0, 0);\n    // const points = this.getPoints(left, top, width, height);\n    const d = pathFromPoints(points);\n\n    const dropOutlinePath = document.getElementById(\"vuu-drop-outline\");\n    dropOutlinePath?.setAttribute(\"d\", d);\n    this.currentPath = d;\n  }\n\n  clear() {\n    // don't do this on body\n    _hoverDropTarget = null;\n    clearShiftedTab();\n    document.body.classList.remove(\"drawing\");\n    PopupService.hidePopup();\n  }\n\n  get hoverDropTarget() {\n    return _hoverDropTarget;\n  }\n\n  getPoints(\n    x: number,\n    y: number,\n    width: number,\n    height: number,\n    tabLeft = 0,\n    tabWidth = 0,\n    tabHeight = 0\n  ): Point[] {\n    const tabOnly = this.tabMode === \"tab-only\";\n    if (tabWidth === 0) {\n      return [\n        [x, y + tabHeight],\n        [x, y + tabHeight],\n        [x, y],\n        [x + tabWidth, y],\n        [x + tabWidth, y],\n        [x + width, y],\n        [x + width, y + height],\n        [x, y + height],\n      ];\n    } else if (tabOnly) {\n      const left = tabLeft;\n      return [\n        [left, y],\n        [left, y],\n        [left + tabWidth, y],\n        [left + tabWidth, y],\n        [left + tabWidth, y + tabHeight],\n        [left + tabWidth, y + tabHeight],\n        [left, y + tabHeight],\n        [left, y + tabHeight],\n      ];\n    } else if (tabLeft === 0) {\n      return [\n        [x, y + tabHeight],\n        [x, y + tabHeight],\n        [x, y],\n        [x + tabWidth, y],\n        [x + tabWidth, y + tabHeight],\n        [x + width, y + tabHeight],\n        [x + width, y + height],\n        [x, y + height],\n      ];\n    } else {\n      return [\n        [x, y + tabHeight],\n        [x + tabLeft, y + tabHeight],\n        [x + tabLeft, y],\n        [x + tabLeft, y],\n        [x + tabLeft, y + tabHeight],\n        [x + width, y + tabHeight],\n        [x + width, y + height],\n        [x, y + height],\n      ];\n    }\n  }\n\n  draw(dropTarget: DropTarget, dragState: DragState) {\n    const sameDropTarget = false;\n    const wasMultiDrop = _multiDropOptions;\n\n    if (_hoverDropTarget !== null) {\n      this.drawTarget(_hoverDropTarget);\n    } else {\n      if (sameDropTarget === false) {\n        _multiDropOptions = dropTarget.nextDropTarget != null;\n        if (dropTarget.pos.tab) {\n          moveExistingTabs(dropTarget);\n        } else if (_shiftedTab) {\n          clearShiftedTab();\n        }\n        this.drawTarget(dropTarget, dragState);\n      }\n\n      if (_multiDropOptions) {\n        const [left, top, orientation] = computeMenuPosition(dropTarget);\n        if (!wasMultiDrop || !sameDropTarget) {\n          const component = (\n            <DropMenu\n              dropTarget={dropTarget}\n              onHover={onHoverDropTarget}\n              orientation={orientation}\n            />\n          );\n          PopupService.showPopup({\n            left,\n            top,\n            component,\n          });\n        }\n      } else {\n        PopupService.hidePopup();\n      }\n    }\n  }\n\n  drawTarget(dropTarget: DropTarget, dragState?: DragState) {\n    const lineWidth = 6;\n\n    const targetDropOutline = dropTarget.getTargetDropOutline(\n      lineWidth,\n      dragState\n    );\n\n    if (targetDropOutline) {\n      const { l, t, r, b, tabLeft, tabWidth, tabHeight, guideLines } =\n        targetDropOutline;\n      const w = r - l;\n      const h = b - t;\n\n      if (this.currentPath) {\n        const path = document.getElementById(\"vuu-drop-outline\");\n        path?.setAttribute(\"d\", this.currentPath);\n      }\n\n      const points = this.getPoints(l, t, w, h, tabLeft, tabWidth, tabHeight);\n      const path = pathFromPoints(points);\n      const animation = document.getElementById(\n        \"hw-drop-outline-animate\"\n      ) as unknown as SVGAnimateElement;\n      animation?.setAttribute(\"to\", path);\n      animation?.beginElement();\n      this.currentPath = path;\n\n      const dropGuidePath = document.getElementById(\"hw-drop-guides\");\n      dropGuidePath?.setAttribute(\"d\", pathFromGuideLines(guideLines));\n    }\n  }\n}\n\nconst cssShiftRight = \"transition:margin-left .4s ease-out;margin-left: 63px\";\nconst cssShiftBack = \"transition:margin-left .4s ease-out;margin-left: 0px\";\n\nfunction moveExistingTabs(dropTarget: DropTarget) {\n  const { AFTER, BEFORE } = RelativeDropPosition;\n  const {\n    clientRect: { Stack },\n    pos: {\n      // tab: { index: tabIndex, positionRelativeToTab }\n      tab,\n    },\n  } = dropTarget;\n\n  const { id } = dropTarget.component.props;\n  let tabEl = null;\n  // console.log(`tabPos = ${tabPos} (width=${tabWidth}) x=${x}`)\n  if (Stack && tab && tab.positionRelativeToTab !== AFTER) {\n    const tabOffset = tab.positionRelativeToTab === BEFORE ? 1 : 2;\n    const selector = `:scope .hwTabstrip > .hwTabstrip-inner > .hwTab:nth-child(${\n      tab.index + tabOffset\n    })`;\n    tabEl = document.getElementById(id)?.querySelector(selector) as HTMLElement;\n    if (tabEl) {\n      if (_shiftedTab === null || _shiftedTab !== tabEl) {\n        tabEl.style.cssText = cssShiftRight;\n        if (_shiftedTab) {\n          _shiftedTab.style.cssText = cssShiftBack;\n        }\n        _shiftedTab = tabEl;\n      }\n    } else {\n      clearShiftedTab();\n    }\n  } else if (tab?.positionRelativeToTab === BEFORE) {\n    if (_shiftedTab === null) {\n      const selector = \".vuuHeader-title\";\n      tabEl = document\n        .getElementById(id)\n        ?.querySelector(selector) as HTMLElement;\n      tabEl.style.cssText = cssShiftRight;\n      _shiftedTab = tabEl;\n    }\n  } else {\n    clearShiftedTab();\n  }\n}\n\nfunction clearShiftedTab() {\n  if (_shiftedTab) {\n    _shiftedTab.style.cssText = cssShiftBack;\n    _shiftedTab = null;\n  }\n}\n"],"names":["path"],"mappings":"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"}
+{"version":3,"file":"DropTargetRenderer.js","sources":["../../src/drag-drop/DropTargetRenderer.tsx"],"sourcesContent":["import { PopupService } from \"@vuu-ui/vuu-popups\";\nimport { RelativeDropPosition } from \"./BoxModel\";\nimport { DragDropRect } from \"./dragDropTypes\";\nimport { DragState } from \"./DragState\";\nimport { computeMenuPosition, DropMenu } from \"./DropMenu\";\nimport { DropTarget, GuideLine } from \"./DropTarget\";\n\ntype Point = [number, number];\ntype TabMode = \"full-view\" | \"tab-only\";\n\nlet _multiDropOptions = false;\nlet _hoverDropTarget: DropTarget | null = null;\nlet _shiftedTab: HTMLElement | null = null;\n\nconst onHoverDropTarget = (dropTarget: DropTarget | null) =>\n  (_hoverDropTarget = dropTarget);\n\nconst start = ([x, y]: Point) => `M${x},${y}`;\nconst point = ([x, y]: Point) => `L${x},${y}`;\nconst pathFromPoints = ([p1, ...points]: Point[]) =>\n  `${start(p1)} ${points.map(point)}Z`;\n\nconst pathFromGuideLines = (guideLines?: GuideLine) => {\n  if (guideLines) {\n    const [x1, y1, x2, y2, x3, y3, x4, y4] = guideLines;\n    return `M${x1},${y1} L${x2},${y2} M${x3},${y3} L${x4},${y4}`;\n  } else {\n    return \"\";\n  }\n};\n\nfunction insertSVGRoot() {\n  if (document.getElementById(\"hw-drag-canvas\") === null) {\n    const root = document.getElementById(\"root\");\n    const container = document.createElement(\"div\");\n    container.id = \"hw-drag-canvas\";\n    container.style.cssText = `visibility:hidden;z-index:10;position:absolute;top:0px;left:0;right:0;bottom:0;background-color:transparent`;\n    container.innerHTML = `\n      <svg width=\"100%\" height=\"100%\" style=\"position: absolute;\">\n        <path id=\"hw-drop-guides\" style=\"fill: none; stroke: rgba(0, 0, 0, 0.3);stroke-dasharray: 2 3\"/>\n        <path\n          id=\"vuu-drop-outline\"\n          style=\"fill:rgba(0,0,255,.3);stroke:none;stroke-dasharray:4 2\"\n          d=\"M300,132 L380,132 L380,100 L460,100 L460,132, L550,132 L550,350 L300,350z\">\n          <animate\n            attributeName=\"d\"\n            id=\"hw-drop-outline-animate\"\n            begin=\"indefinite\"\n            dur=\"300ms\"\n            fill=\"freeze\"\n            to=\"M255,33 L255,33,L255,1,L315,1,L315,1,L794,1,L794,164,L255,164Z\"\n          />\n        </path>\n      </svg>\n      `;\n    document.body.insertBefore(container, root);\n  }\n}\nexport default class DropTargetCanvas {\n  private currentPath: string | null = null;\n  private tabMode: TabMode | null = null;\n\n  constructor() {\n    insertSVGRoot();\n  }\n\n  prepare(dragRect: DragDropRect, tabMode: TabMode = \"full-view\") {\n    // don't do this on body\n    const dragCanvas = document.getElementById(\"hw-drag-canvas\");\n    if (dragCanvas) {\n      dragCanvas.style.visibility = \"visible\";\n    } else {\n      throw Error(\"DropTargetRenderer.prepare no drag canvas detected\");\n    }\n    document.body.classList.add(\"drawing\");\n    this.currentPath = null;\n    this.tabMode = tabMode;\n\n    const points = this.getPoints(0, 0, 0, 0);\n    // const points = this.getPoints(left, top, width, height);\n    const d = pathFromPoints(points);\n\n    const dropOutlinePath = document.getElementById(\"vuu-drop-outline\");\n    dropOutlinePath?.setAttribute(\"d\", d);\n    this.currentPath = d;\n  }\n\n  clear() {\n    // don't do this on body\n    _hoverDropTarget = null;\n    clearShiftedTab();\n    const dragCanvas = document.getElementById(\"hw-drag-canvas\");\n    if (dragCanvas) {\n      dragCanvas.style.visibility = \"hidden\";\n    }\n    PopupService.hidePopup();\n  }\n\n  get hoverDropTarget() {\n    return _hoverDropTarget;\n  }\n\n  getPoints(\n    x: number,\n    y: number,\n    width: number,\n    height: number,\n    tabLeft = 0,\n    tabWidth = 0,\n    tabHeight = 0\n  ): Point[] {\n    const tabOnly = this.tabMode === \"tab-only\";\n    if (tabWidth === 0) {\n      return [\n        [x, y + tabHeight],\n        [x, y + tabHeight],\n        [x, y],\n        [x + tabWidth, y],\n        [x + tabWidth, y],\n        [x + width, y],\n        [x + width, y + height],\n        [x, y + height],\n      ];\n    } else if (tabOnly) {\n      const left = tabLeft;\n      return [\n        [left, y],\n        [left, y],\n        [left + tabWidth, y],\n        [left + tabWidth, y],\n        [left + tabWidth, y + tabHeight],\n        [left + tabWidth, y + tabHeight],\n        [left, y + tabHeight],\n        [left, y + tabHeight],\n      ];\n    } else if (tabLeft === 0) {\n      return [\n        [x, y + tabHeight],\n        [x, y + tabHeight],\n        [x, y],\n        [x + tabWidth, y],\n        [x + tabWidth, y + tabHeight],\n        [x + width, y + tabHeight],\n        [x + width, y + height],\n        [x, y + height],\n      ];\n    } else {\n      return [\n        [x, y + tabHeight],\n        [x + tabLeft, y + tabHeight],\n        [x + tabLeft, y],\n        [x + tabLeft, y],\n        [x + tabLeft, y + tabHeight],\n        [x + width, y + tabHeight],\n        [x + width, y + height],\n        [x, y + height],\n      ];\n    }\n  }\n\n  draw(dropTarget: DropTarget, dragState: DragState) {\n    const sameDropTarget = false;\n    const wasMultiDrop = _multiDropOptions;\n\n    if (_hoverDropTarget !== null) {\n      this.drawTarget(_hoverDropTarget);\n    } else {\n      if (sameDropTarget === false) {\n        _multiDropOptions = dropTarget.nextDropTarget != null;\n        if (dropTarget.pos.tab) {\n          moveExistingTabs(dropTarget);\n        } else if (_shiftedTab) {\n          clearShiftedTab();\n        }\n        this.drawTarget(dropTarget, dragState);\n      }\n\n      if (_multiDropOptions) {\n        const [left, top, orientation] = computeMenuPosition(dropTarget);\n        if (!wasMultiDrop || !sameDropTarget) {\n          const component = (\n            <DropMenu\n              dropTarget={dropTarget}\n              onHover={onHoverDropTarget}\n              orientation={orientation}\n            />\n          );\n          PopupService.showPopup({\n            left,\n            top,\n            component,\n          });\n        }\n      } else {\n        PopupService.hidePopup();\n      }\n    }\n  }\n\n  drawTarget(dropTarget: DropTarget, dragState?: DragState) {\n    const lineWidth = 6;\n\n    const targetDropOutline = dropTarget.getTargetDropOutline(\n      lineWidth,\n      dragState\n    );\n\n    if (targetDropOutline) {\n      const { l, t, r, b, tabLeft, tabWidth, tabHeight, guideLines } =\n        targetDropOutline;\n      const w = r - l;\n      const h = b - t;\n\n      if (this.currentPath) {\n        const path = document.getElementById(\"vuu-drop-outline\");\n        path?.setAttribute(\"d\", this.currentPath);\n      }\n\n      const points = this.getPoints(l, t, w, h, tabLeft, tabWidth, tabHeight);\n      const path = pathFromPoints(points);\n      const animation = document.getElementById(\n        \"hw-drop-outline-animate\"\n      ) as unknown as SVGAnimateElement;\n      animation?.setAttribute(\"to\", path);\n      animation?.beginElement();\n      this.currentPath = path;\n\n      const dropGuidePath = document.getElementById(\"hw-drop-guides\");\n      dropGuidePath?.setAttribute(\"d\", pathFromGuideLines(guideLines));\n    }\n  }\n}\n\nconst cssShiftRight = \"transition:margin-left .4s ease-out;margin-left: 63px\";\nconst cssShiftBack = \"transition:margin-left .4s ease-out;margin-left: 0px\";\n\nfunction moveExistingTabs(dropTarget: DropTarget) {\n  const { AFTER, BEFORE } = RelativeDropPosition;\n  const {\n    clientRect: { Stack },\n    pos: {\n      // tab: { index: tabIndex, positionRelativeToTab }\n      tab,\n    },\n  } = dropTarget;\n\n  const { id } = dropTarget.component.props;\n  let tabEl = null;\n  // console.log(`tabPos = ${tabPos} (width=${tabWidth}) x=${x}`)\n  if (Stack && tab && tab.positionRelativeToTab !== AFTER) {\n    const tabOffset = tab.positionRelativeToTab === BEFORE ? 1 : 2;\n    const selector = `:scope .hwTabstrip > .hwTabstrip-inner > .hwTab:nth-child(${\n      tab.index + tabOffset\n    })`;\n    tabEl = document.getElementById(id)?.querySelector(selector) as HTMLElement;\n    if (tabEl) {\n      if (_shiftedTab === null || _shiftedTab !== tabEl) {\n        tabEl.style.cssText = cssShiftRight;\n        if (_shiftedTab) {\n          _shiftedTab.style.cssText = cssShiftBack;\n        }\n        _shiftedTab = tabEl;\n      }\n    } else {\n      clearShiftedTab();\n    }\n  } else if (tab?.positionRelativeToTab === BEFORE) {\n    if (_shiftedTab === null) {\n      const selector = \".vuuHeader-title\";\n      tabEl = document\n        .getElementById(id)\n        ?.querySelector(selector) as HTMLElement;\n      tabEl.style.cssText = cssShiftRight;\n      _shiftedTab = tabEl;\n    }\n  } else {\n    clearShiftedTab();\n  }\n}\n\nfunction clearShiftedTab() {\n  if (_shiftedTab) {\n    _shiftedTab.style.cssText = cssShiftBack;\n    _shiftedTab = null;\n  }\n}\n"],"names":["path"],"mappings":"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"}

package/esm/flexbox/FluidGrid.css.js

@@ -0,0 +1,4 @@
+var fluidGridCss = ":root {\n  --hw-space-unit: 4px;\n  --hw-fluid-grid-col-bg: rgba(252, 209, 232, 0.7);\n}\n\n.hwFluidGrid {\n  --gap: var(--gutter-width);\n\n  display: flex;\n  gap: calc(var(--grid-gap) * var(--hw-space-unit));\n  flex-wrap: wrap;\n  padding: 0;\n}\n\n.hwFluidGrid > * {\n  --gutter-width: calc(var(--hw-flex-gap) * var(--hw-space-unit));\n  --gutter-count: calc(var(--parent-col-count) - 1);\n  --total-gutter-width: calc(var(--gutter-count) * var(--gutter-width));\n  --available-width: calc(100% - var(--total-gutter-width));\n\n  flex-basis: 0;\n  flex-grow: 1;\n  flex-shrink: 1;\n  position: relative;\n}\n\n.hwFluidGrid > *:after {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: dashed 2px blue;\n}\n\n.hwFluidGrid > [data-xs] {\n  --internal-gutter-count: calc(var(--col-span) - 1);\n  --percent-width: calc(var(--col-span) / var(--parent-col-count));\n  --internal-gutter-width: calc(var(--internal-gutter-count) * var(--gutter-width));\n  flex-basis: calc(var(--available-width) * var(--percent-width) + var(--internal-gutter-width));\n  flex-grow: 0;\n}\n\n.hwFluidGrid > [data-xs='1'] {\n  --col-span: 1;\n}\n.hwFluidGrid > [data-xs='2'] {\n  --col-span: 2;\n}\n.hwFluidGrid > [data-xs='3'] {\n  --col-span: 3;\n}\n\n.hwFluidGrid > [data-xs='4'] {\n  --col-span: 4;\n}\n\n.hwFluidGrid > [data-xs='6'] {\n  --col-span: 6;\n}\n\n.hwFluidGrid > [data-xs='8'] {\n  --col-span: 8;\n}\n\n.hwFluidGrid > [data-xs='9'] {\n  --col-span: 9;\n}\n.hwFluidGrid > [data-xs='10'] {\n  --col-span: 10;\n}\n.hwFluidGrid > [data-xs='11'] {\n  --col-span: 11;\n}\n\n.hwFluidGrid > [data-xs='12'] {\n  --col-span: 12;\n}\n\n@media (min-width: 600px) {\n  .hwFluidGrid > [data-sm='1'] {\n    --col-span: 1;\n  }\n  .hwFluidGrid > [data-sm='2'] {\n    --col-span: 2;\n  }\n\n  .hwFluidGrid > [data-sm='3'] {\n    --col-span: 3;\n  }\n\n  .hwFluidGrid > [data-sm='4'] {\n    --col-span: 4;\n  }\n\n  .hwFluidGrid > [data-sm='6'] {\n    --col-span: 6;\n  }\n\n  .hwFluidGrid > [data-sm='8'] {\n    --col-span: 8;\n  }\n  .hwFluidGrid > [data-sm='9'] {\n    --col-span: 9;\n  }\n  .hwFluidGrid > [data-sm='10'] {\n    --col-span: 10;\n  }\n  .hwFluidGrid > [data-sm='11'] {\n    --col-span: 11;\n  }\n  .hwFluidGrid > [data-sm='12'] {\n    --col-span: 12;\n  }\n}\n\n/* Display the grid background */\n\n.hwFluidGrid-show-grid {\n  --gutter-width: calc(var(--hw-flex-gap) * var(--hw-space-unit));\n  --grid-gutter-count: calc(var(--grid-col-count, var(--parent-col-count)) - 1);\n  --grid-total-gutter-width: calc(var(--grid-gutter-count) * var(--gutter-width));\n  --grid-available-width: calc(100% - var(--grid-total-gutter-width));\n  --grid-percent-width: calc(1 / var(--grid-col-count, var(--parent-col-count)));\n  --column-width: calc(var(--grid-available-width) * var(--grid-percent-width));\n  background: repeating-linear-gradient(\n    to right,\n    var(--hw-fluid-grid-col-bg) 0,\n    var(--hw-fluid-grid-col-bg) var(--column-width),\n    white var(--column-width),\n    white calc(var(--column-width) + var(--gutter-width))\n  );\n}\n";
+
+export { fluidGridCss as default };
+//# sourceMappingURL=FluidGrid.css.js.map

package/esm/flexbox/FluidGrid.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluidGrid.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/esm/flexbox/FluidGrid.js

@@ -1,11 +1,14 @@
 import { jsx } from 'react/jsx-runtime';
 import { asReactElements } from '@vuu-ui/vuu-utils';
 import { useForkRef } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import cx from 'clsx';
 import { forwardRef, useMemo } from 'react';
 import { useBreakpoints } from '../responsive/use-breakpoints.js';
 import '../responsive/useResizeObserver.js';
 import { useResponsiveSizing } from './useResponsiveSizing.js';
+import fluidGridCss from './FluidGrid.css.js';
 
 const classBase = "hwFluidGrid";
 const FluidGrid = forwardRef(function FluidGrid2(props, ref) {
@@ -28,6 +31,12 @@ const FluidGrid = forwardRef(function FluidGrid2(props, ref) {
     style: styleProp,
     ...rest
   } = props;
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-fluid-grid",
+    css: fluidGridCss,
+    window: targetWindow
+  });
   const children = useMemo(() => {
     return asReactElements(childrenProp);
   }, [childrenProp]);

package/esm/flexbox/FluidGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"FluidGrid.js","sources":["../../src/flexbox/FluidGrid.tsx"],"sourcesContent":["import { asReactElements } from \"@vuu-ui/vuu-utils\";\nimport { useForkRef } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { ForwardedRef, forwardRef, useMemo } from \"react\";\nimport { useBreakpoints } from \"../responsive\";\nimport { FlexboxProps } from \"./flexboxTypes\";\nimport \"./FluidGrid.css\";\nimport { useResponsiveSizing } from \"./useResponsiveSizing\";\n\nconst classBase = \"hwFluidGrid\";\n\nexport interface FluidGridProps extends FlexboxProps {\n  showGrid?: boolean;\n}\n\nexport const FluidGrid = forwardRef(function FluidGrid(\n  props: FluidGridProps,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  const {\n    breakPoints,\n    children: childrenProp,\n    column,\n    cols: colsProp = 12,\n    className: classNameProp,\n    flexFill,\n    gap = 3,\n    fullPage,\n    id,\n    onSplitterMoved,\n    resizeable,\n    row,\n    showGrid,\n    spacing,\n    splitterSize,\n    style: styleProp,\n    ...rest\n  } = props;\n\n  //TODO does thie useMemo serve any actual purpose or will childrenProp\n  // always be new anyway ?\n  const children = useMemo(() => {\n    return asReactElements(childrenProp);\n  }, [childrenProp]);\n\n  const { cols, content, rootRef } = useResponsiveSizing({\n    children,\n    cols: colsProp,\n    style: styleProp,\n  });\n\n  const breakpoint = useBreakpoints(\n    {\n      breakPoints,\n    },\n    rootRef\n  );\n\n  const className = cx(classBase, classNameProp, {\n    [`${classBase}-column`]: column,\n    [`${classBase}-row`]: row,\n    [`${classBase}-show-grid`]: showGrid,\n    \"flex-fill\": flexFill,\n    \"full-page\": fullPage,\n  });\n\n  const style = {\n    ...styleProp,\n    \"--spacing\": spacing,\n    \"--grid-col-count\": cols,\n    \"--grid-gap\": gap,\n  };\n\n  return (\n    <div\n      {...rest}\n      className={className}\n      data-breakpoint={breakpoint}\n      data-cols={cols}\n      data-resizeable={resizeable || undefined}\n      id={id}\n      ref={useForkRef(rootRef, ref)}\n      style={style}\n    >\n      {content}\n    </div>\n  );\n});\nFluidGrid.displayName = \"FluidGrid\";\n"],"names":["FluidGrid"],"mappings":";;;;;;;;;AASA,MAAM,SAAY,GAAA,aAAA,CAAA;AAMX,MAAM,SAAY,GAAA,UAAA,CAAW,SAASA,UAAAA,CAC3C,OACA,GACA,EAAA;AACA,EAAM,MAAA;AAAA,IACJ,WAAA;AAAA,IACA,QAAU,EAAA,YAAA;AAAA,IACV,MAAA;AAAA,IACA,MAAM,QAAW,GAAA,EAAA;AAAA,IACjB,SAAW,EAAA,aAAA;AAAA,IACX,QAAA;AAAA,IACA,GAAM,GAAA,CAAA;AAAA,IACN,QAAA;AAAA,IACA,EAAA;AAAA,IACA,eAAA;AAAA,IACA,UAAA;AAAA,IACA,GAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,YAAA;AAAA,IACA,KAAO,EAAA,SAAA;AAAA,IACP,GAAG,IAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAIJ,EAAM,MAAA,QAAA,GAAW,QAAQ,MAAM;AAC7B,IAAA,OAAO,gBAAgB,YAAY,CAAA,CAAA;AAAA,GACrC,EAAG,CAAC,YAAY,CAAC,CAAA,CAAA;AAEjB,EAAA,MAAM,EAAE,IAAA,EAAM,OAAS,EAAA,OAAA,KAAY,mBAAoB,CAAA;AAAA,IACrD,QAAA;AAAA,IACA,IAAM,EAAA,QAAA;AAAA,IACN,KAAO,EAAA,SAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAA,MAAM,UAAa,GAAA,cAAA;AAAA,IACjB;AAAA,MACE,WAAA;AAAA,KACF;AAAA,IACA,OAAA;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,SAAA,GAAY,EAAG,CAAA,SAAA,EAAW,aAAe,EAAA;AAAA,IAC7C,CAAC,CAAA,EAAG,SAAS,CAAA,OAAA,CAAS,GAAG,MAAA;AAAA,IACzB,CAAC,CAAA,EAAG,SAAS,CAAA,IAAA,CAAM,GAAG,GAAA;AAAA,IACtB,CAAC,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY,GAAG,QAAA;AAAA,IAC5B,WAAa,EAAA,QAAA;AAAA,IACb,WAAa,EAAA,QAAA;AAAA,GACd,CAAA,CAAA;AAED,EAAA,MAAM,KAAQ,GAAA;AAAA,IACZ,GAAG,SAAA;AAAA,IACH,WAAa,EAAA,OAAA;AAAA,IACb,kBAAoB,EAAA,IAAA;AAAA,IACpB,YAAc,EAAA,GAAA;AAAA,GAChB,CAAA;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,SAAA;AAAA,MACA,iBAAiB,EAAA,UAAA;AAAA,MACjB,WAAW,EAAA,IAAA;AAAA,MACX,mBAAiB,UAAc,IAAA,KAAA,CAAA;AAAA,MAC/B,EAAA;AAAA,MACA,GAAA,EAAK,UAAW,CAAA,OAAA,EAAS,GAAG,CAAA;AAAA,MAC5B,KAAA;AAAA,MAEC,QAAA,EAAA,OAAA;AAAA,KAAA;AAAA,GACH,CAAA;AAEJ,CAAC,EAAA;AACD,SAAA,CAAU,WAAc,GAAA,WAAA;;;;"}
+{"version":3,"file":"FluidGrid.js","sources":["../../src/flexbox/FluidGrid.tsx"],"sourcesContent":["import { asReactElements } from \"@vuu-ui/vuu-utils\";\nimport { useForkRef } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { ForwardedRef, forwardRef, useMemo } from \"react\";\nimport { useBreakpoints } from \"../responsive\";\nimport { FlexboxProps } from \"./flexboxTypes\";\nimport { useResponsiveSizing } from \"./useResponsiveSizing\";\n\nimport fluidGridCss from \"./FluidGrid.css\";\n\nconst classBase = \"hwFluidGrid\";\n\nexport interface FluidGridProps extends FlexboxProps {\n  showGrid?: boolean;\n}\n\nexport const FluidGrid = forwardRef(function FluidGrid(\n  props: FluidGridProps,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  const {\n    breakPoints,\n    children: childrenProp,\n    column,\n    cols: colsProp = 12,\n    className: classNameProp,\n    flexFill,\n    gap = 3,\n    fullPage,\n    id,\n    onSplitterMoved,\n    resizeable,\n    row,\n    showGrid,\n    spacing,\n    splitterSize,\n    style: styleProp,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-fluid-grid\",\n    css: fluidGridCss,\n    window: targetWindow,\n  });\n\n  //TODO does thie useMemo serve any actual purpose or will childrenProp\n  // always be new anyway ?\n  const children = useMemo(() => {\n    return asReactElements(childrenProp);\n  }, [childrenProp]);\n\n  const { cols, content, rootRef } = useResponsiveSizing({\n    children,\n    cols: colsProp,\n    style: styleProp,\n  });\n\n  const breakpoint = useBreakpoints(\n    {\n      breakPoints,\n    },\n    rootRef\n  );\n\n  const className = cx(classBase, classNameProp, {\n    [`${classBase}-column`]: column,\n    [`${classBase}-row`]: row,\n    [`${classBase}-show-grid`]: showGrid,\n    \"flex-fill\": flexFill,\n    \"full-page\": fullPage,\n  });\n\n  const style = {\n    ...styleProp,\n    \"--spacing\": spacing,\n    \"--grid-col-count\": cols,\n    \"--grid-gap\": gap,\n  };\n\n  return (\n    <div\n      {...rest}\n      className={className}\n      data-breakpoint={breakpoint}\n      data-cols={cols}\n      data-resizeable={resizeable || undefined}\n      id={id}\n      ref={useForkRef(rootRef, ref)}\n      style={style}\n    >\n      {content}\n    </div>\n  );\n});\nFluidGrid.displayName = \"FluidGrid\";\n"],"names":["FluidGrid"],"mappings":";;;;;;;;;;;;AAYA,MAAM,SAAY,GAAA,aAAA,CAAA;AAMX,MAAM,SAAY,GAAA,UAAA,CAAW,SAASA,UAAAA,CAC3C,OACA,GACA,EAAA;AACA,EAAM,MAAA;AAAA,IACJ,WAAA;AAAA,IACA,QAAU,EAAA,YAAA;AAAA,IACV,MAAA;AAAA,IACA,MAAM,QAAW,GAAA,EAAA;AAAA,IACjB,SAAW,EAAA,aAAA;AAAA,IACX,QAAA;AAAA,IACA,GAAM,GAAA,CAAA;AAAA,IACN,QAAA;AAAA,IACA,EAAA;AAAA,IACA,eAAA;AAAA,IACA,UAAA;AAAA,IACA,GAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,YAAA;AAAA,IACA,KAAO,EAAA,SAAA;AAAA,IACP,GAAG,IAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAA,YAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAID,EAAM,MAAA,QAAA,GAAW,QAAQ,MAAM;AAC7B,IAAA,OAAO,gBAAgB,YAAY,CAAA,CAAA;AAAA,GACrC,EAAG,CAAC,YAAY,CAAC,CAAA,CAAA;AAEjB,EAAA,MAAM,EAAE,IAAA,EAAM,OAAS,EAAA,OAAA,KAAY,mBAAoB,CAAA;AAAA,IACrD,QAAA;AAAA,IACA,IAAM,EAAA,QAAA;AAAA,IACN,KAAO,EAAA,SAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAA,MAAM,UAAa,GAAA,cAAA;AAAA,IACjB;AAAA,MACE,WAAA;AAAA,KACF;AAAA,IACA,OAAA;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,SAAA,GAAY,EAAG,CAAA,SAAA,EAAW,aAAe,EAAA;AAAA,IAC7C,CAAC,CAAA,EAAG,SAAS,CAAA,OAAA,CAAS,GAAG,MAAA;AAAA,IACzB,CAAC,CAAA,EAAG,SAAS,CAAA,IAAA,CAAM,GAAG,GAAA;AAAA,IACtB,CAAC,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY,GAAG,QAAA;AAAA,IAC5B,WAAa,EAAA,QAAA;AAAA,IACb,WAAa,EAAA,QAAA;AAAA,GACd,CAAA,CAAA;AAED,EAAA,MAAM,KAAQ,GAAA;AAAA,IACZ,GAAG,SAAA;AAAA,IACH,WAAa,EAAA,OAAA;AAAA,IACb,kBAAoB,EAAA,IAAA;AAAA,IACpB,YAAc,EAAA,GAAA;AAAA,GAChB,CAAA;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,SAAA;AAAA,MACA,iBAAiB,EAAA,UAAA;AAAA,MACjB,WAAW,EAAA,IAAA;AAAA,MACX,mBAAiB,UAAc,IAAA,KAAA,CAAA;AAAA,MAC/B,EAAA;AAAA,MACA,GAAA,EAAK,UAAW,CAAA,OAAA,EAAS,GAAG,CAAA;AAAA,MAC5B,KAAA;AAAA,MAEC,QAAA,EAAA,OAAA;AAAA,KAAA;AAAA,GACH,CAAA;AAEJ,CAAC,EAAA;AACD,SAAA,CAAU,WAAc,GAAA,WAAA;;;;"}

package/esm/layout-header/Header.css.js

@@ -0,0 +1,4 @@
+var headerCss = ".vuuHeader {\n  --saltButton-height: 24px;\n  --saltButton-width: 24px;\n}\n\n.salt-density-high .vuuHeader {\n--saltToolbarField-marginTop: 0;\n}\n\n";
+
+export { headerCss as default };
+//# sourceMappingURL=Header.css.js.map

package/esm/layout-header/Header.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/esm/layout-header/Header.js

@@ -1,12 +1,15 @@
 import { jsx } from 'react/jsx-runtime';
 import { EditableLabel, IconButton } from '@vuu-ui/vuu-ui-controls';
 import cx from 'clsx';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import { useRef, useState, cloneElement } from 'react';
 import '@vuu-ui/vuu-utils';
 import '../layout-provider/LayoutProviderContext.js';
 import '../drag-drop/Draggable.js';
 import '../drag-drop/BoxModel.js';
 import { useViewDispatch } from '../layout-view-actions/ViewContext.js';
+import headerCss from './Header.css.js';
 
 const classBase = "vuuHeader";
 const Header = ({
@@ -19,6 +22,12 @@ const Header = ({
   style,
   title = "Untitled"
 }) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-header",
+    css: headerCss,
+    window: targetWindow
+  });
   const labelFieldRef = useRef(null);
   const [value, setValue] = useState(title);
   const [editing, setEditing] = useState(false);

package/esm/layout-header/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sources":["../../src/layout-header/Header.tsx"],"sourcesContent":["import { EditableLabel, IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport cx from \"clsx\";\nimport {\n  cloneElement,\n  HTMLAttributes,\n  KeyboardEvent,\n  MouseEvent,\n  ReactElement,\n  useRef,\n  useState,\n} from \"react\";\nimport { Contribution, useViewDispatch } from \"../layout-view-actions\";\n\nimport \"./Header.css\";\n\nexport interface HeaderProps extends HTMLAttributes<HTMLDivElement> {\n  collapsed?: boolean;\n  contributions?: Contribution[];\n  expanded?: boolean;\n  closeable?: boolean;\n  onEditTitle: (value: string) => void;\n  orientation?: \"horizontal\" | \"vertical\";\n  tearOut?: boolean;\n}\n\nconst classBase = \"vuuHeader\";\n\nexport const Header = ({\n  className: classNameProp,\n  contributions,\n  collapsed,\n  closeable,\n  onEditTitle,\n  orientation: orientationProp = \"horizontal\",\n  style,\n  title = \"Untitled\",\n}: HeaderProps) => {\n  const labelFieldRef = useRef<HTMLDivElement>(null);\n  const [value, setValue] = useState<string>(title);\n  const [editing, setEditing] = useState<boolean>(false);\n\n  const viewDispatch = useViewDispatch();\n  const handleClose = (evt: MouseEvent) =>\n    viewDispatch?.({ type: \"remove\" }, evt);\n\n  const handleTitleMouseDown = () => {\n    labelFieldRef.current?.focus();\n  };\n\n  const handleButtonMouseDown = (evt: MouseEvent) => {\n    // do not allow drag to be initiated\n    evt.stopPropagation();\n  };\n\n  const orientation = collapsed || orientationProp;\n\n  const className = cx(classBase, classNameProp, `${classBase}-${orientation}`);\n\n  const handleEnterEditMode = () => {\n    setEditing(true);\n  };\n\n  const handleTitleKeyDown = (evt: KeyboardEvent<HTMLDivElement>) => {\n    if (evt.key === \"Enter\") {\n      setEditing(true);\n    }\n  };\n\n  const handleExitEditMode = (\n    originalValue = \"\",\n    finalValue = \"\",\n    allowDeactivation = true,\n    editCancelled = false\n  ) => {\n    setEditing(false);\n    if (editCancelled) {\n      setValue(originalValue);\n    } else if (finalValue !== originalValue) {\n      setValue(finalValue);\n      onEditTitle?.(finalValue);\n    }\n    if (allowDeactivation === false) {\n      labelFieldRef.current?.focus();\n    }\n  };\n\n  const handleMouseDown = (e: MouseEvent) => {\n    viewDispatch?.({ type: \"mousedown\" }, e);\n  };\n\n  const toolbarItems: ReactElement[] = [];\n  const postTitleContributedItems: ReactElement[] = [];\n  const actionButtons: ReactElement[] = [];\n\n  contributions?.forEach((contribution, i) => {\n    switch (contribution.location) {\n      case \"pre-title\":\n        toolbarItems.push(cloneElement(contribution.content, { key: i }));\n        break;\n      default:\n        postTitleContributedItems.push(\n          cloneElement(contribution.content, { key: i })\n        );\n    }\n  });\n\n  title &&\n    toolbarItems.push(\n      <EditableLabel\n        className={`${classBase}-title`}\n        editing={editing}\n        key=\"title\"\n        value={value}\n        onChange={setValue}\n        onMouseDownCapture={handleTitleMouseDown}\n        onEnterEditMode={handleEnterEditMode}\n        onExitEditMode={handleExitEditMode}\n        onKeyDown={handleTitleKeyDown}\n        ref={labelFieldRef}\n        tabIndex={0}\n      />\n    );\n\n  closeable &&\n    actionButtons.push(\n      <IconButton\n        icon=\"close\"\n        key=\"close\"\n        onClick={handleClose}\n        onMouseDown={handleButtonMouseDown}\n        variant=\"secondary\"\n      />\n    );\n\n  postTitleContributedItems.length > 0 &&\n    toolbarItems.push(\n      <div className=\"vuuTooltrayProxy\" data-align=\"end\" key=\"contributions\">\n        {postTitleContributedItems}\n      </div>\n    );\n\n  actionButtons.length > 0 &&\n    toolbarItems.push(\n      <div className=\"vuuTooltrayProxy\" data-align=\"end\" key=\"actions\">\n        {actionButtons}\n      </div>\n    );\n\n  return (\n    <div\n      className={cx(\"vuuToolbarProxy\", className)}\n      style={style}\n      onMouseDown={handleMouseDown}\n    >\n      {toolbarItems}\n      {/* \n      {collapsed === false ? (\n        <ActionButton\n          aria-label=\"Minimize View\"\n          actionId=\"minimize\"\n          iconName=\"minimize\"\n          onClick={handleAction}\n          onMouseDown={handleButtonMouseDown}\n        />\n      ) : null}\n      {collapsed ? (\n        <ActionButton\n          aria-label=\"Restore View\"\n          actionId=\"restore\"\n          iconName=\"double-chevron-right\"\n          onClick={handleAction}\n          onMouseDown={handleButtonMouseDown}\n        />\n      ) : null}\n      {expanded === false ? (\n        <ActionButton\n          aria-label=\"Maximize View\"\n          actionId=\"maximize\"\n          iconName=\"maximize\"\n          onClick={handleAction}\n          onMouseDown={handleButtonMouseDown}\n        />\n      ) : null}\n      {expanded ? (\n        <ActionButton\n          aria-label=\"Restore View\"\n          actionId=\"restore\"\n          iconName=\"restore\"\n          onClick={handleAction}\n          onMouseDown={handleButtonMouseDown}\n        />\n      ) : null}\n      {tearOut ? (\n        <ActionButton\n          aria-label=\"Tear out View\"\n          actionId=\"tearout\"\n          iconName=\"tear-out\"\n          onClick={handleAction}\n          onMouseDown={handleButtonMouseDown}\n        />\n      ) : null}\n      {closeable ? (\n        <Button\n          aria-label=\"close\"\n          data-icon\n          onClick={handleClose}\n          onMouseDown={handleButtonMouseDown}\n        />\n      ) : null} */}\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Header.js","sources":["../../src/layout-header/Header.tsx"],"sourcesContent":["import { EditableLabel, IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  cloneElement,\n  HTMLAttributes,\n  KeyboardEvent,\n  MouseEvent,\n  ReactElement,\n  useRef,\n  useState,\n} from \"react\";\nimport { Contribution, useViewDispatch } from \"../layout-view-actions\";\n\nimport headerCss from \"./Header.css\";\n\nexport interface HeaderProps extends HTMLAttributes<HTMLDivElement> {\n  collapsed?: boolean;\n  contributions?: Contribution[];\n  expanded?: boolean;\n  closeable?: boolean;\n  onEditTitle: (value: string) => void;\n  orientation?: \"horizontal\" | \"vertical\";\n  tearOut?: boolean;\n}\n\nconst classBase = \"vuuHeader\";\n\nexport const Header = ({\n  className: classNameProp,\n  contributions,\n  collapsed,\n  closeable,\n  onEditTitle,\n  orientation: orientationProp = \"horizontal\",\n  style,\n  title = \"Untitled\",\n}: HeaderProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-header\",\n    css: headerCss,\n    window: targetWindow,\n  });\n\n  const labelFieldRef = useRef<HTMLDivElement>(null);\n  const [value, setValue] = useState<string>(title);\n  const [editing, setEditing] = useState<boolean>(false);\n\n  const viewDispatch = useViewDispatch();\n  const handleClose = (evt: MouseEvent) =>\n    viewDispatch?.({ type: \"remove\" }, evt);\n\n  const handleTitleMouseDown = () => {\n    labelFieldRef.current?.focus();\n  };\n\n  const handleButtonMouseDown = (evt: MouseEvent) => {\n    // do not allow drag to be initiated\n    evt.stopPropagation();\n  };\n\n  const orientation = collapsed || orientationProp;\n\n  const className = cx(classBase, classNameProp, `${classBase}-${orientation}`);\n\n  const handleEnterEditMode = () => {\n    setEditing(true);\n  };\n\n  const handleTitleKeyDown = (evt: KeyboardEvent<HTMLDivElement>) => {\n    if (evt.key === \"Enter\") {\n      setEditing(true);\n    }\n  };\n\n  const handleExitEditMode = (\n    originalValue = \"\",\n    finalValue = \"\",\n    allowDeactivation = true,\n    editCancelled = false\n  ) => {\n    setEditing(false);\n    if (editCancelled) {\n      setValue(originalValue);\n    } else if (finalValue !== originalValue) {\n      setValue(finalValue);\n      onEditTitle?.(finalValue);\n    }\n    if (allowDeactivation === false) {\n      labelFieldRef.current?.focus();\n    }\n  };\n\n  const handleMouseDown = (e: MouseEvent) => {\n    viewDispatch?.({ type: \"mousedown\" }, e);\n  };\n\n  const toolbarItems: ReactElement[] = [];\n  const postTitleContributedItems: ReactElement[] = [];\n  const actionButtons: ReactElement[] = [];\n\n  contributions?.forEach((contribution, i) => {\n    switch (contribution.location) {\n      case \"pre-title\":\n        toolbarItems.push(cloneElement(contribution.content, { key: i }));\n        break;\n      default:\n        postTitleContributedItems.push(\n          cloneElement(contribution.content, { key: i })\n        );\n    }\n  });\n\n  title &&\n    toolbarItems.push(\n      <EditableLabel\n        className={`${classBase}-title`}\n        editing={editing}\n        key=\"title\"\n        value={value}\n        onChange={setValue}\n        onMouseDownCapture={handleTitleMouseDown}\n        onEnterEditMode={handleEnterEditMode}\n        onExitEditMode={handleExitEditMode}\n        onKeyDown={handleTitleKeyDown}\n        ref={labelFieldRef}\n        tabIndex={0}\n      />\n    );\n\n  closeable &&\n    actionButtons.push(\n      <IconButton\n        icon=\"close\"\n        key=\"close\"\n        onClick={handleClose}\n        onMouseDown={handleButtonMouseDown}\n        variant=\"secondary\"\n      />\n    );\n\n  postTitleContributedItems.length > 0 &&\n    toolbarItems.push(\n      <div className=\"vuuTooltrayProxy\" data-align=\"end\" key=\"contributions\">\n        {postTitleContributedItems}\n      </div>\n    );\n\n  actionButtons.length > 0 &&\n    toolbarItems.push(\n      <div className=\"vuuTooltrayProxy\" data-align=\"end\" key=\"actions\">\n        {actionButtons}\n      </div>\n    );\n\n  return (\n    <div\n      className={cx(\"vuuToolbarProxy\", className)}\n      style={style}\n      onMouseDown={handleMouseDown}\n    >\n      {toolbarItems}\n      {/* \n      {collapsed === false ? (\n        <ActionButton\n          aria-label=\"Minimize View\"\n          actionId=\"minimize\"\n          iconName=\"minimize\"\n          onClick={handleAction}\n          onMouseDown={handleButtonMouseDown}\n        />\n      ) : null}\n      {collapsed ? (\n        <ActionButton\n          aria-label=\"Restore View\"\n          actionId=\"restore\"\n          iconName=\"double-chevron-right\"\n          onClick={handleAction}\n          onMouseDown={handleButtonMouseDown}\n        />\n      ) : null}\n      {expanded === false ? (\n        <ActionButton\n          aria-label=\"Maximize View\"\n          actionId=\"maximize\"\n          iconName=\"maximize\"\n          onClick={handleAction}\n          onMouseDown={handleButtonMouseDown}\n        />\n      ) : null}\n      {expanded ? (\n        <ActionButton\n          aria-label=\"Restore View\"\n          actionId=\"restore\"\n          iconName=\"restore\"\n          onClick={handleAction}\n          onMouseDown={handleButtonMouseDown}\n        />\n      ) : null}\n      {tearOut ? (\n        <ActionButton\n          aria-label=\"Tear out View\"\n          actionId=\"tearout\"\n          iconName=\"tear-out\"\n          onClick={handleAction}\n          onMouseDown={handleButtonMouseDown}\n        />\n      ) : null}\n      {closeable ? (\n        <Button\n          aria-label=\"close\"\n          data-icon\n          onClick={handleClose}\n          onMouseDown={handleButtonMouseDown}\n        />\n      ) : null} */}\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/esm/layout-provider/useLayoutDragDrop.js

@@ -2,6 +2,8 @@ import { useRef, useCallback } from 'react';
 import { Draggable } from '../drag-drop/Draggable.js';
 import 'react/jsx-runtime';
 import 'clsx';
+import '@salt-ds/styles';
+import '@salt-ds/window';
 import { followPath, resolvePath } from '../utils/pathUtils.js';
 import '../drag-drop/BoxModel.js';
 import { getIntrinsicSize } from '../layout-reducer/flexUtils.js';

package/esm/layout-provider/useLayoutDragDrop.js.map

@@ -1 +1 @@
-{"version":3,"file":"useLayoutDragDrop.js","sources":["../../src/layout-provider/useLayoutDragDrop.ts"],"sourcesContent":["import { MutableRefObject, ReactElement, useCallback, useRef } from \"react\";\nimport {\n  DragDropRect,\n  DragEndCallback,\n  Draggable,\n  DragInstructions,\n} from \"../drag-drop\";\nimport { DragStartAction } from \"../layout-reducer\";\nimport { getIntrinsicSize } from \"../layout-reducer/flexUtils\";\nimport { followPath, resolvePath } from \"../utils\";\nimport { LayoutProviderDispatch } from \"./LayoutProviderContext\";\n\nconst NO_INSTRUCTIONS = {} as DragInstructions;\nconst NO_OFFSETS: [number, number] = [0, 0];\n\ninterface CurrentDragAction extends Omit<DragStartAction, \"evt\" | \"type\"> {\n  dragContainerPath: string;\n}\n\ninterface DragOperation {\n  payload: ReactElement;\n  originalCSS: string;\n  dragRect: unknown;\n  dragInstructions: DragInstructions;\n  dragOffsets: [number, number];\n  targetPosition: { left: number; top: number };\n}\n\nconst getDragElement = (\n  rect: DragDropRect,\n  id: string,\n  dragElement?: HTMLElement\n): [HTMLElement, string, number, number] => {\n  const wrapper = document.createElement(\"div\");\n  wrapper.className = \"vuuSimpleDraggableWrapper\";\n  wrapper.classList.add(\n    \"vuuSimpleDraggableWrapper\",\n    \"salt-theme\",\n    \"salt-density-medium\"\n  );\n  wrapper.dataset.dragging = \"true\";\n\n  const div = dragElement ?? document.createElement(\"div\");\n  div.id = id;\n\n  wrapper.appendChild(div);\n  document.body.appendChild(wrapper);\n  const cssText = `top:${rect.top}px;left:${rect.left}px;width:${rect.width}px;height:${rect.height}px;`;\n  return [wrapper, cssText, rect.left, rect.top];\n};\n\nconst determineDragOffsets = (\n  draggedElement: HTMLElement\n): [number, number] => {\n  const { offsetParent } = draggedElement;\n  if (offsetParent === null) {\n    return NO_OFFSETS;\n  } else {\n    const { left: offsetLeft, top: offsetTop } =\n      offsetParent.getBoundingClientRect();\n    return [offsetLeft, offsetTop];\n  }\n};\n\nexport const useLayoutDragDrop = (\n  rootLayoutRef: MutableRefObject<ReactElement>,\n  dispatch: LayoutProviderDispatch,\n  pathToDropTarget?: string\n) => {\n  const dragActionRef = useRef<CurrentDragAction>();\n  const dragOperationRef = useRef<DragOperation>();\n  const draggableHTMLElementRef = useRef<HTMLElement>();\n\n  const handleDrag = useCallback((x, y) => {\n    if (dragOperationRef.current && draggableHTMLElementRef.current) {\n      const {\n        dragOffsets: [offsetX, offsetY],\n        targetPosition,\n      } = dragOperationRef.current;\n      const left = typeof x === \"number\" ? x - offsetX : targetPosition.left;\n      const top = typeof y === \"number\" ? y - offsetY : targetPosition.top;\n      if (left !== targetPosition.left || top !== targetPosition.top) {\n        dragOperationRef.current.targetPosition.left = left;\n        dragOperationRef.current.targetPosition.top = top;\n        draggableHTMLElementRef.current.style.top = top + \"px\";\n        draggableHTMLElementRef.current.style.left = left + \"px\";\n      }\n    }\n  }, []);\n\n  const handleDrop: DragEndCallback = useCallback(\n    (dropTarget) => {\n      if (dragOperationRef.current) {\n        const {\n          dragInstructions,\n          payload: draggedReactElement,\n          originalCSS,\n        } = dragOperationRef.current;\n\n        if (dropTarget) {\n          dispatch({\n            type: \"drag-drop\",\n            draggedReactElement,\n            dragInstructions,\n            dropTarget,\n          });\n        }\n\n        if (draggableHTMLElementRef.current) {\n          if (!dropTarget && dragInstructions.DriftHomeIfNoDropTarget) {\n            console.log(\"drift back to start\");\n            document.body.removeChild(draggableHTMLElementRef.current);\n          } else if (dragInstructions.RemoveDraggableOnDragEnd) {\n            document.body.removeChild(draggableHTMLElementRef.current);\n          } else {\n            draggableHTMLElementRef.current.style.cssText = originalCSS;\n            delete draggableHTMLElementRef.current.dataset.dragging;\n          }\n        }\n\n        dragActionRef.current = undefined;\n        dragOperationRef.current = undefined;\n        draggableHTMLElementRef.current = undefined;\n      }\n    },\n    [dispatch]\n  );\n\n  const handleDragStart = useCallback(\n    (evt: MouseEvent) => {\n      if (dragActionRef.current) {\n        const {\n          payload: component,\n          dragContainerPath,\n          dragElement,\n          dragRect,\n          instructions = NO_INSTRUCTIONS,\n          path,\n        } = dragActionRef.current;\n        const { current: rootLayout } = rootLayoutRef;\n        const dragPos = { x: evt.clientX, y: evt.clientY };\n        const dragPayload = component ?? followPath(rootLayout, path, true);\n        const { id: dragPayloadId } = dragPayload.props;\n        const intrinsicSize = getIntrinsicSize(dragPayload);\n        let originalCSS = \"\",\n          dragCSS = \"\",\n          dragTransform = \"\";\n\n        let dragStartLeft = -1;\n        let dragStartTop = -1;\n        let dragOffsets: [number, number] = NO_OFFSETS;\n\n        let element = document.getElementById(dragPayloadId);\n\n        if (element === null) {\n          [element, dragCSS, dragStartLeft, dragStartTop] = getDragElement(\n            dragRect,\n            dragPayloadId,\n            dragElement\n          );\n        } else {\n          dragOffsets = determineDragOffsets(element);\n          const [offsetLeft, offsetTop] = dragOffsets;\n          const { width, height, left, top } = element.getBoundingClientRect();\n          dragStartLeft = left - offsetLeft;\n          dragStartTop = top - offsetTop;\n          dragCSS = `width:${width}px;height:${height}px;left:${dragStartLeft}px;top:${dragStartTop}px;z-index: 100;background-color:#ccc;opacity: 0.6;`;\n          element.dataset.dragging = \"true\";\n          originalCSS = element.style.cssText;\n        }\n\n        dragTransform = Draggable.initDrag(\n          rootLayoutRef.current,\n          dragContainerPath,\n          dragRect,\n          dragPos,\n          {\n            drag: handleDrag,\n            drop: handleDrop,\n          },\n          intrinsicSize\n          // dropTargets\n        );\n\n        element.style.cssText = dragCSS + dragTransform;\n        draggableHTMLElementRef.current = element;\n\n        dragOperationRef.current = {\n          payload: dragPayload,\n          originalCSS,\n          dragRect,\n          dragOffsets,\n          dragInstructions: instructions,\n          targetPosition: { left: dragStartLeft, top: dragStartTop },\n        };\n      }\n    },\n    [handleDrag, handleDrop, rootLayoutRef]\n  );\n\n  const prepareToDrag = useCallback(\n    (action: DragStartAction) => {\n      const { evt, ...options } = action;\n      dragActionRef.current = {\n        ...options,\n        dragContainerPath: resolvePath(rootLayoutRef.current, pathToDropTarget),\n      };\n      Draggable.handleMousedown(evt, handleDragStart, options.instructions);\n    },\n    [handleDragStart, pathToDropTarget, rootLayoutRef]\n  );\n\n  return prepareToDrag;\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useLayoutDragDrop.js","sources":["../../src/layout-provider/useLayoutDragDrop.ts"],"sourcesContent":["import { MutableRefObject, ReactElement, useCallback, useRef } from \"react\";\nimport {\n  DragDropRect,\n  DragEndCallback,\n  Draggable,\n  DragInstructions,\n} from \"../drag-drop\";\nimport { DragStartAction } from \"../layout-reducer\";\nimport { getIntrinsicSize } from \"../layout-reducer/flexUtils\";\nimport { followPath, resolvePath } from \"../utils\";\nimport { LayoutProviderDispatch } from \"./LayoutProviderContext\";\n\nconst NO_INSTRUCTIONS = {} as DragInstructions;\nconst NO_OFFSETS: [number, number] = [0, 0];\n\ninterface CurrentDragAction extends Omit<DragStartAction, \"evt\" | \"type\"> {\n  dragContainerPath: string;\n}\n\ninterface DragOperation {\n  payload: ReactElement;\n  originalCSS: string;\n  dragRect: unknown;\n  dragInstructions: DragInstructions;\n  dragOffsets: [number, number];\n  targetPosition: { left: number; top: number };\n}\n\nconst getDragElement = (\n  rect: DragDropRect,\n  id: string,\n  dragElement?: HTMLElement\n): [HTMLElement, string, number, number] => {\n  const wrapper = document.createElement(\"div\");\n  wrapper.className = \"vuuSimpleDraggableWrapper\";\n  wrapper.classList.add(\n    \"vuuSimpleDraggableWrapper\",\n    \"salt-theme\",\n    \"salt-density-medium\"\n  );\n  wrapper.dataset.dragging = \"true\";\n\n  const div = dragElement ?? document.createElement(\"div\");\n  div.id = id;\n\n  wrapper.appendChild(div);\n  document.body.appendChild(wrapper);\n  const cssText = `top:${rect.top}px;left:${rect.left}px;width:${rect.width}px;height:${rect.height}px;`;\n  return [wrapper, cssText, rect.left, rect.top];\n};\n\nconst determineDragOffsets = (\n  draggedElement: HTMLElement\n): [number, number] => {\n  const { offsetParent } = draggedElement;\n  if (offsetParent === null) {\n    return NO_OFFSETS;\n  } else {\n    const { left: offsetLeft, top: offsetTop } =\n      offsetParent.getBoundingClientRect();\n    return [offsetLeft, offsetTop];\n  }\n};\n\nexport const useLayoutDragDrop = (\n  rootLayoutRef: MutableRefObject<ReactElement>,\n  dispatch: LayoutProviderDispatch,\n  pathToDropTarget?: string\n) => {\n  const dragActionRef = useRef<CurrentDragAction>();\n  const dragOperationRef = useRef<DragOperation>();\n  const draggableHTMLElementRef = useRef<HTMLElement>();\n\n  const handleDrag = useCallback((x, y) => {\n    if (dragOperationRef.current && draggableHTMLElementRef.current) {\n      const {\n        dragOffsets: [offsetX, offsetY],\n        targetPosition,\n      } = dragOperationRef.current;\n      const left = typeof x === \"number\" ? x - offsetX : targetPosition.left;\n      const top = typeof y === \"number\" ? y - offsetY : targetPosition.top;\n      if (left !== targetPosition.left || top !== targetPosition.top) {\n        dragOperationRef.current.targetPosition.left = left;\n        dragOperationRef.current.targetPosition.top = top;\n        draggableHTMLElementRef.current.style.top = top + \"px\";\n        draggableHTMLElementRef.current.style.left = left + \"px\";\n      }\n    }\n  }, []);\n\n  const handleDrop: DragEndCallback = useCallback(\n    (dropTarget) => {\n      if (dragOperationRef.current) {\n        const {\n          dragInstructions,\n          payload: draggedReactElement,\n          originalCSS,\n        } = dragOperationRef.current;\n\n        if (dropTarget) {\n          dispatch({\n            type: \"drag-drop\",\n            draggedReactElement,\n            dragInstructions,\n            dropTarget,\n          });\n        }\n\n        if (draggableHTMLElementRef.current) {\n          if (!dropTarget && dragInstructions.DriftHomeIfNoDropTarget) {\n            console.log(\"drift back to start\");\n            document.body.removeChild(draggableHTMLElementRef.current);\n          } else if (dragInstructions.RemoveDraggableOnDragEnd) {\n            document.body.removeChild(draggableHTMLElementRef.current);\n          } else {\n            draggableHTMLElementRef.current.style.cssText = originalCSS;\n            delete draggableHTMLElementRef.current.dataset.dragging;\n          }\n        }\n\n        dragActionRef.current = undefined;\n        dragOperationRef.current = undefined;\n        draggableHTMLElementRef.current = undefined;\n      }\n    },\n    [dispatch]\n  );\n\n  const handleDragStart = useCallback(\n    (evt: MouseEvent) => {\n      if (dragActionRef.current) {\n        const {\n          payload: component,\n          dragContainerPath,\n          dragElement,\n          dragRect,\n          instructions = NO_INSTRUCTIONS,\n          path,\n        } = dragActionRef.current;\n        const { current: rootLayout } = rootLayoutRef;\n        const dragPos = { x: evt.clientX, y: evt.clientY };\n        const dragPayload = component ?? followPath(rootLayout, path, true);\n        const { id: dragPayloadId } = dragPayload.props;\n        const intrinsicSize = getIntrinsicSize(dragPayload);\n        let originalCSS = \"\",\n          dragCSS = \"\",\n          dragTransform = \"\";\n\n        let dragStartLeft = -1;\n        let dragStartTop = -1;\n        let dragOffsets: [number, number] = NO_OFFSETS;\n\n        let element = document.getElementById(dragPayloadId);\n\n        if (element === null) {\n          [element, dragCSS, dragStartLeft, dragStartTop] = getDragElement(\n            dragRect,\n            dragPayloadId,\n            dragElement\n          );\n        } else {\n          dragOffsets = determineDragOffsets(element);\n          const [offsetLeft, offsetTop] = dragOffsets;\n          const { width, height, left, top } = element.getBoundingClientRect();\n          dragStartLeft = left - offsetLeft;\n          dragStartTop = top - offsetTop;\n          dragCSS = `width:${width}px;height:${height}px;left:${dragStartLeft}px;top:${dragStartTop}px;z-index: 100;background-color:#ccc;opacity: 0.6;`;\n          element.dataset.dragging = \"true\";\n          originalCSS = element.style.cssText;\n        }\n\n        dragTransform = Draggable.initDrag(\n          rootLayoutRef.current,\n          dragContainerPath,\n          dragRect,\n          dragPos,\n          {\n            drag: handleDrag,\n            drop: handleDrop,\n          },\n          intrinsicSize\n          // dropTargets\n        );\n\n        element.style.cssText = dragCSS + dragTransform;\n        draggableHTMLElementRef.current = element;\n\n        dragOperationRef.current = {\n          payload: dragPayload,\n          originalCSS,\n          dragRect,\n          dragOffsets,\n          dragInstructions: instructions,\n          targetPosition: { left: dragStartLeft, top: dragStartTop },\n        };\n      }\n    },\n    [handleDrag, handleDrop, rootLayoutRef]\n  );\n\n  const prepareToDrag = useCallback(\n    (action: DragStartAction) => {\n      const { evt, ...options } = action;\n      dragActionRef.current = {\n        ...options,\n        dragContainerPath: resolvePath(rootLayoutRef.current, pathToDropTarget),\n      };\n      Draggable.handleMousedown(evt, handleDragStart, options.instructions);\n    },\n    [handleDragStart, pathToDropTarget, rootLayoutRef]\n  );\n\n  return prepareToDrag;\n};\n"],"names":[],"mappings":"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"}

package/esm/palette/Palette.css.js

@@ -0,0 +1,4 @@
+var paletteCss = ".vuuPalette {\n  --vuuList-borderStyle: none;\n}\n\n.vuuPalette-horizontal {\n  align-items: center;\n  display: flex;\n}\n\n.vuuPaletteItem {\n  --vuu-icon-color: var(--salt-content-primary-foreground);\n  --vuu-icon-left: 0;\n  --vuu-icon-size: 16px;\n  --vuu-icon-top: 11px;\n  --list-item-text-padding: 0 0 0 calc(var(--salt-size-unit) * 3);\n  border-bottom: solid 1px var(--salt-separable-tertiary-borderColor);\n  padding-left: 12px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n.vuuSimpleDraggableWrapper > .vuuPaletteItem {\n  --vuu-icon-color: var(--salt-selectable-foreground);\n\n}\n\n.salt-theme .vuuPaletteItem {\n  font-size: 11px;\n  font-weight: normal;\n\n}\n\n\n";
+
+export { paletteCss as default };
+//# sourceMappingURL=Palette.css.js.map

package/esm/palette/Palette.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Palette.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/esm/palette/Palette.js

@@ -2,11 +2,14 @@ import { jsx } from 'react/jsx-runtime';
 import { uuid } from '@vuu-ui/vuu-utils';
 import { ListItem, List } from '@vuu-ui/vuu-ui-controls';
 import cx from 'clsx';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import { memo, cloneElement } from 'react';
 import { useLayoutProviderDispatch } from '../layout-provider/LayoutProvider.js';
 import '../layout-provider/LayoutProviderContext.js';
 import { View as MemoView } from '../layout-view/View.js';
 import { registerComponent } from '../registry/ComponentRegistry.js';
+import paletteCss from './Palette.css.js';
 
 const clonePaletteItem = (paletteItem) => {
   const dolly = paletteItem.cloneNode(true);
@@ -24,6 +27,12 @@ const PaletteItem = memo(
     closeable,
     ...props
   }) => {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "vuu-palette",
+      css: paletteCss,
+      window: targetWindow
+    });
     return /* @__PURE__ */ jsx(
       ListItem,
       {

package/esm/palette/Palette.js.map

@@ -1 +1 @@
-{"version":3,"file":"Palette.js","sources":["../../src/palette/Palette.tsx"],"sourcesContent":["import { uuid } from \"@vuu-ui/vuu-utils\";\nimport {\n  List,\n  ListItem,\n  ListItemProps,\n  ListProps,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport cx from \"clsx\";\nimport {\n  cloneElement,\n  HTMLAttributes,\n  memo,\n  MouseEvent,\n  ReactElement,\n} from \"react\";\nimport { useLayoutProviderDispatch } from \"../layout-provider\";\nimport { View, ViewProps } from \"../layout-view\";\nimport { registerComponent } from \"../registry/ComponentRegistry\";\n\nimport \"./Palette.css\";\n\nconst clonePaletteItem = (paletteItem: HTMLElement) => {\n  const dolly = paletteItem.cloneNode(true) as HTMLElement;\n  dolly.id = \"\";\n  delete dolly.dataset.idx;\n  return dolly;\n};\n\nexport interface PaletteItemProps extends ListItemProps {\n  children: ReactElement;\n  closeable?: boolean;\n  header?: boolean;\n  idx?: number;\n  resize?: \"defer\";\n  resizeable?: boolean;\n}\n\nexport const PaletteItem = memo(\n  ({\n    className,\n    children: component,\n    idx,\n    resizeable,\n    header,\n    closeable,\n    ...props\n  }: PaletteItemProps) => {\n    return (\n      <ListItem\n        className={cx(\"vuuPaletteItem\", className)}\n        data-draggable\n        data-icon=\"draggable\"\n        {...props}\n      />\n    );\n  }\n);\n\nPaletteItem.displayName = \"PaletteItem\";\n\nexport interface PaletteProps\n  extends Omit<\n    HTMLAttributes<HTMLDivElement>,\n    \"onDragStart\" | \"onDrop\" | \"onSelect\"\n  > {\n  ListProps?: Partial<ListProps>;\n  ViewProps?: Partial<ViewProps>;\n  children: ReactElement[];\n  itemHeight?: number;\n  orientation: \"horizontal\" | \"vertical\";\n  selection?: string;\n}\n\nexport const Palette = ({\n  ListProps,\n  ViewProps,\n  children,\n  className,\n  itemHeight = 41,\n  orientation = \"horizontal\",\n  ...props\n}: PaletteProps) => {\n  const dispatch = useLayoutProviderDispatch();\n  const classBase = \"vuuPalette\";\n\n  function handleMouseDown(evt: MouseEvent) {\n    const target = evt.target as HTMLElement;\n    const listItemElement = target.closest(\".vuuPaletteItem\") as HTMLElement;\n    const idx = parseInt(listItemElement.dataset?.index ?? \"-1\");\n    const {\n      props: { caption, children: payload, template, ...props },\n    } = children[idx];\n    const { ViewProps: componentViewProps } = payload.props;\n    const { height, left, top, width } =\n      listItemElement.getBoundingClientRect();\n    const id = uuid();\n    const identifiers = { id, key: id };\n    const component = template ? (\n      payload\n    ) : (\n      <View\n        {...ViewProps}\n        {...identifiers}\n        {...props}\n        {...componentViewProps}\n        title={props.label}\n      >\n        {payload}\n      </View>\n    );\n\n    dispatch({\n      dragRect: {\n        left,\n        top,\n        right: left + width,\n        bottom: top + 150,\n        width,\n        height,\n      },\n      dragElement: clonePaletteItem(listItemElement),\n      evt: evt.nativeEvent,\n      instructions: {\n        DoNotRemove: true,\n        DoNotTransform: true,\n        DriftHomeIfNoDropTarget: true,\n        RemoveDraggableOnDragEnd: true,\n        dragThreshold: 10,\n      },\n      path: \"*\",\n      payload: component,\n      type: \"drag-start\",\n    });\n  }\n\n  return (\n    <List\n      {...ListProps}\n      {...props}\n      className={cx(classBase, className, `${classBase}-${orientation}`)}\n      itemHeight={itemHeight}\n      selected={null}\n    >\n      {children.map((child, idx) =>\n        child.type === PaletteItem\n          ? cloneElement(child, {\n              key: idx,\n              onMouseDown: handleMouseDown,\n            })\n          : child\n      )}\n    </List>\n  );\n};\n\nregisterComponent(\"Palette\", Palette, \"view\");\n"],"names":["ListProps","ViewProps","props","View"],"mappings":"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"}
+{"version":3,"file":"Palette.js","sources":["../../src/palette/Palette.tsx"],"sourcesContent":["import { uuid } from \"@vuu-ui/vuu-utils\";\nimport {\n  List,\n  ListItem,\n  ListItemProps,\n  ListProps,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  cloneElement,\n  HTMLAttributes,\n  memo,\n  MouseEvent,\n  ReactElement,\n} from \"react\";\nimport { useLayoutProviderDispatch } from \"../layout-provider\";\nimport { View, ViewProps } from \"../layout-view\";\nimport { registerComponent } from \"../registry/ComponentRegistry\";\n\nimport paletteCss from \"./Palette.css\";\n\nconst clonePaletteItem = (paletteItem: HTMLElement) => {\n  const dolly = paletteItem.cloneNode(true) as HTMLElement;\n  dolly.id = \"\";\n  delete dolly.dataset.idx;\n  return dolly;\n};\n\nexport interface PaletteItemProps extends ListItemProps {\n  children: ReactElement;\n  closeable?: boolean;\n  header?: boolean;\n  idx?: number;\n  resize?: \"defer\";\n  resizeable?: boolean;\n}\n\nexport const PaletteItem = memo(\n  ({\n    className,\n    children: component,\n    idx,\n    resizeable,\n    header,\n    closeable,\n    ...props\n  }: PaletteItemProps) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-palette\",\n      css: paletteCss,\n      window: targetWindow,\n    });\n\n    return (\n      <ListItem\n        className={cx(\"vuuPaletteItem\", className)}\n        data-draggable\n        data-icon=\"draggable\"\n        {...props}\n      />\n    );\n  }\n);\n\nPaletteItem.displayName = \"PaletteItem\";\n\nexport interface PaletteProps\n  extends Omit<\n    HTMLAttributes<HTMLDivElement>,\n    \"onDragStart\" | \"onDrop\" | \"onSelect\"\n  > {\n  ListProps?: Partial<ListProps>;\n  ViewProps?: Partial<ViewProps>;\n  children: ReactElement[];\n  itemHeight?: number;\n  orientation: \"horizontal\" | \"vertical\";\n  selection?: string;\n}\n\nexport const Palette = ({\n  ListProps,\n  ViewProps,\n  children,\n  className,\n  itemHeight = 41,\n  orientation = \"horizontal\",\n  ...props\n}: PaletteProps) => {\n  const dispatch = useLayoutProviderDispatch();\n  const classBase = \"vuuPalette\";\n\n  function handleMouseDown(evt: MouseEvent) {\n    const target = evt.target as HTMLElement;\n    const listItemElement = target.closest(\".vuuPaletteItem\") as HTMLElement;\n    const idx = parseInt(listItemElement.dataset?.index ?? \"-1\");\n    const {\n      props: { caption, children: payload, template, ...props },\n    } = children[idx];\n    const { ViewProps: componentViewProps } = payload.props;\n    const { height, left, top, width } =\n      listItemElement.getBoundingClientRect();\n    const id = uuid();\n    const identifiers = { id, key: id };\n    const component = template ? (\n      payload\n    ) : (\n      <View\n        {...ViewProps}\n        {...identifiers}\n        {...props}\n        {...componentViewProps}\n        title={props.label}\n      >\n        {payload}\n      </View>\n    );\n\n    dispatch({\n      dragRect: {\n        left,\n        top,\n        right: left + width,\n        bottom: top + 150,\n        width,\n        height,\n      },\n      dragElement: clonePaletteItem(listItemElement),\n      evt: evt.nativeEvent,\n      instructions: {\n        DoNotRemove: true,\n        DoNotTransform: true,\n        DriftHomeIfNoDropTarget: true,\n        RemoveDraggableOnDragEnd: true,\n        dragThreshold: 10,\n      },\n      path: \"*\",\n      payload: component,\n      type: \"drag-start\",\n    });\n  }\n\n  return (\n    <List\n      {...ListProps}\n      {...props}\n      className={cx(classBase, className, `${classBase}-${orientation}`)}\n      itemHeight={itemHeight}\n      selected={null}\n    >\n      {children.map((child, idx) =>\n        child.type === PaletteItem\n          ? cloneElement(child, {\n              key: idx,\n              onMouseDown: handleMouseDown,\n            })\n          : child\n      )}\n    </List>\n  );\n};\n\nregisterComponent(\"Palette\", Palette, \"view\");\n"],"names":["ListProps","ViewProps","props","View"],"mappings":"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"}

package/esm/placeholder/LayoutStartPanel.css.js

@@ -0,0 +1,4 @@
+var layoutStartPanelCss = ".vuuLayoutStartPanel {\n    align-items: center;\n    flex: 0 0 auto !important;\n    display: flex;\n    flex-direction: column;\n    font-weight: 700;\n    gap: 12px;\n}\n\n.vuuLayoutStartPanel-title {\n    color: var(--vuu-color-gray-80);\n    font-size: 28px;\n    line-height: 1.5;\n    text-align: center;\n}\n\n.vuuLayoutStartPanel-text {\n    color: var(--vuu-color-gray-50);\n    font-size: 18px;\n    line-height: 1.5;\n    max-width: 460px;\n}\n\n.vuuLayoutStartPanel-addButton {\n    --vuu-icon-size: 20px;\n    --saltButton-borderRadius: 28px !important;\n    --saltButton-height: 56px;\n    --saltButton-width: 56px;\n    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);\n}";
+
+export { layoutStartPanelCss as default };
+//# sourceMappingURL=LayoutStartPanel.css.js.map

package/esm/placeholder/LayoutStartPanel.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutStartPanel.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/esm/placeholder/LayoutStartPanel.js

@@ -1,5 +1,7 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { Button } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import { useState, useMemo } from 'react';
 import '@vuu-ui/vuu-utils';
 import '../layout-provider/LayoutProviderContext.js';
@@ -7,9 +9,16 @@ import '../drag-drop/Draggable.js';
 import 'clsx';
 import '../drag-drop/BoxModel.js';
 import { useViewContext } from '../layout-view-actions/ViewContext.js';
+import layoutStartPanelCss from './LayoutStartPanel.css.js';
 
 const classBase = "vuuLayoutStartPanel";
 const LayoutStartPanel = (htmlAttributes) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-layout-start-panel",
+    css: layoutStartPanelCss,
+    window: targetWindow
+  });
   const { dispatch, path } = useViewContext();
   const [displayState, setDisplayState] = useState();
   useMemo(() => {

package/esm/placeholder/LayoutStartPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutStartPanel.js","sources":["../../src/placeholder/LayoutStartPanel.tsx"],"sourcesContent":["import { Button } from \"@salt-ds/core\";\nimport { HTMLAttributes, useMemo, useState } from \"react\";\nimport { useViewContext, QueryReponse } from \"../layout-view-actions\";\n\nimport \"./LayoutStartPanel.css\";\n\nconst classBase = \"vuuLayoutStartPanel\";\n\nexport interface LayoutStartPanelProps extends HTMLAttributes<HTMLDivElement> {\n  label?: string;\n}\n\nexport const LayoutStartPanel = (htmlAttributes: LayoutStartPanelProps) => {\n  const { dispatch, path } = useViewContext();\n  const [displayState, setDisplayState] = useState<\n    \"initial\" | \"nested\" | undefined\n  >();\n\n  useMemo(() => {\n    dispatch?.({\n      type: \"query\",\n      path,\n      query: \"PARENT_CONTAINER\",\n    }).then((response) => {\n      if ((response as QueryReponse)?.parentContainerId === \"main-tabs\") {\n        setDisplayState(\"initial\");\n      } else {\n        setDisplayState(\"nested\");\n      }\n    });\n  }, [dispatch, path]);\n\n  if (displayState === undefined) {\n    return null;\n  }\n\n  const showInitialState = displayState === \"initial\";\n\n  return (\n    <div {...htmlAttributes} className={classBase}>\n      {showInitialState ? (\n        <>\n          <header className={`${classBase}-title`}>\n            Start by adding a table\n          </header>\n          <div className={`${classBase}-text`}>\n            To add a table, drag any of the Vuu Tables to this area or click the\n            button below\n          </div>\n        </>\n      ) : null}\n      <Button\n        className={`${classBase}-addButton`}\n        data-icon=\"add\"\n        variant=\"cta\"\n      />\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAMA,MAAM,SAAY,GAAA,qBAAA,CAAA;AAML,MAAA,gBAAA,GAAmB,CAAC,cAA0C,KAAA;AACzE,EAAA,MAAM,EAAE,QAAA,EAAU,IAAK,EAAA,GAAI,cAAe,EAAA,CAAA;AAC1C,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,QAEtC,EAAA,CAAA;AAEF,EAAA,OAAA,CAAQ,MAAM;AACZ,IAAW,QAAA,GAAA;AAAA,MACT,IAAM,EAAA,OAAA;AAAA,MACN,IAAA;AAAA,MACA,KAAO,EAAA,kBAAA;AAAA,KACR,CAAA,CAAE,IAAK,CAAA,CAAC,QAAa,KAAA;AACpB,MAAK,IAAA,QAAA,EAA2B,sBAAsB,WAAa,EAAA;AACjE,QAAA,eAAA,CAAgB,SAAS,CAAA,CAAA;AAAA,OACpB,MAAA;AACL,QAAA,eAAA,CAAgB,QAAQ,CAAA,CAAA;AAAA,OAC1B;AAAA,KACD,CAAA,CAAA;AAAA,GACA,EAAA,CAAC,QAAU,EAAA,IAAI,CAAC,CAAA,CAAA;AAEnB,EAAA,IAAI,iBAAiB,KAAW,CAAA,EAAA;AAC9B,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,MAAM,mBAAmB,YAAiB,KAAA,SAAA,CAAA;AAE1C,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA,EAAK,GAAG,cAAA,EAAgB,WAAW,SACjC,EAAA,QAAA,EAAA;AAAA,IAAA,gBAAA,mBAEG,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,QAAO,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,UAAU,QAEzC,EAAA,yBAAA,EAAA,CAAA;AAAA,0BACC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,SAAS,QAGrC,EAAA,mFAAA,EAAA,CAAA;AAAA,KAAA,EACF,CACE,GAAA,IAAA;AAAA,oBACJ,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,GAAG,SAAS,CAAA,UAAA,CAAA;AAAA,QACvB,WAAU,EAAA,KAAA;AAAA,QACV,OAAQ,EAAA,KAAA;AAAA,OAAA;AAAA,KACV;AAAA,GACF,EAAA,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"LayoutStartPanel.js","sources":["../../src/placeholder/LayoutStartPanel.tsx"],"sourcesContent":["import { Button } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes, useMemo, useState } from \"react\";\nimport { useViewContext, QueryReponse } from \"../layout-view-actions\";\n\nimport layoutStartPanelCss from \"./LayoutStartPanel.css\";\n\nconst classBase = \"vuuLayoutStartPanel\";\n\nexport interface LayoutStartPanelProps extends HTMLAttributes<HTMLDivElement> {\n  label?: string;\n}\n\nexport const LayoutStartPanel = (htmlAttributes: LayoutStartPanelProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-layout-start-panel\",\n    css: layoutStartPanelCss,\n    window: targetWindow,\n  });\n\n  const { dispatch, path } = useViewContext();\n  const [displayState, setDisplayState] = useState<\n    \"initial\" | \"nested\" | undefined\n  >();\n\n  useMemo(() => {\n    dispatch?.({\n      type: \"query\",\n      path,\n      query: \"PARENT_CONTAINER\",\n    }).then((response) => {\n      if ((response as QueryReponse)?.parentContainerId === \"main-tabs\") {\n        setDisplayState(\"initial\");\n      } else {\n        setDisplayState(\"nested\");\n      }\n    });\n  }, [dispatch, path]);\n\n  if (displayState === undefined) {\n    return null;\n  }\n\n  const showInitialState = displayState === \"initial\";\n\n  return (\n    <div {...htmlAttributes} className={classBase}>\n      {showInitialState ? (\n        <>\n          <header className={`${classBase}-title`}>\n            Start by adding a table\n          </header>\n          <div className={`${classBase}-text`}>\n            To add a table, drag any of the Vuu Tables to this area or click the\n            button below\n          </div>\n        </>\n      ) : null}\n      <Button\n        className={`${classBase}-addButton`}\n        data-icon=\"add\"\n        variant=\"cta\"\n      />\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;AAQA,MAAM,SAAY,GAAA,qBAAA,CAAA;AAML,MAAA,gBAAA,GAAmB,CAAC,cAA0C,KAAA;AACzE,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAA,mBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,QAAA,EAAU,IAAK,EAAA,GAAI,cAAe,EAAA,CAAA;AAC1C,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,QAEtC,EAAA,CAAA;AAEF,EAAA,OAAA,CAAQ,MAAM;AACZ,IAAW,QAAA,GAAA;AAAA,MACT,IAAM,EAAA,OAAA;AAAA,MACN,IAAA;AAAA,MACA,KAAO,EAAA,kBAAA;AAAA,KACR,CAAA,CAAE,IAAK,CAAA,CAAC,QAAa,KAAA;AACpB,MAAK,IAAA,QAAA,EAA2B,sBAAsB,WAAa,EAAA;AACjE,QAAA,eAAA,CAAgB,SAAS,CAAA,CAAA;AAAA,OACpB,MAAA;AACL,QAAA,eAAA,CAAgB,QAAQ,CAAA,CAAA;AAAA,OAC1B;AAAA,KACD,CAAA,CAAA;AAAA,GACA,EAAA,CAAC,QAAU,EAAA,IAAI,CAAC,CAAA,CAAA;AAEnB,EAAA,IAAI,iBAAiB,KAAW,CAAA,EAAA;AAC9B,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,MAAM,mBAAmB,YAAiB,KAAA,SAAA,CAAA;AAE1C,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA,EAAK,GAAG,cAAA,EAAgB,WAAW,SACjC,EAAA,QAAA,EAAA;AAAA,IAAA,gBAAA,mBAEG,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,QAAO,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,UAAU,QAEzC,EAAA,yBAAA,EAAA,CAAA;AAAA,0BACC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,SAAS,QAGrC,EAAA,mFAAA,EAAA,CAAA;AAAA,KAAA,EACF,CACE,GAAA,IAAA;AAAA,oBACJ,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,GAAG,SAAS,CAAA,UAAA,CAAA;AAAA,QACvB,WAAU,EAAA,KAAA;AAAA,QACV,OAAQ,EAAA,KAAA;AAAA,OAAA;AAAA,KACV;AAAA,GACF,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/esm/placeholder/Placeholder.css.js

@@ -0,0 +1,4 @@
+var placeholderCss = ".vuuPlaceholder {\n  --vuuView-justify: center;\n  align-items: center;\n  display: flex;\n  flex-basis: 0;\n  flex-grow: 1;\n  flex-shrink: 1;\n}\n\n.vuuPlaceholder-nested {\n  background-color: red;\n}\n\n.vuuPlaceholder-shim {\n  flex-grow: 0;\n  flex-shrink: 0;\n}\n";
+
+export { placeholderCss as default };
+//# sourceMappingURL=Placeholder.css.js.map

package/esm/placeholder/Placeholder.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Placeholder.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/esm/placeholder/Placeholder.js

@@ -1,8 +1,11 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
 import cx from 'clsx';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import { registerComponent } from '../registry/ComponentRegistry.js';
 import { LayoutStartPanel } from './LayoutStartPanel.js';
 import { View as MemoView } from '../layout-view/View.js';
+import placeholderCss from './Placeholder.css.js';
 
 const classBase = "vuuPlaceholder";
 const PlaceholderCore = ({ showStartMenu = true }) => {
@@ -13,6 +16,12 @@ const Placeholder = ({
   showStartMenu,
   ...viewProps
 }) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-placeholder",
+    css: placeholderCss,
+    window: targetWindow
+  });
   const className = cx(classBase, classNameProp);
   return /* @__PURE__ */ jsx(MemoView, { ...viewProps, className, "data-placeholder": true, resizeable: true, children: /* @__PURE__ */ jsx(PlaceholderCore, { showStartMenu }) });
 };

package/esm/placeholder/Placeholder.js.map

@@ -1 +1 @@
-{"version":3,"file":"Placeholder.js","sources":["../../src/placeholder/Placeholder.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { registerComponent } from \"../registry/ComponentRegistry\";\nimport { LayoutStartPanel } from \"./LayoutStartPanel\";\nimport { View, ViewProps } from \"../layout-view\";\n\nimport \"./Placeholder.css\";\n\nconst classBase = \"vuuPlaceholder\";\n\nexport interface PlaceholderProps extends ViewProps {\n  closeable?: boolean;\n  flexFill?: boolean;\n  resizeable?: boolean;\n  showStartMenu?: boolean;\n  /**\n   * shim is only when we're dealing with intrinsically sized children, which is never\n   * in an actual application. Intrinsic sizing is still experimental.\n   */\n  shim?: boolean;\n}\n\nconst PlaceholderCore = ({ showStartMenu = true }: PlaceholderProps) => {\n  return <>{showStartMenu ? <LayoutStartPanel /> : null}</>;\n};\n\nexport const Placeholder = ({\n  className: classNameProp,\n  showStartMenu,\n  ...viewProps\n}: PlaceholderProps) => {\n  const className = cx(classBase, classNameProp);\n\n  return (\n    <View {...viewProps} className={className} data-placeholder resizeable>\n      <PlaceholderCore showStartMenu={showStartMenu} />\n    </View>\n  );\n};\n\nPlaceholder.displayName = \"Placeholder\";\nregisterComponent(\"Placeholder\", Placeholder);\n"],"names":["View"],"mappings":";;;;;;AAOA,MAAM,SAAY,GAAA,gBAAA,CAAA;AAclB,MAAM,eAAkB,GAAA,CAAC,EAAE,aAAA,GAAgB,MAA6B,KAAA;AACtE,EAAA,uBAAU,GAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA,aAAA,mBAAiB,GAAA,CAAA,gBAAA,EAAA,EAAiB,IAAK,IAAK,EAAA,CAAA,CAAA;AACxD,CAAA,CAAA;AAEO,MAAM,cAAc,CAAC;AAAA,EAC1B,SAAW,EAAA,aAAA;AAAA,EACX,aAAA;AAAA,EACA,GAAG,SAAA;AACL,CAAwB,KAAA;AACtB,EAAM,MAAA,SAAA,GAAY,EAAG,CAAA,SAAA,EAAW,aAAa,CAAA,CAAA;AAE7C,EAAA,uBACG,GAAA,CAAAA,QAAA,EAAA,EAAM,GAAG,SAAA,EAAW,SAAsB,EAAA,kBAAA,EAAgB,IAAC,EAAA,UAAA,EAAU,IACpE,EAAA,QAAA,kBAAA,GAAA,CAAC,eAAgB,EAAA,EAAA,aAAA,EAA8B,CACjD,EAAA,CAAA,CAAA;AAEJ,EAAA;AAEA,WAAA,CAAY,WAAc,GAAA,aAAA,CAAA;AAC1B,iBAAA,CAAkB,eAAe,WAAW,CAAA;;;;"}
+{"version":3,"file":"Placeholder.js","sources":["../../src/placeholder/Placeholder.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { registerComponent } from \"../registry/ComponentRegistry\";\nimport { LayoutStartPanel } from \"./LayoutStartPanel\";\nimport { View, ViewProps } from \"../layout-view\";\n\nimport placeholderCss from \"./Placeholder.css\";\n\nconst classBase = \"vuuPlaceholder\";\n\nexport interface PlaceholderProps extends ViewProps {\n  closeable?: boolean;\n  flexFill?: boolean;\n  resizeable?: boolean;\n  showStartMenu?: boolean;\n  /**\n   * shim is only when we're dealing with intrinsically sized children, which is never\n   * in an actual application. Intrinsic sizing is still experimental.\n   */\n  shim?: boolean;\n}\n\nconst PlaceholderCore = ({ showStartMenu = true }: PlaceholderProps) => {\n  return <>{showStartMenu ? <LayoutStartPanel /> : null}</>;\n};\n\nexport const Placeholder = ({\n  className: classNameProp,\n  showStartMenu,\n  ...viewProps\n}: PlaceholderProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-placeholder\",\n    css: placeholderCss,\n    window: targetWindow,\n  });\n\n  const className = cx(classBase, classNameProp);\n\n  return (\n    <View {...viewProps} className={className} data-placeholder resizeable>\n      <PlaceholderCore showStartMenu={showStartMenu} />\n    </View>\n  );\n};\n\nPlaceholder.displayName = \"Placeholder\";\nregisterComponent(\"Placeholder\", Placeholder);\n"],"names":["View"],"mappings":";;;;;;;;;AASA,MAAM,SAAY,GAAA,gBAAA,CAAA;AAclB,MAAM,eAAkB,GAAA,CAAC,EAAE,aAAA,GAAgB,MAA6B,KAAA;AACtE,EAAA,uBAAU,GAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA,aAAA,mBAAiB,GAAA,CAAA,gBAAA,EAAA,EAAiB,IAAK,IAAK,EAAA,CAAA,CAAA;AACxD,CAAA,CAAA;AAEO,MAAM,cAAc,CAAC;AAAA,EAC1B,SAAW,EAAA,aAAA;AAAA,EACX,aAAA;AAAA,EACA,GAAG,SAAA;AACL,CAAwB,KAAA;AACtB,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAA,cAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,SAAA,GAAY,EAAG,CAAA,SAAA,EAAW,aAAa,CAAA,CAAA;AAE7C,EAAA,uBACG,GAAA,CAAAA,QAAA,EAAA,EAAM,GAAG,SAAA,EAAW,SAAsB,EAAA,kBAAA,EAAgB,IAAC,EAAA,UAAA,EAAU,IACpE,EAAA,QAAA,kBAAA,GAAA,CAAC,eAAgB,EAAA,EAAA,aAAA,EAA8B,CACjD,EAAA,CAAA,CAAA;AAEJ,EAAA;AAEA,WAAA,CAAY,WAAc,GAAA,aAAA,CAAA;AAC1B,iBAAA,CAAkB,eAAe,WAAW,CAAA;;;;"}

package/esm/stack/Stack.css.js

@@ -0,0 +1,4 @@
+var stackCss = ".vuuTabs {\n  display: flex;\n  box-sizing: border-box;\n  flex-direction: column;\n}\n\n.vuuTabs-horizontal {\n  --vuu-tabs-border-style: none solid none none;\n  flex-direction: row;\n}\n\n.vuuTabs .Toolbar:before {\n  left: 0;\n  width: 100%;\n  bottom: 0;\n  height: 1px;\n  content: '';\n  position: absolute;\n  background: var(--grey60);\n}\n\n.vuuTabs-tabPanel {\n  display: flex;\n  flex: 1; \n  flex-direction: column;\n}\n\n.vuuTabs-tabPanel > * {\n  flex: 1 1 auto;\n}\n\n.vuuTabHeader + .vuuView > .vuuHeader {\n  height: 0;\n  overflow: hidden;\n}\n\n.Layout-svg-button {\n  --spacing-medium: 5px;\n}\n";
+
+export { stackCss as default };
+//# sourceMappingURL=Stack.css.js.map

package/esm/stack/Stack.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/esm/stack/Stack.js

@@ -2,8 +2,11 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { Tabstrip, Tab } from '@vuu-ui/vuu-ui-controls';
 import { useId } from '@vuu-ui/vuu-utils';
 import cx from 'clsx';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import React, { forwardRef, useRef, useCallback } from 'react';
 import { getDefaultTabLabel } from '../layout-reducer/layoutUtils.js';
+import stackCss from './Stack.css.js';
 
 const classBase = "vuuTabs";
 const getDefaultTabIcon = () => void 0;
@@ -41,6 +44,12 @@ const Stack = forwardRef(function Stack2({
   showTabs = "top",
   style
 }, ref) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-stack",
+    css: stackCss,
+    window: targetWindow
+  });
   const id = useId(idProp);
   const tabLabels = useRef([]);
   const {

package/esm/stack/Stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stack.js","sources":["../../src/stack/Stack.tsx"],"sourcesContent":["import { Tab, Tabstrip, TabstripProps } from \"@vuu-ui/vuu-ui-controls\";\nimport { useId } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport React, {\n  ForwardedRef,\n  forwardRef,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useRef,\n} from \"react\";\nimport { getDefaultTabLabel } from \"../layout-reducer\";\nimport { StackProps } from \"./stackTypes\";\n\nimport \"./Stack.css\";\n\nconst classBase = \"vuuTabs\";\n\nconst getDefaultTabIcon = () => undefined;\n\nconst getChildElements = <T extends ReactElement = ReactElement>(\n  children: ReactNode\n): T[] => {\n  const elements: T[] = [];\n  React.Children.forEach(children, (child) => {\n    if (React.isValidElement(child)) {\n      elements.push(child as T);\n    } else {\n      console.warn(`Stack has unexpected child element type`);\n    }\n  });\n  return elements;\n};\n\nconst DefaultTabstripProps: Partial<TabstripProps> = {\n  allowAddTab: false,\n  allowCloseTab: false,\n  allowRenameTab: false,\n};\n\nexport const Stack = forwardRef(function Stack(\n  {\n    TabstripProps = DefaultTabstripProps,\n    active = 0,\n    children,\n    className: classNameProp,\n    getTabIcon = getDefaultTabIcon,\n    getTabLabel = getDefaultTabLabel,\n    id: idProp,\n    keyBoardActivation = \"manual\",\n    // onMouseDown,\n    onAddTab,\n    onMoveTab,\n    onTabClose,\n    onTabEdit,\n    onTabSelectionChanged,\n    showTabs = \"top\",\n    style,\n  }: StackProps,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  const id = useId(idProp);\n  const tabLabels = useRef<string[]>([]);\n  const {\n    allowCloseTab,\n    allowRenameTab,\n    className: tabstripClassName,\n  } = TabstripProps;\n\n  const handleExitEditMode = useCallback(\n    (\n      _oldText: string,\n      newText: string,\n      _allowDeactivation: boolean,\n      tabIndex: number\n    ) => {\n      onTabEdit?.(tabIndex, newText);\n    },\n    [onTabEdit]\n  );\n\n  const activeChild = () => {\n    //TODO need to inject an id if child does not have one, so we can\n    // establish the aria-controls relationship. In a Vuu layout, there\n    // will always be an id.\n    if (React.isValidElement(children)) {\n      return children;\n    }\n    if (Array.isArray(children)) {\n      return children[active] ?? null;\n    }\n    return null;\n  };\n\n  const renderTabs = () =>\n    getChildElements(children).map((child, idx) => {\n      const {\n        closeable = allowCloseTab,\n        id: childId = `${id}-${idx}`,\n        \"data-tab-location\": tabLocation,\n      } = child.props;\n      const label = getTabLabel(child, idx, tabLabels.current);\n      tabLabels.current.push(label);\n      return (\n        <Tab\n          ariaControls={childId}\n          data-icon={getTabIcon(child, idx)}\n          key={childId}\n          id={`${childId}-tab`}\n          index={idx}\n          label={label}\n          location={tabLocation}\n          closeable={closeable}\n          editable={allowRenameTab}\n        />\n      );\n    });\n\n  const child = activeChild();\n  const isHorizontal = showTabs === \"left\" || showTabs === \"right\";\n  const tabstripOrientation = isHorizontal ? \"vertical\" : \"horizontal\";\n\n  return (\n    <div\n      className={cx(classBase, classNameProp, {\n        [`${classBase}-horizontal`]: isHorizontal,\n      })}\n      style={style}\n      id={id}\n      ref={ref}\n    >\n      {showTabs ? (\n        <Tabstrip\n          {...TabstripProps}\n          activeTabIndex={\n            TabstripProps?.activeTabIndex ?? (child === null ? -1 : active)\n          }\n          allowDragDrop={TabstripProps.allowDragDrop !== false}\n          animateSelectionThumb\n          className={cx(\"vuuTabHeader\", tabstripClassName)}\n          aria-label=\"data tabs\"\n          keyBoardActivation={keyBoardActivation}\n          onActiveChange={onTabSelectionChanged}\n          onAddTab={onAddTab}\n          onCloseTab={onTabClose}\n          onExitEditMode={handleExitEditMode}\n          onMoveTab={onMoveTab}\n          orientation={tabstripOrientation}\n        >\n          {renderTabs()}\n        </Tabstrip>\n      ) : null}\n      <div\n        aria-labelledby={`${id}-${active}`}\n        className={`${classBase}-tabPanel`}\n        role=\"tabpanel\"\n      >\n        {child}\n      </div>\n    </div>\n  );\n});\nStack.displayName = \"Stack\";\n"],"names":["Stack","TabstripProps","child"],"mappings":";;;;;;;AAgBA,MAAM,SAAY,GAAA,SAAA,CAAA;AAElB,MAAM,oBAAoB,MAAM,KAAA,CAAA,CAAA;AAEhC,MAAM,gBAAA,GAAmB,CACvB,QACQ,KAAA;AACR,EAAA,MAAM,WAAgB,EAAC,CAAA;AACvB,EAAA,KAAA,CAAM,QAAS,CAAA,OAAA,CAAQ,QAAU,EAAA,CAAC,KAAU,KAAA;AAC1C,IAAI,IAAA,KAAA,CAAM,cAAe,CAAA,KAAK,CAAG,EAAA;AAC/B,MAAA,QAAA,CAAS,KAAK,KAAU,CAAA,CAAA;AAAA,KACnB,MAAA;AACL,MAAA,OAAA,CAAQ,KAAK,CAAyC,uCAAA,CAAA,CAAA,CAAA;AAAA,KACxD;AAAA,GACD,CAAA,CAAA;AACD,EAAO,OAAA,QAAA,CAAA;AACT,CAAA,CAAA;AAEA,MAAM,oBAA+C,GAAA;AAAA,EACnD,WAAa,EAAA,KAAA;AAAA,EACb,aAAe,EAAA,KAAA;AAAA,EACf,cAAgB,EAAA,KAAA;AAClB,CAAA,CAAA;AAEa,MAAA,KAAA,GAAQ,UAAW,CAAA,SAASA,MACvC,CAAA;AAAA,EACE,eAAAC,cAAgB,GAAA,oBAAA;AAAA,EAChB,MAAS,GAAA,CAAA;AAAA,EACT,QAAA;AAAA,EACA,SAAW,EAAA,aAAA;AAAA,EACX,UAAa,GAAA,iBAAA;AAAA,EACb,WAAc,GAAA,kBAAA;AAAA,EACd,EAAI,EAAA,MAAA;AAAA,EACJ,kBAAqB,GAAA,QAAA;AAAA;AAAA,EAErB,QAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,SAAA;AAAA,EACA,qBAAA;AAAA,EACA,QAAW,GAAA,KAAA;AAAA,EACX,KAAA;AACF,CAAA,EACA,GACA,EAAA;AACA,EAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA,CAAA;AACvB,EAAM,MAAA,SAAA,GAAY,MAAiB,CAAA,EAAE,CAAA,CAAA;AACrC,EAAM,MAAA;AAAA,IACJ,aAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAW,EAAA,iBAAA;AAAA,GACTA,GAAAA,cAAAA,CAAAA;AAEJ,EAAA,MAAM,kBAAqB,GAAA,WAAA;AAAA,IACzB,CACE,QAAA,EACA,OACA,EAAA,kBAAA,EACA,QACG,KAAA;AACH,MAAA,SAAA,GAAY,UAAU,OAAO,CAAA,CAAA;AAAA,KAC/B;AAAA,IACA,CAAC,SAAS,CAAA;AAAA,GACZ,CAAA;AAEA,EAAA,MAAM,cAAc,MAAM;AAIxB,IAAI,IAAA,KAAA,CAAM,cAAe,CAAA,QAAQ,CAAG,EAAA;AAClC,MAAO,OAAA,QAAA,CAAA;AAAA,KACT;AACA,IAAI,IAAA,KAAA,CAAM,OAAQ,CAAA,QAAQ,CAAG,EAAA;AAC3B,MAAO,OAAA,QAAA,CAAS,MAAM,CAAK,IAAA,IAAA,CAAA;AAAA,KAC7B;AACA,IAAO,OAAA,IAAA,CAAA;AAAA,GACT,CAAA;AAEA,EAAM,MAAA,UAAA,GAAa,MACjB,gBAAiB,CAAA,QAAQ,EAAE,GAAI,CAAA,CAACC,QAAO,GAAQ,KAAA;AAC7C,IAAM,MAAA;AAAA,MACJ,SAAY,GAAA,aAAA;AAAA,MACZ,EAAI,EAAA,OAAA,GAAU,CAAG,EAAA,EAAE,IAAI,GAAG,CAAA,CAAA;AAAA,MAC1B,mBAAqB,EAAA,WAAA;AAAA,QACnBA,MAAM,CAAA,KAAA,CAAA;AACV,IAAA,MAAM,KAAQ,GAAA,WAAA,CAAYA,MAAO,EAAA,GAAA,EAAK,UAAU,OAAO,CAAA,CAAA;AACvD,IAAU,SAAA,CAAA,OAAA,CAAQ,KAAK,KAAK,CAAA,CAAA;AAC5B,IACE,uBAAA,GAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,YAAc,EAAA,OAAA;AAAA,QACd,WAAA,EAAW,UAAWA,CAAAA,MAAAA,EAAO,GAAG,CAAA;AAAA,QAEhC,EAAA,EAAI,GAAG,OAAO,CAAA,IAAA,CAAA;AAAA,QACd,KAAO,EAAA,GAAA;AAAA,QACP,KAAA;AAAA,QACA,QAAU,EAAA,WAAA;AAAA,QACV,SAAA;AAAA,QACA,QAAU,EAAA,cAAA;AAAA,OAAA;AAAA,MANL,OAAA;AAAA,KAOP,CAAA;AAAA,GAEH,CAAA,CAAA;AAEH,EAAA,MAAM,QAAQ,WAAY,EAAA,CAAA;AAC1B,EAAM,MAAA,YAAA,GAAe,QAAa,KAAA,MAAA,IAAU,QAAa,KAAA,OAAA,CAAA;AACzD,EAAM,MAAA,mBAAA,GAAsB,eAAe,UAAa,GAAA,YAAA,CAAA;AAExD,EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,aAAe,EAAA;AAAA,QACtC,CAAC,CAAA,EAAG,SAAS,CAAA,WAAA,CAAa,GAAG,YAAA;AAAA,OAC9B,CAAA;AAAA,MACD,KAAA;AAAA,MACA,EAAA;AAAA,MACA,GAAA;AAAA,MAEC,QAAA,EAAA;AAAA,QACC,QAAA,mBAAA,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACE,GAAGD,cAAAA;AAAA,YACJ,cACEA,EAAAA,cAAAA,EAAe,cAAmB,KAAA,KAAA,KAAU,OAAO,CAAK,CAAA,GAAA,MAAA,CAAA;AAAA,YAE1D,aAAA,EAAeA,eAAc,aAAkB,KAAA,KAAA;AAAA,YAC/C,qBAAqB,EAAA,IAAA;AAAA,YACrB,SAAA,EAAW,EAAG,CAAA,cAAA,EAAgB,iBAAiB,CAAA;AAAA,YAC/C,YAAW,EAAA,WAAA;AAAA,YACX,kBAAA;AAAA,YACA,cAAgB,EAAA,qBAAA;AAAA,YAChB,QAAA;AAAA,YACA,UAAY,EAAA,UAAA;AAAA,YACZ,cAAgB,EAAA,kBAAA;AAAA,YAChB,SAAA;AAAA,YACA,WAAa,EAAA,mBAAA;AAAA,YAEZ,QAAW,EAAA,UAAA,EAAA;AAAA,WAAA;AAAA,SAEZ,GAAA,IAAA;AAAA,wBACJ,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,iBAAiB,EAAA,CAAA,EAAG,EAAE,CAAA,CAAA,EAAI,MAAM,CAAA,CAAA;AAAA,YAChC,SAAA,EAAW,GAAG,SAAS,CAAA,SAAA,CAAA;AAAA,YACvB,IAAK,EAAA,UAAA;AAAA,YAEJ,QAAA,EAAA,KAAA;AAAA,WAAA;AAAA,SACH;AAAA,OAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ,CAAC,EAAA;AACD,KAAA,CAAM,WAAc,GAAA,OAAA;;;;"}
+{"version":3,"file":"Stack.js","sources":["../../src/stack/Stack.tsx"],"sourcesContent":["import { Tab, Tabstrip, TabstripProps } from \"@vuu-ui/vuu-ui-controls\";\nimport { useId } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport React, {\n  ForwardedRef,\n  forwardRef,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useRef,\n} from \"react\";\nimport { getDefaultTabLabel } from \"../layout-reducer\";\nimport { StackProps } from \"./stackTypes\";\n\nimport stackCss from \"./Stack.css\";\n\nconst classBase = \"vuuTabs\";\n\nconst getDefaultTabIcon = () => undefined;\n\nconst getChildElements = <T extends ReactElement = ReactElement>(\n  children: ReactNode\n): T[] => {\n  const elements: T[] = [];\n  React.Children.forEach(children, (child) => {\n    if (React.isValidElement(child)) {\n      elements.push(child as T);\n    } else {\n      console.warn(`Stack has unexpected child element type`);\n    }\n  });\n  return elements;\n};\n\nconst DefaultTabstripProps: Partial<TabstripProps> = {\n  allowAddTab: false,\n  allowCloseTab: false,\n  allowRenameTab: false,\n};\n\nexport const Stack = forwardRef(function Stack(\n  {\n    TabstripProps = DefaultTabstripProps,\n    active = 0,\n    children,\n    className: classNameProp,\n    getTabIcon = getDefaultTabIcon,\n    getTabLabel = getDefaultTabLabel,\n    id: idProp,\n    keyBoardActivation = \"manual\",\n    // onMouseDown,\n    onAddTab,\n    onMoveTab,\n    onTabClose,\n    onTabEdit,\n    onTabSelectionChanged,\n    showTabs = \"top\",\n    style,\n  }: StackProps,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-stack\",\n    css: stackCss,\n    window: targetWindow,\n  });\n\n  const id = useId(idProp);\n  const tabLabels = useRef<string[]>([]);\n  const {\n    allowCloseTab,\n    allowRenameTab,\n    className: tabstripClassName,\n  } = TabstripProps;\n\n  const handleExitEditMode = useCallback(\n    (\n      _oldText: string,\n      newText: string,\n      _allowDeactivation: boolean,\n      tabIndex: number\n    ) => {\n      onTabEdit?.(tabIndex, newText);\n    },\n    [onTabEdit]\n  );\n\n  const activeChild = () => {\n    //TODO need to inject an id if child does not have one, so we can\n    // establish the aria-controls relationship. In a Vuu layout, there\n    // will always be an id.\n    if (React.isValidElement(children)) {\n      return children;\n    }\n    if (Array.isArray(children)) {\n      return children[active] ?? null;\n    }\n    return null;\n  };\n\n  const renderTabs = () =>\n    getChildElements(children).map((child, idx) => {\n      const {\n        closeable = allowCloseTab,\n        id: childId = `${id}-${idx}`,\n        \"data-tab-location\": tabLocation,\n      } = child.props;\n      const label = getTabLabel(child, idx, tabLabels.current);\n      tabLabels.current.push(label);\n      return (\n        <Tab\n          ariaControls={childId}\n          data-icon={getTabIcon(child, idx)}\n          key={childId}\n          id={`${childId}-tab`}\n          index={idx}\n          label={label}\n          location={tabLocation}\n          closeable={closeable}\n          editable={allowRenameTab}\n        />\n      );\n    });\n\n  const child = activeChild();\n  const isHorizontal = showTabs === \"left\" || showTabs === \"right\";\n  const tabstripOrientation = isHorizontal ? \"vertical\" : \"horizontal\";\n\n  return (\n    <div\n      className={cx(classBase, classNameProp, {\n        [`${classBase}-horizontal`]: isHorizontal,\n      })}\n      style={style}\n      id={id}\n      ref={ref}\n    >\n      {showTabs ? (\n        <Tabstrip\n          {...TabstripProps}\n          activeTabIndex={\n            TabstripProps?.activeTabIndex ?? (child === null ? -1 : active)\n          }\n          allowDragDrop={TabstripProps.allowDragDrop !== false}\n          animateSelectionThumb\n          className={cx(\"vuuTabHeader\", tabstripClassName)}\n          aria-label=\"data tabs\"\n          keyBoardActivation={keyBoardActivation}\n          onActiveChange={onTabSelectionChanged}\n          onAddTab={onAddTab}\n          onCloseTab={onTabClose}\n          onExitEditMode={handleExitEditMode}\n          onMoveTab={onMoveTab}\n          orientation={tabstripOrientation}\n        >\n          {renderTabs()}\n        </Tabstrip>\n      ) : null}\n      <div\n        aria-labelledby={`${id}-${active}`}\n        className={`${classBase}-tabPanel`}\n        role=\"tabpanel\"\n      >\n        {child}\n      </div>\n    </div>\n  );\n});\nStack.displayName = \"Stack\";\n"],"names":["Stack","TabstripProps","child"],"mappings":";;;;;;;;;;AAkBA,MAAM,SAAY,GAAA,SAAA,CAAA;AAElB,MAAM,oBAAoB,MAAM,KAAA,CAAA,CAAA;AAEhC,MAAM,gBAAA,GAAmB,CACvB,QACQ,KAAA;AACR,EAAA,MAAM,WAAgB,EAAC,CAAA;AACvB,EAAA,KAAA,CAAM,QAAS,CAAA,OAAA,CAAQ,QAAU,EAAA,CAAC,KAAU,KAAA;AAC1C,IAAI,IAAA,KAAA,CAAM,cAAe,CAAA,KAAK,CAAG,EAAA;AAC/B,MAAA,QAAA,CAAS,KAAK,KAAU,CAAA,CAAA;AAAA,KACnB,MAAA;AACL,MAAA,OAAA,CAAQ,KAAK,CAAyC,uCAAA,CAAA,CAAA,CAAA;AAAA,KACxD;AAAA,GACD,CAAA,CAAA;AACD,EAAO,OAAA,QAAA,CAAA;AACT,CAAA,CAAA;AAEA,MAAM,oBAA+C,GAAA;AAAA,EACnD,WAAa,EAAA,KAAA;AAAA,EACb,aAAe,EAAA,KAAA;AAAA,EACf,cAAgB,EAAA,KAAA;AAClB,CAAA,CAAA;AAEa,MAAA,KAAA,GAAQ,UAAW,CAAA,SAASA,MACvC,CAAA;AAAA,EACE,eAAAC,cAAgB,GAAA,oBAAA;AAAA,EAChB,MAAS,GAAA,CAAA;AAAA,EACT,QAAA;AAAA,EACA,SAAW,EAAA,aAAA;AAAA,EACX,UAAa,GAAA,iBAAA;AAAA,EACb,WAAc,GAAA,kBAAA;AAAA,EACd,EAAI,EAAA,MAAA;AAAA,EACJ,kBAAqB,GAAA,QAAA;AAAA;AAAA,EAErB,QAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,SAAA;AAAA,EACA,qBAAA;AAAA,EACA,QAAW,GAAA,KAAA;AAAA,EACX,KAAA;AACF,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,WAAA;AAAA,IACR,GAAK,EAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA,CAAA;AACvB,EAAM,MAAA,SAAA,GAAY,MAAiB,CAAA,EAAE,CAAA,CAAA;AACrC,EAAM,MAAA;AAAA,IACJ,aAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAW,EAAA,iBAAA;AAAA,GACTA,GAAAA,cAAAA,CAAAA;AAEJ,EAAA,MAAM,kBAAqB,GAAA,WAAA;AAAA,IACzB,CACE,QAAA,EACA,OACA,EAAA,kBAAA,EACA,QACG,KAAA;AACH,MAAA,SAAA,GAAY,UAAU,OAAO,CAAA,CAAA;AAAA,KAC/B;AAAA,IACA,CAAC,SAAS,CAAA;AAAA,GACZ,CAAA;AAEA,EAAA,MAAM,cAAc,MAAM;AAIxB,IAAI,IAAA,KAAA,CAAM,cAAe,CAAA,QAAQ,CAAG,EAAA;AAClC,MAAO,OAAA,QAAA,CAAA;AAAA,KACT;AACA,IAAI,IAAA,KAAA,CAAM,OAAQ,CAAA,QAAQ,CAAG,EAAA;AAC3B,MAAO,OAAA,QAAA,CAAS,MAAM,CAAK,IAAA,IAAA,CAAA;AAAA,KAC7B;AACA,IAAO,OAAA,IAAA,CAAA;AAAA,GACT,CAAA;AAEA,EAAM,MAAA,UAAA,GAAa,MACjB,gBAAiB,CAAA,QAAQ,EAAE,GAAI,CAAA,CAACC,QAAO,GAAQ,KAAA;AAC7C,IAAM,MAAA;AAAA,MACJ,SAAY,GAAA,aAAA;AAAA,MACZ,EAAI,EAAA,OAAA,GAAU,CAAG,EAAA,EAAE,IAAI,GAAG,CAAA,CAAA;AAAA,MAC1B,mBAAqB,EAAA,WAAA;AAAA,QACnBA,MAAM,CAAA,KAAA,CAAA;AACV,IAAA,MAAM,KAAQ,GAAA,WAAA,CAAYA,MAAO,EAAA,GAAA,EAAK,UAAU,OAAO,CAAA,CAAA;AACvD,IAAU,SAAA,CAAA,OAAA,CAAQ,KAAK,KAAK,CAAA,CAAA;AAC5B,IACE,uBAAA,GAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,YAAc,EAAA,OAAA;AAAA,QACd,WAAA,EAAW,UAAWA,CAAAA,MAAAA,EAAO,GAAG,CAAA;AAAA,QAEhC,EAAA,EAAI,GAAG,OAAO,CAAA,IAAA,CAAA;AAAA,QACd,KAAO,EAAA,GAAA;AAAA,QACP,KAAA;AAAA,QACA,QAAU,EAAA,WAAA;AAAA,QACV,SAAA;AAAA,QACA,QAAU,EAAA,cAAA;AAAA,OAAA;AAAA,MANL,OAAA;AAAA,KAOP,CAAA;AAAA,GAEH,CAAA,CAAA;AAEH,EAAA,MAAM,QAAQ,WAAY,EAAA,CAAA;AAC1B,EAAM,MAAA,YAAA,GAAe,QAAa,KAAA,MAAA,IAAU,QAAa,KAAA,OAAA,CAAA;AACzD,EAAM,MAAA,mBAAA,GAAsB,eAAe,UAAa,GAAA,YAAA,CAAA;AAExD,EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,aAAe,EAAA;AAAA,QACtC,CAAC,CAAA,EAAG,SAAS,CAAA,WAAA,CAAa,GAAG,YAAA;AAAA,OAC9B,CAAA;AAAA,MACD,KAAA;AAAA,MACA,EAAA;AAAA,MACA,GAAA;AAAA,MAEC,QAAA,EAAA;AAAA,QACC,QAAA,mBAAA,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACE,GAAGD,cAAAA;AAAA,YACJ,cACEA,EAAAA,cAAAA,EAAe,cAAmB,KAAA,KAAA,KAAU,OAAO,CAAK,CAAA,GAAA,MAAA,CAAA;AAAA,YAE1D,aAAA,EAAeA,eAAc,aAAkB,KAAA,KAAA;AAAA,YAC/C,qBAAqB,EAAA,IAAA;AAAA,YACrB,SAAA,EAAW,EAAG,CAAA,cAAA,EAAgB,iBAAiB,CAAA;AAAA,YAC/C,YAAW,EAAA,WAAA;AAAA,YACX,kBAAA;AAAA,YACA,cAAgB,EAAA,qBAAA;AAAA,YAChB,QAAA;AAAA,YACA,UAAY,EAAA,UAAA;AAAA,YACZ,cAAgB,EAAA,kBAAA;AAAA,YAChB,SAAA;AAAA,YACA,WAAa,EAAA,mBAAA;AAAA,YAEZ,QAAW,EAAA,UAAA,EAAA;AAAA,WAAA;AAAA,SAEZ,GAAA,IAAA;AAAA,wBACJ,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,iBAAiB,EAAA,CAAA,EAAG,EAAE,CAAA,CAAA,EAAI,MAAM,CAAA,CAAA;AAAA,YAChC,SAAA,EAAW,GAAG,SAAS,CAAA,SAAA,CAAA;AAAA,YACvB,IAAK,EAAA,UAAA;AAAA,YAEJ,QAAA,EAAA,KAAA;AAAA,WAAA;AAAA,SACH;AAAA,OAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ,CAAC,EAAA;AACD,KAAA,CAAM,WAAc,GAAA,OAAA;;;;"}