feat: add style presets with selector, prompt support, and screenshots

Author: Dev-Beom

CHANGELOG.md

@@ -1,3 +1,14 @@
+## 0.3.0
+
+- Added style preset model with `JsonStyleDefinition` and `JsonCatalog.styles`
+- Added style-aware prompt generation via `JsonPromptOptions.selectedStyleId`
+- Added optional spec-level style (`JsonRenderSpec.style`) and style validation in `validateSpec`
+- Added runtime style override support in `JsonRenderer(styleId: ...)`
+- Extended render/action contexts with `styleId`
+- Improved `Row` overflow handling with `overflow: row|wrap|scroll` and `runSpacing`
+- Expanded showcase example with style preset selector (`clean`, `midnight`, `sunset`)
+- Added style screenshots and updated README/pub.dev documentation
+
 ## 0.2.0
 
 - Added JSON Patch support with `JsonPatchOperation`, `JsonPatchOp`, and `applyJsonPatch`

README.md

@@ -8,6 +8,7 @@ A Flutter-first implementation of the [vercel-labs/json-render](https://github.c
 - Flat and model-friendly spec shape (`root + elements`)
 - Dynamic prop resolution (`$state`, `$item`, `$index`, `$cond`)
 - Visibility and repeat support
+- Style presets and style-aware prompt generation
 - JSONL streaming patch compiler for progressive UI updates
 
 ## Install
@@ -22,6 +23,7 @@ flutter pub add flutter_json_render
 - `JsonRegistry`: maps component type -> Flutter widget builder, action -> handler
 - `JsonRenderer`: renders `JsonRenderSpec` safely
 - `JsonSpecStreamCompiler`: compiles streamed JSONL specs/patches
+- `JsonStyleDefinition`: defines selectable style presets for generation/runtime
 
 ## Quick Start
 
@@ -43,6 +45,18 @@ final catalog = JsonCatalog(
     ...standardActionDefinitions,
     'increment': const JsonActionDefinition(description: 'Increase count'),
   },
+  styles: {
+    'clean': const JsonStyleDefinition(
+      displayName: 'Clean',
+      description: 'Neutral and productivity-focused',
+      guidance: 'Use subtle borders and restrained color.',
+    ),
+    'midnight': const JsonStyleDefinition(
+      displayName: 'Midnight',
+      description: 'Dark, high-contrast dashboard style',
+      guidance: 'Use compact spacing and bright accents.',
+    ),
+  },
 );
 
 final registry = defineRegistry(
@@ -100,13 +114,28 @@ Widget app() {
   return MaterialApp(
     home: Scaffold(
       body: Center(
-        child: JsonRenderer(spec: spec, registry: registry),
+        child: JsonRenderer(
+          spec: spec,
+          registry: registry,
+          styleId: 'clean', // runtime-selected style
+        ),
       ),
     ),
   );
 }
 ```
 
+Generate style-aware LLM prompts:
+
+```dart
+final prompt = catalog.prompt(
+  options: const JsonPromptOptions(
+    selectedStyleId: 'clean',
+    includeStyles: true,
+  ),
+);
+```
+
 ## Stream JSONL Patches
 
 ```dart
@@ -184,6 +213,19 @@ Included scenarios:
 - Async action flow
 - Streamed JSONL patch simulation
 
+The example includes a `Style Preset` dropdown and supports startup style selection:
+
+```bash
+cd example
+flutter run --dart-define=STYLE_PRESET=midnight
+```
+
+### Style Preset Screenshots
+
+| clean | midnight | sunset |
+|---|---|---|
+| ![clean](https://raw.githubusercontent.com/Dev-Beom/flutter-json-render/main/assets/screenshots/example-style-clean.png) | ![midnight](https://raw.githubusercontent.com/Dev-Beom/flutter-json-render/main/assets/screenshots/example-style-midnight.png) | ![sunset](https://raw.githubusercontent.com/Dev-Beom/flutter-json-render/main/assets/screenshots/example-style-sunset.png) |
+
 ## pub.dev Release Checklist
 
 ```bash

assets/screenshots/example-style-clean.png

@@ -7,10 +7,17 @@ Showcase app for the package with practical scenarios:
 3. Dynamic props with `$cond`
 4. Async action flow
 5. Streamed JSONL patch simulation
+6. Style preset switching (`clean`, `midnight`, `sunset`)
 
 Run:
 
 ```bash
 flutter pub get
 flutter run
 ```
+
+Run with a preset at startup:
+
+```bash
+flutter run --dart-define=STYLE_PRESET=midnight
+```