@superxd-studio/adptr 0.5.0

package/examples/web-interactions/src/main.tsx

@@ -0,0 +1,116 @@
+import { useState } from "react";
+import { createRoot } from "react-dom/client";
+import { Tabs, Button } from "@superxd-studio/adptr/ui";
+import "@superxd-studio/adptr/styles.css";
+import "@superxd-studio/adptr/fonts.css";
+import {
+  Foundation,
+  Presentation,
+  AgentExample,
+  ArtifactExample,
+  FeedbackExample,
+  HistoryExample,
+} from "./examples";
+import { layerCopy as copy } from "./copy";
+function App() {
+  const [dark, setDark] = useState(false);
+  return (
+    <div className={`sxd min-h-dvh bg-surface-muted text-fg ${dark ? "dark" : ""}`}>
+      <main className="mx-auto flex max-w-2xl flex-col gap-8 p-6">
+        <h1 className="type-title text-fg-emphasis">{copy.consumerTitle}</h1>
+        <Button onPress={() => setDark(!dark)} aria-pressed={dark}>
+          {copy.consumerTheme}
+        </Button>
+        <Tabs
+          label={copy.consumerTitle}
+          items={[
+            {
+              id: "foundations",
+              label: copy.consumerFoundations,
+              content: (
+                <div className="flex flex-col gap-6">
+                  {[
+                    "checkbox",
+                    "checkbox-group",
+                    "radio-group",
+                    "select",
+                    "slider",
+                    "toggle",
+                    "form",
+                    "menu",
+                    "accordion",
+                    "tabs",
+                    "tooltip",
+                    "dialog",
+                    "pagination",
+                    "breadcrumbs",
+                    "card",
+                    "badge",
+                    "progress",
+                    "separator",
+                    "aspect-ratio",
+                    "keyboard-hint",
+                    "table",
+                    "toast",
+                  ].map((id) => (
+                    <section key={id}>
+                      <h2 className="mb-3 type-heading">
+                        {copy.titles[id as keyof typeof copy.titles]}
+                      </h2>
+                      <Foundation id={id} />
+                    </section>
+                  ))}
+                </div>
+              ),
+            },
+            { id: "agent", label: copy.titles["agent-plan"], content: <AgentExample /> },
+            { id: "artifact", label: copy.titles.artifact, content: <ArtifactExample /> },
+            {
+              id: "feedback",
+              label: copy.titles["response-feedback"],
+              content: <FeedbackExample />,
+            },
+            {
+              id: "history",
+              label: copy.titles["conversation-history"],
+              content: <HistoryExample />,
+            },
+            {
+              id: "presentations",
+              label: copy.consumerPresentations,
+              content: (
+                <div className="flex flex-col gap-6">
+                  {[
+                    "reasoning",
+                    "tool-presentation",
+                    "sources",
+                    "citation",
+                    "retrieval-inspection",
+                    "confidence",
+                    "guardrail",
+                    "agent-status",
+                    "connection-status",
+                    "composer-controls",
+                    "quoted-reply",
+                    "execution-inspector",
+                    "observability",
+                  ].map((id) => (
+                    <section key={id}>
+                      <h2 className="mb-3 type-heading">
+                        {copy.titles[id as keyof typeof copy.titles]}
+                      </h2>
+                      <Presentation id={id} />
+                    </section>
+                  ))}
+                </div>
+              ),
+            },
+          ]}
+        />
+      </main>
+    </div>
+  );
+}
+const root = document.getElementById("root");
+if (!root) throw new Error("Missing root");
+createRoot(root).render(<App />);

package/examples/web-interactions/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "allowArbitraryExtensions": true
+  },
+  "include": ["src"]
+}

package/examples/web-review/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>SuperXD independent consumer</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/examples/web-review/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "superxd-review-consumer",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 127.0.0.1 --port 5301",
+    "build": "tsc --noEmit && vite build"
+  },
+  "dependencies": {
+    "@superxd-studio/adptr": "file:../..",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "typescript": "~6.0",
+    "vite": "^8.3.1"
+  }
+}

package/examples/web-review/src/main.tsx

@@ -0,0 +1,59 @@
+import { useState } from "react";
+import { createRoot } from "react-dom/client";
+import {
+  ReviewController,
+  createHttpReviewAdapter,
+  type ReviewAdapter,
+} from "@superxd-studio/adptr/review";
+import { DraftReview } from "@superxd-studio/adptr/web";
+import "@superxd-studio/adptr/styles.css";
+import "@superxd-studio/adptr/fonts.css";
+function App() {
+  const [controller] = useState(() => {
+    let adapter: Promise<ReviewAdapter> | undefined;
+    async function connect() {
+      return (adapter ??= fetch("http://127.0.0.1:5194/sessions", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ scenario: "normal" }),
+      })
+        .then(async (response) => {
+          if (!response.ok) throw new Error("Example not available");
+          const value: unknown = await response.json();
+          if (
+            !value ||
+            typeof value !== "object" ||
+            !("id" in value) ||
+            !("token" in value) ||
+            typeof value.id !== "string" ||
+            !/^[\w-]{1,100}$/.test(value.id) ||
+            typeof value.token !== "string" ||
+            !/^[a-f0-9]{64}$/.test(value.token)
+          )
+            throw new Error("Invalid local session");
+          return createHttpReviewAdapter({
+            endpoint: `http://127.0.0.1:5194/reviews/${value.id}`,
+            headers: () => ({ authorization: `Bearer ${value.token}` }),
+          });
+        })
+        .catch((error) => {
+          adapter = undefined;
+          throw error;
+        }));
+    }
+    return new ReviewController({
+      load: async (signal) => (await connect()).load(signal),
+      decide: async (decision, signal) => (await connect()).decide(decision, signal),
+      recover: async (id, signal) => (await connect()).recover(id, signal),
+    });
+  });
+  return (
+    <main className="mx-auto max-w-6xl bg-surface-muted p-6">
+      <h1 className="mb-8 type-title text-fg-emphasis">Your draft. Your decision.</h1>
+      <DraftReview controller={controller} />
+    </main>
+  );
+}
+const root = document.getElementById("root");
+if (!root) throw new Error("Missing root");
+createRoot(root).render(<App />);

package/examples/web-review/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "allowArbitraryExtensions": true
+  },
+  "include": ["src"]
+}

package/fonts.css

@@ -0,0 +1,117 @@
+/* instrument-sans-latin-ext-wght-normal */
+@font-face {
+  font-family: 'Instrument Sans Variable';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400 700;
+  src: url(./assets/instrument-sans-latin-ext-wght-normal.woff2) format('woff2-variations');
+  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+
+/* instrument-sans-latin-wght-normal */
+@font-face {
+  font-family: 'Instrument Sans Variable';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400 700;
+  src: url(./assets/instrument-sans-latin-wght-normal.woff2) format('woff2-variations');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+/* ibm-plex-mono-cyrillic-ext-400-normal */
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(./assets/ibm-plex-mono-cyrillic-ext-400-normal.woff2) format('woff2');
+  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
+}
+
+/* ibm-plex-mono-cyrillic-400-normal */
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(./assets/ibm-plex-mono-cyrillic-400-normal.woff2) format('woff2');
+  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
+}
+
+/* ibm-plex-mono-vietnamese-400-normal */
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(./assets/ibm-plex-mono-vietnamese-400-normal.woff2) format('woff2');
+  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
+}
+
+/* ibm-plex-mono-latin-ext-400-normal */
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(./assets/ibm-plex-mono-latin-ext-400-normal.woff2) format('woff2');
+  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+
+/* ibm-plex-mono-latin-400-normal */
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(./assets/ibm-plex-mono-latin-400-normal.woff2) format('woff2');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+/* ibm-plex-mono-cyrillic-ext-500-normal */
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 500;
+  src: url(./assets/ibm-plex-mono-cyrillic-ext-500-normal.woff2) format('woff2');
+  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
+}
+
+/* ibm-plex-mono-cyrillic-500-normal */
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 500;
+  src: url(./assets/ibm-plex-mono-cyrillic-500-normal.woff2) format('woff2');
+  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
+}
+
+/* ibm-plex-mono-vietnamese-500-normal */
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 500;
+  src: url(./assets/ibm-plex-mono-vietnamese-500-normal.woff2) format('woff2');
+  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
+}
+
+/* ibm-plex-mono-latin-ext-500-normal */
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 500;
+  src: url(./assets/ibm-plex-mono-latin-ext-500-normal.woff2) format('woff2');
+  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+
+/* ibm-plex-mono-latin-500-normal */
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 500;
+  src: url(./assets/ibm-plex-mono-latin-500-normal.woff2) format('woff2');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}