The CMS services

useCms() gives the CMS services to any component the interface renders. activate, search providers and search hits get the same object as cms.

`CmsApi`	Is
`store`	the `RelatudeStore` of chapter 19, signed in as the editor; null in the offline demo (`?demo`)
`data`	the content as the content screens see it (below)
`dialogs`	`confirm(…)` and `prompt(…)`; `pickNodes(…)`, the node picker; `createContent(…)`, the create wizard
`toasts`	`show(message, { tone?, actionLabel?, onAction? })`, with `tone` one of `info`, `success` and `danger`
`processes`	`run(options, work)` runs work in the browser as a process editors can follow, pause and cancel; `follow(process)` shows one a server command started
`blades`	`open(bladeId, param?, { reset? })` opens a blade on top of the stack, or as a new stack; `openPath([{ bladeId, param? }, …])` replaces the stack
`design`	design mode: `available()`, `active()`, `set(on)` and `subscribe(listener)`

The cms object stays the same while editors sign out and in, but its store and data change. Read cms.store where you use it rather than keeping it from activate.

The node picker searches the given types and the types inheriting them. It answers the chosen nodes as { id, type, name }, or null when cancelled:

const picked = await cms.dialogs.pickNodes({ types: ['IProductPage'], multiple: true });
if (picked) cms.toasts.show(`${picked.length} products chosen`);

The create wizard asks what to create and where, and answers { type, place?, site? }, or null. place is { parent, relation?, after? } for a type the content tree holds. To let the editor fill in the new node, open content.edit with the param new:<type>, or new:<type>:<parent> to put it under the parent when it is saved.

Design mode is turned on with Design in the top bar, which only administrators have. While it is on, a blade that can be designed shows controls to change it, such as the node editor's form layout (Form layouts). A plugin's blade can join in by reading useDesignMode(). What it designs, and where that is saved, is up to the plugin:

import { useDesignMode, type BladeProps } from '@relatude/sdk';
import { Blade } from '@relatude/ui';

// StockDesigner and StockList are the plugin's own components
function StockBlade(props: BladeProps) {
  const designing = useDesignMode();   // re-renders as design mode goes on and off
  return (
    <Blade title="Stock" onClose={props.close}>
      {designing ? <StockDesigner /> : <StockList />}
    </Blade>
  );
}