@hanzo/ui 8.0.27 → 8.0.28

package/dist/chunk-RCMDRI6V.js

@@ -1,1401 +0,0 @@
-'use client';
-import { useThemeName, PortalTheme } from './chunk-PI3GSHLU.js';
-import { styled, XStack, SizableText, Button as Button$1, YStack, Dialog, Popover as Popover$1, Select as Select$1, Tooltip as Tooltip$1, createStyledContext, TooltipGroup, Avatar as Avatar$1, Spinner, Checkbox as Checkbox$1, Collapsible as Collapsible$1, isWeb, DialogPortal, DialogOverlay, DialogContent, VisuallyHidden, DialogTitle, DialogDescription, Input, ScrollView, Separator, ListItem, Label as Label$1, Progress as Progress$1, SelectSeparator as SelectSeparator$1, Slider as Slider$1, Switch as Switch$1, Tabs as Tabs$1, TextArea } from '@hanzo/gui';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import * as React from 'react';
-import { forwardRef, useRef, useReducer, useState, useCallback, useMemo, useEffect, useId, useContext, Children, isValidElement, createElement, createContext, cloneElement } from 'react';
-import { Check, Search, X, EyeOff, Eye, GripVertical, ChevronDown, ChevronUp } from '@hanzogui/lucide-icons-2';
-import { Toaster as Toaster$1 } from '@hanzogui/toast/v2';
-export { toast } from '@hanzogui/toast/v2';
-
-var AspectRatio = ({ ratio = 1, ...props }) => /* @__PURE__ */ jsx(YStack, { "data-slot": "aspect-ratio", width: "100%", aspectRatio: ratio, ...props });
-var SIZE = 32;
-var Avatar = (props) => /* @__PURE__ */ jsx(Avatar$1, { "data-slot": "avatar", circular: true, size: SIZE, shrink: 0, overflow: "hidden", ...props });
-var AvatarImage = (props) => /* @__PURE__ */ jsx(Avatar$1.Image, { "data-slot": "avatar-image", width: "100%", height: "100%", ...props });
-var AvatarFallback = ({ children, ...props }) => /* @__PURE__ */ jsx(
-  Avatar$1.Fallback,
-  {
-    "data-slot": "avatar-fallback",
-    bg: "$color4",
-    items: "center",
-    justify: "center",
-    ...props,
-    children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx(SizableText, { size: "$2", color: "$color11", children }) : children
-  }
-);
-var ink = (children, Wrap = SizableText, props = {}) => Children.map(
-  children,
-  (child) => typeof child === "string" || typeof child === "number" ? createElement(Wrap, props, child) : child
-);
-var MIN_TOUCH = 44;
-var HEIGHT = 24;
-var HIT_SLOP = (MIN_TOUCH - HEIGHT) / 2;
-var BadgeContext = /* @__PURE__ */ createStyledContext({ variant: "default" });
-var BadgeFrame = styled(XStack, {
-  name: "Badge",
-  context: BadgeContext,
-  self: "flex-start",
-  items: "center",
-  justify: "center",
-  shrink: 0,
-  minH: HEIGHT,
-  px: "$2.5",
-  py: "$1",
-  gap: "$1.5",
-  rounded: "$2",
-  borderWidth: 1,
-  borderColor: "transparent",
-  overflow: "hidden",
-  variants: {
-    variant: {
-      default: { bg: "$color12" },
-      secondary: { bg: "$color4" },
-      destructive: { bg: "$red9" },
-      outline: { bg: "$background", borderColor: "$borderColor" },
-      ghost: { bg: "transparent", hoverStyle: { bg: "$color3" } },
-      link: { bg: "transparent" },
-      inputAdornment: { bg: "$color3", px: "$2" },
-      tags: { bg: "$color3", borderColor: "$borderColor", rounded: "$3" }
-    }
-  },
-  defaultVariants: { variant: "default" }
-});
-var BadgeText = styled(SizableText, {
-  name: "BadgeText",
-  context: BadgeContext,
-  size: "$1",
-  fontWeight: "600",
-  variants: {
-    variant: {
-      default: { color: "$color1" },
-      secondary: { color: "$color12" },
-      destructive: { color: "$white1" },
-      outline: { color: "$color12" },
-      ghost: { color: "$color12" },
-      link: { color: "$color12", textDecorationLine: "underline" },
-      inputAdornment: { color: "$color12", fontWeight: "500" },
-      tags: { color: "$color11", fontWeight: "400", textTransform: "capitalize" }
-    }
-  }
-});
-var badgeVariants = ({ variant } = {}) => `hanzo-badge hanzo-badge--${variant ?? "default"}`;
-function Badge({
-  className,
-  variant = "default",
-  asChild = false,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    BadgeFrame,
-    {
-      "data-slot": "badge",
-      "data-variant": variant,
-      variant: variant ?? "default",
-      asChild,
-      render: asChild ? void 0 : "span",
-      hitSlop: HIT_SLOP,
-      className: [badgeVariants({ variant }), className].filter(Boolean).join(" "),
-      ...props,
-      children: asChild ? children : ink(children, BadgeText)
-    }
-  );
-}
-var HEIGHT2 = {
-  default: 36,
-  sm: 32,
-  lg: 40,
-  icon: 36,
-  "icon-sm": 32,
-  "icon-lg": 40
-};
-var MIN_TOUCH2 = 44;
-var slop = (size) => Math.max(0, (MIN_TOUCH2 - HEIGHT2[size]) / 2);
-var Frame = styled(Button$1, {
-  name: "Button",
-  items: "center",
-  justify: "center",
-  gap: "$2",
-  shrink: 0,
-  rounded: "$3",
-  borderWidth: 1,
-  borderColor: "transparent",
-  cursor: "pointer",
-  variants: {
-    variant: {
-      default: { bg: "$color12", color: "$color1", hoverStyle: { opacity: 0.9 } },
-      primary: { bg: "$color12", color: "$color1", hoverStyle: { opacity: 0.9 } },
-      destructive: { bg: "$red9", color: "$white1", hoverStyle: { opacity: 0.9 } },
-      outline: {
-        bg: "$background",
-        color: "$color12",
-        borderColor: "$borderColor",
-        hoverStyle: { bg: "$color3" }
-      },
-      secondary: { bg: "$color4", color: "$color12", hoverStyle: { opacity: 0.8 } },
-      ghost: { bg: "transparent", color: "$color12", hoverStyle: { bg: "$color3" } },
-      link: { bg: "transparent", color: "$color12", hoverStyle: { textDecorationLine: "underline" } },
-      linkFG: { bg: "transparent", color: "$color12", hoverStyle: { textDecorationLine: "underline" } },
-      linkMuted: {
-        bg: "transparent",
-        color: "$color11",
-        hoverStyle: { color: "$color12", textDecorationLine: "underline" }
-      }
-    },
-    size: {
-      default: { height: HEIGHT2.default, px: "$4", fontSize: "$3" },
-      sm: { height: HEIGHT2.sm, px: "$3", gap: "$1.5", fontSize: "$2" },
-      lg: { height: HEIGHT2.lg, px: "$6", fontSize: "$3" },
-      icon: { height: HEIGHT2.icon, width: HEIGHT2.icon, px: 0 },
-      "icon-sm": { height: HEIGHT2["icon-sm"], width: HEIGHT2["icon-sm"], px: 0 },
-      "icon-lg": { height: HEIGHT2["icon-lg"], width: HEIGHT2["icon-lg"], px: 0 }
-    },
-    disabled: {
-      true: { opacity: 0.5, pointerEvents: "none", cursor: "default" }
-    }
-  },
-  defaultVariants: { variant: "default", size: "default" }
-});
-var buttonVariants = ({
-  variant,
-  size,
-  className
-} = {}) => [`hanzo-button`, `hanzo-button--${variant ?? "default"}`, `hanzo-button--${size ?? "default"}`, className].filter(Boolean).join(" ");
-function Button({
-  className,
-  variant = "default",
-  size = "default",
-  asChild = false,
-  isLoading = false,
-  disabled,
-  children,
-  ...props
-}) {
-  const resolved = size ?? "default";
-  return /* @__PURE__ */ jsx(
-    Frame,
-    {
-      "data-slot": "button",
-      "data-variant": variant ?? "default",
-      "data-size": resolved,
-      variant: variant ?? "default",
-      size: resolved,
-      asChild,
-      disabled: disabled || isLoading,
-      hitSlop: slop(resolved),
-      className: buttonVariants({ variant, size, className }),
-      icon: isLoading && !asChild ? /* @__PURE__ */ jsx(Spinner, { size: "small" }) : void 0,
-      ...props,
-      children
-    }
-  );
-}
-
-// src/backends/gui/slot.ts
-var slot = (name) => ({ "data-slot": name });
-var PAD = 24;
-var CardFrame = styled(YStack, {
-  name: "Card",
-  bg: "$background",
-  borderWidth: 1,
-  borderColor: "$borderColor",
-  rounded: "$6",
-  py: PAD,
-  gap: PAD
-});
-var HeaderFrame = styled(XStack, {
-  name: "CardHeader",
-  px: PAD,
-  gap: "$2",
-  items: "flex-start",
-  justify: "space-between"
-});
-var TitleFrame = styled(SizableText, { name: "CardTitle", size: "$4", fontWeight: "600" });
-var DescriptionFrame = styled(SizableText, { name: "CardDescription", size: "$2", color: "$color11" });
-var ActionFrame = styled(XStack, { name: "CardAction", self: "flex-start", shrink: 0 });
-var ContentFrame = styled(YStack, { name: "CardContent", px: PAD });
-var FooterFrame = styled(XStack, { name: "CardFooter", px: PAD, items: "center" });
-var Card = (p) => /* @__PURE__ */ jsx(CardFrame, { ...slot("card"), ...p });
-var CardHeader = (p) => /* @__PURE__ */ jsx(HeaderFrame, { ...slot("card-header"), ...p });
-var CardTitle = (p) => /* @__PURE__ */ jsx(TitleFrame, { ...slot("card-title"), ...p });
-var CardDescription = (p) => /* @__PURE__ */ jsx(DescriptionFrame, { ...slot("card-description"), ...p });
-var CardAction = (p) => /* @__PURE__ */ jsx(ActionFrame, { ...slot("card-action"), ...p });
-var CardContent = (p) => /* @__PURE__ */ jsx(ContentFrame, { ...slot("card-content"), ...p });
-var CardFooter = (p) => /* @__PURE__ */ jsx(FooterFrame, { ...slot("card-footer"), ...p });
-var BOX = 16;
-var HIT_SLOP2 = (44 - BOX) / 2;
-var Checkbox = (props) => /* @__PURE__ */ jsx(
-  Checkbox$1,
-  {
-    ...slot("checkbox"),
-    width: BOX,
-    height: BOX,
-    shrink: 0,
-    rounded: "$2",
-    borderWidth: 1,
-    borderColor: "$borderColor",
-    bg: "transparent",
-    hitSlop: HIT_SLOP2,
-    ...props,
-    children: /* @__PURE__ */ jsx(Checkbox$1.Indicator, { ...slot("checkbox-indicator"), items: "center", justify: "center", children: /* @__PURE__ */ jsx(Check, { size: BOX - 3 }) })
-  }
-);
-var Collapsible = (p) => /* @__PURE__ */ jsx(Collapsible$1, { ...slot("collapsible"), ...p });
-var CollapsibleTrigger = (p) => /* @__PURE__ */ jsx(Collapsible$1.Trigger, { ...slot("collapsible-trigger"), unstyled: true, hitSlop: 8, ...p });
-var CollapsibleContent = (p) => /* @__PURE__ */ jsx(Collapsible$1.Content, { ...slot("collapsible-content"), ...p });
-
-// src/backends/gui/command.logic.ts
-var score = (value, search, keywords) => {
-  const needle = search.trim().toLowerCase();
-  if (!needle) return 1;
-  const hay = (keywords?.length ? `${value} ${keywords.join(" ")}` : value).toLowerCase();
-  if (hay === needle) return 1;
-  if (hay.startsWith(needle)) return 0.9;
-  const at = hay.indexOf(needle);
-  if (at > -1) return 0.8 - at / (hay.length * 100);
-  let i = 0;
-  for (let j = 0; j < hay.length && i < needle.length; j++) if (hay[j] === needle[i]) i++;
-  return i === needle.length ? 0.4 : 0;
-};
-var step = (count, from, delta, loop = false) => {
-  if (count <= 0) return -1;
-  const next = from + delta;
-  if (next < 0) return loop ? count - 1 : 0;
-  if (next >= count) return loop ? 0 : count - 1;
-  return next;
-};
-var TOUCH = 44;
-var textOf = (node) => typeof node === "string" || typeof node === "number" ? String(node) : Array.isArray(node) ? node.map(textOf).filter(Boolean).join(" ") : isValidElement(node) ? textOf(node.props.children) : "";
-var CommandContext = /* @__PURE__ */ createContext(null);
-var GroupContext = /* @__PURE__ */ createContext(void 0);
-var useCommand = () => {
-  const ctx = useContext(CommandContext);
-  if (!ctx) throw new Error("Command parts must be rendered inside <Command>");
-  return ctx;
-};
-var Command = /* @__PURE__ */ forwardRef(function Command2({
-  value,
-  defaultValue,
-  onValueChange,
-  filter = score,
-  shouldFilter = true,
-  loop = false,
-  label,
-  vimBindings = true,
-  disablePointerSelection = false,
-  children,
-  ...rest
-}, ref) {
-  const entries = useRef(/* @__PURE__ */ new Map()).current;
-  const order = useRef([]).current;
-  const [version, touch] = useReducer((n) => n + 1, 0);
-  const [search, setSearch] = useState("");
-  const [uncontrolled, setUncontrolled] = useState(defaultValue ?? "");
-  const selected = value ?? uncontrolled;
-  const register = useCallback(
-    (id, entry) => {
-      entries.set(id, entry);
-      if (!order.includes(id)) order.push(id);
-      touch();
-      return () => {
-        entries.delete(id);
-        const at = order.indexOf(id);
-        if (at > -1) order.splice(at, 1);
-        touch();
-      };
-    },
-    [entries, order]
-  );
-  const visible = useMemo(
-    () => order.filter((id) => {
-      const entry = entries.get(id)?.current;
-      return !!entry && (!shouldFilter || filter(entry.value, search, entry.keywords) > 0);
-    }),
-    // `version` is the registry's revision — the registry itself is a mutable ref.
-    [version, order, entries, shouldFilter, filter, search]
-  );
-  const shown = useMemo(() => new Set(visible), [visible]);
-  const shownGroups = useMemo(
-    () => new Set(visible.map((id) => entries.get(id)?.current.group).filter(Boolean)),
-    [visible, entries]
-  );
-  const select = useCallback(
-    (next) => {
-      if (value === void 0) setUncontrolled(next);
-      onValueChange?.(next);
-    },
-    [value, onValueChange]
-  );
-  useEffect(() => {
-    if (!visible.length) return;
-    if (selected && visible.some((id) => entries.get(id)?.current.value === selected)) return;
-    const first = entries.get(visible[0])?.current.value;
-    if (first) select(first);
-  }, [visible, selected, entries, select]);
-  const move = useCallback(
-    (delta) => {
-      const reachable = visible.filter((id) => !entries.get(id)?.current.disabled);
-      const at = reachable.findIndex((id) => entries.get(id)?.current.value === selected);
-      const next = step(reachable.length, at, delta, loop);
-      const target = next < 0 ? void 0 : entries.get(reachable[next])?.current.value;
-      if (target) select(target);
-    },
-    [visible, entries, selected, loop, select]
-  );
-  const run = useCallback(
-    (id) => {
-      const entry = entries.get(id)?.current;
-      if (!entry || entry.disabled) return;
-      select(entry.value);
-      entry.onSelect?.(entry.value);
-    },
-    [entries, select]
-  );
-  const onKey = useCallback(
-    (e) => {
-      const mod = vimBindings && (e.ctrlKey || e.metaKey);
-      const down = e.key === "ArrowDown" || mod && (e.key === "n" || e.key === "j");
-      const up = e.key === "ArrowUp" || mod && (e.key === "p" || e.key === "k");
-      if (down || up) {
-        e.preventDefault();
-        move(down ? 1 : -1);
-      } else if (e.key === "Enter") {
-        e.preventDefault();
-        const id = visible.find((it) => entries.get(it)?.current.value === selected);
-        if (id) run(id);
-      }
-    },
-    [vimBindings, move, visible, entries, selected, run]
-  );
-  const ctx = useMemo(
-    () => ({
-      search,
-      setSearch,
-      selected,
-      select,
-      register,
-      touch,
-      run,
-      onKey,
-      shows: (id) => shown.has(id),
-      showsGroup: (group) => shownGroups.has(group),
-      empty: visible.length === 0,
-      disablePointerSelection
-    }),
-    [search, selected, select, register, run, onKey, shown, shownGroups, visible.length, disablePointerSelection]
-  );
-  return /* @__PURE__ */ jsx(CommandContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
-    YStack,
-    {
-      ref,
-      "data-slot": "command",
-      "aria-label": label,
-      width: "100%",
-      overflow: "hidden",
-      rounded: "$4",
-      bg: "$background",
-      ...isWeb ? { onKeyDown: onKey } : null,
-      ...rest,
-      children
-    }
-  ) });
-});
-var CommandDialog = ({
-  title = "Command Palette",
-  description = "Search for a command to run...",
-  children,
-  ...props
-}) => /* @__PURE__ */ jsx(Dialog, { modal: true, ...props, children: /* @__PURE__ */ jsxs(DialogPortal, { children: [
-  /* @__PURE__ */ jsx(DialogOverlay, { bg: "rgba(0,0,0,0.5)" }, "overlay"),
-  /* @__PURE__ */ jsxs(DialogContent, { p: 0, width: "100%", maxW: 640, overflow: "hidden", children: [
-    /* @__PURE__ */ jsxs(VisuallyHidden, { children: [
-      /* @__PURE__ */ jsx(DialogTitle, { children: title }),
-      /* @__PURE__ */ jsx(DialogDescription, { children: description })
-    ] }),
-    /* @__PURE__ */ jsx(Command, { children })
-  ] }, "content")
-] }) });
-var CommandInput = /* @__PURE__ */ forwardRef(
-  function CommandInput2({ value, onValueChange, placeholder, ...rest }, ref) {
-    const { search, setSearch, onKey } = useCommand();
-    useEffect(() => {
-      if (value !== void 0 && value !== search) setSearch(value);
-    }, [value, search, setSearch]);
-    return /* @__PURE__ */ jsxs(
-      XStack,
-      {
-        "data-slot": "command-input-wrapper",
-        items: "center",
-        gap: "$2",
-        px: "$3",
-        minH: TOUCH,
-        borderBottomWidth: 1,
-        borderColor: "$borderColor",
-        children: [
-          /* @__PURE__ */ jsx(Search, { size: 16, opacity: 0.5 }),
-          /* @__PURE__ */ jsx(
-            Input,
-            {
-              ref,
-              "data-slot": "command-input",
-              unstyled: true,
-              flex: 1,
-              height: TOUCH,
-              borderWidth: 0,
-              bg: "transparent",
-              color: "$color",
-              placeholder,
-              value: value ?? search,
-              onChangeText: (next) => {
-                setSearch(next);
-                onValueChange?.(next);
-              },
-              ...isWeb ? { onKeyDown: onKey } : null,
-              ...rest
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-var CommandList = /* @__PURE__ */ forwardRef(
-  function CommandList2(props, ref) {
-    return /* @__PURE__ */ jsx(ScrollView, { ref, "data-slot": "command-list", maxH: 300, ...props });
-  }
-);
-var CommandEmpty = /* @__PURE__ */ forwardRef(
-  function CommandEmpty2({ children, ...rest }, ref) {
-    const { empty } = useCommand();
-    if (!empty) return null;
-    return /* @__PURE__ */ jsx(YStack, { ref, "data-slot": "command-empty", py: "$4", items: "center", ...rest, children: typeof children === "string" ? /* @__PURE__ */ jsx(SizableText, { size: "$3", color: "$color11", children }) : children });
-  }
-);
-var CommandGroup = /* @__PURE__ */ forwardRef(
-  function CommandGroup2({ heading, children, ...rest }, ref) {
-    const id = useId();
-    const { showsGroup } = useCommand();
-    return /* @__PURE__ */ jsx(GroupContext.Provider, { value: id, children: /* @__PURE__ */ jsxs(
-      YStack,
-      {
-        ref,
-        "data-slot": "command-group",
-        display: showsGroup(id) ? "flex" : "none",
-        p: "$1",
-        ...rest,
-        children: [
-          heading != null ? /* @__PURE__ */ jsx(
-            SizableText,
-            {
-              size: "$1",
-              color: "$color11",
-              fontWeight: "500",
-              px: "$2",
-              py: "$1.5",
-              children: heading
-            }
-          ) : null,
-          children
-        ]
-      }
-    ) });
-  }
-);
-var CommandSeparator = /* @__PURE__ */ forwardRef(
-  function CommandSeparator2({ alwaysRender, ...rest }, ref) {
-    const { search } = useCommand();
-    if (!alwaysRender && search) return null;
-    return /* @__PURE__ */ jsx(Separator, { ref, "data-slot": "command-separator", ...rest });
-  }
-);
-var CommandItem = /* @__PURE__ */ forwardRef(
-  function CommandItem2({ value, keywords, disabled, onSelect, children, ...rest }, ref) {
-    const id = useId();
-    const { register, touch, run, select, selected, shows, disablePointerSelection } = useCommand();
-    const group = useContext(GroupContext);
-    const self = value ?? textOf(children);
-    const entry = useRef({ value: self, keywords, disabled, group, onSelect });
-    entry.current = { value: self, keywords, disabled, group, onSelect };
-    useEffect(() => register(id, entry), [id, register]);
-    useEffect(touch, [touch, self, disabled, keywords?.join("\0")]);
-    const isSelected = !!self && selected === self;
-    return /* @__PURE__ */ jsx(
-      ListItem,
-      {
-        ref,
-        "data-slot": "command-item",
-        "data-selected": isSelected,
-        "data-disabled": !!disabled,
-        display: shows(id) ? "flex" : "none",
-        disabled,
-        minH: TOUCH,
-        gap: "$2",
-        rounded: "$2",
-        bg: isSelected ? "$backgroundFocus" : "transparent",
-        opacity: disabled ? 0.5 : 1,
-        onPress: () => run(id),
-        onPointerEnter: disabled || disablePointerSelection ? void 0 : () => select(self),
-        ...rest,
-        children
-      }
-    );
-  }
-);
-var CommandShortcut = (props) => /* @__PURE__ */ jsx(
-  SizableText,
-  {
-    "data-slot": "command-shortcut",
-    ml: "auto",
-    size: "$1",
-    color: "$color11",
-    letterSpacing: 1.5,
-    ...props
-  }
-);
-var PAD2 = 24;
-var Dialog2 = (p) => /* @__PURE__ */ jsx(Dialog, { modal: true, ...p });
-var DialogTrigger = Dialog.Trigger;
-var DialogPortal2 = Dialog.Portal;
-var DialogClose = Dialog.Close;
-var DialogOverlay2 = (props) => /* @__PURE__ */ jsx(
-  Dialog.Overlay,
-  {
-    ...slot("dialog-overlay"),
-    bg: "rgba(0,0,0,0.5)",
-    opacity: 0.5,
-    ...props
-  }
-);
-var DialogContent2 = ({ showCloseButton = true, children, ...props }) => {
-  const themeName = useThemeName();
-  return /* @__PURE__ */ jsx(Dialog.Portal, { children: /* @__PURE__ */ jsxs(PortalTheme, { name: themeName, children: [
-    /* @__PURE__ */ jsx(DialogOverlay2, {}),
-    /* @__PURE__ */ jsxs(
-      Dialog.Content,
-      {
-        ...slot("dialog-content"),
-        bg: "$background",
-        borderWidth: 1,
-        borderColor: "$borderColor",
-        rounded: "$5",
-        p: PAD2,
-        gap: "$4",
-        width: "100%",
-        maxW: 512,
-        ...props,
-        children: [
-          children,
-          showCloseButton ? /* @__PURE__ */ jsx(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(
-            XStack,
-            {
-              ...slot("dialog-close"),
-              position: "absolute",
-              t: 16,
-              r: 16,
-              cursor: "pointer",
-              opacity: 0.7,
-              hoverStyle: { opacity: 1 },
-              hitSlop: 14,
-              "aria-label": "Close",
-              children: /* @__PURE__ */ jsx(X, { size: 16 })
-            }
-          ) }) : null
-        ]
-      }
-    )
-  ] }) });
-};
-var DialogHeader = (props) => /* @__PURE__ */ jsx(YStack, { ...slot("dialog-header"), gap: "$2", ...props });
-var DialogFooter = (props) => /* @__PURE__ */ jsx(XStack, { ...slot("dialog-footer"), gap: "$2", justify: "flex-end", items: "center", ...props });
-var DialogTitle2 = (props) => /* @__PURE__ */ jsx(Dialog.Title, { ...slot("dialog-title"), size: "$5", fontWeight: "600", ...props });
-var DialogDescription2 = (props) => /* @__PURE__ */ jsx(Dialog.Description, { ...slot("dialog-description"), size: "$2", color: "$color11", ...props });
-var HEIGHT3 = 36;
-var GUTTER = 12;
-var WELL = 36;
-var well = (side) => ({
-  position: "absolute",
-  [side]: GUTTER,
-  t: 0,
-  b: 0,
-  items: "center",
-  justify: "center"
-});
-var Input2 = /* @__PURE__ */ forwardRef(function Input3({ startAdornment, endAdornment, hidePasswordToggle, type, secureTextEntry, ...props }, ref) {
-  const [revealed, setRevealed] = useState(false);
-  const isPassword = type === "password" || secureTextEntry === true;
-  const toggle = isPassword && !hidePasswordToggle;
-  const field = /* @__PURE__ */ jsx(
-    Input,
-    {
-      ref,
-      ...slot("input"),
-      secureTextEntry: isPassword && !revealed,
-      height: HEIGHT3,
-      width: "100%",
-      minW: 0,
-      rounded: "$3",
-      bg: "transparent",
-      borderWidth: 1,
-      borderColor: "$borderColor",
-      placeholderTextColor: "$color10",
-      fontSize: "$3",
-      pl: startAdornment ? WELL : GUTTER,
-      pr: endAdornment || toggle ? WELL : GUTTER,
-      ...props
-    }
-  );
-  if (!startAdornment && !endAdornment && !toggle) return field;
-  return /* @__PURE__ */ jsxs(XStack, { position: "relative", width: "100%", items: "center", children: [
-    startAdornment ? /* @__PURE__ */ jsx(XStack, { ...well("l"), pointerEvents: "none", opacity: 0.6, children: startAdornment }) : null,
-    field,
-    toggle ? /* @__PURE__ */ jsx(
-      XStack,
-      {
-        ...well("r"),
-        cursor: "pointer",
-        hitSlop: 8,
-        onPress: () => setRevealed((v) => !v),
-        "aria-label": revealed ? "Hide password" : "Show password",
-        children: revealed ? /* @__PURE__ */ jsx(EyeOff, { size: 16 }) : /* @__PURE__ */ jsx(Eye, { size: 16 })
-      }
-    ) : endAdornment ? /* @__PURE__ */ jsx(XStack, { ...well("r"), opacity: 0.6, children: endAdornment }) : null
-  ] });
-});
-var Label = (props) => /* @__PURE__ */ jsx(
-  Label$1,
-  {
-    ...slot("label"),
-    fontSize: "$2",
-    fontWeight: "500",
-    color: "$color12",
-    select: "none",
-    cursor: "pointer",
-    ...props
-  }
-);
-var DEFAULT_OFFSET = 4;
-var OffsetContext = /* @__PURE__ */ createContext(null);
-function Popover({ offset = DEFAULT_OFFSET, ...props }) {
-  const [current, setOffset] = useState(offset);
-  useEffect(() => setOffset(offset), [offset]);
-  return /* @__PURE__ */ jsx(OffsetContext.Provider, { value: setOffset, children: /* @__PURE__ */ jsx(Popover$1, { offset: current, ...props }) });
-}
-var PopoverTrigger = Popover$1.Trigger;
-var PopoverAnchor = Popover$1.Anchor;
-var PopoverClose = Popover$1.Close;
-var PopoverContent = ({ sideOffset = DEFAULT_OFFSET, align: _align, ...props }) => {
-  const themeName = useThemeName();
-  const setOffset = useContext(OffsetContext);
-  useEffect(() => setOffset?.(sideOffset), [setOffset, sideOffset]);
-  return /* @__PURE__ */ jsx(PortalTheme, { name: themeName, children: /* @__PURE__ */ jsx(
-    Popover$1.Content,
-    {
-      ...slot("popover-content"),
-      bg: "$color2",
-      borderWidth: 1,
-      borderColor: "$borderColor",
-      rounded: "$4",
-      p: "$4",
-      width: 288,
-      ...props
-    }
-  ) });
-};
-var Progress = ({ value, ...props }) => /* @__PURE__ */ jsx(
-  Progress$1,
-  {
-    ...slot("progress"),
-    value: value ?? 0,
-    height: 8,
-    width: "100%",
-    bg: "$color4",
-    rounded: "$10",
-    overflow: "hidden",
-    ...props,
-    children: /* @__PURE__ */ jsx(Progress$1.Indicator, { ...slot("progress-indicator"), bg: "$color12" })
-  }
-);
-
-// src/backends/gui/resizable.logic.ts
-var clamp = (n, lo, hi) => Math.max(lo, Math.min(n, hi));
-var floorOf = (s) => s.collapsible ? s.collapsedSize ?? 0 : s.minSize ?? 0;
-var ceilOf = (s) => s.maxSize ?? 100;
-function defaultLayout(specs) {
-  if (specs.length === 0) return [];
-  const claimed = specs.reduce((n, s) => n + (s.defaultSize ?? 0), 0);
-  const free = specs.filter((s) => s.defaultSize == null).length;
-  const each = free > 0 ? Math.max(0, 100 - claimed) / free : 0;
-  const raw = specs.map((s) => s.defaultSize ?? each);
-  const sum = raw.reduce((a, b) => a + b, 0);
-  return sum > 0 ? raw.map((v) => v / sum * 100) : specs.map(() => 100 / specs.length);
-}
-function resizeAt(sizes, specs, i, delta) {
-  const a = sizes[i];
-  const b = sizes[i + 1];
-  const sa = specs[i];
-  const sb = specs[i + 1];
-  if (a == null || b == null || !sa || !sb) return sizes;
-  const pair = a + b;
-  const lo = Math.max(floorOf(sa), pair - ceilOf(sb));
-  const hi = Math.min(ceilOf(sa), pair - floorOf(sb));
-  if (lo > hi) return sizes;
-  const next = clamp(a + delta, lo, hi);
-  if (next === a) return sizes;
-  const out = sizes.slice();
-  out[i] = next;
-  out[i + 1] = pair - next;
-  return out;
-}
-var webStorage = () => globalThis.localStorage;
-var storeKey = (id) => `hanzo.panels.${id}`;
-function loadStore(id) {
-  if (!id) return {};
-  try {
-    return JSON.parse(webStorage()?.getItem(storeKey(id)) ?? "{}");
-  } catch {
-    return {};
-  }
-}
-function saveStore(id, store) {
-  if (!id) return;
-  try {
-    webStorage()?.setItem(storeKey(id), JSON.stringify(store));
-  } catch {
-  }
-}
-var GroupContext2 = /* @__PURE__ */ createContext(null);
-var SlotContext = /* @__PURE__ */ createContext(-1);
-function ResizablePanelGroup({
-  direction,
-  autoSaveId,
-  onLayout,
-  children,
-  ...rest
-}) {
-  const axis = direction === "horizontal";
-  const extent = useRef(0);
-  const [store, setStore] = useState({});
-  const slots = useMemo(
-    () => Children.toArray(children).filter(isValidElement),
-    [children]
-  );
-  const specs = useMemo(
-    () => slots.filter((el) => el.type === ResizablePanel).map((el, i) => {
-      const p = el.props;
-      return {
-        id: p.id ?? String(p.order ?? i),
-        defaultSize: p.defaultSize,
-        minSize: p.minSize,
-        maxSize: p.maxSize,
-        collapsible: p.collapsible,
-        collapsedSize: p.collapsedSize,
-        onResize: p.onResize
-      };
-    }),
-    [slots]
-  );
-  const key = specs.map((s) => s.id).join(",");
-  const sizes = store[key] ?? defaultLayout(specs);
-  useEffect(() => {
-    setStore(loadStore(autoSaveId));
-  }, [autoSaveId]);
-  const setLayout = useCallback(
-    (next) => {
-      const merged = { ...store, [key]: next };
-      setStore(merged);
-      saveStore(autoSaveId, merged);
-      onLayout?.(next);
-    },
-    [autoSaveId, key, onLayout, store]
-  );
-  const prev = useRef([]);
-  useEffect(() => {
-    specs.forEach((s, i) => {
-      if (sizes[i] != null && sizes[i] !== prev.current[i])
-        s.onResize?.(sizes[i]);
-    });
-    prev.current = sizes;
-  }, [specs, sizes]);
-  const value = useMemo(
-    () => ({ direction, specs, sizes, extent, setLayout }),
-    [direction, specs, sizes, setLayout]
-  );
-  let panel = -1;
-  return /* @__PURE__ */ jsx(GroupContext2.Provider, { value, children: /* @__PURE__ */ jsx(
-    XStack,
-    {
-      width: "100%",
-      height: "100%",
-      flexDirection: axis ? "row" : "column",
-      overflow: "hidden",
-      "data-panel-group-direction": direction,
-      onLayout: (e) => {
-        extent.current = axis ? e.nativeEvent.layout.width : e.nativeEvent.layout.height;
-      },
-      ...rest,
-      children: slots.map((el, i) => {
-        if (el.type === ResizablePanel) panel++;
-        return /* @__PURE__ */ jsx(SlotContext.Provider, { value: panel, children: el }, el.key ?? i);
-      })
-    }
-  ) });
-}
-function ResizablePanel({
-  id,
-  order,
-  defaultSize,
-  minSize,
-  maxSize,
-  collapsible,
-  collapsedSize,
-  onResize,
-  children,
-  ...rest
-}) {
-  const group = useContext(GroupContext2);
-  const index = useContext(SlotContext);
-  const size = group?.sizes[index];
-  return /* @__PURE__ */ jsx(
-    XStack,
-    {
-      flexDirection: "column",
-      overflow: "hidden",
-      flexBasis: 0,
-      grow: size ?? 1,
-      shrink: 1,
-      ...rest,
-      children
-    }
-  );
-}
-var THICKNESS = 4;
-var HIT_SLOP3 = 20;
-var KEY_STEP = 5;
-var KEY_STEP_FINE = 1;
-function ResizableHandle({
-  withHandle,
-  disabled,
-  ...rest
-}) {
-  const group = useContext(GroupContext2);
-  const boundary = useContext(SlotContext);
-  const [state, setState] = useState("idle");
-  const start = useRef(null);
-  const axis = group?.direction !== "vertical";
-  const off = disabled || !group || boundary < 0 || boundary + 1 >= group.sizes.length;
-  const posOf = useCallback(
-    (e) => (axis ? e.clientX ?? e.nativeEvent?.pageX : e.clientY ?? e.nativeEvent?.pageY) ?? 0,
-    [axis]
-  );
-  const begin = useCallback(
-    (e) => {
-      if (off || !group) return;
-      start.current = { pos: posOf(e), sizes: group.sizes };
-      setState("drag");
-      const target = e.currentTarget;
-      if (target?.setPointerCapture && e.pointerId != null)
-        target.setPointerCapture(e.pointerId);
-    },
-    [group, off, posOf]
-  );
-  const move = useCallback(
-    (e) => {
-      const from = start.current;
-      if (!from || !group) return;
-      const px = group.extent.current;
-      if (px <= 0) return;
-      group.setLayout(
-        resizeAt(
-          from.sizes,
-          group.specs,
-          boundary,
-          (posOf(e) - from.pos) / px * 100
-        )
-      );
-    },
-    [boundary, group, posOf]
-  );
-  const end = useCallback(() => {
-    start.current = null;
-    setState("idle");
-  }, []);
-  const nudge = useCallback(
-    (e) => {
-      if (off || !group) return;
-      const dir = axis ? e.key === "ArrowLeft" ? -1 : e.key === "ArrowRight" ? 1 : 0 : e.key === "ArrowUp" ? -1 : e.key === "ArrowDown" ? 1 : 0;
-      if (dir === 0) return;
-      e.preventDefault();
-      group.setLayout(
-        resizeAt(
-          group.sizes,
-          group.specs,
-          boundary,
-          dir * (e.shiftKey ? KEY_STEP_FINE : KEY_STEP)
-        )
-      );
-    },
-    [axis, boundary, group, off]
-  );
-  const hover = useCallback(
-    (on) => setState((s) => s === "drag" ? s : on ? "hover" : "idle"),
-    []
-  );
-  const gesture = isWeb ? {
-    onPointerDown: begin,
-    onPointerMove: move,
-    onPointerUp: end,
-    onPointerCancel: end,
-    onKeyDown: nudge,
-    onMouseEnter: () => hover(true),
-    onMouseLeave: () => hover(false)
-  } : {
-    onStartShouldSetResponder: () => !off,
-    onMoveShouldSetResponder: () => !off,
-    onResponderTerminationRequest: () => false,
-    onResponderGrant: begin,
-    onResponderMove: move,
-    onResponderRelease: end,
-    onResponderTerminate: end
-  };
-  return /* @__PURE__ */ jsxs(
-    XStack,
-    {
-      position: "relative",
-      flexDirection: axis ? "column" : "row",
-      items: "center",
-      justify: "center",
-      shrink: 0,
-      width: axis ? THICKNESS : "100%",
-      height: axis ? "100%" : THICKNESS,
-      hitSlop: HIT_SLOP3,
-      cursor: off ? "default" : axis ? "col-resize" : "row-resize",
-      tabIndex: off ? -1 : 0,
-      role: "separator",
-      "aria-orientation": axis ? "vertical" : "horizontal",
-      "data-panel-group-direction": group?.direction,
-      "data-resize-handle-state": state,
-      ...gesture,
-      ...rest,
-      children: [
-        /* @__PURE__ */ jsx(
-          Separator,
-          {
-            vertical: axis,
-            borderColor: state === "idle" ? "$borderColor" : "$color8"
-          }
-        ),
-        withHandle && /* @__PURE__ */ jsx(
-          XStack,
-          {
-            position: "absolute",
-            items: "center",
-            justify: "center",
-            width: 12,
-            height: 20,
-            rounded: "$2",
-            bg: "$color5",
-            borderWidth: 1,
-            borderColor: "$borderColor",
-            rotate: axis ? "0deg" : "90deg",
-            children: /* @__PURE__ */ jsx(GripVertical, { size: 10 })
-          }
-        )
-      ]
-    }
-  );
-}
-var BAR = 10;
-var TOUCH2 = 44;
-var SLOP = (TOUCH2 - BAR) / 2;
-var ZERO = { offset: 0, viewport: 0, content: 0 };
-var Ctx = /* @__PURE__ */ createContext(null);
-var clamp2 = (n, max) => n < 0 ? 0 : n > max ? max : n;
-var ScrollBar = /* @__PURE__ */ forwardRef(
-  function ScrollBar2({ orientation = "vertical", ...props }, ref) {
-    const ctx = useContext(Ctx);
-    const [len, setLen] = useState(0);
-    const from = useRef(null);
-    if (!ctx || ctx.axis !== orientation) return null;
-    const vertical = orientation === "vertical";
-    const { content, viewport, offset } = ctx.track;
-    const scrollable = content - viewport;
-    const overflow = scrollable > 1;
-    const shown = ctx.type === "always" ? true : !overflow ? false : ctx.type === "auto" ? true : ctx.active;
-    const thumb = Math.max(TOUCH2, len * (viewport / Math.max(content, 1)));
-    const range = Math.max(len - thumb, 0);
-    const at = overflow ? range * clamp2(offset / scrollable, 1) : 0;
-    const coord = (e) => vertical ? e.nativeEvent.pageY : e.nativeEvent.pageX;
-    return /* @__PURE__ */ jsx(
-      XStack,
-      {
-        ref,
-        ...slot("scroll-area-scrollbar"),
-        position: "absolute",
-        ...vertical ? {
-          t: 0,
-          b: 0,
-          ...ctx.rtl ? { l: 0 } : { r: 0 },
-          width: BAR,
-          flexDirection: "column"
-        } : { l: 0, r: 0, b: 0, height: BAR, flexDirection: "row" },
-        p: 1,
-        opacity: shown ? 1 : 0,
-        pointerEvents: shown ? "auto" : "none",
-        onLayout: (e) => setLen(
-          vertical ? e.nativeEvent.layout.height : e.nativeEvent.layout.width
-        ),
-        ...props,
-        children: /* @__PURE__ */ jsx(
-          YStack,
-          {
-            ...slot("scroll-area-thumb"),
-            bg: "$borderColor",
-            rounded: BAR,
-            hitSlop: vertical ? { left: SLOP, right: SLOP } : { top: SLOP, bottom: SLOP },
-            ...vertical ? { width: "100%", height: thumb, y: at } : { height: "100%", width: thumb, x: at },
-            onStartShouldSetResponder: () => true,
-            onMoveShouldSetResponder: () => true,
-            onResponderGrant: (e) => {
-              from.current = coord(e);
-            },
-            onResponderMove: (e) => {
-              const start = from.current;
-              if (start === null || range === 0) return;
-              const now = coord(e);
-              from.current = now;
-              ctx.scrollBy((now - start) * scrollable / range);
-            },
-            onResponderRelease: () => {
-              from.current = null;
-            },
-            onResponderTerminate: () => {
-              from.current = null;
-            }
-          }
-        )
-      }
-    );
-  }
-);
-var ScrollArea = /* @__PURE__ */ forwardRef(
-  function ScrollArea2({
-    type = "hover",
-    scrollHideDelay = 600,
-    dir,
-    horizontal = false,
-    children,
-    ...props
-  }, ref) {
-    const viewport = useRef(null);
-    const live = useRef(ZERO);
-    const [track, setTrack] = useState(ZERO);
-    const [active, setActive] = useState(false);
-    const timer = useRef(null);
-    const axis = horizontal ? "horizontal" : "vertical";
-    const put = useCallback((patch) => {
-      const next = { ...live.current, ...patch };
-      live.current = next;
-      setTrack(next);
-    }, []);
-    const clear = () => {
-      if (timer.current) clearTimeout(timer.current);
-      timer.current = null;
-    };
-    const hold = () => {
-      clear();
-      setActive(true);
-    };
-    const wake = useCallback(() => {
-      setActive(true);
-      clear();
-      timer.current = setTimeout(() => setActive(false), scrollHideDelay);
-    }, [scrollHideDelay]);
-    useEffect(() => clear, []);
-    const scrollBy = useCallback(
-      (delta) => {
-        const t = live.current;
-        const next = clamp2(
-          t.offset + delta,
-          Math.max(t.content - t.viewport, 0)
-        );
-        put({ offset: next });
-        viewport.current?.scrollTo(
-          horizontal ? { x: next, y: 0, animated: false } : { x: 0, y: next, animated: false }
-        );
-      },
-      [horizontal, put]
-    );
-    return /* @__PURE__ */ jsxs(
-      YStack,
-      {
-        ref,
-        ...slot("scroll-area"),
-        position: "relative",
-        overflow: "hidden",
-        onMouseEnter: type === "hover" ? hold : void 0,
-        onMouseLeave: type === "hover" ? wake : void 0,
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx(
-            ScrollView,
-            {
-              ref: viewport,
-              ...slot("scroll-area-viewport"),
-              flex: 1,
-              width: "100%",
-              height: "100%",
-              horizontal,
-              showsVerticalScrollIndicator: false,
-              showsHorizontalScrollIndicator: false,
-              scrollEventThrottle: 16,
-              onLayout: (e) => put({
-                viewport: horizontal ? e.nativeEvent.layout.width : e.nativeEvent.layout.height
-              }),
-              onContentSizeChange: (w, h) => put({ content: horizontal ? w : h }),
-              onScroll: (e) => {
-                const { contentOffset } = e.nativeEvent;
-                put({ offset: horizontal ? contentOffset.x : contentOffset.y });
-                wake();
-              },
-              children
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Ctx.Provider,
-            {
-              value: { axis, track, type, active, rtl: dir === "rtl", scrollBy },
-              children: /* @__PURE__ */ jsx(ScrollBar, { orientation: axis })
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-var ROW_H = 32;
-var HIT_SLOP4 = (44 - ROW_H) / 2;
-var Select = Select$1;
-var SelectGroup = Select$1.Group;
-var SelectValue = Select$1.Value;
-var SelectTrigger = ({ children, ...props }) => /* @__PURE__ */ jsxs(
-  Select$1.Trigger,
-  {
-    ...slot("select-trigger"),
-    unstyled: true,
-    items: "center",
-    justify: "space-between",
-    gap: "$2",
-    height: 36,
-    px: "$3",
-    rounded: "$3",
-    borderWidth: 1,
-    borderColor: "$borderColor",
-    bg: "transparent",
-    cursor: "pointer",
-    hitSlop: 4,
-    ...props,
-    children: [
-      ink(children, void 0, { size: "$2" }),
-      /* @__PURE__ */ jsx(Select$1.Icon, { children: /* @__PURE__ */ jsx(ChevronDown, { size: 16, opacity: 0.5 }) })
-    ]
-  }
-);
-var SelectItem = ({ children, ...props }) => /* @__PURE__ */ jsxs(
-  Select$1.Item,
-  {
-    ...slot("select-item"),
-    unstyled: true,
-    index: props.index ?? 0,
-    items: "center",
-    gap: "$2",
-    minH: ROW_H,
-    pl: "$2",
-    pr: "$7",
-    rounded: "$2",
-    cursor: "pointer",
-    hitSlop: HIT_SLOP4,
-    hoverStyle: { bg: "$color5" },
-    focusStyle: { bg: "$color5" },
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx(Select$1.ItemText, { children }),
-      /* @__PURE__ */ jsx(XStack, { position: "absolute", r: "$2", items: "center", justify: "center", pointerEvents: "none", children: /* @__PURE__ */ jsx(Select$1.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { size: 16 }) }) })
-    ]
-  }
-);
-var stampIndices = (children, next) => Children.map(children, (child) => {
-  if (!isValidElement(child)) return child;
-  if (child.type === SelectItem) return cloneElement(child, { index: next() });
-  const kids = child.props.children;
-  return kids === void 0 ? child : cloneElement(child, void 0, stampIndices(kids, next));
-});
-var SelectScrollUpButton = (props) => /* @__PURE__ */ jsx(Select$1.ScrollUpButton, { ...slot("select-scroll-up-button"), items: "center", justify: "center", py: "$1", ...props, children: /* @__PURE__ */ jsx(ChevronUp, { size: 16 }) });
-var SelectScrollDownButton = (props) => /* @__PURE__ */ jsx(Select$1.ScrollDownButton, { ...slot("select-scroll-down-button"), items: "center", justify: "center", py: "$1", ...props, children: /* @__PURE__ */ jsx(ChevronDown, { size: 16 }) });
-var SelectContent = ({ children, ...props }) => {
-  let n = 0;
-  return /* @__PURE__ */ jsxs(Select$1.Content, { ...slot("select-content"), ...props, children: [
-    /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
-    /* @__PURE__ */ jsx(
-      Select$1.Viewport,
-      {
-        minW: 128,
-        p: "$1",
-        bg: "$color2",
-        borderWidth: 1,
-        borderColor: "$borderColor",
-        rounded: "$4",
-        children: stampIndices(children, () => n++)
-      }
-    ),
-    /* @__PURE__ */ jsx(SelectScrollDownButton, {})
-  ] });
-};
-var SelectLabel = (props) => /* @__PURE__ */ jsx(Select$1.Label, { ...slot("select-label"), px: "$2", py: "$1.5", fontSize: "$1", color: "$color11", ...props });
-var SelectSeparator = (props) => /* @__PURE__ */ jsx(SelectSeparator$1, { ...slot("select-separator"), my: "$1", borderColor: "$borderColor", ...props });
-var Separator3 = ({ orientation = "horizontal", decorative: _decorative, ...props }) => /* @__PURE__ */ jsx(
-  Separator,
-  {
-    ...slot("separator"),
-    "data-orientation": orientation,
-    vertical: orientation === "vertical",
-    borderColor: "$borderColor",
-    ...props
-  }
-);
-var TRACK = 6;
-var THUMB = 16;
-var HIT_SLOP5 = (44 - THUMB) / 2;
-var Slider = (props) => /* @__PURE__ */ jsxs(Slider$1, { ...slot("slider"), width: "100%", ...props, children: [
-  /* @__PURE__ */ jsx(Slider$1.Track, { ...slot("slider-track"), height: TRACK, bg: "$color4", rounded: "$10", children: /* @__PURE__ */ jsx(Slider$1.TrackActive, { ...slot("slider-range"), bg: "$color12" }) }),
-  /* @__PURE__ */ jsx(
-    Slider$1.Thumb,
-    {
-      ...slot("slider-thumb"),
-      index: 0,
-      circular: true,
-      size: THUMB,
-      bg: "$background",
-      borderWidth: 1,
-      borderColor: "$color12",
-      hitSlop: HIT_SLOP5
-    }
-  )
-] });
-var TRACK_H = 20;
-var THUMB2 = 16;
-var HIT_SLOP6 = (44 - TRACK_H) / 2;
-var Switch = (props) => /* @__PURE__ */ jsx(
-  Switch$1,
-  {
-    ...slot("switch"),
-    width: 36,
-    height: TRACK_H,
-    p: 2,
-    shrink: 0,
-    hitSlop: HIT_SLOP6,
-    ...props,
-    children: /* @__PURE__ */ jsx(
-      Switch$1.Thumb,
-      {
-        ...slot("switch-thumb"),
-        width: THUMB2,
-        height: THUMB2
-      }
-    )
-  }
-);
-var ROW_H2 = 36;
-var HIT_SLOP7 = (44 - ROW_H2) / 2;
-var Tabs = (p) => /* @__PURE__ */ jsx(Tabs$1, { ...slot("tabs"), flexDirection: "column", gap: "$2", ...p });
-var TabsList = (p) => /* @__PURE__ */ jsx(
-  Tabs$1.List,
-  {
-    ...slot("tabs-list"),
-    items: "center",
-    justify: "center",
-    self: "flex-start",
-    height: ROW_H2,
-    p: 3,
-    gap: 2,
-    bg: "$color3",
-    rounded: "$4",
-    ...p
-  }
-);
-var TabsTrigger = ({ children, ...p }) => /* @__PURE__ */ jsx(
-  Tabs$1.Tab,
-  {
-    ...slot("tabs-trigger"),
-    unstyled: true,
-    items: "center",
-    justify: "center",
-    height: "100%",
-    px: "$3",
-    gap: "$1.5",
-    rounded: "$3",
-    cursor: "pointer",
-    hitSlop: HIT_SLOP7,
-    hoverStyle: { bg: "$color4" },
-    focusStyle: { bg: "$color4" },
-    ...p,
-    children: ink(children, void 0, { size: "$2", fontWeight: "500" })
-  }
-);
-var TabsContent = (p) => /* @__PURE__ */ jsx(Tabs$1.Content, { ...slot("tabs-content"), flex: 1, ...p });
-var MIN_ROWS = 3;
-var rowsOf = (v) => typeof v === "string" ? v.split("\n").length : 0;
-var Textarea = /* @__PURE__ */ React.forwardRef(function Textarea2({ rows, value, defaultValue, ...props }, ref) {
-  const [typed, setTyped] = React.useState(() => rowsOf(defaultValue));
-  const uncontrolled = value === void 0;
-  const invalid = props["aria-invalid"];
-  return /* @__PURE__ */ jsx(
-    TextArea,
-    {
-      ref,
-      "data-slot": "textarea",
-      rows: Math.max(rows ?? MIN_ROWS, uncontrolled ? typed : rowsOf(value)),
-      value,
-      defaultValue,
-      onChangeText: uncontrolled ? (t) => setTyped(rowsOf(t)) : void 0,
-      width: "100%",
-      minH: 64,
-      rounded: "$4",
-      bg: "transparent",
-      borderWidth: 1,
-      borderColor: invalid && invalid !== "false" ? "$red7" : "$borderColor",
-      placeholderTextColor: "$color10",
-      fontSize: "$3",
-      opacity: props.disabled ? 0.5 : 1,
-      ...props
-    }
-  );
-});
-var Toaster = /* @__PURE__ */ forwardRef(function Toaster2(props, ref) {
-  const { theme = "system", toastOptions, ...rest } = props;
-  return /* @__PURE__ */ jsx(Toaster$1, { ref, theme, toastOptions, ...rest });
-});
-var DEFAULT_OFFSET2 = 4;
-var Tooltip = (props) => /* @__PURE__ */ jsx(Tooltip$1, { offset: DEFAULT_OFFSET2, ...props });
-var TooltipTrigger = Tooltip$1.Trigger;
-var TooltipProvider = TooltipGroup;
-var TooltipContent = ({ sideOffset: _sideOffset, children, ...props }) => {
-  const themeName = useThemeName();
-  return /* @__PURE__ */ jsx(PortalTheme, { name: themeName, children: /* @__PURE__ */ jsx(
-    Tooltip$1.Content,
-    {
-      ...slot("tooltip-content"),
-      bg: "$color2",
-      borderWidth: 1,
-      borderColor: "$borderColor",
-      rounded: "$3",
-      px: "$3",
-      py: "$1.5",
-      ...props,
-      children: ink(children, void 0, { size: "$1" })
-    }
-  ) });
-};
-
-export { AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Dialog2 as Dialog, DialogClose, DialogContent2 as DialogContent, DialogDescription2 as DialogDescription, DialogFooter, DialogHeader, DialogOverlay2 as DialogOverlay, DialogPortal2 as DialogPortal, DialogTitle2 as DialogTitle, DialogTrigger, Input2 as Input, Label, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator3 as Separator, Slider, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants };
-//# sourceMappingURL=chunk-RCMDRI6V.js.map
-//# sourceMappingURL=chunk-RCMDRI6V.js.map