@dxos/storybook-utils 0.8.1 → 0.8.2-main.10c050d

package/dist/lib/browser/index.mjs

@@ -5,34 +5,48 @@ import { registerSignalsRuntime as registerSignalsRuntime2 } from "@dxos/echo-si
 import defaultsDeep from "lodash.defaultsdeep";
 import React from "react";
 import { DensityProvider } from "@dxos/react-ui";
-import { Tooltip } from "@dxos/react-ui";
 import { mx } from "@dxos/react-ui-theme";
 var defaultOptions = {
   density: "fine"
 };
 var providers = [
-  (children, options) => {
-    return options.tooltips ? /* @__PURE__ */ React.createElement(Tooltip.Provider, null, children) : children;
-  },
   (children, options) => {
     return options?.density ? /* @__PURE__ */ React.createElement(DensityProvider, {
       density: options.density
     }, children) : children;
   }
 ];
-var withLayout = ({ classNames, fullscreen, ..._options } = {}) => {
+var withLayout = ({ classNames, fullscreen, Container = fullscreen ? FixedContainer : DefaultContainer, ...providedOptions } = {}) => {
   return (Story, _context) => {
-    const options = defaultsDeep({}, _options, defaultOptions);
-    const children = (
-      // NOTE: Do not change the flex direction to flex-col by default.
-      /* @__PURE__ */ React.createElement("div", {
-        role: "none",
-        className: mx(fullscreen && "fixed inset-0 flex overflow-hidden", classNames)
-      }, /* @__PURE__ */ React.createElement(Story, null))
-    );
+    const children = /* @__PURE__ */ React.createElement(Container, {
+      classNames,
+      fullscreen
+    }, /* @__PURE__ */ React.createElement(Story, null));
+    const options = defaultsDeep({}, providedOptions, defaultOptions);
     return providers.reduceRight((acc, provider) => provider(acc, options), children);
   };
 };
+var DefaultContainer = ({ children, classNames }) => {
+  return /* @__PURE__ */ React.createElement("div", {
+    role: "none",
+    className: mx(classNames)
+  }, children);
+};
+var FixedContainer = ({ children, classNames }) => {
+  return /* @__PURE__ */ React.createElement("div", {
+    role: "none",
+    className: mx("fixed inset-0 flex overflow-hidden", classNames)
+  }, children);
+};
+var ColumnContainer = ({ children, classNames = "w-[30rem]", ...props }) => {
+  return /* @__PURE__ */ React.createElement(FixedContainer, {
+    classNames: "justify-center bg-modalSurface",
+    ...props
+  }, /* @__PURE__ */ React.createElement("div", {
+    role: "none",
+    className: mx("flex flex-col h-full overflow-y-auto bg-baseSurface", classNames)
+  }, children));
+};
 
 // packages/common/storybook-utils/src/decorators/withSignals.tsx
 import React2 from "react";
@@ -44,27 +58,69 @@ var withSignals = (Story) => {
 
 // packages/common/storybook-utils/src/decorators/withTheme.tsx
 import { addons } from "@storybook/preview-api";
-import React3, { memo, useEffect, useState } from "react";
+import React3, { memo, useCallback, useEffect, useState } from "react";
 import { DARK_MODE_EVENT_NAME } from "storybook-dark-mode";
-import { ThemeProvider } from "@dxos/react-ui";
+import { DxThemeEditor as NaturalDxThemeEditor } from "@dxos/lit-theme-editor";
+import "@dxos/lit-theme-editor/dx-theme-editor.pcss";
+import { createComponent } from "@dxos/lit-ui/react";
+import { ThemeProvider, Tooltip, Dialog, IconButton } from "@dxos/react-ui";
 import { defaultTx } from "@dxos/react-ui-theme";
-var channel = addons.getChannel();
+import { PARAM_KEY } from "@dxos/theme-editor-addon";
+var DxThemeEditor = createComponent({
+  tagName: "dx-theme-editor",
+  elementClass: NaturalDxThemeEditor,
+  react: React3
+});
 var withTheme = (Story, context) => {
   const MemoizedStory = /* @__PURE__ */ memo(Story);
   const [themeMode, setThemeMode] = useState("dark");
+  const [editorOpen, setEditorOpen] = useState(false);
+  const handleOpenChange = useCallback((nextOpen) => {
+    setEditorOpen(nextOpen);
+  }, []);
+  useEffect(() => {
+    const handleDarkModeUpdate = (darkMode) => setThemeMode(darkMode ? "dark" : "light");
+    addons.getChannel().on(DARK_MODE_EVENT_NAME, handleDarkModeUpdate);
+    return () => addons.getChannel().off(DARK_MODE_EVENT_NAME, handleDarkModeUpdate);
+  }, []);
   useEffect(() => {
-    const handleUpdate = (darkMode) => setThemeMode(darkMode ? "dark" : "light");
-    channel.on(DARK_MODE_EVENT_NAME, handleUpdate);
-    return () => channel.off(DARK_MODE_EVENT_NAME, handleUpdate);
-  }, [
-    channel
-  ]);
+    const openEditor = () => {
+      handleOpenChange(true);
+    };
+    addons.getChannel().on(PARAM_KEY, openEditor);
+    return () => addons.getChannel().off(PARAM_KEY, openEditor);
+  }, []);
   return /* @__PURE__ */ React3.createElement(ThemeProvider, {
     tx: defaultTx,
     themeMode,
     resourceExtensions: context?.parameters?.translations,
     noCache: true
-  }, /* @__PURE__ */ React3.createElement(MemoizedStory, null));
+  }, /* @__PURE__ */ React3.createElement(Tooltip.Provider, null, /* @__PURE__ */ React3.createElement(MemoizedStory, null), /* @__PURE__ */ React3.createElement(Dialog.Root, {
+    open: editorOpen,
+    onOpenChange: handleOpenChange,
+    modal: false
+  }, /* @__PURE__ */ React3.createElement("div", {
+    role: "none",
+    className: "dx-dialog__overlay bg-transparent pointer-events-none",
+    style: {
+      placeContent: "end"
+    }
+  }, /* @__PURE__ */ React3.createElement(Dialog.Content, {
+    classNames: "relative box-content py-0 px-2 md:is-[35rem] md:max-is-none overflow-y-auto layout-contain pointer-events-auto",
+    style: {
+      maxBlockSize: "50dvh"
+    },
+    onInteractOutside: (event) => event.preventDefault()
+  }, /* @__PURE__ */ React3.createElement(Dialog.Title, {
+    srOnly: true
+  }, "Theme Editor"), editorOpen && /* @__PURE__ */ React3.createElement(DxThemeEditor, null), /* @__PURE__ */ React3.createElement(Dialog.Close, {
+    asChild: true
+  }, /* @__PURE__ */ React3.createElement(IconButton, {
+    iconOnly: true,
+    icon: "ph--x--regular",
+    label: "Close",
+    classNames: "absolute block-start-2 inline-end-2"
+  })))))));
 };
 
 // packages/common/storybook-utils/src/util.tsx
@@ -74,6 +130,9 @@ var render = (r) => (args) => /* @__PURE__ */ React4.createElement(React4.Fragme
 // packages/common/storybook-utils/src/index.ts
 registerSignalsRuntime2();
 export {
+  ColumnContainer,
+  DefaultContainer,
+  FixedContainer,
   render,
   withLayout,
   withSignals,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/index.ts", "../../../src/decorators/withLayout.tsx", "../../../src/decorators/withSignals.tsx", "../../../src/decorators/withTheme.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 './decorators';\nexport * from './util';\n\nregisterSignalsRuntime();\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Decorator } from '@storybook/react';\nimport defaultsDeep from 'lodash.defaultsdeep';\nimport React, { type JSX } from 'react';\n\nimport { type Density, DensityProvider, type ThemedClassName } from '@dxos/react-ui';\nimport { Tooltip } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\ntype ProviderOptions = {\n  fullscreen?: boolean;\n  density?: Density;\n  tooltips?: boolean;\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.tooltips ? <Tooltip.Provider>{children}</Tooltip.Provider> : children;\n  },\n  (children, options) => {\n    return options?.density ? <DensityProvider density={options.density}>{children}</DensityProvider> : children;\n  },\n];\n\nexport type WithFullscreenProps = ThemedClassName<ProviderOptions>;\n\n/**\n * Decorator to layout the story container, adding optional providers.\n */\nexport const withLayout = ({ classNames, fullscreen, ..._options }: WithFullscreenProps = {}): Decorator => {\n  // TODO(burdon): Inspect \"fullscreen\" parameter in context.\n  return (Story, _context) => {\n    const options = defaultsDeep({}, _options, defaultOptions);\n    const children = (\n      // NOTE: Do not change the flex direction to flex-col by default.\n      <div role='none' className={mx(fullscreen && 'fixed inset-0 flex overflow-hidden', classNames)}>\n        <Story />\n      </div>\n    );\n\n    return providers.reduceRight((acc, provider) => provider(acc, options), children);\n  };\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Decorator } from '@storybook/react';\nimport React from 'react';\n\nimport { registerSignalsRuntime } from '@dxos/echo-signals/react';\n\n/**\n * Make objects created using @dxos/echo-schema `create` reactive.\n */\nexport const withSignals: Decorator = (Story) => {\n  registerSignalsRuntime();\n  return <Story />;\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { addons } from '@storybook/preview-api';\nimport { type Decorator } from '@storybook/react';\nimport React, { memo, useEffect, useState } from 'react';\nimport { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';\n\nimport { type ThemeMode, ThemeProvider } from '@dxos/react-ui';\nimport { defaultTx } from '@dxos/react-ui-theme';\n\nconst channel = addons.getChannel();\n\n/**\n * Changes theme based on storybook toolbar toggle.\n */\nexport const withTheme: Decorator = (Story, context) => {\n  // Prevent re-rendering of the story.\n  const MemoizedStory = memo(Story);\n  const [themeMode, setThemeMode] = useState<ThemeMode>('dark');\n\n  // https://www.npmjs.com/package/storybook-dark-mode\n  // NOTE: The `useDarkMode` hook causes the story to continually re-render.\n  // NOTE: Changing the theme will cause the story to remount.\n  useEffect(() => {\n    const handleUpdate = (darkMode: boolean) => setThemeMode(darkMode ? 'dark' : 'light');\n    channel.on(DARK_MODE_EVENT_NAME, handleUpdate);\n    return () => channel.off(DARK_MODE_EVENT_NAME, handleUpdate);\n  }, [channel]);\n\n  return (\n    <ThemeProvider tx={defaultTx} themeMode={themeMode} resourceExtensions={context?.parameters?.translations} noCache>\n      <MemoizedStory />\n    </ThemeProvider>\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,0BAAAA,+BAA8B;;;ACCvC,OAAOC,kBAAkB;AACzB,OAAOC,WAAyB;AAEhC,SAAuBC,uBAA6C;AACpE,SAASC,eAAe;AACxB,SAASC,UAAU;AAQnB,IAAMC,iBAAkC;EACtCC,SAAS;AACX;AAIA,IAAMC,YAAwB;EAC5B,CAACC,UAAUC,YAAAA;AACT,WAAOA,QAAQC,WAAW,sBAAA,cAACC,QAAQC,UAAQ,MAAEJ,QAAAA,IAA+BA;EAC9E;EACA,CAACA,UAAUC,YAAAA;AACT,WAAOA,SAASH,UAAU,sBAAA,cAACO,iBAAAA;MAAgBP,SAASG,QAAQH;OAAUE,QAAAA,IAA8BA;EACtG;;AAQK,IAAMM,aAAa,CAAC,EAAEC,YAAYC,YAAY,GAAGC,SAAAA,IAAkC,CAAC,MAAC;AAE1F,SAAO,CAACC,OAAOC,aAAAA;AACb,UAAMV,UAAUW,aAAa,CAAC,GAAGH,UAAUZ,cAAAA;AAC3C,UAAMG;;MAEJ,sBAAA,cAACa,OAAAA;QAAIC,MAAK;QAAOC,WAAWC,GAAGR,cAAc,sCAAsCD,UAAAA;SACjF,sBAAA,cAACG,OAAAA,IAAAA,CAAAA;;AAIL,WAAOX,UAAUkB,YAAY,CAACC,KAAKC,aAAaA,SAASD,KAAKjB,OAAAA,GAAUD,QAAAA;EAC1E;AACF;;;AC9CA,OAAOoB,YAAW;AAElB,SAASC,8BAA8B;AAKhC,IAAMC,cAAyB,CAACC,UAAAA;AACrCC,yBAAAA;AACA,SAAO,gBAAAC,OAAA,cAACF,OAAAA,IAAAA;AACV;;;ACXA,SAASG,cAAc;AAEvB,OAAOC,UAASC,MAAMC,WAAWC,gBAAgB;AACjD,SAASC,4BAA4B;AAErC,SAAyBC,qBAAqB;AAC9C,SAASC,iBAAiB;AAE1B,IAAMC,UAAUC,OAAOC,WAAU;AAK1B,IAAMC,YAAuB,CAACC,OAAOC,YAAAA;AAE1C,QAAMC,gBAAgBC,qBAAKH,KAAAA;AAC3B,QAAM,CAACI,WAAWC,YAAAA,IAAgBC,SAAoB,MAAA;AAKtDC,YAAU,MAAA;AACR,UAAMC,eAAe,CAACC,aAAsBJ,aAAaI,WAAW,SAAS,OAAA;AAC7Eb,YAAQc,GAAGC,sBAAsBH,YAAAA;AACjC,WAAO,MAAMZ,QAAQgB,IAAID,sBAAsBH,YAAAA;EACjD,GAAG;IAACZ;GAAQ;AAEZ,SACE,gBAAAiB,OAAA,cAACC,eAAAA;IAAcC,IAAIC;IAAWZ;IAAsBa,oBAAoBhB,SAASiB,YAAYC;IAAcC,SAAAA;KACzG,gBAAAP,OAAA,cAACX,eAAAA,IAAAA,CAAAA;AAGP;;;AChCA,OAAOmB,YAAwB;AAKxB,IAAMC,SACX,CAAKC,MACL,CAACC,SAAY,gBAAAC,OAAA,cAAAA,OAAA,UAAA,MAAGF,EAAEC,IAAAA,KAAS,gBAAAC,OAAA,cAACC,OAAAA,IAAAA,CAAAA;;;AJA9BC,wBAAAA;",
-  "names": ["registerSignalsRuntime", "defaultsDeep", "React", "DensityProvider", "Tooltip", "mx", "defaultOptions", "density", "providers", "children", "options", "tooltips", "Tooltip", "Provider", "DensityProvider", "withLayout", "classNames", "fullscreen", "_options", "Story", "_context", "defaultsDeep", "div", "role", "className", "mx", "reduceRight", "acc", "provider", "React", "registerSignalsRuntime", "withSignals", "Story", "registerSignalsRuntime", "React", "addons", "React", "memo", "useEffect", "useState", "DARK_MODE_EVENT_NAME", "ThemeProvider", "defaultTx", "channel", "addons", "getChannel", "withTheme", "Story", "context", "MemoizedStory", "memo", "themeMode", "setThemeMode", "useState", "useEffect", "handleUpdate", "darkMode", "on", "DARK_MODE_EVENT_NAME", "off", "React", "ThemeProvider", "tx", "defaultTx", "resourceExtensions", "parameters", "translations", "noCache", "React", "render", "r", "args", "React", "div", "registerSignalsRuntime"]
+  "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 './decorators';\nexport * from './util';\n\nregisterSignalsRuntime();\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 ? FixedContainer : 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\nexport const DefaultContainer: FC<ContainerProps> = ({ children, classNames }) => {\n  return (\n    <div role='none' className={mx(classNames)}>\n      {children}\n    </div>\n  );\n};\n\nexport const FixedContainer: FC<ContainerProps> = ({ children, classNames }) => {\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: FC<ContainerProps> = ({ children, classNames = 'w-[30rem]', ...props }) => {\n  return (\n    <FixedContainer 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    </FixedContainer>\n  );\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Decorator } from '@storybook/react';\nimport React from 'react';\n\nimport { registerSignalsRuntime } from '@dxos/echo-signals/react';\n\n/**\n * Make objects created using @dxos/echo-schema `create` reactive.\n */\nexport const withSignals: Decorator = (Story) => {\n  registerSignalsRuntime();\n  return <Story />;\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { addons } from '@storybook/preview-api';\nimport { type Decorator } from '@storybook/react';\nimport React, { memo, useCallback, useEffect, useState } from 'react';\nimport { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';\n\nimport { DxThemeEditor as NaturalDxThemeEditor } from '@dxos/lit-theme-editor';\nimport '@dxos/lit-theme-editor/dx-theme-editor.pcss';\nimport { createComponent } from '@dxos/lit-ui/react';\nimport { type ThemeMode, ThemeProvider, Tooltip, Dialog, IconButton } from '@dxos/react-ui';\nimport { defaultTx } from '@dxos/react-ui-theme';\nimport { PARAM_KEY } from '@dxos/theme-editor-addon';\n\nconst DxThemeEditor = createComponent({\n  tagName: 'dx-theme-editor',\n  elementClass: NaturalDxThemeEditor,\n  react: React,\n});\n\n/**\n * Changes theme based on storybook toolbar toggle.\n */\nexport const withTheme: Decorator = (Story, context) => {\n  // Prevent re-rendering of the story.\n  const MemoizedStory = memo(Story);\n  const [themeMode, setThemeMode] = useState<ThemeMode>('dark');\n  const [editorOpen, setEditorOpen] = useState(false);\n\n  const handleOpenChange = useCallback((nextOpen: boolean) => {\n    setEditorOpen(nextOpen);\n  }, []);\n\n  // https://www.npmjs.com/package/storybook-dark-mode\n  // NOTE: The `useDarkMode` hook causes the story to continually re-render.\n  // NOTE: Changing the theme will cause the story to remount.\n  useEffect(() => {\n    const handleDarkModeUpdate = (darkMode: boolean) => setThemeMode(darkMode ? 'dark' : 'light');\n    addons.getChannel().on(DARK_MODE_EVENT_NAME, handleDarkModeUpdate);\n    return () => addons.getChannel().off(DARK_MODE_EVENT_NAME, handleDarkModeUpdate);\n  }, []);\n\n  useEffect(() => {\n    const openEditor = () => {\n      handleOpenChange(true);\n    };\n    addons.getChannel().on(PARAM_KEY, openEditor);\n    return () => addons.getChannel().off(PARAM_KEY, openEditor);\n  }, []);\n\n  return (\n    <ThemeProvider tx={defaultTx} themeMode={themeMode} resourceExtensions={context?.parameters?.translations} noCache>\n      <Tooltip.Provider>\n        <MemoizedStory />\n        <Dialog.Root open={editorOpen} onOpenChange={handleOpenChange} modal={false}>\n          <div\n            role='none'\n            className='dx-dialog__overlay bg-transparent pointer-events-none'\n            style={{ placeContent: 'end' }}\n          >\n            <Dialog.Content\n              classNames='relative box-content py-0 px-2 md:is-[35rem] md:max-is-none overflow-y-auto layout-contain pointer-events-auto'\n              style={{ maxBlockSize: '50dvh' }}\n              onInteractOutside={(event) => event.preventDefault()}\n            >\n              <Dialog.Title srOnly>Theme Editor</Dialog.Title>\n              {editorOpen && <DxThemeEditor />}\n              <Dialog.Close asChild>\n                <IconButton\n                  iconOnly\n                  icon='ph--x--regular'\n                  label='Close'\n                  classNames='absolute block-start-2 inline-end-2'\n                />\n              </Dialog.Close>\n            </Dialog.Content>\n          </div>\n        </Dialog.Root>\n      </Tooltip.Provider>\n    </ThemeProvider>\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,0BAAAA,+BAA8B;;;ACCvC,OAAOC,kBAAkB;AACzB,OAAOC,WAA0D;AAEjE,SAAuBC,uBAA6C;AACpE,SAASC,UAAU;AAOnB,IAAMC,iBAAkC;EACtCC,SAAS;AACX;AAIA,IAAMC,YAAwB;EAC5B,CAACC,UAAUC,YAAAA;AACT,WAAOA,SAASH,UAAU,sBAAA,cAACI,iBAAAA;MAAgBJ,SAASG,QAAQH;OAAUE,QAAAA,IAA8BA;EACtG;;AAUK,IAAMG,aAAa,CAAC,EACzBC,YACAC,YACAC,YAAYD,aAAaE,iBAAiBC,kBAC1C,GAAGC,gBAAAA,IACgB,CAAC,MAAC;AAErB,SAAO,CAACC,OAAOC,aAAAA;AACb,UAAMX,WACJ,sBAAA,cAACM,WAAAA;MAAUF;MAAwBC;OACjC,sBAAA,cAACK,OAAAA,IAAAA,CAAAA;AAIL,UAAMT,UAAUW,aAAa,CAAC,GAAGH,iBAAiBZ,cAAAA;AAClD,WAAOE,UAAUc,YAAY,CAACC,KAAKC,aAAaA,SAASD,KAAKb,OAAAA,GAAUD,QAAAA;EAC1E;AACF;AAEO,IAAMQ,mBAAuC,CAAC,EAAER,UAAUI,WAAU,MAAE;AAC3E,SACE,sBAAA,cAACY,OAAAA;IAAIC,MAAK;IAAOC,WAAWC,GAAGf,UAAAA;KAC5BJ,QAAAA;AAGP;AAEO,IAAMO,iBAAqC,CAAC,EAAEP,UAAUI,WAAU,MAAE;AACzE,SACE,sBAAA,cAACY,OAAAA;IAAIC,MAAK;IAAOC,WAAWC,GAAG,sCAAsCf,UAAAA;KAClEJ,QAAAA;AAGP;AAEO,IAAMoB,kBAAsC,CAAC,EAAEpB,UAAUI,aAAa,aAAa,GAAGiB,MAAAA,MAAO;AAClG,SACE,sBAAA,cAACd,gBAAAA;IAAeH,YAAW;IAAkC,GAAGiB;KAC9D,sBAAA,cAACL,OAAAA;IAAIC,MAAK;IAAOC,WAAWC,GAAG,uDAAuDf,UAAAA;KACnFJ,QAAAA,CAAAA;AAIT;;;ACzEA,OAAOsB,YAAW;AAElB,SAASC,8BAA8B;AAKhC,IAAMC,cAAyB,CAACC,UAAAA;AACrCC,yBAAAA;AACA,SAAO,gBAAAC,OAAA,cAACF,OAAAA,IAAAA;AACV;;;ACXA,SAASG,cAAc;AAEvB,OAAOC,UAASC,MAAMC,aAAaC,WAAWC,gBAAgB;AAC9D,SAASC,4BAA4B;AAErC,SAASC,iBAAiBC,4BAA4B;AACtD,OAAO;AACP,SAASC,uBAAuB;AAChC,SAAyBC,eAAeC,SAASC,QAAQC,kBAAkB;AAC3E,SAASC,iBAAiB;AAC1B,SAASC,iBAAiB;AAE1B,IAAMC,gBAAgBC,gBAAgB;EACpCC,SAAS;EACTC,cAAcC;EACdC,OAAOC;AACT,CAAA;AAKO,IAAMC,YAAuB,CAACC,OAAOC,YAAAA;AAE1C,QAAMC,gBAAgBC,qBAAKH,KAAAA;AAC3B,QAAM,CAACI,WAAWC,YAAAA,IAAgBC,SAAoB,MAAA;AACtD,QAAM,CAACC,YAAYC,aAAAA,IAAiBF,SAAS,KAAA;AAE7C,QAAMG,mBAAmBC,YAAY,CAACC,aAAAA;AACpCH,kBAAcG,QAAAA;EAChB,GAAG,CAAA,CAAE;AAKLC,YAAU,MAAA;AACR,UAAMC,uBAAuB,CAACC,aAAsBT,aAAaS,WAAW,SAAS,OAAA;AACrFC,WAAOC,WAAU,EAAGC,GAAGC,sBAAsBL,oBAAAA;AAC7C,WAAO,MAAME,OAAOC,WAAU,EAAGG,IAAID,sBAAsBL,oBAAAA;EAC7D,GAAG,CAAA,CAAE;AAELD,YAAU,MAAA;AACR,UAAMQ,aAAa,MAAA;AACjBX,uBAAiB,IAAA;IACnB;AACAM,WAAOC,WAAU,EAAGC,GAAGI,WAAWD,UAAAA;AAClC,WAAO,MAAML,OAAOC,WAAU,EAAGG,IAAIE,WAAWD,UAAAA;EAClD,GAAG,CAAA,CAAE;AAEL,SACE,gBAAAtB,OAAA,cAACwB,eAAAA;IAAcC,IAAIC;IAAWpB;IAAsBqB,oBAAoBxB,SAASyB,YAAYC;IAAcC,SAAAA;KACzG,gBAAA9B,OAAA,cAAC+B,QAAQC,UAAQ,MACf,gBAAAhC,OAAA,cAACI,eAAAA,IAAAA,GACD,gBAAAJ,OAAA,cAACiC,OAAOC,MAAI;IAACC,MAAM1B;IAAY2B,cAAczB;IAAkB0B,OAAO;KACpE,gBAAArC,OAAA,cAACsC,OAAAA;IACCC,MAAK;IACLC,WAAU;IACVC,OAAO;MAAEC,cAAc;IAAM;KAE7B,gBAAA1C,OAAA,cAACiC,OAAOU,SAAO;IACbC,YAAW;IACXH,OAAO;MAAEI,cAAc;IAAQ;IAC/BC,mBAAmB,CAACC,UAAUA,MAAMC,eAAc;KAElD,gBAAAhD,OAAA,cAACiC,OAAOgB,OAAK;IAACC,QAAAA;KAAO,cAAA,GACpBzC,cAAc,gBAAAT,OAAA,cAACN,eAAAA,IAAAA,GAChB,gBAAAM,OAAA,cAACiC,OAAOkB,OAAK;IAACC,SAAAA;KACZ,gBAAApD,OAAA,cAACqD,YAAAA;IACCC,UAAAA;IACAC,MAAK;IACLC,OAAM;IACNZ,YAAW;;AAS7B;;;AC/EA,OAAOa,YAAwB;AAKxB,IAAMC,SACX,CAAKC,MACL,CAACC,SAAY,gBAAAC,OAAA,cAAAA,OAAA,UAAA,MAAGF,EAAEC,IAAAA,KAAS,gBAAAC,OAAA,cAACC,OAAAA,IAAAA,CAAAA;;;AJA9BC,wBAAAA;",
+  "names": ["registerSignalsRuntime", "defaultsDeep", "React", "DensityProvider", "mx", "defaultOptions", "density", "providers", "children", "options", "DensityProvider", "withLayout", "classNames", "fullscreen", "Container", "FixedContainer", "DefaultContainer", "providedOptions", "Story", "_context", "defaultsDeep", "reduceRight", "acc", "provider", "div", "role", "className", "mx", "ColumnContainer", "props", "React", "registerSignalsRuntime", "withSignals", "Story", "registerSignalsRuntime", "React", "addons", "React", "memo", "useCallback", "useEffect", "useState", "DARK_MODE_EVENT_NAME", "DxThemeEditor", "NaturalDxThemeEditor", "createComponent", "ThemeProvider", "Tooltip", "Dialog", "IconButton", "defaultTx", "PARAM_KEY", "DxThemeEditor", "createComponent", "tagName", "elementClass", "NaturalDxThemeEditor", "react", "React", "withTheme", "Story", "context", "MemoizedStory", "memo", "themeMode", "setThemeMode", "useState", "editorOpen", "setEditorOpen", "handleOpenChange", "useCallback", "nextOpen", "useEffect", "handleDarkModeUpdate", "darkMode", "addons", "getChannel", "on", "DARK_MODE_EVENT_NAME", "off", "openEditor", "PARAM_KEY", "ThemeProvider", "tx", "defaultTx", "resourceExtensions", "parameters", "translations", "noCache", "Tooltip", "Provider", "Dialog", "Root", "open", "onOpenChange", "modal", "div", "role", "className", "style", "placeContent", "Content", "classNames", "maxBlockSize", "onInteractOutside", "event", "preventDefault", "Title", "srOnly", "Close", "asChild", "IconButton", "iconOnly", "icon", "label", "React", "render", "r", "args", "React", "div", "registerSignalsRuntime"]
 }

package/dist/lib/browser/meta.json

@@ -1 +1 @@
-{"inputs":{"packages/common/storybook-utils/src/decorators/withLayout.tsx":{"bytes":5343,"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","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/common/storybook-utils/src/decorators/withSignals.tsx":{"bytes":1440,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/echo-signals/react","kind":"import-statement","external":true}],"format":"esm"},"packages/common/storybook-utils/src/decorators/withTheme.tsx":{"bytes":4710,"imports":[{"path":"@storybook/preview-api","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"storybook-dark-mode","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"},"packages/common/storybook-utils/src/decorators/index.ts":{"bytes":708,"imports":[{"path":"packages/common/storybook-utils/src/decorators/withLayout.tsx","kind":"import-statement","original":"./withLayout"},{"path":"packages/common/storybook-utils/src/decorators/withSignals.tsx","kind":"import-statement","original":"./withSignals"},{"path":"packages/common/storybook-utils/src/decorators/withTheme.tsx","kind":"import-statement","original":"./withTheme"}],"format":"esm"},"packages/common/storybook-utils/src/util.tsx":{"bytes":1048,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/common/storybook-utils/src/index.ts":{"bytes":962,"imports":[{"path":"@dxos/echo-signals/react","kind":"import-statement","external":true},{"path":"packages/common/storybook-utils/src/decorators/index.ts","kind":"import-statement","original":"./decorators"},{"path":"packages/common/storybook-utils/src/util.tsx","kind":"import-statement","original":"./util"}],"format":"esm"}},"outputs":{"packages/common/storybook-utils/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":6666},"packages/common/storybook-utils/dist/lib/browser/index.mjs":{"imports":[{"path":"@dxos/echo-signals/react","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","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/echo-signals/react","kind":"import-statement","external":true},{"path":"@storybook/preview-api","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"storybook-dark-mode","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}],"exports":["render","withLayout","withSignals","withTheme"],"entryPoint":"packages/common/storybook-utils/src/index.ts","inputs":{"packages/common/storybook-utils/src/index.ts":{"bytesInOutput":121},"packages/common/storybook-utils/src/decorators/withLayout.tsx":{"bytesInOutput":1175},"packages/common/storybook-utils/src/decorators/index.ts":{"bytesInOutput":0},"packages/common/storybook-utils/src/decorators/withSignals.tsx":{"bytesInOutput":217},"packages/common/storybook-utils/src/decorators/withTheme.tsx":{"bytesInOutput":933},"packages/common/storybook-utils/src/util.tsx":{"bytesInOutput":181}},"bytes":3069}}}
+{"inputs":{"packages/common/storybook-utils/src/decorators/withLayout.tsx":{"bytes":7364,"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"},"packages/common/storybook-utils/src/decorators/withSignals.tsx":{"bytes":1400,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/echo-signals/react","kind":"import-statement","external":true}],"format":"esm"},"packages/common/storybook-utils/src/decorators/withTheme.tsx":{"bytes":10989,"imports":[{"path":"@storybook/preview-api","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"storybook-dark-mode","kind":"import-statement","external":true},{"path":"@dxos/lit-theme-editor","kind":"import-statement","external":true},{"path":"@dxos/lit-theme-editor/dx-theme-editor.pcss","kind":"import-statement","external":true},{"path":"@dxos/lit-ui/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":"@dxos/theme-editor-addon","kind":"import-statement","external":true}],"format":"esm"},"packages/common/storybook-utils/src/decorators/index.ts":{"bytes":676,"imports":[{"path":"packages/common/storybook-utils/src/decorators/withLayout.tsx","kind":"import-statement","original":"./withLayout"},{"path":"packages/common/storybook-utils/src/decorators/withSignals.tsx","kind":"import-statement","original":"./withSignals"},{"path":"packages/common/storybook-utils/src/decorators/withTheme.tsx","kind":"import-statement","original":"./withTheme"}],"format":"esm"},"packages/common/storybook-utils/src/util.tsx":{"bytes":1012,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/common/storybook-utils/src/index.ts":{"bytes":930,"imports":[{"path":"@dxos/echo-signals/react","kind":"import-statement","external":true},{"path":"packages/common/storybook-utils/src/decorators/index.ts","kind":"import-statement","original":"./decorators"},{"path":"packages/common/storybook-utils/src/util.tsx","kind":"import-statement","original":"./util"}],"format":"esm"}},"outputs":{"packages/common/storybook-utils/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":11326},"packages/common/storybook-utils/dist/lib/browser/index.mjs":{"imports":[{"path":"@dxos/echo-signals/react","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/echo-signals/react","kind":"import-statement","external":true},{"path":"@storybook/preview-api","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"storybook-dark-mode","kind":"import-statement","external":true},{"path":"@dxos/lit-theme-editor","kind":"import-statement","external":true},{"path":"@dxos/lit-theme-editor/dx-theme-editor.pcss","kind":"import-statement","external":true},{"path":"@dxos/lit-ui/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":"@dxos/theme-editor-addon","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"exports":["ColumnContainer","DefaultContainer","FixedContainer","render","withLayout","withSignals","withTheme"],"entryPoint":"packages/common/storybook-utils/src/index.ts","inputs":{"packages/common/storybook-utils/src/index.ts":{"bytesInOutput":121},"packages/common/storybook-utils/src/decorators/withLayout.tsx":{"bytesInOutput":1671},"packages/common/storybook-utils/src/decorators/index.ts":{"bytesInOutput":0},"packages/common/storybook-utils/src/decorators/withSignals.tsx":{"bytesInOutput":217},"packages/common/storybook-utils/src/decorators/withTheme.tsx":{"bytesInOutput":2803},"packages/common/storybook-utils/src/util.tsx":{"bytesInOutput":181}},"bytes":5492}}}

package/dist/lib/node/index.cjs

@@ -0,0 +1,170 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var node_exports = {};
+__export(node_exports, {
+  ColumnContainer: () => ColumnContainer,
+  DefaultContainer: () => DefaultContainer,
+  FixedContainer: () => FixedContainer,
+  render: () => render,
+  withLayout: () => withLayout,
+  withSignals: () => withSignals,
+  withTheme: () => withTheme
+});
+module.exports = __toCommonJS(node_exports);
+var import_react = require("@dxos/echo-signals/react");
+var import_lodash = __toESM(require("lodash.defaultsdeep"));
+var import_react2 = __toESM(require("react"));
+var import_react_ui = require("@dxos/react-ui");
+var import_react_ui_theme = require("@dxos/react-ui-theme");
+var import_react3 = __toESM(require("react"));
+var import_react4 = require("@dxos/echo-signals/react");
+var import_preview_api = require("@storybook/preview-api");
+var import_react5 = __toESM(require("react"));
+var import_storybook_dark_mode = require("storybook-dark-mode");
+var import_lit_theme_editor = require("@dxos/lit-theme-editor");
+var import_dx_theme_editor = require("@dxos/lit-theme-editor/dx-theme-editor.pcss");
+var import_react6 = require("@dxos/lit-ui/react");
+var import_react_ui2 = require("@dxos/react-ui");
+var import_react_ui_theme2 = require("@dxos/react-ui-theme");
+var import_theme_editor_addon = require("@dxos/theme-editor-addon");
+var import_react7 = __toESM(require("react"));
+var defaultOptions = {
+  density: "fine"
+};
+var providers = [
+  (children, options) => {
+    return options?.density ? /* @__PURE__ */ import_react2.default.createElement(import_react_ui.DensityProvider, {
+      density: options.density
+    }, children) : children;
+  }
+];
+var withLayout = ({ classNames, fullscreen, Container = fullscreen ? FixedContainer : DefaultContainer, ...providedOptions } = {}) => {
+  return (Story, _context) => {
+    const children = /* @__PURE__ */ import_react2.default.createElement(Container, {
+      classNames,
+      fullscreen
+    }, /* @__PURE__ */ import_react2.default.createElement(Story, null));
+    const options = (0, import_lodash.default)({}, providedOptions, defaultOptions);
+    return providers.reduceRight((acc, provider) => provider(acc, options), children);
+  };
+};
+var DefaultContainer = ({ children, classNames }) => {
+  return /* @__PURE__ */ import_react2.default.createElement("div", {
+    role: "none",
+    className: (0, import_react_ui_theme.mx)(classNames)
+  }, children);
+};
+var FixedContainer = ({ children, classNames }) => {
+  return /* @__PURE__ */ import_react2.default.createElement("div", {
+    role: "none",
+    className: (0, import_react_ui_theme.mx)("fixed inset-0 flex overflow-hidden", classNames)
+  }, children);
+};
+var ColumnContainer = ({ children, classNames = "w-[30rem]", ...props }) => {
+  return /* @__PURE__ */ import_react2.default.createElement(FixedContainer, {
+    classNames: "justify-center bg-modalSurface",
+    ...props
+  }, /* @__PURE__ */ import_react2.default.createElement("div", {
+    role: "none",
+    className: (0, import_react_ui_theme.mx)("flex flex-col h-full overflow-y-auto bg-baseSurface", classNames)
+  }, children));
+};
+var withSignals = (Story) => {
+  (0, import_react4.registerSignalsRuntime)();
+  return /* @__PURE__ */ import_react3.default.createElement(Story, null);
+};
+var DxThemeEditor = (0, import_react6.createComponent)({
+  tagName: "dx-theme-editor",
+  elementClass: import_lit_theme_editor.DxThemeEditor,
+  react: import_react5.default
+});
+var withTheme = (Story, context) => {
+  const MemoizedStory = /* @__PURE__ */ (0, import_react5.memo)(Story);
+  const [themeMode, setThemeMode] = (0, import_react5.useState)("dark");
+  const [editorOpen, setEditorOpen] = (0, import_react5.useState)(false);
+  const handleOpenChange = (0, import_react5.useCallback)((nextOpen) => {
+    setEditorOpen(nextOpen);
+  }, []);
+  (0, import_react5.useEffect)(() => {
+    const handleDarkModeUpdate = (darkMode) => setThemeMode(darkMode ? "dark" : "light");
+    import_preview_api.addons.getChannel().on(import_storybook_dark_mode.DARK_MODE_EVENT_NAME, handleDarkModeUpdate);
+    return () => import_preview_api.addons.getChannel().off(import_storybook_dark_mode.DARK_MODE_EVENT_NAME, handleDarkModeUpdate);
+  }, []);
+  (0, import_react5.useEffect)(() => {
+    const openEditor = () => {
+      handleOpenChange(true);
+    };
+    import_preview_api.addons.getChannel().on(import_theme_editor_addon.PARAM_KEY, openEditor);
+    return () => import_preview_api.addons.getChannel().off(import_theme_editor_addon.PARAM_KEY, openEditor);
+  }, []);
+  return /* @__PURE__ */ import_react5.default.createElement(import_react_ui2.ThemeProvider, {
+    tx: import_react_ui_theme2.defaultTx,
+    themeMode,
+    resourceExtensions: context?.parameters?.translations,
+    noCache: true
+  }, /* @__PURE__ */ import_react5.default.createElement(import_react_ui2.Tooltip.Provider, null, /* @__PURE__ */ import_react5.default.createElement(MemoizedStory, null), /* @__PURE__ */ import_react5.default.createElement(import_react_ui2.Dialog.Root, {
+    open: editorOpen,
+    onOpenChange: handleOpenChange,
+    modal: false
+  }, /* @__PURE__ */ import_react5.default.createElement("div", {
+    role: "none",
+    className: "dx-dialog__overlay bg-transparent pointer-events-none",
+    style: {
+      placeContent: "end"
+    }
+  }, /* @__PURE__ */ import_react5.default.createElement(import_react_ui2.Dialog.Content, {
+    classNames: "relative box-content py-0 px-2 md:is-[35rem] md:max-is-none overflow-y-auto layout-contain pointer-events-auto",
+    style: {
+      maxBlockSize: "50dvh"
+    },
+    onInteractOutside: (event) => event.preventDefault()
+  }, /* @__PURE__ */ import_react5.default.createElement(import_react_ui2.Dialog.Title, {
+    srOnly: true
+  }, "Theme Editor"), editorOpen && /* @__PURE__ */ import_react5.default.createElement(DxThemeEditor, null), /* @__PURE__ */ import_react5.default.createElement(import_react_ui2.Dialog.Close, {
+    asChild: true
+  }, /* @__PURE__ */ import_react5.default.createElement(import_react_ui2.IconButton, {
+    iconOnly: true,
+    icon: "ph--x--regular",
+    label: "Close",
+    classNames: "absolute block-start-2 inline-end-2"
+  })))))));
+};
+var render = (r) => (args) => /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, r(args) ?? /* @__PURE__ */ import_react7.default.createElement("div", null));
+(0, import_react.registerSignalsRuntime)();
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ColumnContainer,
+  DefaultContainer,
+  FixedContainer,
+  render,
+  withLayout,
+  withSignals,
+  withTheme
+});
+//# sourceMappingURL=index.cjs.map

package/dist/lib/node/index.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/index.ts", "../../../src/decorators/withLayout.tsx", "../../../src/decorators/withSignals.tsx", "../../../src/decorators/withTheme.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 './decorators';\nexport * from './util';\n\nregisterSignalsRuntime();\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 ? FixedContainer : 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\nexport const DefaultContainer: FC<ContainerProps> = ({ children, classNames }) => {\n  return (\n    <div role='none' className={mx(classNames)}>\n      {children}\n    </div>\n  );\n};\n\nexport const FixedContainer: FC<ContainerProps> = ({ children, classNames }) => {\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: FC<ContainerProps> = ({ children, classNames = 'w-[30rem]', ...props }) => {\n  return (\n    <FixedContainer 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    </FixedContainer>\n  );\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Decorator } from '@storybook/react';\nimport React from 'react';\n\nimport { registerSignalsRuntime } from '@dxos/echo-signals/react';\n\n/**\n * Make objects created using @dxos/echo-schema `create` reactive.\n */\nexport const withSignals: Decorator = (Story) => {\n  registerSignalsRuntime();\n  return <Story />;\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { addons } from '@storybook/preview-api';\nimport { type Decorator } from '@storybook/react';\nimport React, { memo, useCallback, useEffect, useState } from 'react';\nimport { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';\n\nimport { DxThemeEditor as NaturalDxThemeEditor } from '@dxos/lit-theme-editor';\nimport '@dxos/lit-theme-editor/dx-theme-editor.pcss';\nimport { createComponent } from '@dxos/lit-ui/react';\nimport { type ThemeMode, ThemeProvider, Tooltip, Dialog, IconButton } from '@dxos/react-ui';\nimport { defaultTx } from '@dxos/react-ui-theme';\nimport { PARAM_KEY } from '@dxos/theme-editor-addon';\n\nconst DxThemeEditor = createComponent({\n  tagName: 'dx-theme-editor',\n  elementClass: NaturalDxThemeEditor,\n  react: React,\n});\n\n/**\n * Changes theme based on storybook toolbar toggle.\n */\nexport const withTheme: Decorator = (Story, context) => {\n  // Prevent re-rendering of the story.\n  const MemoizedStory = memo(Story);\n  const [themeMode, setThemeMode] = useState<ThemeMode>('dark');\n  const [editorOpen, setEditorOpen] = useState(false);\n\n  const handleOpenChange = useCallback((nextOpen: boolean) => {\n    setEditorOpen(nextOpen);\n  }, []);\n\n  // https://www.npmjs.com/package/storybook-dark-mode\n  // NOTE: The `useDarkMode` hook causes the story to continually re-render.\n  // NOTE: Changing the theme will cause the story to remount.\n  useEffect(() => {\n    const handleDarkModeUpdate = (darkMode: boolean) => setThemeMode(darkMode ? 'dark' : 'light');\n    addons.getChannel().on(DARK_MODE_EVENT_NAME, handleDarkModeUpdate);\n    return () => addons.getChannel().off(DARK_MODE_EVENT_NAME, handleDarkModeUpdate);\n  }, []);\n\n  useEffect(() => {\n    const openEditor = () => {\n      handleOpenChange(true);\n    };\n    addons.getChannel().on(PARAM_KEY, openEditor);\n    return () => addons.getChannel().off(PARAM_KEY, openEditor);\n  }, []);\n\n  return (\n    <ThemeProvider tx={defaultTx} themeMode={themeMode} resourceExtensions={context?.parameters?.translations} noCache>\n      <Tooltip.Provider>\n        <MemoizedStory />\n        <Dialog.Root open={editorOpen} onOpenChange={handleOpenChange} modal={false}>\n          <div\n            role='none'\n            className='dx-dialog__overlay bg-transparent pointer-events-none'\n            style={{ placeContent: 'end' }}\n          >\n            <Dialog.Content\n              classNames='relative box-content py-0 px-2 md:is-[35rem] md:max-is-none overflow-y-auto layout-contain pointer-events-auto'\n              style={{ maxBlockSize: '50dvh' }}\n              onInteractOutside={(event) => event.preventDefault()}\n            >\n              <Dialog.Title srOnly>Theme Editor</Dialog.Title>\n              {editorOpen && <DxThemeEditor />}\n              <Dialog.Close asChild>\n                <IconButton\n                  iconOnly\n                  icon='ph--x--regular'\n                  label='Close'\n                  classNames='absolute block-start-2 inline-end-2'\n                />\n              </Dialog.Close>\n            </Dialog.Content>\n          </div>\n        </Dialog.Root>\n      </Tooltip.Provider>\n    </ThemeProvider>\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,mBAAuC;ACCvC,oBAAyB;AACzB,IAAAA,gBAAiE;AAEjE,sBAAoE;AACpE,4BAAmB;ACJnB,IAAAA,gBAAkB;AAElB,IAAAA,gBAAuC;ACHvC,yBAAuB;AAEvB,IAAAA,gBAA8D;AAC9D,iCAAqC;AAErC,8BAAsD;AACtD,6BAAO;AACP,IAAAA,gBAAgC;AAChC,IAAAC,mBAA2E;AAC3E,IAAAC,yBAA0B;AAC1B,gCAA0B;ACV1B,IAAAF,gBAA+B;AHY/B,IAAMG,iBAAkC;EACtCC,SAAS;AACX;AAIA,IAAMC,YAAwB;EAC5B,CAACC,UAAUC,YAAAA;AACT,WAAOA,SAASH,UAAU,8BAAAI,QAAA,cAACC,iCAAAA;MAAgBL,SAASG,QAAQH;OAAUE,QAAAA,IAA8BA;EACtG;;AAUK,IAAMI,aAAa,CAAC,EACzBC,YACAC,YACAC,YAAYD,aAAaE,iBAAiBC,kBAC1C,GAAGC,gBAAAA,IACgB,CAAC,MAAC;AAErB,SAAO,CAACC,OAAOC,aAAAA;AACb,UAAMZ,WACJ,8BAAAE,QAAA,cAACK,WAAAA;MAAUF;MAAwBC;OACjC,8BAAAJ,QAAA,cAACS,OAAAA,IAAAA,CAAAA;AAIL,UAAMV,cAAUY,cAAAA,SAAa,CAAC,GAAGH,iBAAiBb,cAAAA;AAClD,WAAOE,UAAUe,YAAY,CAACC,KAAKC,aAAaA,SAASD,KAAKd,OAAAA,GAAUD,QAAAA;EAC1E;AACF;AAEO,IAAMS,mBAAuC,CAAC,EAAET,UAAUK,WAAU,MAAE;AAC3E,SACE,8BAAAH,QAAA,cAACe,OAAAA;IAAIC,MAAK;IAAOC,eAAWC,0BAAGf,UAAAA;KAC5BL,QAAAA;AAGP;AAEO,IAAMQ,iBAAqC,CAAC,EAAER,UAAUK,WAAU,MAAE;AACzE,SACE,8BAAAH,QAAA,cAACe,OAAAA;IAAIC,MAAK;IAAOC,eAAWC,0BAAG,sCAAsCf,UAAAA;KAClEL,QAAAA;AAGP;AAEO,IAAMqB,kBAAsC,CAAC,EAAErB,UAAUK,aAAa,aAAa,GAAGiB,MAAAA,MAAO;AAClG,SACE,8BAAApB,QAAA,cAACM,gBAAAA;IAAeH,YAAW;IAAkC,GAAGiB;KAC9D,8BAAApB,QAAA,cAACe,OAAAA;IAAIC,MAAK;IAAOC,eAAWC,0BAAG,uDAAuDf,UAAAA;KACnFL,QAAAA,CAAAA;AAIT;AClEO,IAAMuB,cAAyB,CAACZ,UAAAA;AACrCa,4CAAAA;AACA,SAAOtB,8BAAAA,QAAA,cAACS,OAAAA,IAAAA;AACV;ACCA,IAAMc,oBAAgBC,+BAAgB;EACpCC,SAAS;EACTC,cAAcC,wBAAAA;EACdC,OAAO5B,cAAAA;AACT,CAAA;AAKO,IAAM6B,YAAuB,CAACpB,OAAOqB,YAAAA;AAE1C,QAAMC,gBAAgBC,wCAAKvB,KAAAA;AAC3B,QAAM,CAACwB,WAAWC,YAAAA,QAAgBC,wBAAoB,MAAA;AACtD,QAAM,CAACC,YAAYC,aAAAA,QAAiBF,wBAAS,KAAA;AAE7C,QAAMG,uBAAmBC,2BAAY,CAACC,aAAAA;AACpCH,kBAAcG,QAAAA;EAChB,GAAG,CAAA,CAAE;AAKLC,+BAAU,MAAA;AACR,UAAMC,uBAAuB,CAACC,aAAsBT,aAAaS,WAAW,SAAS,OAAA;AACrFC,8BAAOC,WAAU,EAAGC,GAAGC,iDAAsBL,oBAAAA;AAC7C,WAAO,MAAME,0BAAOC,WAAU,EAAGG,IAAID,iDAAsBL,oBAAAA;EAC7D,GAAG,CAAA,CAAE;AAELD,+BAAU,MAAA;AACR,UAAMQ,aAAa,MAAA;AACjBX,uBAAiB,IAAA;IACnB;AACAM,8BAAOC,WAAU,EAAGC,GAAGI,qCAAWD,UAAAA;AAClC,WAAO,MAAML,0BAAOC,WAAU,EAAGG,IAAIE,qCAAWD,UAAAA;EAClD,GAAG,CAAA,CAAE;AAEL,SACEjD,8BAAAA,QAAA,cAACmD,gCAAAA;IAAcC,IAAIC;IAAWpB;IAAsBqB,oBAAoBxB,SAASyB,YAAYC;IAAcC,SAAAA;KACzGzD,8BAAAA,QAAA,cAAC0D,yBAAQC,UAAQ,MACf3D,8BAAAA,QAAA,cAAC+B,eAAAA,IAAAA,GACD/B,8BAAAA,QAAA,cAAC4D,wBAAOC,MAAI;IAACC,MAAM1B;IAAY2B,cAAczB;IAAkB0B,OAAO;KACpEhE,8BAAAA,QAAA,cAACe,OAAAA;IACCC,MAAK;IACLC,WAAU;IACVgD,OAAO;MAAEC,cAAc;IAAM;KAE7BlE,8BAAAA,QAAA,cAAC4D,wBAAOO,SAAO;IACbhE,YAAW;IACX8D,OAAO;MAAEG,cAAc;IAAQ;IAC/BC,mBAAmB,CAACC,UAAUA,MAAMC,eAAc;KAElDvE,8BAAAA,QAAA,cAAC4D,wBAAOY,OAAK;IAACC,QAAAA;KAAO,cAAA,GACpBrC,cAAcpC,8BAAAA,QAAA,cAACuB,eAAAA,IAAAA,GAChBvB,8BAAAA,QAAA,cAAC4D,wBAAOc,OAAK;IAACC,SAAAA;KACZ3E,8BAAAA,QAAA,cAAC4E,6BAAAA;IACCC,UAAAA;IACAC,MAAK;IACLC,OAAM;IACN5E,YAAW;;AAS7B;AC1EO,IAAM6E,SACX,CAAKC,MACL,CAACC,SAAYlF,8BAAAA,QAAA,cAAAA,cAAAA,QAAA,UAAA,MAAGiF,EAAEC,IAAAA,KAASlF,8BAAAA,QAAA,cAACe,OAAAA,IAAAA,CAAAA;IJA9BO,aAAAA,wBAAAA;",
+  "names": ["import_react", "import_react_ui", "import_react_ui_theme", "defaultOptions", "density", "providers", "children", "options", "React", "DensityProvider", "withLayout", "classNames", "fullscreen", "Container", "FixedContainer", "DefaultContainer", "providedOptions", "Story", "_context", "defaultsDeep", "reduceRight", "acc", "provider", "div", "role", "className", "mx", "ColumnContainer", "props", "withSignals", "registerSignalsRuntime", "DxThemeEditor", "createComponent", "tagName", "elementClass", "NaturalDxThemeEditor", "react", "withTheme", "context", "MemoizedStory", "memo", "themeMode", "setThemeMode", "useState", "editorOpen", "setEditorOpen", "handleOpenChange", "useCallback", "nextOpen", "useEffect", "handleDarkModeUpdate", "darkMode", "addons", "getChannel", "on", "DARK_MODE_EVENT_NAME", "off", "openEditor", "PARAM_KEY", "ThemeProvider", "tx", "defaultTx", "resourceExtensions", "parameters", "translations", "noCache", "Tooltip", "Provider", "Dialog", "Root", "open", "onOpenChange", "modal", "style", "placeContent", "Content", "maxBlockSize", "onInteractOutside", "event", "preventDefault", "Title", "srOnly", "Close", "asChild", "IconButton", "iconOnly", "icon", "label", "render", "r", "args"]
+}

package/dist/lib/node/meta.json

@@ -0,0 +1 @@
+{"inputs":{"packages/common/storybook-utils/src/decorators/withLayout.tsx":{"bytes":7364,"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"},"packages/common/storybook-utils/src/decorators/withSignals.tsx":{"bytes":1400,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/echo-signals/react","kind":"import-statement","external":true}],"format":"esm"},"packages/common/storybook-utils/src/decorators/withTheme.tsx":{"bytes":10989,"imports":[{"path":"@storybook/preview-api","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"storybook-dark-mode","kind":"import-statement","external":true},{"path":"@dxos/lit-theme-editor","kind":"import-statement","external":true},{"path":"@dxos/lit-theme-editor/dx-theme-editor.pcss","kind":"import-statement","external":true},{"path":"@dxos/lit-ui/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":"@dxos/theme-editor-addon","kind":"import-statement","external":true}],"format":"esm"},"packages/common/storybook-utils/src/decorators/index.ts":{"bytes":676,"imports":[{"path":"packages/common/storybook-utils/src/decorators/withLayout.tsx","kind":"import-statement","original":"./withLayout"},{"path":"packages/common/storybook-utils/src/decorators/withSignals.tsx","kind":"import-statement","original":"./withSignals"},{"path":"packages/common/storybook-utils/src/decorators/withTheme.tsx","kind":"import-statement","original":"./withTheme"}],"format":"esm"},"packages/common/storybook-utils/src/util.tsx":{"bytes":1012,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/common/storybook-utils/src/index.ts":{"bytes":930,"imports":[{"path":"@dxos/echo-signals/react","kind":"import-statement","external":true},{"path":"packages/common/storybook-utils/src/decorators/index.ts","kind":"import-statement","original":"./decorators"},{"path":"packages/common/storybook-utils/src/util.tsx","kind":"import-statement","original":"./util"}],"format":"esm"}},"outputs":{"packages/common/storybook-utils/dist/lib/node/index.cjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":11326},"packages/common/storybook-utils/dist/lib/node/index.cjs":{"imports":[{"path":"@dxos/echo-signals/react","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/echo-signals/react","kind":"import-statement","external":true},{"path":"@storybook/preview-api","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"storybook-dark-mode","kind":"import-statement","external":true},{"path":"@dxos/lit-theme-editor","kind":"import-statement","external":true},{"path":"@dxos/lit-theme-editor/dx-theme-editor.pcss","kind":"import-statement","external":true},{"path":"@dxos/lit-ui/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":"@dxos/theme-editor-addon","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"exports":["ColumnContainer","DefaultContainer","FixedContainer","render","withLayout","withSignals","withTheme"],"entryPoint":"packages/common/storybook-utils/src/index.ts","inputs":{"packages/common/storybook-utils/src/index.ts":{"bytesInOutput":121},"packages/common/storybook-utils/src/decorators/withLayout.tsx":{"bytesInOutput":1671},"packages/common/storybook-utils/src/decorators/index.ts":{"bytesInOutput":0},"packages/common/storybook-utils/src/decorators/withSignals.tsx":{"bytesInOutput":217},"packages/common/storybook-utils/src/decorators/withTheme.tsx":{"bytesInOutput":2803},"packages/common/storybook-utils/src/util.tsx":{"bytesInOutput":181}},"bytes":5492}}}

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

@@ -0,0 +1,143 @@
+import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
+
+// packages/common/storybook-utils/src/index.ts
+import { registerSignalsRuntime as registerSignalsRuntime2 } from "@dxos/echo-signals/react";
+
+// packages/common/storybook-utils/src/decorators/withLayout.tsx
+import defaultsDeep from "lodash.defaultsdeep";
+import React 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__ */ React.createElement(DensityProvider, {
+      density: options.density
+    }, children) : children;
+  }
+];
+var withLayout = ({ classNames, fullscreen, Container = fullscreen ? FixedContainer : DefaultContainer, ...providedOptions } = {}) => {
+  return (Story, _context) => {
+    const children = /* @__PURE__ */ React.createElement(Container, {
+      classNames,
+      fullscreen
+    }, /* @__PURE__ */ React.createElement(Story, null));
+    const options = defaultsDeep({}, providedOptions, defaultOptions);
+    return providers.reduceRight((acc, provider) => provider(acc, options), children);
+  };
+};
+var DefaultContainer = ({ children, classNames }) => {
+  return /* @__PURE__ */ React.createElement("div", {
+    role: "none",
+    className: mx(classNames)
+  }, children);
+};
+var FixedContainer = ({ children, classNames }) => {
+  return /* @__PURE__ */ React.createElement("div", {
+    role: "none",
+    className: mx("fixed inset-0 flex overflow-hidden", classNames)
+  }, children);
+};
+var ColumnContainer = ({ children, classNames = "w-[30rem]", ...props }) => {
+  return /* @__PURE__ */ React.createElement(FixedContainer, {
+    classNames: "justify-center bg-modalSurface",
+    ...props
+  }, /* @__PURE__ */ React.createElement("div", {
+    role: "none",
+    className: mx("flex flex-col h-full overflow-y-auto bg-baseSurface", classNames)
+  }, children));
+};
+
+// packages/common/storybook-utils/src/decorators/withSignals.tsx
+import React2 from "react";
+import { registerSignalsRuntime } from "@dxos/echo-signals/react";
+var withSignals = (Story) => {
+  registerSignalsRuntime();
+  return /* @__PURE__ */ React2.createElement(Story, null);
+};
+
+// packages/common/storybook-utils/src/decorators/withTheme.tsx
+import { addons } from "@storybook/preview-api";
+import React3, { memo, useCallback, useEffect, useState } from "react";
+import { DARK_MODE_EVENT_NAME } from "storybook-dark-mode";
+import { DxThemeEditor as NaturalDxThemeEditor } from "@dxos/lit-theme-editor";
+import "@dxos/lit-theme-editor/dx-theme-editor.pcss";
+import { createComponent } from "@dxos/lit-ui/react";
+import { ThemeProvider, Tooltip, Dialog, IconButton } from "@dxos/react-ui";
+import { defaultTx } from "@dxos/react-ui-theme";
+import { PARAM_KEY } from "@dxos/theme-editor-addon";
+var DxThemeEditor = createComponent({
+  tagName: "dx-theme-editor",
+  elementClass: NaturalDxThemeEditor,
+  react: React3
+});
+var withTheme = (Story, context) => {
+  const MemoizedStory = /* @__PURE__ */ memo(Story);
+  const [themeMode, setThemeMode] = useState("dark");
+  const [editorOpen, setEditorOpen] = useState(false);
+  const handleOpenChange = useCallback((nextOpen) => {
+    setEditorOpen(nextOpen);
+  }, []);
+  useEffect(() => {
+    const handleDarkModeUpdate = (darkMode) => setThemeMode(darkMode ? "dark" : "light");
+    addons.getChannel().on(DARK_MODE_EVENT_NAME, handleDarkModeUpdate);
+    return () => addons.getChannel().off(DARK_MODE_EVENT_NAME, handleDarkModeUpdate);
+  }, []);
+  useEffect(() => {
+    const openEditor = () => {
+      handleOpenChange(true);
+    };
+    addons.getChannel().on(PARAM_KEY, openEditor);
+    return () => addons.getChannel().off(PARAM_KEY, openEditor);
+  }, []);
+  return /* @__PURE__ */ React3.createElement(ThemeProvider, {
+    tx: defaultTx,
+    themeMode,
+    resourceExtensions: context?.parameters?.translations,
+    noCache: true
+  }, /* @__PURE__ */ React3.createElement(Tooltip.Provider, null, /* @__PURE__ */ React3.createElement(MemoizedStory, null), /* @__PURE__ */ React3.createElement(Dialog.Root, {
+    open: editorOpen,
+    onOpenChange: handleOpenChange,
+    modal: false
+  }, /* @__PURE__ */ React3.createElement("div", {
+    role: "none",
+    className: "dx-dialog__overlay bg-transparent pointer-events-none",
+    style: {
+      placeContent: "end"
+    }
+  }, /* @__PURE__ */ React3.createElement(Dialog.Content, {
+    classNames: "relative box-content py-0 px-2 md:is-[35rem] md:max-is-none overflow-y-auto layout-contain pointer-events-auto",
+    style: {
+      maxBlockSize: "50dvh"
+    },
+    onInteractOutside: (event) => event.preventDefault()
+  }, /* @__PURE__ */ React3.createElement(Dialog.Title, {
+    srOnly: true
+  }, "Theme Editor"), editorOpen && /* @__PURE__ */ React3.createElement(DxThemeEditor, null), /* @__PURE__ */ React3.createElement(Dialog.Close, {
+    asChild: true
+  }, /* @__PURE__ */ React3.createElement(IconButton, {
+    iconOnly: true,
+    icon: "ph--x--regular",
+    label: "Close",
+    classNames: "absolute block-start-2 inline-end-2"
+  })))))));
+};
+
+// packages/common/storybook-utils/src/util.tsx
+import React4 from "react";
+var render = (r) => (args) => /* @__PURE__ */ React4.createElement(React4.Fragment, null, r(args) ?? /* @__PURE__ */ React4.createElement("div", null));
+
+// packages/common/storybook-utils/src/index.ts
+registerSignalsRuntime2();
+export {
+  ColumnContainer,
+  DefaultContainer,
+  FixedContainer,
+  render,
+  withLayout,
+  withSignals,
+  withTheme
+};
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/index.ts", "../../../src/decorators/withLayout.tsx", "../../../src/decorators/withSignals.tsx", "../../../src/decorators/withTheme.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 './decorators';\nexport * from './util';\n\nregisterSignalsRuntime();\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 ? FixedContainer : 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\nexport const DefaultContainer: FC<ContainerProps> = ({ children, classNames }) => {\n  return (\n    <div role='none' className={mx(classNames)}>\n      {children}\n    </div>\n  );\n};\n\nexport const FixedContainer: FC<ContainerProps> = ({ children, classNames }) => {\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: FC<ContainerProps> = ({ children, classNames = 'w-[30rem]', ...props }) => {\n  return (\n    <FixedContainer 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    </FixedContainer>\n  );\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Decorator } from '@storybook/react';\nimport React from 'react';\n\nimport { registerSignalsRuntime } from '@dxos/echo-signals/react';\n\n/**\n * Make objects created using @dxos/echo-schema `create` reactive.\n */\nexport const withSignals: Decorator = (Story) => {\n  registerSignalsRuntime();\n  return <Story />;\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { addons } from '@storybook/preview-api';\nimport { type Decorator } from '@storybook/react';\nimport React, { memo, useCallback, useEffect, useState } from 'react';\nimport { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';\n\nimport { DxThemeEditor as NaturalDxThemeEditor } from '@dxos/lit-theme-editor';\nimport '@dxos/lit-theme-editor/dx-theme-editor.pcss';\nimport { createComponent } from '@dxos/lit-ui/react';\nimport { type ThemeMode, ThemeProvider, Tooltip, Dialog, IconButton } from '@dxos/react-ui';\nimport { defaultTx } from '@dxos/react-ui-theme';\nimport { PARAM_KEY } from '@dxos/theme-editor-addon';\n\nconst DxThemeEditor = createComponent({\n  tagName: 'dx-theme-editor',\n  elementClass: NaturalDxThemeEditor,\n  react: React,\n});\n\n/**\n * Changes theme based on storybook toolbar toggle.\n */\nexport const withTheme: Decorator = (Story, context) => {\n  // Prevent re-rendering of the story.\n  const MemoizedStory = memo(Story);\n  const [themeMode, setThemeMode] = useState<ThemeMode>('dark');\n  const [editorOpen, setEditorOpen] = useState(false);\n\n  const handleOpenChange = useCallback((nextOpen: boolean) => {\n    setEditorOpen(nextOpen);\n  }, []);\n\n  // https://www.npmjs.com/package/storybook-dark-mode\n  // NOTE: The `useDarkMode` hook causes the story to continually re-render.\n  // NOTE: Changing the theme will cause the story to remount.\n  useEffect(() => {\n    const handleDarkModeUpdate = (darkMode: boolean) => setThemeMode(darkMode ? 'dark' : 'light');\n    addons.getChannel().on(DARK_MODE_EVENT_NAME, handleDarkModeUpdate);\n    return () => addons.getChannel().off(DARK_MODE_EVENT_NAME, handleDarkModeUpdate);\n  }, []);\n\n  useEffect(() => {\n    const openEditor = () => {\n      handleOpenChange(true);\n    };\n    addons.getChannel().on(PARAM_KEY, openEditor);\n    return () => addons.getChannel().off(PARAM_KEY, openEditor);\n  }, []);\n\n  return (\n    <ThemeProvider tx={defaultTx} themeMode={themeMode} resourceExtensions={context?.parameters?.translations} noCache>\n      <Tooltip.Provider>\n        <MemoizedStory />\n        <Dialog.Root open={editorOpen} onOpenChange={handleOpenChange} modal={false}>\n          <div\n            role='none'\n            className='dx-dialog__overlay bg-transparent pointer-events-none'\n            style={{ placeContent: 'end' }}\n          >\n            <Dialog.Content\n              classNames='relative box-content py-0 px-2 md:is-[35rem] md:max-is-none overflow-y-auto layout-contain pointer-events-auto'\n              style={{ maxBlockSize: '50dvh' }}\n              onInteractOutside={(event) => event.preventDefault()}\n            >\n              <Dialog.Title srOnly>Theme Editor</Dialog.Title>\n              {editorOpen && <DxThemeEditor />}\n              <Dialog.Close asChild>\n                <IconButton\n                  iconOnly\n                  icon='ph--x--regular'\n                  label='Close'\n                  classNames='absolute block-start-2 inline-end-2'\n                />\n              </Dialog.Close>\n            </Dialog.Content>\n          </div>\n        </Dialog.Root>\n      </Tooltip.Provider>\n    </ThemeProvider>\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", "defaultsDeep", "React", "DensityProvider", "mx", "defaultOptions", "density", "providers", "children", "options", "DensityProvider", "withLayout", "classNames", "fullscreen", "Container", "FixedContainer", "DefaultContainer", "providedOptions", "Story", "_context", "defaultsDeep", "reduceRight", "acc", "provider", "div", "role", "className", "mx", "ColumnContainer", "props", "React", "registerSignalsRuntime", "withSignals", "Story", "registerSignalsRuntime", "React", "addons", "React", "memo", "useCallback", "useEffect", "useState", "DARK_MODE_EVENT_NAME", "DxThemeEditor", "NaturalDxThemeEditor", "createComponent", "ThemeProvider", "Tooltip", "Dialog", "IconButton", "defaultTx", "PARAM_KEY", "DxThemeEditor", "createComponent", "tagName", "elementClass", "NaturalDxThemeEditor", "react", "React", "withTheme", "Story", "context", "MemoizedStory", "memo", "themeMode", "setThemeMode", "useState", "editorOpen", "setEditorOpen", "handleOpenChange", "useCallback", "nextOpen", "useEffect", "handleDarkModeUpdate", "darkMode", "addons", "getChannel", "on", "DARK_MODE_EVENT_NAME", "off", "openEditor", "PARAM_KEY", "ThemeProvider", "tx", "defaultTx", "resourceExtensions", "parameters", "translations", "noCache", "Tooltip", "Provider", "Dialog", "Root", "open", "onOpenChange", "modal", "div", "role", "className", "style", "placeContent", "Content", "classNames", "maxBlockSize", "onInteractOutside", "event", "preventDefault", "Title", "srOnly", "Close", "asChild", "IconButton", "iconOnly", "icon", "label", "React", "render", "r", "args", "React", "div", "registerSignalsRuntime"]
+}

package/dist/lib/node-esm/meta.json

@@ -0,0 +1 @@
+{"inputs":{"packages/common/storybook-utils/src/decorators/withLayout.tsx":{"bytes":7364,"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"},"packages/common/storybook-utils/src/decorators/withSignals.tsx":{"bytes":1400,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/echo-signals/react","kind":"import-statement","external":true}],"format":"esm"},"packages/common/storybook-utils/src/decorators/withTheme.tsx":{"bytes":10989,"imports":[{"path":"@storybook/preview-api","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"storybook-dark-mode","kind":"import-statement","external":true},{"path":"@dxos/lit-theme-editor","kind":"import-statement","external":true},{"path":"@dxos/lit-theme-editor/dx-theme-editor.pcss","kind":"import-statement","external":true},{"path":"@dxos/lit-ui/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":"@dxos/theme-editor-addon","kind":"import-statement","external":true}],"format":"esm"},"packages/common/storybook-utils/src/decorators/index.ts":{"bytes":676,"imports":[{"path":"packages/common/storybook-utils/src/decorators/withLayout.tsx","kind":"import-statement","original":"./withLayout"},{"path":"packages/common/storybook-utils/src/decorators/withSignals.tsx","kind":"import-statement","original":"./withSignals"},{"path":"packages/common/storybook-utils/src/decorators/withTheme.tsx","kind":"import-statement","original":"./withTheme"}],"format":"esm"},"packages/common/storybook-utils/src/util.tsx":{"bytes":1012,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/common/storybook-utils/src/index.ts":{"bytes":930,"imports":[{"path":"@dxos/echo-signals/react","kind":"import-statement","external":true},{"path":"packages/common/storybook-utils/src/decorators/index.ts","kind":"import-statement","original":"./decorators"},{"path":"packages/common/storybook-utils/src/util.tsx","kind":"import-statement","original":"./util"}],"format":"esm"}},"outputs":{"packages/common/storybook-utils/dist/lib/node-esm/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":11328},"packages/common/storybook-utils/dist/lib/node-esm/index.mjs":{"imports":[{"path":"@dxos/echo-signals/react","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/echo-signals/react","kind":"import-statement","external":true},{"path":"@storybook/preview-api","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"storybook-dark-mode","kind":"import-statement","external":true},{"path":"@dxos/lit-theme-editor","kind":"import-statement","external":true},{"path":"@dxos/lit-theme-editor/dx-theme-editor.pcss","kind":"import-statement","external":true},{"path":"@dxos/lit-ui/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":"@dxos/theme-editor-addon","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"exports":["ColumnContainer","DefaultContainer","FixedContainer","render","withLayout","withSignals","withTheme"],"entryPoint":"packages/common/storybook-utils/src/index.ts","inputs":{"packages/common/storybook-utils/src/index.ts":{"bytesInOutput":121},"packages/common/storybook-utils/src/decorators/withLayout.tsx":{"bytesInOutput":1671},"packages/common/storybook-utils/src/decorators/index.ts":{"bytesInOutput":0},"packages/common/storybook-utils/src/decorators/withSignals.tsx":{"bytesInOutput":217},"packages/common/storybook-utils/src/decorators/withTheme.tsx":{"bytesInOutput":2803},"packages/common/storybook-utils/src/util.tsx":{"bytesInOutput":181}},"bytes":5585}}}

package/dist/types/src/decorators/withLayout.d.ts

@@ -1,14 +1,20 @@
 import { type Decorator } from '@storybook/react';
+import { type PropsWithChildren, type FC } from 'react';
 import { type Density, type ThemedClassName } from '@dxos/react-ui';
 type ProviderOptions = {
     fullscreen?: boolean;
     density?: Density;
-    tooltips?: boolean;
 };
-export type WithFullscreenProps = ThemedClassName<ProviderOptions>;
+export type ContainerProps = ThemedClassName<PropsWithChildren<Pick<ProviderOptions, 'fullscreen'>>>;
+export type WithLayoutProps = ThemedClassName<ProviderOptions & {
+    Container?: FC<ContainerProps>;
+}>;
 /**
  * Decorator to layout the story container, adding optional providers.
  */
-export declare const withLayout: ({ classNames, fullscreen, ..._options }?: WithFullscreenProps) => Decorator;
+export declare const withLayout: ({ classNames, fullscreen, Container, ...providedOptions }?: WithLayoutProps) => Decorator;
+export declare const DefaultContainer: FC<ContainerProps>;
+export declare const FixedContainer: FC<ContainerProps>;
+export declare const ColumnContainer: FC<ContainerProps>;
 export {};
 //# sourceMappingURL=withLayout.d.ts.map

package/dist/types/src/decorators/withLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"withLayout.d.ts","sourceRoot":"","sources":["../../../../src/decorators/withLayout.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAIlD,OAAO,EAAE,KAAK,OAAO,EAAmB,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAIrF,KAAK,eAAe,GAAG;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAiBF,MAAM,MAAM,mBAAmB,GAAG,eAAe,CAAC,eAAe,CAAC,CAAC;AAEnE;;GAEG;AACH,eAAO,MAAM,UAAU,6CAA6C,mBAAmB,KAAQ,SAa9F,CAAC"}
+{"version":3,"file":"withLayout.d.ts","sourceRoot":"","sources":["../../../../src/decorators/withLayout.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAc,EAAE,KAAK,iBAAiB,EAAY,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAEzE,OAAO,EAAE,KAAK,OAAO,EAAmB,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGrF,KAAK,eAAe,GAAG;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAcF,MAAM,MAAM,cAAc,GAAG,eAAe,CAAC,iBAAiB,CAAC,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;AAErG,MAAM,MAAM,eAAe,GAAG,eAAe,CAAC,eAAe,GAAG;IAAE,SAAS,CAAC,EAAE,EAAE,CAAC,cAAc,CAAC,CAAA;CAAE,CAAC,CAAC;AAEpG;;GAEG;AACH,eAAO,MAAM,UAAU,GAAI,4DAKxB,eAAoB,KAAG,SAYzB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,cAAc,CAM/C,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,cAAc,CAM7C,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,cAAc,CAQ9C,CAAC"}

package/dist/types/src/decorators/withTheme.d.ts

@@ -1,4 +1,5 @@
 import { type Decorator } from '@storybook/react';
+import '@dxos/lit-theme-editor/dx-theme-editor.pcss';
 /**
  * Changes theme based on storybook toolbar toggle.
  */

package/dist/types/src/decorators/withTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"withTheme.d.ts","sourceRoot":"","sources":["../../../../src/decorators/withTheme.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AASlD;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,SAmBvB,CAAC"}
+{"version":3,"file":"withTheme.d.ts","sourceRoot":"","sources":["../../../../src/decorators/withTheme.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAKlD,OAAO,6CAA6C,CAAC;AAYrD;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,SA0DvB,CAAC"}

package/dist/types/src/util.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../src/util.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAEvC;;GAEG;AACH,eAAO,MAAM,MAAM,GAChB,CAAC,KAAM,EAAE,CAAC,CAAC,CAAC,YACN,CAAC,sBAA8B,CAAC"}
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../src/util.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAEvC;;GAEG;AACH,eAAO,MAAM,MAAM,GAChB,CAAC,EAAG,GAAG,EAAE,CAAC,CAAC,CAAC,MACZ,MAAM,CAAC,sBAA8B,CAAC"}

package/dist/types/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"version":"5.7.3"}
+{"version":"5.8.3"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/storybook-utils",
-  "version": "0.8.1",
+  "version": "0.8.2-main.10c050d",
   "description": "Utilities for DXOS UI Storybooks.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -11,7 +11,8 @@
   "exports": {
     ".": {
       "types": "./dist/types/src/index.d.ts",
-      "browser": "./dist/lib/browser/index.mjs"
+      "browser": "./dist/lib/browser/index.mjs",
+      "node": "./dist/lib/node-esm/index.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
@@ -23,11 +24,15 @@
     "src"
   ],
   "dependencies": {
+    "@storybook/manager-api": "^8.3.6",
     "@storybook/preview-api": "^8.3.6",
     "lodash.defaultsdeep": "^4.6.1",
     "storybook-dark-mode": "^4.0.2",
-    "@dxos/echo-signals": "0.8.1",
-    "@dxos/log": "0.8.1"
+    "@dxos/echo-signals": "0.8.2-main.10c050d",
+    "@dxos/lit-theme-editor": "0.8.2-main.10c050d",
+    "@dxos/lit-ui": "0.8.2-main.10c050d",
+    "@dxos/log": "0.8.2-main.10c050d",
+    "@dxos/theme-editor-addon": "0.8.2-main.10c050d"
   },
   "devDependencies": {
     "@types/lodash.defaultsdeep": "^4.6.6",
@@ -36,13 +41,13 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "storybook": "^8.3.6",
-    "@dxos/react-ui": "0.8.1",
-    "@dxos/react-ui-theme": "0.8.1"
+    "@dxos/react-ui-theme": "0.8.2-main.10c050d",
+    "@dxos/react-ui": "0.8.2-main.10c050d"
   },
   "peerDependencies": {
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.1",
-    "@dxos/react-ui-theme": "0.8.1"
+    "@dxos/react-ui": "0.8.2-main.10c050d",
+    "@dxos/react-ui-theme": "0.8.2-main.10c050d"
   }
 }

package/src/decorators/withLayout.tsx

@@ -4,16 +4,14 @@
 
 import { type Decorator } from '@storybook/react';
 import defaultsDeep from 'lodash.defaultsdeep';
-import React, { type JSX } from 'react';
+import React, { type PropsWithChildren, type JSX, type FC } from 'react';
 
 import { type Density, DensityProvider, type ThemedClassName } from '@dxos/react-ui';
-import { Tooltip } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 
 type ProviderOptions = {
   fullscreen?: boolean;
   density?: Density;
-  tooltips?: boolean;
 };
 
 const defaultOptions: ProviderOptions = {
@@ -23,30 +21,59 @@ const defaultOptions: ProviderOptions = {
 type Provider = (children: JSX.Element, options: ProviderOptions) => JSX.Element;
 
 const providers: Provider[] = [
-  (children, options) => {
-    return options.tooltips ? <Tooltip.Provider>{children}</Tooltip.Provider> : children;
-  },
   (children, options) => {
     return options?.density ? <DensityProvider density={options.density}>{children}</DensityProvider> : children;
   },
 ];
 
-export type WithFullscreenProps = ThemedClassName<ProviderOptions>;
+export type ContainerProps = ThemedClassName<PropsWithChildren<Pick<ProviderOptions, 'fullscreen'>>>;
+
+export type WithLayoutProps = ThemedClassName<ProviderOptions & { Container?: FC<ContainerProps> }>;
 
 /**
  * Decorator to layout the story container, adding optional providers.
  */
-export const withLayout = ({ classNames, fullscreen, ..._options }: WithFullscreenProps = {}): Decorator => {
+export const withLayout = ({
+  classNames,
+  fullscreen,
+  Container = fullscreen ? FixedContainer : DefaultContainer,
+  ...providedOptions
+}: WithLayoutProps = {}): Decorator => {
   // TODO(burdon): Inspect "fullscreen" parameter in context.
   return (Story, _context) => {
-    const options = defaultsDeep({}, _options, defaultOptions);
     const children = (
-      // NOTE: Do not change the flex direction to flex-col by default.
-      <div role='none' className={mx(fullscreen && 'fixed inset-0 flex overflow-hidden', classNames)}>
+      <Container classNames={classNames} fullscreen={fullscreen}>
         <Story />
-      </div>
+      </Container>
     );
 
+    const options = defaultsDeep({}, providedOptions, defaultOptions);
     return providers.reduceRight((acc, provider) => provider(acc, options), children);
   };
 };
+
+export const DefaultContainer: FC<ContainerProps> = ({ children, classNames }) => {
+  return (
+    <div role='none' className={mx(classNames)}>
+      {children}
+    </div>
+  );
+};
+
+export const FixedContainer: FC<ContainerProps> = ({ children, classNames }) => {
+  return (
+    <div role='none' className={mx('fixed inset-0 flex overflow-hidden', classNames)}>
+      {children}
+    </div>
+  );
+};
+
+export const ColumnContainer: FC<ContainerProps> = ({ children, classNames = 'w-[30rem]', ...props }) => {
+  return (
+    <FixedContainer classNames='justify-center bg-modalSurface' {...props}>
+      <div role='none' className={mx('flex flex-col h-full overflow-y-auto bg-baseSurface', classNames)}>
+        {children}
+      </div>
+    </FixedContainer>
+  );
+};

package/src/decorators/withTheme.tsx

@@ -4,13 +4,21 @@
 
 import { addons } from '@storybook/preview-api';
 import { type Decorator } from '@storybook/react';
-import React, { memo, useEffect, useState } from 'react';
+import React, { memo, useCallback, useEffect, useState } from 'react';
 import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';
 
-import { type ThemeMode, ThemeProvider } from '@dxos/react-ui';
+import { DxThemeEditor as NaturalDxThemeEditor } from '@dxos/lit-theme-editor';
+import '@dxos/lit-theme-editor/dx-theme-editor.pcss';
+import { createComponent } from '@dxos/lit-ui/react';
+import { type ThemeMode, ThemeProvider, Tooltip, Dialog, IconButton } from '@dxos/react-ui';
 import { defaultTx } from '@dxos/react-ui-theme';
+import { PARAM_KEY } from '@dxos/theme-editor-addon';
 
-const channel = addons.getChannel();
+const DxThemeEditor = createComponent({
+  tagName: 'dx-theme-editor',
+  elementClass: NaturalDxThemeEditor,
+  react: React,
+});
 
 /**
  * Changes theme based on storybook toolbar toggle.
@@ -19,19 +27,58 @@ export const withTheme: Decorator = (Story, context) => {
   // Prevent re-rendering of the story.
   const MemoizedStory = memo(Story);
   const [themeMode, setThemeMode] = useState<ThemeMode>('dark');
+  const [editorOpen, setEditorOpen] = useState(false);
+
+  const handleOpenChange = useCallback((nextOpen: boolean) => {
+    setEditorOpen(nextOpen);
+  }, []);
 
   // https://www.npmjs.com/package/storybook-dark-mode
   // NOTE: The `useDarkMode` hook causes the story to continually re-render.
   // NOTE: Changing the theme will cause the story to remount.
   useEffect(() => {
-    const handleUpdate = (darkMode: boolean) => setThemeMode(darkMode ? 'dark' : 'light');
-    channel.on(DARK_MODE_EVENT_NAME, handleUpdate);
-    return () => channel.off(DARK_MODE_EVENT_NAME, handleUpdate);
-  }, [channel]);
+    const handleDarkModeUpdate = (darkMode: boolean) => setThemeMode(darkMode ? 'dark' : 'light');
+    addons.getChannel().on(DARK_MODE_EVENT_NAME, handleDarkModeUpdate);
+    return () => addons.getChannel().off(DARK_MODE_EVENT_NAME, handleDarkModeUpdate);
+  }, []);
+
+  useEffect(() => {
+    const openEditor = () => {
+      handleOpenChange(true);
+    };
+    addons.getChannel().on(PARAM_KEY, openEditor);
+    return () => addons.getChannel().off(PARAM_KEY, openEditor);
+  }, []);
 
   return (
     <ThemeProvider tx={defaultTx} themeMode={themeMode} resourceExtensions={context?.parameters?.translations} noCache>
-      <MemoizedStory />
+      <Tooltip.Provider>
+        <MemoizedStory />
+        <Dialog.Root open={editorOpen} onOpenChange={handleOpenChange} modal={false}>
+          <div
+            role='none'
+            className='dx-dialog__overlay bg-transparent pointer-events-none'
+            style={{ placeContent: 'end' }}
+          >
+            <Dialog.Content
+              classNames='relative box-content py-0 px-2 md:is-[35rem] md:max-is-none overflow-y-auto layout-contain pointer-events-auto'
+              style={{ maxBlockSize: '50dvh' }}
+              onInteractOutside={(event) => event.preventDefault()}
+            >
+              <Dialog.Title srOnly>Theme Editor</Dialog.Title>
+              {editorOpen && <DxThemeEditor />}
+              <Dialog.Close asChild>
+                <IconButton
+                  iconOnly
+                  icon='ph--x--regular'
+                  label='Close'
+                  classNames='absolute block-start-2 inline-end-2'
+                />
+              </Dialog.Close>
+            </Dialog.Content>
+          </div>
+        </Dialog.Root>
+      </Tooltip.Provider>
     </ThemeProvider>
   );
 };