### Dashbook Example Information - Pinned to Preview

Source: https://github.com/bluefireteam/dashbook/blob/main/README.md

Display example information directly in the preview area by setting 'pinInfo' to true. This makes the information persistently visible without requiring user interaction.

```dart
final dashbook = Dashbook();

dashbook
  .storiesOf('CustomDialog')
  .add('default',
    (ctx) {
      // omitted ...
    },
    info: 'Use the actions button on the side to show the dialog.',
    pinInfo: true,
  );
```

--------------------------------

### Dashbook Example Information - Side Toolbar

Source: https://github.com/bluefireteam/dashbook/blob/main/README.md

Add informational text to examples using the 'info' parameter in the 'add' method. This text appears in a side toolbar when an 'i' icon is clicked.

```dart
final dashbook = Dashbook();

dashbook
  .storiesOf('CustomDialog')
  .add('default',
    (ctx) {
      ctx.action('Open dialog', (context) {
        showDialog(
          context: context,
          builder: (_) => CustomDialog(),
        );
      });

      return SizedBox();
    },
    info: 'Use the actions button on the side to show the dialog.',
  );
```

--------------------------------

### Dashbook Actions for User Interaction

Source: https://github.com/bluefireteam/dashbook/blob/main/README.md

Implement actions in Dashbook to trigger methods from the UI, useful for examples requiring user interaction like showing a dialog.

```dart
final dashbook = Dashbook();

dashbook
  .storiesOf('CustomDialog')
  .add('default', (ctx) {
    ctx.action('Open dialog', (context) {
      showDialog(
        context: context,
        builder: (_) => CustomDialog(),
      );
    });

    return SizedBox();
  });
```

--------------------------------

### Register Custom Property with Builder

Source: https://context7.com/bluefireteam/dashbook/llms.txt

Use `addProperty` with `Property.withBuilder` to create inline custom property editors. This example shows a `DropdownButton` for a status string.

```dart
// 1. Define a custom Property subclass
class DateTimeProperty extends Property<DateTime> {
  DateTimeProperty(String name, DateTime defaultValue)
      : super(name, defaultValue);

  @override
  Widget createPropertyEditor({required PropertyChanged onChanged, Key? key}) {
    return OutlinedButton(
      key: key,
      onPressed: () async {
        // open a date picker and call onChanged() when done
      },
      child: Text(getValue().toIso8601String()),
    );
  }
}

// 2. Register it in a chapter
dashbook.storiesOf('Scheduled Event').add('default', (ctx) {
  final date = ctx.addProperty(DateTimeProperty('event date', DateTime.now()));
  return Text('Event on: ${date.toLocal()}');
});

// 3. Alternatively, use Property.withBuilder for an inline editor
dashbook.storiesOf('Anonymous Builder').add('default', (ctx) {
  final value = ctx.addProperty(
    Property.withBuilder<String>(
      'status',
      'active',
      builder: (property, onChanged, key) => DropdownButton<String>(
        key: key,
        value: property.getValue(),
        items: ['active', 'inactive', 'pending']
            .map((s) => DropdownMenuItem(value: s, child: Text(s)))
            .toList(),
        onChanged: (v) {
          property.value = v;
          onChanged();
        },
      ),
    ),
  );
  return Chip(label: Text(value));
});
```

--------------------------------

### Dashbook Project Structure and Entry Point

Source: https://context7.com/bluefireteam/dashbook/llms.txt

Illustrates a recommended project structure with separate entry points for production and Dashbook. Shows how to run only the gallery using `flutter run -t lib/main_dashbook.dart`.

```plaintext
lib/
├── main.dart                 # Production entry point
├── main_dashbook.dart        # Dashbook entry point
└── widgets/
    ├── button.dart
    └── card.dart

# Run only the gallery (no production code executed):
# flutter run -t lib/main_dashbook.dart
```

```dart
// lib/main_dashbook.dart
import 'package:dashbook/dashbook.dart';
import 'package:flutter/material.dart';
import 'stories/button_stories.dart';
import 'stories/card_stories.dart';

void main() {
  final dashbook = Dashbook.dualTheme(
    light: ThemeData.light(useMaterial3: true),
    dark: ThemeData.dark(useMaterial3: true),
    title: 'My App — Component Gallery',
    autoPinStoriesOnLargeScreen: true,
    usePreviewSafeArea: true,
    onChapterChange: (ch) => debugPrint('Viewing: ${ch.id}'),
  );

  addButtonStories(dashbook);
  addCardStories(dashbook);

  runApp(dashbook);
}
```

--------------------------------

### Dashbook - Default Constructor

Source: https://context7.com/bluefireteam/dashbook/llms.txt

Creates a Dashbook instance with a single optional theme. Use `storiesOf` to register widget stories, then pass the instance to `runApp`.

```APIDOC
## Dashbook

### Description
Creates a Dashbook instance with a single optional theme. Use `storiesOf` to register widget stories, then pass the instance to `runApp`.

### Constructor Signature
`Dashbook({ThemeData? theme, String? title, bool usePreviewSafeArea = false, bool autoPinStoriesOnLargeScreen = false})`

### Parameters
- **theme** (ThemeData, optional) - The theme for the Dashbook application.
- **title** (String, optional) - The title displayed in the app bar.
- **usePreviewSafeArea** (bool, optional) - If true, prevents toolbar icons from overlapping the preview.
- **autoPinStoriesOnLargeScreen** (bool, optional) - If true, always shows the stories panel on wide screens.

### Request Example
```dart
import 'package:flutter/material.dart';
import 'package:dashbook/dashbook.dart';

void main() {
  final dashbook = Dashbook(
    theme: ThemeData.light(),
    title: 'My App Gallery',
    usePreviewSafeArea: true,
    autoPinStoriesOnLargeScreen: true,
  );

  dashbook
    .storiesOf('ElevatedButton')
    .decorator(CenterDecorator())
    .add('default', (ctx) => ElevatedButton(
      onPressed: () {},
      child: Text(ctx.textProperty('label', 'Click me')),
    ));

  runApp(dashbook);
}
```
```

--------------------------------

### Dashbook.dualTheme - Constructor

Source: https://context7.com/bluefireteam/dashbook/llms.txt

Creates a Dashbook instance with light and dark theme support. Dashbook will render a toggle icon in the toolbar letting users switch between themes at runtime.

```APIDOC
## Dashbook.dualTheme

### Description
Creates a Dashbook instance with light and dark theme support. Dashbook will render a toggle icon in the toolbar letting users switch between themes at runtime.

### Constructor Signature
`Dashbook.dualTheme({required ThemeData light, required ThemeData dark, bool initWithLight = true, String? title, bool autoPinStoriesOnLargeScreen = false})`

### Parameters
- **light** (ThemeData) - The light theme for the Dashbook application.
- **dark** (ThemeData) - The dark theme for the Dashbook application.
- **initWithLight** (bool, optional) - If true, starts with the light theme (default).
- **title** (String, optional) - The title displayed in the app bar.
- **autoPinStoriesOnLargeScreen** (bool, optional) - If true, always shows the stories panel on wide screens.

### Request Example
```dart
void main() {
  final dashbook = Dashbook.dualTheme(
    light: ThemeData(
      colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
    ),
    dark: ThemeData.dark().copyWith(
      colorScheme: ColorScheme.fromSeed(
        seedColor: Colors.blue,
        brightness: Brightness.dark,
      ),
    ),
    initWithLight: true,
    title: 'My App Gallery',
    autoPinStoriesOnLargeScreen: true,
  );

  dashbook.storiesOf('Card').decorator(CenterDecorator()).add(
    'themed',
    (ctx) => Card(child: Padding(
      padding: const EdgeInsets.all(16),
      child: Text(ctx.textProperty('content', 'Hello, Dashbook!'))
    )),
  );

  runApp(dashbook);
}
```
```

--------------------------------

### Initialize Dashbook with Dual Themes

Source: https://github.com/bluefireteam/dashbook/blob/main/README.md

Use the `dualTheme` constructor when your app has two themes (light and dark). You can specify which theme is initially active using `initWithLight`.

```dart
final dashbook = Dashbook.dualTheme(
  light: YourLightTheme(),
  dark: YourDarkTheme(),
);
```

--------------------------------

### Dashbook.multiTheme - Constructor

Source: https://context7.com/bluefireteam/dashbook/llms.txt

Creates a Dashbook instance supporting more than two themes. A palette icon in the toolbar opens a dropdown for users to pick any named theme.

```APIDOC
## Dashbook.multiTheme

### Description
Creates a Dashbook instance supporting more than two themes. A palette icon in the toolbar opens a dropdown for users to pick any named theme.

### Constructor Signature
`Dashbook.multiTheme({required Map<String, ThemeData> themes, String? initialTheme, String? title})`

### Parameters
- **themes** (Map<String, ThemeData>) - A map where keys are theme names and values are `ThemeData` objects.
- **initialTheme** (String, optional) - The name of the theme to be initially selected.
- **title** (String, optional) - The title displayed in the app bar.

### Request Example
```dart
void main() {
  final dashbook = Dashbook.multiTheme(
    themes: {
      'Light':   ThemeData.light(),
      'Dark':    ThemeData.dark(),
      'Solarized': ThemeData(primarySwatch: Colors.orange),
    },
    initialTheme: 'Light',
    title: 'Multi-Theme Gallery',
  );

  dashbook.storiesOf('Text').decorator(CenterDecorator()).add(
    'default',
    (ctx) => Text(
      ctx.textProperty('text', 'Hello'),
      style: TextStyle(fontSize: ctx.numberProperty('size', 24)),
    ),
  );

  runApp(dashbook);
}
```
```

--------------------------------

### Initialize Dashbook with Multiple Themes

Source: https://github.com/bluefireteam/dashbook/blob/main/README.md

Use the `multiTheme` constructor for apps with more than two themes. Provide a map of theme names to `ThemeData` objects and optionally set the `initialTheme`.

```dart
final dashbook = Dashbook.multiTheme(
  themes: {
    'theme1': Theme1(),
    'theme2': Theme2(),
    'theme3': Theme3(),
  }
);
```

--------------------------------

### Dashbook Multi-Theme Constructor

Source: https://context7.com/bluefireteam/dashbook/llms.txt

Creates a Dashbook instance supporting multiple themes. A toolbar icon opens a dropdown for theme selection.

```dart
void main() {
  final dashbook = Dashbook.multiTheme(
    themes: {
      'Light':   ThemeData.light(),
      'Dark':    ThemeData.dark(),
      'Solarized': ThemeData(primarySwatch: Colors.orange),
    },
    initialTheme: 'Light',
    title: 'Multi-Theme Gallery',
  );

  dashbook.storiesOf('Text').decorator(CenterDecorator()).add(
    'default',
    (ctx) => Text(
      ctx.textProperty('text', 'Hello'),
      style: TextStyle(fontSize: ctx.numberProperty('size', 24)),
    ),
  );

  runApp(dashbook);
}
```

--------------------------------

### Dashbook Dual Theme Constructor

Source: https://context7.com/bluefireteam/dashbook/llms.txt

Creates a Dashbook instance with light and dark theme support. Users can switch themes at runtime via a toolbar icon.

```dart
void main() {
  final dashbook = Dashbook.dualTheme(
    light: ThemeData(
      colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
    ),
    dark: ThemeData.dark().copyWith(
      colorScheme: ColorScheme.fromSeed(
        seedColor: Colors.blue,
        brightness: Brightness.dark,
      ),
    ),
    initWithLight: true, // start with the light theme (default)
    title: 'My App Gallery',
    autoPinStoriesOnLargeScreen: true,
  );

  dashbook.storiesOf('Card').decorator(CenterDecorator()).add(
    'themed',
    (ctx) => Card(child: Padding(
      padding: const EdgeInsets.all(16),
      child: Text(ctx.textProperty('content', 'Hello, Dashbook!')),
    )),
  );

  runApp(dashbook);
}
```

--------------------------------

### Initialize Dashbook with a Single Theme

Source: https://github.com/bluefireteam/dashbook/blob/main/README.md

Use the default Dashbook constructor with the optional `theme` parameter to set a single theme for your app's UI.

```dart
final dashbook = Dashbook(theme: ThemeData());
```

--------------------------------

### Create Flutter Platforms

Source: https://github.com/bluefireteam/dashbook/blob/main/bricks/dashbook_gallery/README.md

Use this command to create the necessary platform folders for your Flutter application if they are not already present.

```sh
flutter create . --platforms ...
```

--------------------------------

### Dashbook Default Constructor

Source: https://context7.com/bluefireteam/dashbook/llms.txt

Creates a Dashbook instance with an optional theme. Use `storiesOf` to register widget stories and pass the instance to `runApp`.

```dart
import 'package:flutter/material.dart';
import 'package:dashbook/dashbook.dart';

void main() {
  final dashbook = Dashbook(
    theme: ThemeData.light(),
    title: 'My App Gallery',
    usePreviewSafeArea: true,         // prevents toolbar icons from overlapping preview
    autoPinStoriesOnLargeScreen: true, // always shows stories panel on wide screens
  );

  dashbook
    .storiesOf('ElevatedButton')
    .decorator(CenterDecorator())
    .add('default', (ctx) => ElevatedButton(
      onPressed: () {},
      child: Text(ctx.textProperty('label', 'Click me')),
    ));

  runApp(dashbook);
}
```

--------------------------------

### Basic Dashbook Usage with Text and ElevatedButton

Source: https://github.com/bluefireteam/dashbook/blob/main/README.md

Initialize Dashbook and add stories for Text and ElevatedButton widgets. Use decorators to apply common layouts and properties to customize widget behavior.

```dart
import 'package:flutter/material.dart';

import 'package:dashbook/dashbook.dart';

void main() {
  final dashbook = Dashbook();

  // Adds the Text widget stories
  dashbook
      .storiesOf('Text')
      // Decorators are easy ways to apply a common layout to all of the story chapters, here are using onde of Dashbook's decorators,
      // which will center all the widgets on the center of the screen
      .decorator(CenterDecorator())
      // The Widget story can have as many chapters as needed
      .add('default', (ctx) {
        return Container(width: 300, child: Text(
          ctx.textProperty("text", "Text Example"),
          textAlign: ctx.listProperty(
              "text align",
              TextAlign.center,
              TextAlign.values,
          ),
          textDirection: ctx.listProperty(
              "text direction",
              TextDirection.rtl,
              TextDirection.values,
          ),
          style: TextStyle(
              fontWeight: ctx.listProperty(
                  "font weight",
                  FontWeight.normal,
                  FontWeight.values,
              ),
              fontStyle: ctx.listProperty(
                  "font style",
                  FontStyle.normal,
                  FontStyle.values,
              ),
              fontSize: ctx.numberProperty("font size", 20)));
      });

  dashbook
      .storiesOf('ElevatedButton')
      .decorator(CenterDecorator())
      .add('default', (ctx) => ElevatedButton(child: Text('Ok'), onPressed: () {}));

  // Since dashbook is a widget itself, you can just call runApp passing it as a parameter
  runApp(dashbook);
}
```

--------------------------------

### Register Action Callback for Dialog

Source: https://context7.com/bluefireteam/dashbook/llms.txt

Use `ctx.action` to register a button in the Actions panel that triggers a `showDialog` when tapped. The callback receives the `BuildContext`.

```dart
dashbook.storiesOf('Dialog').add(
  'confirmation dialog',
  (ctx) {
    ctx.action('Show dialog', (context) {
      showDialog<void>(
        context: context,
        builder: (_) => AlertDialog(
          title: const Text('Confirm'),
          content: const Text('Are you sure?'),
          actions: [
            TextButton(onPressed: () => Navigator.pop(context), child: const Text('Cancel')),
            ElevatedButton(onPressed: () => Navigator.pop(context), child: const Text('Yes')),
          ],
        ),
      );
    });

    ctx.action('Show snackbar', (context) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('Action triggered!')),
      );
    });

    // Return a placeholder since the real UI is revealed via actions
    return const Center(child: Text('Tap an action →'));
  },
  info: 'Use the Actions panel (▶ button) to trigger UI interactions.',
  pinInfo: true,
);
```

--------------------------------

### Register Dropdown for Enum Options

Source: https://context7.com/bluefireteam/dashbook/llms.txt

Use `optionsProperty` to create a dropdown for selecting enum values. Provide a list of `PropertyOption` with user-friendly labels.

```dart
enum CardStyle { elevated, outlined, filled }

dashbook.storiesOf('Custom Card').decorator(CenterDecorator()).add(
  'default',
  (ctx) {
    final style = ctx.optionsProperty(
      'card style',
      CardStyle.elevated,
      [
        PropertyOption('Elevated (shadow)', CardStyle.elevated),
        PropertyOption('Outlined (border)', CardStyle.outlined),
        PropertyOption('Filled (background)', CardStyle.filled),
      ],
    );
    return Text('Selected: $style');
  },
);
```

--------------------------------

### Add Dashbook Dependency

Source: https://github.com/bluefireteam/dashbook/blob/main/README.md

Add the dashbook dependency to your pubspec.yaml file.

```yaml
flutter pub add dashbook
```

--------------------------------

### Dashbook Localization Support

Source: https://context7.com/bluefireteam/dashbook/llms.txt

Forwards `localizationsDelegates` and `supportedLocales` to the internal `MaterialApp`, enabling stories to be previewed in different locales.

```dart
import 'package:flutter_localizations/flutter_localizations.dart';

void main() {
  final dashbook = Dashbook(
    theme: ThemeData.light(),
    localizationsDelegates: [
      GlobalMaterialLocalizations.delegate,
      GlobalWidgetsLocalizations.delegate,
      GlobalCupertinoLocalizations.delegate,
    ],
    supportedLocales: const [
      Locale('en', 'US'),
      Locale('pt', 'BR'),
      Locale('ja', 'JP'),
    ],
  );

  dashbook.storiesOf('DatePicker').decorator(CenterDecorator()).add(
    'localized',
    (ctx) => CalendarDatePicker(
      initialDate: DateTime.now(),
      firstDate: DateTime(2020),
      lastDate: DateTime(2030),
      onDateChanged: (_) {},
    ),
  );

  runApp(dashbook);
}
```

--------------------------------

### Add Chapters with Story.add

Source: https://context7.com/bluefireteam/dashbook/llms.txt

Adds a named variant (chapter) to a story. The builder function receives a DashbookContext used to register interactive properties and actions.

```dart
dashbook.storiesOf('Avatar')
  .decorator(CenterDecorator())
  .add(
    'with image',
    (ctx) => CircleAvatar(
      radius: ctx.numberProperty('radius', 40),
      backgroundImage: const NetworkImage('https://placekitten.com/200/200'),
    ),
    codeLink: 'https://github.com/myorg/myapp/blob/main/lib/widgets/avatar.dart',
    info: 'Displays a circular user avatar. Adjust radius in the properties panel.',
    pinInfo: false, // show info via toolbar icon (use true to pin it in preview)
  )
  .add(
    'with initials',
    (ctx) => CircleAvatar(
      radius: ctx.numberProperty('radius', 40),
      child: Text(ctx.textProperty('initials', 'AB')),
    ),
  );

```

--------------------------------

### Dashbook.storiesOf - Registering Stories

Source: https://context7.com/bluefireteam/dashbook/llms.txt

Registers a new `Story` by name and returns it for chaining. Each story groups all variants (chapters) of a single widget component.

```APIDOC
## Dashbook.storiesOf

### Description
Registers a new `Story` by name and returns it for chaining. Each story groups all variants (chapters) of a single widget component.

### Method Signature
`Story storiesOf(String name)`

### Parameters
- **name** (String) - The name of the story to register.

### Returns
A `Story` object that can be used to chain `.decorator()` and `.add()` calls.

### Request Example
```dart
final dashbook = Dashbook();

// Returns a Story; chain .decorator() and .add() calls on it
final story = dashbook.storiesOf('IconButton');

story
  .decorator(CenterDecorator())
  .add('default', (ctx) => IconButton(
    icon: const Icon(Icons.star),
    iconSize: ctx.numberProperty('icon size', 24),
    onPressed: () {},
  ))
  .add('disabled', (ctx) => const IconButton(
    icon: Icon(Icons.star_border),
    onPressed: null,
  ));

runApp(dashbook);
```
```

--------------------------------

### Add Dashbook Dependency

Source: https://context7.com/bluefireteam/dashbook/llms.txt

Add Dashbook as a dependency in your pubspec.yaml file and run `flutter pub add dashbook`.

```yaml
# pubspec.yaml
dependencies:
  dashbook: ^0.1.17

# Then run:
# flutter pub add dashbook
```

--------------------------------

### Registering Stories with Dashbook

Source: https://context7.com/bluefireteam/dashbook/llms.txt

Registers a new `Story` by name and returns it for chaining. Each story groups variants (chapters) of a single widget component.

```dart
final dashbook = Dashbook();

// Returns a Story; chain .decorator() and .add() calls on it
final story = dashbook.storiesOf('IconButton');

story
  .decorator(CenterDecorator())
  .add('default', (ctx) => IconButton(
    icon: const Icon(Icons.star),
    iconSize: ctx.numberProperty('icon size', 24),
    onPressed: () {},
  ))
  .add('disabled', (ctx) => const IconButton(
    icon: Icon(Icons.star_border),
    onPressed: null,
  ));

runApp(dashbook);
```

--------------------------------

### Apply Layout Decorator with Story.decorator

Source: https://context7.com/bluefireteam/dashbook/llms.txt

Wraps every chapter in a story with a common layout. CenterDecorator centers the widget; custom decorators can be created by extending Decorator.

```dart
import 'package:dashbook/dashbook.dart';
import 'package:flutter/material.dart';

// Built-in: centers all chapter widgets
dashbook.storiesOf('Badge')
  .decorator(CenterDecorator())
  .add('default', (ctx) => const Badge(label: Text('99+')));

// Custom decorator: wraps widgets in a colored scaffold
class ScaffoldDecorator extends Decorator {
  @override
  Widget decorate(Widget child) {
    return Scaffold(
      backgroundColor: const Color(0xFFF0F4FF),
      body: Padding(
        padding: const EdgeInsets.all(24),
        child: child,
      ),
    );
  }
}

dashbook.storiesOf('AlertBanner')
  .decorator(ScaffoldDecorator())
  .add('warning', (ctx) => const Text('⚠️ Something went wrong'));

```

--------------------------------

### Handle Chapter Changes in Dashbook

Source: https://context7.com/bluefireteam/dashbook/llms.txt

Fires whenever the user selects a different chapter in the stories panel. Useful for analytics, logging, or reacting to navigation events in the host app.

```dart
void main() {
  final dashbook = Dashbook(
    theme: ThemeData.light(),
    onChapterChange: (chapter) {
      // chapter.name  — name of the chapter (e.g. "default")
      // chapter.story.name — name of the parent story (e.g. "ElevatedButton")
      // chapter.id    — combined stable identifier, e.g. "ElevatedButton_default"
      debugPrint('Navigated to: ${chapter.story.name} › ${chapter.name}');
    },
  );

  dashbook.storiesOf('ElevatedButton').decorator(CenterDecorator()).add(
    'default',
    (ctx) => ElevatedButton(onPressed: () {}, child: const Text('OK')),
  );

  runApp(dashbook);
}
```

--------------------------------

### Register List/Enum Property with DashbookContext.listProperty

Source: https://context7.com/bluefireteam/dashbook/llms.txt

Registers a dropdown in the properties panel populated from a List<T> and returns the selected value. Works with any type, including enums, for selecting predefined options.

```dart
dashbook.storiesOf('Text Alignment').decorator(CenterDecorator()).add(
  'default',
  (ctx) => Container(
    width: 300,
    child: Text(
      ctx.textProperty('text', 'Aligned text example'),
      textAlign: ctx.listProperty(
        'alignment',
        TextAlign.left,
        TextAlign.values, // pass the enum's .values list
      ),
      style: TextStyle(
        fontWeight: ctx.listProperty(
          'font weight',
          FontWeight.normal,
          FontWeight.values,
        ),
        fontSize: ctx.numberProperty('font size', 18),
      ),
    ),
  ),
);

```

--------------------------------

### Register Color Property with DashbookContext.colorProperty

Source: https://context7.com/bluefireteam/dashbook/llms.txt

Registers a color picker in the properties panel and returns the selected Color. This allows users to dynamically change widget colors.

```dart
dashbook.storiesOf('Colored Box').decorator(CenterDecorator()).add(
  'default',
  (ctx) => Container(
    width: 200,
    height: 200,
    decoration: BoxDecoration(
      color: ctx.colorProperty('fill color', const Color(0xFF4CAF50)),
      borderRadius: BorderRadius.circular(12),
    ),
  ),
);

```

--------------------------------

### Register Boolean Property with DashbookContext.boolProperty

Source: https://context7.com/bluefireteam/dashbook/llms.txt

Registers a checkbox in the properties panel and returns its current value as a bool. This is ideal for controlling visibility or on/off states.

```dart
dashbook.storiesOf('Visibility').decorator(CenterDecorator()).add(
  'default',
  (ctx) => Visibility(
    visible: ctx.boolProperty('visible', true),
    child: const FlutterLogo(size: 100),
  ),
);

```

--------------------------------

### Register Text Property with DashbookContext.textProperty

Source: https://context7.com/bluefireteam/dashbook/llms.txt

Registers an editable text field in the properties panel and returns its current value as a String. Use the tooltipMessage parameter to provide helpful hints.

```dart
dashbook.storiesOf('Greeting').decorator(CenterDecorator()).add(
  'default',
  (ctx) => Text(
    ctx.textProperty(
      'message',           // property name (shown as label)
      'Hello, World!',     // default value
      tooltipMessage: 'The greeting text displayed to the user',
    ),
    style: const TextStyle(fontSize: 24),
  ),
);

```

--------------------------------

### Register BorderRadius Property Control

Source: https://context7.com/bluefireteam/dashbook/llms.txt

Use `borderRadiusProperty` to create a four-corner radius editor. It returns a `BorderRadius` value for styling container corners.

```dart
dashbook.storiesOf('Rounded Box').decorator(CenterDecorator()).add(
  'default',
  (ctx) => Container(
    width: 200,
    height: 200,
    decoration: BoxDecoration(
      color: Colors.teal,
      borderRadius: ctx.borderRadiusProperty(
        'border radius',
        const BorderRadius.all(Radius.circular(12)),
      ),
    ),
  ),
);
```

--------------------------------

### Register EdgeInsets Property Control

Source: https://context7.com/bluefireteam/dashbook/llms.txt

Use `edgeInsetsProperty` to add a four-field padding editor. It returns an `EdgeInsets` value for applying padding to widgets.

```dart
dashbook.storiesOf('Padded Container').decorator(CenterDecorator()).add(
  'default',
  (ctx) => Container(
    color: Colors.blueAccent,
    padding: ctx.edgeInsetsProperty(
      'padding',
      const EdgeInsets.fromLTRB(16, 8, 16, 8),
    ),
    child: const Text('Hello', style: TextStyle(color: Colors.white)),
  ),
);
```

--------------------------------

### Control Property Visibility in Dashbook

Source: https://context7.com/bluefireteam/dashbook/llms.txt

Conditionally shows or hides a property in the panel based on the current value of another property. Pass a `ControlProperty` to any property's `visibilityControlProperty` parameter.

```dart
enum MessageType {
  info,
  error,
  warning,
}

dashbook.storiesOf('MessageCard').decorator(CenterDecorator()).add(
  'default',
  (ctx) {
    final type = ctx.listProperty('type', MessageType.info, MessageType.values);

    final errorColor = ctx.colorProperty(
      'errorColor',
      const Color(0xFFCC6941),
      // only visible when type == MessageType.error
      visibilityControlProperty: ControlProperty('type', MessageType.error),
    );
    final infoColor = ctx.colorProperty(
      'infoColor',
      const Color(0xFF5E89FF),
      // only visible when type == MessageType.info
      visibilityControlProperty: ControlProperty('type', MessageType.info),
    );
    final warningColor = ctx.colorProperty(
      'warningColor',
      const Color(0xFFFFC107),
      visibilityControlProperty: ControlProperty('type', MessageType.warning),
    );

    return Container(
      padding: const EdgeInsets.all(16),
      color: type == MessageType.error
          ? errorColor
          : type == MessageType.warning
              ? warningColor
              : infoColor,
      child: Text('Message type: $type'),
    );
  },
);
```

--------------------------------

### Control Property Visibility in Dashbook Stories

Source: https://github.com/bluefireteam/dashbook/blob/main/README.md

Use `visibilityControlProperty` within property definitions to conditionally show or hide properties based on the value of another property. This helps manage complex widgets with many customizable fields.

```dart
dashbook.storiesOf('MessageCard').decorator(CenterDecorator()).add(
    'default',
    (ctx) => MessageCard(
        message: ctx.textProperty('message', 'Some cool message'),
        type: ctx.listProperty('type', MessageCardType.info, MessageCardType.values),
        errorColor: ctx.colorProperty(
            'errorColor',
            const Color(0xFFCC6941),
            // this property will only be shown when type is error
            visibilityControlProperty: ControlProperty('type', MessageCardType.error),
        ),
        infoColor: ctx.colorProperty(
            'infoColor',
            const Color(0xFF5E89FF),
            // this property will only be shown when type is info
            visibilityControlProperty: ControlProperty('type', MessageCardType.info),
        ),
    ),
);
```

--------------------------------

### Register Slider Property with DashbookContext.sliderProperty

Source: https://context7.com/bluefireteam/dashbook/llms.txt

Registers a slider (0.0–1.0) in the properties panel and returns its current value as a double. Useful for controlling properties like opacity or gradual changes.

```dart
dashbook.storiesOf('Opacity').decorator(CenterDecorator()).add(
  'default',
  (ctx) => Opacity(
    opacity: ctx.sliderProperty(
      'opacity',
      1.0,
      tooltipMessage: 'Drag to adjust widget transparency (0 = invisible)',
    ),
    child: const FlutterLogo(size: 120),
  ),
);

```

--------------------------------

### Register Number Property with DashbookContext.numberProperty

Source: https://context7.com/bluefireteam/dashbook/llms.txt

Registers a numeric text field in the properties panel and returns its current value as a double. This is useful for controlling dimensions or numerical values.

```dart
dashbook.storiesOf('Sized Box').decorator(CenterDecorator()).add(
  'default',
  (ctx) => Container(
    width: ctx.numberProperty('width', 200),
    height: ctx.numberProperty('height', 200),
    color: Colors.indigo,
  ),
);

```

--------------------------------

### Register Flutter Service Worker

Source: https://github.com/bluefireteam/dashbook/blob/main/example/web/index.html

Register the service worker after the 'flutter-first-frame' event is fired. This ensures the service worker is set up correctly for the Flutter application.

```javascript
if ('serviceWorker' in navigator) {
  window.addEventListener('flutter-first-frame', function () {
    navigator.serviceWorker.register('flutter\_service\_worker.js');
  });
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.