@chrisflippen/blueprint-document-assembly 3.0.0 → 3.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +289 -176
- package/dist/index.d.mts +10 -3
- package/dist/index.d.ts +10 -3
- package/dist/index.js +12 -12
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +12 -12
- package/dist/index.mjs.map +1 -1
- package/package.json +13 -12
package/README.md
CHANGED
|
@@ -1,49 +1,33 @@
|
|
|
1
1
|
# Blueprint Document Assembly
|
|
2
2
|
|
|
3
|
-
An animation-heavy React component for visualizing multi-step processes as a Blueprint/Technical Document Assembly system.
|
|
3
|
+
An animation-heavy React component library for visualizing multi-step processes as a Blueprint/Technical Document Assembly system. Features progressive document construction, streaming logs, cinematic completion effects, theming, animation presets, and accessibility support.
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
|
|
6
|
+
|
|
7
7
|
|
|
8
|
-
##
|
|
8
|
+
## Features
|
|
9
9
|
|
|
10
|
-
-
|
|
11
|
-
-
|
|
12
|
-
-
|
|
13
|
-
-
|
|
14
|
-
-
|
|
15
|
-
-
|
|
16
|
-
-
|
|
17
|
-
-
|
|
18
|
-
-
|
|
10
|
+
- **Cinematic Animations** — Smooth, professional animations powered by Motion (Framer Motion) with 4 built-in presets
|
|
11
|
+
- **Progressive Document Assembly** — Watch documents build piece-by-piece as steps complete with typewriter effects
|
|
12
|
+
- **ThemeProvider** — Full React Context theming; change all colors by passing a single config
|
|
13
|
+
- **Animation Presets** — Smooth, Snappy, Cinematic, and Minimal presets with configurable timings
|
|
14
|
+
- **Accessibility** — `prefers-reduced-motion` support, ARIA roles (`progressbar`, `log`, `dialog`), focus trap in modal, keyboard navigation
|
|
15
|
+
- **Mobile Responsive** — Automatic vertical stacking on small screens via `useResponsiveLayout`
|
|
16
|
+
- **Headless Hook** — `useDocumentAssembly()` for full control without any UI
|
|
17
|
+
- **Generic Presets** — Squiggle text presets (`~~~~~ ~~~ ~~~~~~~`) for non-domain-specific demos
|
|
18
|
+
- **Real-time Metrics** — Track tokens, costs, and elapsed time
|
|
19
|
+
- **Dark Mode** — Respects system theme preferences
|
|
20
|
+
- **TypeScript** — Fully typed with exported interfaces
|
|
19
21
|
|
|
20
|
-
##
|
|
22
|
+
## Installation
|
|
21
23
|
|
|
22
24
|
```bash
|
|
23
|
-
npm install blueprint-document-assembly motion lucide-react
|
|
25
|
+
npm install @chrisflippen/blueprint-document-assembly motion lucide-react
|
|
24
26
|
```
|
|
25
27
|
|
|
26
|
-
|
|
28
|
+
## Styling Requirements
|
|
27
29
|
|
|
28
|
-
|
|
29
|
-
yarn add blueprint-document-assembly motion lucide-react
|
|
30
|
-
```
|
|
31
|
-
|
|
32
|
-
Or with pnpm:
|
|
33
|
-
|
|
34
|
-
```bash
|
|
35
|
-
pnpm add blueprint-document-assembly motion lucide-react
|
|
36
|
-
```
|
|
37
|
-
|
|
38
|
-
## 🎨 Styling Requirements
|
|
39
|
-
|
|
40
|
-
This component requires **Tailwind CSS v4**. Make sure you have Tailwind CSS installed and configured:
|
|
41
|
-
|
|
42
|
-
```bash
|
|
43
|
-
npm install tailwindcss @tailwindcss/vite
|
|
44
|
-
```
|
|
45
|
-
|
|
46
|
-
Your Tailwind CSS theme should include these CSS variables for optimal styling:
|
|
30
|
+
This component requires **Tailwind CSS v4**. Your theme should include these CSS variables:
|
|
47
31
|
|
|
48
32
|
```css
|
|
49
33
|
@theme {
|
|
@@ -52,7 +36,6 @@ Your Tailwind CSS theme should include these CSS variables for optimal styling:
|
|
|
52
36
|
--color-muted: #f4f4f5;
|
|
53
37
|
--color-muted-foreground: #71717a;
|
|
54
38
|
--color-border: #e4e4e7;
|
|
55
|
-
/* Add more theme variables as needed */
|
|
56
39
|
}
|
|
57
40
|
|
|
58
41
|
@media (prefers-color-scheme: dark) {
|
|
@@ -66,215 +49,345 @@ Your Tailwind CSS theme should include these CSS variables for optimal styling:
|
|
|
66
49
|
}
|
|
67
50
|
```
|
|
68
51
|
|
|
69
|
-
|
|
52
|
+
### Tailwind Safelist (required when using ThemeProvider)
|
|
53
|
+
|
|
54
|
+
Dynamic theme colors generate Tailwind classes at runtime. Add them to your safelist:
|
|
55
|
+
|
|
56
|
+
```ts
|
|
57
|
+
import { getThemeSafelist } from '@chrisflippen/blueprint-document-assembly';
|
|
58
|
+
|
|
59
|
+
// In your Tailwind config
|
|
60
|
+
safelist: getThemeSafelist({ primary: 'blue', success: 'green' })
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
## Quick Start
|
|
70
64
|
|
|
71
65
|
```tsx
|
|
72
|
-
import { BlueprintDocumentAssembly } from 'blueprint-document-assembly';
|
|
66
|
+
import { BlueprintDocumentAssembly } from '@chrisflippen/blueprint-document-assembly';
|
|
73
67
|
|
|
74
68
|
function App() {
|
|
75
69
|
return <BlueprintDocumentAssembly />;
|
|
76
70
|
}
|
|
77
71
|
```
|
|
78
72
|
|
|
79
|
-
|
|
73
|
+
Zero-config renders a sworn affidavit assembly with default steps, logs, and document sections.
|
|
80
74
|
|
|
81
|
-
##
|
|
75
|
+
## Usage Examples
|
|
82
76
|
|
|
83
|
-
###
|
|
77
|
+
### Callbacks
|
|
84
78
|
|
|
85
79
|
```tsx
|
|
86
|
-
import { BlueprintDocumentAssembly } from 'blueprint-document-assembly';
|
|
87
|
-
import type { DocumentMetrics, Step } from 'blueprint-document-assembly';
|
|
80
|
+
import { BlueprintDocumentAssembly } from '@chrisflippen/blueprint-document-assembly';
|
|
81
|
+
import type { DocumentMetrics, Step } from '@chrisflippen/blueprint-document-assembly';
|
|
88
82
|
|
|
89
83
|
function App() {
|
|
90
|
-
const handleComplete = (metrics: DocumentMetrics) => {
|
|
91
|
-
console.log('Assembly complete!', metrics);
|
|
92
|
-
// { tokens: 2847, cost: 0.0234, elapsed: 14.2 }
|
|
93
|
-
};
|
|
94
|
-
|
|
95
|
-
const handleStepComplete = (step: Step, metrics: DocumentMetrics) => {
|
|
96
|
-
console.log(`Step ${step.number} completed:`, step.title);
|
|
97
|
-
};
|
|
98
|
-
|
|
99
84
|
return (
|
|
100
85
|
<BlueprintDocumentAssembly
|
|
101
|
-
onComplete={
|
|
102
|
-
onStepComplete={
|
|
86
|
+
onComplete={(metrics: DocumentMetrics) => console.log('Done!', metrics)}
|
|
87
|
+
onStepComplete={(step: Step) => console.log(`Step ${step.number} done`)}
|
|
103
88
|
/>
|
|
104
89
|
);
|
|
105
90
|
}
|
|
106
91
|
```
|
|
107
92
|
|
|
108
|
-
### Custom
|
|
93
|
+
### ThemeProvider — Custom Colors
|
|
94
|
+
|
|
95
|
+
Pass a `theme` prop to recolor all components. Colors map to Tailwind color names.
|
|
109
96
|
|
|
110
97
|
```tsx
|
|
111
98
|
<BlueprintDocumentAssembly
|
|
112
|
-
|
|
99
|
+
theme={{ primary: 'blue', success: 'green', processing: 'indigo' }}
|
|
113
100
|
/>
|
|
101
|
+
```
|
|
114
102
|
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
103
|
+
Under the hood this wraps the component tree in a `<ThemeProvider>` that resolves color names into Tailwind class strings. Components read from context via `useThemeOptional()` and fall back to hardcoded styles when no provider is present.
|
|
104
|
+
|
|
105
|
+
You can also use the provider directly for sub-components:
|
|
106
|
+
|
|
107
|
+
```tsx
|
|
108
|
+
import { ThemeProvider, useTheme, resolveTheme } from '@chrisflippen/blueprint-document-assembly';
|
|
109
|
+
|
|
110
|
+
function CustomUI() {
|
|
111
|
+
const theme = useTheme(); // throws if no provider
|
|
112
|
+
return <div className={theme.primary.bg}>Themed content</div>;
|
|
113
|
+
}
|
|
118
114
|
```
|
|
119
115
|
|
|
120
|
-
###
|
|
116
|
+
### Animation Presets
|
|
117
|
+
|
|
118
|
+
Four built-in presets control all animation timings, springs, stagger delays, and typewriter speeds:
|
|
121
119
|
|
|
122
120
|
```tsx
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
121
|
+
import {
|
|
122
|
+
BlueprintDocumentAssembly,
|
|
123
|
+
SMOOTH_PRESET, // Default — balanced
|
|
124
|
+
SNAPPY_PRESET, // Fast, responsive
|
|
125
|
+
CINEMATIC_PRESET, // Slow, dramatic
|
|
126
|
+
MINIMAL_PRESET, // Near-instant (used automatically for reduced motion)
|
|
127
|
+
} from '@chrisflippen/blueprint-document-assembly';
|
|
128
|
+
|
|
129
|
+
<BlueprintDocumentAssembly animationPreset={SNAPPY_PRESET} />
|
|
126
130
|
```
|
|
127
131
|
|
|
128
|
-
|
|
132
|
+
You can also override individual timings without a full preset:
|
|
129
133
|
|
|
130
134
|
```tsx
|
|
131
135
|
<BlueprintDocumentAssembly
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
136
|
+
animationTimings={{
|
|
137
|
+
stepActivation: 400,
|
|
138
|
+
substepDelay: 250,
|
|
139
|
+
typewriterSpeed: 15,
|
|
135
140
|
}}
|
|
136
141
|
/>
|
|
137
142
|
```
|
|
138
143
|
|
|
139
|
-
###
|
|
144
|
+
### Squiggle Text Presets
|
|
145
|
+
|
|
146
|
+
Generic document presets using tilde characters instead of real content — useful for demos, portfolios, and non-legal use cases:
|
|
140
147
|
|
|
141
148
|
```tsx
|
|
142
|
-
import
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
},
|
|
157
|
-
// ... more steps
|
|
158
|
-
];
|
|
159
|
-
|
|
160
|
-
<BlueprintDocumentAssembly steps={customSteps} />
|
|
149
|
+
import {
|
|
150
|
+
BlueprintDocumentAssembly,
|
|
151
|
+
SQUIGGLE_STEPS,
|
|
152
|
+
SQUIGGLE_STEP_LOGS,
|
|
153
|
+
SQUIGGLE_SUBSTEP_LOGS,
|
|
154
|
+
SQUIGGLE_DOCUMENT_SECTIONS,
|
|
155
|
+
} from '@chrisflippen/blueprint-document-assembly';
|
|
156
|
+
|
|
157
|
+
<BlueprintDocumentAssembly
|
|
158
|
+
steps={SQUIGGLE_STEPS}
|
|
159
|
+
stepLogs={SQUIGGLE_STEP_LOGS}
|
|
160
|
+
substepLogs={SQUIGGLE_SUBSTEP_LOGS}
|
|
161
|
+
documentSections={SQUIGGLE_DOCUMENT_SECTIONS}
|
|
162
|
+
/>
|
|
161
163
|
```
|
|
162
164
|
|
|
163
|
-
|
|
165
|
+
Squiggle presets use the same section IDs and substep triggers as the legal preset, so they're a drop-in replacement.
|
|
164
166
|
|
|
165
|
-
###
|
|
167
|
+
### Headless Hook
|
|
166
168
|
|
|
167
|
-
|
|
168
|
-
|------|------|---------|-------------|
|
|
169
|
-
| `steps` | `Step[]` | Default affidavit steps | Array of steps to process |
|
|
170
|
-
| `stepLogs` | `Record<string, string[][]>` | Default logs | Custom log data for each step |
|
|
171
|
-
| `substepLogs` | `Record<string, string[][]>` | Default logs | Custom log data for each substep |
|
|
172
|
-
| `autoScroll` | `boolean` | `true` | Auto-scroll to show new content |
|
|
173
|
-
| `showWholeDocumentView` | `boolean` | `true` | Show zoom-out view on completion |
|
|
174
|
-
| `documentIds` | `DocumentIds` | Auto-generated | Custom case/file numbers |
|
|
175
|
-
| `animationSpeed` | `number` | `1` | Animation speed multiplier |
|
|
176
|
-
| `onComplete` | `(metrics: DocumentMetrics) => void` | - | Callback when complete |
|
|
177
|
-
| `onStepComplete` | `(step: Step, metrics: DocumentMetrics) => void` | - | Callback when step completes |
|
|
178
|
-
| `className` | `string` | - | Custom className for root |
|
|
179
|
-
|
|
180
|
-
### Types
|
|
181
|
-
|
|
182
|
-
```typescript
|
|
183
|
-
interface Step {
|
|
184
|
-
id: string;
|
|
185
|
-
number: number;
|
|
186
|
-
title: string;
|
|
187
|
-
status: 'pending' | 'active' | 'processing' | 'completed';
|
|
188
|
-
substeps?: SubStep[];
|
|
189
|
-
documentSection?: string;
|
|
190
|
-
logs: LogEntry[];
|
|
191
|
-
}
|
|
169
|
+
Use `useDocumentAssembly()` for full programmatic control without the built-in UI:
|
|
192
170
|
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
171
|
+
```tsx
|
|
172
|
+
import { useDocumentAssembly } from '@chrisflippen/blueprint-document-assembly';
|
|
173
|
+
|
|
174
|
+
function CustomAssembly() {
|
|
175
|
+
const {
|
|
176
|
+
steps, progress, isRunning, isComplete, metrics,
|
|
177
|
+
completedSubsteps, completedSections,
|
|
178
|
+
start, pause, resume, reset, goToStep,
|
|
179
|
+
} = useDocumentAssembly({
|
|
180
|
+
autoStart: false,
|
|
181
|
+
animationTimings: { stepActivation: 500 },
|
|
182
|
+
onComplete: (m) => console.log('Done', m),
|
|
183
|
+
});
|
|
199
184
|
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
185
|
+
return (
|
|
186
|
+
<div>
|
|
187
|
+
<p>Progress: {progress}%</p>
|
|
188
|
+
<button onClick={start}>Start</button>
|
|
189
|
+
<button onClick={pause}>Pause</button>
|
|
190
|
+
<button onClick={resume}>Resume</button>
|
|
191
|
+
<button onClick={reset}>Reset</button>
|
|
192
|
+
</div>
|
|
193
|
+
);
|
|
205
194
|
}
|
|
195
|
+
```
|
|
206
196
|
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
}
|
|
197
|
+
### Imperative Control via Ref
|
|
198
|
+
|
|
199
|
+
```tsx
|
|
200
|
+
import { useRef } from 'react';
|
|
201
|
+
import { BlueprintDocumentAssembly } from '@chrisflippen/blueprint-document-assembly';
|
|
202
|
+
import type { BlueprintDocumentAssemblyRef } from '@chrisflippen/blueprint-document-assembly';
|
|
203
|
+
|
|
204
|
+
function App() {
|
|
205
|
+
const ref = useRef<BlueprintDocumentAssemblyRef>(null);
|
|
212
206
|
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
207
|
+
return (
|
|
208
|
+
<>
|
|
209
|
+
<BlueprintDocumentAssembly ref={ref} autoStart={false} />
|
|
210
|
+
<button onClick={() => ref.current?.start()}>Start</button>
|
|
211
|
+
<button onClick={() => ref.current?.pause()}>Pause</button>
|
|
212
|
+
</>
|
|
213
|
+
);
|
|
216
214
|
}
|
|
217
215
|
```
|
|
218
216
|
|
|
219
|
-
##
|
|
217
|
+
## Accessibility
|
|
220
218
|
|
|
221
|
-
|
|
222
|
-
- **Compliance Workflows**: Multi-step verification and approval processes
|
|
223
|
-
- **Technical Documentation**: System build processes, deployment pipelines
|
|
224
|
-
- **Manufacturing**: Assembly line visualization
|
|
225
|
-
- **Medical**: Patient intake and verification processes
|
|
226
|
-
- **Financial**: Loan application processing, KYC workflows
|
|
219
|
+
### Reduced Motion
|
|
227
220
|
|
|
228
|
-
|
|
221
|
+
The library automatically detects `prefers-reduced-motion: reduce` and:
|
|
222
|
+
- Skips typewriter animations (shows full text immediately)
|
|
223
|
+
- Disables sparkle/celebration effects
|
|
224
|
+
- Uses `MINIMAL_PRESET` timings (near-instant transitions)
|
|
225
|
+
- Removes entrance slide/scale animations
|
|
229
226
|
|
|
230
|
-
|
|
227
|
+
When using `AnimationProvider`, reduced motion detection is automatic:
|
|
231
228
|
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
229
|
+
```tsx
|
|
230
|
+
import { AnimationProvider, useAnimation } from '@chrisflippen/blueprint-document-assembly';
|
|
231
|
+
|
|
232
|
+
function MyComponent() {
|
|
233
|
+
const { reducedMotion, preset } = useAnimation();
|
|
234
|
+
// reducedMotion === true when user prefers reduced motion
|
|
235
|
+
}
|
|
236
|
+
```
|
|
236
237
|
|
|
237
|
-
|
|
238
|
+
You can also use the hook standalone:
|
|
238
239
|
|
|
239
|
-
|
|
240
|
+
```tsx
|
|
241
|
+
import { useReducedMotion } from '@chrisflippen/blueprint-document-assembly';
|
|
240
242
|
|
|
243
|
+
const prefersReduced = useReducedMotion(); // boolean
|
|
241
244
|
```
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
245
|
+
|
|
246
|
+
### ARIA Attributes
|
|
247
|
+
|
|
248
|
+
- Progress bar: `role="progressbar"` with `aria-valuenow`, `aria-valuemin`, `aria-valuemax`
|
|
249
|
+
- Log containers: `role="log"` with `aria-live="polite"`
|
|
250
|
+
- Log toggles: `aria-expanded` and `aria-label`
|
|
251
|
+
- Substep lists: `role="list"` and `role="listitem"`
|
|
252
|
+
- Root container: `aria-label="Document assembly"`
|
|
253
|
+
- Document lines: `aria-busy` while typewriter animation is active
|
|
254
|
+
- Completion modal: `role="dialog"`, `aria-modal="true"`, focus trap, `Escape` to close
|
|
255
|
+
|
|
256
|
+
### Keyboard Navigation
|
|
257
|
+
|
|
258
|
+
- **Escape** — closes the completion modal overlay
|
|
259
|
+
- **Tab** — cycles focus within the modal (trapped between close button and content)
|
|
260
|
+
- **focus-visible** ring styling on all interactive elements
|
|
261
|
+
|
|
262
|
+
## Mobile Responsive
|
|
263
|
+
|
|
264
|
+
On screens narrower than 768px, the layout automatically switches from horizontal (side-by-side) to vertical (stacked). Use the hook directly:
|
|
265
|
+
|
|
266
|
+
```tsx
|
|
267
|
+
import { useResponsiveLayout } from '@chrisflippen/blueprint-document-assembly';
|
|
268
|
+
|
|
269
|
+
const { isMobile, isTablet, direction } = useResponsiveLayout();
|
|
270
|
+
// direction: 'vertical' on mobile, 'horizontal' on desktop
|
|
256
271
|
```
|
|
257
272
|
|
|
258
|
-
|
|
273
|
+
Or override via the `layout` prop:
|
|
259
274
|
|
|
260
|
-
|
|
275
|
+
```tsx
|
|
276
|
+
<BlueprintDocumentAssembly layout={{ direction: 'vertical' }} />
|
|
277
|
+
```
|
|
261
278
|
|
|
262
|
-
##
|
|
279
|
+
## API Reference
|
|
263
280
|
|
|
264
|
-
|
|
281
|
+
### BlueprintDocumentAssembly Props
|
|
265
282
|
|
|
266
|
-
|
|
283
|
+
| Prop | Type | Default | Description |
|
|
284
|
+
|------|------|---------|-------------|
|
|
285
|
+
| `steps` | `Step[]` | Default affidavit steps | Steps to process |
|
|
286
|
+
| `stepLogs` | `Record<string, string[][]>` | Default logs | Log data per step |
|
|
287
|
+
| `substepLogs` | `Record<string, string[][]>` | Default logs | Log data per substep |
|
|
288
|
+
| `documentSections` | `DocumentSection[]` | Legal preset | Document content sections |
|
|
289
|
+
| `autoStart` | `boolean` | `true` | Start assembly on mount |
|
|
290
|
+
| `autoScroll` | `boolean` | `true` | Auto-scroll document |
|
|
291
|
+
| `showWholeDocumentView` | `boolean` | `true` | Show completion overlay |
|
|
292
|
+
| `documentIds` | `DocumentIds` | Auto-generated | Custom case/file numbers |
|
|
293
|
+
| `animationSpeed` | `number` | `1` | Speed multiplier |
|
|
294
|
+
| `animationPreset` | `AnimationPreset` | - | Animation preset (SMOOTH, SNAPPY, etc.) |
|
|
295
|
+
| `animationTimings` | `AnimationTimings` | - | Override individual timing values |
|
|
296
|
+
| `theme` | `ThemeConfig` | - | Theme color config |
|
|
297
|
+
| `classNames` | `ClassNameSlots` | - | CSS class overrides for internal slots |
|
|
298
|
+
| `labels` | `LabelConfig` | - | UI string overrides |
|
|
299
|
+
| `layout` | `LayoutConfig` | - | Layout direction and panel widths |
|
|
300
|
+
| `className` | `string` | - | Root container className |
|
|
301
|
+
| `renderStep` | `(step, default) => ReactNode` | - | Custom step renderer |
|
|
302
|
+
| `renderSubstep` | `(substep, default) => ReactNode` | - | Custom substep renderer |
|
|
303
|
+
| `renderLog` | `(log, default) => ReactNode` | - | Custom log renderer |
|
|
304
|
+
| `renderDocumentSection` | `(section, substeps) => ReactNode` | - | Custom section renderer |
|
|
305
|
+
| `onComplete` | `(metrics) => void` | - | Assembly complete callback |
|
|
306
|
+
| `onStepStart` | `(step, index) => void` | - | Step started callback |
|
|
307
|
+
| `onStepComplete` | `(step, metrics) => void` | - | Step complete callback |
|
|
308
|
+
| `onSubstepComplete` | `(substepId, stepIndex) => void` | - | Substep complete callback |
|
|
309
|
+
| `onSectionReveal` | `(sectionId) => void` | - | Section revealed callback |
|
|
310
|
+
| `onLogEntry` | `(log) => void` | - | Log entry added callback |
|
|
311
|
+
| `onPause` | `() => void` | - | Paused callback |
|
|
312
|
+
| `onResume` | `() => void` | - | Resumed callback |
|
|
313
|
+
| `onReset` | `() => void` | - | Reset callback |
|
|
314
|
+
|
|
315
|
+
### Exports
|
|
316
|
+
|
|
317
|
+
**Components:**
|
|
318
|
+
`BlueprintDocumentAssembly`, `StepItem`, `SubStepItem`, `LogLine`, `LogContainer`, `DocumentPreview`, `DocumentLine`, `WholeDocumentView`, `WholeDocumentContent`
|
|
319
|
+
|
|
320
|
+
**Theme:**
|
|
321
|
+
`ThemeProvider`, `useTheme`, `useThemeOptional`, `resolveTheme`, `getThemeSafelist`
|
|
322
|
+
|
|
323
|
+
**Animation:**
|
|
324
|
+
`AnimationProvider`, `useAnimation`, `useAnimationOptional`, `SMOOTH_PRESET`, `SNAPPY_PRESET`, `CINEMATIC_PRESET`, `MINIMAL_PRESET`
|
|
325
|
+
|
|
326
|
+
**Hooks:**
|
|
327
|
+
`useDocumentAssembly`, `useReducedMotion`, `useResponsiveLayout`
|
|
328
|
+
|
|
329
|
+
**Presets:**
|
|
330
|
+
`LEGAL_DOCUMENT_SECTIONS`, `LEGAL_WHOLE_DOCUMENT_SECTIONS`, `SQUIGGLE_DOCUMENT_SECTIONS`, `SQUIGGLE_WHOLE_DOCUMENT_SECTIONS`, `SQUIGGLE_STEPS`, `SQUIGGLE_STEP_LOGS`, `SQUIGGLE_SUBSTEP_LOGS`
|
|
331
|
+
|
|
332
|
+
**Constants:**
|
|
333
|
+
`DEFAULT_STEPS`, `DEFAULT_STEP_LOGS`, `DEFAULT_SUBSTEP_LOGS`, `DEFAULT_LABELS`, `DEFAULT_THEME`, `STEP_ICON_MAP`
|
|
334
|
+
|
|
335
|
+
**Utilities:**
|
|
336
|
+
`createStep`, `createSubStep`, `createDocumentSection`, `resetStepCounter`, `resolveContent`
|
|
337
|
+
|
|
338
|
+
**Types:**
|
|
339
|
+
`Step`, `SubStep`, `LogEntry`, `DocumentMetrics`, `DocumentIds`, `DocumentSection`, `DocumentSubsection`, `ClassNameSlots`, `ThemeConfig`, `AnimationTimings`, `AnimationPreset`, `ResolvedTheme`, `ResolvedThemeColors`, `LabelConfig`, `LayoutConfig`, `UseDocumentAssemblyOptions`, `UseDocumentAssemblyReturn`, `BlueprintDocumentAssemblyRef`, `BlueprintDocumentAssemblyProps`, and all component prop types
|
|
340
|
+
|
|
341
|
+
## Architecture
|
|
267
342
|
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
343
|
+
```
|
|
344
|
+
src/
|
|
345
|
+
├── components/
|
|
346
|
+
│ ├── BlueprintDocumentAssembly.tsx # Main component (providers, responsive, ARIA)
|
|
347
|
+
│ ├── StepItem.tsx # Step card with theme context
|
|
348
|
+
│ ├── SubStepItem.tsx # Substep with ARIA listitem
|
|
349
|
+
│ ├── LogComponents.tsx # Log display with ARIA log role
|
|
350
|
+
│ ├── DocumentPreview.tsx # Progressive document builder
|
|
351
|
+
│ ├── DocumentLine.tsx # Typewriter text (reduced motion aware)
|
|
352
|
+
│ ├── WholeDocumentView.tsx # Completion overlay (GPU-safe glow)
|
|
353
|
+
│ └── WholeDocumentContent.tsx # Static document renderer
|
|
354
|
+
├── theme/
|
|
355
|
+
│ ├── ThemeContext.tsx # ThemeProvider, resolveTheme, safelist
|
|
356
|
+
│ └── index.ts
|
|
357
|
+
├── animation/
|
|
358
|
+
│ ├── presets.ts # SMOOTH, SNAPPY, CINEMATIC, MINIMAL
|
|
359
|
+
│ ├── AnimationContext.tsx # AnimationProvider, useAnimation
|
|
360
|
+
│ └── index.ts
|
|
361
|
+
├── hooks/
|
|
362
|
+
│ ├── useDocumentAssembly.ts # Headless assembly hook
|
|
363
|
+
│ ├── useReducedMotion.ts # prefers-reduced-motion detection
|
|
364
|
+
│ ├── useResponsiveLayout.ts # Breakpoint detection
|
|
365
|
+
│ └── index.ts
|
|
366
|
+
├── presets/
|
|
367
|
+
│ ├── legal-document-sections.ts # Sworn affidavit sections
|
|
368
|
+
│ ├── legal-whole-document.ts # Legal completion view
|
|
369
|
+
│ ├── squiggle-document-sections.ts # Generic squiggle text sections
|
|
370
|
+
│ ├── squiggle-steps.ts # Generic steps + logs
|
|
371
|
+
│ └── index.ts
|
|
372
|
+
├── utils/
|
|
373
|
+
│ ├── factories.ts # createStep, createSubStep, etc.
|
|
374
|
+
│ ├── content-resolvers.ts # Shared resolveContent utility
|
|
375
|
+
│ └── index.ts
|
|
376
|
+
├── constants/
|
|
377
|
+
│ ├── default-labels.ts
|
|
378
|
+
│ └── default-theme.ts
|
|
379
|
+
├── types.ts
|
|
380
|
+
├── constants.ts
|
|
381
|
+
├── default-steps.ts
|
|
382
|
+
└── index.tsx # Public API
|
|
383
|
+
```
|
|
271
384
|
|
|
272
|
-
##
|
|
385
|
+
## License
|
|
273
386
|
|
|
274
|
-
|
|
275
|
-
- 💬 Discussions: [GitHub Discussions](https://github.com/yourusername/blueprint-document-assembly/discussions)
|
|
276
|
-
- 📧 Email: your.email@example.com
|
|
387
|
+
MIT
|
|
277
388
|
|
|
278
|
-
|
|
389
|
+
## Acknowledgments
|
|
279
390
|
|
|
280
|
-
|
|
391
|
+
- Built with [Motion](https://motion.dev/) (Framer Motion)
|
|
392
|
+
- Icons by [Lucide](https://lucide.dev/)
|
|
393
|
+
- Styled with [Tailwind CSS](https://tailwindcss.com/)
|
package/dist/index.d.mts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import { ComponentType, CSSProperties, ReactNode, RefObject } from 'react';
|
|
2
|
+
import react__default, { ComponentType, CSSProperties, ReactNode, RefObject } from 'react';
|
|
3
3
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
4
4
|
|
|
5
5
|
interface LogEntry {
|
|
@@ -543,7 +543,9 @@ declare const DEFAULT_STEP_LOGS: Record<string, string[][]>;
|
|
|
543
543
|
declare const DEFAULT_SUBSTEP_LOGS: Record<string, string[][]>;
|
|
544
544
|
|
|
545
545
|
declare const DEFAULT_STEPS: Step[];
|
|
546
|
-
declare const STEP_ICON_MAP: Record<string,
|
|
546
|
+
declare const STEP_ICON_MAP: Record<string, react__default.ComponentType<{
|
|
547
|
+
className?: string;
|
|
548
|
+
}>>;
|
|
547
549
|
|
|
548
550
|
declare const DEFAULT_LABELS: Required<LabelConfig>;
|
|
549
551
|
|
|
@@ -608,4 +610,9 @@ declare function createDocumentSection(partial: Partial<DocumentSection> & Pick<
|
|
|
608
610
|
*/
|
|
609
611
|
declare function resetStepCounter(): void;
|
|
610
612
|
|
|
611
|
-
|
|
613
|
+
/**
|
|
614
|
+
* Resolve dynamic content placeholders in document text.
|
|
615
|
+
*/
|
|
616
|
+
declare function resolveContent(content: string, documentIds: DocumentIds): string;
|
|
617
|
+
|
|
618
|
+
export { type AnimationPreset, AnimationProvider, type AnimationTimings, BlueprintDocumentAssembly, type BlueprintDocumentAssemblyProps, type BlueprintDocumentAssemblyRef, CINEMATIC_PRESET, type ClassNameSlots, DEFAULT_LABELS, DEFAULT_STEPS, DEFAULT_STEP_LOGS, DEFAULT_SUBSTEP_LOGS, DEFAULT_THEME, type DocumentIds, DocumentLine, type DocumentLineProps$1 as DocumentLineProps, type DocumentMetrics, DocumentPreview, type DocumentPreviewProps$1 as DocumentPreviewProps, type DocumentSection, type DocumentSubsection, LEGAL_DOCUMENT_SECTIONS, LEGAL_WHOLE_DOCUMENT_SECTIONS, type LabelConfig, type LayoutConfig, LogContainer, type LogContainerProps$1 as LogContainerProps, type LogEntry, LogLine, type LogLineProps$1 as LogLineProps, MINIMAL_PRESET, type ResolvedTheme, type ResolvedThemeColors, SMOOTH_PRESET, SNAPPY_PRESET, SQUIGGLE_DOCUMENT_SECTIONS, SQUIGGLE_STEPS, SQUIGGLE_STEP_LOGS, SQUIGGLE_SUBSTEP_LOGS, SQUIGGLE_WHOLE_DOCUMENT_SECTIONS, STEP_ICON_MAP, type Step, StepItem, type StepItemProps$1 as StepItemProps, type SubStep, SubStepItem, type SubStepItemProps$1 as SubStepItemProps, type ThemeConfig, ThemeProvider, type UseDocumentAssemblyOptions, type UseDocumentAssemblyReturn, WholeDocumentContent, type WholeDocumentContentProps$1 as WholeDocumentContentProps, WholeDocumentView, type WholeDocumentViewProps$1 as WholeDocumentViewProps, createDocumentSection, createStep, createSubStep, getThemeSafelist, resetStepCounter, resolveContent, resolveTheme, useAnimation, useAnimationOptional, useDocumentAssembly, useReducedMotion, useResponsiveLayout, useTheme, useThemeOptional };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import { ComponentType, CSSProperties, ReactNode, RefObject } from 'react';
|
|
2
|
+
import react__default, { ComponentType, CSSProperties, ReactNode, RefObject } from 'react';
|
|
3
3
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
4
4
|
|
|
5
5
|
interface LogEntry {
|
|
@@ -543,7 +543,9 @@ declare const DEFAULT_STEP_LOGS: Record<string, string[][]>;
|
|
|
543
543
|
declare const DEFAULT_SUBSTEP_LOGS: Record<string, string[][]>;
|
|
544
544
|
|
|
545
545
|
declare const DEFAULT_STEPS: Step[];
|
|
546
|
-
declare const STEP_ICON_MAP: Record<string,
|
|
546
|
+
declare const STEP_ICON_MAP: Record<string, react__default.ComponentType<{
|
|
547
|
+
className?: string;
|
|
548
|
+
}>>;
|
|
547
549
|
|
|
548
550
|
declare const DEFAULT_LABELS: Required<LabelConfig>;
|
|
549
551
|
|
|
@@ -608,4 +610,9 @@ declare function createDocumentSection(partial: Partial<DocumentSection> & Pick<
|
|
|
608
610
|
*/
|
|
609
611
|
declare function resetStepCounter(): void;
|
|
610
612
|
|
|
611
|
-
|
|
613
|
+
/**
|
|
614
|
+
* Resolve dynamic content placeholders in document text.
|
|
615
|
+
*/
|
|
616
|
+
declare function resolveContent(content: string, documentIds: DocumentIds): string;
|
|
617
|
+
|
|
618
|
+
export { type AnimationPreset, AnimationProvider, type AnimationTimings, BlueprintDocumentAssembly, type BlueprintDocumentAssemblyProps, type BlueprintDocumentAssemblyRef, CINEMATIC_PRESET, type ClassNameSlots, DEFAULT_LABELS, DEFAULT_STEPS, DEFAULT_STEP_LOGS, DEFAULT_SUBSTEP_LOGS, DEFAULT_THEME, type DocumentIds, DocumentLine, type DocumentLineProps$1 as DocumentLineProps, type DocumentMetrics, DocumentPreview, type DocumentPreviewProps$1 as DocumentPreviewProps, type DocumentSection, type DocumentSubsection, LEGAL_DOCUMENT_SECTIONS, LEGAL_WHOLE_DOCUMENT_SECTIONS, type LabelConfig, type LayoutConfig, LogContainer, type LogContainerProps$1 as LogContainerProps, type LogEntry, LogLine, type LogLineProps$1 as LogLineProps, MINIMAL_PRESET, type ResolvedTheme, type ResolvedThemeColors, SMOOTH_PRESET, SNAPPY_PRESET, SQUIGGLE_DOCUMENT_SECTIONS, SQUIGGLE_STEPS, SQUIGGLE_STEP_LOGS, SQUIGGLE_SUBSTEP_LOGS, SQUIGGLE_WHOLE_DOCUMENT_SECTIONS, STEP_ICON_MAP, type Step, StepItem, type StepItemProps$1 as StepItemProps, type SubStep, SubStepItem, type SubStepItemProps$1 as SubStepItemProps, type ThemeConfig, ThemeProvider, type UseDocumentAssemblyOptions, type UseDocumentAssemblyReturn, WholeDocumentContent, type WholeDocumentContentProps$1 as WholeDocumentContentProps, WholeDocumentView, type WholeDocumentViewProps$1 as WholeDocumentViewProps, createDocumentSection, createStep, createSubStep, getThemeSafelist, resetStepCounter, resolveContent, resolveTheme, useAnimation, useAnimationOptional, useDocumentAssembly, useReducedMotion, useResponsiveLayout, useTheme, useThemeOptional };
|