@cere/cere-design-system 0.0.31 → 0.0.33

package/.specify/memory/components-reference.md

@@ -513,6 +513,44 @@ const items: BreadcrumbItem[] = [
 
 ## LAYOUT
 
+### EntityHeader
+Composite header for entities (workspaces, accounts, etc.) with title, metadata, and action slots.
+
+```typescript
+import { EntityHeader } from '@cere/cere-design-system';
+import type { EntityHeaderProps, PrimaryAction } from '@cere/cere-design-system';
+
+<EntityHeader
+  title="Game Co. WF 1769936170928"
+  subtitle="Gaming Demo Account"
+  role="Manager"
+  id="W1234567890"
+  startActions={<Button variant="secondary">Export</Button>}
+  primaryAction={{
+    label: 'Members',
+    count: 5,
+    icon: <AddCircleIcon />,
+    onClick: () => console.log('Open members')
+  }}
+  endActions={<Button variant="tertiary">Settings</Button>}
+  onCopyId={() => console.log('ID copied')}
+  onMoreOptions={(e) => setAnchorEl(e.currentTarget)}
+/>
+```
+
+**Props:**
+- `title: string` - Primary title text (required)
+- `subtitle?: string` - Secondary descriptive text
+- `role?: string` - Role/status label displayed as RoleBadge pill
+- `id?: string` - Entity identifier displayed as IDBlock with copy action
+- `primaryAction?: PrimaryAction` - Main action button config (`{ label, count?, icon?, onClick? }`)
+- `startActions?: ReactNode` - Custom content rendered before the primary action button
+- `endActions?: ReactNode` - Custom content rendered after the primary action button (before more-options)
+- `onCopyId?: () => void` - Callback when ID is copied
+- `onMoreOptions?: (event) => void` - Callback when more options button clicked
+- `headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'` - HTML heading level (default: 'h2')
+- `divider?: boolean` - Show bottom divider line (default: true)
+
 ### Card
 Container card with header, content, and actions.
 

package/dist/index.d.mts

@@ -1230,6 +1230,17 @@ interface EntityHeaderProps {
      * Main action button configuration
      */
     primaryAction?: PrimaryAction;
+    /**
+     * Additional content rendered before the primary action button.
+     * Accepts any ReactNode (buttons, dropdowns, etc.).
+     */
+    startActions?: React__default.ReactNode;
+    /**
+     * Additional content rendered after the primary action button
+     * but before the more-options icon button.
+     * Accepts any ReactNode (buttons, dropdowns, etc.).
+     */
+    endActions?: React__default.ReactNode;
     /**
      * Callback when ID is copied (internal copy + this callback)
      */
@@ -2688,6 +2699,8 @@ interface CodeEditorStatusBarProps {
      * When provided, default rendering is skipped entirely.
      */
     renderStatusBar?: (props: CodeEditorStatusBarRenderProps) => React__default.ReactNode;
+    /** Called when the user clicks the branch name in the status bar */
+    onBranchClick?: () => void;
     /** Props for the outer container */
     containerProps?: BoxProps;
 }
@@ -2749,6 +2762,8 @@ interface CodeEditorWorkspaceProps extends Pick<UseCodeEditorWorkspaceOptions, '
     onWorkspaceReady?: (workspace: UseCodeEditorWorkspaceReturn) => void;
     /** Called when the user presses Ctrl+S / Cmd+S. Receives all dirty files. */
     onSave?: (dirtyFiles: CodeEditorFile[]) => void;
+    /** Called when the user clicks the branch name in the status bar */
+    onBranchClick?: () => void;
 }
 /**
  * Convenience composed workspace that combines `CodeEditorFileTree`,

package/dist/index.d.ts

@@ -1230,6 +1230,17 @@ interface EntityHeaderProps {
      * Main action button configuration
      */
     primaryAction?: PrimaryAction;
+    /**
+     * Additional content rendered before the primary action button.
+     * Accepts any ReactNode (buttons, dropdowns, etc.).
+     */
+    startActions?: React__default.ReactNode;
+    /**
+     * Additional content rendered after the primary action button
+     * but before the more-options icon button.
+     * Accepts any ReactNode (buttons, dropdowns, etc.).
+     */
+    endActions?: React__default.ReactNode;
     /**
      * Callback when ID is copied (internal copy + this callback)
      */
@@ -2688,6 +2699,8 @@ interface CodeEditorStatusBarProps {
      * When provided, default rendering is skipped entirely.
      */
     renderStatusBar?: (props: CodeEditorStatusBarRenderProps) => React__default.ReactNode;
+    /** Called when the user clicks the branch name in the status bar */
+    onBranchClick?: () => void;
     /** Props for the outer container */
     containerProps?: BoxProps;
 }
@@ -2749,6 +2762,8 @@ interface CodeEditorWorkspaceProps extends Pick<UseCodeEditorWorkspaceOptions, '
     onWorkspaceReady?: (workspace: UseCodeEditorWorkspaceReturn) => void;
     /** Called when the user presses Ctrl+S / Cmd+S. Receives all dirty files. */
     onSave?: (dirtyFiles: CodeEditorFile[]) => void;
+    /** Called when the user clicks the branch name in the status bar */
+    onBranchClick?: () => void;
 }
 /**
  * Convenience composed workspace that combines `CodeEditorFileTree`,

package/dist/index.js

@@ -4991,6 +4991,8 @@ var EntityHeader = ({
   role,
   id,
   primaryAction,
+  startActions,
+  endActions,
   onCopyId,
   onMoreOptions,
   headingLevel = "h2",
@@ -5079,6 +5081,7 @@ var EntityHeader = ({
                 flexShrink: 0
               },
               children: [
+                startActions,
                 primaryAction && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                   Button,
                   {
@@ -5091,6 +5094,7 @@ var EntityHeader = ({
                     children: getPrimaryActionLabel()
                   }
                 ),
+                endActions,
                 onMoreOptions && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                   import_IconButton4.default,
                   {
@@ -8707,14 +8711,18 @@ var configureTypeScript = (monaco) => {
     target: monaco.languages.typescript.ScriptTarget.ES2020,
     allowNonTsExtensions: true,
     moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
-    module: monaco.languages.typescript.ModuleKind.CommonJS,
+    module: monaco.languages.typescript.ModuleKind.ESNext,
     noEmit: false,
     lib: ["es2020", "dom"],
     noUnusedLocals: false,
     noUnusedParameters: false,
     noImplicitAny: false,
     noImplicitReturns: false,
-    noFallthroughCasesInSwitch: false
+    noFallthroughCasesInSwitch: false,
+    // Treat every file as a module so top-level declarations don't clash
+    // across files in the workspace (prevents false "Cannot redeclare" errors).
+    moduleDetection: 3
+    // ts.ModuleDetectionKind.Force
   });
   monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
     noSemanticValidation: false,
@@ -9672,6 +9680,7 @@ var CodeEditorStatusBar = ({
   cursorPosition,
   items,
   renderStatusBar,
+  onBranchClick,
   containerProps
 }) => {
   if (renderStatusBar) {
@@ -9714,12 +9723,14 @@ var CodeEditorStatusBar = ({
               children: /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(
                 import_material76.Box,
                 {
+                  onClick: onBranchClick,
                   sx: {
                     display: "flex",
                     alignItems: "center",
                     gap: 0.5,
-                    cursor: "default",
-                    overflow: "hidden"
+                    cursor: onBranchClick ? "pointer" : "default",
+                    overflow: "hidden",
+                    "&:hover": onBranchClick ? { opacity: 0.8 } : void 0
                   },
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
@@ -9866,7 +9877,8 @@ var CodeEditorWorkspace = ({
   showStatusBar = true,
   statusBarItems,
   onWorkspaceReady,
-  onSave
+  onSave,
+  onBranchClick
 }) => {
   const workspace = useCodeEditorWorkspace({
     files,
@@ -9918,7 +9930,8 @@ var CodeEditorWorkspace = ({
     gitInfo,
     language: workspace.activeFile?.language,
     cursorPosition: workspace.cursorPosition ?? void 0,
-    items: statusBarItems
+    items: statusBarItems,
+    onBranchClick
   };
   const statusBarElement = showStatusBar ? renderStatusBar ? renderStatusBar({ ...statusBarProps, workspace }) : /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(CodeEditorStatusBar, { ...statusBarProps }) : null;
   const editorElement = renderEditor ? renderEditor(workspace) : workspace.activeFile ? /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(