@robosystems/core 0.10.0 → 0.11.1

package/components/PageLayout.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { twMerge } from 'tailwind-merge';
 export function PageLayout({ children, variant = 'constrained', className, }) {
-    return (_jsx("div", { className: twMerge('space-y-6 p-6', variant === 'constrained' && 'mx-auto max-w-7xl', className), children: children }));
+    return (_jsx("div", { className: twMerge('space-y-6 p-4 sm:p-6', variant === 'constrained' && 'mx-auto max-w-7xl', className), children: children }));
 }

package/components/console/ConsoleContent.js

@@ -665,7 +665,7 @@ export function ConsoleContent({ config }) {
     };
     // ── Render ──────────────────────────────────────────────────────────
     const { header } = config;
-    return (_jsxs("div", { className: "mx-auto max-w-7xl space-y-6 p-6", children: [_jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: `rounded-lg bg-gradient-to-br ${header.gradientFrom} ${header.gradientTo} p-3`, children: _jsx(HiTerminal, { className: "h-8 w-8 text-white" }) }), _jsxs("div", { children: [_jsx("h1", { className: "font-heading text-3xl font-bold text-gray-900 dark:text-white", children: header.title }), _jsx("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: header.subtitle })] })] }), (streamingQuery.isStreaming || operatorProgress.isRunning) && (_jsxs("div", { className: "flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400", children: [_jsx("span", { className: "inline-block h-2 w-2 animate-pulse rounded-full bg-green-500" }), operatorProgress.isRunning && operatorProgress.message
+    return (_jsxs("div", { className: "mx-auto max-w-7xl space-y-6 p-4 sm:p-6", children: [_jsxs("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between sm:gap-4", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-3 sm:gap-4", children: [_jsx("div", { className: `shrink-0 rounded-lg bg-gradient-to-br ${header.gradientFrom} ${header.gradientTo} p-2.5 sm:p-3`, children: _jsx(HiTerminal, { className: "h-6 w-6 text-white sm:h-8 sm:w-8" }) }), _jsxs("div", { className: "min-w-0", children: [_jsx("h1", { className: "font-heading text-2xl font-bold break-words text-gray-900 sm:text-3xl dark:text-white", children: header.title }), _jsx("p", { className: "mt-1 text-sm break-words text-gray-500 dark:text-gray-400", children: header.subtitle })] })] }), (streamingQuery.isStreaming || operatorProgress.isRunning) && (_jsxs("div", { className: "flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400", children: [_jsx("span", { className: "inline-block h-2 w-2 animate-pulse rounded-full bg-green-500" }), operatorProgress.isRunning && operatorProgress.message
                                 ? operatorProgress.message
                                 : 'Processing...', operatorProgress.percentage !== undefined &&
                                 ` (${operatorProgress.percentage}%)`] }))] }), _jsx(Card, { className: "overflow-hidden bg-gray-950 !p-0 [&>div]:!p-0", children: _jsxs("div", { className: "flex flex-col bg-gray-950", style: { height: 'calc(100vh - 280px)' }, children: [_jsxs("div", { ref: terminalScrollRef, className: "flex-1 overflow-y-auto p-4 font-mono text-sm", children: [terminalMessages.map((message) => (_jsxs("div", { className: "mb-4", children: [_jsxs("div", { className: "mb-1 flex items-center gap-2 text-xs text-gray-700", children: [_jsx("span", { children: message.timestamp.toLocaleTimeString() }), _jsx("span", { children: "-" }), _jsx("span", { className: "tracking-wider uppercase", children: message.type })] }), _jsxs("div", { className: `leading-relaxed break-words ${message.markdown && !message.isAnimating

package/components/repositories/ActiveSubscriptions.js

@@ -91,7 +91,7 @@ export function ActiveSubscriptions({ onOpenConsole, onOpenUsage, onGettingStart
         }
         onBackups === null || onBackups === void 0 ? void 0 : onBackups(repositoryId);
     };
-    return (_jsxs("div", { className: "space-y-6", children: [_jsx(ToastContainer, {}), _jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "from-primary-500 to-secondary-600 rounded-lg bg-gradient-to-br p-3", children: _jsx(HiGlobeAlt, { className: "h-8 w-8 text-white" }) }), _jsxs("div", { children: [_jsx("h1", { className: "font-heading text-3xl font-bold text-zinc-900 dark:text-zinc-100", children: "Repository Subscriptions" }), _jsx("p", { className: "mt-1 text-sm text-zinc-500 dark:text-zinc-400", children: "Browse shared public datasets" })] })] }), onBrowse && (_jsxs(Button, { onClick: onBrowse, color: "purple", children: [_jsx(HiGlobeAlt, { className: "mr-2 h-4 w-4" }), "Browse Repositories"] }))] }), activeSubscriptions.map((subscription) => {
+    return (_jsxs("div", { className: "space-y-6", children: [_jsx(ToastContainer, {}), _jsxs("div", { className: "flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-3 sm:gap-4", children: [_jsx("div", { className: "from-primary-500 to-secondary-600 shrink-0 rounded-lg bg-gradient-to-br p-2.5 sm:p-3", children: _jsx(HiGlobeAlt, { className: "h-6 w-6 text-white sm:h-8 sm:w-8" }) }), _jsxs("div", { className: "min-w-0", children: [_jsx("h1", { className: "font-heading text-2xl font-bold break-words text-zinc-900 sm:text-3xl dark:text-zinc-100", children: "Repository Subscriptions" }), _jsx("p", { className: "mt-1 text-sm text-zinc-500 dark:text-zinc-400", children: "Browse shared public datasets" })] })] }), onBrowse && (_jsxs(Button, { onClick: onBrowse, color: "purple", children: [_jsx(HiGlobeAlt, { className: "mr-2 h-4 w-4" }), "Browse Repositories"] }))] }), activeSubscriptions.map((subscription) => {
                 var _a, _b, _c;
                 const repoOffering = (_a = offerings === null || offerings === void 0 ? void 0 : offerings.repositoryPlans) === null || _a === void 0 ? void 0 : _a[subscription.resource_id];
                 const planFeatures = (_c = (_b = repoOffering === null || repoOffering === void 0 ? void 0 : repoOffering.plans) === null || _b === void 0 ? void 0 : _b.find((p) => p.plan.toLowerCase() === subscription.plan_name.toLowerCase())) === null || _c === void 0 ? void 0 : _c.features;

package/components/repositories/BrowseRepositories.js

@@ -133,7 +133,7 @@ export function BrowseRepositories({ onSubscribed, onViewSubscriptions, showHead
     }
     // Check if user has any active subscriptions
     const hasActiveSubscriptions = userSubscriptions.some((sub) => sub.status === 'active');
-    return (_jsxs("div", { className: "space-y-6", children: [_jsx(ToastContainer, {}), showHeader && (_jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "from-primary-500 to-secondary-600 rounded-lg bg-gradient-to-br p-3", children: _jsx(HiGlobeAlt, { className: "h-8 w-8 text-white" }) }), _jsxs("div", { children: [_jsx("h1", { className: "font-heading text-3xl font-bold text-zinc-900 dark:text-zinc-100", children: "Browse Repositories" }), _jsx("p", { className: "mt-1 text-sm text-zinc-500 dark:text-zinc-400", children: "Subscribe to read-only graph databases containing curated data" })] })] }), hasActiveSubscriptions && onViewSubscriptions && (_jsx(Button, { onClick: onViewSubscriptions, color: "gray", children: "View My Subscriptions" }))] })), showInfoCard && (_jsx(Card, { children: _jsxs("div", { className: "flex items-start gap-4", children: [_jsx("div", { className: "bg-primary-100 dark:bg-primary-900/30 rounded-lg p-3", children: _jsx(HiInformationCircle, { className: "text-primary-600 dark:text-primary-400 h-6 w-6" }) }), _jsxs("div", { className: "flex-1", children: [_jsx("h3", { className: "font-heading mb-3 text-lg font-semibold text-zinc-900 dark:text-white", children: "How Shared Repositories Work" }), _jsxs("div", { className: "grid gap-3 sm:grid-cols-2 lg:grid-cols-4", children: [_jsxs("div", { className: "flex items-start gap-2", children: [_jsx("div", { className: "bg-primary-500 mt-1 h-2 w-2 rounded-full" }), _jsx("span", { className: "text-sm text-zinc-600 dark:text-zinc-400", children: "Subscribe to gain read-only access to curated graph databases" })] }), _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("div", { className: "bg-primary-500 mt-1 h-2 w-2 rounded-full" }), _jsx("span", { className: "text-sm text-zinc-600 dark:text-zinc-400", children: "Credits are used for AI agent calls - queries are unlimited" })] }), _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("div", { className: "bg-primary-500 mt-1 h-2 w-2 rounded-full" }), _jsx("span", { className: "text-sm text-zinc-600 dark:text-zinc-400", children: "Generate API keys to access repositories via MCP tools in AI apps" })] }), _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("div", { className: "bg-primary-500 mt-1 h-2 w-2 rounded-full" }), _jsx("span", { className: "text-sm text-zinc-600 dark:text-zinc-400", children: "Different tiers offer varying credit limits and features" })] })] })] })] }) })), (offerings === null || offerings === void 0 ? void 0 : offerings.repositoryPlans) &&
+    return (_jsxs("div", { className: "space-y-6", children: [_jsx(ToastContainer, {}), showHeader && (_jsxs("div", { className: "flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-3 sm:gap-4", children: [_jsx("div", { className: "from-primary-500 to-secondary-600 shrink-0 rounded-lg bg-gradient-to-br p-2.5 sm:p-3", children: _jsx(HiGlobeAlt, { className: "h-6 w-6 text-white sm:h-8 sm:w-8" }) }), _jsxs("div", { className: "min-w-0", children: [_jsx("h1", { className: "font-heading text-2xl font-bold break-words text-zinc-900 sm:text-3xl dark:text-zinc-100", children: "Browse Repositories" }), _jsx("p", { className: "mt-1 text-sm text-zinc-500 dark:text-zinc-400", children: "Subscribe to read-only graph databases containing curated data" })] })] }), hasActiveSubscriptions && onViewSubscriptions && (_jsx(Button, { onClick: onViewSubscriptions, color: "gray", children: "View My Subscriptions" }))] })), showInfoCard && (_jsx(Card, { children: _jsxs("div", { className: "flex items-start gap-4", children: [_jsx("div", { className: "bg-primary-100 dark:bg-primary-900/30 rounded-lg p-3", children: _jsx(HiInformationCircle, { className: "text-primary-600 dark:text-primary-400 h-6 w-6" }) }), _jsxs("div", { className: "flex-1", children: [_jsx("h3", { className: "font-heading mb-3 text-lg font-semibold text-zinc-900 dark:text-white", children: "How Shared Repositories Work" }), _jsxs("div", { className: "grid gap-3 sm:grid-cols-2 lg:grid-cols-4", children: [_jsxs("div", { className: "flex items-start gap-2", children: [_jsx("div", { className: "bg-primary-500 mt-1 h-2 w-2 rounded-full" }), _jsx("span", { className: "text-sm text-zinc-600 dark:text-zinc-400", children: "Subscribe to gain read-only access to curated graph databases" })] }), _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("div", { className: "bg-primary-500 mt-1 h-2 w-2 rounded-full" }), _jsx("span", { className: "text-sm text-zinc-600 dark:text-zinc-400", children: "Credits are used for AI agent calls - queries are unlimited" })] }), _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("div", { className: "bg-primary-500 mt-1 h-2 w-2 rounded-full" }), _jsx("span", { className: "text-sm text-zinc-600 dark:text-zinc-400", children: "Generate API keys to access repositories via MCP tools in AI apps" })] }), _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("div", { className: "bg-primary-500 mt-1 h-2 w-2 rounded-full" }), _jsx("span", { className: "text-sm text-zinc-600 dark:text-zinc-400", children: "Different tiers offer varying credit limits and features" })] })] })] })] }) })), (offerings === null || offerings === void 0 ? void 0 : offerings.repositoryPlans) &&
                 Object.entries(offerings.repositoryPlans)
                     .filter(([_, repo]) => {
                     const repoData = repo;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@robosystems/core",
-  "version": "0.10.0",
+  "version": "0.11.1",
   "description": "Shared RoboSystems frontend core library (auth, contexts, task monitoring, UI components) for the RoboSystems Next.js apps",
   "license": "MIT",
   "private": false,

package/ui-components/layout/CoreNavbar.js

@@ -44,7 +44,7 @@ export function CoreNavbar({ appName, currentApp, apiUrl = process.env.NEXT_PUBL
         return (_jsxs(_Fragment, { children: [_jsx("div", { className: "hidden dark:block", children: _jsx(Tooltip, { content: "Toggle light mode", theme: customTheme.tooltip, children: _jsx(DarkThemeToggle, {}) }) }), _jsx("div", { className: "dark:hidden", children: _jsx(Tooltip, { content: "Toggle dark mode", theme: customTheme.tooltip, children: _jsx(DarkThemeToggle, {}) }) })] }));
     };
     const renderAppSwitcher = () => (_jsx(Tooltip, { content: "Switch apps", theme: customTheme.tooltip, children: _jsx(AppSwitcher, { apiUrl: apiUrl, currentApp: currentApp }) }));
-    return (_jsx(FlowbiteNavbar, { fluid: true, theme: customTheme.navbar, className: `fixed top-0 z-30 w-full border-b border-gray-200 p-0 ${borderColorClass} bg-white sm:p-0 dark:bg-black ${className}`, children: _jsx("div", { className: "w-full p-3 pr-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center", children: [_jsxs("button", { onClick: handleToggleSidebar, className: "mr-3 cursor-pointer rounded-sm p-2 text-gray-600 hover:bg-zinc-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-zinc-700 dark:hover:text-white", children: [_jsx("span", { className: "sr-only", children: "Toggle sidebar" }), _jsx("div", { className: "lg:hidden", children: sidebar.mobile.isOpen ? (_jsx(HiX, { className: "h-6 w-6" })) : (_jsx(HiMenuAlt1, { className: "h-6 w-6" })) }), _jsx("div", { className: "hidden lg:block", children: _jsx(HiMenuAlt1, { className: "h-6 w-6" }) })] }), _jsxs(NavbarBrand, { as: Link, href: homeHref, className: "mr-14", children: [_jsx(LogoBadge, { app: currentApp, animate: "once", className: "mr-2 h-10 w-10" }), _jsx("span", { className: "font-heading mt-2 ml-1 self-center text-2xl font-semibold whitespace-nowrap text-gray-900 dark:text-white", children: appName })] })] }), _jsx("div", { className: "flex items-center lg:gap-3", children: _jsxs("div", { className: "flex items-center", children: [additionalComponents && (_jsx("div", { className: "mr-2 hidden md:block", children: additionalComponents })), _jsxs("div", { className: "flex items-center space-x-2", children: [showAppSwitcherFirst && renderAppSwitcher(), renderThemeToggle(), !showAppSwitcherFirst && renderAppSwitcher(), _jsx(UserDropdown, { user: user, apiUrl: apiUrl, docsHref: docsHref, onLogout: handleLogout })] })] }) })] }) }) }));
+    return (_jsx(FlowbiteNavbar, { fluid: true, theme: customTheme.navbar, className: `fixed top-0 z-30 w-full border-b border-gray-200 p-0 ${borderColorClass} bg-white sm:p-0 dark:bg-black ${className}`, children: _jsx("div", { className: "w-full p-3 pr-4", children: _jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("div", { className: "flex min-w-0 items-center", children: [_jsxs("button", { onClick: handleToggleSidebar, className: "mr-1 shrink-0 cursor-pointer rounded-sm p-2 text-gray-600 hover:bg-zinc-100 hover:text-gray-900 sm:mr-3 dark:text-gray-400 dark:hover:bg-zinc-700 dark:hover:text-white", children: [_jsx("span", { className: "sr-only", children: "Toggle sidebar" }), _jsx("div", { className: "lg:hidden", children: sidebar.mobile.isOpen ? (_jsx(HiX, { className: "h-6 w-6" })) : (_jsx(HiMenuAlt1, { className: "h-6 w-6" })) }), _jsx("div", { className: "hidden lg:block", children: _jsx(HiMenuAlt1, { className: "h-6 w-6" }) })] }), _jsxs(NavbarBrand, { as: Link, href: homeHref, className: "min-w-0 lg:mr-14", children: [_jsx(LogoBadge, { app: currentApp, animate: "once", className: "mr-1.5 h-8 w-8 shrink-0 sm:mr-2 sm:h-10 sm:w-10" }), _jsx("span", { className: "font-heading mt-1 self-center truncate text-base font-semibold text-gray-900 sm:mt-2 sm:ml-1 sm:text-2xl dark:text-white", children: appName })] })] }), _jsx("div", { className: "flex shrink-0 items-center lg:gap-3", children: _jsxs("div", { className: "flex items-center", children: [additionalComponents && (_jsx("div", { className: "mr-2 hidden md:block", children: additionalComponents })), _jsxs("div", { className: "flex items-center space-x-2", children: [showAppSwitcherFirst && renderAppSwitcher(), renderThemeToggle(), !showAppSwitcherFirst && renderAppSwitcher(), _jsx(UserDropdown, { user: user, apiUrl: apiUrl, docsHref: docsHref, onLogout: handleLogout })] })] }) })] }) }) }));
 }
 function UserDropdown({ user, apiUrl, docsHref, onLogout }) {
     const settings = useAccountSettingsLink(apiUrl);

package/ui-components/layout/LandingFooter.js

@@ -44,5 +44,5 @@ export function LandingFooter({ tagline, productLinks, contactModal: ContactModa
                                                 return (_jsx("li", { children: _jsx(Link, Object.assign({ href: cfg.url }, (isCurrent
                                                         ? {}
                                                         : { target: '_blank', rel: 'noopener noreferrer' }), { className: linkClass, children: cfg.displayName })) }, app));
-                                            }), _jsx("li", { children: _jsx(Link, { href: "https://xbrlkit.com", target: "_blank", rel: "noopener noreferrer", className: linkClass, children: "xbrlkit" }) })] })] }), _jsxs("div", { children: [_jsx("h3", { className: headingClass, children: "Company" }), _jsxs("ul", { className: "space-y-2 text-sm", children: [_jsx("li", { children: _jsx(Link, Object.assign({ href: researchHref }, researchLinkProps, { className: linkClass, children: "Research" })) }), _jsx("li", { children: _jsx(Link, Object.assign({ href: resolvedBlogHref }, blogLinkProps, { className: linkClass, children: "Blog" })) }), _jsx("li", { children: _jsx(Link, Object.assign({ href: `${companyBase}/pages/privacy` }, companyLinkProps, { className: linkClass, children: "Privacy" })) }), _jsx("li", { children: _jsx(Link, Object.assign({ href: `${companyBase}/pages/terms` }, companyLinkProps, { className: linkClass, children: "Terms" })) }), _jsx("li", { children: _jsx(Link, { href: "https://trust.robosystems.ai", target: "_blank", rel: "noopener noreferrer", className: linkClass, children: "Trust Center" }) }), _jsx("li", { children: _jsx(Link, { href: "https://status.robosystems.ai", target: "_blank", rel: "noopener noreferrer", className: linkClass, children: "Status" }) }), ContactModal && (_jsx("li", { children: _jsx("button", { onClick: () => setShowContact(true), className: linkClass, children: "Contact" }) }))] })] })] }), _jsx("div", { className: "mt-8 border-t border-gray-800 pt-8 text-center text-sm text-gray-400", children: _jsxs("p", { children: ["\u00A9 ", new Date().getFullYear(), " RFS LLC. All rights reserved."] }) })] }), ContactModal && (_jsx(ContactModal, { isOpen: showContact, onClose: () => setShowContact(false) }))] }));
+                                            }), _jsx("li", { children: _jsx(Link, { href: "https://xbrlkit.com", target: "_blank", rel: "noopener noreferrer", className: linkClass, children: "xbrlkit" }) })] })] }), _jsxs("div", { children: [_jsx("h3", { className: headingClass, children: "Company" }), _jsxs("ul", { className: "space-y-2 text-sm", children: [_jsx("li", { children: _jsx(Link, Object.assign({ href: researchHref }, researchLinkProps, { className: linkClass, children: "Research" })) }), _jsx("li", { children: _jsx(Link, Object.assign({ href: resolvedBlogHref }, blogLinkProps, { className: linkClass, children: "Blog" })) }), _jsx("li", { children: _jsx(Link, Object.assign({ href: `${companyBase}/pages/privacy` }, companyLinkProps, { className: linkClass, children: "Privacy" })) }), _jsx("li", { children: _jsx(Link, Object.assign({ href: `${companyBase}/pages/terms` }, companyLinkProps, { className: linkClass, children: "Terms" })) }), _jsx("li", { children: _jsx(Link, { href: "https://trust.robosystems.ai", target: "_blank", rel: "noopener noreferrer", className: linkClass, children: "Trust Center" }) }), _jsx("li", { children: _jsx(Link, { href: "https://status.robosystems.ai", target: "_blank", rel: "noopener noreferrer", className: linkClass, children: "Status" }) }), ContactModal && (_jsx("li", { children: _jsx("button", { onClick: () => setShowContact(true), className: linkClass, children: "Contact" }) }))] })] })] }), _jsxs("div", { className: "mt-8 border-t border-gray-800 pt-8 text-center text-sm text-gray-400", children: [_jsxs("p", { children: ["\u00A9 ", new Date().getFullYear(), " RFS LLC. All rights reserved."] }), _jsxs("p", { className: "mt-2", children: ["Implementation and training by", ' ', _jsx(Link, { href: "https://harbinger.finance", target: "_blank", rel: "noopener noreferrer", className: "text-gray-300 transition-colors hover:text-white", children: "Harbinger FinLab" })] })] })] }), ContactModal && (_jsx(ContactModal, { isOpen: showContact, onClose: () => setShowContact(false) }))] }));
 }

package/ui-components/layout/PageHeader.d.ts

@@ -19,5 +19,12 @@ export interface PageHeaderProps {
  * the app's brand-gradient chip, a title, an optional subtitle, and optional
  * right-aligned actions. The gradient spans the brand `primary` → `secondary`
  * → `accent` tokens, so it reskins to each app automatically.
+ *
+ * Below `sm` the actions drop onto their own row under the title rather than
+ * competing with it for a 390px-wide line — a row of buttons that cannot fit
+ * beside the title is what used to push the whole page into a horizontal
+ * scroll. Above `sm` they return to the right edge. `min-w-0` on the title
+ * column is what lets a long title shrink instead of shoving the actions off
+ * the viewport, since a flex item's default `min-width: auto` refuses to.
  */
 export declare function PageHeader({ icon: Icon, title, subtitle, actions, className, }: PageHeaderProps): import("react").JSX.Element;

package/ui-components/layout/PageHeader.js

@@ -6,7 +6,14 @@ import { twMerge } from 'tailwind-merge';
  * the app's brand-gradient chip, a title, an optional subtitle, and optional
  * right-aligned actions. The gradient spans the brand `primary` → `secondary`
  * → `accent` tokens, so it reskins to each app automatically.
+ *
+ * Below `sm` the actions drop onto their own row under the title rather than
+ * competing with it for a 390px-wide line — a row of buttons that cannot fit
+ * beside the title is what used to push the whole page into a horizontal
+ * scroll. Above `sm` they return to the right edge. `min-w-0` on the title
+ * column is what lets a long title shrink instead of shoving the actions off
+ * the viewport, since a flex item's default `min-width: auto` refuses to.
  */
 export function PageHeader({ icon: Icon, title, subtitle, actions, className, }) {
-    return (_jsxs("div", { className: twMerge('flex items-start justify-between gap-4', className), children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "from-primary-500 via-secondary-500 to-accent-500 shrink-0 rounded-lg bg-gradient-to-br p-3", children: _jsx(Icon, { className: "h-8 w-8 text-white" }) }), _jsxs("div", { children: [_jsx("h1", { className: "font-heading text-3xl font-bold text-gray-900 dark:text-white", children: title }), subtitle && (_jsx("div", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: subtitle }))] })] }), actions && _jsx("div", { className: "flex shrink-0 gap-2", children: actions })] }));
+    return (_jsxs("div", { className: twMerge('flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between', className), children: [_jsxs("div", { className: "flex min-w-0 items-center gap-3 sm:gap-4", children: [_jsx("div", { className: "from-primary-500 via-secondary-500 to-accent-500 shrink-0 rounded-lg bg-gradient-to-br p-2.5 sm:p-3", children: _jsx(Icon, { className: "h-6 w-6 text-white sm:h-8 sm:w-8" }) }), _jsxs("div", { className: "min-w-0", children: [_jsx("h1", { className: "font-heading text-2xl font-bold break-words text-gray-900 sm:text-3xl dark:text-white", children: title }), subtitle && (_jsx("div", { className: "mt-1 text-sm break-words text-gray-500 dark:text-gray-400", children: subtitle }))] })] }), actions && (_jsx("div", { className: "flex flex-wrap gap-2 sm:shrink-0", children: actions }))] }));
 }