split-flap-board 0.0.1 → 0.0.4

package/README.md

@@ -1 +1,452 @@
-# Split Flap Board
+<h1 align="center">
+    <img src="https://raw.githubusercontent.com/builder-group/community/develop/packages/split-flap-board/.github/banner.svg" alt="split-flap-board banner">
+</h1>
+
+<p align="left">
+    <a href="https://github.com/builder-group/community/blob/develop/LICENSE">
+        <img src="https://img.shields.io/github/license/builder-group/community.svg?label=license&style=flat&colorA=293140&colorB=FDE200" alt="GitHub License"/>
+    </a>
+    <a href="https://www.npmjs.com/package/split-flap-board">
+        <img src="https://img.shields.io/bundlephobia/minzip/split-flap-board.svg?label=minzipped%20size&style=flat&colorA=293140&colorB=FDE200" alt="NPM bundle minzipped size"/>
+    </a>
+    <a href="https://www.npmjs.com/package/split-flap-board">
+        <img src="https://img.shields.io/npm/dt/split-flap-board.svg?label=downloads&style=flat&colorA=293140&colorB=FDE200" alt="NPM total downloads"/>
+    </a>
+    <a href="https://discord.gg/w4xE3bSjhQ">
+        <img src="https://img.shields.io/discord/795291052897992724.svg?label=&logo=discord&logoColor=000000&color=293140&labelColor=FDE200" alt="Join Discord"/>
+    </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.
+
+## 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 **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 **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.
+
+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.
+
+## Core Concepts
+
+### Flap
+
+A flap is one card on the spool, the atomic unit of content. Four built-in types:
+
+```ts
+// Character (default)
+{ type: 'char'; value: string; color?: string; bg?: string; fontSize?: string; fontFamily?: string; fontWeight?: string }
+
+// Solid color
+{ type: 'color'; value: string }  // any CSS color
+
+// Image
+{ type: 'image'; src: string; alt?: string }
+
+// Custom - top and bottom halves rendered independently (Lit TemplateResult)
+{ 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.
+
+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:
+
+```ts
+const bigSpool = charSpool.map((f) =>
+	f.type === 'char' ? { ...f, fontSize: '3rem', fontWeight: '400' } : f
+);
+spool.flaps = bigSpool;
+```
+
+### Spool
+
+A spool is an ordered array of flaps, the sequence a `<split-flap-spool>` steps through. Define it once, reference it anywhere.
+
+```ts
+type TSpool = TFlap[];
+```
+
+The library ships built-in spools:
+
+```ts
+import { charSpool, numericSpool } from 'split-flap-board';
+
+// charSpool    → [' ', A-Z, 0-9, . - / :]
+// numericSpool → [' ', 0-9]
+```
+
+Custom spools are just arrays:
+
+```ts
+const statusSpool: TSpool = [
+	{ type: 'color', value: '#111', key: 'off' },
+	{ type: 'color', value: '#16a34a', key: 'green' },
+	{ type: 'color', value: '#dc2626', key: 'red' },
+	{ type: 'color', value: '#f59e0b', key: 'yellow' }
+];
+```
+
+You can mix flap types within a spool:
+
+```ts
+const mixedSpool: TSpool = [
+	{ type: 'char', value: ' ' },
+	{ type: 'image', src: '/icons/check.svg', key: 'check' },
+	{ type: 'color', value: '#16a34a', key: 'green' },
+	{ type: 'char', value: '!' }
+];
+```
+
+### 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.
+
+```ts
+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)
+board.spools = spoolGrid([charSpool, charSpool, statusSpool], 3, 2);
+
+// fully custom: build the 2D array directly
+board.spools = [
+	[charSpool, charSpool, statusSpool],
+	[charSpool, charSpool, statusSpool]
+];
+
+// grid: target keys, updated freely at runtime
+board.grid = [
+	['H', 'E', 'green'],
+	['L', 'O', 'red']
+];
+```
+
+Board dimensions are inferred from `spools`.
+
+## Usage
+
+### 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>
+```
+
+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>
+```
+
+```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
+board.grid = [['G', 'O', 'O', 'D', 'B', 'Y', 'E', ' ', ' ', ' ', ' ']];
+```
+
+### Multi-row board
+
+```js
+import { fromLines } from 'split-flap-board';
+
+const { spools, grid } = fromLines(
+	['BA123  LHR  18:30  BOARDING', 'LH456  FRA  19:15  ON TIME ', 'AF789  CDG  19:45  DELAYED '],
+	26
+);
+
+board.spools = spools;
+board.grid = grid;
+```
+
+### Mixed spools per column
+
+```js
+import { charSpool, spoolGrid } from 'split-flap-board';
+
+const statusSpool = [
+	{ type: 'color', value: '#111', key: 'off' },
+	{ type: 'color', value: '#16a34a', key: 'green' },
+	{ type: 'color', value: '#dc2626', key: 'red' }
+];
+
+board.spools = spoolGrid([charSpool, charSpool, charSpool, charSpool, statusSpool], 5, 2);
+
+board.grid = [
+	['G', 'A', 'T', 'E', 'green'],
+	['B', '1', '2', '3', 'red']
+];
+```
+
+### Colored rows
+
+```js
+import { fromLines } from 'split-flap-board';
+
+const { spools, grid } = fromLines(
+	[
+		{ text: 'BA123  LHR  BOARDING', bg: '#16a34a', color: '#fff' },
+		{ text: 'LH456  FRA  ON TIME ' },
+		{ text: 'AF789  CDG  DELAYED ', bg: '#dc2626', color: '#fff' }
+	],
+	26
+);
+
+board.spools = spools;
+board.grid = grid;
+```
+
+### React
+
+```tsx
+import { useEffect, useRef } from 'react';
+import { fromLines } from 'split-flap-board';
+
+declare global {
+	namespace JSX {
+		interface IntrinsicElements {
+			'split-flap-spool': React.HTMLAttributes<HTMLElement> & { value?: string; variant?: string };
+			'split-flap-board': React.HTMLAttributes<HTMLElement>;
+		}
+	}
+}
+
+export function DeparturesBoard() {
+	const ref = useRef<HTMLElement>(null);
+
+	useEffect(() => {
+		if (ref.current == null) return;
+		const { spools, grid } = fromLines(['DEPARTURES'], 10);
+		(ref.current as any).spools = spools;
+		(ref.current as any).grid = grid;
+	}, []);
+
+	return <split-flap-board ref={ref} />;
+}
+```
+
+## API Reference
+
+### `<split-flap-spool>`
+
+| Property           | Type                       | Default     | Description                                                                    |
+| ------------------ | -------------------------- | ----------- | ------------------------------------------------------------------------------ |
+| `variant`          | `'minimal' \| 'realistic'` | `'minimal'` | Which visual variant to render.                                                |
+| `value`            | `string`                   | `' '`       | Target flap key. Steps forward through the flaps until it reaches this key.    |
+| `flaps`            | `TSpool`                   | `charSpool` | The ordered sequence of flaps this spool holds.                                |
+| `speed`            | `number`                   | `60`        | Milliseconds per flap step.                                                    |
+| `visibleSideCount` | `number`                   | `-1`        | Realistic variant only. Limits how many flaps render on each side of the drum. |
+
+#### Variants
+
+| Variant       | Element                        | Description                                                      |
+| ------------- | ------------------------------ | ---------------------------------------------------------------- |
+| `'minimal'`   | `<split-flap-spool-minimal>`   | Clean card renderer that only draws the active flap.             |
+| `'realistic'` | `<split-flap-spool-realistic>` | 3D drum renderer that places multiple flaps around the cylinder. |
+
+The variant elements can also be used directly if you prefer not to use the wrapper.
+
+### `<split-flap-board>`
+
+| 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. |
+| `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.                                                                    |
+| `variant`          | `'minimal' \| 'realistic'` | `'minimal'` | Visual variant forwarded to every child spool.                                                                                |
+| `visibleSideCount` | `number`                   | `-1`        | Forwarded to child spools. Only affects the `realistic` variant.                                                              |
+
+### Events
+
+#### `<split-flap-spool>`
+
+| Event     | Detail              | Description                                                                       |
+| --------- | ------------------- | --------------------------------------------------------------------------------- |
+| `settled` | `{ value: string }` | Fired when the spool becomes idle. `value` is the flap key it actually landed on. |
+
+#### `<split-flap-board>`
+
+| Event           | Detail                 | Description                                                           |
+| --------------- | ---------------------- | --------------------------------------------------------------------- |
+| `board-settled` | `{ grid: string[][] }` | Fired when every rendered spool is idle for the current board inputs. |
+
+```js
+const spool = document.querySelector('split-flap-spool');
+spool.addEventListener('settled', (e) => console.log('landed on', e.detail.value));
+board.addEventListener('board-settled', (e) => console.log('board done', e.detail.grid));
+```
+
+### `spoolGrid(spool, cols, rows)`
+
+```ts
+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
+spoolGrid(charSpool, 10, 3);
+
+// Per-column - pass an array where index = column; shorter arrays repeat
+spoolGrid([charSpool, charSpool, statusSpool], 3, 2);
+```
+
+### `fromLines(lines, cols)`
+
+```ts
+function fromLines(
+	lines: (string | { text: string; bg?: string; color?: string })[],
+	cols: number
+): { 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.
+
+```ts
+const { spools, grid } = fromLines(
+	['HELLO WORLD', { text: 'BOARDING', bg: '#16a34a', color: '#fff' }],
+	11
+);
+
+board.spools = spools;
+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.
+
+```css
+/* 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) */
+split-flap-board {
+	--sfb-flap-bg: #111; /* flap background */
+	--sfb-flap-color: #f5f0e0; /* flap text color */
+	--sfb-flap-radius: 4px; /* corner radius on each flap */
+}
+
+/* Minimal variant */
+split-flap-board {
+	--sfb-spool-width: 1.2em; /* explicit cell width */
+	--sfb-spool-height: 2em; /* explicit cell height */
+	--sfb-fold-color: #0a0a0a; /* center crease color */
+}
+
+/* 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-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 */
+}
+
+/* Per-spool override */
+split-flap-spool.highlight {
+	--sfb-flap-bg: #16a34a;
+	--sfb-flap-color: #fff;
+}
+```
+
+## Behavior
+
+### 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.
+
+### 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.
+
+### 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.
+
+### 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
+
+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
+
+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.
+
+### Forward-Only Stepping
+
+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)
+```
+
+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.
+
+## Resources & References
+
+- [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

@@ -0,0 +1,61 @@
+"use strict";var p=require("lit"),i=require("lit/decorators.js");require("./spools/SplitFlapSpool.js");var n=Object.defineProperty,b=Object.getOwnPropertyDescriptor,l=(d,e,r,s)=>{for(var t=s>1?void 0:s?b(e,r):e,o=d.length-1,a;o>=0;o--)(a=d[o])&&(t=(s?a(e,r,t):a(t))||t);return s&&t&&n(e,r,t),t};exports.SplitFlapBoard=class extends p.LitElement{constructor(){super(...arguments),this.spools=[],this.grid=[],this.speed=60,this.variant="minimal",this.visibleSideCount=-1,this._pendingSettle=!1}updated(e){super.updated(e),(e.has("spools")||e.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 e=this._getSpoolEls();e.length!==0&&e.every(r=>r.isSettled)&&(this._pendingSettle=!1,this._dispatchBoardSettled(e))}_dispatchBoardSettled(e){let r=0;const s=this.spools.map(t=>t.map(()=>{var o,a;return(a=(o=e[r++])==null?void 0:o.currentValue)!=null?a:""}));this.dispatchEvent(new CustomEvent("board-settled",{detail:{grid:s},bubbles:!0,composed:!0}))}render(){return p.html`
+			${this.spools.map((e,r)=>p.html`
+					<div class="board-row" style="z-index: ${r+1}">
+						${e.map((s,t)=>{var o,a;return p.html`
+								<split-flap-spool
+									.flaps=${s}
+									.value=${(a=(o=this.grid[r])==null?void 0:o[t])!=null?a:""}
+									.speed=${this.speed}
+									.variant=${this.variant}
+									.visibleSideCount=${this.visibleSideCount}
+									@settled=${()=>this._checkAllSettled()}
+								></split-flap-spool>
+							`})}
+					</div>
+				`)}
+		`}},exports.SplitFlapBoard.styles=p.css`
+		:host {
+			display: inline-flex;
+			position: relative;
+			flex-direction: column;
+			box-sizing: border-box;
+			/* Inset shadows for side rails; render below all children so frame bars
+			 * appear at the same visual level. */
+			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);
+		}
+
+		/* Absolute overlay so the outer frame ring adds no layout space. */
+		: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: '';
+		}
+
+		/* Frame bar caps the top padding of each row. z-index increases per row in
+		 * render() so each bar sits above the drum content of the row above it. */
+		.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: '';
+		}
+	`,l([i.property({type:Array})],exports.SplitFlapBoard.prototype,"spools",2),l([i.property({type:Array})],exports.SplitFlapBoard.prototype,"grid",2),l([i.property({type:Number})],exports.SplitFlapBoard.prototype,"speed",2),l([i.property({type:String})],exports.SplitFlapBoard.prototype,"variant",2),l([i.property({type:Number})],exports.SplitFlapBoard.prototype,"visibleSideCount",2),exports.SplitFlapBoard=l([i.customElement("split-flap-board")],exports.SplitFlapBoard);

package/dist/cjs/index.js

@@ -1,7 +1 @@
-'use strict';
-
-function helloWorld() {
-}
-
-exports.helloWorld = helloWorld;
-//# sourceMappingURL=index.js.map
+"use strict";var l=require("./lib/board.js"),o=require("./lib/flap.js"),e=require("./lib/spool-layout.js"),i=require("./SplitFlapBoard.js"),r=require("./spools/presets.js"),p=require("./spools/SplitFlapSpool.js"),t=require("./spools/SplitFlapSpoolBase.js"),a=require("./spools/SplitFlapSpoolMinimal.js"),S=require("./spools/SplitFlapSpoolRealistic.js");exports.fromLines=l.fromLines,exports.spoolGrid=l.spoolGrid,exports.getFlapKey=o.getFlapKey,exports.getMaxVisibleSideCount=e.getMaxVisibleSideCount,exports.getRenderedFlaps=e.getRenderedFlaps,exports.getSignedCircularOffset=e.getSignedCircularOffset,Object.defineProperty(exports,"SplitFlapBoard",{enumerable:!0,get:function(){return i.SplitFlapBoard}}),exports.charSpool=r.charSpool,exports.colorSpool=r.colorSpool,exports.numericSpool=r.numericSpool,Object.defineProperty(exports,"SplitFlapSpool",{enumerable:!0,get:function(){return p.SplitFlapSpool}}),exports.SplitFlapSpoolBase=t.SplitFlapSpoolBase,Object.defineProperty(exports,"SplitFlapSpoolMinimal",{enumerable:!0,get:function(){return a.SplitFlapSpoolMinimal}}),Object.defineProperty(exports,"SplitFlapSpoolRealistic",{enumerable:!0,get:function(){return S.SplitFlapSpoolRealistic}});

package/dist/cjs/lib/board.js

@@ -0,0 +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;

package/dist/cjs/lib/flap.js

@@ -0,0 +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;

package/dist/cjs/lib/spool-layout.js

@@ -0,0 +1 @@
+"use strict";function s(n,t,e){if(e<=0)return 0;const a=(n-t+e)%e;if(a===0)return 0;const i=a-e;return Math.abs(i)<=Math.abs(a)?i:a}function u(n,t){const e=Math.floor(n/2);return t==null||t<0?e:Math.min(Math.floor(t),e)}function f(n,t,{visibleSideCount:e,renderCenter:a=t}={}){const i=u(n.length,e);return n.map((r,d)=>{const l=s(d,t,n.length);return{flap:r,actualIndex:d,offset:l,renderedIndex:a+l}}).filter(({offset:r})=>Math.abs(r)<=i).sort((r,d)=>r.renderedIndex-d.renderedIndex).map(({flap:r,actualIndex:d,renderedIndex:l})=>({flap:r,actualIndex:d,renderedIndex:l}))}exports.getMaxVisibleSideCount=u,exports.getRenderedFlaps=f,exports.getSignedCircularOffset=s;

package/dist/cjs/spools/SplitFlapSpool.js

@@ -0,0 +1,18 @@
+"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`
+				<split-flap-spool-realistic
+					.value=${this.value}
+					.flaps=${this.flaps}
+					.speed=${this.speed}
+					.visibleSideCount=${this.visibleSideCount}
+				></split-flap-spool-realistic>
+			`:o.html`
+			<split-flap-spool-minimal
+				.value=${this.value}
+				.flaps=${this.flaps}
+				.speed=${this.speed}
+			></split-flap-spool-minimal>
+		`}},exports.SplitFlapSpool.styles=o.css`
+		:host {
+			display: contents;
+		}
+	`,i([r.property({type:String})],exports.SplitFlapSpool.prototype,"variant",2),i([r.property({type:String})],exports.SplitFlapSpool.prototype,"value",2),i([r.property({type:Array})],exports.SplitFlapSpool.prototype,"flaps",2),i([r.property({type:Number})],exports.SplitFlapSpool.prototype,"speed",2),i([r.property({type:Number})],exports.SplitFlapSpool.prototype,"visibleSideCount",2),exports.SplitFlapSpool=i([r.customElement("split-flap-spool")],exports.SplitFlapSpool);

package/dist/cjs/spools/SplitFlapSpoolBase.js

@@ -0,0 +1,16 @@
+"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`
+					<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}:{}))}
+					>
+						${e.value}
+					</div>
+				`;case"color":return n.html`<div class="color-fill" style="background: ${e.value}"></div>`;case"image":return n.html`<img class="image-fill" src=${e.src} alt=${(r=e.alt)!=null?r:""} />`;case"custom":return n.html`<div class="custom-fill">${e[t]}</div>`}}_getFlaps(){var e;const t=this.currentFlap;return t==null?null:{current:t,prev:(e=this.flaps[this._prevIndex])!=null?e:t}}_renderCard(){const e=this._getFlaps();if(e==null)return n.nothing;const{current:t,prev:r}=e,i=this._stepping?r:t;return n.html`
+			<div class="half top">${this._renderHalf(t,"top")}</div>
+			<div class="half bottom">${this._renderHalf(i,"bottom")}</div>
+
+			${this._stepping?n.html`
+						<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;