Adapt demo to new element positions, fix some spacing and z-index bugs

src/_unstable/Tutorial.tsx

@@ -28,12 +28,18 @@ const intro = (
         <b>Use a large screen. </b>
         On smaller screens you will likely have to remove some UI elements from the screen.
       </li>
-      <li>
+      {/* <li>
         <b>Switch to one of the preset layouts (TODO)</b>
+      </li> */}
+      <li>
+        <b>Mouse is required for some interactions</b>. Other types of input will be added at a later point to simplify development.
       </li>
       <li>
-        <b>Mouse is required for some interactions</b>
-        Other types of input will be added at a later point to simplify development.
+        For now, <b>a P3 capable monitor</b> is required to properly display the
+        `oklch` color pickers, but the UI does not validate this yet. You can use
+        the external <a target="_blank" href="https://oklch.com/">"online picker" link</a> below
+        color pickers, and enable the "Show P3" toggle, which will then indicate
+        whether your current environment (monitor + OS/software settings) supports P3.
       </li>
     </ul>
     {/* <h2>Focus of the online demo</h2>
@@ -51,13 +57,15 @@ const intro = (
     </p> */}
     <h2>Things to be aware of / watch out for</h2>
     <ul>
-      <li>
+      {/* <li>
         While the shown data should be accurate, sometimes more specific rules
         are missed, causing it to not show the most specific value.
-      </li>
+      </li> */}
       <li>
         The quality and mostly the quantity of CSS on a page has a big impact on
-        the quality of the experience.
+        the quality of the experience. 
+        The <a href="https://inwerpsel.github.io/use-theme-editor/demo/halfmoon/docs/forms">halfmoon demo</a> currently
+        has the most complete and glitch free experience.
       </li>
       <li>You can display data that does not use CSS variables, but can't modify those values yet.</li>
       <li>
@@ -91,7 +99,6 @@ let activeStepIndex = 0;
 function openDrawerIfNeeded() {
     lastEl = null;
     setTimeout(() => {
-        console.log(lastEl);
         if (lastEl === null) {
             openDrawer(true);
         }
@@ -193,12 +200,17 @@ export function Tutorial({ el, children, tasks = [] }: {el: any, children: any,
     openDrawer = setDrawerOpen;
 
     const ref = useRef();
+    const buttonRef = useRef();
     const isActive = el === useActiveTutorialElement();
     useEffect(() => {
         if (isActive) lastEl = el;
         ref.current?.scrollIntoView({behavior: 'smooth'});
     }, [isActive]);
 
+    useEffect(() => {
+      buttonRef?.current?.focus();
+    }, [isActive]);
+
     if (!isActive) {
         return null;
     }
@@ -231,7 +243,7 @@ export function Tutorial({ el, children, tasks = [] }: {el: any, children: any,
             {checkedTasks.map(([label, done]) => <CheckTask {...{label, done}} />)}
         </ul>
         <PrevButton />
-        <button disabled={!doneAll} onClick={nextStep}>Next</button>
+        <button ref={buttonRef} disabled={!doneAll} onClick={nextStep}>Next</button>
       </div>
     );
 }

src/_unstable/courses.ts

@@ -30,7 +30,7 @@ export function makeCourses() {
                 ResizableFrame,
                 Inspector,
                 ScreenSwitcher,
-                FrameSizeSettings,
+                // FrameSizeSettings,
                 RemoveAnnoyingPrefix,
                 FrameScaleSlider,
             ],

src/components/ui/HistoryStash.jsx

@@ -15,27 +15,53 @@ export function HistoryStash() {
 
     const stringied = useMemo(() => JSON.stringify(lastAlternate.map(a=>[...a.entries()].map(([k]) => k)), null, 2), [lastAlternate])
 
-    return <div
-      className="flex-row" 
-      style={{
-        background: `rgba(26, 217, 210, ${Math.min(lastAlternate.length / 20, 1)})`,
-      }}
-      >
-        <button
-          title={'Apply/create stash:\n' + stringied}
-          onClick={replayAlternate}
-          style={{textAlign: 'left'}}
-          disabled={empty && historyOffset === 0}
+    return (
+      <Fragment>
+        <div
+          className="flex-row"
+          style={{
+            background: `rgba(26, 217, 210, ${Math.min(
+              lastAlternate.length / 20,
+              1
+            )})`,
+          }}
         >
-          {content}
-        </button>
-        {!empty && <Clear />}
-        <Tutorial el={HistoryStash}>
-          If you travel back and discard future, it's still kept here.
-
-          This allows you to splice in a new edit earlier into your history and just re-apply everything after it.
+          <button
+            title={'Apply/create stash:\n' + stringied}
+            onClick={replayAlternate}
+            style={{ textAlign: 'left' }}
+            disabled={empty && historyOffset === 0}
+          >
+            {content}
+          </button>
+          {!empty && <Clear />}
+        </div>
+        <Tutorial
+          el={HistoryStash}
+          tasks={[
+            () => {
+              const { pins } = useContext(HistoryNavigateContext);
+              return [
+                'Remove all pins',
+                pins.size === 0,
+              ];
+            },
+            () => {
+              const { historyOffset } = useContext(HistoryNavigateContext);
+              return [
+                'Navigate back',
+                historyOffset !== 0 || !empty,
+              ];
+            },
+            () => ['Add future actions to the stash', !empty]
+          ]}
+        >
+          If you travel back and discard future, it's still kept here. This
+          allows you to splice in a new edit earlier into your history and just
+          re-apply everything after it.
         </Tutorial>
-    </div>
+      </Fragment>
+    );
 }
 
 function Clear() {

src/components/ui/HistoryVisualization.jsx

@@ -251,7 +251,7 @@ export function NoteBox() {
         style={{
           background: 'white',
           border: '2px solid black',
-          fontSize: '2rem',
+          fontSize: '1.2rem',
           maxWidth: 800,
           // wordWrap: 'break-word',
         }}
@@ -264,7 +264,7 @@ export function NoteBox() {
     );
   }
 
-  return <textarea style={{minHeight: 160}} autoFocus onBlur={() => {setReadonly(true)}} value={note} onInput={e => setNote(e.target.value, { debounceTime: Infinity, skipHistory: true })}>
+  return <textarea style={{fontSize: '1.2rem', minHeight: 160}} autoFocus onBlur={() => {setReadonly(true)}} value={note} onInput={e => setNote(e.target.value, { debounceTime: Infinity, skipHistory: true })}>
 
   </textarea>
 }

src/components/ui/Palette.tsx

@@ -423,7 +423,7 @@ export function Palette() {
         <Tutorial el={Palette} tasks={[
           () => [`Add 2 items to the palette (${Math.min(2, values.length)}/2)`, values.length > 1],
         ]}>
-          You can drop values here and drag them onto the page and UI elements.
+          You can drop values from almost anywhere here, and drag them onto the page and UI elements later.
           </Tutorial>
       </div>
     );

src/css/movable.scss

@@ -90,7 +90,7 @@ $area-speed: .2s;
   > * {
     background-color: rgb(201, 190, 190);
   }
-  z-index: 10001;
+  z-index: 10002;
 
   .area-dropzone {
     transition: width, height $area-speed ease-in;
@@ -101,6 +101,10 @@ $area-speed: .2s;
   }
 }
 
+#area-left {
+  z-index: 10001;
+}
+
 #area-bottom, #area-bottom-reverse {
   flex-grow: 1;
 }

src/style.scss

@@ -632,9 +632,9 @@ button {
     left: 100%;
   }
 
-  // #area-right & {
-  //   right: 100%;
-  // }
+  #area-bottom &, #area-bottom-reverse & {
+    bottom: 100%;
+  }
 
   // #drawer &, #area-left &, #area-left-inner &, #area-right & {
   //   bottom: 100%;