@taskon/widget-react 0.0.1 → 0.0.2

package/dist/chunks/{WidgetShell-NlOgn1x5.js → ThemeProvider-CulHkqqY.js}

@@ -1,9 +1,862 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
-import { useState, useEffect, useMemo } from "react";
-import { m as useLayoutEffect2, j as useCallbackRef$1, e as useComposedRefs, P as Primitive, g as useControllableState, d as createContextScope, h as Presence, k as Portal$1, i as composeEventHandlers, f as createSlot, D as DismissableLayer, o as createContext2, b as useTaskOnContext, T as ThemeProvider } from "./ThemeProvider-Cs8IUVQj.js";
-import { createWidgetApi, parseWidgetConfig } from "@taskon/core";
-import '../WidgetShell.css';var useReactId = React[" useId ".trim().toString()] || (() => void 0);
+import { createContext, useContext, useMemo, useState, useRef, useEffect } from "react";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import * as ReactDOM from "react-dom";
+import ReactDOM__default from "react-dom";
+import '../ThemeProvider.css';const ThemeContext = createContext(null);
+const ThemePortalContainerContext = createContext(void 0);
+function useTaskOnTheme() {
+  const theme = useContext(ThemeContext);
+  if (!theme) {
+    throw new Error("useTaskOnTheme must be used within a ThemeProvider");
+  }
+  return theme;
+}
+function useTaskOnPortalContainer() {
+  const container = useContext(ThemePortalContainerContext);
+  if (container !== void 0) {
+    return container;
+  }
+  if (typeof document !== "undefined") {
+    return document.body;
+  }
+  return null;
+}
+const TaskOnContext = createContext(null);
+function useTaskOnContext() {
+  const context = useContext(TaskOnContext);
+  if (!context) {
+    throw new Error("useTaskOnContext must be used within a TaskOnProvider");
+  }
+  return context;
+}
+function useTaskOnAuth() {
+  const context = useTaskOnContext();
+  return useMemo(
+    () => ({
+      // User state
+      userId: context.userId,
+      isLoggedIn: context.isLoggedIn,
+      isInitializing: context.isInitializing,
+      isSessionReady: context.isSessionReady,
+      // Unified login
+      login: context.login,
+      // Logout
+      logout: context.logout,
+      // Request login (triggers config.onRequestLogin)
+      requestLogin: context.requestLogin
+    }),
+    [
+      context.userId,
+      context.isLoggedIn,
+      context.isInitializing,
+      context.isSessionReady,
+      context.login,
+      context.logout,
+      context.requestLogin
+    ]
+  );
+}
+function isSupportedLocale(locale) {
+  return locale === "en" || locale === "ko" || locale === "ja" || locale === "ru" || locale === "es";
+}
+function warnUnsupportedLocale(locale, widgetId) {
+  if (process.env.NODE_ENV !== "production" && !isSupportedLocale(locale)) {
+    console.warn(
+      `[widget-react] Locale "${locale}" is not fully supported in ${widgetId}. Falling back to English. Supported locales: en, ko, ja, ru, es`
+    );
+  }
+}
+const localeCache = /* @__PURE__ */ new Map();
+const DEFAULT_LOCALE = "en";
+function useWidgetLocale(options) {
+  const { widgetId, defaultMessages, loadMessages } = options;
+  const { locale } = useTaskOnContext();
+  const getInitialState = () => {
+    if (locale === DEFAULT_LOCALE) {
+      return { messages: defaultMessages, isLoading: false };
+    }
+    const cacheKey = `${widgetId}-${locale}`;
+    if (localeCache.has(cacheKey)) {
+      return { messages: localeCache.get(cacheKey), isLoading: false };
+    }
+    return { messages: defaultMessages, isLoading: true };
+  };
+  const [state, setState] = useState(getInitialState);
+  const loadMessagesRef = useRef(loadMessages);
+  loadMessagesRef.current = loadMessages;
+  const defaultMessagesRef = useRef(defaultMessages);
+  defaultMessagesRef.current = defaultMessages;
+  useEffect(() => {
+    if (locale === DEFAULT_LOCALE) {
+      setState({ messages: defaultMessagesRef.current, isLoading: false });
+      return;
+    }
+    warnUnsupportedLocale(locale, widgetId);
+    const cacheKey = `${widgetId}-${locale}`;
+    if (localeCache.has(cacheKey)) {
+      setState({ messages: localeCache.get(cacheKey), isLoading: false });
+      return;
+    }
+    let isMounted = true;
+    setState((prev) => ({ ...prev, isLoading: true }));
+    loadMessagesRef.current(locale).then((module) => {
+      if (isMounted) {
+        const loadedMessages = module.default;
+        localeCache.set(cacheKey, loadedMessages);
+        setState({ messages: loadedMessages, isLoading: false });
+      }
+    }).catch((error) => {
+      console.warn(
+        `[widget-react] Failed to load locale "${locale}" for ${widgetId}, falling back to English:`,
+        error
+      );
+      if (isMounted) {
+        setState({ messages: defaultMessagesRef.current, isLoading: false });
+      }
+    });
+    return () => {
+      isMounted = false;
+    };
+  }, [locale, widgetId]);
+  return state;
+}
+function clearLocaleCache() {
+  localeCache.clear();
+}
+async function preloadWidgetLocale(widgetId, locale, loadMessages) {
+  if (locale === DEFAULT_LOCALE) return;
+  const cacheKey = `${widgetId}-${locale}`;
+  if (localeCache.has(cacheKey)) return;
+  try {
+    const module = await loadMessages(locale);
+    localeCache.set(cacheKey, module.default);
+  } catch (error) {
+    console.warn(
+      `[widget-react] Failed to preload locale "${locale}" for ${widgetId}:`,
+      error
+    );
+  }
+}
+function interpolate(template, params) {
+  if (!params) {
+    return template;
+  }
+  return template.replace(/\{(\w+)\}/g, (match, key) => {
+    const value = params[key];
+    if (value === void 0) {
+      return match;
+    }
+    return String(value);
+  });
+}
+function createT(messages) {
+  return (key, params) => {
+    const template = messages[key];
+    if (typeof template !== "string") {
+      if (process.env.NODE_ENV !== "production") {
+        console.warn(`[widget-react] Missing translation key: ${String(key)}`);
+      }
+      return String(key);
+    }
+    return interpolate(template, params);
+  };
+}
+function createTFunction(messages) {
+  return (key, params) => {
+    const template = messages[key];
+    if (typeof template !== "string") {
+      if (process.env.NODE_ENV !== "production") {
+        console.warn(`[widget-react] Missing translation key: ${String(key)}`);
+      }
+      return String(key);
+    }
+    return interpolate(template, params);
+  };
+}
+function useTranslation(options) {
+  const { messages, isLoading } = useWidgetLocale(options);
+  const t = useMemo(() => createTFunction(messages), [messages]);
+  return {
+    t,
+    messages,
+    isLoading
+  };
+}
+function createLocaleLoader(defaultMessages, imports) {
+  return (locale) => {
+    if (locale === "en") {
+      return Promise.resolve({ default: defaultMessages });
+    }
+    const importFn = imports[locale];
+    if (importFn) {
+      return importFn();
+    }
+    return Promise.resolve({ default: defaultMessages });
+  };
+}
+function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
+  return function handleEvent(event) {
+    originalEventHandler == null ? void 0 : originalEventHandler(event);
+    if (checkForDefaultPrevented === false || !event.defaultPrevented) {
+      return ourEventHandler == null ? void 0 : ourEventHandler(event);
+    }
+  };
+}
+function setRef(ref, value) {
+  if (typeof ref === "function") {
+    return ref(value);
+  } else if (ref !== null && ref !== void 0) {
+    ref.current = value;
+  }
+}
+function composeRefs(...refs) {
+  return (node) => {
+    let hasCleanup = false;
+    const cleanups = refs.map((ref) => {
+      const cleanup = setRef(ref, node);
+      if (!hasCleanup && typeof cleanup == "function") {
+        hasCleanup = true;
+      }
+      return cleanup;
+    });
+    if (hasCleanup) {
+      return () => {
+        for (let i = 0; i < cleanups.length; i++) {
+          const cleanup = cleanups[i];
+          if (typeof cleanup == "function") {
+            cleanup();
+          } else {
+            setRef(refs[i], null);
+          }
+        }
+      };
+    }
+  };
+}
+function useComposedRefs(...refs) {
+  return React.useCallback(composeRefs(...refs), refs);
+}
+function createContext2(rootComponentName, defaultContext) {
+  const Context = React.createContext(defaultContext);
+  const Provider = (props) => {
+    const { children, ...context } = props;
+    const value = React.useMemo(() => context, Object.values(context));
+    return /* @__PURE__ */ jsx(Context.Provider, { value, children });
+  };
+  Provider.displayName = rootComponentName + "Provider";
+  function useContext2(consumerName) {
+    const context = React.useContext(Context);
+    if (context) return context;
+    if (defaultContext !== void 0) return defaultContext;
+    throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
+  }
+  return [Provider, useContext2];
+}
+function createContextScope(scopeName, createContextScopeDeps = []) {
+  let defaultContexts = [];
+  function createContext3(rootComponentName, defaultContext) {
+    const BaseContext = React.createContext(defaultContext);
+    const index = defaultContexts.length;
+    defaultContexts = [...defaultContexts, defaultContext];
+    const Provider = (props) => {
+      var _a;
+      const { scope, children, ...context } = props;
+      const Context = ((_a = scope == null ? void 0 : scope[scopeName]) == null ? void 0 : _a[index]) || BaseContext;
+      const value = React.useMemo(() => context, Object.values(context));
+      return /* @__PURE__ */ jsx(Context.Provider, { value, children });
+    };
+    Provider.displayName = rootComponentName + "Provider";
+    function useContext2(consumerName, scope) {
+      var _a;
+      const Context = ((_a = scope == null ? void 0 : scope[scopeName]) == null ? void 0 : _a[index]) || BaseContext;
+      const context = React.useContext(Context);
+      if (context) return context;
+      if (defaultContext !== void 0) return defaultContext;
+      throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
+    }
+    return [Provider, useContext2];
+  }
+  const createScope = () => {
+    const scopeContexts = defaultContexts.map((defaultContext) => {
+      return React.createContext(defaultContext);
+    });
+    return function useScope(scope) {
+      const contexts = (scope == null ? void 0 : scope[scopeName]) || scopeContexts;
+      return React.useMemo(
+        () => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }),
+        [scope, contexts]
+      );
+    };
+  };
+  createScope.scopeName = scopeName;
+  return [createContext3, composeContextScopes(createScope, ...createContextScopeDeps)];
+}
+function composeContextScopes(...scopes) {
+  const baseScope = scopes[0];
+  if (scopes.length === 1) return baseScope;
+  const createScope = () => {
+    const scopeHooks = scopes.map((createScope2) => ({
+      useScope: createScope2(),
+      scopeName: createScope2.scopeName
+    }));
+    return function useComposedScopes(overrideScopes) {
+      const nextScopes = scopeHooks.reduce((nextScopes2, { useScope, scopeName }) => {
+        const scopeProps = useScope(overrideScopes);
+        const currentScope = scopeProps[`__scope${scopeName}`];
+        return { ...nextScopes2, ...currentScope };
+      }, {});
+      return React.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
+    };
+  };
+  createScope.scopeName = baseScope.scopeName;
+  return createScope;
+}
+// @__NO_SIDE_EFFECTS__
+function createSlot(ownerName) {
+  const SlotClone = /* @__PURE__ */ createSlotClone(ownerName);
+  const Slot2 = React.forwardRef((props, forwardedRef) => {
+    const { children, ...slotProps } = props;
+    const childrenArray = React.Children.toArray(children);
+    const slottable = childrenArray.find(isSlottable);
+    if (slottable) {
+      const newElement = slottable.props.children;
+      const newChildren = childrenArray.map((child) => {
+        if (child === slottable) {
+          if (React.Children.count(newElement) > 1) return React.Children.only(null);
+          return React.isValidElement(newElement) ? newElement.props.children : null;
+        } else {
+          return child;
+        }
+      });
+      return /* @__PURE__ */ jsx(SlotClone, { ...slotProps, ref: forwardedRef, children: React.isValidElement(newElement) ? React.cloneElement(newElement, void 0, newChildren) : null });
+    }
+    return /* @__PURE__ */ jsx(SlotClone, { ...slotProps, ref: forwardedRef, children });
+  });
+  Slot2.displayName = `${ownerName}.Slot`;
+  return Slot2;
+}
+// @__NO_SIDE_EFFECTS__
+function createSlotClone(ownerName) {
+  const SlotClone = React.forwardRef((props, forwardedRef) => {
+    const { children, ...slotProps } = props;
+    if (React.isValidElement(children)) {
+      const childrenRef = getElementRef$1(children);
+      const props2 = mergeProps(slotProps, children.props);
+      if (children.type !== React.Fragment) {
+        props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
+      }
+      return React.cloneElement(children, props2);
+    }
+    return React.Children.count(children) > 1 ? React.Children.only(null) : null;
+  });
+  SlotClone.displayName = `${ownerName}.SlotClone`;
+  return SlotClone;
+}
+var SLOTTABLE_IDENTIFIER = Symbol("radix.slottable");
+function isSlottable(child) {
+  return React.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
+}
+function mergeProps(slotProps, childProps) {
+  const overrideProps = { ...childProps };
+  for (const propName in childProps) {
+    const slotPropValue = slotProps[propName];
+    const childPropValue = childProps[propName];
+    const isHandler = /^on[A-Z]/.test(propName);
+    if (isHandler) {
+      if (slotPropValue && childPropValue) {
+        overrideProps[propName] = (...args) => {
+          const result = childPropValue(...args);
+          slotPropValue(...args);
+          return result;
+        };
+      } else if (slotPropValue) {
+        overrideProps[propName] = slotPropValue;
+      }
+    } else if (propName === "style") {
+      overrideProps[propName] = { ...slotPropValue, ...childPropValue };
+    } else if (propName === "className") {
+      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
+    }
+  }
+  return { ...slotProps, ...overrideProps };
+}
+function getElementRef$1(element) {
+  var _a, _b;
+  let getter = (_a = Object.getOwnPropertyDescriptor(element.props, "ref")) == null ? void 0 : _a.get;
+  let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.ref;
+  }
+  getter = (_b = Object.getOwnPropertyDescriptor(element, "ref")) == null ? void 0 : _b.get;
+  mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.props.ref;
+  }
+  return element.props.ref || element.ref;
+}
+var NODES = [
+  "a",
+  "button",
+  "div",
+  "form",
+  "h2",
+  "h3",
+  "img",
+  "input",
+  "label",
+  "li",
+  "nav",
+  "ol",
+  "p",
+  "select",
+  "span",
+  "svg",
+  "ul"
+];
+var Primitive = NODES.reduce((primitive, node) => {
+  const Slot2 = /* @__PURE__ */ createSlot(`Primitive.${node}`);
+  const Node2 = React.forwardRef((props, forwardedRef) => {
+    const { asChild, ...primitiveProps } = props;
+    const Comp = asChild ? Slot2 : node;
+    if (typeof window !== "undefined") {
+      window[Symbol.for("radix-ui")] = true;
+    }
+    return /* @__PURE__ */ jsx(Comp, { ...primitiveProps, ref: forwardedRef });
+  });
+  Node2.displayName = `Primitive.${node}`;
+  return { ...primitive, [node]: Node2 };
+}, {});
+function dispatchDiscreteCustomEvent(target, event) {
+  if (target) ReactDOM.flushSync(() => target.dispatchEvent(event));
+}
+function useCallbackRef$1(callback) {
+  const callbackRef = React.useRef(callback);
+  React.useEffect(() => {
+    callbackRef.current = callback;
+  });
+  return React.useMemo(() => (...args) => {
+    var _a;
+    return (_a = callbackRef.current) == null ? void 0 : _a.call(callbackRef, ...args);
+  }, []);
+}
+function useEscapeKeydown(onEscapeKeyDownProp, ownerDocument = globalThis == null ? void 0 : globalThis.document) {
+  const onEscapeKeyDown = useCallbackRef$1(onEscapeKeyDownProp);
+  React.useEffect(() => {
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        onEscapeKeyDown(event);
+      }
+    };
+    ownerDocument.addEventListener("keydown", handleKeyDown, { capture: true });
+    return () => ownerDocument.removeEventListener("keydown", handleKeyDown, { capture: true });
+  }, [onEscapeKeyDown, ownerDocument]);
+}
+var DISMISSABLE_LAYER_NAME = "DismissableLayer";
+var CONTEXT_UPDATE = "dismissableLayer.update";
+var POINTER_DOWN_OUTSIDE = "dismissableLayer.pointerDownOutside";
+var FOCUS_OUTSIDE = "dismissableLayer.focusOutside";
+var originalBodyPointerEvents;
+var DismissableLayerContext = React.createContext({
+  layers: /* @__PURE__ */ new Set(),
+  layersWithOutsidePointerEventsDisabled: /* @__PURE__ */ new Set(),
+  branches: /* @__PURE__ */ new Set()
+});
+var DismissableLayer = React.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      disableOutsidePointerEvents = false,
+      onEscapeKeyDown,
+      onPointerDownOutside,
+      onFocusOutside,
+      onInteractOutside,
+      onDismiss,
+      ...layerProps
+    } = props;
+    const context = React.useContext(DismissableLayerContext);
+    const [node, setNode] = React.useState(null);
+    const ownerDocument = (node == null ? void 0 : node.ownerDocument) ?? (globalThis == null ? void 0 : globalThis.document);
+    const [, force] = React.useState({});
+    const composedRefs = useComposedRefs(forwardedRef, (node2) => setNode(node2));
+    const layers = Array.from(context.layers);
+    const [highestLayerWithOutsidePointerEventsDisabled] = [...context.layersWithOutsidePointerEventsDisabled].slice(-1);
+    const highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf(highestLayerWithOutsidePointerEventsDisabled);
+    const index = node ? layers.indexOf(node) : -1;
+    const isBodyPointerEventsDisabled = context.layersWithOutsidePointerEventsDisabled.size > 0;
+    const isPointerEventsEnabled = index >= highestLayerWithOutsidePointerEventsDisabledIndex;
+    const pointerDownOutside = usePointerDownOutside((event) => {
+      const target = event.target;
+      const isPointerDownOnBranch = [...context.branches].some((branch) => branch.contains(target));
+      if (!isPointerEventsEnabled || isPointerDownOnBranch) return;
+      onPointerDownOutside == null ? void 0 : onPointerDownOutside(event);
+      onInteractOutside == null ? void 0 : onInteractOutside(event);
+      if (!event.defaultPrevented) onDismiss == null ? void 0 : onDismiss();
+    }, ownerDocument);
+    const focusOutside = useFocusOutside((event) => {
+      const target = event.target;
+      const isFocusInBranch = [...context.branches].some((branch) => branch.contains(target));
+      if (isFocusInBranch) return;
+      onFocusOutside == null ? void 0 : onFocusOutside(event);
+      onInteractOutside == null ? void 0 : onInteractOutside(event);
+      if (!event.defaultPrevented) onDismiss == null ? void 0 : onDismiss();
+    }, ownerDocument);
+    useEscapeKeydown((event) => {
+      const isHighestLayer = index === context.layers.size - 1;
+      if (!isHighestLayer) return;
+      onEscapeKeyDown == null ? void 0 : onEscapeKeyDown(event);
+      if (!event.defaultPrevented && onDismiss) {
+        event.preventDefault();
+        onDismiss();
+      }
+    }, ownerDocument);
+    React.useEffect(() => {
+      if (!node) return;
+      if (disableOutsidePointerEvents) {
+        if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
+          originalBodyPointerEvents = ownerDocument.body.style.pointerEvents;
+          ownerDocument.body.style.pointerEvents = "none";
+        }
+        context.layersWithOutsidePointerEventsDisabled.add(node);
+      }
+      context.layers.add(node);
+      dispatchUpdate();
+      return () => {
+        if (disableOutsidePointerEvents && context.layersWithOutsidePointerEventsDisabled.size === 1) {
+          ownerDocument.body.style.pointerEvents = originalBodyPointerEvents;
+        }
+      };
+    }, [node, ownerDocument, disableOutsidePointerEvents, context]);
+    React.useEffect(() => {
+      return () => {
+        if (!node) return;
+        context.layers.delete(node);
+        context.layersWithOutsidePointerEventsDisabled.delete(node);
+        dispatchUpdate();
+      };
+    }, [node, context]);
+    React.useEffect(() => {
+      const handleUpdate = () => force({});
+      document.addEventListener(CONTEXT_UPDATE, handleUpdate);
+      return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);
+    }, []);
+    return /* @__PURE__ */ jsx(
+      Primitive.div,
+      {
+        ...layerProps,
+        ref: composedRefs,
+        style: {
+          pointerEvents: isBodyPointerEventsDisabled ? isPointerEventsEnabled ? "auto" : "none" : void 0,
+          ...props.style
+        },
+        onFocusCapture: composeEventHandlers(props.onFocusCapture, focusOutside.onFocusCapture),
+        onBlurCapture: composeEventHandlers(props.onBlurCapture, focusOutside.onBlurCapture),
+        onPointerDownCapture: composeEventHandlers(
+          props.onPointerDownCapture,
+          pointerDownOutside.onPointerDownCapture
+        )
+      }
+    );
+  }
+);
+DismissableLayer.displayName = DISMISSABLE_LAYER_NAME;
+var BRANCH_NAME = "DismissableLayerBranch";
+var DismissableLayerBranch = React.forwardRef((props, forwardedRef) => {
+  const context = React.useContext(DismissableLayerContext);
+  const ref = React.useRef(null);
+  const composedRefs = useComposedRefs(forwardedRef, ref);
+  React.useEffect(() => {
+    const node = ref.current;
+    if (node) {
+      context.branches.add(node);
+      return () => {
+        context.branches.delete(node);
+      };
+    }
+  }, [context.branches]);
+  return /* @__PURE__ */ jsx(Primitive.div, { ...props, ref: composedRefs });
+});
+DismissableLayerBranch.displayName = BRANCH_NAME;
+function usePointerDownOutside(onPointerDownOutside, ownerDocument = globalThis == null ? void 0 : globalThis.document) {
+  const handlePointerDownOutside = useCallbackRef$1(onPointerDownOutside);
+  const isPointerInsideReactTreeRef = React.useRef(false);
+  const handleClickRef = React.useRef(() => {
+  });
+  React.useEffect(() => {
+    const handlePointerDown = (event) => {
+      if (event.target && !isPointerInsideReactTreeRef.current) {
+        let handleAndDispatchPointerDownOutsideEvent2 = function() {
+          handleAndDispatchCustomEvent(
+            POINTER_DOWN_OUTSIDE,
+            handlePointerDownOutside,
+            eventDetail,
+            { discrete: true }
+          );
+        };
+        const eventDetail = { originalEvent: event };
+        if (event.pointerType === "touch") {
+          ownerDocument.removeEventListener("click", handleClickRef.current);
+          handleClickRef.current = handleAndDispatchPointerDownOutsideEvent2;
+          ownerDocument.addEventListener("click", handleClickRef.current, { once: true });
+        } else {
+          handleAndDispatchPointerDownOutsideEvent2();
+        }
+      } else {
+        ownerDocument.removeEventListener("click", handleClickRef.current);
+      }
+      isPointerInsideReactTreeRef.current = false;
+    };
+    const timerId = window.setTimeout(() => {
+      ownerDocument.addEventListener("pointerdown", handlePointerDown);
+    }, 0);
+    return () => {
+      window.clearTimeout(timerId);
+      ownerDocument.removeEventListener("pointerdown", handlePointerDown);
+      ownerDocument.removeEventListener("click", handleClickRef.current);
+    };
+  }, [ownerDocument, handlePointerDownOutside]);
+  return {
+    // ensures we check React component tree (not just DOM tree)
+    onPointerDownCapture: () => isPointerInsideReactTreeRef.current = true
+  };
+}
+function useFocusOutside(onFocusOutside, ownerDocument = globalThis == null ? void 0 : globalThis.document) {
+  const handleFocusOutside = useCallbackRef$1(onFocusOutside);
+  const isFocusInsideReactTreeRef = React.useRef(false);
+  React.useEffect(() => {
+    const handleFocus = (event) => {
+      if (event.target && !isFocusInsideReactTreeRef.current) {
+        const eventDetail = { originalEvent: event };
+        handleAndDispatchCustomEvent(FOCUS_OUTSIDE, handleFocusOutside, eventDetail, {
+          discrete: false
+        });
+      }
+    };
+    ownerDocument.addEventListener("focusin", handleFocus);
+    return () => ownerDocument.removeEventListener("focusin", handleFocus);
+  }, [ownerDocument, handleFocusOutside]);
+  return {
+    onFocusCapture: () => isFocusInsideReactTreeRef.current = true,
+    onBlurCapture: () => isFocusInsideReactTreeRef.current = false
+  };
+}
+function dispatchUpdate() {
+  const event = new CustomEvent(CONTEXT_UPDATE);
+  document.dispatchEvent(event);
+}
+function handleAndDispatchCustomEvent(name, handler, detail, { discrete }) {
+  const target = detail.originalEvent.target;
+  const event = new CustomEvent(name, { bubbles: false, cancelable: true, detail });
+  if (handler) target.addEventListener(name, handler, { once: true });
+  if (discrete) {
+    dispatchDiscreteCustomEvent(target, event);
+  } else {
+    target.dispatchEvent(event);
+  }
+}
+var Root$1 = DismissableLayer;
+var Branch = DismissableLayerBranch;
+var useLayoutEffect2 = (globalThis == null ? void 0 : globalThis.document) ? React.useLayoutEffect : () => {
+};
+var PORTAL_NAME$1 = "Portal";
+var Portal$1 = React.forwardRef((props, forwardedRef) => {
+  var _a;
+  const { container: containerProp, ...portalProps } = props;
+  const [mounted, setMounted] = React.useState(false);
+  useLayoutEffect2(() => setMounted(true), []);
+  const container = containerProp || mounted && ((_a = globalThis == null ? void 0 : globalThis.document) == null ? void 0 : _a.body);
+  return container ? ReactDOM__default.createPortal(/* @__PURE__ */ jsx(Primitive.div, { ...portalProps, ref: forwardedRef }), container) : null;
+});
+Portal$1.displayName = PORTAL_NAME$1;
+function useStateMachine(initialState, machine) {
+  return React.useReducer((state, event) => {
+    const nextState = machine[state][event];
+    return nextState ?? state;
+  }, initialState);
+}
+var Presence = (props) => {
+  const { present, children } = props;
+  const presence = usePresence(present);
+  const child = typeof children === "function" ? children({ present: presence.isPresent }) : React.Children.only(children);
+  const ref = useComposedRefs(presence.ref, getElementRef(child));
+  const forceMount = typeof children === "function";
+  return forceMount || presence.isPresent ? React.cloneElement(child, { ref }) : null;
+};
+Presence.displayName = "Presence";
+function usePresence(present) {
+  const [node, setNode] = React.useState();
+  const stylesRef = React.useRef(null);
+  const prevPresentRef = React.useRef(present);
+  const prevAnimationNameRef = React.useRef("none");
+  const initialState = present ? "mounted" : "unmounted";
+  const [state, send] = useStateMachine(initialState, {
+    mounted: {
+      UNMOUNT: "unmounted",
+      ANIMATION_OUT: "unmountSuspended"
+    },
+    unmountSuspended: {
+      MOUNT: "mounted",
+      ANIMATION_END: "unmounted"
+    },
+    unmounted: {
+      MOUNT: "mounted"
+    }
+  });
+  React.useEffect(() => {
+    const currentAnimationName = getAnimationName(stylesRef.current);
+    prevAnimationNameRef.current = state === "mounted" ? currentAnimationName : "none";
+  }, [state]);
+  useLayoutEffect2(() => {
+    const styles = stylesRef.current;
+    const wasPresent = prevPresentRef.current;
+    const hasPresentChanged = wasPresent !== present;
+    if (hasPresentChanged) {
+      const prevAnimationName = prevAnimationNameRef.current;
+      const currentAnimationName = getAnimationName(styles);
+      if (present) {
+        send("MOUNT");
+      } else if (currentAnimationName === "none" || (styles == null ? void 0 : styles.display) === "none") {
+        send("UNMOUNT");
+      } else {
+        const isAnimating = prevAnimationName !== currentAnimationName;
+        if (wasPresent && isAnimating) {
+          send("ANIMATION_OUT");
+        } else {
+          send("UNMOUNT");
+        }
+      }
+      prevPresentRef.current = present;
+    }
+  }, [present, send]);
+  useLayoutEffect2(() => {
+    if (node) {
+      let timeoutId;
+      const ownerWindow = node.ownerDocument.defaultView ?? window;
+      const handleAnimationEnd = (event) => {
+        const currentAnimationName = getAnimationName(stylesRef.current);
+        const isCurrentAnimation = currentAnimationName.includes(CSS.escape(event.animationName));
+        if (event.target === node && isCurrentAnimation) {
+          send("ANIMATION_END");
+          if (!prevPresentRef.current) {
+            const currentFillMode = node.style.animationFillMode;
+            node.style.animationFillMode = "forwards";
+            timeoutId = ownerWindow.setTimeout(() => {
+              if (node.style.animationFillMode === "forwards") {
+                node.style.animationFillMode = currentFillMode;
+              }
+            });
+          }
+        }
+      };
+      const handleAnimationStart = (event) => {
+        if (event.target === node) {
+          prevAnimationNameRef.current = getAnimationName(stylesRef.current);
+        }
+      };
+      node.addEventListener("animationstart", handleAnimationStart);
+      node.addEventListener("animationcancel", handleAnimationEnd);
+      node.addEventListener("animationend", handleAnimationEnd);
+      return () => {
+        ownerWindow.clearTimeout(timeoutId);
+        node.removeEventListener("animationstart", handleAnimationStart);
+        node.removeEventListener("animationcancel", handleAnimationEnd);
+        node.removeEventListener("animationend", handleAnimationEnd);
+      };
+    } else {
+      send("ANIMATION_END");
+    }
+  }, [node, send]);
+  return {
+    isPresent: ["mounted", "unmountSuspended"].includes(state),
+    ref: React.useCallback((node2) => {
+      stylesRef.current = node2 ? getComputedStyle(node2) : null;
+      setNode(node2);
+    }, [])
+  };
+}
+function getAnimationName(styles) {
+  return (styles == null ? void 0 : styles.animationName) || "none";
+}
+function getElementRef(element) {
+  var _a, _b;
+  let getter = (_a = Object.getOwnPropertyDescriptor(element.props, "ref")) == null ? void 0 : _a.get;
+  let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.ref;
+  }
+  getter = (_b = Object.getOwnPropertyDescriptor(element, "ref")) == null ? void 0 : _b.get;
+  mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.props.ref;
+  }
+  return element.props.ref || element.ref;
+}
+var useInsertionEffect = React[" useInsertionEffect ".trim().toString()] || useLayoutEffect2;
+function useControllableState({
+  prop,
+  defaultProp,
+  onChange = () => {
+  },
+  caller
+}) {
+  const [uncontrolledProp, setUncontrolledProp, onChangeRef] = useUncontrolledState({
+    defaultProp,
+    onChange
+  });
+  const isControlled = prop !== void 0;
+  const value = isControlled ? prop : uncontrolledProp;
+  {
+    const isControlledRef = React.useRef(prop !== void 0);
+    React.useEffect(() => {
+      const wasControlled = isControlledRef.current;
+      if (wasControlled !== isControlled) {
+        const from = wasControlled ? "controlled" : "uncontrolled";
+        const to = isControlled ? "controlled" : "uncontrolled";
+        console.warn(
+          `${caller} is changing from ${from} to ${to}. Components should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled value for the lifetime of the component.`
+        );
+      }
+      isControlledRef.current = isControlled;
+    }, [isControlled, caller]);
+  }
+  const setValue = React.useCallback(
+    (nextValue) => {
+      var _a;
+      if (isControlled) {
+        const value2 = isFunction(nextValue) ? nextValue(prop) : nextValue;
+        if (value2 !== prop) {
+          (_a = onChangeRef.current) == null ? void 0 : _a.call(onChangeRef, value2);
+        }
+      } else {
+        setUncontrolledProp(nextValue);
+      }
+    },
+    [isControlled, prop, setUncontrolledProp, onChangeRef]
+  );
+  return [value, setValue];
+}
+function useUncontrolledState({
+  defaultProp,
+  onChange
+}) {
+  const [value, setValue] = React.useState(defaultProp);
+  const prevValueRef = React.useRef(value);
+  const onChangeRef = React.useRef(onChange);
+  useInsertionEffect(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+  React.useEffect(() => {
+    var _a;
+    if (prevValueRef.current !== value) {
+      (_a = onChangeRef.current) == null ? void 0 : _a.call(onChangeRef, value);
+      prevValueRef.current = value;
+    }
+  }, [value, prevValueRef]);
+  return [value, setValue, onChangeRef];
+}
+function isFunction(value) {
+  return typeof value === "function";
+}
+var useReactId = React[" useId ".trim().toString()] || (() => void 0);
 var count$1 = 0;
 function useId(deterministicId) {
   const [id, setId] = React.useState(useReactId());
@@ -1096,7 +1949,7 @@ var DialogOverlay = React.forwardRef(
   }
 );
 DialogOverlay.displayName = OVERLAY_NAME;
-var Slot = createSlot("DialogOverlay.RemoveScroll");
+var Slot = /* @__PURE__ */ createSlot("DialogOverlay.RemoveScroll");
 var DialogOverlayImpl = React.forwardRef(
   (props, forwardedRef) => {
     const { __scopeDialog, ...overlayProps } = props;
@@ -1356,8 +2209,10 @@ function Dialog({
   contentClassName,
   overlayClassName,
   rightSlot,
-  maxWidth
+  maxWidth,
+  bodyPadding = true
 }) {
+  const portalContainer = useTaskOnPortalContainer();
   const contentStyle = maxWidth ? { maxWidth: typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth } : {};
   const handleInteractOutside = (event) => {
     if (!closeOnOverlayClick) {
@@ -1369,7 +2224,7 @@ function Dialog({
       event.preventDefault();
     }
   };
-  return /* @__PURE__ */ jsx(Root, { open, onOpenChange, children: /* @__PURE__ */ jsxs(Portal, { children: [
+  return /* @__PURE__ */ jsx(Root, { open, onOpenChange, children: /* @__PURE__ */ jsxs(Portal, { container: portalContainer ?? void 0, children: [
     /* @__PURE__ */ jsx(
       Overlay,
       {
@@ -1398,120 +2253,559 @@ function Dialog({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "taskon-dialog-body", children })
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `taskon-dialog-body${bodyPadding ? "" : " taskon-dialog-body--no-padding"}`,
+              children
+            }
+          )
         ]
       }
     )
   ] }) });
 }
-function useWidgetConfig(widgetId) {
-  const { client } = useTaskOnContext();
-  const [config, setConfig] = useState(null);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState(null);
-  useEffect(() => {
-    if (!widgetId || !client) {
-      setConfig(null);
-      setIsLoading(false);
-      setError(null);
-      return;
+const lightDefaultTokens = {
+  // Primary colors
+  colorPrimary: "#CBFF01",
+  colorPrimaryHover: "#daff2a",
+  colorPrimaryActive: "#a5d900",
+  colorPrimaryBg: "#fdffcd",
+  // Secondary color
+  colorSecondary: "#00FFA3",
+  // Status colors
+  colorSuccess: "#1FCBAF",
+  colorWarning: "#FFB800",
+  colorError: "#FF4D4D",
+  // Background colors (V2)
+  colorBgCanvas: "#FFFFFF",
+  colorBgSurface: "#fafafb",
+  colorBgSurfaceSubtle: "rgba(26, 29, 31, 0.04)",
+  colorBgSurfaceStrong: "rgba(26, 29, 31, 0.06)",
+  colorBgFloating: "#f4f4f4",
+  colorBgMask: "rgba(26, 29, 31, 0.45)",
+  colorBgInset: "#eaebeb",
+  colorSuccessBg: "#1fcbaf1a",
+  colorWarningBg: "#ffb8001a",
+  colorErrorBg: "#ff4d4d1a",
+  colorSecondaryBg: "#00ffa31a",
+  // Text colors
+  colorText: "#1A1D1F",
+  colorTextSecondary: "rgba(26, 29, 31, 0.72)",
+  colorTextTertiary: "rgba(26, 29, 31, 0.6)",
+  colorTextDisabled: "rgba(26, 29, 31, 0.4)",
+  colorLink: "#58AFFF",
+  colorTextOnPrimary: "#000000",
+  // Border colors
+  colorBorder: "rgba(26, 29, 31, 0.1)",
+  colorBorderSecondary: "rgba(26, 29, 31, 0.06)",
+  // Border radius
+  borderRadius: 8,
+  borderRadiusSm: 4,
+  borderRadiusLg: 12,
+  // Font
+  fontSize: 14,
+  fontSizeSm: 12,
+  fontSizeLg: 16,
+  fontSizeXl: 18,
+  fontSizeXxl: 22,
+  fontSizeXxxl: 24,
+  // Spacing
+  spacing: 8,
+  spacingXs: 4,
+  spacingSm: 8,
+  spacingMd: 16,
+  spacingLg: 24,
+  spacingXl: 32
+};
+const darkDefaultTokens = {
+  // Primary colors
+  colorPrimary: "#CBFF01",
+  colorPrimaryHover: "#daff2a",
+  colorPrimaryActive: "#a5d900",
+  colorPrimaryBg: "#1e2600",
+  // Secondary color
+  colorSecondary: "#00FFA3",
+  // Status colors
+  colorSuccess: "#1FCBAF",
+  colorWarning: "#FFB800",
+  colorError: "#FF4D4D",
+  // Background colors (V2)
+  colorBgCanvas: "#1A1D1F",
+  colorBgSurface: "#282b2c",
+  colorBgSurfaceSubtle: "rgba(255, 255, 255, 0.04)",
+  colorBgSurfaceStrong: "rgba(255, 255, 255, 0.12)",
+  colorBgFloating: "#313435",
+  colorBgMask: "rgba(26, 29, 31, 0.6)",
+  colorBgInset: "#3a3d3e",
+  colorSuccessBg: "#1fcbaf26",
+  colorWarningBg: "#ffb80026",
+  colorErrorBg: "#ff4d4d26",
+  colorSecondaryBg: "#00ffa326",
+  // Text colors
+  colorText: "#FFFFFF",
+  colorTextSecondary: "rgba(255, 255, 255, 0.72)",
+  colorTextTertiary: "rgba(255, 255, 255, 0.6)",
+  colorTextDisabled: "rgba(255, 255, 255, 0.4)",
+  colorLink: "#58AFFF",
+  colorTextOnPrimary: "#000000",
+  // Border colors
+  colorBorder: "rgba(255, 255, 255, 0.1)",
+  colorBorderSecondary: "rgba(255, 255, 255, 0.06)",
+  // Border radius
+  borderRadius: 8,
+  borderRadiusSm: 4,
+  borderRadiusLg: 12,
+  // Font
+  fontSize: 14,
+  fontSizeSm: 12,
+  fontSizeLg: 16,
+  fontSizeXl: 18,
+  fontSizeXxl: 22,
+  fontSizeXxxl: 24,
+  // Spacing
+  spacing: 8,
+  spacingXs: 4,
+  spacingSm: 8,
+  spacingMd: 16,
+  spacingLg: 24,
+  spacingXl: 32
+};
+const hueStep = 2;
+const saturationStep = 0.16;
+const saturationStep2 = 0.05;
+const brightnessStep1 = 0.05;
+const brightnessStep2 = 0.15;
+const lightColorCount = 5;
+const darkColorCount = 4;
+function hexToRgb(hex) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  if (!result || !result[1] || !result[2] || !result[3]) {
+    return null;
+  }
+  return {
+    r: parseInt(result[1], 16),
+    g: parseInt(result[2], 16),
+    b: parseInt(result[3], 16)
+  };
+}
+function rgbToHex(rgb) {
+  const toHex = (n) => {
+    const hex = Math.round(Math.max(0, Math.min(255, n))).toString(16);
+    return hex.length === 1 ? "0" + hex : hex;
+  };
+  return "#" + toHex(rgb.r) + toHex(rgb.g) + toHex(rgb.b);
+}
+function rgbToHsv(rgb) {
+  const r = rgb.r / 255;
+  const g = rgb.g / 255;
+  const b = rgb.b / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const delta = max - min;
+  let h = 0;
+  const v = max;
+  const s = max === 0 ? 0 : delta / max;
+  if (delta !== 0) {
+    if (max === r) {
+      h = ((g - b) / delta + (g < b ? 6 : 0)) * 60;
+    } else if (max === g) {
+      h = ((b - r) / delta + 2) * 60;
+    } else {
+      h = ((r - g) / delta + 4) * 60;
     }
-    let cancelled = false;
-    setIsLoading(true);
-    setError(null);
-    const api = createWidgetApi(client);
-    api.getWidgetInfo(widgetId).then((info) => {
-      if (!cancelled) {
-        setConfig(parseWidgetConfig(info));
-      }
-    }).catch((err) => {
-      if (!cancelled) {
-        console.warn("[TaskOn] Failed to load widget config:", err);
-        setError(
-          err instanceof Error ? err.message : "Failed to load widget config"
-        );
-      }
-    }).finally(() => {
-      if (!cancelled) {
-        setIsLoading(false);
-      }
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [widgetId, client]);
-  return { config, isLoading, error };
+  }
+  return { h, s, v };
+}
+function hsvToRgb(hsv) {
+  const h = hsv.h / 60;
+  const s = hsv.s;
+  const v = hsv.v;
+  const i = Math.floor(h) % 6;
+  const f = h - Math.floor(h);
+  const p = v * (1 - s);
+  const q = v * (1 - f * s);
+  const t = v * (1 - (1 - f) * s);
+  let r = 0, g = 0, b = 0;
+  switch (i) {
+    case 0:
+      r = v;
+      g = t;
+      b = p;
+      break;
+    case 1:
+      r = q;
+      g = v;
+      b = p;
+      break;
+    case 2:
+      r = p;
+      g = v;
+      b = t;
+      break;
+    case 3:
+      r = p;
+      g = q;
+      b = v;
+      break;
+    case 4:
+      r = t;
+      g = p;
+      b = v;
+      break;
+    case 5:
+      r = v;
+      g = p;
+      b = q;
+      break;
+  }
+  return {
+    r: Math.round(r * 255),
+    g: Math.round(g * 255),
+    b: Math.round(b * 255)
+  };
+}
+function getHue(hsv, i, isLight) {
+  let hue;
+  if (hsv.h >= 60 && hsv.h <= 240) {
+    hue = isLight ? hsv.h - hueStep * i : hsv.h + hueStep * i;
+  } else {
+    hue = isLight ? hsv.h + hueStep * i : hsv.h - hueStep * i;
+  }
+  if (hue < 0) {
+    hue += 360;
+  } else if (hue >= 360) {
+    hue -= 360;
+  }
+  return hue;
+}
+function getSaturation(hsv, i, isLight) {
+  if (hsv.s === 0) {
+    return hsv.s;
+  }
+  let saturation;
+  if (isLight) {
+    saturation = hsv.s - saturationStep * i;
+  } else {
+    saturation = hsv.s + saturationStep2 * i;
+  }
+  if (saturation < 0.06) {
+    saturation = 0.06;
+  }
+  if (saturation > 1) {
+    saturation = 1;
+  }
+  return saturation;
 }
-function cloudThemeToReactTheme(cloud) {
-  let mode;
-  if (cloud.colorMode.type === "dual") {
-    mode = "auto";
+function getValue(hsv, i, isLight) {
+  let value;
+  if (isLight) {
+    value = hsv.v + brightnessStep1 * i;
   } else {
-    mode = cloud.colorMode.type;
-  }
-  const mapColorToSeed = (color) => ({
-    colorPrimary: color.primaryColor,
-    colorSecondary: color.secondaryColor,
-    colorSuccess: color.successColor,
-    colorWarning: color.warningColor,
-    colorError: color.errorColor,
-    borderRadius: cloud.shape.borderRadius,
-    fontSize: cloud.shape.fontSize
+    value = hsv.v - brightnessStep2 * i;
+  }
+  if (value < 0) {
+    value = 0;
+  }
+  if (value > 1) {
+    value = 1;
+  }
+  return value;
+}
+function generatePalette(primaryColor) {
+  const rgb = hexToRgb(primaryColor);
+  if (!rgb) {
+    return Array(10).fill(primaryColor);
+  }
+  const hsv = rgbToHsv(rgb);
+  const palette = [];
+  for (let i = lightColorCount; i > 0; i--) {
+    const newHsv = {
+      h: getHue(hsv, i, true),
+      s: getSaturation(hsv, i, true),
+      v: getValue(hsv, i, true)
+    };
+    palette.push(rgbToHex(hsvToRgb(newHsv)));
+  }
+  palette.push(primaryColor);
+  for (let i = 1; i <= darkColorCount; i++) {
+    const newHsv = {
+      h: getHue(hsv, i, false),
+      s: getSaturation(hsv, i, false),
+      v: getValue(hsv, i, false)
+    };
+    palette.push(rgbToHex(hsvToRgb(newHsv)));
+  }
+  return palette;
+}
+function mixColors(color1, color2, weight) {
+  const rgb1 = hexToRgb(color1);
+  const rgb2 = hexToRgb(color2);
+  if (!rgb1 || !rgb2) return color1;
+  return rgbToHex({
+    r: rgb1.r + (rgb2.r - rgb1.r) * weight,
+    g: rgb1.g + (rgb2.g - rgb1.g) * weight,
+    b: rgb1.b + (rgb2.b - rgb1.b) * weight
   });
+}
+function withAlpha(color, alpha) {
+  const rgb = hexToRgb(color);
+  if (!rgb) return color;
+  return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha})`;
+}
+function deriveTokens(seed, mode) {
+  const derived = {};
+  const isLight = mode === "light";
+  if (seed.colorPrimary) {
+    const palette = generatePalette(seed.colorPrimary);
+    derived.colorPrimary = seed.colorPrimary;
+    if (isLight) {
+      derived.colorPrimaryHover = palette[4];
+      derived.colorPrimaryActive = palette[6];
+      derived.colorPrimaryBg = palette[0];
+    } else {
+      derived.colorPrimaryHover = palette[4];
+      derived.colorPrimaryActive = palette[6];
+      derived.colorPrimaryBg = mixColors(seed.colorPrimary, "#000000", 0.85);
+    }
+  }
+  if (seed.colorSecondary) derived.colorSecondary = seed.colorSecondary;
+  if (seed.colorSuccess) derived.colorSuccess = seed.colorSuccess;
+  if (seed.colorWarning) derived.colorWarning = seed.colorWarning;
+  if (seed.colorError) derived.colorError = seed.colorError;
+  if (seed.colorLink) derived.colorLink = seed.colorLink;
+  if (seed.colorText) derived.colorText = seed.colorText;
+  if (seed.colorTextOnPrimary) {
+    derived.colorTextOnPrimary = seed.colorTextOnPrimary;
+  }
+  if (seed.colorText) {
+    derived.colorTextSecondary = withAlpha(seed.colorText, 0.72);
+    derived.colorTextTertiary = withAlpha(seed.colorText, 0.6);
+    derived.colorTextDisabled = withAlpha(seed.colorText, 0.4);
+    derived.colorBorder = withAlpha(seed.colorText, 0.1);
+    derived.colorBorderSecondary = withAlpha(seed.colorText, 0.06);
+  }
+  if (seed.colorBgBase) {
+    derived.colorBgCanvas = seed.colorBgBase;
+    if (seed.colorText) {
+      derived.colorBgSurface = mixColors(
+        seed.colorBgBase,
+        seed.colorText,
+        0.06
+      );
+      derived.colorBgSurfaceSubtle = withAlpha(seed.colorText, 0.04);
+      derived.colorBgSurfaceStrong = withAlpha(seed.colorText, 0.12);
+      derived.colorBgFloating = mixColors(
+        seed.colorBgBase,
+        seed.colorText,
+        0.1
+      );
+      derived.colorBgInset = mixColors(
+        seed.colorBgBase,
+        seed.colorText,
+        0.14
+      );
+      derived.colorBgMask = isLight ? withAlpha(seed.colorText, 0.45) : withAlpha(seed.colorBgBase, 0.6);
+    } else {
+      derived.colorBgSurface = seed.colorBgBase;
+      derived.colorBgFloating = seed.colorBgBase;
+      derived.colorBgInset = seed.colorBgBase;
+    }
+  }
+  if (seed.colorSecondary) {
+    derived.colorSecondaryBg = withAlpha(seed.colorSecondary, 0.15);
+  }
+  if (seed.colorSuccess) {
+    derived.colorSuccessBg = withAlpha(seed.colorSuccess, 0.15);
+  }
+  if (seed.colorWarning) {
+    derived.colorWarningBg = withAlpha(seed.colorWarning, 0.15);
+  }
+  if (seed.colorError) {
+    derived.colorErrorBg = withAlpha(seed.colorError, 0.15);
+  }
+  if (seed.borderRadius !== void 0) {
+    derived.borderRadius = seed.borderRadius;
+    derived.borderRadiusSm = Math.max(0, seed.borderRadius - 4);
+    derived.borderRadiusLg = seed.borderRadius + 4;
+  }
+  if (seed.fontSize !== void 0) {
+    derived.fontSize = seed.fontSize;
+    derived.fontSizeSm = seed.fontSize - 2;
+    derived.fontSizeLg = seed.fontSize + 2;
+    derived.fontSizeXl = seed.fontSize + 4;
+    derived.fontSizeXxl = seed.fontSize + 8;
+    derived.fontSizeXxxl = seed.fontSize + 10;
+  }
+  if (seed.spacingBaseStep !== void 0 || seed.spacingChangeUnit !== void 0) {
+    const base = Math.max(1, Number(seed.spacingBaseStep) || 1);
+    const unit = Math.max(1, Number(seed.spacingChangeUnit) || 1);
+    const spacingXs = base;
+    const spacingSm = base + unit;
+    const spacingMd = base + unit * 3;
+    const spacingLg = base + unit * 5;
+    const spacingXl = base + unit * 7;
+    derived.spacing = spacingSm;
+    derived.spacingXs = spacingXs;
+    derived.spacingSm = spacingSm;
+    derived.spacingMd = spacingMd;
+    derived.spacingLg = spacingLg;
+    derived.spacingXl = spacingXl;
+  }
+  return derived;
+}
+function mergeTokens(defaults, derived, override) {
   return {
-    mode,
-    // Global seed (shape values applied regardless of mode)
-    seed: {
-      borderRadius: cloud.shape.borderRadius,
-      fontSize: cloud.shape.fontSize
-    },
-    // Per-mode color overrides
-    light: { seed: mapColorToSeed(cloud.light) },
-    dark: { seed: mapColorToSeed(cloud.dark) }
+    ...defaults,
+    ...derived,
+    ...override
   };
 }
-function useResolvedWidgetConfig(widgetId) {
-  const { config, isLoading, error } = useWidgetConfig(widgetId);
-  const cloudTheme = useMemo(() => {
-    if (!(config == null ? void 0 : config.theme)) return void 0;
-    return cloudThemeToReactTheme(config.theme);
-  }, [config == null ? void 0 : config.theme]);
+function getSystemThemeMode() {
+  if (typeof window === "undefined") {
+    return "light";
+  }
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+const defaultTheme = {
+  mode: "dark",
+  compact: false,
+  tokens: darkDefaultTokens
+};
+function toKebabCase(str) {
+  return str.replace(/([A-Z])/g, "-$1").toLowerCase();
+}
+function tokensToCssVariables(tokens) {
+  const cssVars = {};
+  for (const [key, value] of Object.entries(tokens)) {
+    const cssVarName = `--taskon-${toKebabCase(key)}`;
+    if (typeof value === "number") {
+      cssVars[cssVarName] = `${value}px`;
+    } else {
+      cssVars[cssVarName] = value;
+    }
+  }
+  return cssVars;
+}
+function resolveTheme(config, systemMode) {
+  if (!config) {
+    return defaultTheme;
+  }
+  let resolvedMode;
+  if (config.mode === "auto") {
+    resolvedMode = systemMode;
+  } else if (config.mode) {
+    resolvedMode = config.mode;
+  } else {
+    resolvedMode = "dark";
+  }
+  const defaultTokens = resolvedMode === "light" ? lightDefaultTokens : darkDefaultTokens;
+  const modeConfig = resolvedMode === "light" ? config.light : config.dark;
+  const mergedSeed = {
+    ...config.seed,
+    ...modeConfig == null ? void 0 : modeConfig.seed
+  };
+  const derivedTokens = deriveTokens(mergedSeed, resolvedMode);
+  const mergedMap = {
+    ...config.map,
+    ...modeConfig == null ? void 0 : modeConfig.map
+  };
+  const finalTokens = mergeTokens(defaultTokens, derivedTokens, mergedMap);
   return {
-    functionConfig: (config == null ? void 0 : config.functionConfig) ?? null,
-    cloudTheme,
-    isConfigLoading: isLoading,
-    configError: error
+    mode: resolvedMode,
+    compact: config.compact ?? false,
+    tokens: finalTokens
   };
 }
-function WidgetShell({
-  widgetId,
-  isConfigLoading,
-  cloudTheme,
-  className,
-  errorMessage,
+function ThemeProvider({
+  theme: themeConfig,
   children
 }) {
-  if (widgetId && isConfigLoading) {
-    return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsxs("div", { className: `${className}-loading`, children: [
-      /* @__PURE__ */ jsx("div", { className: `${className}-loading-spinner` }),
-      /* @__PURE__ */ jsx("span", { children: "Loading config..." })
-    ] }) });
-  }
-  if (errorMessage) {
-    return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx("div", { className: `${className}-error`, children: /* @__PURE__ */ jsx("span", { className: `${className}-error-message`, children: errorMessage }) }) });
-  }
-  if (cloudTheme) {
-    return /* @__PURE__ */ jsx(ThemeProvider, { theme: cloudTheme, children });
-  }
-  return /* @__PURE__ */ jsx(Fragment, { children });
+  const [portalContainer, setPortalContainer] = useState(
+    null
+  );
+  const [systemMode, setSystemMode] = useState(
+    () => getSystemThemeMode()
+  );
+  const effectiveMode = themeConfig == null ? void 0 : themeConfig.mode;
+  useEffect(() => {
+    if (effectiveMode !== "auto") {
+      return;
+    }
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handler = (e) => {
+      setSystemMode(e.matches ? "dark" : "light");
+    };
+    mediaQuery.addEventListener("change", handler);
+    return () => mediaQuery.removeEventListener("change", handler);
+  }, [effectiveMode]);
+  const resolvedTheme = useMemo(
+    () => resolveTheme(themeConfig, systemMode),
+    [themeConfig, systemMode]
+  );
+  const cssVariables = useMemo(
+    () => tokensToCssVariables(resolvedTheme.tokens),
+    [resolvedTheme.tokens]
+  );
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: resolvedTheme, children: /* @__PURE__ */ jsx(ThemePortalContainerContext.Provider, { value: portalContainer, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: cssVariables,
+      "data-taskon-theme": resolvedTheme.mode,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: setPortalContainer,
+            "aria-hidden": "true",
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: 0,
+              height: 0
+            }
+          }
+        ),
+        children
+      ]
+    }
+  ) }) });
 }
 export {
+  useFocusGuards as A,
+  Branch as B,
+  DismissableLayer as C,
   Dialog as D,
+  useTaskOnPortalContainer as E,
   FocusScope as F,
-  ReactRemoveScroll as R,
-  WidgetShell as W,
-  useId as a,
-  useFocusGuards as b,
-  hideOthers as h,
-  useResolvedWidgetConfig as u
+  Primitive as P,
+  Root$1 as R,
+  ThemeProvider as T,
+  useTaskOnTheme as a,
+  useWidgetLocale as b,
+  useTranslation as c,
+  clearLocaleCache as d,
+  createLocaleLoader as e,
+  createT as f,
+  isSupportedLocale as g,
+  useTaskOnContext as h,
+  interpolate as i,
+  composeRefs as j,
+  createContextScope as k,
+  useComposedRefs as l,
+  createSlot as m,
+  useControllableState as n,
+  Presence as o,
+  preloadWidgetLocale as p,
+  composeEventHandlers as q,
+  useCallbackRef$1 as r,
+  Portal$1 as s,
+  dispatchDiscreteCustomEvent as t,
+  useTaskOnAuth as u,
+  useLayoutEffect2 as v,
+  TaskOnContext as w,
+  useId as x,
+  hideOthers as y,
+  ReactRemoveScroll as z
 };