@styloviz/core 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 StyloViz
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,23 @@
+# @styloviz/core
+
+> Core utilities, services, directives and design tokens shared by every StyloViz component.
+
+Part of the **StyloViz UI Kit** — a premium Angular 21 + Tailwind CSS 4 dashboard component library.
+
+`@styloviz/core` is a **required peer dependency** of every free and Pro component. Install it once alongside any component — you rarely import from it directly.
+
+## Installation
+
+```bash
+npm install @styloviz/core
+```
+
+Requires `@angular/core` and `@angular/common` >= 21.
+
+## Documentation
+
+https://styloviz.dev/docs
+
+## License
+
+MIT

package/fesm2022/styloviz-core.mjs

@@ -0,0 +1,245 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, inject, signal, effect, Injectable, ElementRef, Directive } from '@angular/core';
+
+// ─── Token ────────────────────────────────────────────────────────────────────
+const STYLOVIZ_CONFIG = new InjectionToken('StyloVizConfig');
+// ─── Provider factory ─────────────────────────────────────────────────────────
+/**
+ * Register StyloViz in your root app config.
+ *
+ * @example
+ * // app.config.ts
+ * import { provideStylviz } from '@styloviz/core';
+ *
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideStylviz({ licenseKey: 'SVZ-XXXX-XXXX-XXXX' })
+ *   ]
+ * };
+ */
+function provideStylviz(config = {}) {
+    return makeEnvironmentProviders([
+        { provide: STYLOVIZ_CONFIG, useValue: config },
+    ]);
+}
+
+const STORAGE_KEY = 'styloviz-theme';
+/**
+ * ThemeService — Dark/Light mode manager for StyloViz components.
+ *
+ * Priority order on init: localStorage → provideStylviz colorScheme → OS preference → light.
+ *
+ * Usage:
+ *   const theme = inject(ThemeService);
+ *   theme.toggleTheme();
+ *   theme.isDark();   // signal
+ */
+class ThemeService {
+    config = inject(STYLOVIZ_CONFIG, { optional: true });
+    isDark = signal(this.resolveInitialTheme() === 'dark', ...(ngDevMode ? [{ debugName: "isDark" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            this.applyTheme(this.isDark() ? 'dark' : 'light');
+        });
+    }
+    toggleTheme() {
+        this.setTheme(this.isDark() ? 'light' : 'dark');
+    }
+    setTheme(theme) {
+        if (theme === (this.isDark() ? 'dark' : 'light'))
+            return;
+        const doc = typeof document !== 'undefined'
+            ? document
+            : undefined;
+        const startViewTransition = doc?.startViewTransition;
+        // Instant switch when the API is unavailable or reduced motion is
+        // requested; the cross-fade itself adds no per-element transitions.
+        if (!startViewTransition || this.prefersReducedMotion()) {
+            this.isDark.set(theme === 'dark');
+            return;
+        }
+        startViewTransition.call(doc, () => {
+            this.isDark.set(theme === 'dark');
+            this.applyTheme(theme);
+        });
+    }
+    prefersReducedMotion() {
+        return (typeof window !== 'undefined' &&
+            window.matchMedia('(prefers-reduced-motion: reduce)').matches);
+    }
+    resolveInitialTheme() {
+        if (typeof window === 'undefined')
+            return 'light';
+        // 1. localStorage (user's last explicit choice)
+        const stored = localStorage.getItem(STORAGE_KEY);
+        if (stored === 'dark' || stored === 'light')
+            return stored;
+        // 2. provideStylviz colorScheme config
+        const scheme = this.config?.colorScheme;
+        if (scheme === 'dark')
+            return 'dark';
+        if (scheme === 'light')
+            return 'light';
+        // 3. OS preference
+        return window.matchMedia('(prefers-color-scheme: dark)').matches
+            ? 'dark'
+            : 'light';
+    }
+    applyTheme(theme) {
+        if (typeof document === 'undefined')
+            return;
+        const html = document.documentElement;
+        html.classList.toggle('dark', theme === 'dark');
+        html.classList.toggle('light', theme === 'light');
+        localStorage.setItem(STORAGE_KEY, theme);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ThemeService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ThemeService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+// ─── Service ─────────────────────────────────────────────────────────────────
+let _idCounter = 0;
+class ToastService {
+    toasts = signal([], ...(ngDevMode ? [{ debugName: "toasts" }] : /* istanbul ignore next */ []));
+    /** Active auto-dismiss timers keyed by toast id (enables pause/resume). */
+    timers = new Map();
+    success(message, opts) {
+        return this.show('success', message, opts);
+    }
+    error(message, opts) {
+        return this.show('error', message, { duration: 6000, ...opts });
+    }
+    warning(message, opts) {
+        return this.show('warning', message, opts);
+    }
+    info(message, opts) {
+        return this.show('info', message, opts);
+    }
+    show(variant, message, opts = {}) {
+        const id = `svz-toast-${++_idCounter}`;
+        const toast = {
+            id,
+            variant,
+            message,
+            title: opts.title,
+            duration: opts.duration ?? 4000,
+            dismissible: opts.dismissible ?? true,
+            action: opts.action,
+            position: opts.position ?? 'top-right',
+        };
+        this.toasts.update(list => [...list, toast]);
+        if (toast.duration > 0) {
+            this.startTimer(id, toast.duration);
+        }
+        return id;
+    }
+    dismiss(id) {
+        this.clearTimer(id);
+        this.toasts.update(list => list.filter(t => t.id !== id));
+    }
+    dismissAll() {
+        this.timers.forEach(t => clearTimeout(t.handle));
+        this.timers.clear();
+        this.toasts.set([]);
+    }
+    /**
+     * Pause a toast's auto-dismiss countdown (e.g. while the pointer hovers the
+     * stack), preserving the time that was left. No-op for persistent toasts.
+     */
+    pause(id) {
+        const timer = this.timers.get(id);
+        if (!timer)
+            return;
+        clearTimeout(timer.handle);
+        timer.remaining -= Date.now() - timer.startedAt;
+        // Keep the entry (with no live handle) so resume() can restart it.
+        this.timers.set(id, { ...timer, handle: undefined });
+    }
+    /** Resume a previously paused auto-dismiss countdown with its remaining time. */
+    resume(id) {
+        const timer = this.timers.get(id);
+        if (!timer || timer.handle)
+            return;
+        this.startTimer(id, Math.max(timer.remaining, 0));
+    }
+    // ── Internal timer helpers ──────────────────────────────────────────────────
+    startTimer(id, duration) {
+        const handle = setTimeout(() => this.dismiss(id), duration);
+        this.timers.set(id, { handle, remaining: duration, startedAt: Date.now() });
+    }
+    clearTimer(id) {
+        const timer = this.timers.get(id);
+        if (timer?.handle)
+            clearTimeout(timer.handle);
+        this.timers.delete(id);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ToastService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ToastService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * SvChartAnimDirective — Viewport-aware chart animation trigger.
+ *
+ * Attach `svChartAnim` to the root wrapper of any StyloViz chart.
+ * Uses IntersectionObserver to add `.sv-animate` once the chart
+ * enters the viewport (threshold 10%), triggering CSS bar-grow animations.
+ *
+ * @example
+ * ```html
+ * <div svChartAnim class="flex flex-col gap-3">
+ *   <!-- chart content -->
+ * </div>
+ * ```
+ */
+class SvChartAnimDirective {
+    el = inject((ElementRef));
+    observer;
+    ngOnInit() {
+        this.observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    requestAnimationFrame(() => {
+                        entry.target.classList.add('sv-animate');
+                    });
+                    this.observer?.unobserve(entry.target);
+                }
+            });
+        }, { threshold: 0.1 });
+        this.observer.observe(this.el.nativeElement);
+    }
+    ngOnDestroy() {
+        this.observer?.disconnect();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SvChartAnimDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", type: SvChartAnimDirective, isStandalone: true, selector: "[svChartAnim]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SvChartAnimDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[svChartAnim]',
+                    standalone: true,
+                }]
+        }] });
+
+/**
+ * @styloviz/core — Public API
+ *
+ * All exports from this file are part of the public API surface.
+ * Do not import from internal paths — always use '@styloviz/core'.
+ */
+// Token + provider
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { STYLOVIZ_CONFIG, SvChartAnimDirective, ThemeService, ToastService, provideStylviz };
+//# sourceMappingURL=styloviz-core.mjs.map

package/fesm2022/styloviz-core.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styloviz-core.mjs","sources":["../../../../projects/core/src/lib/tokens/styloviz.token.ts","../../../../projects/core/src/lib/services/theme.service.ts","../../../../projects/core/src/lib/services/toast.service.ts","../../../../projects/core/src/lib/directives/chart-animate.directive.ts","../../../../projects/core/src/public-api.ts","../../../../projects/core/src/styloviz-core.ts"],"sourcesContent":["import {\n  InjectionToken,\n  makeEnvironmentProviders,\n  EnvironmentProviders,\n} from '@angular/core';\n\n// ─── Config interface ─────────────────────────────────────────────────────────\n\nexport interface StyloVizConfig {\n  /**\n   * License key — required for premium components.\n   * Obtain from https://styloviz.dev/license after purchase.\n   */\n  readonly licenseKey?: string;\n\n  /**\n   * Default color scheme applied on app start.\n   * Defaults to 'system' (reads OS preference).\n   */\n  readonly colorScheme?: 'light' | 'dark' | 'system';\n}\n\n// ─── Token ────────────────────────────────────────────────────────────────────\n\nexport const STYLOVIZ_CONFIG = new InjectionToken<StyloVizConfig>(\n  'StyloVizConfig'\n);\n\n// ─── Provider factory ─────────────────────────────────────────────────────────\n\n/**\n * Register StyloViz in your root app config.\n *\n * @example\n * // app.config.ts\n * import { provideStylviz } from '@styloviz/core';\n *\n * export const appConfig: ApplicationConfig = {\n *   providers: [\n *     provideStylviz({ licenseKey: 'SVZ-XXXX-XXXX-XXXX' })\n *   ]\n * };\n */\nexport function provideStylviz(config: StyloVizConfig = {}): EnvironmentProviders {\n  return makeEnvironmentProviders([\n    { provide: STYLOVIZ_CONFIG, useValue: config },\n  ]);\n}\n","import { Injectable, signal, effect, inject } from '@angular/core';\nimport { STYLOVIZ_CONFIG } from '../tokens/styloviz.token';\n\nexport type Theme = 'light' | 'dark';\n\nconst STORAGE_KEY = 'styloviz-theme';\n\n/** Minimal typing for the View Transitions API (not yet in lib.dom). */\ntype ViewTransitionDocument = Document & {\n  readonly startViewTransition?: (callback: () => void) => unknown;\n};\n\n/**\n * ThemeService — Dark/Light mode manager for StyloViz components.\n *\n * Priority order on init: localStorage → provideStylviz colorScheme → OS preference → light.\n *\n * Usage:\n *   const theme = inject(ThemeService);\n *   theme.toggleTheme();\n *   theme.isDark();   // signal\n */\n@Injectable({ providedIn: 'root' })\nexport class ThemeService {\n  private readonly config = inject(STYLOVIZ_CONFIG, { optional: true });\n\n  readonly isDark = signal<boolean>(this.resolveInitialTheme() === 'dark');\n\n  constructor() {\n    effect(() => {\n      this.applyTheme(this.isDark() ? 'dark' : 'light');\n    });\n  }\n\n  toggleTheme(): void {\n    this.setTheme(this.isDark() ? 'light' : 'dark');\n  }\n\n  setTheme(theme: Theme): void {\n    if (theme === (this.isDark() ? 'dark' : 'light')) return;\n\n    const doc =\n      typeof document !== 'undefined'\n        ? (document as ViewTransitionDocument)\n        : undefined;\n    const startViewTransition = doc?.startViewTransition;\n\n    // Instant switch when the API is unavailable or reduced motion is\n    // requested; the cross-fade itself adds no per-element transitions.\n    if (!startViewTransition || this.prefersReducedMotion()) {\n      this.isDark.set(theme === 'dark');\n      return;\n    }\n\n    startViewTransition.call(doc, () => {\n      this.isDark.set(theme === 'dark');\n      this.applyTheme(theme);\n    });\n  }\n\n  private prefersReducedMotion(): boolean {\n    return (\n      typeof window !== 'undefined' &&\n      window.matchMedia('(prefers-reduced-motion: reduce)').matches\n    );\n  }\n\n  private resolveInitialTheme(): Theme {\n    if (typeof window === 'undefined') return 'light';\n\n    // 1. localStorage (user's last explicit choice)\n    const stored = localStorage.getItem(STORAGE_KEY) as Theme | null;\n    if (stored === 'dark' || stored === 'light') return stored;\n\n    // 2. provideStylviz colorScheme config\n    const scheme = this.config?.colorScheme;\n    if (scheme === 'dark') return 'dark';\n    if (scheme === 'light') return 'light';\n\n    // 3. OS preference\n    return window.matchMedia('(prefers-color-scheme: dark)').matches\n      ? 'dark'\n      : 'light';\n  }\n\n  private applyTheme(theme: Theme): void {\n    if (typeof document === 'undefined') return;\n\n    const html = document.documentElement;\n    html.classList.toggle('dark', theme === 'dark');\n    html.classList.toggle('light', theme === 'light');\n\n    localStorage.setItem(STORAGE_KEY, theme);\n  }\n}\n","import { Injectable, signal } from '@angular/core';\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type ToastVariant  = 'success' | 'error' | 'warning' | 'info';\nexport type ToastPosition =\n  | 'top-right'    | 'top-left'    | 'top-center'\n  | 'bottom-right' | 'bottom-left' | 'bottom-center';\n\nexport interface ToastAction {\n  readonly label:    string;\n  readonly callback: () => void;\n}\n\nexport interface Toast {\n  readonly id:          string;\n  readonly variant:     ToastVariant;\n  readonly title?:      string;\n  readonly message:     string;\n  readonly duration:    number;     // ms — 0 = persist until dismissed\n  readonly dismissible: boolean;\n  readonly action?:     ToastAction;\n  readonly position:    ToastPosition;\n}\n\nexport interface ToastOptions {\n  readonly title?:       string;\n  readonly duration?:    number;\n  readonly dismissible?: boolean;\n  readonly action?:      ToastAction;\n  readonly position?:    ToastPosition;\n}\n\n// ─── Service ─────────────────────────────────────────────────────────────────\n\nlet _idCounter = 0;\n\n/**\n * ToastService — Imperative notification API.\n *\n * Inject anywhere and call convenience methods:\n *   toast.success('Saved!');\n *   toast.error('Failed', { title: 'Error', duration: 0 });\n *\n * Pair with `<sv-toast-host>` from `@styloviz/toast` in your root layout.\n */\ninterface ToastTimer {\n  handle:    ReturnType<typeof setTimeout>;\n  /** ms remaining when the timer was last (re)started. */\n  remaining: number;\n  /** wall-clock time the timer was last started. */\n  startedAt: number;\n}\n\n@Injectable({ providedIn: 'root' })\nexport class ToastService {\n  readonly toasts = signal<Toast[]>([]);\n\n  /** Active auto-dismiss timers keyed by toast id (enables pause/resume). */\n  private readonly timers = new Map<string, ToastTimer>();\n\n  success(message: string, opts?: ToastOptions): string {\n    return this.show('success', message, opts);\n  }\n\n  error(message: string, opts?: ToastOptions): string {\n    return this.show('error', message, { duration: 6000, ...opts });\n  }\n\n  warning(message: string, opts?: ToastOptions): string {\n    return this.show('warning', message, opts);\n  }\n\n  info(message: string, opts?: ToastOptions): string {\n    return this.show('info', message, opts);\n  }\n\n  show(variant: ToastVariant, message: string, opts: ToastOptions = {}): string {\n    const id = `svz-toast-${++_idCounter}`;\n    const toast: Toast = {\n      id,\n      variant,\n      message,\n      title:       opts.title,\n      duration:    opts.duration ?? 4000,\n      dismissible: opts.dismissible ?? true,\n      action:      opts.action,\n      position:    opts.position ?? 'top-right',\n    };\n\n    this.toasts.update(list => [...list, toast]);\n\n    if (toast.duration > 0) {\n      this.startTimer(id, toast.duration);\n    }\n\n    return id;\n  }\n\n  dismiss(id: string): void {\n    this.clearTimer(id);\n    this.toasts.update(list => list.filter(t => t.id !== id));\n  }\n\n  dismissAll(): void {\n    this.timers.forEach(t => clearTimeout(t.handle));\n    this.timers.clear();\n    this.toasts.set([]);\n  }\n\n  /**\n   * Pause a toast's auto-dismiss countdown (e.g. while the pointer hovers the\n   * stack), preserving the time that was left. No-op for persistent toasts.\n   */\n  pause(id: string): void {\n    const timer = this.timers.get(id);\n    if (!timer) return;\n    clearTimeout(timer.handle);\n    timer.remaining -= Date.now() - timer.startedAt;\n    // Keep the entry (with no live handle) so resume() can restart it.\n    this.timers.set(id, { ...timer, handle: undefined as unknown as ReturnType<typeof setTimeout> });\n  }\n\n  /** Resume a previously paused auto-dismiss countdown with its remaining time. */\n  resume(id: string): void {\n    const timer = this.timers.get(id);\n    if (!timer || timer.handle) return;\n    this.startTimer(id, Math.max(timer.remaining, 0));\n  }\n\n  // ── Internal timer helpers ──────────────────────────────────────────────────\n\n  private startTimer(id: string, duration: number): void {\n    const handle = setTimeout(() => this.dismiss(id), duration);\n    this.timers.set(id, { handle, remaining: duration, startedAt: Date.now() });\n  }\n\n  private clearTimer(id: string): void {\n    const timer = this.timers.get(id);\n    if (timer?.handle) clearTimeout(timer.handle);\n    this.timers.delete(id);\n  }\n}\n","import {\n  Directive,\n  ElementRef,\n  OnDestroy,\n  OnInit,\n  inject,\n} from '@angular/core';\n\n/**\n * SvChartAnimDirective — Viewport-aware chart animation trigger.\n *\n * Attach `svChartAnim` to the root wrapper of any StyloViz chart.\n * Uses IntersectionObserver to add `.sv-animate` once the chart\n * enters the viewport (threshold 10%), triggering CSS bar-grow animations.\n *\n * @example\n * ```html\n * <div svChartAnim class=\"flex flex-col gap-3\">\n *   <!-- chart content -->\n * </div>\n * ```\n */\n@Directive({\n  selector: '[svChartAnim]',\n  standalone: true,\n})\nexport class SvChartAnimDirective implements OnInit, OnDestroy {\n  private readonly el = inject(ElementRef<HTMLElement>);\n  private observer?: IntersectionObserver;\n\n  ngOnInit(): void {\n    this.observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach((entry) => {\n          if (entry.isIntersecting) {\n            requestAnimationFrame(() => {\n              (entry.target as HTMLElement).classList.add('sv-animate');\n            });\n            this.observer?.unobserve(entry.target);\n          }\n        });\n      },\n      { threshold: 0.1 }\n    );\n\n    this.observer.observe(this.el.nativeElement);\n  }\n\n  ngOnDestroy(): void {\n    this.observer?.disconnect();\n  }\n}\n","/**\n * @styloviz/core — Public API\n *\n * All exports from this file are part of the public API surface.\n * Do not import from internal paths — always use '@styloviz/core'.\n */\n\n// Token + provider\nexport { STYLOVIZ_CONFIG, provideStylviz } from './lib/tokens/styloviz.token';\nexport type { StyloVizConfig } from './lib/tokens/styloviz.token';\n\n// Services\nexport { ThemeService } from './lib/services/theme.service';\nexport type { Theme } from './lib/services/theme.service';\n\nexport { ToastService } from './lib/services/toast.service';\nexport type {\n  Toast,\n  ToastVariant,\n  ToastPosition,\n  ToastAction,\n  ToastOptions,\n} from './lib/services/toast.service';\n\n// Directives\nexport { SvChartAnimDirective } from './lib/directives/chart-animate.directive';\n\n// Models\nexport type {\n  NavChild,\n  NavChildGroup,\n  MenuItem,\n  MenuGroup,\n} from './lib/models/nav.model';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;AAsBA;MAEa,eAAe,GAAG,IAAI,cAAc,CAC/C,gBAAgB;AAGlB;AAEA;;;;;;;;;;;;AAYG;AACG,SAAU,cAAc,CAAC,MAAA,GAAyB,EAAE,EAAA;AACxD,IAAA,OAAO,wBAAwB,CAAC;AAC9B,QAAA,EAAE,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,EAAE;AAC/C,KAAA,CAAC;AACJ;;AC1CA,MAAM,WAAW,GAAG,gBAAgB;AAOpC;;;;;;;;;AASG;MAEU,YAAY,CAAA;IACN,MAAM,GAAG,MAAM,CAAC,eAAe,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;IAE5D,MAAM,GAAG,MAAM,CAAU,IAAI,CAAC,mBAAmB,EAAE,KAAK,MAAM,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,QAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAC;AAExE,IAAA,WAAA,GAAA;QACE,MAAM,CAAC,MAAK;AACV,YAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,MAAM,GAAG,OAAO,CAAC;AACnD,QAAA,CAAC,CAAC;IACJ;IAEA,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,OAAO,GAAG,MAAM,CAAC;IACjD;AAEA,IAAA,QAAQ,CAAC,KAAY,EAAA;AACnB,QAAA,IAAI,KAAK,MAAM,IAAI,CAAC,MAAM,EAAE,GAAG,MAAM,GAAG,OAAO,CAAC;YAAE;AAElD,QAAA,MAAM,GAAG,GACP,OAAO,QAAQ,KAAK;AAClB,cAAG;cACD,SAAS;AACf,QAAA,MAAM,mBAAmB,GAAG,GAAG,EAAE,mBAAmB;;;QAIpD,IAAI,CAAC,mBAAmB,IAAI,IAAI,CAAC,oBAAoB,EAAE,EAAE;YACvD,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,KAAK,MAAM,CAAC;YACjC;QACF;AAEA,QAAA,mBAAmB,CAAC,IAAI,CAAC,GAAG,EAAE,MAAK;YACjC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,KAAK,MAAM,CAAC;AACjC,YAAA,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;AACxB,QAAA,CAAC,CAAC;IACJ;IAEQ,oBAAoB,GAAA;AAC1B,QAAA,QACE,OAAO,MAAM,KAAK,WAAW;YAC7B,MAAM,CAAC,UAAU,CAAC,kCAAkC,CAAC,CAAC,OAAO;IAEjE;IAEQ,mBAAmB,GAAA;QACzB,IAAI,OAAO,MAAM,KAAK,WAAW;AAAE,YAAA,OAAO,OAAO;;QAGjD,MAAM,MAAM,GAAG,YAAY,CAAC,OAAO,CAAC,WAAW,CAAiB;AAChE,QAAA,IAAI,MAAM,KAAK,MAAM,IAAI,MAAM,KAAK,OAAO;AAAE,YAAA,OAAO,MAAM;;AAG1D,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE,WAAW;QACvC,IAAI,MAAM,KAAK,MAAM;AAAE,YAAA,OAAO,MAAM;QACpC,IAAI,MAAM,KAAK,OAAO;AAAE,YAAA,OAAO,OAAO;;AAGtC,QAAA,OAAO,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAC;AACvD,cAAE;cACA,OAAO;IACb;AAEQ,IAAA,UAAU,CAAC,KAAY,EAAA;QAC7B,IAAI,OAAO,QAAQ,KAAK,WAAW;YAAE;AAErC,QAAA,MAAM,IAAI,GAAG,QAAQ,CAAC,eAAe;QACrC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE,KAAK,KAAK,MAAM,CAAC;QAC/C,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,KAAK,OAAO,CAAC;AAEjD,QAAA,YAAY,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,CAAC;IAC1C;wGAtEW,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA;AAAZ,IAAA,OAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,YAAY,cADC,MAAM,EAAA,CAAA;;4FACnB,YAAY,EAAA,UAAA,EAAA,CAAA;kBADxB,UAAU;mBAAC,EAAE,UAAU,EAAE,MAAM,EAAE;;;ACWlC;AAEA,IAAI,UAAU,GAAG,CAAC;MAoBL,YAAY,CAAA;AACd,IAAA,MAAM,GAAG,MAAM,CAAU,EAAE,6EAAC;;AAGpB,IAAA,MAAM,GAAG,IAAI,GAAG,EAAsB;IAEvD,OAAO,CAAC,OAAe,EAAE,IAAmB,EAAA;QAC1C,OAAO,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,OAAO,EAAE,IAAI,CAAC;IAC5C;IAEA,KAAK,CAAC,OAAe,EAAE,IAAmB,EAAA;AACxC,QAAA,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,CAAC;IACjE;IAEA,OAAO,CAAC,OAAe,EAAE,IAAmB,EAAA;QAC1C,OAAO,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,OAAO,EAAE,IAAI,CAAC;IAC5C;IAEA,IAAI,CAAC,OAAe,EAAE,IAAmB,EAAA;QACvC,OAAO,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,OAAO,EAAE,IAAI,CAAC;IACzC;AAEA,IAAA,IAAI,CAAC,OAAqB,EAAE,OAAe,EAAE,OAAqB,EAAE,EAAA;AAClE,QAAA,MAAM,EAAE,GAAG,CAAA,UAAA,EAAa,EAAE,UAAU,EAAE;AACtC,QAAA,MAAM,KAAK,GAAU;YACnB,EAAE;YACF,OAAO;YACP,OAAO;YACP,KAAK,EAAQ,IAAI,CAAC,KAAK;AACvB,YAAA,QAAQ,EAAK,IAAI,CAAC,QAAQ,IAAI,IAAI;AAClC,YAAA,WAAW,EAAE,IAAI,CAAC,WAAW,IAAI,IAAI;YACrC,MAAM,EAAO,IAAI,CAAC,MAAM;AACxB,YAAA,QAAQ,EAAK,IAAI,CAAC,QAAQ,IAAI,WAAW;SAC1C;AAED,QAAA,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,GAAG,IAAI,EAAE,KAAK,CAAC,CAAC;AAE5C,QAAA,IAAI,KAAK,CAAC,QAAQ,GAAG,CAAC,EAAE;YACtB,IAAI,CAAC,UAAU,CAAC,EAAE,EAAE,KAAK,CAAC,QAAQ,CAAC;QACrC;AAEA,QAAA,OAAO,EAAE;IACX;AAEA,IAAA,OAAO,CAAC,EAAU,EAAA;AAChB,QAAA,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC;QACnB,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;IAC3D;IAEA,UAAU,GAAA;AACR,QAAA,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;AAChD,QAAA,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE;AACnB,QAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC;IACrB;AAEA;;;AAGG;AACH,IAAA,KAAK,CAAC,EAAU,EAAA;QACd,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC;AACjC,QAAA,IAAI,CAAC,KAAK;YAAE;AACZ,QAAA,YAAY,CAAC,KAAK,CAAC,MAAM,CAAC;QAC1B,KAAK,CAAC,SAAS,IAAI,IAAI,CAAC,GAAG,EAAE,GAAG,KAAK,CAAC,SAAS;;AAE/C,QAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,GAAG,KAAK,EAAE,MAAM,EAAE,SAAqD,EAAE,CAAC;IAClG;;AAGA,IAAA,MAAM,CAAC,EAAU,EAAA;QACf,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC;AACjC,QAAA,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM;YAAE;AAC5B,QAAA,IAAI,CAAC,UAAU,CAAC,EAAE,EAAE,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;IACnD;;IAIQ,UAAU,CAAC,EAAU,EAAE,QAAgB,EAAA;AAC7C,QAAA,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC;QAC3D,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE,EAAE,CAAC;IAC7E;AAEQ,IAAA,UAAU,CAAC,EAAU,EAAA;QAC3B,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC;QACjC,IAAI,KAAK,EAAE,MAAM;AAAE,YAAA,YAAY,CAAC,KAAK,CAAC,MAAM,CAAC;AAC7C,QAAA,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC;IACxB;wGAtFW,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA;AAAZ,IAAA,OAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,YAAY,cADC,MAAM,EAAA,CAAA;;4FACnB,YAAY,EAAA,UAAA,EAAA,CAAA;kBADxB,UAAU;mBAAC,EAAE,UAAU,EAAE,MAAM,EAAE;;;AC9ClC;;;;;;;;;;;;;AAaG;MAKU,oBAAoB,CAAA;AACd,IAAA,EAAE,GAAG,MAAM,EAAC,UAAuB,EAAC;AAC7C,IAAA,QAAQ;IAEhB,QAAQ,GAAA;QACN,IAAI,CAAC,QAAQ,GAAG,IAAI,oBAAoB,CACtC,CAAC,OAAO,KAAI;AACV,YAAA,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;AACxB,gBAAA,IAAI,KAAK,CAAC,cAAc,EAAE;oBACxB,qBAAqB,CAAC,MAAK;wBACxB,KAAK,CAAC,MAAsB,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC;AAC3D,oBAAA,CAAC,CAAC;oBACF,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC;gBACxC;AACF,YAAA,CAAC,CAAC;AACJ,QAAA,CAAC,EACD,EAAE,SAAS,EAAE,GAAG,EAAE,CACnB;QAED,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;IAC9C;IAEA,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,QAAQ,EAAE,UAAU,EAAE;IAC7B;wGAxBW,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAApB,oBAAoB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,eAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;4FAApB,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAJhC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,eAAe;AACzB,oBAAA,UAAU,EAAE,IAAI;AACjB,iBAAA;;;ACzBD;;;;;AAKG;AAEH;;ACPA;;AAEG;;;;"}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@styloviz/core",
+  "version": "0.1.1",
+  "description": "StyloViz UI Kit — core utilities, services, directives and design tokens shared by every component.",
+  "keywords": [
+    "angular",
+    "tailwind",
+    "ui-kit",
+    "dashboard",
+    "styloviz"
+  ],
+  "license": "MIT",
+  "author": "sazzad-bs23",
+  "homepage": "https://styloviz.dev",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rhossain/angular-tailwind-dashboard-components.git",
+    "directory": "projects/core"
+  },
+  "bugs": {
+    "url": "https://github.com/rhossain/angular-tailwind-dashboard-components/issues"
+  },
+  "peerDependencies": {
+    "@angular/common": ">=21.0.0",
+    "@angular/core": ">=21.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/styloviz-core.mjs",
+  "typings": "types/styloviz-core.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/styloviz-core.d.ts",
+      "default": "./fesm2022/styloviz-core.mjs"
+    }
+  },
+  "type": "module",
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

package/types/styloviz-core.d.ts

@@ -0,0 +1,161 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, EnvironmentProviders, OnInit, OnDestroy } from '@angular/core';
+
+interface StyloVizConfig {
+    /**
+     * License key — required for premium components.
+     * Obtain from https://styloviz.dev/license after purchase.
+     */
+    readonly licenseKey?: string;
+    /**
+     * Default color scheme applied on app start.
+     * Defaults to 'system' (reads OS preference).
+     */
+    readonly colorScheme?: 'light' | 'dark' | 'system';
+}
+declare const STYLOVIZ_CONFIG: InjectionToken<StyloVizConfig>;
+/**
+ * Register StyloViz in your root app config.
+ *
+ * @example
+ * // app.config.ts
+ * import { provideStylviz } from '@styloviz/core';
+ *
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideStylviz({ licenseKey: 'SVZ-XXXX-XXXX-XXXX' })
+ *   ]
+ * };
+ */
+declare function provideStylviz(config?: StyloVizConfig): EnvironmentProviders;
+
+type Theme = 'light' | 'dark';
+/**
+ * ThemeService — Dark/Light mode manager for StyloViz components.
+ *
+ * Priority order on init: localStorage → provideStylviz colorScheme → OS preference → light.
+ *
+ * Usage:
+ *   const theme = inject(ThemeService);
+ *   theme.toggleTheme();
+ *   theme.isDark();   // signal
+ */
+declare class ThemeService {
+    private readonly config;
+    readonly isDark: i0.WritableSignal<boolean>;
+    constructor();
+    toggleTheme(): void;
+    setTheme(theme: Theme): void;
+    private prefersReducedMotion;
+    private resolveInitialTheme;
+    private applyTheme;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ThemeService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ThemeService>;
+}
+
+type ToastVariant = 'success' | 'error' | 'warning' | 'info';
+type ToastPosition = 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center';
+interface ToastAction {
+    readonly label: string;
+    readonly callback: () => void;
+}
+interface Toast {
+    readonly id: string;
+    readonly variant: ToastVariant;
+    readonly title?: string;
+    readonly message: string;
+    readonly duration: number;
+    readonly dismissible: boolean;
+    readonly action?: ToastAction;
+    readonly position: ToastPosition;
+}
+interface ToastOptions {
+    readonly title?: string;
+    readonly duration?: number;
+    readonly dismissible?: boolean;
+    readonly action?: ToastAction;
+    readonly position?: ToastPosition;
+}
+declare class ToastService {
+    readonly toasts: i0.WritableSignal<Toast[]>;
+    /** Active auto-dismiss timers keyed by toast id (enables pause/resume). */
+    private readonly timers;
+    success(message: string, opts?: ToastOptions): string;
+    error(message: string, opts?: ToastOptions): string;
+    warning(message: string, opts?: ToastOptions): string;
+    info(message: string, opts?: ToastOptions): string;
+    show(variant: ToastVariant, message: string, opts?: ToastOptions): string;
+    dismiss(id: string): void;
+    dismissAll(): void;
+    /**
+     * Pause a toast's auto-dismiss countdown (e.g. while the pointer hovers the
+     * stack), preserving the time that was left. No-op for persistent toasts.
+     */
+    pause(id: string): void;
+    /** Resume a previously paused auto-dismiss countdown with its remaining time. */
+    resume(id: string): void;
+    private startTimer;
+    private clearTimer;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ToastService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ToastService>;
+}
+
+/**
+ * SvChartAnimDirective — Viewport-aware chart animation trigger.
+ *
+ * Attach `svChartAnim` to the root wrapper of any StyloViz chart.
+ * Uses IntersectionObserver to add `.sv-animate` once the chart
+ * enters the viewport (threshold 10%), triggering CSS bar-grow animations.
+ *
+ * @example
+ * ```html
+ * <div svChartAnim class="flex flex-col gap-3">
+ *   <!-- chart content -->
+ * </div>
+ * ```
+ */
+declare class SvChartAnimDirective implements OnInit, OnDestroy {
+    private readonly el;
+    private observer?;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SvChartAnimDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SvChartAnimDirective, "[svChartAnim]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Navigation models — shared types for sidebar and topbar components.
+ */
+/** A single leaf item inside a child-navigation group. */
+interface NavChild {
+    readonly id: string;
+    readonly label: string;
+}
+/** A named group of leaf items used for sidebar sub-navigation. */
+interface NavChildGroup {
+    readonly label: string;
+    readonly items: NavChild[];
+}
+interface MenuItem {
+    /** Display label shown in the sidebar */
+    readonly label: string;
+    /** Angular router path (e.g., '/analytics') */
+    readonly route: string;
+    /** SVG icon path (`d` attribute) */
+    readonly icon: string;
+    /** Optional badge text shown next to the label (e.g. "New", "3") */
+    readonly badge?: string;
+    /** Badge color variant */
+    readonly badgeColor?: 'primary' | 'accent' | 'warning' | 'danger';
+    /** Optional sub-navigation groups rendered below this item when active */
+    readonly childGroups?: NavChildGroup[];
+}
+interface MenuGroup {
+    /** Group heading displayed above the menu items */
+    readonly groupLabel: string;
+    /** Menu items within this group */
+    readonly items: MenuItem[];
+}
+
+export { STYLOVIZ_CONFIG, SvChartAnimDirective, ThemeService, ToastService, provideStylviz };
+export type { MenuGroup, MenuItem, NavChild, NavChildGroup, StyloVizConfig, Theme, Toast, ToastAction, ToastOptions, ToastPosition, ToastVariant };