@anlyx/ui 0.1.2 → 0.1.3

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,4 @@
+import "@xyflow/react/dist/style.css";
+import "../overlay/overlay.css";
+import "./readme-demo.css";
+export declare function ReadmeDemoApp(): JSX.Element;

package/dist/readme-demo/ReadmeDemoApp.js

@@ -0,0 +1,126 @@
+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 { useMemo, useState } from "react";
+import { FlowDrawer } from "../overlay/FlowDrawer.js";
+const demoOrder = ["search", "detail", "save", "admin"];
+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 events = {
+    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")
+};
+Object.entries(events).forEach(([key, value]) => {
+    const demoKey = key;
+    value.matchedEndpoint = endpoints[demoKey];
+    value.matchedFlow = flows[demoKey];
+});
+export function ReadmeDemoApp() {
+    const [selectedKey, setSelectedKey] = useState("save");
+    const selectedEvent = events[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) => events[key])
+    ], [selectedEvent, selectedKey]);
+    return (_jsxs("main", { className: "anlyx-readme-demo", children: [_jsxs("section", { className: "anlyx-readme-demo__control", children: [_jsx("div", { className: "anlyx-readme-demo__logo-card", children: _jsx("img", { src: "/docs/assets/brand/anlyx-logo-card.png", alt: "Anlyx" }) }), _jsxs("div", { children: [_jsx("p", { className: "anlyx-readme-demo__eyebrow", children: "Real Anlyx UI demo" }), _jsx("h1", { children: "Click an action. Watch the drawer remap the backend flow." }), _jsxs("p", { children: ["This README animation renders the actual Anlyx Flow Drawer component from", _jsx("code", { children: "@anlyx/ui" }), "."] })] }), _jsxs("div", { className: "anlyx-readme-demo__actions", "aria-label": "Demo actions", children: [_jsx(DemoButton, { active: selectedKey === "search", label: "Search benefits", meta: "GET /api/public/search", onClick: () => setSelectedKey("search"), demoKey: "search" }), _jsx(DemoButton, { active: selectedKey === "detail", label: "Open benefit detail", meta: "GET /api/public/benefits/{id}", onClick: () => setSelectedKey("detail"), demoKey: "detail" }), _jsx(DemoButton, { active: selectedKey === "save", label: "Save to my box", meta: "POST /api/account/saved-benefits", onClick: () => setSelectedKey("save"), demoKey: "save" }), _jsx(DemoButton, { active: selectedKey === "admin", 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: "/docs/assets/brand/anlyx-icon-card.png", 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: "matched" })] })] }), _jsx(FlowDrawer, { events: eventList, latestAction: selectedEvent.triggeredBy ?? null, scannedHints: [], selectedEvent: selectedEvent })] })] }));
+}
+function DemoButton({ active, label, meta, onClick, demoKey }) {
+    return (_jsxs("button", { "aria-pressed": active, className: "anlyx-readme-demo__action", "data-demo": demoKey, type: "button", onClick: onClick, children: [_jsx("strong", { children: label }), _jsx("span", { children: meta })] }));
+}
+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, {}));