@lattice-php/lattice 0.24.0 → 0.26.0

package/dist/lattice.css

@@ -1,49 +1,83 @@
 @source "./**/*.js";
 
-:root,
-[data-theme="light"] {
-  --lt-bg: var(--background, oklch(0.97 0 0));
-  --lt-fg: var(--foreground, oklch(0.145 0 0));
-  --lt-surface: var(--card, oklch(1 0 0));
-  --lt-surface-fg: var(--card-foreground, oklch(0.145 0 0));
-  --lt-popover: var(--popover, oklch(1 0 0));
-  --lt-popover-fg: var(--popover-foreground, oklch(0.145 0 0));
-  --lt-primary: var(--primary, oklch(0.48 0.092 182));
-  --lt-primary-fg: var(--primary-foreground, oklch(0.985 0 0));
-  --lt-secondary: var(--secondary, oklch(0.97 0 0));
-  --lt-secondary-fg: var(--secondary-foreground, oklch(0.205 0 0));
-  --lt-muted: var(--muted, oklch(0.97 0 0));
-  --lt-muted-fg: var(--muted-foreground, oklch(0.556 0 0));
-  --lt-accent: var(--accent, oklch(0.965 0.013 182));
-  --lt-accent-fg: var(--accent-foreground, oklch(0.4 0.07 182));
-  --lt-danger: var(--destructive, oklch(0.585 0.21 27.3));
-  --lt-danger-fg: var(--destructive-foreground, oklch(0.985 0 0));
-  --lt-border: var(--border, oklch(0.922 0 0));
-  --lt-input: var(--input, oklch(0.922 0 0));
-  --lt-ring: var(--ring, oklch(0.72 0.075 182));
-  --lt-overlay: var(--overlay, oklch(0 0 0 / 0.5));
-  --lt-warning: var(--warning, oklch(0.84 0.14 88));
-  --lt-success: var(--success, oklch(0.62 0.125 160));
-  --lt-success-fg: var(--success-foreground, oklch(0.985 0 0));
-  --lt-info: var(--info, oklch(0.62 0.14 240));
-  --lt-info-fg: var(--info-foreground, oklch(0.985 0 0));
-  --lt-primary-hover: var(--primary-hover, oklch(0.43 0.092 182));
-  --lt-primary-active: var(--primary-active, oklch(0.39 0.092 182));
-  --lt-danger-hover: var(--destructive-hover, oklch(0.53 0.21 27.3));
-  --lt-danger-active: var(--destructive-active, oklch(0.48 0.21 27.3));
-  --lt-success-hover: var(--success-hover, oklch(0.57 0.125 160));
-  --lt-success-active: var(--success-active, oklch(0.52 0.125 160));
-  --lt-info-hover: var(--info-hover, oklch(0.57 0.14 240));
-  --lt-info-active: var(--info-active, oklch(0.52 0.14 240));
-  --lt-secondary-hover: var(--secondary-hover, oklch(0.93 0 0));
-  --lt-secondary-active: var(--secondary-active, oklch(0.9 0 0));
-  --lt-disabled: var(--disabled, oklch(0.95 0 0));
-  --lt-disabled-fg: var(--disabled-foreground, oklch(0.7 0 0));
+/*
+ * Token defaults live in a cascade layer so any unlayered override wins
+ * regardless of stylesheet order — the @latticeTheme style tag and plain
+ * `:root { --lt-primary: … }` rules in an app's CSS both take precedence.
+ */
+@layer lattice {
+  :root,
+  [data-theme="light"] {
+  --lt-bg: oklch(0.976 0.003 210);
+  --lt-fg: oklch(0.18 0.01 220);
+  --lt-surface: oklch(1 0 0);
+  --lt-surface-fg: oklch(0.18 0.01 220);
+  --lt-popover: oklch(1 0 0);
+  --lt-popover-fg: oklch(0.18 0.01 220);
+  --lt-primary: oklch(0.51 0.12 195);
+  --lt-primary-fg: oklch(0.985 0 0);
+  --lt-secondary: oklch(0.955 0.005 210);
+  --lt-secondary-fg: oklch(0.25 0.012 220);
+  --lt-muted: oklch(0.955 0.004 210);
+  --lt-muted-fg: oklch(0.52 0.015 220);
+  --lt-accent: oklch(0.95 0.024 195);
+  --lt-accent-fg: oklch(0.36 0.085 195);
+  --lt-danger: oklch(0.55 0.2 26);
+  --lt-danger-fg: oklch(0.985 0 0);
+  --lt-border: oklch(0.915 0.005 210);
+  --lt-input: oklch(0.88 0.007 210);
+  --lt-ring: oklch(0.7 0.1 195);
+  --lt-overlay: oklch(0.15 0.02 225 / 0.5);
+  --lt-warning: oklch(0.83 0.15 85);
+  --lt-success: oklch(0.56 0.13 158);
+  --lt-success-fg: oklch(0.985 0 0);
+  --lt-info: oklch(0.55 0.13 245);
+  --lt-info-fg: oklch(0.985 0 0);
+  --lt-primary-hover: oklch(0.46 0.12 195);
+  --lt-primary-active: oklch(0.41 0.12 195);
+  --lt-danger-hover: oklch(0.5 0.2 26);
+  --lt-danger-active: oklch(0.45 0.2 26);
+  --lt-success-hover: oklch(0.51 0.13 158);
+  --lt-success-active: oklch(0.47 0.13 158);
+  --lt-info-hover: oklch(0.5 0.13 245);
+  --lt-info-active: oklch(0.46 0.13 245);
+  --lt-warning-hover: oklch(0.78 0.15 85);
+  --lt-warning-active: oklch(0.73 0.15 85);
+  --lt-secondary-hover: oklch(0.925 0.006 210);
+  --lt-secondary-active: oklch(0.9 0.007 210);
+  --lt-disabled: oklch(0.945 0.003 210);
+  --lt-disabled-fg: oklch(0.68 0.008 220);
 
   /* Radius: base = cards, -sm = controls, -xs = chips */
-  --lt-radius: var(--radius, 0.5rem);
+  --lt-radius: 0.5rem;
   --lt-radius-sm: calc(var(--lt-radius) - 0.125rem);
   --lt-radius-xs: calc(var(--lt-radius) - 0.25rem);
+  --lt-radius-lg: calc(var(--lt-radius) + 0.25rem);
+  --lt-radius-xl: calc(var(--lt-radius) + 0.5rem);
+  --lt-radius-full: 9999px;
+
+  --lt-ring-width: 3px;
+  --lt-ring-offset: 0px;
+
+  --lt-font-sans:
+    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
+  --lt-font-mono: ui-monospace, "SFMono-Regular", "Menlo", monospace;
+  --lt-font-display: var(--lt-font-sans);
+
+  --lt-warning-fg: oklch(0.28 0.06 70);
+
+  --lt-shadow-inner: inset 0 1px 2px 0 oklch(0.2 0.02 225 / 0.06);
+
+  --lt-chart-1: oklch(0.55 0.12 195);
+  --lt-chart-2: oklch(0.58 0.14 250);
+  --lt-chart-3: oklch(0.68 0.14 60);
+  --lt-chart-4: oklch(0.58 0.19 305);
+  --lt-chart-5: oklch(0.6 0.16 20);
+  --lt-chart-6: oklch(0.62 0.13 150);
+  --lt-chart-7: oklch(0.6 0.13 100);
+  --lt-chart-8: oklch(0.55 0.05 280);
 
   --lt-icon-xs: 0.75rem;
   --lt-icon-sm: 0.875rem;
@@ -69,12 +103,12 @@
   --lt-font-weight-semibold: 600;
   --lt-font-weight-bold: 700;
 
-  --lt-shadow-xs: 0 1px 1px 0 oklch(0 0 0 / 0.04);
-  --lt-shadow-sm: 0 1px 2px 0 oklch(0 0 0 / 0.05);
+  --lt-shadow-xs: 0 1px 1px 0 oklch(0.2 0.02 225 / 0.05);
+  --lt-shadow-sm: 0 1px 2px 0 oklch(0.2 0.02 225 / 0.06);
   --lt-shadow-md:
-    0 2px 4px -1px oklch(0 0 0 / 0.08), 0 1px 2px -1px oklch(0 0 0 / 0.06);
+    0 2px 4px -1px oklch(0.2 0.02 225 / 0.09), 0 1px 2px -1px oklch(0.2 0.02 225 / 0.06);
   --lt-shadow-lg:
-    0 8px 16px -4px oklch(0 0 0 / 0.12), 0 2px 4px -2px oklch(0 0 0 / 0.08);
+    0 8px 16px -4px oklch(0.2 0.02 225 / 0.13), 0 2px 4px -2px oklch(0.2 0.02 225 / 0.08);
 
   --lt-z-dropdown: 1000;
   --lt-z-sticky: 1100;
@@ -95,6 +129,7 @@
   --lt-gutter: calc(var(--spacing) * 6);
 
   color-scheme: light;
+  }
 }
 
 /*
@@ -111,51 +146,66 @@
   }
 }
 
-[data-theme="dark"],
-.dark {
-  --lt-bg: var(--background, oklch(0.145 0 0));
-  --lt-fg: var(--foreground, oklch(0.985 0 0));
-  --lt-surface: var(--card, oklch(0.145 0 0));
-  --lt-surface-fg: var(--card-foreground, oklch(0.985 0 0));
-  --lt-popover: var(--popover, oklch(0.145 0 0));
-  --lt-popover-fg: var(--popover-foreground, oklch(0.985 0 0));
-  --lt-primary: var(--primary, oklch(0.74 0.105 182));
-  --lt-primary-fg: var(--primary-foreground, oklch(0.2 0.025 182));
-  --lt-secondary: var(--secondary, oklch(0.269 0 0));
-  --lt-secondary-fg: var(--secondary-foreground, oklch(0.985 0 0));
-  --lt-muted: var(--muted, oklch(0.269 0 0));
-  --lt-muted-fg: var(--muted-foreground, oklch(0.708 0 0));
-  --lt-accent: var(--accent, oklch(0.278 0.018 182));
-  --lt-accent-fg: var(--accent-foreground, oklch(0.985 0 0));
-  --lt-danger: var(--destructive, oklch(0.42 0.13 26));
-  --lt-danger-fg: var(--destructive-foreground, oklch(0.985 0 0));
-  --lt-border: var(--border, oklch(0.269 0 0));
-  --lt-input: var(--input, oklch(0.269 0 0));
-  --lt-ring: var(--ring, oklch(0.55 0.08 182));
-  --lt-overlay: var(--overlay, oklch(0 0 0 / 0.6));
-  --lt-warning: var(--warning, oklch(0.7 0.13 78));
-  --lt-success: var(--success, oklch(0.7 0.15 162));
-  --lt-success-fg: var(--success-foreground, oklch(0.205 0 0));
-  --lt-info: var(--info, oklch(0.7 0.14 240));
-  --lt-info-fg: var(--info-foreground, oklch(0.205 0 0));
-
-  --lt-primary-hover: var(--primary-hover, oklch(0.79 0.105 182));
-  --lt-primary-active: var(--primary-active, oklch(0.84 0.105 182));
-  --lt-danger-hover: var(--destructive-hover, oklch(0.47 0.13 26));
-  --lt-danger-active: var(--destructive-active, oklch(0.52 0.13 26));
-  --lt-success-hover: var(--success-hover, oklch(0.75 0.15 162));
-  --lt-success-active: var(--success-active, oklch(0.8 0.15 162));
-  --lt-info-hover: var(--info-hover, oklch(0.75 0.14 240));
-  --lt-info-active: var(--info-active, oklch(0.8 0.14 240));
-  --lt-secondary-hover: var(--secondary-hover, oklch(0.32 0 0));
-  --lt-secondary-active: var(--secondary-active, oklch(0.36 0 0));
-  --lt-disabled: var(--disabled, oklch(0.32 0 0));
-  --lt-disabled-fg: var(--disabled-foreground, oklch(0.55 0 0));
+@layer lattice {
+  [data-theme="dark"],
+  .dark {
+  --lt-bg: oklch(0.155 0.008 225);
+  --lt-fg: oklch(0.955 0.005 210);
+  --lt-surface: oklch(0.195 0.01 225);
+  --lt-surface-fg: oklch(0.955 0.005 210);
+  --lt-popover: oklch(0.225 0.012 225);
+  --lt-popover-fg: oklch(0.955 0.005 210);
+  --lt-primary: oklch(0.75 0.115 190);
+  --lt-primary-fg: oklch(0.17 0.03 195);
+  --lt-secondary: oklch(0.27 0.012 225);
+  --lt-secondary-fg: oklch(0.955 0.005 210);
+  --lt-muted: oklch(0.26 0.01 225);
+  --lt-muted-fg: oklch(0.72 0.012 220);
+  --lt-accent: oklch(0.29 0.03 195);
+  --lt-accent-fg: oklch(0.97 0.005 210);
+  --lt-danger: oklch(0.55 0.18 25);
+  --lt-danger-fg: oklch(0.985 0 0);
+  --lt-border: oklch(0.285 0.012 225);
+  --lt-input: oklch(0.33 0.014 225);
+  --lt-ring: oklch(0.6 0.1 192);
+  --lt-overlay: oklch(0.08 0.01 225 / 0.65);
+  --lt-warning: oklch(0.75 0.14 82);
+  --lt-success: oklch(0.72 0.14 160);
+  --lt-success-fg: oklch(0.2 0.04 160);
+  --lt-info: oklch(0.72 0.13 242);
+  --lt-info-fg: oklch(0.2 0.04 242);
+
+  --lt-primary-hover: oklch(0.79 0.115 190);
+  --lt-primary-active: oklch(0.83 0.11 190);
+  --lt-danger-hover: oklch(0.6 0.18 25);
+  --lt-danger-active: oklch(0.65 0.17 25);
+  --lt-success-hover: oklch(0.76 0.14 160);
+  --lt-success-active: oklch(0.8 0.13 160);
+  --lt-info-hover: oklch(0.76 0.13 242);
+  --lt-info-active: oklch(0.8 0.12 242);
+  --lt-warning-hover: oklch(0.79 0.14 82);
+  --lt-warning-active: oklch(0.83 0.13 82);
+  --lt-secondary-hover: oklch(0.31 0.013 225);
+  --lt-secondary-active: oklch(0.35 0.014 225);
+  --lt-disabled: oklch(0.28 0.01 225);
+  --lt-disabled-fg: oklch(0.56 0.012 225);
+
+  --lt-chart-1: oklch(0.72 0.12 190);
+  --lt-chart-2: oklch(0.7 0.12 250);
+  --lt-chart-3: oklch(0.76 0.14 60);
+  --lt-chart-4: oklch(0.7 0.16 305);
+  --lt-chart-5: oklch(0.7 0.16 20);
+  --lt-chart-6: oklch(0.74 0.12 150);
+  --lt-chart-7: oklch(0.72 0.12 100);
+  --lt-chart-8: oklch(0.68 0.05 280);
 
   color-scheme: dark;
+  }
 }
 
 @theme inline {
+  --font-sans: var(--lt-font-sans);
+  --font-mono: var(--lt-font-mono);
   --color-lt-bg: var(--lt-bg);
   --color-lt-fg: var(--lt-fg);
   --color-lt-surface: var(--lt-surface);
@@ -189,6 +239,8 @@
   --color-lt-success-active: var(--lt-success-active);
   --color-lt-info-hover: var(--lt-info-hover);
   --color-lt-info-active: var(--lt-info-active);
+  --color-lt-warning-hover: var(--lt-warning-hover);
+  --color-lt-warning-active: var(--lt-warning-active);
   --color-lt-secondary-hover: var(--lt-secondary-hover);
   --color-lt-secondary-active: var(--lt-secondary-active);
   --color-lt-disabled: var(--lt-disabled);
@@ -200,6 +252,24 @@
   --shadow-lt-sm: var(--lt-shadow-sm);
   --shadow-lt-md: var(--lt-shadow-md);
   --shadow-lt-lg: var(--lt-shadow-lg);
+  --shadow-lt-inner: var(--lt-shadow-inner);
+  --radius-lt-lg: var(--lt-radius-lg);
+  --radius-lt-xl: var(--lt-radius-xl);
+  --radius-lt-full: var(--lt-radius-full);
+  --color-lt-warning-fg: var(--lt-warning-fg);
+  --color-lt-chart-1: var(--lt-chart-1);
+  --color-lt-chart-2: var(--lt-chart-2);
+  --color-lt-chart-3: var(--lt-chart-3);
+  --color-lt-chart-4: var(--lt-chart-4);
+  --color-lt-chart-5: var(--lt-chart-5);
+  --color-lt-chart-6: var(--lt-chart-6);
+  --color-lt-chart-7: var(--lt-chart-7);
+  --color-lt-chart-8: var(--lt-chart-8);
+  --font-lt-mono: var(--lt-font-mono);
+  --font-lt-display: var(--lt-font-display);
+  --spacing-lt-sidebar: var(--lt-sidebar-w);
+  --spacing-lt-sidebar-collapsed: var(--lt-sidebar-w-collapsed);
+  --spacing-lt-container: var(--lt-container-max);
   --spacing-lt-icon-xs: var(--lt-icon-xs);
   --spacing-lt-icon-sm: var(--lt-icon-sm);
   --spacing-lt-icon-md: var(--lt-icon-md);
@@ -231,34 +301,30 @@
 }
 
 @theme {
-  --font-sans:
-    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
-    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-    "Segoe UI Symbol", "Noto Color Emoji";
 
   --spacing: 0.25rem;
 
-  --text-xs: 0.625rem;
-  --text-xs--line-height: 1.6;
-  --text-sm: 0.6875rem;
-  --text-sm--line-height: 1.82;
-  --text-base: 0.75rem;
-  --text-base--line-height: 1.5;
-  --text-lg: 0.875rem;
-  --text-lg--line-height: 1.4286;
-  --text-xl: 1rem;
-  --text-xl--line-height: 1.5;
-  --text-2xl: 1.125rem;
-  --text-2xl--line-height: 1.2;
-  --text-3xl: 1.25rem;
-  --text-3xl--line-height: 1.2;
-  --text-4xl: 1.5rem;
-  --text-4xl--line-height: 1.2;
-  --text-5xl: 1.875rem;
-  --text-5xl--line-height: 1;
-  --text-6xl: 2.25rem;
+  --text-xs: 0.75rem;
+  --text-xs--line-height: 1.5;
+  --text-sm: 0.8125rem;
+  --text-sm--line-height: 1.5385;
+  --text-base: 0.875rem;
+  --text-base--line-height: 1.5714;
+  --text-lg: 1rem;
+  --text-lg--line-height: 1.5;
+  --text-xl: 1.125rem;
+  --text-xl--line-height: 1.5556;
+  --text-2xl: 1.375rem;
+  --text-2xl--line-height: 1.2727;
+  --text-3xl: 1.625rem;
+  --text-3xl--line-height: 1.2308;
+  --text-4xl: 2rem;
+  --text-4xl--line-height: 1.25;
+  --text-5xl: 2.5rem;
+  --text-5xl--line-height: 1.1;
+  --text-6xl: 3rem;
   --text-6xl--line-height: 1;
-  --text-7xl: 3rem;
+  --text-7xl: 3.75rem;
   --text-7xl--line-height: 1;
 }
 
@@ -399,7 +465,8 @@
  * theme and can be overridden, and so a colour can be picked by name at
  * runtime without Tailwind needing to see every class.
  */
-:root {
+@layer lattice {
+  :root {
   --lt-color-default: var(--lt-fg);
   --lt-color-muted: var(--lt-muted-fg);
   --lt-color-primary: var(--lt-primary);
@@ -414,19 +481,20 @@
   --lt-color-green: oklch(0.52 0.13 152);
   --lt-color-blue: oklch(0.54 0.17 252);
   --lt-color-purple: oklch(0.53 0.19 305);
-}
+  }
 
-[data-theme="dark"],
-.dark {
+  [data-theme="dark"],
+  .dark {
   --lt-color-red: oklch(0.83 0.11 27);
   --lt-color-orange: oklch(0.84 0.1 65);
   --lt-color-yellow: oklch(0.87 0.11 100);
   --lt-color-green: oklch(0.85 0.13 155);
   --lt-color-blue: oklch(0.84 0.11 250);
   --lt-color-purple: oklch(0.85 0.11 305);
+  }
 }
 
-.lt-cell-badge {
+.lt-badge {
   display: inline-flex;
   align-items: center;
   gap: 0.25rem;
@@ -631,7 +699,7 @@
   background: var(--lt-muted);
   border-radius: var(--lt-radius-sm);
   padding: calc(var(--spacing) * 0.5) var(--spacing);
-  font-family: ui-monospace, "SFMono-Regular", "Menlo", monospace;
+  font-family: var(--lt-font-mono);
   font-size: 0.875em;
 }
 
@@ -641,7 +709,7 @@
   padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
   margin: calc(var(--spacing) * 3) 0;
   overflow-x: auto;
-  font-family: ui-monospace, "SFMono-Regular", "Menlo", monospace;
+  font-family: var(--lt-font-mono);
   font-size: var(--text-lg);
 }
 

package/dist/layout/components/callouts.js

@@ -2,6 +2,7 @@ import { useT } from "../../i18n/instance.js";
 import { cn } from "../../lib/utils.js";
 import { Icon } from "../../icons/sprite.js";
 import { RenderNode } from "../../core/renderer.js";
+import { resolveText } from "../../i18n/translatable.js";
 import { onCallout } from "../../toast/callout.js";
 import { variantStyles } from "../../toast/variant-styles.js";
 import { useEffect, useState } from "react";
@@ -34,11 +35,11 @@ var Callouts = () => {
 					children: [
 						callout.title ? /* @__PURE__ */ jsx("p", {
 							className: "text-sm font-medium text-lt-fg",
-							children: callout.title
+							children: resolveText(callout.title, t)
 						}) : null,
 						/* @__PURE__ */ jsx("p", {
 							className: "text-sm text-lt-fg",
-							children: callout.message
+							children: resolveText(callout.message, t)
 						}),
 						callout.action ? /* @__PURE__ */ jsx("div", {
 							className: "flex flex-wrap gap-2",

package/dist/layout/components/callouts.js.map

@@ -1 +1 @@
-{"version":3,"file":"callouts.js","names":[],"sources":["../../../resources/js/layout/components/callouts.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { useEffect, useState } from \"react\";\nimport { RenderNode } from \"@lattice-php/lattice/core/renderer\";\nimport type { Callout } from \"@lattice-php/lattice/types/generated\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { onCallout } from \"@lattice-php/lattice/toast\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { variantStyles } from \"@lattice-php/lattice/toast\";\n\ntype CalloutItem = Callout & { id: number };\n\nlet nextId = 0;\n\nconst Callouts: RendererComponent<\"callouts\"> = () => {\n  const { t } = useT(\"lattice\");\n  const [callouts, setCallouts] = useState<CalloutItem[]>([]);\n\n  useEffect(\n    () =>\n      onCallout((callout) => {\n        setCallouts((current) => [...current, { ...callout, id: nextId++ }]);\n      }),\n    [],\n  );\n\n  function dismiss(id: number): void {\n    setCallouts((current) => current.filter((callout) => callout.id !== id));\n  }\n\n  if (callouts.length === 0) {\n    return null;\n  }\n\n  return (\n    <div className=\"flex w-full flex-col gap-2\">\n      {callouts.map((callout) => (\n        <div\n          key={callout.id}\n          role=\"status\"\n          data-test={`callout-${callout.variant}`}\n          className={cn(\n            \"flex items-start gap-3 rounded-lt border border-l-4 border-lt-border bg-lt-popover p-4 text-lt-popover-fg\",\n            variantStyles[callout.variant].accent,\n          )}\n        >\n          {variantStyles[callout.variant].icon}\n          <div className=\"flex min-w-0 flex-1 flex-col gap-2\">\n            {callout.title ? (\n              <p className=\"text-sm font-medium text-lt-fg\">{callout.title}</p>\n            ) : null}\n            <p className=\"text-sm text-lt-fg\">{callout.message}</p>\n            {callout.action ? (\n              <div className=\"flex flex-wrap gap-2\">\n                <RenderNode node={callout.action} />\n              </div>\n            ) : null}\n          </div>\n          {callout.dismissible ? (\n            <button\n              type=\"button\"\n              aria-label={t(\"common.dismiss\", \"Dismiss\")}\n              data-test=\"callout-dismiss\"\n              className=\"shrink-0 rounded-lt-sm p-1 text-lt-muted-fg transition-colors hover:bg-lt-muted hover:text-lt-fg\"\n              onClick={() => dismiss(callout.id)}\n            >\n              <Icon name=\"x\" className=\"size-lt-icon-md\" />\n            </button>\n          ) : null}\n        </div>\n      ))}\n    </div>\n  );\n};\n\nexport default Callouts;\n"],"mappings":";;;;;;;;;AAYA,IAAI,SAAS;AAEb,IAAM,iBAAgD;CACpD,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,CAAC,UAAU,eAAe,SAAwB,CAAC,CAAC;CAE1D,gBAEI,WAAW,YAAY;EACrB,aAAa,YAAY,CAAC,GAAG,SAAS;GAAE,GAAG;GAAS,IAAI;EAAS,CAAC,CAAC;CACrE,CAAC,GACH,CAAC,CACH;CAEA,SAAS,QAAQ,IAAkB;EACjC,aAAa,YAAY,QAAQ,QAAQ,YAAY,QAAQ,OAAO,EAAE,CAAC;CACzE;CAEA,IAAI,SAAS,WAAW,GACtB,OAAO;CAGT,OACE,oBAAC,OAAD;EAAK,WAAU;YACZ,SAAS,KAAK,YACb,qBAAC,OAAD;GAEE,MAAK;GACL,aAAW,WAAW,QAAQ;GAC9B,WAAW,GACT,6GACA,cAAc,QAAQ,SAAS,MACjC;aAPF;IASG,cAAc,QAAQ,SAAS;IAChC,qBAAC,OAAD;KAAK,WAAU;eAAf;MACG,QAAQ,QACP,oBAAC,KAAD;OAAG,WAAU;iBAAkC,QAAQ;MAAS,CAAA,IAC9D;MACJ,oBAAC,KAAD;OAAG,WAAU;iBAAsB,QAAQ;MAAW,CAAA;MACrD,QAAQ,SACP,oBAAC,OAAD;OAAK,WAAU;iBACb,oBAAC,YAAD,EAAY,MAAM,QAAQ,OAAS,CAAA;MAChC,CAAA,IACH;KACD;;IACJ,QAAQ,cACP,oBAAC,UAAD;KACE,MAAK;KACL,cAAY,EAAE,kBAAkB,SAAS;KACzC,aAAU;KACV,WAAU;KACV,eAAe,QAAQ,QAAQ,EAAE;eAEjC,oBAAC,MAAD;MAAM,MAAK;MAAI,WAAU;KAAmB,CAAA;IACtC,CAAA,IACN;GACD;KA/BE,QAAQ,EA+BV,CACN;CACE,CAAA;AAET"}
+{"version":3,"file":"callouts.js","names":[],"sources":["../../../resources/js/layout/components/callouts.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { useEffect, useState } from \"react\";\nimport { RenderNode } from \"@lattice-php/lattice/core/renderer\";\nimport type { Callout } from \"@lattice-php/lattice/types/generated\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { onCallout } from \"@lattice-php/lattice/toast\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { resolveText } from \"@lattice-php/lattice/i18n/translatable\";\nimport { variantStyles } from \"@lattice-php/lattice/toast\";\n\ntype CalloutItem = Callout & { id: number };\n\nlet nextId = 0;\n\nconst Callouts: RendererComponent<\"callouts\"> = () => {\n  const { t } = useT(\"lattice\");\n  const [callouts, setCallouts] = useState<CalloutItem[]>([]);\n\n  useEffect(\n    () =>\n      onCallout((callout) => {\n        setCallouts((current) => [...current, { ...callout, id: nextId++ }]);\n      }),\n    [],\n  );\n\n  function dismiss(id: number): void {\n    setCallouts((current) => current.filter((callout) => callout.id !== id));\n  }\n\n  if (callouts.length === 0) {\n    return null;\n  }\n\n  return (\n    <div className=\"flex w-full flex-col gap-2\">\n      {callouts.map((callout) => (\n        <div\n          key={callout.id}\n          role=\"status\"\n          data-test={`callout-${callout.variant}`}\n          className={cn(\n            \"flex items-start gap-3 rounded-lt border border-l-4 border-lt-border bg-lt-popover p-4 text-lt-popover-fg\",\n            variantStyles[callout.variant].accent,\n          )}\n        >\n          {variantStyles[callout.variant].icon}\n          <div className=\"flex min-w-0 flex-1 flex-col gap-2\">\n            {callout.title ? (\n              <p className=\"text-sm font-medium text-lt-fg\">{resolveText(callout.title, t)}</p>\n            ) : null}\n            <p className=\"text-sm text-lt-fg\">{resolveText(callout.message, t)}</p>\n            {callout.action ? (\n              <div className=\"flex flex-wrap gap-2\">\n                <RenderNode node={callout.action} />\n              </div>\n            ) : null}\n          </div>\n          {callout.dismissible ? (\n            <button\n              type=\"button\"\n              aria-label={t(\"common.dismiss\", \"Dismiss\")}\n              data-test=\"callout-dismiss\"\n              className=\"shrink-0 rounded-lt-sm p-1 text-lt-muted-fg transition-colors hover:bg-lt-muted hover:text-lt-fg\"\n              onClick={() => dismiss(callout.id)}\n            >\n              <Icon name=\"x\" className=\"size-lt-icon-md\" />\n            </button>\n          ) : null}\n        </div>\n      ))}\n    </div>\n  );\n};\n\nexport default Callouts;\n"],"mappings":";;;;;;;;;;AAaA,IAAI,SAAS;AAEb,IAAM,iBAAgD;CACpD,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,CAAC,UAAU,eAAe,SAAwB,CAAC,CAAC;CAE1D,gBAEI,WAAW,YAAY;EACrB,aAAa,YAAY,CAAC,GAAG,SAAS;GAAE,GAAG;GAAS,IAAI;EAAS,CAAC,CAAC;CACrE,CAAC,GACH,CAAC,CACH;CAEA,SAAS,QAAQ,IAAkB;EACjC,aAAa,YAAY,QAAQ,QAAQ,YAAY,QAAQ,OAAO,EAAE,CAAC;CACzE;CAEA,IAAI,SAAS,WAAW,GACtB,OAAO;CAGT,OACE,oBAAC,OAAD;EAAK,WAAU;YACZ,SAAS,KAAK,YACb,qBAAC,OAAD;GAEE,MAAK;GACL,aAAW,WAAW,QAAQ;GAC9B,WAAW,GACT,6GACA,cAAc,QAAQ,SAAS,MACjC;aAPF;IASG,cAAc,QAAQ,SAAS;IAChC,qBAAC,OAAD;KAAK,WAAU;eAAf;MACG,QAAQ,QACP,oBAAC,KAAD;OAAG,WAAU;iBAAkC,YAAY,QAAQ,OAAO,CAAC;MAAK,CAAA,IAC9E;MACJ,oBAAC,KAAD;OAAG,WAAU;iBAAsB,YAAY,QAAQ,SAAS,CAAC;MAAK,CAAA;MACrE,QAAQ,SACP,oBAAC,OAAD;OAAK,WAAU;iBACb,oBAAC,YAAD,EAAY,MAAM,QAAQ,OAAS,CAAA;MAChC,CAAA,IACH;KACD;;IACJ,QAAQ,cACP,oBAAC,UAAD;KACE,MAAK;KACL,cAAY,EAAE,kBAAkB,SAAS;KACzC,aAAU;KACV,WAAU;KACV,eAAe,QAAQ,QAAQ,EAAE;eAEjC,oBAAC,MAAD;MAAM,MAAK;MAAI,WAAU;KAAmB,CAAA;IACtC,CAAA,IACN;GACD;KA/BE,QAAQ,EA+BV,CACN;CACE,CAAA;AAET"}

package/dist/notifications/components/notification-item.js

@@ -2,23 +2,28 @@ import { useT } from "../../i18n/instance.js";
 import { cn } from "../../lib/utils.js";
 import { IconRenderer } from "../../icons/icon-renderer.js";
 import { RenderNode } from "../../core/renderer.js";
+import { resolveText } from "../../i18n/translatable.js";
 import { Link } from "@inertiajs/react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/notifications/components/notification-item.tsx
 var variantIconClass = {
+	primary: "text-lt-primary",
+	secondary: "text-lt-muted-fg",
 	success: "text-lt-success",
 	info: "text-lt-info",
 	warning: "text-lt-warning",
-	error: "text-lt-danger"
+	danger: "text-lt-danger"
 };
 function NotificationItemRow({ notification, onMarkRead, onDismiss }) {
 	const { t } = useT("lattice");
-	const content = /* @__PURE__ */ jsxs(Fragment, { children: [notification.title ? /* @__PURE__ */ jsx("p", {
+	const title = resolveText(notification.title, t);
+	const body = resolveText(notification.body, t);
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [title ? /* @__PURE__ */ jsx("p", {
 		className: "truncate text-sm font-medium text-lt-fg",
-		children: notification.title
-	}) : null, notification.body ? /* @__PURE__ */ jsx("p", {
+		children: title
+	}) : null, body ? /* @__PURE__ */ jsx("p", {
 		className: "text-sm text-lt-muted-fg",
-		children: notification.body
+		children: body
 	}) : null] });
 	return /* @__PURE__ */ jsxs("li", {
 		className: cn("flex gap-3 px-3 py-3", !notification.isRead && "bg-lt-muted/40"),

package/dist/notifications/components/notification-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"notification-item.js","names":[],"sources":["../../../resources/js/notifications/components/notification-item.tsx"],"sourcesContent":["import { Link } from \"@inertiajs/react\";\nimport { RenderNode } from \"@lattice-php/lattice/core/renderer\";\nimport { IconRenderer } from \"@lattice-php/lattice/icons\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport type { NotificationItem } from \"@lattice-php/lattice/notifications/types\";\n\nconst variantIconClass: Record<NonNullable<NotificationItem[\"variant\"]>, string> = {\n  success: \"text-lt-success\",\n  info: \"text-lt-info\",\n  warning: \"text-lt-warning\",\n  error: \"text-lt-danger\",\n};\n\nexport function NotificationItemRow({\n  notification,\n  onMarkRead,\n  onDismiss,\n}: {\n  notification: NotificationItem;\n  onMarkRead: (id: string) => void;\n  onDismiss: (id: string) => void;\n}) {\n  const { t } = useT(\"lattice\");\n\n  const content = (\n    <>\n      {notification.title ? (\n        <p className=\"truncate text-sm font-medium text-lt-fg\">{notification.title}</p>\n      ) : null}\n      {notification.body ? <p className=\"text-sm text-lt-muted-fg\">{notification.body}</p> : null}\n    </>\n  );\n\n  return (\n    <li\n      className={cn(\"flex gap-3 px-3 py-3\", !notification.isRead && \"bg-lt-muted/40\")}\n      data-test=\"notification\"\n    >\n      {notification.icon ? (\n        <IconRenderer\n          icon={notification.icon}\n          className={cn(\n            \"mt-0.5 size-lt-icon-md\",\n            notification.variant ? variantIconClass[notification.variant] : undefined,\n          )}\n        />\n      ) : null}\n      <div className=\"min-w-0 flex-1\">\n        {notification.href ? (\n          <Link\n            href={notification.href}\n            className=\"block\"\n            data-test=\"notification-link\"\n            onClick={() => onMarkRead(notification.id)}\n          >\n            {content}\n          </Link>\n        ) : (\n          content\n        )}\n        {notification.actions.length > 0 ? (\n          <div className=\"mt-2 flex flex-wrap gap-2\">\n            {notification.actions.map((node, index) => (\n              <RenderNode key={node.key ?? node.id ?? `action-${index}`} node={node} />\n            ))}\n          </div>\n        ) : null}\n      </div>\n      <div className=\"flex shrink-0 flex-col gap-1\">\n        {!notification.isRead ? (\n          <button\n            type=\"button\"\n            className=\"text-xs text-lt-muted-fg hover:text-lt-fg\"\n            onClick={() => onMarkRead(notification.id)}\n          >\n            {t(\"notifications.mark-read\", \"Mark read\")}\n          </button>\n        ) : null}\n        <button\n          type=\"button\"\n          aria-label={t(\"notifications.dismiss\", \"Dismiss\")}\n          className=\"text-xs text-lt-muted-fg hover:text-lt-fg\"\n          onClick={() => onDismiss(notification.id)}\n        >\n          {t(\"notifications.dismiss\", \"Dismiss\")}\n        </button>\n      </div>\n    </li>\n  );\n}\n"],"mappings":";;;;;;;AAOA,IAAM,mBAA6E;CACjF,SAAS;CACT,MAAM;CACN,SAAS;CACT,OAAO;AACT;AAEA,SAAgB,oBAAoB,EAClC,cACA,YACA,aAKC;CACD,MAAM,EAAE,MAAM,KAAK,SAAS;CAE5B,MAAM,UACJ,qBAAA,UAAA,EAAA,UAAA,CACG,aAAa,QACZ,oBAAC,KAAD;EAAG,WAAU;YAA2C,aAAa;CAAS,CAAA,IAC5E,MACH,aAAa,OAAO,oBAAC,KAAD;EAAG,WAAU;YAA4B,aAAa;CAAQ,CAAA,IAAI,IACvF,EAAA,CAAA;CAGJ,OACE,qBAAC,MAAD;EACE,WAAW,GAAG,wBAAwB,CAAC,aAAa,UAAU,gBAAgB;EAC9E,aAAU;YAFZ;GAIG,aAAa,OACZ,oBAAC,cAAD;IACE,MAAM,aAAa;IACnB,WAAW,GACT,0BACA,aAAa,UAAU,iBAAiB,aAAa,WAAW,KAAA,CAClE;GACD,CAAA,IACC;GACJ,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,aAAa,OACZ,oBAAC,MAAD;KACE,MAAM,aAAa;KACnB,WAAU;KACV,aAAU;KACV,eAAe,WAAW,aAAa,EAAE;eAExC;IACG,CAAA,IAEN,SAED,aAAa,QAAQ,SAAS,IAC7B,oBAAC,OAAD;KAAK,WAAU;eACZ,aAAa,QAAQ,KAAK,MAAM,UAC/B,oBAAC,YAAD,EAAiE,KAAO,GAAvD,KAAK,OAAO,KAAK,MAAM,UAAU,OAAsB,CACzE;IACE,CAAA,IACH,IACD;;GACL,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,CAAC,aAAa,SACb,oBAAC,UAAD;KACE,MAAK;KACL,WAAU;KACV,eAAe,WAAW,aAAa,EAAE;eAExC,EAAE,2BAA2B,WAAW;IACnC,CAAA,IACN,MACJ,oBAAC,UAAD;KACE,MAAK;KACL,cAAY,EAAE,yBAAyB,SAAS;KAChD,WAAU;KACV,eAAe,UAAU,aAAa,EAAE;eAEvC,EAAE,yBAAyB,SAAS;IAC/B,CAAA,CACL;;EACH;;AAER"}
+{"version":3,"file":"notification-item.js","names":[],"sources":["../../../resources/js/notifications/components/notification-item.tsx"],"sourcesContent":["import { Link } from \"@inertiajs/react\";\nimport { RenderNode } from \"@lattice-php/lattice/core/renderer\";\nimport { IconRenderer } from \"@lattice-php/lattice/icons\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { resolveText } from \"@lattice-php/lattice/i18n/translatable\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport type { NotificationItem } from \"@lattice-php/lattice/notifications/types\";\n\nconst variantIconClass: Record<NonNullable<NotificationItem[\"variant\"]>, string> = {\n  primary: \"text-lt-primary\",\n  secondary: \"text-lt-muted-fg\",\n  success: \"text-lt-success\",\n  info: \"text-lt-info\",\n  warning: \"text-lt-warning\",\n  danger: \"text-lt-danger\",\n};\n\nexport function NotificationItemRow({\n  notification,\n  onMarkRead,\n  onDismiss,\n}: {\n  notification: NotificationItem;\n  onMarkRead: (id: string) => void;\n  onDismiss: (id: string) => void;\n}) {\n  const { t } = useT(\"lattice\");\n\n  const title = resolveText(notification.title, t);\n  const body = resolveText(notification.body, t);\n\n  const content = (\n    <>\n      {title ? <p className=\"truncate text-sm font-medium text-lt-fg\">{title}</p> : null}\n      {body ? <p className=\"text-sm text-lt-muted-fg\">{body}</p> : null}\n    </>\n  );\n\n  return (\n    <li\n      className={cn(\"flex gap-3 px-3 py-3\", !notification.isRead && \"bg-lt-muted/40\")}\n      data-test=\"notification\"\n    >\n      {notification.icon ? (\n        <IconRenderer\n          icon={notification.icon}\n          className={cn(\n            \"mt-0.5 size-lt-icon-md\",\n            notification.variant ? variantIconClass[notification.variant] : undefined,\n          )}\n        />\n      ) : null}\n      <div className=\"min-w-0 flex-1\">\n        {notification.href ? (\n          <Link\n            href={notification.href}\n            className=\"block\"\n            data-test=\"notification-link\"\n            onClick={() => onMarkRead(notification.id)}\n          >\n            {content}\n          </Link>\n        ) : (\n          content\n        )}\n        {notification.actions.length > 0 ? (\n          <div className=\"mt-2 flex flex-wrap gap-2\">\n            {notification.actions.map((node, index) => (\n              <RenderNode key={node.key ?? node.id ?? `action-${index}`} node={node} />\n            ))}\n          </div>\n        ) : null}\n      </div>\n      <div className=\"flex shrink-0 flex-col gap-1\">\n        {!notification.isRead ? (\n          <button\n            type=\"button\"\n            className=\"text-xs text-lt-muted-fg hover:text-lt-fg\"\n            onClick={() => onMarkRead(notification.id)}\n          >\n            {t(\"notifications.mark-read\", \"Mark read\")}\n          </button>\n        ) : null}\n        <button\n          type=\"button\"\n          aria-label={t(\"notifications.dismiss\", \"Dismiss\")}\n          className=\"text-xs text-lt-muted-fg hover:text-lt-fg\"\n          onClick={() => onDismiss(notification.id)}\n        >\n          {t(\"notifications.dismiss\", \"Dismiss\")}\n        </button>\n      </div>\n    </li>\n  );\n}\n"],"mappings":";;;;;;;;AAQA,IAAM,mBAA6E;CACjF,SAAS;CACT,WAAW;CACX,SAAS;CACT,MAAM;CACN,SAAS;CACT,QAAQ;AACV;AAEA,SAAgB,oBAAoB,EAClC,cACA,YACA,aAKC;CACD,MAAM,EAAE,MAAM,KAAK,SAAS;CAE5B,MAAM,QAAQ,YAAY,aAAa,OAAO,CAAC;CAC/C,MAAM,OAAO,YAAY,aAAa,MAAM,CAAC;CAE7C,MAAM,UACJ,qBAAA,UAAA,EAAA,UAAA,CACG,QAAQ,oBAAC,KAAD;EAAG,WAAU;YAA2C;CAAS,CAAA,IAAI,MAC7E,OAAO,oBAAC,KAAD;EAAG,WAAU;YAA4B;CAAQ,CAAA,IAAI,IAC7D,EAAA,CAAA;CAGJ,OACE,qBAAC,MAAD;EACE,WAAW,GAAG,wBAAwB,CAAC,aAAa,UAAU,gBAAgB;EAC9E,aAAU;YAFZ;GAIG,aAAa,OACZ,oBAAC,cAAD;IACE,MAAM,aAAa;IACnB,WAAW,GACT,0BACA,aAAa,UAAU,iBAAiB,aAAa,WAAW,KAAA,CAClE;GACD,CAAA,IACC;GACJ,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,aAAa,OACZ,oBAAC,MAAD;KACE,MAAM,aAAa;KACnB,WAAU;KACV,aAAU;KACV,eAAe,WAAW,aAAa,EAAE;eAExC;IACG,CAAA,IAEN,SAED,aAAa,QAAQ,SAAS,IAC7B,oBAAC,OAAD;KAAK,WAAU;eACZ,aAAa,QAAQ,KAAK,MAAM,UAC/B,oBAAC,YAAD,EAAiE,KAAO,GAAvD,KAAK,OAAO,KAAK,MAAM,UAAU,OAAsB,CACzE;IACE,CAAA,IACH,IACD;;GACL,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,CAAC,aAAa,SACb,oBAAC,UAAD;KACE,MAAK;KACL,WAAU;KACV,eAAe,WAAW,aAAa,EAAE;eAExC,EAAE,2BAA2B,WAAW;IACnC,CAAA,IACN,MACJ,oBAAC,UAAD;KACE,MAAK;KACL,cAAY,EAAE,yBAAyB,SAAS;KAChD,WAAU;KACV,eAAe,UAAU,aAAa,EAAE;eAEvC,EAAE,yBAAyB,SAAS;IAC/B,CAAA,CACL;;EACH;;AAER"}

package/dist/notifications/components/notifications.js

@@ -2,7 +2,6 @@ import { useT } from "../../i18n/instance.js";
 import { Icon } from "../../icons/sprite.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover.js";
 import { Dialog, DialogContent, DialogTitle } from "../../ui/dialog.js";
-import { Badge } from "../../ui/badge.js";
 import { useNotifications } from "../store.js";
 import { NotificationList } from "./notification-list.js";
 import { Component, Suspense, lazy } from "react";
@@ -33,10 +32,9 @@ var NotificationsComponent = ({ node }) => {
 		children: [/* @__PURE__ */ jsx(Icon, {
 			name: "bell",
 			className: "size-lt-icon-md"
-		}), store.unreadCount > 0 ? /* @__PURE__ */ jsx(Badge, {
-			variant: "destructive",
+		}), store.unreadCount > 0 ? /* @__PURE__ */ jsx("span", {
 			"data-test": "notifications-badge",
-			className: "absolute -right-0.5 -top-0.5 min-w-4 px-1 py-0 text-[10px]",
+			className: "absolute -right-0.5 -top-0.5 inline-flex min-w-4 items-center justify-center rounded-lt-full bg-lt-danger px-1 py-0 text-[10px] font-medium text-lt-danger-fg",
 			children: store.unreadCount
 		}) : null]
 	});

package/dist/notifications/components/notifications.js.map

@@ -1 +1 @@
-{"version":3,"file":"notifications.js","names":[],"sources":["../../../resources/js/notifications/components/notifications.tsx"],"sourcesContent":["import { Component, lazy, Suspense, type ReactNode } from \"react\";\nimport { Badge } from \"@lattice-php/lattice/ui/badge\";\nimport { Dialog, DialogContent, DialogTitle } from \"@lattice-php/lattice/ui/dialog\";\nimport {\n  Popover as PopoverRoot,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@lattice-php/lattice/ui/popover\";\nimport { Icon } from \"@lattice-php/lattice/icons\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { useNotifications } from \"@lattice-php/lattice/notifications/store\";\nimport type { NotificationItem } from \"@lattice-php/lattice/notifications/types\";\nimport { NotificationList } from \"./notification-list\";\n\nconst NotificationsEcho = lazy(() =>\n  import(\"./notifications-echo\").then((m) => ({ default: m.NotificationsEcho })),\n);\n\nclass EchoBoundary extends Component<{ children: ReactNode }, { failed: boolean }> {\n  state = { failed: false };\n\n  static getDerivedStateFromError(): { failed: boolean } {\n    return { failed: true };\n  }\n\n  componentDidCatch(): void {\n    console.warn(\n      \"[lattice] The notifications bell declares a realtime channel but Echo is unavailable. Install @laravel/echo-react and call configureEcho().\",\n    );\n  }\n\n  render(): ReactNode {\n    return this.state.failed ? null : this.props.children;\n  }\n}\n\nconst NotificationsComponent: RendererComponent<\"notifications\"> = ({ node }) => {\n  const { t } = useT(\"lattice\");\n  const store = useNotifications({\n    endpoint: node.props.endpoint,\n    pollingInterval: node.props.pollingInterval,\n  });\n\n  const label = t(\"notifications.label\", \"Notifications\");\n\n  const trigger = (\n    <span className=\"relative inline-flex items-center justify-center rounded-lt-sm p-2 hover:bg-lt-muted\">\n      <Icon name=\"bell\" className=\"size-lt-icon-md\" />\n      {store.unreadCount > 0 ? (\n        <Badge\n          variant=\"destructive\"\n          data-test=\"notifications-badge\"\n          className=\"absolute -right-0.5 -top-0.5 min-w-4 px-1 py-0 text-[10px]\"\n        >\n          {store.unreadCount}\n        </Badge>\n      ) : null}\n    </span>\n  );\n\n  const panel = (\n    <div className=\"w-80\" data-test=\"notifications-panel\">\n      <div className=\"flex items-center justify-between border-b border-lt-border px-3 py-2\">\n        <span className=\"text-sm font-medium\">{t(\"notifications.heading\", \"Notifications\")}</span>\n        {store.unreadCount > 0 ? (\n          <button\n            type=\"button\"\n            className=\"text-xs text-lt-muted-fg hover:text-lt-fg\"\n            onClick={store.markAllRead}\n          >\n            {t(\"notifications.mark-all-read\", \"Mark all read\")}\n          </button>\n        ) : null}\n      </div>\n      <NotificationList\n        notifications={store.notifications}\n        status={store.status}\n        hasMore={store.hasMore}\n        onMarkRead={store.markRead}\n        onDismiss={store.dismiss}\n        onLoadMore={store.loadMore}\n      />\n    </div>\n  );\n\n  return (\n    <>\n      {node.props.channel ? (\n        <EchoBoundary>\n          <Suspense fallback={null}>\n            <NotificationsEcho\n              channel={node.props.channel}\n              onReceive={(item: NotificationItem) => store.receive(item)}\n            />\n          </Suspense>\n        </EchoBoundary>\n      ) : null}\n\n      {node.props.slideOut ? (\n        <>\n          <button\n            type=\"button\"\n            aria-label={label}\n            data-test=\"notifications-trigger\"\n            onClick={() => store.setOpen(true)}\n          >\n            {trigger}\n          </button>\n          <Dialog open={store.open} onOpenChange={store.setOpen}>\n            <DialogContent aria-describedby={undefined} className=\"p-0\" placement=\"end\" width=\"sm\">\n              <DialogTitle className=\"sr-only\">{label}</DialogTitle>\n              {panel}\n            </DialogContent>\n          </Dialog>\n        </>\n      ) : (\n        <PopoverRoot open={store.open} onOpenChange={store.setOpen}>\n          <PopoverTrigger asChild>\n            <button type=\"button\" aria-label={label} data-test=\"notifications-trigger\">\n              {trigger}\n            </button>\n          </PopoverTrigger>\n          <PopoverContent align=\"end\" className=\"p-0\">\n            {panel}\n          </PopoverContent>\n        </PopoverRoot>\n      )}\n    </>\n  );\n};\n\nexport default NotificationsComponent;\n"],"mappings":";;;;;;;;;;AAeA,IAAM,oBAAoB,WACxB,OAAO,2BAAwB,MAAM,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAC/E;AAEA,IAAM,eAAN,cAA2B,UAAwD;CACjF,QAAQ,EAAE,QAAQ,MAAM;CAExB,OAAO,2BAAgD;EACrD,OAAO,EAAE,QAAQ,KAAK;CACxB;CAEA,oBAA0B;EACxB,QAAQ,KACN,6IACF;CACF;CAEA,SAAoB;EAClB,OAAO,KAAK,MAAM,SAAS,OAAO,KAAK,MAAM;CAC/C;AACF;AAEA,IAAM,0BAA8D,EAAE,WAAW;CAC/E,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,QAAQ,iBAAiB;EAC7B,UAAU,KAAK,MAAM;EACrB,iBAAiB,KAAK,MAAM;CAC9B,CAAC;CAED,MAAM,QAAQ,EAAE,uBAAuB,eAAe;CAEtD,MAAM,UACJ,qBAAC,QAAD;EAAM,WAAU;YAAhB,CACE,oBAAC,MAAD;GAAM,MAAK;GAAO,WAAU;EAAmB,CAAA,GAC9C,MAAM,cAAc,IACnB,oBAAC,OAAD;GACE,SAAQ;GACR,aAAU;GACV,WAAU;aAET,MAAM;EACF,CAAA,IACL,IACA;;CAGR,MAAM,QACJ,qBAAC,OAAD;EAAK,WAAU;EAAO,aAAU;YAAhC,CACE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,QAAD;IAAM,WAAU;cAAuB,EAAE,yBAAyB,eAAe;GAAQ,CAAA,GACxF,MAAM,cAAc,IACnB,oBAAC,UAAD;IACE,MAAK;IACL,WAAU;IACV,SAAS,MAAM;cAEd,EAAE,+BAA+B,eAAe;GAC3C,CAAA,IACN,IACD;MACL,oBAAC,kBAAD;GACE,eAAe,MAAM;GACrB,QAAQ,MAAM;GACd,SAAS,MAAM;GACf,YAAY,MAAM;GAClB,WAAW,MAAM;GACjB,YAAY,MAAM;EACnB,CAAA,CACE;;CAGP,OACE,qBAAA,YAAA,EAAA,UAAA,CACG,KAAK,MAAM,UACV,oBAAC,cAAD,EAAA,UACE,oBAAC,UAAD;EAAU,UAAU;YAClB,oBAAC,mBAAD;GACE,SAAS,KAAK,MAAM;GACpB,YAAY,SAA2B,MAAM,QAAQ,IAAI;EAC1D,CAAA;CACO,CAAA,EACE,CAAA,IACZ,MAEH,KAAK,MAAM,WACV,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,UAAD;EACE,MAAK;EACL,cAAY;EACZ,aAAU;EACV,eAAe,MAAM,QAAQ,IAAI;YAEhC;CACK,CAAA,GACR,oBAAC,QAAD;EAAQ,MAAM,MAAM;EAAM,cAAc,MAAM;YAC5C,qBAAC,eAAD;GAAe,oBAAkB,KAAA;GAAW,WAAU;GAAM,WAAU;GAAM,OAAM;aAAlF,CACE,oBAAC,aAAD;IAAa,WAAU;cAAW;GAAmB,CAAA,GACpD,KACY;;CACT,CAAA,CACR,EAAA,CAAA,IAEF,qBAAC,SAAD;EAAa,MAAM,MAAM;EAAM,cAAc,MAAM;YAAnD,CACE,oBAAC,gBAAD;GAAgB,SAAA;aACd,oBAAC,UAAD;IAAQ,MAAK;IAAS,cAAY;IAAO,aAAU;cAChD;GACK,CAAA;EACM,CAAA,GAChB,oBAAC,gBAAD;GAAgB,OAAM;GAAM,WAAU;aACnC;EACa,CAAA,CACL;GAEf,EAAA,CAAA;AAEN"}
+{"version":3,"file":"notifications.js","names":[],"sources":["../../../resources/js/notifications/components/notifications.tsx"],"sourcesContent":["import { Component, lazy, Suspense, type ReactNode } from \"react\";\nimport { Dialog, DialogContent, DialogTitle } from \"@lattice-php/lattice/ui/dialog\";\nimport {\n  Popover as PopoverRoot,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@lattice-php/lattice/ui/popover\";\nimport { Icon } from \"@lattice-php/lattice/icons\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { useNotifications } from \"@lattice-php/lattice/notifications/store\";\nimport type { NotificationItem } from \"@lattice-php/lattice/notifications/types\";\nimport { NotificationList } from \"./notification-list\";\n\nconst NotificationsEcho = lazy(() =>\n  import(\"./notifications-echo\").then((m) => ({ default: m.NotificationsEcho })),\n);\n\nclass EchoBoundary extends Component<{ children: ReactNode }, { failed: boolean }> {\n  state = { failed: false };\n\n  static getDerivedStateFromError(): { failed: boolean } {\n    return { failed: true };\n  }\n\n  componentDidCatch(): void {\n    console.warn(\n      \"[lattice] The notifications bell declares a realtime channel but Echo is unavailable. Install @laravel/echo-react and call configureEcho().\",\n    );\n  }\n\n  render(): ReactNode {\n    return this.state.failed ? null : this.props.children;\n  }\n}\n\nconst NotificationsComponent: RendererComponent<\"notifications\"> = ({ node }) => {\n  const { t } = useT(\"lattice\");\n  const store = useNotifications({\n    endpoint: node.props.endpoint,\n    pollingInterval: node.props.pollingInterval,\n  });\n\n  const label = t(\"notifications.label\", \"Notifications\");\n\n  const trigger = (\n    <span className=\"relative inline-flex items-center justify-center rounded-lt-sm p-2 hover:bg-lt-muted\">\n      <Icon name=\"bell\" className=\"size-lt-icon-md\" />\n      {store.unreadCount > 0 ? (\n        <span\n          data-test=\"notifications-badge\"\n          className=\"absolute -right-0.5 -top-0.5 inline-flex min-w-4 items-center justify-center rounded-lt-full bg-lt-danger px-1 py-0 text-[10px] font-medium text-lt-danger-fg\"\n        >\n          {store.unreadCount}\n        </span>\n      ) : null}\n    </span>\n  );\n\n  const panel = (\n    <div className=\"w-80\" data-test=\"notifications-panel\">\n      <div className=\"flex items-center justify-between border-b border-lt-border px-3 py-2\">\n        <span className=\"text-sm font-medium\">{t(\"notifications.heading\", \"Notifications\")}</span>\n        {store.unreadCount > 0 ? (\n          <button\n            type=\"button\"\n            className=\"text-xs text-lt-muted-fg hover:text-lt-fg\"\n            onClick={store.markAllRead}\n          >\n            {t(\"notifications.mark-all-read\", \"Mark all read\")}\n          </button>\n        ) : null}\n      </div>\n      <NotificationList\n        notifications={store.notifications}\n        status={store.status}\n        hasMore={store.hasMore}\n        onMarkRead={store.markRead}\n        onDismiss={store.dismiss}\n        onLoadMore={store.loadMore}\n      />\n    </div>\n  );\n\n  return (\n    <>\n      {node.props.channel ? (\n        <EchoBoundary>\n          <Suspense fallback={null}>\n            <NotificationsEcho\n              channel={node.props.channel}\n              onReceive={(item: NotificationItem) => store.receive(item)}\n            />\n          </Suspense>\n        </EchoBoundary>\n      ) : null}\n\n      {node.props.slideOut ? (\n        <>\n          <button\n            type=\"button\"\n            aria-label={label}\n            data-test=\"notifications-trigger\"\n            onClick={() => store.setOpen(true)}\n          >\n            {trigger}\n          </button>\n          <Dialog open={store.open} onOpenChange={store.setOpen}>\n            <DialogContent aria-describedby={undefined} className=\"p-0\" placement=\"end\" width=\"sm\">\n              <DialogTitle className=\"sr-only\">{label}</DialogTitle>\n              {panel}\n            </DialogContent>\n          </Dialog>\n        </>\n      ) : (\n        <PopoverRoot open={store.open} onOpenChange={store.setOpen}>\n          <PopoverTrigger asChild>\n            <button type=\"button\" aria-label={label} data-test=\"notifications-trigger\">\n              {trigger}\n            </button>\n          </PopoverTrigger>\n          <PopoverContent align=\"end\" className=\"p-0\">\n            {panel}\n          </PopoverContent>\n        </PopoverRoot>\n      )}\n    </>\n  );\n};\n\nexport default NotificationsComponent;\n"],"mappings":";;;;;;;;;AAcA,IAAM,oBAAoB,WACxB,OAAO,2BAAwB,MAAM,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAC/E;AAEA,IAAM,eAAN,cAA2B,UAAwD;CACjF,QAAQ,EAAE,QAAQ,MAAM;CAExB,OAAO,2BAAgD;EACrD,OAAO,EAAE,QAAQ,KAAK;CACxB;CAEA,oBAA0B;EACxB,QAAQ,KACN,6IACF;CACF;CAEA,SAAoB;EAClB,OAAO,KAAK,MAAM,SAAS,OAAO,KAAK,MAAM;CAC/C;AACF;AAEA,IAAM,0BAA8D,EAAE,WAAW;CAC/E,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,QAAQ,iBAAiB;EAC7B,UAAU,KAAK,MAAM;EACrB,iBAAiB,KAAK,MAAM;CAC9B,CAAC;CAED,MAAM,QAAQ,EAAE,uBAAuB,eAAe;CAEtD,MAAM,UACJ,qBAAC,QAAD;EAAM,WAAU;YAAhB,CACE,oBAAC,MAAD;GAAM,MAAK;GAAO,WAAU;EAAmB,CAAA,GAC9C,MAAM,cAAc,IACnB,oBAAC,QAAD;GACE,aAAU;GACV,WAAU;aAET,MAAM;EACH,CAAA,IACJ,IACA;;CAGR,MAAM,QACJ,qBAAC,OAAD;EAAK,WAAU;EAAO,aAAU;YAAhC,CACE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,QAAD;IAAM,WAAU;cAAuB,EAAE,yBAAyB,eAAe;GAAQ,CAAA,GACxF,MAAM,cAAc,IACnB,oBAAC,UAAD;IACE,MAAK;IACL,WAAU;IACV,SAAS,MAAM;cAEd,EAAE,+BAA+B,eAAe;GAC3C,CAAA,IACN,IACD;MACL,oBAAC,kBAAD;GACE,eAAe,MAAM;GACrB,QAAQ,MAAM;GACd,SAAS,MAAM;GACf,YAAY,MAAM;GAClB,WAAW,MAAM;GACjB,YAAY,MAAM;EACnB,CAAA,CACE;;CAGP,OACE,qBAAA,YAAA,EAAA,UAAA,CACG,KAAK,MAAM,UACV,oBAAC,cAAD,EAAA,UACE,oBAAC,UAAD;EAAU,UAAU;YAClB,oBAAC,mBAAD;GACE,SAAS,KAAK,MAAM;GACpB,YAAY,SAA2B,MAAM,QAAQ,IAAI;EAC1D,CAAA;CACO,CAAA,EACE,CAAA,IACZ,MAEH,KAAK,MAAM,WACV,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,UAAD;EACE,MAAK;EACL,cAAY;EACZ,aAAU;EACV,eAAe,MAAM,QAAQ,IAAI;YAEhC;CACK,CAAA,GACR,oBAAC,QAAD;EAAQ,MAAM,MAAM;EAAM,cAAc,MAAM;YAC5C,qBAAC,eAAD;GAAe,oBAAkB,KAAA;GAAW,WAAU;GAAM,WAAU;GAAM,OAAM;aAAlF,CACE,oBAAC,aAAD;IAAa,WAAU;cAAW;GAAmB,CAAA,GACpD,KACY;;CACT,CAAA,CACR,EAAA,CAAA,IAEF,qBAAC,SAAD;EAAa,MAAM,MAAM;EAAM,cAAc,MAAM;YAAnD,CACE,oBAAC,gBAAD;GAAgB,SAAA;aACd,oBAAC,UAAD;IAAQ,MAAK;IAAS,cAAY;IAAO,aAAU;cAChD;GACK,CAAA;EACM,CAAA,GAChB,oBAAC,gBAAD;GAAgB,OAAM;GAAM,WAAU;aACnC;EACa,CAAA,CACL;GAEf,EAAA,CAAA;AAEN"}

package/dist/table/components/bulk-bar.js

@@ -66,6 +66,7 @@ function BulkBar({ actions, selectedKeys, allMatching, total, query, canSelectAl
 					type: "button",
 					"data-test": prefixedTestId("bulk-action", action.id),
 					variant: action.variant,
+					emphasis: action.emphasis,
 					disabled: processing,
 					onClick: () => run(action),
 					children: [processing && /* @__PURE__ */ jsx(Spinner, {}), action.label]
@@ -77,6 +78,7 @@ function BulkBar({ actions, selectedKeys, allMatching, total, query, canSelectAl
 				confirmLabel: confirming.confirmation.confirmLabel ?? confirming.label,
 				cancelLabel: confirming.confirmation.cancelLabel ?? t("common.cancel", "Cancel"),
 				confirmVariant: confirming.variant,
+				confirmEmphasis: confirming.emphasis,
 				processing,
 				onConfirm: () => void submit(confirming),
 				onCancel: () => setConfirming(null)

package/dist/table/components/bulk-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"bulk-bar.js","names":[],"sources":["../../../resources/js/table/components/bulk-bar.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { ActionForm, runAction } from \"@lattice-php/lattice/action\";\nimport { apiFetch } from \"@lattice-php/lattice/core/api\";\nimport { useEffectDispatcher } from \"@lattice-php/lattice/effects/use-effect-dispatcher\";\nimport { Button } from \"@lattice-php/lattice/ui/button\";\nimport { ConfirmDialog } from \"@lattice-php/lattice/ui/confirm-dialog\";\nimport { Spinner } from \"@lattice-php/lattice/ui/spinner\";\nimport { prefixedTestId } from \"@lattice-php/lattice/core/test-id\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { BulkAction } from \"@lattice-php/lattice/table/lib/bulk\";\n\nexport function BulkBar({\n  actions,\n  selectedKeys,\n  allMatching,\n  total,\n  query,\n  canSelectAllMatching,\n  onSelectAllMatching,\n  onCompleted,\n}: {\n  actions: BulkAction[];\n  selectedKeys: string[];\n  allMatching: boolean;\n  total?: number;\n  query: Record<string, unknown>;\n  canSelectAllMatching: boolean;\n  onSelectAllMatching: () => void;\n  onCompleted: () => void;\n}) {\n  const { t } = useT(\"lattice\");\n  const [processing, setProcessing] = useState(false);\n  const dispatch = useEffectDispatcher();\n  const [confirming, setConfirming] = useState<BulkAction | null>(null);\n  const [filling, setFilling] = useState<BulkAction | null>(null);\n\n  const selectionPayload = (): Record<string, unknown> =>\n    allMatching ? { allMatching: true, ...query } : { selected: selectedKeys };\n\n  async function submit(action: BulkAction): Promise<void> {\n    setProcessing(true);\n\n    const ok = await runAction(\n      () =>\n        apiFetch(action.endpoint, {\n          method: action.method,\n          ref: action.ref,\n          body: JSON.stringify(selectionPayload()),\n          throwOnError: false,\n        }),\n      dispatch,\n    );\n\n    setProcessing(false);\n\n    if (ok) {\n      setConfirming(null);\n      onCompleted();\n    }\n  }\n\n  function run(action: BulkAction): void {\n    if (action.form) {\n      setFilling(action);\n\n      return;\n    }\n\n    if (action.confirmation) {\n      setConfirming(action);\n\n      return;\n    }\n\n    void submit(action);\n  }\n\n  const count = allMatching ? (total ?? selectedKeys.length) : selectedKeys.length;\n\n  return (\n    <div className=\"flex flex-wrap items-center gap-3 border-b border-lt-border bg-lt-muted/50 p-4 text-sm\">\n      <span className=\"font-medium\">\n        {allMatching\n          ? t(\"table.bulk.all-selected\", \"All {{count}} selected\", { count })\n          : t(\"table.bulk.selected\", \"{{count}} selected\", { count })}\n      </span>\n      {canSelectAllMatching && (\n        <button\n          type=\"button\"\n          data-test=\"bulk-select-all-matching\"\n          className=\"font-medium text-lt-primary underline underline-offset-2\"\n          onClick={onSelectAllMatching}\n        >\n          {t(\"table.bulk.select-all-matching\", \"Select all {{total}} matching\", { total })}\n        </button>\n      )}\n      <div className=\"flex flex-wrap items-center gap-2\">\n        {actions.map((action) => (\n          <Button\n            key={action.id}\n            type=\"button\"\n            data-test={prefixedTestId(\"bulk-action\", action.id)}\n            variant={action.variant}\n            disabled={processing}\n            onClick={() => run(action)}\n          >\n            {processing && <Spinner />}\n            {action.label}\n          </Button>\n        ))}\n      </div>\n\n      {confirming?.confirmation && (\n        <ConfirmDialog\n          title={confirming.confirmation.title ?? confirming.label}\n          description={confirming.confirmation.description ?? undefined}\n          confirmLabel={confirming.confirmation.confirmLabel ?? confirming.label}\n          cancelLabel={confirming.confirmation.cancelLabel ?? t(\"common.cancel\", \"Cancel\")}\n          confirmVariant={confirming.variant}\n          processing={processing}\n          onConfirm={() => void submit(confirming)}\n          onCancel={() => setConfirming(null)}\n        />\n      )}\n\n      {filling?.form && (\n        <ActionForm\n          cancelLabel={filling.confirmation?.cancelLabel ?? t(\"common.cancel\", \"Cancel\")}\n          componentRef={filling.ref}\n          description={filling.confirmation?.description ?? undefined}\n          endpoint={filling.endpoint}\n          extraData={selectionPayload()}\n          formNode={filling.form}\n          method={filling.method}\n          onClose={() => setFilling(null)}\n          onSuccess={() => {\n            setFilling(null);\n            onCompleted();\n          }}\n          placement={filling.modalSide ?? \"center\"}\n          submitLabel={filling.confirmation?.confirmLabel ?? filling.label}\n          title={filling.confirmation?.title ?? filling.label}\n          width={filling.modalWidth ?? undefined}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAWA,SAAgB,QAAQ,EACtB,SACA,cACA,aACA,OACA,OACA,sBACA,qBACA,eAUC;CACD,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;CAClD,MAAM,WAAW,oBAAoB;CACrC,MAAM,CAAC,YAAY,iBAAiB,SAA4B,IAAI;CACpE,MAAM,CAAC,SAAS,cAAc,SAA4B,IAAI;CAE9D,MAAM,yBACJ,cAAc;EAAE,aAAa;EAAM,GAAG;CAAM,IAAI,EAAE,UAAU,aAAa;CAE3E,eAAe,OAAO,QAAmC;EACvD,cAAc,IAAI;EAElB,MAAM,KAAK,MAAM,gBAEb,SAAS,OAAO,UAAU;GACxB,QAAQ,OAAO;GACf,KAAK,OAAO;GACZ,MAAM,KAAK,UAAU,iBAAiB,CAAC;GACvC,cAAc;EAChB,CAAC,GACH,QACF;EAEA,cAAc,KAAK;EAEnB,IAAI,IAAI;GACN,cAAc,IAAI;GAClB,YAAY;EACd;CACF;CAEA,SAAS,IAAI,QAA0B;EACrC,IAAI,OAAO,MAAM;GACf,WAAW,MAAM;GAEjB;EACF;EAEA,IAAI,OAAO,cAAc;GACvB,cAAc,MAAM;GAEpB;EACF;EAEA,OAAY,MAAM;CACpB;CAEA,MAAM,QAAQ,cAAe,SAAS,aAAa,SAAU,aAAa;CAE1E,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,oBAAC,QAAD;IAAM,WAAU;cACb,cACG,EAAE,2BAA2B,0BAA0B,EAAE,MAAM,CAAC,IAChE,EAAE,uBAAuB,sBAAsB,EAAE,MAAM,CAAC;GACxD,CAAA;GACL,wBACC,oBAAC,UAAD;IACE,MAAK;IACL,aAAU;IACV,WAAU;IACV,SAAS;cAER,EAAE,kCAAkC,iCAAiC,EAAE,MAAM,CAAC;GACzE,CAAA;GAEV,oBAAC,OAAD;IAAK,WAAU;cACZ,QAAQ,KAAK,WACZ,qBAAC,QAAD;KAEE,MAAK;KACL,aAAW,eAAe,eAAe,OAAO,EAAE;KAClD,SAAS,OAAO;KAChB,UAAU;KACV,eAAe,IAAI,MAAM;eAN3B,CAQG,cAAc,oBAAC,SAAD,CAAU,CAAA,GACxB,OAAO,KACF;OATD,OAAO,EASN,CACT;GACE,CAAA;GAEJ,YAAY,gBACX,oBAAC,eAAD;IACE,OAAO,WAAW,aAAa,SAAS,WAAW;IACnD,aAAa,WAAW,aAAa,eAAe,KAAA;IACpD,cAAc,WAAW,aAAa,gBAAgB,WAAW;IACjE,aAAa,WAAW,aAAa,eAAe,EAAE,iBAAiB,QAAQ;IAC/E,gBAAgB,WAAW;IACf;IACZ,iBAAiB,KAAK,OAAO,UAAU;IACvC,gBAAgB,cAAc,IAAI;GACnC,CAAA;GAGF,SAAS,QACR,oBAAC,YAAD;IACE,aAAa,QAAQ,cAAc,eAAe,EAAE,iBAAiB,QAAQ;IAC7E,cAAc,QAAQ;IACtB,aAAa,QAAQ,cAAc,eAAe,KAAA;IAClD,UAAU,QAAQ;IAClB,WAAW,iBAAiB;IAC5B,UAAU,QAAQ;IAClB,QAAQ,QAAQ;IAChB,eAAe,WAAW,IAAI;IAC9B,iBAAiB;KACf,WAAW,IAAI;KACf,YAAY;IACd;IACA,WAAW,QAAQ,aAAa;IAChC,aAAa,QAAQ,cAAc,gBAAgB,QAAQ;IAC3D,OAAO,QAAQ,cAAc,SAAS,QAAQ;IAC9C,OAAO,QAAQ,cAAc,KAAA;GAC9B,CAAA;EAEA;;AAET"}
+{"version":3,"file":"bulk-bar.js","names":[],"sources":["../../../resources/js/table/components/bulk-bar.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { ActionForm, runAction } from \"@lattice-php/lattice/action\";\nimport { apiFetch } from \"@lattice-php/lattice/core/api\";\nimport { useEffectDispatcher } from \"@lattice-php/lattice/effects/use-effect-dispatcher\";\nimport { Button } from \"@lattice-php/lattice/ui/button\";\nimport { ConfirmDialog } from \"@lattice-php/lattice/ui/confirm-dialog\";\nimport { Spinner } from \"@lattice-php/lattice/ui/spinner\";\nimport { prefixedTestId } from \"@lattice-php/lattice/core/test-id\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { BulkAction } from \"@lattice-php/lattice/table/lib/bulk\";\n\nexport function BulkBar({\n  actions,\n  selectedKeys,\n  allMatching,\n  total,\n  query,\n  canSelectAllMatching,\n  onSelectAllMatching,\n  onCompleted,\n}: {\n  actions: BulkAction[];\n  selectedKeys: string[];\n  allMatching: boolean;\n  total?: number;\n  query: Record<string, unknown>;\n  canSelectAllMatching: boolean;\n  onSelectAllMatching: () => void;\n  onCompleted: () => void;\n}) {\n  const { t } = useT(\"lattice\");\n  const [processing, setProcessing] = useState(false);\n  const dispatch = useEffectDispatcher();\n  const [confirming, setConfirming] = useState<BulkAction | null>(null);\n  const [filling, setFilling] = useState<BulkAction | null>(null);\n\n  const selectionPayload = (): Record<string, unknown> =>\n    allMatching ? { allMatching: true, ...query } : { selected: selectedKeys };\n\n  async function submit(action: BulkAction): Promise<void> {\n    setProcessing(true);\n\n    const ok = await runAction(\n      () =>\n        apiFetch(action.endpoint, {\n          method: action.method,\n          ref: action.ref,\n          body: JSON.stringify(selectionPayload()),\n          throwOnError: false,\n        }),\n      dispatch,\n    );\n\n    setProcessing(false);\n\n    if (ok) {\n      setConfirming(null);\n      onCompleted();\n    }\n  }\n\n  function run(action: BulkAction): void {\n    if (action.form) {\n      setFilling(action);\n\n      return;\n    }\n\n    if (action.confirmation) {\n      setConfirming(action);\n\n      return;\n    }\n\n    void submit(action);\n  }\n\n  const count = allMatching ? (total ?? selectedKeys.length) : selectedKeys.length;\n\n  return (\n    <div className=\"flex flex-wrap items-center gap-3 border-b border-lt-border bg-lt-muted/50 p-4 text-sm\">\n      <span className=\"font-medium\">\n        {allMatching\n          ? t(\"table.bulk.all-selected\", \"All {{count}} selected\", { count })\n          : t(\"table.bulk.selected\", \"{{count}} selected\", { count })}\n      </span>\n      {canSelectAllMatching && (\n        <button\n          type=\"button\"\n          data-test=\"bulk-select-all-matching\"\n          className=\"font-medium text-lt-primary underline underline-offset-2\"\n          onClick={onSelectAllMatching}\n        >\n          {t(\"table.bulk.select-all-matching\", \"Select all {{total}} matching\", { total })}\n        </button>\n      )}\n      <div className=\"flex flex-wrap items-center gap-2\">\n        {actions.map((action) => (\n          <Button\n            key={action.id}\n            type=\"button\"\n            data-test={prefixedTestId(\"bulk-action\", action.id)}\n            variant={action.variant}\n            emphasis={action.emphasis}\n            disabled={processing}\n            onClick={() => run(action)}\n          >\n            {processing && <Spinner />}\n            {action.label}\n          </Button>\n        ))}\n      </div>\n\n      {confirming?.confirmation && (\n        <ConfirmDialog\n          title={confirming.confirmation.title ?? confirming.label}\n          description={confirming.confirmation.description ?? undefined}\n          confirmLabel={confirming.confirmation.confirmLabel ?? confirming.label}\n          cancelLabel={confirming.confirmation.cancelLabel ?? t(\"common.cancel\", \"Cancel\")}\n          confirmVariant={confirming.variant}\n          confirmEmphasis={confirming.emphasis}\n          processing={processing}\n          onConfirm={() => void submit(confirming)}\n          onCancel={() => setConfirming(null)}\n        />\n      )}\n\n      {filling?.form && (\n        <ActionForm\n          cancelLabel={filling.confirmation?.cancelLabel ?? t(\"common.cancel\", \"Cancel\")}\n          componentRef={filling.ref}\n          description={filling.confirmation?.description ?? undefined}\n          endpoint={filling.endpoint}\n          extraData={selectionPayload()}\n          formNode={filling.form}\n          method={filling.method}\n          onClose={() => setFilling(null)}\n          onSuccess={() => {\n            setFilling(null);\n            onCompleted();\n          }}\n          placement={filling.modalSide ?? \"center\"}\n          submitLabel={filling.confirmation?.confirmLabel ?? filling.label}\n          title={filling.confirmation?.title ?? filling.label}\n          width={filling.modalWidth ?? undefined}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAWA,SAAgB,QAAQ,EACtB,SACA,cACA,aACA,OACA,OACA,sBACA,qBACA,eAUC;CACD,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;CAClD,MAAM,WAAW,oBAAoB;CACrC,MAAM,CAAC,YAAY,iBAAiB,SAA4B,IAAI;CACpE,MAAM,CAAC,SAAS,cAAc,SAA4B,IAAI;CAE9D,MAAM,yBACJ,cAAc;EAAE,aAAa;EAAM,GAAG;CAAM,IAAI,EAAE,UAAU,aAAa;CAE3E,eAAe,OAAO,QAAmC;EACvD,cAAc,IAAI;EAElB,MAAM,KAAK,MAAM,gBAEb,SAAS,OAAO,UAAU;GACxB,QAAQ,OAAO;GACf,KAAK,OAAO;GACZ,MAAM,KAAK,UAAU,iBAAiB,CAAC;GACvC,cAAc;EAChB,CAAC,GACH,QACF;EAEA,cAAc,KAAK;EAEnB,IAAI,IAAI;GACN,cAAc,IAAI;GAClB,YAAY;EACd;CACF;CAEA,SAAS,IAAI,QAA0B;EACrC,IAAI,OAAO,MAAM;GACf,WAAW,MAAM;GAEjB;EACF;EAEA,IAAI,OAAO,cAAc;GACvB,cAAc,MAAM;GAEpB;EACF;EAEA,OAAY,MAAM;CACpB;CAEA,MAAM,QAAQ,cAAe,SAAS,aAAa,SAAU,aAAa;CAE1E,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,oBAAC,QAAD;IAAM,WAAU;cACb,cACG,EAAE,2BAA2B,0BAA0B,EAAE,MAAM,CAAC,IAChE,EAAE,uBAAuB,sBAAsB,EAAE,MAAM,CAAC;GACxD,CAAA;GACL,wBACC,oBAAC,UAAD;IACE,MAAK;IACL,aAAU;IACV,WAAU;IACV,SAAS;cAER,EAAE,kCAAkC,iCAAiC,EAAE,MAAM,CAAC;GACzE,CAAA;GAEV,oBAAC,OAAD;IAAK,WAAU;cACZ,QAAQ,KAAK,WACZ,qBAAC,QAAD;KAEE,MAAK;KACL,aAAW,eAAe,eAAe,OAAO,EAAE;KAClD,SAAS,OAAO;KAChB,UAAU,OAAO;KACjB,UAAU;KACV,eAAe,IAAI,MAAM;eAP3B,CASG,cAAc,oBAAC,SAAD,CAAU,CAAA,GACxB,OAAO,KACF;OAVD,OAAO,EAUN,CACT;GACE,CAAA;GAEJ,YAAY,gBACX,oBAAC,eAAD;IACE,OAAO,WAAW,aAAa,SAAS,WAAW;IACnD,aAAa,WAAW,aAAa,eAAe,KAAA;IACpD,cAAc,WAAW,aAAa,gBAAgB,WAAW;IACjE,aAAa,WAAW,aAAa,eAAe,EAAE,iBAAiB,QAAQ;IAC/E,gBAAgB,WAAW;IAC3B,iBAAiB,WAAW;IAChB;IACZ,iBAAiB,KAAK,OAAO,UAAU;IACvC,gBAAgB,cAAc,IAAI;GACnC,CAAA;GAGF,SAAS,QACR,oBAAC,YAAD;IACE,aAAa,QAAQ,cAAc,eAAe,EAAE,iBAAiB,QAAQ;IAC7E,cAAc,QAAQ;IACtB,aAAa,QAAQ,cAAc,eAAe,KAAA;IAClD,UAAU,QAAQ;IAClB,WAAW,iBAAiB;IAC5B,UAAU,QAAQ;IAClB,QAAQ,QAAQ;IAChB,eAAe,WAAW,IAAI;IAC9B,iBAAiB;KACf,WAAW,IAAI;KACf,YAAY;IACd;IACA,WAAW,QAAQ,aAAa;IAChC,aAAa,QAAQ,cAAc,gBAAgB,QAAQ;IAC3D,OAAO,QAAQ,cAAc,SAAS,QAAQ;IAC9C,OAAO,QAAQ,cAAc,KAAA;GAC9B,CAAA;EAEA;;AAET"}