Sandcastle using Stratakit #12731

jjspace · 2025-07-11T21:16:34Z

Description

The purpose of this PR was to do a full facelift to the new version of Sandcastle and embrace the Stratakit UI components. I also focused on solidifying the behavior of the various panels and parts of the app. It should now be very close to how we want it based on our latest designs.

What this PR does

Switch from itwin-ui to stratakit packages
- Updated necessary CSS variables we were already using
Restructure the main App component to include a header and application/platform of left navigation
Added a console mirror with draggable height
Re-arranged the header buttons to be with the code editor
Restructured Gallery to be a panel covering the left side of the screen
Early localStorage based settings with the theme button
Add many icons from stratakit throughout for buttons

What this PR does NOT do

Gallery search - The inputs are there but do nothing
Modals, settings and the title/description metadata
Stratakit CSS in the bucket iframe
- I re-define a few variables in the CSS for now, this will be changed in a separate PR

Issue number and link

Part of #12566

Testing plan

Run npm run dev from the Sandcastle package or npm run build-sandcastle and npm start from the root
Open the new sandcastle and play with it, this is a mostly visual change so check spacing, layout, interactions
- I added a "viewerless" sandcastle for now to help when testing to not always have to load the viewer and WebGL context
Check the console is working as intended
- Create a sandcastle that uses console.log, console.warn and console.error to make sure it displays them all correctly
- Should auto-open if there are any warnings or errors
- Should stay scrolled to the bottom as new messages come in
- The multiple arguments issue will be fixed separately
- Clicking to collapse and expand again should remember the height
Make sure loading the base route starts on the gallery. Make sure any route with a share string or id starts on the editor
Make sure the viewer area does not flash or double render when loading or picking new gallery items
Make sure the theme is remembered and stays the same after refreshing the page

Author checklist

I have submitted a Contributor License Agreement
I have added my name to CONTRIBUTORS.md
I have updated CHANGES.md with a short summary of my change
I have added or updated unit tests to ensure consistent code coverage
I have updated the inline documentation, and included code examples where relevant
I have performed a self-review of my code

github-actions · 2025-07-11T21:17:07Z

Thank you for the pull request, @jjspace!

✅ We can confirm we have a CLA on file for you.

ggetz · 2025-07-22T15:56:23Z

Any of this can (and probably should) be addressed in a future PR, but here's UI feedback from playing around:

Bug: Console is not properly cleared between runs. To reproduce:

Run the following example:

import * as Cesium from "cesium";

const viewer = new Cesium.Viewer("cesiumContainer");

viewer.scene.postRender.addEventListener(() => {
  console.log("hello");
});

Open the console
Comment out the console.log
Hit run. About 3 logged "hello"s will show up.

UI suggestion: I agree with this user that the code window should probably not open by default when selecting a example from the gallery. It's a bit jarring when you are exploring the gallery.
Idea (low priority): A button in the console bar that fill pause the execution, like what's available in developer tools.

ggetz

Thanks @jjspace! A few comments.

ggetz · 2025-07-22T16:00:05Z

package.json

+    "allotment": {
+      "use-resize-observer": {
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+      }
+    }
+  }


Should this all go in packages/sandcastle/package.json?

Very annoyingly npm seems to ignore overrides in workspaces in monorepos. It didn't work until I added it here. I can try and dig into it more but I think this is simply a limitation we have to work around until the dependency itself gets updated (ZeeCoder/use-resize-observer#108) or allotment removes the dependency in favor of a "pure react" solution (johnwalley/allotment#833 (comment))

ggetz · 2025-07-22T16:02:01Z

packages/sandcastle/gallery/viewerless/main.js

+
+//const viewer = new Cesium.Viewer("cesiumContainer");
+
+console.log("Sandcastle loaded");


Is the idea to keep this around, or clean it up before merging the PR?

I added a "viewerless" sandcastle for now to help when testing to not always have to load the viewer and WebGL context

If the former, I would probably suggest leaving it entirely blank.

ggetz · 2025-07-22T16:03:02Z

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 */


Can we remove this TODO now?

I specifically left the pure CSS integration of stratakit into the bucket iframe for a separate PR. This will be addressed with that work.

ggetz · 2025-07-22T16:58:52Z

packages/sandcastle/src/ConsoleMirror.tsx

+  toggleExpanded: () => void;
+}) {
+  const logsRef = useRef<HTMLDivElement>(document.createElement("div"));
+  // TODO: determine if we need this lib or can implement ourselves. It's a little outdated


Address or add an item to the running TODO list?

ggetz · 2025-07-22T17:01:02Z

packages/sandcastle/src/Gallery.tsx

+  const knownLabels = useMemo(() => {
+    const labels = new Set<string>();
+    for (const demo of demos) {
+      demo.labels?.forEach((label) => labels.add(label));
+    }
+    return [...labels].sort((a, b) => a.localeCompare(b));
+  }, [demos]);


Consider aggregating these during the buildGallery script.

This was removed in the search PR in favor of the list generated by pagefind. I'm gonna leave as is for this PR.

ggetz · 2025-07-22T17:02:03Z

packages/sandcastle/src/SandcastleEditor.css

+    flex-shrink: 1;
+    /* Monaco needs a defined height for dynamic resizing to work */
+    --tabs-height: 1.5rem;
+    height: calc(100% - var(--tabs-height)) !important;


Can we avoid the !important somehow?

iirc I added this because the monaco editor adds the height on the inline style tag which has "max priority" for styles. I'll take a peek at it again but I don't think so

ggetz · 2025-07-22T17:04:07Z

packages/sandcastle/templates/bucket.html

+
+        background-image: var(--_rings), var(--_gradient);
+
+        /* TODO: these should pull from the stratakit directly somehow eventually */


Can we remove?

ggetz · 2025-07-22T17:06:26Z

packages/sandcastle/vite.config.ts

  define: {
    __COMMIT_SHA__: JSON.stringify(undefined),
+    __CESIUM_VERSION__: JSON.stringify(`Cesium ${rootPackageJson.version}`),


A comment that may be easier to address later, but we may be able to remove some of the build complexity by grabbing this info during the buildGallery step.

jjspace added 11 commits July 3, 2025 14:08

convert imports to stratakit

fdba3d6

add viewerless sandcastle for development

464f4bd

Merge remote-tracking branch 'origin/sandcastle-v2' into stratakit-ui

7fc857c

update stratakit and set up icons

6a19832

small changes

1ccf886

rough in UI structure in test component

ae2459c

transfer new layout to main App and clean up

0521f99

pretty up console output

be7f151

try to avoid flashing viewer when running and on page load

373fdfb

convert gallery cards to links, add labels

5d3fac2

app bar icon buttons, relocate editor actions

f97e8a3

jjspace requested a review from ggetz July 11, 2025 21:16

jjspace added 2 commits July 11, 2025 17:31

allow deploy to finish

bf07b3c

fix logo url

1427e03

ggetz assigned jjspace Jul 14, 2025

jjspace mentioned this pull request Jul 15, 2025

Rebuilding Sandcastle: Technical Implementation #12566

Open

30 tasks

jjspace added 3 commits July 15, 2025 15:56

force React v19

0f5b834

Merge branch 'sandcastle-v2' into stratakit-ui

8c0e07c

clear console when picking from gallery

acad9cf

jjspace mentioned this pull request Jul 21, 2025

Gallery conversion for Sandcastle v2 #12752

Open

6 tasks

ggetz requested changes Jul 22, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Sandcastle using Stratakit #12731

Sandcastle using Stratakit #12731

Uh oh!

jjspace commented Jul 11, 2025

Uh oh!

github-actions bot commented Jul 11, 2025

Uh oh!

ggetz commented Jul 22, 2025

Uh oh!

ggetz left a comment

Uh oh!

ggetz Jul 22, 2025

Uh oh!

jjspace Jul 22, 2025

Uh oh!

ggetz Jul 22, 2025

Uh oh!

ggetz Jul 22, 2025

Uh oh!

jjspace Jul 22, 2025

Uh oh!

ggetz Jul 22, 2025

Uh oh!

ggetz Jul 22, 2025

Uh oh!

jjspace Jul 22, 2025

Uh oh!

ggetz Jul 22, 2025

Uh oh!

jjspace Jul 22, 2025

Uh oh!

ggetz Jul 22, 2025

Uh oh!

ggetz Jul 22, 2025

Uh oh!

Uh oh!


		//const viewer = new Cesium.Viewer("cesiumContainer");

		console.log("Sandcastle loaded");


		background-image: var(--_rings), var(--_gradient);

		/* TODO: these should pull from the stratakit directly somehow eventually */

Sandcastle using Stratakit #12731

Are you sure you want to change the base?

Sandcastle using Stratakit #12731

Uh oh!

Conversation

jjspace commented Jul 11, 2025

Description

What this PR does

What this PR does NOT do

Issue number and link

Testing plan

Author checklist

Uh oh!

github-actions bot commented Jul 11, 2025

Uh oh!

ggetz commented Jul 22, 2025

Uh oh!

ggetz left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!