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

package/dist/{swiper-component-BNa_4kh2.js → swiper-component-5HoSsPi1.js}

@@ -1,9 +1,9 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
-import { g as cn, l as useEventListener, t as Button } from "./button-vQhauTmO.js";
+import { g as cn, l as useEventListener, t as Button } from "./button-BacYv-bE.js";
 import { t as require_react } from "./react-DA-nE2FX.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-DebpN0FN.js";
-import { t as useIframeCapabilities } from "./useIframeCapabilities-C6Ta3EyP.js";
+import { t as useIframeCapabilities } from "./useIframeCapabilities-DWIYvDh7.js";
 var import_compiler_runtime = require_compiler_runtime(), import_react = /* @__PURE__ */ __toESM(require_react(), 1);
 function isObject$2(t2) {
   return typeof t2 == "object" && !!t2 && "constructor" in t2 && t2.constructor === Object;

package/dist/{toDate-Do1xRzAo.js → toDate-D-l5s8nn.js}

@@ -2,11 +2,11 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { t as __commonJSMin } from "./chunk-BNovOVIE.js";
-import { _ as Logger } from "./button-vQhauTmO.js";
+import { _ as Logger } from "./button-BacYv-bE.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
-import { u as createLucideIcon } from "./dist-DYGLrbYQ.js";
+import { u as createLucideIcon } from "./dist--2Bqjvs0.js";
 import { r as KnownQueryParams } from "./constants-T20xxyNf.js";
-import { b as atom, d as store, m as isIslands, p as waitFor } from "./useTheme-ZhT6uIu3.js";
+import { b as atom, d as store, m as isIslands, p as waitFor } from "./useTheme-BrYvK-_A.js";
 import { t as invariant } from "./invariant-wRzNXIsJ.js";
 var CircleQuestionMark = createLucideIcon("circle-question-mark", [
   ["circle", {

package/dist/{tooltip-Bz3OAwrU.js → tooltip-Czds6Qr8.js}

@@ -1,10 +1,10 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
-import { f as createSlottable, g as cn, m as useComposedRefs } from "./button-vQhauTmO.js";
+import { f as createSlottable, g as cn, m as useComposedRefs } from "./button-BacYv-bE.js";
 import { t as require_react } from "./react-DA-nE2FX.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
-import { a as createPopperScope, i as Root2, n as Arrow, r as Content, s as Root, t as Anchor } from "./dist-DYGLrbYQ.js";
+import { a as createPopperScope, i as Root2, n as Arrow, r as Content, s as Root, t as Anchor } from "./dist--2Bqjvs0.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-DebpN0FN.js";
-import { Q as withSmartCollisionBoundary, Z as withFullScreenAsRoot, _t as createContextScope, at as Portal, ct as DismissableLayer, dt as useId, et as StyleNamespace, ft as Presence, ht as composeEventHandlers, pt as useControllableState, vt as Primitive } from "./zod-DXqkaI_w.js";
+import { Q as withSmartCollisionBoundary, Z as withFullScreenAsRoot, _t as createContextScope, at as Portal, ct as DismissableLayer, dt as useId, et as StyleNamespace, ft as Presence, ht as composeEventHandlers, pt as useControllableState, vt as Primitive } from "./zod-CijjQh4u.js";
 var import_react = /* @__PURE__ */ __toESM(require_react(), 1), import_jsx_runtime = /* @__PURE__ */ __toESM(require_jsx_runtime(), 1), [createTooltipContext, createTooltipScope] = createContextScope("Tooltip", [createPopperScope]), usePopperScope = createPopperScope(), PROVIDER_NAME = "TooltipProvider", DEFAULT_DELAY_DURATION = 700, TOOLTIP_OPEN = "tooltip.open", [TooltipProviderContextProvider, useTooltipProviderContext] = createTooltipContext(PROVIDER_NAME), TooltipProvider$1 = (n) => {
   let { __scopeTooltip: j, delayDuration: M = DEFAULT_DELAY_DURATION, skipDelayDuration: N = 300, disableHoverableContent: P = false, children: F } = n, I = import_react.useRef(true), L = import_react.useRef(false), R = import_react.useRef(0);
   return import_react.useEffect(() => {

package/dist/{types-D8gEGs4R.js → types-C2Ir191_.js}

@@ -1,4 +1,4 @@
-import { u as createLucideIcon } from "./dist-DYGLrbYQ.js";
+import { u as createLucideIcon } from "./dist--2Bqjvs0.js";
 var Pencil = createLucideIcon("pencil", [["path", {
   d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z",
   key: "1a8usu"

package/dist/{useAsyncData-CL3o2p4i.js → useAsyncData-1Dhzjfwf.js}

@@ -1,7 +1,7 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-DA-nE2FX.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
-import { T as useEvent_default } from "./useTheme-ZhT6uIu3.js";
+import { T as useEvent_default } from "./useTheme-BrYvK-_A.js";
 import { t as invariant } from "./invariant-wRzNXIsJ.js";
 var import_compiler_runtime = require_compiler_runtime(), import_react = /* @__PURE__ */ __toESM(require_react(), 1), Result = {
   error(e, s) {

package/dist/{useDateFormatter-BC6iSz9g.js → useDateFormatter-CMnRuVmN.js}

@@ -1,7 +1,7 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-DA-nE2FX.js";
-import { u as createLucideIcon } from "./dist-DYGLrbYQ.js";
-import { E as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "./strings-Cq2s9_EQ.js";
+import { u as createLucideIcon } from "./dist--2Bqjvs0.js";
+import { E as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "./strings-Dq_j3Rxw.js";
 var ChartPie = createLucideIcon("chart-pie", [["path", {
   d: "M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z",
   key: "pzmjnu"

package/dist/{useDeepCompareMemoize-BPx2MuOK.js → useDeepCompareMemoize-CDWT3BDz.js}

@@ -1,6 +1,6 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-DA-nE2FX.js";
-import { w as dequal } from "./useTheme-ZhT6uIu3.js";
+import { w as dequal } from "./useTheme-BrYvK-_A.js";
 var import_react = /* @__PURE__ */ __toESM(require_react(), 1);
 function useDeepCompareMemoize(e) {
   let i = import_react.useRef(e);

package/dist/{useIframeCapabilities-C6Ta3EyP.js → useIframeCapabilities-DWIYvDh7.js}

@@ -1,7 +1,7 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-DA-nE2FX.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
-import { t as getIframeCapabilities } from "./capabilities-BEHzIS99.js";
+import { t as getIframeCapabilities } from "./capabilities-D_4LYhSU.js";
 var import_compiler_runtime = require_compiler_runtime();
 require_react();
 function useIframeCapabilities() {

package/dist/{useLifecycle-C3Ec71q0.js → useLifecycle-AHlswLw-.js}

@@ -1,10 +1,10 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
-import { _ as Logger, g as cn, r as cva } from "./button-vQhauTmO.js";
+import { _ as Logger, g as cn, r as cva } from "./button-BacYv-bE.js";
 import { t as require_react } from "./react-DA-nE2FX.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
-import { u as createLucideIcon } from "./dist-DYGLrbYQ.js";
+import { u as createLucideIcon } from "./dist--2Bqjvs0.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-DebpN0FN.js";
-import { b as atom, v as useSetAtom } from "./useTheme-ZhT6uIu3.js";
+import { b as atom, v as useSetAtom } from "./useTheme-BrYvK-_A.js";
 var Calendar = createLucideIcon("calendar", [
   ["path", {
     d: "M8 2v4",

package/dist/{useTheme-ZhT6uIu3.js → useTheme-BrYvK-_A.js}

@@ -1,8 +1,8 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
-import { _ as Logger, a as OverridingHotkeyProvider, s as resolvePlatform } from "./button-vQhauTmO.js";
+import { _ as Logger, a as OverridingHotkeyProvider, s as resolvePlatform } from "./button-BacYv-bE.js";
 import { t as require_react } from "./react-DA-nE2FX.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
-import { A as looseObject, B as union, I as record, N as number, P as object, R as string, T as boolean, b as _enum, w as array } from "./zod-DXqkaI_w.js";
+import { A as looseObject, B as union, I as record, N as number, P as object, R as string, T as boolean, b as _enum, w as array } from "./zod-CijjQh4u.js";
 import { t as merge_default } from "./merge-Be1CqGnU.js";
 var import_react = /* @__PURE__ */ __toESM(require_react()), useInsertionEffect = typeof window < "u" ? import_react.useInsertionEffect || import_react.useLayoutEffect : () => {
 };

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

@@ -1,24 +1,24 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
-import { _ as Logger, c as Objects, g as cn, h as Events } from "./button-vQhauTmO.js";
+import { _ as Logger, c as Objects, g as cn, h as Events } from "./button-BacYv-bE.js";
 import { t as require_react } from "./react-DA-nE2FX.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
-import { c as asRemoteURL, v as CircleQuestionMark } from "./toDate-Do1xRzAo.js";
+import { c as asRemoteURL, v as CircleQuestionMark } from "./toDate-D-l5s8nn.js";
 import "./react-dom-BTJzcVJ9.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-DebpN0FN.js";
-import "./zod-DXqkaI_w.js";
-import { n as ErrorBanner } from "./error-banner-BHAkVFc2.js";
-import { t as Tooltip } from "./tooltip-Bz3OAwrU.js";
+import "./zod-CijjQh4u.js";
+import { n as ErrorBanner } from "./error-banner-DFPfz_Qf.js";
+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-ZhT6uIu3.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-BV4bOfMI.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-YPuQvn1Y.js";
+import { a as getContainerWidth, n as vegaLoadData, s as tooltipHandler } from "./loader-Boph2xIS.js";
 import { t as j } from "./react-vega-B0sAlDTL.js";
 import "./defaultLocale-u-3osm0P.js";
 import "./defaultLocale-BoHTsDG6.js";
-import { t as useAsyncData } from "./useAsyncData-CL3o2p4i.js";
-import { t as useDeepCompareMemoize } from "./useDeepCompareMemoize-BPx2MuOK.js";
+import { t as useAsyncData } from "./useAsyncData-1Dhzjfwf.js";
+import { t as useDeepCompareMemoize } from "./useDeepCompareMemoize-CDWT3BDz.js";
 import { t as Semaphore } from "./semaphore-CNDGTzkX.js";
 var import_compiler_runtime = require_compiler_runtime(), import_react = /* @__PURE__ */ __toESM(require_react(), 1);
 function fixRelativeUrl(e) {

package/dist/{zod-DXqkaI_w.js → zod-CijjQh4u.js}

@@ -1,5 +1,5 @@
 import { r as __export, s as __toESM } from "./chunk-BNovOVIE.js";
-import { d as createSlot, l as useEventListener, m as useComposedRefs } from "./button-vQhauTmO.js";
+import { d as createSlot, l as useEventListener, m as useComposedRefs } from "./button-BacYv-bE.js";
 import { t as require_react } from "./react-DA-nE2FX.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
 import { t as require_react_dom } from "./react-dom-BTJzcVJ9.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.23.12-dev4",
+  "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}
       >