split-flap-board 0.0.3 → 0.0.5

package/README.md

@@ -17,67 +17,154 @@
     </a>
 </p>
 
-Web component that simulates a split-flap display, the mechanical boards found in airports and train stations. Built with [Lit](https://lit.dev/), works in any framework or plain HTML.
+Web component library for split-flap displays, the mechanical boards found in airports and train stations. Built with [Lit](https://lit.dev/), it works in any framework or plain HTML.
+
+- **Simple mental model**: flap -> spool -> board
+- **Framework friendly**: works in plain HTML and can be used from React or other frameworks
+- **Flexible content**: supports character, color, image, and custom flaps
+- **Two built-in looks**: `minimal` and `realistic`
 
 ## How a Split-Flap Display Works
 
 > [How a Split-Flap Display Works (YouTube)](https://www.youtube.com/watch?v=UAQJJAQSg_g)
 
-A split-flap display (also called a "Solari board") works through purely mechanical means:
+A split-flap display, also called a Solari board, works through a simple mechanical loop:
 
-- A **spool** (drum) holds a series of **flaps** (thin cards), each printed with the top half of one character on the front and the bottom half of a different character on the back.
+- A **spool** (drum) holds a series of **flaps** (thin cards), each printed with the top half of one character on the front and the bottom half of another on the back.
 - A **stepper motor** rotates the spool precisely. As each flap passes vertical, gravity pulls it down, snapping it against a **backstop** and creating the characteristic clacking sound.
-- This reveal happens one flap at a time, so going from `A` to `Z` means cycling through every character in between. The order of the flaps on the spool is fixed at manufacture.
-- A **hall effect sensor** and magnet on the spool give the controller a consistent home position, so it always knows which character is showing even after a power cycle.
+- This reveal happens one flap at a time, so going from `A` to `Z` means cycling through every character in between. The order of the flaps on the spool is fixed.
+- A **hall effect sensor** and magnet give the controller a consistent home position, so it always knows which character is showing even after a power cycle.
+
+In code, each `<split-flap-spool>` mirrors that behavior: it holds an ordered sequence of **flaps** and steps forward through them until it reaches a target key.
+
+## Install
+
+```bash
+pnpm add split-flap-board
+```
+
+## Quick Start
+
+### Board
+
+```html
+<script type="module">
+	import 'split-flap-board';
+</script>
+
+<split-flap-board></split-flap-board>
+```
+
+```js
+import { fromLines } from 'split-flap-board';
 
-In code, each `<split-flap-spool>` mirrors this: it holds a sequence of **flaps** and steps forward through them to reach a target key, never backward.
+const board = document.querySelector('split-flap-board');
+const { spools, grid } = fromLines(['HELLO WORLD'], 11);
+
+board.spools = spools;
+board.grid = grid;
+```
+
+For most apps, this is the easiest way to start:
+
+1. build `spools` once
+2. update `grid` whenever the displayed text changes
+
+### Single Spool
+
+```html
+<script type="module">
+	import 'split-flap-board';
+</script>
+
+<split-flap-spool value="A"></split-flap-spool>
+```
+
+```js
+const spool = document.querySelector('split-flap-spool');
+spool.value = 'Z'; // steps forward: A -> B -> ... -> Z
+```
+
+Switch to the realistic look:
+
+```html
+<split-flap-spool variant="realistic" value="A"></split-flap-spool>
+```
 
 ## Core Concepts
 
 ### Flap
 
-A flap is one card on the spool, the atomic unit of content. Four built-in types:
+A flap is one card on the spool, the smallest unit of display content. The library ships with four built-in flap types:
 
 ```ts
 // Character (default)
-{ type: 'char'; value: string; color?: string; bg?: string; fontSize?: string; fontFamily?: string; fontWeight?: string }
+{
+	type: 'char';
+	key?: string;
+	value: string;
+	color?: string;
+	bg?: string;
+	fontSize?: string;
+	fontFamily?: string;
+	fontWeight?: string;
+}
 
 // Solid color
-{ type: 'color'; value: string }  // any CSS color
+{
+	type: 'color';
+	key?: string;
+	value: string;
+}
 
 // Image
-{ type: 'image'; src: string; alt?: string }
+{
+	type: 'image';
+	key?: string;
+	src: string;
+	alt?: string;
+}
 
-// Custom - top and bottom halves rendered independently (Lit TemplateResult)
-{ type: 'custom'; key: string; top: TemplateResult; bottom: TemplateResult }
+// Custom, top and bottom halves rendered independently
+{
+	type: 'custom';
+	key: string;
+	top: TemplateResult;
+	bottom: TemplateResult;
+}
 ```
 
-The `key` field is optional on all types except `custom`. When omitted it defaults to the natural identifier: `value` for char and color, `src` for image.
+The `key` field is optional on all types except `custom`. When omitted, the library uses the natural identifier:
+
+- `value` for `char` and `color`
+- `src` for `image`
 
-Char flaps default to `2rem` monospace bold. Override per-flap via the object, or rebuild the spool with a new `fontSize` to change all at once:
+Char flaps can be styled per flap when needed:
 
 ```ts
-const bigSpool = charSpool.map((f) =>
-	f.type === 'char' ? { ...f, fontSize: '3rem', fontWeight: '400' } : f
+const styledSpool = charSpool.map((flap) =>
+	flap.type === 'char' ? { ...flap, fontSize: '3rem', color: '#fff', bg: '#2563eb' } : flap
 );
-spool.flaps = bigSpool;
+
+spool.flaps = styledSpool;
 ```
 
 ### Spool
 
-A spool is an ordered array of flaps, the sequence a `<split-flap-spool>` steps through. Define it once, reference it anywhere.
+A spool is an ordered array of flaps, the sequence a `<split-flap-spool>` steps through. Define it once and reuse it anywhere.
 
 ```ts
 type TSpool = TFlap[];
 ```
 
-The library ships built-in spools:
+The library ships with built-in spools:
 
 ```ts
-import { charSpool, numericSpool } from 'split-flap-board';
+import { charSpool, colorSpool, numericSpool } from 'split-flap-board';
 
-// charSpool    → [' ', A-Z, 0-9, . - / :]
-// numericSpool → [' ', 0-9]
+// charSpool    -> [' ', A-Z, 0-9, . - / : ]
+// numericSpool -> [' ', 0-9]
+// colorSpool   -> named color keys such as 'red', 'green', 'blue'
 ```
 
 Custom spools are just arrays:
@@ -91,7 +178,7 @@ const statusSpool: TSpool = [
 ];
 ```
 
-You can mix flap types within a spool:
+You can also mix flap types within a single spool:
 
 ```ts
 const mixedSpool: TSpool = [
@@ -102,12 +189,17 @@ const mixedSpool: TSpool = [
 ];
 ```
 
-### Spools grid vs. target grid
+### Spools Grid vs. Target Grid
 
 A board has two separate grids:
 
-- **`spools`** - a `TSpool[][]` defining what each spool unit CAN show. Typically set once at init.
-- **`grid`** - a `string[][]` of target keys defining what each unit SHOWS right now. Updated freely at runtime.
+- **`spools`**: a `TSpool[][]` that defines what each cell can show. This is usually set once.
+- **`grid`**: a `string[][]` of target keys that defines what each cell should show right now. This is the part you usually update at runtime.
+
+If you are unsure which one to change, use this rule of thumb:
+
+- change `spools` when the available flap set changes
+- change `grid` when the displayed content changes
 
 ```ts
 import { charSpool, spoolGrid } from 'split-flap-board';
@@ -115,10 +207,10 @@ import { charSpool, spoolGrid } from 'split-flap-board';
 // spoolGrid(spool, cols, rows) fills a uniform TSpool[][]
 board.spools = spoolGrid(charSpool, 10, 3);
 
-// per-column: pass an array of spools, one per column (shorter arrays repeat)
+// Per-column: pass an array of spools, one per column. Shorter arrays repeat.
 board.spools = spoolGrid([charSpool, charSpool, statusSpool], 3, 2);
 
-// fully custom: build the 2D array directly
+// Fully custom: build the 2D array directly.
 board.spools = [
 	[charSpool, charSpool, statusSpool],
 	[charSpool, charSpool, statusSpool]
@@ -135,65 +227,16 @@ Board dimensions are inferred from `spools`.
 
 ## Usage
 
-### Single spool
+### Updating at Runtime
 
-```html
-<script type="module">
-	import 'split-flap-board';
-</script>
-
-<split-flap-spool value="A"></split-flap-spool>
-```
-
-```js
-const spool = document.querySelector('split-flap-spool');
-spool.value = 'Z'; // steps forward: A → B → ... → Z
-```
-
-Switch to the realistic look:
-
-```html
-<split-flap-spool variant="realistic" value="A"></split-flap-spool>
-```
-
-Custom spool:
-
-```js
-import { statusSpool } from './my-spools';
-
-spool.flaps = statusSpool;
-spool.value = 'green';
-```
-
-### Board
-
-```html
-<script type="module">
-	import 'split-flap-board';
-</script>
-
-<split-flap-board></split-flap-board>
-```
+For content changes, only `grid` needs to change. Assign a new array reference:
 
 ```js
-import { fromLines } from 'split-flap-board';
-
-const board = document.querySelector('split-flap-board');
-const { spools, grid } = fromLines(['HELLO WORLD'], 11);
-board.spools = spools;
-board.grid = grid;
-```
-
-### Updating at runtime
-
-Only `grid` needs to change for content updates. Assign a new array reference:
-
-```js
-// refresh content - spools stay the same
+// Refresh content, spools stay the same.
 board.grid = [['G', 'O', 'O', 'D', 'B', 'Y', 'E', ' ', ' ', ' ', ' ']];
 ```
 
-### Multi-row board
+### Multi-Row Board
 
 ```js
 import { fromLines } from 'split-flap-board';
@@ -207,7 +250,20 @@ board.spools = spools;
 board.grid = grid;
 ```
 
-### Mixed spools per column
+### Custom Spool
+
+```js
+const statusSpool = [
+	{ type: 'color', value: '#111', key: 'off' },
+	{ type: 'color', value: '#16a34a', key: 'green' },
+	{ type: 'color', value: '#dc2626', key: 'red' }
+];
+
+spool.flaps = statusSpool;
+spool.value = 'green';
+```
+
+### Mixed Spools per Column
 
 ```js
 import { charSpool, spoolGrid } from 'split-flap-board';
@@ -226,7 +282,7 @@ board.grid = [
 ];
 ```
 
-### Colored rows
+### Colored Rows
 
 ```js
 import { fromLines } from 'split-flap-board';
@@ -244,6 +300,8 @@ board.spools = spools;
 board.grid = grid;
 ```
 
+Use row colors when you want text-style boards with a highlighted row, for example boarding status or delays.
+
 ### React
 
 ```tsx
@@ -264,6 +322,7 @@ export function DeparturesBoard() {
 
 	useEffect(() => {
 		if (ref.current == null) return;
+
 		const { spools, grid } = fromLines(['DEPARTURES'], 10);
 		(ref.current as any).spools = spools;
 		(ref.current as any).grid = grid;
@@ -273,6 +332,8 @@ export function DeparturesBoard() {
 }
 ```
 
+For richer framework integrations, the simplest approach is usually to keep `spools` stable and only update `grid`.
+
 ## API Reference
 
 ### `<split-flap-spool>`
@@ -298,9 +359,9 @@ The variant elements can also be used directly if you prefer not to use the wrap
 
 | Property           | Type                       | Default     | Description                                                                                                                   |
 | ------------------ | -------------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------- |
-| `spools`           | `TSpool[][]`               | —           | 2D spool configuration, one per cell. Board dimensions are inferred from this. Always assign a new array reference to update. |
+| `spools`           | `TSpool[][]`               | `[]`        | 2D spool configuration, one per cell. Board dimensions are inferred from this. Always assign a new array reference to update. |
 | `grid`             | `string[][]`               | `[]`        | 2D array of target keys. Always assign a new array reference to trigger a re-render.                                          |
-| `speed`            | `number`                   | `60`        | Flip speed in milliseconds forwarded to every child spool.                                                                     |
+| `speed`            | `number`                   | `60`        | Flip speed in milliseconds forwarded to every child spool.                                                                    |
 | `variant`          | `'minimal' \| 'realistic'` | `'minimal'` | Visual variant forwarded to every child spool.                                                                                |
 | `visibleSideCount` | `number`                   | `-1`        | Forwarded to child spools. Only affects the `realistic` variant.                                                              |
 
@@ -333,10 +394,10 @@ function spoolGrid(spool: TSpool | TSpool[], cols: number, rows: number): TSpool
 Creates a `TSpool[][]` for use with `board.spools`.
 
 ```ts
-// Uniform - same spool for every cell
+// Uniform, same spool for every cell
 spoolGrid(charSpool, 10, 3);
 
-// Per-column - pass an array where index = column; shorter arrays repeat
+// Per-column, pass an array where index = column. Shorter arrays repeat.
 spoolGrid([charSpool, charSpool, statusSpool], 3, 2);
 ```
 
@@ -349,7 +410,7 @@ function fromLines(
 ): { spools: TSpool[][]; grid: string[][] };
 ```
 
-Creates a char `spools` grid and a `grid` of target keys from an array of strings. Each string is one row, padded with spaces or truncated to `cols`. Rows with `bg`/`color` get those values baked into their char flaps.
+Creates a char `spools` grid and a `grid` of target keys from an array of lines. Each line is uppercased, padded with spaces, or truncated to `cols`. Rows with `bg` or `color` get those values baked into their char flaps.
 
 ```ts
 const { spools, grid } = fromLines(
@@ -363,15 +424,22 @@ board.grid = grid;
 
 ### CSS Custom Properties
 
-Set these on the board to theme all spools at once, or override on individual spools via CSS selectors.
+Set these on the board to theme all spools at once, or override them on individual spools via CSS selectors.
 
 ```css
-/* Shared */
+/* Board panel */
+split-flap-board {
+	--sfb-board-bg: #1c1c1c; /* panel and frame background */
+	--sfb-board-padding: 10px; /* inset spacing around the cell grid */
+	--sfb-board-radius: 8px; /* corner radius of the panel itself */
+	--sfb-gap: 3px; /* gap between spool cells */
+}
+
+/* Shared flap styles */
 split-flap-board {
-	--sfb-bg: #111; /* flap background */
-	--sfb-color: #f5f0e0; /* flap text color */
-	--sfb-spool-radius: 4px; /* corner radius on each flap */
-	--sfb-gap: 2px; /* gap between spool cells */
+	--sfb-flap-bg: #111; /* flap background */
+	--sfb-flap-color: #f5f0e0; /* flap text color */
+	--sfb-flap-radius: 4px; /* corner radius on each flap */
 }
 
 /* Minimal variant */
@@ -383,46 +451,46 @@ split-flap-board {
 
 /* Realistic variant */
 split-flap-board {
-	--sfb-spool-width: 1em; /* flap width; defaults to 1× font-size */
-	--sfb-spool-height: 2em; /* flap height; defaults to 2× font-size */
-	--sfb-drum-radius: 0px; /* cylinder radius; 0 keeps the flip flat */
+	--sfb-spool-width: 1em; /* flap width, defaults to 1x font-size */
+	--sfb-spool-height: 2em; /* flap height, defaults to 2x font-size */
+	--sfb-drum-radius: 0px; /* cylinder radius, 0 keeps the flip flat */
 	--sfb-crease: 1px; /* gap between the two flap halves */
 	--sfb-perspective: 400px; /* CSS perspective depth */
 	--sfb-view-transform: none; /* e.g. rotateY(-30deg) */
-	--sfb-max-step-angle: 1turn; /* per-step angle cap; 8deg tightens small spools */
-	--sfb-flap-border: #2a2a2a; /* border on each flap card; separates adjacent cells */
+	--sfb-max-step-angle: 1turn; /* per-step angle cap, 8deg tightens small spools */
+	--sfb-flap-border: #2a2a2a; /* border on each flap card */
 }
 
 /* Per-spool override */
 split-flap-spool.highlight {
-	--sfb-bg: #16a34a;
-	--sfb-color: #fff;
+	--sfb-flap-bg: #16a34a;
+	--sfb-flap-color: #fff;
 }
 ```
 
 ## Behavior
 
-### Initial state
+### Initial State
 
-Before `value` is set, a `<split-flap-spool>` shows the first flap in its sequence (index 0). For `charSpool` that is a space. This mirrors the physical home position the hall effect sensor establishes on power-up.
+Before `value` is set, a `<split-flap-spool>` shows the first flap in its sequence. For `charSpool`, that is a space. This mirrors the physical home position a real board establishes on startup.
 
 ### Animation
 
-Each flap step plays a fold animation where the top half falls away, revealing the next card underneath. The animation duration is derived from `speed` so it always fits within one step interval. No separate property is needed.
+Each flap step plays a fold animation where the top half falls away and reveals the next card underneath. The animation duration is derived from `speed`, so it always fits inside one step interval.
 
-### Unknown key
+### Unknown Key
 
-If `value` is set to a key that does not exist in `flaps`, the spool does not start a new search and no error is thrown. If that happens during an in-flight animation, the current flip finishes and `settled` reports the flap the spool actually landed on.
+If `value` is set to a key that does not exist in `flaps`, the spool does not start a new search and no error is thrown. If this happens during an in-flight animation, the current flip finishes and `settled` reports the flap the spool actually landed on.
 
-### Retargeting during motion
+### Retargeting During Motion
 
 If `value` changes to another valid key while the spool is already moving, the spool keeps its current forward motion and retargets to the newest valid key. It does not snap backward or restart from the beginning.
 
-### Spool changes during motion
+### Spool Changes During Motion
 
 If `flaps` changes while the spool is moving, the component remaps the currently visible flap by key into the new spool, clears stale animation bookkeeping, and continues from the new coherent state.
 
-### Grid size mismatch
+### Grid Size Mismatch
 
 If `grid` has more rows or columns than `spools`, the extra entries are ignored. If `grid` is smaller than `spools`, spools without a matching target key stay on their current flap. No errors are thrown.
 
@@ -431,8 +499,8 @@ If `grid` has more rows or columns than `spools`, the extra entries are ignored.
 Because a spool only rotates forward, the number of steps depends on the distance ahead in the spool, wrapping around if needed.
 
 ```
-'A' → 'C'  =  2 steps
-'Z' → 'B'  =  3 steps  (wraps: Z → ' ' → A → B)
+'A' -> 'C'  =  2 steps
+'Z' -> 'B'  =  3 steps  (wraps: Z -> ' ' -> A -> B)
 ```
 
 This applies to all flap types. Keep the order of your spool in mind when designing update sequences. The closer two keys are in the spool, the faster the transition.
@@ -442,4 +510,3 @@ This applies to all flap types. Keep the order of your spool in mind when design
 - [How a Split-Flap Display Works (YouTube)](https://www.youtube.com/watch?v=UAQJJAQSg_g)
 - [Lit](https://lit.dev/)
 - [Scott Bezek's open-source split-flap hardware](https://github.com/scottbez1/splitflap)
-- [@ybhrdwj on X](https://x.com/ybhrdwj/status/2037110274696896687) - the tweet that started this :)

package/dist/cjs/SplitFlapBoard.js

@@ -1,18 +1,56 @@
-"use strict";var a=require("lit"),i=require("lit/decorators.js");require("./spools/SplitFlapSpool.js");var n=Object.defineProperty,u=Object.getOwnPropertyDescriptor,o=(d,t,r,l)=>{for(var e=l>1?void 0:l?u(t,r):t,s=d.length-1,p;s>=0;s--)(p=d[s])&&(e=(l?p(t,r,e):p(e))||e);return l&&e&&n(t,r,e),e};exports.SplitFlapBoard=class extends a.LitElement{constructor(){super(...arguments),this.spools=[],this.grid=[],this.speed=60,this.variant="minimal",this.visibleSideCount=-1,this._pendingSettle=!1}updated(t){var r,l;super.updated(t);const e=(l=(r=this.spools[0])==null?void 0:r.length)!=null?l:0;this.style.gridTemplateColumns=e>0?`repeat(${e}, auto)`:"",(t.has("spools")||t.has("grid"))&&(this._pendingSettle=!0,Promise.resolve().then(()=>this._checkAllSettled()))}_getSpoolEls(){return Array.from(this.renderRoot.querySelectorAll("split-flap-spool"))}_checkAllSettled(){if(!this._pendingSettle)return;const t=this._getSpoolEls();t.length!==0&&t.every(r=>r.isSettled)&&(this._pendingSettle=!1,this._dispatchBoardSettled(t))}_dispatchBoardSettled(t){let r=0;const l=this.spools.map(e=>e.map(()=>{var s,p;return(p=(s=t[r++])==null?void 0:s.currentValue)!=null?p:""}));this.dispatchEvent(new CustomEvent("board-settled",{detail:{grid:l},bubbles:!0,composed:!0}))}render(){return a.html`
-			${this.spools.flatMap((t,r)=>t.map((l,e)=>{var s,p;return a.html`
-						<split-flap-spool
-							.flaps=${l}
-							.value=${(p=(s=this.grid[r])==null?void 0:s[e])!=null?p:""}
-							.speed=${this.speed}
-							.variant=${this.variant}
-							.visibleSideCount=${this.visibleSideCount}
-							@settled=${()=>this._checkAllSettled()}
-						></split-flap-spool>
-					`}))}
-		`}},exports.SplitFlapBoard.styles=a.css`
+"use strict";var l=require("lit"),p=require("lit/decorators.js"),n=Object.defineProperty,u=Object.getOwnPropertyDescriptor,a=(d,t,e,s)=>{for(var r=s>1?void 0:s?u(t,e):t,o=d.length-1,i;o>=0;o--)(i=d[o])&&(r=(s?i(t,e,r):i(r))||r);return s&&r&&n(t,e,r),r};exports.SplitFlapBoard=class extends l.LitElement{constructor(){super(...arguments),this.spools=[],this.grid=[],this.speed=60,this.variant="minimal",this.visibleSideCount=-1,this._pendingSettle=!1}updated(t){super.updated(t),(t.has("spools")||t.has("grid"))&&(this._pendingSettle=!0,queueMicrotask(()=>this._checkAllSettled()))}_getSpoolEls(){return Array.from(this.renderRoot.querySelectorAll("split-flap-spool"))}_checkAllSettled(){if(!this._pendingSettle)return;const t=this._getSpoolEls();if(t.length===0){this._pendingSettle=!1,this._dispatchBoardSettled([]);return}t.every(e=>e.isSettled)&&(this._pendingSettle=!1,this._dispatchBoardSettled(t))}_dispatchBoardSettled(t){const e=this._getCurrentGrid(t);this.dispatchEvent(new CustomEvent("board-settled",{detail:{grid:e},bubbles:!0,composed:!0}))}_getCurrentGrid(t){let e=0;return this.spools.map(s=>s.map(()=>{var r,o;const i=(o=(r=t[e])==null?void 0:r.currentValue)!=null?o:"";return e+=1,i}))}render(){return l.html`
+			${this.spools.map((t,e)=>l.html`
+					<div class="board-row" style="z-index: ${e+1}">
+						${t.map((s,r)=>{var o,i;return l.html`
+								<split-flap-spool
+									.flaps=${s}
+									.value=${(i=(o=this.grid[e])==null?void 0:o[r])!=null?i:""}
+									.speed=${this.speed}
+									.variant=${this.variant}
+									.visibleSideCount=${this.visibleSideCount}
+									@settled=${()=>this._checkAllSettled()}
+								></split-flap-spool>
+							`})}
+					</div>
+				`)}
+		`}},exports.SplitFlapBoard.styles=l.css`
 		:host {
-			display: inline-grid;
-			gap: var(--sfb-gap, 2px);
+			display: inline-flex;
+			position: relative;
+			flex-direction: column;
 			box-sizing: border-box;
+			box-shadow:
+				inset 14px 0 18px rgba(0, 0, 0, 0.55),
+				inset -14px 0 18px rgba(0, 0, 0, 0.55);
+			border-radius: var(--sfb-board-radius, 8px);
+			background: var(--sfb-board-bg, #1c1c1c);
+			padding: var(--sfb-board-padding, 10px);
 		}
-	`,o([i.property({type:Array})],exports.SplitFlapBoard.prototype,"spools",2),o([i.property({type:Array})],exports.SplitFlapBoard.prototype,"grid",2),o([i.property({type:Number})],exports.SplitFlapBoard.prototype,"speed",2),o([i.property({type:String})],exports.SplitFlapBoard.prototype,"variant",2),o([i.property({type:Number})],exports.SplitFlapBoard.prototype,"visibleSideCount",2),exports.SplitFlapBoard=o([i.customElement("split-flap-board")],exports.SplitFlapBoard);
+
+		:host::after {
+			position: absolute;
+			z-index: 10000;
+			inset: 0;
+			border: 10px solid var(--sfb-board-bg, #1c1c1c);
+			border-radius: var(--sfb-board-radius, 8px);
+			pointer-events: none;
+			content: '';
+		}
+
+		.board-row {
+			display: flex;
+			position: relative;
+			gap: var(--sfb-gap, 3px);
+			padding-block: 12px;
+		}
+
+		.board-row::before {
+			position: absolute;
+			z-index: 1;
+			inset: 0 0 auto 0;
+			box-shadow: 0 3px 10px rgba(0, 0, 0, 0.65);
+			background: var(--sfb-board-bg, #1c1c1c);
+			height: 10px;
+			content: '';
+		}
+	`,a([p.property({type:Array})],exports.SplitFlapBoard.prototype,"spools",2),a([p.property({type:Array})],exports.SplitFlapBoard.prototype,"grid",2),a([p.property({type:Number})],exports.SplitFlapBoard.prototype,"speed",2),a([p.property({type:String})],exports.SplitFlapBoard.prototype,"variant",2),a([p.property({type:Number})],exports.SplitFlapBoard.prototype,"visibleSideCount",2),exports.SplitFlapBoard=a([p.customElement("split-flap-board")],exports.SplitFlapBoard);

package/dist/cjs/lib/board.js

@@ -1 +1 @@
-"use strict";var i=require("../spools/presets.js"),g=Object.defineProperty,h=Object.getOwnPropertySymbols,m=Object.prototype.hasOwnProperty,v=Object.prototype.propertyIsEnumerable,y=(t,r,e)=>r in t?g(t,r,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[r]=e,u=(t,r)=>{for(var e in r||(r={}))m.call(r,e)&&y(t,e,r[e]);if(h)for(var e of h(r))v.call(r,e)&&y(t,e,r[e]);return t};function d(t,r,e){const o=t.length>0&&Array.isArray(t[0])?t:Array.from({length:r},()=>t);return Array.from({length:e},()=>Array.from({length:r},(l,a)=>{var p;return(p=o[a%o.length])!=null?p:i.charSpool}))}function A(t,r){const e=[],o=[];for(const l of t){const a=typeof l=="object",p=a?l.text:l,n=a?l.bg:void 0,s=a?l.color:void 0,f=p.toUpperCase().padEnd(r," ").slice(0,r).split("");if(n!=null||s!=null){const b=f.map(()=>i.charSpool.map(c=>c.type!=="char"?c:u(u(u({},c),n!=null?{bg:n}:{}),s!=null?{color:s}:{})));e.push(b)}else e.push(Array.from({length:r},()=>i.charSpool));o.push(f)}return{spools:e,grid:o}}exports.fromLines=A,exports.spoolGrid=d;
+"use strict";var u=require("../spools/presets.js"),y=Object.defineProperty,i=Object.getOwnPropertySymbols,b=Object.prototype.hasOwnProperty,g=Object.prototype.propertyIsEnumerable,s=(r,t,e)=>t in r?y(r,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):r[t]=e,c=(r,t)=>{for(var e in t||(t={}))b.call(t,e)&&s(r,e,t[e]);if(i)for(var e of i(t))g.call(t,e)&&s(r,e,t[e]);return r};function h(r,t,e){const o=v(r)?r:[r];return Array.from({length:e},()=>Array.from({length:t},(a,l)=>{var n;return(n=o[l%o.length])!=null?n:u.charSpool}))}function m(r,t){const e=[],o=[];for(const a of r){const l=O(a),n=A(l.text,t).split(""),f=l.bg!=null||l.color!=null;e.push(f?S(t,l):p(u.charSpool,t)),o.push(n)}return{spools:e,grid:o}}function v(r){return Array.isArray(r[0])}function p(r,t){return Array.from({length:t},()=>r)}function d(r,t){return r.type!=="char"?r:c(c(c({},r),t.bg!=null?{bg:t.bg}:{}),t.color!=null?{color:t.color}:{})}function O(r){return typeof r=="string"?{text:r}:r}function A(r,t){return r.toUpperCase().padEnd(t," ").slice(0,t)}function S(r,t){const e=u.charSpool.map(o=>d(o,t));return p(e,r)}exports.fromLines=m,exports.spoolGrid=h;

package/dist/cjs/lib/flap.js

@@ -1 +1 @@
-"use strict";function r(e){if(e.key!=null)return e.key;switch(e.type){case"char":case"color":return e.value;case"image":return e.src;case"custom":return e.key}}exports.getFlapKey=r;
+"use strict";function c(e){var r,t;switch(e.type){case"char":case"color":return(r=e.key)!=null?r:e.value;case"image":return(t=e.key)!=null?t:e.src;case"custom":return e.key}}exports.getFlapKey=c;

package/dist/cjs/spools/SplitFlapSpool.js

@@ -1,4 +1,4 @@
-"use strict";var o=require("lit"),r=require("lit/decorators.js"),S=require("./presets.js"),n=require("../lib/flap.js");require("./SplitFlapSpoolMinimal.js"),require("./SplitFlapSpoolRealistic.js");var v=Object.defineProperty,h=Object.getOwnPropertyDescriptor,i=(s,t,e,p)=>{for(var l=p>1?void 0:p?h(t,e):t,a=s.length-1,u;a>=0;a--)(u=s[a])&&(l=(p?u(t,e,l):u(l))||l);return p&&l&&v(t,e,l),l};exports.SplitFlapSpool=class extends o.LitElement{constructor(){super(...arguments),this.variant="minimal",this.value=" ",this.flaps=S.charSpool,this.speed=60,this.visibleSideCount=-1}get currentValue(){var t,e;return(e=(t=this._getActiveSpool())==null?void 0:t.currentValue)!=null?e:this.flaps[0]!=null?n.getFlapKey(this.flaps[0]):void 0}get isSettled(){var t,e;return(e=(t=this._getActiveSpool())==null?void 0:t.isSettled)!=null?e:!0}hasKey(t){var e,p;return(p=(e=this._getActiveSpool())==null?void 0:e.hasKey(t))!=null?p:this.flaps.some(l=>n.getFlapKey(l)===t)}_getActiveSpool(){return this.renderRoot.querySelector("split-flap-spool-minimal, split-flap-spool-realistic")}render(){return this.variant==="realistic"?o.html`
+"use strict";var o=require("lit"),r=require("lit/decorators.js"),S=require("./presets.js"),u=require("../lib/flap.js");require("./SplitFlapSpoolMinimal.js"),require("./SplitFlapSpoolRealistic.js");var v=Object.defineProperty,h=Object.getOwnPropertyDescriptor,i=(s,e,t,p)=>{for(var l=p>1?void 0:p?h(e,t):e,a=s.length-1,n;a>=0;a--)(n=s[a])&&(l=(p?n(e,t,l):n(l))||l);return p&&l&&v(e,t,l),l};exports.SplitFlapSpool=class extends o.LitElement{constructor(){super(...arguments),this.variant="minimal",this.value=" ",this.flaps=S.charSpool,this.speed=60,this.visibleSideCount=-1}get currentValue(){var e,t;return(t=(e=this._getActiveSpool())==null?void 0:e.currentValue)!=null?t:this.flaps[0]!=null?u.getFlapKey(this.flaps[0]):void 0}get isSettled(){var e,t;return(t=(e=this._getActiveSpool())==null?void 0:e.isSettled)!=null?t:!0}hasKey(e){var t,p;return(p=(t=this._getActiveSpool())==null?void 0:t.hasKey(e))!=null?p:this.flaps.some(l=>u.getFlapKey(l)===e)}_getActiveSpool(){return this.renderRoot.querySelector("split-flap-spool-minimal, split-flap-spool-realistic")}_renderVariant(){return this.variant==="realistic"?o.html`
 				<split-flap-spool-realistic
 					.value=${this.value}
 					.flaps=${this.flaps}
@@ -11,7 +11,7 @@
 				.flaps=${this.flaps}
 				.speed=${this.speed}
 			></split-flap-spool-minimal>
-		`}},exports.SplitFlapSpool.styles=o.css`
+		`}render(){return this._renderVariant()}},exports.SplitFlapSpool.styles=o.css`
 		:host {
 			display: contents;
 		}

package/dist/cjs/spools/SplitFlapSpoolBase.js

@@ -1,7 +1,7 @@
-"use strict";var n=require("lit"),u=require("lit/decorators.js"),y=require("lit/directives/style-map.js"),I=require("./presets.js"),l=require("../lib/flap.js"),f=Object.defineProperty,v=Object.getOwnPropertySymbols,T=Object.prototype.hasOwnProperty,F=Object.prototype.propertyIsEnumerable,x=(s,e,t)=>e in s?f(s,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):s[e]=t,o=(s,e)=>{for(var t in e||(e={}))T.call(e,t)&&x(s,t,e[t]);if(v)for(var t of v(e))F.call(e,t)&&x(s,t,e[t]);return s},_=(s,e,t,r)=>{for(var i=void 0,h=s.length-1,p;h>=0;h--)(p=s[h])&&(i=p(e,t,i)||i);return i&&f(e,t,i),i};class a extends n.LitElement{constructor(){super(...arguments),this.value=" ",this.flaps=I.charSpool,this.speed=60,this._currentIndex=0,this._prevIndex=0,this._stepping=!1,this._targetIndex=-1,this._stepTimer=null,this._animTimer=null,this._animEndsAt=0}get _animDur(){return Math.max(Math.floor(this.speed*.85),1)}updated(e){super.updated(e),e.has("flaps")&&this._syncIndicesToFlaps(e.get("flaps")),(e.has("value")||e.has("flaps"))&&this._startStepping()}disconnectedCallback(){super.disconnectedCallback(),this._clearTimers()}get currentFlap(){var e;return(e=this.flaps[this._currentIndex])!=null?e:this.flaps[0]}get currentValue(){return this.currentFlap!=null?l.getFlapKey(this.currentFlap):void 0}get isSettled(){return!this._stepping&&this._targetIndex===-1&&this._stepTimer==null&&this._animTimer==null}hasKey(e){return this.flaps.some(t=>l.getFlapKey(t)===e)}_startStepping(){if(!this.flaps.length){this._resetForEmptyFlaps();return}const e=this.flaps.findIndex(r=>l.getFlapKey(r)===this.value),t=this._stepping||this._stepTimer!=null;if(e===-1){this._targetIndex=-1,t&&this._scheduleAdvanceOrSettle(this._getRemainingAnimTime());return}if(this._targetIndex=e,this._currentIndex===this._targetIndex){t?this._scheduleAdvanceOrSettle(this._getRemainingAnimTime()):this._targetIndex=-1;return}t||this._doStep()}_doStep(){if(!this.flaps.length){this._resetForEmptyFlaps();return}const e=(this._currentIndex+1)%this.flaps.length;this._prevIndex=this._currentIndex,this._currentIndex=e,this._stepping=!0,this._animEndsAt=Date.now()+this._animDur,this._animTimer!=null&&clearTimeout(this._animTimer),this._animTimer=setTimeout(()=>{this._stepping=!1,this._animTimer=null,this._animEndsAt=0},this._animDur);const t=this._currentIndex!==this._targetIndex?this.speed:this._getRemainingAnimTime();this._scheduleAdvanceOrSettle(t)}_scheduleAdvanceOrSettle(e){this._stepTimer!=null&&clearTimeout(this._stepTimer),this._stepTimer=setTimeout(()=>{if(this._stepTimer=null,this._targetIndex!==-1&&this._currentIndex!==this._targetIndex){this._doStep();return}this._finishSettling()},Math.max(e,0))}_finishSettling(){if(this._stepping){this._scheduleAdvanceOrSettle(this._getRemainingAnimTime());return}this._targetIndex=-1;const e=this.currentValue;e!=null&&this.dispatchEvent(new CustomEvent("settled",{detail:{value:e},bubbles:!0,composed:!0}))}_getRemainingAnimTime(){return this._stepping?Math.max(this._animEndsAt-Date.now(),1):0}_resetForEmptyFlaps(){this._clearTimers(),this._targetIndex=-1,this._currentIndex=0,this._prevIndex=0,this._stepping=!1}_syncIndicesToFlaps(e){var t,r;if(!this.flaps.length){this._resetForEmptyFlaps();return}if(e==null||!e.length){this._currentIndex=0,this._prevIndex=0,this._targetIndex=-1,this._clearTimers(),this._stepping=!1;return}const i=(t=e[this._currentIndex])!=null?t:e[0],h=(r=e[this._prevIndex])!=null?r:i,p=i!=null?l.getFlapKey(i):void 0,c=h!=null?l.getFlapKey(h):p;this._clearTimers(),this._stepping=!1,this._targetIndex=-1;const m=p!=null?this.flaps.findIndex(d=>l.getFlapKey(d)===p):-1,g=c!=null?this.flaps.findIndex(d=>l.getFlapKey(d)===c):-1;this._currentIndex=m>=0?m:0,this._prevIndex=g>=0?g:this._currentIndex}_clearTimers(){this._stepTimer!=null&&(clearTimeout(this._stepTimer),this._stepTimer=null),this._animTimer!=null&&(clearTimeout(this._animTimer),this._animTimer=null),this._animEndsAt=0}_renderHalf(e,t){var r;switch(e.type){case"char":return n.html`
+"use strict";var n=require("lit"),p=require("lit/decorators.js"),x=require("lit/directives/style-map.js"),I=require("./presets.js"),o=require("../lib/flap.js"),g=Object.defineProperty,f=Object.getOwnPropertySymbols,y=Object.prototype.hasOwnProperty,T=Object.prototype.propertyIsEnumerable,v=(s,e,t)=>e in s?g(s,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):s[e]=t,_=(s,e)=>{for(var t in e||(e={}))y.call(e,t)&&v(s,t,e[t]);if(f)for(var t of f(e))T.call(e,t)&&v(s,t,e[t]);return s},u=(s,e,t,r)=>{for(var i=void 0,a=s.length-1,h;a>=0;a--)(h=s[a])&&(i=h(e,t,i)||i);return i&&g(e,t,i),i};class l extends n.LitElement{constructor(){super(...arguments),this.value=" ",this.flaps=I.charSpool,this.speed=60,this._currentIndex=0,this._prevIndex=0,this._stepping=!1,this._targetIndex=-1,this._stepTimer=null,this._animTimer=null,this._animEndsAt=0}get _animDur(){return Math.max(Math.floor(this.speed*.85),1)}updated(e){super.updated(e),e.has("flaps")&&this._syncIndicesToFlaps(e.get("flaps")),(e.has("value")||e.has("flaps"))&&this._startStepping()}disconnectedCallback(){super.disconnectedCallback(),this._clearTimers()}get currentFlap(){var e;return(e=this.flaps[this._currentIndex])!=null?e:this.flaps[0]}get currentValue(){return this.currentFlap!=null?o.getFlapKey(this.currentFlap):void 0}get isSettled(){return!this._stepping&&this._targetIndex===-1&&this._stepTimer==null&&this._animTimer==null}hasKey(e){return this._findFlapIndex(e)>=0}_startStepping(){if(!this.flaps.length){this._resetForEmptyFlaps();return}const e=this._findFlapIndex(this.value),t=this._isAnimating();if(e===-1){this._targetIndex=-1,t&&this._scheduleAdvanceOrSettle(this._getRemainingAnimationTime());return}if(this._targetIndex=e,this._currentIndex===this._targetIndex){t?this._scheduleAdvanceOrSettle(this._getRemainingAnimationTime()):this._targetIndex=-1;return}t||this._doStep()}_doStep(){if(!this.flaps.length){this._resetForEmptyFlaps();return}const e=this._getNextIndex();this._prevIndex=this._currentIndex,this._currentIndex=e,this._stepping=!0,this._animEndsAt=Date.now()+this._animDur,this._animTimer!=null&&clearTimeout(this._animTimer),this._animTimer=setTimeout(()=>{this._stepping=!1,this._animTimer=null,this._animEndsAt=0},this._animDur);const t=this._currentIndex!==this._targetIndex?this.speed:this._getRemainingAnimationTime();this._scheduleAdvanceOrSettle(t)}_scheduleAdvanceOrSettle(e){this._stepTimer!=null&&clearTimeout(this._stepTimer),this._stepTimer=setTimeout(()=>{if(this._stepTimer=null,this._targetIndex!==-1&&this._currentIndex!==this._targetIndex){this._doStep();return}this._finishSettling()},Math.max(e,0))}_finishSettling(){if(this._stepping){this._scheduleAdvanceOrSettle(this._getRemainingAnimationTime());return}this._targetIndex=-1;const e=this.currentValue;e!=null&&this.dispatchEvent(new CustomEvent("settled",{detail:{value:e},bubbles:!0,composed:!0}))}_findFlapIndex(e){return this.flaps.findIndex(t=>o.getFlapKey(t)===e)}_getNextIndex(){return(this._currentIndex+1)%this.flaps.length}_isAnimating(){return this._stepping||this._stepTimer!=null}_getRemainingAnimationTime(){return this._stepping?Math.max(this._animEndsAt-Date.now(),1):0}_resetForEmptyFlaps(){this._clearTimers(),this._targetIndex=-1,this._currentIndex=0,this._prevIndex=0,this._stepping=!1}_syncIndicesToFlaps(e){var t,r;if(!this.flaps.length){this._resetForEmptyFlaps();return}if(e==null||!e.length){this._currentIndex=0,this._prevIndex=0,this._targetIndex=-1,this._clearTimers(),this._stepping=!1;return}const i=(t=e[this._currentIndex])!=null?t:e[0],a=(r=e[this._prevIndex])!=null?r:i,h=i!=null?o.getFlapKey(i):void 0,d=a!=null?o.getFlapKey(a):h;this._clearTimers(),this._stepping=!1,this._targetIndex=-1;const c=h!=null?this._findFlapIndex(h):-1,m=d!=null?this._findFlapIndex(d):-1;this._currentIndex=c>=0?c:0,this._prevIndex=m>=0?m:this._currentIndex}_clearTimers(){this._stepTimer!=null&&(clearTimeout(this._stepTimer),this._stepTimer=null),this._animTimer!=null&&(clearTimeout(this._animTimer),this._animTimer=null),this._animEndsAt=0}_renderHalf(e,t){var r;switch(e.type){case"char":return n.html`
 					<div
 						class="char-inner"
-						style=${y.styleMap(o(o(o(o(o({},e.color!=null?{color:e.color}:{}),e.bg!=null?{background:e.bg}:{}),e.fontSize!=null?{fontSize:e.fontSize}:{}),e.fontFamily!=null?{fontFamily:e.fontFamily}:{}),e.fontWeight!=null?{fontWeight:e.fontWeight}:{}))}
+						style=${x.styleMap(_(_(_(_(_({},e.color!=null?{color:e.color}:{}),e.bg!=null?{background:e.bg}:{}),e.fontSize!=null?{fontSize:e.fontSize}:{}),e.fontFamily!=null?{fontFamily:e.fontFamily}:{}),e.fontWeight!=null?{fontWeight:e.fontWeight}:{}))}
 					>
 						${e.value}
 					</div>
@@ -13,4 +13,4 @@
 						<div class="half top flipping">${this._renderHalf(r,"top")}</div>
 						<div class="half bottom flipping">${this._renderHalf(t,"bottom")}</div>
 					`:n.nothing}
-		`}}_([u.property({type:String})],a.prototype,"value"),_([u.property({type:Array})],a.prototype,"flaps"),_([u.property({type:Number})],a.prototype,"speed"),_([u.state()],a.prototype,"_currentIndex"),_([u.state()],a.prototype,"_prevIndex"),_([u.state()],a.prototype,"_stepping"),exports.SplitFlapSpoolBase=a;
+		`}}u([p.property({type:String})],l.prototype,"value"),u([p.property({type:Array})],l.prototype,"flaps"),u([p.property({type:Number})],l.prototype,"speed"),u([p.state()],l.prototype,"_currentIndex"),u([p.state()],l.prototype,"_prevIndex"),u([p.state()],l.prototype,"_stepping"),exports.SplitFlapSpoolBase=l;

package/dist/cjs/spools/SplitFlapSpoolMinimal.js

@@ -1,4 +1,4 @@
-"use strict";var e=require("lit"),a=require("lit/decorators.js"),s=require("./SplitFlapSpoolBase.js"),n=(t,l,p,f)=>{for(var o=l,i=t.length-1,r;i>=0;i--)(r=t[i])&&(o=r(o)||o);return o};exports.SplitFlapSpoolMinimal=class extends s.SplitFlapSpoolBase{render(){return e.html`
+"use strict";var e=require("lit"),l=require("lit/decorators.js"),s=require("./SplitFlapSpoolBase.js"),n=(t,a,p,f)=>{for(var o=a,i=t.length-1,r;i>=0;i--)(r=t[i])&&(o=r(o)||o);return o};exports.SplitFlapSpoolMinimal=class extends s.SplitFlapSpoolBase{render(){return e.html`
 			<div class="spool" style="--_anim-dur: ${this._animDur}ms">${this._renderCard()}</div>
 		`}},exports.SplitFlapSpoolMinimal.styles=e.css`
 		:host {
@@ -19,23 +19,23 @@
 			position: absolute;
 			right: 0;
 			left: 0;
-			background: var(--sfb-bg, #111);
+			background: var(--sfb-flap-bg, #111);
 			height: 50%;
 			overflow: hidden;
-			color: var(--sfb-color, #f5f0e0);
+			color: var(--sfb-flap-color, #f5f0e0);
 		}
 
 		.half.top {
 			top: 0;
 			border-bottom: 1px solid var(--sfb-fold-color, #0a0a0a);
-			border-top-right-radius: var(--sfb-spool-radius, 4px);
-			border-top-left-radius: var(--sfb-spool-radius, 4px);
+			border-top-right-radius: var(--sfb-flap-radius, 4px);
+			border-top-left-radius: var(--sfb-flap-radius, 4px);
 		}
 
 		.half.bottom {
 			bottom: 0;
-			border-bottom-right-radius: var(--sfb-spool-radius, 4px);
-			border-bottom-left-radius: var(--sfb-spool-radius, 4px);
+			border-bottom-right-radius: var(--sfb-flap-radius, 4px);
+			border-bottom-left-radius: var(--sfb-flap-radius, 4px);
 		}
 
 		.half.flipping {
@@ -118,4 +118,4 @@
 			inset: 0;
 			overflow: hidden;
 		}
-	`,exports.SplitFlapSpoolMinimal=n([a.customElement("split-flap-spool-minimal")],exports.SplitFlapSpoolMinimal);
+	`,exports.SplitFlapSpoolMinimal=n([l.customElement("split-flap-spool-minimal")],exports.SplitFlapSpoolMinimal);

package/dist/cjs/spools/SplitFlapSpoolRealistic.js

@@ -1,17 +1,21 @@
-"use strict";var f=require("lit"),p=require("lit/decorators.js"),d=require("lit/directives/ref.js"),u=require("lit/directives/style-map.js");require("./presets.js");var m=require("../lib/spool-layout.js"),v=require("./SplitFlapSpoolBase.js"),b=Object.defineProperty,x=Object.getOwnPropertyDescriptor,h=(n,e,a,t)=>{for(var r=t>1?void 0:t?x(e,a):e,s=n.length-1,i;s>=0;s--)(i=n[s])&&(r=(t?i(e,a,r):i(r))||r);return t&&r&&b(e,a,r),r},g=(n,e,a)=>new Promise((t,r)=>{var s=l=>{try{o(a.next(l))}catch(c){r(c)}},i=l=>{try{o(a.throw(l))}catch(c){r(c)}},o=l=>l.done?t(l.value):Promise.resolve(l.value).then(s,i);o((a=a.apply(n,e)).next())});exports.SplitFlapSpoolRealistic=class extends v.SplitFlapSpoolBase{constructor(){super(...arguments),this.visibleSideCount=-1,this._slotRef=d.createRef(),this._wrapResetTimer=null,this._skipNextIndexAnimation=!1}firstUpdated(){this._syncSlotState()}updated(e){var a;const t=this._currentIndex,r=this._prevIndex;if(super.updated(e),e.has("flaps")){this._clearWrapTimer();const s=this._currentIndex!==t||this._prevIndex!==r;this._skipNextIndexAnimation=s,this._syncSlotState()}if(e.has("_currentIndex")){if(this._skipNextIndexAnimation){this._skipNextIndexAnimation=!1,this._syncSlotState();return}const s=(a=e.get("_currentIndex"))!=null?a:0;this._animateStep(s,this._currentIndex)}}disconnectedCallback(){super.disconnectedCallback(),this._clearWrapTimer()}_clearWrapTimer(){this._wrapResetTimer!=null&&(clearTimeout(this._wrapResetTimer),this._wrapResetTimer=null)}_syncSlotState(){const e=this._slotRef.value;e!=null&&(e.style.setProperty("--current-character-index",String(this._currentIndex)),e.style.setProperty("--_flip-dur","0ms"))}_animateStep(e,a){return g(this,null,function*(){const t=this._slotRef.value;if(t==null)return;this._clearWrapTimer(),t.style.setProperty("--_flip-dur","0ms"),t.style.setProperty("--current-character-index",String(e)),yield new Promise(i=>requestAnimationFrame(()=>{requestAnimationFrame(()=>i())}));const r=e===this.flaps.length-1&&a===0,s=r?this.flaps.length:a;t.style.setProperty("--_flip-dur",`${this._animDur}ms`),t.style.setProperty("--current-character-index",String(s)),r&&(this._wrapResetTimer=setTimeout(()=>{t.style.setProperty("--_flip-dur","0ms"),t.style.setProperty("--current-character-index","0"),this._wrapResetTimer=null,this.requestUpdate()},this._animDur))})}_getRenderCenter(){return this.flaps.length>0&&this._prevIndex===this.flaps.length-1&&this._currentIndex===0&&(this._stepping||this._wrapResetTimer!=null)?this.flaps.length:this._currentIndex}render(){const e=this._getRenderCenter(),a=m.getRenderedFlaps(this.flaps,this._currentIndex,{visibleSideCount:this.visibleSideCount,renderCenter:e});return f.html`
+"use strict";var p=require("lit"),f=require("lit/decorators.js"),d=require("lit/directives/ref.js"),u=require("lit/directives/style-map.js");require("./presets.js");var v=require("../lib/spool-layout.js"),m=require("./SplitFlapSpoolBase.js"),b=Object.defineProperty,g=Object.getOwnPropertyDescriptor,h=(n,e,r,t)=>{for(var a=t>1?void 0:t?g(e,r):e,s=n.length-1,i;s>=0;s--)(i=n[s])&&(a=(t?i(e,r,a):i(a))||a);return t&&a&&b(e,r,a),a},x=(n,e,r)=>new Promise((t,a)=>{var s=l=>{try{o(r.next(l))}catch(c){a(c)}},i=l=>{try{o(r.throw(l))}catch(c){a(c)}},o=l=>l.done?t(l.value):Promise.resolve(l.value).then(s,i);o((r=r.apply(n,e)).next())});exports.SplitFlapSpoolRealistic=class extends m.SplitFlapSpoolBase{constructor(){super(...arguments),this.visibleSideCount=-1,this._slotRef=d.createRef(),this._wrapResetTimer=null,this._skipNextIndexAnimation=!1}firstUpdated(){this._syncSlotState()}updated(e){var r;const t=this._currentIndex,a=this._prevIndex;super.updated(e),e.has("flaps")&&this._handleFlapChange(t,a),e.has("_currentIndex")&&this._handleIndexChange((r=e.get("_currentIndex"))!=null?r:0)}disconnectedCallback(){super.disconnectedCallback(),this._clearWrapTimer()}_clearWrapTimer(){this._wrapResetTimer!=null&&(clearTimeout(this._wrapResetTimer),this._wrapResetTimer=null)}_syncSlotState(){const e=this._slotRef.value;e!=null&&(e.style.setProperty("--current-character-index",String(this._currentIndex)),e.style.setProperty("--_flip-dur","0ms"))}_handleFlapChange(e,r){this._clearWrapTimer();const t=this._currentIndex!==e||this._prevIndex!==r;this._skipNextIndexAnimation=t,this._syncSlotState()}_handleIndexChange(e){if(this._skipNextIndexAnimation){this._skipNextIndexAnimation=!1,this._syncSlotState();return}this._animateStep(e,this._currentIndex)}_waitForPositionReset(){return new Promise(e=>{requestAnimationFrame(()=>{requestAnimationFrame(()=>e())})})}_isWrapForwardStep(e,r){return e===this.flaps.length-1&&r===0}_animateStep(e,r){return x(this,null,function*(){const t=this._slotRef.value;if(t==null)return;this._clearWrapTimer(),t.style.setProperty("--_flip-dur","0ms"),t.style.setProperty("--current-character-index",String(e)),yield this._waitForPositionReset();const a=this._isWrapForwardStep(e,r),s=a?this.flaps.length:r;t.style.setProperty("--_flip-dur",`${this._animDur}ms`),t.style.setProperty("--current-character-index",String(s)),a&&(this._wrapResetTimer=setTimeout(()=>{t.style.setProperty("--_flip-dur","0ms"),t.style.setProperty("--current-character-index","0"),this._wrapResetTimer=null,this.requestUpdate()},this._animDur))})}_getRenderCenter(){return this.flaps.length>0&&this._prevIndex===this.flaps.length-1&&this._currentIndex===0&&(this._stepping||this._wrapResetTimer!=null)?this.flaps.length:this._currentIndex}render(){const e=this._getRenderCenter(),r=v.getRenderedFlaps(this.flaps,this._currentIndex,{visibleSideCount:this.visibleSideCount,renderCenter:e});return p.html`
 			<div
 				${d.ref(this._slotRef)}
 				class="slot"
 				style=${u.styleMap({"--total":String(this.flaps.length)})}
 			>
-				${a.map(({flap:t,actualIndex:r,renderedIndex:s})=>f.html`
-						<div class="character" style="--index: ${s}" data-index=${r}>
+				${r.map(({flap:t,actualIndex:a,renderedIndex:s})=>{const i=this.flaps.length>2&&this.flaps.length%2===0&&Math.abs(s-e)===this.flaps.length/2;return p.html`
+						<div
+							class="character ${i?"is-background":""}"
+							style="--index: ${s}"
+							data-index=${a}
+						>
 							<div class="flap">${this._renderHalf(t,"top")}</div>
 							<div class="flap" aria-hidden="true">${this._renderHalf(t,"bottom")}</div>
 						</div>
-					`)}
+					`})}
 			</div>
-		`}},exports.SplitFlapSpoolRealistic.styles=f.css`
+		`}},exports.SplitFlapSpoolRealistic.styles=p.css`
 		:host {
 			display: inline-block;
 			perspective: var(--sfb-perspective, 400px);
@@ -69,6 +73,11 @@
 			pointer-events: none;
 		}
 
+		.character.is-background {
+			opacity: 0;
+			z-index: 0;
+		}
+
 		.flap {
 			position: relative;
 			transform-style: preserve-3d;
@@ -76,13 +85,16 @@
 			transition: transform var(--_flip-dur, 0ms) cubic-bezier(0.25, 0, 0.5, 1);
 			will-change: transform;
 			box-sizing: border-box;
+			box-shadow:
+				0 2px 6px rgba(0, 0, 0, 0.7),
+				inset 0 1px 0 rgba(255, 255, 255, 0.04);
 			border: 1px solid var(--sfb-flap-border, #2a2a2a);
-			border-radius: var(--sfb-spool-radius, 3px);
-			background: var(--sfb-bg, #111);
+			border-radius: var(--sfb-flap-radius, 5px);
+			background: var(--sfb-flap-bg, #111);
 			width: var(--sfb-spool-width, 1em);
 			height: calc(var(--sfb-spool-height, 2em) / 2);
 			overflow: hidden;
-			color: var(--sfb-color, #f5f0e0);
+			color: var(--sfb-flap-color, #f5f0e0);
 			line-height: 1;
 		}
 
@@ -141,4 +153,4 @@
 			justify-content: center;
 			align-items: center;
 		}
-	`,h([p.property({type:Number})],exports.SplitFlapSpoolRealistic.prototype,"visibleSideCount",2),exports.SplitFlapSpoolRealistic=h([p.customElement("split-flap-spool-realistic")],exports.SplitFlapSpoolRealistic);
+	`,h([f.property({type:Number})],exports.SplitFlapSpoolRealistic.prototype,"visibleSideCount",2),exports.SplitFlapSpoolRealistic=h([f.customElement("split-flap-spool-realistic")],exports.SplitFlapSpoolRealistic);

package/dist/esm/SplitFlapBoard.js

@@ -1,18 +1,56 @@
-import{css as h,LitElement as u,html as d}from"lit";import{property as a,customElement as v}from"lit/decorators.js";import"./spools/SplitFlapSpool.js";var m=Object.defineProperty,c=Object.getOwnPropertyDescriptor,p=(t,e,l,s)=>{for(var r=s>1?void 0:s?c(e,l):e,i=t.length-1,n;i>=0;i--)(n=t[i])&&(r=(s?n(e,l,r):n(r))||r);return s&&r&&m(e,l,r),r};let o=class extends u{constructor(){super(...arguments),this.spools=[],this.grid=[],this.speed=60,this.variant="minimal",this.visibleSideCount=-1,this._pendingSettle=!1}updated(t){var e,l;super.updated(t);const s=(l=(e=this.spools[0])==null?void 0:e.length)!=null?l:0;this.style.gridTemplateColumns=s>0?`repeat(${s}, auto)`:"",(t.has("spools")||t.has("grid"))&&(this._pendingSettle=!0,Promise.resolve().then(()=>this._checkAllSettled()))}_getSpoolEls(){return Array.from(this.renderRoot.querySelectorAll("split-flap-spool"))}_checkAllSettled(){if(!this._pendingSettle)return;const t=this._getSpoolEls();t.length!==0&&t.every(e=>e.isSettled)&&(this._pendingSettle=!1,this._dispatchBoardSettled(t))}_dispatchBoardSettled(t){let e=0;const l=this.spools.map(s=>s.map(()=>{var r,i;return(i=(r=t[e++])==null?void 0:r.currentValue)!=null?i:""}));this.dispatchEvent(new CustomEvent("board-settled",{detail:{grid:l},bubbles:!0,composed:!0}))}render(){return d`
-			${this.spools.flatMap((t,e)=>t.map((l,s)=>{var r,i;return d`
-						<split-flap-spool
-							.flaps=${l}
-							.value=${(i=(r=this.grid[e])==null?void 0:r[s])!=null?i:""}
-							.speed=${this.speed}
-							.variant=${this.variant}
-							.visibleSideCount=${this.visibleSideCount}
-							@settled=${()=>this._checkAllSettled()}
-						></split-flap-spool>
-					`}))}
-		`}};o.styles=h`
+import{css as b,LitElement as u,html as n}from"lit";import{property as d,customElement as c}from"lit/decorators.js";var h=Object.defineProperty,g=Object.getOwnPropertyDescriptor,a=(t,e,p,s)=>{for(var r=s>1?void 0:s?g(e,p):e,i=t.length-1,l;i>=0;i--)(l=t[i])&&(r=(s?l(e,p,r):l(r))||r);return s&&r&&h(e,p,r),r};let o=class extends u{constructor(){super(...arguments),this.spools=[],this.grid=[],this.speed=60,this.variant="minimal",this.visibleSideCount=-1,this._pendingSettle=!1}updated(t){super.updated(t),(t.has("spools")||t.has("grid"))&&(this._pendingSettle=!0,queueMicrotask(()=>this._checkAllSettled()))}_getSpoolEls(){return Array.from(this.renderRoot.querySelectorAll("split-flap-spool"))}_checkAllSettled(){if(!this._pendingSettle)return;const t=this._getSpoolEls();if(t.length===0){this._pendingSettle=!1,this._dispatchBoardSettled([]);return}t.every(e=>e.isSettled)&&(this._pendingSettle=!1,this._dispatchBoardSettled(t))}_dispatchBoardSettled(t){const e=this._getCurrentGrid(t);this.dispatchEvent(new CustomEvent("board-settled",{detail:{grid:e},bubbles:!0,composed:!0}))}_getCurrentGrid(t){let e=0;return this.spools.map(p=>p.map(()=>{var s,r;const i=(r=(s=t[e])==null?void 0:s.currentValue)!=null?r:"";return e+=1,i}))}render(){return n`
+			${this.spools.map((t,e)=>n`
+					<div class="board-row" style="z-index: ${e+1}">
+						${t.map((p,s)=>{var r,i;return n`
+								<split-flap-spool
+									.flaps=${p}
+									.value=${(i=(r=this.grid[e])==null?void 0:r[s])!=null?i:""}
+									.speed=${this.speed}
+									.variant=${this.variant}
+									.visibleSideCount=${this.visibleSideCount}
+									@settled=${()=>this._checkAllSettled()}
+								></split-flap-spool>
+							`})}
+					</div>
+				`)}
+		`}};o.styles=b`
 		:host {
-			display: inline-grid;
-			gap: var(--sfb-gap, 2px);
+			display: inline-flex;
+			position: relative;
+			flex-direction: column;
 			box-sizing: border-box;
+			box-shadow:
+				inset 14px 0 18px rgba(0, 0, 0, 0.55),
+				inset -14px 0 18px rgba(0, 0, 0, 0.55);
+			border-radius: var(--sfb-board-radius, 8px);
+			background: var(--sfb-board-bg, #1c1c1c);
+			padding: var(--sfb-board-padding, 10px);
 		}
-	`,p([a({type:Array})],o.prototype,"spools",2),p([a({type:Array})],o.prototype,"grid",2),p([a({type:Number})],o.prototype,"speed",2),p([a({type:String})],o.prototype,"variant",2),p([a({type:Number})],o.prototype,"visibleSideCount",2),o=p([v("split-flap-board")],o);export{o as SplitFlapBoard};
+
+		:host::after {
+			position: absolute;
+			z-index: 10000;
+			inset: 0;
+			border: 10px solid var(--sfb-board-bg, #1c1c1c);
+			border-radius: var(--sfb-board-radius, 8px);
+			pointer-events: none;
+			content: '';
+		}
+
+		.board-row {
+			display: flex;
+			position: relative;
+			gap: var(--sfb-gap, 3px);
+			padding-block: 12px;
+		}
+
+		.board-row::before {
+			position: absolute;
+			z-index: 1;
+			inset: 0 0 auto 0;
+			box-shadow: 0 3px 10px rgba(0, 0, 0, 0.65);
+			background: var(--sfb-board-bg, #1c1c1c);
+			height: 10px;
+			content: '';
+		}
+	`,a([d({type:Array})],o.prototype,"spools",2),a([d({type:Array})],o.prototype,"grid",2),a([d({type:Number})],o.prototype,"speed",2),a([d({type:String})],o.prototype,"variant",2),a([d({type:Number})],o.prototype,"visibleSideCount",2),o=a([c("split-flap-board")],o);export{o as SplitFlapBoard};

package/dist/esm/lib/board.js

@@ -1 +1 @@
-import{charSpool as f}from"../spools/presets.js";var b=Object.defineProperty,y=Object.getOwnPropertySymbols,g=Object.prototype.hasOwnProperty,v=Object.prototype.propertyIsEnumerable,h=(t,r,e)=>r in t?b(t,r,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[r]=e,i=(t,r)=>{for(var e in r||(r={}))g.call(r,e)&&h(t,e,r[e]);if(y)for(var e of y(r))v.call(r,e)&&h(t,e,r[e]);return t};function d(t,r,e){const o=t.length>0&&Array.isArray(t[0])?t:Array.from({length:r},()=>t);return Array.from({length:e},()=>Array.from({length:r},(l,a)=>{var n;return(n=o[a%o.length])!=null?n:f}))}function A(t,r){const e=[],o=[];for(const l of t){const a=typeof l=="object",n=a?l.text:l,p=a?l.bg:void 0,s=a?l.color:void 0,u=n.toUpperCase().padEnd(r," ").slice(0,r).split("");if(p!=null||s!=null){const m=u.map(()=>f.map(c=>c.type!=="char"?c:i(i(i({},c),p!=null?{bg:p}:{}),s!=null?{color:s}:{})));e.push(m)}else e.push(Array.from({length:r},()=>f));o.push(u)}return{spools:e,grid:o}}export{A as fromLines,d as spoolGrid};
+import{charSpool as u}from"../spools/presets.js";var y=Object.defineProperty,f=Object.getOwnPropertySymbols,b=Object.prototype.hasOwnProperty,g=Object.prototype.propertyIsEnumerable,i=(r,t,e)=>t in r?y(r,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):r[t]=e,c=(r,t)=>{for(var e in t||(t={}))b.call(t,e)&&i(r,e,t[e]);if(f)for(var e of f(t))g.call(t,e)&&i(r,e,t[e]);return r};function m(r,t,e){const o=v(r)?r:[r];return Array.from({length:e},()=>Array.from({length:t},(a,n)=>{var l;return(l=o[n%o.length])!=null?l:u}))}function h(r,t){const e=[],o=[];for(const a of r){const n=d(a),l=A(n.text,t).split(""),s=n.bg!=null||n.color!=null;e.push(s?j(t,n):p(u,t)),o.push(l)}return{spools:e,grid:o}}function v(r){return Array.isArray(r[0])}function p(r,t){return Array.from({length:t},()=>r)}function O(r,t){return r.type!=="char"?r:c(c(c({},r),t.bg!=null?{bg:t.bg}:{}),t.color!=null?{color:t.color}:{})}function d(r){return typeof r=="string"?{text:r}:r}function A(r,t){return r.toUpperCase().padEnd(t," ").slice(0,t)}function j(r,t){const e=u.map(o=>O(o,t));return p(e,r)}export{h as fromLines,m as spoolGrid};

package/dist/esm/lib/flap.js

@@ -1 +1 @@
-function r(e){if(e.key!=null)return e.key;switch(e.type){case"char":case"color":return e.value;case"image":return e.src;case"custom":return e.key}}export{r as getFlapKey};
+function t(r){var e,c;switch(r.type){case"char":case"color":return(e=r.key)!=null?e:r.value;case"image":return(c=r.key)!=null?c:r.src;case"custom":return r.key}}export{t as getFlapKey};

package/dist/esm/spools/SplitFlapSpool.js

@@ -1,4 +1,4 @@
-import{css as m,LitElement as h,html as u}from"lit";import{property as o,customElement as c}from"lit/decorators.js";import{charSpool as d}from"./presets.js";import{getFlapKey as v}from"../lib/flap.js";import"./SplitFlapSpoolMinimal.js";import"./SplitFlapSpoolRealistic.js";var f=Object.defineProperty,y=Object.getOwnPropertyDescriptor,p=(e,t,s,r)=>{for(var i=r>1?void 0:r?y(t,s):t,a=e.length-1,n;a>=0;a--)(n=e[a])&&(i=(r?n(t,s,i):n(i))||i);return r&&i&&f(t,s,i),i};let l=class extends h{constructor(){super(...arguments),this.variant="minimal",this.value=" ",this.flaps=d,this.speed=60,this.visibleSideCount=-1}get currentValue(){var e,t;return(t=(e=this._getActiveSpool())==null?void 0:e.currentValue)!=null?t:this.flaps[0]!=null?v(this.flaps[0]):void 0}get isSettled(){var e,t;return(t=(e=this._getActiveSpool())==null?void 0:e.isSettled)!=null?t:!0}hasKey(e){var t,s;return(s=(t=this._getActiveSpool())==null?void 0:t.hasKey(e))!=null?s:this.flaps.some(r=>v(r)===e)}_getActiveSpool(){return this.renderRoot.querySelector("split-flap-spool-minimal, split-flap-spool-realistic")}render(){return this.variant==="realistic"?u`
+import{css as h,LitElement as m,html as u}from"lit";import{property as o,customElement as d}from"lit/decorators.js";import{charSpool as c}from"./presets.js";import{getFlapKey as v}from"../lib/flap.js";import"./SplitFlapSpoolMinimal.js";import"./SplitFlapSpoolRealistic.js";var f=Object.defineProperty,y=Object.getOwnPropertyDescriptor,p=(e,t,i,s)=>{for(var r=s>1?void 0:s?y(t,i):t,a=e.length-1,n;a>=0;a--)(n=e[a])&&(r=(s?n(t,i,r):n(r))||r);return s&&r&&f(t,i,r),r};let l=class extends m{constructor(){super(...arguments),this.variant="minimal",this.value=" ",this.flaps=c,this.speed=60,this.visibleSideCount=-1}get currentValue(){var e,t;return(t=(e=this._getActiveSpool())==null?void 0:e.currentValue)!=null?t:this.flaps[0]!=null?v(this.flaps[0]):void 0}get isSettled(){var e,t;return(t=(e=this._getActiveSpool())==null?void 0:e.isSettled)!=null?t:!0}hasKey(e){var t,i;return(i=(t=this._getActiveSpool())==null?void 0:t.hasKey(e))!=null?i:this.flaps.some(s=>v(s)===e)}_getActiveSpool(){return this.renderRoot.querySelector("split-flap-spool-minimal, split-flap-spool-realistic")}_renderVariant(){return this.variant==="realistic"?u`
 				<split-flap-spool-realistic
 					.value=${this.value}
 					.flaps=${this.flaps}
@@ -11,8 +11,8 @@ import{css as m,LitElement as h,html as u}from"lit";import{property as o,customE
 				.flaps=${this.flaps}
 				.speed=${this.speed}
 			></split-flap-spool-minimal>
-		`}};l.styles=m`
+		`}render(){return this._renderVariant()}};l.styles=h`
 		:host {
 			display: contents;
 		}
-	`,p([o({type:String})],l.prototype,"variant",2),p([o({type:String})],l.prototype,"value",2),p([o({type:Array})],l.prototype,"flaps",2),p([o({type:Number})],l.prototype,"speed",2),p([o({type:Number})],l.prototype,"visibleSideCount",2),l=p([c("split-flap-spool")],l);export{l as SplitFlapSpool};
+	`,p([o({type:String})],l.prototype,"variant",2),p([o({type:String})],l.prototype,"value",2),p([o({type:Array})],l.prototype,"flaps",2),p([o({type:Number})],l.prototype,"speed",2),p([o({type:Number})],l.prototype,"visibleSideCount",2),l=p([d("split-flap-spool")],l);export{l as SplitFlapSpool};

package/dist/esm/spools/SplitFlapSpoolBase.js

@@ -1,16 +1,16 @@
-import{LitElement as y,html as p,nothing as v}from"lit";import{property as d,state as m}from"lit/decorators.js";import{styleMap as b}from"lit/directives/style-map.js";import{charSpool as F}from"./presets.js";import{getFlapKey as n}from"../lib/flap.js";var x=Object.defineProperty,I=Object.getOwnPropertySymbols,S=Object.prototype.hasOwnProperty,A=Object.prototype.propertyIsEnumerable,T=(s,t,e)=>t in s?x(s,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):s[t]=e,o=(s,t)=>{for(var e in t||(t={}))S.call(t,e)&&T(s,e,t[e]);if(I)for(var e of I(t))A.call(t,e)&&T(s,e,t[e]);return s},u=(s,t,e,r)=>{for(var i=void 0,a=s.length-1,h;a>=0;a--)(h=s[a])&&(i=h(t,e,i)||i);return i&&x(t,e,i),i};class l extends y{constructor(){super(...arguments),this.value=" ",this.flaps=F,this.speed=60,this._currentIndex=0,this._prevIndex=0,this._stepping=!1,this._targetIndex=-1,this._stepTimer=null,this._animTimer=null,this._animEndsAt=0}get _animDur(){return Math.max(Math.floor(this.speed*.85),1)}updated(t){super.updated(t),t.has("flaps")&&this._syncIndicesToFlaps(t.get("flaps")),(t.has("value")||t.has("flaps"))&&this._startStepping()}disconnectedCallback(){super.disconnectedCallback(),this._clearTimers()}get currentFlap(){var t;return(t=this.flaps[this._currentIndex])!=null?t:this.flaps[0]}get currentValue(){return this.currentFlap!=null?n(this.currentFlap):void 0}get isSettled(){return!this._stepping&&this._targetIndex===-1&&this._stepTimer==null&&this._animTimer==null}hasKey(t){return this.flaps.some(e=>n(e)===t)}_startStepping(){if(!this.flaps.length){this._resetForEmptyFlaps();return}const t=this.flaps.findIndex(r=>n(r)===this.value),e=this._stepping||this._stepTimer!=null;if(t===-1){this._targetIndex=-1,e&&this._scheduleAdvanceOrSettle(this._getRemainingAnimTime());return}if(this._targetIndex=t,this._currentIndex===this._targetIndex){e?this._scheduleAdvanceOrSettle(this._getRemainingAnimTime()):this._targetIndex=-1;return}e||this._doStep()}_doStep(){if(!this.flaps.length){this._resetForEmptyFlaps();return}const t=(this._currentIndex+1)%this.flaps.length;this._prevIndex=this._currentIndex,this._currentIndex=t,this._stepping=!0,this._animEndsAt=Date.now()+this._animDur,this._animTimer!=null&&clearTimeout(this._animTimer),this._animTimer=setTimeout(()=>{this._stepping=!1,this._animTimer=null,this._animEndsAt=0},this._animDur);const e=this._currentIndex!==this._targetIndex?this.speed:this._getRemainingAnimTime();this._scheduleAdvanceOrSettle(e)}_scheduleAdvanceOrSettle(t){this._stepTimer!=null&&clearTimeout(this._stepTimer),this._stepTimer=setTimeout(()=>{if(this._stepTimer=null,this._targetIndex!==-1&&this._currentIndex!==this._targetIndex){this._doStep();return}this._finishSettling()},Math.max(t,0))}_finishSettling(){if(this._stepping){this._scheduleAdvanceOrSettle(this._getRemainingAnimTime());return}this._targetIndex=-1;const t=this.currentValue;t!=null&&this.dispatchEvent(new CustomEvent("settled",{detail:{value:t},bubbles:!0,composed:!0}))}_getRemainingAnimTime(){return this._stepping?Math.max(this._animEndsAt-Date.now(),1):0}_resetForEmptyFlaps(){this._clearTimers(),this._targetIndex=-1,this._currentIndex=0,this._prevIndex=0,this._stepping=!1}_syncIndicesToFlaps(t){var e,r;if(!this.flaps.length){this._resetForEmptyFlaps();return}if(t==null||!t.length){this._currentIndex=0,this._prevIndex=0,this._targetIndex=-1,this._clearTimers(),this._stepping=!1;return}const i=(e=t[this._currentIndex])!=null?e:t[0],a=(r=t[this._prevIndex])!=null?r:i,h=i!=null?n(i):void 0,c=a!=null?n(a):h;this._clearTimers(),this._stepping=!1,this._targetIndex=-1;const f=h!=null?this.flaps.findIndex(_=>n(_)===h):-1,g=c!=null?this.flaps.findIndex(_=>n(_)===c):-1;this._currentIndex=f>=0?f:0,this._prevIndex=g>=0?g:this._currentIndex}_clearTimers(){this._stepTimer!=null&&(clearTimeout(this._stepTimer),this._stepTimer=null),this._animTimer!=null&&(clearTimeout(this._animTimer),this._animTimer=null),this._animEndsAt=0}_renderHalf(t,e){var r;switch(t.type){case"char":return p`
+import{LitElement as T,html as h,nothing as f}from"lit";import{property as _,state as d}from"lit/decorators.js";import{styleMap as y}from"lit/directives/style-map.js";import{charSpool as F}from"./presets.js";import{getFlapKey as o}from"../lib/flap.js";var v=Object.defineProperty,x=Object.getOwnPropertySymbols,b=Object.prototype.hasOwnProperty,S=Object.prototype.propertyIsEnumerable,I=(s,t,e)=>t in s?v(s,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):s[t]=e,u=(s,t)=>{for(var e in t||(t={}))b.call(t,e)&&I(s,e,t[e]);if(x)for(var e of x(t))S.call(t,e)&&I(s,e,t[e]);return s},p=(s,t,e,n)=>{for(var i=void 0,l=s.length-1,a;l>=0;l--)(a=s[l])&&(i=a(t,e,i)||i);return i&&v(t,e,i),i};class r extends T{constructor(){super(...arguments),this.value=" ",this.flaps=F,this.speed=60,this._currentIndex=0,this._prevIndex=0,this._stepping=!1,this._targetIndex=-1,this._stepTimer=null,this._animTimer=null,this._animEndsAt=0}get _animDur(){return Math.max(Math.floor(this.speed*.85),1)}updated(t){super.updated(t),t.has("flaps")&&this._syncIndicesToFlaps(t.get("flaps")),(t.has("value")||t.has("flaps"))&&this._startStepping()}disconnectedCallback(){super.disconnectedCallback(),this._clearTimers()}get currentFlap(){var t;return(t=this.flaps[this._currentIndex])!=null?t:this.flaps[0]}get currentValue(){return this.currentFlap!=null?o(this.currentFlap):void 0}get isSettled(){return!this._stepping&&this._targetIndex===-1&&this._stepTimer==null&&this._animTimer==null}hasKey(t){return this._findFlapIndex(t)>=0}_startStepping(){if(!this.flaps.length){this._resetForEmptyFlaps();return}const t=this._findFlapIndex(this.value),e=this._isAnimating();if(t===-1){this._targetIndex=-1,e&&this._scheduleAdvanceOrSettle(this._getRemainingAnimationTime());return}if(this._targetIndex=t,this._currentIndex===this._targetIndex){e?this._scheduleAdvanceOrSettle(this._getRemainingAnimationTime()):this._targetIndex=-1;return}e||this._doStep()}_doStep(){if(!this.flaps.length){this._resetForEmptyFlaps();return}const t=this._getNextIndex();this._prevIndex=this._currentIndex,this._currentIndex=t,this._stepping=!0,this._animEndsAt=Date.now()+this._animDur,this._animTimer!=null&&clearTimeout(this._animTimer),this._animTimer=setTimeout(()=>{this._stepping=!1,this._animTimer=null,this._animEndsAt=0},this._animDur);const e=this._currentIndex!==this._targetIndex?this.speed:this._getRemainingAnimationTime();this._scheduleAdvanceOrSettle(e)}_scheduleAdvanceOrSettle(t){this._stepTimer!=null&&clearTimeout(this._stepTimer),this._stepTimer=setTimeout(()=>{if(this._stepTimer=null,this._targetIndex!==-1&&this._currentIndex!==this._targetIndex){this._doStep();return}this._finishSettling()},Math.max(t,0))}_finishSettling(){if(this._stepping){this._scheduleAdvanceOrSettle(this._getRemainingAnimationTime());return}this._targetIndex=-1;const t=this.currentValue;t!=null&&this.dispatchEvent(new CustomEvent("settled",{detail:{value:t},bubbles:!0,composed:!0}))}_findFlapIndex(t){return this.flaps.findIndex(e=>o(e)===t)}_getNextIndex(){return(this._currentIndex+1)%this.flaps.length}_isAnimating(){return this._stepping||this._stepTimer!=null}_getRemainingAnimationTime(){return this._stepping?Math.max(this._animEndsAt-Date.now(),1):0}_resetForEmptyFlaps(){this._clearTimers(),this._targetIndex=-1,this._currentIndex=0,this._prevIndex=0,this._stepping=!1}_syncIndicesToFlaps(t){var e,n;if(!this.flaps.length){this._resetForEmptyFlaps();return}if(t==null||!t.length){this._currentIndex=0,this._prevIndex=0,this._targetIndex=-1,this._clearTimers(),this._stepping=!1;return}const i=(e=t[this._currentIndex])!=null?e:t[0],l=(n=t[this._prevIndex])!=null?n:i,a=i!=null?o(i):void 0,m=l!=null?o(l):a;this._clearTimers(),this._stepping=!1,this._targetIndex=-1;const c=a!=null?this._findFlapIndex(a):-1,g=m!=null?this._findFlapIndex(m):-1;this._currentIndex=c>=0?c:0,this._prevIndex=g>=0?g:this._currentIndex}_clearTimers(){this._stepTimer!=null&&(clearTimeout(this._stepTimer),this._stepTimer=null),this._animTimer!=null&&(clearTimeout(this._animTimer),this._animTimer=null),this._animEndsAt=0}_renderHalf(t,e){var n;switch(t.type){case"char":return h`
 					<div
 						class="char-inner"
-						style=${b(o(o(o(o(o({},t.color!=null?{color:t.color}:{}),t.bg!=null?{background:t.bg}:{}),t.fontSize!=null?{fontSize:t.fontSize}:{}),t.fontFamily!=null?{fontFamily:t.fontFamily}:{}),t.fontWeight!=null?{fontWeight:t.fontWeight}:{}))}
+						style=${y(u(u(u(u(u({},t.color!=null?{color:t.color}:{}),t.bg!=null?{background:t.bg}:{}),t.fontSize!=null?{fontSize:t.fontSize}:{}),t.fontFamily!=null?{fontFamily:t.fontFamily}:{}),t.fontWeight!=null?{fontWeight:t.fontWeight}:{}))}
 					>
 						${t.value}
 					</div>
-				`;case"color":return p`<div class="color-fill" style="background: ${t.value}"></div>`;case"image":return p`<img class="image-fill" src=${t.src} alt=${(r=t.alt)!=null?r:""} />`;case"custom":return p`<div class="custom-fill">${t[e]}</div>`}}_getFlaps(){var t;const e=this.currentFlap;return e==null?null:{current:e,prev:(t=this.flaps[this._prevIndex])!=null?t:e}}_renderCard(){const t=this._getFlaps();if(t==null)return v;const{current:e,prev:r}=t,i=this._stepping?r:e;return p`
+				`;case"color":return h`<div class="color-fill" style="background: ${t.value}"></div>`;case"image":return h`<img class="image-fill" src=${t.src} alt=${(n=t.alt)!=null?n:""} />`;case"custom":return h`<div class="custom-fill">${t[e]}</div>`}}_getFlaps(){var t;const e=this.currentFlap;return e==null?null:{current:e,prev:(t=this.flaps[this._prevIndex])!=null?t:e}}_renderCard(){const t=this._getFlaps();if(t==null)return f;const{current:e,prev:n}=t,i=this._stepping?n:e;return h`
 			<div class="half top">${this._renderHalf(e,"top")}</div>
 			<div class="half bottom">${this._renderHalf(i,"bottom")}</div>
 
-			${this._stepping?p`
-						<div class="half top flipping">${this._renderHalf(r,"top")}</div>
+			${this._stepping?h`
+						<div class="half top flipping">${this._renderHalf(n,"top")}</div>
 						<div class="half bottom flipping">${this._renderHalf(e,"bottom")}</div>
-					`:v}
-		`}}u([d({type:String})],l.prototype,"value"),u([d({type:Array})],l.prototype,"flaps"),u([d({type:Number})],l.prototype,"speed"),u([m()],l.prototype,"_currentIndex"),u([m()],l.prototype,"_prevIndex"),u([m()],l.prototype,"_stepping");export{l as SplitFlapSpoolBase};
+					`:f}
+		`}}p([_({type:String})],r.prototype,"value"),p([_({type:Array})],r.prototype,"flaps"),p([_({type:Number})],r.prototype,"speed"),p([d()],r.prototype,"_currentIndex"),p([d()],r.prototype,"_prevIndex"),p([d()],r.prototype,"_stepping");export{r as SplitFlapSpoolBase};

package/dist/esm/spools/SplitFlapSpoolMinimal.js

@@ -1,4 +1,4 @@
-import{css as l,html as s}from"lit";import{customElement as n}from"lit/decorators.js";import{SplitFlapSpoolBase as f}from"./SplitFlapSpoolBase.js";var p=(i,a,m,d)=>{for(var o=a,r=i.length-1,e;r>=0;r--)(e=i[r])&&(o=e(o)||o);return o};let t=class extends f{render(){return s`
+import{css as l,html as s}from"lit";import{customElement as f}from"lit/decorators.js";import{SplitFlapSpoolBase as n}from"./SplitFlapSpoolBase.js";var p=(i,a,m,d)=>{for(var o=a,r=i.length-1,e;r>=0;r--)(e=i[r])&&(o=e(o)||o);return o};let t=class extends n{render(){return s`
 			<div class="spool" style="--_anim-dur: ${this._animDur}ms">${this._renderCard()}</div>
 		`}};t.styles=l`
 		:host {
@@ -19,23 +19,23 @@ import{css as l,html as s}from"lit";import{customElement as n}from"lit/decorator
 			position: absolute;
 			right: 0;
 			left: 0;
-			background: var(--sfb-bg, #111);
+			background: var(--sfb-flap-bg, #111);
 			height: 50%;
 			overflow: hidden;
-			color: var(--sfb-color, #f5f0e0);
+			color: var(--sfb-flap-color, #f5f0e0);
 		}
 
 		.half.top {
 			top: 0;
 			border-bottom: 1px solid var(--sfb-fold-color, #0a0a0a);
-			border-top-right-radius: var(--sfb-spool-radius, 4px);
-			border-top-left-radius: var(--sfb-spool-radius, 4px);
+			border-top-right-radius: var(--sfb-flap-radius, 4px);
+			border-top-left-radius: var(--sfb-flap-radius, 4px);
 		}
 
 		.half.bottom {
 			bottom: 0;
-			border-bottom-right-radius: var(--sfb-spool-radius, 4px);
-			border-bottom-left-radius: var(--sfb-spool-radius, 4px);
+			border-bottom-right-radius: var(--sfb-flap-radius, 4px);
+			border-bottom-left-radius: var(--sfb-flap-radius, 4px);
 		}
 
 		.half.flipping {
@@ -118,4 +118,4 @@ import{css as l,html as s}from"lit";import{customElement as n}from"lit/decorator
 			inset: 0;
 			overflow: hidden;
 		}
-	`,t=p([n("split-flap-spool-minimal")],t);export{t as SplitFlapSpoolMinimal};
+	`,t=p([f("split-flap-spool-minimal")],t);export{t as SplitFlapSpoolMinimal};

package/dist/esm/spools/SplitFlapSpoolRealistic.js

@@ -1,15 +1,19 @@
-import{css as h,html as p}from"lit";import{property as u,customElement as m}from"lit/decorators.js";import{createRef as v,ref as b}from"lit/directives/ref.js";import{styleMap as x}from"lit/directives/style-map.js";import"./presets.js";import{getRenderedFlaps as g}from"../lib/spool-layout.js";import{SplitFlapSpoolBase as y}from"./SplitFlapSpoolBase.js";var _=Object.defineProperty,w=Object.getOwnPropertyDescriptor,d=(t,a,e,s)=>{for(var r=s>1?void 0:s?w(a,e):a,i=t.length-1,l;i>=0;i--)(l=t[i])&&(r=(s?l(a,e,r):l(r))||r);return s&&r&&_(a,e,r),r},S=(t,a,e)=>new Promise((s,r)=>{var i=n=>{try{c(e.next(n))}catch(f){r(f)}},l=n=>{try{c(e.throw(n))}catch(f){r(f)}},c=n=>n.done?s(n.value):Promise.resolve(n.value).then(i,l);c((e=e.apply(t,a)).next())});let o=class extends y{constructor(){super(...arguments),this.visibleSideCount=-1,this._slotRef=v(),this._wrapResetTimer=null,this._skipNextIndexAnimation=!1}firstUpdated(){this._syncSlotState()}updated(t){var a;const e=this._currentIndex,s=this._prevIndex;if(super.updated(t),t.has("flaps")){this._clearWrapTimer();const r=this._currentIndex!==e||this._prevIndex!==s;this._skipNextIndexAnimation=r,this._syncSlotState()}if(t.has("_currentIndex")){if(this._skipNextIndexAnimation){this._skipNextIndexAnimation=!1,this._syncSlotState();return}const r=(a=t.get("_currentIndex"))!=null?a:0;this._animateStep(r,this._currentIndex)}}disconnectedCallback(){super.disconnectedCallback(),this._clearWrapTimer()}_clearWrapTimer(){this._wrapResetTimer!=null&&(clearTimeout(this._wrapResetTimer),this._wrapResetTimer=null)}_syncSlotState(){const t=this._slotRef.value;t!=null&&(t.style.setProperty("--current-character-index",String(this._currentIndex)),t.style.setProperty("--_flip-dur","0ms"))}_animateStep(t,a){return S(this,null,function*(){const e=this._slotRef.value;if(e==null)return;this._clearWrapTimer(),e.style.setProperty("--_flip-dur","0ms"),e.style.setProperty("--current-character-index",String(t)),yield new Promise(i=>requestAnimationFrame(()=>{requestAnimationFrame(()=>i())}));const s=t===this.flaps.length-1&&a===0,r=s?this.flaps.length:a;e.style.setProperty("--_flip-dur",`${this._animDur}ms`),e.style.setProperty("--current-character-index",String(r)),s&&(this._wrapResetTimer=setTimeout(()=>{e.style.setProperty("--_flip-dur","0ms"),e.style.setProperty("--current-character-index","0"),this._wrapResetTimer=null,this.requestUpdate()},this._animDur))})}_getRenderCenter(){return this.flaps.length>0&&this._prevIndex===this.flaps.length-1&&this._currentIndex===0&&(this._stepping||this._wrapResetTimer!=null)?this.flaps.length:this._currentIndex}render(){const t=this._getRenderCenter(),a=g(this.flaps,this._currentIndex,{visibleSideCount:this.visibleSideCount,renderCenter:t});return p`
+import{css as h,html as p}from"lit";import{property as u,customElement as m}from"lit/decorators.js";import{createRef as v,ref as b}from"lit/directives/ref.js";import{styleMap as g}from"lit/directives/style-map.js";import"./presets.js";import{getRenderedFlaps as x}from"../lib/spool-layout.js";import{SplitFlapSpoolBase as _}from"./SplitFlapSpoolBase.js";var y=Object.defineProperty,w=Object.getOwnPropertyDescriptor,d=(e,r,t,s)=>{for(var a=s>1?void 0:s?w(r,t):r,i=e.length-1,l;i>=0;i--)(l=e[i])&&(a=(s?l(r,t,a):l(a))||a);return s&&a&&y(r,t,a),a},S=(e,r,t)=>new Promise((s,a)=>{var i=n=>{try{c(t.next(n))}catch(f){a(f)}},l=n=>{try{c(t.throw(n))}catch(f){a(f)}},c=n=>n.done?s(n.value):Promise.resolve(n.value).then(i,l);c((t=t.apply(e,r)).next())});let o=class extends _{constructor(){super(...arguments),this.visibleSideCount=-1,this._slotRef=v(),this._wrapResetTimer=null,this._skipNextIndexAnimation=!1}firstUpdated(){this._syncSlotState()}updated(e){var r;const t=this._currentIndex,s=this._prevIndex;super.updated(e),e.has("flaps")&&this._handleFlapChange(t,s),e.has("_currentIndex")&&this._handleIndexChange((r=e.get("_currentIndex"))!=null?r:0)}disconnectedCallback(){super.disconnectedCallback(),this._clearWrapTimer()}_clearWrapTimer(){this._wrapResetTimer!=null&&(clearTimeout(this._wrapResetTimer),this._wrapResetTimer=null)}_syncSlotState(){const e=this._slotRef.value;e!=null&&(e.style.setProperty("--current-character-index",String(this._currentIndex)),e.style.setProperty("--_flip-dur","0ms"))}_handleFlapChange(e,r){this._clearWrapTimer();const t=this._currentIndex!==e||this._prevIndex!==r;this._skipNextIndexAnimation=t,this._syncSlotState()}_handleIndexChange(e){if(this._skipNextIndexAnimation){this._skipNextIndexAnimation=!1,this._syncSlotState();return}this._animateStep(e,this._currentIndex)}_waitForPositionReset(){return new Promise(e=>{requestAnimationFrame(()=>{requestAnimationFrame(()=>e())})})}_isWrapForwardStep(e,r){return e===this.flaps.length-1&&r===0}_animateStep(e,r){return S(this,null,function*(){const t=this._slotRef.value;if(t==null)return;this._clearWrapTimer(),t.style.setProperty("--_flip-dur","0ms"),t.style.setProperty("--current-character-index",String(e)),yield this._waitForPositionReset();const s=this._isWrapForwardStep(e,r),a=s?this.flaps.length:r;t.style.setProperty("--_flip-dur",`${this._animDur}ms`),t.style.setProperty("--current-character-index",String(a)),s&&(this._wrapResetTimer=setTimeout(()=>{t.style.setProperty("--_flip-dur","0ms"),t.style.setProperty("--current-character-index","0"),this._wrapResetTimer=null,this.requestUpdate()},this._animDur))})}_getRenderCenter(){return this.flaps.length>0&&this._prevIndex===this.flaps.length-1&&this._currentIndex===0&&(this._stepping||this._wrapResetTimer!=null)?this.flaps.length:this._currentIndex}render(){const e=this._getRenderCenter(),r=x(this.flaps,this._currentIndex,{visibleSideCount:this.visibleSideCount,renderCenter:e});return p`
 			<div
 				${b(this._slotRef)}
 				class="slot"
-				style=${x({"--total":String(this.flaps.length)})}
+				style=${g({"--total":String(this.flaps.length)})}
 			>
-				${a.map(({flap:e,actualIndex:s,renderedIndex:r})=>p`
-						<div class="character" style="--index: ${r}" data-index=${s}>
-							<div class="flap">${this._renderHalf(e,"top")}</div>
-							<div class="flap" aria-hidden="true">${this._renderHalf(e,"bottom")}</div>
+				${r.map(({flap:t,actualIndex:s,renderedIndex:a})=>{const i=this.flaps.length>2&&this.flaps.length%2===0&&Math.abs(a-e)===this.flaps.length/2;return p`
+						<div
+							class="character ${i?"is-background":""}"
+							style="--index: ${a}"
+							data-index=${s}
+						>
+							<div class="flap">${this._renderHalf(t,"top")}</div>
+							<div class="flap" aria-hidden="true">${this._renderHalf(t,"bottom")}</div>
 						</div>
-					`)}
+					`})}
 			</div>
 		`}};o.styles=h`
 		:host {
@@ -69,6 +73,11 @@ import{css as h,html as p}from"lit";import{property as u,customElement as m}from
 			pointer-events: none;
 		}
 
+		.character.is-background {
+			opacity: 0;
+			z-index: 0;
+		}
+
 		.flap {
 			position: relative;
 			transform-style: preserve-3d;
@@ -76,13 +85,16 @@ import{css as h,html as p}from"lit";import{property as u,customElement as m}from
 			transition: transform var(--_flip-dur, 0ms) cubic-bezier(0.25, 0, 0.5, 1);
 			will-change: transform;
 			box-sizing: border-box;
+			box-shadow:
+				0 2px 6px rgba(0, 0, 0, 0.7),
+				inset 0 1px 0 rgba(255, 255, 255, 0.04);
 			border: 1px solid var(--sfb-flap-border, #2a2a2a);
-			border-radius: var(--sfb-spool-radius, 3px);
-			background: var(--sfb-bg, #111);
+			border-radius: var(--sfb-flap-radius, 5px);
+			background: var(--sfb-flap-bg, #111);
 			width: var(--sfb-spool-width, 1em);
 			height: calc(var(--sfb-spool-height, 2em) / 2);
 			overflow: hidden;
-			color: var(--sfb-color, #f5f0e0);
+			color: var(--sfb-flap-color, #f5f0e0);
 			line-height: 1;
 		}
 

package/dist/types/SplitFlapBoard.d.ts

@@ -1,16 +1,15 @@
 import { LitElement, type TemplateResult } from 'lit';
-import './spools/SplitFlapSpool';
-import type { TSpool } from './types';
+import type { TSplitFlapVariant, TSpool } from './types';
 export declare class SplitFlapBoard extends LitElement {
     static readonly styles: import("lit").CSSResult;
-    /** 2-D grid of spool configs — defines what each position can show. Row-major order. */
+    /** 2-D grid of spool configs; defines what each position can show. Row-major order. */
     spools: TSpool[][];
-    /** 2-D grid of target keys — defines what each position currently shows. Row-major order. */
+    /** 2-D grid of target keys; defines what each position currently shows. Row-major order. */
     grid: string[][];
     /** Flip speed in ms, forwarded to every child spool. */
     speed: number;
     /** Visual variant forwarded to every child spool. */
-    variant: 'minimal' | 'realistic';
+    variant: TSplitFlapVariant;
     /** Number of visible drum sides forwarded to every child spool (-1 = default). */
     visibleSideCount: number;
     /** True while at least one spool is still animating toward its target. */
@@ -19,6 +18,7 @@ export declare class SplitFlapBoard extends LitElement {
     private _getSpoolEls;
     private _checkAllSettled;
     private _dispatchBoardSettled;
+    private _getCurrentGrid;
     render(): TemplateResult;
 }
 declare global {

package/dist/types/lib/board.d.ts

@@ -1,4 +1,4 @@
-import type { TSpool } from '../types';
+import type { TBoardData, TLineInput, TSpool } from '../types';
 /**
  * Fill a uniform 2-D spool grid.
  *
@@ -19,12 +19,4 @@ export declare function spoolGrid(spool: TSpool | TSpool[], cols: number, rows:
  * @param lines - Text lines to display.
  * @param cols  - Board width in columns.
  */
-export declare function fromLines(lines: TLineInput[], cols: number): {
-    spools: TSpool[][];
-    grid: string[][];
-};
-export type TLineInput = string | {
-    text: string;
-    bg?: string;
-    color?: string;
-};
+export declare function fromLines(lines: TLineInput[], cols: number): TBoardData;

package/dist/types/lib/flap.d.ts

@@ -1,3 +1,3 @@
 import type { TFlap } from '../types';
-/** Returns the public key used to address a flap inside a spool. */
+/** Returns the key used to address a flap inside a spool. */
 export declare function getFlapKey(flap: TFlap): string;

package/dist/types/spools/SplitFlapSpool.d.ts

@@ -1,10 +1,10 @@
 import { LitElement, type TemplateResult } from 'lit';
-import type { TSpool } from '../types';
+import type { TSplitFlapVariant, TSpool } from '../types';
 import './SplitFlapSpoolMinimal';
 import './SplitFlapSpoolRealistic';
 export declare class SplitFlapSpool extends LitElement {
     static readonly styles: import("lit").CSSResult;
-    variant: 'minimal' | 'realistic';
+    variant: TSplitFlapVariant;
     value: string;
     flaps: TSpool;
     speed: number;
@@ -16,6 +16,7 @@ export declare class SplitFlapSpool extends LitElement {
     /** Returns true when the given key exists in the loaded flaps. */
     hasKey(value: string): boolean;
     private _getActiveSpool;
+    private _renderVariant;
     render(): TemplateResult;
 }
 declare global {

package/dist/types/spools/SplitFlapSpoolBase.d.ts

@@ -36,13 +36,16 @@ export declare abstract class SplitFlapSpoolBase extends LitElement {
     private _doStep;
     private _scheduleAdvanceOrSettle;
     private _finishSettling;
-    private _getRemainingAnimTime;
+    private _findFlapIndex;
+    private _getNextIndex;
+    private _isAnimating;
+    private _getRemainingAnimationTime;
     private _resetForEmptyFlaps;
     private _syncIndicesToFlaps;
     private _clearTimers;
-    /** Renders the content of one flap half. Expects `.char-inner`, `.color-fill`, `.image-fill`, `.custom-fill` class names in the subclass stylesheet. */
+    /** Renders one flap half. Subclass stylesheets must define `.char-inner`, `.color-fill`, `.image-fill`, `.custom-fill`. */
     protected _renderHalf(flap: TFlap, half: 'top' | 'bottom'): TemplateResult;
-    /** Returns current and previous flap for use in render. Returns null when flaps is empty. */
+    /** Returns current and previous flap for render. Null when flaps is empty. */
     protected _getFlaps(): {
         current: TFlap;
         prev: TFlap;

package/dist/types/spools/SplitFlapSpoolRealistic.d.ts

@@ -24,10 +24,10 @@ export declare class SplitFlapSpoolRealistic extends SplitFlapSpoolBase {
     disconnectedCallback(): void;
     private _clearWrapTimer;
     private _syncSlotState;
-    /**
-     * Snap back to prevIdx (instant), then transition to nextIdx.
-     * For forward-only adjacent steps the drum advances by exactly one --angle.
-     */
+    private _handleFlapChange;
+    private _handleIndexChange;
+    private _waitForPositionReset;
+    private _isWrapForwardStep;
     private _animateStep;
     private _getRenderCenter;
     render(): TemplateResult;

package/dist/types/types.d.ts

@@ -1,5 +1,7 @@
 import type { TemplateResult } from 'lit';
+export type TSplitFlapVariant = 'minimal' | 'realistic';
 export type TSpool = TFlap[];
+export type TGrid = string[][];
 export type TFlap = TFlapChar | TFlapColor | TFlapImage | TFlapCustom;
 export interface TFlapChar {
     type: 'char';
@@ -28,3 +30,19 @@ export interface TFlapCustom {
     top: TemplateResult;
     bottom: TemplateResult;
 }
+export interface TBoardData {
+    spools: TSpool[][];
+    grid: TGrid;
+}
+export interface TLineConfig {
+    text: string;
+    bg?: string;
+    color?: string;
+}
+export type TLineInput = string | TLineConfig;
+export interface TSpoolSettledDetail {
+    value: string;
+}
+export interface TBoardSettledDetail {
+    grid: TGrid;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "split-flap-board",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "private": false,
   "description": "Web component that simulates a split-flap display inspired by airport and train station boards",
   "keywords": [