claude-mux 0.7.0 → 0.7.1

package/web/.svelte-kit/adapter-node/entries/pages/_page.svelte.js

@@ -1,9 +1,2507 @@
-import { Z as head, _ as attr_class, $ as attr, a0 as ensure_array_like, a1 as attr_style, a2 as stringify } from "../../chunks/index2.js";
-import { o as onDestroy, s as sessionStore, g as getProjectColor, a as stateColor } from "../../chunks/sessions.svelte.js";
-import { e as escape_html } from "../../chunks/context.js";
-function _page($$renderer, $$props) {
+import { a5 as derived, a6 as attributes, a7 as bind_props, a8 as spread_props, a9 as props_id, aa as clsx, a1 as ensure_array_like, ab as element, a2 as store_get, a3 as unsubscribe_stores, Z as attr_class, a0 as attr, _ as attr_style, $ as stringify, a4 as head } from "../../chunks/index2.js";
+import { g as goto } from "../../chunks/client.js";
+import { s as sessionStore, p as page, g as getProjectColor, a as stateColor } from "../../chunks/sessions.svelte.js";
+import { c as cn, B as Button } from "../../chunks/button.js";
+import { B as Badge } from "../../chunks/AllSessionsPanel.svelte_svelte_type_style_lang.js";
+import { s as styleToString, C as Context, a as attachRef, w as watch, E as ENTER, S as SPACE, i as isHTMLElement, c as createBitsAttrs, b as boolToEmptyStrOrUndef, d as boolToStr, g as getAriaChecked, m as mergeProps, e as createId, f as boxWith, n as noop, D as DialogRootState, h as DialogCloseState, j as DialogContentState, F as Focus_scope, k as Escape_layer, l as Dismissible_layer, T as Text_selection_layer, o as Scroll_lock, p as simpleBox, q as executeCallbacks, r as DOMContext, u as useId, P as Portal, t as Dialog_title$1, v as Dialog_overlay$1, A as Alert_dialog, x as Alert_dialog_content, y as Alert_dialog_header, z as Alert_dialog_title, B as Alert_dialog_description, G as Alert_dialog_footer, H as Alert_dialog_cancel, I as Alert_dialog_action } from "../../chunks/alert-dialog-description.js";
+import { i as is_array, b as get_prototype_of, o as object_prototype, e as escape_html } from "../../chunks/context.js";
+import "clsx";
+import { o as on } from "../../chunks/events.js";
+const empty = [];
+function snapshot(value, skip_warning = false, no_tojson = false) {
+  return clone(value, /* @__PURE__ */ new Map(), "", empty, null, no_tojson);
+}
+function clone(value, cloned, path, paths, original = null, no_tojson = false) {
+  if (typeof value === "object" && value !== null) {
+    var unwrapped = cloned.get(value);
+    if (unwrapped !== void 0) return unwrapped;
+    if (value instanceof Map) return (
+      /** @type {Snapshot<T>} */
+      new Map(value)
+    );
+    if (value instanceof Set) return (
+      /** @type {Snapshot<T>} */
+      new Set(value)
+    );
+    if (is_array(value)) {
+      var copy = (
+        /** @type {Snapshot<any>} */
+        Array(value.length)
+      );
+      cloned.set(value, copy);
+      if (original !== null) {
+        cloned.set(original, copy);
+      }
+      for (var i = 0; i < value.length; i += 1) {
+        var element2 = value[i];
+        if (i in value) {
+          copy[i] = clone(element2, cloned, path, paths, null, no_tojson);
+        }
+      }
+      return copy;
+    }
+    if (get_prototype_of(value) === object_prototype) {
+      copy = {};
+      cloned.set(value, copy);
+      if (original !== null) {
+        cloned.set(original, copy);
+      }
+      for (var key in value) {
+        copy[key] = clone(
+          // @ts-expect-error
+          value[key],
+          cloned,
+          path,
+          paths,
+          null,
+          no_tojson
+        );
+      }
+      return copy;
+    }
+    if (value instanceof Date) {
+      return (
+        /** @type {Snapshot<T>} */
+        structuredClone(value)
+      );
+    }
+    if (typeof /** @type {T & { toJSON?: any } } */
+    value.toJSON === "function" && !no_tojson) {
+      return clone(
+        /** @type {T & { toJSON(): any } } */
+        value.toJSON(),
+        cloned,
+        path,
+        paths,
+        // Associate the instance with the toJSON clone
+        value
+      );
+    }
+  }
+  if (value instanceof EventTarget) {
+    return (
+      /** @type {Snapshot<T>} */
+      value
+    );
+  }
+  try {
+    return (
+      /** @type {Snapshot<T>} */
+      structuredClone(value)
+    );
+  } catch (e) {
+    return (
+      /** @type {Snapshot<T>} */
+      value
+    );
+  }
+}
+const srOnlyStyles = {
+  position: "absolute",
+  width: "1px",
+  height: "1px",
+  padding: "0",
+  margin: "-1px",
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  whiteSpace: "nowrap",
+  borderWidth: "0",
+  transform: "translateX(-100%)"
+};
+const srOnlyStylesString = styleToString(srOnlyStyles);
+function isFunction(value) {
+  return typeof value === "function";
+}
+function extract(value, defaultValue) {
+  if (isFunction(value)) {
+    const getter = value;
+    const gotten = getter();
+    if (gotten === void 0) return defaultValue;
+    return gotten;
+  }
+  if (value === void 0) return defaultValue;
+  return value;
+}
+function useDebounce(callback, wait) {
+  let context = null;
+  const wait$ = extract(wait, 250);
+  function debounced(...args) {
+    if (context) {
+      if (context.timeout) {
+        clearTimeout(context.timeout);
+      }
+    } else {
+      let resolve;
+      let reject;
+      const promise = new Promise((res, rej) => {
+        resolve = res;
+        reject = rej;
+      });
+      context = { timeout: null, runner: null, promise, resolve, reject };
+    }
+    context.runner = async () => {
+      if (!context) return;
+      const ctx = context;
+      context = null;
+      try {
+        ctx.resolve(await callback.apply(this, args));
+      } catch (error) {
+        ctx.reject(error);
+      }
+    };
+    context.timeout = setTimeout(context.runner, wait$);
+    return context.promise;
+  }
+  debounced.cancel = async () => {
+    if (!context || context.timeout === null) {
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      if (!context || context.timeout === null) return;
+    }
+    clearTimeout(context.timeout);
+    context.reject("Cancelled");
+    context = null;
+  };
+  debounced.runScheduledNow = async () => {
+    if (!context || !context.timeout) {
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      if (!context || !context.timeout) return;
+    }
+    clearTimeout(context.timeout);
+    context.timeout = null;
+    await context.runner?.();
+  };
+  Object.defineProperty(debounced, "pending", {
+    enumerable: true,
+    get() {
+      return !!context?.timeout;
+    }
+  });
+  return debounced;
+}
+class IsMounted {
+  #isMounted = false;
+  constructor() {
+  }
+  get current() {
+    return this.#isMounted;
+  }
+}
+class Previous {
+  #previousCallback = () => void 0;
+  #previous = derived(() => this.#previousCallback());
+  constructor(getter, initialValue) {
+    let actualPrevious = void 0;
+    if (initialValue !== void 0) actualPrevious = initialValue;
+    this.#previousCallback = () => {
+      try {
+        return actualPrevious;
+      } finally {
+        actualPrevious = getter();
+      }
+    };
+  }
+  get current() {
+    return this.#previous();
+  }
+}
+const checkboxAttrs = createBitsAttrs({
+  component: "checkbox",
+  parts: ["root", "group", "group-label", "input"]
+});
+const CheckboxGroupContext = new Context("Checkbox.Group");
+const CheckboxRootContext = new Context("Checkbox.Root");
+class CheckboxRootState {
+  static create(opts, group = null) {
+    return CheckboxRootContext.set(new CheckboxRootState(opts, group));
+  }
+  opts;
+  group;
+  #trueName = derived(() => {
+    if (this.group && this.group.opts.name.current) return this.group.opts.name.current;
+    return this.opts.name.current;
+  });
+  get trueName() {
+    return this.#trueName();
+  }
+  set trueName($$value) {
+    return this.#trueName($$value);
+  }
+  #trueRequired = derived(() => {
+    if (this.group && this.group.opts.required.current) return true;
+    return this.opts.required.current;
+  });
+  get trueRequired() {
+    return this.#trueRequired();
+  }
+  set trueRequired($$value) {
+    return this.#trueRequired($$value);
+  }
+  #trueDisabled = derived(() => {
+    if (this.group && this.group.opts.disabled.current) return true;
+    return this.opts.disabled.current;
+  });
+  get trueDisabled() {
+    return this.#trueDisabled();
+  }
+  set trueDisabled($$value) {
+    return this.#trueDisabled($$value);
+  }
+  #trueReadonly = derived(() => {
+    if (this.group && this.group.opts.readonly.current) return true;
+    return this.opts.readonly.current;
+  });
+  get trueReadonly() {
+    return this.#trueReadonly();
+  }
+  set trueReadonly($$value) {
+    return this.#trueReadonly($$value);
+  }
+  attachment;
+  constructor(opts, group) {
+    this.opts = opts;
+    this.group = group;
+    this.attachment = attachRef(this.opts.ref);
+    this.onkeydown = this.onkeydown.bind(this);
+    this.onclick = this.onclick.bind(this);
+    watch.pre(
+      [
+        () => snapshot(this.group?.opts.value.current),
+        () => this.opts.value.current
+      ],
+      ([groupValue, value]) => {
+        if (!groupValue || !value) return;
+        this.opts.checked.current = groupValue.includes(value);
+      }
+    );
+    watch.pre(() => this.opts.checked.current, (checked) => {
+      if (!this.group) return;
+      if (checked) {
+        this.group?.addValue(this.opts.value.current);
+      } else {
+        this.group?.removeValue(this.opts.value.current);
+      }
+    });
+  }
+  onkeydown(e) {
+    if (this.trueDisabled || this.trueReadonly) return;
+    if (e.key === ENTER) {
+      e.preventDefault();
+      if (this.opts.type.current === "submit") {
+        const form = e.currentTarget.closest("form");
+        form?.requestSubmit();
+      }
+      return;
+    }
+    if (e.key === SPACE) {
+      e.preventDefault();
+      this.#toggle();
+    }
+  }
+  #toggle() {
+    if (this.opts.indeterminate.current) {
+      this.opts.indeterminate.current = false;
+      this.opts.checked.current = true;
+    } else {
+      this.opts.checked.current = !this.opts.checked.current;
+    }
+  }
+  onclick(e) {
+    if (this.trueDisabled || this.trueReadonly) return;
+    if (this.opts.type.current === "submit") {
+      this.#toggle();
+      return;
+    }
+    e.preventDefault();
+    this.#toggle();
+  }
+  #snippetProps = derived(() => ({
+    checked: this.opts.checked.current,
+    indeterminate: this.opts.indeterminate.current
+  }));
+  get snippetProps() {
+    return this.#snippetProps();
+  }
+  set snippetProps($$value) {
+    return this.#snippetProps($$value);
+  }
+  #props = derived(() => ({
+    id: this.opts.id.current,
+    role: "checkbox",
+    type: this.opts.type.current,
+    disabled: this.trueDisabled,
+    "aria-checked": getAriaChecked(this.opts.checked.current, this.opts.indeterminate.current),
+    "aria-required": boolToStr(this.trueRequired),
+    "aria-readonly": boolToStr(this.trueReadonly),
+    "data-disabled": boolToEmptyStrOrUndef(this.trueDisabled),
+    "data-readonly": boolToEmptyStrOrUndef(this.trueReadonly),
+    "data-state": getCheckboxDataState(this.opts.checked.current, this.opts.indeterminate.current),
+    [checkboxAttrs.root]: "",
+    onclick: this.onclick,
+    onkeydown: this.onkeydown,
+    ...this.attachment
+  }));
+  get props() {
+    return this.#props();
+  }
+  set props($$value) {
+    return this.#props($$value);
+  }
+}
+class CheckboxInputState {
+  static create() {
+    return new CheckboxInputState(CheckboxRootContext.get());
+  }
+  root;
+  #trueChecked = derived(() => {
+    if (!this.root.group) return this.root.opts.checked.current;
+    if (this.root.opts.value.current !== void 0 && this.root.group.opts.value.current.includes(this.root.opts.value.current)) {
+      return true;
+    }
+    return false;
+  });
+  get trueChecked() {
+    return this.#trueChecked();
+  }
+  set trueChecked($$value) {
+    return this.#trueChecked($$value);
+  }
+  #shouldRender = derived(() => Boolean(this.root.trueName));
+  get shouldRender() {
+    return this.#shouldRender();
+  }
+  set shouldRender($$value) {
+    return this.#shouldRender($$value);
+  }
+  constructor(root) {
+    this.root = root;
+    this.onfocus = this.onfocus.bind(this);
+  }
+  onfocus(_) {
+    if (!isHTMLElement(this.root.opts.ref.current)) return;
+    this.root.opts.ref.current.focus();
+  }
+  #props = derived(() => ({
+    type: "checkbox",
+    checked: this.root.opts.checked.current === true,
+    disabled: this.root.trueDisabled,
+    required: this.root.trueRequired,
+    name: this.root.trueName,
+    value: this.root.opts.value.current,
+    readonly: this.root.trueReadonly,
+    onfocus: this.onfocus
+  }));
+  get props() {
+    return this.#props();
+  }
+  set props($$value) {
+    return this.#props($$value);
+  }
+}
+function getCheckboxDataState(checked, indeterminate) {
+  if (indeterminate) return "indeterminate";
+  return checked ? "checked" : "unchecked";
+}
+function Hidden_input($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { value = void 0, $$slots, $$events, ...restProps } = $$props;
+    const mergedProps = mergeProps(restProps, {
+      "aria-hidden": "true",
+      tabindex: -1,
+      style: srOnlyStylesString
+    });
+    if (mergedProps.type === "checkbox") {
+      $$renderer2.push("<!--[-->");
+      $$renderer2.push(`<input${attributes({ ...mergedProps, value }, void 0, void 0, void 0, 4)}/>`);
+    } else {
+      $$renderer2.push("<!--[!-->");
+      $$renderer2.push(`<input${attributes({ value, ...mergedProps }, void 0, void 0, void 0, 4)}/>`);
+    }
+    $$renderer2.push(`<!--]-->`);
+    bind_props($$props, { value });
+  });
+}
+function Checkbox_input($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    const inputState = CheckboxInputState.create();
+    if (inputState.shouldRender) {
+      $$renderer2.push("<!--[-->");
+      Hidden_input($$renderer2, spread_props([inputState.props]));
+    } else {
+      $$renderer2.push("<!--[!-->");
+    }
+    $$renderer2.push(`<!--]-->`);
+  });
+}
+function Checkbox$1($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    const uid = props_id($$renderer2);
+    let {
+      checked = false,
+      ref = null,
+      onCheckedChange,
+      children,
+      disabled = false,
+      required = false,
+      name = void 0,
+      value = "on",
+      id = createId(uid),
+      indeterminate = false,
+      onIndeterminateChange,
+      child,
+      type = "button",
+      readonly,
+      $$slots,
+      $$events,
+      ...restProps
+    } = $$props;
+    const group = CheckboxGroupContext.getOr(null);
+    if (group && value) {
+      if (group.opts.value.current.includes(value)) {
+        checked = true;
+      } else {
+        checked = false;
+      }
+    }
+    watch.pre(() => value, () => {
+      if (group && value) {
+        if (group.opts.value.current.includes(value)) {
+          checked = true;
+        } else {
+          checked = false;
+        }
+      }
+    });
+    const rootState = CheckboxRootState.create(
+      {
+        checked: boxWith(() => checked, (v) => {
+          checked = v;
+          onCheckedChange?.(v);
+        }),
+        disabled: boxWith(() => disabled ?? false),
+        required: boxWith(() => required),
+        name: boxWith(() => name),
+        value: boxWith(() => value),
+        id: boxWith(() => id),
+        ref: boxWith(() => ref, (v) => ref = v),
+        indeterminate: boxWith(() => indeterminate, (v) => {
+          indeterminate = v;
+          onIndeterminateChange?.(v);
+        }),
+        type: boxWith(() => type),
+        readonly: boxWith(() => Boolean(readonly))
+      },
+      group
+    );
+    const mergedProps = mergeProps({ ...restProps }, rootState.props);
+    if (child) {
+      $$renderer2.push("<!--[-->");
+      child($$renderer2, { props: mergedProps, ...rootState.snippetProps });
+      $$renderer2.push(`<!---->`);
+    } else {
+      $$renderer2.push("<!--[!-->");
+      $$renderer2.push(`<button${attributes({ ...mergedProps })}>`);
+      children?.($$renderer2, rootState.snippetProps);
+      $$renderer2.push(`<!----></button>`);
+    }
+    $$renderer2.push(`<!--]--> `);
+    Checkbox_input($$renderer2);
+    $$renderer2.push(`<!---->`);
+    bind_props($$props, { checked, ref, indeterminate });
+  });
+}
+function Dialog$1($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      open = false,
+      onOpenChange = noop,
+      onOpenChangeComplete = noop,
+      children
+    } = $$props;
+    DialogRootState.create({
+      variant: boxWith(() => "dialog"),
+      open: boxWith(() => open, (v) => {
+        open = v;
+        onOpenChange(v);
+      }),
+      onOpenChangeComplete: boxWith(() => onOpenChangeComplete)
+    });
+    children?.($$renderer2);
+    $$renderer2.push(`<!---->`);
+    bind_props($$props, { open });
+  });
+}
+function Dialog_close($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    const uid = props_id($$renderer2);
+    let {
+      children,
+      child,
+      id = createId(uid),
+      ref = null,
+      disabled = false,
+      $$slots,
+      $$events,
+      ...restProps
+    } = $$props;
+    const closeState = DialogCloseState.create({
+      variant: boxWith(() => "close"),
+      id: boxWith(() => id),
+      ref: boxWith(() => ref, (v) => ref = v),
+      disabled: boxWith(() => Boolean(disabled))
+    });
+    const mergedProps = mergeProps(restProps, closeState.props);
+    if (child) {
+      $$renderer2.push("<!--[-->");
+      child($$renderer2, { props: mergedProps });
+      $$renderer2.push(`<!---->`);
+    } else {
+      $$renderer2.push("<!--[!-->");
+      $$renderer2.push(`<button${attributes({ ...mergedProps })}>`);
+      children?.($$renderer2);
+      $$renderer2.push(`<!----></button>`);
+    }
+    $$renderer2.push(`<!--]-->`);
+    bind_props($$props, { ref });
+  });
+}
+function Dialog_content$1($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    const uid = props_id($$renderer2);
+    let {
+      id = createId(uid),
+      children,
+      child,
+      ref = null,
+      forceMount = false,
+      onCloseAutoFocus = noop,
+      onOpenAutoFocus = noop,
+      onEscapeKeydown = noop,
+      onInteractOutside = noop,
+      trapFocus = true,
+      preventScroll = true,
+      restoreScrollDelay = null,
+      $$slots,
+      $$events,
+      ...restProps
+    } = $$props;
+    const contentState = DialogContentState.create({
+      id: boxWith(() => id),
+      ref: boxWith(() => ref, (v) => ref = v)
+    });
+    const mergedProps = mergeProps(restProps, contentState.props);
+    if (contentState.shouldRender || forceMount) {
+      $$renderer2.push("<!--[-->");
+      {
+        let focusScope = function($$renderer3, { props: focusScopeProps }) {
+          Escape_layer($$renderer3, spread_props([
+            mergedProps,
+            {
+              enabled: contentState.root.opts.open.current,
+              ref: contentState.opts.ref,
+              onEscapeKeydown: (e) => {
+                onEscapeKeydown(e);
+                if (e.defaultPrevented) return;
+                contentState.root.handleClose();
+              },
+              children: ($$renderer4) => {
+                Dismissible_layer($$renderer4, spread_props([
+                  mergedProps,
+                  {
+                    ref: contentState.opts.ref,
+                    enabled: contentState.root.opts.open.current,
+                    onInteractOutside: (e) => {
+                      onInteractOutside(e);
+                      if (e.defaultPrevented) return;
+                      contentState.root.handleClose();
+                    },
+                    children: ($$renderer5) => {
+                      Text_selection_layer($$renderer5, spread_props([
+                        mergedProps,
+                        {
+                          ref: contentState.opts.ref,
+                          enabled: contentState.root.opts.open.current,
+                          children: ($$renderer6) => {
+                            if (child) {
+                              $$renderer6.push("<!--[-->");
+                              if (contentState.root.opts.open.current) {
+                                $$renderer6.push("<!--[-->");
+                                Scroll_lock($$renderer6, { preventScroll, restoreScrollDelay });
+                              } else {
+                                $$renderer6.push("<!--[!-->");
+                              }
+                              $$renderer6.push(`<!--]--> `);
+                              child($$renderer6, {
+                                props: mergeProps(mergedProps, focusScopeProps),
+                                ...contentState.snippetProps
+                              });
+                              $$renderer6.push(`<!---->`);
+                            } else {
+                              $$renderer6.push("<!--[!-->");
+                              Scroll_lock($$renderer6, { preventScroll });
+                              $$renderer6.push(`<!----> <div${attributes({ ...mergeProps(mergedProps, focusScopeProps) })}>`);
+                              children?.($$renderer6);
+                              $$renderer6.push(`<!----></div>`);
+                            }
+                            $$renderer6.push(`<!--]-->`);
+                          },
+                          $$slots: { default: true }
+                        }
+                      ]));
+                    },
+                    $$slots: { default: true }
+                  }
+                ]));
+              },
+              $$slots: { default: true }
+            }
+          ]));
+        };
+        Focus_scope($$renderer2, {
+          ref: contentState.opts.ref,
+          loop: true,
+          trapFocus,
+          enabled: contentState.root.opts.open.current,
+          onOpenAutoFocus,
+          onCloseAutoFocus,
+          focusScope
+        });
+      }
+    } else {
+      $$renderer2.push("<!--[!-->");
+    }
+    $$renderer2.push(`<!--]-->`);
+    bind_props($$props, { ref });
+  });
+}
+class SvelteResizeObserver {
+  #node;
+  #onResize;
+  constructor(node, onResize) {
+    this.#node = node;
+    this.#onResize = onResize;
+    this.handler = this.handler.bind(this);
+  }
+  handler() {
+    let rAF = 0;
+    const _node = this.#node();
+    if (!_node) return;
+    const resizeObserver = new ResizeObserver(() => {
+      cancelAnimationFrame(rAF);
+      rAF = window.requestAnimationFrame(this.#onResize);
+    });
+    resizeObserver.observe(_node);
+    return () => {
+      window.cancelAnimationFrame(rAF);
+      resizeObserver.unobserve(_node);
+    };
+  }
+}
+class StateMachine {
+  state;
+  #machine;
+  constructor(initialState, machine) {
+    this.state = simpleBox(initialState);
+    this.#machine = machine;
+    this.dispatch = this.dispatch.bind(this);
+  }
+  #reducer(event) {
+    const nextState = this.#machine[this.state.current][event];
+    return nextState ?? this.state.current;
+  }
+  dispatch(event) {
+    this.state.current = this.#reducer(event);
+  }
+}
+const presenceMachine = {
+  mounted: { UNMOUNT: "unmounted", ANIMATION_OUT: "unmountSuspended" },
+  unmountSuspended: { MOUNT: "mounted", ANIMATION_END: "unmounted" },
+  unmounted: { MOUNT: "mounted" }
+};
+class Presence {
+  opts;
+  prevAnimationNameState = "none";
+  styles = {};
+  initialStatus;
+  previousPresent;
+  machine;
+  present;
+  constructor(opts) {
+    this.opts = opts;
+    this.present = this.opts.open;
+    this.initialStatus = opts.open.current ? "mounted" : "unmounted";
+    this.previousPresent = new Previous(() => this.present.current);
+    this.machine = new StateMachine(this.initialStatus, presenceMachine);
+    this.handleAnimationEnd = this.handleAnimationEnd.bind(this);
+    this.handleAnimationStart = this.handleAnimationStart.bind(this);
+    watchPresenceChange(this);
+    watchStatusChange(this);
+    watchRefChange(this);
+  }
+  /**
+   * Triggering an ANIMATION_OUT during an ANIMATION_IN will fire an `animationcancel`
+   * event for ANIMATION_IN after we have entered `unmountSuspended` state. So, we
+   * make sure we only trigger ANIMATION_END for the currently active animation.
+   */
+  handleAnimationEnd(event) {
+    if (!this.opts.ref.current) return;
+    const currAnimationName = getAnimationName(this.opts.ref.current);
+    const isCurrentAnimation = currAnimationName.includes(event.animationName) || currAnimationName === "none";
+    if (event.target === this.opts.ref.current && isCurrentAnimation) {
+      this.machine.dispatch("ANIMATION_END");
+    }
+  }
+  handleAnimationStart(event) {
+    if (!this.opts.ref.current) return;
+    if (event.target === this.opts.ref.current) {
+      this.prevAnimationNameState = getAnimationName(this.opts.ref.current);
+    }
+  }
+  #isPresent = derived(() => {
+    return ["mounted", "unmountSuspended"].includes(this.machine.state.current);
+  });
+  get isPresent() {
+    return this.#isPresent();
+  }
+  set isPresent($$value) {
+    return this.#isPresent($$value);
+  }
+}
+function watchPresenceChange(state) {
+  watch(() => state.present.current, () => {
+    if (!state.opts.ref.current) return;
+    const hasPresentChanged = state.present.current !== state.previousPresent.current;
+    if (!hasPresentChanged) return;
+    const prevAnimationName = state.prevAnimationNameState;
+    const currAnimationName = getAnimationName(state.opts.ref.current);
+    if (state.present.current) {
+      state.machine.dispatch("MOUNT");
+    } else if (currAnimationName === "none" || state.styles.display === "none") {
+      state.machine.dispatch("UNMOUNT");
+    } else {
+      const isAnimating = prevAnimationName !== currAnimationName;
+      if (state.previousPresent.current && isAnimating) {
+        state.machine.dispatch("ANIMATION_OUT");
+      } else {
+        state.machine.dispatch("UNMOUNT");
+      }
+    }
+  });
+}
+function watchStatusChange(state) {
+  watch(() => state.machine.state.current, () => {
+    if (!state.opts.ref.current) return;
+    const currAnimationName = getAnimationName(state.opts.ref.current);
+    state.prevAnimationNameState = state.machine.state.current === "mounted" ? currAnimationName : "none";
+  });
+}
+function watchRefChange(state) {
+  watch(() => state.opts.ref.current, () => {
+    if (!state.opts.ref.current) return;
+    state.styles = getComputedStyle(state.opts.ref.current);
+    return executeCallbacks(on(state.opts.ref.current, "animationstart", state.handleAnimationStart), on(state.opts.ref.current, "animationcancel", state.handleAnimationEnd), on(state.opts.ref.current, "animationend", state.handleAnimationEnd));
+  });
+}
+function getAnimationName(node) {
+  return node ? getComputedStyle(node).animationName || "none" : "none";
+}
+function Presence_layer($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { open, forceMount, presence, ref } = $$props;
+    const presenceState = new Presence({ open: boxWith(() => open), ref });
+    if (forceMount || open || presenceState.isPresent) {
+      $$renderer2.push("<!--[-->");
+      presence?.($$renderer2, { present: presenceState.isPresent });
+      $$renderer2.push(`<!---->`);
+    } else {
+      $$renderer2.push("<!--[!-->");
+    }
+    $$renderer2.push(`<!--]-->`);
+  });
+}
+function clamp(n, min, max) {
+  return Math.min(max, Math.max(min, n));
+}
+const scrollAreaAttrs = createBitsAttrs({
+  component: "scroll-area",
+  parts: ["root", "viewport", "corner", "thumb", "scrollbar"]
+});
+const ScrollAreaRootContext = new Context("ScrollArea.Root");
+const ScrollAreaScrollbarContext = new Context("ScrollArea.Scrollbar");
+const ScrollAreaScrollbarVisibleContext = new Context("ScrollArea.ScrollbarVisible");
+const ScrollAreaScrollbarAxisContext = new Context("ScrollArea.ScrollbarAxis");
+const ScrollAreaScrollbarSharedContext = new Context("ScrollArea.ScrollbarShared");
+class ScrollAreaRootState {
+  static create(opts) {
+    return ScrollAreaRootContext.set(new ScrollAreaRootState(opts));
+  }
+  opts;
+  attachment;
+  scrollAreaNode = null;
+  viewportNode = null;
+  contentNode = null;
+  scrollbarXNode = null;
+  scrollbarYNode = null;
+  cornerWidth = 0;
+  cornerHeight = 0;
+  scrollbarXEnabled = false;
+  scrollbarYEnabled = false;
+  domContext;
+  constructor(opts) {
+    this.opts = opts;
+    this.attachment = attachRef(opts.ref, (v) => this.scrollAreaNode = v);
+    this.domContext = new DOMContext(opts.ref);
+  }
+  #props = derived(() => ({
+    id: this.opts.id.current,
+    dir: this.opts.dir.current,
+    style: {
+      position: "relative",
+      "--bits-scroll-area-corner-height": `${this.cornerHeight}px`,
+      "--bits-scroll-area-corner-width": `${this.cornerWidth}px`
+    },
+    [scrollAreaAttrs.root]: "",
+    ...this.attachment
+  }));
+  get props() {
+    return this.#props();
+  }
+  set props($$value) {
+    return this.#props($$value);
+  }
+}
+class ScrollAreaViewportState {
+  static create(opts) {
+    return new ScrollAreaViewportState(opts, ScrollAreaRootContext.get());
+  }
+  opts;
+  root;
+  attachment;
+  #contentId = simpleBox(useId());
+  #contentRef = simpleBox(null);
+  contentAttachment = attachRef(this.#contentRef, (v) => this.root.contentNode = v);
+  constructor(opts, root) {
+    this.opts = opts;
+    this.root = root;
+    this.attachment = attachRef(opts.ref, (v) => this.root.viewportNode = v);
+  }
+  #props = derived(() => ({
+    id: this.opts.id.current,
+    style: {
+      overflowX: this.root.scrollbarXEnabled ? "scroll" : "hidden",
+      overflowY: this.root.scrollbarYEnabled ? "scroll" : "hidden"
+    },
+    [scrollAreaAttrs.viewport]: "",
+    ...this.attachment
+  }));
+  get props() {
+    return this.#props();
+  }
+  set props($$value) {
+    return this.#props($$value);
+  }
+  #contentProps = derived(() => ({
+    id: this.#contentId.current,
+    "data-scroll-area-content": "",
+    style: {
+      minWidth: this.root.scrollbarXEnabled ? "fit-content" : void 0
+    },
+    ...this.contentAttachment
+  }));
+  get contentProps() {
+    return this.#contentProps();
+  }
+  set contentProps($$value) {
+    return this.#contentProps($$value);
+  }
+}
+class ScrollAreaScrollbarState {
+  static create(opts) {
+    return ScrollAreaScrollbarContext.set(new ScrollAreaScrollbarState(opts, ScrollAreaRootContext.get()));
+  }
+  opts;
+  root;
+  #isHorizontal = derived(() => this.opts.orientation.current === "horizontal");
+  get isHorizontal() {
+    return this.#isHorizontal();
+  }
+  set isHorizontal($$value) {
+    return this.#isHorizontal($$value);
+  }
+  hasThumb = false;
+  constructor(opts, root) {
+    this.opts = opts;
+    this.root = root;
+    watch(() => this.isHorizontal, (isHorizontal) => {
+      if (isHorizontal) {
+        this.root.scrollbarXEnabled = true;
+        return () => {
+          this.root.scrollbarXEnabled = false;
+        };
+      } else {
+        this.root.scrollbarYEnabled = true;
+        return () => {
+          this.root.scrollbarYEnabled = false;
+        };
+      }
+    });
+  }
+}
+class ScrollAreaScrollbarHoverState {
+  static create() {
+    return new ScrollAreaScrollbarHoverState(ScrollAreaScrollbarContext.get());
+  }
+  scrollbar;
+  root;
+  isVisible = false;
+  constructor(scrollbar) {
+    this.scrollbar = scrollbar;
+    this.root = scrollbar.root;
+  }
+  #props = derived(() => ({ "data-state": this.isVisible ? "visible" : "hidden" }));
+  get props() {
+    return this.#props();
+  }
+  set props($$value) {
+    return this.#props($$value);
+  }
+}
+class ScrollAreaScrollbarScrollState {
+  static create() {
+    return new ScrollAreaScrollbarScrollState(ScrollAreaScrollbarContext.get());
+  }
+  scrollbar;
+  root;
+  machine = new StateMachine("hidden", {
+    hidden: { SCROLL: "scrolling" },
+    scrolling: { SCROLL_END: "idle", POINTER_ENTER: "interacting" },
+    interacting: { SCROLL: "interacting", POINTER_LEAVE: "idle" },
+    idle: {
+      HIDE: "hidden",
+      SCROLL: "scrolling",
+      POINTER_ENTER: "interacting"
+    }
+  });
+  #isHidden = derived(() => this.machine.state.current === "hidden");
+  get isHidden() {
+    return this.#isHidden();
+  }
+  set isHidden($$value) {
+    return this.#isHidden($$value);
+  }
+  constructor(scrollbar) {
+    this.scrollbar = scrollbar;
+    this.root = scrollbar.root;
+    useDebounce(() => this.machine.dispatch("SCROLL_END"), 100);
+    this.onpointerenter = this.onpointerenter.bind(this);
+    this.onpointerleave = this.onpointerleave.bind(this);
+  }
+  onpointerenter(_) {
+    this.machine.dispatch("POINTER_ENTER");
+  }
+  onpointerleave(_) {
+    this.machine.dispatch("POINTER_LEAVE");
+  }
+  #props = derived(() => ({
+    "data-state": this.machine.state.current === "hidden" ? "hidden" : "visible",
+    onpointerenter: this.onpointerenter,
+    onpointerleave: this.onpointerleave
+  }));
+  get props() {
+    return this.#props();
+  }
+  set props($$value) {
+    return this.#props($$value);
+  }
+}
+class ScrollAreaScrollbarAutoState {
+  static create() {
+    return new ScrollAreaScrollbarAutoState(ScrollAreaScrollbarContext.get());
+  }
+  scrollbar;
+  root;
+  isVisible = false;
+  constructor(scrollbar) {
+    this.scrollbar = scrollbar;
+    this.root = scrollbar.root;
+    const handleResize = useDebounce(
+      () => {
+        const viewportNode = this.root.viewportNode;
+        if (!viewportNode) return;
+        const isOverflowX = viewportNode.offsetWidth < viewportNode.scrollWidth;
+        const isOverflowY = viewportNode.offsetHeight < viewportNode.scrollHeight;
+        this.isVisible = this.scrollbar.isHorizontal ? isOverflowX : isOverflowY;
+      },
+      10
+    );
+    new SvelteResizeObserver(() => this.root.viewportNode, handleResize);
+    new SvelteResizeObserver(() => this.root.contentNode, handleResize);
+  }
+  #props = derived(() => ({ "data-state": this.isVisible ? "visible" : "hidden" }));
+  get props() {
+    return this.#props();
+  }
+  set props($$value) {
+    return this.#props($$value);
+  }
+}
+class ScrollAreaScrollbarVisibleState {
+  static create() {
+    return ScrollAreaScrollbarVisibleContext.set(new ScrollAreaScrollbarVisibleState(ScrollAreaScrollbarContext.get()));
+  }
+  scrollbar;
+  root;
+  thumbNode = null;
+  pointerOffset = 0;
+  sizes = {
+    content: 0,
+    viewport: 0,
+    scrollbar: { size: 0, paddingStart: 0, paddingEnd: 0 }
+  };
+  #thumbRatio = derived(() => getThumbRatio(this.sizes.viewport, this.sizes.content));
+  get thumbRatio() {
+    return this.#thumbRatio();
+  }
+  set thumbRatio($$value) {
+    return this.#thumbRatio($$value);
+  }
+  #hasThumb = derived(() => Boolean(this.thumbRatio > 0 && this.thumbRatio < 1));
+  get hasThumb() {
+    return this.#hasThumb();
+  }
+  set hasThumb($$value) {
+    return this.#hasThumb($$value);
+  }
+  prevTransformStyle = "";
+  constructor(scrollbar) {
+    this.scrollbar = scrollbar;
+    this.root = scrollbar.root;
+  }
+  setSizes(sizes) {
+    this.sizes = sizes;
+  }
+  getScrollPosition(pointerPos, dir) {
+    return getScrollPositionFromPointer({
+      pointerPos,
+      pointerOffset: this.pointerOffset,
+      sizes: this.sizes,
+      dir
+    });
+  }
+  onThumbPointerUp() {
+    this.pointerOffset = 0;
+  }
+  onThumbPointerDown(pointerPos) {
+    this.pointerOffset = pointerPos;
+  }
+  xOnThumbPositionChange() {
+    if (!(this.root.viewportNode && this.thumbNode)) return;
+    const scrollPos = this.root.viewportNode.scrollLeft;
+    const offset = getThumbOffsetFromScroll({
+      scrollPos,
+      sizes: this.sizes,
+      dir: this.root.opts.dir.current
+    });
+    const transformStyle = `translate3d(${offset}px, 0, 0)`;
+    this.thumbNode.style.transform = transformStyle;
+    this.prevTransformStyle = transformStyle;
+  }
+  xOnWheelScroll(scrollPos) {
+    if (!this.root.viewportNode) return;
+    this.root.viewportNode.scrollLeft = scrollPos;
+  }
+  xOnDragScroll(pointerPos) {
+    if (!this.root.viewportNode) return;
+    this.root.viewportNode.scrollLeft = this.getScrollPosition(pointerPos, this.root.opts.dir.current);
+  }
+  yOnThumbPositionChange() {
+    if (!(this.root.viewportNode && this.thumbNode)) return;
+    const scrollPos = this.root.viewportNode.scrollTop;
+    const offset = getThumbOffsetFromScroll({ scrollPos, sizes: this.sizes });
+    const transformStyle = `translate3d(0, ${offset}px, 0)`;
+    this.thumbNode.style.transform = transformStyle;
+    this.prevTransformStyle = transformStyle;
+  }
+  yOnWheelScroll(scrollPos) {
+    if (!this.root.viewportNode) return;
+    this.root.viewportNode.scrollTop = scrollPos;
+  }
+  yOnDragScroll(pointerPos) {
+    if (!this.root.viewportNode) return;
+    this.root.viewportNode.scrollTop = this.getScrollPosition(pointerPos, this.root.opts.dir.current);
+  }
+}
+class ScrollAreaScrollbarXState {
+  static create(opts) {
+    return ScrollAreaScrollbarAxisContext.set(new ScrollAreaScrollbarXState(opts, ScrollAreaScrollbarVisibleContext.get()));
+  }
+  opts;
+  scrollbarVis;
+  root;
+  scrollbar;
+  attachment;
+  computedStyle;
+  constructor(opts, scrollbarVis) {
+    this.opts = opts;
+    this.scrollbarVis = scrollbarVis;
+    this.root = scrollbarVis.root;
+    this.scrollbar = scrollbarVis.scrollbar;
+    this.attachment = attachRef(this.scrollbar.opts.ref, (v) => this.root.scrollbarXNode = v);
+  }
+  onThumbPointerDown = (pointerPos) => {
+    this.scrollbarVis.onThumbPointerDown(pointerPos.x);
+  };
+  onDragScroll = (pointerPos) => {
+    this.scrollbarVis.xOnDragScroll(pointerPos.x);
+  };
+  onThumbPointerUp = () => {
+    this.scrollbarVis.onThumbPointerUp();
+  };
+  onThumbPositionChange = () => {
+    this.scrollbarVis.xOnThumbPositionChange();
+  };
+  onWheelScroll = (e, maxScrollPos) => {
+    if (!this.root.viewportNode) return;
+    const scrollPos = this.root.viewportNode.scrollLeft + e.deltaX;
+    this.scrollbarVis.xOnWheelScroll(scrollPos);
+    if (isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos)) {
+      e.preventDefault();
+    }
+  };
+  onResize = () => {
+    if (!(this.scrollbar.opts.ref.current && this.root.viewportNode && this.computedStyle)) return;
+    this.scrollbarVis.setSizes({
+      content: this.root.viewportNode.scrollWidth,
+      viewport: this.root.viewportNode.offsetWidth,
+      scrollbar: {
+        size: this.scrollbar.opts.ref.current.clientWidth,
+        paddingStart: toInt(this.computedStyle.paddingLeft),
+        paddingEnd: toInt(this.computedStyle.paddingRight)
+      }
+    });
+  };
+  #thumbSize = derived(() => {
+    return getThumbSize(this.scrollbarVis.sizes);
+  });
+  get thumbSize() {
+    return this.#thumbSize();
+  }
+  set thumbSize($$value) {
+    return this.#thumbSize($$value);
+  }
+  #props = derived(() => ({
+    id: this.scrollbar.opts.id.current,
+    "data-orientation": "horizontal",
+    style: {
+      bottom: 0,
+      left: this.root.opts.dir.current === "rtl" ? "var(--bits-scroll-area-corner-width)" : 0,
+      right: this.root.opts.dir.current === "ltr" ? "var(--bits-scroll-area-corner-width)" : 0,
+      "--bits-scroll-area-thumb-width": `${this.thumbSize}px`
+    },
+    ...this.attachment
+  }));
+  get props() {
+    return this.#props();
+  }
+  set props($$value) {
+    return this.#props($$value);
+  }
+}
+class ScrollAreaScrollbarYState {
+  static create(opts) {
+    return ScrollAreaScrollbarAxisContext.set(new ScrollAreaScrollbarYState(opts, ScrollAreaScrollbarVisibleContext.get()));
+  }
+  opts;
+  scrollbarVis;
+  root;
+  scrollbar;
+  attachment;
+  computedStyle;
+  constructor(opts, scrollbarVis) {
+    this.opts = opts;
+    this.scrollbarVis = scrollbarVis;
+    this.root = scrollbarVis.root;
+    this.scrollbar = scrollbarVis.scrollbar;
+    this.attachment = attachRef(this.scrollbar.opts.ref, (v) => this.root.scrollbarYNode = v);
+    this.onThumbPointerDown = this.onThumbPointerDown.bind(this);
+    this.onDragScroll = this.onDragScroll.bind(this);
+    this.onThumbPointerUp = this.onThumbPointerUp.bind(this);
+    this.onThumbPositionChange = this.onThumbPositionChange.bind(this);
+    this.onWheelScroll = this.onWheelScroll.bind(this);
+    this.onResize = this.onResize.bind(this);
+  }
+  onThumbPointerDown(pointerPos) {
+    this.scrollbarVis.onThumbPointerDown(pointerPos.y);
+  }
+  onDragScroll(pointerPos) {
+    this.scrollbarVis.yOnDragScroll(pointerPos.y);
+  }
+  onThumbPointerUp() {
+    this.scrollbarVis.onThumbPointerUp();
+  }
+  onThumbPositionChange() {
+    this.scrollbarVis.yOnThumbPositionChange();
+  }
+  onWheelScroll(e, maxScrollPos) {
+    if (!this.root.viewportNode) return;
+    const scrollPos = this.root.viewportNode.scrollTop + e.deltaY;
+    this.scrollbarVis.yOnWheelScroll(scrollPos);
+    if (isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos)) {
+      e.preventDefault();
+    }
+  }
+  onResize() {
+    if (!(this.scrollbar.opts.ref.current && this.root.viewportNode && this.computedStyle)) return;
+    this.scrollbarVis.setSizes({
+      content: this.root.viewportNode.scrollHeight,
+      viewport: this.root.viewportNode.offsetHeight,
+      scrollbar: {
+        size: this.scrollbar.opts.ref.current.clientHeight,
+        paddingStart: toInt(this.computedStyle.paddingTop),
+        paddingEnd: toInt(this.computedStyle.paddingBottom)
+      }
+    });
+  }
+  #thumbSize = derived(() => {
+    return getThumbSize(this.scrollbarVis.sizes);
+  });
+  get thumbSize() {
+    return this.#thumbSize();
+  }
+  set thumbSize($$value) {
+    return this.#thumbSize($$value);
+  }
+  #props = derived(() => ({
+    id: this.scrollbar.opts.id.current,
+    "data-orientation": "vertical",
+    style: {
+      top: 0,
+      right: this.root.opts.dir.current === "ltr" ? 0 : void 0,
+      left: this.root.opts.dir.current === "rtl" ? 0 : void 0,
+      bottom: "var(--bits-scroll-area-corner-height)",
+      "--bits-scroll-area-thumb-height": `${this.thumbSize}px`
+    },
+    ...this.attachment
+  }));
+  get props() {
+    return this.#props();
+  }
+  set props($$value) {
+    return this.#props($$value);
+  }
+}
+class ScrollAreaScrollbarSharedState {
+  static create() {
+    return ScrollAreaScrollbarSharedContext.set(new ScrollAreaScrollbarSharedState(ScrollAreaScrollbarAxisContext.get()));
+  }
+  scrollbarState;
+  root;
+  scrollbarVis;
+  scrollbar;
+  rect = null;
+  prevWebkitUserSelect = "";
+  handleResize;
+  handleThumbPositionChange;
+  handleWheelScroll;
+  handleThumbPointerDown;
+  handleThumbPointerUp;
+  #maxScrollPos = derived(() => this.scrollbarVis.sizes.content - this.scrollbarVis.sizes.viewport);
+  get maxScrollPos() {
+    return this.#maxScrollPos();
+  }
+  set maxScrollPos($$value) {
+    return this.#maxScrollPos($$value);
+  }
+  constructor(scrollbarState) {
+    this.scrollbarState = scrollbarState;
+    this.root = scrollbarState.root;
+    this.scrollbarVis = scrollbarState.scrollbarVis;
+    this.scrollbar = scrollbarState.scrollbarVis.scrollbar;
+    this.handleResize = useDebounce(() => this.scrollbarState.onResize(), 10);
+    this.handleThumbPositionChange = this.scrollbarState.onThumbPositionChange;
+    this.handleWheelScroll = this.scrollbarState.onWheelScroll;
+    this.handleThumbPointerDown = this.scrollbarState.onThumbPointerDown;
+    this.handleThumbPointerUp = this.scrollbarState.onThumbPointerUp;
+    new SvelteResizeObserver(() => this.scrollbar.opts.ref.current, this.handleResize);
+    new SvelteResizeObserver(() => this.root.contentNode, this.handleResize);
+    this.onpointerdown = this.onpointerdown.bind(this);
+    this.onpointermove = this.onpointermove.bind(this);
+    this.onpointerup = this.onpointerup.bind(this);
+  }
+  handleDragScroll(e) {
+    if (!this.rect) return;
+    const x = e.clientX - this.rect.left;
+    const y = e.clientY - this.rect.top;
+    this.scrollbarState.onDragScroll({ x, y });
+  }
+  onpointerdown(e) {
+    if (e.button !== 0) return;
+    const target = e.target;
+    target.setPointerCapture(e.pointerId);
+    this.rect = this.scrollbar.opts.ref.current?.getBoundingClientRect() ?? null;
+    this.prevWebkitUserSelect = this.root.domContext.getDocument().body.style.webkitUserSelect;
+    this.root.domContext.getDocument().body.style.webkitUserSelect = "none";
+    if (this.root.viewportNode) this.root.viewportNode.style.scrollBehavior = "auto";
+    this.handleDragScroll(e);
+  }
+  onpointermove(e) {
+    this.handleDragScroll(e);
+  }
+  onpointerup(e) {
+    const target = e.target;
+    if (target.hasPointerCapture(e.pointerId)) {
+      target.releasePointerCapture(e.pointerId);
+    }
+    this.root.domContext.getDocument().body.style.webkitUserSelect = this.prevWebkitUserSelect;
+    if (this.root.viewportNode) this.root.viewportNode.style.scrollBehavior = "";
+    this.rect = null;
+  }
+  #props = derived(() => mergeProps({
+    ...this.scrollbarState.props,
+    style: { position: "absolute", ...this.scrollbarState.props.style },
+    [scrollAreaAttrs.scrollbar]: "",
+    onpointerdown: this.onpointerdown,
+    onpointermove: this.onpointermove,
+    onpointerup: this.onpointerup
+  }));
+  get props() {
+    return this.#props();
+  }
+  set props($$value) {
+    return this.#props($$value);
+  }
+}
+class ScrollAreaThumbImplState {
+  static create(opts) {
+    return new ScrollAreaThumbImplState(opts, ScrollAreaScrollbarSharedContext.get());
+  }
+  opts;
+  scrollbarState;
+  attachment;
+  #root;
+  #removeUnlinkedScrollListener;
+  #debounceScrollEnd = useDebounce(
+    () => {
+      if (this.#removeUnlinkedScrollListener) {
+        this.#removeUnlinkedScrollListener();
+        this.#removeUnlinkedScrollListener = void 0;
+      }
+    },
+    100
+  );
+  constructor(opts, scrollbarState) {
+    this.opts = opts;
+    this.scrollbarState = scrollbarState;
+    this.#root = scrollbarState.root;
+    this.attachment = attachRef(this.opts.ref, (v) => this.scrollbarState.scrollbarVis.thumbNode = v);
+    this.onpointerdowncapture = this.onpointerdowncapture.bind(this);
+    this.onpointerup = this.onpointerup.bind(this);
+  }
+  onpointerdowncapture(e) {
+    const thumb = e.target;
+    if (!thumb) return;
+    const thumbRect = thumb.getBoundingClientRect();
+    const x = e.clientX - thumbRect.left;
+    const y = e.clientY - thumbRect.top;
+    this.scrollbarState.handleThumbPointerDown({ x, y });
+  }
+  onpointerup(_) {
+    this.scrollbarState.handleThumbPointerUp();
+  }
+  #props = derived(() => ({
+    id: this.opts.id.current,
+    "data-state": this.scrollbarState.scrollbarVis.hasThumb ? "visible" : "hidden",
+    style: {
+      width: "var(--bits-scroll-area-thumb-width)",
+      height: "var(--bits-scroll-area-thumb-height)",
+      transform: this.scrollbarState.scrollbarVis.prevTransformStyle
+    },
+    onpointerdowncapture: this.onpointerdowncapture,
+    onpointerup: this.onpointerup,
+    [scrollAreaAttrs.thumb]: "",
+    ...this.attachment
+  }));
+  get props() {
+    return this.#props();
+  }
+  set props($$value) {
+    return this.#props($$value);
+  }
+}
+class ScrollAreaCornerImplState {
+  static create(opts) {
+    return new ScrollAreaCornerImplState(opts, ScrollAreaRootContext.get());
+  }
+  opts;
+  root;
+  attachment;
+  #width = 0;
+  #height = 0;
+  #hasSize = derived(() => Boolean(this.#width && this.#height));
+  get hasSize() {
+    return this.#hasSize();
+  }
+  set hasSize($$value) {
+    return this.#hasSize($$value);
+  }
+  constructor(opts, root) {
+    this.opts = opts;
+    this.root = root;
+    this.attachment = attachRef(this.opts.ref);
+    new SvelteResizeObserver(() => this.root.scrollbarXNode, () => {
+      const height = this.root.scrollbarXNode?.offsetHeight || 0;
+      this.root.cornerHeight = height;
+      this.#height = height;
+    });
+    new SvelteResizeObserver(() => this.root.scrollbarYNode, () => {
+      const width = this.root.scrollbarYNode?.offsetWidth || 0;
+      this.root.cornerWidth = width;
+      this.#width = width;
+    });
+  }
+  #props = derived(() => ({
+    id: this.opts.id.current,
+    style: {
+      width: this.#width,
+      height: this.#height,
+      position: "absolute",
+      right: this.root.opts.dir.current === "ltr" ? 0 : void 0,
+      left: this.root.opts.dir.current === "rtl" ? 0 : void 0,
+      bottom: 0
+    },
+    [scrollAreaAttrs.corner]: "",
+    ...this.attachment
+  }));
+  get props() {
+    return this.#props();
+  }
+  set props($$value) {
+    return this.#props($$value);
+  }
+}
+function toInt(value) {
+  return value ? Number.parseInt(value, 10) : 0;
+}
+function getThumbRatio(viewportSize, contentSize) {
+  const ratio = viewportSize / contentSize;
+  return Number.isNaN(ratio) ? 0 : ratio;
+}
+function getThumbSize(sizes) {
+  const ratio = getThumbRatio(sizes.viewport, sizes.content);
+  const scrollbarPadding = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd;
+  const thumbSize = (sizes.scrollbar.size - scrollbarPadding) * ratio;
+  return Math.max(thumbSize, 18);
+}
+function getScrollPositionFromPointer({ pointerPos, pointerOffset, sizes, dir = "ltr" }) {
+  const thumbSizePx = getThumbSize(sizes);
+  const thumbCenter = thumbSizePx / 2;
+  const offset = pointerOffset || thumbCenter;
+  const thumbOffsetFromEnd = thumbSizePx - offset;
+  const minPointerPos = sizes.scrollbar.paddingStart + offset;
+  const maxPointerPos = sizes.scrollbar.size - sizes.scrollbar.paddingEnd - thumbOffsetFromEnd;
+  const maxScrollPos = sizes.content - sizes.viewport;
+  const scrollRange = dir === "ltr" ? [0, maxScrollPos] : [maxScrollPos * -1, 0];
+  const interpolate = linearScale([minPointerPos, maxPointerPos], scrollRange);
+  return interpolate(pointerPos);
+}
+function getThumbOffsetFromScroll({ scrollPos, sizes, dir = "ltr" }) {
+  const thumbSizePx = getThumbSize(sizes);
+  const scrollbarPadding = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd;
+  const scrollbar = sizes.scrollbar.size - scrollbarPadding;
+  const maxScrollPos = sizes.content - sizes.viewport;
+  const maxThumbPos = scrollbar - thumbSizePx;
+  const scrollClampRange = dir === "ltr" ? [0, maxScrollPos] : [maxScrollPos * -1, 0];
+  const scrollWithoutMomentum = clamp(scrollPos, scrollClampRange[0], scrollClampRange[1]);
+  const interpolate = linearScale([0, maxScrollPos], [0, maxThumbPos]);
+  return interpolate(scrollWithoutMomentum);
+}
+function linearScale(input, output) {
+  return (value) => {
+    if (input[0] === input[1] || output[0] === output[1]) return output[0];
+    const ratio = (output[1] - output[0]) / (input[1] - input[0]);
+    return output[0] + ratio * (value - input[0]);
+  };
+}
+function isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos) {
+  return scrollPos > 0 && scrollPos < maxScrollPos;
+}
+function Scroll_area$1($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    const uid = props_id($$renderer2);
+    let {
+      ref = null,
+      id = createId(uid),
+      type = "hover",
+      dir = "ltr",
+      scrollHideDelay = 600,
+      children,
+      child,
+      $$slots,
+      $$events,
+      ...restProps
+    } = $$props;
+    const rootState = ScrollAreaRootState.create({
+      type: boxWith(() => type),
+      dir: boxWith(() => dir),
+      scrollHideDelay: boxWith(() => scrollHideDelay),
+      id: boxWith(() => id),
+      ref: boxWith(() => ref, (v) => ref = v)
+    });
+    const mergedProps = mergeProps(restProps, rootState.props);
+    if (child) {
+      $$renderer2.push("<!--[-->");
+      child($$renderer2, { props: mergedProps });
+      $$renderer2.push(`<!---->`);
+    } else {
+      $$renderer2.push("<!--[!-->");
+      $$renderer2.push(`<div${attributes({ ...mergedProps })}>`);
+      children?.($$renderer2);
+      $$renderer2.push(`<!----></div>`);
+    }
+    $$renderer2.push(`<!--]-->`);
+    bind_props($$props, { ref });
+  });
+}
+function Scroll_area_viewport($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    const uid = props_id($$renderer2);
+    let {
+      ref = null,
+      id = createId(uid),
+      children,
+      $$slots,
+      $$events,
+      ...restProps
+    } = $$props;
+    const viewportState = ScrollAreaViewportState.create({
+      id: boxWith(() => id),
+      ref: boxWith(() => ref, (v) => ref = v)
+    });
+    const mergedProps = mergeProps(restProps, viewportState.props);
+    const mergedContentProps = mergeProps({}, viewportState.contentProps);
+    $$renderer2.push(`<div${attributes({ ...mergedProps })}><div${attributes({ ...mergedContentProps })}>`);
+    children?.($$renderer2);
+    $$renderer2.push(`<!----></div></div>`);
+    bind_props($$props, { ref });
+  });
+}
+function Scroll_area_scrollbar_shared($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { child, children, $$slots, $$events, ...restProps } = $$props;
+    const scrollbarSharedState = ScrollAreaScrollbarSharedState.create();
+    const mergedProps = mergeProps(restProps, scrollbarSharedState.props);
+    if (child) {
+      $$renderer2.push("<!--[-->");
+      child($$renderer2, { props: mergedProps });
+      $$renderer2.push(`<!---->`);
+    } else {
+      $$renderer2.push("<!--[!-->");
+      $$renderer2.push(`<div${attributes({ ...mergedProps })}>`);
+      children?.($$renderer2);
+      $$renderer2.push(`<!----></div>`);
+    }
+    $$renderer2.push(`<!--]-->`);
+  });
+}
+function Scroll_area_scrollbar_x($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { $$slots, $$events, ...restProps } = $$props;
+    const isMounted = new IsMounted();
+    const scrollbarXState = ScrollAreaScrollbarXState.create({ mounted: boxWith(() => isMounted.current) });
+    const mergedProps = mergeProps(restProps, scrollbarXState.props);
+    Scroll_area_scrollbar_shared($$renderer2, spread_props([mergedProps]));
+  });
+}
+function Scroll_area_scrollbar_y($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { $$slots, $$events, ...restProps } = $$props;
+    const isMounted = new IsMounted();
+    const scrollbarYState = ScrollAreaScrollbarYState.create({ mounted: boxWith(() => isMounted.current) });
+    const mergedProps = mergeProps(restProps, scrollbarYState.props);
+    Scroll_area_scrollbar_shared($$renderer2, spread_props([mergedProps]));
+  });
+}
+function Scroll_area_scrollbar_visible($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { $$slots, $$events, ...restProps } = $$props;
+    const scrollbarVisibleState = ScrollAreaScrollbarVisibleState.create();
+    if (scrollbarVisibleState.scrollbar.opts.orientation.current === "horizontal") {
+      $$renderer2.push("<!--[-->");
+      Scroll_area_scrollbar_x($$renderer2, spread_props([restProps]));
+    } else {
+      $$renderer2.push("<!--[!-->");
+      Scroll_area_scrollbar_y($$renderer2, spread_props([restProps]));
+    }
+    $$renderer2.push(`<!--]-->`);
+  });
+}
+function Scroll_area_scrollbar_auto($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { forceMount = false, $$slots, $$events, ...restProps } = $$props;
+    const scrollbarAutoState = ScrollAreaScrollbarAutoState.create();
+    const mergedProps = mergeProps(restProps, scrollbarAutoState.props);
+    {
+      let presence = function($$renderer3) {
+        Scroll_area_scrollbar_visible($$renderer3, spread_props([mergedProps]));
+      };
+      Presence_layer($$renderer2, {
+        open: forceMount || scrollbarAutoState.isVisible,
+        ref: scrollbarAutoState.scrollbar.opts.ref,
+        presence
+      });
+    }
+  });
+}
+function Scroll_area_scrollbar_scroll($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { forceMount = false, $$slots, $$events, ...restProps } = $$props;
+    const scrollbarScrollState = ScrollAreaScrollbarScrollState.create();
+    const mergedProps = mergeProps(restProps, scrollbarScrollState.props);
+    {
+      let presence = function($$renderer3) {
+        Scroll_area_scrollbar_visible($$renderer3, spread_props([mergedProps]));
+      };
+      Presence_layer($$renderer2, spread_props([
+        mergedProps,
+        {
+          open: forceMount || !scrollbarScrollState.isHidden,
+          ref: scrollbarScrollState.scrollbar.opts.ref,
+          presence,
+          $$slots: { presence: true }
+        }
+      ]));
+    }
+  });
+}
+function Scroll_area_scrollbar_hover($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { forceMount = false, $$slots, $$events, ...restProps } = $$props;
+    const scrollbarHoverState = ScrollAreaScrollbarHoverState.create();
+    const scrollbarAutoState = ScrollAreaScrollbarAutoState.create();
+    const mergedProps = mergeProps(restProps, scrollbarHoverState.props, scrollbarAutoState.props, {
+      "data-state": scrollbarHoverState.isVisible ? "visible" : "hidden"
+    });
+    const open = forceMount || scrollbarHoverState.isVisible && scrollbarAutoState.isVisible;
+    {
+      let presence = function($$renderer3) {
+        Scroll_area_scrollbar_visible($$renderer3, spread_props([mergedProps]));
+      };
+      Presence_layer($$renderer2, {
+        open,
+        ref: scrollbarAutoState.scrollbar.opts.ref,
+        presence
+      });
+    }
+  });
+}
+function Scroll_area_scrollbar$1($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    const uid = props_id($$renderer2);
+    let {
+      ref = null,
+      id = createId(uid),
+      orientation,
+      $$slots,
+      $$events,
+      ...restProps
+    } = $$props;
+    const scrollbarState = ScrollAreaScrollbarState.create({
+      orientation: boxWith(() => orientation),
+      id: boxWith(() => id),
+      ref: boxWith(() => ref, (v) => ref = v)
+    });
+    const type = scrollbarState.root.opts.type.current;
+    if (type === "hover") {
+      $$renderer2.push("<!--[-->");
+      Scroll_area_scrollbar_hover($$renderer2, spread_props([restProps, { id }]));
+    } else {
+      $$renderer2.push("<!--[!-->");
+      if (type === "scroll") {
+        $$renderer2.push("<!--[-->");
+        Scroll_area_scrollbar_scroll($$renderer2, spread_props([restProps, { id }]));
+      } else {
+        $$renderer2.push("<!--[!-->");
+        if (type === "auto") {
+          $$renderer2.push("<!--[-->");
+          Scroll_area_scrollbar_auto($$renderer2, spread_props([restProps, { id }]));
+        } else {
+          $$renderer2.push("<!--[!-->");
+          if (type === "always") {
+            $$renderer2.push("<!--[-->");
+            Scroll_area_scrollbar_visible($$renderer2, spread_props([restProps, { id }]));
+          } else {
+            $$renderer2.push("<!--[!-->");
+          }
+          $$renderer2.push(`<!--]-->`);
+        }
+        $$renderer2.push(`<!--]-->`);
+      }
+      $$renderer2.push(`<!--]-->`);
+    }
+    $$renderer2.push(`<!--]-->`);
+    bind_props($$props, { ref });
+  });
+}
+function Scroll_area_thumb_impl($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      ref = null,
+      id,
+      child,
+      children,
+      present,
+      $$slots,
+      $$events,
+      ...restProps
+    } = $$props;
+    const isMounted = new IsMounted();
+    const thumbState = ScrollAreaThumbImplState.create({
+      id: boxWith(() => id),
+      ref: boxWith(() => ref, (v) => ref = v),
+      mounted: boxWith(() => isMounted.current)
+    });
+    const mergedProps = mergeProps(restProps, thumbState.props, { style: { hidden: !present } });
+    if (child) {
+      $$renderer2.push("<!--[-->");
+      child($$renderer2, { props: mergedProps });
+      $$renderer2.push(`<!---->`);
+    } else {
+      $$renderer2.push("<!--[!-->");
+      $$renderer2.push(`<div${attributes({ ...mergedProps })}>`);
+      children?.($$renderer2);
+      $$renderer2.push(`<!----></div>`);
+    }
+    $$renderer2.push(`<!--]-->`);
+    bind_props($$props, { ref });
+  });
+}
+function Scroll_area_thumb($$renderer, $$props) {
   $$renderer.component(($$renderer2) => {
-    const sessionsByProject = () => {
+    const uid = props_id($$renderer2);
+    let {
+      id = createId(uid),
+      ref = null,
+      forceMount = false,
+      $$slots,
+      $$events,
+      ...restProps
+    } = $$props;
+    const scrollbarState = ScrollAreaScrollbarVisibleContext.get();
+    let $$settled = true;
+    let $$inner_renderer;
+    function $$render_inner($$renderer3) {
+      {
+        let presence = function($$renderer4, { present }) {
+          Scroll_area_thumb_impl($$renderer4, spread_props([
+            restProps,
+            {
+              id,
+              present,
+              get ref() {
+                return ref;
+              },
+              set ref($$value) {
+                ref = $$value;
+                $$settled = false;
+              }
+            }
+          ]));
+        };
+        Presence_layer($$renderer3, {
+          open: forceMount || scrollbarState.hasThumb,
+          ref: scrollbarState.scrollbar.opts.ref,
+          presence
+        });
+      }
+    }
+    do {
+      $$settled = true;
+      $$inner_renderer = $$renderer2.copy();
+      $$render_inner($$inner_renderer);
+    } while (!$$settled);
+    $$renderer2.subsume($$inner_renderer);
+    bind_props($$props, { ref });
+  });
+}
+function Scroll_area_corner_impl($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      ref = null,
+      id,
+      children,
+      child,
+      $$slots,
+      $$events,
+      ...restProps
+    } = $$props;
+    const cornerState = ScrollAreaCornerImplState.create({
+      id: boxWith(() => id),
+      ref: boxWith(() => ref, (v) => ref = v)
+    });
+    const mergedProps = mergeProps(restProps, cornerState.props);
+    if (child) {
+      $$renderer2.push("<!--[-->");
+      child($$renderer2, { props: mergedProps });
+      $$renderer2.push(`<!---->`);
+    } else {
+      $$renderer2.push("<!--[!-->");
+      $$renderer2.push(`<div${attributes({ ...mergedProps })}>`);
+      children?.($$renderer2);
+      $$renderer2.push(`<!----></div>`);
+    }
+    $$renderer2.push(`<!--]-->`);
+    bind_props($$props, { ref });
+  });
+}
+function Scroll_area_corner($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    const uid = props_id($$renderer2);
+    let {
+      ref = null,
+      id = createId(uid),
+      $$slots,
+      $$events,
+      ...restProps
+    } = $$props;
+    const scrollAreaState = ScrollAreaRootContext.get();
+    const hasBothScrollbarsVisible = Boolean(scrollAreaState.scrollbarXNode && scrollAreaState.scrollbarYNode);
+    const hasCorner = scrollAreaState.opts.type.current !== "scroll" && hasBothScrollbarsVisible;
+    let $$settled = true;
+    let $$inner_renderer;
+    function $$render_inner($$renderer3) {
+      if (hasCorner) {
+        $$renderer3.push("<!--[-->");
+        Scroll_area_corner_impl($$renderer3, spread_props([
+          restProps,
+          {
+            id,
+            get ref() {
+              return ref;
+            },
+            set ref($$value) {
+              ref = $$value;
+              $$settled = false;
+            }
+          }
+        ]));
+      } else {
+        $$renderer3.push("<!--[!-->");
+      }
+      $$renderer3.push(`<!--]-->`);
+    }
+    do {
+      $$settled = true;
+      $$inner_renderer = $$renderer2.copy();
+      $$render_inner($$inner_renderer);
+    } while (!$$settled);
+    $$renderer2.subsume($$inner_renderer);
+    bind_props($$props, { ref });
+  });
+}
+const defaultAttributes = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": 2,
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round"
+};
+function Icon($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    const {
+      name,
+      color = "currentColor",
+      size = 24,
+      strokeWidth = 2,
+      absoluteStrokeWidth = false,
+      iconNode = [],
+      children,
+      $$slots,
+      $$events,
+      ...props
+    } = $$props;
+    $$renderer2.push(`<svg${attributes(
+      {
+        ...defaultAttributes,
+        ...props,
+        width: size,
+        height: size,
+        stroke: color,
+        "stroke-width": absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
+        class: clsx(["lucide-icon lucide", name && `lucide-${name}`, props.class])
+      },
+      void 0,
+      void 0,
+      void 0,
+      3
+    )}><!--[-->`);
+    const each_array = ensure_array_like(iconNode);
+    for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
+      let [tag, attrs] = each_array[$$index];
+      element($$renderer2, tag, () => {
+        $$renderer2.push(`${attributes({ ...attrs }, void 0, void 0, void 0, 3)}`);
+      });
+    }
+    $$renderer2.push(`<!--]-->`);
+    children?.($$renderer2);
+    $$renderer2.push(`<!----></svg>`);
+  });
+}
+function Check($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { $$slots, $$events, ...props } = $$props;
+    const iconNode = [["path", { "d": "M20 6 9 17l-5-5" }]];
+    Icon($$renderer2, spread_props([
+      { name: "check" },
+      /**
+       * @component @name Check
+       * @description Lucide SVG icon component, renders SVG Element with children.
+       *
+       * @preview ![img](data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogIHdpZHRoPSIyNCIKICBoZWlnaHQ9IjI0IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHN0cm9rZT0iIzAwMCIgc3R5bGU9ImJhY2tncm91bmQtY29sb3I6ICNmZmY7IGJvcmRlci1yYWRpdXM6IDJweCIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cGF0aCBkPSJNMjAgNiA5IDE3bC01LTUiIC8+Cjwvc3ZnPgo=) - https://lucide.dev/icons/check
+       * @see https://lucide.dev/guide/packages/lucide-svelte - Documentation
+       *
+       * @param {Object} props - Lucide icons props and any valid SVG attribute
+       * @returns {FunctionalComponent} Svelte component
+       *
+       */
+      props,
+      {
+        iconNode,
+        children: ($$renderer3) => {
+          props.children?.($$renderer3);
+          $$renderer3.push(`<!---->`);
+        },
+        $$slots: { default: true }
+      }
+    ]));
+  });
+}
+function Minus($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { $$slots, $$events, ...props } = $$props;
+    const iconNode = [["path", { "d": "M5 12h14" }]];
+    Icon($$renderer2, spread_props([
+      { name: "minus" },
+      /**
+       * @component @name Minus
+       * @description Lucide SVG icon component, renders SVG Element with children.
+       *
+       * @preview ![img](data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogIHdpZHRoPSIyNCIKICBoZWlnaHQ9IjI0IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHN0cm9rZT0iIzAwMCIgc3R5bGU9ImJhY2tncm91bmQtY29sb3I6ICNmZmY7IGJvcmRlci1yYWRpdXM6IDJweCIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cGF0aCBkPSJNNSAxMmgxNCIgLz4KPC9zdmc+Cg==) - https://lucide.dev/icons/minus
+       * @see https://lucide.dev/guide/packages/lucide-svelte - Documentation
+       *
+       * @param {Object} props - Lucide icons props and any valid SVG attribute
+       * @returns {FunctionalComponent} Svelte component
+       *
+       */
+      props,
+      {
+        iconNode,
+        children: ($$renderer3) => {
+          props.children?.($$renderer3);
+          $$renderer3.push(`<!---->`);
+        },
+        $$slots: { default: true }
+      }
+    ]));
+  });
+}
+function Checkbox($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      ref = null,
+      checked = false,
+      indeterminate = false,
+      class: className,
+      $$slots,
+      $$events,
+      ...restProps
+    } = $$props;
+    let $$settled = true;
+    let $$inner_renderer;
+    function $$render_inner($$renderer3) {
+      $$renderer3.push(`<!---->`);
+      {
+        let children = function($$renderer4, { checked: checked2, indeterminate: indeterminate2 }) {
+          $$renderer4.push(`<div data-slot="checkbox-indicator" class="text-current transition-none">`);
+          if (checked2) {
+            $$renderer4.push("<!--[-->");
+            Check($$renderer4, { class: "size-3.5" });
+          } else {
+            $$renderer4.push("<!--[!-->");
+            if (indeterminate2) {
+              $$renderer4.push("<!--[-->");
+              Minus($$renderer4, { class: "size-3.5" });
+            } else {
+              $$renderer4.push("<!--[!-->");
+            }
+            $$renderer4.push(`<!--]-->`);
+          }
+          $$renderer4.push(`<!--]--></div>`);
+        };
+        Checkbox$1?.($$renderer3, spread_props([
+          {
+            "data-slot": "checkbox",
+            class: cn("border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive peer flex size-4 shrink-0 items-center justify-center rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", className)
+          },
+          restProps,
+          {
+            get ref() {
+              return ref;
+            },
+            set ref($$value) {
+              ref = $$value;
+              $$settled = false;
+            },
+            get checked() {
+              return checked;
+            },
+            set checked($$value) {
+              checked = $$value;
+              $$settled = false;
+            },
+            get indeterminate() {
+              return indeterminate;
+            },
+            set indeterminate($$value) {
+              indeterminate = $$value;
+              $$settled = false;
+            },
+            children,
+            $$slots: { default: true }
+          }
+        ]));
+      }
+      $$renderer3.push(`<!---->`);
+    }
+    do {
+      $$settled = true;
+      $$inner_renderer = $$renderer2.copy();
+      $$render_inner($$inner_renderer);
+    } while (!$$settled);
+    $$renderer2.subsume($$inner_renderer);
+    bind_props($$props, { ref, checked, indeterminate });
+  });
+}
+function Dialog($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { open = false, $$slots, $$events, ...restProps } = $$props;
+    let $$settled = true;
+    let $$inner_renderer;
+    function $$render_inner($$renderer3) {
+      $$renderer3.push(`<!---->`);
+      Dialog$1?.($$renderer3, spread_props([
+        restProps,
+        {
+          get open() {
+            return open;
+          },
+          set open($$value) {
+            open = $$value;
+            $$settled = false;
+          }
+        }
+      ]));
+      $$renderer3.push(`<!---->`);
+    }
+    do {
+      $$settled = true;
+      $$inner_renderer = $$renderer2.copy();
+      $$render_inner($$inner_renderer);
+    } while (!$$settled);
+    $$renderer2.subsume($$inner_renderer);
+    bind_props($$props, { open });
+  });
+}
+function Dialog_portal($$renderer, $$props) {
+  let { $$slots, $$events, ...restProps } = $$props;
+  $$renderer.push(`<!---->`);
+  Portal?.($$renderer, spread_props([restProps]));
+  $$renderer.push(`<!---->`);
+}
+function Dialog_title($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      ref = null,
+      class: className,
+      $$slots,
+      $$events,
+      ...restProps
+    } = $$props;
+    let $$settled = true;
+    let $$inner_renderer;
+    function $$render_inner($$renderer3) {
+      $$renderer3.push(`<!---->`);
+      Dialog_title$1?.($$renderer3, spread_props([
+        {
+          "data-slot": "dialog-title",
+          class: cn("text-lg leading-none font-semibold", className)
+        },
+        restProps,
+        {
+          get ref() {
+            return ref;
+          },
+          set ref($$value) {
+            ref = $$value;
+            $$settled = false;
+          }
+        }
+      ]));
+      $$renderer3.push(`<!---->`);
+    }
+    do {
+      $$settled = true;
+      $$inner_renderer = $$renderer2.copy();
+      $$render_inner($$inner_renderer);
+    } while (!$$settled);
+    $$renderer2.subsume($$inner_renderer);
+    bind_props($$props, { ref });
+  });
+}
+function Dialog_footer($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      ref = null,
+      class: className,
+      children,
+      $$slots,
+      $$events,
+      ...restProps
+    } = $$props;
+    $$renderer2.push(`<div${attributes({
+      "data-slot": "dialog-footer",
+      class: clsx(cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)),
+      ...restProps
+    })}>`);
+    children?.($$renderer2);
+    $$renderer2.push(`<!----></div>`);
+    bind_props($$props, { ref });
+  });
+}
+function Dialog_header($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      ref = null,
+      class: className,
+      children,
+      $$slots,
+      $$events,
+      ...restProps
+    } = $$props;
+    $$renderer2.push(`<div${attributes({
+      "data-slot": "dialog-header",
+      class: clsx(cn("flex flex-col gap-2 text-center sm:text-start", className)),
+      ...restProps
+    })}>`);
+    children?.($$renderer2);
+    $$renderer2.push(`<!----></div>`);
+    bind_props($$props, { ref });
+  });
+}
+function Dialog_overlay($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      ref = null,
+      class: className,
+      $$slots,
+      $$events,
+      ...restProps
+    } = $$props;
+    let $$settled = true;
+    let $$inner_renderer;
+    function $$render_inner($$renderer3) {
+      $$renderer3.push(`<!---->`);
+      Dialog_overlay$1?.($$renderer3, spread_props([
+        {
+          "data-slot": "dialog-overlay",
+          class: cn("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50", className)
+        },
+        restProps,
+        {
+          get ref() {
+            return ref;
+          },
+          set ref($$value) {
+            ref = $$value;
+            $$settled = false;
+          }
+        }
+      ]));
+      $$renderer3.push(`<!---->`);
+    }
+    do {
+      $$settled = true;
+      $$inner_renderer = $$renderer2.copy();
+      $$render_inner($$inner_renderer);
+    } while (!$$settled);
+    $$renderer2.subsume($$inner_renderer);
+    bind_props($$props, { ref });
+  });
+}
+function X($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { $$slots, $$events, ...props } = $$props;
+    const iconNode = [
+      ["path", { "d": "M18 6 6 18" }],
+      ["path", { "d": "m6 6 12 12" }]
+    ];
+    Icon($$renderer2, spread_props([
+      { name: "x" },
+      /**
+       * @component @name X
+       * @description Lucide SVG icon component, renders SVG Element with children.
+       *
+       * @preview ![img](data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogIHdpZHRoPSIyNCIKICBoZWlnaHQ9IjI0IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHN0cm9rZT0iIzAwMCIgc3R5bGU9ImJhY2tncm91bmQtY29sb3I6ICNmZmY7IGJvcmRlci1yYWRpdXM6IDJweCIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cGF0aCBkPSJNMTggNiA2IDE4IiAvPgogIDxwYXRoIGQ9Im02IDYgMTIgMTIiIC8+Cjwvc3ZnPgo=) - https://lucide.dev/icons/x
+       * @see https://lucide.dev/guide/packages/lucide-svelte - Documentation
+       *
+       * @param {Object} props - Lucide icons props and any valid SVG attribute
+       * @returns {FunctionalComponent} Svelte component
+       *
+       */
+      props,
+      {
+        iconNode,
+        children: ($$renderer3) => {
+          props.children?.($$renderer3);
+          $$renderer3.push(`<!---->`);
+        },
+        $$slots: { default: true }
+      }
+    ]));
+  });
+}
+function Dialog_content($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      ref = null,
+      class: className,
+      portalProps,
+      children,
+      showCloseButton = true,
+      $$slots,
+      $$events,
+      ...restProps
+    } = $$props;
+    let $$settled = true;
+    let $$inner_renderer;
+    function $$render_inner($$renderer3) {
+      Dialog_portal($$renderer3, spread_props([
+        portalProps,
+        {
+          children: ($$renderer4) => {
+            $$renderer4.push(`<!---->`);
+            Dialog_overlay?.($$renderer4, {});
+            $$renderer4.push(`<!----> <!---->`);
+            Dialog_content$1?.($$renderer4, spread_props([
+              {
+                "data-slot": "dialog-content",
+                class: cn("bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg", className)
+              },
+              restProps,
+              {
+                get ref() {
+                  return ref;
+                },
+                set ref($$value) {
+                  ref = $$value;
+                  $$settled = false;
+                },
+                children: ($$renderer5) => {
+                  children?.($$renderer5);
+                  $$renderer5.push(`<!----> `);
+                  if (showCloseButton) {
+                    $$renderer5.push("<!--[-->");
+                    $$renderer5.push(`<!---->`);
+                    Dialog_close?.($$renderer5, {
+                      class: "ring-offset-background focus:ring-ring absolute end-4 top-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+                      children: ($$renderer6) => {
+                        X($$renderer6, {});
+                        $$renderer6.push(`<!----> <span class="sr-only">Close</span>`);
+                      },
+                      $$slots: { default: true }
+                    });
+                    $$renderer5.push(`<!---->`);
+                  } else {
+                    $$renderer5.push("<!--[!-->");
+                  }
+                  $$renderer5.push(`<!--]-->`);
+                },
+                $$slots: { default: true }
+              }
+            ]));
+            $$renderer4.push(`<!---->`);
+          },
+          $$slots: { default: true }
+        }
+      ]));
+    }
+    do {
+      $$settled = true;
+      $$inner_renderer = $$renderer2.copy();
+      $$render_inner($$inner_renderer);
+    } while (!$$settled);
+    $$renderer2.subsume($$inner_renderer);
+    bind_props($$props, { ref });
+  });
+}
+function Scroll_area_scrollbar($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      ref = null,
+      class: className,
+      orientation = "vertical",
+      children,
+      $$slots,
+      $$events,
+      ...restProps
+    } = $$props;
+    let $$settled = true;
+    let $$inner_renderer;
+    function $$render_inner($$renderer3) {
+      $$renderer3.push(`<!---->`);
+      Scroll_area_scrollbar$1?.($$renderer3, spread_props([
+        {
+          "data-slot": "scroll-area-scrollbar",
+          orientation,
+          class: cn("flex touch-none p-px transition-colors select-none", orientation === "vertical" && "h-full w-2.5 border-s border-s-transparent", orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent", className)
+        },
+        restProps,
+        {
+          get ref() {
+            return ref;
+          },
+          set ref($$value) {
+            ref = $$value;
+            $$settled = false;
+          },
+          children: ($$renderer4) => {
+            children?.($$renderer4);
+            $$renderer4.push(`<!----> <!---->`);
+            Scroll_area_thumb?.($$renderer4, {
+              "data-slot": "scroll-area-thumb",
+              class: "bg-border relative flex-1 rounded-full"
+            });
+            $$renderer4.push(`<!---->`);
+          },
+          $$slots: { default: true }
+        }
+      ]));
+      $$renderer3.push(`<!---->`);
+    }
+    do {
+      $$settled = true;
+      $$inner_renderer = $$renderer2.copy();
+      $$render_inner($$inner_renderer);
+    } while (!$$settled);
+    $$renderer2.subsume($$inner_renderer);
+    bind_props($$props, { ref });
+  });
+}
+function Scroll_area($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      ref = null,
+      viewportRef = null,
+      class: className,
+      orientation = "vertical",
+      scrollbarXClasses = "",
+      scrollbarYClasses = "",
+      children,
+      $$slots,
+      $$events,
+      ...restProps
+    } = $$props;
+    let $$settled = true;
+    let $$inner_renderer;
+    function $$render_inner($$renderer3) {
+      $$renderer3.push(`<!---->`);
+      Scroll_area$1?.($$renderer3, spread_props([
+        { "data-slot": "scroll-area", class: cn("relative", className) },
+        restProps,
+        {
+          get ref() {
+            return ref;
+          },
+          set ref($$value) {
+            ref = $$value;
+            $$settled = false;
+          },
+          children: ($$renderer4) => {
+            $$renderer4.push(`<!---->`);
+            Scroll_area_viewport?.($$renderer4, {
+              "data-slot": "scroll-area-viewport",
+              class: "ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1",
+              get ref() {
+                return viewportRef;
+              },
+              set ref($$value) {
+                viewportRef = $$value;
+                $$settled = false;
+              },
+              children: ($$renderer5) => {
+                children?.($$renderer5);
+                $$renderer5.push(`<!---->`);
+              },
+              $$slots: { default: true }
+            });
+            $$renderer4.push(`<!----> `);
+            if (orientation === "vertical" || orientation === "both") {
+              $$renderer4.push("<!--[-->");
+              Scroll_area_scrollbar($$renderer4, { orientation: "vertical", class: scrollbarYClasses });
+            } else {
+              $$renderer4.push("<!--[!-->");
+            }
+            $$renderer4.push(`<!--]--> `);
+            if (orientation === "horizontal" || orientation === "both") {
+              $$renderer4.push("<!--[-->");
+              Scroll_area_scrollbar($$renderer4, { orientation: "horizontal", class: scrollbarXClasses });
+            } else {
+              $$renderer4.push("<!--[!-->");
+            }
+            $$renderer4.push(`<!--]--> <!---->`);
+            Scroll_area_corner?.($$renderer4, {});
+            $$renderer4.push(`<!---->`);
+          },
+          $$slots: { default: true }
+        }
+      ]));
+      $$renderer3.push(`<!---->`);
+    }
+    do {
+      $$settled = true;
+      $$inner_renderer = $$renderer2.copy();
+      $$render_inner($$inner_renderer);
+    } while (!$$settled);
+    $$renderer2.subsume($$inner_renderer);
+    bind_props($$props, { ref, viewportRef });
+  });
+}
+function AllSessionsPanel($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    var $$store_subs;
+    let { onSessionSelect, compact = false } = $$props;
+    let tmuxPanes = [];
+    let showFolderBrowser = false;
+    let browserPath = "";
+    let browserFolders = [];
+    let browserShowHidden = false;
+    let browserIsRoot = false;
+    let browserParent = null;
+    let browserError = "";
+    let alertOpen = false;
+    let alertTitle = "";
+    let alertMessage = "";
+    let alertOnConfirm = () => {
+    };
+    function showConfirm(title, message, onConfirm) {
+      alertTitle = title;
+      alertMessage = message;
+      alertOnConfirm = onConfirm;
+      alertOpen = true;
+    }
+    const sessionsByProject = (() => {
       const groups = /* @__PURE__ */ new Map();
       for (const session of sessionStore.sessions) {
         const key = session.cwd || "unknown";
@@ -11,8 +2509,8 @@ function _page($$renderer, $$props) {
         groups.get(key).push(session);
       }
       return groups;
-    };
-    const allProjects = () => {
+    })();
+    const allProjects = (() => {
       const projects = /* @__PURE__ */ new Set();
       for (const session of sessionStore.sessions) {
         if (session.cwd) projects.add(session.cwd);
@@ -21,66 +2519,538 @@ function _page($$renderer, $$props) {
         projects.add(cwd);
       }
       return [...projects].sort();
-    };
-    onDestroy(() => {
-      sessionStore.disconnect();
-    });
+    })();
+    function flattenTree(nodes) {
+      const result = [];
+      for (const node of nodes) {
+        result.push(node);
+        if (node.children.length > 0) {
+          result.push(...flattenTree(node.children));
+        }
+      }
+      return result;
+    }
+    const projectTree = (() => {
+      const projects = allProjects;
+      const sessionsMap = sessionsByProject;
+      const sorted = [...projects].sort((a, b) => a.length - b.length);
+      const roots = [];
+      const nodeMap = /* @__PURE__ */ new Map();
+      for (const cwd of sorted) {
+        const node = {
+          cwd,
+          sessions: sessionsMap.get(cwd) || [],
+          children: [],
+          depth: 0
+        };
+        let parent = null;
+        for (const potentialParent of sorted) {
+          if (potentialParent === cwd) continue;
+          if (cwd.startsWith(potentialParent + "/")) {
+            const parentNode = nodeMap.get(potentialParent);
+            if (parentNode && (!parent || potentialParent.length > parent.cwd.length)) {
+              parent = parentNode;
+            }
+          }
+        }
+        if (parent) {
+          node.depth = parent.depth + 1;
+          parent.children.push(node);
+        } else {
+          roots.push(node);
+        }
+        nodeMap.set(cwd, node);
+      }
+      return roots;
+    })();
+    const flatProjects = (() => flattenTree(projectTree))();
+    const otherTmuxPanes = (() => {
+      const claudeTargets = new Set(sessionStore.sessions.map((s) => s.tmux_target));
+      return tmuxPanes.filter((p) => !claudeTargets.has(p.target));
+    })();
+    const currentTarget = store_get($$store_subs ??= {}, "$page", page).url.pathname.startsWith("/session/") ? decodeURIComponent(store_get($$store_subs ??= {}, "$page", page).url.pathname.split("/session/")[1]) : null;
+    async function fetchTmuxPanes() {
+      try {
+        const res = await fetch("/api/tmux/panes");
+        tmuxPanes = await res.json();
+      } catch {
+        tmuxPanes = [];
+      }
+    }
+    function killSession(id, pid, tmux_target) {
+      showConfirm("Kill Session", "Are you sure you want to kill this session?", async () => {
+        await fetch(`/api/sessions/${encodeURIComponent(id)}/kill`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ pid, tmux_target })
+        });
+      });
+    }
+    function deleteProject(cwd) {
+      showConfirm("Delete Project", `Delete project "${cwd}" and all its sessions?`, async () => {
+        const sessions = sessionsByProject.get(cwd) || [];
+        for (const s of sessions) {
+          await fetch(`/api/sessions/${encodeURIComponent(s.id)}/kill`, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ pid: s.pid, tmux_target: s.tmux_target })
+          });
+        }
+        sessionStore.removeProject(cwd);
+      });
+    }
+    async function newSessionInProject(cwd) {
+      const res = await fetch("/api/projects/new-session", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ cwd })
+      });
+      const data = await res.json();
+      sessionStore.saveProject(cwd);
+      if (data.ok && data.session) {
+        data.session + ":1.1";
+        goto();
+        onSessionSelect?.();
+      }
+    }
+    async function openFolderBrowser() {
+      showFolderBrowser = true;
+      await browseTo("~");
+    }
+    async function browseTo(path) {
+      browserError = "";
+      const res = await fetch(`/api/browse?path=${encodeURIComponent(path)}&showHidden=${browserShowHidden}`);
+      const data = await res.json();
+      if (data.error) {
+        browserError = data.error;
+        return;
+      }
+      browserPath = data.current;
+      browserFolders = data.folders;
+      browserIsRoot = data.isRoot;
+      browserParent = data.parent;
+    }
+    async function selectFolder() {
+      showFolderBrowser = false;
+      await newSessionInProject(browserPath);
+    }
     function getProjectName(cwd) {
       return cwd.split("/").pop() || cwd;
     }
-    head("1uha8ag", $$renderer2, ($$renderer3) => {
-      $$renderer3.title(($$renderer4) => {
-        $$renderer4.push(`<title>claude-watch</title>`);
+    async function closeChrome() {
+      await fetch("/api/chrome", { method: "DELETE" });
+    }
+    let $$settled = true;
+    let $$inner_renderer;
+    function $$render_inner($$renderer3) {
+      $$renderer3.push(`<div${attr_class("all-sessions-panel svelte-183q6rw", void 0, { "compact": compact })}><header class="header svelte-183q6rw"><a href="/" class="title-link svelte-183q6rw"><h1 class="svelte-183q6rw">claude-mux</h1></a> <div class="header-actions svelte-183q6rw">`);
+      if (!compact) {
+        $$renderer3.push("<!--[-->");
+        Button($$renderer3, {
+          variant: "secondary",
+          size: "icon",
+          onclick: closeChrome,
+          title: "Close Chrome/Brave debugging instances",
+          children: ($$renderer4) => {
+            $$renderer4.push(`<iconify-icon icon="mdi:google-chrome"></iconify-icon>`);
+          },
+          $$slots: { default: true }
+        });
+      } else {
+        $$renderer3.push("<!--[!-->");
+      }
+      $$renderer3.push(`<!--]--> `);
+      Button($$renderer3, {
+        variant: sessionStore.paused ? "destructive" : "secondary",
+        size: "icon",
+        onclick: () => sessionStore.togglePause(),
+        title: sessionStore.paused ? "Resume" : "Pause",
+        children: ($$renderer4) => {
+          $$renderer4.push(`<iconify-icon${attr("icon", sessionStore.paused ? "mdi:play" : "mdi:pause")}></iconify-icon>`);
+        },
+        $$slots: { default: true }
       });
-    });
-    $$renderer2.push(`<div class="container svelte-1uha8ag"><header class="header svelte-1uha8ag"><h1 class="svelte-1uha8ag">claude-watch</h1> <div class="header-actions svelte-1uha8ag"><button${attr_class("btn svelte-1uha8ag", void 0, { "paused": sessionStore.paused })}${attr("title", sessionStore.paused ? "Resume" : "Pause")}><iconify-icon${attr("icon", sessionStore.paused ? "mdi:play" : "mdi:pause")}></iconify-icon></button> <button class="btn svelte-1uha8ag" title="New Project"><iconify-icon icon="mdi:plus"></iconify-icon></button></div></header> <p class="count svelte-1uha8ag">${escape_html(sessionStore.sessions.length)} session${escape_html(sessionStore.sessions.length !== 1 ? "s" : "")}</p> `);
-    if (allProjects().length === 0) {
-      $$renderer2.push("<!--[-->");
-      $$renderer2.push(`<div class="empty svelte-1uha8ag">No sessions yet. Click + to add a project.</div>`);
-    } else {
-      $$renderer2.push("<!--[!-->");
-      $$renderer2.push(`<!--[-->`);
-      const each_array = ensure_array_like(allProjects());
-      for (let $$index_1 = 0, $$length = each_array.length; $$index_1 < $$length; $$index_1++) {
-        let cwd = each_array[$$index_1];
-        const sessions = sessionsByProject().get(cwd) || [];
-        const color = getProjectColor(cwd);
-        $$renderer2.push(`<div class="project-group svelte-1uha8ag"><div class="project-header svelte-1uha8ag"${attr_style(`background: ${stringify(color)}20; color: ${stringify(color)}`)}><span class="dot svelte-1uha8ag"${attr_style(`background: ${stringify(color)}`)}></span> <span class="name svelte-1uha8ag">${escape_html(getProjectName(cwd))}</span> <span class="count-badge svelte-1uha8ag">${escape_html(sessions.length)}</span> <div class="spacer svelte-1uha8ag"></div> <button title="New Session" class="svelte-1uha8ag"><iconify-icon icon="mdi:plus"></iconify-icon></button> <button class="delete svelte-1uha8ag" title="Delete Project"><iconify-icon icon="mdi:delete"></iconify-icon></button></div> <div class="project-sessions svelte-1uha8ag">`);
-        const each_array_1 = ensure_array_like(sessions);
-        if (each_array_1.length !== 0) {
-          $$renderer2.push("<!--[-->");
-          for (let $$index = 0, $$length2 = each_array_1.length; $$index < $$length2; $$index++) {
-            let session = each_array_1[$$index];
-            $$renderer2.push(`<a${attr("href", `/session/${stringify(encodeURIComponent(session.tmux_target || session.id))}`)}${attr_class(`session ${stringify(session.state)}`, "svelte-1uha8ag")}><span class="state svelte-1uha8ag"${attr_style(`background: ${stringify(stateColor(session.state))}`)}></span> <div class="session-info svelte-1uha8ag"><div class="target svelte-1uha8ag">${escape_html(session.pane_title || session.tmux_target || session.id)}</div> `);
-            if (session.current_action) {
-              $$renderer2.push("<!--[-->");
-              $$renderer2.push(`<div class="action svelte-1uha8ag">${escape_html(session.current_action)}</div>`);
+      $$renderer3.push(`<!----> `);
+      Button($$renderer3, {
+        variant: "secondary",
+        size: "icon",
+        onclick: openFolderBrowser,
+        title: "New Project",
+        children: ($$renderer4) => {
+          $$renderer4.push(`<iconify-icon icon="mdi:plus"></iconify-icon>`);
+        },
+        $$slots: { default: true }
+      });
+      $$renderer3.push(`<!----></div></header> <p class="count svelte-183q6rw">${escape_html(sessionStore.sessions.length)} session${escape_html(sessionStore.sessions.length !== 1 ? "s" : "")}</p> <div class="scroll-content svelte-183q6rw">`);
+      if (flatProjects.length === 0) {
+        $$renderer3.push("<!--[-->");
+        $$renderer3.push(`<div class="empty svelte-183q6rw">No sessions yet. Click + to add a project.</div>`);
+      } else {
+        $$renderer3.push("<!--[!-->");
+        $$renderer3.push(`<!--[-->`);
+        const each_array = ensure_array_like(flatProjects);
+        for (let $$index_1 = 0, $$length = each_array.length; $$index_1 < $$length; $$index_1++) {
+          let project = each_array[$$index_1];
+          const color = getProjectColor(project.cwd);
+          const isNested = project.depth > 0;
+          const firstSession = project.sessions[0];
+          $$renderer3.push(`<div${attr_class("project-group svelte-183q6rw", void 0, { "nested": isNested })}${attr_style(`margin-left: ${stringify(project.depth * (compact ? 16 : 24))}px; border-left-color: ${stringify(color)}`)}><div class="project-header svelte-183q6rw"><div class="project-info svelte-183q6rw">`);
+          if (isNested) {
+            $$renderer3.push("<!--[-->");
+            $$renderer3.push(`<span class="nest-indicator svelte-183q6rw">└</span>`);
+          } else {
+            $$renderer3.push("<!--[!-->");
+          }
+          $$renderer3.push(`<!--]--> <span class="name svelte-183q6rw">${escape_html(getProjectName(project.cwd))}</span> <div class="meta svelte-183q6rw">`);
+          Badge($$renderer3, {
+            variant: "secondary",
+            class: "text-xs",
+            children: ($$renderer4) => {
+              $$renderer4.push(`<!---->${escape_html(project.sessions.length)}`);
+            },
+            $$slots: { default: true }
+          });
+          $$renderer3.push(`<!----> `);
+          if (!compact) {
+            $$renderer3.push("<!--[-->");
+            if (firstSession?.git_root) {
+              $$renderer3.push("<!--[-->");
+              Badge($$renderer3, {
+                variant: "outline",
+                class: "border-orange-700 text-orange-400",
+                children: ($$renderer4) => {
+                  $$renderer4.push(`<!---->git`);
+                },
+                $$slots: { default: true }
+              });
             } else {
-              $$renderer2.push("<!--[!-->");
+              $$renderer3.push("<!--[!-->");
             }
-            $$renderer2.push(`<!--]--></div> <div class="actions svelte-1uha8ag">`);
-            if (session.tmux_target) {
-              $$renderer2.push("<!--[-->");
-              $$renderer2.push(`<button title="Stop (Esc)" class="svelte-1uha8ag"><iconify-icon icon="mdi:stop"></iconify-icon></button>`);
+            $$renderer3.push(`<!--]--> `);
+            if (firstSession?.beads_enabled) {
+              $$renderer3.push("<!--[-->");
+              Badge($$renderer3, {
+                variant: "outline",
+                class: "border-purple-700 text-purple-400",
+                children: ($$renderer4) => {
+                  $$renderer4.push(`<!---->beads`);
+                },
+                $$slots: { default: true }
+              });
             } else {
-              $$renderer2.push("<!--[!-->");
+              $$renderer3.push("<!--[!-->");
             }
-            $$renderer2.push(`<!--]--> <button class="danger svelte-1uha8ag" title="Kill"><iconify-icon icon="mdi:power"></iconify-icon></button></div></a>`);
+            $$renderer3.push(`<!--]-->`);
+          } else {
+            $$renderer3.push("<!--[!-->");
           }
-        } else {
-          $$renderer2.push("<!--[!-->");
-          $$renderer2.push(`<div class="empty-project svelte-1uha8ag">No active sessions</div>`);
+          $$renderer3.push(`<!--]--></div></div> <div class="project-actions svelte-183q6rw">`);
+          Button($$renderer3, {
+            variant: "ghost",
+            size: "icon-sm",
+            onclick: () => newSessionInProject(project.cwd),
+            title: "New Session",
+            children: ($$renderer4) => {
+              $$renderer4.push(`<iconify-icon icon="mdi:plus"></iconify-icon>`);
+            },
+            $$slots: { default: true }
+          });
+          $$renderer3.push(`<!----> `);
+          if (!compact) {
+            $$renderer3.push("<!--[-->");
+            Button($$renderer3, {
+              variant: "ghost",
+              size: "icon-sm",
+              class: "hover:bg-red-900/50 hover:text-red-300",
+              onclick: () => deleteProject(project.cwd),
+              title: "Delete Project",
+              children: ($$renderer4) => {
+                $$renderer4.push(`<iconify-icon icon="mdi:delete"></iconify-icon>`);
+              },
+              $$slots: { default: true }
+            });
+          } else {
+            $$renderer3.push("<!--[!-->");
+          }
+          $$renderer3.push(`<!--]--></div></div> <div class="project-sessions svelte-183q6rw">`);
+          const each_array_1 = ensure_array_like(project.sessions);
+          if (each_array_1.length !== 0) {
+            $$renderer3.push("<!--[-->");
+            for (let $$index = 0, $$length2 = each_array_1.length; $$index < $$length2; $$index++) {
+              let session = each_array_1[$$index];
+              if (session.tmux_target) {
+                $$renderer3.push("<!--[-->");
+                const isActive = session.tmux_target === currentTarget;
+                $$renderer3.push(`<a${attr("href", `/session/${stringify(encodeURIComponent(session.tmux_target))}`)}${attr_class(`session ${stringify(session.state)}`, "svelte-183q6rw", { "active": isActive })}><span class="state svelte-183q6rw"${attr_style(`background: ${stringify(stateColor(session.state))}`)}></span> <div class="session-info svelte-183q6rw"><div class="target svelte-183q6rw">${escape_html(session.pane_title || session.tmux_target)}</div> <div class="action svelte-183q6rw">${escape_html(session.current_action || session.state)}</div></div> `);
+                if (!compact) {
+                  $$renderer3.push("<!--[-->");
+                  $$renderer3.push(`<div class="actions svelte-183q6rw">`);
+                  Button($$renderer3, {
+                    variant: "ghost-destructive",
+                    size: "icon-sm",
+                    onclick: (e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      killSession(session.id, session.pid, session.tmux_target);
+                    },
+                    title: "Kill",
+                    children: ($$renderer4) => {
+                      $$renderer4.push(`<iconify-icon icon="mdi:power"></iconify-icon>`);
+                    },
+                    $$slots: { default: true }
+                  });
+                  $$renderer3.push(`<!----></div>`);
+                } else {
+                  $$renderer3.push("<!--[!-->");
+                }
+                $$renderer3.push(`<!--]--></a>`);
+              } else {
+                $$renderer3.push("<!--[!-->");
+                $$renderer3.push(`<div${attr_class(`session ${stringify(session.state)} no-tmux`, "svelte-183q6rw")}><span class="state svelte-183q6rw"${attr_style(`background: ${stringify(stateColor(session.state))}`)}></span> <div class="session-info svelte-183q6rw"><div class="target svelte-183q6rw">${escape_html(session.id)}</div> <div class="action svelte-183q6rw">${escape_html(session.current_action || session.state)}</div> <div class="no-tmux-label svelte-183q6rw">No tmux pane</div></div> `);
+                if (!compact) {
+                  $$renderer3.push("<!--[-->");
+                  $$renderer3.push(`<div class="actions svelte-183q6rw">`);
+                  Button($$renderer3, {
+                    variant: "ghost-destructive",
+                    size: "icon-sm",
+                    onclick: () => killSession(session.id, session.pid, session.tmux_target),
+                    title: "Kill",
+                    children: ($$renderer4) => {
+                      $$renderer4.push(`<iconify-icon icon="mdi:power"></iconify-icon>`);
+                    },
+                    $$slots: { default: true }
+                  });
+                  $$renderer3.push(`<!----></div>`);
+                } else {
+                  $$renderer3.push("<!--[!-->");
+                }
+                $$renderer3.push(`<!--]--></div>`);
+              }
+              $$renderer3.push(`<!--]-->`);
+            }
+          } else {
+            $$renderer3.push("<!--[!-->");
+            $$renderer3.push(`<div class="empty-project svelte-183q6rw">No active sessions</div>`);
+          }
+          $$renderer3.push(`<!--]--></div></div>`);
         }
-        $$renderer2.push(`<!--]--></div></div>`);
+        $$renderer3.push(`<!--]-->`);
       }
-      $$renderer2.push(`<!--]-->`);
-    }
-    $$renderer2.push(`<!--]--></div> `);
-    {
-      $$renderer2.push("<!--[!-->");
+      $$renderer3.push(`<!--]--> `);
+      if (otherTmuxPanes.length > 0) {
+        $$renderer3.push("<!--[-->");
+        $$renderer3.push(`<div class="other-tmux svelte-183q6rw"><div class="other-tmux-header svelte-183q6rw"><h2 class="svelte-183q6rw">Other tmux</h2> `);
+        Button($$renderer3, {
+          variant: "ghost",
+          size: "icon-sm",
+          onclick: fetchTmuxPanes,
+          title: "Refresh",
+          children: ($$renderer4) => {
+            $$renderer4.push(`<iconify-icon icon="mdi:refresh"></iconify-icon>`);
+          },
+          $$slots: { default: true }
+        });
+        $$renderer3.push(`<!----></div> <div class="other-tmux-list svelte-183q6rw"><!--[-->`);
+        const each_array_2 = ensure_array_like(otherTmuxPanes);
+        for (let $$index_2 = 0, $$length = each_array_2.length; $$index_2 < $$length; $$index_2++) {
+          let pane = each_array_2[$$index_2];
+          $$renderer3.push(`<a${attr("href", `/session/${stringify(encodeURIComponent(pane.target))}`)} class="tmux-pane svelte-183q6rw"><iconify-icon icon="mdi:console" class="pane-icon svelte-183q6rw"></iconify-icon> <div class="pane-info svelte-183q6rw"><span class="pane-target svelte-183q6rw">${escape_html(pane.target)}</span> `);
+          if (!compact) {
+            $$renderer3.push("<!--[-->");
+            $$renderer3.push(`<span class="pane-command svelte-183q6rw">${escape_html(pane.command)}</span>`);
+          } else {
+            $$renderer3.push("<!--[!-->");
+          }
+          $$renderer3.push(`<!--]--></div></a>`);
+        }
+        $$renderer3.push(`<!--]--></div></div>`);
+      } else {
+        $$renderer3.push("<!--[!-->");
+      }
+      $$renderer3.push(`<!--]--></div></div> <!---->`);
+      Dialog?.($$renderer3, {
+        get open() {
+          return showFolderBrowser;
+        },
+        set open($$value) {
+          showFolderBrowser = $$value;
+          $$settled = false;
+        },
+        children: ($$renderer4) => {
+          $$renderer4.push(`<!---->`);
+          Dialog_content?.($$renderer4, {
+            class: "max-w-md",
+            children: ($$renderer5) => {
+              $$renderer5.push(`<!---->`);
+              Dialog_header?.($$renderer5, {
+                children: ($$renderer6) => {
+                  $$renderer6.push(`<!---->`);
+                  Dialog_title?.($$renderer6, {
+                    children: ($$renderer7) => {
+                      $$renderer7.push(`<!---->Select Folder`);
+                    },
+                    $$slots: { default: true }
+                  });
+                  $$renderer6.push(`<!---->`);
+                },
+                $$slots: { default: true }
+              });
+              $$renderer5.push(`<!----> <div class="fb-path svelte-183q6rw">${escape_html(browserPath)}</div> `);
+              if (browserError) {
+                $$renderer5.push("<!--[-->");
+                $$renderer5.push(`<p class="text-sm text-destructive">${escape_html(browserError)}</p>`);
+              } else {
+                $$renderer5.push("<!--[!-->");
+              }
+              $$renderer5.push(`<!--]--> <div class="flex items-center gap-2 py-2">`);
+              Checkbox($$renderer5, {
+                id: "show-hidden",
+                checked: browserShowHidden,
+                onCheckedChange: (v) => {
+                  browserShowHidden = !!v;
+                  browseTo(browserPath);
+                }
+              });
+              $$renderer5.push(`<!----> <label for="show-hidden" class="text-sm text-muted-foreground cursor-pointer">Show hidden</label></div> `);
+              Scroll_area($$renderer5, {
+                class: "h-64 rounded-md border",
+                children: ($$renderer6) => {
+                  $$renderer6.push(`<div class="p-2">`);
+                  if (!browserIsRoot && browserParent) {
+                    $$renderer6.push("<!--[-->");
+                    $$renderer6.push(`<button class="fb-item svelte-183q6rw"><iconify-icon icon="mdi:folder-arrow-up"></iconify-icon> ..</button>`);
+                  } else {
+                    $$renderer6.push("<!--[!-->");
+                  }
+                  $$renderer6.push(`<!--]--> <!--[-->`);
+                  const each_array_3 = ensure_array_like(browserFolders);
+                  for (let $$index_3 = 0, $$length = each_array_3.length; $$index_3 < $$length; $$index_3++) {
+                    let folder = each_array_3[$$index_3];
+                    $$renderer6.push(`<button class="fb-item svelte-183q6rw"><iconify-icon icon="mdi:folder"></iconify-icon> ${escape_html(folder.name)}</button>`);
+                  }
+                  $$renderer6.push(`<!--]--></div>`);
+                },
+                $$slots: { default: true }
+              });
+              $$renderer5.push(`<!----> <!---->`);
+              Dialog_footer?.($$renderer5, {
+                children: ($$renderer6) => {
+                  Button($$renderer6, {
+                    variant: "outline",
+                    onclick: () => showFolderBrowser = false,
+                    children: ($$renderer7) => {
+                      $$renderer7.push(`<!---->Cancel`);
+                    },
+                    $$slots: { default: true }
+                  });
+                  $$renderer6.push(`<!----> `);
+                  Button($$renderer6, {
+                    onclick: selectFolder,
+                    children: ($$renderer7) => {
+                      $$renderer7.push(`<!---->Select`);
+                    },
+                    $$slots: { default: true }
+                  });
+                  $$renderer6.push(`<!---->`);
+                },
+                $$slots: { default: true }
+              });
+              $$renderer5.push(`<!---->`);
+            },
+            $$slots: { default: true }
+          });
+          $$renderer4.push(`<!---->`);
+        },
+        $$slots: { default: true }
+      });
+      $$renderer3.push(`<!----> <!---->`);
+      Alert_dialog?.($$renderer3, {
+        get open() {
+          return alertOpen;
+        },
+        set open($$value) {
+          alertOpen = $$value;
+          $$settled = false;
+        },
+        children: ($$renderer4) => {
+          $$renderer4.push(`<!---->`);
+          Alert_dialog_content?.($$renderer4, {
+            children: ($$renderer5) => {
+              $$renderer5.push(`<!---->`);
+              Alert_dialog_header?.($$renderer5, {
+                children: ($$renderer6) => {
+                  $$renderer6.push(`<!---->`);
+                  Alert_dialog_title?.($$renderer6, {
+                    children: ($$renderer7) => {
+                      $$renderer7.push(`<!---->${escape_html(alertTitle)}`);
+                    },
+                    $$slots: { default: true }
+                  });
+                  $$renderer6.push(`<!----> <!---->`);
+                  Alert_dialog_description?.($$renderer6, {
+                    children: ($$renderer7) => {
+                      $$renderer7.push(`<!---->${escape_html(alertMessage)}`);
+                    },
+                    $$slots: { default: true }
+                  });
+                  $$renderer6.push(`<!---->`);
+                },
+                $$slots: { default: true }
+              });
+              $$renderer5.push(`<!----> <!---->`);
+              Alert_dialog_footer?.($$renderer5, {
+                children: ($$renderer6) => {
+                  $$renderer6.push(`<!---->`);
+                  Alert_dialog_cancel?.($$renderer6, {
+                    children: ($$renderer7) => {
+                      $$renderer7.push(`<!---->Cancel`);
+                    },
+                    $$slots: { default: true }
+                  });
+                  $$renderer6.push(`<!----> <!---->`);
+                  Alert_dialog_action?.($$renderer6, {
+                    onclick: () => {
+                      alertOnConfirm();
+                      alertOpen = false;
+                    },
+                    class: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+                    children: ($$renderer7) => {
+                      $$renderer7.push(`<!---->Confirm`);
+                    },
+                    $$slots: { default: true }
+                  });
+                  $$renderer6.push(`<!---->`);
+                },
+                $$slots: { default: true }
+              });
+              $$renderer5.push(`<!---->`);
+            },
+            $$slots: { default: true }
+          });
+          $$renderer4.push(`<!---->`);
+        },
+        $$slots: { default: true }
+      });
+      $$renderer3.push(`<!---->`);
     }
-    $$renderer2.push(`<!--]-->`);
+    do {
+      $$settled = true;
+      $$inner_renderer = $$renderer2.copy();
+      $$render_inner($$inner_renderer);
+    } while (!$$settled);
+    $$renderer2.subsume($$inner_renderer);
+    if ($$store_subs) unsubscribe_stores($$store_subs);
+  });
+}
+function _page($$renderer) {
+  head("1uha8ag", $$renderer, ($$renderer2) => {
+    $$renderer2.title(($$renderer3) => {
+      $$renderer3.push(`<title>claude-mux</title>`);
+    });
   });
+  $$renderer.push(`<div class="root-page svelte-1uha8ag">`);
+  AllSessionsPanel($$renderer, {});
+  $$renderer.push(`<!----></div>`);
 }
 export {
   _page as default