@spaceinvoices/react-ui 0.4.11 → 0.4.31

package/src/components/ui/sonner.tsx

@@ -1,43 +1,24 @@
-"use client"
+"use client";
 
-import { Toaster as Sonner, type ToasterProps } from "sonner"
-import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"
-
-// Try to use next-themes if available, otherwise fall back to system theme
-let useTheme: () => { theme?: string } = () => ({ theme: "system" })
-try {
-  // Dynamic import to avoid hard dependency on next-themes
-  const nextThemes = require("next-themes")
-  if (nextThemes?.useTheme) {
-    useTheme = nextThemes.useTheme
-  }
-} catch {
-  // next-themes not available, use fallback
-}
+import { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon } from "lucide-react";
+import { useTheme } from "next-themes";
+import type { CSSProperties } from "react";
+import { Toaster as Sonner, type ToasterProps } from "sonner";
 
 const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme()
+  const { resolvedTheme, theme } = useTheme();
+  const activeTheme = resolvedTheme || theme || "system";
 
   return (
     <Sonner
-      theme={theme as ToasterProps["theme"]}
+      theme={activeTheme as ToasterProps["theme"]}
       className="toaster group"
       icons={{
-        success: (
-          <CircleCheckIcon className="size-4" />
-        ),
-        info: (
-          <InfoIcon className="size-4" />
-        ),
-        warning: (
-          <TriangleAlertIcon className="size-4" />
-        ),
-        error: (
-          <OctagonXIcon className="size-4" />
-        ),
-        loading: (
-          <Loader2Icon className="size-4 animate-spin" />
-        ),
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
       }}
       style={
         {
@@ -45,7 +26,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
           "--normal-text": "var(--popover-foreground)",
           "--normal-border": "var(--border)",
           "--border-radius": "var(--radius)",
-        } as React.CSSProperties
+        } as CSSProperties
       }
       toastOptions={{
         classNames: {
@@ -54,7 +35,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
       }}
       {...props}
     />
-  )
-}
+  );
+};
 
-export { Toaster }
+export { Toaster };

package/src/components/ui/sticky-form-footer.tsx

@@ -33,13 +33,17 @@ export function StickyFormFooter({
     : { type: "submit" as const, form: formId };
 
   return (
-    <div className={cn("sticky bottom-0 z-10 border-t bg-sidebar px-4 py-3", className)}>
+    <div
+      className={cn("sticky bottom-0 z-10 border-t bg-sidebar px-4 py-3", className)}
+      data-demo={formId === "create-invoice-form" ? "marketing-demo-sticky-footer" : undefined}
+    >
       <div className="flex gap-2">
         <Button
           {...buttonProps}
           className="cursor-pointer px-8"
           disabled={isPending || !isDirty}
           data-testid={`${formId}-submit`}
+          data-demo={formId === "create-invoice-form" ? "marketing-demo-save-document" : undefined}
         >
           {isPending ? <ButtonLoader /> : label}
         </Button>
@@ -51,6 +55,7 @@ export function StickyFormFooter({
             disabled={secondaryAction.isPending || !isDirty}
             onClick={secondaryAction.onClick}
             data-testid={`${formId}-secondary-submit`}
+            data-demo={formId === "create-invoice-form" ? "marketing-demo-save-draft" : undefined}
           >
             {secondaryAction.isPending ? <ButtonLoader /> : secondaryAction.label}
           </Button>

package/src/components/ui/tooltip.tsx

@@ -5,6 +5,11 @@ import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"
 
 import { cn } from "@/ui/lib/utils"
 
+export const actionMenuTooltipProps = {
+  className: "border border-border bg-popover text-popover-foreground shadow-md",
+  arrowClassName: "bg-popover fill-popover",
+} as const
+
 function TooltipProvider({
   delay = 0,
   ...props
@@ -50,6 +55,7 @@ function TooltipTrigger({
 
 function TooltipContent({
   className,
+  arrowClassName,
   side = "top",
   sideOffset = 4,
   align = "center",
@@ -61,7 +67,9 @@ function TooltipContent({
   Pick<
     TooltipPrimitive.Positioner.Props,
     "align" | "alignOffset" | "side" | "sideOffset" | "positionMethod"
-  >) {
+  > & {
+    arrowClassName?: string
+  }) {
   return (
     <TooltipPrimitive.Portal>
       <TooltipPrimitive.Positioner
@@ -81,7 +89,12 @@ function TooltipContent({
           {...props}
         >
           {children}
-          <TooltipPrimitive.Arrow className="size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground z-50 data-[side=bottom]:top-1 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
+          <TooltipPrimitive.Arrow
+            className={cn(
+              "size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground z-50 data-[side=bottom]:top-1 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5",
+              arrowClassName
+            )}
+          />
         </TooltipPrimitive.Popup>
       </TooltipPrimitive.Positioner>
     </TooltipPrimitive.Portal>

package/src/components/webhook-logs/webhook-delivery-detail.tsx

@@ -60,39 +60,45 @@ function JsonViewer({ data, noDataLabel, t }: { data: unknown; noDataLabel: stri
 }
 
 function JsonHighlight({ json }: { json: string }) {
-  const tokens: { type: string; value: string }[] = [];
+  const tokens: { key: string; type: string; value: string }[] = [];
   const lines = json.split("\n");
+  let tokenKey = 0;
+
+  const pushToken = (type: string, value: string) => {
+    tokens.push({ key: `${type}:${tokenKey}`, type, value });
+    tokenKey += 1;
+  };
 
   for (const line of lines) {
     const keyMatch = line.match(/^(\s*)"([^"]+)":/);
     if (keyMatch) {
       const [, indent, key] = keyMatch;
       const rest = line.slice(keyMatch[0].length);
-      tokens.push({ type: "indent", value: indent });
-      tokens.push({ type: "key", value: `"${key}"` });
-      tokens.push({ type: "punctuation", value: ":" });
+      pushToken("indent", indent);
+      pushToken("key", `"${key}"`);
+      pushToken("punctuation", ":");
 
       const valueMatch = rest.match(/^\s*(.+?)(,?)$/);
       if (valueMatch) {
         const [, value, comma] = valueMatch;
-        tokens.push({ type: "space", value: " " });
+        pushToken("space", " ");
         if (value.startsWith('"')) {
-          tokens.push({ type: "string", value: value.replace(/,$/, "") });
+          pushToken("string", value.replace(/,$/, ""));
         } else if (value === "true" || value === "false") {
-          tokens.push({ type: "boolean", value });
+          pushToken("boolean", value);
         } else if (value === "null") {
-          tokens.push({ type: "null", value });
+          pushToken("null", value);
         } else if (!Number.isNaN(Number(value.replace(/,$/, "")))) {
-          tokens.push({ type: "number", value: value.replace(/,$/, "") });
+          pushToken("number", value.replace(/,$/, ""));
         } else {
-          tokens.push({ type: "other", value: value.replace(/,$/, "") });
+          pushToken("other", value.replace(/,$/, ""));
         }
-        if (comma) tokens.push({ type: "punctuation", value: comma });
+        if (comma) pushToken("punctuation", comma);
       }
     } else {
-      tokens.push({ type: "other", value: line });
+      pushToken("other", line);
     }
-    tokens.push({ type: "newline", value: "\n" });
+    pushToken("newline", "\n");
   }
 
   const colorMap: Record<string, string> = {
@@ -105,8 +111,8 @@ function JsonHighlight({ json }: { json: string }) {
 
   return (
     <code>
-      {tokens.map((token, i) => (
-        <span key={`${i}-${token.type}`} className={colorMap[token.type] || ""}>
+      {tokens.map((token) => (
+        <span key={token.key} className={colorMap[token.type] || ""}>
           {token.value}
         </span>
       ))}
@@ -241,13 +247,7 @@ function DeliveryIdDisplay({ deliveryId, t }: { deliveryId: string; t: Translati
     <div className="flex items-center gap-2 border-t pt-4 text-muted-foreground text-xs">
       <span>{t("Delivery ID")}:</span>
       <code className="font-mono">{deliveryId}</code>
-      <Button
-        variant="ghost"
-        size="sm"
-        className="h-6 w-6 p-0"
-        onClick={handleCopy}
-        title={t("Copy to clipboard")}
-      >
+      <Button variant="ghost" size="sm" className="h-6 w-6 p-0" onClick={handleCopy} title={t("Copy to clipboard")}>
         {copied ? <Check className="h-3 w-3 text-green-500" /> : <Copy className="h-3 w-3" />}
       </Button>
     </div>

package/src/components/webhook-logs/webhook-delivery-list-table.tsx

@@ -2,9 +2,10 @@
 
 import { getClientHeaders } from "@spaceinvoices/js-sdk";
 import { formatDistanceToNow } from "date-fns";
-import { useCallback, useMemo } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/ui/components/ui/sheet";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/ui/components/ui/tooltip";
+import { useMediaQuery } from "@/ui/hooks/use-media-query";
 import { AUTH_COOKIES } from "@/ui/lib/auth";
 import { getCookie } from "@/ui/lib/browser-cookies";
 import { getDateFnsLocale } from "@/ui/lib/date-fns-locale";
@@ -83,6 +84,8 @@ type WebhookDeliveryListTableProps = ListTableProps<WebhookDeliveryResponse> & {
   t?: (key: string) => string;
   /** Locale used for relative date formatting */
   locale?: string;
+  /** Locale used for UI string lookup */
+  translationLocale?: string;
 };
 
 export function WebhookDeliveryListTable({
@@ -95,8 +98,32 @@ export function WebhookDeliveryListTable({
   onSelectDelivery,
   t = (key) => key,
   locale,
+  translationLocale,
 }: WebhookDeliveryListTableProps) {
-  const translate = createTranslation({ t, locale, translations: mergedTranslations });
+  const translate = createTranslation({ t, locale, translationLocale, translations: mergedTranslations });
+  const isLargeScreen = useMediaQuery("(min-width: 1280px)");
+  const tableContainerRef = useRef<HTMLDivElement>(null);
+  const [detailPanelHeight, setDetailPanelHeight] = useState<number>();
+
+  useEffect(() => {
+    if (!isLargeScreen) {
+      setDetailPanelHeight(undefined);
+      return;
+    }
+
+    const node = tableContainerRef.current;
+    if (!node) return;
+
+    const updateHeight = () => setDetailPanelHeight(node.offsetHeight);
+    updateHeight();
+
+    if (typeof ResizeObserver === "undefined") return;
+
+    const observer = new ResizeObserver(updateHeight);
+    observer.observe(node);
+
+    return () => observer.disconnect();
+  }, [isLargeScreen]);
 
   const handleFetch = useCallback(
     async (params: TableQueryParams): Promise<TableQueryResponse<WebhookDeliveryResponse>> => {
@@ -233,22 +260,70 @@ export function WebhookDeliveryListTable({
     ? `${WEBHOOK_LOGS_CACHE_KEY}-${entityId}`
     : `${WEBHOOK_LOGS_CACHE_KEY}-account-${environment || "live"}`;
 
+  const detailContent = selectedDelivery ? (
+    <WebhookDeliveryDetail delivery={selectedDelivery} t={translate} locale={locale} />
+  ) : null;
+
+  const desktopDetailPanel = selectedDelivery ? (
+    <>
+      <div className="flex items-start justify-between gap-3 border-b px-5 py-4">
+        <div className="min-w-0">
+          <div className="mb-2 text-muted-foreground text-xs uppercase tracking-wide">
+            {translate("Webhook delivery details")}
+          </div>
+          <div className="flex items-center gap-2">
+            <StatusBadge status={selectedDelivery.status} t={translate} />
+            <span className="truncate font-mono text-sm">{selectedDelivery.event_type}</span>
+          </div>
+        </div>
+        {onSelectDelivery && (
+          <button
+            type="button"
+            className="text-muted-foreground text-sm transition-colors hover:text-foreground"
+            onClick={() => onSelectDelivery(null)}
+          >
+            {translate("Close")}
+          </button>
+        )}
+      </div>
+      <div className="min-h-0 flex-1 overflow-y-auto">{detailContent}</div>
+    </>
+  ) : null;
+
   return (
     <>
-      <DataTable
-        columns={columns}
-        cacheKey={cacheKey}
-        resourceName="webhook delivery"
-        onFetch={handleFetch}
-        queryParams={queryParams}
-        onChangeParams={onChangeParams}
-        entityId={entityId}
-        filterConfig={filterConfig}
-        onRowClick={(d) => onSelectDelivery?.(d)}
-        t={translate}
-      />
-
-      <Sheet open={!!selectedDelivery} onOpenChange={(open) => !open && onSelectDelivery?.(null)}>
+      <div
+        className={cn(
+          isLargeScreen && selectedDelivery && "grid gap-6 xl:grid-cols-[minmax(0,0.9fr)_minmax(28rem,1.1fr)]",
+        )}
+      >
+        <div ref={tableContainerRef} className="min-w-0">
+          <DataTable
+            columns={columns}
+            cacheKey={cacheKey}
+            resourceName="webhook delivery"
+            onFetch={handleFetch}
+            queryParams={queryParams}
+            onChangeParams={onChangeParams}
+            entityId={entityId}
+            filterConfig={filterConfig}
+            onRowClick={(d) => onSelectDelivery?.(d)}
+            t={translate}
+          />
+        </div>
+
+        {isLargeScreen && selectedDelivery && (
+          <aside
+            className="flex min-w-0 flex-col overflow-hidden rounded-lg border bg-background xl:sticky xl:top-6"
+            aria-label={translate("Webhook delivery details")}
+            style={detailPanelHeight ? { height: `${detailPanelHeight}px` } : undefined}
+          >
+            {desktopDetailPanel}
+          </aside>
+        )}
+      </div>
+
+      <Sheet open={!isLargeScreen && !!selectedDelivery} onOpenChange={(open) => !open && onSelectDelivery?.(null)}>
         <SheetContent className="w-full overflow-y-auto sm:max-w-2xl">
           <SheetHeader>
             <SheetTitle className="flex items-center gap-2">
@@ -260,7 +335,7 @@ export function WebhookDeliveryListTable({
               )}
             </SheetTitle>
           </SheetHeader>
-          {selectedDelivery && <WebhookDeliveryDetail delivery={selectedDelivery} t={translate} locale={locale} />}
+          {detailContent}
         </SheetContent>
       </Sheet>
     </>

package/src/components/wl-subscription/locked-feature.tsx

@@ -133,11 +133,12 @@ export function UsageBadge() {
 
   if (!plan || !usage) return null;
 
-  if (plan.limits?.documents_per_month === null) {
+  const limit = plan.limits?.invoices_per_month ?? plan.limits?.documents_per_month;
+  const count = plan.limits?.invoices_per_month != null ? usage.invoices_count : usage.documents_count;
+
+  if (limit == null) {
     return null; // Unlimited - no badge needed
   }
-
-  const limit = plan.limits?.documents_per_month ?? 0;
   const isNearLimit = percentage >= 80;
   const isAtLimit = percentage >= 100;
 
@@ -151,7 +152,7 @@ export function UsageBadge() {
             : "bg-muted text-muted-foreground"
       }`}
     >
-      {usage.documents_count}/{limit} docs
+      {count}/{limit} invoices
     </div>
   );
 }
@@ -159,16 +160,16 @@ export function UsageBadge() {
 // Helper to get default locked message for a feature
 function getDefaultLockedMessage(feature: GatedFeature): string {
   const messages: Record<GatedFeature, string> = {
-    furs: "FURS fiscalization requires a Starter or Advanced plan",
-    fina: "FINA fiscalization requires a Starter or Advanced plan",
-    eslog: "eSlog export requires a Starter or Advanced plan",
-    recurring: "Recurring invoices require a Starter or Advanced plan",
-    email_sending: "Email sending requires a Starter or Advanced plan",
+    furs: "FURS fiscalization requires an Advanced or Pro plan",
+    fina: "FINA fiscalization requires an Advanced or Pro plan",
+    eslog: "eSlog export requires an Advanced or Pro plan",
+    recurring: "Recurring invoices require an Advanced or Pro plan",
+    email_sending: "Email sending requires an Advanced or Pro plan",
     custom_templates: "Custom templates require an Advanced plan",
     api_access: "API access requires an Advanced plan",
     webhooks: "Webhooks require an Advanced plan",
     priority_support: "Priority support requires an Advanced plan",
-    e_invoicing: "E-Invoicing requires a Starter or Advanced plan",
+    e_invoicing: "E-Invoicing requires an Advanced or Pro plan",
   };
 
   return messages[feature] || "This feature requires a plan upgrade";