@dfosco/storyboard 0.7.1 → 0.9.0

package/src/internals/BaseUiForm/BaseUiForm.module.css

@@ -0,0 +1,542 @@
+/* BaseUiForm — form primitives styled to match the SimpleWorkspace
+ * aesthetic: Mona Sans, pill buttons, generous radii, white cards on a
+ * neutral background. Variables fall back to safe defaults so this works
+ * outside Primer too. */
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  font-family: 'Mona Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  color: var(--color-foreground, #1a1a1a);
+}
+
+/* ─── Field grouping ─── */
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.label {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--color-foreground, #1a1a1a);
+  line-height: 1.3;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.labelHidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.requiredMark {
+  color: var(--color-foreground-danger, #cf222e);
+  font-weight: 600;
+}
+
+.description {
+  font-size: 13px;
+  color: var(--color-foreground-muted, #656d76);
+  line-height: 1.4;
+}
+
+.error {
+  font-size: 13px;
+  color: var(--color-foreground-danger, #cf222e);
+  line-height: 1.4;
+}
+
+/* ─── Text inputs ─── */
+
+.input,
+.textarea {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  font: inherit;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--color-foreground, #1a1a1a);
+  background: var(--color-background, #ffffff);
+  border: 1px solid var(--color-border, #d0d7de);
+  border-radius: 10px;
+  padding: 10px 14px;
+  transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
+  appearance: none;
+}
+
+.input::placeholder,
+.textarea::placeholder {
+  color: var(--color-foreground-muted, #8c959f);
+}
+
+.input:hover,
+.textarea:hover {
+  border-color: var(--color-foreground-muted, #8c959f);
+}
+
+.input:focus,
+.textarea:focus,
+.input:focus-visible,
+.textarea:focus-visible {
+  outline: none;
+  border-color: var(--color-foreground, #1a1a1a);
+  box-shadow: 0 0 0 3px var(--color-border-accent-muted, rgba(9, 105, 218, 0.18));
+}
+
+.input[data-invalid],
+.textarea[data-invalid] {
+  border-color: var(--color-foreground-danger, #cf222e);
+}
+
+.input[data-invalid]:focus,
+.textarea[data-invalid]:focus {
+  box-shadow: 0 0 0 3px rgba(207, 34, 46, 0.18);
+}
+
+.input:disabled,
+.textarea:disabled {
+  background: var(--color-background-inset, #f6f8fa);
+  color: var(--color-foreground-muted, #656d76);
+  cursor: not-allowed;
+}
+
+.textarea {
+  resize: vertical;
+  min-height: 76px;
+  font-family: inherit;
+}
+
+/* ─── Select (BaseUI Select) ─── */
+
+.selectTrigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  box-sizing: border-box;
+  font: inherit;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--color-foreground, #1a1a1a);
+  background: var(--color-background, #ffffff);
+  border: 1px solid var(--color-border, #d0d7de);
+  border-radius: 10px;
+  padding: 10px 14px;
+  cursor: pointer;
+  text-align: left;
+  transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
+}
+
+.selectTrigger:hover {
+  border-color: var(--color-foreground-muted, #8c959f);
+}
+
+.selectTrigger:focus,
+.selectTrigger:focus-visible,
+.selectTrigger[data-popup-open] {
+  outline: none;
+  border-color: var(--color-foreground, #1a1a1a);
+  box-shadow: 0 0 0 3px var(--color-border-accent-muted, rgba(9, 105, 218, 0.18));
+}
+
+.selectTrigger[data-invalid] {
+  border-color: var(--color-foreground-danger, #cf222e);
+}
+
+.selectTrigger[data-disabled] {
+  background: var(--color-background-inset, #f6f8fa);
+  color: var(--color-foreground-muted, #656d76);
+  cursor: not-allowed;
+}
+
+.selectPlaceholder {
+  color: var(--color-foreground-muted, #8c959f);
+}
+
+.selectIcon {
+  display: inline-flex;
+  align-items: center;
+  color: var(--color-foreground-muted, #656d76);
+  flex-shrink: 0;
+}
+
+.selectPositioner {
+  z-index: 10010;
+}
+
+.selectPopup {
+  background: var(--color-background, #ffffff);
+  border: 1px solid var(--color-border, #d0d7de);
+  border-radius: 12px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  padding: 6px;
+  min-width: var(--anchor-width, 220px);
+  max-height: 340px;
+  overflow-y: auto;
+  font-family: 'Mona Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  color: var(--color-foreground, #1a1a1a);
+  outline: none;
+}
+
+.selectGroup {
+  padding: 4px 0;
+}
+
+.selectGroup + .selectGroup {
+  border-top: 1px solid var(--color-border-muted, #eaeef2);
+  margin-top: 4px;
+  padding-top: 6px;
+}
+
+.selectGroupLabel {
+  padding: 4px 10px 6px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.4px;
+  text-transform: uppercase;
+  color: var(--color-foreground-muted, #656d76);
+}
+
+.selectItem {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 8px 10px;
+  border-radius: 8px;
+  font-size: 14px;
+  line-height: 1.3;
+  color: var(--color-foreground, #1a1a1a);
+  cursor: pointer;
+  outline: none;
+  user-select: none;
+}
+
+.selectItem[data-highlighted] {
+  background: var(--color-background-inset, #f6f8fa);
+}
+
+.selectItem[data-selected] {
+  font-weight: 600;
+}
+
+.selectItem[data-disabled] {
+  color: var(--color-foreground-muted, #656d76);
+  cursor: not-allowed;
+}
+
+.selectItemIndicator {
+  display: inline-flex;
+  align-items: center;
+  color: var(--color-foreground-accent, #0969da);
+  font-size: 13px;
+}
+
+/* ─── Checkbox ─── */
+
+.checkboxLabel {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 14px;
+  color: var(--color-foreground, #1a1a1a);
+  cursor: pointer;
+  line-height: 1.4;
+}
+
+.checkboxRoot {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border: 1px solid var(--color-border, #d0d7de);
+  border-radius: 6px;
+  background: var(--color-background, #ffffff);
+  color: var(--color-foreground-on-emphasis, #ffffff);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
+  padding: 0;
+}
+
+.checkboxRoot:hover {
+  border-color: var(--color-foreground-muted, #8c959f);
+}
+
+.checkboxRoot:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--color-border-accent-muted, rgba(9, 105, 218, 0.18));
+}
+
+.checkboxRoot[data-checked] {
+  background: var(--color-foreground, #1a1a1a);
+  border-color: var(--color-foreground, #1a1a1a);
+}
+
+.checkboxRoot[data-disabled] {
+  background: var(--color-background-inset, #f6f8fa);
+  cursor: not-allowed;
+}
+
+.checkboxIndicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* ─── Buttons ─── */
+
+.button {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  font-family: inherit;
+  font-weight: 500;
+  border-radius: 8px;
+  cursor: pointer;
+  white-space: nowrap;
+  text-decoration: none;
+  border: 1px solid transparent;
+  transition: background 0.12s, color 0.12s, border-color 0.12s, box-shadow 0.12s;
+  line-height: 1.2;
+}
+
+.button:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--color-border-accent-muted, rgba(9, 105, 218, 0.18));
+}
+
+.button:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.buttonSize_small {
+  font-size: 13px;
+  padding: 5px 12px;
+}
+
+.buttonSize_medium {
+  font-size: 14px;
+  padding: 8px 16px;
+}
+
+.buttonSize_large {
+  font-size: 15px;
+  padding: 10px 20px;
+}
+
+.buttonVariant_primary {
+  background: var(--color-foreground, #1a1a1a);
+  color: var(--color-background, #ffffff);
+  border-color: var(--color-foreground, #1a1a1a);
+}
+
+.buttonVariant_primary:not(:disabled):hover {
+  background: #000;
+  border-color: #000;
+}
+
+.buttonVariant_secondary {
+  background: var(--color-background, #ffffff);
+  color: var(--color-foreground, #1a1a1a);
+  border-color: var(--color-border, #d0d7de);
+}
+
+.buttonVariant_secondary:not(:disabled):hover {
+  background: var(--color-background-inset, #f6f8fa);
+  border-color: var(--color-foreground-muted, #8c959f);
+}
+
+.buttonVariant_invisible {
+  background: transparent;
+  color: var(--color-foreground-muted, #656d76);
+  border-color: transparent;
+}
+
+.buttonVariant_invisible:not(:disabled):hover {
+  background: var(--color-background-inset, #f6f8fa);
+  color: var(--color-foreground, #1a1a1a);
+}
+
+.buttonVariant_danger {
+  background: var(--color-background-danger-emphasis, #cf222e);
+  color: var(--color-foreground-on-emphasis, #ffffff);
+  border-color: var(--color-background-danger-emphasis, #cf222e);
+}
+
+.buttonVariant_danger:not(:disabled):hover {
+  background: #a40e26;
+  border-color: #a40e26;
+}
+
+/* ─── Flash banners ─── */
+
+.flash {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 10px 14px;
+  border-radius: 10px;
+  font-size: 13px;
+  line-height: 1.4;
+  border: 1px solid transparent;
+}
+
+.flashVariant_info {
+  background: var(--color-background-accent-muted, #ddf4ff);
+  border-color: var(--color-border-accent-muted, rgba(9, 105, 218, 0.4));
+  color: var(--color-foreground-accent, #0969da);
+}
+
+.flashVariant_warning {
+  background: var(--color-background-attention-muted, #fff8c5);
+  border-color: var(--color-border-attention-muted, rgba(212, 167, 44, 0.4));
+  color: var(--color-foreground-attention, #9a6700);
+}
+
+.flashVariant_danger {
+  background: var(--color-background-danger-muted, #ffebe9);
+  border-color: var(--color-border-danger-muted, rgba(207, 34, 46, 0.4));
+  color: var(--color-foreground-danger, #cf222e);
+}
+
+.flashVariant_success {
+  background: var(--color-background-success-muted, #dafbe1);
+  border-color: var(--color-border-success-muted, rgba(31, 136, 61, 0.4));
+  color: var(--color-foreground-success, #1a7f37);
+}
+
+/* ─── Menu (BaseUI Menu — type picker) ─── */
+
+.menuButton {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-foreground, #1a1a1a);
+  background: var(--color-background, #ffffff);
+  border: 1px solid var(--color-border, #d0d7de);
+  border-radius: 10px;
+  padding: 10px 14px;
+  cursor: pointer;
+  text-align: left;
+  transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
+  line-height: 1.3;
+}
+
+.menuButton:hover {
+  border-color: var(--color-foreground-muted, #8c959f);
+}
+
+.menuButton:focus-visible,
+.menuButton[data-popup-open] {
+  outline: none;
+  border-color: var(--color-foreground, #1a1a1a);
+  box-shadow: 0 0 0 3px var(--color-border-accent-muted, rgba(9, 105, 218, 0.18));
+}
+
+.menuButtonLabel {
+  flex: 1;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.menuButtonIcon {
+  display: inline-flex;
+  align-items: center;
+  color: var(--color-foreground-muted, #656d76);
+  flex-shrink: 0;
+}
+
+.menuPositioner {
+  z-index: 10010;
+}
+
+.menuPopup {
+  background: var(--color-background, #ffffff);
+  border: 1px solid var(--color-border, #d0d7de);
+  border-radius: 12px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  padding: 6px;
+  min-width: var(--anchor-width, 260px);
+  max-width: 360px;
+  font-family: 'Mona Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  color: var(--color-foreground, #1a1a1a);
+  outline: none;
+}
+
+.menuItem {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 9px 10px;
+  border-radius: 8px;
+  font-size: 14px;
+  line-height: 1.3;
+  color: var(--color-foreground, #1a1a1a);
+  cursor: pointer;
+  outline: none;
+  user-select: none;
+}
+
+.menuItem[data-highlighted] {
+  background: var(--color-background-inset, #f6f8fa);
+}
+
+.menuItemSelected {
+  font-weight: 600;
+}
+
+.menuItemBody {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.menuItemLabel {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.menuItemDescription {
+  font-size: 12px;
+  color: var(--color-foreground-muted, #656d76);
+  font-weight: 400;
+  line-height: 1.35;
+}
+
+.menuItemCheck {
+  display: inline-flex;
+  align-items: center;
+  color: var(--color-foreground-accent, #0969da);
+  flex-shrink: 0;
+  margin-top: 2px;
+}

package/src/internals/BranchBar/BranchBar.module.css

@@ -33,7 +33,7 @@
   gap: 5px;
   background: none;
   border: none;
-  color: var(--fgColor-onEmphasis, #ddd);
+  color: var(--color-foreground-on-emphasis, #ddd);
   font-size: 11px;
   font-weight: 400;
   font-family: inherit;
@@ -60,7 +60,7 @@
   display: flex;
   align-items: center;
   gap: 5px;
-  color: var(--fgColor-onEmphasis, #ddd);
+  color: var(--color-foreground-on-emphasis, #ddd);
   font-size: 11px;
   font-weight: 400;
 }
@@ -89,7 +89,7 @@
 .barAction {
   background: none;
   border: none;
-  color: var(--fgColor-onEmphasis, #777);
+  color: var(--color-foreground-on-emphasis, #777);
   font-size: 11px;
   font-weight: 400;
   font-family: inherit;
@@ -100,7 +100,7 @@
 }
 
 .barAction:hover {
-  color: var(--fgColor-onEmphasis, #fff);
+  color: var(--color-foreground-on-emphasis, #fff);
   background: rgba(255, 255, 255, 0.1);
 }
 

package/src/internals/BranchesDropdown/BranchesDropdown.jsx

@@ -0,0 +1,69 @@
+import { GitBranchIcon } from '@primer/octicons-react'
+import { Menu } from '@base-ui/react/menu'
+import { buildBranchArtifactHref } from '../../core/data/artifactIndex.js'
+import css from './BranchesDropdown.module.css'
+
+function isLocalDev() {
+  return typeof window !== 'undefined' && window.__SB_LOCAL_DEV__ === true
+}
+
+function entryTitle(entry) {
+  return entry?.title || entry?.name || ''
+}
+
+function branchLabel(entry, homeTitle, homeFolder) {
+  const title = entryTitle(entry)
+  const pieces = [entry.branch]
+  if (title && title !== homeTitle) pieces.push(`— ${title}`)
+  if (entry.folderName && entry.folderName !== (homeFolder || '')) pieces.push(`· ${entry.folderName}`)
+  return pieces.join(' ')
+}
+
+export default function BranchesDropdown({ branches, branchBasePath, currentBranch, homeTitle = '', homeFolder = null }) {
+  if (!currentBranch || isLocalDev() || !Array.isArray(branches)) return null
+
+  const visibleBranches = branches.filter(entry => entry?.branch && entry.branch !== currentBranch)
+  if (visibleBranches.length === 0) return null
+
+  return (
+    <Menu.Root>
+      <Menu.Trigger
+        className={css.iconBtn}
+        onClick={(e) => { e.preventDefault(); e.stopPropagation() }}
+        aria-label="See branches"
+        title="See branches"
+      >
+        <GitBranchIcon size={16} />
+      </Menu.Trigger>
+      <Menu.Portal>
+        <Menu.Positioner className={css.branchesPositioner} side="bottom" align="end" sideOffset={4}>
+          <Menu.Popup className={css.branchesPopup}>
+            <div className={css.branchesTitle}>Branches</div>
+            {visibleBranches.map(entry => {
+              const href = entry.isExternal && entry.externalUrl
+                ? entry.externalUrl
+                : buildBranchArtifactHref(branchBasePath, entry.folder, entry.route)
+
+              return (
+                <Menu.Item
+                  key={`${entry.branch}:${entry.folder || ''}:${entry.route || entry.externalUrl || ''}`}
+                  className={css.branchesItem}
+                >
+                  <a
+                    href={href}
+                    className={css.branchesItemLink}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <span className={css.branchItemLabel}>{branchLabel(entry, homeTitle, homeFolder)}</span>
+                    {entry.isExternal && <span className={css.externalIndicator} aria-label="External">↗</span>}
+                  </a>
+                </Menu.Item>
+              )
+            })}
+          </Menu.Popup>
+        </Menu.Positioner>
+      </Menu.Portal>
+    </Menu.Root>
+  )
+}

package/src/internals/BranchesDropdown/BranchesDropdown.module.css

@@ -0,0 +1,84 @@
+.iconBtn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: var(--color-foreground-muted);
+  transition: all 0.15s;
+}
+
+.iconBtn:hover {
+  background: rgba(0, 0, 0, 0.06);
+  color: var(--color-foreground-muted, #555);
+}
+
+.branchesPositioner {
+  z-index: 200;
+}
+
+.branchesPopup {
+  background: var(--color-background, #fff);
+  border: 1px solid var(--color-border, #e5e5e5);
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+  min-width: 240px;
+  max-width: min(360px, 90vw);
+  padding: 4px 0;
+  font-family: 'Mona Sans', -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+.branchesTitle {
+  padding: 6px 12px 4px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--color-foreground-muted, #999);
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+}
+
+.branchesItem {
+  display: block;
+  width: 100%;
+  padding: 6px 12px;
+  font-size: 14px;
+  color: var(--color-foreground-muted, #555);
+  cursor: pointer;
+  border: none;
+  background: none;
+  text-align: left;
+  transition: background 0.1s;
+  text-decoration: none;
+}
+
+.branchesItem:hover,
+.branchesItem[data-highlighted] {
+  background: var(--color-background-muted, #f5f5f5);
+  color: var(--color-foreground, #1a1a1a);
+}
+
+.branchesItemLink {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: inherit;
+  text-decoration: none;
+}
+
+.branchItemLabel {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.externalIndicator {
+  flex-shrink: 0;
+  color: var(--color-foreground-muted, #656d76);
+  font-size: 12px;
+}