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

package/src/CreateMenuButton.jsx

@@ -0,0 +1,116 @@
+import { useState, useMemo } from 'react'
+import { TriggerButton } from './lib/components/ui/trigger-button/index.js'
+import * as DropdownMenu from './lib/components/ui/dropdown-menu/index.js'
+import * as Panel from './lib/components/ui/panel/index.js'
+import Icon from './svelte-plugin-ui/components/Icon.jsx'
+import { isExcludedByRoute } from './commandActions.js'
+
+export default function CreateMenuButton({ features: featuresProp = [], data, config = { label: 'Create' }, localOnly, tabindex }) {
+  const features = featuresProp.length > 0 ? featuresProp : (data?.features || [])
+  const menuWidth = config.menuWidth || null
+
+  const [menuOpen, setMenuOpen] = useState(false)
+  const [activeAction, setActiveAction] = useState(null)
+
+  const featuresByName = useMemo(
+    () => Object.fromEntries(features.map((f) => [f.name, f])),
+    [features],
+  )
+
+  const resolvedActions = useMemo(() => {
+    const actions = config.actions
+    if (!Array.isArray(actions)) {
+      return [
+        { type: 'header', label: config.label, _key: 'header' },
+        ...features.map((f) => ({ type: 'default', label: f.label, _feature: f, _key: f.overlayId })),
+      ]
+    }
+    return actions
+      .map((a, i) => {
+        if (a.feature) {
+          const feat = featuresByName[a.feature]
+          if (!feat) return null
+          return { ...a, _feature: feat, _key: a.id || `action-${i}` }
+        }
+        return { ...a, _key: a.id || `${a.type}-${i}` }
+      })
+      .filter(Boolean)
+  }, [config, features, featuresByName])
+
+  function showOverlay(action) {
+    setActiveAction(action)
+    setMenuOpen(false)
+  }
+
+  function closeOverlay() { setActiveAction(null) }
+
+  const OverlayComponent = activeAction?._feature?.overlay
+
+  return (
+    <>
+      <DropdownMenu.Root open={menuOpen} onOpenChange={setMenuOpen}>
+        <DropdownMenu.Trigger>
+            <TriggerButton
+              active={menuOpen}
+              size="icon-xl"
+              aria-label={config.ariaLabel || config.label}
+              tabIndex={tabindex}
+            >
+              {config.icon ? (
+                <Icon name={config.icon} size={16} {...(config.meta || {})} />
+              ) : config.character ? (
+                config.character
+              ) : (
+                '+'
+              )}
+            </TriggerButton>
+        </DropdownMenu.Trigger>
+
+        <DropdownMenu.Content
+          side="top"
+          align="end"
+          sideOffset={16}
+          className="min-w-[180px]"
+          style={menuWidth ? { width: menuWidth } : undefined}
+        >
+          {resolvedActions.map((action) => {
+            if (isExcludedByRoute(action)) return null
+            if (action.type === 'header') {
+              return <DropdownMenu.Label key={action._key}>{action.label}</DropdownMenu.Label>
+            }
+            if (action.type === 'separator') {
+              return <DropdownMenu.Separator key={action._key} />
+            }
+            if (action.type === 'footer') {
+              return (
+                <div key={action._key}>
+                  <DropdownMenu.Separator />
+                  <div className="px-2 py-1.5 text-xs text-muted-foreground flex flex-row items-baseline">
+                    <span className="inline-flex w-2 h-2 rounded-full mr-1.5" style={{ background: 'hsl(212, 92%, 45%)' }} />
+                    Only available in dev environment
+                  </div>
+                </div>
+              )
+            }
+            if (action._feature) {
+              return (
+                <DropdownMenu.Item key={action._key} onClick={() => showOverlay(action)}>
+                  {action.label || action._feature.label}
+                </DropdownMenu.Item>
+              )
+            }
+            return null
+          })}
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+
+      {OverlayComponent && (
+        <Panel.Root open={true} onOpenChange={(open) => { if (!open) closeOverlay() }}>
+          <Panel.Content>
+            <OverlayComponent onClose={closeOverlay} {...(activeAction.overlayProps || {})} />
+          </Panel.Content>
+        </Panel.Root>
+      )}
+    </>
+  )
+}

package/src/HideChromeTrigger.jsx

@@ -0,0 +1,40 @@
+/**
+ * HideChromeTrigger — toolbar button that toggles toolbar/branch bar visibility.
+ * Always visible (even in hide mode). Uses the lightbulb icon.
+ * In hide mode: goes 50% opacity.
+ */
+
+import { useState, useEffect, 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 HideChromeTrigger({ config = {}, tabindex }) {
+  const [hidden, setHidden] = useState(
+    () => document.documentElement.classList.contains('storyboard-chrome-hidden')
+  )
+
+  useEffect(() => {
+    const observer = new MutationObserver(() => {
+      setHidden(document.documentElement.classList.contains('storyboard-chrome-hidden'))
+    })
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
+    return () => observer.disconnect()
+  }, [])
+
+  const toggle = useCallback(() => {
+    document.documentElement.classList.toggle('storyboard-chrome-hidden')
+  }, [])
+
+  return (
+    <span style={{ opacity: hidden ? 0.5 : 1, transition: 'opacity 0.15s' }}>
+      <TriggerButton
+        aria-label={config.ariaLabel || 'Toggle toolbars'}
+        size={config.size || 'icon-xl'}
+        tabIndex={tabindex}
+        onClick={toggle}
+      >
+        <Icon name={config.icon || 'primer/light-bulb'} size={16} {...(config.meta || {})} />
+      </TriggerButton>
+    </span>
+  )
+}

package/src/InspectorPanel.css

@@ -0,0 +1,109 @@
+.inspector-mono {
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+}
+
+.inspector-pulse-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--sb--color-purple, #7655a4);
+  animation: inspector-pulse 1.5s ease-in-out infinite;
+  flex-shrink: 0;
+}
+
+@keyframes inspector-pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.4; transform: scale(0.85); }
+}
+
+pre {
+  background: transparent;
+}
+
+.source-pre {
+  background: transparent;
+  tab-size: 2;
+  padding: 12px 0;
+  color: #c9d1d9;
+  overflow-x: auto;
+}
+
+.source-pre code {
+  font-family: inherit;
+  display: block;
+}
+
+.source-pre .line {
+  padding: 0 12px 0 0;
+  display: inline-block;
+  width: 100%;
+  min-height: 1.5em;
+}
+
+.source-pre .line:hover {
+  background: var(--inspector-line-hover, rgba(255, 255, 255, 0.04));
+}
+
+.source-pre .highlighted-line {
+  background: color-mix(in srgb, var(--sb--color-purple, #7655a4) 20%, transparent);
+  border-left: 2px solid var(--sb--color-purple, #7655a4);
+  padding-left: 10px;
+}
+
+/* Line numbers via CSS counters — works for both highlight.js and plain-text */
+.line-numbers code {
+  counter-reset: line;
+}
+
+.line-numbers .line {
+  padding-left: 0 !important;
+}
+
+.line-numbers .line::before {
+  counter-increment: line;
+  content: counter(line);
+  display: inline-block;
+  width: 3.5ch;
+  margin-right: 1.5ch;
+  text-align: right;
+  color: var(--inspector-line-num-color, #484f58);
+  user-select: none;
+}
+
+.code-wrapper pre {
+  margin: 0;
+  padding: 12px 0;
+  font-size: 12px;
+  line-height: 1.6;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+  tab-size: 2;
+  background: transparent !important;
+  overflow-x: auto;
+}
+
+.code-wrapper code {
+  font-family: inherit;
+  display: block;
+}
+
+.code-wrapper .line {
+  padding: 0 12px 0 0;
+  display: inline-block;
+  width: 100%;
+  min-height: 1.5em;
+}
+
+.code-wrapper .line:hover {
+  background: var(--inspector-line-hover, rgba(255, 255, 255, 0.04));
+}
+
+.code-wrapper .highlighted-line {
+  background: color-mix(in srgb, var(--sb--color-purple, #7655a4) 20%, transparent);
+  border-left: 2px solid var(--sb--color-purple, #7655a4);
+  padding-left: 10px;
+}
+
+/* Force dark chrome on the code block — independent of page theme */
+.inspector-code-link:hover {
+  text-decoration: underline;
+}