@marimo-team/frontend 0.23.12-dev4 → 0.23.12-dev7

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,
       )}

package/src/components/slides/minimap.tsx

@@ -514,7 +514,7 @@ const SlideThumbnailRow = ({
       tabIndex={0}
       data-cell-id={cell.id}
       className={cn(
-        "relative shrink-0 appearance-none text-left p-0 bg-transparent outline-none",
+        "relative shrink-0 appearance-none text-left p-0 bg-transparent outline-hidden",
         className,
       )}
       style={rowStyle}
@@ -591,7 +591,7 @@ const InsertCellLine = ({
         data-testid="minimap-insert-cell"
         className={cn(
           "absolute left-0 right-0 z-30 flex h-3 items-center justify-center",
-          "opacity-0 transition-opacity hover:opacity-80 focus-visible:opacity-100 focus:outline-none",
+          "opacity-0 transition-opacity hover:opacity-80 focus-visible:opacity-100 focus:outline-hidden",
           position === "below"
             ? "bottom-0 translate-y-1/2"
             : "top-0 -translate-y-1/2",

package/src/components/slides/reveal-component.tsx

@@ -684,7 +684,7 @@ const RevealSlidesComponent = ({
       <div className="group relative" style={{ width, height }}>
         <Deck
           deckRef={deckRef}
-          className="aspect-video w-full overflow-hidden border rounded bg-background mo-slides-theme prose-slides focus:outline-none focus-visible:outline-none"
+          className="aspect-video w-full overflow-hidden border rounded bg-background mo-slides-theme prose-slides focus:outline-hidden focus-visible:outline-hidden"
           config={revealConfig}
           onReady={handleDeckReady}
           onSlideChange={handleSlideChange}

package/src/components/ui/alert.tsx

@@ -6,7 +6,7 @@ import * as React from "react";
 import { cn } from "@/utils/cn";
 
 const alertVariants = cva(
-  "relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11",
+  "relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] has-[svg]:pl-11",
   {
     variants: {
       variant: {

package/src/components/ui/command.tsx

@@ -44,7 +44,7 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
         className="overflow-hidden p-0 shadow-2xl"
         usePortal={true}
       >
-        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+        <Command className="**:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 **:[[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 **:[[cmdk-input]]:h-12 **:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
           {children}
         </Command>
       </DialogContent>
@@ -113,7 +113,7 @@ const CommandGroup = React.forwardRef<
   <CommandPrimitive.Group
     ref={ref}
     className={cn(
-      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      "overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground",
       className,
     )}
     {...props}

package/src/components/ui/reorderable-list.tsx

@@ -300,7 +300,7 @@ export const ReorderableList = <T extends object>({
         <ListBoxItem
           key={getKey(item)}
           id={getKey(item)}
-          className="active:cursor-grabbing data-[dragging]:opacity-60 outline-none"
+          className="active:cursor-grabbing data-dragging:opacity-60 outline-hidden"
           onHoverStart={
             onItemPreloadHint ? () => onItemPreloadHint(item) : undefined
           }

package/src/components/ui/table.tsx

@@ -75,7 +75,7 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      "h-10 px-2 text-left align-middle font-medium text-muted-foreground has-[[role=checkbox]]:pr-0",
       className,
     )}
     {...props}
@@ -89,10 +89,7 @@ const TableCell = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <td
     ref={ref}
-    className={cn(
-      "p-1.5 align-middle [&:has([role=checkbox])]:pr-0",
-      className,
-    )}
+    className={cn("p-1.5 align-middle has-[[role=checkbox]]:pr-0", className)}
     {...props}
   />
 ));