castle-web-cli 0.4.77 → 0.4.79

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

@@ -372,8 +372,13 @@
 
 .bpSlot,
 .bpActionSlot {
+  position: relative;
   width: 46px;
   height: 46px;
+  /* Never shrink in the flex hotbar -- keep the square 46x46 and let the
+     hotbar scroll (overflow-x: auto) when the panel gets narrow, instead of
+     squishing slots (the add button collapsed since its icon is only 14px). */
+  flex: 0 0 46px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -387,11 +392,34 @@
   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
 }
 
+.bpSlotBadge {
+  position: absolute;
+  right: -4px;
+  bottom: -4px;
+  min-width: 15px;
+  height: 15px;
+  padding: 0 3px;
+  border-radius: 999px;
+  background: var(--castle-selected);
+  color: var(--castle-selected-ink);
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 15px;
+  text-align: center;
+}
+
 .bpSlot:hover,
 .bpActionSlot:hover {
   background: var(--castle-inspector-input-bg);
 }
 
+.bpSlotSelected,
+.bpSlotSelected:hover {
+  border-color: var(--castle-selected);
+  box-shadow: 0 0 0 1px var(--castle-selected);
+  background: var(--castle-inspector-input-bg);
+}
+
 .bpSlot:disabled,
 .bpActionSlot:disabled {
   cursor: default;
@@ -448,6 +476,119 @@
   flex: 1 1 auto;
 }
 
+.confirmBackdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 2000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.55);
+}
+
+.confirmDialog {
+  width: min(340px, calc(100vw - 32px));
+  padding: 18px;
+  border: 1px solid var(--castle-border);
+  border-radius: 10px;
+  background: var(--castle-panel-raised);
+  color: var(--castle-text);
+  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5);
+}
+
+.confirmTitle {
+  font-size: 15px;
+  font-weight: 650;
+  margin-bottom: 8px;
+}
+
+.confirmMessage {
+  font-size: 13px;
+  color: var(--castle-text-dim);
+  line-height: 1.45;
+  margin-bottom: 16px;
+}
+
+.confirmActions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.blueprintBadge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 7px;
+  border-radius: 999px;
+  border: 1px solid var(--castle-inspector-border);
+  background: var(--castle-inspector-input-bg);
+  color: var(--castle-inspector-muted);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+
+.editorHeaderTitleRow {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.instanceHint {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--castle-inspector-divider);
+}
+
+.instanceHintLabel {
+  color: var(--castle-inspector-muted);
+  font-size: 12px;
+}
+
+.instanceForkButton {
+  border: 1px solid var(--castle-inspector-border);
+  border-radius: 6px;
+  background: var(--castle-inspector-input-bg);
+  color: inherit;
+  font-size: 11px;
+  padding: 5px 9px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.instanceForkButton:hover {
+  background: var(--castle-inspector-border);
+}
+
+/* Editable blueprint title: reads as a heading until hovered/focused, where a
+   border + input background reveal that it's editable. */
+.blueprintNameInput {
+  flex: 1;
+  min-width: 0;
+  border: 1px solid transparent;
+  border-radius: var(--castle-radius);
+  background: transparent;
+  color: var(--castle-inspector-text);
+  font-size: 14px;
+  font-weight: 600;
+  padding: 4px 6px;
+  margin: -4px -6px;
+  outline: 0;
+}
+
+.blueprintNameInput:hover {
+  border-color: var(--castle-inspector-border);
+}
+
+.blueprintNameInput:focus {
+  border-color: var(--castle-inspector-border);
+  background: var(--castle-inspector-input-bg);
+}
+
 .stageWrap {
   grid-column: 1;
   grid-row: 2;
@@ -487,6 +628,9 @@
   height: 100%;
   display: block;
   touch-action: none;
+  /* tabIndex=-1 (keyboard-focus capture on pointer-down) would otherwise draw a
+     focus ring; focus here is programmatic only, never via keyboard. */
+  outline: none;
 }
 
 .stageCanvasEdit {
@@ -578,9 +722,11 @@
 
 .selBox {
   position: absolute;
+  box-sizing: border-box;
   border: 2px dashed 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. */
@@ -1112,6 +1258,18 @@
   max-height: 100%;
 }
 
+.canvasTopStack {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.canvasTopBar {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
 .canvasSizeBar {
   display: flex;
   align-items: center;
@@ -1121,6 +1279,54 @@
   color: var(--castle-inspector-muted);
 }
 
+.cornerRadiusBar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: 0 0 auto;
+  font-size: 12px;
+  color: var(--castle-inspector-muted);
+}
+
+/* Corner-radius segmented control (0 / ¼ / ½) — same bordered-row-of-
+   buttons pattern as .drawingShapeModeRow, sized for short text labels
+   instead of square glyph buttons. */
+.cornerRadiusSegments {
+  display: flex;
+  border: 1px solid var(--castle-inspector-border);
+  border-radius: var(--castle-radius);
+  overflow: hidden;
+}
+
+.cornerRadiusSegments > * + * {
+  border-left: 1px solid var(--castle-inspector-border);
+}
+
+.cornerRadiusSegment {
+  min-width: 28px;
+  padding: 3px 8px;
+  border: 0;
+  background: var(--castle-inspector-button-bg);
+  color: var(--castle-inspector-text);
+  cursor: pointer;
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.35;
+}
+
+.cornerRadiusSegment:hover {
+  background: var(--castle-inspector-input-bg);
+}
+
+/* Compound selector (not a bare `.cornerRadiusSegmentOn`) for the same reason
+   documented above `.drawingToolButton.drawingToolSelected`: it must beat
+   `.cornerRadiusSegment:hover` on specificity no matter source order. */
+.cornerRadiusSegment.cornerRadiusSegmentOn,
+.cornerRadiusSegment.cornerRadiusSegmentOn:hover {
+  background: var(--castle-selected);
+  color: var(--castle-selected-ink);
+}
+
 .canvasSizeSep {
   color: var(--castle-inspector-muted);
   user-select: none;
@@ -1306,23 +1512,20 @@
   justify-content: center;
 }
 
-/* Stacks the native artboard canvas and the display-resolution overlay so the
-   marching-ants outline renders crisp instead of sub-pixel on the upscaled art. */
+/* Stacks the native artboard canvas, the smooth-preview canvas, and the
+   display-resolution overlay so the marching-ants outline renders crisp
+   instead of sub-pixel on the upscaled art. The checkerboard "transparency"
+   background lives on the FRAME (not the main canvas) so it doesn't paint
+   over the smooth-preview canvas underneath in "smooth" render mode. */
 .drawingArtboardFrame {
   position: relative;
   flex: 0 0 auto;
-}
-
-.drawingOverlay {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-}
-
-.drawingCanvas {
-  image-rendering: pixelated;
+  /* Own stacking context, so the negative-z .drawingSmooth canvas paints just
+     above THIS element's checkerboard background instead of sinking below it
+     (without isolation, negative z-index children paint before all in-flow
+     descendant backgrounds of the outer stacking context — checkerboard
+     included — hiding the smooth render entirely). */
+  isolation: isolate;
   background:
     linear-gradient(45deg, #1a1a1a 25%, transparent 25%),
     linear-gradient(-45deg, #1a1a1a 25%, transparent 25%),
@@ -1336,7 +1539,41 @@
     8px -8px,
     -8px 0;
   border: 1px solid var(--castle-inspector-border);
+}
+
+.drawingOverlay {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+/* Behind the main canvas (negative z-index paints before static content in
+   the same containing block) — holds the corner-rounded render for "smooth"
+   sprites while the main canvas above it stays transparent except for tool
+   overlays, so editing interactions are unaffected. Empty/0-sized in "pixel"
+   mode. */
+.drawingSmooth {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: -1;
+}
+
+.drawingCanvas {
+  image-rendering: pixelated;
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
   flex: 0 0 auto;
+  /* tabIndex=-1 (for keyboard-focus capture on pointer-down) would otherwise
+     draw a focus ring around the artboard; it's focused programmatically, never
+     via keyboard, so suppressing the outline is safe. */
+  outline: none;
 }
 
 .palette {
@@ -1640,8 +1877,9 @@
 
 @media (max-width: 600px) {
   :root {
+    /* Fallback for the file-browser sheet and the inspector's initial slide-in;
+       the inspector's live height is driven by the hook's --sheet-h (see below). */
     --sheet-high-height: 62vh;
-    --sheet-low-height: 18vh;
   }
 
   /* `display: contents` makes wrapper spans transparent in layout so their
@@ -1789,7 +2027,7 @@
     overflow-y: auto;
   }
 
-  /* Inspector sheet: hidden off-screen by default; slides up to high (full) or low (partial). */
+  /* Inspector sheet: hidden off-screen by default; slides up when open. */
   .inspector {
     z-index: 45;
     border-left: 0;
@@ -1797,20 +2035,18 @@
     padding: 0;
   }
 
-  .inspector[data-sheet-snap='high'] {
-    transform: translateY(0);
-    height: var(--sheet-high-height);
-  }
-
-  .inspector[data-sheet-snap='low'] {
+  /* Open inspector sheet: continuous height driven by the hook's live --sheet-h
+     (falls back to the default expanded height). Drag the grab handle to resize
+     freely; the hook picks the settle point on release. */
+  .inspector[data-sheet-open='true'] {
     transform: translateY(0);
-    height: var(--sheet-low-height);
+    height: var(--sheet-h, var(--sheet-high-height));
   }
 
-  /* Auto-height variant -- inspector hugs its content at the high snap (drawing/code). */
-  .inspector.inspectorAuto[data-sheet-snap='high'] {
-    height: auto;
-    max-height: var(--sheet-high-height);
+  /* While dragging, drop the transition so the sheet tracks the finger 1:1; the
+     settle animation returns the moment this class is removed on release. */
+  .inspector.sheetDragging {
+    transition: none;
   }
 
   /* Shared sheet chrome -- grab bar pill + label row. Always visible when sheet is visible. */

package/kits/basic-2d/pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+allowBuilds:
+  '@fortawesome/fontawesome-common-types': set this to true or false
+  '@fortawesome/free-solid-svg-icons': set this to true or false

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

@@ -1,23 +1,13 @@
 {
-  "background": "#00396D",
+  "background": "#1a1932",
   "actors": [
     {
       "id": "pig",
+      "blueprint": "blueprints/cauldron.scene",
       "components": {
         "Layout": {
           "x": 210,
-          "y": 310,
-          "width": 80,
-          "height": 80,
-          "z": 1
-        },
-        "Sprite": {
-          "file": "drawings/pig.pxart"
-        },
-        "Collider": {
-          "kind": "solid",
-          "width": 70,
-          "height": 70
+          "y": 310
         }
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "castle-web-cli",
-  "version": "0.4.77",
+  "version": "0.4.79",
   "type": "module",
   "bin": {
     "castle-web": "./dist/index.js"
@@ -40,6 +40,7 @@
     "nanoid": "^5.1.7",
     "open": "^10.0.0",
     "picomatch": "^4.0.4",
+    "playwright-core": "^1.61.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "vite": "^8.0.3",

package/kits/basic-2d/drawings/pig.pxart

@@ -1,26 +0,0 @@
-{
-  "format": "compact",
-  "palette": {
-    "6": "#f5555d",
-    "q": "#391f21",
-    "v": "#f6ca9f"
-  },
-  "grid": [
-    "................",
-    "................",
-    "........q..q....",
-    "....qqqqvqqvq...",
-    "...qvvvvvvvvq...",
-    "..qvvvvvvvvvvq..",
-    ".qvvvvvvvqvvqvq.",
-    ".qvvvvvvvqvvqvq.",
-    "q6vvvvvvvvv666q.",
-    "q6vvvvvvvv6q6q6q",
-    ".qvvvvvvvv66666q",
-    ".qvvvvvvvvv666q.",
-    "..qvvvvvvvvvqq..",
-    "..q66qqqq6q6q...",
-    "..q6q...q6q.....",
-    "................"
-  ]
-}