@dfosco/storyboard-core 4.2.0-beta.2 → 4.2.0-beta.21

package/src/CanvasUndoRedo.css

@@ -0,0 +1,36 @@
+.canvas-undo-bar {
+  display: flex;
+  align-items: center;
+  border-radius: 10px;
+  border: 2.5px solid var(--sb--trigger-border, var(--color-slate-400));
+  background: var(--sb--trigger-bg, var(--color-slate-100));
+  overflow: hidden;
+}
+
+.canvas-undo-btn {
+  all: unset;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 38px;
+  color: var(--sb--trigger-text, var(--color-slate-600));
+  transition: background 120ms;
+}
+
+.canvas-undo-btn:hover:not(:disabled) {
+  background: var(--sb--trigger-bg-hover, var(--color-slate-300));
+}
+
+.canvas-undo-btn:disabled {
+  opacity: 0.3;
+  cursor: default;
+}
+
+.canvas-undo-separator {
+  width: 2px;
+  height: 40px;
+  background: var(--sb--trigger-border, var(--color-slate-400));
+  flex-shrink: 0;
+}

package/src/CanvasUndoRedo.jsx

@@ -0,0 +1,62 @@
+/**
+ * CanvasUndoRedo — grouped undo/redo button bar.
+ */
+import { useState, useEffect } from 'react'
+import './CanvasUndoRedo.css'
+import * as Tooltip from './lib/components/ui/tooltip/index.js'
+
+export default function CanvasUndoRedo({ config = {}, data, tabindex = -1 }) {
+  const [canUndo, setCanUndo] = useState(false)
+  const [canRedo, setCanRedo] = useState(false)
+
+  useEffect(() => {
+    function handleUndoRedoState(e) {
+      setCanUndo(!!e.detail?.canUndo)
+      setCanRedo(!!e.detail?.canRedo)
+    }
+    document.addEventListener('storyboard:canvas:undo-redo-state', handleUndoRedoState)
+    return () => {
+      document.removeEventListener('storyboard:canvas:undo-redo-state', handleUndoRedoState)
+    }
+  }, [])
+
+  if (!data) return null
+
+  return (
+    <div className="canvas-undo-bar" role="group" aria-label={config.ariaLabel || 'Undo and redo'}>
+      <Tooltip.Root>
+        <Tooltip.Trigger>
+          <button
+            className="canvas-undo-btn"
+            onClick={() => data.undo()}
+            disabled={!canUndo}
+            aria-label="Undo"
+            tabIndex={tabindex}
+          >
+            <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+              <path d="M6.78 1.97a.75.75 0 0 1 0 1.06L3.81 6h6.44A4.75 4.75 0 0 1 15 10.75v2.5a.75.75 0 0 1-1.5 0v-2.5a3.25 3.25 0 0 0-3.25-3.25H3.81l2.97 2.97a.75.75 0 1 1-1.06 1.06L1.47 7.28a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z" />
+            </svg>
+          </button>
+        </Tooltip.Trigger>
+        <Tooltip.Content side="top">Undo (⌘Z)</Tooltip.Content>
+      </Tooltip.Root>
+      <span className="canvas-undo-separator"></span>
+      <Tooltip.Root>
+        <Tooltip.Trigger>
+          <button
+            className="canvas-undo-btn"
+            onClick={() => data.redo()}
+            disabled={!canRedo}
+            aria-label="Redo"
+            tabIndex={-1}
+          >
+            <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+              <path d="M9.22 1.97a.75.75 0 0 0 0 1.06L12.19 6H5.75A4.75 4.75 0 0 0 1 10.75v2.5a.75.75 0 0 0 1.5 0v-2.5a3.25 3.25 0 0 1 3.25-3.25h6.44l-2.97 2.97a.75.75 0 1 0 1.06 1.06l4.25-4.25a.75.75 0 0 0 0-1.06l-4.25-4.25a.75.75 0 0 0-1.06 0Z" />
+            </svg>
+          </button>
+        </Tooltip.Trigger>
+        <Tooltip.Content side="top">Redo (⌘⇧Z)</Tooltip.Content>
+      </Tooltip.Root>
+    </div>
+  )
+}

package/src/CanvasZoomControl.css

@@ -0,0 +1,53 @@
+.canvas-zoom-bar {
+  display: flex;
+  align-items: center;
+  border-radius: 10px;
+  border: 2.5px solid var(--sb--trigger-border, var(--color-slate-400));
+  background: var(--sb--trigger-bg, var(--color-slate-100));
+  overflow: hidden;
+}
+
+.canvas-zoom-btn {
+  all: unset;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 38px;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--sb--trigger-text, var(--color-slate-600));
+  transition: background 120ms;
+}
+
+.canvas-zoom-btn:hover:not(:disabled) {
+  background: var(--sb--trigger-bg-hover, var(--color-slate-300));
+}
+
+.canvas-zoom-btn:disabled {
+  opacity: 0.3;
+  cursor: default;
+}
+
+.canvas-zoom-label {
+  all: unset;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 48px;
+  height: 38px;
+  padding: 0 4px;
+  font-size: 13px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  color: var(--sb--trigger-text, var(--color-slate-600));
+  border-left: 2px solid var(--sb--trigger-border, var(--color-slate-400));
+  border-right: 2px solid var(--sb--trigger-border, var(--color-slate-400));
+  transition: background 120ms;
+}
+
+.canvas-zoom-label:hover {
+  background: var(--sb--trigger-bg-hover, var(--color-slate-300));
+}

package/src/CanvasZoomControl.jsx

@@ -0,0 +1,49 @@
+/**
+ * CanvasZoomControl — zoom in/out/reset bar for canvas pages.
+ */
+import './CanvasZoomControl.css'
+import * as Tooltip from './lib/components/ui/tooltip/index.js'
+
+export default function CanvasZoomControl({ config = {}, data, zoom = 100, tabindex = -1 }) {
+  if (!data) return null
+
+  return (
+    <div className="canvas-zoom-bar" role="group" aria-label={config.ariaLabel || 'Zoom controls'}>
+      <Tooltip.Root>
+        <Tooltip.Trigger>
+          <button
+            className="canvas-zoom-btn"
+            onClick={() => data.zoomOut(zoom)}
+            disabled={zoom <= data.ZOOM_MIN}
+            aria-label="Decrease zoom"
+            tabIndex={tabindex}
+          >−</button>
+        </Tooltip.Trigger>
+        <Tooltip.Content side="top">Decrease zoom</Tooltip.Content>
+      </Tooltip.Root>
+      <Tooltip.Root>
+        <Tooltip.Trigger>
+          <button
+            className="canvas-zoom-label"
+            onClick={() => data.zoomReset()}
+            aria-label="Zoom to 100%"
+            tabIndex={-1}
+          >{zoom}%</button>
+        </Tooltip.Trigger>
+        <Tooltip.Content side="top">Zoom to 100%</Tooltip.Content>
+      </Tooltip.Root>
+      <Tooltip.Root>
+        <Tooltip.Trigger>
+          <button
+            className="canvas-zoom-btn"
+            onClick={() => data.zoomIn(zoom)}
+            disabled={zoom >= data.ZOOM_MAX}
+            aria-label="Increase zoom"
+            tabIndex={-1}
+          >+</button>
+        </Tooltip.Trigger>
+        <Tooltip.Content side="top">Increase zoom</Tooltip.Content>
+      </Tooltip.Root>
+    </div>
+  )
+}

package/src/CanvasZoomToFit.css

@@ -0,0 +1,18 @@
+.canvas-standalone-btn {
+  all: unset;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  height: 38px;
+  border-radius: 10px;
+  border: 2.5px solid var(--sb--trigger-border, var(--color-slate-400));
+  background: var(--sb--trigger-bg, var(--color-slate-100));
+  color: var(--sb--trigger-text, var(--color-slate-600));
+  transition: background 120ms;
+}
+
+.canvas-standalone-btn:hover {
+  background: var(--sb--trigger-bg-hover, var(--color-slate-300));
+}

package/src/CanvasZoomToFit.jsx

@@ -0,0 +1,26 @@
+/**
+ * CanvasZoomToFit — standalone zoom-to-objects button.
+ */
+import './CanvasZoomToFit.css'
+import * as Tooltip from './lib/components/ui/tooltip/index.js'
+import Icon from './svelte-plugin-ui/components/Icon.jsx'
+
+export default function CanvasZoomToFit({ config = {}, data, tabindex = -1 }) {
+  if (!data) return null
+
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger>
+        <button
+          className="canvas-standalone-btn"
+          onClick={() => data.zoomToFit()}
+          aria-label={config.label || 'Zoom to objects'}
+          tabIndex={tabindex}
+        >
+          <Icon name={config.icon || 'iconoir/square-3d-three-points'} size={16} {...(config.meta || {})} />
+        </button>
+      </Tooltip.Trigger>
+      <Tooltip.Content side="top">{config.label || 'Zoom to objects'}</Tooltip.Content>
+    </Tooltip.Root>
+  )
+}

package/src/CommandMenu.css

@@ -0,0 +1,8 @@
+.local-dot {
+  display: inline-block;
+  width: 4px;
+  height: 4px;
+  background: #1a7f37;
+  border-radius: 50%;
+  flex-shrink: 0;
+}

package/src/CommandMenu.jsx

@@ -0,0 +1,286 @@
+/**
+ * CommandMenu — ⌘ trigger + config-driven dropdown menu.
+ * Renders actions from the command action registry by type:
+ *   default  → DropdownMenu.Item
+ *   toggle   → DropdownMenu.CheckboxItem
+ *   submenu  → DropdownMenu.Sub with SubTrigger + SubContent
+ */
+
+import './CommandMenu.css';
+import { useState, useEffect, useMemo, useCallback } from 'react'
+import * as DropdownMenu from './lib/components/ui/dropdown-menu/index.js'
+import * as Panel from './lib/components/ui/panel/index.js'
+import { TriggerButton } from './lib/components/ui/trigger-button/index.js'
+import Icon from './svelte-plugin-ui/components/Icon.jsx'
+import { getActionsForMode, executeAction, getActionChildren, subscribeToCommandActions } from './commandActions.js'
+import { getToolbarToolState, isToolbarToolLocalOnly, subscribeToToolbarToolStates } from './toolStateStore.js'
+import { getCurrentMode, subscribeToMode } from './svelte-plugin-ui/stores/types.js'
+
+const localDotStyle = {
+  display: 'inline-block',
+  width: 4,
+  height: 4,
+  background: '#1a7f37',
+  borderRadius: '50%',
+  flexShrink: 0,
+}
+
+export default function CommandMenu({
+  basePath = '/',
+  open: controlledOpen,
+  onOpenChange,
+  tabindex,
+  icon = 'iconoir/key-command',
+  iconMeta = {},
+  flowDialogOpen: controlledFlowDialogOpen,
+  onFlowDialogOpenChange,
+  flowName = 'default',
+  flowJson = '',
+  flowError = null,
+  shortcuts = {},
+}) {
+  const [internalOpen, setInternalOpen] = useState(false)
+  const open = controlledOpen !== undefined ? controlledOpen : internalOpen
+  const setOpen = useCallback((v) => {
+    const val = typeof v === 'function' ? v(open) : v
+    if (onOpenChange) onOpenChange(val)
+    else setInternalOpen(val)
+  }, [onOpenChange, open])
+
+  const [internalFlowDialogOpen, setInternalFlowDialogOpen] = useState(false)
+  const flowDialogOpen = controlledFlowDialogOpen !== undefined ? controlledFlowDialogOpen : internalFlowDialogOpen
+  const setFlowDialogOpen = useCallback((v) => {
+    const val = typeof v === 'function' ? v(flowDialogOpen) : v
+    if (onFlowDialogOpenChange) onFlowDialogOpenChange(val)
+    else setInternalFlowDialogOpen(val)
+  }, [onFlowDialogOpenChange, flowDialogOpen])
+
+  const [actionsVersion, setActionsVersion] = useState(0)
+  const [mode, setMode] = useState(getCurrentMode)
+
+  useEffect(() => {
+    const unsub = subscribeToCommandActions(() => setActionsVersion(v => v + 1))
+    return unsub
+  }, [])
+
+  useEffect(() => {
+    const unsub = subscribeToToolbarToolStates(() => setActionsVersion(v => v + 1))
+    return unsub
+  }, [])
+
+  useEffect(() => {
+    const unsub = subscribeToMode(() => setMode(getCurrentMode()))
+    return unsub
+  }, [])
+
+  const resolvedActions = useMemo(() => {
+    void actionsVersion
+    const raw = getActionsForMode(mode)
+    return raw.filter(a => {
+      if (!a.toolKey) return true
+      const state = getToolbarToolState(a.toolKey)
+      return state !== 'disabled' && state !== 'hidden'
+    })
+  }, [actionsVersion, mode])
+
+  function handleAction(action) {
+    executeAction(action.id)
+    setOpen(false)
+  }
+
+  function handleToggleSelect(e, action) {
+    e.preventDefault()
+    executeAction(action.id)
+  }
+
+  function handleSubmenuChildSelect(e, child) {
+    e.preventDefault()
+    if (child.execute) child.execute()
+    setActionsVersion(v => v + 1)
+  }
+
+  function handleOpenChange(isOpen) {
+    if (isOpen) setActionsVersion(v => v + 1)
+    setOpen(isOpen)
+  }
+
+  function renderLocalDot(toolKey) {
+    if (!toolKey || !isToolbarToolLocalOnly(toolKey)) return null
+    return <span style={localDotStyle} />
+  }
+
+  function renderAction(action, i) {
+    const key = action.id || `_${action.type}_${i}`
+
+    if (action.type === 'separator') {
+      return <DropdownMenu.Separator key={key} />
+    }
+
+    if (action.type === 'header') {
+      return <DropdownMenu.Label key={key}>{action.label}</DropdownMenu.Label>
+    }
+
+    if (action.type === 'footer') {
+      return [
+        <DropdownMenu.Separator key={`${key}-sep`} />,
+        <div key={key} className="px-2 py-1.5 text-xs text-muted-foreground font-mono">{action.label}</div>,
+      ]
+    }
+
+    if (action.type === 'toggle') {
+      return (
+        <DropdownMenu.CheckboxItem
+          key={key}
+          checked={action.active}
+          onSelect={(e) => handleToggleSelect(e, action)}
+        >
+          {action.label}
+        </DropdownMenu.CheckboxItem>
+      )
+    }
+
+    if (action.type === 'submenu') {
+      const itemState = action.toolKey ? getToolbarToolState(action.toolKey) : 'active'
+      const itemLocalOnly = action.toolKey ? isToolbarToolLocalOnly(action.toolKey) : false
+
+      if (itemState !== 'inactive') {
+        return (
+          <DropdownMenu.Sub key={key}>
+            <DropdownMenu.SubTrigger className={itemState === 'dimmed' ? 'opacity-50' : ''}>
+              <span className="flex items-center justify-between w-full gap-2">
+                <span>{action.label}</span>
+                {itemLocalOnly && <span style={localDotStyle} />}
+              </span>
+            </DropdownMenu.SubTrigger>
+            <DropdownMenu.SubContent className="min-w-[160px]">
+              {getActionChildren(action.id).map(child => {
+                const childKey = child.id || child.label
+                if (child.type === 'toggle') {
+                  return (
+                    <DropdownMenu.CheckboxItem
+                      key={childKey}
+                      checked={child.active}
+                      onSelect={(e) => handleSubmenuChildSelect(e, child)}
+                    >
+                      {child.label}
+                    </DropdownMenu.CheckboxItem>
+                  )
+                }
+                return (
+                  <DropdownMenu.Item
+                    key={childKey}
+                    onClick={() => { if (child.execute) child.execute(); setOpen(false) }}
+                  >
+                    {child.label}
+                  </DropdownMenu.Item>
+                )
+              })}
+            </DropdownMenu.SubContent>
+          </DropdownMenu.Sub>
+        )
+      }
+
+      return (
+        <DropdownMenu.Item key={key} disabled>
+          <span className="flex items-center justify-between w-full gap-2">
+            <span>{action.label}</span>
+            {itemLocalOnly && <span style={localDotStyle} />}
+          </span>
+        </DropdownMenu.Item>
+      )
+    }
+
+    if (action.type === 'link' && action.url) {
+      const itemState = action.toolKey ? getToolbarToolState(action.toolKey) : 'active'
+      const itemLocalOnly = action.toolKey ? isToolbarToolLocalOnly(action.toolKey) : false
+      return (
+        <DropdownMenu.Item
+          key={key}
+          onClick={() => {
+            setOpen(false)
+            if (action.url.startsWith('/') && !action.url.startsWith('//')) {
+              const base = (basePath || '/').replace(/\/+$/, '')
+              window.location.href = (base === '/' ? '' : base) + action.url
+            } else {
+              window.location.href = action.url
+            }
+          }}
+          disabled={itemState === 'inactive'}
+          className={itemState === 'dimmed' ? 'opacity-50' : ''}
+        >
+          <span className="flex items-center justify-between w-full gap-2">
+            <span>{action.label}</span>
+            {itemLocalOnly && <span style={localDotStyle} />}
+          </span>
+        </DropdownMenu.Item>
+      )
+    }
+
+    // Default action
+    const itemState = action.toolKey ? getToolbarToolState(action.toolKey) : 'active'
+    const itemLocalOnly = action.toolKey ? isToolbarToolLocalOnly(action.toolKey) : false
+    return (
+      <DropdownMenu.Item
+        key={key}
+        onClick={() => handleAction(action)}
+        disabled={itemState === 'inactive'}
+        className={itemState === 'dimmed' ? 'opacity-50' : ''}
+      >
+        <span className="flex items-center justify-between w-full gap-2">
+          <span>{action.label}</span>
+          {itemLocalOnly && <span style={localDotStyle} />}
+        </span>
+      </DropdownMenu.Item>
+    )
+  }
+
+  return (
+    <>
+      <DropdownMenu.Root open={open} onOpenChange={handleOpenChange}>
+        <DropdownMenu.Trigger>
+          <TriggerButton
+            active={open}
+            className="text-2xl"
+            aria-label="Command Menu"
+            tabIndex={tabindex}
+          >
+            <Icon name={icon} size={16} {...iconMeta} />
+          </TriggerButton>
+        </DropdownMenu.Trigger>
+
+        <DropdownMenu.Content side="top" align="end" sideOffset={16} alignOffset={4} className="min-w-[200px]">
+          {resolvedActions.flatMap((action, i) => renderAction(action, i))}
+          {(shortcuts.hideChrome || shortcuts.openCommandMenu) && (
+            <>
+              <DropdownMenu.Separator />
+              <div className="px-2 py-1.5 flex flex-col gap-0.5">
+                {shortcuts.hideChrome && (
+                  <div className="text-xs text-muted-foreground font-mono">{shortcuts.hideChrome.label}</div>
+                )}
+                {shortcuts.openCommandMenu && (
+                  <div className="text-xs text-muted-foreground font-mono">{shortcuts.openCommandMenu.label}</div>
+                )}
+              </div>
+            </>
+          )}
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+
+      <Panel.Root open={flowDialogOpen} onOpenChange={setFlowDialogOpen}>
+        <Panel.Content>
+          <Panel.Header>
+            <Panel.Title>Flow: {flowName}</Panel.Title>
+            <Panel.Close />
+          </Panel.Header>
+          <Panel.Body>
+            {flowError ? (
+              <span className="text-destructive text-sm">{flowError}</span>
+            ) : (
+              <pre className="m-0 bg-transparent text-sm font-mono leading-relaxed whitespace-pre-wrap break-words">{flowJson}</pre>
+            )}
+          </Panel.Body>
+        </Panel.Content>
+      </Panel.Root>
+    </>
+  )
+}

package/src/CommandPalette.jsx

@@ -0,0 +1,35 @@
+/**
+ * CommandPaletteTrigger — toolbar trigger button for the command palette.
+ * Dispatches a custom event to open the React-based command palette.
+ * The actual palette UI is rendered in React (src/components/CommandPalette).
+ */
+
+import { useCallback } from 'react'
+import { TriggerButton } from './lib/components/ui/trigger-button/index.js'
+import Icon from './svelte-plugin-ui/components/Icon.jsx'
+
+export default function CommandPalette({
+  tabindex,
+  icon = 'iconoir/key-command',
+  iconMeta = {},
+  oninterceptclick,
+}) {
+  const openPalette = useCallback(() => {
+    if (oninterceptclick) {
+      oninterceptclick()
+      return
+    }
+    document.dispatchEvent(new CustomEvent('storyboard:toggle-palette'))
+  }, [oninterceptclick])
+
+  return (
+    <TriggerButton
+      className="text-2xl"
+      aria-label="Command Menu"
+      tabIndex={tabindex}
+      onClick={openPalette}
+    >
+      <Icon name={icon} size={16} {...iconMeta} />
+    </TriggerButton>
+  )
+}

package/src/CommandPaletteTrigger.jsx

@@ -0,0 +1,25 @@
+/**
+ * CommandPaletteTrigger — toolbar button that opens the ⌘K command palette.
+ * Used as a tool component on the command-toolbar surface.
+ */
+
+import { useCallback } from 'react'
+import { TriggerButton } from './lib/components/ui/trigger-button/index.js'
+import Icon from './svelte-plugin-ui/components/Icon.jsx'
+
+export default function CommandPaletteTrigger({ config = {}, tabindex }) {
+  const openPalette = useCallback(() => {
+    document.dispatchEvent(new CustomEvent('storyboard:toggle-palette'))
+  }, [])
+
+  return (
+    <TriggerButton
+      aria-label="Command palette"
+      size={config.size || 'icon-xl'}
+      tabIndex={tabindex}
+      onClick={openPalette}
+    >
+      <Icon name={config.icon || 'iconoir/key-command'} size={16} {...(config.meta || {})} />
+    </TriggerButton>
+  )
+}

package/src/CommentsMenuButton.jsx

@@ -0,0 +1,38 @@
+import { useState, useEffect } from 'react'
+import { TriggerButton } from './lib/components/ui/trigger-button/index.js'
+import Icon from './svelte-plugin-ui/components/Icon.jsx'
+import { isAuthenticated } from './comments/auth.js'
+import { isCommentModeActive, toggleCommentMode, subscribeToCommentMode } from './comments/commentMode.js'
+import { openAuthModal } from './comments/ui/authModal.js'
+
+export default function CommentsMenuButton({ config = {}, data, localOnly, tabindex }) {
+  const [commentModeOn, setCommentModeOn] = useState(isCommentModeActive())
+
+  useEffect(() => {
+    const unsubscribe = subscribeToCommentMode((active) => {
+      setCommentModeOn(active)
+    })
+    return unsubscribe
+  }, [])
+
+  async function handleClick() {
+    if (!isAuthenticated()) {
+      const user = await openAuthModal()
+      if (user) toggleCommentMode()
+      return
+    }
+    toggleCommentMode()
+  }
+
+  return (
+    <TriggerButton
+      active={commentModeOn}
+      size="icon-xl"
+      aria-label={config.ariaLabel || 'Comments'}
+      tabIndex={tabindex}
+      onClick={handleClick}
+    >
+      <Icon name={config.icon || 'primer/comment'} size={16} {...(config.meta || {})} />
+    </TriggerButton>
+  )
+}

package/src/CoreUIBar.css

@@ -0,0 +1,47 @@
+.toolbar-separator {
+  width: 1px;
+  height: 20px;
+  background: var(--sb--trigger-border, var(--color-slate-400));
+  opacity: 0.4;
+  flex-shrink: 0;
+}
+
+.default-button-dimmed {
+  opacity: 0.3;
+  transition: opacity 200ms;
+}
+
+.default-button-dimmed:hover,
+.default-button-dimmed:focus-within {
+  opacity: 1;
+}
+
+.tool-inactive {
+  opacity: 0.45;
+  pointer-events: none;
+}
+.tool-dimmed {
+  opacity: 0.3;
+  transition: opacity 200ms;
+}
+.tool-dimmed:hover,
+.tool-dimmed:focus-within {
+  opacity: 1;
+}
+[data-local-only] {
+  position: relative;
+}
+[data-local-only]::after {
+  content: '';
+  position: absolute;
+  top: -1px;
+  right: -1px;
+  width: 8px;
+  height: 8px;
+  background: hsl(212, 92%, 45%);
+  border-radius: 50%;
+  border: 2px solid var(--sb--sc-border-color, transparent);
+  box-sizing: content-box;
+  pointer-events: none;
+  z-index: 1;
+}