@datocms/product-scenes 0.1.0 → 0.5.0

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import React, { ComponentProps, FunctionComponent, ReactElement, ReactNode } from "react";
+import React, { ComponentProps, FunctionComponent, ReactElement, ReactNode, SyntheticEvent } from "react";
 //#region ../../node_modules/@floating-ui/utils/dist/floating-ui.utils.d.mts
 declare type AlignedPlacement = `${Side}-${Alignment}`;
 declare type Alignment = 'start' | 'end';
@@ -6,11 +6,11 @@ declare type Placement = Prettify<Side | AlignedPlacement>;
 declare type Prettify<T> = { [K in keyof T]: T[K]; } & {};
 declare type Side = 'top' | 'right' | 'bottom' | 'left';
 //#endregion
-//#region ../ui/src/Message.d.ts
+//#region ../ui-public/src/Message.d.ts
 /**
  * A translation key with its values, for example `{ id: 'button.save' }`.
  * The texts adapter of the host gives the text of the key: the resources of
- * i18next in the apps, the texts of ui and the `texts` map in
+ * i18next in the apps, the texts of ui-public and the `texts` map in
  * `BundledTexts`. See the "Texts provider" docs page.
  */
 type IntlMessage = {
@@ -34,7 +34,7 @@ type Message = string | ReactElement | IntlMessage | HtmlMessage;
  */
 type TextMessage = string | IntlMessage;
 //#endregion
-//#region ../ui/src/utils/types.d.ts
+//#region ../ui-public/src/utils/types.d.ts
 /**
  * Type for SVG icons imported via vite-plugin-svgr.
  * Matches the type from vite-plugin-svgr/client.d.ts
@@ -46,7 +46,7 @@ type SvgIcon = FunctionComponent<ComponentProps<'svg'> & {
   descId?: string;
 }>;
 //#endregion
-//#region ../ui/src/actions/disabledReason.d.ts
+//#region ../ui-public/src/actions/disabledReason.d.ts
 /**
  * A disabled control that tells why. It keeps the focus and the hover
  * ("aria-disabled" in place of "disabled"), thus its tooltip shows the
@@ -61,7 +61,7 @@ type DisabledWithReason = {
 /** Give a reason when the user must know why the control is disabled */
 type Disabled = boolean | DisabledWithReason;
 //#endregion
-//#region ../ui/src/actions/Button.d.ts
+//#region ../ui-public/src/actions/Button.d.ts
 /**
  * "overlay" and "on-primary" are for a colored bar (the navigation bar, a
  * floating bar): "overlay" has a light translucent fill, "on-primary" has a
@@ -85,7 +85,7 @@ type WithLabel = {
   tooltip?: ActionTooltipOptions;
 };
 /**
- * The name and the keys of an action of the registry (`ui/Actions`), in
+ * The name and the keys of an action of the registry (`ui-public/Actions`), in
  * the tooltip. An icon-only button shows its label in place of the name.
  * When the action has no keys or does not exist, the tooltip has no keys:
  * an icon-only button shows its label, and a button with a label shows no
@@ -141,7 +141,10 @@ type ButtonElementState = {
    * "onClick" that returns a promise sets it automatically.
    */
   busy?: boolean;
-  /** The state of a toggle button (for example the filter toggle) */
+  /**
+   * The state of a toggle button (for example the filter toggle). Only the
+   * soft and the ghost tones show it: a toggle is never the main action.
+   */
   pressed?: boolean;
 };
 /** A link has no busy or pressed state */
@@ -232,7 +235,75 @@ type ButtonProps = {
  */
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLElement>>;
 //#endregion
-//#region ../ui/src/lists/InfoList.d.ts
+//#region ../ui-public/src/lists/InfoList/Value.d.ts
+type InfoListValueProps = {
+  /** The value, for example the file name of an asset */
+  label: Message;
+};
+type InfoListValueTriggerProps = {
+  /** The value, for example the collection of an asset */
+  label: Message;
+  /** The menu is open. Dropdown gives it. */
+  open: boolean;
+  /** Opens or closes the menu. Dropdown gives it. */
+  onTrigger: (event: SyntheticEvent) => void;
+};
+//#endregion
+//#region ../ui-public/src/content/Avatar.d.ts
+/** The image of the avatar: a URL, or the Gravatar image of the email */
+type AvatarImage =
+/** An image URL */
+{
+  /**
+   * The URL of the image. When it is missing or when it does not load,
+   * the avatar shows the initials of the name.
+   */
+  imageUrl?: string | null;
+  gravatar?: never;
+} |
+/** The Gravatar image of the email */
+{
+  /**
+   * Shows the Gravatar image of the email, with two image pixels for
+   * each CSS pixel. When the email has no Gravatar image or when there is
+   * no email, the avatar shows the initials of the name.
+   */
+  gravatar: true;
+  imageUrl?: never;
+};
+/** The person of the avatar: the name, the email and the image */
+type AvatarIdentity = AvatarImage & {
+  /** The name of the person, for example "Jane Doe". It gives the initials. */
+  name: string | null | undefined;
+  /** Picks the color of the initials. Falls back to the name when missing. */
+  email?: string | null;
+};
+//#endregion
+//#region ../ui-public/src/lists/InfoList/User.d.ts
+/** The user to show: the name, the email and the image of the avatar */
+type InfoListUserData = AvatarIdentity;
+type InfoListUserProps = {
+  user: InfoListUserData;
+  /**
+   * A text about the user, for example the type of the user. It goes in a
+   * tooltip at the left, thus the text does not wrap in a narrow column.
+   * Without it, there is no tooltip.
+   */
+  tooltip?: Message;
+};
+type InfoListUserTriggerProps = InfoListUserProps & {
+  /** The menu is open. Dropdown gives it. */
+  open: boolean;
+  /** Opens or closes the menu. Dropdown gives it. */
+  onTrigger: (event: SyntheticEvent) => void;
+  /**
+   * The pointer or the keyboard focus is on the trigger: the user will
+   * possibly open the menu. Use it to start to load the options of the menu.
+   */
+  onIntent?: () => void;
+};
+//#endregion
+//#region ../ui-public/src/lists/InfoList/index.d.ts
 type InfoListProps = {
   className?: string;
   /** The rows (InfoList.Row) and the groups (InfoList.Group) */
@@ -265,6 +336,8 @@ declare function Group({ title, children }: InfoListGroupProps): React.JSX.Eleme
  * A list of facts about an element: one row for each fact, with its title
  * and its value. Use InfoList.Row for a row and InfoList.Group for rows
  * with a title. It renders a real description list (dl, dt and dd).
+ * InfoList.Value and InfoList.User are values for a row, with a variant that
+ * opens a menu.
  *
  * Use an InfoList for facts to read. For things that the user acts on (a
  * rule, a webhook), use CardList.
@@ -274,9 +347,19 @@ declare const InfoList: React.NamedExoticComponent<InfoListProps> & {
 } & {
   Row: React.MemoExoticComponent<typeof Row>;
   Group: React.MemoExoticComponent<typeof Group>;
+  Value: React.NamedExoticComponent<InfoListValueProps> & {
+    readonly type: ({ label }: InfoListValueProps) => React.JSX.Element;
+  } & {
+    Trigger: React.MemoExoticComponent<({ label, open, onTrigger }: InfoListValueTriggerProps) => React.JSX.Element>;
+  };
+  User: React.NamedExoticComponent<InfoListUserProps> & {
+    readonly type: ({ user, tooltip }: InfoListUserProps) => React.JSX.Element;
+  } & {
+    Trigger: React.MemoExoticComponent<({ user, tooltip, open, onTrigger, onIntent }: InfoListUserTriggerProps) => React.JSX.Element>;
+  };
 };
 //#endregion
-//#region ../ui/src/content/Pill.d.ts
+//#region ../ui-public/src/content/Pill.d.ts
 /** The color of a pill */
 type PillTone = 'neutral' | 'accent' | 'soft' | 'danger' | 'warning' | 'success';
 /** A pill that opens a page. It is a link. */
@@ -322,337 +405,3313 @@ type PillProps = {
 declare function Pill({ tone, icon, tooltip, children, to, onClick }: PillProps): React.JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof Pill>;
 //#endregion
-//#region src/parts/ContentSidebar/ContentSidebar.d.ts
-/** A folder of the menu */
-type ContentSidebarFolder = {
-  kind: 'folder';
-  /** A key that is unique in the menu */
-  id: string;
-  /** The name of the folder. An emoji at the start becomes the icon. */
-  name: string;
+//#region src/kit/recordStatus.d.ts
+/** The publishing status of a record, with the names of the cms */
+type RecordStatus = 'draft' | 'updated' | 'published';
+//#endregion
+//#region ../ui-static/src/content/fieldTypeGroups.d.ts
+/** The `field_type` of a field in the CMA */
+type FieldType = 'boolean' | 'color' | 'date' | 'date_time' | 'file' | 'float' | 'gallery' | 'integer' | 'json' | 'lat_lon' | 'link' | 'links' | 'rich_text' | 'seo' | 'single_block' | 'slug' | 'string' | 'structured_text' | 'text' | 'video';
+//#endregion
+//#region src/Stage/Stage.d.ts
+/** The hue of the default theme of the cms */
+export declare const DEFAULT_HUE = 290;
+type ColorScheme = 'light' | 'dark';
+/**
+ * The scheme of a stage. `page` follows the page: the screen is dark when
+ * the root element of the page has `data-product-scenes-scheme="dark"`,
+ * else light. CSS changes it, thus the page needs no script for the scenes.
+ */
+type StageScheme = ColorScheme | 'page';
+/**
+ * The steps of an interaction that the page can play in a loop: a part of
+ * the kit exports them (for example `ADD_BLOCK_SEQUENCE`). The page sets
+ * the name of the step in `data-step` on the screen, and the CSS of the
+ * part shows that step. The last step is the picture without `data-step`:
+ * the page shows it without JS and with reduced motion.
+ */
+type StageSequence = {
+  /** The steps, in order, each with its time on screen in ms */
+  steps: readonly {
+    name: string;
+    ms: number;
+  }[];
+};
+type StageProps = {
   /**
-   * The folder shows its items. A closed folder shows only its chevron.
-   * @default false
+   * What the scene shows, for a screen reader. The scene itself is hidden
+   * from assistive technology.
    */
-  open?: boolean;
-  /** The items in the folder. Only an open folder shows them. */
-  items?: ContentSidebarItem[];
-};
-/** A model of the menu: it opens the records of the model */
-type ContentSidebarModel = {
-  kind: 'model';
-  /** A key that is unique in the menu */
-  id: string;
+  description: string;
+  /** @default 'light' */
+  scheme?: StageScheme;
   /**
-   * The name of the model. An emoji at the start becomes the icon, as in
-   * the cms.
+   * The hue of the brand color, from 0 to 360
+   * @default 290
    */
-  name: string;
+  hue?: number;
   /**
-   * The model has one record. Without an emoji, the icon is the one of a
-   * single record.
-   * @default false
+   * The strength of the hue on the surfaces and the borders. It multiplies
+   * the chroma of the wash ramp of the cms. Use a value above 1 to make the
+   * hue show more, mostly in the dark scheme. The text does not get it: it
+   * keeps the chroma of the cms.
+   * @default 1
    */
-  singleton?: boolean;
+  tint?: number;
   /**
-   * The row of the page that the scene shows
+   * The most chroma of the brand color, in OKLCH (0 to about 0.3). It caps
+   * the pigment ramp of the cms: the primary buttons, the focus rings, the
+   * selected rows. Without it the ramp is as vivid as the gamut allows, as
+   * in the cms. Cap it on a page where the accent of the cms must not win
+   * over the page around the scene.
+   * @default no cap
+   */
+  chroma?: number;
+  /**
+   * The height of the screen in px, before the zoom
+   * @default 900
+   */
+  height?: number;
+  /**
+   * The width of the screen in px. Without it, the screen is the cms: it
+   * takes the width of the stage, and it is `minWidth` wide at least. With
+   * it, the screen is exactly this wide, and the stage is as wide as the
+   * screen at its zoom.
+   *
+   * Use it only for a scene without `RecordEditorLayout`: a form alone or a
+   * panel alone.
+   */
+  width?: number;
+  /**
+   * The smallest width of the screen of the cms in px. On a narrower stage
+   * the screen stays this wide, and the zoom makes it as wide as the stage.
+   * Not for a screen with `width`: that width is also its smallest width.
+   * @default 1025
+   */
+  minWidth?: number;
+  /**
+   * The zoom makes the screen smaller on a stage that is narrower than the
+   * smallest width of the screen. Without it, the screen keeps its zoom,
+   * and the page clips it.
+   * @default true without `width`, false with `width`
+   */
+  fit?: boolean;
+  /**
+   * For the development of the website only. When true, the screen is not
+   * inert and not hidden from assistive technology, and it lets the pointer
+   * and the selection through, thus the browser devtools can inspect it.
+   * Never set it in production: a screen reader reads the fake interface.
    * @default false
    */
-  active?: boolean;
-  /** An icon in place of the emoji or of the icon of the kind */
-  icon?: ReactNode;
+  inspectable?: boolean;
+  /**
+   * The steps that the page can play. The screen gets them in
+   * `data-scene-steps` ("name:ms name:ms"), for the script of the page,
+   * and the time of each step in `--scene-step-<name>`, for the CSS of the
+   * part.
+   */
+  sequence?: StageSequence;
+  /**
+   * The cascade layer of the styles that the scene writes when it renders
+   * (react-select writes them with Emotion, in `<style data-emotion>`). Give
+   * the layer of `product-scenes.css`, thus the CSS of the kit beats them.
+   * A host without layers keeps the default: its CSS without a layer beats
+   * the layer, and the CSS of the kit has no layer.
+   * @default 'vendor'
+   */
+  cssLayer?: string;
+  /** The content of the screen: a scene */
+  children: ReactNode;
 };
-/** An item of the menu of the models */
-type ContentSidebarItem = ContentSidebarFolder | ContentSidebarModel;
-/** The props of `ContentSidebar` */
-type ContentSidebarProps = {
+/**
+ * The frame of a product scene. The screen takes the width of the frame, as
+ * the cms takes the width of the window. On a frame narrower than the
+ * smallest width of the screen, CSS zooms the screen down. The page can
+ * give the zoom, the alignment, the corners and the ring of the screen
+ * with custom properties (see "The CSS contract of the stage" in the
+ * README). The content is a picture: it gets no focus, no pointer events
+ * and no selection.
+ */
+export declare function Stage({ description, scheme, hue, tint, chroma, height, width, minWidth, fit, inspectable, sequence, cssLayer, children }: StageProps): React.JSX.Element;
+//#endregion
+//#region src/parts/AddFieldMenu/AddFieldMenu.d.ts
+/**
+ * The steps of the menu "Add new field", for the `sequence` of `Stage`: the
+ * toolbar at rest, the menu open, the option under the pointer, its card.
+ * The card opens after 300ms on the option, as the HoverCard of the cms.
+ * The last step is the picture at rest.
+ */
+export declare const ADD_FIELD_SEQUENCE: StageSequence;
+/**
+ * The steps of the menu "Add new field" open, with the pointer that goes on
+ * three field types in turn, for the `sequence` of `Stage`: give
+ * `AddFieldMenu` the three types in `hovered`. The pointer goes on the
+ * second type, then the third, then the first. A card is always open: in
+ * the cms, when a card is open, the card of the next option opens
+ * immediately, without the delay of HoverCard. The last step is the picture
+ * at rest: the first type with its card.
+ */
+export declare const HOVER_FIELD_TYPES_SEQUENCE: StageSequence;
+/** The props of `AddFieldMenu` */
+type AddFieldMenuProps = {
+  /** The model of the page: its name without the emoji, for example "Products" */
+  model: TextMessage;
+  /** The emoji of the model, before its name in the title */
+  emoji?: string;
   /**
-   * The title of the pane
-   * @default 'Content'
+   * The field type under the pointer. The option has the highlight, and its
+   * card opens at the left of the option, with the name and the hint of the
+   * type, as in the cms. Without it, the menu is open with nothing hovered.
+   * A list of three types is for HOVER_FIELD_TYPES_SEQUENCE: the pointer
+   * goes on each type in turn, and the picture at rest shows the first.
    */
-  title?: TextMessage;
-  /** The items at the first level of the menu */
-  items: ContentSidebarItem[];
+  hovered?: FieldType | readonly FieldType[];
+  /**
+   * The content of the page, under the toolbar. The menu goes over it.
+   */
+  children?: ReactNode;
 };
-/** The menu of the models: the same parts as the sidebar of the cms */
-export declare function ContentSidebar({ title, items }: ContentSidebarProps): React.JSX.Element;
+/**
+ * The page of a model in the schema of the cms, with the menu "Add new
+ * field" open: the toolbar of the page, then the menu with the search field
+ * and the field types in their groups, in the order of the cms. The cms
+ * places the menu with JS (useFloating), in a portal, under the right end
+ * of the button; the picture puts it there too. The menu has its full height,
+ * about 1350px from the top of the screen: the cms makes it scroll when the
+ * window is shorter, and a shorter screen cuts it at its bottom edge.
+ */
+export declare function AddFieldMenu({ model, emoji, hovered, children }: AddFieldMenuProps): React.JSX.Element;
 //#endregion
-//#region src/parts/InfoAside/InfoAside.d.ts
-/** The publishing status of a record, with the names of the cms */
-type RecordStatus = 'draft' | 'updated' | 'published';
-/** The props of `InfoAside` */
-type InfoAsideProps = {
-  /** The panels: `InfoAside.RecordInfo`, `InfoAside.Panel` and the others */
-  children: ReactNode;
+//#region ../ui-static/src/form/FocalPointInput.d.ts
+/** A point of the image, as fractions (0 to 1) of its width and height */
+type FocalPoint = {
+  x: number;
+  y: number;
 };
-/** The props of `InfoAside.Panel` */
-type InfoAsidePanelProps = {
-  /** The title of the panel */
-  title: Message;
+//#endregion
+//#region ../ui-public/src/color/types.d.ts
+type RgbaColor = {
+  red: number;
+  green: number;
+  blue: number;
+  alpha: number;
+};
+//#endregion
+//#region ../ui-static/src/content/UploadDetails.d.ts
+type GpsLocation = {
+  latitude: number;
+  longitude: number;
+};
+/** The EXIF data of an image, as the API gives it */
+type ExifInfo = {
+  model?: string;
+  lens_model?: string;
+  f_number?: number;
+  focal_length?: number;
+  exposure_time?: number;
+  iso?: number;
+  flash_mode?: number;
+  gps_location?: GpsLocation;
+};
+/**
+ * The technical data of an asset, with the names of the attributes of the
+ * API: the cms gives the attributes of the upload
+ */
+type UploadDetailsValue = {
+  mime_type?: string | null;
+  /** The size of the file, in bytes */
+  size: number;
+  width?: number | null;
+  height?: number | null;
+  /** A video of Mux: the width and the height are the maximum resolution */
+  mux_playback_id?: string | null;
+  /** The duration of a video or an audio, in seconds */
+  duration?: number | null;
+  frame_rate?: number | null;
+  exif_info?: ExifInfo | null;
+  /** The main colors of an image */
+  colors?: RgbaColor[] | null;
+};
+type UploadDetailsProps = {
+  value: UploadDetailsValue;
+};
+//#endregion
+//#region src/parts/AssetDetail/Categorization.d.ts
+/** The props of `AssetDetail.Categorization` */
+type AssetDetailCategorizationProps = {
+  author?: string;
+  copyright?: string;
+  /** The tags of the asset, that the users give */
+  tags?: string[];
+  notes?: string;
   /**
-   * The content touches the sides of the panel, for a list of rows
+   * The user closed the panel: only its title shows
    * @default false
    */
-  flush?: boolean;
-  /** The content of the panel */
-  children: ReactNode;
+  closed?: boolean;
 };
-/** The props of `InfoAside.Blank` */
-type InfoAsideBlankProps = {
-  /** The text that tells that the panel is empty */
-  message: Message;
+/** The panel "Categorization": the author, the copyright, the tags, the notes */
+declare function Categorization({ author, copyright, tags, notes, closed }: AssetDetailCategorizationProps): React.JSX.Element;
+//#endregion
+//#region src/parts/AssetDetail/DefaultMetadata.d.ts
+/** The props of `AssetDetail.DefaultMetadata` */
+type AssetDetailDefaultMetadataProps = {
+  /**
+   * The names of the locales of the project. With more than one, the panel
+   * has the menu of the language, as in the cms.
+   */
+  locales?: string[];
+  /**
+   * The locale of the fields, a name of `locales`
+   * @default the first locale
+   */
+  locale?: string;
+  /** The menu of the language is open */
+  menu?: boolean;
+  /** The default title of the asset, in the locale */
+  title?: string;
+  /** The default alternate text of the asset, in the locale */
+  alt?: string;
+  /** The custom data of the asset, in the locale */
+  customData?: {
+    key: string;
+    value: string;
+  }[];
+  /**
+   * The user closed the panel: only its title shows
+   * @default false
+   */
+  closed?: boolean;
 };
-/** The props of `InfoAside.RecordInfo` */
-type InfoAsideRecordInfoProps = {
-  /** The ID of the record */
+declare function DefaultMetadata({ locales, locale, menu, title, alt, customData, closed }: AssetDetailDefaultMetadataProps): React.JSX.Element;
+//#endregion
+//#region src/parts/AssetDetail/Info.d.ts
+/** A row of `AssetDetail.Info` */
+type AssetDetailInfoRow = 'filename' | 'id' | 'url' | 'collection' | 'createdAt' | 'updatedAt' | 'createdBy' | 'smartTags';
+/** The props of `AssetDetail.Info` */
+type AssetDetailInfoProps = {
+  /** The name of the file */
+  filename: string;
+  /** The ID of the asset */
   id: string;
-  status: RecordStatus;
-  /** The date of creation, as the cms formats it: "09/21/2025, 13:34" */
+  /** The URL of the file, without "https://" */
+  url: string;
+  /** The collection of the asset. Without it, the asset is in none. */
+  collection?: string;
+  /** The date of the upload, as the cms formats it: "09/21/2025, 13:34" */
   createdAt: string;
   /** The date of the last change, as the cms formats it */
   updatedAt: string;
-  /** The row "Currently used blocks", for example "0/10000 (0%)". Without it, the row does not show. */
-  blocks?: string;
-  /** The user that made the record */
+  /** The user that uploaded the asset */
   createdBy: {
     name: string;
     imageUrl?: string;
   };
-};
-/** A page of the website, in the panel "Related website pages" */
-type InfoAsideWebsitePage = {
-  /** The name of the frontend, for example "Production" */
-  environment: string;
-  /** The name of the link, for example "Draft version" */
-  label: Message;
-  /** The path or the URL of the page */
-  path: string;
+  /** The tags that the AI found in the image */
+  smartTags?: string[];
   /**
-   * Shows the button that opens the page in the visual editor
+   * The user closed the panel: only its title shows
    * @default false
    */
-  visualEditing?: boolean;
+  closed?: boolean;
+  /**
+   * The rows that show, in the order of the cms. Use it to show a part of
+   * the panel in a small box, for example only the smart tags. The cms
+   * always shows all the rows.
+   * @default all the rows
+   */
+  rows?: AssetDetailInfoRow[];
 };
-/** The props of `InfoAside.WebsitePages` */
-type InfoAsideWebsitePagesProps = {
-  pages: InfoAsideWebsitePage[];
+/** The panel "Asset info" */
+declare function Info({ filename, id, url, collection, createdAt, updatedAt, createdBy, smartTags, closed, rows }: AssetDetailInfoProps): React.JSX.Element;
+//#endregion
+//#region src/parts/AssetDetail/LinksToItems.d.ts
+/** A record that uses the asset */
+type AssetDetailLinkingRecord = {
+  /** The title of the record, unique in the list */
+  title: string;
+  /** The model of the record, with its emoji. For example "📰 Article". */
+  model: Message;
+  status?: RecordStatus;
+  /**
+   * The URL of the image of the record. The cms shows the first image of
+   * the record: often it is the asset of the dialog.
+   */
+  image?: string;
 };
-/** The side panel of the record editor, with the tab "Info" open */
-declare function InfoAside({ children }: InfoAsideProps): React.JSX.Element;
-/** A panel of the aside, open, with a title */
-declare function Panel({ title, flush, children }: InfoAsidePanelProps): React.JSX.Element;
-/** The text of an empty panel */
-declare function Blank({ message }: InfoAsideBlankProps): React.JSX.Element;
-/** The panel "Record info" */
-declare function RecordInfo({ id, status, createdAt, updatedAt, blocks, createdBy }: InfoAsideRecordInfoProps): React.JSX.Element;
-/** The panel "Publishing schedule", with no schedule */
-declare function PublishingSchedule(): React.JSX.Element;
-/** The panel "Related website pages" */
-declare function WebsitePages({ pages }: InfoAsideWebsitePagesProps): React.JSX.Element;
-/** The panel "Links", with no record that links to this record */
-declare function Links(): React.JSX.Element;
-declare const InfoAsideWithParts: typeof InfoAside & {
-  Panel: typeof Panel;
-  Blank: typeof Blank;
-  RecordInfo: typeof RecordInfo;
-  PublishingSchedule: typeof PublishingSchedule;
-  WebsitePages: typeof WebsitePages;
-  Links: typeof Links;
+/** The props of `AssetDetail.LinksToItems` */
+type AssetDetailLinksToItemsProps = {
+  records: AssetDetailLinkingRecord[];
+  /**
+   * The user closed the panel: only its title and the count show
+   * @default false
+   */
+  closed?: boolean;
 };
+/** The panel "Records using this asset": the records that link the asset */
+declare function LinksToItems({ records, closed }: AssetDetailLinksToItemsProps): React.JSX.Element;
 //#endregion
-//#region src/parts/NavigationBar/NavigationBar.d.ts
-/** The tabs of the bar. The CDA Playground is the last one. */
-type NavigationBarTab = 'visual' | 'content' | 'media' | 'schema' | 'configuration' | 'calendar' | 'cdaPlayground';
-/** The props of `NavigationBar` */
-type NavigationBarProps = {
+//#region src/parts/AssetDetail/TrackDialogs.d.ts
+/** A language in the select of the dialogs of the tracks */
+type AssetDetailTrackLanguage = {
+  /** The name of the language, for example "English" */
+  name: string;
+  /** The code of the language, for example "en" */
+  code: string;
+};
+/** The props of `AssetDetail.GenerateSubtitles` */
+type AssetDetailGenerateSubtitlesProps = {
+  /** The language of the audio. Without it, the select is empty. */
+  language?: AssetDetailTrackLanguage;
   /**
-   * The tab of the page that the scene shows
-   * @default 'content'
+   * The name of the new track
+   * @default the name of the language, then "(generated)", as in the cms
    */
-  activeTab?: NavigationBarTab;
+  trackName?: string;
   /**
-   * The type of the environment in the switcher
-   * @default 'primary'
+   * The dialog shows only in the step "dialog" of
+   * GENERATE_SUBTITLES_SEQUENCE
+   * @default false
    */
-  environment?: 'primary' | 'sandbox';
-  /** The user at the end of the bar. Without `imageUrl`, the avatar shows the initials. */
-  user: {
-    name: string;
-    imageUrl?: string;
+  sequence?: boolean;
+  /**
+   * The dialog is over the page, on the backdrop of the cms. Without it,
+   * the dialog is alone: give it alone to a scene.
+   * @default true
+   */
+  over?: boolean;
+};
+/** The props of `AssetDetail.AddTrack` */
+type AssetDetailAddTrackProps = {
+  /** The file of the new track */
+  file: {
+    /** The name of the file, for example "it.vtt" */
+    filename: string;
+    /** The extension of the file, on its icon */
+    format: string;
+    /** The percent of the upload. At 100 (or without it) it does not show. */
+    percent?: number;
   };
+  /** The language of the track. Without it, the select is empty. */
+  language?: AssetDetailTrackLanguage;
+  /**
+   * The name of the track
+   * @default the name of the language, as in the cms
+   */
+  trackName?: string;
+  /**
+   * The value of the switch "Closed captions?". The switch is only for a
+   * file of subtitles: without this prop (a file of audio), it is not
+   * there.
+   */
+  closedCaptions?: boolean;
+  /**
+   * The dialog is over the page, on the backdrop of the cms. Without it,
+   * the dialog is alone: give it alone to a scene.
+   * @default true
+   */
+  over?: boolean;
 };
 /**
- * A copy of the navigation bar of the cms. The bar is a component of the
- * cms, thus it is not in ui.
+ * The dialog "Generate subtitles from audio", with the
+ * language of the audio. Give it to `dialog` of `AssetDetail`, or give it
+ * alone to a scene with `over={false}`.
  */
-export declare function NavigationBar({ activeTab, environment, user }: NavigationBarProps): React.JSX.Element;
-//#endregion
-//#region src/parts/RecordEditorLayout/RecordEditorLayout.d.ts
-/** The props of `RecordEditorLayout` */
-type RecordEditorLayoutProps = {
-  /** The bar at the top: a `NavigationBar` */
-  navigationBar: ReactNode;
-  /** The column at the left: a `ContentSidebar` */
-  sidebar: ReactNode;
-  /** The column at the right: an `InfoAside`. Without it, the form is wider. */
-  aside?: ReactNode;
-  /** The column in the middle: a `RecordForm` */
-  children: ReactNode;
-};
+declare function GenerateSubtitles({ language, trackName, sequence, over }: AssetDetailGenerateSubtitlesProps): React.JSX.Element;
 /**
- * The screen of the record editor of the cms at 1440×900. The cms uses a
- * SplitPane with a script to size the columns. This part gives the same
- * widths with CSS, thus the server renders the final layout. The column of
- * the form is not a Main: the id of Main repeats on a page with two scenes,
- * and the screen is hidden from assistive technology.
+ * The dialog "Add new track", with the file that the user
+ * dropped and its upload. Give it to `dialog` of `AssetDetail`, or give it
+ * alone to a scene with `over={false}`.
  */
-export declare function RecordEditorLayout({ navigationBar, sidebar, aside, children }: RecordEditorLayoutProps): React.JSX.Element;
+declare function AddTrack({ file, language, trackName, closedCaptions, over }: AssetDetailAddTrackProps): React.JSX.Element;
 //#endregion
-//#region src/parts/RecordForm/RecordForm.d.ts
-/** The props of `RecordForm` */
-type RecordFormProps = {
-  /** The title of the record, in the toolbar */
-  title: Message;
-  /** The icon before the title: the emoji of the model, as in the cms */
-  icon?: ReactNode;
-  /** The fields: `RecordForm.Field` elements */
-  children: ReactNode;
-};
-/** The props of `RecordForm.Field` */
-type RecordFormFieldProps = {
-  /** The name of the field */
-  label: Message;
+//#region src/parts/AssetDetail/Tracks.d.ts
+/**
+ * The steps of a click on "Generate subtitles from audio", in the panel of
+ * the tracks (`AssetDetail.Tracks` with `sequence`): the actions of the
+ * slot show, the dialog (`AssetDetail.GenerateSubtitles` with `sequence`)
+ * opens on a language, then the new track (a track with `added`) is in the
+ * list. The last step is the picture at rest: the dialog is closed.
+ */
+export declare const GENERATE_SUBTITLES_SEQUENCE: StageSequence;
+/** A track of a video, in `AssetDetail.Tracks` */
+type AssetDetailTrack = {
+  /** The kind of the track */
+  type: 'audio' | 'subtitles';
   /**
-   * Adds an asterisk to the label
+   * The subtitles are closed captions
    * @default false
    */
-  required?: boolean;
+  closedCaptions?: boolean;
+  /** The name of the track, for example "English (generated)" */
+  name: string;
+  /** The code of the language, for example "en" */
+  languageCode: string;
+  /**
+   * The state of the track at Mux
+   * @default "ready"
+   */
+  status?: 'preparing' | 'ready' | 'errored';
+  /**
+   * The tooltip "Download as .VTT" of a track of subtitles is open, as with
+   * the pointer on the button
+   * @default false
+   */
+  downloadTooltip?: boolean;
+  /**
+   * The actions of the row (download and delete) show, without the tooltip
+   * @default false
+   */
+  actionsOpen?: boolean;
+  /**
+   * The row comes in the last step of GENERATE_SUBTITLES_SEQUENCE, in
+   * `AssetDetail.Tracks` with `sequence`
+   * @default false
+   */
+  added?: boolean;
+};
+/** The props of `AssetDetail.Tracks` */
+type AssetDetailTracksProps = {
+  /** The tracks of the video, in the order of the list */
+  tracks?: AssetDetailTrack[];
+  /**
+   * The slot shows "Generate subtitles from audio": the video is recent,
+   * thus Mux still has its audio
+   * @default true
+   */
+  generate?: boolean;
+  /**
+   * The actions of the slot show, as with the pointer on the slot
+   * @default false
+   */
+  actions?: boolean;
+  /**
+   * The maximum size of a file, as the cms formats it
+   * @default "5 GB"
+   */
+  maxSize?: string;
+  /**
+   * The panel plays the steps of GENERATE_SUBTITLES_SEQUENCE
+   * @default false
+   */
+  sequence?: boolean;
+  /**
+   * The user closed the panel: only its title shows
+   * @default false
+   */
+  closed?: boolean;
+};
+/**
+ * The panel "Additional audio tracks and subtitles" of a video: the list of
+ * the tracks, then the slot that takes the files of the new tracks
+ */
+declare function Tracks({ tracks, generate, actions, maxSize, sequence, closed }: AssetDetailTracksProps): React.JSX.Element;
+//#endregion
+//#region src/parts/AssetDetail/VideoPreview.d.ts
+/**
+ * The steps of a click on the marker of the thumbnail, in
+ * `AssetDetail.Player` or in `AssetDetail` with a video and `sequence`.
+ * The pointer comes on the marker and clicks it, the card of the
+ * thumbnail opens, then the pointer goes away. The last step is the
+ * picture at rest: the card open, no pointer.
+ */
+export declare const THUMBNAIL_MARKER_SEQUENCE: StageSequence;
+/** The props of `AssetDetail.Player` */
+type AssetDetailPlayerProps = {
+  /** The video, as `video` of `AssetDetail` */
+  video: NonNullable<AssetDetailProps['video']>;
+  /** The width of the player, in px */
+  width: number;
+  /**
+   * With THUMBNAIL_MARKER_SEQUENCE: the card of the marker is closed, then
+   * the pointer clicks the marker and the card opens. It replaces
+   * `poster.open`.
+   * @default false
+   */
+  sequence?: boolean;
+};
+/**
+ * The player of a video with the controls of its thumbnail: the marker of
+ * the thumbnail on the seek bar (with its card if `poster.open`), and the
+ * buttons under the player. Give it alone to a scene to show the player
+ * without the page around it.
+ */
+declare function Player({ video, width, sequence }: AssetDetailPlayerProps): React.JSX.Element;
+//#endregion
+//#region src/parts/AssetDetail/AssetDetail.d.ts
+/**
+ * The steps of OPEN_ASSET_SEQUENCE (a click on an asset of `MediaArea`
+ * with `clicked`), then a click on the image of `AssetDetail` with
+ * `sequence`, that sets its focal point. The pointer comes on the image,
+ * the previews of the crops show around the center, the click sets the
+ * focal point and the previews follow it, then the pointer goes away. The
+ * last step is the picture at rest: the focal point set, no pointer and no
+ * previews.
+ */
+export declare const OPEN_ASSET_FOCAL_POINT_SEQUENCE: StageSequence;
+/** The props of `AssetDetail` */
+type AssetDetailProps = {
+  /**
+   * The dialog is over the other parts of the screen, on the backdrop of the
+   * cms. Without it, the panel of the dialog fills the screen.
+   * @default false
+   */
+  over?: boolean;
+  /** The title of the asset, in the toolbar of the preview */
+  title?: TextMessage;
+  /** The image of the asset. Give `image` or `video`. */
+  image?: {
+    /** The URL of the image */
+    src: string;
+    /** The width of the file, in px */
+    width: number;
+    /** The height of the file, in px */
+    height: number;
+  };
+  /**
+   * The video of the asset, paused on a frame, in the player of the cms.
+   * Under the player are the controls of its thumbnail.
+   */
+  video?: {
+    /** The URL of the image of the frame where the video is paused */
+    src: string;
+    /** The width of the video, in px */
+    width: number;
+    /** The height of the video, in px */
+    height: number;
+    /** The time of the frame, in seconds */
+    currentTime: number;
+    /** The length of the video, in seconds */
+    duration: number;
+    /**
+     * The thumbnail of the video: the marker on the seek bar. Without it,
+     * there is no marker.
+     */
+    poster?: {
+      /** The time of the thumbnail, in seconds */
+      time: number;
+      /**
+       * The URL of the image of the thumbnail, in the card of the marker
+       * @default the `src` of the video
+       */
+      src?: string;
+      /**
+       * The card of the marker is open, as with the pointer on the marker
+       * @default false
+       */
+      open?: boolean;
+    };
+  };
+  /**
+   * The focal point of the image, from 0 to 1 on each axis. Without it, the
+   * point is at the center, as the default of the cms.
+   */
+  focalPoint?: FocalPoint;
+  /**
+   * The size of the box of the preview, in px: the image fits in it, inside
+   * the space of the cms. The cms measures the box; a scene gives it.
+   * @default { width: 640, height: 440 }
+   */
+  previewBox?: {
+    width: number;
+    height: number;
+  };
+  /**
+   * The previews of the crops show in the hover card of the image, on its
+   * right, as when the pointer is on the image. With `hovered` (a label of
+   * `CROP_RATIOS`, for example "16:9"), the pointer is on that preview: the
+   * image shows the crop.
+   */
+  cropPreviews?: {
+    hovered?: string;
+  };
+  /**
+   * With OPEN_ASSET_FOCAL_POINT_SEQUENCE: before the click the asset has no
+   * focal point, then the pointer clicks the image on `focalPoint`. The
+   * previews of the crops show while the pointer is on the image, around
+   * the center, then around `focalPoint`. It replaces `cropPreviews`.
+   * With a video and THUMBNAIL_MARKER_SEQUENCE: the pointer clicks the
+   * marker of the thumbnail, and its card opens. It replaces `poster.open`.
+   * @default false
+   */
+  sequence?: boolean;
+  /**
+   * The technical details of the file, under the preview. "Edit image" is
+   * a PRO feature without `editImage`.
+   */
+  details: UploadDetailsProps['value'];
+  /**
+   * The plan has the image editor. Without it, "Edit image" is disabled and has a
+   * PRO pill, as in the cms.
+   * @default true
+   */
+  editImage?: boolean;
+  /**
+   * The plan has the video editor. Without it, "Edit video" is disabled and has a
+   * PRO pill, as in the cms.
+   * @default true
+   */
+  editVideo?: boolean;
+  /**
+   * A dialog over the page, for example `AssetDetail.GenerateSubtitles`
+   * or `AssetDetail.AddTrack`
+   */
+  dialog?: ReactNode;
+  /**
+   * The width of the sidebar, in px
+   * @default 500
+   */
+  asideWidth?: number;
+  /**
+   * The panels of the sidebar: `AssetDetail.Info`, `AssetDetail.DefaultMetadata`,
+   * `AssetDetail.Categorization`, `AssetDetail.LinksToItems` and
+   * `AssetDetail.Tracks`
+   */
+  children: ReactNode;
+};
+/**
+ * The details of an asset, the dialog of the media area: the preview of the
+ * image with its focal point, then the sidebar with the panels. The same
+ * parts as in the cms.
+ */
+declare function AssetDetail({ over, title, image, video, focalPoint, previewBox, cropPreviews, sequence, details, editImage, editVideo, dialog, asideWidth, children }: AssetDetailProps): React.JSX.Element;
+declare const AssetDetailWithParts: typeof AssetDetail & {
+  Info: typeof Info;
+  DefaultMetadata: typeof DefaultMetadata;
+  Categorization: typeof Categorization;
+  LinksToItems: typeof LinksToItems;
+  Tracks: typeof Tracks;
+  Player: typeof Player;
+  GenerateSubtitles: typeof GenerateSubtitles;
+  AddTrack: typeof AddTrack;
+};
+//#endregion
+//#region ../ui-static/src/lists/AuditLog.d.ts
+/** A column of the results of the audit log */
+type AuditLogColumnName = 'time' | 'actor' | 'action' | 'path' | 'environment' | 'role' | 'audit_log_id' | 'request_id';
+//#endregion
+//#region src/parts/AuditLog/AuditLog.d.ts
+/** A column of `AuditLog` */
+type AuditLogColumn = AuditLogColumnName;
+/** An event of `AuditLog`: a row of the table */
+type AuditLogEvent = {
+  /**
+   * The time of the event, as an ISO 8601 string, for example
+   * "2026-10-15T09:41:00Z". The table shows it in UTC. Give a date in the
+   * past: on the day of the date, the cms writes "Today".
+   */
+  occurredAt: string;
+  /** The user or the API token that did the action, with its avatar */
+  actor: {
+    /** The name, for example "Marta Rossi" */
+    name: string;
+    /** The email: it picks the color of the initials of the avatar */
+    email?: string;
+    /** The URL of the picture of the avatar. Without it, the avatar shows the initials. */
+    imageUrl?: string;
+  };
+  /**
+   * The name of the action in the API, for example `item_types.update`,
+   * `roles.update`, `items.publish` or `access_tokens.create`. The table
+   * shows the label of the cms ("Update model"), and an unknown name as
+   * code.
+   */
+  action: string;
+  /** The path of the request, for example "/item-types/1234" */
+  path: string;
+  /** The id of the environment, for the column "Environment" */
+  environment?: string;
+  /** The name of the role of the actor, for the column "Role" */
+  role?: string;
+};
+/** The props of `AuditLog` */
+type AuditLogProps = {
+  /** The events, newest first */
+  events: AuditLogEvent[];
+  /**
+   * The visible columns and their relative widths. The default is the
+   * layout of the cms: Time, Actor, Action and Path.
+   */
+  columns?: {
+    name: AuditLogColumn;
+    width: number;
+  }[];
+  /**
+   * The end of the results: "Searched until" with this time, as the cms
+   * writes it (for example "2026-10-15 09:12:00 Z"), and the marker "No
+   * more events". Without it, the table has no footer, as on a page with a
+   * next page.
+   */
+  end?: {
+    searchedUntil: string;
+  };
+};
+/**
+ * The audit log of the project (the project settings of the cms, at rest):
+ * the title bar with the filter button, and the table of the events. No
+ * event is open.
+ */
+export declare function AuditLog({ events, columns, end }: AuditLogProps): React.JSX.Element;
+//#endregion
+//#region src/parts/Collaboration/Collaboration.d.ts
+/**
+ * The steps of a record that another user edits, for the `sequence` of
+ * `Stage`, with `RecordForm` `collaborator`, `RecordForm.Field` `saved` (and
+ * `pointer` on one field) and `InfoAside.RevisionHistory` `saved`:
+ *
+ * - "saved": the other user saves. The lock ends, the values that they
+ *   saved show in the fields with a highlight, and when the highlight has
+ *   faded their version comes in at the top of the revision history. The
+ *   toolbar shows the status and the publish button again. Their avatar
+ *   stays, without the ring: they still look at the record. The pointer
+ *   shows the cursor of a text: the field is not read only anymore.
+ * - "rest": the other user closes the record, and the record is as before
+ *   their change. The pointer is not there.
+ * - "looking": the other user opens the record: their avatar shows, with
+ *   the tooltip of the cms.
+ * - "editing": the other user starts to edit: the ring on their avatar, the
+ *   lock and the button that takes it over in the toolbar, the fields read
+ *   only. The tooltip says that they edit the record.
+ * - "locked": as "editing", without the tooltip. The pointer comes to the
+ *   field, shows the cursor of a disabled input, and clicks: nothing
+ *   changes. It is the picture at rest, with the pointer still.
+ */
+export declare const COLLABORATION_SEQUENCE: StageSequence;
+//#endregion
+//#region src/parts/ContentSidebar/ContentSidebar.d.ts
+/** A folder of the menu */
+type ContentSidebarFolder = {
+  kind: 'folder';
+  /** A key that is unique in the menu */
+  id: string;
+  /** The name of the folder. An emoji at the start becomes the icon. */
+  name: string;
+  /**
+   * The folder shows its items. A closed folder shows only its chevron.
+   * @default false
+   */
+  open?: boolean;
+  /** The items in the folder. Only an open folder shows them. */
+  items?: ContentSidebarItem[];
+};
+/** A model of the menu: it opens the records of the model */
+type ContentSidebarModel = {
+  kind: 'model';
+  /** A key that is unique in the menu */
+  id: string;
+  /**
+   * The name of the model. An emoji at the start becomes the icon, as in
+   * the cms.
+   */
+  name: string;
+  /**
+   * The model has one record. Without an emoji, the icon is the one of a
+   * single record.
+   * @default false
+   */
+  singleton?: boolean;
+  /**
+   * The row of the page that the scene shows
+   * @default false
+   */
+  active?: boolean;
+  /** An icon in place of the emoji or of the icon of the kind */
+  icon?: ReactNode;
+};
+/** An item of the menu of the models */
+type ContentSidebarItem = ContentSidebarFolder | ContentSidebarModel;
+/** The props of `ContentSidebar` */
+type ContentSidebarProps = {
+  /**
+   * The title of the pane
+   * @default { id: 'nav.manageItemTypes' }
+   */
+  title?: TextMessage;
+  /** The items at the first level of the menu */
+  items: ContentSidebarItem[];
+};
+/** The menu of the models: the same parts as the sidebar of the cms */
+export declare function ContentSidebar({ title, items }: ContentSidebarProps): React.JSX.Element;
+//#endregion
+//#region src/parts/FieldSettings/FieldSettings.d.ts
+/**
+ * The steps of a click on a field of a `ModelPage` (`clicked`), that opens
+ * its `FieldSettings` on the tab Settings, then of a click on the tab
+ * Presentation, then of a click on the tab Validations. The last step is
+ * the tab Validations: the picture at rest.
+ */
+export declare const FIELD_SETTINGS_SEQUENCE: StageSequence;
+/**
+ * The steps of a click on a field of a `ModelPage` (`clicked`), that opens
+ * the `FieldSettings` of a text field on the tab Settings, then of a click
+ * on the tab Presentation, then of a click on the button "Change" of the
+ * editor. The last step is the menu of the editors, open: the picture
+ * at rest.
+ */
+export declare const FIELD_EDITOR_SEQUENCE: StageSequence;
+/** The validators of an asset field, on the tab Validations */
+type FieldSettingsValidators = {
+  /**
+   * The field must have an asset
+   * @default false
+   */
+  required?: boolean;
+  /**
+   * The smallest size of an image, in px: "Accept only specified image
+   * dimensions", with "At least"
+   */
+  minImageDimensions?: {
+    width: number;
+    height: number;
+  };
+  /**
+   * The image must have its alternate text
+   * @default false
+   */
+  requiredAlt?: boolean;
+};
+/** A field of the tab Settings */
+type FieldSettingsField = 'label' | 'apiKey' | 'contentLink' | 'localized';
+/** The props of `FieldSettings` */
+type FieldSettingsProps = {
+  /**
+   * The type of the field. "file" is a field "Single asset", with the tab
+   * Validations. "text" is a field "Multiple-paragraph text": its tabs are
+   * Settings, Validations, Default value and Presentation. Its tab
+   * Presentation shows the editor of the field, "Markdown editor", with
+   * its toolbar buttons and the menu of the editors open.
+   * @default 'file'
+   */
+  type?: 'file' | 'text';
+  /** The name of the field, for example "Hero image" */
+  label: string;
+  /** The API key of the field, for example "hero_image" */
+  apiKey: string;
+  /** The ID of the field, at the right of the tabs */
+  id: string;
+  /**
+   * The field is localized
+   * @default false
+   */
+  localized?: boolean;
+  /**
+   * The validators that are on, for a "file" field
+   * @default none
+   */
+  validators?: FieldSettingsValidators;
+  /**
+   * The help text of the field, on the tab Presentation. The record editor
+   * shows it under the field.
+   * @default none
+   */
+  hint?: string;
+  /**
+   * The open tab. "settings" is a still picture of the tab Settings (the
+   * name, the field ID and the localization). Do not use it with a
+   * sequence: the steps of FIELD_SETTINGS_SEQUENCE need the tab
+   * Validations, and the steps of FIELD_EDITOR_SEQUENCE need the tab
+   * Presentation.
+   * @default 'validations' for a "file" field, 'presentation' for a "text" field
+   */
+  tab?: 'settings' | 'validations' | 'presentation';
+  /**
+   * The fields of the tab Settings, in the order to show them. The cms
+   * shows the name, the field ID, the switch of Content Link (only for a
+   * "text" field), then the localization: put the subject of the scene
+   * first.
+   * @default ['label', 'apiKey', 'contentLink', 'localized']
+   */
+  settingsOrder?: FieldSettingsField[];
+  /**
+   * The dialog is over the other parts of the screen, on the backdrop of
+   * the cms. Without it, the dialog is alone on the stage.
+   * @default false
+   */
+  over?: boolean;
+};
+/**
+ * The dialog "Edit field" of the cms for a field "Single asset", on its tab
+ * Validations: a checkbox for each validator, with the options of the
+ * validators that are on. The tab Settings (the name, the field ID and the
+ * localization) and the tab Presentation (the help text) are in the markup
+ * too: the steps of FIELD_SETTINGS_SEQUENCE show them, and the screen
+ * without a step hides them. The cms renders only the
+ * content of the active tab: the scene shows one at a time. With `tab`
+ * "settings", the dialog shows only the tab Settings, with no step.
+ *
+ * With `type` "text", the dialog is on its tab Presentation: the help text,
+ * then the editor "Markdown editor" with its toolbar buttons and the menu
+ * of the editors open. The tab Settings is in the markup too, for the steps
+ * of FIELD_EDITOR_SEQUENCE.
+ */
+export declare function FieldSettings({ type, label, apiKey, id, localized, validators, hint, tab, settingsOrder, over }: FieldSettingsProps): React.JSX.Element;
+//#endregion
+//#region src/parts/InfoAside/AiTranslations.d.ts
+/**
+ * The steps of a run of the panel AI Translations (`InfoAside.AiTranslations`
+ * with `sequence`): the panel at rest with the pointer that comes to the
+ * button, the click, then four batches of jobs, and the end of the run.
+ * Each job starts in a batch and ends in a later batch, or in the step
+ * "done" (see `InfoAsideAiTranslationsJob`). The last step is the picture
+ * at rest: all the jobs ended and the message of the end shows.
+ */
+export declare const AI_TRANSLATIONS_SEQUENCE: StageSequence;
+/** A job of the run: one field to one locale */
+type InfoAsideAiTranslationsJob = {
+  /** The label of the field, for example "Name" */
+  field: Message;
+  /** The name of the target locale, for example "Italian" */
+  locale: Message;
+  /**
+   * The batch of AI_TRANSLATIONS_SEQUENCE where the job starts, from 1 to 4
+   * @default 1
+   */
+  start?: 1 | 2 | 3 | 4;
+  /**
+   * The batch where the job ends, after `start`: from 2 to 4, or 5 for the
+   * step "done"
+   * @default 5
+   */
+  end?: 2 | 3 | 4 | 5;
+};
+/** The props of `InfoAside.AiTranslations` */
+type InfoAsideAiTranslationsProps = {
+  /** The name of the source locale, for example "English" */
+  source: Message;
+  /** The names of the target locales */
+  targets: Message[];
+  /** The jobs of the run, in the order that they start */
+  jobs: InfoAsideAiTranslationsJob[];
+  /** The line at the end of the run, after a check */
+  message: Message;
+  /**
+   * The panel plays the steps of AI_TRANSLATIONS_SEQUENCE. Without it, the
+   * panel shows the end of the run.
+   * @default false
+   */
+  sequence?: boolean;
+};
+/**
+ * The panel "AI Translations" of the plugin AI Translations, after the
+ * record info. The plugin is not in this repository: the part is a copy of
+ * its sidebar (datocms/plugins, ai-translations/src/entrypoints/Sidebar/),
+ * with the components of ui-public. Before the run: the source locale, the
+ * target locales and the button "Translate all fields". During the run:
+ * a progress bar, and one line with the first job that did not end. At
+ * the end: the full bar, and a line with a check that asks to review and
+ * save.
+ */
+declare function AiTranslations({ source, targets, jobs, message, sequence }: InfoAsideAiTranslationsProps): React.JSX.Element;
+//#endregion
+//#region src/parts/InfoAside/InfoAside.d.ts
+/**
+ * The steps of the open stage of `InfoAside.RecordInfo`, for the `sequence`
+ * of `Stage`: the stage closed, the menu open, the pointer on the option of
+ * `menu.hovered`, its tooltip with the description of the stage. The
+ * tooltip opens after 450ms on the option, as the Tooltip of the cms. The
+ * last step is the picture at rest.
+ */
+export declare const STAGE_MENU_SEQUENCE: StageSequence;
+/** The props of `InfoAside` */
+type InfoAsideProps = {
+  /**
+   * The active tab. "websitePreview" is the tab of the plugin Web Previews:
+   * give a `WebPreview` as `children`.
+   * @default 'info'
+   */
+  tab?: 'info' | 'websitePreview';
+  /**
+   * The panels: `InfoAside.RecordInfo`, `InfoAside.Panel` and the others.
+   * With the tab "websitePreview", a `WebPreview`.
+   */
+  children: ReactNode;
+};
+/** The props of `InfoAside.Panel` */
+type InfoAsidePanelProps = {
+  /** The title of the panel */
+  title: Message;
+  /**
+   * The content touches the sides of the panel, for a list of rows
+   * @default false
+   */
+  flush?: boolean;
+  /**
+   * The user closed the panel: only its title shows. The cms remembers it
+   * for each panel.
+   * @default false
+   */
+  closed?: boolean;
+  /** The content of the panel */
+  children: ReactNode;
+};
+/** The props of `InfoAside.Links` */
+type InfoAsideClosableProps = Pick<InfoAsidePanelProps, 'closed'>;
+/** The props of `InfoAside.PublishingSchedule` */
+type InfoAsidePublishingScheduleProps = InfoAsideClosableProps & {
+  /** The schedule of the record. Without it, the panel says that there is none. */
+  schedule?: {
+    /**
+     * What happens at the date
+     * @default 'publication'
+     */
+    action?: 'publication' | 'unpublishing';
+    /** When it happens, as the cms formats it: "10/26/2026, 09:00" */
+    date: string;
+    /** The content, for example "English, Italian". Without it, the whole record. */
+    scope?: string;
+  };
+};
+/** The props of `InfoAside.Blank` */
+type InfoAsideBlankProps = {
+  /** The text that tells that the panel is empty */
+  message: Message;
+};
+/** The props of `InfoAside.RecordInfo` */
+type InfoAsideRecordInfoProps = {
+  /** The ID of the record */
+  id: string;
+  status: RecordStatus;
+  /** The date of creation, as the cms formats it: "09/21/2025, 13:34" */
+  createdAt: string;
+  /** The date of the last change, as the cms formats it */
+  updatedAt: string;
+  /** The row "Currently used blocks", for example "0/10000 (0%)". Without it, the row does not show. */
+  blocks?: string;
+  /** The user that made the record */
+  createdBy: {
+    name: string;
+    imageUrl?: string;
+  };
+  /**
+   * The stage of the record in the workflow of its model. Without it, the
+   * model has no workflow and the row does not show.
+   */
+  stage?: InfoAsideStage;
+};
+/** The row "Stage" of `InfoAside.RecordInfo` */
+type InfoAsideStage = {
+  /** The name of the stage of the record, for example "In review" */
+  name: string;
+  /**
+   * The stages that the user can move the record to, in the order of the
+   * workflow. With at least one, the stage is a menu, as in the cms;
+   * without them, it is a text.
+   */
+  moves?: InfoAsideStageMove[];
+  /**
+   * The menu is open, and the pointer is on the stage at this index of
+   * `moves`, when it is set: its description shows in a tooltip, on the
+   * left of the menu
+   */
+  menu?: {
+    hovered?: number;
+  };
+};
+/** A stage in the menu of the row "Stage" */
+type InfoAsideStageMove = {
+  /** The name of the stage, for example "Approved" */
+  name: string;
+  /** The description of the stage, in the tooltip of its option */
+  description?: string;
+};
+/** A page of the website, in the panel "Related website pages" */
+type InfoAsideWebsitePage = {
+  /** The name of the frontend, for example "Production" */
+  environment: string;
+  /** The name of the link, for example "Draft version" */
+  label: Message;
+  /** The path or the URL of the page */
+  path: string;
+  /**
+   * Shows the button that opens the page in the visual editor
+   * @default false
+   */
+  visualEditing?: boolean;
+};
+/** The props of `InfoAside.WebsitePages` */
+type InfoAsideWebsitePagesProps = {
+  pages: InfoAsideWebsitePage[];
+};
+/** A version of the record, in the panel "Revision history" */
+type InfoAsideVersion = {
+  /** When the version was saved, as the cms formats it: "Today, 10:44:12" */
+  date: string;
+  /** The user that saved the version */
+  editor?: string;
+  /**
+   * The version is the published one: its status says "Published", and the
+   * dot of the timeline is green
+   * @default false
+   */
+  published?: boolean;
+  /**
+   * The version was published once, and is not anymore: the dot of the
+   * timeline is a faded green
+   * @default false
+   */
+  wasPublished?: boolean;
+  /** When the version was published, for example "Published since Today, 09:15:02" */
+  publication?: string;
+};
+/** The props of `InfoAside.RevisionHistory` */
+type InfoAsideRevisionHistoryProps = {
+  /**
+   * The last versions of the record, the newest first: the first one is the
+   * current version. The cms shows five at most.
+   */
+  versions: InfoAsideVersion[];
+  /**
+   * The number of the older versions, in the link at the end of the
+   * timeline. Without it, the timeline has no link.
+   */
+  more?: number;
+  /**
+   * The version that another user saves, with COLLABORATION_SEQUENCE: it
+   * comes in at the top at the step "saved", and it becomes the current
+   * version. Give it with `RecordForm` `collaborator`.
+   */
+  saved?: InfoAsideVersion;
+};
+/**
+ * The side panel of the record editor, with the tab "Info" or the tab
+ * "Website preview" open. The label of the second tab is the label that
+ * the plugin gives to its sidebar: it is not a text of the cms.
+ */
+declare function InfoAside({ tab, children }: InfoAsideProps): React.JSX.Element;
+/** A panel of the aside, open, with a title */
+declare function Panel({ title, flush, closed, children }: InfoAsidePanelProps): React.JSX.Element;
+/** The text of an empty panel */
+declare function Blank({ message }: InfoAsideBlankProps): React.JSX.Element;
+/** The panel "Record info" */
+declare function RecordInfo({ id, status, createdAt, updatedAt, blocks, createdBy, stage }: InfoAsideRecordInfoProps): React.JSX.Element;
+/** The panel "Publishing schedule": the schedule of the record, if any */
+declare function PublishingSchedule({ closed, schedule }: InfoAsidePublishingScheduleProps): React.JSX.Element;
+/** The panel "Related website pages" */
+declare function WebsitePages({ pages }: InfoAsideWebsitePagesProps): React.JSX.Element;
+/** The panel "Revision history": the last versions on a timeline */
+declare function RevisionHistory({ versions, more, saved }: InfoAsideRevisionHistoryProps): React.JSX.Element;
+/** The panel "Links", with no record that links to this record */
+declare function Links({ closed }: InfoAsideClosableProps): React.JSX.Element;
+declare const InfoAsideWithParts: typeof InfoAside & {
+  Panel: typeof Panel;
+  Blank: typeof Blank;
+  RecordInfo: typeof RecordInfo;
+  PublishingSchedule: typeof PublishingSchedule;
+  WebsitePages: typeof WebsitePages;
+  RevisionHistory: typeof RevisionHistory;
+  Links: typeof Links;
+  AiTranslations: typeof AiTranslations;
+};
+//#endregion
+//#region src/parts/MediaArea/MediaArea.d.ts
+/**
+ * The steps of a click on an asset of `MediaArea` (`clicked`), that opens
+ * its `AssetDetail` over the media area. The last step is the dialog open:
+ * the picture at rest.
+ */
+export declare const OPEN_ASSET_SEQUENCE: StageSequence;
+/** An asset in the grid of `MediaArea` */
+type MediaAreaAsset = {
+  /** The name of the file, in the caption of the card */
+  filename: string;
+  /** The URL of the image */
+  src: string;
+  /** The width of the image, in px */
+  width: number;
+  /** The height of the image, in px */
+  height: number;
+  /**
+   * The card is selected: it shows the selected border and its checkbox
+   * @default false
+   */
+  selected?: boolean;
+  /**
+   * The pointer comes on the card and clicks it, with
+   * `OPEN_ASSET_SEQUENCE`. Give it to one asset only.
+   * @default false
+   */
+  clicked?: boolean;
+};
+/** A saved filter of the menu of the saved filters */
+type MediaAreaSavedFilters = {
+  /** The name of the active filter. Without it, no filter is active. */
+  active?: string;
+  /** The names of the filters that all the users see */
+  shared?: string[];
+  /** The names of the filters of the user */
+  personal?: string[];
+  /**
+   * The menu is open, and the pointer is on the filter with this name, when
+   * it is set
+   */
+  menu?: {
+    hovered?: string;
+  };
+};
+/** A source of assets of a plugin, in the menu of the upload button */
+type MediaAreaSource = {
+  /** The name of the source, for example "Unsplash" */
+  name: string;
+  /** The icon of the plugin */
+  icon: ReactNode;
+};
+/** The props of `MediaArea` */
+type MediaAreaProps = {
+  /**
+   * The title of the page: the collection, or all the assets
+   * @default "All assets"
+   */
+  title?: TextMessage;
+  /** The number of assets, next to the title */
+  count: number;
+  /** The assets of the grid, in the order of the grid */
+  assets: MediaAreaAsset[];
+  /**
+   * The width of a card, in px. The height is 3/4 of the width, as in the
+   * cms. With `gridWidth`, it is the target width of the cms: the real width
+   * is the nearest width that fills the row.
+   * @default 180
+   */
+  cardWidth?: number;
+  /**
+   * The width of the grid in the screen, in px. The cms measures the grid; a
+   * scene gives it. With it, the cards fill each row as in the cms: the
+   * number of cards in a row is the nearest to the width of the grid
+   * divided by `cardWidth` and the gutter, and all the cards have the same
+   * width. Without it, each card has the width `cardWidth`.
+   */
+  gridWidth?: number;
+  /**
+   * The saved filters. Without them, the title bar has no menu of the saved
+   * filters, as in the cms.
+   */
+  savedFilters?: MediaAreaSavedFilters;
+  /**
+   * The sources of the plugins. With at least one, the upload button is a
+   * split button with a menu of the sources, as in the cms.
+   */
+  sources?: MediaAreaSource[];
+  /**
+   * The menu of the upload button is open, and the pointer is on the source
+   * at this index of `sources`, when it is set
+   */
+  uploadMenu?: {
+    hovered?: number;
+  };
+};
+/** A collection of the sidebar of the media area */
+type MediaAreaCollection = {
+  /** A key that is unique in the tree */
+  id: string;
+  /** The name of the collection. An emoji at the start becomes the icon. */
+  name: string;
+  /**
+   * The collection shows its collections
+   * @default false
+   */
+  open?: boolean;
+  /**
+   * The collection of the page
+   * @default false
+   */
+  active?: boolean;
+  /** The collections in the collection */
+  children?: MediaAreaCollection[];
+};
+/** The props of `MediaArea.Sidebar` */
+type MediaAreaSidebarProps = {
+  /** The collections at the first level of the tree */
+  collections: MediaAreaCollection[];
+};
+/**
+ * The page of the media library: its toolbar and the grid of the assets,
+ * the same parts as in the cms
+ */
+declare function MediaAreaPage({ title, count, assets, cardWidth, gridWidth, savedFilters, sources, uploadMenu }: MediaAreaProps): React.JSX.Element;
+/**
+ * The sidebar of the media area: "All assets", then the tree of the
+ * collections. "All assets" is active when no collection is.
+ */
+declare function Sidebar({ collections }: MediaAreaSidebarProps): React.JSX.Element;
+declare const MediaArea: typeof MediaAreaPage & {
+  Sidebar: typeof Sidebar;
+};
+//#endregion
+//#region src/parts/ModelPage/ModelPage.d.ts
+/** A field of the model, in the list of the page */
+type ModelPageField = {
+  /** The type of the field: its icon, its colors and its name */
+  type: FieldType;
+  /** The label of the field, for example "Hero image" */
+  label: string;
+  /** The API key of the field, for example "hero_image" */
+  apiKey: string;
+  /**
+   * The field has the validator "required": a star after the label
+   * @default false
+   */
+  required?: boolean;
+  /**
+   * The field is localized: the icon of the locales after the label
+   * @default false
+   */
+  localized?: boolean;
+  /**
+   * The models that a link field accepts, with the emoji at the start of
+   * their name, for example "🗂️ Categories". One model is a pill with its
+   * icon, as in the cms.
+   */
+  links?: string[];
+};
+/** The props of `ModelPage` */
+type ModelPageProps = {
+  /** The model of the page: its name without the emoji, for example "Products" */
+  model: string;
+  /** The emoji of the model, before its name in the title */
+  emoji?: string;
+  /** The fields of the model, in their order */
+  fields: ModelPageField[];
+  /**
+   * The API key of the field that the pointer clicks, with
+   * FIELD_SETTINGS_SEQUENCE: the click opens the dialog of the field
+   * (`FieldSettings`). Without the sequence the dialog covers it.
+   */
+  clicked?: string;
+};
+/**
+ * The page of a model in the schema of the cms: the toolbar with the button
+ * "Add new field" closed, then the fields of the model, each in its card
+ * with the grip that drags it. The cms shows the menu of a field on hover:
+ * the scene shows none.
+ */
+export declare function ModelPage({ model, emoji, fields, clicked }: ModelPageProps): React.JSX.Element;
+//#endregion
+//#region src/parts/ModelSettings/ModelSettings.d.ts
+/** A switch of the tab "Settings" of a model */
+type ModelSetting = 'draftMode' | 'draftSaving' | 'allLocalesRequired' | 'inverseRelationships';
+/** The props of `ModelSettings` */
+type ModelSettingsProps = {
+  /**
+   * The switches of the tab "Settings", in the order to show them, with
+   * their values. The cms shows `draftMode`, `draftSaving`,
+   * `allLocalesRequired`, then `inverseRelationships`: a scene can put the
+   * switch that it shows first.
+   */
+  settings: {
+    name: ModelSetting;
+    on: boolean;
+  }[];
+};
+/**
+ * The dialog "Edit model" of the cms, at rest, on its tab "Settings": the
+ * switches of the model, with their hints. The other tabs are closed.
+ */
+export declare function ModelSettings({ settings }: ModelSettingsProps): React.JSX.Element;
+//#endregion
+//#region ../ui-static/src/form/SeoInput.d.ts
+/** The previews of the SEO field, with the names of the cms */
+type SeoPreviewType = 'google' | 'twitter' | 'facebook' | 'linkedin' | 'slack' | 'whatsapp' | 'telegram';
+/** An image of a preview: the share image or the favicon of the site */
+type SeoPreviewImage = {
+  /** The URL of the image, at the size of the preview */
+  src: string;
+  /** The width of the original image, in px */
+  width: number;
+  /** The height of the original image, in px */
+  height: number;
+};
+//#endregion
+//#region src/parts/SeoInput/SeoInput.d.ts
+/** A preview of the SEO field: a search engine, a social network or a chat app */
+type SeoInputPreview = SeoPreviewType;
+/** An image of a preview, at its real size */
+type SeoInputImage = SeoPreviewImage & {
+  /** The alt text of the upload. `SeoDialog` shows it under the image. */
+  alt?: Message;
+};
+/** The page that the SEO field describes, and the texts of its previews */
+type SeoInputPage = {
+  /** The URL of the page, for example "https://example.com/blog/hello" */
+  url: string;
+  /** The name of the site, as in the SEO settings of the project */
+  siteName: string;
+  /**
+   * The title of the page. The previews show it as given: write it short,
+   * as the cms truncates the title of Google at 60 characters.
+   */
+  title: string;
+  /**
+   * The text that Google adds after the title, for example " - Field
+   * Notes": the title suffix of the SEO settings of the project
+   */
+  titleSuffix?: string;
+  /**
+   * The description of the page. Google shows it as given: write it short,
+   * as the cms truncates it at 160 characters.
+   */
+  description: string;
+  /** The share image */
+  image?: SeoInputImage;
+  /** The favicon of the site. Without it, Google shows a globe. */
+  favicon?: SeoInputImage;
+  /**
+   * The card of X: `summary` puts a square image beside the text
+   * @default 'summary_large_image'
+   */
+  twitterCard?: 'summary' | 'summary_large_image';
+  /**
+   * The text of the posts of X, Facebook and LinkedIn, before the link.
+   * Without it, the placeholder of the cms (Lorem ipsum).
+   */
+  post?: string;
+  /** The time of the messages of the chat apps, for example "09:41" */
+  time: string;
+  /** The date of the posts of X, for example "Mar 4" */
+  date: string;
+};
+/** The props of `RecordForm.SeoInput` */
+type RecordFormSeoInputProps = {
+  /** The previews of the field, in the bar, in the order of the cms */
+  previews: SeoInputPreview[];
+  /** The preview that the field shows */
+  current: SeoInputPreview;
+  /** The page and the texts of the previews */
+  page: SeoInputPage;
+  /**
+   * With SEO_EDIT_SEQUENCE: the pointer comes to the Edit button and
+   * clicks it, and the `SeoDialog` with `over` opens
+   * @default false
+   */
+  edit?: boolean;
+};
+/**
+ * The steps of a click on the Edit button of the SEO field (`edit`), that
+ * opens the `SeoDialog` with `over`. The last step is the open dialog: the
+ * picture at rest.
+ */
+export declare const SEO_EDIT_SEQUENCE: StageSequence;
+/**
+ * The SEO field of a record with a value: the bar with the previews and the
+ * Edit button, and the current preview
+ */
+declare function SeoInput({ previews, current, page, edit }: RecordFormSeoInputProps): React.JSX.Element;
+/** The props of `SeoDialog` */
+type SeoDialogProps = {
+  /**
+   * The page: the dialog shows its title, its description and its share
+   * image, with its alt text. Without an image, the field of the image
+   * does not show.
+   */
+  page: SeoInputPage;
+  /**
+   * The dialog is over the other parts of the screen, with the backdrop of
+   * the cms: put it after the `RecordEditorLayout`, in the same `Stage`.
+   * With SEO_EDIT_SEQUENCE it opens after the click on the Edit button.
+   * Without `over`, the dialog is alone, as `SelectivePublishing`.
+   * @default false
+   */
+  over?: boolean;
+};
+/**
+ * The dialog "Edit SEO settings" of the cms, at rest, that the Edit button
+ * of the SEO field opens: the title, the description and the share image of
+ * the page, with the hints of the cms. The settings of the field can hide
+ * the Twitter (X) card type and the switch "noindex", thus the dialog does
+ * not show them.
+ */
+export declare function SeoDialog({ page, over }: SeoDialogProps): React.JSX.Element;
+/**
+ * The steps of `SeoPreviewStack`: each card comes to the front in turn, for
+ * 5 seconds. The stack has each card twice, thus there are six steps.
+ */
+export declare const PREVIEW_STACK_SEQUENCE: StageSequence;
+/** The props of `SeoPreviewStack` */
+type SeoPreviewStackProps = {
+  /** The previews of the field, in the bar, in the order of the cms */
+  previews: SeoInputPreview[];
+  /** The three previews of the cards, the front one first */
+  cards: [SeoInputPreview, SeoInputPreview, SeoInputPreview];
+  /** The page and the texts of the previews */
+  page: SeoInputPage;
+};
+/**
+ * The SEO field three times, in a stack of cards: each card shows another
+ * preview of the same page, and the two cards behind peek out at the top.
+ * With PREVIEW_STACK_SEQUENCE the front card leaves and the next comes
+ * forward, in a loop. The stack has each card twice: a card that leaves
+ * goes to the back unseen, while its copy comes in behind the others.
+ */
+export declare function SeoPreviewStack({ previews, cards, page }: SeoPreviewStackProps): React.JSX.Element;
+//#endregion
+//#region src/parts/RecordForm/Body.d.ts
+/** The props of `RecordForm.Body` */
+type RecordFormBodyProps = {
+  /** The fields: `RecordForm.Field` elements */
+  children: ReactNode;
+};
+/** The props of `RecordForm.Above` */
+type RecordFormAboveProps = {
+  /** The fields above the highlighted field: `RecordForm.Field` elements */
+  children: ReactNode;
+};
+/**
+ * The column of the fields of the record editor (`ItemFormContent` of
+ * ui-static), without the toolbar and the pane: at most 800px wide, in the
+ * center of the screen. Use it for a scene that shows only some fields.
+ */
+declare function Body({ children }: RecordFormBodyProps): React.JSX.Element;
+/**
+ * The fields above the highlighted field. The cms scrolls the form to the
+ * highlighted field, with a margin of 40px above it (scroll-margin-top of
+ * `.form__field`): these fields go up, out of the view. The scene has no
+ * script to scroll, thus `Body` moves these fields and the fields after
+ * them up in one box, by the height of these fields (see
+ * `.SceneFormScroll`). Outside a `RecordForm`, the fields do not move.
+ */
+declare function Above({ children }: RecordFormAboveProps): React.JSX.Element;
+//#endregion
+//#region src/parts/RecordForm/PluginIcon.d.ts
+declare const ICONS: {
+  'chart-column': React.FunctionComponent<React.SVGProps<SVGSVGElement> & {
+    title?: string;
+    titleId?: string;
+    desc?: string;
+    descId?: string;
+  }>;
+  globe: React.FunctionComponent<React.SVGProps<SVGSVGElement> & {
+    title?: string;
+    titleId?: string;
+    desc?: string;
+    descId?: string;
+  }>;
+  language: React.FunctionComponent<React.SVGProps<SVGSVGElement> & {
+    title?: string;
+    titleId?: string;
+    desc?: string;
+    descId?: string;
+  }>;
+};
+/** The name of an icon of a plugin action that the kit has */
+type PluginIconName = keyof typeof ICONS;
+//#endregion
+//#region src/parts/RecordForm/FieldMenu.d.ts
+/** The open menu of `RecordForm.Field` */
+type RecordFormFieldMenu = {
+  /**
+   * The API key of the field. The menu starts with the option of the cms
+   * for a user that can edit the schema ("Go to <api key> field"), then a
+   * separator. Without it, the menu has only the actions of the plugins.
+   */
+  apiKey?: string;
+  /**
+   * The actions that the plugins add (`fieldDropdownActions` of the plugin
+   * SDK), in their order
+   */
+  actions: RecordFormFieldMenuItem[];
+};
+/**
+ * An action of a plugin in the menu of a field. With `actions`, it is a
+ * group: an option that opens a submenu with these actions.
+ */
+type RecordFormFieldMenuItem = {
+  /** The label of the action */
+  label: TextMessage;
+  /** The icon of the action: the name of a Font Awesome icon, as a plugin gives it */
+  icon?: PluginIconName;
+  /** The actions of the submenu of a group */
+  actions?: {
+    label: TextMessage;
+    icon?: PluginIconName;
+  }[];
+  /**
+   * The submenu of the group is open, at the right of the option, as in
+   * the cms when the pointer is on the option. Give it to one group.
+   * @default false
+   */
+  open?: boolean;
+};
+/**
+ * The steps of the open menu of `RecordForm.Field` (`menu`), for the
+ * `sequence` of `Stage`: the "⋮" button of the field, then the menu open
+ * under it, then the submenu of the group with `open` at its right. The
+ * last step is the picture at rest.
+ */
+export declare const FIELD_MENU_SEQUENCE: StageSequence;
+//#endregion
+//#region src/parts/RecordForm/Field.d.ts
+/** The props of `RecordForm.Field` */
+type RecordFormFieldProps = {
+  /** The name of the field */
+  label: Message;
+  /**
+   * Adds an asterisk to the label
+   * @default false
+   */
+  required?: boolean;
+  /**
+   * Adds the icon that tells that the value is different for each locale
+   * @default false
+   */
+  localized?: boolean;
+  /** A short help under the input */
+  hint?: Message;
+  /**
+   * The error of the value, as the cms shows it after the user saves: the
+   * message under the input, above the hint, and the label in the danger
+   * color. Give the text of the cms, for example "Image must be at least
+   * 1200x675px" (the message `fieldError.VALIDATION_IMAGE_DIMENSIONS`).
+   */
+  error?: Message;
+  /**
+   * The input: a part of `RecordForm`, `StructuredTextInput`, or an input
+   * of the kit with a constant value
+   */
+  children: ReactNode;
+  /**
+   * The same input with the value that another user saves. With
+   * COLLABORATION_SEQUENCE it takes the place of `children` at the step
+   * "saved", with a short highlight. Without the sequence, it does not
+   * show: the picture is the record while the other user still edits it.
+   */
+  saved?: ReactNode;
+  /**
+   * The pointer of the user that looks at the record, on the input. For a
+   * `RecordForm` with a `collaborator`: the picture shows the pointer on
+   * the read-only input, with the cursor of the cms for a disabled input
+   * (not-allowed). With COLLABORATION_SEQUENCE, the pointer comes at the
+   * step "locked" and its click does nothing; at the step "saved" it shows
+   * the cursor of a text, as the input is not read only anymore. Give it
+   * to one field.
+   * @default false
+   */
+  pointer?: boolean;
+  /**
+   * The cms highlights the field, as after a click on its value in the
+   * preview of the website (the hash "#fieldPath=" of the URL). Put the
+   * fields above it in a `RecordForm.Above`: the form shows scrolled to
+   * the field. In a panel of `VisualEditorLayout`, the form opens at its
+   * top, and one second later it scrolls to the field and the highlight
+   * plays, as in the cms, each time that the panel shows.
+   * @default false
+   */
+  highlighted?: boolean;
+  /**
+   * The menu of the field is open: the "⋮" button at the end of the label,
+   * and its menu under it, as in the cms after a click on the button
+   */
+  menu?: RecordFormFieldMenu;
+};
+/** A field of the record: the label and the input */
+declare function Field({ label, required, localized, hint, error, children, saved, pointer, highlighted, menu }: RecordFormFieldProps): React.JSX.Element;
+//#endregion
+//#region src/parts/RecordForm/FileInput.d.ts
+/** The props of `RecordForm.FileInput`: an image or a media, not the two */
+type RecordFormFileInputProps = ({
+  /**
+   * The image of the upload, at its real size. The card fits it in a
+   * box 200px high, with 10px around it, as the cms.
+   */
+  image: {
+    src: string;
+    width: number;
+    height: number;
+  };
+  media?: never;
+} | {
+  image?: never;
+  /**
+   * A picture of the upload that is not an image, for example a video
+   * that the host plays. `width` and `height` give only its ratio: the
+   * card makes it as large as the box, with 10px around it, and never
+   * wider than the card. The node fills the size that the card gives.
+   */
+  media: {
+    node: ReactNode;
+    width: number;
+    height: number;
+  };
+}) & {
+  /** The text under the image, for example the alt text or "No metadata set" */
+  caption?: Message;
+};
+declare function FileInput({ image, media, caption }: RecordFormFileInputProps): React.JSX.Element;
+//#endregion
+//#region src/parts/RecordForm/GalleryInput.d.ts
+/** The props of `RecordForm.GalleryInput` */
+type RecordFormGalleryInputProps = {
+  /** The uploads, in the order of the gallery */
+  images: {
+    /**
+     * The image, at its real size. The card fits it in a box 100px high,
+     * with 10px around it, as the cms.
+     */
+    src: string;
+    width: number;
+    height: number;
+    /**
+     * The alt text of the upload. The card shows it when the image has no
+     * title.
+     */
+    alt?: Message;
+    /**
+     * The title that the record sets on the upload. The card shows it in
+     * the ink color, as the cms does when the record and the upload both
+     * have a title.
+     */
+    title?: Message;
+    /**
+     * The text under the image when it has no alt and no title. The
+     * default is "No metadata set".
+     */
+    caption?: Message;
+  }[];
+};
+declare function GalleryInput({ images }: RecordFormGalleryInputProps): React.JSX.Element;
+//#endregion
+//#region src/parts/RecordForm/LocaleTabs.d.ts
+/** The locale tabs of `RecordForm` */
+type RecordFormLocales = {
+  /** The locales of the record, in the order of the project */
+  tabs: {
+    /** The code of the locale, for example "it" */
+    locale: string;
+    /** The name of the locale, for example "Italian" */
+    label: TextMessage;
+    /**
+     * A field of this locale has an error: the tab shows the triangle
+     * @default false
+     */
+    hasErrors?: boolean;
+  }[];
+  /** The code of the locale that the form shows */
+  active: string;
+  /**
+   * The button that manages the locales of the record, at the right end
+   * @default true
+   */
+  manage?: boolean;
+  /**
+   * The menu of the manage button is open, under the button: the locales
+   * of the record, to switch to one or to remove some, then the locales of
+   * the project that the record does not have, to add them. Give it with
+   * `manage`.
+   */
+  menu?: {
+    /** The locales of the project that the record does not have */
+    missing?: {
+      locale: string;
+      label: TextMessage;
+    }[];
+    /**
+     * The model has "All locales required": the editor cannot add or remove
+     * a locale, thus the menu only switches
+     * @default false
+     */
+    allLocalesRequired?: boolean;
+  };
+};
+//#endregion
+//#region src/parts/RecordForm/Plugin.d.ts
+/** The props of `RecordForm.Outlet` */
+type RecordFormOutletProps = {
+  /**
+   * The content of the plugin, from the website: the cms shows the page of
+   * the plugin in a frame without a border
+   */
+  children: ReactNode;
+};
+/**
+ * An outlet of a plugin above the fields (the hook renderItemFormOutlet of
+ * the plugin SDK). Put it in RecordForm.Body before the first field. The
+ * spaces are the spaces of the cms (ItemFormOutlets of apps/cms): a space
+ * under the outlets, a space above each outlet, and the padding of the
+ * page of the plugin. The kit draws no frame: the frame of a plugin has no
+ * border and no surface.
+ */
+declare function Outlet({ children }: RecordFormOutletProps): React.JSX.Element;
+/** The props of `RecordForm.PluginInput` */
+type RecordFormPluginInputProps = {
+  /**
+   * The editor of the plugin, from the website: the cms shows it in a
+   * frame without a border
+   */
+  children: ReactNode;
+};
+/**
+ * The editor of a field that a plugin gives (the hook renderFieldExtension
+ * of the plugin SDK). Put it in RecordForm.Field in place of an input. The
+ * space above the frame is the space of the cms (_PluginInput.css of
+ * apps/cms). The kit draws no frame: the frame of a plugin has no border
+ * and no surface.
+ */
+declare function PluginInput({ children }: RecordFormPluginInputProps): React.JSX.Element;
+//#endregion
+//#region src/parts/RecordForm/SlugInput.d.ts
+/** The props of `RecordForm.SlugInput` */
+type RecordFormSlugInputProps = {
+  /** The URL before the slug, for example "https://www.datocms.com/blog/" */
+  prefix: string;
+  /** The slug */
+  value: string;
+};
+declare function SlugInput({ prefix, value }: RecordFormSlugInputProps): React.JSX.Element;
+//#endregion
+//#region src/parts/RecordForm/StringInput.d.ts
+/** The props of `RecordForm.StringInput` */
+type RecordFormStringInputProps = {
+  /** The text in the input */
+  value: string;
+  /**
+   * The large text of the field that gives the title of the record
+   * @default false
+   */
+  large?: boolean;
+};
+/** A single-line text field */
+declare function RecordStringInput({ value, large }: RecordFormStringInputProps): React.JSX.Element;
+//#endregion
+//#region src/parts/RecordForm/TextareaInput.d.ts
+/** The props of `RecordForm.TextareaInput` */
+type RecordFormTextareaInputProps = {
+  /** The text in the input */
+  value: string;
+  /**
+   * The height of the input, in lines. The cms makes the input as high as
+   * its text, but a scene has no JS: give enough lines for the text, or
+   * use `grow`.
+   * @default 2
+   */
+  rows?: number;
+  /**
+   * The input is as high as all its text, as in the cms, also when the
+   * width of the screen changes. CSS does it (`field-sizing`): a browser
+   * without it shows `rows` lines. A short text makes the input lower than
+   * `rows`, thus use it for a long text.
+   * @default false
+   */
+  grow?: boolean;
+};
+/** A multi-line text field */
+declare function RecordTextareaInput({ value, rows, grow }: RecordFormTextareaInputProps): React.JSX.Element;
+//#endregion
+//#region src/parts/RecordForm/VideoInput.d.ts
+/** The props of `RecordForm.VideoInput` */
+type RecordFormVideoInputProps = {
+  /**
+   * The thumbnail that the provider gives, at its real size (YouTube: 16:9).
+   * The CSS of the cms fits it in a box 200px high, with 10px around it.
+   */
+  thumbnail: {
+    src: string;
+    width: number;
+    height: number;
+  };
+  /** The title of the video, from the provider: the caption of the card */
+  title: Message;
+  /**
+   * The pointer is on the card: the actions of the cms show on the
+   * thumbnail. A locked field shows only "Open video", as in the cms.
+   */
+  hovered?: boolean;
+};
+declare function VideoInput({ thumbnail, title, hovered }: RecordFormVideoInputProps): React.JSX.Element;
+//#endregion
+//#region src/parts/RecordForm/RecordForm.d.ts
+/** The props of `RecordForm` */
+type RecordFormProps = {
+  /** The title of the record, in the toolbar */
+  title: Message;
+  /**
+   * The title after the other user saves. With COLLABORATION_SEQUENCE it
+   * takes the place of `title` at the step "saved". For a `collaborator`.
+   */
+  savedTitle?: Message;
+  /** The icon before the title: the emoji of the model, as in the cms */
+  icon?: ReactNode;
+  /** The fields: `RecordForm.Field` elements */
+  children: ReactNode;
+  /**
+   * The locales of the record: the tabs in the short toolbar under the
+   * title, as in the cms for a model with localized fields
+   */
+  locales?: RecordFormLocales;
+  /**
+   * The publishing status of the record, in the toolbar before the publish
+   * button, with the long names of the cms ("Unpublished changes"). Without
+   * it, the toolbar shows no status.
+   */
+  status?: RecordStatus;
+  /**
+   * The form has changes that the user did not save. As in the cms, the
+   * status tells it ("Draft (unsaved changes)"), and the button Save takes
+   * the place of the publish button. "until-saved": the user saves the
+   * changes. With PREVIEW_RELOAD_SEQUENCE, the steps "editing" and
+   * "click-save" show the unsaved changes, and the pointer clicks Save. The
+   * other steps show the saved record. "after-translations": the panel AI
+   * Translations writes the changes. With AI_TRANSLATIONS_SEQUENCE, the
+   * steps "rest", "click" and "batch-1" show the saved record, and the
+   * other steps show the unsaved changes.
+   * @default false
+   */
+  dirty?: boolean | 'until-saved' | 'after-translations';
+  /**
+   * The model of the record has draft/publish. When it is false, as in the
+   * cms, a save publishes the record: the toolbar has no publish button,
+   * and the button Save is disabled when the form has no changes.
+   * @default true
+   */
+  draftMode?: boolean;
+  /**
+   * Another user has the record open and edits it: the toolbar shows their
+   * avatar after the title, with the ring of the user that edits, and the
+   * lock in place of the status and of the publish button. The fields are
+   * read only. The user that looks cannot take over the record: the
+   * toolbar has no button. With COLLABORATION_SEQUENCE, the steps before
+   * the last take back the lock.
+   */
+  collaborator?: RecordFormCollaborator;
+  /**
+   * The other users that have the record open and only look at it: the
+   * toolbar shows their avatars after the menu of the record, with no
+   * ring, as the cms shows them to the user that edits. The record is not
+   * locked. Not with `collaborator`.
+   */
+  viewers?: RecordFormViewer[];
+  /**
+   * A layer from the website over the publish button, for example a ring
+   * and a tag that tell the name of a hook (onBeforeItemsPublish). The
+   * button does not change.
+   */
+  publishMark?: ReactNode;
+};
+/** The user that edits the record, in `RecordForm` */
+type RecordFormCollaborator = {
+  /** The name of the user, for example "Maya Lindqvist" */
+  name: string;
+  /** The email of the user: it picks the color of the initials */
+  email?: string;
+  /** The image of the avatar. Without it, the avatar shows the initials. */
+  imageUrl?: string;
+  /** When the user started to edit, as the cms formats it: "10:42" */
+  since: string;
+};
+/** A user that looks at the record, in `RecordForm` `viewers` */
+type RecordFormViewer = Omit<RecordFormCollaborator, 'since'>;
+/** The record editor of the cms: the toolbar and the fields of the record */
+declare function RecordForm({ title, savedTitle, icon, children, locales, status, dirty, draftMode, collaborator, viewers, publishMark }: RecordFormProps): React.JSX.Element;
+declare const RecordFormWithParts: typeof RecordForm & {
+  Body: typeof Body;
+  Above: typeof Above;
+  Field: typeof Field;
+  StringInput: typeof RecordStringInput;
+  SlugInput: typeof SlugInput;
+  FileInput: typeof FileInput;
+  GalleryInput: typeof GalleryInput;
+  SeoInput: typeof SeoInput;
+  TextareaInput: typeof RecordTextareaInput;
+  VideoInput: typeof VideoInput;
+  Outlet: typeof Outlet;
+  PluginInput: typeof PluginInput;
+};
+//#endregion
+//#region src/parts/ModularContentField/ModularContentField.d.ts
+/**
+ * The steps of the open gap of `addAbove`, for the `sequence` of `Stage`:
+ * the blocks at rest, the gap under the pointer, the menu open, the option
+ * under the pointer, its card. The card opens after 300ms on the option, as
+ * the HoverCard of the cms. The last step is the picture at rest.
+ */
+export declare const ADD_BLOCK_SEQUENCE: StageSequence;
+/**
+ * The steps of two drags in a loop, for the `sequence` of `Stage`: the
+ * user drags a block one place down, then drags the block that went up
+ * one place down. Thus the field is in its first order again, and the
+ * loop has no jump. Each drag has its steps: the block that the user
+ * takes, the drag, the drop, and the block in its new place with the
+ * highlight of the cms. The last step is the picture at rest: the first
+ * drag, with the drop line. Give `dragged` to the block, `dragBack` to the
+ * next block, and `dropLine` "top" to the block after it. The blocks are
+ * closed: the two blocks have the same height.
+ */
+export declare const DRAG_BLOCK_SEQUENCE: StageSequence;
+/** The props of `ModularContentField` */
+type ModularContentFieldProps = Omit<RecordFormFieldProps, 'children'> & {
+  /** The blocks of the field: `ModularContentField.Block` elements */
+  children: ReactNode;
+};
+/** The props of `ModularContentField.Block` */
+type ModularContentBlockProps = {
+  /** The name of the block model, for example "Hero" */
+  name: TextMessage;
+  /** The icon before the name: the emoji of the block model, as in the cms */
+  icon?: ReactNode;
+  /**
+   * The fields of the block: `RecordForm.Field` elements. Only an open
+   * block shows them.
+   */
+  children?: ReactNode;
+  /**
+   * The user drags this block. The list shows it dim and closed, as the
+   * cms does. The picture of the drag, a copy of the header of the block,
+   * is `x` px to the right and `y` px below the block: where the pointer
+   * is. The browser draws this picture in the cms; the part places it
+   * with CSS. The pointer of the drag, a closed hand, is on the chevron of
+   * the picture. At the drop the picture goes in its place, and the hand
+   * stays where it is.
+   */
+  dragged?: {
+    x?: number;
+    y: number;
+  };
+  /**
+   * In DRAG_BLOCK_SEQUENCE, the user drags this block in the second drag:
+   * the block before it (with `dragged`) is now below it, and this block
+   * goes back below that block. Give the same offset as `dragged`. The
+   * picture at rest does not show this drag.
+   */
+  dragBack?: {
+    x?: number;
+    y: number;
+  };
+  /**
+   * The dragged block goes at this edge of the block: the cms shows the
+   * drop line in the space between this block and the next one
+   */
+  dropLine?: 'top' | 'bottom';
+  /**
+   * The user clicked the gap above the block: the gap shows its button and
+   * its line, and its menu is open under it, with the block models that
+   * the field accepts. Give at least two models, in the order of the cms:
+   * by name. The cms shows a search field above more than five models, and
+   * the part does not: give five at most.
+   */
+  addAbove?: ModularContentAddMenu;
+} & (ModularContentBlockOpen | ModularContentBlockClosed);
+/** An open block, as in the cms at rest: it shows its fields */
+type ModularContentBlockOpen = {
+  /**
+   * The block is open
+   * @default true
+   */
+  open?: true;
+  summary?: never;
+  summaryImage?: never;
+};
+/** A closed block: the header only, with the chevron closed */
+type ModularContentBlockClosed = {
+  open: false;
+  /**
+   * The summary after the name: the value of the title field of the
+   * block, as in the cms
+   */
+  summary?: Message;
+  /**
+   * The URL of the image before the summary: the first image of the block,
+   * as in the cms. The cms shows it in a square of 20px.
+   */
+  summaryImage?: string;
+};
+/** The open menu of the gap above a block (`addAbove`) */
+type ModularContentAddMenu = {
+  /** The block models that the field accepts, by name */
+  models: ModularContentBlockModel[];
+  /**
+   * The option under the pointer. The option has the highlight, and when
+   * its model has a `preview`, the card of the model opens at the right of
+   * the option, as in the cms.
+   */
+  hovered?: {
+    /** The index of the option in `models` */
+    index: number;
+    /**
+     * Moves the card up (a negative value) or down, in px. The card is
+     * centered on the option; the cms moves it along the option when it
+     * does not fit in the window.
+     * @default 0
+     */
+    shift?: number;
+  };
+};
+/** A block model in the menu of `addAbove` */
+type ModularContentBlockModel = {
+  /** The name of the block model, without the emoji */
+  name: TextMessage;
+  /** The emoji of the block model */
+  emoji: string;
+  /**
+   * The preview image and the description of the block model, from its
+   * settings in the schema. The cms shows them in a card when the pointer
+   * is on the option.
+   */
+  preview?: {
+    /** The URL of an image of the block, as it shows on the website */
+    image?: string;
+    /** The text that explains when to use the block */
+    description?: Message;
+  };
+};
+/**
+ * A modular content field of the cms at rest: the label, then the list of
+ * the blocks. The gaps between the blocks and the controls of a block show
+ * only under the pointer, thus a scene does not show them, except an open
+ * gap (`addAbove` of a block).
+ */
+declare function ModularContentField({ label, required, localized, hint, children }: ModularContentFieldProps): React.JSX.Element;
+declare function Block$1({ name, icon, children, open, summary, summaryImage, dragged, dragBack, dropLine, addAbove }: ModularContentBlockProps): React.JSX.Element;
+declare const ModularContentFieldWithParts: typeof ModularContentField & {
+  Block: typeof Block$1;
+};
+//#endregion
+//#region src/parts/NavigationBar/NavigationBar.d.ts
+/** The tabs of the bar. The CDA Playground is the last one. */
+type NavigationBarTab = 'visual' | 'content' | 'media' | 'schema' | 'configuration' | 'calendar' | 'cdaPlayground';
+/**
+ * A tab that a plugin adds to the bar (the hook mainNavigationTabs of the
+ * plugin SDK). It is not active: the scene shows another page.
+ */
+type NavigationBarPluginTab = {
+  /** A key that is unique in the bar */
+  key: string;
+  /** The text of the tab, for example "Reports" */
+  label: string;
+  /** The icon of the tab: the plugin gives the name of an icon of Font Awesome */
+  icon: PluginIconName;
+  /**
+   * The tab of the cms before the plugin tab, as the placement
+   * ['after', …] of the hook
+   */
+  after: 'content' | 'media' | 'schema' | 'configuration';
+  /**
+   * A layer over the tab, from the website (for example a ring and a tag
+   * that tell the name of the hook). The tab does not clip it.
+   */
+  mark?: ReactNode;
+};
+/** The props of `NavigationBar` */
+type NavigationBarProps = {
+  /**
+   * The tab of the page that the scene shows
+   * @default 'content'
+   */
+  activeTab?: NavigationBarTab;
+  /**
+   * The type of the environment in the switcher
+   * @default 'primary'
+   */
+  environment?: 'primary' | 'sandbox';
+  /**
+   * The project at the start of the bar. With `logoUrl`, the bar shows the
+   * logo, else it shows the name, as the cms does for a project without a
+   * logo. The kit has no logo of its own: the scene is about a project of
+   * the user, never about DatoCMS.
+   * @default { name: 'Acme Inc.' }
+   */
+  project?: {
+    name: string;
+    logoUrl?: string;
+  };
+  /** The user at the end of the bar. Without `imageUrl`, the avatar shows the initials. */
+  user: {
+    name: string;
+    imageUrl?: string;
+  };
+  /** The tabs that plugins add, each after a tab of the cms */
+  pluginTabs?: NavigationBarPluginTab[];
+};
+/**
+ * The navigation bar of the cms, made of the parts of ui-static/NavigationBar.
+ * All the tabs show: a scene does not measure the bar.
+ */
+export declare function NavigationBar({ activeTab, environment, project, user, pluginTabs }: NavigationBarProps): React.JSX.Element;
+//#endregion
+//#region src/parts/PluginList/PluginList.d.ts
+/** A plugin of the project, in `PluginList` */
+type PluginListPlugin = {
+  /** The name of the plugin, for example "Web Previews" */
+  name: string;
+  /**
+   * The plugin is private: it has no package on npm. The row shows the
+   * pill "Private".
+   * @default false
+   */
+  private?: boolean;
+  /**
+   * The plugin is disabled: the row is muted and shows the pill "Disabled"
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * The dominant color of the cover of the plugin in the plugin directory, a CSS
+   * color. The initials are on it. Without it, the initials are on the
+   * neutral surface, as in the cms for a private plugin or a plugin whose
+   * cover did not load.
+   */
+  color?: string;
+};
+/** The props of `PluginList` */
+type PluginListProps = {
+  /**
+   * The plugins of the project. The list sorts them by name, as the cms
+   * does.
+   */
+  plugins: PluginListPlugin[];
+};
+/**
+ * The list of the plugins in the environment configuration (Sidebar of
+ * configuration/plugins in apps/cms): the title with its presets and its
+ * help, the button "Browse plugins" (with "Add new private plugin" in its
+ * menu) and a row for each plugin, with its initials and a pill for a
+ * private or disabled plugin. In the cms the list is a secondary pane of
+ * 300px, thus the button shows only its icon. Put it in the `list` column
+ * of `RecordEditorLayout`, after `ConfigurationMenu`. The texts of this
+ * screen are in the locales of the admin area of the cms, not in the
+ * locales of the kit: thus they are in English here.
+ */
+export declare function PluginList({ plugins }: PluginListProps): React.JSX.Element;
+/** The props of `ConfigurationMenu` */
+type ConfigurationMenuProps = {
+  /**
+   * The page of the menu that the scene shows
+   * @default 'plugins'
+   */
+  active?: 'localesAndTimezone' | 'appearance' | 'plugins' | 'workflows';
+};
+/**
+ * The menu of the environment configuration (Sidebar of configuration in
+ * apps/cms), for a user who can change the schema and the users: the
+ * groups Environment properties and Environment permissions, and the note
+ * at the bottom. Put it in the `sidebar` column of `RecordEditorLayout`,
+ * with the tab Configuration of `NavigationBar` active. The texts are in
+ * English, as in `PluginList`.
+ */
+export declare function ConfigurationMenu({ active }: ConfigurationMenuProps): React.JSX.Element;
+//#endregion
+//#region src/parts/RecordEditorLayout/RecordEditorLayout.d.ts
+/** The props of `RecordEditorLayout` */
+type RecordEditorLayoutProps = {
+  /**
+   * The bar at the top: a `NavigationBar`. Without it, the screen starts
+   * at the columns, as a detail of the screen.
+   */
+  navigationBar?: ReactNode;
+  /**
+   * The column at the left: a `ContentSidebar`. With `null`, and the
+   * sidebar not collapsed, the screen has no left column and no rail: the
+   * form starts at the left edge, as a detail of the screen.
+   */
+  sidebar: ReactNode;
+  /**
+   * The width of the sidebar in px. The tab Schema of the cms gives 400px
+   * to its sidebar (`SchemaSidebar`), for the API keys of the models.
+   * @default 220
+   */
+  sidebarWidth?: number;
+  /**
+   * The column after the sidebar: a `RecordTree`, the records of a model in
+   * the compact view of the cms. With it, the form column can be empty: the
+   * cms shows nothing there before the user opens a record.
+   */
+  list?: ReactNode;
+  /**
+   * The width of the list in px
+   * @default 350
+   */
+  listWidth?: number;
+  /** The column at the right: an `InfoAside`. Without it, the form is wider. */
+  aside?: ReactNode;
+  /**
+   * The width of the aside in px. A plugin sidebar gives its own width:
+   * Web Previews asks for 900px, and the user can drag the edge.
+   * @default 350
+   */
+  asideWidth?: number;
+  /**
+   * The columns that the user closed. A closed column shows only its rail,
+   * as in the cms. The rail of the aside shows also without `aside`.
+   */
+  collapsed?: {
+    /** @default false */
+    sidebar?: boolean;
+    /** @default false */
+    aside?: boolean;
+  };
+  /** The column in the middle: a `RecordForm` */
+  children?: ReactNode;
+};
+/**
+ * The screen of the record editor of the cms. The cms uses a
+ * SplitPane with a script to size the columns. This part gives the same
+ * widths with CSS, thus the server renders the final layout. The column of
+ * the form is not a Main: the id of Main repeats on a page with two scenes,
+ * and the screen is hidden from assistive technology.
+ */
+export declare function RecordEditorLayout({ navigationBar, sidebar, sidebarWidth, list, listWidth, aside, asideWidth, collapsed, children }: RecordEditorLayoutProps): React.JSX.Element;
+//#endregion
+//#region src/parts/RecordList/RecordList.d.ts
+/** A row of `RecordList`: a record of the model */
+type RecordListRow = {
+  /** The title of the record, in the first column */
+  title: Message;
+  /**
+   * The publishing status of the record, in the column "Status". Give it to
+   * every row of a model with drafts: the table then has the column.
+   */
+  status?: RecordStatus;
+  /**
+   * The date of the last change, as the cms writes it, for example "Today,
+   * 10:41". A text, not a date: the cms writes "Today" from the clock, and
+   * the scene must render the same markup on each day.
+   */
+  updatedAt: Message;
+};
+/** The props of `RecordList` */
+type RecordListProps = {
+  /** The name of the model without its emoji, for example "Products" */
+  model: Message;
+  /** The emoji of the model, before the title */
+  emoji?: string;
+  /**
+   * The number of records of the model, after the title. It can be more
+   * than the rows: the screen cuts the table at its height.
+   */
+  count: number;
+  /** The records, in the order of the table */
+  rows: RecordListRow[];
+  /**
+   * The relative widths of the columns, from the first, as the user drags
+   * them in the cms. The default is the layout of the cms.
+   */
+  widths?: number[];
+};
+/**
+ * The collection of a model in the cms: the toolbar with the name of the
+ * model and the number of records, and the table of the records with the
+ * columns of the cms. Put it in `RecordEditorLayout` without an aside.
+ */
+export declare function RecordList({ model, emoji, count, rows, widths }: RecordListProps): React.JSX.Element;
+//#endregion
+//#region src/parts/RecordTree/RecordTree.d.ts
+/** A record of `RecordTree`, with its children */
+type RecordTreeRecord = {
+  /** A key that is unique in the tree */
+  id: string;
+  /** The title of the record */
+  title: Message;
+  /**
+   * The publishing status of the record: a dot after the title. Give it to
+   * every record of a model with drafts.
+   */
+  status?: RecordStatus;
+  /**
+   * The children of the record. A record with children shows a chevron in
+   * place of the grip.
+   */
+  children?: RecordTreeRecord[];
+  /**
+   * The record shows its children. A closed record shows only its chevron.
+   * @default false
+   */
+  open?: boolean;
+  /**
+   * The record is open in the editor
+   * @default false
+   */
+  selected?: boolean;
+};
+/** The props of `RecordTree` */
+type RecordTreeProps = {
+  /** The name of the model without its emoji, for example "Pages" */
+  model: Message;
+  /** The emoji of the model, before the title */
+  emoji?: string;
+  /** The records at the first level of the tree, in their order */
+  records: RecordTreeRecord[];
+};
+/**
+ * The compact view of a model with hierarchical sorting in the cms: the pane
+ * with the name of the model, the search field and the button that adds a
+ * record, then the records as a tree. Put it in the `list` column of
+ * `RecordEditorLayout`. The title has no menu: the cms shows the menu only to
+ * a user who can edit the schema.
+ */
+export declare function RecordTree({ model, emoji, records }: RecordTreeProps): React.JSX.Element;
+//#endregion
+//#region src/parts/RolePermissions/RolePermissions.d.ts
+/** The props of `RolePermissions` */
+type RolePermissionsProps = {
+  /** The rulesets: `RolePermissions.RuleSet` elements */
+  children: ReactNode;
+};
+/** The props of `RolePermissions.RuleSet` */
+type RolePermissionsRuleSetProps = {
+  /** The emoji of the model */
+  emoji: string;
+  /** The name of the model, without the emoji */
+  title: Message;
+  /** The API key of the model, after its name */
+  apiKey?: string;
+  /** The rules: `RolePermissions.Rule` elements */
+  children: ReactNode;
+};
+/** An operation of a rule, as the cms names it */
+type RolePermissionsAction = 'all' | 'read' | 'create' | 'duplicate' | 'update' | 'editCreator' | 'takeOver' | 'unpublish' | 'delete' | 'moveToStage';
+/** The props of `RolePermissions.Rule` */
+type RolePermissionsRuleProps = {
+  /**
+   * The rule allows the operation. A deny rule starts with "Cannot".
+   * @default true
+   */
+  positive?: boolean;
+  /** The operation that the rule allows or denies */
+  action: RolePermissionsAction;
+  /**
+   * The name of the locale of the content, in English, for example
+   * "German". Without it, the rule is on the content of every locale.
+   */
+  locale?: string;
+  /**
+   * The stage that the rule moves the records to, for `moveToStage` (and
+   * `all`). Without it, the rule is on every stage.
+   */
+  toStage?: string;
+  /**
+   * The rule is only on the records in this stage. Without it, the rule is
+   * on the records in every stage.
+   */
+  inStage?: string;
+  /**
+   * The rule is only on the records that these users created: `self` is
+   * the user themself, `role` is a user of the same role. A deny rule
+   * names the others: "other users", "other roles". The cms does not show
+   * it on `create` and `duplicate`.
+   */
+  createdBy?: 'self' | 'role';
+};
+/**
+ * The record permissions of a role in the cms, at rest: the title of the
+ * section, then a card for each model with its rules. The cms writes each
+ * rule as a sentence: "Can edit content in German".
+ */
+declare function RolePermissions({ children }: RolePermissionsProps): React.JSX.Element;
+declare function RuleSet({ emoji, title, apiKey, children }: RolePermissionsRuleSetProps): React.JSX.Element;
+declare function Rule({ positive, action, locale, toStage, inStage, createdBy }: RolePermissionsRuleProps): React.JSX.Element;
+declare const RolePermissionsWithParts: typeof RolePermissions & {
+  RuleSet: typeof RuleSet;
+  Rule: typeof Rule;
+};
+//#endregion
+//#region src/parts/SchemaSidebar/SchemaSidebar.d.ts
+/** A folder of the menu of the schema */
+type SchemaSidebarFolder = {
+  kind: 'folder';
+  /** A key that is unique in the menu */
+  id: string;
+  /** The name of the folder. An emoji at the start becomes the icon. */
+  name: string;
+  /**
+   * The folder shows its items. A closed folder shows only its chevron.
+   * @default false
+   */
+  open?: boolean;
+  /** The items in the folder. A folder without items has no chevron. */
+  items?: SchemaSidebarItem[];
+};
+/** A model of the menu of the schema: it opens the page of the model */
+type SchemaSidebarModel = {
+  kind: 'model';
+  /** A key that is unique in the menu */
+  id: string;
+  /**
+   * The name of the model. An emoji at the start becomes the icon, as in
+   * the cms.
+   */
+  name: string;
+  /** The API key of the model, after its name */
+  apiKey: string;
+  /**
+   * The model is a block model: without an emoji, the icon is the one of a
+   * block
+   * @default false
+   */
+  block?: boolean;
+  /**
+   * The row of the page that the scene shows
+   * @default false
+   */
+  active?: boolean;
+};
+/** An item of the menu of the schema */
+type SchemaSidebarItem = SchemaSidebarFolder | SchemaSidebarModel;
+/** The props of `SchemaSidebar` */
+type SchemaSidebarProps = {
+  /**
+   * The tab of the menu: the models or the block models
+   * @default 'models'
+   */
+  tab?: 'models' | 'blocks';
+  /** The items at the first level of the menu */
+  items: SchemaSidebarItem[];
+};
+/**
+ * The sidebar of the tab Schema of the cms: the tabs of the models and of
+ * the block models, the button "New model", then the menu of the models
+ * with their API keys. The cms shows the models that the user opened last
+ * in a menu before the button: the scene has none.
+ */
+export declare function SchemaSidebar({ tab, items }: SchemaSidebarProps): React.JSX.Element;
+//#endregion
+//#region src/parts/SelectivePublishing/SelectivePublishing.d.ts
+/** The props of `SelectivePublishing` */
+type SelectivePublishingProps = {
   /**
-   * Adds the icon that tells that the value is different for each locale
-   * @default false
+   * The content that the record can publish, in the order of the cms: the
+   * non-localized content first (`nonLocalized`), then the locales
    */
-  localized?: boolean;
-  /** A short help under the input */
-  hint?: Message;
+  options: {
+    /** The name of the locale, for example "Italian" */
+    label: TextMessage;
+    /**
+     * The user picked this content to publish
+     * @default false
+     */
+    selected?: boolean;
+  }[];
   /**
-   * The input: a part of `RecordForm`, `StructuredTextInput`, or an input
-   * of the kit with a constant value
+   * The record has changes in its fields that are not localized: the first
+   * option is the non-localized content
    */
-  children: ReactNode;
+  nonLocalized?: {
+    selected?: boolean;
+  };
 };
-/** The props of `RecordForm.StringInput` */
-type RecordFormStringInputProps = {
-  /** The text in the input */
-  value: string;
+/**
+ * The dialog "Only publish specific content" of the cms, at rest: the
+ * content of the record that is ready, as toggle buttons, and the publish
+ * button. The editor publishes some locales now and the others later.
+ */
+export declare function SelectivePublishing({ options, nonLocalized }: SelectivePublishingProps): React.JSX.Element;
+//#endregion
+//#region src/parts/SignIn/SignIn.d.ts
+/** The props of `SignIn` */
+type SignInProps = {
+  /** The project of the sign-in page */
+  project: {
+    /** The name of the project. It shows at the top when there is no logo. */
+    name: string;
+    /** The URL of the logo of the project (white-label). It replaces the name. */
+    logoUrl?: string;
+  };
   /**
-   * The large text of the field that gives the title of the record
+   * The value in the field Email, as if the user typed it
+   * @default ""
+   */
+  email?: string;
+  /**
+   * The project has white-label: the page does not show the DatoCMS logo
+   * under the card
    * @default false
    */
-  large?: boolean;
-};
-/** The props of `RecordForm.SlugInput` */
-type RecordFormSlugInputProps = {
-  /** The URL before the slug, for example "https://www.datocms.com/blog/" */
-  prefix: string;
-  /** The slug */
-  value: string;
+  whiteLabel?: boolean;
 };
-/** The props of `RecordForm.FileInput` */
-type RecordFormFileInputProps = {
-  /** The image of the upload, at its size in the card (300×180 or less) */
-  image: {
-    src: string;
-    width: number;
-    height: number;
+/**
+ * The sign-in page of the cms, at rest: the fields Email and Password, the
+ * button "Log in", and the button "Log in with single sign-on". The Stage
+ * gives the height: the page fills it and centers the card.
+ */
+export declare function SignIn({ project, email, whiteLabel }: SignInProps): React.JSX.Element;
+//#endregion
+//#region src/parts/SsoSettings/SsoSettings.d.ts
+/** The props of `SsoSettings` */
+type SsoSettingsProps = {
+  /** The values that DatoCMS gives to the identity provider */
+  serviceProvider: {
+    /** The "Service Provider Metadata URL / Entity ID" */
+    metadataUrl: string;
+    /** The "Assertion Consumer Service (ACS) URL" */
+    acsUrl: string;
+    /** The "SAML Token" */
+    samlToken: string;
+    /** The "Base URL" of SCIM */
+    scimBaseUrl: string;
   };
-  /** The text under the image, for example the alt text or "No metadata set" */
-  caption?: Message;
-};
-/** The record editor of the cms: the toolbar and the fields of the record */
-declare function RecordForm({ title, icon, children }: RecordFormProps): React.JSX.Element;
-/** A field of the record: the label and the input */
-declare function Field({ label, required, localized, hint, children }: RecordFormFieldProps): React.JSX.Element;
-/** A single-line text field */
-declare function RecordStringInput({ value, large }: RecordFormStringInputProps): React.JSX.Element;
-declare function SlugInput({ prefix, value }: RecordFormSlugInputProps): React.JSX.Element;
-declare function FileInput({ image, caption }: RecordFormFileInputProps): React.JSX.Element;
-declare const RecordFormWithParts: typeof RecordForm & {
-  Field: typeof Field;
-  StringInput: typeof RecordStringInput;
-  SlugInput: typeof SlugInput;
-  FileInput: typeof FileInput;
+  /**
+   * The "Identity Provider Metadata URL", for example the metadata URL of an
+   * Okta app
+   */
+  identityProviderMetadataUrl: string;
+  /**
+   * The SCIM API token that the cms just made: it shows once, with the
+   * warning to copy it into the identity provider. Without it, the button
+   * "Generate API token" shows.
+   */
+  scimToken?: string;
+  /** The name of the default role of the users, for example "Editor" */
+  defaultRole: string;
 };
+/**
+ * The single sign-on settings of the project (the project settings of the
+ * cms, at rest): the SAML settings with the metadata URL of the identity
+ * provider, the SCIM settings and the default role. The form has no change,
+ * thus the button "Save settings" is disabled.
+ */
+export declare function SsoSettings({ serviceProvider, identityProviderMetadataUrl, scimToken, defaultRole }: SsoSettingsProps): React.JSX.Element;
+//#endregion
+//#region ../ui-static/src/form/structured-text/SlashPanel.d.ts
+/** The kind of the commands of a group, in the order of the panel */
+type SlashPanelGroupKind = 'blocks' | 'inlineBlocks' | 'inlineItems' | 'formatting';
 //#endregion
 //#region src/parts/StructuredTextInput/StructuredTextInput.d.ts
+/**
+ * The steps of `StructuredTextInput.SlashMenu`, for the `sequence` of
+ * `Stage`: the caret after the text, then the slash typed with the menu
+ * open. The next step is the slash deleted: the menu closes. The last step
+ * is the picture at rest.
+ */
+export declare const SLASH_SEQUENCE: StageSequence;
+/**
+ * The steps of a `StructuredTextInput.Block` with `selected`, for the
+ * `sequence` of `Stage`: the block at rest, then the block in the
+ * selection of the editor. The last step is the picture at rest.
+ */
+export declare const BLOCK_SELECT_SEQUENCE: StageSequence;
+/**
+ * The steps of a `StructuredTextInput.InlineRecord` with `hovered`, for the
+ * `sequence` of `Stage`: the record at rest, then the pointer on the
+ * record, with the hover border and the tooltip "Edit record". The last
+ * step is the picture at rest.
+ */
+export declare const RECORD_TOOLTIP_SEQUENCE: StageSequence;
 /** The props of `StructuredTextInput` */
 type StructuredTextInputProps = {
   /**
-   * The blocks of the text: `StructuredTextInput.Paragraph` and
-   * `StructuredTextInput.Heading` elements
+   * The nodes of the text: `StructuredTextInput.Paragraph`,
+   * `StructuredTextInput.Heading`, `StructuredTextInput.List`,
+   * `StructuredTextInput.Blockquote`, `StructuredTextInput.Block` and
+   * `StructuredTextInput.SlashMenu` elements
    */
   children: ReactNode;
+  /**
+   * The editor has the focus: the frame shows the focus border and the
+   * focus ring. Give it with `StructuredTextInput.SlashMenu`, because the
+   * slash menu opens only in an editor with the focus.
+   * @default false
+   */
+  focused?: boolean;
+  /**
+   * The toolbar above the text: a `StructuredTextInput.Toolbar` element.
+   * The cms shows the toolbar only when the editor has the focus, thus
+   * give it with `focused`.
+   */
+  toolbar?: ReactNode;
+};
+/** A block style of the cms, for the type menu of `StructuredTextInput.Toolbar` */
+type StructuredTextToolbarBlock = 'paragraph' | 'heading1' | 'heading2' | 'heading3' | 'heading4' | 'heading5' | 'heading6' | 'bulletedList' | 'numberedList' | 'blockquote' | 'code';
+/** A mark of the cms, for the buttons of `StructuredTextInput.Toolbar` */
+type StructuredTextToolbarMark = 'strong' | 'emphasis' | 'underline' | 'strikethrough' | 'code' | 'highlight';
+/** The props of `StructuredTextInput.Toolbar` */
+type StructuredTextToolbarProps = {
+  /**
+   * The block style at the cursor. The type menu shows its icon and its
+   * name.
+   * @default 'paragraph'
+   */
+  block?: StructuredTextToolbarBlock;
+  /**
+   * The marks that the field allows, in any order. The toolbar shows them
+   * in the order of the cms.
+   * @default all the six marks
+   */
+  marks?: StructuredTextToolbarMark[];
+  /**
+   * The field allows lists: the toolbar shows the two list buttons.
+   * @default true
+   */
+  lists?: boolean;
+  /**
+   * The field allows links: the toolbar shows the link button.
+   * @default true
+   */
+  link?: boolean;
+  /**
+   * The field allows horizontal rules: the toolbar shows the button.
+   * @default true
+   */
+  thematicBreak?: boolean;
 };
 /** The props of `StructuredTextInput.Paragraph` and `StructuredTextInput.Heading` */
 type StructuredTextBlockProps = {
-  /** The text, with `StructuredTextInput.Link` elements in it */
+  /**
+   * The text, with `StructuredTextInput.Mark`, `StructuredTextInput.Link`
+   * and `StructuredTextInput.InlineRecord` elements in it
+   */
+  children: ReactNode;
+  /**
+   * The node is dim: the scene shows another node. Only a node at the top
+   * level of the field is dim, not a paragraph in a quote.
+   * @default false
+   */
+  dimmed?: boolean;
+};
+/** The props of `StructuredTextInput.Mark` */
+type StructuredTextMarkProps = {
+  /**
+   * The mark of the text, for example `'strong'` or `'emphasis'`. Give an
+   * array for a text with more marks: the cms puts all the marks of a text
+   * on one leaf.
+   */
+  type: StructuredTextToolbarMark | StructuredTextToolbarMark[];
+  /** The text with the mark */
+  children: ReactNode;
+};
+/** The props of `StructuredTextInput.List` */
+type StructuredTextListProps = {
+  /**
+   * The style of the list: `'bulleted'` shows a disc before each item,
+   * `'numbered'` shows the number of the item
+   * @default 'bulleted'
+   */
+  style?: 'bulleted' | 'numbered';
+  /** The items of the list: `StructuredTextInput.ListItem` elements */
+  children: ReactNode;
+  /**
+   * The node is dim: the scene shows another node. Only a node at the top
+   * level of the field is dim, not a paragraph in a quote.
+   * @default false
+   */
+  dimmed?: boolean;
+};
+/** The props of `StructuredTextInput.ListItem` */
+type StructuredTextListItemProps = {
+  /**
+   * The text of the item, with `StructuredTextInput.Mark`,
+   * `StructuredTextInput.Link` and `StructuredTextInput.InlineRecord`
+   * elements in it. The cms puts it in a paragraph in the item.
+   */
+  children: ReactNode;
+};
+/** The props of `StructuredTextInput.Blockquote` */
+type StructuredTextBlockquoteProps = {
+  /** The paragraphs of the quote: `StructuredTextInput.Paragraph` elements */
   children: ReactNode;
+  /**
+   * The author or the source of the quote, below the paragraphs. Without
+   * it, the quote has no source: the cms shows "Add author/source" only
+   * when the cursor is in the quote.
+   */
+  source?: ReactNode;
+  /**
+   * The node is dim: the scene shows another node. Only a node at the top
+   * level of the field is dim, not a paragraph in a quote.
+   * @default false
+   */
+  dimmed?: boolean;
+};
+/** The props of `StructuredTextInput.Block` */
+type StructuredTextEmbeddedBlockProps = {
+  /** The name of the block model, for example "Gallery" */
+  name: TextMessage;
+  /** The icon before the name: the emoji of the block model, as in the cms */
+  icon?: ReactNode;
+  /**
+   * The fields of the block: `RecordForm.Field` elements. Only an open
+   * block shows them.
+   */
+  children?: ReactNode;
+  /**
+   * The block is in the selection of the editor: the cms shows the focus
+   * border and the focus ring around it. The cms shows this only when the
+   * editor has the focus, thus give it with `focused` of
+   * `StructuredTextInput`.
+   * @default false
+   */
+  selected?: boolean;
+  /**
+   * The node is dim: the scene shows another node. Only a node at the top
+   * level of the field is dim, not a paragraph in a quote.
+   * @default false
+   */
+  dimmed?: boolean;
+} & (StructuredTextEmbeddedBlockOpen | StructuredTextEmbeddedBlockClosed);
+/** An open block, as in the cms at rest: it shows its fields */
+type StructuredTextEmbeddedBlockOpen = {
+  /**
+   * The block is open
+   * @default true
+   */
+  open?: true;
+  summary?: never;
+  summaryImage?: never;
+};
+/** A closed block: the header only, with the chevron closed */
+type StructuredTextEmbeddedBlockClosed = {
+  open: false;
+  /**
+   * The summary after the name: the value of the title field of the
+   * block, as in the cms
+   */
+  summary?: Message;
+  /**
+   * The URL of the image before the summary: the first image of the block,
+   * as in the cms. The cms shows it in a square of 20px.
+   */
+  summaryImage?: string;
+};
+/** The props of `StructuredTextInput.InlineRecord` */
+type StructuredTextInlineRecordProps = {
+  /**
+   * The icon before the title, in the slot of the image of the record. The
+   * cms shows the image of the record there (when the record has one).
+   */
+  icon?: ReactNode;
+  /** The title of the record */
+  children: Message;
+  /** The publishing status of the record: a dot after the title */
+  status?: RecordStatus;
+  /**
+   * The pointer is on the record: the chip shows its hover border and the
+   * tooltip "Edit record" below it
+   * @default false
+   */
+  hovered?: boolean;
 };
 /** The props of `StructuredTextInput.Link` */
 type StructuredTextLinkProps = {
   /** The text of the link */
   children: ReactNode;
 };
+/** An item of `StructuredTextInput.SlashMenu` */
+type StructuredTextSlashMenuItem = {
+  /**
+   * The icon before the label: the emoji of a model. The cms shows it as
+   * the first character of the name of the model. The commands that
+   * change the format have no icon.
+   */
+  icon?: ReactNode;
+  /** The label, for example "Gallery" or "Heading 2" */
+  label: TextMessage;
+  /**
+   * The group of the item. The menu shows a title above each run of items
+   * with the same group. The cms has four groups, in this order: `blocks`
+   * ("Add Block"), `inlineBlocks` ("Add Inline Block"), `inlineItems` ("Add
+   * Inline record") and `formatting` ("Convert to"). Give the kind: the
+   * menu shows the title of the cms. Any other text is the title of a
+   * group that the cms does not have.
+   */
+  group?: SlashPanelGroupKind | TextMessage;
+};
+/** The props of `StructuredTextInput.SlashMenu` */
+type StructuredTextSlashMenuProps = {
+  /**
+   * The text after the slash. The menu shows only the items that match
+   * it: give the matching items only.
+   * @default ''
+   */
+  query?: string;
+  /**
+   * The text before the slash, in the same paragraph, for example
+   * "After lunch, ". The cms opens the menu after a space too. The panel
+   * opens under the slash.
+   * @default ''
+   */
+  before?: ReactNode;
+  /** The items of the menu, in the order of the cms */
+  items: StructuredTextSlashMenuItem[];
+  /**
+   * The index of the highlighted item in `items`. The cms highlights the
+   * first item when the menu opens.
+   * @default 0
+   */
+  active?: number;
+  /**
+   * The text cursor after the slash and the query, as in the cms while the
+   * editor types. It blinks, but not with reduced motion, and it stops
+   * when the screen has `data-paused` (the page sets it off screen).
+   * @default false
+   */
+  caret?: boolean;
+};
+/**
+ * The structured text editor of the cms at rest, made of the parts of
+ * ui-static/structured-text: the frame, the toolbar (only when you give it)
+ * and the content, without Slate. In a record that another user edits, it
+ * is read only.
+ */
+declare function StructuredTextInput({ children, focused, toolbar }: StructuredTextInputProps): React.JSX.Element;
 /**
- * A copy of the structured text editor of the cms at rest: the frame and the
- * content, without Slate and without the toolbar (the toolbar shows only
- * with the focus). The editor is a component of the cms, thus it is not in
- * ui.
+ * The toolbar of the structured text editor of the cms at rest. No button
+ * is on and no menu is open: the type menu shows the block style at the
+ * cursor.
  */
-declare function StructuredTextInput({ children }: StructuredTextInputProps): React.JSX.Element;
-declare function Paragraph({ children }: StructuredTextBlockProps): React.JSX.Element;
-declare function StructuredTextHeading({ children }: StructuredTextBlockProps): React.JSX.Element;
+declare function Toolbar({ block, marks, lists, link, thematicBreak }: StructuredTextToolbarProps): React.JSX.Element;
+declare function Paragraph$1({ children, dimmed }: StructuredTextBlockProps): React.JSX.Element;
+declare function StructuredTextHeading({ children, dimmed }: StructuredTextBlockProps): React.JSX.Element;
+declare function Mark({ type, children }: StructuredTextMarkProps): React.JSX.Element;
+declare function List({ style, children, dimmed }: StructuredTextListProps): React.JSX.Element;
+declare function ListItem({ children }: StructuredTextListItemProps): React.JSX.Element;
+declare function Blockquote({ children, source, dimmed }: StructuredTextBlockquoteProps): React.JSX.Element;
 declare function Link({ children }: StructuredTextLinkProps): React.JSX.Element;
+declare function Block({ name, icon, children, open, summary, summaryImage, selected, dimmed }: StructuredTextEmbeddedBlockProps): React.JSX.Element;
+declare function InlineRecord({ icon, children, status, hovered }: StructuredTextInlineRecordProps): React.JSX.Element;
+declare function SlashMenu({ query, before, items, active, caret }: StructuredTextSlashMenuProps): React.JSX.Element;
 declare const StructuredTextInputWithParts: typeof StructuredTextInput & {
-  Paragraph: typeof Paragraph;
+  Paragraph: typeof Paragraph$1;
   Heading: typeof StructuredTextHeading;
+  Mark: typeof Mark;
+  List: typeof List;
+  ListItem: typeof ListItem;
+  Blockquote: typeof Blockquote;
   Link: typeof Link;
+  Block: typeof Block;
+  InlineRecord: typeof InlineRecord;
+  SlashMenu: typeof SlashMenu;
+  Toolbar: typeof Toolbar;
 };
 //#endregion
-//#region src/Stage/Stage.d.ts
-/** The hue of the default theme of the cms */
-export declare const DEFAULT_HUE = 290;
-type ColorScheme = 'light' | 'dark';
-type StageProps = {
+//#region ../ui-static/src/content/VersionDiff.d.ts
+/**
+ * A run of text on one side of the comparison. "same" is on both sides,
+ * "remove" is only on the older side, "add" is only on the newer side.
+ */
+type VersionDiffTextPart = {
+  value: string;
+  kind: 'same' | 'add' | 'remove';
+};
+//#endregion
+//#region src/parts/VersionCompare/VersionCompare.d.ts
+/**
+ * A run of text in a version. "same" is in the two versions, "remove" only
+ * in the older, "add" only in the newer.
+ */
+type VersionCompareRun = VersionDiffTextPart;
+/** A version in the head of its column */
+type VersionCompareVersion = {
+  /** The date of the version, as the cms formats it: "03/04/2026, 16:47" */
+  date: string;
+  /** The user that saved it */
+  editor: string;
+};
+/** The props of `VersionCompare` */
+type VersionCompareProps = {
+  /** The older version, in the left column */
+  older: VersionCompareVersion;
+  /** The newer version, in the right column: the version of the page */
+  newer: VersionCompareVersion & {
+    /**
+     * The current version of the record: the pill "Current"
+     * @default false
+     */
+    current?: boolean;
+    /**
+     * The published version of the record: the pill "Published"
+     * @default false
+     */
+    published?: boolean;
+  };
   /**
-   * What the scene shows, for a screen reader. The scene itself is hidden
-   * from assistive technology.
+   * The switch "Only show differences" is on: give only the fields that
+   * changed
+   * @default false
    */
-  description: string;
-  /** @default 'light' */
-  scheme?: ColorScheme;
+  onlyDifferences?: boolean;
+  /** The fields: `VersionCompare.TextField` and `VersionCompare.StructuredTextField` */
+  children: ReactNode;
+};
+/**
+ * The page of a version of a record (Versions of the cms), without the list
+ * of the versions on its left: the toolbar with the date of the version and
+ * the switch and the Restore button, the heads of the two columns, and the fields of the
+ * two versions side by side, with the changes marked.
+ */
+declare function VersionCompare({ older, newer, onlyDifferences, children }: VersionCompareProps): React.JSX.Element;
+/** The props of `VersionCompare.TextField` */
+type VersionCompareTextFieldProps = {
+  /** The label of the field */
+  label: string;
   /**
-   * The hue of the brand color, from 0 to 360
-   * @default 290
+   * The field is a heading, as the title of a record: its text is larger
+   * @default false
    */
-  hue?: number;
+  large?: boolean;
+  /** The text in the older version, in runs */
+  older: VersionCompareRun[];
+  /** The text in the newer version, in runs */
+  newer: VersionCompareRun[];
+};
+/** A single-line text field in the two versions */
+declare function TextField({ label, large, older, newer }: VersionCompareTextFieldProps): React.JSX.Element;
+/** The props of `VersionCompare.StructuredTextField` */
+type VersionCompareStructuredTextFieldProps = {
+  /** The label of the field */
+  label: string;
+  /** The top-level nodes: `VersionCompare.Paragraph` and `VersionCompare.Gap` */
+  children: ReactNode;
+};
+/** A structured text field in the two versions, a row for each paragraph */
+declare function StructuredTextField({ label, children }: VersionCompareStructuredTextFieldProps): React.JSX.Element;
+/** The props of `VersionCompare.Paragraph` */
+type VersionCompareParagraphProps = {
+  /** The paragraph in the older version. Without it, the newer version added it. */
+  older?: VersionCompareRun[];
+  /** The paragraph in the newer version. Without it, the newer version removed it. */
+  newer?: VersionCompareRun[];
+};
+/** A paragraph of a structured text field, in the two versions */
+declare function Paragraph({ older, newer }: VersionCompareParagraphProps): React.JSX.Element;
+/** The props of `VersionCompare.Gap` */
+type VersionCompareGapProps = {
+  /** How many nodes did not change */
+  count: number;
+};
+/**
+ * Nodes of a structured text that did not change, in place of their rows,
+ * when only the differences show
+ */
+declare function Gap({ count }: VersionCompareGapProps): React.JSX.Element;
+declare const VersionCompareWithParts: typeof VersionCompare & {
+  TextField: typeof TextField;
+  StructuredTextField: typeof StructuredTextField;
+  Paragraph: typeof Paragraph;
+  Gap: typeof Gap;
+};
+//#endregion
+//#region src/parts/VisualEditorLayout/VisualEditorLayout.d.ts
+/** The props of `VisualEditorLayout` */
+type VisualEditorLayoutProps = {
   /**
-   * The logical size of the screen in px. The CSS of the cms resolves its
-   * media queries and its viewport units for 1440×900: a different size
-   * crops or extends the content, the layout stays the same.
-   * @default { width: 1440, height: 900 }
+   * The bar at the top: a `NavigationBar` with `activeTab="visual"`.
+   * Without it the screen starts at the toolbar of the plugin.
    */
-  size?: {
-    width: number;
-    height: number;
+  navigationBar?: ReactNode;
+  /** The column at the left: a `WebPreview` with `mode="visual"` */
+  preview: ReactNode;
+  /**
+   * The width of the sidebar at the right in px. The cms gives it 30% of
+   * the screen and at least 550px, and the user can drag the edge.
+   */
+  sidebarWidth?: number;
+  /**
+   * The sidebar before a click: a `VisualEditorLayout.Records` with the
+   * records of the page. With VISUAL_EDITING_SEQUENCE it shows until the
+   * step "record".
+   */
+  records: ReactNode;
+  /**
+   * The sidebar after the first click: the `RecordForm` of the record of
+   * the page, without `status`, with the field of the click `highlighted`.
+   * With VISUAL_EDITING_SEQUENCE it shows from the step "record" to the
+   * step "linked".
+   */
+  record: ReactNode;
+  /**
+   * The sidebar after the second click: the `RecordForm` of the linked
+   * record, without `status`, with the field of the click `highlighted`.
+   * It is the picture at rest.
+   */
+  linked: ReactNode;
+};
+/** A record in `VisualEditorLayout.Records` */
+type VisualEditorRecord = {
+  /** The title of the record */
+  title: string;
+  /** The name of the model, with its emoji, for example "✍️ Author" */
+  model: string;
+  /** The publishing status: the dot at the end of the row */
+  status: RecordStatus;
+  /**
+   * The URL of the image of the record. When one row has an image, all the
+   * rows show the slot of the image, thus the titles align.
+   */
+  image?: string;
+};
+/** The props of `VisualEditorLayout.Records` */
+type VisualEditorRecordsProps = {
+  /** The records that the page shows, in the order of the page */
+  records: VisualEditorRecord[];
+};
+/**
+ * The tab Visual of the cms: the page of the plugin Web Previews at the
+ * left, and the sidebar of the visual editing at the right. The sidebar
+ * shows the records of the page, or the form of the record that the user
+ * clicked in the page. The cms uses a SplitPane with a script to size the
+ * columns. This part gives the same widths with CSS, thus the server
+ * renders the final layout.
+ */
+declare function VisualEditorLayout({ navigationBar, preview, sidebarWidth, records, record, linked }: VisualEditorLayoutProps): React.JSX.Element;
+/**
+ * The records of the page, as the cms lists them in the sidebar before a
+ * click: a row for each record, with its image, its model, its title and
+ * its status. The plugin gives the title of the list.
+ */
+declare function Records({ records }: VisualEditorRecordsProps): React.JSX.Element;
+declare const VisualEditorLayoutWithParts: typeof VisualEditorLayout & {
+  Records: typeof Records;
+};
+//#endregion
+//#region src/parts/WebPreview/WebPreview.d.ts
+/**
+ * The steps of the tab Visual, for the `sequence` of `Stage`, with
+ * `VisualEditorLayout`, a `WebPreview` with `mode="visual"` and its
+ * `WebPreview.Target` elements:
+ *
+ * - "list": the switch "Edit mode" is off. The sidebar shows the records of
+ *   the page.
+ * - "toggle": the pointer comes to the switch and clicks it, and the
+ *   switch turns on.
+ * - "cascade": content link flashes the outline of all the targets, one
+ *   after the other in the order of the page (`order`), then hides them.
+ * - "hover-record", "click-record": the pointer comes to the target with
+ *   `click="record"`, then it clicks.
+ * - "record": the sidebar opens the record of that target. One second
+ *   later the form scrolls to the field of the target and highlights it.
+ * - "hover-linked", "click-linked": the pointer comes to the target with
+ *   `click="linked"`, then it clicks.
+ * - "linked": the sidebar opens the record of the second target, a record
+ *   that the first record links, and highlights its field in the same
+ *   way. It is the picture at rest.
+ */
+export declare const VISUAL_EDITING_SEQUENCE: StageSequence;
+/**
+ * The steps of a save in the record editor, for the `sequence` of `Stage`,
+ * with a `WebPreview` in the tab "Website preview" and its `reloaded` page,
+ * and a `RecordForm` with `dirty="until-saved"`:
+ *
+ * - "editing": the form has the new value, and the page still shows the old
+ *   one. The toolbar tells that the form has unsaved changes and shows the
+ *   button Save. The pointer comes to the button.
+ * - "click-save": the pointer clicks Save.
+ * - "saved": the toolbar shows the status of the record and the publish
+ *   button again. The page still shows the old value.
+ * - "reload": the plugin loads the page again.
+ * - "reloaded": the page shows the new value. It is the picture at rest.
+ */
+export declare const PREVIEW_RELOAD_SEQUENCE: StageSequence;
+/** The props of `WebPreview` */
+type WebPreviewProps = {
+  /**
+   * Where the plugin shows the page. "sidebar": the tab "Website preview"
+   * of the record editor, with the select of the preview links and the
+   * switch "Edit mode" off. "visual": the tab Visual of the cms
+   * (`VisualEditorLayout`), with an address bar and the switch that
+   * VISUAL_EDITING_SEQUENCE turns on.
+   * @default 'sidebar'
+   */
+  mode?: 'sidebar' | 'visual';
+  /**
+   * The preview link of the record, as the plugin shows it in its select:
+   * the name of the link, then the URL
+   */
+  link: {
+    /** The name that the developer gives to the link, for example "Draft version" */
+    label: string;
+    /** The URL of the page on the site */
+    url: string;
   };
-  /** The content of the screen: a scene */
+  /**
+   * The page of the site, as the site renders it. In the tab Visual, wrap
+   * each element that content link knows in a `WebPreview.Target`.
+   */
+  children: ReactNode;
+  /**
+   * The same page after a save and a reload. With PREVIEW_RELOAD_SEQUENCE
+   * it takes the place of `children` at the step "reloaded". Without the
+   * sequence, it is the page that shows.
+   */
+  reloaded?: ReactNode;
+};
+/** The props of `WebPreview.Target` */
+type WebPreviewTargetProps = {
+  /**
+   * The place of the element in the page, from 0. Content link flashes the
+   * targets in the order of the page, 10ms one after the other.
+   */
+  order: number;
+  /**
+   * The click of VISUAL_EDITING_SEQUENCE on the element. "record": the
+   * first click, that opens the record of the page. "linked": the second
+   * click, that opens a linked record. The picture at rest shows the
+   * outline of the "linked" target.
+   */
+  click?: 'record' | 'linked';
+  /**
+   * The element is in a line of text, for example a name in a byline
+   * @default false
+   */
+  inline?: boolean;
+  /**
+   * The element and its padding are less than 150px wide: content link
+   * puts the label above the outline, in the middle, and rounds all the
+   * corners
+   * @default false
+   */
+  narrow?: boolean;
+  /** The element of the site */
   children: ReactNode;
 };
 /**
- * The frame of a product scene. It renders the content at a fixed logical
- * size, and scales it down with CSS on a narrow page. The content is a
- * picture: it gets no focus, no pointer events and no selection.
+ * The plugin Web Previews: its toolbar, and the page of the site in the
+ * frame under it. In the tab "Website preview" of the record editor, the
+ * toolbar has the select of the preview links and their buttons. In the
+ * tab Visual, it has an address bar. The plugin is not a part of the cms:
+ * it draws its toolbar with the components of datocms-react-ui. This part
+ * draws the same toolbar with the components of ui-public, and the texts of the
+ * plugin.
+ *
+ * With the switch "Edit mode" on, the plugin connects the page to
+ * @datocms/content-link: an outline frames the element under the pointer,
+ * and a click opens its field in the cms.
+ */
+declare function WebPreview({ mode, link, children, reloaded }: WebPreviewProps): React.JSX.Element;
+/**
+ * An element of the site that content link knows: its text holds the
+ * record and the field. The outline and its label "Open in DatoCMS" are
+ * the overlay of @datocms/content-link, with its default color (hue 17).
+ */
+declare function Target({ order, click, inline, narrow, children }: WebPreviewTargetProps): React.JSX.Element;
+declare const WebPreviewWithParts: typeof WebPreview & {
+  Target: typeof Target;
+};
+//#endregion
+//#region src/parts/WhiteLabelSettings/WhiteLabelSettings.d.ts
+/** The props of `WhiteLabelSettings` */
+type WhiteLabelSettingsProps = {
+  /**
+   * The "Custom I18n messages template URL": the URL of the JSON files that
+   * replace the texts of the interface, with `:locale` for the language,
+   * for example "https://cdn.example.com/cms/:locale.json"
+   */
+  messagesTemplateUrl: string;
+};
+/**
+ * The white-label settings of the project (the project settings of the
+ * cms, at rest): the URL of the custom texts of the interface. The form has
+ * no change, thus the button "Save white-label settings" is disabled.
+ */
+export declare function WhiteLabelSettings({ messagesTemplateUrl }: WhiteLabelSettingsProps): React.JSX.Element;
+//#endregion
+//#region src/parts/WorkflowStages/WorkflowStages.d.ts
+/** A stage of the workflow, as the settings of the workflow show it */
+type WorkflowStage = {
+  /** The name of the stage, for example "In review" */
+  name: string;
+  /** The API key of the stage, for example "in_review" */
+  apiKey: string;
+  /** What the stage means for the editors */
+  description?: string;
+};
+/** The props of `WorkflowStages` */
+type WorkflowStagesProps = {
+  /** The stages of the workflow, in their order */
+  stages: WorkflowStage[];
+};
+/**
+ * The stages of a workflow in its settings (WorkflowForm of the cms): the
+ * section "Stages", a list with a row for each stage, and the section
+ * "Transitions between stages", which sends to the permissions of the
+ * roles. The list is the TableList of the cms, at rest. A div with the
+ * padding of the page is around the sections, not the Page of the cms: the
+ * Page has a maximum width, a minimum height and a padding that changes
+ * with the width of the window.
  */
-export declare function Stage({ description, scheme, hue, size, children }: StageProps): React.JSX.Element;
+export declare function WorkflowStages({ stages }: WorkflowStagesProps): React.JSX.Element;
 //#endregion
-export { Button, type ButtonProps, type ColorScheme, type ContentSidebarFolder, type ContentSidebarItem, type ContentSidebarModel, type ContentSidebarProps, InfoAsideWithParts as InfoAside, type InfoAsideBlankProps, type InfoAsidePanelProps, type InfoAsideProps, type InfoAsideRecordInfoProps, type InfoAsideWebsitePage, type InfoAsideWebsitePagesProps, InfoList, type InfoListProps, type Message, type NavigationBarProps, type NavigationBarTab, _default as Pill, type PillProps, type RecordEditorLayoutProps, RecordFormWithParts as RecordForm, type RecordFormFieldProps, type RecordFormFileInputProps, type RecordFormProps, type RecordFormSlugInputProps, type RecordFormStringInputProps, type RecordStatus, type StageProps, type StructuredTextBlockProps, StructuredTextInputWithParts as StructuredTextInput, type StructuredTextInputProps, type StructuredTextLinkProps, type TextMessage };
+export { type AddFieldMenuProps, AssetDetailWithParts as AssetDetail, type AssetDetailAddTrackProps, type AssetDetailCategorizationProps, type AssetDetailDefaultMetadataProps, type AssetDetailGenerateSubtitlesProps, type AssetDetailInfoProps, type AssetDetailInfoRow, type AssetDetailLinkingRecord, type AssetDetailLinksToItemsProps, type AssetDetailProps, type AssetDetailTrack, type AssetDetailTrackLanguage, type AssetDetailTracksProps, type AuditLogColumn, type AuditLogEvent, type AuditLogProps, Button, type ButtonProps, type ColorScheme, type ConfigurationMenuProps, type ContentSidebarFolder, type ContentSidebarItem, type ContentSidebarModel, type ContentSidebarProps, type FieldSettingsField, type FieldSettingsProps, type FieldSettingsValidators, type FieldType, InfoAsideWithParts as InfoAside, type InfoAsideAiTranslationsJob, type InfoAsideAiTranslationsProps, type InfoAsideBlankProps, type InfoAsideClosableProps, type InfoAsidePanelProps, type InfoAsideProps, type InfoAsidePublishingScheduleProps, type InfoAsideRecordInfoProps, type InfoAsideRevisionHistoryProps, type InfoAsideStage, type InfoAsideStageMove, type InfoAsideVersion, type InfoAsideWebsitePage, type InfoAsideWebsitePagesProps, InfoList, type InfoListProps, MediaArea, type MediaAreaAsset, type MediaAreaCollection, type MediaAreaProps, type MediaAreaSavedFilters, type MediaAreaSidebarProps, type MediaAreaSource, type Message, type ModelPageField, type ModelPageProps, type ModelSetting, type ModelSettingsProps, type ModularContentAddMenu, type ModularContentBlockModel, type ModularContentBlockProps, ModularContentFieldWithParts as ModularContentField, type ModularContentFieldProps, type NavigationBarPluginTab, type NavigationBarProps, type NavigationBarTab, _default as Pill, type PillProps, type PluginIconName, type PluginListPlugin, type PluginListProps, type RecordEditorLayoutProps, RecordFormWithParts as RecordForm, type RecordFormAboveProps, type RecordFormBodyProps, type RecordFormCollaborator, type RecordFormFieldMenu, type RecordFormFieldMenuItem, type RecordFormFieldProps, type RecordFormFileInputProps, type RecordFormGalleryInputProps, type RecordFormLocales, type RecordFormOutletProps, type RecordFormPluginInputProps, type RecordFormProps, type RecordFormSeoInputProps, type RecordFormSlugInputProps, type RecordFormStringInputProps, type RecordFormTextareaInputProps, type RecordFormVideoInputProps, type RecordFormViewer, type RecordListProps, type RecordListRow, type RecordStatus, type RecordTreeProps, type RecordTreeRecord, RolePermissionsWithParts as RolePermissions, type RolePermissionsAction, type RolePermissionsProps, type RolePermissionsRuleProps, type RolePermissionsRuleSetProps, type SchemaSidebarFolder, type SchemaSidebarItem, type SchemaSidebarModel, type SchemaSidebarProps, type SelectivePublishingProps, type SeoDialogProps, type SeoInputImage, type SeoInputPage, type SeoInputPreview, type SeoPreviewStackProps, type SignInProps, type SsoSettingsProps, type StageProps, type StageScheme, type StageSequence, type StructuredTextBlockProps, type StructuredTextBlockquoteProps, type StructuredTextEmbeddedBlockProps, type StructuredTextInlineRecordProps, StructuredTextInputWithParts as StructuredTextInput, type StructuredTextInputProps, type StructuredTextLinkProps, type StructuredTextListItemProps, type StructuredTextListProps, type StructuredTextMarkProps, type StructuredTextSlashMenuItem, type StructuredTextSlashMenuProps, type StructuredTextToolbarBlock, type StructuredTextToolbarMark, type StructuredTextToolbarProps, type TextMessage, VersionCompareWithParts as VersionCompare, type VersionCompareGapProps, type VersionCompareParagraphProps, type VersionCompareProps, type VersionCompareRun, type VersionCompareStructuredTextFieldProps, type VersionCompareTextFieldProps, type VersionCompareVersion, VisualEditorLayoutWithParts as VisualEditorLayout, type VisualEditorLayoutProps, type VisualEditorRecord, type VisualEditorRecordsProps, WebPreviewWithParts as WebPreview, type WebPreviewProps, type WebPreviewTargetProps, type WhiteLabelSettingsProps, type WorkflowStage, type WorkflowStagesProps };