@hanzo/ui 8.0.26 → 8.0.27

package/dist/chunk-RCMDRI6V.js

@@ -0,0 +1,1401 @@
+'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