@dfosco/storyboard-react 4.2.0-beta.4 → 4.2.1

package/src/Viewfinder.module.css

@@ -42,8 +42,7 @@
 
 .appName {
   font-size: 24px;
-  /* font-style: italic; */
-  font-weight: 900;
+  font-weight: 800;
   color: var(--fgColor-default, #1a1a1a);
   line-height: 1.1;
 }
@@ -82,110 +81,39 @@
 
 /* Branch dropdown */
 
-.branchBtn {
+.branchNav {
   display: flex;
   align-items: center;
   gap: 6px;
-  padding: 7px 14px;
-  background: var(--bgColor-default, #fff);
   color: var(--fgColor-muted, #555);
-  border: 1px solid var(--borderColor-default, #e5e5e5);
-  border-radius: 8px;
-  font-size: 16px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.15s;
-  font-family: inherit;
-}
-
-.branchBtn:hover {
-  background: var(--bgColor-muted, #f5f5f5);
-  border-color: var(--borderColor-muted);
-}
-
-.branchBtnText {
-  max-width: 160px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.branchPositioner {
-  z-index: 200;
-}
-
-.branchPopup {
-  background: var(--bgColor-default, #fff);
-  border: 1px solid var(--borderColor-default, #e5e5e5);
-  border-radius: 10px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-  min-width: 240px;
-  max-width: 320px;
-  padding: 6px 0;
-  font-family: 'Mona Sans', -apple-system, BlinkMacSystemFont, sans-serif;
-}
-
-.branchSectionLabel {
-  padding: 8px 14px 4px;
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--fgColor-muted, #999);
-  text-transform: uppercase;
-  letter-spacing: 0.4px;
 }
 
-.branchItem {
+.switchOverlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
   display: flex;
+  flex-direction: column;
   align-items: center;
-  gap: 8px;
-  padding: 7px 14px;
-  font-size: 16px;
+  justify-content: center;
+  gap: 12px;
+  background: var(--bgColor-default, #fff);
   color: var(--fgColor-muted, #555);
-  cursor: pointer;
-  transition: background 0.1s;
-  border: none;
-  background: none;
-  width: 100%;
-  text-align: left;
-}
-
-.branchItem:hover,
-.branchItem[data-highlighted] {
-  background: var(--bgColor-muted, #f5f5f5);
-}
-
-.branchItemActive {
-  composes: branchItem;
-  color: var(--fgColor-default, #1a1a1a);
-  font-weight: 600;
-}
-
-.branchSeparator {
-  height: 1px;
-  background: var(--borderColor-default, #e5e5e5);
-  margin: 4px 10px;
-}
-
-.branchViewport {
-  max-height: 280px;
-  overflow-y: auto;
+  font-size: 15px;
+  font-weight: 500;
 }
 
-.branchShowAll {
-  display: block;
-  width: 100%;
-  padding: 8px 14px;
-  font-size: 16px;
-  color: var(--fgColor-accent, #2563eb);
-  background: none;
-  border: none;
-  cursor: pointer;
-  text-align: left;
-  font-family: inherit;
+.switchSpinner {
+  width: 24px;
+  height: 24px;
+  border: 3px solid var(--borderColor-default, #e5e5e5);
+  border-top-color: var(--fgColor-accent, #2563eb);
+  border-radius: 50%;
+  animation: branchSpin 0.6s linear infinite;
 }
 
-.branchShowAll:hover {
-  background: var(--bgColor-muted, #f5f5f5);
+@keyframes branchSpin {
+  to { transform: rotate(360deg); }
 }
 
 /* ─── Body: sidebar + content ─── */
@@ -249,6 +177,7 @@
 }
 
 .navIcon {
+  color: var(--fgColor-default, #1a1a1a);
   width: 18px;
   height: 18px;
   display: flex;
@@ -380,6 +309,247 @@
   border-color: var(--borderColor-muted);
 }
 
+.userAvatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.footerRow {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.userBtn {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex: 1;
+  min-width: 0;
+  padding: 8px 10px;
+  background: none;
+  border: 1px solid var(--borderColor-default, #e5e5e5);
+  border-radius: 8px;
+  font-size: 16px;
+  color: var(--fgColor-muted, #555);
+  cursor: pointer;
+  transition: all 0.15s;
+  text-align: left;
+}
+
+.userBtn:hover {
+  background: var(--bgColor-muted, #f5f5f5);
+  border-color: var(--borderColor-muted);
+}
+
+.userInfo {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.gearBtn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  flex-shrink: 0;
+  background: none;
+  border: 1px solid var(--borderColor-default, #e5e5e5);
+  border-radius: 8px;
+  color: var(--fgColor-muted, #888);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.gearBtn:hover {
+  background: var(--bgColor-muted, #f5f5f5);
+  border-color: var(--borderColor-muted);
+  color: var(--fgColor-default, #333);
+}
+
+/* ─── Settings Dialog ─── */
+
+.settingsBackdrop {
+  position: fixed;
+  inset: 0;
+  background: var(--overlay-backdrop-bgColor, rgba(0, 0, 0, 0.4));
+  z-index: 10000;
+}
+
+.settingsPopupWrap {
+  position: fixed;
+  inset: 0;
+  z-index: 10001;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.settingsPopupWrap > * {
+  pointer-events: auto;
+}
+
+.settingsPopup {
+  background: var(--bgColor-default);
+  border-radius: 12px;
+  box-shadow: var(--shadow-overlay, 0 16px 48px rgba(0, 0, 0, 0.12));
+  padding: 28px;
+  max-width: 480px;
+  width: 90vw;
+  max-height: 90vh;
+  overflow-y: auto;
+  color: var(--fgColor-default);
+  position: relative;
+}
+
+.settingsTitle {
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 20px;
+  color: var(--fgColor-default);
+  padding-right: 32px;
+}
+
+.settingsCloseBtn {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  background: none;
+  border: none;
+  font-size: 24px;
+  line-height: 1;
+  color: var(--fgColor-muted);
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 4px;
+}
+
+.settingsCloseBtn:hover {
+  background: var(--bgColor-neutral-muted);
+  color: var(--fgColor-default);
+}
+
+.settingsSection {
+  margin-bottom: 20px;
+}
+
+.settingsSectionHeader {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--fgColor-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  margin-bottom: 12px;
+}
+
+.settingsTokenCard {
+  background: var(--bgColor-muted);
+  border: 1px solid var(--borderColor-default);
+  border-radius: 8px;
+  padding: 14px 16px;
+}
+
+.settingsTokenRow {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  font-size: 14px;
+  line-height: 2;
+  color: var(--fgColor-muted);
+}
+
+.settingsTokenLabel {
+  flex-shrink: 0;
+  min-width: 90px;
+  font-weight: 500;
+  color: var(--fgColor-default);
+}
+
+.settingsTokenValue {
+  font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
+  font-size: 13px;
+  color: var(--fgColor-muted);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  align-items: center;
+}
+
+.settingsScope {
+  font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
+  font-size: 12px;
+  color: var(--fgColor-default);
+  background: var(--bgColor-default);
+  padding: 1px 6px;
+  border-radius: 4px;
+  border: 1px solid var(--borderColor-default);
+}
+
+.settingsRemoveBtn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 12px;
+  padding: 6px 12px;
+  background: none;
+  border: 1px solid var(--borderColor-danger-muted, #ff818266);
+  border-radius: 6px;
+  font-size: 13px;
+  color: var(--fgColor-danger, #d1242f);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.settingsRemoveBtn:hover {
+  background: var(--bgColor-danger-muted, #ffebe966);
+  border-color: var(--borderColor-danger-emphasis, #cf222e);
+}
+
+.settingsNoToken {
+  background: var(--bgColor-muted);
+  border: 1px solid var(--borderColor-default);
+  border-radius: 8px;
+  padding: 16px;
+  text-align: center;
+  color: var(--fgColor-muted);
+  font-size: 14px;
+}
+
+.settingsNoToken p {
+  margin-bottom: 12px;
+}
+
+.settingsSignInBtn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  background: var(--bgColor-default);
+  border: 1px solid var(--borderColor-default);
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--fgColor-default);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.settingsSignInBtn:hover {
+  background: var(--bgColor-muted);
+  border-color: var(--borderColor-muted);
+}
+
 /* ─── Main Content ─── */
 
 .main {
@@ -1190,4 +1360,175 @@
   .groupByFolders {
     display: none;
   }
+
+  .logo {
+    display: none;
+  }
+
+  .appSubtitle {
+    display: none;
+  }
+}
+
+/* Title row: flex container for title + inline star */
+.cardTitleRow {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+/* Inline star button variants */
+.iconBtnInline {
+  composes: iconBtn;
+  width: 28px;
+  height: 28px;
+  flex-shrink: 0;
+  margin: -2px -4px -2px 0;
+}
+
+.iconBtnInlineActive {
+  composes: iconBtnInline;
+  color: var(--fgColor-attention, #f59e0b);
+}
+
+.iconBtnInlineActive:hover {
+  background: rgba(0, 0, 0, 0.06);
+  color: var(--fgColor-attention, #d97706);
+}
+
+/* Card actions dropdown menu */
+.actionsMenuPositioner {
+  z-index: 200;
+}
+
+.actionsMenu {
+  background: var(--bgColor-default, #fff);
+  border: 1px solid var(--borderColor-default, #e5e5e5);
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  padding: 4px;
+  min-width: 160px;
+  font-family: 'Mona Sans', -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+.actionsMenuItem {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 8px 12px;
+  border: none;
+  background: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 14px;
+  color: var(--fgColor-default, #1a1a1a);
+  text-align: left;
+}
+
+.actionsMenuItem:hover {
+  background: var(--bgColor-neutral-muted, #f0f0f0);
+}
+
+.actionsMenuItemDanger {
+  composes: actionsMenuItem;
+  color: var(--fgColor-danger, #cf222e);
+}
+
+.actionsMenuItemDanger:hover {
+  background: var(--bgColor-danger-muted, #fff0f0);
+  color: var(--fgColor-danger, #cf222e);
+}
+
+/* Modal overlay and content */
+.modalOverlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 300;
+}
+
+.modalContent {
+  background: var(--bgColor-default, #fff);
+  border: 1px solid var(--borderColor-default, #e5e5e5);
+  border-radius: 12px;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
+  padding: 16px;
+  width: 380px;
+  max-width: 90vw;
+  font-family: 'Mona Sans', -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+.modalActions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 20px;
+  justify-content: flex-end;
+}
+
+.modalSubmitBtn {
+  padding: 8px 16px;
+  background: var(--fgColor-default, #1a1a1a);
+  color: var(--bgColor-default, #fff);
+  border: none;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.15s;
+}
+
+.modalSubmitBtn:hover {
+  opacity: 0.85;
+}
+
+.modalSubmitBtn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.modalCancelBtn {
+  padding: 8px 16px;
+  border: 1px solid var(--borderColor-default, #e5e5e5);
+  border-radius: 6px;
+  background: var(--bgColor-default, #fff);
+  color: var(--fgColor-default, #1a1a1a);
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.modalCancelBtn:hover {
+  background: var(--bgColor-neutral-muted, #f0f0f0);
+}
+
+.deleteMessage {
+  font-size: 14px;
+  color: var(--fgColor-muted, #555);
+  line-height: 1.5;
+  margin: 12px 0;
+}
+
+.deleteConfirmBtn {
+  padding: 8px 16px;
+  border: none;
+  border-radius: 6px;
+  background: var(--bgColor-danger-emphasis, #cf222e);
+  color: #fff;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.deleteConfirmBtn:hover {
+  background: var(--bgColor-danger-emphasis, #a40e26);
+}
+
+.deleteConfirmBtn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
 }

package/src/Workspace.jsx

@@ -0,0 +1,7 @@
+/**
+ * Workspace — canonical entry point.
+ *
+ * Re-exports from Viewfinder.jsx (legacy filename kept for backwards compat).
+ * New code should import from this file.
+ */
+export { default, default as Workspace } from './Viewfinder.jsx'

package/src/canvas/CanvasPage.bridge.test.jsx

@@ -63,12 +63,16 @@ vi.mock('./widgets/widgetProps.js', () => ({
   getDefaults: () => ({}),
 }))
 
-vi.mock('./widgets/widgetConfig.js', () => ({
-  getFeatures: () => [],
-  isResizable: () => false,
-  schemas: {},
-  getMenuWidgetTypes: () => [],
-}))
+vi.mock('./widgets/widgetConfig.js', async () => {
+  const actual = await vi.importActual('./widgets/widgetConfig.js')
+  return {
+    getFeatures: () => [],
+    isResizable: () => false,
+    schemas: {},
+    getMenuWidgetTypes: () => [],
+    getConnectorDefaults: actual.getConnectorDefaults,
+  }
+})
 
 vi.mock('./widgets/figmaUrl.js', () => ({
   isFigmaUrl: () => false,
@@ -129,6 +133,8 @@ describe('CanvasPage canvas bridge', () => {
     expect(window.__storyboardCanvasBridgeState).toEqual({
       active: true,
       canvasId: 'design-overview',
+      connectors: [],
+      widgets: [{ id: 'widget-1', type: 'mock-widget', position: { x: 10, y: 20 }, props: {} }],
       zoom: 100,
     })
     expect(mountedHandler).toHaveBeenCalled()
@@ -138,6 +144,8 @@ describe('CanvasPage canvas bridge', () => {
     expect(statusHandler.mock.calls.at(-1)?.[0]?.detail).toEqual({
       active: true,
       canvasId: 'design-overview',
+      connectors: [],
+      widgets: [{ id: 'widget-1', type: 'mock-widget', position: { x: 10, y: 20 }, props: {} }],
       zoom: 100,
     })
 

package/src/canvas/CanvasPage.dragdrop.test.jsx

@@ -5,7 +5,7 @@
  * onto the canvas, including coordinate conversion and file filtering.
  */
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
-import { fireEvent, render, act, waitFor } from '@testing-library/react'
+import { render, act } from '@testing-library/react'
 import CanvasPage from './CanvasPage.jsx'
 import { addWidget, uploadImage } from './canvasApi.js'
 
@@ -48,12 +48,16 @@ vi.mock('./widgets/widgetProps.js', () => ({
   getDefaults: () => ({}),
 }))
 
-vi.mock('./widgets/widgetConfig.js', () => ({
-  getFeatures: () => [],
-  isResizable: () => false,
-  schemas: {},
-  getMenuWidgetTypes: () => [],
-}))
+vi.mock('./widgets/widgetConfig.js', async () => {
+  const actual = await vi.importActual('./widgets/widgetConfig.js')
+  return {
+    getFeatures: () => [],
+    isResizable: () => false,
+    schemas: {},
+    getMenuWidgetTypes: () => [],
+    getConnectorDefaults: actual.getConnectorDefaults,
+  }
+})
 
 vi.mock('./widgets/figmaUrl.js', () => ({
   isFigmaUrl: () => false,