@objectifthunes/whiteboard 0.2.1 → 0.2.3

package/dist/index.d.ts

@@ -213,7 +213,7 @@ export declare function Inline({ as, justify, className, ...props }: InlineProps
 
 declare interface InlineProps extends HTMLAttributes<HTMLElement> {
     as?: ElementType;
-    justify?: 'start' | 'between';
+    justify?: 'start' | 'between' | 'end';
 }
 
 export declare const Input: ForwardRefExoticComponent<InputProps & RefAttributes<HTMLInputElement>>;
@@ -278,13 +278,9 @@ export declare function MutedText({ as, size, className, ...props }: TypographyP
 
 declare type MutedTextSize = 'xs' | 'sm' | 'md';
 
-export declare function PageCard({ children }: {
-    children: ReactNode;
-}): JSX_2.Element;
+export declare function PageCard({ children, className, ...props }: HTMLAttributes<HTMLDivElement>): JSX_2.Element;
 
-export declare function PageShell({ children }: {
-    children: ReactNode;
-}): JSX_2.Element;
+export declare function PageShell({ children, className, ...props }: HTMLAttributes<HTMLElement>): JSX_2.Element;
 
 export declare function PageTitle({ as, className, ...props }: TypographyProps): ReactElement<any, string | JSXElementConstructor<any>>;
 

package/dist/index.js

@@ -97,10 +97,10 @@ function ue(e) {
 }
 function Ne(e, t, r = 60) {
   if (e.size === 0) return null;
-  let s = 1 / 0, i = 1 / 0, u = -1 / 0, w = -1 / 0;
+  let s = 1 / 0, a = 1 / 0, u = -1 / 0, w = -1 / 0;
   for (const v of e.values())
-    s = Math.min(s, v.x), i = Math.min(i, v.y), u = Math.max(u, v.x + v.width), w = Math.max(w, v.y + v.height);
-  const f = u - s + r * 2, m = w - i + r * 2, g = t.width || window.innerWidth, h = t.height || window.innerHeight, M = Math.min(g / f, h / m, 1.5), k = (s + u) / 2, _ = (i + w) / 2;
+    s = Math.min(s, v.x), a = Math.min(a, v.y), u = Math.max(u, v.x + v.width), w = Math.max(w, v.y + v.height);
+  const f = u - s + r * 2, m = w - a + r * 2, g = t.width || window.innerWidth, h = t.height || window.innerHeight, M = Math.min(g / f, h / m, 1.5), k = (s + u) / 2, _ = (a + w) / 2;
   return {
     scale: Math.min(3, Math.max(0.2, M)),
     offset: {
@@ -110,15 +110,15 @@ function Ne(e, t, r = 60) {
   };
 }
 function Ve(e, t, r = 40, s = 1.5) {
-  const i = t.width || window.innerWidth, u = t.height || window.innerHeight, w = Math.max(1, e.width), f = Math.max(1, e.height), m = Math.min(
-    (i - r * 2) / w,
+  const a = t.width || window.innerWidth, u = t.height || window.innerHeight, w = Math.max(1, e.width), f = Math.max(1, e.height), m = Math.min(
+    (a - r * 2) / w,
     (u - r * 2) / f,
     s
   ), g = Math.min(3, Math.max(0.2, m));
   return {
     scale: g,
     offset: {
-      x: i / 2 - (e.x + w / 2) * g,
+      x: a / 2 - (e.x + w / 2) * g,
       y: u / 2 - (e.y + f / 2) * g
     }
   };
@@ -137,7 +137,7 @@ const p = Xe((e, t) => ({
   setViewportSize: (r) => e({ viewportSize: r }),
   setSnapToGrid: (r) => e((s) => ({ snapToGrid: typeof r == "function" ? r(s.snapToGrid) : r })),
   register: (r, s) => {
-    t().panels.set(r, s), e((i) => ({ registryVersion: i.registryVersion + 1 }));
+    t().panels.set(r, s), e((a) => ({ registryVersion: a.registryVersion + 1 }));
   },
   unregister: (r) => {
     t().panels.delete(r), e((s) => ({ registryVersion: s.registryVersion + 1 }));
@@ -149,13 +149,13 @@ const p = Xe((e, t) => ({
     t().resetFns.delete(r);
   },
   fitToContent: () => {
-    const { panels: r, viewportSize: s } = t(), i = Ne(r, s);
-    i && e({ scale: i.scale, offset: i.offset });
+    const { panels: r, viewportSize: s } = t(), a = Ne(r, s);
+    a && e({ scale: a.scale, offset: a.offset });
   },
   focusPanel: (r, s) => {
-    const { viewportSize: i } = t(), u = Ve(
+    const { viewportSize: a } = t(), u = Ve(
       r,
-      i,
+      a,
       (s == null ? void 0 : s.padding) ?? 40,
       (s == null ? void 0 : s.maxScale) ?? 1.5
     );
@@ -164,7 +164,7 @@ const p = Xe((e, t) => ({
   resetWidgets: () => {
     for (const s of t().resetFns.values()) s();
     const r = (s = 0) => {
-      const { panels: i, viewportSize: u } = t(), w = Ne(i, u);
+      const { panels: a, viewportSize: u } = t(), w = Ne(a, u);
       if (w) {
         e({ scale: w.scale, offset: w.offset });
         return;
@@ -184,7 +184,7 @@ const p = Xe((e, t) => ({
   })
 }));
 function je({ extraActions: e }) {
-  const t = p((h) => h.scale), r = p((h) => h.viewportSize), s = p((h) => h.snapToGrid), i = p((h) => h.setScale), u = p((h) => h.setOffset), w = p((h) => h.setSnapToGrid), f = p((h) => h.fitToContent), m = p((h) => h.resetWidgets);
+  const t = p((h) => h.scale), r = p((h) => h.viewportSize), s = p((h) => h.snapToGrid), a = p((h) => h.setScale), u = p((h) => h.setOffset), w = p((h) => h.setSnapToGrid), f = p((h) => h.fitToContent), m = p((h) => h.resetWidgets);
   X(() => {
     s && window.dispatchEvent(new Event("whiteboard-snap-now"));
   }, [s]);
@@ -193,7 +193,7 @@ function je({ extraActions: e }) {
     u((P) => ({
       x: _ - (_ - P.x) * k,
       y: v - (v - P.y) * k
-    })), i(M);
+    })), a(M);
   };
   return /* @__PURE__ */ d(
     "div",
@@ -228,32 +228,32 @@ function je({ extraActions: e }) {
 }
 const ee = 200, te = 150, de = 40, xe = 1;
 function Ue({ loading: e = !1 }) {
-  p((a) => a.registryVersion);
-  const t = p((a) => a.offset), r = p((a) => a.scale), s = p((a) => a.viewportSize), i = p((a) => a.panels), u = p((a) => a.setOffset), w = p((a) => a.setScale), f = p((a) => a.focusPanel), m = S(null), g = S(!1), h = S(null), k = Array.from(i.entries()).filter(([, a]) => Number.isFinite(a.width) && Number.isFinite(a.height)), _ = k.map(([, a]) => a);
+  p((o) => o.registryVersion);
+  const t = p((o) => o.offset), r = p((o) => o.scale), s = p((o) => o.viewportSize), a = p((o) => o.panels), u = p((o) => o.setOffset), w = p((o) => o.setScale), f = p((o) => o.focusPanel), m = S(null), g = S(!1), h = S(null), k = Array.from(a.entries()).filter(([, o]) => Number.isFinite(o.width) && Number.isFinite(o.height)), _ = k.map(([, o]) => o);
   if (e || _.length === 0)
     return /* @__PURE__ */ n("div", { className: "minimap minimap--loading", style: { width: ee, height: te }, children: /* @__PURE__ */ n("div", { className: "minimap__loading", children: /* @__PURE__ */ n(fe, { size: 14, className: "icon-spin" }) }) });
   const v = s.width || window.innerWidth, P = s.height || window.innerHeight, L = v / r, B = P / r, $ = -t.x / r, V = -t.y / r;
   let F = 1 / 0, c = 1 / 0, R = -1 / 0, W = -1 / 0;
-  for (const a of _)
-    F = Math.min(F, a.x), c = Math.min(c, a.y), R = Math.max(R, a.x + a.width), W = Math.max(W, a.y + a.height);
+  for (const o of _)
+    F = Math.min(F, o.x), c = Math.min(c, o.y), R = Math.max(R, o.x + o.width), W = Math.max(W, o.y + o.height);
   F -= de, c -= de, R += de, W += de;
-  const C = Math.max(xe, R - F), O = Math.max(xe, W - c), z = Math.min(ee / C, te / O), E = C * z, U = O * z, Z = (ee - E) / 2, D = (te - U) / 2, q = (a) => Z + (a - F) * z, j = (a) => D + (a - c) * z, Q = (a, y) => {
+  const C = Math.max(xe, R - F), O = Math.max(xe, W - c), z = Math.min(ee / C, te / O), E = C * z, U = O * z, Z = (ee - E) / 2, D = (te - U) / 2, q = (o) => Z + (o - F) * z, j = (o) => D + (o - c) * z, Q = (o, y) => {
     if (!m.current) return;
-    const x = m.current.getBoundingClientRect(), G = Math.min(ee, Math.max(0, a - x.left)), A = Math.min(te, Math.max(0, y - x.top)), ae = Math.min(E + Z, Math.max(Z, G)), ie = Math.min(U + D, Math.max(D, A)), oe = (ae - Z) / z + F, ce = (ie - D) / z + c;
-    return { worldX: oe, worldY: ce };
-  }, K = (a, y, x) => {
+    const x = m.current.getBoundingClientRect(), G = Math.min(ee, Math.max(0, o - x.left)), A = Math.min(te, Math.max(0, y - x.top)), ae = Math.min(E + Z, Math.max(Z, G)), oe = Math.min(U + D, Math.max(D, A)), ie = (ae - Z) / z + F, ce = (oe - D) / z + c;
+    return { worldX: ie, worldY: ce };
+  }, K = (o, y, x) => {
     const G = Math.min(3, Math.max(0.2, x));
     w(G), u({
-      x: v / 2 - a * G,
+      x: v / 2 - o * G,
       y: P / 2 - y * G
     });
-  }, se = (a, y) => {
-    const x = Q(a, y);
+  }, se = (o, y) => {
+    const x = Q(o, y);
     x && K(x.worldX, x.worldY, r);
-  }, be = (a) => {
-    a.stopPropagation(), a.preventDefault(), g.current = !0, a.currentTarget.setPointerCapture(a.pointerId), se(a.clientX, a.clientY);
-  }, o = (a) => {
-    g.current && se(a.clientX, a.clientY);
+  }, be = (o) => {
+    o.stopPropagation(), o.preventDefault(), g.current = !0, o.currentTarget.setPointerCapture(o.pointerId), se(o.clientX, o.clientY);
+  }, i = (o) => {
+    g.current && se(o.clientX, o.clientY);
   }, b = () => {
     g.current = !1;
   };
@@ -262,14 +262,14 @@ function Ue({ loading: e = !1 }) {
     {
       ref: m,
       onPointerDown: be,
-      onPointerMove: o,
+      onPointerMove: i,
       onPointerUp: b,
       onPointerCancel: b,
-      onWheel: (a) => {
-        a.preventDefault(), a.stopPropagation();
-        const y = Q(a.clientX, a.clientY);
+      onWheel: (o) => {
+        o.preventDefault(), o.stopPropagation();
+        const y = Q(o.clientX, o.clientY);
         if (!y) return;
-        const x = a.deltaY > 0 ? 0.9 : 1.1;
+        const x = o.deltaY > 0 ? 0.9 : 1.1;
         K(y.worldX, y.worldY, r * x);
       },
       className: "minimap",
@@ -278,7 +278,7 @@ function Ue({ loading: e = !1 }) {
         height: te
       },
       children: [
-        k.map(([a, y]) => /* @__PURE__ */ n(
+        k.map(([o, y]) => /* @__PURE__ */ n(
           "div",
           {
             className: "minimap__panel",
@@ -288,11 +288,11 @@ function Ue({ loading: e = !1 }) {
             onPointerUp: (x) => {
               x.stopPropagation();
               const G = Date.now(), A = h.current;
-              if (A && A.id === a && G - A.time < 300) {
+              if (A && A.id === o && G - A.time < 300) {
                 x.preventDefault(), f(y, { padding: y.focusPadding, maxScale: y.focusMaxScale }), h.current = null;
                 return;
               }
-              h.current = { id: a, time: G };
+              h.current = { id: o, time: G };
             },
             onDoubleClick: (x) => {
               x.preventDefault(), x.stopPropagation(), f(y, { padding: y.focusPadding, maxScale: y.focusMaxScale });
@@ -304,7 +304,7 @@ function Ue({ loading: e = !1 }) {
               height: Math.max(1, y.height * z)
             }
           },
-          a
+          o
         )),
         /* @__PURE__ */ n(
           "div",
@@ -323,7 +323,7 @@ function Ue({ loading: e = !1 }) {
   );
 }
 function xt({ children: e, showMinimap: t = !0, minimapLoading: r = !1, extraActions: s }) {
-  const i = p((c) => c.offset), u = p((c) => c.scale), w = p((c) => c.registryVersion), f = p((c) => c.viewportSize), m = p((c) => c.setOffset), g = p((c) => c.setScale), h = p((c) => c.setViewportSize), M = S(null), k = S(!1), _ = S({ x: 0, y: 0 }), v = S(null), P = S(u), L = S(!1);
+  const a = p((c) => c.offset), u = p((c) => c.scale), w = p((c) => c.registryVersion), f = p((c) => c.viewportSize), m = p((c) => c.setOffset), g = p((c) => c.setScale), h = p((c) => c.setViewportSize), M = S(null), k = S(!1), _ = S({ x: 0, y: 0 }), v = S(null), P = S(u), L = S(!1);
   X(() => () => {
     p.getState().resetSession();
   }, []), X(() => {
@@ -384,7 +384,7 @@ function xt({ children: e, showMinimap: t = !0, minimapLoading: r = !1, extraAct
           "div",
           {
             className: "whiteboard-canvas",
-            style: { transform: `translate(${i.x}px, ${i.y}px) scale(${u})` },
+            style: { transform: `translate(${a.x}px, ${a.y}px) scale(${u})` },
             children: [
               /* @__PURE__ */ n("div", { className: "whiteboard-grid", "aria-hidden": !0 }),
               e
@@ -401,7 +401,7 @@ const St = Te(function({
   title: t,
   defaultPosition: r,
   width: s = 300,
-  className: i,
+  className: a,
   trackRect: u,
   focusable: w,
   focusPadding: f = 40,
@@ -409,74 +409,74 @@ const St = Te(function({
   headerActions: g,
   children: h
 }) {
-  const M = Re(), [k, _] = Se(r), v = S(!1), P = S(k), L = S(null), B = S(null), $ = p((o) => o.scale), V = p((o) => o.snapToGrid), F = p((o) => o.snapGridSize), c = p((o) => o.register), R = p((o) => o.unregister), W = p((o) => o.registerReset), C = p((o) => o.unregisterReset), O = p((o) => o.focusPanel), z = S($), E = S(!1), U = S(20), Z = S(r), D = S(null), q = S(null);
+  const M = Re(), [k, _] = Se(r), v = S(!1), P = S(k), L = S(null), B = S(null), $ = p((i) => i.scale), V = p((i) => i.snapToGrid), F = p((i) => i.snapGridSize), c = p((i) => i.register), R = p((i) => i.unregister), W = p((i) => i.registerReset), C = p((i) => i.unregisterReset), O = p((i) => i.focusPanel), z = S($), E = S(!1), U = S(20), Z = S(r), D = S(null), q = S(null);
   X(() => {
     z.current = $;
   }, [$]), X(() => {
     E.current = V, U.current = F;
   }, [V, F]), X(() => {
-    const o = () => {
+    const i = () => {
       const b = U.current;
       _((N) => {
-        const a = {
+        const o = {
           x: Math.round(N.x / b) * b,
           y: Math.round(N.y / b) * b
         };
-        return a.x === N.x && a.y === N.y ? N : a;
+        return o.x === N.x && o.y === N.y ? N : o;
       });
     };
-    return window.addEventListener("whiteboard-snap-now", o), () => window.removeEventListener("whiteboard-snap-now", o);
+    return window.addEventListener("whiteboard-snap-now", i), () => window.removeEventListener("whiteboard-snap-now", i);
   }, []), X(() => {
     P.current = k;
   }, [k]);
   const j = H(() => {
-    const o = L.current;
-    if (!o) return;
+    const i = L.current;
+    if (!i) return;
     const b = {
       x: P.current.x,
       y: P.current.y,
-      width: o.offsetWidth,
-      height: o.offsetHeight,
+      width: i.offsetWidth,
+      height: i.offsetHeight,
       focusPadding: f,
       focusMaxScale: m
     }, N = B.current;
     N && N.x === b.x && N.y === b.y && N.width === b.width && N.height === b.height && N.focusPadding === b.focusPadding && N.focusMaxScale === b.focusMaxScale || (B.current = b, c(M, b), u && (u.current = b));
   }, [m, f, M, c, u]), Q = H(() => {
-    const o = L.current;
-    return o ? {
+    const i = L.current;
+    return i ? {
       x: P.current.x,
       y: P.current.y,
-      width: o.offsetWidth,
-      height: o.offsetHeight,
+      width: i.offsetWidth,
+      height: i.offsetHeight,
       focusPadding: f,
       focusMaxScale: m
     } : null;
   }, [m, f]), K = H(() => {
-    const o = Q();
-    o && O(o, { padding: f, maxScale: m });
+    const i = Q();
+    i && O(i, { padding: f, maxScale: m });
   }, [O, f, m, Q]);
   X(() => (W(M, () => _(Z.current)), () => {
-    var o;
-    (o = D.current) == null || o.call(D), R(M), C(M), B.current = null;
+    var i;
+    (i = D.current) == null || i.call(D), R(M), C(M), B.current = null;
   }), [M, W, R, C]), We(() => {
     j();
   }, [k.x, k.y, s, j]), X(() => {
-    const o = L.current;
-    if (!o || typeof ResizeObserver > "u") return;
+    const i = L.current;
+    if (!i || typeof ResizeObserver > "u") return;
     const b = new ResizeObserver(() => {
       j();
     });
-    return b.observe(o), () => b.disconnect();
+    return b.observe(i), () => b.disconnect();
   }, [j]);
-  const se = H((o) => {
+  const se = H((i) => {
     var ae;
-    if (o.button !== 0) return;
+    if (i.button !== 0) return;
     v.current = !0;
-    const b = o.clientX, N = o.clientY, a = P.current.x, y = P.current.y, x = z.current;
-    o.preventDefault(), o.stopPropagation(), o.target.setPointerCapture(o.pointerId);
-    const G = (ie) => {
+    const b = i.clientX, N = i.clientY, o = P.current.x, y = P.current.y, x = z.current;
+    i.preventDefault(), i.stopPropagation(), i.target.setPointerCapture(i.pointerId);
+    const G = (oe) => {
       if (!v.current) return;
-      const oe = a + (ie.clientX - b) / x, ce = y + (ie.clientY - N) / x, le = U.current, Ce = E.current ? Math.round(oe / le) * le : oe, ze = E.current ? Math.round(ce / le) * le : ce;
+      const ie = o + (oe.clientX - b) / x, ce = y + (oe.clientY - N) / x, le = U.current, Ce = E.current ? Math.round(ie / le) * le : ie, ze = E.current ? Math.round(ce / le) * le : ce;
       _({
         x: Ce,
         y: ze
@@ -485,29 +485,29 @@ const St = Te(function({
       v.current = !1, window.removeEventListener("pointermove", G), window.removeEventListener("pointerup", A), D.current = null;
     };
     (ae = D.current) == null || ae.call(D), window.addEventListener("pointermove", G), window.addEventListener("pointerup", A), D.current = A;
-  }, []), be = i ? `floating-panel ${i}` : "floating-panel";
+  }, []), be = a ? `floating-panel ${a}` : "floating-panel";
   return /* @__PURE__ */ d(
     "div",
     {
       ref: L,
       className: be,
       style: { left: k.x, top: k.y, width: s },
-      onPointerDown: (o) => o.stopPropagation(),
-      onPointerUp: (o) => {
+      onPointerDown: (i) => i.stopPropagation(),
+      onPointerUp: (i) => {
         if (v.current) return;
         const b = Date.now(), N = q.current;
         if (N && b - N.time < 300) {
-          const a = o.clientX - N.x, y = o.clientY - N.y;
-          if (a * a + y * y < 100) {
-            o.stopPropagation(), K(), q.current = null;
+          const o = i.clientX - N.x, y = i.clientY - N.y;
+          if (o * o + y * y < 100) {
+            i.stopPropagation(), K(), q.current = null;
             return;
           }
         }
-        q.current = { time: b, x: o.clientX, y: o.clientY };
+        q.current = { time: b, x: i.clientX, y: i.clientY };
       },
-      onWheel: (o) => o.stopPropagation(),
-      onDoubleClick: (o) => {
-        o.stopPropagation(), K();
+      onWheel: (i) => i.stopPropagation(),
+      onDoubleClick: (i) => {
+        i.stopPropagation(), K();
       },
       children: [
         /* @__PURE__ */ d("div", { onPointerDown: se, className: "floating-panel__header", children: [
@@ -519,7 +519,7 @@ const St = Te(function({
               type: "button",
               className: "wb-btn wb-btn--secondary wb-btn--icon-only floating-panel__focus",
               onClick: K,
-              onPointerDown: (o) => o.stopPropagation(),
+              onPointerDown: (i) => i.stopPropagation(),
               title: "Focus on this panel",
               "aria-label": "Focus on this panel",
               children: /* @__PURE__ */ n(Ae, { size: 14 })
@@ -542,7 +542,7 @@ function _t({
   title: t,
   message: r,
   onConfirm: s,
-  onCancel: i,
+  onCancel: a,
   confirmLabel: u = "Confirm",
   loading: w,
   error: f
@@ -550,11 +550,11 @@ function _t({
   return X(() => {
     if (!e) return;
     const m = (g) => {
-      g.key === "Escape" && i();
+      g.key === "Escape" && a();
     };
     return window.addEventListener("keydown", m), () => window.removeEventListener("keydown", m);
-  }, [e, i]), !e || typeof document > "u" ? null : Ye(
-    /* @__PURE__ */ n("div", { className: "confirm-modal-overlay", onMouseDown: i, children: /* @__PURE__ */ d(
+  }, [e, a]), !e || typeof document > "u" ? null : Ye(
+    /* @__PURE__ */ n("div", { className: "confirm-modal-overlay", onMouseDown: a, children: /* @__PURE__ */ d(
       "div",
       {
         className: "confirm-modal",
@@ -568,12 +568,12 @@ function _t({
               /* @__PURE__ */ n(Oe, { size: 16 }),
               t
             ] }),
-            /* @__PURE__ */ n("button", { type: "button", className: "wb-btn wb-btn--secondary wb-btn--icon-only", onClick: i, "aria-label": "Close dialog", children: /* @__PURE__ */ n(Me, { size: 14 }) })
+            /* @__PURE__ */ n("button", { type: "button", className: "wb-btn wb-btn--secondary wb-btn--icon-only", onClick: a, "aria-label": "Close dialog", children: /* @__PURE__ */ n(Me, { size: 14 }) })
           ] }),
           /* @__PURE__ */ n("p", { className: "confirm-modal__message", children: r }),
           f && /* @__PURE__ */ n("div", { className: "wb-alert wb-alert--error", children: f }),
           /* @__PURE__ */ d("div", { className: "wb-btn-row", children: [
-            /* @__PURE__ */ n("button", { type: "button", className: "wb-btn wb-btn--secondary", onClick: i, children: "Cancel" }),
+            /* @__PURE__ */ n("button", { type: "button", className: "wb-btn wb-btn--secondary", onClick: a, children: "Cancel" }),
             /* @__PURE__ */ n("button", { type: "button", className: "wb-btn wb-btn--danger", onClick: s, disabled: w, children: w ? "Deleting..." : /* @__PURE__ */ d(re, { children: [
               /* @__PURE__ */ n(He, { size: 14 }),
               u
@@ -613,7 +613,7 @@ function Ct({
   y: r = 40,
   gap: s = 20
 }) {
-  const i = ye(() => {
+  const a = ye(() => {
     const f = {};
     for (const [m, g] of Object.entries(e))
       f[m] = ue(g);
@@ -628,11 +628,11 @@ function Ct({
   ), w = ye(() => {
     const f = {};
     let m = u.startX;
-    for (const [g, h] of Object.entries(i))
+    for (const [g, h] of Object.entries(a))
       f[g] = { x: m, y: u.y }, m += h + u.gap;
     return f;
-  }, [u.gap, u.startX, u.y, i]);
-  return { layout: u, panelWidth: i, positions: w };
+  }, [u.gap, u.startX, u.y, a]);
+  return { layout: u, panelWidth: a, positions: w };
 }
 function l(...e) {
   return e.filter(Boolean).join(" ");
@@ -654,7 +654,7 @@ const qe = {
   variant: t = "primary",
   fullWidth: r = !1,
   iconOnly: s = !1,
-  loading: i = !1,
+  loading: a = !1,
   disabled: u,
   className: w,
   children: f,
@@ -666,9 +666,9 @@ const qe = {
     {
       ref: h,
       className: l(qe[t], r && "full-width-btn", s && "icon-only-btn", w),
-      disabled: u || i,
+      disabled: u || a,
       ...g,
-      children: i ? /* @__PURE__ */ d(re, { children: [
+      children: a ? /* @__PURE__ */ d(re, { children: [
         /* @__PURE__ */ n(fe, { size: 14, className: "icon-spin" }),
         m || f
       ] }) : f
@@ -762,25 +762,25 @@ function Xt({
   onChange: r,
   className: s
 }) {
-  return /* @__PURE__ */ n(pe, { className: l("choice-list", s), children: e.map((i) => /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
+  return /* @__PURE__ */ n(pe, { className: l("choice-list", s), children: e.map((a) => /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
     Qe,
     {
-      active: t === i.value,
-      onClick: () => r(i.value),
-      disabled: i.disabled,
-      "data-has-description": i.description ? "true" : "false",
-      children: i.description ? /* @__PURE__ */ d("span", { className: "choice-card__row", children: [
-        /* @__PURE__ */ n("span", { className: "choice-card__label", children: i.label }),
-        /* @__PURE__ */ n("span", { className: "choice-card__description", children: i.description })
-      ] }) : /* @__PURE__ */ n("span", { className: "choice-card__label", children: i.label })
+      active: t === a.value,
+      onClick: () => r(a.value),
+      disabled: a.disabled,
+      "data-has-description": a.description ? "true" : "false",
+      children: a.description ? /* @__PURE__ */ d("span", { className: "choice-card__row", children: [
+        /* @__PURE__ */ n("span", { className: "choice-card__label", children: a.label }),
+        /* @__PURE__ */ n("span", { className: "choice-card__description", children: a.description })
+      ] }) : /* @__PURE__ */ n("span", { className: "choice-card__label", children: a.label })
     }
-  ) }, i.value)) });
+  ) }, a.value)) });
 }
 function Yt({ count: e = 4, className: t, withDescription: r = !1 }) {
-  return /* @__PURE__ */ n(pe, { className: l("choice-list", t), "aria-hidden": !0, children: Array.from({ length: e }).map((s, i) => /* @__PURE__ */ n("li", { children: /* @__PURE__ */ d("div", { className: "choice-card", children: [
+  return /* @__PURE__ */ n(pe, { className: l("choice-list", t), "aria-hidden": !0, children: Array.from({ length: e }).map((s, a) => /* @__PURE__ */ n("li", { children: /* @__PURE__ */ d("div", { className: "choice-card", children: [
     /* @__PURE__ */ n(we, { className: l("skeleton-title--sm", !r && "skeleton-choice-label") }),
     r ? /* @__PURE__ */ n(ge, { short: !0 }) : null
-  ] }) }, `choice-skeleton-${i}`)) });
+  ] }) }, `choice-skeleton-${a}`)) });
 }
 function Ft({ className: e, ...t }) {
   return /* @__PURE__ */ n("div", { className: l("coord-grid", e), ...t });
@@ -832,13 +832,13 @@ function Lt({ as: e = "h1", className: t, ...r }) {
     ...r
   });
 }
-function it({ as: e = "span", className: t, ...r }) {
+function ot({ as: e = "span", className: t, ...r }) {
   return T(e, {
     className: l("widget-section__title", t),
     ...r
   });
 }
-function ot({ as: e = "p", className: t, ...r }) {
+function it({ as: e = "p", className: t, ...r }) {
   return T(e, {
     className: l("widget-section__description", t),
     ...r
@@ -859,7 +859,7 @@ function At({
   label: t,
   htmlFor: r,
   hint: s,
-  error: i,
+  error: a,
   layout: u = "stack",
   className: w,
   children: f,
@@ -875,7 +875,7 @@ function At({
       t ? /* @__PURE__ */ n(ct, { htmlFor: r, children: t }) : null,
       f,
       s ? /* @__PURE__ */ n(_e, { size: "xs", children: s }) : null,
-      i ? /* @__PURE__ */ n("p", { className: "field-error", children: i }) : null
+      a ? /* @__PURE__ */ n("p", { className: "field-error", children: a }) : null
     ] })
   );
 }
@@ -888,12 +888,12 @@ function Ot({ isGenerating: e, children: t, message: r }) {
     ] })
   ] });
 }
-function Ht({ as: e = "span", icon: t, className: r, children: s, ...i }) {
+function Ht({ as: e = "span", icon: t, className: r, children: s, ...a }) {
   return T(
     e,
     {
       className: l("inline-row", r),
-      ...i
+      ...a
     },
     /* @__PURE__ */ d(re, { children: [
       t,
@@ -906,19 +906,19 @@ function Bt({
   alt: t,
   placeholder: r = "No image",
   size: s = "md",
-  fit: i = "contain",
+  fit: a = "contain",
   onImageError: u,
   className: w,
   ...f
 }) {
-  const [m, g] = Se(null), h = !!(e && m === e), M = l("image-thumb", `image-thumb--${s}`, `image-thumb--fit-${i}`, w);
+  const [m, g] = Se(null), h = !!(e && m === e), M = l("image-thumb", `image-thumb--${s}`, `image-thumb--fit-${a}`, w);
   return /* @__PURE__ */ n("div", { className: M, ...f, children: e && !h ? /* @__PURE__ */ n(
     "img",
     {
       src: e,
       alt: t,
       className: "image-thumb__img",
-      style: { objectFit: i, objectPosition: "center" },
+      style: { objectFit: a, objectPosition: "center" },
       onError: () => {
         g(e), u == null || u();
       }
@@ -932,7 +932,7 @@ function lt({
   ...s
 }) {
   return T(e ?? "div", {
-    className: l(t === "between" ? "space-between" : "inline-row", r),
+    className: l(t === "between" ? "space-between" : t === "end" ? "space-end" : "inline-row", r),
     ...s
   });
 }
@@ -957,11 +957,11 @@ function Vt({ label: e = "Loading...", className: t }) {
     e
   ] });
 }
-function jt({ children: e }) {
-  return /* @__PURE__ */ n("main", { className: "page-shell", children: e });
+function jt({ children: e, className: t, ...r }) {
+  return /* @__PURE__ */ n("main", { className: l("page-shell", t), ...r, children: e });
 }
-function Ut({ children: e }) {
-  return /* @__PURE__ */ n("div", { className: "page-card", children: e });
+function Ut({ children: e, className: t, ...r }) {
+  return /* @__PURE__ */ n("div", { className: l("page-card", t), ...r, children: e });
 }
 function Zt({ onClick: e, label: t = "Close" }) {
   return /* @__PURE__ */ d(Ke, { variant: "secondary", className: "panel-close-btn", onClick: e, children: [
@@ -969,14 +969,14 @@ function Zt({ onClick: e, label: t = "Close" }) {
     t
   ] });
 }
-function qt({ heading: e, description: t, actions: r, className: s, children: i, ...u }) {
+function qt({ heading: e, description: t, actions: r, className: s, children: a, ...u }) {
   return /* @__PURE__ */ d("section", { className: l("widget-section", s), ...u, children: [
     e || r ? /* @__PURE__ */ d("header", { className: r ? "title-row" : void 0, children: [
-      e ? /* @__PURE__ */ n(it, { children: e }) : null,
+      e ? /* @__PURE__ */ n(ot, { children: e }) : null,
       r
     ] }) : null,
-    t ? /* @__PURE__ */ n(ot, { children: t }) : null,
-    i
+    t ? /* @__PURE__ */ n(it, { children: t }) : null,
+    a
   ] });
 }
 function Kt({ icon: e, label: t }) {
@@ -1024,15 +1024,15 @@ function wt({ className: e, ...t }) {
 const tn = me(function({ className: t, ...r }, s) {
   return /* @__PURE__ */ n("textarea", { ref: s, className: l(t), ...r });
 });
-function nn({ className: e, theme: t = "light", onToggle: r, lightIcon: s, darkIcon: i }) {
-  return /* @__PURE__ */ n("button", { className: e, onClick: r, title: `Switch to ${t === "light" ? "dark" : "light"} mode`, "aria-label": "Toggle theme", children: t === "light" ? i ?? /* @__PURE__ */ n(Be, {}) : s ?? /* @__PURE__ */ n($e, {}) });
+function nn({ className: e, theme: t = "light", onToggle: r, lightIcon: s, darkIcon: a }) {
+  return /* @__PURE__ */ n("button", { className: e, onClick: r, title: `Switch to ${t === "light" ? "dark" : "light"} mode`, "aria-label": "Toggle theme", children: t === "light" ? a ?? /* @__PURE__ */ n(Be, {}) : s ?? /* @__PURE__ */ n($e, {}) });
 }
 function rn({ className: e, ...t }) {
   return /* @__PURE__ */ n("div", { className: l("title-row", e), ...t });
 }
 function sn({ inputs: e = 1, showButton: t = !0, className: r, ...s }) {
   return /* @__PURE__ */ d(J, { className: r, ...s, children: [
-    Array.from({ length: e }).map((i, u) => /* @__PURE__ */ n(tt, {}, `panel-form-input-${u}`)),
+    Array.from({ length: e }).map((a, u) => /* @__PURE__ */ n(tt, {}, `panel-form-input-${u}`)),
     t && /* @__PURE__ */ n(ve, {})
   ] });
 }
@@ -1134,8 +1134,8 @@ export {
   Jt as PickerGrid,
   ln as PickerGridSkeleton,
   Qt as Pill,
-  ot as SectionDescription,
-  it as SectionTitle,
+  it as SectionDescription,
+  ot as SectionTitle,
   en as Select,
   nt as SelectSkeleton,
   I as Skeleton,

package/dist/whiteboard.css

@@ -75,6 +75,65 @@
   --wb-shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.3);
 }
 
+/* ── Base element styles ─────────────────────────────── */
+
+button,
+input,
+textarea,
+select {
+  font: inherit;
+  color: inherit;
+}
+
+button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  border: 1px solid transparent;
+  border-radius: var(--wb-radius-sm);
+  padding: 0.34rem 0.62rem;
+  font-size: var(--wb-fs-base);
+  line-height: 1;
+  font-weight: 500;
+  white-space: nowrap;
+  color: var(--wb-surface-hover);
+  background: var(--wb-primary);
+  cursor: pointer;
+  transition: background-color var(--wb-transition-fast), transform var(--wb-transition-fast);
+}
+
+button:hover:not(:disabled) {
+  transform: translateY(-1px);
+  background: var(--wb-primary-pressed);
+}
+
+button:active:not(:disabled) { transform: translateY(0); }
+
+button:disabled { cursor: not-allowed; opacity: 0.58; }
+
+input,
+textarea,
+select {
+  width: 100%;
+  border: 1px solid var(--wb-border);
+  border-radius: var(--wb-radius-sm);
+  padding: 0.45rem 0.56rem;
+  font-size: var(--wb-fs-base);
+  line-height: 1.3;
+  background: var(--wb-surface);
+}
+
+textarea { min-height: 86px; resize: vertical; }
+
+input:focus,
+textarea:focus,
+select:focus {
+  outline: none;
+  border-color: var(--wb-focus-border);
+  box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.38);
+}
+
 /* ── Whiteboard Shell ────────────────────────────────── */
 
 .whiteboard-shell {
@@ -647,6 +706,13 @@ button.chip:hover {
   gap: 0.5rem;
 }
 
+.space-end {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.36rem;
+}
+
 .list-reset {
   margin: 0;
   padding: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@objectifthunes/whiteboard",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "Pan/zoom whiteboard canvas with draggable panels, minimap, snap-to-grid, and zoom controls",
   "license": "MIT",
   "type": "module",