@malloy-publisher/sdk 0.0.31 → 0.0.33

package/package.json

@@ -1,7 +1,7 @@
 {
    "name": "@malloy-publisher/sdk",
    "description": "Malloy Publisher SDK",
-   "version": "0.0.31",
+   "version": "0.0.33",
    "type": "module",
    "main": "dist/index.cjs.js",
    "module": "dist/index.es.js",
@@ -28,7 +28,8 @@
    },
    "peerDependencies": {
       "react": "^19.1.0",
-      "react-dom": "^19.1.0"
+      "react-dom": "^19.1.0",
+      "react-router-dom": "^7.6.2"
    },
    "dependencies": {
       "@emotion/react": "^11.14.0",
@@ -45,8 +46,7 @@
       "@tanstack/react-query": "^5.59.16",
       "@uiw/react-md-editor": "^4.0.6",
       "axios": "^1.7.7",
-      "markdown-to-jsx": "^7.7.6",
-      "react-router-dom": "^7.6.2"
+      "markdown-to-jsx": "^7.7.6"
    },
    "devDependencies": {
       "@openapitools/openapi-generator-cli": "^2.13.5",

package/src/components/Home/Home.tsx

@@ -9,7 +9,7 @@ const queryClient = new QueryClient();
 
 interface HomeProps {
    server?: string;
-   navigate?: (to: string) => void;
+   navigate?: (to: string, event?: React.MouseEvent) => void;
 }
 
 export default function Home({ server, navigate }: HomeProps) {
@@ -44,7 +44,9 @@ export default function Home({ server, navigate }: HomeProps) {
                   <Grid key={project.name}>
                      <Typography
                         variant="h1"
-                        onClick={() => navigate(`/${project.name}/`)}
+                        onClick={(event) =>
+                           navigate(`/${project.name}/`, event)
+                        }
                      >
                         {project.name}
                      </Typography>

package/src/components/MutableNotebook/MutableCell.tsx

@@ -311,7 +311,9 @@ export function MutableCell({
 }
 
 function useDebounce<T>(callback: (value: T) => void, delay: number = 2000) {
-   const timeoutRef = React.useRef<ReturnType<typeof setTimeout>>();
+   const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(
+      undefined,
+   );
 
    return React.useCallback(
       (value: T) => {

package/src/components/MutableNotebook/MutableNotebook.tsx

@@ -16,7 +16,7 @@ import {
 } from "@mui/material";
 import Stack from "@mui/material/Stack";
 import React from "react";
-import { useNavigate } from "react-router-dom";
+import { useRouterClickHandler } from "../click_helper";
 import { Configuration, ModelsApi } from "../../client";
 import { SourceAndPath } from "../Model/SourcesExplorer";
 import { NotebookManager } from "../NotebookManager";
@@ -46,7 +46,7 @@ export default function MutableNotebook({
    expandCodeCells,
    expandEmbeddings,
 }: MutableNotebookProps) {
-   const navigate = useNavigate();
+   const navigate = useRouterClickHandler();
    const { server, projectName, packageName, versionId, accessToken } =
       usePublisherPackage();
    if (!projectName || !packageName) {
@@ -107,12 +107,12 @@ export default function MutableNotebook({
       setDeleteDialogOpen(true);
    };
 
-   const handleDeleteConfirm = () => {
+   const handleDeleteConfirm = (event?: React.MouseEvent) => {
       if (notebookPath && notebookStorage && userContext) {
          notebookStorage.deleteNotebook(userContext, notebookPath);
       }
       setDeleteDialogOpen(false);
-      navigate(`/${projectName}/${packageName}`);
+      navigate(`/${projectName}/${packageName}`, event);
    };
 
    const handleDeleteCancel = () => {
@@ -286,7 +286,7 @@ export default function MutableNotebook({
                               Cancel
                            </Button>
                            <Button
-                              onClick={handleDeleteConfirm}
+                              onClick={(event) => handleDeleteConfirm(event)}
                               color="error"
                               autoFocus
                            >

package/src/components/Notebook/NotebookCell.tsx

@@ -5,20 +5,26 @@ import LinkOutlinedIcon from "@mui/icons-material/LinkOutlined";
 import {
    CardActions,
    Collapse,
-   Divider,
    IconButton,
    Stack,
    Tooltip,
    Typography,
-   Box,
 } from "@mui/material";
 import Markdown from "markdown-to-jsx";
-import React, { Suspense, lazy, useEffect } from "react";
+import React, { useEffect } from "react";
 import { NotebookCell as ClientNotebookCell } from "../../client";
 import { highlight } from "../highlighter";
 import { SourcesExplorer } from "../Model";
-import { StyledCard, StyledCardContent } from "../styles";
 import ResultContainer from "../RenderedResult/ResultContainer";
+import { StyledCard, StyledCardContent } from "../styles";
+
+// Add global style for code display
+const codeStyle = `
+  .code-display pre {
+    margin: 0;
+    padding: 0;
+  }
+`;
 
 interface NotebookCellProps {
    cell: ClientNotebookCell;
@@ -39,9 +45,8 @@ export function NotebookCell({
    expandEmbedding,
    hideEmbeddingIcon,
 }: NotebookCellProps) {
-   const [codeExpanded, setCodeExpanded] = React.useState<boolean>(
-      expandCodeCell || (cell.type === "code" && !cell.result),
-   );
+   const [codeExpanded, setCodeExpanded] =
+      React.useState<boolean>(expandCodeCell);
    const [embeddingExpanded, setEmbeddingExpanded] =
       React.useState<boolean>(expandEmbedding);
    const [highlightedMalloyCode, setHighlightedMalloyCode] =
@@ -73,7 +78,12 @@ export function NotebookCell({
       (cell.type === "code" && (
          <StyledCard variant="outlined" sx={{ height: "auto" }}>
             {(!hideCodeCellIcon || (!hideEmbeddingIcon && cell.result)) && (
-               <Stack sx={{ flexDirection: "row", justifyContent: "right" }}>
+               <Stack
+                  sx={{
+                     flexDirection: "row",
+                     justifyContent: "right",
+                  }}
+               >
                   <CardActions
                      sx={{
                         padding: "0px 10px 0px 10px",
@@ -142,7 +152,6 @@ export function NotebookCell({
                </Stack>
             )}
             <Collapse in={embeddingExpanded} timeout="auto" unmountOnExit>
-               <Divider />
                <Stack
                   sx={{
                      p: "10px",
@@ -176,29 +185,35 @@ export function NotebookCell({
                </Stack>
             </Collapse>
             <Collapse in={codeExpanded} timeout="auto" unmountOnExit>
-               <Divider />
+               <style>{codeStyle}</style>
                <Stack
                   sx={{
-                     p: "10px",
+                     mx: "15px",
+                     mb: "10px",
                      borderRadius: 0,
                      flexDirection: "row",
                      justifyContent: "space-between",
                   }}
                >
-                  <Typography
-                     component="div"
-                     className="content"
-                     sx={{ fontSize: "12px", "& .line": { textWrap: "wrap" } }}
+                  <div
+                     className="code-display"
+                     style={{
+                        fontSize: "12px",
+                        width: "800px",
+                        border: "1px solid rgb(220,220,220)",
+                     }}
                      dangerouslySetInnerHTML={{
                         __html: highlightedMalloyCode,
                      }}
                   />
                </Stack>
             </Collapse>
-            <Collapse in={sourcesExpanded} timeout="auto" unmountOnExit>
-               <Stack sx={{ p: "10px" }}>
-                  <Typography>Sources</Typography>
-               </Stack>
+            <Collapse
+               in={sourcesExpanded}
+               timeout="auto"
+               unmountOnExit
+               sx={{ p: "5px" }}
+            >
                <SourcesExplorer
                   sourceAndPaths={cell.newSources.map((source) => {
                      const sourceInfo = JSON.parse(source) as Malloy.SourceInfo;
@@ -210,13 +225,11 @@ export function NotebookCell({
                />
             </Collapse>
             {cell.result && !sourcesExpanded && (
-               <>
-                  <ResultContainer
-                     result={cell.result}
-                     minHeight={200}
-                     maxHeight={800}
-                  />
-               </>
+               <ResultContainer
+                  result={cell.result}
+                  minHeight={200}
+                  maxHeight={800}
+               />
             )}
          </StyledCard>
       ))

package/src/components/Package/Connections.tsx

@@ -19,7 +19,7 @@ interface ConnectionsProps {
    server?: string;
    projectName: string;
    accessToken: string;
-   navigate: (to: string) => void;
+   navigate: (to: string, event?: React.MouseEvent) => void;
 }
 
 // TODO(jjs) - Move this UI to the ConnectionExplorer component

package/src/components/Package/FileTreeView.tsx

@@ -27,7 +27,7 @@ import { Typography } from "@mui/material";
 interface FiieTreeViewProps {
    items: Model[] | Database[];
    defaultExpandedItems: string[];
-   navigate?: (to: string) => void;
+   navigate?: (to: string, event?: React.MouseEvent) => void;
 }
 
 export function FileTreeView({
@@ -64,7 +64,7 @@ type ExtendedTreeItemProps = {
    label: string;
    fileType: FileType;
    selectable: boolean;
-   link: () => void | undefined;
+   link: ((event?: React.MouseEvent) => void) | undefined;
 };
 
 interface CustomLabelProps {
@@ -135,7 +135,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(
             <TreeItem2Content
                {...getContentProps()}
                {...(item.link && {
-                  onClick: () => item.link(),
+                  onClick: (event) => item.link(event),
                })}
                sx={{
                   // If the item is not selectable, disable pointer events.
@@ -159,7 +159,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(
 
 function getTreeView(
    metadataEntries: Model[] | Database[],
-   navigate: (to: string) => void,
+   navigate: (to: string, event?: React.MouseEvent) => void,
 ): TreeViewBaseItem<ExtendedTreeItemProps>[] {
    const tree = new Map<string, unknown>();
    metadataEntries.map((entry: Model | Database) => {
@@ -182,7 +182,7 @@ function getTreeView(
 function getTreeViewRecursive(
    node: Map<string, unknown>,
    path: string,
-   navigate: (to: string) => void,
+   navigate: (to: string, event?: React.MouseEvent) => void,
 ): TreeViewBaseItem<ExtendedTreeItemProps>[] {
    const treeViewItems: TreeViewBaseItem<ExtendedTreeItemProps>[] = [];
    node.forEach((value, key) => {
@@ -199,7 +199,7 @@ function getTreeViewRecursive(
             fileType: fileType,
             link:
                fileType === "model" || fileType === "notebook"
-                  ? navigate.bind(null, path + key)
+                  ? (event) => navigate(path + key, event)
                   : undefined,
             selectable: fileType === "model" || fileType === "notebook",
          });

package/src/components/Package/Models.tsx

@@ -16,7 +16,7 @@ interface ModelsProps {
    projectName: string;
    packageName: string;
    versionId?: string;
-   navigate: (to: string) => void;
+   navigate: (to: string, event?: React.MouseEvent) => void;
    accessToken?: string;
 }
 

package/src/components/Package/Notebooks.tsx

@@ -14,7 +14,7 @@ interface ModelsProps {
    projectName: string;
    packageName: string;
    versionId?: string;
-   navigate: (to: string) => void;
+   navigate: (to: string, event?: React.MouseEvent) => void;
    accessToken?: string;
 }
 

package/src/components/Package/Package.tsx

@@ -15,7 +15,7 @@ interface PackageProps {
    projectName: string;
    packageName: string;
    versionId?: string;
-   navigate?: (to: string) => void;
+   navigate?: (to: string, event?: React.MouseEvent) => void;
    accessToken?: string;
 }
 
@@ -105,7 +105,7 @@ export default function Package({
             <Grid size={{ xs: 12, md: 12 }}>
                <Notebook
                   notebookPath={README_NOTEBOOK}
-                  expandCodeCells={true}
+                  expandCodeCells={false}
                   hideEmbeddingIcons={true}
                />
             </Grid>

package/src/components/Project/Packages.tsx

@@ -9,7 +9,7 @@ const queryClient = new QueryClient();
 interface ProjectProps {
    server?: string;
    projectName: string;
-   navigate?: (to: string) => void;
+   navigate: (to: string, event?: React.MouseEvent) => void;
    accessToken?: string;
 }
 
@@ -34,12 +34,6 @@ export default function Project({
       queryClient,
    );
 
-   if (!navigate) {
-      navigate = (to: string) => {
-         window.location.href = to;
-      };
-   }
-
    return (
       <>
          {!isSuccess && !isError && (
@@ -74,7 +68,9 @@ export default function Project({
                               <StyledCard
                                  variant="outlined"
                                  sx={{ padding: "10px", cursor: "pointer" }}
-                                 onClick={() => navigate(p.name + "/")}
+                                 onClick={(event) =>
+                                    navigate(p.name + "/", event)
+                                 }
                               >
                                  <StyledCardContent>
                                     <Typography

package/src/components/Project/Project.tsx

@@ -5,7 +5,7 @@ import Packages from "./Packages";
 interface ProjectProps {
    server?: string;
    projectName: string;
-   navigate?: (to: string) => void;
+   navigate: (to: string, event?: React.MouseEvent) => void;
    accessToken?: string;
 }
 

package/src/components/RenderedResult/ResultContainer.tsx

@@ -1,13 +1,13 @@
-import React, {
+import { ExpandLess, ExpandMore } from "@mui/icons-material";
+import { Box, IconButton } from "@mui/material";
+import {
    lazy,
    Suspense,
-   useState,
-   useRef,
    useCallback,
    useEffect,
+   useRef,
+   useState,
 } from "react";
-import { Box, IconButton } from "@mui/material";
-import { ExpandMore, ExpandLess } from "@mui/icons-material";
 
 const RenderedResult = lazy(() => import("../RenderedResult/RenderedResult"));
 
@@ -65,12 +65,6 @@ export default function ResultContainer({
       if (contentHeight < availableHeight) {
          setExplicitHeight(contentHeight + 20);
       }
-      console.log("Height comparison:", {
-         contentHeight,
-         minHeight,
-         availableHeight,
-         exceedsHeight,
-      });
       setShouldShowToggle(exceedsHeight);
    }, [contentHeight, minHeight]);
 
@@ -80,9 +74,9 @@ export default function ResultContainer({
 
    const height = explicitHeight
       ? {
-           minHeight: `${explicitHeight}px`,
-           height: `${explicitHeight}px`,
-        }
+         minHeight: `${explicitHeight}px`,
+         height: `${explicitHeight}px`,
+      }
       : {};
    return (
       <>
@@ -92,8 +86,8 @@ export default function ResultContainer({
                position: "relative",
                minHeight: `${minHeight}px`,
                maxHeight: `${isExpanded ? maxHeight : minHeight}px`,
-               border: "1px solid #e0e0e0",
-               borderRadius: 1,
+               border: "0px",
+               borderRadius: 0,
                overflow: "hidden",
                display: "flex",
                flexDirection: "column",
@@ -130,12 +124,10 @@ export default function ResultContainer({
                      left: 0,
                      right: 0,
                      height: "32px",
-                     backgroundColor: "rgba(255, 255, 255, 0.9)",
-                     borderTop: "1px solid #e0e0e0",
+                     backgroundColor: "rgba(255,255,255,0.75)",
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "center",
-                     backdropFilter: "blur(2px)",
                   }}
                >
                   <IconButton
@@ -154,9 +146,9 @@ export default function ResultContainer({
                      }
                   >
                      {isExpanded ? (
-                        <ExpandLess sx={{ fontSize: 20 }} />
+                        <ExpandLess sx={{ fontSize: 30 }} />
                      ) : (
-                        <ExpandMore sx={{ fontSize: 20 }} />
+                        <ExpandMore sx={{ fontSize: 30 }} />
                      )}
                   </IconButton>
                </Box>

package/src/components/click_helper.ts

@@ -0,0 +1,37 @@
+import { useNavigate } from "react-router-dom";
+import { MouseEvent } from "react";
+
+/**
+ * Custom hook that returns a function for handling clicks with proper modifier key support.
+ * The returned function handles CMD/Ctrl clicks to open in new tabs, regular clicks for navigation.
+ *
+ * @returns A function that takes a relative URL and either navigates or opens in new tab
+ */
+export function useRouterClickHandler() {
+   const navigate = useNavigate();
+
+   return (to: string, event?: MouseEvent) => {
+      // If no event or no modifier keys, use normal navigation
+      if (
+         !event ||
+         (!event.metaKey &&
+            !event.ctrlKey &&
+            !event.shiftKey &&
+            event.button !== 1)
+      ) {
+         navigate(to);
+         return;
+      }
+
+      // For modifier keys or middle mouse, let browser handle it by opening URL
+      const href = new URL(to, window.location.href).href;
+
+      if (event.metaKey || event.ctrlKey || event.button === 1) {
+         // CMD/Ctrl click or middle mouse - open in new tab
+         window.open(href, "_blank");
+      } else if (event.shiftKey) {
+         // Shift click - open in new window
+         window.open(href, "_blank");
+      }
+   };
+}

package/src/components/highlighter.ts

@@ -617,7 +617,7 @@ const malloySQLTMGrammar = {
    },
 };
 
-const THEME = "light-plus";
+const THEME = "catppuccin-latte";
 const HIGHLIGHTER = createHighlighter({
    themes: [THEME],
    langs: [

package/src/components/index.ts

@@ -5,3 +5,4 @@ export * from "./Package";
 export * from "./Project";
 export * from "./QueryResult";
 export * from "./Home";
+export { useRouterClickHandler } from "./click_helper";

package/vite.config.ts

@@ -42,7 +42,6 @@ export default ({ mode }) => {
                      "@uiw/react-md-editor",
                      "axios",
                      "markdown-to-jsx",
-                     "react-router-dom",
                   ],
                },
             },