npm - @dxos/storybook-utils - Versions diffs - 0.8.4-main.84f28bd → 0.8.4-main.a4bbb77 - Mend

@dxos/storybook-utils 0.8.4-main.84f28bd → 0.8.4-main.a4bbb77

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (46) hide show

package/dist/lib/browser/index.mjs CHANGED Viewed

@@ -13,95 +13,112 @@ 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 }) => {
-  return /* @__PURE__ */ React2.createElement("div", {
-    role: "none",
-    className: mx(classNames)
-  }, children);
-};
-var FullscreenContainer = ({ 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("fixed inset-0 flex overflow-hidden", 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 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/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
+  }));
 };
-// 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/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/withThemeEditor.tsx
-import React4, { memo as memo3 } from "react";
+import React5, { 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__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(MemoizedStory, null), /* @__PURE__ */ React5.createElement("div", {
     className: "absolute top-4 bottom-4 right-4 z-10"
-  }, /* @__PURE__ */ React4.createElement("div", {
+  }, /* @__PURE__ */ React5.createElement("div", {
     className: "h-full is-[35rem] overflow-auto bg-baseSurface border border-separator rounded"
-  }, /* @__PURE__ */ React4.createElement(ThemeEditor, null))));
+  }, /* @__PURE__ */ React5.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 React6 from "react";
+var render = (Story) => (args) => {
+  const result = /* @__PURE__ */ React6.createElement(Story, args);
+  return result ?? /* @__PURE__ */ React6.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 CHANGED Viewed

@@ -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/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 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='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 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", "memo", "withThemeEditor", "Story", "context", "MemoizedStory", "memo", "React", "div", "className", "ThemeEditor", "React", "render", "Story", "args", "result", "React", "div", "registerSignalsRuntime"]
 }

package/dist/lib/browser/meta.json CHANGED Viewed

	@@ -1 +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~~}}}
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/CardContainers/ExtrinsicCardContainer.tsx":{"bytes":6610,"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/withThemeEditor.tsx":{"bytes":2741,"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":488,"imports":[{"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":10161},"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}],"exports":["ExtrinsicCardContainer","IntrinsicCardContainer","PopoverCardContainer","ThemeEditor","render","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/withThemeEditor.tsx":{"bytesInOutput":588},"src/decorators/index.ts":{"bytesInOutput":0},"src/util.tsx":{"bytesInOutput":205}},"bytes":4909}}}

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

@@ -15,95 +15,112 @@ 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 }) => {
-  return /* @__PURE__ */ React2.createElement("div", {
-    role: "none",
-    className: mx(classNames)
-  }, children);
-};
-var FullscreenContainer = ({ 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("fixed inset-0 flex overflow-hidden", 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 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/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
+  }));
 };
-// 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/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/withThemeEditor.tsx
-import React4, { memo as memo3 } from "react";
+import React5, { 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__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(MemoizedStory, null), /* @__PURE__ */ React5.createElement("div", {
     className: "absolute top-4 bottom-4 right-4 z-10"
-  }, /* @__PURE__ */ React4.createElement("div", {
+  }, /* @__PURE__ */ React5.createElement("div", {
     className: "h-full is-[35rem] overflow-auto bg-baseSurface border border-separator rounded"
-  }, /* @__PURE__ */ React4.createElement(ThemeEditor, null))));
+  }, /* @__PURE__ */ React5.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 React6 from "react";
+var render = (Story) => (args) => {
+  const result = /* @__PURE__ */ React6.createElement(Story, args);
+  return result ?? /* @__PURE__ */ React6.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 CHANGED Viewed

@@ -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": ";;;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;;;ACZhC,OAAOS,kBAAkB;AACzB,OAAOC,YAA0D;AAEjE,SAAuBC,uBAA6C;AACpE,SAASC,UAAU;AAOnB,IAAMC,iBAAkC;EACtCC,SAAS;AACX;AAIA,IAAMC,YAAwB;EAC5B,CAACC,UAAUC,YAAAA;AACT,WAAOA,SAASH,UAAU,gBAAAI,OAAA,cAACC,iBAAAA;MAAgBL,SAASG,QAAQH;OAAUE,QAAAA,IAA8BA;EACtG;;AAUK,IAAMI,aAAa,CAAC,EACzBC,YACAC,YACAC,YAAYD,aAAaE,sBAAsBC,kBAC/C,GAAGC,gBAAAA,IACgB,CAAC,MAAC;AAErB,SAAO,CAACC,OAAOC,aAAAA;AACb,UAAMZ,WACJ,gBAAAE,OAAA,cAACK,WAAAA;MAAUF;MAAwBC;OACjC,gBAAAJ,OAAA,cAACS,OAAAA,IAAAA,CAAAA;AAIL,UAAMV,UAAUY,aAAa,CAAC,GAAGH,iBAAiBb,cAAAA;AAClD,WAAOE,UAAUe,YAAY,CAACC,KAAKC,aAAaA,SAASD,KAAKd,OAAAA,GAAUD,QAAAA;EAC1E;AACF;AAGO,IAAMiB,iBAAiB;AAEvB,IAAMR,mBAAmB,CAAC,EAAET,UAAUK,WAAU,MAAkB;AACvE,SACE,gBAAAH,OAAA,cAACgB,OAAAA;IAAIC,MAAK;IAAOC,WAAWC,GAAGhB,UAAAA;KAC5BL,QAAAA;AAGP;AAEO,IAAMQ,sBAAsB,CAAC,EAAER,UAAUK,WAAU,MAAkB;AAC1E,SACE,gBAAAH,OAAA,cAACgB,OAAAA;IAAIC,MAAK;IAAOC,WAAWC,GAAG,sCAAsChB,UAAAA;KAClEL,QAAAA;AAGP;AAEO,IAAMsB,kBAAkB,CAAC,EAAEtB,UAAUK,aAAa,aAAa,GAAGkB,MAAAA,MAAuB;AAC9F,SACE,gBAAArB,OAAA,cAACM,qBAAAA;IAAoBH,YAAW;IAAkC,GAAGkB;KACnE,gBAAArB,OAAA,cAACgB,OAAAA;IAAIC,MAAK;IAAOC,WAAWC,GAAG,uDAAuDhB,UAAAA;KACnFL,QAAAA,CAAAA;AAIT;;;AC5EA,OAAOwB,UAASC,QAAAA,aAAY;AAE5B,SAAyBC,eAAeC,eAAe;AACvD,SAASC,iBAAiB;AAKnB,IAAMC,YAAuB,CAACC,OAAOC,YAAAA;AAC1C,QAAM,EACJC,SAAS,EAAEC,MAAK,GAChBC,YAAY,EAAEC,aAAY,EAAE,IAC1BJ;AAGJ,QAAMK,gBAAgBC,gBAAAA,MAAKP,KAAAA;AAE3B,SACE,gBAAAQ,OAAA,cAACC,eAAAA;IAAcC,IAAIC;IAAWC,WAAWT;IAAoBU,oBAAoBR;IAAcS,SAAAA;KAC7F,gBAAAN,OAAA,cAACO,QAAQC,UAAQ,MACf,gBAAAR,OAAA,cAACF,eAAAA,IAAAA,CAAAA,CAAAA;AAIT;;;ACxBA,OAAOW,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,CAAKC,MACL,CAACC,SAAY,gBAAAC,OAAA,cAAAA,OAAA,UAAA,MAAGF,EAAEC,IAAAA,KAAS,gBAAAC,OAAA,cAACC,OAAAA,IAAAA,CAAAA;;;ALC9BC,uBAAAA;",
-  "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/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 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='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 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", "memo", "withThemeEditor", "Story", "context", "MemoizedStory", "memo", "React", "div", "className", "ThemeEditor", "React", "render", "Story", "args", "result", "React", "div", "registerSignalsRuntime"]
 }