@marimo-team/islands 0.23.12-dev5 → 0.23.12-dev7

package/dist/{vega-component-CKPImOhx.js → vega-component-Pk6lyc_a.js}

@@ -11,7 +11,7 @@ import { t as Tooltip } from "./tooltip-Czds6Qr8.js";
 import { i as debounce_default } from "./constants-T20xxyNf.js";
 import { T as useEvent_default, n as useTheme } from "./useTheme-BrYvK-_A.js";
 import { s as uniq } from "./arrays-sEtDRoG4.js";
-import { a as isValid, i as AlertTitle, n as Alert, t as arrow } from "./formats-CGj29bgR.js";
+import { a as isValid, i as AlertTitle, n as Alert, t as arrow } from "./formats-d6MhLuQ9.js";
 import { n as formats } from "./vega-loader.browser-CZ-J8Py3.js";
 import { a as getContainerWidth, n as vegaLoadData, s as tooltipHandler } from "./loader-Boph2xIS.js";
 import { t as j } from "./react-vega-B0sAlDTL.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.23.12-dev5",
+  "version": "0.23.12-dev7",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",
@@ -71,7 +71,7 @@
     "@replit/codemirror-vim": "^6.3.0",
     "@revealjs/react": "^0.2.1",
     "@streamdown/math": "^1.0.1",
-    "@tailwindcss/postcss": "^4.1.18",
+    "@tailwindcss/postcss": "^4.3.0",
     "@tailwindcss/typography": "^0.5.19",
     "@tanstack/react-table": "^8.21.3",
     "@tanstack/react-virtual": "^3.13.23",
@@ -227,7 +227,7 @@
     "storybook": "^10.3.5",
     "stylelint": "^16.26.1",
     "stylelint-config-standard": "^36.0.1",
-    "tailwindcss": "^4.2.2",
+    "tailwindcss": "^4.3.0",
     "vega-typings": "^2.1.0",
     "vite": "npm:rolldown-vite@7.3.1",
     "vite-plugin-top-level-await": "^1.6.0",

package/src/components/ai/display-helpers.tsx

@@ -5,15 +5,15 @@ import type { Role } from "@marimo-team/llm-info";
 export function getTagColour(role: Role | "thinking"): string {
   switch (role) {
     case "chat":
-      return "bg-[var(--purple-3)] text-[var(--purple-11)]";
+      return "bg-(--purple-3) text-(--purple-11)";
     case "autocomplete":
-      return "bg-[var(--green-3)] text-[var(--green-11)]";
+      return "bg-(--green-3) text-(--green-11)";
     case "edit":
-      return "bg-[var(--blue-3)] text-[var(--blue-11)]";
+      return "bg-(--blue-3) text-(--blue-11)";
     case "thinking":
-      return "bg-[var(--purple-4)] text-[var(--purple-12)]";
+      return "bg-(--purple-4) text-(--purple-12)";
   }
-  return "bg-[var(--mauve-3)] text-[var(--mauve-11)]";
+  return "bg-(--mauve-3) text-(--mauve-11)";
 }
 
 export function getCurrentRoleTooltip(role: Role): string {

package/src/components/app-config/ai-config.tsx

@@ -488,11 +488,11 @@ const ModelListItem: React.FC<ModelListItemProps> = ({
     <TreeItem
       id={qualifiedId}
       textValue={model.name}
-      className="pl-6 outline-none data-focused:bg-muted/50 hover:bg-muted/50"
+      className="pl-6 outline-hidden data-focused:bg-muted/50 hover:bg-muted/50"
       onAction={handleToggle}
     >
       <TreeItemContent>
-        <div className="flex items-center justify-between px-3 py-2.5 border-b last:border-b-0 cursor-pointer outline-none">
+        <div className="flex items-center justify-between px-3 py-2.5 border-b last:border-b-0 cursor-pointer outline-hidden">
           <ModelInfoCard model={model} />
           {model.custom && (
             <Button
@@ -1465,10 +1465,10 @@ const ProviderTreeItem: React.FC<ProviderTreeItemProps> = ({
       id={providerId}
       hasChildItems={true}
       textValue={providerId}
-      className="outline-none data-focused:bg-muted/50 group"
+      className="outline-hidden data-focused:bg-muted/50 group"
     >
       <TreeItemContent>
-        <div className="flex items-center gap-3 px-2 py-3 hover:bg-muted/50 cursor-pointer outline-none focus-visible:outline-none border-b group-data-expanded:border-b-0 rounded-sm">
+        <div className="flex items-center gap-3 px-2 py-3 hover:bg-muted/50 cursor-pointer outline-hidden focus-visible:outline-hidden border-b group-data-expanded:border-b-0 rounded-sm">
           <Checkbox
             checked={checkboxState}
             onCheckedChange={handleProviderToggle}
@@ -1600,7 +1600,7 @@ export const AiModelDisplayConfig: React.FC<AiConfigProps> = ({
       <div className="bg-background">
         <Tree
           aria-label="AI Models by Provider"
-          className="flex-1 overflow-auto outline-none focus-visible:outline-none"
+          className="flex-1 overflow-auto outline-hidden focus-visible:outline-hidden"
           selectionMode="none"
         >
           {listModelsByProvider.map(([providerId, models]) => (

package/src/components/app-config/mcp-config.tsx

@@ -131,8 +131,8 @@ export const MCPConfig: React.FC<MCPConfigProps> = ({ form, onSubmit }) => {
                       key={config.id}
                       className={`cursor-pointer transition-all ${
                         isChecked
-                          ? "border-[var(--blue-9)] bg-[var(--blue-2)]"
-                          : "hover:border-[var(--blue-7)]"
+                          ? "border-(--blue-9) bg-(--blue-2)"
+                          : "hover:border-(--blue-7)"
                       }`}
                       onClick={() => togglePreset(config.id)}
                     >
@@ -144,7 +144,7 @@ export const MCPConfig: React.FC<MCPConfigProps> = ({ form, onSubmit }) => {
                           <span
                             className={`h-5 w-5 flex items-center justify-center rounded border ${
                               isChecked
-                                ? "border-[var(--blue-7)] bg-[var(--blue-7)] text-foreground"
+                                ? "border-(--blue-7) bg-(--blue-7) text-foreground"
                                 : "border-muted bg-background text-muted-foreground"
                             }`}
                           >

package/src/components/chat/acp/agent-panel.tsx

@@ -263,7 +263,7 @@ const LoadingIndicator = memo<LoadingIndicatorProps>(
     }
 
     return (
-      <div className="px-3 py-2 border-t bg-muted/30 flex-shrink-0">
+      <div className="px-3 py-2 border-t bg-muted/30 shrink-0">
         <div className="flex items-center justify-between text-xs text-muted-foreground">
           <div className="flex items-center gap-2">
             <Spinner size="small" className="text-primary" />
@@ -352,7 +352,7 @@ const PromptArea = memo<PromptAreaProps>(
     });
 
     return (
-      <div className="border-t bg-background flex-shrink-0">
+      <div className="border-t bg-background shrink-0">
         <div
           className={cn(
             "px-3 py-2 min-h-[80px]",
@@ -583,7 +583,7 @@ const ChatContent = memo<ChatContentProps>(
     };
 
     return (
-      <div className="flex-1 flex flex-col overflow-hidden flex-shrink-0 relative">
+      <div className="flex-1 flex flex-col overflow-hidden shrink-0 relative">
         {pendingPermission && (
           <div className="p-3 border-b">
             <PermissionRequest

package/src/components/chat/acp/blocks.tsx

@@ -119,20 +119,18 @@ export const ErrorBlock = (props: {
 
   return (
     <div
-      className="border border-[var(--red-6)] bg-[var(--red-2)] rounded-lg p-4 my-2"
+      className="border border-(--red-6) bg-(--red-2) rounded-lg p-4 my-2"
       data-block-type="error"
     >
       <div className="flex items-start gap-3">
-        <div className="flex-shrink-0">
-          <XCircleIcon className="h-5 w-5 text-[var(--red-11)]" />
+        <div className="shrink-0">
+          <XCircleIcon className="h-5 w-5 text-(--red-11)" />
         </div>
         <div className="flex-1 min-w-0">
           <div className="flex items-center gap-2 mb-2">
-            <h4 className="text-sm font-medium text-[var(--red-11)]">
-              Agent Error
-            </h4>
+            <h4 className="text-sm font-medium text-(--red-11)">Agent Error</h4>
           </div>
-          <div className="text-sm text-[var(--red-11)] leading-relaxed mb-3">
+          <div className="text-sm text-(--red-11) leading-relaxed mb-3">
             {message}
           </div>
           <div className="flex items-center gap-2">
@@ -141,7 +139,7 @@ export const ErrorBlock = (props: {
                 size="xs"
                 variant="outline"
                 onClick={props.onRetry}
-                className="text-[var(--red-11)] border-[var(--red-6)] hover:bg-[var(--red-3)]"
+                className="text-(--red-11) border-(--red-6) hover:bg-(--red-3)"
               >
                 <RotateCcwIcon className="h-3 w-3 mr-1" />
                 Retry
@@ -152,7 +150,7 @@ export const ErrorBlock = (props: {
                 size="xs"
                 variant="ghost"
                 onClick={props.onDismiss}
-                className="text-[var(--red-10)] hover:bg-[var(--red-3)]"
+                className="text-(--red-10) hover:bg-(--red-3)"
               >
                 <XIcon className="h-3 w-3 mr-1" />
                 Dismiss
@@ -169,8 +167,8 @@ export const ReadyToChatBlock = () => {
   return (
     <div className="flex-1 flex items-center justify-center h-full min-h-[200px] flex-col">
       <div className="text-center space-y-3">
-        <div className="w-12 h-12 mx-auto rounded-full bg-[var(--blue-3)] flex items-center justify-center">
-          <BotMessageSquareIcon className="h-6 w-6 text-[var(--blue-10)]" />
+        <div className="w-12 h-12 mx-auto rounded-full bg-(--blue-3) flex items-center justify-center">
+          <BotMessageSquareIcon className="h-6 w-6 text-(--blue-10)" />
         </div>
         <div>
           <h3 className="text-lg font-medium text-foreground mb-1">
@@ -205,50 +203,50 @@ export const ConnectionChangeBlock = (props: {
           icon: <WifiIcon className="h-4 w-4" />,
           title: "Connected to Agent",
           message: "Successfully established connection with the AI agent",
-          bgColor: "bg-[var(--blue-2)]",
-          borderColor: "border-[var(--blue-6)]",
-          textColor: "text-[var(--blue-11)]",
-          iconColor: "text-[var(--blue-10)]",
+          bgColor: "bg-(--blue-2)",
+          borderColor: "border-(--blue-6)",
+          textColor: "text-(--blue-11)",
+          iconColor: "text-(--blue-10)",
         };
       case "disconnected":
         return {
           icon: <WifiOffIcon className="h-4 w-4" />,
           title: "Disconnected from Agent",
           message: "Connection to the AI agent has been lost",
-          bgColor: "bg-[var(--amber-2)]",
-          borderColor: "border-[var(--amber-6)]",
-          textColor: "text-[var(--amber-11)]",
-          iconColor: "text-[var(--amber-10)]",
+          bgColor: "bg-(--amber-2)",
+          borderColor: "border-(--amber-6)",
+          textColor: "text-(--amber-11)",
+          iconColor: "text-(--amber-10)",
         };
       case "connecting":
         return {
           icon: <WifiIcon className="h-4 w-4 animate-pulse" />,
           title: "Connecting to Agent",
           message: "Establishing connection with the AI agent...",
-          bgColor: "bg-[var(--gray-2)]",
-          borderColor: "border-[var(--gray-6)]",
-          textColor: "text-[var(--gray-11)]",
-          iconColor: "text-[var(--gray-10)]",
+          bgColor: "bg-(--gray-2)",
+          borderColor: "border-(--gray-6)",
+          textColor: "text-(--gray-11)",
+          iconColor: "text-(--gray-10)",
         };
       case "error":
         return {
           icon: <WifiOffIcon className="h-4 w-4" />,
           title: "Connection Error",
           message: "Failed to connect to the AI agent",
-          bgColor: "bg-[var(--red-2)]",
-          borderColor: "border-[var(--red-6)]",
-          textColor: "text-[var(--red-11)]",
-          iconColor: "text-[var(--red-10)]",
+          bgColor: "bg-(--red-2)",
+          borderColor: "border-(--red-6)",
+          textColor: "text-(--red-11)",
+          iconColor: "text-(--red-10)",
         };
       default:
         return {
           icon: <WifiOffIcon className="h-4 w-4" />,
           title: "Connection Status Changed",
           message: `Agent connection status: ${status}`,
-          bgColor: "bg-[var(--gray-2)]",
-          borderColor: "border-[var(--gray-6)]",
-          textColor: "text-[var(--gray-11)]",
-          iconColor: "text-[var(--gray-10)]",
+          bgColor: "bg-(--gray-2)",
+          borderColor: "border-(--gray-6)",
+          textColor: "text-(--gray-11)",
+          iconColor: "text-(--gray-10)",
         };
     }
   };
@@ -263,7 +261,7 @@ export const ConnectionChangeBlock = (props: {
       data-status={status}
     >
       <div className="flex items-start gap-3">
-        <div className={`flex-shrink-0 ${config.iconColor}`}>{config.icon}</div>
+        <div className={`shrink-0 ${config.iconColor}`}>{config.icon}</div>
         <div className="flex-1 min-w-0">
           <div className="flex items-center gap-2 mb-1">
             <h4 className={`text-sm font-medium ${config.textColor}`}>
@@ -362,7 +360,7 @@ export const PlansBlock = (props: { data: PlanNotificationEvent[] }) => {
 
 export const UserMessagesBlock = (props: { data: UserNotificationEvent[] }) => {
   return (
-    <div className="flex flex-col gap-2 text-muted-foreground border p-2 bg-background rounded break-words overflow-x-hidden">
+    <div className="flex flex-col gap-2 text-muted-foreground border p-2 bg-background rounded wrap-break-word overflow-x-hidden">
       <ContentBlocks data={props.data.map((item) => item.content)} />
     </div>
   );
@@ -454,7 +452,7 @@ export const ResourceBlock = (props: { data: ContentBlockOf<"resource"> }) => {
             Formatted for agents, not humans.
           </span>
           {props.data.resource.mimeType === "text/plain" ? (
-            <pre className="text-xs whitespace-pre-wrap p-2 bg-muted rounded-md break-words">
+            <pre className="text-xs whitespace-pre-wrap p-2 bg-muted rounded-md wrap-break-word">
               {props.data.resource.text}
             </pre>
           ) : (
@@ -514,7 +512,7 @@ export const ResourceLinkBlock = (props: {
 };
 
 export const MimeIcon = (props: { mimeType: string }) => {
-  const classNames = "h-2 w-2 flex-shrink-0";
+  const classNames = "h-2 w-2 shrink-0";
   if (props.mimeType.startsWith("image/")) {
     return <FileImageIcon className={classNames} />;
   }
@@ -647,10 +645,10 @@ export const DiffBlocks = (props: {
         return (
           <div
             key={item.path}
-            className="border rounded-md overflow-hidden bg-[var(--gray-2)] overflow-y-auto scrollbar-thin max-h-64"
+            className="border rounded-md overflow-hidden bg-(--gray-2) overflow-y-auto scrollbar-thin max-h-64"
           >
             {/* File path header */}
-            <div className="px-2 py-1 bg-[var(--gray-2)] border-b text-xs font-medium text-[var(--gray-11)]">
+            <div className="px-2 py-1 bg-(--gray-2) border-b text-xs font-medium text-(--gray-11)">
               {item.path}
             </div>
             <ReadonlyDiff
@@ -737,7 +735,7 @@ export const ToolBodyBlock = (props: {
     }
     // Show rawInput
     return (
-      <pre className="bg-[var(--slate-2)] p-1 text-muted-foreground border border-[var(--slate-4)] rounded text-xs overflow-auto scrollbar-thin max-h-64">
+      <pre className="bg-(--slate-2) p-1 text-muted-foreground border border-(--slate-4) rounded text-xs overflow-auto scrollbar-thin max-h-64">
         <JsonOutput data={rawInput} format="tree" />
       </pre>
     );

package/src/components/chat/acp/common.tsx

@@ -45,7 +45,7 @@ export const SimpleAccordion: React.FC<SimpleAccordionProps> = ({
       case "error":
         return <XCircleIcon className="h-3 w-3 text-destructive" />;
       case "success":
-        return <CheckCircleIcon className="h-3 w-3 text-[var(--blue-9)]" />;
+        return <CheckCircleIcon className="h-3 w-3 text-(--blue-9)" />;
       default:
         return defaultIcon;
     }
@@ -63,7 +63,7 @@ export const SimpleAccordion: React.FC<SimpleAccordionProps> = ({
           className={cn(
             "py-1 text-xs border-border shadow-none! ring-0! bg-muted hover:bg-muted/30 px-2 gap-1 rounded-sm [&[data-state=open]>svg]:rotate-180",
             status === "error" && "text-destructive/80",
-            status === "success" && "text-[var(--blue-8)]",
+            status === "success" && "text-(--blue-8)",
           )}
         >
           <span className="flex items-center gap-1">
@@ -105,32 +105,28 @@ export const ConnectionStatus: React.FC<ConnectionStatusProps> = memo(
             icon: <WifiIcon className="h-3 w-3" />,
             label: "Connected",
             variant: "default" as const,
-            className:
-              "bg-[var(--blue-3)] text-[var(--blue-11)] border-[var(--blue-5)]",
+            className: "bg-(--blue-3) text-(--blue-11) border-(--blue-5)",
           };
         case "connecting":
           return {
             icon: <PlugIcon className="h-3 w-3 animate-pulse" />,
             label: "Connecting",
             variant: "secondary" as const,
-            className:
-              "bg-[var(--yellow-3)] text-[var(--yellow-11)] border-[var(--yellow-5)]",
+            className: "bg-(--yellow-3) text-(--yellow-11) border-(--yellow-5)",
           };
         case "disconnected":
           return {
             icon: <WifiOffIcon className="h-3 w-3" />,
             label: "Disconnected",
             variant: "outline" as const,
-            className:
-              "bg-[var(--red-3)] text-[var(--red-11)] border-[var(--red-5)]",
+            className: "bg-(--red-3) text-(--red-11) border-(--red-5)",
           };
         default:
           return {
             icon: <WifiOffIcon className="h-3 w-3" />,
             label: status || "Unknown",
             variant: "outline" as const,
-            className:
-              "bg-[var(--gray-3)] text-[var(--gray-11)] border-[var(--gray-5)]",
+            className: "bg-(--gray-3) text-(--gray-11) border-(--gray-5)",
           };
       }
     };
@@ -158,14 +154,14 @@ interface PermissionRequestProps {
 export const PermissionRequest: React.FC<PermissionRequestProps> = memo(
   ({ permission, onResolve }) => {
     return (
-      <div className="border border-[var(--amber-8)] bg-[var(--amber-2)] rounded-lg p-2">
+      <div className="border border-(--amber-8) bg-(--amber-2) rounded-lg p-2">
         <div className="flex items-center gap-2 mb-3">
-          <ShieldCheckIcon className="h-4 w-4 text-[var(--amber-11)]" />
-          <h3 className="text-sm font-medium text-[var(--amber-11)]">
+          <ShieldCheckIcon className="h-4 w-4 text-(--amber-11)" />
+          <h3 className="text-sm font-medium text-(--amber-11)">
             Permission Request
           </h3>
         </div>
-        <p className="text-sm text-[var(--amber-11)] mb-3">
+        <p className="text-sm text-(--amber-11) mb-3">
           The AI agent is requesting permission to proceed:
         </p>
         <ToolBodyBlock data={permission.toolCall} />
@@ -177,8 +173,8 @@ export const PermissionRequest: React.FC<PermissionRequestProps> = memo(
               variant="text"
               className={
                 option.kind.startsWith("allow")
-                  ? "text-[var(--blue-10)]"
-                  : "text-[var(--red-10)]"
+                  ? "text-(--blue-10)"
+                  : "text-(--red-10)"
               }
               onClick={() =>
                 onResolve({

package/src/components/chat/acp/scroll-to-bottom-button.tsx

@@ -35,7 +35,7 @@ const ScrollToBottomButton = memo<ScrollToBottomButtonProps>(
             "shadow-md shadow-black/10",
             "hover:bg-background hover:shadow-black/15",
             "transition-all duration-200",
-            "focus:outline-none focus:ring-2 focus:ring-primary/50",
+            "focus:outline-hidden focus:ring-2 focus:ring-primary/50",
           )}
         >
           <ArrowDownIcon className="h-4 w-4" />

package/src/components/chat/acp/session-tabs.tsx

@@ -45,7 +45,7 @@ const SessionTab: React.FC<SessionTabProps> = memo(
         <Button
           variant="ghost"
           size="sm"
-          className="h-4 w-4 p-0 hover:bg-destructive/20 hover:text-destructive flex-shrink-0"
+          className="h-4 w-4 p-0 hover:bg-destructive/20 hover:text-destructive shrink-0"
           onClick={(e) => {
             e.stopPropagation();
             onClose(session.tabId);
@@ -131,7 +131,7 @@ export const SessionTabs: React.FC<SessionTabsProps> = memo(({ className }) => {
         onSelectSession={handleSelectSession}
         onCloseSession={handleCloseSession}
       />
-      <AgentSelector className="h-6 flex-shrink-0" />
+      <AgentSelector className="h-6 shrink-0" />
     </div>
   );
 });

package/src/components/chat/chat-history-popover.tsx

@@ -107,7 +107,7 @@ export const ChatHistoryPopover: React.FC<ChatHistoryPopoverProps> = ({
                       <div className="flex-1 min-w-0">
                         <div className="text-sm truncate">{chat.title}</div>
                       </div>
-                      <div className="text-xs text-muted-foreground/60 ml-2 flex-shrink-0">
+                      <div className="text-xs text-muted-foreground/60 ml-2 shrink-0">
                         {timeAgo(chat.updatedAt, locale)}
                       </div>
                     </button>

package/src/components/data-table/columns.tsx

@@ -503,7 +503,7 @@ function getCellStyleClass({
     isNumeric && "tabular-nums",
     justify === "center" && "text-center",
     justify === "right" && "text-right",
-    wrapped && `${COLUMN_WRAPPING_STYLES} break-words`,
+    wrapped && `${COLUMN_WRAPPING_STYLES} wrap-break-word`,
   );
 }
 
@@ -651,7 +651,7 @@ export function renderCellValue<TData, TValue>({
         selectCell={selectCell}
         rawStringValue={stringValue}
         edges={{ leading, trailing }}
-        contentClassName="max-h-64 overflow-auto whitespace-pre-wrap break-words text-sm w-96"
+        contentClassName="max-h-64 overflow-auto whitespace-pre-wrap wrap-break-word text-sm w-96"
         buttonText="X"
         wrapped={isWrapped}
       >

package/src/components/data-table/filter-pill-editor.tsx

@@ -435,7 +435,7 @@ const ValueSlot = <TData, TValue>({
     const v =
       value.kind === "multi-values" ? value : { kind: "multi-values" as const };
     return (
-      <div className="min-w-[14rem] w-fit max-w-[24rem]">
+      <div className="min-w-56 w-fit max-w-[24rem]">
         <FilterByValuesPicker
           column={column}
           calculateTopKRows={calculateTopKRows}

package/src/components/dependency-graph/minimap-content.tsx

@@ -107,7 +107,7 @@ const MinimapCell: React.FC<MinimapCellProps> = (props) => {
       <svg
         className={cn(
           "absolute overflow-visible top-[10.5px] left-[calc(var(--spacing-extra-small,8px)+31px)] pointer-events-none",
-          isSelected ? "z-[1]" : "z-0",
+          isSelected ? "z-1" : "z-0",
           getTextColor({ cell, selectedCell }),
         )}
         width="1"

package/src/components/editor/RecoveryButton.tsx

@@ -76,7 +76,7 @@ const RecoveryModal = (props: {
           Download unsaved changes?
         </DialogTitle>
         <DialogDescription
-          className="markdown break-words"
+          className="markdown wrap-break-word"
           style={{ wordBreak: "break-word" }}
         >
           <div className="prose dark:prose-invert">

package/src/components/editor/actions/pair-with-agent-modal.tsx

@@ -234,7 +234,7 @@ const CommandBlock: React.FC<{
   if (multiline) {
     return (
       <div className="relative rounded-md bg-muted">
-        <pre className="max-h-64 overflow-auto whitespace-pre-wrap break-words px-3 py-2 pr-10 font-mono text-xs select-all">
+        <pre className="max-h-64 overflow-auto whitespace-pre-wrap wrap-break-word px-3 py-2 pr-10 font-mono text-xs select-all">
           {display ?? command}
         </pre>
         <Tooltip content="Copied!" open={copied}>
@@ -257,7 +257,7 @@ const CommandBlock: React.FC<{
 
   return (
     <div className="flex items-center gap-2 rounded-md bg-muted px-3 py-2 font-mono text-xs">
-      <code className="flex-1 select-all break-words">
+      <code className="flex-1 select-all wrap-break-word">
         {display ?? command}
       </code>
       <Tooltip content="Copied!" open={copied}>

package/src/components/editor/ai/ai-completion-editor.tsx

@@ -222,7 +222,7 @@ export const AiCompletionEditor: React.FC<Props> = ({
         showInputPrompt={showInputPrompt}
         setShowInputPrompt={setShowInputPrompt}
         runCell={runCell}
-        className="mt-4 mb-3 w-128"
+        className="mt-4 mb-3 w-lg"
       />
     </div>
   );

package/src/components/editor/cell/CreateCellButton.tsx

@@ -142,7 +142,7 @@ export const CreateCellButton = ({
       <DropdownMenuTrigger asChild={true}>
         <Button
           className={cn(
-            "border-none hover-action shadow-none! bg-transparent! focus-visible:outline-none",
+            "border-none hover-action shadow-none! bg-transparent! focus-visible:outline-hidden",
             isAppInteractionDisabled(connectionState) && " inactive-button",
           )}
           onPointerDownCapture={handlePointerDownCapture}

package/src/components/editor/chrome/panels/empty-state.tsx

@@ -20,7 +20,7 @@ export const PanelEmptyState = ({
         {icon &&
           // oxlint-disable-next-line react/no-clone-element
           React.cloneElement(icon, {
-            className: "text-accent-foreground flex-shrink-0",
+            className: "text-accent-foreground shrink-0",
           })}
         <span className="mt-1 text-accent-foreground">{title}</span>
       </div>

package/src/components/editor/chrome/panels/outline/floating-outline.tsx

@@ -38,7 +38,7 @@ export const FloatingOutline: React.FC = () => {
       <OutlineList
         className={cn(
           "-top-4 max-h-[70vh] bg-background rounded-lg shadow-lg absolute overflow-auto transition-all duration-300 w-[300px] border",
-          isHovered ? "-left-[280px] opacity-100" : "left-[300px] opacity-0",
+          isHovered ? "left-[-280px] opacity-100" : "left-[300px] opacity-0",
         )}
         items={items}
         activeHeaderId={activeHeaderId}

package/src/components/editor/chrome/wrapper/pending-ai-cells.tsx

@@ -74,7 +74,7 @@ export const PendingAICells: React.FC = () => {
         <Button variant="ghost" size="icon" onClick={() => clickNext("up")}>
           <ChevronUp className="h-3.5 w-3.5" />
         </Button>
-        <span className="text-xs font-mono min-w-[3.5rem] text-center">
+        <span className="text-xs font-mono min-w-14 text-center">
           {currentIndex === null
             ? `${listStagedCells.length} pending`
             : `${currentIndex + 1} / ${listStagedCells.length}`}

package/src/components/editor/columns/cell-column.tsx

@@ -81,7 +81,7 @@ const ResizableComponent = ({
       <div
         ref={ref}
         className={`w-[3px] cursor-col-resize transition-colors duration-200 z-100
-          relative before:content-[''] before:absolute before:inset-y-0 before:-left-[3px]
+          relative before:content-[''] before:absolute before:inset-y-0 before:left-[-3px]
           before:right-[-3px] before:w-[9px] before:z-[-1]
           hover/column:bg-[var(--slate-3)] dark:hover/column:bg-[var(--slate-5)]
           hover/column:hover:bg-primary/60 dark:hover/column:hover:bg-primary/60`}

package/src/components/editor/columns/sortable-column.tsx

@@ -78,7 +78,7 @@ const SortableColumnInternal = React.forwardRef(
     };
 
     const dragHandle = (
-      <div className="px-2 pb-0 group flex items-center overflow-hidden border-b border-[var(--slate-7)]">
+      <div className="px-2 pb-0 group flex items-center overflow-hidden border-b border-(--slate-7)">
         <Tooltip content="Move column left" side="top" delayDuration={300}>
           <Button
             variant="text"
@@ -161,7 +161,7 @@ const SortableColumnInternal = React.forwardRef(
           isOver && "bg-accent/20", // Add a background color when dragging over
         )}
       >
-        <div className="border border-[var(--slate-7)]">
+        <div className="border border-(--slate-7)">
           {dragHandle}
           {props.children}
         </div>

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

@@ -722,7 +722,7 @@ export const MarimoErrorOutput = ({
     <Alert
       variant={alertVariant}
       className={cn(
-        "border-none font-code text-sm text-[0.84375rem] p-0 text-muted-foreground normal [&:has(svg)]:pl-0 space-y-2",
+        "border-none font-code text-sm text-[0.84375rem] p-0 text-muted-foreground normal has-[svg]:pl-0 space-y-2",
         className,
       )}
     >

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

@@ -18,7 +18,7 @@ export const TextOutput = ({ text, channel, wrapText }: Props): JSX.Element => {
     return (
       <span
         className={
-          wrapText ? "whitespace-pre-wrap break-words" : "whitespace-pre"
+          wrapText ? "whitespace-pre-wrap wrap-break-word" : "whitespace-pre"
         }
       >
         <RenderTextWithLinks text={text} />
@@ -30,7 +30,7 @@ export const TextOutput = ({ text, channel, wrapText }: Props): JSX.Element => {
     <span
       className={cn(
         !shouldRenderAnsi &&
-          (wrapText ? "whitespace-pre-wrap break-words" : "whitespace-pre"),
+          (wrapText ? "whitespace-pre-wrap wrap-break-word" : "whitespace-pre"),
         channel === "output" && "font-prose",
         channel,
       )}