skema-core 0.1.1 → 0.1.2

package/README.md

@@ -1,6 +1,15 @@
-# Skema
-
-A drawing-based website development tool that transforms how you annotate and communicate design changes.
+<p align="center">
+  <picture>
+    <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/petersenmatthew/skema/main/assets/logo-dark.svg">
+    <img src="https://raw.githubusercontent.com/petersenmatthew/skema/main/assets/logo-light.svg" alt="Skema" width="400">
+  </picture>
+</p>
+
+<p align="center">
+  A drawing-based website development tool that transforms how you annotate and communicate design changes.
+</p>
+
+---
 
 ## Overview
 

package/dist/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var react = require('react');
 var tldraw = require('tldraw');
 require('tldraw/tldraw.css');
+var framerMotion = require('framer-motion');
 var jsxRuntime = require('react/jsx-runtime');
 
 // src/components/Skema.tsx
@@ -882,7 +883,43 @@ function extractTextFromShapes(shapes) {
   }
   return textContent.filter(Boolean).join("\n");
 }
-var SelectIcon = ({ isSelected }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "42", height: "42", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+var SLogoIcon = ({ size = 32 }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 166 161", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      d: "M77.0782 5.17419C80.4699 2.21068 85.5301 2.21067 88.9218 5.17419L109.929 23.529C111.161 24.6057 112.663 25.3261 114.274 25.6126L141.769 30.5023C146.225 31.2947 149.399 35.2725 149.183 39.7929L147.86 67.4755C147.782 69.1226 148.157 70.7596 148.945 72.2079L162.203 96.5644C164.372 100.55 163.236 105.527 159.551 108.175L136.957 124.416C135.623 125.375 134.577 126.681 133.932 128.193L123.03 153.753C121.26 157.902 116.692 160.1 112.346 158.894L85.4054 151.422C83.8315 150.985 82.1685 150.985 80.5946 151.422L53.6541 158.894C49.3075 160.1 44.7399 157.902 42.9702 153.753L32.0681 128.193C31.4234 126.681 30.3771 125.375 29.0427 124.416L6.4487 108.175C2.76426 105.527 1.62755 100.55 3.79688 96.5644L17.0547 72.2079C17.8431 70.7596 18.2184 69.1226 18.1397 67.4755L16.8169 39.7929C16.6009 35.2725 19.7752 31.2947 24.2308 30.5023L51.7255 25.6126C53.3366 25.3261 54.8392 24.6057 56.0714 23.529L77.0782 5.17419Z",
+      fill: "#FF6800"
+    }
+  ),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      d: "M65.0888 64.1092C65.0888 68.461 73.1316 69.0511 83.5428 69.7887C102.046 71.1901 128.049 73.1078 128 97.9645C128 126.288 106.289 133 83 133C59.7599 132.926 40.4672 128.722 38.0001 97.9645H65.0888C68.0494 105.635 74.9079 107.627 83 107.627C91.0428 107.627 100.911 105.635 100.911 97.9645C100.911 93.6128 92.8684 92.9489 82.4572 92.2113C63.954 90.8099 37.9507 88.8922 38.0001 64.1092C38.0001 35.7858 59.7106 29 83 29C106.24 29.2213 125.533 33.1305 128 64.1092H100.911C97.9506 56.2908 91.0921 54.4468 83 54.4468C74.9572 54.4468 65.0888 56.217 65.0888 64.1092Z",
+      fill: "white"
+    }
+  )
+] });
+var ChevronLeftIcon = ({ size = 24 }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx(
+  "path",
+  {
+    d: "M15 18L9 12L15 6",
+    stroke: "#9CA3AF",
+    strokeWidth: "2.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+) });
+var ChevronRightIcon = ({ size = 24 }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx(
+  "path",
+  {
+    d: "M9 6L15 12L9 18",
+    stroke: "#9CA3AF",
+    strokeWidth: "2.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+) });
+var SelectIcon = ({ isSelected }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "30", height: "30", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
   /* @__PURE__ */ jsxRuntime.jsx(
     "path",
     {
@@ -899,7 +936,7 @@ var SelectIcon = ({ isSelected }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { wi
     }
   )
 ] });
-var DrawIcon = ({ isSelected }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "42", height: "42", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+var DrawIcon = ({ isSelected }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "30", height: "30", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
   /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "25", height: "25", rx: "2", fill: isSelected ? "#00C851" : "#00C851", opacity: isSelected ? 1 : 0.7 }),
   /* @__PURE__ */ jsxRuntime.jsx("g", { transform: "translate(12.5, 12.5) scale(1.4) translate(-12.5, -12.5)", children: /* @__PURE__ */ jsxRuntime.jsx(
     "path",
@@ -911,7 +948,7 @@ var DrawIcon = ({ isSelected }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { widt
     }
   ) })
 ] });
-var LassoIcon = ({ isSelected }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "42", height: "42", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+var LassoIcon = ({ isSelected }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "30", height: "30", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
   /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "25", height: "25", rx: "12.5", fill: isSelected ? "#2C7FFF" : "#2C7FFF", opacity: isSelected ? 1 : 0.7 }),
   /* @__PURE__ */ jsxRuntime.jsx("g", { transform: "translate(12.5, 12.5) scale(1.4) translate(-12.5, -12.5)", children: /* @__PURE__ */ jsxRuntime.jsx(
     "path",
@@ -923,7 +960,7 @@ var LassoIcon = ({ isSelected }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { wid
     }
   ) })
 ] });
-var EraseIcon = ({ isSelected }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "50", height: "42", viewBox: "0 0 30 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+var EraseIcon = ({ isSelected }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "36", height: "30", viewBox: "0 0 30 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
   /* @__PURE__ */ jsxRuntime.jsx(
     "path",
     {
@@ -937,7 +974,7 @@ var EraseIcon = ({ isSelected }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { wid
     /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "-2", y1: "-3", x2: "-2", y2: "3", stroke: "white", strokeWidth: "1.5" })
   ] }) })
 ] });
-var ShapesIcon = ({ isSelected }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "42", height: "42", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+var ShapesIcon = ({ isSelected }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "30", height: "30", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
   /* @__PURE__ */ jsxRuntime.jsx(
     "path",
     {
@@ -1140,46 +1177,285 @@ var ShapePicker = ({ isOpen, onClose, onSelectShape, anchorRef }) => {
     }
   );
 };
-var ToolbarButton = ({ onClick, isSelected, icon, label, buttonRef }) => {
+var TOOL_COUNT = 4;
+var EXIT_DURATION = 0.12;
+var EXIT_STAGGER = 0.01;
+var smoothEasing = [0.4, 0, 0.2, 1];
+var toolVariants = {
+  hidden: {
+    opacity: 0,
+    scale: 0.8,
+    width: 0,
+    marginRight: -6
+  },
+  visible: (i) => ({
+    opacity: 1,
+    scale: 1,
+    width: 40,
+    marginRight: 0,
+    transition: {
+      opacity: { duration: 0.15, delay: i * 0.04 },
+      scale: { type: "spring", stiffness: 400, damping: 25, delay: i * 0.04 },
+      width: { type: "spring", stiffness: 400, damping: 30, delay: i * 0.03 },
+      marginRight: { duration: 0.1, delay: i * 0.03 }
+    }
+  }),
+  exit: (i) => ({
+    opacity: 0,
+    scale: 0.8,
+    width: 0,
+    marginRight: -6,
+    transition: {
+      opacity: { duration: 0.06, ease: "easeOut" },
+      scale: { duration: EXIT_DURATION, ease: smoothEasing },
+      width: { duration: EXIT_DURATION, ease: smoothEasing, delay: EXIT_STAGGER * (TOOL_COUNT - 1 - i) },
+      marginRight: { duration: EXIT_DURATION, ease: smoothEasing, delay: EXIT_STAGGER * (TOOL_COUNT - 1 - i) }
+    }
+  })
+};
+var chevronVariants = {
+  hidden: {
+    opacity: 0,
+    scale: 0.8,
+    width: 0
+  },
+  visible: {
+    opacity: 0.6,
+    scale: 1,
+    width: 28,
+    transition: {
+      opacity: { delay: 0.1, duration: 0.1 },
+      scale: { delay: 0.1, type: "spring", stiffness: 500, damping: 30 },
+      width: { delay: 0.08, duration: 0.12, ease: "easeOut" }
+    }
+  },
+  exit: {
+    opacity: 0,
+    scale: 0.8,
+    width: 0,
+    transition: {
+      opacity: { duration: 0.06 },
+      scale: { duration: 0.08 },
+      width: { duration: 0.1, ease: smoothEasing }
+    }
+  }
+};
+var ToolbarButton = ({
+  onClick,
+  isSelected,
+  icon,
+  label,
+  buttonRef,
+  index = 0
+}) => {
   const handleClick = (e) => {
     e.preventDefault();
     e.stopPropagation();
     onClick();
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "button",
+    framerMotion.motion.button,
     {
       ref: buttonRef,
+      custom: index,
+      variants: toolVariants,
+      initial: "hidden",
+      animate: "visible",
+      exit: "exit",
       onClick: handleClick,
       title: label,
       type: "button",
+      whileHover: { scale: 1.05 },
+      whileTap: { scale: 0.95 },
       style: {
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
-        width: 56,
-        height: 56,
+        height: 40,
+        minWidth: 0,
         border: "none",
-        borderRadius: 11,
+        borderRadius: 8,
         backgroundColor: isSelected ? "rgba(255,255,255,0.15)" : "transparent",
         cursor: "pointer",
-        transition: "background-color 0.15s ease",
-        pointerEvents: "auto"
+        pointerEvents: "auto",
+        overflow: "hidden",
+        flexShrink: 0
       },
-      children: icon
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        framerMotion.motion.span,
+        {
+          style: { display: "flex", alignItems: "center", justifyContent: "center" },
+          initial: { opacity: 0, scale: 0.8 },
+          animate: { opacity: 1, scale: 1 },
+          exit: { opacity: 0, scale: 0.8 },
+          transition: { duration: 0.12 },
+          children: icon
+        }
+      )
     }
   );
 };
-var SkemaToolbar = () => {
+var LogoShapesButton = ({
+  isExpanded,
+  isHovered,
+  isSelected,
+  onClick,
+  onShapesClick,
+  onMouseEnter,
+  onMouseLeave,
+  buttonRef
+}) => {
+  const handleClick = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (isExpanded) {
+      onShapesClick();
+    } else {
+      onClick();
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    framerMotion.motion.button,
+    {
+      ref: buttonRef,
+      onClick: handleClick,
+      onMouseEnter,
+      onMouseLeave,
+      title: isExpanded ? "Shapes (G)" : "Expand toolbar",
+      type: "button",
+      whileHover: { scale: 1.08 },
+      whileTap: { scale: 0.95 },
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: 40,
+        height: 40,
+        border: "none",
+        borderRadius: 8,
+        backgroundColor: isSelected ? "rgba(255,255,255,0.15)" : "transparent",
+        cursor: "pointer",
+        pointerEvents: "auto",
+        position: "relative"
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "popLayout", children: isExpanded ? /* @__PURE__ */ jsxRuntime.jsx(
+        framerMotion.motion.div,
+        {
+          initial: { opacity: 0, scale: 0.8 },
+          animate: { opacity: 1, scale: 1 },
+          exit: { opacity: 0, scale: 0.85 },
+          transition: {
+            type: "spring",
+            stiffness: 500,
+            damping: 30,
+            opacity: { duration: 0.08 }
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(ShapesIcon, { isSelected })
+        },
+        "shapes"
+      ) : isHovered ? /* @__PURE__ */ jsxRuntime.jsx(
+        framerMotion.motion.div,
+        {
+          initial: { opacity: 0, x: -3 },
+          animate: { opacity: 1, x: 0 },
+          exit: { opacity: 0, x: 3 },
+          transition: { duration: 0.08, ease: "easeOut" },
+          children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon, { size: 20 })
+        },
+        "chevron"
+      ) : /* @__PURE__ */ jsxRuntime.jsx(
+        framerMotion.motion.div,
+        {
+          initial: { opacity: 0, scale: 0.9 },
+          animate: { opacity: 1, scale: 1 },
+          exit: { opacity: 0, scale: 0.85 },
+          transition: {
+            type: "spring",
+            stiffness: 500,
+            damping: 30,
+            opacity: { duration: 0.06 }
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(SLogoIcon, { size: 32 })
+        },
+        "s"
+      ) })
+    }
+  );
+};
+var CollapseButton = ({ onClick }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    framerMotion.motion.button,
+    {
+      variants: chevronVariants,
+      initial: "hidden",
+      animate: "visible",
+      exit: "exit",
+      onClick: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onClick();
+      },
+      title: "Collapse toolbar",
+      type: "button",
+      whileHover: { opacity: 1, scale: 1.1 },
+      whileTap: { scale: 0.9 },
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        height: 40,
+        minWidth: 0,
+        border: "none",
+        borderRadius: 6,
+        backgroundColor: "transparent",
+        cursor: "pointer",
+        pointerEvents: "auto",
+        marginLeft: 2,
+        overflow: "hidden",
+        flexShrink: 0
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        framerMotion.motion.span,
+        {
+          style: { display: "flex", alignItems: "center", justifyContent: "center" },
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          exit: { opacity: 0 },
+          transition: { duration: 0.1 },
+          children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon, { size: 20 })
+        }
+      )
+    }
+  );
+};
+var SkemaToolbar = ({ onExpandedChange, onStylePanelChange }) => {
   const editor = tldraw.useEditor();
   const tools = tldraw.useTools();
   const shapesButtonRef = react.useRef(null);
+  const [isExpanded, setIsExpanded] = react.useState(false);
+  const [isLogoHovered, setIsLogoHovered] = react.useState(false);
   const [isShapePickerOpen, setIsShapePickerOpen] = react.useState(false);
+  const [isStylePanelOpen, setIsStylePanelOpen] = react.useState(false);
   const isSelectSelected = tldraw.useIsToolSelected(tools["select"]);
   const isDrawSelected = tldraw.useIsToolSelected(tools["draw"]);
   const isLassoSelected = tldraw.useIsToolSelected(tools["lasso-select"]);
   const isEraseSelected = tldraw.useIsToolSelected(tools["eraser"]);
   const isGeoSelected = tldraw.useIsToolSelected(tools["geo"]);
+  const handleExpand = (expanded) => {
+    setIsExpanded(expanded);
+    onExpandedChange?.(expanded);
+    if (!expanded) {
+      setIsStylePanelOpen(false);
+      onStylePanelChange?.(false);
+    }
+  };
+  const handleLogoClick = () => {
+    handleExpand(true);
+  };
+  const handleCollapse = () => {
+    handleExpand(false);
+    setIsShapePickerOpen(false);
+  };
   const handleShapesClick = () => {
     setIsShapePickerOpen((prev) => !prev);
   };
@@ -1189,73 +1465,103 @@ var SkemaToolbar = () => {
     setIsShapePickerOpen(false);
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
+    /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        "data-skema": "toolbar",
         style: {
           position: "absolute",
           bottom: 16,
-          left: "50%",
-          transform: "translateX(-50%)",
+          left: 0,
+          right: 0,
           display: "flex",
-          alignItems: "center",
-          gap: 11,
-          padding: "11px 17px",
-          backgroundColor: "white",
-          borderRadius: 36,
-          boxShadow: "0 2px 10px rgba(0,0,0,0.15)",
-          pointerEvents: "auto",
+          justifyContent: "center",
+          pointerEvents: "none",
           zIndex: 99999
         },
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            ToolbarButton,
-            {
-              onClick: () => editor.setCurrentTool("select"),
-              isSelected: isSelectSelected,
-              icon: /* @__PURE__ */ jsxRuntime.jsx(SelectIcon, { isSelected: isSelectSelected }),
-              label: "Select (S)"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            ToolbarButton,
-            {
-              onClick: () => editor.setCurrentTool("draw"),
-              isSelected: isDrawSelected,
-              icon: /* @__PURE__ */ jsxRuntime.jsx(DrawIcon, { isSelected: isDrawSelected }),
-              label: "Draw (D)"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            ToolbarButton,
-            {
-              onClick: () => editor.setCurrentTool("lasso-select"),
-              isSelected: isLassoSelected,
-              icon: /* @__PURE__ */ jsxRuntime.jsx(LassoIcon, { isSelected: isLassoSelected }),
-              label: "Lasso Select (L)"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            ToolbarButton,
-            {
-              onClick: () => editor.setCurrentTool("eraser"),
-              isSelected: isEraseSelected,
-              icon: /* @__PURE__ */ jsxRuntime.jsx(EraseIcon, { isSelected: isEraseSelected }),
-              label: "Eraser (E)"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            ToolbarButton,
-            {
-              onClick: handleShapesClick,
-              isSelected: isGeoSelected || isShapePickerOpen,
-              icon: /* @__PURE__ */ jsxRuntime.jsx(ShapesIcon, { isSelected: isGeoSelected || isShapePickerOpen }),
-              label: "Shapes (G)",
-              buttonRef: shapesButtonRef
-            }
-          )
-        ]
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          framerMotion.motion.div,
+          {
+            "data-skema": "toolbar",
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 6,
+              padding: "6px 12px",
+              backgroundColor: "white",
+              borderRadius: 28,
+              boxShadow: "0 2px 10px rgba(0,0,0,0.15)",
+              pointerEvents: "auto"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                LogoShapesButton,
+                {
+                  isExpanded,
+                  isHovered: isLogoHovered,
+                  isSelected: isGeoSelected || isShapePickerOpen,
+                  onClick: handleLogoClick,
+                  onShapesClick: handleShapesClick,
+                  onMouseEnter: () => setIsLogoHovered(true),
+                  onMouseLeave: () => setIsLogoHovered(false),
+                  buttonRef: shapesButtonRef
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "popLayout", children: isExpanded && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  ToolbarButton,
+                  {
+                    onClick: () => editor.setCurrentTool("select"),
+                    isSelected: isSelectSelected,
+                    icon: /* @__PURE__ */ jsxRuntime.jsx(SelectIcon, { isSelected: isSelectSelected }),
+                    label: "Select (S)",
+                    index: 0
+                  },
+                  "select"
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  ToolbarButton,
+                  {
+                    onClick: () => editor.setCurrentTool("draw"),
+                    isSelected: isDrawSelected,
+                    icon: /* @__PURE__ */ jsxRuntime.jsx(DrawIcon, { isSelected: isDrawSelected }),
+                    label: "Draw (D)",
+                    index: 1
+                  },
+                  "draw"
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  ToolbarButton,
+                  {
+                    onClick: () => editor.setCurrentTool("lasso-select"),
+                    isSelected: isLassoSelected,
+                    icon: /* @__PURE__ */ jsxRuntime.jsx(LassoIcon, { isSelected: isLassoSelected }),
+                    label: "Lasso Select (L)",
+                    index: 2
+                  },
+                  "lasso"
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  ToolbarButton,
+                  {
+                    onClick: () => editor.setCurrentTool("eraser"),
+                    isSelected: isEraseSelected,
+                    icon: /* @__PURE__ */ jsxRuntime.jsx(EraseIcon, { isSelected: isEraseSelected }),
+                    label: "Eraser (E)",
+                    index: 3
+                  },
+                  "erase"
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  CollapseButton,
+                  {
+                    onClick: handleCollapse
+                  },
+                  "collapse"
+                )
+              ] }) })
+            ]
+          }
+        )
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -2516,6 +2822,8 @@ var Skema = ({
   const [processingBoundingBox, setProcessingBoundingBox] = react.useState(null);
   const [scribbleToast, setScribbleToast] = react.useState(null);
   const [internalIsProcessing, setInternalIsProcessing] = react.useState(false);
+  const [isToolbarExpanded, setIsToolbarExpanded] = react.useState(false);
+  const [isStylePanelOpen, setIsStylePanelOpen] = react.useState(false);
   const annotationChangesRef = react.useRef(/* @__PURE__ */ new Map());
   const {
     state: daemonState,
@@ -3179,6 +3487,65 @@ var Skema = ({
       },
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("style", { children: skemaHiddenUiStyles }),
+        !isStylePanelOpen && /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+          .tlui-style-panel__wrapper,
+          .tlui-style-panel {
+            display: none !important;
+          }
+        ` }),
+        isStylePanelOpen && /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+          .tlui-style-panel__wrapper {
+            top: 68px !important;
+            right: 16px !important;
+          }
+        ` }),
+        isToolbarExpanded && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => setIsStylePanelOpen((prev) => !prev),
+            title: isStylePanelOpen ? "Hide style settings" : "Show style settings",
+            style: {
+              position: "fixed",
+              top: 16,
+              right: 16,
+              width: 44,
+              height: 44,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              backgroundColor: isStylePanelOpen ? "#FF6800" : "white",
+              border: "none",
+              borderRadius: 12,
+              boxShadow: "0 2px 10px rgba(0,0,0,0.15)",
+              cursor: "pointer",
+              pointerEvents: "auto",
+              zIndex: zIndex + 5,
+              transition: "all 0.2s ease"
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  d: "M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z",
+                  stroke: isStylePanelOpen ? "white" : "#6B7280",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  d: "M19.4 15C19.2669 15.3016 19.2272 15.6362 19.286 15.9606C19.3448 16.285 19.4995 16.5843 19.73 16.82L19.79 16.88C19.976 17.0657 20.1235 17.2863 20.2241 17.5291C20.3248 17.7719 20.3766 18.0322 20.3766 18.295C20.3766 18.5578 20.3248 18.8181 20.2241 19.0609C20.1235 19.3037 19.976 19.5243 19.79 19.71C19.6043 19.896 19.3837 20.0435 19.1409 20.1441C18.8981 20.2448 18.6378 20.2966 18.375 20.2966C18.1122 20.2966 17.8519 20.2448 17.6091 20.1441C17.3663 20.0435 17.1457 19.896 16.96 19.71L16.9 19.65C16.6643 19.4195 16.365 19.2648 16.0406 19.206C15.7162 19.1472 15.3816 19.1869 15.08 19.32C14.7842 19.4468 14.532 19.6572 14.3543 19.9255C14.1766 20.1938 14.0813 20.5082 14.08 20.83V21C14.08 21.5304 13.8693 22.0391 13.4942 22.4142C13.1191 22.7893 12.6104 23 12.08 23C11.5496 23 11.0409 22.7893 10.6658 22.4142C10.2907 22.0391 10.08 21.5304 10.08 21V20.91C10.0723 20.579 9.96512 20.258 9.77251 19.9887C9.5799 19.7194 9.31074 19.5143 9 19.4C8.69838 19.2669 8.36381 19.2272 8.03941 19.286C7.71502 19.3448 7.41568 19.4995 7.18 19.73L7.12 19.79C6.93425 19.976 6.71368 20.1235 6.47088 20.2241C6.22808 20.3248 5.96783 20.3766 5.705 20.3766C5.44217 20.3766 5.18192 20.3248 4.93912 20.2241C4.69632 20.1235 4.47575 19.976 4.29 19.79C4.10405 19.6043 3.95653 19.3837 3.85588 19.1409C3.75523 18.8981 3.70343 18.6378 3.70343 18.375C3.70343 18.1122 3.75523 17.8519 3.85588 17.6091C3.95653 17.3663 4.10405 17.1457 4.29 16.96L4.35 16.9C4.58054 16.6643 4.73519 16.365 4.794 16.0406C4.85282 15.7162 4.81312 15.3816 4.68 15.08C4.55324 14.7842 4.34276 14.532 4.07447 14.3543C3.80618 14.1766 3.49179 14.0813 3.17 14.08H3C2.46957 14.08 1.96086 13.8693 1.58579 13.4942C1.21071 13.1191 1 12.6104 1 12.08C1 11.5496 1.21071 11.0409 1.58579 10.6658C1.96086 10.2907 2.46957 10.08 3 10.08H3.09C3.42099 10.0723 3.742 9.96512 4.0113 9.77251C4.28059 9.5799 4.48572 9.31074 4.6 9C4.73312 8.69838 4.77282 8.36381 4.714 8.03941C4.65519 7.71502 4.50054 7.41568 4.27 7.18L4.21 7.12C4.02405 6.93425 3.87653 6.71368 3.77588 6.47088C3.67523 6.22808 3.62343 5.96783 3.62343 5.705C3.62343 5.44217 3.67523 5.18192 3.77588 4.93912C3.87653 4.69632 4.02405 4.47575 4.21 4.29C4.39575 4.10405 4.61632 3.95653 4.85912 3.85588C5.10192 3.75523 5.36217 3.70343 5.625 3.70343C5.88783 3.70343 6.14808 3.75523 6.39088 3.85588C6.63368 3.95653 6.85425 4.10405 7.04 4.29L7.1 4.35C7.33568 4.58054 7.63502 4.73519 7.95941 4.794C8.28381 4.85282 8.61838 4.81312 8.92 4.68H9C9.29577 4.55324 9.54802 4.34276 9.72569 4.07447C9.90337 3.80618 9.99872 3.49179 10 3.17V3C10 2.46957 10.2107 1.96086 10.5858 1.58579C10.9609 1.21071 11.4696 1 12 1C12.5304 1 13.0391 1.21071 13.4142 1.58579C13.7893 1.96086 14 2.46957 14 3V3.09C14.0013 3.41179 14.0966 3.72618 14.2743 3.99447C14.452 4.26276 14.7042 4.47324 15 4.6C15.3016 4.73312 15.6362 4.77282 15.9606 4.714C16.285 4.65519 16.5843 4.50054 16.82 4.27L16.88 4.21C17.0657 4.02405 17.2863 3.87653 17.5291 3.77588C17.7719 3.67523 18.0322 3.62343 18.295 3.62343C18.5578 3.62343 18.8181 3.67523 19.0609 3.77588C19.3037 3.87653 19.5243 4.02405 19.71 4.21C19.896 4.39575 20.0435 4.61632 20.1441 4.85912C20.2448 5.10192 20.2966 5.36217 20.2966 5.625C20.2966 5.88783 20.2448 6.14808 20.1441 6.39088C20.0435 6.63368 19.896 6.85425 19.71 7.04L19.65 7.1C19.4195 7.33568 19.2648 7.63502 19.206 7.95941C19.1472 8.28381 19.1869 8.61838 19.32 8.92V9C19.4468 9.29577 19.6572 9.54802 19.9255 9.72569C20.1938 9.90337 20.5082 9.99872 20.83 10H21C21.5304 10 22.0391 10.2107 22.4142 10.5858C22.7893 10.9609 23 11.4696 23 12C23 12.5304 22.7893 13.0391 22.4142 13.4142C22.0391 13.7893 21.5304 14 21 14H20.91C20.5882 14.0013 20.2738 14.0966 20.0055 14.2743C19.7372 14.452 19.5268 14.7042 19.4 15Z",
+                  stroke: isStylePanelOpen ? "white" : "#6B7280",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              )
+            ] })
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
@@ -3197,7 +3564,13 @@ var Skema = ({
                 hideUi: false,
                 inferDarkMode: false,
                 options: { maxPages: 1 },
-                children: /* @__PURE__ */ jsxRuntime.jsx(SkemaToolbar, {})
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  SkemaToolbar,
+                  {
+                    onExpandedChange: setIsToolbarExpanded,
+                    onStylePanelChange: setIsStylePanelOpen
+                  }
+                )
               }
             )
           }