whiteport-design-studio 0.1.0

package/src/workflows/4-ux-design/steps/step-02-substeps/page-init/workshop-page-process.md

@@ -0,0 +1,333 @@
+# Page Process Workshop
+
+**Purpose:** Intelligent sketch analysis with context detection - handles both new and updated sketches
+
+---
+
+## CONTEXT
+
+**This workflow activates when:** User has a sketch/visualization ready to analyze.
+
+**Intelligence:** Detects if this is a new page or update to existing specification.
+
+**Behavior:** 
+- New page → Full analysis
+- Updated page → Change detection, incremental update
+- Partial completion → Specify ready sections, mark TBD
+
+---
+
+## STEP 1: CONTEXT DETECTION
+
+<action>
+**Determine page context:**
+
+1. Read current page specification (if exists)
+2. Check for existing sketch versions
+3. Identify project structure (scenarios, pages)
+4. Store context information
+</action>
+
+<check if="!page_spec_exists">
+  <output>**This is the first sketch for this page!**
+  
+  Let me analyze what you've drawn and create the initial specification.</output>
+  
+  <action>Route to: `substeps/4b-sketch-analysis.md` (existing workflow)</action>
+</check>
+
+<check if="page_spec_exists">
+  <output>**I see we already have specifications for this page.**
+  
+  Let me compare this sketch to what we have...</output>
+  
+  <action>Proceed to STEP 2: Change Detection</action>
+</check>
+
+---
+
+## STEP 2: CHANGE DETECTION (For Existing Pages)
+
+<action>
+**Compare new sketch to existing specifications:**
+
+1. Load existing specification document
+2. Identify which sections are already specified
+3. Analyze new sketch for:
+   - Unchanged sections
+   - Modified sections
+   - New sections added
+   - Removed sections
+   - TBD sections now complete
+   - Complete sections now TBD
+
+4. Calculate confidence for each comparison
+</action>
+
+<output>**Comparison Results:**
+
+{{#if has_changes}}
+🔍 **Changes detected:**
+
+{{#if unchanged_sections.length > 0}}
+✅ **Unchanged sections** ({{unchanged_sections.length}}):
+{{#each section in unchanged_sections}}
+- {{section.name}}
+{{/each}}
+{{/if}}
+
+{{#if modified_sections.length > 0}}
+✏️ **Modified sections** ({{modified_sections.length}}):
+{{#each section in modified_sections}}
+- {{section.name}}: {{section.change_description}}
+{{/each}}
+{{/if}}
+
+{{#if new_sections.length > 0}}
+➕ **New sections added** ({{new_sections.length}}):
+{{#each section in new_sections}}
+- {{section.name}}: {{section.description}}
+{{/each}}
+{{/if}}
+
+{{#if completed_sections.length > 0}}
+✨ **TBD sections now complete** ({{completed_sections.length}}):
+{{#each section in completed_sections}}
+- {{section.name}}: Ready to specify
+{{/each}}
+{{/if}}
+
+{{#if removed_sections.length > 0}}
+⚠️ **Sections removed** ({{removed_sections.length}}):
+{{#each section in removed_sections}}
+- {{section.name}}
+{{/each}}
+{{/if}}
+
+{{else}}
+✅ **No changes detected**
+
+This sketch appears identical to the existing specification. Are you sure you wanted to upload a new version?
+{{/if}}
+
+</output>
+
+---
+
+## STEP 3: UPDATE STRATEGY
+
+<check if="has_changes">
+
+<ask>**How would you like to proceed?**
+
+{{#if modified_sections.length > 0 or new_sections.length > 0 or completed_sections.length > 0}}
+[A] Update all changed/new/completed sections
+[B] Pick specific sections to update
+[C] Show me detailed comparison first
+[D] Actually, this is the same - cancel
+{{else if removed_sections.length > 0}}
+[A] Remove deleted sections from spec
+[B] Keep them marked as "removed from design"
+[C] Cancel - I'll fix the sketch
+{{/if}}
+
+Choice:</ask>
+
+<action>Store user_choice</action>
+
+</check>
+
+---
+
+## STEP 4A: UPDATE ALL (If user chose A)
+
+<check if="user_choice == 'A'">
+
+<output>**Updating all changed sections:**
+
+I'll process:
+{{#if modified_sections.length > 0}}
+- {{modified_sections.length}} modified sections
+{{/if}}
+{{#if new_sections.length > 0}}
+- {{new_sections.length}} new sections
+{{/if}}
+{{#if completed_sections.length > 0}}
+- {{completed_sections.length}} completed sections
+{{/if}}
+{{#if removed_sections.length > 0}}
+- {{removed_sections.length}} removed sections
+{{/if}}
+
+**Preserving:**
+{{#each section in unchanged_sections}}
+- {{section.name}}
+{{/each}}
+
+Ready to analyze sections?</output>
+
+<action>
+For each section in (modified_sections + new_sections + completed_sections):
+  Run 4b-sketch-analysis.md workflow for that section only
+  Update specification document
+  Preserve unchanged sections
+End
+</action>
+
+</check>
+
+---
+
+## STEP 4B: SELECTIVE UPDATE (If user chose B)
+
+<check if="user_choice == 'B'">
+
+<ask>**Which sections should I update?**
+
+{{#each section in (modified_sections + new_sections + completed_sections)}}
+[{{@index + 1}}] {{section.name}} - {{section.change_type}}
+{{/each}}
+
+Enter numbers separated by commas (e.g., 1,3,5):</ask>
+
+<action>
+Parse selected_sections
+For each selected section:
+  Run 4b-sketch-analysis.md workflow for that section
+  Update specification document
+End
+</action>
+
+</check>
+
+---
+
+## STEP 4C: DETAILED COMPARISON (If user chose C)
+
+<check if="user_choice == 'C'">
+
+<output>**Detailed Section-by-Section Comparison:**
+
+{{#each section in modified_sections}}
+
+---
+
+### {{section.name}}
+
+**Current specification:**
+{{section.current_spec_summary}}
+
+**New sketch shows:**
+{{section.new_sketch_summary}}
+
+**Detected changes:**
+{{#each change in section.changes}}
+- {{change.description}}
+{{/each}}
+
+**Confidence:** {{section.confidence}}%
+
+---
+{{/each}}
+
+After reviewing, what would you like to do?
+
+[A] Update all
+[B] Pick specific sections
+[C] Cancel</output>
+
+<action>Return to STEP 3 with user's choice</action>
+
+</check>
+
+---
+
+## STEP 5: COMPLETION
+
+<output>✅ **Page specification updated!**
+
+**Summary:**
+{{#if updated_count > 0}}
+- {{updated_count}} sections updated
+{{/if}}
+{{#if added_count > 0}}
+- {{added_count}} sections added
+{{/if}}
+{{#if preserved_count > 0}}
+- {{preserved_count}} sections preserved (unchanged)
+{{/if}}
+{{#if removed_count > 0}}
+- {{removed_count}} sections removed
+{{/if}}
+
+**Updated file:** `{{page_spec_path}}`
+
+**Sketch saved to:** `{{sketch_path}}`
+
+**Next steps:**
+- Review the updated specification
+- Generate updated prototype (if needed)
+- Continue to next page or scenario
+
+Would you like to:
+[A] Generate HTML prototype
+[B] Add another page
+[C] Update another section
+[D] Done with this page
+
+Choice:</output>
+
+---
+
+## ROUTING
+
+<action>
+Based on user choice:
+- [A] → Load prototype generation workflow
+- [B] → Return to page-init/step-01-page-context.md
+- [C] → Return to STEP 3 (pick sections)
+- [D] → Return to main UX design menu
+</action>
+
+---
+
+## KEY FEATURES
+
+### ✅ **Intelligent Context Detection**
+- Automatically knows if new or update
+- Compares sketches to existing specs
+- Identifies unchanged sections
+
+### ✅ **Incremental Updates**
+- Only updates what changed
+- Preserves existing work
+- No data loss
+
+### ✅ **Change Confidence**
+- Shows confidence level per change
+- Lets user verify before processing
+- Reduces errors
+
+### ✅ **Flexible Control**
+- Update all or select specific
+- See detailed comparison
+- Cancel anytime
+
+---
+
+## INTEGRATION WITH EXISTING SYSTEM
+
+This workshop uses:
+- **4b-sketch-analysis.md** - For actual section analysis
+- **SKETCH-TEXT-ANALYSIS-GUIDE.md** - For reading text markers
+- **page-specification.template.md** - For document structure
+- **object-types/*.md** - For component specifications
+
+**It's a smart router that preserves your existing workflows!**
+
+---
+
+**Created:** December 28, 2025  
+**For:** Iterative page specification workflow  
+**Status:** Ready to test with WDS Presentation page
+

package/src/workflows/4-ux-design/steps/step-02-substeps/scenario-init/step-01-core-feature.md

@@ -0,0 +1,26 @@
+# Step 1: Core Feature
+
+**Scenario Discovery - Question 1 of 5**
+
+---
+
+<output>**Let's find the natural starting point for this scenario.**
+
+Looking at your Trigger Map and project goals, we need to identify what to design.</output>
+
+<ask>**What feature or experience should this scenario cover?**
+
+Think about:
+- Which feature delivers the most value to your primary target group?
+- What's the core experience that serves your business goals?
+- What's the "happy path" users need?
+
+Feature/Experience:</ask>
+
+<action>Store core_feature</action>
+<template-output>core_feature</template-output>
+
+---
+
+<action>Load and execute: `step-02-substeps/flow-c-multiple-scenarios/step-02-entry-point.md`</action>
+

package/src/workflows/4-ux-design/steps/step-02-substeps/scenario-init/step-02-entry-point.md

@@ -0,0 +1,26 @@
+# Step 2: Entry Point
+
+**Scenario Discovery - Question 2 of 5**
+
+---
+
+<ask>**Where does the user first encounter this?**
+
+What's their entry point?
+- Google search?
+- Friend recommendation?
+- App store?
+- Direct navigation (logged in)?
+- Internal link from another feature?
+- Email/push notification?
+- External integration?
+
+Entry point:</ask>
+
+<action>Store entry_point</action>
+<template-output>entry_point</template-output>
+
+---
+
+<action>Load and execute: `step-02-substeps/flow-c-multiple-scenarios/step-03-mental-state.md`</action>
+

package/src/workflows/4-ux-design/steps/step-02-substeps/scenario-init/step-03-mental-state.md

@@ -0,0 +1,24 @@
+# Step 3: Mental State
+
+**Scenario Discovery - Question 3 of 5**
+
+---
+
+<ask>**What's their mental state at this moment?**
+
+When they arrive, how are they feeling?
+
+Consider:
+- **What just happened?** (trigger moment that brings them here)
+- **What are they hoping for?** (desired outcome)
+- **What are they worried about?** (fears, concerns, obstacles)
+
+Mental state:</ask>
+
+<action>Store mental_state</action>
+<template-output>mental_state</template-output>
+
+---
+
+<action>Load and execute: `step-02-substeps/flow-c-multiple-scenarios/step-04-mutual-success.md`</action>
+

package/src/workflows/4-ux-design/steps/step-02-substeps/scenario-init/step-04-mutual-success.md

@@ -0,0 +1,27 @@
+# Step 4: Mutual Success
+
+**Scenario Discovery - Question 4 of 5**
+
+---
+
+<ask>**What does mutual success look like?**
+
+Define success for both sides:
+
+**For the business:** [what outcome/action/metric]
+Examples: subscription purchased, task completed, data submitted
+
+**For the user:** [what state/feeling/outcome they achieve]
+Examples: problem solved, goal achieved, confidence gained
+
+Success definition:</ask>
+
+<action>Store business_success</action>
+<action>Store user_success</action>
+<template-output>business_success</template-output>
+<template-output>user_success</template-output>
+
+---
+
+<action>Load and execute: `step-02-substeps/flow-c-multiple-scenarios/step-05-shortest-path.md`</action>
+

package/src/workflows/4-ux-design/steps/step-02-substeps/scenario-init/step-05-shortest-path.md

@@ -0,0 +1,39 @@
+# Step 5: Shortest Path
+
+**Scenario Discovery - Question 5 of 5**
+
+---
+
+<output>**Now let's map the shortest possible journey** from:
+
+**START:** {{entry_point}} ({{mental_state}})  
+**END:** {{business_success}} + {{user_success}}
+
+What's the absolute minimum path? No extra steps, just the essentials that move the user toward mutual success.</output>
+
+<ask>**List the critical pages/steps in order:**
+
+Example for SaaS onboarding:
+1. Landing page - understand solution
+2. Sign up - commit to trying
+3. Welcome setup - quick configuration
+4. First success moment - proof it works
+5. Dashboard - ongoing use
+
+Example for mobile app:
+1. App store page - decide to install
+2. Welcome screen - understand purpose
+3. Permission requests - enable features
+4. Quick tutorial - learn basics
+5. First action - achieve something
+
+Your path:</ask>
+
+<action>Parse pages from user input</action>
+<action>Store pages_list</action>
+<template-output>pages_list</template-output>
+
+---
+
+<action>Load and execute: `step-02-substeps/flow-c-multiple-scenarios/step-06-scenario-name.md`</action>
+

package/src/workflows/4-ux-design/steps/step-02-substeps/scenario-init/step-06-scenario-name.md

@@ -0,0 +1,24 @@
+# Step 6: Scenario Name
+
+---
+
+<ask>**What should we call this scenario?**
+
+Make it descriptive and outcome-focused:
+
+Examples:
+- "User Onboarding to First Success"
+- "Purchase Journey"
+- "Problem Resolution Flow"
+- "Content Creation Workflow"
+- "Admin Setup Process"
+
+Scenario name:</ask>
+
+<action>Store scenario_name</action>
+<template-output>scenario_name</template-output>
+
+---
+
+<action>Load and execute: `step-02-substeps/flow-c-multiple-scenarios/step-07-create-structure.md`</action>
+

package/src/workflows/4-ux-design/steps/step-02-substeps/scenario-init/step-07-create-scenario-folder.md

@@ -0,0 +1,145 @@
+# Step 7: Create Structure
+
+---
+
+<action>
+**Determine scenario number:**
+- Count existing scenario folders in `4-scenarios/`
+- If none exist, scenario_num = 1
+- Otherwise, scenario_num = (highest number + 1)
+- Store scenario_num
+</action>
+
+<action>
+**Create physical folder structure:**
+
+1. Create `4-scenarios/{{scenario_num}}-{{scenario-slug}}/` directory
+
+**Generate 00-scenario-overview.md:**
+
+File: `4-scenarios/{{scenario_num}}-{{scenario-slug}}/00-scenario-overview.md`
+
+Content:
+```markdown
+# Scenario {{scenario_num}}: {{scenario_name}}
+
+**Project Structure:** Multiple scenarios
+
+---
+
+## Core Feature
+
+{{core_feature}}
+
+---
+
+## User Journey
+
+### Entry Point
+
+{{entry_point}}
+
+### Mental State
+
+{{mental_state}}
+
+When users arrive, they are feeling:
+- **Trigger:** [what just happened]
+- **Hope:** [what they're hoping for]
+- **Worry:** [what they're worried about]
+
+---
+
+## Success Goals
+
+### Business Success
+
+{{business_success}}
+
+### User Success
+
+{{user_success}}
+
+---
+
+## Shortest Path
+
+{{#each page in pages_list}}
+{{@index + 1}}. **{{page.name}}** - {{page.description}}
+{{/each}}
+
+---
+
+## Pages in This Scenario
+
+{{#each page in pages_list}}
+- `{{scenario_num}}.{{@index + 1}}-{{page.slug}}/`
+{{/each}}
+
+---
+
+## Trigger Map Connections
+
+[Link to relevant personas and driving forces from Trigger Map]
+
+---
+
+**Created:** {{date}}
+**Status:** Ready for design
+```
+
+**Generate scenario-tracking.yaml:**
+
+File: `4-scenarios/{{scenario_num}}-{{scenario-slug}}/scenario-tracking.yaml`
+
+Content:
+```yaml
+scenario_number: {{scenario_num}}
+scenario_name: "{{scenario_name}}"
+core_feature: "{{core_feature}}"
+entry_point: "{{entry_point}}"
+mental_state: "{{mental_state}}"
+business_success: "{{business_success}}"
+user_success: "{{user_success}}"
+pages_list:
+{{#each page in pages_list}}
+  - name: "{{page.name}}"
+    slug: "{{page.slug}}"
+    page_number: "{{scenario_num}}.{{@index + 1}}"
+    description: "{{page.description}}"
+    status: "not_started"
+{{/each}}
+current_page_index: 0
+total_pages: {{pages_list.length}}
+```
+
+**Note:** Individual page folders and documents will be created when you run the page-init workshop for each page.
+</action>
+
+<output>✅ **Scenario structure created:**
+
+**Scenario {{scenario_num}}:** {{scenario_name}}
+
+**Folder:**
+- `4-scenarios/{{scenario_num}}-{{scenario-slug}}/`
+
+**Documents:**
+- `00-scenario-overview.md` (detailed scenario metadata)
+- `scenario-tracking.yaml` (progress tracking)
+
+**Journey Overview:**
+- **Start:** {{entry_point}} ({{mental_state}})
+- **End:** {{business_success}} + {{user_success}}
+- **Pages planned:** {{pages_list.length}}
+
+**Next Step:**
+- Run the page-init workshop to define and create the first page in this scenario
+
+The scenario container is ready! 🎨</output>
+
+---
+
+<output>[C] Continue to Page Initialization Workshop</output>
+
+<action>When user selects [C], load `step-02-substeps/page-init/step-01-page-context.md`</action>
+