@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/material/previewScheduler.ts

@@ -0,0 +1,235 @@
+// The node thumbnails, and the four rules that keep them from costing more than
+// the graph they describe.
+//
+// A preview is a real GPU readback: the stage renders each asked-for node's
+// output to an atlas cell and reads it back, and a readback is a pipeline
+// stall. So the chrome, which is the half that knows what the author can
+// actually see, does the deciding:
+//
+//   VIEWPORT-VISIBLE ONLY. `visiblePreviewNodes` is the filter, and it is a
+//     pure function of (nodes, viewport, canvas box) so it can be checked
+//     without mounting anything. A 200-node graph zoomed to one corner asks for
+//     the four cards on screen.
+//
+//   ONE REQUEST IN FLIGHT. A pan is thirty viewport events; thirty overlapping
+//     readbacks would queue thirty stalls behind each other and the last answer
+//     would arrive seconds after the pan stopped. The newest ask waits, and the
+//     ones it overtook are simply dropped — nobody wants the intermediate
+//     frames of a pan.
+//
+//   DEBOUNCED, so a keystroke in a Float field is one batch after the typing
+//     stops rather than one per character.
+//
+//   KEYED BY THE PIXEL SIGNATURE, and a batch whose `semanticSignature` is no
+//     longer current is THROWN AWAY rather than painted. The stage answers
+//     asynchronously; by the time a batch lands the author may have rewired the
+//     node it describes, and a thumbnail that is quietly one edit stale is
+//     worse than no thumbnail at all — it is a wrong answer with a picture.
+//
+// And the bitmaps are OWNED here: an `ImageBitmap` holds GPU-side memory until
+// `close()` is called, so every replacement closes what it replaced and
+// `dispose()` closes the lot. Leaking them is invisible until a long session
+// runs the tab out of memory.
+import { MAX_NODE_PREVIEWS } from "../../bridgeTypes.js";
+import type { NodePreviewBatch, NodePreviewRequest } from "../../bridgeTypes.js";
+
+/** A card's own box in GRAPH units. Only used to decide "is any of this on
+ *  screen", so it is deliberately generous rather than measured: a card that is
+ *  half a width off the edge is about to be scrolled into view. */
+const CARD = { width: 220, height: 150 } as const;
+
+/** How far outside the canvas still counts as visible, in screen px. One card's
+ *  worth, so a small pan does not re-ask for what it just uncovered. */
+const VIEWPORT_PAD = 240;
+
+/** How long the edits have to stop before a batch goes out. Long enough to
+ *  swallow a typed number, short enough that a committed edit feels answered. */
+export const PREVIEW_DEBOUNCE_MS = 120;
+
+/** What one node contributes to the visibility test. A structural subset of
+ *  `MaterialGraphNode`, so the caller passes graph nodes straight in. */
+export interface PreviewCandidate {
+  id: string;
+  position: readonly [number, number];
+  preview?: true | undefined;
+}
+
+/**
+ * The preview-enabled nodes that are actually on screen, newest-first order
+ * preserved from the input.
+ *
+ * Clamped to `MAX_NODE_PREVIEWS` here rather than left to the stage, because
+ * the CHROME is the half that can choose WHICH ones to drop — and dropping the
+ * tail of a screen-order list is a scroll position, which is what the bridge's
+ * own clamp comment says it means.
+ */
+export function visiblePreviewNodes(
+  nodes: readonly PreviewCandidate[],
+  viewport: { x: number; y: number; zoom: number },
+  box: { width: number; height: number },
+): string[] {
+  const zoom = Number.isFinite(viewport.zoom) && viewport.zoom > 0 ? viewport.zoom : 1;
+  const x = Number.isFinite(viewport.x) ? viewport.x : 0;
+  const y = Number.isFinite(viewport.y) ? viewport.y : 0;
+  const out: string[] = [];
+  for (const node of nodes) {
+    if (node.preview !== true) continue;
+    const left = node.position[0] * zoom + x;
+    const top = node.position[1] * zoom + y;
+    const right = left + CARD.width * zoom;
+    const bottom = top + CARD.height * zoom;
+    if (right < -VIEWPORT_PAD || left > box.width + VIEWPORT_PAD) continue;
+    if (bottom < -VIEWPORT_PAD || top > box.height + VIEWPORT_PAD) continue;
+    out.push(node.id);
+    if (out.length >= MAX_NODE_PREVIEWS) break;
+  }
+  return out;
+}
+
+/** What the canvas knows and the scheduler needs. `pixelSignature` decides
+ *  whether an ask is NEW; `semanticSignature` decides whether an ANSWER is
+ *  still current. Two different questions, so two different signatures. */
+export interface PreviewAsk {
+  materialId: string;
+  layerId: string;
+  slot: number | null;
+  nodeIds: readonly string[];
+  size: number;
+  pixelSignature: string;
+  semanticSignature: string;
+}
+
+/** A thumbnail, or the stage's sentence about why there is not one. */
+export type PreviewEntry = ImageBitmap | string;
+
+export interface PreviewScheduler {
+  /** The newest truth. Null means "nothing wants previews" — inside a subgraph,
+   *  with no graph open, or while the stage has no preview target — and it
+   *  releases everything held. */
+  ask(next: PreviewAsk | null): void;
+  dispose(): void;
+}
+
+export interface PreviewSchedulerDeps {
+  request(request: NodePreviewRequest): Promise<NodePreviewBatch | null>;
+  /** Called with a fresh map whenever the held set changes. */
+  onChange(entries: ReadonlyMap<string, PreviewEntry>): void;
+  debounceMs?: number;
+}
+
+export function createPreviewScheduler(deps: PreviewSchedulerDeps): PreviewScheduler {
+  const held = new Map<string, PreviewEntry>();
+  const debounce = deps.debounceMs ?? PREVIEW_DEBOUNCE_MS;
+  let timer: ReturnType<typeof setTimeout> | null = null;
+  let inFlight = false;
+  let pending: PreviewAsk | null = null;
+  /** The ask the held bitmaps answer. A repeat of it is a no-op. */
+  let satisfied: string | null = null;
+  let disposed = false;
+
+  const keyOf = (ask: PreviewAsk): string =>
+    `${ask.materialId}|${ask.slot ?? "-"}|${ask.size}|${ask.pixelSignature}|${[...ask.nodeIds].sort().join(",")}`;
+
+  const release = (entry: PreviewEntry | undefined): void => {
+    // A string is a message and owns nothing. Only a bitmap has to be closed,
+    // and `close` is guarded because jsdom's ImageBitmap stand-ins have none.
+    if (entry === undefined || typeof entry === "string") return;
+    if (typeof entry.close === "function") entry.close();
+  };
+
+  const clearHeld = (): void => {
+    if (held.size === 0) return;
+    for (const entry of held.values()) release(entry);
+    held.clear();
+    deps.onChange(new Map(held));
+  };
+
+  const land = (ask: PreviewAsk, batch: NodePreviewBatch): void => {
+    // STALE ANSWERS ARE DROPPED WHOLE. A batch is one render of one graph; half
+    // of it cannot be current.
+    if (batch.materialId !== ask.materialId) return;
+    if (batch.semanticSignature !== ask.semanticSignature) return;
+    const wanted = new Set(ask.nodeIds);
+    for (const [id, entry] of held) {
+      if (wanted.has(id)) continue;
+      release(entry);
+      held.delete(id);
+    }
+    for (const result of batch.results) {
+      if (!wanted.has(result.nodeId)) continue;
+      release(held.get(result.nodeId));
+      held.set(result.nodeId, result.bitmap ?? result.message);
+    }
+    satisfied = keyOf(ask);
+    deps.onChange(new Map(held));
+  };
+
+  const run = (ask: PreviewAsk): void => {
+    inFlight = true;
+    const request: NodePreviewRequest = {
+      materialId: ask.materialId,
+      layerId: ask.layerId,
+      slot: ask.slot,
+      nodeIds: ask.nodeIds,
+      size: ask.size,
+    };
+    void deps
+      .request(request)
+      .then((batch) => {
+        if (disposed || batch === null) return;
+        land(ask, batch);
+      })
+      .catch(() => {
+        // The stage refused or went away. Silent: the cards keep whatever they
+        // had, and the next committed edit asks again.
+      })
+      .finally(() => {
+        inFlight = false;
+        if (disposed) return;
+        // THE OVERTAKEN ASKS ARE GONE, not queued. `pending` only ever holds
+        // the newest, so a pan that produced thirty of them costs two requests.
+        const next = pending;
+        pending = null;
+        if (next !== null && keyOf(next) !== satisfied) run(next);
+      });
+  };
+
+  return {
+    ask(next) {
+      if (disposed) return;
+      if (timer !== null) {
+        clearTimeout(timer);
+        timer = null;
+      }
+      if (next === null || next.nodeIds.length === 0) {
+        pending = null;
+        satisfied = null;
+        clearHeld();
+        return;
+      }
+      if (keyOf(next) === satisfied) {
+        pending = null;
+        return;
+      }
+      pending = next;
+      timer = setTimeout(() => {
+        timer = null;
+        const ask = pending;
+        if (ask === null) return;
+        // Held while one is out. The settle path above picks `pending` back up,
+        // which is what makes "one in flight" true without a queue.
+        if (inFlight) return;
+        pending = null;
+        run(ask);
+      }, debounce);
+    },
+    dispose() {
+      disposed = true;
+      if (timer !== null) clearTimeout(timer);
+      timer = null;
+      pending = null;
+      for (const entry of held.values()) release(entry);
+      held.clear();
+    },
+  };
+}

package/src/panels/material/reactFlow.css

@@ -0,0 +1,6 @@
+/* React Flow's own stylesheet, in the `vendor` cascade layer under every
+   house rule, as the /scene index had it. Imported by MaterialGraphCanvas
+   alone, so it ships in the material canvas's chunk and only the material
+   nodes pay for it. The index's first statement fixes the layer order before
+   this can arrive, so the layer keeps its rank. */
+@import "@xyflow/react/dist/style.css" layer(vendor);

package/src/panels/material/socketGlyph.ts

@@ -0,0 +1,85 @@
+// THE SOCKET VOCABULARY: shape carries the type, and there is exactly one ink.
+//
+// ── WHY NOT A COLOUR PER TYPE ────────────────────────────────────────────
+//
+// Every shipped node editor colours its sockets, and this one may not. The
+// house design system is monochrome plus ONE blue, and the blue is signal:
+// selection, focus, the armed thing. Nine socket types would be nine hues that
+// are none of them a studio colour: an unbounded second palette.
+//
+// So the TYPE is a shape and the STATE is the ink:
+//
+//   --text-dim   at rest
+//   --text       when a wire lands on it
+//   --accent     ringed, while a live drag could land here
+//   opacity .45  while a live drag could NOT
+//
+// A reader learns nine shapes once; they then read identically in both themes,
+// at every zoom, and for an author who cannot tell red from green.
+//
+// ── AND WHY THE TABLE IS A TYPED `Record` ────────────────────────────────
+//
+// `Record<MaterialGraphSocketType, …>` and not a partial map with a fallback: a
+// tenth socket type added to the registry must be a compile error here rather
+// than a handle that silently draws as a circle and lies about what it carries.
+import type { MaterialGraphSocketType } from "@dailies-studio/shot/doc";
+
+export interface MaterialSocketGlyph {
+  /** The class that draws the shape. Every one of these resolves in
+   *  `styles.css` and paints from `--text*` / `--border*` / `--accent*` only —
+   *  `materialSocketGlyph.test.ts` holds both halves of that. */
+  shape: string;
+  /** What the shape means, said in words for the handle's tooltip. */
+  label: string;
+}
+
+/**
+ * The nine shapes, chosen so that width reads as width: a float is the smallest
+ * closed shape, a vec2 is a diamond, a vec3 a square, a vec4 a rounded square.
+ * The two hollow rings are the two things that are not plain numbers (a colour
+ * and a texture handle), and the two broken outlines are the two that are not a
+ * concrete value (an integer's discrete steps, a generic's "whatever arrives").
+ */
+export const SOCKET_GLYPHS: Record<MaterialGraphSocketType, MaterialSocketGlyph> = {
+  float: { shape: "material-socket-circle", label: "Float" },
+  int: { shape: "material-socket-circle-dotted", label: "Integer" },
+  bool: { shape: "material-socket-triangle", label: "Boolean" },
+  vec2: { shape: "material-socket-diamond", label: "Vector 2" },
+  vec3: { shape: "material-socket-square", label: "Vector 3" },
+  vec4: { shape: "material-socket-square-round", label: "Vector 4" },
+  color: { shape: "material-socket-ring", label: "Colour" },
+  texture: { shape: "material-socket-ring-double", label: "Texture" },
+  numeric: { shape: "material-socket-circle-dashed", label: "Any number" },
+};
+
+/**
+ * What a LIVE drag says about this handle.
+ *
+ * `"idle"` is the resting state and the only one there is when no wire is in
+ * hand. The other two are the answer `canConnect` already gives — shown rather
+ * than discovered by dropping and being refused.
+ */
+export type MaterialSocketDrop = "idle" | "ok" | "blocked";
+
+/** The whole class list for one handle, in one place, so the card renderers
+ *  cannot each spell the state modifiers slightly differently. */
+export function socketGlyphClass(
+  type: MaterialGraphSocketType,
+  state: { connected: boolean; drop: MaterialSocketDrop },
+): string {
+  const glyph = SOCKET_GLYPHS[type];
+  return [
+    "material-socket",
+    glyph.shape,
+    state.connected ? "is-connected" : "",
+    state.drop === "ok" ? "is-droppable" : "",
+    state.drop === "blocked" ? "is-blocked" : "",
+  ]
+    .filter((part) => part !== "")
+    .join(" ");
+}
+
+/** The handle's tooltip: what it is called, and what it carries. */
+export function socketTitle(label: string, type: MaterialGraphSocketType): string {
+  return `${label} · ${SOCKET_GLYPHS[type].label}`;
+}

package/src/panels/material/viewportMemory.ts

@@ -0,0 +1,58 @@
+// Where the author last left each graph, per scope.
+//
+// ── WHY A MODULE MAP AND NOT THE DOCUMENT ───────────────────────────────
+//
+// A pan and a zoom are the same class of thing as `materialSnapToGrid`: they
+// describe where a person is looking, not what the material is. Writing them to
+// `Doc3D` would make scrolling the canvas a document edit — an undo entry, an
+// autosave, and a diff in every agent's next read of the file — for a gesture
+// that changes no pixel of the render.
+//
+// ── AND WHY NOT COMPONENT STATE ─────────────────────────────────────────
+//
+// The canvas UNMOUNTS whenever the author flips to the TSL view, enters a
+// subgraph, or changes slot. Component state dies with it, so every one of
+// those cost a `fitView` back to the origin — the author lost their place for
+// pressing a button and coming back. A module Map outlives the component and
+// dies with the tab, which is exactly the lifetime a "where was I" belongs to.
+//
+// Keyed by material AND scope trail, because a function body is its own canvas
+// with its own layout; sharing one viewport across the two would land the
+// author somewhere arbitrary on every entry.
+
+export interface GraphViewport {
+  x: number;
+  y: number;
+  zoom: number;
+}
+
+/** `materialId + "/" + path.join("/")`. The main graph's trail is empty, so its
+ *  key ends in a trailing slash — deliberate, since it keeps the main scope and
+ *  a function called "" (which cannot exist) from ever colliding. */
+export function materialViewportKey(materialId: string, path: readonly string[]): string {
+  return `${materialId}/${path.join("/")}`;
+}
+
+// ponytail: unbounded, one entry per (material, scope) an author visits. A
+// session reaches dozens; a cap would be eviction policy for nothing.
+const REMEMBERED = new Map<string, GraphViewport>();
+
+export function rememberMaterialViewport(key: string, viewport: GraphViewport): void {
+  // Garbage in a viewport is not hypothetical: React Flow reports NaN for a
+  // moment when its container is measured at zero, which is every mount under
+  // jsdom and a real one behind a `display: none` panel. Storing it would make
+  // the NEXT entry restore to nowhere with no way back but the frame key.
+  if (!Number.isFinite(viewport.x) || !Number.isFinite(viewport.y)) return;
+  if (!Number.isFinite(viewport.zoom) || viewport.zoom <= 0) return;
+  REMEMBERED.set(key, { x: viewport.x, y: viewport.y, zoom: viewport.zoom });
+}
+
+export function recallMaterialViewport(key: string): GraphViewport | null {
+  return REMEMBERED.get(key) ?? null;
+}
+
+/** For the suites, which must not inherit one another's pan. Never called by
+ *  the app: a session's memory has no reason to be thrown away. */
+export function clearMaterialViewports(): void {
+  REMEMBERED.clear();
+}

package/src/panels/preferences/PreferencesDialog.tsx

@@ -0,0 +1,215 @@
+// The Preferences dialog (gap 5, Paper "PreferencesDialog / dark").
+//
+// Opened by the app menu row, ⌘, and the `prefs.open` WebMCP verb, all of
+// which set `prefsOpen`; mounted once, in AppMenu. Every control applies at
+// once through the setter the rest of the chrome already uses (the View menu
+// rows, ⇧R), so there is no Save: Done only closes.
+//
+// It is chrome state, never `edit`: a viewer can open it and change any row.
+import type { ReactNode } from "react";
+import { Dialog, SegmentedControl, Toggle } from "@dailies-studio/ui";
+import { useStudioTheme } from "@dailies-studio/ui/theme";
+import type { StudioThemePreference } from "@dailies-studio/ui/theme";
+import { isPlaybackResolution } from "../../bridgeTypes.js";
+import type { PlaybackResolution } from "../../bridgeTypes.js";
+import { useShotEditor, useStore } from "../../state/context.js";
+import { isCloudWorkspace } from "../../state/posterCapture.js";
+import { shortcutFor } from "../../state/shortcuts.js";
+
+const THEMES: { value: StudioThemePreference; label: string }[] = [
+  { value: "system", label: "System" },
+  { value: "light", label: "Light" },
+  { value: "dark", label: "Dark" },
+];
+
+const PLAYBACK_RESOLUTION_OPTIONS: { value: PlaybackResolution; label: string }[] = [
+  { value: "auto", label: "Auto" },
+  { value: "full", label: "Full" },
+  { value: "fast", label: "Fast" },
+];
+
+function Section(props: { label: string; children: ReactNode }) {
+  return (
+    <section className="prefs-section" aria-label={props.label}>
+      <div className="prefs-section-label">{props.label}</div>
+      {props.children}
+    </section>
+  );
+}
+
+/** One row: the label (and a hint under it) on the left, the control right.
+ *  The control takes the label as its accessible name. */
+function Row(props: { label: string; hint?: string; children: ReactNode }) {
+  return (
+    <div className="prefs-row">
+      <div className="prefs-row-text">
+        <span className="prefs-row-label">{props.label}</span>
+        {props.hint !== undefined && <span className="prefs-row-hint">{props.hint}</span>}
+      </div>
+      <div className="prefs-row-control">{props.children}</div>
+    </div>
+  );
+}
+
+export function PreferencesDialog() {
+  const store = useStore();
+  const open = useShotEditor((s) => s.prefsOpen);
+  const { preference, setPreference } = useStudioTheme();
+  const rulers = useShotEditor((s) => s.rulers);
+  const showGrid = useShotEditor((s) => s.showGrid);
+  const smartGuides = useShotEditor((s) => s.smartGuides);
+  const motionPaths = useShotEditor((s) => s.motionPaths);
+  const toolbarPosition = useShotEditor((s) => s.toolbarPosition);
+  const playbackResolution = useShotEditor((s) => s.playbackResolution);
+  const blockLabels = useShotEditor((s) => s.blockLabels);
+  const selectMovesPlayhead = useShotEditor((s) => s.selectMovesPlayhead);
+  const fieldLabels = useShotEditor((s) => s.fieldLabels);
+  const showFpsBadge = useShotEditor((s) => s.showFpsBadge);
+  const showBackendBadge = useShotEditor((s) => s.showBackendBadge);
+  const close = (): void => store.setPrefsOpen(false);
+  const rulersKey = shortcutFor("view.rulers");
+
+  return (
+    <Dialog
+      open={open}
+      size="wide"
+      className="prefs-dialog"
+      onClose={close}
+      title={
+        <span className="prefs-title">
+          Preferences
+          <kbd className="prefs-kbd">{shortcutFor("prefs.open")}</kbd>
+        </span>
+      }
+      actions={
+        <>
+          <span className="prefs-footnote" data-testid="prefs-footnote">
+            {isCloudWorkspace() ? "Saved to your account. This browser keeps a copy." : "Saved in this browser."}
+          </span>
+          <button type="button" className="btn is-primary" onClick={close}>
+            Done
+          </button>
+        </>
+      }
+    >
+      <div className="prefs-body" data-testid="prefs-dialog">
+        <Section label="Appearance">
+          <Row label="Theme">
+            <SegmentedControl
+              ariaLabel="Theme"
+              options={THEMES}
+              value={preference}
+              onChange={(v) => setPreference(v as StudioThemePreference)}
+            />
+          </Row>
+        </Section>
+        <Section label="Canvas">
+          <Row label="Rulers" hint={`On the camera view and inside a component.${rulersKey === undefined ? "" : ` ${rulersKey}`}`}>
+            <Toggle ariaLabel="Rulers" checked={rulers} onChange={(on) => store.setEditorPref("rulers", on)} />
+          </Row>
+          <Row label="Grid">
+            <Toggle
+              ariaLabel="Grid"
+              checked={showGrid}
+              onChange={(on) => {
+                if (on !== store.getState().showGrid) store.toggleGrid();
+              }}
+            />
+          </Row>
+          <Row label="Smart guides" hint="Ctrl turns snapping off while you drag">
+            <Toggle
+              ariaLabel="Smart guides"
+              checked={smartGuides}
+              onChange={(on) => store.setEditorPref("smartGuides", on)}
+            />
+          </Row>
+          <Row label="Motion paths" hint="Path of the selected layer's keys">
+            <Toggle
+              ariaLabel="Motion paths"
+              checked={motionPaths}
+              onChange={(on) => store.setEditorPref("motionPaths", on)}
+            />
+          </Row>
+          <Row label="Toolbar position">
+            <SegmentedControl
+              ariaLabel="Toolbar position"
+              options={[
+                { value: "bottom", label: "Bottom" },
+                { value: "top", label: "Top" },
+              ]}
+              value={toolbarPosition}
+              onChange={(v) => store.setEditorPref("toolbarPosition", v === "top" ? "top" : "bottom")}
+            />
+          </Row>
+          <Row
+            label="Playback resolution"
+            hint="Auto lowers it while playing only when the GPU falls behind. Paused frames and exports stay full."
+          >
+            <SegmentedControl
+              ariaLabel="Playback resolution"
+              options={PLAYBACK_RESOLUTION_OPTIONS}
+              value={playbackResolution}
+              onChange={(v) => store.setEditorPref("playbackResolution", isPlaybackResolution(v) ? v : "auto")}
+            />
+          </Row>
+        </Section>
+        <Section label="Timeline">
+          <Row label="Camera move labels">
+            <SegmentedControl
+              ariaLabel="Camera move labels"
+              options={[
+                { value: "fit", label: "When they fit" },
+                { value: "off", label: "Off" },
+              ]}
+              value={blockLabels}
+              onChange={(v) => store.setEditorPref("blockLabels", v === "off" ? "off" : "fit")}
+            />
+          </Row>
+          <Row label="Move playhead to selection">
+            <Toggle
+              ariaLabel="Move playhead to selection"
+              checked={selectMovesPlayhead}
+              onChange={(on) => store.setSelectMovesPlayhead(on)}
+            />
+          </Row>
+        </Section>
+        <Section label="Inspector">
+          <Row label="Field labels" hint="Compact shows a glyph. Named shows the word.">
+            <SegmentedControl
+              ariaLabel="Field labels"
+              options={[
+                { value: "compact", label: "Compact" },
+                { value: "named", label: "Named" },
+              ]}
+              value={fieldLabels}
+              onChange={(v) => store.setEditorPref("fieldLabels", v === "named" ? "named" : "compact")}
+            />
+          </Row>
+        </Section>
+        <Section label="Status">
+          <Row label="FPS badge">
+            <Toggle ariaLabel="FPS badge" checked={showFpsBadge} onChange={(on) => store.setFpsBadge(on)} />
+          </Row>
+          <Row label="Renderer badge">
+            <Toggle
+              ariaLabel="Renderer badge"
+              checked={showBackendBadge}
+              onChange={(on) => store.setBackendBadge(on)}
+            />
+          </Row>
+        </Section>
+        <Section label="Layout">
+          <Row label="Panel sizes and docks">
+            <button
+              type="button"
+              className="btn"
+              onClick={() => store.resetLayout(window.innerWidth, window.innerHeight)}
+            >
+              Reset panel layout
+            </button>
+          </Row>
+        </Section>
+      </div>
+    </Dialog>
+  );
+}