{"version":3,"sources":["../../../../src/browser/useCssVar/core.ts"],"sourcesContent":["import { type Observable, observable } from \"@legendapp/state\";\nimport {\n  get,\n  createObserve,\n  onUnmount,\n  peek,\n  type DeepMaybeObservable,\n  type MaybeObservable,\n} from \"@usels/core\";\nimport { resolveWindowSource, type ConfigurableWindow } from \"@shared/configurable\";\nimport type { MaybeEventTarget } from \"../../types\";\nimport { createMutationObserver } from \"../../elements/useMutationObserver/core\";\n\nexport interface UseCssVarOptions extends ConfigurableWindow {\n  initialValue?: string;\n  /**\n   * Use MutationObserver to monitor variable changes\n   * @default false\n   */\n  observe?: boolean;\n}\n\nexport type UseCssVarReturn = Observable<string>;\n\n/**\n * Framework-agnostic reactive CSS custom property (CSS variable) tracker.\n *\n * Creates an `Observable<string>` that reflects (and writes back to) a CSS\n * custom property on a DOM element. Reactive inputs (`prop`, `target`, and\n * options) propagate through `observe()` — the old property is cleaned off\n * the previous element before the new one is written.\n *\n * Must be called inside a `useScope` factory.\n */\nexport function createCssVar(\n  prop: MaybeObservable<string | null | undefined>,\n  target?: MaybeEventTarget,\n  options?: DeepMaybeObservable<UseCssVarOptions>\n): UseCssVarReturn {\n  const opts$ = observable(options);\n  const win$ = resolveWindowSource(opts$.window as unknown as Observable<unknown>);\n\n  const initialValue = opts$.peek()?.initialValue ?? \"\";\n  const observeFlag = opts$.peek()?.observe ?? false;\n\n  const variable$ = observable<string>(initialValue);\n\n  // Track previous (prop, element) pair so we can remove the old CSS custom\n  // property when either input changes — same semantics as the legacy hook.\n  let prevProp: string | null | undefined = undefined;\n  let prevEl: Element | null = null;\n\n  const syncFromElement = (\n    key: string | null | undefined,\n    el: Element | null,\n    win: Window | null | undefined\n  ) => {\n    if (el && win && key) {\n      const value = win.getComputedStyle(el).getPropertyValue(key).trim();\n      variable$.set(value || variable$.peek() || initialValue);\n    }\n  };\n\n  // Watch prop + target + window: clean up old property and read new value.\n  createObserve(() => {\n    const key = get(prop);\n    const win = win$.get() as Window | null;\n    const docEl = win?.document?.documentElement ?? null;\n    const resolved = target != null ? ((get(target) as Element | null) ?? docEl) : docEl;\n    const el: Element | null = resolved;\n\n    if (prevEl && prevProp && (prevEl !== el || prevProp !== key)) {\n      (prevEl as HTMLElement).style.removeProperty(prevProp);\n    }\n\n    syncFromElement(key, el, win);\n    prevProp = key;\n    prevEl = el;\n  });\n\n  // Watch variable$ + target + prop: set/remove CSS property on element.\n  createObserve(() => {\n    const val = variable$.get();\n    const key = get(prop);\n    const win = win$.get() as Window | null;\n    const docEl = win?.document?.documentElement ?? null;\n    const el: Element | null = target != null ? ((get(target) as Element | null) ?? docEl) : docEl;\n\n    if (el && key) {\n      if (val == null || val === \"\") {\n        (el as HTMLElement).style.removeProperty(key);\n      } else {\n        (el as HTMLElement).style.setProperty(key, val);\n      }\n    }\n  });\n\n  // Optional MutationObserver — re-read when `style` / `class` attributes\n  // change. Construction-time flag\n  if (observeFlag) {\n    createMutationObserver(\n      (target ?? null) as MaybeEventTarget,\n      () => {\n        const win = win$.peek() as Window | null;\n        const docEl = win?.document?.documentElement ?? null;\n        const el = (target != null ? ((peek(target) as Element | null) ?? docEl) : docEl) ?? null;\n        syncFromElement(peek(prop), el, win);\n      },\n      { attributeFilter: [\"style\", \"class\"] }\n    );\n  }\n\n  onUnmount(() => {\n    prevEl = null;\n    prevProp = undefined;\n  });\n\n  return variable$;\n}\n"],"mappings":"AAAA,SAA0B,kBAAkB;AAC5C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AACP,SAAS,2BAAoD;AAE7D,SAAS,8BAA8B;AAuBhC,SAAS,aACd,MACA,QACA,SACiB;AACjB,QAAM,QAAQ,WAAW,OAAO;AAChC,QAAM,OAAO,oBAAoB,MAAM,MAAwC;AAE/E,QAAM,eAAe,MAAM,KAAK,GAAG,gBAAgB;AACnD,QAAM,cAAc,MAAM,KAAK,GAAG,WAAW;AAE7C,QAAM,YAAY,WAAmB,YAAY;AAIjD,MAAI,WAAsC;AAC1C,MAAI,SAAyB;AAE7B,QAAM,kBAAkB,CACtB,KACA,IACA,QACG;AACH,QAAI,MAAM,OAAO,KAAK;AACpB,YAAM,QAAQ,IAAI,iBAAiB,EAAE,EAAE,iBAAiB,GAAG,EAAE,KAAK;AAClE,gBAAU,IAAI,SAAS,UAAU,KAAK,KAAK,YAAY;AAAA,IACzD;AAAA,EACF;AAGA,gBAAc,MAAM;AAClB,UAAM,MAAM,IAAI,IAAI;AACpB,UAAM,MAAM,KAAK,IAAI;AACrB,UAAM,QAAQ,KAAK,UAAU,mBAAmB;AAChD,UAAM,WAAW,UAAU,OAAS,IAAI,MAAM,KAAwB,QAAS;AAC/E,UAAM,KAAqB;AAE3B,QAAI,UAAU,aAAa,WAAW,MAAM,aAAa,MAAM;AAC7D,MAAC,OAAuB,MAAM,eAAe,QAAQ;AAAA,IACvD;AAEA,oBAAgB,KAAK,IAAI,GAAG;AAC5B,eAAW;AACX,aAAS;AAAA,EACX,CAAC;AAGD,gBAAc,MAAM;AAClB,UAAM,MAAM,UAAU,IAAI;AAC1B,UAAM,MAAM,IAAI,IAAI;AACpB,UAAM,MAAM,KAAK,IAAI;AACrB,UAAM,QAAQ,KAAK,UAAU,mBAAmB;AAChD,UAAM,KAAqB,UAAU,OAAS,IAAI,MAAM,KAAwB,QAAS;AAEzF,QAAI,MAAM,KAAK;AACb,UAAI,OAAO,QAAQ,QAAQ,IAAI;AAC7B,QAAC,GAAmB,MAAM,eAAe,GAAG;AAAA,MAC9C,OAAO;AACL,QAAC,GAAmB,MAAM,YAAY,KAAK,GAAG;AAAA,MAChD;AAAA,IACF;AAAA,EACF,CAAC;AAID,MAAI,aAAa;AACf;AAAA,MACG,UAAU;AAAA,MACX,MAAM;AACJ,cAAM,MAAM,KAAK,KAAK;AACtB,cAAM,QAAQ,KAAK,UAAU,mBAAmB;AAChD,cAAM,MAAM,UAAU,OAAS,KAAK,MAAM,KAAwB,QAAS,UAAU;AACrF,wBAAgB,KAAK,IAAI,GAAG,IAAI,GAAG;AAAA,MACrC;AAAA,MACA,EAAE,iBAAiB,CAAC,SAAS,OAAO,EAAE;AAAA,IACxC;AAAA,EACF;AAEA,YAAU,MAAM;AACd,aAAS;AACT,eAAW;AAAA,EACb,CAAC;AAED,SAAO;AACT;","names":[]}