@mhmo91/schmancy 0.9.28 → 0.10.2

package/dist/tree.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-CncqDLb2.cjs`);const e=require(`./tailwind.mixin-DRI1oTYQ.cjs`),t=require(`./decorate-F9CuyeHg.cjs`);require(`./mixins.cjs`);let n=require(`rxjs`),r=require(`lit/decorators.js`),i=require(`lit`);var a=class extends e.t(i.css`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-CncqDLb2.cjs`);const e=require(`./mixins-De3xfjrm.cjs`),t=require(`./decorate-DpFmy0nm.cjs`);let n=require(`rxjs`),r=require(`lit/decorators.js`),i=require(`lit`);var a=class extends e.s{constructor(...e){super(...e),this.open=!1,this._a11yId=`schmancy-tree-${Math.random().toString(36).slice(2,10)}`,this._internals=(()=>{try{return this.attachInternals()}catch{return}})()}static{this.styles=[i.css`
 	:host {
 		display: block;
 		position: relative;
@@ -11,7 +11,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./ch
 	::slotted([slot='root'] + *) {
 		margin-top: 0.5rem;
 	}
-`){constructor(...e){super(...e),this.open=!1,this._a11yId=`schmancy-tree-${Math.random().toString(36).slice(2,10)}`,this._internals=(()=>{try{return this.attachInternals()}catch{return}})()}get _contentId(){return`${this._a11yId}-content`}updated(e){super.updated?.(e),e.has(`open`)&&(this.open?this._internals?.states.add(`open`):this._internals?.states.delete(`open`))}firstUpdated(){this.open||(this.defaultSlot.hidden=!0),(0,n.merge)((0,n.fromEvent)(this.toggler,`click`).pipe((0,n.takeUntil)(this.disconnecting),(0,n.tap)(e=>{e.preventDefault(),e.stopPropagation(),this.dispatchEvent(new CustomEvent(`toggle`,{bubbles:!1,composed:!0}))})),(0,n.fromEvent)(this.chevron,`click`)).pipe((0,n.switchMap)(()=>{let e=this.open?180:0,t=this.open?0:180,r=this.chevron.animate([{transform:`rotate(${e}deg)`},{transform:`rotate(${t}deg)`}],{duration:150,easing:`ease-in`,fill:`forwards`});this.open||(this.defaultSlot.hidden=!1);let i=+!!this.open,a=+!this.open,o=this.defaultSlot.animate([{opacity:i},{opacity:a}],{duration:150,easing:`ease-out`,fill:`forwards`});return o.onfinish=()=>{this.open?this.defaultSlot.hidden=!0:(this.defaultSlot.style.height=`auto`,this.defaultSlot.style.opacity=`1`)},(0,n.zip)((0,n.fromEvent)(r,`finish`),(0,n.fromEvent)(o,`finish`)).pipe((0,n.takeUntil)(this.disconnecting))}),(0,n.tap)(()=>{this.open=!this.open}),(0,n.takeUntil)(this.disconnecting)).subscribe()}render(){return i.html`
+`]}get _contentId(){return`${this._a11yId}-content`}updated(e){super.updated?.(e),e.has(`open`)&&(this.open?this._internals?.states.add(`open`):this._internals?.states.delete(`open`))}firstUpdated(){this.open||(this.defaultSlot.hidden=!0),(0,n.merge)((0,n.fromEvent)(this.toggler,`click`).pipe((0,n.takeUntil)(this.disconnecting),(0,n.tap)(e=>{e.preventDefault(),e.stopPropagation(),this.dispatchEvent(new CustomEvent(`toggle`,{bubbles:!1,composed:!0}))})),(0,n.fromEvent)(this.chevron,`click`)).pipe((0,n.switchMap)(()=>{let e=this.open?180:0,t=this.open?0:180,r=this.chevron.animate([{transform:`rotate(${e}deg)`},{transform:`rotate(${t}deg)`}],{duration:150,easing:`ease-in`,fill:`forwards`});this.open||(this.defaultSlot.hidden=!1);let i=+!!this.open,a=+!this.open,o=this.defaultSlot.animate([{opacity:i},{opacity:a}],{duration:150,easing:`ease-out`,fill:`forwards`});return o.onfinish=()=>{this.open?this.defaultSlot.hidden=!0:(this.defaultSlot.style.height=`auto`,this.defaultSlot.style.opacity=`1`)},(0,n.zip)((0,n.fromEvent)(r,`finish`),(0,n.fromEvent)(o,`finish`)).pipe((0,n.takeUntil)(this.disconnecting))}),(0,n.tap)(()=>{this.open=!this.open}),(0,n.takeUntil)(this.disconnecting)).subscribe()}render(){return i.html`
 			<div class="flex content-center items-center justify-between">
 				<!-- Root toggler content -->
 				<slot id="toggler" name="root"></slot>

package/dist/tree.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tree.cjs","names":[],"sources":["../src/tree/tree.ts"],"sourcesContent":["import { TailwindElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { fromEvent, merge, switchMap, takeUntil, tap, zip } from 'rxjs'\n\n/**\n * Expandable tree node — a recursive disclosure widget. One root slot, one default slot for child nodes. Each node can itself contain schmancy-tree children.\n *\n * @element schmancy-tree\n * @summary Use for hierarchical navigation / file-explorer layouts. Each level is a schmancy-tree with a `root` slot (the parent label) and default slot (the children, which may be more schmancy-trees).\n * @example\n * <schmancy-tree>\n *   <schmancy-list-item slot=\"root\">src/</schmancy-list-item>\n *   <schmancy-tree>\n *     <schmancy-list-item slot=\"root\">components/</schmancy-list-item>\n *     <schmancy-list-item>button.ts</schmancy-list-item>\n *   </schmancy-tree>\n * </schmancy-tree>\n * @platform details toggle - Recursive `<details>`-like disclosure. Degrades to a plain nested list if the tag never registers — loses expand/collapse but stays navigable.\n * @slot root - The root element of the tree\n * @slot - The children of the tree\n * @fires toggle - When the root toggler or chevron is clicked. Fires before the open state flips; the host's `open` property reflects the new state on the next animation frame.\n */\n@customElement('schmancy-tree')\nexport class SchmancyTree extends TailwindElement(css`\n\t:host {\n\t\tdisplay: block;\n\t\tposition: relative;\n\t\tbackground-color: initial;\n\t}\n\t::slotted([slot='root']) {\n\t\twidth: 100%;\n\t\ttext-align: left;\n\t}\n\t::slotted([slot='root'] + *) {\n\t\tmargin-top: 0.5rem;\n\t}\n`) {\n\t/**\n\t * Whether the tree’s children are visible\n\t */\n\t@property({ type: Boolean }) open = false\n\n\t@query('#toggler') toggler!: HTMLSlotElement\n\t@query('slot:not([name=\"root\"])') defaultSlot!: HTMLSlotElement\n\n\t// Since it's actually a <schmancy-button>, use HTMLElement or a custom type\n\t@query('#chevron') chevron!: HTMLElement\n\n\tprivate readonly _a11yId = `schmancy-tree-${Math.random().toString(36).slice(2, 10)}`\n\tprivate get _contentId() { return `${this._a11yId}-content` }\n\n\t/** ElementInternals — broadcasts `:state(open)` for consumer CSS. */\n\tprivate readonly _internals: ElementInternals | undefined = (() => {\n\t\ttry { return this.attachInternals() } catch { return undefined }\n\t})()\n\n\tupdated(changed: Map<string, unknown>) {\n\t\tsuper.updated?.(changed)\n\t\tif (changed.has('open')) {\n\t\t\tif (this.open) this._internals?.states.add('open')\n\t\t\telse this._internals?.states.delete('open')\n\t\t}\n\t}\n\n\tfirstUpdated() {\n\t\t// Hide or show the slot initially based on `open`\n\t\tif (!this.open) {\n\t\t\tthis.defaultSlot.hidden = true\n\t\t}\n\n\t\t// Root toggler\n\t\tconst toggleClick$ = fromEvent<MouseEvent>(this.toggler, 'click').pipe(\n\t\t\ttakeUntil(this.disconnecting),\n\t\t\ttap(e => {\n\t\t\t\te.preventDefault()\n\t\t\t\te.stopPropagation()\n\t\t\t\tthis.dispatchEvent(new CustomEvent('toggle', { bubbles: false, composed: true }))\n\t\t\t}),\n\t\t)\n\n\t\t// Chevron (the schmancy-button) click\n\t\tconst chevronClick$ = fromEvent<MouseEvent>(this.chevron, 'click')\n\n\t\tmerge(toggleClick$, chevronClick$)\n\t\t\t.pipe(\n\t\t\t\tswitchMap(() => {\n\t\t\t\t\t// 1. Animate the chevron rotation\n\t\t\t\t\t//    If `open` is true, rotate from 180 -> 0; if false, from 0 -> 180\n\t\t\t\t\tconst fromDeg = this.open ? 180 : 0\n\t\t\t\t\tconst toDeg = this.open ? 0 : 180\n\t\t\t\t\tconst chevronAnimation = this.chevron.animate(\n\t\t\t\t\t\t[{ transform: `rotate(${fromDeg}deg)` }, { transform: `rotate(${toDeg}deg)` }],\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tduration: 150,\n\t\t\t\t\t\t\teasing: 'ease-in',\n\t\t\t\t\t\t\tfill: 'forwards',\n\t\t\t\t\t\t},\n\t\t\t\t\t)\n\n\t\t\t\t\t// 2. Animate the slot’s height + opacity\n\t\t\t\t\tif (!this.open) {\n\t\t\t\t\t\t// We are about to open, so remove `hidden` to measure scrollHeight\n\t\t\t\t\t\tthis.defaultSlot.hidden = false\n\t\t\t\t\t}\n\n\t\t\t\t\tconst fromOpacity = this.open ? 1 : 0\n\t\t\t\t\tconst toOpacity = this.open ? 0 : 1\n\n\t\t\t\t\tconst slotAnimation = this.defaultSlot.animate([{ opacity: fromOpacity }, { opacity: toOpacity }], {\n\t\t\t\t\t\tduration: 150,\n\t\t\t\t\t\teasing: 'ease-out',\n\t\t\t\t\t\tfill: 'forwards',\n\t\t\t\t\t})\n\n\t\t\t\t\t// Hide the slot if we just closed it\n\t\t\t\t\tslotAnimation.onfinish = () => {\n\t\t\t\t\t\tif (this.open) {\n\t\t\t\t\t\t\tthis.defaultSlot.hidden = true\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tthis.defaultSlot.style.height = 'auto'\n\t\t\t\t\t\t\tthis.defaultSlot.style.opacity = '1'\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t// Return an Observable that completes when both animations finish\n\t\t\t\t\treturn zip(fromEvent(chevronAnimation, 'finish'), fromEvent(slotAnimation, 'finish')).pipe(\n\t\t\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t\t\t)\n\t\t\t\t}),\n\t\t\t\ttap(() => {\n\t\t\t\t\t// Flip the open state\n\t\t\t\t\tthis.open = !this.open\n\t\t\t\t}),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe()\n\t}\n\n\trender() {\n\t\treturn html`\n\t\t\t<div class=\"flex content-center items-center justify-between\">\n\t\t\t\t<!-- Root toggler content -->\n\t\t\t\t<slot id=\"toggler\" name=\"root\"></slot>\n\n\t\t\t\t<!-- The chevron or arrow symbol -->\n\t\t\t\t<!-- Stop propagation on the schmancy-button itself just to avoid double triggers -->\n\t\t\t\t<schmancy-button\n\t\t\t\t\tslot=\"trailing\"\n\t\t\t\t\tid=\"chevron\"\n\t\t\t\t\taria-expanded=${this.open ? 'true' : 'false'}\n\t\t\t\t\taria-controls=${this._contentId}\n\t\t\t\t\taria-label=${this.open ? 'Collapse' : 'Expand'}\n\t\t\t\t\t@click=${(e: Event) => e.stopPropagation()}\n\t\t\t\t>\n\t\t\t\t\t⌅\n\t\t\t\t</schmancy-button>\n\t\t\t</div>\n\n\t\t\t<!-- The default slot: tree children -->\n\t\t\t<slot id=${this._contentId}></slot>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-tree': SchmancyTree\n\t}\n}\n"],"mappings":"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"}
+{"version":3,"file":"tree.cjs","names":[],"sources":["../src/tree/tree.ts"],"sourcesContent":["import { SchmancyElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { fromEvent, merge, switchMap, takeUntil, tap, zip } from 'rxjs'\n\n/**\n * @element schmancy-tree\n * @slot root - The root element of the tree\n * @slot - The children of the tree\n */\n@customElement('schmancy-tree')\nexport class SchmancyTree extends SchmancyElement {\n\tstatic styles = [css`\n\t:host {\n\t\tdisplay: block;\n\t\tposition: relative;\n\t\tbackground-color: initial;\n\t}\n\t::slotted([slot='root']) {\n\t\twidth: 100%;\n\t\ttext-align: left;\n\t}\n\t::slotted([slot='root'] + *) {\n\t\tmargin-top: 0.5rem;\n\t}\n`];\n\t/**\n\t * Whether the tree’s children are visible\n\t */\n\t@property({ type: Boolean }) open = false\n\n\t@query('#toggler') toggler!: HTMLSlotElement\n\t@query('slot:not([name=\"root\"])') defaultSlot!: HTMLSlotElement\n\n\t// Since it's actually a <schmancy-button>, use HTMLElement or a custom type\n\t@query('#chevron') chevron!: HTMLElement\n\n\tprivate readonly _a11yId = `schmancy-tree-${Math.random().toString(36).slice(2, 10)}`\n\tprivate get _contentId() { return `${this._a11yId}-content` }\n\n\t/** ElementInternals — broadcasts `:state(open)` for consumer CSS. */\n\tprivate readonly _internals: ElementInternals | undefined = (() => {\n\t\ttry { return this.attachInternals() } catch { return undefined }\n\t})()\n\n\tupdated(changed: Map<string, unknown>) {\n\t\tsuper.updated?.(changed)\n\t\tif (changed.has('open')) {\n\t\t\tif (this.open) this._internals?.states.add('open')\n\t\t\telse this._internals?.states.delete('open')\n\t\t}\n\t}\n\n\tfirstUpdated() {\n\t\t// Hide or show the slot initially based on `open`\n\t\tif (!this.open) {\n\t\t\tthis.defaultSlot.hidden = true\n\t\t}\n\n\t\t// Root toggler\n\t\tconst toggleClick$ = fromEvent<MouseEvent>(this.toggler, 'click').pipe(\n\t\t\ttakeUntil(this.disconnecting),\n\t\t\ttap(e => {\n\t\t\t\te.preventDefault()\n\t\t\t\te.stopPropagation()\n\t\t\t\tthis.dispatchEvent(new CustomEvent('toggle', { bubbles: false, composed: true }))\n\t\t\t}),\n\t\t)\n\n\t\t// Chevron (the schmancy-button) click\n\t\tconst chevronClick$ = fromEvent<MouseEvent>(this.chevron, 'click')\n\n\t\tmerge(toggleClick$, chevronClick$)\n\t\t\t.pipe(\n\t\t\t\tswitchMap(() => {\n\t\t\t\t\t// 1. Animate the chevron rotation\n\t\t\t\t\t//    If `open` is true, rotate from 180 -> 0; if false, from 0 -> 180\n\t\t\t\t\tconst fromDeg = this.open ? 180 : 0\n\t\t\t\t\tconst toDeg = this.open ? 0 : 180\n\t\t\t\t\tconst chevronAnimation = this.chevron.animate(\n\t\t\t\t\t\t[{ transform: `rotate(${fromDeg}deg)` }, { transform: `rotate(${toDeg}deg)` }],\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tduration: 150,\n\t\t\t\t\t\t\teasing: 'ease-in',\n\t\t\t\t\t\t\tfill: 'forwards',\n\t\t\t\t\t\t},\n\t\t\t\t\t)\n\n\t\t\t\t\t// 2. Animate the slot’s height + opacity\n\t\t\t\t\tif (!this.open) {\n\t\t\t\t\t\t// We are about to open, so remove `hidden` to measure scrollHeight\n\t\t\t\t\t\tthis.defaultSlot.hidden = false\n\t\t\t\t\t}\n\n\t\t\t\t\tconst fromOpacity = this.open ? 1 : 0\n\t\t\t\t\tconst toOpacity = this.open ? 0 : 1\n\n\t\t\t\t\tconst slotAnimation = this.defaultSlot.animate([{ opacity: fromOpacity }, { opacity: toOpacity }], {\n\t\t\t\t\t\tduration: 150,\n\t\t\t\t\t\teasing: 'ease-out',\n\t\t\t\t\t\tfill: 'forwards',\n\t\t\t\t\t})\n\n\t\t\t\t\t// Hide the slot if we just closed it\n\t\t\t\t\tslotAnimation.onfinish = () => {\n\t\t\t\t\t\tif (this.open) {\n\t\t\t\t\t\t\tthis.defaultSlot.hidden = true\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tthis.defaultSlot.style.height = 'auto'\n\t\t\t\t\t\t\tthis.defaultSlot.style.opacity = '1'\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t// Return an Observable that completes when both animations finish\n\t\t\t\t\treturn zip(fromEvent(chevronAnimation, 'finish'), fromEvent(slotAnimation, 'finish')).pipe(\n\t\t\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t\t\t)\n\t\t\t\t}),\n\t\t\t\ttap(() => {\n\t\t\t\t\t// Flip the open state\n\t\t\t\t\tthis.open = !this.open\n\t\t\t\t}),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe()\n\t}\n\n\trender() {\n\t\treturn html`\n\t\t\t<div class=\"flex content-center items-center justify-between\">\n\t\t\t\t<!-- Root toggler content -->\n\t\t\t\t<slot id=\"toggler\" name=\"root\"></slot>\n\n\t\t\t\t<!-- The chevron or arrow symbol -->\n\t\t\t\t<!-- Stop propagation on the schmancy-button itself just to avoid double triggers -->\n\t\t\t\t<schmancy-button\n\t\t\t\t\tslot=\"trailing\"\n\t\t\t\t\tid=\"chevron\"\n\t\t\t\t\taria-expanded=${this.open ? 'true' : 'false'}\n\t\t\t\t\taria-controls=${this._contentId}\n\t\t\t\t\taria-label=${this.open ? 'Collapse' : 'Expand'}\n\t\t\t\t\t@click=${(e: Event) => e.stopPropagation()}\n\t\t\t\t>\n\t\t\t\t\t⌅\n\t\t\t\t</schmancy-button>\n\t\t\t</div>\n\n\t\t\t<!-- The default slot: tree children -->\n\t\t\t<slot id=${this._contentId}></slot>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-tree': SchmancyTree\n\t}\n}\n"],"mappings":"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"}

package/dist/tree.js

@@ -1,10 +1,20 @@
-import { t as e } from "./tailwind.mixin-mdQR3BEO.js";
-import { t } from "./decorate-D_utPUsC.js";
-import "./mixins.js";
+import { s as e } from "./mixins-CcIWET41.js";
+import { t } from "./decorate-23nYs4Le.js";
 import { fromEvent as n, merge as r, switchMap as i, takeUntil as a, tap as o, zip as s } from "rxjs";
 import { customElement as c, property as l, query as u } from "lit/decorators.js";
 import { css as d, html as f } from "lit";
-var p = class extends e(d`
+var p = class extends e {
+	constructor(...e) {
+		super(...e), this.open = !1, this._a11yId = `schmancy-tree-${Math.random().toString(36).slice(2, 10)}`, this._internals = (() => {
+			try {
+				return this.attachInternals();
+			} catch {
+				return;
+			}
+		})();
+	}
+	static {
+		this.styles = [d`
 	:host {
 		display: block;
 		position: relative;
@@ -17,15 +27,7 @@ var p = class extends e(d`
 	::slotted([slot='root'] + *) {
 		margin-top: 0.5rem;
 	}
-`) {
-	constructor(...e) {
-		super(...e), this.open = !1, this._a11yId = `schmancy-tree-${Math.random().toString(36).slice(2, 10)}`, this._internals = (() => {
-			try {
-				return this.attachInternals();
-			} catch {
-				return;
-			}
-		})();
+`];
 	}
 	get _contentId() {
 		return `${this._a11yId}-content`;

package/dist/tree.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree.js","names":[],"sources":["../src/tree/tree.ts"],"sourcesContent":["import { TailwindElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { fromEvent, merge, switchMap, takeUntil, tap, zip } from 'rxjs'\n\n/**\n * Expandable tree node — a recursive disclosure widget. One root slot, one default slot for child nodes. Each node can itself contain schmancy-tree children.\n *\n * @element schmancy-tree\n * @summary Use for hierarchical navigation / file-explorer layouts. Each level is a schmancy-tree with a `root` slot (the parent label) and default slot (the children, which may be more schmancy-trees).\n * @example\n * <schmancy-tree>\n *   <schmancy-list-item slot=\"root\">src/</schmancy-list-item>\n *   <schmancy-tree>\n *     <schmancy-list-item slot=\"root\">components/</schmancy-list-item>\n *     <schmancy-list-item>button.ts</schmancy-list-item>\n *   </schmancy-tree>\n * </schmancy-tree>\n * @platform details toggle - Recursive `<details>`-like disclosure. Degrades to a plain nested list if the tag never registers — loses expand/collapse but stays navigable.\n * @slot root - The root element of the tree\n * @slot - The children of the tree\n * @fires toggle - When the root toggler or chevron is clicked. Fires before the open state flips; the host's `open` property reflects the new state on the next animation frame.\n */\n@customElement('schmancy-tree')\nexport class SchmancyTree extends TailwindElement(css`\n\t:host {\n\t\tdisplay: block;\n\t\tposition: relative;\n\t\tbackground-color: initial;\n\t}\n\t::slotted([slot='root']) {\n\t\twidth: 100%;\n\t\ttext-align: left;\n\t}\n\t::slotted([slot='root'] + *) {\n\t\tmargin-top: 0.5rem;\n\t}\n`) {\n\t/**\n\t * Whether the tree’s children are visible\n\t */\n\t@property({ type: Boolean }) open = false\n\n\t@query('#toggler') toggler!: HTMLSlotElement\n\t@query('slot:not([name=\"root\"])') defaultSlot!: HTMLSlotElement\n\n\t// Since it's actually a <schmancy-button>, use HTMLElement or a custom type\n\t@query('#chevron') chevron!: HTMLElement\n\n\tprivate readonly _a11yId = `schmancy-tree-${Math.random().toString(36).slice(2, 10)}`\n\tprivate get _contentId() { return `${this._a11yId}-content` }\n\n\t/** ElementInternals — broadcasts `:state(open)` for consumer CSS. */\n\tprivate readonly _internals: ElementInternals | undefined = (() => {\n\t\ttry { return this.attachInternals() } catch { return undefined }\n\t})()\n\n\tupdated(changed: Map<string, unknown>) {\n\t\tsuper.updated?.(changed)\n\t\tif (changed.has('open')) {\n\t\t\tif (this.open) this._internals?.states.add('open')\n\t\t\telse this._internals?.states.delete('open')\n\t\t}\n\t}\n\n\tfirstUpdated() {\n\t\t// Hide or show the slot initially based on `open`\n\t\tif (!this.open) {\n\t\t\tthis.defaultSlot.hidden = true\n\t\t}\n\n\t\t// Root toggler\n\t\tconst toggleClick$ = fromEvent<MouseEvent>(this.toggler, 'click').pipe(\n\t\t\ttakeUntil(this.disconnecting),\n\t\t\ttap(e => {\n\t\t\t\te.preventDefault()\n\t\t\t\te.stopPropagation()\n\t\t\t\tthis.dispatchEvent(new CustomEvent('toggle', { bubbles: false, composed: true }))\n\t\t\t}),\n\t\t)\n\n\t\t// Chevron (the schmancy-button) click\n\t\tconst chevronClick$ = fromEvent<MouseEvent>(this.chevron, 'click')\n\n\t\tmerge(toggleClick$, chevronClick$)\n\t\t\t.pipe(\n\t\t\t\tswitchMap(() => {\n\t\t\t\t\t// 1. Animate the chevron rotation\n\t\t\t\t\t//    If `open` is true, rotate from 180 -> 0; if false, from 0 -> 180\n\t\t\t\t\tconst fromDeg = this.open ? 180 : 0\n\t\t\t\t\tconst toDeg = this.open ? 0 : 180\n\t\t\t\t\tconst chevronAnimation = this.chevron.animate(\n\t\t\t\t\t\t[{ transform: `rotate(${fromDeg}deg)` }, { transform: `rotate(${toDeg}deg)` }],\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tduration: 150,\n\t\t\t\t\t\t\teasing: 'ease-in',\n\t\t\t\t\t\t\tfill: 'forwards',\n\t\t\t\t\t\t},\n\t\t\t\t\t)\n\n\t\t\t\t\t// 2. Animate the slot’s height + opacity\n\t\t\t\t\tif (!this.open) {\n\t\t\t\t\t\t// We are about to open, so remove `hidden` to measure scrollHeight\n\t\t\t\t\t\tthis.defaultSlot.hidden = false\n\t\t\t\t\t}\n\n\t\t\t\t\tconst fromOpacity = this.open ? 1 : 0\n\t\t\t\t\tconst toOpacity = this.open ? 0 : 1\n\n\t\t\t\t\tconst slotAnimation = this.defaultSlot.animate([{ opacity: fromOpacity }, { opacity: toOpacity }], {\n\t\t\t\t\t\tduration: 150,\n\t\t\t\t\t\teasing: 'ease-out',\n\t\t\t\t\t\tfill: 'forwards',\n\t\t\t\t\t})\n\n\t\t\t\t\t// Hide the slot if we just closed it\n\t\t\t\t\tslotAnimation.onfinish = () => {\n\t\t\t\t\t\tif (this.open) {\n\t\t\t\t\t\t\tthis.defaultSlot.hidden = true\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tthis.defaultSlot.style.height = 'auto'\n\t\t\t\t\t\t\tthis.defaultSlot.style.opacity = '1'\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t// Return an Observable that completes when both animations finish\n\t\t\t\t\treturn zip(fromEvent(chevronAnimation, 'finish'), fromEvent(slotAnimation, 'finish')).pipe(\n\t\t\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t\t\t)\n\t\t\t\t}),\n\t\t\t\ttap(() => {\n\t\t\t\t\t// Flip the open state\n\t\t\t\t\tthis.open = !this.open\n\t\t\t\t}),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe()\n\t}\n\n\trender() {\n\t\treturn html`\n\t\t\t<div class=\"flex content-center items-center justify-between\">\n\t\t\t\t<!-- Root toggler content -->\n\t\t\t\t<slot id=\"toggler\" name=\"root\"></slot>\n\n\t\t\t\t<!-- The chevron or arrow symbol -->\n\t\t\t\t<!-- Stop propagation on the schmancy-button itself just to avoid double triggers -->\n\t\t\t\t<schmancy-button\n\t\t\t\t\tslot=\"trailing\"\n\t\t\t\t\tid=\"chevron\"\n\t\t\t\t\taria-expanded=${this.open ? 'true' : 'false'}\n\t\t\t\t\taria-controls=${this._contentId}\n\t\t\t\t\taria-label=${this.open ? 'Collapse' : 'Expand'}\n\t\t\t\t\t@click=${(e: Event) => e.stopPropagation()}\n\t\t\t\t>\n\t\t\t\t\t⌅\n\t\t\t\t</schmancy-button>\n\t\t\t</div>\n\n\t\t\t<!-- The default slot: tree children -->\n\t\t\t<slot id=${this._contentId}></slot>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-tree': SchmancyTree\n\t}\n}\n"],"mappings":";;;;;;AAwBO,IAAA,IAAA,cAA2B,EAAgB,CAAG;;;;;;;;;;;;;;;4BAiBhB,GAAA,KAAA,UAQT,iBAAiB,KAAK,QAAA,CAAS,SAAS,GAAA,CAAI,MAAM,GAAG,GAAA,IAAA,KAAA,oBAAA;AAK/E,OAAA;AAAM,WAAO,KAAK,iBAAA;WAAA;AAA4B;;MAAA;;CAJ/C,IAAA,aAAY;AAAe,SAAO,GAAG,KAAK,QAAA;;CAO1C,QAAQ,GAAA;AACP,QAAM,UAAU,EAAA,EACZ,EAAQ,IAAI,OAAA,KACX,KAAK,OAAM,KAAK,YAAY,OAAO,IAAI,OAAA,GACtC,KAAK,YAAY,OAAO,OAAO,OAAA;;CAItC,eAAA;AAEM,OAAK,SACT,KAAK,YAAY,SAAA,CAAS,IAgB3B,EAZqB,EAAsB,KAAK,SAAS,QAAA,CAAS,KACjE,EAAU,KAAK,cAAA,EACf,GAAI,MAAA;AACH,KAAE,gBAAA,EACF,EAAE,iBAAA,EACF,KAAK,cAAc,IAAI,YAAY,UAAU;IAAE,SAAA,CAAS;IAAO,UAAA,CAAU;IAAA,CAAA,CAAA;IAAA,CAAA,EAKrD,EAAsB,KAAK,SAAS,QAAA,CAAA,CAGxD,KACA,QAAA;GAGC,IAAM,IAAU,KAAK,OAAO,MAAM,GAC5B,IAAQ,KAAK,OAAO,IAAI,KACxB,IAAmB,KAAK,QAAQ,QACrC,CAAC,EAAE,WAAW,UAAU,EAAA,OAAA,EAAiB,EAAE,WAAW,UAAU,EAAA,OAAA,CAAA,EAChE;IACC,UAAU;IACV,QAAQ;IACR,MAAM;IAAA,CAAA;AAKH,QAAK,SAET,KAAK,YAAY,SAAA,CAAS;GAG3B,IAAM,IAAc,QAAK,MACnB,IAAY,OAAK,MAEjB,IAAgB,KAAK,YAAY,QAAQ,CAAC,EAAE,SAAS,GAAA,EAAe,EAAE,SAAS,GAAA,CAAA,EAAc;IAClG,UAAU;IACV,QAAQ;IACR,MAAM;IAAA,CAAA;AAcP,UAVA,EAAc,iBAAA;AACT,SAAK,OACR,KAAK,YAAY,SAAA,CAAS,KAE1B,KAAK,YAAY,MAAM,SAAS,QAChC,KAAK,YAAY,MAAM,UAAU;MAK5B,EAAI,EAAU,GAAkB,SAAA,EAAW,EAAU,GAAe,SAAA,CAAA,CAAW,KACrF,EAAU,KAAK,cAAA,CAAA;IAAA,EAGjB,QAAA;AAEC,QAAK,OAAA,CAAQ,KAAK;IAAA,EAEnB,EAAU,KAAK,cAAA,CAAA,CAEf,WAAA;;CAGH,SAAA;AACC,SAAO,CAAI;;;;;;;;;;qBAUQ,KAAK,OAAO,SAAS,QAAA;qBACrB,KAAK,WAAA;kBACR,KAAK,OAAO,aAAa,SAAA;eAC5B,MAAa,EAAE,iBAAA,CAAA;;;;;;;cAOhB,KAAK,WAAA;;;;GAvHjB,EAAS,EAAE,MAAM,SAAA,CAAA,CAAA,EAAU,EAAA,WAAA,QAAA,KAAA,EAAA,EAAA,EAAA,CAE3B,EAAM,WAAA,CAAA,EAAW,EAAA,WAAA,WAAA,KAAA,EAAA,EAAA,EAAA,CACjB,EAAM,4BAAA,CAAA,EAA0B,EAAA,WAAA,eAAA,KAAA,EAAA,EAAA,EAAA,CAGhC,EAAM,WAAA,CAAA,EAAW,EAAA,WAAA,WAAA,KAAA,EAAA,EAAA,IAAA,EAAA,CAxBlB,EAAc,gBAAA,CAAA,EAAgB,EAAA;AAAA,SAAA,KAAA"}
+{"version":3,"file":"tree.js","names":[],"sources":["../src/tree/tree.ts"],"sourcesContent":["import { SchmancyElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { fromEvent, merge, switchMap, takeUntil, tap, zip } from 'rxjs'\n\n/**\n * @element schmancy-tree\n * @slot root - The root element of the tree\n * @slot - The children of the tree\n */\n@customElement('schmancy-tree')\nexport class SchmancyTree extends SchmancyElement {\n\tstatic styles = [css`\n\t:host {\n\t\tdisplay: block;\n\t\tposition: relative;\n\t\tbackground-color: initial;\n\t}\n\t::slotted([slot='root']) {\n\t\twidth: 100%;\n\t\ttext-align: left;\n\t}\n\t::slotted([slot='root'] + *) {\n\t\tmargin-top: 0.5rem;\n\t}\n`];\n\t/**\n\t * Whether the tree’s children are visible\n\t */\n\t@property({ type: Boolean }) open = false\n\n\t@query('#toggler') toggler!: HTMLSlotElement\n\t@query('slot:not([name=\"root\"])') defaultSlot!: HTMLSlotElement\n\n\t// Since it's actually a <schmancy-button>, use HTMLElement or a custom type\n\t@query('#chevron') chevron!: HTMLElement\n\n\tprivate readonly _a11yId = `schmancy-tree-${Math.random().toString(36).slice(2, 10)}`\n\tprivate get _contentId() { return `${this._a11yId}-content` }\n\n\t/** ElementInternals — broadcasts `:state(open)` for consumer CSS. */\n\tprivate readonly _internals: ElementInternals | undefined = (() => {\n\t\ttry { return this.attachInternals() } catch { return undefined }\n\t})()\n\n\tupdated(changed: Map<string, unknown>) {\n\t\tsuper.updated?.(changed)\n\t\tif (changed.has('open')) {\n\t\t\tif (this.open) this._internals?.states.add('open')\n\t\t\telse this._internals?.states.delete('open')\n\t\t}\n\t}\n\n\tfirstUpdated() {\n\t\t// Hide or show the slot initially based on `open`\n\t\tif (!this.open) {\n\t\t\tthis.defaultSlot.hidden = true\n\t\t}\n\n\t\t// Root toggler\n\t\tconst toggleClick$ = fromEvent<MouseEvent>(this.toggler, 'click').pipe(\n\t\t\ttakeUntil(this.disconnecting),\n\t\t\ttap(e => {\n\t\t\t\te.preventDefault()\n\t\t\t\te.stopPropagation()\n\t\t\t\tthis.dispatchEvent(new CustomEvent('toggle', { bubbles: false, composed: true }))\n\t\t\t}),\n\t\t)\n\n\t\t// Chevron (the schmancy-button) click\n\t\tconst chevronClick$ = fromEvent<MouseEvent>(this.chevron, 'click')\n\n\t\tmerge(toggleClick$, chevronClick$)\n\t\t\t.pipe(\n\t\t\t\tswitchMap(() => {\n\t\t\t\t\t// 1. Animate the chevron rotation\n\t\t\t\t\t//    If `open` is true, rotate from 180 -> 0; if false, from 0 -> 180\n\t\t\t\t\tconst fromDeg = this.open ? 180 : 0\n\t\t\t\t\tconst toDeg = this.open ? 0 : 180\n\t\t\t\t\tconst chevronAnimation = this.chevron.animate(\n\t\t\t\t\t\t[{ transform: `rotate(${fromDeg}deg)` }, { transform: `rotate(${toDeg}deg)` }],\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tduration: 150,\n\t\t\t\t\t\t\teasing: 'ease-in',\n\t\t\t\t\t\t\tfill: 'forwards',\n\t\t\t\t\t\t},\n\t\t\t\t\t)\n\n\t\t\t\t\t// 2. Animate the slot’s height + opacity\n\t\t\t\t\tif (!this.open) {\n\t\t\t\t\t\t// We are about to open, so remove `hidden` to measure scrollHeight\n\t\t\t\t\t\tthis.defaultSlot.hidden = false\n\t\t\t\t\t}\n\n\t\t\t\t\tconst fromOpacity = this.open ? 1 : 0\n\t\t\t\t\tconst toOpacity = this.open ? 0 : 1\n\n\t\t\t\t\tconst slotAnimation = this.defaultSlot.animate([{ opacity: fromOpacity }, { opacity: toOpacity }], {\n\t\t\t\t\t\tduration: 150,\n\t\t\t\t\t\teasing: 'ease-out',\n\t\t\t\t\t\tfill: 'forwards',\n\t\t\t\t\t})\n\n\t\t\t\t\t// Hide the slot if we just closed it\n\t\t\t\t\tslotAnimation.onfinish = () => {\n\t\t\t\t\t\tif (this.open) {\n\t\t\t\t\t\t\tthis.defaultSlot.hidden = true\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tthis.defaultSlot.style.height = 'auto'\n\t\t\t\t\t\t\tthis.defaultSlot.style.opacity = '1'\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t// Return an Observable that completes when both animations finish\n\t\t\t\t\treturn zip(fromEvent(chevronAnimation, 'finish'), fromEvent(slotAnimation, 'finish')).pipe(\n\t\t\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t\t\t)\n\t\t\t\t}),\n\t\t\t\ttap(() => {\n\t\t\t\t\t// Flip the open state\n\t\t\t\t\tthis.open = !this.open\n\t\t\t\t}),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe()\n\t}\n\n\trender() {\n\t\treturn html`\n\t\t\t<div class=\"flex content-center items-center justify-between\">\n\t\t\t\t<!-- Root toggler content -->\n\t\t\t\t<slot id=\"toggler\" name=\"root\"></slot>\n\n\t\t\t\t<!-- The chevron or arrow symbol -->\n\t\t\t\t<!-- Stop propagation on the schmancy-button itself just to avoid double triggers -->\n\t\t\t\t<schmancy-button\n\t\t\t\t\tslot=\"trailing\"\n\t\t\t\t\tid=\"chevron\"\n\t\t\t\t\taria-expanded=${this.open ? 'true' : 'false'}\n\t\t\t\t\taria-controls=${this._contentId}\n\t\t\t\t\taria-label=${this.open ? 'Collapse' : 'Expand'}\n\t\t\t\t\t@click=${(e: Event) => e.stopPropagation()}\n\t\t\t\t>\n\t\t\t\t\t⌅\n\t\t\t\t</schmancy-button>\n\t\t\t</div>\n\n\t\t\t<!-- The default slot: tree children -->\n\t\t\t<slot id=${this._contentId}></slot>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-tree': SchmancyTree\n\t}\n}\n"],"mappings":";;;;;AAWO,IAAA,IAAA,cAA2B,EAAA;CAAA,YAAA,GAAA,GAAA;AAAA,QAAA,GAAA,EAAA,EAAA,KAAA,OAAA,CAkBG,GAAA,KAAA,UAQT,iBAAiB,KAAK,QAAA,CAAS,SAAS,GAAA,CAAI,MAAM,GAAG,GAAA,IAAA,KAAA,oBAAA;AAK/E,OAAA;AAAM,WAAO,KAAK,iBAAA;WAAA;AAA4B;;MAAA;;CAAA;AAAA,OAAA,SA9B/B,CAAC,CAAG;;;;;;;;;;;;;;;CA0BpB,IAAA,aAAY;AAAe,SAAO,GAAG,KAAK,QAAA;;CAO1C,QAAQ,GAAA;AACP,QAAM,UAAU,EAAA,EACZ,EAAQ,IAAI,OAAA,KACX,KAAK,OAAM,KAAK,YAAY,OAAO,IAAI,OAAA,GACtC,KAAK,YAAY,OAAO,OAAO,OAAA;;CAItC,eAAA;AAEM,OAAK,SACT,KAAK,YAAY,SAAA,CAAS,IAgB3B,EAZqB,EAAsB,KAAK,SAAS,QAAA,CAAS,KACjE,EAAU,KAAK,cAAA,EACf,GAAI,MAAA;AACH,KAAE,gBAAA,EACF,EAAE,iBAAA,EACF,KAAK,cAAc,IAAI,YAAY,UAAU;IAAE,SAAA,CAAS;IAAO,UAAA,CAAU;IAAA,CAAA,CAAA;IAAA,CAAA,EAKrD,EAAsB,KAAK,SAAS,QAAA,CAAA,CAGxD,KACA,QAAA;GAGC,IAAM,IAAU,KAAK,OAAO,MAAM,GAC5B,IAAQ,KAAK,OAAO,IAAI,KACxB,IAAmB,KAAK,QAAQ,QACrC,CAAC,EAAE,WAAW,UAAU,EAAA,OAAA,EAAiB,EAAE,WAAW,UAAU,EAAA,OAAA,CAAA,EAChE;IACC,UAAU;IACV,QAAQ;IACR,MAAM;IAAA,CAAA;AAKH,QAAK,SAET,KAAK,YAAY,SAAA,CAAS;GAG3B,IAAM,IAAc,QAAK,MACnB,IAAY,OAAK,MAEjB,IAAgB,KAAK,YAAY,QAAQ,CAAC,EAAE,SAAS,GAAA,EAAe,EAAE,SAAS,GAAA,CAAA,EAAc;IAClG,UAAU;IACV,QAAQ;IACR,MAAM;IAAA,CAAA;AAcP,UAVA,EAAc,iBAAA;AACT,SAAK,OACR,KAAK,YAAY,SAAA,CAAS,KAE1B,KAAK,YAAY,MAAM,SAAS,QAChC,KAAK,YAAY,MAAM,UAAU;MAK5B,EAAI,EAAU,GAAkB,SAAA,EAAW,EAAU,GAAe,SAAA,CAAA,CAAW,KACrF,EAAU,KAAK,cAAA,CAAA;IAAA,EAGjB,QAAA;AAEC,QAAK,OAAA,CAAQ,KAAK;IAAA,EAEnB,EAAU,KAAK,cAAA,CAAA,CAEf,WAAA;;CAGH,SAAA;AACC,SAAO,CAAI;;;;;;;;;;qBAUQ,KAAK,OAAO,SAAS,QAAA;qBACrB,KAAK,WAAA;kBACR,KAAK,OAAO,aAAa,SAAA;eAC5B,MAAa,EAAE,iBAAA,CAAA;;;;;;;cAOhB,KAAK,WAAA;;;;GAvHjB,EAAS,EAAE,MAAM,SAAA,CAAA,CAAA,EAAU,EAAA,WAAA,QAAA,KAAA,EAAA,EAAA,EAAA,CAE3B,EAAM,WAAA,CAAA,EAAW,EAAA,WAAA,WAAA,KAAA,EAAA,EAAA,EAAA,CACjB,EAAM,4BAAA,CAAA,EAA0B,EAAA,WAAA,eAAA,KAAA,EAAA,EAAA,EAAA,CAGhC,EAAM,WAAA,CAAA,EAAW,EAAA,WAAA,WAAA,KAAA,EAAA,EAAA,IAAA,EAAA,CAzBlB,EAAc,gBAAA,CAAA,EAAgB,EAAA;AAAA,SAAA,KAAA"}

package/dist/typewriter.cjs

@@ -1,123 +1,10 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-CncqDLb2.cjs`);const e=require(`./tailwind.mixin-DRI1oTYQ.cjs`),t=require(`./decorate-F9CuyeHg.cjs`),n=require(`./litElement.mixin-qh5-IIUq.cjs`);require(`./mixins.cjs`);const r=require(`./delay-BHODnTg-.cjs`),i=require(`./hashContent-CahnEuut.cjs`),a=require(`./intersection-DqBqnpgh.cjs`);let o=require(`lit/decorators.js`),s=require(`lit`);var c=null,l=class extends n.t(s.css`
-	:host {
-		display: inline-block;
-	}
-
-	#typewriter {
-		position: relative;
-	}
-
-	/* Enhanced cursor with glow effect */
-	#typewriter :global(.ti-cursor) {
-		animation: cursor-pulse 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
-		color: currentColor;
-		filter: drop-shadow(0 0 8px currentColor);
-	}
-
-	@keyframes cursor-pulse {
-		0%, 100% {
-			opacity: 1;
-			transform: scale(1);
-		}
-		50% {
-			opacity: 0.3;
-			transform: scale(0.95);
-		}
-	}
-
-	/* Character entrance animation */
-	#typewriter :global(.ti-container *) {
-		animation: char-entrance 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
-	}
-
-	@keyframes char-entrance {
-		0% {
-			opacity: 0;
-			transform: scale(0.3) translateY(10px);
-			filter: blur(4px);
-		}
-		50% {
-			opacity: 0.8;
-			transform: scale(1.1) translateY(-2px);
-		}
-		100% {
-			opacity: 1;
-			transform: scale(1) translateY(0);
-			filter: blur(0);
-		}
-	}
-
-	/* Subtle character wobble on appear */
-	#typewriter :global(.ti-container *:nth-child(odd)) {
-		animation: char-entrance 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) backwards,
-		           char-wobble 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s backwards;
-	}
-
-	@keyframes char-wobble {
-		0%, 100% {
-			transform: rotate(0deg);
-		}
-		25% {
-			transform: rotate(2deg);
-		}
-		75% {
-			transform: rotate(-2deg);
-		}
-	}
-
-	/* Deletion animation - fade out and scale down */
-	#typewriter :global(.ti-container .deleting) {
-		animation: char-delete 0.2s cubic-bezier(0.4, 0, 1, 1) forwards;
-	}
-
-	@keyframes char-delete {
-		0% {
-			opacity: 1;
-			transform: scale(1);
-			filter: blur(0);
-		}
-		50% {
-			opacity: 0.5;
-			transform: scale(0.8) translateY(-3px);
-		}
-		100% {
-			opacity: 0;
-			transform: scale(0.4) translateY(-8px);
-			filter: blur(3px);
-		}
-	}
-
-	/* Gradient text effect on typed text */
-	#typewriter :global(.ti-container) {
-		background: linear-gradient(
-			90deg,
-			currentColor 0%,
-			currentColor 70%,
-			transparent 100%
-		);
-		-webkit-background-clip: text;
-		background-clip: text;
-		animation: gradient-shift 3s ease-in-out infinite;
-	}
-
-	@keyframes gradient-shift {
-		0%, 100% {
-			filter: brightness(1) saturate(1);
-		}
-		50% {
-			filter: brightness(1.15) saturate(1.2);
-		}
-	}
-
-	/* Smooth transitions for all text */
-	#typewriter * {
-		transition: opacity 0.15s ease-out, transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
-	}
-`){constructor(...e){super(...e),this.speed=35,this.delay=0,this.autoStart=!0,this.cursorChar=``,this.deleteSpeed=20,this.once=!0,this.loop=!1,this.cyclePause=1500,this.typeItInstance=null,this.sessionKey=``}disconnectedCallback(){super.disconnectedCallback(),this._destroyTypeIt()}async _startTyping(){if(this._destroyTypeIt(),this.sessionKey=this.generateSessionKey(),this.once&&sessionStorage.getItem(this.sessionKey)===`true`)return void this.shadowRoot?.querySelector(`slot`)?.removeAttribute(`hidden`);if(!this.typewriterContainer)return;let e={speed:this.speed,startDelay:this.delay,cursor:!!this.cursorChar,cursorChar:this.cursorChar,deleteSpeed:this.deleteSpeed,loop:this.loop,afterComplete:()=>{if(this.once&&!this.loop)try{sessionStorage.setItem(this.sessionKey,`true`)}catch{}this.dispatchEvent(new CustomEvent(`typeit-complete`,{bubbles:!0,composed:!0})),this.loop||this.typewriterContainer.style.setProperty(`--ti-cursor-display`,`none`)}},t=await(c||=Promise.resolve().then(()=>require(`./index.es-BgmFX1JM.cjs`)).then(e=>e.default));this.isConnected&&(this.typeItInstance=new t(this.typewriterContainer,e),this._getSlottedNodes.forEach(e=>{if(e.nodeType===Node.TEXT_NODE){let t=e.textContent||``;t.trim()&&this.typeItInstance?.type(t)}else e instanceof HTMLElement&&this._processCustomElement(e)}),a.t(this.shadowRoot?.host).subscribe(()=>{this.typeItInstance?.go()}))}generateSessionKey(){let e=this._getSlottedElements.map(e=>e.outerHTML).join(``);return this.once?i.t(e):``}_destroyTypeIt(){if(this.typeItInstance){try{this.typeItInstance.destroy()}catch{}this.typeItInstance=null}}_processCustomElement(e){let t=e.getAttribute(`action`),n=e.getAttribute(`value`),r=e.getAttribute(`cycle`);if(r){let t=r.split(`|`).map(e=>e.trim());this._processCycle(t,e);return}switch(t){case`pause`:this.typeItInstance?.pause(parseInt(n||`0`,10));break;case`delete`:this.typeItInstance?.delete(parseInt(n||`0`,10));break;default:e.tagName===`P`&&this.typeItInstance?.break(),this.typeItInstance?.type(e.textContent||``)}}_processCycle(e,t){if(e.length===0)return;let n=t.getAttribute(`pause`),r=n?parseInt(n,10):this.cyclePause;e.forEach((t,n)=>{this.typeItInstance?.type(t),(n<e.length-1||this.loop)&&this.typeItInstance?.pause(r),(n<e.length-1||this.loop)&&this.typeItInstance?.delete(t.length)})}render(){return s.html`<div id="typewriter" aria-live="polite"></div>
-
-			<div class="typewriter">
-				<slot
-					hidden
-					@slotchange=${()=>{this._startTyping()}}
-				></slot>
-			</div> `}};t.t([(0,o.property)({type:Number})],l.prototype,`speed`,void 0),t.t([e.a({context:r.n,subscribe:!0}),(0,o.property)({type:Number})],l.prototype,`delay`,void 0),t.t([(0,o.property)({type:Boolean})],l.prototype,`autoStart`,void 0),t.t([(0,o.property)({type:String})],l.prototype,`cursorChar`,void 0),t.t([(0,o.property)({type:Number})],l.prototype,`deleteSpeed`,void 0),t.t([(0,o.property)({type:Boolean})],l.prototype,`once`,void 0),t.t([(0,o.property)({type:Boolean})],l.prototype,`loop`,void 0),t.t([(0,o.property)({type:Number})],l.prototype,`cyclePause`,void 0),t.t([(0,o.query)(`#typewriter`)],l.prototype,`typewriterContainer`,void 0),t.t([(0,o.queryAssignedNodes)({flatten:!0})],l.prototype,`_getSlottedNodes`,void 0),t.t([(0,o.queryAssignedElements)({flatten:!0})],l.prototype,`_getSlottedElements`,void 0),l=t.t([(0,o.customElement)(`schmancy-typewriter`)],l),Object.defineProperty(exports,`TypewriterElement`,{enumerable:!0,get:function(){return l}});
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-CncqDLb2.cjs`);let e=require(`rxjs`),t=require(`rxjs/operators`),n=require(`lit`),r=require(`lit/async-directive.js`);var i=class{constructor(e=.3){this.audioContext=new AudioContext,this.volume=Math.max(0,Math.min(1,e))}playKeyPress(){let e=this.audioContext.currentTime,t=this.audioContext.createOscillator(),n=this.audioContext.createGain(),r=800+200*Math.random();t.frequency.setValueAtTime(r,e),t.type=`sine`,n.gain.setValueAtTime(0,e),n.gain.linearRampToValueAtTime(.2*this.volume,e+.005),n.gain.exponentialRampToValueAtTime(.001,e+.03),t.connect(n),n.connect(this.audioContext.destination),t.start(e),t.stop(e+.03);let i=this.audioContext.createOscillator(),a=this.audioContext.createGain();i.frequency.setValueAtTime(1800+400*Math.random(),e),i.type=`sine`,a.gain.setValueAtTime(0,e),a.gain.linearRampToValueAtTime(.08*this.volume,e+.003),a.gain.exponentialRampToValueAtTime(.001,e+.015),i.connect(a),a.connect(this.audioContext.destination),i.start(e),i.stop(e+.015)}playDelete(){let e=this.audioContext.currentTime,t=this.audioContext.createOscillator(),n=this.audioContext.createGain();t.frequency.setValueAtTime(600,e),t.frequency.exponentialRampToValueAtTime(200,e+.04),t.type=`sine`,n.gain.setValueAtTime(0,e),n.gain.linearRampToValueAtTime(.12*this.volume,e+.005),n.gain.exponentialRampToValueAtTime(.001,e+.04),t.connect(n),n.connect(this.audioContext.destination),t.start(e),t.stop(e+.04)}cleanup(){this.audioContext.close()}},a=class extends r.AsyncDirective{constructor(...e){super(...e),this.state=null,this.soundEngine=null}render(e,t={}){return n.noChange}update(e,[t,r={}]){let a=e.element;if(!this.state||JSON.stringify(this.state.phrases)===JSON.stringify(t)&&JSON.stringify(this.state.options)===JSON.stringify(r)||this.cleanup(),!this.state){let e={typeSpeed:50,deleteSpeed:30,pauseDuration:1500,loop:!0,selector:`.typed`,cursor:!1,finalMessage:``,sound:!0,volume:.08};if(this.state={phrases:t,options:{...e,...r},element:a},this.state.options.sound&&(this.soundEngine=new i(this.state.options.volume)),this.state.targetElement=a.querySelector(this.state.options.selector)??void 0,!this.state.targetElement)return n.noChange;if(this.state.options.cursor){this.state.targetElement.style.position=`relative`,this.state.targetElement.style.display=`inline-block`;let e=document.createElement(`span`);if(e.className=`typewriter-cursor`,e.textContent=`|`,e.style.cssText=`
+					display: inline-block;
+					margin-left: 2px;
+					animation: typewriter-blink 1s step-end infinite;
+				`,this.state.targetElement.appendChild(e),!document.getElementById(`typewriter-styles`)){let e=document.createElement(`style`);e.id=`typewriter-styles`,e.textContent=`
+						@keyframes typewriter-blink {
+							0%, 50% { opacity: 1; }
+							51%, 100% { opacity: 0; }
+						}
+					`,document.head.appendChild(e)}}this.startTyping()}return n.noChange}startTyping(){if(!this.state||!this.state.targetElement)return;let{phrases:n,options:r,targetElement:i}=this.state,a=(n,a=!0)=>(0,e.concat)((0,e.defer)(()=>(0,e.concat)(...n.split(``).map(n=>(0,e.of)(n).pipe((0,t.delay)(r.typeSpeed),(0,t.tap)(e=>{let t=this.getTextNode(i);t&&(t.textContent+=e),this.soundEngine&&this.soundEngine.playKeyPress()}))))),(0,e.of)(null).pipe((0,t.delay)(r.pauseDuration)),a?(0,e.defer)(()=>{let a=n.length;return(0,e.interval)(r.deleteSpeed).pipe((0,t.take)(a),(0,t.tap)(()=>{let e=this.getTextNode(i);e&&e.textContent&&(e.textContent=e.textContent.slice(0,-1)),this.soundEngine&&this.soundEngine.playDelete()}))}):e.EMPTY,a?(0,e.of)(null).pipe((0,t.delay)(200)):e.EMPTY),o=(0,e.concat)(...n.map(e=>a(e))),s=r.finalMessage?(0,e.concat)(o,a(r.finalMessage,!1)):o;this.state.subscription=(r.loop?o.pipe((0,t.repeat)()):s).subscribe({error:e=>{}})}getTextNode(e){for(let t of Array.from(e.childNodes))if(t.nodeType===Node.TEXT_NODE)return t;let t=document.createTextNode(``);return e.insertBefore(t,e.firstChild),t}cleanup(){this.state&&=(this.state.subscription&&this.state.subscription.unsubscribe(),this.state.targetElement&&this.state.targetElement.querySelector(`.typewriter-cursor`)?.remove(),this.soundEngine&&=(this.soundEngine.cleanup(),null),null)}disconnected(){this.cleanup()}reconnected(){this.state&&!this.state.subscription&&this.startTyping()}},o=(0,r.directive)(a);exports.typewriter=o;

package/dist/typewriter.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"typewriter.cjs","names":[],"sources":["../src/typewriter/typewriter.ts"],"sourcesContent":["import { consume } from '@lit/context'\nimport { $LitElement } from '@mixins/index'\nimport { delayContext } from '@schmancy/delay'\nimport hashContent from '@schmancy/utils/hashContent'\nimport { intersection$ } from '@schmancy/utils/intersection'\nimport { css, html, TemplateResult } from 'lit'\nimport { customElement, property, query, queryAssignedElements, queryAssignedNodes } from 'lit/decorators.js'\n// TypeIt is loaded lazily on first render — see ADR 0014 in the parent\n// monorepo. The static import was replaced with a type-only import plus a\n// memoised dynamic loader so the ~15 KB gzipped vendor chunk stays out of\n// the agent bundle's first paint for pages that don't render a typewriter.\nimport type { Options as TypeItOptions } from 'typeit'\ntype TypeItCtor = typeof import('typeit').default\ntype TypeItInstance = InstanceType<TypeItCtor>\n\nlet typeItPromise: Promise<TypeItCtor> | null = null\nfunction loadTypeIt(): Promise<TypeItCtor> {\n\tif (typeItPromise) return typeItPromise\n\ttypeItPromise = import('typeit').then(m => m.default)\n\treturn typeItPromise\n}\n\n/**\n * Typewriter effect — animates text typing/deletion with a cursor. Wraps the TypeIt library, lazy-loaded on first render.\n *\n * @element schmancy-typewriter\n * @summary Drop string content as the default slot or use `<p>` / `<span>` with `cycle=\"A|B|C\"` attribute children for cycling phrases. Set `loop` for infinite cycling, `once` to remember completion across sessions via sessionStorage.\n * @example\n * <schmancy-typewriter speed=\"35\" cursor-char=\"|\">\n *   Hello, world.\n * </schmancy-typewriter>\n * @platform span - Animated text container. Degrades to its raw text content if the tag never registers — animation is lost but content stays visible.\n * @fires typeit-complete - When the animation finishes typing all content. Fires after the final `afterComplete` callback in the underlying TypeIt instance.\n */\n@customElement('schmancy-typewriter')\nexport class TypewriterElement extends $LitElement(css`\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\n\t#typewriter {\n\t\tposition: relative;\n\t}\n\n\t/* Enhanced cursor with glow effect */\n\t#typewriter :global(.ti-cursor) {\n\t\tanimation: cursor-pulse 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n\t\tcolor: currentColor;\n\t\tfilter: drop-shadow(0 0 8px currentColor);\n\t}\n\n\t@keyframes cursor-pulse {\n\t\t0%, 100% {\n\t\t\topacity: 1;\n\t\t\ttransform: scale(1);\n\t\t}\n\t\t50% {\n\t\t\topacity: 0.3;\n\t\t\ttransform: scale(0.95);\n\t\t}\n\t}\n\n\t/* Character entrance animation */\n\t#typewriter :global(.ti-container *) {\n\t\tanimation: char-entrance 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;\n\t}\n\n\t@keyframes char-entrance {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t\ttransform: scale(0.3) translateY(10px);\n\t\t\tfilter: blur(4px);\n\t\t}\n\t\t50% {\n\t\t\topacity: 0.8;\n\t\t\ttransform: scale(1.1) translateY(-2px);\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t\ttransform: scale(1) translateY(0);\n\t\t\tfilter: blur(0);\n\t\t}\n\t}\n\n\t/* Subtle character wobble on appear */\n\t#typewriter :global(.ti-container *:nth-child(odd)) {\n\t\tanimation: char-entrance 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) backwards,\n\t\t           char-wobble 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s backwards;\n\t}\n\n\t@keyframes char-wobble {\n\t\t0%, 100% {\n\t\t\ttransform: rotate(0deg);\n\t\t}\n\t\t25% {\n\t\t\ttransform: rotate(2deg);\n\t\t}\n\t\t75% {\n\t\t\ttransform: rotate(-2deg);\n\t\t}\n\t}\n\n\t/* Deletion animation - fade out and scale down */\n\t#typewriter :global(.ti-container .deleting) {\n\t\tanimation: char-delete 0.2s cubic-bezier(0.4, 0, 1, 1) forwards;\n\t}\n\n\t@keyframes char-delete {\n\t\t0% {\n\t\t\topacity: 1;\n\t\t\ttransform: scale(1);\n\t\t\tfilter: blur(0);\n\t\t}\n\t\t50% {\n\t\t\topacity: 0.5;\n\t\t\ttransform: scale(0.8) translateY(-3px);\n\t\t}\n\t\t100% {\n\t\t\topacity: 0;\n\t\t\ttransform: scale(0.4) translateY(-8px);\n\t\t\tfilter: blur(3px);\n\t\t}\n\t}\n\n\t/* Gradient text effect on typed text */\n\t#typewriter :global(.ti-container) {\n\t\tbackground: linear-gradient(\n\t\t\t90deg,\n\t\t\tcurrentColor 0%,\n\t\t\tcurrentColor 70%,\n\t\t\ttransparent 100%\n\t\t);\n\t\t-webkit-background-clip: text;\n\t\tbackground-clip: text;\n\t\tanimation: gradient-shift 3s ease-in-out infinite;\n\t}\n\n\t@keyframes gradient-shift {\n\t\t0%, 100% {\n\t\t\tfilter: brightness(1) saturate(1);\n\t\t}\n\t\t50% {\n\t\t\tfilter: brightness(1.15) saturate(1.2);\n\t\t}\n\t}\n\n\t/* Smooth transitions for all text */\n\t#typewriter * {\n\t\ttransition: opacity 0.15s ease-out, transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);\n\t}\n`) {\n\t/**\n\t * Typing speed in milliseconds per character.\n\t */\n\t@property({ type: Number })\n\tspeed: number = 35\n\n\t/**\n\t * Delay before typing starts (ms).\n\t */\n\t@consume({ context: delayContext, subscribe: true })\n\t@property({ type: Number })\n\tdelay: number = 0\n\n\t/**\n\t * Automatically start typing on initialization.\n\t */\n\t@property({ type: Boolean })\n\tautoStart: boolean = true\n\n\t/**\n\t * The cursor character.\n\t */\n\t@property({ type: String })\n\tcursorChar: string = ''\n\n\t/**\n\t * Typing speed for deletions (ms per character).\n\t */\n\t@property({ type: Number })\n\tdeleteSpeed: number = 20\n\n\t/**\n\t * Only animate once per session.\n\t */\n\t@property({ type: Boolean }) once = true\n\n\t/**\n\t * Loop the animation infinitely (overrides once).\n\t */\n\t@property({ type: Boolean }) loop = false\n\n\t/**\n\t * Default pause duration for cycling (ms).\n\t */\n\t@property({ type: Number }) cyclePause = 1500\n\t/**\n\t * TypeIt instance. Populated after `loadTypeIt()` resolves inside\n\t * `_startTyping()` — null until then, which is correct for a cold start\n\t * where the vendor chunk hasn't loaded yet.\n\t */\n\tprivate typeItInstance: TypeItInstance | null = null\n\n\t/**\n\t * Reference to the typewriter container.\n\t */\n\t@query('#typewriter')\n\tprivate typewriterContainer!: HTMLElement\n\n\t@queryAssignedNodes({\n\t\tflatten: true,\n\t})\n\tprivate _getSlottedNodes!: Node[]\n\n\t@queryAssignedElements({\n\t\tflatten: true,\n\t})\n\tprivate _getSlottedElements!: HTMLElement[]\n\t/**\n\t * Lifecycle method called when the component is disconnected from the DOM.\n\t * Ensures that TypeIt instances are properly cleaned up.\n\t */\n\n\tprivate sessionKey = ''\n\tdisconnectedCallback() {\n\t\tsuper.disconnectedCallback()\n\t\tthis._destroyTypeIt()\n\t}\n\n\t/**\n\t * Initializes the TypeIt instance with the provided slotted content.\n\t * Async because TypeIt itself is lazy-loaded on first render.\n\t */\n\tprivate async _startTyping() {\n\t\t// Destroy any existing TypeIt instance\n\t\tthis._destroyTypeIt()\n\n\t\tthis.sessionKey = this.generateSessionKey()\n\n\t\tif (this.once && sessionStorage.getItem(this.sessionKey) === 'true') {\n\t\t\t// Skip delay and render immediately if once is set and already rendered\n\t\t\tthis.shadowRoot?.querySelector('slot')?.removeAttribute('hidden')\n\t\t\treturn\n\t\t}\n\n\t\tif (!this.typewriterContainer) {\n\t\t\tconsole.warn('Typewriter container not found.')\n\t\t\treturn\n\t\t}\n\n\t\t// Configure TypeIt options\n\t\tconst typeItOptions: TypeItOptions = {\n\t\t\tspeed: this.speed,\n\t\t\tstartDelay: this.delay,\n\t\t\tcursor: !!this.cursorChar,\n\t\t\tcursorChar: this.cursorChar,\n\t\t\tdeleteSpeed: this.deleteSpeed,\n\t\t\tloop: this.loop,\n\t\t\tafterComplete: () => {\n\t\t\t\tif (this.once && !this.loop) {\n\t\t\t\t\ttry {\n\t\t\t\t\t\tsessionStorage.setItem(this.sessionKey, 'true')\n\t\t\t\t\t} catch (error) {\n\t\t\t\t\t\tconsole.error('Error saving to session storage:', error)\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t// Dispatch the custom event\n\t\t\t\tthis.dispatchEvent(new CustomEvent('typeit-complete', { bubbles: true, composed: true }))\n\n\t\t\t\t// Hide the cursor (unless looping)\n\t\t\t\tif (!this.loop) {\n\t\t\t\t\tthis.typewriterContainer.style.setProperty('--ti-cursor-display', 'none')\n\t\t\t\t}\n\t\t\t},\n\t\t}\n\n\t\t// Load TypeIt lazily on first call (module-scope memoised promise).\n\t\tconst TypeIt = await loadTypeIt()\n\t\t// Bail if we were disconnected during the load — avoids attaching to\n\t\t// a detached host.\n\t\tif (!this.isConnected) return\n\n\t\t// Initialize TypeIt\n\t\tthis.typeItInstance = new TypeIt(this.typewriterContainer, typeItOptions)\n\n\t\t// Process slotted content as actions\n\t\tconst slottedNodes = this._getSlottedNodes\n\t\tslottedNodes.forEach(node => {\n\t\t\tif (node.nodeType === Node.TEXT_NODE) {\n\t\t\t\t// Handle plain text - skip whitespace-only text nodes\n\t\t\t\tconst textContent = node.textContent || ''\n\t\t\t\tif (textContent.trim()) {\n\t\t\t\t\tthis.typeItInstance?.type(textContent)\n\t\t\t\t}\n\t\t\t} else if (node instanceof HTMLElement) {\n\t\t\t\t// Handle custom element\n\t\t\t\tthis._processCustomElement(node)\n\t\t\t}\n\t\t})\n\n\t\t// Start the typing animation if autoStart is enabled\n\t\t// use rxjs to detect once we are in the view port\n\t\tintersection$(this.shadowRoot?.host as Element).subscribe(() => {\n\t\t\t// alert('in view')\n\t\t\tthis.typeItInstance?.go()\n\t\t})\n\t\t// Start the typing animation if autoStart is enabled\n\t}\n\n\tprivate generateSessionKey(): string {\n\t\tconst slotContent = this._getSlottedElements.map(el => el.outerHTML).join('')\n\t\treturn this.once ? hashContent(slotContent) : ''\n\t}\n\t/**\n\t * Destroys the current TypeIt instance if it exists.\n\t */\n\tprivate _destroyTypeIt() {\n\t\tif (this.typeItInstance) {\n\t\t\ttry {\n\t\t\t\tthis.typeItInstance.destroy()\n\t\t\t} catch (error) {\n\t\t\t\tconsole.error('Error destroying TypeIt instance:', error)\n\t\t\t}\n\t\t\tthis.typeItInstance = null\n\t\t}\n\t}\n\n\t/**\n\t * Processes a custom element for its typing behavior.\n\t */\n\tprivate _processCustomElement(element: HTMLElement) {\n\t\tconst action = element.getAttribute('action')\n\t\tconst value = element.getAttribute('value')\n\t\tconst cycle = element.getAttribute('cycle')\n\n\t\t// Handle cycle attribute - simple pipe-separated list\n\t\tif (cycle) {\n\t\t\tconst items = cycle.split('|').map(item => item.trim())\n\t\t\tthis._processCycle(items, element)\n\t\t\treturn\n\t\t}\n\n\t\tswitch (action) {\n\t\t\tcase 'pause':\n\t\t\t\tthis.typeItInstance?.pause(parseInt(value || '0', 10))\n\t\t\t\tbreak\n\t\t\tcase 'delete':\n\t\t\t\tthis.typeItInstance?.delete(parseInt(value || '0', 10))\n\t\t\t\tbreak\n\t\t\tdefault:\n\t\t\t\tif (element.tagName === 'P') {\n\t\t\t\t\tthis.typeItInstance?.break()\n\t\t\t\t}\n\t\t\t\t// Treat as text if no action is defined\n\t\t\t\tthis.typeItInstance?.type(element.textContent || '')\n\t\t\t\tbreak\n\t\t}\n\t}\n\n\t/**\n\t * Processes cycling text with auto-calculated delete counts.\n\t */\n\tprivate _processCycle(items: string[], element: HTMLElement) {\n\t\tif (items.length === 0) return\n\n\t\tconst customPause = element.getAttribute('pause')\n\t\tconst pauseDuration = customPause ? parseInt(customPause, 10) : this.cyclePause\n\n\t\t// Type each item with automatic deletion\n\t\titems.forEach((item, index) => {\n\t\t\t// Type the item\n\t\t\tthis.typeItInstance?.type(item)\n\n\t\t\t// Pause after typing (except after last item when not looping)\n\t\t\tif (index < items.length - 1 || this.loop) {\n\t\t\t\tthis.typeItInstance?.pause(pauseDuration)\n\t\t\t}\n\n\t\t\t// Delete back to start (except for last item when not looping)\n\t\t\tif (index < items.length - 1) {\n\t\t\t\tthis.typeItInstance?.delete(item.length)\n\t\t\t} else if (this.loop) {\n\t\t\t\t// For looping, delete and start over\n\t\t\t\tthis.typeItInstance?.delete(item.length)\n\t\t\t}\n\t\t})\n\t}\n\n\t/**\n\t * Renders the component's HTML.\n\t */\n\trender(): TemplateResult {\n\t\treturn html`<div id=\"typewriter\" aria-live=\"polite\"></div>\n\n\t\t\t<div class=\"typewriter\">\n\t\t\t\t<slot\n\t\t\t\t\thidden\n\t\t\t\t\t@slotchange=${() => {\n\t\t\t\t\t\tthis._startTyping()\n\t\t\t\t\t}}\n\t\t\t\t></slot>\n\t\t\t</div> `\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-typewriter': TypewriterElement\n\t}\n}\n"],"mappings":"2aAeA,IAAI,EAA4C,KAoBzC,EAAA,cAAgC,EAAA,EAAY,EAAA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4CAwHrC,GAAA,KAAA,MAOA,EAAA,KAAA,UAAA,CAMK,EAAA,KAAA,WAMA,GAAA,KAAA,YAMC,GAAA,KAAA,KAAA,CAKc,EAAA,KAAA,KAAA,CAKA,EAAA,KAAA,WAKK,KAAA,KAAA,eAMO,KAAA,KAAA,WAsB3B,GACrB,sBAAA,CACC,MAAM,sBAAA,CACN,KAAK,gBAAA,CAON,MAAA,cAAc,CAMb,GAJA,KAAK,gBAAA,CAEL,KAAK,WAAa,KAAK,oBAAA,CAEnB,KAAK,MAAQ,eAAe,QAAQ,KAAK,WAAA,GAAgB,OAG5D,OAAA,KADA,KAAK,YAAY,cAAc,OAAA,EAAS,gBAAgB,SAAA,CAIzD,GAAA,CAAK,KAAK,oBAET,OAID,IAAM,EAA+B,CACpC,MAAO,KAAK,MACZ,WAAY,KAAK,MACjB,OAAA,CAAA,CAAU,KAAK,WACf,WAAY,KAAK,WACjB,YAAa,KAAK,YAClB,KAAM,KAAK,KACX,kBAAA,CACC,GAAI,KAAK,MAAA,CAAS,KAAK,KACtB,GAAA,CACC,eAAe,QAAQ,KAAK,WAAY,OAAA,MAChC,EAKV,KAAK,cAAc,IAAI,YAAY,kBAAmB,CAAE,QAAA,CAAS,EAAM,SAAA,CAAU,EAAA,CAAA,CAAA,CAG5E,KAAK,MACT,KAAK,oBAAoB,MAAM,YAAY,sBAAuB,OAAA,EAAA,CAM/D,EAAA,MApQH,AACJ,IAAA,QAAA,SAAA,CAAA,SAAA,QAAgB,0BAAA,CAAA,CAAiB,KAAK,GAAK,EAAE,QAAA,EAsQvC,KAAK,cAGV,KAAK,eAAiB,IAAI,EAAO,KAAK,oBAAqB,EAAA,CAGtC,KAAK,iBACb,QAAQ,GAAA,CACpB,GAAI,EAAK,WAAa,KAAK,UAAW,CAErC,IAAM,EAAc,EAAK,aAAe,GACpC,EAAY,MAAA,EACf,KAAK,gBAAgB,KAAK,EAAA,MAEjB,aAAgB,aAE1B,KAAK,sBAAsB,EAAA,EAAA,CAM7B,EAAA,EAAc,KAAK,YAAY,KAAA,CAAiB,cAAA,CAE/C,KAAK,gBAAgB,IAAA,EAAA,EAKvB,oBAAA,CACC,IAAM,EAAc,KAAK,oBAAoB,IAAI,GAAM,EAAG,UAAA,CAAW,KAAK,GAAA,CAC1E,OAAO,KAAK,KAAO,EAAA,EAAY,EAAA,CAAe,GAK/C,gBAAA,CACC,GAAI,KAAK,eAAgB,CACxB,GAAA,CACC,KAAK,eAAe,SAAA,MACZ,EAGT,KAAK,eAAiB,MAOxB,sBAA8B,EAAA,CAC7B,IAAM,EAAS,EAAQ,aAAa,SAAA,CAC9B,EAAQ,EAAQ,aAAa,QAAA,CAC7B,EAAQ,EAAQ,aAAa,QAAA,CAGnC,GAAI,EAAO,CACV,IAAM,EAAQ,EAAM,MAAM,IAAA,CAAK,IAAI,GAAQ,EAAK,MAAA,CAAA,CAChD,KAAK,cAAc,EAAO,EAAA,CAC1B,OAGD,OAAQ,EAAR,CACC,IAAK,QACJ,KAAK,gBAAgB,MAAM,SAAS,GAAS,IAAK,GAAA,CAAA,CAClD,MACD,IAAK,SACJ,KAAK,gBAAgB,OAAO,SAAS,GAAS,IAAK,GAAA,CAAA,CACnD,MACD,QACK,EAAQ,UAAY,KACvB,KAAK,gBAAgB,OAAA,CAGtB,KAAK,gBAAgB,KAAK,EAAQ,aAAe,GAAA,EAQpD,cAAsB,EAAiB,EAAA,CACtC,GAAI,EAAM,SAAW,EAAG,OAExB,IAAM,EAAc,EAAQ,aAAa,QAAA,CACnC,EAAgB,EAAc,SAAS,EAAa,GAAA,CAAM,KAAK,WAGrE,EAAM,SAAS,EAAM,IAAA,CAEpB,KAAK,gBAAgB,KAAK,EAAA,EAGtB,EAAQ,EAAM,OAAS,GAAK,KAAK,OACpC,KAAK,gBAAgB,MAAM,EAAA,EAIxB,EAAQ,EAAM,OAAS,GAEhB,KAAK,OADf,KAAK,gBAAgB,OAAO,EAAK,OAAA,EAAA,CAWpC,QAAA,CACC,MAAO,GAAA,IAAI;;;;;wBAMP,KAAK,cAAA,EAAA;;kCApPA,CAAE,KAAM,OAAA,CAAA,CAAA,CAAS,EAAA,UAAA,QAAA,IAAA,GAAA,CAAA,EAAA,EAAA,CAM1B,EAAA,EAAQ,CAAE,QAAS,EAAA,EAAc,UAAA,CAAW,EAAA,CAAA,EAAO,EAAA,EAAA,UAC1C,CAAE,KAAM,OAAA,CAAA,CAAA,CAAS,EAAA,UAAA,QAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UAMjB,CAAE,KAAM,QAAA,CAAA,CAAA,CAAU,EAAA,UAAA,YAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UAMlB,CAAE,KAAM,OAAA,CAAA,CAAA,CAAS,EAAA,UAAA,aAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UAMjB,CAAE,KAAM,OAAA,CAAA,CAAA,CAAS,EAAA,UAAA,cAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UAMjB,CAAE,KAAM,QAAA,CAAA,CAAA,CAAU,EAAA,UAAA,OAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UAKlB,CAAE,KAAM,QAAA,CAAA,CAAA,CAAU,EAAA,UAAA,OAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UAKlB,CAAE,KAAM,OAAA,CAAA,CAAA,CAAS,EAAA,UAAA,aAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,OAWpB,cAAA,CAAA,CAAc,EAAA,UAAA,sBAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,oBAGD,CACnB,QAAA,CAAS,EAAA,CAAA,CAAA,CACR,EAAA,UAAA,mBAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,uBAGqB,CACtB,QAAA,CAAS,EAAA,CAAA,CAAA,CACR,EAAA,UAAA,sBAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,eAtLY,sBAAA,CAAA,CAAsB,EAAA,CAAA,OAAA,eAAA,QAAA,oBAAA,CAAA,WAAA,CAAA,EAAA,IAAA,UAAA,CAAA,OAAA,GAAA,CAAA"}
+{"version":3,"file":"typewriter.cjs","names":[],"sources":["../src/typewriter/typewriter.directive.ts"],"sourcesContent":["/**\n * Typewriter Directive - RxJS-based typing animation\n *\n * Creates a smooth typewriter effect with automatic cycling through phrases.\n * Uses RxJS for precise timing and clean reactive patterns.\n *\n * @example\n * ```ts\n * // Simple cycling through words\n * html`<div ${typewriter(['Trustless', 'Permissionless', 'Transparent'])}>\n *   <span class=\"typed\"></span>\n * </div>`\n *\n * // Custom speeds and pauses\n * html`<div ${typewriter(['Fast', 'Typing'], { typeSpeed: 50, pauseDuration: 1000 })}>\n *   <span class=\"typed\"></span>\n * </div>`\n *\n * // One-time typing (no loop)\n * html`<div ${typewriter(['Hello World'], { loop: false })}>\n *   <span class=\"typed\"></span>\n * </div>`\n * ```\n */\n\nimport type { ElementPart } from 'lit'\nimport { noChange } from 'lit'\nimport { AsyncDirective, directive } from 'lit/async-directive.js'\nimport { concat, defer, EMPTY, interval, of, Subscription } from 'rxjs'\nimport { delay, repeat, take, tap } from 'rxjs/operators'\n\nexport interface TypewriterOptions {\n\ttypeSpeed?: number // Speed of typing (ms per character)\n\tdeleteSpeed?: number // Speed of deleting (ms per character)\n\tpauseDuration?: number // Pause after typing before deleting (ms)\n\tloop?: boolean // Whether to loop through phrases\n\tselector?: string // CSS selector for target element (default: '.typed')\n\tcursor?: boolean // Show cursor\n\tfinalMessage?: string // Message to display after cycling completes\n\tsound?: boolean // Play typewriter sounds (default: true)\n\tvolume?: number // Sound volume (0-1, default: 0.3)\n}\n\ninterface TypewriterState {\n\tphrases: string[]\n\toptions: Required<TypewriterOptions>\n\telement?: HTMLElement\n\ttargetElement?: HTMLElement\n\tsubscription?: Subscription\n\taudioContext?: AudioContext\n}\n\n// Typewriter sound generator using Web Audio API\nclass TypewriterSound {\n\tprivate audioContext: AudioContext\n\tprivate volume: number\n\n\tconstructor(volume: number = 0.3) {\n\t\tthis.audioContext = new AudioContext()\n\t\tthis.volume = Math.max(0, Math.min(1, volume))\n\t}\n\n\t// Generate cute, soft typing sound - like a gentle \"pop\"\n\tplayKeyPress() {\n\t\tconst now = this.audioContext.currentTime\n\n\t\t// Higher, softer main tone - more \"pop\" than \"clack\"\n\t\tconst osc = this.audioContext.createOscillator()\n\t\tconst gainNode = this.audioContext.createGain()\n\n\t\t// Higher base frequency for cute sound + randomness\n\t\tconst baseFreq = 800 + Math.random() * 200\n\t\tosc.frequency.setValueAtTime(baseFreq, now)\n\t\tosc.type = 'sine' // Smoother, rounder sound\n\n\t\t// Gentler attack, quick but soft\n\t\tgainNode.gain.setValueAtTime(0, now)\n\t\tgainNode.gain.linearRampToValueAtTime(this.volume * 0.2, now + 0.005)\n\t\tgainNode.gain.exponentialRampToValueAtTime(0.001, now + 0.03)\n\n\t\tosc.connect(gainNode)\n\t\tgainNode.connect(this.audioContext.destination)\n\n\t\tosc.start(now)\n\t\tosc.stop(now + 0.03)\n\n\t\t// Add a cute high \"bleep\" for character\n\t\tconst bleepOsc = this.audioContext.createOscillator()\n\t\tconst bleepGain = this.audioContext.createGain()\n\n\t\tbleepOsc.frequency.setValueAtTime(1800 + Math.random() * 400, now)\n\t\tbleepOsc.type = 'sine'\n\n\t\tbleepGain.gain.setValueAtTime(0, now)\n\t\tbleepGain.gain.linearRampToValueAtTime(this.volume * 0.08, now + 0.003)\n\t\tbleepGain.gain.exponentialRampToValueAtTime(0.001, now + 0.015)\n\n\t\tbleepOsc.connect(bleepGain)\n\t\tbleepGain.connect(this.audioContext.destination)\n\n\t\tbleepOsc.start(now)\n\t\tbleepOsc.stop(now + 0.015)\n\t}\n\n\t// Softer \"whoosh\" sound for deletion - like erasing\n\tplayDelete() {\n\t\tconst now = this.audioContext.currentTime\n\n\t\tconst osc = this.audioContext.createOscillator()\n\t\tconst gainNode = this.audioContext.createGain()\n\n\t\t// Descending pitch for \"erasing\" feel\n\t\tosc.frequency.setValueAtTime(600, now)\n\t\tosc.frequency.exponentialRampToValueAtTime(200, now + 0.04)\n\t\tosc.type = 'sine'\n\n\t\tgainNode.gain.setValueAtTime(0, now)\n\t\tgainNode.gain.linearRampToValueAtTime(this.volume * 0.12, now + 0.005)\n\t\tgainNode.gain.exponentialRampToValueAtTime(0.001, now + 0.04)\n\n\t\tosc.connect(gainNode)\n\t\tgainNode.connect(this.audioContext.destination)\n\n\t\tosc.start(now)\n\t\tosc.stop(now + 0.04)\n\t}\n\n\tcleanup() {\n\t\tthis.audioContext.close()\n\t}\n}\n\nclass TypewriterDirective extends AsyncDirective {\n\tprivate state: TypewriterState | null = null\n\tprivate soundEngine: TypewriterSound | null = null\n\n\trender(_phrases: string[], _options: TypewriterOptions = {}) {\n\t\treturn noChange\n\t}\n\n\toverride update(\n\t\tpart: ElementPart,\n\t\t[phrases, options = {}]: [string[], TypewriterOptions]\n\t) {\n\t\tconst element = part.element as HTMLElement\n\n\t\t// Clean up if params changed\n\t\tif (\n\t\t\tthis.state &&\n\t\t\t(JSON.stringify(this.state.phrases) !== JSON.stringify(phrases) ||\n\t\t\t\tJSON.stringify(this.state.options) !== JSON.stringify(options))\n\t\t) {\n\t\t\tthis.cleanup()\n\t\t}\n\n\t\t// Initialize state\n\t\tif (!this.state) {\n\t\t\tconst defaultOptions: Required<TypewriterOptions> = {\n\t\t\t\ttypeSpeed: 50,\n\t\t\t\tdeleteSpeed: 30,\n\t\t\t\tpauseDuration: 1500,\n\t\t\t\tloop: true,\n\t\t\t\tselector: '.typed',\n\t\t\t\tcursor: false,\n\t\t\t\tfinalMessage: '',\n\t\t\t\tsound: true,\n\t\t\t\tvolume: 0.08,\n\t\t\t}\n\n\t\t\tthis.state = {\n\t\t\t\tphrases,\n\t\t\t\toptions: { ...defaultOptions, ...options },\n\t\t\t\telement,\n\t\t\t}\n\n\t\t\t// Initialize sound engine if enabled\n\t\t\tif (this.state.options.sound) {\n\t\t\t\tthis.soundEngine = new TypewriterSound(this.state.options.volume)\n\t\t\t}\n\n\t\t\t// Find target element\n\t\t\tthis.state.targetElement = element.querySelector<HTMLElement>(\n\t\t\t\tthis.state.options.selector\n\t\t\t) ?? undefined\n\n\t\t\tif (!this.state.targetElement) {\n\t\t\t\tconsole.warn(\n\t\t\t\t\t`Typewriter: Target element \"${this.state.options.selector}\" not found`\n\t\t\t\t)\n\t\t\t\treturn noChange\n\t\t\t}\n\n\t\t\t// Add cursor if enabled\n\t\t\tif (this.state.options.cursor) {\n\t\t\t\tthis.state.targetElement.style.position = 'relative'\n\t\t\t\tthis.state.targetElement.style.display = 'inline-block'\n\t\t\t\tconst cursor = document.createElement('span')\n\t\t\t\tcursor.className = 'typewriter-cursor'\n\t\t\t\tcursor.textContent = '|'\n\t\t\t\tcursor.style.cssText = `\n\t\t\t\t\tdisplay: inline-block;\n\t\t\t\t\tmargin-left: 2px;\n\t\t\t\t\tanimation: typewriter-blink 1s step-end infinite;\n\t\t\t\t`\n\t\t\t\tthis.state.targetElement.appendChild(cursor)\n\n\t\t\t\t// Add blink animation if not already present\n\t\t\t\tif (!document.getElementById('typewriter-styles')) {\n\t\t\t\t\tconst style = document.createElement('style')\n\t\t\t\t\tstyle.id = 'typewriter-styles'\n\t\t\t\t\tstyle.textContent = `\n\t\t\t\t\t\t@keyframes typewriter-blink {\n\t\t\t\t\t\t\t0%, 50% { opacity: 1; }\n\t\t\t\t\t\t\t51%, 100% { opacity: 0; }\n\t\t\t\t\t\t}\n\t\t\t\t\t`\n\t\t\t\t\tdocument.head.appendChild(style)\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tthis.startTyping()\n\t\t}\n\n\t\treturn noChange\n\t}\n\n\tprivate startTyping() {\n\t\tif (!this.state || !this.state.targetElement) return\n\n\t\tconst { phrases, options, targetElement } = this.state\n\n\t\t// Create typing observable for a single phrase\n\t\tconst typePhrase = (phrase: string, shouldDelete: boolean = true) => {\n\t\t\treturn concat(\n\t\t\t\t// Type each character\n\t\t\t\tdefer(() => {\n\t\t\t\t\tconst chars = phrase.split('')\n\t\t\t\t\treturn concat(\n\t\t\t\t\t\t...chars.map((char) =>\n\t\t\t\t\t\t\tof(char).pipe(\n\t\t\t\t\t\t\t\tdelay(options.typeSpeed),\n\t\t\t\t\t\t\t\ttap((c) => {\n\t\t\t\t\t\t\t\t\tconst textNode = this.getTextNode(targetElement)\n\t\t\t\t\t\t\t\t\tif (textNode) {\n\t\t\t\t\t\t\t\t\t\ttextNode.textContent += c\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t// Play key press sound\n\t\t\t\t\t\t\t\t\tif (this.soundEngine) {\n\t\t\t\t\t\t\t\t\t\tthis.soundEngine.playKeyPress()\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t)\n\t\t\t\t\t)\n\t\t\t\t}),\n\t\t\t\t// Pause after typing\n\t\t\t\tof(null).pipe(delay(options.pauseDuration)),\n\t\t\t\t// Delete each character (only if shouldDelete is true)\n\t\t\t\tshouldDelete ? defer(() => {\n\t\t\t\t\tconst deleteCount = phrase.length\n\t\t\t\t\treturn interval(options.deleteSpeed).pipe(\n\t\t\t\t\t\ttake(deleteCount),\n\t\t\t\t\t\ttap(() => {\n\t\t\t\t\t\t\tconst textNode = this.getTextNode(targetElement)\n\t\t\t\t\t\t\tif (textNode && textNode.textContent) {\n\t\t\t\t\t\t\t\ttextNode.textContent = textNode.textContent.slice(0, -1)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t// Play delete sound\n\t\t\t\t\t\t\tif (this.soundEngine) {\n\t\t\t\t\t\t\t\tthis.soundEngine.playDelete()\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t})\n\t\t\t\t\t)\n\t\t\t\t}) : EMPTY,\n\t\t\t\t// Small pause before next phrase\n\t\t\t\tshouldDelete ? of(null).pipe(delay(200)) : EMPTY\n\t\t\t)\n\t\t}\n\n\t\t// Create observable that cycles through all phrases\n\t\tconst phrasesSequence = concat(\n\t\t\t...phrases.map((phrase) => typePhrase(phrase))\n\t\t)\n\n\t\t// Add final message if provided\n\t\tconst typingSequence = options.finalMessage\n\t\t\t? concat(\n\t\t\t\t\tphrasesSequence,\n\t\t\t\t\ttypePhrase(options.finalMessage, false) // Don't delete final message\n\t\t\t\t)\n\t\t\t: phrasesSequence\n\n\t\t// Subscribe and optionally loop\n\t\tthis.state.subscription = (\n\t\t\toptions.loop ? phrasesSequence.pipe(repeat()) : typingSequence\n\t\t).subscribe({\n\t\t\terror: (err) => console.error('Typewriter error:', err),\n\t\t})\n\t}\n\n\tprivate getTextNode(targetElement: HTMLElement): Text | null {\n\t\t// Get or create text node (ignoring cursor element)\n\t\tfor (const child of Array.from(targetElement.childNodes)) {\n\t\t\tif (child.nodeType === Node.TEXT_NODE) {\n\t\t\t\treturn child as Text\n\t\t\t}\n\t\t}\n\t\t// Create text node if it doesn't exist\n\t\tconst textNode = document.createTextNode('')\n\t\ttargetElement.insertBefore(textNode, targetElement.firstChild)\n\t\treturn textNode\n\t}\n\n\tprivate cleanup() {\n\t\tif (!this.state) return\n\n\t\t// Unsubscribe from typing observable\n\t\tif (this.state.subscription) {\n\t\t\tthis.state.subscription.unsubscribe()\n\t\t}\n\n\t\t// Remove cursor if present\n\t\tif (this.state.targetElement) {\n\t\t\tconst cursor = this.state.targetElement.querySelector('.typewriter-cursor')\n\t\t\tcursor?.remove()\n\t\t}\n\n\t\t// Cleanup sound engine\n\t\tif (this.soundEngine) {\n\t\t\tthis.soundEngine.cleanup()\n\t\t\tthis.soundEngine = null\n\t\t}\n\n\t\tthis.state = null\n\t}\n\n\toverride disconnected() {\n\t\tthis.cleanup()\n\t}\n\n\toverride reconnected(): void {\n\t\t// Re-start typing if state exists\n\t\tif (this.state && !this.state.subscription) {\n\t\t\tthis.startTyping()\n\t\t}\n\t}\n}\n\nexport const typewriter = directive(TypewriterDirective)\n"],"mappings":"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"}