@dbx-tools/ui 0.0.0-stage → 0.9.61

package/src/auth/react/auth-gate.tsx

@@ -0,0 +1,281 @@
+import { net } from "@dbx-tools/shared-core";
+import { type FormEvent, type ReactNode, useCallback, useEffect, useRef, useState } from "react";
+
+import {
+  beginPasskeyEnrollment,
+  beginPasskeySignIn,
+  getAuthStatus,
+  requestEmailOtp,
+  type PasskeyOperation,
+  verifyEmailOtp,
+} from "./auth-client.ts";
+import { BrandIcon, useBrand } from "../../branding/react/index.ts";
+import { Button, Input } from "../../react/index.ts";
+
+type Phase = "loading" | "email" | "code" | "enroll" | "authed" | "open";
+
+/** Protected content and optional sign-in copy rendered by {@link AuthGate}. */
+export interface AuthGateProps {
+  children: ReactNode;
+  title?: string;
+  description?: string;
+}
+
+/** Email OTP gate with conditional passkey sign-in and first-login enrollment. */
+export function AuthGate({ children, title, description }: AuthGateProps): ReactNode {
+  const { context: brand } = useBrand();
+  const [phase, setPhase] = useState<Phase>("loading");
+  const [email, setEmail] = useState("");
+  const [code, setCode] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [notice, setNotice] = useState<string | null>(null);
+  const [passkeysEnabled, setPasskeysEnabled] = useState(false);
+  const passkeyOperation = useRef<PasskeyOperation | undefined>(undefined);
+
+  const cancelPasskey = useCallback(() => {
+    const operation = passkeyOperation.current;
+    passkeyOperation.current = undefined;
+    operation?.cancel();
+  }, []);
+
+  useEffect(() => cancelPasskey, [cancelPasskey]);
+
+  useEffect(() => {
+    let cancelled = false;
+    void getAuthStatus()
+      .then((status) => {
+        if (cancelled) return;
+        setPasskeysEnabled(status.passkeysEnabled === true);
+        setPhase(status.enabled ? (status.authenticated ? "authed" : "email") : "open");
+      })
+      .catch(() => {
+        if (!cancelled) setPhase("email");
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!passkeysEnabled || phase !== "email") {
+      cancelPasskey();
+      return;
+    }
+    if (
+      typeof PublicKeyCredential === "undefined" ||
+      typeof PublicKeyCredential.isConditionalMediationAvailable !== "function"
+    ) {
+      return;
+    }
+    let cancelled = false;
+    let ownedOperation: PasskeyOperation | undefined;
+    // Conditional mediation cannot reveal whether a credential exists. It lets
+    // the browser offer one immediately on the focused `webauthn` input without
+    // showing an empty modal to users who have no passkey.
+    void PublicKeyCredential.isConditionalMediationAvailable()
+      .then(async (available) => {
+        if (cancelled) return;
+        if (!available) return;
+        cancelPasskey();
+        const operation = beginPasskeySignIn(true);
+        ownedOperation = operation;
+        passkeyOperation.current = operation;
+        const authenticated = await operation.result;
+        if (passkeyOperation.current === operation) {
+          passkeyOperation.current = undefined;
+          if (!cancelled && authenticated) setPhase("authed");
+        }
+      })
+      .catch(() => undefined);
+    return () => {
+      cancelled = true;
+      ownedOperation?.cancel();
+      if (passkeyOperation.current === ownedOperation) passkeyOperation.current = undefined;
+    };
+  }, [cancelPasskey, passkeysEnabled, phase]);
+
+  const requestCode = useCallback(
+    async (event: FormEvent) => {
+      event.preventDefault();
+      if (busy) return;
+      const addresses = net.parseEmails(email);
+      const address = addresses[0];
+      if (addresses.length !== 1 || !address || !net.isEmail(address)) {
+        setNotice("Enter a valid email address.");
+        return;
+      }
+      cancelPasskey();
+      setBusy(true);
+      setNotice(null);
+      setEmail(address);
+      try {
+        if (!(await requestEmailOtp(address))) throw new Error("OTP request failed");
+        setNotice("If the address is authorized, a verification code is on its way.");
+        setPhase("code");
+      } catch {
+        setNotice("Unable to request a verification code. Try again.");
+      } finally {
+        setBusy(false);
+      }
+    },
+    [busy, cancelPasskey, email],
+  );
+
+  const verifyCode = useCallback(
+    async (event: FormEvent) => {
+      event.preventDefault();
+      if (!code.trim() || busy) return;
+      setBusy(true);
+      setNotice(null);
+      try {
+        if (!(await verifyEmailOtp(email, code.trim(), email.split("@")[0] || "User"))) {
+          throw new Error("OTP verification failed");
+        }
+        setPhase(passkeysEnabled ? "enroll" : "authed");
+      } catch {
+        setNotice("That verification code is incorrect or has expired.");
+      } finally {
+        setBusy(false);
+      }
+    },
+    [busy, code, email, passkeysEnabled],
+  );
+
+  const usePasskey = useCallback(async () => {
+    cancelPasskey();
+    const operation = beginPasskeySignIn();
+    passkeyOperation.current = operation;
+    setBusy(true);
+    setNotice(null);
+    try {
+      if (!(await operation.result)) throw new Error("Passkey authentication failed");
+      if (passkeyOperation.current !== operation) return;
+      passkeyOperation.current = undefined;
+      setPhase("authed");
+    } catch {
+      if (passkeyOperation.current === operation) {
+        setNotice("Unable to sign in with a passkey. Use email recovery instead.");
+      }
+    } finally {
+      if (passkeyOperation.current === operation) {
+        passkeyOperation.current = undefined;
+        setBusy(false);
+      }
+    }
+  }, [cancelPasskey]);
+
+  const enroll = useCallback(async () => {
+    cancelPasskey();
+    const operation = beginPasskeyEnrollment("Primary passkey");
+    passkeyOperation.current = operation;
+    setBusy(true);
+    setNotice(null);
+    try {
+      if (!(await operation.result)) throw new Error("Passkey enrollment failed");
+      if (passkeyOperation.current !== operation) return;
+      passkeyOperation.current = undefined;
+      setPhase("authed");
+    } catch {
+      if (passkeyOperation.current === operation) {
+        setNotice("Unable to create a passkey. You can continue with email recovery.");
+      }
+    } finally {
+      if (passkeyOperation.current === operation) {
+        passkeyOperation.current = undefined;
+        setBusy(false);
+      }
+    }
+  }, [cancelPasskey]);
+
+  if (phase === "authed" || phase === "open") return <>{children}</>;
+  if (phase === "loading") return null;
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-background p-6">
+      <div className="w-full max-w-sm rounded-lg border border-border bg-card p-6 shadow-sm">
+        <div className="mb-4 flex items-center gap-2 text-foreground">
+          <BrandIcon className="size-5" alt="" aria-hidden />
+          <h1 className="text-lg font-semibold">{title ?? `Sign in to ${brand.name}`}</h1>
+        </div>
+        <p className="mb-4 text-sm text-muted-foreground">
+          {description ??
+            (phase === "code"
+              ? "Enter the 6-digit verification code sent to your email address."
+              : phase === "enroll"
+                ? "Create a passkey for faster, phishing-resistant sign-in next time."
+                : "Enter your email for a one-time code, or use a passkey.")}
+        </p>
+
+        {phase === "email" ? (
+          <form noValidate onSubmit={requestCode} className="space-y-3">
+            <Input
+              type="email"
+              autoComplete="email webauthn"
+              autoFocus
+              aria-label="Email address"
+              placeholder="you@example.com"
+              value={email}
+              onChange={(event) => setEmail(event.target.value)}
+              required
+            />
+            <Button type="submit" disabled={busy} className="w-full">
+              Sign in with email OTP
+            </Button>
+            {passkeysEnabled ? (
+              <Button
+                type="button"
+                variant="outline"
+                disabled={busy}
+                className="w-full"
+                onClick={usePasskey}
+              >
+                Sign in with a passkey
+              </Button>
+            ) : null}
+          </form>
+        ) : phase === "code" ? (
+          <form onSubmit={verifyCode} className="space-y-3">
+            <Input
+              type="text"
+              inputMode="numeric"
+              autoComplete="one-time-code"
+              aria-label="Verification code"
+              placeholder="6-digit verification code"
+              maxLength={6}
+              value={code}
+              onChange={(event) => setCode(event.target.value)}
+              required
+            />
+            <Button type="submit" disabled={busy} className="w-full">
+              Continue
+            </Button>
+          </form>
+        ) : (
+          <div className="space-y-3">
+            <Button type="button" disabled={busy} className="w-full" onClick={enroll}>
+              Create a passkey
+            </Button>
+            <Button
+              type="button"
+              variant="ghost"
+              className="w-full"
+              onClick={() => {
+                cancelPasskey();
+                setBusy(false);
+                setPhase("authed");
+              }}
+            >
+              Not now
+            </Button>
+          </div>
+        )}
+
+        {notice ? (
+          <p role="status" aria-live="polite" className="mt-3 text-xs text-muted-foreground">
+            {notice}
+          </p>
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/src/auth/react/index.ts

@@ -0,0 +1,4 @@
+export { AUTH_BASE_PATH, getAuthStatus, logout } from "./auth-client.ts";
+export type { Passkey } from "./auth-client.ts";
+export { AuthGate, type AuthGateProps } from "./auth-gate.tsx";
+export { PasskeyManager, type PasskeyManagerProps } from "./passkey-manager.tsx";

package/src/auth/react/passkey-manager.tsx

@@ -0,0 +1,154 @@
+import { type ReactNode, useCallback, useEffect, useRef, useState } from "react";
+
+import {
+  beginPasskeyEnrollment,
+  listPasskeys,
+  type PasskeyOperation,
+  type Passkey,
+  removePasskey,
+  renamePasskey,
+} from "./auth-client.ts";
+import { Button, Input } from "../../react/index.ts";
+
+/** Styling options for the authenticated passkey management surface. */
+export interface PasskeyManagerProps {
+  className?: string;
+}
+
+/** Authenticated management surface for a user's Better Auth passkeys. */
+export function PasskeyManager({ className }: PasskeyManagerProps): ReactNode {
+  const [passkeys, setPasskeys] = useState<Passkey[]>([]);
+  const [names, setNames] = useState<Record<string, string>>({});
+  const [busy, setBusy] = useState(false);
+  const [loaded, setLoaded] = useState(false);
+  const [notice, setNotice] = useState<string | null>(null);
+  const enrollment = useRef<PasskeyOperation | undefined>(undefined);
+
+  const cancelEnrollment = useCallback(() => {
+    const operation = enrollment.current;
+    enrollment.current = undefined;
+    operation?.cancel();
+  }, []);
+
+  useEffect(() => cancelEnrollment, [cancelEnrollment]);
+
+  const refresh = useCallback(async () => {
+    const values = await listPasskeys();
+    setPasskeys(values);
+    setNames(Object.fromEntries(values.map((passkey) => [passkey.id, passkey.name ?? "Passkey"])));
+    setLoaded(true);
+    setNotice(null);
+  }, []);
+
+  useEffect(() => {
+    void refresh().catch(() => setNotice("Unable to load passkeys."));
+  }, [refresh]);
+
+  const add = useCallback(async () => {
+    cancelEnrollment();
+    const operation = beginPasskeyEnrollment();
+    enrollment.current = operation;
+    setBusy(true);
+    setNotice(null);
+    try {
+      if (!(await operation.result)) throw new Error("Passkey enrollment failed");
+      if (enrollment.current !== operation) return;
+      await refresh();
+    } catch {
+      if (enrollment.current === operation) setNotice("Unable to add a passkey.");
+    } finally {
+      if (enrollment.current === operation) {
+        enrollment.current = undefined;
+        setBusy(false);
+      }
+    }
+  }, [cancelEnrollment, refresh]);
+
+  const rename = useCallback(
+    async (id: string) => {
+      const name = names[id]?.trim();
+      if (!name) return;
+      setBusy(true);
+      try {
+        if (!(await renamePasskey(id, name))) throw new Error("Passkey rename failed");
+        await refresh();
+      } catch {
+        setNotice("Unable to rename the passkey.");
+      } finally {
+        setBusy(false);
+      }
+    },
+    [names, refresh],
+  );
+
+  const remove = useCallback(
+    async (id: string) => {
+      setBusy(true);
+      try {
+        if (!(await removePasskey(id))) throw new Error("Passkey removal failed");
+        await refresh();
+      } catch {
+        setNotice("Unable to remove the passkey.");
+      } finally {
+        setBusy(false);
+      }
+    },
+    [refresh],
+  );
+
+  return (
+    <section className={className} aria-label="Passkeys">
+      <div className="mb-3 flex items-center justify-between gap-3">
+        <div>
+          <h2 className="font-medium text-foreground">Passkeys</h2>
+          <p className="text-sm text-muted-foreground">
+            Add more than one device so email remains recovery, not your daily sign-in.
+          </p>
+        </div>
+        <Button type="button" onClick={add} disabled={busy}>
+          Add passkey
+        </Button>
+      </div>
+      <div className="space-y-2">
+        {passkeys.map((passkey) => (
+          <div key={passkey.id} className="flex items-center gap-2 rounded-md border p-2">
+            <Input
+              aria-label="Passkey name"
+              value={names[passkey.id] ?? ""}
+              onChange={(event) =>
+                setNames((current) => ({ ...current, [passkey.id]: event.target.value }))
+              }
+            />
+            <Button
+              type="button"
+              variant="outline"
+              disabled={busy}
+              onClick={() => rename(passkey.id)}
+            >
+              Save
+            </Button>
+            <Button
+              type="button"
+              variant="ghost"
+              disabled={busy}
+              onClick={() => remove(passkey.id)}
+            >
+              Remove
+            </Button>
+          </div>
+        ))}
+        {loaded && passkeys.length === 0 ? (
+          <p className="text-sm text-muted-foreground">No passkeys enrolled.</p>
+        ) : null}
+        {!loaded && !notice ? (
+          <p className="text-sm text-muted-foreground">Loading passkeys.</p>
+        ) : null}
+      </div>
+      {notice ? (
+        <p role="status" className="mt-2 text-sm text-muted-foreground">
+          {notice}
+        </p>
+      ) : null}
+    </section>
+  );
+}

package/src/branding/brand-bridge.css

@@ -0,0 +1,53 @@
+/*
+ * Brand -> AppKit token bridge.
+ *
+ * Remaps the AppKit / shadcn semantic tokens the dbx-tools UI components
+ * actually style off (`--primary`, `--ring`, `--accent`, `--sidebar-*`,
+ * `--font-*`) onto the portable `--brand-color-*` / `--brand-font-*` custom
+ * properties that `applyBrandContext()` writes. This is the "tag selector":
+ * scoped to `:root[data-brand]`, it is completely INERT until a brand is
+ * applied to the document (which sets the `data-brand` attribute), so
+ * importing it never disturbs default AppKit.
+ *
+ * Import once via `@dbx-tools/ui/styles.css` (the shared UI base every
+ * feature UI package pulls in), so the bridge travels with every dbx-tools UI
+ * component automatically.
+ *
+ * Scope note: `:root[data-brand]` has higher specificity (0,2,0) than AppKit's
+ * `:root` and `.dark` (both 0,1,0), so these win regardless of source order.
+ *
+ * Deliberately identity-only: it does NOT remap neutrals (`--background`,
+ * `--foreground`, `--card`, `--muted`, `--border`). The brand context carries a
+ * single light palette, so remapping neutrals would break dark mode; leaving
+ * them to AppKit keeps light AND dark themes working while the brand's identity
+ * colors + fonts come through.
+ */
+:root[data-brand] {
+  --primary: var(--brand-color-primary);
+  --primary-foreground: var(--brand-color-background);
+  --ring: var(--brand-color-primary);
+  /*
+   * `--accent` is a SURFACE, not an identity color. In AppKit / shadcn it is the
+   * subtle hover + selected background (light theme `oklch(0.967 0.001 286)`,
+   * i.e. near-white) paired with a near-black `--accent-foreground`. Assigning
+   * the brand accent to it at full strength therefore put dark text on saturated
+   * `#00A972` in every hover and every selected row - the selected conversation
+   * in `ThreadSidebar`, which styles off `bg-accent text-accent-foreground`, was
+   * the worst of it.
+   *
+   * Menus, selected rows, and tabs are navigation, not success or identity
+   * signals. Tint them with the cooler primary-hover color rather than the
+   * identity accent so the default brand produces a quiet blue wash instead of
+   * coral/red or success green. Mixing into the CURRENT `--background` follows
+   * the active theme on its own - pale in light mode and deep in dark mode -
+   * while AppKit's per-theme `--accent-foreground` remains readable. That is
+   * also why `--accent-foreground` is NOT set here: pinning it would break
+   * whichever theme it was not chosen for.
+   */
+  --accent: color-mix(in oklab, var(--brand-color-primary-hover) 12%, var(--background));
+  --sidebar-primary: var(--brand-color-primary);
+  --sidebar-primary-foreground: var(--brand-color-background);
+  --sidebar-ring: var(--brand-color-primary);
+  --font-sans: var(--brand-font-sans);
+  --font-mono: var(--brand-font-mono);
+}

package/src/branding/browser.ts

@@ -0,0 +1,70 @@
+import { brandUtils } from "@dbx-tools/shared-core";
+import { dbxToolsAssetDataUrls } from "./generated/assets.ts";
+
+const builtInAssets = new Map<string, string>([
+  [brandUtils.DEFAULT_BRAND_ASSETS.icon.light, dbxToolsAssetDataUrls.iconLight],
+  [brandUtils.DEFAULT_BRAND_ASSETS.icon.dark, dbxToolsAssetDataUrls.iconDark],
+  [brandUtils.DEFAULT_BRAND_ASSETS.logo.light, dbxToolsAssetDataUrls.logoLight],
+  [brandUtils.DEFAULT_BRAND_ASSETS.logo.dark, dbxToolsAssetDataUrls.logoDark],
+  [brandUtils.DEFAULT_BRAND_ASSETS.favicon, dbxToolsAssetDataUrls.iconLight],
+]);
+
+/** Resolve a brand asset identifier to a browser-loadable URL. */
+export type BrandAssetResolver = (source: string) => string;
+
+/** Resolve built-in package asset ids to portable data URLs. */
+export const resolveBrandAsset: BrandAssetResolver = (source) =>
+  builtInAssets.get(source) ?? source;
+
+/** Convert a validated context to CSS custom properties. */
+export function brandCssVariables(context: brandUtils.BrandContext): Record<string, string> {
+  return {
+    "--brand-color-primary": context.colors.primary,
+    "--brand-color-primary-hover": context.colors.primaryHover,
+    "--brand-color-accent": context.colors.accent,
+    "--brand-color-foreground": context.colors.foreground,
+    "--brand-color-background": context.colors.background,
+    "--brand-color-surface": context.colors.surface,
+    "--brand-color-muted": context.colors.muted,
+    "--brand-color-border": context.colors.border,
+    "--brand-font-sans": context.typography.sans,
+    "--brand-font-mono": context.typography.mono,
+  };
+}
+
+/** Document, root element, asset, title, and favicon behavior for applying a brand. */
+export interface ApplyBrandContextOptions {
+  root?: HTMLElement;
+  document?: Document;
+  resolveAsset?: BrandAssetResolver;
+  updateTitle?: boolean;
+  updateFavicon?: boolean;
+}
+
+/** Apply tokens and optional page metadata to a browser document. */
+export function applyBrandContext(
+  context: brandUtils.BrandContext,
+  options: ApplyBrandContextOptions = {},
+): void {
+  const documentRef = options.document ?? globalThis.document;
+  const root = options.root ?? documentRef?.documentElement;
+  for (const [name, value] of Object.entries(brandCssVariables(context))) {
+    root?.style.setProperty(name, value);
+  }
+  // Detection flag for the `brand-bridge.css` tag selector: setting
+  // `data-brand` activates the `:root[data-brand]` token remap. Until a
+  // brand is applied the bridge is inert, so default AppKit is untouched.
+  root?.setAttribute("data-brand", context.name);
+
+  if (documentRef && options.updateTitle !== false) documentRef.title = context.name;
+  if (!documentRef || options.updateFavicon === false) return;
+
+  const resolveAsset = options.resolveAsset ?? resolveBrandAsset;
+  let favicon = documentRef.querySelector<HTMLLinkElement>('link[rel="icon"]');
+  if (!favicon) {
+    favicon = documentRef.createElement("link");
+    favicon.rel = "icon";
+    documentRef.head.append(favicon);
+  }
+  favicon.href = resolveAsset(context.assets.favicon);
+}

package/src/branding/generated/assets.ts

@@ -0,0 +1,18 @@
+// GENERATED by branding/generate-package-assets.mjs - DO NOT EDIT.
+// Regenerated from branding/assets.
+// Hand edits are overwritten during synthesis; this file is read-only.
+/* eslint-disable prettier/prettier */
+
+export const dbxToolsAssetSvg = {
+  iconLight: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 64 64\" role=\"img\" aria-labelledby=\"title description\">\n  <title id=\"title\">dbx tools icon</title>\n  <desc id=\"description\">Pixel tool mark in Databricks lava red on a light surface.</desc>\n  <rect width=\"64\" height=\"64\" rx=\"12\" fill=\"#F9F7F4\"/>\n  <g shape-rendering=\"crispEdges\">\n    <path d=\"M4 28h8v8H4zm8 0h8v16h-8zm8-8h8v16h-8zm8 8h8v8h-8zm8-8h8v16h-8zm8 8h8v16h-8zm8 0h4v8h-4z\" fill=\"#FF3621\"/>\n    <path d=\"M4 28h8v8H4zm52 0h4v8h-4z\" fill=\"#98102A\"/>\n    <path d=\"M28 28h8v8h-8z\" fill=\"#FF5F46\"/>\n  </g>\n</svg>\n",
+  iconDark: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 64 64\" role=\"img\" aria-labelledby=\"title description\">\n  <title id=\"title\">dbx tools icon</title>\n  <desc id=\"description\">Pixel tool mark in Databricks lava red on a dark surface.</desc>\n  <rect width=\"64\" height=\"64\" rx=\"12\" fill=\"#1B3139\"/>\n  <g shape-rendering=\"crispEdges\">\n    <path d=\"M4 28h8v8H4zm8 0h8v16h-8zm8-8h8v16h-8zm8 8h8v8h-8zm8-8h8v16h-8zm8 8h8v16h-8zm8 0h4v8h-4z\" fill=\"#FF3621\"/>\n    <path d=\"M4 28h8v8H4zm52 0h4v8h-4z\" fill=\"#FF5F46\"/>\n    <path d=\"M28 28h8v8h-8z\" fill=\"#FF8974\"/>\n  </g>\n</svg>\n",
+  logoLight: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 72\" role=\"img\" aria-labelledby=\"title description\">\n  <title id=\"title\">dbx tools</title>\n  <desc id=\"description\">dbx tools logo for light surfaces.</desc>\n  <g transform=\"translate(4 4)\">\n    <rect width=\"64\" height=\"64\" rx=\"12\" fill=\"#F9F7F4\"/>\n    <g shape-rendering=\"crispEdges\">\n      <path d=\"M4 28h8v8H4zm8 0h8v16h-8zm8-8h8v16h-8zm8 8h8v8h-8zm8-8h8v16h-8zm8 8h8v16h-8zm8 0h4v8h-4z\" fill=\"#FF3621\"/>\n      <path d=\"M4 28h8v8H4zm52 0h4v8h-4z\" fill=\"#98102A\"/>\n      <path d=\"M28 28h8v8h-8z\" fill=\"#FF5F46\"/>\n    </g>\n  </g>\n  <text x=\"84\" y=\"47\" font-family=\"'DM Sans', ui-sans-serif, system-ui, sans-serif\" font-size=\"32\" font-weight=\"700\" letter-spacing=\"-0.5\" fill=\"#1B3139\">dbx <tspan fill=\"#FF3621\">tools</tspan></text>\n</svg>\n",
+  logoDark: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 72\" role=\"img\" aria-labelledby=\"title description\">\n  <title id=\"title\">dbx tools</title>\n  <desc id=\"description\">dbx tools logo for dark surfaces.</desc>\n  <g transform=\"translate(4 4)\">\n    <rect width=\"64\" height=\"64\" rx=\"12\" fill=\"#1B3139\"/>\n    <g shape-rendering=\"crispEdges\">\n      <path d=\"M4 28h8v8H4zm8 0h8v16h-8zm8-8h8v16h-8zm8 8h8v8h-8zm8-8h8v16h-8zm8 8h8v16h-8zm8 0h4v8h-4z\" fill=\"#FF3621\"/>\n      <path d=\"M4 28h8v8H4zm52 0h4v8h-4z\" fill=\"#FF5F46\"/>\n      <path d=\"M28 28h8v8h-8z\" fill=\"#FF8974\"/>\n    </g>\n  </g>\n  <text x=\"84\" y=\"47\" font-family=\"'DM Sans', ui-sans-serif, system-ui, sans-serif\" font-size=\"32\" font-weight=\"700\" letter-spacing=\"-0.5\" fill=\"#F9F7F4\">dbx <tspan fill=\"#FF5F46\">tools</tspan></text>\n</svg>\n",
+} as const;
+
+export const dbxToolsAssetDataUrls = {
+  iconLight: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgcm9sZT0iaW1nIiBhcmlhLWxhYmVsbGVkYnk9InRpdGxlIGRlc2NyaXB0aW9uIj4KICA8dGl0bGUgaWQ9InRpdGxlIj5kYnggdG9vbHMgaWNvbjwvdGl0bGU+CiAgPGRlc2MgaWQ9ImRlc2NyaXB0aW9uIj5QaXhlbCB0b29sIG1hcmsgaW4gRGF0YWJyaWNrcyBsYXZhIHJlZCBvbiBhIGxpZ2h0IHN1cmZhY2UuPC9kZXNjPgogIDxyZWN0IHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgcng9IjEyIiBmaWxsPSIjRjlGN0Y0Ii8+CiAgPGcgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj4KICAgIDxwYXRoIGQ9Ik00IDI4aDh2OEg0em04IDBoOHYxNmgtOHptOC04aDh2MTZoLTh6bTggOGg4djhoLTh6bTgtOGg4djE2aC04em04IDhoOHYxNmgtOHptOCAwaDR2OGgtNHoiIGZpbGw9IiNGRjM2MjEiLz4KICAgIDxwYXRoIGQ9Ik00IDI4aDh2OEg0em01MiAwaDR2OGgtNHoiIGZpbGw9IiM5ODEwMkEiLz4KICAgIDxwYXRoIGQ9Ik0yOCAyOGg4djhoLTh6IiBmaWxsPSIjRkY1RjQ2Ii8+CiAgPC9nPgo8L3N2Zz4K",
+  iconDark: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgcm9sZT0iaW1nIiBhcmlhLWxhYmVsbGVkYnk9InRpdGxlIGRlc2NyaXB0aW9uIj4KICA8dGl0bGUgaWQ9InRpdGxlIj5kYnggdG9vbHMgaWNvbjwvdGl0bGU+CiAgPGRlc2MgaWQ9ImRlc2NyaXB0aW9uIj5QaXhlbCB0b29sIG1hcmsgaW4gRGF0YWJyaWNrcyBsYXZhIHJlZCBvbiBhIGRhcmsgc3VyZmFjZS48L2Rlc2M+CiAgPHJlY3Qgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiByeD0iMTIiIGZpbGw9IiMxQjMxMzkiLz4KICA8ZyBzaGFwZS1yZW5kZXJpbmc9ImNyaXNwRWRnZXMiPgogICAgPHBhdGggZD0iTTQgMjhoOHY4SDR6bTggMGg4djE2aC04em04LThoOHYxNmgtOHptOCA4aDh2OGgtOHptOC04aDh2MTZoLTh6bTggOGg4djE2aC04em04IDBoNHY4aC00eiIgZmlsbD0iI0ZGMzYyMSIvPgogICAgPHBhdGggZD0iTTQgMjhoOHY4SDR6bTUyIDBoNHY4aC00eiIgZmlsbD0iI0ZGNUY0NiIvPgogICAgPHBhdGggZD0iTTI4IDI4aDh2OGgtOHoiIGZpbGw9IiNGRjg5NzQiLz4KICA8L2c+Cjwvc3ZnPgo=",
+  logoLight: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMjAgNzIiIHJvbGU9ImltZyIgYXJpYS1sYWJlbGxlZGJ5PSJ0aXRsZSBkZXNjcmlwdGlvbiI+CiAgPHRpdGxlIGlkPSJ0aXRsZSI+ZGJ4IHRvb2xzPC90aXRsZT4KICA8ZGVzYyBpZD0iZGVzY3JpcHRpb24iPmRieCB0b29scyBsb2dvIGZvciBsaWdodCBzdXJmYWNlcy48L2Rlc2M+CiAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCA0KSI+CiAgICA8cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHJ4PSIxMiIgZmlsbD0iI0Y5RjdGNCIvPgogICAgPGcgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj4KICAgICAgPHBhdGggZD0iTTQgMjhoOHY4SDR6bTggMGg4djE2aC04em04LThoOHYxNmgtOHptOCA4aDh2OGgtOHptOC04aDh2MTZoLTh6bTggOGg4djE2aC04em04IDBoNHY4aC00eiIgZmlsbD0iI0ZGMzYyMSIvPgogICAgICA8cGF0aCBkPSJNNCAyOGg4djhINHptNTIgMGg0djhoLTR6IiBmaWxsPSIjOTgxMDJBIi8+CiAgICAgIDxwYXRoIGQ9Ik0yOCAyOGg4djhoLTh6IiBmaWxsPSIjRkY1RjQ2Ii8+CiAgICA8L2c+CiAgPC9nPgogIDx0ZXh0IHg9Ijg0IiB5PSI0NyIgZm9udC1mYW1pbHk9IidETSBTYW5zJywgdWktc2Fucy1zZXJpZiwgc3lzdGVtLXVpLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjMyIiBmb250LXdlaWdodD0iNzAwIiBsZXR0ZXItc3BhY2luZz0iLTAuNSIgZmlsbD0iIzFCMzEzOSI+ZGJ4IDx0c3BhbiBmaWxsPSIjRkYzNjIxIj50b29sczwvdHNwYW4+PC90ZXh0Pgo8L3N2Zz4K",
+  logoDark: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMjAgNzIiIHJvbGU9ImltZyIgYXJpYS1sYWJlbGxlZGJ5PSJ0aXRsZSBkZXNjcmlwdGlvbiI+CiAgPHRpdGxlIGlkPSJ0aXRsZSI+ZGJ4IHRvb2xzPC90aXRsZT4KICA8ZGVzYyBpZD0iZGVzY3JpcHRpb24iPmRieCB0b29scyBsb2dvIGZvciBkYXJrIHN1cmZhY2VzLjwvZGVzYz4KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0IDQpIj4KICAgIDxyZWN0IHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgcng9IjEyIiBmaWxsPSIjMUIzMTM5Ii8+CiAgICA8ZyBzaGFwZS1yZW5kZXJpbmc9ImNyaXNwRWRnZXMiPgogICAgICA8cGF0aCBkPSJNNCAyOGg4djhINHptOCAwaDh2MTZoLTh6bTgtOGg4djE2aC04em04IDhoOHY4aC04em04LThoOHYxNmgtOHptOCA4aDh2MTZoLTh6bTggMGg0djhoLTR6IiBmaWxsPSIjRkYzNjIxIi8+CiAgICAgIDxwYXRoIGQ9Ik00IDI4aDh2OEg0em01MiAwaDR2OGgtNHoiIGZpbGw9IiNGRjVGNDYiLz4KICAgICAgPHBhdGggZD0iTTI4IDI4aDh2OGgtOHoiIGZpbGw9IiNGRjg5NzQiLz4KICAgIDwvZz4KICA8L2c+CiAgPHRleHQgeD0iODQiIHk9IjQ3IiBmb250LWZhbWlseT0iJ0RNIFNhbnMnLCB1aS1zYW5zLXNlcmlmLCBzeXN0ZW0tdWksIHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMzIiIGZvbnQtd2VpZ2h0PSI3MDAiIGxldHRlci1zcGFjaW5nPSItMC41IiBmaWxsPSIjRjlGN0Y0Ij5kYnggPHRzcGFuIGZpbGw9IiNGRjVGNDYiPnRvb2xzPC90c3Bhbj48L3RleHQ+Cjwvc3ZnPgo=",
+} as const;

package/src/branding/generated/icon-dark.svg

@@ -0,0 +1,11 @@
+<!-- GENERATED by branding/generate-package-assets.mjs - DO NOT EDIT. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-labelledby="title description">
+  <title id="title">dbx tools icon</title>
+  <desc id="description">Pixel tool mark in Databricks lava red on a dark surface.</desc>
+  <rect width="64" height="64" rx="12" fill="#1B3139"/>
+  <g shape-rendering="crispEdges">
+    <path d="M4 28h8v8H4zm8 0h8v16h-8zm8-8h8v16h-8zm8 8h8v8h-8zm8-8h8v16h-8zm8 8h8v16h-8zm8 0h4v8h-4z" fill="#FF3621"/>
+    <path d="M4 28h8v8H4zm52 0h4v8h-4z" fill="#FF5F46"/>
+    <path d="M28 28h8v8h-8z" fill="#FF8974"/>
+  </g>
+</svg>

package/src/branding/generated/icon-light.svg

@@ -0,0 +1,11 @@
+<!-- GENERATED by branding/generate-package-assets.mjs - DO NOT EDIT. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-labelledby="title description">
+  <title id="title">dbx tools icon</title>
+  <desc id="description">Pixel tool mark in Databricks lava red on a light surface.</desc>
+  <rect width="64" height="64" rx="12" fill="#F9F7F4"/>
+  <g shape-rendering="crispEdges">
+    <path d="M4 28h8v8H4zm8 0h8v16h-8zm8-8h8v16h-8zm8 8h8v8h-8zm8-8h8v16h-8zm8 8h8v16h-8zm8 0h4v8h-4z" fill="#FF3621"/>
+    <path d="M4 28h8v8H4zm52 0h4v8h-4z" fill="#98102A"/>
+    <path d="M28 28h8v8h-8z" fill="#FF5F46"/>
+  </g>
+</svg>

package/src/branding/generated/logo-dark.svg

@@ -0,0 +1,14 @@
+<!-- GENERATED by branding/generate-package-assets.mjs - DO NOT EDIT. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 72" role="img" aria-labelledby="title description">
+  <title id="title">dbx tools</title>
+  <desc id="description">dbx tools logo for dark surfaces.</desc>
+  <g transform="translate(4 4)">
+    <rect width="64" height="64" rx="12" fill="#1B3139"/>
+    <g shape-rendering="crispEdges">
+      <path d="M4 28h8v8H4zm8 0h8v16h-8zm8-8h8v16h-8zm8 8h8v8h-8zm8-8h8v16h-8zm8 8h8v16h-8zm8 0h4v8h-4z" fill="#FF3621"/>
+      <path d="M4 28h8v8H4zm52 0h4v8h-4z" fill="#FF5F46"/>
+      <path d="M28 28h8v8h-8z" fill="#FF8974"/>
+    </g>
+  </g>
+  <text x="84" y="47" font-family="'DM Sans', ui-sans-serif, system-ui, sans-serif" font-size="32" font-weight="700" letter-spacing="-0.5" fill="#F9F7F4">dbx <tspan fill="#FF5F46">tools</tspan></text>
+</svg>

package/src/branding/generated/logo-light.svg

@@ -0,0 +1,14 @@
+<!-- GENERATED by branding/generate-package-assets.mjs - DO NOT EDIT. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 72" role="img" aria-labelledby="title description">
+  <title id="title">dbx tools</title>
+  <desc id="description">dbx tools logo for light surfaces.</desc>
+  <g transform="translate(4 4)">
+    <rect width="64" height="64" rx="12" fill="#F9F7F4"/>
+    <g shape-rendering="crispEdges">
+      <path d="M4 28h8v8H4zm8 0h8v16h-8zm8-8h8v16h-8zm8 8h8v8h-8zm8-8h8v16h-8zm8 8h8v16h-8zm8 0h4v8h-4z" fill="#FF3621"/>
+      <path d="M4 28h8v8H4zm52 0h4v8h-4z" fill="#98102A"/>
+      <path d="M28 28h8v8h-8z" fill="#FF5F46"/>
+    </g>
+  </g>
+  <text x="84" y="47" font-family="'DM Sans', ui-sans-serif, system-ui, sans-serif" font-size="32" font-weight="700" letter-spacing="-0.5" fill="#1B3139">dbx <tspan fill="#FF3621">tools</tspan></text>
+</svg>