@bizbasics/ui 0.1.0

package/src/components/PlatformNav.tsx

@@ -0,0 +1,347 @@
+"use client";
+
+import { useRef, useState } from "react";
+import type { CSSProperties } from "react";
+
+export interface PlatformNavApp {
+  id: string;
+  name: string;
+  frontendUrl: string;
+  iconUrl?: string | null;
+  color?: string;
+}
+
+export interface PlatformNavUser {
+  name: string;
+  email: string;
+  avatarUrl?: string | null;
+}
+
+export interface PlatformNavProps {
+  /** Current app identifier (highlighted in app switcher) */
+  currentApp: string;
+  /** Org display name */
+  orgName: string;
+  /** Authenticated user */
+  user: PlatformNavUser;
+  /** Apps the org is entitled to */
+  apps: PlatformNavApp[];
+  /**
+   * Called when user clicks a different app.
+   * Implementation should mint an SSO token and redirect the user.
+   * Defaults to: window.open(`${app.frontendUrl}/auth/sso?token=<token>`)
+   */
+  onSwitchApp?: (app: PlatformNavApp) => void;
+  /** Called when user clicks the profile/avatar area */
+  onOpenProfile?: () => void;
+  /** Portal URL — used for "Back to dashboard" link */
+  portalUrl?: string;
+}
+
+export function PlatformNav({
+  currentApp,
+  orgName,
+  user,
+  apps,
+  onSwitchApp,
+  onOpenProfile,
+  portalUrl = "https://app.bizbasics.ai",
+}: PlatformNavProps) {
+  const [switcherOpen, setSwitcherOpen] = useState(false);
+  const switcherRef = useRef<HTMLDivElement>(null);
+
+  function handleSwitchApp(app: PlatformNavApp) {
+    setSwitcherOpen(false);
+    if (app.id === currentApp) return;
+    if (onSwitchApp) {
+      onSwitchApp(app);
+    } else {
+      window.open(app.frontendUrl, "_blank");
+    }
+  }
+
+  return (
+    <nav style={navStyle}>
+      {/* Left: app switcher */}
+      <div style={leftStyle}>
+        <a href={portalUrl} style={logoLinkStyle} title="Back to dashboard">
+          <span style={logoDotStyle} />
+          <span style={logoTextStyle}>bizbasics</span>
+        </a>
+
+        <div style={dividerStyle} />
+
+        <div ref={switcherRef} style={{ position: "relative" }}>
+          <button
+            style={switcherBtnStyle}
+            onClick={() => setSwitcherOpen((v) => !v)}
+            aria-haspopup="listbox"
+            aria-expanded={switcherOpen}
+          >
+            <span style={currentAppLabelStyle}>
+              {apps.find((a) => a.id === currentApp)?.name ?? currentApp}
+            </span>
+            <ChevronDown />
+          </button>
+
+          {switcherOpen && (
+            <>
+              <div style={overlayStyle} onClick={() => setSwitcherOpen(false)} />
+              <div style={dropdownStyle} role="listbox">
+                {apps.map((app) => (
+                  <button
+                    key={app.id}
+                    role="option"
+                    aria-selected={app.id === currentApp}
+                    style={appItemStyle(app.id === currentApp)}
+                    onClick={() => handleSwitchApp(app)}
+                  >
+                    {app.iconUrl ? (
+                      <img src={app.iconUrl} alt="" style={appIconImgStyle} />
+                    ) : (
+                      <span style={appIconFallbackStyle(app.color)}>{app.name[0]}</span>
+                    )}
+                    <span style={appNameStyle}>{app.name}</span>
+                    {app.id === currentApp && <CheckIcon />}
+                  </button>
+                ))}
+                <div style={switcherFooterStyle}>
+                  <a href={portalUrl} style={dashboardLinkStyle}>
+                    Go to dashboard →
+                  </a>
+                </div>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+
+      {/* Right: org name + avatar */}
+      <div style={rightStyle}>
+        <span style={orgNameStyle}>{orgName}</span>
+        <button
+          style={avatarBtnStyle}
+          onClick={onOpenProfile}
+          title={`${user.name} (${user.email})`}
+          aria-label="Open profile"
+        >
+          {user.avatarUrl ? (
+            <img src={user.avatarUrl} alt={user.name} style={avatarImgStyle} />
+          ) : (
+            <span style={avatarFallbackStyle}>
+              {user.name[0]?.toUpperCase() ?? "?"}
+            </span>
+          )}
+        </button>
+      </div>
+    </nav>
+  );
+}
+
+// ── Icons ─────────────────────────────────────────────────────────────────────
+
+function ChevronDown() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" style={{ marginLeft: "4px", opacity: 0.6 }}>
+      <path d="M2 4l4 4 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+function CheckIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" style={{ marginLeft: "auto", color: "var(--bb-brand, #6366f1)" }}>
+      <path d="M2 7l3.5 3.5 6.5-7" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+// ── Styles ────────────────────────────────────────────────────────────────────
+
+const navStyle: CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  height: "44px",
+  padding: "0 16px",
+  background: "#1e1e2e",
+  borderBottom: "1px solid rgba(255,255,255,0.08)",
+  flexShrink: 0,
+  fontFamily: "inherit",
+};
+
+const leftStyle: CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  gap: "0",
+};
+
+const rightStyle: CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  gap: "12px",
+};
+
+const logoLinkStyle: CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  gap: "6px",
+  textDecoration: "none",
+  marginRight: "12px",
+};
+
+const logoDotStyle: CSSProperties = {
+  width: "8px",
+  height: "8px",
+  borderRadius: "50%",
+  background: "#6366f1",
+};
+
+const logoTextStyle: CSSProperties = {
+  fontSize: "13px",
+  fontWeight: 600,
+  color: "rgba(255,255,255,0.9)",
+  letterSpacing: "-0.01em",
+};
+
+const dividerStyle: CSSProperties = {
+  width: "1px",
+  height: "18px",
+  background: "rgba(255,255,255,0.12)",
+  margin: "0 12px",
+};
+
+const switcherBtnStyle: CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  background: "transparent",
+  border: "none",
+  cursor: "pointer",
+  color: "rgba(255,255,255,0.85)",
+  padding: "4px 8px",
+  borderRadius: "6px",
+  fontSize: "13px",
+  fontWeight: 500,
+  transition: "background 0.15s",
+};
+
+const currentAppLabelStyle: CSSProperties = {
+  fontWeight: 600,
+};
+
+const overlayStyle: CSSProperties = {
+  position: "fixed",
+  inset: 0,
+  zIndex: 100,
+};
+
+const dropdownStyle: CSSProperties = {
+  position: "absolute",
+  top: "calc(100% + 6px)",
+  left: 0,
+  background: "#2a2a3e",
+  border: "1px solid rgba(255,255,255,0.1)",
+  borderRadius: "10px",
+  padding: "6px",
+  minWidth: "200px",
+  boxShadow: "0 8px 24px rgba(0,0,0,0.4)",
+  zIndex: 101,
+};
+
+function appItemStyle(active: boolean): CSSProperties {
+  return {
+    display: "flex",
+    alignItems: "center",
+    gap: "10px",
+    width: "100%",
+    padding: "8px 10px",
+    borderRadius: "6px",
+    background: active ? "rgba(99,102,241,0.15)" : "transparent",
+    border: "none",
+    cursor: "pointer",
+    color: "rgba(255,255,255,0.85)",
+    fontSize: "13px",
+    fontWeight: active ? 600 : 400,
+    textAlign: "left",
+    transition: "background 0.12s",
+  };
+}
+
+const appIconImgStyle: CSSProperties = {
+  width: "20px",
+  height: "20px",
+  borderRadius: "4px",
+  objectFit: "cover",
+  flexShrink: 0,
+};
+
+function appIconFallbackStyle(color?: string): CSSProperties {
+  return {
+    width: "20px",
+    height: "20px",
+    borderRadius: "4px",
+    background: color ?? "#6366f1",
+    color: "#fff",
+    fontSize: "11px",
+    fontWeight: 700,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+  };
+}
+
+const appNameStyle: CSSProperties = {
+  flex: 1,
+};
+
+const switcherFooterStyle: CSSProperties = {
+  borderTop: "1px solid rgba(255,255,255,0.08)",
+  marginTop: "6px",
+  paddingTop: "6px",
+};
+
+const dashboardLinkStyle: CSSProperties = {
+  display: "block",
+  padding: "6px 10px",
+  fontSize: "12px",
+  color: "rgba(255,255,255,0.45)",
+  textDecoration: "none",
+};
+
+const orgNameStyle: CSSProperties = {
+  fontSize: "12px",
+  color: "rgba(255,255,255,0.45)",
+  fontWeight: 500,
+};
+
+const avatarBtnStyle: CSSProperties = {
+  background: "transparent",
+  border: "none",
+  cursor: "pointer",
+  padding: 0,
+  borderRadius: "50%",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+};
+
+const avatarImgStyle: CSSProperties = {
+  width: "28px",
+  height: "28px",
+  borderRadius: "50%",
+  objectFit: "cover",
+};
+
+const avatarFallbackStyle: CSSProperties = {
+  width: "28px",
+  height: "28px",
+  borderRadius: "50%",
+  background: "#6366f1",
+  color: "#fff",
+  fontSize: "12px",
+  fontWeight: 700,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+};

package/src/components/ProfileCallout.tsx

@@ -0,0 +1,184 @@
+"use client";
+
+import { useState, useRef, useEffect, type ReactNode } from "react";
+import type { CSSProperties } from "react";
+import { Avatar } from "./Avatar";
+
+export interface ProfileCalloutUser {
+  id: string;
+  name: string;
+  email: string;
+  role?: string;
+}
+
+interface MenuItem {
+  label: string;
+  icon?: ReactNode;
+  href?: string;
+  onClick?: () => void;
+  danger?: boolean;
+  divider?: boolean;
+}
+
+interface Props {
+  user: ProfileCalloutUser;
+  /** Extra menu items before sign out — e.g. status picker, profile settings */
+  extraItems?: MenuItem[];
+  onSignOut: () => void;
+  settingsHref?: string;
+  /** Slot below avatar row — e.g. StatusPicker for relay */
+  statusSlot?: ReactNode;
+}
+
+const containerStyle: CSSProperties = {
+  padding: "8px",
+  borderTop: "1px solid var(--bb-sidebar-border)",
+};
+
+const profileRowStyle: CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  gap: "10px",
+  padding: "6px 8px",
+  borderRadius: "var(--bb-radius)",
+  cursor: "pointer",
+  userSelect: "none",
+  transition: "background var(--bb-transition)",
+  width: "100%",
+  border: "none",
+  background: "transparent",
+  textAlign: "left",
+};
+
+const menuStyle: CSSProperties = {
+  position: "absolute",
+  bottom: "calc(100% + 6px)",
+  left: "8px",
+  right: "8px",
+  background: "var(--bb-topbar-bg)",
+  border: "1px solid rgba(255,255,255,0.10)",
+  borderRadius: "var(--bb-radius-md)",
+  boxShadow: "var(--bb-shadow-xl)",
+  zIndex: "var(--bb-z-dropdown)" as unknown as number,
+  overflow: "hidden",
+};
+
+export function ProfileCallout({ user, extraItems, onSignOut, settingsHref, statusSlot }: Props) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open]);
+
+  const allItems: MenuItem[] = [
+    ...(settingsHref ? [{ label: "Settings", href: settingsHref }] : []),
+    ...(extraItems ?? []),
+    { divider: true, label: "" },
+    { label: "Sign out", onClick: onSignOut, danger: true },
+  ];
+
+  return (
+    <div style={{ ...containerStyle, position: "relative" }} ref={ref}>
+      {statusSlot}
+
+      <button
+        style={profileRowStyle}
+        onClick={() => setOpen((p) => !p)}
+        onMouseEnter={(e) => { (e.currentTarget).style.background = "var(--bb-sidebar-hover-bg)"; }}
+        onMouseLeave={(e) => { (e.currentTarget).style.background = "transparent"; }}
+      >
+        <Avatar name={user.name} size={30} />
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <div style={{
+            fontSize: "var(--bb-text-sm)",
+            fontWeight: 600,
+            color: "var(--bb-sidebar-text)",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+            lineHeight: 1.3,
+          }}>
+            {user.name}
+          </div>
+          <div style={{
+            fontSize: "var(--bb-text-xs)",
+            color: "var(--bb-sidebar-text-muted)",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+            lineHeight: 1.3,
+          }}>
+            {user.role ? `${user.role} · ` : ""}{user.email}
+          </div>
+        </div>
+        <svg
+          width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--bb-sidebar-text-muted)"
+          strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
+          style={{ flexShrink: 0, transform: open ? "rotate(180deg)" : "none", transition: "transform var(--bb-transition)" }}
+        >
+          <polyline points="6 9 12 15 18 9" />
+        </svg>
+      </button>
+
+      {open && (
+        <div style={menuStyle} role="menu">
+          {/* User header */}
+          <div style={{ padding: "12px 14px", borderBottom: "1px solid rgba(255,255,255,0.07)" }}>
+            <div style={{ fontSize: "var(--bb-text-sm)", fontWeight: 600, color: "#e5e7eb" }}>{user.name}</div>
+            <div style={{ fontSize: "var(--bb-text-xs)", color: "#6b7280", marginTop: "2px" }}>{user.email}</div>
+          </div>
+
+          {/* Menu items */}
+          <div style={{ padding: "4px" }}>
+            {allItems.map((item, i) =>
+              item.divider ? (
+                <div key={i} style={{ height: "1px", background: "rgba(255,255,255,0.07)", margin: "4px 0" }} />
+              ) : item.href ? (
+                <a
+                  key={i}
+                  href={item.href}
+                  style={menuItemStyle(false, item.danger)}
+                  onClick={() => setOpen(false)}
+                >
+                  {item.icon && <span style={{ width: 16, display: "flex" }}>{item.icon}</span>}
+                  {item.label}
+                </a>
+              ) : (
+                <button
+                  key={i}
+                  onClick={() => { item.onClick?.(); setOpen(false); }}
+                  style={{ ...menuItemStyle(false, item.danger), width: "100%", border: "none", textAlign: "left", cursor: "pointer" }}
+                >
+                  {item.icon && <span style={{ width: 16, display: "flex" }}>{item.icon}</span>}
+                  {item.label}
+                </button>
+              )
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function menuItemStyle(active: boolean, danger?: boolean): CSSProperties {
+  return {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    padding: "7px 10px",
+    borderRadius: "var(--bb-radius-sm)",
+    fontSize: "var(--bb-text-sm)",
+    color: danger ? "#f87171" : "#d1d5db",
+    background: active ? "rgba(255,255,255,0.08)" : "transparent",
+    textDecoration: "none",
+    transition: "background var(--bb-transition), color var(--bb-transition)",
+    userSelect: "none",
+  };
+}

package/src/components/SidebarBrand.tsx

@@ -0,0 +1,162 @@
+import type { CSSProperties, ReactNode } from "react";
+
+interface Props {
+  /** Platform name — defaults to "bizbasics" */
+  name?: string;
+  /** App/product name shown below, e.g. "Portal", "Relay", "Monk" */
+  appName?: string;
+  /** Extra content to the right of the name (e.g. org switcher) */
+  right?: ReactNode;
+}
+
+const BB_LOGO = (
+  <svg width="26" height="26" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="40" height="40" rx="9" fill="#0f172a"/>
+    <text x="5" y="29" fontFamily="system-ui,sans-serif" fontWeight="900" fontSize="24" fill="url(#bbg1)">B</text>
+    <text x="16" y="29" fontFamily="system-ui,sans-serif" fontWeight="900" fontSize="24" fill="url(#bbg2)" opacity="0.65">B</text>
+    <circle cx="33" cy="9" r="4" fill="#2563eb"/>
+    <defs>
+      <linearGradient id="bbg1" x1="5" y1="8" x2="22" y2="30" gradientUnits="userSpaceOnUse">
+        <stop stopColor="#2563eb"/><stop offset="1" stopColor="#60a5fa"/>
+      </linearGradient>
+      <linearGradient id="bbg2" x1="16" y1="8" x2="33" y2="30" gradientUnits="userSpaceOnUse">
+        <stop stopColor="#60a5fa"/><stop offset="1" stopColor="#2563eb"/>
+      </linearGradient>
+    </defs>
+  </svg>
+);
+
+const wrapStyle: CSSProperties = {
+  padding: "14px 14px 12px",
+};
+
+const rowStyle: CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+};
+
+const nameRowStyle: CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  gap: "9px",
+};
+
+export function SidebarBrand({ name = "bizbasics", appName, right }: Props) {
+  return (
+    <div style={wrapStyle}>
+      <div style={rowStyle}>
+        <div style={nameRowStyle}>
+          {BB_LOGO}
+          <div>
+            <div style={{
+              fontSize: "var(--bb-text-sm)",
+              fontWeight: 700,
+              color: "#fff",
+              lineHeight: 1.2,
+              letterSpacing: "-0.01em",
+            }}>
+              {name}
+            </div>
+            {appName && (
+              <div style={{
+                fontSize: "var(--bb-text-xs)",
+                color: "var(--bb-sidebar-text-muted)",
+                lineHeight: 1.2,
+                marginTop: "1px",
+              }}>
+                {appName}
+              </div>
+            )}
+          </div>
+        </div>
+        {right}
+      </div>
+    </div>
+  );
+}
+
+/** Org/workspace switcher — used by portal */
+export function OrgSwitcher({
+  current,
+  orgs,
+  onChange,
+  disabled,
+}: {
+  current: string;
+  orgs: Array<{ id: string; name: string; is_sandbox?: boolean }>;
+  onChange: (id: string) => void;
+  disabled?: boolean;
+}) {
+  const orgList = orgs ?? [];
+
+  // Native <option> can't render rich badges, so we suffix the label.
+  // The full amber SandboxBanner in the portal layout is the primary signal;
+  // this is just so the org switcher itself doesn't lie about which is which.
+  const labelFor = (o: { name: string; is_sandbox?: boolean }) =>
+    o.is_sandbox ? `${o.name}  ·  SANDBOX` : o.name;
+
+  if (orgList.length <= 1) {
+    const only = orgList[0];
+    return (
+      <div style={{
+        padding: "0 14px 10px",
+        fontSize: "var(--bb-text-sm)",
+        fontWeight: 600,
+        color: "var(--bb-sidebar-text)",
+        display: "flex",
+        alignItems: "center",
+        gap: 8,
+      }}>
+        <span>{only?.name}</span>
+        {only?.is_sandbox && <SandboxPill />}
+      </div>
+    );
+  }
+
+  const currentOrg = orgList.find((o) => o.id === current);
+
+  return (
+    <div style={{ padding: "0 10px 10px" }}>
+      <select
+        disabled={disabled}
+        value={current}
+        onChange={(e) => onChange(e.target.value)}
+        style={{
+          width: "100%",
+          background: "rgba(255,255,255,0.06)",
+          border: currentOrg?.is_sandbox
+            ? "1px solid #f59e0b"
+            : "1px solid rgba(255,255,255,0.10)",
+          borderRadius: "var(--bb-radius)",
+          padding: "6px 10px",
+          fontSize: "var(--bb-text-sm)",
+          fontWeight: 600,
+          color: "var(--bb-sidebar-text)",
+          cursor: "pointer",
+          outline: "none",
+        }}
+      >
+        {orgs.map((o) => (
+          <option key={o.id} value={o.id}>{labelFor(o)}</option>
+        ))}
+      </select>
+    </div>
+  );
+}
+
+function SandboxPill() {
+  return (
+    <span style={{
+      fontSize: 9,
+      fontWeight: 700,
+      letterSpacing: 0.5,
+      color: "#fff",
+      background: "#f59e0b",
+      padding: "1px 5px",
+      borderRadius: 3,
+    }}>
+      SANDBOX
+    </span>
+  );
+}