@dxos/react-ui-canvas 0.13.0 → 0.14.0

package/src/components/PartEditor/PartEditor.tsx

@@ -19,7 +19,7 @@ import type * as Util from '@dxos/react-ui/Util';
 import { createBasicExtensions, createThemeExtensions } from '@dxos/ui-editor';
 import { mx } from '@dxos/ui-theme';
 
-import { type PartEditing, type PartKey, isMultiline } from '../../utils/parts.ts';
+import { type PartEditing, type PartKey } from '../../utils/parts.ts';
 
 export type TextPartProps = Util.ThemedClassName<
   PropsWithChildren<{
@@ -36,7 +36,8 @@ export const TextPart = ({ classNames, part, text, editing, children }: TextPart
     <PartEditor classNames={classNames} part={part} text={text} editing={editing} />
   ) : (
     <div className={mx(classNames)} data-part={part}>
-      {children}
+      {/* The text's own box, which a part's layout may pad (its line boxes, not the part's frame). */}
+      <span className='inline-block'>{children}</span>
     </div>
   );
 
@@ -46,7 +47,7 @@ const stop = (event: React.SyntheticEvent) => event.stopPropagation();
 
 const PartEditor = ({ classNames, part, text, editing }: PartEditorProps) => {
   const themeMode = Hooks.useThemeMode();
-  const multiline = isMultiline(part);
+  const multiline = editing.multiline;
   // Commit or cancel once: the editor unmounts on either, and its focus loss must not commit again.
   const done = useRef(false);
   const finish = (action: () => void) => {

package/src/components/Properties/AlignField.tsx

@@ -0,0 +1,117 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import type * as SchemaAST from 'effect/SchemaAST';
+import React from 'react';
+
+import { Form, type FormFieldRenderer, useFormFieldState } from '@dxos/react-ui-form';
+import * as Layout from '@dxos/react-ui/Layout';
+import * as ToggleGroup from '@dxos/react-ui/ToggleGroup';
+
+import { type HorizontalAlign, NodeStyle, type VerticalAlign } from '../../model/types.ts';
+
+export type IconToggleOption<T extends string> = { value: T; icon: string; label: string };
+
+export type IconToggleProps<T extends string> = {
+  label: string;
+  options: readonly IconToggleOption<T>[];
+  value?: T;
+  readonly?: boolean;
+  onValueChange: (value: T) => void;
+};
+
+/** One choice of a few, each an icon: a single-select toggle group whose pressed item is the value. */
+export const IconToggle = <T extends string>({
+  label,
+  options,
+  value,
+  readonly,
+  onValueChange,
+}: IconToggleProps<T>) => (
+  <ToggleGroup.Root
+    type='single'
+    value={value ?? ''}
+    aria-label={label}
+    onValueChange={(next) => {
+      // Pressing the pressed item releases it in the group; the value stays what it was.
+      const option = options.find((candidate) => candidate.value === next);
+      if (option) {
+        onValueChange(option.value);
+      }
+    }}
+  >
+    {options.map((option) => (
+      <ToggleGroup.Item
+        key={option.value}
+        value={option.value}
+        variant='ghost'
+        icon={option.icon}
+        iconOnly
+        label={option.label}
+        disabled={readonly}
+        data-testid={`align-${option.value}`}
+      />
+    ))}
+  </ToggleGroup.Root>
+);
+
+const HORIZONTAL: readonly IconToggleOption<HorizontalAlign>[] = [
+  { value: 'left', icon: 'ph--align-left-simple--regular', label: 'Align left' },
+  { value: 'center', icon: 'ph--align-center-vertical-simple--regular', label: 'Align centre' },
+  { value: 'right', icon: 'ph--align-right-simple--regular', label: 'Align right' },
+];
+
+const VERTICAL: readonly IconToggleOption<VerticalAlign>[] = [
+  { value: 'top', icon: 'ph--align-top-simple--regular', label: 'Align top' },
+  { value: 'middle', icon: 'ph--align-center-horizontal-simple--regular', label: 'Align middle' },
+  { value: 'bottom', icon: 'ph--align-bottom-simple--regular', label: 'Align bottom' },
+];
+
+/**
+ * The text alignment, rendered at `style.alignHorizontal`: the horizontal and vertical toggles side by side in one
+ * row (`style.alignVertical` is hidden). Each writes only its own path, so an edit across a selection leaves each
+ * element's other style values.
+ */
+export const AlignField: FormFieldRenderer = ({ jsonPath, readonly }) => {
+  const stylePath = (jsonPath ?? 'style.alignHorizontal').split('.').slice(0, -1);
+  const horizontalField = useFormFieldState('AlignField', [...stylePath, 'alignHorizontal']);
+  const verticalField = useFormFieldState('AlignField', [...stylePath, 'alignVertical']);
+  const horizontal = HORIZONTAL.find((option) => option.value === horizontalField.getValue())?.value;
+  const vertical = VERTICAL.find((option) => option.value === verticalField.getValue())?.value;
+  // A pick is a commit: a toggle never blurs, so it commits itself.
+  const pick = (field: typeof horizontalField, ast: SchemaAST.AST, value: string) => {
+    field.onValueChange(ast, value);
+    field.onBlur();
+  };
+  return (
+    <Layout.Container
+      layout='row'
+      gutter='inherit'
+      align='start'
+      gap='md'
+      columns='repeat(2, minmax(0, 1fr))'
+      // The properties panel is narrow, and the two toggles fit side by side there, so the row never stacks.
+      fixed
+    >
+      <Form.Field path={jsonPath} label='Horizontal' readonly={readonly}>
+        <IconToggle
+          label='Horizontal alignment'
+          options={HORIZONTAL}
+          value={horizontal}
+          readonly={!!readonly}
+          onValueChange={(next) => pick(horizontalField, NodeStyle.fields.alignHorizontal.ast, next)}
+        />
+      </Form.Field>
+      <Form.Field path={[...stylePath, 'alignVertical'].join('.')} label='Vertical' readonly={readonly}>
+        <IconToggle
+          label='Vertical alignment'
+          options={VERTICAL}
+          value={vertical}
+          readonly={!!readonly}
+          onValueChange={(next) => pick(verticalField, NodeStyle.fields.alignVertical.ast, next)}
+        />
+      </Form.Field>
+    </Layout.Container>
+  );
+};

package/src/components/Properties/ClassField.tsx

@@ -0,0 +1,44 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React, { createContext, useContext, useMemo } from 'react';
+
+import { Form, type FormFieldRenderer, SelectControl } from '@dxos/react-ui-form';
+
+import { type StyleMap } from '../../model/types.ts';
+
+/** The drawing's style classes, for the class field; unset when the host offers none, so the field is hidden. */
+export const StyleClassesContext = createContext<StyleMap | undefined>(undefined);
+
+/** The select's value for no class: a select item needs a non-empty value. */
+const NO_CLASS = '-';
+
+/** An element's style class: one of the drawing's, or none, leaving only its own style. */
+export const ClassField: FormFieldRenderer = ({ type, label, jsonPath, readonly, getValue, onValueChange, onBlur }) => {
+  const styles = useContext(StyleClassesContext);
+  const items = useMemo(
+    () => [
+      { value: NO_CLASS, label: 'None' },
+      ...Object.values(styles ?? {})
+        .map((styleClass) => ({ value: styleClass.id, label: styleClass.name }))
+        .sort((left, right) => left.label.localeCompare(right.label)),
+    ],
+    [styles],
+  );
+  const value: unknown = getValue();
+  return (
+    <Form.Field path={jsonPath} label={label} readonly={readonly}>
+      <SelectControl
+        items={items}
+        value={typeof value === 'string' ? value : NO_CLASS}
+        readonly={readonly}
+        onValueChange={(next) => {
+          // A choice is a commit: the select never blurs, so it commits itself.
+          onValueChange(type, next === NO_CLASS ? undefined : next);
+          onBlur();
+        }}
+      />
+    </Form.Field>
+  );
+};

package/src/components/Properties/FontField.tsx

@@ -0,0 +1,73 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React from 'react';
+
+import { Form, type FormFieldRenderer, SelectControl, useFormFieldState } from '@dxos/react-ui-form';
+import * as Input from '@dxos/react-ui/Input';
+import * as Layout from '@dxos/react-ui/Layout';
+
+import { FONT_FAMILIES, type FontFamily, NodeStyle } from '../../model/types.ts';
+
+const FAMILY_LABELS: Record<FontFamily, string> = { default: 'Default', monospace: 'Monospace' };
+
+const FAMILIES = FONT_FAMILIES.map((value) => ({ value, label: FAMILY_LABELS[value] }));
+
+/** The editor's readable range; stored sizes outside it are kept, not checked. */
+const FONT_SIZE = { min: 8, max: 80, step: 1 };
+
+/**
+ * The text face and size, rendered at `style.fontFamily`: the two side by side in one row (`style.fontSize` is
+ * hidden). Each writes only its own path, so an edit across a selection leaves each element's other style values.
+ */
+export const FontField: FormFieldRenderer = ({ jsonPath, readonly }) => {
+  const stylePath = (jsonPath ?? 'style.fontFamily').split('.').slice(0, -1);
+  const familyField = useFormFieldState('FontField', [...stylePath, 'fontFamily']);
+  const sizeField = useFormFieldState('FontField', [...stylePath, 'fontSize']);
+  const family: unknown = familyField.getValue();
+  const size: unknown = sizeField.getValue();
+  return (
+    <Layout.Container
+      layout='row'
+      gutter='inherit'
+      align='start'
+      gap='md'
+      columns='repeat(2, minmax(0, 1fr))'
+      // The properties panel is narrow, and the two controls fit side by side there, so the row never stacks.
+      fixed
+    >
+      <Form.Field path={jsonPath} label='Font' readonly={readonly}>
+        <SelectControl
+          items={FAMILIES}
+          value={typeof family === 'string' ? family : 'default'}
+          readonly={readonly}
+          onValueChange={(next) => {
+            const fontFamily = FONT_FAMILIES.find((family) => family === next);
+            // The body face is the default, so it is stored as unset; a pick never blurs, so it commits itself.
+            familyField.onValueChange(
+              NodeStyle.fields.fontFamily.ast,
+              fontFamily === 'default' ? undefined : fontFamily,
+            );
+            familyField.onBlur();
+          }}
+        />
+      </Form.Field>
+      <Form.Field path={[...stylePath, 'fontSize'].join('.')} label='Font size' readonly={readonly}>
+        <Input.Number
+          disabled={!!readonly}
+          {...FONT_SIZE}
+          formatOptions={{ maximumFractionDigits: 0 }}
+          value={typeof size === 'number' ? String(size) : ''}
+          onValueChange={(_, fontSize) => {
+            if (!Number.isNaN(fontSize)) {
+              // A stepper press never blurs, so each value commits itself.
+              sizeField.onValueChange(NodeStyle.fields.fontSize.ast, fontSize);
+              sizeField.onBlur();
+            }
+          }}
+        />
+      </Form.Field>
+    </Layout.Container>
+  );
+};

package/src/components/Properties/LayerField.tsx

@@ -0,0 +1,61 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import * as Schema from 'effect/Schema';
+import React, { createContext, useContext, useMemo } from 'react';
+
+import { Form, type FormFieldRenderer, SelectControl, useFormFieldState } from '@dxos/react-ui-form';
+import * as Layout from '@dxos/react-ui/Layout';
+
+import { type Layer } from '../../model/types.ts';
+import { ClassField, StyleClassesContext } from './ClassField.tsx';
+
+/** The scene's layers, bottom first, for the layer field. */
+export const LayersContext = createContext<readonly Layer[]>([]);
+
+/** The layer an element is on: one of the scene's, listed top first as they stack. */
+export const LayerField: FormFieldRenderer = ({ type, label, jsonPath, readonly, getValue, onValueChange, onBlur }) => {
+  const layers = useContext(LayersContext);
+  const items = useMemo(() => [...layers].reverse().map((layer) => ({ value: layer.id, label: layer.name })), [layers]);
+  const value: unknown = getValue();
+  return (
+    <Form.Field path={jsonPath} label={label} readonly={readonly}>
+      <SelectControl
+        items={items}
+        value={typeof value === 'string' ? value : undefined}
+        readonly={readonly}
+        onValueChange={(next) => {
+          // A choice is a commit: the select never blurs, so it commits itself.
+          onValueChange(type, next);
+          onBlur();
+        }}
+      />
+    </Form.Field>
+  );
+};
+
+/**
+ * The layer and the style class side by side in one row, rendered at `layer` (`class` is hidden); the class select
+ * only while the host offers classes.
+ */
+export const LayerClassField: FormFieldRenderer = (props) => {
+  const styles = useContext(StyleClassesContext);
+  const classField = useFormFieldState('LayerClassField', ['class']);
+  return (
+    <Layout.Container
+      layout='row'
+      gutter='inherit'
+      align='start'
+      gap='md'
+      columns='repeat(2, minmax(0, 1fr))'
+      // The properties panel is narrow, and the two selects fit side by side there, so the row never stacks.
+      fixed
+    >
+      <LayerField {...props} />
+      {styles && (
+        <ClassField {...classField} type={Schema.String.ast} label='Class' jsonPath='class' readonly={props.readonly} />
+      )}
+    </Layout.Container>
+  );
+};

package/src/components/Properties/Properties.stories.tsx

@@ -0,0 +1,113 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { useAtomValue } from '@effect/atom-react/Hooks';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useLayoutEffect, useMemo } from 'react';
+import { expect, within } from 'storybook/test';
+
+import { Panel } from '@dxos/react-ui';
+import { translations as formTranslations } from '@dxos/react-ui-form/translations';
+import { JsonHighlighter } from '@dxos/react-ui-syntax-highlighter';
+import { withLayout, withRegistry, withTheme } from '@dxos/react-ui/testing';
+import { translations as uiTranslations } from '@dxos/react-ui/translations';
+
+import { useRegistry, useSceneProjection } from '../../hooks/index.ts';
+import { createSceneViewAtoms } from '../../model/atoms.ts';
+import { createMemoryStore } from '../../model/store.ts';
+import { type ElementId, type Layer, type Scene, getElement } from '../../model/types.ts';
+import { SceneBuilder } from '../../utils/builder.ts';
+import { between } from '../../utils/order.ts';
+import { Properties } from './Properties.tsx';
+
+const box = (x: number, y = 0) => ({ x, y, width: 256, height: 128 });
+
+/** Three layers, bottom first; `a` and the link are on the diagram layer, `n` on notes. */
+const LAYERS: Layer[] = (() => {
+  const background: Layer = { id: 'background', name: 'Background', z: between() };
+  const notes: Layer = { id: 'notes', name: 'Notes', z: between(background.z) };
+  const diagram: Layer = { id: 'diagram', name: 'Diagram', z: between(notes.z) };
+  return [background, notes, diagram];
+})();
+
+const SCENE: Scene = (() => {
+  const {
+    scenes: [scene],
+  } = SceneBuilder.scene('root', [
+    SceneBuilder.rect('a', box(0)).properties({ label: 'Rect', layer: 'diagram', style: { hue: 'teal' } }),
+    SceneBuilder.rect('b', box(400)).properties({ label: 'Other', layer: 'background' }),
+    SceneBuilder.note('n', box(0, 200)).properties({ layer: 'notes' }),
+    SceneBuilder.link('curve', 'a', 'b')
+      .id('ab')
+      .properties({ layer: 'diagram', style: { lineStyle: 'dashed' } }),
+  ]).build();
+  return { ...scene, layers: Object.fromEntries(LAYERS.map((layer) => [layer.id, layer])) };
+})();
+
+type StoryArgs = {
+  /** The elements the panel edits. */
+  select: ElementId[];
+};
+
+/** The panel alone, over an in-memory scene and a fixed selection: no canvas, so every field can be read in full. */
+const DefaultStory = ({ select }: StoryArgs) => {
+  const registry = useRegistry();
+  const store = useMemo(() => createMemoryStore([SCENE]), []);
+  const atoms = useMemo(() => createSceneViewAtoms(SCENE.id), []);
+  const projection = useSceneProjection({ store, atoms });
+  useLayoutEffect(() => {
+    registry.set(atoms.selection, new Set(select));
+  }, [registry, atoms, select]);
+  // The selection as the model holds it, beside the panel editing it, so every edit shows what it wrote.
+  const scene = useAtomValue(projection.scene);
+  const styles = useAtomValue(store.styles);
+  const selected = select.flatMap((id) => getElement(scene, id) ?? []);
+  return (
+    <Panel.Root>
+      <Panel.Body classNames='grid grid-cols-[20rem_1fr] gap-3'>
+        <Properties projection={projection} atoms={atoms} styles={store.styles} />
+        <JsonHighlighter data={{ selected, styles }} classNames='text-sm' />
+      </Panel.Body>
+    </Panel.Root>
+  );
+};
+
+const meta: Meta<StoryArgs> = {
+  title: 'ui/react-ui-canvas/Properties',
+  render: DefaultStory,
+  decorators: [withRegistry, withTheme(), withLayout({ layout: 'column', classNames: 'w-[50rem]' })],
+  args: { select: ['a'] },
+  parameters: { translations: [...uiTranslations, ...formTranslations] },
+};
+
+export default meta;
+
+type Story = StoryObj<StoryArgs>;
+
+/** A shape: its layer, class and the whole style (the full colour grid, line style and text alignment). */
+export const Default: Story = {};
+
+/** A link: the common style base alone (the outline row and line style), its layer and class. */
+export const Link: Story = { args: { select: ['ab'] } };
+
+/** A shape and a link: only what both declare, the style narrowed to its common base. */
+export const Mixed: Story = { args: { select: ['a', 'ab'] } };
+
+/** A note on its own layer. */
+export const Note: Story = { args: { select: ['n'] } };
+
+/** The layer selector lists the scene's layers top first and shows the element's own. */
+export const Test: Story = {
+  args: { select: ['n'] },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    // 1. The panel renders the selection's fields.
+    await expect(await canvas.findByTestId('properties')).toBeInTheDocument();
+    // 2. The layer field shows the note's layer.
+    const layer = await canvas.findByRole('combobox', { name: 'Layer' });
+    await expect(layer).toHaveTextContent('Notes');
+    // 3. The font row shows the face, unset reading as the body face.
+    await expect(await canvas.findByRole('combobox', { name: 'Font' })).toHaveTextContent('Default');
+  },
+};