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

package/dist/lib/browser/index.mjs

@@ -1,9 +1,21 @@
-// packages/common/storybook-utils/src/index.ts
-import { registerSignalsRuntime as registerSignalsRuntime2 } from "@dxos/echo-signals/react";
+// src/index.ts
+import { registerSignalsRuntime } from "@dxos/echo-signals/react";
+
+// src/components/ThemeEditor.tsx
+import React, { memo } from "react";
+import { DxThemeEditor as NaturalDxThemeEditor } from "@dxos/lit-theme-editor";
+import { createComponent } from "@dxos/lit-ui/react";
+import "@dxos/lit-theme-editor/dx-theme-editor.pcss";
+var DxThemeEditor = createComponent({
+  tagName: "dx-theme-editor",
+  elementClass: NaturalDxThemeEditor,
+  react: React
+});
+var ThemeEditor = /* @__PURE__ */ memo(DxThemeEditor);
 
-// packages/common/storybook-utils/src/decorators/withLayout.tsx
+// src/decorators/withLayout.tsx
 import defaultsDeep from "lodash.defaultsdeep";
-import React from "react";
+import React2 from "react";
 import { DensityProvider } from "@dxos/react-ui";
 import { mx } from "@dxos/react-ui-theme";
 var defaultOptions = {
@@ -11,131 +23,85 @@ var defaultOptions = {
 };
 var providers = [
   (children, options) => {
-    return options?.density ? /* @__PURE__ */ React.createElement(DensityProvider, {
+    return options?.density ? /* @__PURE__ */ React2.createElement(DensityProvider, {
       density: options.density
     }, children) : children;
   }
 ];
-var withLayout = ({ classNames, fullscreen, Container = fullscreen ? FixedContainer : DefaultContainer, ...providedOptions } = {}) => {
+var withLayout = ({ classNames, fullscreen, Container = fullscreen ? FullscreenContainer : DefaultContainer, ...providedOptions } = {}) => {
   return (Story, _context) => {
-    const children = /* @__PURE__ */ React.createElement(Container, {
+    const children = /* @__PURE__ */ React2.createElement(Container, {
       classNames,
       fullscreen
-    }, /* @__PURE__ */ React.createElement(Story, null));
+    }, /* @__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__ */ React.createElement("div", {
+  return /* @__PURE__ */ React2.createElement("div", {
     role: "none",
     className: mx(classNames)
   }, children);
 };
-var FixedContainer = ({ children, classNames }) => {
-  return /* @__PURE__ */ React.createElement("div", {
+var FullscreenContainer = ({ children, classNames }) => {
+  return /* @__PURE__ */ React2.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, {
+  return /* @__PURE__ */ React2.createElement(FullscreenContainer, {
     classNames: "justify-center bg-modalSurface",
     ...props
-  }, /* @__PURE__ */ React.createElement("div", {
+  }, /* @__PURE__ */ React2.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";
+// 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";
-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);
-  }, []);
+  const { globals: { theme }, parameters: { translations } } = context;
+  const MemoizedStory = /* @__PURE__ */ memo2(Story);
   return /* @__PURE__ */ React3.createElement(ThemeProvider, {
     tx: defaultTx,
-    themeMode,
-    resourceExtensions: context?.parameters?.translations,
+    themeMode: theme,
+    resourceExtensions: 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"
-  })))))));
+  }, /* @__PURE__ */ React3.createElement(Tooltip.Provider, null, /* @__PURE__ */ React3.createElement(MemoizedStory, null)));
+};
+
+// src/decorators/withThemeEditor.tsx
+import React4, { memo as memo3 } 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", {
+    className: "absolute top-4 bottom-4 right-4 z-10"
+  }, /* @__PURE__ */ React4.createElement("div", {
+    className: "h-full is-[35rem] overflow-auto bg-baseSurface border border-separator rounded"
+  }, /* @__PURE__ */ React4.createElement(ThemeEditor, null))));
 };
 
-// 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));
+// src/util.tsx
+import React5 from "react";
+var render = (r) => (args) => /* @__PURE__ */ React5.createElement(React5.Fragment, null, r(args) ?? /* @__PURE__ */ React5.createElement("div", null));
 
-// packages/common/storybook-utils/src/index.ts
-registerSignalsRuntime2();
+// src/index.ts
+registerSignalsRuntime();
 export {
   ColumnContainer,
   DefaultContainer,
-  FixedContainer,
+  FullscreenContainer,
+  ThemeEditor,
+  layoutCentered,
   render,
   withLayout,
-  withSignals,
-  withTheme
+  withTheme,
+  withThemeEditor
 };
 //# sourceMappingURL=index.mjs.map

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 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"]
+  "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"]
 }

package/dist/lib/browser/meta.json

@@ -1 +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/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}}}
+{"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}}}

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

@@ -1,11 +1,23 @@
 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";
+// src/index.ts
+import { registerSignalsRuntime } from "@dxos/echo-signals/react";
+
+// src/components/ThemeEditor.tsx
+import React, { memo } from "react";
+import { DxThemeEditor as NaturalDxThemeEditor } from "@dxos/lit-theme-editor";
+import { createComponent } from "@dxos/lit-ui/react";
+import "@dxos/lit-theme-editor/dx-theme-editor.pcss";
+var DxThemeEditor = createComponent({
+  tagName: "dx-theme-editor",
+  elementClass: NaturalDxThemeEditor,
+  react: React
+});
+var ThemeEditor = /* @__PURE__ */ memo(DxThemeEditor);
 
-// packages/common/storybook-utils/src/decorators/withLayout.tsx
+// src/decorators/withLayout.tsx
 import defaultsDeep from "lodash.defaultsdeep";
-import React from "react";
+import React2 from "react";
 import { DensityProvider } from "@dxos/react-ui";
 import { mx } from "@dxos/react-ui-theme";
 var defaultOptions = {
@@ -13,131 +25,85 @@ var defaultOptions = {
 };
 var providers = [
   (children, options) => {
-    return options?.density ? /* @__PURE__ */ React.createElement(DensityProvider, {
+    return options?.density ? /* @__PURE__ */ React2.createElement(DensityProvider, {
       density: options.density
     }, children) : children;
   }
 ];
-var withLayout = ({ classNames, fullscreen, Container = fullscreen ? FixedContainer : DefaultContainer, ...providedOptions } = {}) => {
+var withLayout = ({ classNames, fullscreen, Container = fullscreen ? FullscreenContainer : DefaultContainer, ...providedOptions } = {}) => {
   return (Story, _context) => {
-    const children = /* @__PURE__ */ React.createElement(Container, {
+    const children = /* @__PURE__ */ React2.createElement(Container, {
       classNames,
       fullscreen
-    }, /* @__PURE__ */ React.createElement(Story, null));
+    }, /* @__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__ */ React.createElement("div", {
+  return /* @__PURE__ */ React2.createElement("div", {
     role: "none",
     className: mx(classNames)
   }, children);
 };
-var FixedContainer = ({ children, classNames }) => {
-  return /* @__PURE__ */ React.createElement("div", {
+var FullscreenContainer = ({ children, classNames }) => {
+  return /* @__PURE__ */ React2.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, {
+  return /* @__PURE__ */ React2.createElement(FullscreenContainer, {
     classNames: "justify-center bg-modalSurface",
     ...props
-  }, /* @__PURE__ */ React.createElement("div", {
+  }, /* @__PURE__ */ React2.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";
+// 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";
-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);
-  }, []);
+  const { globals: { theme }, parameters: { translations } } = context;
+  const MemoizedStory = /* @__PURE__ */ memo2(Story);
   return /* @__PURE__ */ React3.createElement(ThemeProvider, {
     tx: defaultTx,
-    themeMode,
-    resourceExtensions: context?.parameters?.translations,
+    themeMode: theme,
+    resourceExtensions: 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"
-  })))))));
+  }, /* @__PURE__ */ React3.createElement(Tooltip.Provider, null, /* @__PURE__ */ React3.createElement(MemoizedStory, null)));
+};
+
+// src/decorators/withThemeEditor.tsx
+import React4, { memo as memo3 } 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", {
+    className: "absolute top-4 bottom-4 right-4 z-10"
+  }, /* @__PURE__ */ React4.createElement("div", {
+    className: "h-full is-[35rem] overflow-auto bg-baseSurface border border-separator rounded"
+  }, /* @__PURE__ */ React4.createElement(ThemeEditor, null))));
 };
 
-// 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));
+// src/util.tsx
+import React5 from "react";
+var render = (r) => (args) => /* @__PURE__ */ React5.createElement(React5.Fragment, null, r(args) ?? /* @__PURE__ */ React5.createElement("div", null));
 
-// packages/common/storybook-utils/src/index.ts
-registerSignalsRuntime2();
+// src/index.ts
+registerSignalsRuntime();
 export {
   ColumnContainer,
   DefaultContainer,
-  FixedContainer,
+  FullscreenContainer,
+  ThemeEditor,
+  layoutCentered,
   render,
   withLayout,
-  withSignals,
-  withTheme
+  withTheme,
+  withThemeEditor
 };
 //# sourceMappingURL=index.mjs.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/index.ts", "../../../src/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"]
+  "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"]
 }