@marimo-team/islands 0.23.15 → 0.23.16-dev2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.23.15",
+  "version": "0.23.16-dev2",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/components/editor/output/CalloutOutput.tsx

@@ -1,17 +1,31 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import { memo } from "react";
 import type { Intent } from "@/plugins/impl/common/intent";
-import { calloutStyles } from "./CalloutOutput.styles";
+import { cn } from "@/utils/cn";
 import { HtmlOutput } from "./HtmlOutput";
 
 interface Props {
   html: string;
   kind: Intent;
+  title?: string;
 }
 
-export const CalloutOutput: React.FC<Props> = memo(({ html, kind }) => {
+// Callouts share the flat admonition style of markdown admonitions
+// (css/admonition.css); each intent maps onto an admonition kind.
+const KIND_CLASS: Record<Intent, string> = {
+  neutral: "neutral",
+  info: "info",
+  warn: "warning",
+  success: "success",
+  danger: "danger",
+  // 'alert' is deprecated; render as danger
+  alert: "danger",
+};
+
+export const CalloutOutput: React.FC<Props> = memo(({ html, kind, title }) => {
   return (
-    <div className={calloutStyles({ kind })}>
+    <div className={cn("admonition", KIND_CLASS[kind])}>
+      {title && <span className="admonition-title">{title}</span>}
       <HtmlOutput html={html} alwaysSanitizeHtml={true} />
     </div>
   );

package/src/css/admonition.css

@@ -1,32 +1,53 @@
 @reference "../css/globals.css";
 
+/*
+ * Flat, GitHub-style admonitions.
+ *
+ * Icons are lucide (https://lucide.dev/icons/) data URIs applied as masks so
+ * they render in currentColor.
+ */
+
 .admonition {
-  --admonition-bg: var(--blue-2);
-  --admonition-border: var(--blue-8);
   --admonition-heading-color: var(--blue-11);
+  --admonition-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>');
 
   display: flex;
-  position: relative;
   flex-direction: column;
-  padding: 1rem;
-  padding-left: 3rem;
-  border-left: 4px solid;
+  padding: 0.5rem 1rem;
+  border-left: 0.25rem solid var(--admonition-heading-color);
   margin-bottom: 1rem;
-  background-color: var(--admonition-bg);
-  border-color: var(--admonition-border);
 
-  &::before {
-    position: absolute;
-    margin-top: 0.35rem;
-    margin-left: -2rem;
+  /* Tighten the gap between the title and body (md.css gives paragraphs a
+     1rem block margin; flex children don't collapse margins). */
+  & > .paragraph,
+  & > p {
+    margin-block: 0.375rem;
+  }
+
+  /* The paragraph right after the title hugs it, matching callouts, whose
+     body is nested in a wrapper and gets the md.css :first-child treatment. */
+  & > .admonition-title + .paragraph,
+  & > .admonition-title + p {
+    margin-block-start: 0;
   }
 }
 
 .admonition-title {
-  font-weight: bold;
+  display: block;
+  margin-bottom: 0.25rem;
+  font-weight: 600;
   color: var(--admonition-heading-color);
 
-  @apply tracking-wide;
+  &::before {
+    content: "";
+    display: inline-block;
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+    vertical-align: -0.125rem;
+    background-color: currentcolor;
+    mask: var(--admonition-icon) no-repeat center / contain;
+  }
 
   > .paragraph {
     margin: 0;
@@ -38,90 +59,50 @@
   }
 }
 
-/* Icons from https://lucide.dev/icons/ */
-
 .admonition.info,
 .admonition.note {
-  --admonition-bg: var(--blue-2);
-  --admonition-border: var(--blue-8);
   --admonition-heading-color: var(--blue-11);
-
-  &::before {
-    content: light-dark(
-      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" opacity="60%" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="admonition-icon lucide lucide-info"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>'),
-      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" opacity="60%" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="admonition-icon lucide lucide-info"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>')
-    );
-  }
+  --admonition-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>');
 }
 
 .admonition.danger,
 .admonition.caution,
 .admonition.error {
-  --admonition-bg: var(--red-2);
-  --admonition-border: var(--red-8);
   --admonition-heading-color: var(--red-11);
-
-  &::before {
-    content: light-dark(
-      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" opacity="60%" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-octagon-alert"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/></svg>'),
-      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" opacity="60%" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-octagon-alert"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/></svg>')
-    );
-  }
+  --admonition-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-octagon-alert"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/></svg>');
 }
 
 .admonition.attention,
 .admonition.warning {
-  --admonition-bg: var(--yellow-2);
-  --admonition-border: var(--yellow-8);
   --admonition-heading-color: var(--yellow-11);
-
-  &::before {
-    content: light-dark(
-      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" opacity="60%" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-alert"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>'),
-      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" opacity="60%" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-alert"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>')
-    );
-  }
+  --admonition-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-alert"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>');
 }
 
 .admonition.hint {
-  --admonition-bg: var(--gray-2);
-  --admonition-border: var(--gray-8);
   --admonition-heading-color: var(--gray-11);
-
-  .dark & {
-    --admonition-bg: var(--gray-3);
-  }
-
-  &::before {
-    content: light-dark(
-      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" opacity="60%" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>'),
-      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" opacity="60%" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>')
-    );
-  }
+  --admonition-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>');
 }
 
 .admonition.important {
-  --admonition-bg: var(--cyan-2);
-  --admonition-border: var(--cyan-8);
   --admonition-heading-color: var(--cyan-11);
+  --admonition-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-square-warning"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><path d="M12 7v2"/><path d="M12 13h.01"/></svg>');
+}
 
-  &::before {
-    content: light-dark(
-      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" opacity="60%" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-square-warning"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><path d="M12 7v2"/><path d="M12 13h.01"/></svg>'),
-      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" opacity="60%" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-square-warning"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><path d="M12 7v2"/><path d="M12 13h.01"/></svg>')
-    );
-  }
+.admonition.success {
+  --admonition-heading-color: var(--grass-11);
+  --admonition-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>');
 }
 
 .admonition.tip {
-  --admonition-bg: var(--grass-2);
-  --admonition-border: var(--grass-8);
   --admonition-heading-color: var(--grass-11);
+  --admonition-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-lightbulb"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/></svg>');
+}
 
-  &::before {
-    content: light-dark(
-      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" opacity="60%" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-lightbulb"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/></svg>'),
-      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" opacity="60%" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-lightbulb"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/></svg>')
-    );
+/* Quiet, icon-less variant used by neutral callouts. */
+.admonition.neutral {
+  --admonition-heading-color: var(--gray-11);
+
+  .admonition-title::before {
+    content: none;
   }
 }

package/src/plugins/layout/CalloutPlugin.tsx

@@ -18,6 +18,10 @@ interface Data {
    * The kind of callout
    */
   kind: Intent;
+  /**
+   * An optional bold title line
+   */
+  title?: string;
 }
 
 export class CalloutPlugin implements IStatelessPlugin<Data> {
@@ -26,9 +30,12 @@ export class CalloutPlugin implements IStatelessPlugin<Data> {
   validator = z.object({
     html: z.string(),
     kind: zodIntent,
+    title: z.string().optional(),
   });
 
   render({ data }: IStatelessPluginProps<Data>): JSX.Element {
-    return <CalloutOutput html={data.html} kind={data.kind} />;
+    return (
+      <CalloutOutput html={data.html} kind={data.kind} title={data.title} />
+    );
   }
 }

package/src/stories/callout.stories.tsx

@@ -71,3 +71,15 @@ export const Success = {
 
   name: "success",
 };
+
+export const WithTitle = {
+  render: () => (
+    <CalloutOutput
+      html="<p>CalloutOutput with a title and <strong>HTML</strong></p>"
+      kind="warn"
+      title="Watch out"
+    />
+  ),
+
+  name: "with title",
+};

package/src/components/editor/output/CalloutOutput.styles.ts

@@ -1,22 +0,0 @@
-/* Copyright 2026 Marimo. All rights reserved. */
-import { cva } from "class-variance-authority";
-
-export const calloutStyles = cva(
-  "border rounded-lg p-12 mt-12 mb-12 text-foreground shadow-[4px_4px_0px_0px]",
-  {
-    variants: {
-      kind: {
-        neutral: "border-(--slate-9) shadow-(color:--slate-8)",
-        // @deprecated, use danger instead
-        alert: "bg-(--red-2) border-(--red-9) shadow-(color:--red-8)",
-        info: "bg-(--sky-1) border-(--sky-8) shadow-(color:--sky-7)",
-        danger: "bg-(--red-2) border-(--red-9) shadow-(color:--red-8)",
-        warn: "bg-(--amber-2) border-(--amber-9) shadow-(color:--amber-8)",
-        success: "bg-(--grass-2) border-(--grass-9) shadow-(color:--grass-8)",
-      },
-    },
-    defaultVariants: {
-      kind: "neutral",
-    },
-  },
-);