@ngstato/angular 0.1.2 → 0.1.3

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "src/index.ts"
+  },
+  "dest": "dist"
+}

package/package.json

@@ -1,36 +1,25 @@
 {
   "name": "@ngstato/angular",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "private": false,
-  "description": "Stato — Angular adapter with native Signals",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
-    }
-  },
+  "description": "ngStato — Angular adapter with native Signals",
   "scripts": {
-    "build": "tsup",
-    "test": "vitest run",
-    "dev": "tsup --watch"
+    "build": "ng-packagr -p ng-package.json",
+    "test":  "vitest run",
+    "dev":   "ng-packagr -p ng-package.json --watch"
   },
   "peerDependencies": {
+    "@angular/core":   ">=17.0.0",
     "@angular/common": ">=17.0.0",
-    "@angular/core": ">=17.0.0"
-  },
-  "dependencies": {
-    "@ngstato/angular": "^0.1.2",
-    "@ngstato/core": "^0.1.2"
+    "@ngstato/core":   "^0.1.2"
   },
   "devDependencies": {
-    "@angular/common": "^18.2.14",
-    "@angular/core": "^17.0.0",
-    "tsup": "^8.0.0",
-    "typescript": "^5.4.0",
-    "vitest": "^1.6.0"
+    "ng-packagr":            "^18.0.0",
+    "@angular/compiler-cli": "^18.0.0",
+    "@angular/compiler":     "^18.0.0",
+    "@angular/common":       "^18.0.0",
+    "typescript":            "~5.5.0",
+    "tsup":                  "^8.0.0",
+    "vitest":                "^1.6.0"
   }
 }

package/dist/index.d.mts

@@ -1,50 +0,0 @@
-import * as _angular_core from '@angular/core';
-import { Type, OnInit, OnDestroy } from '@angular/core';
-import { StatoConfig, StatoStoreConfig, ActionLog } from '@ngstato/core';
-
-declare function injectStore<T>(store: Type<T>): T;
-
-interface StatoAngularConfig {
-    http?: StatoConfig;
-    devtools?: boolean;
-}
-declare function provideStato(config?: StatoAngularConfig): _angular_core.EnvironmentProviders;
-
-declare function createAngularStore<S extends object>(config: S & StatoStoreConfig<S>): any;
-
-declare class StatoDevToolsComponent implements OnInit, OnDestroy {
-    private config;
-    private unsub?;
-    isOpen: _angular_core.WritableSignal<boolean>;
-    isMinimized: _angular_core.WritableSignal<boolean>;
-    activeTab: _angular_core.WritableSignal<"actions" | "state">;
-    logs: _angular_core.WritableSignal<ActionLog[]>;
-    selectedLog: _angular_core.WritableSignal<ActionLog | null>;
-    posX: _angular_core.WritableSignal<number>;
-    posY: _angular_core.WritableSignal<number>;
-    panelWidth: _angular_core.WritableSignal<number>;
-    panelHeight: _angular_core.WritableSignal<number>;
-    private isDragging;
-    private isResizing;
-    private dragOffsetX;
-    private dragOffsetY;
-    private startW;
-    private startH;
-    private startX;
-    private startY;
-    private boundMouseMove;
-    private boundMouseUp;
-    ngOnInit(): void;
-    ngOnDestroy(): void;
-    toggle(): void;
-    toggleMinimize(): void;
-    clear(): void;
-    selectLog(log: ActionLog): void;
-    formatTime(iso: string): string;
-    onDragStart(e: MouseEvent): void;
-    onResizeStart(e: MouseEvent): void;
-    onMouseMove(e: MouseEvent): void;
-    onMouseUp(): void;
-}
-
-export { type StatoAngularConfig, StatoDevToolsComponent, createAngularStore, injectStore, provideStato };

package/dist/index.js

@@ -1,542 +0,0 @@
-'use strict';
-
-var core = require('@angular/core');
-var core$1 = require('@ngstato/core');
-var common = require('@angular/common');
-
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-function injectStore(store) {
-  return core.inject(store);
-}
-__name(injectStore, "injectStore");
-var STATO_CONFIG = new core.InjectionToken("STATO_CONFIG");
-function provideStato(config = {}) {
-  if (config.http) {
-    core$1.configureHttp(config.http);
-  }
-  if (config.devtools && core.isDevMode()) {
-    console.info("%c[Stato] \u{1F6E0} DevTools activ\xE9s", "background:#1e40af;color:white;padding:4px 8px;border-radius:4px;font-weight:bold");
-    core$1.devTools.open();
-  }
-  return core.makeEnvironmentProviders([
-    {
-      provide: STATO_CONFIG,
-      useValue: config
-    }
-  ]);
-}
-__name(provideStato, "provideStato");
-function _ts_decorate(decorators, target, key, desc) {
-  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-  return c > 3 && r && Object.defineProperty(target, key, r), r;
-}
-__name(_ts_decorate, "_ts_decorate");
-function createAngularStore(config) {
-  const coreStore = core$1.createStore(config);
-  const signals = {};
-  const initialState = coreStore.getState();
-  for (const key of Object.keys(initialState)) {
-    signals[key] = core.signal(initialState[key]);
-  }
-  coreStore.subscribe((newState) => {
-    for (const key of Object.keys(newState)) {
-      if (signals[key]) {
-        signals[key].set(newState[key]);
-      }
-    }
-  });
-  const angularStore = {
-    __store__: coreStore.__store__
-  };
-  for (const key of Object.keys(initialState)) {
-    Object.defineProperty(angularStore, key, {
-      get: /* @__PURE__ */ __name(() => signals[key], "get"),
-      enumerable: true,
-      configurable: true
-    });
-  }
-  const { computed: computedConfig } = config;
-  if (computedConfig) {
-    for (const key of Object.keys(computedConfig)) {
-      const computedSignal = core.computed(() => coreStore[key]);
-      Object.defineProperty(angularStore, key, {
-        get: /* @__PURE__ */ __name(() => computedSignal, "get"),
-        enumerable: true,
-        configurable: true
-      });
-    }
-  }
-  const { actions } = config;
-  if (actions) {
-    for (const name of Object.keys(actions)) {
-      angularStore[name] = (...args) => coreStore.__store__.dispatch(name, ...args);
-    }
-  }
-  const { hooks } = config;
-  if (hooks?.onInit) {
-    hooks.onInit(angularStore);
-  }
-  angularStore.__destroy__ = () => {
-    coreStore.__store__.destroy(angularStore);
-  };
-  return angularStore;
-}
-__name(createAngularStore, "createAngularStore");
-var StatoStoreBase = class {
-  static {
-    __name(this, "StatoStoreBase");
-  }
-  storeInstance;
-  initStore(config) {
-    this.storeInstance = createAngularStore(config);
-    for (const key of Object.keys(this.storeInstance)) {
-      if (key !== "__store__" && key !== "__destroy__") {
-        Object.defineProperty(this, key, {
-          get: /* @__PURE__ */ __name(() => this.storeInstance[key], "get"),
-          enumerable: true,
-          configurable: true
-        });
-      }
-    }
-    const { actions } = config;
-    if (actions) {
-      for (const name of Object.keys(actions)) {
-        Object.defineProperty(this, name, {
-          get: /* @__PURE__ */ __name(() => this.storeInstance[name], "get"),
-          enumerable: true,
-          configurable: true
-        });
-      }
-    }
-  }
-  ngOnDestroy() {
-    this.storeInstance?.__destroy__();
-  }
-};
-StatoStoreBase = _ts_decorate([
-  core.Injectable()
-], StatoStoreBase);
-function _ts_decorate2(decorators, target, key, desc) {
-  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-  return c > 3 && r && Object.defineProperty(target, key, r), r;
-}
-__name(_ts_decorate2, "_ts_decorate");
-exports.StatoDevToolsComponent = class StatoDevToolsComponent {
-  static {
-    __name(this, "StatoDevToolsComponent");
-  }
-  config = core.inject(STATO_CONFIG, {
-    optional: true
-  });
-  unsub;
-  // State UI
-  isOpen = core.signal(false);
-  isMinimized = core.signal(false);
-  activeTab = core.signal("actions");
-  logs = core.signal([]);
-  selectedLog = core.signal(null);
-  // Position et taille
-  posX = core.signal(24);
-  posY = core.signal(window.innerHeight - 500);
-  panelWidth = core.signal(420);
-  panelHeight = core.signal(460);
-  // Drag state
-  isDragging = false;
-  isResizing = false;
-  dragOffsetX = 0;
-  dragOffsetY = 0;
-  startW = 0;
-  startH = 0;
-  startX = 0;
-  startY = 0;
-  // Bound listeners
-  boundMouseMove = this.onMouseMove.bind(this);
-  boundMouseUp = this.onMouseUp.bind(this);
-  ngOnInit() {
-    this.unsub = core$1.devTools.subscribe((state) => {
-      this.logs.set(state.logs);
-      this.isOpen.set(state.isOpen);
-    });
-    document.addEventListener("mousemove", this.boundMouseMove);
-    document.addEventListener("mouseup", this.boundMouseUp);
-  }
-  ngOnDestroy() {
-    this.unsub?.();
-    document.removeEventListener("mousemove", this.boundMouseMove);
-    document.removeEventListener("mouseup", this.boundMouseUp);
-  }
-  // ── Toggle ─────────────────────────────────────────
-  toggle() {
-    core$1.devTools.toggle();
-  }
-  toggleMinimize() {
-    this.isMinimized.update((v) => !v);
-  }
-  clear() {
-    core$1.devTools.clear();
-    this.selectedLog.set(null);
-  }
-  selectLog(log) {
-    this.selectedLog.set(this.selectedLog()?.id === log.id ? null : log);
-  }
-  formatTime(iso) {
-    return new Date(iso).toTimeString().slice(0, 8);
-  }
-  // ── Drag ───────────────────────────────────────────
-  onDragStart(e) {
-    if (e.target.classList.contains("btn-icon")) return;
-    this.isDragging = true;
-    this.dragOffsetX = e.clientX - this.posX();
-    this.dragOffsetY = e.clientY - this.posY();
-    e.preventDefault();
-  }
-  // ── Resize ─────────────────────────────────────────
-  onResizeStart(e) {
-    this.isResizing = true;
-    this.startW = this.panelWidth();
-    this.startH = this.panelHeight();
-    this.startX = e.clientX;
-    this.startY = e.clientY;
-    e.preventDefault();
-    e.stopPropagation();
-  }
-  // ── Mouse Move ─────────────────────────────────────
-  onMouseMove(e) {
-    if (this.isDragging) {
-      this.posX.set(Math.max(0, e.clientX - this.dragOffsetX));
-      this.posY.set(Math.max(0, e.clientY - this.dragOffsetY));
-    }
-    if (this.isResizing) {
-      const newW = Math.max(300, this.startW + e.clientX - this.startX);
-      const newH = Math.max(200, this.startH + e.clientY - this.startY);
-      this.panelWidth.set(newW);
-      this.panelHeight.set(newH);
-    }
-  }
-  // ── Mouse Up ───────────────────────────────────────
-  onMouseUp() {
-    this.isDragging = false;
-    this.isResizing = false;
-  }
-};
-exports.StatoDevToolsComponent = _ts_decorate2([
-  core.Component({
-    selector: "ngstato-devtools",
-    standalone: true,
-    imports: [
-      common.CommonModule
-    ],
-    template: `
-    <!-- Bouton flottant -->
-    @if (!isOpen()) {
-      <button class="devtools-fab" (click)="toggle()">
-        \u{1F6E0} Stato
-      </button>
-    }
-
-    <!-- Panel -->
-    @if (isOpen()) {
-      <div
-        class="devtools-panel"
-        [class.devtools-panel--minimized]="isMinimized()"
-        [style.left.px]="posX()"
-        [style.top.px]="posY()"
-        [style.width.px]="isMinimized() ? 200 : panelWidth()"
-        [style.height]="isMinimized() ? 'auto' : panelHeight() + 'px'"
-      >
-
-        <!-- Header \u2014 draggable -->
-        <div
-          class="devtools-header"
-          (mousedown)="onDragStart($event)"
-        >
-          <span class="devtools-title">\u{1F6E0} Stato</span>
-          <div class="devtools-header-actions">
-            @if (!isMinimized()) {
-              <button class="btn-icon" (click)="clear()" title="Vider">\u{1F5D1}</button>
-            }
-            <button class="btn-icon" (click)="toggleMinimize()" title="Minimiser/Agrandir">
-              {{ isMinimized() ? '\u25B2' : '\u25BC' }}
-            </button>
-            <button class="btn-icon" (click)="toggle()" title="Fermer">\u2715</button>
-          </div>
-        </div>
-
-        <!-- Resize handle \u2014 coin bas droite -->
-        @if (!isMinimized()) {
-          <div
-            class="devtools-resize"
-            (mousedown)="onResizeStart($event)"
-          >\u22BF</div>
-        }
-
-        @if (!isMinimized()) {
-
-          <!-- Tabs -->
-          <div class="devtools-tabs">
-            <button
-              class="tab"
-              [class.tab--active]="activeTab() === 'actions'"
-              (click)="activeTab.set('actions')"
-            >
-              Actions ({{ logs().length }})
-            </button>
-            <button
-              class="tab"
-              [class.tab--active]="activeTab() === 'state'"
-              (click)="activeTab.set('state')"
-            >
-              State
-            </button>
-          </div>
-
-          <!-- Tab Actions -->
-          @if (activeTab() === 'actions') {
-            <div class="devtools-content">
-              @if (!logs().length) {
-                <div class="devtools-empty">Aucune action pour l'instant</div>
-              }
-              @for (log of logs(); track log.id) {
-                <div
-                  class="log-item"
-                  [class.log-item--error]="log.status === 'error'"
-                  (click)="selectLog(log)"
-                >
-                  <div class="log-item__left">
-                    <span class="log-status">{{ log.status === 'success' ? '\u2713' : '\u2717' }}</span>
-                    <span class="log-name">{{ log.name }}</span>
-                  </div>
-                  <div class="log-item__right">
-                    @if (log.status === 'error') {
-                      <span class="log-error-badge">erreur</span>
-                    } @else {
-                      <span class="log-duration">{{ log.duration }}ms</span>
-                    }
-                    <span class="log-time">{{ formatTime(log.at) }}</span>
-                  </div>
-                </div>
-
-                @if (selectedLog()?.id === log.id) {
-                  <div class="log-detail">
-                    @if (log.error) {
-                      <div class="log-detail__error">{{ log.error }}</div>
-                    }
-                    <div class="log-detail__section">
-                      <span class="log-detail__label">Avant</span>
-                      <pre>{{ log.prevState | json }}</pre>
-                    </div>
-                    <div class="log-detail__section">
-                      <span class="log-detail__label">Apr\xE8s</span>
-                      <pre>{{ log.nextState | json }}</pre>
-                    </div>
-                  </div>
-                }
-              }
-            </div>
-          }
-
-          <!-- Tab State -->
-          @if (activeTab() === 'state') {
-            <div class="devtools-content">
-              @if (logs().length) {
-                <pre class="state-view">{{ logs()[0].nextState | json }}</pre>
-              } @else {
-                <div class="devtools-empty">Aucun state disponible</div>
-              }
-            </div>
-          }
-        }
-
-      </div>
-    }
-  `,
-    styles: [
-      `
-    .devtools-fab {
-      position:      fixed;
-      bottom:        1.5rem;
-      left:          1.5rem;
-      background:    #1e293b;
-      color:         white;
-      border:        none;
-      border-radius: 999px;
-      padding:       0.5rem 1rem;
-      font-size:     0.85rem;
-      font-weight:   600;
-      cursor:        pointer;
-      z-index:       9999;
-      box-shadow:    0 4px 12px rgba(0,0,0,0.3);
-      transition:    background 0.15s;
-    }
-    .devtools-fab:hover { background: #334155; }
-
-    .devtools-panel {
-      position:       fixed;
-      background:     #0f172a;
-      border-radius:  12px;
-      box-shadow:     0 8px 32px rgba(0,0,0,0.4);
-      z-index:        9999;
-      display:        flex;
-      flex-direction: column;
-      overflow:       hidden;
-      font-family:    'Courier New', monospace;
-      min-width:      200px;
-      min-height:     40px;
-    }
-
-    .devtools-panel--minimized {
-      border-radius: 8px;
-    }
-
-    .devtools-header {
-      display:         flex;
-      justify-content: space-between;
-      align-items:     center;
-      padding:         0.6rem 0.75rem;
-      background:      #1e293b;
-      border-bottom:   1px solid #334155;
-      cursor:          grab;
-      user-select:     none;
-    }
-    .devtools-header:active { cursor: grabbing; }
-
-    .devtools-title {
-      color:       #e2e8f0;
-      font-size:   0.82rem;
-      font-weight: 600;
-      font-family: system-ui;
-    }
-
-    .devtools-header-actions { display: flex; gap: 0.25rem; }
-
-    .btn-icon {
-      background:    transparent;
-      color:         #64748b;
-      border:        none;
-      cursor:        pointer;
-      font-size:     0.8rem;
-      padding:       0.15rem 0.35rem;
-      border-radius: 4px;
-      line-height:   1;
-    }
-    .btn-icon:hover { background: #334155; color: white; }
-
-    .devtools-resize {
-      position:  absolute;
-      bottom:    2px;
-      right:     4px;
-      color:     #334155;
-      font-size: 0.9rem;
-      cursor:    nwse-resize;
-      user-select: none;
-      line-height: 1;
-    }
-    .devtools-resize:hover { color: #64748b; }
-
-    .devtools-tabs {
-      display:       flex;
-      background:    #1e293b;
-      border-bottom: 1px solid #334155;
-    }
-    .tab {
-      padding:     0.4rem 0.75rem;
-      background:  transparent;
-      color:       #64748b;
-      border:      none;
-      cursor:      pointer;
-      font-size:   0.78rem;
-      font-family: system-ui;
-    }
-    .tab:hover    { color: #e2e8f0; }
-    .tab--active  { color: #3b82f6; border-bottom: 2px solid #3b82f6; }
-
-    .devtools-content {
-      overflow-y: auto;
-      flex:       1;
-      padding:    0.25rem 0;
-    }
-
-    .devtools-empty {
-      padding:     2rem;
-      text-align:  center;
-      color:       #475569;
-      font-size:   0.78rem;
-      font-family: system-ui;
-    }
-
-    .log-item {
-      display:         flex;
-      justify-content: space-between;
-      align-items:     center;
-      padding:         0.35rem 0.75rem;
-      cursor:          pointer;
-      border-bottom:   1px solid #1e293b;
-    }
-    .log-item:hover        { background: #1e293b; }
-    .log-item--error       { background: #1a0a0a; }
-
-    .log-item__left  { display: flex; align-items: center; gap: 0.4rem; overflow: hidden; }
-    .log-item__right { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }
-
-    .log-status  { font-size: 0.72rem; color: #22c55e; flex-shrink: 0; }
-    .log-item--error .log-status { color: #ef4444; }
-    .log-name    { color: #e2e8f0; font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-    .log-duration { color: #64748b; font-size: 0.7rem; }
-    .log-time    { color: #475569; font-size: 0.68rem; }
-
-    .log-error-badge {
-      background:    #7f1d1d;
-      color:         #fca5a5;
-      font-size:     0.68rem;
-      padding:       0.1rem 0.35rem;
-      border-radius: 4px;
-    }
-
-    .log-detail {
-      background:    #0a0f1a;
-      padding:       0.6rem 0.75rem;
-      border-left:   3px solid #3b82f6;
-      margin:        0 0.4rem 0.4rem;
-      border-radius: 0 4px 4px 0;
-    }
-    .log-detail__error   { color: #fca5a5; font-size: 0.72rem; margin-bottom: 0.4rem; }
-    .log-detail__section { margin-bottom: 0.4rem; }
-    .log-detail__label   {
-      color:         #64748b;
-      font-size:     0.68rem;
-      display:       block;
-      margin-bottom: 0.2rem;
-      font-family:   system-ui;
-    }
-    pre {
-      color:       #86efac;
-      font-size:   0.7rem;
-      margin:      0;
-      white-space: pre-wrap;
-      word-break:  break-all;
-      max-height:  140px;
-      overflow-y:  auto;
-    }
-    .state-view {
-      color:       #86efac;
-      font-size:   0.7rem;
-      padding:     0.75rem;
-      margin:      0;
-      white-space: pre-wrap;
-      word-break:  break-all;
-    }
-  `
-    ]
-  })
-], exports.StatoDevToolsComponent);
-
-exports.createAngularStore = createAngularStore;
-exports.injectStore = injectStore;
-exports.provideStato = provideStato;
-//# sourceMappingURL=index.js.map
-//# sourceMappingURL=index.js.map