zudoku 0.0.2-dev.0

package/src/app/plugins/openapi/graphql/env.d.ts

@@ -0,0 +1,48 @@
+/* eslint-disable */
+/* prettier-ignore */
+
+/** An IntrospectionQuery representation of your schema.
+ *
+ * @remarks
+ * This is an introspection of your schema saved as a file by GraphQLSP.
+ * It will automatically be used by `gql.tada` to infer the types of your GraphQL documents.
+ * If you need to reuse this data or update your `scalars`, update `tadaOutputLocation` to
+ * instead save to a .ts instead of a .d.ts file.
+ */
+export type introspection = {
+  name: never;
+  query: 'Query';
+  mutation: never;
+  subscription: never;
+  types: {
+    'Boolean': unknown;
+    'EncodingItem': { kind: 'OBJECT'; name: 'EncodingItem'; fields: { 'allowReserved': { name: 'allowReserved'; type: { kind: 'SCALAR'; name: 'Boolean'; ofType: null; } }; 'contentType': { name: 'contentType'; type: { kind: 'SCALAR'; name: 'String'; ofType: null; } }; 'explode': { name: 'explode'; type: { kind: 'SCALAR'; name: 'Boolean'; ofType: null; } }; 'headers': { name: 'headers'; type: { kind: 'SCALAR'; name: 'JSONObject'; ofType: null; } }; 'name': { name: 'name'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'String'; ofType: null; }; } }; 'style': { name: 'style'; type: { kind: 'SCALAR'; name: 'String'; ofType: null; } }; }; };
+    'ExampleItem': { kind: 'OBJECT'; name: 'ExampleItem'; fields: { 'description': { name: 'description'; type: { kind: 'SCALAR'; name: 'String'; ofType: null; } }; 'externalValue': { name: 'externalValue'; type: { kind: 'SCALAR'; name: 'String'; ofType: null; } }; 'name': { name: 'name'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'String'; ofType: null; }; } }; 'summary': { name: 'summary'; type: { kind: 'SCALAR'; name: 'String'; ofType: null; } }; 'value': { name: 'value'; type: { kind: 'SCALAR'; name: 'String'; ofType: null; } }; }; };
+    'Float': unknown;
+    'ID': unknown;
+    'Int': unknown;
+    'JSON': unknown;
+    'JSONObject': unknown;
+    'MediaTypeObject': { kind: 'OBJECT'; name: 'MediaTypeObject'; fields: { 'encoding': { name: 'encoding'; type: { kind: 'LIST'; name: never; ofType: { kind: 'NON_NULL'; name: never; ofType: { kind: 'OBJECT'; name: 'EncodingItem'; ofType: null; }; }; } }; 'examples': { name: 'examples'; type: { kind: 'LIST'; name: never; ofType: { kind: 'NON_NULL'; name: never; ofType: { kind: 'OBJECT'; name: 'ExampleItem'; ofType: null; }; }; } }; 'mediaType': { name: 'mediaType'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'String'; ofType: null; }; } }; 'schema': { name: 'schema'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'JSON'; ofType: null; }; } }; }; };
+    'OperationItem': { kind: 'OBJECT'; name: 'OperationItem'; fields: { 'contentTypes': { name: 'contentTypes'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'LIST'; name: never; ofType: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'String'; ofType: null; }; }; }; } }; 'deprecated': { name: 'deprecated'; type: { kind: 'SCALAR'; name: 'Boolean'; ofType: null; } }; 'description': { name: 'description'; type: { kind: 'SCALAR'; name: 'String'; ofType: null; } }; 'method': { name: 'method'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'String'; ofType: null; }; } }; 'operationId': { name: 'operationId'; type: { kind: 'SCALAR'; name: 'String'; ofType: null; } }; 'parameters': { name: 'parameters'; type: { kind: 'LIST'; name: never; ofType: { kind: 'NON_NULL'; name: never; ofType: { kind: 'OBJECT'; name: 'ParameterItem'; ofType: null; }; }; } }; 'path': { name: 'path'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'String'; ofType: null; }; } }; 'requestBody': { name: 'requestBody'; type: { kind: 'OBJECT'; name: 'RequestBodyObject'; ofType: null; } }; 'responses': { name: 'responses'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'LIST'; name: never; ofType: { kind: 'NON_NULL'; name: never; ofType: { kind: 'OBJECT'; name: 'ResponseItem'; ofType: null; }; }; }; } }; 'slug': { name: 'slug'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'String'; ofType: null; }; } }; 'summary': { name: 'summary'; type: { kind: 'SCALAR'; name: 'String'; ofType: null; } }; 'tags': { name: 'tags'; type: { kind: 'LIST'; name: never; ofType: { kind: 'NON_NULL'; name: never; ofType: { kind: 'OBJECT'; name: 'TagItem'; ofType: null; }; }; } }; }; };
+    'ParameterIn': { name: 'ParameterIn'; enumValues: 'cookie' | 'header' | 'path' | 'query'; };
+    'ParameterItem': { kind: 'OBJECT'; name: 'ParameterItem'; fields: { 'allowEmptyValue': { name: 'allowEmptyValue'; type: { kind: 'SCALAR'; name: 'Boolean'; ofType: null; } }; 'allowReserved': { name: 'allowReserved'; type: { kind: 'SCALAR'; name: 'Boolean'; ofType: null; } }; 'deprecated': { name: 'deprecated'; type: { kind: 'SCALAR'; name: 'Boolean'; ofType: null; } }; 'description': { name: 'description'; type: { kind: 'SCALAR'; name: 'String'; ofType: null; } }; 'examples': { name: 'examples'; type: { kind: 'LIST'; name: never; ofType: { kind: 'NON_NULL'; name: never; ofType: { kind: 'OBJECT'; name: 'ExampleItem'; ofType: null; }; }; } }; 'explode': { name: 'explode'; type: { kind: 'SCALAR'; name: 'Boolean'; ofType: null; } }; 'in': { name: 'in'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'ENUM'; name: 'ParameterIn'; ofType: null; }; } }; 'name': { name: 'name'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'String'; ofType: null; }; } }; 'required': { name: 'required'; type: { kind: 'SCALAR'; name: 'Boolean'; ofType: null; } }; 'schema': { name: 'schema'; type: { kind: 'SCALAR'; name: 'JSON'; ofType: null; } }; 'style': { name: 'style'; type: { kind: 'SCALAR'; name: 'String'; ofType: null; } }; }; };
+    'PathItem': { kind: 'OBJECT'; name: 'PathItem'; fields: { 'methods': { name: 'methods'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'LIST'; name: never; ofType: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'String'; ofType: null; }; }; }; } }; 'path': { name: 'path'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'String'; ofType: null; }; } }; }; };
+    'Query': { kind: 'OBJECT'; name: 'Query'; fields: { 'schema': { name: 'schema'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'OBJECT'; name: 'Schema'; ofType: null; }; } }; }; };
+    'RequestBodyObject': { kind: 'OBJECT'; name: 'RequestBodyObject'; fields: { 'content': { name: 'content'; type: { kind: 'LIST'; name: never; ofType: { kind: 'NON_NULL'; name: never; ofType: { kind: 'OBJECT'; name: 'MediaTypeObject'; ofType: null; }; }; } }; 'description': { name: 'description'; type: { kind: 'SCALAR'; name: 'String'; ofType: null; } }; 'required': { name: 'required'; type: { kind: 'SCALAR'; name: 'Boolean'; ofType: null; } }; }; };
+    'ResponseItem': { kind: 'OBJECT'; name: 'ResponseItem'; fields: { 'content': { name: 'content'; type: { kind: 'LIST'; name: never; ofType: { kind: 'NON_NULL'; name: never; ofType: { kind: 'OBJECT'; name: 'MediaTypeObject'; ofType: null; }; }; } }; 'description': { name: 'description'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'String'; ofType: null; }; } }; 'headers': { name: 'headers'; type: { kind: 'SCALAR'; name: 'JSON'; ofType: null; } }; 'links': { name: 'links'; type: { kind: 'SCALAR'; name: 'JSON'; ofType: null; } }; 'statusCode': { name: 'statusCode'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'String'; ofType: null; }; } }; }; };
+    'Schema': { kind: 'OBJECT'; name: 'Schema'; fields: { 'description': { name: 'description'; type: { kind: 'SCALAR'; name: 'String'; ofType: null; } }; 'openapi': { name: 'openapi'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'String'; ofType: null; }; } }; 'operations': { name: 'operations'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'LIST'; name: never; ofType: { kind: 'NON_NULL'; name: never; ofType: { kind: 'OBJECT'; name: 'OperationItem'; ofType: null; }; }; }; } }; 'paths': { name: 'paths'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'LIST'; name: never; ofType: { kind: 'NON_NULL'; name: never; ofType: { kind: 'OBJECT'; name: 'PathItem'; ofType: null; }; }; }; } }; 'tags': { name: 'tags'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'LIST'; name: never; ofType: { kind: 'NON_NULL'; name: never; ofType: { kind: 'OBJECT'; name: 'SchemaTag'; ofType: null; }; }; }; } }; 'title': { name: 'title'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'String'; ofType: null; }; } }; 'url': { name: 'url'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'String'; ofType: null; }; } }; 'version': { name: 'version'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'String'; ofType: null; }; } }; }; };
+    'SchemaTag': { kind: 'OBJECT'; name: 'SchemaTag'; fields: { 'description': { name: 'description'; type: { kind: 'SCALAR'; name: 'String'; ofType: null; } }; 'name': { name: 'name'; type: { kind: 'SCALAR'; name: 'String'; ofType: null; } }; 'operations': { name: 'operations'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'LIST'; name: never; ofType: { kind: 'NON_NULL'; name: never; ofType: { kind: 'OBJECT'; name: 'OperationItem'; ofType: null; }; }; }; } }; }; };
+    'SchemaType': { name: 'SchemaType'; enumValues: 'json' | 'url' | 'yaml'; };
+    'String': unknown;
+    'TagItem': { kind: 'OBJECT'; name: 'TagItem'; fields: { 'description': { name: 'description'; type: { kind: 'SCALAR'; name: 'String'; ofType: null; } }; 'name': { name: 'name'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'String'; ofType: null; }; } }; }; };
+  };
+};
+
+import * as gqlTada from "gql.tada";
+
+declare module "gql.tada" {
+  interface setupSchema {
+    introspection: introspection;
+  }
+}

package/src/app/plugins/openapi/graphql/index.ts

@@ -0,0 +1,13 @@
+import { initGraphQLTada } from "gql.tada";
+import type { introspection } from "./env.d.ts";
+
+export const graphql = initGraphQLTada<{
+  introspection: introspection;
+  scalars: {
+    JSON: unknown;
+    JSONObject: unknown;
+  };
+}>();
+
+export type { FragmentOf, ResultOf, VariablesOf } from "gql.tada";
+export { readFragment } from "gql.tada";

package/src/app/plugins/openapi/index.tsx

@@ -0,0 +1,142 @@
+import { createContext, useContext } from "react";
+import {
+  type DevPortalPlugin,
+  type PluginNavigationCategory,
+} from "../../core/plugins.js";
+import { Outlet, matchPath, type RouteObject } from "../../core/router.js";
+import { MethodBadge } from "./MethodBadge.js";
+import { OperationList } from "./OperationList.js";
+import { graphql } from "./graphql/index.js";
+import {
+  Provider,
+  Client as UrqlClient,
+  cacheExchange,
+  fetchExchange,
+} from "./util/urql.js";
+import { createSharedWorkerClient } from "./worker/createSharedWorkerClient.js";
+
+const OasContext = createContext<{ config: OasPluginConfig } | undefined>(
+  undefined,
+);
+
+export const OasConfigProvider = OasContext.Provider;
+
+export const useOasConfig = () => {
+  const ctx = useContext(OasContext);
+  if (!ctx) {
+    throw new Error("useOasConfig must be used within a OasConfigProvider");
+  }
+  return ctx.config;
+};
+
+type OasSource =
+  | { type: "url"; input: string }
+  | { type: "yaml"; input: string }
+  | { type: "json"; input: object };
+
+export type OasPluginConfig = {
+  server?: string;
+  path?: string;
+} & OasSource;
+
+const OasContextProvider = ({
+  config,
+  client,
+}: {
+  config: OasPluginConfig;
+  client: typeof UrqlClient;
+}) => {
+  return (
+    <Provider value={client}>
+      <OasConfigProvider value={{ config }}>
+        <Outlet />
+      </OasConfigProvider>
+    </Provider>
+  );
+};
+
+const GetCategoriesQuery = graphql(`
+  query GetCategories($input: JSON!, $type: SchemaType!) {
+    schema(input: $input, type: $type) {
+      tags {
+        __typename
+        name
+        operations {
+          __typename
+          slug
+          method
+          summary
+          operationId
+          path
+        }
+      }
+    }
+  }
+`);
+
+export const openApiPlugin = (config: OasPluginConfig): DevPortalPlugin => {
+  const basePath = config.path ?? "/reference";
+
+  const client = config.server
+    ? new UrqlClient({
+        url: config.server,
+        exchanges: [cacheExchange, fetchExchange],
+      })
+    : createSharedWorkerClient();
+
+  return {
+    getNavigation: async (path: string) => {
+      if (!matchPath({ path: basePath, end: false }, path)) {
+        return [];
+      }
+
+      const { data } = await client.query(GetCategoriesQuery, {
+        input: config.input,
+        type: config.type,
+      });
+
+      if (!data) return [];
+
+      const categories = data.schema.tags
+        .filter((tag) => tag.operations.length > 0)
+        .map<PluginNavigationCategory>((tag) => ({
+          path,
+          label: tag.name ?? "",
+          collapsible: false,
+          children: tag.operations.map((operation) => ({
+            path: `#${operation.slug}`,
+            title: operation.summary ?? operation.path,
+            label: (
+              <div className="flex flex-1 min-w-0 justify-between gap-2">
+                <span className="truncate">
+                  {operation.summary ?? operation.path}
+                </span>
+                <MethodBadge method={operation.method} />
+              </div>
+            ),
+          })),
+        }));
+
+      categories.unshift({
+        path,
+        label: "Overview",
+        collapsible: false,
+        children: [{ path: "#description", label: "Description" }],
+      });
+
+      return categories;
+    },
+    getRoutes: () =>
+      [
+        {
+          element: <OasContextProvider config={config} client={client} />,
+          children: [
+            {
+              path: basePath,
+              children: [{ index: true, element: <OperationList /> }],
+            },
+          ],
+        },
+      ] satisfies RouteObject[],
+  };
+};

package/src/app/plugins/openapi/util/generateSchemaExample.ts

@@ -0,0 +1,59 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { type SchemaObject } from "../../../oas/graphql/index.js";
+
+export const isObject = (value: unknown): boolean =>
+  typeof value === "object" && value !== null && !Array.isArray(value);
+
+export const generateSchemaExample = (schema: SchemaObject): any => {
+  // Directly return the example or default if they exist
+  if (schema.example !== undefined) {
+    return schema.example;
+  } else if (schema.default !== undefined) {
+    return schema.default;
+  }
+
+  // Process examples object
+  if (schema.examples && isObject(schema.examples)) {
+    return Object.values(schema.examples)[0];
+  }
+
+  // Recursively process objects and arrays
+  return processComplexTypes(schema);
+};
+
+function processComplexTypes(schema: SchemaObject): any {
+  if (schema.type === "object" && schema.properties) {
+    const obj: { [key: string]: any } = {};
+    Object.keys(schema.properties!).forEach((key) => {
+      obj[key] = generateSchemaExample(schema.properties![key]);
+    });
+    return obj;
+  } else if (schema.type === "array" && schema.items) {
+    return [generateSchemaExample(schema.items)];
+  }
+  // Fallback for missing or undefined types
+  return getDefaultForType(schema.type);
+}
+
+function getDefaultForType(type?: string | string[]): any {
+  if (Array.isArray(type)) {
+    return getDefaultForSingleType(type[0]);
+  }
+  return getDefaultForSingleType(type);
+}
+
+function getDefaultForSingleType(type?: string): any {
+  switch (type) {
+    case "string":
+      return "";
+    case "number":
+    case "integer":
+      return 0;
+    case "boolean":
+      return false;
+    case "null":
+      return null;
+    default:
+      return undefined;
+  }
+}

package/src/app/plugins/openapi/util/getCode.tsx

@@ -0,0 +1,69 @@
+import type { OperationListItemResult } from "../OperationList.js";
+
+export const getCode = (operation: OperationListItemResult, option: string) => {
+  switch (option) {
+    case "curl":
+      return (
+        `curl --request ${operation.method.toLocaleUpperCase()} \\\n` +
+        `  --url ${operation.path} \\\n` +
+        `  --header 'Content-Type: application/json'`
+      );
+    case "wget":
+      return (
+        `wget --method=${operation.method.toLocaleUpperCase()} \\\n` +
+        `  --header='Content-Type: application/json' \\\n` +
+        `  ${operation.path}`
+      );
+    case "js":
+      return (
+        `fetch('${operation.path}', {\n` +
+        `  method: '${operation.method.toLocaleUpperCase()}',\n` +
+        `  headers: { 'Content-Type': 'application/json' },\n` +
+        `});`
+      );
+    case "ruby":
+      return (
+        `require 'net/http'\n\n` +
+        `url = URI.parse('${operation.path}')\n` +
+        `http = Net::HTTP.new(url.host, url.port)\n` +
+        `request = Net::HTTP::${operation.method}.new(url)\n` +
+        `request['Content-Type'] = 'application/json'\n` +
+        `http.request(request)`
+      );
+    case "php":
+      return (
+        `$ch = curl_init('${operation.path}');\n` +
+        `curl_setopt($ch, CURLOPT_CUSTOMREQUEST, '${operation.method.toLocaleUpperCase()}');\n` +
+        `curl_setopt($ch, CURLOPT_HTTPHEADER, ['Content-Type: application/json']);\n` +
+        `curl_exec($ch);\n` +
+        `curl_close($ch);`
+      );
+    case "go":
+      return (
+        `package main\n\n` +
+        `import (\n` +
+        `  "net/http"\n` +
+        `  "strings"\n` +
+        `)\n\n` +
+        `func main() {\n` +
+        `  client := &http.Client{}\n` +
+        `  req, _ := http.NewRequest("${operation.method.toLocaleUpperCase()}", "${operation.path}", strings.NewReader(""))\n` +
+        `  req.Header.Set("Content-Type", "application/json")\n` +
+        `  client.Do(req)\n` +
+        `}`
+      );
+    case "rust":
+      return (
+        `use reqwest::Client;\n\n` +
+        `fn main() {\n` +
+        `  let client = Client::new();\n` +
+        `  let res = client\n` +
+        `    .${operation.method.toLocaleLowerCase()}("${operation.path}")\n` +
+        `    .header("Content-Type", "application/json")\n` +
+        `    .send();\n` +
+        `}`
+      );
+    default:
+      return "";
+  }
+};

package/src/app/plugins/openapi/util/urql.ts

@@ -0,0 +1,8 @@
+import * as urql from "urql";
+
+export const useQuery = urql.useQuery;
+export const Provider = urql.Provider;
+export const cacheExchange = urql.cacheExchange;
+export const fetchExchange = urql.fetchExchange;
+export const mapExchange = urql.mapExchange;
+export const Client = urql.Client;

package/src/app/plugins/openapi/worker/createSharedWorkerClient.ts

@@ -0,0 +1,60 @@
+import { monotonicFactory } from "ulid";
+import { createWaitForNotify } from "../../../util/createWaitForNotify.js";
+import {
+  cacheExchange,
+  Client,
+  fetchExchange,
+  mapExchange,
+} from "../util/urql.js";
+
+export type WorkerGraphQLMessage = { id: string; body: string };
+
+const ulid = monotonicFactory();
+export const createSharedWorkerClient = () => {
+  const worker = new SharedWorker(new URL("./worker.ts", import.meta.url), {
+    type: "module",
+  });
+
+  worker.port.start();
+
+  const [waitFor, notify] = createWaitForNotify<string>();
+
+  worker.port.onmessage = (e: MessageEvent<WorkerGraphQLMessage>) => {
+    notify(e.data.id, e.data.body);
+  };
+
+  return new Client({
+    url: "/__z/graphql",
+    // Custom fetch to send the GraphQL request to the worker and convert the response back to a `Response` object
+    fetch: async (_req, init) => {
+      if (!init?.body) throw new Error("No body");
+
+      const id = ulid();
+      worker.port.postMessage({
+        id,
+        body: init.body as string,
+      } satisfies WorkerGraphQLMessage);
+
+      const body = await waitFor(id);
+
+      return new Response(body, {
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+    },
+    exchanges: [
+      cacheExchange,
+      mapExchange({
+        onError(error, operation) {
+          console.error(error);
+          console.groupCollapsed("Operation info");
+          console.log("body", operation.query.loc?.source.body.trim());
+          console.log("variables", operation.variables);
+          console.groupEnd();
+        },
+      }),
+      fetchExchange,
+    ],
+  });
+};

package/src/app/plugins/openapi/worker/worker.ts

@@ -0,0 +1,30 @@
+import { createGraphQLServer } from "../../../oas/graphql/index.js";
+import { type WorkerGraphQLMessage } from "./createSharedWorkerClient.js";
+
+const localServer = createGraphQLServer();
+
+const worker = self as unknown as SharedWorkerGlobalScope;
+
+worker.addEventListener(
+  "connect",
+  function (event: MessageEvent<{ id: string; body: string }>) {
+    const port = event.ports[0];
+
+    port.onmessage = async function (e) {
+      const response = await localServer.fetch(
+        new Request("/__z/graphql", {
+          method: "POST",
+          body: e.data.body,
+          headers: {
+            "Content-Type": "application/json",
+          },
+        }),
+      );
+
+      port.postMessage({
+        id: e.data.id,
+        body: await response.text(),
+      } satisfies WorkerGraphQLMessage);
+    };
+  },
+);

package/src/app/plugins/redirect/index.tsx

@@ -0,0 +1,20 @@
+import { Navigate } from "react-router-dom";
+import type { DevPortalPlugin } from "../../core/plugins.js";
+
+type Redirect = {
+  from: string;
+  to: string;
+  replace?: boolean;
+};
+
+export const redirectPlugin = (options: {
+  redirects: Redirect[];
+}): DevPortalPlugin => {
+  return {
+    getRoutes: () =>
+      options.redirects.map(({ from, to, replace }) => ({
+        path: from,
+        element: <Navigate to={to} replace={replace} />,
+      })),
+  };
+};

package/src/app/tailwind.ts

@@ -0,0 +1,72 @@
+import typographyPlugin from "@tailwindcss/typography";
+import type { Config } from "tailwindcss";
+import defaultTheme from "tailwindcss/defaultTheme.js";
+const content = [
+  "./src/**/*.{js,ts,jsx,tsx,md,mdx}",
+  "./node_modules/zudoku/dist/**/*.{js,ts,jsx,tsx,md,mdx}",
+];
+
+//   ,
+// if (process.env.NODE_ENV === "development") {
+//   content.push("../../plugins/*/src/**/*.{js,ts,jsx,tsx}");
+// }
+
+const config: Config = {
+  darkMode: "selector",
+  content,
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: [
+          ["Geist", ...defaultTheme.fontFamily.sans],
+          { fontFeatureSettings: '"rlig" 1, "calt" 0' },
+        ],
+      },
+      typography: () => ({
+        DEFAULT: {
+          css: {
+            blockquote: { quotes: "none" },
+          },
+        },
+      }),
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+    },
+  },
+  plugins: [typographyPlugin],
+};
+
+export default config;

package/src/app/ui/Callout.tsx

@@ -0,0 +1,87 @@
+import type { ReactNode } from "react";
+import {
+  AlertTriangleIcon,
+  InfoIcon,
+  LightbulbIcon,
+  ShieldAlertIcon,
+} from "../core/icons.js";
+import { cn } from "../util/cn.js";
+
+const stylesMap = {
+  note: {
+    border: "border-gray-300 dark:border-zinc-800",
+    bg: "bg-gray-100 dark:bg-zinc-800/50",
+    iconColor: "text-gray-600 dark:text-zinc-300",
+    titleColor: "text-gray-600 dark:text-zinc-300",
+    textColor: "text-gray-600 dark:text-zinc-300",
+    Icon: InfoIcon,
+  },
+  tip: {
+    border: "border-green-500 dark:border-green-800",
+    bg: "bg-green-200/25 dark:bg-green-950/70",
+    iconColor: "text-green-600 dark:text-green-200",
+    titleColor: "text-green-700 dark:text-green-200",
+    textColor: "text-green-600 dark:text-green-50",
+    Icon: LightbulbIcon,
+  },
+  info: {
+    border: "border-blue-400 dark:border-blue-900/60",
+    bg: "bg-blue-50 dark:bg-blue-950/40",
+    iconColor: "text-blue-400 dark:text-blue-200",
+    titleColor: "text-blue-700 dark:text-blue-200",
+    textColor: "text-blue-600 dark:text-blue-100",
+    Icon: InfoIcon,
+  },
+  caution: {
+    border: "border-yellow-400 dark:border-yellow-400/25",
+    bg: "bg-yellow-100/60 dark:bg-yellow-400/10",
+    iconColor: "text-yellow-500 dark:text-yellow-300",
+    titleColor: "text-yellow-600 dark:text-yellow-300",
+    textColor: "text-yellow-700 dark:text-yellow-200",
+    Icon: AlertTriangleIcon,
+  },
+  danger: {
+    border: "border-rose-400 dark:border-rose-800",
+    bg: "bg-rose-50 dark:bg-rose-950/40",
+    iconColor: "text-rose-400 dark:text-rose-300",
+    titleColor: "text-rose-800 dark:text-rose-300",
+    textColor: "text-rose-700 dark:text-rose-100",
+    Icon: ShieldAlertIcon,
+  },
+};
+
+type CalloutProps = {
+  type: keyof typeof stylesMap;
+  title?: string;
+  children: ReactNode;
+  className?: string;
+};
+
+export const Callout = ({ type, children, title, className }: CalloutProps) => {
+  const { border, bg, iconColor, titleColor, textColor, Icon } =
+    stylesMap[type];
+
+  return (
+    <div
+      className={cn(
+        "not-prose grid grid-cols-[fit-content_1fr] grid-rows-[fit-content_1fr] gap-x-4 gap-y-2 text-md rounded-md border p-4",
+        "[&_a]:underline [&_a]:decoration-current [&_a]:decoration-from-font [&_a]:underline-offset-4 hover:[&_a]:decoration-1",
+        "[&_code]:!bg-transparent [&_code]:!border-none",
+        title && "items-center",
+        border,
+        bg,
+        className,
+      )}
+    >
+      <Icon
+        className={cn(!title && "mt-1 translate-y-px", iconColor)}
+        size={20}
+        aria-hidden="true"
+      />
+      {title && <h3 className={cn("font-medium", titleColor)}>{title}</h3>}
+      <div className={cn("col-start-2", !title && "row-start-1", textColor)}>
+        {children}
+      </div>
+    </div>
+  );
+};