@dfosco/storyboard 0.7.1 → 0.9.0

package/src/internals/CreatePage/CreatePage.jsx

@@ -0,0 +1,57 @@
+/**
+ * CreatePage — full-page route that renders only the schema-driven
+ * artifact creation form, centered on a clean background. Used by
+ * `storyboard create --ui` to give the user a focused creation surface
+ * without the workspace/viewfinder chrome.
+ *
+ * URL contract:
+ *   /create               → picker (TypeSelector visible)
+ *   /create?type=canvas   → fixed type
+ *
+ * The component renders as a fixed full-viewport overlay so it covers
+ * the chrome (BranchBar, FeatureFlagBanner, CoreUIBar toolbar) that
+ * StoryboardProvider mounts globally — even on this route. No close
+ * button: this surface is opened by the CLI specifically as the create
+ * flow; the user closes it by completing/cancelling the form.
+ *
+ * After successful create:
+ *   - If the artifact has a route (prototype, canvas, page) → navigate to it.
+ *   - Otherwise → navigate back to the workspace (basePath).
+ */
+import { useMemo } from 'react'
+import CreateArtifactForm from '../CommandPalette/CreateArtifactForm.jsx'
+import styles from './CreatePage.module.css'
+
+export default function CreatePage({ basePath }) {
+  const resolvedBase = basePath || (typeof window !== 'undefined' ? '/' : '/')
+
+  // Parse `?type=<type>` once. We don't react to changes — switching the
+  // type is handled in-form via the TypeSelector when in picker mode.
+  const type = useMemo(() => {
+    if (typeof window === 'undefined') return null
+    const params = new URLSearchParams(window.location.search)
+    return params.get('type') || null
+  }, [])
+
+  function handleClose() {
+    // Cancel = navigate back to the workspace. Hard navigation so we
+    // drop the `?type=…` query and any in-flight form state.
+    if (typeof window !== 'undefined') {
+      const target = (resolvedBase || '/').replace(/\/+$/, '/') || '/'
+      window.location.href = target
+    }
+  }
+
+  return (
+    <div className={styles.page}>
+      <div className={styles.card}>
+        <CreateArtifactForm
+          type={type}
+          basePath={resolvedBase}
+          onClose={handleClose}
+          hideHeader={false}
+        />
+      </div>
+    </div>
+  )
+}

package/src/internals/CreatePage/CreatePage.module.css

@@ -0,0 +1,34 @@
+/**
+ * Standalone create-only page styling.
+ *
+ * The page is a fixed full-viewport overlay so it covers the chrome
+ * (BranchBar, FeatureFlagBanner, CoreUIBar toolbar) that
+ * StoryboardProvider mounts globally on every prototype route. A high
+ * z-index keeps it above the toolbar specifically.
+ *
+ * The `.card` wrapper deliberately mirrors `.form` in ArtifactForm.module.css
+ * so the card looks identical to the in-app dialog body.
+ */
+
+.page {
+  position: fixed;
+  inset: 0;
+  /* Sits above the BranchBar (10001), CoreUIBar toolbar (9999), and any
+   * other dev-overlay chrome StoryboardProvider mounts. The /create
+   * route is a focused creation surface — chrome would be a distraction. */
+  z-index: 2147483646;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 2rem 1.5rem 4rem;
+  background: var(--color-background-muted, #f6f8fa);
+  overflow: auto;
+}
+
+.card {
+  width: 100%;
+  max-width: 480px;
+  /* Center horizontally; vertical alignment is flex-start so tall forms
+   * scroll naturally instead of clipping the top. */
+  margin: auto;
+}

package/src/internals/Dialog.jsx

@@ -0,0 +1,51 @@
+/**
+ * Dialog — internal adapter that exposes a Primer-style
+ * `<Dialog title subtitle onClose width height>` API on top of the
+ * framework-neutral core Dialog primitive (`core/lib/components/ui/dialog`).
+ *
+ * Lets the command palette mount its existing dialogs without pulling in
+ * `@primer/react/experimental`. See plan `.github/plans/style-separation.md`
+ * (Layer A).
+ *
+ * Semantics:
+ *   - The dialog is open while mounted (caller controls visibility by
+ *     conditionally rendering this component, matching Primer's behaviour).
+ *   - Backdrop click + ESC fire `onClose`.
+ */
+import * as Dialog from '../core/lib/components/ui/dialog/index.js'
+import css from '../core/lib/components/ui/dialog/dialog.module.css'
+
+export default function DialogAdapter({
+  title,
+  subtitle,
+  onClose,
+  width = 'medium',
+  height = 'auto',
+  children,
+}) {
+  return (
+    <Dialog.Root open onOpenChange={(open) => { if (!open) onClose?.() }}>
+      <Dialog.Content width={width} height={height} aria-label={typeof title === 'string' ? title : undefined}>
+        {(title || subtitle) && (
+          <div className={css.header}>
+            <div className={css.titleGroup}>
+              {title && <h2 className={css.title}>{title}</h2>}
+              {subtitle && <p className={css.subtitle}>{subtitle}</p>}
+            </div>
+            <button
+              type="button"
+              className={css.closeBtn}
+              onClick={() => onClose?.()}
+              aria-label="Close"
+            >
+              <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+                <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.75.75 0 1 1 1.06 1.06L9.06 8l3.22 3.22a.75.75 0 1 1-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 0 1-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z" />
+              </svg>
+            </button>
+          </div>
+        )}
+        <div className={css.body}>{children}</div>
+      </Dialog.Content>
+    </Dialog.Root>
+  )
+}

package/src/internals/FlowError.module.css

@@ -10,9 +10,9 @@
   padding: 12px 16px;
   margin-bottom: 16px;
   border-radius: 6px;
-  border: 1px solid var(--borderColor-danger-emphasis, #da3633);
-  background-color: var(--bgColor-danger-muted, rgba(248, 81, 73, 0.1));
-  color: var(--fgColor-danger, #f85149);
+  border: 1px solid var(--color-border-danger-emphasis, #da3633);
+  background-color: var(--color-background-danger-muted, rgba(248, 81, 73, 0.1));
+  color: var(--color-foreground-danger, #f85149);
 }
 
 .banner strong {
@@ -21,10 +21,10 @@
 }
 
 .meta {
-  color: var(--fgColor-muted, #9198a1);
+  color: var(--color-foreground-muted, #9198a1);
 }
 
 .meta a,
 .homeLink {
-  color: var(--fgColor-accent, #4493f8);
+  color: var(--color-foreground-accent, #4493f8);
 }

package/src/internals/PrototypeErrorBoundary.module.css

@@ -4,16 +4,16 @@
   margin: 0 auto;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
   font-size: 14px;
-  color: var(--fgColor-default, #e6edf3);
+  color: var(--color-foreground, #e6edf3);
 }
 
 .banner {
   padding: 12px 16px;
   margin-bottom: 16px;
   border-radius: 6px;
-  border: 1px solid var(--borderColor-danger-emphasis, #da3633);
-  background-color: var(--bgColor-danger-muted, rgba(248, 81, 73, 0.1));
-  color: var(--fgColor-danger, #f85149);
+  border: 1px solid var(--color-border-danger-emphasis, #da3633);
+  background-color: var(--color-background-danger-muted, rgba(248, 81, 73, 0.1));
+  color: var(--color-foreground-danger, #f85149);
 }
 
 .banner strong {
@@ -25,7 +25,7 @@
   display: block;
   margin-bottom: 4px;
   font-size: 12px;
-  color: var(--fgColor-muted, #9198a1);
+  color: var(--color-foreground-muted, #9198a1);
 }
 
 .actions {
@@ -36,12 +36,12 @@
 }
 
 .meta {
-  color: var(--fgColor-muted, #9198a1);
+  color: var(--color-foreground-muted, #9198a1);
 }
 
 .meta a,
 .homeLink {
-  color: var(--fgColor-accent, #4493f8);
+  color: var(--color-foreground-accent, #4493f8);
   text-decoration: none;
 }
 
@@ -52,15 +52,15 @@
 .retryBtn {
   padding: 4px 12px;
   border-radius: 6px;
-  border: 1px solid var(--borderColor-default, #3d444d);
-  background: var(--bgColor-default, #0d1117);
-  color: var(--fgColor-default, #e6edf3);
+  border: 1px solid var(--color-border, #3d444d);
+  background: var(--color-background, #0d1117);
+  color: var(--color-foreground, #e6edf3);
   font-size: 13px;
   cursor: pointer;
 }
 
 .retryBtn:hover {
-  background: var(--bgColor-muted, #161b22);
+  background: var(--color-background-muted, #161b22);
 }
 
 .stackDetails {
@@ -69,21 +69,21 @@
 
 .stackSummary {
   cursor: pointer;
-  color: var(--fgColor-muted, #9198a1);
+  color: var(--color-foreground-muted, #9198a1);
   font-size: 12px;
   user-select: none;
 }
 
 .stackSummary:hover {
-  color: var(--fgColor-default, #e6edf3);
+  color: var(--color-foreground, #e6edf3);
 }
 
 .stackPre {
   margin-top: 8px;
   padding: 12px;
   border-radius: 6px;
-  background: var(--bgColor-muted, #161b22);
-  color: var(--fgColor-muted, #9198a1);
+  background: var(--color-background-muted, #161b22);
+  color: var(--color-foreground-muted, #9198a1);
   font-size: 12px;
   line-height: 1.5;
   overflow-x: auto;