split-flap-board 0.0.1 → 0.0.4

package/dist/esm/spools/SplitFlapSpoolRealistic.js

@@ -0,0 +1,156 @@
+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`
+			<div
+				${b(this._slotRef)}
+				class="slot"
+				style=${x({"--total":String(this.flaps.length)})}
+			>
+				${a.map(({flap:e,actualIndex:s,renderedIndex:r})=>{const i=this.flaps.length>2&&this.flaps.length%2===0&&Math.abs(r-t)===this.flaps.length/2;return p`
+						<div
+							class="character ${i?"is-background":""}"
+							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>
+						</div>
+					`})}
+			</div>
+		`}};o.styles=h`
+		:host {
+			display: inline-block;
+			perspective: var(--sfb-perspective, 400px);
+			font-size: 2rem;
+			font-family: monospace;
+		}
+
+		.slot {
+			display: grid;
+			place-content: center;
+			/* Keep board tilt on the inner slot so the drum stays inside host perspective. */
+			transform: var(--sfb-view-transform, none);
+			transform-style: preserve-3d;
+			transition: transform 0.5s cubic-bezier(0.25, 0, 0.3, 1);
+		}
+
+		/* Derive drum placement and fold angles from the flap offset. */
+		.character {
+			--offset: calc(var(--index) - var(--current-character-index));
+			--abs-offset: max(var(--offset), calc(var(--offset) * -1));
+			--safe-abs-offset: max(var(--abs-offset), 0.001);
+			--direction: calc(var(--offset) / var(--safe-abs-offset));
+			--past: min(0, var(--direction)); /* -1 when behind current, else 0 */
+			--future: max(0, var(--direction)); /* +1 when ahead of current, else 0 */
+			/* Treat exact offsets as booleans so CSS can target the active neighbors. */
+			--is-current: clamp(0, calc(1 - var(--abs-offset) * 1000), 1);
+			--is-previous: clamp(0, calc(1 - max(var(--offset) + 1, (var(--offset) + 1) * -1) * 1000), 1);
+			--is-next: clamp(0, calc(1 - max(var(--offset) - 1, (var(--offset) - 1) * -1) * 1000), 1);
+			/*
+			 * Keep the outer visible odd-count flap inside the silhouette so it does not
+			 * vanish at the drum edge.
+			 */
+			--natural-angle: calc((0.5 / var(--total)) * 1turn);
+			/* Cap the visual step angle for small spools so the gap between flaps stays tight. */
+			--angle: min(var(--natural-angle), var(--sfb-max-step-angle, 1turn));
+			/* Unwrapped drum position; places the fold hinge on the cylinder surface. */
+			--drum-a: calc(var(--abs-offset) * var(--direction) * var(--angle));
+			/* Top-half angle; +0.5turn for past flaps puts them on the drum backface. */
+			--a: calc(var(--abs-offset) * var(--direction) * var(--angle) + var(--past) * 0.5turn);
+			/* Bottom-half angle; +0.5turn for future flaps slides them in from below. */
+			--a2: calc(
+				max(var(--abs-offset) - 1, 0) * var(--direction) * var(--angle) + var(--future) * 0.5turn
+			);
+
+			display: flex;
+			grid-area: 1 / 1;
+			flex-direction: column;
+			gap: var(--sfb-crease, 1px);
+			/* Move the fold line onto the drum surface so translation and fold stay aligned. */
+			transform: translateZ(calc(var(--sfb-drum-radius, 0px) * cos(var(--drum-a))))
+				translateY(calc(var(--sfb-drum-radius, 0px) * sin(var(--drum-a)) * -1));
+			transform-style: preserve-3d;
+			z-index: calc(var(--is-current) * 2 + var(--is-previous) + var(--is-next));
+			transition: transform var(--_flip-dur, 0ms) cubic-bezier(0.25, 0, 0.5, 1);
+			pointer-events: none;
+		}
+
+		.character.is-background {
+			opacity: 0;
+			z-index: 0;
+		}
+
+		.flap {
+			position: relative;
+			transform-style: preserve-3d;
+			backface-visibility: hidden;
+			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-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-flap-color, #f5f0e0);
+			line-height: 1;
+		}
+
+		/* Nudge the front flap forward so the center seam stays stable during the flip. */
+		.flap:first-child {
+			transform: translateZ(calc(var(--is-current) * 0.1px)) rotateX(var(--a));
+			transform-origin: center calc(100% + var(--sfb-crease, 1px) * 0.5);
+		}
+
+		.flap:last-child {
+			transform: translateZ(calc(var(--is-current) * 0.1px)) rotateX(var(--a2));
+			transform-origin: center calc(var(--sfb-crease, 1px) * -0.5);
+		}
+
+		/* Use 200% fills so each half crops the same flap content at the fold. */
+		.char-inner,
+		.image-fill,
+		.custom-fill {
+			position: absolute;
+			left: 0;
+			width: 100%;
+			height: 200%;
+		}
+
+		.flap:first-child .char-inner,
+		.flap:first-child .image-fill,
+		.flap:first-child .custom-fill {
+			top: 0;
+		}
+
+		.flap:last-child .char-inner,
+		.flap:last-child .image-fill,
+		.flap:last-child .custom-fill {
+			bottom: 0;
+		}
+
+		.char-inner {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			font-weight: bold;
+		}
+
+		.color-fill {
+			position: absolute;
+			inset: 0;
+		}
+
+		.image-fill {
+			object-fit: cover;
+			object-position: center center;
+		}
+
+		.custom-fill {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+		}
+	`,d([u({type:Number})],o.prototype,"visibleSideCount",2),o=d([m("split-flap-spool-realistic")],o);export{o as SplitFlapSpoolRealistic};

package/dist/esm/spools/presets.js

@@ -0,0 +1 @@
+const l=[{type:"char",value:" "},..."ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("").map(e=>({type:"char",value:e})),..."0123456789".split("").map(e=>({type:"char",value:e})),{type:"char",value:"."},{type:"char",value:"-"},{type:"char",value:"/"},{type:"char",value:":"}],a=[{type:"char",value:" "},..."0123456789".split("").map(e=>({type:"char",value:e}))],p=[{type:"color",key:"blank",value:"#111111"},{type:"color",key:"red",value:"#ef4444"},{type:"color",key:"orange",value:"#f97316"},{type:"color",key:"yellow",value:"#eab308"},{type:"color",key:"green",value:"#22c55e"},{type:"color",key:"blue",value:"#3b82f6"},{type:"color",key:"purple",value:"#8b5cf6"},{type:"color",key:"pink",value:"#ec4899"}];export{l as charSpool,p as colorSpool,a as numericSpool};

package/dist/types/SplitFlapBoard.d.ts

@@ -0,0 +1,28 @@
+import { LitElement, type TemplateResult } from 'lit';
+import './spools/SplitFlapSpool';
+import type { 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. */
+    spools: TSpool[][];
+    /** 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';
+    /** 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. */
+    private _pendingSettle;
+    updated(changed: Map<string, unknown>): void;
+    private _getSpoolEls;
+    private _checkAllSettled;
+    private _dispatchBoardSettled;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'split-flap-board': SplitFlapBoard;
+    }
+}

package/dist/types/index.d.ts

@@ -1,2 +1,4 @@
-export declare function helloWorld(): void;
-//# sourceMappingURL=index.d.ts.map
+export * from './lib';
+export * from './SplitFlapBoard';
+export * from './spools';
+export * from './types';

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

@@ -0,0 +1,30 @@
+import type { TSpool } from '../types';
+/**
+ * Fill a uniform 2-D spool grid.
+ *
+ * Pass a single `TSpool` to use the same flap set for every cell, or a `TSpool[]`
+ * (one spool per column, cycled) to vary the flap set by column.
+ *
+ * @param spool - Single spool or one spool per column.
+ * @param cols  - Number of columns.
+ * @param rows  - Number of rows.
+ */
+export declare function spoolGrid(spool: TSpool | TSpool[], cols: number, rows: number): TSpool[][];
+/**
+ * Convert lines of text into a `{ spools, grid }` pair ready for `<split-flap-board>`.
+ *
+ * Each line can be a plain string or `{ text, bg?, color? }`. Text is uppercased
+ * and padded/truncated to `cols` characters to match the default `charSpool` key set.
+ *
+ * @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;
+};

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

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

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

@@ -0,0 +1,3 @@
+export * from './board';
+export * from './flap';
+export * from './spool-layout';

package/dist/types/lib/spool-layout.d.ts

@@ -0,0 +1,16 @@
+import type { TFlap } from '../types';
+/** One flap instance prepared for rendering around the realistic drum. */
+export interface TRenderedFlap {
+    flap: TFlap;
+    actualIndex: number;
+    renderedIndex: number;
+}
+/** Returns the shortest signed distance between two indices on a circular spool. */
+export declare function getSignedCircularOffset(index: number, currentIndex: number, total: number): number;
+/** Clamps visible side count to the maximum non-overlapping half of the drum. */
+export declare function getMaxVisibleSideCount(total: number, visibleSideCount?: number): number;
+/** Returns the subset of flaps that should be rendered around the current center. */
+export declare function getRenderedFlaps(flaps: TFlap[], currentIndex: number, { visibleSideCount, renderCenter }?: {
+    visibleSideCount?: number;
+    renderCenter?: number;
+}): TRenderedFlap[];

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

@@ -0,0 +1,25 @@
+import { LitElement, type TemplateResult } from 'lit';
+import type { TSpool } from '../types';
+import './SplitFlapSpoolMinimal';
+import './SplitFlapSpoolRealistic';
+export declare class SplitFlapSpool extends LitElement {
+    static readonly styles: import("lit").CSSResult;
+    variant: 'minimal' | 'realistic';
+    value: string;
+    flaps: TSpool;
+    speed: number;
+    visibleSideCount: number;
+    /** Key currently shown by the active variant; falls back to the first flap key before the variant mounts. */
+    get currentValue(): string | undefined;
+    /** True when the active variant is idle with no pending target. */
+    get isSettled(): boolean;
+    /** Returns true when the given key exists in the loaded flaps. */
+    hasKey(value: string): boolean;
+    private _getActiveSpool;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'split-flap-spool': SplitFlapSpool;
+    }
+}

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

@@ -0,0 +1,52 @@
+import { LitElement, nothing, type TemplateResult } from 'lit';
+import type { TFlap, TSpool } from '../types';
+/**
+ * Base class for all spool variants. Contains stepping logic and HTML helpers,
+ * but leaves styling and element registration to subclasses.
+ *
+ * Extend this to build a custom spool variant:
+ *   export class MySpool extends SplitFlapSpoolBase {
+ *     static readonly styles = css`...`;
+ *     override render() { ... }
+ *   }
+ */
+export declare abstract class SplitFlapSpoolBase extends LitElement {
+    value: string;
+    flaps: TSpool;
+    speed: number;
+    protected _currentIndex: number;
+    protected _prevIndex: number;
+    protected _stepping: boolean;
+    private _targetIndex;
+    private _stepTimer;
+    private _animTimer;
+    private _animEndsAt;
+    protected get _animDur(): number;
+    updated(changed: Map<string, unknown>): void;
+    disconnectedCallback(): void;
+    /** The flap currently shown; falls back to index 0 when out of range. */
+    get currentFlap(): TFlap | undefined;
+    /** Key of the currently shown flap, or undefined when flaps is empty. */
+    get currentValue(): string | undefined;
+    /** True when the spool is idle: no animation running and no pending target. */
+    get isSettled(): boolean;
+    /** Returns true when the given key exists in the currently loaded flaps. */
+    hasKey(value: string): boolean;
+    private _startStepping;
+    private _doStep;
+    private _scheduleAdvanceOrSettle;
+    private _finishSettling;
+    private _getRemainingAnimTime;
+    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. */
+    protected _renderHalf(flap: TFlap, half: 'top' | 'bottom'): TemplateResult;
+    /** Returns current and previous flap for use in render. Returns null when flaps is empty. */
+    protected _getFlaps(): {
+        current: TFlap;
+        prev: TFlap;
+    } | null;
+    /** Renders the two card halves. Wrap this in a `.spool` with `--_anim-dur` set. */
+    protected _renderCard(): TemplateResult | typeof nothing;
+}

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

@@ -0,0 +1,11 @@
+import { type TemplateResult } from 'lit';
+import { SplitFlapSpoolBase } from './SplitFlapSpoolBase';
+export declare class SplitFlapSpoolMinimal extends SplitFlapSpoolBase {
+    static readonly styles: import("lit").CSSResult;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'split-flap-spool-minimal': SplitFlapSpoolMinimal;
+    }
+}

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

@@ -0,0 +1,39 @@
+import { type TemplateResult } from 'lit';
+import { SplitFlapSpoolBase } from './SplitFlapSpoolBase';
+/**
+ * Realistic split-flap spool using a 3D drum.
+ *
+ * Each flap keeps its own top and bottom half, while the hinge is positioned
+ * around a cylinder so the drum reads in perspective when the view is tilted.
+ *
+ * CSS approach adapted from Emil Kowalski's split-flap implementation.
+ */
+export declare class SplitFlapSpoolRealistic extends SplitFlapSpoolBase {
+    /**
+     * Limits how many flaps are rendered on each side of the drum.
+     * Negative values use the full visible half. This property is ignored by
+     * the `minimal` variant because it only renders the active card.
+     */
+    visibleSideCount: number;
+    private readonly _slotRef;
+    private _wrapResetTimer;
+    private _skipNextIndexAnimation;
+    static readonly styles: import("lit").CSSResult;
+    firstUpdated(): void;
+    updated(changed: Map<string, unknown>): void;
+    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 _animateStep;
+    private _getRenderCenter;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'split-flap-spool-realistic': SplitFlapSpoolRealistic;
+    }
+}

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

@@ -0,0 +1,5 @@
+export * from './presets';
+export * from './SplitFlapSpool';
+export * from './SplitFlapSpoolBase';
+export * from './SplitFlapSpoolMinimal';
+export * from './SplitFlapSpoolRealistic';

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

@@ -0,0 +1,4 @@
+import type { TSpool } from '../types';
+export declare const charSpool: TSpool;
+export declare const numericSpool: TSpool;
+export declare const colorSpool: TSpool;

package/dist/types/types.d.ts

@@ -0,0 +1,30 @@
+import type { TemplateResult } from 'lit';
+export type TSpool = TFlap[];
+export type TFlap = TFlapChar | TFlapColor | TFlapImage | TFlapCustom;
+export interface TFlapChar {
+    type: 'char';
+    key?: string;
+    value: string;
+    color?: string;
+    bg?: string;
+    fontSize?: string;
+    fontFamily?: string;
+    fontWeight?: string;
+}
+export interface TFlapColor {
+    type: 'color';
+    key?: string;
+    value: string;
+}
+export interface TFlapImage {
+    type: 'image';
+    key?: string;
+    src: string;
+    alt?: string;
+}
+export interface TFlapCustom {
+    type: 'custom';
+    key: string;
+    top: TemplateResult;
+    bottom: TemplateResult;
+}

package/package.json

@@ -1,9 +1,15 @@
 {
   "name": "split-flap-board",
-  "version": "0.0.1",
+  "version": "0.0.4",
   "private": false,
-  "description": "",
-  "keywords": [],
+  "description": "Web component that simulates a split-flap display inspired by airport and train station boards",
+  "keywords": [
+    "split-flap",
+    "solari-board",
+    "web-component",
+    "lit",
+    "display-board"
+  ],
   "homepage": "https://builder.group/?utm_source=package-json",
   "bugs": {
     "url": "https://github.com/builder-group/community/issues"
@@ -22,6 +28,9 @@
     "dist",
     "README.md"
   ],
+  "dependencies": {
+    "lit": "^3.3.0"
+  },
   "devDependencies": {
     "@types/node": "^25.2.3",
     "@blgc/config": "0.0.40",
@@ -40,7 +49,7 @@
     "lint": "eslint . --fix",
     "publish:patch": "pnpm build:prod && pnpm version patch && pnpm publish --no-git-checks --access=public",
     "size": "size-limit --why",
-    "start:dev": "tsc -w",
+    "start:dev": "vite --config ./dev/vite.config.mjs",
     "test": "vitest run",
     "update:latest": "pnpm update --latest"
   }

package/dist/cjs/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../src/index.ts"],"sourcesContent":["export function helloWorld() {}\n"],"names":[],"mappings":";;AACO,SAAS,UAAU,GAAG;AAC7B;;;;"}

package/dist/esm/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../src/index.ts"],"sourcesContent":["export function helloWorld() {}\n"],"names":[],"mappings":"AACO,SAAS,UAAU,GAAG;AAC7B;;;;"}

package/dist/types/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,wBAAgB,UAAU,SAAK"}