split-flap-board 0.0.1 → 0.0.3

package/dist/cjs/spools/SplitFlapSpoolRealistic.js

@@ -0,0 +1,144 @@
+"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`
+			<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}>
+							<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`
+		: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;
+		}
+
+		.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;
+			border: 1px solid var(--sfb-flap-border, #2a2a2a);
+			border-radius: var(--sfb-spool-radius, 3px);
+			background: var(--sfb-bg, #111);
+			width: var(--sfb-spool-width, 1em);
+			height: calc(var(--sfb-spool-height, 2em) / 2);
+			overflow: hidden;
+			color: var(--sfb-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;
+		}
+	`,h([p.property({type:Number})],exports.SplitFlapSpoolRealistic.prototype,"visibleSideCount",2),exports.SplitFlapSpoolRealistic=h([p.customElement("split-flap-spool-realistic")],exports.SplitFlapSpoolRealistic);

package/dist/cjs/spools/presets.js

@@ -0,0 +1 @@
+"use strict";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:":"}],o=[{type:"char",value:" "},..."0123456789".split("").map(e=>({type:"char",value:e}))],a=[{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"}];exports.charSpool=l,exports.colorSpool=a,exports.numericSpool=o;

package/dist/esm/SplitFlapBoard.js

@@ -0,0 +1,18 @@
+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`
+		:host {
+			display: inline-grid;
+			gap: var(--sfb-gap, 2px);
+			box-sizing: border-box;
+		}
+	`,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};

package/dist/esm/index.js

@@ -1,5 +1 @@
-function helloWorld() {
-}
-
-export { helloWorld };
-//# sourceMappingURL=index.js.map
+import{fromLines as r,spoolGrid as e}from"./lib/board.js";import{getFlapKey as t}from"./lib/flap.js";import{getMaxVisibleSideCount as a,getRenderedFlaps as S,getSignedCircularOffset as f}from"./lib/spool-layout.js";import{SplitFlapBoard as x}from"./SplitFlapBoard.js";import{charSpool as F,colorSpool as d,numericSpool as n}from"./spools/presets.js";import{SplitFlapSpool as g}from"./spools/SplitFlapSpool.js";import{SplitFlapSpoolBase as B}from"./spools/SplitFlapSpoolBase.js";import{SplitFlapSpoolMinimal as M}from"./spools/SplitFlapSpoolMinimal.js";import{SplitFlapSpoolRealistic as b}from"./spools/SplitFlapSpoolRealistic.js";export{x as SplitFlapBoard,g as SplitFlapSpool,B as SplitFlapSpoolBase,M as SplitFlapSpoolMinimal,b as SplitFlapSpoolRealistic,F as charSpool,d as colorSpool,r as fromLines,t as getFlapKey,a as getMaxVisibleSideCount,S as getRenderedFlaps,f as getSignedCircularOffset,n as numericSpool,e as spoolGrid};

package/dist/esm/lib/board.js

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

package/dist/esm/lib/flap.js

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

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

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

package/dist/esm/spools/SplitFlapSpool.js

@@ -0,0 +1,18 @@
+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`
+				<split-flap-spool-realistic
+					.value=${this.value}
+					.flaps=${this.flaps}
+					.speed=${this.speed}
+					.visibleSideCount=${this.visibleSideCount}
+				></split-flap-spool-realistic>
+			`:u`
+			<split-flap-spool-minimal
+				.value=${this.value}
+				.flaps=${this.flaps}
+				.speed=${this.speed}
+			></split-flap-spool-minimal>
+		`}};l.styles=m`
+		: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};

package/dist/esm/spools/SplitFlapSpoolBase.js

@@ -0,0 +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`
+					<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}:{}))}
+					>
+						${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`
+			<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>
+						<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};

package/dist/esm/spools/SplitFlapSpoolMinimal.js

@@ -0,0 +1,121 @@
+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`
+			<div class="spool" style="--_anim-dur: ${this._animDur}ms">${this._renderCard()}</div>
+		`}};t.styles=l`
+		:host {
+			display: inline-block;
+			font-size: 2rem;
+			font-family: monospace;
+		}
+
+		.spool {
+			position: relative;
+			perspective: 300px;
+			perspective-origin: center center;
+			width: var(--sfb-spool-width, 1.2em);
+			height: var(--sfb-spool-height, 2em);
+		}
+
+		.half {
+			position: absolute;
+			right: 0;
+			left: 0;
+			background: var(--sfb-bg, #111);
+			height: 50%;
+			overflow: hidden;
+			color: var(--sfb-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);
+		}
+
+		.half.bottom {
+			bottom: 0;
+			border-bottom-right-radius: var(--sfb-spool-radius, 4px);
+			border-bottom-left-radius: var(--sfb-spool-radius, 4px);
+		}
+
+		.half.flipping {
+			z-index: 1;
+			backface-visibility: hidden;
+		}
+
+		.half.top.flipping {
+			transform-origin: bottom center;
+			animation: fold-top var(--_anim-dur) linear forwards;
+		}
+
+		.half.bottom.flipping {
+			transform-origin: top center;
+			animation: fold-bottom var(--_anim-dur) linear forwards;
+		}
+
+		@keyframes fold-top {
+			from {
+				transform: rotateX(0deg);
+			}
+			to {
+				transform: rotateX(90deg);
+			}
+		}
+
+		@keyframes fold-bottom {
+			from {
+				transform: rotateX(-90deg);
+			}
+			to {
+				transform: rotateX(0deg);
+			}
+		}
+
+		.char-inner {
+			display: flex;
+			position: absolute;
+			right: 0;
+			left: 0;
+			justify-content: center;
+			align-items: center;
+			height: 200%;
+			font-weight: bold;
+			letter-spacing: 0;
+		}
+
+		.half.top .char-inner {
+			top: 0;
+		}
+
+		.half.bottom .char-inner {
+			bottom: 0;
+		}
+
+		.color-fill {
+			position: absolute;
+			inset: 0;
+		}
+
+		.image-fill {
+			position: absolute;
+			left: 0;
+			width: 100%;
+			height: 200%;
+			object-fit: cover;
+			object-position: center center;
+		}
+
+		.half.top .image-fill {
+			top: 0;
+		}
+
+		.half.bottom .image-fill {
+			bottom: 0;
+		}
+
+		.custom-fill {
+			position: absolute;
+			inset: 0;
+			overflow: hidden;
+		}
+	`,t=p([n("split-flap-spool-minimal")],t);export{t as SplitFlapSpoolMinimal};

package/dist/esm/spools/SplitFlapSpoolRealistic.js

@@ -0,0 +1,144 @@
+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})=>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>
+						</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;
+		}
+
+		.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;
+			border: 1px solid var(--sfb-flap-border, #2a2a2a);
+			border-radius: var(--sfb-spool-radius, 3px);
+			background: var(--sfb-bg, #111);
+			width: var(--sfb-spool-width, 1em);
+			height: calc(var(--sfb-spool-height, 2em) / 2);
+			overflow: hidden;
+			color: var(--sfb-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;
+    }
+}