coral csa cto

Author: Fr4nc3

src/frontend_react/src/coral/SYSTEM_OVERVIEW.md

@@ -0,0 +1,38 @@
+# coral.config
+
+**Coral Config** defines the application’s structural baseline — component scaffolding, prebuilt modules, import bundling, and system-wide utilities.
+
+> This folder is not intended for feature development.
+
+---
+
+## What Lives Here
+
+- `components/` – Stateless layout primitives like `Header`, `PanelLeft`, `PanelRight`, `Content`, etc. These are styled and functional, but intentionally generic.
+- `modules/` – Composite UI blocks that encapsulate common layouts and logic (e.g., a full-width `ChatPanel`, or a `PanelLeft` with navigation baked in). These are production-ready and reusable
+- `imports/` – Centralized icon and asset imports to streamline DX and reduce boilerplate.
+- `eventbus.ts` – Shared event system for cross-component communication.
+- `PanelRegistry.ts` – Central config for registering and referencing dynamic panel zones.
+
+---
+
+## When Should You Modify This?
+
+Only when you're:
+- Creating or updating shared UI primitives
+- Building new reusable modules
+- Extending foundational architecture
+
+Avoid editing directly unless your change impacts system-level behavior. When in doubt, route it through the Coral steward or log it in the dev sync.
+
+---
+
+## Design Philosophy
+
+Coral isolates **infrastructure from implementation** — keeping base components clean and predictable, while enabling rapid development through composable modules.
+
+This layer isn’t for experiments. It’s for the architecture that lets experiments happen without breaking production.
+
+---
+
+🐙

src/frontend_react/src/coral/components/Content/Content.tsx

@@ -0,0 +1,52 @@
+import React, { useState, ReactNode, ReactElement } from "react";
+import PanelToolbar from "../Panels/PanelLeftToolbar.js"; // Import to identify toolbar
+
+interface ContentProps {
+    children?: ReactNode;
+}
+
+const Content: React.FC<ContentProps> = ({ children }) => {
+    const childrenArray = React.Children.toArray(children) as ReactElement[];
+    const toolbar = childrenArray.find(
+        (child) => React.isValidElement(child) && child.type === PanelToolbar
+    );
+    const content = childrenArray.filter(
+        (child) => !(React.isValidElement(child) && child.type === PanelToolbar)
+    );
+
+    return (
+        <div
+            className="content"
+            style={{
+                display: "flex",
+                flex: "1",
+                flexDirection: "column",
+                height: "100%",
+                boxSizing: "border-box",
+                position: "relative",
+                minWidth: '320px',
+
+            }}
+        >
+            {toolbar && <div style={{ flexShrink: 0 }}>{toolbar}</div>}
+
+            <div
+                className="panelContent"
+                style={{
+                    display: "flex",
+                    flexDirection: "column",
+                    flex: 1,
+                    width:'100%',
+
+    
+                    overflow: "hidden", // prevent double scrollbars
+                    minHeight: 0, // allow child to shrink properly
+                }}
+            >
+                {content}
+            </div>
+        </div>
+    );
+};
+
+export default Content;

src/frontend_react/src/coral/components/Content/ContentToolbar.tsx

@@ -0,0 +1,76 @@
+import React, { ReactNode } from "react";
+import { Body1Strong } from "@fluentui/react-components";
+
+interface ContentToolbarProps {
+  panelIcon?: ReactNode;
+  panelTitle?: string | null;
+  children?: ReactNode;
+}
+
+const ContentToolbar: React.FC<ContentToolbarProps> = ({
+  panelIcon,
+  panelTitle,
+  children,
+}) => {
+  return (
+    <div
+      className="panelToolbar"
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: "8px",
+        padding: "16px",
+        boxSizing: "border-box",
+        height: "56px",
+      }}
+    >
+      {(panelIcon || panelTitle) && (
+        <div
+          className="panelTitle"
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: "6px",
+            flex: "1 1 auto",
+            overflow: "hidden", // Ensure title section is contained
+          }}
+        >
+          {panelIcon && (
+            <div
+              style={{
+                flexShrink: 0, // Prevent the icon from shrinking
+                display: "flex",
+                alignItems: "center",
+              }}
+            >
+              {panelIcon}
+            </div>
+          )}
+          {panelTitle && (
+            <Body1Strong
+              style={{
+                whiteSpace: "nowrap",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+              }}
+            >
+              {panelTitle}
+            </Body1Strong>
+          )}
+        </div>
+      )}
+      <div
+        className="panelTools"
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: "0",
+        }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default ContentToolbar;

src/frontend_react/src/coral/components/Header/Header.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+import { Avatar, Subtitle2 } from "@fluentui/react-components";
+import MsftColor from "../../imports/MsftColor.tsx"; // Default icon component
+
+/**
+ * @component
+ * @name Header
+ * @description A header component for displaying a logo, title, and optional subtitle.
+ * 
+ * @prop {React.ReactNode} [logo] - Custom logo (defaults to Microsoft icon).
+ * @prop {string} [title="Microsoft"] - Main title text.
+ * @prop {string} [subtitle] - Optional subtitle displayed next to the title.
+ * @prop {React.ReactNode} [children] - Optional header toolbar (e.g., buttons, menus).
+ */
+type HeaderProps = {
+  logo?: React.ReactNode;
+  title?: string;
+  subtitle?: string;
+  children?: React.ReactNode;
+};
+
+const Header: React.FC<HeaderProps> = ({ logo, title = "Microsoft", subtitle, children }) => {
+  return (
+    <header
+      style={{
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        width: "100%",
+        backgroundColor: "var(--colorNeutralBackgroundAlpha)",
+        borderBottom: "1px solid var(--colorNeutralStroke2)",
+        padding: "16px",
+        height: "64px",
+        boxSizing: "border-box",
+        gap: "12px",
+      }}
+      data-figma-component="Header"
+    >
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          gap: "8px",
+        }}
+      >
+        {/* Render custom logo or default MsftColor logo */}
+        <Avatar shape="square" color={null} icon={logo || <MsftColor />} />
+
+        {/* Render title and optional subtitle */}
+        <Subtitle2 style={{ whiteSpace: "nowrap", marginTop: "-2px" }}>
+          {title}
+          {subtitle && (
+            <span style={{ fontWeight: "400" }}> | {subtitle}</span>
+          )}
+        </Subtitle2>
+      </div>
+
+      {/* HEADER TOOLBAR (rendered only if passed as a child) */}
+      {children}
+    </header>
+  );
+};
+
+export default Header;

src/frontend_react/src/coral/components/Header/HeaderTools.tsx

@@ -0,0 +1,29 @@
+import React, { useState } from "react";
+import { Toolbar, ToolbarDivider, Avatar } from "@fluentui/react-components";
+import eventBus from "../eventbus";
+import PanelRightToggles from "./PanelRightToggles"; // Import PanelRightToggles
+
+
+interface HeaderToolsProps {
+    children?: React.ReactNode;
+}
+
+const HeaderTools: React.FC<HeaderToolsProps> = ({ children }) => {
+
+
+    return (
+        <Toolbar
+            style={{
+                display: "flex",
+                flex: "0",
+                alignItems: "center",
+                flexDirection: "row-reverse",
+                padding: "4px 0",
+            }}
+        >
+            {children}
+        </Toolbar>
+    );
+};
+
+export default HeaderTools;

src/frontend_react/src/coral/components/Header/PanelRightToggles.tsx

@@ -0,0 +1,56 @@
+import React, { useState, useEffect, ReactElement } from "react";
+import { Toolbar, ToggleButton, ToggleButtonProps } from "@fluentui/react-components";
+import eventBus from "../eventbus.js";
+
+type PanelRightTogglesProps = {
+  children: React.ReactNode;
+};
+
+const PanelRightToggles: React.FC<PanelRightTogglesProps> = ({ children }) => {
+  const [activePanel, setActivePanel] = useState<"first" | "second" | "third" | "fourth" | null>(null);
+
+  const panelTypes = ["first", "second", "third", "fourth"] as const;
+
+  useEffect(() => {
+    const handlePanelToggle = (panel: "first" | "second" | "third" | "fourth" | null) => {
+      setActivePanel(panel);
+    };
+
+    const handlePanelInit = ({ panelType, isActive }: { panelType: string; isActive: boolean }) => {
+      if (isActive) setActivePanel(panelType as any);
+    };
+
+    eventBus.on("setActivePanel", handlePanelToggle);
+    eventBus.on("panelInitState", handlePanelInit);
+
+    return () => {
+      eventBus.off("setActivePanel", handlePanelToggle);
+      eventBus.off("panelInitState", handlePanelInit);
+    };
+  }, []);
+
+  const togglePanel = (panel: "first" | "second" | "third" | "fourth" | null) => {
+    eventBus.emit("setActivePanel", activePanel === panel ? null : panel);
+  };
+
+  const isToggleButton = (child: React.ReactNode): child is ReactElement<ToggleButtonProps> => {
+    return React.isValidElement(child) && child.type === ToggleButton;
+  };
+
+  return (
+    <Toolbar style={{ padding: "4px 0", display: "flex", flexDirection: "row-reverse" }}>
+      {React.Children.map(children, (child, index) => {
+        const panelType = panelTypes[index];
+        if (isToggleButton(child) && panelType) {
+          return React.cloneElement(child, {
+            onClick: () => togglePanel(panelType),
+            checked: activePanel === panelType,
+          });
+        }
+        return child;
+      })}
+    </Toolbar>
+  );
+};
+
+export default PanelRightToggles;

src/frontend_react/src/coral/components/Layout/CoralShellColumn.tsx

@@ -0,0 +1,25 @@
+// coral.config/components/Layout/CoralShellColumn.tsx
+// Structural wrapper for top-level app layout (vertical orientation)
+
+import React from "react";
+
+const CoralShellColumn: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        height: "100vh",
+        overflow: "hidden",
+        backgroundColor: "var(--colorNeutralBackground3)",
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default CoralShellColumn;
+
+
+

src/frontend_react/src/coral/components/Layout/CoralShellRow.tsx

@@ -0,0 +1,20 @@
+// coral.config/components/Layout/CoralShellRow.tsx
+// Structural wrapper for main workspace layout (horizontal split)
+
+import React from "react";
+
+const CoralShellRow: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  return (
+    <div
+      style={{
+        display: "flex",
+        flex: 1,
+        overflow: "hidden",
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default CoralShellRow;