npm - @retinalabsllc/zairusjs - Versions diffs - 0.2.5 → 0.2.6 - Mend

@retinalabsllc/zairusjs 0.2.5 → 0.2.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/index.d.mts CHANGED Viewed

@@ -747,4 +747,66 @@ interface UniversalOverviewPageProps {
 }
 declare const UniversalOverviewPage: React.FC<UniversalOverviewPageProps>;
-export { AITranscriptionFeature, type AITranscriptionFeatureProps, type AgentFilePayload, type AgentStat, AppBento2, type AppBento2Props, type BentoFeature, type BoardMember, type CompanyDetails, type DashboardList, type DashboardListItem, type DashboardStat, type DocumentSectionData, type EmailContact, Faq, type FaqItem, type FaqProps, FeatureScroll, type FeatureScrollProps, Footer, type FooterColumn, type FooterLink, type FooterProps, GifFeatureCard, type GifFeatureCardProps, Header, type HeaderLink, type HeaderProps, HeroSection, type HeroSectionProps, ManagedBoardBlock, type ManagedBoardBlockProps, ManagedContactBlock, type ManagedContactBlockProps, ManagedDocument, type ManagedDocumentProps, ManagedNewsletterSplitBlock, type ManagedNewsletterSplitBlockProps, ManagedNotFoundBlock, type ManagedNotFoundBlockProps, ManagedPricingBlock, type ManagedPricingBlockProps, ManagedProjectsBlock, type ManagedProjectsBlockProps, ManagedToaster, type NavItem, NumberInput, type NumberInputProps, type OverviewAlert, type OverviewStat, PageSpinner, type PageSpinnerProps, type PlatformFeatureItem, PlatformFeatures, type PlatformFeaturesProps, PortfolioHero, type PortfolioHeroProps, type PricingFeature, type PricingPlan, ProductHero, type ProductHeroProps, type ProjectItem, type ScrollFeature, type SocialContact, type SocialLink, TextInput, type TextInputProps, type ThemeColorOption, ThreeDActionButton, type ThreeDActionButtonProps, ThreeDButton, type ThreeDButtonProps, UniversalAgentConsole, type UniversalAgentConsoleProps, UniversalBillingPage, type UniversalBillingPageProps, UniversalDashboardPage, type UniversalDashboardPageProps, UniversalHeader, type UniversalHeaderProps, UniversalIdentityPage, type UniversalIdentityPageProps, type UniversalInvoice, type UniversalMember, UniversalMembersPage, type UniversalMembersPageProps, UniversalOrganizationPage, type UniversalOrganizationPageProps, UniversalOverviewPage, type UniversalOverviewPageProps, UniversalProfileSettings, type UniversalProfileSettingsProps, UniversalSidebar, type UniversalSidebarProps, type WorkspaceItem, ZairusAuth, type ZairusAuthProps };
+interface UniversalErrorViewProps {
+    isBooting: boolean;
+    isLoading: boolean;
+    activeData: any;
+    activeError: any;
+    /** The dynamic name of the environment failing to load (e.g., "application", "workspace") */
+    envName: string;
+    /** Function to execute when the user clicks "Refresh" */
+    onRetry: () => void;
+    /** URL to fallback to on a hard error. Defaults to '/app' */
+    returnUrl?: string;
+    /** Label for the hard fallback button. Defaults to 'Return to Workspace' */
+    returnLabel?: string;
+}
+declare const UniversalErrorView: React.FC<UniversalErrorViewProps>;
+interface SearchTypeOption {
+    value: string;
+    label: string;
+}
+interface UniversalLookupPageProps {
+    headerTitle: string;
+    headerDescription: string;
+    searchOptions: SearchTypeOption[];
+    selectedSearchType: string;
+    onSearchTypeChange: (val: string) => void;
+    searchQuery: string;
+    onSearchQueryChange: (val: string) => void;
+    isSearching: boolean;
+    onSearch: (e: React.FormEvent) => void;
+    resultContent?: React.ReactNode;
+    modals?: React.ReactNode;
+}
+declare const UniversalLookupPage: React.FC<UniversalLookupPageProps>;
+interface DirectoryItem {
+    id: string;
+    icon: React.ReactNode;
+    primaryText: React.ReactNode;
+    secondaryText: React.ReactNode;
+    rightBadge?: string;
+    rightBadgeClass?: string;
+}
+interface UniversalDirectoryPageProps {
+    headerTitle: string;
+    headerDescription: string;
+    searchPlaceholder?: string;
+    searchQuery: string;
+    onSearchChange: (val: string) => void;
+    currentView: 'list' | 'details';
+    onBackToList: () => void;
+    items: DirectoryItem[];
+    isLoading: boolean;
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    onRowClick: (id: string) => void;
+    detailsContent?: React.ReactNode;
+    modals?: React.ReactNode;
+}
+declare const UniversalDirectoryPage: React.FC<UniversalDirectoryPageProps>;
+export { AITranscriptionFeature, type AITranscriptionFeatureProps, type AgentFilePayload, type AgentStat, AppBento2, type AppBento2Props, type BentoFeature, type BoardMember, type CompanyDetails, type DashboardList, type DashboardListItem, type DashboardStat, type DocumentSectionData, type EmailContact, Faq, type FaqItem, type FaqProps, FeatureScroll, type FeatureScrollProps, Footer, type FooterColumn, type FooterLink, type FooterProps, GifFeatureCard, type GifFeatureCardProps, Header, type HeaderLink, type HeaderProps, HeroSection, type HeroSectionProps, ManagedBoardBlock, type ManagedBoardBlockProps, ManagedContactBlock, type ManagedContactBlockProps, ManagedDocument, type ManagedDocumentProps, ManagedNewsletterSplitBlock, type ManagedNewsletterSplitBlockProps, ManagedNotFoundBlock, type ManagedNotFoundBlockProps, ManagedPricingBlock, type ManagedPricingBlockProps, ManagedProjectsBlock, type ManagedProjectsBlockProps, ManagedToaster, type NavItem, NumberInput, type NumberInputProps, type OverviewAlert, type OverviewStat, PageSpinner, type PageSpinnerProps, type PlatformFeatureItem, PlatformFeatures, type PlatformFeaturesProps, PortfolioHero, type PortfolioHeroProps, type PricingFeature, type PricingPlan, ProductHero, type ProductHeroProps, type ProjectItem, type ScrollFeature, type SearchTypeOption, type SocialContact, type SocialLink, TextInput, type TextInputProps, type ThemeColorOption, ThreeDActionButton, type ThreeDActionButtonProps, ThreeDButton, type ThreeDButtonProps, UniversalAgentConsole, type UniversalAgentConsoleProps, UniversalBillingPage, type UniversalBillingPageProps, UniversalDashboardPage, type UniversalDashboardPageProps, UniversalDirectoryPage, type UniversalDirectoryPageProps, UniversalErrorView, type UniversalErrorViewProps, UniversalHeader, type UniversalHeaderProps, UniversalIdentityPage, type UniversalIdentityPageProps, type UniversalInvoice, UniversalLookupPage, type UniversalLookupPageProps, type UniversalMember, UniversalMembersPage, type UniversalMembersPageProps, UniversalOrganizationPage, type UniversalOrganizationPageProps, UniversalOverviewPage, type UniversalOverviewPageProps, UniversalProfileSettings, type UniversalProfileSettingsProps, UniversalSidebar, type UniversalSidebarProps, type WorkspaceItem, ZairusAuth, type ZairusAuthProps };

package/dist/index.d.ts CHANGED Viewed

@@ -747,4 +747,66 @@ interface UniversalOverviewPageProps {
 }
 declare const UniversalOverviewPage: React.FC<UniversalOverviewPageProps>;
-export { AITranscriptionFeature, type AITranscriptionFeatureProps, type AgentFilePayload, type AgentStat, AppBento2, type AppBento2Props, type BentoFeature, type BoardMember, type CompanyDetails, type DashboardList, type DashboardListItem, type DashboardStat, type DocumentSectionData, type EmailContact, Faq, type FaqItem, type FaqProps, FeatureScroll, type FeatureScrollProps, Footer, type FooterColumn, type FooterLink, type FooterProps, GifFeatureCard, type GifFeatureCardProps, Header, type HeaderLink, type HeaderProps, HeroSection, type HeroSectionProps, ManagedBoardBlock, type ManagedBoardBlockProps, ManagedContactBlock, type ManagedContactBlockProps, ManagedDocument, type ManagedDocumentProps, ManagedNewsletterSplitBlock, type ManagedNewsletterSplitBlockProps, ManagedNotFoundBlock, type ManagedNotFoundBlockProps, ManagedPricingBlock, type ManagedPricingBlockProps, ManagedProjectsBlock, type ManagedProjectsBlockProps, ManagedToaster, type NavItem, NumberInput, type NumberInputProps, type OverviewAlert, type OverviewStat, PageSpinner, type PageSpinnerProps, type PlatformFeatureItem, PlatformFeatures, type PlatformFeaturesProps, PortfolioHero, type PortfolioHeroProps, type PricingFeature, type PricingPlan, ProductHero, type ProductHeroProps, type ProjectItem, type ScrollFeature, type SocialContact, type SocialLink, TextInput, type TextInputProps, type ThemeColorOption, ThreeDActionButton, type ThreeDActionButtonProps, ThreeDButton, type ThreeDButtonProps, UniversalAgentConsole, type UniversalAgentConsoleProps, UniversalBillingPage, type UniversalBillingPageProps, UniversalDashboardPage, type UniversalDashboardPageProps, UniversalHeader, type UniversalHeaderProps, UniversalIdentityPage, type UniversalIdentityPageProps, type UniversalInvoice, type UniversalMember, UniversalMembersPage, type UniversalMembersPageProps, UniversalOrganizationPage, type UniversalOrganizationPageProps, UniversalOverviewPage, type UniversalOverviewPageProps, UniversalProfileSettings, type UniversalProfileSettingsProps, UniversalSidebar, type UniversalSidebarProps, type WorkspaceItem, ZairusAuth, type ZairusAuthProps };
+interface UniversalErrorViewProps {
+    isBooting: boolean;
+    isLoading: boolean;
+    activeData: any;
+    activeError: any;
+    /** The dynamic name of the environment failing to load (e.g., "application", "workspace") */
+    envName: string;
+    /** Function to execute when the user clicks "Refresh" */
+    onRetry: () => void;
+    /** URL to fallback to on a hard error. Defaults to '/app' */
+    returnUrl?: string;
+    /** Label for the hard fallback button. Defaults to 'Return to Workspace' */
+    returnLabel?: string;
+}
+declare const UniversalErrorView: React.FC<UniversalErrorViewProps>;
+interface SearchTypeOption {
+    value: string;
+    label: string;
+}
+interface UniversalLookupPageProps {
+    headerTitle: string;
+    headerDescription: string;
+    searchOptions: SearchTypeOption[];
+    selectedSearchType: string;
+    onSearchTypeChange: (val: string) => void;
+    searchQuery: string;
+    onSearchQueryChange: (val: string) => void;
+    isSearching: boolean;
+    onSearch: (e: React.FormEvent) => void;
+    resultContent?: React.ReactNode;
+    modals?: React.ReactNode;
+}
+declare const UniversalLookupPage: React.FC<UniversalLookupPageProps>;
+interface DirectoryItem {
+    id: string;
+    icon: React.ReactNode;
+    primaryText: React.ReactNode;
+    secondaryText: React.ReactNode;
+    rightBadge?: string;
+    rightBadgeClass?: string;
+}
+interface UniversalDirectoryPageProps {
+    headerTitle: string;
+    headerDescription: string;
+    searchPlaceholder?: string;
+    searchQuery: string;
+    onSearchChange: (val: string) => void;
+    currentView: 'list' | 'details';
+    onBackToList: () => void;
+    items: DirectoryItem[];
+    isLoading: boolean;
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    onRowClick: (id: string) => void;
+    detailsContent?: React.ReactNode;
+    modals?: React.ReactNode;
+}
+declare const UniversalDirectoryPage: React.FC<UniversalDirectoryPageProps>;
+export { AITranscriptionFeature, type AITranscriptionFeatureProps, type AgentFilePayload, type AgentStat, AppBento2, type AppBento2Props, type BentoFeature, type BoardMember, type CompanyDetails, type DashboardList, type DashboardListItem, type DashboardStat, type DocumentSectionData, type EmailContact, Faq, type FaqItem, type FaqProps, FeatureScroll, type FeatureScrollProps, Footer, type FooterColumn, type FooterLink, type FooterProps, GifFeatureCard, type GifFeatureCardProps, Header, type HeaderLink, type HeaderProps, HeroSection, type HeroSectionProps, ManagedBoardBlock, type ManagedBoardBlockProps, ManagedContactBlock, type ManagedContactBlockProps, ManagedDocument, type ManagedDocumentProps, ManagedNewsletterSplitBlock, type ManagedNewsletterSplitBlockProps, ManagedNotFoundBlock, type ManagedNotFoundBlockProps, ManagedPricingBlock, type ManagedPricingBlockProps, ManagedProjectsBlock, type ManagedProjectsBlockProps, ManagedToaster, type NavItem, NumberInput, type NumberInputProps, type OverviewAlert, type OverviewStat, PageSpinner, type PageSpinnerProps, type PlatformFeatureItem, PlatformFeatures, type PlatformFeaturesProps, PortfolioHero, type PortfolioHeroProps, type PricingFeature, type PricingPlan, ProductHero, type ProductHeroProps, type ProjectItem, type ScrollFeature, type SearchTypeOption, type SocialContact, type SocialLink, TextInput, type TextInputProps, type ThemeColorOption, ThreeDActionButton, type ThreeDActionButtonProps, ThreeDButton, type ThreeDButtonProps, UniversalAgentConsole, type UniversalAgentConsoleProps, UniversalBillingPage, type UniversalBillingPageProps, UniversalDashboardPage, type UniversalDashboardPageProps, UniversalDirectoryPage, type UniversalDirectoryPageProps, UniversalErrorView, type UniversalErrorViewProps, UniversalHeader, type UniversalHeaderProps, UniversalIdentityPage, type UniversalIdentityPageProps, type UniversalInvoice, UniversalLookupPage, type UniversalLookupPageProps, type UniversalMember, UniversalMembersPage, type UniversalMembersPageProps, UniversalOrganizationPage, type UniversalOrganizationPageProps, UniversalOverviewPage, type UniversalOverviewPageProps, UniversalProfileSettings, type UniversalProfileSettingsProps, UniversalSidebar, type UniversalSidebarProps, type WorkspaceItem, ZairusAuth, type ZairusAuthProps };

package/dist/index.js CHANGED Viewed

@@ -58,8 +58,11 @@ __export(index_exports, {
   UniversalAgentConsole: () => UniversalAgentConsole,
   UniversalBillingPage: () => UniversalBillingPage,
   UniversalDashboardPage: () => UniversalDashboardPage,
+  UniversalDirectoryPage: () => UniversalDirectoryPage,
+  UniversalErrorView: () => UniversalErrorView,
   UniversalHeader: () => UniversalHeader,
   UniversalIdentityPage: () => UniversalIdentityPage,
+  UniversalLookupPage: () => UniversalLookupPage,
   UniversalMembersPage: () => UniversalMembersPage,
   UniversalOrganizationPage: () => UniversalOrganizationPage,
   UniversalOverviewPage: () => UniversalOverviewPage,
@@ -2746,6 +2749,172 @@ var UniversalOverviewPage = ({
     return /* @__PURE__ */ import_react53.default.createElement("div", { key: idx, className: `mt-4 p-5 rounded-xl flex flex-col gap-4 ${bgClass}` }, /* @__PURE__ */ import_react53.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ import_react53.default.createElement("span", { className: `text-[11px] tracking-widest uppercase ${textClass}` }, alert.title)), alert.items.map((item, itemIdx) => /* @__PURE__ */ import_react53.default.createElement("div", { key: itemIdx }, /* @__PURE__ */ import_react53.default.createElement("span", { className: `text-[10px] tracking-[0.2em] block mb-1 uppercase ${lblClass}` }, item.label), /* @__PURE__ */ import_react53.default.createElement("p", { className: `text-[13px] leading-relaxed ${valClass}` }, item.text))));
   }))));
 };
+// src/components/UniversalErrorView.tsx
+var import_react54 = __toESM(require("react"));
+var import_react55 = require("@hugeicons/react");
+var import_core_free_icons16 = require("@hugeicons/core-free-icons");
+var UniversalErrorView = ({
+  isBooting,
+  isLoading,
+  activeData,
+  activeError,
+  envName,
+  onRetry,
+  returnUrl = "/app",
+  returnLabel = "Return to Workspace"
+}) => {
+  if (isBooting || isLoading && !activeData) {
+    return /* @__PURE__ */ import_react54.default.createElement("div", { className: "flex items-center justify-center h-screen w-full bg-transparent" }, /* @__PURE__ */ import_react54.default.createElement(PageSpinner, null));
+  }
+  if (!isLoading && (!activeData || activeError)) {
+    const errorString = typeof activeError === "string" ? activeError : JSON.stringify(activeError || "");
+    const errorMsg = errorString.toLowerCase();
+    const isPermissionError = errorMsg.includes("forbidden") || errorMsg.includes("unauthorized") || errorMsg.includes("permission");
+    const isNetworkError = errorMsg.includes("network") || errorMsg.includes("connection") || errorMsg.includes("fetch");
+    const isNotFoundError = errorMsg.includes("not found") || errorMsg.includes("404") || errorMsg.includes("does not exist") || !activeData && !isPermissionError && !isNetworkError;
+    const apiMessage = typeof activeError === "string" && activeError.trim() !== "" ? activeError : null;
+    let title = "Oops Connection Error";
+    let description = apiMessage || `We could not load your request. Please check your connection and try again.`;
+    let IconComponent = import_core_free_icons16.ConfusedIcon;
+    if (isNotFoundError) {
+      title = "Oops its not your fault";
+      description = apiMessage || `We could not reach the ${envName} you just loaded. Our team has been notified.`;
+    } else if (isPermissionError) {
+      title = "Access Restricted";
+      description = apiMessage || `You have insufficient permissions to view this ${envName}. Please contact your administrator.`;
+    }
+    return /* @__PURE__ */ import_react54.default.createElement("div", { className: "flex flex-col items-center justify-center h-screen w-full px-4 animate-in fade-in duration-500" }, /* @__PURE__ */ import_react54.default.createElement("div", { className: "mb-4 flex justify-center" }, /* @__PURE__ */ import_react54.default.createElement(import_react55.HugeiconsIcon, { icon: IconComponent, size: 48, className: "text-neutral-300" })), /* @__PURE__ */ import_react54.default.createElement("h2", { className: "text-lg text-black tracking-tight " }, title), /* @__PURE__ */ import_react54.default.createElement("p", { className: "text-xs mt-2 mb-8 text-neutral-500 max-w-sm text-center leading-relaxed" }, description), /* @__PURE__ */ import_react54.default.createElement("div", { className: "flex flex-col sm:flex-row items-center gap-3 w-full justify-center sm:w-auto" }, isNotFoundError || isPermissionError ? /* @__PURE__ */ import_react54.default.createElement(
+      "button",
+      {
+        onClick: () => window.location.href = returnUrl,
+        className: "px-6 py-2 bg-neutral-100 hover:bg-neutral-200 text-black rounded-full text-[11px] tracking-widest transition-colors w-full sm:w-auto outline-none"
+      },
+      returnLabel
+    ) : (
+      // Soft errors (Network timeouts) allow them to retry or optionally retreat
+      /* @__PURE__ */ import_react54.default.createElement(import_react54.default.Fragment, null, envName.toLowerCase().includes("application") && /* @__PURE__ */ import_react54.default.createElement(
+        "button",
+        {
+          onClick: () => window.location.href = returnUrl,
+          className: "px-6 py-2 bg-transparent border border-neutral-200 hover:bg-neutral-50 text-neutral-600 hover:text-black rounded-full text-[11px] tracking-widest transition-colors w-full sm:w-auto outline-none"
+        },
+        "Back Home"
+      ), /* @__PURE__ */ import_react54.default.createElement(
+        "button",
+        {
+          onClick: onRetry,
+          className: "px-6 py-2 bg-black hover:bg-neutral-800 text-white rounded-full text-[11px] tracking-widest transition-colors w-full sm:w-auto outline-none capitalize"
+        },
+        "Refresh ",
+        envName
+      ))
+    )));
+  }
+  return null;
+};
+// src/components/UniversalLookupPage.tsx
+var import_react56 = __toESM(require("react"));
+var import_react57 = require("@hugeicons/react");
+var import_core_free_icons17 = require("@hugeicons/core-free-icons");
+var UniversalLookupPage = ({
+  headerTitle,
+  headerDescription,
+  searchOptions,
+  selectedSearchType,
+  onSearchTypeChange,
+  searchQuery,
+  onSearchQueryChange,
+  isSearching,
+  onSearch,
+  resultContent,
+  modals
+}) => {
+  const [isTypeModalOpen, setIsTypeModalOpen] = (0, import_react56.useState)(false);
+  const currentOptionLabel = searchOptions.find((opt) => opt.value === selectedSearchType)?.label || "Select Type";
+  return /* @__PURE__ */ import_react56.default.createElement("div", { className: "flex flex-col max-w-3xl rounded-2xl p-6 bg-white gap-8 animate-in fade-in duration-300 min-h-full pb-20" }, /* @__PURE__ */ import_react56.default.createElement(ManagedToaster, null), /* @__PURE__ */ import_react56.default.createElement("div", { className: "flex flex-col sm:flex-row sm:items-start justify-between gap-3 sm:gap-4" }, /* @__PURE__ */ import_react56.default.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ import_react56.default.createElement("h1", { className: "text-xl text-black mb-1 truncate tracking-tight" }, headerTitle), /* @__PURE__ */ import_react56.default.createElement("p", { className: "text-xs text-neutral-500 truncate" }, headerDescription))), /* @__PURE__ */ import_react56.default.createElement("div", { className: "w-full max-w-2xl pb-8" }, /* @__PURE__ */ import_react56.default.createElement("form", { className: "flex flex-col gap-6", onSubmit: onSearch, autoComplete: "off" }, /* @__PURE__ */ import_react56.default.createElement("div", { className: "flex gap-4" }, /* @__PURE__ */ import_react56.default.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => setIsTypeModalOpen(true),
+      className: "mt-2 text-[12px] tracking-widest bg-transparent border-b border-neutral-200 text-black text-left outline-none focus:border-black shrink-0 uppercase"
+    },
+    currentOptionLabel
+  ), /* @__PURE__ */ import_react56.default.createElement("div", { className: "flex-1" }, /* @__PURE__ */ import_react56.default.createElement(
+    TextInput,
+    {
+      placeholder: "Enter Exact ID, Email, or Slug...",
+      value: searchQuery,
+      onChange: onSearchQueryChange,
+      disabled: isSearching
+    }
+  ))), /* @__PURE__ */ import_react56.default.createElement("div", { className: "flex justify-end" }, /* @__PURE__ */ import_react56.default.createElement(
+    ThreeDActionButton,
+    {
+      type: "submit",
+      disabled: isSearching || !searchQuery,
+      isLoading: isSearching,
+      className: "min-w-32"
+    },
+    /* @__PURE__ */ import_react56.default.createElement(import_react57.HugeiconsIcon, { icon: import_core_free_icons17.Search01Icon, size: 14, className: "mr-2" }),
+    " Lookup"
+  )))), resultContent && /* @__PURE__ */ import_react56.default.createElement("div", { className: "w-full max-w-2xl bg-white text-left animate-in fade-in slide-in-from-bottom-4" }, /* @__PURE__ */ import_react56.default.createElement("h3", { className: "text-[10px] text-neutral-400 tracking-[0.2em] mb-6 uppercase" }, "Entity Record Found"), resultContent), isTypeModalOpen && /* @__PURE__ */ import_react56.default.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4" }, /* @__PURE__ */ import_react56.default.createElement("div", { className: "absolute inset-0 bg-black/30", onClick: () => setIsTypeModalOpen(false) }), /* @__PURE__ */ import_react56.default.createElement("div", { className: "relative w-80 bg-white shadow-2xl rounded-2xl flex flex-col items-center overflow-hidden animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ import_react56.default.createElement("div", { className: "p-6 text-center w-full" }, /* @__PURE__ */ import_react56.default.createElement("h3", { className: "text-[14px] text-black tracking-tight mb-2" }, "Select Entity Type")), /* @__PURE__ */ import_react56.default.createElement("div", { className: "w-full flex flex-col pl-2 pr-2 pb-2" }, searchOptions.map((option) => /* @__PURE__ */ import_react56.default.createElement(
+    "button",
+    {
+      key: option.value,
+      type: "button",
+      onClick: () => {
+        onSearchTypeChange(option.value);
+        setIsTypeModalOpen(false);
+      },
+      className: `text-left px-4 py-3 text-[12px] tracking-wide transition-colors rounded-full flex items-center justify-between outline-none ${selectedSearchType === option.value ? "bg-neutral-100 text-black" : "text-neutral-500 hover:bg-neutral-50 hover:text-black"}`
+    },
+    /* @__PURE__ */ import_react56.default.createElement("span", { className: "truncate pr-2" }, option.label),
+    selectedSearchType === option.value && /* @__PURE__ */ import_react56.default.createElement("div", { className: "w-1.5 h-1.5 bg-black rounded-full shrink-0" })
+  ))), /* @__PURE__ */ import_react56.default.createElement("div", { className: "w-full flex" }, /* @__PURE__ */ import_react56.default.createElement("button", { type: "button", onClick: () => setIsTypeModalOpen(false), className: "w-full py-2.5 text-[13px] text-neutral-600 hover:bg-neutral-50 transition-colors outline-none" }, "Cancel")))), modals);
+};
+// src/components/UniversalDirectoryPage.tsx
+var import_react58 = __toESM(require("react"));
+var import_react59 = require("@hugeicons/react");
+var import_core_free_icons18 = require("@hugeicons/core-free-icons");
+var PageSpinner4 = () => /* @__PURE__ */ import_react58.default.createElement("div", { className: "flex justify-center items-center py-12" }, /* @__PURE__ */ import_react58.default.createElement(import_react59.HugeiconsIcon, { icon: import_core_free_icons18.Loading03Icon, size: 32, className: "animate-spin mb-4 text-black" }));
+var UniversalDirectoryPage = ({
+  headerTitle,
+  headerDescription,
+  searchPlaceholder = "Search...",
+  searchQuery,
+  onSearchChange,
+  currentView,
+  onBackToList,
+  items,
+  isLoading,
+  currentPage,
+  totalPages,
+  onPageChange,
+  onRowClick,
+  detailsContent,
+  modals
+}) => {
+  return /* @__PURE__ */ import_react58.default.createElement("div", { className: "flex flex-col gap-8 animate-in max-w-3xl fade-in duration-300 p-6 rounded-2xl bg-white min-h-full" }, /* @__PURE__ */ import_react58.default.createElement(ManagedToaster, null), /* @__PURE__ */ import_react58.default.createElement("div", { className: "flex flex-col sm:flex-row sm:items-start justify-between gap-4" }, currentView === "list" ? /* @__PURE__ */ import_react58.default.createElement("div", { className: "w-full" }, /* @__PURE__ */ import_react58.default.createElement("h1", { className: "text-xl text-black mb-1 tracking-tight" }, headerTitle), /* @__PURE__ */ import_react58.default.createElement("p", { className: "text-xs text-neutral-500 mb-6" }, headerDescription), /* @__PURE__ */ import_react58.default.createElement(
+    TextInput,
+    {
+      placeholder: searchPlaceholder,
+      value: searchQuery,
+      onChange: onSearchChange
+    }
+  )) : /* @__PURE__ */ import_react58.default.createElement("div", { className: "flex flex-col items-start gap-3" }, /* @__PURE__ */ import_react58.default.createElement("button", { onClick: onBackToList, className: "text-[10px] text-neutral-400 hover:text-black tracking-[0.2em] flex items-center gap-1.5 transition-colors outline-none uppercase" }, /* @__PURE__ */ import_react58.default.createElement(import_react59.HugeiconsIcon, { icon: import_core_free_icons18.ArrowLeft01Icon, size: 12 }), " Back"))), currentView === "list" && /* @__PURE__ */ import_react58.default.createElement("div", { className: "w-full overflow-hidden pt-2" }, isLoading ? /* @__PURE__ */ import_react58.default.createElement(PageSpinner4, null) : /* @__PURE__ */ import_react58.default.createElement("div", { className: "flex flex-col min-w-0" }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "divide-y divide-neutral-100" }, items.length === 0 ? /* @__PURE__ */ import_react58.default.createElement("p", { className: "text-xs text-neutral-500 py-6 text-center" }, "No records found.") : items.map((item) => /* @__PURE__ */ import_react58.default.createElement(
+    "div",
+    {
+      key: item.id,
+      onClick: () => onRowClick(item.id),
+      className: "flex items-center justify-between p-4 sm:p-5 hover:bg-neutral-50/50 transition-colors cursor-pointer group min-w-0"
+    },
+    /* @__PURE__ */ import_react58.default.createElement("div", { className: "flex items-center gap-3 sm:gap-4 min-w-0 flex-1" }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "w-10 h-10 shrink-0 rounded-full flex items-center justify-center bg-neutral-100 text-black text-xs" }, item.icon), /* @__PURE__ */ import_react58.default.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "text-sm text-black truncate pr-2" }, item.primaryText), /* @__PURE__ */ import_react58.default.createElement("div", { className: "text-xs text-neutral-500 truncate pr-2 mt-0.5" }, item.secondaryText))),
+    item.rightBadge && /* @__PURE__ */ import_react58.default.createElement("div", { className: "shrink-0 pl-2" }, /* @__PURE__ */ import_react58.default.createElement("span", { className: `text-[10px] tracking-[0.2em] px-3 py-1 rounded-full whitespace-nowrap uppercase ${item.rightBadgeClass || "text-neutral-500 border border-neutral-200 bg-white"}` }, item.rightBadge))
+  ))), totalPages > 1 && /* @__PURE__ */ import_react58.default.createElement("div", { className: "flex items-center justify-between p-4 sm:p-5" }, /* @__PURE__ */ import_react58.default.createElement("span", { className: "text-[10px] text-neutral-400 tracking-[0.2em] uppercase" }, "Page ", currentPage, " of ", totalPages), /* @__PURE__ */ import_react58.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ import_react58.default.createElement("button", { onClick: () => onPageChange(currentPage - 1), disabled: currentPage === 1 || isLoading, className: "p-2 border border-neutral-200 rounded-full bg-white text-neutral-500 hover:text-black outline-none disabled:opacity-30" }, /* @__PURE__ */ import_react58.default.createElement(import_react59.HugeiconsIcon, { icon: import_core_free_icons18.ArrowLeft01Icon, size: 14 })), /* @__PURE__ */ import_react58.default.createElement("button", { onClick: () => onPageChange(currentPage + 1), disabled: currentPage >= totalPages || isLoading, className: "p-2 border border-neutral-200 rounded-full bg-white text-neutral-500 hover:text-black outline-none disabled:opacity-30" }, /* @__PURE__ */ import_react58.default.createElement(import_react59.HugeiconsIcon, { icon: import_core_free_icons18.ArrowRight01Icon, size: 14 })))))), currentView === "details" && detailsContent, modals);
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AITranscriptionFeature,
@@ -2775,8 +2944,11 @@ var UniversalOverviewPage = ({
   UniversalAgentConsole,
   UniversalBillingPage,
   UniversalDashboardPage,
+  UniversalDirectoryPage,
+  UniversalErrorView,
   UniversalHeader,
   UniversalIdentityPage,
+  UniversalLookupPage,
   UniversalMembersPage,
   UniversalOrganizationPage,
   UniversalOverviewPage,

package/dist/index.mjs CHANGED Viewed

@@ -2706,6 +2706,172 @@ var UniversalOverviewPage = ({
     return /* @__PURE__ */ React34.createElement("div", { key: idx, className: `mt-4 p-5 rounded-xl flex flex-col gap-4 ${bgClass}` }, /* @__PURE__ */ React34.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React34.createElement("span", { className: `text-[11px] tracking-widest uppercase ${textClass}` }, alert.title)), alert.items.map((item, itemIdx) => /* @__PURE__ */ React34.createElement("div", { key: itemIdx }, /* @__PURE__ */ React34.createElement("span", { className: `text-[10px] tracking-[0.2em] block mb-1 uppercase ${lblClass}` }, item.label), /* @__PURE__ */ React34.createElement("p", { className: `text-[13px] leading-relaxed ${valClass}` }, item.text))));
   }))));
 };
+// src/components/UniversalErrorView.tsx
+import React35 from "react";
+import { HugeiconsIcon as HugeiconsIcon20 } from "@hugeicons/react";
+import { ConfusedIcon } from "@hugeicons/core-free-icons";
+var UniversalErrorView = ({
+  isBooting,
+  isLoading,
+  activeData,
+  activeError,
+  envName,
+  onRetry,
+  returnUrl = "/app",
+  returnLabel = "Return to Workspace"
+}) => {
+  if (isBooting || isLoading && !activeData) {
+    return /* @__PURE__ */ React35.createElement("div", { className: "flex items-center justify-center h-screen w-full bg-transparent" }, /* @__PURE__ */ React35.createElement(PageSpinner, null));
+  }
+  if (!isLoading && (!activeData || activeError)) {
+    const errorString = typeof activeError === "string" ? activeError : JSON.stringify(activeError || "");
+    const errorMsg = errorString.toLowerCase();
+    const isPermissionError = errorMsg.includes("forbidden") || errorMsg.includes("unauthorized") || errorMsg.includes("permission");
+    const isNetworkError = errorMsg.includes("network") || errorMsg.includes("connection") || errorMsg.includes("fetch");
+    const isNotFoundError = errorMsg.includes("not found") || errorMsg.includes("404") || errorMsg.includes("does not exist") || !activeData && !isPermissionError && !isNetworkError;
+    const apiMessage = typeof activeError === "string" && activeError.trim() !== "" ? activeError : null;
+    let title = "Oops Connection Error";
+    let description = apiMessage || `We could not load your request. Please check your connection and try again.`;
+    let IconComponent = ConfusedIcon;
+    if (isNotFoundError) {
+      title = "Oops its not your fault";
+      description = apiMessage || `We could not reach the ${envName} you just loaded. Our team has been notified.`;
+    } else if (isPermissionError) {
+      title = "Access Restricted";
+      description = apiMessage || `You have insufficient permissions to view this ${envName}. Please contact your administrator.`;
+    }
+    return /* @__PURE__ */ React35.createElement("div", { className: "flex flex-col items-center justify-center h-screen w-full px-4 animate-in fade-in duration-500" }, /* @__PURE__ */ React35.createElement("div", { className: "mb-4 flex justify-center" }, /* @__PURE__ */ React35.createElement(HugeiconsIcon20, { icon: IconComponent, size: 48, className: "text-neutral-300" })), /* @__PURE__ */ React35.createElement("h2", { className: "text-lg text-black tracking-tight " }, title), /* @__PURE__ */ React35.createElement("p", { className: "text-xs mt-2 mb-8 text-neutral-500 max-w-sm text-center leading-relaxed" }, description), /* @__PURE__ */ React35.createElement("div", { className: "flex flex-col sm:flex-row items-center gap-3 w-full justify-center sm:w-auto" }, isNotFoundError || isPermissionError ? /* @__PURE__ */ React35.createElement(
+      "button",
+      {
+        onClick: () => window.location.href = returnUrl,
+        className: "px-6 py-2 bg-neutral-100 hover:bg-neutral-200 text-black rounded-full text-[11px] tracking-widest transition-colors w-full sm:w-auto outline-none"
+      },
+      returnLabel
+    ) : (
+      // Soft errors (Network timeouts) allow them to retry or optionally retreat
+      /* @__PURE__ */ React35.createElement(React35.Fragment, null, envName.toLowerCase().includes("application") && /* @__PURE__ */ React35.createElement(
+        "button",
+        {
+          onClick: () => window.location.href = returnUrl,
+          className: "px-6 py-2 bg-transparent border border-neutral-200 hover:bg-neutral-50 text-neutral-600 hover:text-black rounded-full text-[11px] tracking-widest transition-colors w-full sm:w-auto outline-none"
+        },
+        "Back Home"
+      ), /* @__PURE__ */ React35.createElement(
+        "button",
+        {
+          onClick: onRetry,
+          className: "px-6 py-2 bg-black hover:bg-neutral-800 text-white rounded-full text-[11px] tracking-widest transition-colors w-full sm:w-auto outline-none capitalize"
+        },
+        "Refresh ",
+        envName
+      ))
+    )));
+  }
+  return null;
+};
+// src/components/UniversalLookupPage.tsx
+import React36, { useState as useState18 } from "react";
+import { HugeiconsIcon as HugeiconsIcon21 } from "@hugeicons/react";
+import { Search01Icon } from "@hugeicons/core-free-icons";
+var UniversalLookupPage = ({
+  headerTitle,
+  headerDescription,
+  searchOptions,
+  selectedSearchType,
+  onSearchTypeChange,
+  searchQuery,
+  onSearchQueryChange,
+  isSearching,
+  onSearch,
+  resultContent,
+  modals
+}) => {
+  const [isTypeModalOpen, setIsTypeModalOpen] = useState18(false);
+  const currentOptionLabel = searchOptions.find((opt) => opt.value === selectedSearchType)?.label || "Select Type";
+  return /* @__PURE__ */ React36.createElement("div", { className: "flex flex-col max-w-3xl rounded-2xl p-6 bg-white gap-8 animate-in fade-in duration-300 min-h-full pb-20" }, /* @__PURE__ */ React36.createElement(ManagedToaster, null), /* @__PURE__ */ React36.createElement("div", { className: "flex flex-col sm:flex-row sm:items-start justify-between gap-3 sm:gap-4" }, /* @__PURE__ */ React36.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React36.createElement("h1", { className: "text-xl text-black mb-1 truncate tracking-tight" }, headerTitle), /* @__PURE__ */ React36.createElement("p", { className: "text-xs text-neutral-500 truncate" }, headerDescription))), /* @__PURE__ */ React36.createElement("div", { className: "w-full max-w-2xl pb-8" }, /* @__PURE__ */ React36.createElement("form", { className: "flex flex-col gap-6", onSubmit: onSearch, autoComplete: "off" }, /* @__PURE__ */ React36.createElement("div", { className: "flex gap-4" }, /* @__PURE__ */ React36.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => setIsTypeModalOpen(true),
+      className: "mt-2 text-[12px] tracking-widest bg-transparent border-b border-neutral-200 text-black text-left outline-none focus:border-black shrink-0 uppercase"
+    },
+    currentOptionLabel
+  ), /* @__PURE__ */ React36.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React36.createElement(
+    TextInput,
+    {
+      placeholder: "Enter Exact ID, Email, or Slug...",
+      value: searchQuery,
+      onChange: onSearchQueryChange,
+      disabled: isSearching
+    }
+  ))), /* @__PURE__ */ React36.createElement("div", { className: "flex justify-end" }, /* @__PURE__ */ React36.createElement(
+    ThreeDActionButton,
+    {
+      type: "submit",
+      disabled: isSearching || !searchQuery,
+      isLoading: isSearching,
+      className: "min-w-32"
+    },
+    /* @__PURE__ */ React36.createElement(HugeiconsIcon21, { icon: Search01Icon, size: 14, className: "mr-2" }),
+    " Lookup"
+  )))), resultContent && /* @__PURE__ */ React36.createElement("div", { className: "w-full max-w-2xl bg-white text-left animate-in fade-in slide-in-from-bottom-4" }, /* @__PURE__ */ React36.createElement("h3", { className: "text-[10px] text-neutral-400 tracking-[0.2em] mb-6 uppercase" }, "Entity Record Found"), resultContent), isTypeModalOpen && /* @__PURE__ */ React36.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4" }, /* @__PURE__ */ React36.createElement("div", { className: "absolute inset-0 bg-black/30", onClick: () => setIsTypeModalOpen(false) }), /* @__PURE__ */ React36.createElement("div", { className: "relative w-80 bg-white shadow-2xl rounded-2xl flex flex-col items-center overflow-hidden animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ React36.createElement("div", { className: "p-6 text-center w-full" }, /* @__PURE__ */ React36.createElement("h3", { className: "text-[14px] text-black tracking-tight mb-2" }, "Select Entity Type")), /* @__PURE__ */ React36.createElement("div", { className: "w-full flex flex-col pl-2 pr-2 pb-2" }, searchOptions.map((option) => /* @__PURE__ */ React36.createElement(
+    "button",
+    {
+      key: option.value,
+      type: "button",
+      onClick: () => {
+        onSearchTypeChange(option.value);
+        setIsTypeModalOpen(false);
+      },
+      className: `text-left px-4 py-3 text-[12px] tracking-wide transition-colors rounded-full flex items-center justify-between outline-none ${selectedSearchType === option.value ? "bg-neutral-100 text-black" : "text-neutral-500 hover:bg-neutral-50 hover:text-black"}`
+    },
+    /* @__PURE__ */ React36.createElement("span", { className: "truncate pr-2" }, option.label),
+    selectedSearchType === option.value && /* @__PURE__ */ React36.createElement("div", { className: "w-1.5 h-1.5 bg-black rounded-full shrink-0" })
+  ))), /* @__PURE__ */ React36.createElement("div", { className: "w-full flex" }, /* @__PURE__ */ React36.createElement("button", { type: "button", onClick: () => setIsTypeModalOpen(false), className: "w-full py-2.5 text-[13px] text-neutral-600 hover:bg-neutral-50 transition-colors outline-none" }, "Cancel")))), modals);
+};
+// src/components/UniversalDirectoryPage.tsx
+import React37 from "react";
+import { HugeiconsIcon as HugeiconsIcon22 } from "@hugeicons/react";
+import { ArrowLeft01Icon as ArrowLeft01Icon6, ArrowRight01Icon as ArrowRight01Icon6, Loading03Icon as Loading03Icon10 } from "@hugeicons/core-free-icons";
+var PageSpinner4 = () => /* @__PURE__ */ React37.createElement("div", { className: "flex justify-center items-center py-12" }, /* @__PURE__ */ React37.createElement(HugeiconsIcon22, { icon: Loading03Icon10, size: 32, className: "animate-spin mb-4 text-black" }));
+var UniversalDirectoryPage = ({
+  headerTitle,
+  headerDescription,
+  searchPlaceholder = "Search...",
+  searchQuery,
+  onSearchChange,
+  currentView,
+  onBackToList,
+  items,
+  isLoading,
+  currentPage,
+  totalPages,
+  onPageChange,
+  onRowClick,
+  detailsContent,
+  modals
+}) => {
+  return /* @__PURE__ */ React37.createElement("div", { className: "flex flex-col gap-8 animate-in max-w-3xl fade-in duration-300 p-6 rounded-2xl bg-white min-h-full" }, /* @__PURE__ */ React37.createElement(ManagedToaster, null), /* @__PURE__ */ React37.createElement("div", { className: "flex flex-col sm:flex-row sm:items-start justify-between gap-4" }, currentView === "list" ? /* @__PURE__ */ React37.createElement("div", { className: "w-full" }, /* @__PURE__ */ React37.createElement("h1", { className: "text-xl text-black mb-1 tracking-tight" }, headerTitle), /* @__PURE__ */ React37.createElement("p", { className: "text-xs text-neutral-500 mb-6" }, headerDescription), /* @__PURE__ */ React37.createElement(
+    TextInput,
+    {
+      placeholder: searchPlaceholder,
+      value: searchQuery,
+      onChange: onSearchChange
+    }
+  )) : /* @__PURE__ */ React37.createElement("div", { className: "flex flex-col items-start gap-3" }, /* @__PURE__ */ React37.createElement("button", { onClick: onBackToList, className: "text-[10px] text-neutral-400 hover:text-black tracking-[0.2em] flex items-center gap-1.5 transition-colors outline-none uppercase" }, /* @__PURE__ */ React37.createElement(HugeiconsIcon22, { icon: ArrowLeft01Icon6, size: 12 }), " Back"))), currentView === "list" && /* @__PURE__ */ React37.createElement("div", { className: "w-full overflow-hidden pt-2" }, isLoading ? /* @__PURE__ */ React37.createElement(PageSpinner4, null) : /* @__PURE__ */ React37.createElement("div", { className: "flex flex-col min-w-0" }, /* @__PURE__ */ React37.createElement("div", { className: "divide-y divide-neutral-100" }, items.length === 0 ? /* @__PURE__ */ React37.createElement("p", { className: "text-xs text-neutral-500 py-6 text-center" }, "No records found.") : items.map((item) => /* @__PURE__ */ React37.createElement(
+    "div",
+    {
+      key: item.id,
+      onClick: () => onRowClick(item.id),
+      className: "flex items-center justify-between p-4 sm:p-5 hover:bg-neutral-50/50 transition-colors cursor-pointer group min-w-0"
+    },
+    /* @__PURE__ */ React37.createElement("div", { className: "flex items-center gap-3 sm:gap-4 min-w-0 flex-1" }, /* @__PURE__ */ React37.createElement("div", { className: "w-10 h-10 shrink-0 rounded-full flex items-center justify-center bg-neutral-100 text-black text-xs" }, item.icon), /* @__PURE__ */ React37.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ React37.createElement("div", { className: "text-sm text-black truncate pr-2" }, item.primaryText), /* @__PURE__ */ React37.createElement("div", { className: "text-xs text-neutral-500 truncate pr-2 mt-0.5" }, item.secondaryText))),
+    item.rightBadge && /* @__PURE__ */ React37.createElement("div", { className: "shrink-0 pl-2" }, /* @__PURE__ */ React37.createElement("span", { className: `text-[10px] tracking-[0.2em] px-3 py-1 rounded-full whitespace-nowrap uppercase ${item.rightBadgeClass || "text-neutral-500 border border-neutral-200 bg-white"}` }, item.rightBadge))
+  ))), totalPages > 1 && /* @__PURE__ */ React37.createElement("div", { className: "flex items-center justify-between p-4 sm:p-5" }, /* @__PURE__ */ React37.createElement("span", { className: "text-[10px] text-neutral-400 tracking-[0.2em] uppercase" }, "Page ", currentPage, " of ", totalPages), /* @__PURE__ */ React37.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React37.createElement("button", { onClick: () => onPageChange(currentPage - 1), disabled: currentPage === 1 || isLoading, className: "p-2 border border-neutral-200 rounded-full bg-white text-neutral-500 hover:text-black outline-none disabled:opacity-30" }, /* @__PURE__ */ React37.createElement(HugeiconsIcon22, { icon: ArrowLeft01Icon6, size: 14 })), /* @__PURE__ */ React37.createElement("button", { onClick: () => onPageChange(currentPage + 1), disabled: currentPage >= totalPages || isLoading, className: "p-2 border border-neutral-200 rounded-full bg-white text-neutral-500 hover:text-black outline-none disabled:opacity-30" }, /* @__PURE__ */ React37.createElement(HugeiconsIcon22, { icon: ArrowRight01Icon6, size: 14 })))))), currentView === "details" && detailsContent, modals);
+};
 export {
   AITranscriptionFeature,
   AppBento2,
@@ -2734,8 +2900,11 @@ export {
   UniversalAgentConsole,
   UniversalBillingPage,
   UniversalDashboardPage,
+  UniversalDirectoryPage,
+  UniversalErrorView,
   UniversalHeader,
   UniversalIdentityPage,
+  UniversalLookupPage,
   UniversalMembersPage,
   UniversalOrganizationPage,
   UniversalOverviewPage,

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@retinalabsllc/zairusjs",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "A perceptive, Ai data driven Next.js UI component library.",
   "author": "Retina Labs Company",
   "license": "MIT",