@almadar/ui 4.30.0 → 4.32.0

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.
@@ -17380,255 +17380,265 @@ var init_DashboardLayout = __esm({
17380
17380
  const user = userProp || (null);
17381
17381
  const { t } = useTranslate();
17382
17382
  const handleSignOut = onSignOutProp || authSignOut;
17383
- return /* @__PURE__ */ jsxs(Box, { className: "min-h-screen bg-background dark:bg-background", children: [
17384
- sidebarOpen && /* @__PURE__ */ jsx(
17385
- Box,
17386
- {
17387
- className: "fixed inset-0 bg-foreground/50 dark:bg-foreground/70 z-20 lg:hidden",
17388
- onClick: () => setSidebarOpen(false)
17389
- }
17390
- ),
17391
- /* @__PURE__ */ jsxs(
17392
- Box,
17393
- {
17394
- as: "aside",
17395
- className: cn(
17396
- "fixed inset-y-0 left-0 z-30 w-64 bg-card dark:bg-card border-r border-border dark:border-border",
17397
- "transform transition-transform duration-200 ease-in-out lg:translate-x-0",
17398
- sidebarOpen ? "translate-x-0" : "-translate-x-full"
17383
+ return /* @__PURE__ */ jsxs(
17384
+ HStack,
17385
+ {
17386
+ gap: "none",
17387
+ className: "min-h-screen w-full bg-background dark:bg-background items-stretch",
17388
+ children: [
17389
+ sidebarOpen && /* @__PURE__ */ jsx(
17390
+ Box,
17391
+ {
17392
+ className: "fixed inset-0 bg-foreground/50 dark:bg-foreground/70 z-20 lg:hidden",
17393
+ onClick: () => setSidebarOpen(false)
17394
+ }
17399
17395
  ),
17400
- children: [
17401
- /* @__PURE__ */ jsxs(
17402
- HStack,
17403
- {
17404
- align: "center",
17405
- justify: "between",
17406
- className: "h-16 px-4 border-b border-border dark:border-border",
17407
- children: [
17408
- /* @__PURE__ */ jsxs(Link, { to: "/", className: "flex items-center gap-2", children: [
17409
- logo || /* @__PURE__ */ jsx(Box, { className: "w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsx(
17410
- Typography,
17411
- {
17412
- variant: "small",
17413
- className: "text-white font-bold text-sm",
17414
- as: "span",
17415
- children: appName.charAt(0).toUpperCase()
17416
- }
17417
- ) }),
17418
- /* @__PURE__ */ jsx(
17419
- Typography,
17420
- {
17421
- variant: "label",
17422
- className: "font-semibold text-foreground dark:text-foreground",
17423
- as: "span",
17424
- children: appName
17425
- }
17426
- )
17427
- ] }),
17428
- /* @__PURE__ */ jsx(
17429
- Button,
17430
- {
17431
- variant: "ghost",
17432
- className: "lg:hidden p-2 rounded-md hover:bg-muted dark:hover:bg-muted text-muted-foreground dark:text-muted-foreground",
17433
- onClick: () => setSidebarOpen(false),
17434
- children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5" })
17435
- }
17436
- )
17437
- ]
17438
- }
17439
- ),
17440
- /* @__PURE__ */ jsx(
17441
- VStack,
17442
- {
17443
- as: "nav",
17444
- gap: "none",
17445
- className: "flex-1 px-3 py-4 space-y-1 overflow-y-auto",
17446
- children: navItems.map((item) => /* @__PURE__ */ jsx(
17447
- NavLink,
17396
+ /* @__PURE__ */ jsxs(
17397
+ Box,
17398
+ {
17399
+ as: "aside",
17400
+ className: cn(
17401
+ "z-30 w-64 flex-shrink-0 bg-card dark:bg-card border-r border-border dark:border-border",
17402
+ "fixed inset-y-0 left-0 lg:static lg:translate-x-0 lg:h-auto",
17403
+ "transform transition-transform duration-200 ease-in-out",
17404
+ "flex flex-col",
17405
+ sidebarOpen ? "translate-x-0" : "-translate-x-full"
17406
+ ),
17407
+ children: [
17408
+ /* @__PURE__ */ jsxs(
17409
+ HStack,
17448
17410
  {
17449
- item,
17450
- currentPath: location.pathname
17451
- },
17452
- item.href
17453
- ))
17454
- }
17455
- ),
17456
- sidebarFooter && /* @__PURE__ */ jsx(Box, { className: "p-4 border-t border-border dark:border-border", children: sidebarFooter })
17457
- ]
17458
- }
17459
- ),
17460
- /* @__PURE__ */ jsxs(Box, { className: "lg:pl-64", children: [
17461
- /* @__PURE__ */ jsx(
17462
- Box,
17463
- {
17464
- as: "header",
17465
- className: "sticky top-0 z-20 h-16 bg-card dark:bg-card border-b border-border dark:border-border",
17466
- children: /* @__PURE__ */ jsxs(
17467
- HStack,
17468
- {
17469
- align: "center",
17470
- justify: "between",
17471
- className: "h-full px-4 gap-4",
17472
- children: [
17473
- /* @__PURE__ */ jsx(
17474
- Button,
17475
- {
17476
- variant: "ghost",
17477
- className: "lg:hidden p-2 rounded-md hover:bg-muted dark:hover:bg-muted text-muted-foreground dark:text-muted-foreground touch-manipulation min-h-[44px] min-w-[44px] flex items-center justify-center",
17478
- onClick: () => setSidebarOpen(true),
17479
- "aria-label": "Open sidebar",
17480
- children: /* @__PURE__ */ jsx(Menu$1, { className: "h-5 w-5" })
17481
- }
17482
- ),
17483
- searchEnabled && /* @__PURE__ */ jsx(Box, { className: "hidden sm:block flex-1 max-w-md", children: /* @__PURE__ */ jsxs(Box, { className: "relative", children: [
17484
- /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground dark:text-muted-foreground" }),
17485
- /* @__PURE__ */ jsx(
17486
- Input,
17487
- {
17488
- type: "search",
17489
- placeholder: t("common.search"),
17490
- className: "pl-10 w-full",
17491
- onKeyDown: (e) => {
17492
- if (e.key === "Enter") {
17493
- handleSearchSubmit(e.target.value);
17411
+ align: "center",
17412
+ justify: "between",
17413
+ className: "h-16 px-4 border-b border-border dark:border-border",
17414
+ children: [
17415
+ /* @__PURE__ */ jsxs(Link, { to: "/", className: "flex items-center gap-2", children: [
17416
+ logo || /* @__PURE__ */ jsx(Box, { className: "w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsx(
17417
+ Typography,
17418
+ {
17419
+ variant: "small",
17420
+ className: "text-white font-bold text-sm",
17421
+ as: "span",
17422
+ children: appName.charAt(0).toUpperCase()
17423
+ }
17424
+ ) }),
17425
+ /* @__PURE__ */ jsx(
17426
+ Typography,
17427
+ {
17428
+ variant: "label",
17429
+ className: "font-semibold text-foreground dark:text-foreground",
17430
+ as: "span",
17431
+ children: appName
17494
17432
  }
17433
+ )
17434
+ ] }),
17435
+ /* @__PURE__ */ jsx(
17436
+ Button,
17437
+ {
17438
+ variant: "ghost",
17439
+ className: "lg:hidden p-2 rounded-md hover:bg-muted dark:hover:bg-muted text-muted-foreground dark:text-muted-foreground",
17440
+ onClick: () => setSidebarOpen(false),
17441
+ children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5" })
17495
17442
  }
17496
- }
17497
- )
17498
- ] }) }),
17499
- /* @__PURE__ */ jsxs(HStack, { align: "center", gap: "xs", children: [
17500
- headerActions,
17501
- showThemeToggle && /* @__PURE__ */ jsx(ThemeToggle, {}),
17502
- topBarActions.map((action, idx) => /* @__PURE__ */ jsxs(
17503
- Button,
17443
+ )
17444
+ ]
17445
+ }
17446
+ ),
17447
+ /* @__PURE__ */ jsx(
17448
+ VStack,
17449
+ {
17450
+ as: "nav",
17451
+ gap: "none",
17452
+ className: "flex-1 px-3 py-4 space-y-1 overflow-y-auto",
17453
+ children: navItems.map((item) => /* @__PURE__ */ jsx(
17454
+ NavLink,
17504
17455
  {
17505
- variant: "ghost",
17506
- className: "relative p-2 rounded-full hover:bg-muted dark:hover:bg-muted",
17507
- onClick: () => handleTopBarActionClick(action.event),
17508
- "aria-label": action.label ?? action.icon,
17509
- children: [
17510
- /* @__PURE__ */ jsx(Icon, { name: action.icon, className: "h-5 w-5 text-muted-foreground dark:text-muted-foreground" }),
17511
- action.badge !== void 0 && action.badge !== null && action.badge !== 0 && action.badge !== "" && /* @__PURE__ */ jsx(
17512
- Box,
17513
- {
17514
- as: "span",
17515
- className: cn(
17516
- "absolute -top-0.5 -right-0.5 min-w-[18px] h-[18px] px-1 rounded-full text-[10px] font-semibold text-white flex items-center justify-center",
17517
- action.variant === "danger" ? "bg-error" : action.variant === "primary" ? "bg-primary" : "bg-foreground"
17518
- ),
17519
- children: action.badge
17520
- }
17521
- )
17522
- ]
17456
+ item,
17457
+ currentPath: location.pathname
17523
17458
  },
17524
- `${action.event}-${idx}`
17525
- )),
17526
- notificationsEnabled && /* @__PURE__ */ jsxs(
17527
- Button,
17528
- {
17529
- variant: "ghost",
17530
- className: "relative p-2 rounded-full hover:bg-muted dark:hover:bg-muted",
17531
- onClick: handleNotificationClick,
17532
- "aria-label": t("common.notifications"),
17533
- children: [
17534
- /* @__PURE__ */ jsx(Bell, { className: "h-5 w-5 text-muted-foreground dark:text-muted-foreground" }),
17535
- unreadCount > 0 && /* @__PURE__ */ jsx(
17536
- Box,
17537
- {
17538
- as: "span",
17539
- className: "absolute -top-0.5 -right-0.5 min-w-[18px] h-[18px] px-1 bg-error rounded-full text-[10px] font-semibold text-white flex items-center justify-center",
17540
- children: unreadCount > 99 ? "99+" : unreadCount
17541
- }
17542
- )
17543
- ]
17544
- }
17545
- ),
17546
- user && /* @__PURE__ */ jsxs(Box, { className: "relative", children: [
17547
- /* @__PURE__ */ jsxs(
17459
+ item.href
17460
+ ))
17461
+ }
17462
+ ),
17463
+ sidebarFooter && /* @__PURE__ */ jsx(Box, { className: "p-4 border-t border-border dark:border-border", children: sidebarFooter })
17464
+ ]
17465
+ }
17466
+ ),
17467
+ /* @__PURE__ */ jsxs(VStack, { gap: "none", className: "flex-1 min-w-0 min-h-screen", children: [
17468
+ /* @__PURE__ */ jsx(
17469
+ Box,
17470
+ {
17471
+ as: "header",
17472
+ className: "sticky top-0 z-20 h-16 bg-card dark:bg-card border-b border-border dark:border-border",
17473
+ children: /* @__PURE__ */ jsxs(
17474
+ HStack,
17475
+ {
17476
+ align: "center",
17477
+ justify: "between",
17478
+ className: "h-full px-3 sm:px-4 gap-2 sm:gap-4",
17479
+ children: [
17480
+ /* @__PURE__ */ jsx(
17548
17481
  Button,
17549
17482
  {
17550
17483
  variant: "ghost",
17551
- className: "flex items-center gap-2 p-2 rounded-lg hover:bg-muted dark:hover:bg-muted",
17552
- onClick: () => setUserMenuOpen(!userMenuOpen),
17553
- children: [
17554
- /* @__PURE__ */ jsx(
17555
- Avatar,
17556
- {
17557
- src: user.avatar,
17558
- alt: user.name,
17559
- initials: user.name.split(" ").map((n) => n[0]).join("").substring(0, 2),
17560
- size: "sm"
17561
- }
17562
- ),
17563
- /* @__PURE__ */ jsx(
17564
- Typography,
17565
- {
17566
- variant: "small",
17567
- className: "hidden sm:block text-sm font-medium text-foreground dark:text-foreground",
17568
- as: "span",
17569
- children: user.name
17570
- }
17571
- ),
17572
- /* @__PURE__ */ jsx(ChevronDown, { className: "hidden sm:block h-4 w-4 text-muted-foreground dark:text-muted-foreground" })
17573
- ]
17484
+ className: "lg:hidden p-2 rounded-md hover:bg-muted dark:hover:bg-muted text-muted-foreground dark:text-muted-foreground touch-manipulation min-h-[44px] min-w-[44px] flex items-center justify-center",
17485
+ onClick: () => setSidebarOpen(true),
17486
+ "aria-label": "Open sidebar",
17487
+ children: /* @__PURE__ */ jsx(Menu$1, { className: "h-5 w-5" })
17574
17488
  }
17575
17489
  ),
17576
- userMenuOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
17490
+ searchEnabled && /* @__PURE__ */ jsx(Box, { className: "hidden sm:block flex-1 min-w-0 xl:max-w-md", children: /* @__PURE__ */ jsxs(Box, { className: "relative", children: [
17491
+ /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground dark:text-muted-foreground" }),
17577
17492
  /* @__PURE__ */ jsx(
17578
- Box,
17493
+ Input,
17494
+ {
17495
+ type: "search",
17496
+ placeholder: t("common.search"),
17497
+ className: "pl-10 w-full",
17498
+ onKeyDown: (e) => {
17499
+ if (e.key === "Enter") {
17500
+ handleSearchSubmit(e.target.value);
17501
+ }
17502
+ }
17503
+ }
17504
+ )
17505
+ ] }) }),
17506
+ !searchEnabled && /* @__PURE__ */ jsx(Box, { className: "flex-1" }),
17507
+ /* @__PURE__ */ jsxs(HStack, { align: "center", gap: "xs", children: [
17508
+ headerActions,
17509
+ showThemeToggle && /* @__PURE__ */ jsx(ThemeToggle, {}),
17510
+ topBarActions.map((action, idx) => /* @__PURE__ */ jsxs(
17511
+ Button,
17512
+ {
17513
+ variant: "ghost",
17514
+ className: "relative p-2 rounded-full hover:bg-muted dark:hover:bg-muted",
17515
+ onClick: () => handleTopBarActionClick(action.event),
17516
+ "aria-label": action.label ?? action.icon,
17517
+ children: [
17518
+ /* @__PURE__ */ jsx(Icon, { name: action.icon, className: "h-5 w-5 text-muted-foreground dark:text-muted-foreground" }),
17519
+ action.badge !== void 0 && action.badge !== null && action.badge !== 0 && action.badge !== "" && /* @__PURE__ */ jsx(
17520
+ Box,
17521
+ {
17522
+ as: "span",
17523
+ className: cn(
17524
+ "absolute -top-0.5 -right-0.5 min-w-[18px] h-[18px] px-1 rounded-full text-[10px] font-semibold text-white flex items-center justify-center",
17525
+ action.variant === "danger" ? "bg-error" : action.variant === "primary" ? "bg-primary" : "bg-foreground"
17526
+ ),
17527
+ children: action.badge
17528
+ }
17529
+ )
17530
+ ]
17531
+ },
17532
+ `${action.event}-${idx}`
17533
+ )),
17534
+ notificationsEnabled && /* @__PURE__ */ jsxs(
17535
+ Button,
17579
17536
  {
17580
- className: "fixed inset-0 z-20",
17581
- onClick: () => setUserMenuOpen(false)
17537
+ variant: "ghost",
17538
+ className: "relative p-2 rounded-full hover:bg-muted dark:hover:bg-muted",
17539
+ onClick: handleNotificationClick,
17540
+ "aria-label": t("common.notifications"),
17541
+ children: [
17542
+ /* @__PURE__ */ jsx(Bell, { className: "h-5 w-5 text-muted-foreground dark:text-muted-foreground" }),
17543
+ unreadCount > 0 && /* @__PURE__ */ jsx(
17544
+ Box,
17545
+ {
17546
+ as: "span",
17547
+ className: "absolute -top-0.5 -right-0.5 min-w-[18px] h-[18px] px-1 bg-error rounded-full text-[10px] font-semibold text-white flex items-center justify-center",
17548
+ children: unreadCount > 99 ? "99+" : unreadCount
17549
+ }
17550
+ )
17551
+ ]
17582
17552
  }
17583
17553
  ),
17584
- /* @__PURE__ */ jsxs(Box, { className: "absolute right-0 mt-2 w-48 bg-card dark:bg-card rounded-lg shadow-lg border border-border dark:border-border py-1 z-30", children: [
17585
- /* @__PURE__ */ jsxs(Box, { className: "px-4 py-2 border-b border-border dark:border-border", children: [
17586
- /* @__PURE__ */ jsx(
17587
- Typography,
17588
- {
17589
- variant: "small",
17590
- className: "text-sm font-medium text-foreground dark:text-foreground",
17591
- as: "p",
17592
- children: user.name
17593
- }
17594
- ),
17595
- /* @__PURE__ */ jsx(
17596
- Typography,
17597
- {
17598
- variant: "caption",
17599
- className: "text-xs text-muted-foreground dark:text-muted-foreground",
17600
- as: "p",
17601
- children: user.email
17602
- }
17603
- )
17604
- ] }),
17554
+ user && /* @__PURE__ */ jsxs(Box, { className: "relative", children: [
17605
17555
  /* @__PURE__ */ jsxs(
17606
17556
  Button,
17607
17557
  {
17608
17558
  variant: "ghost",
17609
- onClick: () => {
17610
- setUserMenuOpen(false);
17611
- handleSignOut?.();
17612
- },
17613
- className: "w-full flex items-center gap-2 px-4 py-2 text-sm text-error dark:text-error hover:bg-error/10 dark:hover:bg-error/20",
17559
+ className: "flex items-center gap-2 p-2 rounded-lg hover:bg-muted dark:hover:bg-muted",
17560
+ onClick: () => setUserMenuOpen(!userMenuOpen),
17614
17561
  children: [
17615
- /* @__PURE__ */ jsx(LogOut, { className: "h-4 w-4" }),
17616
- t("auth.signOut")
17562
+ /* @__PURE__ */ jsx(
17563
+ Avatar,
17564
+ {
17565
+ src: user.avatar,
17566
+ alt: user.name,
17567
+ initials: user.name.split(" ").map((n) => n[0]).join("").substring(0, 2),
17568
+ size: "sm"
17569
+ }
17570
+ ),
17571
+ /* @__PURE__ */ jsx(
17572
+ Typography,
17573
+ {
17574
+ variant: "small",
17575
+ className: "hidden sm:block text-sm font-medium text-foreground dark:text-foreground",
17576
+ as: "span",
17577
+ children: user.name
17578
+ }
17579
+ ),
17580
+ /* @__PURE__ */ jsx(ChevronDown, { className: "hidden sm:block h-4 w-4 text-muted-foreground dark:text-muted-foreground" })
17617
17581
  ]
17618
17582
  }
17619
- )
17583
+ ),
17584
+ userMenuOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
17585
+ /* @__PURE__ */ jsx(
17586
+ Box,
17587
+ {
17588
+ className: "fixed inset-0 z-20",
17589
+ onClick: () => setUserMenuOpen(false)
17590
+ }
17591
+ ),
17592
+ /* @__PURE__ */ jsxs(Box, { className: "absolute right-0 mt-2 w-48 bg-card dark:bg-card rounded-lg shadow-lg border border-border dark:border-border py-1 z-30", children: [
17593
+ /* @__PURE__ */ jsxs(Box, { className: "px-4 py-2 border-b border-border dark:border-border", children: [
17594
+ /* @__PURE__ */ jsx(
17595
+ Typography,
17596
+ {
17597
+ variant: "small",
17598
+ className: "text-sm font-medium text-foreground dark:text-foreground",
17599
+ as: "p",
17600
+ children: user.name
17601
+ }
17602
+ ),
17603
+ /* @__PURE__ */ jsx(
17604
+ Typography,
17605
+ {
17606
+ variant: "caption",
17607
+ className: "text-xs text-muted-foreground dark:text-muted-foreground",
17608
+ as: "p",
17609
+ children: user.email
17610
+ }
17611
+ )
17612
+ ] }),
17613
+ /* @__PURE__ */ jsxs(
17614
+ Button,
17615
+ {
17616
+ variant: "ghost",
17617
+ onClick: () => {
17618
+ setUserMenuOpen(false);
17619
+ handleSignOut?.();
17620
+ },
17621
+ className: "w-full flex items-center gap-2 px-4 py-2 text-sm text-error dark:text-error hover:bg-error/10 dark:hover:bg-error/20",
17622
+ children: [
17623
+ /* @__PURE__ */ jsx(LogOut, { className: "h-4 w-4" }),
17624
+ t("auth.signOut")
17625
+ ]
17626
+ }
17627
+ )
17628
+ ] })
17629
+ ] })
17620
17630
  ] })
17621
17631
  ] })
17622
- ] })
17623
- ] })
17624
- ]
17632
+ ]
17633
+ }
17634
+ )
17625
17635
  }
17626
- )
17627
- }
17628
- ),
17629
- /* @__PURE__ */ jsx(Box, { as: "main", className: "p-4 sm:p-6", children })
17630
- ] })
17631
- ] });
17636
+ ),
17637
+ /* @__PURE__ */ jsx(Box, { as: "main", className: "flex-1 p-3 sm:p-4 md:p-6", children })
17638
+ ] })
17639
+ ]
17640
+ }
17641
+ );
17632
17642
  };
17633
17643
  DashboardLayout.displayName = "DashboardLayout";
17634
17644
  NavLink = ({
@@ -5,7 +5,7 @@
5
5
  *
6
6
  * @packageDocumentation
7
7
  */
8
- import type { EventPayload } from '@almadar/core';
8
+ import type { EventPayload, ServiceParams } from '@almadar/core';
9
9
  import type { EffectHandlers } from '@almadar/runtime';
10
10
  export interface ClientEventBus {
11
11
  emit: (type: string, payload?: EventPayload) => void;
@@ -19,5 +19,13 @@ export interface CreateClientEffectHandlersOptions {
19
19
  slotSetter: SlotSetter;
20
20
  navigate?: (path: string, params?: Record<string, unknown>) => void;
21
21
  notify?: (message: string, type: 'success' | 'error' | 'warning' | 'info') => void;
22
+ /**
23
+ * Optional consumer-supplied call-service handler. When set, it runs
24
+ * instead of the default mock fallback — use to wire the playground
25
+ * to real backends. When omitted, `callService` returns a synthetic
26
+ * mock result so service-atom chains advance end-to-end in offline /
27
+ * standalone-preview mode (see OrbitalServerRuntime's mock parallel).
28
+ */
29
+ callService?: (service: string, action: string, params?: ServiceParams) => Promise<unknown>;
22
30
  }
23
31
  export declare function createClientEffectHandlers(options: CreateClientEffectHandlersOptions): EffectHandlers;