castle-web-cli 0.4.129 → 0.4.131

package/kits/physics-2d/editors/pixelInspector.jsx

@@ -132,14 +132,14 @@ export function PixelToolStrip({ tools, tool, onSelectTool, ariaLabel, disabled
 }
 
 // Compact W × H selects above the artboard (not a sidebar panel).
-export function CanvasSizeBar({ width, height, onResize }) {
+export function CanvasSizeBar({ width, height, onResize, disabled = false }) {
   return (
     <div className={styles.canvasSizeBar} aria-label="Canvas size">
-      <ResolutionSelect label="Width" value={width} onChange={(w) => onResize(w, height)} />
+      <ResolutionSelect label="Width" value={width} onChange={(w) => onResize(w, height)} disabled={disabled} />
       <span className={styles.canvasSizeSep} aria-hidden="true">
         ×
       </span>
-      <ResolutionSelect label="Height" value={height} onChange={(h) => onResize(width, h)} />
+      <ResolutionSelect label="Height" value={height} onChange={(h) => onResize(width, h)} disabled={disabled} />
     </div>
   );
 }
@@ -175,13 +175,13 @@ const FINISH_STEPS = [
 // (properties of the .pxart asset — see docs/pxart-format.md — not per-actor
 // Sprite props). Highlights whichever preset the pair exactly matches, or none
 // when it matches no preset.
-export function FinishBar({ renderer, cornerRadius, onChange }) {
+export function FinishBar({ renderer, cornerRadius, onChange, disabled = false }) {
   const isOn = (step) =>
     step.renderer === (renderer ?? GRID_RENDERER) && step.cornerRadius === (cornerRadius ?? 0);
   return (
     <div className={styles.finishBar} aria-label="Finish">
       <span>Finish</span>
-      <div className={styles.finishSegments} role="radiogroup" aria-label="Finish">
+      <div className={styles.finishSegments} role="radiogroup" aria-label="Finish" aria-disabled={disabled || undefined}>
         {FINISH_STEPS.map((step) => (
           <button
             key={step.id}
@@ -189,6 +189,7 @@ export function FinishBar({ renderer, cornerRadius, onChange }) {
             role="radio"
             aria-label={step.label}
             aria-checked={isOn(step) ? 'true' : 'false'}
+            disabled={disabled}
             className={cx(styles.finishSegment, isOn(step) && styles.finishSegmentOn)}
             title={step.title}
             onClick={() =>
@@ -202,7 +203,7 @@ export function FinishBar({ renderer, cornerRadius, onChange }) {
   );
 }
 
-function ResolutionSelect({ label, value, onChange }) {
+function ResolutionSelect({ label, value, onChange, disabled = false }) {
   const options = RESOLUTION_STEPS.includes(value)
     ? RESOLUTION_STEPS
     : [...RESOLUTION_STEPS, value].sort((a, b) => a - b);
@@ -211,6 +212,7 @@ function ResolutionSelect({ label, value, onChange }) {
       className={styles.canvasSizeSelect}
       aria-label={label}
       value={value}
+      disabled={disabled}
       onChange={(event) => onChange(Number(event.target.value))}>
       {options.map((step) => (
         <option key={step} value={step}>
@@ -940,10 +942,14 @@ export function PxArtInspectorDock({
   moveActions,
   selectActions,
   pathActions,
+  readOnly = false,
 }) {
   const { tool, picking, setPicking } = toolState;
   return (
-    <aside className={cx(styles.pxArtInspector, styles.drawingToolsPanel)}>
+    <aside
+      className={cx(styles.pxArtInspector, styles.drawingToolsPanel, readOnly && styles.drawingReadOnly)}
+      aria-disabled={readOnly || undefined}
+      inert={readOnly || undefined}>
       <div className={cx(styles.sheetBody, styles.inspectorBody, styles.drawingSettingsColumn)}>
         {PALETTE_TOOLS.has(tool) || picking ? (
           <Panel

package/kits/physics-2d/editors/pxArtTimeline.jsx

@@ -146,7 +146,7 @@ function useResizableTimelineHeight() {
 // the top, Aseprite-style) by frame COLUMNS, with thumbnails per cell, layer +
 // frame controls, linked-cell affordances, onion-skin toggles, playback, and a
 // tags editor. All mutation flows through `actions` (wired in PxArtEditor).
-export function PxArtTimeline({ sprite, text, selection, playing, onion, actions }) {
+export function PxArtTimeline({ sprite, text, selection, playing, onion, actions, readOnly = false }) {
   // Hooks run unconditionally (order-stable); only the render branches on viewport.
   const compact = useCompactViewport();
   const resizable = useResizableTimelineHeight();
@@ -159,7 +159,13 @@ export function PxArtTimeline({ sprite, text, selection, playing, onion, actions
   });
   const grid = (
     <div className={tl.scroll}>
-      <TimelineGrid sprite={sprite} text={text} selection={selection} actions={actions} />
+      <TimelineGrid
+        sprite={sprite}
+        text={text}
+        selection={selection}
+        actions={actions}
+        readOnly={readOnly}
+      />
     </div>
   );
   if (compact) {
@@ -178,6 +184,7 @@ export function PxArtTimeline({ sprite, text, selection, playing, onion, actions
           playing={playing}
           onion={onion}
           actions={actions}
+          readOnly={readOnly}
         />
         {grid}
       </section>
@@ -198,6 +205,7 @@ export function PxArtTimeline({ sprite, text, selection, playing, onion, actions
         playing={playing}
         onion={onion}
         actions={actions}
+        readOnly={readOnly}
       />
       {grid}
       {SHOW_TAGS ? <TagsPanel sprite={sprite} actions={actions} /> : null}
@@ -211,7 +219,7 @@ export function PxArtTimeline({ sprite, text, selection, playing, onion, actions
 // (duplicate/move/delete/rename/link/unlink/visibility) lives in the right-click
 // context menus on the grid's layer rows, frame headers, and cells (see
 // TimelineGrid + ContextMenu).
-function TimelineBar({ sprite, selection, playing, onion, actions }) {
+function TimelineBar({ sprite, selection, playing, onion, actions, readOnly = false }) {
   const { layerIndex, frameIndex } = selection;
   // A single-frame sprite has no animation, so the three animation controls
   // (global duration, onion skin, play/pause) are meaningless — gate them on
@@ -227,19 +235,20 @@ function TimelineBar({ sprite, selection, playing, onion, actions }) {
   return (
     <div className={tl.bar}>
       <div className={tl.barGroup}>
-        <IconButton icon="grid" label="Pixel" onClick={() => actions.addLayer(layerIndex)} />
+        <IconButton icon="grid" label="Pixel" disabled={readOnly} onClick={() => actions.addLayer(layerIndex)} />
         <span className={tl.barLabel}>Pixel</span>
       </div>
       <div className={tl.barGroup}>
         <IconButton
           icon="draw-polygon"
           label="Path"
+          disabled={readOnly}
           onClick={() => actions.addLayer(layerIndex, 'path')}
         />
         <span className={tl.barLabel}>Path</span>
       </div>
       <div className={tl.barGroup}>
-        <IconButton icon="film" label="Frame" onClick={() => actions.addFrame(frameIndex)} />
+        <IconButton icon="film" label="Frame" disabled={readOnly} onClick={() => actions.addFrame(frameIndex)} />
         <span className={tl.barLabel}>Frame</span>
       </div>
       <div className={tl.barSpacer} />
@@ -249,7 +258,11 @@ function TimelineBar({ sprite, selection, playing, onion, actions }) {
             <span className={tl.durationIcon} title="Default frame duration (ms) — applies to all frames">
               <FaGlyph icon={faStopwatch} className={tl.durationGlyph} />
             </span>
-            <GlobalDurationInput value={sprite.defaultDurationMs} onCommit={actions.setDefaultDuration} />
+            <GlobalDurationInput
+              value={sprite.defaultDurationMs}
+              onCommit={actions.setDefaultDuration}
+              disabled={readOnly}
+            />
           </div>
           <OnionControls onion={onion} actions={actions} />
           <div className={tl.barGroup}>
@@ -268,12 +281,13 @@ function TimelineBar({ sprite, selection, playing, onion, actions }) {
 
 // The sprite's GLOBAL duration. Commits a finite, positive value on blur/Enter;
 // an empty/invalid entry snaps back to the current value (see CommitInput).
-function GlobalDurationInput({ value, onCommit }) {
+function GlobalDurationInput({ value, onCommit, disabled = false }) {
   return (
     <CommitInput
       text={String(value)}
       className={tl.globalDuration}
       title="Global frame duration (ms) — inherited by every frame without its own override"
+      disabled={disabled}
       onCommit={(draft) => {
         const ms = Number(draft);
         if (Number.isFinite(ms) && ms > 0) onCommit(ms);
@@ -322,7 +336,7 @@ function OnionControls({ onion, actions }) {
   );
 }
 
-function TimelineGrid({ sprite, text, selection, actions }) {
+function TimelineGrid({ sprite, text, selection, actions, readOnly = false }) {
   const frames = sprite.frames;
   // Render rows top-down: the last layer (top of the composite stack) first.
   const rows = sprite.layers.map((_, i) => i).reverse();
@@ -353,12 +367,13 @@ function TimelineGrid({ sprite, text, selection, actions }) {
   const openMenu = useCallback(
     (target, event) => {
       selectTarget(target);
+      if (readOnly) return;
       const rect = event.currentTarget?.getBoundingClientRect?.();
       const x = Number.isFinite(event.clientX) ? event.clientX : rect?.left + rect?.width / 2;
       const y = Number.isFinite(event.clientY) ? event.clientY : rect?.top + rect?.height / 2;
       setMenu({ ...target, x: x ?? 0, y: y ?? 0 });
     },
-    [selectTarget]
+    [selectTarget, readOnly]
   );
   const press = useTimelineItemPress(openMenu);
   const activateTarget = (target, event) => {
@@ -412,6 +427,7 @@ function TimelineGrid({ sprite, text, selection, actions }) {
             onPointerDown={(event) => press.onPointerDown(event, { kind: 'layer', layerIndex: li })}
             actions={actions}
             onContextMenu={openLayerMenu}
+            readOnly={readOnly}
           />
           {frames.map((_, f) => (
             <CellThumb
@@ -744,7 +760,7 @@ const kindBadgeStyle = {
 // on blur/Enter, re-syncing to `text` when idle. The caller's `onCommit(draft)`
 // interprets the raw string (set / clear / revert). Shared by the per-frame and
 // global duration fields so their edit/commit behavior stays identical.
-function CommitInput({ text, className, placeholder, title, onCommit }) {
+function CommitInput({ text, className, placeholder, title, onCommit, disabled = false }) {
   const [draft, setDraft] = useState(text);
   const editing = useRef(false);
   if (!editing.current && draft !== text) setDraft(text);
@@ -759,6 +775,7 @@ function CommitInput({ text, className, placeholder, title, onCommit }) {
       placeholder={placeholder}
       title={title}
       inputMode="numeric"
+      disabled={disabled}
       onFocus={() => (editing.current = true)}
       onChange={(event) => setDraft(event.target.value)}
       onBlur={commit}
@@ -807,7 +824,7 @@ function FaGlyph({ icon, className = tl.visGlyph }) {
   );
 }
 
-function LayerHeader({ layer, index, active, onActivate, onPointerDown, actions, onContextMenu }) {
+function LayerHeader({ layer, index, active, onActivate, onPointerDown, actions, onContextMenu, readOnly = false }) {
   return (
     <div
       className={active ? tl.layerHead + ' ' + tl.layerHeadActive : tl.layerHead}
@@ -832,6 +849,7 @@ function LayerHeader({ layer, index, active, onActivate, onPointerDown, actions,
           max="100"
           value={Math.round(layer.opacity * 100)}
           title={`Opacity ${Math.round(layer.opacity * 100)}%`}
+          disabled={readOnly}
           onClick={(event) => event.stopPropagation()}
           onChange={(event) => actions.patchLayer(index, { opacity: Number(event.target.value) / 100 })}
         />

package/kits/physics-2d/editors/pxArtTimeline.module.css

@@ -108,6 +108,12 @@
   text-align: center;
 }
 
+.globalDuration:disabled {
+  opacity: 0.55;
+  cursor: default;
+  color: var(--castle-inspector-muted);
+}
+
 /* Icon-only label (stopwatch) sitting next to the global duration input, in
    place of the old "Duration … ms · all frames" text. */
 .durationIcon {
@@ -333,6 +339,11 @@
   accent-color: var(--castle-selected);
 }
 
+.opacity:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
 .opacity::-webkit-slider-runnable-track {
   height: 3px;
   border-radius: 2px;

package/kits/physics-2d/engine/ScenePlayer.jsx

@@ -6,7 +6,7 @@ import { SceneUI } from './SceneUI';
 // behavior-driven UI overlay. No game logic lives here -- behaviors and
 // scenes are the place for that. The dev logs drawer is a builtin shell panel
 // now (cli/src/shell), not rendered here.
-export function ScenePlayer({ sceneData, sprites, files, behaviorClasses, onFirstFrame }) {
+export function ScenePlayer({ sceneData, sprites, files, behaviorClasses, scenePath, onFirstFrame }) {
   const canvasRef = useRef(null);
   const runtimeRef = useRef(null);
   // An error thrown from a behavior's update/draw kills the raf loop (it can't
@@ -22,7 +22,7 @@ export function ScenePlayer({ sceneData, sprites, files, behaviorClasses, onFirs
     const ctx = canvas.getContext('2d');
     if (!ctx) return undefined;
     configureSceneCanvas(canvas, ctx);
-    const runtime = makeScene(sceneData, behaviorClasses, sprites, files).clone();
+    const runtime = makeScene(sceneData, behaviorClasses, sprites, files, scenePath).clone();
     runtimeRef.current = runtime;
     // Store BOTH the physical code ('KeyX', 'ArrowLeft', 'Space') and the
     // logical key ('x', 'ArrowLeft', ' ') so behaviors can match either. Codes

package/kits/physics-2d/engine/blueprint.js

@@ -69,23 +69,41 @@ function parseBlueprintText(text) {
 function resolveTemplateRefs(template, files, fromPath) {
   if (!template) return template;
   for (const props of Object.values(template.components ?? {})) {
-    for (const [key, value] of Object.entries(props ?? {})) {
-      if (typeof value !== 'string' || !value) continue;
+    resolveRefsIn(props, files, fromPath);
+  }
+  return template;
+}
+
+// Nested because a ref is not always a bare prop: `Shape.art` can be one string
+// for the whole shape OR an object naming a file per face, and an unresolved
+// face ref means an untextured surface with no error anywhere. Rewriting only
+// when the resolved path is actually in the file map is what keeps this from
+// mangling strings that were never refs.
+function resolveRefsIn(props, files, fromPath) {
+  for (const [key, value] of Object.entries(props ?? {})) {
+    if (typeof value === 'string' && value) {
       const resolved = resolveDeckFile(value, fromPath);
       if (resolved !== value && files?.[resolved] !== undefined) props[key] = resolved;
+    } else if (value && typeof value === 'object' && !Array.isArray(value)) {
+      resolveRefsIn(value, files, fromPath);
     }
   }
-  return template;
 }
 
 // Resolve a blueprint's template from the LIVE files map -- the load-bearing
 // call for live propagation. Returns null when the file is missing, deleted,
 // or malformed (a dangling `blueprint` ref degrades to "no template" rather
 // than throwing).
-export function getBlueprintTemplate(files, blueprintPath) {
+export function getBlueprintTemplate(files, blueprintPath, fromPath) {
   // The ref may name this deck's blueprint or an import's; the template's own
   // refs then resolve against whichever deck the blueprint turned out to be in.
-  const key = resolveDeckFile(blueprintPath);
+  //
+  // `fromPath` is the file the ref was WRITTEN in, and it matters as soon as a
+  // kit is opened as an import: a scene at `imports/<alias>/scenes/main.scene`
+  // says `blueprints/wall.scene` meaning its own deck's, and resolving that
+  // against the deck root finds nothing -- every actor silently loses its
+  // template and renders as an untextured default.
+  const key = resolveDeckFile(blueprintPath, fromPath);
   const template = parseBlueprintText(files?.[key]);
   return resolveTemplateRefs(template, files, key);
 }

package/kits/physics-2d/engine/liveReload.js

@@ -1,13 +1,13 @@
-// Consumer side of the serve's `files_changed` broadcast. The engine decides
-// what a change means for this bundle:
-//   - data files (.scene / .pxart / .sprite / .style / .drawing) are re-read
-//     over the serve's files API and folded into React state — live re-render,
-//     no reload.
-//   - code the bundle imports (per the event's module-graph closure), html,
-//     or added/deleted code files (import.meta.glob may pick them up) mean
-//     this context is stale — requestReload() (save-state hooks run first).
+// Consumer side of the serve's `files_changed` broadcast. Data files are
+// re-read over the serve's files API and folded into React state, so an editor
+// shows a drawing someone else just changed without reloading anything.
+//
+// A CODE change does nothing here. Only a page reload picks up new code, and a
+// reload thrown at a panel someone is working in loses their place, so the
+// decision belongs to the person: every panel header carries a reload control,
+// and the shell offers the Play panel a restart when it has fallen behind.
 import { useEffect, useRef, useState } from 'react';
-import { onFilesChanged, requestReload } from 'castle-web-sdk';
+import { onFilesChanged } from 'castle-web-sdk';
 import { initialFiles } from './files';
 
 const DATA_EXTS = ['.scene', '.pxart', '.sprite', '.style', '.drawing'];
@@ -17,7 +17,20 @@ export function isDataFile(path) {
   return DATA_EXTS.some((ext) => path.endsWith(ext));
 }
 
-function needsContextReload(change) {
+// Which iframe is speaking -- every panel runs its own copy of this.
+function panelTag() {
+  try {
+    const q = new URLSearchParams(location.search);
+    return q.get('panel') || q.get('file') || 'deck';
+  } catch {
+    return 'deck';
+  }
+}
+
+// Whether a change means this bundle's code is stale. Only used for the log
+// line -- nothing acts on it -- but knowing a panel went stale and when is what
+// makes a vague "it looked wrong" report checkable against `.castle/serve.log`.
+function isCodeChange(change) {
   if (isDataFile(change.path)) return false;
   if (change.path.endsWith('.html')) return true;
   // In the module graph (directly or as someone's import) -> our code changed.
@@ -37,34 +50,34 @@ async function readDeckFile(path) {
 // Deck files as live state: starts from the build-time glob snapshot and stays
 // current as files change on disk from any source (editors, agents, terminal).
 // `shouldSkipPath` lets an editor keep its own in-flight edits from being
-// clobbered by the fs echo of a stale write. `dataVersion` bumps on every
-// applied data change — key a player on it to rebuild from fresh data.
+// clobbered by the fs echo of a stale write.
 export function useLiveDeckFiles({ shouldSkipPath } = {}) {
   const [files, setFiles] = useState(initialFiles);
-  const [dataVersion, setDataVersion] = useState(0);
   const skipRef = useRef(shouldSkipPath);
   skipRef.current = shouldSkipPath;
 
   useEffect(
     () =>
       onFilesChanged((event) => {
-        if (event.changes.some(needsContextReload)) {
-          requestReload();
-          return;
-        }
+        const stale = event.changes.find(isCodeChange);
+        if (stale) console.log(`[reload] ${panelTag()} code stale <- ${stale.path}`);
+        // Data still applies in the same event: a change that carries both is
+        // one edit, and holding the data back would leave the panel showing
+        // neither the old state nor the new one.
         const dataChanges = event.changes.filter(
           (change) => isDataFile(change.path) && !skipRef.current?.(change.path)
         );
         if (dataChanges.length === 0) return;
-        void applyDataChanges(dataChanges, setFiles, setDataVersion);
+        console.log(`[reload] ${panelTag()} data <- ${dataChanges.map((c) => c.path).join(', ')}`);
+        void applyDataChanges(dataChanges, setFiles);
       }),
     []
   );
 
-  return { files, setFiles, dataVersion };
+  return { files, setFiles };
 }
 
-async function applyDataChanges(changes, setFiles, setDataVersion) {
+async function applyDataChanges(changes, setFiles) {
   const updates = await Promise.all(
     changes.map(async (change) => {
       if (change.event === 'delete') return { path: change.path, text: null };
@@ -85,5 +98,4 @@ async function applyDataChanges(changes, setFiles, setDataVersion) {
     }
     return next;
   });
-  setDataVersion((version) => version + 1);
 }

package/kits/physics-2d/engine/scene.js

@@ -35,7 +35,12 @@ export class SceneRuntime {
   // actor's `blueprint` ref against the CURRENT blueprint file content -- not
   // a load-time snapshot -- so a blueprint edit propagates to every scene that
   // places it, in both the editor and play mode / `PlayOnly`.
-  constructor(sceneData, behaviors, sprites, files) {
+  constructor(sceneData, behaviors, sprites, files, scenePath) {
+    // The file this scene was read from, so blueprint refs in it resolve the
+    // way its own deck writes them. Undefined when a caller hands over scene
+    // data with no file behind it; refs then resolve against the deck root,
+    // which is what they meant before this existed.
+    this.scenePath = scenePath;
     this.behaviors = new Map(behaviors.map((Behavior) => [Behavior.behaviorName, Behavior]));
     this.sprites = sprites ?? {};
     this.files = files ?? {};
@@ -87,7 +92,7 @@ export class SceneRuntime {
     for (const actor of this.data.actors ?? []) {
       actor.runtime = {};
       if (actor.blueprint) {
-        const template = getBlueprintTemplate(this.files, actor.blueprint);
+        const template = getBlueprintTemplate(this.files, actor.blueprint, this.scenePath);
         actor.components = mergeComponents(template?.components, actor.components);
       }
       this.actors.set(actor.id, actor);
@@ -120,13 +125,20 @@ export class SceneRuntime {
   // Transition the running scene to the scene stored in the named file (read it
   // fresh, then load it). The building block for "go to scene" / restart.
   loadFromFile(name) {
+    this.scenePath = resolveSceneFileKey(name);
     this.load(this.readFromFile(name));
   }
 
   clone() {
     // Route through makeScene so the clone gets the same registered systems as a
     // freshly-made runtime.
-    return makeScene(this.serialize(), [...this.behaviors.values()], this.sprites, this.files);
+    return makeScene(
+      this.serialize(),
+      [...this.behaviors.values()],
+      this.sprites,
+      this.files,
+      this.scenePath
+    );
   }
 
   serialize() {
@@ -426,8 +438,8 @@ export class SceneRuntime {
   }
 }
 
-export function makeScene(sceneData, behaviors, sprites, files) {
-  const runtime = new SceneRuntime(sceneData, behaviors, sprites, files);
+export function makeScene(sceneData, behaviors, sprites, files, scenePath) {
+  const runtime = new SceneRuntime(sceneData, behaviors, sprites, files, scenePath);
   // Install any runtime systems the kit provides (systems/*.js) -- no-op in a kit
   // with none. A system's engine is created lazily on first use, so draw-only
   // editor previews (which never call update) stay free.

package/kits/physics-2d/engine/systemRegistry.js

@@ -3,7 +3,7 @@
 // SceneRuntime (see engine/scene.js `makeScene`) to register itself via
 // `runtime.registerSystem(...)`. A system is a plain object with an optional
 // `afterBehaviors(scene, dt)` hook, run once per frame after all behavior
-// updates. Empty in a kit with no `systems/` dir (e.g. basic-2d); a kit adds a
+// updates. Empty in a kit with no `systems/` dir; a kit adds a
 // system by dropping a file here -- no edits to the engine required. Symmetric
 // with editors/behaviorRegistry.js.
 // Root-anchored, deck + imports (see engine/files.js).

package/kits/physics-2d/engine/ui.jsx

@@ -740,8 +740,8 @@ function settleSheet(drag, setHeight, expandedRef) {
   const settled = setHeight(drag.startHeight - (drag.lastY - drag.startY));
   if (settled > peek + 2) expandedRef.current = settled;
 }
-// Persist a sheet's resting height across reloads (an agent's CODE edit
-// triggers requestReload, which would otherwise reset every sheet to the
+// Persist a sheet's resting height across reloads (picking up a code change
+// means reloading the panel, which would otherwise reset every sheet to the
 // default size). Keyed per sheet via `storageKey`; sessionStorage-scoped and
 // best-effort, the same degrade-to-memory-only contract as editorHistory.
 function sheetHeightStorageKey(key) {

package/kits/physics-2d/engine/ui.module.css

@@ -1550,6 +1550,11 @@
   cursor: default;
 }
 
+.button:disabled:hover,
+.iconButton:disabled:hover {
+  background: var(--castle-inspector-button-bg);
+}
+
 .actorList {
   display: grid;
   gap: 4px;
@@ -1608,6 +1613,13 @@
   display: none;
 }
 
+/* Read-only paint/inspector chrome: still there so the layout doesn't jump,
+   but clearly not interactive. */
+.drawingReadOnly {
+  opacity: 0.45;
+  pointer-events: none;
+}
+
 /* Stack the tool rail and the undo/redo rail vertically (the shared rule above is
    a flex row, which pushed the second rail out of the 50px column). */
 .artboardToolColumn {
@@ -1721,6 +1733,22 @@
   color: var(--castle-selected-ink);
 }
 
+.finishSegment:disabled {
+  cursor: default;
+  opacity: 0.4;
+}
+
+.finishSegment:disabled:hover {
+  background: var(--castle-inspector-button-bg);
+}
+
+.finishSegment.finishSegmentOn:disabled,
+.finishSegment.finishSegmentOn:disabled:hover {
+  opacity: 0.85;
+  background: var(--castle-selected);
+  color: var(--castle-selected-ink);
+}
+
 .canvasSizeSep {
   color: var(--castle-inspector-muted);
   user-select: none;
@@ -1742,6 +1770,12 @@
   background-position: right 6px center;
 }
 
+.canvasSizeSelect:disabled {
+  opacity: 0.55;
+  cursor: default;
+  color: var(--castle-inspector-muted);
+}
+
 .pxArtInspector {
   min-width: 0;
   border-left: 1px solid var(--castle-inspector-divider);
@@ -2121,6 +2155,14 @@
   cursor: default;
 }
 
+.drawingToolButton.drawingToolSelected:disabled {
+  opacity: 0.7;
+}
+
+.drawingToolButton:disabled:hover {
+  background: var(--castle-inspector-button-bg);
+}
+
 /* Active / selected square icon button -- the eyedropper reference: a light
    fill with a dark glyph. The single selected/engaged look shared by the
    IconButton component (`active`), the onion-skin toggle, and the pixel