@page-speed/agent-everywhere 0.7.0 → 0.8.0

package/README.md

@@ -195,6 +195,11 @@ Every region is independently optional and controllable:
   optional attach affordance (`onAttach`), and a circular send button. Pass
   `composer={false}` to drop it, a node to replace it, or `onComposerSubmit`
   to intercept submits.
+- **Loading states**: render `<AgentWorkspaceSkeleton/>` while the page's data
+  loads — it mirrors the workspace geometry (panel rails, header, dock) with
+  pulsing placeholders so the resolved layout doesn't shift. Pass `children`
+  for a custom center skeleton, and `leftPanel={false}` / `rightPanel={false}`
+  / `composer={false}` to match the page's configuration.
 - **Programmatic control** from anywhere inside: `useAgentWorkspace()` exposes
   `toggleLeftPanel`, `setRightPanelOpen`, `openConversation`,
   `closeConversation`, and friends for dynamic layout scenarios.

package/dist/index.cjs

@@ -9011,6 +9011,96 @@ function AgentWorkspace({
     }
   ) });
 }
+var Pulse = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("animate-pulse rounded-md bg-muted", className) });
+var PanelSkeleton = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col", children: [
+  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center justify-between px-4 pb-2 pt-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Pulse, { className: "h-5 w-28" }),
+    /* @__PURE__ */ jsxRuntime.jsx(Pulse, { className: "size-8 rounded-lg" })
+  ] }),
+  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 grow space-y-4 overflow-hidden px-4 py-3", children: [3, 6].map((rows, section) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Pulse, { className: "h-3 w-24" }),
+    Array.from({ length: rows }, (_, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Pulse, { className: "size-4 shrink-0 rounded-full" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 grow space-y-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Pulse, { className: "h-3.5 w-3/4" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Pulse, { className: "h-3 w-1/2" })
+      ] })
+    ] }, i))
+  ] }, section)) }),
+  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "shrink-0 space-y-2 border-t border-border px-4 py-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Pulse, { className: "h-3 w-full" }),
+    /* @__PURE__ */ jsxRuntime.jsx(Pulse, { className: "h-3 w-2/3" })
+  ] })
+] });
+var DefaultContentSkeleton = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 p-6", children: [
+  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Pulse, { className: "h-8 w-40" }),
+    /* @__PURE__ */ jsxRuntime.jsx(Pulse, { className: "h-8 w-28" }),
+    /* @__PURE__ */ jsxRuntime.jsx(Pulse, { className: "ml-auto h-8 w-20" })
+  ] }),
+  Array.from({ length: 9 }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx(Pulse, { className: "h-10 w-full" }, i))
+] });
+function AgentWorkspaceSkeleton({
+  leftPanel = true,
+  rightPanel = true,
+  leftPanelWidth = 320,
+  rightPanelWidth = 460,
+  showHeader = true,
+  composer = true,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-workspace-skeleton": "",
+      className: cn(
+        "flex h-full w-full overflow-hidden bg-background text-foreground",
+        className
+      ),
+      children: [
+        leftPanel && /* @__PURE__ */ jsxRuntime.jsx(
+          "aside",
+          {
+            "aria-hidden": true,
+            className: "hidden h-full shrink-0 overflow-hidden border-r border-border lg:block",
+            style: { width: leftPanelWidth },
+            children: /* @__PURE__ */ jsxRuntime.jsx(PanelSkeleton, {})
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full min-w-0 grow flex-col", children: [
+          showHeader && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center justify-between gap-3 border-b border-border px-3 py-2.5", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-2.5", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Pulse, { className: "hidden size-8 rounded-lg lg:block" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Pulse, { className: "size-7 rounded-md" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(Pulse, { className: "h-4 w-36" }),
+                /* @__PURE__ */ jsxRuntime.jsx(Pulse, { className: "h-3 w-20" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-1.5", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Pulse, { className: "h-8 w-20 rounded-md" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Pulse, { className: "size-8 rounded-lg" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Pulse, { className: "size-8 rounded-lg" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Pulse, { className: "hidden size-8 rounded-lg lg:block" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 grow overflow-hidden", children: children ?? /* @__PURE__ */ jsxRuntime.jsx(DefaultContentSkeleton, {}) }),
+          composer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 border-t border-border px-4 py-3", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto w-full max-w-3xl", children: /* @__PURE__ */ jsxRuntime.jsx(Pulse, { className: "h-[52px] w-full rounded-2xl" }) }) })
+        ] }),
+        rightPanel && /* @__PURE__ */ jsxRuntime.jsx(
+          "aside",
+          {
+            "aria-hidden": true,
+            className: "hidden h-full shrink-0 overflow-hidden border-l border-border lg:block",
+            style: { width: rightPanelWidth },
+            children: /* @__PURE__ */ jsxRuntime.jsx(PanelSkeleton, {})
+          }
+        )
+      ]
+    }
+  );
+}
 
 exports.AgentAvatar = AgentAvatar;
 exports.AgentComposer = AgentComposer;
@@ -9021,6 +9111,7 @@ exports.AgentSurface = AgentSurface;
 exports.AgentWorkspace = AgentWorkspace;
 exports.AgentWorkspaceComposer = AgentWorkspaceComposer;
 exports.AgentWorkspacePanelToggle = AgentWorkspacePanelToggle;
+exports.AgentWorkspaceSkeleton = AgentWorkspaceSkeleton;
 exports.AllocationBreakdown = AllocationBreakdown;
 exports.AnalyticsDashboard = AnalyticsDashboard;
 exports.Avatar = Avatar;