@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/inspector/design/MeshSection.tsx

@@ -8,47 +8,152 @@
 // first section that shows every field is a section nobody can find the model
 // in.
 //
+// ── THE MATERIAL'S OWN PARAMS ARE HERE, BECAUSE THEY WERE NOWHERE ───────
+//
+// The picker is a browse-and-apply grid with no controls in it, so a generator's
+// params were fixed at its contract defaults the moment it was applied and were
+// then unreachable from the entire chrome. On a glow generator that means the
+// layer's COLOUR: the author could see it and could not touch it.
+//
+// The rows are built from the generator's CONTRACT through `PropRow`, the one
+// row every contract's props render in (a placed component's, a definition's,
+// Components' "this use"), so a colour param gets the colour field and a
+// bounded number its slider for exactly the reason they do there. Never from
+// the stored params: those hold only what somebody already changed, with no
+// kinds, no ranges and no labels. A param somebody changed carries the row's
+// reset, which deletes it back to the contract's own default.
+//
+// ── EVERY NUMBER DRAGS LIVE, AND EVERY ROW READS ITS OWN MIXED ──────────
+//
+// A number row is `MeshNumber`: its commit and its drag are ONE builder over
+// each mesh layer's own block, so the stage moves while the pointer is down and
+// a drag's release lands the document its moves did. Mixed is asked per field,
+// over the value the field SHOWS (a shape's depth is the derived min(w, h) when
+// it stores none, so two shapes of different sizes disagree on it).
+//
 // ponytail: add the toon detail rows when someone is actually art-directing
 // one.
+import { useEffect, useMemo } from "react";
+import type { ReactNode } from "react";
 import {
+  ColorField,
   Combobox,
+  IconClose,
   InspectorRow,
   InspectorSection,
   NumberField,
+  PropRow,
   SegmentedControl,
   TextField,
+  Toggle,
+  useLocked,
+  wordOptions,
 } from "@dailies-studio/ui";
-import { MESH_LOOPS, MESH_SHADING_MODES } from "@dailies-studio/shot/doc";
-import type { Layer3D, MeshLayer3D, MeshLoop, MeshShading } from "@dailies-studio/shot/doc";
+import { orderSpecs } from "@dailies-studio/contract";
+import type { ControlSpec } from "@dailies-studio/contract";
+import { KeyframeDot } from "../KeyframeDot.js";
+import {
+  DEFAULT_PRIMITIVE_COLOR,
+  DEFAULT_SPLINE_CAPS,
+  DEFAULT_SPLINE_UP,
+  MAX_SPLINE_ANGLE_DEG,
+  MAX_SPLINE_COORDINATE,
+  MAX_SPLINE_SCALE,
+  MEDIA_LOOPS,
+  MESH_PRIMITIVE_KINDS,
+  MESH_SHADING_MODES,
+  isGraphMaterial,
+  meshPrimitiveOf,
+  primitiveDepthOf,
+  splineVisibleRange,
+  // The path table's bounds, read by `MeshNumber` below instead of restated
+  // here: `numberRange` is what the keyframe gate clamps against, so a second
+  // copy in the chrome is a pill that offers a number the diamond then refuses.
+  trackablePath,
+} from "@dailies-studio/shot/doc";
+import type {
+  Layer3D,
+  MeshLayer3D,
+  MediaLoop,
+  MeshMaterialParam,
+  MeshPrimitive,
+  MeshPrimitiveKind,
+  MeshShading,
+  SplineProfile,
+  SplinePrimitive,
+} from "@dailies-studio/shot/doc";
 import { useShotEditor, useStore } from "../../../state/context.js";
-import { useSelectedLayers, useSelectionValue, useSelectionWrite } from "../useDocWrite.js";
+import { useSelectedLayers, useSelectionScrub, useSelectionWrite } from "../useDocWrite.js";
+import { primitiveForKind } from "../../../state/insert.js";
 
 type MeshBlock = MeshLayer3D["mesh"];
 
+/** A widget with no `mixed` of its own shows its Mixed this way: a segmented
+ *  control and a combobox both read an empty value as "none of these", and a
+ *  combobox shows its placeholder over it. */
+const NO_VALUE = "";
+const MIXED = "Mixed";
+
+/** The two parts of a spline profile's offset, one vec2 track keyed together. */
+const OFFSET_PARTS = ["Offset X", "Offset Y"] as const;
+
 export function MeshSection() {
   const write = useSelectionWrite();
   const layers = useSelectedLayers();
   const store = useStore();
   const doc = useShotEditor((s) => s.doc);
   const library = useShotEditor((s) => s.library);
-  const mesh = useSelectionValue((layer) => (layer.kind === "mesh" ? layer.mesh : undefined));
-  if (!layers.some((l) => l.kind === "mesh") || mesh.value === undefined) return null;
+  const contracts = useShotEditor((s) => s.contracts);
+  const splineEdit = useShotEditor((s) => s.splineEdit);
+  // A VIEWER'S PANEL LOCKS EVERY VERB THAT WRITES. The widgets read the lock
+  // themselves; this section's own buttons are plain ones, so they read it
+  // here. Opening the node editor only navigates, and stays live.
+  const locked = useLocked();
+  // THE MESH LAYERS THEMSELVES, not `useSelectionValue`. That hook compares
+  // members with `Object.is`, and `layer.mesh` is an object — so every
+  // multi-selection was "Mixed" by identity, over values the author could see
+  // agree, and the two number fields wore that placeholder permanently. Mixed is
+  // asked per FIELD below instead.
+  const meshes = layers.filter((l): l is MeshLayer3D => l.kind === "mesh");
+  const m = meshes[0]?.mesh;
+  // Pushed up by the stage as the model parses — the chrome is three-free and
+  // cannot read a glTF's material list itself. Empty for a primitive and for a
+  // model that has not loaded yet.
+  const slots = useShotEditor((s) => (meshes[0] === undefined ? undefined : s.meshMaterialSlots[meshes[0].id])) ?? [];
+  const legacyMaterial = m?.material === undefined || isGraphMaterial(m.material) ? undefined : m.material;
+  const graphBinding = m?.material !== undefined && isGraphMaterial(m.material) ? m.material : undefined;
+  const graph = graphBinding === undefined ? undefined : doc?.materials?.[graphBinding.materialId];
+  const generator = legacyMaterial?.generator;
+  // Fetched the moment a material is ON SCREEN rather than when a row asks for
+  // it: the rows ARE the contract, so there is nothing to render until it is
+  // here. Cached in the store, so re-selecting the same layer costs no request.
+  useEffect(() => {
+    if (generator !== undefined) void store.loadContract(generator);
+  }, [store, generator]);
+  // Model assets only. Offering an image would let an author point a mesh layer
+  // at a PNG, which `validateShotDoc` refuses on save — a menu that can only
+  // produce an invalid document is worse than a short menu. Memoised on the
+  // asset table: the section repaints on every document identity change (once
+  // per rAF frame of any drag), and the table itself changes only on an upload.
+  const assets = doc?.assets;
+  const models = useMemo(
+    () =>
+      Object.entries(assets ?? {})
+        .filter(([, asset]) => asset.kind === "model")
+        .map(([id, asset]) => ({ value: id, label: asset.path.split("/").pop() ?? id })),
+    [assets],
+  );
+  if (m === undefined) return null;
 
-  const m = mesh.value;
   // The catalog's display name, or the raw id when the library has not loaded
   // (or when the document names a generator this build does not ship). Showing
   // the id rather than "Choose…" is what makes the second case visible at all —
   // a material that silently reads as unset is one an author would set twice.
-  const materialName =
-    m.material === undefined
-      ? null
-      : (library.find((row) => row.id === m.material?.generator)?.name ?? m.material.generator);
-  // Model assets only. Offering an image would let an author point a mesh layer
-  // at a PNG, which `validateShotDoc` refuses on save — a menu that can only
-  // produce an invalid document is worse than a short menu.
-  const models = Object.entries(doc?.assets ?? {})
-    .filter(([, asset]) => asset.kind === "model")
-    .map(([id, asset]) => ({ value: id, label: asset.path.split("/").pop() ?? id }));
+  const materialName = graph?.name ?? (
+    generator === undefined ? null : (library.find((row) => row.id === generator)?.name ?? generator)
+  );
+  const materialContract = generator === undefined ? undefined : contracts[generator];
+  const meshIds = meshes.map((l) => l.id);
 
   /** Every write goes through one mapper so a field that CLEARS itself deletes
    *  its key rather than setting it to `undefined`: codegen prints the block by
@@ -59,58 +164,273 @@ export function MeshSection() {
   const set = <K extends keyof MeshBlock>(key: K, value: MeshBlock[K]): void =>
     patch((block) => ({ ...block, [key]: value }));
 
+  /** Does the selection disagree about ONE field? A scalar read per row, which
+   *  is the only shape `Object.is` answers honestly. */
+  const mixedOn = <T,>(read: (block: MeshBlock) => T): boolean =>
+    meshes.some((l) => !Object.is(read(l.mesh), read(m)));
+
+  /** ONE primitive field, edited on each layer's OWN base primitive and only
+   *  on layers of that kind (`withPrim`). */
+  const setPrim = <K extends MeshPrimitive["kind"]>(
+    kind: K,
+    edit: (p: Extract<MeshPrimitive, { kind: K }>) => MeshPrimitive,
+  ): void => patch((block) => withPrim(block, kind, edit));
+  const primMixed = <K extends MeshPrimitive["kind"]>(
+    kind: K,
+    read: (p: Extract<MeshPrimitive, { kind: K }>) => unknown,
+  ): boolean =>
+    mixedOn((block) => {
+      const p = meshPrimitiveOf(block);
+      return p?.kind === kind ? read(p as Extract<MeshPrimitive, { kind: K }>) : undefined;
+    });
+
+  // A SHAPE section and a MODEL section are one component with one gate: the
+  // schema says a mesh is exactly one of the two, so every row below asks
+  // which it is dressing. The clip rows hide for a shape (asset-only, inert),
+  // and the shape rows hide for a model.
+  const primitive = meshPrimitiveOf(m);
+  const shapeLayerBox = meshes[0]?.transform.size ?? [300, 300];
+  // The depth each layer DRAWS (absent is min(w, h) of its own box), which is
+  // both what the field shows and what Mixed is asked of.
+  const depthMixed = meshes.some(
+    (l) => primitiveDepthOf(l.mesh, l.transform.size) !== primitiveDepthOf(m, shapeLayerBox),
+  );
+  const kindMixed = mixedOn((block) => meshPrimitiveOf(block)?.kind);
+  const shadingMixed = mixedOn((block) => block.shading?.mode ?? "unlit");
+
   return (
-    <InspectorSection title="Model" persistKey="shot:mesh">
-      <InspectorRow label="Asset">
-        <Combobox
-          options={models}
-          value={m.asset}
-          ariaLabel="Model asset"
-          placeholder="Search models"
-          onChange={(next) => set("asset", next)}
-        />
-      </InspectorRow>
+    <InspectorSection className="insp-object" title={primitive !== null ? "Shape" : "Model"} persistKey="shot:mesh">
+      {primitive !== null ? (
+        <>
+          <InspectorRow label="Shape">
+            <Combobox
+              options={MESH_PRIMITIVE_KINDS.map((kind) => ({
+                value: kind,
+                label: kind.charAt(0).toUpperCase() + kind.slice(1),
+              }))}
+              value={kindMixed ? NO_VALUE : primitive.kind}
+              ariaLabel="Shape kind"
+              placeholder={MIXED}
+              // A FRESH record on a kind switch: per-shape params are the old
+              // shape's silhouette, and a torus's arc smuggled into a box is a
+              // stale key the author cannot see.
+              onChange={(next) => set("primitive", primitiveForKind(next as MeshPrimitiveKind))}
+            />
+          </InspectorRow>
+          <ShapeColorRow
+            value={m.color ?? DEFAULT_PRIMITIVE_COLOR}
+            mixed={mixedOn((block) => (block.color ?? DEFAULT_PRIMITIVE_COLOR).toLowerCase())}
+          />
+          {primitive.kind === "plane" || primitive.kind === "spline" ? null : (
+            <MeshNumber
+              label="Depth"
+              ariaLabel="Shape depth"
+              // The EFFECTIVE depth: absent means min(w, h), and showing that
+              // number is what makes the default legible instead of a blank.
+              value={primitiveDepthOf(m, shapeLayerBox)}
+              mixed={depthMixed}
+              unit="px"
+              min={1}
+              step={1}
+              path="mesh.depthPx"
+              edit={(block, next) => ({ ...block, depthPx: Math.round(next) })}
+            />
+          )}
+          {primitive.kind === "box" ? (
+            <MeshNumber
+              label="Corner"
+              ariaLabel="Corner radius"
+              value={primitive.cornerPx ?? 0}
+              mixed={primMixed("box", (p) => p.cornerPx ?? 0)}
+              unit="px"
+              min={0}
+              // No `max`: primitive.ts clamps the BUILT bevel to half the
+              // smallest dimension and keeps the authored number.
+              step={1}
+              path="mesh.primitive.cornerPx"
+              // 3D edge rounding on the BODY, deliberately not paint.radius
+              // (paint is inert on every mesh).
+              edit={(block, next) => withPrim(block, "box", (p) => ({ ...p, cornerPx: Math.round(next) }))}
+            />
+          ) : null}
+          {primitive.kind === "torus" ? (
+            <>
+              <MeshNumber
+                label="Tube"
+                ariaLabel="Tube ratio"
+                value={primitive.tubeRatio ?? 0.3}
+                mixed={primMixed("torus", (p) => p.tubeRatio ?? 0.3)}
+                min={0.01}
+                max={0.99}
+                step={0.01}
+                path="mesh.primitive.tubeRatio"
+                edit={(block, next) => withPrim(block, "torus", (p) => ({ ...p, tubeRatio: next }))}
+              />
+              {/* THE PROGRESS-RING SWEEP: keyframing this is how a ring
+                  fills. */}
+              <MeshNumber
+                label="Arc"
+                ariaLabel="Arc degrees"
+                value={primitive.arcDeg ?? 360}
+                mixed={primMixed("torus", (p) => p.arcDeg ?? 360)}
+                unit="°"
+                min={1}
+                max={360}
+                step={1}
+                path="mesh.primitive.arcDeg"
+                edit={(block, next) => withPrim(block, "torus", (p) => ({ ...p, arcDeg: Math.round(next) }))}
+              />
+            </>
+          ) : null}
+          {primitive.kind === "spline" ? (
+            <SplineRows
+              primitive={primitive}
+              hasTaperTracks={meshes.some(
+                (layer) =>
+                  layer.tracks?.["mesh.primitive.startScale"] !== undefined ||
+                  layer.tracks?.["mesh.primitive.endScale"] !== undefined,
+              )}
+              hasTwistTrack={meshes.some(
+                (layer) => layer.tracks?.["mesh.primitive.twistDeg"] !== undefined,
+              )}
+              editing={meshes.length === 1 && splineEdit?.layerId === meshes[0]!.id}
+              locked={locked}
+              onEdit={() =>
+                store.setSplineEditContext(
+                  meshes.length !== 1 || splineEdit?.layerId === meshes[0]!.id
+                    ? null
+                    : { layerId: meshes[0]!.id, selectedPointIds: [] },
+                )
+              }
+              onChange={(edit) => setPrim("spline", edit)}
+              mixed={(read) => primMixed("spline", read)}
+              onRefusal={(message) => store.reportError(message)}
+            />
+          ) : null}
+        </>
+      ) : (
+        <InspectorRow label="Asset">
+          <Combobox
+            options={models}
+            value={mixedOn((block) => block.asset ?? "") ? NO_VALUE : (m.asset ?? "")}
+            ariaLabel="Model asset"
+            placeholder={mixedOn((block) => block.asset ?? "") ? MIXED : "Search models"}
+            onChange={(next) => set("asset", next)}
+          />
+        </InspectorRow>
+      )}
 
-      <InspectorRow label="Shading">
-        <SegmentedControl
-          ariaLabel="Mesh shading"
-          value={m.shading?.mode ?? "unlit"}
-          options={MESH_SHADING_MODES.map((mode) => ({ value: mode, label: mode }))}
-          onChange={(next) => set("shading", { mode: next as MeshShading["mode"] } as MeshShading)}
-        />
-      </InspectorRow>
+      {graph !== undefined && graph.model !== "studio" ? null : (
+        <InspectorRow label="Shading">
+          <SegmentedControl
+            ariaLabel="Mesh shading"
+            // A disagreeing selection selects NOTHING rather than the lead's
+            // mode: an unmatched value is how a segmented control says Mixed.
+            value={shadingMixed ? NO_VALUE : (m.shading?.mode ?? "unlit")}
+            options={wordOptions(MESH_SHADING_MODES)}
+            onChange={(next) => set("shading", { mode: next as MeshShading["mode"] } as MeshShading)}
+          />
+        </InspectorRow>
+      )}
 
-      {/* THE MATERIAL IS A NAME AND TWO BUTTONS, not a list. The catalog is 48
-          entries with thumbnails, which is a browser and not an inspector row —
-          so this says what is on and opens the picker, exactly as the Asset row
-          would if a model were 48 things you had to look at to choose between.
-          The generator's own params are edited in the picker's own lane; this
-          row's job is "what is it, and take it off". */}
-      <InspectorRow label="Material">
-        <div className="mesh-material-row">
-          <button
-            type="button"
-            className="mesh-material-name"
-            onClick={() => store.openMaterialPicker(layers.filter((l) => l.kind === "mesh").map((l) => l.id))}
-          >
-            {materialName ?? "Choose…"}
-          </button>
-          {m.material === undefined ? null : (
+      {/* New authoring enters the graph workspace. Legacy catalog bindings stay
+          readable below, but the old picker is intentionally no longer the
+          primary creation surface. The remove is a verb INSIDE the row's box,
+          the house accessory, so the row is as wide with a material as
+          without one. */}
+      <InspectorRow
+        label="Material"
+        trailing={
+          m.material === undefined ? undefined : (
             <button
               type="button"
-              className="mesh-material-clear"
+              className="insp-key is-danger"
               aria-label="Remove material"
               title="Back to the model's own materials"
-              onClick={() =>
-                store.removeMeshMaterial(layers.filter((l) => l.kind === "mesh").map((l) => l.id))
-              }
+              disabled={locked}
+              onClick={() => store.removeMeshMaterial(meshIds)}
             >
-              ×
+              <IconClose />
             </button>
-          )}
-        </div>
+          )
+        }
+      >
+        <button
+          type="button"
+          className="text-input mesh-material-name"
+          disabled={meshes.length !== 1}
+          title={meshes.length === 1 ? "Edit material nodes on this mesh" : "Select one mesh to edit its material"}
+          onClick={() => {
+            const mesh = meshes[0];
+            if (meshes.length === 1 && mesh !== undefined) store.openMaterialWorkspace(mesh.id);
+          }}
+        >
+          {materialName ?? "Set up nodes…"}
+        </button>
       </InspectorRow>
 
+      {/* THE MODEL'S OWN MATERIALS, one row each.
+          The list is pushed up by the stage as the glTF parses, so it is absent
+          for a primitive and for a model that has not loaded — and absent is
+          the right answer in both: a mesh with one surface has nothing to
+          choose between, and offering slot rows for a model nobody has seen
+          yet would be offering names this chrome does not have. Each row enters
+          the workspace ON that slot, which is the only way to author a submesh
+          without first opening the whole model and then changing the header. */}
+      {meshes.length !== 1 || slots.length === 0 ? null : (
+        <div className="mesh-slot-list" role="group" aria-label="Model materials">
+          {slots.map((entry) => (
+            <button
+              type="button"
+              key={entry.index}
+              className="mesh-slot-row"
+              title={`Edit the nodes on ${entry.name.trim() === "" ? `material ${entry.index}` : entry.name}`}
+              onClick={() => {
+                const mesh = meshes[0];
+                if (mesh !== undefined) store.openMaterialWorkspace(mesh.id, { slot: entry.index });
+              }}
+            >
+              <span className="mesh-slot-index">{entry.index}</span>
+              <span className="mesh-slot-name">
+                {entry.name.trim() === "" ? `Material ${entry.index}` : entry.name}
+              </span>
+              <small>
+                {entry.drawables} mesh{entry.drawables === 1 ? "" : "es"}
+                {entry.maps.length === 0 ? "" : ` · ${entry.maps.length} map${entry.maps.length === 1 ? "" : "s"}`}
+              </small>
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* ONE MESH AT A TIME, which is InstanceSection's rule for the same
+          reason: these keys belong to ONE generator's contract, and a selection
+          may wear two different generators — so a fan-out would write keys the
+          other material has never heard of. */}
+      {m.material === undefined ? null : meshes.length > 1 ? (
+        <div className="insp-notice">
+          Select one mesh on its own to edit the material&apos;s controls.
+        </div>
+      ) : graph !== undefined ? (
+        // MaterialSection, below, owns a graph material's controls.
+        null
+      ) : materialContract === undefined ? (
+        // Ceiling: `loadContract` swallows its failure by design, so a generator
+        // this build does not ship rests here rather than saying so. The Material
+        // row above still names it, which is what tells the author which one.
+        <div className="insp-notice">Loading the material&apos;s controls…</div>
+      ) : (
+        // Contract order: `order` first, then the manifest's own declaration
+        // order, the rule every spec-driven panel lists by.
+        orderSpecs(materialContract).map((spec) => (
+          <MaterialParamRow key={spec.key} spec={spec} value={legacyMaterial?.params?.[spec.key]} />
+        ))
+      )}
+
+      {/* The clip rows are ASSET-ONLY (a shape has no clips; the fields are
+          inert-kept on one), so a shape section simply does not show them. */}
+      {primitive !== null ? null : (
+        <>
       {/* Free TEXT, not a dropdown. Clip names live inside the GLB and the
           chrome never parses one — it holds a document, not a scene graph — so
           a picker here could only ever offer the name that is already set.
@@ -118,7 +438,8 @@ export function MeshSection() {
           bridge is a feed field, not an inspector change. */}
       <InspectorRow label="Clip">
         <TextField
-          value={m.clip ?? ""}
+          value={mixedOn((block) => block.clip ?? "") ? "" : (m.clip ?? "")}
+          {...(mixedOn((block) => block.clip ?? "") ? { placeholder: MIXED } : {})}
           ariaLabel="Animation clip"
           onCommit={(next) =>
             patch((block) => {
@@ -134,39 +455,546 @@ export function MeshSection() {
         />
       </InspectorRow>
 
-      <InspectorRow label="Start">
-        <NumberField
-          value={m.clipStartFrame ?? 0}
-          mixed={mesh.mixed}
-          ariaLabel="Clip start frame"
-          unit="f"
-          step={1}
-          onCommit={(next) => set("clipStartFrame", Math.round(next))}
-        />
-      </InspectorRow>
+      <MeshNumber
+        label="Start"
+        ariaLabel="Clip start frame"
+        value={m.clipStartFrame ?? 0}
+        mixed={mixedOn((block) => block.clipStartFrame ?? 0)}
+        unit="f"
+        step={1}
+        edit={(block, next) => ({ ...block, clipStartFrame: Math.round(next) })}
+      />
 
       <InspectorRow label="Loop">
         <SegmentedControl
           ariaLabel="Clip loop"
-          value={m.loop ?? "hold"}
-          options={MESH_LOOPS.map((loop) => ({ value: loop, label: loop }))}
-          onChange={(next) => set("loop", next as MeshLoop)}
+          value={mixedOn((block) => block.loop ?? "hold") ? NO_VALUE : (m.loop ?? "hold")}
+          options={wordOptions(MEDIA_LOOPS)}
+          onChange={(next) => set("loop", next as MediaLoop)}
         />
       </InspectorRow>
 
-      <InspectorRow label="Rate">
-        <NumberField
-          value={m.timeScale ?? 1}
-          mixed={mesh.mixed}
-          ariaLabel="Clip rate"
+      <MeshNumber
+        label="Rate"
+        ariaLabel="Clip rate"
+        value={m.timeScale ?? 1}
+        mixed={mixedOn((block) => block.timeScale ?? 1)}
+        // "Times as fast": the unit says multiplier, and the whole box scrubs.
+        unit="×"
+        step={0.1}
+        // Zero is REFUSED by validation: it freezes the clip forever, which
+        // is a pose you can already spell by clearing the clip, and it is
+        // indistinguishable from a slider that failed to write. Negative
+        // plays the clip backwards and is allowed.
+        edit={(block, next) => ({ ...block, timeScale: next === 0 ? 1 : next })}
+      />
+        </>
+      )}
+    </InspectorSection>
+  );
+}
+
+/** ONE primitive field's edit, on a block's OWN base primitive and only when it
+ *  is that kind. Spreading the lead's painted primitive instead turned a
+ *  sphere into a box, copied one spline's points onto another, and baked the
+ *  lead's sampled animated fields into every base. */
+function withPrim<K extends MeshPrimitive["kind"]>(
+  block: MeshBlock,
+  kind: K,
+  edit: (p: Extract<MeshPrimitive, { kind: K }>) => MeshPrimitive,
+): MeshBlock {
+  const p = meshPrimitiveOf(block);
+  return p?.kind === kind ? { ...block, primitive: edit(p as Extract<MeshPrimitive, { kind: K }>) } : block;
+}
+
+/**
+ * One number of the mesh block, as one box: its HARD limits default to the path
+ * table's own `numberRange`, so the field and the keyframe gate cannot answer
+ * "what is a legal number here" two ways, and an explicit `min`/`max` still
+ * wins for a row whose chrome limit is deliberately tighter than the schema's
+ * (a path declaring `exclusiveMin` has to be one of those: a bound of 0 the
+ * gate refuses is not a bound a field may offer). `step` stays the caller's,
+ * because it is a feel and not a limit.
+ *
+ * `edit` is the ONE builder for the typed value and the drag, applied to each
+ * mesh layer's own block: a capture is handed a layer out of the gesture's
+ * BASE document, so a drag never compounds its own moves, and its release
+ * lands exactly the document its last move drew.
+ */
+function MeshNumber({
+  label,
+  ariaLabel,
+  value,
+  mixed,
+  unit,
+  min,
+  max,
+  step,
+  path,
+  parts,
+  pin = true,
+  edit,
+}: {
+  label: string;
+  ariaLabel?: string;
+  value: number;
+  mixed: boolean;
+  unit?: string;
+  min?: number;
+  max?: number;
+  step: number;
+  /** The track the value belongs to, which puts its diamond in the box. */
+  path?: string;
+  /** A vector's parts, keyed together by that diamond. */
+  parts?: readonly string[];
+  /** False for a vector's later boxes: its first box carries the one pin. */
+  pin?: boolean;
+  edit: (block: MeshBlock, value: number) => MeshBlock;
+}) {
+  const write = useSelectionWrite();
+  const build = (layer: Layer3D, next: number): Layer3D =>
+    layer.kind === "mesh" ? ({ ...layer, mesh: edit(layer.mesh, next) } as Layer3D) : layer;
+  const scrub = useSelectionScrub((layer, raw) => build(layer, Number(raw)));
+  const tabled = path === undefined ? undefined : trackablePath(path)?.numberRange;
+  const lo = min ?? tabled?.min;
+  const hi = max ?? tabled?.max;
+  const trailing: ReactNode =
+    path === undefined ? undefined : (
+      <KeyframeDot path={path} label={label} pin={pin} {...(parts === undefined ? {} : { parts })} />
+    );
+  return (
+    <InspectorRow>
+      <NumberField
+        label={label}
+        value={value}
+        mixed={mixed}
+        ariaLabel={ariaLabel ?? label}
+        {...(unit === undefined ? {} : { unit })}
+        {...(lo === undefined ? {} : { min: lo })}
+        {...(hi === undefined ? {} : { max: hi })}
+        step={step}
+        trailing={trailing}
+        onCommit={(next) => write((layer) => build(layer, next))}
+        onScrubStart={scrub.start}
+        onScrub={scrub.move}
+        onScrubEnd={scrub.end}
+      />
+    </InspectorRow>
+  );
+}
+
+function SplineRows({
+  primitive,
+  hasTaperTracks,
+  hasTwistTrack,
+  editing,
+  locked,
+  onEdit,
+  onChange,
+  mixed,
+  onRefusal,
+}: {
+  /** The LEAD spline, for display only. */
+  primitive: SplinePrimitive;
+  hasTaperTracks: boolean;
+  hasTwistTrack: boolean;
+  editing: boolean;
+  /** A viewer's panel: point editing writes the spline, so it does not open
+   *  (the stage takes no spline edit from a viewer either). */
+  locked: boolean;
+  onEdit(): void;
+  /** Every row hands an UPDATER, applied to each layer's own spline, so one
+   *  field edit never carries the lead's points or other fields across. */
+  onChange(edit: (p: SplinePrimitive) => SplinePrimitive): void;
+  mixed(read: (p: SplinePrimitive) => unknown): boolean;
+  onRefusal(message: string): void;
+}) {
+  const frame = primitive.frameSize;
+  const up = primitive.up ?? DEFAULT_SPLINE_UP;
+  const profile = profileOf(primitive);
+  const setProfile = (edit: (prof: SplineProfile) => SplineProfile): void =>
+    onChange((p) => withProfile(p, edit));
+  const offset = profile.offset ?? [0, 0];
+  const nonTubeClosed = primitive.closed === true && profile.kind !== "tube";
+  const forbiddenCloseTracks = hasTaperTracks || (profile.kind !== "tube" && hasTwistTrack);
+  return (
+    <>
+      <InspectorRow label="Points">
+        <button type="button" className="btn" aria-pressed={editing} disabled={locked} onClick={onEdit}>
+          {editing ? "Finish editing" : `Edit ${primitive.points.length} points`}
+        </button>
+      </InspectorRow>
+      <InspectorRow label="Basis">
+        <SegmentedControl
+          ariaLabel="Spline basis"
+          value={mixed((p) => p.basis ?? "bezier") ? NO_VALUE : (primitive.basis ?? "bezier")}
+          options={[{ value: "bezier", label: "Bezier" }, { value: "catmull-rom", label: "Catmull" }]}
+          onChange={(basis) =>
+            onChange((p) =>
+              basis === "catmull-rom"
+                ? { ...p, basis, points: p.points.map(({ in: _dropIn, out: _dropOut, ...point }) => point) }
+                : { ...p, basis: "bezier" },
+            )
+          }
+        />
+      </InspectorRow>
+      <InspectorRow
+        label="Closed"
+        {...(primitive.points.length < 3
+          ? { labelTitle: "A closed spline needs at least three points" }
+          : forbiddenCloseTracks && primitive.closed !== true
+            ? {
+                labelTitle:
+                  profile.kind !== "tube" && hasTwistTrack
+                    ? "Remove taper and twist tracks before closing this ribbon or rail"
+                    : "Remove separate taper tracks before closing the spline",
+              }
+            : {})}
+      >
+        <Toggle
+          checked={primitive.closed === true}
+          mixed={mixed((p) => p.closed === true)}
+          ariaLabel="Closed spline"
+          disabled={primitive.closed !== true && (primitive.points.length < 3 || forbiddenCloseTracks)}
+          onChange={(closed) =>
+            onChange((p) => {
+              if (!closed) return { ...p, closed: false };
+              if (p.points.length < 3) return p;
+              const loopScale = Math.max(0, Math.min(MAX_SPLINE_SCALE, p.startScale ?? 1));
+              const twistDeg =
+                profileOf(p).kind === "tube"
+                  ? p.twistDeg
+                  : Math.round((p.twistDeg ?? 0) / 360) * 360;
+              return {
+                ...p,
+                closed: true,
+                startScale: loopScale,
+                endScale: loopScale,
+                ...(twistDeg === undefined ? {} : { twistDeg }),
+              };
+            })
+          }
+        />
+      </InspectorRow>
+      <SplineNumber label="Frame W" value={frame[0]} mixed={mixed((p) => p.frameSize[0])} min={1} max={MAX_SPLINE_COORDINATE} step={1} unit="px" edit={(p, value) => ({ ...p, frameSize: [value, p.frameSize[1]] })} />
+      <SplineNumber label="Frame H" value={frame[1]} mixed={mixed((p) => p.frameSize[1])} min={1} max={MAX_SPLINE_COORDINATE} step={1} unit="px" edit={(p, value) => ({ ...p, frameSize: [p.frameSize[0], value] })} />
+      {(["X", "Y", "Z"] as const).map((axis, index) => (
+        <SplineNumber
+          key={axis}
+          label={`Up ${axis}`}
+          value={up[index] ?? 0}
+          mixed={mixed((p) => (p.up ?? DEFAULT_SPLINE_UP)[index])}
+          min={-MAX_SPLINE_COORDINATE}
+          max={MAX_SPLINE_COORDINATE}
           step={0.1}
-          // Zero is REFUSED by validation — it freezes the clip forever, which
-          // is a pose you can already spell by clearing the clip, and it is
-          // indistinguishable from a slider that failed to write. Negative
-          // plays the clip backwards and is allowed.
-          onCommit={(next) => set("timeScale", next === 0 ? 1 : next)}
+          edit={(p, value) => {
+            const own = p.up ?? DEFAULT_SPLINE_UP;
+            const next: [number, number, number] = [own[0] ?? 0, own[1] ?? 1, own[2] ?? 0];
+            next[index] = value;
+            return {
+              ...p,
+              up: next.every((component) => Math.abs(component) < 1e-4)
+                ? [...DEFAULT_SPLINE_UP]
+                : next,
+            };
+          }}
+        />
+      ))}
+      <InspectorRow label="Profile">
+        <SegmentedControl
+          ariaLabel="Spline profile"
+          value={mixed((p) => profileOf(p).kind) ? NO_VALUE : profile.kind}
+          options={[
+            { value: "tube", label: "Tube" },
+            {
+              value: "ribbon",
+              label: "Ribbon",
+              ...(primitive.closed === true && profile.kind === "tube" && hasTwistTrack
+                ? { title: "Remove the closed tube's twist track first" }
+                : {}),
+            },
+            {
+              value: "rail",
+              label: "Rail",
+              ...(primitive.closed === true && profile.kind === "tube" && hasTwistTrack
+                ? { title: "Remove the closed tube's twist track first" }
+                : {}),
+            },
+          ]}
+          onChange={(kind) => {
+            if (
+              primitive.closed === true &&
+              profile.kind === "tube" &&
+              kind !== "tube" &&
+              hasTwistTrack
+            ) {
+              onRefusal("Remove the closed tube's twist track before switching to ribbon or rail.");
+              return;
+            }
+            setProfile((prof) => {
+              if (prof.kind === kind) return prof;
+              const common = {
+                ...(prof.offset === undefined ? {} : { offset: [...prof.offset] as [number, number] }),
+                ...(prof.angleDeg === undefined ? {} : { angleDeg: prof.angleDeg }),
+              };
+              return kind === "ribbon"
+                ? { kind, widthPx: 16, ...common }
+                : kind === "rail"
+                  ? { kind, widthPx: 16, heightPx: 8, ...common }
+                  : { kind: "tube", radiusPx: 8, ...common };
+            });
+          }}
         />
       </InspectorRow>
-    </InspectorSection>
+      {/* The three profile sizes state their own `min` and take their `max` from
+          the table: the table's bound is `exclusiveMin: 0`, which a field cannot
+          spell (0 would commit and the keyframe gate would then refuse it), so
+          0.01 is deliberately TIGHTER than the schema by one quantum. */}
+      {profile.kind === "tube" ? (
+        <SplineNumber path="mesh.primitive.profile.radiusPx" label="Radius" value={profile.radiusPx ?? 8} mixed={mixed((p) => { const prof = profileOf(p); return prof.kind === "tube" ? (prof.radiusPx ?? 8) : undefined; })} min={0.01} step={1} unit="px" edit={(p, radiusPx) => withProfile(p, (prof) => (prof.kind === "tube" ? { ...prof, radiusPx } : prof))} />
+      ) : (
+        <SplineNumber path="mesh.primitive.profile.widthPx" label="Width" value={profile.widthPx ?? 16} mixed={mixed((p) => { const prof = profileOf(p); return prof.kind === "tube" ? undefined : (prof.widthPx ?? 16); })} min={0.01} step={1} unit="px" edit={(p, widthPx) => withProfile(p, (prof) => (prof.kind === "tube" ? prof : { ...prof, widthPx }))} />
+      )}
+      {profile.kind === "rail" ? (
+        <SplineNumber path="mesh.primitive.profile.heightPx" label="Height" value={profile.heightPx ?? 8} mixed={mixed((p) => { const prof = profileOf(p); return prof.kind === "rail" ? (prof.heightPx ?? 8) : undefined; })} min={0.01} step={1} unit="px" edit={(p, heightPx) => withProfile(p, (prof) => (prof.kind === "rail" ? { ...prof, heightPx } : prof))} />
+      ) : null}
+      {/* ONE TRACK FOR BOTH OFFSETS: the profile offset is a vec2, so each of
+          its two boxes carries the vector's diamond and they light together,
+          and Offset X's box holds the track's one expose pin. */}
+      <SplineNumber path="mesh.primitive.profile.offset" parts={OFFSET_PARTS} label="Offset X" value={offset[0]} mixed={mixed((p) => (profileOf(p).offset ?? [0, 0])[0])} min={-MAX_SPLINE_COORDINATE} max={MAX_SPLINE_COORDINATE} step={1} unit="px" edit={(p, value) => withProfile(p, (prof) => ({ ...prof, offset: [value, (prof.offset ?? [0, 0])[1]] }))} />
+      <SplineNumber path="mesh.primitive.profile.offset" parts={OFFSET_PARTS} pin={false} label="Offset Y" value={offset[1]} mixed={mixed((p) => (profileOf(p).offset ?? [0, 0])[1])} min={-MAX_SPLINE_COORDINATE} max={MAX_SPLINE_COORDINATE} step={1} unit="px" edit={(p, value) => withProfile(p, (prof) => ({ ...prof, offset: [(prof.offset ?? [0, 0])[0], value] }))} />
+      <SplineNumber path="mesh.primitive.profile.angleDeg" label="Profile angle" value={profile.angleDeg ?? 0} mixed={mixed((p) => profileOf(p).angleDeg ?? 0)} min={-MAX_SPLINE_ANGLE_DEG} max={MAX_SPLINE_ANGLE_DEG} step={1} unit="°" edit={(p, angleDeg) => withProfile(p, (prof) => ({ ...prof, angleDeg }))} />
+      {profile.kind === "ribbon" ? (
+        <p className="insp-note">Ribbon is double-sided and uncapped.</p>
+      ) : splineVisibleRange(primitive).fullLoop ? (
+        <p className="insp-note">A full closed loop has no ends. Caps apply after opening or trimming it.</p>
+      ) : (
+        <InspectorRow label="Caps">
+          <SegmentedControl
+            ariaLabel="Spline caps"
+            value={mixed((p) => p.caps ?? DEFAULT_SPLINE_CAPS) ? NO_VALUE : (primitive.caps ?? DEFAULT_SPLINE_CAPS)}
+            options={[{ value: "none", label: "None" }, { value: "flat", label: "Flat" }, { value: "round", label: "Round" }]}
+            onChange={(caps) => onChange((p) => ({ ...p, caps: caps as NonNullable<SplinePrimitive["caps"]> }))}
+          />
+        </InspectorRow>
+      )}
+      <SplineNumber path="mesh.primitive.trimStart" label="Trim start" value={primitive.trimStart ?? 0} mixed={mixed((p) => p.trimStart ?? 0)} step={0.01} edit={(p, trimStart) => ({ ...p, trimStart })} />
+      <SplineNumber path="mesh.primitive.trimEnd" label="Trim end" value={primitive.trimEnd ?? 1} mixed={mixed((p) => p.trimEnd ?? 1)} step={0.01} edit={(p, trimEnd) => ({ ...p, trimEnd })} />
+      <SplineNumber path="mesh.primitive.trimOffset" label="Trim offset" value={primitive.trimOffset ?? 0} mixed={mixed((p) => p.trimOffset ?? 0)} step={0.01} edit={(p, trimOffset) => ({ ...p, trimOffset })} />
+      <SplineNumber
+        {...(nonTubeClosed ? {} : { path: "mesh.primitive.twistDeg" as const })}
+        label="Twist"
+        value={primitive.twistDeg ?? 0}
+        mixed={mixed((p) => p.twistDeg ?? 0)}
+        min={-MAX_SPLINE_ANGLE_DEG}
+        max={MAX_SPLINE_ANGLE_DEG}
+        step={nonTubeClosed ? 360 : 1}
+        unit="°"
+        edit={(p, value) => {
+          // A closed ribbon or rail must twist in whole turns, per layer.
+          const whole = p.closed === true && profileOf(p).kind !== "tube";
+          return { ...p, twistDeg: whole ? Math.round(value / 360) * 360 : value };
+        }}
+      />
+      {primitive.closed === true ? (
+        <SplineNumber
+          label="Loop scale"
+          value={primitive.startScale ?? 1}
+          mixed={mixed((p) => p.startScale ?? 1)}
+          min={0}
+          max={MAX_SPLINE_SCALE}
+          step={0.05}
+          edit={(p, value) => ({ ...p, startScale: value, endScale: value })}
+        />
+      ) : (
+        <>
+          <SplineNumber path="mesh.primitive.startScale" label="Start scale" value={primitive.startScale ?? 1} mixed={mixed((p) => p.startScale ?? 1)} min={0} max={MAX_SPLINE_SCALE} step={0.05} edit={(p, startScale) => ({ ...p, startScale })} />
+          <SplineNumber path="mesh.primitive.endScale" label="End scale" value={primitive.endScale ?? 1} mixed={mixed((p) => p.endScale ?? 1)} min={0} max={MAX_SPLINE_SCALE} step={0.05} edit={(p, endScale) => ({ ...p, endScale })} />
+        </>
+      )}
+      <InspectorRow label="Geometry">
+        <Toggle
+          checked={primitive.renderGeometry !== false}
+          mixed={mixed((p) => p.renderGeometry !== false)}
+          ariaLabel="Render spline geometry"
+          onChange={(renderGeometry) => onChange((p) => ({ ...p, renderGeometry }))}
+        />
+      </InspectorRow>
+    </>
   );
 }
+
+function profileOf(p: SplinePrimitive): SplineProfile {
+  return p.profile ?? { kind: "tube", radiusPx: 8 };
+}
+
+/** A profile edit on ONE spline: a closed ribbon or rail twists in whole
+ *  turns, so leaving the tube rounds that spline's own twist to one. */
+function withProfile(p: SplinePrimitive, edit: (prof: SplineProfile) => SplineProfile): SplinePrimitive {
+  const next = edit(profileOf(p));
+  const twistDeg =
+    p.closed === true && next.kind !== "tube"
+      ? Math.round((p.twistDeg ?? 0) / 360) * 360
+      : p.twistDeg;
+  return { ...p, profile: next, ...(twistDeg === undefined ? {} : { twistDeg }) };
+}
+
+/** One spline number: a `MeshNumber` whose edit is over each layer's own
+ *  spline (`withPrim`), never the lead's. */
+function SplineNumber({
+  edit,
+  ...row
+}: {
+  label: string;
+  value: number;
+  mixed: boolean;
+  path?: string;
+  parts?: readonly string[];
+  pin?: boolean;
+  unit?: string;
+  min?: number;
+  max?: number;
+  step: number;
+  edit: (p: SplinePrimitive, value: number) => SplinePrimitive;
+}) {
+  return <MeshNumber {...row} edit={(block, value) => withPrim(block, "spline", (p) => edit(p, value))} />;
+}
+
+/**
+ * The shape's base albedo. Its own component for the same reason
+ * `MaterialParamRow` is one: `ColorPicker` routes its whole drag through
+ * `scrub.move`, so a row without the document bracket is a thumb that moves
+ * over a document that never changes.
+ */
+function ShapeColorRow({ value, mixed }: { value: string; mixed: boolean }) {
+  const write = useSelectionWrite();
+  const scrub = useSelectionScrub((layer, raw) => writeShapeColor(layer, raw));
+  return (
+    <InspectorRow>
+      {/* The hex row Fill and Stroke draw, so the inspector has ONE colour
+          grammar, its diamond inside the field. Unlabelled like theirs: the
+          swatch is the colour, and the accessible name ("Shape colour") says
+          what it colours. OPAQUE, because `mesh.color` is `#rrggbb` only (the
+          path's `opaqueHex`): an alpha the picker offered would be a value the
+          write below refuses. */}
+      <ColorField
+        value={value}
+        mixed={mixed}
+        opaque
+        ariaLabel="Shape colour"
+        commit={(hex) => write((layer) => writeShapeColor(layer, hex))}
+        scrub={scrub}
+        trailing={<KeyframeDot path="mesh.color" />}
+      />
+    </InspectorRow>
+  );
+}
+
+/** PURE, over the layer it is handed — `writeParam`'s rule: a value the
+ *  document cannot hold leaves the layer untouched by reference. */
+function writeShapeColor(layer: Layer3D, raw: unknown): Layer3D {
+  if (layer.kind !== "mesh") return layer;
+  if (typeof raw !== "string" || !OPAQUE_HEX.test(raw)) return layer;
+  return { ...layer, mesh: { ...layer.mesh, color: raw.toLowerCase() } };
+}
+
+/** `#rrggbb`: a mesh colour's and a legacy material colour param's one
+ *  spelling (validate refuses every other). */
+const OPAQUE_HEX = /^#[0-9a-fA-F]{6}$/;
+
+/**
+ * One generator param, as the one contract row.
+ *
+ * BOTH HALVES ARE WIRED, and the drag half is the one that was missing
+ * everywhere: `ColorPicker` routes its SV square, its hue bar and its alpha bar
+ * entirely through `scrub.move` and never calls `commit` while the pointer is
+ * down, so a row holding the commit half alone has a control whose thumb moves
+ * and whose document never changes.
+ *
+ * A stored param carries the row's RESET, which deletes it: an absent key is
+ * "the contract's own default", and with no reset a param once touched could
+ * never follow a later manifest edit again. A colour is OPAQUE: a legacy param
+ * holds `#rrggbb` only (validate), so the picker offers no alpha it would
+ * refuse.
+ */
+function MaterialParamRow(props: { spec: ControlSpec; value: MeshMaterialParam | undefined }) {
+  const { spec } = props;
+  const write = useSelectionWrite();
+  // The builder re-reads its subject from the layer it is HANDED, which every
+  // capture re-derives from the gesture's base — closing over a value read at
+  // render is what makes a control run away from the cursor.
+  const scrub = useSelectionScrub((layer, raw) => writeParam(layer, spec.key, raw));
+  // An unset param shows (and edits from) the spec's default, and stores
+  // nothing until it is touched: an absent key means "the contract's own
+  // default", so baking one in would freeze it against a later manifest edit.
+  const value = props.value ?? ("default" in spec ? spec.default : undefined);
+  return (
+    <PropRow
+      spec={spec}
+      value={value}
+      commit={(raw) => write((layer) => writeParam(layer, spec.key, raw))}
+      scrub={scrub}
+      {...(spec.kind === "color" ? { opaqueColor: true } : {})}
+      {...(props.value === undefined
+        ? {}
+        : {
+            reset: {
+              onReset: () => write((layer) => withoutParam(layer, spec.key)),
+              title: "Back to the material's own default",
+            },
+          })}
+    />
+  );
+}
+
+/** PURE, and over the layer it is handed — the shape both write paths need. A
+ *  value the document's own vocabulary cannot hold leaves the layer untouched
+ *  (by reference, so no history entry and no save), because the alternative is
+ *  a document the next save refuses. */
+function writeParam(layer: Layer3D, key: string, raw: unknown): Layer3D {
+  const value = asParam(raw);
+  if (value === null || layer.kind !== "mesh") return layer;
+  const material = layer.mesh.material;
+  if (material === undefined || isGraphMaterial(material)) return layer;
+  return {
+    ...layer,
+    mesh: {
+      ...layer.mesh,
+      material: { ...material, params: { ...material.params, [key]: value } },
+    },
+  };
+}
+
+/** The param DELETED, so it follows the contract's default again. Its `params`
+ *  go too once empty: a material with no changed params is `{ generator }`. */
+function withoutParam(layer: Layer3D, key: string): Layer3D {
+  if (layer.kind !== "mesh") return layer;
+  const material = layer.mesh.material;
+  if (material === undefined || isGraphMaterial(material)) return layer;
+  const stored = material.params;
+  if (stored === undefined || stored[key] === undefined) return layer;
+  const { [key]: _drop, ...params } = stored;
+  const { params: _all, ...bare } = material;
+  return {
+    ...layer,
+    mesh: { ...layer.mesh, material: Object.keys(params).length === 0 ? bare : { ...bare, params } },
+  };
+}
+
+/** `MeshMaterialParam`, which is exactly the widget vocabulary `effectContract`
+ *  can produce (number / boolean / colour / vec2 / vec3), and exactly what
+ *  validate accepts: a colour is `#rrggbb`, and any other string is refused. */
+function asParam(raw: unknown): MeshMaterialParam | null {
+  if (typeof raw === "number") return Number.isFinite(raw) ? raw : null;
+  if (typeof raw === "boolean") return raw;
+  if (typeof raw === "string") return OPAQUE_HEX.test(raw) ? raw : null;
+  if (
+    Array.isArray(raw) &&
+    (raw.length === 2 || raw.length === 3) &&
+    raw.every((n) => typeof n === "number" && Number.isFinite(n))
+  ) {
+    const v = raw as number[];
+    return v.length === 2 ? [v[0]!, v[1]!] : [v[0]!, v[1]!, v[2]!];
+  }
+  return null;
+}