@marimo-team/frontend 0.23.17-dev4 → 0.23.17-dev40

package/src/css/app/codemirror.css

@@ -1,14 +1,18 @@
 @reference "../globals.css";
 
 .light .cm-selectionBackground {
-  /* This is the background for selected text when focused,
-  but we want to use it when not in focus either because we
-  will often lose focus during find/replace or in another editor */
-  background-color: #d7d4f0 !important;
+  /* Keep drawn selections visible when focus moves to find/replace or another editor. */
+  background-color: var(
+    --cm-selection-background,
+    var(--cm-selection-background-light)
+  ) !important;
 }
 
 .dark .cm-selectionBackground {
-  background-color: #1177cc80 !important;
+  background-color: var(
+    --cm-selection-background,
+    var(--cm-selection-background-dark)
+  ) !important;
 }
 
 .cm-focused.cm-focused {
@@ -125,7 +129,7 @@
 /* -- Codeium -- */
 
 .cm-codeium-cycle {
-  font-size: 9px;
+  font-size: 0.5625rem;
   background-color: var(--sky-3);
   padding: 2px;
   border-radius: 2px;
@@ -133,7 +137,7 @@
 }
 
 .cm-codeium-cycle-key {
-  font-size: 9px;
+  font-size: 0.5625rem;
   font-family: monospace;
   display: inline-block;
   padding: 2px;

package/src/css/globals.css

@@ -107,6 +107,14 @@
     /* Codemirror editor */
     --cm-background: light-dark(var(--background), #282c34);
     --cm-comment: light-dark(#708090, #6b7280);
+    --cm-selection-background-light: #d7d4f0;
+    --cm-selection-background-dark: #1177cc80;
+    --cm-reactive-reference-color-light: #005f87;
+    --cm-reactive-reference-color-dark: #2a7aa5;
+    --cm-reactive-reference-border-color: #bad3de;
+    --cm-search-match-background-light: #99ff7780;
+    --cm-search-match-background-dark: #22bb0070;
+    --cm-search-match-selected-background-dark: #6199ff88;
   }
 
   .dark,

package/src/plugins/impl/DataEditorPlugin.tsx

@@ -8,10 +8,10 @@ import { LoadingTable } from "@/components/data-table/loading-table";
 import { type FieldTypes, toFieldTypes } from "@/components/data-table/types";
 import { Alert, AlertTitle } from "@/components/ui/alert";
 import { DelayMount } from "@/components/utils/delay-mount";
-import { DATA_TYPES } from "@/core/kernel/messages";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { createPlugin } from "../core/builder";
 import type { Setter } from "../types";
+import { columnToFieldTypesSchema } from "./data-frames/schema";
 import {
   BulkEdit,
   type DataEditorProps,
@@ -44,14 +44,7 @@ export const DataEditorPlugin = createPlugin<Edits>("marimo-data-editor", {
       }),
       label: z.string().nullable(),
       data: z.union([z.string(), z.array(z.object({}).passthrough())]),
-      fieldTypes: z
-        .array(
-          z.tuple([
-            z.coerce.string(),
-            z.tuple([z.enum(DATA_TYPES), z.string()]),
-          ]),
-        )
-        .nullish(),
+      fieldTypes: columnToFieldTypesSchema.nullish(),
       editableColumns: z.union([z.array(z.string()), z.literal("all")]),
       columnSizingMode: z.enum(["auto", "fit"]).default("auto"), // TODO: Remove this
     }),

package/src/plugins/impl/__tests__/DataEditorPlugin.test.ts

@@ -0,0 +1,18 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, expect, it } from "vitest";
+import { DataEditorPlugin } from "../DataEditorPlugin";
+
+describe("DataEditorPlugin", () => {
+  it("normalizes an unrecognized field type", () => {
+    const result = DataEditorPlugin.validator.parse({
+      initialValue: { edits: [] },
+      label: null,
+      data: [],
+      fieldTypes: [["geom", ["geometry", "geometry"]]],
+      editableColumns: "all",
+    });
+
+    expect(result.fieldTypes).toEqual([["geom", ["unknown", "geometry"]]]);
+  });
+});

package/src/plugins/impl/chat/chat-ui.tsx

@@ -26,6 +26,11 @@ import {
 } from "lucide-react";
 import React, { useEffect, useRef, useState } from "react";
 import { z } from "zod";
+import {
+  describeChatAbortReason,
+  getAbortReasonFromChunk,
+  resolveChatAbortReason,
+} from "@/components/chat/chat-abort";
 import { renderUIMessage } from "@/components/chat/chat-display";
 import {
   convertToFileUIPart,
@@ -168,6 +173,12 @@ export const Chatbot: React.FC<Props> = (props) => {
   // different message_id are stale (from an aborted-but-not-yet-cancelled run
   // on the kernel) and must be dropped
   const activeRequestIdRef = useRef<string | null>(null);
+  const lastAbortReasonRef = useRef<string | null>(null);
+  const [abortNotice, setAbortNotice] = useState<string | null>(null);
+  const clearAbortState = () => {
+    lastAbortReasonRef.current = null;
+    setAbortNotice(null);
+  };
 
   const { data: backendMessages } = useAsyncData(async () => {
     const response = await props.get_chat_history({});
@@ -231,6 +242,7 @@ export const Chatbot: React.FC<Props> = (props) => {
           // Client-generated id used to (a) route chunks back to this stream
           // and (b) ask the kernel to cancel just this run on Stop.
           const requestId = generateUUID();
+          clearAbortState();
 
           const stream = new ReadableStream<UIMessageChunk>({
             start(controller) {
@@ -297,15 +309,30 @@ export const Chatbot: React.FC<Props> = (props) => {
       },
     }),
     messages: initialMessages,
-    onFinish: (message) => {
+    onFinish: ({ messages, isAbort, finishReason }) => {
       setFiles(undefined);
 
       if (fileInputRef.current) {
         fileInputRef.current.value = "";
       }
-      Logger.debug("Finished streaming message:", message);
+      Logger.debug("Finished streaming message:", { finishReason, isAbort });
+
+      if (isAbort) {
+        const reason = resolveChatAbortReason({
+          isAbort: true,
+          streamReason: lastAbortReasonRef.current,
+        });
+        clearAbortState();
+        if (reason != null) {
+          const description = describeChatAbortReason(reason);
+          Logger.debug("Chat stream aborted", { reason, finishReason });
+          setAbortNotice(description);
+        }
+      } else {
+        clearAbortState();
+      }
 
-      props.setValue(message.messages);
+      props.setValue(messages);
     },
     onError: (error) => {
       Logger.error("An error occurred:", error);
@@ -323,6 +350,17 @@ export const Chatbot: React.FC<Props> = (props) => {
       if (!parsedMessage.success) {
         return;
       }
+      // Only record abort reasons for the active request. Late chunks from a
+      // cancelled run must not overwrite the next turn's reason
+      if (
+        parsedMessage.data.content &&
+        parsedMessage.data.message_id === activeRequestIdRef.current
+      ) {
+        const abortReason = getAbortReasonFromChunk(parsedMessage.data.content);
+        if (abortReason !== undefined) {
+          lastAbortReasonRef.current = abortReason;
+        }
+      }
       routeIncomingChatChunk(parsedMessage.data, {
         controllerRef: frontendStreamControllerRef,
         activeRequestIdRef,
@@ -340,6 +378,9 @@ export const Chatbot: React.FC<Props> = (props) => {
       setMessages(newMessages);
 
       props.setValue(newMessages);
+      if (newMessages.length === 0) {
+        clearAbortState();
+      }
     }
   };
 
@@ -389,6 +430,7 @@ export const Chatbot: React.FC<Props> = (props) => {
     props.setValue([]);
     props.delete_chat_history({});
     clearError();
+    clearAbortState();
   };
 
   return (
@@ -483,6 +525,12 @@ export const Chatbot: React.FC<Props> = (props) => {
             </Button>
           </div>
         )}
+
+        {abortNotice && !isLoading && !error && (
+          <div className="flex justify-center py-2">
+            <span className="text-xs text-muted-foreground">{abortNotice}</span>
+          </div>
+        )}
       </div>
       <form
         onSubmit={async (evt) => {

package/src/plugins/impl/data-frames/__tests__/schema.test.ts

@@ -0,0 +1,30 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, expect, it } from "vitest";
+import { columnToFieldTypesSchema } from "../schema";
+
+describe("columnToFieldTypesSchema", () => {
+  it("keeps known field types", () => {
+    const result = columnToFieldTypesSchema.parse([
+      ["count", ["integer", "int64"]],
+      ["label", ["string", "object"]],
+    ]);
+
+    expect(result).toEqual([
+      ["count", ["integer", "int64"]],
+      ["label", ["string", "object"]],
+    ]);
+  });
+
+  it("normalizes an unrecognized field type without discarding other fields", () => {
+    const result = columnToFieldTypesSchema.parse([
+      ["geom", ["geometry", "geometry"]],
+      ["label", ["string", "object"]],
+    ]);
+
+    expect(result).toEqual([
+      ["geom", ["unknown", "geometry"]],
+      ["label", ["string", "object"]],
+    ]);
+  });
+});

package/src/plugins/impl/data-frames/schema.ts

@@ -15,7 +15,10 @@ import {
 } from "./utils/operators";
 
 export const columnToFieldTypesSchema = z.array(
-  z.tuple([z.coerce.string(), z.tuple([z.enum(DATA_TYPES), z.string()])]),
+  z.tuple([
+    z.coerce.string(),
+    z.tuple([z.enum(DATA_TYPES).catch("unknown"), z.string()]),
+  ]),
 );
 
 export const column_id = z

package/src/plugins/impl/image-comparison/ImageComparisonComponent.tsx

@@ -49,6 +49,18 @@ const ImageComparisonComponent: React.FC<ImageComparisonData> = ({
     minHeight: "2rem",
   };
 
+  // The slider's width="100%" images resolve against its shadow-DOM wrappers (circular),
+  // so size the images explicitly and letterbox with object-fit to keep them aligned.
+  // Treat empty strings as "not provided" (normalize_dimension passes them through).
+  const imageStyle: React.CSSProperties | undefined =
+    width || height
+      ? {
+          width: width || undefined,
+          height: height || undefined,
+          objectFit: "contain",
+        }
+      : undefined;
+
   // If an image fails to load, the slider collapses to nothing; surface a
   // visible error instead of silently rendering an empty output.
   if (failedSrcs.size > 0) {
@@ -67,12 +79,18 @@ const ImageComparisonComponent: React.FC<ImageComparisonData> = ({
 
   return (
     <div style={containerStyle}>
-      <ImgComparisonSlider value={value} direction={direction}>
+      <ImgComparisonSlider
+        value={value}
+        direction={direction}
+        // inline-block leaves a baseline gap below the slider; align to top.
+        style={{ verticalAlign: "top" }}
+      >
         <img
           slot="first"
           src={beforeSrc}
           alt="Before"
           width="100%"
+          style={imageStyle}
           onError={() => handleError(beforeSrc)}
         />
         <img
@@ -80,6 +98,7 @@ const ImageComparisonComponent: React.FC<ImageComparisonData> = ({
           src={afterSrc}
           alt="After"
           width="100%"
+          style={imageStyle}
           onError={() => handleError(afterSrc)}
         />
       </ImgComparisonSlider>

package/src/plugins/impl/image-comparison/__tests__/ImageComparisonComponent.test.tsx

@@ -68,4 +68,62 @@ describe("ImageComparisonComponent", () => {
     expect(error?.textContent).toContain("…");
     expect(error?.textContent).not.toContain("A".repeat(200));
   });
+
+  it("sizes both images explicitly when dimensions are given", () => {
+    const { getAllByAltText } = render(
+      <ImageComparisonComponent {...baseProps} width="300px" height="300px" />,
+    );
+
+    for (const img of getAllByAltText(/Before|After/)) {
+      expect((img as HTMLElement).style.width).toBe("300px");
+      expect((img as HTMLElement).style.height).toBe("300px");
+      // Letterbox identically so the slider's clip stays aligned.
+      expect((img as HTMLElement).style.objectFit).toBe("contain");
+    }
+  });
+
+  it("applies a single dimension to both images when only one is given", () => {
+    const { getAllByAltText } = render(
+      <ImageComparisonComponent {...baseProps} width="300px" />,
+    );
+
+    for (const img of getAllByAltText(/Before|After/)) {
+      expect((img as HTMLElement).style.width).toBe("300px");
+      expect((img as HTMLElement).style.objectFit).toBe("contain");
+    }
+  });
+
+  it("applies height-only sizing to both images", () => {
+    const { getAllByAltText } = render(
+      <ImageComparisonComponent {...baseProps} height="300px" />,
+    );
+
+    for (const img of getAllByAltText(/Before|After/)) {
+      expect((img as HTMLElement).style.height).toBe("300px");
+      expect((img as HTMLElement).style.objectFit).toBe("contain");
+    }
+  });
+
+  it("treats empty-string dimensions as not provided", () => {
+    const { getAllByAltText } = render(
+      <ImageComparisonComponent {...baseProps} width="" height="" />,
+    );
+
+    for (const img of getAllByAltText(/Before|After/)) {
+      expect((img as HTMLElement).style.width).toBe("");
+      expect((img as HTMLElement).style.height).toBe("");
+    }
+  });
+
+  it("leaves images unstyled when no dimensions are given", () => {
+    const { getAllByAltText } = render(
+      <ImageComparisonComponent {...baseProps} />,
+    );
+
+    for (const img of getAllByAltText(/Before|After/)) {
+      // No explicit sizing: the slider keeps its intrinsic-size behavior.
+      expect((img as HTMLElement).style.width).toBe("");
+      expect((img as HTMLElement).style.height).toBe("");
+    }
+  });
 });

package/src/stories/theme.stories.tsx

@@ -4,11 +4,14 @@ import { python } from "@codemirror/lang-python";
 import { EditorState, type Extension } from "@codemirror/state";
 import { EditorView } from "@codemirror/view";
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
+import { ReadonlyCode } from "../components/editor/code/readonly-python-code";
 import { basicBundle, type CodeMirrorSetupOpts } from "../core/codemirror/cm";
+import { userConfigAtom } from "../core/config/config";
 import { darkTheme } from "../core/codemirror/theme/dark";
 import { lightTheme } from "../core/codemirror/theme/light";
 import { OverridingHotkeyProvider } from "../core/hotkeys/hotkeys";
+import { store } from "../core/state/jotai";
 
 // Partial config for storybook demo
 const demoConfig: Partial<CodeMirrorSetupOpts> = {
@@ -52,6 +55,11 @@ result = example.get_value()
 size = example.data_size
 `.trim();
 
+const READONLY_CONTENT = Array.from(
+  { length: 80 },
+  (_, index) => `value_${index + 1} = ${index + 1}`,
+).join("\n");
+
 const Editor = (opts: { extensions?: Extension[] }): React.ReactNode => {
   const ref = useRef<HTMLDivElement>(null);
   useEffect(() => {
@@ -110,3 +118,65 @@ export const ThemeComparison: Story = {
     </div>
   ),
 };
+
+const ReadonlyCodeThemeFixture = (): React.ReactNode => {
+  const [theme, setTheme] = useState<"light" | "dark">("light");
+  const [initialTheme] = useState(
+    () => store.get(userConfigAtom).display.theme,
+  );
+
+  useEffect(() => {
+    store.set(userConfigAtom, (config) => ({
+      ...config,
+      display: { ...config.display, theme },
+    }));
+  }, [theme]);
+
+  useEffect(() => {
+    // Leave Storybook's theme in the state it had before this fixture mounted.
+    return () => {
+      store.set(userConfigAtom, (config) => ({
+        ...config,
+        display: { ...config.display, theme: initialTheme },
+      }));
+    };
+  }, [initialTheme]);
+
+  return (
+    <div className="max-w-3xl space-y-3" style={{ colorScheme: theme }}>
+      <div className="flex items-center justify-between gap-4">
+        <div>
+          <h3 className="text-lg font-semibold">ReadonlyCode fixture</h3>
+          <p className="text-sm text-muted-foreground">
+            Select text, scroll, then switch themes to check that both remain.
+          </p>
+        </div>
+        <div className="flex gap-2" role="group" aria-label="Theme">
+          {(["light", "dark"] as const).map((nextTheme) => (
+            <button
+              aria-pressed={theme === nextTheme}
+              className="rounded border px-3 py-1 text-sm"
+              key={nextTheme}
+              onClick={() => setTheme(nextTheme)}
+              type="button"
+            >
+              {nextTheme}
+            </button>
+          ))}
+        </div>
+      </div>
+      <div className="h-64 overflow-hidden rounded border">
+        <ReadonlyCode
+          className="h-full [&_.cm-editor]:h-full [&_.cm-scroller]:h-full [&_.cm-theme-none]:h-full"
+          code={READONLY_CONTENT}
+          showCopyCode={false}
+          showHideCode={false}
+        />
+      </div>
+    </div>
+  );
+};
+
+export const ReadonlyCodeThemeReconfiguration: Story = {
+  render: () => <ReadonlyCodeThemeFixture />,
+};

package/dist/assets/ImageComparisonComponent-COvcNAUu.js

@@ -1 +0,0 @@
-import{s as A,t as C}from"./chunk-LvLJmgfZ.js";import{t as H}from"./react-Bj1aDYRI.js";import{t as j}from"./compiler-runtime-B3qBwwSJ.js";import{t as _}from"./jsx-runtime-Blw4afVn.js";var B=C((()=>{(()=>{var c={792:(o,a,i)=>{i.d(a,{Z:()=>h});var n=i(609),l=i.n(n)()((function(p){return p[1]}));l.push([o.id,':host{--divider-width: 1px;--divider-color: #fff;--divider-shadow: none;--default-handle-width: 50px;--default-handle-color: #fff;--default-handle-opacity: 1;--default-handle-shadow: none;--handle-position-start: 50%;position:relative;display:inline-block;overflow:hidden;line-height:0;direction:ltr}@media screen and (-webkit-min-device-pixel-ratio: 0)and (min-resolution: 0.001dpcm){:host{outline-offset:1px}}:host(:focus){outline:2px solid -webkit-focus-ring-color}::slotted(*){-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none;user-drag:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.first{position:absolute;left:0;top:0;right:0;line-height:normal;font-size:100%;max-height:100%;height:100%;width:100%;--exposure: 50%;--keyboard-transition-time: 0ms;--default-transition-time: 0ms;--transition-time: var(--default-transition-time)}.first .first-overlay-container{position:relative;clip-path:inset(0 var(--exposure) 0 0);transition:clip-path var(--transition-time);height:100%}.first .first-overlay{overflow:hidden;height:100%}.first.focused{will-change:clip-path}.first.focused .first-overlay-container{will-change:clip-path}.second{position:relative}.handle-container{transform:translateX(50%);position:absolute;top:0;right:var(--exposure);height:100%;transition:right var(--transition-time),bottom var(--transition-time)}.focused .handle-container{will-change:right}.divider{position:absolute;height:100%;width:100%;left:0;top:0;display:flex;align-items:center;justify-content:center;flex-direction:column}.divider:after{content:" ";display:block;height:100%;border-left-width:var(--divider-width);border-left-style:solid;border-left-color:var(--divider-color);box-shadow:var(--divider-shadow)}.handle{position:absolute;top:var(--handle-position-start);pointer-events:none;box-sizing:border-box;margin-left:1px;transform:translate(calc(-50% - 0.5px), -50%);line-height:0}.default-handle{width:var(--default-handle-width);opacity:var(--default-handle-opacity);transition:all 1s;filter:drop-shadow(var(--default-handle-shadow))}.default-handle path{stroke:var(--default-handle-color)}.vertical .first-overlay-container{clip-path:inset(0 0 var(--exposure) 0)}.vertical .handle-container{transform:translateY(50%);height:auto;top:unset;bottom:var(--exposure);width:100%;left:0;flex-direction:row}.vertical .divider:after{height:1px;width:100%;border-top-width:var(--divider-width);border-top-style:solid;border-top-color:var(--divider-color);border-left:0}.vertical .handle{top:auto;left:var(--handle-position-start);transform:translate(calc(-50% - 0.5px), -50%) rotate(90deg)}',""]);let h=l},609:o=>{o.exports=function(a){var i=[];return i.toString=function(){return this.map((function(n){var l=a(n);return n[2]?`@media ${n[2]} {${l}}`:l})).join("")},i.i=function(n,l,h){typeof n=="string"&&(n=[[null,n,""]]);var p={};if(h)for(var f=0;f<this.length;f++){var v=this[f][0];v!=null&&(p[v]=!0)}for(var e=0;e<n.length;e++){var r=[].concat(n[e]);h&&p[r[0]]||(l&&(r[2]?r[2]=`${l} and ${r[2]}`:r[2]=l),i.push(r))}},i}}},t={};function u(o){var a=t[o];if(a!==void 0)return a.exports;var i=t[o]={id:o,exports:{}};return c[o](i,i.exports,u),i.exports}u.n=o=>{var a=o&&o.__esModule?()=>o.default:()=>o;return u.d(a,{a}),a},u.d=(o,a)=>{for(var i in a)u.o(a,i)&&!u.o(o,i)&&Object.defineProperty(o,i,{enumerable:!0,get:a[i]})},u.o=(o,a)=>Object.prototype.hasOwnProperty.call(o,a),(()=>{var o=u(792);let a="rendered",i=(e,r)=>{let s=e.getBoundingClientRect(),d,m;return r.type==="mousedown"?(d=r.clientX,m=r.clientY):(d=r.touches[0].clientX,m=r.touches[0].clientY),d>=s.x&&d<=s.x+s.width&&m>=s.y&&m<=s.y+s.height},n,l={ArrowLeft:-1,ArrowRight:1},h=["horizontal","vertical"],p=e=>({x:e.touches[0].pageX,y:e.touches[0].pageY}),f=e=>({x:e.pageX,y:e.pageY}),v=typeof window<"u"&&(window==null?void 0:window.HTMLElement);typeof window<"u"&&(window.document&&(n=document.createElement("template"),n.innerHTML='<div class="second" id="second"> <slot name="second"><slot name="before"></slot></slot> </div> <div class="first" id="first"> <div class="first-overlay"> <div class="first-overlay-container" id="firstImageContainer"> <slot name="first"><slot name="after"></slot></slot> </div> </div> <div class="handle-container"> <div class="divider"></div> <div class="handle" id="handle"> <slot name="handle"> <svg xmlns="http://www.w3.org/2000/svg" class="default-handle" viewBox="-8 -3 16 6"> <path d="M -5 -2 L -7 0 L -5 2 M 5 -2 L 7 0 L 5 2" fill="none" vector-effect="non-scaling-stroke"/> </svg> </slot> </div> </div> </div> '),window.customElements.define("img-comparison-slider",class extends v{constructor(){super(),this.exposure=this.hasAttribute("value")?parseFloat(this.getAttribute("value")):50,this.slideOnHover=!1,this.slideDirection="horizontal",this.keyboard="enabled",this.isMouseDown=!1,this.animationDirection=0,this.isFocused=!1,this.dragByHandle=!1,this.onMouseMove=s=>{if(this.isMouseDown||this.slideOnHover){let d=f(s);this.slideToPage(d)}},this.bodyUserSelectStyle="",this.bodyWebkitUserSelectStyle="",this.onMouseDown=s=>{if(this.slideOnHover||this.handle&&!i(this.handleElement,s))return;s.preventDefault(),window.addEventListener("mousemove",this.onMouseMove),window.addEventListener("mouseup",this.onWindowMouseUp),this.isMouseDown=!0,this.enableTransition();let d=f(s);this.slideToPage(d),this.focus(),this.bodyUserSelectStyle=window.document.body.style.userSelect,this.bodyWebkitUserSelectStyle=window.document.body.style.webkitUserSelect,window.document.body.style.userSelect="none",window.document.body.style.webkitUserSelect="none"},this.onWindowMouseUp=()=>{this.isMouseDown=!1,window.document.body.style.userSelect=this.bodyUserSelectStyle,window.document.body.style.webkitUserSelect=this.bodyWebkitUserSelectStyle,window.removeEventListener("mousemove",this.onMouseMove),window.removeEventListener("mouseup",this.onWindowMouseUp)},this.touchStartPoint=null,this.isTouchComparing=!1,this.hasTouchMoved=!1,this.onTouchStart=s=>{this.dragByHandle&&!i(this.handleElement,s)||(this.touchStartPoint=p(s),this.isFocused&&(this.enableTransition(),this.slideToPage(this.touchStartPoint)))},this.onTouchMove=s=>{if(this.touchStartPoint===null)return;let d=p(s);if(this.isTouchComparing)return this.slideToPage(d),s.preventDefault(),!1;if(!this.hasTouchMoved){let m=Math.abs(d.y-this.touchStartPoint.y),g=Math.abs(d.x-this.touchStartPoint.x);if(this.slideDirection==="horizontal"&&m<g||this.slideDirection==="vertical"&&m>g)return this.isTouchComparing=!0,this.focus(),this.slideToPage(d),s.preventDefault(),!1;this.hasTouchMoved=!0}},this.onTouchEnd=()=>{this.isTouchComparing=!1,this.hasTouchMoved=!1,this.touchStartPoint=null},this.onBlur=()=>{this.stopSlideAnimation(),this.isFocused=!1,this.firstElement.classList.remove("focused")},this.onFocus=()=>{this.isFocused=!0,this.firstElement.classList.add("focused")},this.onKeyDown=s=>{if(this.keyboard==="disabled")return;let d=l[s.key];this.animationDirection!==d&&d!==void 0&&(this.animationDirection=d,this.startSlideAnimation())},this.onKeyUp=s=>{if(this.keyboard==="disabled")return;let d=l[s.key];d!==void 0&&this.animationDirection===d&&this.stopSlideAnimation()},this.resetDimensions=()=>{this.imageWidth=this.offsetWidth,this.imageHeight=this.offsetHeight};let e=this.attachShadow({mode:"open"}),r=document.createElement("style");r.innerHTML=o.Z,this.getAttribute("nonce")&&r.setAttribute("nonce",this.getAttribute("nonce")),e.appendChild(r),e.appendChild(n.content.cloneNode(!0)),this.firstElement=e.getElementById("first"),this.handleElement=e.getElementById("handle")}set handle(e){this.dragByHandle=e.toString().toLowerCase()!=="false"}get handle(){return this.dragByHandle}get value(){return this.exposure}set value(e){let r=parseFloat(e);r!==this.exposure&&(this.exposure=r,this.enableTransition(),this.setExposure())}get hover(){return this.slideOnHover}set hover(e){this.slideOnHover=e.toString().toLowerCase()!=="false",this.removeEventListener("mousemove",this.onMouseMove),this.slideOnHover&&this.addEventListener("mousemove",this.onMouseMove)}get direction(){return this.slideDirection}set direction(e){this.slideDirection=e.toString().toLowerCase(),this.slide(0),this.firstElement.classList.remove(...h),h.includes(this.slideDirection)&&this.firstElement.classList.add(this.slideDirection)}static get observedAttributes(){return["hover","direction"]}connectedCallback(){this.hasAttribute("tabindex")||(this.tabIndex=0),this.addEventListener("dragstart",(e=>(e.preventDefault(),!1))),new ResizeObserver(this.resetDimensions).observe(this),this.setExposure(0),this.keyboard=this.hasAttribute("keyboard")&&this.getAttribute("keyboard")==="disabled"?"disabled":"enabled",this.addEventListener("keydown",this.onKeyDown),this.addEventListener("keyup",this.onKeyUp),this.addEventListener("focus",this.onFocus),this.addEventListener("blur",this.onBlur),this.addEventListener("touchstart",this.onTouchStart,{passive:!0}),this.addEventListener("touchmove",this.onTouchMove,{passive:!1}),this.addEventListener("touchend",this.onTouchEnd),this.addEventListener("mousedown",this.onMouseDown),this.handle=this.hasAttribute("handle")?this.getAttribute("handle"):this.dragByHandle,this.hover=this.hasAttribute("hover")?this.getAttribute("hover"):this.slideOnHover,this.direction=this.hasAttribute("direction")?this.getAttribute("direction"):this.slideDirection,this.resetDimensions(),this.classList.contains(a)||this.classList.add(a)}disconnectedCallback(){this.transitionTimer&&window.clearTimeout(this.transitionTimer)}attributeChangedCallback(e,r,s){e==="hover"&&(this.hover=s),e==="direction"&&(this.direction=s),e==="keyboard"&&(this.keyboard=s==="disabled"?"disabled":"enabled")}setExposure(e=0){var r;this.exposure=(r=this.exposure+e)<0?0:r>100?100:r,this.firstElement.style.setProperty("--exposure",100-this.exposure+"%")}slide(e=0){this.setExposure(e);let r=new Event("slide");this.dispatchEvent(r)}slideToPage(e){this.slideDirection==="horizontal"&&this.slideToPageX(e.x),this.slideDirection==="vertical"&&this.slideToPageY(e.y)}slideToPageX(e){this.exposure=(e-this.getBoundingClientRect().left-window.scrollX)/this.imageWidth*100,this.slide(0)}slideToPageY(e){this.exposure=(e-this.getBoundingClientRect().top-window.scrollY)/this.imageHeight*100,this.slide(0)}enableTransition(){this.firstElement.style.setProperty("--transition-time","100ms"),this.transitionTimer=window.setTimeout((()=>{this.firstElement.style.setProperty("--transition-time","var(--default-transition-time)"),this.transitionTimer=null}),100)}startSlideAnimation(){let e=null,r=this.animationDirection;this.firstElement.style.setProperty("--transition-time","var(--keyboard-transition-time)");let s=d=>{if(this.animationDirection===0||r!==this.animationDirection)return;e===null&&(e=d);let m=(d-e)/16.666666666666668*this.animationDirection;this.slide(m),setTimeout((()=>window.requestAnimationFrame(s)),0),e=d};window.requestAnimationFrame(s)}stopSlideAnimation(){this.animationDirection=0,this.firstElement.style.setProperty("--transition-time","var(--default-transition-time)")}}))})()})()})),U=C((c=>{var t=c&&c.__createBinding||(Object.create?(function(i,n,l,h){h===void 0&&(h=l),Object.defineProperty(i,h,{enumerable:!0,get:function(){return n[l]}})}):(function(i,n,l,h){h===void 0&&(h=l),i[h]=n[l]})),u=c&&c.__setModuleDefault||(Object.create?(function(i,n){Object.defineProperty(i,"default",{enumerable:!0,value:n})}):function(i,n){i.default=n}),o=c&&c.__importStar||function(i){if(i&&i.__esModule)return i;var n={};if(i!=null)for(var l in i)l!=="default"&&Object.prototype.hasOwnProperty.call(i,l)&&t(n,i,l);return u(n,i),n};Object.defineProperty(c,"__esModule",{value:!0}),c.ImgComparisonSlider=void 0;var a=H();typeof document<"u"&&Promise.resolve().then(()=>o(B())),c.ImgComparisonSlider=(0,a.forwardRef)(({children:i,onSlide:n,value:l,className:h,...p},f)=>{let v=(0,a.useRef)();return(0,a.useEffect)(()=>{l!==void 0&&(v.current.value=parseFloat(l.toString()))},[l,v]),(0,a.useEffect)(()=>{n&&v.current.addEventListener("slide",n)},[]),(0,a.useImperativeHandle)(f,()=>v.current,[v]),(0,a.createElement)("img-comparison-slider",Object.assign({class:h?`${h} rendered`:"rendered",tabIndex:0,ref:v},p),i)})})),F=j(),z=U(),O=A(H(),1),D=A(_(),1);function W(c){return c.length>100?`${c.slice(0,100)}\u2026`:c}var I=c=>{let t=(0,F.c)(34),{beforeSrc:u,afterSrc:o,value:a,direction:i,width:n,height:l}=c,[h,p]=O.useState(X),f;t[0]===Symbol.for("react.memo_cache_sentinel")?(f=()=>{p(new Set)},t[0]=f):f=t[0];let v;t[1]!==o||t[2]!==u?(v=[u,o],t[1]=o,t[2]=u,t[3]=v):v=t[3],O.useEffect(f,v);let e;t[4]===Symbol.for("react.memo_cache_sentinel")?(e=M=>{p(E=>new Set(E).add(M))},t[4]=e):e=t[4];let r=e,s=n||"100%",d=l||(i==="vertical"?"400px":"auto"),m;t[5]!==s||t[6]!==d?(m={width:s,height:d,maxWidth:"100%",minHeight:"2rem"},t[5]=s,t[6]=d,t[7]=m):m=t[7];let g=m;if(h.size>0){let M=h.size>1?"images":"image",E;t[8]===h?E=t[9]:(E=[...h].map(Y),t[8]=h,t[9]=E);let P=E.join(", "),T;t[10]!==M||t[11]!==P?(T=(0,D.jsxs)("span",{children:["Failed to load ",M,":"," ",P]}),t[10]=M,t[11]=P,t[12]=T):T=t[12];let L;return t[13]!==g||t[14]!==T?(L=(0,D.jsx)("div",{style:g,className:"flex items-center justify-center rounded border border-destructive/40 bg-destructive/5 p-3 text-sm text-destructive",children:T}),t[13]=g,t[14]=T,t[15]=L):L=t[15],L}let w;t[16]===u?w=t[17]:(w=()=>r(u),t[16]=u,t[17]=w);let b;t[18]!==u||t[19]!==w?(b=(0,D.jsx)("img",{slot:"first",src:u,alt:"Before",width:"100%",onError:w}),t[18]=u,t[19]=w,t[20]=b):b=t[20];let y;t[21]===o?y=t[22]:(y=()=>r(o),t[21]=o,t[22]=y);let x;t[23]!==o||t[24]!==y?(x=(0,D.jsx)("img",{slot:"second",src:o,alt:"After",width:"100%",onError:y}),t[23]=o,t[24]=y,t[25]=x):x=t[25];let S;t[26]!==i||t[27]!==x||t[28]!==b||t[29]!==a?(S=(0,D.jsxs)(z.ImgComparisonSlider,{value:a,direction:i,children:[b,x]}),t[26]=i,t[27]=x,t[28]=b,t[29]=a,t[30]=S):S=t[30];let k;return t[31]!==g||t[32]!==S?(k=(0,D.jsx)("div",{style:g,children:S}),t[31]=g,t[32]=S,t[33]=k):k=t[33],k};function X(){return new Set}function Y(c){return`"${W(c)}"`}export{I as default};