sygnal 6.4.0 → 6.6.0

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.
Files changed (65) hide show
  1. package/CHANGELOG.md +64 -0
  2. package/dist/astro/index.cjs.js +398 -25
  3. package/dist/astro/index.cjs.js.map +1 -1
  4. package/dist/astro/index.mjs +398 -25
  5. package/dist/astro/index.mjs.map +1 -1
  6. package/dist/astro/server.cjs.js +3 -2
  7. package/dist/astro/server.cjs.js.map +1 -1
  8. package/dist/astro/server.mjs +3 -2
  9. package/dist/astro/server.mjs.map +1 -1
  10. package/dist/devtools.cjs.js +141 -3
  11. package/dist/devtools.cjs.js.map +1 -1
  12. package/dist/devtools.esm.js +141 -4
  13. package/dist/devtools.esm.js.map +1 -1
  14. package/dist/diagnostics.cjs.js +140 -21
  15. package/dist/diagnostics.cjs.js.map +1 -1
  16. package/dist/diagnostics.esm.js +140 -21
  17. package/dist/diagnostics.esm.js.map +1 -1
  18. package/dist/index.cjs.js +54 -24
  19. package/dist/index.cjs.js.map +1 -1
  20. package/dist/index.d.ts +139 -16
  21. package/dist/index.esm.js +54 -24
  22. package/dist/index.esm.js.map +1 -1
  23. package/dist/sygnal.min.js +1 -1
  24. package/dist/sygnal.min.js.map +1 -1
  25. package/dist/vike/config/package.json +1 -1
  26. package/dist/vike/onRenderClient.cjs.js +63 -43
  27. package/dist/vike/onRenderClient.cjs.js.map +1 -1
  28. package/dist/vike/onRenderClient.mjs +63 -43
  29. package/dist/vike/onRenderClient.mjs.map +1 -1
  30. package/dist/vike/onRenderHtml.cjs.js +21 -25
  31. package/dist/vike/onRenderHtml.cjs.js.map +1 -1
  32. package/dist/vike/onRenderHtml.mjs +21 -25
  33. package/dist/vike/onRenderHtml.mjs.map +1 -1
  34. package/dist/vite/plugin.cjs.js +398 -25
  35. package/dist/vite/plugin.cjs.js.map +1 -1
  36. package/dist/vite/plugin.mjs +398 -25
  37. package/dist/vite/plugin.mjs.map +1 -1
  38. package/llms.txt +3 -3
  39. package/package.json +1 -1
  40. package/src/core/cell.ts +25 -7
  41. package/src/core/hooks.ts +6 -0
  42. package/src/core/hosts/collection.ts +6 -11
  43. package/src/core/hosts/switchable.ts +2 -2
  44. package/src/core/instance.ts +2 -2
  45. package/src/core/view.ts +2 -0
  46. package/src/cycle/dom/utils.ts +4 -2
  47. package/src/devtools.d.ts +13 -0
  48. package/src/devtools.ts +3 -0
  49. package/src/extra/devGraph.ts +111 -0
  50. package/src/extra/devMcp.ts +1 -1
  51. package/src/extra/devtools.ts +18 -0
  52. package/src/extra/diagnostics/checks/collections.ts +31 -25
  53. package/src/extra/diagnostics/checks/index.ts +1 -1
  54. package/src/extra/diagnostics/checks/inspect.ts +68 -6
  55. package/src/extra/diagnostics/checks/next.ts +22 -0
  56. package/src/extra/diagnostics/checks/public.d.ts +121 -12
  57. package/src/extra/diagnostics/codes.ts +10 -0
  58. package/src/index.d.ts +19 -3
  59. package/src/vike/onRenderClient.ts +44 -46
  60. package/src/vike/onRenderHtml.ts +5 -26
  61. package/src/vike/shell.ts +33 -0
  62. package/src/vite/graph.ts +247 -0
  63. package/src/vite/mcp.ts +3 -3
  64. package/src/vite/plugin.d.ts +12 -0
  65. package/src/vite/plugin.ts +136 -22
@@ -354,11 +354,11 @@ function inAllowed(h, allowed) {
354
354
  return e.startsWith('.') ? h === e.slice(1) || h.endsWith(e) : h === e;
355
355
  });
356
356
  }
357
- /** Why the request is refused (403), or null */
358
- function refusal(req, allowedHosts) {
357
+ /** Why the request is refused (403), or null. PLAN-10 W-2: the graph route (./graph.ts) uses the same guard */
358
+ function refusal(req, allowedHosts, what = 'the Sygnal MCP endpoint') {
359
359
  const remote = String(req?.socket?.remoteAddress || '');
360
360
  if (!LOOPBACK_IP.test(remote))
361
- return `the Sygnal MCP endpoint only answers requests from this machine (not ${remote || 'an unknown address'})`;
361
+ return `${what} only answers requests from this machine (not ${remote || 'an unknown address'})`;
362
362
  const host = req?.headers?.host;
363
363
  if (typeof host !== 'string' || !host)
364
364
  return 'missing Host header';
@@ -620,6 +620,267 @@ if (import.meta.hot) installMcpBridge(import.meta.hot, { agentTools, confirm: ${
620
620
  `;
621
621
  }
622
622
 
623
+ /**
624
+ * PLAN-10 W-2 / P-2: the live app graph page of sygnal/vite's dev server (D543, D544).
625
+ *
626
+ * `/__sygnal/graph` serves sygnal-check's graph page (`graphHtml`, the same file `sygnal-check
627
+ * --graph=html --watch` serves) in live mode, and `/__sygnal/graph/events` its SSE stream: the
628
+ * whole graph (`event: graph`, `id: <version>`) on connect (unless `Last-Event-ID` already has it)
629
+ * and after each build whose graph changed, a `: ping` comment every 25 s. Dev server only.
630
+ *
631
+ * One live project (sygnal-check's createLiveProject, W-1) feeds the page, the check overlay and
632
+ * the console (the plugin's `check`): each build gives the graph and the diagnostics, so they agree.
633
+ * It builds on start and 100 ms after the last source or config file change Vite's watcher reports.
634
+ *
635
+ * P-2: each build also gives the top-level binding and static key (D521: 'file#name', '#2' for a
636
+ * second of the same name in a file) of every component in a scanned file (sygnal-check's
637
+ * componentStamps); the dev transform appends to those modules a tail that sets a non-enumerable
638
+ * `__sygnalKey` on each component function, and the runtime inspect() reports it as `key`. A
639
+ * module whose text changed since the last build is built again first, so a stamp is never stale.
640
+ *
641
+ * The page is served on the app's origin: its "Live data" (graphView/liveData.js) joins the open
642
+ * app tabs over a BroadcastChannel (src/extra/devGraph.ts), with no server in between.
643
+ *
644
+ * Security: the same guard as `/__sygnal/mcp` (./mcp.ts refusal(): a loopback peer, a local Host
645
+ * (or one in `server.allowedHosts`), a local Origin when there is one); GET and HEAD only; the page
646
+ * gets `Cache-Control: no-store`, `X-Content-Type-Options: nosniff`, `Referrer-Policy: no-referrer`,
647
+ * `X-Frame-Options: DENY` and a CSP (inline style and script, `connect-src 'self'`, no framing).
648
+ * Read only: it serves the page and the stream, nothing else.
649
+ */
650
+ // @ts-ignore
651
+ const GRAPH_PATH = '/__sygnal/graph';
652
+ const GRAPH_EVENTS = GRAPH_PATH + '/events';
653
+ const GRAPH_CLIENT = 'virtual:sygnal/graph';
654
+ const GRAPH_CHANNEL = 'sygnal:graph';
655
+ /** The property the dev transform sets on component functions (read by inspect()) */
656
+ const STAMP_PROP = '__sygnalKey';
657
+ const SOURCE_RE$1 = /\.[cm]?[jt]sx?$/;
658
+ const CONFIG_FILES$1 = ['sygnal-check.config.json', 'package.json'];
659
+ const EMPTY = { version: 1, source: 'static', components: [], events: {}, diagnostics: [] };
660
+ const PAGE_CSP = "default-src 'none'; script-src 'unsafe-inline'; style-src 'unsafe-inline'; connect-src 'self'; img-src data: blob:; base-uri 'none'; form-action 'none'; frame-ancestors 'none'";
661
+ const SECURITY = { 'Cache-Control': 'no-store', 'X-Content-Type-Options': 'nosniff', 'Referrer-Policy': 'no-referrer', 'X-Frame-Options': 'DENY' };
662
+ const posix = (p) => p.split(path.sep).join('/');
663
+ /** Whether the project's sygnal-check has the live graph page with "Live data" (checked without loading it). */
664
+ function graphAvailable(root) {
665
+ try {
666
+ const main = createRequire(path.join(root, 'package.json')).resolve('sygnal-check');
667
+ return fs.existsSync(path.join(path.dirname(main), 'graphView', 'liveData.js'));
668
+ }
669
+ catch (_) {
670
+ return false;
671
+ }
672
+ }
673
+ /**
674
+ * The live project behind the page and the checker. `settings` are live.js's (paths = the check's
675
+ * include, strict / a11y / ignore / defaults as the checker resolves them).
676
+ */
677
+ function createEngine(mod, root, settings, logger, stamps) {
678
+ const live = mod.createLiveProject({ root });
679
+ const listeners = [];
680
+ let last = null;
681
+ // the stamps by the live project's path of each file; `known` maps a module path as Vite gives it
682
+ // (posix, possibly through a symlink) to that path
683
+ let stampsByFile = new Map();
684
+ let known = new Map();
685
+ let failed = '';
686
+ const real = (f) => { try {
687
+ return posix(fs.realpathSync(f));
688
+ }
689
+ catch (_) {
690
+ return posix(f);
691
+ } };
692
+ const build = () => {
693
+ let b;
694
+ try {
695
+ b = live.build({ settings, stamps });
696
+ }
697
+ catch (err) {
698
+ const msg = String(err?.message || err);
699
+ if (msg !== failed)
700
+ logger.warn(`[sygnal] sygnal-check failed: ${msg}`, { timestamp: true });
701
+ failed = msg;
702
+ return null;
703
+ }
704
+ failed = '';
705
+ if (!b.graph)
706
+ b = { ...b, json: JSON.stringify(EMPTY) };
707
+ last = b;
708
+ stampsByFile = b.stamps || new Map();
709
+ known = new Map();
710
+ for (const f of b.files || []) {
711
+ known.set(posix(f), f);
712
+ known.set(real(f), f);
713
+ }
714
+ for (const fn of listeners) {
715
+ try {
716
+ fn(b);
717
+ }
718
+ catch (_) { /* a listener never stops the others */ }
719
+ }
720
+ return b;
721
+ };
722
+ const stampsFor = (file) => {
723
+ if (!last)
724
+ return null;
725
+ const own = known.get(posix(file)) ?? known.get(real(file));
726
+ if (!own)
727
+ return null;
728
+ let text = null;
729
+ try {
730
+ text = fs.readFileSync(own, 'utf8');
731
+ }
732
+ catch (_) { }
733
+ const entry = live.cache?.get?.(own);
734
+ // changed since the last build (Vite transforms it before the watcher's debounced build)
735
+ if (text !== null && (!entry || entry.text !== text))
736
+ build();
737
+ return stampsByFile.get(own) || null;
738
+ };
739
+ let timer;
740
+ const watch = (server) => {
741
+ const onChange = (file) => {
742
+ if (String(file).split(/[\\/]/).includes('node_modules'))
743
+ return;
744
+ if (!SOURCE_RE$1.test(file) && !CONFIG_FILES$1.includes(path.basename(file)))
745
+ return;
746
+ clearTimeout(timer);
747
+ timer = setTimeout(build, 100);
748
+ };
749
+ const watcher = server?.watcher;
750
+ if (watcher && typeof watcher.on === 'function') {
751
+ watcher.on('change', onChange);
752
+ watcher.on('add', onChange);
753
+ watcher.on('unlink', onChange);
754
+ }
755
+ try {
756
+ server.httpServer?.once?.('close', () => clearTimeout(timer));
757
+ }
758
+ catch (_) { }
759
+ };
760
+ return {
761
+ build, stampsFor, watch, mod,
762
+ get last() { return last; },
763
+ onBuild(fn) { listeners.push(fn); },
764
+ };
765
+ }
766
+ /** The tail the dev transform appends to a module: a non-enumerable key on each component function. */
767
+ function stampTail(list) {
768
+ const ok = list.filter(s => /^[A-Za-z_$][\w$]*$/.test(s.binding));
769
+ if (!ok.length)
770
+ return '';
771
+ const pairs = ok.map(s => `[typeof ${s.binding} == 'function' ? ${s.binding} : null, ${JSON.stringify(s.key)}]`).join(', ');
772
+ return `\n;(() => { try { for (const [f, k] of [${pairs}]) if (f) Object.defineProperty(f, '${STAMP_PROP}', { value: k, configurable: true }) } catch (_) {} })();\n`;
773
+ }
774
+ /** 'virtual:sygnal/graph': the app side of the page's "Live data" (dev only) */
775
+ function graphClientModule() {
776
+ return `import { installGraphBridge } from 'sygnal/devtools';\ninstallGraphBridge({ channel: ${JSON.stringify(GRAPH_CHANNEL)} });\n`;
777
+ }
778
+ function deny(res, status, text, headers = {}) {
779
+ res.statusCode = status;
780
+ for (const k in { ...SECURITY, ...headers })
781
+ res.setHeader(k, { ...SECURITY, ...headers }[k]);
782
+ res.setHeader('Content-Type', 'text/plain; charset=utf-8');
783
+ res.end(text + '\n');
784
+ }
785
+ function projectTitle(root) {
786
+ try {
787
+ const name = JSON.parse(fs.readFileSync(path.join(root, 'package.json'), 'utf8')).name;
788
+ if (typeof name === 'string' && name)
789
+ return name;
790
+ }
791
+ catch (_) { }
792
+ return path.basename(root);
793
+ }
794
+ /**
795
+ * The middleware for `/__sygnal/graph` and its stream. `engine` resolves to null when sygnal-check
796
+ * isn't installed (or too old): the route then answers 404 with the install hint.
797
+ */
798
+ function graphMiddleware(server, root, engine, ping = 25000) {
799
+ const streams = new Set();
800
+ let subscribed = false;
801
+ let pinger = null;
802
+ const event = (b) => `event: graph\nid: ${b.version}\ndata: ${b.json}\n\n`;
803
+ const subscribe = (e) => {
804
+ if (subscribed)
805
+ return;
806
+ subscribed = true;
807
+ e.onBuild((b) => { if (b.changed)
808
+ for (const res of streams)
809
+ res.write(event(b)); });
810
+ pinger = setInterval(() => { for (const res of streams)
811
+ res.write(': ping\n\n'); }, ping);
812
+ pinger.unref?.();
813
+ try {
814
+ server.httpServer?.once?.('close', () => {
815
+ clearInterval(pinger);
816
+ for (const res of streams)
817
+ res.end();
818
+ streams.clear();
819
+ });
820
+ }
821
+ catch (_) { }
822
+ };
823
+ return async (req, res, next) => {
824
+ const url = String(req.url || '').replace(/[?#].*$/, '');
825
+ if (url !== GRAPH_PATH && url !== GRAPH_PATH + '/' && url !== GRAPH_EVENTS)
826
+ return next();
827
+ const why = refusal(req, server?.config?.server?.allowedHosts, 'the Sygnal graph page');
828
+ if (why)
829
+ return deny(res, 403, `Forbidden: ${why}`);
830
+ if (req.method !== 'GET' && req.method !== 'HEAD')
831
+ return deny(res, 405, 'Method not allowed', { Allow: 'GET, HEAD' });
832
+ const e = await engine;
833
+ if (!e)
834
+ return deny(res, 404, 'The Sygnal graph page needs a sygnal-check with the live graph page in the project: npm i -D sygnal-check@latest');
835
+ subscribe(e);
836
+ const b = e.last || e.build();
837
+ if (!b)
838
+ return deny(res, 500, 'sygnal-check failed: see the dev server output');
839
+ if (url === GRAPH_EVENTS) {
840
+ res.writeHead(200, { ...SECURITY, 'Content-Type': 'text/event-stream; charset=utf-8', Connection: 'keep-alive', 'Content-Security-Policy': "default-src 'none'" });
841
+ if (req.method === 'HEAD')
842
+ return res.end();
843
+ res.write('retry: 1000\n\n');
844
+ if (req.headers['last-event-id'] !== String(b.version))
845
+ res.write(event(b));
846
+ streams.add(res);
847
+ req.on('close', () => streams.delete(res));
848
+ return;
849
+ }
850
+ let body;
851
+ try {
852
+ body = e.mod.graphHtml(b.graph || EMPTY, {
853
+ title: projectTitle(root),
854
+ subtitle: 'dev server',
855
+ root,
856
+ live: { events: GRAPH_EVENTS, version: b.version },
857
+ appData: { channel: GRAPH_CHANNEL },
858
+ });
859
+ }
860
+ catch (err) {
861
+ return deny(res, 500, `The graph page failed: ${err?.message || err}`);
862
+ }
863
+ res.writeHead(200, { ...SECURITY, 'Content-Type': 'text/html; charset=utf-8', 'Content-Security-Policy': PAGE_CSP, 'Content-Length': globalThis.Buffer.byteLength(body) });
864
+ res.end(req.method === 'HEAD' ? undefined : body);
865
+ };
866
+ }
867
+ /** Adds the page's URL under Vite's own when the dev server prints them. */
868
+ function printGraphUrl(server) {
869
+ const print = server?.printUrls;
870
+ if (typeof print !== 'function')
871
+ return;
872
+ server.printUrls = function (...args) {
873
+ const out = print.apply(this, args);
874
+ try {
875
+ const local = server.resolvedUrls?.local?.[0];
876
+ if (local)
877
+ (server.config?.logger || console).info(` ➜ Sygnal graph: ${new URL(local).origin}${GRAPH_PATH}`);
878
+ }
879
+ catch (_) { }
880
+ return out;
881
+ };
882
+ }
883
+
623
884
  /**
624
885
  * Sygnal Vite Plugin
625
886
  *
@@ -745,6 +1006,21 @@ if (import.meta.hot) installMcpBridge(import.meta.hot, { agentTools, confirm: ${
745
1006
  * `globalThis.__SYGNAL_VIEW_TOKENS__`. The runtime SYG103 check then takes a selector drawn
746
1007
  * by a view helper (`{state.open && panel()}`) as conditionally rendered, as it does for
747
1008
  * markup in the view function itself (see viewTokensTail).
1009
+ * 12. `graph` option (PLAN-10 W-2 / P-2, D543 / D544, default true; dev server only, never
1010
+ * `vite build`, `vite preview` or Vitest): the live app graph page at /__sygnal/graph, with
1011
+ * its SSE stream at /__sygnal/graph/events (./graph.ts; the /__sygnal/mcp guard: loopback
1012
+ * peer, local Host or server.allowedHosts, local Origin). sygnal-check (from the project,
1013
+ * skipped silently when missing; a sygnal-check without the page keeps the checker as in 5)
1014
+ * builds it with createLiveProject on start and after each change: one build gives the page,
1015
+ * the check overlay / console findings of 5, and the component stamps. Its URL is printed
1016
+ * under Vite's ("➜ Sygnal graph: http://localhost:5173/__sygnal/graph"). The modules of the
1017
+ * scanned files get a tail setting a non-enumerable `__sygnalKey` (the static 'file#name'
1018
+ * key, D521) on each top-level component function, which the runtime inspect() reports as
1019
+ * `key`; with DevTools on, the dev entries also import 'virtual:sygnal/graph'
1020
+ * (installGraphBridge from 'sygnal/devtools'), which answers the page's "Live data" over a
1021
+ * same-origin BroadcastChannel: the page fades components with no instance, shows instance
1022
+ * counts, flashes a card when its action runs and shows an instance's state. `graph: false`:
1023
+ * no route, stamps or bridge (the checker of 5 runs check() as before).
748
1024
  *
749
1025
  * Why not Vite's `define`? Vite's dependency optimizer does not apply user
750
1026
  * `define` replacements to pre-bundled dependencies (only process.env.NODE_ENV),
@@ -788,6 +1064,8 @@ const OVERLAY_PLUGIN = 'sygnal-check';
788
1064
  // PLAN-6 E-1: the page side of the dev MCP endpoint
789
1065
  const MCP_CLIENT = 'virtual:sygnal/mcp';
790
1066
  const MCP_CLIENT_ID = '\0' + MCP_CLIENT;
1067
+ // PLAN-10 P-2: the page side of the graph page's "Live data"
1068
+ const GRAPH_CLIENT_ID = '\0' + GRAPH_CLIENT;
791
1069
  // Register the runtime checks with the core that loaded last (see the Vike wrapper)
792
1070
  const REINSTALL_IMPORT = `import { installChecks as __sygnalInstallChecks } from 'sygnal/diagnostics';`;
793
1071
  const REINSTALL_CALL = 'try { __sygnalInstallChecks() } catch (e) { console.warn(e) }\n';
@@ -811,11 +1089,17 @@ function sygnal(options = {}) {
811
1089
  const mcpOptions = typeof options.mcp === 'object' && options.mcp ? options.mcp : {};
812
1090
  const devtoolsOn = options.devtools !== false || mcpOn;
813
1091
  const redux = typeof options.devtools == 'object' && !!options.devtools?.redux;
814
- const devtoolsImport = (!devtoolsOn ? ''
1092
+ // PLAN-10 W-2 / P-2 (D543, D544): the graph page, the component stamps and (with DevTools and a
1093
+ // sygnal-check that has the page, decided in config()) the app side of its "Live data"
1094
+ const graphOn = options.graph !== false;
1095
+ let graphClient = false;
1096
+ let engine = null;
1097
+ const devtoolsBase = (!devtoolsOn ? ''
815
1098
  : redux ? `import { connectReduxDevtools as __sygnalReduxDevtools } from 'sygnal/devtools';__sygnalReduxDevtools();`
816
1099
  : `import 'sygnal/devtools';`) + (mcpOn ? `import '${MCP_CLIENT}';` : '');
1100
+ let devtoolsImport = devtoolsBase;
817
1101
  // What a dev entry gets: DevTools, then (unless diagnostics are 'off') flags + checks
818
- const devSnippet = devtoolsImport + (devOn ? flags + devImports : '');
1102
+ let devSnippet = devtoolsImport + (devOn ? flags + devImports : '');
819
1103
  const devInject = devOn || devtoolsOn;
820
1104
  let astroClient;
821
1105
  return {
@@ -824,6 +1108,10 @@ function sygnal(options = {}) {
824
1108
  isServe = env.command === 'serve';
825
1109
  isVitest = !!nodeProcess?.env?.VITEST;
826
1110
  root = config?.root ? path.resolve(config.root) : nodeProcess.cwd();
1111
+ // P-2: the graph page's app side, in the dev server only, when the page can exist
1112
+ graphClient = isServe && !isVitest && graphOn && devtoolsOn && graphAvailable(root);
1113
+ devtoolsImport = devtoolsBase + (graphClient ? `import '${GRAPH_CLIENT}';` : '');
1114
+ devSnippet = devtoolsImport + (devOn ? flags + devImports : '');
827
1115
  const result = {
828
1116
  // Ensure sygnal is bundled for SSR rather than externalized.
829
1117
  // Without this, Node fails to resolve sygnal's exports from
@@ -928,6 +1216,8 @@ function sygnal(options = {}) {
928
1216
  return DEV_CLIENT_ID;
929
1217
  if (source === MCP_CLIENT && mcpOn)
930
1218
  return MCP_CLIENT_ID;
1219
+ if (source === GRAPH_CLIENT && graphClient)
1220
+ return GRAPH_CLIENT_ID;
931
1221
  if (source === 'sygnal' && importer && wrapRun && runtimeImporters.has(cleanId(importer))) {
932
1222
  return RUNTIME_ID;
933
1223
  }
@@ -950,6 +1240,8 @@ function sygnal(options = {}) {
950
1240
  return devClientModule();
951
1241
  if (id === MCP_CLIENT_ID && mcpOn)
952
1242
  return mcpClientModule(mcpOptions);
1243
+ if (id === GRAPH_CLIENT_ID && graphClient)
1244
+ return graphClientModule();
953
1245
  if (id === RUNTIME_ID)
954
1246
  return runtimeModule(diagnostics);
955
1247
  // The checks register again once the real entry has loaded: a
@@ -969,15 +1261,27 @@ function sygnal(options = {}) {
969
1261
  if (mcpOn && server?.middlewares) {
970
1262
  attachMcp(server, root, mcpOptions, sygnalVersion(root));
971
1263
  }
972
- if (options.check === false)
1264
+ const checkOn = options.check !== false;
1265
+ if (!checkOn && !graphOn)
973
1266
  return;
974
1267
  const checkOptions = typeof options.check === 'object' && options.check ? options.check : {};
975
- // Deferred: the dev server doesn't wait for the first check
976
1268
  const checkDefaults = { strict: diagnostics.strict, ignore: diagnostics.ignore };
977
- setTimeout(() => {
978
- startChecker(server, root, checkOptions, checkDefaults, options.check !== undefined)
979
- .catch(err => server?.config?.logger?.warn?.(`[sygnal] sygnal-check could not start: ${err?.message || err}`));
980
- }, 0);
1269
+ // Deferred: the dev server doesn't wait for the first check. `engine`: the live graph
1270
+ // project (W-2), null without a sygnal-check that has it
1271
+ engine = new Promise((resolve) => {
1272
+ setTimeout(() => {
1273
+ startDev(server, root, checkOptions, checkDefaults, options.check !== undefined, checkOn, graphOn).then(resolve, (err) => {
1274
+ server?.config?.logger?.warn?.(`[sygnal] sygnal-check could not start: ${err?.message || err}`);
1275
+ resolve(null);
1276
+ });
1277
+ }, 0);
1278
+ });
1279
+ // W-2 (D543): the page and its stream, behind the MCP endpoint's guard; its URL in the banner
1280
+ if (graphOn && server?.middlewares) {
1281
+ server.middlewares.use(graphMiddleware(server, root, engine));
1282
+ if (graphAvailable(root))
1283
+ printGraphUrl(server);
1284
+ }
981
1285
  },
982
1286
  transform(code, id, opts) {
983
1287
  // SYG666 (PLAN-5 W-2): an adapter entry imported without its optional peers; every mode
@@ -986,7 +1290,10 @@ function sygnal(options = {}) {
986
1290
  ? checkPeers(this, adapters, id).then(() => devTransform.call(this, code, id, opts))
987
1291
  : devTransform.call(this, code, id, opts);
988
1292
  // 11. the words SYG103 may take as conditionally rendered markup (dev server, diagnostics on)
989
- const tokens = isServe && !isVitest && devOn && !opts?.ssr ? viewTokensTail(this, code, id) : null;
1293
+ const words = isServe && !isVitest && devOn && !opts?.ssr ? viewTokensTail(this, code, id) : null;
1294
+ // 12. P-2 (D544): the static keys of the module's components (dev server, graph on)
1295
+ const stamps = engine && isServe && !isVitest && !opts?.ssr ? componentStampTail(engine, id) : null;
1296
+ const tokens = words && stamps ? Promise.all([words, stamps]).then(([a, b]) => a + b) : words || stamps;
990
1297
  if (!tokens)
991
1298
  return result;
992
1299
  return Promise.all([result, tokens]).then(([r, tail]) => {
@@ -1078,6 +1385,25 @@ function sygnal(options = {}) {
1078
1385
  return done();
1079
1386
  }
1080
1387
  }
1388
+ // 12. PLAN-10 P-2 (D544): a module of the scanned files gets, in dev, a tail that sets each of its
1389
+ // components' static key (sygnal-check's D521 'file#name', from the live graph engine's last build,
1390
+ // built again first when the module's text changed) as a non-enumerable `__sygnalKey` on the
1391
+ // function; the runtime inspect() reports it as `key`, and the graph page joins instances to cards.
1392
+ function componentStampTail(engine, id) {
1393
+ const file = cleanId(id);
1394
+ if (!/\.[cm]?[jt]sx?$/.test(file) || id.includes('node_modules') || id.startsWith('\0'))
1395
+ return null;
1396
+ return engine.then((e) => {
1397
+ if (!e)
1398
+ return '';
1399
+ try {
1400
+ return stampTail(e.stampsFor(file) || []);
1401
+ }
1402
+ catch (_) {
1403
+ return '';
1404
+ }
1405
+ });
1406
+ }
1081
1407
  // 11. SYG103 (the dev runtime check of an intent selector that never matched) lets a selector
1082
1408
  // through as conditionally rendered when its words appear in the component's view; the runtime
1083
1409
  // can read only the view function's own source. A component module (one that sets `X.intent` or
@@ -1412,16 +1738,39 @@ function checkInclude(root, include, notice, label = 'check.include') {
1412
1738
  notice(`[sygnal] sygnal-check: no ${DEFAULT_INCLUDE.join('/, ')}/ directory under ${root}; checking the project root (set check.include to choose)`);
1413
1739
  return ['.'];
1414
1740
  }
1415
- /** Run sygnal-check now and after source changes; report to the terminal and the browser. */
1416
- async function startChecker(server, root, opts, defaults, explicit) {
1741
+ /**
1742
+ * Load sygnal-check and start what dev uses it for: the checker (`check`, reported to the terminal
1743
+ * and the browser) and the live graph engine (`graph`, PLAN-10 W-2: the page, its stream and the
1744
+ * component stamps). With an engine, both come from one build. Resolves to the engine, or null.
1745
+ */
1746
+ async function startDev(server, root, opts, defaults, explicit, checkOn, graphOn) {
1417
1747
  const mod = await loadSygnalCheck(root);
1418
1748
  const logger = server?.config?.logger || console;
1419
1749
  if (!mod || typeof mod.check !== 'function') {
1420
- if (explicit)
1750
+ if (explicit && checkOn)
1421
1751
  logger.info('[sygnal] sygnal-check is not installed, so static checks are off (npm i -D sygnal-check)');
1422
- return;
1752
+ return null;
1753
+ }
1754
+ const setup = checkSetup(mod, root, opts, defaults, (m) => logger.info(m));
1755
+ // PLAN-10 W-2: a sygnal-check with the live project and the page (feature-detected, so an older
1756
+ // one keeps the checker as it was)
1757
+ const engine = graphOn && setup.configAware && typeof mod.createLiveProject === 'function' && typeof mod.graphHtml === 'function'
1758
+ ? createEngine(mod, root, {
1759
+ paths: setup.include, strict: setup.checkOptions.strict, a11y: setup.checkOptions.a11y,
1760
+ ignore: setup.checkOptions.ignore, defaults: setup.checkOptions.defaults,
1761
+ }, logger, true)
1762
+ : null;
1763
+ if (checkOn)
1764
+ startChecker(server, root, mod, setup, opts, engine);
1765
+ if (engine) {
1766
+ if (!engine.last)
1767
+ engine.build();
1768
+ engine.watch(server);
1423
1769
  }
1424
- const notice = (m) => logger.info(m);
1770
+ return engine;
1771
+ }
1772
+ /** What sygnal-check checks, with which options (see the `check` option). */
1773
+ function checkSetup(mod, root, opts, defaults, notice) {
1425
1774
  // PLAN-7 C-5 (D299): a sygnal-check with config support resolves the settings itself:
1426
1775
  // explicit check.* options > its config file > the `diagnostics` defaults passed as `defaults`.
1427
1776
  // An older one gets exactly what it got before.
@@ -1457,6 +1806,16 @@ async function startChecker(server, root, opts, defaults, explicit) {
1457
1806
  a11y: opts.a11y === 'error' ? 'error' : 'warn',
1458
1807
  };
1459
1808
  }
1809
+ return { include, checkOptions, configAware };
1810
+ }
1811
+ /**
1812
+ * Run sygnal-check now and after source changes; report to the terminal and the browser. With the
1813
+ * live graph engine (W-2) the findings come from its builds (one build for the page and the
1814
+ * checker); else from check() on each change.
1815
+ */
1816
+ function startChecker(server, root, mod, setup, opts, engine) {
1817
+ const logger = server?.config?.logger || console;
1818
+ const { include, checkOptions, configAware } = setup;
1460
1819
  const a11y = checkOptions.a11y;
1461
1820
  // Only error-severity findings open Vite's overlay: while an overlay is open
1462
1821
  // Vite's client reloads the page on the first HMR update, so warnings stay
@@ -1485,14 +1844,18 @@ async function startChecker(server, root, opts, defaults, explicit) {
1485
1844
  }
1486
1845
  catch (_) { }
1487
1846
  };
1488
- const run = (initial = false) => {
1847
+ const run = (initial = false, built) => {
1489
1848
  let diags;
1490
- try {
1491
- diags = mod.check(include, checkOptions);
1492
- }
1493
- catch (err) {
1494
- logger.warn(`[sygnal] sygnal-check failed: ${err?.message || err}`, { timestamp: true });
1495
- return;
1849
+ if (built)
1850
+ diags = built;
1851
+ else {
1852
+ try {
1853
+ diags = mod.check(include, checkOptions);
1854
+ }
1855
+ catch (err) {
1856
+ logger.warn(`[sygnal] sygnal-check failed: ${err?.message || err}`, { timestamp: true });
1857
+ return;
1858
+ }
1496
1859
  }
1497
1860
  // A sygnal-check from before D144 reports SYG7xx as errors under strict: keep them warnings
1498
1861
  // (one with config support postdates D144 and resolves a11y itself)
@@ -1533,7 +1896,15 @@ async function startChecker(server, root, opts, defaults, explicit) {
1533
1896
  if (!initial)
1534
1897
  broadcast(changed);
1535
1898
  };
1536
- run(true);
1899
+ if (engine) {
1900
+ // every build of the engine: the first on start, then after changes (its own watcher)
1901
+ let first = !engine.last;
1902
+ engine.onBuild((b) => { const initial = first; first = false; run(initial, b.diagnostics || []); });
1903
+ if (engine.last)
1904
+ run(true, engine.last.diagnostics || []);
1905
+ }
1906
+ else
1907
+ run(true);
1537
1908
  // A page that loads (or reloads) asks for the current findings: answer
1538
1909
  // that client only, never every client.
1539
1910
  try {
@@ -1548,6 +1919,8 @@ async function startChecker(server, root, opts, defaults, explicit) {
1548
1919
  });
1549
1920
  }
1550
1921
  catch (_) { }
1922
+ if (engine)
1923
+ return;
1551
1924
  let timer;
1552
1925
  const onChange = (file) => {
1553
1926
  if (file.split(/[\\/]/).includes('node_modules'))