split-flap-board 0.0.3 → 0.0.4

package/README.md

@@ -300,7 +300,7 @@ The variant elements can also be used directly if you prefer not to use the wrap
 | ------------------ | -------------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------- |
 | `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.                                                              |
 
@@ -366,12 +366,19 @@ board.grid = grid;
 Set these on the board to theme all spools at once, or override on individual spools via CSS selectors.
 
 ```css
-/* Shared */
+/* Board panel */
 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-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 */
@@ -395,8 +402,8 @@ split-flap-board {
 
 /* Per-spool override */
 split-flap-spool.highlight {
-	--sfb-bg: #16a34a;
-	--sfb-color: #fff;
+	--sfb-flap-bg: #16a34a;
+	--sfb-flap-color: #fff;
 }
 ```
 

package/dist/cjs/SplitFlapBoard.js

@@ -1,18 +1,61 @@
-"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 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-grid;
-			gap: var(--sfb-gap, 2px);
+			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);
 		}
-	`,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);
+
+		/* 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/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,a,t)=>{for(var r=t>1?void 0:t?g(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},x=(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 m.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 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 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=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}>
+				${a.map(({flap:t,actualIndex:r,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=${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`
+		`}},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,61 @@
-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 h,html as n}from"lit";import{property as p,customElement as c}from"lit/decorators.js";import"./spools/SplitFlapSpool.js";var u=Object.defineProperty,v=Object.getOwnPropertyDescriptor,l=(e,r,a,i)=>{for(var t=i>1?void 0:i?v(r,a):r,o=e.length-1,d;o>=0;o--)(d=e[o])&&(t=(i?d(r,a,t):d(t))||t);return i&&t&&u(r,a,t),t};let s=class extends h{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 a=this.spools.map(i=>i.map(()=>{var t,o;return(o=(t=e[r++])==null?void 0:t.currentValue)!=null?o:""}));this.dispatchEvent(new CustomEvent("board-settled",{detail:{grid:a},bubbles:!0,composed:!0}))}render(){return n`
+			${this.spools.map((e,r)=>n`
+					<div class="board-row" style="z-index: ${r+1}">
+						${e.map((a,i)=>{var t,o;return n`
+								<split-flap-spool
+									.flaps=${a}
+									.value=${(o=(t=this.grid[r])==null?void 0:t[i])!=null?o:""}
+									.speed=${this.speed}
+									.variant=${this.variant}
+									.visibleSideCount=${this.visibleSideCount}
+									@settled=${()=>this._checkAllSettled()}
+								></split-flap-spool>
+							`})}
+					</div>
+				`)}
+		`}};s.styles=b`
 		:host {
-			display: inline-grid;
-			gap: var(--sfb-gap, 2px);
+			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);
 		}
-	`,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};
+
+		/* 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([p({type:Array})],s.prototype,"spools",2),l([p({type:Array})],s.prototype,"grid",2),l([p({type:Number})],s.prototype,"speed",2),l([p({type:String})],s.prototype,"variant",2),l([p({type:Number})],s.prototype,"visibleSideCount",2),s=l([c("split-flap-board")],s);export{s as SplitFlapBoard};

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

@@ -4,12 +4,16 @@ import{css as h,html as p}from"lit";import{property as u,customElement as m}from
 				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}>
+				${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 {
@@ -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

@@ -3,9 +3,9 @@ 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. */
+    /** 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;

package/package.json

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