@mind-fold/open-flow 0.2.10 → 0.2.12

package/dist/templates/markdown/structure/flows/spec-flow-template.md.txt

@@ -16,23 +16,23 @@
 
 ```
 [Source]
-    │
-    ▼
-[Layer 1] ─────────────────────────────┐
-    │                                   │
-    │  Data: { field1, field2 }        │
-    │  Transform: none                  │
-    │                                   │
-    ▼                                   │
-[Layer 2] ─────────────────────────────┤
-    │                                   │
-    │  Data: { field1, field2, extra } │
-    │  Transform: add computed field    │
-    │                                   │
-    ▼                                   │
-[Layer 3] ─────────────────────────────┘
-    │
-    ▼
+    |
+    v
+[Layer 1] -----------------------------+
+    |                                   |
+    |  Data: { field1, field2 }        |
+    |  Transform: none                  |
+    |                                   |
+    v                                   |
+[Layer 2] -----------------------------|
+    |                                   |
+    |  Data: { field1, field2, extra } |
+    |  Transform: add computed field    |
+    |                                   |
+    v                                   |
+[Layer 3] -----------------------------+
+    |
+    v
 [Consumer]
 ```
 
@@ -63,8 +63,8 @@
 **Transformation**: None (pass-through)
 
 **Error Handling**: 
-- Validation errors → 400 response
-- Not found → 404 response
+- Validation errors -> 400 response
+- Not found -> 404 response
 
 ---
 
@@ -87,7 +87,7 @@
 - Adds `computed` field based on `field1` and `field2`
 
 **Error Handling**:
-- Business logic errors → throw CustomError
+- Business logic errors -> throw CustomError
 
 ---
 

package/dist/templates/markdown/structure/frontend/component-guidelines.md.txt

@@ -68,10 +68,10 @@ Use proper HTML elements for their intended purpose.
 ### Interactive Elements
 
 ```typescript
-// ✅ GOOD: Use button for actions
+// [OK] GOOD: Use button for actions
 <button onClick={handleClick}>Click me</button>
 
-// ❌ BAD: Don't use div as button
+// [X] BAD: Don't use div as button
 <div role="button" onClick={handleClick}>Click me</div>
 ```
 
@@ -84,14 +84,14 @@ Use proper HTML elements for their intended purpose.
 // Link: navigates to a URL
 <Link href="/about">About</Link>
 
-// ❌ BAD: Button that looks like a link but navigates
+// [X] BAD: Button that looks like a link but navigates
 <button onClick={() => router.push('/about')}>About</button>
 ```
 
 ### Headings
 
 ```typescript
-// ✅ GOOD: Proper heading hierarchy
+// [OK] GOOD: Proper heading hierarchy
 <article>
   <h1>Page Title</h1>
   <section>
@@ -100,7 +100,7 @@ Use proper HTML elements for their intended purpose.
   </section>
 </article>
 
-// ❌ BAD: Skipping heading levels
+// [X] BAD: Skipping heading levels
 <h1>Title</h1>
 <h3>Subsection</h3>  // Missing h2
 ```
@@ -108,14 +108,14 @@ Use proper HTML elements for their intended purpose.
 ### Lists
 
 ```typescript
-// ✅ GOOD: Use list elements for lists
+// [OK] GOOD: Use list elements for lists
 <ul>
   {items.map(item => (
     <li key={item.id}>{item.name}</li>
   ))}
 </ul>
 
-// ❌ BAD: Divs for list
+// [X] BAD: Divs for list
 <div>
   {items.map(item => (
     <div key={item.id}>{item.name}</div>
@@ -132,7 +132,7 @@ Use proper HTML elements for their intended purpose.
 ```typescript
 import Image from 'next/image';
 
-// ✅ GOOD: Use Next.js Image
+// [OK] GOOD: Use Next.js Image
 <Image 
   src="/avatar.png" 
   alt="User avatar"
@@ -140,7 +140,7 @@ import Image from 'next/image';
   height={100}
 />
 
-// ❌ BAD: Native img tag
+// [X] BAD: Native img tag
 <img src="/avatar.png" alt="User avatar" />
 ```
 
@@ -172,17 +172,17 @@ module.exports = {
 ### Labels for Inputs
 
 ```typescript
-// ✅ GOOD: Associated label
+// [OK] GOOD: Associated label
 <label htmlFor="email">Email</label>
 <input id="email" type="email" />
 
-// ✅ GOOD: Implicit label
+// [OK] GOOD: Implicit label
 <label>
   Email
   <input type="email" />
 </label>
 
-// ❌ BAD: No label
+// [X] BAD: No label
 <input type="email" placeholder="Email" />
 ```
 

package/dist/templates/markdown/structure/frontend/directory-structure.md.txt

@@ -8,37 +8,37 @@
 
 ```
 src/
-├── app/                     # Next.js App Router (if using Next.js)
-│   ├── (marketing)/         # Marketing pages group
-│   ├── (app)/               # Application pages group
-│   └── api/                 # API routes
-│
-├── components/              # Shared components
-│   ├── ui/                  # Base UI components (Button, Input, etc.)
-│   └── common/              # Composite components (Header, Footer, etc.)
-│
-├── modules/                 # Feature modules
-│   └── {feature}/
-│       ├── components/      # Feature-specific components
-│       ├── hooks/           # Feature-specific hooks
-│       ├── context/         # Feature-specific context
-│       ├── lib/             # Feature-specific utilities
-│       └── types.ts         # Feature types
-│
-├── hooks/                   # Shared hooks
-│   ├── use-debounce.ts
-│   └── use-local-storage.ts
-│
-├── lib/                     # Shared utilities
-│   ├── api-client.ts        # API client setup
-│   ├── utils.ts             # Helper functions
-│   └── constants.ts         # Global constants
-│
-├── types/                   # Shared type definitions
-│   └── index.ts
-│
-└── styles/                  # Global styles
-    └── globals.css
+|-- app/                     # Next.js App Router (if using Next.js)
+|   |-- (marketing)/         # Marketing pages group
+|   |-- (app)/               # Application pages group
+|   \-- api/                 # API routes
+|
+|-- components/              # Shared components
+|   |-- ui/                  # Base UI components (Button, Input, etc.)
+|   \-- common/              # Composite components (Header, Footer, etc.)
+|
+|-- modules/                 # Feature modules
+|   \-- {feature}/
+|       |-- components/      # Feature-specific components
+|       |-- hooks/           # Feature-specific hooks
+|       |-- context/         # Feature-specific context
+|       |-- lib/             # Feature-specific utilities
+|       \-- types.ts         # Feature types
+|
+|-- hooks/                   # Shared hooks
+|   |-- use-debounce.ts
+|   \-- use-local-storage.ts
+|
+|-- lib/                     # Shared utilities
+|   |-- api-client.ts        # API client setup
+|   |-- utils.ts             # Helper functions
+|   \-- constants.ts         # Global constants
+|
+|-- types/                   # Shared type definitions
+|   \-- index.ts
+|
+\-- styles/                  # Global styles
+    \-- globals.css
 ```
 
 ---
@@ -49,23 +49,23 @@ Each feature module is self-contained:
 
 ```
 modules/users/
-├── components/
-│   ├── user-card.tsx        # Display component
-│   ├── user-form.tsx        # Form component
-│   └── user-list.tsx        # List component
-│
-├── hooks/
-│   ├── use-user.ts          # Single user query
-│   ├── use-users.ts         # Users list query
-│   └── use-update-user.ts   # Update mutation
-│
-├── context/
-│   └── user-context.tsx     # Feature-level state
-│
-├── lib/
-│   └── user-utils.ts        # Feature-specific helpers
-│
-└── types.ts                 # Feature types (if not from API)
+|-- components/
+|   |-- user-card.tsx        # Display component
+|   |-- user-form.tsx        # Form component
+|   \-- user-list.tsx        # List component
+|
+|-- hooks/
+|   |-- use-user.ts          # Single user query
+|   |-- use-users.ts         # Users list query
+|   \-- use-update-user.ts   # Update mutation
+|
+|-- context/
+|   \-- user-context.tsx     # Feature-level state
+|
+|-- lib/
+|   \-- user-utils.ts        # Feature-specific helpers
+|
+\-- types.ts                 # Feature types (if not from API)
 ```
 
 ---
@@ -76,23 +76,23 @@ modules/users/
 
 ```
 components/ui/
-├── button.tsx               # Base button
-├── input.tsx                # Base input
-├── select.tsx               # Base select
-├── dialog.tsx               # Modal dialog
-├── dropdown-menu.tsx        # Dropdown menu
-└── index.ts                 # Barrel export
+|-- button.tsx               # Base button
+|-- input.tsx                # Base input
+|-- select.tsx               # Base select
+|-- dialog.tsx               # Modal dialog
+|-- dropdown-menu.tsx        # Dropdown menu
+\-- index.ts                 # Barrel export
 ```
 
 ### Common Components (Composites)
 
 ```
 components/common/
-├── header.tsx               # App header
-├── sidebar.tsx              # Navigation sidebar
-├── page-layout.tsx          # Page wrapper
-├── error-boundary.tsx       # Error boundary
-└── loading-spinner.tsx      # Loading state
+|-- header.tsx               # App header
+|-- sidebar.tsx              # Navigation sidebar
+|-- page-layout.tsx          # Page wrapper
+|-- error-boundary.tsx       # Error boundary
+\-- loading-spinner.tsx      # Loading state
 ```
 
 ---
@@ -157,12 +157,12 @@ import styles from './user-list.module.css';
 ## Module Boundaries
 
 ```
-✅ ALLOWED:
+[OK] ALLOWED:
 - modules/users/ imports from components/ui/
 - modules/users/ imports from hooks/
 - modules/users/ imports from lib/
 
-❌ NOT ALLOWED:
+[X] NOT ALLOWED:
 - modules/users/ imports from modules/orders/
   (Use shared hooks or lift to common location)
 ```

package/dist/templates/markdown/structure/frontend/hook-guidelines.md.txt

@@ -50,12 +50,12 @@ export function useUsers(page: number, pageSize: number = 20) {
 ### Query Key Rules
 
 ```typescript
-// ✅ GOOD: Include all dependencies in query key
+// [OK] GOOD: Include all dependencies in query key
 queryKey: ['user', userId]
 queryKey: ['users', { page, pageSize, filter }]
 queryKey: ['posts', userId, 'comments']
 
-// ❌ BAD: Missing dependencies
+// [X] BAD: Missing dependencies
 queryKey: ['user']  // Same key for different users!
 queryKey: ['users']  // Same key for different pages!
 ```
@@ -258,15 +258,15 @@ const toggle = useCallback(() => setValue(v => !v), []);
 ```typescript
 // Don't fetch in useEffect
 useEffect(() => {
-  fetch('/api/user').then(...)  // ❌ Use useQuery instead
+  fetch('/api/user').then(...)  // [X] Use useQuery instead
 }, []);
 
 // Don't ignore error states
 const { data } = useUser(id);
-return <div>{data.name}</div>;  // ❌ data might be undefined
+return <div>{data.name}</div>;  // [X] data might be undefined
 
 // Don't mutate query data directly
-data.name = 'New Name';  // ❌ Use mutation
+data.name = 'New Name';  // [X] Use mutation
 ```
 
 ---

package/dist/templates/markdown/structure/frontend/index.md.txt

@@ -36,19 +36,19 @@ This collection of guidelines covers essential patterns and best practices for b
 
 ```
 src/
-├── components/              # Shared components
-│   ├── ui/                  # Base UI components
-│   └── common/              # Common composite components
-│
-├── modules/                 # Feature modules
-│   └── {feature}/
-│       ├── components/      # Feature-specific components
-│       ├── hooks/           # Feature-specific hooks
-│       └── types.ts         # Feature types
-│
-├── hooks/                   # Shared hooks
-├── lib/                     # Utilities
-└── types/                   # Shared types
+|-- components/              # Shared components
+|   |-- ui/                  # Base UI components
+|   \-- common/              # Common composite components
+|
+|-- modules/                 # Feature modules
+|   \-- {feature}/
+|       |-- components/      # Feature-specific components
+|       |-- hooks/           # Feature-specific hooks
+|       \-- types.ts         # Feature types
+|
+|-- hooks/                   # Shared hooks
+|-- lib/                     # Utilities
+\-- types/                   # Shared types
 ```
 
 ### Key Rules

package/dist/templates/markdown/structure/frontend/quality-guidelines.md.txt

@@ -26,11 +26,11 @@ pnpm test
 ### Any Type
 
 ```typescript
-// ❌ FORBIDDEN
+// [X] FORBIDDEN
 function process(data: any) { ... }
 const result: any = await fetch(...);
 
-// ✅ REQUIRED
+// [OK] REQUIRED
 function process(data: unknown) {
   if (isValidData(data)) {
     // Now data is typed
@@ -41,11 +41,11 @@ function process(data: unknown) {
 ### Non-Null Assertions
 
 ```typescript
-// ❌ FORBIDDEN
+// [X] FORBIDDEN
 const name = user!.name;
 const element = document.querySelector('.item')!;
 
-// ✅ REQUIRED
+// [OK] REQUIRED
 if (!user) return null;
 const name = user.name;
 
@@ -56,11 +56,11 @@ if (!element) return;
 ### Type Assertions Without Validation
 
 ```typescript
-// ❌ FORBIDDEN
+// [X] FORBIDDEN
 const data = response as UserData;
 const config = JSON.parse(str) as Config;
 
-// ✅ REQUIRED
+// [OK] REQUIRED
 const data = userDataSchema.parse(response);
 if (!isUserData(response)) throw new Error('Invalid data');
 ```
@@ -68,11 +68,11 @@ if (!isUserData(response)) throw new Error('Invalid data');
 ### Div Instead of Semantic HTML
 
 ```typescript
-// ❌ FORBIDDEN
+// [X] FORBIDDEN
 <div role="button" onClick={handleClick}>Click</div>
 <div onClick={handleNavigate}>Go to page</div>
 
-// ✅ REQUIRED
+// [OK] REQUIRED
 <button onClick={handleClick}>Click</button>
 <Link href="/page">Go to page</Link>
 ```
@@ -80,10 +80,10 @@ if (!isUserData(response)) throw new Error('Invalid data');
 ### Native img in Next.js
 
 ```typescript
-// ❌ FORBIDDEN
+// [X] FORBIDDEN
 <img src="/photo.jpg" alt="Photo" />
 
-// ✅ REQUIRED
+// [OK] REQUIRED
 import Image from 'next/image';
 <Image src="/photo.jpg" alt="Photo" width={200} height={200} />
 ```
@@ -91,14 +91,14 @@ import Image from 'next/image';
 ### useEffect for Data Fetching
 
 ```typescript
-// ❌ FORBIDDEN
+// [X] FORBIDDEN
 useEffect(() => {
   fetch('/api/users')
     .then(res => res.json())
     .then(setUsers);
 }, []);
 
-// ✅ REQUIRED
+// [OK] REQUIRED
 const { data: users } = useQuery({
   queryKey: ['users'],
   queryFn: () => api.users.list(),
@@ -112,7 +112,7 @@ const { data: users } = useQuery({
 ### Handle Loading States
 
 ```typescript
-// ✅ REQUIRED: Handle all states
+// [OK] REQUIRED: Handle all states
 function UserList() {
   const { data, isLoading, error } = useUsers();
   
@@ -127,7 +127,7 @@ function UserList() {
 ### Accessible Forms
 
 ```typescript
-// ✅ REQUIRED: Labels for all inputs
+// [OK] REQUIRED: Labels for all inputs
 <label htmlFor="email">Email</label>
 <input id="email" type="email" aria-describedby="email-error" />
 {error && <span id="email-error" role="alert">{error}</span>}
@@ -136,7 +136,7 @@ function UserList() {
 ### Error Boundaries
 
 ```typescript
-// ✅ REQUIRED: Wrap feature modules
+// [OK] REQUIRED: Wrap feature modules
 <ErrorBoundary fallback={<ErrorFallback />}>
   <FeatureModule />
 </ErrorBoundary>
@@ -196,32 +196,32 @@ export function UserCard({ user }: Props) {
 ### Memoization
 
 ```typescript
-// ✅ Memoize expensive calculations
+// [OK] Memoize expensive calculations
 const sortedItems = useMemo(
   () => items.sort((a, b) => a.name.localeCompare(b.name)),
   [items]
 );
 
-// ✅ Memoize callbacks passed to children
+// [OK] Memoize callbacks passed to children
 const handleClick = useCallback(() => {
   doSomething(id);
 }, [id]);
 
-// ❌ Don't memoize everything - only when needed
+// [X] Don't memoize everything - only when needed
 const name = useMemo(() => user.name, [user.name]);  // Unnecessary
 ```
 
 ### Avoid Unnecessary Rerenders
 
 ```typescript
-// ❌ BAD: Creates new object every render
+// [X] BAD: Creates new object every render
 <Component style={{ color: 'red' }} />
 
-// ✅ GOOD: Stable reference
+// [OK] GOOD: Stable reference
 const style = { color: 'red' };  // Outside component
 <Component style={style} />
 
-// ✅ GOOD: Or use className
+// [OK] GOOD: Or use className
 <Component className="text-red" />
 ```
 

package/dist/templates/markdown/structure/frontend/state-management.md.txt

@@ -220,12 +220,12 @@ function ProductList() {
 
 ```
 Is the state needed by multiple components?
-├─ No → Local state (useState)
-└─ Yes → Is it from the server?
-         ├─ Yes → React Query
-         └─ No → Should it persist in URL?
-                 ├─ Yes → URL state (searchParams)
-                 └─ No → Context or Zustand
+|- No -> Local state (useState)
+\- Yes -> Is it from the server?
+         |- Yes -> React Query
+         \- No -> Should it persist in URL?
+                 |- Yes -> URL state (searchParams)
+                 \- No -> Context or Zustand
 ```
 
 ---
@@ -235,7 +235,7 @@ Is the state needed by multiple components?
 ### Don't Sync Server State to Local State
 
 ```typescript
-// ❌ BAD: Duplicating server state
+// [X] BAD: Duplicating server state
 const { data: users } = useUsers();
 const [localUsers, setLocalUsers] = useState<User[]>([]);
 
@@ -243,7 +243,7 @@ useEffect(() => {
   if (users) setLocalUsers(users);
 }, [users]);
 
-// ✅ GOOD: Use server state directly
+// [OK] GOOD: Use server state directly
 const { data: users } = useUsers();
 // Use users directly, mutate with mutations
 ```
@@ -251,17 +251,17 @@ const { data: users } = useUsers();
 ### Don't Overuse Global State
 
 ```typescript
-// ❌ BAD: Everything in global state
+// [X] BAD: Everything in global state
 const { isModalOpen, setModalOpen } = useGlobalStore();
 
-// ✅ GOOD: Local state for local UI
+// [OK] GOOD: Local state for local UI
 const [isModalOpen, setIsModalOpen] = useState(false);
 ```
 
 ### Don't Put Derived State in State
 
 ```typescript
-// ❌ BAD: Storing derived value
+// [X] BAD: Storing derived value
 const [items, setItems] = useState([]);
 const [filteredItems, setFilteredItems] = useState([]);
 
@@ -269,7 +269,7 @@ useEffect(() => {
   setFilteredItems(items.filter(i => i.active));
 }, [items]);
 
-// ✅ GOOD: Compute derived value
+// [OK] GOOD: Compute derived value
 const [items, setItems] = useState([]);
 const filteredItems = items.filter(i => i.active);
 // Or useMemo for expensive computations