@mhmo91/schmancy 0.10.6 → 0.10.8

package/dist/timeline.js

@@ -1,326 +0,0 @@
-import { s as e } from "./mixins-Dw6hVfy-.js";
-import { t } from "./decorate-23nYs4Le.js";
-import { EMPTY as n, Observable as r, distinctUntilChanged as i, fromEvent as a, map as o, of as s, switchMap as c, takeUntil as l, timer as u } from "rxjs";
-import { customElement as d, property as f } from "lit/decorators.js";
-import { css as p, html as m } from "lit";
-import { when as h } from "lit/directives/when.js";
-var g = class extends e {
-	constructor(...e) {
-		super(...e), this.state = "empty", this.glyph = "", this._onClick = () => {
-			this.state !== "empty" && this.dispatchEvent(new CustomEvent("tile-click", {
-				detail: {
-					glyph: this.glyph,
-					state: this.state
-				},
-				bubbles: !0,
-				composed: !0
-			}));
-		};
-	}
-	static {
-		this.styles = [p`
-	:host {
-		--schmancy-tile-w: 32px;
-		--schmancy-tile-h: 40px;
-		display: inline-block;
-		position: relative;
-		width: var(--schmancy-tile-w);
-		height: var(--schmancy-tile-h);
-		font-size: 14px;
-		line-height: 1.45;
-	}
-
-	/* Inner box that paints the cell. The host is a layout container only;
-	   the box owns the border / background / hover transform so the host
-	   stays a clean focus target. */
-	.tile {
-		position: absolute;
-		inset: 0;
-		border-radius: 2px;
-		overflow: visible;
-		appearance: none;
-		padding: 0;
-		font: inherit;
-		color: inherit;
-		background: transparent;
-		z-index: 1;
-		transition:
-			transform 120ms ease-in-out,
-			box-shadow 120ms ease-in-out,
-			border-color 120ms ease-in-out;
-	}
-
-	/* Empty state */
-	:host([state='empty']) .tile {
-		border: 1px dashed var(--schmancy-sys-color-outline);
-		background: transparent;
-		cursor: default;
-	}
-
-	:host([state='empty']) .glyph {
-		color: var(--schmancy-sys-color-surface-onVariant);
-		opacity: 0.7;
-	}
-
-	/* Shared filled-state card styling (filled / stack-top / stack-sibling) */
-	:host([state='filled']) .tile,
-	:host([state='stack-top']) .tile,
-	:host([state='stack-sibling']) .tile {
-		border: 1px solid var(--schmancy-sys-color-outline);
-		background: var(--schmancy-sys-color-surface-containerLowest);
-		cursor: pointer;
-		box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
-	}
-
-	/* Paper-card line texture: five thin lines emulating ruled paper */
-	:host([state='filled']) .tile::before,
-	:host([state='stack-top']) .tile::before,
-	:host([state='stack-sibling']) .tile::before {
-		content: '';
-		position: absolute;
-		left: 4px;
-		right: 4px;
-		top: 16px;
-		bottom: 5px;
-		background-image:
-			linear-gradient(var(--schmancy-sys-color-outline) 1px, transparent 1px),
-			linear-gradient(var(--schmancy-sys-color-outline) 1px, transparent 1px),
-			linear-gradient(var(--schmancy-sys-color-outline) 1px, transparent 1px),
-			linear-gradient(var(--schmancy-sys-color-outline) 1px, transparent 1px),
-			linear-gradient(var(--schmancy-sys-color-outline) 1px, transparent 1px);
-		background-repeat: no-repeat;
-		background-size:
-			100% 1px,
-			80% 1px,
-			92% 1px,
-			65% 1px,
-			78% 1px;
-		background-position:
-			0 0,
-			0 4px,
-			0 8px,
-			0 12px,
-			0 16px;
-		opacity: 0.3;
-		pointer-events: none;
-		z-index: 0;
-	}
-
-	/* Tinted accent strip across the top edge */
-	:host([state='filled']) .tile::after,
-	:host([state='stack-top']) .tile::after,
-	:host([state='stack-sibling']) .tile::after {
-		content: '';
-		position: absolute;
-		left: 0;
-		right: 0;
-		top: 0;
-		height: 11px;
-		background: color-mix(
-			in oklch,
-			var(--schmancy-sys-color-primary-default) 10%,
-			transparent
-		);
-		border-bottom: 1px solid
-			color-mix(
-				in oklch,
-				var(--schmancy-sys-color-primary-default) 25%,
-				var(--schmancy-sys-color-outline)
-			);
-		pointer-events: none;
-	}
-
-	:host([state='filled']) .glyph,
-	:host([state='stack-top']) .glyph,
-	:host([state='stack-sibling']) .glyph {
-		color: var(--schmancy-sys-color-primary-onContainer);
-	}
-
-	/* Single-card hover: lift 1px + soft shadow */
-	:host([state='filled']) .tile:hover {
-		border-color: var(--schmancy-sys-color-primary-default);
-		transform: translateY(-1px);
-		box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
-	}
-
-	/* Focus ring in primary color */
-	:host([state='filled']) .tile:focus-visible,
-	:host([state='stack-top']) .tile:focus-visible,
-	:host([state='stack-sibling']) .tile:focus-visible {
-		outline: 2px solid var(--schmancy-sys-color-primary-default);
-		outline-offset: 3px;
-	}
-
-	/* Stacked tiles position absolutely on the host's grid cell so the
-	   wrapper's --fan-count / --i custom properties drive the offset. */
-	:host([state='stack-top']),
-	:host([state='stack-sibling']) {
-		position: absolute;
-		top: 0;
-		left: 0;
-		transition:
-			transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1),
-			box-shadow 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
-		transform: translate(
-			calc((var(--fan-count, 1) - 1 - var(--i, 0)) * -3px),
-			calc((var(--fan-count, 1) - 1 - var(--i, 0)) * 3px)
-		);
-	}
-
-	/* Sibling tiles only become interactive once the wrapper is fanned —
-	   otherwise they're stacked underneath and would steal pointer events
-	   from the top card. */
-	:host([state='stack-sibling']) {
-		pointer-events: none;
-	}
-
-	/* Fanned: every tile slides edge-to-edge along the wrapper's row */
-	:host([state='stack-top']:host-context([data-fanned])),
-	:host-context([data-fanned]):host([state='stack-top']) {
-		transform: translate(
-			calc((var(--fan-count, 1) - 1 - var(--i, 0)) * var(--schmancy-tile-w) * -1),
-			0
-		);
-		box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
-	}
-
-	:host([state='stack-sibling']:host-context([data-fanned])),
-	:host-context([data-fanned]):host([state='stack-sibling']) {
-		pointer-events: auto;
-		transform: translate(
-			calc((var(--fan-count, 1) - 1 - var(--i, 0)) * var(--schmancy-tile-w) * -1),
-			0
-		);
-		box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
-	}
-
-	:host-context([data-fanned]):host([state='stack-top']) .tile:hover,
-	:host-context([data-fanned]):host([state='stack-sibling']) .tile:hover {
-		border-color: var(--schmancy-sys-color-primary-default);
-		box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);
-	}
-
-	.glyph {
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-		height: 11px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		font-size: 7.5px;
-		font-weight: 500;
-		letter-spacing: 0.12em;
-		line-height: 1;
-		z-index: 1;
-		font-variant-caps: all-petite-caps;
-	}
-
-	.tooltip {
-		position: absolute;
-		bottom: calc(100% + 6px);
-		left: 50%;
-		transform: translate(-50%, 2px);
-		font-size: 10px;
-		line-height: 1.2;
-		color: var(--schmancy-sys-color-surface-on);
-		background: var(--schmancy-sys-color-surface-containerLowest);
-		border: 1px solid var(--schmancy-sys-color-outline);
-		padding: 2px 6px;
-		border-radius: 3px;
-		white-space: nowrap;
-		opacity: 0;
-		pointer-events: none;
-		transition:
-			opacity 150ms ease-in-out,
-			transform 150ms ease-in-out;
-		z-index: 2;
-	}
-
-	.tile:hover .tooltip,
-	.tile:focus-visible .tooltip {
-		opacity: 1;
-		transform: translate(-50%, 0);
-	}
-
-	.caption {
-		position: absolute;
-		top: calc(100% + 6px);
-		left: 50%;
-		transform: translateX(-50%);
-		font-size: 11px;
-		line-height: 1.2;
-		font-weight: 500;
-		white-space: nowrap;
-		color: var(--schmancy-sys-color-surface-on);
-		font-variant-numeric: tabular-nums;
-	}
-
-	.stack-count {
-		position: absolute;
-		top: -5px;
-		right: -7px;
-		min-width: 14px;
-		height: 14px;
-		padding: 0 4px;
-		border-radius: 7px;
-		background: var(--schmancy-sys-color-primary-default);
-		color: var(--schmancy-sys-color-primary-on);
-		font-size: 9px;
-		font-weight: 500;
-		line-height: 14px;
-		text-align: center;
-		z-index: 10;
-		pointer-events: none;
-		transition: opacity 150ms ease-in-out;
-	}
-
-	:host-context([data-fanned]) .stack-count {
-		opacity: 0;
-	}
-`];
-	}
-	connectedCallback() {
-		if (super.connectedCallback(), this.index !== void 0 && this.style.setProperty("--i", String(this.index)), this.state !== "stack-top") return;
-		let e = this.parentElement;
-		e && a(e, "pointerover").pipe(o((e) => e.target?.closest("[data-stack-id]") ?? null), i(), c((t) => t === e ? s(e) : u(800).pipe(o(() => null))), i(), c((e) => e ? new r(() => (e.setAttribute("data-fanned", ""), () => e.removeAttribute("data-fanned"))) : n), l(this.disconnecting)).subscribe();
-	}
-	updated(e) {
-		super.updated(e), e.has("index") && this.index !== void 0 && this.style.setProperty("--i", String(this.index));
-	}
-	_ariaLabel() {
-		let e = [this.glyph];
-		return this.caption && e.push(this.caption), this.tooltip && e.push(this.tooltip), this.state === "empty" && e.push("empty"), e.join(" · ");
-	}
-	render() {
-		let e = this.state !== "empty", t = this._ariaLabel();
-		return m`
-			<button
-				type="button"
-				class="tile"
-				role=${e ? "button" : "presentation"}
-				tabindex=${e ? 0 : -1}
-				aria-label=${t}
-				?disabled=${!e}
-				@click=${this._onClick}
-			>
-				<span class="glyph">${this.glyph}</span>
-				${h(this.tooltip && e, () => m`<span class="tooltip">${this.tooltip}</span>`)}
-				${h(this.caption && this.state !== "stack-sibling", () => m`<span class="caption">${this.caption}</span>`)}
-				${h(this.state === "stack-top" && this.stackCount !== void 0 && this.stackCount > 1, () => m`<span class="stack-count">×${this.stackCount}</span>`)}
-			</button>
-		`;
-	}
-};
-t([f({
-	type: String,
-	reflect: !0
-})], g.prototype, "state", void 0), t([f({ type: String })], g.prototype, "glyph", void 0), t([f({
-	type: Number,
-	attribute: "stack-count"
-})], g.prototype, "stackCount", void 0), t([f({
-	type: Number,
-	reflect: !0
-})], g.prototype, "index", void 0), t([f({ type: String })], g.prototype, "tooltip", void 0), t([f({ type: String })], g.prototype, "caption", void 0), g = t([d("schmancy-timeline-tile")], g);
-export { g as SchmancyTimelineTile };

package/dist/timeline.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"timeline.js","names":[],"sources":["../src/timeline/timeline-tile.ts"],"sourcesContent":["/**\n * Timeline tile — one cell in a procurement-stage rail.\n *\n * Three render states (one component, four `state` values):\n *   - `empty`         dashed-border outline + glyph\n *   - `filled`        paper-card with glyph; hoverable / focusable / clickable\n *   - `stack-top`     paper-card on top of N siblings; carries the ×N badge\n *   - `stack-sibling` paper-card behind the top; revealed when the wrapper\n *                     is fanned\n *\n * Stack fan is coordinated by a `data-fanned` attribute on the parent\n * wrapper element. The `stack-top` tile owns the orchestration: a\n * `pointerover` pipe on the wrapper element with hover-intent (immediate\n * enter, 800ms leave debounce) toggles the attribute. Sibling tiles read\n * the attribute via the `:host-context([data-fanned])` selector. Native\n * `:hover` would drop the moment the cursor crosses the gap between\n * fanned siblings; the attribute survives that crossing because the\n * pointerover stream stays on the wrapper subtree.\n */\nimport { SchmancyElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { when } from 'lit/directives/when.js'\nimport {\n\tEMPTY,\n\tObservable,\n\tdistinctUntilChanged,\n\tfromEvent,\n\tmap,\n\tof,\n\tswitchMap,\n\ttakeUntil,\n\ttimer,\n} from 'rxjs'\n\nexport type TimelineTileState = 'empty' | 'filled' | 'stack-top' | 'stack-sibling'\n\nexport type TimelineTileClickEvent = CustomEvent<{\n\tglyph: string\n\tstate: TimelineTileState\n}>\n\n@customElement('schmancy-timeline-tile')\nexport class SchmancyTimelineTile extends SchmancyElement {\n\tstatic styles = [css`\n\t:host {\n\t\t--schmancy-tile-w: 32px;\n\t\t--schmancy-tile-h: 40px;\n\t\tdisplay: inline-block;\n\t\tposition: relative;\n\t\twidth: var(--schmancy-tile-w);\n\t\theight: var(--schmancy-tile-h);\n\t\tfont-size: 14px;\n\t\tline-height: 1.45;\n\t}\n\n\t/* Inner box that paints the cell. The host is a layout container only;\n\t   the box owns the border / background / hover transform so the host\n\t   stays a clean focus target. */\n\t.tile {\n\t\tposition: absolute;\n\t\tinset: 0;\n\t\tborder-radius: 2px;\n\t\toverflow: visible;\n\t\tappearance: none;\n\t\tpadding: 0;\n\t\tfont: inherit;\n\t\tcolor: inherit;\n\t\tbackground: transparent;\n\t\tz-index: 1;\n\t\ttransition:\n\t\t\ttransform 120ms ease-in-out,\n\t\t\tbox-shadow 120ms ease-in-out,\n\t\t\tborder-color 120ms ease-in-out;\n\t}\n\n\t/* Empty state */\n\t:host([state='empty']) .tile {\n\t\tborder: 1px dashed var(--schmancy-sys-color-outline);\n\t\tbackground: transparent;\n\t\tcursor: default;\n\t}\n\n\t:host([state='empty']) .glyph {\n\t\tcolor: var(--schmancy-sys-color-surface-onVariant);\n\t\topacity: 0.7;\n\t}\n\n\t/* Shared filled-state card styling (filled / stack-top / stack-sibling) */\n\t:host([state='filled']) .tile,\n\t:host([state='stack-top']) .tile,\n\t:host([state='stack-sibling']) .tile {\n\t\tborder: 1px solid var(--schmancy-sys-color-outline);\n\t\tbackground: var(--schmancy-sys-color-surface-containerLowest);\n\t\tcursor: pointer;\n\t\tbox-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);\n\t}\n\n\t/* Paper-card line texture: five thin lines emulating ruled paper */\n\t:host([state='filled']) .tile::before,\n\t:host([state='stack-top']) .tile::before,\n\t:host([state='stack-sibling']) .tile::before {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: 4px;\n\t\tright: 4px;\n\t\ttop: 16px;\n\t\tbottom: 5px;\n\t\tbackground-image:\n\t\t\tlinear-gradient(var(--schmancy-sys-color-outline) 1px, transparent 1px),\n\t\t\tlinear-gradient(var(--schmancy-sys-color-outline) 1px, transparent 1px),\n\t\t\tlinear-gradient(var(--schmancy-sys-color-outline) 1px, transparent 1px),\n\t\t\tlinear-gradient(var(--schmancy-sys-color-outline) 1px, transparent 1px),\n\t\t\tlinear-gradient(var(--schmancy-sys-color-outline) 1px, transparent 1px);\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-size:\n\t\t\t100% 1px,\n\t\t\t80% 1px,\n\t\t\t92% 1px,\n\t\t\t65% 1px,\n\t\t\t78% 1px;\n\t\tbackground-position:\n\t\t\t0 0,\n\t\t\t0 4px,\n\t\t\t0 8px,\n\t\t\t0 12px,\n\t\t\t0 16px;\n\t\topacity: 0.3;\n\t\tpointer-events: none;\n\t\tz-index: 0;\n\t}\n\n\t/* Tinted accent strip across the top edge */\n\t:host([state='filled']) .tile::after,\n\t:host([state='stack-top']) .tile::after,\n\t:host([state='stack-sibling']) .tile::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tright: 0;\n\t\ttop: 0;\n\t\theight: 11px;\n\t\tbackground: color-mix(\n\t\t\tin oklch,\n\t\t\tvar(--schmancy-sys-color-primary-default) 10%,\n\t\t\ttransparent\n\t\t);\n\t\tborder-bottom: 1px solid\n\t\t\tcolor-mix(\n\t\t\t\tin oklch,\n\t\t\t\tvar(--schmancy-sys-color-primary-default) 25%,\n\t\t\t\tvar(--schmancy-sys-color-outline)\n\t\t\t);\n\t\tpointer-events: none;\n\t}\n\n\t:host([state='filled']) .glyph,\n\t:host([state='stack-top']) .glyph,\n\t:host([state='stack-sibling']) .glyph {\n\t\tcolor: var(--schmancy-sys-color-primary-onContainer);\n\t}\n\n\t/* Single-card hover: lift 1px + soft shadow */\n\t:host([state='filled']) .tile:hover {\n\t\tborder-color: var(--schmancy-sys-color-primary-default);\n\t\ttransform: translateY(-1px);\n\t\tbox-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);\n\t}\n\n\t/* Focus ring in primary color */\n\t:host([state='filled']) .tile:focus-visible,\n\t:host([state='stack-top']) .tile:focus-visible,\n\t:host([state='stack-sibling']) .tile:focus-visible {\n\t\toutline: 2px solid var(--schmancy-sys-color-primary-default);\n\t\toutline-offset: 3px;\n\t}\n\n\t/* Stacked tiles position absolutely on the host's grid cell so the\n\t   wrapper's --fan-count / --i custom properties drive the offset. */\n\t:host([state='stack-top']),\n\t:host([state='stack-sibling']) {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\ttransition:\n\t\t\ttransform 200ms cubic-bezier(0.2, 0.8, 0.2, 1),\n\t\t\tbox-shadow 200ms cubic-bezier(0.2, 0.8, 0.2, 1);\n\t\ttransform: translate(\n\t\t\tcalc((var(--fan-count, 1) - 1 - var(--i, 0)) * -3px),\n\t\t\tcalc((var(--fan-count, 1) - 1 - var(--i, 0)) * 3px)\n\t\t);\n\t}\n\n\t/* Sibling tiles only become interactive once the wrapper is fanned —\n\t   otherwise they're stacked underneath and would steal pointer events\n\t   from the top card. */\n\t:host([state='stack-sibling']) {\n\t\tpointer-events: none;\n\t}\n\n\t/* Fanned: every tile slides edge-to-edge along the wrapper's row */\n\t:host([state='stack-top']:host-context([data-fanned])),\n\t:host-context([data-fanned]):host([state='stack-top']) {\n\t\ttransform: translate(\n\t\t\tcalc((var(--fan-count, 1) - 1 - var(--i, 0)) * var(--schmancy-tile-w) * -1),\n\t\t\t0\n\t\t);\n\t\tbox-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);\n\t}\n\n\t:host([state='stack-sibling']:host-context([data-fanned])),\n\t:host-context([data-fanned]):host([state='stack-sibling']) {\n\t\tpointer-events: auto;\n\t\ttransform: translate(\n\t\t\tcalc((var(--fan-count, 1) - 1 - var(--i, 0)) * var(--schmancy-tile-w) * -1),\n\t\t\t0\n\t\t);\n\t\tbox-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);\n\t}\n\n\t:host-context([data-fanned]):host([state='stack-top']) .tile:hover,\n\t:host-context([data-fanned]):host([state='stack-sibling']) .tile:hover {\n\t\tborder-color: var(--schmancy-sys-color-primary-default);\n\t\tbox-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);\n\t}\n\n\t.glyph {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tright: 0;\n\t\theight: 11px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tfont-size: 7.5px;\n\t\tfont-weight: 500;\n\t\tletter-spacing: 0.12em;\n\t\tline-height: 1;\n\t\tz-index: 1;\n\t\tfont-variant-caps: all-petite-caps;\n\t}\n\n\t.tooltip {\n\t\tposition: absolute;\n\t\tbottom: calc(100% + 6px);\n\t\tleft: 50%;\n\t\ttransform: translate(-50%, 2px);\n\t\tfont-size: 10px;\n\t\tline-height: 1.2;\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t\tbackground: var(--schmancy-sys-color-surface-containerLowest);\n\t\tborder: 1px solid var(--schmancy-sys-color-outline);\n\t\tpadding: 2px 6px;\n\t\tborder-radius: 3px;\n\t\twhite-space: nowrap;\n\t\topacity: 0;\n\t\tpointer-events: none;\n\t\ttransition:\n\t\t\topacity 150ms ease-in-out,\n\t\t\ttransform 150ms ease-in-out;\n\t\tz-index: 2;\n\t}\n\n\t.tile:hover .tooltip,\n\t.tile:focus-visible .tooltip {\n\t\topacity: 1;\n\t\ttransform: translate(-50%, 0);\n\t}\n\n\t.caption {\n\t\tposition: absolute;\n\t\ttop: calc(100% + 6px);\n\t\tleft: 50%;\n\t\ttransform: translateX(-50%);\n\t\tfont-size: 11px;\n\t\tline-height: 1.2;\n\t\tfont-weight: 500;\n\t\twhite-space: nowrap;\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t\tfont-variant-numeric: tabular-nums;\n\t}\n\n\t.stack-count {\n\t\tposition: absolute;\n\t\ttop: -5px;\n\t\tright: -7px;\n\t\tmin-width: 14px;\n\t\theight: 14px;\n\t\tpadding: 0 4px;\n\t\tborder-radius: 7px;\n\t\tbackground: var(--schmancy-sys-color-primary-default);\n\t\tcolor: var(--schmancy-sys-color-primary-on);\n\t\tfont-size: 9px;\n\t\tfont-weight: 500;\n\t\tline-height: 14px;\n\t\ttext-align: center;\n\t\tz-index: 10;\n\t\tpointer-events: none;\n\t\ttransition: opacity 150ms ease-in-out;\n\t}\n\n\t:host-context([data-fanned]) .stack-count {\n\t\topacity: 0;\n\t}\n`]\n\n\t@property({ type: String, reflect: true }) state: TimelineTileState = 'empty'\n\n\t@property({ type: String }) glyph = ''\n\n\t@property({ type: Number, attribute: 'stack-count' }) stackCount?: number\n\n\t@property({ type: Number, reflect: true }) index?: number\n\n\t@property({ type: String }) tooltip?: string\n\n\t@property({ type: String }) caption?: string\n\n\toverride connectedCallback(): void {\n\t\tsuper.connectedCallback()\n\n\t\t// Mirror `index` onto the host's `--i` custom property so the\n\t\t// fan-offset transforms don't depend on the consumer setting both\n\t\t// the prop and an inline style.\n\t\tif (this.index !== undefined) {\n\t\t\tthis.style.setProperty('--i', String(this.index))\n\t\t}\n\n\t\t// Stack-top owns the fan orchestration. The pointerover stream lives\n\t\t// on the parent wrapper (the element holding all sibling tiles); a\n\t\t// hover-intent pipe drives the `data-fanned` attribute on that\n\t\t// wrapper. Enter is immediate (`of(wrapper)`); leave waits 800ms\n\t\t// (`timer(800)`) so the cursor can cross the gap between fanned\n\t\t// cards without collapsing the stack. The inner Observable's\n\t\t// subscription lifetime IS the fanned state — subscribe sets the\n\t\t// attribute, teardown removes it.\n\t\tif (this.state !== 'stack-top') return\n\t\tconst wrapper = this.parentElement\n\t\tif (!wrapper) return\n\n\t\tfromEvent<PointerEvent>(wrapper, 'pointerover')\n\t\t\t.pipe(\n\t\t\t\tmap(\n\t\t\t\t\t(e) =>\n\t\t\t\t\t\t(e.target as HTMLElement | null)?.closest<HTMLElement>(\n\t\t\t\t\t\t\t'[data-stack-id]',\n\t\t\t\t\t\t) ?? null,\n\t\t\t\t),\n\t\t\t\tdistinctUntilChanged(),\n\t\t\t\tswitchMap((target) =>\n\t\t\t\t\ttarget === wrapper ? of(wrapper) : timer(800).pipe(map(() => null)),\n\t\t\t\t),\n\t\t\t\tdistinctUntilChanged(),\n\t\t\t\tswitchMap((target) =>\n\t\t\t\t\ttarget\n\t\t\t\t\t\t? new Observable<never>(() => {\n\t\t\t\t\t\t\t\ttarget.setAttribute('data-fanned', '')\n\t\t\t\t\t\t\t\treturn () => target.removeAttribute('data-fanned')\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t: EMPTY,\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\tprotected override updated(changed: Map<string, unknown>): void {\n\t\tsuper.updated(changed)\n\t\tif (changed.has('index') && this.index !== undefined) {\n\t\t\tthis.style.setProperty('--i', String(this.index))\n\t\t}\n\t}\n\n\tprivate _onClick = (): void => {\n\t\tif (this.state === 'empty') return\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent<TimelineTileClickEvent['detail']>('tile-click', {\n\t\t\t\tdetail: { glyph: this.glyph, state: this.state },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t}),\n\t\t)\n\t}\n\n\tprivate _ariaLabel(): string {\n\t\tconst parts = [this.glyph]\n\t\tif (this.caption) parts.push(this.caption)\n\t\tif (this.tooltip) parts.push(this.tooltip)\n\t\tif (this.state === 'empty') parts.push('empty')\n\t\treturn parts.join(' · ')\n\t}\n\n\tprotected override render(): unknown {\n\t\tconst isInteractive = this.state !== 'empty'\n\t\tconst ariaLabel = this._ariaLabel()\n\t\treturn html`\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"tile\"\n\t\t\t\trole=${isInteractive ? 'button' : 'presentation'}\n\t\t\t\ttabindex=${isInteractive ? 0 : -1}\n\t\t\t\taria-label=${ariaLabel}\n\t\t\t\t?disabled=${!isInteractive}\n\t\t\t\t@click=${this._onClick}\n\t\t\t>\n\t\t\t\t<span class=\"glyph\">${this.glyph}</span>\n\t\t\t\t${when(\n\t\t\t\t\tthis.tooltip && isInteractive,\n\t\t\t\t\t() => html`<span class=\"tooltip\">${this.tooltip}</span>`,\n\t\t\t\t)}\n\t\t\t\t${when(\n\t\t\t\t\tthis.caption && this.state !== 'stack-sibling',\n\t\t\t\t\t() => html`<span class=\"caption\">${this.caption}</span>`,\n\t\t\t\t)}\n\t\t\t\t${when(\n\t\t\t\t\tthis.state === 'stack-top' &&\n\t\t\t\t\t\tthis.stackCount !== undefined &&\n\t\t\t\t\t\tthis.stackCount > 1,\n\t\t\t\t\t() => html`<span class=\"stack-count\">×${this.stackCount}</span>`,\n\t\t\t\t)}\n\t\t\t</button>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-timeline-tile': SchmancyTimelineTile\n\t}\n}\n"],"mappings":"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"}

package/skills/schmancy/charts.md

@@ -1,93 +0,0 @@
-# Schmancy Charts
-
-> Canvas-rendered area chart and horizontal pill chart. Theme-aware, lazy-animated, with auto peak highlighting.
-
-## schmancy-area-chart
-
-> Smooth Catmull-Rom spline area chart with peak markers and hover tooltips.
-
-```html
-<schmancy-area-chart
-  .data=${[
-    { label: '9 AM', value: 12.4 },
-    { label: '10 AM', value: 18.9 },
-    { label: '11 AM', value: 42.1, metadata: { users: 320 } },
-    { label: '12 PM', value: 56.7 },
-  ]}
-  value-prefix="EUR "
-  value-decimals="2"
-  peak-count="2"
-  height="240"
-></schmancy-area-chart>
-```
-
-### Properties
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `data` | `ChartDataPoint[]` | `[]` | `{ label, value, metadata? }[]` |
-| `height` | number | `200` | Chart height in px |
-| `showGrid` | boolean | `true` | Background grid lines |
-| `showLabels` | boolean | `true` | X-axis labels |
-| `showTooltip` | boolean | `true` | Hover tooltip |
-| `peakCount` | number | `3` | Top-N points highlighted larger |
-| `animationDuration` | number | `800` | Entrance animation ms |
-| `animated` | boolean | `true` | Animate on first visible |
-| `valuePrefix` | string | `''` | Display prefix (e.g. `"EUR "`) |
-| `valueSuffix` | string | `''` | Display suffix (e.g. `"%"`) |
-| `valueDecimals` | number | `2` | Decimal places |
-| `theme` | `Partial<ChartTheme>` | `{}` | Override colors, stroke, radii |
-
-### ChartTheme
-| Key | Default | Description |
-|-----|---------|-------------|
-| `primaryColor` | `--schmancy-sys-color-primary` | Line + fill gradient color |
-| `gradientOpacity` | `[0.4, 0.05]` | Top/bottom fill opacity |
-| `strokeWidth` | `2` | Line thickness |
-| `pointRadius` | `4` | Normal point radius |
-| `peakRadius` | `6` | Peak point radius |
-
-## schmancy-pills
-
-> Horizontal bar chart with optional stacked segments, medal ranks, and peak/low styling.
-
-```html
-<schmancy-pills
-  .data=${[
-    { label: 'Mon', value: 1240, rank: 1 },
-    { label: 'Tue', value: 980 },
-    { label: 'Wed', value: 1830, rank: 2, segments: [
-      { label: 'Pizza', value: 1200 },
-      { label: 'Drinks', value: 630 }
-    ]},
-  ]}
-></schmancy-pills>
-```
-
-### Properties
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `data` | `PillDataPoint[]` | `[]` | Rows with optional stacked `segments` |
-| `valuePrefix` / `valueSuffix` / `valueDecimals` | — | — | Value formatting (same as area chart) |
-| `showMedals` | boolean | `true` | Show 🥇🥈🥉 for rank 1/2/3 |
-
-### PillDataPoint
-```typescript
-{
-  label: string
-  value: number
-  segments?: { label, value, color }[]  // stacked
-  isPeak?: boolean   // highlighted
-  isLow?: boolean    // muted
-  rank?: 1 | 2 | 3   // medal
-  metadata?: Record<string, unknown>
-}
-```
-
-## Behavior
-- Both charts use an IntersectionObserver to defer animation until visible.
-- Responsive — resize triggers a re-render.
-- Dark/light aware via theme CSS variables.
-
-## When to Use
-- Area chart: time-series or comparative trends.
-- Pills: ranked categorical data (leaderboards, top days, distribution).

package/skills/schmancy/extra.md

@@ -1,59 +0,0 @@
-# Schmancy Extra
-
-> Data-driven dropdowns for common localization fields. Country and timezone pickers, form-associated and autocomplete-backed.
-
-## schmancy-select-countries
-Fully autocomplete-searchable country dropdown. Form-associated (participates in `<form>` submission and validation via `ElementInternals`).
-
-```html
-<schmancy-select-countries
-  name="country"
-  label="Country"
-  placeholder="Select a country"
-  required
-  value="DE"
-  @change=${e => this.country = e.target.value}
-></schmancy-select-countries>
-```
-
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `value` | string | — | ISO country code (reflected) |
-| `name` | string | `''` | Form field name |
-| `label` | string | `'Country'` | Visible label |
-| `hint` | string | `'Please select a country'` | Helper text |
-| `placeholder` | string | `'Select a country'` | Placeholder in the input |
-| `required` | boolean | `false` | Validation constraint |
-
-## schmancy-select-timezones
-Same pattern as countries, backed by timezone data.
-
-```html
-<schmancy-select-timezones
-  name="timezone"
-  label="Timezone"
-  value="Europe/Berlin"
-></schmancy-select-timezones>
-```
-
-Accepts the same set of properties (`value`, `name`, `label`, `hint`, `placeholder`, `required`).
-
-## Raw Data Exports
-If you want the underlying data without the component:
-```typescript
-import countries from '@mhmo91/schmancy'   // default export from countries.data
-import timezones from '@mhmo91/schmancy'   // default export from timezones.data
-```
-
-Each countries row: `{ code, name, dialCode?, flag?, ... }`. Timezones: `{ name, offset, label, ... }`.
-
-## Form Integration
-Both use `formAssociated = true` and register with the parent `<form>`. Works with native `form.checkValidity()` and with [`schmancy-form`](./form.md).
-
-```html
-<schmancy-form @submit=${this.onSubmit}>
-  <schmancy-select-countries name="country" required></schmancy-select-countries>
-  <schmancy-select-timezones name="timezone" required></schmancy-select-timezones>
-  <schmancy-button type="submit" variant="filled">Save</schmancy-button>
-</schmancy-form>
-```

package/skills/schmancy/map.md

@@ -1,55 +0,0 @@
-# schmancy-map
-
-> Google Maps component. Accepts address string (auto-geocoded) or exact lat/lng. Singleton-loaded Maps SDK.
-
-## Usage
-```html
-<!-- By address -->
-<schmancy-map
-  address="Times Square, New York"
-  api-key="YOUR_GOOGLE_MAPS_KEY"
-></schmancy-map>
-
-<!-- By coordinates -->
-<schmancy-map
-  .latitude=${40.758}
-  .longitude=${-73.985}
-  .zoom=${15}
-  type="satellite"
-  api-key="YOUR_GOOGLE_MAPS_KEY"
-></schmancy-map>
-```
-
-## Properties
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `address` | string | — | Location for geocoding (e.g. `"Eiffel Tower, Paris"`) |
-| `latitude` | number | — | Precise latitude (takes precedence over address) |
-| `longitude` | number | — | Precise longitude |
-| `zoom` | number | default Maps default | Map zoom level |
-| `type` | `'roadmap' \| 'satellite' \| 'hybrid' \| 'terrain'` | `'roadmap'` | Map style |
-| `height` | string | — | Custom height (e.g. `'400px'`, `'60vh'`) |
-| `apiKey` | string | **required** | Google Maps API key |
-
-## Behavior
-- The first `schmancy-map` instance triggers a singleton script load of `maps.googleapis.com/maps/api/js` with the `places` library.
-- Subsequent instances reuse the same loader — no duplicate network requests.
-- If `address` is provided without coordinates, the built-in `Geocoder` resolves it before rendering.
-- Errors (invalid key, unauthorized domain, geocode failure) render a fallback message inside the host.
-
-## Setup
-1. Acquire a Google Maps JavaScript API key from Google Cloud Console.
-2. Enable the **Maps JavaScript API** and **Geocoding API**.
-3. Add your domain to the authorized list.
-
-## Example
-```html
-<schmancy-surface type="subtle" rounded="all">
-  <schmancy-map
-    address="1600 Amphitheatre Parkway, Mountain View, CA"
-    height="320px"
-    type="hybrid"
-    .apiKey=${import.meta.env.VITE_GOOGLE_MAPS_KEY}
-  ></schmancy-map>
-</schmancy-surface>
-```

package/skills/schmancy/qr-scanner.md

@@ -1,51 +0,0 @@
-# schmancy-qr-scanner
-
-> Camera-based QR code scanner using `jsQR`. Requests rear-camera access, decodes frames in real time, deduplicates reads.
-
-## Usage
-```html
-<schmancy-qr-scanner
-  continuous
-  @scan-result=${e => this.handleScan(e.detail.data)}
-></schmancy-qr-scanner>
-```
-
-```typescript
-handleScan(data: string) {
-  console.log('QR decoded:', data)
-}
-```
-
-## Properties
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `continuous` | boolean | `true` | Keep scanning after a successful read (dedupe repeated reads) |
-
-## Events
-| Event | Detail | When |
-|-------|--------|------|
-| `scan-result` | `{ data: string, timestamp: number }` | QR code successfully decoded |
-
-## Behavior
-- Requests `getUserMedia` with `facingMode: 'environment'` (rear camera) at 1280×720.
-- Decodes via `jsQR` on `animationFrames` stream with `throttleTime` to avoid CPU thrashing.
-- `distinctUntilChanged` prevents duplicate emissions for the same code.
-- Brief success flash on each valid read.
-- Stops camera + tears down subscriptions on disconnect.
-- Displays an error state if camera permission is denied.
-
-## Requires
-- HTTPS (or `localhost`) for camera access.
-- User permission to the camera.
-
-## Example
-```html
-<schmancy-surface type="glass" rounded="all">
-  <schmancy-qr-scanner
-    @scan-result=${(e: CustomEvent<{ data: string }>) => {
-      $notify.success(`Scanned: ${e.detail.data}`)
-      this.scannedCode = e.detail.data
-    }}
-  ></schmancy-qr-scanner>
-</schmancy-surface>
-```