@mhmo91/schmancy 0.10.3 → 0.10.5

package/dist/theme.service-CmbOGMA8.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"theme.service-CmbOGMA8.js","names":[],"sources":["../src/theme/theme.service.ts"],"sourcesContent":["import {\n  BehaviorSubject,\n  Observable,\n  fromEvent,\n  timer,\n  map,\n  takeUntil,\n  defaultIfEmpty,\n  distinctUntilChanged,\n  shareReplay,\n  tap,\n  switchMap,\n  of\n} from 'rxjs'\nimport { ThemeHereIAm, ThemeHereIAmEvent, ThemeWhereAreYou } from './theme.events'\nimport type { SchmancyThemeComponent } from './theme.component'\nimport type { TSchmancyTheme } from './theme.interface'\nimport { state } from '../state'\n\ninterface ThemeSettings {\n  scheme: 'dark' | 'light' | 'auto'\n  color: string\n}\n\n// Theme settings — persists to localStorage under namespace `schmancy/theme`.\nconst ThemeContext = state<ThemeSettings>('schmancy/theme').local({\n  scheme: 'auto',\n  color: '#6200ee',\n})\n\n/**\n * Theme Service - Provides centralized theme management for Schmancy components.\n *\n * This service acts as a singleton interface to interact with the theme system,\n * providing reactive observables for theme state and methods to control theming.\n *\n * @example\n * ```typescript\n * import { theme } from '@schmancy/theme'\n *\n * // Subscribe to theme changes\n * theme.scheme$.subscribe(scheme => {\n *   console.log('Current scheme:', scheme) // 'light' | 'dark' | 'auto'\n * })\n *\n * // Get current values synchronously\n * const currentScheme = theme.scheme\n * const currentColor = theme.color\n *\n * // Toggle between light and dark mode\n * theme.toggleScheme()\n *\n * // Set specific scheme\n * theme.setScheme('dark')\n *\n * // Check if dark mode is active\n * theme.isDarkMode().subscribe(isDark => {\n *   console.log('Is dark mode:', isDark)\n * })\n * ```\n */\nclass ThemeService {\n  private static instance: ThemeService\n\n  // Observable properties for theme values\n  private _theme$ = new BehaviorSubject<Partial<TSchmancyTheme>>({})\n  private _themeComponent$ = new BehaviorSubject<SchmancyThemeComponent | null>(null)\n  private _fullscreen$ = new BehaviorSubject<boolean>(false)\n  private _bottomOffset$ = new BehaviorSubject<number>(0)\n\n  // Public observables derived from context\n  public readonly scheme$ = ThemeContext.$.pipe(\n    map(settings => settings.scheme),\n    distinctUntilChanged(),\n    shareReplay(1)\n  )\n\n  public readonly color$ = ThemeContext.$.pipe(\n    map(settings => settings.color),\n    distinctUntilChanged(),\n    shareReplay(1)\n  )\n\n  public readonly theme$ = this._theme$.asObservable().pipe(\n    distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b)),\n    shareReplay(1)\n  )\n\n  public readonly themeComponent$ = this._themeComponent$.asObservable().pipe(\n    distinctUntilChanged(),\n    shareReplay(1)\n  )\n\n  public readonly fullscreen$ = this._fullscreen$.asObservable().pipe(\n    distinctUntilChanged(),\n    shareReplay(1)\n  )\n\n  public readonly bottomOffset$ = this._bottomOffset$.asObservable().pipe(\n    distinctUntilChanged(),\n    shareReplay(1)\n  )\n\n  // Getters for synchronous access to current values\n  get scheme(): 'dark' | 'light' | 'auto' {\n    return ThemeContext.value.scheme\n  }\n\n  get color(): string {\n    return ThemeContext.value.color\n  }\n\n  get theme(): Partial<TSchmancyTheme> {\n    return this._theme$.getValue()\n  }\n\n  get themeComponent(): SchmancyThemeComponent | null {\n    return this._themeComponent$.getValue()\n  }\n\n  get fullscreen(): boolean {\n    return this._fullscreen$.getValue()\n  }\n\n  get bottomOffset(): number {\n    return this._bottomOffset$.getValue()\n  }\n\n  // Computed observable for actual scheme (resolving 'auto')\n  public readonly resolvedScheme$ = this.scheme$.pipe(\n    switchMap(scheme => {\n      if (scheme === 'auto') {\n        // Listen to system preference changes\n        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')\n        return new Observable<'dark' | 'light'>(subscriber => {\n          const handler = (e: MediaQueryListEvent) => {\n            subscriber.next(e.matches ? 'dark' : 'light')\n          }\n          mediaQuery.addEventListener('change', handler)\n\n          // Emit initial value\n          subscriber.next(mediaQuery.matches ? 'dark' : 'light')\n\n          // Cleanup\n          return () => mediaQuery.removeEventListener('change', handler)\n        })\n      }\n      return of(scheme as 'dark' | 'light')\n    }),\n    distinctUntilChanged(),\n    shareReplay(1)\n  )\n\n  constructor() {\n    this.discoverTheme()\n  }\n\n  /**\n   * Discover the nearest theme component in the DOM.\n   * This method can be called to refresh the theme discovery process.\n   *\n   * @returns {Observable<SchmancyThemeComponent | null>} Observable that emits the discovered theme component or null\n   *\n   * @example\n   * ```typescript\n   * theme.discoverTheme().subscribe(component => {\n   *   if (component) {\n   *     console.log('Theme component found:', component)\n   *   } else {\n   *     console.log('No theme component found')\n   *   }\n   * })\n   * ```\n   */\n  public discoverTheme(): Observable<SchmancyThemeComponent | null> {\n    // Dispatch discovery event and wait for response\n    return fromEvent<ThemeHereIAmEvent>(window, ThemeHereIAm).pipe(\n      takeUntil(timer(100)), // Wait up to 100ms for response\n      map(e => e.detail.theme as SchmancyThemeComponent),\n      defaultIfEmpty(null),\n      tap(themeComponent => {\n        if (themeComponent) {\n          this.registerThemeComponent(themeComponent)\n        }\n      })\n    ).pipe(\n      tap(() => {\n        // Trigger theme discovery\n        window.dispatchEvent(\n          new CustomEvent(ThemeWhereAreYou, {\n            bubbles: true,\n            composed: true,\n          })\n        )\n      }),\n      switchMap(() =>\n        fromEvent<ThemeHereIAmEvent>(window, ThemeHereIAm).pipe(\n          takeUntil(timer(100)),\n          map(e => e.detail.theme as SchmancyThemeComponent),\n          defaultIfEmpty(null),\n          tap(themeComponent => {\n            if (themeComponent) {\n              this.registerThemeComponent(themeComponent)\n            }\n          })\n        )\n      )\n    )\n  }\n\n  /**\n   * Register a theme component and subscribe to its changes.\n   * This is typically called internally by theme components when they mount or update.\n   *\n   * @param {SchmancyThemeComponent} component - The theme component to register\n   *\n   * @internal\n   */\n  public registerThemeComponent(component: SchmancyThemeComponent): void {\n    this._themeComponent$.next(component)\n\n    // Update values from the component\n    ThemeContext.set({ scheme: component.scheme, color: component.color })\n    this._theme$.next(component.theme)\n  }\n\n  /**\n   * Update theme values. Usually called internally by theme components.\n   *\n   * @param {Object} values - Theme values to update\n   * @param {'dark' | 'light' | 'auto'} [values.scheme] - Color scheme to set\n   * @param {string} [values.color] - Primary color in hex format\n   * @param {Partial<TSchmancyTheme>} [values.theme] - Theme configuration object\n   *\n   * @internal\n   */\n  public updateTheme(values: {\n    scheme?: 'dark' | 'light' | 'auto'\n    color?: string\n    theme?: Partial<TSchmancyTheme>\n  }): void {\n    const updates: Partial<ThemeSettings> = {}\n    if (values.scheme !== undefined) {\n      updates.scheme = values.scheme\n    }\n    if (values.color !== undefined) {\n      updates.color = values.color\n    }\n    if (Object.keys(updates).length > 0) {\n      ThemeContext.set(updates)\n    }\n    if (values.theme !== undefined) {\n      this._theme$.next(values.theme)\n    }\n  }\n\n  /**\n   * Set the color scheme for the application.\n   *\n   * @param {'dark' | 'light' | 'auto'} scheme - The color scheme to set\n   *\n   * @example\n   * ```typescript\n   * // Set to dark mode\n   * theme.setScheme('dark')\n   *\n   * // Set to auto (follows system preference)\n   * theme.setScheme('auto')\n   * ```\n   */\n  public setScheme(scheme: 'dark' | 'light' | 'auto'): void {\n    const component = this.themeComponent\n    if (component) {\n      component.scheme = scheme\n      ThemeContext.set({ scheme })\n    } else {\n      console.warn('No theme component found. Scheme change may not persist.')\n      ThemeContext.set({ scheme })\n    }\n  }\n\n  /**\n   * Set the primary color for the theme.\n   *\n   * @param {string} color - Primary color in hex format (e.g., '#6200ee')\n   *\n   * @example\n   * ```typescript\n   * // Set primary color to purple\n   * theme.setColor('#6200ee')\n   *\n   * // Set primary color to blue\n   * theme.setColor('#2196f3')\n   * ```\n   */\n  public setColor(color: string): void {\n    const component = this.themeComponent\n    if (component) {\n      component.color = color\n      ThemeContext.set({ color })\n    } else {\n      console.warn('No theme component found. Color change may not persist.')\n      ThemeContext.set({ color })\n    }\n  }\n\n  /**\n   * Check if dark mode is currently active.\n   * This resolves 'auto' scheme to the actual value based on system preference.\n   *\n   * @returns {Observable<boolean>} Observable that emits true if dark mode is active, false otherwise\n   *\n   * @example\n   * ```typescript\n   * theme.isDarkMode().subscribe(isDark => {\n   *   if (isDark) {\n   *     console.log('Dark mode is active')\n   *   } else {\n   *     console.log('Light mode is active')\n   *   }\n   * })\n   * ```\n   */\n  public isDarkMode(): Observable<boolean> {\n    return this.resolvedScheme$.pipe(\n      map(scheme => scheme === 'dark')\n    )\n  }\n\n  /**\n   * Toggle between light and dark mode.\n   * If currently in 'auto' mode, defaults to 'light'.\n   *\n   * @example\n   * ```typescript\n   * // Toggle theme on button click\n   * button.addEventListener('click', () => {\n   *   theme.toggleScheme()\n   * })\n   * ```\n   */\n  public toggleScheme(): void {\n    const currentScheme = this.scheme\n    const newScheme = currentScheme === 'dark' ? 'light' :\n                     currentScheme === 'light' ? 'dark' :\n                     'light' // If 'auto', default to 'light'\n    this.setScheme(newScheme)\n  }\n\n  /**\n   * Get the current value of a CSS variable from the theme.\n   *\n   * @param {string} variableName - Name of the CSS variable (without '--schmancy-' prefix)\n   * @returns {string} The CSS variable value or empty string if not found\n   *\n   * @example\n   * ```typescript\n   * // Get primary color variable\n   * const primaryColor = theme.getCSSVariable('color-primary')\n   *\n   * // Get surface color\n   * const surfaceColor = theme.getCSSVariable('color-surface')\n   * ```\n   */\n  public getCSSVariable(variableName: string): string {\n    const component = this.themeComponent\n    if (component) {\n      const host = component.root ? document.body : (component.shadowRoot?.host as HTMLElement)\n      if (host) {\n        return getComputedStyle(host).getPropertyValue(`--schmancy-${variableName}`).trim()\n      }\n    }\n    return ''\n  }\n\n  /**\n   * Subscribe to changes of a specific CSS variable.\n   *\n   * @param {string} variableName - Name of the CSS variable to watch (without '--schmancy-' prefix)\n   * @returns {Observable<string>} Observable that emits the CSS variable value when it changes\n   *\n   * @example\n   * ```typescript\n   * // Watch for primary color changes\n   * theme.watchCSSVariable('color-primary').subscribe(color => {\n   *   console.log('Primary color changed to:', color)\n   * })\n   *\n   * // Watch for surface color changes\n   * theme.watchCSSVariable('color-surface').subscribe(color => {\n   *   console.log('Surface color changed to:', color)\n   * })\n   * ```\n   */\n  public watchCSSVariable(variableName: string): Observable<string> {\n    return this.theme$.pipe(\n      map(() => this.getCSSVariable(variableName)),\n      distinctUntilChanged()\n    )\n  }\n\n  /**\n   * Set the fullscreen state for the application.\n   * This emits a custom event that navigation components can listen to.\n   *\n   * @param {boolean} value - Whether fullscreen mode is active\n   *\n   * @example\n   * ```typescript\n   * // Enter fullscreen mode\n   * theme.setFullscreen(true)\n   *\n   * // Exit fullscreen mode\n   * theme.setFullscreen(false)\n   * ```\n   */\n  public setFullscreen(value: boolean): void {\n    this._fullscreen$.next(value)\n\n    // Emit custom event for components to listen to\n    window.dispatchEvent(\n      new CustomEvent('fullscreen', {\n        detail: value,\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  /**\n   * Toggle fullscreen mode.\n   *\n   * @example\n   * ```typescript\n   * // Toggle fullscreen mode on button click\n   * button.addEventListener('click', () => {\n   *   theme.toggleFullscreen()\n   * })\n   * ```\n   */\n  public toggleFullscreen(): void {\n    this.setFullscreen(!this.fullscreen)\n  }\n\n  /**\n   * Set the bottom offset for viewport calculations.\n   * Used by navigation bars to inform fullHeight directive of reserved space.\n   *\n   * @param {number} value - Bottom offset in pixels\n   *\n   * @example\n   * ```typescript\n   * // Set bottom offset when nav bar is visible\n   * theme.setBottomOffset(80)\n   *\n   * // Clear bottom offset when nav bar is hidden\n   * theme.setBottomOffset(0)\n   * ```\n   */\n  public setBottomOffset(value: number): void {\n    this._bottomOffset$.next(value)\n  }\n\n  /**\n   * Convenience method to update theme state including fullscreen.\n   * Can be called with next() like syntax for familiarity.\n   *\n   * @param {Object} values - Theme values to update\n   * @param {boolean} [values.fullscreen] - Fullscreen state\n   * @param {'dark' | 'light' | 'auto'} [values.scheme] - Color scheme\n   * @param {string} [values.color] - Primary color\n   *\n   * @example\n   * ```typescript\n   * // Set fullscreen mode\n   * theme.next({ fullscreen: true })\n   *\n   * // Update multiple values\n   * theme.next({\n   *   fullscreen: true,\n   *   scheme: 'dark'\n   * })\n   * ```\n   */\n  public next(values: {\n    fullscreen?: boolean\n    scheme?: 'dark' | 'light' | 'auto'\n    color?: string\n  }): void {\n    if (values.fullscreen !== undefined) {\n      this.setFullscreen(values.fullscreen)\n    }\n    if (values.scheme !== undefined) {\n      this.setScheme(values.scheme)\n    }\n    if (values.color !== undefined) {\n      this.setColor(values.color)\n    }\n  }\n\n  /**\n   * Get the singleton instance of ThemeService.\n   *\n   * @returns {ThemeService} The singleton ThemeService instance\n   *\n   * @internal\n   */\n  static getInstance(): ThemeService {\n    if (!ThemeService.instance) {\n      ThemeService.instance = new ThemeService()\n    }\n    return ThemeService.instance\n  }\n}\n\n/**\n * Theme singleton. Reads and mutates the active theme (scheme, source color,\n * locale); persists the user's scheme choice. Components subscribe via\n * `theme.theme$` for changes.\n *\n * @service\n * @summary Theme service — active scheme, source color, locale.\n * @method next({ scheme?, source?, locale? }) - Update theme state.\n * @method theme$ - Observable<TSchmancyTheme>; emits on every theme change.\n * @method toggle() - Toggle between light and dark schemes.\n */\nexport const theme = ThemeService.getInstance()\nexport const schmancyTheme = theme // Alias for convenience\nexport default theme"],"mappings":"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"}

package/skills/schmancy/dialog.md

@@ -1,69 +0,0 @@
-# schmancy-dialog / $dialog
-
-> Dialog with glass surface, cursorGlow, and mobile bottom-sheet adaptation. Use `$dialog` service for imperative usage.
-
-## Usage
-```typescript
-import { $dialog } from '@mhmo91/schmancy'
-
-// Confirm dialog
-const confirmed = await $dialog.confirm({
-  title: 'Delete item?',
-  message: 'This cannot be undone.',
-  confirmText: 'Delete',
-  cancelText: 'Cancel',
-  variant: 'danger',
-})
-
-// Component dialog (renders any template/element)
-await $dialog.component(html`<my-editor .data=${item}></my-editor>`)
-```
-
-## $dialog API
-| Method | Returns | Description |
-|--------|---------|-------------|
-| `confirm(options)` | `Promise<boolean>` | Show confirm dialog with title/message/buttons |
-| `ask(message, event?)` | `Promise<boolean>` | Quick confirm with just a message |
-| `danger(options)` | `Promise<boolean>` | Confirm with danger variant |
-| `component(content, options?)` | `Promise<boolean>` | Show any template/element as dialog |
-| `prompt(options)` | `Promise<string \| null>` | Input dialog, returns value or null |
-| `dismiss()` | `boolean` | Dismiss topmost dialog |
-
-## Confirm Options
-| Option | Type | Default | Description |
-|--------|------|---------|-------------|
-| `title` | `string` | `undefined` | Dialog title |
-| `subtitle` | `string` | `undefined` | Subtitle below title |
-| `message` | `string` | `undefined` | Body message |
-| `confirmText` | `string` | `'Confirm'` | Confirm button label |
-| `cancelText` | `string` | `'Cancel'` | Cancel button label |
-| `variant` | `'default' \| 'danger'` | `'default'` | Button color scheme |
-| `position` | `{x,y} \| MouseEvent` | Last click | Animation origin |
-| `content` | `TemplateResult \| HTMLElement` | `undefined` | Custom content in body |
-
-## Physics
-- **cursorGlow** on dialog surface (radius: 250, intensity: 0.1)
-- Glass surface with `backdrop-blur-lg` and `backdrop-saturate-150`
-- Luminous glow shadow around dialog container
-- Mobile: renders as bottom sheet with drag handle and swipe dismiss
-
-## Examples
-```typescript
-// Quick ask
-if (await $dialog.ask('Remove this entry?', event)) {
-  removeEntry()
-}
-
-// Prompt for input
-const name = await $dialog.prompt({
-  title: 'Rename',
-  label: 'New name',
-  defaultValue: currentName,
-})
-
-// Custom component dialog
-await $dialog.component(
-  html`<user-profile-editor .user=${user}></user-profile-editor>`,
-  { position: event }
-)
-```

package/skills/schmancy/sheet.md

@@ -1,76 +0,0 @@
-# schmancy-sheet / sheet
-
-> Side/bottom panel with glass backdrop, luminous edge glow, and spring entry animation. Use `sheet` service for imperative usage.
-
-## Usage
-```typescript
-import { sheet } from '@mhmo91/schmancy'
-
-sheet.push({
-  component: MyComponent,       // Component class or tag name
-  position: SchmancySheetPosition.Side,
-  props: { itemId: '123' },     // Passed to component
-})
-```
-
-## sheet API
-| Method | Description |
-|--------|-------------|
-| `push(config)` | Open a sheet with component content |
-| `dismiss(uid?)` | Close sheet by uid, or most recent |
-| `closeAll()` | Close all open sheets |
-| `isOpen(uid)` | Check if sheet with uid is open |
-
-## SheetConfig
-| Option | Type | Default | Description |
-|--------|------|---------|-------------|
-| `component` | `ComponentType` | required | Component class or lazy loader |
-| `uid` | `string` | Auto-generated | Unique identifier for the sheet |
-| `position` | `SchmancySheetPosition` | Auto (side on desktop, bottom on mobile) | `Side` or `Bottom` |
-| `persist` | `boolean` | `false` | Keep DOM after close |
-| `lock` | `boolean` | `false` | Prevent ESC and overlay click dismiss |
-| `props` | `Record<string, unknown>` | `undefined` | Properties passed to component |
-| `close` | `() => void` | `undefined` | Close callback |
-
-## Component Properties (schmancy-sheet)
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `open` | `boolean` | `false` | Open state |
-| `position` | `'side' \| 'bottom'` | `'side'` | Panel position |
-| `persist` | `boolean` | `false` | Keep in DOM after close |
-| `lock` | `boolean` | `false` | Disable dismiss via ESC/overlay |
-| `handleHistory` | `boolean` | `true` | Handle browser back button |
-
-## Events
-| Event | Description |
-|-------|-------------|
-| `close` | Fired when sheet closes |
-
-## Physics
-- Glass backdrop: `backdrop-blur-lg` + `backdrop-saturate-150`
-- Luminous edge glow on panel (primary color, 15% intensity)
-- Spring entry: `scale(0.95)` to `scale(1)` with Blackbird easing
-- Side: slides from right; Bottom: slides from bottom
-- Background siblings set to `inert` while open
-- Stacks with dialogs via shared `overlayStack` z-index manager
-
-## Examples
-```typescript
-import { sheet, SchmancySheetPosition } from '@mhmo91/schmancy'
-
-// Open side sheet
-sheet.push({
-  component: UserEditor,
-  props: { userId: '456' },
-})
-
-// Locked bottom sheet
-sheet.push({
-  component: PaymentForm,
-  position: SchmancySheetPosition.Bottom,
-  lock: true,
-})
-
-// Dismiss programmatically
-sheet.dismiss()
-```

package/src/agent/agent-bundle.test.ts

@@ -1,92 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import './agent-entry'
-
-/**
- * Acceptance test per the Claude Design handover §4.4:
- *
- * > "CI check: load the bundle in a headless browser, assert
- * > `customElements.get('schmancy-button')` resolves, assert
- * > `window.schmancy.help()` returns non-empty."
- *
- * This test is the runtime smoke test. It imports the agent bundle entry
- * (which side-effect registers every <schmancy-*> tag plus <schmancy-skill>)
- * and then verifies the self-describing surface is installed.
- */
-describe('agent bundle — handover §4.4 acceptance', () => {
-	it('registers `schmancy-button` on import', () => {
-		expect(customElements.get('schmancy-button')).toBeDefined()
-	})
-
-	it('registers `schmancy-skill` on import', () => {
-		expect(customElements.get('schmancy-skill')).toBeDefined()
-	})
-
-	it('installs `window.schmancy` when a <schmancy-skill> connects', async () => {
-		const host = document.createElement('div')
-		const skill = document.createElement('schmancy-skill')
-		host.appendChild(skill)
-		document.body.appendChild(host)
-
-		await customElements.whenDefined('schmancy-skill')
-		// One microtask for connectedCallback to finish installing globals.
-		await new Promise(requestAnimationFrame)
-
-		expect(typeof window.schmancy).toBe('object')
-		expect(typeof window.schmancy?.help).toBe('function')
-		expect(typeof window.schmancy?.tokens).toBe('function')
-		expect(typeof window.schmancy?.capabilities).toBe('function')
-
-		host.remove()
-	})
-
-	it('`window.schmancy.help()` returns a non-empty manifest summary', async () => {
-		const skill = document.createElement('schmancy-skill')
-		document.body.appendChild(skill)
-		await customElements.whenDefined('schmancy-skill')
-		await new Promise(requestAnimationFrame)
-
-		const help = window.schmancy!.help() as { elements: unknown[]; services: unknown[] }
-		expect(Array.isArray(help.elements)).toBe(true)
-		expect(help.elements.length).toBeGreaterThan(50)
-
-		skill.remove()
-	})
-
-	it('`window.schmancy.help("schmancy-button")` returns attribute enum values', async () => {
-		const skill = document.createElement('schmancy-skill')
-		document.body.appendChild(skill)
-		await customElements.whenDefined('schmancy-skill')
-		await new Promise(requestAnimationFrame)
-
-		const btn = window.schmancy!.help('schmancy-button') as {
-			attributes?: Array<{ name: string; values?: string[] }>
-		}
-		expect(btn).toBeTruthy()
-		expect(btn.attributes?.length ?? 0).toBeGreaterThan(0)
-		const variant = btn.attributes?.find(a => a.name === 'variant')
-		expect(variant?.values).toContain('filled')
-
-		skill.remove()
-	})
-
-	it('`window.schmancy.capabilities()` reports every probed feature', async () => {
-		const skill = document.createElement('schmancy-skill')
-		document.body.appendChild(skill)
-		await customElements.whenDefined('schmancy-skill')
-		await new Promise(requestAnimationFrame)
-
-		const caps = window.schmancy!.capabilities()
-		expect(caps).toMatchObject({
-			popover: expect.any(Boolean),
-			declarativeShadowDom: expect.any(Boolean),
-			scopedRegistries: expect.any(Boolean),
-			trustedTypes: expect.any(Boolean),
-			cssRegisteredProperties: expect.any(Boolean),
-			elementInternalsAria: expect.any(Boolean),
-			formAssociated: expect.any(Boolean),
-			adoptedStyleSheets: expect.any(Boolean),
-		})
-
-		skill.remove()
-	})
-})

package/src/agent/helpers.ts

@@ -1,159 +0,0 @@
-import manifest from 'virtual:schmancy-manifest'
-
-export type ElementEntry = {
-	kind: 'class'
-	name: string
-	tagName?: string
-	description?: string
-	summary?: string
-	attributes?: Array<{
-		name: string
-		description?: string
-		type?: { text?: string }
-		default?: string
-		values?: string[]
-	}>
-	events?: Array<{ name: string; description?: string; type?: { text?: string } }>
-	slots?: Array<{ name: string; description?: string }>
-	cssProperties?: Array<{ name: string; description?: string }>
-	cssParts?: Array<{ name: string; description?: string }>
-	whenToUse?: string
-	platformPrimitive?: { tag: string; mode?: string; note?: string }
-	contexts?: { provides?: string[]; consumes?: string[] }
-}
-
-export type ServiceEntry = {
-	kind: 'variable'
-	name: string
-	description?: string
-	summary?: string
-	service: true
-	methods?: Array<{ signature: string; summary?: string }>
-}
-
-type Declaration = ElementEntry | ServiceEntry | { kind: string; name: string; [key: string]: unknown }
-
-function allDeclarations(): Declaration[] {
-	const out: Declaration[] = []
-	for (const mod of manifest.modules ?? []) {
-		const decls = (mod as unknown as { declarations?: Declaration[] }).declarations ?? []
-		for (const decl of decls) out.push(decl)
-	}
-	return out
-}
-
-function elements(): ElementEntry[] {
-	return allDeclarations().filter(
-		(d): d is ElementEntry => d.kind === 'class' && typeof (d as ElementEntry).tagName === 'string',
-	)
-}
-
-function services(): ServiceEntry[] {
-	return allDeclarations().filter((d): d is ServiceEntry => d.kind === 'variable' && (d as ServiceEntry).service === true)
-}
-
-export function help(tag?: string): unknown {
-	if (!tag) {
-		return {
-			elements: elements().map(e => ({ tag: e.tagName, summary: e.summary ?? e.description })),
-			services: services().map(s => ({ name: s.name, summary: s.summary ?? s.description })),
-		}
-	}
-	const el = elements().find(e => e.tagName === tag)
-	if (el) return el
-	const svc = services().find(s => s.name === tag)
-	if (svc) return svc
-	return null
-}
-
-export function tokens(): string[] {
-	return (manifest as { tokens?: string[] }).tokens ?? []
-}
-
-export function platformPrimitive(tag: string): ElementEntry['platformPrimitive'] | null {
-	return elements().find(e => e.tagName === tag)?.platformPrimitive ?? null
-}
-
-export function registeredTags(): string[] {
-	return elements()
-		.map(e => e.tagName!)
-		.filter(tag => typeof customElements.get(tag) !== 'undefined')
-}
-
-export function a11yAudit(): Array<{
-	tag: string
-	role: string | null
-	ariaLabel: string | null
-	hasShadowRoot: boolean
-	formAssociated: boolean
-}> {
-	const tags = new Set(elements().map(e => e.tagName!))
-	const report: Array<{
-		tag: string
-		role: string | null
-		ariaLabel: string | null
-		hasShadowRoot: boolean
-		formAssociated: boolean
-	}> = []
-	const all = document.querySelectorAll('*')
-	for (const node of Array.from(all)) {
-		const tag = node.tagName.toLowerCase()
-		if (!tags.has(tag)) continue
-		const ctor = customElements.get(tag) as (CustomElementConstructor & { formAssociated?: boolean }) | undefined
-		report.push({
-			tag,
-			role: node.getAttribute('role'),
-			ariaLabel: node.getAttribute('aria-label'),
-			hasShadowRoot: Boolean((node as Element & { shadowRoot?: ShadowRoot | null }).shadowRoot),
-			formAssociated: Boolean(ctor?.formAssociated),
-		})
-	}
-	return report
-}
-
-export type Capabilities = {
-	popover: boolean
-	declarativeShadowDom: boolean
-	scopedRegistries: boolean
-	trustedTypes: boolean
-	cssRegisteredProperties: boolean
-	elementInternalsAria: boolean
-	formAssociated: boolean
-	adoptedStyleSheets: boolean
-}
-
-/**
- * Runtime feature probe. Tells an agent which platform capabilities the
- * current sandbox exposes, so it can adapt without assuming the sandbox CSP
- * or browser version. Every check is feature-detect, not UA-sniff.
- */
-export function capabilities(): Capabilities {
-	const anyTemplate = typeof HTMLTemplateElement !== 'undefined' ? HTMLTemplateElement.prototype : null
-	const anyElInternals = typeof ElementInternals !== 'undefined' ? ElementInternals.prototype : null
-	return {
-		popover: typeof HTMLElement !== 'undefined' && 'popover' in HTMLElement.prototype,
-		declarativeShadowDom: Boolean(anyTemplate && 'shadowRootMode' in anyTemplate),
-		scopedRegistries: (() => {
-			try {
-				// Native scoped registries require a constructible CustomElementRegistry.
-				// Pre-Safari-26/Chrome-146, the constructor throws Illegal constructor.
-				void new (window as { CustomElementRegistry?: new () => unknown }).CustomElementRegistry!()
-				return true
-			} catch {
-				return false
-			}
-		})(),
-		trustedTypes: typeof (globalThis as { trustedTypes?: unknown }).trustedTypes !== 'undefined',
-		cssRegisteredProperties: typeof (window as { CSS?: { registerProperty?: unknown } }).CSS?.registerProperty === 'function',
-		elementInternalsAria: Boolean(anyElInternals && 'role' in anyElInternals),
-		formAssociated: typeof ElementInternals !== 'undefined',
-		adoptedStyleSheets: typeof Document !== 'undefined' && 'adoptedStyleSheets' in Document.prototype,
-	}
-}
-
-export function manifestUrl(): string {
-	const blob = new Blob([JSON.stringify(manifest)], { type: 'application/json' })
-	return URL.createObjectURL(blob)
-}
-
-export { manifest }

package/src/agent/schmancy-skill.ts

@@ -1,71 +0,0 @@
-import { SchmancyElement } from '../../mixins/index'
-import { html } from 'lit'
-import { customElement } from 'lit/decorators.js'
-import {
-	a11yAudit,
-	capabilities,
-	help,
-	manifest,
-	manifestUrl,
-	platformPrimitive,
-	registeredTags,
-	tokens,
-} from './helpers'
-
-declare global {
-	interface Window {
-		schmancy?: {
-			manifest: typeof manifest
-			manifestUrl: string
-			help: typeof help
-			tokens: typeof tokens
-			platformPrimitive: typeof platformPrimitive
-			registeredTags: typeof registeredTags
-			a11yAudit: typeof a11yAudit
-			capabilities: typeof capabilities
-		}
-	}
-}
-
-let installedUrl: string | null = null
-
-function install() {
-	if (typeof window === 'undefined') return
-	if (installedUrl) return
-	installedUrl = manifestUrl()
-	window.schmancy = {
-		manifest,
-		manifestUrl: installedUrl,
-		help,
-		tokens,
-		platformPrimitive,
-		registeredTags,
-		a11yAudit,
-		capabilities,
-	}
-}
-
-/**
- * Self-describing runtime helper. Drop `<schmancy-skill></schmancy-skill>`
- * once on a page and `window.schmancy.help('schmancy-button')` returns the
- * machine-readable entry for any tag. Renders nothing.
- *
- * @element schmancy-skill
- */
-@customElement('schmancy-skill')
-export class SchmancySkill extends SchmancyElement {
-	connectedCallback() {
-		super.connectedCallback()
-		install()
-	}
-
-	render() {
-		return html``
-	}
-}
-
-declare global {
-	interface HTMLElementTagNameMap {
-		'schmancy-skill': SchmancySkill
-	}
-}

package/src/agent/virtual-manifest.d.ts

@@ -1,10 +0,0 @@
-declare module 'virtual:schmancy-manifest' {
-	type ManifestModule = { kind: 'javascript-module'; path: string; declarations: Array<Record<string, unknown>> }
-	const manifest: {
-		schemaVersion: '1.0.0'
-		readme?: string
-		modules: ManifestModule[]
-		tokens: string[]
-	}
-	export default manifest
-}