@xenide-io/the-old-ui-theme 0.9.6 → 0.9.7

package/dist/suite.d.mts

@@ -339,6 +339,10 @@ interface SuiteUserMenuProps {
     onSignOut: () => void;
     /** Fallback letter(s) when there is no avatar image. */
     fallbackInitials?: string;
+    /** Second line under the name, e.g. the workspace subscription ("Plus"). */
+    subtitle?: string | null;
+    /** Show the name + subtitle beside the avatar, for the sidebar footer. */
+    showDetails?: boolean;
     /** Show the old desktop sidebar sign-out action beside the avatar. */
     showSignOutAction?: boolean;
     dataTest?: string;
@@ -351,7 +355,7 @@ interface SuiteUserMenuProps {
  * profile settings and sign out. Desktop sidebars can also expose the legacy
  * adjacent sign-out action without adding it to mobile chrome.
  */
-declare function SuiteUserMenu({ name, email, image, settingsHref, onSignOut, fallbackInitials, showSignOutAction, dataTest, triggerId, triggerDataTest, className, }: SuiteUserMenuProps): react.JSX.Element;
+declare function SuiteUserMenu({ name, email, image, settingsHref, onSignOut, fallbackInitials, subtitle, showDetails, showSignOutAction, dataTest, triggerId, triggerDataTest, className, }: SuiteUserMenuProps): react.JSX.Element;
 
 /** Any icon component that accepts sizing/stroke props (Lucide, theme icons). */
 type SuiteNavIcon = ComponentType<{

package/dist/suite.d.ts

@@ -339,6 +339,10 @@ interface SuiteUserMenuProps {
     onSignOut: () => void;
     /** Fallback letter(s) when there is no avatar image. */
     fallbackInitials?: string;
+    /** Second line under the name, e.g. the workspace subscription ("Plus"). */
+    subtitle?: string | null;
+    /** Show the name + subtitle beside the avatar, for the sidebar footer. */
+    showDetails?: boolean;
     /** Show the old desktop sidebar sign-out action beside the avatar. */
     showSignOutAction?: boolean;
     dataTest?: string;
@@ -351,7 +355,7 @@ interface SuiteUserMenuProps {
  * profile settings and sign out. Desktop sidebars can also expose the legacy
  * adjacent sign-out action without adding it to mobile chrome.
  */
-declare function SuiteUserMenu({ name, email, image, settingsHref, onSignOut, fallbackInitials, showSignOutAction, dataTest, triggerId, triggerDataTest, className, }: SuiteUserMenuProps): react.JSX.Element;
+declare function SuiteUserMenu({ name, email, image, settingsHref, onSignOut, fallbackInitials, subtitle, showDetails, showSignOutAction, dataTest, triggerId, triggerDataTest, className, }: SuiteUserMenuProps): react.JSX.Element;
 
 /** Any icon component that accepts sizing/stroke props (Lucide, theme icons). */
 type SuiteNavIcon = ComponentType<{

package/dist/suite.js

@@ -2784,6 +2784,8 @@ function SuiteUserMenu({
   settingsHref,
   onSignOut,
   fallbackInitials,
+  subtitle,
+  showDetails = false,
   showSignOutAction = false,
   dataTest = "suite-user-menu",
   triggerId,
@@ -2813,10 +2815,17 @@ function SuiteUserMenu({
       children: initials
     }
   ) }) });
+  const trigger = showDetails ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: "flex min-w-0 items-center gap-2", children: [
+    avatar,
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: "flex min-w-0 flex-col text-left", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "truncate text-sm font-medium text-ph-ink", children: name || email || "Account" }),
+      subtitle ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "truncate text-xs text-ph-mutedtext", children: subtitle }) : null
+    ] })
+  ] }) : avatar;
   const accountMenu = /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     DropdownMenu,
     {
-      trigger: avatar,
+      trigger,
       triggerId: triggerId != null ? triggerId : `${dataTest}-trigger`,
       triggerDataTest: triggerDataTest != null ? triggerDataTest : `${dataTest}-trigger`,
       "aria-label": "Account menu",
@@ -2827,6 +2836,7 @@ function SuiteUserMenu({
       modal: false,
       className: cn(
         "[&_.ph-dropdown-trigger]:rounded-full",
+        showDetails && "min-w-0 flex-1 [&_.ph-dropdown-trigger]:w-full [&_.ph-dropdown-trigger]:justify-start [&_.ph-dropdown-trigger]:rounded-lg",
         showSignOutAction ? void 0 : className
       ),
       "data-test": dataTest,
@@ -3584,6 +3594,11 @@ function SuiteAiPanel({
     var _a;
     if (open && !hydrating) (_a = textareaRef.current) == null ? void 0 : _a.focus();
   }, [open, hydrating]);
+  (0, import_react12.useEffect)(() => {
+    if (!open) return;
+    void Promise.resolve().then(() => (init_ai_message_markdown(), ai_message_markdown_exports)).catch(() => {
+    });
+  }, [open]);
   (0, import_react12.useLayoutEffect)(() => {
     const el = textareaRef.current;
     if (!el) return;
@@ -3805,19 +3820,11 @@ function SuiteAiPanel({
                           /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "rounded-2xl rounded-bl-md bg-ph-muted px-3 py-2 text-sm leading-relaxed text-ph-ink", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                             import_react12.Suspense,
                             {
-                              fallback: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
-                                "div",
-                                {
-                                  className: "space-y-2 py-0.5",
-                                  role: "status",
-                                  "aria-label": "Rendering response",
-                                  children: [
-                                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "sr-only", children: "Rendering response\u2026" }),
-                                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "suite-shimmer h-3 w-11/12 rounded bg-ph-mutedtext/20" }),
-                                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "suite-shimmer h-3 w-full rounded bg-ph-mutedtext/20" }),
-                                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "suite-shimmer h-3 w-3/5 rounded bg-ph-mutedtext/20" })
-                                  ]
-                                }
+                              fallback: (
+                                // The chunk is pre-warmed above, so this only shows on a
+                                // cold cache. Keep it invisible — a skeleton here reads
+                                // as if it were part of the answer.
+                                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "sr-only", role: "status", children: "Rendering response\u2026" })
                               ),
                               children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                                 SuiteAiMarkdownMessage2,
@@ -4783,9 +4790,7 @@ function SuiteSidebar({
             className: cn(
               "shrink-0 border-t border-ph-border",
               surface ? "bg-ph-surface" : "bg-ph-canvas",
-              // Trim only the bottom inset: the 32px avatar sits inside a 40px
-              // trigger, so even padding read top-heavy once the avatar shrank.
-              collapsed ? "px-1.5 pt-1.5 pb-1" : "px-3 pt-3 pb-2"
+              collapsed ? "p-1.5" : "p-3"
             ),
             children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
               "div",

package/dist/suite.mjs

@@ -1897,6 +1897,8 @@ function SuiteUserMenu({
   settingsHref,
   onSignOut,
   fallbackInitials,
+  subtitle,
+  showDetails = false,
   showSignOutAction = false,
   dataTest = "suite-user-menu",
   triggerId,
@@ -1926,10 +1928,17 @@ function SuiteUserMenu({
       children: initials
     }
   ) }) });
+  const trigger = showDetails ? /* @__PURE__ */ jsxs11("span", { className: "flex min-w-0 items-center gap-2", children: [
+    avatar,
+    /* @__PURE__ */ jsxs11("span", { className: "flex min-w-0 flex-col text-left", children: [
+      /* @__PURE__ */ jsx13("span", { className: "truncate text-sm font-medium text-ph-ink", children: name || email || "Account" }),
+      subtitle ? /* @__PURE__ */ jsx13("span", { className: "truncate text-xs text-ph-mutedtext", children: subtitle }) : null
+    ] })
+  ] }) : avatar;
   const accountMenu = /* @__PURE__ */ jsxs11(
     DropdownMenu,
     {
-      trigger: avatar,
+      trigger,
       triggerId: triggerId != null ? triggerId : `${dataTest}-trigger`,
       triggerDataTest: triggerDataTest != null ? triggerDataTest : `${dataTest}-trigger`,
       "aria-label": "Account menu",
@@ -1940,6 +1949,7 @@ function SuiteUserMenu({
       modal: false,
       className: cn2(
         "[&_.ph-dropdown-trigger]:rounded-full",
+        showDetails && "min-w-0 flex-1 [&_.ph-dropdown-trigger]:w-full [&_.ph-dropdown-trigger]:justify-start [&_.ph-dropdown-trigger]:rounded-lg",
         showSignOutAction ? void 0 : className
       ),
       "data-test": dataTest,
@@ -2561,6 +2571,11 @@ function SuiteAiPanel({
     var _a;
     if (open && !hydrating) (_a = textareaRef.current) == null ? void 0 : _a.focus();
   }, [open, hydrating]);
+  useEffect7(() => {
+    if (!open) return;
+    void import("./ai-message-markdown-AUEMCO7K.mjs").catch(() => {
+    });
+  }, [open]);
   useLayoutEffect(() => {
     const el = textareaRef.current;
     if (!el) return;
@@ -2782,19 +2797,11 @@ function SuiteAiPanel({
                           /* @__PURE__ */ jsx17("div", { className: "rounded-2xl rounded-bl-md bg-ph-muted px-3 py-2 text-sm leading-relaxed text-ph-ink", children: /* @__PURE__ */ jsx17(
                             Suspense,
                             {
-                              fallback: /* @__PURE__ */ jsxs14(
-                                "div",
-                                {
-                                  className: "space-y-2 py-0.5",
-                                  role: "status",
-                                  "aria-label": "Rendering response",
-                                  children: [
-                                    /* @__PURE__ */ jsx17("span", { className: "sr-only", children: "Rendering response\u2026" }),
-                                    /* @__PURE__ */ jsx17("div", { className: "suite-shimmer h-3 w-11/12 rounded bg-ph-mutedtext/20" }),
-                                    /* @__PURE__ */ jsx17("div", { className: "suite-shimmer h-3 w-full rounded bg-ph-mutedtext/20" }),
-                                    /* @__PURE__ */ jsx17("div", { className: "suite-shimmer h-3 w-3/5 rounded bg-ph-mutedtext/20" })
-                                  ]
-                                }
+                              fallback: (
+                                // The chunk is pre-warmed above, so this only shows on a
+                                // cold cache. Keep it invisible — a skeleton here reads
+                                // as if it were part of the answer.
+                                /* @__PURE__ */ jsx17("span", { className: "sr-only", role: "status", children: "Rendering response\u2026" })
                               ),
                               children: /* @__PURE__ */ jsx17(
                                 SuiteAiMarkdownMessage,
@@ -3764,9 +3771,7 @@ function SuiteSidebar({
             className: cn2(
               "shrink-0 border-t border-ph-border",
               surface ? "bg-ph-surface" : "bg-ph-canvas",
-              // Trim only the bottom inset: the 32px avatar sits inside a 40px
-              // trigger, so even padding read top-heavy once the avatar shrank.
-              collapsed ? "px-1.5 pt-1.5 pb-1" : "px-3 pt-3 pb-2"
+              collapsed ? "p-1.5" : "p-3"
             ),
             children: /* @__PURE__ */ jsxs19(
               "div",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xenide-io/the-old-ui-theme",
-  "version": "0.9.6",
+  "version": "0.9.7",
   "description": "Props-driven React components and theme tokens inspired by classic interface design — optimized for Next.js apps and internal tools.",
   "author": "Xenide",
   "license": "MIT",

package/src/suite/components/ai-panel.tsx

@@ -297,6 +297,13 @@ export function SuiteAiPanel({
     if (open && !hydrating) textareaRef.current?.focus();
   }, [open, hydrating]);
 
+  // Warm the lazily-imported Markdown renderer as soon as the panel opens, so a
+  // reply never flashes a placeholder while its chunk is still downloading.
+  useEffect(() => {
+    if (!open) return;
+    void import("./ai-message-markdown").catch(() => {});
+  }, [open]);
+
   useLayoutEffect(() => {
     const el = textareaRef.current;
     if (!el) return;
@@ -537,16 +544,12 @@ export function SuiteAiPanel({
                   <div className="rounded-2xl rounded-bl-md bg-ph-muted px-3 py-2 text-sm leading-relaxed text-ph-ink">
                     <Suspense
                       fallback={
-                        <div
-                          className="space-y-2 py-0.5"
-                          role="status"
-                          aria-label="Rendering response"
-                        >
-                          <span className="sr-only">Rendering response…</span>
-                          <div className="suite-shimmer h-3 w-11/12 rounded bg-ph-mutedtext/20" />
-                          <div className="suite-shimmer h-3 w-full rounded bg-ph-mutedtext/20" />
-                          <div className="suite-shimmer h-3 w-3/5 rounded bg-ph-mutedtext/20" />
-                        </div>
+                        // The chunk is pre-warmed above, so this only shows on a
+                        // cold cache. Keep it invisible — a skeleton here reads
+                        // as if it were part of the answer.
+                        <span className="sr-only" role="status">
+                          Rendering response…
+                        </span>
                       }
                     >
                       <SuiteAiMarkdownMessage

package/src/suite/components/suite-sidebar.tsx

@@ -320,9 +320,7 @@ export function SuiteSidebar({
         className={cn(
           "shrink-0 border-t border-ph-border",
           surface ? "bg-ph-surface" : "bg-ph-canvas",
-          // Trim only the bottom inset: the 32px avatar sits inside a 40px
-          // trigger, so even padding read top-heavy once the avatar shrank.
-          collapsed ? "px-1.5 pt-1.5 pb-1" : "px-3 pt-3 pb-2",
+          collapsed ? "p-1.5" : "p-3",
         )}
       >
         <div

package/src/suite/components/suite-user-menu.tsx

@@ -16,6 +16,10 @@ export interface SuiteUserMenuProps {
   onSignOut: () => void;
   /** Fallback letter(s) when there is no avatar image. */
   fallbackInitials?: string;
+  /** Second line under the name, e.g. the workspace subscription ("Plus"). */
+  subtitle?: string | null;
+  /** Show the name + subtitle beside the avatar, for the sidebar footer. */
+  showDetails?: boolean;
   /** Show the old desktop sidebar sign-out action beside the avatar. */
   showSignOutAction?: boolean;
   dataTest?: string;
@@ -72,6 +76,8 @@ export function SuiteUserMenu({
   settingsHref,
   onSignOut,
   fallbackInitials,
+  subtitle,
+  showDetails = false,
   showSignOutAction = false,
   dataTest = "suite-user-menu",
   triggerId,
@@ -110,9 +116,27 @@ export function SuiteUserMenu({
     </span>
   );
 
+  // Sidebar footer shows who is signed in and which plan the workspace is on;
+  // the mobile header keeps the bare avatar so its action row stays compact.
+  const trigger = showDetails ? (
+    <span className="flex min-w-0 items-center gap-2">
+      {avatar}
+      <span className="flex min-w-0 flex-col text-left">
+        <span className="truncate text-sm font-medium text-ph-ink">
+          {name || email || "Account"}
+        </span>
+        {subtitle ? (
+          <span className="truncate text-xs text-ph-mutedtext">{subtitle}</span>
+        ) : null}
+      </span>
+    </span>
+  ) : (
+    avatar
+  );
+
   const accountMenu = (
     <DropdownMenu
-      trigger={avatar}
+      trigger={trigger}
       triggerId={triggerId ?? `${dataTest}-trigger`}
       triggerDataTest={triggerDataTest ?? `${dataTest}-trigger`}
       aria-label="Account menu"
@@ -123,6 +147,8 @@ export function SuiteUserMenu({
       modal={false}
       className={cn(
         "[&_.ph-dropdown-trigger]:rounded-full",
+        showDetails &&
+          "min-w-0 flex-1 [&_.ph-dropdown-trigger]:w-full [&_.ph-dropdown-trigger]:justify-start [&_.ph-dropdown-trigger]:rounded-lg",
         showSignOutAction ? undefined : className,
       )}
       data-test={dataTest}