@marimo-team/islands 0.23.15-dev7 → 0.23.15-dev72

package/src/plugins/impl/anywidget/__tests__/AnyWidgetPlugin.test.tsx

@@ -1,6 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { render, waitFor } from "@testing-library/react";
+import { act, render, waitFor } from "@testing-library/react";
+import { Provider, createStore } from "jotai";
 import {
   afterEach,
   beforeEach,
@@ -10,6 +11,7 @@ import {
   type MockInstance,
   vi,
 } from "vitest";
+import { islandsPendingInitialRunsAtom } from "@/core/islands/state";
 import type { IPluginProps } from "@/plugins/types";
 import { visibleForTesting } from "../AnyWidgetPlugin";
 import { Model } from "../model";
@@ -88,6 +90,29 @@ describe("AnyWidgetSlot", () => {
     });
   });
 
+  it("waits for islands hydration before resolving the model", async () => {
+    const islandsStore = createStore();
+    islandsStore.set(islandsPendingInitialRunsAtom, new Set([1]));
+    const createViewSpy = vi.spyOn(WIDGET_REGISTRY, "createView");
+
+    render(
+      <Provider store={islandsStore}>
+        <AnyWidgetSlot {...props(modelId)} />
+      </Provider>,
+    );
+
+    expect(createViewSpy).not.toHaveBeenCalled();
+
+    act(() => {
+      islandsStore.set(islandsPendingInitialRunsAtom, new Set());
+    });
+
+    await waitFor(() => {
+      expect(createViewSpy).toHaveBeenCalledOnce();
+    });
+    createViewSpy.mockRestore();
+  });
+
   it("aborts the runtime-owned view on unmount", async () => {
     const { unmount } = render(<AnyWidgetSlot {...props(modelId)} />);
     await waitFor(() => {

package/src/plugins/impl/anywidget/__tests__/host.test.ts

@@ -277,25 +277,22 @@ describe("WidgetBinding receives a host in render props", () => {
   });
 });
 
-describe("host-mounted views hydrate like display-mounted ones", () => {
-  it("replays current state to a child's render listeners", async () => {
-    const childId = asModelId("host-hydration-child");
+describe("host-mounted views", () => {
+  it("render with the child's current model state", async () => {
+    const childId = asModelId("host-child-state");
     const parentController = new AbortController();
     const getModuleSpy = vi.spyOn(WIDGET_DEF_REGISTRY, "getModule");
     try {
       const childWidget = {
         render: vi.fn(({ model, el }) => {
-          el.textContent = "count is 5";
-          model.on("change:count", () => {
-            el.textContent = `count is ${model.get("count")}`;
-          });
+          el.textContent = `count is ${model.get("count")}`;
         }),
       };
       const childModel = new Model<ModelState>({ count: 8 }, createMockComm());
       WIDGET_REGISTRY.setModel(childId, childModel);
       WIDGET_REGISTRY.setSpec(childId, {
-        url: "./@file/10-host-hydration-child.js",
-        hash: "hash-host-hydration-child",
+        url: "./@file/10-host-child-state.js",
+        hash: "hash-host-child-state",
       });
       getModuleSpy.mockResolvedValue({ default: childWidget });
 

package/src/plugins/impl/anywidget/__tests__/registry.test.ts

@@ -210,7 +210,7 @@ describe("WidgetRegistry.getWidget", () => {
   });
 
   afterEach(() => {
-    getModuleSpy.mockRestore();
+    vi.restoreAllMocks();
   });
 
   it("binds an undisplayed widget from its ESM spec", async () => {
@@ -309,6 +309,7 @@ describe("WidgetRegistry.getWidget", () => {
   });
 
   it("rejects with the AFM error when the module has no usable exports", async () => {
+    const invalidateSpy = vi.spyOn(WIDGET_DEF_REGISTRY, "invalidate");
     getModuleSpy.mockResolvedValue({ notAWidget: true });
 
     const model = new Model<ModelState>({ count: 0 }, createMockComm());
@@ -318,6 +319,7 @@ describe("WidgetRegistry.getWidget", () => {
     await expect(registry.getWidget(testId)).rejects.toThrow(
       /missing a default export/,
     );
+    expect(invalidateSpy).toHaveBeenCalledWith(SPEC.hash);
   });
 
   it("rejects when the model never arrives", async () => {

package/src/plugins/impl/anywidget/__tests__/widget-binding.test.ts

@@ -95,6 +95,16 @@ describe("WidgetDefRegistry", () => {
     promise1.catch(() => undefined);
   });
 
+  it("should retry a new URL after invalidating the same hash", () => {
+    const promise1 = getModule(registry, "http://localhost/a.js", "same-hash");
+    registry.invalidate("same-hash");
+    const promise2 = getModule(registry, "http://localhost/b.js", "same-hash");
+
+    expect(promise1).not.toBe(promise2);
+    promise1.catch(() => undefined);
+    promise2.catch(() => undefined);
+  });
+
   it("should create different promises for different hashes", () => {
     const promise1 = getModule(registry, "http://localhost/a.js", "hash-a");
     const promise2 = getModule(registry, "http://localhost/b.js", "hash-b");
@@ -337,13 +347,12 @@ describe("WidgetBinding", () => {
       { el: document.createElement("div") },
       { signal: controller.signal },
     );
-    // Called once by the hydration replay at mount, once by the set.
     model.set("count", 1);
-    expect(onCount).toHaveBeenCalledTimes(2);
+    expect(onCount).toHaveBeenCalledTimes(1);
 
     controller.abort();
     model.set("count", 2);
-    expect(onCount).toHaveBeenCalledTimes(2);
+    expect(onCount).toHaveBeenCalledTimes(1);
   });
 
   it("should auto-clear initialize listeners on destroy", async () => {
@@ -366,92 +375,54 @@ describe("WidgetBinding", () => {
   });
 });
 
-describe("WidgetBinding hydration replay", () => {
-  it("replays current state to render listeners exactly once", async () => {
+describe("WidgetBinding render listeners", () => {
+  it("fire only for changes after mount, never for pre-existing state", async () => {
     const model = new Model<ModelState>({ count: 8 }, createMockComm());
-    const el = document.createElement("div");
-    const widgetDef = {
-      render: vi.fn(({ model, el }) => {
-        // A widget view that starts with a local default and relies on
-        // change events for hydration.
-        el.textContent = "count is 5";
-        model.on("change:count", () => {
-          el.textContent = `count is ${model.get("count")}`;
-        });
-      }),
-    };
-    const binding = await createBinding(widgetDef, model);
-
-    const controller = new AbortController();
-    await binding.createView({ el }, { signal: controller.signal });
-    expect(el.textContent).toBe("count is 8");
-  });
-
-  it("does not re-fire listeners of already-mounted views", async () => {
-    // Mounting view B must not double-paint view A: the replay is
-    // scoped to the listeners the new render attached.
-    const model = new Model<ModelState>({ count: 0 }, createMockComm());
-    const listeners: Array<ReturnType<typeof vi.fn>> = [];
+    const onCount = vi.fn();
+    const onAnyChange = vi.fn();
     const widgetDef = {
       render: vi.fn(({ model }) => {
-        const listener = vi.fn();
-        listeners.push(listener);
-        model.on("change:count", listener);
+        model.on("change:count", onCount);
+        model.on("change", onAnyChange);
       }),
     };
     const binding = await createBinding(widgetDef, model);
     const controller = new AbortController();
-
     await binding.createView(
       { el: document.createElement("div") },
       { signal: controller.signal },
     );
-    expect(listeners[0]).toHaveBeenCalledTimes(1);
+    expect(onCount).not.toHaveBeenCalled();
+    expect(onAnyChange).not.toHaveBeenCalled();
 
-    await binding.createView(
-      { el: document.createElement("div") },
-      { signal: controller.signal },
-    );
-    // View B's listener hydrated once; view A's was left alone.
-    expect(listeners[1]).toHaveBeenCalledTimes(1);
-    expect(listeners[0]).toHaveBeenCalledTimes(1);
+    model.set("count", 9);
+    expect(onCount).toHaveBeenCalledTimes(1);
+    expect(onCount).toHaveBeenCalledWith(9);
   });
 
-  it("replays the any-change event to its listeners", async () => {
-    const model = new Model<ModelState>({ count: 1 }, createMockComm());
-    const onAnyChange = vi.fn();
+  it("mounting a second view does not fire the first view's listeners", async () => {
+    const model = new Model<ModelState>({ count: 0 }, createMockComm());
+    const listeners: Array<ReturnType<typeof vi.fn>> = [];
     const widgetDef = {
       render: vi.fn(({ model }) => {
-        model.on("change", onAnyChange);
+        const listener = vi.fn();
+        listeners.push(listener);
+        model.on("change:count", listener);
       }),
     };
     const binding = await createBinding(widgetDef, model);
     const controller = new AbortController();
+
     await binding.createView(
       { el: document.createElement("div") },
       { signal: controller.signal },
     );
-    expect(onAnyChange).toHaveBeenCalledTimes(1);
-  });
-
-  it("does not replay initialize listeners", async () => {
-    // The guarantee is per-view: initialize listeners existed before
-    // any view, and replaying at them would fire once per mount.
-    const model = new Model<ModelState>({ count: 1 }, createMockComm());
-    const initListener = vi.fn();
-    const widgetDef = {
-      initialize: vi.fn(({ model }) => {
-        model.on("change:count", initListener);
-      }),
-      render: vi.fn(),
-    };
-    const binding = await createBinding(widgetDef, model);
-    const controller = new AbortController();
     await binding.createView(
       { el: document.createElement("div") },
       { signal: controller.signal },
     );
-    expect(initListener).not.toHaveBeenCalled();
+    expect(listeners[0]).not.toHaveBeenCalled();
+    expect(listeners[1]).not.toHaveBeenCalled();
   });
 
   it("clears the element before rendering into it", async () => {

package/src/plugins/impl/anywidget/model-proxy.ts

@@ -5,15 +5,6 @@ import type { ModelState } from "./types";
 
 type ModelEventCallback = Parameters<AnyModel<ModelState>["on"]>[1];
 
-/**
- * A listener registered through a model proxy (see the hydration
- * replay in `WidgetBinding.createView`).
- */
-export interface ProxyRegistration {
-  event: string;
-  callback: ModelEventCallback;
-}
-
 /**
  * Wrap a model so every `on()` call from inside `initialize` or `render`
  * is auto-tied to a lifetime `AbortSignal`. When the signal aborts,
@@ -27,14 +18,11 @@ export interface ProxyRegistration {
  * The proxy is purely a host-side ergonomic helper. The widget author
  * still writes `model.on("change:foo", handler)` exactly as before; the
  * cleanup signal is supplied transparently.
- *
- * `onRegister`, when given, observes each `on()` registration.
  */
 // oxlint-disable-next-line marimo/prefer-object-params -- concise internal helper used at protocol call sites
 export function modelProxy<T extends ModelState>(
   model: AnyModel<T>,
   signal: AbortSignal,
-  onRegister?: (registration: ProxyRegistration) => void,
 ): AnyModel<T> {
   return {
     get(key) {
@@ -55,7 +43,6 @@ export function modelProxy<T extends ModelState>(
       signal.addEventListener("abort", () => model.off(name, callback), {
         once: true,
       });
-      onRegister?.({ event: name, callback });
     },
     off(name?: string | null, callback?: ModelEventCallback | null): void {
       model.off(name ?? null, callback ?? null);

package/src/plugins/impl/anywidget/runtime.ts

@@ -211,6 +211,7 @@ export class WidgetRuntime {
     });
     const widget = resolveAnyWidget(mod, spec.url);
     if (!widget) {
+      WIDGET_DEF_REGISTRY.invalidate(spec.hash);
       throw getInvalidAnyWidgetModuleError(mod, spec.url);
     }
     return WidgetBinding.create({

package/src/plugins/impl/anywidget/widget-binding.ts

@@ -12,7 +12,7 @@ import { isTrustedVirtualFileUrl } from "@/plugins/core/trusted-url";
 import { Logger } from "@/utils/Logger";
 import type { Host } from "./host";
 import type { Model } from "./model";
-import { modelProxy, type ProxyRegistration } from "./model-proxy";
+import { modelProxy } from "./model-proxy";
 import type { ModelState } from "./types";
 
 export const experimental: Experimental = {
@@ -80,6 +80,10 @@ class WidgetDefRegistry {
     return promise;
   }
 
+  invalidate(jsHash: string): void {
+    this.#cache.delete(jsHash);
+  }
+
   async #doImport(
     jsUrl: string,
     opts: { kernelAuthored?: boolean } = {},
@@ -266,9 +270,8 @@ export class WidgetBinding<T extends ModelState = ModelState> {
    * when the caller's `signal` fires or the binding is destroyed, and
    * listeners registered inside `render` auto-clear on abort.
    *
-   * Hydration guarantee: listeners attached during `render` observe
-   * current model state exactly once, after `render` settles. Scoped
-   * to this view's listeners; re-firing at other views double-paints.
+   * `render` reads current state via `model.get`; change listeners
+   * observe only subsequent changes, matching Jupyter semantics.
    */
   async createView(
     target: { el: HTMLElement },
@@ -305,11 +308,8 @@ export class WidgetBinding<T extends ModelState = ModelState> {
     // Each view gets a host scoped to its own signal so child views tear
     // down with this view.
     const host = this.#createHost(renderSignal);
-    const registrations: ProxyRegistration[] = [];
     const renderCleanup = await widget.render({
-      model: modelProxy(this.#model, renderSignal, (registration) =>
-        registrations.push(registration),
-      ),
+      model: modelProxy(this.#model, renderSignal),
       el: target.el,
       experimental,
       signal: renderSignal,
@@ -333,7 +333,6 @@ export class WidgetBinding<T extends ModelState = ModelState> {
         once: true,
       });
     }
-    this.#replayState(registrations, renderSignal);
   }
 
   #trackCleanup(cleanup: Cleanup, reason: string): Promise<void> {
@@ -343,31 +342,6 @@ export class WidgetBinding<T extends ModelState = ModelState> {
     return task;
   }
 
-  /**
-   * The hydration guarantee documented on `createView`.
-   */
-  #replayState(
-    registrations: readonly ProxyRegistration[],
-    renderSignal: AbortSignal,
-  ): void {
-    const changePrefix = "change:";
-    for (const { event, callback } of registrations) {
-      if (renderSignal.aborted) {
-        return;
-      }
-      try {
-        if (event.startsWith(changePrefix)) {
-          const key = event.slice(changePrefix.length);
-          callback(this.#model.get(key));
-        } else if (event === "change") {
-          callback();
-        }
-      } catch (error) {
-        Logger.error("[WidgetBinding] Error replaying state", error);
-      }
-    }
-  }
-
   /**
    * Destroy this generation, running initialize/render cleanups and
    * clearing listeners registered through its model proxies.

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

@@ -12,6 +12,13 @@ export interface ImageComparisonData {
   height?: string;
 }
 
+// Truncate long sources (e.g. base64 data URLs) so error messages stay
+// readable.
+function truncateSrc(src: string): string {
+  const MAX_LENGTH = 100;
+  return src.length > MAX_LENGTH ? `${src.slice(0, MAX_LENGTH)}…` : src;
+}
+
 const ImageComparisonComponent: React.FC<ImageComparisonData> = ({
   beforeSrc,
   afterSrc,
@@ -20,17 +27,61 @@ const ImageComparisonComponent: React.FC<ImageComparisonData> = ({
   width,
   height,
 }) => {
+  const [failedSrcs, setFailedSrcs] = React.useState<ReadonlySet<string>>(
+    () => new Set(),
+  );
+
+  React.useEffect(() => {
+    setFailedSrcs(new Set());
+  }, [beforeSrc, afterSrc]);
+
+  const handleError = React.useCallback((src: string) => {
+    setFailedSrcs((prev) => new Set(prev).add(src));
+  }, []);
+
   const containerStyle: React.CSSProperties = {
     width: width || "100%",
     height: height || (direction === "vertical" ? "400px" : "auto"),
     maxWidth: "100%",
+    // The slider derives its height entirely from its (loaded) images, so a
+    // broken/slow-loading source would otherwise collapse it to nothing and
+    // render an empty output. Keep a minimum height so it stays visible.
+    minHeight: "2rem",
   };
 
+  // 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) {
+    return (
+      <div
+        style={containerStyle}
+        className="flex items-center justify-center rounded border border-destructive/40 bg-destructive/5 p-3 text-sm text-destructive"
+      >
+        <span>
+          Failed to load {failedSrcs.size > 1 ? "images" : "image"}:{" "}
+          {[...failedSrcs].map((src) => `"${truncateSrc(src)}"`).join(", ")}
+        </span>
+      </div>
+    );
+  }
+
   return (
     <div style={containerStyle}>
       <ImgComparisonSlider value={value} direction={direction}>
-        <img slot="first" src={beforeSrc} alt="Before" width="100%" />
-        <img slot="second" src={afterSrc} alt="After" width="100%" />
+        <img
+          slot="first"
+          src={beforeSrc}
+          alt="Before"
+          width="100%"
+          onError={() => handleError(beforeSrc)}
+        />
+        <img
+          slot="second"
+          src={afterSrc}
+          alt="After"
+          width="100%"
+          onError={() => handleError(afterSrc)}
+        />
       </ImgComparisonSlider>
     </div>
   );

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

@@ -0,0 +1,71 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import ImageComparisonComponent from "../ImageComparisonComponent";
+
+const baseProps = {
+  beforeSrc: "before.png",
+  afterSrc: "after.png",
+  value: 50,
+  direction: "horizontal" as const,
+};
+
+describe("ImageComparisonComponent", () => {
+  it("renders the comparison slider with both images", () => {
+    const { getByAltText, container } = render(
+      <ImageComparisonComponent {...baseProps} />,
+    );
+    expect(getByAltText("Before")).toBeTruthy();
+    expect(getByAltText("After")).toBeTruthy();
+    expect(container.querySelector("img-comparison-slider")).toBeTruthy();
+  });
+
+  it("shows a visible error instead of collapsing when an image fails to load", () => {
+    const brokenSrc = "https://example.com/does-not-exist.png";
+    const { getByAltText, queryByText, container } = render(
+      <ImageComparisonComponent {...baseProps} beforeSrc={brokenSrc} />,
+    );
+
+    // No error before the image fails.
+    expect(queryByText(/Failed to load/)).toBeNull();
+
+    fireEvent.error(getByAltText("Before"));
+
+    // The slider is replaced with a visible error mentioning the source, so
+    // the output is never a silent blank.
+    expect(container.querySelector("img-comparison-slider")).toBeNull();
+    const error = queryByText(/Failed to load image/);
+    expect(error).toBeTruthy();
+    expect(error?.textContent).toContain(brokenSrc);
+  });
+
+  it("clears the error when the sources change so new images can load", () => {
+    const brokenSrc = "https://example.com/does-not-exist.png";
+    const { getByAltText, queryByText, container, rerender } = render(
+      <ImageComparisonComponent {...baseProps} beforeSrc={brokenSrc} />,
+    );
+
+    fireEvent.error(getByAltText("Before"));
+    expect(queryByText(/Failed to load/)).toBeTruthy();
+
+    // Re-render with a new source (e.g. the user fixed the notebook): the error
+    // should clear and the slider should mount again rather than stay stuck.
+    rerender(<ImageComparisonComponent {...baseProps} beforeSrc="fixed.png" />);
+    expect(queryByText(/Failed to load/)).toBeNull();
+    expect(container.querySelector("img-comparison-slider")).toBeTruthy();
+  });
+
+  it("truncates long sources (e.g. data URLs) in the error message", () => {
+    const longSrc = `data:image/png;base64,${"A".repeat(200)}`;
+    const { getByAltText, queryByText } = render(
+      <ImageComparisonComponent {...baseProps} afterSrc={longSrc} />,
+    );
+
+    fireEvent.error(getByAltText("After"));
+
+    const error = queryByText(/Failed to load image/);
+    expect(error?.textContent).toContain("…");
+    expect(error?.textContent).not.toContain("A".repeat(200));
+  });
+});

package/src/plugins/impl/vega/__tests__/use-vega-container-remeasure.test.ts

@@ -0,0 +1,102 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { renderHook } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useRef } from "react";
+import { useVegaContainerRemeasure } from "../use-vega-container-remeasure";
+
+describe("useVegaContainerRemeasure", () => {
+  let observers: FakeResizeObserver[];
+  let OriginalResizeObserver: typeof ResizeObserver;
+
+  class FakeResizeObserver {
+    callback: ResizeObserverCallback;
+    el: Element | null = null;
+
+    constructor(callback: ResizeObserverCallback) {
+      this.callback = callback;
+      observers.push(this);
+    }
+
+    observe(el: Element) {
+      this.el = el;
+    }
+
+    disconnect() {
+      this.el = null;
+    }
+
+    unobserve() {
+      this.el = null;
+    }
+
+    trigger(width: number) {
+      this.callback(
+        [
+          {
+            target: this.el!,
+            contentRect: {
+              width,
+              height: 100,
+              x: 0,
+              y: 0,
+              top: 0,
+              left: 0,
+              bottom: 100,
+              right: width,
+              toJSON: () => ({}),
+            },
+            borderBoxSize: [],
+            contentBoxSize: [],
+            devicePixelContentBoxSize: [],
+          } satisfies ResizeObserverEntry,
+        ],
+        this,
+      );
+    }
+  }
+
+  beforeEach(() => {
+    observers = [];
+    OriginalResizeObserver = globalThis.ResizeObserver;
+    globalThis.ResizeObserver =
+      FakeResizeObserver as unknown as typeof ResizeObserver;
+    vi.stubGlobal("requestAnimationFrame", (cb: FrameRequestCallback) => {
+      cb(0);
+      return 0;
+    });
+  });
+
+  afterEach(() => {
+    globalThis.ResizeObserver = OriginalResizeObserver;
+    vi.unstubAllGlobals();
+  });
+
+  it("dispatches window resize when the container gains width", () => {
+    const el = document.createElement("div");
+    Object.defineProperty(el, "clientWidth", { value: 0, configurable: true });
+    const dispatchSpy = vi.spyOn(window, "dispatchEvent");
+
+    renderHook(() => {
+      const ref = useRef<HTMLDivElement>(el);
+      useVegaContainerRemeasure(ref, true);
+    });
+
+    expect(observers).toHaveLength(1);
+    observers[0].trigger(0);
+    expect(dispatchSpy).not.toHaveBeenCalled();
+
+    observers[0].trigger(640);
+    expect(dispatchSpy).toHaveBeenCalledWith(expect.any(Event));
+    expect(dispatchSpy.mock.calls[0][0].type).toBe("resize");
+  });
+
+  it("is a no-op when disabled", () => {
+    const el = document.createElement("div");
+    renderHook(() => {
+      const ref = useRef<HTMLDivElement>(el);
+      useVegaContainerRemeasure(ref, false);
+    });
+    expect(observers).toHaveLength(0);
+  });
+});

package/src/plugins/impl/vega/use-vega-container-remeasure.ts

@@ -0,0 +1,39 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { type RefObject, useEffect } from "react";
+
+/**
+ * Vega-Lite's width:"container" only remeasures on window.resize — not when a
+ * parent goes from display:none / zero-size to a real layout size. Observe the
+ * embed host and dispatch the event Vega already listens for when the container
+ * gains a positive width.
+ */
+export function useVegaContainerRemeasure(
+  ref: RefObject<HTMLElement | null>,
+  enabled: boolean,
+): void {
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || !enabled || typeof ResizeObserver === "undefined") {
+      return;
+    }
+
+    let lastWidth = el.clientWidth;
+    const observer = new ResizeObserver((entries) => {
+      const width = entries[0]?.contentRect.width ?? 0;
+      if (width <= 0) {
+        lastWidth = 0;
+        return;
+      }
+      if (Math.round(width) === Math.round(lastWidth)) {
+        return;
+      }
+      lastWidth = width;
+      requestAnimationFrame(() => {
+        window.dispatchEvent(new Event("resize"));
+      });
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [ref, enabled]);
+}