flet-box 1.0.4 → 1.0.6

package/docs/widget/Inspector.md

@@ -0,0 +1,92 @@
+# Inspector
+
+Inspector renders a read-only tree that drills into a widget's props, children and element structure. It is a debugging aid for understanding how a composition is built.
+
+## When to use it
+
+Use it during development to inspect the live structure and props of a widget tree.
+
+## Quick start
+
+```javascript
+import { Button, Inspector } from "flet-box";
+
+const debug = Inspector({
+  widget: Button({ text: "Save" }),
+});
+```
+
+> The prop table is generated from `src/index.d.ts`; the examples use only documented props.
+
+## Props
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `widget` | `Widget` | The DOM node or widget to inspect. |
+| `indent` | `number` | Indentation depth used when printing nested structures. |
+
+## Examples
+
+### Everyday
+
+```javascript
+import { Card, Inspector, Text } from "flet-box";
+
+const debug = Inspector({
+  widget: Card({
+    padding: 16,
+    child: Text({ text: "Profile" }),
+  }),
+  indent: 16,
+});
+```
+
+### Full
+
+```javascript
+import { Button, Container, Inspector, Text } from "flet-box";
+
+const debug = Inspector({
+  widget: Container({
+    padding: 16,
+    direction: "column",
+    gap: 8,
+    children: [
+      Text({ text: "Header" }),
+      Button({ text: "Save" }),
+    ],
+  }),
+  indent: 24,
+});
+```
+
+## Tips
+
+- Pass the widget instance you want to examine to widget; the tree follows its current children.
+- Increase indent to make deep nesting easier to scan.
+- Remove Inspector from production screens since it is a diagnostic tool.
+
+## Accessibility
+
+- The tree is text-based and readable; keep surrounding labels so users know what is being inspected.
+
+## Behavior
+
+- Inspector walks the widget's props and children at render time and does not modify the inspected widget.
+- Re-rendering the parent refreshes the inspected values.
+
+## Related widgets
+
+- [CodeViewer](CodeViewer.md)
+- [TreeView](TreeView.md)
+- [Text](Text.md)
+
+---
+
+## Continue reading
+
+- **Previous:** [QRCode](QRCode.md)
+- **Next:** [AdSense](AdSense.md)
+- **Index:** [Widget index](README.md) · [Start here](START_HERE.md)
+
+You are reading **Chapter 6 · Data, rich content & effects** (7 of 13).

package/docs/widget/InstallButton.md

@@ -0,0 +1,128 @@
+# InstallButton
+
+A floating button that appears only when the browser is ready to install the app as a PWA. It wraps a standard Button and stays hidden otherwise.
+
+## When to use it
+
+Use it on a landing page when you want to offer an install prompt without the browser's default install UI.
+
+## Quick start
+
+```javascript
+import { InstallButton } from "flet-box";
+
+const install = InstallButton({
+  text: "Install app",
+});
+```
+
+> The prop table is generated from `src/index.d.ts`; the examples use only documented props.
+
+## Props
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `text` | `string` | Visible text content. |
+| `variant` | `'filled' \| 'outlined' \| 'text'` | Visual variation or style preset. |
+| `size` | `'small' \| 'medium' \| 'large'` | Overall size preset or pixel value, depending on the widget. |
+| `borderRadius` | `number` | Rounds the corners of the widget. |
+| `padding` | `Padding` | Space inside the widget, between its content and its border. |
+| `bottom` | `number` | The `bottom` value for the widget. |
+| `onInstalled` | `() => void` | Fired when the PWA finishes installing. |
+| `onClick` | `() => void` | Callback fired when the widget is clicked. Alias: `onPress`. |
+
+### Common props
+
+Every widget also accepts these shared props — see [common props](COMMON_PROPS.md) for the full rules and aliases.
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `width` | `Size` | Width of the widget. A number is pixels; a string uses any CSS unit. |
+| `height` | `Size` | Height of the widget. A number is pixels; a string uses any CSS unit. |
+| `size` | `Size` | Overall size preset or pixel value, depending on the widget. |
+| `padding` | `Padding` | Space inside the widget, between its content and its border. |
+| `margin` | `Margin` | Space outside the widget, between it and its neighbors. |
+| `bgColor` | `Color` | Background color. Alias: `backgroundColor`. |
+| `color` | `Color` | Foreground color, usually the text or icon color. |
+| `borderRadius` | `number \| string` | Rounds the corners of the widget. |
+| `elevation` | `number` | Shadow depth. Higher values lift the widget off the page. |
+| `shadow` | `string` | Raw CSS `box-shadow` value, for a custom shadow. |
+| `opacity` | `number` | Opacity from 0 (invisible) to 1 (fully opaque). |
+| `visible` | `boolean` | Whether the widget is rendered and visible. |
+| `disabled` | `boolean` | Disables interaction and shows the non-interactive state. |
+| `onPress` | `(widget: Widget) => void` | Callback fired when the widget is pressed. Alias: `onClick`. |
+| `onClick` | `(widget: Widget) => void` | Callback fired when the widget is clicked. Alias: `onPress`. |
+| `id` | `string` | DOM `id` for the rendered element. |
+| `className` | `string` | CSS class names applied to the rendered element. |
+| `ref` | `(widget: Widget) => void` | Callback that receives the underlying DOM node. |
+| `disableTransform` | `boolean` | Disables the default press/scale transform animation. |
+
+## Examples
+
+### Everyday
+
+```javascript
+import { InstallButton } from "flet-box";
+
+const install = InstallButton({
+  text: "Install app",
+  variant: "filled",
+  bottom: 24,
+  onInstalled: () => console.log("installed"),
+});
+```
+
+### Full
+
+```javascript
+import { InstallButton } from "flet-box";
+
+const install = InstallButton({
+  text: "Add to home screen",
+  variant: "filled",
+  size: "large",
+  bottom: 32,
+  borderRadius: 32,
+  padding: "14px 28px",
+  bgColor: "#2563eb",
+  color: "#ffffff",
+  onInstalled: () => console.log("installed"),
+  onClick: () => console.log("clicked"),
+});
+```
+
+## Tips
+
+- The button listens for the browser's beforeinstallprompt event and stays hidden
+- until an install is actually offered.
+- It takes the same text, variant, and size vocabulary as Button, since it renders
+- one internally.
+- Raise bottom to float the fixed button above a bottom navigation or dock.
+
+## Accessibility
+
+- Give it descriptive text like "Install app" rather than relying on an icon-only
+- label, since the widget is a small floating control.
+
+## Behavior
+
+- It hides itself permanently when the app is installed and removes its window
+- listeners plus the underlying button on unmount.
+- onInstalled fires when the user accepts the browser prompt; onClick fires for every
+- click regardless of install availability.
+
+## Related widgets
+
+- [Button](Button.md)
+- [SnackBar](SnackBar.md)
+- [Modal](Modal.md)
+
+---
+
+## Continue reading
+
+- **Previous:** [Carousel](Carousel.md)
+- **Next:** [DataTable](DataTable.md)
+- **Index:** [Widget index](README.md) · [Start here](START_HERE.md)
+
+You are reading **Chapter 5 · Navigation and flows** (5 of 5).

package/docs/widget/ListTile.md

@@ -0,0 +1,132 @@
+# ListTile
+
+A single row with leading, title, subtitle, and trailing slots. It is the standard building block for settings, contacts, and menus.
+
+## When to use it
+
+Use it for any list row that needs an icon or avatar plus primary and secondary text.
+
+## Quick start
+
+```javascript
+import { ListTile } from "flet-box";
+
+const tile = ListTile({
+  title: "Settings",
+});
+```
+
+> The prop table is generated from `src/index.d.ts`; the examples use only documented props.
+
+## Props
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `leftItem` | `Widget` | The `leftItem` value for the widget. |
+| `title` | `string \| Widget` | Title text shown in the header. |
+| `subtitle` | `string \| Widget` | The `subtitle` value for the widget. |
+| `description` | `string \| Widget` | The `description` value for the widget. |
+| `titleProps` | `Partial<TextProps>` | The `titleProps` value for the widget. |
+| `subtitleProps` | `Partial<TextProps>` | The `subtitleProps` value for the widget. |
+| `descriptionProps` | `Partial<TextProps>` | The `descriptionProps` value for the widget. |
+| `rightItem` | `Widget` | The `rightItem` value for the widget. |
+| `onPress` | `(widget: Widget) => void` | Callback fired when the widget is pressed. Alias: `onClick`. |
+| `selected` | `boolean` | Current selected state. |
+| `disabled` | `boolean` | Disables interaction and shows the non-interactive state. |
+| `divider` | `boolean` | The `divider` value for the widget. |
+| `paddingHorizontal` | `number` | The `paddingHorizontal` value for the widget. |
+| `paddingVertical` | `number` | The `paddingVertical` value for the widget. |
+| `bgColor` | `Color` | Background color. Alias: `backgroundColor`. |
+| `selectedBgColor` | `Color` | Background color for the selected. |
+| `hoverColor` | `Color` | Color used for the hover. |
+| `elevation` | `number` | Shadow depth. Higher values lift the widget off the page. |
+| `borderRadius` | `number` | Rounds the corners of the widget. |
+
+### Common props
+
+Every widget also accepts these shared props — see [common props](COMMON_PROPS.md) for the full rules and aliases.
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `width` | `Size` | Width of the widget. A number is pixels; a string uses any CSS unit. |
+| `height` | `Size` | Height of the widget. A number is pixels; a string uses any CSS unit. |
+| `size` | `Size` | Overall size preset or pixel value, depending on the widget. |
+| `padding` | `Padding` | Space inside the widget, between its content and its border. |
+| `margin` | `Margin` | Space outside the widget, between it and its neighbors. |
+| `bgColor` | `Color` | Background color. Alias: `backgroundColor`. |
+| `color` | `Color` | Foreground color, usually the text or icon color. |
+| `borderRadius` | `number \| string` | Rounds the corners of the widget. |
+| `elevation` | `number` | Shadow depth. Higher values lift the widget off the page. |
+| `shadow` | `string` | Raw CSS `box-shadow` value, for a custom shadow. |
+| `opacity` | `number` | Opacity from 0 (invisible) to 1 (fully opaque). |
+| `visible` | `boolean` | Whether the widget is rendered and visible. |
+| `disabled` | `boolean` | Disables interaction and shows the non-interactive state. |
+| `onPress` | `(widget: Widget) => void` | Callback fired when the widget is pressed. Alias: `onClick`. |
+| `onClick` | `(widget: Widget) => void` | Callback fired when the widget is clicked. Alias: `onPress`. |
+| `id` | `string` | DOM `id` for the rendered element. |
+| `className` | `string` | CSS class names applied to the rendered element. |
+| `ref` | `(widget: Widget) => void` | Callback that receives the underlying DOM node. |
+| `disableTransform` | `boolean` | Disables the default press/scale transform animation. |
+
+## Examples
+
+### Everyday
+
+```javascript
+import { ListTile } from "flet-box";
+
+const tile = ListTile({
+  title: "Notifications",
+  subtitle: "Email and push alerts",
+  onPress: () => console.log("open notifications"),
+});
+```
+
+### Full
+
+```javascript
+import { Avatar, Icon, ListTile } from "flet-box";
+
+const tile = ListTile({
+  leftItem: Avatar({ name: "Ada Lovelace", size: 40 }),
+  title: "Ada Lovelace",
+  subtitle: "Product designer",
+  rightItem: Icon({ name: "chevron_right" }),
+  selected: true,
+  selectedBgColor: "#eff6ff",
+  divider: true,
+  paddingHorizontal: 16,
+  paddingVertical: 12,
+  onPress: () => console.log("open profile"),
+});
+```
+
+## Tips
+
+- leftItem and rightItem accept any widget, so you can drop in an Avatar or Switch.
+- Set selected: true with selectedBgColor to highlight the active row.
+
+## Accessibility
+
+- Keep the title short and descriptive; it becomes the row's accessible label.
+
+## Behavior
+
+- divider draws a separator under the row; disabled blocks interaction and dims the tile.
+- onPress fires when the row is tapped, unless disabled is true.
+
+## Related widgets
+
+- [ListView](ListView.md)
+- [Avatar](Avatar.md)
+- [Card](Card.md)
+
+---
+
+## Continue reading
+
+- **Previous:** [Divider](Divider.md)
+- **Next:** [ListView](ListView.md)
+- **Index:** [Widget index](README.md) · [Start here](START_HERE.md)
+
+You are reading **Chapter 3 · Layout, cards and lists** (3 of 8).

package/docs/widget/ListView.md

@@ -0,0 +1,138 @@
+# ListView
+
+Virtualized scrollable list that keeps only the visible rows plus a buffer in the DOM, so large datasets stay responsive.
+
+## When to use it
+
+Use ListView for long or infinite feeds, search results, and chat logs where rendering every row would be wasteful.
+
+## Quick start
+
+```javascript
+import { ListView, Text } from "flet-box";
+
+const list = ListView({
+  data: ["One", "Two", "Three"],
+  renderItem: (item, index) => Text({ text: `${index + 1}. ${item}` }),
+});
+```
+
+> The prop table is generated from `src/index.d.ts`; the examples use only documented props.
+
+## Props
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `data` | `any[]` | Array of values or `{ label, value }` slices. |
+| `renderItem` | `(item: any, index: number) => Widget` | Builds one child from an item: `(item, index) => Widget`. |
+| `height` | `number \| string` | Height of the widget. A number is pixels; a string uses any CSS unit. |
+| `width` | `number \| string` | Width of the widget. A number is pixels; a string uses any CSS unit. |
+| `itemSize` | `number` | Height of each list item. |
+| `gap` | `number` | Space between children along the layout axis. |
+| `wrapItems` | `boolean` | Enables grid wrapping of list items. |
+| `crossAxisCount` | `number` | Number of items per row when wrapping. |
+| `onEndReached` | `() => void` | Fired when the list scrolls near its end, for infinite loading. |
+| `onEndReachedThreshold` | `number` | How close to the end (in items or px) triggers `onEndReached`. |
+| `onRefresh` | `(done: () => void) => void` | Pull-to-refresh handler; call the provided `done()` when finished. |
+| `ListHeaderComponent` | `(() => Widget) \| Widget` | Widget or builder rendered above the list content. |
+| `ListFooterComponent` | `(() => Widget) \| Widget` | Widget or builder rendered below the list content. |
+| `ListEmptyComponent` | `(() => Widget) \| Widget` | Widget or builder shown when there is no data. |
+| `showsScrollIndicator` | `boolean` | Shows the native scrollbar. |
+| `bufferSize` | `number` | How many extra items to render beyond the viewport. |
+| `expand` | `boolean \| number` | Lets a flex child grow to fill available space. |
+
+### Common props
+
+Every widget also accepts these shared props — see [common props](COMMON_PROPS.md) for the full rules and aliases.
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `width` | `Size` | Width of the widget. A number is pixels; a string uses any CSS unit. |
+| `height` | `Size` | Height of the widget. A number is pixels; a string uses any CSS unit. |
+| `size` | `Size` | Overall size preset or pixel value, depending on the widget. |
+| `padding` | `Padding` | Space inside the widget, between its content and its border. |
+| `margin` | `Margin` | Space outside the widget, between it and its neighbors. |
+| `bgColor` | `Color` | Background color. Alias: `backgroundColor`. |
+| `color` | `Color` | Foreground color, usually the text or icon color. |
+| `borderRadius` | `number \| string` | Rounds the corners of the widget. |
+| `elevation` | `number` | Shadow depth. Higher values lift the widget off the page. |
+| `shadow` | `string` | Raw CSS `box-shadow` value, for a custom shadow. |
+| `opacity` | `number` | Opacity from 0 (invisible) to 1 (fully opaque). |
+| `visible` | `boolean` | Whether the widget is rendered and visible. |
+| `disabled` | `boolean` | Disables interaction and shows the non-interactive state. |
+| `onPress` | `(widget: Widget) => void` | Callback fired when the widget is pressed. Alias: `onClick`. |
+| `onClick` | `(widget: Widget) => void` | Callback fired when the widget is clicked. Alias: `onPress`. |
+| `id` | `string` | DOM `id` for the rendered element. |
+| `className` | `string` | CSS class names applied to the rendered element. |
+| `ref` | `(widget: Widget) => void` | Callback that receives the underlying DOM node. |
+| `disableTransform` | `boolean` | Disables the default press/scale transform animation. |
+
+## Examples
+
+### Everyday
+
+```javascript
+import { ListView, Text } from "flet-box";
+
+const list = ListView({
+  data: ["One", "Two", "Three"],
+  itemSize: 56,
+  gap: 8,
+  height: 320,
+  showsScrollIndicator: true,
+  renderItem: (item) => Text({ text: item }),
+});
+```
+
+### Full
+
+```javascript
+import { ListTile, ListView, Text } from "flet-box";
+
+const list = ListView({
+  data: items,
+  itemSize: 64,
+  gap: 8,
+  expand: true,
+  bufferSize: 8,
+  onEndReached: () => loadMore(),
+  onEndReachedThreshold: 0.4,
+  onRefresh: (done) => refreshData(done),
+  ListHeaderComponent: () => Text({ text: "Inbox", type: "h3" }),
+  ListEmptyComponent: () => Text({ text: "Nothing here yet" }),
+  ListFooterComponent: () => Text({ text: "End of list" }),
+  renderItem: (item) => ListTile({ title: item.title, subtitle: item.subtitle }),
+});
+```
+
+## Tips
+
+- `renderItem` must return a widget and is called with `(item, index)`.
+- Set `itemSize` to the real row height so the virtual scroll math stays accurate.
+- Provide `onEndReached` to load more data and `onRefresh` to enable pull-to-refresh.
+
+## Accessibility
+
+- Give the list an accessible heading, since offscreen rows are intentionally absent from the DOM.
+
+## Behavior
+
+- The element exposes `updateData()`, `scrollToIndex()`, `scrollToStart()`, `scrollToEnd()`, and reactive `data` and `refreshing` properties.
+- Rendered rows are cached by index (capped) and offscreen ones are removed; unmount clears listeners and the cache.
+
+## Related widgets
+
+- [GridView](GridView.md)
+- [Column](Column.md)
+- [Container](Container.md)
+- [ListTile](ListTile.md)
+
+---
+
+## Continue reading
+
+- **Previous:** [ListTile](ListTile.md)
+- **Next:** [GridView](GridView.md)
+- **Index:** [Widget index](README.md) · [Start here](START_HERE.md)
+
+You are reading **Chapter 3 · Layout, cards and lists** (4 of 8).

package/docs/widget/Markdown.md

@@ -0,0 +1,175 @@
+# Markdown
+
+Renders markdown source as styled HTML with scoped CSS, syntax-highlighted code blocks, copy buttons, tables, and blockquotes inside a scrollable surface.
+
+## When to use it
+
+Use it for documentation, changelogs, readmes, or any user-facing text authored in Markdown.
+
+## Quick start
+
+```javascript
+import { Markdown } from "flet-box";
+
+const notes = Markdown({
+  content: `# Hello
+
+**FletBox** renders markdown.`,
+});
+```
+
+> The prop table is generated from `src/index.d.ts`; the examples use only documented props.
+
+## Props
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `text` | `string` | Visible text content. |
+| `source` | `string` | Markdown source string to render. |
+| `content` | `string` | Main content of the overlay. |
+| `children` | `string` | An array of child widgets. Alias: `child` for a single child. |
+| `fontSize` | `number` | Size of the font. |
+| `fontFamily` | `string` | The `fontFamily` value for the widget. |
+| `lineHeight` | `number` | Line height as a number multiplier or CSS value. |
+| `color` | `Color` | Foreground color, usually the text or icon color. |
+| `linkColor` | `Color` | Color of links in rendered markdown. |
+| `linkHoverColor` | `Color` | Color used for the link hover. |
+| `linkUnderline` | `boolean` | The `linkUnderline` value for the widget. |
+| `codeBgColor` | `Color` | Background color of inline code. |
+| `codeColor` | `Color` | Color used for the code. |
+| `codeFontSize` | `number` | Size of the code font. |
+| `codeFontFamily` | `string` | The `codeFontFamily` value for the widget. |
+| `codeBorderRadius` | `number` | Corner radius for the code. |
+| `codePadding` | `Padding` | Padding for the code. |
+| `preBgColor` | `Color` | Background color of code blocks. |
+| `preBorderRadius` | `number` | Corner radius for the pre. |
+| `prePadding` | `Padding` | Padding for the pre. |
+| `preMargin` | `Padding` | Margin for the pre. |
+| `blockquoteBorderColor` | `Color` | Border color for the blockquote. |
+| `blockquoteBorderWidth` | `number` | Border width for the blockquote. |
+| `blockquoteColor` | `Color` | Color used for the blockquote. |
+| `blockquotePadding` | `Padding` | Padding for the blockquote. |
+| `blockquoteMargin` | `Padding` | Margin for the blockquote. |
+| `tableBorderColor` | `Color` | Border color for the table. |
+| `tableHeaderBgColor` | `Color` | Background color for the table header. |
+| `tableCellPadding` | `Padding` | Padding for the table cell. |
+| `headingColor` | `Color` | Color of markdown headings. |
+| `headingMargin` | `Padding` | Margin for the heading. |
+| `listMargin` | `Padding` | Margin for the list. |
+| `listPadding` | `Padding` | Padding for the list. |
+| `listItemMargin` | `Padding` | Margin for the list item. |
+| `imageMaxWidth` | `string` | Width of the image max. |
+| `imageBorderRadius` | `number` | Corner radius for the image. |
+| `padding` | `Padding` | Space inside the widget, between its content and its border. |
+| `maxHeight` | `number` | Maximum height the widget may grow to. |
+| `overflow` | `string` | How overflowing content is handled (`hidden`, `auto`, `scroll`). |
+| `backgroundColor` | `Color` | Background color. Alias of `bgColor`. |
+| `borderRadius` | `number` | Rounds the corners of the widget. |
+| `allowDangerousHtml` | `boolean` | Allows raw HTML inside markdown output. |
+
+### Common props
+
+Every widget also accepts these shared props — see [common props](COMMON_PROPS.md) for the full rules and aliases.
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `width` | `Size` | Width of the widget. A number is pixels; a string uses any CSS unit. |
+| `height` | `Size` | Height of the widget. A number is pixels; a string uses any CSS unit. |
+| `size` | `Size` | Overall size preset or pixel value, depending on the widget. |
+| `padding` | `Padding` | Space inside the widget, between its content and its border. |
+| `margin` | `Margin` | Space outside the widget, between it and its neighbors. |
+| `bgColor` | `Color` | Background color. Alias: `backgroundColor`. |
+| `color` | `Color` | Foreground color, usually the text or icon color. |
+| `borderRadius` | `number \| string` | Rounds the corners of the widget. |
+| `elevation` | `number` | Shadow depth. Higher values lift the widget off the page. |
+| `shadow` | `string` | Raw CSS `box-shadow` value, for a custom shadow. |
+| `opacity` | `number` | Opacity from 0 (invisible) to 1 (fully opaque). |
+| `visible` | `boolean` | Whether the widget is rendered and visible. |
+| `disabled` | `boolean` | Disables interaction and shows the non-interactive state. |
+| `onPress` | `(widget: Widget) => void` | Callback fired when the widget is pressed. Alias: `onClick`. |
+| `onClick` | `(widget: Widget) => void` | Callback fired when the widget is clicked. Alias: `onPress`. |
+| `id` | `string` | DOM `id` for the rendered element. |
+| `className` | `string` | CSS class names applied to the rendered element. |
+| `ref` | `(widget: Widget) => void` | Callback that receives the underlying DOM node. |
+| `disableTransform` | `boolean` | Disables the default press/scale transform animation. |
+
+## Examples
+
+### Everyday
+
+```javascript
+import { Markdown } from "flet-box";
+
+const readme = Markdown({
+  content: `# Getting started
+
+Edit the **props** and render.`,
+  fontSize: 15,
+  lineHeight: 1.7,
+  linkColor: "#2563eb",
+});
+```
+
+### Full
+
+```javascript
+import { Markdown } from "flet-box";
+
+const guide = Markdown({
+  content: `# Guide
+
+- Install FletBox
+- Write declarative UI`,
+  fontSize: 16,
+  lineHeight: 1.8,
+  color: "#1f2937",
+  linkColor: "#2563eb",
+  codeBgColor: "#f3f4f6",
+  preBgColor: "#111827",
+  preBorderRadius: 8,
+  blockquoteBorderColor: "#e5e7eb",
+  tableHeaderBgColor: "#f9fafb",
+  headingColor: "#111827",
+  padding: 16,
+  borderRadius: 12,
+  backgroundColor: "#ffffff",
+  maxHeight: 480,
+  overflow: "auto",
+});
+```
+
+## Tips
+
+- text, source, and content are interchangeable aliases for the markdown source.
+- Tune the palette with the per-instance props (codeBgColor, preBgColor, linkColor),
+- and set maxHeight with overflow to keep long pages scrollable.
+- Code blocks are syntax-highlighted and get a one-click copy action out of the box.
+
+## Accessibility
+
+- Keep link text descriptive; rendered links stay real anchors that the keyboard can
+- tab to.
+- Heading levels map to real h1-h6 elements, so keep the document hierarchy sensible.
+
+## Behavior
+
+- Generated styles are scoped to each instance, so several Markdown blocks never leak
+- CSS into each other.
+- Rendered HTML is sanitized before insert; allowDangerousHtml stays false by default
+- for untrusted input.
+
+## Related widgets
+
+- [Text](Text.md)
+- [CodeViewer](CodeViewer.md)
+- [Card](Card.md)
+
+---
+
+## Continue reading
+
+- **Previous:** [CircularChart](CircularChart.md)
+- **Next:** [CodeViewer](CodeViewer.md)
+- **Index:** [Widget index](README.md) · [Start here](START_HERE.md)
+
+You are reading **Chapter 6 · Data, rich content & effects** (4 of 13).