@dxos/brand 0.13.0 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/brand",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "DXOS brand assets.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -45,15 +45,15 @@
     "d3": "^7.9.0",
     "react": "~19.2.7",
     "react-dom": "~19.2.7",
-    "@dxos/log": "0.13.0",
-    "@dxos/react-ui": "0.13.0",
-    "@dxos/ui-theme": "0.13.0"
+    "@dxos/log": "0.14.0",
+    "@dxos/react-ui": "0.14.0",
+    "@dxos/ui-theme": "0.14.0"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "2.1.10",
     "react": "~19.2.7",
     "react-dom": "~19.2.7",
-    "@dxos/ui-theme": "^0.13.0"
+    "@dxos/ui-theme": "^0.14.0"
   },
   "publishConfig": {
     "access": "public"

package/src/components/icons/Composer.tsx

@@ -5,36 +5,47 @@
 import { type IconWeight } from '@phosphor-icons/react';
 import React, { type ReactElement, forwardRef } from 'react';
 
-const weights = new Map<IconWeight, ReactElement>([
-  [
-    'regular',
-    <>
-      <g transform='matrix(0.969697,0,0,1,-570.182,0)'>
-        <rect x='588' y='0' width='264' height='256' style={{ fill: 'none' }} />
-        <g transform='matrix(0.917198,0,0,1,-223.93,-876)'>
-          <path
-            d='M1065.83,1064L1029.14,1064C991.913,1064 961.684,1037.12 961.684,1004C961.684,971.197 991.282,944.542 1028.02,944.008L1028.02,944L1047.85,944L1039.21,968L1029.14,968C1006.79,968 988.669,984.118 988.669,1004C988.669,1023.87 1006.81,1040 1029.14,1040C1029.38,1040 1029.62,1040 1029.85,1040L1029.85,1040L1074.47,1040L1065.83,1064ZM1083.11,1040L1083.11,1040L1083.11,1064L1083.11,1064L1083.11,1040Z'
-            style={{ fill: 'rgb(1,122,183)' }}
-          />
-        </g>
-        <path
-          d='M761.579,164L720,164C699.51,164 682.875,147.869 682.875,128C682.875,108.452 698.942,92.543 718.969,92.014L718.969,92L729.238,92L721.317,116L720,116C713.165,116 707.625,121.373 707.625,128C707.625,134.623 713.17,140 720,140C720.072,140 720.144,139.999 720.216,139.998L720.216,140L769.5,140L761.579,164Z'
-          style={{ fill: 'rgb(6,197,253)' }}
-        />
-        <path
-          d='M745.738,212L720.025,212L720,212C672.202,212 633.389,174.377 633.375,128.024C633.361,81.958 671.591,44.542 718.969,44.006L718.969,44L719.975,44L745.079,44L737.159,68L719.982,68C685.809,68.01 658.115,94.88 658.125,128.017C658.135,161.126 685.858,188 720,188L720.018,188C720.378,188 720.738,187.997 721.098,187.991L721.098,188L753.659,188L745.738,212Z'
-          style={{ fill: 'rgb(10,75,105)' }}
-        />
-        <g transform='matrix(1.03125,0,0,1,588,0)'>
-          <path
-            d='M128,236C68.393,236 20,187.607 20,128C20,68.353 68.353,20 128,20L160,20L152.319,44L128,44C81.608,44 44,81.608 44,128C44,174.361 81.639,212 128,212C127.756,212.004 127.878,212.004 128,212.003C128.122,212.002 128.244,212 128,212L152.958,212L145.277,236L128,236ZM128,236C128.628,236 127.372,236.011 128,236Z'
-            style={{ fill: 'rgb(5,40,61)' }}
-          />
-        </g>
-      </g>
-    </>,
-  ],
-]);
+const OUTER_TRANSFORM = 'matrix(0.969697,0,0,1,-570.182,0)';
+
+export type ComposerRing = {
+  /** Maps the path's source coordinates into the 256 x 256 viewBox. */
+  transform: string;
+  fill: string;
+  d: string;
+};
+
+/**
+ * The four rings of the mark, innermost first; each transform maps the ring onto a viewBox (0 0 256 256) centred on (128, 128).
+ * Exported separately so idents can animate each ring independently.
+ */
+export const composerRingPaths: ComposerRing[] = [
+  {
+    transform: OUTER_TRANSFORM,
+    fill: 'rgb(6,197,253)',
+    d: 'M761.579,164L720,164C699.51,164 682.875,147.869 682.875,128C682.875,108.452 698.942,92.543 718.969,92.014L718.969,92L729.238,92L721.317,116L720,116C713.165,116 707.625,121.373 707.625,128C707.625,134.623 713.17,140 720,140C720.072,140 720.144,139.999 720.216,139.998L720.216,140L769.5,140L761.579,164Z',
+  },
+  {
+    transform: `${OUTER_TRANSFORM} matrix(0.917198,0,0,1,-223.93,-876)`,
+    fill: 'rgb(1,122,183)',
+    d: 'M1065.83,1064L1029.14,1064C991.913,1064 961.684,1037.12 961.684,1004C961.684,971.197 991.282,944.542 1028.02,944.008L1028.02,944L1047.85,944L1039.21,968L1029.14,968C1006.79,968 988.669,984.118 988.669,1004C988.669,1023.87 1006.81,1040 1029.14,1040C1029.38,1040 1029.62,1040 1029.85,1040L1029.85,1040L1074.47,1040L1065.83,1064ZM1083.11,1040L1083.11,1040L1083.11,1064L1083.11,1064L1083.11,1040Z',
+  },
+  {
+    transform: OUTER_TRANSFORM,
+    fill: 'rgb(10,75,105)',
+    d: 'M745.738,212L720.025,212L720,212C672.202,212 633.389,174.377 633.375,128.024C633.361,81.958 671.591,44.542 718.969,44.006L718.969,44L719.975,44L745.079,44L737.159,68L719.982,68C685.809,68.01 658.115,94.88 658.125,128.017C658.135,161.126 685.858,188 720,188L720.018,188C720.378,188 720.738,187.997 721.098,187.991L721.098,188L753.659,188L745.738,212Z',
+  },
+  {
+    transform: `${OUTER_TRANSFORM} matrix(1.03125,0,0,1,588,0)`,
+    fill: 'rgb(5,40,61)',
+    d: 'M128,236C68.393,236 20,187.607 20,128C20,68.353 68.353,20 128,20L160,20L152.319,44L128,44C81.608,44 44,81.608 44,128C44,174.361 81.639,212 128,212C127.756,212.004 127.878,212.004 128,212.003C128.122,212.002 128.244,212 128,212L152.958,212L145.277,236L128,236ZM128,236C128.628,236 127.372,236.011 128,236Z',
+  },
+];
+
+export const composerRings: ReactElement[] = composerRingPaths.map(({ transform, fill, d }, index) => (
+  <path key={index} transform={transform} d={d} style={{ fill }} />
+));
+
+const weights = new Map<IconWeight, ReactElement>([['regular', <>{composerRings}</>]]);
 
 export const Composer = forwardRef<SVGSVGElement, any>((props, forwardedRef) => {
   const weight = props.weight || 'regular';

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

@@ -0,0 +1,427 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useEffect, useRef, useState } from 'react';
+
+import * as Button from '@dxos/react-ui/Button';
+import { withTheme } from '@dxos/react-ui/testing';
+import { mx } from '@dxos/ui-theme';
+
+import { composerRingPaths } from './Composer.tsx';
+
+const FONT_URL = 'https://fonts.googleapis.com/css2?family=Poiret+One&display=swap';
+
+type RingStep = {
+  keyframes: Keyframe[];
+  easing: string;
+};
+
+type IdentVariant = {
+  label: string;
+  /** Ring animation; receives the ring index (0 = innermost) to vary direction per ring. */
+  ring: (index: number) => RingStep;
+  /** Ring order: innermost first unless reversed. */
+  outerFirst?: boolean;
+  /** Duration of each ring's animation (ms). */
+  duration: number;
+  /** Delay between successive rings (ms). */
+  stagger: number;
+  /** Fraction (0-1) of the last ring's animation after which the wordmark may start; long easing tails look settled before they end. */
+  settledAt?: number;
+  /** Start from the symmetric mark, then extend each bottom arm to its true length. */
+  grow?: {
+    /** Growth speed shared by every arm (viewBox units per ms), so shorter arms finish first. */
+    rate: number;
+    /** Pause after the rings land before the arms grow (ms); ignored when `finishAt` is set. */
+    delay: number;
+    /** Grow while the rings are still moving, fully grown at this fraction (0-1) of the last ring's animation. */
+    finishAt?: number;
+  };
+};
+
+/**
+ * Bottom-arm vertices of each ring paired with their mirror image of the top arm across y = 128 (in path coordinates),
+ * so the mark can start symmetric; the bottom arms of the real mark are longer.
+ */
+const SYMMETRIC_ARMS: [string, string][][] = [
+  [
+    ['761.579,164', '729.238,164'],
+    ['769.5,140', '721.317,140'],
+  ],
+  [
+    ['1065.83,1064', '1047.85,1064'],
+    ['1074.47,1040', '1039.21,1040'],
+  ],
+  [
+    ['745.738,212', '745.079,212'],
+    ['753.659,188', '737.159,188'],
+  ],
+  [
+    ['152.958,212', '152.319,212'],
+    ['145.277,236', '160,236'],
+  ],
+];
+
+const symmetricPaths = composerRingPaths.map(({ d }, index) =>
+  SYMMETRIC_ARMS[index].reduce((path, [from, to]) => path.replaceAll(from, to), d),
+);
+
+/** Furthest any bottom-arm vertex travels, in path x units. */
+const growDistances = SYMMETRIC_ARMS.map((pairs) =>
+  Math.max(...pairs.map(([from, to]) => Math.abs(parseFloat(from) - parseFloat(to)))),
+);
+
+const VARIANT_NAMES = ['grow', 'ripple', 'focus', 'sweep', 'spin', 'turn', 'fade'] as const;
+
+type VariantName = (typeof VARIANT_NAMES)[number];
+
+const variants: Record<VariantName, IdentVariant> = {
+  grow: {
+    label: 'Grow',
+    duration: 700,
+    stagger: 180,
+    ring: () => ({
+      keyframes: [
+        { opacity: 0, transform: 'scale(0.85)' },
+        { opacity: 1, transform: 'scale(1)' },
+      ],
+      easing: 'ease-out',
+    }),
+    grow: { rate: 0.05, delay: 300 },
+  },
+  ripple: {
+    label: 'Ripple',
+    duration: 900,
+    stagger: 150,
+    ring: () => ({
+      keyframes: [
+        { opacity: 0, transform: 'scale(0)' },
+        { opacity: 1, transform: 'scale(1)' },
+      ],
+      easing: 'cubic-bezier(0.22, 1, 0.36, 1)',
+    }),
+  },
+  focus: {
+    label: 'Focus',
+    outerFirst: true,
+    duration: 1100,
+    stagger: 200,
+    ring: () => ({
+      keyframes: [
+        { opacity: 0, filter: 'blur(24px)' },
+        { opacity: 1, filter: 'blur(0px)' },
+      ],
+      easing: 'ease-out',
+    }),
+  },
+  sweep: {
+    label: 'Sweep',
+    duration: 1000,
+    stagger: 160,
+    ring: () => ({
+      keyframes: [
+        { opacity: 0, transform: 'rotate(-90deg)' },
+        { opacity: 1, transform: 'rotate(0deg)' },
+      ],
+      easing: 'cubic-bezier(0.22, 1, 0.36, 1)',
+    }),
+  },
+  spin: {
+    label: 'Spin',
+    outerFirst: true,
+    duration: 1200,
+    stagger: 120,
+    ring: (index) => ({
+      keyframes: [
+        { opacity: 0, transform: `scale(4) rotate(${index % 2 ? -270 : 270}deg)` },
+        { opacity: 1, transform: 'scale(1) rotate(0deg)' },
+      ],
+      easing: 'cubic-bezier(0.22, 1, 0.36, 1)',
+    }),
+    grow: { rate: 0.05, delay: 200 },
+  },
+  turn: {
+    label: 'Turn',
+    outerFirst: true,
+    duration: 2000,
+    // Every ring stops at the same moment; inner rings turn further so they still move against each other.
+    stagger: 0,
+    ring: (index) => ({
+      keyframes: [
+        { opacity: 0, offset: 0, transform: `rotate(${(index % 2 ? -1 : 1) * (1080 - index * 180)}deg)` },
+        { opacity: 1, offset: 0.25 },
+        { opacity: 1, offset: 1, transform: 'rotate(0deg)' },
+      ],
+      easing: 'cubic-bezier(0.25, 1, 0.5, 1)',
+    }),
+    grow: { rate: 0.1, delay: 0, finishAt: 0.55 },
+    // The wordmark fades in during the last of the spin (inner ring ~20° from rest with the default 100ms gap).
+    settledAt: 0.6,
+  },
+  fade: {
+    label: 'Fade',
+    duration: 700,
+    stagger: 220,
+    ring: () => ({
+      keyframes: [
+        { opacity: 0, transform: 'scale(0.85)' },
+        { opacity: 1, transform: 'scale(1)' },
+      ],
+      easing: 'ease-out',
+    }),
+  },
+};
+
+const FONT_FAMILY = 'Poiret One';
+
+/** Wordmark size and offset from the mark, in viewBox units (the mark is 256 square). */
+const WORDMARK_SIZE = 150;
+const WORDMARK_X = 216;
+
+type WordmarkMetrics = {
+  /** Baseline that puts the centre of the "c" on the mark's centre. */
+  baseline: number;
+  width: number;
+};
+
+/** Loads Poiret One, then measures the wordmark so layout is final before anything animates. */
+const useWordmarkMetrics = (): WordmarkMetrics | undefined => {
+  const [metrics, setMetrics] = useState<WordmarkMetrics>();
+  useEffect(() => {
+    if (!document.querySelector(`link[href="${FONT_URL}"]`)) {
+      const link = document.createElement('link');
+      link.rel = 'stylesheet';
+      link.href = FONT_URL;
+      document.head.appendChild(link);
+    }
+
+    let cancelled = false;
+    const font = `${WORDMARK_SIZE}px "${FONT_FAMILY}"`;
+    const measure = () => {
+      const context = document.createElement('canvas').getContext('2d');
+      if (cancelled || !context) {
+        return;
+      }
+      // Lists the same fallback as the <text> element, so a failed font load still measures what renders.
+      context.font = `${font}, sans-serif`;
+      const glyph = context.measureText('c');
+      const glyphCentre = (glyph.actualBoundingBoxAscent - glyph.actualBoundingBoxDescent) / 2;
+      setMetrics({ baseline: 128 + glyphCentre, width: context.measureText('composer').width });
+    };
+    // A failed load (offline, blocked) must not stall the ident.
+    void document.fonts.load(font).then(measure, measure);
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  return metrics;
+};
+
+type ComposerIdentProps = {
+  variant: VariantName;
+  size?: number;
+  /** Multiplier on every duration and delay; >1 is slower. */
+  speed?: number;
+  /** Pause between the last ring landing and the wordmark (ms). */
+  wordmarkDelay?: number;
+  wordmark?: boolean;
+};
+
+const ComposerIdent = ({
+  variant,
+  size = 160,
+  speed = 1,
+  wordmarkDelay = 100,
+  wordmark = true,
+}: ComposerIdentProps) => {
+  const metrics = useWordmarkMetrics();
+  const ringRefs = useRef<(SVGGElement | null)[]>([]);
+  const pathRefs = useRef<(SVGPathElement | null)[]>([]);
+  const wordmarkRef = useRef<SVGTextElement>(null);
+
+  useEffect(() => {
+    if (!metrics) {
+      return;
+    }
+
+    const { ring, outerFirst, duration, stagger, grow, settledAt = 1 } = variants[variant];
+    const count = composerRingPaths.length;
+    const animations = ringRefs.current.flatMap((element, index) => {
+      if (!element) {
+        return [];
+      }
+      const order = outerFirst ? count - 1 - index : index;
+      const { keyframes, easing } = ring(index);
+      return [
+        element.animate(keyframes, {
+          duration: duration * speed,
+          delay: order * stagger * speed,
+          easing,
+          fill: 'both',
+        }),
+      ];
+    });
+
+    let ringsEnd = (count - 1) * stagger + duration * settledAt;
+    if (grow) {
+      // Paths carry different x scales, so convert each arm's travel into viewBox units before timing it.
+      const growDurations = pathRefs.current.map((element, index) => {
+        const scaleX = element?.transform.baseVal.consolidate()?.matrix.a ?? 1;
+        return (growDistances[index] * scaleX) / grow.rate;
+      });
+      const longest = Math.max(...growDurations);
+      // Shorter arms start later at the same rate so every arm closes together.
+      const growEnd =
+        grow.finishAt === undefined
+          ? ringsEnd + grow.delay + longest
+          : (count - 1) * stagger + duration * grow.finishAt;
+      pathRefs.current.forEach((element, index) => {
+        if (element) {
+          const growDuration = growDurations[index];
+          animations.push(
+            element.animate(
+              [{ d: `path("${symmetricPaths[index]}")` }, { d: `path("${composerRingPaths[index].d}")` }],
+              {
+                duration: growDuration * speed,
+                delay: (growEnd - growDuration) * speed,
+                easing: 'linear',
+                fill: 'both',
+              },
+            ),
+          );
+        }
+      });
+      ringsEnd = Math.max(ringsEnd, growEnd);
+    }
+
+    if (wordmarkRef.current) {
+      animations.push(
+        wordmarkRef.current.animate([{ opacity: 0 }, { opacity: 1 }], {
+          duration: 1200 * speed,
+          delay: (ringsEnd + wordmarkDelay) * speed,
+          easing: 'ease-in-out',
+          fill: 'both',
+        }),
+      );
+    }
+
+    return () => animations.forEach((animation) => animation.cancel());
+  }, [metrics, variant, speed, wordmarkDelay, wordmark]);
+
+  // The lockup is sized to its final extent up front so nothing reflows while it animates.
+  const width = wordmark && metrics ? WORDMARK_X + metrics.width : 256;
+  return (
+    <svg width={(size * width) / 256} height={size} viewBox={`0 0 ${width} 256`} className='overflow-visible shrink-0'>
+      {composerRingPaths.map(({ transform, fill, d }, index) => (
+        <g
+          key={index}
+          ref={(element) => {
+            ringRefs.current[index] = element;
+          }}
+          style={{ opacity: 0, transformBox: 'view-box', transformOrigin: '128px 128px' }}
+        >
+          <path
+            ref={(element) => {
+              pathRefs.current[index] = element;
+            }}
+            transform={transform}
+            d={d}
+            style={{ fill }}
+          />
+        </g>
+      ))}
+      {wordmark && metrics && (
+        <text
+          ref={wordmarkRef}
+          x={WORDMARK_X}
+          y={metrics.baseline}
+          fill='white'
+          fontFamily={`"${FONT_FAMILY}", sans-serif`}
+          fontSize={WORDMARK_SIZE}
+          style={{ opacity: 0 }}
+        >
+          composer
+        </text>
+      )}
+    </svg>
+  );
+};
+
+type StoryArgs = ComposerIdentProps;
+
+const DefaultStory = (props: StoryArgs) => {
+  const [run, setRun] = useState(0);
+  return (
+    <div className='relative flex justify-center items-center w-full h-dvh overflow-hidden bg-black'>
+      <ComposerIdent key={run} {...props} />
+      <div className='absolute bottom-4 right-4'>
+        <Button.Root onClick={() => setRun((value) => value + 1)}>Replay</Button.Root>
+      </div>
+    </div>
+  );
+};
+
+const GridStory = ({ size = 72, ...props }: Omit<StoryArgs, 'variant'>) => {
+  const [run, setRun] = useState(0);
+  return (
+    <div className='flex flex-col gap-12 p-12 w-full h-dvh overflow-hidden bg-black'>
+      <div>
+        <Button.Root onClick={() => setRun((value) => value + 1)}>Replay</Button.Root>
+      </div>
+      {VARIANT_NAMES.map((variant) => (
+        <div key={variant} className='grid grid-cols-[8rem_1fr] items-center'>
+          <span className={mx('text-sm text-fg-muted')}>{variants[variant].label}</span>
+          <ComposerIdent key={run} {...props} variant={variant} size={size} />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const meta = {
+  title: 'ui/brand/components/ComposerIdent',
+  render: DefaultStory,
+  decorators: [withTheme()],
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+    variant: { control: 'select', options: VARIANT_NAMES },
+    size: { control: { type: 'range', min: 32, max: 320, step: 8 } },
+    speed: { control: { type: 'range', min: 0.25, max: 4, step: 0.25 } },
+    wordmarkDelay: { control: { type: 'range', min: 0, max: 2000, step: 50 } },
+  },
+  args: {
+    variant: 'grow',
+    size: 160,
+    speed: 1,
+    wordmarkDelay: 100,
+    wordmark: true,
+  },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Grow: Story = {};
+
+export const Ripple: Story = { args: { variant: 'ripple' } };
+
+export const Focus: Story = { args: { variant: 'focus' } };
+
+export const Spin: Story = { args: { variant: 'spin' } };
+
+export const Turn: Story = { args: { variant: 'turn' } };
+
+export const Sweep: Story = { args: { variant: 'sweep' } };
+
+export const Fade: Story = { args: { variant: 'fade' } };
+
+export const All: Story = {
+  render: (args: StoryArgs) => <GridStory {...args} size={72} />,
+};