@dfosco/storyboard 0.7.1 → 0.9.0

package/src/internals/ArtifactForm/ArtifactForm.module.css

@@ -1,116 +1,98 @@
-.form {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
+/* ArtifactForm — container + header/footer chrome around the BaseUiForm
+ * primitives. Visual goals: match the SimpleWorkspace aesthetic — white
+ * card on a neutral background, Mona Sans, 12px radii, soft borders. */
+
+.formShell {
   max-width: 480px;
-  padding: 1.5rem;
-  background: var(--bgColor-default, #ffffff);
-  border: 1px solid var(--borderColor-default, #d0d7de);
-  border-radius: 12px;
+  padding: 28px;
+  background: var(--color-background, #ffffff);
+  border: 1px solid var(--color-border, #d0d7de);
+  border-radius: 14px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
 }
 
-.form[data-compact] {
+.formShell[data-compact] {
   max-width: 360px;
-  padding: 1rem;
-  gap: 0.75rem;
+  padding: 18px;
+  gap: 12px;
+  border-radius: 12px;
 }
 
-.form[data-bare] {
+.formShell[data-bare] {
   max-width: none;
   padding: 0;
   background: transparent;
   border: none;
   border-radius: 0;
+  box-shadow: none;
 }
 
+/* ─── Header ─── */
+
 .header {
-  margin-bottom: 0.25rem;
+  margin: -4px 0 4px;
 }
 
 .title {
-  margin: 0 0 0.125rem;
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: var(--fgColor-default, #1f2328);
+  margin: 0 0 4px;
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 1.2;
+  color: var(--color-foreground, #1a1a1a);
+  letter-spacing: -0.01em;
 }
 
-.form[data-compact] .title {
-  font-size: 0.9375rem;
+.formShell[data-compact] .title {
+  font-size: 16px;
 }
 
 .description {
   margin: 0;
-  font-size: 0.8125rem;
-  color: var(--fgColor-muted, #656d76);
-  line-height: 1.4;
+  font-size: 14px;
+  color: var(--color-foreground-muted, #656d76);
+  line-height: 1.45;
 }
 
+/* ─── Type picker ─── */
+
 .typePicker {
-  margin-bottom: 0.25rem;
+  margin: 4px 0 0;
 }
 
-.typeButton {
-  width: 100%;
-  justify-content: flex-start;
-}
+/* ─── Field stack ─── */
 
 .fields {
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  gap: 14px;
 }
 
-.codeField {
-  font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace);
-  font-size: 0.8125rem;
-  line-height: 1.5;
-  resize: vertical;
-}
+/* ─── Code field override (textarea variant) ─── */
 
-.select {
-  display: block;
-  width: 100%;
-  padding: 0.375rem 0.75rem;
-  font-size: 0.875rem;
+.codeField {
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace);
+  font-size: 13px;
   line-height: 1.5;
-  color: var(--fgColor-default, #1f2328);
-  background-color: var(--bgColor-default, #ffffff);
-  border: 1px solid var(--borderColor-default, #d0d7de);
-  border-radius: 6px;
-  appearance: none;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23656d76'%3E%3Cpath d='m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427z'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 0.5rem center;
-  background-size: 16px;
-  padding-right: 2rem;
-}
-
-.select:focus {
-  border-color: var(--focus-outlineColor, #0969da);
-  outline: 2px solid var(--focus-outlineColor, #0969da);
-  outline-offset: -1px;
 }
 
-.checkboxLabel {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 0.875rem;
-  color: var(--fgColor-default, #1f2328);
-  cursor: pointer;
-}
+/* ─── Footer actions ─── */
 
 .footer {
   display: flex;
   justify-content: flex-end;
-  gap: 0.5rem;
-  margin-top: 0.5rem;
-  padding-top: 0.75rem;
-  border-top: 1px solid var(--borderColor-muted, #d8dee4);
+  align-items: center;
+  gap: 8px;
+  margin-top: 4px;
+  padding-top: 16px;
+  border-top: 1px solid var(--color-border-muted, #eaeef2);
 }
 
+/* ─── Advanced toggle ─── */
+
 .advancedToggle {
   align-self: flex-start;
-  margin-top: 4px;
-  color: var(--fgColor-muted);
+  margin-top: 2px;
+  color: var(--color-foreground-muted, #656d76);
+  padding-left: 10px;
+  padding-right: 10px;
 }

package/src/internals/ArtifactForm/artifactSchemas.js

@@ -14,17 +14,26 @@ export const ARTIFACT_SCHEMAS = {
     icon: '📐',
     description: 'Interactive prototype with pages and flows. Add a URL to make it external.',
     fields: [
-      { name: 'name', label: 'Name', type: 'text', required: true, placeholder: 'my-app', pattern: NAME_PATTERN, patternHint: NAME_HINT, maxLength: 64, tier: 'basic' },
-      { name: 'title', label: 'Title', type: 'text', placeholder: 'My App', tier: 'basic' },
+      { name: 'title', label: 'Title', type: 'text', required: true, placeholder: 'My App', tier: 'basic' },
+      { name: 'name', label: 'URL', type: 'text', required: true, placeholder: 'my-app', pattern: NAME_PATTERN, patternHint: NAME_HINT, maxLength: 64, tier: 'basic' },
       { name: 'description', label: 'Description', type: 'textarea', placeholder: 'What this prototype demonstrates…', tier: 'basic' },
-      { name: 'url', label: 'External URL', type: 'url', placeholder: 'https://figma.com/… (makes it external)', tier: 'basic' },
-      { name: 'partial', label: 'Template / Recipe', type: 'select', placeholder: 'Blank prototype', dynamic: 'partials', tier: 'basic' },
+      {
+        name: 'external',
+        label: 'External prototype',
+        checkboxLabel: 'External prototype',
+        type: 'checkbox',
+        caption: 'Add existing prototypes outside of Storyboard',
+        uiOnly: true,
+        tier: 'basic',
+      },
+      { name: 'url', label: 'External URL', type: 'url', placeholder: 'https://figma.com/…', tier: 'basic', showIf: { external: true } },
+      { name: 'partial', label: 'Template / Recipe', type: 'select', placeholder: 'Blank prototype', dynamic: 'partials', tier: 'basic', showIf: { external: false } },
       { name: 'author', label: 'Author', type: 'text', placeholder: 'dfosco (or comma-separated)', tier: 'advanced' },
       { name: 'folder', label: 'Folder', type: 'text', placeholder: 'main (optional .folder grouping)', tier: 'advanced' },
       { name: 'icon', label: 'Icon', type: 'text', placeholder: 'rocket', tier: 'advanced' },
       { name: 'tags', label: 'Tags', type: 'text', placeholder: 'design, exploration (comma-separated)', tier: 'advanced' },
       { name: 'team', label: 'Team', type: 'text', placeholder: 'design-systems', tier: 'advanced' },
-      { name: 'flow', label: 'Create default flow', type: 'checkbox', checkboxLabel: 'Generate a default.flow.json', tier: 'advanced' },
+      { name: 'flow', label: 'Create default flow', type: 'checkbox', checkboxLabel: 'Generate a default.flow.json', tier: 'advanced', showIf: { external: false } },
     ],
     operations: ['create', 'edit', 'delete', 'duplicate'],
     mutuallyExclusive: [['url', 'flow'], ['url', 'partial']],
@@ -109,9 +118,34 @@ export const ARTIFACT_SCHEMAS = {
   },
 }
 
+/**
+ * Evaluate a field's `showIf` predicate against current form values.
+ * Returns true if the field should be visible.
+ *
+ * Predicate format: `{ otherFieldName: expectedValue }`. For booleans,
+ * any falsy value matches `false` and any truthy value matches `true`.
+ */
+export function isFieldVisible(field, values) {
+  if (!field.showIf) return true
+  for (const [k, expected] of Object.entries(field.showIf)) {
+    const actual = values?.[k]
+    // Boolean-friendly comparison so `external: false` matches both
+    // undefined and explicit false.
+    if (typeof expected === 'boolean') {
+      if (Boolean(actual) !== expected) return false
+    } else if (actual !== expected) {
+      return false
+    }
+  }
+  return true
+}
+
 /**
  * Validate a form values object against a schema.
  * Returns { valid: boolean, errors: Record<string, string> }
+ *
+ * Fields hidden by `showIf` are skipped — we don't want to require
+ * fields the user can't see (e.g. `url` when `external` is unchecked).
  */
 export function validateArtifact(type, values) {
   const schema = ARTIFACT_SCHEMAS[type]
@@ -120,6 +154,7 @@ export function validateArtifact(type, values) {
   const errors = {}
 
   for (const field of schema.fields) {
+    if (!isFieldVisible(field, values)) continue
     const val = values[field.name]
 
     // Required check

package/src/internals/AuthModal/AuthModal.module.css

@@ -3,7 +3,7 @@
 .backdrop {
   position: fixed;
   inset: 0;
-  background: var(--overlay-backdrop-bgColor, rgba(0, 0, 0, 0.4));
+  background: var(--color-overlay-backdrop, rgba(0, 0, 0, 0.4));
   z-index: 10000;
 }
 
@@ -22,14 +22,14 @@
 }
 
 .popup {
-  background: var(--bgColor-default);
+  background: var(--color-background);
   border-radius: 12px;
-  box-shadow: var(--shadow-overlay, 0 16px 48px rgba(0, 0, 0, 0.12));
+  box-shadow: var(--shadow-floating, 0 16px 48px rgba(0, 0, 0, 0.12));
   padding: 28px;
   max-width: 620px;
   max-height: 90vh;
   overflow-y: auto;
-  color: var(--fgColor-default);
+  color: var(--color-foreground);
   position: relative;
 }
 
@@ -41,43 +41,43 @@
   border: none;
   font-size: 24px;
   line-height: 1;
-  color: var(--fgColor-muted);
+  color: var(--color-foreground-muted);
   cursor: pointer;
   padding: 4px 8px;
   border-radius: 4px;
 }
 
 .closeBtn:hover {
-  background: var(--bgColor-neutral-muted);
-  color: var(--fgColor-default);
+  background: var(--color-background-neutral-muted);
+  color: var(--color-foreground);
 }
 
 .title {
   font-size: 18px;
   font-weight: 600;
   margin-bottom: 8px;
-  color: var(--fgColor-default);
+  color: var(--color-foreground);
   padding-right: 32px;
 }
 
 .desc {
   font-size: 15px;
-  color: var(--fgColor-muted);
+  color: var(--color-foreground-muted);
   margin-bottom: 16px;
   line-height: 1.5;
 }
 
 .separator {
   border: none;
-  border-top: 1px solid var(--borderColor-default);
+  border-top: 1px solid var(--color-border);
   margin: 16px 0;
 }
 
 /* Token config card — matches GitHub PAT settings screenshot */
 
 .tokenCard {
-  background: var(--bgColor-muted);
-  border: 1px solid var(--borderColor-default);
+  background: var(--color-background-muted);
+  border: 1px solid var(--color-border);
   border-radius: 8px;
   padding: 14px 16px;
   margin-bottom: 12px;
@@ -86,7 +86,7 @@
 .tokenCardTitle {
   font-size: 15px;
   font-weight: 600;
-  color: var(--fgColor-default);
+  color: var(--color-foreground);
   margin-bottom: 8px;
 }
 
@@ -96,7 +96,7 @@
   gap: 6px;
   font-size: 14px;
   line-height: 1.8;
-  color: var(--fgColor-muted);
+  color: var(--color-foreground-muted);
 }
 
 .tokenCardLabel {
@@ -106,20 +106,20 @@
 .tokenCardCode {
   font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
   font-size: 13px;
-  color: var(--fgColor-default);
-  background: var(--bgColor-default);
+  color: var(--color-foreground);
+  background: var(--color-background);
   padding: 1px 6px;
   border-radius: 4px;
 }
 
 .tokenCardHint {
-  color: var(--fgColor-muted);
+  color: var(--color-foreground-muted);
 }
 
 .tokenLink {
   display: inline-block;
   font-size: 15px;
-  color: var(--fgColor-accent);
+  color: var(--color-foreground-accent);
   text-decoration: none;
   margin-bottom: 4px;
 }
@@ -134,31 +134,31 @@
   display: block;
   font-size: 15px;
   font-weight: 600;
-  color: var(--fgColor-default);
+  color: var(--color-foreground);
   margin-bottom: 6px;
 }
 
 .input {
   width: 100%;
   padding: 10px 12px;
-  border: 1px solid var(--borderColor-default);
+  border: 1px solid var(--color-border);
   border-radius: 6px;
   font-size: 15px;
   font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
   margin-bottom: 16px;
   box-sizing: border-box;
-  background: var(--bgColor-default);
-  color: var(--fgColor-default);
+  background: var(--color-background);
+  color: var(--color-foreground);
 }
 
 .input::placeholder {
-  color: var(--fgColor-muted);
+  color: var(--color-foreground-muted);
 }
 
 .input:focus {
   outline: none;
-  border-color: var(--borderColor-accent-emphasis);
-  box-shadow: 0 0 0 3px var(--borderColor-accent-muted);
+  border-color: var(--color-border-accent-emphasis);
+  box-shadow: 0 0 0 3px var(--color-border-accent-muted);
 }
 
 /* Warning banner */
@@ -168,11 +168,11 @@
   align-items: center;
   gap: 8px;
   padding: 10px 12px;
-  background: var(--bgColor-attention-muted);
-  border: 1px solid var(--borderColor-attention-muted);
+  background: var(--color-background-attention-muted);
+  border: 1px solid var(--color-border-attention-muted);
   border-radius: 6px;
   font-size: 14px;
-  color: var(--fgColor-attention);
+  color: var(--color-foreground-attention);
   margin-bottom: 8px;
 }
 
@@ -196,26 +196,26 @@
   border: none;
   border-radius: 6px;
   font-size: 15px;
-  color: var(--fgColor-muted);
+  color: var(--color-foreground-muted);
   cursor: pointer;
 }
 
 .btnSecondary:hover {
-  color: var(--fgColor-default);
-  background: var(--bgColor-neutral-muted);
+  color: var(--color-foreground);
+  background: var(--color-background-neutral-muted);
 }
 
 .btnPrimary {
   padding: 8px 20px;
-  background: var(--bgColor-accent-emphasis);
+  background: var(--color-background-accent-emphasis);
   border: none;
   border-radius: 6px;
   font-size: 15px;
   font-weight: 600;
-  color: var(--fgColor-onEmphasis);
+  color: var(--color-foreground-on-emphasis);
   cursor: pointer;
 }
 
 .btnPrimary:hover {
-  background: var(--bgColor-accent-emphasis-hover, var(--bgColor-accent-emphasis));
+  background: var(--color-background-accent-emphasis-hover, var(--color-background-accent-emphasis));
 }