@coral-ui/react 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,139 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import React__default, { ReactNode } from 'react';
+import { Theme, ToggleButtonProps, AvatarProps } from '@fluentui/react-components';
+export { Button, Tab, TabList, ToggleButton } from '@fluentui/react-components';
+import * as _fluentui_react_icons from '@fluentui/react-icons';
+
+type CoralColorScheme = "light" | "dark";
+type CoralProviderProps = {
+    children: React.ReactNode;
+    theme?: Theme | CoralColorScheme;
+};
+declare function CoralProvider({ children, theme }: CoralProviderProps): react_jsx_runtime.JSX.Element;
+
+declare const coralLightTheme: Theme;
+declare const coralDarkTheme: Theme;
+
+/**
+ * @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__default.ReactNode;
+    title?: string;
+    subtitle?: string;
+    children?: React__default.ReactNode;
+};
+declare const Header: React__default.FC<HeaderProps>;
+
+interface HeaderToolsProps {
+    children?: React__default.ReactNode;
+}
+declare const HeaderTools: React__default.FC<HeaderToolsProps>;
+
+type ToggleButtonButtonProps = Extract<ToggleButtonProps, {
+    as?: "button";
+}>;
+type PanelToggleProps = Omit<ToggleButtonButtonProps, "as" | "checked" | "defaultChecked" | "icon" | "onClick"> & {
+    panelID: string;
+    icon?: ToggleButtonButtonProps["icon"];
+    onClick?: React__default.MouseEventHandler<HTMLButtonElement>;
+};
+declare const PanelToggle: React__default.FC<PanelToggleProps>;
+
+declare const CoralShellColumn: React__default.FC<{
+    children: React__default.ReactNode;
+}>;
+
+declare const CoralShellRow: React__default.FC<{
+    children: React__default.ReactNode;
+}>;
+
+interface PanelLeftProps {
+    panelWidth?: number;
+    panelResize?: boolean;
+    children?: ReactNode;
+}
+declare const PanelLeft: React__default.FC<PanelLeftProps>;
+
+interface PanelToolbarProps {
+    icon?: ReactNode;
+    title?: string | null;
+    /** If provided, the title area becomes a link */
+    linkTo?: string;
+    /** Optional: for real nav, you can prevent full page reload */
+    onLinkClick?: (e: React__default.MouseEvent<HTMLAnchorElement>) => void;
+    children?: ReactNode;
+}
+declare const PanelToolbar: React__default.FC<PanelToolbarProps>;
+
+interface PanelRightProps {
+    panelWidth?: number;
+    panelResize?: boolean;
+    panelID: string;
+    defaultClosed?: boolean;
+    children?: ReactNode;
+}
+declare const PanelRight: React__default.FC<PanelRightProps>;
+
+interface ContentProps {
+    children?: ReactNode;
+}
+declare const Content: React__default.FC<ContentProps>;
+
+type PanelNavProps = {
+    /** Controlled open state */
+    value?: boolean;
+    /** Uncontrolled initial open state */
+    defaultValue?: boolean;
+    /** Back-compat alias (prefer defaultValue) */
+    defaultOpen?: boolean;
+    /** Called when open state changes */
+    onValueChange?: (ev: React.MouseEvent | React.KeyboardEvent, data: {
+        value: boolean;
+    }) => void;
+    /** Optional section label shown in the header */
+    title?: string;
+    /** Optional: disable expand/collapse */
+    disabled?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+};
+declare function PanelNav({ value, defaultValue, defaultOpen, onValueChange, title, disabled, children, className, }: PanelNavProps): react_jsx_runtime.JSX.Element;
+
+type PanelNavItemProps = {
+    title: string;
+    icon?: React.ReactNode;
+    /** Identifier (useful if parent manages selection) */
+    value?: string;
+    /** Marks the item as selected */
+    selected?: boolean;
+    disabled?: boolean;
+    onSelect?: (ev: React.MouseEvent<HTMLButtonElement>, data: {
+        value?: string;
+    }) => void;
+    /** Back-compat */
+    active?: boolean;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    className?: string;
+};
+declare function PanelNavItem({ title, icon, value, selected, active, disabled, onSelect, onClick, className, }: PanelNavItemProps): react_jsx_runtime.JSX.Element;
+
+interface PanelUserCardProps extends AvatarProps {
+    name: string;
+    alias?: string;
+}
+declare const PanelUserCard: React__default.FC<PanelUserCardProps>;
+
+declare const _default: {
+    bundleIcon: (FilledIcon: _fluentui_react_icons.FluentIcon, RegularIcon: _fluentui_react_icons.FluentIcon) => _fluentui_react_icons.FluentIcon;
+};
+
+export { Content, type CoralColorScheme, CoralProvider, type CoralProviderProps, CoralShellColumn, CoralShellRow, Header, HeaderTools, _default as LeafOne, PanelLeft, PanelNav, PanelNavItem, PanelRight, PanelToggle, PanelToolbar, PanelUserCard as UserCard, coralDarkTheme, coralLightTheme };

package/dist/index.js

@@ -0,0 +1,1060 @@
+// src/provider/CoralProvider.tsx
+import { FluentProvider } from "@fluentui/react-components";
+
+// src/theme/theme.ts
+import { createLightTheme, createDarkTheme } from "@fluentui/react-components";
+var brand = {
+  10: "#09000C",
+  20: "#280045",
+  30: "#36006E",
+  40: "#3D0098",
+  50: "#3500CD",
+  60: "#0112FF",
+  70: "#2735FF",
+  80: "#3C4CFF",
+  90: "#4E5FFF",
+  100: "#5E72FF",
+  110: "#6F83FF",
+  120: "#7F94FF",
+  130: "#90A5FF",
+  140: "#A1B6FF",
+  150: "#B4C6FF",
+  160: "#dbe5ff"
+};
+var coralLightTheme = createLightTheme(brand);
+var coralDarkTheme = createDarkTheme(brand);
+
+// src/provider/CoralProvider.tsx
+import { jsx } from "react/jsx-runtime";
+function CoralProvider({ children, theme = coralLightTheme }) {
+  const resolvedTheme = typeof theme === "string" ? theme === "dark" ? coralDarkTheme : coralLightTheme : theme;
+  return /* @__PURE__ */ jsx(FluentProvider, { theme: resolvedTheme, children });
+}
+
+// src/index.ts
+import { Button as Button3, ToggleButton as ToggleButton2, Tab, TabList } from "@fluentui/react-components";
+
+// src/components/Header/Header.tsx
+import { Avatar, Subtitle2 } from "@fluentui/react-components";
+
+// src/imports/MsftColor.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var MicrosoftLogo = () => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "32",
+      height: "32",
+      viewBox: "0 0 32 32",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx2("path", { d: "M5.04349 5.04349H15.4783V15.4783H5.04349V5.04349Z", fill: "#F35325" }),
+        /* @__PURE__ */ jsx2("path", { d: "M16.5217 5.04349H26.9565V15.4783H16.5217V5.04349Z", fill: "#81BC06" }),
+        /* @__PURE__ */ jsx2("path", { d: "M5.04349 16.5217H15.4783V26.9565H5.04349V16.5217Z", fill: "#05A6F0" }),
+        /* @__PURE__ */ jsx2("path", { d: "M16.5217 16.5217H26.9565V26.9565H16.5217V16.5217Z", fill: "#FFBA08" })
+      ]
+    }
+  );
+};
+var MsftColor_default = MicrosoftLogo;
+
+// src/components/Header/Header.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var Header = ({ logo, title = "Microsoft", subtitle, children }) => {
+  return /* @__PURE__ */ jsxs2(
+    "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",
+      children: [
+        /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              gap: "8px"
+            },
+            children: [
+              /* @__PURE__ */ jsx3(
+                Avatar,
+                {
+                  shape: "square",
+                  color: "neutral",
+                  icon: { children: logo || /* @__PURE__ */ jsx3(MsftColor_default, {}) }
+                }
+              ),
+              /* @__PURE__ */ jsxs2(Subtitle2, { style: { whiteSpace: "nowrap", marginTop: "-2px" }, children: [
+                title,
+                subtitle && /* @__PURE__ */ jsxs2("span", { style: { fontWeight: "400" }, children: [
+                  " | ",
+                  subtitle
+                ] })
+              ] })
+            ]
+          }
+        ),
+        children
+      ]
+    }
+  );
+};
+var Header_default = Header;
+
+// src/components/Header/HeaderTools.tsx
+import { Toolbar } from "@fluentui/react-components";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var HeaderTools = ({ children }) => {
+  return /* @__PURE__ */ jsx4(
+    Toolbar,
+    {
+      style: {
+        display: "flex",
+        flex: "0",
+        alignItems: "center",
+        flexDirection: "row-reverse",
+        padding: "4px 0"
+      },
+      children
+    }
+  );
+};
+var HeaderTools_default = HeaderTools;
+
+// src/components/Panels/PanelToggle.tsx
+import { useEffect, useState } from "react";
+import { ToggleButton } from "@fluentui/react-components";
+
+// src/imports/bundleicons.tsx
+import {
+  ArrowExitFilled,
+  ArrowExitRegular,
+  BeakerFilled,
+  BeakerRegular,
+  BookmarkFilled,
+  BookmarkRegular,
+  CodeFilled,
+  CodeRegular,
+  CubeFilled,
+  CubeRegular,
+  DesignIdeasFilled,
+  DesignIdeasRegular,
+  DrawerArrowDownloadFilled,
+  DrawerArrowDownloadRegular,
+  FlowFilled,
+  FlowRegular,
+  FolderOpenFilled,
+  FolderOpenRegular,
+  LeafOneFilled,
+  LeafOneRegular,
+  LinkFilled,
+  LinkRegular,
+  OpenFilled,
+  OpenRegular,
+  OrganizationHorizontalFilled,
+  OrganizationHorizontalRegular,
+  PanelLeftContractFilled,
+  PanelLeftContractRegular,
+  PanelLeftExpandFilled,
+  PanelLeftExpandRegular,
+  PanelRightContractFilled,
+  PanelRightContractRegular,
+  PanelRightExpandFilled,
+  PanelRightExpandRegular,
+  PersonFilled,
+  PersonRegular,
+  PersonFeedbackFilled,
+  PersonFeedbackRegular,
+  SearchFilled,
+  SearchRegular,
+  SendFilled,
+  SendRegular,
+  ShareFilled,
+  ShareRegular,
+  TreeDeciduousFilled,
+  TreeDeciduousRegular,
+  TreeEvergreenFilled,
+  TreeEvergreenRegular,
+  WeatherMoonFilled,
+  WeatherMoonRegular,
+  WeatherSunnyFilled,
+  WeatherSunnyRegular,
+  DismissFilled,
+  DismissRegular,
+  DocumentSparkleFilled,
+  DocumentSparkleRegular,
+  SparkleFilled,
+  SparkleRegular,
+  StarFilled,
+  StarRegular,
+  MoreHorizontalFilled,
+  MoreHorizontalRegular,
+  bundleIcon,
+  CopyFilled,
+  CopyRegular,
+  HistoryFilled,
+  HistoryRegular,
+  TaskListSquareLtrFilled,
+  TaskListSquareLtrRegular
+} from "@fluentui/react-icons";
+var TaskListSquareLtr = bundleIcon(TaskListSquareLtrFilled, TaskListSquareLtrRegular);
+var History = bundleIcon(HistoryFilled, HistoryRegular);
+var Copy = bundleIcon(CopyFilled, CopyRegular);
+var Send = bundleIcon(SendFilled, SendRegular);
+var MoreHorizontal = bundleIcon(MoreHorizontalFilled, MoreHorizontalRegular);
+var ArrowExit = bundleIcon(ArrowExitFilled, ArrowExitRegular);
+var Bookmark = bundleIcon(BookmarkFilled, BookmarkRegular);
+var Sparkle = bundleIcon(SparkleFilled, SparkleRegular);
+var Star = bundleIcon(StarFilled, StarRegular);
+var DocumentSparkle = bundleIcon(DocumentSparkleFilled, DocumentSparkleRegular);
+var Dismiss = bundleIcon(DismissFilled, DismissRegular);
+var DrawerArrowDownload = bundleIcon(DrawerArrowDownloadFilled, DrawerArrowDownloadRegular);
+var Beaker = bundleIcon(BeakerFilled, BeakerRegular);
+var Code = bundleIcon(CodeFilled, CodeRegular);
+var Cube = bundleIcon(CubeFilled, CubeRegular);
+var DesignIdeas = bundleIcon(DesignIdeasFilled, DesignIdeasRegular);
+var Flow = bundleIcon(FlowFilled, FlowRegular);
+var FolderOpen = bundleIcon(FolderOpenFilled, FolderOpenRegular);
+var LeafOne = bundleIcon(LeafOneFilled, LeafOneRegular);
+var Link = bundleIcon(LinkFilled, LinkRegular);
+var Open = bundleIcon(OpenFilled, OpenRegular);
+var OrganizationHorizontal = bundleIcon(
+  OrganizationHorizontalFilled,
+  OrganizationHorizontalRegular
+);
+var PanelLeftContract = bundleIcon(
+  PanelLeftContractFilled,
+  PanelLeftContractRegular
+);
+var PanelLeftExpand = bundleIcon(
+  PanelLeftExpandFilled,
+  PanelLeftExpandRegular
+);
+var PanelRightContract = bundleIcon(
+  PanelRightContractFilled,
+  PanelRightContractRegular
+);
+var PanelRightExpand = bundleIcon(
+  PanelRightExpandFilled,
+  PanelRightExpandRegular
+);
+var Person = bundleIcon(PersonFilled, PersonRegular);
+var PersonFeedback = bundleIcon(
+  PersonFeedbackFilled,
+  PersonFeedbackRegular
+);
+var Search = bundleIcon(SearchFilled, SearchRegular);
+var Share = bundleIcon(ShareFilled, ShareRegular);
+var TreeDeciduous = bundleIcon(
+  TreeDeciduousFilled,
+  TreeDeciduousRegular
+);
+var TreeEvergreen = bundleIcon(
+  TreeEvergreenFilled,
+  TreeEvergreenRegular
+);
+var WeatherMoon = bundleIcon(WeatherMoonFilled, WeatherMoonRegular);
+var WeatherSunny = bundleIcon(WeatherSunnyFilled, WeatherSunnyRegular);
+var bundleicons_default = { bundleIcon };
+
+// src/components/eventbus.tsx
+var EventBus = class {
+  constructor() {
+    this.events = {};
+    this.panelWidth = 400;
+    this.activePanel = null;
+  }
+  on(event, callback) {
+    if (!this.events[event]) {
+      this.events[event] = [];
+    }
+    this.events[event].push(callback);
+  }
+  off(event, callback) {
+    if (!this.events[event]) return;
+    this.events[event] = this.events[event].filter((cb) => cb !== callback);
+  }
+  emit(event, ...args) {
+    if (!this.events[event]) return;
+    this.events[event].forEach((callback) => callback(...args));
+  }
+  // Panel control
+  setActivePanel(panelID) {
+    this.activePanel = panelID;
+    this.emit("setActivePanel", panelID);
+  }
+  getActivePanel() {
+    return this.activePanel;
+  }
+  // Shared panel width
+  setPanelWidth(width) {
+    this.panelWidth = width;
+    this.emit("panelWidthChanged", width);
+  }
+  getPanelWidth() {
+    return this.panelWidth;
+  }
+};
+var eventBus = new EventBus();
+var eventbus_default = eventBus;
+
+// src/components/Panels/PanelToggle.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var PanelToggle = ({
+  panelID,
+  icon,
+  onClick,
+  ...rest
+}) => {
+  const [activePanel, setActivePanel] = useState(
+    () => eventbus_default.getActivePanel()
+  );
+  useEffect(() => {
+    const handleActivePanel = (panel) => {
+      setActivePanel(panel);
+    };
+    eventbus_default.on("setActivePanel", handleActivePanel);
+    return () => {
+      eventbus_default.off("setActivePanel", handleActivePanel);
+    };
+  }, []);
+  const isActive = activePanel === panelID;
+  const resolvedIcon = icon !== void 0 ? icon : isActive ? /* @__PURE__ */ jsx5(PanelRightContract, {}) : /* @__PURE__ */ jsx5(PanelRightExpand, {});
+  const handleClick = (event) => {
+    const next = isActive ? null : panelID;
+    eventbus_default.setActivePanel(next);
+    onClick?.(event);
+  };
+  return /* @__PURE__ */ jsx5(
+    ToggleButton,
+    {
+      ...rest,
+      checked: isActive,
+      onClick: handleClick,
+      icon: resolvedIcon,
+      "aria-pressed": isActive
+    }
+  );
+};
+var PanelToggle_default = PanelToggle;
+
+// src/components/Layout/CoralShellColumn.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var CoralShellColumn = ({ children }) => {
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100vh",
+        overflow: "hidden",
+        backgroundColor: "var(--colorNeutralBackground3)"
+      },
+      children
+    }
+  );
+};
+var CoralShellColumn_default = CoralShellColumn;
+
+// src/components/Layout/CoralShellRow.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var CoralShellRow = ({ children }) => {
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flex: 1,
+        overflow: "hidden"
+      },
+      children
+    }
+  );
+};
+var CoralShellRow_default = CoralShellRow;
+
+// src/components/Panels/PanelLeft.tsx
+import React2, {
+  useState as useState2,
+  useEffect as useEffect2,
+  isValidElement
+} from "react";
+
+// src/components/Panels/PanelToolbar.tsx
+import { Body1Strong } from "@fluentui/react-components";
+import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+var PanelToolbar = ({
+  icon,
+  title,
+  linkTo,
+  onLinkClick,
+  children
+}) => {
+  const TitleContent = /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: "panelTitle",
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "6px",
+        flexShrink: 1,
+        overflow: "hidden",
+        minWidth: 0
+      },
+      children: [
+        icon && /* @__PURE__ */ jsx8(
+          "div",
+          {
+            style: {
+              flexShrink: 0,
+              display: "flex",
+              alignItems: "center"
+            },
+            children: icon
+          }
+        ),
+        title && /* @__PURE__ */ jsx8(
+          Body1Strong,
+          {
+            style: {
+              whiteSpace: "nowrap",
+              overflow: "hidden",
+              textOverflow: "ellipsis"
+            },
+            children: title
+          }
+        )
+      ]
+    }
+  );
+  const Title = linkTo ? /* @__PURE__ */ jsx8(
+    "a",
+    {
+      href: linkTo,
+      onClick: onLinkClick,
+      style: {
+        textDecoration: "none",
+        color: "inherit",
+        display: "flex",
+        alignItems: "center",
+        minWidth: 0,
+        flexShrink: 1
+      },
+      children: TitleContent
+    }
+  ) : TitleContent;
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: "panelToolbar",
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "8px",
+        padding: "16px",
+        boxSizing: "border-box",
+        height: "56px"
+      },
+      children: [
+        (icon || title) && Title,
+        /* @__PURE__ */ jsx8(
+          "div",
+          {
+            className: "panelTools",
+            style: {
+              display: "flex",
+              alignItems: "center",
+              flexGrow: 1,
+              justifyContent: "flex-end",
+              minWidth: 0
+            },
+            children
+          }
+        )
+      ]
+    }
+  );
+};
+var PanelToolbar_default = PanelToolbar;
+
+// src/components/Panels/PanelFooter.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var PanelFooter = ({ children }) => {
+  return /* @__PURE__ */ jsx9(
+    "div",
+    {
+      style: {
+        padding: "24px 16px",
+        width: "100%"
+      },
+      children
+    }
+  );
+};
+PanelFooter.displayName = "PanelFooter";
+var PanelFooter_default = PanelFooter;
+
+// src/components/Panels/PanelLeft.tsx
+import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
+var PanelLeft = ({
+  panelWidth = 500,
+  panelResize = true,
+  children
+}) => {
+  const [width, setWidth] = useState2(panelWidth);
+  const [isHandleHovered, setIsHandleHovered] = useState2(false);
+  useEffect2(() => {
+    setWidth(panelWidth);
+  }, [panelWidth]);
+  const handleMouseDown = (e) => {
+    if (!panelResize) return;
+    const startX = e.clientX;
+    const startWidth = width;
+    const onMouseMove = (moveEvent) => {
+      const newWidth = Math.min(
+        500,
+        Math.max(256, startWidth + (moveEvent.clientX - startX))
+      );
+      setWidth(newWidth);
+    };
+    const onMouseUp = () => {
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+      document.body.style.userSelect = "";
+    };
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+    document.body.style.userSelect = "none";
+  };
+  const childrenArray = React2.Children.toArray(children);
+  const toolbar = childrenArray.find(
+    (child) => isValidElement(child) && child.type === PanelToolbar_default
+  );
+  const footer = childrenArray.find(
+    (child) => isValidElement(child) && child.type === PanelFooter_default
+  );
+  const content = childrenArray.filter(
+    (child) => !(isValidElement(child) && (child.type === PanelToolbar_default || child.type === PanelFooter_default))
+  );
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: "panelLeft",
+      style: {
+        width: `${width}px`,
+        display: "flex",
+        flexDirection: "column",
+        backgroundColor: "var(--colorNeutralBackground4)",
+        height: "100%",
+        boxSizing: "border-box",
+        position: "relative",
+        borderRight: panelResize ? isHandleHovered ? "2px solid var(--colorNeutralStroke2)" : "1px solid var(--colorNeutralStroke2)" : "none"
+      },
+      children: [
+        toolbar && /* @__PURE__ */ jsx10("div", { style: { flexShrink: 0 }, children: toolbar }),
+        /* @__PURE__ */ jsx10(
+          "div",
+          {
+            className: "panelContent",
+            style: {
+              flex: 1,
+              overflowY: "auto",
+              overflowX: "hidden",
+              boxSizing: "border-box"
+            },
+            children: content
+          }
+        ),
+        footer && /* @__PURE__ */ jsx10("div", { children: footer }),
+        panelResize && /* @__PURE__ */ jsx10(
+          "div",
+          {
+            className: "resizeHandle",
+            onMouseDown: handleMouseDown,
+            onMouseEnter: () => setIsHandleHovered(true),
+            onMouseLeave: () => setIsHandleHovered(false),
+            style: {
+              position: "absolute",
+              top: 0,
+              right: 0,
+              width: "2px",
+              height: "100%",
+              cursor: "ew-resize",
+              zIndex: 1,
+              backgroundColor: isHandleHovered ? "var(--colorNeutralStroke2)" : "transparent"
+            }
+          }
+        )
+      ]
+    }
+  );
+};
+var PanelLeft_default = PanelLeft;
+
+// src/components/Panels/PanelRight.tsx
+import React3, { useState as useState3, useEffect as useEffect3 } from "react";
+import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+var PanelRight = ({
+  panelWidth = 325,
+  // Default width if not provided
+  panelResize = true,
+  panelID,
+  defaultClosed = false,
+  children
+}) => {
+  const [isActive, setIsActive] = useState3(false);
+  const [width, setWidth] = useState3(panelWidth);
+  const [isHandleHovered, setIsHandleHovered] = useState3(false);
+  useEffect3(() => {
+    if (eventbus_default.getPanelWidth() === 400) {
+      eventbus_default.setPanelWidth(panelWidth);
+    }
+    setWidth(eventbus_default.getPanelWidth());
+    const handleActivePanel = (panel) => {
+      setIsActive(panel === panelID);
+    };
+    const handleWidthChange = (newWidth) => {
+      setWidth(newWidth);
+    };
+    eventbus_default.on("setActivePanel", handleActivePanel);
+    eventbus_default.on("panelWidthChanged", handleWidthChange);
+    const currentActive = eventbus_default.getActivePanel();
+    const shouldActivate = !defaultClosed && currentActive === null;
+    const nextActive = shouldActivate ? panelID : currentActive;
+    if (shouldActivate) {
+      eventbus_default.setActivePanel(panelID);
+    } else {
+      setIsActive(currentActive === panelID);
+    }
+    eventbus_default.emit("panelInitState", {
+      panelID,
+      panelType: panelID,
+      isActive: nextActive === panelID
+    });
+    return () => {
+      eventbus_default.off("setActivePanel", handleActivePanel);
+      eventbus_default.off("panelWidthChanged", handleWidthChange);
+    };
+  }, [panelID, panelWidth, defaultClosed]);
+  const handleMouseDown = (e) => {
+    if (!panelResize) return;
+    const startX = e.clientX;
+    const startWidth = width;
+    const onMouseMove = (moveEvent) => {
+      const newWidth = Math.min(
+        500,
+        // Max width
+        Math.max(256, startWidth - (moveEvent.clientX - startX))
+        // Min width
+      );
+      setWidth(newWidth);
+      eventbus_default.setPanelWidth(newWidth);
+    };
+    const onMouseUp = () => {
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+      document.body.style.userSelect = "";
+    };
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+    document.body.style.userSelect = "none";
+  };
+  if (!isActive) return null;
+  const childrenArray = React3.Children.toArray(children);
+  const toolbar = childrenArray.find(
+    (child) => React3.isValidElement(child) && child.type === PanelToolbar_default
+  );
+  const content = childrenArray.filter(
+    (child) => !(React3.isValidElement(child) && child.type === PanelToolbar_default)
+  );
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      className: "panelRight",
+      style: {
+        width: `${width}px`,
+        display: "flex",
+        flexDirection: "column",
+        backgroundColor: "var(--colorNeutralBackground3)",
+        height: "100%",
+        boxSizing: "border-box",
+        position: "relative",
+        borderLeft: panelResize ? isHandleHovered ? "2px solid var(--colorNeutralStroke2)" : "1px solid var(--colorNeutralStroke2)" : "none"
+      },
+      children: [
+        toolbar && /* @__PURE__ */ jsx11("div", { style: { flexShrink: 0 }, children: toolbar }),
+        /* @__PURE__ */ jsx11(
+          "div",
+          {
+            className: "panelContent",
+            style: {
+              flex: 1,
+              overflowY: "auto"
+            },
+            children: content
+          }
+        ),
+        panelResize && /* @__PURE__ */ jsx11(
+          "div",
+          {
+            className: "resizeHandle",
+            onMouseDown: handleMouseDown,
+            onMouseEnter: () => setIsHandleHovered(true),
+            onMouseLeave: () => setIsHandleHovered(false),
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "2px",
+              height: "100%",
+              cursor: "ew-resize",
+              zIndex: 1,
+              backgroundColor: isHandleHovered ? "var(--colorNeutralStroke2)" : "transparent"
+            }
+          }
+        )
+      ]
+    }
+  );
+};
+var PanelRight_default = PanelRight;
+
+// src/components/Content/Content.tsx
+import React4 from "react";
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+var Content = ({ children }) => {
+  const childrenArray = React4.Children.toArray(children);
+  const toolbar = childrenArray.find(
+    (child) => React4.isValidElement(child) && child.type === PanelToolbar_default
+  );
+  const content = childrenArray.filter(
+    (child) => !(React4.isValidElement(child) && child.type === PanelToolbar_default)
+  );
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      className: "content",
+      style: {
+        display: "flex",
+        flex: "1",
+        flexDirection: "column",
+        height: "100%",
+        boxSizing: "border-box",
+        position: "relative",
+        minWidth: "320px"
+      },
+      children: [
+        toolbar && /* @__PURE__ */ jsx12("div", { style: { flexShrink: 0 }, children: toolbar }),
+        /* @__PURE__ */ jsx12(
+          "div",
+          {
+            className: "panelContent",
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              flex: 1,
+              width: "100%",
+              overflow: "hidden",
+              // prevent double scrollbars
+              minHeight: 0
+              // allow child to shrink properly
+            },
+            children: content
+          }
+        )
+      ]
+    }
+  );
+};
+var Content_default = Content;
+
+// src/components/PanelNav/PanelNav.tsx
+import * as React5 from "react";
+import {
+  makeStyles,
+  shorthands,
+  tokens,
+  Button,
+  Body1Strong as Body1Strong2
+} from "@fluentui/react-components";
+import { ChevronDown20Regular } from "@fluentui/react-icons";
+import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+var useStyles = makeStyles({
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    minWidth: 0,
+    margin: "8px"
+  },
+  headerButton: {
+    display: "grid",
+    gridTemplateColumns: "1fr auto",
+    alignItems: "center",
+    columnGap: tokens.spacingHorizontalS,
+    ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),
+    ...shorthands.borderRadius(tokens.borderRadiusLarge),
+    ...shorthands.border("1px", "solid", "transparent"),
+    color: tokens.colorNeutralForeground4,
+    boxSizing: "border-box",
+    height: "48px",
+    width: "100%",
+    justifyContent: "unset",
+    transitionProperty: "color",
+    transitionDuration: ".3s",
+    ":hover": {
+      color: tokens.colorNeutralForeground1
+    }
+  },
+  title: {
+    minWidth: 0,
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    textAlign: "left"
+  },
+  chevron: {
+    transitionProperty: "transform",
+    transitionDuration: tokens.durationNormal,
+    transitionTimingFunction: tokens.curveEasyEase,
+    transform: "rotate(-90deg)"
+  },
+  chevronOpen: {
+    transform: "rotate(0deg)"
+  },
+  items: {
+    display: "flex",
+    flexDirection: "column"
+  },
+  itemsCollapsed: {
+    display: "none"
+  }
+});
+function useControllableBooleanState(params) {
+  const { value, defaultValue, onChange } = params;
+  const [uncontrolled, setUncontrolled] = React5.useState(defaultValue);
+  const isControlled = value !== void 0;
+  const current = isControlled ? value : uncontrolled;
+  const set = React5.useCallback(
+    (ev, next) => {
+      if (!isControlled) setUncontrolled(next);
+      onChange?.(ev, next);
+    },
+    [isControlled, onChange]
+  );
+  return [current, set];
+}
+function PanelNav({
+  value,
+  defaultValue,
+  defaultOpen,
+  onValueChange,
+  title,
+  disabled = false,
+  children,
+  className
+}) {
+  const styles = useStyles();
+  const initial = defaultValue ?? defaultOpen ?? false;
+  const [open, setOpen] = useControllableBooleanState({
+    value,
+    defaultValue: initial,
+    onChange: (ev, next) => onValueChange?.(ev, { value: next })
+  });
+  const toggle = React5.useCallback(
+    (ev) => {
+      if (disabled) return;
+      setOpen(ev, !open);
+    },
+    [disabled, open, setOpen]
+  );
+  const resolvedTitle = title ?? "Section";
+  return /* @__PURE__ */ jsxs7("div", { className: [styles.root, className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsx13(
+      Button,
+      {
+        appearance: "transparent",
+        disabled,
+        className: styles.headerButton,
+        "aria-expanded": open,
+        onClick: (ev) => toggle(ev),
+        icon: /* @__PURE__ */ jsx13(
+          ChevronDown20Regular,
+          {
+            className: [styles.chevron, open ? styles.chevronOpen : ""].join(" ")
+          }
+        ),
+        iconPosition: "after",
+        children: /* @__PURE__ */ jsx13(Body1Strong2, { className: styles.title, children: resolvedTitle })
+      }
+    ),
+    /* @__PURE__ */ jsx13("div", { className: open ? styles.items : styles.itemsCollapsed, children })
+  ] });
+}
+
+// src/components/PanelNav/PanelNavItem.tsx
+import {
+  Button as Button2,
+  makeStyles as makeStyles2,
+  shorthands as shorthands2,
+  tokens as tokens2,
+  Subtitle2 as Subtitle22
+} from "@fluentui/react-components";
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+var useStyles2 = makeStyles2({
+  root: {
+    width: "100%",
+    justifyContent: "flex-start",
+    textAlign: "left",
+    ...shorthands2.padding(tokens2.spacingVerticalM, tokens2.spacingHorizontalM),
+    ...shorthands2.borderRadius(tokens2.borderRadiusLarge),
+    ...shorthands2.border("1px", "solid", "transparent"),
+    boxSizing: "border-box",
+    backgroundColor: "transparent",
+    color: tokens2.colorNeutralForeground1,
+    ":hover": {
+      backgroundColor: tokens2.colorNeutralBackground2
+    },
+    ":active": {
+      backgroundColor: tokens2.colorNeutralBackground3
+    },
+    ":focus-visible": {
+      outlineStyle: "solid",
+      outlineWidth: tokens2.strokeWidthThick,
+      outlineColor: tokens2.colorStrokeFocus2,
+      outlineOffset: "2px"
+    }
+  },
+  selected: {
+    backgroundColor: tokens2.colorNeutralBackground2,
+    ...shorthands2.border("1px", "solid", tokens2.colorBrandStroke1),
+    ":hover": {
+      backgroundColor: tokens2.colorNeutralBackground2
+    },
+    ":active": {
+      backgroundColor: tokens2.colorNeutralBackground3
+    }
+  },
+  content: {
+    display: "grid",
+    gridTemplateColumns: "auto 1fr",
+    alignItems: "center",
+    columnGap: tokens2.spacingHorizontalS,
+    minWidth: 0,
+    width: "100%"
+  },
+  icon: {
+    display: "flex",
+    alignItems: "center",
+    color: "inherit"
+  },
+  title: {
+    minWidth: 0,
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis"
+  }
+});
+function PanelNavItem({
+  title,
+  icon,
+  value,
+  selected,
+  active,
+  disabled = false,
+  onSelect,
+  onClick,
+  className
+}) {
+  const styles = useStyles2();
+  const isSelected = selected ?? active ?? false;
+  return /* @__PURE__ */ jsx14(
+    Button2,
+    {
+      appearance: "subtle",
+      disabled,
+      className: [styles.root, isSelected ? styles.selected : "", className ?? ""].filter(Boolean).join(" "),
+      "aria-current": isSelected ? "page" : void 0,
+      onClick: (ev) => {
+        onClick?.(ev);
+        onSelect?.(ev, { value });
+      },
+      children: /* @__PURE__ */ jsxs8("span", { className: styles.content, children: [
+        icon ? /* @__PURE__ */ jsx14("span", { className: styles.icon, children: icon }) : null,
+        /* @__PURE__ */ jsx14(Subtitle22, { className: styles.title, children: title })
+      ] })
+    }
+  );
+}
+
+// src/components/Panels/UserCard.tsx
+import {
+  Avatar as Avatar2,
+  Body1Strong as Body1Strong3,
+  Caption1
+} from "@fluentui/react-components";
+import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+var PanelUserCard = ({ name, alias, ...avatarProps }) => {
+  return /* @__PURE__ */ jsxs9(
+    "div",
+    {
+      style: {
+        display: "flex",
+        gap: "12px",
+        alignItems: "center",
+        margin: "16px"
+      },
+      children: [
+        /* @__PURE__ */ jsx15(
+          Avatar2,
+          {
+            name,
+            ...avatarProps
+          }
+        ),
+        /* @__PURE__ */ jsxs9("div", { style: { display: "flex", flexDirection: "column" }, children: [
+          /* @__PURE__ */ jsx15(Body1Strong3, { children: name }),
+          alias && /* @__PURE__ */ jsx15(Caption1, { style: { color: "var(--colorNeutralForeground3)" }, children: alias })
+        ] })
+      ]
+    }
+  );
+};
+var UserCard_default = PanelUserCard;
+export {
+  Button3 as Button,
+  Content_default as Content,
+  CoralProvider,
+  CoralShellColumn_default as CoralShellColumn,
+  CoralShellRow_default as CoralShellRow,
+  Header_default as Header,
+  HeaderTools_default as HeaderTools,
+  bundleicons_default as LeafOne,
+  PanelLeft_default as PanelLeft,
+  PanelNav,
+  PanelNavItem,
+  PanelRight_default as PanelRight,
+  PanelToggle_default as PanelToggle,
+  PanelToolbar_default as PanelToolbar,
+  Tab,
+  TabList,
+  ToggleButton2 as ToggleButton,
+  UserCard_default as UserCard,
+  coralDarkTheme,
+  coralLightTheme
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/provider/CoralProvider.tsx","../src/theme/theme.ts","../src/index.ts","../src/components/Header/Header.tsx","../src/imports/MsftColor.tsx","../src/components/Header/HeaderTools.tsx","../src/components/Panels/PanelToggle.tsx","../src/imports/bundleicons.tsx","../src/components/eventbus.tsx","../src/components/Layout/CoralShellColumn.tsx","../src/components/Layout/CoralShellRow.tsx","../src/components/Panels/PanelLeft.tsx","../src/components/Panels/PanelToolbar.tsx","../src/components/Panels/PanelFooter.tsx","../src/components/Panels/PanelRight.tsx","../src/components/Content/Content.tsx","../src/components/PanelNav/PanelNav.tsx","../src/components/PanelNav/PanelNavItem.tsx","../src/components/Panels/UserCard.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { FluentProvider, type Theme } from \"@fluentui/react-components\";\r\nimport { coralLightTheme, coralDarkTheme } from \"../theme/theme\";\r\n\r\nexport type CoralColorScheme = \"light\" | \"dark\";\r\n\r\nexport type CoralProviderProps = {\r\n  children: React.ReactNode;\r\n  theme?: Theme | CoralColorScheme;\r\n};\r\n\r\nexport function CoralProvider({ children, theme = coralLightTheme }: CoralProviderProps) {\r\n  const resolvedTheme =\r\n    typeof theme === \"string\" ? (theme === \"dark\" ? coralDarkTheme : coralLightTheme) : theme;\r\n\r\n  return <FluentProvider theme={resolvedTheme}>{children}</FluentProvider>;\r\n}","import { createLightTheme, createDarkTheme, type Theme } from '@fluentui/react-components';\r\n\r\nconst brand = {\r\n  10: \"#09000C\",\r\n  20: \"#280045\",\r\n  30: \"#36006E\",\r\n  40: \"#3D0098\",\r\n  50: \"#3500CD\",\r\n  60: \"#0112FF\",\r\n  70: \"#2735FF\",\r\n  80: \"#3C4CFF\",\r\n  90: \"#4E5FFF\",\r\n  100: \"#5E72FF\",\r\n  110: \"#6F83FF\",\r\n  120: \"#7F94FF\",\r\n  130: \"#90A5FF\",\r\n  140: \"#A1B6FF\",\r\n  150: \"#B4C6FF\",\r\n  160: \"#dbe5ff\",\r\n} as const;\r\n\r\nexport const coralLightTheme: Theme = createLightTheme(brand as any);\r\nexport const coralDarkTheme: Theme = createDarkTheme(brand as any);\r\n","export * from './provider/CoralProvider';\r\nexport * from './theme/theme';\r\n\r\n\r\n// re-export Fluent temporarily (so apps import from Coral)\r\nexport { Button, ToggleButton, Tab, TabList } from '@fluentui/react-components';\r\n\r\n// Components (default exports -> named re-exports)\r\nexport { default as Header } from \"./components/Header/Header\";\r\nexport { default as HeaderTools } from \"./components/Header/HeaderTools\";\r\nexport { default as PanelToggle } from \"./components/Panels/PanelToggle\";\n\r\nexport { default as CoralShellColumn } from \"./components/Layout/CoralShellColumn\";\r\nexport { default as CoralShellRow } from \"./components/Layout/CoralShellRow\";\r\n\r\nexport { default as PanelLeft } from \"./components/Panels/PanelLeft\";\r\nexport { default as PanelToolbar } from \"./components/Panels/PanelToolbar\";\r\nexport { default as PanelRight } from \"./components/Panels/PanelRight\";\r\n\r\nexport { default as Content } from \"./components/Content/Content\";\r\nexport { PanelNav } from \"./components/PanelNav/PanelNav\";\r\nexport { PanelNavItem } from \"./components/PanelNav/PanelNavItem\";\r\nexport { default as UserCard } from \"./components/Panels/UserCard\";\r\n\r\n// icons (export LeafOne as a component)\r\nexport { default as LeafOne } from './imports/bundleicons';\r\n","import React from \"react\";\r\nimport { Avatar, Subtitle2 } from \"@fluentui/react-components\";\r\nimport MsftColor from \"../../imports/MsftColor\"; // Default icon component\r\n\r\n/**\r\n * @component\r\n * @name Header\r\n * @description A header component for displaying a logo, title, and optional subtitle.\r\n * \r\n * @prop {React.ReactNode} [logo] - Custom logo (defaults to Microsoft icon).\r\n * @prop {string} [title=\"Microsoft\"] - Main title text.\r\n * @prop {string} [subtitle] - Optional subtitle displayed next to the title.\r\n * @prop {React.ReactNode} [children] - Optional header toolbar (e.g., buttons, menus).\r\n */\r\ntype HeaderProps = {\r\n  logo?: React.ReactNode;\r\n  title?: string;\r\n  subtitle?: string;\r\n  children?: React.ReactNode;\r\n};\r\n\r\nconst Header: React.FC<HeaderProps> = ({ logo, title = \"Microsoft\", subtitle, children }) => {\r\n  return (\r\n    <header\r\n      style={{\r\n        display: \"flex\",\r\n        justifyContent: \"space-between\",\r\n        alignItems: \"center\",\r\n        width: \"100%\",\r\n        backgroundColor: \"var(--colorNeutralBackgroundAlpha)\",\r\n        borderBottom: \"1px solid var(--colorNeutralStroke2)\",\r\n        padding: \"16px\",\r\n        height: \"64px\",\r\n        boxSizing: \"border-box\",\r\n        gap: \"12px\",\r\n      }}\r\n      data-figma-component=\"Header\"\r\n    >\r\n      <div\r\n        style={{\r\n          display: \"flex\",\r\n          justifyContent: \"space-between\",\r\n          alignItems: \"center\",\r\n          gap: \"8px\",\r\n        }}\r\n      >\r\n        {/* Render custom logo or default MsftColor logo */}\r\n        <Avatar \r\n          shape=\"square\" \r\n          color=\"neutral\" \r\n          icon={{ children: logo || <MsftColor /> }} \r\n        />\r\n\r\n        {/* Render title and optional subtitle */}\r\n        <Subtitle2 style={{ whiteSpace: \"nowrap\", marginTop: \"-2px\" }}>\r\n          {title}\r\n          {subtitle && (\r\n            <span style={{ fontWeight: \"400\" }}> | {subtitle}</span>\r\n          )}\r\n        </Subtitle2>\r\n      </div>\r\n\r\n      {/* HEADER TOOLBAR (rendered only if passed as a child) */}\r\n      {children}\r\n    </header>\r\n  );\r\n};\r\n\r\nexport default Header;\r\n","import React from 'react';\r\n\r\nconst MicrosoftLogo: React.FC = () => {\r\n  return (\r\n    <svg\r\n      width=\"32\"\r\n      height=\"32\"\r\n      viewBox=\"0 0 32 32\"\r\n      fill=\"none\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n    >\r\n      <path d=\"M5.04349 5.04349H15.4783V15.4783H5.04349V5.04349Z\" fill=\"#F35325\" />\r\n      <path d=\"M16.5217 5.04349H26.9565V15.4783H16.5217V5.04349Z\" fill=\"#81BC06\" />\r\n      <path d=\"M5.04349 16.5217H15.4783V26.9565H5.04349V16.5217Z\" fill=\"#05A6F0\" />\r\n      <path d=\"M16.5217 16.5217H26.9565V26.9565H16.5217V16.5217Z\" fill=\"#FFBA08\" />\r\n    </svg>\r\n  );\r\n};\r\n\r\nexport default MicrosoftLogo;\r\n","import React from \"react\";\nimport { Toolbar } from \"@fluentui/react-components\";\n\r\n\r\ninterface HeaderToolsProps {\r\n    children?: React.ReactNode;\r\n}\r\n\r\nconst HeaderTools: React.FC<HeaderToolsProps> = ({ children }) => {\r\n\r\n\r\n    return (\r\n        <Toolbar\r\n            style={{\r\n                display: \"flex\",\r\n                flex: \"0\",\r\n                alignItems: \"center\",\r\n                flexDirection: \"row-reverse\",\r\n                padding: \"4px 0\",\r\n            }}\r\n        >\r\n            {children}\r\n        </Toolbar>\r\n    );\r\n};\r\n\r\nexport default HeaderTools;\r\n","import React, { useEffect, useState } from \"react\";\nimport { ToggleButton } from \"@fluentui/react-components\";\nimport type { ToggleButtonProps } from \"@fluentui/react-components\";\nimport { PanelRightContract, PanelRightExpand } from \"../../imports/bundleicons.js\";\nimport eventBus from \"../eventbus.js\";\n\ntype ToggleButtonButtonProps = Extract<ToggleButtonProps, { as?: \"button\" }>;\n\ntype PanelToggleProps = Omit<\n  ToggleButtonButtonProps,\n  \"as\" | \"checked\" | \"defaultChecked\" | \"icon\" | \"onClick\"\n> & {\n  panelID: string;\n  icon?: ToggleButtonButtonProps[\"icon\"];\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n};\n\nconst PanelToggle: React.FC<PanelToggleProps> = ({\n  panelID,\n  icon,\n  onClick,\n  ...rest\n}) => {\n  const [activePanel, setActivePanel] = useState<string | null>(() =>\n    eventBus.getActivePanel()\n  );\n\n  useEffect(() => {\n    const handleActivePanel = (panel: string | null) => {\n      setActivePanel(panel);\n    };\n\n    eventBus.on(\"setActivePanel\", handleActivePanel);\n\n    return () => {\n      eventBus.off(\"setActivePanel\", handleActivePanel);\n    };\n  }, []);\n\n  const isActive = activePanel === panelID;\n\n  const resolvedIcon = icon !== undefined\n    ? icon\n    : isActive\n      ? <PanelRightContract />\n      : <PanelRightExpand />;\n\n  const handleClick: React.MouseEventHandler<HTMLButtonElement> = (event) => {\n    const next = isActive ? null : panelID;\n    eventBus.setActivePanel(next);\n    onClick?.(event);\n  };\n\n  return (\n    <ToggleButton\n      {...rest}\n      checked={isActive}\n      onClick={handleClick}\n      icon={resolvedIcon}\n      aria-pressed={isActive}\n    />\n  );\n};\n\nexport default PanelToggle;\n","//DEV NOTES:\r\n//It's recommended to create bundleIcons for icons that nest within Fluent components and then import them into your project.\r\n// See full catalog of icons at https://react.fluentui.dev/?path=/docs/icons-catalog--docs.\r\n\r\nimport {\r\n    ArrowExitFilled,\r\n    ArrowExitRegular,\r\n    BeakerFilled,\r\n    BeakerRegular,\r\n    BookmarkFilled,\r\n    BookmarkRegular,\r\n    CodeFilled,\r\n    CodeRegular,\r\n    CubeFilled,\r\n    CubeRegular,\r\n    DesignIdeasFilled,\r\n    DesignIdeasRegular,\r\n    DrawerArrowDownloadFilled,\r\n    DrawerArrowDownloadRegular,\r\n    FlowFilled,\r\n    FlowRegular,\r\n    FolderOpenFilled,\r\n    FolderOpenRegular,\r\n    LeafOneFilled,\r\n    LeafOneRegular,\r\n    LinkFilled,\r\n    LinkRegular,\r\n    OpenFilled,\r\n    OpenRegular,\r\n    OrganizationHorizontalFilled,\r\n    OrganizationHorizontalRegular,\r\n    PanelLeftContractFilled,\r\n    PanelLeftContractRegular,\r\n    PanelLeftExpandFilled,\r\n    PanelLeftExpandRegular,\r\n    PanelRightContractFilled,\r\n    PanelRightContractRegular,\r\n    PanelRightExpandFilled,\r\n    PanelRightExpandRegular,\r\n    PersonFilled,\r\n    PersonRegular,\r\n    PersonFeedbackFilled,\r\n    PersonFeedbackRegular,\r\n    SearchFilled,\r\n    SearchRegular,\r\n    SendFilled,\r\n    SendRegular,\r\n    ShareFilled,\r\n    ShareRegular,\r\n    TreeDeciduousFilled,\r\n    TreeDeciduousRegular,\r\n    TreeEvergreenFilled,\r\n    TreeEvergreenRegular,\r\n    WeatherMoonFilled,\r\n    WeatherMoonRegular,\r\n    WeatherSunnyFilled,\r\n    WeatherSunnyRegular,\r\n    DismissFilled,\r\n    DismissRegular,\r\n    DocumentSparkleFilled,\r\n    DocumentSparkleRegular,\r\n    SparkleFilled,\r\n    SparkleRegular,\r\n    StarFilled,\r\n    StarRegular,\r\n    MoreHorizontalFilled,\r\n    MoreHorizontalRegular,\r\n    bundleIcon,\r\n    CopyFilled,\r\n    CopyRegular,\r\n    HistoryFilled,\r\n    HistoryRegular,\r\n    TaskListSquareLtrFilled,\r\n    TaskListSquareLtrRegular,\r\n\r\n  } from \"@fluentui/react-icons\";\r\n  \r\n    export const TaskListSquareLtr = bundleIcon(TaskListSquareLtrFilled, TaskListSquareLtrRegular);\r\n  export const History = bundleIcon(HistoryFilled, HistoryRegular);\r\n  export const Copy = bundleIcon(CopyFilled, CopyRegular);\r\n  export const Send = bundleIcon(SendFilled, SendRegular);\r\n  export const MoreHorizontal = bundleIcon(MoreHorizontalFilled, MoreHorizontalRegular);\r\n  export const ArrowExit = bundleIcon(ArrowExitFilled, ArrowExitRegular);\r\n  export const Bookmark = bundleIcon(BookmarkFilled, BookmarkRegular);\r\n  export const Sparkle = bundleIcon(SparkleFilled, SparkleRegular);\r\n  export const Star = bundleIcon(StarFilled, StarRegular);\r\n  export const DocumentSparkle = bundleIcon(DocumentSparkleFilled, DocumentSparkleRegular);\r\n  export const Dismiss = bundleIcon(DismissFilled, DismissRegular);\r\n  export const DrawerArrowDownload = bundleIcon(DrawerArrowDownloadFilled, DrawerArrowDownloadRegular);\r\n  export const Beaker = bundleIcon(BeakerFilled, BeakerRegular);\r\n  export const Code = bundleIcon(CodeFilled, CodeRegular);\r\n  export const Cube = bundleIcon(CubeFilled, CubeRegular);\r\n  export const DesignIdeas = bundleIcon(DesignIdeasFilled, DesignIdeasRegular);\r\n  export const Flow = bundleIcon(FlowFilled, FlowRegular);\r\n  export const FolderOpen = bundleIcon(FolderOpenFilled, FolderOpenRegular);\r\n  export const LeafOne = bundleIcon(LeafOneFilled, LeafOneRegular);\r\n  export const Link = bundleIcon(LinkFilled, LinkRegular);\r\n  export const Open = bundleIcon(OpenFilled, OpenRegular);\r\n  export const OrganizationHorizontal = bundleIcon(\r\n    OrganizationHorizontalFilled,\r\n    OrganizationHorizontalRegular\r\n  );\r\n  export const PanelLeftContract = bundleIcon(\r\n    PanelLeftContractFilled,\r\n    PanelLeftContractRegular\r\n  );\r\n  export const PanelLeftExpand = bundleIcon(\r\n    PanelLeftExpandFilled,\r\n    PanelLeftExpandRegular\r\n  );\r\n  export const PanelRightContract = bundleIcon(\r\n    PanelRightContractFilled,\r\n    PanelRightContractRegular\r\n  );\r\n  export const PanelRightExpand = bundleIcon(\r\n    PanelRightExpandFilled,\r\n    PanelRightExpandRegular\r\n  );\r\n  export const Person = bundleIcon(PersonFilled, PersonRegular);\r\n  export const PersonFeedback = bundleIcon(\r\n    PersonFeedbackFilled,\r\n    PersonFeedbackRegular\r\n  );\r\n  export const Search = bundleIcon(SearchFilled, SearchRegular);\r\n  export const Share = bundleIcon(ShareFilled, ShareRegular);\r\n  export const TreeDeciduous = bundleIcon(\r\n    TreeDeciduousFilled,\r\n    TreeDeciduousRegular\r\n  );\r\n  export const TreeEvergreen = bundleIcon(\r\n    TreeEvergreenFilled,\r\n    TreeEvergreenRegular\r\n  );\r\n  export const WeatherMoon = bundleIcon(WeatherMoonFilled, WeatherMoonRegular);\r\n  export const WeatherSunny = bundleIcon(WeatherSunnyFilled, WeatherSunnyRegular);\r\n  \r\n  export default {bundleIcon}\r\n  ","type EventCallback = (...args: any[]) => void;\r\n\r\nclass EventBus {\r\n  private events: { [key: string]: EventCallback[] } = {};\r\n  private panelWidth: number = 400;\n  private activePanel: string | null = null;\n\r\n  on(event: string, callback: EventCallback) {\r\n    if (!this.events[event]) {\r\n      this.events[event] = [];\r\n    }\r\n    this.events[event].push(callback);\r\n  }\r\n\r\n  off(event: string, callback: EventCallback) {\r\n    if (!this.events[event]) return;\r\n    this.events[event] = this.events[event].filter(cb => cb !== callback);\r\n  }\r\n\r\n  emit(event: string, ...args: any[]) {\r\n    if (!this.events[event]) return;\r\n    this.events[event].forEach(callback => callback(...args));\r\n  }\r\n\r\n  // Panel control\r\n  setActivePanel(panelID: string | null) {\n    this.activePanel = panelID;\n    this.emit(\"setActivePanel\", panelID);\n  }\n\n  getActivePanel(): string | null {\n    return this.activePanel;\n  }\n\r\n  // Shared panel width\r\n  setPanelWidth(width: number) {\r\n    this.panelWidth = width;\r\n    this.emit(\"panelWidthChanged\", width);\r\n  }\r\n\r\n  getPanelWidth(): number {\r\n    return this.panelWidth;\r\n  }\r\n}\r\n\r\nconst eventBus = new EventBus();\r\nexport default eventBus;\r\n","// coral.config/components/Layout/CoralShellColumn.tsx\r\n// Structural wrapper for top-level app layout (vertical orientation)\r\n\r\nimport React from \"react\";\r\n\r\nconst CoralShellColumn: React.FC<{ children: React.ReactNode }> = ({ children }) => {\r\n  return (\r\n    <div\r\n      style={{\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        height: \"100vh\",\r\n        overflow: \"hidden\",\r\n        backgroundColor: \"var(--colorNeutralBackground3)\",\r\n      }}\r\n    >\r\n      {children}\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default CoralShellColumn;\r\n\r\n\r\n\r\n","// coral.config/components/Layout/CoralShellRow.tsx\r\n// Structural wrapper for main workspace layout (horizontal split)\r\n\r\nimport React from \"react\";\r\n\r\nconst CoralShellRow: React.FC<{ children: React.ReactNode }> = ({ children }) => {\r\n  return (\r\n    <div\r\n      style={{\r\n        display: \"flex\",\r\n        flex: 1,\r\n        overflow: \"hidden\",\r\n      }}\r\n    >\r\n      {children}\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default CoralShellRow;","import React, {\r\n  useState,\r\n  useEffect,\r\n  ReactNode,\r\n  ReactElement,\r\n  isValidElement,\r\n} from \"react\";\r\nimport PanelToolbar from \"./PanelToolbar.js\";\nimport PanelFooter from \"./PanelFooter\"; // 👈 new\r\nimport {\r\n  Avatar,\r\n  Body1,\r\n  Body1Strong,\r\n  Caption1,\r\n} from \"@fluentui/react-components\";\r\n\r\ninterface PanelLeftProps {\r\n  panelWidth?: number;\r\n  panelResize?: boolean;\r\n  children?: ReactNode;\r\n}\r\n\r\nconst PanelLeft: React.FC<PanelLeftProps> = ({\r\n  panelWidth = 500,\r\n  panelResize = true,\r\n  children,\r\n}) => {\r\n  const [width, setWidth] = useState(panelWidth);\r\n  const [isHandleHovered, setIsHandleHovered] = useState(false);\r\n\r\n  useEffect(() => {\r\n    setWidth(panelWidth);\r\n  }, [panelWidth]);\r\n\r\n  const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {\r\n    if (!panelResize) return;\r\n\r\n    const startX = e.clientX;\r\n    const startWidth = width;\r\n\r\n    const onMouseMove = (moveEvent: MouseEvent) => {\r\n      const newWidth = Math.min(\r\n        500,\r\n        Math.max(256, startWidth + (moveEvent.clientX - startX))\r\n      );\r\n      setWidth(newWidth);\r\n    };\r\n\r\n    const onMouseUp = () => {\r\n      document.removeEventListener(\"mousemove\", onMouseMove);\r\n      document.removeEventListener(\"mouseup\", onMouseUp);\r\n      document.body.style.userSelect = \"\";\r\n    };\r\n\r\n    document.addEventListener(\"mousemove\", onMouseMove);\r\n    document.addEventListener(\"mouseup\", onMouseUp);\r\n    document.body.style.userSelect = \"none\";\r\n  };\r\n\r\n  const childrenArray = React.Children.toArray(children) as ReactElement[];\r\n  const toolbar = childrenArray.find(\r\n    (child) => isValidElement(child) && child.type === PanelToolbar\r\n  );\r\n  const footer = childrenArray.find(\r\n    (child) => isValidElement(child) && child.type === PanelFooter\r\n  );\r\n  const content = childrenArray.filter(\r\n    (child) =>\r\n      !(\r\n        isValidElement(child) &&\r\n        (child.type === PanelToolbar || child.type === PanelFooter)\r\n      )\r\n  );\r\n\r\n  return (\r\n    <div\r\n      className=\"panelLeft\"\r\n      style={{\r\n        width: `${width}px`,\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        backgroundColor: \"var(--colorNeutralBackground4)\",\r\n        height: \"100%\",\r\n        boxSizing: \"border-box\",\r\n        position: \"relative\",\r\n        borderRight: panelResize\r\n          ? isHandleHovered\r\n            ? \"2px solid var(--colorNeutralStroke2)\"\r\n            : \"1px solid var(--colorNeutralStroke2)\"\r\n          : \"none\",\r\n      }}\r\n    >\r\n      {toolbar && <div style={{ flexShrink: 0 }}>{toolbar}</div>}\r\n\r\n      <div\r\n        className=\"panelContent\"\r\n        style={{\r\n          flex: 1,\r\n          overflowY: \"auto\",\r\n          overflowX: \"hidden\",\r\n          boxSizing: \"border-box\",\r\n        }}\r\n      >\r\n        {content}\r\n      </div>\r\n\r\n      {footer && <div>{footer}</div>}\r\n\r\n      {panelResize && (\r\n        <div\r\n          className=\"resizeHandle\"\r\n          onMouseDown={handleMouseDown}\r\n          onMouseEnter={() => setIsHandleHovered(true)}\r\n          onMouseLeave={() => setIsHandleHovered(false)}\r\n          style={{\r\n            position: \"absolute\",\r\n            top: 0,\r\n            right: 0,\r\n            width: \"2px\",\r\n            height: \"100%\",\r\n            cursor: \"ew-resize\",\r\n            zIndex: 1,\r\n            backgroundColor: isHandleHovered\r\n              ? \"var(--colorNeutralStroke2)\"\r\n              : \"transparent\",\r\n          }}\r\n        />\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default PanelLeft;\r\n","import React, { ReactNode } from \"react\";\nimport { Body1Strong } from \"@fluentui/react-components\";\n\nexport interface PanelToolbarProps {\n  icon?: ReactNode;\n  title?: string | null;\n\n  /** If provided, the title area becomes a link */\n  linkTo?: string;\n\n  /** Optional: for real nav, you can prevent full page reload */\n  onLinkClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;\n\n  children?: ReactNode;\n}\n\nconst PanelToolbar: React.FC<PanelToolbarProps> = ({\n  icon,\n  title,\n  linkTo,\n  onLinkClick,\n  children,\n}) => {\n  const TitleContent = (\n    <div\n      className=\"panelTitle\"\n      style={{\n        display: \"flex\",\n        alignItems: \"center\",\n        gap: \"6px\",\n        flexShrink: 1,\n        overflow: \"hidden\",\n        minWidth: 0,\n      }}\n    >\n      {icon && (\n        <div\n          style={{\n            flexShrink: 0,\n            display: \"flex\",\n            alignItems: \"center\",\n          }}\n        >\n          {icon}\n        </div>\n      )}\n\n      {title && (\n        <Body1Strong\n          style={{\n            whiteSpace: \"nowrap\",\n            overflow: \"hidden\",\n            textOverflow: \"ellipsis\",\n          }}\n        >\n          {title}\n        </Body1Strong>\n      )}\n    </div>\n  );\n\n  const Title = linkTo ? (\n    <a\n      href={linkTo}\n      onClick={onLinkClick}\n      style={{\n        textDecoration: \"none\",\n        color: \"inherit\",\n        display: \"flex\",\n        alignItems: \"center\",\n        minWidth: 0,\n        flexShrink: 1,\n      }}\n    >\n      {TitleContent}\n    </a>\n  ) : (\n    TitleContent\n  );\n\n  return (\n    <div\n      className=\"panelToolbar\"\n      style={{\n        display: \"flex\",\n        alignItems: \"center\",\n        gap: \"8px\",\n        padding: \"16px\",\n        boxSizing: \"border-box\",\n        height: \"56px\",\n      }}\n    >\n      {(icon || title) && Title}\n\n      <div\n        className=\"panelTools\"\n        style={{\n          display: \"flex\",\n          alignItems: \"center\",\n          flexGrow: 1,\n          justifyContent: \"flex-end\",\n          minWidth: 0,\n        }}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n\nexport default PanelToolbar;\n","import React from \"react\";\r\n\r\nconst PanelFooter: React.FC<{ children: React.ReactNode }> = ({ children }) => {\r\n  return (\r\n    <div\r\n      style={{\r\n        padding: \"24px 16px\",\r\n        width:'100%'\r\n      }}\r\n    >\r\n      {children}\r\n    </div>\r\n  );\r\n};\r\n\r\nPanelFooter.displayName = \"PanelFooter\";\r\n\r\nexport default PanelFooter;\r\n","import React, { useState, useEffect, ReactNode, ReactElement } from \"react\";\r\nimport eventBus from \"../eventbus.js\";\r\nimport PanelToolbar from \"./PanelToolbar.js\"; // Import to identify toolbar\n\r\ninterface PanelRightProps {\n  panelWidth?: number; // Optional width of the panel\n  panelResize?: boolean; // Whether resizing is enabled\n  panelID: string; // Panel identifier to match PanelToggle\n  defaultClosed?: boolean;\n  children?: ReactNode;\n}\n\r\nconst PanelRight: React.FC<PanelRightProps> = ({\r\n  panelWidth = 325, // Default width if not provided\n  panelResize = true,\n  panelID,\n  defaultClosed = false,\n  children,\n}) => {\n  const [isActive, setIsActive] = useState(false);\n  const [width, setWidth] = useState<number>(panelWidth); // Initial width from props or default\n  const [isHandleHovered, setIsHandleHovered] = useState(false);\n\n  useEffect(() => {\n    // Initialize shared width if not already set in the EventBus\r\n    if (eventBus.getPanelWidth() === 400) {\r\n      eventBus.setPanelWidth(panelWidth); // Use the provided panelWidth prop\r\n    }\r\n    setWidth(eventBus.getPanelWidth()); // Set the current width from EventBus\r\n\r\n    const handleActivePanel = (panel: string | null) => {\n      setIsActive(panel === panelID); // Check if this panelID matches the active panel\n    };\n\r\n    const handleWidthChange = (newWidth: number) => {\r\n      setWidth(newWidth); // Update width when EventBus notifies\r\n    };\r\n\r\n    eventBus.on(\"setActivePanel\", handleActivePanel);\n    eventBus.on(\"panelWidthChanged\", handleWidthChange);\n\n    const currentActive = eventBus.getActivePanel();\n    const shouldActivate = !defaultClosed && currentActive === null;\n    const nextActive = shouldActivate ? panelID : currentActive;\n\n    if (shouldActivate) {\n      eventBus.setActivePanel(panelID);\n    } else {\n      setIsActive(currentActive === panelID);\n    }\n\n    eventBus.emit(\"panelInitState\", {\n      panelID,\n      panelType: panelID,\n      isActive: nextActive === panelID,\n    });\n\r\n    return () => {\r\n      eventBus.off(\"setActivePanel\", handleActivePanel);\n      eventBus.off(\"panelWidthChanged\", handleWidthChange);\n    };\n  }, [panelID, panelWidth, defaultClosed]);\n\n  const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (!panelResize) return;\r\n\r\n    const startX = e.clientX;\r\n    const startWidth = width;\r\n\r\n    const onMouseMove = (moveEvent: MouseEvent) => {\r\n      const newWidth = Math.min(\r\n        500, // Max width\r\n        Math.max(256, startWidth - (moveEvent.clientX - startX)) // Min width\r\n      );\r\n      setWidth(newWidth);\r\n      eventBus.setPanelWidth(newWidth); // Persist the new width in EventBus\r\n    };\r\n\r\n    const onMouseUp = () => {\r\n      document.removeEventListener(\"mousemove\", onMouseMove);\r\n      document.removeEventListener(\"mouseup\", onMouseUp);\r\n      document.body.style.userSelect = \"\";\r\n    };\r\n\r\n    document.addEventListener(\"mousemove\", onMouseMove);\r\n    document.addEventListener(\"mouseup\", onMouseUp);\r\n\r\n    document.body.style.userSelect = \"none\";\r\n  };\r\n\r\n  if (!isActive) return null; // Do not render if not active\r\n\r\n  const childrenArray = React.Children.toArray(children) as ReactElement[];\r\n  const toolbar = childrenArray.find(\n    (child) => React.isValidElement(child) && child.type === PanelToolbar\n  );\n  const content = childrenArray.filter(\n    (child) => !(React.isValidElement(child) && child.type === PanelToolbar)\n  );\n\r\n  return (\r\n    <div\r\n      className=\"panelRight\"\r\n      style={{\r\n        width: `${width}px`,\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        backgroundColor: \"var(--colorNeutralBackground3)\",\r\n        height: \"100%\",\r\n        boxSizing: \"border-box\",\r\n        position: \"relative\",\r\n        borderLeft: panelResize\r\n          ? isHandleHovered\r\n            ? \"2px solid var(--colorNeutralStroke2)\"\r\n            : \"1px solid var(--colorNeutralStroke2)\"\r\n          : \"none\",\r\n      }}\r\n    >\r\n      {toolbar && <div style={{ flexShrink: 0 }}>{toolbar}</div>}\r\n\r\n      <div\r\n        className=\"panelContent\"\r\n        style={{\r\n          flex: 1,\r\n          overflowY: \"auto\",\r\n        }}\r\n      >\r\n        {content}\r\n      </div>\r\n\r\n      {panelResize && (\r\n        <div\r\n          className=\"resizeHandle\"\r\n          onMouseDown={handleMouseDown}\r\n          onMouseEnter={() => setIsHandleHovered(true)}\r\n          onMouseLeave={() => setIsHandleHovered(false)}\r\n          style={{\r\n            position: \"absolute\",\r\n            top: 0,\r\n            left: 0,\r\n            width: \"2px\",\r\n            height: \"100%\",\r\n            cursor: \"ew-resize\",\r\n            zIndex: 1,\r\n            backgroundColor: isHandleHovered\r\n              ? \"var(--colorNeutralStroke2)\"\r\n              : \"transparent\",\r\n          }}\r\n        />\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default PanelRight;\n","import React, { useState, ReactNode, ReactElement } from \"react\";\r\nimport PanelToolbar from \"../Panels/PanelToolbar.js\"; // Import to identify toolbar\n\r\ninterface ContentProps {\r\n    children?: ReactNode;\r\n}\r\n\r\nconst Content: React.FC<ContentProps> = ({ children }) => {\r\n    const childrenArray = React.Children.toArray(children) as ReactElement[];\r\n    const toolbar = childrenArray.find(\r\n        (child) => React.isValidElement(child) && child.type === PanelToolbar\r\n    );\r\n    const content = childrenArray.filter(\r\n        (child) => !(React.isValidElement(child) && child.type === PanelToolbar)\r\n    );\r\n\r\n    return (\r\n        <div\r\n            className=\"content\"\r\n            style={{\r\n                display: \"flex\",\r\n                flex: \"1\",\r\n                flexDirection: \"column\",\r\n                height: \"100%\",\r\n                boxSizing: \"border-box\",\r\n                position: \"relative\",\r\n                minWidth: '320px',\r\n\r\n            }}\r\n        >\r\n            {toolbar && <div style={{ flexShrink: 0 }}>{toolbar}</div>}\r\n\r\n            <div\r\n                className=\"panelContent\"\r\n                style={{\r\n                    display: \"flex\",\r\n                    flexDirection: \"column\",\r\n                    flex: 1,\r\n                    width:'100%',\r\n\r\n    \r\n                    overflow: \"hidden\", // prevent double scrollbars\r\n                    minHeight: 0, // allow child to shrink properly\r\n                }}\r\n            >\r\n                {content}\r\n            </div>\r\n        </div>\r\n    );\r\n};\r\n\r\nexport default Content;\r\n","// src/components/PanelNav/PanelNav.tsx\r\nimport * as React from \"react\";\r\nimport {\r\n  makeStyles,\r\n  shorthands,\r\n  tokens,\r\n  Button,\r\n  Body1Strong,\r\n} from \"@fluentui/react-components\";\r\nimport { ChevronDown20Regular } from \"@fluentui/react-icons\";\r\n\r\nexport type PanelNavProps = {\r\n  /** Controlled open state */\r\n  value?: boolean;\r\n  /** Uncontrolled initial open state */\r\n  defaultValue?: boolean;\r\n\r\n  /** Back-compat alias (prefer defaultValue) */\r\n  defaultOpen?: boolean;\r\n\r\n  /** Called when open state changes */\r\n  onValueChange?: (ev: React.MouseEvent | React.KeyboardEvent, data: { value: boolean }) => void;\r\n\r\n  /** Optional section label shown in the header */\r\n  title?: string;\r\n\r\n  /** Optional: disable expand/collapse */\r\n  disabled?: boolean;\r\n\r\n  children?: React.ReactNode;\r\n  className?: string;\r\n};\r\n\r\nconst useStyles = makeStyles({\r\n  root: {\r\n    display: \"flex\",\r\n    flexDirection: \"column\",\r\n    minWidth: 0,\r\n    margin: \"8px\",\r\n  },\r\n\r\n  headerButton: {\r\n    display: \"grid\",\r\n    gridTemplateColumns: \"1fr auto\",\r\n    alignItems: \"center\",\r\n    columnGap: tokens.spacingHorizontalS,\r\n    ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\r\n    ...shorthands.borderRadius(tokens.borderRadiusLarge),\r\n    ...shorthands.border(\"1px\", \"solid\", \"transparent\"),\r\n    color: tokens.colorNeutralForeground4,\r\n    boxSizing: \"border-box\",\r\n    height: \"48px\",\r\n    width: \"100%\",\r\n    justifyContent: \"unset\",\r\n\r\n    transitionProperty: \"color\",\r\n    transitionDuration: \".3s\",\r\n\r\n    \":hover\": {\r\n      color: tokens.colorNeutralForeground1,\r\n    },\r\n  },\r\n\r\n  title: {\r\n    minWidth: 0,\r\n    whiteSpace: \"nowrap\",\r\n    overflow: \"hidden\",\r\n    textOverflow: \"ellipsis\",\r\n    textAlign: \"left\",\r\n  },\r\n\r\n  chevron: {\r\n    transitionProperty: \"transform\",\r\n    transitionDuration: tokens.durationNormal,\r\n    transitionTimingFunction: tokens.curveEasyEase,\r\n    transform: \"rotate(-90deg)\",\r\n  },\r\n\r\n  chevronOpen: {\r\n    transform: \"rotate(0deg)\",\r\n  },\r\n\r\n  items: {\r\n    display: \"flex\",\r\n    flexDirection: \"column\",\r\n  },\r\n\r\n  itemsCollapsed: {\r\n    display: \"none\",\r\n  },\r\n});\r\n\r\nfunction useControllableBooleanState<E extends React.SyntheticEvent>(params: {\r\n  value?: boolean;\r\n  defaultValue: boolean;\r\n  onChange?: (ev: E, next: boolean) => void;\r\n}) {\r\n  const { value, defaultValue, onChange } = params;\r\n  const [uncontrolled, setUncontrolled] = React.useState(defaultValue);\r\n  const isControlled = value !== undefined;\r\n  const current = isControlled ? value : uncontrolled;\r\n\r\n  const set = React.useCallback(\r\n    (ev: E, next: boolean) => {\r\n      if (!isControlled) setUncontrolled(next);\r\n      onChange?.(ev, next);\r\n    },\r\n    [isControlled, onChange],\r\n  );\r\n\r\n  return [current, set] as const;\r\n}\r\n\r\nexport function PanelNav({\r\n  value,\r\n  defaultValue,\r\n  defaultOpen,\r\n  onValueChange,\r\n  title,\r\n  disabled = false,\r\n  children,\r\n  className,\r\n}: PanelNavProps) {\r\n  const styles = useStyles();\r\n\r\n  const initial = defaultValue ?? defaultOpen ?? false;\r\n\r\n  const [open, setOpen] = useControllableBooleanState<\r\n    React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>\r\n  >({\r\n    value,\r\n    defaultValue: initial,\r\n    onChange: (ev, next) => onValueChange?.(ev, { value: next }),\r\n  });\r\n\r\n  const toggle = React.useCallback(\r\n    (ev: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => {\r\n      if (disabled) return;\r\n      setOpen(ev, !open);\r\n    },\r\n    [disabled, open, setOpen],\r\n  );\r\n\r\n  const resolvedTitle = title ?? \"Section\";\r\n\r\n  return (\r\n    <div className={[styles.root, className].filter(Boolean).join(\" \")}>\r\n      <Button\r\n        appearance=\"transparent\"\r\n        disabled={disabled}\r\n        className={styles.headerButton}\r\n        aria-expanded={open}\r\n        onClick={(ev) => toggle(ev)}\r\n        icon={\r\n          <ChevronDown20Regular\r\n            className={[styles.chevron, open ? styles.chevronOpen : \"\"].join(\" \")}\r\n          />\r\n        }\r\n        // icon at end instead of start\r\n        iconPosition=\"after\"\r\n      >\r\n        <Body1Strong className={styles.title}>{resolvedTitle}</Body1Strong>\r\n      </Button>\r\n\r\n      <div className={open ? styles.items : styles.itemsCollapsed}>{children}</div>\r\n    </div>\r\n  );\r\n}\r\n","// src/components/PanelNav/PanelNavItem.tsx\r\nimport * as React from \"react\";\r\nimport {\r\n  Button,\r\n  makeStyles,\r\n  shorthands,\r\n  tokens,\r\n  Subtitle2,\r\n} from \"@fluentui/react-components\";\r\n\r\nexport type PanelNavItemProps = {\r\n  title: string;\r\n  icon?: React.ReactNode;\r\n\r\n  /** Identifier (useful if parent manages selection) */\r\n  value?: string;\r\n\r\n  /** Marks the item as selected */\r\n  selected?: boolean;\r\n\r\n  disabled?: boolean;\r\n\r\n  onSelect?: (ev: React.MouseEvent<HTMLButtonElement>, data: { value?: string }) => void;\r\n\r\n  /** Back-compat */\r\n  active?: boolean;\r\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\r\n\r\n  className?: string;\r\n};\r\n\r\nconst useStyles = makeStyles({\r\n  root: {\r\n    width: \"100%\",\r\n    justifyContent: \"flex-start\",\r\n    textAlign: \"left\",\r\n    ...shorthands.padding(tokens.spacingVerticalM, tokens.spacingHorizontalM),\r\n    ...shorthands.borderRadius(tokens.borderRadiusLarge),\r\n    ...shorthands.border(\"1px\", \"solid\", \"transparent\"),\r\n    boxSizing: \"border-box\",\r\n    backgroundColor: \"transparent\",\r\n    color: tokens.colorNeutralForeground1,\r\n\r\n    \":hover\": {\r\n      backgroundColor: tokens.colorNeutralBackground2,\r\n    },\r\n\r\n    \":active\": {\r\n      backgroundColor: tokens.colorNeutralBackground3,\r\n    },\r\n\r\n    \":focus-visible\": {\r\n      outlineStyle: \"solid\",\r\n      outlineWidth: tokens.strokeWidthThick,\r\n      outlineColor: tokens.colorStrokeFocus2,\r\n      outlineOffset: \"2px\",\r\n    },\r\n  },\r\n\r\n  selected: {\r\n    backgroundColor: tokens.colorNeutralBackground2,\r\n    ...shorthands.border(\"1px\", \"solid\", tokens.colorBrandStroke1),\r\n\r\n    \":hover\": {\r\n      backgroundColor: tokens.colorNeutralBackground2,\r\n    },\r\n\r\n    \":active\": {\r\n      backgroundColor: tokens.colorNeutralBackground3,\r\n    },\r\n  },\r\n\r\n  content: {\r\n    display: \"grid\",\r\n    gridTemplateColumns: \"auto 1fr\",\r\n    alignItems: \"center\",\r\n    columnGap: tokens.spacingHorizontalS,\r\n    minWidth: 0,\r\n    width: \"100%\",\r\n  },\r\n\r\n  icon: {\r\n    display: \"flex\",\r\n    alignItems: \"center\",\r\n    color: \"inherit\",\r\n  },\r\n\r\n  title: {\r\n    minWidth: 0,\r\n    whiteSpace: \"nowrap\",\r\n    overflow: \"hidden\",\r\n    textOverflow: \"ellipsis\",\r\n  },\r\n});\r\n\r\nexport function PanelNavItem({\r\n  title,\r\n  icon,\r\n  value,\r\n  selected,\r\n  active,\r\n  disabled = false,\r\n  onSelect,\r\n  onClick,\r\n  className,\r\n}: PanelNavItemProps) {\r\n  const styles = useStyles();\r\n\r\n  const isSelected = selected ?? active ?? false;\r\n\r\n  return (\r\n    <Button\r\n      appearance=\"subtle\"\r\n      disabled={disabled}\r\n      className={[styles.root, isSelected ? styles.selected : \"\", className ?? \"\"]\r\n        .filter(Boolean)\r\n        .join(\" \")}\r\n      aria-current={isSelected ? \"page\" : undefined}\r\n      onClick={(ev) => {\r\n        onClick?.(ev);\r\n        onSelect?.(ev, { value });\r\n      }}\r\n    >\r\n      <span className={styles.content}>\r\n        {icon ? <span className={styles.icon}>{icon}</span> : null}\r\n        <Subtitle2 className={styles.title}>{title}</Subtitle2>\r\n      </span>\r\n    </Button>\r\n  );\r\n}\r\n","import React from \"react\";\r\nimport {\r\n  Avatar,\r\n  AvatarProps,\r\n  Body1Strong,\r\n  Caption1,\r\n} from \"@fluentui/react-components\";\r\n\r\ninterface PanelUserCardProps extends AvatarProps {\r\n  name: string;       // required for both Avatar and label\r\n  alias?: string;     // optional sub-label\r\n}\r\n\r\nconst PanelUserCard: React.FC<PanelUserCardProps> = ({ name, alias, ...avatarProps }) => {\r\n  return (\r\n    <div\r\n      style={{\r\n        display: \"flex\",\r\n        gap: \"12px\",\r\n        alignItems: \"center\",\r\n            margin: \"16px\",\r\n      }}\r\n    >\r\n      <Avatar\r\n        name={name}\r\n        {...avatarProps}\r\n      />\r\n      <div style={{ display: \"flex\", flexDirection: \"column\" }}>\r\n        <Body1Strong>{name}</Body1Strong>\r\n        {alias && (\r\n          <Caption1 style={{ color: \"var(--colorNeutralForeground3)\" }}>\r\n            {alias}\r\n          </Caption1>\r\n        )}\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default PanelUserCard;\r\n"],"mappings":"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","names":["Button","ToggleButton","jsx","jsx","jsxs","jsx","jsx","jsx","jsx","React","useState","useEffect","jsx","jsxs","jsx","jsx","jsxs","useState","useEffect","React","React","useState","useEffect","jsx","jsxs","useState","useEffect","React","React","jsx","jsxs","React","React","Body1Strong","jsx","jsxs","Button","makeStyles","shorthands","tokens","Subtitle2","jsx","jsxs","useStyles","Avatar","Body1Strong","jsx","jsxs"]}

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@coral-ui/react",
+  "version": "0.1.0",
+  "private": false,
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist", "README.md", "LICENSE"
+  ],
+  "sideEffects": false,
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
+  "dependencies": {
+    "@fluentui/react-icons": "^2.0.318"
+  }
+}