castle-web-cli 0.4.82 → 0.4.83

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

@@ -37,6 +37,9 @@
   --castle-danger: #ff5d5d;
   --castle-ok: #81e69b;
   --castle-blue: #8db7ff;
+  /* Instance-override indicator: label/reset text + a dimmer input border. */
+  --castle-override: #b388ff;
+  --castle-override-border: #5b4a80;
   --castle-radius: 4px;
   /* Tools/hotbar strip height -- aligned to the inspector "+ Add behavior" row
      (top+bottom pad + 1px borders + select padding + text line). The text line
@@ -420,6 +423,13 @@
   background: var(--castle-inspector-input-bg);
 }
 
+/* The blueprint of the currently-selected actor: distinct from a direct
+   blueprint selection -- just a white border, no thickening/glow. */
+.bpSlotInstance,
+.bpSlotInstance:hover {
+  border-color: #fff;
+}
+
 .bpSlot:disabled,
 .bpActionSlot:disabled {
   cursor: default;
@@ -549,7 +559,78 @@
   font-size: 12px;
 }
 
+.instanceHeader {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 12px;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--castle-inspector-divider);
+}
+
+.instanceHeaderName {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.instanceHeaderNameText {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--castle-inspector-text);
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.instanceHeaderNameStrong {
+  font-weight: 600;
+}
+
+.instanceHeaderNameCol {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.instanceHeaderId {
+  color: var(--castle-inspector-muted);
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.revealOverridesButton {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 8px;
+  width: 100%;
+  padding: 14px 16px;
+  border: 0;
+  border-bottom: 1px solid var(--castle-inspector-divider);
+  background: transparent;
+  color: var(--castle-inspector-muted);
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.revealOverridesButton:hover {
+  background: var(--castle-inspector-input-bg);
+  color: var(--castle-inspector-text);
+}
+
 .instanceForkButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  align-self: flex-start;
   border: 1px solid var(--castle-inspector-border);
   border-radius: 6px;
   background: var(--castle-inspector-input-bg);
@@ -675,14 +756,16 @@
   animation: selOverlayIn 150ms ease;
 }
 
+/* Fade only -- no scale. Scaling the full-card overlay about its center made
+   an off-center selection's handles slide inward-from-center on every mount
+   (most visible re-selecting a different actor after a deselect, where the
+   overlay remounts), reading as "animating in from the old position". */
 @keyframes selOverlayIn {
   from {
     opacity: 0;
-    transform: scale(0.92);
   }
   to {
     opacity: 1;
-    transform: scale(1);
   }
 }
 
@@ -700,16 +783,10 @@
   top: 0;
 }
 
-.selChromeRotate {
-  position: absolute;
-  left: 0;
-  top: 0;
-}
-
 .selColliderBox {
   position: absolute;
   box-sizing: border-box;
-  border: 2px solid rgb(141 183 255 / 0.9);
+  border: 2px dotted rgb(141 183 255 / 0.9);
   background: rgb(141 183 255 / 0.14);
   border-radius: 2px;
   pointer-events: none;
@@ -723,19 +800,22 @@
 .selBox {
   position: absolute;
   box-sizing: border-box;
-  border: 2px dashed var(--castle-text);
+  border: 2px solid var(--castle-text);
   border-radius: 3px;
   opacity: 0.85;
   pointer-events: none;
 }
 
-/* Connector stem from the box's right-center edge to the rotate handle. */
+/* Connector stem from the box's right-center edge to the rotate handle. Lives
+   in the un-scaled px layer and is rotated about its left-center anchor, so its
+   thickness matches the selection box border at any zoom. */
 .selStem {
   position: absolute;
   height: 2px;
   background: var(--castle-text);
-  opacity: 0.7;
-  transform: translateY(-50%);
+  opacity: 0.85;
+  transform-origin: left center;
+  pointer-events: none;
 }
 
 .selScaleHandle {
@@ -949,6 +1029,10 @@
   font-weight: 650;
 }
 
+.panelTitleOverridden {
+  color: var(--castle-override);
+}
+
 .panelBody {
   padding: 8px 16px 4px;
 }
@@ -972,6 +1056,63 @@
   font-size: 14px;
 }
 
+/* Instance override: purple label + input border, plus a "Default: X [Reset]"
+   sub-line rendered below the control (see FieldRow). */
+.fieldLabelOverridden {
+  color: var(--castle-override);
+}
+
+.fieldRowOverridden .input,
+.fieldRowOverridden .select,
+.fieldRowOverridden .colorInput {
+  border-color: var(--castle-override-border);
+}
+
+.fieldOverride {
+  padding-bottom: 12px;
+}
+
+.fieldOverride .fieldRow {
+  padding-bottom: 4px;
+}
+
+.fieldDefault {
+  display: grid;
+  grid-template-columns: minmax(82px, 0.5fr) minmax(0, 1fr);
+  gap: 12px;
+}
+
+.fieldDefaultInner {
+  grid-column: 2;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  font-size: 12px;
+  color: var(--castle-inspector-muted);
+}
+
+.fieldDefaultInner > span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.fieldResetBtn {
+  margin-left: auto;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  color: var(--castle-override);
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.fieldResetBtn:hover {
+  color: var(--castle-inspector-text);
+}
+
 .input,
 .select,
 .textarea {
@@ -1145,13 +1286,6 @@
   height: 14px;
 }
 
-.dashedSquareIcon {
-  width: 14px;
-  height: 14px;
-  border: 2px dashed currentColor;
-  border-radius: 2px;
-}
-
 .button:hover,
 .iconButton:hover {
   background: var(--castle-inspector-input-bg);
@@ -1868,10 +2002,7 @@
 .mobileOnly,
 .sheetBackdrop,
 .sheetGrab,
-.sheetGrabBar,
-.sheetGrabLabelRow,
-.sheetGrabLabel,
-.sheetGrabHint {
+.sheetGrabBar {
   display: none;
 }
 
@@ -2049,7 +2180,7 @@
     transition: none;
   }
 
-  /* Shared sheet chrome -- grab bar pill + label row. Always visible when sheet is visible. */
+  /* Shared sheet chrome -- grab bar pill. Always visible when sheet is visible. */
   .sheetGrab {
     display: flex;
     flex-direction: column;
@@ -2074,37 +2205,10 @@
     height: 4px;
     border-radius: 999px;
     background: var(--castle-inspector-divider);
-    margin: 0 auto 8px;
+    margin: 0 auto;
     flex: 0 0 4px;
   }
 
-  .sheetGrabLabelRow {
-    display: flex;
-    align-items: baseline;
-    gap: 8px;
-    min-width: 0;
-  }
-
-  .sheetGrabLabel {
-    display: inline;
-    font-size: 14px;
-    font-weight: 600;
-    color: var(--castle-inspector-text);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .sheetGrabHint {
-    display: inline;
-    font-size: 14px;
-    color: var(--castle-inspector-muted);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    flex: 1;
-  }
-
   .sheetBody {
     flex: 1;
     min-height: 0;

package/kits/basic-2d/scenes/main.scene

@@ -2,12 +2,12 @@
   "background": "#1a1932",
   "actors": [
     {
-      "id": "pig",
+      "id": "cauldron",
       "blueprint": "blueprints/cauldron.scene",
       "components": {
         "Layout": {
-          "x": 210,
-          "y": 310
+          "x": 200,
+          "y": 300
         }
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "castle-web-cli",
-  "version": "0.4.82",
+  "version": "0.4.83",
   "type": "module",
   "bin": {
     "castle-web": "./dist/index.js"
@@ -23,6 +23,7 @@
     ]
   },
   "dependencies": {
+    "@codemirror/commands": "^6.10.4",
     "@codemirror/lang-javascript": "^6.2.5",
     "@codemirror/language": "^6.12.3",
     "@codemirror/state": "^6.6.0",