npm - castle-web-cli - Versions diffs - 0.4.166 → 0.4.167 - Mend

castle-web-cli 0.4.166 → 0.4.167

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (85) hide show

package/dist/shell/index.html CHANGED Viewed

@@ -10,7 +10,7 @@
     <link rel="icon" type="image/png" sizes="32x32" href="/__castle/ide/favicon-32x32.png" />
     <link rel="icon" type="image/png" sizes="16x16" href="/__castle/ide/favicon-16x16.png" />
     <link rel="icon" href="/__castle/ide/favicon.ico" sizes="any" />
-    <script type="module" crossorigin src="/__castle/ide/assets/index-CG9TrvCm.js"></script>
+    <script type="module" crossorigin src="/__castle/ide/assets/index-C8M-p00y.js"></script>
     <link rel="stylesheet" crossorigin href="/__castle/ide/assets/index-CIRBt1qf.css">
   </head>
   <body>

package/kits/base/castle.json CHANGED Viewed

@@ -1,13 +1,75 @@
 {
   "editor": {
     "hiddenPaths": [],
-    "visiblePaths": []
+    "visiblePaths": [],
+    "fileTypes": [
+      {
+        "ext": ".png",
+        "label": "Image",
+        "icon": "image",
+        "editor": "editors/ImageViewer.js"
+      },
+      {
+        "ext": ".jpg",
+        "label": "Image",
+        "icon": "image",
+        "editor": "editors/ImageViewer.js"
+      },
+      {
+        "ext": ".jpeg",
+        "label": "Image",
+        "icon": "image",
+        "editor": "editors/ImageViewer.js"
+      },
+      {
+        "ext": ".gif",
+        "label": "Image",
+        "icon": "image",
+        "editor": "editors/ImageViewer.js"
+      },
+      {
+        "ext": ".webp",
+        "label": "Image",
+        "icon": "image",
+        "editor": "editors/ImageViewer.js"
+      },
+      {
+        "ext": ".svg",
+        "label": "Image",
+        "icon": "image",
+        "editor": "editors/ImageViewer.js"
+      },
+      {
+        "ext": ".mp3",
+        "label": "Audio",
+        "icon": "music",
+        "editor": "editors/MediaPlayer.js"
+      },
+      {
+        "ext": ".wav",
+        "label": "Audio",
+        "icon": "music",
+        "editor": "editors/MediaPlayer.js"
+      },
+      {
+        "ext": ".m4a",
+        "label": "Audio",
+        "icon": "music",
+        "editor": "editors/MediaPlayer.js"
+      },
+      {
+        "ext": ".mp4",
+        "label": "Video",
+        "icon": "film",
+        "editor": "editors/MediaPlayer.js"
+      }
+    ]
   },
   "autoUpdateWhenImported": true,
   "title": "base",
   "deckId": "yRcmH4_aYllE",
   "cardId": "zkFdingmIm3m",
-  "publishedVersion": "2026-09-04T18:30:31.525Z",
+  "publishedVersion": "2026-09-05T00:07:27.320Z",
   "provides": [
     "castle-web-sdk"
   ]

package/kits/base/editors/ImageViewer.js ADDED Viewed

@@ -0,0 +1,259 @@
+// Read-only image viewer for the base kit. Opened for the image extensions
+// declared in this kit's castle.json, so an uploaded .png/.jpg/.svg opens as a
+// picture instead of a wall of binary in the code editor — including on bare
+// (`--kit none`) decks that have no framework kit.
+//
+// Framework-free mount editor (see editorHost.js): default export is
+// `mount(el, props)`. Physics-2d's DeclaredEditor wraps that shape when it
+// loads an import's module.
+//
+// It VIEWS: fit / zoom / pan, at 1:1 when you want to count pixels. Nothing
+// here writes.
+import { fileUrl, onFilesChanged } from 'castle-web-sdk';
+import './imageViewer.css';
+const MIN_SCALE = 0.05;
+const MAX_SCALE = 64;
+const PIXELATE_ABOVE = 2.5;
+const WHEEL_ZOOM_PER_PX = 0.0016;
+const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+function basename(path) {
+  const i = path.lastIndexOf('/');
+  return i < 0 ? path : path.slice(i + 1);
+}
+function fitScale(stage, natural) {
+  if (!stage.width || !stage.height || !natural.width || !natural.height) return 1;
+  const margin = 24;
+  const sx = (stage.width - margin) / natural.width;
+  const sy = (stage.height - margin) / natural.height;
+  return clamp(Math.min(sx, sy), MIN_SCALE, MAX_SCALE);
+}
+function zoomAbout(view, factor, px, py) {
+  const scale = clamp(view.scale * factor, MIN_SCALE, MAX_SCALE);
+  const k = scale / view.scale;
+  return { scale, x: px - (px - view.x) * k, y: py - (py - view.y) * k };
+}
+function mediaUrl(path, version) {
+  const base = fileUrl(path);
+  return version === 0 ? base : `${base}&v=${version}`;
+}
+/**
+ * @param {HTMLElement} el
+ * @param {{ path: string }} props
+ */
+export default function mount(el, { path }) {
+  el.textContent = '';
+  el.style.cssText = 'display:flex;flex:1;width:100%;height:100%;min-height:100vh;';
+  const root = document.createElement('div');
+  root.className = 'castle-image-viewer';
+  root.innerHTML = `
+    <div class="castle-image-viewer-toolbar">
+      <button type="button" data-act="zoom-out" aria-label="Zoom out">−</button>
+      <button type="button" data-act="zoom-in" aria-label="Zoom in">+</button>
+      <button type="button" data-act="fit">Fit</button>
+      <button type="button" data-act="one">1:1</button>
+      <span class="castle-image-viewer-readout" data-readout></span>
+    </div>
+    <div class="castle-image-viewer-stage" data-stage>
+      <img class="castle-image-viewer-image" alt="" data-image />
+      <div class="castle-image-viewer-message" data-message>Loading…</div>
+    </div>
+  `;
+  el.appendChild(root);
+  const stage = root.querySelector('[data-stage]');
+  const image = root.querySelector('[data-image]');
+  const message = root.querySelector('[data-message]');
+  const readout = root.querySelector('[data-readout]');
+  let view = { scale: 1, x: 0, y: 0 };
+  let natural = { width: 0, height: 0 };
+  let touched = false;
+  let dragging = false;
+  let version = 0;
+  let status = 'loading';
+  const stageSize = { width: 0, height: 0 };
+  const applyTransform = () => {
+    image.style.width = natural.width ? `${natural.width}px` : '';
+    image.style.height = natural.height ? `${natural.height}px` : '';
+    image.style.transform = `translate(-50%, -50%) translate(${view.x}px, ${view.y}px) scale(${view.scale})`;
+    image.style.visibility = status === 'ready' ? 'visible' : 'hidden';
+    image.classList.toggle('pixelated', view.scale >= PIXELATE_ABOVE);
+    stage.classList.toggle('dragging', dragging);
+    readout.textContent =
+      status === 'ready' ? `${natural.width}×${natural.height} · ${Math.round(view.scale * 100)}%` : '';
+  };
+  const setStatus = (next) => {
+    status = next;
+    if (next === 'loading') {
+      message.textContent = 'Loading…';
+      message.className = 'castle-image-viewer-message';
+      message.hidden = false;
+    } else if (next === 'error') {
+      message.textContent = `Could not load ${basename(path)}.`;
+      message.className = 'castle-image-viewer-message error';
+      message.hidden = false;
+    } else {
+      message.hidden = true;
+    }
+    applyTransform();
+  };
+  const fit = () => {
+    touched = false;
+    view = { scale: fitScale(stageSize, natural), x: 0, y: 0 };
+    applyTransform();
+  };
+  const zoomAt = (factor, clientX, clientY) => {
+    const rect = stage.getBoundingClientRect();
+    const px = clientX - rect.left - rect.width / 2;
+    const py = clientY - rect.top - rect.height / 2;
+    touched = true;
+    view = zoomAbout(view, factor, px, py);
+    applyTransform();
+  };
+  const zoomBy = (factor) => {
+    touched = true;
+    view = zoomAbout(view, factor, 0, 0);
+    applyTransform();
+  };
+  const setScale = (scale) => {
+    touched = true;
+    view = zoomAbout(view, scale / view.scale, 0, 0);
+    applyTransform();
+  };
+  const measure = () => {
+    stageSize.width = stage.clientWidth;
+    stageSize.height = stage.clientHeight;
+    if (!touched && status === 'ready') fit();
+  };
+  const load = () => {
+    setStatus('loading');
+    image.alt = basename(path);
+    image.src = mediaUrl(path, version);
+  };
+  image.onload = () => {
+    natural = {
+      width: image.naturalWidth || 300,
+      height: image.naturalHeight || 300,
+    };
+    setStatus('ready');
+    fit();
+  };
+  image.onerror = () => setStatus('error');
+  root.querySelector('[data-act="zoom-out"]').onclick = () => zoomBy(1 / 1.4);
+  root.querySelector('[data-act="zoom-in"]').onclick = () => zoomBy(1.4);
+  root.querySelector('[data-act="fit"]').onclick = () => fit();
+  root.querySelector('[data-act="one"]').onclick = () => setScale(1);
+  const onWheel = (event) => {
+    event.preventDefault();
+    zoomAt(Math.exp(-event.deltaY * WHEEL_ZOOM_PER_PX), event.clientX, event.clientY);
+  };
+  stage.addEventListener('wheel', onWheel, { passive: false });
+  stage.onpointerdown = (event) => {
+    if (event.pointerType === 'touch' || event.button !== 0) return;
+    stage.setPointerCapture(event.pointerId);
+    dragging = true;
+    applyTransform();
+  };
+  stage.onpointermove = (event) => {
+    if (!dragging) return;
+    touched = true;
+    view = { ...view, x: view.x + event.movementX, y: view.y + event.movementY };
+    applyTransform();
+  };
+  const endDrag = () => {
+    dragging = false;
+    applyTransform();
+  };
+  stage.onpointerup = endDrag;
+  stage.onpointercancel = endDrag;
+  stage.ondblclick = () => fit();
+  // Two-finger pinch / pan on touch.
+  const active = new Map();
+  let lastPinch = null;
+  stage.addEventListener(
+    'pointerdown',
+    (event) => {
+      if (event.pointerType !== 'touch') return;
+      active.set(event.pointerId, { x: event.clientX, y: event.clientY });
+      if (active.size === 2) {
+        const [a, b] = [...active.values()];
+        lastPinch = {
+          dist: Math.hypot(b.x - a.x, b.y - a.y),
+          cx: (a.x + b.x) / 2,
+          cy: (a.y + b.y) / 2,
+        };
+        endDrag();
+      }
+    },
+    true,
+  );
+  stage.addEventListener(
+    'pointermove',
+    (event) => {
+      if (!active.has(event.pointerId)) return;
+      active.set(event.pointerId, { x: event.clientX, y: event.clientY });
+      if (active.size !== 2 || !lastPinch) return;
+      event.stopPropagation();
+      const [a, b] = [...active.values()];
+      const dist = Math.hypot(b.x - a.x, b.y - a.y);
+      const cx = (a.x + b.x) / 2;
+      const cy = (a.y + b.y) / 2;
+      const factor = lastPinch.dist > 0 ? dist / lastPinch.dist : 1;
+      zoomAt(factor, cx, cy);
+      touched = true;
+      view = { ...view, x: view.x + (cx - lastPinch.cx), y: view.y + (cy - lastPinch.cy) };
+      applyTransform();
+      lastPinch = { dist, cx, cy };
+    },
+    true,
+  );
+  const endTouch = (event) => {
+    active.delete(event.pointerId);
+    if (active.size < 2) lastPinch = null;
+  };
+  stage.addEventListener('pointerup', endTouch, true);
+  stage.addEventListener('pointercancel', endTouch, true);
+  const resizeObserver =
+    typeof ResizeObserver !== 'undefined' ? new ResizeObserver(measure) : null;
+  resizeObserver?.observe(stage);
+  measure();
+  const offFiles = onFilesChanged((event) => {
+    if (event.changes.some((change) => change.path === path)) {
+      version += 1;
+      load();
+    }
+  });
+  load();
+  return () => {
+    offFiles?.();
+    resizeObserver?.disconnect();
+    stage.removeEventListener('wheel', onWheel);
+    el.textContent = '';
+  };
+}

package/kits/base/editors/MediaPlayer.js ADDED Viewed

@@ -0,0 +1,90 @@
+// Read-only audio / video player for the base kit. Opened for the sound and
+// video extensions declared in this kit's castle.json, so an uploaded .mp3 or
+// .mp4 can be played in place — including on bare (`--kit none`) decks.
+//
+// Framework-free mount editor (see editorHost.js). The transport is the
+// browser's `<audio controls>` / `<video controls>`; this file is the frame
+// around that element. Nothing here writes.
+import { fileUrl, onFilesChanged } from 'castle-web-sdk';
+import './mediaPlayer.css';
+const VIDEO_EXTS = ['.mp4'];
+function basename(path) {
+  const i = path.lastIndexOf('/');
+  return i < 0 ? path : path.slice(i + 1);
+}
+function isVideoPath(path) {
+  const lower = path.toLowerCase();
+  return VIDEO_EXTS.some((ext) => lower.endsWith(ext));
+}
+function mediaUrl(path, version) {
+  const base = fileUrl(path);
+  return version === 0 ? base : `${base}&v=${version}`;
+}
+/**
+ * @param {HTMLElement} el
+ * @param {{ path: string }} props
+ */
+export default function mount(el, { path }) {
+  el.textContent = '';
+  el.style.cssText = 'display:flex;flex:1;width:100%;height:100%;min-height:100vh;';
+  const video = isVideoPath(path);
+  const root = document.createElement('div');
+  root.className = 'castle-media-player';
+  root.innerHTML = `
+    <div class="castle-media-player-panel ${video ? 'video' : 'audio'}">
+      <div class="castle-media-player-name" data-name></div>
+      <${video ? 'video' : 'audio'}
+        class="castle-media-player-${video ? 'video' : 'audio'}"
+        data-media
+        controls
+        playsinline
+      ></${video ? 'video' : 'audio'}>
+      <div class="castle-media-player-error" data-error hidden></div>
+    </div>
+  `;
+  el.appendChild(root);
+  const nameEl = root.querySelector('[data-name]');
+  const media = root.querySelector('[data-media]');
+  const errorEl = root.querySelector('[data-error]');
+  let version = 0;
+  // Metadata only for audio: opening shouldn't pull the whole file until play.
+  // Video preloads enough for a first-frame poster so the panel isn't black.
+  media.preload = video ? 'auto' : 'metadata';
+  const load = () => {
+    nameEl.textContent = basename(path);
+    errorEl.hidden = true;
+    errorEl.textContent = '';
+    media.src = mediaUrl(path, version);
+  };
+  media.onerror = () => {
+    errorEl.textContent = `Could not play ${basename(path)} — this browser may not support its format.`;
+    errorEl.hidden = false;
+  };
+  const offFiles = onFilesChanged((event) => {
+    if (event.changes.some((change) => change.path === path)) {
+      version += 1;
+      load();
+    }
+  });
+  load();
+  return () => {
+    offFiles?.();
+    media.removeAttribute('src');
+    media.load();
+    el.textContent = '';
+  };
+}

package/kits/base/editors/imageViewer.css ADDED Viewed

@@ -0,0 +1,95 @@
+/* Read-only image viewer chrome: toolbar over a stage that fills the panel. */
+.castle-image-viewer {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 100vh;
+  box-sizing: border-box;
+  color: #e6e6ea;
+  background: #161616;
+  font: 13px system-ui, sans-serif;
+}
+.castle-image-viewer-toolbar {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  border-bottom: 1px solid #2a2a33;
+}
+.castle-image-viewer-toolbar button {
+  appearance: none;
+  border: 1px solid #3a3a44;
+  background: #22222a;
+  color: inherit;
+  border-radius: 6px;
+  padding: 6px 10px;
+  font: inherit;
+  cursor: pointer;
+}
+.castle-image-viewer-toolbar button:active {
+  background: #2c2c36;
+}
+.castle-image-viewer-readout {
+  margin-left: auto;
+  font-size: 12px;
+  opacity: 0.7;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.castle-image-viewer-stage {
+  position: relative;
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: hidden;
+  background: repeating-conic-gradient(#1b1b21 0% 25%, #23232b 0% 50%) 50% / 20px 20px;
+  touch-action: none;
+  cursor: grab;
+}
+.castle-image-viewer-stage.dragging {
+  cursor: grabbing;
+}
+.castle-image-viewer-image {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: center;
+  user-select: none;
+  -webkit-user-drag: none;
+  pointer-events: none;
+}
+.castle-image-viewer-image.pixelated {
+  image-rendering: pixelated;
+}
+.castle-image-viewer-message {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  text-align: center;
+  opacity: 0.7;
+}
+/* Author `display: flex` above beats the UA `[hidden] { display: none }`, so
+   the loading label stayed painted after the image was ready. */
+.castle-image-viewer-message[hidden] {
+  display: none;
+}
+.castle-image-viewer-message.error {
+  color: #e86a73;
+  opacity: 1;
+}

package/kits/base/editors/mediaPlayer.css ADDED Viewed

@@ -0,0 +1,58 @@
+/* Read-only audio / video player chrome. Native <audio>/<video controls>
+   handle transport; this only frames them. */
+.castle-media-player {
+  display: flex;
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  min-height: 100vh;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  color: #e6e6ea;
+  background: #161616;
+  font: 13px system-ui, sans-serif;
+}
+.castle-media-player-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-width: 0;
+  width: 100%;
+}
+.castle-media-player-panel.audio {
+  max-width: 420px;
+}
+.castle-media-player-panel.video {
+  max-width: 100%;
+  max-height: 100%;
+  min-height: 0;
+}
+.castle-media-player-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.castle-media-player-audio {
+  width: 100%;
+}
+.castle-media-player-video {
+  min-height: 0;
+  max-width: 100%;
+  max-height: 100%;
+  background: #000;
+  border-radius: 4px;
+}
+.castle-media-player-error {
+  font-size: 12px;
+  color: #e86a73;
+}

package/kits/multiplayer-2d/castle.json CHANGED Viewed

@@ -35,5 +35,5 @@
   },
   "deckId": "oiFu96LkwZ09",
   "cardId": "nkJgrvrCby3H",
-  "publishedVersion": "2026-09-02T05:55:09.684Z"
+  "publishedVersion": "2026-09-05T00:07:29.791Z"
 }

package/kits/multiplayer-2d/package-lock.json CHANGED Viewed

@@ -29,7 +29,7 @@
     },
     "../../sdk": {
       "name": "castle-web-sdk",
-      "version": "0.4.23",
+      "version": "0.4.26",
       "dev": true,
       "devDependencies": {
         "eslint": "^9.0.0",
@@ -151,6 +151,7 @@
       "resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.3.1.tgz",
       "integrity": "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@dnd-kit/accessibility": "^3.1.1",
         "@dnd-kit/utilities": "^3.2.2",
@@ -307,6 +308,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.8.tgz",
       "integrity": "sha512-PWaYA1L/q9u2u7xYQi+Y3L3Yfnie7XyLeaJICV1MGD6LprsBxcAqGjYyr0eY3p+QdsA+x/Irkt4Qif8D63+Sbw==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -316,6 +318,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.8.tgz",
       "integrity": "sha512-rVprimfGBG3DR+Tq0IQG2DT5PxKth1WIGDmj5yPmlzr4YBe7uyE+Du4oVqTDXZSHGGGXRtTJEGSSePyQCMBglQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },

package/kits/multiplayer-3d/castle.json CHANGED Viewed

@@ -33,7 +33,7 @@
   "autoUpdateWhenImported": true,
   "deckId": "ZwA_P_-VO-Qh",
   "cardId": "bvRmCzyUpt_a",
-  "publishedVersion": "2026-09-02T05:55:13.845Z",
+  "publishedVersion": "2026-09-05T00:07:32.934Z",
   "main": "main.jsx",
   "server": {
     "main": "code/server/index.js",

package/kits/multiplayer-3d/package-lock.json CHANGED Viewed

@@ -31,7 +31,7 @@
     },
     "../../sdk": {
       "name": "castle-web-sdk",
-      "version": "0.4.23",
+      "version": "0.4.26",
       "dev": true,
       "devDependencies": {
         "eslint": "^9.0.0",