@contractspec/bundle.library 3.4.3 → 3.5.0

package/dist/components/shell/WorkspaceShellRenderer.js

@@ -0,0 +1,229 @@
+// @bun
+// src/components/shell/WorkspaceHeader.tsx
+import * as React from "react";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "@contractspec/lib.ui-kit-web/ui/select";
+import { jsx, jsxs } from "react/jsx-runtime";
+function WorkspaceHeader({
+  title,
+  subtitle,
+  workspaceSelect,
+  projectSelect,
+  environmentSelect,
+  stickyHeaderOffsetPx,
+  headerRight
+}) {
+  return /* @__PURE__ */ jsx("div", {
+    className: "border-border bg-card sticky top-0 z-10 border-b",
+    style: { top: stickyHeaderOffsetPx ?? 0 },
+    children: /* @__PURE__ */ jsxs("div", {
+      className: "mx-auto flex w-full max-w-7xl flex-col gap-3 px-4 py-3 md:flex-row md:items-center md:justify-between",
+      children: [
+        /* @__PURE__ */ jsxs("div", {
+          className: "min-w-0",
+          children: [
+            /* @__PURE__ */ jsxs("div", {
+              className: "flex items-center gap-2",
+              children: [
+                /* @__PURE__ */ jsx("p", {
+                  className: "truncate text-base font-semibold",
+                  children: title
+                }),
+                subtitle ? /* @__PURE__ */ jsx("p", {
+                  className: "text-muted-foreground hidden text-sm md:block",
+                  children: subtitle
+                }) : null
+              ]
+            }),
+            /* @__PURE__ */ jsxs("div", {
+              className: "mt-2 flex flex-wrap gap-2",
+              children: [
+                workspaceSelect ? /* @__PURE__ */ jsx(ShellSelectControl, {
+                  select: workspaceSelect
+                }) : null,
+                projectSelect ? /* @__PURE__ */ jsx(ShellSelectControl, {
+                  select: projectSelect
+                }) : null,
+                environmentSelect ? /* @__PURE__ */ jsx(ShellSelectControl, {
+                  select: environmentSelect
+                }) : null
+              ]
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsx("div", {
+          className: "flex items-center justify-between gap-2 md:justify-end",
+          children: headerRight
+        })
+      ]
+    })
+  });
+}
+function ShellSelectControl({ select }) {
+  const labelId = React.useId();
+  return /* @__PURE__ */ jsxs("div", {
+    className: "flex min-w-[220px] flex-col gap-1",
+    children: [
+      /* @__PURE__ */ jsx("span", {
+        id: labelId,
+        className: "text-muted-foreground text-xs",
+        children: select.label
+      }),
+      /* @__PURE__ */ jsxs(Select, {
+        value: select.value,
+        onValueChange: select.onChange,
+        children: [
+          /* @__PURE__ */ jsx(SelectTrigger, {
+            "aria-labelledby": labelId,
+            className: "w-full",
+            children: /* @__PURE__ */ jsx(SelectValue, {
+              placeholder: select.placeholder ?? select.label
+            })
+          }),
+          /* @__PURE__ */ jsx(SelectContent, {
+            children: select.options.map((o) => /* @__PURE__ */ jsx(SelectItem, {
+              value: o.value,
+              children: o.label
+            }, o.value))
+          })
+        ]
+      })
+    ]
+  });
+}
+
+// src/components/shell/WorkspaceSidebar.tsx
+import { Settings } from "lucide-react";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarRail
+} from "@contractspec/lib.ui-kit-web/ui/sidebar";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function WorkspaceSidebar({
+  modules,
+  activeModuleId,
+  onModuleChange,
+  sidebarFooter
+}) {
+  return /* @__PURE__ */ jsxs2(Sidebar, {
+    children: [
+      /* @__PURE__ */ jsx2(SidebarRail, {}),
+      /* @__PURE__ */ jsx2(SidebarHeader, {}),
+      /* @__PURE__ */ jsx2(SidebarContent, {
+        children: /* @__PURE__ */ jsxs2(SidebarMenu, {
+          children: [
+            modules.map((m) => /* @__PURE__ */ jsx2(SidebarMenuItem, {
+              children: /* @__PURE__ */ jsxs2(SidebarMenuButton, {
+                isActive: m.id === activeModuleId,
+                onClick: () => onModuleChange(m.id),
+                children: [
+                  m.icon,
+                  /* @__PURE__ */ jsx2("span", {
+                    children: m.label
+                  }),
+                  m.badge != null ? /* @__PURE__ */ jsx2("span", {
+                    className: "text-muted-foreground ml-auto text-xs",
+                    children: String(m.badge)
+                  }) : null
+                ]
+              })
+            }, m.id)),
+            /* @__PURE__ */ jsx2(SidebarMenuItem, {
+              children: /* @__PURE__ */ jsxs2(SidebarMenuButton, {
+                isActive: activeModuleId === "settings",
+                onClick: () => onModuleChange("settings"),
+                children: [
+                  /* @__PURE__ */ jsx2(Settings, {
+                    className: "size-4"
+                  }),
+                  /* @__PURE__ */ jsx2("span", {
+                    children: "Settings"
+                  })
+                ]
+              })
+            })
+          ]
+        })
+      }),
+      /* @__PURE__ */ jsx2(SidebarFooter, {
+        children: sidebarFooter
+      })
+    ]
+  });
+}
+
+// src/components/shell/WorkspaceShellRenderer.tsx
+import { SidebarProvider } from "@contractspec/lib.ui-kit-web/ui/sidebar";
+import {
+  BundleProvider,
+  BundleRenderer
+} from "@contractspec/lib.surface-runtime/react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+"use client";
+function WorkspaceShellRenderer({
+  plan,
+  title,
+  subtitle,
+  workspaceSelect,
+  projectSelect,
+  environmentSelect,
+  stickyHeaderOffsetPx,
+  headerRight,
+  modules,
+  activeModuleId,
+  onModuleChange,
+  sidebarFooter,
+  assistant,
+  children,
+  className
+}) {
+  const slotContent = {
+    header: /* @__PURE__ */ jsx3(WorkspaceHeader, {
+      title,
+      subtitle,
+      workspaceSelect,
+      projectSelect,
+      environmentSelect,
+      stickyHeaderOffsetPx,
+      headerRight
+    }),
+    sidebar: /* @__PURE__ */ jsx3(WorkspaceSidebar, {
+      modules,
+      activeModuleId,
+      onModuleChange,
+      sidebarFooter
+    }),
+    primary: /* @__PURE__ */ jsx3("main", {
+      className: className ? `m-4 ${className}` : "m-4",
+      children
+    })
+  };
+  if (assistant != null) {
+    slotContent.assistant = assistant;
+  }
+  return /* @__PURE__ */ jsx3(SidebarProvider, {
+    children: /* @__PURE__ */ jsx3(BundleProvider, {
+      plan,
+      children: /* @__PURE__ */ jsx3("div", {
+        className: "bg-background min-h-svh",
+        children: /* @__PURE__ */ jsx3(BundleRenderer, {
+          slotContent
+        })
+      })
+    })
+  });
+}
+export {
+  WorkspaceShellRenderer
+};

package/dist/components/shell/WorkspaceSidebar.js

@@ -11,58 +11,58 @@ import {
   SidebarMenuItem,
   SidebarRail
 } from "@contractspec/lib.ui-kit-web/ui/sidebar";
-import { jsxDEV } from "react/jsx-dev-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 function WorkspaceSidebar({
   modules,
   activeModuleId,
   onModuleChange,
   sidebarFooter
 }) {
-  return /* @__PURE__ */ jsxDEV(Sidebar, {
+  return /* @__PURE__ */ jsxs(Sidebar, {
     children: [
-      /* @__PURE__ */ jsxDEV(SidebarRail, {}, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV(SidebarHeader, {}, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV(SidebarContent, {
-        children: /* @__PURE__ */ jsxDEV(SidebarMenu, {
+      /* @__PURE__ */ jsx(SidebarRail, {}),
+      /* @__PURE__ */ jsx(SidebarHeader, {}),
+      /* @__PURE__ */ jsx(SidebarContent, {
+        children: /* @__PURE__ */ jsxs(SidebarMenu, {
           children: [
-            modules.map((m) => /* @__PURE__ */ jsxDEV(SidebarMenuItem, {
-              children: /* @__PURE__ */ jsxDEV(SidebarMenuButton, {
+            modules.map((m) => /* @__PURE__ */ jsx(SidebarMenuItem, {
+              children: /* @__PURE__ */ jsxs(SidebarMenuButton, {
                 isActive: m.id === activeModuleId,
                 onClick: () => onModuleChange(m.id),
                 children: [
                   m.icon,
-                  /* @__PURE__ */ jsxDEV("span", {
+                  /* @__PURE__ */ jsx("span", {
                     children: m.label
-                  }, undefined, false, undefined, this),
-                  m.badge != null ? /* @__PURE__ */ jsxDEV("span", {
+                  }),
+                  m.badge != null ? /* @__PURE__ */ jsx("span", {
                     className: "text-muted-foreground ml-auto text-xs",
                     children: String(m.badge)
-                  }, undefined, false, undefined, this) : null
+                  }) : null
                 ]
-              }, undefined, true, undefined, this)
-            }, m.id, false, undefined, this)),
-            /* @__PURE__ */ jsxDEV(SidebarMenuItem, {
-              children: /* @__PURE__ */ jsxDEV(SidebarMenuButton, {
+              })
+            }, m.id)),
+            /* @__PURE__ */ jsx(SidebarMenuItem, {
+              children: /* @__PURE__ */ jsxs(SidebarMenuButton, {
                 isActive: activeModuleId === "settings",
                 onClick: () => onModuleChange("settings"),
                 children: [
-                  /* @__PURE__ */ jsxDEV(Settings, {
+                  /* @__PURE__ */ jsx(Settings, {
                     className: "size-4"
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV("span", {
+                  }),
+                  /* @__PURE__ */ jsx("span", {
                     children: "Settings"
-                  }, undefined, false, undefined, this)
+                  })
                 ]
-              }, undefined, true, undefined, this)
-            }, undefined, false, undefined, this)
+              })
+            })
           ]
-        }, undefined, true, undefined, this)
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV(SidebarFooter, {
+        })
+      }),
+      /* @__PURE__ */ jsx(SidebarFooter, {
         children: sidebarFooter
-      }, undefined, false, undefined, this)
+      })
     ]
-  }, undefined, true, undefined, this);
+  });
 }
 export {
   WorkspaceSidebar

package/dist/components/shell/index.d.ts

@@ -1,3 +1,4 @@
 export * from './WorkspaceHeader';
 export * from './WorkspaceSidebar';
 export * from './WorkspaceProjectShellLayout';
+export * from './WorkspaceShellRenderer';

package/dist/components/shell/index.js

@@ -8,7 +8,7 @@ import {
   SelectTrigger,
   SelectValue
 } from "@contractspec/lib.ui-kit-web/ui/select";
-import { jsxDEV } from "react/jsx-dev-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 function WorkspaceHeader({
   title,
   subtitle,
@@ -18,83 +18,83 @@ function WorkspaceHeader({
   stickyHeaderOffsetPx,
   headerRight
 }) {
-  return /* @__PURE__ */ jsxDEV("div", {
+  return /* @__PURE__ */ jsx("div", {
     className: "border-border bg-card sticky top-0 z-10 border-b",
     style: { top: stickyHeaderOffsetPx ?? 0 },
-    children: /* @__PURE__ */ jsxDEV("div", {
+    children: /* @__PURE__ */ jsxs("div", {
       className: "mx-auto flex w-full max-w-7xl flex-col gap-3 px-4 py-3 md:flex-row md:items-center md:justify-between",
       children: [
-        /* @__PURE__ */ jsxDEV("div", {
+        /* @__PURE__ */ jsxs("div", {
           className: "min-w-0",
           children: [
-            /* @__PURE__ */ jsxDEV("div", {
+            /* @__PURE__ */ jsxs("div", {
               className: "flex items-center gap-2",
               children: [
-                /* @__PURE__ */ jsxDEV("p", {
+                /* @__PURE__ */ jsx("p", {
                   className: "truncate text-base font-semibold",
                   children: title
-                }, undefined, false, undefined, this),
-                subtitle ? /* @__PURE__ */ jsxDEV("p", {
+                }),
+                subtitle ? /* @__PURE__ */ jsx("p", {
                   className: "text-muted-foreground hidden text-sm md:block",
                   children: subtitle
-                }, undefined, false, undefined, this) : null
+                }) : null
               ]
-            }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV("div", {
+            }),
+            /* @__PURE__ */ jsxs("div", {
               className: "mt-2 flex flex-wrap gap-2",
               children: [
-                workspaceSelect ? /* @__PURE__ */ jsxDEV(ShellSelectControl, {
+                workspaceSelect ? /* @__PURE__ */ jsx(ShellSelectControl, {
                   select: workspaceSelect
-                }, undefined, false, undefined, this) : null,
-                projectSelect ? /* @__PURE__ */ jsxDEV(ShellSelectControl, {
+                }) : null,
+                projectSelect ? /* @__PURE__ */ jsx(ShellSelectControl, {
                   select: projectSelect
-                }, undefined, false, undefined, this) : null,
-                environmentSelect ? /* @__PURE__ */ jsxDEV(ShellSelectControl, {
+                }) : null,
+                environmentSelect ? /* @__PURE__ */ jsx(ShellSelectControl, {
                   select: environmentSelect
-                }, undefined, false, undefined, this) : null
+                }) : null
               ]
-            }, undefined, true, undefined, this)
+            })
           ]
-        }, undefined, true, undefined, this),
-        /* @__PURE__ */ jsxDEV("div", {
+        }),
+        /* @__PURE__ */ jsx("div", {
           className: "flex items-center justify-between gap-2 md:justify-end",
           children: headerRight
-        }, undefined, false, undefined, this)
+        })
       ]
-    }, undefined, true, undefined, this)
-  }, undefined, false, undefined, this);
+    })
+  });
 }
 function ShellSelectControl({ select }) {
   const labelId = React.useId();
-  return /* @__PURE__ */ jsxDEV("div", {
+  return /* @__PURE__ */ jsxs("div", {
     className: "flex min-w-[220px] flex-col gap-1",
     children: [
-      /* @__PURE__ */ jsxDEV("span", {
+      /* @__PURE__ */ jsx("span", {
         id: labelId,
         className: "text-muted-foreground text-xs",
         children: select.label
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV(Select, {
+      }),
+      /* @__PURE__ */ jsxs(Select, {
         value: select.value,
         onValueChange: select.onChange,
         children: [
-          /* @__PURE__ */ jsxDEV(SelectTrigger, {
+          /* @__PURE__ */ jsx(SelectTrigger, {
             "aria-labelledby": labelId,
             className: "w-full",
-            children: /* @__PURE__ */ jsxDEV(SelectValue, {
+            children: /* @__PURE__ */ jsx(SelectValue, {
               placeholder: select.placeholder ?? select.label
-            }, undefined, false, undefined, this)
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV(SelectContent, {
-            children: select.options.map((o) => /* @__PURE__ */ jsxDEV(SelectItem, {
+            })
+          }),
+          /* @__PURE__ */ jsx(SelectContent, {
+            children: select.options.map((o) => /* @__PURE__ */ jsx(SelectItem, {
               value: o.value,
               children: o.label
-            }, o.value, false, undefined, this))
-          }, undefined, false, undefined, this)
+            }, o.value))
+          })
         ]
-      }, undefined, true, undefined, this)
+      })
     ]
-  }, undefined, true, undefined, this);
+  });
 }
 
 // src/components/shell/WorkspaceSidebar.tsx
@@ -109,58 +109,58 @@ import {
   SidebarMenuItem,
   SidebarRail
 } from "@contractspec/lib.ui-kit-web/ui/sidebar";
-import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function WorkspaceSidebar({
   modules,
   activeModuleId,
   onModuleChange,
   sidebarFooter
 }) {
-  return /* @__PURE__ */ jsxDEV2(Sidebar, {
+  return /* @__PURE__ */ jsxs2(Sidebar, {
     children: [
-      /* @__PURE__ */ jsxDEV2(SidebarRail, {}, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV2(SidebarHeader, {}, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV2(SidebarContent, {
-        children: /* @__PURE__ */ jsxDEV2(SidebarMenu, {
+      /* @__PURE__ */ jsx2(SidebarRail, {}),
+      /* @__PURE__ */ jsx2(SidebarHeader, {}),
+      /* @__PURE__ */ jsx2(SidebarContent, {
+        children: /* @__PURE__ */ jsxs2(SidebarMenu, {
           children: [
-            modules.map((m) => /* @__PURE__ */ jsxDEV2(SidebarMenuItem, {
-              children: /* @__PURE__ */ jsxDEV2(SidebarMenuButton, {
+            modules.map((m) => /* @__PURE__ */ jsx2(SidebarMenuItem, {
+              children: /* @__PURE__ */ jsxs2(SidebarMenuButton, {
                 isActive: m.id === activeModuleId,
                 onClick: () => onModuleChange(m.id),
                 children: [
                   m.icon,
-                  /* @__PURE__ */ jsxDEV2("span", {
+                  /* @__PURE__ */ jsx2("span", {
                     children: m.label
-                  }, undefined, false, undefined, this),
-                  m.badge != null ? /* @__PURE__ */ jsxDEV2("span", {
+                  }),
+                  m.badge != null ? /* @__PURE__ */ jsx2("span", {
                     className: "text-muted-foreground ml-auto text-xs",
                     children: String(m.badge)
-                  }, undefined, false, undefined, this) : null
+                  }) : null
                 ]
-              }, undefined, true, undefined, this)
-            }, m.id, false, undefined, this)),
-            /* @__PURE__ */ jsxDEV2(SidebarMenuItem, {
-              children: /* @__PURE__ */ jsxDEV2(SidebarMenuButton, {
+              })
+            }, m.id)),
+            /* @__PURE__ */ jsx2(SidebarMenuItem, {
+              children: /* @__PURE__ */ jsxs2(SidebarMenuButton, {
                 isActive: activeModuleId === "settings",
                 onClick: () => onModuleChange("settings"),
                 children: [
-                  /* @__PURE__ */ jsxDEV2(Settings, {
+                  /* @__PURE__ */ jsx2(Settings, {
                     className: "size-4"
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV2("span", {
+                  }),
+                  /* @__PURE__ */ jsx2("span", {
                     children: "Settings"
-                  }, undefined, false, undefined, this)
+                  })
                 ]
-              }, undefined, true, undefined, this)
-            }, undefined, false, undefined, this)
+              })
+            })
           ]
-        }, undefined, true, undefined, this)
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV2(SidebarFooter, {
+        })
+      }),
+      /* @__PURE__ */ jsx2(SidebarFooter, {
         children: sidebarFooter
-      }, undefined, false, undefined, this)
+      })
     ]
-  }, undefined, true, undefined, this);
+  });
 }
 
 // src/components/shell/WorkspaceProjectShellLayout.tsx
@@ -169,7 +169,7 @@ import {
   SidebarProvider,
   SidebarInset
 } from "@contractspec/lib.ui-kit-web/ui/sidebar";
-import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function WorkspaceProjectShellLayout({
   title,
   subtitle,
@@ -186,19 +186,19 @@ function WorkspaceProjectShellLayout({
   children,
   className
 }) {
-  return /* @__PURE__ */ jsxDEV3(SidebarProvider, {
+  return /* @__PURE__ */ jsxs3(SidebarProvider, {
     children: [
-      /* @__PURE__ */ jsxDEV3(WorkspaceSidebar, {
+      /* @__PURE__ */ jsx3(WorkspaceSidebar, {
         modules,
         activeModuleId,
         onModuleChange,
         sidebarFooter
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV3(SidebarInset, {
-        children: /* @__PURE__ */ jsxDEV3("div", {
+      }),
+      /* @__PURE__ */ jsx3(SidebarInset, {
+        children: /* @__PURE__ */ jsxs3("div", {
           className: cn("bg-background min-h-svh", className),
           children: [
-            /* @__PURE__ */ jsxDEV3(WorkspaceHeader, {
+            /* @__PURE__ */ jsx3(WorkspaceHeader, {
               title,
               subtitle,
               workspaceSelect,
@@ -206,20 +206,83 @@ function WorkspaceProjectShellLayout({
               environmentSelect,
               stickyHeaderOffsetPx,
               headerRight
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV3("main", {
+            }),
+            /* @__PURE__ */ jsx3("main", {
               className: "m-4",
               children
-            }, undefined, false, undefined, this)
+            })
           ]
-        }, undefined, true, undefined, this)
-      }, undefined, false, undefined, this),
+        })
+      }),
       assistant
     ]
-  }, undefined, true, undefined, this);
+  });
+}
+
+// src/components/shell/WorkspaceShellRenderer.tsx
+import { SidebarProvider as SidebarProvider2 } from "@contractspec/lib.ui-kit-web/ui/sidebar";
+import {
+  BundleProvider,
+  BundleRenderer
+} from "@contractspec/lib.surface-runtime/react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+"use client";
+function WorkspaceShellRenderer({
+  plan,
+  title,
+  subtitle,
+  workspaceSelect,
+  projectSelect,
+  environmentSelect,
+  stickyHeaderOffsetPx,
+  headerRight,
+  modules,
+  activeModuleId,
+  onModuleChange,
+  sidebarFooter,
+  assistant,
+  children,
+  className
+}) {
+  const slotContent = {
+    header: /* @__PURE__ */ jsx4(WorkspaceHeader, {
+      title,
+      subtitle,
+      workspaceSelect,
+      projectSelect,
+      environmentSelect,
+      stickyHeaderOffsetPx,
+      headerRight
+    }),
+    sidebar: /* @__PURE__ */ jsx4(WorkspaceSidebar, {
+      modules,
+      activeModuleId,
+      onModuleChange,
+      sidebarFooter
+    }),
+    primary: /* @__PURE__ */ jsx4("main", {
+      className: className ? `m-4 ${className}` : "m-4",
+      children
+    })
+  };
+  if (assistant != null) {
+    slotContent.assistant = assistant;
+  }
+  return /* @__PURE__ */ jsx4(SidebarProvider2, {
+    children: /* @__PURE__ */ jsx4(BundleProvider, {
+      plan,
+      children: /* @__PURE__ */ jsx4("div", {
+        className: "bg-background min-h-svh",
+        children: /* @__PURE__ */ jsx4(BundleRenderer, {
+          slotContent
+        })
+      })
+    })
+  });
 }
 export {
   WorkspaceSidebar,
+  WorkspaceShellRenderer,
   WorkspaceProjectShellLayout,
   WorkspaceHeader
 };