@dxos/react-ui-canvas 0.13.0 → 0.14.0

package/src/components/Properties/Properties.tsx

@@ -10,39 +10,63 @@
 //
 
 import { useAtomValue } from '@effect/atom-react/Hooks';
+import type * as Atom from 'effect/reactivity/Atom';
 import type * as Schema from 'effect/Schema';
 import React, { useCallback, useMemo } from 'react';
 
+import { type Database } from '@dxos/echo';
 import {
   Form,
   type FormFieldMap,
   type FormFieldOverride,
   type FormFieldRenderer,
   type FormUpdateMeta,
+  type RefFieldDataProps,
 } from '@dxos/react-ui-form';
+import * as Button from '@dxos/react-ui/Button';
 import * as Input from '@dxos/react-ui/Input';
+import * as Panel from '@dxos/react-ui/Panel';
+import * as Toolbar from '@dxos/react-ui/Toolbar';
 import type * as Util from '@dxos/react-ui/Util';
-import { mx } from '@dxos/ui-theme';
 
+import { useRegistry } from '../../hooks/index.ts';
+import { SCENE_OVERLAY_ATTRIBUTE } from '../../hooks/useWheel.ts';
 import { type SceneViewAtoms } from '../../model/atoms.ts';
 import { nodeDef } from '../../model/node-def.ts';
 import { type Projection } from '../../model/projection.ts';
 import { type NodeRegistry, defaultNodeRegistry } from '../../model/registry.ts';
+import { NO_STYLES } from '../../model/store.ts';
 import {
+  BaseNode,
   CurveLink,
   type Element,
+  type Layer,
   LineLink,
   type LinkType,
-  NodeBase,
+  type Node,
+  type NodeStyle,
   SmartLink,
   SplineLink,
+  type StyleClass,
+  type StyleMap,
   getElement,
+  isFrameNode,
   isLink,
+  isNoteNode,
+  showsContents,
 } from '../../model/types.ts';
+import { elementLayer, sceneLayers } from '../../utils/layers.ts';
 import { MAX_PORTS_PER_SIDE, portsPerSideOf } from '../../utils/ports.ts';
 import { commonSchema, mergeValues, patchValues } from '../../utils/properties.ts';
-import { resolveStyle } from '../../utils/style.ts';
-import { StyleGridField } from './StyleGrid.tsx';
+import { type SceneOption } from '../../utils/scenes.ts';
+import { flipLink } from '../../utils/shapes.ts';
+import { classedLink, classedNode, resolveStyle, splitClassEdit } from '../../utils/style.ts';
+import { AlignField } from './AlignField.tsx';
+import { StyleClassesContext } from './ClassField.tsx';
+import { FontField } from './FontField.tsx';
+import { LayerClassField, LayersContext } from './LayerField.tsx';
+import { SceneField, SceneOptionsContext } from './SceneField.tsx';
+import { OutlineStyleField, StyleGridField } from './StyleGrid.tsx';
 
 /** Identity, ordering and geometry lists are the surface's, not the user's. */
 const HIDDEN = ['id', 'type', 'z', 'ports', 'points', 'source', 'target'];
@@ -52,7 +76,7 @@ const HIDDEN = ['id', 'type', 'z', 'ports', 'points', 'source', 'target'];
  * beats the generic array field's row of inputs. Blank lines survive while typing (they round-trip
  * through split/join) and are dropped on blur, when the form saves.
  */
-const LinesField: FormFieldRenderer = ({ type, label, jsonPath, readonly, getValue, onValueChange, onBlur }) => {
+export const LinesField: FormFieldRenderer = ({ type, label, jsonPath, readonly, getValue, onValueChange, onBlur }) => {
   const lines: string[] = getValue() ?? [];
   return (
     <Form.Field path={jsonPath} label={label} readonly={readonly}>
@@ -74,11 +98,13 @@ const LinesField: FormFieldRenderer = ({ type, label, jsonPath, readonly, getVal
   );
 };
 
-/** Renderers by field path for the built-in types' list fields and the style grid; a host may pass its own. */
+/** Renderers by field path the panel always uses (the style grid); node types add their own (`NodeDef.fields`). */
 export const DEFAULT_FIELDS: FormFieldMap = {
-  'attributes': LinesField,
-  'methods': LinesField,
   'style.hue': StyleGridField,
+  'style.alignHorizontal': AlignField,
+  'style.fontFamily': FontField,
+  'scene': SceneField,
+  'layer': LayerClassField,
 };
 
 const LINK_SCHEMAS: Record<LinkType, Schema.Codec<any, any>> = {
@@ -88,18 +114,35 @@ const LINK_SCHEMAS: Record<LinkType, Schema.Codec<any, any>> = {
   smart: SmartLink,
 };
 
-/** An element's own schema; a node type the registry does not know gets the shared fields. */
+/** An element's own schema; a type the registry does not know gets the core base's (`BaseNode`, or a line). */
 const schemaOf = (nodes: NodeRegistry, element: Element): Schema.Codec<any, any> =>
-  isLink(element) ? LINK_SCHEMAS[element.type] : (nodeDef(nodes, element)?.schema ?? NodeBase);
+  isLink(element) ? (LINK_SCHEMAS[element.type] ?? LineLink) : (nodeDef(nodes, element)?.schema ?? BaseNode);
+
+/** Where a type places its text unless styled otherwise: a note from the top left, a label in the middle. */
+const textAlign = (node: Node): Pick<NodeStyle, 'alignHorizontal' | 'alignVertical'> =>
+  isNoteNode(node)
+    ? { alignHorizontal: 'left', alignVertical: 'top' }
+    : { alignHorizontal: 'center', alignVertical: 'middle' };
 
 /**
- * What the form shows for an element: what the frame draws, so an unset fill or border reads as on and an
- * unset port count as the type's.
+ * What the form shows for an element: what the view draws, so its class's look, an unset fill, border or Show
+ * contents read as they look and an unset port count as the type's.
  */
-const formValues = (nodes: NodeRegistry, element: Element): Record<string, unknown> =>
+const formValues = (
+  nodes: NodeRegistry,
+  element: Element,
+  styles: StyleMap,
+  layers: readonly Layer[],
+): Record<string, unknown> =>
   isLink(element)
-    ? element
-    : { ...element, style: resolveStyle(element.style), portsPerSide: portsPerSideOf(nodes, element) };
+    ? { ...element, layer: elementLayer(element, layers), style: classedLink(element, styles).style }
+    : {
+        ...element,
+        layer: elementLayer(element, layers),
+        style: { ...textAlign(element), ...resolveStyle(classedNode(element, styles).style) },
+        portsPerSide: portsPerSideOf(nodes, element),
+        ...(isFrameNode(element) ? { contents: showsContents(element) } : {}),
+      };
 
 /**
  * How the panel presents fields. Ranges are the editor's, not the model's: a check on the stored schema would
@@ -109,8 +152,11 @@ const formValues = (nodes: NodeRegistry, element: Element): Record<string, unkno
 const FIELD_OVERRIDES: Record<string, FormFieldOverride> = {
   'style.hue': { label: 'Style' },
   'style.tone': { hidden: true },
-  'style.fontSize': { min: 8, max: 80, step: 1 },
+  'style.alignVertical': { hidden: true },
+  'style.fontSize': { hidden: true },
   'portsPerSide': { min: 1, max: MAX_PORTS_PER_SIDE, step: 1 },
+  'scene': { label: 'Scene' },
+  'layer': { label: 'Layer' },
 };
 
 const plural = (count: number, noun: string) => `${count} ${noun}${count === 1 ? '' : 's'}`;
@@ -129,6 +175,20 @@ export type PropertiesProps = Util.ThemedClassName<{
   fields?: FormFieldMap;
   /** Show the fields without letting them change; also implied by a projection that cannot `update`. */
   readonly?: boolean;
+  /** The database a reference field picks from; without it reference fields are read-only. */
+  db?: Database.Database;
+  /** Narrows a reference field's candidates (e.g. to objects of one kind). */
+  getOptions?: RefFieldDataProps['getOptions'];
+  /** A host's per-selection field overrides (e.g. a field it allows only in some states), over the panel's own. */
+  overrides?: (elements: readonly Element[]) => Record<string, FormFieldOverride>;
+  /** The scenes a scene shape may open (`sceneOptions`); without them its scene is not editable here. */
+  sceneOptions?: readonly SceneOption[];
+  /** The drawing's style classes (`SceneStore.styles`); without them elements take no class. */
+  styles?: Atom.Writable<StyleMap>;
+  /** Moves the selection into a new scene (`groupIntoScene`); offered for a selection of several elements. */
+  onGroup?: () => void;
+  /** Whether the panel is docked beside the canvas. */
+  docked?: boolean;
 }>;
 
 export const Properties = ({
@@ -136,83 +196,203 @@ export const Properties = ({
   projection,
   atoms,
   nodes = defaultNodeRegistry,
-  fields = DEFAULT_FIELDS,
+  fields,
   readonly: readonlyProp = false,
+  db,
+  getOptions,
+  overrides,
+  sceneOptions,
+  styles,
+  onGroup,
+  docked = false,
 }: PropertiesProps) => {
+  const registry = useRegistry();
   const scene = useAtomValue(projection.scene);
   const selection = useAtomValue(atoms.selection);
   const elements = useMemo(() => [...selection].flatMap((id) => getElement(scene, id) ?? []), [scene, selection]);
   const readonly = readonlyProp || !projection.capabilities.update;
+  const styleMap = useAtomValue(styles ?? NO_STYLES);
+  const layers = useMemo(() => sceneLayers(scene), [scene]);
 
   // Keyed by the selected types, so the schema (and the form built on it) holds while values change under it.
   const typesKey = [...new Set(elements.map((element) => element.type))].sort().join();
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const schema = useMemo(() => commonSchema(elements.map((element) => schemaOf(nodes, element))), [typesKey, nodes]);
   const { values, fieldOverrides } = useMemo(() => {
-    const shown = elements.map((element) => formValues(nodes, element));
+    const shown = elements.map((element) => formValues(nodes, element, styleMap, layers));
     const { values, mixed } = mergeValues(shown, Object.keys(shown[0] ?? {}));
     // A value the elements disagree on shows as indeterminate until it is edited, then applies to all of them.
-    const fieldOverrides: Record<string, FormFieldOverride> = { ...FIELD_OVERRIDES };
+    const fieldOverrides: Record<string, FormFieldOverride> = {
+      ...FIELD_OVERRIDES,
+      ...(sceneOptions ? {} : { scene: { hidden: true } }),
+      // The class is edited in the layer's row (`LayerClassField`).
+      class: { hidden: true },
+      ...overrides?.(elements),
+    };
     for (const path of mixed) {
       fieldOverrides[path] = { ...fieldOverrides[path], indeterminate: true };
     }
     return { values, fieldOverrides };
-  }, [elements, nodes]);
+  }, [elements, nodes, overrides, sceneOptions, styles, styleMap, layers]);
 
   const onSave = useCallback(
     (values: Record<string, unknown>, { changed }: FormUpdateMeta<Record<string, unknown>>) => {
       const paths = Object.keys(changed).filter((path) => changed[path as keyof typeof changed]);
-      projection.apply({
-        kind: 'batch',
-        intents: elements.map((element) => ({
-          kind: 'update' as const,
-          id: element.id,
-          values: patchValues(formValues(nodes, element), values, paths),
-        })),
+      // A classed element's look is its class's: an edit of it restyles the class, and so every element deriving it.
+      const classes: Record<string, StyleClass> = {};
+      const intents = elements.map((element) => {
+        const shown = formValues(nodes, element, styleMap, layers);
+        const patch = patchValues(shown, values, paths);
+        const styleClass = styles && element.class ? (classes[element.class] ?? styleMap[element.class]) : undefined;
+        // Taking a class drops the element's own look, so it derives the class's whole rather than in part.
+        if (typeof patch.class === 'string') {
+          return { kind: 'update' as const, id: element.id, values: { ...patch, style: undefined } };
+        }
+        if (!styleClass || !('style' in patch)) {
+          return { kind: 'update' as const, id: element.id, values: patch };
+        }
+        // A link's look is the common base of its class's style; a node's, the whole of it.
+        const look = isLink(element)
+          ? classedLink(element, styleMap).style
+          : resolveStyle(classedNode(element, styleMap).style);
+        const split = splitClassEdit(look, patch.style, styleClass.style ?? {}, element.style);
+        classes[styleClass.id] = { ...styleClass, style: split.classLook };
+        return { kind: 'update' as const, id: element.id, values: { ...patch, style: split.own } };
       });
+      if (styles && Object.keys(classes).length > 0) {
+        registry.set(styles, { ...styleMap, ...classes });
+      }
+      projection.apply({ kind: 'batch', intents });
     },
-    [projection, elements, nodes],
+    [projection, elements, nodes, styles, styleMap, layers, registry],
+  );
+
+  // A new class takes the selected element's look, and the element then follows it rather than carrying its own.
+  const single = elements.length === 1 ? elements[0] : undefined;
+  const onCreateClass = useCallback(() => {
+    if (!styles || !single) {
+      return;
+    }
+    const id = `class-${crypto.randomUUID()}`;
+    const name = `Class ${Object.keys(styleMap).length + 1}`;
+    const style = isLink(single) ? classedLink(single, styleMap).style : classedNode(single, styleMap).style;
+    const styleClass: StyleClass = { id, name, ...(style ? { style } : {}) };
+    registry.set(styles, { ...styleMap, [id]: styleClass });
+    projection.apply({ kind: 'update', id: single.id, values: { class: id, style: undefined } });
+  }, [styles, single, styleMap, registry, projection]);
+
+  // Reverses every selected link (source and target swap; an arrow comes to point the other way), as one batch.
+  const links = useMemo(() => elements.filter(isLink), [elements]);
+  const onFlip = useCallback(() => {
+    projection.apply({
+      kind: 'batch',
+      intents: links.map((link) => ({ kind: 'update' as const, id: link.id, values: flipLink(link) })),
+    });
+    // A spline's control points run the other way after a flip, so a selected point's index names another one.
+    registry.set(atoms.point, undefined);
+  }, [projection, links, registry, atoms.point]);
+
+  // The selected node types' own renderers over the panel's; a host's `fields` win over both. One style picker for
+  // every kind: its fill rows only when every element is a node, since a link has a colour but no fill.
+  const fieldMap = useMemo(
+    () => ({
+      ...DEFAULT_FIELDS,
+      ...(elements.some(isLink) ? { 'style.hue': OutlineStyleField } : {}),
+      ...Object.assign(
+        {},
+        ...elements.map((element) => (isLink(element) ? {} : (nodeDef(nodes, element)?.fields ?? {}))),
+      ),
+      ...fields,
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [typesKey, nodes, fields],
   );
 
   if (elements.length === 0) {
     return (
-      <div className={mx('flex flex-col overflow-hidden', classNames)} data-testid='properties'>
-        <div className='p-2 text-sm text-fg-muted'>Select a node or link to edit its properties.</div>
-      </div>
+      <Panel.Root classNames={classNames} data-testid='properties' {...{ [SCENE_OVERLAY_ATTRIBUTE]: true }}>
+        <Panel.Body>
+          <p className='p-2 text-sm text-fg-muted'>Select a node or link to edit its properties.</p>
+        </Panel.Body>
+      </Panel.Root>
     );
   }
 
   const summary = elements.length > 1 && `${describeSelection(elements)}${schema ? '' : ' — no shared properties'}`;
   return (
-    <div className={mx('flex flex-col overflow-hidden', classNames)} data-testid='properties'>
-      {schema ? (
-        <Form.Root
-          key={[...selection].join()}
-          schema={schema}
-          values={values}
-          fieldOverrides={fieldOverrides}
-          fieldMap={fields}
-          readonly={readonly}
-          autoSave
-          onSave={onSave}
-        >
-          {/* Scrolling: the panel is as tall as its host, and a long form (a class with many members) scrolls inside it. */}
-          <Form.Viewport scroll>
-            <Form.Content>
-              <Form.Fields exclude={HIDDEN} />
-              {summary && (
-                <p className='text-sm text-fg-muted' data-testid='properties-summary'>
-                  {summary}
-                </p>
-              )}
-            </Form.Content>
-          </Form.Viewport>
-        </Form.Root>
-      ) : (
-        <p className='p-2 text-sm text-fg-muted' data-testid='properties-summary'>
+    <Panel.Root classNames={classNames} data-testid='properties' {...{ [SCENE_OVERLAY_ATTRIBUTE]: true }}>
+      <Panel.Header asChild>
+        <Toolbar.Root data-testid='properties-toolbar'>
+          {onGroup && elements.length > 1 && elements.some((element) => !isLink(element)) && (
+            <Button.Root
+              variant='ghost'
+              iconOnly
+              icon='ph--frame-corners--regular'
+              label='New scene from selection'
+              disabled={readonly}
+              data-testid='properties-group'
+              onClick={onGroup}
+            />
+          )}
+          {styles && single && (
+            <Button.Root
+              variant='ghost'
+              iconOnly
+              icon='ph--swatches--regular'
+              label='New class from selection'
+              disabled={readonly}
+              data-testid='properties-new-class'
+              onClick={onCreateClass}
+            />
+          )}
+          {links.length > 0 && links.length === elements.length && (
+            <Button.Root
+              variant='ghost'
+              iconOnly
+              icon='ph--arrows-left-right--regular'
+              label='Flip direction'
+              disabled={readonly}
+              data-testid='properties-flip'
+              onClick={onFlip}
+            />
+          )}
+        </Toolbar.Root>
+      </Panel.Header>
+      <Panel.Body>
+        {schema && (
+          <LayersContext.Provider value={layers}>
+            <StyleClassesContext.Provider value={styles ? styleMap : undefined}>
+              <SceneOptionsContext.Provider value={sceneOptions ?? []}>
+                <Form.Root
+                  key={[...selection].join()}
+                  schema={schema}
+                  values={values}
+                  fieldOverrides={fieldOverrides}
+                  fieldMap={fieldMap}
+                  db={db}
+                  getOptions={getOptions}
+                  readonly={readonly}
+                  autoSave
+                  onSave={onSave}
+                >
+                  {/* Floating, the panel is as tall as its host and a long form scrolls inside it; docked, the dock scrolls
+                      the panels together, so the form keeps no scroll of its own (it would hold the wheel). */}
+                  <Form.Viewport scroll={!docked}>
+                    <Form.Content>
+                      <Form.Fields exclude={HIDDEN} />
+                    </Form.Content>
+                  </Form.Viewport>
+                </Form.Root>
+              </SceneOptionsContext.Provider>
+            </StyleClassesContext.Provider>
+          </LayersContext.Provider>
+        )}
+      </Panel.Body>
+      <Panel.Footer classNames='text-center'>
+        <span className='text-sm text-fg-muted' data-testid='properties-summary'>
           {summary}
-        </p>
-      )}
-    </div>
+        </span>
+      </Panel.Footer>
+    </Panel.Root>
   );
 };

package/src/components/Properties/SceneField.tsx

@@ -0,0 +1,22 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React, { createContext, useContext } from 'react';
+
+import { Form, type FormFieldRenderer, SelectField } from '@dxos/react-ui-form';
+
+import { type SceneOption } from '../../utils/scenes.ts';
+
+/** The scenes a selected scene shape may open, as the panel's host lists them (`sceneOptions`). */
+export const SceneOptionsContext = createContext<readonly SceneOption[]>([]);
+
+/** A scene shape's `scene`: which scene of this drawing it opens, so several shapes may open one scene. */
+export const SceneField: FormFieldRenderer = (props) => {
+  const options = useContext(SceneOptionsContext);
+  return (
+    <Form.Field path={props.jsonPath} label={props.label} readonly={props.readonly}>
+      <SelectField {...props} options={[...options]} />
+    </Form.Field>
+  );
+};

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

@@ -0,0 +1,50 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useState } from 'react';
+
+import { JsonHighlighter } from '@dxos/react-ui-syntax-highlighter';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { type NodeTone, type StyleHue } from '../../model/types.ts';
+import { TONE_NAMES } from '../../utils/style.ts';
+import { StyleGrid, type StyleGridProps } from './StyleGrid.tsx';
+
+type StoryArgs = Pick<StyleGridProps, 'indeterminate' | 'readonly'>;
+
+/** The grid alone, holding its own pick: each swatch is a hue at a tone, as a node would draw it. */
+const DefaultStory = ({ indeterminate, readonly }: StoryArgs) => {
+  const [hue, setHue] = useState<StyleHue>('blue');
+  const [tone, setTone] = useState<NodeTone>(2);
+  return (
+    <div className='grid grid-cols-2 gap-4 w-[48rem]'>
+      <StyleGrid
+        hue={hue}
+        tone={tone}
+        indeterminate={indeterminate}
+        readonly={readonly}
+        onValueChange={(choice) => {
+          setHue(choice.hue);
+          setTone(choice.tone);
+        }}
+      />
+      <JsonHighlighter data={{ hue, tone, name: TONE_NAMES[tone] }} />
+    </div>
+  );
+};
+
+const meta: Meta<StoryArgs> = {
+  title: 'ui/react-ui-canvas/StyleGrid',
+  render: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'centered' })],
+  args: {
+    indeterminate: false,
+    readonly: false,
+  },
+};
+
+export default meta;
+
+export const Default: StoryObj<StoryArgs> = {};

package/src/components/Properties/StyleGrid.tsx

@@ -8,8 +8,8 @@ import { Form, type FormFieldRenderer, useFormFieldState } from '@dxos/react-ui-
 import * as ToggleGroup from '@dxos/react-ui/ToggleGroup';
 import { mx } from '@dxos/ui-theme';
 
-import { NodeStyle, type NodeTone } from '../../model/types.ts';
-import { DEFAULT_TONE, STYLE_HUES, type StyleHue, TONE_NAMES, TONES, hueClasses } from '../../utils/style.ts';
+import { NodeStyle, type NodeTone, STYLE_HUES, type StyleHue } from '../../model/types.ts';
+import { DEFAULT_TONE, TONE_NAMES, TONES, hueClasses } from '../../utils/style.ts';
 
 export type StyleChoice = { hue: StyleHue; tone: NodeTone };
 
@@ -36,6 +36,8 @@ export type StyleGridProps = {
   /** Several nodes disagree: no swatch is selected until one is picked. */
   indeterminate?: boolean;
   readonly?: boolean;
+  /** The rows offered; all tones by default, or one row (e.g. a line's outline colour only). */
+  tones?: readonly NodeTone[];
   onValueChange: (choice: StyleChoice) => void;
 };
 
@@ -43,7 +45,14 @@ export type StyleGridProps = {
  * Each offered hue in a column and its tones down the rows, every swatch drawn with the classes the node
  * itself would take, so a pick is a preview. A hue the grid does not offer, or none, selects nothing.
  */
-export const StyleGrid = ({ hue, tone = DEFAULT_TONE, indeterminate, readonly, onValueChange }: StyleGridProps) => {
+export const StyleGrid = ({
+  hue,
+  tone = DEFAULT_TONE,
+  indeterminate,
+  readonly,
+  tones = TONES,
+  onValueChange,
+}: StyleGridProps) => {
   const selected = indeterminate || !hue ? '' : `${hue}${SEPARATOR}${tone}`;
   return (
     <ToggleGroup.Root
@@ -60,7 +69,7 @@ export const StyleGrid = ({ hue, tone = DEFAULT_TONE, indeterminate, readonly, o
         }
       }}
     >
-      {TONES.flatMap((rowTone) =>
+      {tones.flatMap((rowTone) =>
         STYLE_HUES.map((columnHue) => {
           const key = choiceKey({ hue: columnHue, tone: rowTone });
           const classes = hueClasses(columnHue, rowTone);
@@ -91,28 +100,47 @@ export const StyleGrid = ({ hue, tone = DEFAULT_TONE, indeterminate, readonly, o
   );
 };
 
+/** The outline row alone: a link takes a hue but no fill, so its colour is the hue's border. */
+const OUTLINE_TONES: readonly NodeTone[] = [0];
+
+export type StyleFieldOptions = {
+  /** Offer the fill rows (tones 1–3) as well as the outline; a link, or a selection with one, has no fill. */
+  fills: boolean;
+};
+
 /**
- * The properties panel's style field, rendered at `style.hue`: one pick sets the hue and its tone together,
- * so it writes the enclosing `style`.
+ * The properties panel's style picker, rendered at `style.hue`, for every kind of element: with `fills`, one pick
+ * sets the hue and its tone together (a node); without, the outline row sets the hue alone (a link, or a
+ * selection mixing kinds, which edits only the style they share).
  */
-export const StyleGridField: FormFieldRenderer = ({ label, jsonPath, readonly, indeterminate, getValue, onBlur }) => {
-  // Hue and tone change together, so the pick writes their parent once; two field writes would race.
-  const stylePath = (jsonPath ?? 'style.hue').split('.').slice(0, -1);
-  const styleField = useFormFieldState('StyleGridField', stylePath);
-  const style: NodeStyle = styleField.getValue() ?? {};
-  return (
-    <Form.Field path={jsonPath} label={label} readonly={readonly}>
-      <StyleGrid
-        hue={getValue()}
-        tone={style.tone}
-        indeterminate={indeterminate}
-        readonly={!!readonly}
-        onValueChange={({ hue, tone }) => {
-          // A pick is a commit: the grid never blurs, so it commits itself.
-          styleField.onValueChange(NodeStyle.ast, { ...style, hue, tone });
-          onBlur();
-        }}
-      />
-    </Form.Field>
-  );
+export const createStyleField = ({ fills }: StyleFieldOptions): FormFieldRenderer => {
+  const StyleField: FormFieldRenderer = ({ label, jsonPath, readonly, indeterminate, getValue, onBlur }) => {
+    // Hue and tone change together, so the pick writes their parent once; two field writes would race.
+    const stylePath = (jsonPath ?? 'style.hue').split('.').slice(0, -1);
+    const styleField = useFormFieldState('StyleField', stylePath);
+    const style: NodeStyle = styleField.getValue() ?? {};
+    return (
+      <Form.Field path={jsonPath} label={label} readonly={readonly}>
+        <StyleGrid
+          hue={getValue()}
+          tone={fills ? style.tone : 0}
+          tones={fills ? TONES : OUTLINE_TONES}
+          indeterminate={indeterminate}
+          readonly={!!readonly}
+          onValueChange={({ hue, tone }) => {
+            // A pick is a commit: the grid never blurs, so it commits itself.
+            styleField.onValueChange(NodeStyle.ast, fills ? { ...style, hue, tone } : { ...style, hue });
+            onBlur();
+          }}
+        />
+      </Form.Field>
+    );
+  };
+  return StyleField;
 };
+
+/** The style picker with its fill rows: a node's, or a selection of nodes. */
+export const StyleGridField = createStyleField({ fills: true });
+
+/** The style picker's outline row alone: a link's, or a selection with a link in it. */
+export const OutlineStyleField = createStyleField({ fills: false });