@ngstato/angular 0.1.2 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/inject-store.ts","../src/provide-ngstato.ts","../src/create-angular-store.ts","../src/devtools.component.ts"],"names":["injectStore","store","inject","STATO_CONFIG","InjectionToken","provideStato","config","http","configureHttp","devtools","isDevMode","console","info","devTools","open","makeEnvironmentProviders","provide","useValue","createAngularStore","coreStore","createStore","signals","initialState","getState","key","Object","keys","signal","subscribe","newState","set","angularStore","__store__","defineProperty","get","enumerable","configurable","computed","computedConfig","computedSignal","actions","name","args","dispatch","hooks","onInit","__destroy__","destroy","StatoStoreBase","storeInstance","initStore","ngOnDestroy","StatoDevToolsComponent","optional","unsub","isOpen","isMinimized","activeTab","logs","selectedLog","posX","posY","window","innerHeight","panelWidth","panelHeight","isDragging","isResizing","dragOffsetX","dragOffsetY","startW","startH","startX","startY","boundMouseMove","onMouseMove","bind","boundMouseUp","onMouseUp","ngOnInit","state","document","addEventListener","removeEventListener","toggle","toggleMinimize","update","v","clear","selectLog","log","id","formatTime","iso","Date","toTimeString","slice","onDragStart","e","target","classList","contains","clientX","clientY","preventDefault","onResizeStart","stopPropagation","Math","max","newW","newH","selector","standalone","imports","CommonModule","template","styles"],"mappings":";;;;;;;;AAOO,SAASA,YAAeC,KAAAA,EAAc;AAC3C,EAAA,OAAOC,YAAOD,KAAAA,CAAAA;AAChB;AAFgBD,MAAAA,CAAAA,WAAAA,EAAAA,aAAAA,CAAAA;ACMT,IAAMG,YAAAA,GAAe,IAAIC,mBAAAA,CAAmC,cAAA,CAAA;AAE5D,SAASC,YAAAA,CAAaC,MAAAA,GAA6B,EAAC,EAAC;AAE1D,EAAA,IAAIA,OAAOC,IAAAA,EAAM;AACfC,IAAAA,oBAAAA,CAAcF,OAAOC,IAAI,CAAA;AAC3B,EAAA;AAKA,EAAA,IAAID,MAAAA,CAAOG,QAAAA,IAAYC,cAAAA,EAAAA,EAAa;AAClCC,IAAAA,OAAAA,CAAQC,IAAAA,CACN,2CACA,mFAAA,CAAA;AAEFC,IAAAA,eAAAA,CAASC,IAAAA,EAAI;AACf,EAAA;AAEA,EAAA,OAAOC,6BAAAA,CAAyB;AAC9B,IAAA;MACEC,OAAAA,EAAUb,YAAAA;MACVc,QAAAA,EAAUX;AACZ;AACD,GAAA,CAAA;AACH;AAvBgBD,MAAAA,CAAAA,YAAAA,EAAAA,cAAAA,CAAAA;;;;;;;;ACKT,SAASa,mBACdZ,MAAAA,EAA+B;AAG/B,EAAA,MAAMa,SAAAA,GAAYC,mBAAYd,MAAAA,CAAAA;AAG9B,EAAA,MAAMe,UAAqD,EAAC;AAC5D,EAAA,MAAMC,YAAAA,GAAeH,UAAUI,QAAAA,EAAQ;AAEvC,EAAA,KAAA,MAAWC,GAAAA,IAAOC,MAAAA,CAAOC,IAAAA,CAAKJ,YAAAA,CAAAA,EAAyB;AACrDD,IAAAA,OAAAA,CAAQG,GAAAA,CAAAA,GAAOG,WAAAA,CAAQL,YAAAA,CAAqBE,GAAAA,CAAI,CAAA;AAClD,EAAA;AAGAL,EAAAA,SAAAA,CAAUS,SAAAA,CAAU,CAACC,QAAAA,KAAAA;AACnB,IAAA,KAAA,MAAWL,GAAAA,IAAOC,MAAAA,CAAOC,IAAAA,CAAKG,QAAAA,CAAAA,EAAW;AACvC,MAAA,IAAIR,OAAAA,CAAQG,GAAAA,CAAAA,EAAM;AAChBH,QAAAA,OAAAA,CAAQG,GAAAA,CAAAA,CAAKM,GAAAA,CAAID,QAAAA,CAASL,GAAAA,CAAI,CAAA;AAChC,MAAA;AACF,IAAA;EACF,CAAA,CAAA;AAGA,EAAA,MAAMO,YAAAA,GAAoB;AACxBC,IAAAA,SAAAA,EAAWb,SAAAA,CAAUa;AACvB,GAAA;AAGA,EAAA,KAAA,MAAWR,GAAAA,IAAOC,MAAAA,CAAOC,IAAAA,CAAKJ,YAAAA,CAAAA,EAAyB;AACrDG,IAAAA,MAAAA,CAAOQ,cAAAA,CAAeF,cAAcP,GAAAA,EAAK;MACvCU,GAAAA,kBAAc,MAAA,CAAA,MAAMb,OAAAA,CAAQG,GAAAA,CAAAA,EAAd,KAAA,CAAA;MACdW,UAAAA,EAAc,IAAA;MACdC,YAAAA,EAAc;KAChB,CAAA;AACF,EAAA;AAGA,EAAA,MAAM,EAAEC,QAAAA,EAAUC,cAAAA,EAAc,GAAKhC,MAAAA;AACrC,EAAA,IAAIgC,cAAAA,EAAgB;AAClB,IAAA,KAAA,MAAWd,GAAAA,IAAOC,MAAAA,CAAOC,IAAAA,CAAKY,cAAAA,CAAAA,EAAiB;AAC7C,MAAA,MAAMC,cAAAA,GAAiBF,aAAAA,CAAS,MAAMlB,SAAAA,CAAUK,GAAAA,CAAI,CAAA;AACpDC,MAAAA,MAAAA,CAAOQ,cAAAA,CAAeF,cAAcP,GAAAA,EAAK;AACvCU,QAAAA,GAAAA,+BAAoBK,cAAAA,EAAN,KAAA,CAAA;QACdJ,UAAAA,EAAc,IAAA;QACdC,YAAAA,EAAc;OAChB,CAAA;AACF,IAAA;AACF,EAAA;AAGA,EAAA,MAAM,EAAEI,SAAO,GAAKlC,MAAAA;AACpB,EAAA,IAAIkC,OAAAA,EAAS;AACX,IAAA,KAAA,MAAWC,IAAAA,IAAQhB,MAAAA,CAAOC,IAAAA,CAAKc,OAAAA,CAAAA,EAAU;AACvCT,MAAAA,YAAAA,CAAaU,IAAAA,IAAQ,CAAA,GAAIC,IAAAA,KACvBvB,UAAUa,SAAAA,CAAUW,QAAAA,CAASF,IAAAA,EAAAA,GAASC,IAAAA,CAAAA;AAC1C,IAAA;AACF,EAAA;AAGA,EAAA,MAAM,EAAEE,OAAK,GAAKtC,MAAAA;AAClB,EAAA,IAAIsC,OAAOC,MAAAA,EAAQ;AACjBD,IAAAA,KAAAA,CAAMC,OAAOd,YAAAA,CAAAA;AACf,EAAA;AAGAA,EAAAA,YAAAA,CAAae,cAAc,MAAA;AACzB3B,IAAAA,SAAAA,CAAUa,SAAAA,CAAUe,QAAQhB,YAAAA,CAAAA;AAC9B,EAAA,CAAA;AAEA,EAAA,OAAOA,YAAAA;AACT;AAvEgBb,MAAAA,CAAAA,kBAAAA,EAAAA,oBAAAA,CAAAA;AA8ET,IAAM8B,iBAAN,MAAMA;AAAAA,EAAAA;;;AACXC,EAAAA,aAAAA;AAEAC,EAAAA,SAAAA,CAA4B5C,MAAAA,EAAiC;AAC3D,IAAA,IAAA,CAAK2C,aAAAA,GAAgB/B,mBAAmBZ,MAAAA,CAAAA;AAGxC,IAAA,KAAA,MAAWkB,GAAAA,IAAOC,MAAAA,CAAOC,IAAAA,CAAK,IAAA,CAAKuB,aAAa,CAAA,EAAG;AACjD,MAAA,IAAIzB,GAAAA,KAAQ,WAAA,IAAeA,GAAAA,KAAQ,aAAA,EAAe;AAChDC,QAAAA,MAAAA,CAAOQ,cAAAA,CAAe,MAAMT,GAAAA,EAAK;AAC/BU,UAAAA,GAAAA,kBAAc,MAAA,CAAA,MAAM,IAAA,CAAKe,aAAAA,CAAczB,GAAAA,CAAAA,EAAzB,KAAA,CAAA;UACdW,UAAAA,EAAc,IAAA;UACdC,YAAAA,EAAc;SAChB,CAAA;AACF,MAAA;AACF,IAAA;AAGA,IAAA,MAAM,EAAEI,SAAO,GAAKlC,MAAAA;AACpB,IAAA,IAAIkC,OAAAA,EAAS;AACb,MAAA,KAAA,MAAWC,IAAAA,IAAQhB,MAAAA,CAAOC,IAAAA,CAAKc,OAAAA,CAAAA,EAAU;AACrCf,QAAAA,MAAAA,CAAOQ,cAAAA,CAAe,MAAMQ,IAAAA,EAAM;AAClCP,UAAAA,GAAAA,kBAAc,MAAA,CAAA,MAAM,IAAA,CAAKe,aAAAA,CAAcR,IAAAA,CAAAA,EAAzB,KAAA,CAAA;UACdN,UAAAA,EAAc,IAAA;UACdC,YAAAA,EAAc;SACd,CAAA;AACJ,MAAA;AACA,IAAA;AACF,EAAA;EAEAe,WAAAA,GAAc;AACZ,IAAA,IAAA,CAAKF,eAAeH,WAAAA,EAAAA;AACtB,EAAA;AACF,CAAA;;;;;;;;;;;AC4LaM,iCAAN,4BAAA,CAAMA;AAAAA,EAAAA;;;AAEH9C,EAAAA,MAAAA,GAAUJ,YAAOC,YAAAA,EAAc;IAAEkD,QAAAA,EAAU;GAAK,CAAA;AAChDC,EAAAA,KAAAA;;AAGRC,EAAAA,MAAAA,GAAc5B,YAAO,KAAA,CAAA;AACrB6B,EAAAA,WAAAA,GAAc7B,YAAO,KAAA,CAAA;AACrB8B,EAAAA,SAAAA,GAAc9B,YAA4B,SAAA,CAAA;EAC1C+B,IAAAA,GAAc/B,WAAAA,CAAoB,EAAE,CAAA;AACpCgC,EAAAA,WAAAA,GAAchC,YAAyB,IAAA,CAAA;;AAGvCiC,EAAAA,IAAAA,GAAcjC,YAAO,EAAA,CAAA;EACrBkC,IAAAA,GAAclC,WAAAA,CAAOmC,MAAAA,CAAOC,WAAAA,GAAc,GAAA,CAAA;AAC1CC,EAAAA,UAAAA,GAAcrC,YAAO,GAAA,CAAA;AACrBsC,EAAAA,WAAAA,GAActC,YAAO,GAAA,CAAA;;EAGbuC,UAAAA,GAAc,KAAA;EACdC,UAAAA,GAAc,KAAA;EACdC,WAAAA,GAAc,CAAA;EACdC,WAAAA,GAAc,CAAA;EACdC,MAAAA,GAAc,CAAA;EACdC,MAAAA,GAAc,CAAA;EACdC,MAAAA,GAAc,CAAA;EACdC,MAAAA,GAAc,CAAA;;EAGdC,cAAAA,GAAiB,IAAA,CAAKC,WAAAA,CAAYC,IAAAA,CAAK,IAAI,CAAA;EAC3CC,YAAAA,GAAiB,IAAA,CAAKC,SAAAA,CAAUF,IAAAA,CAAK,IAAI,CAAA;EAEjDG,QAAAA,GAAW;AACT,IAAA,IAAA,CAAKzB,KAAAA,GAAQzC,eAAAA,CAASe,SAAAA,CAAU,CAACoD,KAAAA,KAAAA;AAC/B,MAAA,IAAA,CAAKtB,IAAAA,CAAK5B,GAAAA,CAAIkD,KAAAA,CAAMtB,IAAI,CAAA;AACxB,MAAA,IAAA,CAAKH,MAAAA,CAAOzB,GAAAA,CAAIkD,KAAAA,CAAMzB,MAAM,CAAA;IAC9B,CAAA,CAAA;AAEA0B,IAAAA,QAAAA,CAASC,gBAAAA,CAAiB,WAAA,EAAa,IAAA,CAAKR,cAAc,CAAA;AAC1DO,IAAAA,QAAAA,CAASC,gBAAAA,CAAiB,SAAA,EAAa,IAAA,CAAKL,YAAY,CAAA;AAC1D,EAAA;EAEA1B,WAAAA,GAAc;AACZ,IAAA,IAAA,CAAKG,KAAAA,IAAK;AACV2B,IAAAA,QAAAA,CAASE,mBAAAA,CAAoB,WAAA,EAAa,IAAA,CAAKT,cAAc,CAAA;AAC7DO,IAAAA,QAAAA,CAASE,mBAAAA,CAAoB,SAAA,EAAa,IAAA,CAAKN,YAAY,CAAA;AAC7D,EAAA;;EAGAO,MAAAA,GAAiB;AAAEvE,IAAAA,gBAASuE,MAAAA,EAAM;AAAG,EAAA;EACrCC,cAAAA,GAAiB;AAAE,IAAA,IAAA,CAAK7B,WAAAA,CAAY8B,MAAAA,CAAOC,CAAAA,CAAAA,KAAK,CAACA,CAAAA,CAAAA;AAAG,EAAA;EACpDC,KAAAA,GAAiB;AAAE3E,IAAAA,gBAAS2E,KAAAA,EAAK;AAAI,IAAA,IAAA,CAAK7B,WAAAA,CAAY7B,IAAI,IAAA,CAAA;AAAM,EAAA;AAChE2D,EAAAA,SAAAA,CAAUC,GAAAA,EAAgB;AACxB,IAAA,IAAA,CAAK/B,WAAAA,CAAY7B,IAAI,IAAA,CAAK6B,WAAAA,IAAegC,EAAAA,KAAOD,GAAAA,CAAIC,EAAAA,GAAK,IAAA,GAAOD,GAAAA,CAAAA;AAClE,EAAA;AACAE,EAAAA,UAAAA,CAAWC,GAAAA,EAAqB;AAC9B,IAAA,OAAO,IAAIC,KAAKD,GAAAA,CAAAA,CAAKE,cAAY,CAAGC,KAAAA,CAAM,GAAG,CAAA,CAAA;AAC/C,EAAA;;AAGAC,EAAAA,WAAAA,CAAYC,CAAAA,EAAe;AACzB,IAAA,IAAKA,CAAAA,CAAEC,MAAAA,CAAuBC,SAAAA,CAAUC,QAAAA,CAAS,UAAA,CAAA,EAAa;AAC9D,IAAA,IAAA,CAAKnC,UAAAA,GAAc,IAAA;AACnB,IAAA,IAAA,CAAKE,WAAAA,GAAc8B,CAAAA,CAAEI,OAAAA,GAAU,IAAA,CAAK1C,IAAAA,EAAI;AACxC,IAAA,IAAA,CAAKS,WAAAA,GAAc6B,CAAAA,CAAEK,OAAAA,GAAU,IAAA,CAAK1C,IAAAA,EAAI;AACxCqC,IAAAA,CAAAA,CAAEM,cAAAA,EAAc;AAClB,EAAA;;AAGAC,EAAAA,aAAAA,CAAcP,CAAAA,EAAe;AAC3B,IAAA,IAAA,CAAK/B,UAAAA,GAAa,IAAA;AAClB,IAAA,IAAA,CAAKG,MAAAA,GAAa,KAAKN,UAAAA,EAAU;AACjC,IAAA,IAAA,CAAKO,MAAAA,GAAa,KAAKN,WAAAA,EAAW;AAClC,IAAA,IAAA,CAAKO,SAAa0B,CAAAA,CAAEI,OAAAA;AACpB,IAAA,IAAA,CAAK7B,SAAayB,CAAAA,CAAEK,OAAAA;AACpBL,IAAAA,CAAAA,CAAEM,cAAAA,EAAc;AAChBN,IAAAA,CAAAA,CAAEQ,eAAAA,EAAe;AACnB,EAAA;;AAGA/B,EAAAA,WAAAA,CAAYuB,CAAAA,EAAe;AACzB,IAAA,IAAI,KAAKhC,UAAAA,EAAY;AACnB,MAAA,IAAA,CAAKN,IAAAA,CAAK9B,IAAI6E,IAAAA,CAAKC,GAAAA,CAAI,GAAGV,CAAAA,CAAEI,OAAAA,GAAU,IAAA,CAAKlC,WAAW,CAAA,CAAA;AACtD,MAAA,IAAA,CAAKP,IAAAA,CAAK/B,IAAI6E,IAAAA,CAAKC,GAAAA,CAAI,GAAGV,CAAAA,CAAEK,OAAAA,GAAU,IAAA,CAAKlC,WAAW,CAAA,CAAA;AACxD,IAAA;AACA,IAAA,IAAI,KAAKF,UAAAA,EAAY;AACnB,MAAA,MAAM0C,IAAAA,GAAOF,KAAKC,GAAAA,CAAI,GAAA,EAAK,KAAKtC,MAAAA,GAAS4B,CAAAA,CAAEI,OAAAA,GAAU,IAAA,CAAK9B,MAAM,CAAA;AAChE,MAAA,MAAMsC,IAAAA,GAAOH,KAAKC,GAAAA,CAAI,GAAA,EAAK,KAAKrC,MAAAA,GAAS2B,CAAAA,CAAEK,OAAAA,GAAU,IAAA,CAAK9B,MAAM,CAAA;AAChE,MAAA,IAAA,CAAKT,UAAAA,CAAWlC,IAAI+E,IAAAA,CAAAA;AACpB,MAAA,IAAA,CAAK5C,WAAAA,CAAYnC,IAAIgF,IAAAA,CAAAA;AACvB,IAAA;AACF,EAAA;;EAGAhC,SAAAA,GAAY;AACV,IAAA,IAAA,CAAKZ,UAAAA,GAAa,KAAA;AAClB,IAAA,IAAA,CAAKC,UAAAA,GAAa,KAAA;AACpB,EAAA;AACF;;;IAjZE4C,QAAAA,EAAY,kBAAA;IACZC,UAAAA,EAAY,IAAA;IACZC,OAAAA,EAAY;AAACC,MAAAA;;IACbC,QAAAA,EAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA4HVC,MAAAA,EAAQ;AAAC,MAAA","file":"index.js","sourcesContent":["// ─────────────────────────────────────────────────────\r\n// @ngstato/angular — injectStore()\r\n// Helper pour injecter un store dans un composant\r\n// ─────────────────────────────────────────────────────\r\n\r\nimport { inject, type Type } from '@angular/core'\r\n\r\nexport function injectStore<T>(store: Type<T>): T {\r\n return inject(store)\r\n}","import {\r\n makeEnvironmentProviders,\r\n InjectionToken,\r\n isDevMode\r\n} from '@angular/core'\r\nimport { configureHttp, devTools } from '@ngstato/core'\r\nimport type { StatoConfig } from '@ngstato/core'\r\n\r\nexport interface StatoAngularConfig {\r\n http?: StatoConfig\r\n devtools?: boolean\r\n}\r\n\r\nexport const STATO_CONFIG = new InjectionToken<StatoAngularConfig>('STATO_CONFIG')\r\n\r\nexport function provideStato(config: StatoAngularConfig = {}) {\r\n\r\n if (config.http) {\r\n configureHttp(config.http)\r\n }\r\n\r\n // DevTools — ignorés automatiquement en production\r\n // isDevMode() est géré par Angular au build\r\n // → false en prod même si devtools: true\r\n if (config.devtools && isDevMode()) {\r\n console.info(\r\n '%c[Stato] 🛠 DevTools activés',\r\n 'background:#1e40af;color:white;padding:4px 8px;border-radius:4px;font-weight:bold'\r\n )\r\n devTools.open()\r\n }\r\n\r\n return makeEnvironmentProviders([\r\n {\r\n provide: STATO_CONFIG,\r\n useValue: config\r\n }\r\n ])\r\n}","// ─────────────────────────────────────────────────────\r\n// @ngstato/angular — createAngularStore()\r\n// Transforme un ngstato store en store Angular avec Signals\r\n// ─────────────────────────────────────────────────────\r\n\r\nimport {\r\n signal,\r\n computed,\r\n Injectable,\r\n OnDestroy,\r\n Signal\r\n} from '@angular/core'\r\n\r\nimport { createStore } from '@ngstato/core'\r\nimport type { StatoStoreConfig } from '@ngstato/core'\r\n\r\n// ─────────────────────────────────────────────────────\r\n// FONCTION PRINCIPALE — createAngularStore()\r\n// ─────────────────────────────────────────────────────\r\n\r\nexport function createAngularStore<S extends object>(\r\n config: S & StatoStoreConfig<S>\r\n) {\r\n // 1. Créer le store core\r\n const coreStore = createStore(config)\r\n\r\n // 2. Créer un Signal pour chaque propriété du state\r\n const signals: Record<string, ReturnType<typeof signal>> = {}\r\n const initialState = coreStore.getState()\r\n\r\n for (const key of Object.keys(initialState as object)) {\r\n signals[key] = signal((initialState as any)[key])\r\n }\r\n\r\n // 3. Synchroniser les Signals avec le state core\r\n coreStore.subscribe((newState: any) => {\r\n for (const key of Object.keys(newState)) {\r\n if (signals[key]) {\r\n signals[key].set(newState[key])\r\n }\r\n }\r\n })\r\n\r\n // 4. Construire l objet public Angular\r\n const angularStore: any = {\r\n __store__: coreStore.__store__\r\n }\r\n\r\n // 5. Exposer chaque propriété comme Signal\r\n for (const key of Object.keys(initialState as object)) {\r\n Object.defineProperty(angularStore, key, {\r\n get: () => signals[key],\r\n enumerable: true,\r\n configurable: true\r\n })\r\n }\r\n\r\n // 6. Exposer chaque computed comme Signal computed\r\n const { computed: computedConfig } = config as StatoStoreConfig<S>\r\n if (computedConfig) {\r\n for (const key of Object.keys(computedConfig)) {\r\n const computedSignal = computed(() => coreStore[key])\r\n Object.defineProperty(angularStore, key, {\r\n get: () => computedSignal,\r\n enumerable: true,\r\n configurable: true\r\n })\r\n }\r\n }\r\n\r\n // 7. Exposer chaque action directement\r\n const { actions } = config as StatoStoreConfig<S>\r\n if (actions) {\r\n for (const name of Object.keys(actions)) {\r\n angularStore[name] = (...args: unknown[]) =>\r\n coreStore.__store__.dispatch(name, ...args)\r\n }\r\n }\r\n\r\n // 8. Appeler onInit si défini\r\n const { hooks } = config as StatoStoreConfig<S>\r\n if (hooks?.onInit) {\r\n hooks.onInit(angularStore)\r\n }\r\n\r\n // 9. Exposer destroy pour le cleanup\r\n angularStore.__destroy__ = () => {\r\n coreStore.__store__.destroy(angularStore)\r\n }\r\n\r\n return angularStore\r\n}\r\n\r\n// ─────────────────────────────────────────────────────\r\n// CLASSE DE BASE — étendue par StatoStore()\r\n// Publique — pas de membres privés\r\n// ─────────────────────────────────────────────────────\r\n@Injectable()\r\nexport class StatoStoreBase implements OnDestroy {\r\n storeInstance: any\r\n\r\n initStore<S extends object>(config: S & StatoStoreConfig<S>) {\r\n this.storeInstance = createAngularStore(config)\r\n\r\n // Copier toutes les propriétés sur this\r\n for (const key of Object.keys(this.storeInstance)) {\r\n if (key !== '__store__' && key !== '__destroy__') {\r\n Object.defineProperty(this, key, {\r\n get: () => this.storeInstance[key],\r\n enumerable: true,\r\n configurable: true\r\n })\r\n }\r\n }\r\n\r\n // Copier les actions\r\n const { actions } = config as StatoStoreConfig<S>\r\n if (actions) {\r\n for (const name of Object.keys(actions)) {\r\n Object.defineProperty(this, name, {\r\n get: () => this.storeInstance[name],\r\n enumerable: true,\r\n configurable: true\r\n })\r\n }\r\n }\r\n }\r\n\r\n ngOnDestroy() {\r\n this.storeInstance?.__destroy__()\r\n }\r\n}\r\n\r\n// ─────────────────────────────────────────────────────\r\n// FACTORY — StatoStore()\r\n// Crée un service Angular injectable\r\n// Usage :\r\n// export class UserStore extends StatoStore({\r\n// user: null,\r\n// actions: { ... }\r\n// }) {}\r\n// ─────────────────────────────────────────────────────\r\n\r\nexport function StatoStore<S extends object>(\r\n config: S & StatoStoreConfig<S>\r\n) {\r\n @Injectable({ providedIn: 'root' })\r\n class ConcreteStore extends StatoStoreBase {\r\n constructor() {\r\n super()\r\n this.initStore(config)\r\n }\r\n }\r\n\r\n return ConcreteStore\r\n}","import {\r\n Component,\r\n OnInit,\r\n OnDestroy,\r\n signal,\r\n inject,\r\n ElementRef,\r\n ViewChild,\r\n AfterViewInit\r\n} from '@angular/core'\r\nimport { CommonModule } from '@angular/common'\r\nimport { devTools } from '@ngstato/core'\r\nimport type { ActionLog } from '@ngstato/core'\r\nimport { STATO_CONFIG } from './provide-ngstato'\r\n\r\n@Component({\r\n selector: 'ngstato-devtools',\r\n standalone: true,\r\n imports: [CommonModule],\r\n template: `\r\n <!-- Bouton flottant -->\r\n @if (!isOpen()) {\r\n <button class=\"devtools-fab\" (click)=\"toggle()\">\r\n 🛠 Stato\r\n </button>\r\n }\r\n\r\n <!-- Panel -->\r\n @if (isOpen()) {\r\n <div\r\n class=\"devtools-panel\"\r\n [class.devtools-panel--minimized]=\"isMinimized()\"\r\n [style.left.px]=\"posX()\"\r\n [style.top.px]=\"posY()\"\r\n [style.width.px]=\"isMinimized() ? 200 : panelWidth()\"\r\n [style.height]=\"isMinimized() ? 'auto' : panelHeight() + 'px'\"\r\n >\r\n\r\n <!-- Header — draggable -->\r\n <div\r\n class=\"devtools-header\"\r\n (mousedown)=\"onDragStart($event)\"\r\n >\r\n <span class=\"devtools-title\">🛠 Stato</span>\r\n <div class=\"devtools-header-actions\">\r\n @if (!isMinimized()) {\r\n <button class=\"btn-icon\" (click)=\"clear()\" title=\"Vider\">🗑</button>\r\n }\r\n <button class=\"btn-icon\" (click)=\"toggleMinimize()\" title=\"Minimiser/Agrandir\">\r\n {{ isMinimized() ? '▲' : '▼' }}\r\n </button>\r\n <button class=\"btn-icon\" (click)=\"toggle()\" title=\"Fermer\">✕</button>\r\n </div>\r\n </div>\r\n\r\n <!-- Resize handle — coin bas droite -->\r\n @if (!isMinimized()) {\r\n <div\r\n class=\"devtools-resize\"\r\n (mousedown)=\"onResizeStart($event)\"\r\n >⊿</div>\r\n }\r\n\r\n @if (!isMinimized()) {\r\n\r\n <!-- Tabs -->\r\n <div class=\"devtools-tabs\">\r\n <button\r\n class=\"tab\"\r\n [class.tab--active]=\"activeTab() === 'actions'\"\r\n (click)=\"activeTab.set('actions')\"\r\n >\r\n Actions ({{ logs().length }})\r\n </button>\r\n <button\r\n class=\"tab\"\r\n [class.tab--active]=\"activeTab() === 'state'\"\r\n (click)=\"activeTab.set('state')\"\r\n >\r\n State\r\n </button>\r\n </div>\r\n\r\n <!-- Tab Actions -->\r\n @if (activeTab() === 'actions') {\r\n <div class=\"devtools-content\">\r\n @if (!logs().length) {\r\n <div class=\"devtools-empty\">Aucune action pour l'instant</div>\r\n }\r\n @for (log of logs(); track log.id) {\r\n <div\r\n class=\"log-item\"\r\n [class.log-item--error]=\"log.status === 'error'\"\r\n (click)=\"selectLog(log)\"\r\n >\r\n <div class=\"log-item__left\">\r\n <span class=\"log-status\">{{ log.status === 'success' ? '✓' : '✗' }}</span>\r\n <span class=\"log-name\">{{ log.name }}</span>\r\n </div>\r\n <div class=\"log-item__right\">\r\n @if (log.status === 'error') {\r\n <span class=\"log-error-badge\">erreur</span>\r\n } @else {\r\n <span class=\"log-duration\">{{ log.duration }}ms</span>\r\n }\r\n <span class=\"log-time\">{{ formatTime(log.at) }}</span>\r\n </div>\r\n </div>\r\n\r\n @if (selectedLog()?.id === log.id) {\r\n <div class=\"log-detail\">\r\n @if (log.error) {\r\n <div class=\"log-detail__error\">{{ log.error }}</div>\r\n }\r\n <div class=\"log-detail__section\">\r\n <span class=\"log-detail__label\">Avant</span>\r\n <pre>{{ log.prevState | json }}</pre>\r\n </div>\r\n <div class=\"log-detail__section\">\r\n <span class=\"log-detail__label\">Après</span>\r\n <pre>{{ log.nextState | json }}</pre>\r\n </div>\r\n </div>\r\n }\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Tab State -->\r\n @if (activeTab() === 'state') {\r\n <div class=\"devtools-content\">\r\n @if (logs().length) {\r\n <pre class=\"state-view\">{{ logs()[0].nextState | json }}</pre>\r\n } @else {\r\n <div class=\"devtools-empty\">Aucun state disponible</div>\r\n }\r\n </div>\r\n }\r\n }\r\n\r\n </div>\r\n }\r\n `,\r\n styles: [`\r\n .devtools-fab {\r\n position: fixed;\r\n bottom: 1.5rem;\r\n left: 1.5rem;\r\n background: #1e293b;\r\n color: white;\r\n border: none;\r\n border-radius: 999px;\r\n padding: 0.5rem 1rem;\r\n font-size: 0.85rem;\r\n font-weight: 600;\r\n cursor: pointer;\r\n z-index: 9999;\r\n box-shadow: 0 4px 12px rgba(0,0,0,0.3);\r\n transition: background 0.15s;\r\n }\r\n .devtools-fab:hover { background: #334155; }\r\n\r\n .devtools-panel {\r\n position: fixed;\r\n background: #0f172a;\r\n border-radius: 12px;\r\n box-shadow: 0 8px 32px rgba(0,0,0,0.4);\r\n z-index: 9999;\r\n display: flex;\r\n flex-direction: column;\r\n overflow: hidden;\r\n font-family: 'Courier New', monospace;\r\n min-width: 200px;\r\n min-height: 40px;\r\n }\r\n\r\n .devtools-panel--minimized {\r\n border-radius: 8px;\r\n }\r\n\r\n .devtools-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 0.6rem 0.75rem;\r\n background: #1e293b;\r\n border-bottom: 1px solid #334155;\r\n cursor: grab;\r\n user-select: none;\r\n }\r\n .devtools-header:active { cursor: grabbing; }\r\n\r\n .devtools-title {\r\n color: #e2e8f0;\r\n font-size: 0.82rem;\r\n font-weight: 600;\r\n font-family: system-ui;\r\n }\r\n\r\n .devtools-header-actions { display: flex; gap: 0.25rem; }\r\n\r\n .btn-icon {\r\n background: transparent;\r\n color: #64748b;\r\n border: none;\r\n cursor: pointer;\r\n font-size: 0.8rem;\r\n padding: 0.15rem 0.35rem;\r\n border-radius: 4px;\r\n line-height: 1;\r\n }\r\n .btn-icon:hover { background: #334155; color: white; }\r\n\r\n .devtools-resize {\r\n position: absolute;\r\n bottom: 2px;\r\n right: 4px;\r\n color: #334155;\r\n font-size: 0.9rem;\r\n cursor: nwse-resize;\r\n user-select: none;\r\n line-height: 1;\r\n }\r\n .devtools-resize:hover { color: #64748b; }\r\n\r\n .devtools-tabs {\r\n display: flex;\r\n background: #1e293b;\r\n border-bottom: 1px solid #334155;\r\n }\r\n .tab {\r\n padding: 0.4rem 0.75rem;\r\n background: transparent;\r\n color: #64748b;\r\n border: none;\r\n cursor: pointer;\r\n font-size: 0.78rem;\r\n font-family: system-ui;\r\n }\r\n .tab:hover { color: #e2e8f0; }\r\n .tab--active { color: #3b82f6; border-bottom: 2px solid #3b82f6; }\r\n\r\n .devtools-content {\r\n overflow-y: auto;\r\n flex: 1;\r\n padding: 0.25rem 0;\r\n }\r\n\r\n .devtools-empty {\r\n padding: 2rem;\r\n text-align: center;\r\n color: #475569;\r\n font-size: 0.78rem;\r\n font-family: system-ui;\r\n }\r\n\r\n .log-item {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 0.35rem 0.75rem;\r\n cursor: pointer;\r\n border-bottom: 1px solid #1e293b;\r\n }\r\n .log-item:hover { background: #1e293b; }\r\n .log-item--error { background: #1a0a0a; }\r\n\r\n .log-item__left { display: flex; align-items: center; gap: 0.4rem; overflow: hidden; }\r\n .log-item__right { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }\r\n\r\n .log-status { font-size: 0.72rem; color: #22c55e; flex-shrink: 0; }\r\n .log-item--error .log-status { color: #ef4444; }\r\n .log-name { color: #e2e8f0; font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\r\n .log-duration { color: #64748b; font-size: 0.7rem; }\r\n .log-time { color: #475569; font-size: 0.68rem; }\r\n\r\n .log-error-badge {\r\n background: #7f1d1d;\r\n color: #fca5a5;\r\n font-size: 0.68rem;\r\n padding: 0.1rem 0.35rem;\r\n border-radius: 4px;\r\n }\r\n\r\n .log-detail {\r\n background: #0a0f1a;\r\n padding: 0.6rem 0.75rem;\r\n border-left: 3px solid #3b82f6;\r\n margin: 0 0.4rem 0.4rem;\r\n border-radius: 0 4px 4px 0;\r\n }\r\n .log-detail__error { color: #fca5a5; font-size: 0.72rem; margin-bottom: 0.4rem; }\r\n .log-detail__section { margin-bottom: 0.4rem; }\r\n .log-detail__label {\r\n color: #64748b;\r\n font-size: 0.68rem;\r\n display: block;\r\n margin-bottom: 0.2rem;\r\n font-family: system-ui;\r\n }\r\n pre {\r\n color: #86efac;\r\n font-size: 0.7rem;\r\n margin: 0;\r\n white-space: pre-wrap;\r\n word-break: break-all;\r\n max-height: 140px;\r\n overflow-y: auto;\r\n }\r\n .state-view {\r\n color: #86efac;\r\n font-size: 0.7rem;\r\n padding: 0.75rem;\r\n margin: 0;\r\n white-space: pre-wrap;\r\n word-break: break-all;\r\n }\r\n `]\r\n})\r\nexport class StatoDevToolsComponent implements OnInit, OnDestroy {\r\n\r\n private config = inject(STATO_CONFIG, { optional: true })\r\n private unsub?: () => void\r\n\r\n // State UI\r\n isOpen = signal(false)\r\n isMinimized = signal(false)\r\n activeTab = signal<'actions' | 'state'>('actions')\r\n logs = signal<ActionLog[]>([])\r\n selectedLog = signal<ActionLog | null>(null)\r\n\r\n // Position et taille\r\n posX = signal(24)\r\n posY = signal(window.innerHeight - 500)\r\n panelWidth = signal(420)\r\n panelHeight = signal(460)\r\n\r\n // Drag state\r\n private isDragging = false\r\n private isResizing = false\r\n private dragOffsetX = 0\r\n private dragOffsetY = 0\r\n private startW = 0\r\n private startH = 0\r\n private startX = 0\r\n private startY = 0\r\n\r\n // Bound listeners\r\n private boundMouseMove = this.onMouseMove.bind(this)\r\n private boundMouseUp = this.onMouseUp.bind(this)\r\n\r\n ngOnInit() {\r\n this.unsub = devTools.subscribe((state) => {\r\n this.logs.set(state.logs)\r\n this.isOpen.set(state.isOpen)\r\n })\r\n\r\n document.addEventListener('mousemove', this.boundMouseMove)\r\n document.addEventListener('mouseup', this.boundMouseUp)\r\n }\r\n\r\n ngOnDestroy() {\r\n this.unsub?.()\r\n document.removeEventListener('mousemove', this.boundMouseMove)\r\n document.removeEventListener('mouseup', this.boundMouseUp)\r\n }\r\n\r\n // ── Toggle ─────────────────────────────────────────\r\n toggle() { devTools.toggle() }\r\n toggleMinimize() { this.isMinimized.update(v => !v) }\r\n clear() { devTools.clear(); this.selectedLog.set(null) }\r\n selectLog(log: ActionLog) {\r\n this.selectedLog.set(this.selectedLog()?.id === log.id ? null : log)\r\n }\r\n formatTime(iso: string): string {\r\n return new Date(iso).toTimeString().slice(0, 8)\r\n }\r\n\r\n // ── Drag ───────────────────────────────────────────\r\n onDragStart(e: MouseEvent) {\r\n if ((e.target as HTMLElement).classList.contains('btn-icon')) return\r\n this.isDragging = true\r\n this.dragOffsetX = e.clientX - this.posX()\r\n this.dragOffsetY = e.clientY - this.posY()\r\n e.preventDefault()\r\n }\r\n\r\n // ── Resize ─────────────────────────────────────────\r\n onResizeStart(e: MouseEvent) {\r\n this.isResizing = true\r\n this.startW = this.panelWidth()\r\n this.startH = this.panelHeight()\r\n this.startX = e.clientX\r\n this.startY = e.clientY\r\n e.preventDefault()\r\n e.stopPropagation()\r\n }\r\n\r\n // ── Mouse Move ─────────────────────────────────────\r\n onMouseMove(e: MouseEvent) {\r\n if (this.isDragging) {\r\n this.posX.set(Math.max(0, e.clientX - this.dragOffsetX))\r\n this.posY.set(Math.max(0, e.clientY - this.dragOffsetY))\r\n }\r\n if (this.isResizing) {\r\n const newW = Math.max(300, this.startW + e.clientX - this.startX)\r\n const newH = Math.max(200, this.startH + e.clientY - this.startY)\r\n this.panelWidth.set(newW)\r\n this.panelHeight.set(newH)\r\n }\r\n }\r\n\r\n // ── Mouse Up ───────────────────────────────────────\r\n onMouseUp() {\r\n this.isDragging = false\r\n this.isResizing = false\r\n }\r\n}"]}
package/dist/index.mjs DELETED
@@ -1,538 +0,0 @@
1
- import { InjectionToken, Injectable, inject, signal, Component, computed, isDevMode, makeEnvironmentProviders } from '@angular/core';
2
- import { devTools, createStore, configureHttp } from '@ngstato/core';
3
- import { CommonModule } from '@angular/common';
4
-
5
- var __defProp = Object.defineProperty;
6
- var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
7
- function injectStore(store) {
8
- return inject(store);
9
- }
10
- __name(injectStore, "injectStore");
11
- var STATO_CONFIG = new InjectionToken("STATO_CONFIG");
12
- function provideStato(config = {}) {
13
- if (config.http) {
14
- configureHttp(config.http);
15
- }
16
- if (config.devtools && isDevMode()) {
17
- console.info("%c[Stato] \u{1F6E0} DevTools activ\xE9s", "background:#1e40af;color:white;padding:4px 8px;border-radius:4px;font-weight:bold");
18
- devTools.open();
19
- }
20
- return makeEnvironmentProviders([
21
- {
22
- provide: STATO_CONFIG,
23
- useValue: config
24
- }
25
- ]);
26
- }
27
- __name(provideStato, "provideStato");
28
- function _ts_decorate(decorators, target, key, desc) {
29
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
30
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
31
- 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;
32
- return c > 3 && r && Object.defineProperty(target, key, r), r;
33
- }
34
- __name(_ts_decorate, "_ts_decorate");
35
- function createAngularStore(config) {
36
- const coreStore = createStore(config);
37
- const signals = {};
38
- const initialState = coreStore.getState();
39
- for (const key of Object.keys(initialState)) {
40
- signals[key] = signal(initialState[key]);
41
- }
42
- coreStore.subscribe((newState) => {
43
- for (const key of Object.keys(newState)) {
44
- if (signals[key]) {
45
- signals[key].set(newState[key]);
46
- }
47
- }
48
- });
49
- const angularStore = {
50
- __store__: coreStore.__store__
51
- };
52
- for (const key of Object.keys(initialState)) {
53
- Object.defineProperty(angularStore, key, {
54
- get: /* @__PURE__ */ __name(() => signals[key], "get"),
55
- enumerable: true,
56
- configurable: true
57
- });
58
- }
59
- const { computed: computedConfig } = config;
60
- if (computedConfig) {
61
- for (const key of Object.keys(computedConfig)) {
62
- const computedSignal = computed(() => coreStore[key]);
63
- Object.defineProperty(angularStore, key, {
64
- get: /* @__PURE__ */ __name(() => computedSignal, "get"),
65
- enumerable: true,
66
- configurable: true
67
- });
68
- }
69
- }
70
- const { actions } = config;
71
- if (actions) {
72
- for (const name of Object.keys(actions)) {
73
- angularStore[name] = (...args) => coreStore.__store__.dispatch(name, ...args);
74
- }
75
- }
76
- const { hooks } = config;
77
- if (hooks?.onInit) {
78
- hooks.onInit(angularStore);
79
- }
80
- angularStore.__destroy__ = () => {
81
- coreStore.__store__.destroy(angularStore);
82
- };
83
- return angularStore;
84
- }
85
- __name(createAngularStore, "createAngularStore");
86
- var StatoStoreBase = class {
87
- static {
88
- __name(this, "StatoStoreBase");
89
- }
90
- storeInstance;
91
- initStore(config) {
92
- this.storeInstance = createAngularStore(config);
93
- for (const key of Object.keys(this.storeInstance)) {
94
- if (key !== "__store__" && key !== "__destroy__") {
95
- Object.defineProperty(this, key, {
96
- get: /* @__PURE__ */ __name(() => this.storeInstance[key], "get"),
97
- enumerable: true,
98
- configurable: true
99
- });
100
- }
101
- }
102
- const { actions } = config;
103
- if (actions) {
104
- for (const name of Object.keys(actions)) {
105
- Object.defineProperty(this, name, {
106
- get: /* @__PURE__ */ __name(() => this.storeInstance[name], "get"),
107
- enumerable: true,
108
- configurable: true
109
- });
110
- }
111
- }
112
- }
113
- ngOnDestroy() {
114
- this.storeInstance?.__destroy__();
115
- }
116
- };
117
- StatoStoreBase = _ts_decorate([
118
- Injectable()
119
- ], StatoStoreBase);
120
- function _ts_decorate2(decorators, target, key, desc) {
121
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
122
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
123
- 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;
124
- return c > 3 && r && Object.defineProperty(target, key, r), r;
125
- }
126
- __name(_ts_decorate2, "_ts_decorate");
127
- var StatoDevToolsComponent = class {
128
- static {
129
- __name(this, "StatoDevToolsComponent");
130
- }
131
- config = inject(STATO_CONFIG, {
132
- optional: true
133
- });
134
- unsub;
135
- // State UI
136
- isOpen = signal(false);
137
- isMinimized = signal(false);
138
- activeTab = signal("actions");
139
- logs = signal([]);
140
- selectedLog = signal(null);
141
- // Position et taille
142
- posX = signal(24);
143
- posY = signal(window.innerHeight - 500);
144
- panelWidth = signal(420);
145
- panelHeight = signal(460);
146
- // Drag state
147
- isDragging = false;
148
- isResizing = false;
149
- dragOffsetX = 0;
150
- dragOffsetY = 0;
151
- startW = 0;
152
- startH = 0;
153
- startX = 0;
154
- startY = 0;
155
- // Bound listeners
156
- boundMouseMove = this.onMouseMove.bind(this);
157
- boundMouseUp = this.onMouseUp.bind(this);
158
- ngOnInit() {
159
- this.unsub = devTools.subscribe((state) => {
160
- this.logs.set(state.logs);
161
- this.isOpen.set(state.isOpen);
162
- });
163
- document.addEventListener("mousemove", this.boundMouseMove);
164
- document.addEventListener("mouseup", this.boundMouseUp);
165
- }
166
- ngOnDestroy() {
167
- this.unsub?.();
168
- document.removeEventListener("mousemove", this.boundMouseMove);
169
- document.removeEventListener("mouseup", this.boundMouseUp);
170
- }
171
- // ── Toggle ─────────────────────────────────────────
172
- toggle() {
173
- devTools.toggle();
174
- }
175
- toggleMinimize() {
176
- this.isMinimized.update((v) => !v);
177
- }
178
- clear() {
179
- devTools.clear();
180
- this.selectedLog.set(null);
181
- }
182
- selectLog(log) {
183
- this.selectedLog.set(this.selectedLog()?.id === log.id ? null : log);
184
- }
185
- formatTime(iso) {
186
- return new Date(iso).toTimeString().slice(0, 8);
187
- }
188
- // ── Drag ───────────────────────────────────────────
189
- onDragStart(e) {
190
- if (e.target.classList.contains("btn-icon")) return;
191
- this.isDragging = true;
192
- this.dragOffsetX = e.clientX - this.posX();
193
- this.dragOffsetY = e.clientY - this.posY();
194
- e.preventDefault();
195
- }
196
- // ── Resize ─────────────────────────────────────────
197
- onResizeStart(e) {
198
- this.isResizing = true;
199
- this.startW = this.panelWidth();
200
- this.startH = this.panelHeight();
201
- this.startX = e.clientX;
202
- this.startY = e.clientY;
203
- e.preventDefault();
204
- e.stopPropagation();
205
- }
206
- // ── Mouse Move ─────────────────────────────────────
207
- onMouseMove(e) {
208
- if (this.isDragging) {
209
- this.posX.set(Math.max(0, e.clientX - this.dragOffsetX));
210
- this.posY.set(Math.max(0, e.clientY - this.dragOffsetY));
211
- }
212
- if (this.isResizing) {
213
- const newW = Math.max(300, this.startW + e.clientX - this.startX);
214
- const newH = Math.max(200, this.startH + e.clientY - this.startY);
215
- this.panelWidth.set(newW);
216
- this.panelHeight.set(newH);
217
- }
218
- }
219
- // ── Mouse Up ───────────────────────────────────────
220
- onMouseUp() {
221
- this.isDragging = false;
222
- this.isResizing = false;
223
- }
224
- };
225
- StatoDevToolsComponent = _ts_decorate2([
226
- Component({
227
- selector: "ngstato-devtools",
228
- standalone: true,
229
- imports: [
230
- CommonModule
231
- ],
232
- template: `
233
- <!-- Bouton flottant -->
234
- @if (!isOpen()) {
235
- <button class="devtools-fab" (click)="toggle()">
236
- \u{1F6E0} Stato
237
- </button>
238
- }
239
-
240
- <!-- Panel -->
241
- @if (isOpen()) {
242
- <div
243
- class="devtools-panel"
244
- [class.devtools-panel--minimized]="isMinimized()"
245
- [style.left.px]="posX()"
246
- [style.top.px]="posY()"
247
- [style.width.px]="isMinimized() ? 200 : panelWidth()"
248
- [style.height]="isMinimized() ? 'auto' : panelHeight() + 'px'"
249
- >
250
-
251
- <!-- Header \u2014 draggable -->
252
- <div
253
- class="devtools-header"
254
- (mousedown)="onDragStart($event)"
255
- >
256
- <span class="devtools-title">\u{1F6E0} Stato</span>
257
- <div class="devtools-header-actions">
258
- @if (!isMinimized()) {
259
- <button class="btn-icon" (click)="clear()" title="Vider">\u{1F5D1}</button>
260
- }
261
- <button class="btn-icon" (click)="toggleMinimize()" title="Minimiser/Agrandir">
262
- {{ isMinimized() ? '\u25B2' : '\u25BC' }}
263
- </button>
264
- <button class="btn-icon" (click)="toggle()" title="Fermer">\u2715</button>
265
- </div>
266
- </div>
267
-
268
- <!-- Resize handle \u2014 coin bas droite -->
269
- @if (!isMinimized()) {
270
- <div
271
- class="devtools-resize"
272
- (mousedown)="onResizeStart($event)"
273
- >\u22BF</div>
274
- }
275
-
276
- @if (!isMinimized()) {
277
-
278
- <!-- Tabs -->
279
- <div class="devtools-tabs">
280
- <button
281
- class="tab"
282
- [class.tab--active]="activeTab() === 'actions'"
283
- (click)="activeTab.set('actions')"
284
- >
285
- Actions ({{ logs().length }})
286
- </button>
287
- <button
288
- class="tab"
289
- [class.tab--active]="activeTab() === 'state'"
290
- (click)="activeTab.set('state')"
291
- >
292
- State
293
- </button>
294
- </div>
295
-
296
- <!-- Tab Actions -->
297
- @if (activeTab() === 'actions') {
298
- <div class="devtools-content">
299
- @if (!logs().length) {
300
- <div class="devtools-empty">Aucune action pour l'instant</div>
301
- }
302
- @for (log of logs(); track log.id) {
303
- <div
304
- class="log-item"
305
- [class.log-item--error]="log.status === 'error'"
306
- (click)="selectLog(log)"
307
- >
308
- <div class="log-item__left">
309
- <span class="log-status">{{ log.status === 'success' ? '\u2713' : '\u2717' }}</span>
310
- <span class="log-name">{{ log.name }}</span>
311
- </div>
312
- <div class="log-item__right">
313
- @if (log.status === 'error') {
314
- <span class="log-error-badge">erreur</span>
315
- } @else {
316
- <span class="log-duration">{{ log.duration }}ms</span>
317
- }
318
- <span class="log-time">{{ formatTime(log.at) }}</span>
319
- </div>
320
- </div>
321
-
322
- @if (selectedLog()?.id === log.id) {
323
- <div class="log-detail">
324
- @if (log.error) {
325
- <div class="log-detail__error">{{ log.error }}</div>
326
- }
327
- <div class="log-detail__section">
328
- <span class="log-detail__label">Avant</span>
329
- <pre>{{ log.prevState | json }}</pre>
330
- </div>
331
- <div class="log-detail__section">
332
- <span class="log-detail__label">Apr\xE8s</span>
333
- <pre>{{ log.nextState | json }}</pre>
334
- </div>
335
- </div>
336
- }
337
- }
338
- </div>
339
- }
340
-
341
- <!-- Tab State -->
342
- @if (activeTab() === 'state') {
343
- <div class="devtools-content">
344
- @if (logs().length) {
345
- <pre class="state-view">{{ logs()[0].nextState | json }}</pre>
346
- } @else {
347
- <div class="devtools-empty">Aucun state disponible</div>
348
- }
349
- </div>
350
- }
351
- }
352
-
353
- </div>
354
- }
355
- `,
356
- styles: [
357
- `
358
- .devtools-fab {
359
- position: fixed;
360
- bottom: 1.5rem;
361
- left: 1.5rem;
362
- background: #1e293b;
363
- color: white;
364
- border: none;
365
- border-radius: 999px;
366
- padding: 0.5rem 1rem;
367
- font-size: 0.85rem;
368
- font-weight: 600;
369
- cursor: pointer;
370
- z-index: 9999;
371
- box-shadow: 0 4px 12px rgba(0,0,0,0.3);
372
- transition: background 0.15s;
373
- }
374
- .devtools-fab:hover { background: #334155; }
375
-
376
- .devtools-panel {
377
- position: fixed;
378
- background: #0f172a;
379
- border-radius: 12px;
380
- box-shadow: 0 8px 32px rgba(0,0,0,0.4);
381
- z-index: 9999;
382
- display: flex;
383
- flex-direction: column;
384
- overflow: hidden;
385
- font-family: 'Courier New', monospace;
386
- min-width: 200px;
387
- min-height: 40px;
388
- }
389
-
390
- .devtools-panel--minimized {
391
- border-radius: 8px;
392
- }
393
-
394
- .devtools-header {
395
- display: flex;
396
- justify-content: space-between;
397
- align-items: center;
398
- padding: 0.6rem 0.75rem;
399
- background: #1e293b;
400
- border-bottom: 1px solid #334155;
401
- cursor: grab;
402
- user-select: none;
403
- }
404
- .devtools-header:active { cursor: grabbing; }
405
-
406
- .devtools-title {
407
- color: #e2e8f0;
408
- font-size: 0.82rem;
409
- font-weight: 600;
410
- font-family: system-ui;
411
- }
412
-
413
- .devtools-header-actions { display: flex; gap: 0.25rem; }
414
-
415
- .btn-icon {
416
- background: transparent;
417
- color: #64748b;
418
- border: none;
419
- cursor: pointer;
420
- font-size: 0.8rem;
421
- padding: 0.15rem 0.35rem;
422
- border-radius: 4px;
423
- line-height: 1;
424
- }
425
- .btn-icon:hover { background: #334155; color: white; }
426
-
427
- .devtools-resize {
428
- position: absolute;
429
- bottom: 2px;
430
- right: 4px;
431
- color: #334155;
432
- font-size: 0.9rem;
433
- cursor: nwse-resize;
434
- user-select: none;
435
- line-height: 1;
436
- }
437
- .devtools-resize:hover { color: #64748b; }
438
-
439
- .devtools-tabs {
440
- display: flex;
441
- background: #1e293b;
442
- border-bottom: 1px solid #334155;
443
- }
444
- .tab {
445
- padding: 0.4rem 0.75rem;
446
- background: transparent;
447
- color: #64748b;
448
- border: none;
449
- cursor: pointer;
450
- font-size: 0.78rem;
451
- font-family: system-ui;
452
- }
453
- .tab:hover { color: #e2e8f0; }
454
- .tab--active { color: #3b82f6; border-bottom: 2px solid #3b82f6; }
455
-
456
- .devtools-content {
457
- overflow-y: auto;
458
- flex: 1;
459
- padding: 0.25rem 0;
460
- }
461
-
462
- .devtools-empty {
463
- padding: 2rem;
464
- text-align: center;
465
- color: #475569;
466
- font-size: 0.78rem;
467
- font-family: system-ui;
468
- }
469
-
470
- .log-item {
471
- display: flex;
472
- justify-content: space-between;
473
- align-items: center;
474
- padding: 0.35rem 0.75rem;
475
- cursor: pointer;
476
- border-bottom: 1px solid #1e293b;
477
- }
478
- .log-item:hover { background: #1e293b; }
479
- .log-item--error { background: #1a0a0a; }
480
-
481
- .log-item__left { display: flex; align-items: center; gap: 0.4rem; overflow: hidden; }
482
- .log-item__right { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }
483
-
484
- .log-status { font-size: 0.72rem; color: #22c55e; flex-shrink: 0; }
485
- .log-item--error .log-status { color: #ef4444; }
486
- .log-name { color: #e2e8f0; font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
487
- .log-duration { color: #64748b; font-size: 0.7rem; }
488
- .log-time { color: #475569; font-size: 0.68rem; }
489
-
490
- .log-error-badge {
491
- background: #7f1d1d;
492
- color: #fca5a5;
493
- font-size: 0.68rem;
494
- padding: 0.1rem 0.35rem;
495
- border-radius: 4px;
496
- }
497
-
498
- .log-detail {
499
- background: #0a0f1a;
500
- padding: 0.6rem 0.75rem;
501
- border-left: 3px solid #3b82f6;
502
- margin: 0 0.4rem 0.4rem;
503
- border-radius: 0 4px 4px 0;
504
- }
505
- .log-detail__error { color: #fca5a5; font-size: 0.72rem; margin-bottom: 0.4rem; }
506
- .log-detail__section { margin-bottom: 0.4rem; }
507
- .log-detail__label {
508
- color: #64748b;
509
- font-size: 0.68rem;
510
- display: block;
511
- margin-bottom: 0.2rem;
512
- font-family: system-ui;
513
- }
514
- pre {
515
- color: #86efac;
516
- font-size: 0.7rem;
517
- margin: 0;
518
- white-space: pre-wrap;
519
- word-break: break-all;
520
- max-height: 140px;
521
- overflow-y: auto;
522
- }
523
- .state-view {
524
- color: #86efac;
525
- font-size: 0.7rem;
526
- padding: 0.75rem;
527
- margin: 0;
528
- white-space: pre-wrap;
529
- word-break: break-all;
530
- }
531
- `
532
- ]
533
- })
534
- ], StatoDevToolsComponent);
535
-
536
- export { StatoDevToolsComponent, createAngularStore, injectStore, provideStato };
537
- //# sourceMappingURL=index.mjs.map
538
- //# sourceMappingURL=index.mjs.map