@anlyx/ui 0.1.2 → 0.1.5

package/dist/overlay/types.d.ts

@@ -0,0 +1,38 @@
+import type { Endpoint, EndpointFlow, PageStoryboard } from "@anlyx/core";
+export type OverlayAction = {
+    id?: string;
+    type?: string;
+    label?: string;
+    selector?: string;
+};
+export type OverlayApiEvent = {
+    id: string;
+    method: string;
+    path: string;
+    status: string | number;
+    durationMs: number;
+    count?: number;
+    lastSeenAt?: number;
+    source?: "action" | "background" | "health";
+    triggeredBy?: OverlayAction | null;
+    matchedEndpoint?: Endpoint | null;
+    matchedFlow?: EndpointFlow | null;
+    matchedPages?: PageStoryboard[];
+};
+export type OverlayScannedHint = {
+    pageRoute: string;
+    pageFilePath?: string;
+    method: string;
+    path: string;
+    endpointId?: string;
+    endpointLabel?: string;
+    evidence: "scanned-page" | "capture";
+};
+export type FlowDrawerProps = {
+    selectedEvent: OverlayApiEvent | null;
+    events: OverlayApiEvent[];
+    latestAction?: OverlayAction | null;
+    scannedHints?: OverlayScannedHint[];
+    loadError?: string | null;
+    runtimeBaseUrl?: string;
+};

package/dist/overlay/types.js

@@ -0,0 +1 @@
+export {};

package/dist/overlay/ui.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+export declare function Card({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): JSX.Element;
+export declare function Badge({ children, tone, className }: {
+    children: ReactNode;
+    tone?: "blue" | "green" | "amber" | "violet" | "gray" | "neutral";
+    className?: string;
+}): JSX.Element;
+export declare function Tooltip({ children, content }: {
+    children: ReactNode;
+    content: string;
+}): JSX.Element;
+export declare function Table({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): JSX.Element;

package/dist/overlay/ui.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Card({ children, className = "" }) {
+    return _jsx("div", { className: `anlyx-ov-card ${className}`.trim(), children: children });
+}
+export function Badge({ children, tone = "neutral", className = "" }) {
+    return (_jsx("span", { className: `anlyx-ov-badge anlyx-ov-badge--${tone} ${className}`.trim(), children: children }));
+}
+export function Tooltip({ children, content }) {
+    return _jsx("span", { title: content, children: children });
+}
+export function Table({ children, className = "" }) {
+    return _jsx("table", { className: `anlyx-ov-table ${className}`.trim(), children: children });
+}

package/dist/readme-demo/ReadmeDemoApp.d.ts

@@ -0,0 +1,15 @@
+import "@xyflow/react/dist/style.css";
+import "../overlay/overlay.css";
+import "./readme-demo.css";
+import type { Endpoint, EndpointFlow } from "@anlyx/core";
+export type FixtureDetailFlow = {
+    endpoint: Endpoint;
+    flow: EndpointFlow;
+};
+export type ReadmeDemoAppProps = {
+    eyebrow?: string;
+    fixtureDetail?: FixtureDetailFlow | null;
+    iconSrc?: string;
+    logoSrc?: string;
+};
+export declare function ReadmeDemoApp({ eyebrow, fixtureDetail: fixtureDetailProp, iconSrc, logoSrc }?: ReadmeDemoAppProps): JSX.Element;

package/dist/readme-demo/ReadmeDemoApp.js

@@ -0,0 +1,184 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "@xyflow/react/dist/style.css";
+import "../overlay/overlay.css";
+import "./readme-demo.css";
+import { useEffect, useMemo, useState } from "react";
+import { FlowDrawer } from "../overlay/FlowDrawer.js";
+const demoOrder = ["detail", "search", "save", "admin"];
+const fixtureEndpointsUrl = "/fixtures/spring-next-sample/expected/endpoints.json";
+const fixtureFlowsUrl = "/fixtures/spring-next-sample/expected/flows.json";
+const defaultLogoSrc = "/docs/assets/brand/anlyx-logo-transparent.png";
+const defaultIconSrc = "/docs/assets/brand/anlyx-icon-transparent.png";
+const flows = {
+    search: makeFlow("GET", "/api/public/search", [
+        ["endpoint:search", "endpoint", "GET /api/public/search"],
+        ["controller:search", "controller", "PublicViewController#search"],
+        ["service:search", "service", "SearchIndexService#find"],
+        ["repository:search", "repository", "BenefitSearchRepository#query"],
+        ["database:search", "database", "benefits_search_index"]
+    ]),
+    detail: makeFlow("GET", "/api/public/benefits/{id}", [
+        ["endpoint:detail", "endpoint", "GET /api/public/benefits/{id}"],
+        ["controller:detail", "controller", "PublicBenefitController#getDetail"],
+        ["service:detail", "service", "PublicBenefitService#getDetail"],
+        ["repository:detail", "repository", "BenefitRepository#findById"],
+        ["database:detail", "database", "benefits"]
+    ]),
+    save: makeFlow("POST", "/api/account/saved-benefits", [
+        ["endpoint:save", "endpoint", "POST /api/account/saved-benefits"],
+        ["controller:save", "controller", "SavedBenefitController#create"],
+        ["service:save", "service", "SavedBenefitService#save"],
+        ["repository:save", "repository", "SavedBenefitRepository#insert"],
+        ["database:save", "database", "saved_benefit"]
+    ]),
+    admin: makeFlow("POST", "/api/admin/benefits", [
+        ["endpoint:admin", "endpoint", "POST /api/admin/benefits"],
+        ["controller:admin", "controller", "AdminBenefitController#create"],
+        ["policy:admin", "validator", "AdminRolePolicy#check"],
+        ["service:admin", "service", "AdminBenefitService#create"],
+        ["repository:admin", "repository", "BenefitRepository#save"]
+    ])
+};
+const endpoints = {
+    search: endpoint("GET", "/api/public/search", "PublicViewController#search"),
+    detail: endpoint("GET", "/api/public/benefits/{id}", "PublicBenefitController#getDetail"),
+    save: endpoint("POST", "/api/account/saved-benefits", "SavedBenefitController#create"),
+    admin: endpoint("POST", "/api/admin/benefits", "AdminBenefitController#create")
+};
+const baseEvents = {
+    search: event("search", "GET", "/api/public/search", 200, 28, "Clicked Search benefits"),
+    detail: event("detail", "GET", "/api/public/benefits/123", 200, 34, "Opened benefit detail"),
+    save: event("save", "POST", "/api/account/saved-benefits", 401, 31, "Clicked Save to my box"),
+    admin: event("admin", "POST", "/api/admin/benefits", 403, 42, "Clicked Try admin action")
+};
+export function ReadmeDemoApp({ eyebrow = "Real UI preview", fixtureDetail: fixtureDetailProp, iconSrc = defaultIconSrc, logoSrc = defaultLogoSrc } = {}) {
+    const [selectedKey, setSelectedKey] = useState("detail");
+    const fetchedFixtureDetail = useFixtureDetailFlow(fixtureDetailProp !== undefined);
+    const fixtureDetail = fixtureDetailProp ?? fetchedFixtureDetail;
+    const hydratedEvents = useMemo(() => Object.fromEntries(demoOrder.map((key) => [key, hydrateEvent(key, key === "detail" ? fixtureDetail : null)])), [fixtureDetail]);
+    const selectedEvent = hydratedEvents[selectedKey];
+    const eventList = useMemo(() => [
+        selectedEvent,
+        {
+            id: "background-account",
+            method: "GET",
+            path: "/api/account/me",
+            status: 401,
+            durationMs: 19,
+            count: 3,
+            source: "background",
+            matchedEndpoint: endpoint("GET", "/api/account/me", "AccountController#me"),
+            matchedFlow: null
+        },
+        ...demoOrder.filter((key) => key !== selectedKey).map((key) => hydratedEvents[key])
+    ], [hydratedEvents, selectedEvent, selectedKey]);
+    return (_jsxs("main", { className: "anlyx-readme-demo", children: [_jsxs("section", { className: "anlyx-readme-demo__control", children: [_jsxs("div", { className: "anlyx-readme-demo__intro", children: [_jsx("img", { src: logoSrc, alt: "Anlyx" }), _jsxs("div", { children: [_jsx("p", { className: "anlyx-readme-demo__eyebrow", children: eyebrow }), _jsx("h1", { children: "Click an action. See the backend path." }), _jsx("p", { children: "Rendered by the same Flow Drawer component used by the Anlyx overlay." })] })] }), _jsxs("div", { className: "anlyx-readme-demo__actions", "aria-label": "Demo actions", children: [_jsxs("div", { className: "anlyx-readme-demo__actions-head", children: [_jsx("span", { children: "Demo buttons" }), _jsx("small", { children: "Pick one request" })] }), _jsx(DemoButton, { active: selectedKey === "search", index: "01", method: "GET", label: "Search benefits", meta: "GET /api/public/search", onClick: () => setSelectedKey("search"), demoKey: "search" }), _jsx(DemoButton, { active: selectedKey === "detail", index: "02", method: "GET", label: "Open benefit detail", meta: "GET /api/public/benefits/{id}", onClick: () => setSelectedKey("detail"), demoKey: "detail" }), _jsx(DemoButton, { active: selectedKey === "save", index: "03", method: "POST", label: "Save to my box", meta: "POST /api/account/saved-benefits", onClick: () => setSelectedKey("save"), demoKey: "save" }), _jsx(DemoButton, { active: selectedKey === "admin", index: "04", method: "POST", label: "Try admin action", meta: "POST /api/admin/benefits", onClick: () => setSelectedKey("admin"), demoKey: "admin" })] })] }), _jsxs("section", { className: "anlyx-readme-demo__drawer-shell", "aria-label": "Anlyx Flow Drawer", children: [_jsxs("header", { className: "anlyx-readme-demo__drawer-head", children: [_jsxs("div", { className: "anlyx-readme-demo__drawer-brand", children: [_jsx("img", { src: iconSrc, alt: "" }), _jsxs("div", { children: [_jsx("strong", { children: "Anlyx Flow Drawer" }), _jsx("span", { children: "Actual component preview" })] })] }), _jsxs("div", { className: "anlyx-readme-demo__drawer-tools", children: [_jsx("span", { children: "Live" }), _jsx("span", { children: "fixture-backed" })] })] }), _jsx(FlowDrawer, { events: eventList, latestAction: selectedEvent.triggeredBy ?? null, scannedHints: [], selectedEvent: selectedEvent })] })] }));
+}
+function useFixtureDetailFlow(skip) {
+    const [fixtureDetail, setFixtureDetail] = useState(null);
+    useEffect(() => {
+        if (skip) {
+            return undefined;
+        }
+        const controller = new AbortController();
+        const loadFixture = async () => {
+            try {
+                const [endpointResponse, flowResponse] = await Promise.all([
+                    fetch(fixtureEndpointsUrl, { signal: controller.signal }),
+                    fetch(fixtureFlowsUrl, { signal: controller.signal })
+                ]);
+                if (!endpointResponse.ok || !flowResponse.ok) {
+                    throw new Error("README fixture request failed");
+                }
+                const fixtureEndpoints = (await endpointResponse.json());
+                const fixtureFlows = (await flowResponse.json());
+                const flow = fixtureFlows.find((candidate) => candidate.endpointId === "endpoint:get:/api/public/benefits/{id}");
+                const endpoint = fixtureEndpoints.find((candidate) => candidate.id === "endpoint:get:/api/public/benefits/{id}");
+                if (flow && endpoint) {
+                    setFixtureDetail({ endpoint, flow: toBackendOnlyFlow(flow) });
+                }
+            }
+            catch (error) {
+                if (!controller.signal.aborted) {
+                    console.warn("[anlyx] Falling back to embedded README demo data.", error);
+                }
+            }
+        };
+        void loadFixture();
+        return () => controller.abort();
+    }, [skip]);
+    return fixtureDetail;
+}
+function toBackendOnlyFlow(flow) {
+    const backendNodeIds = new Set(flow.nodes.filter((node) => node.type !== "page").map((node) => node.id));
+    return {
+        ...flow,
+        nodes: flow.nodes.filter((node) => backendNodeIds.has(node.id)),
+        edges: flow.edges.filter((edge) => backendNodeIds.has(edge.from) && backendNodeIds.has(edge.to)),
+        mainPath: flow.mainPath.filter((nodeId) => backendNodeIds.has(nodeId)),
+        subFlows: flow.subFlows.map((subFlow) => ({
+            ...subFlow,
+            nodes: subFlow.nodes.filter((node) => node.type !== "page"),
+            edges: subFlow.edges.filter((edge) => !edge.from.startsWith("page:") && !edge.to.startsWith("page:"))
+        }))
+    };
+}
+function hydrateEvent(key, fixtureDetail) {
+    return {
+        ...baseEvents[key],
+        matchedEndpoint: fixtureDetail?.endpoint ?? endpoints[key],
+        matchedFlow: fixtureDetail?.flow ?? flows[key]
+    };
+}
+function DemoButton({ active, index, method, label, meta, onClick, demoKey }) {
+    return (_jsxs("button", { "aria-pressed": active, className: "anlyx-readme-demo__action", "data-demo": demoKey, type: "button", onClick: onClick, children: [_jsx("span", { className: "anlyx-readme-demo__action-index", children: index }), _jsxs("span", { className: "anlyx-readme-demo__action-copy", children: [_jsx("strong", { children: label }), _jsx("span", { children: meta })] }), _jsx("span", { className: "anlyx-readme-demo__method", children: method })] }));
+}
+function makeFlow(method, path, nodes) {
+    const mainPath = nodes.map(([id]) => id);
+    return {
+        endpointId: `${method}:${path}`,
+        nodes: nodes.map(([id, type, label]) => ({
+            id,
+            type,
+            label,
+            confidence: "high"
+        })),
+        edges: mainPath.slice(1).map((to, index) => ({
+            id: `edge:${mainPath[index]}:${to}`,
+            from: mainPath[index] ?? "",
+            to,
+            kind: "main",
+            confidence: "high"
+        })),
+        mainPath,
+        subFlows: []
+    };
+}
+function endpoint(method, path, handler) {
+    return {
+        id: `${method}:${path}`,
+        method,
+        path,
+        supportLevel: "deep",
+        handler,
+        confidence: "high"
+    };
+}
+function event(id, method, path, status, durationMs, label) {
+    return {
+        id,
+        method,
+        path,
+        status,
+        durationMs,
+        count: id === "save" ? 2 : 1,
+        source: "action",
+        triggeredBy: {
+            type: "Clicked",
+            label,
+            selector: `button[data-demo="${id}"]`
+        },
+        matchedEndpoint: null,
+        matchedFlow: null
+    };
+}

package/dist/readme-demo/readme-demo-entry.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/readme-demo/readme-demo-entry.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createRoot } from "react-dom/client";
+import { ReadmeDemoApp } from "./ReadmeDemoApp.js";
+const root = document.getElementById("root");
+if (!root) {
+    throw new Error("Missing #root for Anlyx README demo");
+}
+createRoot(root).render(_jsx(ReadmeDemoApp, {}));