@dfosco/storyboard 0.5.0-beta.44 → 0.5.0-beta.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dfosco/storyboard",
-  "version": "0.5.0-beta.44",
+  "version": "0.5.0-beta.45",
   "type": "module",
   "license": "MIT",
   "description": "Storyboard prototyping framework — core engine, React integration, and canvas",

package/src/internals/ArtifactForm/ArtifactForm.jsx

@@ -164,6 +164,8 @@ export default function ArtifactForm({
     setErrors({})
   }
 
+  const [showAdvanced, setShowAdvanced] = useState(false)
+
   const visibleFields = useMemo(() => {
     if (!schema) return []
     if (compact) return schema.fields.filter(f => f.required)
@@ -182,6 +184,18 @@ export default function ArtifactForm({
     return fields
   }, [schema, compact, values])
 
+  // Split into basic/advanced. A field with no `tier` defaults to 'basic'
+  // (matches the old behaviour for any schema not yet annotated).
+  const { basicFields, advancedFields } = useMemo(() => {
+    const basic = []
+    const advanced = []
+    for (const f of visibleFields) {
+      if (f.tier === 'advanced') advanced.push(f)
+      else basic.push(f)
+    }
+    return { basicFields: basic, advancedFields: advanced }
+  }, [visibleFields])
+
   if (!schema) {
     return (
       <Flash variant="warning">
@@ -234,7 +248,7 @@ export default function ArtifactForm({
       )}
 
       <div className={styles.fields}>
-        {visibleFields.map(field => {
+        {basicFields.map(field => {
           const options = field.dynamic ? dynamicOptions[field.dynamic] : field.options
           return (
             <FormControl key={field.name} required={field.required}>
@@ -257,6 +271,43 @@ export default function ArtifactForm({
             </FormControl>
           )
         })}
+
+        {advancedFields.length > 0 && (
+          <>
+            <Button
+              type="button"
+              variant="invisible"
+              size="small"
+              onClick={() => setShowAdvanced(s => !s)}
+              className={styles.advancedToggle}
+            >
+              {showAdvanced ? '− Hide advanced fields' : '+ Advanced fields'}
+            </Button>
+            {showAdvanced && advancedFields.map(field => {
+              const options = field.dynamic ? dynamicOptions[field.dynamic] : field.options
+              return (
+                <FormControl key={field.name} required={field.required}>
+                  <FormControl.Label>{field.label}</FormControl.Label>
+                  <FieldRenderer
+                    field={field}
+                    value={values[field.name]}
+                    error={errors[field.name]}
+                    onChange={val => handleChange(field.name, val)}
+                    options={options}
+                  />
+                  {errors[field.name] && (
+                    <FormControl.Validation variant="error">
+                      {errors[field.name]}
+                    </FormControl.Validation>
+                  )}
+                  {field.patternHint && !errors[field.name] && (
+                    <FormControl.Caption>{field.patternHint}</FormControl.Caption>
+                  )}
+                </FormControl>
+              )
+            })}
+          </>
+        )}
       </div>
 
       {errors._form && (

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

@@ -108,3 +108,9 @@
   padding-top: 0.75rem;
   border-top: 1px solid var(--borderColor-muted, #d8dee4);
 }
+
+.advancedToggle {
+  align-self: flex-start;
+  margin-top: 4px;
+  color: var(--fgColor-muted);
+}

package/src/internals/ArtifactForm/artifactSchemas.js

@@ -14,17 +14,17 @@ 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 },
-      { name: 'title', label: 'Title', type: 'text', placeholder: 'My App' },
-      { name: 'description', label: 'Description', type: 'textarea', placeholder: 'What this prototype demonstrates…' },
-      { name: 'author', label: 'Author', type: 'text', placeholder: 'dfosco (or comma-separated)' },
-      { name: 'folder', label: 'Folder', type: 'text', placeholder: 'main (optional .folder grouping)' },
-      { name: 'partial', label: 'Template / Recipe', type: 'select', placeholder: 'Blank prototype', dynamic: 'partials' },
-      { name: 'icon', label: 'Icon', type: 'text', placeholder: 'rocket' },
-      { name: 'tags', label: 'Tags', type: 'text', placeholder: 'design, exploration (comma-separated)' },
-      { name: 'team', label: 'Team', type: 'text', placeholder: 'design-systems' },
-      { name: 'url', label: 'External URL', type: 'url', placeholder: 'https://figma.com/… (makes it external)' },
-      { name: 'flow', label: 'Create default flow', type: 'checkbox', checkboxLabel: 'Generate a default.flow.json' },
+      { 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: '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: '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' },
     ],
     operations: ['create', 'edit', 'delete', 'duplicate'],
     mutuallyExclusive: [['url', 'flow'], ['url', 'partial']],
@@ -35,10 +35,10 @@ export const ARTIFACT_SCHEMAS = {
     icon: '🎨',
     description: 'Freeform spatial canvas for exploration and planning',
     fields: [
-      { name: 'name', label: 'Name', type: 'text', required: true, placeholder: 'design-system', pattern: NAME_PATTERN, patternHint: NAME_HINT, maxLength: 64 },
-      { name: 'title', label: 'Title', type: 'text', placeholder: 'Design Exploration' },
-      { name: 'description', label: 'Description', type: 'textarea', placeholder: 'Purpose of this canvas…' },
-      { name: 'folder', label: 'Folder', type: 'text', placeholder: 'storyboarding (optional grouping)' },
+      { name: 'name', label: 'Name', type: 'text', required: true, placeholder: 'design-system', pattern: NAME_PATTERN, patternHint: NAME_HINT, maxLength: 64, tier: 'basic' },
+      { name: 'title', label: 'Title', type: 'text', placeholder: 'Design Exploration', tier: 'basic' },
+      { name: 'description', label: 'Description', type: 'textarea', placeholder: 'Purpose of this canvas…', tier: 'basic' },
+      { name: 'folder', label: 'Folder', type: 'text', placeholder: 'storyboarding (optional grouping)', tier: 'advanced' },
     ],
     operations: ['create', 'edit', 'delete', 'duplicate'],
   },
@@ -48,8 +48,8 @@ export const ARTIFACT_SCHEMAS = {
     icon: '🧩',
     description: 'Reusable UI component with story file',
     fields: [
-      { name: 'name', label: 'Name', type: 'text', required: true, placeholder: 'LoginForm', pattern: '^[A-Z][A-Za-z0-9]+$', patternHint: 'PascalCase (e.g. LoginForm)', maxLength: 64 },
-      { name: 'directory', label: 'Directory', type: 'text', placeholder: 'src/components (default)' },
+      { name: 'name', label: 'Name', type: 'text', required: true, placeholder: 'LoginForm', pattern: '^[A-Z][A-Za-z0-9]+$', patternHint: 'PascalCase (e.g. LoginForm)', maxLength: 64, tier: 'basic' },
+      { name: 'directory', label: 'Directory', type: 'text', placeholder: 'src/components (default)', tier: 'advanced' },
     ],
     operations: ['create', 'delete'],
   },
@@ -59,14 +59,14 @@ export const ARTIFACT_SCHEMAS = {
     icon: '🔀',
     description: 'Page data context — composes objects via $ref and $global',
     fields: [
-      { name: 'name', label: 'Name', type: 'text', required: true, placeholder: 'default', pattern: NAME_PATTERN, patternHint: NAME_HINT, maxLength: 64 },
-      { name: 'prototype', label: 'Prototype', type: 'select', required: true, options: [], dynamic: 'prototypes' },
-      { name: 'title', label: 'Title', type: 'text', placeholder: 'Settings Flow' },
-      { name: 'description', label: 'Description', type: 'textarea', placeholder: 'Data context for…' },
-      { name: 'globals', label: '$global objects', type: 'text', placeholder: 'navigation, sidebar (comma-separated)' },
-      { name: 'folder', label: 'Folder', type: 'text', placeholder: 'Optional subfolder' },
-      { name: 'copyFrom', label: 'Copy from', type: 'text', placeholder: 'Existing flow name to duplicate' },
-      { name: 'startingPage', label: 'Starting page', type: 'text', placeholder: 'Route to open with this flow' },
+      { name: 'name', label: 'Name', type: 'text', required: true, placeholder: 'default', pattern: NAME_PATTERN, patternHint: NAME_HINT, maxLength: 64, tier: 'basic' },
+      { name: 'prototype', label: 'Prototype', type: 'select', required: true, options: [], dynamic: 'prototypes', tier: 'basic' },
+      { name: 'title', label: 'Title', type: 'text', placeholder: 'Settings Flow', tier: 'basic' },
+      { name: 'description', label: 'Description', type: 'textarea', placeholder: 'Data context for…', tier: 'basic' },
+      { name: 'globals', label: '$global objects', type: 'text', placeholder: 'navigation, sidebar (comma-separated)', tier: 'advanced' },
+      { name: 'folder', label: 'Folder', type: 'text', placeholder: 'Optional subfolder', tier: 'advanced' },
+      { name: 'copyFrom', label: 'Copy from', type: 'text', placeholder: 'Existing flow name to duplicate', tier: 'advanced' },
+      { name: 'startingPage', label: 'Starting page', type: 'text', placeholder: 'Route to open with this flow', tier: 'advanced' },
     ],
     operations: ['create', 'edit', 'delete', 'duplicate'],
   },
@@ -76,9 +76,9 @@ export const ARTIFACT_SCHEMAS = {
     icon: '📦',
     description: 'Reusable data fragment — freeform JSON',
     fields: [
-      { name: 'name', label: 'Name', type: 'text', required: true, placeholder: 'jane-doe', pattern: NAME_PATTERN, patternHint: NAME_HINT, maxLength: 64 },
-      { name: 'folder', label: 'Folder', type: 'text', placeholder: 'Optional folder (or inside prototype for scoping)' },
-      { name: 'body', label: 'JSON Body', type: 'code', placeholder: '{\n  "name": "Jane Doe",\n  "role": "admin"\n}', language: 'json' },
+      { name: 'name', label: 'Name', type: 'text', required: true, placeholder: 'jane-doe', pattern: NAME_PATTERN, patternHint: NAME_HINT, maxLength: 64, tier: 'basic' },
+      { name: 'body', label: 'JSON Body', type: 'code', placeholder: '{\n  "name": "Jane Doe",\n  "role": "admin"\n}', language: 'json', tier: 'basic' },
+      { name: 'folder', label: 'Folder', type: 'text', placeholder: 'Optional folder (or inside prototype for scoping)', tier: 'advanced' },
     ],
     operations: ['create', 'edit', 'delete', 'duplicate'],
   },
@@ -88,9 +88,9 @@ export const ARTIFACT_SCHEMAS = {
     icon: '📋',
     description: 'Collection of entries — array of objects with unique id',
     fields: [
-      { name: 'name', label: 'Name', type: 'text', required: true, placeholder: 'posts', pattern: NAME_PATTERN, patternHint: NAME_HINT, maxLength: 64 },
-      { name: 'folder', label: 'Folder', type: 'text', placeholder: 'Optional folder' },
-      { name: 'body', label: 'Entries (JSON array)', type: 'code', placeholder: '[\n  { "id": "first", "title": "First Entry" }\n]', language: 'json' },
+      { name: 'name', label: 'Name', type: 'text', required: true, placeholder: 'posts', pattern: NAME_PATTERN, patternHint: NAME_HINT, maxLength: 64, tier: 'basic' },
+      { name: 'body', label: 'Entries (JSON array)', type: 'code', placeholder: '[\n  { "id": "first", "title": "First Entry" }\n]', language: 'json', tier: 'basic' },
+      { name: 'folder', label: 'Folder', type: 'text', placeholder: 'Optional folder', tier: 'advanced' },
     ],
     operations: ['create', 'edit', 'delete'],
   },
@@ -100,10 +100,10 @@ export const ARTIFACT_SCHEMAS = {
     icon: '📄',
     description: 'A page inside an existing prototype',
     fields: [
-      { name: 'prototype', label: 'Prototype', type: 'select', required: true, options: [], dynamic: 'prototypes' },
-      { name: 'path', label: 'Path', type: 'text', required: true, placeholder: 'settings/general', pattern: '^[a-z0-9][a-z0-9-/]*$', patternHint: 'Lowercase path with slashes (e.g. settings/general)' },
-      { name: 'folder', label: 'Folder', type: 'text', placeholder: 'Optional subfolder within prototype' },
-      { name: 'template', label: 'Template', type: 'text', placeholder: 'Template page to copy from' },
+      { name: 'prototype', label: 'Prototype', type: 'select', required: true, options: [], dynamic: 'prototypes', tier: 'basic' },
+      { name: 'path', label: 'Path', type: 'text', required: true, placeholder: 'settings/general', pattern: '^[a-z0-9][a-z0-9-/]*$', patternHint: 'Lowercase path with slashes (e.g. settings/general)', tier: 'basic' },
+      { name: 'folder', label: 'Folder', type: 'text', placeholder: 'Optional subfolder within prototype', tier: 'advanced' },
+      { name: 'template', label: 'Template', type: 'text', placeholder: 'Template page to copy from', tier: 'advanced' },
     ],
     operations: ['create', 'delete'],
   },