@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/components/ThemeProvider.tsx

@@ -0,0 +1,271 @@
+"use client";
+/**
+ * Theme + direction controller for the React marketing apps. Sets
+ * [data-theme] on <html> and persists the shared `dt-theme` key (also read by
+ * dashboard → cross-surface sync on the same origin). Pair with the pre-paint
+ * snippet (themeInitScript) inlined in <head> to avoid a flash.
+ *
+ * Direction is opt-in: `ThemeProvider dir="rtl"` (default `"ltr"`) applies
+ * `dir` to <html>, which is all the kit needs — every part is authored with
+ * logical properties and `[[dir=rtl]]`-scoped art, so the whole tree mirrors
+ * without touching a single page. `DirectionProvider` is the nested form: it
+ * wraps a region in its own `dir` (and `root` applies to <html> instead), for
+ * side-by-side or per-subtree direction.
+ */
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
+import {
+  applyDocumentTheme,
+  matchThemeStep,
+  nextThemeStep,
+  readPaintedTheme,
+  readThemeState,
+  PALETTE_STORAGE_KEY,
+  THEME_CHANGE_EVENT,
+  THEME_STORAGE_KEY,
+  type PaletteName,
+  type ResolvedTheme,
+  type ThemePreference,
+  type ThemeStep,
+} from "../theme/apply-theme";
+import { IconButton } from "../ui/icon-button";
+
+/** Text direction. The kit defaults to `"ltr"`; RTL is always opt-in. */
+export type Direction = "ltr" | "rtl";
+
+const DirectionCtx = createContext<Direction>("ltr");
+
+/** Current text direction of the surrounding `DirectionProvider` (default ltr). */
+export function useDirection(): Direction {
+  return useContext(DirectionCtx);
+}
+
+/**
+ * Apply `dir` to a region. By default it renders a wrapper <div dir=…> and
+ * provides `useDirection()`; with `root` it applies `dir` to <html> instead
+ * (matching `ThemeProvider dir`) and renders children without a wrapper, so a
+ * full app or page can flip direction. Either form resets the document to
+ * `ltr` on unmount when `root` is used.
+ */
+export function DirectionProvider({
+  dir = "ltr",
+  root = false,
+  className,
+  children,
+}: {
+  dir?: Direction;
+  /** Apply to <html> (whole document) rather than a wrapper element. */
+  root?: boolean;
+  className?: string;
+  children: ReactNode;
+}) {
+  useEffect(() => {
+    if (!root) return;
+    document.documentElement.setAttribute("dir", dir);
+    return () => {
+      document.documentElement.setAttribute("dir", "ltr");
+    };
+  }, [dir, root]);
+
+  const value = useMemo(() => dir, [dir]);
+  if (root) return <DirectionCtx.Provider value={value}>{children}</DirectionCtx.Provider>;
+  return (
+    <DirectionCtx.Provider value={value}>
+      <div dir={dir} className={className}>
+        {children}
+      </div>
+    </DirectionCtx.Provider>
+  );
+}
+
+export type { PaletteName, ResolvedTheme, ThemePreference };
+
+// themeInitScript lives in ./themeInit.ts (a plain module) — see there.
+export { themeInitScript } from "./themeInit";
+
+export type ThemeContextValue = {
+  /** Resolved light/dark currently painted. Existing callers read this. */
+  theme: ResolvedTheme;
+  /** Advance one stop: default dark, default light, then each palette. */
+  toggle: () => void;
+  /** Stored mode. `auto` means `dt-theme` is absent and the OS is followed. */
+  preference: ThemePreference;
+  setTheme: (preference: ThemePreference) => void;
+  /** `default` or one of the 32 DigiVoice palette ids. Stored in `dt-palette`. */
+  palette: PaletteName;
+  setPalette: (palette: string) => void;
+  /** Paint one cycle stop (mode and palette together). */
+  applyStep: (step: ThemeStep) => void;
+};
+
+const ThemeCtx = createContext<ThemeContextValue | null>(null);
+
+export function useTheme() {
+  const ctx = useContext(ThemeCtx);
+  if (!ctx) throw new Error("useTheme must be used within ThemeProvider");
+  return ctx;
+}
+
+export function ThemeProvider({
+  children,
+  dir = "ltr",
+}: {
+  children: ReactNode;
+  /** Text direction applied to <html>. Defaults to `"ltr"`; RTL is opt-in. */
+  dir?: Direction;
+}) {
+  const [theme, setResolved] = useState<ResolvedTheme>("dark");
+  const [preference, setPreferenceState] = useState<ThemePreference>("auto");
+  const [palette, setPaletteState] = useState<PaletteName>("default");
+  const preferenceRef = useRef<ThemePreference>("auto");
+  const setPreference = useCallback((next: ThemePreference) => {
+    preferenceRef.current = next;
+    setPreferenceState(next);
+  }, []);
+
+  useEffect(() => {
+    // The document is the source of truth; storage is only where a user's
+    // choice is kept. Mount READS what is painted and never paints or writes:
+    // themeInitScript has already applied the stored mode and palette on the
+    // surfaces that use it, a pinned embed (data-theme-pin) painted its
+    // tenant's theme, and digiquant.io paints dark itself with no
+    // themeInitScript. Applying storage here flipped such a page to whatever
+    // the dashboard last mirrored into `dt-theme` on that origin.
+    const sync = () => {
+      const painted = readPaintedTheme();
+      const stored = readThemeState().preference;
+      // A stored mode the page did not paint (a pinned surface) is not this
+      // page's preference; the painted mode is.
+      setPreference(stored === "auto" || stored === painted.resolved ? stored : painted.resolved);
+      setPaletteState(painted.palette);
+      setResolved(painted.resolved);
+    };
+    sync();
+    // A pinned embed owns its document: no OS follow there.
+    if (document.documentElement.getAttribute("data-theme-pin") === "1") return;
+    // Any painter (the /theme command, the picker, this provider) goes through
+    // applyDocumentTheme, which announces the change; re-read so the context
+    // and the OS guard below never disagree with what is painted.
+    window.addEventListener(THEME_CHANGE_EVENT, sync);
+    // Another tab (the marketing site, the other chat) writes the same keys.
+    // `storage` does not fire in the tab that wrote them; this tab repaints.
+    const onStorage = (event: StorageEvent) => {
+      if (
+        event.key !== null &&
+        event.key !== THEME_STORAGE_KEY &&
+        event.key !== PALETTE_STORAGE_KEY
+      ) {
+        return;
+      }
+      const next = readThemeState();
+      applyDocumentTheme(next.preference, next.palette, document, { persist: false });
+      sync();
+    };
+    window.addEventListener("storage", onStorage);
+    const mq = matchMedia("(prefers-color-scheme: light)");
+    const onOS = () => {
+      // As before this provider existed: a stored mode means a choice was
+      // made, so the OS does not override it.
+      if (readThemeState().preference !== "auto") return;
+      // Repaint only; the OS changing is not a choice to store.
+      setResolved(
+        applyDocumentTheme("auto", readPaintedTheme().palette, undefined, { persist: false }),
+      );
+    };
+    mq.addEventListener("change", onOS);
+    return () => {
+      window.removeEventListener(THEME_CHANGE_EVENT, sync);
+      window.removeEventListener("storage", onStorage);
+      mq.removeEventListener("change", onOS);
+    };
+  }, [setPreference]);
+
+  const setTheme = useCallback(
+    (next: ThemePreference) => {
+      setPreference(next);
+      setResolved(applyDocumentTheme(next, readPaintedTheme().palette));
+    },
+    [setPreference],
+  );
+
+  const setPalette = useCallback((next: string) => {
+    const resolved = applyDocumentTheme(preferenceRef.current, next);
+    setPaletteState(readPaintedTheme().palette);
+    setResolved(resolved);
+  }, []);
+
+  const applyStep = useCallback(
+    (step: ThemeStep) => {
+      const resolved = applyDocumentTheme(step.mode, step.palette);
+      setPreference(step.mode);
+      setPaletteState(step.palette);
+      setResolved(resolved);
+    },
+    [setPreference],
+  );
+
+  const toggle = useCallback(() => {
+    const painted = readPaintedTheme();
+    applyStep(nextThemeStep("auto", painted.palette, painted.resolved));
+  }, [applyStep]);
+
+  const value = useMemo(
+    () => ({ theme, toggle, preference, setTheme, palette, setPalette, applyStep }),
+    [theme, toggle, preference, setTheme, palette, setPalette, applyStep],
+  );
+
+  return (
+    <ThemeCtx.Provider value={value}>
+      <DirectionProvider root dir={dir}>
+        {children}
+      </DirectionProvider>
+    </ThemeCtx.Provider>
+  );
+}
+
+/**
+ * Theme control for the nav tail.
+ *
+ * One glyph, not two: the control moves through *theme* (default dark, default
+ * light, then 32 palettes), so a sun/moon pair only ever described two stops of
+ * a longer cycle and read as a mode switch that it is not. The contrast mark —
+ * a ring with half of it filled — is the general "appearance" signifier, and it
+ * stays put as the cycle advances. `aria-label` is the stable action name the
+ * kit test pins; `title` names the next stop.
+ */
+export function ThemeToggle({ className }: { className?: string }) {
+  const { theme, preference, palette, toggle } = useTheme();
+  const step = matchThemeStep(preference, palette, theme);
+  return (
+    <IconButton
+      type="button"
+      onClick={toggle}
+      aria-label="Toggle colour theme"
+      title={step.label}
+      className={className ?? "theme-toggle"}
+    >
+      <svg
+        viewBox="0 0 24 24"
+        width="17"
+        height="17"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.8"
+        aria-hidden="true"
+        focusable="false"
+      >
+        {/* Ring + filled right half: the contrast/appearance glyph. */}
+        <circle cx="12" cy="12" r="8.4" />
+        <path d="M12 3.6a8.4 8.4 0 0 1 0 16.8z" fill="currentColor" stroke="none" />
+      </svg>
+    </IconButton>
+  );
+}

package/src/components/account/AuthCard.tsx

@@ -0,0 +1,309 @@
+/** AuthCard — the shared sign-in / create-account card. Layouts `compact`,
+ *  `icons-first`, and `desk` share one email + password form with Google /
+ *  GitHub / X OAuth. Dress lives in `./styles/account-auth.css` (`.acct-*`);
+ *  the sign-up strength meter renders on desk-signup only. Consumers: the
+ *  dashboard login screen (compact) and the reference account-page specimens.
+ */
+"use client";
+
+import { type FormEvent, type ReactNode } from "react";
+import { Button, Input, Label } from "../../ui";
+import { DigiquantMark } from "../symbols/marks";
+import { GitHubGlyph, GoogleGlyph, XGlyph } from "../icons";
+
+export type AuthCardLayout = "compact" | "icons-first" | "desk";
+export type AuthCardMode = "signin" | "signup";
+/** Supabase OAuth 2.0 id for X is `x` (not legacy `twitter`). UI copy is X. */
+export type AuthOAuthProvider = "google" | "github" | "x";
+
+const STRENGTH_WORDS = ["", "weak", "fair", "good", "strong"] as const;
+const STRENGTH_COLORS = ["", "var(--danger)", "var(--accent)", "var(--accent)", "var(--ink)"] as const;
+
+export function passwordStrength(password: string): number {
+  if (password.length === 0) return 0;
+  let score = 1;
+  if (password.length >= 8) score += 1;
+  if (/[a-z]/.test(password) && /[A-Z]/.test(password)) score += 1;
+  if (/\d/.test(password) || /[^a-zA-Z0-9]/.test(password)) score += 1;
+  return Math.min(score, 4);
+}
+
+export type AuthCardBrand = {
+  /** Short client marker (e.g. "ACME") shown top-right of the card. */
+  marker: string;
+  /** Optional line under the brand row (e.g. "Purpose-built for the ACME desk"). */
+  line?: string | null;
+};
+
+export type AuthCardProps = {
+  layout: AuthCardLayout;
+  mode?: AuthCardMode;
+  productName?: string;
+  /** Invite branding — wraps sign-in or sign-up so the invitee knows the
+   *  product was built for their team. Null/undefined renders the default card. */
+  brand?: AuthCardBrand | null;
+  mark?: ReactNode;
+  email?: string;
+  password?: string;
+  onEmailChange?: (value: string) => void;
+  onPasswordChange?: (value: string) => void;
+  onSubmit?: (event: FormEvent<HTMLFormElement>) => void;
+  onOAuth?: (provider: AuthOAuthProvider) => void;
+  onForgotPassword?: () => void;
+  pending?: AuthOAuthProvider | "email" | null;
+  error?: string | null;
+  info?: string | null;
+  switchHref?: string;
+  idPrefix?: string;
+};
+
+const OAUTH: { provider: AuthOAuthProvider; label: string; testId: string; icon: ReactNode }[] = [
+  { provider: "google", label: "Google", testId: "login-google", icon: <GoogleGlyph /> },
+  { provider: "github", label: "GitHub", testId: "login-github", icon: <GitHubGlyph width={16} height={16} /> },
+  { provider: "x", label: "X", testId: "login-x", icon: <XGlyph /> },
+];
+
+function OAuthButtons({
+  pending,
+  onOAuth,
+  stretch,
+}: {
+  pending: AuthCardProps["pending"];
+  onOAuth?: AuthCardProps["onOAuth"];
+  stretch: boolean;
+}) {
+  return (
+    <>
+      {OAUTH.map((item) => (
+        <Button
+          key={item.provider}
+          type="button"
+          className="acct-oauth"
+          style={stretch ? { flex: 1, width: "auto" } : undefined}
+          disabled={pending !== null && pending !== undefined}
+          aria-label={item.label}
+          title={item.label}
+          data-testid={item.testId}
+          onClick={() => onOAuth?.(item.provider)}
+        >
+          {item.icon}
+        </Button>
+      ))}
+    </>
+  );
+}
+
+export function AuthCard({
+  layout,
+  mode = "signin",
+  productName = "digiquant",
+  brand = null,
+  mark,
+  email = "",
+  password = "",
+  onEmailChange,
+  onPasswordChange,
+  onSubmit,
+  onOAuth,
+  onForgotPassword,
+  pending = null,
+  error = null,
+  info = null,
+  switchHref,
+  idPrefix,
+}: AuthCardProps) {
+  const signUp = mode === "signup";
+  const prefix = idPrefix ?? `acct-${layout}-${mode}`;
+  const emailId = `${prefix}-email`;
+  const passwordId = `${prefix}-password`;
+  const score = passwordStrength(password);
+  const href = switchHref ?? (signUp ? "/login/" : "/signup/");
+  const busy = pending !== null;
+
+  function handleSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    onSubmit?.(event);
+  }
+
+  const fields = (
+    <>
+      <div className="acct-auth-field">
+        <Label className="acct-auth-label leading-[normal]" htmlFor={emailId}>
+          Email
+        </Label>
+        <Input
+          className={
+            error ? "acct-auth-input acct-auth-input-error h-auto" : "acct-auth-input h-auto"
+          }
+          id={emailId}
+          name="email"
+          type="email"
+          autoComplete="username"
+          value={email}
+          onChange={(event) => onEmailChange?.(event.target.value)}
+          placeholder="you@desk.tld"
+        />
+      </div>
+      <div className="acct-auth-field">
+        <Label className="acct-auth-label leading-[normal]" htmlFor={passwordId}>
+          Password
+        </Label>
+        <Input
+          className={
+            error ? "acct-auth-input acct-auth-input-error h-auto" : "acct-auth-input h-auto"
+          }
+          id={passwordId}
+          name="password"
+          type="password"
+          autoComplete={signUp ? "new-password" : "current-password"}
+          value={password}
+          onChange={(event) => onPasswordChange?.(event.target.value)}
+          placeholder={signUp ? "8+ chars, mixed case, a digit" : "••••••••••"}
+          aria-describedby={layout === "desk" && signUp ? `${prefix}-strength` : undefined}
+        />
+        {layout === "desk" && signUp ? (
+          <div className="acct-auth-strength">
+            <div className="acct-auth-strength-track" aria-hidden="true">
+              {[0, 1, 2, 3].map((index) => (
+                <span
+                  key={index}
+                  className="acct-auth-strength-seg"
+                  style={index < score ? { background: STRENGTH_COLORS[score] } : undefined}
+                />
+              ))}
+            </div>
+            <span className="acct-auth-strength-word" id={`${prefix}-strength`} role="status">
+              {STRENGTH_WORDS[score] || "—"}
+            </span>
+          </div>
+        ) : null}
+      </div>
+    </>
+  );
+
+  const submitLabel = pending === "email" ? (signUp ? "Creating…" : "Signing in…") : signUp ? "Sign up" : "Sign in";
+  const markNode = mark ?? <DigiquantMark size={28} />;
+  const inviteMarker = brand?.marker?.trim() ? brand.marker.trim() : null;
+  const inviteLine = brand?.line?.trim() ? brand.line.trim() : null;
+  const brandRow =
+    layout === "compact" ? (
+      <div className="acct-auth-brand">
+        <div className="acct-auth-mark">{markNode}</div>
+        <span className="acct-auth-wordmark">{productName}</span>
+        {inviteMarker ? <span className="acct-auth-invite-marker">{inviteMarker}</span> : null}
+      </div>
+    ) : (
+      <div className="acct-auth-mark">{markNode}</div>
+    );
+  const inviteBrand =
+    inviteMarker && layout !== "compact" ? (
+      <div className="acct-auth-invite">
+        <span className="acct-auth-invite-marker">{inviteMarker}</span>
+      </div>
+    ) : null;
+
+  let body: ReactNode;
+  switch (layout) {
+    case "compact":
+      body = (
+        <>
+          {fields}
+          <div className="acct-auth-actions">
+            <OAuthButtons pending={pending} onOAuth={onOAuth} stretch={false} />
+            <Button
+              type="submit"
+              className="acct-auth-submit h-auto font-normal"
+              disabled={busy}
+              data-testid="login-email-submit"
+            >
+              {submitLabel}
+            </Button>
+          </div>
+        </>
+      );
+      break;
+    case "icons-first":
+      body = (
+        <>
+          <div className="acct-auth-oauth-row">
+            <OAuthButtons pending={pending} onOAuth={onOAuth} stretch />
+          </div>
+          <div className="acct-auth-divider">
+            <span>or email</span>
+          </div>
+          {fields}
+          <Button
+            type="submit"
+            className="acct-auth-submit-block h-auto font-normal"
+            disabled={busy}
+            data-testid="login-email-submit"
+          >
+            {submitLabel}
+          </Button>
+        </>
+      );
+      break;
+    case "desk":
+      body = (
+        <>
+          <p className="acct-auth-kicker">
+            {productName}{" "}
+            <span className="text-ink-mute">{signUp ? "· create account" : "· sign in"}</span>
+          </p>
+          <p className="acct-auth-copy">
+            {signUp
+              ? "Google, GitHub, or X to start. Email if you would rather keep a password."
+              : "Email and a password, or a provider."}
+          </p>
+          {fields}
+          <div className="acct-auth-actions">
+            <OAuthButtons pending={pending} onOAuth={onOAuth} stretch={false} />
+            <Button
+              type="submit"
+              className="acct-auth-submit h-auto font-normal"
+              disabled={busy}
+              data-testid="login-email-submit"
+            >
+              {submitLabel}
+            </Button>
+          </div>
+          {!signUp ? (
+            <Button
+              type="button"
+              className="acct-auth-forgot h-auto font-normal"
+              onClick={onForgotPassword}
+            >
+              Forgot password?
+            </Button>
+          ) : null}
+        </>
+      );
+      break;
+    default: {
+      const _never: never = layout;
+      body = _never;
+    }
+  }
+
+  return (
+    <form className="acct-auth" data-layout={layout} data-mode={mode} onSubmit={handleSubmit} noValidate>
+      {brandRow}
+      {inviteBrand}
+      {inviteLine ? <p className="acct-auth-invite-line">{inviteLine}</p> : null}
+      {body}
+      <p className="acct-auth-switch">
+        {signUp ? <a href={href}>Sign in</a> : <a href={href}>Create an account</a>}
+      </p>
+      {error ? (
+        <p className="acct-auth-error" role="alert">
+          {error}
+        </p>
+      ) : null}
+      {info ? (
+        <p className="acct-auth-info" role="status">
+          {info}
+        </p>
+      ) : null}
+    </form>
+  );
+}

package/src/components/assistant-ui/elements/mermaid-diagram.aui.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { memo, type FC } from "react";
+import { useAuiState } from "@assistant-ui/react";
+import type { SyntaxHighlighterProps } from "@assistant-ui/react-markdown";
+import {
+  MermaidDiagram as MermaidDiagramBase,
+  MermaidZoom,
+} from "./mermaid-diagram";
+
+export type MermaidDiagramProps = SyntaxHighlighterProps & {
+  className?: string;
+};
+
+/**
+ * Use it by passing to `componentsByLanguage` for mermaid in `markdown-text.tsx`.
+ *
+ * @example
+ * const MarkdownTextImpl = () => {
+ *   return (
+ *     <MarkdownTextPrimitive
+ *       remarkPlugins={[remarkGfm]}
+ *       className="aui-md"
+ *       components={defaultComponents}
+ *       componentsByLanguage={{
+ *         mermaid: {
+ *           SyntaxHighlighter: MermaidDiagram
+ *         },
+ *       }}
+ *     />
+ *   );
+ * };
+ */
+const MermaidDiagramImpl: FC<MermaidDiagramProps> = ({
+  code,
+  className,
+  node: _node,
+  components: _components,
+  language: _language,
+}) => {
+  const isStreaming = useAuiState(
+    (s) => s.optional.part?.status.type === "running",
+  );
+
+  return (
+    <MermaidDiagramBase
+      code={code}
+      {...(className !== undefined ? { className } : {})}
+      streaming={isStreaming}
+    />
+  );
+};
+
+const MermaidDiagram = memo(
+  MermaidDiagramImpl,
+) as unknown as FC<MermaidDiagramProps> & {
+  Zoom: typeof MermaidZoom;
+};
+
+MermaidDiagram.displayName = "MermaidDiagram";
+MermaidDiagram.Zoom = MermaidZoom;
+
+export { MermaidDiagram, MermaidZoom };