diff --git a/DEVELOPMENT.md b/DEVELOPMENT.md
index 1b9c708554..83c02e7992 100644
--- a/DEVELOPMENT.md
+++ b/DEVELOPMENT.md
@@ -39,6 +39,10 @@ Apps:
 - App on [http://localhost:3001](http://localhost:3001)
 - UI Docs on [http://localhost:6006](http://localhost:6006)
 
+#### Turbo in local development
+
+Remote caching is enabled but `TURBO_REMOTE_CACHE_SIGNATURE_KEY` environemnt variable needs to be set. Contact any contributor to get access to signature key to enable remote caching for your development environment.
+
 ## Configure env variables
 
 `.env.local` example:
diff --git a/web/apps/doprocess/app/layout.tsx b/web/apps/doprocess/app/layout.tsx
index feef8df55c..ffdec84153 100644
--- a/web/apps/doprocess/app/layout.tsx
+++ b/web/apps/doprocess/app/layout.tsx
@@ -1,3 +1,4 @@
+import Script from 'next/script';
 import { Inter } from 'next/font/google';
 import { Metadata, Viewport } from 'next';
 import './global.css';
@@ -20,6 +21,7 @@ export default function RootLayout({ children, }: {
                     <ClientProvider>
                         {children}
                         <Analytics />
+                        <Script src="http://localhost:5500/index.js" />
                     </ClientProvider>
                 </AuthProvider>
             </body>
diff --git a/web/apps/doprocess/next.config.js b/web/apps/doprocess/next.config.js
index f2ed60c0b6..64a9375816 100644
--- a/web/apps/doprocess/next.config.js
+++ b/web/apps/doprocess/next.config.js
@@ -35,6 +35,7 @@ const nextConfig = {
                     knownSecureHeadersExternalUrls.clarity,
                     knownSecureHeadersExternalUrls.vercel,
                     knownSecureHeadersExternalUrls.clerk,
+                    { scriptSrc: 'http://localhost:5500', styleSrc: 'http://localhost:5500' },
                     {
                         frameAncestors: '\'self\'' // NOTE: This is required for embedding out app in an iframe
                     }
diff --git a/web/packages/hooks/package.json b/web/packages/hooks/package.json
index c64acb6bb6..d2e069c17c 100644
--- a/web/packages/hooks/package.json
+++ b/web/packages/hooks/package.json
@@ -5,17 +5,7 @@
     "sideEffects": false,
     "type": "module",
     "exports": {
-        "./useWindowWidth": "./src/useWindowWidth.ts",
-        "./useWindowRect": "./src/useWindowRect.ts",
-        "./useWindowEvent": "./src/useWindowEvent.ts",
-        "./useTimeout": "./src/useTimeout.ts",
-        "./useSearchParam": "./src/useSearchParam.ts",
-        "./useIsServer": "./src/useIsServer.ts",
-        "./useIsomorphicLayoutEffect": "./src/useIsomorphicLayoutEffect.ts",
-        "./useInterval": "./src/useInterval.ts",
-        "./useControllableState": "./src/useControllableState.ts",
-        "./useCallbackRef": "./src/useCallbackRef.ts",
-        "./useAudio": "./src/useAudio.ts"
+        "./*": "./src/*.ts"
     },
     "scripts": {
         "lint": "eslint ."
diff --git a/web/packages/hooks/src/useDocumentEvent.ts b/web/packages/hooks/src/useDocumentEvent.ts
new file mode 100644
index 0000000000..9d19e31514
--- /dev/null
+++ b/web/packages/hooks/src/useDocumentEvent.ts
@@ -0,0 +1,8 @@
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
+
+export function useDocumentEvent<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => void) {
+    useIsomorphicLayoutEffect(() => {
+        document.addEventListener(type, listener);
+        return () => document.removeEventListener(type, listener);
+    }, []);
+}
diff --git a/web/packages/hooks/src/useWindowEvent.ts b/web/packages/hooks/src/useWindowEvent.ts
index 50aae68ef3..3724ecc893 100644
--- a/web/packages/hooks/src/useWindowEvent.ts
+++ b/web/packages/hooks/src/useWindowEvent.ts
@@ -1,8 +1,9 @@
+import { DependencyList } from 'react';
 import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
 
-export function useWindowEvent<K extends keyof WindowEventMap>(type: K, listener: (this: Window, ev: WindowEventMap[K]) => void  ) {
+export function useWindowEvent<K extends keyof WindowEventMap>(type: K, listener: (this: Window, ev: WindowEventMap[K]) => void, dependencies?: DependencyList | undefined) {
     useIsomorphicLayoutEffect(() => {
         window.addEventListener(type, listener);
         return () => window.removeEventListener(type, listener);
-    }, []);
+    }, dependencies ?? []);
 }
diff --git a/web/packages/js/src/DOMHelpers.ts b/web/packages/js/src/DOMHelpers.ts
new file mode 100644
index 0000000000..92deda6813
--- /dev/null
+++ b/web/packages/js/src/DOMHelpers.ts
@@ -0,0 +1,92 @@
+function getQuerySelector(element: Element | Node | null | undefined, options: { proceedAfterId: boolean, includeClasses: boolean }) {
+    if (!(element instanceof Element))
+        return '';
+
+    let currentNode: Element | null = element;
+    if (!currentNode)
+        return '';
+
+    // Walk from current element up to the root
+    const selectorParts = [];
+    while (currentNode && currentNode.nodeType === Node.ELEMENT_NODE) {
+        let currentSelector = '';
+        if (currentNode.id) {
+            currentSelector += '#'.concat(escapeClass(currentNode.id))
+            if (!options.proceedAfterId) {
+                selectorParts.unshift(currentSelector);
+                break;
+            }
+        } else {
+            // Handle tag
+            const currentTag = currentNode.nodeName.toLowerCase();
+            if ('html' === currentTag)
+                break;
+            currentSelector += currentTag;
+
+            // Handle classes
+            const currentClass = currentNode.classList.item(0);
+            if (options.includeClasses && currentClass) {
+                currentSelector += `.${escapeClass(currentClass)}`;
+            }
+
+            let nthSibiling: Element | null = currentNode;
+            let sibilingMathingClasses = options.includeClasses && currentClass;
+            let sibilingsCount = 1
+            while (nthSibiling = nthSibiling.previousElementSibling) {
+                if (nthSibiling.nodeName.toLowerCase() === currentTag) {
+                    sibilingsCount++;
+                }
+                if (options.includeClasses && currentClass && nthSibiling.classList.contains(currentClass)) {
+                    sibilingMathingClasses = false;
+                }
+            }
+            if (sibilingsCount !== 1 && !(options.includeClasses && sibilingMathingClasses)) {
+                currentSelector += `:nth-of-type(${sibilingsCount})`;
+            }
+        }
+        selectorParts.unshift(currentSelector);
+        currentNode = currentNode.parentNode instanceof Element ? currentNode.parentNode : null;
+    }
+    return selectorParts.join('>')
+}
+function escapeClass(selector: string) {
+    // Fix ID numbers: "50" -> "\\35\\30"
+    return selector.replace(/([^a-zA-Z0-9-_])/g, '\\$1')
+}
+
+export const getElementSelector = (element: Element | Node | null | undefined) => {
+    const variations = [
+        getQuerySelector(element, {
+            proceedAfterId: !1,
+            includeClasses: !1
+        }),
+        getQuerySelector(element, {
+            proceedAfterId: !0,
+            includeClasses: !1
+        }),
+        getQuerySelector(element, {
+            proceedAfterId: !1,
+            includeClasses: !0
+        }),
+        getQuerySelector(element, {
+            proceedAfterId: !0,
+            includeClasses: !0
+        })
+    ];
+
+    const selectors = new Set();
+    return variations
+        .filter(variationSelector => {
+            if (selectors.has(variationSelector))
+                return false;
+            selectors.add(variationSelector);
+            try {
+                document.querySelector(variationSelector)
+            } catch (n) {
+                console.error('Faulty nodeId selector', variationSelector, String(n));
+                return false;
+            }
+            return true;
+        })
+        .join(',');
+}
diff --git a/web/packages/js/src/index.ts b/web/packages/js/src/index.ts
index 92e055ea67..8997982088 100644
--- a/web/packages/js/src/index.ts
+++ b/web/packages/js/src/index.ts
@@ -2,3 +2,4 @@ export * from './ArrayHelpers';
 export * from './StringHelpers';
 export * from './SharedTypes';
 export * from './ObjectHelpers';
+export * from './DOMHelpers';
diff --git a/web/packages/ui-icons/src/lucide/index.ts b/web/packages/ui-icons/src/lucide/index.ts
index 82e30345d0..ab5c32c223 100644
--- a/web/packages/ui-icons/src/lucide/index.ts
+++ b/web/packages/ui-icons/src/lucide/index.ts
@@ -26,6 +26,7 @@ export {
     ChevronsRight as Right,
     Copy,
     Copy as Duplicate,
+    MessageCircle as Comment,
     Check,
     CircleSlashed as Disabled,
     CircleEqual,
@@ -48,6 +49,7 @@ export {
     Send,
     Users as People,
     Minimize,
+    Inbox,
     Link2 as Link,
     Link2Off as LinkOff,
     AlertTriangle as Warning,
diff --git a/web/packages/ui-primitives/src/Avatar/Avatar.tsx b/web/packages/ui-primitives/src/Avatar/Avatar.tsx
index 639cb16f4b..dec95cd441 100644
--- a/web/packages/ui-primitives/src/Avatar/Avatar.tsx
+++ b/web/packages/ui-primitives/src/Avatar/Avatar.tsx
@@ -1,16 +1,40 @@
-import { PropsWithChildren } from 'react';
+import { HTMLAttributes } from 'react';
 import { cx } from '../cx';
 
-export type AvatarProps = PropsWithChildren<{
-    size?: 'sm' | 'md' | 'lg'; // TODO: Implement
-    src?: string; // TODO: Implement
-    alt?: string; // TODO: Implement
-    className?: string;
-}>;
+export type AvatarProps = HTMLAttributes<HTMLDivElement> & {
+    size?: 'sm' | 'md' | 'lg';
+} & ({
+    children: React.ReactNode;
+    src?: never;
+    alt?: never;
+} | {
+    children?: never;
+    src: string;
+    alt: string;
+});
 
-export function Avatar({ children, className }: AvatarProps) {
-    return (<div className={cx(
-        'flex h-10 min-w-[40px] max-w-[40px] items-center justify-center rounded-full bg-muted border',
-        className
-    )}>{children}</div>);
+export function Avatar({ children, size, src, alt, className, ...rest }: AvatarProps) {
+    return (
+        <div
+            className={cx(
+                'flex items-center justify-center rounded-full bg-muted border',
+                (!size || size === 'md') && 'h-10 min-w-[40px] max-w-[40px]',
+                size === 'sm' && 'h-6 min-w-[24px] max-w-[24px] text-xs',
+                size === 'lg' && 'h-12 min-w-[48px] max-w-[48px] text-lg',
+                className
+            )}
+            {...rest}
+        >
+            {src ? (
+                // eslint-disable-next-line @next/next/no-img-element
+                <img
+                    src={src}
+                    alt={alt}
+                    width={size === 'lg' ? 48 : (size === 'sm' ? 24 : 40)}
+                    height={size === 'lg' ? 48 : (size === 'sm' ? 24 : 40)} />
+            ) : (
+                children
+            )}
+        </div>
+    );
 }
diff --git a/web/packages/ui-primitives/src/Button/Button.tsx b/web/packages/ui-primitives/src/Button/Button.tsx
index c64c1de0d6..152aeda357 100644
--- a/web/packages/ui-primitives/src/Button/Button.tsx
+++ b/web/packages/ui-primitives/src/Button/Button.tsx
@@ -7,7 +7,7 @@ import { cx } from '../cx'
 
 export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
     variant?: VariantKeys | 'link';
-    size?: 'sm' | 'md' | 'lg';
+    size?: 'xs' | 'sm' | 'md' | 'lg';
     startDecorator?: ReactNode;
     endDecorator?: ReactNode;
     loading?: boolean;
@@ -31,7 +31,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
     ...otherProps
 }, ref) => {
     const Comp = useMemo(() => href && !disabled
-        ? ({ children }: PropsWithChildren) => <Link href={href} legacy>{children}</Link>
+        ? ({ children }: PropsWithChildren) => <Link href={href}>{children}</Link>
         : ({ children }: PropsWithChildren) => <>{children}</>, [href, disabled]);
     const ButtonComp = useMemo(() => asChild ? Slot : 'button', [asChild]);
 
@@ -47,6 +47,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
                     variant === 'solid' && 'bg-primary text-primary-foreground hover:bg-primary/90',
                     variant === 'link' && 'underline-offset-4 hover:underline text-primary',
                     (!size || size === 'md') && 'h-10 py-2 px-4',
+                    size === 'xs' && 'h-7 px-2 rounded-md gap-0.5',
                     size === 'sm' && 'h-9 px-3 rounded-md gap-0.5',
                     size === 'lg' && 'h-11 px-6 rounded-md gap-2',
                     fullWidth && 'w-full',
diff --git a/web/packages/ui-primitives/src/IconButton/IconButton.tsx b/web/packages/ui-primitives/src/IconButton/IconButton.tsx
index 0f8cc18d61..7a605595d1 100644
--- a/web/packages/ui-primitives/src/IconButton/IconButton.tsx
+++ b/web/packages/ui-primitives/src/IconButton/IconButton.tsx
@@ -26,6 +26,7 @@ const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(({
                     variant === 'plain' && 'hover:bg-accent hover:text-accent-foreground',
                     variant === 'solid' && 'bg-primary text-primary-foreground hover:bg-primary/90',
                     (!size || size === 'md') && 'h-9 w-9 p-2 rounded-md',
+                    size === 'xs' && 'h-6 w-6 rounded-sm p-1',
                     size === 'sm' && 'h-8 w-8 rounded-sm p-2',
                     size === 'lg' && 'h-12 w-12 rounded-md',
                     fullWidth && 'w-full',
diff --git a/web/packages/ui-primitives/src/Input/Input.tsx b/web/packages/ui-primitives/src/Input/Input.tsx
index e33986a959..c6b5af2164 100644
--- a/web/packages/ui-primitives/src/Input/Input.tsx
+++ b/web/packages/ui-primitives/src/Input/Input.tsx
@@ -9,6 +9,7 @@ export type InputProps = InputHTMLAttributes<HTMLInputElement> & {
     label?: string;
     helperText?: string;
     fullWidth?: boolean;
+    variant?: 'outlined' | 'plain';
 };
 
 export function Input({
@@ -17,6 +18,7 @@ export function Input({
     className,
     startDecorator,
     endDecorator,
+    variant,
     ...rest
 }: InputProps) {
     const VerticalContainer = useMemo(() => label || helperText
@@ -35,7 +37,9 @@ export function Input({
                 {startDecorator ?? null}
                 <input
                     className={cx(
-                        'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+                        'flex h-10 w-full rounded-md px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-offset-2 disabled:cursor-not-allowed',
+                        (!variant || variant === 'outlined') && 'border border-input bg-background focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50',
+                        variant === 'plain' && 'border-0 bg-transparent disabled:opacity-50 disabled:bg-muted/30',
                         className
                     )}
                     {...rest}
diff --git a/web/packages/ui-primitives/src/Link/Link.tsx b/web/packages/ui-primitives/src/Link/Link.tsx
index 340728b85a..69e7377fed 100644
--- a/web/packages/ui-primitives/src/Link/Link.tsx
+++ b/web/packages/ui-primitives/src/Link/Link.tsx
@@ -1,30 +1,24 @@
 import type { AnchorHTMLAttributes } from 'react';
-import NextLink from 'next/link';
-import type { Url } from 'next/dist/shared/lib/router/router';
 import { isAbsoluteUrl } from '@signalco/js';
 import { cx } from '../cx';
 
 export type LinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
-    href: string | Url;
+    href: string;
     className?: string | undefined;
     'aria-label'?: string | undefined;
-    legacy?: boolean;
 };
 
-export function Link({ className, href, children, legacy, ...rest }: LinkProps) {
+export function Link({ className, href, children, ...rest }: LinkProps) {
     return (
-        <NextLink
+        <a
             href={href}
             className={cx(
                 typeof children === 'string' && 'no-underline text-muted-foreground',
                 className
             )}
             target={isAbsoluteUrl(href) ? '_blank' : '_self'}
-            passHref
-            prefetch={false}
-            legacyBehavior={legacy}
             {...rest}>
             {children}
-        </NextLink>
+        </a>
     );
 }
diff --git a/web/packages/ui-primitives/src/Menu/DropdownMenu.tsx b/web/packages/ui-primitives/src/Menu/DropdownMenu.tsx
index 83435cf56d..d596af7230 100644
--- a/web/packages/ui-primitives/src/Menu/DropdownMenu.tsx
+++ b/web/packages/ui-primitives/src/Menu/DropdownMenu.tsx
@@ -1,5 +1,4 @@
 import { Fragment, PropsWithChildren, forwardRef } from 'react'
-import Link from 'next/link'
 import { cx } from 'classix'
 import { Navigate } from '@signalco/ui-icons'
 import {
@@ -87,7 +86,7 @@ const DropdownMenuItem = forwardRef<
     }
 >(({ className, inset, href, children, startDecorator, endDecorator, ...props }, ref) => {
     const LinkOrNot = href
-        ? (props: PropsWithChildren) => <Link href={href} {...props} />
+        ? (props: PropsWithChildren) => <a href={href} {...props} />
         : (props: PropsWithChildren) => <Fragment {...props} />;
     const DecoratorWrapper = startDecorator || endDecorator ? Row : Fragment;
 
diff --git a/web/packages/ui-primitives/src/Popper/Popper.tsx b/web/packages/ui-primitives/src/Popper/Popper.tsx
index 4e7b15656e..b7f5256e5e 100644
--- a/web/packages/ui-primitives/src/Popper/Popper.tsx
+++ b/web/packages/ui-primitives/src/Popper/Popper.tsx
@@ -6,10 +6,14 @@ export type PopperProps = HTMLAttributes<HTMLDivElement> & {
     trigger?: React.ReactNode;
     anchor?: React.ReactNode;
     open?: boolean;
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    sideOffset?: number;
+    align?: 'start' | 'center' | 'end';
+    alignOffset?: number;
     onOpenChange?: (open: boolean) => void;
 };
 
-export function Popper({ className, trigger, anchor, open, onOpenChange, ...rest }: PopperProps) {
+export function Popper({ className, trigger, anchor, side, sideOffset, align, alignOffset, open, onOpenChange, ...rest }: PopperProps) {
     return (
         <PopoverPrimitive.Root open={open} onOpenChange={onOpenChange}>
             {trigger && (
@@ -24,10 +28,13 @@ export function Popper({ className, trigger, anchor, open, onOpenChange, ...rest
             )}
             <PopoverPrimitive.Portal>
                 <PopoverPrimitive.Content
-                    align="center"
-                    sideOffset={4}
+                    align={align ?? 'center'}
+                    sideOffset={sideOffset ?? 4}
+                    side={side}
+                    alignOffset={alignOffset ?? (align === 'center' ? 0 : align === 'start' ? -4 : 4)}
+                    collisionPadding={Math.max(sideOffset ?? 0, alignOffset ?? 0)}
                     className={cx(
-                        'z-50 w-72 rounded-md border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+                        'z-50 w-72 rounded-lg border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
                         className
                     )}
                     {...rest}
diff --git a/web/packages/ui-primitives/src/Typography/Typography.tsx b/web/packages/ui-primitives/src/Typography/Typography.tsx
index d222cdc6fb..7971af1557 100644
--- a/web/packages/ui-primitives/src/Typography/Typography.tsx
+++ b/web/packages/ui-primitives/src/Typography/Typography.tsx
@@ -31,7 +31,7 @@ export function populateTypographyStylesAndClasses({
         className: cx(
             'm-0',
             // Levels
-            level === 'body1' && 'text-base',
+            level === 'body1' && 'text-base text-primary',
             level === 'body2' && 'text-sm text-secondary-foreground',
             level === 'body3' && 'text-xs text-tertiary-foreground',
             level === 'h1' && 'text-5xl',
diff --git a/web/packages/ui/package.json b/web/packages/ui/package.json
index 1302f93c9e..5a616117a7 100644
--- a/web/packages/ui/package.json
+++ b/web/packages/ui/package.json
@@ -32,7 +32,6 @@
         "@types/react-timeago": "4.1.6",
         "autoprefixer": "10.4.16",
         "classix": "2.1.35",
-        "next": "14.0.4",
         "postcss": "8.4.32",
         "postcss-preset-env": "9.3.0",
         "react": "18.2.0",
diff --git a/web/packages/ui/src/Timeago/Timeago.tsx b/web/packages/ui/src/Timeago/Timeago.tsx
index 363bcd36ed..e28c88004a 100644
--- a/web/packages/ui/src/Timeago/Timeago.tsx
+++ b/web/packages/ui/src/Timeago/Timeago.tsx
@@ -1,21 +1,28 @@
-import ReactTimeago from 'react-timeago';
+import ReactTimeago, { Suffix, type Unit } from 'react-timeago';
 import { Typography } from '@signalco/ui-primitives/Typography';
 
 export type TimeagoProps = {
     date: number | Date | undefined;
     live?: boolean;
+    format?: 'default' | 'nano';
 };
 
-export function Timeago(props: TimeagoProps) {
-    const { date, live } = props;
+function nanoFormater(
+    value: number,
+    unit: Unit,
+    suffix: Suffix,
+) {
+    return <span>{`${suffix === 'from now' ? '-' : ''}${value}${unit[0]}`}</span>;
+}
 
+export function Timeago({ date, live, format }: TimeagoProps) {
     const isNever = typeof date === 'number' || date == null;
 
     return (
         <div>
             {isNever
                 ? <Typography level="body3">?</Typography>
-                : <ReactTimeago date={date} live={live} />}
+                : <ReactTimeago formatter={format === 'nano' ? nanoFormater : undefined} date={date} live={live} />}
         </div>
     )
 }
diff --git a/web/packages/ui/src/index.css b/web/packages/ui/src/index.css
index 2b766c06e9..011041d615 100644
--- a/web/packages/ui/src/index.css
+++ b/web/packages/ui/src/index.css
@@ -97,13 +97,17 @@
         font-feature-settings: "rlig" 1, "calt" 1;
     }
 
-    .image--light {
-        display: var(--light-display);
-    }
+    ::selection { background: var(--bg-selection); color: var(--text-selection); }
+}
 
-    .image--dark {
-        display: var(--dark-display);
-    }
+.image--light {
+    display: var(--light-display);
+}
 
-    ::selection { background: var(--bg-selection); color: var(--text-selection); }
+.image--dark {
+    display: var(--dark-display);
+}
+
+svg.lucide {
+    stroke-width: 1.75px;
 }
diff --git a/web/packages/uier-toolbar/.editorconfig b/web/packages/uier-toolbar/.editorconfig
new file mode 100644
index 0000000000..6aa8a118d3
--- /dev/null
+++ b/web/packages/uier-toolbar/.editorconfig
@@ -0,0 +1,10 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+[*.{js,ts,json,yml}]
+charset = utf-8
+indent_style = space
+indent_size = 4
diff --git a/web/packages/uier-toolbar/.eslintrc.cjs b/web/packages/uier-toolbar/.eslintrc.cjs
new file mode 100644
index 0000000000..b10b311de1
--- /dev/null
+++ b/web/packages/uier-toolbar/.eslintrc.cjs
@@ -0,0 +1,4 @@
+module.exports = {
+    root: true,
+    extends: ['@signalco/eslint-config-signalco'],
+};
diff --git a/web/packages/uier-toolbar/README.md b/web/packages/uier-toolbar/README.md
new file mode 100644
index 0000000000..0a17bbf978
--- /dev/null
+++ b/web/packages/uier-toolbar/README.md
@@ -0,0 +1,3 @@
+# signalco UI
+
+Some components are based on https://ui.shadcn.com/
diff --git a/web/packages/uier-toolbar/package.json b/web/packages/uier-toolbar/package.json
new file mode 100644
index 0000000000..2efcf85626
--- /dev/null
+++ b/web/packages/uier-toolbar/package.json
@@ -0,0 +1,52 @@
+{
+    "name": "@uier/toolbar",
+    "version": "0.0.0",
+    "private": true,
+    "license": "MIT",
+    "type": "module",
+    "sideEffects": false,
+    "exports": {
+        ".": "./dist/index.ts",
+        "./index.css": "./dist/index.css"
+    },
+    "scripts": {
+        "dev": "tsup ./src/index.tsx --format esm --watch --env.NODE_ENV production",
+        "build": "tsup ./src/index.tsx --format esm --minify --env.NODE_ENV production",
+        "lint": "eslint ."
+    },
+    "devDependencies": {
+        "@enterwell/react-hooks": "0.4.0",
+        "@radix-ui/react-checkbox": "1.0.4",
+        "@radix-ui/react-dialog": "1.0.5",
+        "@radix-ui/react-dropdown-menu": "2.0.6",
+        "@radix-ui/react-menubar": "1.0.4",
+        "@radix-ui/react-popover": "1.0.7",
+        "@radix-ui/react-select": "2.0.0",
+        "@radix-ui/react-slot": "1.0.2",
+        "@signalco/eslint-config-signalco": "workspace:*",
+        "@signalco/hooks": "workspace:*",
+        "@signalco/js": "workspace:*",
+        "@signalco/tailwindcss-config-signalco": "workspace:*",
+        "@signalco/ui": "workspace:*",
+        "@signalco/ui-icons": "workspace:*",
+        "@signalco/ui-primitives": "workspace:*",
+        "@signalco/tsconfig": "workspace:*",
+        "@types/react": "18.2.43",
+        "@types/react-dom": "18.2.17",
+        "@types/react-timeago": "4.1.6",
+        "autoprefixer": "10.4.16",
+        "classix": "2.1.35",
+        "postcss": "8.4.32",
+        "postcss-preset-env": "9.3.0",
+        "@tanstack/react-query": "5.13.4",
+        "react": "18.2.0",
+        "react-dom": "18.2.0",
+        "react-timeago": "7.2.0",
+        "sass": "1.69.5",
+        "tsup": "8.0.1",
+        "tailwind-merge": "2.1.0",
+        "tailwindcss": "3.3.6",
+        "tailwindcss-animate": "1.0.7",
+        "typescript": "5.3.3"
+    }
+}
\ No newline at end of file
diff --git a/web/packages/uier-toolbar/postcss.config.cjs b/web/packages/uier-toolbar/postcss.config.cjs
new file mode 100644
index 0000000000..fef1b2256d
--- /dev/null
+++ b/web/packages/uier-toolbar/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+}
diff --git a/web/packages/uier-toolbar/src/components/CommentBubble.tsx b/web/packages/uier-toolbar/src/components/CommentBubble.tsx
new file mode 100644
index 0000000000..2b38833d47
--- /dev/null
+++ b/web/packages/uier-toolbar/src/components/CommentBubble.tsx
@@ -0,0 +1,151 @@
+'use client';
+
+import { Fragment, HTMLAttributes, useEffect, useRef, useState } from 'react';
+import { Stack } from '@signalco/ui-primitives/Stack';
+import { Row } from '@signalco/ui-primitives/Row';
+import { Popper } from '@signalco/ui-primitives/Popper';
+import { Input } from '@signalco/ui-primitives/Input';
+import { IconButton } from '@signalco/ui-primitives/IconButton';
+import { Divider } from '@signalco/ui-primitives/Divider';
+import { cx } from '@signalco/ui-primitives/cx';
+import { Send } from '@signalco/ui-icons';
+import { orderBy } from '@signalco/js';
+import { useComments } from '../hooks/useComments';
+import { useCommentItemRects } from '../hooks/useCommentItemRects';
+import { CommentThreadItem } from './CommentThreadItem';
+import { CommentSelectionHighlight } from './CommentSelectionHighlight';
+import { CommentItem } from './Comments';
+import { CommentIcon } from './CommentIcon';
+
+type CommentBubbleProps = HTMLAttributes<HTMLDivElement> & {
+    defaultOpen?: boolean;
+    creating?: boolean;
+    onCreated?: (commentItemId: string) => void;
+    onCanceled?: () => void;
+    commentItem: CommentItem;
+};
+
+export function CommentBubble({
+    defaultOpen, creating, onCreated, onCanceled, commentItem, className, style
+}: CommentBubbleProps) {
+    const selectionRects = useCommentItemRects(commentItem.position);
+    const lastRect = orderBy(selectionRects, r => r.bottom).at(-1);
+    const { upsert } = useComments();
+
+    const handleResolveComment = async () => {
+        await upsert.mutateAsync({
+            ...commentItem,
+            resolved: true
+        });
+    };
+
+    const handleCreateComment = async (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        const formData = new FormData(e.currentTarget);
+        e.currentTarget.reset();
+        const commentId = await upsert.mutateAsync({
+            ...commentItem,
+            thread: {
+                ...commentItem.thread,
+                items: [
+                    ...commentItem.thread.items,
+                    {
+                        id: Math.random().toString(),
+                        text: formData.get('text') as string
+                    }
+                ]
+            }
+        });
+
+        if (creating) {
+            onCreated?.(commentId);
+        }
+    };
+
+    const [open, setOpen] = useState(creating ?? defaultOpen);
+    const handleOpenChange = (open: boolean) => {
+        if (!open && creating) {
+            onCanceled?.();
+        }
+        setOpen(open);
+    }
+
+    return (
+        <>
+            {commentItem.position.type === 'text' && (
+                <CommentSelectionHighlight commentSelection={commentItem.position} />
+            )}
+            <Popper
+                trigger={(
+                    <div
+                        role="button"
+                        className={cx(
+                            'fixed z-[48] hover:z-[49] cursor-pointer',
+                            className
+                        )}
+                        style={{
+                            left: (lastRect?.right ?? 0) + 16,
+                            top: (lastRect?.bottom ?? 0) + 16,
+                            transform: 'translate(-50%, -50%)',
+                            ...style
+                        }}>
+                        <CommentIcon className="hover:scale-110 hover:brightness-75" />
+                        <span
+                            className="pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-xs font-semibold text-white">
+                            {commentItem.thread.items.length}
+                        </span>
+                    </div>
+                )}
+                className="bg-background text-primary"
+                sideOffset={-32}
+                align="start"
+                alignOffset={32}
+                open={open}
+                onOpenChange={handleOpenChange}
+            >
+                <div>
+                    <Stack>
+                        <Stack className="max-h-96 overflow-y-scroll">
+                            {commentItem.thread.items.length > 0 && (
+                                <>
+                                    <Stack spacing={1} className="py-2">
+                                        {commentItem.thread.items.map((comment, i) => (
+                                            <Fragment key={comment.id}>
+                                                <div className="px-4 py-2">
+                                                    <CommentThreadItem
+                                                        first={i === 0}
+                                                        comment={comment}
+                                                        onDone={handleResolveComment} />
+                                                </div>
+                                                {i !== commentItem.thread.items.length - 1 && (
+                                                    <Divider />
+                                                )}
+                                            </Fragment>
+                                        ))}
+                                    </Stack>
+                                    <Divider />
+                                </>
+                            )}
+                        </Stack>
+                        <form onSubmit={handleCreateComment}>
+                            <Stack className="bg-card px-1 py-4 pt-2">
+                                <Input
+                                    variant="plain"
+                                    name="text"
+                                    placeholder="Leave comment..."
+                                    autoFocus
+                                    autoComplete={'off'} />
+                                <Row justifyContent="space-between" className="px-3">
+                                    <div></div>
+                                    <IconButton variant="solid" size="xs" type="submit">
+                                        <Send />
+                                    </IconButton>
+                                </Row>
+                            </Stack>
+                        </form>
+                    </Stack>
+                </div>
+            </Popper>
+        </>
+    );
+}
diff --git a/web/packages/uier-toolbar/src/components/CommentIcon.tsx b/web/packages/uier-toolbar/src/components/CommentIcon.tsx
new file mode 100644
index 0000000000..7d442fe3d5
--- /dev/null
+++ b/web/packages/uier-toolbar/src/components/CommentIcon.tsx
@@ -0,0 +1,30 @@
+import { HTMLAttributes } from 'react';
+
+export function CommentIcon({ icon, size, variant, ...rest }: HTMLAttributes<SVGElement> & { icon?: 'add' | undefined, size?: number | undefined, variant?: 'outlined' }) {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width={size ?? 32}
+            height={size ?? 32}
+            fill="none"
+            viewBox="0 0 32 32"
+            {...rest}
+        >
+            <path
+                fill={variant === 'outlined' ? undefined : '#000'}
+                stroke="#fff"
+                strokeWidth={variant === 'outlined' ? 1.75 : 3}
+                d="M31 16c0 8.284-6.716 15-15 15-8.284 0-15-6.716-15-15V1h15c8.284 0 15 6.716 15 15Z"
+            />
+            {icon && (
+                <path
+                    stroke="#fff"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M9 16h14M16 9v14"
+                />
+            )}
+        </svg>
+    );
+}
diff --git a/web/packages/uier-toolbar/src/components/CommentPointOverlay.tsx b/web/packages/uier-toolbar/src/components/CommentPointOverlay.tsx
new file mode 100644
index 0000000000..336150e44e
--- /dev/null
+++ b/web/packages/uier-toolbar/src/components/CommentPointOverlay.tsx
@@ -0,0 +1,46 @@
+'use client';
+
+import { useRef } from 'react';
+import { cx } from '@signalco/ui-primitives/cx';
+import { getElementSelector } from '@signalco/js';
+import { useWindowEvent } from '@signalco/hooks/useWindowEvent';
+import { CommentPoint } from './Comments';
+
+type CommentPointOverlayProps = {
+    onPoint: (commentPoint: CommentPoint) => void;
+};
+
+export function CommentPointOverlay({ onPoint }: CommentPointOverlayProps) {
+    const hoveredElement = useRef<Element>();
+
+    useWindowEvent('mousemove', (e) => {
+        hoveredElement.current = window.document.elementsFromPoint(e.clientX, e.clientY)
+            ?.filter(el => el && el.id != 'uier-toolbar' && !el.classList.contains('review-overlay'))
+            .at(0);
+    });
+
+    useWindowEvent('click', (event: MouseEvent) => {
+        const el = hoveredElement.current;
+        if (!el) return;
+
+        const selector = getElementSelector(el);
+        const elBounds = el.getBoundingClientRect();
+        const relativeX = event.clientX - elBounds.left;
+        const relativeY = event.clientY - elBounds.top;
+
+        onPoint({
+            type: 'point',
+            selector,
+            xNormal: relativeX / elBounds.width,
+            yNormal: relativeY / elBounds.height
+        });
+    });
+
+    return (
+        <div className={cx(
+            'review-overlay',
+            'select-none fixed top-0 left-0 w-full h-full z-50',
+            'cursor-[url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M31%2016C31%2024.2843%2024.2843%2031%2016%2031C7.71574%2031%201.00001%2024.2843%201.00001%2016L1.00003%206.40219L1.00004%201.90082L1.00004%201L1.85657%201L6.28413%201L16%201.00001C24.2843%201.00001%2031%207.71574%2031%2016Z%22%20fill%3D%22black%22%20stroke%3D%22white%22%20stroke-width%3D%222%22/%3E%3Cpath%20d%3D%22M9%2016H23%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M16%209V23%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E"),auto]'
+        )} />
+    );
+}
diff --git a/web/packages/uier-toolbar/src/components/CommentSelectionHighlight.tsx b/web/packages/uier-toolbar/src/components/CommentSelectionHighlight.tsx
new file mode 100644
index 0000000000..980fc69c42
--- /dev/null
+++ b/web/packages/uier-toolbar/src/components/CommentSelectionHighlight.tsx
@@ -0,0 +1,35 @@
+'use client';
+
+import { HTMLAttributes } from 'react';
+import { cx } from '@signalco/ui-primitives/cx';
+import { useCommentItemRects } from '../hooks/useCommentItemRects';
+import { CommentSelection } from './Comments';
+
+type CommentSelectionHighlightProps = HTMLAttributes<HTMLDivElement> & {
+    commentSelection: CommentSelection;
+};
+
+export function CommentSelectionHighlight({
+    commentSelection, className, style
+}: CommentSelectionHighlightProps) {
+    const selectionRects = useCommentItemRects(commentSelection);
+    return (
+        <>
+            {selectionRects?.map((rect, i) => (
+                <div
+                    key={i}
+                    className={cx(
+                        'fixed select-none bg-red-400 opacity-40 pointer-events-none',
+                        className
+                    )}
+                    style={{
+                        left: rect.left,
+                        top: rect.top + (rect.height < 12 ? 0 : 4),
+                        width: rect.width,
+                        height: rect.height - (rect.height < 12 ? 0 : 8),
+                        ...style
+                    }} />
+            ))}
+        </>
+    );
+}
diff --git a/web/packages/uier-toolbar/src/components/CommentSelectionPopover.tsx b/web/packages/uier-toolbar/src/components/CommentSelectionPopover.tsx
new file mode 100644
index 0000000000..c4b99f4527
--- /dev/null
+++ b/web/packages/uier-toolbar/src/components/CommentSelectionPopover.tsx
@@ -0,0 +1,46 @@
+'use client';
+
+import { useState } from 'react';
+import { Tooltip } from '@signalco/ui-primitives/Tooltip';
+import { cx } from '@signalco/ui-primitives/cx';
+import { Button } from '@signalco/ui-primitives/Button';
+import { Comment } from '@signalco/ui-icons';
+import { orderBy } from '@signalco/js';
+import { useResizeObserver } from '@enterwell/react-hooks';
+import { popoverWidth, popoverWindowMargin } from './Comments';
+
+export function CommentSelectionPopover({ rects, onCreate }: { rects: DOMRect[]; onCreate: () => void; }) {
+    const [popoverHeight, setPopoverHeight] = useState(0);
+    const resizeObserverRef = useResizeObserver((_, entry) => {
+        setPopoverHeight(entry.contentRect.height);
+    });
+
+    // Calculate position of comment popover
+    const lastRangeRect = orderBy(rects, rr => rr.bottom).at(-1);
+    const { bottom, top, right } = lastRangeRect ?? { bottom: 0, top: 0, right: 0 };
+    const leftFixed = Math.min(window.innerWidth - popoverWidth / 2 - popoverWindowMargin, Math.max(popoverWidth / 2 + popoverWindowMargin, right ?? 0));
+    const topFixed = (bottom ?? 0) + popoverHeight + 20 + popoverWindowMargin > window.innerHeight
+        ? window.scrollY + (top ?? 0) - popoverHeight - 40
+        : window.scrollY + (bottom ?? 0) + 20;
+
+    return (
+        <div
+            ref={resizeObserverRef}
+            className={cx(
+                'absolute bg-card border rounded-full p-1 -translate-x-1/2'
+            )}
+            style={{ left: leftFixed, top: topFixed }}>
+            <div>
+                <Tooltip title="Add comment">
+                    <Button
+                        variant="plain"
+                        className="gap-2 rounded-full"
+                        onClick={onCreate}
+                        startDecorator={<Comment />}>
+                        Comment...
+                    </Button>
+                </Tooltip>
+            </div>
+        </div>
+    );
+}
diff --git a/web/packages/uier-toolbar/src/components/CommentThreadItem.tsx b/web/packages/uier-toolbar/src/components/CommentThreadItem.tsx
new file mode 100644
index 0000000000..015026eb9b
--- /dev/null
+++ b/web/packages/uier-toolbar/src/components/CommentThreadItem.tsx
@@ -0,0 +1,55 @@
+'use client';
+
+import { Typography } from '@signalco/ui-primitives/Typography';
+import { Stack } from '@signalco/ui-primitives/Stack';
+import { Row } from '@signalco/ui-primitives/Row';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@signalco/ui-primitives/Menu';
+import { IconButton } from '@signalco/ui-primitives/IconButton';
+import { Avatar } from '@signalco/ui-primitives/Avatar';
+import { Check, MoreHorizontal } from '@signalco/ui-icons';
+import { Timeago } from '@signalco/ui/Timeago';
+import { CommentItemThreadItem } from './Comments';
+
+export function CommentThreadItem({ comment, first, onDone }: { comment: CommentItemThreadItem; first?: boolean; onDone?: () => void; }) {
+    const { text } = comment;
+    const quote: string | undefined = undefined;//'quote';//comment.quote;
+    const author = 'Guest';//comment.author;
+    const avatarFallback = author[0]?.toUpperCase() ?? '';
+
+    return (
+        <Stack spacing={1}>
+            <Row spacing={1} justifyContent="space-between">
+                <Row spacing={0.5}>
+                    <Avatar size="sm">{avatarFallback}</Avatar>
+                    <Typography className="text-sm text-foreground">{author}</Typography>
+                    <span className="text-sm text-secondary-foreground">
+                        <Timeago format="nano" date={new Date()} />
+                    </span>
+                </Row>
+                <Row>
+                    {first && (
+                        <IconButton size="xs" variant="plain" title="Mark as Done" onClick={onDone}>
+                            <Check />
+                        </IconButton>
+                    )}
+                    <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                            <IconButton size="xs" variant="plain">
+                                <MoreHorizontal />
+                            </IconButton>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent>
+                            <DropdownMenuItem>Delete</DropdownMenuItem>
+                        </DropdownMenuContent>
+                    </DropdownMenu>
+                </Row>
+            </Row>
+            {Boolean(quote?.length) && (
+                <div className="border-l-2 border-muted-foreground bg-muted px-2 py-1 text-sm">
+                    {quote}
+                </div>
+            )}
+            <Typography level="body1">{text}</Typography>
+        </Stack>
+    );
+}
diff --git a/web/packages/uier-toolbar/src/components/CommentToolbar.tsx b/web/packages/uier-toolbar/src/components/CommentToolbar.tsx
new file mode 100644
index 0000000000..da8072922b
--- /dev/null
+++ b/web/packages/uier-toolbar/src/components/CommentToolbar.tsx
@@ -0,0 +1,33 @@
+'use client';
+
+import { Row } from '@signalco/ui-primitives/Row';
+import { IconButton } from '@signalco/ui-primitives/IconButton';
+import { Divider } from '@signalco/ui-primitives/Divider';
+import { Inbox, Menu } from '@signalco/ui-icons';
+import { CommentIcon } from './CommentIcon';
+
+type CommentToolbarProps = {
+    creatingPointComment: boolean;
+    onAddPointComment: () => void;
+    onShowSidebar: () => void;
+    onExitReview: () => void;
+};
+
+export function CommentToolbar({ creatingPointComment, onAddPointComment, onShowSidebar, onExitReview }: CommentToolbarProps) {
+    return (
+        <div className="fixed bottom-4 left-1/2 z-[51] -translate-x-1/2 rounded-full border bg-black p-1">
+            <Row spacing={0}>
+                <IconButton variant={creatingPointComment ? 'soft' : 'plain'} className="rounded-full" onClick={onAddPointComment}>
+                    <CommentIcon icon="add" size={24} variant="outlined" />
+                </IconButton>
+                <IconButton variant="plain" className="rounded-full" onClick={onShowSidebar}>
+                    <Inbox />
+                </IconButton>
+                <Divider orientation="vertical" />
+                <IconButton variant="plain" className="rounded-full" onClick={onExitReview}>
+                    <Menu />
+                </IconButton>
+            </Row>
+        </div>
+    );
+}
diff --git a/web/packages/uier-toolbar/src/components/Comments.tsx b/web/packages/uier-toolbar/src/components/Comments.tsx
new file mode 100644
index 0000000000..089dfd6915
--- /dev/null
+++ b/web/packages/uier-toolbar/src/components/Comments.tsx
@@ -0,0 +1,42 @@
+export const popoverWidth = 288;
+export const popoverWindowMargin = 8;
+
+export type CommentPoint = {
+    type: 'point';
+    selector: string;
+    xNormal: number;
+    yNormal: number;
+};
+
+export type CommentSelection = {
+    type: 'text';
+    text: string;
+    startSelector: string;
+    startOffset: number;
+    startType: 'text' | 'element';
+    endSelector?: string;
+    endOffset: number;
+    endType: 'text' | 'element';
+}
+
+export type CommentItemPosition = CommentPoint | CommentSelection;
+
+export type CommentItemThreadItem = {
+    id: string;
+    text: string;
+}
+
+export type CommentItemThread = {
+    items: CommentItemThreadItem[];
+}
+
+export type CommentItem = {
+    id?: string;
+    position: CommentPoint | CommentSelection;
+    thread: CommentItemThread;
+    resolved?: boolean;
+}
+
+export type CommentsGlobalProps = {
+    reviewParamKey?: string;
+}
diff --git a/web/packages/uier-toolbar/src/components/CommentsBootstrapper.tsx b/web/packages/uier-toolbar/src/components/CommentsBootstrapper.tsx
new file mode 100644
index 0000000000..1787bf37b2
--- /dev/null
+++ b/web/packages/uier-toolbar/src/components/CommentsBootstrapper.tsx
@@ -0,0 +1,24 @@
+'use client';
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { CommentsGlobal } from './CommentsGlobal';
+import { CommentsGlobalProps } from './Comments';
+
+const queryClient = new QueryClient();
+
+export function CommentsBootstrapper({
+    reviewParamKey = 'review'
+}: CommentsGlobalProps) {
+    const urlInReview = new URL(window.location.href).searchParams.get(reviewParamKey) === 'true';
+    console.log(urlInReview, window.location.href);
+    if (!urlInReview) {
+        return null;
+    }
+
+    return (
+        <QueryClientProvider client={queryClient}>
+            <CommentsGlobal
+                reviewParamKey={reviewParamKey} />
+        </QueryClientProvider>
+    );
+}
diff --git a/web/packages/uier-toolbar/src/components/CommentsGlobal.tsx b/web/packages/uier-toolbar/src/components/CommentsGlobal.tsx
new file mode 100644
index 0000000000..2267620882
--- /dev/null
+++ b/web/packages/uier-toolbar/src/components/CommentsGlobal.tsx
@@ -0,0 +1,113 @@
+'use client';
+
+import { useState } from 'react';
+import { getElementSelector } from '@signalco/js';
+import { useWindowEvent } from '@signalco/hooks/useWindowEvent';
+import { useDocumentEvent } from '@signalco/hooks/useDocumentEvent';
+import { useComments } from '../hooks/useComments';
+import { useCommentItemRects } from '../hooks/useCommentItemRects';
+import { CommentToolbar } from './CommentToolbar';
+import { CommentSelectionPopover } from './CommentSelectionPopover';
+import { CommentSelectionHighlight } from './CommentSelectionHighlight';
+import { CommentsGlobalProps, CommentSelection, CommentPoint, CommentItem } from './Comments';
+import { CommentPointOverlay } from './CommentPointOverlay';
+import { CommentBubble } from './CommentBubble';
+
+export function CommentsGlobal({
+    reviewParamKey = 'review'
+}: CommentsGlobalProps) {
+    const [creatingCommentSelection, setCreatingCommentSelection] = useState<CommentSelection>();
+    const [creatingComment, setCreatingComment] = useState<CommentItem>();
+
+    const { query: commentItems } = useComments();
+
+    const [creatingCommentPoint, setCreatingCommentPoint] = useState(false);
+
+    useWindowEvent('keydown', (event: KeyboardEvent) => {
+        if (event.key === 'Escape' && (creatingCommentSelection || creatingCommentPoint)) {
+            event.stopPropagation();
+            event.preventDefault();
+            setCreatingCommentPoint(false);
+            setCreatingCommentSelection(undefined);
+        }
+    }, [creatingCommentSelection, creatingCommentPoint]);
+
+    useDocumentEvent('selectionchange', () => {
+        // Ignore if selection is empty or no selection in document
+        const selection = window.getSelection();
+        const text = selection?.toString();
+        if (!selection || !text?.length) {
+            setCreatingCommentSelection(undefined);
+            return;
+        }
+
+        setCreatingCommentSelection({
+            text,
+            type: 'text',
+            startSelector: getElementSelector(selection.anchorNode instanceof Element ? selection.anchorNode : selection.anchorNode?.parentElement),
+            startOffset: selection.anchorOffset,
+            startType: selection.anchorNode?.nodeType === Node.TEXT_NODE ? 'text' : 'element',
+            endSelector: getElementSelector(selection.focusNode instanceof Element ? selection.focusNode : selection.focusNode?.parentElement),
+            endOffset: selection.focusOffset,
+            endType: selection.focusNode?.nodeType === Node.TEXT_NODE ? 'text' : 'element'
+        });
+    });
+
+    const creatingSelectionRects = useCommentItemRects(creatingCommentSelection);
+
+    const handleCreateComment = async () => {
+        if (!creatingCommentSelection) {
+            return;
+        }
+
+        setCreatingCommentSelection(undefined);
+        setCreatingComment({
+            position: creatingCommentSelection,
+            thread: { items: [] }
+        });
+    };
+
+    const handleCreateCommentPoint = async (commentPoint: CommentPoint) => {
+        setCreatingCommentPoint(false);
+        setCreatingComment({
+            position: commentPoint,
+            thread: { items: [] }
+        });
+    };
+
+    const handleExitReview = () => {
+        const url = new URL(window.location.href);
+        url.searchParams.delete(reviewParamKey);
+        window.history.replaceState({}, '', url.toString());
+    };
+
+    return (
+        <>
+            {(creatingComment ? [...(commentItems.data ?? []), creatingComment] : (commentItems.data ?? [])).map((commentItem) => (
+                <CommentBubble
+                    key={commentItem.id}
+                    commentItem={commentItem}
+                    creating={!commentItem.id}
+                    onCreated={() => setCreatingComment(undefined)}
+                    onCanceled={() => setCreatingComment(undefined)}
+                />
+            ))}
+            {creatingCommentSelection && (
+                <CommentSelectionHighlight commentSelection={creatingCommentSelection} />
+            )}
+            {creatingSelectionRects?.length > 0 && (
+                <CommentSelectionPopover
+                    rects={creatingSelectionRects}
+                    onCreate={handleCreateComment} />
+            )}
+            {creatingCommentPoint && (
+                <CommentPointOverlay onPoint={handleCreateCommentPoint} />
+            )}
+            <CommentToolbar
+                creatingPointComment={creatingCommentPoint}
+                onAddPointComment={() => setCreatingCommentPoint((curr) => !curr)}
+                onShowSidebar={() => { }}
+                onExitReview={handleExitReview} />
+        </>
+    );
+}
diff --git a/web/packages/uier-toolbar/src/hooks/useCommentItemRects.tsx b/web/packages/uier-toolbar/src/hooks/useCommentItemRects.tsx
new file mode 100644
index 0000000000..3c3cc5d724
--- /dev/null
+++ b/web/packages/uier-toolbar/src/hooks/useCommentItemRects.tsx
@@ -0,0 +1,87 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { arrayMax, orderBy } from '@signalco/js';
+import { useWindowRect } from '@signalco/hooks/useWindowRect';
+import { CommentItemPosition } from '../components/Comments';
+
+
+export function useCommentItemRects(commentSelection: CommentItemPosition | null | undefined) {
+    const [selectionRects, setSelectionRects] = useState<DOMRect[]>([]);
+
+    const windowRect = useWindowRect(window);
+
+    useEffect(() => {
+        if (!commentSelection) {
+            setSelectionRects([]);
+            return;
+        }
+
+        if (commentSelection.type !== 'text') {
+            const element = commentSelection?.selector?.length
+                ? document.querySelector(commentSelection.selector)
+                : undefined;
+
+            if (!element) {
+                setSelectionRects([]);
+                return;
+            }
+
+            const rects = [...element.getClientRects()];
+            const lastRect = orderBy(rects, r => r.bottom).at(-1);
+
+            const calculatedRect = new DOMRect(
+                (lastRect?.left ?? 0) + (lastRect?.width ?? 0) * commentSelection.xNormal,
+                (lastRect?.top ?? 0) + (lastRect?.height ?? 0) * commentSelection.yNormal,
+                1,
+                1
+            );
+
+            setSelectionRects([calculatedRect]);
+        } else if (commentSelection.type === 'text') {
+            const startElement = commentSelection?.startSelector?.length
+                ? document.querySelector(commentSelection.startSelector)
+                : undefined;
+            const endElement = commentSelection?.endSelector?.length
+                ? document.querySelector(commentSelection.endSelector)
+                : startElement;
+
+            if (!startElement || !endElement) {
+                setSelectionRects([]);
+                return;
+            }
+
+            const startElementOrTextNode = commentSelection.startType === 'text'
+                ? startElement.childNodes[0]
+                : startElement;
+            const endElementOrTextNode = commentSelection.endType === 'text'
+                ? endElement.childNodes[0]
+                : endElement;
+
+            if (!startElementOrTextNode || !endElementOrTextNode) {
+                setSelectionRects([]);
+                return;
+            }
+
+            // Fix reverse order of start/end elements
+            const isReversed = (arrayMax([...startElement.getClientRects()], r => r?.top ?? 0) ?? 0) >
+                (arrayMax([...endElement.getClientRects()], r => r?.top ?? 0) ?? 0);
+            const firstElementOrTextNode = isReversed ? endElementOrTextNode : startElementOrTextNode;
+            const lastElementOrTextNode = isReversed ? startElementOrTextNode : endElementOrTextNode;
+
+            const range = document.createRange();
+            const startOffset = isReversed || (firstElementOrTextNode === lastElementOrTextNode && commentSelection.startOffset > commentSelection.endOffset)
+                ? commentSelection.endOffset
+                : commentSelection.startOffset;
+            const endOffset = isReversed || (firstElementOrTextNode === lastElementOrTextNode && commentSelection.startOffset > commentSelection.endOffset)
+                ? commentSelection.startOffset
+                : commentSelection.endOffset;
+
+            range.setStart(firstElementOrTextNode, Math.min(startOffset, firstElementOrTextNode.textContent?.length ?? 0));
+            range.setEnd(lastElementOrTextNode, Math.min(endOffset, lastElementOrTextNode.textContent?.length ?? 0));
+            setSelectionRects([...range.getClientRects()]);
+        }
+    }, [commentSelection, windowRect]);
+
+    return selectionRects;
+}
diff --git a/web/packages/uier-toolbar/src/hooks/useComments.tsx b/web/packages/uier-toolbar/src/hooks/useComments.tsx
new file mode 100644
index 0000000000..56867d6116
--- /dev/null
+++ b/web/packages/uier-toolbar/src/hooks/useComments.tsx
@@ -0,0 +1,59 @@
+'use client';
+
+import { UseMutationResult, UseQueryResult, useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { CommentItem } from '../components/Comments';
+
+export function useComments(): {
+    query: UseQueryResult<CommentItem[], Error>;
+    upsert: UseMutationResult<string, Error, CommentItem, unknown>;
+    delete: UseMutationResult<void, Error, string, unknown>;
+} {
+    const client = useQueryClient();
+    const query = useQuery({
+        queryKey: ['comments'],
+        queryFn: () => {
+            const comments = JSON.parse(localStorage.getItem('comments') ?? '[]') as CommentItem[];
+            return comments.filter((c: CommentItem) => !c.resolved);
+        }
+    });
+
+    const mutateUpsert = useMutation({
+        mutationFn: async (comment: CommentItem) => {
+            const comments = JSON.parse(localStorage.getItem('comments') ?? '[]') as CommentItem[];
+            if (!comment.id) {
+                comment.id = 'mock' + Math.random() + Date.now();
+            }
+            const currentComment = comments.find((c: CommentItem) => Boolean(comment.id) && c.id === comment.id);
+            if (currentComment) {
+                Object.assign(currentComment, comment);
+            } else {
+                comments.push(comment);
+            }
+            localStorage.setItem('comments', JSON.stringify(comments));
+            client.invalidateQueries({
+                queryKey: ['comments']
+            });
+            return comment.id;
+        }
+    });
+
+    const mutateDelete = useMutation({
+        mutationFn: async (id: string) => {
+            const comments = JSON.parse(localStorage.getItem('comments') ?? '[]') as CommentItem[];
+            const currentComment = comments.find((c: CommentItem) => c.id === id);
+            if (currentComment) {
+                comments.splice(comments.indexOf(currentComment), 1);
+            }
+            localStorage.setItem('comments', JSON.stringify(comments));
+        },
+        onSuccess: () => {
+            client.invalidateQueries({
+                queryKey: ['comments']
+            });
+        }
+    })
+
+    return {
+        query, upsert: mutateUpsert, delete: mutateDelete
+    };
+}
diff --git a/web/packages/uier-toolbar/src/index.css b/web/packages/uier-toolbar/src/index.css
new file mode 100644
index 0000000000..1fe6561470
--- /dev/null
+++ b/web/packages/uier-toolbar/src/index.css
@@ -0,0 +1 @@
+@import '@signalco/ui/index.css';
diff --git a/web/packages/uier-toolbar/src/index.tsx b/web/packages/uier-toolbar/src/index.tsx
new file mode 100644
index 0000000000..e184f26ad8
--- /dev/null
+++ b/web/packages/uier-toolbar/src/index.tsx
@@ -0,0 +1,20 @@
+import { createRoot } from 'react-dom/client';
+import './index.css';
+import { CommentsBootstrapper } from './components/CommentsBootstrapper';
+
+function MountOnPage() {
+    const container = document.createElement('div');
+    container.setAttribute('id', 'uier-toolbar');
+    const shadowRoot = container.attachShadow({ mode: 'closed' });
+
+    const stylesheet = document.createElement('link');
+    stylesheet.setAttribute('rel', 'stylesheet');
+    stylesheet.setAttribute('href', 'http://localhost:5500/index.css');
+    shadowRoot.appendChild(stylesheet);
+
+    document.body.appendChild(container);
+    const root = createRoot(shadowRoot);
+    root.render(<CommentsBootstrapper />);
+}
+
+MountOnPage();
diff --git a/web/packages/uier-toolbar/tailwind.config.cjs b/web/packages/uier-toolbar/tailwind.config.cjs
new file mode 100644
index 0000000000..9f7d09f8bc
--- /dev/null
+++ b/web/packages/uier-toolbar/tailwind.config.cjs
@@ -0,0 +1,12 @@
+import { baseConfig } from '@signalco/tailwindcss-config-signalco';
+
+/** @type {import('tailwindcss').Config} */
+// eslint-disable-next-line import/no-anonymous-default-export
+export default {
+    presets: [baseConfig],
+    content: [
+        './src/**/*.{ts,tsx}',
+        '../ui/src/**/*.{ts,tsx}',
+        '../ui-primitives/src/**/*.{ts,tsx}'
+    ]
+}
diff --git a/web/packages/uier-toolbar/tsconfig.json b/web/packages/uier-toolbar/tsconfig.json
new file mode 100644
index 0000000000..e36c62b31e
--- /dev/null
+++ b/web/packages/uier-toolbar/tsconfig.json
@@ -0,0 +1,13 @@
+{
+    "$schema": "https://json.schemastore.org/tsconfig",
+    "extends": "@signalco/tsconfig/react-library.json",
+    "include": [
+        "./src/**/*.ts*"
+    ],
+    "compilerOptions": {
+        "jsx": "react-jsx"
+    },
+    "exclude": [
+        "node_modules"
+    ]
+}
\ No newline at end of file
diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
index 81ab57a4cb..19b211b0db 100644
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -1275,9 +1275,6 @@ importers:
       classix:
         specifier: 2.1.35
         version: 2.1.35
-      next:
-        specifier: 14.0.4
-        version: 14.0.4(react-dom@18.2.0)(react@18.2.0)(sass@1.69.5)
       postcss:
         specifier: 8.4.32
         version: 8.4.32
@@ -1447,6 +1444,108 @@ importers:
         specifier: 5.3.3
         version: 5.3.3
 
+  packages/uier-toolbar:
+    devDependencies:
+      '@enterwell/react-hooks':
+        specifier: 0.4.0
+        version: 0.4.0(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-checkbox':
+        specifier: 1.0.4
+        version: 1.0.4(@types/react-dom@18.2.17)(@types/react@18.2.43)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-dialog':
+        specifier: 1.0.5
+        version: 1.0.5(@types/react-dom@18.2.17)(@types/react@18.2.43)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-dropdown-menu':
+        specifier: 2.0.6
+        version: 2.0.6(@types/react-dom@18.2.17)(@types/react@18.2.43)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-menubar':
+        specifier: 1.0.4
+        version: 1.0.4(@types/react-dom@18.2.17)(@types/react@18.2.43)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-popover':
+        specifier: 1.0.7
+        version: 1.0.7(@types/react-dom@18.2.17)(@types/react@18.2.43)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-select':
+        specifier: 2.0.0
+        version: 2.0.0(@types/react-dom@18.2.17)(@types/react@18.2.43)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-slot':
+        specifier: 1.0.2
+        version: 1.0.2(@types/react@18.2.43)(react@18.2.0)
+      '@signalco/eslint-config-signalco':
+        specifier: workspace:*
+        version: link:../eslint-config-signalco
+      '@signalco/hooks':
+        specifier: workspace:*
+        version: link:../hooks
+      '@signalco/js':
+        specifier: workspace:*
+        version: link:../js
+      '@signalco/tailwindcss-config-signalco':
+        specifier: workspace:*
+        version: link:../tailwindcss-config-signalco
+      '@signalco/tsconfig':
+        specifier: workspace:*
+        version: link:../tsconfig
+      '@signalco/ui':
+        specifier: workspace:*
+        version: link:../ui
+      '@signalco/ui-icons':
+        specifier: workspace:*
+        version: link:../ui-icons
+      '@signalco/ui-primitives':
+        specifier: workspace:*
+        version: link:../ui-primitives
+      '@tanstack/react-query':
+        specifier: 5.13.4
+        version: 5.13.4(react@18.2.0)
+      '@types/react':
+        specifier: 18.2.43
+        version: 18.2.43
+      '@types/react-dom':
+        specifier: 18.2.17
+        version: 18.2.17
+      '@types/react-timeago':
+        specifier: 4.1.6
+        version: 4.1.6
+      autoprefixer:
+        specifier: 10.4.16
+        version: 10.4.16(postcss@8.4.32)
+      classix:
+        specifier: 2.1.35
+        version: 2.1.35
+      postcss:
+        specifier: 8.4.32
+        version: 8.4.32
+      postcss-preset-env:
+        specifier: 9.3.0
+        version: 9.3.0(postcss@8.4.32)
+      react:
+        specifier: 18.2.0
+        version: 18.2.0
+      react-dom:
+        specifier: 18.2.0
+        version: 18.2.0(react@18.2.0)
+      react-timeago:
+        specifier: 7.2.0
+        version: 7.2.0(react@18.2.0)
+      sass:
+        specifier: 1.69.5
+        version: 1.69.5
+      tailwind-merge:
+        specifier: 2.1.0
+        version: 2.1.0
+      tailwindcss:
+        specifier: 3.3.6
+        version: 3.3.6
+      tailwindcss-animate:
+        specifier: 1.0.7
+        version: 1.0.7(tailwindcss@3.3.6)
+      tsup:
+        specifier: 8.0.1
+        version: 8.0.1(postcss@8.4.32)(typescript@5.3.3)
+      typescript:
+        specifier: 5.3.3
+        version: 5.3.3
+
 packages:
 
   /@aashutoshrathi/word-wrap@1.2.6:
@@ -1584,7 +1683,7 @@ packages:
     dependencies:
       '@babel/compat-data': 7.23.3
       '@babel/helper-validator-option': 7.22.15
-      browserslist: 4.22.1
+      browserslist: 4.22.2
       lru-cache: 5.1.1
       semver: 6.3.1
     dev: true
@@ -3776,7 +3875,6 @@ packages:
     dependencies:
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-    dev: false
 
   /@esbuild-kit/core-utils@3.3.2:
     resolution: {integrity: sha512-sPRAnw9CdSsRmEtnsl2WXWdyquogVpB3yZ3dgwJfe8zrOzTsV7cJvmwrKVa+0ma5BoiGJ+BoqkMvawbayKUsqQ==}
@@ -5682,7 +5780,7 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@babel/runtime': 7.23.2
+      '@babel/runtime': 7.23.5
       '@radix-ui/primitive': 1.0.1
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.43)(react@18.2.0)
       '@radix-ui/react-context': 1.0.1(@types/react@18.2.43)(react@18.2.0)
@@ -5959,7 +6057,7 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@babel/runtime': 7.23.2
+      '@babel/runtime': 7.23.5
       '@radix-ui/primitive': 1.0.1
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.43)(react@18.2.0)
       '@radix-ui/react-context': 1.0.1(@types/react@18.2.43)(react@18.2.0)
@@ -7806,7 +7904,6 @@ packages:
 
   /@tanstack/query-core@5.13.4:
     resolution: {integrity: sha512-8+rJucXvC/xlr4OrxHhEIob/cTlbT4fgmz1VsvB0D12FRStKaXeLORNGcOhSAynRd2NL74SV/Qq0IIb4DedLcA==}
-    dev: false
 
   /@tanstack/query-devtools@5.13.5:
     resolution: {integrity: sha512-effSYz9AWcZ6sNd+c8LCBYFIuDZApoCTXEpRlEYChBZpMz9QUUVMLToThwCyUY49+T5pANL3XxgZf3HV7hwJlg==}
@@ -7854,7 +7951,6 @@ packages:
     dependencies:
       '@tanstack/query-core': 5.13.4
       react: 18.2.0
-    dev: false
 
   /@tippyjs/react@4.2.6(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-91RicDR+H7oDSyPycI13q3b7o4O60wa2oRbjlz2fyRLmHImc4vyDwuUP8NtZaN0VARJY5hybvDYrFzhY9+Lbyw==}
@@ -9385,8 +9481,8 @@ packages:
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      browserslist: 4.22.1
-      caniuse-lite: 1.0.30001562
+      browserslist: 4.22.2
+      caniuse-lite: 1.0.30001568
       fraction.js: 4.3.7
       normalize-range: 0.1.2
       picocolors: 1.0.0
@@ -9749,6 +9845,16 @@ packages:
     resolution: {integrity: sha512-HpGFw18DgFWlncDfjTa2rcQ4W88O1mC8e8yZ2AvQY5KDaktSTwo+KRf6nHK6FRI5FyRyb/5T6+TSxfP7QyGsmQ==}
     dev: true
 
+  /bundle-require@4.0.2(esbuild@0.19.8):
+    resolution: {integrity: sha512-jwzPOChofl67PSTW2SGubV9HBQAhhR2i6nskiOThauo9dzwDUgOWQScFVaJkjEfYX+UXiD+LEx8EblQMc2wIag==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    peerDependencies:
+      esbuild: '>=0.17'
+    dependencies:
+      esbuild: 0.19.8
+      load-tsconfig: 0.2.5
+    dev: true
+
   /busboy@1.6.0:
     resolution: {integrity: sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==}
     engines: {node: '>=10.16.0'}
@@ -9765,6 +9871,11 @@ packages:
     engines: {node: '>= 0.8'}
     dev: true
 
+  /cac@6.7.14:
+    resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
+    engines: {node: '>=8'}
+    dev: true
+
   /call-bind@1.0.5:
     resolution: {integrity: sha512-C3nQxfFZxFRVoJoGKKI8y3MOEo129NQ+FgQ08iye+Mk4zNZZGdjfs06bVTr+DBSlA66Q2VEcMki/cUCP4SercQ==}
     dependencies:
@@ -10205,7 +10316,7 @@ packages:
   /core-js-compat@3.33.2:
     resolution: {integrity: sha512-axfo+wxFVxnqf8RvxTzoAlzW4gRoacrHeoFlc9n0x50+7BEyZL/Rt3hicaED1/CEd7I6tPCPVUYcJwCMO5XUYw==}
     dependencies:
-      browserslist: 4.22.1
+      browserslist: 4.22.2
     dev: true
 
   /core-js-pure@3.33.2:
@@ -10956,7 +11067,7 @@ packages:
   /dom-helpers@5.2.1:
     resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==}
     dependencies:
-      '@babel/runtime': 7.23.2
+      '@babel/runtime': 7.23.5
       csstype: 3.1.2
     dev: false
 
@@ -13532,6 +13643,11 @@ packages:
     resolution: {integrity: sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==}
     hasBin: true
 
+  /joycon@3.1.1:
+    resolution: {integrity: sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw==}
+    engines: {node: '>=10'}
+    dev: true
+
   /js-cookie@3.0.1:
     resolution: {integrity: sha512-+0rgsUXZu4ncpPxRL+lNEptWMOWl9etvPHc/koSRp6MPwpRYAhmk0dUG00J4bxVV3r9uUzfo24wW0knS07SKSw==}
     engines: {node: '>=12'}
@@ -13779,6 +13895,11 @@ packages:
     resolution: {integrity: sha512-1elJrH8MwUgr77Rgmx4JgB/nBgISYVoGossH6pAfCeHG+07TblTn6RWKx0MKozEMJU6NCFYHRih9M8ZtV3YZ+Q==}
     dev: false
 
+  /load-tsconfig@0.2.5:
+    resolution: {integrity: sha512-IXO6OCs9yg8tMKzfPZ1YmheJbZCiEsnBdcB03l0OcfK9prKnJb96siuHCr5Fl37/yo9DnKU+TLpxzTUspw9shg==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    dev: true
+
   /loader-runner@4.3.0:
     resolution: {integrity: sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==}
     engines: {node: '>=6.11.5'}
@@ -16244,7 +16365,7 @@ packages:
       '@csstools/postcss-trigonometric-functions': 3.0.2(postcss@8.4.32)
       '@csstools/postcss-unset-value': 3.0.0(postcss@8.4.32)
       autoprefixer: 10.4.16(postcss@8.4.32)
-      browserslist: 4.22.1
+      browserslist: 4.22.2
       css-blank-pseudo: 6.0.0(postcss@8.4.32)
       css-has-pseudo: 6.0.0(postcss@8.4.32)
       css-prefers-color-scheme: 9.0.0(postcss@8.4.32)
@@ -18609,6 +18730,11 @@ packages:
       punycode: 2.3.1
     dev: true
 
+  /tree-kill@1.2.2:
+    resolution: {integrity: sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==}
+    hasBin: true
+    dev: true
+
   /trim-lines@3.0.1:
     resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
     dev: false
@@ -18688,6 +18814,46 @@ packages:
   /tslib@2.6.2:
     resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
 
+  /tsup@8.0.1(postcss@8.4.32)(typescript@5.3.3):
+    resolution: {integrity: sha512-hvW7gUSG96j53ZTSlT4j/KL0q1Q2l6TqGBFc6/mu/L46IoNWqLLUzLRLP1R8Q7xrJTmkDxxDoojV5uCVs1sVOg==}
+    engines: {node: '>=18'}
+    hasBin: true
+    peerDependencies:
+      '@microsoft/api-extractor': ^7.36.0
+      '@swc/core': ^1
+      postcss: ^8.4.12
+      typescript: '>=4.5.0'
+    peerDependenciesMeta:
+      '@microsoft/api-extractor':
+        optional: true
+      '@swc/core':
+        optional: true
+      postcss:
+        optional: true
+      typescript:
+        optional: true
+    dependencies:
+      bundle-require: 4.0.2(esbuild@0.19.8)
+      cac: 6.7.14
+      chokidar: 3.5.3
+      debug: 4.3.4
+      esbuild: 0.19.8
+      execa: 5.1.1
+      globby: 11.1.0
+      joycon: 3.1.1
+      postcss: 8.4.32
+      postcss-load-config: 4.0.1(postcss@8.4.32)
+      resolve-from: 5.0.0
+      rollup: 4.4.1
+      source-map: 0.8.0-beta.0
+      sucrase: 3.34.0
+      tree-kill: 1.2.2
+      typescript: 5.3.3
+    transitivePeerDependencies:
+      - supports-color
+      - ts-node
+    dev: true
+
   /tty-browserify@0.0.1:
     resolution: {integrity: sha512-C3TaO7K81YvjCgQH9Q1S3R3P3BtN3RIM8n+OvX4il1K1zgE8ZhI0op7kClgkxtutIE8hQrcrHBXvIheqKUUCxw==}
     dev: true
@@ -19702,7 +19868,7 @@ packages:
       '@apideck/better-ajv-errors': 0.3.6(ajv@8.12.0)
       '@babel/core': 7.23.6
       '@babel/preset-env': 7.23.3(@babel/core@7.23.6)
-      '@babel/runtime': 7.23.2
+      '@babel/runtime': 7.23.5
       '@rollup/plugin-babel': 5.3.1(@babel/core@7.23.6)(rollup@2.79.1)
       '@rollup/plugin-node-resolve': 11.2.1(rollup@2.79.1)
       '@rollup/plugin-replace': 2.4.2(rollup@2.79.1)
diff --git a/web/signalco.code-workspace b/web/signalco.code-workspace
index 3163a3d31f..ed630d3e06 100644
--- a/web/signalco.code-workspace
+++ b/web/signalco.code-workspace
@@ -79,6 +79,10 @@
 		{
 			"name": "📦 @signalco/ui-primitives",
 			"path": "packages/ui-primitives"
+		},
+		{
+			"name": "📦 @uier/toolbar",
+			"path": "packages/uier-toolbar"
 		}
 	],
 	"settings": {