@mhmo91/schmancy 0.10.6 → 0.10.8

package/skills/schmancy/timeline-tile.md

@@ -1,95 +0,0 @@
-# schmancy-timeline-tile
-
-> One cell in a procurement-stage timeline rail. Renders an empty / filled / stacked paper-card tile with a 2-letter glyph label, optional tooltip + caption, and a built-in fan-on-hover orchestration for stacked variants.
-
-## Usage
-
-```html
-<!-- Empty cell (placeholder for a missing stage doc) -->
-<schmancy-timeline-tile state="empty" glyph="PO"></schmancy-timeline-tile>
-
-<!-- Single filled cell with tooltip + caption -->
-<schmancy-timeline-tile
-  state="filled"
-  glyph="IN"
-  tooltip="INV-2025-0001"
-  caption="EUR 12,400"
-  @tile-click=${(e) => openInspect(e.detail)}
-></schmancy-timeline-tile>
-
-<!-- Stack of N revisions: wrapper carries `data-stack-id` + `--fan-count`,
-     stack-top sits on top with the ×N badge, siblings reveal on hover.
-     The wrapper toggles `data-fanned` automatically — no consumer
-     pointer wiring required. -->
-<div
-  data-stack-id="po-123"
-  style="position: relative; width: 32px; height: 40px; --fan-count: 3;"
->
-  <schmancy-timeline-tile state="stack-sibling" glyph="PO" .index=${0}></schmancy-timeline-tile>
-  <schmancy-timeline-tile state="stack-sibling" glyph="PO" .index=${1}></schmancy-timeline-tile>
-  <schmancy-timeline-tile
-    state="stack-top"
-    glyph="PO"
-    .index=${2}
-    .stackCount=${3}
-    tooltip="PO-2025-0007 · rev 3"
-    caption="EUR 12,400"
-  ></schmancy-timeline-tile>
-</div>
-```
-
-## Properties
-
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `state` | `'empty' \| 'filled' \| 'stack-top' \| 'stack-sibling'` | `'empty'` | Render mode (reflected) |
-| `glyph` | `string` | `''` | 2-letter stage label (e.g. `RQ`, `PO`, `OC`, `DN`, `IN`) |
-| `stackCount` | `number?` | `undefined` | When `state="stack-top"` and > 1, renders the ×N badge |
-| `index` | `number?` | `undefined` | Sibling position in the stack (drives `--i` for fan offset; reflected) |
-| `tooltip` | `string?` | `undefined` | Tooltip text shown on hover / focus |
-| `caption` | `string?` | `undefined` | Caption rendered below the tile (hidden on `stack-sibling`) |
-
-## Events
-
-| Event | Detail | Description |
-|-------|--------|-------------|
-| `tile-click` | `{ glyph, state }` | Fires on click for any non-`empty` state. Bubbles + composed. |
-
-## Stack fan orchestration
-
-When `state="stack-top"`, the component subscribes a `pointerover` pipe to its parent element (the stack wrapper). The pipe is hover-intent: `pointerover` events with a target that closest-matches `[data-stack-id]` immediately set `data-fanned` on the wrapper; leaving the wrapper waits 800 ms before clearing the attribute, so the cursor can cross the gap between fanned siblings without collapsing the stack. The attribute lifetime IS the fanned state — sibling tiles read it via the `:host-context([data-fanned])` selector and translate edge-to-edge.
-
-The consumer's wrapper element MUST carry:
-- `data-stack-id="<unique>"` so the pointerover pipe can match the target
-- `position: relative` so the absolutely-positioned tiles align to it
-- `width` + `height` matching `--schmancy-tile-w` / `--schmancy-tile-h` (default `32px` / `40px`)
-- `--fan-count: <N>` so each tile knows the total stack size
-
-`stack-sibling` tiles set `pointer-events: none` until the wrapper is fanned, then re-enable so the user can click any revision.
-
-## Slots
-
-None. Glyph and caption are props, not slot content — keeps the tile self-contained and addressable from a `repeat()` template.
-
-## Accessibility
-
-- Filled / stack tiles render a native `<button type="button">` with `tabindex="0"` and `role="button"`.
-- `aria-label` is composed from `glyph`, `caption`, and `tooltip`.
-- Empty tiles set `tabindex="-1"` and `aria-label="<glyph> · empty"`.
-- Focus shows a 2px ring in `--schmancy-sys-color-primary-default` with a 3px offset.
-
-## Tokens consumed
-
-| Custom property | Source |
-|-----------------|--------|
-| `--schmancy-sys-color-outline` | dashed border, paper-card lines, sibling outline |
-| `--schmancy-sys-color-surface-containerLowest` | filled-card background, tooltip background |
-| `--schmancy-sys-color-surface-on` | tooltip + caption text |
-| `--schmancy-sys-color-surface-onVariant` | empty-state glyph |
-| `--schmancy-sys-color-primary-default` | hover border, focus ring, top-edge tint, ×N badge background |
-| `--schmancy-sys-color-primary-on` | ×N badge text |
-| `--schmancy-sys-color-primary-onContainer` | filled-state glyph color |
-| `--schmancy-tile-w`, `--schmancy-tile-h` | host width / height (defaults `32px` / `40px`) |
-| `--fan-count`, `--i` | wrapper-driven fan layout (consumer or component-set) |
-
-Theme overrides cascade from any ancestor `<schmancy-theme>` — wrap the timeline in a tinted theme block to recolor the rail without touching the component.

package/src/charts/area-chart.ts

@@ -1,498 +0,0 @@
-import { html, css, PropertyValues } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
-import { ref, createRef, Ref } from 'lit/directives/ref.js'
-import { SchmancyElement } from '@mixins/index'
-import type { ChartDataPoint, ChartTheme, ProcessedDataPoint } from './types'
-import { catmullRomSpline, hexToRgba, easeOutCubic } from './utils'
-
-interface TooltipData {
-	visible: boolean
-	x: number
-	y: number
-	label: string
-	value: number
-	metadata?: Record<string, unknown>
-}
-
-@customElement('schmancy-area-chart')
-export class SchmancyAreaChart extends SchmancyElement {
-	static styles = [css`
-	:host {
-		display: block;
-	}
-`]
-
-	/** Chart data points */
-	@property({ type: Array })
-	data: ChartDataPoint[] = []
-
-	/** Chart height in pixels */
-	@property({ type: Number })
-	height = 200
-
-	/** Show grid lines */
-	@property({ type: Boolean })
-	showGrid = true
-
-	/** Show x-axis labels */
-	@property({ type: Boolean })
-	showLabels = true
-
-	/** Enable tooltips */
-	@property({ type: Boolean })
-	showTooltip = true
-
-	/** Number of peaks to highlight */
-	@property({ type: Number })
-	peakCount = 3
-
-	/** Animation duration in milliseconds */
-	@property({ type: Number })
-	animationDuration = 800
-
-	/** Enable entrance animation */
-	@property({ type: Boolean })
-	animated = true
-
-	/** Prefix for values (e.g., "EUR ") */
-	@property({ type: String })
-	valuePrefix = ''
-
-	/** Suffix for values (e.g., "%") */
-	@property({ type: String })
-	valueSuffix = ''
-
-	/** Decimal places for value display */
-	@property({ type: Number })
-	valueDecimals = 2
-
-	/** Theme overrides */
-	@property({ type: Object })
-	theme: Partial<ChartTheme> = {}
-
-	@state() private tooltipData: TooltipData = {
-		visible: false,
-		x: 0,
-		y: 0,
-		label: '',
-		value: 0,
-	}
-
-	@state() private animationProgress = 0
-	@state() private isVisible = false
-
-	private canvasRef: Ref<HTMLCanvasElement> = createRef()
-	private containerRef: Ref<HTMLDivElement> = createRef()
-	private animationFrameId: number | null = null
-	private observer: IntersectionObserver | null = null
-	private processedData: ProcessedDataPoint[] = []
-	private resizeObserver: ResizeObserver | null = null
-
-	connectedCallback() {
-		super.connectedCallback()
-		this.setupIntersectionObserver()
-	}
-
-	disconnectedCallback() {
-		super.disconnectedCallback()
-		this.cleanup()
-	}
-
-	private cleanup() {
-		if (this.animationFrameId !== null) {
-			cancelAnimationFrame(this.animationFrameId)
-			this.animationFrameId = null
-		}
-		if (this.observer) {
-			this.observer.disconnect()
-			this.observer = null
-		}
-		if (this.resizeObserver) {
-			this.resizeObserver.disconnect()
-			this.resizeObserver = null
-		}
-	}
-
-	private setupIntersectionObserver() {
-		this.observer = new IntersectionObserver(
-			entries => {
-				const entry = entries[0]
-				if (entry.isIntersecting && !this.isVisible) {
-					this.isVisible = true
-					if (this.animated) {
-						this.startAnimation()
-					} else {
-						this.animationProgress = 1
-						this.drawChart()
-					}
-				} else if (!entry.isIntersecting) {
-					this.isVisible = false
-					if (this.animationFrameId !== null) {
-						cancelAnimationFrame(this.animationFrameId)
-						this.animationFrameId = null
-					}
-				}
-			},
-			{ threshold: 0.1 }
-		)
-	}
-
-	protected updated(changedProperties: PropertyValues) {
-		super.updated(changedProperties)
-
-		if (this.containerRef.value && this.observer) {
-			this.observer.observe(this.containerRef.value)
-		}
-
-		if (this.canvasRef.value && !this.resizeObserver) {
-			this.resizeObserver = new ResizeObserver(() => {
-				this.drawChart()
-			})
-			this.resizeObserver.observe(this.canvasRef.value)
-		}
-
-		// Redraw when data changes
-		if (changedProperties.has('data') && this.isVisible) {
-			if (this.animated) {
-				this.animationProgress = 0
-				this.startAnimation()
-			} else {
-				this.animationProgress = 1
-				this.drawChart()
-			}
-		}
-
-		// Redraw on theme or config changes
-		if (
-			(changedProperties.has('theme') ||
-				changedProperties.has('showGrid') ||
-				changedProperties.has('showLabels') ||
-				changedProperties.has('peakCount')) &&
-			this.isVisible
-		) {
-			this.drawChart()
-		}
-	}
-
-	private startAnimation() {
-		const startTime = performance.now()
-		const duration = this.animationDuration
-
-		const animateFrame = (currentTime: number) => {
-			const elapsed = currentTime - startTime
-			const progress = Math.min(elapsed / duration, 1)
-
-			this.animationProgress = easeOutCubic(progress)
-			this.drawChart()
-
-			if (progress < 1 && this.isVisible) {
-				this.animationFrameId = requestAnimationFrame(animateFrame)
-			}
-		}
-
-		this.animationFrameId = requestAnimationFrame(animateFrame)
-	}
-
-	private processData(): ProcessedDataPoint[] {
-		if (!this.data || this.data.length === 0) return []
-
-		// Find top N peak values
-		const sortedByValue = [...this.data].toSorted((a, b) => b.value - a.value)
-		const peakLabels = new Set(sortedByValue.slice(0, this.peakCount).map(d => d.label))
-
-		return this.data.map(d => ({
-			...d,
-			x: 0, // Will be calculated during draw
-			y: 0, // Will be calculated during draw
-			isPeak: peakLabels.has(d.label),
-		}))
-	}
-
-	private getThemeValue<K extends keyof ChartTheme>(
-		key: K,
-		defaultValue: NonNullable<ChartTheme[K]>
-	): NonNullable<ChartTheme[K]> {
-		return (this.theme[key] as NonNullable<ChartTheme[K]>) ?? defaultValue
-	}
-
-	private drawChart() {
-		const canvas = this.canvasRef.value
-		if (!canvas) return
-
-		const ctx = canvas.getContext('2d')
-		if (!ctx) return
-
-		const dpr = window.devicePixelRatio || 1
-		const rect = canvas.getBoundingClientRect()
-		const width = rect.width
-		const height = rect.height
-
-		// Set canvas size for high DPI
-		canvas.width = width * dpr
-		canvas.height = height * dpr
-		ctx.scale(dpr, dpr)
-
-		// Clear canvas
-		ctx.clearRect(0, 0, width, height)
-
-		const data = this.processData()
-		if (data.length === 0) return
-
-		const padding = { top: 20, right: 20, bottom: this.showLabels ? 40 : 20, left: 20 }
-		const chartWidth = width - padding.left - padding.right
-		const chartHeight = height - padding.top - padding.bottom
-
-		// Find max value for scaling
-		const maxValue = Math.max(...data.map(d => d.value), 1)
-
-		// Calculate positions
-		// oxlint-disable-next-line oxc/no-map-spread
-		const points = data.map((d, i) => ({
-			...d,
-			x: padding.left + (data.length > 1 ? (i / (data.length - 1)) * chartWidth : chartWidth / 2),
-			y: padding.top + chartHeight - (d.value / maxValue) * chartHeight,
-		}))
-
-		this.processedData = points
-
-		// Get primary color from CSS or theme
-		const computedStyle = getComputedStyle(this)
-		const defaultPrimaryColor =
-			computedStyle.getPropertyValue('--schmancy-sys-color-primary').trim() || '#6750A4'
-		const primaryColor = this.getThemeValue('primaryColor', defaultPrimaryColor)
-		const [gradientOpacityTop, gradientOpacityBottom] = this.getThemeValue('gradientOpacity', [0.4, 0.05])
-		const strokeWidth = this.getThemeValue('strokeWidth', 2)
-		const pointRadius = this.getThemeValue('pointRadius', 4)
-		const peakRadius = this.getThemeValue('peakRadius', 6)
-
-		// Draw grid lines
-		if (this.showGrid) {
-			ctx.strokeStyle = 'rgba(128, 128, 128, 0.15)'
-			ctx.lineWidth = 1
-			ctx.setLineDash([4, 4])
-
-			for (let i = 1; i <= 3; i++) {
-				const y = padding.top + (chartHeight * i) / 4
-				ctx.beginPath()
-				ctx.moveTo(padding.left, y)
-				ctx.lineTo(width - padding.right, y)
-				ctx.stroke()
-			}
-
-			ctx.setLineDash([])
-		}
-
-		// Create smooth curve path using Catmull-Rom spline
-		const curvePath = new Path2D()
-		const areaPath = new Path2D()
-
-		if (points.length >= 2) {
-			// Start area path from bottom left
-			areaPath.moveTo(points[0].x, padding.top + chartHeight)
-			curvePath.moveTo(points[0].x, points[0].y)
-			areaPath.lineTo(points[0].x, points[0].y)
-
-			for (let i = 0; i < points.length - 1; i++) {
-				const p0 = points[Math.max(0, i - 1)]
-				const p1 = points[i]
-				const p2 = points[Math.min(points.length - 1, i + 1)]
-				const p3 = points[Math.min(points.length - 1, i + 2)]
-
-				// Draw curve segments
-				const segments = 16
-				for (let j = 1; j <= segments; j++) {
-					const t = j / segments
-					const point = catmullRomSpline(p0, p1, p2, p3, t)
-					curvePath.lineTo(point.x, point.y)
-					areaPath.lineTo(point.x, point.y)
-				}
-			}
-
-			// Close area path
-			areaPath.lineTo(points[points.length - 1].x, padding.top + chartHeight)
-			areaPath.closePath()
-		} else if (points.length === 1) {
-			// Single point - draw a dot
-			curvePath.arc(points[0].x, points[0].y, pointRadius, 0, Math.PI * 2)
-		}
-
-		// Apply animation clipping
-		ctx.save()
-		ctx.beginPath()
-		ctx.rect(0, 0, padding.left + chartWidth * this.animationProgress, height)
-		ctx.clip()
-
-		// Draw gradient fill
-		if (points.length >= 2) {
-			const gradient = ctx.createLinearGradient(0, padding.top, 0, padding.top + chartHeight)
-			gradient.addColorStop(0, hexToRgba(primaryColor, gradientOpacityTop))
-			gradient.addColorStop(1, hexToRgba(primaryColor, gradientOpacityBottom))
-
-			ctx.fillStyle = gradient
-			ctx.fill(areaPath)
-		}
-
-		// Draw stroke
-		ctx.strokeStyle = primaryColor
-		ctx.lineWidth = strokeWidth
-		ctx.lineCap = 'round'
-		ctx.lineJoin = 'round'
-		ctx.stroke(curvePath)
-
-		// Draw data points
-		points.forEach((point, index) => {
-			const pointProgress = (index / (points.length - 1 || 1)) * this.animationProgress
-			if (pointProgress < index / (points.length || 1)) return
-
-			const radius = point.isPeak ? peakRadius - 1 : pointRadius - 1
-			const outerRadius = point.isPeak ? peakRadius + 4 : pointRadius + 2
-
-			// Outer glow for peaks
-			if (point.isPeak) {
-				ctx.beginPath()
-				ctx.arc(point.x, point.y, outerRadius, 0, Math.PI * 2)
-				ctx.fillStyle = hexToRgba(primaryColor, 0.2)
-				ctx.fill()
-			}
-
-			// Inner dot
-			ctx.beginPath()
-			ctx.arc(point.x, point.y, radius, 0, Math.PI * 2)
-			ctx.fillStyle = primaryColor
-			ctx.fill()
-
-			// White center for peaks
-			if (point.isPeak) {
-				ctx.beginPath()
-				ctx.arc(point.x, point.y, 2, 0, Math.PI * 2)
-				ctx.fillStyle = 'white'
-				ctx.fill()
-			}
-		})
-
-		ctx.restore()
-
-		// Draw labels
-		if (this.showLabels && points.length > 0) {
-			ctx.fillStyle = 'rgba(128, 128, 128, 0.8)'
-			ctx.font = '11px system-ui, sans-serif'
-			ctx.textAlign = 'center'
-			ctx.textBaseline = 'top'
-
-			// Show fewer labels on narrow charts
-			const labelStep = width < 400 ? 3 : width < 600 ? 2 : 1
-			points.forEach((point, index) => {
-				if (index % labelStep === 0) {
-					ctx.fillText(point.label, point.x, height - padding.bottom + 8)
-				}
-			})
-		}
-	}
-
-	private formatValue(value: number): string {
-		const formatted = value.toFixed(this.valueDecimals)
-		return `${this.valuePrefix}${formatted}${this.valueSuffix}`
-	}
-
-	private handlePointerMove = (e: PointerEvent) => {
-		if (this.processedData.length === 0 || !this.showTooltip) return
-
-		const canvas = this.canvasRef.value
-		if (!canvas) return
-
-		const rect = canvas.getBoundingClientRect()
-		const x = e.clientX - rect.left
-
-		// Find closest data point
-		let closestPoint: ProcessedDataPoint | null = null
-		let minDistance = Infinity
-
-		this.processedData.forEach(point => {
-			const distance = Math.abs(point.x - x)
-			if (distance < minDistance) {
-				minDistance = distance
-				closestPoint = point
-			}
-		})
-
-		if (closestPoint && minDistance < 30) {
-			this.tooltipData = {
-				visible: true,
-				x: closestPoint.x,
-				y: closestPoint.y,
-				label: closestPoint.label,
-				value: closestPoint.value,
-				metadata: closestPoint.metadata,
-			}
-		} else {
-			this.tooltipData = { ...this.tooltipData, visible: false }
-		}
-	}
-
-	private handlePointerLeave = () => {
-		this.tooltipData = { ...this.tooltipData, visible: false }
-	}
-
-	private renderMetadata() {
-		if (!this.tooltipData.metadata) return ''
-		return Object.entries(this.tooltipData.metadata).map(
-			([key, value]) => html`
-				<schmancy-typography type="body" token="sm" class="text-surface-onVariant">
-					${key}: ${String(value)}
-				</schmancy-typography>
-			`
-		)
-	}
-
-	render() {
-		if (!this.data || this.data.length === 0) {
-			return html``
-		}
-
-		return html`
-			<div ${ref(this.containerRef)} class="relative">
-				<div class="relative" style="height: ${this.height}px; touch-action: pan-y;">
-					<canvas
-						${ref(this.canvasRef)}
-						class="w-full h-full"
-						style="display: block;"
-						@pointermove=${this.handlePointerMove}
-						@pointerleave=${this.handlePointerLeave}
-					></canvas>
-
-					<!-- Tooltip -->
-					${this.showTooltip
-						? html`
-								<div
-									class="absolute pointer-events-none transition-opacity duration-150 ${this.tooltipData.visible
-										? 'opacity-100'
-										: 'opacity-0'}"
-									style="
-                    left: ${this.tooltipData.x}px;
-                    top: ${this.tooltipData.y - 60}px;
-                    transform: translateX(-50%);
-                  "
-								>
-									<schmancy-surface elevation="3" rounded="all" class="px-3 py-2 min-w-max">
-										<schmancy-typography type="label" token="sm" class="text-surface-onVariant">
-											${this.tooltipData.label}
-										</schmancy-typography>
-										<schmancy-typography type="title" token="md" class="text-surface-on font-semibold">
-											${this.formatValue(this.tooltipData.value)}
-										</schmancy-typography>
-										${this.renderMetadata()}
-									</schmancy-surface>
-								</div>
-						  `
-						: ''}
-				</div>
-			</div>
-		`
-	}
-}
-
-declare global {
-	interface HTMLElementTagNameMap {
-		'schmancy-area-chart': SchmancyAreaChart
-	}
-}

package/src/charts/index.ts

@@ -1,4 +0,0 @@
-export * from './types'
-export * from './utils'
-export * from './area-chart'
-export * from './pills'