CSS tweaks, add another example of webworkers with comlink

README.md

@@ -37,7 +37,7 @@ const codemirrorExtensions = [
 
 ## Examples
 
-These examples are all built on Glitch as a static site that uses [Vite](https://vitejs.dev/) to roll up sessionzone's dependencies on React and Codemirror.
+These examples are all built on Glitch as a static site that uses [Vite](https://vitejs.dev/) to roll up sketchzone's dependencies on React and Codemirror.
 
 - [Simplest possible example](https://glitch.com/edit/#!/sketchzone-simplest?path=index.js) - deceptively simple enough, uses defaults for everything. Loading a document just displays its length.
 - [Simple example](https://glitch.com/edit/#!/sketchzone-simple?path=index.js) - a better example of a basic configuration, which uses a button to show off how tabs maintain their own inspectors.
@@ -47,10 +47,13 @@ By returning an object containing 1-4 functions from the `createAndMountInspecto
 
 - [Using unmount() to always unload](https://glitch.com/edit/#!/sketchzone-always-unload?path=index.jsx) - the `unmount()` function is called whenever you are about to stop viewing an inspector, and in this example, we return a truthy value from the unmount() function so that sketchzone will terminate and destroy the inspector.
 - [Using destroy() to reclaim resources](https://glitch.com/edit/#!/sketchzone-cleanup?path=index.jsx) - if an inspector uses resources that need to be reclaimed when the tab is closed for good, that can be done in the `destroy()` function.
-- [Using reload() to stick around](https://glitch.com/edit/#!/sketchzone-reload?path=index.jsx) - the default behavior is to unmount, destroy, and re-initialize an inspector whenever the reload button is pressed. It's possible to keep the inspector around by defining `reload()`
+- [Using reload() to stick around](https://glitch.com/edit/#!/sketchzone-reload?path=index.jsx) - the default behavior is to unmount, destroy, and re-initialize an inspector whenever the reload button is pressed. It's possible to keep the inspector around by defining `reload()`.
 - [Using unmount() and remount() to pause](https://glitch.com/edit/#!/sketchzone-pausing?path=index.jsx) - having `unmount()` return `true` can keep tabs that aren't open from consuming resources, but if you want to do a little bit more work to tell the inspector how to suspend itself when it's unmounted, and then resume when it's remounted, it's possible to conserve resources without deleting all the user's state.
 
-All those examples have the same index.html file. It's also possible to change the index.html file to add custom fonts and styles. That's demonstrated on [github here](https://github.com/robsimmons/sketchzone-disco) and [deployed here](https://sketchzone.disco.typesafety.net/) with [Disco](https://letsdisco.dev/).
+Some more advanced examples:
+
+- All the above examples have the same index.html file. It's also possible to change the index.html file to add custom fonts and styles. That's demonstrated on [github here](https://github.com/robsimmons/sketchzone-disco) and [deployed here](https://sketchzone.disco.typesafety.net/) with [Disco](https://letsdisco.dev/).
+- You can [use Google's comlink package to facilitate adding a webworker to each inspector](https://glitch.com/edit/#!/sketchzone-webworker?path=index.jsx). (This may be a little bit more complicated than it needs to be: certain operations I expected to be able to do with promises in comlink required the use of callbacks.)
 
 # Structure
 
@@ -107,7 +110,7 @@ body {
   --sketchzone-ui-font-family: 'Fira Sans Condensed', sans-serif;
   --sketchzone-line-numbers-font-family: var(--sketchzone-mono);
   --sketchzone-radius: 8px;
-  --sketchzone-button-size: 2rem;
+  --sketchzone-button-height: 2rem;
 }
 ```
 
@@ -137,7 +140,7 @@ Vertical height is determined by the following:
 ------------------------------------ begin main rectangle
 | --sketchzone-small-padding
 ------------------------------------
-| --sketchzone-button-size
+| --sketchzone-button-height
 | Tab switcher buttons & Logo
 ------------------------------------
 | --sketchzone-tab-bottom-padding

css/sketchzone.css

@@ -6,7 +6,7 @@ body {
   --sketchzone-line-numbers-font-family: var(--sketchzone-mono-font-family);
 
   --sketchzone-radius: 8px;
-  --sketchzone-button-size: 2rem;
+  --sketchzone-button-height: 2rem;
 
   --sketchzone-outer-padding: 12px;
   --sketchzone-small-padding: 8px;
@@ -20,7 +20,12 @@ body {
 
   --sketchzone-sketch-height: calc(
     100vh - 2 * var(--sketchzone-outer-padding) - 2 * var(--sketchzone-small-padding) -
-      var(--sketchzone-button-size) - var(--sketchzone-tab-bottom-padding)
+      var(--sketchzone-button-height) - var(--sketchzone-tab-bottom-padding)
+  );
+
+  --sketchzone-inspector-height: calc(
+    var(--sketchzone-sketch-height) - var(--sketchzone-button-height) -
+      var(--sketchzone-small-padding)
   );
 }
 @media (max-width: 650px) {
@@ -149,7 +154,7 @@ main {
   width: 100%;
   min-height: 100%;
   display: grid;
-  grid-template-columns: calc(var(--sketchzone-button-size) + 3 * var(--sketchzone-small-padding)) 1fr;
+  grid-template-columns: calc(var(--sketchzone-button-height) + 3 * var(--sketchzone-small-padding)) 1fr;
 }
 
 /* Buttons
@@ -161,7 +166,7 @@ main {
 button {
   border: 0;
   border-radius: var(--sketchzone-radius);
-  height: var(--sketchzone-button-size);
+  height: var(--sketchzone-button-height);
   padding-inline: var(--sketchzone-small-padding);
   background-color: var(--sketchzone-2-background);
   color: var(--sketchzone-2-text);
@@ -197,8 +202,8 @@ button:hover {
   gap: var(--sketchzone-small-padding);
 }
 .sketchzone-subconfig button {
-  width: calc(var(--sketchzone-button-size) + var(--sketchzone-small-padding));
-  height: calc(var(--sketchzone-button-size) + var(--sketchzone-small-padding));
+  width: calc(var(--sketchzone-button-height) + var(--sketchzone-small-padding));
+  height: calc(var(--sketchzone-button-height) + var(--sketchzone-small-padding));
 }
 .sketchzone-subconfig svg {
   margin: auto;
@@ -349,17 +354,24 @@ button:hover {
 }
 
 /* Sketch Part 3: Inspector */
+#sketchzone-inspector-root {
+  height: var(--sketchzone-sketch-height);
+  display: grid;
+  grid-template-rows: var(--sketchzone-button-height) var(--sketchzone-sketch-height);
+  gap: var(--sketchzone-small-padding);
+}
+
 #sketchzone-inspector-controller {
   background-color: var(--sketchzone-1-background);
-  height: var(--sketchzone-button-size);
+  height: var(--sketchzone-button-height);
   box-shadow: var(--sketchzone-box-shadow);
   border-radius: var(--sketchzone-radius);
   display: flex;
   flex-direction: row;
   overflow-x: hidden;
 }
 #sketchzone-inspector-contents {
-  height: calc(var(--sketchzone-sketch-height) - var(--sketchzone-button-size));
+  height: var(--sketchzone-inspector-height);
   display: grid;
 }
 
@@ -385,7 +397,7 @@ button:hover {
     grid-template-areas: 'viewer' 'editor';
     gap: var(--sketchzone-small-padding);
     --sketchzone-text-editor-height: calc(
-      var(--sketchzone-sketch-height) - var(--sketchzone-button-size) -
+      var(--sketchzone-sketch-height) - var(--sketchzone-button-height) -
         var(--sketchzone-small-padding)
     );
   }
@@ -464,15 +476,16 @@ button:hover {
   background: transparent;
   width: 2rem;
   border: none;
-  color: var(--sessionzone-1-text);
+  color: var(--sketchzone-1-text);
 }
 
 /* Some default inspector styling */
 .sketchzone-rounded-inspector {
-  margin-top: var(--sketchzone-small-padding);
+  height: var(--sketchzone-inspector-height);
   border-radius: var(--sketchzone-radius);
   box-shadow: var(--sketchzone-box-shadow);
   background-color: var(--sketchzone-1-background);
   color: var(--sketchzone-1-text);
   padding: var(--sketchzone-large-padding);
+  overflow: scroll;
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sketchzone",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "type": "module",
   "main": "lib/main.js",
   "types": "lib/main.d.ts",

src/components/InspectorController.tsx

@@ -21,6 +21,7 @@ export default function InspectorController({ state, iconSize, onLoad, documentN
             'active-sketch-is-showing-inspector';
           onLoad();
         }}
+        className={state === 'modified' ? 'sketchzone-inspector-load-modified' : undefined}
       >
         <EnterIcon width={iconSize} height={iconSize} />
         {state === 'unloaded'