@mhmo91/schmancy 0.5.37 → 0.5.39

package/dist/badge.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./avatar-BmcocEQ4.cjs");Object.defineProperty(exports,"ScBadgeV2",{enumerable:!0,get:()=>e.ScBadgeV2}),Object.defineProperty(exports,"SchmancyBadgeV2",{enumerable:!0,get:()=>e.SchmancyBadgeV2});
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./avatar-zSZZctwI.cjs");Object.defineProperty(exports,"ScBadgeV2",{enumerable:!0,get:()=>e.ScBadgeV2}),Object.defineProperty(exports,"SchmancyBadgeV2",{enumerable:!0,get:()=>e.SchmancyBadgeV2});
 //# sourceMappingURL=badge.cjs.map

package/dist/badge.js

@@ -1,4 +1,4 @@
-import { a as e, S } from "./avatar-BDy0wAek.js";
+import { a as e, S } from "./avatar-C2xjrYfL.js";
 export {
   e as ScBadgeV2,
   S as SchmancyBadgeV2

package/dist/boat-DAV-HLhF.cjs

@@ -0,0 +1,83 @@
+"use strict";const p=require("rxjs"),r=require("rxjs/operators");require("lit/directives/class-map.js"),require("lit/directives/style-map.js");const h=require("lit/decorators.js");require("./tailwind.mixin-SjjyWekZ.cjs");const w=require("./litElement.mixin-Dmtg7y_h.cjs"),l=require("lit"),m=require("lit/directives/ref.js");var S=Object.defineProperty,R=Object.getOwnPropertyDescriptor,d=(t,e,n,i)=>{for(var a,o=i>1?void 0:i?R(e,n):e,s=t.length-1;s>=0;s--)(a=t[s])&&(o=(i?a(e,n,o):a(o))||o);return i&&o&&S(e,n,o),o};exports.SchmancyBoat=class extends w.$LitElement(l.css`
+	:host {
+		display: contents;
+	}
+`){constructor(){super(...arguments),this.id="default",this.containerRef=m.createRef(),this.contentRef=m.createRef(),this.iconRef=m.createRef(),this.headerRef=m.createRef(),this.ANIMATION_CONFIG={durations:{expand:350,minimize:250,hide:200,content:300},easing:{emphasized:"cubic-bezier(0.2, 0.0, 0, 1.0)",decelerate:"cubic-bezier(0.05, 0.7, 0.1, 1.0)",accelerate:"cubic-bezier(0.3, 0.0, 0.8, 0.15)",standard:"cubic-bezier(0.4, 0.0, 0.2, 1)"},shadows:{fab:"0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)",fabLowered:"0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12)",expanded:"0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)"}},this.currentState="minimized",this.isContentVisible=!1,this.isAnimating=!1,this.isLowered=!1,this.isDragging=!1,this.position={x:16,y:16},this.anchor="bottom-right"}get state(){return this.currentState}set state(t){this.isAnimating||t===this.currentState||this.animateToState(t)}get lowered(){return this.isLowered}set lowered(t){this.isLowered=t,this.requestUpdate()}connectedCallback(){super.connectedCallback(),typeof window<"u"&&(p.fromEvent(window,"resize").pipe(r.takeUntil(this.disconnecting)).subscribe(()=>{this.currentState==="expanded"&&this.updateExpandedWidth()}),p.fromEvent(window,"keydown").pipe(r.filter(t=>t.key==="Escape"&&this.currentState!=="hidden"),r.tap(t=>t.preventDefault()),r.takeUntil(this.disconnecting)).subscribe(()=>{this.currentState==="expanded"?this.toggleState():this.close()}))}initializePosition(){if(typeof window>"u")return;const t=localStorage.getItem(`schmancy-boat-${this.id}`);if(t)try{const e=JSON.parse(t);this.position={x:e.x,y:e.y},this.anchor=e.anchor}catch{}}async animateToState(t){if(this.isAnimating||t===this.currentState)return;const e=this.currentState;this.isAnimating=!0;try{await this.performTransition(e,t),this.currentState=t,this.isContentVisible=t==="expanded",this.dispatchEvent(new CustomEvent("toggle",{detail:t,bubbles:!0,composed:!0}))}catch{this.currentState=t,this.isContentVisible=t==="expanded"}finally{this.isAnimating=!1}}async performTransition(t,e){if(this.currentAnimation?.cancel(),!this.containerRef.value)return;e==="expanded"&&(this.isContentVisible=!0);const n=this.createAnimations(t,e);n.container&&(this.currentAnimation=n.container,await n.container.finished,e!=="expanded"&&(this.isContentVisible=!1))}createAnimations(t,e){const n=this.containerRef.value,i=this.contentRef.value,a=this.iconRef.value,o={};if(!n)return o;const s=this.ANIMATION_CONFIG,f=this.getStyleForState(t),u=this.getStyleForState(e);if(o.container=e==="expanded"?n.animate([f,u],{duration:s.durations.expand,easing:s.easing.decelerate,fill:"forwards"}):n.animate([f,u],{duration:e==="hidden"?s.durations.hide:s.durations.minimize,easing:s.easing.accelerate,fill:"forwards"}),i&&t==="expanded"&&e==="minimized"?i.animate([{opacity:1,transform:"translateY(0)"},{opacity:0,transform:"translateY(-8px)"}],{duration:150,easing:s.easing.standard,fill:"forwards"}):i&&e==="expanded"&&i.animate([{opacity:0,transform:"translateY(8px)"},{opacity:1,transform:"translateY(0)"}],{duration:s.durations.content,easing:s.easing.standard,fill:"forwards"}),a){const y=e==="expanded";(y||t==="expanded"&&e==="minimized")&&a.animate([{transform:y?"rotate(0deg)":"rotate(180deg)"},{transform:y?"rotate(180deg)":"rotate(0deg)"}],{duration:250,easing:s.easing.emphasized,fill:"forwards"})}return o}getStyleForState(t){const{shadows:e}=this.ANIMATION_CONFIG,n={maxWidth:"300px",maxHeight:"auto",borderRadius:"16px"};return{hidden:{...n,opacity:"0",pointerEvents:"none",boxShadow:"none",backdropFilter:"none"},minimized:{...n,opacity:"1",pointerEvents:"auto",boxShadow:this.isLowered?e.fabLowered:e.fab,backdropFilter:"none"},expanded:{opacity:"1",pointerEvents:"auto",width:this.getResponsiveWidth(),maxWidth:"100%",maxHeight:"80vh",boxShadow:e.expanded,borderRadius:"8px 8px 0 0",backdropFilter:"blur(12px)"}}[t]}getResponsiveWidth(){if(typeof window>"u")return"40vw";const t=window.innerWidth;return t<768?"calc(100vw - 32px)":t<1024?"70vw":t<1280?"60vw":"40vw"}updateExpandedWidth(){const t=this.containerRef.value;t&&this.currentState==="expanded"&&(t.style.width=this.getResponsiveWidth())}firstUpdated(){this.initializePosition(),this.applyInitialStyles(),this.updateContainerPosition(),this.setupDragPipeline(),this.querySelector('[slot="header"]')&&!this.icon&&this.label}applyInitialStyles(){const t=this.containerRef.value,e=this.contentRef.value,n=this.iconRef.value;if(t){const i=this.getStyleForState(this.currentState);Object.assign(t.style,i),"webkitBackdropFilter"in t.style&&(t.style.webkitBackdropFilter=i.backdropFilter)}e&&(e.style.opacity=this.isContentVisible?"1":"0"),n&&this.currentState==="expanded"&&(n.style.transform="rotate(180deg)")}toggleState(){const t=this.currentState==="minimized"?"expanded":"minimized";this.animateToState(t)}close(){this.animateToState("hidden")}closeAndAddToNav(){p.race(this.discover("schmancy-navigation-rail"),this.discover("schmancy-navigation-bar"),this.discover("schmancy-nav-drawer"),this.discover("app-navigation-rail"),this.discover("app-navigation-bar"),this.discover("app-nav-drawer")).pipe(r.take(1),r.tap(t=>{if(t&&typeof t.addBoatItem=="function"){const e=this.icon||(this.querySelector('[slot="header"]')?.querySelector("schmancy-icon")?.textContent?.trim()||"widgets"),n=this.label||(()=>{let o=this.querySelector('[slot="header"]')?.textContent?.trim()||"Boat";return o.includes(e)&&(o=o.replace(e,"").trim()),o||this.id})(),i=t.addBoatItem({id:`boat-${this.id}`,title:n,icon:e});if(i){const a=this.containerRef.value;a?a.animate([{opacity:1},{opacity:0}],{duration:150,easing:"ease-out",fill:"forwards"}).finished.then(()=>{this.currentState="hidden",this.isContentVisible=!1}):(this.currentState="hidden",this.isContentVisible=!1),p.fromEvent(i,"click").pipe(r.tap(()=>this.state="expanded"),r.takeUntil(this.disconnecting)).subscribe()}}else this.close()})).subscribe()}calculateDragPosition(t,e,n,i,a){const o=t-n,s=e-i,f=window.innerWidth,u=window.innerHeight,y=Math.max(0,Math.min(o,f-a.width)),g=Math.max(0,Math.min(s,u-a.height)),c=this.anchor.includes("right")?f-(y+a.width):y,x=this.anchor.includes("bottom")?u-(g+a.height):g;return{x:Math.max(0,c),y:Math.max(0,x)}}savePosition(){if(typeof window>"u")return;const t={x:this.position.x,y:this.position.y,anchor:this.anchor},e=`schmancy-boat-${this.id}`;localStorage.setItem(e,JSON.stringify(t))}setupDragPipeline(){if(typeof window>"u")return;const t=this.headerRef.value,e=this.containerRef.value;if(!t||!e)return;let n=!1;p.merge(p.fromEvent(t,"mousedown").pipe(r.filter(i=>i.button===0),r.tap(i=>{i.preventDefault(),i.stopPropagation()}),r.map(i=>({clientX:i.clientX,clientY:i.clientY,type:"mouse"}))),p.fromEvent(t,"touchstart").pipe(r.map(i=>({clientX:i.touches[0].clientX,clientY:i.touches[0].clientY,type:"touch"})))).pipe(r.map(({clientX:i,clientY:a,type:o})=>{const s=e.getBoundingClientRect();return n=!1,{startX:i,startY:a,offsetX:i-s.left,offsetY:a-s.top,initialRect:s,type:o}})).pipe(r.switchMap(({startX:i,startY:a,offsetX:o,offsetY:s,initialRect:f,type:u})=>{const y=u==="mouse"?p.fromEvent(window,"mousemove").pipe(r.map(c=>({clientX:c.clientX,clientY:c.clientY}))):p.fromEvent(window,"touchmove").pipe(r.map(c=>({clientX:c.touches[0].clientX,clientY:c.touches[0].clientY}))),g=u==="mouse"?p.fromEvent(window,"mouseup"):p.fromEvent(window,"touchend");return y.pipe(r.map(({clientX:c,clientY:x})=>{const b=c-i,v=x-a;return Math.sqrt(b*b+v*v)>5&&!n&&(n=!0,this.isDragging=!0),n?this.calculateDragPosition(c,x,o,s,f):null}),r.filter(c=>c!==null),r.tap(c=>{c&&(this.position=c,this.updateContainerPosition())}),r.takeUntil(g))}),r.finalize(()=>{n?(this.updateAnchor(),this.savePosition()):this.toggleState(),this.isDragging=!1,n=!1}),r.takeUntil(this.disconnecting)).subscribe()}updateContainerPosition(){const t=this.containerRef.value;t&&(t.style.removeProperty("left"),t.style.removeProperty("right"),t.style.removeProperty("top"),t.style.removeProperty("bottom"),this.anchor.includes("right")?t.style.right=`${this.position.x}px`:t.style.left=`${this.position.x}px`,this.anchor.includes("bottom")?t.style.bottom=`${this.position.y}px`:t.style.top=`${this.position.y}px`)}updateAnchor(){if(typeof window>"u")return;const t=this.containerRef.value;if(!t)return;const e=t.getBoundingClientRect(),n=window.innerWidth,i=window.innerHeight,a=e.left>n/2,o=e.top>i/2,s=`${o?"bottom":"top"}-${a?"right":"left"}`;s!==this.anchor&&(this.position.x=a?n-e.right:e.left,this.position.y=o?i-e.bottom:e.top,this.anchor=s)}disconnectedCallback(){super.disconnectedCallback(),this.currentAnimation?.cancel()}render(){const t=this.currentState==="minimized"?this.isLowered?"1":"3":"4",e=this.currentState==="minimized",n=this.anchor.includes("bottom")?this.anchor.includes("right")?"bottom right":"bottom left":this.anchor.includes("right")?"top right":"top left",i={"z-50":!0,fixed:!0,"overflow-y-auto":!0,flex:!0,"flex-col":!0,"select-none":!0,"will-change-transform":!0,"[contain:layout_style]":!0,"[transform:translate3d(0,0,0)]":!0,"[backface-visibility:hidden]":!0,"transition-shadow":!0,"opacity-95":this.isDragging,"shadow-[0_24px_48px_-8px_rgba(0,0,0,0.2),0_12px_24px_-4px_rgba(0,0,0,0.12)]":this.isDragging};return l.html`
+			<div
+				class=${this.classMap(i)}
+				style="transform-origin: ${n}"
+				${m.ref(this.containerRef)}
+			>
+				<!-- Header section -->
+				<section class="sticky top-0">
+					<schmancy-surface
+						elevation="${t}"
+						rounded="${e?"none":"top"}"
+						type="containerLowest"
+					>
+						<div
+							class="group sticky top-0 px-3 py-2 flex items-center justify-between gap-3 ${this.isDragging?"cursor-grabbing":"cursor-move"}"
+							${m.ref(this.headerRef)}
+							title="Drag to move, double-click to toggle"
+							@dblclick=${a=>{a.preventDefault(),a.stopPropagation(),this.toggleState()}}
+						>
+							<!-- Drag handle indicator -->
+							<div
+								class="flex items-center text-surface-onVariant opacity-40 transition-opacity duration-200 group-hover:opacity-100"
+							>
+								<schmancy-icon style="font-size: 20px">drag_indicator</schmancy-icon>
+							</div>
+
+							<!-- Header content - use properties if provided, else fallback to slot -->
+							<div class="flex-1 min-w-fit items-center flex justify-start">
+								${this.icon||this.label?l.html`
+											<div class="flex gap-2 items-center">
+												${this.icon?l.html`<schmancy-icon>${this.icon}</schmancy-icon>`:""}
+												${this.label?l.html`<schmancy-typography type="title" token="md">${this.label}</schmancy-typography>`:""}
+												${this.badge!==void 0&&this.badge!==null&&this.badge!==""?l.html`<schmancy-badge>${this.badge}</schmancy-badge>`:""}
+											</div>
+										`:l.html`<slot name="header"></slot>`}
+							</div>
+
+							<!-- Control buttons -->
+							<div class="flex items-center gap-1 flex-shrink-0">
+								${e?l.html`
+											<!-- Expand button (when minimized) -->
+											<schmancy-icon-button
+												variant="text"
+												@click=${a=>{a.stopPropagation(),this.state="expanded"}}
+												title="Expand"
+											>
+												<schmancy-icon ${m.ref(this.iconRef)}>collapse_content</schmancy-icon>
+											</schmancy-icon-button>
+										`:l.html`
+											<!-- Minimize button (when expanded) -->
+											<schmancy-icon-button
+												variant="filled tonal"
+												@click=${a=>{a.stopPropagation(),this.state="minimized"}}
+												title="Minimize"
+											>
+												<schmancy-icon ${m.ref(this.iconRef)}>expand_content</schmancy-icon>
+											</schmancy-icon-button>
+										`}
+
+								<!-- Close button -->
+								<schmancy-icon-button
+									variant="text"
+									@click=${a=>{a.stopPropagation(),this.closeAndAddToNav()}}
+									title="Close and add to navigation"
+								>
+									<schmancy-icon>minimize</schmancy-icon>
+								</schmancy-icon-button>
+							</div>
+						</div>
+					</schmancy-surface>
+				</section>
+
+				<!-- Content section -->
+				<schmancy-surface .hidden=${!this.isContentVisible} type="containerLow" class="flex-1" ${m.ref(this.contentRef)}>
+					<slot></slot>
+				</schmancy-surface>
+			</div>
+		`}},d([h.property({type:String,reflect:!0})],exports.SchmancyBoat.prototype,"state",1),d([h.property({type:String})],exports.SchmancyBoat.prototype,"id",2),d([h.property({type:Boolean,reflect:!0})],exports.SchmancyBoat.prototype,"lowered",1),d([h.property({type:String})],exports.SchmancyBoat.prototype,"icon",2),d([h.property({type:String})],exports.SchmancyBoat.prototype,"label",2),d([h.property()],exports.SchmancyBoat.prototype,"badge",2),d([h.state()],exports.SchmancyBoat.prototype,"currentState",2),d([h.state()],exports.SchmancyBoat.prototype,"isContentVisible",2),d([h.state()],exports.SchmancyBoat.prototype,"isAnimating",2),d([h.state()],exports.SchmancyBoat.prototype,"isLowered",2),d([h.state()],exports.SchmancyBoat.prototype,"isDragging",2),d([h.state()],exports.SchmancyBoat.prototype,"position",2),d([h.state()],exports.SchmancyBoat.prototype,"anchor",2),exports.SchmancyBoat=d([h.customElement("schmancy-boat")],exports.SchmancyBoat);
+//# sourceMappingURL=boat-DAV-HLhF.cjs.map

package/dist/boat-DAV-HLhF.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"boat-DAV-HLhF.cjs","sources":["../src/boat/boat.ts"],"sourcesContent":["import { $LitElement } from '@mixins/index'\nimport { html, css } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { createRef, ref, Ref } from 'lit/directives/ref.js'\nimport { fromEvent, merge, race } from 'rxjs'\nimport { filter, switchMap, takeUntil, tap, finalize, map, take } from 'rxjs/operators'\n\ntype BoatState = 'hidden' | 'minimized' | 'expanded'\n\ninterface Position {\n\tx: number\n\ty: number\n}\n\ninterface SavedPosition {\n\tx: number\n\ty: number\n\tanchor: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'\n}\n\n@customElement('schmancy-boat')\nexport default class SchmancyBoat extends $LitElement(css`\n\t:host {\n\t\tdisplay: contents;\n\t}\n`) {\n\t@property({ type: String, reflect: true })\n\tget state(): BoatState {\n\t\treturn this.currentState\n\t}\n\tset state(value: BoatState) {\n\t\tif (this.isAnimating || value === this.currentState) return\n\t\tthis.animateToState(value)\n\t}\n\n\t@property({ type: String }) id: string = 'default'\n\n\t@property({ type: Boolean, reflect: true })\n\tget lowered(): boolean {\n\t\treturn this.isLowered\n\t}\n\tset lowered(value: boolean) {\n\t\tthis.isLowered = value\n\t\tthis.requestUpdate()\n\t}\n\n\t// New properties for simplified API\n\t@property({ type: String }) icon?: string\n\t@property({ type: String }) label?: string\n\t@property() badge?: string | number\n\n\t// Element references\n\tprivate containerRef: Ref<HTMLDivElement> = createRef()\n\tprivate contentRef: Ref<HTMLElement> = createRef()\n\tprivate iconRef: Ref<HTMLElement> = createRef()\n\tprivate headerRef: Ref<HTMLElement> = createRef()\n\n\t// Current animation reference\n\tprivate currentAnimation?: Animation\n\n\t// Animation configuration\n\tprivate readonly ANIMATION_CONFIG = {\n\t\tdurations: {\n\t\t\texpand: 350,\n\t\t\tminimize: 250,\n\t\t\thide: 200,\n\t\t\tcontent: 300,\n\t\t},\n\t\teasing: {\n\t\t\temphasized: 'cubic-bezier(0.2, 0.0, 0, 1.0)',\n\t\t\tdecelerate: 'cubic-bezier(0.05, 0.7, 0.1, 1.0)',\n\t\t\taccelerate: 'cubic-bezier(0.3, 0.0, 0.8, 0.15)',\n\t\t\tstandard: 'cubic-bezier(0.4, 0.0, 0.2, 1)',\n\t\t},\n\t\tshadows: {\n\t\t\tfab: '0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)',\n\t\t\tfabLowered:\n\t\t\t\t'0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12)',\n\t\t\texpanded: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',\n\t\t},\n\t}\n\n\t// Reactive state for template\n\t@state() private currentState: BoatState = 'minimized'\n\t@state() private isContentVisible: boolean = false\n\t@state() private isAnimating: boolean = false\n\t@state() private isLowered: boolean = false\n\t@state() private isDragging: boolean = false\n\t@state() private position: Position = { x: 16, y: 16 }\n\t@state() private anchor: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' = 'bottom-right'\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\n\t\tif (typeof window !== 'undefined') {\n\t\t\tfromEvent(window, 'resize')\n\t\t\t\t.pipe(takeUntil(this.disconnecting))\n\t\t\t\t.subscribe(() => {\n\t\t\t\t\tif (this.currentState === 'expanded') {\n\t\t\t\t\t\tthis.updateExpandedWidth()\n\t\t\t\t\t}\n\t\t\t\t})\n\n\t\t\t// Keyboard shortcut - Escape key\n\t\t\tfromEvent<KeyboardEvent>(window, 'keydown')\n\t\t\t\t.pipe(\n\t\t\t\t\tfilter(e => e.key === 'Escape' && this.currentState !== 'hidden'),\n\t\t\t\t\ttap(e => e.preventDefault()),\n\t\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t\t)\n\t\t\t\t.subscribe(() => {\n\t\t\t\t\tif (this.currentState === 'expanded') {\n\t\t\t\t\t\tthis.toggleState() // Minimize on Esc if expanded\n\t\t\t\t\t} else {\n\t\t\t\t\t\tthis.close() // Hide on Esc if minimized\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t}\n\t}\n\n\tprivate initializePosition() {\n\t\tif (typeof window === 'undefined') return\n\n\t\tconst saved = localStorage.getItem(`schmancy-boat-${this.id}`)\n\n\t\tif (saved) {\n\t\t\ttry {\n\t\t\t\tconst parsed: SavedPosition = JSON.parse(saved)\n\t\t\t\tthis.position = { x: parsed.x, y: parsed.y }\n\t\t\t\tthis.anchor = parsed.anchor\n\t\t\t\tconsole.log('📍 Loaded position:', this.id, parsed)\n\t\t\t} catch (e) {\n\t\t\t\t// Use default position on parse error\n\t\t\t}\n\t\t}\n\t\t// If no saved position, use default from @state initialization\n\t}\n\n\tprivate async animateToState(targetState: BoatState) {\n\t\tif (this.isAnimating || targetState === this.currentState) return\n\n\t\tconst previousState = this.currentState\n\t\tthis.isAnimating = true\n\n\t\ttry {\n\t\t\tawait this.performTransition(previousState, targetState)\n\t\t\tthis.currentState = targetState\n\t\t\tthis.isContentVisible = targetState === 'expanded'\n\n\t\t\t// Dispatch event\n\t\t\tthis.dispatchEvent(\n\t\t\t\tnew CustomEvent('toggle', {\n\t\t\t\t\tdetail: targetState,\n\t\t\t\t\tbubbles: true,\n\t\t\t\t\tcomposed: true,\n\t\t\t\t}),\n\t\t\t)\n\t\t} catch (err) {\n\t\t\tconsole.warn('Animation error:', err)\n\t\t\tthis.currentState = targetState\n\t\t\tthis.isContentVisible = targetState === 'expanded'\n\t\t} finally {\n\t\t\tthis.isAnimating = false\n\t\t}\n\t}\n\n\t// Simplified animation transition\n\tprivate async performTransition(fromState: BoatState, toState: BoatState): Promise<void> {\n\t\tthis.currentAnimation?.cancel()\n\n\t\tconst container = this.containerRef.value\n\t\tif (!container) return\n\n\t\t// Update content visibility before expand\n\t\tif (toState === 'expanded') {\n\t\t\tthis.isContentVisible = true\n\t\t}\n\n\t\t// Create animations\n\t\tconst animations = this.createAnimations(fromState, toState)\n\n\t\t// Wait for main animation to complete\n\t\tif (animations.container) {\n\t\t\tthis.currentAnimation = animations.container\n\t\t\tawait animations.container.finished\n\n\t\t\t// Hide content after minimize\n\t\t\tif (toState !== 'expanded') {\n\t\t\t\tthis.isContentVisible = false\n\t\t\t}\n\t\t}\n\t}\n\n\t// Create animations for state transition\n\tprivate createAnimations(fromState: BoatState, toState: BoatState) {\n\t\tconst container = this.containerRef.value\n\t\tconst content = this.contentRef.value\n\t\tconst icon = this.iconRef.value\n\t\tconst animations: { container?: Animation; content?: Animation; icon?: Animation } = {}\n\n\t\tif (!container) return animations\n\n\t\tconst config = this.ANIMATION_CONFIG\n\t\tconst fromStyles = this.getStyleForState(fromState)\n\t\tconst toStyles = this.getStyleForState(toState)\n\n\t\t// Container animation\n\t\tif (toState === 'expanded') {\n\t\t\t// Expand animation without transform\n\t\t\tanimations.container = container.animate([fromStyles, toStyles], {\n\t\t\t\tduration: config.durations.expand,\n\t\t\t\teasing: config.easing.decelerate,\n\t\t\t\tfill: 'forwards',\n\t\t\t})\n\t\t} else {\n\t\t\tanimations.container = container.animate([fromStyles, toStyles], {\n\t\t\t\tduration: toState === 'hidden' ? config.durations.hide : config.durations.minimize,\n\t\t\t\teasing: config.easing.accelerate,\n\t\t\t\tfill: 'forwards',\n\t\t\t})\n\t\t}\n\n\t\t// Content animation (only for expand/minimize transitions)\n\t\tif (content && fromState === 'expanded' && toState === 'minimized') {\n\t\t\t// Fade out content before minimizing\n\t\t\tcontent.animate(\n\t\t\t\t[\n\t\t\t\t\t{ opacity: 1, transform: 'translateY(0)' },\n\t\t\t\t\t{ opacity: 0, transform: 'translateY(-8px)' },\n\t\t\t\t],\n\t\t\t\t{\n\t\t\t\t\tduration: 150,\n\t\t\t\t\teasing: config.easing.standard,\n\t\t\t\t\tfill: 'forwards',\n\t\t\t\t},\n\t\t\t)\n\t\t} else if (content && toState === 'expanded') {\n\t\t\t// Fade in content when expanding\n\t\t\tcontent.animate(\n\t\t\t\t[\n\t\t\t\t\t{ opacity: 0, transform: 'translateY(8px)' },\n\t\t\t\t\t{ opacity: 1, transform: 'translateY(0)' },\n\t\t\t\t],\n\t\t\t\t{\n\t\t\t\t\tduration: config.durations.content,\n\t\t\t\t\teasing: config.easing.standard,\n\t\t\t\t\tfill: 'forwards',\n\t\t\t\t},\n\t\t\t)\n\t\t}\n\n\t\t// Icon rotation animation\n\t\tif (icon) {\n\t\t\tconst isExpanding = toState === 'expanded'\n\t\t\tconst isCollapsing = fromState === 'expanded' && toState === 'minimized'\n\n\t\t\tif (isExpanding || isCollapsing) {\n\t\t\t\ticon.animate(\n\t\t\t\t\t[\n\t\t\t\t\t\t{ transform: isExpanding ? 'rotate(0deg)' : 'rotate(180deg)' },\n\t\t\t\t\t\t{ transform: isExpanding ? 'rotate(180deg)' : 'rotate(0deg)' },\n\t\t\t\t\t],\n\t\t\t\t\t{\n\t\t\t\t\t\tduration: 250,\n\t\t\t\t\t\teasing: config.easing.emphasized,\n\t\t\t\t\t\tfill: 'forwards',\n\t\t\t\t\t},\n\t\t\t\t)\n\t\t\t}\n\t\t}\n\n\t\treturn animations\n\t}\n\n\t// Get styles for a specific state\n\tprivate getStyleForState(state: BoatState): Keyframe {\n\t\tconst { shadows } = this.ANIMATION_CONFIG\n\t\tconst baseStyles = {\n\t\t\tmaxWidth: '300px',\n\t\t\tmaxHeight: 'auto',\n\t\t\tborderRadius: '16px',\n\t\t}\n\n\t\tconst stateStyles: Record<BoatState, Keyframe> = {\n\t\t\thidden: {\n\t\t\t\t...baseStyles,\n\t\t\t\topacity: '0',\n\t\t\t\tpointerEvents: 'none',\n\t\t\t\tboxShadow: 'none',\n\t\t\t\tbackdropFilter: 'none',\n\t\t\t},\n\t\t\tminimized: {\n\t\t\t\t...baseStyles,\n\t\t\t\topacity: '1',\n\t\t\t\tpointerEvents: 'auto',\n\t\t\t\tboxShadow: this.isLowered ? shadows.fabLowered : shadows.fab,\n\t\t\t\tbackdropFilter: 'none',\n\t\t\t},\n\t\t\texpanded: {\n\t\t\t\topacity: '1',\n\t\t\t\tpointerEvents: 'auto',\n\t\t\t\twidth: this.getResponsiveWidth(),\n\t\t\t\tmaxWidth: '100%',\n\t\t\t\tmaxHeight: '80vh',\n\t\t\t\tboxShadow: shadows.expanded,\n\t\t\t\tborderRadius: '8px 8px 0 0',\n\t\t\t\tbackdropFilter: 'blur(12px)',\n\t\t\t},\n\t\t}\n\n\t\treturn stateStyles[state] as Keyframe\n\t}\n\n\t// Calculate responsive width based on viewport\n\tprivate getResponsiveWidth(): string {\n\t\tif (typeof window === 'undefined') return '40vw'\n\n\t\tconst vw = window.innerWidth\n\t\tif (vw < 768) return 'calc(100vw - 32px)'\n\t\tif (vw < 1024) return '70vw'\n\t\tif (vw < 1280) return '60vw'\n\t\treturn '40vw'\n\t}\n\n\t// Update expanded width on window resize\n\tprivate updateExpandedWidth() {\n\t\tconst container = this.containerRef.value\n\t\tif (container && this.currentState === 'expanded') {\n\t\t\tcontainer.style.width = this.getResponsiveWidth()\n\t\t}\n\t}\n\n\tfirstUpdated() {\n\t\tthis.initializePosition()\n\t\tthis.applyInitialStyles()\n\t\tthis.updateContainerPosition()\n\t\tthis.setupDragPipeline()\n\n\t\t// Check for deprecated header slot usage\n\t\tconst hasHeaderSlot = this.querySelector('[slot=\"header\"]')\n\t\tif (hasHeaderSlot && !this.icon && !this.label) {\n\t\t\tconsole.warn(\n\t\t\t\t'[schmancy-boat] Using slot=\"header\" is deprecated. ' +\n\t\t\t\t\t'Please use the icon, label, and badge properties instead. ' +\n\t\t\t\t\t'Example: <schmancy-boat icon=\"info\" label=\"Title\" badge=\"5\">',\n\t\t\t)\n\t\t}\n\t}\n\n\t// Apply initial styles to elements\n\tprivate applyInitialStyles() {\n\t\tconst container = this.containerRef.value\n\t\tconst content = this.contentRef.value\n\t\tconst icon = this.iconRef.value\n\n\t\tif (container) {\n\t\t\tconst initialStyle = this.getStyleForState(this.currentState)\n\t\t\tObject.assign(container.style, initialStyle)\n\n\t\t\t// Safari compatibility for backdrop filter\n\t\t\tif ('webkitBackdropFilter' in container.style) {\n\t\t\t\t;(container.style as any).webkitBackdropFilter = initialStyle.backdropFilter\n\t\t\t}\n\t\t}\n\n\t\t// Set initial content opacity\n\t\tif (content) {\n\t\t\tcontent.style.opacity = this.isContentVisible ? '1' : '0'\n\t\t}\n\n\t\t// Set initial icon rotation\n\t\tif (icon && this.currentState === 'expanded') {\n\t\t\ticon.style.transform = 'rotate(180deg)'\n\t\t}\n\t}\n\n\n\t// Public method to toggle between minimized and expanded\n\ttoggleState() {\n\t\tconst newState = this.currentState === 'minimized' ? 'expanded' : 'minimized'\n\t\tthis.animateToState(newState)\n\t}\n\n\t// Public method to close (hide) the boat\n\tclose() {\n\t\tthis.animateToState('hidden')\n\t}\n\n\tprivate closeAndAddToNav() {\n\t\trace(\n\t\t\tthis.discover<any>('schmancy-navigation-rail'),\n\t\t\tthis.discover<any>('schmancy-navigation-bar'),\n\t\t\tthis.discover<any>('schmancy-nav-drawer'),\n\t\t\tthis.discover<any>('app-navigation-rail'),\n\t\t\tthis.discover<any>('app-navigation-bar'),\n\t\t\tthis.discover<any>('app-nav-drawer'),\n\t\t)\n\t\t\t.pipe(\n\t\t\t\ttake(1),\n\t\t\t\ttap(navComponent => {\n\t\t\t\t\tif (navComponent && typeof navComponent.addBoatItem === 'function') {\n\t\t\t\t\t\t// Use properties first, fall back to slot parsing\n\t\t\t\t\t\tconst icon =\n\t\t\t\t\t\t\tthis.icon ||\n\t\t\t\t\t\t\t(() => {\n\t\t\t\t\t\t\t\tconst headerSlot = this.querySelector('[slot=\"header\"]')\n\t\t\t\t\t\t\t\tconst iconElement = headerSlot?.querySelector('schmancy-icon')\n\t\t\t\t\t\t\t\treturn iconElement?.textContent?.trim() || 'widgets'\n\t\t\t\t\t\t\t})()\n\n\t\t\t\t\t\tconst label =\n\t\t\t\t\t\t\tthis.label ||\n\t\t\t\t\t\t\t(() => {\n\t\t\t\t\t\t\t\tconst headerSlot = this.querySelector('[slot=\"header\"]')\n\t\t\t\t\t\t\t\tlet title = headerSlot?.textContent?.trim() || 'Boat'\n\t\t\t\t\t\t\t\tif (icon && title.includes(icon)) {\n\t\t\t\t\t\t\t\t\ttitle = title.replace(icon, '').trim()\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\treturn title || this.id\n\t\t\t\t\t\t\t})()\n\n\t\t\t\t\t\t// Add the boat to navigation\n\t\t\t\t\t\tconst navItem = navComponent.addBoatItem({\n\t\t\t\t\t\t\tid: `boat-${this.id}`,\n\t\t\t\t\t\t\ttitle: label,\n\t\t\t\t\t\t\ticon: icon,\n\t\t\t\t\t\t})\n\n\t\t\t\t\t\tif (navItem) {\n\t\t\t\t\t\t\t// Simple fade out then hide\n\t\t\t\t\t\t\tconst container = this.containerRef.value\n\t\t\t\t\t\t\tif (container) {\n\t\t\t\t\t\t\t\tcontainer\n\t\t\t\t\t\t\t\t\t.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 150, easing: 'ease-out', fill: 'forwards' })\n\t\t\t\t\t\t\t\t\t.finished.then(() => {\n\t\t\t\t\t\t\t\t\t\tthis.currentState = 'hidden'\n\t\t\t\t\t\t\t\t\t\tthis.isContentVisible = false\n\t\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tthis.currentState = 'hidden'\n\t\t\t\t\t\t\t\tthis.isContentVisible = false\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t// Set up click listener to reopen - using RxJS pattern\n\t\t\t\t\t\t\tfromEvent(navItem, 'click')\n\t\t\t\t\t\t\t\t.pipe(\n\t\t\t\t\t\t\t\t\ttap(() => this.state = 'expanded'),\n\t\t\t\t\t\t\t\t\ttakeUntil(this.disconnecting)\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t.subscribe()\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// No nav component found, just hide\n\t\t\t\t\t\tthis.close()\n\t\t\t\t\t}\n\t\t\t\t}),\n\t\t\t)\n\t\t\t.subscribe()\n\t}\n\n\n\tprivate calculateDragPosition(\n\t\tclientX: number,\n\t\tclientY: number,\n\t\toffsetX: number,\n\t\toffsetY: number,\n\t\tinitialRect: DOMRect,\n\t): Position {\n\t\tconst targetLeft = clientX - offsetX\n\t\tconst targetTop = clientY - offsetY\n\t\tconst vw = window.innerWidth\n\t\tconst vh = window.innerHeight\n\t\tconst clampedLeft = Math.max(0, Math.min(targetLeft, vw - initialRect.width))\n\t\tconst clampedTop = Math.max(0, Math.min(targetTop, vh - initialRect.height))\n\n\t\tconst newX = this.anchor.includes('right') ? vw - (clampedLeft + initialRect.width) : clampedLeft\n\n\t\tconst newY = this.anchor.includes('bottom') ? vh - (clampedTop + initialRect.height) : clampedTop\n\n\t\treturn { x: Math.max(0, newX), y: Math.max(0, newY) }\n\t}\n\n\tprivate savePosition() {\n\t\tif (typeof window === 'undefined') return\n\n\t\tconst toSave: SavedPosition = {\n\t\t\tx: this.position.x,\n\t\t\ty: this.position.y,\n\t\t\tanchor: this.anchor,\n\t\t}\n\t\tconst key = `schmancy-boat-${this.id}`\n\t\tlocalStorage.setItem(key, JSON.stringify(toSave))\n\t\tconsole.log('💾 Saved position:', key, toSave)\n\t}\n\n\tprivate setupDragPipeline() {\n\t\tif (typeof window === 'undefined') return\n\n\t\tconst header = this.headerRef.value\n\t\tconst container = this.containerRef.value\n\t\tif (!header || !container) return\n\n\t\tlet hasDragged = false\n\t\tconst DRAG_THRESHOLD = 5\n\n\t\t// Merge mouse and touch start events\n\t\tmerge(\n\t\t\tfromEvent<MouseEvent>(header, 'mousedown').pipe(\n\t\t\t\tfilter(e => e.button === 0),\n\t\t\t\ttap(e => {\n\t\t\t\t\te.preventDefault()\n\t\t\t\t\te.stopPropagation()\n\t\t\t\t}),\n\t\t\t\tmap(e => ({\n\t\t\t\t\tclientX: e.clientX,\n\t\t\t\t\tclientY: e.clientY,\n\t\t\t\t\ttype: 'mouse' as const,\n\t\t\t\t})),\n\t\t\t),\n\t\t\tfromEvent<TouchEvent>(header, 'touchstart').pipe(\n\t\t\t\tmap(e => ({\n\t\t\t\t\tclientX: e.touches[0].clientX,\n\t\t\t\t\tclientY: e.touches[0].clientY,\n\t\t\t\t\ttype: 'touch' as const,\n\t\t\t\t})),\n\t\t\t),\n\t\t)\n\t\t\t.pipe(\n\t\t\t\tmap(({ clientX, clientY, type }) => {\n\t\t\t\t\tconst rect = container.getBoundingClientRect()\n\t\t\t\t\thasDragged = false\n\t\t\t\t\treturn {\n\t\t\t\t\t\tstartX: clientX,\n\t\t\t\t\t\tstartY: clientY,\n\t\t\t\t\t\toffsetX: clientX - rect.left,\n\t\t\t\t\t\toffsetY: clientY - rect.top,\n\t\t\t\t\t\tinitialRect: rect,\n\t\t\t\t\t\ttype,\n\t\t\t\t\t}\n\t\t\t\t}),\n\t\t\t)\n\t\t\t.pipe(\n\t\t\t\tswitchMap(({ startX, startY, offsetX, offsetY, initialRect, type }) => {\n\t\t\t\t\tconst move$ =\n\t\t\t\t\t\ttype === 'mouse'\n\t\t\t\t\t\t\t? fromEvent<MouseEvent>(window, 'mousemove').pipe(map(e => ({ clientX: e.clientX, clientY: e.clientY })))\n\t\t\t\t\t\t\t: fromEvent<TouchEvent>(window, 'touchmove').pipe(\n\t\t\t\t\t\t\t\t\tmap(e => ({ clientX: e.touches[0].clientX, clientY: e.touches[0].clientY })),\n\t\t\t\t\t\t\t\t)\n\n\t\t\t\t\tconst end$ = type === 'mouse' ? fromEvent(window, 'mouseup') : fromEvent(window, 'touchend')\n\n\t\t\t\t\treturn move$.pipe(\n\t\t\t\t\t\tmap(({ clientX, clientY }) => {\n\t\t\t\t\t\t\tconst deltaX = clientX - startX\n\t\t\t\t\t\t\tconst deltaY = clientY - startY\n\t\t\t\t\t\t\tconst distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY)\n\n\t\t\t\t\t\t\tif (distance > DRAG_THRESHOLD && !hasDragged) {\n\t\t\t\t\t\t\t\thasDragged = true\n\t\t\t\t\t\t\t\tthis.isDragging = true\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tif (!hasDragged) return null\n\n\t\t\t\t\t\t\treturn this.calculateDragPosition(clientX, clientY, offsetX, offsetY, initialRect)\n\t\t\t\t\t\t}),\n\t\t\t\t\t\tfilter(position => position !== null),\n\t\t\t\t\t\ttap(position => {\n\t\t\t\t\t\t\tif (position) {\n\t\t\t\t\t\t\t\tthis.position = position\n\t\t\t\t\t\t\t\tthis.updateContainerPosition()\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}),\n\t\t\t\t\t\ttakeUntil(end$),\n\t\t\t\t\t)\n\t\t\t\t}),\n\t\t\t\tfinalize(() => {\n\t\t\t\t\tif (hasDragged) {\n\t\t\t\t\t\tthis.updateAnchor()\n\t\t\t\t\t\tthis.savePosition()\n\t\t\t\t\t} else {\n\t\t\t\t\t\tthis.toggleState()\n\t\t\t\t\t}\n\t\t\t\t\tthis.isDragging = false\n\t\t\t\t\thasDragged = false\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\t// Update container position based on anchor and position values\n\tprivate updateContainerPosition() {\n\t\tconst container = this.containerRef.value\n\t\tif (!container) return\n\n\t\t// Reset all position styles\n\t\tcontainer.style.removeProperty('left')\n\t\tcontainer.style.removeProperty('right')\n\t\tcontainer.style.removeProperty('top')\n\t\tcontainer.style.removeProperty('bottom')\n\n\t\t// Apply new position based on anchor\n\t\tif (this.anchor.includes('right')) {\n\t\t\tcontainer.style.right = `${this.position.x}px`\n\t\t} else {\n\t\t\tcontainer.style.left = `${this.position.x}px`\n\t\t}\n\n\t\tif (this.anchor.includes('bottom')) {\n\t\t\tcontainer.style.bottom = `${this.position.y}px`\n\t\t} else {\n\t\t\tcontainer.style.top = `${this.position.y}px`\n\t\t}\n\t}\n\n\t// Update anchor based on current position\n\tprivate updateAnchor() {\n\t\tif (typeof window === 'undefined') return\n\n\t\tconst container = this.containerRef.value\n\t\tif (!container) return\n\n\t\tconst rect = container.getBoundingClientRect()\n\t\tconst vw = window.innerWidth\n\t\tconst vh = window.innerHeight\n\n\t\tconst isRight = rect.left > vw / 2\n\t\tconst isBottom = rect.top > vh / 2\n\n\t\tconst newAnchor = `${isBottom ? 'bottom' : 'top'}-${isRight ? 'right' : 'left'}` as typeof this.anchor\n\n\t\tif (newAnchor !== this.anchor) {\n\t\t\t// Calculate new position values for the new anchor\n\t\t\tif (isRight) {\n\t\t\t\tthis.position.x = vw - rect.right\n\t\t\t} else {\n\t\t\t\tthis.position.x = rect.left\n\t\t\t}\n\n\t\t\tif (isBottom) {\n\t\t\t\tthis.position.y = vh - rect.bottom\n\t\t\t} else {\n\t\t\t\tthis.position.y = rect.top\n\t\t\t}\n\n\t\t\tthis.anchor = newAnchor\n\t\t}\n\t}\n\n\t// Cleanup on component disconnect\n\tdisconnectedCallback() {\n\t\tsuper.disconnectedCallback()\n\t\tthis.currentAnimation?.cancel()\n\t}\n\n\tprotected render(): unknown {\n\t\tconst surfaceElevation = this.currentState === 'minimized' ? (this.isLowered ? '1' : '3') : '4'\n\t\tconst isMinimized = this.currentState === 'minimized'\n\n\t\t// Set transform origin based on anchor for proper expansion\n\t\tconst transformOrigin = this.anchor.includes('bottom')\n\t\t\t? (this.anchor.includes('right') ? 'bottom right' : 'bottom left')\n\t\t\t: (this.anchor.includes('right') ? 'top right' : 'top left')\n\n\t\tconst containerClasses = {\n\t\t\t'z-50':true,\n\t\t\tfixed: true,\n\t\t\t'overflow-y-auto': true,\n\t\t\tflex: true,\n\t\t\t'flex-col': true,\n\t\t\t'select-none': true,\n\t\t\t'will-change-transform': true,\n\t\t\t'[contain:layout_style]': true,\n\t\t\t'[transform:translate3d(0,0,0)]': true,\n\t\t\t'[backface-visibility:hidden]': true,\n\t\t\t'transition-shadow': true,\n\t\t\t'opacity-95': this.isDragging,\n\t\t\t'shadow-[0_24px_48px_-8px_rgba(0,0,0,0.2),0_12px_24px_-4px_rgba(0,0,0,0.12)]': this.isDragging,\n\t\t}\n\n\t\treturn html`\n\t\t\t<div\n\t\t\t\tclass=${this.classMap(containerClasses)}\n\t\t\t\tstyle=\"transform-origin: ${transformOrigin}\"\n\t\t\t\t${ref(this.containerRef)}\n\t\t\t>\n\t\t\t\t<!-- Header section -->\n\t\t\t\t<section class=\"sticky top-0\">\n\t\t\t\t\t<schmancy-surface\n\t\t\t\t\t\televation=\"${surfaceElevation}\"\n\t\t\t\t\t\trounded=\"${isMinimized ? 'none' : 'top'}\"\n\t\t\t\t\t\ttype=\"containerLowest\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"group sticky top-0 px-3 py-2 flex items-center justify-between gap-3 ${this.isDragging\n\t\t\t\t\t\t\t\t? 'cursor-grabbing'\n\t\t\t\t\t\t\t\t: 'cursor-move'}\"\n\t\t\t\t\t\t\t${ref(this.headerRef)}\n\t\t\t\t\t\t\ttitle=\"Drag to move, double-click to toggle\"\n\t\t\t\t\t\t\t@dblclick=${(e: Event) => {\n\t\t\t\t\t\t\t\te.preventDefault()\n\t\t\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\t\t\tthis.toggleState()\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<!-- Drag handle indicator -->\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclass=\"flex items-center text-surface-onVariant opacity-40 transition-opacity duration-200 group-hover:opacity-100\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<schmancy-icon style=\"font-size: 20px\">drag_indicator</schmancy-icon>\n\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t<!-- Header content - use properties if provided, else fallback to slot -->\n\t\t\t\t\t\t\t<div class=\"flex-1 min-w-fit items-center flex justify-start\">\n\t\t\t\t\t\t\t\t${this.icon || this.label\n\t\t\t\t\t\t\t\t\t? html`\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"flex gap-2 items-center\">\n\t\t\t\t\t\t\t\t\t\t\t\t${this.icon ? html`<schmancy-icon>${this.icon}</schmancy-icon>` : ''}\n\t\t\t\t\t\t\t\t\t\t\t\t${this.label\n\t\t\t\t\t\t\t\t\t\t\t\t\t? html`<schmancy-typography type=\"title\" token=\"md\">${this.label}</schmancy-typography>`\n\t\t\t\t\t\t\t\t\t\t\t\t\t: ''}\n\t\t\t\t\t\t\t\t\t\t\t\t${this.badge !== undefined && this.badge !== null && this.badge !== ''\n\t\t\t\t\t\t\t\t\t\t\t\t\t? html`<schmancy-badge>${this.badge}</schmancy-badge>`\n\t\t\t\t\t\t\t\t\t\t\t\t\t: ''}\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t`\n\t\t\t\t\t\t\t\t\t: html`<slot name=\"header\"></slot>`}\n\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t<!-- Control buttons -->\n\t\t\t\t\t\t\t<div class=\"flex items-center gap-1 flex-shrink-0\">\n\t\t\t\t\t\t\t\t${isMinimized\n\t\t\t\t\t\t\t\t\t? html`\n\t\t\t\t\t\t\t\t\t\t\t<!-- Expand button (when minimized) -->\n\t\t\t\t\t\t\t\t\t\t\t<schmancy-icon-button\n\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"text\"\n\t\t\t\t\t\t\t\t\t\t\t\t@click=${(e: Event) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.state = 'expanded'\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\ttitle=\"Expand\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<schmancy-icon ${ref(this.iconRef)}>collapse_content</schmancy-icon>\n\t\t\t\t\t\t\t\t\t\t\t</schmancy-icon-button>\n\t\t\t\t\t\t\t\t\t\t`\n\t\t\t\t\t\t\t\t\t: html`\n\t\t\t\t\t\t\t\t\t\t\t<!-- Minimize button (when expanded) -->\n\t\t\t\t\t\t\t\t\t\t\t<schmancy-icon-button\n\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"filled tonal\"\n\t\t\t\t\t\t\t\t\t\t\t\t@click=${(e: Event) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.state = 'minimized'\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\ttitle=\"Minimize\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<schmancy-icon ${ref(this.iconRef)}>expand_content</schmancy-icon>\n\t\t\t\t\t\t\t\t\t\t\t</schmancy-icon-button>\n\t\t\t\t\t\t\t\t\t\t`}\n\n\t\t\t\t\t\t\t\t<!-- Close button -->\n\t\t\t\t\t\t\t\t<schmancy-icon-button\n\t\t\t\t\t\t\t\t\tvariant=\"text\"\n\t\t\t\t\t\t\t\t\t@click=${(e: Event) => {\n\t\t\t\t\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\t\t\t\t\tthis.closeAndAddToNav()\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\ttitle=\"Close and add to navigation\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<schmancy-icon>minimize</schmancy-icon>\n\t\t\t\t\t\t\t\t</schmancy-icon-button>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</schmancy-surface>\n\t\t\t\t</section>\n\n\t\t\t\t<!-- Content section -->\n\t\t\t\t<schmancy-surface .hidden=${!this.isContentVisible} type=\"containerLow\" class=\"flex-1\" ${ref(this.contentRef)}>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</schmancy-surface>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-boat': SchmancyBoat\n\t}\n}\n"],"names":["SchmancyBoat","$LitElement","css","super","arguments","this","id","containerRef","createRef","contentRef","iconRef","headerRef","ANIMATION_CONFIG","durations","expand","minimize","hide","content","easing","emphasized","decelerate","accelerate","standard","shadows","fab","fabLowered","expanded","currentState","isContentVisible","isAnimating","isLowered","isDragging","position","x","y","anchor","state","value","animateToState","lowered","requestUpdate","connectedCallback","window","fromEvent","pipe","takeUntil","disconnecting","subscribe","updateExpandedWidth","filter","e","key","tap","preventDefault","toggleState","close","initializePosition","saved","localStorage","getItem","parsed","JSON","parse","targetState","previousState","performTransition","dispatchEvent","CustomEvent","detail","bubbles","composed","err","fromState","toState","currentAnimation","cancel","animations","createAnimations","container","finished","icon","config","fromStyles","getStyleForState","toStyles","animate","duration","fill","opacity","transform","isExpanding","baseStyles","maxWidth","maxHeight","borderRadius","hidden","pointerEvents","boxShadow","backdropFilter","minimized","width","getResponsiveWidth","vw","innerWidth","style","firstUpdated","applyInitialStyles","updateContainerPosition","setupDragPipeline","querySelector","label","initialStyle","Object","assign","webkitBackdropFilter","newState","closeAndAddToNav","race","discover","take","navComponent","addBoatItem","textContent","trim","title","includes","replace","navItem","then","clientX","clientY","offsetX","offsetY","initialRect","targetLeft","targetTop","vh","innerHeight","clampedLeft","Math","max","min","clampedTop","height","newX","newY","savePosition","toSave","setItem","stringify","header","hasDragged","merge","button","stopPropagation","map","type","touches","rect","getBoundingClientRect","startX","startY","left","top","switchMap","move$","end$","deltaX","deltaY","sqrt","calculateDragPosition","finalize","updateAnchor","removeProperty","right","bottom","isRight","isBottom","newAnchor","disconnectedCallback","render","surfaceElevation","isMinimized","transformOrigin","containerClasses","fixed","flex","html","classMap","ref","badge","__decorateClass","property","String","reflect","prototype","Boolean","customElement"],"mappings":"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"}

package/dist/{boat-DumUFcmT.js → boat-DuCSpIQv.js}

@@ -1,23 +1,23 @@
-import { fromEvent as u, race as A, merge as k } from "rxjs";
-import { takeUntil as b, filter as S, tap as w, take as P, map as f, switchMap as I, finalize as D } from "rxjs/operators";
+import { fromEvent as l, race as z, merge as A } from "rxjs";
+import { takeUntil as x, filter as R, tap as b, take as P, map as f, switchMap as Y, finalize as D } from "rxjs/operators";
 import "lit/directives/class-map.js";
 import "lit/directives/style-map.js";
-import { property as R, state as m, customElement as F } from "lit/decorators.js";
-import "./tailwind.mixin-Cn7vup-6.js";
-import { $ as Y } from "./litElement.mixin-Dp4mBSNw.js";
-import { css as N, html as $ } from "lit";
-import { createRef as v, ref as g } from "lit/directives/ref.js";
-var T = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, d = (t, e, n, i) => {
-  for (var a, s = i > 1 ? void 0 : i ? _(e, n) : e, o = t.length - 1; o >= 0; o--) (a = t[o]) && (s = (i ? a(e, n, s) : a(s)) || s);
-  return i && s && T(e, n, s), s;
+import { property as y, state as g, customElement as I } from "lit/decorators.js";
+import "./tailwind.mixin-BOTmjQKh.js";
+import { $ as _ } from "./litElement.mixin-D5MC2dPM.js";
+import { css as M, html as u } from "lit";
+import { createRef as $, ref as w } from "lit/directives/ref.js";
+var X = Object.defineProperty, F = Object.getOwnPropertyDescriptor, h = (t, e, n, i) => {
+  for (var s, o = i > 1 ? void 0 : i ? F(e, n) : e, a = t.length - 1; a >= 0; a--) (s = t[a]) && (o = (i ? s(e, n, o) : s(o)) || o);
+  return i && o && X(e, n, o), o;
 };
-let c = class extends Y(N`
+let c = class extends _(M`
 	:host {
 		display: contents;
 	}
 `) {
   constructor() {
-    super(...arguments), this.id = "default", this.containerRef = v(), this.contentRef = v(), this.iconRef = v(), this.headerRef = v(), this.ANIMATION_CONFIG = { durations: { expand: 350, minimize: 250, hide: 200, content: 300 }, easing: { emphasized: "cubic-bezier(0.2, 0.0, 0, 1.0)", decelerate: "cubic-bezier(0.05, 0.7, 0.1, 1.0)", accelerate: "cubic-bezier(0.3, 0.0, 0.8, 0.15)", standard: "cubic-bezier(0.4, 0.0, 0.2, 1)" }, shadows: { fab: "0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)", fabLowered: "0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12)", expanded: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)" } }, this.currentState = "minimized", this.isContentVisible = !1, this.isAnimating = !1, this.isLowered = !1, this.isDragging = !1, this.position = { x: 16, y: 16 }, this.anchor = "bottom-right";
+    super(...arguments), this.id = "default", this.containerRef = $(), this.contentRef = $(), this.iconRef = $(), this.headerRef = $(), this.ANIMATION_CONFIG = { durations: { expand: 350, minimize: 250, hide: 200, content: 300 }, easing: { emphasized: "cubic-bezier(0.2, 0.0, 0, 1.0)", decelerate: "cubic-bezier(0.05, 0.7, 0.1, 1.0)", accelerate: "cubic-bezier(0.3, 0.0, 0.8, 0.15)", standard: "cubic-bezier(0.4, 0.0, 0.2, 1)" }, shadows: { fab: "0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)", fabLowered: "0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12)", expanded: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)" } }, this.currentState = "minimized", this.isContentVisible = !1, this.isAnimating = !1, this.isLowered = !1, this.isDragging = !1, this.position = { x: 16, y: 16 }, this.anchor = "bottom-right";
   }
   get state() {
     return this.currentState;
@@ -32,9 +32,9 @@ let c = class extends Y(N`
     this.isLowered = t, this.requestUpdate();
   }
   connectedCallback() {
-    super.connectedCallback(), typeof window < "u" && (u(window, "resize").pipe(b(this.disconnecting)).subscribe(() => {
+    super.connectedCallback(), typeof window < "u" && (l(window, "resize").pipe(x(this.disconnecting)).subscribe(() => {
       this.currentState === "expanded" && this.updateExpandedWidth();
-    }), u(window, "keydown").pipe(S((t) => t.key === "Escape" && this.currentState !== "hidden"), w((t) => t.preventDefault()), b(this.disconnecting)).subscribe(() => {
+    }), l(window, "keydown").pipe(R((t) => t.key === "Escape" && this.currentState !== "hidden"), b((t) => t.preventDefault()), x(this.disconnecting)).subscribe(() => {
       this.currentState === "expanded" ? this.toggleState() : this.close();
     }));
   }
@@ -66,14 +66,14 @@ let c = class extends Y(N`
     n.container && (this.currentAnimation = n.container, await n.container.finished, e !== "expanded" && (this.isContentVisible = !1));
   }
   createAnimations(t, e) {
-    const n = this.containerRef.value, i = this.contentRef.value, a = this.iconRef.value, s = {};
-    if (!n) return s;
-    const o = this.ANIMATION_CONFIG, l = this.getStyleForState(t), p = this.getStyleForState(e);
-    if (s.container = e === "expanded" ? n.animate([l, p], { duration: o.durations.expand, easing: o.easing.decelerate, fill: "forwards" }) : n.animate([l, p], { duration: e === "hidden" ? o.durations.hide : o.durations.minimize, easing: o.easing.accelerate, fill: "forwards" }), i && t === "expanded" && e === "minimized" ? i.animate([{ opacity: 1, transform: "translateY(0)" }, { opacity: 0, transform: "translateY(-8px)" }], { duration: 150, easing: o.easing.standard, fill: "forwards" }) : i && e === "expanded" && i.animate([{ opacity: 0, transform: "translateY(8px)" }, { opacity: 1, transform: "translateY(0)" }], { duration: o.durations.content, easing: o.easing.standard, fill: "forwards" }), a) {
-      const h = e === "expanded";
-      (h || t === "expanded" && e === "minimized") && a.animate([{ transform: h ? "rotate(0deg)" : "rotate(180deg)" }, { transform: h ? "rotate(180deg)" : "rotate(0deg)" }], { duration: 250, easing: o.easing.emphasized, fill: "forwards" });
+    const n = this.containerRef.value, i = this.contentRef.value, s = this.iconRef.value, o = {};
+    if (!n) return o;
+    const a = this.ANIMATION_CONFIG, m = this.getStyleForState(t), d = this.getStyleForState(e);
+    if (o.container = e === "expanded" ? n.animate([m, d], { duration: a.durations.expand, easing: a.easing.decelerate, fill: "forwards" }) : n.animate([m, d], { duration: e === "hidden" ? a.durations.hide : a.durations.minimize, easing: a.easing.accelerate, fill: "forwards" }), i && t === "expanded" && e === "minimized" ? i.animate([{ opacity: 1, transform: "translateY(0)" }, { opacity: 0, transform: "translateY(-8px)" }], { duration: 150, easing: a.easing.standard, fill: "forwards" }) : i && e === "expanded" && i.animate([{ opacity: 0, transform: "translateY(8px)" }, { opacity: 1, transform: "translateY(0)" }], { duration: a.durations.content, easing: a.easing.standard, fill: "forwards" }), s) {
+      const p = e === "expanded";
+      (p || t === "expanded" && e === "minimized") && s.animate([{ transform: p ? "rotate(0deg)" : "rotate(180deg)" }, { transform: p ? "rotate(180deg)" : "rotate(0deg)" }], { duration: 250, easing: a.easing.emphasized, fill: "forwards" });
     }
-    return s;
+    return o;
   }
   getStyleForState(t) {
     const { shadows: e } = this.ANIMATION_CONFIG, n = { maxWidth: "300px", maxHeight: "auto", borderRadius: "16px" };
@@ -89,7 +89,7 @@ let c = class extends Y(N`
     t && this.currentState === "expanded" && (t.style.width = this.getResponsiveWidth());
   }
   firstUpdated() {
-    this.initializePosition(), this.applyInitialStyles(), this.updateContainerPosition(), this.setupDragPipeline();
+    this.initializePosition(), this.applyInitialStyles(), this.updateContainerPosition(), this.setupDragPipeline(), this.querySelector('[slot="header"]') && !this.icon && this.label;
   }
   applyInitialStyles() {
     const t = this.containerRef.value, e = this.contentRef.value, n = this.iconRef.value;
@@ -107,41 +107,24 @@ let c = class extends Y(N`
     this.animateToState("hidden");
   }
   closeAndAddToNav() {
-    A(this.discover("schmancy-navigation-rail"), this.discover("schmancy-navigation-bar"), this.discover("schmancy-nav-drawer"), this.discover("app-navigation-rail"), this.discover("app-navigation-bar"), this.discover("app-nav-drawer")).pipe(P(1), w(async (t) => {
+    z(this.discover("schmancy-navigation-rail"), this.discover("schmancy-navigation-bar"), this.discover("schmancy-nav-drawer"), this.discover("app-navigation-rail"), this.discover("app-navigation-bar"), this.discover("app-nav-drawer")).pipe(P(1), b((t) => {
       if (t && typeof t.addBoatItem == "function") {
-        const e = this.querySelector('[slot="header"]'), n = e?.querySelector("schmancy-icon"), i = n?.textContent?.trim() || "widgets";
-        let a = e?.textContent?.trim() || "Boat";
-        a.includes(i) && (a = a.replace(i, "").trim());
-        const s = t.addBoatItem({ id: `boat-${this.id}`, title: a || this.id, icon: i });
-        s && (await this.animateToNavItem(s), s.addEventListener("click", () => {
-          this.animateFromNavItem(s);
-        }));
+        const e = this.icon || (this.querySelector('[slot="header"]')?.querySelector("schmancy-icon")?.textContent?.trim() || "widgets"), n = this.label || (() => {
+          let o = this.querySelector('[slot="header"]')?.textContent?.trim() || "Boat";
+          return o.includes(e) && (o = o.replace(e, "").trim()), o || this.id;
+        })(), i = t.addBoatItem({ id: `boat-${this.id}`, title: n, icon: e });
+        if (i) {
+          const s = this.containerRef.value;
+          s ? s.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 150, easing: "ease-out", fill: "forwards" }).finished.then(() => {
+            this.currentState = "hidden", this.isContentVisible = !1;
+          }) : (this.currentState = "hidden", this.isContentVisible = !1), l(i, "click").pipe(b(() => this.state = "expanded"), x(this.disconnecting)).subscribe();
+        }
       } else this.close();
     })).subscribe();
   }
-  async animateToNavItem(t) {
-    const e = this.containerRef.value;
-    if (!e) return;
-    const n = e.getBoundingClientRect(), i = t.getBoundingClientRect();
-    this.currentAnimation?.cancel();
-    const a = [{ transform: "scale(1) translate3d(0, 0, 0)", opacity: 1, borderRadius: "8px" }, { transform: `scale(0.3) translate3d(${i.left - n.left}px, ${i.top - n.top}px, 0)`, opacity: 0.5, borderRadius: "50%" }, { transform: `scale(0) translate3d(${i.left - n.left}px, ${i.top - n.top}px, 0)`, opacity: 0, borderRadius: "50%" }];
-    this.currentAnimation = e.animate(a, { duration: 600, easing: "cubic-bezier(0.4, 0.0, 0.2, 1)", fill: "forwards" }), await this.currentAnimation.finished, this.currentState = "hidden";
-  }
-  animateFromNavItem(t) {
-    const e = this.containerRef.value;
-    if (!e) return;
-    const n = t.getBoundingClientRect();
-    e.style.transformOrigin = `${n.left}px ${n.top}px`, this.currentAnimation?.cancel();
-    const i = [{ transform: `scale(0) translate3d(${n.left}px, ${n.top}px, 0)`, opacity: 0, borderRadius: "50%" }, { transform: "scale(0.5) translate3d(0, 0, 0)", opacity: 0.5, borderRadius: "24px" }, { transform: "scale(1) translate3d(0, 0, 0)", opacity: 1, borderRadius: "8px" }];
-    this.currentAnimation = e.animate(i, { duration: 400, easing: "cubic-bezier(0.2, 0.0, 0, 1.0)", fill: "forwards" }), this.currentState = "expanded", this.isContentVisible = !0, this.bringToFront();
-  }
-  bringToFront() {
-    const t = this.containerRef.value;
-    t && (t.style.zIndex = String(1e4 + Date.now() % 1e3));
-  }
-  calculateDragPosition(t, e, n, i, a) {
-    const s = t - n, o = e - i, l = window.innerWidth, p = window.innerHeight, h = Math.max(0, Math.min(s, l - a.width)), y = Math.max(0, Math.min(o, p - a.height)), r = this.anchor.includes("right") ? l - (h + a.width) : h, x = this.anchor.includes("bottom") ? p - (y + a.height) : y;
-    return { x: Math.max(0, r), y: Math.max(0, x) };
+  calculateDragPosition(t, e, n, i, s) {
+    const o = t - n, a = e - i, m = window.innerWidth, d = window.innerHeight, p = Math.max(0, Math.min(o, m - s.width)), v = Math.max(0, Math.min(a, d - s.height)), r = this.anchor.includes("right") ? m - (p + s.width) : p, S = this.anchor.includes("bottom") ? d - (v + s.height) : v;
+    return { x: Math.max(0, r), y: Math.max(0, S) };
   }
   savePosition() {
     if (typeof window > "u") return;
@@ -153,22 +136,22 @@ let c = class extends Y(N`
     const t = this.headerRef.value, e = this.containerRef.value;
     if (!t || !e) return;
     let n = !1;
-    k(u(t, "mousedown").pipe(S((i) => i.button === 0), w((i) => {
+    A(l(t, "mousedown").pipe(R((i) => i.button === 0), b((i) => {
       i.preventDefault(), i.stopPropagation();
-    }), f((i) => ({ clientX: i.clientX, clientY: i.clientY, type: "mouse" }))), u(t, "touchstart").pipe(f((i) => ({ clientX: i.touches[0].clientX, clientY: i.touches[0].clientY, type: "touch" })))).pipe(f(({ clientX: i, clientY: a, type: s }) => {
-      const o = e.getBoundingClientRect();
-      return n = !1, { startX: i, startY: a, offsetX: i - o.left, offsetY: a - o.top, initialRect: o, type: s };
-    })).pipe(I(({ startX: i, startY: a, offsetX: s, offsetY: o, initialRect: l, type: p }) => {
-      const h = p === "mouse" ? u(window, "mousemove").pipe(f((r) => ({ clientX: r.clientX, clientY: r.clientY }))) : u(window, "touchmove").pipe(f((r) => ({ clientX: r.touches[0].clientX, clientY: r.touches[0].clientY }))), y = u(window, p === "mouse" ? "mouseup" : "touchend");
-      return h.pipe(f(({ clientX: r, clientY: x }) => {
-        const z = r - i, C = x - a;
-        return Math.sqrt(z * z + C * C) > 5 && !n && (n = !0, this.isDragging = !0), n ? this.calculateDragPosition(r, x, s, o, l) : null;
-      }), S((r) => r !== null), w((r) => {
+    }), f((i) => ({ clientX: i.clientX, clientY: i.clientY, type: "mouse" }))), l(t, "touchstart").pipe(f((i) => ({ clientX: i.touches[0].clientX, clientY: i.touches[0].clientY, type: "touch" })))).pipe(f(({ clientX: i, clientY: s, type: o }) => {
+      const a = e.getBoundingClientRect();
+      return n = !1, { startX: i, startY: s, offsetX: i - a.left, offsetY: s - a.top, initialRect: a, type: o };
+    })).pipe(Y(({ startX: i, startY: s, offsetX: o, offsetY: a, initialRect: m, type: d }) => {
+      const p = d === "mouse" ? l(window, "mousemove").pipe(f((r) => ({ clientX: r.clientX, clientY: r.clientY }))) : l(window, "touchmove").pipe(f((r) => ({ clientX: r.touches[0].clientX, clientY: r.touches[0].clientY }))), v = l(window, d === "mouse" ? "mouseup" : "touchend");
+      return p.pipe(f(({ clientX: r, clientY: S }) => {
+        const C = r - i, k = S - s;
+        return Math.sqrt(C * C + k * k) > 5 && !n && (n = !0, this.isDragging = !0), n ? this.calculateDragPosition(r, S, o, a, m) : null;
+      }), R((r) => r !== null), b((r) => {
         r && (this.position = r, this.updateContainerPosition());
-      }), b(y));
+      }), x(v));
     }), D(() => {
       n ? (this.updateAnchor(), this.savePosition()) : this.toggleState(), this.isDragging = !1, n = !1;
-    }), b(this.disconnecting)).subscribe();
+    }), x(this.disconnecting)).subscribe();
   }
   updateContainerPosition() {
     const t = this.containerRef.value;
@@ -178,18 +161,22 @@ let c = class extends Y(N`
     if (typeof window > "u") return;
     const t = this.containerRef.value;
     if (!t) return;
-    const e = t.getBoundingClientRect(), n = window.innerWidth, i = window.innerHeight, a = e.left > n / 2, s = e.top > i / 2, o = `${s ? "bottom" : "top"}-${a ? "right" : "left"}`;
-    o !== this.anchor && (this.position.x = a ? n - e.right : e.left, this.position.y = s ? i - e.bottom : e.top, this.anchor = o);
+    const e = t.getBoundingClientRect(), n = window.innerWidth, i = window.innerHeight, s = e.left > n / 2, o = e.top > i / 2, a = `${o ? "bottom" : "top"}-${s ? "right" : "left"}`;
+    a !== this.anchor && (this.position.x = s ? n - e.right : e.left, this.position.y = o ? i - e.bottom : e.top, this.anchor = a);
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this.currentAnimation?.cancel();
   }
   render() {
-    const t = this.currentState === "minimized" ? this.isLowered ? "1" : "3" : "4", e = this.currentState === "minimized", n = { fixed: !0, "overflow-y-auto": !0, flex: !0, "flex-col": !0, "z-[10000]": !0, "select-none": !0, "will-change-transform": !0, "[contain:layout_style]": !0, "[transform:translate3d(0,0,0)]": !0, "[backface-visibility:hidden]": !0, "transition-shadow": !0, "opacity-95": this.isDragging, "shadow-[0_24px_48px_-8px_rgba(0,0,0,0.2),0_12px_24px_-4px_rgba(0,0,0,0.12)]": this.isDragging };
-    return $`
-			<div class=${this.classMap(n)} ${g(this.containerRef)} @click=${this.bringToFront}>
+    const t = this.currentState === "minimized" ? this.isLowered ? "1" : "3" : "4", e = this.currentState === "minimized", n = this.anchor.includes("bottom") ? this.anchor.includes("right") ? "bottom right" : "bottom left" : this.anchor.includes("right") ? "top right" : "top left", i = { "z-50": !0, fixed: !0, "overflow-y-auto": !0, flex: !0, "flex-col": !0, "select-none": !0, "will-change-transform": !0, "[contain:layout_style]": !0, "[transform:translate3d(0,0,0)]": !0, "[backface-visibility:hidden]": !0, "transition-shadow": !0, "opacity-95": this.isDragging, "shadow-[0_24px_48px_-8px_rgba(0,0,0,0.2),0_12px_24px_-4px_rgba(0,0,0,0.12)]": this.isDragging };
+    return u`
+			<div
+				class=${this.classMap(i)}
+				style="transform-origin: ${n}"
+				${w(this.containerRef)}
+			>
 				<!-- Header section -->
-				<section class="sticky top-0 z-10">
+				<section class="sticky top-0">
 					<schmancy-surface
 						elevation="${t}"
 						rounded="${e ? "none" : "top"}"
@@ -197,10 +184,10 @@ let c = class extends Y(N`
 					>
 						<div
 							class="group sticky top-0 px-3 py-2 flex items-center justify-between gap-3 ${this.isDragging ? "cursor-grabbing" : "cursor-move"}"
-							${g(this.headerRef)}
+							${w(this.headerRef)}
 							title="Drag to move, double-click to toggle"
-							@dblclick=${(i) => {
-      i.preventDefault(), i.stopPropagation(), this.toggleState();
+							@dblclick=${(s) => {
+      s.preventDefault(), s.stopPropagation(), this.toggleState();
     }}
 						>
 							<!-- Drag handle indicator -->
@@ -210,46 +197,52 @@ let c = class extends Y(N`
 								<schmancy-icon style="font-size: 20px">drag_indicator</schmancy-icon>
 							</div>
 
-							<!-- Header content slot -->
+							<!-- Header content - use properties if provided, else fallback to slot -->
 							<div class="flex-1 min-w-fit items-center flex justify-start">
-								<slot name="header"></slot>
+								${this.icon || this.label ? u`
+											<div class="flex gap-2 items-center">
+												${this.icon ? u`<schmancy-icon>${this.icon}</schmancy-icon>` : ""}
+												${this.label ? u`<schmancy-typography type="title" token="md">${this.label}</schmancy-typography>` : ""}
+												${this.badge !== void 0 && this.badge !== null && this.badge !== "" ? u`<schmancy-badge>${this.badge}</schmancy-badge>` : ""}
+											</div>
+										` : u`<slot name="header"></slot>`}
 							</div>
 
 							<!-- Control buttons -->
 							<div class="flex items-center gap-1 flex-shrink-0">
-								${e ? $`
+								${e ? u`
 											<!-- Expand button (when minimized) -->
 											<schmancy-icon-button
 												variant="text"
-												@click=${(i) => {
-      i.stopPropagation(), this.state = "expanded";
+												@click=${(s) => {
+      s.stopPropagation(), this.state = "expanded";
     }}
 												title="Expand"
 											>
-												<schmancy-icon ${g(this.iconRef)}>expand_less</schmancy-icon>
+												<schmancy-icon ${w(this.iconRef)}>collapse_content</schmancy-icon>
 											</schmancy-icon-button>
-										` : $`
+										` : u`
 											<!-- Minimize button (when expanded) -->
 											<schmancy-icon-button
 												variant="filled tonal"
-												@click=${(i) => {
-      i.stopPropagation(), this.state = "minimized";
+												@click=${(s) => {
+      s.stopPropagation(), this.state = "minimized";
     }}
 												title="Minimize"
 											>
-												<schmancy-icon ${g(this.iconRef)}>expand_more</schmancy-icon>
+												<schmancy-icon ${w(this.iconRef)}>expand_content</schmancy-icon>
 											</schmancy-icon-button>
 										`}
 
 								<!-- Close button -->
 								<schmancy-icon-button
 									variant="text"
-									@click=${(i) => {
-      i.stopPropagation(), this.closeAndAddToNav();
+									@click=${(s) => {
+      s.stopPropagation(), this.closeAndAddToNav();
     }}
 									title="Close and add to navigation"
 								>
-									<schmancy-icon>close</schmancy-icon>
+									<schmancy-icon>minimize</schmancy-icon>
 								</schmancy-icon-button>
 							</div>
 						</div>
@@ -257,20 +250,15 @@ let c = class extends Y(N`
 				</section>
 
 				<!-- Content section -->
-				<schmancy-surface
-					.hidden=${!this.isContentVisible}
-					type="containerLow"
-					class="z-0 flex-1"
-					${g(this.contentRef)}
-				>
+				<schmancy-surface .hidden=${!this.isContentVisible} type="containerLow" class="flex-1" ${w(this.contentRef)}>
 					<slot></slot>
 				</schmancy-surface>
 			</div>
 		`;
   }
 };
-d([R({ type: String, reflect: !0 })], c.prototype, "state", 1), d([R({ type: String })], c.prototype, "id", 2), d([R({ type: Boolean, reflect: !0 })], c.prototype, "lowered", 1), d([m()], c.prototype, "currentState", 2), d([m()], c.prototype, "isContentVisible", 2), d([m()], c.prototype, "isAnimating", 2), d([m()], c.prototype, "isLowered", 2), d([m()], c.prototype, "isDragging", 2), d([m()], c.prototype, "position", 2), d([m()], c.prototype, "anchor", 2), c = d([F("schmancy-boat")], c);
+h([y({ type: String, reflect: !0 })], c.prototype, "state", 1), h([y({ type: String })], c.prototype, "id", 2), h([y({ type: Boolean, reflect: !0 })], c.prototype, "lowered", 1), h([y({ type: String })], c.prototype, "icon", 2), h([y({ type: String })], c.prototype, "label", 2), h([y()], c.prototype, "badge", 2), h([g()], c.prototype, "currentState", 2), h([g()], c.prototype, "isContentVisible", 2), h([g()], c.prototype, "isAnimating", 2), h([g()], c.prototype, "isLowered", 2), h([g()], c.prototype, "isDragging", 2), h([g()], c.prototype, "position", 2), h([g()], c.prototype, "anchor", 2), c = h([I("schmancy-boat")], c);
 export {
   c as S
 };
-//# sourceMappingURL=boat-DumUFcmT.js.map
+//# sourceMappingURL=boat-DuCSpIQv.js.map