Improves undo/redo, fixes pinching and multitouch

components/status-bar.tsx

@@ -1,48 +1,62 @@
-import { useStateDesigner } from "@state-designer/react"
-import state from "state"
-import styled from "styles"
-import { useRef } from "react"
+import { useStateDesigner } from '@state-designer/react'
+import state from 'state'
+import styled from 'styles'
+import { useRef } from 'react'
 
 export default function StatusBar() {
   const local = useStateDesigner(state)
   const { count, time } = useRenderCount()
 
-  const active = local.active.slice(1).map((s) => s.split("root.")[1])
+  const active = local.active.slice(1).map((s) => s.split('root.')[1])
   const log = local.log[0]
 
   return (
-    <StatusBarContainer>
-      <Section>{active.join(" | ")}</Section>
+    <StatusBarContainer
+      size={{
+        '@sm': 'small',
+      }}
+    >
+      <Section>{active.join(' | ')}</Section>
       <Section>| {log}</Section>
-      <Section title="Renders | Time">
-        {count} | {time.toString().padStart(3, "0")}
-      </Section>
+      {/* <Section
+        title="Renders | Time"
+      >
+        {count} | {time.toString().padStart(3, '0')}
+      </Section> */}
     </StatusBarContainer>
   )
 }
 
-const StatusBarContainer = styled("div", {
-  position: "absolute",
+const StatusBarContainer = styled('div', {
+  position: 'absolute',
   bottom: 0,
   left: 0,
-  width: "100%",
+  width: '100%',
   height: 40,
-  userSelect: "none",
-  borderTop: "1px solid black",
-  gridArea: "status",
-  display: "grid",
-  gridTemplateColumns: "auto 1fr auto",
-  alignItems: "center",
-  backgroundColor: "white",
+  userSelect: 'none',
+  borderTop: '1px solid black',
+  gridArea: 'status',
+  display: 'grid',
+  gridTemplateColumns: 'auto 1fr auto',
+  alignItems: 'center',
+  backgroundColor: 'white',
   gap: 8,
-  fontSize: "$1",
-  padding: "0 16px",
+  fontSize: '$0',
+  padding: '0 16px',
   zIndex: 200,
+
+  variants: {
+    size: {
+      small: {
+        fontSize: '$1',
+      },
+    },
+  },
 })
 
-const Section = styled("div", {
-  whiteSpace: "nowrap",
-  overflow: "hidden",
+const Section = styled('div', {
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
 })
 
 function useRenderCount() {