@dxos/brand 0.8.3 → 0.8.4-main.03d5cd7b56

package/src/{icons → components/icons}/DXOS.tsx

@@ -2,8 +2,9 @@
 // Copyright 2023 DXOS.org
 //
 
-import { IconBase, type IconProps, type IconWeight } from '@phosphor-icons/react';
-import React, { forwardRef, type ReactElement } from 'react';
+import { type IconProps, type IconWeight } from '@phosphor-icons/react';
+import IconBase from '@phosphor-icons/react/dist/lib/IconBase';
+import React, { type ReactElement, forwardRef } from 'react';
 
 const weights = new Map<IconWeight, ReactElement>([
   [

package/src/{icons → components/icons}/ECHO.tsx

@@ -2,8 +2,9 @@
 // Copyright 2023 DXOS.org
 //
 
-import { IconBase, type IconProps, type IconWeight } from '@phosphor-icons/react';
-import React, { forwardRef, type ReactElement } from 'react';
+import { type IconProps, type IconWeight } from '@phosphor-icons/react';
+import IconBase from '@phosphor-icons/react/dist/lib/IconBase';
+import React, { type ReactElement, forwardRef } from 'react';
 
 const weights = new Map<IconWeight, ReactElement>([
   [

package/src/{icons → components/icons}/HALO.tsx

@@ -2,8 +2,9 @@
 // Copyright 2023 DXOS.org
 //
 
-import { IconBase, type IconProps, type IconWeight } from '@phosphor-icons/react';
-import React, { forwardRef, type ReactElement } from 'react';
+import { type IconProps, type IconWeight } from '@phosphor-icons/react';
+import IconBase from '@phosphor-icons/react/dist/lib/IconBase';
+import React, { type ReactElement, forwardRef } from 'react';
 
 const weights = new Map<IconWeight, ReactElement>([
   [

package/src/components/icons/Icons.stories.tsx

@@ -0,0 +1,68 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { withTheme } from '@dxos/react-ui/testing';
+import { mx } from '@dxos/ui-theme';
+
+import { Composer } from './Composer';
+import { DXNS } from './DXNS';
+import { DXOS } from './DXOS';
+import { ECHO } from './ECHO';
+import { HALO } from './HALO';
+import { KUBE } from './KUBE';
+import { MESH } from './MESH';
+
+const Icon = () => null;
+
+const meta = {
+  title: 'ui/brand/components/Icons',
+  component: Icon,
+  decorators: [withTheme()],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof Icon>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => {
+    const size = 'w-[192px] h-[192px]';
+    return (
+      <div className='grid grid-cols-3 gap-16'>
+        <>
+          <div className='col-span-full flex justify-center'>
+            <Composer className={mx(size)} />
+          </div>
+        </>
+        <>
+          <ECHO className={mx(size, 'fill-sky-700')} />
+          <HALO className={mx(size, 'fill-violet-700')} />
+          <MESH className={mx(size, 'fill-green-700')} />
+        </>
+        <>
+          <DXNS className={mx(size, 'fill-neutral-700')} />
+          <DXOS className={mx(size, 'fill-neutral-700')} />
+          <KUBE className={mx(size, 'fill-neutral-700')} />
+        </>
+        <>
+          <div className='flex justify-center'>
+            <DXOS className={mx('w-[40px] h-[40px] fill-sky-700')} />
+          </div>
+          <div className='flex justify-center'>
+            <DXOS className={mx('w-[24px] h-[24px] fill-sky-700')} />
+          </div>
+          <div className='flex justify-center'>
+            <DXOS className={mx('w-[16px] h-[16px] fill-sky-700')} />
+          </div>
+        </>
+      </div>
+    );
+  },
+};

package/src/{icons → components/icons}/KUBE.tsx

@@ -2,8 +2,9 @@
 // Copyright 2023 DXOS.org
 //
 
-import { IconBase, type IconProps, type IconWeight } from '@phosphor-icons/react';
-import React, { forwardRef, type ReactElement } from 'react';
+import { type IconProps, type IconWeight } from '@phosphor-icons/react';
+import IconBase from '@phosphor-icons/react/dist/lib/IconBase';
+import React, { type ReactElement, forwardRef } from 'react';
 
 const weights = new Map<IconWeight, ReactElement>([
   [

package/src/{icons → components/icons}/MESH.tsx

@@ -2,8 +2,9 @@
 // Copyright 2023 DXOS.org
 //
 
-import { IconBase, type IconProps, type IconWeight } from '@phosphor-icons/react';
-import React, { forwardRef, type ReactElement } from 'react';
+import { type IconProps, type IconWeight } from '@phosphor-icons/react';
+import IconBase from '@phosphor-icons/react/dist/lib/IconBase';
+import React, { type ReactElement, forwardRef } from 'react';
 
 const weights = new Map<IconWeight, ReactElement>([
   [

package/src/components/index.ts

@@ -1,5 +1,6 @@
 //
-// Copyright 2024 DXOS.org
+// Copyright 2023 DXOS.org
 //
 
-export * from './ComposerLogo';
+export * from './icons';
+export * from './logotypes';

package/src/{Logotypes.stories.tsx → components/logotypes/Logotypes.stories.tsx}

@@ -2,33 +2,38 @@
 // Copyright 2022 DXOS.org
 //
 
-import '@dxos-theme';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { type PropsWithChildren } from 'react';
 
-import React, { type FC, type ReactNode } from 'react';
+import { withTheme } from '@dxos/react-ui/testing';
+import { mx } from '@dxos/ui-theme';
 
-import { mx } from '@dxos/react-ui-theme';
-import { withTheme } from '@dxos/storybook-utils';
-
-import { DXOSType, DXOSHorizontalType, DXOSVerticalType } from './logotypes';
+import { DXOSHorizontalType } from './DXOSHorizontalType';
+import { DXOSType } from './DXOSType';
+import { DXOSVerticalType } from './DXOSVerticalType';
 
 const Icon = () => null;
 
-export default {
-  title: 'ui/brand/LogoTypes',
+const meta = {
+  title: 'ui/brand/components/LogoTypes',
   component: Icon,
-  decorators: [withTheme],
-};
+  decorators: [withTheme()],
+} satisfies Meta<typeof Icon>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-const Cell: FC<{ children: ReactNode; dark?: boolean }> = ({ children, dark }) => (
-  <div className={mx('flex p-4 justify-center rounded-md', dark ? 'bg-zinc-800 fill-zinc-50' : 'bg-white')}>
+const Cell = ({ children, dark }: PropsWithChildren<{ dark?: boolean }>) => (
+  <div className={mx('flex p-4 justify-center rounded-md', dark ? 'bg-zinc-800 fill-zinc-50' : 'bg-zinc-100')}>
     {children}
   </div>
 );
 
-export const Default = {
+export const Default: Story = {
   render: () => {
     return (
-      <div className='absolute flex w-full h-full items-center justify-center'>
+      <div className='absolute flex h-full w-full items-center justify-center'>
         <div className='flex grid grid-cols-2 gap-16'>
           <Cell>
             <DXOSType className='w-[256px]' />

package/src/index.ts

@@ -3,5 +3,3 @@
 //
 
 export * from './components';
-export * from './icons';
-export * from './logotypes';

package/src/types.d.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+// Vite resolves audio imports to asset URLs at build/serve time.
+declare module '*.mp3' {
+  const src: string;
+  export default src;
+}

package/dist/types/src/Icons.stories.d.ts

@@ -1,12 +0,0 @@
-import '@dxos-theme';
-import React from 'react';
-declare const _default: {
-    title: string;
-    component: () => null;
-    decorators: import("@storybook/react").Decorator[];
-};
-export default _default;
-export declare const Default: {
-    render: () => React.JSX.Element;
-};
-//# sourceMappingURL=Icons.stories.d.ts.map

package/dist/types/src/Icons.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Icons.stories.d.ts","sourceRoot":"","sources":["../../../src/Icons.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AAS1B,wBAIE;AAEF,eAAO,MAAM,OAAO;;CAyBnB,CAAC"}

package/dist/types/src/Logotypes.stories.d.ts

@@ -1,12 +0,0 @@
-import '@dxos-theme';
-import React from 'react';
-declare const _default: {
-    title: string;
-    component: () => null;
-    decorators: import("@storybook/react").Decorator[];
-};
-export default _default;
-export declare const Default: {
-    render: () => React.JSX.Element;
-};
-//# sourceMappingURL=Logotypes.stories.d.ts.map

package/dist/types/src/Logotypes.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Logotypes.stories.d.ts","sourceRoot":"","sources":["../../../src/Logotypes.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAkC,MAAM,OAAO,CAAC;;;;;;AASvD,wBAIE;AAQF,eAAO,MAAM,OAAO;;CA6BnB,CAAC"}

package/dist/types/src/components/ComposerLogo/ComposerLogo.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ComposerLogo.d.ts","sourceRoot":"","sources":["../../../../../src/components/ComposerLogo/ComposerLogo.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,EAEZ,KAAK,EAAE,EASR,MAAM,OAAO,CAAC;AAiBf,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB;AAyCD,eAAO,MAAM,YAAY;cALY,OAAO;WAAS,MAAM;iBAAe,MAAM,EAAE;uGAuCjF,CAAC;AAmDF;;GAEG;AAEH,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAkGA,CAAC"}

package/dist/types/src/components/ComposerLogo/ComposerLogo.stories.d.ts

@@ -1,30 +0,0 @@
-import '@dxos-theme';
-import '@fontsource/k2d/100-italic.css';
-import React from 'react';
-import { type AnimationController } from './ComposerLogo';
-declare const _default: {
-    title: string;
-    component: React.ForwardRefExoticComponent<{
-        animate?: boolean;
-        size?: number;
-        classNames?: string[];
-    } & Omit<React.HTMLAttributes<HTMLDivElement>, "className"> & React.RefAttributes<AnimationController>>;
-    decorators: import("@storybook/react").Decorator[];
-};
-export default _default;
-export declare const Default: {
-    render: () => React.JSX.Element;
-};
-export declare const Colors: {
-    render: () => React.JSX.Element;
-};
-export declare const Pacman: {
-    render: () => React.JSX.Element;
-};
-export declare const Spinner: {
-    render: () => React.JSX.Element;
-};
-export declare const Linear: {
-    render: () => React.JSX.Element;
-};
-//# sourceMappingURL=ComposerLogo.stories.d.ts.map

package/dist/types/src/components/ComposerLogo/ComposerLogo.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ComposerLogo.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/ComposerLogo/ComposerLogo.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,gCAAgC,CAAC;AAGxC,OAAO,KAA2B,MAAM,OAAO,CAAC;AAMhD,OAAO,EAAE,KAAK,mBAAmB,EAAiC,MAAM,gBAAgB,CAAC;;;;;;;;;;AAOzF,wBAIE;AAWF,eAAO,MAAM,OAAO;;CAsCnB,CAAC;AAGF,eAAO,MAAM,MAAM;;CA0BlB,CAAC;AAEF,eAAO,MAAM,MAAM;;CAoClB,CAAC;AAuCF,eAAO,MAAM,OAAO;;CAQnB,CAAC;AAGF,eAAO,MAAM,MAAM;;CAclB,CAAC"}

package/dist/types/src/components/ComposerLogo/index.d.ts

@@ -1,2 +0,0 @@
-export * from './ComposerLogo';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/ComposerLogo/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ComposerLogo/index.ts"],"names":[],"mappings":"AAIA,cAAc,gBAAgB,CAAC"}

package/dist/types/src/components/rive.stories.d.ts

@@ -1,9 +0,0 @@
-import '@dxos-theme';
-import React from 'react';
-declare const _default: {
-    title: string;
-    decorators: import("@storybook/react").Decorator[];
-};
-export default _default;
-export declare const Default: () => React.JSX.Element | null;
-//# sourceMappingURL=rive.stories.d.ts.map

package/dist/types/src/components/rive.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"rive.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/rive.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAGrB,OAAO,KAAoB,MAAM,OAAO,CAAC;;;;;AAMzC,wBAGE;AA+BF,eAAO,MAAM,OAAO,gCAoCnB,CAAC"}

package/dist/types/src/icons/Composer.d.ts

@@ -1,4 +0,0 @@
-import { type IconProps } from '@phosphor-icons/react';
-import React from 'react';
-export declare const Composer: React.ForwardRefExoticComponent<Omit<IconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
-//# sourceMappingURL=Composer.d.ts.map

package/dist/types/src/icons/Composer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Composer.d.ts","sourceRoot":"","sources":["../../../../src/icons/Composer.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAY,KAAK,SAAS,EAAmB,MAAM,uBAAuB,CAAC;AAClF,OAAO,KAAwC,MAAM,OAAO,CAAC;AAiC7D,eAAO,MAAM,QAAQ,8FAEnB,CAAC"}

package/dist/types/src/icons/DXNS.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DXNS.d.ts","sourceRoot":"","sources":["../../../../src/icons/DXNS.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAY,KAAK,SAAS,EAAmB,MAAM,uBAAuB,CAAC;AAClF,OAAO,KAAwC,MAAM,OAAO,CAAC;AAoC7D,eAAO,MAAM,IAAI,8FAEf,CAAC"}

package/dist/types/src/icons/DXOS.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DXOS.d.ts","sourceRoot":"","sources":["../../../../src/icons/DXOS.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAY,KAAK,SAAS,EAAmB,MAAM,uBAAuB,CAAC;AAClF,OAAO,KAAwC,MAAM,OAAO,CAAC;AAa7D,eAAO,MAAM,IAAI,8FAEf,CAAC"}

package/dist/types/src/icons/ECHO.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ECHO.d.ts","sourceRoot":"","sources":["../../../../src/icons/ECHO.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAY,KAAK,SAAS,EAAmB,MAAM,uBAAuB,CAAC;AAClF,OAAO,KAAwC,MAAM,OAAO,CAAC;AAa7D,eAAO,MAAM,IAAI,8FAEf,CAAC"}

package/dist/types/src/icons/HALO.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"HALO.d.ts","sourceRoot":"","sources":["../../../../src/icons/HALO.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAY,KAAK,SAAS,EAAmB,MAAM,uBAAuB,CAAC;AAClF,OAAO,KAAwC,MAAM,OAAO,CAAC;AAiB7D,eAAO,MAAM,IAAI,8FAEf,CAAC"}

package/dist/types/src/icons/KUBE.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"KUBE.d.ts","sourceRoot":"","sources":["../../../../src/icons/KUBE.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAY,KAAK,SAAS,EAAmB,MAAM,uBAAuB,CAAC;AAClF,OAAO,KAAwC,MAAM,OAAO,CAAC;AA6C7D,eAAO,MAAM,IAAI,8FAEf,CAAC"}

package/dist/types/src/icons/MESH.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"MESH.d.ts","sourceRoot":"","sources":["../../../../src/icons/MESH.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAY,KAAK,SAAS,EAAmB,MAAM,uBAAuB,CAAC;AAClF,OAAO,KAAwC,MAAM,OAAO,CAAC;AAc7D,eAAO,MAAM,IAAI,8FAEf,CAAC"}

package/dist/types/src/icons/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/icons/index.ts"],"names":[],"mappings":"AAIA,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC"}

package/dist/types/src/logotypes/DXOSHorizontalType.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DXOSHorizontalType.d.ts","sourceRoot":"","sources":["../../../../src/logotypes/DXOSHorizontalType.tsx"],"names":[],"mappings":"AAIA,OAAc,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAIvC,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAgCzD,CAAC"}

package/dist/types/src/logotypes/DXOSType.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DXOSType.d.ts","sourceRoot":"","sources":["../../../../src/logotypes/DXOSType.tsx"],"names":[],"mappings":"AAIA,OAAc,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAIvC,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CA6B/C,CAAC"}

package/dist/types/src/logotypes/DXOSVerticalType.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DXOSVerticalType.d.ts","sourceRoot":"","sources":["../../../../src/logotypes/DXOSVerticalType.tsx"],"names":[],"mappings":"AAIA,OAAc,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAIvC,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAgCvD,CAAC"}

package/dist/types/src/logotypes/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/logotypes/index.ts"],"names":[],"mappings":"AAIA,cAAc,sBAAsB,CAAC;AACrC,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC"}

package/src/Icons.stories.tsx

@@ -1,47 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-import '@dxos-theme';
-
-import React from 'react';
-
-import { mx } from '@dxos/react-ui-theme';
-import { withTheme } from '@dxos/storybook-utils';
-
-import { DXNS, DXOS, ECHO, HALO, KUBE, MESH, Composer } from './icons';
-
-const Icon = () => null;
-
-export default {
-  title: 'ui/brand/Icons',
-  component: Icon,
-  decorators: [withTheme],
-};
-
-export const Default = {
-  render: () => {
-    const size = 'w-[128px] h-[128px]';
-    return (
-      <div className='absolute flex w-full h-full items-center justify-center'>
-        <div className='grid grid-cols-3 gap-16'>
-          <>
-            <div />
-            <Composer className={mx(size)} />
-            <div />
-          </>
-          <>
-            <DXNS className={mx(size, 'fill-orange-700')} />
-            <DXOS className={mx(size, 'fill-teal-700')} />
-            <ECHO className={mx(size, 'fill-violet-700')} />
-          </>
-          <>
-            <HALO className={mx(size, 'fill-purple-700')} />
-            <KUBE className={mx(size, 'fill-sky-700')} />
-            <MESH className={mx(size, 'fill-green-700')} />
-          </>
-        </div>
-      </div>
-    );
-  },
-};

package/src/components/ComposerLogo/ComposerLogo.stories.tsx

@@ -1,207 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-import '@dxos-theme';
-
-import '@fontsource/k2d/100-italic.css';
-
-import { Ghost, Square } from '@phosphor-icons/react';
-import React, { useRef, useState } from 'react';
-
-import { Button } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
-import { withTheme } from '@dxos/storybook-utils';
-
-import { type AnimationController, ComposerLogo, ComposerSpinner } from './ComposerLogo';
-import { DXOS } from '../../icons';
-
-// import ident from '../../../assets/sounds/ident-1.mp3';
-
-// https://pixabay.com/sound-effects/search/logo/?pagi=2
-
-export default {
-  title: 'ui/brand/Logo',
-  component: ComposerLogo,
-  decorators: [withTheme],
-};
-
-// TODO(burdon): Get from theme?
-const colors = {
-  gray: '#888888',
-  purple: '#AA23D3',
-  orange: '#CA6346',
-  green: '#4DA676',
-  blue: '#539ACD',
-};
-
-export const Default = {
-  render: () => {
-    const controller = useRef<AnimationController>(null);
-    const [logo, setLogo] = useState(false);
-    const handleSpin = async () => {
-      // const audio = new Audio(ident);
-      // await audio.play();
-      setTimeout(() => {
-        setLogo(true);
-      }, 1_500);
-
-      controller.current?.spin();
-    };
-
-    return (
-      <div className='absolute flex inset-0 items-center justify-center'>
-        <div className='absolute left-4 top-4'>
-          <Button onClick={handleSpin}>Spin</Button>
-        </div>
-
-        <div>
-          <div className='flex justify-center'>
-            <ComposerLogo ref={controller} size={256} />
-          </div>
-
-          <div className={mx('transition opacity-0 duration-1000', logo && 'opacity-100')}>
-            <div className={mx('text-[100px] text-teal-400 font-[k2d] italic')}>composer</div>
-            <div className={mx('flex items-center -mt-[20px] text-neutral-700')}>
-              <span className='ml-[210px] mt-[2px] mr-2'>Powered by DXOS</span>
-              <div>
-                <DXOS className='w-[32px] h-[32px]' />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  },
-};
-
-// TODO(burdon): Camo.
-export const Colors = {
-  render: () => {
-    const colors = [
-      ['fill-teal-400', 'fill-teal-500', 'fill-teal-600'],
-      ['fill-orange-400', 'fill-orange-500', 'fill-orange-600'],
-      ['fill-cyan-400', 'fill-cyan-500', 'fill-cyan-600'],
-      ['fill-purple-400', 'fill-purple-500', 'fill-purple-600'],
-      ['fill-blue-500', 'fill-blue-600', 'fill-blue-700'],
-      ['fill-slate-500', 'fill-slate-600', 'fill-slate-700'],
-      ['fill-blue-500', 'fill-neutral-100', 'fill-red-500'],
-      ['fill-stone-400', 'fill-stone-500', 'fill-stone-600'],
-      ['fill-neutral-500', 'fill-neutral-600', 'fill-neutral-700'],
-    ];
-
-    return (
-      <div className='absolute inset-0 flex justify-center items-center'>
-        <div className='grid grid-cols-3 gap-20 w-[800px]'>
-          {colors.map((classNames, i) => (
-            <div key={i} className='flex justify-center items-center'>
-              <ComposerLogo animate={false} size={160} classNames={classNames} />
-            </div>
-          ))}
-        </div>
-      </div>
-    );
-  },
-};
-
-export const Pacman = {
-  render: () => {
-    return (
-      <div className='absolute inset-0 flex flex-col justify-center'>
-        <div className='flex flex-col'>
-          <div className='flex items-center p-4'>
-            <div className='flex ml-8 mr-[100px]'>
-              <div>
-                <Ghost weight='duotone' className='w-[180px] h-[180px] text-blue-500' />
-              </div>
-              <div>
-                <Ghost weight='duotone' className='w-[180px] h-[180px] text-purple-500' />
-              </div>
-              <div>
-                <Ghost weight='duotone' className='w-[180px] h-[180px] text-red-500' />
-              </div>
-            </div>
-
-            <ComposerLogo size={145} classNames={['fill-yellow-200', 'fill-yellow-300', 'fill-yellow-400']} />
-
-            <div className='flex -ml-10'>
-              {Array.from({ length: 6 }).map((_, i) => (
-                <div key={i} className='p-4'>
-                  <Square weight='duotone' className='w-6 h-6 text-yellow-200' />
-                </div>
-              ))}
-            </div>
-          </div>
-
-          <div className='flex justify-center font-mono font-light text-[60px] mt-8 text-neutral-200'>
-            <div>Ready Player 1</div>
-          </div>
-        </div>
-      </div>
-    );
-  },
-};
-
-const SpinnerContainer = () => {
-  const [spinning, setSpinning] = useState(false);
-  return (
-    <div>
-      <div className='absolute left-4 top-4'>
-        {(spinning && <Button onClick={() => setSpinning(false)}>Stop</Button>) || (
-          <Button onClick={() => setSpinning(true)}>Start</Button>
-        )}
-      </div>
-      <div className='grid grid-cols-3 gap-20'>
-        <>
-          <div className='flex justify-center items-center'>
-            <ComposerSpinner animate={spinning} gap={1} size={200} color={colors.blue} />
-          </div>
-          <div className='flex justify-center items-center'>
-            <ComposerSpinner animate={spinning} gap={1} size={200} color={colors.green} />
-          </div>
-          <div className='flex justify-center items-center'>
-            <ComposerSpinner animate={spinning} gap={1} size={200} color={colors.orange} />
-          </div>
-        </>
-        <>
-          <div className='flex justify-center items-center'>
-            <ComposerSpinner animate={spinning} gap={1} size={200} color={colors.blue} />
-          </div>
-          <div className='flex justify-center items-center'>
-            <ComposerSpinner animate={spinning} gap={1} size={100} color={colors.green} />
-          </div>
-          <div className='flex justify-center items-center'>
-            <ComposerSpinner animate={spinning} gap={1} size={40} color={colors.orange} />
-          </div>
-        </>
-      </div>
-    </div>
-  );
-};
-
-export const Spinner = {
-  render: () => {
-    return (
-      <div className='absolute inset-0 flex items-center justify-center'>
-        <SpinnerContainer />
-      </div>
-    );
-  },
-};
-
-// https://github.com/grafana/grafana/blob/main/packages/grafana-ui/src/components/LoadingBar/LoadingBar.tsx
-export const Linear = {
-  render: () => {
-    return (
-      <div className='absolute flex flex-col inset-0 bg-black'>
-        <div
-          className={'h-[1px] translateX(-100%) animate-progress-linear'}
-          style={{
-            background:
-              'linear-gradient(90deg, rgba(110, 159, 255, 0) 0%, #6E9FFF 80.75%, rgba(110, 159, 255, 0) 100%)',
-          }}
-        />
-      </div>
-    );
-  },
-};

package/src/components/ComposerLogo/index.ts

@@ -1,5 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-export * from './ComposerLogo';