@teacss/inspector 0.9.3 → 0.10.2

package/README.md

@@ -1,25 +1,21 @@
 # @teacss/inspector
 
-Development inspector for TeaCSS Vite projects.
+The TeaCSS inspector: a page on the development server that shows the resolved project, each module's tokens, the generated CSS and a REPL with completion. Token lookup is an endpoint, not a view: `GET /__teacss/api/token/<token>` (token percent-encoded) returns one token's match info as JSON. It reads the Rust engine (`@teacss/engine`) and answers loopback requests only.
+
+You do not install it yourself. `@teacss/vite`, and so `@teacss/astro`, depends on it and serves it at `/__teacss` on the dev server. It never runs in a build. Pass `inspector: false` to the plugin to turn it off:
 
 ```ts
+// vite.config.ts
+import { teacss } from "@teacss/vite";
 import { defineConfig } from "vite";
-import { pluginInspector } from "@teacss/inspector";
-import { pluginTeacss } from "@teacss/vite";
 
-export default defineConfig({
-  plugins: [pluginTeacss(), pluginInspector()],
-});
+export default defineConfig({ plugins: [teacss({ inspector: false })] });
 ```
 
-Start Vite and open `http://localhost:5173/__teacss/` to inspect the active
-project, scanned modules, generated CSS, and REPL output.
-
-Inspector APIs return project data and module source only when both the request
-host and actual socket peer are loopback. Exposing Vite on a network interface
-does not expose this data remotely.
+The package exports `createInspectorMiddleware(project)`, a Connect-compatible middleware over a `Project` from `@teacss/engine`, for hosts that mount it themselves.
 
-The inspector observes the Vite plugin's live context and does not generate
-production CSS or provide editor features.
+## Documentation
 
-Pre-1.0.
+- [The inspector](https://github.com/teacss/teacss-rs/blob/master/skills/teacss/references/tooling.md#inspector)
+- [Build integrations](https://github.com/teacss/teacss-rs/blob/master/skills/teacss/references/integrations.md)
+- [The TeaCSS skill](https://github.com/teacss/teacss-rs/blob/master/skills/teacss/SKILL.md) for syntax, presets and tooling

package/dist/access.d.ts

@@ -0,0 +1,2 @@
+export declare function isLoopbackRequest(hostHeader: string | undefined, remoteAddress: string | undefined): boolean;
+//# sourceMappingURL=access.d.ts.map

package/dist/access.js

@@ -0,0 +1,30 @@
+// The inspector answers only loopback peers that also name a loopback host: the Host header alone is
+// client-controlled, and `vite --host` would otherwise hand the config, module tokens and REPL to the LAN.
+import { BlockList, isIP } from "node:net";
+const loopback = new BlockList();
+loopback.addSubnet("127.0.0.0", 8, "ipv4");
+loopback.addAddress("::1", "ipv6");
+function isLoopbackAddress(value) {
+    if (!value)
+        return false;
+    const address = value.startsWith("[") && value.endsWith("]") ? value.slice(1, -1) : value;
+    const family = isIP(address);
+    return family !== 0 && loopback.check(address, family === 4 ? "ipv4" : "ipv6");
+}
+/** The hostname of a `Host` header (`name`, `name:port`, `[v6]`, `[v6]:port`); undefined when malformed. */
+function hostnameOf(header) {
+    const value = header?.trim().toLowerCase();
+    if (!value)
+        return undefined;
+    if (isIP(value))
+        return value;
+    const match = value.startsWith("[") ? /^\[([^\]]+)\](?::(\d+))?$/.exec(value) : /^([^:]+)(?::(\d+))?$/.exec(value);
+    if (!match || (match[2] !== undefined && Number(match[2]) > 65_535))
+        return undefined;
+    return value.startsWith("[") ? match[1] : match[1]?.replace(/\.$/, "");
+}
+export function isLoopbackRequest(hostHeader, remoteAddress) {
+    const hostname = hostnameOf(hostHeader);
+    return (hostname === "localhost" || isLoopbackAddress(hostname)) && isLoopbackAddress(remoteAddress);
+}
+//# sourceMappingURL=access.js.map

package/dist/client/assets/index-BsirYgOp.css

@@ -0,0 +1 @@
+:root{--bg: #0f1115;--panel: #161a21;--panel-2: #1c2129;--border: #2a3038;--text: #d7dce3;--muted: #8b95a3;--accent: #3ddc97;--accent-2: #5b9dff;--radius: 8px;color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}code,pre,.token,.css{font-family:ui-monospace,SF Mono,JetBrains Mono,Menlo,monospace}.muted{color:var(--muted)}.small{font-size:12px}.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app{display:grid;grid-template-columns:280px 1fr;height:100vh}.sidebar{border-right:1px solid var(--border);background:var(--panel);display:flex;flex-direction:column;padding:16px;gap:16px;overflow:hidden}.content{overflow:auto;padding:24px 32px}.brand{display:flex;align-items:center;gap:10px}.brand .logo{font-size:26px}nav{display:flex;flex-direction:column;gap:2px}.navlink{display:block;padding:7px 10px;border-radius:6px;color:var(--text);text-decoration:none}.navlink:hover{background:var(--panel-2)}.navlink.active{background:var(--panel-2);color:var(--accent)}.side-meta{display:flex;flex-direction:column;gap:10px;padding-bottom:4px;border-bottom:1px solid var(--border)}.modules{overflow:auto;flex:1}.modules-head{position:sticky;top:0;background:var(--panel);padding:4px 0}.modules ul{list-style:none;margin:0;padding:0}.modules a{display:block;padding:4px 8px;border-radius:5px;color:var(--muted);text-decoration:none;font-size:12px;font-family:ui-monospace,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.modules a:hover{color:var(--text);background:var(--panel-2)}.modules a.active{color:var(--accent-2);background:var(--panel-2)}.view-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}.view-head h1{font-size:20px;margin:0}section{margin-bottom:28px}section h2{font-size:14px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:0 0 10px}button,.toggle{background:var(--panel-2);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:6px 12px;cursor:pointer;font:inherit}button:hover{border-color:var(--accent)}.toggle{display:inline-flex;align-items:center;gap:6px}.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-bottom:28px}.stat{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px}.stat-value{font-size:22px;font-weight:600;color:var(--accent)}.stat-label{color:var(--muted);font-size:12px}.layers{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}.layers li{display:flex;gap:8px;align-items:center;background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:6px 10px}.filter{width:100%;margin-bottom:10px;padding:8px 10px;background:var(--panel);border:1px solid var(--border);border-radius:6px;color:var(--text);font:inherit}table.matched{width:100%;border-collapse:collapse}table.matched th,table.matched td{text-align:left;padding:6px 10px;border-bottom:1px solid var(--border);vertical-align:top}table.matched th{color:var(--muted);font-weight:500;font-size:12px}.num{text-align:right;font-variant-numeric:tabular-nums}.token{color:var(--accent-2)}.css{color:var(--muted);white-space:pre-wrap;word-break:break-word}.tag{background:var(--panel-2);border-radius:4px;padding:1px 6px;font-size:12px}.modlink{color:var(--muted);margin-right:6px;text-decoration:none}.modlink:hover{color:var(--accent-2)}.code{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;overflow:auto;white-space:pre-wrap;word-break:break-word;font-size:12.5px;max-height:60vh}.code.source{white-space:pre}.repl-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;height:calc(100vh - 130px)}.repl-input{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);padding:14px 16px;resize:none;font-family:ui-monospace,monospace;font-size:13px}.repl-editor{display:flex;flex-direction:column;gap:8px;min-height:0}.repl-editor .repl-input{flex:1}.suggest{list-style:none;margin:0;padding:4px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);max-height:200px;overflow:auto;font-family:ui-monospace,monospace;font-size:12.5px}.suggest li{display:flex;justify-content:space-between;gap:12px;padding:4px 8px;border-radius:4px;cursor:pointer}.suggest li.active,.suggest li:hover{background:var(--border)}.suggest .muted{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.repl-output{display:flex;flex-direction:column;gap:8px;overflow:hidden}.repl-output .code{flex:1;max-height:none}.state{color:var(--muted);padding:40px 0}.state.error{color:#ff6b6b}