Sandcastle using Stratakit

.github/actions/verify-package/script.sh

@@ -15,7 +15,9 @@ cp cesium*.tgz ../test
 cp Specs/test.*js ../test
 cd ../test
 
-npm install cesium*.tgz
+npm install cesium-1.*.tgz
+npm install cesium-engine*.tgz
+npm install cesium-widgets*.tgz
 NODE_ENV=development node test.cjs
 NODE_ENV=production node test.cjs
-node test.mjs
+node test.mjs

package.json

@@ -163,5 +163,13 @@
     "packages/engine",
     "packages/widgets",
     "packages/sandcastle"
-  ]
+  ],
+  "overrides": {
+    "allotment": {
+      "use-resize-observer": {
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+      }
+    }
+  }
 }

packages/sandcastle/gallery/viewerless/index.html

@@ -0,0 +1,6 @@
+<style>
+  @import url(../templates/bucket.css);
+</style>
+<div id="cesiumContainer" class="fullSize"></div>
+<div id="loadingOverlay"><h1>Loading...</h1></div>
+<div id="toolbar"></div>

packages/sandcastle/gallery/viewerless/main.js

@@ -0,0 +1,8 @@
+//import * as Cesium from "cesium";
+
+//const viewer = new Cesium.Viewer("cesiumContainer");
+
+console.log("Sandcastle loaded");
+document.body.style.background = `
+  no-repeat center/30% url(../images/cesium-logomark.svg),
+  linear-gradient(to bottom, lightskyblue, lightgreen)`;

packages/sandcastle/gallery/viewerless/sandcastle.yaml

@@ -0,0 +1,3 @@
+title: Viewerless Sandcastle
+description: A Sandcastle that does not construct the viewer for faster, easier development of Sandcastle itself
+development: true

packages/sandcastle/package.json

@@ -15,14 +15,19 @@
     "build-gallery": "node scripts/buildGallery.js"
   },
   "dependencies": {
-    "@itwin/itwinui-react": "^5.0.0-alpha.14",
     "@monaco-editor/react": "^4.7.0",
+    "@stratakit/bricks": "^0.3.1",
+    "@stratakit/foundations": "^0.2.0",
+    "@stratakit/icons": "^0.1.2",
+    "@stratakit/structures": "^0.2.3",
     "allotment": "^1.20.4",
+    "classnames": "^2.5.1",
     "monaco-editor": "^0.52.2",
     "pako": "^2.1.0",
     "prettier": "^3.5.3",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "react-stay-scrolled": "^9.0.0"
   },
   "devDependencies": {
     "@types/pako": "^2.0.3",
@@ -38,5 +43,13 @@
     "vite": "^6.2.0",
     "vite-plugin-static-copy": "^2.3.1",
     "yaml": "^2.8.0"
+  },
+  "overrides": {
+    "allotment": {
+      "use-resize-observer": {
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+      }
+    }
   }
 }

packages/sandcastle/public/templates/bucket.css

@@ -16,25 +16,31 @@ body {
   height: 100%;
   overflow: hidden;
 
-  background-color: white;
+  background-color: var(--stratakit-color-bg-page-base);
   background-image: var(--_rings), var(--_gradient);
 
   /* TODO: these should pull from the stratakit directly somehow eventually */
-  --ids-color-border-neutral-muted: oklch(91.52% 0.005 258.33);
-  --ids-color-bg-page-base: oklch(99.06% 0.002 247.84);
-  --ids-color-bg-page-depth: oklch(94.86% 0.002 247.84);
+  /* Light */
+  --stratakit-color-border-neutral-muted: oklch(91.52% 0.005 258.33);
+  --stratakit-color-bg-page-base: oklch(99.06% 0.002 247.84);
+  --stratakit-color-bg-page-depth: oklch(94.86% 0.002 247.84);
+
+  /* Dark */
+  --stratakit-color-border-neutral-muted: oklch(32.63% 0.014 268.32);
+  --stratakit-color-bg-page-base: oklch(24.37% 0.006 268.32);
+  --stratakit-color-bg-page-depth: oklch(22.52% 0.005 268.32);
 
   --_rings: repeating-radial-gradient(
     circle at center,
-    var(--ids-color-border-neutral-muted) 1px,
-    var(--ids-color-border-neutral-muted) 3px,
+    var(--stratakit-color-border-neutral-muted) 1px,
+    var(--stratakit-color-border-neutral-muted) 3px,
     transparent 3px,
-    transparent 10px
+    transparent 25px
   );
   --_gradient: linear-gradient(
     180deg,
-    var(--ids-color-bg-page-base) 0%,
-    var(--ids-color-bg-page-depth) 100%
+    var(--stratakit-color-bg-page-base) 0%,
+    var(--stratakit-color-bg-page-depth) 100%
   );
 }
 

packages/sandcastle/scripts/buildGallery.js

@@ -106,7 +106,7 @@ export function buildGalleryList(galleryDirectory, includeDevelopment = true) {
       title: title,
       thumbnail: thumbnail,
       description: description,
-      labels: labels,
+      labels: labels ?? [],
       isNew: false,
     });
     if (legacyId) {

packages/sandcastle/src/App.css

@@ -1,73 +1,56 @@
-#root {
+.sandcastle-root {
+  display: grid;
   width: 100vw;
   height: 100vh;
-  display: grid;
-  grid-template:
-    "toolbar"
-    "center"
-    "gallery";
-  grid-template-rows: max-content auto 150px;
-}
-
-.split-view {
-  /* These control the styling of the Allotment dividers */
-  --focus-border: var(--ids-color-border-accent-base);
-  --separator-border: var(--ids-color-border-neutral-base);
-}
-
-.toolbar {
-  grid-area: toolbar;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem;
-  background: var(--ids-color-bg-page-base);
-
-  .spacer {
-    flex-grow: 10;
+  --header-height: min-content;
+  --app-bar-width: 52px;
+  grid-template-rows: var(--header-height) auto;
+  grid-template-columns: var(--app-bar-width) auto;
+  grid-template-areas: "header header" "app-bar content";
+
+  header {
+    grid-area: header;
+    display: flex;
+    align-items: center;
+    padding: 0.5em 1em 0.5em 0.5em;
+    gap: 0.5em;
+    background: var(--stratakit-color-bg-page-depth);
+
+    .metadata {
+      margin-left: 0.5em;
+      color: var(--stratakit-color-text-accent-strong);
+    }
+
+    .version {
+      color: var(--stratakit-color-text-neutral-secondary);
+    }
   }
-}
-
-.tabs {
-  background: var(--ids-color-bg-page-base);
-}
 
-.editor-container {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
+  .application-bar {
+    grid-area: app-bar;
+    display: flex;
+    flex-direction: column;
+    padding: 0.5em;
+    gap: 0.5em;
+    background: var(--stratakit-color-bg-page-depth);
+
+    button {
+      /* Force buttons to be square */
+      padding: 8px;
+    }
+  }
 
-  section {
-    border-top: 1px solid var(--ids-color-border-neutral-base);
-    flex-shrink: 1;
+  .content {
+    grid-area: content;
   }
 }
 
-.viewer-bucket {
-  height: 100%;
-  background-color: white;
-  background-image: var(--_rings), var(--_gradient);
-  --_rings: repeating-radial-gradient(
-    circle at center,
-    var(--ids-color-border-neutral-muted) 1px,
-    var(--ids-color-border-neutral-muted) 3px,
-    transparent 3px,
-    transparent 10px
-  );
-  --_gradient: linear-gradient(
-    180deg,
-    var(--ids-color-bg-page-base) 0%,
-    var(--ids-color-bg-page-depth) 100%
-  );
-
-  .fullFrame {
-    width: 100%;
-    height: 100%;
-  }
+.flex-spacer {
+  flex-grow: 1000;
 }
 
-.gallery {
-  grid-area: gallery;
-  border-top: 1px solid var(--ids-color-border-neutral-base);
-  background: var(--ids-color-bg-page-depth);
+.split-view {
+  /* These control the styling of the Allotment dividers */
+  --focus-border: var(--stratakit-color-border-accent-base);
+  --separator-border: var(--stratakit-color-border-neutral-base);
 }