@luxfi/ui 8.0.0 → 8.1.0

package/dist/3d-model-viewer.cjs

@@ -0,0 +1,909 @@
+"use client";
+'use strict';
+
+var React3 = require('react');
+var ui = require('@hanzo/ui');
+var lucideReact = require('lucide-react');
+var gui = require('@hanzo/gui');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
+
+var SKELETON_CLASSES = "lux-skeleton rounded-sm";
+var Skeleton = React3__namespace.forwardRef(
+  function Skeleton2(props, ref) {
+    const { loading = true, asChild, className, children, style, ...rest } = props;
+    if (!loading) {
+      if (asChild && React3__namespace.isValidElement(children)) return children;
+      return /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { ref, className, style, ...rest, children });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        "data-loading": true,
+        ...ui.sx(
+          SKELETON_CLASSES,
+          asChild || children ? "[&_*]:invisible" : "min-h-5",
+          className
+        ),
+        style,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+React3__namespace.forwardRef(
+  function SkeletonCircle2(props, ref) {
+    const { size = 40, loading = true, className, ...rest } = props;
+    const dimension = typeof size === "number" ? `${size}px` : size;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Skeleton,
+      {
+        ref,
+        loading,
+        ...ui.sx("rounded-full shrink-0", className),
+        style: { width: dimension, height: dimension, ...rest.style },
+        ...rest
+      }
+    );
+  }
+);
+React3__namespace.forwardRef(
+  function SkeletonText2(props, ref) {
+    const { noOfLines = 3, loading = true, className, ...rest } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { ref, className: ui.cn("flex w-full flex-col gap-2", className), ...rest, children: Array.from({ length: noOfLines }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      Skeleton,
+      {
+        loading,
+        ...ui.sx(ui.cn("h-4", index === noOfLines - 1 && "max-w-[80%]"))
+      },
+      index
+    )) });
+  }
+);
+var SpinnerFrame = gui.styled(gui.View, {
+  name: "ButtonSpinner",
+  render: /* @__PURE__ */ jsxRuntime.jsx("span", {}),
+  width: 16,
+  height: 16,
+  borderRadius: 1e3,
+  borderWidth: 2,
+  borderColor: "currentColor",
+  borderBottomColor: "transparent",
+  borderLeftColor: "transparent"
+});
+function Spinner({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SpinnerFrame,
+    {
+      role: "status",
+      "aria-label": "Loading",
+      className: [
+        "animate-spin",
+        className
+      ].filter(Boolean).join(" ")
+    }
+  );
+}
+var ButtonFrame = gui.styled(gui.View, {
+  name: "LuxButton",
+  render: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button" }),
+  role: "button",
+  tabIndex: 0,
+  cursor: "pointer",
+  userSelect: "none",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: 0,
+  overflow: "hidden",
+  borderRadius: 6,
+  // Whitespace nowrap via className since hanzogui doesn't have a direct token
+  // Transition via className
+  variants: {
+    size: {
+      "2xs": { paddingHorizontal: 8, height: 20, minWidth: 20, fontSize: 12, borderRadius: 4, gap: 4 },
+      xs: { paddingHorizontal: 8, height: 24, minWidth: 24, fontSize: 14, borderRadius: 4, gap: 4 },
+      sm: { paddingHorizontal: 12, height: 32, minWidth: 32, fontSize: 14, borderRadius: 6, gap: 4 },
+      md: { paddingHorizontal: 12, height: 40, minWidth: 40, fontSize: 16, borderRadius: 6, gap: 8 }
+    },
+    disabled: {
+      true: {
+        opacity: 0.2,
+        cursor: "not-allowed",
+        pointerEvents: "none"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var VARIANT_CLASSES = {
+  solid: [
+    "bg-[var(--color-button-solid-bg)] text-[var(--color-button-solid-text)]",
+    "hover:bg-[var(--color-hover)]",
+    "data-[expanded]:bg-[var(--color-hover)]"
+  ].join(" "),
+  solid_danger: [
+    "bg-[var(--color-button-danger-bg)] text-[var(--color-button-danger-fg)]",
+    "hover:bg-[var(--color-button-danger-bg-hover)]",
+    "data-[expanded]:bg-[var(--color-button-danger-bg-hover)]"
+  ].join(" "),
+  outline: [
+    "border-2 border-solid bg-transparent",
+    "text-[var(--color-button-outline-fg)] border-[var(--color-button-outline-fg)]",
+    "hover:bg-transparent hover:text-[var(--color-hover)] hover:border-[var(--color-hover)]"
+  ].join(" "),
+  outline_danger: [
+    "border-2 border-solid bg-transparent",
+    "text-[var(--color-button-danger-bg)] border-[var(--color-button-danger-bg)]",
+    "hover:bg-transparent hover:text-[var(--color-button-danger-bg-hover)] hover:border-[var(--color-button-danger-bg-hover)]"
+  ].join(" "),
+  dropdown: [
+    "border-2 border-solid bg-transparent",
+    "text-[var(--color-button-dropdown-fg)] border-[var(--color-button-dropdown-border)]",
+    "hover:bg-transparent hover:text-[var(--color-hover)] hover:border-[var(--color-hover)]",
+    "data-[expanded]:bg-transparent data-[expanded]:text-[var(--color-hover)] data-[expanded]:border-[var(--color-hover)]",
+    "data-[selected]:bg-[var(--color-selected-control-bg)] data-[selected]:text-[var(--color-selected-control-text)] data-[selected]:border-transparent",
+    "data-[selected]:hover:bg-[var(--color-selected-control-bg)]",
+    "data-[selected]:hover:text-[var(--color-hover)] data-[selected]:hover:border-transparent",
+    "data-[selected]:data-[expanded]:text-[var(--color-hover)]"
+  ].join(" "),
+  header: [
+    "bg-transparent border-2 border-solid",
+    "text-[var(--color-button-header-fg)] border-[var(--color-button-header-border)]",
+    "hover:bg-transparent hover:text-[var(--color-hover)] hover:border-[var(--color-hover)]",
+    "data-[selected]:bg-[var(--color-button-header-bg-selected)]",
+    "data-[selected]:text-[var(--color-button-header-fg-selected)] data-[selected]:border-transparent data-[selected]:border-0",
+    "data-[selected]:hover:bg-[var(--color-button-header-bg-selected)] data-[selected]:hover:text-[var(--color-hover)]",
+    "data-[selected]:data-[expanded]:text-[var(--color-hover)]",
+    "data-[selected]:data-[highlighted]:bg-[var(--color-button-header-bg-highlighted)]",
+    "data-[selected]:data-[highlighted]:text-[var(--color-button-header-fg-highlighted)]",
+    "data-[selected]:data-[highlighted]:border-transparent data-[selected]:data-[highlighted]:border-0",
+    "data-[selected]:data-[highlighted]:hover:bg-[var(--color-button-header-bg-highlighted)]",
+    "data-[selected]:data-[highlighted]:hover:text-[var(--color-hover)]",
+    "data-[selected]:data-[highlighted]:data-[expanded]:text-[var(--color-hover)]"
+  ].join(" "),
+  hero: [
+    "bg-[var(--color-button-hero-bg)] text-[var(--color-button-hero-fg)]",
+    "hover:bg-[var(--color-button-hero-bg-hover)] hover:text-[var(--color-button-hero-fg-hover)]",
+    "data-[selected]:bg-[var(--color-button-hero-bg-selected)] data-[selected]:text-[var(--color-button-hero-fg-selected)]",
+    "data-[selected]:hover:bg-[var(--color-button-hero-bg-selected)] data-[selected]:hover:text-[var(--color-hover)]",
+    "data-[selected]:data-[expanded]:text-[var(--color-hover)]"
+  ].join(" "),
+  segmented: [
+    "bg-transparent border-2 border-solid rounded-none",
+    "text-[var(--color-button-segmented-fg)] border-[var(--color-selected-control-bg)]",
+    "hover:text-[var(--color-hover)]",
+    "data-[selected]:bg-[var(--color-selected-control-bg)] data-[selected]:text-[var(--color-selected-control-text)]",
+    "data-[selected]:hover:bg-[var(--color-selected-control-bg)] data-[selected]:hover:text-[var(--color-selected-control-text)]",
+    "[&:not(:last-child)]:border-r-0 data-[selected]:[&:not(:last-child)]:border-r-2",
+    "data-[selected]+*:border-l-0",
+    "first:rounded-l-md last:rounded-r-md"
+  ].join(" "),
+  plain: "bg-transparent text-inherit border-none hover:bg-transparent",
+  subtle: [
+    "bg-[var(--color-button-subtle-bg)] text-[var(--color-button-subtle-fg)]",
+    "hover:bg-[var(--color-button-subtle-bg)] hover:text-[var(--color-hover)]",
+    "disabled:bg-[var(--color-button-subtle-bg)] disabled:text-[var(--color-button-subtle-fg)]"
+  ].join(" "),
+  link: [
+    "bg-transparent text-[var(--color-link-primary)] border-none font-normal",
+    "px-0 h-auto",
+    "hover:bg-transparent hover:text-[var(--color-link-primary-hover)]",
+    "disabled:text-[var(--color-text-secondary)]"
+  ].join(" "),
+  icon_secondary: [
+    "bg-transparent text-[var(--color-icon-secondary)] border-none",
+    "hover:text-[var(--color-hover)]",
+    "data-[selected]:bg-[var(--color-selected-control-bg)] data-[selected]:text-[var(--color-selected-control-text)]",
+    "data-[selected]:hover:bg-[var(--color-selected-control-bg)] data-[selected]:hover:text-[var(--color-hover)]",
+    "data-[selected]:data-[expanded]:text-[var(--color-hover)]",
+    "data-[expanded]:text-[var(--color-hover)]"
+  ].join(" "),
+  icon_background: [
+    "bg-[var(--color-button-icon-background-bg)] text-[var(--color-icon-secondary)] border-none",
+    "hover:text-[var(--color-hover)]",
+    "data-[selected]:bg-[var(--color-selected-control-bg)] data-[selected]:text-[var(--color-selected-control-text)]",
+    "data-[selected]:hover:bg-[var(--color-selected-control-bg)] data-[selected]:hover:text-[var(--color-hover)]",
+    "data-[selected]:data-[expanded]:text-[var(--color-hover)]",
+    "data-[expanded]:text-[var(--color-hover)]"
+  ].join(" "),
+  pagination: [
+    "border-2 border-solid bg-transparent",
+    "text-[var(--color-button-pagination-fg)] border-[var(--color-button-pagination-border)]",
+    "hover:bg-transparent hover:text-[var(--color-hover)] hover:border-[var(--color-hover)]",
+    "data-[selected]:bg-[var(--color-selected-control-bg)] data-[selected]:text-[var(--color-selected-control-text)] data-[selected]:border-transparent",
+    "data-[selected]:hover:bg-[var(--color-selected-control-bg)]",
+    "data-[selected]:hover:text-[var(--color-selected-control-text)] data-[selected]:hover:border-transparent"
+  ].join(" ")
+};
+var BASE_CLASSES = "font-semibold whitespace-nowrap transition-colors duration-150";
+var SP = 4;
+function buildShimStyle(props) {
+  const s = { ...props.style };
+  if (props.mt !== void 0) s.marginTop = typeof props.mt === "number" ? `${props.mt * SP}px` : props.mt;
+  if (props.ml !== void 0) s.marginLeft = typeof props.ml === "number" ? `${props.ml * SP}px` : props.ml;
+  if (props.mr !== void 0) s.marginRight = typeof props.mr === "number" ? `${props.mr * SP}px` : props.mr;
+  if (props.px !== void 0) {
+    const v = typeof props.px === "number" ? `${props.px * SP}px` : props.px;
+    s.paddingLeft = v;
+    s.paddingRight = v;
+  }
+  if (props.py !== void 0) {
+    const v = typeof props.py === "number" ? `${props.py * SP}px` : props.py;
+    s.paddingTop = v;
+    s.paddingBottom = v;
+  }
+  if (props.fontWeight !== void 0) s.fontWeight = props.fontWeight;
+  if (props.gap !== void 0) s.gap = typeof props.gap === "number" ? `${props.gap * SP}px` : props.gap;
+  if (props.flexShrink !== void 0) s.flexShrink = props.flexShrink;
+  if (props.columnGap !== void 0) s.columnGap = typeof props.columnGap === "number" ? `${props.columnGap * SP}px` : props.columnGap;
+  if (props.gridColumn !== void 0) s.gridColumn = typeof props.gridColumn === "number" ? String(props.gridColumn) : props.gridColumn;
+  if (props.gridRow) s.gridRow = props.gridRow;
+  if (props.justifySelf) s.justifySelf = props.justifySelf;
+  if (props.alignSelf) s.alignSelf = props.alignSelf;
+  if (props.h) s.height = props.h;
+  if (props.w) s.width = props.w;
+  if (props.display) s.display = props.display;
+  if (props.borderBottomRightRadius !== void 0) s.borderBottomRightRadius = typeof props.borderBottomRightRadius === "number" ? `${props.borderBottomRightRadius}px` : props.borderBottomRightRadius;
+  if (props.borderTopRightRadius !== void 0) s.borderTopRightRadius = typeof props.borderTopRightRadius === "number" ? `${props.borderTopRightRadius}px` : props.borderTopRightRadius;
+  return Object.keys(s).length > 0 ? s : void 0;
+}
+var Button = React3__namespace.forwardRef(
+  function Button2(props, ref) {
+    const {
+      className,
+      variant = "solid",
+      size = "md",
+      asChild = false,
+      loading = false,
+      loadingText,
+      loadingSkeleton = false,
+      expanded,
+      selected,
+      highlighted,
+      disabled,
+      children,
+      style: styleProp,
+      // Strip Chakra style props
+      mt,
+      ml,
+      mr,
+      px,
+      py,
+      fontWeight,
+      gap,
+      flexShrink,
+      columnGap,
+      gridColumn,
+      gridRow,
+      justifySelf,
+      alignSelf,
+      textStyle: _textStyle,
+      h,
+      w,
+      display,
+      borderBottomRightRadius,
+      borderTopRightRadius,
+      ...rest
+    } = props;
+    const mergedStyle = buildShimStyle({
+      style: styleProp,
+      mt,
+      ml,
+      mr,
+      px,
+      py,
+      fontWeight,
+      gap,
+      flexShrink,
+      columnGap,
+      gridColumn,
+      gridRow,
+      justifySelf,
+      alignSelf,
+      h,
+      w,
+      display,
+      borderBottomRightRadius,
+      borderTopRightRadius
+    });
+    const dataAttrs = {};
+    if (expanded) dataAttrs["data-expanded"] = true;
+    if (selected) dataAttrs["data-selected"] = true;
+    if (highlighted) dataAttrs["data-highlighted"] = true;
+    if (loadingSkeleton) dataAttrs["data-loading-skeleton"] = true;
+    const isDisabled = !loadingSkeleton && (loading || disabled);
+    const inner = loading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}),
+      loadingText != null && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { marginLeft: 8 }, children: loadingText })
+    ] }) : children;
+    const variantClass = VARIANT_CLASSES[variant] ?? VARIANT_CLASSES.solid;
+    const combinedClassName = [BASE_CLASSES, variantClass, className].filter(Boolean).join(" ");
+    const button = /* @__PURE__ */ jsxRuntime.jsx(
+      ButtonFrame,
+      {
+        ref,
+        size,
+        disabled: isDisabled || void 0,
+        asChild: asChild || void 0,
+        className: combinedClassName,
+        style: mergedStyle,
+        ...dataAttrs,
+        ...rest,
+        children: inner
+      }
+    );
+    if (loadingSkeleton) {
+      return /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { loading: loadingSkeleton, asChild: true, ref, children: button });
+    }
+    return button;
+  }
+);
+React3__namespace.forwardRef(
+  function ButtonGroup2(props, ref) {
+    const { className, ...rest } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Box,
+      {
+        ref,
+        className: ["inline-flex", className].filter(Boolean).join(" "),
+        role: "group",
+        ...rest
+      }
+    );
+  }
+);
+React3__namespace.forwardRef(
+  function ButtonGroupRadio2(props, ref) {
+    const {
+      children,
+      onChange,
+      variant = "segmented",
+      defaultValue,
+      loading = false,
+      equalWidth = false,
+      className,
+      ...rest
+    } = props;
+    const firstChildValue = React3__namespace.useMemo(() => {
+      const firstChild = Array.isArray(children) ? children[0] : void 0;
+      return typeof firstChild?.props.value === "string" ? firstChild.props.value : void 0;
+    }, [children]);
+    const [value, setValue] = React3__namespace.useState(defaultValue ?? firstChildValue);
+    const handleItemClick = React3__namespace.useCallback((event) => {
+      const v = event.currentTarget.value;
+      setValue(v);
+      onChange?.(v);
+    }, [onChange]);
+    const clonedChildren = React3__namespace.Children.map(children, (child) => {
+      return React3__namespace.cloneElement(child, {
+        onClick: handleItemClick,
+        selected: value === child.props.value,
+        variant
+      });
+    });
+    const childrenLength = React3__namespace.Children.count(children);
+    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { loading, children: /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Box,
+      {
+        ref,
+        className: [
+          "inline-flex gap-0",
+          equalWidth ? "grid" : "",
+          className
+        ].filter(Boolean).join(" "),
+        style: equalWidth ? { gridTemplateColumns: `repeat(${childrenLength}, 1fr)` } : void 0,
+        role: "group",
+        ...rest,
+        children: clonedChildren
+      }
+    ) });
+  }
+);
+var ModelRenderer = class {
+  constructor(canvas) {
+    this.model = null;
+    this.camera = {
+      rotation: { x: 0, y: 0 },
+      zoom: 1,
+      position: { x: 0, y: 0 }
+    };
+    this.autoRotate = false;
+    this.autoRotateSpeed = 1;
+    this.animationFrame = null;
+    this.isDragging = false;
+    this.lastMousePosition = { x: 0, y: 0 };
+    this.annotations = [];
+    this.canvas = canvas;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) throw new Error("Could not get 2D context");
+    this.ctx = ctx;
+    this.setupEventListeners();
+  }
+  setupEventListeners() {
+    this.canvas.addEventListener("mousedown", this.handleMouseDown.bind(this));
+    this.canvas.addEventListener("mousemove", this.handleMouseMove.bind(this));
+    this.canvas.addEventListener("mouseup", this.handleMouseUp.bind(this));
+    this.canvas.addEventListener("wheel", this.handleWheel.bind(this));
+    this.canvas.addEventListener("click", this.handleClick.bind(this));
+  }
+  handleMouseDown(e) {
+    this.isDragging = true;
+    this.lastMousePosition = { x: e.clientX, y: e.clientY };
+  }
+  handleMouseMove(e) {
+    if (this.isDragging) {
+      const deltaX = e.clientX - this.lastMousePosition.x;
+      const deltaY = e.clientY - this.lastMousePosition.y;
+      this.camera.rotation.y += deltaX * 0.01;
+      this.camera.rotation.x += deltaY * 0.01;
+      this.lastMousePosition = { x: e.clientX, y: e.clientY };
+    }
+  }
+  handleMouseUp() {
+    this.isDragging = false;
+  }
+  handleWheel(e) {
+    e.preventDefault();
+    this.camera.zoom = Math.max(
+      0.1,
+      Math.min(5, this.camera.zoom + e.deltaY * -1e-3)
+    );
+  }
+  handleClick(e) {
+    const rect = this.canvas.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    this.annotations.forEach((annotation) => {
+      if (annotation.visible) {
+        const screenPos = this.worldToScreen(annotation.position);
+        const distance = Math.sqrt(
+          (x - screenPos.x) ** 2 + (y - screenPos.y) ** 2
+        );
+        if (distance < 20) {
+          const event = new CustomEvent("annotationClick", {
+            detail: annotation
+          });
+          this.canvas.dispatchEvent(event);
+        }
+      }
+    });
+  }
+  worldToScreen(worldPos) {
+    const { width, height } = this.canvas;
+    return {
+      x: width / 2 + worldPos.x * 100 * this.camera.zoom,
+      y: height / 2 - worldPos.y * 100 * this.camera.zoom
+    };
+  }
+  drawModel() {
+    if (!this.model) return;
+    const { width, height } = this.canvas;
+    const centerX = width / 2;
+    const centerY = height / 2;
+    this.ctx.save();
+    this.ctx.translate(
+      centerX + this.camera.position.x,
+      centerY + this.camera.position.y
+    );
+    this.ctx.scale(this.camera.zoom, this.camera.zoom);
+    const rotX = this.camera.rotation.x;
+    const rotY = this.camera.rotation.y;
+    this.ctx.transform(
+      Math.cos(rotY),
+      Math.sin(rotY) * Math.sin(rotX),
+      0,
+      Math.cos(rotX),
+      0,
+      0
+    );
+    this.drawCube();
+    this.ctx.restore();
+  }
+  drawCube() {
+    const size = 80;
+    this.ctx.fillStyle = "#60a5fa";
+    this.ctx.fillRect(-size / 2, -size / 2, size, size);
+    this.ctx.strokeStyle = "#1e40af";
+    this.ctx.lineWidth = 2;
+    this.ctx.strokeRect(-size / 2, -size / 2, size, size);
+    this.ctx.fillStyle = "#93c5fd";
+    this.ctx.beginPath();
+    this.ctx.moveTo(-size / 2, -size / 2);
+    this.ctx.lineTo(-size / 4, -size / 2 - size / 4);
+    this.ctx.lineTo(size / 4, -size / 2 - size / 4);
+    this.ctx.lineTo(size / 2, -size / 2);
+    this.ctx.closePath();
+    this.ctx.fill();
+    this.ctx.stroke();
+    this.ctx.fillStyle = "#3b82f6";
+    this.ctx.beginPath();
+    this.ctx.moveTo(size / 2, -size / 2);
+    this.ctx.lineTo(size / 4, -size / 2 - size / 4);
+    this.ctx.lineTo(size / 4, size / 2 - size / 4);
+    this.ctx.lineTo(size / 2, size / 2);
+    this.ctx.closePath();
+    this.ctx.fill();
+    this.ctx.stroke();
+  }
+  drawAnnotations() {
+    this.annotations.forEach((annotation) => {
+      if (!annotation.visible) return;
+      const screenPos = this.worldToScreen(annotation.position);
+      this.ctx.fillStyle = "#ef4444";
+      this.ctx.beginPath();
+      this.ctx.arc(screenPos.x, screenPos.y, 8, 0, Math.PI * 2);
+      this.ctx.fill();
+      this.ctx.strokeStyle = "#ef4444";
+      this.ctx.lineWidth = 2;
+      this.ctx.beginPath();
+      this.ctx.moveTo(screenPos.x, screenPos.y);
+      this.ctx.lineTo(screenPos.x + 20, screenPos.y - 20);
+      this.ctx.stroke();
+      this.ctx.fillStyle = "rgba(0, 0, 0, 0.8)";
+      this.ctx.fillRect(screenPos.x + 22, screenPos.y - 35, 100, 20);
+      this.ctx.fillStyle = "white";
+      this.ctx.font = "12px Arial";
+      this.ctx.fillText(annotation.title, screenPos.x + 25, screenPos.y - 22);
+    });
+  }
+  render() {
+    const { width, height } = this.canvas;
+    this.ctx.fillStyle = "#f8fafc";
+    this.ctx.fillRect(0, 0, width, height);
+    if (this.autoRotate) {
+      this.camera.rotation.y += this.autoRotateSpeed * 0.01;
+    }
+    this.drawModel();
+    this.drawAnnotations();
+  }
+  loadModel(url) {
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        if (url) {
+          this.model = { loaded: true, url };
+          resolve({
+            vertices: 8,
+            faces: 12,
+            materials: 1,
+            textures: 0,
+            size: "2.4 KB"
+          });
+        } else {
+          reject("Invalid model URL");
+        }
+      }, 1e3);
+    });
+  }
+  setAutoRotate(enabled, speed = 1) {
+    this.autoRotate = enabled;
+    this.autoRotateSpeed = speed;
+  }
+  setAnnotations(annotations) {
+    this.annotations = annotations;
+  }
+  resetCamera() {
+    this.camera = {
+      rotation: { x: 0, y: 0 },
+      zoom: 1,
+      position: { x: 0, y: 0 }
+    };
+  }
+  zoomIn() {
+    this.camera.zoom = Math.min(5, this.camera.zoom * 1.2);
+  }
+  zoomOut() {
+    this.camera.zoom = Math.max(0.1, this.camera.zoom / 1.2);
+  }
+  takeScreenshot() {
+    return this.canvas.toDataURL("image/png");
+  }
+  startAnimation() {
+    const animate = () => {
+      this.render();
+      this.animationFrame = requestAnimationFrame(animate);
+    };
+    animate();
+  }
+  stopAnimation() {
+    if (this.animationFrame) {
+      cancelAnimationFrame(this.animationFrame);
+      this.animationFrame = null;
+    }
+  }
+  destroy() {
+    this.stopAnimation();
+  }
+};
+var ModelViewer3D = React3__namespace.forwardRef(
+  ({
+    modelUrl,
+    width = 800,
+    height = 600,
+    autoRotate = false,
+    autoRotateSpeed = 1,
+    enableZoom = true,
+    enablePan = true,
+    enableRotate = true,
+    backgroundColor = "#f8fafc",
+    showControls = true,
+    showStats = false,
+    annotations = [],
+    onModelLoad,
+    onModelError,
+    onAnnotationClick,
+    className,
+    ...props
+  }, ref) => {
+    const containerRef = React3__namespace.useRef(null);
+    const canvasRef = React3__namespace.useRef(null);
+    const rendererRef = React3__namespace.useRef(null);
+    const [isLoading, setIsLoading] = React3__namespace.useState(false);
+    const [modelStats, setModelStats] = React3__namespace.useState(null);
+    const [error, setError] = React3__namespace.useState(null);
+    const [currentAutoRotate, setCurrentAutoRotate] = React3__namespace.useState(autoRotate);
+    React3__namespace.useEffect(() => {
+      if (!canvasRef.current) return;
+      const renderer = new ModelRenderer(canvasRef.current);
+      rendererRef.current = renderer;
+      renderer.startAnimation();
+      canvasRef.current.addEventListener("annotationClick", (e) => {
+        onAnnotationClick?.(e.detail);
+      });
+      return () => {
+        renderer.destroy();
+      };
+    }, [onAnnotationClick]);
+    React3__namespace.useEffect(() => {
+      if (!rendererRef.current || !modelUrl) return;
+      setIsLoading(true);
+      setError(null);
+      rendererRef.current.loadModel(modelUrl).then((stats) => {
+        setModelStats(stats);
+        setIsLoading(false);
+        onModelLoad?.(stats);
+      }).catch((err) => {
+        setError(err);
+        setIsLoading(false);
+        onModelError?.(err);
+      });
+    }, [modelUrl, onModelLoad, onModelError]);
+    React3__namespace.useEffect(() => {
+      if (rendererRef.current) {
+        rendererRef.current.setAutoRotate(currentAutoRotate, autoRotateSpeed);
+      }
+    }, [currentAutoRotate, autoRotateSpeed]);
+    React3__namespace.useEffect(() => {
+      if (rendererRef.current) {
+        rendererRef.current.setAnnotations(annotations);
+      }
+    }, [annotations]);
+    const handleResetCamera = () => {
+      rendererRef.current?.resetCamera();
+    };
+    const handleZoomIn = () => {
+      rendererRef.current?.zoomIn();
+    };
+    const handleZoomOut = () => {
+      rendererRef.current?.zoomOut();
+    };
+    const handleToggleAutoRotate = () => {
+      setCurrentAutoRotate((prev) => !prev);
+    };
+    const handleScreenshot = () => {
+      if (!rendererRef.current) return;
+      const dataURL = rendererRef.current.takeScreenshot();
+      const link = document.createElement("a");
+      link.download = "model-screenshot.png";
+      link.href = dataURL;
+      link.click();
+    };
+    React3__namespace.useImperativeHandle(ref, () => containerRef.current);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      ui.Box,
+      {
+        ref: containerRef,
+        className: ui.cn("relative border rounded-lg overflow-hidden", className),
+        style: { width, height },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "canvas",
+            {
+              ref: canvasRef,
+              width,
+              height,
+              className: "w-full h-full cursor-grab active:cursor-grabbing",
+              style: { backgroundColor }
+            }
+          ),
+          isLoading && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "absolute inset-0 bg-background/80 backdrop-blur-sm flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: "flex flex-col items-center space-y-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "animate-spin rounded-full h-8 w-8 border-2 border-primary border-t-transparent" }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { tag: "p", className: "text-sm text-muted-foreground", children: "Loading model..." })
+          ] }) }),
+          error && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "absolute inset-0 bg-background/80 backdrop-blur-sm flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: "text-center space-y-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { tag: "p", className: "text-sm text-destructive", children: error }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Button,
+              {
+                variant: "outline",
+                size: "sm",
+                onClick: () => setError(null),
+                children: "Dismiss"
+              }
+            )
+          ] }) }),
+          showControls && !isLoading && !error && /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: "absolute top-4 right-4 flex flex-col space-y-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Button,
+              {
+                variant: "outline",
+                size: "icon",
+                onClick: handleResetCamera,
+                title: "Reset camera",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCcw, { style: ui.css("w-4 h-4") })
+              }
+            ),
+            enableZoom && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Button,
+                {
+                  variant: "outline",
+                  size: "icon",
+                  onClick: handleZoomIn,
+                  title: "Zoom in",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ZoomIn, { style: ui.css("w-4 h-4") })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Button,
+                {
+                  variant: "outline",
+                  size: "icon",
+                  onClick: handleZoomOut,
+                  title: "Zoom out",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ZoomOut, { style: ui.css("w-4 h-4") })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Button,
+              {
+                variant: "outline",
+                size: "icon",
+                onClick: handleToggleAutoRotate,
+                title: "Toggle auto rotate",
+                ...ui.sx(
+                  currentAutoRotate ? "bg-primary text-primary-foreground" : ""
+                ),
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Move3d, { style: ui.css("w-4 h-4") })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Button,
+              {
+                variant: "outline",
+                size: "icon",
+                onClick: handleScreenshot,
+                title: "Take screenshot",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Camera, { style: ui.css("w-4 h-4") })
+              }
+            )
+          ] }),
+          showStats && modelStats && !isLoading && !error && /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: "absolute bottom-4 left-4 p-3 rounded-lg bg-background/80 backdrop-blur-sm border", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { tag: "h4", className: "font-semibold text-sm mb-2", children: "Model Stats" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: "space-y-1 text-xs text-muted-foreground", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                "Vertices: ",
+                modelStats.vertices.toLocaleString()
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                "Faces: ",
+                modelStats.faces.toLocaleString()
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                "Materials: ",
+                modelStats.materials
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                "Textures: ",
+                modelStats.textures
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                "Size: ",
+                modelStats.size
+              ] })
+            ] })
+          ] }),
+          annotations.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "absolute bottom-4 right-4 max-w-xs", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: "p-3 rounded-lg bg-background/80 backdrop-blur-sm border", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { tag: "h4", className: "font-semibold text-sm mb-2", children: "Annotations" }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "space-y-2 max-h-32 overflow-y-auto", children: annotations.map((annotation) => /* @__PURE__ */ jsxRuntime.jsxs(
+              ui.Box,
+              {
+                tag: "button",
+                className: "w-full text-left p-2 rounded text-xs border hover:bg-accent",
+                onClick: () => onAnnotationClick?.(annotation),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "font-medium", children: annotation.title }),
+                  annotation.description && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "text-muted-foreground line-clamp-2", children: annotation.description })
+                ]
+              },
+              annotation.id
+            )) })
+          ] }) }),
+          !isLoading && !error && !modelUrl && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: "text-center space-y-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "w-16 h-16 mx-auto rounded-full bg-muted flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { style: ui.css("w-8 h-8 text-muted-foreground") }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { tag: "p", className: "text-sm text-muted-foreground", children: "No model loaded" }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { tag: "p", className: "text-xs text-muted-foreground", children: "Provide a modelUrl to view a 3D model" })
+          ] }) })
+        ]
+      }
+    );
+  }
+);
+ModelViewer3D.displayName = "ModelViewer3D";
+var ModelViewer3DPreset = {
+  Basic: React3__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    ModelViewer3D,
+    {
+      ref,
+      showControls: true,
+      showStats: false,
+      autoRotate: true,
+      autoRotateSpeed: 0.5,
+      ...props
+    }
+  )),
+  Advanced: React3__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    ModelViewer3D,
+    {
+      ref,
+      showControls: true,
+      showStats: true,
+      enableZoom: true,
+      enablePan: true,
+      enableRotate: true,
+      ...props
+    }
+  )),
+  Presentation: React3__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    ModelViewer3D,
+    {
+      ref,
+      showControls: false,
+      autoRotate: true,
+      autoRotateSpeed: 1,
+      backgroundColor: "#000000",
+      ...props
+    }
+  ))
+};
+ModelViewer3DPreset.Basic.displayName = "ModelViewer3DPreset.Basic";
+ModelViewer3DPreset.Advanced.displayName = "ModelViewer3DPreset.Advanced";
+ModelViewer3DPreset.Presentation.displayName = "ModelViewer3DPreset.Presentation";
+
+exports.ModelViewer3D = ModelViewer3D;
+exports.ModelViewer3DPreset = ModelViewer3DPreset;