@forwardreach/saas-ui 0.4.0

package/CHANGELOG.md

@@ -0,0 +1,54 @@
+# Changelog
+
+## 0.4.0
+
+### Minor Changes
+
+- Breaking redesign of the `Login` component and new `RequestAccess` gate component.
+
+  - **BREAKING**: `Login` replaces its ~40-prop configurable API with a small opinionated one (`logo`, `title`, `description`, `providers`, `providersError`, `magicLink`, `devLogin`, `requestAccess`, `footer`). Removed: `classNames`, `header`, `dividerLabel`, `externalProvidersLabel`, per-affordance `icon`/`pending*`/`disabled`/`variant`/`error` props, magic-link input overrides, and controlled `email`. Handlers now return promises; the component owns pending state (all controls disabled while any flow is in flight), scoped error display from thrown `Error` messages, and icons.
+  - Built-in provider brand icons (`GoogleIcon`, `MicrosoftIcon`, `GitHubIcon`) auto-selected from the provider `id`, also exported standalone.
+  - Built-in magic-link "sent" confirmation state with Resend and "Use a different email" actions.
+  - When a `logo` is provided, the `title` renders visually hidden so the wordmark carries the branding.
+  - New `requestAccess` footer line takes a consumer-supplied link element.
+  - New `RequestAccess` component: request-by-email card, optional access-code card, and sign-in footer line, with the same promise-handler conventions.
+
+- 6e4970a: saas-ui: add `AuditLog`, `CopyField`, `GettingStarted`, and `SettingsSection` components.
+
+  saas-mcp: split the MCP settings surface into focused sections (`McpConnectorOverview`, `McpToolReference`, `McpConnectedClients`, `McpDeveloperTokens`, `McpActivity`), replacing the previous `McpSettingsPanel`. These sections consume the new saas-ui exports, so the `@forwardreach/saas-ui` peer dependency floor is raised to `^0.4.0`.
+
+## 0.3.1
+
+### Patch Changes
+
+- Publish the shared UI package from the ReachMeHQ GitHub Packages scope with updated package metadata and consumer setup documentation.
+
+## 0.3.0
+
+### Minor Changes
+
+- Add an opt-in `ghost-accent` `Button`/`IconButton` variant for ghosts that belong to a brand cluster. It is transparent at rest like `ghost` but fills with the new `--ssui-accent-subtle` (and `--ssui-accent-subtle-foreground`) tokens on hover instead of the neutral `--ssui-surface-muted`. The tokens ship neutral defaults (a light primary tint) so the package stays brand-neutral; consumers remap them to their brand. The existing `ghost` variant, the default variant, and all current behavior are unchanged. Use neutral `ghost` for utility actions (close/dismiss/refresh/revoke/cancel/plain-toolbar overflow) and `ghost-accent` for a ghost inside a brand cluster.
+
+## 0.2.0
+
+### Minor Changes
+
+- 7413cfe: Enhance `Avatar` and `InlineNotice` to unblock deferred consumer adoption, all additive and default-preserving:
+
+  - `Avatar` forwards image-loading attributes via a new `imageProps` passthrough (e.g. `referrerPolicy`, `crossOrigin`, `loading`), so referrer-sensitive sources such as Google OAuth profile images load instead of falling back to initials; the component still owns `src`, `alt`, and the image `className`.
+  - `Avatar` accepts a numeric `size` (in pixels) alongside the `sm`/`md`/`lg` presets, with initials font-size scaled to the rendered size.
+  - `Avatar` gains an opt-in `seed` prop that renders a deterministic, brand-neutral initials background drawn from new `--ssui-avatar-*` palette tokens; without `seed` the fallback keeps the existing muted surface.
+  - `InlineNotice` gains an `open` prop for externally-controlled visibility; in controlled mode dismiss and auto-dismiss only invoke `onDismiss`. Omitting `open` preserves today's uncontrolled self-hiding behavior.
+
+- 2b8f1f4: Add adoption-feedback enhancements to shared components, all additive and default-preserving:
+
+  - `Login` now suppresses an affordance's default icon when its `icon` is explicitly `null` (external providers, magic-link submit, dev login); omitting the prop keeps the existing default glyph.
+  - `StatusPill` gains an opt-in `dot` that renders a leading status dot in the variant's token-derived color; the dot is off by default.
+  - `ConfirmDialog` gains an optional `confirmingLabel` shown on the confirm button while `onConfirm` is in flight; without it, the button keeps showing `confirmLabel`.
+
+This package follows semantic versioning. Changes should be recorded through Changesets before publishing.
+
+## 0.1.0
+
+- Initial private package scaffold.
+- Added brand-neutral utility helpers, primitives, SaaS pattern components, semantic token CSS, and GitHub Packages release workflow.

package/README.md

@@ -0,0 +1,7 @@
+# @forwardreach/saas-ui
+
+This package is published for use by ReachMe.chat, PeopleThread, and approved ReachMe/PeopleThread partners.
+
+It is not intended as a general-purpose public package. Full integration and development documentation is maintained in the private `forwardreach/saas-shared` repository for users with access:
+
+https://github.com/forwardreach/saas-shared/blob/main/docs/packages/saas-ui.md

package/dist/components/audit-log.d.ts

@@ -0,0 +1,79 @@
+import * as React from "react";
+/** A single dropdown filter rendered in the audit-log header. Fully controlled by the caller. */
+export interface AuditLogFilter {
+    /** Stable id (used as the React key). */
+    id: string;
+    /** Currently selected value. */
+    value: string;
+    /** Selectable options; include an "all" sentinel if you want an unfiltered choice. */
+    options: {
+        value: string;
+        label: string;
+    }[];
+    /** Called with the newly selected value. */
+    onChange: (value: string) => void;
+    /** Accessible label for the select. */
+    ariaLabel?: string;
+}
+/** One key/value row shown in an entry's expanded detail area. */
+export interface AuditLogDetail {
+    label: string;
+    value: React.ReactNode;
+}
+/**
+ * A presentational, domain-agnostic audit event. Callers map their own audit
+ * records (MCP, and later other producers) onto this shape, resolving ids to
+ * human-readable labels before passing them in.
+ */
+export interface AuditLogEntry {
+    /** Stable id (React key). */
+    id: string;
+    /** ISO timestamp of the event. */
+    timestamp: string;
+    /** Primary line — the action/verb (e.g. a tool or management action name). */
+    title: string;
+    /** Resolved actor label (e.g. connected client or token name). */
+    actorLabel?: string;
+    /** Small muted tags shown under the title (e.g. auth method, category). */
+    badges?: string[];
+    /** Result of the action (e.g. `created`, `revoked`). */
+    outcome?: string;
+    /** Ids of affected target records/entities. */
+    targetIds?: string[];
+    /** Key/value rows shown when the entry is expanded. */
+    details?: AuditLogDetail[];
+    /** Arbitrary context rendered as a JSON block in the expanded view. */
+    metadata?: unknown;
+}
+/** Props for the presentational {@link AuditLog}. */
+export interface AuditLogProps {
+    /** Section heading. */
+    title?: React.ReactNode;
+    /** Supporting copy under the title. */
+    description?: React.ReactNode;
+    /** Leading icon for the section header. */
+    icon?: React.ReactNode;
+    /** Events to render (already filtered/resolved by the caller as needed). */
+    entries: AuditLogEntry[];
+    /** Optional header filter dropdowns; the caller owns their state. */
+    filters?: AuditLogFilter[];
+    /** Shows a loading hint in the header action instead of the count. */
+    loading?: boolean;
+    /** Error message shown above the list. */
+    error?: string | null;
+    /** Content shown when there are no entries. */
+    emptyState?: React.ReactNode;
+    /** Render an affected target id as a link; falls back to a plain badge. */
+    renderTargetLink?: (targetId: string) => React.ReactNode;
+    /** Override the default absolute date/time formatting. */
+    formatTimestamp?: (iso: string) => string;
+}
+/**
+ * A domain-agnostic audit log: a titled section with optional filter dropdowns,
+ * a list of expandable events (actor, action, outcome, affected targets, and a
+ * details/JSON drawer), and empty/error/loading states. It holds no data-fetching
+ * or product knowledge — the caller supplies resolved {@link AuditLogEntry}s and
+ * controls any filters. MCP composes this via `McpActivity`; other producers can
+ * reuse it directly.
+ */
+export declare function AuditLog({ title, description, icon, entries, filters, loading, error, emptyState, renderTargetLink, formatTimestamp, }: AuditLogProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/audit-log.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../utils/cn.js";
+import { SettingsSection } from "./settings-section.js";
+function defaultFormatTimestamp(iso) {
+    const date = new Date(iso);
+    if (Number.isNaN(date.getTime()))
+        return iso;
+    return new Intl.DateTimeFormat(undefined, { dateStyle: "medium", timeStyle: "short" }).format(date);
+}
+const selectClass = "h-9 rounded-[var(--ssui-radius)] border border-[color:var(--ssui-border)] bg-[color:var(--ssui-surface)] px-2 text-xs text-[color:var(--ssui-text)]";
+const targetBadgeClass = "inline-flex items-center gap-1 rounded-md bg-[color:var(--ssui-surface-muted)] px-1.5 py-0.5 text-xs text-[color:var(--ssui-text-muted)]";
+/**
+ * A domain-agnostic audit log: a titled section with optional filter dropdowns,
+ * a list of expandable events (actor, action, outcome, affected targets, and a
+ * details/JSON drawer), and empty/error/loading states. It holds no data-fetching
+ * or product knowledge — the caller supplies resolved {@link AuditLogEntry}s and
+ * controls any filters. MCP composes this via `McpActivity`; other producers can
+ * reuse it directly.
+ */
+export function AuditLog({ title = "Activity", description, icon, entries, filters = [], loading = false, error, emptyState = "No activity has been recorded.", renderTargetLink, formatTimestamp = defaultFormatTimestamp, }) {
+    return (_jsxs(SettingsSection, { action: _jsx("span", { className: "text-xs text-[color:var(--ssui-text-muted)]", children: loading ? "Loading..." : `${entries.length} events` }), description: description, icon: icon, title: title, children: [filters.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2", children: filters.map((filter) => (_jsx("select", { "aria-label": filter.ariaLabel, className: cn(selectClass, "min-w-32"), onChange: (event) => filter.onChange(event.target.value), value: filter.value, children: filter.options.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value))) }, filter.id))) })), error && _jsx("div", { className: "mt-2 text-xs text-red-600", children: error }), _jsxs("div", { className: "mt-3 divide-y divide-[color:var(--ssui-border)] rounded-[var(--ssui-radius)] border border-[color:var(--ssui-border)]", children: [entries.length === 0 && _jsx("div", { className: "px-3 py-6 text-center text-sm text-[color:var(--ssui-text-muted)]", children: emptyState }), entries.map((entry) => (_jsxs("details", { children: [_jsxs("summary", { className: "grid cursor-pointer list-none gap-2 px-3 py-3 md:grid-cols-[11rem_minmax(0,1fr)_8rem_8rem]", children: [_jsx("div", { className: "text-xs text-[color:var(--ssui-text-muted)]", children: formatTimestamp(entry.timestamp) }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate text-sm font-medium", children: entry.title }), _jsxs("div", { className: "mt-1 flex flex-wrap items-center gap-1 text-xs text-[color:var(--ssui-text-muted)]", children: [entry.actorLabel && _jsx("span", { className: "truncate font-medium text-[color:var(--ssui-text)]", children: entry.actorLabel }), (entry.badges ?? []).map((badge) => (_jsx("span", { children: badge }, badge)))] })] }), _jsx("div", { className: "text-xs text-[color:var(--ssui-text-muted)]", children: entry.outcome }), _jsx("div", { className: "flex flex-wrap gap-1", children: (entry.targetIds ?? []).slice(0, 2).map((targetId) => (_jsx(React.Fragment, { children: renderTargetLink ? renderTargetLink(targetId) : _jsx("span", { className: targetBadgeClass, children: "Record" }) }, targetId))) })] }), _jsxs("div", { className: "space-y-3 border-t border-[color:var(--ssui-border)] px-3 py-3", children: [entry.details && entry.details.length > 0 && (_jsx("div", { className: "grid gap-2 text-xs text-[color:var(--ssui-text-muted)] md:grid-cols-3", children: entry.details.map((detail) => (_jsxs("div", { children: [detail.label, ": ", detail.value] }, detail.label))) })), entry.targetIds && entry.targetIds.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-1.5", children: entry.targetIds.map((targetId) => (_jsx(React.Fragment, { children: renderTargetLink ? renderTargetLink(targetId) : _jsxs("span", { className: targetBadgeClass, children: ["Record ", targetId] }) }, targetId))) })), entry.metadata !== undefined && entry.metadata !== null && (_jsx("pre", { className: "max-h-56 overflow-auto rounded-[var(--ssui-radius)] border border-[color:var(--ssui-border)] bg-[color:var(--ssui-surface-muted)] p-3 font-mono text-xs text-[color:var(--ssui-text-muted)]", children: JSON.stringify(entry.metadata, null, 2) }))] })] }, entry.id)))] })] }));
+}

package/dist/components/auth-shell.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+/**
+ * Internal building blocks shared by the Login and RequestAccess auth
+ * surfaces. Not part of the public API.
+ */
+export declare function AuthShell({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function AuthHeader({ description, logo, srOnlyTitleWithLogo, title }: {
+    description?: React.ReactNode;
+    logo?: React.ReactNode;
+    /** When true and a logo is present, the title renders visually hidden so the wordmark carries the branding. */
+    srOnlyTitleWithLogo?: boolean;
+    title: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function AuthFeedback({ children, tone }: {
+    children: React.ReactNode;
+    tone: "error" | "status";
+}): import("react/jsx-runtime").JSX.Element | null;
+/** Footer line pairing prompt copy with a consumer-supplied link element. */
+export declare function AuthLinkLine({ link, prompt }: {
+    link: React.ReactNode;
+    prompt: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function AuthSpinner(): import("react/jsx-runtime").JSX.Element;

package/dist/components/auth-shell.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RefreshCw } from "lucide-react";
+import * as React from "react";
+import { cn } from "../utils/cn.js";
+/**
+ * Internal building blocks shared by the Login and RequestAccess auth
+ * surfaces. Not part of the public API.
+ */
+export function AuthShell({ children }) {
+    return (_jsx("main", { className: "flex min-h-[100dvh] items-center justify-center bg-[color:var(--ssui-bg)] px-4 py-10 text-[color:var(--ssui-text)]", children: _jsx("section", { className: "w-full max-w-sm", children: children }) }));
+}
+export function AuthHeader({ description, logo, srOnlyTitleWithLogo = false, title }) {
+    return (_jsxs("div", { className: "mb-7", children: [logo ? _jsx("div", { className: "mb-4", children: logo }) : null, _jsx("h1", { className: logo && srOnlyTitleWithLogo
+                    ? "sr-only"
+                    : "text-xl font-semibold tracking-normal text-[color:var(--ssui-text)]", children: title }), description ? (_jsx("div", { className: "mt-2 text-sm text-[color:var(--ssui-text-muted)]", children: description })) : null] }));
+}
+export function AuthFeedback({ children, tone }) {
+    if (!children)
+        return null;
+    return (_jsx("p", { className: cn("text-sm", tone === "error"
+            ? "text-[color:var(--ssui-destructive)]"
+            : "text-[color:var(--ssui-text-muted)]"), role: tone === "error" ? "alert" : "status", children: children }));
+}
+/** Footer line pairing prompt copy with a consumer-supplied link element. */
+export function AuthLinkLine({ link, prompt }) {
+    return (_jsxs("p", { className: "text-sm text-[color:var(--ssui-text-muted)]", children: [prompt, " ", link] }));
+}
+export function AuthSpinner() {
+    return _jsx(RefreshCw, { className: "animate-spin" });
+}

package/dist/components/avatar.d.ts

@@ -0,0 +1,31 @@
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { type VariantProps } from "class-variance-authority";
+import * as React from "react";
+declare const avatarVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface AvatarProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> {
+    alt?: string;
+    fallback?: string;
+    /**
+     * Attributes forwarded to the underlying Radix `Avatar.Image` (e.g.
+     * `referrerPolicy`, `crossOrigin`, `loading`). The component still owns
+     * `src`, `alt`, and the image `className`.
+     */
+    imageProps?: Omit<React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>, "src">;
+    name?: string | null;
+    /**
+     * Opt-in seed for a deterministic, brand-neutral initials background drawn
+     * from the `--ssui-avatar-*` palette tokens. Omit for the default muted
+     * surface (no visual change for existing consumers).
+     */
+    seed?: string;
+    /**
+     * A `sm`/`md`/`lg` preset or a custom pixel size. Numeric sizes render at the
+     * requested width/height with proportionally scaled initials.
+     */
+    size?: VariantProps<typeof avatarVariants>["size"] | number;
+    src?: string | null;
+}
+export declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
+export {};

package/dist/components/avatar.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+import { cn } from "../utils/cn.js";
+import { getInitials } from "../utils/initials.js";
+const avatarVariants = cva("relative inline-flex shrink-0 overflow-hidden rounded-full border border-[color:var(--ssui-border)] bg-[color:var(--ssui-surface-muted)]", {
+    variants: {
+        size: {
+            sm: "size-7 text-xs",
+            md: "size-9 text-sm",
+            lg: "size-12 text-base"
+        }
+    },
+    defaultVariants: {
+        size: "md"
+    }
+});
+/**
+ * Number of `--ssui-avatar-<key>-bg` / `--ssui-avatar-<key>-text` palette
+ * entries shipped in styles/index.css. Keys run from 1 to this value.
+ */
+const AVATAR_PALETTE_SIZE = 5;
+/**
+ * Deterministic djb2-style string hash. Pure (no random/time) so a given seed
+ * resolves to the same palette entry across renders and between SSR and client.
+ */
+function hashSeed(seed) {
+    let hash = 5381;
+    for (let index = 0; index < seed.length; index += 1) {
+        hash = (((hash << 5) + hash) + seed.charCodeAt(index)) >>> 0;
+    }
+    return hash;
+}
+function paletteIndexForSeed(seed) {
+    return (hashSeed(seed) % AVATAR_PALETTE_SIZE) + 1;
+}
+export const Avatar = React.forwardRef(({ alt, className, fallback, imageProps, name, seed, size, src, style, ...props }, ref) => {
+    const isNumericSize = typeof size === "number";
+    const numericStyle = isNumericSize
+        ? {
+            width: size,
+            height: size,
+            fontSize: Math.max(10, Math.round(size * 0.42))
+        }
+        : undefined;
+    const paletteIndex = seed ? paletteIndexForSeed(seed) : undefined;
+    const fallbackStyle = paletteIndex
+        ? {
+            backgroundColor: `var(--ssui-avatar-${paletteIndex}-bg)`,
+            color: `var(--ssui-avatar-${paletteIndex}-text)`
+        }
+        : undefined;
+    return (_jsxs(AvatarPrimitive.Root, { ref: ref, className: cn(avatarVariants({ size: isNumericSize ? null : size, className })), style: { ...numericStyle, ...style }, ...props, children: [src ? (_jsx(AvatarPrimitive.Image, { ...imageProps, alt: alt ?? name ?? "", className: "aspect-square size-full object-cover", src: src })) : null, _jsx(AvatarPrimitive.Fallback, { className: "flex size-full items-center justify-center bg-[color:var(--ssui-surface-muted)] font-medium text-[color:var(--ssui-text-muted)]", delayMs: 80, style: fallbackStyle, children: fallback ?? getInitials(name) })] }));
+});
+Avatar.displayName = "Avatar";

package/dist/components/badge.d.ts

@@ -0,0 +1,9 @@
+import { type VariantProps } from "class-variance-authority";
+import * as React from "react";
+export declare const badgeVariants: (props?: ({
+    variant?: "neutral" | "primary" | "info" | "success" | "warning" | "danger" | "outline" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
+}
+export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const Pill: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/badge.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+import { cn } from "../utils/cn.js";
+export const badgeVariants = cva("inline-flex items-center gap-1 rounded-full border px-2.5 py-0.5 text-xs font-medium", {
+    variants: {
+        variant: {
+            neutral: "border-transparent bg-[color:var(--ssui-status-neutral-bg)] text-[color:var(--ssui-status-neutral-text)]",
+            primary: "border-transparent bg-[color:var(--ssui-primary)] text-[color:var(--ssui-primary-foreground)]",
+            info: "border-transparent bg-[color:var(--ssui-status-info-bg)] text-[color:var(--ssui-status-info-text)]",
+            success: "border-transparent bg-[color:var(--ssui-status-success-bg)] text-[color:var(--ssui-status-success-text)]",
+            warning: "border-transparent bg-[color:var(--ssui-status-warning-bg)] text-[color:var(--ssui-status-warning-text)]",
+            danger: "border-transparent bg-[color:var(--ssui-status-danger-bg)] text-[color:var(--ssui-status-danger-text)]",
+            outline: "border-[color:var(--ssui-border)] bg-transparent text-[color:var(--ssui-text)]"
+        }
+    },
+    defaultVariants: {
+        variant: "neutral"
+    }
+});
+export const Badge = React.forwardRef(({ className, variant, ...props }, ref) => (_jsx("span", { ref: ref, className: cn(badgeVariants({ variant, className })), ...props })));
+Badge.displayName = "Badge";
+export const Pill = Badge;

package/dist/components/brand-icons.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+export interface BrandIconProps extends React.SVGProps<SVGSVGElement> {
+}
+/** Official multi-color Google "G" mark (Google identity branding guidelines). */
+export declare function GoogleIcon(props: BrandIconProps): import("react/jsx-runtime").JSX.Element;
+/** Official four-square Microsoft mark (Microsoft identity brand kit). */
+export declare function MicrosoftIcon(props: BrandIconProps): import("react/jsx-runtime").JSX.Element;
+/** GitHub invertocat mark; inherits the surrounding text color. */
+export declare function GitHubIcon(props: BrandIconProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Brand icons keyed by the provider ids `Login` understands. Unknown ids get
+ * no icon (label-only button).
+ */
+export declare const brandIconsByProviderId: Record<string, React.ComponentType<BrandIconProps>>;

package/dist/components/brand-icons.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+/** Official multi-color Google "G" mark (Google identity branding guidelines). */
+export function GoogleIcon(props) {
+    return (_jsxs("svg", { "aria-hidden": "true", focusable: "false", height: 24, viewBox: "0 0 24 24", width: 24, ...props, children: [_jsx("path", { d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.27-4.74 3.27-8.1z", fill: "#4285F4" }), _jsx("path", { d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z", fill: "#34A853" }), _jsx("path", { d: "M5.84 14.1c-.22-.66-.35-1.36-.35-2.1s.13-1.44.35-2.1V7.06H2.18A10.97 10.97 0 0 0 1 12c0 1.77.43 3.45 1.18 4.94l3.66-2.84z", fill: "#FBBC05" }), _jsx("path", { d: "M12 5.38c1.62 0 3.06.55 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.06l3.66 2.84c.87-2.6 3.3-4.52 6.16-4.52z", fill: "#EA4335" })] }));
+}
+/** Official four-square Microsoft mark (Microsoft identity brand kit). */
+export function MicrosoftIcon(props) {
+    return (_jsxs("svg", { "aria-hidden": "true", focusable: "false", height: 24, viewBox: "0 0 21 21", width: 24, ...props, children: [_jsx("rect", { fill: "#F25022", height: "9", width: "9", x: "1", y: "1" }), _jsx("rect", { fill: "#7FBA00", height: "9", width: "9", x: "11", y: "1" }), _jsx("rect", { fill: "#00A4EF", height: "9", width: "9", x: "1", y: "11" }), _jsx("rect", { fill: "#FFB900", height: "9", width: "9", x: "11", y: "11" })] }));
+}
+/** GitHub invertocat mark; inherits the surrounding text color. */
+export function GitHubIcon(props) {
+    return (_jsx("svg", { "aria-hidden": "true", fill: "currentColor", focusable: "false", height: 24, viewBox: "0 0 16 16", width: 24, ...props, children: _jsx("path", { d: "M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z" }) }));
+}
+/**
+ * Brand icons keyed by the provider ids `Login` understands. Unknown ids get
+ * no icon (label-only button).
+ */
+export const brandIconsByProviderId = {
+    github: GitHubIcon,
+    google: GoogleIcon,
+    microsoft: MicrosoftIcon
+};

package/dist/components/button.d.ts

@@ -0,0 +1,16 @@
+import { type VariantProps } from "class-variance-authority";
+import * as React from "react";
+export declare const buttonVariants: (props?: ({
+    variant?: "link" | "primary" | "outline" | "secondary" | "ghost" | "ghost-accent" | "destructive" | null | undefined;
+    size?: "icon" | "sm" | "md" | "lg" | "icon-sm" | "icon-lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export interface IconButtonProps extends Omit<ButtonProps, "aria-label" | "children" | "size"> {
+    children: React.ReactNode;
+    label: string;
+    size?: Extract<ButtonProps["size"], "icon" | "icon-sm" | "icon-lg">;
+}
+export declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/button.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+import { cn } from "../utils/cn.js";
+export const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[var(--ssui-radius)] text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--ssui-focus-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--ssui-bg)] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", {
+    variants: {
+        variant: {
+            primary: "bg-[color:var(--ssui-primary)] text-[color:var(--ssui-primary-foreground)] hover:bg-[color:var(--ssui-primary-hover)]",
+            secondary: "border border-[color:var(--ssui-border)] bg-[color:var(--ssui-surface)] text-[color:var(--ssui-text)] hover:bg-[color:var(--ssui-surface-muted)]",
+            outline: "border border-[color:var(--ssui-border)] bg-transparent text-[color:var(--ssui-text)] hover:bg-[color:var(--ssui-surface-muted)]",
+            ghost: "bg-transparent text-[color:var(--ssui-text)] hover:bg-[color:var(--ssui-surface-muted)]",
+            "ghost-accent": "bg-transparent text-[color:var(--ssui-text)] hover:bg-[color:var(--ssui-accent-subtle)] hover:text-[color:var(--ssui-accent-subtle-foreground)]",
+            destructive: "bg-[color:var(--ssui-destructive)] text-[color:var(--ssui-destructive-foreground)] hover:bg-[color:var(--ssui-destructive-hover)]",
+            link: "h-auto rounded-none p-0 text-[color:var(--ssui-primary)] underline-offset-4 hover:underline"
+        },
+        size: {
+            sm: "h-8 px-3 text-xs",
+            md: "h-10 px-4 py-2",
+            lg: "h-11 px-5 text-base",
+            icon: "size-10 p-0",
+            "icon-sm": "size-8 p-0",
+            "icon-lg": "size-11 p-0"
+        }
+    },
+    defaultVariants: {
+        variant: "primary",
+        size: "md"
+    }
+});
+export const Button = React.forwardRef(({ asChild = false, className, size, variant, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (_jsx(Comp, { ref: ref, className: cn(buttonVariants({ variant, size, className })), ...props }));
+});
+Button.displayName = "Button";
+export const IconButton = React.forwardRef(({ children, label, size = "icon", title, ...props }, ref) => (_jsx(Button, { ref: ref, "aria-label": label, size: size, title: title ?? label, ...props, children: children })));
+IconButton.displayName = "IconButton";

package/dist/components/confirm-dialog.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+export interface ConfirmDialogProps {
+    cancelLabel?: React.ReactNode;
+    children?: React.ReactNode;
+    confirmLabel?: React.ReactNode;
+    /** Label shown on the confirm button while `onConfirm` is in flight. */
+    confirmingLabel?: React.ReactNode;
+    defaultOpen?: boolean;
+    description?: React.ReactNode;
+    onConfirm: () => void | Promise<void>;
+    onConfirmError?: (error: unknown) => void;
+    onOpenChange?: (open: boolean) => void;
+    open?: boolean;
+    title: React.ReactNode;
+    trigger?: React.ReactNode;
+    variant?: "default" | "danger";
+}
+export declare function ConfirmDialog({ cancelLabel, children, confirmLabel, confirmingLabel, defaultOpen, description, onConfirm, onConfirmError, onOpenChange, open, title, trigger, variant }: ConfirmDialogProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/confirm-dialog.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Button } from "./button.js";
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./dialog.js";
+export function ConfirmDialog({ cancelLabel = "Cancel", children, confirmLabel = "Confirm", confirmingLabel, defaultOpen, description, onConfirm, onConfirmError, onOpenChange, open, title, trigger, variant = "default" }) {
+    const isOpenControlled = open !== undefined;
+    const [internalOpen, setInternalOpen] = React.useState(defaultOpen ?? false);
+    const [isConfirming, setIsConfirming] = React.useState(false);
+    const dialogOpen = isOpenControlled ? open : internalOpen;
+    const setDialogOpen = React.useCallback((nextOpen) => {
+        if (!isOpenControlled) {
+            setInternalOpen(nextOpen);
+        }
+        onOpenChange?.(nextOpen);
+    }, [isOpenControlled, onOpenChange]);
+    const handleOpenChange = React.useCallback((nextOpen) => {
+        if (isConfirming && !nextOpen)
+            return;
+        setDialogOpen(nextOpen);
+    }, [isConfirming, setDialogOpen]);
+    const handleConfirm = React.useCallback(async () => {
+        if (isConfirming)
+            return;
+        setIsConfirming(true);
+        try {
+            await onConfirm();
+            setDialogOpen(false);
+        }
+        catch (error) {
+            onConfirmError?.(error);
+        }
+        finally {
+            setIsConfirming(false);
+        }
+    }, [isConfirming, onConfirm, onConfirmError, setDialogOpen]);
+    return (_jsxs(Dialog, { onOpenChange: handleOpenChange, open: dialogOpen, children: [trigger ? _jsx(DialogTrigger, { asChild: true, children: trigger }) : null, _jsxs(DialogContent, { showClose: !isConfirming, children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: title }), description ? (_jsx(DialogDescription, { children: description })) : null] }), children, _jsxs(DialogFooter, { children: [_jsx(DialogClose, { asChild: true, children: _jsx(Button, { disabled: isConfirming, type: "button", variant: "secondary", children: cancelLabel }) }), _jsx(Button, { "aria-busy": isConfirming, disabled: isConfirming, type: "button", variant: variant === "danger" ? "destructive" : "primary", onClick: () => {
+                                    void handleConfirm();
+                                }, children: isConfirming ? confirmingLabel ?? confirmLabel : confirmLabel })] })] })] }));
+}

package/dist/components/copy-field.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+export interface CopyFieldProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onCopy" | "children"> {
+    /** Value shown read-only and written to the clipboard. */
+    value: string;
+    /** Accessible label for the value and copy control (e.g. "Connector URL"). */
+    label?: string;
+    /** Copy button text. */
+    copyLabel?: string;
+    /** Copy button text while the copied-state feedback is shown. */
+    copiedLabel?: string;
+    /** Render the value in a monospace face. Defaults to true. */
+    monospace?: boolean;
+    /** Milliseconds the copied-state feedback persists. Defaults to 2000. */
+    resetAfterMs?: number;
+    /** Invoked after a successful copy with the copied value. */
+    onCopy?: (value: string) => void;
+}
+/**
+ * Read-only value paired with a copy button that shows transient copied-state
+ * feedback. Used for connector URLs, token secrets, and similar copyable values.
+ */
+export declare function CopyField({ value, label, copyLabel, copiedLabel, monospace, resetAfterMs, onCopy, className, ...props }: CopyFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/copy-field.js

@@ -0,0 +1,53 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, Copy } from "lucide-react";
+import * as React from "react";
+import { cn } from "../utils/cn.js";
+import { Button } from "./button.js";
+async function writeToClipboard(value) {
+    try {
+        if (!navigator.clipboard?.writeText)
+            throw new Error("Clipboard API is unavailable");
+        await navigator.clipboard.writeText(value);
+        return true;
+    }
+    catch {
+        const textarea = document.createElement("textarea");
+        textarea.value = value;
+        textarea.setAttribute("readonly", "");
+        textarea.style.position = "fixed";
+        textarea.style.left = "-9999px";
+        document.body.appendChild(textarea);
+        textarea.select();
+        let copied = false;
+        try {
+            copied = document.execCommand("copy");
+        }
+        catch {
+            copied = false;
+        }
+        document.body.removeChild(textarea);
+        return copied;
+    }
+}
+/**
+ * Read-only value paired with a copy button that shows transient copied-state
+ * feedback. Used for connector URLs, token secrets, and similar copyable values.
+ */
+export function CopyField({ value, label = "Value", copyLabel = "Copy", copiedLabel = "Copied", monospace = true, resetAfterMs = 2000, onCopy, className, ...props }) {
+    const [copied, setCopied] = React.useState(false);
+    React.useEffect(() => {
+        if (!copied)
+            return;
+        const timer = window.setTimeout(() => setCopied(false), resetAfterMs);
+        return () => window.clearTimeout(timer);
+    }, [copied, resetAfterMs]);
+    async function handleCopy() {
+        const ok = await writeToClipboard(value);
+        if (ok) {
+            setCopied(true);
+            onCopy?.(value);
+        }
+    }
+    return (_jsxs("div", { className: cn("flex items-stretch gap-2", className), ...props, children: [_jsx("div", { "aria-label": label, className: cn("min-w-0 flex-1 self-center break-all rounded-[var(--ssui-radius)] border border-[color:var(--ssui-border)] bg-[color:var(--ssui-surface-muted)] px-3 py-2 text-xs text-[color:var(--ssui-text-muted)]", monospace && "font-mono"), role: "textbox", "aria-readonly": "true", tabIndex: 0, children: value }), _jsxs(Button, { "aria-label": copied ? `${label} copied` : `Copy ${label.toLowerCase()}`, onClick: () => void handleCopy(), type: "button", variant: "secondary", children: [copied ? _jsx(Check, { "aria-hidden": "true" }) : _jsx(Copy, { "aria-hidden": "true" }), copied ? copiedLabel : copyLabel] })] }));
+}

package/dist/components/dialog.d.ts

@@ -0,0 +1,14 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import * as React from "react";
+export declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
+export declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
+export declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    showClose?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare function DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export declare function DialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+export declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;