@tradalab/lyra 1.5.0 → 1.7.0

package/dist/shell/index.d.ts

@@ -203,14 +203,22 @@ interface NavUserThemeLabels {
 /** Default English theme-submenu labels — spread + override for i18n. */
 declare const defaultNavUserThemeLabels: NavUserThemeLabels;
 interface NavUserProps {
-    /** Signed-in user. Renders nothing when `null`/`undefined`. */
+    /**
+     * Signed-in user. When `null`/`undefined`, renders a guest menu (icon +
+     * theme + Sign in) if `onSignIn` is set, otherwise renders nothing.
+     */
     user?: AccountMenuUser | null;
     /** Account-action labels — reuses lyra's {@link AccountMenuLabels}. */
     labels?: Partial<AccountMenuLabels>;
-    /** Switch-account handler. Item hidden if omitted. */
+    /** Switch-account handler (signed-in only). Item hidden if omitted. */
     onSwitchAccount?: () => void;
-    /** Sign-out handler. Item hidden if omitted. */
+    /** Sign-out handler (signed-in only). Item hidden if omitted. */
     onSignOut?: () => void;
+    /**
+     * Sign-in handler (guest only). When set, a null `user` renders the guest
+     * menu with a Sign in action instead of rendering nothing.
+     */
+    onSignIn?: () => void;
     /** Render the light/dark/system theme submenu. Default `true`. */
     showTheme?: boolean;
     /** Theme-submenu labels. */
@@ -246,7 +254,7 @@ interface NavUserProps {
  *   />
  * </SidebarFooter>
  */
-declare function NavUser({ user, labels, onSwitchAccount, onSignOut, showTheme, themeLabels, children, }: NavUserProps): React.JSX.Element | null;
+declare function NavUser({ user, labels, onSwitchAccount, onSignOut, onSignIn, showTheme, themeLabels, children, }: NavUserProps): React.JSX.Element | null;
 
 interface TabItem {
     id: string;
@@ -311,4 +319,75 @@ interface BreadcrumbsProps extends ComponentProps<typeof Breadcrumb> {
 /** Pathname-derived breadcrumbs. Renders nothing on the root route. */
 declare function Breadcrumbs({ separator, labels, ...rest }: BreadcrumbsProps): React.JSX.Element | null;
 
-export { AppShell, AppShellBody, AppShellHeader, AppShellMain, type AppShellProps, Breadcrumbs, type BreadcrumbsProps, type MatchMode, NavBrand, type NavBrandApp, type NavBrandProps, NavGroup, type NavGroupProps, type NavIcon, NavItem, type NavItemProps, NavSection, type NavSectionProps, NavUser, type NavUserProps, type NavUserThemeLabels, SidebarDock, SidebarPanel, StackedSidebar, TabBar, type TabBarLabels, type TabBarProps, type TabItem, type UseActiveRoute, defaultNavBrandAppsLabel, defaultNavUserThemeLabels, defaultTabBarLabels, useActiveRoute };
+/** One application in the {@link AppGrid} — rendered as an {@link AppTile}. */
+interface AppGridItem {
+    /** Stable React list key. */
+    key: string;
+    /** Display name. */
+    name: string;
+    /** Optional tagline shown under the name. */
+    description?: string;
+    /** Navigation target (usually an absolute cross-app URL). */
+    href: string;
+    /**
+     * Pre-rendered icon element (RSC-serializable), e.g. `<ToolCase />`. Sized by
+     * the tile (`[&_svg]:size-7`) — same convention as {@link NavBrandApp}'s icon.
+     */
+    icon: ReactNode;
+    /**
+     * Tailwind class string tinting the icon tile — `text-…` (colors the icon via
+     * currentColor) + `bg-…` (tile background). Pass full class strings, not
+     * interpolated fragments, so the JIT keeps them.
+     */
+    accent?: string;
+    /** Opens on a different origin (adds `target="_blank"` + `rel`). */
+    external?: boolean;
+}
+interface AppGridProps {
+    /** Apps to render — already filtered by the caller. */
+    apps: AppGridItem[];
+    /** Controlled search value. Pass together with `onQueryChange` to show the search box. */
+    query?: string;
+    onQueryChange?: (query: string) => void;
+    /** Search input placeholder. */
+    searchPlaceholder?: string;
+    /** Autofocus the search box on mount. Default `false`. */
+    autoFocusSearch?: boolean;
+    /** Message shown when `apps` is empty. */
+    emptyLabel?: string;
+    className?: string;
+}
+/** Default English labels — override for i18n. */
+declare const defaultAppGridLabels: {
+    searchPlaceholder: string;
+    empty: string;
+};
+/**
+ * A responsive grid of application tiles with an optional search box — the "app
+ * grid" / launcher surface (a portal home / "all apps" page). Presentational:
+ * the app owns the registry, i18n, icons, and the filter — pass the already-
+ * filtered `apps` plus a controlled `query`. Same app/lyra split as
+ * {@link NavBrand} and {@link TabBar}.
+ *
+ * @example
+ * const [q, setQ] = useState("")
+ * const filtered = APPS.filter(a => match(a, q))
+ * <AppGrid
+ *   apps={filtered.map(a => ({
+ *     key: a.slug, name: t(a.slug), description: t(`${a.slug}.desc`),
+ *     href: a.href, icon: <a.Icon />, accent: a.accent, external: true,
+ *   }))}
+ *   query={q} onQueryChange={setQ}
+ *   searchPlaceholder={t("search")} emptyLabel={t("empty")}
+ * />
+ */
+declare function AppGrid({ apps, query, onQueryChange, searchPlaceholder, autoFocusSearch, emptyLabel, className, }: AppGridProps): React.JSX.Element;
+/**
+ * A single application tile: the icon in a tinted rounded chip above the name +
+ * description. Exported for callers that render their own grid.
+ */
+declare function AppTile({ app }: {
+    app: AppGridItem;
+}): React.JSX.Element;
+
+export { AppGrid, type AppGridItem, type AppGridProps, AppShell, AppShellBody, AppShellHeader, AppShellMain, type AppShellProps, AppTile, Breadcrumbs, type BreadcrumbsProps, type MatchMode, NavBrand, type NavBrandApp, type NavBrandProps, NavGroup, type NavGroupProps, type NavIcon, NavItem, type NavItemProps, NavSection, type NavSectionProps, NavUser, type NavUserProps, type NavUserThemeLabels, SidebarDock, SidebarPanel, StackedSidebar, TabBar, type TabBarLabels, type TabBarProps, type TabItem, type UseActiveRoute, defaultAppGridLabels, defaultNavBrandAppsLabel, defaultNavUserThemeLabels, defaultTabBarLabels, useActiveRoute };

package/dist/shell/index.js

@@ -1,13 +1,14 @@
 "use client";
-import { SidebarInset, SidebarProvider, Sidebar, SidebarGroup, SidebarGroupLabel, SidebarGroupContent, SidebarMenu, SidebarMenuItem, SidebarMenuButton, useSidebar, defaultAccountMenuLabels, Avatar, AvatarImage, AvatarFallback, initialsOf, ScrollArea, ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ScrollBar, Breadcrumb, BreadcrumbList, BreadcrumbSeparator, BreadcrumbItem, BreadcrumbPage, BreadcrumbLink } from '../chunk-5UAFV75V.js';
+import { SidebarInset, SidebarProvider, Sidebar, SidebarGroup, SidebarGroupLabel, SidebarGroupContent, SidebarMenu, SidebarMenuItem, SidebarMenuButton, useSidebar, defaultAccountMenuLabels, Avatar, AvatarImage, AvatarFallback, initialsOf, ScrollArea, ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ScrollBar, Breadcrumb, BreadcrumbList, BreadcrumbSeparator, BreadcrumbItem, BreadcrumbPage, BreadcrumbLink, InputGroup, InputGroupAddon, InputGroupInput } from '../chunk-UPP56S32.js';
 import '../chunk-QYA2HGKW.js';
-import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, DropdownMenuRadioGroup, DropdownMenuRadioItem } from '../chunk-VEWKPOMS.js';
+import { Card, CardTitle, CardDescription } from '../chunk-ZG5ZPKFL.js';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, DropdownMenuRadioGroup, DropdownMenuRadioItem } from '../chunk-SQA4ILAK.js';
 import { Button } from '../chunk-KFQOYZ64.js';
 import { cn } from '../chunk-XH55BHUU.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
-import { ChevronsUpDown, Palette, Sun, Moon, Monitor, UserRoundCog, LogOut, Pin, X, PinOff, ListX, Trash2, ChevronDown } from 'lucide-react';
+import { ChevronsUpDown, CircleUser, Palette, Sun, Moon, Monitor, UserRoundCog, LogOut, LogIn, Pin, X, PinOff, ListX, Trash2, ChevronDown, Search } from 'lucide-react';
 import { useTheme } from 'next-themes';
 import { useRef, useEffect, Fragment as Fragment$1 } from 'react';
 
@@ -128,7 +129,7 @@ function NavSection({ label, items }) {
 var defaultNavBrandAppsLabel = "Applications";
 function BrandContent({ app }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { className: "bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg [&_svg]:size-4", children: app.icon }),
+    /* @__PURE__ */ jsx("div", { className: "bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-none [&_svg]:size-4", children: app.icon }),
     /* @__PURE__ */ jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
       /* @__PURE__ */ jsx("span", { className: "truncate font-semibold", children: app.name }),
       app.description ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground truncate text-xs", children: app.description }) : null
@@ -159,14 +160,14 @@ function NavBrand({
     /* @__PURE__ */ jsxs(
       DropdownMenuContent,
       {
-        className: "w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg",
+        className: "w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-none",
         align: "start",
         side: isMobile ? "bottom" : "right",
         sideOffset: 4,
         children: [
           /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "text-muted-foreground text-xs", children: appsLabel }),
           apps?.map((item) => /* @__PURE__ */ jsx(DropdownMenuItem, { asChild: true, className: "gap-2 p-2", children: /* @__PURE__ */ jsxs("a", { href: item.href, children: [
-            /* @__PURE__ */ jsx("div", { className: "flex size-6 items-center justify-center rounded-md border [&_svg]:size-3.5", children: item.icon }),
+            /* @__PURE__ */ jsx("div", { className: "flex size-6 items-center justify-center rounded-none border [&_svg]:size-3.5", children: item.icon }),
             /* @__PURE__ */ jsx("span", { className: "truncate", children: item.name })
           ] }) }, item.href)),
           children ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -194,6 +195,7 @@ function NavUser({
   labels,
   onSwitchAccount,
   onSignOut,
+  onSignIn,
   showTheme = true,
   themeLabels,
   children
@@ -202,9 +204,26 @@ function NavUser({
   const { theme, setTheme } = useTheme();
   const l = { ...defaultAccountMenuLabels, ...labels };
   const t = { ...defaultNavUserThemeLabels, ...themeLabels };
-  if (!user) return null;
-  const name = user.name ?? user.email ?? l.account;
-  const email = user.email ?? "";
+  if (!user && !onSignIn) return null;
+  const name = user ? user.name ?? user.email ?? l.account : l.guest;
+  const email = user?.email ?? "";
+  const avatar = /* @__PURE__ */ jsxs(Avatar, { className: "size-8 rounded-lg", children: [
+    user?.image ? /* @__PURE__ */ jsx(AvatarImage, { src: user.image, alt: name }) : null,
+    /* @__PURE__ */ jsx(AvatarFallback, { className: "rounded-lg", children: user ? initialsOf(name) : /* @__PURE__ */ jsx(CircleUser, { className: "size-4" }) })
+  ] });
+  const themeSubmenu = showTheme ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+    /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [
+      /* @__PURE__ */ jsxs(DropdownMenuSubTrigger, { children: [
+        /* @__PURE__ */ jsx(Palette, { className: "mr-2 size-4" }),
+        t.theme
+      ] }),
+      /* @__PURE__ */ jsx(DropdownMenuSubContent, { children: /* @__PURE__ */ jsx(DropdownMenuRadioGroup, { value: theme ?? "system", onValueChange: setTheme, children: THEMES.map(({ value, key, icon: Icon }) => /* @__PURE__ */ jsxs(DropdownMenuRadioItem, { value, children: [
+        /* @__PURE__ */ jsx(Icon, { className: "mr-2 size-4" }),
+        t[key]
+      ] }, value)) }) })
+    ] })
+  ] }) : null;
   return /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
     /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
       SidebarMenuButton,
@@ -213,10 +232,7 @@ function NavUser({
         tooltip: name,
         className: "data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground",
         children: [
-          /* @__PURE__ */ jsxs(Avatar, { className: "size-8 rounded-lg", children: [
-            user.image ? /* @__PURE__ */ jsx(AvatarImage, { src: user.image, alt: name }) : null,
-            /* @__PURE__ */ jsx(AvatarFallback, { className: "rounded-lg", children: initialsOf(name) })
-          ] }),
+          avatar,
           /* @__PURE__ */ jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
             /* @__PURE__ */ jsx("span", { className: "truncate font-medium", children: name }),
             email ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground truncate text-xs", children: email }) : null
@@ -234,48 +250,34 @@ function NavUser({
         sideOffset: 4,
         children: [
           /* @__PURE__ */ jsxs(DropdownMenuLabel, { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxs(Avatar, { className: "size-8 rounded-lg", children: [
-              user.image ? /* @__PURE__ */ jsx(AvatarImage, { src: user.image, alt: name }) : null,
-              /* @__PURE__ */ jsx(AvatarFallback, { className: "rounded-lg", children: initialsOf(name) })
-            ] }),
+            avatar,
             /* @__PURE__ */ jsxs("div", { className: "grid flex-1 text-left leading-tight", children: [
               /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium", children: name }),
               email ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground truncate text-xs font-normal", children: email }) : null
             ] })
           ] }),
-          showTheme ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-            /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [
-              /* @__PURE__ */ jsxs(DropdownMenuSubTrigger, { children: [
-                /* @__PURE__ */ jsx(Palette, { className: "mr-2 size-4" }),
-                t.theme
-              ] }),
-              /* @__PURE__ */ jsx(DropdownMenuSubContent, { children: /* @__PURE__ */ jsx(
-                DropdownMenuRadioGroup,
-                {
-                  value: theme ?? "system",
-                  onValueChange: setTheme,
-                  children: THEMES.map(({ value, key, icon: Icon }) => /* @__PURE__ */ jsxs(DropdownMenuRadioItem, { value, children: [
-                    /* @__PURE__ */ jsx(Icon, { className: "mr-2 size-4" }),
-                    t[key]
-                  ] }, value))
-                }
-              ) })
-            ] })
-          ] }) : null,
+          themeSubmenu,
           children ? /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
             children
           ] }) : null,
-          onSwitchAccount || onSignOut ? /* @__PURE__ */ jsx(DropdownMenuSeparator, {}) : null,
-          onSwitchAccount ? /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: onSwitchAccount, children: [
-            /* @__PURE__ */ jsx(UserRoundCog, { className: "mr-2 size-4" }),
-            l.switchAccount
-          ] }) : null,
-          onSignOut ? /* @__PURE__ */ jsxs(DropdownMenuItem, { variant: "destructive", onSelect: onSignOut, children: [
-            /* @__PURE__ */ jsx(LogOut, { className: "mr-2 size-4" }),
-            l.signOut
-          ] }) : null
+          user ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            onSwitchAccount || onSignOut ? /* @__PURE__ */ jsx(DropdownMenuSeparator, {}) : null,
+            onSwitchAccount ? /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: onSwitchAccount, children: [
+              /* @__PURE__ */ jsx(UserRoundCog, { className: "mr-2 size-4" }),
+              l.switchAccount
+            ] }) : null,
+            onSignOut ? /* @__PURE__ */ jsxs(DropdownMenuItem, { variant: "destructive", onSelect: onSignOut, children: [
+              /* @__PURE__ */ jsx(LogOut, { className: "mr-2 size-4" }),
+              l.signOut
+            ] }) : null
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+            /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: onSignIn, children: [
+              /* @__PURE__ */ jsx(LogIn, { className: "mr-2 size-4" }),
+              l.signIn
+            ] })
+          ] })
         ]
       }
     )
@@ -499,7 +501,65 @@ function Breadcrumbs({ separator, labels, ...rest }) {
     ] }, href);
   }) }) });
 }
+var defaultAppGridLabels = {
+  searchPlaceholder: "Search apps\u2026",
+  empty: "No apps found."
+};
+function AppGrid({
+  apps,
+  query,
+  onQueryChange,
+  searchPlaceholder = defaultAppGridLabels.searchPlaceholder,
+  autoFocusSearch = false,
+  emptyLabel = defaultAppGridLabels.empty,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-8", className), children: [
+    onQueryChange ? /* @__PURE__ */ jsxs(InputGroup, { className: "mx-auto h-10 max-w-md", children: [
+      /* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(Search, {}) }),
+      /* @__PURE__ */ jsx(
+        InputGroupInput,
+        {
+          type: "search",
+          value: query ?? "",
+          onChange: (e) => onQueryChange(e.target.value),
+          placeholder: searchPlaceholder,
+          "aria-label": searchPlaceholder,
+          autoFocus: autoFocusSearch
+        }
+      )
+    ] }) : null,
+    apps.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground py-16 text-center text-sm", children: emptyLabel }) : /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4", children: apps.map((app) => /* @__PURE__ */ jsx(AppTile, { app }, app.key)) })
+  ] });
+}
+function AppTile({ app }) {
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      href: app.href,
+      target: app.external ? "_blank" : void 0,
+      rel: app.external ? "noreferrer" : void 0,
+      className: "focus-visible:ring-ring group rounded-none outline-none focus-visible:ring-2",
+      children: /* @__PURE__ */ jsxs(Card, { className: "h-full items-center gap-4 px-6 py-8 text-center transition-all duration-200 group-hover:-translate-y-0.5 group-hover:shadow-md group-hover:ring-foreground/30", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex size-14 items-center justify-center rounded-none ring-1 ring-foreground/5 ring-inset transition-transform duration-200 group-hover:scale-105 [&_svg]:size-7",
+              app.accent
+            ),
+            children: app.icon
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx(CardTitle, { children: app.name }),
+          app.description ? /* @__PURE__ */ jsx(CardDescription, { className: "line-clamp-2", children: app.description }) : null
+        ] })
+      ] })
+    }
+  );
+}
 
-export { AppShell, AppShellBody, AppShellHeader, AppShellMain, Breadcrumbs, NavBrand, NavGroup, NavItem, NavSection, NavUser, SidebarDock, SidebarPanel, StackedSidebar, TabBar, defaultNavBrandAppsLabel, defaultNavUserThemeLabels, defaultTabBarLabels, useActiveRoute };
+export { AppGrid, AppShell, AppShellBody, AppShellHeader, AppShellMain, AppTile, Breadcrumbs, NavBrand, NavGroup, NavItem, NavSection, NavUser, SidebarDock, SidebarPanel, StackedSidebar, TabBar, defaultAppGridLabels, defaultNavBrandAppsLabel, defaultNavUserThemeLabels, defaultTabBarLabels, useActiveRoute };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map