@vuu-ui/vuu-layout 0.8.43 → 0.8.45

package/cjs/palette/Palette.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+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";
+
+module.exports = paletteCss;
+//# sourceMappingURL=Palette.css.js.map

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

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

package/cjs/palette/Palette.js

@@ -4,11 +4,14 @@ var jsxRuntime = require('react/jsx-runtime');
 var vuuUtils = require('@vuu-ui/vuu-utils');
 var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
 var cx = require('clsx');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
 var React = require('react');
 var LayoutProvider = require('../layout-provider/LayoutProvider.js');
 require('../layout-provider/LayoutProviderContext.js');
 var View = require('../layout-view/View.js');
 var ComponentRegistry = require('../registry/ComponentRegistry.js');
+var Palette$1 = require('./Palette.css.js');
 
 const clonePaletteItem = (paletteItem) => {
   const dolly = paletteItem.cloneNode(true);
@@ -26,6 +29,12 @@ const PaletteItem = React.memo(
     closeable,
     ...props
   }) => {
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "vuu-palette",
+      css: Palette$1,
+      window: targetWindow
+    });
     return /* @__PURE__ */ jsxRuntime.jsx(
       vuuUiControls.ListItem,
       {

package/cjs/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":["memo","jsx","ListItem","ListProps","ViewProps","useLayoutProviderDispatch","props","uuid","View","List","cloneElement","registerComponent"],"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":["memo","useWindow","useComponentCssInjection","paletteCss","jsx","ListItem","ListProps","ViewProps","useLayoutProviderDispatch","props","uuid","View","List","cloneElement","registerComponent"],"mappings":"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"}

package/cjs/placeholder/LayoutStartPanel.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+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}";
+
+module.exports = layoutStartPanelCss;
+//# sourceMappingURL=LayoutStartPanel.css.js.map

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

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

package/cjs/placeholder/LayoutStartPanel.js

@@ -2,6 +2,8 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
 var React = require('react');
 require('@vuu-ui/vuu-utils');
 require('../layout-provider/LayoutProviderContext.js');
@@ -9,9 +11,16 @@ require('../drag-drop/Draggable.js');
 require('clsx');
 require('../drag-drop/BoxModel.js');
 var ViewContext = require('../layout-view-actions/ViewContext.js');
+var LayoutStartPanel$1 = require('./LayoutStartPanel.css.js');
 
 const classBase = "vuuLayoutStartPanel";
 const LayoutStartPanel = (htmlAttributes) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-layout-start-panel",
+    css: LayoutStartPanel$1,
+    window: targetWindow
+  });
   const { dispatch, path } = ViewContext.useViewContext();
   const [displayState, setDisplayState] = React.useState();
   React.useMemo(() => {

package/cjs/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":["useViewContext","useState","useMemo","jsxs","Fragment","jsx","Button"],"mappings":";;;;;;;;;;;;AAMA,MAAM,SAAY,GAAA,qBAAA,CAAA;AAML,MAAA,gBAAA,GAAmB,CAAC,cAA0C,KAAA;AACzE,EAAA,MAAM,EAAE,QAAA,EAAU,IAAK,EAAA,GAAIA,0BAAe,EAAA,CAAA;AAC1C,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAIC,cAEtC,EAAA,CAAA;AAEF,EAAAC,aAAA,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,uBACGC,eAAA,CAAA,KAAA,EAAA,EAAK,GAAG,cAAA,EAAgB,WAAW,SACjC,EAAA,QAAA,EAAA;AAAA,IAAA,gBAAA,mBAEGA,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAAC,cAAA,CAAC,QAAO,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,UAAU,QAEzC,EAAA,yBAAA,EAAA,CAAA;AAAA,qCACC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,SAAS,QAGrC,EAAA,mFAAA,EAAA,CAAA;AAAA,KAAA,EACF,CACE,GAAA,IAAA;AAAA,oBACJA,cAAA;AAAA,MAACC,WAAA;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":["useWindow","useComponentCssInjection","layoutStartPanelCss","useViewContext","useState","useMemo","jsxs","Fragment","jsx","Button"],"mappings":";;;;;;;;;;;;;;;AAQA,MAAM,SAAY,GAAA,qBAAA,CAAA;AAML,MAAA,gBAAA,GAAmB,CAAC,cAA0C,KAAA;AACzE,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAAC,kBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,QAAA,EAAU,IAAK,EAAA,GAAIC,0BAAe,EAAA,CAAA;AAC1C,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAIC,cAEtC,EAAA,CAAA;AAEF,EAAAC,aAAA,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,uBACGC,eAAA,CAAA,KAAA,EAAA,EAAK,GAAG,cAAA,EAAgB,WAAW,SACjC,EAAA,QAAA,EAAA;AAAA,IAAA,gBAAA,mBAEGA,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAAC,cAAA,CAAC,QAAO,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,UAAU,QAEzC,EAAA,yBAAA,EAAA,CAAA;AAAA,qCACC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,SAAS,QAGrC,EAAA,mFAAA,EAAA,CAAA;AAAA,KAAA,EACF,CACE,GAAA,IAAA;AAAA,oBACJA,cAAA;AAAA,MAACC,WAAA;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/cjs/placeholder/Placeholder.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+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";
+
+module.exports = placeholderCss;
+//# sourceMappingURL=Placeholder.css.js.map

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

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

package/cjs/placeholder/Placeholder.js

@@ -2,9 +2,12 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var cx = require('clsx');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
 var ComponentRegistry = require('../registry/ComponentRegistry.js');
 var LayoutStartPanel = require('./LayoutStartPanel.js');
 var View = require('../layout-view/View.js');
+var Placeholder$1 = require('./Placeholder.css.js');
 
 const classBase = "vuuPlaceholder";
 const PlaceholderCore = ({ showStartMenu = true }) => {
@@ -15,6 +18,12 @@ const Placeholder = ({
   showStartMenu,
   ...viewProps
 }) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-placeholder",
+    css: Placeholder$1,
+    window: targetWindow
+  });
   const className = cx(classBase, classNameProp);
   return /* @__PURE__ */ jsxRuntime.jsx(View.View, { ...viewProps, className, "data-placeholder": true, resizeable: true, children: /* @__PURE__ */ jsxRuntime.jsx(PlaceholderCore, { showStartMenu }) });
 };

package/cjs/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":["jsx","Fragment","LayoutStartPanel","View","registerComponent"],"mappings":";;;;;;;;AAOA,MAAM,SAAY,GAAA,gBAAA,CAAA;AAclB,MAAM,eAAkB,GAAA,CAAC,EAAE,aAAA,GAAgB,MAA6B,KAAA;AACtE,EAAA,uBAAUA,cAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA,aAAA,mBAAiBD,cAAA,CAAAE,iCAAA,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,uBACGF,cAAA,CAAAG,SAAA,EAAA,EAAM,GAAG,SAAA,EAAW,SAAsB,EAAA,kBAAA,EAAgB,IAAC,EAAA,UAAA,EAAU,IACpE,EAAA,QAAA,kBAAAH,cAAA,CAAC,eAAgB,EAAA,EAAA,aAAA,EAA8B,CACjD,EAAA,CAAA,CAAA;AAEJ,EAAA;AAEA,WAAA,CAAY,WAAc,GAAA,aAAA,CAAA;AAC1BI,mCAAA,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":["jsx","Fragment","LayoutStartPanel","useWindow","useComponentCssInjection","placeholderCss","View","registerComponent"],"mappings":";;;;;;;;;;;AASA,MAAM,SAAY,GAAA,gBAAA,CAAA;AAclB,MAAM,eAAkB,GAAA,CAAC,EAAE,aAAA,GAAgB,MAA6B,KAAA;AACtE,EAAA,uBAAUA,cAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA,aAAA,mBAAiBD,cAAA,CAAAE,iCAAA,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,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAAC,aAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,SAAA,GAAY,EAAG,CAAA,SAAA,EAAW,aAAa,CAAA,CAAA;AAE7C,EAAA,uBACGL,cAAA,CAAAM,SAAA,EAAA,EAAM,GAAG,SAAA,EAAW,SAAsB,EAAA,kBAAA,EAAgB,IAAC,EAAA,UAAA,EAAU,IACpE,EAAA,QAAA,kBAAAN,cAAA,CAAC,eAAgB,EAAA,EAAA,aAAA,EAA8B,CACjD,EAAA,CAAA,CAAA;AAEJ,EAAA;AAEA,WAAA,CAAY,WAAc,GAAA,aAAA,CAAA;AAC1BO,mCAAA,CAAkB,eAAe,WAAW,CAAA;;;;"}

package/cjs/stack/Stack.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+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";
+
+module.exports = stackCss;
+//# sourceMappingURL=Stack.css.js.map

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

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

package/cjs/stack/Stack.js

@@ -4,8 +4,11 @@ var jsxRuntime = require('react/jsx-runtime');
 var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
 var vuuUtils = require('@vuu-ui/vuu-utils');
 var cx = require('clsx');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
 var React = require('react');
 var layoutUtils = require('../layout-reducer/layoutUtils.js');
+var Stack$1 = require('./Stack.css.js');
 
 const classBase = "vuuTabs";
 const getDefaultTabIcon = () => void 0;
@@ -43,6 +46,12 @@ const Stack = React.forwardRef(function Stack2({
   showTabs = "top",
   style
 }, ref) {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-stack",
+    css: Stack$1,
+    window: targetWindow
+  });
   const id = vuuUtils.useId(idProp);
   const tabLabels = React.useRef([]);
   const {

package/cjs/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":["forwardRef","Stack","TabstripProps","getDefaultTabLabel","useId","useRef","useCallback","child","jsx","Tab","jsxs","Tabstrip"],"mappings":"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"}
+{"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":["forwardRef","Stack","TabstripProps","getDefaultTabLabel","useWindow","useComponentCssInjection","stackCss","useId","useRef","useCallback","child","jsx","Tab","jsxs","Tabstrip"],"mappings":"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"}

package/cjs/stack/StackLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"StackLayout.js","sources":["../../src/stack/StackLayout.tsx"],"sourcesContent":["import { useId } from \"@vuu-ui/vuu-utils\";\nimport React, { useCallback, useRef } from \"react\";\nimport {\n  useLayoutCreateNewChild,\n  useLayoutProviderDispatch,\n} from \"../layout-provider\";\nimport { useViewActionDispatcher } from \"../layout-view-actions\";\nimport { registerComponent } from \"../registry/ComponentRegistry\";\nimport { usePersistentState } from \"../use-persistent-state\";\nimport { Stack } from \"./Stack\";\nimport { StackProps, TabLabelFactory } from \"./stackTypes\";\nimport { getDefaultTabLabel } from \"../layout-reducer\";\nimport { Placeholder } from \"../placeholder\";\n\nimport \"./Stack.css\";\n\nconst defaultCreateNewChild = () => (\n  <Placeholder\n    resizeable\n    style={{ flexGrow: 1, flexShrink: 0, flexBasis: 0 }}\n  />\n);\n\nexport const StackLayout = (props: StackProps) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const dispatch = useLayoutProviderDispatch();\n  const { loadState } = usePersistentState();\n\n  const {\n    createNewChild: createNewChildProp,\n    id: idProp,\n    onTabSelectionChanged,\n    path,\n    ...restProps\n  } = props;\n\n  const { children } = props;\n\n  const id = useId(idProp);\n\n  const [dispatchViewAction] = useViewActionDispatcher(id, ref, path);\n  const createNewChildFromContext = useLayoutCreateNewChild();\n  const createNewChild =\n    createNewChildProp ?? createNewChildFromContext ?? defaultCreateNewChild;\n\n  const handleTabSelection = (nextIdx: number) => {\n    if (path) {\n      dispatch({ type: \"switch-tab\", id, path, nextIdx });\n      onTabSelectionChanged?.(nextIdx);\n    }\n  };\n\n  const handleTabClose = useCallback(\n    (tabIndex: number) => {\n      if (Array.isArray(children)) {\n        const {\n          props: { \"data-path\": dataPath, path = dataPath },\n        } = children[tabIndex];\n        dispatch({ type: \"remove\", path });\n      }\n    },\n    [children, dispatch]\n  );\n\n  const handleTabAdd = useCallback(() => {\n    if (path) {\n      const tabIndex = React.Children.count(children);\n      const component = createNewChild(tabIndex);\n      dispatch({\n        type: \"add\",\n        path,\n        component,\n      });\n    }\n  }, [children, createNewChild, dispatch, path]);\n\n  const handleMoveTab = useCallback(\n    (fromIndex: number, toIndex: number) => {\n      if (path) {\n        dispatch({\n          fromIndex,\n          toIndex,\n          path,\n          type: \"move-child\",\n        });\n      }\n    },\n    [dispatch, path]\n  );\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const handleMouseDown = async (e: any, index: number) => {\n    let readyToDrag: undefined | ((value: unknown) => void);\n\n    const preDragActivity = async () =>\n      new Promise((resolve) => {\n        console.log(\"preDragActivity: Ok, gonna release the drag\");\n        readyToDrag = resolve;\n      });\n\n    const dragging = await dispatchViewAction(\n      { type: \"mousedown\", index, preDragActivity },\n      e\n    );\n\n    if (dragging) {\n      readyToDrag?.(undefined);\n    }\n  };\n\n  const handleTabEdit = (tabIndex: number, text: string) => {\n    dispatch({ type: \"set-title\", path: `${path}.${tabIndex}`, title: text });\n  };\n\n  const getTabLabel: TabLabelFactory = (component, idx, existingLabels) => {\n    const { id, title } = component.props;\n    return (\n      loadState(id, \"view-title\") ||\n      title ||\n      // This will normally never be called as title is always assigned in layout model\n      getDefaultTabLabel(component, idx, existingLabels)\n    );\n  };\n\n  return (\n    <Stack\n      {...restProps}\n      id={id}\n      getTabLabel={getTabLabel}\n      onMouseDown={handleMouseDown}\n      onMoveTab={handleMoveTab}\n      onAddTab={handleTabAdd}\n      onTabClose={handleTabClose}\n      onTabEdit={handleTabEdit}\n      onTabSelectionChanged={handleTabSelection}\n      ref={ref}\n    />\n  );\n};\nStackLayout.displayName = \"Stack\";\n\nregisterComponent(\"Stack\", StackLayout, \"container\");\n"],"names":["jsx","Placeholder","useRef","useLayoutProviderDispatch","usePersistentState","useId","useViewActionDispatcher","useLayoutCreateNewChild","useCallback","path","id","getDefaultTabLabel","Stack","registerComponent"],"mappings":"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"}
+{"version":3,"file":"StackLayout.js","sources":["../../src/stack/StackLayout.tsx"],"sourcesContent":["import { useId } from \"@vuu-ui/vuu-utils\";\nimport React, { useCallback, useRef } from \"react\";\nimport {\n  useLayoutCreateNewChild,\n  useLayoutProviderDispatch,\n} from \"../layout-provider\";\nimport { useViewActionDispatcher } from \"../layout-view-actions\";\nimport { registerComponent } from \"../registry/ComponentRegistry\";\nimport { usePersistentState } from \"../use-persistent-state\";\nimport { Stack } from \"./Stack\";\nimport { StackProps, TabLabelFactory } from \"./stackTypes\";\nimport { getDefaultTabLabel } from \"../layout-reducer\";\nimport { Placeholder } from \"../placeholder\";\n\nconst defaultCreateNewChild = () => (\n  <Placeholder\n    resizeable\n    style={{ flexGrow: 1, flexShrink: 0, flexBasis: 0 }}\n  />\n);\n\nexport const StackLayout = (props: StackProps) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const dispatch = useLayoutProviderDispatch();\n  const { loadState } = usePersistentState();\n\n  const {\n    createNewChild: createNewChildProp,\n    id: idProp,\n    onTabSelectionChanged,\n    path,\n    ...restProps\n  } = props;\n\n  const { children } = props;\n\n  const id = useId(idProp);\n\n  const [dispatchViewAction] = useViewActionDispatcher(id, ref, path);\n  const createNewChildFromContext = useLayoutCreateNewChild();\n  const createNewChild =\n    createNewChildProp ?? createNewChildFromContext ?? defaultCreateNewChild;\n\n  const handleTabSelection = (nextIdx: number) => {\n    if (path) {\n      dispatch({ type: \"switch-tab\", id, path, nextIdx });\n      onTabSelectionChanged?.(nextIdx);\n    }\n  };\n\n  const handleTabClose = useCallback(\n    (tabIndex: number) => {\n      if (Array.isArray(children)) {\n        const {\n          props: { \"data-path\": dataPath, path = dataPath },\n        } = children[tabIndex];\n        dispatch({ type: \"remove\", path });\n      }\n    },\n    [children, dispatch]\n  );\n\n  const handleTabAdd = useCallback(() => {\n    if (path) {\n      const tabIndex = React.Children.count(children);\n      const component = createNewChild(tabIndex);\n      dispatch({\n        type: \"add\",\n        path,\n        component,\n      });\n    }\n  }, [children, createNewChild, dispatch, path]);\n\n  const handleMoveTab = useCallback(\n    (fromIndex: number, toIndex: number) => {\n      if (path) {\n        dispatch({\n          fromIndex,\n          toIndex,\n          path,\n          type: \"move-child\",\n        });\n      }\n    },\n    [dispatch, path]\n  );\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const handleMouseDown = async (e: any, index: number) => {\n    let readyToDrag: undefined | ((value: unknown) => void);\n\n    const preDragActivity = async () =>\n      new Promise((resolve) => {\n        console.log(\"preDragActivity: Ok, gonna release the drag\");\n        readyToDrag = resolve;\n      });\n\n    const dragging = await dispatchViewAction(\n      { type: \"mousedown\", index, preDragActivity },\n      e\n    );\n\n    if (dragging) {\n      readyToDrag?.(undefined);\n    }\n  };\n\n  const handleTabEdit = (tabIndex: number, text: string) => {\n    dispatch({ type: \"set-title\", path: `${path}.${tabIndex}`, title: text });\n  };\n\n  const getTabLabel: TabLabelFactory = (component, idx, existingLabels) => {\n    const { id, title } = component.props;\n    return (\n      loadState(id, \"view-title\") ||\n      title ||\n      // This will normally never be called as title is always assigned in layout model\n      getDefaultTabLabel(component, idx, existingLabels)\n    );\n  };\n\n  return (\n    <Stack\n      {...restProps}\n      id={id}\n      getTabLabel={getTabLabel}\n      onMouseDown={handleMouseDown}\n      onMoveTab={handleMoveTab}\n      onAddTab={handleTabAdd}\n      onTabClose={handleTabClose}\n      onTabEdit={handleTabEdit}\n      onTabSelectionChanged={handleTabSelection}\n      ref={ref}\n    />\n  );\n};\nStackLayout.displayName = \"Stack\";\n\nregisterComponent(\"Stack\", StackLayout, \"container\");\n"],"names":["jsx","Placeholder","useRef","useLayoutProviderDispatch","usePersistentState","useId","useViewActionDispatcher","useLayoutCreateNewChild","useCallback","path","id","getDefaultTabLabel","Stack","registerComponent"],"mappings":"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"}

package/esm/DraggableLayout.css.js

@@ -0,0 +1,4 @@
+var draggableLayoutCss = ".DraggableLayout {\n  display: inline-block;\n  outline: none;\n}\n\n[data-dragging='true'] {\n  position: absolute !important;\n  z-index: 100;\n}\n\n.vuuSimpleDraggableWrapper {\n  background-color: white;\n  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2);\n}\n.vuuSimpleDraggableWrapper > * {\n  height: 100%;\n  width: 100%;\n}\n";
+
+export { draggableLayoutCss as default };
+//# sourceMappingURL=DraggableLayout.css.js.map

package/esm/DraggableLayout.css.js.map

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

package/esm/DraggableLayout.js

@@ -1,7 +1,10 @@
 import { jsx } from 'react/jsx-runtime';
 import cx from 'clsx';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import { forwardRef } from 'react';
 import { registerComponent } from './registry/ComponentRegistry.js';
+import draggableLayoutCss from './DraggableLayout.css.js';
 
 const DraggableLayout = forwardRef(function DraggableLayout2({
   children,
@@ -11,6 +14,12 @@ const DraggableLayout = forwardRef(function DraggableLayout2({
   // ignore, its just a marker used by the layout system
   ...htmlAttributes
 }, forwardedRef) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-draggable-layout",
+    css: draggableLayoutCss,
+    window: targetWindow
+  });
   const className = cx("DraggableLayout", classNameProp);
   return /* @__PURE__ */ jsx("div", { className, ref: forwardedRef, ...htmlAttributes, children });
 });

package/esm/DraggableLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"DraggableLayout.js","sources":["../src/DraggableLayout.tsx"],"sourcesContent":["import classnames from \"clsx\";\nimport { ForwardedRef, forwardRef, HTMLAttributes } from \"react\";\nimport { registerComponent } from \"./registry/ComponentRegistry\";\n\nimport \"./DraggableLayout.css\";\n\nexport interface DraggableLayoutProps extends HTMLAttributes<HTMLDivElement> {\n  dropTarget?: boolean;\n  resizeable?: boolean;\n}\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const DraggableLayout = forwardRef(function DraggableLayout(\n  {\n    children,\n    className: classNameProp,\n    dropTarget,\n    resizeable: _, // ignore, its just a marker used by the layout system\n    ...htmlAttributes\n  }: DraggableLayoutProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const className = classnames(\"DraggableLayout\", classNameProp);\n  return (\n    <div className={className} ref={forwardedRef} {...htmlAttributes}>\n      {children}\n    </div>\n  );\n});\n\nconst componentName = \"DraggableLayout\";\n\nDraggableLayout.displayName = componentName;\n\nregisterComponent(componentName, DraggableLayout, \"container\");\n"],"names":["DraggableLayout","classnames"],"mappings":";;;;;AAWa,MAAA,eAAA,GAAkB,UAAW,CAAA,SAASA,gBACjD,CAAA;AAAA,EACE,QAAA;AAAA,EACA,SAAW,EAAA,aAAA;AAAA,EACX,UAAA;AAAA,EACA,UAAY,EAAA,CAAA;AAAA;AAAA,EACZ,GAAG,cAAA;AACL,CAAA,EACA,YACA,EAAA;AACA,EAAM,MAAA,SAAA,GAAYC,EAAW,CAAA,iBAAA,EAAmB,aAAa,CAAA,CAAA;AAC7D,EAAA,2BACG,KAAI,EAAA,EAAA,SAAA,EAAsB,KAAK,YAAe,EAAA,GAAG,gBAC/C,QACH,EAAA,CAAA,CAAA;AAEJ,CAAC,EAAA;AAED,MAAM,aAAgB,GAAA,iBAAA,CAAA;AAEtB,eAAA,CAAgB,WAAc,GAAA,aAAA,CAAA;AAE9B,iBAAkB,CAAA,aAAA,EAAe,iBAAiB,WAAW,CAAA;;;;"}
+{"version":3,"file":"DraggableLayout.js","sources":["../src/DraggableLayout.tsx"],"sourcesContent":["import classnames from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ForwardedRef, forwardRef, HTMLAttributes } from \"react\";\nimport { registerComponent } from \"./registry/ComponentRegistry\";\n\nimport draggableLayoutCss from \"./DraggableLayout.css\";\n\nexport interface DraggableLayoutProps extends HTMLAttributes<HTMLDivElement> {\n  dropTarget?: boolean;\n  resizeable?: boolean;\n}\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const DraggableLayout = forwardRef(function DraggableLayout(\n  {\n    children,\n    className: classNameProp,\n    dropTarget,\n    resizeable: _, // ignore, its just a marker used by the layout system\n    ...htmlAttributes\n  }: DraggableLayoutProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-draggable-layout\",\n    css: draggableLayoutCss,\n    window: targetWindow,\n  });\n\n  const className = classnames(\"DraggableLayout\", classNameProp);\n  return (\n    <div className={className} ref={forwardedRef} {...htmlAttributes}>\n      {children}\n    </div>\n  );\n});\n\nconst componentName = \"DraggableLayout\";\n\nDraggableLayout.displayName = componentName;\n\nregisterComponent(componentName, DraggableLayout, \"container\");\n"],"names":["DraggableLayout","classnames"],"mappings":";;;;;;;;AAaa,MAAA,eAAA,GAAkB,UAAW,CAAA,SAASA,gBACjD,CAAA;AAAA,EACE,QAAA;AAAA,EACA,SAAW,EAAA,aAAA;AAAA,EACX,UAAA;AAAA,EACA,UAAY,EAAA,CAAA;AAAA;AAAA,EACZ,GAAG,cAAA;AACL,CAAA,EACA,YACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,sBAAA;AAAA,IACR,GAAK,EAAA,kBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,SAAA,GAAYC,EAAW,CAAA,iBAAA,EAAmB,aAAa,CAAA,CAAA;AAC7D,EAAA,2BACG,KAAI,EAAA,EAAA,SAAA,EAAsB,KAAK,YAAe,EAAA,GAAG,gBAC/C,QACH,EAAA,CAAA,CAAA;AAEJ,CAAC,EAAA;AAED,MAAM,aAAgB,GAAA,iBAAA,CAAA;AAEtB,eAAA,CAAgB,WAAc,GAAA,aAAA,CAAA;AAE9B,iBAAkB,CAAA,aAAA,EAAe,iBAAiB,WAAW,CAAA;;;;"}

package/esm/dock-layout/DockLayout.css.js

@@ -0,0 +1,4 @@
+var dockLayoutCss = ".vuuDockLayout {\n  --chest-bg: var(--hw-chest-bg, inherit);\n  --drawer-bg: var(--hw-drawer-bg, inherit);\n  --drawer-size: var(--hw-drawer-size, 200px);\n  --drawer-peek-size: var(--hw-drawer-peek-size, 32px);\n  --drawer-transition-duration: var(--hw-drawer-transition-duration, 0.4s);\n  background-color: var(--chest-bg);\n  display: flex;\n}\n\n.vuuDockLayout-horizontal {\n  flex-direction: row;\n}\n\n.vuuDockLayout-vertical {\n  flex-direction: column;\n}\n\n.vuuDockLayout-content {\n  background-color: var(--chest-bg);\n  flex-grow: 1;\n  flex-shrink: 1;\n  overflow: hidden;\n  /* position: relative; */\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.vuuDockLayout-horizontal .vuuDockLayout-content {\n  flex-basis: 100%;\n}\n\n.vuuDockLayout-vertical .vuuDockLayout-content {\n  flex-basis: 100%;\n}\n";
+
+export { dockLayoutCss as default };
+//# sourceMappingURL=DockLayout.css.js.map

package/esm/dock-layout/DockLayout.css.js.map

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

package/esm/dock-layout/DockLayout.js

@@ -1,12 +1,21 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { partition } from '@vuu-ui/vuu-utils';
 import cx from 'clsx';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import { registerComponent } from '../registry/ComponentRegistry.js';
 import Drawer from './Drawer.js';
+import dockLayoutCss from './DockLayout.css.js';
 
 const isDrawer = (component) => component.type === Drawer;
 const isVertical = ({ props: { position = "left" } }) => position.match(/top|bottom/);
 const DockLayout = (props) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-dock-layput",
+    css: dockLayoutCss,
+    window: targetWindow
+  });
   const { children, className: classNameProp, id, style } = props;
   const classBase = "vuuDockLayout";
   const [drawers, content] = partition(children, isDrawer);

package/esm/dock-layout/DockLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"DockLayout.js","sources":["../../src/dock-layout/DockLayout.tsx"],"sourcesContent":["import { partition } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, ReactElement } from \"react\";\nimport { registerComponent } from \"../registry/ComponentRegistry\";\nimport Drawer from \"./Drawer\";\n\nimport \"./DockLayout.css\";\n\nconst isDrawer = (component: ReactElement) => component.type === Drawer;\nconst isVertical = ({ props: { position = \"left\" } }: ReactElement) =>\n  position.match(/top|bottom/);\n\nexport interface DockLayoutProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactElement[];\n}\n\nconst DockLayout = (props: DockLayoutProps) => {\n  const { children, className: classNameProp, id, style } = props;\n  const classBase = \"vuuDockLayout\";\n  const [drawers, content] = partition(children, isDrawer);\n  const [verticalDrawers, horizontalDrawers] = partition(drawers, isVertical);\n  const orientation =\n    verticalDrawers.length === 0\n      ? \"horizontal\"\n      : horizontalDrawers.length === 0\n      ? \"vertical\"\n      : \"both\";\n\n  const className = cx(classBase, classNameProp, `${classBase}-${orientation}`);\n\n  return (\n    <div className={className} id={id} style={style}>\n      {drawers}\n      <div className={`${classBase}-content`}>{content}</div>\n    </div>\n  );\n};\nDockLayout.displayName = \"DockLayout\";\n\nexport default DockLayout;\n\nregisterComponent(\"DockLayout\", DockLayout, \"container\");\n"],"names":[],"mappings":";;;;;;AAQA,MAAM,QAAW,GAAA,CAAC,SAA4B,KAAA,SAAA,CAAU,IAAS,KAAA,MAAA,CAAA;AACjE,MAAM,UAAA,GAAa,CAAC,EAAE,KAAO,EAAA,EAAE,QAAW,GAAA,MAAA,EAAS,EAAA,KACjD,QAAS,CAAA,KAAA,CAAM,YAAY,CAAA,CAAA;AAMvB,MAAA,UAAA,GAAa,CAAC,KAA2B,KAAA;AAC7C,EAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,aAAe,EAAA,EAAA,EAAI,OAAU,GAAA,KAAA,CAAA;AAC1D,EAAA,MAAM,SAAY,GAAA,eAAA,CAAA;AAClB,EAAA,MAAM,CAAC,OAAS,EAAA,OAAO,CAAI,GAAA,SAAA,CAAU,UAAU,QAAQ,CAAA,CAAA;AACvD,EAAA,MAAM,CAAC,eAAiB,EAAA,iBAAiB,CAAI,GAAA,SAAA,CAAU,SAAS,UAAU,CAAA,CAAA;AAC1E,EAAM,MAAA,WAAA,GACJ,gBAAgB,MAAW,KAAA,CAAA,GACvB,eACA,iBAAkB,CAAA,MAAA,KAAW,IAC7B,UACA,GAAA,MAAA,CAAA;AAEN,EAAM,MAAA,SAAA,GAAY,GAAG,SAAW,EAAA,aAAA,EAAe,GAAG,SAAS,CAAA,CAAA,EAAI,WAAW,CAAE,CAAA,CAAA,CAAA;AAE5E,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA,EAAI,SAAsB,EAAA,EAAA,EAAQ,KAChC,EAAA,QAAA,EAAA;AAAA,IAAA,OAAA;AAAA,wBACA,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,YAAa,QAAQ,EAAA,OAAA,EAAA,CAAA;AAAA,GACnD,EAAA,CAAA,CAAA;AAEJ,EAAA;AACA,UAAA,CAAW,WAAc,GAAA,YAAA,CAAA;AAIzB,iBAAkB,CAAA,YAAA,EAAc,YAAY,WAAW,CAAA;;;;"}
+{"version":3,"file":"DockLayout.js","sources":["../../src/dock-layout/DockLayout.tsx"],"sourcesContent":["import { partition } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes, ReactElement } from \"react\";\nimport { registerComponent } from \"../registry/ComponentRegistry\";\nimport Drawer from \"./Drawer\";\n\nimport dockLayoutCss from \"./DockLayout.css\";\n\nconst isDrawer = (component: ReactElement) => component.type === Drawer;\nconst isVertical = ({ props: { position = \"left\" } }: ReactElement) =>\n  position.match(/top|bottom/);\n\nexport interface DockLayoutProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactElement[];\n}\n\nconst DockLayout = (props: DockLayoutProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-dock-layput\",\n    css: dockLayoutCss,\n    window: targetWindow,\n  });\n\n  const { children, className: classNameProp, id, style } = props;\n  const classBase = \"vuuDockLayout\";\n  const [drawers, content] = partition(children, isDrawer);\n  const [verticalDrawers, horizontalDrawers] = partition(drawers, isVertical);\n  const orientation =\n    verticalDrawers.length === 0\n      ? \"horizontal\"\n      : horizontalDrawers.length === 0\n      ? \"vertical\"\n      : \"both\";\n\n  const className = cx(classBase, classNameProp, `${classBase}-${orientation}`);\n\n  return (\n    <div className={className} id={id} style={style}>\n      {drawers}\n      <div className={`${classBase}-content`}>{content}</div>\n    </div>\n  );\n};\nDockLayout.displayName = \"DockLayout\";\n\nexport default DockLayout;\n\nregisterComponent(\"DockLayout\", DockLayout, \"container\");\n"],"names":[],"mappings":";;;;;;;;;AAUA,MAAM,QAAW,GAAA,CAAC,SAA4B,KAAA,SAAA,CAAU,IAAS,KAAA,MAAA,CAAA;AACjE,MAAM,UAAA,GAAa,CAAC,EAAE,KAAO,EAAA,EAAE,QAAW,GAAA,MAAA,EAAS,EAAA,KACjD,QAAS,CAAA,KAAA,CAAM,YAAY,CAAA,CAAA;AAMvB,MAAA,UAAA,GAAa,CAAC,KAA2B,KAAA;AAC7C,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAA,aAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,aAAe,EAAA,EAAA,EAAI,OAAU,GAAA,KAAA,CAAA;AAC1D,EAAA,MAAM,SAAY,GAAA,eAAA,CAAA;AAClB,EAAA,MAAM,CAAC,OAAS,EAAA,OAAO,CAAI,GAAA,SAAA,CAAU,UAAU,QAAQ,CAAA,CAAA;AACvD,EAAA,MAAM,CAAC,eAAiB,EAAA,iBAAiB,CAAI,GAAA,SAAA,CAAU,SAAS,UAAU,CAAA,CAAA;AAC1E,EAAM,MAAA,WAAA,GACJ,gBAAgB,MAAW,KAAA,CAAA,GACvB,eACA,iBAAkB,CAAA,MAAA,KAAW,IAC7B,UACA,GAAA,MAAA,CAAA;AAEN,EAAM,MAAA,SAAA,GAAY,GAAG,SAAW,EAAA,aAAA,EAAe,GAAG,SAAS,CAAA,CAAA,EAAI,WAAW,CAAE,CAAA,CAAA,CAAA;AAE5E,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA,EAAI,SAAsB,EAAA,EAAA,EAAQ,KAChC,EAAA,QAAA,EAAA;AAAA,IAAA,OAAA;AAAA,wBACA,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,YAAa,QAAQ,EAAA,OAAA,EAAA,CAAA;AAAA,GACnD,EAAA,CAAA,CAAA;AAEJ,EAAA;AACA,UAAA,CAAW,WAAc,GAAA,YAAA,CAAA;AAIzB,iBAAkB,CAAA,YAAA,EAAc,YAAY,WAAW,CAAA;;;;"}

package/esm/dock-layout/Drawer.css.js

@@ -0,0 +1,4 @@
+var drawerCss = ".vuuDrawer {\n  --drawer-leading-edge-border: solid 1px var(--salt-container-primary-borderColor, none);\n  --vuu-close-icon-svg: var(--svg-chevron-double-right);\n\n  transition: flex-basis;\n  transition-duration: var(--drawer-transition-duration);\n  position: relative;\n  z-index: 1;\n  flex-basis: 0;\n  flex-grow: 1;\n  flex-shrink: 1;\n  min-width: 0;\n  min-height: 0;\n  display: flex;\n}\n\n.vuuDrawer-peekaboo {\n  flex-basis: var(--drawer-peek-size);\n  flex-grow: 0;\n  flex-shrink: 0;\n}\n\n.vuuDrawer-inline.vuuDrawer-open {\n  flex-basis: var(--drawer-size);\n  flex-grow: 0;\n  flex-shrink: 0;\n}\n\n.vuuDrawer-liner {\n  background-color: var(--drawer-bg);\n  overflow: hidden;\n  position: relative;\n}\n\n.vuuDrawer-content {\n  height: 100%;\n  overflow: hidden;\n  position: absolute;\n  top: 0;\n  right: var(--drawer-peek-size);\n  transition: right;\n  transition-duration: var(--drawer-transition-duration);\n  width: 100%;\n  flex: 1 1 100%;\n}\n\n.vuuDrawer-open .vuuDrawer-content {\n  right: 0;\n}\n\n/* .vuuDrawer:not(.vuuDrawer-open) .vuuDrawer-liner > * {\n  display: none;\n} */\n\n.vuuDrawer-left {\n  border-right: var(--drawer-leading-edge-border);\n}\n.vuuDrawer-right {\n  border-left: var(--drawer-leading-edge-border);\n}\n.vuuDrawer-top {\n  border-bottom: var(--drawer-leading-edge-border);\n}\n.vuuDrawer-bottom {\n  border-top: var(--drawer-leading-edge-border);\n}\n\n.vuuDrawer-left .vuuDrawer-liner,\n.vuuDrawer-right .vuuDrawer-liner {\n  height: 100%;\n  transition: width;\n}\n\n.vuuDrawer-top .vuuDrawer-liner,\n.vuuDrawer-bottom .vuuDrawer-liner {\n  width: 100%;\n  transition: height;\n}\n\n.vuuDrawer-inline .vuuDrawer-liner {\n  width: 100%;\n  height: 100%;\n}\n\n.vuuDrawer-over .vuuDrawer-liner {\n  position: absolute;\n  transition-duration: 0.4s;\n}\n\n.vuuDrawer-over.vuuDrawer-left .vuuDrawer-liner {\n  top: 0;\n  left: 0;\n  width: 0;\n}\n\n.vuuDrawer-over.vuuDrawer-right .vuuDrawer-liner {\n  top: 0;\n  right: 0;\n  width: 0;\n}\n\n.vuuDrawer-over.vuuDrawer-top .vuuDrawer-liner {\n  height: 0;\n  top: 0;\n  left: 0;\n}\n\n.vuuDrawer-over.vuuDrawer-bottom .vuuDrawer-liner {\n  bottom: 0;\n  height: 0;\n  left: 0;\n}\n\n.vuuDrawer-left.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner,\n.vuuDrawer-right.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner {\n  width: var(--drawer-peek-size);\n}\n\n.vuuDrawer-top.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner,\n.vuuDrawer-bottom.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner {\n  height: var(--drawer-peek-size);\n}\n\n.vuuDrawer-left.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner,\n.vuuDrawer-right.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner {\n  width: var(--drawer-size);\n}\n\n.vuuDrawer-top.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner,\n.vuuDrawer-bottom.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner {\n  height: var(--drawer-size);\n}\n\n.vuuDrawer-top,\n.vuuDrawer-left {\n  order: 0;\n}\n\n.vuuDrawer-bottom,\n.vuuDrawer-right {\n  order: 99;\n}\n\n.vuuDrawer-left,\n.vuuDrawer-right {\n  flex-direction: column;\n}\n\n.vuuToggleButton-container {\n  --saltButton-height: 28px;\n  --saltButton-width: 28px;\n  --vuu-icon-size: 12px;\n  flex: 0 0 28px;\n}\n\n.vuuDrawer-open {\n  --vuu-close-icon-svg: var(--svg-chevron-double-left);\n\n}\n";
+
+export { drawerCss as default };
+//# sourceMappingURL=Drawer.css.js.map

package/esm/dock-layout/Drawer.css.js.map

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

package/esm/dock-layout/Drawer.js

@@ -1,7 +1,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useControlled, Button } from '@salt-ds/core';
 import cx from 'clsx';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import { useCallback } from 'react';
+import drawerCss from './Drawer.css.js';
 
 const classBase = "vuuDrawer";
 const sizeAttribute = (value) => {
@@ -38,6 +41,12 @@ const Drawer = ({
   toggleButton,
   ...props
 }) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-drawer",
+    css: drawerCss,
+    window: targetWindow
+  });
   const [open, setOpen] = useControlled({
     controlled: openProp,
     default: defaultOpen ?? false,

package/esm/dock-layout/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sources":["../../src/dock-layout/Drawer.tsx"],"sourcesContent":["import { Button, useControlled } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { CSSProperties, HTMLAttributes, useCallback } from \"react\";\n\nimport \"./Drawer.css\";\n\nconst classBase = \"vuuDrawer\";\n\nconst sizeAttribute = (value: string | number) => {\n  return typeof value === \"string\" ? value : value + \"px\";\n};\n\nconst getStyle = (\n  styleProp?: CSSProperties,\n  sizeOpen?: number,\n  sizeClosed?: number\n) => {\n  const hasSizeOpen = sizeOpen !== undefined;\n  const hasSizeClosed = sizeClosed !== undefined;\n\n  if (!styleProp && !hasSizeClosed && !hasSizeOpen) {\n    return undefined;\n  }\n\n  if (!hasSizeClosed && !hasSizeOpen) {\n    return styleProp;\n  }\n\n  return {\n    ...styleProp,\n    \"--drawer-size\": hasSizeOpen ? sizeAttribute(sizeOpen) : undefined,\n    \"--drawer-peek-size\": hasSizeClosed ? sizeAttribute(sizeClosed) : undefined,\n  };\n};\n\nexport interface DrawerProps extends HTMLAttributes<HTMLDivElement> {\n  clickToOpen?: boolean;\n  defaultOpen?: boolean;\n  inline?: boolean;\n  open?: boolean;\n  peekaboo?: boolean;\n  position?: \"left\" | \"right\" | \"top\" | \"bottom\";\n  sizeOpen?: number;\n  sizeClosed?: number;\n  toggleButton?: \"start\" | \"end\";\n}\nconst Drawer = ({\n  children,\n  className: classNameProp,\n  clickToOpen,\n  defaultOpen,\n  sizeOpen,\n  sizeClosed,\n  style: styleProp,\n  open: openProp,\n  position = \"left\",\n  inline,\n  onClick,\n  peekaboo = false,\n  toggleButton,\n  ...props\n}: DrawerProps) => {\n  const [open, setOpen] = useControlled({\n    controlled: openProp,\n    default: defaultOpen ?? false,\n    name: \"Drawer\",\n    state: \"open\",\n  });\n\n  console.log(`Drawer sizeOpen ${sizeOpen} sizeClosed ${sizeClosed}`);\n\n  const className = cx(classBase, classNameProp, `${classBase}-${position}`, {\n    [`${classBase}-open`]: open,\n    [`${classBase}-inline`]: inline,\n    [`${classBase}-over`]: !inline,\n    [`${classBase}-peekaboo`]: peekaboo,\n  });\n\n  const toggleDrawer = useCallback(() => {\n    setOpen(!open);\n  }, [open, setOpen]);\n\n  const style = getStyle(styleProp, sizeOpen, sizeClosed);\n\n  const handleClick = clickToOpen ? toggleDrawer : onClick;\n\n  const renderToggleButton = () => (\n    <div className={cx(\"vuuToggleButton-container\")}>\n      {open ? (\n        <Button\n          aria-label=\"close\"\n          onClick={toggleDrawer}\n          data-icon=\"close\"\n          variant=\"secondary\"\n        />\n      ) : (\n        <Button\n          aria-label=\"open\"\n          onClick={toggleDrawer}\n          data-icon=\"close\"\n          variant=\"secondary\"\n        />\n      )}\n    </div>\n  );\n\n  return (\n    <div {...props} className={className} onClick={handleClick} style={style}>\n      {toggleButton == \"start\" ? renderToggleButton() : null}\n      <div className={`${classBase}-liner`}>\n        <div className={`${classBase}-content`}>{children}</div>\n      </div>\n      {toggleButton == \"end\" ? renderToggleButton() : null}\n    </div>\n  );\n};\nDrawer.displayName = \"Drawer\";\n\nexport default Drawer;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Drawer.js","sources":["../../src/dock-layout/Drawer.tsx"],"sourcesContent":["import { Button, useControlled } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { CSSProperties, HTMLAttributes, useCallback } from \"react\";\n\nimport drawerCss from \"./Drawer.css\";\n\nconst classBase = \"vuuDrawer\";\n\nconst sizeAttribute = (value: string | number) => {\n  return typeof value === \"string\" ? value : value + \"px\";\n};\n\nconst getStyle = (\n  styleProp?: CSSProperties,\n  sizeOpen?: number,\n  sizeClosed?: number\n) => {\n  const hasSizeOpen = sizeOpen !== undefined;\n  const hasSizeClosed = sizeClosed !== undefined;\n\n  if (!styleProp && !hasSizeClosed && !hasSizeOpen) {\n    return undefined;\n  }\n\n  if (!hasSizeClosed && !hasSizeOpen) {\n    return styleProp;\n  }\n\n  return {\n    ...styleProp,\n    \"--drawer-size\": hasSizeOpen ? sizeAttribute(sizeOpen) : undefined,\n    \"--drawer-peek-size\": hasSizeClosed ? sizeAttribute(sizeClosed) : undefined,\n  };\n};\n\nexport interface DrawerProps extends HTMLAttributes<HTMLDivElement> {\n  clickToOpen?: boolean;\n  defaultOpen?: boolean;\n  inline?: boolean;\n  open?: boolean;\n  peekaboo?: boolean;\n  position?: \"left\" | \"right\" | \"top\" | \"bottom\";\n  sizeOpen?: number;\n  sizeClosed?: number;\n  toggleButton?: \"start\" | \"end\";\n}\nconst Drawer = ({\n  children,\n  className: classNameProp,\n  clickToOpen,\n  defaultOpen,\n  sizeOpen,\n  sizeClosed,\n  style: styleProp,\n  open: openProp,\n  position = \"left\",\n  inline,\n  onClick,\n  peekaboo = false,\n  toggleButton,\n  ...props\n}: DrawerProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-drawer\",\n    css: drawerCss,\n    window: targetWindow,\n  });\n\n  const [open, setOpen] = useControlled({\n    controlled: openProp,\n    default: defaultOpen ?? false,\n    name: \"Drawer\",\n    state: \"open\",\n  });\n\n  console.log(`Drawer sizeOpen ${sizeOpen} sizeClosed ${sizeClosed}`);\n\n  const className = cx(classBase, classNameProp, `${classBase}-${position}`, {\n    [`${classBase}-open`]: open,\n    [`${classBase}-inline`]: inline,\n    [`${classBase}-over`]: !inline,\n    [`${classBase}-peekaboo`]: peekaboo,\n  });\n\n  const toggleDrawer = useCallback(() => {\n    setOpen(!open);\n  }, [open, setOpen]);\n\n  const style = getStyle(styleProp, sizeOpen, sizeClosed);\n\n  const handleClick = clickToOpen ? toggleDrawer : onClick;\n\n  const renderToggleButton = () => (\n    <div className={cx(\"vuuToggleButton-container\")}>\n      {open ? (\n        <Button\n          aria-label=\"close\"\n          onClick={toggleDrawer}\n          data-icon=\"close\"\n          variant=\"secondary\"\n        />\n      ) : (\n        <Button\n          aria-label=\"open\"\n          onClick={toggleDrawer}\n          data-icon=\"close\"\n          variant=\"secondary\"\n        />\n      )}\n    </div>\n  );\n\n  return (\n    <div {...props} className={className} onClick={handleClick} style={style}>\n      {toggleButton == \"start\" ? renderToggleButton() : null}\n      <div className={`${classBase}-liner`}>\n        <div className={`${classBase}-content`}>{children}</div>\n      </div>\n      {toggleButton == \"end\" ? renderToggleButton() : null}\n    </div>\n  );\n};\nDrawer.displayName = \"Drawer\";\n\nexport default Drawer;\n"],"names":[],"mappings":"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"}

package/esm/drag-drop/DropMenu.css.js

@@ -0,0 +1,4 @@
+var dropMenuCss = ".vuuDropMenu {\n  margin-left: -50%;\n  margin-bottom: -50%;\n  background-color: white;\n  border: solid 1px var(--grey40);\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  padding: 3px;\n  border-radius: 3px;\n}\n\n.vuuDropMenu-left,\n.vuuDropMenu-right {\n  flex-direction: column;\n}\n\n.vuuDropMenu-bottom {\n  transform: translate(0, -30px);\n}\n\n.vuuDropMenu-right {\n  transform: translate(-20px, 0);\n}\n\n.vuuDropMenu-item {\n  --vuu-icon-size: 20px;\n  width: 32px;\n  height: 32px;\n  background-color: var(--grey20);\n  border-bottom: solid 1px var(--grey40);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.vuuDropMenu-item .Icon {\n  transform: scale(1.25);\n  transform-origin: center center;\n}\n\n.vuuDropMenu-left .vuuDropMenu-item .hwIcon {\n  transform: scale(1.25) rotate(180deg);\n  transform-origin: center center;\n}\n\n.vuuDropMenu-top .vuuDropMenu-item .hwIcon {\n  transform: scale(1.25) rotate(270deg);\n  transform-origin: center center;\n}\n\n.vuuDropMenu-bottom .vuuDropMenu-item .hwIcon {\n  transform: scale(1.25) rotate(90deg);\n  transform-origin: center center;\n}\n\n.vuuDropMenu-item .hwIcon-path {\n  fill: grey;\n}\n.vuuDropMenu-item:hover {\n  background-color: rgba(200, 200, 200, 0.5);\n}\n\n.vuuDropMenu-item:hover .hwIcon-path-2 {\n  fill: blue;\n}\n\n.vuuDropMenu-item:last-child {\n  border-bottom: none;\n}\n";
+
+export { dropMenuCss as default };
+//# sourceMappingURL=DropMenu.css.js.map

package/esm/drag-drop/DropMenu.css.js.map

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

package/esm/drag-drop/DropMenu.js

@@ -1,5 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
 import cx from 'clsx';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import dropMenuCss from './DropMenu.css.js';
 
 function computeMenuPosition(dropTarget, offsetTop = 0, offsetLeft = 0) {
   const { pos, clientRect: box } = dropTarget;
@@ -20,6 +23,12 @@ const DropMenu = ({
   onHover,
   orientation
 }) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-drop-menu",
+    css: dropMenuCss,
+    window: targetWindow
+  });
   const dropTargets = dropTarget.toArray();
   return /* @__PURE__ */ jsx(
     "div",

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

@@ -1 +1 @@
-{"version":3,"file":"DropMenu.js","sources":["../../src/drag-drop/DropMenu.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { HTMLAttributes } from \"react\";\nimport { DropTarget } from \"./DropTarget\";\n\nimport \"./DropMenu.css\";\n\nexport function computeMenuPosition(\n  dropTarget: DropTarget,\n  offsetTop = 0,\n  offsetLeft = 0\n): [number, number, \"left\" | \"bottom\" | \"right\" | \"top\"] {\n  const { pos, clientRect: box } = dropTarget;\n  const menuOffset = 20;\n\n  return pos.position.West\n    ? [box.left - offsetLeft + menuOffset, pos.y - offsetTop, \"left\"]\n    : pos.position.South\n    ? [pos.x - offsetLeft, box.bottom - offsetTop - menuOffset, \"bottom\"]\n    : pos.position.East\n    ? [box.right - offsetLeft - menuOffset, pos.y - offsetTop, \"right\"]\n    : /* North | Header*/ [\n        pos.x - offsetLeft,\n        box.top - offsetTop + menuOffset,\n        \"top\",\n      ];\n}\n\nconst classBase = \"vuuDropMenu\";\n\nexport interface DropMenuProps extends HTMLAttributes<HTMLDivElement> {\n  dropTarget: DropTarget;\n  onHover: (target: DropTarget | null) => void;\n  orientation?: \"left\" | \"top\" | \"right\" | \"bottom\";\n}\n\nexport const DropMenu = ({\n  className,\n  dropTarget,\n  onHover,\n  orientation,\n}: DropMenuProps) => {\n  const dropTargets = dropTarget.toArray();\n  // TODO we have all the information here to draw a mini target map\n  // but maybe thats overkill ...\n\n  return (\n    <div\n      className={cx(classBase, className, `${classBase}-${orientation}`)}\n      onMouseLeave={() => onHover(null)}\n    >\n      {dropTargets.map((target, i) => (\n        <div\n          key={i}\n          className={`${classBase}-item`}\n          data-icon={i === 0 ? \"column-2A\" : \"column-2B\"}\n          onMouseEnter={() => onHover(target)}\n        />\n      ))}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;AAMO,SAAS,mBACd,CAAA,UAAA,EACA,SAAY,GAAA,CAAA,EACZ,aAAa,CAC0C,EAAA;AACvD,EAAA,MAAM,EAAE,GAAA,EAAK,UAAY,EAAA,GAAA,EAAQ,GAAA,UAAA,CAAA;AACjC,EAAA,MAAM,UAAa,GAAA,EAAA,CAAA;AAEnB,EAAA,OAAO,IAAI,QAAS,CAAA,IAAA,GAChB,CAAC,GAAA,CAAI,OAAO,UAAa,GAAA,UAAA,EAAY,GAAI,CAAA,CAAA,GAAI,WAAW,MAAM,CAAA,GAC9D,GAAI,CAAA,QAAA,CAAS,QACb,CAAC,GAAA,CAAI,CAAI,GAAA,UAAA,EAAY,IAAI,MAAS,GAAA,SAAA,GAAY,UAAY,EAAA,QAAQ,IAClE,GAAI,CAAA,QAAA,CAAS,IACb,GAAA,CAAC,IAAI,KAAQ,GAAA,UAAA,GAAa,YAAY,GAAI,CAAA,CAAA,GAAI,WAAW,OAAO,CAAA;AAAA;AAAA,IAC5C;AAAA,MAClB,IAAI,CAAI,GAAA,UAAA;AAAA,MACR,GAAA,CAAI,MAAM,SAAY,GAAA,UAAA;AAAA,MACtB,KAAA;AAAA,KACF;AAAA,GAAA,CAAA;AACN,CAAA;AAEA,MAAM,SAAY,GAAA,aAAA,CAAA;AAQX,MAAM,WAAW,CAAC;AAAA,EACvB,SAAA;AAAA,EACA,UAAA;AAAA,EACA,OAAA;AAAA,EACA,WAAA;AACF,CAAqB,KAAA;AACnB,EAAM,MAAA,WAAA,GAAc,WAAW,OAAQ,EAAA,CAAA;AAIvC,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,GAAG,SAAW,EAAA,SAAA,EAAW,GAAG,SAAS,CAAA,CAAA,EAAI,WAAW,CAAE,CAAA,CAAA;AAAA,MACjE,YAAA,EAAc,MAAM,OAAA,CAAQ,IAAI,CAAA;AAAA,MAE/B,QAAY,EAAA,WAAA,CAAA,GAAA,CAAI,CAAC,MAAA,EAAQ,CACxB,qBAAA,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UAEC,SAAA,EAAW,GAAG,SAAS,CAAA,KAAA,CAAA;AAAA,UACvB,WAAA,EAAW,CAAM,KAAA,CAAA,GAAI,WAAc,GAAA,WAAA;AAAA,UACnC,YAAA,EAAc,MAAM,OAAA,CAAQ,MAAM,CAAA;AAAA,SAAA;AAAA,QAH7B,CAAA;AAAA,OAKR,CAAA;AAAA,KAAA;AAAA,GACH,CAAA;AAEJ;;;;"}
+{"version":3,"file":"DropMenu.js","sources":["../../src/drag-drop/DropMenu.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes } from \"react\";\nimport { DropTarget } from \"./DropTarget\";\n\nimport dropMenuCss from \"./DropMenu.css\";\n\nexport function computeMenuPosition(\n  dropTarget: DropTarget,\n  offsetTop = 0,\n  offsetLeft = 0\n): [number, number, \"left\" | \"bottom\" | \"right\" | \"top\"] {\n  const { pos, clientRect: box } = dropTarget;\n  const menuOffset = 20;\n\n  return pos.position.West\n    ? [box.left - offsetLeft + menuOffset, pos.y - offsetTop, \"left\"]\n    : pos.position.South\n    ? [pos.x - offsetLeft, box.bottom - offsetTop - menuOffset, \"bottom\"]\n    : pos.position.East\n    ? [box.right - offsetLeft - menuOffset, pos.y - offsetTop, \"right\"]\n    : /* North | Header*/ [\n        pos.x - offsetLeft,\n        box.top - offsetTop + menuOffset,\n        \"top\",\n      ];\n}\n\nconst classBase = \"vuuDropMenu\";\n\nexport interface DropMenuProps extends HTMLAttributes<HTMLDivElement> {\n  dropTarget: DropTarget;\n  onHover: (target: DropTarget | null) => void;\n  orientation?: \"left\" | \"top\" | \"right\" | \"bottom\";\n}\n\nexport const DropMenu = ({\n  className,\n  dropTarget,\n  onHover,\n  orientation,\n}: DropMenuProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-drop-menu\",\n    css: dropMenuCss,\n    window: targetWindow,\n  });\n\n  const dropTargets = dropTarget.toArray();\n  // TODO we have all the information here to draw a mini target map\n  // but maybe thats overkill ...\n\n  return (\n    <div\n      className={cx(classBase, className, `${classBase}-${orientation}`)}\n      onMouseLeave={() => onHover(null)}\n    >\n      {dropTargets.map((target, i) => (\n        <div\n          key={i}\n          className={`${classBase}-item`}\n          data-icon={i === 0 ? \"column-2A\" : \"column-2B\"}\n          onMouseEnter={() => onHover(target)}\n        />\n      ))}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAQO,SAAS,mBACd,CAAA,UAAA,EACA,SAAY,GAAA,CAAA,EACZ,aAAa,CAC0C,EAAA;AACvD,EAAA,MAAM,EAAE,GAAA,EAAK,UAAY,EAAA,GAAA,EAAQ,GAAA,UAAA,CAAA;AACjC,EAAA,MAAM,UAAa,GAAA,EAAA,CAAA;AAEnB,EAAA,OAAO,IAAI,QAAS,CAAA,IAAA,GAChB,CAAC,GAAA,CAAI,OAAO,UAAa,GAAA,UAAA,EAAY,GAAI,CAAA,CAAA,GAAI,WAAW,MAAM,CAAA,GAC9D,GAAI,CAAA,QAAA,CAAS,QACb,CAAC,GAAA,CAAI,CAAI,GAAA,UAAA,EAAY,IAAI,MAAS,GAAA,SAAA,GAAY,UAAY,EAAA,QAAQ,IAClE,GAAI,CAAA,QAAA,CAAS,IACb,GAAA,CAAC,IAAI,KAAQ,GAAA,UAAA,GAAa,YAAY,GAAI,CAAA,CAAA,GAAI,WAAW,OAAO,CAAA;AAAA;AAAA,IAC5C;AAAA,MAClB,IAAI,CAAI,GAAA,UAAA;AAAA,MACR,GAAA,CAAI,MAAM,SAAY,GAAA,UAAA;AAAA,MACtB,KAAA;AAAA,KACF;AAAA,GAAA,CAAA;AACN,CAAA;AAEA,MAAM,SAAY,GAAA,aAAA,CAAA;AAQX,MAAM,WAAW,CAAC;AAAA,EACvB,SAAA;AAAA,EACA,UAAA;AAAA,EACA,OAAA;AAAA,EACA,WAAA;AACF,CAAqB,KAAA;AACnB,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,eAAA;AAAA,IACR,GAAK,EAAA,WAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,WAAA,GAAc,WAAW,OAAQ,EAAA,CAAA;AAIvC,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,GAAG,SAAW,EAAA,SAAA,EAAW,GAAG,SAAS,CAAA,CAAA,EAAI,WAAW,CAAE,CAAA,CAAA;AAAA,MACjE,YAAA,EAAc,MAAM,OAAA,CAAQ,IAAI,CAAA;AAAA,MAE/B,QAAY,EAAA,WAAA,CAAA,GAAA,CAAI,CAAC,MAAA,EAAQ,CACxB,qBAAA,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UAEC,SAAA,EAAW,GAAG,SAAS,CAAA,KAAA,CAAA;AAAA,UACvB,WAAA,EAAW,CAAM,KAAA,CAAA,GAAI,WAAc,GAAA,WAAA;AAAA,UACnC,YAAA,EAAc,MAAM,OAAA,CAAQ,MAAM,CAAA;AAAA,SAAA;AAAA,QAH7B,CAAA;AAAA,OAKR,CAAA;AAAA,KAAA;AAAA,GACH,CAAA;AAEJ;;;;"}

package/esm/drag-drop/DropTargetRenderer.js

@@ -23,11 +23,13 @@ function insertSVGRoot() {
     const root = document.getElementById("root");
     const container = document.createElement("div");
     container.id = "hw-drag-canvas";
+    container.style.cssText = `visibility:hidden;z-index:10;position:absolute;top:0px;left:0;right:0;bottom:0;background-color:transparent`;
     container.innerHTML = `
-      <svg width="100%" height="100%">
-        <path id="hw-drop-guides" />
+      <svg width="100%" height="100%" style="position: absolute;">
+        <path id="hw-drop-guides" style="fill: none; stroke: rgba(0, 0, 0, 0.3);stroke-dasharray: 2 3"/>
         <path
           id="vuu-drop-outline"
+          style="fill:rgba(0,0,255,.3);stroke:none;stroke-dasharray:4 2"
           d="M300,132 L380,132 L380,100 L460,100 L460,132, L550,132 L550,350 L300,350z">
           <animate
             attributeName="d"
@@ -50,6 +52,12 @@ class DropTargetCanvas {
     insertSVGRoot();
   }
   prepare(dragRect, tabMode = "full-view") {
+    const dragCanvas = document.getElementById("hw-drag-canvas");
+    if (dragCanvas) {
+      dragCanvas.style.visibility = "visible";
+    } else {
+      throw Error("DropTargetRenderer.prepare no drag canvas detected");
+    }
     document.body.classList.add("drawing");
     this.currentPath = null;
     this.tabMode = tabMode;
@@ -62,7 +70,10 @@ class DropTargetCanvas {
   clear() {
     _hoverDropTarget = null;
     clearShiftedTab();
-    document.body.classList.remove("drawing");
+    const dragCanvas = document.getElementById("hw-drag-canvas");
+    if (dragCanvas) {
+      dragCanvas.style.visibility = "hidden";
+    }
     PopupService.hidePopup();
   }
   get hoverDropTarget() {