@arbidocs/blocks 0.4.142 → 0.4.143

package/dist/{chunk-ON3TKY5Y.js → chunk-5YHEHEJT.js}

@@ -1,11 +1,12 @@
 "use client";
 import { PasswordStrengthInput } from './chunk-VILAPTCB.js';
+import { TabHeader } from './chunk-4WWM3GQ5.js';
 import { testIdOr, prefixedTestId } from './chunk-7F6CBP3Z.js';
 import { ModalScaffold, useRestoreFocus } from './chunk-TX2ZICS7.js';
 import { formatCount } from './chunk-OXF2IFXG.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useMemo, useRef, useId, useState } from 'react';
-import { Loader2, Camera, ChevronRight, ChevronDown, Check, Pencil, Mail, ShieldCheck, ExternalLink, CheckCircle2, AlertCircle, Radio, AlertTriangle, LogOut } from 'lucide-react';
+import { Loader2, Camera, ChevronRight, ChevronDown, Check, Pencil, Mail, ShieldCheck, ExternalLink, CheckCircle2, AlertCircle, Radio, AlertTriangle, LogOut, RefreshCw, Wifi, WifiOff, Crown } from 'lucide-react';
 import { Avatar, AvatarImage, AvatarFallback, cn, Input, Button, VerifiedBadge, Tooltip, TooltipTrigger, TooltipContent, Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, Collapsible, CollapsibleTrigger, CollapsibleContent, Switch, Checkbox, Badge } from '@arbidocs/react/ui';
 
 var INTERACTIVE_SELECTOR = 'button, input, select, a, [role="tab"], [role="radio"]';
@@ -1423,7 +1424,244 @@ var EMAIL_NOTIFICATION_KEYS = EMAIL_NOTIFICATION_CATEGORIES.map(
 function toNotificationCategories(checked, defs = EMAIL_NOTIFICATION_CATEGORIES) {
   return defs.map((def) => ({ ...def, checked: checked[def.key] ?? true }));
 }
+function PanelFrame({ testId, className, children }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "panel-frame",
+      "data-testid": testId,
+      className: cn("flex h-full min-h-0 flex-col bg-background", className),
+      children
+    }
+  );
+}
+function PanelFrameBody({ className, children }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "panel-frame-body", className: cn("min-h-0 flex-1 overflow-hidden", className), children });
+}
+function PanelScroll({ variant = "flush", className, children }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "panel-scroll",
+      className: cn("h-full overflow-auto", variant === "padded" && "space-y-4 p-3", className),
+      children
+    }
+  );
+}
+function PanelActionsRow({
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "panel-actions-row", className: cn("flex justify-end", className), children });
+}
+function PanelAddButton({
+  label,
+  onClick,
+  isCompact,
+  icon,
+  testId,
+  disabledReason
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      disabled: !!disabledReason,
+      title: disabledReason ?? label,
+      "data-slot": "panel-add-button",
+      "data-testid": testId,
+      className: "flex h-8 items-center gap-1.5 rounded-md px-2 text-sm font-medium text-primary transition-colors hover:bg-primary/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent pointer-coarse:h-11 pointer-coarse:min-w-11",
+      children: [
+        icon,
+        isCompact ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: label }) : /* @__PURE__ */ jsx("span", { children: "New" })
+      ]
+    }
+  );
+}
+function PanelTitleBar({
+  icon,
+  title,
+  end
+}) {
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "panel-title-bar", className: "flex w-full items-center justify-between px-4 py-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      icon,
+      /* @__PURE__ */ jsx("span", { className: "font-medium", children: title })
+    ] }),
+    end
+  ] });
+}
+function PanelNote({ children }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "panel-note", className: "py-8 text-center text-muted-foreground", children });
+}
+function resolveSettingsSection(sections, id) {
+  return sections.find((section) => section.id === id) ?? sections[0];
+}
+function SettingsPage({
+  sections,
+  activeSectionId,
+  onSectionChange,
+  title = "Settings",
+  headerActions,
+  children,
+  testId = "settings-page"
+}) {
+  const active = resolveSettingsSection(sections, activeSectionId);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(PanelFrame, { testId, children: [
+      /* @__PURE__ */ jsx(DraggableHeader, { children: /* @__PURE__ */ jsx(
+        TabHeader,
+        {
+          tabs: sections.map(({ id, label, icon }) => ({ id, label, icon })),
+          activeTabId: active?.id ?? "",
+          onTabChange: onSectionChange,
+          variant: "underline",
+          compactBreakpoint: 0,
+          rightContent: () => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            active?.actions,
+            headerActions
+          ] })
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(PanelFrameBody, { className: "overflow-auto px-6 pb-6 pt-4", children: [
+        /* @__PURE__ */ jsx("h1", { className: "mx-auto mb-4 w-full max-w-2xl text-xl font-semibold text-foreground", children: title }),
+        active?.render()
+      ] })
+    ] }),
+    children
+  ] });
+}
+var DOT = {
+  connected: "bg-green-solid",
+  connecting: "bg-yellow-solid",
+  disconnected: "bg-red-solid",
+  offline: "bg-yellow-solid"
+};
+function ServerConnectionButton({
+  state,
+  label,
+  isRefreshing,
+  onRefresh,
+  testId = "refresh-session-button"
+}) {
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      type: "button",
+      variant: "outline",
+      size: "sm",
+      onClick: onRefresh,
+      disabled: isRefreshing,
+      className: "flex items-center gap-2",
+      "data-testid": testId,
+      "data-state": state,
+      children: [
+        /* @__PURE__ */ jsx(RefreshCw, { className: cn("size-4", isRefreshing && "animate-spin") }),
+        /* @__PURE__ */ jsx("span", { className: cn("size-2 rounded-full", DOT[state]), "aria-hidden": true }),
+        label
+      ]
+    }
+  );
+}
+var DEFAULT_WORK_OFFLINE_LABELS = {
+  goOnline: "Go online",
+  workOffline: "Work offline",
+  goOnlineHint: "Reconnect and use ARBI online again",
+  workOfflineHint: "Work offline \u2014 read cached docs and queue edits, even though the server is reachable"
+};
+function WorkOfflineToggle({
+  isOffline,
+  onToggle,
+  labels,
+  testId = "work-offline-toggle"
+}) {
+  const l = { ...DEFAULT_WORK_OFFLINE_LABELS, ...labels };
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: isOffline ? "secondary" : "outline",
+        size: "icon",
+        onClick: () => onToggle(!isOffline),
+        "aria-label": isOffline ? l.goOnline : l.workOffline,
+        "aria-pressed": isOffline,
+        "data-testid": testId,
+        children: isOffline ? /* @__PURE__ */ jsx(Wifi, { className: "size-4" }) : /* @__PURE__ */ jsx(WifiOff, { className: "size-4" })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: isOffline ? l.goOnlineHint : l.workOfflineHint }) })
+  ] });
+}
+function serverConnectionView({ status, forcedOffline = false, deviceOffline = false }, domain) {
+  const state = forcedOffline || deviceOffline ? "offline" : status === "error" ? "disconnected" : status;
+  const label = forcedOffline ? "Working offline" : deviceOffline ? "Offline" : status === "connected" ? "Connected" : status === "connecting" ? "Connecting" : "Disconnected";
+  const description = deviceOffline && !forcedOffline ? "You're offline. ARBI reconnects by itself when your connection returns." : `${status === "connected" ? `Connected to ${domain}.` : status === "connecting" ? `Connecting to ${domain}...` : `Disconnected from ${domain}.`} Click to refresh your session.`;
+  return { state, label, description };
+}
+var GRID_ACCENT_CLASSES = [
+  "[&_.ag-checkbox-input-wrapper.ag-checked]:!bg-primary",
+  "[&_.ag-checkbox-input-wrapper.ag-checked]:!border-primary",
+  "[&_.ag-checkbox-input-wrapper.ag-checked]:!text-primary-foreground"
+];
+var GRID_ACCENT_VARS = {
+  "--ag-checkbox-checked-color": "hsl(var(--primary))",
+  "--ag-selected-row-background-color": "hsl(var(--accent))"
+};
+function PremiumModelsFrame({
+  enabled,
+  onEnabledChange,
+  title = "Enable Premium Models",
+  description = "Third party AI models are priced on a pass-through basis.",
+  children,
+  toggleTestId
+}) {
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "premium-models-frame", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx(
+        Switch,
+        {
+          id: "premiumModelToggle",
+          checked: enabled,
+          onCheckedChange: onEnabledChange,
+          "data-testid": testIdOr(toggleTestId, { testId: "toggle-premium-model" })
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "label",
+        {
+          className: "flex cursor-pointer items-center gap-2 text-sm font-medium",
+          htmlFor: "premiumModelToggle",
+          children: [
+            /* @__PURE__ */ jsx(Crown, { className: "size-4 text-muted-foreground" }),
+            title
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm text-muted-foreground", children: description }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "transition-opacity",
+          !enabled && "pointer-events-none opacity-50",
+          GRID_ACCENT_CLASSES
+        ),
+        style: GRID_ACCENT_VARS,
+        "aria-disabled": !enabled,
+        children
+      }
+    )
+  ] });
+}
+function ModelProviderLabel({ logo, children }) {
+  return /* @__PURE__ */ jsxs("span", { "data-slot": "model-provider", className: "flex items-center gap-1.5", children: [
+    logo,
+    children
+  ] });
+}
 
-export { ActiveSessionsDialog, AvatarPicker, DEFAULT_ACTIVE_SESSIONS_DIALOG_LABELS, DEFAULT_AVATAR_PICKER_LABELS, DEFAULT_DELETE_ACCOUNT_DIALOG_LABELS, DEFAULT_IDENTITY_VERIFICATION_LABELS, DEFAULT_LOGOUT_DIALOG_LABELS, DEFAULT_PASSWORD_CHANGE_DIALOG_LABELS, DEFAULT_PROFILE_CARD_LABELS, DEFAULT_SETTINGS_DANGER_ZONE_LABELS, DeleteAccountDialog, DraggableHeader, EMAIL_NOTIFICATION_CATEGORIES, EMAIL_NOTIFICATION_KEYS, IdentityVerificationCard, IdentityVerificationDialog, LogoutDialog, NotificationCategoryList, PasswordChangeDialog, ProfileCard, RequireVerified, SettingsActionRow, SettingsCard, SettingsDangerZone, SettingsPanel, SettingsRow, SettingsSection, SettingsSwitchGroup, SettingsSwitchRow, formatSessionTtl, toActiveSessionViews, toDeleteBlockerViews, toLogoutSessionViews, toNotificationCategories };
-//# sourceMappingURL=chunk-ON3TKY5Y.js.map
-//# sourceMappingURL=chunk-ON3TKY5Y.js.map
+export { ActiveSessionsDialog, AvatarPicker, DEFAULT_ACTIVE_SESSIONS_DIALOG_LABELS, DEFAULT_AVATAR_PICKER_LABELS, DEFAULT_DELETE_ACCOUNT_DIALOG_LABELS, DEFAULT_IDENTITY_VERIFICATION_LABELS, DEFAULT_LOGOUT_DIALOG_LABELS, DEFAULT_PASSWORD_CHANGE_DIALOG_LABELS, DEFAULT_PROFILE_CARD_LABELS, DEFAULT_SETTINGS_DANGER_ZONE_LABELS, DEFAULT_WORK_OFFLINE_LABELS, DeleteAccountDialog, DraggableHeader, EMAIL_NOTIFICATION_CATEGORIES, EMAIL_NOTIFICATION_KEYS, IdentityVerificationCard, IdentityVerificationDialog, LogoutDialog, ModelProviderLabel, NotificationCategoryList, PanelActionsRow, PanelAddButton, PanelFrame, PanelFrameBody, PanelNote, PanelScroll, PanelTitleBar, PasswordChangeDialog, PremiumModelsFrame, ProfileCard, RequireVerified, ServerConnectionButton, SettingsActionRow, SettingsCard, SettingsDangerZone, SettingsPage, SettingsPanel, SettingsRow, SettingsSection, SettingsSwitchGroup, SettingsSwitchRow, WorkOfflineToggle, formatSessionTtl, resolveSettingsSection, serverConnectionView, toActiveSessionViews, toDeleteBlockerViews, toLogoutSessionViews, toNotificationCategories };
+//# sourceMappingURL=chunk-5YHEHEJT.js.map
+//# sourceMappingURL=chunk-5YHEHEJT.js.map