@lukeashford/aurelius 2.19.0 → 2.20.0

package/dist/index.mjs

@@ -109,8 +109,18 @@ var Skeleton = React3.forwardRef(
 Skeleton.displayName = "Skeleton";
 
 // src/components/Card.tsx
-var CardContext = createContext({ isLoading: false });
+var CardContext = createContext({ loading: void 0 });
 var useCardContext = () => useContext(CardContext);
+function slotLoading(loading, path) {
+  if (!loading) {
+    return false;
+  }
+  if (Array.isArray(path)) {
+    const [section, field] = path;
+    return !!loading[section]?.[field];
+  }
+  return !!loading[path];
+}
 var VARIANT_STYLES = {
   default: "bg-charcoal shadow-sm border border-gold/30",
   elevated: "bg-charcoal shadow-lg border-0",
@@ -124,12 +134,12 @@ var CardBase = React4.forwardRef(
     interactive = false,
     selected = false,
     noPadding = false,
-    isLoading = false,
+    loading,
     className,
     children,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ React4.createElement(CardContext.Provider, { value: { isLoading } }, /* @__PURE__ */ React4.createElement(
+    return /* @__PURE__ */ React4.createElement(CardContext.Provider, { value: { loading } }, /* @__PURE__ */ React4.createElement(
       "div",
       {
         ref,
@@ -157,9 +167,12 @@ var CardBase = React4.forwardRef(
 CardBase.displayName = "Card";
 var CardHeader = React4.forwardRef(
   ({ title, subtitle, action, className, children, ...props }, ref) => {
-    const { isLoading } = useCardContext();
+    const { loading } = useCardContext();
+    const titleIsLoading = slotLoading(loading, ["header", "title"]);
+    const subtitleIsLoading = slotLoading(loading, ["header", "subtitle"]);
+    const actionIsLoading = slotLoading(loading, ["header", "action"]);
     const hasContent = title || subtitle || action || children;
-    if (!hasContent && !isLoading) {
+    if (!hasContent && !titleIsLoading && !subtitleIsLoading && !actionIsLoading) {
       return null;
     }
     return /* @__PURE__ */ React4.createElement(
@@ -169,18 +182,19 @@ var CardHeader = React4.forwardRef(
         className: cx("px-6 py-4 border-b border-ash", className),
         ...props
       },
-      isLoading && !title && !subtitle ? /* @__PURE__ */ React4.createElement("div", { className: "flex flex-col gap-2" }, /* @__PURE__ */ React4.createElement(Skeleton, { className: "h-5 w-3/4" }), /* @__PURE__ */ React4.createElement(Skeleton, { className: "h-4 w-1/2" })) : title || subtitle || action ? /* @__PURE__ */ React4.createElement("div", { className: "flex items-start justify-between gap-4" }, /* @__PURE__ */ React4.createElement("div", { className: "flex-1 min-w-0" }, title ? /* @__PURE__ */ React4.createElement("h3", { className: "text-lg font-semibold text-white m-0" }, title) : isLoading ? /* @__PURE__ */ React4.createElement(Skeleton, { className: "h-5 w-3/4 mb-1" }) : null, subtitle ? /* @__PURE__ */ React4.createElement("p", { className: "text-sm text-silver mt-1 m-0" }, subtitle) : isLoading ? /* @__PURE__ */ React4.createElement(Skeleton, { className: "h-4 w-1/2 mt-1" }) : null), action && /* @__PURE__ */ React4.createElement("div", { className: "shrink-0" }, action)) : children
+      title || subtitle || action || titleIsLoading || subtitleIsLoading || actionIsLoading ? /* @__PURE__ */ React4.createElement("div", { className: "flex items-start justify-between gap-4" }, /* @__PURE__ */ React4.createElement("div", { className: "flex-1 min-w-0" }, title ? /* @__PURE__ */ React4.createElement("h3", { className: "text-lg font-semibold text-white m-0" }, title) : titleIsLoading ? /* @__PURE__ */ React4.createElement(Skeleton, { className: "h-5 w-3/4 mb-1" }) : null, subtitle ? /* @__PURE__ */ React4.createElement("p", { className: "text-sm text-silver mt-1 m-0" }, subtitle) : subtitleIsLoading ? /* @__PURE__ */ React4.createElement(Skeleton, { className: "h-4 w-1/2 mt-1" }) : null), action ? /* @__PURE__ */ React4.createElement("div", { className: "shrink-0" }, action) : actionIsLoading ? /* @__PURE__ */ React4.createElement(Skeleton, { className: "h-8 w-8 shrink-0" }) : null) : children
     );
   }
 );
 CardHeader.displayName = "CardHeader";
 var CardBody = React4.forwardRef(
   ({ className, children, ...props }, ref) => {
-    const { isLoading } = useCardContext();
-    if (!children && !isLoading) {
+    const { loading } = useCardContext();
+    const isBodyLoading = slotLoading(loading, "body");
+    if (!children && !isBodyLoading) {
       return null;
     }
-    return /* @__PURE__ */ React4.createElement("div", { ref, className: cx("px-6 py-4", className), ...props }, isLoading && !children ? /* @__PURE__ */ React4.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React4.createElement(Skeleton, { className: "h-4 w-full" }), /* @__PURE__ */ React4.createElement(Skeleton, { className: "h-4 w-full" }), /* @__PURE__ */ React4.createElement(Skeleton, { className: "h-4 w-3/4" })) : children);
+    return /* @__PURE__ */ React4.createElement("div", { ref, className: cx("px-6 py-4", className), ...props }, isBodyLoading ? /* @__PURE__ */ React4.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React4.createElement(Skeleton, { className: "h-4 w-full" }), /* @__PURE__ */ React4.createElement(Skeleton, { className: "h-4 w-full" }), /* @__PURE__ */ React4.createElement(Skeleton, { className: "h-4 w-3/4" })) : children);
   }
 );
 CardBody.displayName = "CardBody";
@@ -216,13 +230,14 @@ var CardMedia = React4.forwardRef(
     children,
     ...props
   }, ref) => {
-    const { isLoading } = useCardContext();
+    const { loading } = useCardContext();
+    const isMediaLoading = slotLoading(loading, "media");
     const aspectClass = aspect && aspect !== "none" ? {
       video: "aspect-video",
       square: "aspect-square",
       wide: "aspect-wide"
     }[aspect] : "";
-    if (!children && !isLoading) {
+    if (!children && !isMediaLoading) {
       return null;
     }
     return /* @__PURE__ */ React4.createElement(
@@ -238,7 +253,7 @@ var CardMedia = React4.forwardRef(
         ),
         ...props
       },
-      isLoading && !children ? /* @__PURE__ */ React4.createElement(Skeleton, { className: "w-full h-full" }) : children
+      isMediaLoading ? /* @__PURE__ */ React4.createElement(Skeleton, { className: "w-full h-full" }) : children
     );
   }
 );
@@ -5041,7 +5056,7 @@ var ImageCard = React59.forwardRef(
     contentClassName,
     className,
     children,
-    isLoading,
+    loading,
     ...props
   }, ref) => {
     return /* @__PURE__ */ React59.createElement(
@@ -5049,7 +5064,7 @@ var ImageCard = React59.forwardRef(
       {
         ref,
         className: cx("p-0 overflow-hidden w-full", className),
-        isLoading,
+        loading,
         ...props
       },
       /* @__PURE__ */ React59.createElement(
@@ -5058,7 +5073,7 @@ var ImageCard = React59.forwardRef(
           className: mediaClassName,
           style: { aspectRatio: resolveAspectRatio(aspectRatio) }
         },
-        src && /* @__PURE__ */ React59.createElement(
+        /* @__PURE__ */ React59.createElement(React59.Fragment, null, src && /* @__PURE__ */ React59.createElement(
           "img",
           {
             src,
@@ -5068,14 +5083,13 @@ var ImageCard = React59.forwardRef(
               objectFit === "cover" ? "object-cover" : "object-contain"
             )
           }
-        ),
-        overlay && /* @__PURE__ */ React59.createElement(
+        ), overlay && /* @__PURE__ */ React59.createElement(
           "div",
           {
             className: "absolute inset-0 bg-obsidian/80 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center justify-center"
           },
           overlay
-        )
+        ))
       ),
       /* @__PURE__ */ React59.createElement(
         Card.Header,
@@ -5122,7 +5136,7 @@ var VideoCard = React60.forwardRef(
     className,
     children,
     playerProps,
-    isLoading,
+    loading,
     ...props
   }, ref) => {
     return /* @__PURE__ */ React60.createElement(
@@ -5130,7 +5144,7 @@ var VideoCard = React60.forwardRef(
       {
         ref,
         className: cx("p-0 overflow-hidden w-full", className),
-        isLoading,
+        loading,
         ...props
       },
       /* @__PURE__ */ React60.createElement(
@@ -5190,7 +5204,7 @@ var AudioCard = React61.forwardRef(
     children,
     playerProps,
     height = "40px",
-    isLoading,
+    loading,
     ...props
   }, ref) => {
     return /* @__PURE__ */ React61.createElement(
@@ -5198,7 +5212,7 @@ var AudioCard = React61.forwardRef(
       {
         ref,
         className: cx("p-0 overflow-hidden w-full", className),
-        isLoading,
+        loading,
         ...props
       },
       /* @__PURE__ */ React61.createElement(Card.Media, { className: cx(
@@ -5254,7 +5268,7 @@ var PdfCard = React62.forwardRef(
     contentClassName,
     className,
     children,
-    isLoading,
+    loading,
     ...props
   }, ref) => {
     return /* @__PURE__ */ React62.createElement(
@@ -5262,7 +5276,7 @@ var PdfCard = React62.forwardRef(
       {
         ref,
         className: cx("p-0 overflow-hidden w-full", className),
-        isLoading,
+        loading,
         ...props
       },
       /* @__PURE__ */ React62.createElement(
@@ -5330,13 +5344,13 @@ function ScriptElementRenderer({ element }) {
   }
 }
 var ScriptCard = React63.forwardRef(
-  ({ title, subtitle, elements, maxHeight = "16rem", className, style, isLoading, ...rest }, ref) => {
+  ({ title, subtitle, elements, maxHeight = "16rem", className, style, loading, ...rest }, ref) => {
     return /* @__PURE__ */ React63.createElement(
       Card,
       {
         ref,
         className: cx("p-0 overflow-hidden w-full", className),
-        isLoading,
+        loading,
         ...rest
       },
       /* @__PURE__ */ React63.createElement(
@@ -5370,7 +5384,7 @@ var TextCard = React64.forwardRef(
     maxHeight = "16rem",
     contentClassName,
     className,
-    isLoading,
+    loading,
     ...props
   }, ref) => {
     return /* @__PURE__ */ React64.createElement(
@@ -5378,7 +5392,7 @@ var TextCard = React64.forwardRef(
       {
         ref,
         className: cx("p-0 overflow-hidden w-full", className),
-        isLoading,
+        loading,
         ...props
       },
       /* @__PURE__ */ React64.createElement(
@@ -5408,6 +5422,21 @@ var TextCard = React64.forwardRef(
 );
 TextCard.displayName = "TextCard";
 
+// src/utils/artifactLoading.ts
+function deriveCardSlotLoading(a) {
+  if (!a.isPending) {
+    return void 0;
+  }
+  const header = {
+    title: !a.title,
+    subtitle: !a.subtitle
+  };
+  const mediaNeeded = (type) => ["IMAGE", "VIDEO", "AUDIO", "PDF"].includes(type);
+  const media = mediaNeeded(a.type) && !a.url;
+  const body = a.type === "TEXT" && !(a.inlineContent && a.inlineContent.trim().length) || a.type === "SCRIPT" && !(a.scriptElements && a.scriptElements.length > 0);
+  return { header, media, body };
+}
+
 // src/components/ArtifactCard.tsx
 var ARTIFACT_TYPES = {
   TEXT: "TEXT",
@@ -5418,11 +5447,12 @@ var ARTIFACT_TYPES = {
   PDF: "PDF"
 };
 var ArtifactCard = React65.forwardRef(
-  ({ artifact, onExpand, isLoading, className, ...props }, ref) => {
+  ({ artifact, onExpand, loading, className, ...props }, ref) => {
+    const derivedLoading = deriveCardSlotLoading(artifact);
     const commonProps = {
       title: artifact.title,
       subtitle: artifact.subtitle,
-      isLoading: isLoading || artifact.isPending,
+      loading: loading || derivedLoading,
       className: "w-full"
     };
     const handleExpand = (e) => {
@@ -5606,7 +5636,7 @@ function ArtifactModal({
         MarkdownContent,
         {
           content: artifact.inlineContent || "",
-          isMarkdown: artifact.mimeType === "text/markdown",
+          isMarkdown: artifact.mimeType !== "text/plain",
           className: cx(
             "prose prose-invert max-w-none",
             artifact.mimeType === "text/plain" && "whitespace-pre-wrap"
@@ -5625,14 +5655,14 @@ function ArtifactModal({
 }
 function ArtifactRenderer({
   artifact,
-  isLoading,
+  loading,
   onExpand
 }) {
   return /* @__PURE__ */ React66.createElement(
     ArtifactCard,
     {
       artifact,
-      isLoading,
+      loading,
       onExpand
     }
   );
@@ -5642,7 +5672,7 @@ var ArtifactsPanel = React66.forwardRef(
     artifacts,
     isOpen = false,
     onClose,
-    isLoading = false,
+    loading,
     width,
     widthPercent,
     onResizeStart,
@@ -5744,12 +5774,12 @@ var ArtifactsPanel = React66.forwardRef(
             columns === 3 && "grid-cols-3"
           )
         },
-        artifacts.length === 0 && !isLoading ? /* @__PURE__ */ React66.createElement("p", { className: "text-xs text-silver/60 text-center py-8" }, "No artifacts to display") : artifacts.map((artifact) => /* @__PURE__ */ React66.createElement(
+        artifacts.length === 0 && !loading ? /* @__PURE__ */ React66.createElement("p", { className: "text-xs text-silver/60 text-center py-8" }, "No artifacts to display") : artifacts.map((artifact) => /* @__PURE__ */ React66.createElement(
           ArtifactRenderer,
           {
             key: artifact.id,
             artifact,
-            isLoading,
+            loading,
             onExpand: () => setExpandedArtifact(artifact)
           }
         ))
@@ -6081,9 +6111,6 @@ var ChatInterface = React68.forwardRef(
       }
       return -1;
     }, [effectiveMessages]);
-    const hasPendingArtifact = useMemo3(() => {
-      return artifacts.some((a) => a.isPending);
-    }, [artifacts]);
     useEffect13(() => {
       if (isPanelControlled) {
         return;
@@ -6247,7 +6274,6 @@ var ChatInterface = React68.forwardRef(
           artifacts,
           isOpen: artifactsPanelOpen,
           onClose: toggleArtifactsPanel,
-          isLoading: isStreaming && hasPendingArtifact,
           width: artifactsWidth,
           widthPercent: artifactsWidthPercent,
           onResizeStart: startResizingArtifacts,