@mhmo91/schmancy 0.10.4 → 0.10.6

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":";;;AAyBA,IAAM,IAAe,EAAqB,iBAAA,CAAkB,MAAM;CAChE,QAAQ;CACR,OAAO;CAAA,CAAA,EAmfI,IAjdb,MAAM,EAAA;CA2CJ,IAAA,SAAI;AACF,SAAO,EAAa,MAAM;;CAG5B,IAAA,QAAI;AACF,SAAO,EAAa,MAAM;;CAG5B,IAAA,QAAI;AACF,SAAO,KAAK,QAAQ,UAAA;;CAGtB,IAAA,iBAAI;AACF,SAAO,KAAK,iBAAiB,UAAA;;CAG/B,IAAA,aAAI;AACF,SAAO,KAAK,aAAa,UAAA;;CAG3B,IAAA,eAAI;AACF,SAAO,KAAK,eAAe,UAAA;;CA4B7B,cAAA;AAAA,OAAA,UAxFkB,IAAI,EAAyC,EAAA,CAAA,EAAA,KAAA,mBACpC,IAAI,EAA+C,KAAA,EAAA,KAAA,eACvD,IAAI,EAAA,CAAyB,EAAA,EAAA,KAAA,iBAC3B,IAAI,EAAwB,EAAA,EAAA,KAAA,UAG3B,EAAa,EAAE,KACvC,GAAI,MAAY,EAAS,OAAA,EACzB,GAAA,EACA,EAAY,EAAA,CAAA,EAAA,KAAA,SAGW,EAAa,EAAE,KACtC,GAAI,MAAY,EAAS,MAAA,EACzB,GAAA,EACA,EAAY,EAAA,CAAA,EAAA,KAAA,SAGW,KAAK,QAAQ,cAAA,CAAe,KACnD,GAAsB,GAAG,MAAM,KAAK,UAAU,EAAA,KAAO,KAAK,UAAU,EAAA,CAAA,EACpE,EAAY,EAAA,CAAA,EAAA,KAAA,kBAGoB,KAAK,iBAAiB,cAAA,CAAe,KACrE,GAAA,EACA,EAAY,EAAA,CAAA,EAAA,KAAA,cAGgB,KAAK,aAAa,cAAA,CAAe,KAC7D,GAAA,EACA,EAAY,EAAA,CAAA,EAAA,KAAA,gBAGkB,KAAK,eAAe,cAAA,CAAe,KACjE,GAAA,EACA,EAAY,EAAA,CAAA,EAAA,KAAA,kBA6BoB,KAAK,QAAQ,KAC7C,GAAU,MAAA;AACR,OAAI,MAAW,QAAQ;IAErB,IAAM,IAAa,OAAO,WAAW,+BAAA;AACrC,WAAO,IAAI,GAA6B,MAAA;KACtC,IAAM,KAAW,MAAA;AACf,QAAW,KAAK,EAAE,UAAU,SAAS,QAAA;;AAQvC,YANA,EAAW,iBAAiB,UAAU,EAAA,EAGtC,EAAW,KAAK,EAAW,UAAU,SAAS,QAAA,QAGjC,EAAW,oBAAoB,UAAU,EAAA;MAAA;;AAG1D,UAAO,EAAG,EAAA;IAAA,EAEZ,GAAA,EACA,EAAY,EAAA,CAAA,EAIZ,KAAK,eAAA;;CAoBP,gBAAA;AAEE,SAAO,EAA6B,QAAQ,EAAA,CAAc,KACxD,EAAU,EAAM,IAAA,CAAA,EAChB,GAAI,MAAK,EAAE,OAAO,MAAA,EAClB,EAAe,KAAA,EACf,GAAI,MAAA;AACE,QACF,KAAK,uBAAuB,EAAA;IAAA,CAAA,CAGhC,KACA,QAAA;AAEE,UAAO,cACL,IAAI,YAAY,GAAkB;IAChC,SAAA,CAAS;IACT,UAAA,CAAU;IAAA,CAAA,CAAA;IAAA,EAIhB,QACE,EAA6B,QAAQ,EAAA,CAAc,KACjD,EAAU,EAAM,IAAA,CAAA,EAChB,GAAI,MAAK,EAAE,OAAO,MAAA,EAClB,EAAe,KAAA,EACf,GAAI,MAAA;AACE,QACF,KAAK,uBAAuB,EAAA;IAAA,CAAA,CAAA,CAAA;;CAgBxC,uBAA8B,GAAA;AAC5B,OAAK,iBAAiB,KAAK,EAAA,EAG3B,EAAa,IAAI;GAAE,QAAQ,EAAU;GAAQ,OAAO,EAAU;GAAA,CAAA,EAC9D,KAAK,QAAQ,KAAK,EAAU,MAAA;;CAa9B,YAAmB,GAAA;EAKjB,IAAM,IAAkC,EAAA;AAAA,EACpC,EAAO,WAD6B,KAClB,MACpB,EAAQ,SAAS,EAAO,SAEtB,EAAO,UAFe,KAEL,MACnB,EAAQ,QAAQ,EAAO,QAErB,OAAO,KAAK,EAAA,CAAS,SAAS,KAChC,EAAa,IAAI,EAAA,EAEf,EAAO,UAFQ,KAEE,KACnB,KAAK,QAAQ,KAAK,EAAO,MAAA;;CAkB7B,UAAiB,GAAA;EACf,IAAM,IAAY,KAAK;AACnB,QACF,EAAU,SAAS,IAInB,EAAa,IAAI,EAAE,QAAA,GAAA,CAAA;;CAkBvB,SAAgB,GAAA;EACd,IAAM,IAAY,KAAK;AACnB,QACF,EAAU,QAAQ,IAIlB,EAAa,IAAI,EAAE,OAAA,GAAA,CAAA;;CAqBvB,aAAA;AACE,SAAO,KAAK,gBAAgB,KAC1B,GAAI,MAAU,MAAW,OAAX,CAAA;;CAgBlB,eAAA;EACE,IAAM,IAAgB,KAAK,QACrB,IAAY,MAAkB,SAAS,UAC5B,MAAkB,UAAU,SAC5B;AACjB,OAAK,UAAU,EAAA;;CAkBjB,eAAsB,GAAA;EACpB,IAAM,IAAY,KAAK;AACvB,MAAI,GAAW;GACb,IAAM,IAAO,EAAU,OAAO,SAAS,OAAQ,EAAU,YAAY;AACrE,OAAI,EACF,QAAO,iBAAiB,EAAA,CAAM,iBAAiB,cAAc,IAAA,CAAgB,MAAA;;AAGjF,SAAO;;CAsBT,iBAAwB,GAAA;AACtB,SAAO,KAAK,OAAO,KACjB,QAAU,KAAK,eAAe,EAAA,CAAA,EAC9B,GAAA,CAAA;;CAmBJ,cAAqB,GAAA;AACnB,OAAK,aAAa,KAAK,EAAA,EAGvB,OAAO,cACL,IAAI,YAAY,cAAc;GAC5B,QAAQ;GACR,SAAA,CAAS;GACT,UAAA,CAAU;GAAA,CAAA,CAAA;;CAgBhB,mBAAA;AACE,OAAK,cAAA,CAAe,KAAK,WAAA;;CAkB3B,gBAAuB,GAAA;AACrB,OAAK,eAAe,KAAK,EAAA;;CAwB3B,KAAY,GAAA;AAAA,EAKN,EAAO,eALD,KAKgB,KACxB,KAAK,cAAc,EAAO,WAAA,EAExB,EAAO,WAFiB,KAEN,KACpB,KAAK,UAAU,EAAO,OAAA,EAEpB,EAAO,UAFa,KAEH,KACnB,KAAK,SAAS,EAAO,MAAA;;CAWzB,OAAA,cAAO;AAIL,SAHK,AACH,EAAa,aAAW,IAAI,GAAA,EAEvB,EAAa;;EAeU,aAAA,EACrB,IAAgB;AAAA,SAAA,KAAA,GAAA,KAAA"}

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

@@ -1,345 +0,0 @@
-import { SchmancyElement } from '@mixins/index'
-import hljs from 'highlight.js/lib/core'
-import bash from 'highlight.js/lib/languages/bash'
-import javascript from 'highlight.js/lib/languages/javascript'
-import markdown from 'highlight.js/lib/languages/markdown'
-import typescript from 'highlight.js/lib/languages/typescript'
-import xml from 'highlight.js/lib/languages/xml'
-import { css, html } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
-import { unsafeHTML } from 'lit/directives/unsafe-html.js'
-
-// Register only the languages we need
-hljs.registerLanguage('javascript', javascript)
-hljs.registerLanguage('typescript', typescript)
-hljs.registerLanguage('html', xml)
-hljs.registerLanguage('xml', xml)
-hljs.registerLanguage('markdown', markdown)
-hljs.registerLanguage('bash', bash)
-
-/**
- * @element schmancy-code
- * Code highlighting component using highlight.js with schmancy theming support
- */
-@customElement('schmancy-code')
-export class SchmancyCode extends SchmancyElement {
-	static styles = [css`
-	:host {
-		display: block;
-		width: 100%;
-		overflow: hidden;
-	}
-
-	/* Code block styling using schmancy color system */
-	.hljs {
-		display: block;
-		overflow-x: auto;
-		padding: 0.5em;
-		color: var(--md-sys-color-on-surface-variant);
-		background: var(--md-sys-color-surface-container-lowest);
-		font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
-	}
-
-	/* Comments and documentation */
-	.hljs-comment,
-	.hljs-quote {
-		color: var(--md-sys-color-outline);
-		font-style: italic;
-	}
-
-	/* Keywords, doctags, formulas */
-	.hljs-doctag,
-	.hljs-keyword,
-	.hljs-formula {
-		color: var(--md-sys-color-primary);
-	}
-
-	/* Tags, sections, names, deletions */
-	.hljs-section,
-	.hljs-name,
-	.hljs-selector-tag,
-	.hljs-deletion,
-	.hljs-subst {
-		color: var(--md-sys-color-error);
-	}
-
-	/* Literals */
-	.hljs-literal {
-		color: var(--md-sys-color-tertiary);
-	}
-
-	/* Strings, regex, additions */
-	.hljs-string,
-	.hljs-regexp,
-	.hljs-addition,
-	.hljs-attribute,
-	.hljs-meta-string {
-		color: var(--md-sys-color-secondary);
-	}
-
-	/* Built-ins and class titles */
-	.hljs-built_in,
-	.hljs-class .hljs-title {
-		color: var(--md-sys-color-tertiary);
-	}
-
-	/* Variables, attributes, types */
-	.hljs-attr,
-	.hljs-variable,
-	.hljs-template-variable,
-	.hljs-type,
-	.hljs-selector-class,
-	.hljs-selector-attr,
-	.hljs-selector-pseudo,
-	.hljs-number {
-		color: var(--md-sys-color-on-surface);
-	}
-
-	/* Symbols, bullets, links, meta */
-	.hljs-symbol,
-	.hljs-bullet,
-	.hljs-link,
-	.hljs-meta,
-	.hljs-selector-id,
-	.hljs-title {
-		color: var(--md-sys-color-secondary);
-	}
-
-	.hljs-emphasis {
-		font-style: italic;
-	}
-
-	.hljs-strong {
-		font-weight: bold;
-	}
-
-	.hljs-link {
-		text-decoration: underline;
-	}
-
-	/* Line features styling */
-	.code-with-lines {
-		background: transparent;
-		padding: 0;
-	}
-
-	.code-line {
-		display: block;
-		padding-left: 0;
-		transition: background-color 0.2s ease;
-	}
-
-	.code-line.highlighted {
-		background-color: var(--md-sys-color-primary-container);
-		opacity: 0.2;
-	}
-
-	.line-number {
-		display: inline-block;
-		width: 3rem;
-		padding-right: 1rem;
-		text-align: right;
-		color: var(--md-sys-color-outline);
-		user-select: none;
-		font-size: inherit;
-	}
-`];
-	/**
-	 * Programming language for syntax highlighting
-	 */
-	@property({ type: String })
-	language: string = 'javascript'
-
-	/**
-	 * Code content to highlight
-	 */
-	@property({ type: String })
-	code: string = ''
-
-	/**
-	 * Optional filename or title to display in header
-	 */
-	@property({ type: String })
-	filename?: string
-
-	/**
-	 * Show line numbers
-	 */
-	@property({ type: Boolean })
-	lineNumbers: boolean = false
-
-	/**
-	 * Show copy button
-	 */
-	@property({ type: Boolean })
-	copyButton: boolean = true
-
-	/**
-	 * Highlighted line numbers (comma-separated or ranges like "1-3,5,7-9")
-	 */
-	@property({ type: String })
-	highlightLines?: string
-
-	/**
-	 * Maximum height before scrolling
-	 */
-	@property({ type: String })
-	maxHeight?: string
-
-	@state()
-	private copied: boolean = false
-
-	private get highlightedCode(): string {
-		if (!this.code) return ''
-
-		let highlightedHtml = ''
-
-		try {
-			// Use highlight.js to get highlighted code
-			const result = hljs.highlight(this.code.trim(), { language: this.language })
-			highlightedHtml = result.value
-		} catch {
-			// Fallback to auto-detection if language is not supported
-			try {
-				const result = hljs.highlightAuto(this.code.trim())
-				highlightedHtml = result.value
-			} catch {
-				// Final fallback to escaped plain text
-				highlightedHtml = this.escapeHtml(this.code.trim())
-			}
-		}
-
-		// Process for line numbers and highlighting if needed
-		if (this.lineNumbers || this.highlightLines) {
-			return this.addLineFeatures(highlightedHtml)
-		}
-
-		return highlightedHtml
-	}
-
-	private escapeHtml(text: string): string {
-		const div = document.createElement('div')
-		div.textContent = text
-		return div.innerHTML
-	}
-
-	private getHighlightedLines(): Set<number> {
-		const lines = new Set<number>()
-		if (!this.highlightLines) return lines
-
-		const parts = this.highlightLines.split(',')
-		for (const part of parts) {
-			const trimmed = part.trim()
-			if (trimmed.includes('-')) {
-				const [start, end] = trimmed.split('-').map(n => parseInt(n.trim()))
-				if (!isNaN(start) && !isNaN(end)) {
-					for (let i = start; i <= end; i++) {
-						lines.add(i)
-					}
-				}
-			} else {
-				const lineNum = parseInt(trimmed)
-				if (!isNaN(lineNum)) {
-					lines.add(lineNum)
-				}
-			}
-		}
-		return lines
-	}
-
-	private addLineFeatures(highlightedHtml: string): string {
-		const lines = highlightedHtml.split('\n')
-		const highlightedLines = this.getHighlightedLines()
-
-		return lines
-			.map((line, index) => {
-				const lineNumber = index + 1
-				const isHighlighted = highlightedLines.has(lineNumber)
-				const lineClass = isHighlighted ? 'code-line highlighted' : 'code-line'
-
-				let content = ''
-				if (this.lineNumbers) {
-					content += `<span class="line-number">${lineNumber}</span>`
-				}
-				content += line
-
-				return `<div class="${lineClass}">${content}</div>`
-			})
-			.join('')
-	}
-
-	private async copyCode() {
-		try {
-			await navigator.clipboard.writeText(this.code)
-			this.copied = true
-			setTimeout(() => {
-				this.copied = false
-			}, 2000)
-		} catch (err) {
-			console.error('Failed to copy code:', err)
-		}
-	}
-
-	private getLanguageLabel(): string {
-		const languageMap: Record<string, string> = {
-			javascript: 'JavaScript',
-			typescript: 'TypeScript',
-			html: 'HTML',
-			markdown: 'Markdown',
-			bash: 'Bash',
-		}
-
-		if (this.filename) {
-			return this.filename
-		}
-
-		return languageMap[this.language.toLowerCase()] || this.language.toUpperCase()
-	}
-
-	render() {
-		const codeClass = this.lineNumbers || this.highlightLines ? 'code-with-lines' : 'hljs'
-
-		return html`
-			<schmancy-details class="bg-surface-default">
-				<section slot="summary">
-					<!-- Header -->
-					<div class="flex items-center justify-between"
-						>
-						<div class="flex items-center gap-2">
-							<div class="flex gap-1.5">
-								<div class="w-3 h-3 rounded-full opacity-60" style="background-color: var(--md-sys-color-error);"></div>
-								<div class="w-3 h-3 rounded-full opacity-60" style="background-color: var(--md-sys-color-tertiary);"></div>
-								<div class="w-3 h-3 rounded-full opacity-60" style="background-color: var(--md-sys-color-secondary);"></div>
-							</div>
-							<span class="text-xs font-medium opacity-70 ml-2" style="color: var(--md-sys-color-on-surface-variant);">
-								${this.getLanguageLabel()}
-							</span>
-						</div>
-						${this.copyButton
-							? html`
-									<schmancy-button
-										.variant="${this.copied ? 'filled tonal' : 'text'}"
-										@click=${this.copyCode}
-										class="transition-all"
-									>
-										<schmancy-icon > ${this.copied ? 'check' : 'content_copy'} </schmancy-icon>
-										<span class="ml-1">${this.copied ? 'Copied!' : 'Copy'}</span>
-									</schmancy-button>
-								`
-							: ''}
-					</div>
-				</section>
-				<!-- Code -->
-				<div class="overflow-auto" style="${this.maxHeight ? `max-height: ${this.maxHeight}` : ''}">
-					<pre class="m-0"><code class="${codeClass}">${unsafeHTML(this.highlightedCode)}</code></pre>
-				</div>
-			</schmancy-details>
-		`
-	}
-}
-
-declare global {
-	interface HTMLElementTagNameMap {
-		'schmancy-code': SchmancyCode
-	}
-}