overmux 0.0.1 → 0.0.2

package/src/internal/client/theme-scope.css

@@ -0,0 +1,114 @@
+@layer theme, base, om;
+
+@layer om.components {
+  @scope ([data-om-scope]) to ([data-om-scope]) {
+    :where(:scope) {
+      --_om-color-canvas: #f7f8fa;
+      --_om-color-surface: #ffffff;
+      --_om-color-panel: #f0f2f5;
+      --_om-color-fg: #17202a;
+      --_om-color-muted: #5c6875;
+      --_om-color-border: #c8ced6;
+      --_om-color-accent: #075fd8;
+      --_om-color-accent-fg: #ffffff;
+      --_om-color-danger: #b42318;
+      --_om-color-success: #16794b;
+      --_om-resolved-color-success: var(
+        --om-color-success,
+        var(--_om-color-success)
+      );
+      color: var(--om-color-fg, var(--_om-color-fg));
+      color-scheme: light dark;
+      font-family: var(
+        --om-font-sans,
+        ui-sans-serif,
+        system-ui,
+        -apple-system,
+        BlinkMacSystemFont,
+        "Segoe UI",
+        sans-serif
+      );
+    }
+
+    :where(:scope[data-om-scheme="light"]) {
+      color-scheme: light;
+    }
+
+    :where(:scope[data-om-scheme="dark"]) {
+      --_om-color-canvas: #101317;
+      --_om-color-surface: #171b21;
+      --_om-color-panel: #1f252d;
+      --_om-color-fg: #f2f4f7;
+      --_om-color-muted: #aab3bf;
+      --_om-color-border: #46505d;
+      --_om-color-accent: #75a7ff;
+      --_om-color-accent-fg: #101317;
+      --_om-color-danger: #ff8b82;
+      --_om-color-success: #65d6a2;
+      color-scheme: dark;
+    }
+
+    :where(:scope[data-om-contrast="high"]) {
+      --_om-color-canvas: Canvas;
+      --_om-color-surface: Canvas;
+      --_om-color-panel: Canvas;
+      --_om-color-fg: CanvasText;
+      --_om-color-muted: CanvasText;
+      --_om-color-border: CanvasText;
+      --_om-color-accent: Highlight;
+      --_om-color-accent-fg: HighlightText;
+      --_om-color-danger: Mark;
+      --_om-color-success: LinkText;
+    }
+
+    :where([data-om-overlay-root]:empty) {
+      display: none;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      :where(:scope[data-om-scheme="system"]) {
+        --_om-color-canvas: #101317;
+        --_om-color-surface: #171b21;
+        --_om-color-panel: #1f252d;
+        --_om-color-fg: #f2f4f7;
+        --_om-color-muted: #aab3bf;
+        --_om-color-border: #46505d;
+        --_om-color-accent: #75a7ff;
+        --_om-color-accent-fg: #101317;
+        --_om-color-danger: #ff8b82;
+        --_om-color-success: #65d6a2;
+      }
+    }
+
+    @media (prefers-contrast: more) {
+      :where(:scope[data-om-contrast="auto"]) {
+        --_om-color-canvas: Canvas;
+        --_om-color-surface: Canvas;
+        --_om-color-panel: Canvas;
+        --_om-color-fg: CanvasText;
+        --_om-color-muted: CanvasText;
+        --_om-color-border: CanvasText;
+        --_om-color-accent: Highlight;
+        --_om-color-accent-fg: HighlightText;
+        --_om-color-danger: Mark;
+        --_om-color-success: LinkText;
+      }
+    }
+
+    @media (forced-colors: active) {
+      :where(:scope) {
+        --_om-color-canvas: Canvas;
+        --_om-color-surface: Canvas;
+        --_om-color-panel: Canvas;
+        --_om-color-fg: CanvasText;
+        --_om-color-muted: CanvasText;
+        --_om-color-border: ButtonBorder;
+        --_om-color-accent: Highlight;
+        --_om-color-accent-fg: HighlightText;
+        --_om-color-danger: Mark;
+        --_om-color-success: LinkText;
+        forced-color-adjust: auto;
+      }
+    }
+  }
+}

package/src/internal/client/theme-scope.tsx

@@ -0,0 +1,107 @@
+import "./theme-scope.css";
+
+import {
+  createContext,
+  type CSSProperties,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useState,
+} from "react";
+import { createPortal } from "react-dom";
+
+export type OvermuxScheme = "dark" | "light" | "system";
+export type OvermuxContrast = "auto" | "high" | "normal";
+
+export const overmuxThemeTokens = [
+  "--om-color-accent",
+  "--om-color-accent-fg",
+  "--om-color-border",
+  "--om-color-canvas",
+  "--om-color-danger",
+  "--om-color-fg",
+  "--om-color-muted",
+  "--om-color-panel",
+  "--om-color-success",
+  "--om-color-surface",
+  "--om-elevation",
+  "--om-focus-ring",
+  "--om-font-mono",
+  "--om-font-sans",
+  "--om-motion-duration",
+  "--om-radius",
+  "--om-spacing",
+] as const;
+
+export type OvermuxThemeToken = (typeof overmuxThemeTokens)[number];
+
+export type OvermuxStyle = CSSProperties &
+  Partial<Record<OvermuxThemeToken, number | string>>;
+
+export type OvermuxExternalPortalContainer = {
+  container: HTMLElement;
+  scopeAttributesAndVariables: "caller-owned";
+};
+
+export type OvermuxPortalProps = {
+  children: ReactNode;
+  external?: OvermuxExternalPortalContainer;
+};
+
+export type OvermuxThemeScopeProps = {
+  children: ReactNode;
+  className?: string;
+  contrast?: OvermuxContrast;
+  scheme?: OvermuxScheme;
+  style?: OvermuxStyle;
+};
+
+const PortalRootContext = createContext<HTMLElement | null | undefined>(
+  undefined,
+);
+
+export const useOvermuxPortalContainer = (
+  external?: OvermuxExternalPortalContainer,
+) => {
+  const scopeRoot = useContext(PortalRootContext);
+  if (external) {
+    return external.container;
+  }
+  if (scopeRoot !== undefined) {
+    return scopeRoot;
+  }
+  return typeof document === "undefined" ? null : document.body;
+};
+
+export const OvermuxPortal = ({ children, external }: OvermuxPortalProps) => {
+  const container = useOvermuxPortalContainer(external);
+  return container ? createPortal(children, container) : null;
+};
+
+export const OvermuxThemeScope = ({
+  children,
+  className,
+  contrast = "auto",
+  scheme = "system",
+  style,
+}: OvermuxThemeScopeProps) => {
+  const [portalRoot, setPortalRoot] = useState<HTMLDivElement | null>(null);
+  const capturePortalRoot = useCallback((element: HTMLDivElement | null) => {
+    setPortalRoot(element);
+  }, []);
+
+  return (
+    <div
+      className={className}
+      data-om-contrast={contrast}
+      data-om-scheme={scheme}
+      data-om-scope=""
+      style={style}
+    >
+      <PortalRootContext.Provider value={portalRoot}>
+        {children}
+      </PortalRootContext.Provider>
+      <div data-om-overlay-root="" ref={capturePortalRoot} />
+    </div>
+  );
+};

package/src/internal/client/transport.ts

@@ -0,0 +1,69 @@
+import { createContext, useContext } from "react";
+
+import {
+  createWebSocketTransport,
+  type WebSocketTransport,
+  type TransportStatus,
+} from "./websocket";
+
+export type ClientTransport = WebSocketTransport & {
+  invokeOperation: (input: {
+    input?: unknown;
+    name: string;
+    signal?: AbortSignal;
+  }) => Promise<unknown>;
+};
+
+export const TransportContext = createContext<ClientTransport | undefined>(
+  undefined,
+);
+
+export const useTransport = () => {
+  const transport = useContext(TransportContext);
+  if (!transport) {
+    throw new Error(
+      "Overmux transport hooks must be used inside an active Overmux client runtime",
+    );
+  }
+  return transport;
+};
+
+const operationError = async (response: Response) => {
+  const body = await response.text();
+  try {
+    const error = (JSON.parse(body) as { error?: unknown }).error;
+    if (typeof error === "string") {
+      return new Error(error);
+    }
+  } catch {}
+  return new Error(
+    `Operation request failed: ${response.status} ${response.statusText}`,
+  );
+};
+
+export const createClientTransport = ({
+  createSocket,
+  fetch: fetchRequest = globalThis.fetch,
+}: {
+  createSocket?: () => WebSocket;
+  fetch?: typeof globalThis.fetch;
+} = {}): ClientTransport => ({
+  ...createWebSocketTransport({ createSocket }),
+  invokeOperation: async ({ input, name, signal }) => {
+    const response = await fetchRequest(
+      `/api/operations/${encodeURIComponent(name)}`,
+      {
+        body: input === undefined ? undefined : JSON.stringify(input),
+        headers: { "content-type": "application/json" },
+        method: "POST",
+        signal,
+      },
+    );
+    if (!response.ok) {
+      throw await operationError(response);
+    }
+    return response.status === 204 ? undefined : response.json();
+  },
+});
+
+export type { WebSocketTransport, TransportStatus };