@mhmo91/schmancy 0.10.5 → 0.10.7

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/code-highlight.md

@@ -1,47 +0,0 @@
-# schmancy-code
-
-> Syntax-highlighted code block with line numbers, copy button, and collapsible display.
-
-## Usage
-```html
-<schmancy-code language="typescript" .code=${'const x = 42'}></schmancy-code>
-```
-
-## Properties
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| code | string | `''` | Code content to highlight |
-| language | string | `'javascript'` | Language for syntax highlighting |
-| filename | string | `undefined` | Filename shown in header |
-| lineNumbers | boolean | `false` | Show line numbers |
-| copyButton | boolean | `true` | Show copy-to-clipboard button |
-| highlightLines | string | `undefined` | Lines to highlight (e.g., `'1-3,5,7-9'`) |
-| maxHeight | string | `undefined` | Max height before scrolling |
-
-## Supported Languages
-javascript, typescript, html, xml, markdown, bash
-
-## Examples
-```html
-<!-- TypeScript with line numbers and highlighted lines -->
-<schmancy-code
-  language="typescript"
-  lineNumbers
-  highlightLines="2-3"
-  .code=${`import { html } from 'lit'
-const greeting = 'Hello'
-console.log(greeting)`}>
-</schmancy-code>
-
-<!-- Bash with filename -->
-<schmancy-code language="bash" filename="install.sh"
-  .code=${'npm install @mhmo91/schmancy'}>
-</schmancy-code>
-
-<!-- With max height -->
-<schmancy-code language="javascript" maxHeight="300px"
-  .code=${longCodeString}>
-</schmancy-code>
-```
-
-Renders inside a collapsible `schmancy-details` with a macOS-style header (colored dots + language label). Uses highlight.js with schmancy color tokens.

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/mailbox.md

@@ -1,102 +0,0 @@
-# Schmancy Mailbox
-
-> Full email composition + campaign management system. Orchestrates recipients, templates, editor, attachments, and preview.
-
-## Components
-
-| Tag | Purpose |
-|-----|---------|
-| `schmancy-mailbox` | Top-level orchestrator |
-| `schmancy-email-editor` | Subject + body composition |
-| `schmancy-email-viewer` | HTML/plaintext preview |
-| `schmancy-email-recipients` | Recipient list with import/CSV |
-| `schmancy-email-layout-selector` | Layout template picker |
-| `schmancy-email-template-picker` | Email template browser |
-
-## Usage
-```html
-<schmancy-mailbox
-  .config=${{
-    sendEndpoint: '/api/emails/send',
-    uploadEndpoint: '/api/uploads',
-    authenticateRequest: (req) => ({ ...req, headers: { Authorization: `Bearer ${token}` } })
-  }}
-  .templates=${myTemplates}
-  .importSources=${[
-    { id: 'ticketholders', label: 'Ticket holders', icon: 'confirmation_number', handler: loadTicketHolders },
-    { id: 'waitlist', label: 'Waitlist', icon: 'hourglass_empty', handler: loadWaitlist },
-  ]}
-></schmancy-mailbox>
-```
-
-## schmancy-mailbox Properties
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `config` | `EmailComposeConfig` | `{}` | Endpoints, auth, upload handlers |
-| `templates` | `EmailTemplate[]` | `[]` | Available email templates |
-| `importSources` | `ImportSource[]` | `[]` | Import buttons shown in recipients panel |
-| `disabled` | boolean | `false` | Disable all interactions |
-| `recipientsTitle` | string | `'Recipients'` | Recipients panel heading |
-| `recipientsEmptyTitle` | string | `'No recipients yet'` | Empty state title |
-| `recipientsEmptyMessage` | string | `'Import from sources or upload a CSV'` | Empty state body |
-| `enableCsvImport` | boolean | `true` | Allow CSV file import |
-| `enableDragDrop` | boolean | `true` | Accept dropped CSV files |
-
-## Key Types
-```typescript
-interface EmailTemplate { id, name, subject, body, category?, thumbnail? }
-
-interface EmailComposeConfig {
-  sendEndpoint?: string
-  templatesEndpoint?: string
-  uploadEndpoint?: string
-  authenticateRequest?: (req: RequestInit) => RequestInit
-  uploadHandler?: (file: File) => Promise<string>
-  imageUploadHandler?: (file: File) => Promise<string>
-}
-
-interface SendEmailRequest {
-  recipients: string[]
-  subject: string
-  body: string
-  attachments: EmailAttachment[]
-  templateId?: string | null
-}
-
-interface ImportSource {
-  id: string
-  label: string
-  icon: string       // Material icon name
-  handler: () => void // Populates recipients via events
-}
-```
-
-## Events
-| Event | Detail | Where |
-|-------|--------|-------|
-| `emails-imported` | `{ emails, source }` | Recipients |
-| `recipient-removed` | `{ email }` | Recipients |
-| `recipients-cleared` | `{}` | Recipients |
-| `selection-changed` | `{ selectedEmails }` | Recipients |
-| `compose-changed` | `{ subject, body, templateId, attachments }` | Editor |
-| `send-email` | `{ request: SendEmailRequest }` | Mailbox — consumer POSTs to backend |
-| `send-error` | `{ error }` | Mailbox |
-
-## Recipients Flow
-1. User clicks an `ImportSource` button (or drops a CSV).
-2. CSV is parsed → `validEmails`, `invalidEmails`, `duplicates` reported.
-3. `emails-imported` event fires; mailbox merges into selected recipients.
-4. User edits subject/body via email-editor; changes bubble as `compose-changed`.
-5. On send, `send-email` fires with the full `SendEmailRequest` — parent handles network.
-
-## Minimal Integration
-```typescript
-<schmancy-mailbox
-  .config=${config}
-  .templates=${templates}
-  @send-email=${async (e: CustomEvent<{ request: SendEmailRequest }>) => {
-    const result = await api.sendCampaign(e.detail.request)
-    if (!result.success) this.dispatchError(result.message)
-  }}
-></schmancy-mailbox>
-```

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>
-```

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.