@dxos/storybook-utils 0.8.4-main.f9ba587 → 0.8.4-main.fffef41

package/dist/lib/browser/index.mjs

@@ -13,95 +13,127 @@ var DxThemeEditor = createComponent({
 });
 var ThemeEditor = /* @__PURE__ */ memo(DxThemeEditor);
 
-// src/decorators/withLayout.tsx
-import defaultsDeep from "lodash.defaultsdeep";
+// src/components/CardContainers/ExtrinsicCardContainer.tsx
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
 import React2 from "react";
-import { DensityProvider } from "@dxos/react-ui";
-import { mx } from "@dxos/react-ui-theme";
-var defaultOptions = {
-  density: "fine"
-};
-var providers = [
-  (children, options) => {
-    return options?.density ? /* @__PURE__ */ React2.createElement(DensityProvider, {
-      density: options.density
-    }, children) : children;
-  }
-];
-var withLayout = ({ classNames, fullscreen, Container = fullscreen ? FullscreenContainer : DefaultContainer, ...providedOptions } = {}) => {
-  return (Story, _context) => {
-    const children = /* @__PURE__ */ React2.createElement(Container, {
-      classNames,
-      fullscreen
-    }, /* @__PURE__ */ React2.createElement(Story, null));
-    const options = defaultsDeep({}, providedOptions, defaultOptions);
-    return providers.reduceRight((acc, provider) => provider(acc, options), children);
-  };
-};
-var layoutCentered = "bg-deckSurface justify-center overflow-y-auto";
-var DefaultContainer = ({ children, classNames }) => {
+import { ResizeHandle, resizeAttributes, sizeStyle } from "@dxos/react-ui-dnd";
+var DEFAULT_INLINE_SIZE = 24;
+var MIN_INLINE_SIZE = 8;
+var DEFAULT_BLOCK_SIZE = 24;
+var MIN_BLOCK_SIZE = 8;
+var ExtrinsicCardContainer = ({ children, defaultInlineSize, inlineSize: propInlineSize, defaultBlockSize, blockSize: propBlockSize, onInlineSizeChange, onBlockSizeChange }) => {
+  const [inlineSize = DEFAULT_INLINE_SIZE, setInlineSize] = useControllableState({
+    prop: propInlineSize,
+    defaultProp: defaultInlineSize,
+    onChange: onInlineSizeChange
+  });
+  const [blockSize = DEFAULT_BLOCK_SIZE, setBlockSize] = useControllableState({
+    prop: propBlockSize,
+    defaultProp: defaultBlockSize,
+    onChange: onBlockSizeChange
+  });
   return /* @__PURE__ */ React2.createElement("div", {
-    role: "none",
-    className: mx(classNames)
-  }, children);
+    className: "grid relative border border-dashed border-subduedSeparator p-4 rounded-lg overflow-hidden contain-layout",
+    style: {
+      ...sizeStyle(inlineSize, "horizontal"),
+      ...sizeStyle(blockSize, "vertical")
+    },
+    ...resizeAttributes
+  }, children, /* @__PURE__ */ React2.createElement(ResizeHandle, {
+    side: "inline-end",
+    fallbackSize: DEFAULT_INLINE_SIZE,
+    minSize: MIN_INLINE_SIZE,
+    size: inlineSize,
+    onSizeChange: setInlineSize
+  }), /* @__PURE__ */ React2.createElement(ResizeHandle, {
+    side: "block-end",
+    fallbackSize: DEFAULT_BLOCK_SIZE,
+    minSize: MIN_BLOCK_SIZE,
+    size: blockSize,
+    onSizeChange: setBlockSize
+  }));
 };
-var FullscreenContainer = ({ children, classNames }) => {
-  return /* @__PURE__ */ React2.createElement("div", {
-    role: "none",
-    className: mx("fixed inset-0 flex overflow-hidden", classNames)
-  }, children);
+
+// src/components/CardContainers/IntrinsicCardContainer.tsx
+import { useControllableState as useControllableState2 } from "@radix-ui/react-use-controllable-state";
+import React3 from "react";
+import { ResizeHandle as ResizeHandle2, resizeAttributes as resizeAttributes2, sizeStyle as sizeStyle2 } from "@dxos/react-ui-dnd";
+var DEFAULT_SIZE = 24;
+var MIN_SIZE = 8;
+var IntrinsicCardContainer = ({ children, defaultSize, size: propSize, onSizeChange }) => {
+  const [size = DEFAULT_SIZE, setSize] = useControllableState2({
+    prop: propSize,
+    defaultProp: defaultSize,
+    onChange: onSizeChange
+  });
+  return /* @__PURE__ */ React3.createElement("div", {
+    className: "relative border border-dashed border-subduedSeparator p-4 rounded-lg",
+    style: sizeStyle2(size, "horizontal"),
+    ...resizeAttributes2
+  }, children, /* @__PURE__ */ React3.createElement(ResizeHandle2, {
+    side: "inline-end",
+    fallbackSize: DEFAULT_SIZE,
+    minSize: MIN_SIZE,
+    size,
+    onSizeChange: setSize
+  }));
 };
-var ColumnContainer = ({ children, classNames = "w-[30rem]", ...props }) => {
-  return /* @__PURE__ */ React2.createElement(FullscreenContainer, {
-    classNames: "justify-center bg-modalSurface",
-    ...props
-  }, /* @__PURE__ */ React2.createElement("div", {
-    role: "none",
-    className: mx("flex flex-col h-full overflow-y-auto bg-baseSurface", classNames)
-  }, children));
+
+// src/components/CardContainers/PopoverCardContainer.tsx
+import React4 from "react";
+import { Icon, Popover } from "@dxos/react-ui";
+var PopoverCardContainer = ({ children, icon = "ph--placeholder--regular" }) => {
+  return /* @__PURE__ */ React4.createElement(Popover.Root, {
+    open: true
+  }, /* @__PURE__ */ React4.createElement(Popover.Content, {
+    onOpenAutoFocus: (event) => event.preventDefault()
+  }, /* @__PURE__ */ React4.createElement(Popover.Viewport, null, children), /* @__PURE__ */ React4.createElement(Popover.Arrow, null)), /* @__PURE__ */ React4.createElement(Popover.Trigger, null, /* @__PURE__ */ React4.createElement(Icon, {
+    icon,
+    size: 5
+  })));
 };
 
-// src/decorators/withTheme.tsx
-import React3, { memo as memo2 } from "react";
-import { ThemeProvider, Tooltip } from "@dxos/react-ui";
-import { defaultTx } from "@dxos/react-ui-theme";
-var withTheme = (Story, context) => {
-  const { globals: { theme }, parameters: { translations } } = context;
-  const MemoizedStory = /* @__PURE__ */ memo2(Story);
-  return /* @__PURE__ */ React3.createElement(ThemeProvider, {
-    tx: defaultTx,
-    themeMode: theme,
-    resourceExtensions: translations,
-    noCache: true
-  }, /* @__PURE__ */ React3.createElement(Tooltip.Provider, null, /* @__PURE__ */ React3.createElement(MemoizedStory, null)));
+// src/decorators/withLayout.tsx
+import React5 from "react";
+var withLayout = (Story, context) => {
+  switch (context.parameters.layout) {
+    case "fullscreen":
+      return /* @__PURE__ */ React5.createElement("div", {
+        role: "none",
+        className: "fixed inset-0 flex flex-col overflow-hidden bg-baseSurface"
+      }, /* @__PURE__ */ React5.createElement(Story, null));
+    default:
+      return /* @__PURE__ */ React5.createElement(Story, null);
+  }
 };
 
 // src/decorators/withThemeEditor.tsx
-import React4, { memo as memo3 } from "react";
+import React6, { memo as memo2 } from "react";
 var withThemeEditor = (Story, context) => {
-  const MemoizedStory = /* @__PURE__ */ memo3(Story);
-  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(MemoizedStory, null), /* @__PURE__ */ React4.createElement("div", {
+  const MemoizedStory = /* @__PURE__ */ memo2(Story);
+  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(MemoizedStory, null), /* @__PURE__ */ React6.createElement("div", {
     className: "absolute top-4 bottom-4 right-4 z-10"
-  }, /* @__PURE__ */ React4.createElement("div", {
-    className: "h-full is-[35rem] overflow-auto bg-baseSurface border border-separator rounded"
-  }, /* @__PURE__ */ React4.createElement(ThemeEditor, null))));
+  }, /* @__PURE__ */ React6.createElement("div", {
+    className: "bs-full is-[35rem] overflow-auto bg-baseSurface border border-separator rounded"
+  }, /* @__PURE__ */ React6.createElement(ThemeEditor, null))));
 };
 
 // src/util.tsx
-import React5 from "react";
-var render = (r) => (args) => /* @__PURE__ */ React5.createElement(React5.Fragment, null, r(args) ?? /* @__PURE__ */ React5.createElement("div", null));
+import React7 from "react";
+var render = (Story) => (args) => {
+  const result = /* @__PURE__ */ React7.createElement(Story, args);
+  return result ?? /* @__PURE__ */ React7.createElement("div", null);
+};
 
 // src/index.ts
 registerSignalsRuntime();
 export {
-  ColumnContainer,
-  DefaultContainer,
-  FullscreenContainer,
+  ExtrinsicCardContainer,
+  IntrinsicCardContainer,
+  PopoverCardContainer,
   ThemeEditor,
-  layoutCentered,
   render,
   withLayout,
-  withTheme,
   withThemeEditor
 };
 //# sourceMappingURL=index.mjs.map

package/dist/lib/browser/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/index.ts", "../../../src/components/ThemeEditor.tsx", "../../../src/decorators/withLayout.tsx", "../../../src/decorators/withTheme.tsx", "../../../src/decorators/withThemeEditor.tsx", "../../../src/util.tsx"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { registerSignalsRuntime } from '@dxos/echo-signals/react';\n\nexport { type Meta } from '@storybook/react';\n\nexport * from './components';\nexport * from './decorators';\nexport * from './util';\n\nregisterSignalsRuntime();\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport React, { memo } from 'react';\n\nimport { DxThemeEditor as NaturalDxThemeEditor } from '@dxos/lit-theme-editor';\nimport { createComponent } from '@dxos/lit-ui/react';\n\nimport '@dxos/lit-theme-editor/dx-theme-editor.pcss';\n\nconst DxThemeEditor = createComponent({\n  tagName: 'dx-theme-editor',\n  elementClass: NaturalDxThemeEditor,\n  react: React,\n});\n\nexport const ThemeEditor = memo(DxThemeEditor);\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Decorator } from '@storybook/react';\nimport defaultsDeep from 'lodash.defaultsdeep';\nimport React, { type PropsWithChildren, type JSX, type FC } from 'react';\n\nimport { type Density, DensityProvider, type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\ntype ProviderOptions = {\n  fullscreen?: boolean;\n  density?: Density;\n};\n\nconst defaultOptions: ProviderOptions = {\n  density: 'fine',\n};\n\ntype Provider = (children: JSX.Element, options: ProviderOptions) => JSX.Element;\n\nconst providers: Provider[] = [\n  (children, options) => {\n    return options?.density ? <DensityProvider density={options.density}>{children}</DensityProvider> : children;\n  },\n];\n\nexport type ContainerProps = ThemedClassName<PropsWithChildren<Pick<ProviderOptions, 'fullscreen'>>>;\n\nexport type WithLayoutProps = ThemedClassName<ProviderOptions & { Container?: FC<ContainerProps> }>;\n\n/**\n * Decorator to layout the story container, adding optional providers.\n */\nexport const withLayout = ({\n  classNames,\n  fullscreen,\n  Container = fullscreen ? FullscreenContainer : DefaultContainer,\n  ...providedOptions\n}: WithLayoutProps = {}): Decorator => {\n  // TODO(burdon): Inspect \"fullscreen\" parameter in context.\n  return (Story, _context) => {\n    const children = (\n      <Container classNames={classNames} fullscreen={fullscreen}>\n        <Story />\n      </Container>\n    );\n\n    const options = defaultsDeep({}, providedOptions, defaultOptions);\n    return providers.reduceRight((acc, provider) => provider(acc, options), children);\n  };\n};\n\n// TODO(burdon): Use consistently.\nexport const layoutCentered = 'bg-deckSurface justify-center overflow-y-auto';\n\nexport const DefaultContainer = ({ children, classNames }: ContainerProps) => {\n  return (\n    <div role='none' className={mx(classNames)}>\n      {children}\n    </div>\n  );\n};\n\nexport const FullscreenContainer = ({ children, classNames }: ContainerProps) => {\n  return (\n    <div role='none' className={mx('fixed inset-0 flex overflow-hidden', classNames)}>\n      {children}\n    </div>\n  );\n};\n\nexport const ColumnContainer = ({ children, classNames = 'w-[30rem]', ...props }: ContainerProps) => {\n  return (\n    <FullscreenContainer classNames='justify-center bg-modalSurface' {...props}>\n      <div role='none' className={mx('flex flex-col h-full overflow-y-auto bg-baseSurface', classNames)}>\n        {children}\n      </div>\n    </FullscreenContainer>\n  );\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Decorator } from '@storybook/react';\nimport React, { memo } from 'react';\n\nimport { type ThemeMode, ThemeProvider, Tooltip } from '@dxos/react-ui';\nimport { defaultTx } from '@dxos/react-ui-theme';\n\n/**\n * Adds theme decorator.\n */\nexport const withTheme: Decorator = (Story, context) => {\n  const {\n    globals: { theme },\n    parameters: { translations },\n  } = context;\n\n  // Prevent re-rendering of the story.\n  const MemoizedStory = memo(Story);\n\n  return (\n    <ThemeProvider tx={defaultTx} themeMode={theme as ThemeMode} resourceExtensions={translations} noCache>\n      <Tooltip.Provider>\n        <MemoizedStory />\n      </Tooltip.Provider>\n    </ThemeProvider>\n  );\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Decorator } from '@storybook/react';\nimport React, { memo } from 'react';\n\nimport { ThemeEditor } from '../components';\n\n/**\n * Show theme editor.\n */\n// TODO(burdon): Ideally move to storybook-addon-theme, but this has a build issue since the addon would depend on the vite theme plugin.\nexport const withThemeEditor: Decorator = (Story, context) => {\n  // Prevent re-rendering of the story.\n  const MemoizedStory = memo(Story);\n\n  return (\n    <>\n      <MemoizedStory />\n      <div className='absolute top-4 bottom-4 right-4 z-10'>\n        <div className='h-full is-[35rem] overflow-auto bg-baseSurface border border-separator rounded'>\n          <ThemeEditor />\n        </div>\n      </div>\n    </>\n  );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { type FC } from 'react';\n\n/**\n * Story renderer wrapper.\n */\nexport const render =\n  <T,>(r: FC<T>) =>\n  (args: T) => <>{r(args) ?? <div />}</>;\n"],
-  "mappings": "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",
-  "names": ["registerSignalsRuntime", "React", "memo", "DxThemeEditor", "NaturalDxThemeEditor", "createComponent", "DxThemeEditor", "createComponent", "tagName", "elementClass", "NaturalDxThemeEditor", "react", "React", "ThemeEditor", "memo", "defaultsDeep", "React", "DensityProvider", "mx", "defaultOptions", "density", "providers", "children", "options", "React", "DensityProvider", "withLayout", "classNames", "fullscreen", "Container", "FullscreenContainer", "DefaultContainer", "providedOptions", "Story", "_context", "defaultsDeep", "reduceRight", "acc", "provider", "layoutCentered", "div", "role", "className", "mx", "ColumnContainer", "props", "React", "memo", "ThemeProvider", "Tooltip", "defaultTx", "withTheme", "Story", "context", "globals", "theme", "parameters", "translations", "MemoizedStory", "memo", "React", "ThemeProvider", "tx", "defaultTx", "themeMode", "resourceExtensions", "noCache", "Tooltip", "Provider", "React", "memo", "withThemeEditor", "Story", "context", "MemoizedStory", "memo", "React", "div", "className", "ThemeEditor", "React", "render", "r", "args", "React", "div", "registerSignalsRuntime"]
+  "sources": ["../../../src/index.ts", "../../../src/components/ThemeEditor.tsx", "../../../src/components/CardContainers/ExtrinsicCardContainer.tsx", "../../../src/components/CardContainers/IntrinsicCardContainer.tsx", "../../../src/components/CardContainers/PopoverCardContainer.tsx", "../../../src/decorators/withLayout.tsx", "../../../src/decorators/withThemeEditor.tsx", "../../../src/util.tsx"],
+  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { registerSignalsRuntime } from '@dxos/echo-signals/react';\n\nexport * from './components';\nexport * from './decorators';\nexport * from './util';\n\nregisterSignalsRuntime();\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport React, { memo } from 'react';\n\nimport { DxThemeEditor as NaturalDxThemeEditor } from '@dxos/lit-theme-editor';\nimport { createComponent } from '@dxos/lit-ui/react';\n\nimport '@dxos/lit-theme-editor/dx-theme-editor.pcss';\n\nconst DxThemeEditor = createComponent({\n  tagName: 'dx-theme-editor',\n  elementClass: NaturalDxThemeEditor,\n  react: React,\n});\n\nexport const ThemeEditor = memo(DxThemeEditor);\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { type PropsWithChildren } from 'react';\n\nimport { ResizeHandle, type Size, resizeAttributes, sizeStyle } from '@dxos/react-ui-dnd';\n\n// Default size in rem.\nconst DEFAULT_INLINE_SIZE = 24;\nconst MIN_INLINE_SIZE = 8;\nconst DEFAULT_BLOCK_SIZE = 24;\nconst MIN_BLOCK_SIZE = 8;\n\nexport type ExtrinsicCardContainerProps = PropsWithChildren<{\n  defaultInlineSize?: Size;\n  inlineSize?: Size;\n  defaultBlockSize?: Size;\n  blockSize?: Size;\n  onInlineSizeChange?: (size: Size, commit?: boolean) => void;\n  onBlockSizeChange?: (size: Size, commit?: boolean) => void;\n}>;\n\nexport const ExtrinsicCardContainer = ({\n  children,\n  defaultInlineSize,\n  inlineSize: propInlineSize,\n  defaultBlockSize,\n  blockSize: propBlockSize,\n  onInlineSizeChange,\n  onBlockSizeChange,\n}: ExtrinsicCardContainerProps) => {\n  const [inlineSize = DEFAULT_INLINE_SIZE, setInlineSize] = useControllableState<Size>({\n    prop: propInlineSize,\n    defaultProp: defaultInlineSize,\n    onChange: onInlineSizeChange,\n  });\n\n  const [blockSize = DEFAULT_BLOCK_SIZE, setBlockSize] = useControllableState<Size>({\n    prop: propBlockSize,\n    defaultProp: defaultBlockSize,\n    onChange: onBlockSizeChange,\n  });\n\n  return (\n    <div\n      className='grid relative border border-dashed border-subduedSeparator p-4 rounded-lg overflow-hidden contain-layout'\n      style={{\n        ...sizeStyle(inlineSize, 'horizontal'),\n        ...sizeStyle(blockSize, 'vertical'),\n      }}\n      {...resizeAttributes}\n    >\n      {children}\n      <ResizeHandle\n        side='inline-end'\n        fallbackSize={DEFAULT_INLINE_SIZE}\n        minSize={MIN_INLINE_SIZE}\n        size={inlineSize}\n        onSizeChange={setInlineSize}\n      />\n      <ResizeHandle\n        side='block-end'\n        fallbackSize={DEFAULT_BLOCK_SIZE}\n        minSize={MIN_BLOCK_SIZE}\n        size={blockSize}\n        onSizeChange={setBlockSize}\n      />\n    </div>\n  );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { type PropsWithChildren } from 'react';\n\nimport { ResizeHandle, type Size, resizeAttributes, sizeStyle } from '@dxos/react-ui-dnd';\n\n// Default size in rem\nconst DEFAULT_SIZE = 24;\nconst MIN_SIZE = 8;\n\nexport type IntrinsicCardContainerProps = PropsWithChildren<{\n  defaultSize?: Size;\n  size?: Size;\n  onSizeChange?: (size: Size, commit?: boolean) => void;\n}>;\n\nexport const IntrinsicCardContainer = ({\n  children,\n  defaultSize,\n  size: propSize,\n  onSizeChange,\n}: IntrinsicCardContainerProps) => {\n  const [size = DEFAULT_SIZE, setSize] = useControllableState<Size>({\n    prop: propSize,\n    defaultProp: defaultSize,\n    onChange: onSizeChange,\n  });\n\n  return (\n    <div\n      className='relative border border-dashed border-subduedSeparator p-4 rounded-lg'\n      style={sizeStyle(size, 'horizontal')}\n      {...resizeAttributes}\n    >\n      {children}\n      <ResizeHandle\n        side='inline-end'\n        fallbackSize={DEFAULT_SIZE}\n        minSize={MIN_SIZE}\n        size={size}\n        onSizeChange={setSize}\n      />\n    </div>\n  );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport React, { type PropsWithChildren } from 'react';\n\nimport { Icon, Popover } from '@dxos/react-ui';\n\nexport const PopoverCardContainer = ({\n  children,\n  icon = 'ph--placeholder--regular',\n}: PropsWithChildren<{ icon: string }>) => {\n  return (\n    <Popover.Root open>\n      <Popover.Content onOpenAutoFocus={(event) => event.preventDefault()}>\n        <Popover.Viewport>{children}</Popover.Viewport>\n        <Popover.Arrow />\n      </Popover.Content>\n      <Popover.Trigger>\n        <Icon icon={icon} size={5} />\n      </Popover.Trigger>\n    </Popover.Root>\n  );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { type Decorator } from '@storybook/react';\nimport React from 'react';\n\nexport const withLayout: Decorator = (Story, context) => {\n  switch (context.parameters.layout) {\n    case 'fullscreen':\n      return (\n        <div role='none' className='fixed inset-0 flex flex-col overflow-hidden bg-baseSurface'>\n          <Story />\n        </div>\n      );\n\n    default:\n      return <Story />;\n  }\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Decorator } from '@storybook/react';\nimport React, { memo } from 'react';\n\nimport { ThemeEditor } from '../components/ThemeEditor';\n\n/**\n * Show theme editor.\n */\n// TODO(burdon): Ideally move to storybook-addon-theme, but this has a build issue since the addon would depend on the vite theme plugin.\nexport const withThemeEditor: Decorator = (Story, context) => {\n  // Prevent re-rendering of the story.\n  const MemoizedStory = memo(Story);\n\n  return (\n    <>\n      <MemoizedStory />\n      <div className='absolute top-4 bottom-4 right-4 z-10'>\n        <div className='bs-full is-[35rem] overflow-auto bg-baseSurface border border-separator rounded'>\n          <ThemeEditor />\n        </div>\n      </div>\n    </>\n  );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { type FC } from 'react';\n\n/**\n * Story renderer wrapper.\n */\nexport const render =\n  <T extends Record<string, any>>(Story: FC<T>) =>\n  (args: unknown) => {\n    const result = <Story {...(args as T)} />;\n    return result ?? <div />;\n  };\n"],
+  "mappings": "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",
+  "names": ["registerSignalsRuntime", "React", "memo", "DxThemeEditor", "NaturalDxThemeEditor", "createComponent", "DxThemeEditor", "createComponent", "tagName", "elementClass", "NaturalDxThemeEditor", "react", "React", "ThemeEditor", "memo", "useControllableState", "React", "ResizeHandle", "resizeAttributes", "sizeStyle", "DEFAULT_INLINE_SIZE", "MIN_INLINE_SIZE", "DEFAULT_BLOCK_SIZE", "MIN_BLOCK_SIZE", "ExtrinsicCardContainer", "children", "defaultInlineSize", "inlineSize", "propInlineSize", "defaultBlockSize", "blockSize", "propBlockSize", "onInlineSizeChange", "onBlockSizeChange", "setInlineSize", "useControllableState", "prop", "defaultProp", "onChange", "setBlockSize", "React", "div", "className", "style", "sizeStyle", "resizeAttributes", "ResizeHandle", "side", "fallbackSize", "minSize", "size", "onSizeChange", "useControllableState", "React", "ResizeHandle", "resizeAttributes", "sizeStyle", "DEFAULT_SIZE", "MIN_SIZE", "IntrinsicCardContainer", "children", "defaultSize", "size", "propSize", "onSizeChange", "setSize", "useControllableState", "prop", "defaultProp", "onChange", "React", "div", "className", "style", "sizeStyle", "resizeAttributes", "ResizeHandle", "side", "fallbackSize", "minSize", "React", "Icon", "Popover", "PopoverCardContainer", "children", "icon", "React", "Popover", "Root", "open", "Content", "onOpenAutoFocus", "event", "preventDefault", "Viewport", "Arrow", "Trigger", "Icon", "size", "React", "withLayout", "Story", "context", "parameters", "layout", "React", "div", "role", "className", "React", "memo", "withThemeEditor", "Story", "context", "MemoizedStory", "memo", "React", "div", "className", "ThemeEditor", "React", "render", "Story", "args", "result", "React", "div", "registerSignalsRuntime"]
 }

package/dist/lib/browser/meta.json

@@ -1 +1 @@
-{"inputs":{"src/components/ThemeEditor.tsx":{"bytes":1828,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/lit-theme-editor","kind":"import-statement","external":true},{"path":"@dxos/lit-ui/react","kind":"import-statement","external":true},{"path":"@dxos/lit-theme-editor/dx-theme-editor.pcss","kind":"import-statement","external":true}],"format":"esm"},"src/components/index.ts":{"bytes":584,"imports":[{"path":"src/components/ThemeEditor.tsx","kind":"import-statement","original":"./ThemeEditor"}],"format":"esm"},"src/decorators/withLayout.tsx":{"bytes":7744,"imports":[{"path":"lodash.defaultsdeep","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"src/decorators/withTheme.tsx":{"bytes":2822,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"src/decorators/withThemeEditor.tsx":{"bytes":2713,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"src/components/index.ts","kind":"import-statement","original":"../components"}],"format":"esm"},"src/decorators/index.ts":{"bytes":671,"imports":[{"path":"src/decorators/withLayout.tsx","kind":"import-statement","original":"./withLayout"},{"path":"src/decorators/withTheme.tsx","kind":"import-statement","original":"./withTheme"},{"path":"src/decorators/withThemeEditor.tsx","kind":"import-statement","original":"./withThemeEditor"}],"format":"esm"},"src/util.tsx":{"bytes":999,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/index.ts":{"bytes":1007,"imports":[{"path":"@dxos/echo-signals/react","kind":"import-statement","external":true},{"path":"src/components/index.ts","kind":"import-statement","original":"./components"},{"path":"src/decorators/index.ts","kind":"import-statement","original":"./decorators"},{"path":"src/util.tsx","kind":"import-statement","original":"./util"}],"format":"esm"}},"outputs":{"dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":8694},"dist/lib/browser/index.mjs":{"imports":[{"path":"@dxos/echo-signals/react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/lit-theme-editor","kind":"import-statement","external":true},{"path":"@dxos/lit-ui/react","kind":"import-statement","external":true},{"path":"@dxos/lit-theme-editor/dx-theme-editor.pcss","kind":"import-statement","external":true},{"path":"lodash.defaultsdeep","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"exports":["ColumnContainer","DefaultContainer","FullscreenContainer","ThemeEditor","layoutCentered","render","withLayout","withTheme","withThemeEditor"],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":93},"src/components/ThemeEditor.tsx":{"bytesInOutput":405},"src/components/index.ts":{"bytesInOutput":0},"src/decorators/withLayout.tsx":{"bytesInOutput":1764},"src/decorators/index.ts":{"bytesInOutput":0},"src/decorators/withTheme.tsx":{"bytesInOutput":608},"src/decorators/withThemeEditor.tsx":{"bytesInOutput":588},"src/util.tsx":{"bytesInOutput":181}},"bytes":4027}}}
+{"inputs":{"src/components/ThemeEditor.tsx":{"bytes":1828,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/lit-theme-editor","kind":"import-statement","external":true},{"path":"@dxos/lit-ui/react","kind":"import-statement","external":true},{"path":"@dxos/lit-theme-editor/dx-theme-editor.pcss","kind":"import-statement","external":true}],"format":"esm"},"src/components/CardContainers/ExtrinsicCardContainer.tsx":{"bytes":6611,"imports":[{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-dnd","kind":"import-statement","external":true}],"format":"esm"},"src/components/CardContainers/IntrinsicCardContainer.tsx":{"bytes":4021,"imports":[{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-dnd","kind":"import-statement","external":true}],"format":"esm"},"src/components/CardContainers/PopoverCardContainer.tsx":{"bytes":2566,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true}],"format":"esm"},"src/components/CardContainers/index.ts":{"bytes":764,"imports":[{"path":"src/components/CardContainers/ExtrinsicCardContainer.tsx","kind":"import-statement","original":"./ExtrinsicCardContainer"},{"path":"src/components/CardContainers/IntrinsicCardContainer.tsx","kind":"import-statement","original":"./IntrinsicCardContainer"},{"path":"src/components/CardContainers/PopoverCardContainer.tsx","kind":"import-statement","original":"./PopoverCardContainer"}],"format":"esm"},"src/components/index.ts":{"bytes":686,"imports":[{"path":"src/components/ThemeEditor.tsx","kind":"import-statement","original":"./ThemeEditor"},{"path":"src/components/CardContainers/index.ts","kind":"import-statement","original":"./CardContainers"}],"format":"esm"},"src/decorators/withLayout.tsx":{"bytes":1803,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/decorators/withThemeEditor.tsx":{"bytes":2746,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"src/components/ThemeEditor.tsx","kind":"import-statement","original":"../components/ThemeEditor"}],"format":"esm"},"src/decorators/index.ts":{"bytes":582,"imports":[{"path":"src/decorators/withLayout.tsx","kind":"import-statement","original":"./withLayout"},{"path":"src/decorators/withThemeEditor.tsx","kind":"import-statement","original":"./withThemeEditor"}],"format":"esm"},"src/util.tsx":{"bytes":1228,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/index.ts":{"bytes":943,"imports":[{"path":"@dxos/echo-signals/react","kind":"import-statement","external":true},{"path":"src/components/index.ts","kind":"import-statement","original":"./components"},{"path":"src/decorators/index.ts","kind":"import-statement","original":"./decorators"},{"path":"src/util.tsx","kind":"import-statement","original":"./util"}],"format":"esm"}},"outputs":{"dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":11014},"dist/lib/browser/index.mjs":{"imports":[{"path":"@dxos/echo-signals/react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/lit-theme-editor","kind":"import-statement","external":true},{"path":"@dxos/lit-ui/react","kind":"import-statement","external":true},{"path":"@dxos/lit-theme-editor/dx-theme-editor.pcss","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-dnd","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-dnd","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"exports":["ExtrinsicCardContainer","IntrinsicCardContainer","PopoverCardContainer","ThemeEditor","render","withLayout","withThemeEditor"],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":93},"src/components/ThemeEditor.tsx":{"bytesInOutput":405},"src/components/index.ts":{"bytesInOutput":0},"src/components/CardContainers/ExtrinsicCardContainer.tsx":{"bytesInOutput":1572},"src/components/CardContainers/index.ts":{"bytesInOutput":0},"src/components/CardContainers/IntrinsicCardContainer.tsx":{"bytesInOutput":949},"src/components/CardContainers/PopoverCardContainer.tsx":{"bytesInOutput":626},"src/decorators/withLayout.tsx":{"bytesInOutput":435},"src/decorators/index.ts":{"bytesInOutput":0},"src/decorators/withThemeEditor.tsx":{"bytesInOutput":589},"src/util.tsx":{"bytesInOutput":205}},"bytes":5393}}}

package/dist/lib/node-esm/index.mjs

@@ -15,95 +15,127 @@ var DxThemeEditor = createComponent({
 });
 var ThemeEditor = /* @__PURE__ */ memo(DxThemeEditor);
 
-// src/decorators/withLayout.tsx
-import defaultsDeep from "lodash.defaultsdeep";
+// src/components/CardContainers/ExtrinsicCardContainer.tsx
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
 import React2 from "react";
-import { DensityProvider } from "@dxos/react-ui";
-import { mx } from "@dxos/react-ui-theme";
-var defaultOptions = {
-  density: "fine"
-};
-var providers = [
-  (children, options) => {
-    return options?.density ? /* @__PURE__ */ React2.createElement(DensityProvider, {
-      density: options.density
-    }, children) : children;
-  }
-];
-var withLayout = ({ classNames, fullscreen, Container = fullscreen ? FullscreenContainer : DefaultContainer, ...providedOptions } = {}) => {
-  return (Story, _context) => {
-    const children = /* @__PURE__ */ React2.createElement(Container, {
-      classNames,
-      fullscreen
-    }, /* @__PURE__ */ React2.createElement(Story, null));
-    const options = defaultsDeep({}, providedOptions, defaultOptions);
-    return providers.reduceRight((acc, provider) => provider(acc, options), children);
-  };
-};
-var layoutCentered = "bg-deckSurface justify-center overflow-y-auto";
-var DefaultContainer = ({ children, classNames }) => {
+import { ResizeHandle, resizeAttributes, sizeStyle } from "@dxos/react-ui-dnd";
+var DEFAULT_INLINE_SIZE = 24;
+var MIN_INLINE_SIZE = 8;
+var DEFAULT_BLOCK_SIZE = 24;
+var MIN_BLOCK_SIZE = 8;
+var ExtrinsicCardContainer = ({ children, defaultInlineSize, inlineSize: propInlineSize, defaultBlockSize, blockSize: propBlockSize, onInlineSizeChange, onBlockSizeChange }) => {
+  const [inlineSize = DEFAULT_INLINE_SIZE, setInlineSize] = useControllableState({
+    prop: propInlineSize,
+    defaultProp: defaultInlineSize,
+    onChange: onInlineSizeChange
+  });
+  const [blockSize = DEFAULT_BLOCK_SIZE, setBlockSize] = useControllableState({
+    prop: propBlockSize,
+    defaultProp: defaultBlockSize,
+    onChange: onBlockSizeChange
+  });
   return /* @__PURE__ */ React2.createElement("div", {
-    role: "none",
-    className: mx(classNames)
-  }, children);
+    className: "grid relative border border-dashed border-subduedSeparator p-4 rounded-lg overflow-hidden contain-layout",
+    style: {
+      ...sizeStyle(inlineSize, "horizontal"),
+      ...sizeStyle(blockSize, "vertical")
+    },
+    ...resizeAttributes
+  }, children, /* @__PURE__ */ React2.createElement(ResizeHandle, {
+    side: "inline-end",
+    fallbackSize: DEFAULT_INLINE_SIZE,
+    minSize: MIN_INLINE_SIZE,
+    size: inlineSize,
+    onSizeChange: setInlineSize
+  }), /* @__PURE__ */ React2.createElement(ResizeHandle, {
+    side: "block-end",
+    fallbackSize: DEFAULT_BLOCK_SIZE,
+    minSize: MIN_BLOCK_SIZE,
+    size: blockSize,
+    onSizeChange: setBlockSize
+  }));
 };
-var FullscreenContainer = ({ children, classNames }) => {
-  return /* @__PURE__ */ React2.createElement("div", {
-    role: "none",
-    className: mx("fixed inset-0 flex overflow-hidden", classNames)
-  }, children);
+
+// src/components/CardContainers/IntrinsicCardContainer.tsx
+import { useControllableState as useControllableState2 } from "@radix-ui/react-use-controllable-state";
+import React3 from "react";
+import { ResizeHandle as ResizeHandle2, resizeAttributes as resizeAttributes2, sizeStyle as sizeStyle2 } from "@dxos/react-ui-dnd";
+var DEFAULT_SIZE = 24;
+var MIN_SIZE = 8;
+var IntrinsicCardContainer = ({ children, defaultSize, size: propSize, onSizeChange }) => {
+  const [size = DEFAULT_SIZE, setSize] = useControllableState2({
+    prop: propSize,
+    defaultProp: defaultSize,
+    onChange: onSizeChange
+  });
+  return /* @__PURE__ */ React3.createElement("div", {
+    className: "relative border border-dashed border-subduedSeparator p-4 rounded-lg",
+    style: sizeStyle2(size, "horizontal"),
+    ...resizeAttributes2
+  }, children, /* @__PURE__ */ React3.createElement(ResizeHandle2, {
+    side: "inline-end",
+    fallbackSize: DEFAULT_SIZE,
+    minSize: MIN_SIZE,
+    size,
+    onSizeChange: setSize
+  }));
 };
-var ColumnContainer = ({ children, classNames = "w-[30rem]", ...props }) => {
-  return /* @__PURE__ */ React2.createElement(FullscreenContainer, {
-    classNames: "justify-center bg-modalSurface",
-    ...props
-  }, /* @__PURE__ */ React2.createElement("div", {
-    role: "none",
-    className: mx("flex flex-col h-full overflow-y-auto bg-baseSurface", classNames)
-  }, children));
+
+// src/components/CardContainers/PopoverCardContainer.tsx
+import React4 from "react";
+import { Icon, Popover } from "@dxos/react-ui";
+var PopoverCardContainer = ({ children, icon = "ph--placeholder--regular" }) => {
+  return /* @__PURE__ */ React4.createElement(Popover.Root, {
+    open: true
+  }, /* @__PURE__ */ React4.createElement(Popover.Content, {
+    onOpenAutoFocus: (event) => event.preventDefault()
+  }, /* @__PURE__ */ React4.createElement(Popover.Viewport, null, children), /* @__PURE__ */ React4.createElement(Popover.Arrow, null)), /* @__PURE__ */ React4.createElement(Popover.Trigger, null, /* @__PURE__ */ React4.createElement(Icon, {
+    icon,
+    size: 5
+  })));
 };
 
-// src/decorators/withTheme.tsx
-import React3, { memo as memo2 } from "react";
-import { ThemeProvider, Tooltip } from "@dxos/react-ui";
-import { defaultTx } from "@dxos/react-ui-theme";
-var withTheme = (Story, context) => {
-  const { globals: { theme }, parameters: { translations } } = context;
-  const MemoizedStory = /* @__PURE__ */ memo2(Story);
-  return /* @__PURE__ */ React3.createElement(ThemeProvider, {
-    tx: defaultTx,
-    themeMode: theme,
-    resourceExtensions: translations,
-    noCache: true
-  }, /* @__PURE__ */ React3.createElement(Tooltip.Provider, null, /* @__PURE__ */ React3.createElement(MemoizedStory, null)));
+// src/decorators/withLayout.tsx
+import React5 from "react";
+var withLayout = (Story, context) => {
+  switch (context.parameters.layout) {
+    case "fullscreen":
+      return /* @__PURE__ */ React5.createElement("div", {
+        role: "none",
+        className: "fixed inset-0 flex flex-col overflow-hidden bg-baseSurface"
+      }, /* @__PURE__ */ React5.createElement(Story, null));
+    default:
+      return /* @__PURE__ */ React5.createElement(Story, null);
+  }
 };
 
 // src/decorators/withThemeEditor.tsx
-import React4, { memo as memo3 } from "react";
+import React6, { memo as memo2 } from "react";
 var withThemeEditor = (Story, context) => {
-  const MemoizedStory = /* @__PURE__ */ memo3(Story);
-  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(MemoizedStory, null), /* @__PURE__ */ React4.createElement("div", {
+  const MemoizedStory = /* @__PURE__ */ memo2(Story);
+  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(MemoizedStory, null), /* @__PURE__ */ React6.createElement("div", {
     className: "absolute top-4 bottom-4 right-4 z-10"
-  }, /* @__PURE__ */ React4.createElement("div", {
-    className: "h-full is-[35rem] overflow-auto bg-baseSurface border border-separator rounded"
-  }, /* @__PURE__ */ React4.createElement(ThemeEditor, null))));
+  }, /* @__PURE__ */ React6.createElement("div", {
+    className: "bs-full is-[35rem] overflow-auto bg-baseSurface border border-separator rounded"
+  }, /* @__PURE__ */ React6.createElement(ThemeEditor, null))));
 };
 
 // src/util.tsx
-import React5 from "react";
-var render = (r) => (args) => /* @__PURE__ */ React5.createElement(React5.Fragment, null, r(args) ?? /* @__PURE__ */ React5.createElement("div", null));
+import React7 from "react";
+var render = (Story) => (args) => {
+  const result = /* @__PURE__ */ React7.createElement(Story, args);
+  return result ?? /* @__PURE__ */ React7.createElement("div", null);
+};
 
 // src/index.ts
 registerSignalsRuntime();
 export {
-  ColumnContainer,
-  DefaultContainer,
-  FullscreenContainer,
+  ExtrinsicCardContainer,
+  IntrinsicCardContainer,
+  PopoverCardContainer,
   ThemeEditor,
-  layoutCentered,
   render,
   withLayout,
-  withTheme,
   withThemeEditor
 };
 //# sourceMappingURL=index.mjs.map

package/dist/lib/node-esm/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/index.ts", "../../../src/components/ThemeEditor.tsx", "../../../src/decorators/withLayout.tsx", "../../../src/decorators/withTheme.tsx", "../../../src/decorators/withThemeEditor.tsx", "../../../src/util.tsx"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { registerSignalsRuntime } from '@dxos/echo-signals/react';\n\nexport { type Meta } from '@storybook/react';\n\nexport * from './components';\nexport * from './decorators';\nexport * from './util';\n\nregisterSignalsRuntime();\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport React, { memo } from 'react';\n\nimport { DxThemeEditor as NaturalDxThemeEditor } from '@dxos/lit-theme-editor';\nimport { createComponent } from '@dxos/lit-ui/react';\n\nimport '@dxos/lit-theme-editor/dx-theme-editor.pcss';\n\nconst DxThemeEditor = createComponent({\n  tagName: 'dx-theme-editor',\n  elementClass: NaturalDxThemeEditor,\n  react: React,\n});\n\nexport const ThemeEditor = memo(DxThemeEditor);\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Decorator } from '@storybook/react';\nimport defaultsDeep from 'lodash.defaultsdeep';\nimport React, { type PropsWithChildren, type JSX, type FC } from 'react';\n\nimport { type Density, DensityProvider, type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\ntype ProviderOptions = {\n  fullscreen?: boolean;\n  density?: Density;\n};\n\nconst defaultOptions: ProviderOptions = {\n  density: 'fine',\n};\n\ntype Provider = (children: JSX.Element, options: ProviderOptions) => JSX.Element;\n\nconst providers: Provider[] = [\n  (children, options) => {\n    return options?.density ? <DensityProvider density={options.density}>{children}</DensityProvider> : children;\n  },\n];\n\nexport type ContainerProps = ThemedClassName<PropsWithChildren<Pick<ProviderOptions, 'fullscreen'>>>;\n\nexport type WithLayoutProps = ThemedClassName<ProviderOptions & { Container?: FC<ContainerProps> }>;\n\n/**\n * Decorator to layout the story container, adding optional providers.\n */\nexport const withLayout = ({\n  classNames,\n  fullscreen,\n  Container = fullscreen ? FullscreenContainer : DefaultContainer,\n  ...providedOptions\n}: WithLayoutProps = {}): Decorator => {\n  // TODO(burdon): Inspect \"fullscreen\" parameter in context.\n  return (Story, _context) => {\n    const children = (\n      <Container classNames={classNames} fullscreen={fullscreen}>\n        <Story />\n      </Container>\n    );\n\n    const options = defaultsDeep({}, providedOptions, defaultOptions);\n    return providers.reduceRight((acc, provider) => provider(acc, options), children);\n  };\n};\n\n// TODO(burdon): Use consistently.\nexport const layoutCentered = 'bg-deckSurface justify-center overflow-y-auto';\n\nexport const DefaultContainer = ({ children, classNames }: ContainerProps) => {\n  return (\n    <div role='none' className={mx(classNames)}>\n      {children}\n    </div>\n  );\n};\n\nexport const FullscreenContainer = ({ children, classNames }: ContainerProps) => {\n  return (\n    <div role='none' className={mx('fixed inset-0 flex overflow-hidden', classNames)}>\n      {children}\n    </div>\n  );\n};\n\nexport const ColumnContainer = ({ children, classNames = 'w-[30rem]', ...props }: ContainerProps) => {\n  return (\n    <FullscreenContainer classNames='justify-center bg-modalSurface' {...props}>\n      <div role='none' className={mx('flex flex-col h-full overflow-y-auto bg-baseSurface', classNames)}>\n        {children}\n      </div>\n    </FullscreenContainer>\n  );\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Decorator } from '@storybook/react';\nimport React, { memo } from 'react';\n\nimport { type ThemeMode, ThemeProvider, Tooltip } from '@dxos/react-ui';\nimport { defaultTx } from '@dxos/react-ui-theme';\n\n/**\n * Adds theme decorator.\n */\nexport const withTheme: Decorator = (Story, context) => {\n  const {\n    globals: { theme },\n    parameters: { translations },\n  } = context;\n\n  // Prevent re-rendering of the story.\n  const MemoizedStory = memo(Story);\n\n  return (\n    <ThemeProvider tx={defaultTx} themeMode={theme as ThemeMode} resourceExtensions={translations} noCache>\n      <Tooltip.Provider>\n        <MemoizedStory />\n      </Tooltip.Provider>\n    </ThemeProvider>\n  );\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Decorator } from '@storybook/react';\nimport React, { memo } from 'react';\n\nimport { ThemeEditor } from '../components';\n\n/**\n * Show theme editor.\n */\n// TODO(burdon): Ideally move to storybook-addon-theme, but this has a build issue since the addon would depend on the vite theme plugin.\nexport const withThemeEditor: Decorator = (Story, context) => {\n  // Prevent re-rendering of the story.\n  const MemoizedStory = memo(Story);\n\n  return (\n    <>\n      <MemoizedStory />\n      <div className='absolute top-4 bottom-4 right-4 z-10'>\n        <div className='h-full is-[35rem] overflow-auto bg-baseSurface border border-separator rounded'>\n          <ThemeEditor />\n        </div>\n      </div>\n    </>\n  );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { type FC } from 'react';\n\n/**\n * Story renderer wrapper.\n */\nexport const render =\n  <T,>(r: FC<T>) =>\n  (args: T) => <>{r(args) ?? <div />}</>;\n"],
-  "mappings": "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",
-  "names": ["registerSignalsRuntime", "React", "memo", "DxThemeEditor", "NaturalDxThemeEditor", "createComponent", "DxThemeEditor", "createComponent", "tagName", "elementClass", "NaturalDxThemeEditor", "react", "React", "ThemeEditor", "memo", "defaultsDeep", "React", "DensityProvider", "mx", "defaultOptions", "density", "providers", "children", "options", "React", "DensityProvider", "withLayout", "classNames", "fullscreen", "Container", "FullscreenContainer", "DefaultContainer", "providedOptions", "Story", "_context", "defaultsDeep", "reduceRight", "acc", "provider", "layoutCentered", "div", "role", "className", "mx", "ColumnContainer", "props", "React", "memo", "ThemeProvider", "Tooltip", "defaultTx", "withTheme", "Story", "context", "globals", "theme", "parameters", "translations", "MemoizedStory", "memo", "React", "ThemeProvider", "tx", "defaultTx", "themeMode", "resourceExtensions", "noCache", "Tooltip", "Provider", "React", "memo", "withThemeEditor", "Story", "context", "MemoizedStory", "memo", "React", "div", "className", "ThemeEditor", "React", "render", "r", "args", "React", "div", "registerSignalsRuntime"]
+  "sources": ["../../../src/index.ts", "../../../src/components/ThemeEditor.tsx", "../../../src/components/CardContainers/ExtrinsicCardContainer.tsx", "../../../src/components/CardContainers/IntrinsicCardContainer.tsx", "../../../src/components/CardContainers/PopoverCardContainer.tsx", "../../../src/decorators/withLayout.tsx", "../../../src/decorators/withThemeEditor.tsx", "../../../src/util.tsx"],
+  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { registerSignalsRuntime } from '@dxos/echo-signals/react';\n\nexport * from './components';\nexport * from './decorators';\nexport * from './util';\n\nregisterSignalsRuntime();\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport React, { memo } from 'react';\n\nimport { DxThemeEditor as NaturalDxThemeEditor } from '@dxos/lit-theme-editor';\nimport { createComponent } from '@dxos/lit-ui/react';\n\nimport '@dxos/lit-theme-editor/dx-theme-editor.pcss';\n\nconst DxThemeEditor = createComponent({\n  tagName: 'dx-theme-editor',\n  elementClass: NaturalDxThemeEditor,\n  react: React,\n});\n\nexport const ThemeEditor = memo(DxThemeEditor);\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { type PropsWithChildren } from 'react';\n\nimport { ResizeHandle, type Size, resizeAttributes, sizeStyle } from '@dxos/react-ui-dnd';\n\n// Default size in rem.\nconst DEFAULT_INLINE_SIZE = 24;\nconst MIN_INLINE_SIZE = 8;\nconst DEFAULT_BLOCK_SIZE = 24;\nconst MIN_BLOCK_SIZE = 8;\n\nexport type ExtrinsicCardContainerProps = PropsWithChildren<{\n  defaultInlineSize?: Size;\n  inlineSize?: Size;\n  defaultBlockSize?: Size;\n  blockSize?: Size;\n  onInlineSizeChange?: (size: Size, commit?: boolean) => void;\n  onBlockSizeChange?: (size: Size, commit?: boolean) => void;\n}>;\n\nexport const ExtrinsicCardContainer = ({\n  children,\n  defaultInlineSize,\n  inlineSize: propInlineSize,\n  defaultBlockSize,\n  blockSize: propBlockSize,\n  onInlineSizeChange,\n  onBlockSizeChange,\n}: ExtrinsicCardContainerProps) => {\n  const [inlineSize = DEFAULT_INLINE_SIZE, setInlineSize] = useControllableState<Size>({\n    prop: propInlineSize,\n    defaultProp: defaultInlineSize,\n    onChange: onInlineSizeChange,\n  });\n\n  const [blockSize = DEFAULT_BLOCK_SIZE, setBlockSize] = useControllableState<Size>({\n    prop: propBlockSize,\n    defaultProp: defaultBlockSize,\n    onChange: onBlockSizeChange,\n  });\n\n  return (\n    <div\n      className='grid relative border border-dashed border-subduedSeparator p-4 rounded-lg overflow-hidden contain-layout'\n      style={{\n        ...sizeStyle(inlineSize, 'horizontal'),\n        ...sizeStyle(blockSize, 'vertical'),\n      }}\n      {...resizeAttributes}\n    >\n      {children}\n      <ResizeHandle\n        side='inline-end'\n        fallbackSize={DEFAULT_INLINE_SIZE}\n        minSize={MIN_INLINE_SIZE}\n        size={inlineSize}\n        onSizeChange={setInlineSize}\n      />\n      <ResizeHandle\n        side='block-end'\n        fallbackSize={DEFAULT_BLOCK_SIZE}\n        minSize={MIN_BLOCK_SIZE}\n        size={blockSize}\n        onSizeChange={setBlockSize}\n      />\n    </div>\n  );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { type PropsWithChildren } from 'react';\n\nimport { ResizeHandle, type Size, resizeAttributes, sizeStyle } from '@dxos/react-ui-dnd';\n\n// Default size in rem\nconst DEFAULT_SIZE = 24;\nconst MIN_SIZE = 8;\n\nexport type IntrinsicCardContainerProps = PropsWithChildren<{\n  defaultSize?: Size;\n  size?: Size;\n  onSizeChange?: (size: Size, commit?: boolean) => void;\n}>;\n\nexport const IntrinsicCardContainer = ({\n  children,\n  defaultSize,\n  size: propSize,\n  onSizeChange,\n}: IntrinsicCardContainerProps) => {\n  const [size = DEFAULT_SIZE, setSize] = useControllableState<Size>({\n    prop: propSize,\n    defaultProp: defaultSize,\n    onChange: onSizeChange,\n  });\n\n  return (\n    <div\n      className='relative border border-dashed border-subduedSeparator p-4 rounded-lg'\n      style={sizeStyle(size, 'horizontal')}\n      {...resizeAttributes}\n    >\n      {children}\n      <ResizeHandle\n        side='inline-end'\n        fallbackSize={DEFAULT_SIZE}\n        minSize={MIN_SIZE}\n        size={size}\n        onSizeChange={setSize}\n      />\n    </div>\n  );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport React, { type PropsWithChildren } from 'react';\n\nimport { Icon, Popover } from '@dxos/react-ui';\n\nexport const PopoverCardContainer = ({\n  children,\n  icon = 'ph--placeholder--regular',\n}: PropsWithChildren<{ icon: string }>) => {\n  return (\n    <Popover.Root open>\n      <Popover.Content onOpenAutoFocus={(event) => event.preventDefault()}>\n        <Popover.Viewport>{children}</Popover.Viewport>\n        <Popover.Arrow />\n      </Popover.Content>\n      <Popover.Trigger>\n        <Icon icon={icon} size={5} />\n      </Popover.Trigger>\n    </Popover.Root>\n  );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { type Decorator } from '@storybook/react';\nimport React from 'react';\n\nexport const withLayout: Decorator = (Story, context) => {\n  switch (context.parameters.layout) {\n    case 'fullscreen':\n      return (\n        <div role='none' className='fixed inset-0 flex flex-col overflow-hidden bg-baseSurface'>\n          <Story />\n        </div>\n      );\n\n    default:\n      return <Story />;\n  }\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Decorator } from '@storybook/react';\nimport React, { memo } from 'react';\n\nimport { ThemeEditor } from '../components/ThemeEditor';\n\n/**\n * Show theme editor.\n */\n// TODO(burdon): Ideally move to storybook-addon-theme, but this has a build issue since the addon would depend on the vite theme plugin.\nexport const withThemeEditor: Decorator = (Story, context) => {\n  // Prevent re-rendering of the story.\n  const MemoizedStory = memo(Story);\n\n  return (\n    <>\n      <MemoizedStory />\n      <div className='absolute top-4 bottom-4 right-4 z-10'>\n        <div className='bs-full is-[35rem] overflow-auto bg-baseSurface border border-separator rounded'>\n          <ThemeEditor />\n        </div>\n      </div>\n    </>\n  );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { type FC } from 'react';\n\n/**\n * Story renderer wrapper.\n */\nexport const render =\n  <T extends Record<string, any>>(Story: FC<T>) =>\n  (args: unknown) => {\n    const result = <Story {...(args as T)} />;\n    return result ?? <div />;\n  };\n"],
+  "mappings": ";;;AAIA,SAASA,8BAA8B;;;ACAvC,OAAOC,SAASC,YAAY;AAE5B,SAASC,iBAAiBC,4BAA4B;AACtD,SAASC,uBAAuB;AAEhC,OAAO;AAEP,IAAMC,gBAAgBC,gBAAgB;EACpCC,SAAS;EACTC,cAAcC;EACdC,OAAOC;AACT,CAAA;AAEO,IAAMC,cAAcC,qBAAKR,aAAAA;;;ACbhC,SAASS,4BAA4B;AACrC,OAAOC,YAAuC;AAE9C,SAASC,cAAyBC,kBAAkBC,iBAAiB;AAGrE,IAAMC,sBAAsB;AAC5B,IAAMC,kBAAkB;AACxB,IAAMC,qBAAqB;AAC3B,IAAMC,iBAAiB;AAWhB,IAAMC,yBAAyB,CAAC,EACrCC,UACAC,mBACAC,YAAYC,gBACZC,kBACAC,WAAWC,eACXC,oBACAC,kBAAiB,MACW;AAC5B,QAAM,CAACN,aAAaP,qBAAqBc,aAAAA,IAAiBC,qBAA2B;IACnFC,MAAMR;IACNS,aAAaX;IACbY,UAAUN;EACZ,CAAA;AAEA,QAAM,CAACF,YAAYR,oBAAoBiB,YAAAA,IAAgBJ,qBAA2B;IAChFC,MAAML;IACNM,aAAaR;IACbS,UAAUL;EACZ,CAAA;AAEA,SACE,gBAAAO,OAAA,cAACC,OAAAA;IACCC,WAAU;IACVC,OAAO;MACL,GAAGC,UAAUjB,YAAY,YAAA;MACzB,GAAGiB,UAAUd,WAAW,UAAA;IAC1B;IACC,GAAGe;KAEHpB,UACD,gBAAAe,OAAA,cAACM,cAAAA;IACCC,MAAK;IACLC,cAAc5B;IACd6B,SAAS5B;IACT6B,MAAMvB;IACNwB,cAAcjB;MAEhB,gBAAAM,OAAA,cAACM,cAAAA;IACCC,MAAK;IACLC,cAAc1B;IACd2B,SAAS1B;IACT2B,MAAMpB;IACNqB,cAAcZ;;AAItB;;;ACnEA,SAASa,wBAAAA,6BAA4B;AACrC,OAAOC,YAAuC;AAE9C,SAASC,gBAAAA,eAAyBC,oBAAAA,mBAAkBC,aAAAA,kBAAiB;AAGrE,IAAMC,eAAe;AACrB,IAAMC,WAAW;AAQV,IAAMC,yBAAyB,CAAC,EACrCC,UACAC,aACAC,MAAMC,UACNC,aAAY,MACgB;AAC5B,QAAM,CAACF,OAAOL,cAAcQ,OAAAA,IAAWC,sBAA2B;IAChEC,MAAMJ;IACNK,aAAaP;IACbQ,UAAUL;EACZ,CAAA;AAEA,SACE,gBAAAM,OAAA,cAACC,OAAAA;IACCC,WAAU;IACVC,OAAOC,WAAUZ,MAAM,YAAA;IACtB,GAAGa;KAEHf,UACD,gBAAAU,OAAA,cAACM,eAAAA;IACCC,MAAK;IACLC,cAAcrB;IACdsB,SAASrB;IACTI;IACAE,cAAcC;;AAItB;;;AC3CA,OAAOe,YAAuC;AAE9C,SAASC,MAAMC,eAAe;AAEvB,IAAMC,uBAAuB,CAAC,EACnCC,UACAC,OAAO,2BAA0B,MACG;AACpC,SACE,gBAAAC,OAAA,cAACC,QAAQC,MAAI;IAACC,MAAAA;KACZ,gBAAAH,OAAA,cAACC,QAAQG,SAAO;IAACC,iBAAiB,CAACC,UAAUA,MAAMC,eAAc;KAC/D,gBAAAP,OAAA,cAACC,QAAQO,UAAQ,MAAEV,QAAAA,GACnB,gBAAAE,OAAA,cAACC,QAAQQ,OAAK,IAAA,CAAA,GAEhB,gBAAAT,OAAA,cAACC,QAAQS,SAAO,MACd,gBAAAV,OAAA,cAACW,MAAAA;IAAKZ;IAAYa,MAAM;;AAIhC;;;AClBA,OAAOC,YAAW;AAEX,IAAMC,aAAwB,CAACC,OAAOC,YAAAA;AAC3C,UAAQA,QAAQC,WAAWC,QAAM;IAC/B,KAAK;AACH,aACE,gBAAAC,OAAA,cAACC,OAAAA;QAAIC,MAAK;QAAOC,WAAU;SACzB,gBAAAH,OAAA,cAACJ,OAAAA,IAAAA,CAAAA;IAIP;AACE,aAAO,gBAAAI,OAAA,cAACJ,OAAAA,IAAAA;EACZ;AACF;;;ACdA,OAAOQ,UAASC,QAAAA,aAAY;AAQrB,IAAMC,kBAA6B,CAACC,OAAOC,YAAAA;AAEhD,QAAMC,gBAAgBC,gBAAAA,MAAKH,KAAAA;AAE3B,SACE,gBAAAI,OAAA,cAAAA,OAAA,UAAA,MACE,gBAAAA,OAAA,cAACF,eAAAA,IAAAA,GACD,gBAAAE,OAAA,cAACC,OAAAA;IAAIC,WAAU;KACb,gBAAAF,OAAA,cAACC,OAAAA;IAAIC,WAAU;KACb,gBAAAF,OAAA,cAACG,aAAAA,IAAAA,CAAAA,CAAAA,CAAAA;AAKX;;;ACvBA,OAAOC,YAAwB;AAKxB,IAAMC,SACX,CAAgCC,UAChC,CAACC,SAAAA;AACC,QAAMC,SAAS,gBAAAC,OAAA,cAACH,OAAWC,IAAAA;AAC3B,SAAOC,UAAU,gBAAAC,OAAA,cAACC,OAAAA,IAAAA;AACpB;;;APJFC,uBAAAA;",
+  "names": ["registerSignalsRuntime", "React", "memo", "DxThemeEditor", "NaturalDxThemeEditor", "createComponent", "DxThemeEditor", "createComponent", "tagName", "elementClass", "NaturalDxThemeEditor", "react", "React", "ThemeEditor", "memo", "useControllableState", "React", "ResizeHandle", "resizeAttributes", "sizeStyle", "DEFAULT_INLINE_SIZE", "MIN_INLINE_SIZE", "DEFAULT_BLOCK_SIZE", "MIN_BLOCK_SIZE", "ExtrinsicCardContainer", "children", "defaultInlineSize", "inlineSize", "propInlineSize", "defaultBlockSize", "blockSize", "propBlockSize", "onInlineSizeChange", "onBlockSizeChange", "setInlineSize", "useControllableState", "prop", "defaultProp", "onChange", "setBlockSize", "React", "div", "className", "style", "sizeStyle", "resizeAttributes", "ResizeHandle", "side", "fallbackSize", "minSize", "size", "onSizeChange", "useControllableState", "React", "ResizeHandle", "resizeAttributes", "sizeStyle", "DEFAULT_SIZE", "MIN_SIZE", "IntrinsicCardContainer", "children", "defaultSize", "size", "propSize", "onSizeChange", "setSize", "useControllableState", "prop", "defaultProp", "onChange", "React", "div", "className", "style", "sizeStyle", "resizeAttributes", "ResizeHandle", "side", "fallbackSize", "minSize", "React", "Icon", "Popover", "PopoverCardContainer", "children", "icon", "React", "Popover", "Root", "open", "Content", "onOpenAutoFocus", "event", "preventDefault", "Viewport", "Arrow", "Trigger", "Icon", "size", "React", "withLayout", "Story", "context", "parameters", "layout", "React", "div", "role", "className", "React", "memo", "withThemeEditor", "Story", "context", "MemoizedStory", "memo", "React", "div", "className", "ThemeEditor", "React", "render", "Story", "args", "result", "React", "div", "registerSignalsRuntime"]
 }