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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/dist/lib/browser/index.mjs +20 -71
  2. package/dist/lib/browser/index.mjs.map +4 -4
  3. package/dist/lib/browser/meta.json +1 -1
  4. package/dist/lib/node-esm/index.mjs +20 -71
  5. package/dist/lib/node-esm/index.mjs.map +4 -4
  6. package/dist/lib/node-esm/meta.json +1 -1
  7. package/dist/types/src/components/ThemeEditor.d.ts +1 -1
  8. package/dist/types/src/components/ThemeEditor.d.ts.map +1 -1
  9. package/dist/types/src/decorators/index.d.ts +0 -1
  10. package/dist/types/src/decorators/index.d.ts.map +1 -1
  11. package/dist/types/src/decorators/withLayout.d.ts +1 -19
  12. package/dist/types/src/decorators/withLayout.d.ts.map +1 -1
  13. package/dist/types/src/index.d.ts +0 -1
  14. package/dist/types/src/index.d.ts.map +1 -1
  15. package/dist/types/src/stories/test/Test.stories.d.ts +17 -5
  16. package/dist/types/src/stories/test/Test.stories.d.ts.map +1 -1
  17. package/dist/types/src/util.d.ts +1 -1
  18. package/dist/types/src/util.d.ts.map +1 -1
  19. package/dist/types/tsconfig.tsbuildinfo +1 -1
  20. package/package.json +18 -18
  21. package/src/components/CardContainers/ExtrinsicCardContainer.tsx +1 -1
  22. package/src/decorators/index.ts +0 -1
  23. package/src/decorators/withLayout.tsx +15 -77
  24. package/src/decorators/withThemeEditor.tsx +2 -2
  25. package/src/index.ts +0 -2
  26. package/src/stories/test/Test.stories.tsx +5 -7
  27. package/src/stories/test/Test.test.tsx +1 -10
  28. package/src/stories/test/Test.tsx +1 -1
  29. package/src/stories/test/{index.mdx → index.mdx__} +3 -0
  30. package/src/util.tsx +5 -2
  31. package/dist/types/src/decorators/withTheme.d.ts +0 -6
  32. package/dist/types/src/decorators/withTheme.d.ts.map +0 -1
  33. package/src/decorators/withTheme.tsx +0 -30
@@ -94,97 +94,46 @@ var PopoverCardContainer = ({ children, icon = "ph--placeholder--regular" }) =>
94
94
  };
95
95
 
96
96
  // src/decorators/withLayout.tsx
97
- import defaultsDeep from "lodash.defaultsdeep";
98
97
  import React5 from "react";
99
- import { DensityProvider } from "@dxos/react-ui";
100
- import { mx } from "@dxos/react-ui-theme";
101
- var defaultOptions = {
102
- density: "fine"
103
- };
104
- var providers = [
105
- (children, options) => {
106
- return options?.density ? /* @__PURE__ */ React5.createElement(DensityProvider, {
107
- density: options.density
108
- }, children) : children;
98
+ var withLayout = (Story, context) => {
99
+ switch (context.parameters.layout) {
100
+ case "fullscreen":
101
+ return /* @__PURE__ */ React5.createElement("div", {
102
+ role: "none",
103
+ className: "fixed inset-0 flex flex-col overflow-hidden bg-baseSurface"
104
+ }, /* @__PURE__ */ React5.createElement(Story, null));
105
+ default:
106
+ return /* @__PURE__ */ React5.createElement(Story, null);
109
107
  }
110
- ];
111
- var withLayout = ({ classNames, fullscreen, Container = fullscreen ? FullscreenContainer : DefaultContainer, ...providedOptions } = {}) => {
112
- return (Story, _context) => {
113
- const children = /* @__PURE__ */ React5.createElement(Container, {
114
- classNames,
115
- fullscreen
116
- }, /* @__PURE__ */ React5.createElement(Story, null));
117
- const options = defaultsDeep({}, providedOptions, defaultOptions);
118
- return providers.reduceRight((acc, provider) => provider(acc, options), children);
119
- };
120
- };
121
- var layoutCentered = "bg-deckSurface justify-center overflow-y-auto";
122
- var DefaultContainer = ({ children, classNames }) => {
123
- return /* @__PURE__ */ React5.createElement("div", {
124
- role: "none",
125
- className: mx(classNames)
126
- }, children);
127
- };
128
- var FullscreenContainer = ({ children, classNames }) => {
129
- return /* @__PURE__ */ React5.createElement("div", {
130
- role: "none",
131
- className: mx("fixed inset-0 flex overflow-hidden", classNames)
132
- }, children);
133
- };
134
- var ColumnContainer = ({ children, classNames = "w-[30rem]", ...props }) => {
135
- return /* @__PURE__ */ React5.createElement(FullscreenContainer, {
136
- classNames: "justify-center bg-modalSurface",
137
- ...props
138
- }, /* @__PURE__ */ React5.createElement("div", {
139
- role: "none",
140
- className: mx("flex flex-col h-full overflow-y-auto bg-baseSurface", classNames)
141
- }, children));
142
- };
143
-
144
- // src/decorators/withTheme.tsx
145
- import React6, { memo as memo2 } from "react";
146
- import { ThemeProvider, Tooltip } from "@dxos/react-ui";
147
- import { defaultTx } from "@dxos/react-ui-theme";
148
- var withTheme = (Story, context) => {
149
- const { globals: { theme }, parameters: { translations } } = context;
150
- const MemoizedStory = /* @__PURE__ */ memo2(Story);
151
- return /* @__PURE__ */ React6.createElement(ThemeProvider, {
152
- tx: defaultTx,
153
- themeMode: theme,
154
- resourceExtensions: translations,
155
- noCache: true
156
- }, /* @__PURE__ */ React6.createElement(Tooltip.Provider, null, /* @__PURE__ */ React6.createElement(MemoizedStory, null)));
157
108
  };
158
109
 
159
110
  // src/decorators/withThemeEditor.tsx
160
- import React7, { memo as memo3 } from "react";
111
+ import React6, { memo as memo2 } from "react";
161
112
  var withThemeEditor = (Story, context) => {
162
- const MemoizedStory = /* @__PURE__ */ memo3(Story);
163
- return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(MemoizedStory, null), /* @__PURE__ */ React7.createElement("div", {
113
+ const MemoizedStory = /* @__PURE__ */ memo2(Story);
114
+ return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(MemoizedStory, null), /* @__PURE__ */ React6.createElement("div", {
164
115
  className: "absolute top-4 bottom-4 right-4 z-10"
165
- }, /* @__PURE__ */ React7.createElement("div", {
166
- className: "h-full is-[35rem] overflow-auto bg-baseSurface border border-separator rounded"
167
- }, /* @__PURE__ */ React7.createElement(ThemeEditor, null))));
116
+ }, /* @__PURE__ */ React6.createElement("div", {
117
+ className: "bs-full is-[35rem] overflow-auto bg-baseSurface border border-separator rounded"
118
+ }, /* @__PURE__ */ React6.createElement(ThemeEditor, null))));
168
119
  };
169
120
 
170
121
  // src/util.tsx
171
- import React8 from "react";
172
- var render = (r) => (args) => /* @__PURE__ */ React8.createElement(React8.Fragment, null, r(args) ?? /* @__PURE__ */ React8.createElement("div", null));
122
+ import React7 from "react";
123
+ var render = (Story) => (args) => {
124
+ const result = /* @__PURE__ */ React7.createElement(Story, args);
125
+ return result ?? /* @__PURE__ */ React7.createElement("div", null);
126
+ };
173
127
 
174
128
  // src/index.ts
175
129
  registerSignalsRuntime();
176
130
  export {
177
- ColumnContainer,
178
- DefaultContainer,
179
131
  ExtrinsicCardContainer,
180
- FullscreenContainer,
181
132
  IntrinsicCardContainer,
182
133
  PopoverCardContainer,
183
134
  ThemeEditor,
184
- layoutCentered,
185
135
  render,
186
136
  withLayout,
187
- withTheme,
188
137
  withThemeEditor
189
138
  };
190
139
  //# sourceMappingURL=index.mjs.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../src/index.ts", "../../../src/components/ThemeEditor.tsx", "../../../src/components/CardContainers/ExtrinsicCardContainer.tsx", "../../../src/components/CardContainers/IntrinsicCardContainer.tsx", "../../../src/components/CardContainers/PopoverCardContainer.tsx", "../../../src/decorators/withLayout.tsx", "../../../src/decorators/withTheme.tsx", "../../../src/decorators/withThemeEditor.tsx", "../../../src/util.tsx"],
4
- "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 2025 DXOS.org\n//\n\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { type PropsWithChildren } from 'react';\n\nimport { ResizeHandle, type Size, resizeAttributes, sizeStyle } from '@dxos/react-ui-dnd';\n\n// Default size in rem\nconst DEFAULT_INLINE_SIZE = 24;\nconst MIN_INLINE_SIZE = 8;\nconst DEFAULT_BLOCK_SIZE = 24;\nconst MIN_BLOCK_SIZE = 8;\n\nexport type ExtrinsicCardContainerProps = PropsWithChildren<{\n defaultInlineSize?: Size;\n inlineSize?: Size;\n defaultBlockSize?: Size;\n blockSize?: Size;\n onInlineSizeChange?: (size: Size, commit?: boolean) => void;\n onBlockSizeChange?: (size: Size, commit?: boolean) => void;\n}>;\n\nexport const ExtrinsicCardContainer = ({\n children,\n defaultInlineSize,\n inlineSize: propInlineSize,\n defaultBlockSize,\n blockSize: propBlockSize,\n onInlineSizeChange,\n onBlockSizeChange,\n}: ExtrinsicCardContainerProps) => {\n const [inlineSize = DEFAULT_INLINE_SIZE, setInlineSize] = useControllableState<Size>({\n prop: propInlineSize,\n defaultProp: defaultInlineSize,\n onChange: onInlineSizeChange,\n });\n\n const [blockSize = DEFAULT_BLOCK_SIZE, setBlockSize] = useControllableState<Size>({\n prop: propBlockSize,\n defaultProp: defaultBlockSize,\n onChange: onBlockSizeChange,\n });\n\n return (\n <div\n className='grid relative border border-dashed border-subduedSeparator p-4 rounded-lg overflow-hidden contain-layout'\n style={{\n ...sizeStyle(inlineSize, 'horizontal'),\n ...sizeStyle(blockSize, 'vertical'),\n }}\n {...resizeAttributes}\n >\n {children}\n <ResizeHandle\n side='inline-end'\n fallbackSize={DEFAULT_INLINE_SIZE}\n minSize={MIN_INLINE_SIZE}\n size={inlineSize}\n onSizeChange={setInlineSize}\n />\n <ResizeHandle\n side='block-end'\n fallbackSize={DEFAULT_BLOCK_SIZE}\n minSize={MIN_BLOCK_SIZE}\n size={blockSize}\n onSizeChange={setBlockSize}\n />\n </div>\n );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { type PropsWithChildren } from 'react';\n\nimport { ResizeHandle, type Size, resizeAttributes, sizeStyle } from '@dxos/react-ui-dnd';\n\n// Default size in rem\nconst DEFAULT_SIZE = 24;\nconst MIN_SIZE = 8;\n\nexport type IntrinsicCardContainerProps = PropsWithChildren<{\n defaultSize?: Size;\n size?: Size;\n onSizeChange?: (size: Size, commit?: boolean) => void;\n}>;\n\nexport const IntrinsicCardContainer = ({\n children,\n defaultSize,\n size: propSize,\n onSizeChange,\n}: IntrinsicCardContainerProps) => {\n const [size = DEFAULT_SIZE, setSize] = useControllableState<Size>({\n prop: propSize,\n defaultProp: defaultSize,\n onChange: onSizeChange,\n });\n\n return (\n <div\n className='relative border border-dashed border-subduedSeparator p-4 rounded-lg'\n style={sizeStyle(size, 'horizontal')}\n {...resizeAttributes}\n >\n {children}\n <ResizeHandle\n side='inline-end'\n fallbackSize={DEFAULT_SIZE}\n minSize={MIN_SIZE}\n size={size}\n onSizeChange={setSize}\n />\n </div>\n );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport React, { type PropsWithChildren } from 'react';\n\nimport { Icon, Popover } from '@dxos/react-ui';\n\nexport const PopoverCardContainer = ({\n children,\n icon = 'ph--placeholder--regular',\n}: PropsWithChildren<{ icon: string }>) => {\n return (\n <Popover.Root open>\n <Popover.Content onOpenAutoFocus={(event) => event.preventDefault()}>\n <Popover.Viewport>{children}</Popover.Viewport>\n <Popover.Arrow />\n </Popover.Content>\n <Popover.Trigger>\n <Icon icon={icon} size={5} />\n </Popover.Trigger>\n </Popover.Root>\n );\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Decorator } from '@storybook/react';\nimport defaultsDeep from 'lodash.defaultsdeep';\nimport React, { type FC, type JSX, type PropsWithChildren } 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"],
5
- "mappings": "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",
6
- "names": ["registerSignalsRuntime", "React", "memo", "DxThemeEditor", "NaturalDxThemeEditor", "createComponent", "DxThemeEditor", "createComponent", "tagName", "elementClass", "NaturalDxThemeEditor", "react", "React", "ThemeEditor", "memo", "useControllableState", "React", "ResizeHandle", "resizeAttributes", "sizeStyle", "DEFAULT_INLINE_SIZE", "MIN_INLINE_SIZE", "DEFAULT_BLOCK_SIZE", "MIN_BLOCK_SIZE", "ExtrinsicCardContainer", "children", "defaultInlineSize", "inlineSize", "propInlineSize", "defaultBlockSize", "blockSize", "propBlockSize", "onInlineSizeChange", "onBlockSizeChange", "setInlineSize", "useControllableState", "prop", "defaultProp", "onChange", "setBlockSize", "React", "div", "className", "style", "sizeStyle", "resizeAttributes", "ResizeHandle", "side", "fallbackSize", "minSize", "size", "onSizeChange", "useControllableState", "React", "ResizeHandle", "resizeAttributes", "sizeStyle", "DEFAULT_SIZE", "MIN_SIZE", "IntrinsicCardContainer", "children", "defaultSize", "size", "propSize", "onSizeChange", "setSize", "useControllableState", "prop", "defaultProp", "onChange", "React", "div", "className", "style", "sizeStyle", "resizeAttributes", "ResizeHandle", "side", "fallbackSize", "minSize", "React", "Icon", "Popover", "PopoverCardContainer", "children", "icon", "React", "Popover", "Root", "open", "Content", "onOpenAutoFocus", "event", "preventDefault", "Viewport", "Arrow", "Trigger", "Icon", "size", "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"]
3
+ "sources": ["../../../src/index.ts", "../../../src/components/ThemeEditor.tsx", "../../../src/components/CardContainers/ExtrinsicCardContainer.tsx", "../../../src/components/CardContainers/IntrinsicCardContainer.tsx", "../../../src/components/CardContainers/PopoverCardContainer.tsx", "../../../src/decorators/withLayout.tsx", "../../../src/decorators/withThemeEditor.tsx", "../../../src/util.tsx"],
4
+ "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { registerSignalsRuntime } from '@dxos/echo-signals/react';\n\nexport * from './components';\nexport * from './decorators';\nexport * from './util';\n\nregisterSignalsRuntime();\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport React, { memo } from 'react';\n\nimport { DxThemeEditor as NaturalDxThemeEditor } from '@dxos/lit-theme-editor';\nimport { createComponent } from '@dxos/lit-ui/react';\n\nimport '@dxos/lit-theme-editor/dx-theme-editor.pcss';\n\nconst DxThemeEditor = createComponent({\n tagName: 'dx-theme-editor',\n elementClass: NaturalDxThemeEditor,\n react: React,\n});\n\nexport const ThemeEditor = memo(DxThemeEditor);\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { type PropsWithChildren } from 'react';\n\nimport { ResizeHandle, type Size, resizeAttributes, sizeStyle } from '@dxos/react-ui-dnd';\n\n// Default size in rem.\nconst DEFAULT_INLINE_SIZE = 24;\nconst MIN_INLINE_SIZE = 8;\nconst DEFAULT_BLOCK_SIZE = 24;\nconst MIN_BLOCK_SIZE = 8;\n\nexport type ExtrinsicCardContainerProps = PropsWithChildren<{\n defaultInlineSize?: Size;\n inlineSize?: Size;\n defaultBlockSize?: Size;\n blockSize?: Size;\n onInlineSizeChange?: (size: Size, commit?: boolean) => void;\n onBlockSizeChange?: (size: Size, commit?: boolean) => void;\n}>;\n\nexport const ExtrinsicCardContainer = ({\n children,\n defaultInlineSize,\n inlineSize: propInlineSize,\n defaultBlockSize,\n blockSize: propBlockSize,\n onInlineSizeChange,\n onBlockSizeChange,\n}: ExtrinsicCardContainerProps) => {\n const [inlineSize = DEFAULT_INLINE_SIZE, setInlineSize] = useControllableState<Size>({\n prop: propInlineSize,\n defaultProp: defaultInlineSize,\n onChange: onInlineSizeChange,\n });\n\n const [blockSize = DEFAULT_BLOCK_SIZE, setBlockSize] = useControllableState<Size>({\n prop: propBlockSize,\n defaultProp: defaultBlockSize,\n onChange: onBlockSizeChange,\n });\n\n return (\n <div\n className='grid relative border border-dashed border-subduedSeparator p-4 rounded-lg overflow-hidden contain-layout'\n style={{\n ...sizeStyle(inlineSize, 'horizontal'),\n ...sizeStyle(blockSize, 'vertical'),\n }}\n {...resizeAttributes}\n >\n {children}\n <ResizeHandle\n side='inline-end'\n fallbackSize={DEFAULT_INLINE_SIZE}\n minSize={MIN_INLINE_SIZE}\n size={inlineSize}\n onSizeChange={setInlineSize}\n />\n <ResizeHandle\n side='block-end'\n fallbackSize={DEFAULT_BLOCK_SIZE}\n minSize={MIN_BLOCK_SIZE}\n size={blockSize}\n onSizeChange={setBlockSize}\n />\n </div>\n );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { type PropsWithChildren } from 'react';\n\nimport { ResizeHandle, type Size, resizeAttributes, sizeStyle } from '@dxos/react-ui-dnd';\n\n// Default size in rem\nconst DEFAULT_SIZE = 24;\nconst MIN_SIZE = 8;\n\nexport type IntrinsicCardContainerProps = PropsWithChildren<{\n defaultSize?: Size;\n size?: Size;\n onSizeChange?: (size: Size, commit?: boolean) => void;\n}>;\n\nexport const IntrinsicCardContainer = ({\n children,\n defaultSize,\n size: propSize,\n onSizeChange,\n}: IntrinsicCardContainerProps) => {\n const [size = DEFAULT_SIZE, setSize] = useControllableState<Size>({\n prop: propSize,\n defaultProp: defaultSize,\n onChange: onSizeChange,\n });\n\n return (\n <div\n className='relative border border-dashed border-subduedSeparator p-4 rounded-lg'\n style={sizeStyle(size, 'horizontal')}\n {...resizeAttributes}\n >\n {children}\n <ResizeHandle\n side='inline-end'\n fallbackSize={DEFAULT_SIZE}\n minSize={MIN_SIZE}\n size={size}\n onSizeChange={setSize}\n />\n </div>\n );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport React, { type PropsWithChildren } from 'react';\n\nimport { Icon, Popover } from '@dxos/react-ui';\n\nexport const PopoverCardContainer = ({\n children,\n icon = 'ph--placeholder--regular',\n}: PropsWithChildren<{ icon: string }>) => {\n return (\n <Popover.Root open>\n <Popover.Content onOpenAutoFocus={(event) => event.preventDefault()}>\n <Popover.Viewport>{children}</Popover.Viewport>\n <Popover.Arrow />\n </Popover.Content>\n <Popover.Trigger>\n <Icon icon={icon} size={5} />\n </Popover.Trigger>\n </Popover.Root>\n );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { type Decorator } from '@storybook/react';\nimport React from 'react';\n\nexport const withLayout: Decorator = (Story, context) => {\n switch (context.parameters.layout) {\n case 'fullscreen':\n return (\n <div role='none' className='fixed inset-0 flex flex-col overflow-hidden bg-baseSurface'>\n <Story />\n </div>\n );\n\n default:\n return <Story />;\n }\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Decorator } from '@storybook/react';\nimport React, { memo } from 'react';\n\nimport { ThemeEditor } from '../components/ThemeEditor';\n\n/**\n * Show theme editor.\n */\n// TODO(burdon): Ideally move to storybook-addon-theme, but this has a build issue since the addon would depend on the vite theme plugin.\nexport const withThemeEditor: Decorator = (Story, context) => {\n // Prevent re-rendering of the story.\n const MemoizedStory = memo(Story);\n\n return (\n <>\n <MemoizedStory />\n <div className='absolute top-4 bottom-4 right-4 z-10'>\n <div className='bs-full is-[35rem] overflow-auto bg-baseSurface border border-separator rounded'>\n <ThemeEditor />\n </div>\n </div>\n </>\n );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { type FC } from 'react';\n\n/**\n * Story renderer wrapper.\n */\nexport const render =\n <T extends Record<string, any>>(Story: FC<T>) =>\n (args: unknown) => {\n const result = <Story {...(args as T)} />;\n return result ?? <div />;\n };\n"],
5
+ "mappings": "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",
6
+ "names": ["registerSignalsRuntime", "React", "memo", "DxThemeEditor", "NaturalDxThemeEditor", "createComponent", "DxThemeEditor", "createComponent", "tagName", "elementClass", "NaturalDxThemeEditor", "react", "React", "ThemeEditor", "memo", "useControllableState", "React", "ResizeHandle", "resizeAttributes", "sizeStyle", "DEFAULT_INLINE_SIZE", "MIN_INLINE_SIZE", "DEFAULT_BLOCK_SIZE", "MIN_BLOCK_SIZE", "ExtrinsicCardContainer", "children", "defaultInlineSize", "inlineSize", "propInlineSize", "defaultBlockSize", "blockSize", "propBlockSize", "onInlineSizeChange", "onBlockSizeChange", "setInlineSize", "useControllableState", "prop", "defaultProp", "onChange", "setBlockSize", "React", "div", "className", "style", "sizeStyle", "resizeAttributes", "ResizeHandle", "side", "fallbackSize", "minSize", "size", "onSizeChange", "useControllableState", "React", "ResizeHandle", "resizeAttributes", "sizeStyle", "DEFAULT_SIZE", "MIN_SIZE", "IntrinsicCardContainer", "children", "defaultSize", "size", "propSize", "onSizeChange", "setSize", "useControllableState", "prop", "defaultProp", "onChange", "React", "div", "className", "style", "sizeStyle", "resizeAttributes", "ResizeHandle", "side", "fallbackSize", "minSize", "React", "Icon", "Popover", "PopoverCardContainer", "children", "icon", "React", "Popover", "Root", "open", "Content", "onOpenAutoFocus", "event", "preventDefault", "Viewport", "Arrow", "Trigger", "Icon", "size", "React", "withLayout", "Story", "context", "parameters", "layout", "React", "div", "role", "className", "React", "memo", "withThemeEditor", "Story", "context", "MemoizedStory", "memo", "React", "div", "className", "ThemeEditor", "React", "render", "Story", "args", "result", "React", "div", "registerSignalsRuntime"]
7
7
  }
@@ -1 +1 @@
1
- {"inputs":{"src/components/ThemeEditor.tsx":{"bytes":1828,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/lit-theme-editor","kind":"import-statement","external":true},{"path":"@dxos/lit-ui/react","kind":"import-statement","external":true},{"path":"@dxos/lit-theme-editor/dx-theme-editor.pcss","kind":"import-statement","external":true}],"format":"esm"},"src/components/CardContainers/ExtrinsicCardContainer.tsx":{"bytes":6610,"imports":[{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-dnd","kind":"import-statement","external":true}],"format":"esm"},"src/components/CardContainers/IntrinsicCardContainer.tsx":{"bytes":4021,"imports":[{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-dnd","kind":"import-statement","external":true}],"format":"esm"},"src/components/CardContainers/PopoverCardContainer.tsx":{"bytes":2566,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true}],"format":"esm"},"src/components/CardContainers/index.ts":{"bytes":764,"imports":[{"path":"src/components/CardContainers/ExtrinsicCardContainer.tsx","kind":"import-statement","original":"./ExtrinsicCardContainer"},{"path":"src/components/CardContainers/IntrinsicCardContainer.tsx","kind":"import-statement","original":"./IntrinsicCardContainer"},{"path":"src/components/CardContainers/PopoverCardContainer.tsx","kind":"import-statement","original":"./PopoverCardContainer"}],"format":"esm"},"src/components/index.ts":{"bytes":686,"imports":[{"path":"src/components/ThemeEditor.tsx","kind":"import-statement","original":"./ThemeEditor"},{"path":"src/components/CardContainers/index.ts","kind":"import-statement","original":"./CardContainers"}],"format":"esm"},"src/decorators/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":15689},"dist/lib/browser/index.mjs":{"imports":[{"path":"@dxos/echo-signals/react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/lit-theme-editor","kind":"import-statement","external":true},{"path":"@dxos/lit-ui/react","kind":"import-statement","external":true},{"path":"@dxos/lit-theme-editor/dx-theme-editor.pcss","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-dnd","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-dnd","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"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","ExtrinsicCardContainer","FullscreenContainer","IntrinsicCardContainer","PopoverCardContainer","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/components/CardContainers/ExtrinsicCardContainer.tsx":{"bytesInOutput":1572},"src/components/CardContainers/index.ts":{"bytesInOutput":0},"src/components/CardContainers/IntrinsicCardContainer.tsx":{"bytesInOutput":949},"src/components/CardContainers/PopoverCardContainer.tsx":{"bytesInOutput":626},"src/decorators/withLayout.tsx":{"bytesInOutput":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":7431}}}
1
+ {"inputs":{"src/components/ThemeEditor.tsx":{"bytes":1828,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/lit-theme-editor","kind":"import-statement","external":true},{"path":"@dxos/lit-ui/react","kind":"import-statement","external":true},{"path":"@dxos/lit-theme-editor/dx-theme-editor.pcss","kind":"import-statement","external":true}],"format":"esm"},"src/components/CardContainers/ExtrinsicCardContainer.tsx":{"bytes":6611,"imports":[{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-dnd","kind":"import-statement","external":true}],"format":"esm"},"src/components/CardContainers/IntrinsicCardContainer.tsx":{"bytes":4021,"imports":[{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-dnd","kind":"import-statement","external":true}],"format":"esm"},"src/components/CardContainers/PopoverCardContainer.tsx":{"bytes":2566,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true}],"format":"esm"},"src/components/CardContainers/index.ts":{"bytes":764,"imports":[{"path":"src/components/CardContainers/ExtrinsicCardContainer.tsx","kind":"import-statement","original":"./ExtrinsicCardContainer"},{"path":"src/components/CardContainers/IntrinsicCardContainer.tsx","kind":"import-statement","original":"./IntrinsicCardContainer"},{"path":"src/components/CardContainers/PopoverCardContainer.tsx","kind":"import-statement","original":"./PopoverCardContainer"}],"format":"esm"},"src/components/index.ts":{"bytes":686,"imports":[{"path":"src/components/ThemeEditor.tsx","kind":"import-statement","original":"./ThemeEditor"},{"path":"src/components/CardContainers/index.ts","kind":"import-statement","original":"./CardContainers"}],"format":"esm"},"src/decorators/withLayout.tsx":{"bytes":1803,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/decorators/withThemeEditor.tsx":{"bytes":2746,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"src/components/ThemeEditor.tsx","kind":"import-statement","original":"../components/ThemeEditor"}],"format":"esm"},"src/decorators/index.ts":{"bytes":582,"imports":[{"path":"src/decorators/withLayout.tsx","kind":"import-statement","original":"./withLayout"},{"path":"src/decorators/withThemeEditor.tsx","kind":"import-statement","original":"./withThemeEditor"}],"format":"esm"},"src/util.tsx":{"bytes":1228,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/index.ts":{"bytes":943,"imports":[{"path":"@dxos/echo-signals/react","kind":"import-statement","external":true},{"path":"src/components/index.ts","kind":"import-statement","original":"./components"},{"path":"src/decorators/index.ts","kind":"import-statement","original":"./decorators"},{"path":"src/util.tsx","kind":"import-statement","original":"./util"}],"format":"esm"}},"outputs":{"dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":11014},"dist/lib/browser/index.mjs":{"imports":[{"path":"@dxos/echo-signals/react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/lit-theme-editor","kind":"import-statement","external":true},{"path":"@dxos/lit-ui/react","kind":"import-statement","external":true},{"path":"@dxos/lit-theme-editor/dx-theme-editor.pcss","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-dnd","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-dnd","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"exports":["ExtrinsicCardContainer","IntrinsicCardContainer","PopoverCardContainer","ThemeEditor","render","withLayout","withThemeEditor"],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":93},"src/components/ThemeEditor.tsx":{"bytesInOutput":405},"src/components/index.ts":{"bytesInOutput":0},"src/components/CardContainers/ExtrinsicCardContainer.tsx":{"bytesInOutput":1572},"src/components/CardContainers/index.ts":{"bytesInOutput":0},"src/components/CardContainers/IntrinsicCardContainer.tsx":{"bytesInOutput":949},"src/components/CardContainers/PopoverCardContainer.tsx":{"bytesInOutput":626},"src/decorators/withLayout.tsx":{"bytesInOutput":435},"src/decorators/index.ts":{"bytesInOutput":0},"src/decorators/withThemeEditor.tsx":{"bytesInOutput":589},"src/util.tsx":{"bytesInOutput":205}},"bytes":5393}}}
@@ -96,97 +96,46 @@ var PopoverCardContainer = ({ children, icon = "ph--placeholder--regular" }) =>
96
96
  };
97
97
 
98
98
  // src/decorators/withLayout.tsx
99
- import defaultsDeep from "lodash.defaultsdeep";
100
99
  import React5 from "react";
101
- import { DensityProvider } from "@dxos/react-ui";
102
- import { mx } from "@dxos/react-ui-theme";
103
- var defaultOptions = {
104
- density: "fine"
105
- };
106
- var providers = [
107
- (children, options) => {
108
- return options?.density ? /* @__PURE__ */ React5.createElement(DensityProvider, {
109
- density: options.density
110
- }, children) : children;
100
+ var withLayout = (Story, context) => {
101
+ switch (context.parameters.layout) {
102
+ case "fullscreen":
103
+ return /* @__PURE__ */ React5.createElement("div", {
104
+ role: "none",
105
+ className: "fixed inset-0 flex flex-col overflow-hidden bg-baseSurface"
106
+ }, /* @__PURE__ */ React5.createElement(Story, null));
107
+ default:
108
+ return /* @__PURE__ */ React5.createElement(Story, null);
111
109
  }
112
- ];
113
- var withLayout = ({ classNames, fullscreen, Container = fullscreen ? FullscreenContainer : DefaultContainer, ...providedOptions } = {}) => {
114
- return (Story, _context) => {
115
- const children = /* @__PURE__ */ React5.createElement(Container, {
116
- classNames,
117
- fullscreen
118
- }, /* @__PURE__ */ React5.createElement(Story, null));
119
- const options = defaultsDeep({}, providedOptions, defaultOptions);
120
- return providers.reduceRight((acc, provider) => provider(acc, options), children);
121
- };
122
- };
123
- var layoutCentered = "bg-deckSurface justify-center overflow-y-auto";
124
- var DefaultContainer = ({ children, classNames }) => {
125
- return /* @__PURE__ */ React5.createElement("div", {
126
- role: "none",
127
- className: mx(classNames)
128
- }, children);
129
- };
130
- var FullscreenContainer = ({ children, classNames }) => {
131
- return /* @__PURE__ */ React5.createElement("div", {
132
- role: "none",
133
- className: mx("fixed inset-0 flex overflow-hidden", classNames)
134
- }, children);
135
- };
136
- var ColumnContainer = ({ children, classNames = "w-[30rem]", ...props }) => {
137
- return /* @__PURE__ */ React5.createElement(FullscreenContainer, {
138
- classNames: "justify-center bg-modalSurface",
139
- ...props
140
- }, /* @__PURE__ */ React5.createElement("div", {
141
- role: "none",
142
- className: mx("flex flex-col h-full overflow-y-auto bg-baseSurface", classNames)
143
- }, children));
144
- };
145
-
146
- // src/decorators/withTheme.tsx
147
- import React6, { memo as memo2 } from "react";
148
- import { ThemeProvider, Tooltip } from "@dxos/react-ui";
149
- import { defaultTx } from "@dxos/react-ui-theme";
150
- var withTheme = (Story, context) => {
151
- const { globals: { theme }, parameters: { translations } } = context;
152
- const MemoizedStory = /* @__PURE__ */ memo2(Story);
153
- return /* @__PURE__ */ React6.createElement(ThemeProvider, {
154
- tx: defaultTx,
155
- themeMode: theme,
156
- resourceExtensions: translations,
157
- noCache: true
158
- }, /* @__PURE__ */ React6.createElement(Tooltip.Provider, null, /* @__PURE__ */ React6.createElement(MemoizedStory, null)));
159
110
  };
160
111
 
161
112
  // src/decorators/withThemeEditor.tsx
162
- import React7, { memo as memo3 } from "react";
113
+ import React6, { memo as memo2 } from "react";
163
114
  var withThemeEditor = (Story, context) => {
164
- const MemoizedStory = /* @__PURE__ */ memo3(Story);
165
- return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(MemoizedStory, null), /* @__PURE__ */ React7.createElement("div", {
115
+ const MemoizedStory = /* @__PURE__ */ memo2(Story);
116
+ return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(MemoizedStory, null), /* @__PURE__ */ React6.createElement("div", {
166
117
  className: "absolute top-4 bottom-4 right-4 z-10"
167
- }, /* @__PURE__ */ React7.createElement("div", {
168
- className: "h-full is-[35rem] overflow-auto bg-baseSurface border border-separator rounded"
169
- }, /* @__PURE__ */ React7.createElement(ThemeEditor, null))));
118
+ }, /* @__PURE__ */ React6.createElement("div", {
119
+ className: "bs-full is-[35rem] overflow-auto bg-baseSurface border border-separator rounded"
120
+ }, /* @__PURE__ */ React6.createElement(ThemeEditor, null))));
170
121
  };
171
122
 
172
123
  // src/util.tsx
173
- import React8 from "react";
174
- var render = (r) => (args) => /* @__PURE__ */ React8.createElement(React8.Fragment, null, r(args) ?? /* @__PURE__ */ React8.createElement("div", null));
124
+ import React7 from "react";
125
+ var render = (Story) => (args) => {
126
+ const result = /* @__PURE__ */ React7.createElement(Story, args);
127
+ return result ?? /* @__PURE__ */ React7.createElement("div", null);
128
+ };
175
129
 
176
130
  // src/index.ts
177
131
  registerSignalsRuntime();
178
132
  export {
179
- ColumnContainer,
180
- DefaultContainer,
181
133
  ExtrinsicCardContainer,
182
- FullscreenContainer,
183
134
  IntrinsicCardContainer,
184
135
  PopoverCardContainer,
185
136
  ThemeEditor,
186
- layoutCentered,
187
137
  render,
188
138
  withLayout,
189
- withTheme,
190
139
  withThemeEditor
191
140
  };
192
141
  //# sourceMappingURL=index.mjs.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../src/index.ts", "../../../src/components/ThemeEditor.tsx", "../../../src/components/CardContainers/ExtrinsicCardContainer.tsx", "../../../src/components/CardContainers/IntrinsicCardContainer.tsx", "../../../src/components/CardContainers/PopoverCardContainer.tsx", "../../../src/decorators/withLayout.tsx", "../../../src/decorators/withTheme.tsx", "../../../src/decorators/withThemeEditor.tsx", "../../../src/util.tsx"],
4
- "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 2025 DXOS.org\n//\n\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { type PropsWithChildren } from 'react';\n\nimport { ResizeHandle, type Size, resizeAttributes, sizeStyle } from '@dxos/react-ui-dnd';\n\n// Default size in rem\nconst DEFAULT_INLINE_SIZE = 24;\nconst MIN_INLINE_SIZE = 8;\nconst DEFAULT_BLOCK_SIZE = 24;\nconst MIN_BLOCK_SIZE = 8;\n\nexport type ExtrinsicCardContainerProps = PropsWithChildren<{\n defaultInlineSize?: Size;\n inlineSize?: Size;\n defaultBlockSize?: Size;\n blockSize?: Size;\n onInlineSizeChange?: (size: Size, commit?: boolean) => void;\n onBlockSizeChange?: (size: Size, commit?: boolean) => void;\n}>;\n\nexport const ExtrinsicCardContainer = ({\n children,\n defaultInlineSize,\n inlineSize: propInlineSize,\n defaultBlockSize,\n blockSize: propBlockSize,\n onInlineSizeChange,\n onBlockSizeChange,\n}: ExtrinsicCardContainerProps) => {\n const [inlineSize = DEFAULT_INLINE_SIZE, setInlineSize] = useControllableState<Size>({\n prop: propInlineSize,\n defaultProp: defaultInlineSize,\n onChange: onInlineSizeChange,\n });\n\n const [blockSize = DEFAULT_BLOCK_SIZE, setBlockSize] = useControllableState<Size>({\n prop: propBlockSize,\n defaultProp: defaultBlockSize,\n onChange: onBlockSizeChange,\n });\n\n return (\n <div\n className='grid relative border border-dashed border-subduedSeparator p-4 rounded-lg overflow-hidden contain-layout'\n style={{\n ...sizeStyle(inlineSize, 'horizontal'),\n ...sizeStyle(blockSize, 'vertical'),\n }}\n {...resizeAttributes}\n >\n {children}\n <ResizeHandle\n side='inline-end'\n fallbackSize={DEFAULT_INLINE_SIZE}\n minSize={MIN_INLINE_SIZE}\n size={inlineSize}\n onSizeChange={setInlineSize}\n />\n <ResizeHandle\n side='block-end'\n fallbackSize={DEFAULT_BLOCK_SIZE}\n minSize={MIN_BLOCK_SIZE}\n size={blockSize}\n onSizeChange={setBlockSize}\n />\n </div>\n );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { type PropsWithChildren } from 'react';\n\nimport { ResizeHandle, type Size, resizeAttributes, sizeStyle } from '@dxos/react-ui-dnd';\n\n// Default size in rem\nconst DEFAULT_SIZE = 24;\nconst MIN_SIZE = 8;\n\nexport type IntrinsicCardContainerProps = PropsWithChildren<{\n defaultSize?: Size;\n size?: Size;\n onSizeChange?: (size: Size, commit?: boolean) => void;\n}>;\n\nexport const IntrinsicCardContainer = ({\n children,\n defaultSize,\n size: propSize,\n onSizeChange,\n}: IntrinsicCardContainerProps) => {\n const [size = DEFAULT_SIZE, setSize] = useControllableState<Size>({\n prop: propSize,\n defaultProp: defaultSize,\n onChange: onSizeChange,\n });\n\n return (\n <div\n className='relative border border-dashed border-subduedSeparator p-4 rounded-lg'\n style={sizeStyle(size, 'horizontal')}\n {...resizeAttributes}\n >\n {children}\n <ResizeHandle\n side='inline-end'\n fallbackSize={DEFAULT_SIZE}\n minSize={MIN_SIZE}\n size={size}\n onSizeChange={setSize}\n />\n </div>\n );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport React, { type PropsWithChildren } from 'react';\n\nimport { Icon, Popover } from '@dxos/react-ui';\n\nexport const PopoverCardContainer = ({\n children,\n icon = 'ph--placeholder--regular',\n}: PropsWithChildren<{ icon: string }>) => {\n return (\n <Popover.Root open>\n <Popover.Content onOpenAutoFocus={(event) => event.preventDefault()}>\n <Popover.Viewport>{children}</Popover.Viewport>\n <Popover.Arrow />\n </Popover.Content>\n <Popover.Trigger>\n <Icon icon={icon} size={5} />\n </Popover.Trigger>\n </Popover.Root>\n );\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Decorator } from '@storybook/react';\nimport defaultsDeep from 'lodash.defaultsdeep';\nimport React, { type FC, type JSX, type PropsWithChildren } 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"],
5
- "mappings": "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",
6
- "names": ["registerSignalsRuntime", "React", "memo", "DxThemeEditor", "NaturalDxThemeEditor", "createComponent", "DxThemeEditor", "createComponent", "tagName", "elementClass", "NaturalDxThemeEditor", "react", "React", "ThemeEditor", "memo", "useControllableState", "React", "ResizeHandle", "resizeAttributes", "sizeStyle", "DEFAULT_INLINE_SIZE", "MIN_INLINE_SIZE", "DEFAULT_BLOCK_SIZE", "MIN_BLOCK_SIZE", "ExtrinsicCardContainer", "children", "defaultInlineSize", "inlineSize", "propInlineSize", "defaultBlockSize", "blockSize", "propBlockSize", "onInlineSizeChange", "onBlockSizeChange", "setInlineSize", "useControllableState", "prop", "defaultProp", "onChange", "setBlockSize", "React", "div", "className", "style", "sizeStyle", "resizeAttributes", "ResizeHandle", "side", "fallbackSize", "minSize", "size", "onSizeChange", "useControllableState", "React", "ResizeHandle", "resizeAttributes", "sizeStyle", "DEFAULT_SIZE", "MIN_SIZE", "IntrinsicCardContainer", "children", "defaultSize", "size", "propSize", "onSizeChange", "setSize", "useControllableState", "prop", "defaultProp", "onChange", "React", "div", "className", "style", "sizeStyle", "resizeAttributes", "ResizeHandle", "side", "fallbackSize", "minSize", "React", "Icon", "Popover", "PopoverCardContainer", "children", "icon", "React", "Popover", "Root", "open", "Content", "onOpenAutoFocus", "event", "preventDefault", "Viewport", "Arrow", "Trigger", "Icon", "size", "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"]
3
+ "sources": ["../../../src/index.ts", "../../../src/components/ThemeEditor.tsx", "../../../src/components/CardContainers/ExtrinsicCardContainer.tsx", "../../../src/components/CardContainers/IntrinsicCardContainer.tsx", "../../../src/components/CardContainers/PopoverCardContainer.tsx", "../../../src/decorators/withLayout.tsx", "../../../src/decorators/withThemeEditor.tsx", "../../../src/util.tsx"],
4
+ "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { registerSignalsRuntime } from '@dxos/echo-signals/react';\n\nexport * from './components';\nexport * from './decorators';\nexport * from './util';\n\nregisterSignalsRuntime();\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport React, { memo } from 'react';\n\nimport { DxThemeEditor as NaturalDxThemeEditor } from '@dxos/lit-theme-editor';\nimport { createComponent } from '@dxos/lit-ui/react';\n\nimport '@dxos/lit-theme-editor/dx-theme-editor.pcss';\n\nconst DxThemeEditor = createComponent({\n tagName: 'dx-theme-editor',\n elementClass: NaturalDxThemeEditor,\n react: React,\n});\n\nexport const ThemeEditor = memo(DxThemeEditor);\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { type PropsWithChildren } from 'react';\n\nimport { ResizeHandle, type Size, resizeAttributes, sizeStyle } from '@dxos/react-ui-dnd';\n\n// Default size in rem.\nconst DEFAULT_INLINE_SIZE = 24;\nconst MIN_INLINE_SIZE = 8;\nconst DEFAULT_BLOCK_SIZE = 24;\nconst MIN_BLOCK_SIZE = 8;\n\nexport type ExtrinsicCardContainerProps = PropsWithChildren<{\n defaultInlineSize?: Size;\n inlineSize?: Size;\n defaultBlockSize?: Size;\n blockSize?: Size;\n onInlineSizeChange?: (size: Size, commit?: boolean) => void;\n onBlockSizeChange?: (size: Size, commit?: boolean) => void;\n}>;\n\nexport const ExtrinsicCardContainer = ({\n children,\n defaultInlineSize,\n inlineSize: propInlineSize,\n defaultBlockSize,\n blockSize: propBlockSize,\n onInlineSizeChange,\n onBlockSizeChange,\n}: ExtrinsicCardContainerProps) => {\n const [inlineSize = DEFAULT_INLINE_SIZE, setInlineSize] = useControllableState<Size>({\n prop: propInlineSize,\n defaultProp: defaultInlineSize,\n onChange: onInlineSizeChange,\n });\n\n const [blockSize = DEFAULT_BLOCK_SIZE, setBlockSize] = useControllableState<Size>({\n prop: propBlockSize,\n defaultProp: defaultBlockSize,\n onChange: onBlockSizeChange,\n });\n\n return (\n <div\n className='grid relative border border-dashed border-subduedSeparator p-4 rounded-lg overflow-hidden contain-layout'\n style={{\n ...sizeStyle(inlineSize, 'horizontal'),\n ...sizeStyle(blockSize, 'vertical'),\n }}\n {...resizeAttributes}\n >\n {children}\n <ResizeHandle\n side='inline-end'\n fallbackSize={DEFAULT_INLINE_SIZE}\n minSize={MIN_INLINE_SIZE}\n size={inlineSize}\n onSizeChange={setInlineSize}\n />\n <ResizeHandle\n side='block-end'\n fallbackSize={DEFAULT_BLOCK_SIZE}\n minSize={MIN_BLOCK_SIZE}\n size={blockSize}\n onSizeChange={setBlockSize}\n />\n </div>\n );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { type PropsWithChildren } from 'react';\n\nimport { ResizeHandle, type Size, resizeAttributes, sizeStyle } from '@dxos/react-ui-dnd';\n\n// Default size in rem\nconst DEFAULT_SIZE = 24;\nconst MIN_SIZE = 8;\n\nexport type IntrinsicCardContainerProps = PropsWithChildren<{\n defaultSize?: Size;\n size?: Size;\n onSizeChange?: (size: Size, commit?: boolean) => void;\n}>;\n\nexport const IntrinsicCardContainer = ({\n children,\n defaultSize,\n size: propSize,\n onSizeChange,\n}: IntrinsicCardContainerProps) => {\n const [size = DEFAULT_SIZE, setSize] = useControllableState<Size>({\n prop: propSize,\n defaultProp: defaultSize,\n onChange: onSizeChange,\n });\n\n return (\n <div\n className='relative border border-dashed border-subduedSeparator p-4 rounded-lg'\n style={sizeStyle(size, 'horizontal')}\n {...resizeAttributes}\n >\n {children}\n <ResizeHandle\n side='inline-end'\n fallbackSize={DEFAULT_SIZE}\n minSize={MIN_SIZE}\n size={size}\n onSizeChange={setSize}\n />\n </div>\n );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport React, { type PropsWithChildren } from 'react';\n\nimport { Icon, Popover } from '@dxos/react-ui';\n\nexport const PopoverCardContainer = ({\n children,\n icon = 'ph--placeholder--regular',\n}: PropsWithChildren<{ icon: string }>) => {\n return (\n <Popover.Root open>\n <Popover.Content onOpenAutoFocus={(event) => event.preventDefault()}>\n <Popover.Viewport>{children}</Popover.Viewport>\n <Popover.Arrow />\n </Popover.Content>\n <Popover.Trigger>\n <Icon icon={icon} size={5} />\n </Popover.Trigger>\n </Popover.Root>\n );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { type Decorator } from '@storybook/react';\nimport React from 'react';\n\nexport const withLayout: Decorator = (Story, context) => {\n switch (context.parameters.layout) {\n case 'fullscreen':\n return (\n <div role='none' className='fixed inset-0 flex flex-col overflow-hidden bg-baseSurface'>\n <Story />\n </div>\n );\n\n default:\n return <Story />;\n }\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Decorator } from '@storybook/react';\nimport React, { memo } from 'react';\n\nimport { ThemeEditor } from '../components/ThemeEditor';\n\n/**\n * Show theme editor.\n */\n// TODO(burdon): Ideally move to storybook-addon-theme, but this has a build issue since the addon would depend on the vite theme plugin.\nexport const withThemeEditor: Decorator = (Story, context) => {\n // Prevent re-rendering of the story.\n const MemoizedStory = memo(Story);\n\n return (\n <>\n <MemoizedStory />\n <div className='absolute top-4 bottom-4 right-4 z-10'>\n <div className='bs-full is-[35rem] overflow-auto bg-baseSurface border border-separator rounded'>\n <ThemeEditor />\n </div>\n </div>\n </>\n );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { type FC } from 'react';\n\n/**\n * Story renderer wrapper.\n */\nexport const render =\n <T extends Record<string, any>>(Story: FC<T>) =>\n (args: unknown) => {\n const result = <Story {...(args as T)} />;\n return result ?? <div />;\n };\n"],
5
+ "mappings": "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",
6
+ "names": ["registerSignalsRuntime", "React", "memo", "DxThemeEditor", "NaturalDxThemeEditor", "createComponent", "DxThemeEditor", "createComponent", "tagName", "elementClass", "NaturalDxThemeEditor", "react", "React", "ThemeEditor", "memo", "useControllableState", "React", "ResizeHandle", "resizeAttributes", "sizeStyle", "DEFAULT_INLINE_SIZE", "MIN_INLINE_SIZE", "DEFAULT_BLOCK_SIZE", "MIN_BLOCK_SIZE", "ExtrinsicCardContainer", "children", "defaultInlineSize", "inlineSize", "propInlineSize", "defaultBlockSize", "blockSize", "propBlockSize", "onInlineSizeChange", "onBlockSizeChange", "setInlineSize", "useControllableState", "prop", "defaultProp", "onChange", "setBlockSize", "React", "div", "className", "style", "sizeStyle", "resizeAttributes", "ResizeHandle", "side", "fallbackSize", "minSize", "size", "onSizeChange", "useControllableState", "React", "ResizeHandle", "resizeAttributes", "sizeStyle", "DEFAULT_SIZE", "MIN_SIZE", "IntrinsicCardContainer", "children", "defaultSize", "size", "propSize", "onSizeChange", "setSize", "useControllableState", "prop", "defaultProp", "onChange", "React", "div", "className", "style", "sizeStyle", "resizeAttributes", "ResizeHandle", "side", "fallbackSize", "minSize", "React", "Icon", "Popover", "PopoverCardContainer", "children", "icon", "React", "Popover", "Root", "open", "Content", "onOpenAutoFocus", "event", "preventDefault", "Viewport", "Arrow", "Trigger", "Icon", "size", "React", "withLayout", "Story", "context", "parameters", "layout", "React", "div", "role", "className", "React", "memo", "withThemeEditor", "Story", "context", "MemoizedStory", "memo", "React", "div", "className", "ThemeEditor", "React", "render", "Story", "args", "result", "React", "div", "registerSignalsRuntime"]
7
7
  }
@@ -1 +1 @@
1
- {"inputs":{"src/components/ThemeEditor.tsx":{"bytes":1828,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/lit-theme-editor","kind":"import-statement","external":true},{"path":"@dxos/lit-ui/react","kind":"import-statement","external":true},{"path":"@dxos/lit-theme-editor/dx-theme-editor.pcss","kind":"import-statement","external":true}],"format":"esm"},"src/components/CardContainers/ExtrinsicCardContainer.tsx":{"bytes":6610,"imports":[{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-dnd","kind":"import-statement","external":true}],"format":"esm"},"src/components/CardContainers/IntrinsicCardContainer.tsx":{"bytes":4021,"imports":[{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-dnd","kind":"import-statement","external":true}],"format":"esm"},"src/components/CardContainers/PopoverCardContainer.tsx":{"bytes":2566,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true}],"format":"esm"},"src/components/CardContainers/index.ts":{"bytes":764,"imports":[{"path":"src/components/CardContainers/ExtrinsicCardContainer.tsx","kind":"import-statement","original":"./ExtrinsicCardContainer"},{"path":"src/components/CardContainers/IntrinsicCardContainer.tsx","kind":"import-statement","original":"./IntrinsicCardContainer"},{"path":"src/components/CardContainers/PopoverCardContainer.tsx","kind":"import-statement","original":"./PopoverCardContainer"}],"format":"esm"},"src/components/index.ts":{"bytes":686,"imports":[{"path":"src/components/ThemeEditor.tsx","kind":"import-statement","original":"./ThemeEditor"},{"path":"src/components/CardContainers/index.ts","kind":"import-statement","original":"./CardContainers"}],"format":"esm"},"src/decorators/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/node-esm/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":15691},"dist/lib/node-esm/index.mjs":{"imports":[{"path":"@dxos/echo-signals/react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/lit-theme-editor","kind":"import-statement","external":true},{"path":"@dxos/lit-ui/react","kind":"import-statement","external":true},{"path":"@dxos/lit-theme-editor/dx-theme-editor.pcss","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-dnd","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-dnd","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"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","ExtrinsicCardContainer","FullscreenContainer","IntrinsicCardContainer","PopoverCardContainer","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/components/CardContainers/ExtrinsicCardContainer.tsx":{"bytesInOutput":1572},"src/components/CardContainers/index.ts":{"bytesInOutput":0},"src/components/CardContainers/IntrinsicCardContainer.tsx":{"bytesInOutput":949},"src/components/CardContainers/PopoverCardContainer.tsx":{"bytesInOutput":626},"src/decorators/withLayout.tsx":{"bytesInOutput":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":7524}}}
1
+ {"inputs":{"src/components/ThemeEditor.tsx":{"bytes":1828,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/lit-theme-editor","kind":"import-statement","external":true},{"path":"@dxos/lit-ui/react","kind":"import-statement","external":true},{"path":"@dxos/lit-theme-editor/dx-theme-editor.pcss","kind":"import-statement","external":true}],"format":"esm"},"src/components/CardContainers/ExtrinsicCardContainer.tsx":{"bytes":6611,"imports":[{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-dnd","kind":"import-statement","external":true}],"format":"esm"},"src/components/CardContainers/IntrinsicCardContainer.tsx":{"bytes":4021,"imports":[{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-dnd","kind":"import-statement","external":true}],"format":"esm"},"src/components/CardContainers/PopoverCardContainer.tsx":{"bytes":2566,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true}],"format":"esm"},"src/components/CardContainers/index.ts":{"bytes":764,"imports":[{"path":"src/components/CardContainers/ExtrinsicCardContainer.tsx","kind":"import-statement","original":"./ExtrinsicCardContainer"},{"path":"src/components/CardContainers/IntrinsicCardContainer.tsx","kind":"import-statement","original":"./IntrinsicCardContainer"},{"path":"src/components/CardContainers/PopoverCardContainer.tsx","kind":"import-statement","original":"./PopoverCardContainer"}],"format":"esm"},"src/components/index.ts":{"bytes":686,"imports":[{"path":"src/components/ThemeEditor.tsx","kind":"import-statement","original":"./ThemeEditor"},{"path":"src/components/CardContainers/index.ts","kind":"import-statement","original":"./CardContainers"}],"format":"esm"},"src/decorators/withLayout.tsx":{"bytes":1803,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/decorators/withThemeEditor.tsx":{"bytes":2746,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"src/components/ThemeEditor.tsx","kind":"import-statement","original":"../components/ThemeEditor"}],"format":"esm"},"src/decorators/index.ts":{"bytes":582,"imports":[{"path":"src/decorators/withLayout.tsx","kind":"import-statement","original":"./withLayout"},{"path":"src/decorators/withThemeEditor.tsx","kind":"import-statement","original":"./withThemeEditor"}],"format":"esm"},"src/util.tsx":{"bytes":1228,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/index.ts":{"bytes":943,"imports":[{"path":"@dxos/echo-signals/react","kind":"import-statement","external":true},{"path":"src/components/index.ts","kind":"import-statement","original":"./components"},{"path":"src/decorators/index.ts","kind":"import-statement","original":"./decorators"},{"path":"src/util.tsx","kind":"import-statement","original":"./util"}],"format":"esm"}},"outputs":{"dist/lib/node-esm/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":11016},"dist/lib/node-esm/index.mjs":{"imports":[{"path":"@dxos/echo-signals/react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/lit-theme-editor","kind":"import-statement","external":true},{"path":"@dxos/lit-ui/react","kind":"import-statement","external":true},{"path":"@dxos/lit-theme-editor/dx-theme-editor.pcss","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-dnd","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-dnd","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"exports":["ExtrinsicCardContainer","IntrinsicCardContainer","PopoverCardContainer","ThemeEditor","render","withLayout","withThemeEditor"],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":93},"src/components/ThemeEditor.tsx":{"bytesInOutput":405},"src/components/index.ts":{"bytesInOutput":0},"src/components/CardContainers/ExtrinsicCardContainer.tsx":{"bytesInOutput":1572},"src/components/CardContainers/index.ts":{"bytesInOutput":0},"src/components/CardContainers/IntrinsicCardContainer.tsx":{"bytesInOutput":949},"src/components/CardContainers/PopoverCardContainer.tsx":{"bytesInOutput":626},"src/decorators/withLayout.tsx":{"bytesInOutput":435},"src/decorators/index.ts":{"bytesInOutput":0},"src/decorators/withThemeEditor.tsx":{"bytesInOutput":589},"src/util.tsx":{"bytesInOutput":205}},"bytes":5486}}}
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
2
  import { DxThemeEditor as NaturalDxThemeEditor } from '@dxos/lit-theme-editor';
3
3
  import '@dxos/lit-theme-editor/dx-theme-editor.pcss';
4
- export declare const ThemeEditor: React.MemoExoticComponent<import("@lit/react").ReactWebComponent<NaturalDxThemeEditor, {}>>;
4
+ export declare const ThemeEditor: React.NamedExoticComponent<Omit<React.HTMLAttributes<NaturalDxThemeEditor>, "connectedCallback" | "disconnectedCallback" | "render" | "createRenderRoot" | "renderOptions" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete"> & {} & Partial<Omit<NaturalDxThemeEditor, keyof HTMLElement>> & React.RefAttributes<NaturalDxThemeEditor>>;
5
5
  //# sourceMappingURL=ThemeEditor.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"ThemeEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/ThemeEditor.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAe,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAE,aAAa,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAG/E,OAAO,6CAA6C,CAAC;AAQrD,eAAO,MAAM,WAAW,6FAAsB,CAAC"}
1
+ {"version":3,"file":"ThemeEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/ThemeEditor.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAe,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAE,aAAa,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAG/E,OAAO,6CAA6C,CAAC;AAQrD,eAAO,MAAM,WAAW,mbAAsB,CAAC"}
@@ -1,4 +1,3 @@
1
1
  export * from './withLayout';
2
- export * from './withTheme';
3
2
  export * from './withThemeEditor';
4
3
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/decorators/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/decorators/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC"}
@@ -1,21 +1,3 @@
1
1
  import { type Decorator } from '@storybook/react';
2
- import { type FC, type JSX, type PropsWithChildren } from 'react';
3
- import { type Density, type ThemedClassName } from '@dxos/react-ui';
4
- type ProviderOptions = {
5
- fullscreen?: boolean;
6
- density?: Density;
7
- };
8
- export type ContainerProps = ThemedClassName<PropsWithChildren<Pick<ProviderOptions, 'fullscreen'>>>;
9
- export type WithLayoutProps = ThemedClassName<ProviderOptions & {
10
- Container?: FC<ContainerProps>;
11
- }>;
12
- /**
13
- * Decorator to layout the story container, adding optional providers.
14
- */
15
- export declare const withLayout: ({ classNames, fullscreen, Container, ...providedOptions }?: WithLayoutProps) => Decorator;
16
- export declare const layoutCentered = "bg-deckSurface justify-center overflow-y-auto";
17
- export declare const DefaultContainer: ({ children, classNames }: ContainerProps) => JSX.Element;
18
- export declare const FullscreenContainer: ({ children, classNames }: ContainerProps) => JSX.Element;
19
- export declare const ColumnContainer: ({ children, classNames, ...props }: ContainerProps) => JSX.Element;
20
- export {};
2
+ export declare const withLayout: Decorator;
21
3
  //# sourceMappingURL=withLayout.d.ts.map
@@ -1 +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;AAElD,OAAc,EAAE,KAAK,EAAE,EAAE,KAAK,GAAG,EAAE,KAAK,iBAAiB,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;AAGF,eAAO,MAAM,cAAc,kDAAkD,CAAC;AAE9E,eAAO,MAAM,gBAAgB,GAAI,0BAA0B,cAAc,gBAMxE,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,0BAA0B,cAAc,gBAM3E,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,oCAAkD,cAAc,gBAQ/F,CAAC"}
1
+ {"version":3,"file":"withLayout.d.ts","sourceRoot":"","sources":["../../../../src/decorators/withLayout.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAGlD,eAAO,MAAM,UAAU,EAAE,SAYxB,CAAC"}
@@ -1,4 +1,3 @@
1
- export { type Meta } from '@storybook/react';
2
1
  export * from './components';
3
2
  export * from './decorators';
4
3
  export * from './util';
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAE7C,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAMA,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC"}