@popaya/pgsg-viewer 0.1.9 → 0.1.11

package/dist/react/index.js

@@ -1,10 +1,409 @@
 import {
   PGSGViewer
-} from "../chunk-3HV5SAZ7.js";
+} from "../chunk-Z7DBLRJH.js";
+
+// #style-inject:#style-inject
+function styleInject(css, { insertAt } = {}) {
+  if (!css || typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+// src/styles/viewer.css
+styleInject('/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root,\n  :host {\n    --font-sans:\n      ui-sans-serif,\n      system-ui,\n      sans-serif,\n      "Apple Color Emoji",\n      "Segoe UI Emoji",\n      "Segoe UI Symbol",\n      "Noto Color Emoji";\n    --font-mono:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      "Liberation Mono",\n      "Courier New",\n      monospace;\n    --color-blue-500: oklch(62.3% 0.214 259.815);\n    --color-blue-600: oklch(54.6% 0.245 262.881);\n    --color-black: #000;\n    --color-white: #fff;\n    --spacing: 0.25rem;\n    --text-sm: 0.875rem;\n    --text-sm--line-height: calc(1.25 / 0.875);\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --ease-out: cubic-bezier(0, 0, 0.2, 1);\n    --blur-2xl: 40px;\n    --default-transition-duration: 150ms;\n    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --default-font-family: var(--font-sans);\n    --default-mono-font-family: var(--font-mono);\n  }\n}\n@layer base {\n  *,\n  ::after,\n  ::before,\n  ::backdrop,\n  ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html,\n  :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b,\n  strong {\n    font-weight: bolder;\n  }\n  code,\n  kbd,\n  samp,\n  pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub,\n  sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol,\n  ul,\n  menu {\n    list-style: none;\n  }\n  img,\n  svg,\n  video,\n  canvas,\n  audio,\n  iframe,\n  embed,\n  object {\n    display: block;\n    vertical-align: middle;\n  }\n  img,\n  video {\n    max-width: 100%;\n    height: auto;\n  }\n  button,\n  input,\n  select,\n  optgroup,\n  textarea,\n  ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit,\n  ::-webkit-datetime-edit-year-field,\n  ::-webkit-datetime-edit-month-field,\n  ::-webkit-datetime-edit-day-field,\n  ::-webkit-datetime-edit-hour-field,\n  ::-webkit-datetime-edit-minute-field,\n  ::-webkit-datetime-edit-second-field,\n  ::-webkit-datetime-edit-millisecond-field,\n  ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  ::-webkit-calendar-picker-indicator {\n    line-height: 1;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button,\n  input:where([type=button], [type=reset], [type=submit]),\n  ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button,\n  ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=until-found])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .pointer-events-auto {\n    pointer-events: auto;\n  }\n  .pointer-events-none {\n    pointer-events: none;\n  }\n  .invisible {\n    visibility: hidden;\n  }\n  .visible {\n    visibility: visible;\n  }\n  .absolute {\n    position: absolute;\n  }\n  .relative {\n    position: relative;\n  }\n  .static {\n    position: static;\n  }\n  .start {\n    inset-inline-start: var(--spacing);\n  }\n  .end {\n    inset-inline-end: var(--spacing);\n  }\n  .top-0 {\n    top: calc(var(--spacing) * 0);\n  }\n  .right-0 {\n    right: calc(var(--spacing) * 0);\n  }\n  .bottom-0 {\n    bottom: calc(var(--spacing) * 0);\n  }\n  .z-50 {\n    z-index: 50;\n  }\n  .z-100 {\n    z-index: 100;\n  }\n  .container {\n    width: 100%;\n    @media (width >= 40rem) {\n      max-width: 40rem;\n    }\n    @media (width >= 48rem) {\n      max-width: 48rem;\n    }\n    @media (width >= 64rem) {\n      max-width: 64rem;\n    }\n    @media (width >= 80rem) {\n      max-width: 80rem;\n    }\n    @media (width >= 96rem) {\n      max-width: 96rem;\n    }\n  }\n  .mt-4 {\n    margin-top: calc(var(--spacing) * 4);\n  }\n  .block {\n    display: block;\n  }\n  .flex {\n    display: flex;\n  }\n  .grid {\n    display: grid;\n  }\n  .size-4 {\n    width: calc(var(--spacing) * 4);\n    height: calc(var(--spacing) * 4);\n  }\n  .size-5 {\n    width: calc(var(--spacing) * 5);\n    height: calc(var(--spacing) * 5);\n  }\n  .h-full {\n    height: 100%;\n  }\n  .max-h-\\[60px\\] {\n    max-height: 60px;\n  }\n  .w-0 {\n    width: calc(var(--spacing) * 0);\n  }\n  .w-\\[360px\\] {\n    width: 360px;\n  }\n  .w-full {\n    width: 100%;\n  }\n  .max-w-0 {\n    max-width: calc(var(--spacing) * 0);\n  }\n  .max-w-\\[520px\\] {\n    max-width: 520px;\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .translate-x-0 {\n    --tw-translate-x: calc(var(--spacing) * 0);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .translate-x-6 {\n    --tw-translate-x: calc(var(--spacing) * 6);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .translate-x-full {\n    --tw-translate-x: 100%;\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .scale-95 {\n    --tw-scale-x: 95%;\n    --tw-scale-y: 95%;\n    --tw-scale-z: 95%;\n    scale: var(--tw-scale-x) var(--tw-scale-y);\n  }\n  .scale-100 {\n    --tw-scale-x: 100%;\n    --tw-scale-y: 100%;\n    --tw-scale-z: 100%;\n    scale: var(--tw-scale-x) var(--tw-scale-y);\n  }\n  .transform {\n    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n  }\n  .cursor-default {\n    cursor: default;\n  }\n  .cursor-pointer {\n    cursor: pointer;\n  }\n  .resize-none {\n    resize: none;\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .flex-row {\n    flex-direction: row;\n  }\n  .flex-row-reverse {\n    flex-direction: row-reverse;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .items-end {\n    align-items: flex-end;\n  }\n  .items-stretch {\n    align-items: stretch;\n  }\n  .justify-between {\n    justify-content: space-between;\n  }\n  .gap-1 {\n    gap: calc(var(--spacing) * 1);\n  }\n  .gap-1\\.5 {\n    gap: calc(var(--spacing) * 1.5);\n  }\n  .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n  .gap-3 {\n    gap: calc(var(--spacing) * 3);\n  }\n  .overflow-hidden {\n    overflow: hidden;\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .rounded-md {\n    border-radius: calc(var(--radius) - 2px);\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-l {\n    border-left-style: var(--tw-border-style);\n    border-left-width: 1px;\n  }\n  .border-black\\/20 {\n    border-color: color-mix(in srgb, #000 20%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      border-color: color-mix(in oklab, var(--color-black) 20%, transparent);\n    }\n  }\n  .border-white\\/10 {\n    border-color: color-mix(in srgb, #fff 10%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);\n    }\n  }\n  .border-white\\/20 {\n    border-color: color-mix(in srgb, #fff 20%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      border-color: color-mix(in oklab, var(--color-white) 20%, transparent);\n    }\n  }\n  .border-l-white\\/1 {\n    border-left-color: color-mix(in srgb, #fff 1%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      border-left-color: color-mix(in oklab, var(--color-white) 1%, transparent);\n    }\n  }\n  .bg-\\[rgba\\(15\\,15\\,15\\,0\\.9\\)\\] {\n    background-color: rgba(15, 15, 15, 0.9);\n  }\n  .bg-blue-500 {\n    background-color: var(--color-blue-500);\n  }\n  .bg-transparent {\n    background-color: transparent;\n  }\n  .bg-white\\/10 {\n    background-color: color-mix(in srgb, #fff 10%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-white) 10%, transparent);\n    }\n  }\n  .bg-linear-to-br {\n    --tw-gradient-position: to bottom right;\n    @supports (background-image: linear-gradient(in lab, red, red)) {\n      --tw-gradient-position: to bottom right in oklab;\n    }\n    background-image: linear-gradient(var(--tw-gradient-stops));\n  }\n  .bg-gradient-to-br {\n    --tw-gradient-position: to bottom right in oklab;\n    background-image: linear-gradient(var(--tw-gradient-stops));\n  }\n  .from-black\\/20 {\n    --tw-gradient-from: color-mix(in srgb, #000 20%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      --tw-gradient-from: color-mix(in oklab, var(--color-black) 20%, transparent);\n    }\n    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n  }\n  .from-white\\/20 {\n    --tw-gradient-from: color-mix(in srgb, #fff 20%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      --tw-gradient-from: color-mix(in oklab, var(--color-white) 20%, transparent);\n    }\n    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n  }\n  .to-transparent {\n    --tw-gradient-to: transparent;\n    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n  }\n  .to-white\\/5 {\n    --tw-gradient-to: color-mix(in srgb, #fff 5%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      --tw-gradient-to: color-mix(in oklab, var(--color-white) 5%, transparent);\n    }\n    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n  }\n  .object-cover {\n    object-fit: cover;\n  }\n  .p-2\\.5 {\n    padding: calc(var(--spacing) * 2.5);\n  }\n  .p-3 {\n    padding: calc(var(--spacing) * 3);\n  }\n  .p-3\\.5 {\n    padding: calc(var(--spacing) * 3.5);\n  }\n  .px-2 {\n    padding-inline: calc(var(--spacing) * 2);\n  }\n  .px-3 {\n    padding-inline: calc(var(--spacing) * 3);\n  }\n  .py-1 {\n    padding-block: calc(var(--spacing) * 1);\n  }\n  .py-1\\.5 {\n    padding-block: calc(var(--spacing) * 1.5);\n  }\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n  .pr-2 {\n    padding-right: calc(var(--spacing) * 2);\n  }\n  .pr-14 {\n    padding-right: calc(var(--spacing) * 14);\n  }\n  .pb-2\\.5 {\n    padding-bottom: calc(var(--spacing) * 2.5);\n  }\n  .pl-2 {\n    padding-left: calc(var(--spacing) * 2);\n  }\n  .text-lg {\n    font-size: var(--text-lg);\n    line-height: var(--tw-leading, var(--text-lg--line-height));\n  }\n  .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n  .font-medium {\n    --tw-font-weight: var(--font-weight-medium);\n    font-weight: var(--font-weight-medium);\n  }\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n  .text-white {\n    color: var(--color-white);\n  }\n  .text-white\\/60 {\n    color: color-mix(in srgb, #fff 60%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      color: color-mix(in oklab, var(--color-white) 60%, transparent);\n    }\n  }\n  .opacity-0 {\n    opacity: 0%;\n  }\n  .opacity-100 {\n    opacity: 100%;\n  }\n  .shadow-\\[0_8px_32px_rgba\\(0\\,0\\,0\\,0\\.25\\)\\] {\n    --tw-shadow: 0 8px 32px var(--tw-shadow-color, rgba(0,0,0,0.25));\n    box-shadow:\n      var(--tw-inset-shadow),\n      var(--tw-inset-ring-shadow),\n      var(--tw-ring-offset-shadow),\n      var(--tw-ring-shadow),\n      var(--tw-shadow);\n  }\n  .shadow-lg {\n    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow:\n      var(--tw-inset-shadow),\n      var(--tw-inset-ring-shadow),\n      var(--tw-ring-offset-shadow),\n      var(--tw-ring-shadow),\n      var(--tw-shadow);\n  }\n  .shadow-none {\n    --tw-shadow: 0 0 #0000;\n    box-shadow:\n      var(--tw-inset-shadow),\n      var(--tw-inset-ring-shadow),\n      var(--tw-ring-offset-shadow),\n      var(--tw-ring-shadow),\n      var(--tw-shadow);\n  }\n  .shadow-white\\/10 {\n    --tw-shadow-color: color-mix(in srgb, #fff 10%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-white) 10%, transparent) var(--tw-shadow-alpha), transparent);\n    }\n  }\n  .blur {\n    --tw-blur: blur(8px);\n    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n  }\n  .filter {\n    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n  }\n  .backdrop-blur-2xl {\n    --tw-backdrop-blur: blur(var(--blur-2xl));\n    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n  }\n  .transition-all {\n    transition-property: all;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .delay-200 {\n    transition-delay: 200ms;\n  }\n  .duration-200 {\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n  }\n  .duration-300 {\n    --tw-duration: 300ms;\n    transition-duration: 300ms;\n  }\n  .ease-out {\n    --tw-ease: var(--ease-out);\n    transition-timing-function: var(--ease-out);\n  }\n  .delay-200 {\n    animation-delay: calc(200*1ms);\n    animation-delay: .2s;\n    --tw-animation-delay: calc(200*1ms);\n    --tw-animation-delay: .2s;\n  }\n  .outline-none {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .running {\n    animation-play-state: running;\n  }\n  .hover\\:border-black\\/10 {\n    &:hover {\n      @media (hover: hover) {\n        border-color: color-mix(in srgb, #000 10%, transparent);\n        @supports (color: color-mix(in lab, red, red)) {\n          border-color: color-mix(in oklab, var(--color-black) 10%, transparent);\n        }\n      }\n    }\n  }\n  .hover\\:bg-blue-600 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-blue-600);\n      }\n    }\n  }\n  .hover\\:bg-white\\/10 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: color-mix(in srgb, #fff 10%, transparent);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--color-white) 10%, transparent);\n        }\n      }\n    }\n  }\n  .hover\\:bg-white\\/20 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: color-mix(in srgb, #fff 20%, transparent);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--color-white) 20%, transparent);\n        }\n      }\n    }\n  }\n  .hover\\:from-black\\/20 {\n    &:hover {\n      @media (hover: hover) {\n        --tw-gradient-from: color-mix(in srgb, #000 20%, transparent);\n        @supports (color: color-mix(in lab, red, red)) {\n          --tw-gradient-from: color-mix(in oklab, var(--color-black) 20%, transparent);\n        }\n        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n      }\n    }\n  }\n  .hover\\:to-transparent {\n    &:hover {\n      @media (hover: hover) {\n        --tw-gradient-to: transparent;\n        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n      }\n    }\n  }\n  .disabled\\:opacity-50 {\n    &:disabled {\n      opacity: 50%;\n    }\n  }\n  .dark\\:border-white\\/20 {\n    &:is(.dark *) {\n      border-color: color-mix(in srgb, #fff 20%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        border-color: color-mix(in oklab, var(--color-white) 20%, transparent);\n      }\n    }\n  }\n  .dark\\:from-white\\/10 {\n    &:is(.dark *) {\n      --tw-gradient-from: color-mix(in srgb, #fff 10%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        --tw-gradient-from: color-mix(in oklab, var(--color-white) 10%, transparent);\n      }\n      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n    }\n  }\n  .dark\\:to-transparent {\n    &:is(.dark *) {\n      --tw-gradient-to: transparent;\n      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n    }\n  }\n  .dark\\:to-white\\/5 {\n    &:is(.dark *) {\n      --tw-gradient-to: color-mix(in srgb, #fff 5%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        --tw-gradient-to: color-mix(in oklab, var(--color-white) 5%, transparent);\n      }\n      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n    }\n  }\n}\n@property --tw-animation-delay { syntax: "*"; inherits: false; initial-value: 0s; }\n@property --tw-animation-direction { syntax: "*"; inherits: false; initial-value: normal; }\n@property --tw-animation-duration { syntax: "*"; inherits: false; }\n@property --tw-animation-fill-mode { syntax: "*"; inherits: false; initial-value: none; }\n@property --tw-animation-iteration-count { syntax: "*"; inherits: false; initial-value: 1; }\n@property --tw-enter-blur { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-enter-opacity { syntax: "*"; inherits: false; initial-value: 1; }\n@property --tw-enter-rotate { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-enter-scale { syntax: "*"; inherits: false; initial-value: 1; }\n@property --tw-enter-translate-x { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-enter-translate-y { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-exit-blur { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-exit-opacity { syntax: "*"; inherits: false; initial-value: 1; }\n@property --tw-exit-rotate { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-exit-scale { syntax: "*"; inherits: false; initial-value: 1; }\n@property --tw-exit-translate-x { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-exit-translate-y { syntax: "*"; inherits: false; initial-value: 0; }\n:root {\n  --radius: 0.625rem;\n  --background: oklch(1 0 0);\n  --foreground: oklch(0.145 0 0);\n  --card: oklch(1 0 0);\n  --card-foreground: oklch(0.145 0 0);\n  --popover: oklch(1 0 0);\n  --popover-foreground: oklch(0.145 0 0);\n  --primary: oklch(0.205 0 0);\n  --primary-foreground: oklch(0.985 0 0);\n  --secondary: oklch(0.97 0 0);\n  --secondary-foreground: oklch(0.205 0 0);\n  --muted: oklch(0.97 0 0);\n  --muted-foreground: oklch(0.556 0 0);\n  --accent: oklch(0.97 0 0);\n  --accent-foreground: oklch(0.205 0 0);\n  --destructive: oklch(0.577 0.245 27.325);\n  --border: oklch(0.922 0 0);\n  --input: oklch(0.922 0 0);\n  --ring: oklch(0.708 0 0);\n  --chart-1: oklch(0.646 0.222 41.116);\n  --chart-2: oklch(0.6 0.118 184.704);\n  --chart-3: oklch(0.398 0.07 227.392);\n  --chart-4: oklch(0.828 0.189 84.429);\n  --chart-5: oklch(0.769 0.188 70.08);\n  --sidebar: oklch(0.985 0 0);\n  --sidebar-foreground: oklch(0.145 0 0);\n  --sidebar-primary: oklch(0.205 0 0);\n  --sidebar-primary-foreground: oklch(0.985 0 0);\n  --sidebar-accent: oklch(0.97 0 0);\n  --sidebar-accent-foreground: oklch(0.205 0 0);\n  --sidebar-border: oklch(0.922 0 0);\n  --sidebar-ring: oklch(0.708 0 0);\n}\n.dark {\n  --background: oklch(0.145 0 0);\n  --foreground: oklch(0.985 0 0);\n  --card: oklch(0.205 0 0);\n  --card-foreground: oklch(0.985 0 0);\n  --popover: oklch(0.205 0 0);\n  --popover-foreground: oklch(0.985 0 0);\n  --primary: oklch(0.922 0 0);\n  --primary-foreground: oklch(0.205 0 0);\n  --secondary: oklch(0.269 0 0);\n  --secondary-foreground: oklch(0.985 0 0);\n  --muted: oklch(0.269 0 0);\n  --muted-foreground: oklch(0.708 0 0);\n  --accent: oklch(0.269 0 0);\n  --accent-foreground: oklch(0.985 0 0);\n  --destructive: oklch(0.704 0.191 22.216);\n  --border: oklch(1 0 0 / 10%);\n  --input: oklch(1 0 0 / 15%);\n  --ring: oklch(0.556 0 0);\n  --chart-1: oklch(0.488 0.243 264.376);\n  --chart-2: oklch(0.696 0.17 162.48);\n  --chart-3: oklch(0.769 0.188 70.08);\n  --chart-4: oklch(0.627 0.265 303.9);\n  --chart-5: oklch(0.645 0.246 16.439);\n  --sidebar: oklch(0.205 0 0);\n  --sidebar-foreground: oklch(0.985 0 0);\n  --sidebar-primary: oklch(0.488 0.243 264.376);\n  --sidebar-primary-foreground: oklch(0.985 0 0);\n  --sidebar-accent: oklch(0.269 0 0);\n  --sidebar-accent-foreground: oklch(0.985 0 0);\n  --sidebar-border: oklch(1 0 0 / 10%);\n  --sidebar-ring: oklch(0.556 0 0);\n}\n@layer base {\n  * {\n    border-color: var(--border);\n    outline-color: var(--ring);\n    @supports (color: color-mix(in lab, red, red)) {\n      outline-color: color-mix(in oklab, var(--ring) 50%, transparent);\n    }\n  }\n  body {\n    background-color: var(--background);\n    color: var(--foreground);\n  }\n}\n@property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-scale-x { syntax: "*"; inherits: false; initial-value: 1; }\n@property --tw-scale-y { syntax: "*"; inherits: false; initial-value: 1; }\n@property --tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; }\n@property --tw-rotate-x { syntax: "*"; inherits: false; }\n@property --tw-rotate-y { syntax: "*"; inherits: false; }\n@property --tw-rotate-z { syntax: "*"; inherits: false; }\n@property --tw-skew-x { syntax: "*"; inherits: false; }\n@property --tw-skew-y { syntax: "*"; inherits: false; }\n@property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }\n@property --tw-gradient-position { syntax: "*"; inherits: false; }\n@property --tw-gradient-from { syntax: "<color>"; inherits: false; initial-value: #0000; }\n@property --tw-gradient-via { syntax: "<color>"; inherits: false; initial-value: #0000; }\n@property --tw-gradient-to { syntax: "<color>"; inherits: false; initial-value: #0000; }\n@property --tw-gradient-stops { syntax: "*"; inherits: false; }\n@property --tw-gradient-via-stops { syntax: "*"; inherits: false; }\n@property --tw-gradient-from-position { syntax: "<length-percentage>"; inherits: false; initial-value: 0%; }\n@property --tw-gradient-via-position { syntax: "<length-percentage>"; inherits: false; initial-value: 50%; }\n@property --tw-gradient-to-position { syntax: "<length-percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-font-weight { syntax: "*"; inherits: false; }\n@property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-inset-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-inset-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-ring-color { syntax: "*"; inherits: false; }\n@property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-inset-ring-color { syntax: "*"; inherits: false; }\n@property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-ring-inset { syntax: "*"; inherits: false; }\n@property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0px; }\n@property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }\n@property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-blur { syntax: "*"; inherits: false; }\n@property --tw-brightness { syntax: "*"; inherits: false; }\n@property --tw-contrast { syntax: "*"; inherits: false; }\n@property --tw-grayscale { syntax: "*"; inherits: false; }\n@property --tw-hue-rotate { syntax: "*"; inherits: false; }\n@property --tw-invert { syntax: "*"; inherits: false; }\n@property --tw-opacity { syntax: "*"; inherits: false; }\n@property --tw-saturate { syntax: "*"; inherits: false; }\n@property --tw-sepia { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-drop-shadow-size { syntax: "*"; inherits: false; }\n@property --tw-backdrop-blur { syntax: "*"; inherits: false; }\n@property --tw-backdrop-brightness { syntax: "*"; inherits: false; }\n@property --tw-backdrop-contrast { syntax: "*"; inherits: false; }\n@property --tw-backdrop-grayscale { syntax: "*"; inherits: false; }\n@property --tw-backdrop-hue-rotate { syntax: "*"; inherits: false; }\n@property --tw-backdrop-invert { syntax: "*"; inherits: false; }\n@property --tw-backdrop-opacity { syntax: "*"; inherits: false; }\n@property --tw-backdrop-saturate { syntax: "*"; inherits: false; }\n@property --tw-backdrop-sepia { syntax: "*"; inherits: false; }\n@property --tw-duration { syntax: "*"; inherits: false; }\n@property --tw-ease { syntax: "*"; inherits: false; }\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *,\n    ::before,\n    ::after,\n    ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-scale-x: 1;\n      --tw-scale-y: 1;\n      --tw-scale-z: 1;\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-border-style: solid;\n      --tw-gradient-position: initial;\n      --tw-gradient-from: #0000;\n      --tw-gradient-via: #0000;\n      --tw-gradient-to: #0000;\n      --tw-gradient-stops: initial;\n      --tw-gradient-via-stops: initial;\n      --tw-gradient-from-position: 0%;\n      --tw-gradient-via-position: 50%;\n      --tw-gradient-to-position: 100%;\n      --tw-font-weight: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-blur: initial;\n      --tw-brightness: initial;\n      --tw-contrast: initial;\n      --tw-grayscale: initial;\n      --tw-hue-rotate: initial;\n      --tw-invert: initial;\n      --tw-opacity: initial;\n      --tw-saturate: initial;\n      --tw-sepia: initial;\n      --tw-drop-shadow: initial;\n      --tw-drop-shadow-color: initial;\n      --tw-drop-shadow-alpha: 100%;\n      --tw-drop-shadow-size: initial;\n      --tw-backdrop-blur: initial;\n      --tw-backdrop-brightness: initial;\n      --tw-backdrop-contrast: initial;\n      --tw-backdrop-grayscale: initial;\n      --tw-backdrop-hue-rotate: initial;\n      --tw-backdrop-invert: initial;\n      --tw-backdrop-opacity: initial;\n      --tw-backdrop-saturate: initial;\n      --tw-backdrop-sepia: initial;\n      --tw-duration: initial;\n      --tw-ease: initial;\n      --tw-animation-delay: 0s;\n      --tw-animation-direction: normal;\n      --tw-animation-duration: initial;\n      --tw-animation-fill-mode: none;\n      --tw-animation-iteration-count: 1;\n      --tw-enter-blur: 0;\n      --tw-enter-opacity: 1;\n      --tw-enter-rotate: 0;\n      --tw-enter-scale: 1;\n      --tw-enter-translate-x: 0;\n      --tw-enter-translate-y: 0;\n      --tw-exit-blur: 0;\n      --tw-exit-opacity: 1;\n      --tw-exit-rotate: 0;\n      --tw-exit-scale: 1;\n      --tw-exit-translate-x: 0;\n      --tw-exit-translate-y: 0;\n    }\n  }\n}\n');
 
 // src/react/PGSGCanvas.tsx
-import * as React from "react";
+import * as React5 from "react";
+
+// src/react/PGSGViewControls.tsx
+import * as React4 from "react";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+var glass = "bg-gradient-to-br from-white/20 to-white/5 dark:from-white/10 dark:to-transparent backdrop-blur-2xl border border-white/20 shadow-[0_8px_32px_rgba(0,0,0,0.25)]";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/react/controls/PGSGViewer3D.tsx
 import { jsx } from "react/jsx-runtime";
+function PGSGViewer3D({
+  open,
+  setOpen
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "relative flex items-center flex-row-reverse overflow-hidden pointer-events-auto", children: /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick: () => setOpen(!open),
+      className: cn(
+        glass,
+        "p-3 rounded-full pointer-events-auto z-100 shadow-lg shadow-white/10 cursor-pointer",
+        open && "from-black/20 to-transparent border-black/20 dark:from-white/10 dark:to-white/5 dark:border-white/20"
+      ),
+      children: /* @__PURE__ */ jsx("span", { className: "text-white font-semibold", children: "3D" })
+    }
+  ) });
+}
+
+// src/react/controls/PGSGViewerMode.tsx
+import * as React from "react";
+import {
+  Rotate3D,
+  RulerDimensionLine,
+  Footprints,
+  Icon,
+  ChevronLeft,
+  X
+} from "lucide-react";
+import { floorPlan } from "@lucide/lab";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function PGSGViewerMode({ viewer }) {
+  const [mode, setMode] = React.useState("orbit");
+  const [open, setOpen] = React.useState(false);
+  const choose = (m) => {
+    if (!viewer) return null;
+    viewer.setCameraMode(m);
+    setMode(m);
+    setOpen(false);
+  };
+  React.useEffect(() => {
+    if (!open) return;
+    const onDown = (e) => {
+      const t = e.target;
+      if (!t?.closest("[data-pgsg-controls]")) setOpen(false);
+    };
+    window.addEventListener("pointerdown", onDown, { capture: true });
+    return () => window.removeEventListener("pointerdown", onDown, {
+      capture: true
+    });
+  }, [open]);
+  let icon = null;
+  switch (mode) {
+    case "walk":
+      icon = /* @__PURE__ */ jsx2(Footprints, { className: "size-5 text-white" });
+      break;
+    case "orbit":
+      icon = /* @__PURE__ */ jsx2(Rotate3D, { className: "size-5 text-white" });
+      break;
+    case "floorplan":
+      icon = /* @__PURE__ */ jsx2(Icon, { iconNode: floorPlan, className: "size-5 text-white" });
+      break;
+    case "measure":
+      icon = /* @__PURE__ */ jsx2(RulerDimensionLine, { className: "size-5 text-white" });
+      break;
+    default:
+      icon = /* @__PURE__ */ jsx2(Rotate3D, { className: "size-5 text-white" });
+      break;
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-pgsg-controls": true,
+      className: "relative flex items-center flex-row-reverse overflow-hidden pointer-events-auto",
+      children: [
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            className: cn(
+              glass,
+              "p-3 rounded-full pointer-events-auto z-100 shadow-lg shadow-white/10"
+            ),
+            children: icon
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex items-center pointer-events-auto h-full overflow-hidden"
+            ),
+            children: [
+              /* @__PURE__ */ jsx2(
+                "div",
+                {
+                  className: cn(
+                    "flex items-center h-full transition-all duration-300 ease-out",
+                    open ? "opacity-100 translate-x-full scale-95 pointer-events-none" : "opacity-100 translate-x-0 scale-100"
+                  ),
+                  children: /* @__PURE__ */ jsx2(
+                    "button",
+                    {
+                      onClick: () => setOpen(!open),
+                      className: "p-2.5 rounded-full pointer-events-auto",
+                      children: /* @__PURE__ */ jsx2(ChevronLeft, { className: "size-5 text-white" })
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    glass,
+                    "flex flex-row-reverse items-center gap-1.5 absolute bottom-0 right-0 h-full rounded-full pointer-events-auto transition-all duration-300 ease-out overflow-hidden pr-14 pl-2 shadow-none",
+                    open ? "opacity-100 translate-x-0 scale-100 max-w-[520px]" : "opacity-0 translate-x-6 scale-95 pointer-events-none max-w-0"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx2(
+                      "button",
+                      {
+                        onClick: () => choose("walk"),
+                        className: cn(
+                          "p-2.5 rounded-full pointer-events-auto transition-all duration-300 ease-out",
+                          mode === "walk" ? "bg-white/10 cursor-default" : "hover:bg-white/10 cursor-pointer"
+                        ),
+                        children: /* @__PURE__ */ jsx2(Footprints, { className: "size-4 text-white" })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx2(
+                      "button",
+                      {
+                        onClick: () => choose("orbit"),
+                        className: cn(
+                          "p-2.5 rounded-full pointer-events-auto transition-all duration-300 ease-out",
+                          mode === "orbit" ? "bg-white/10 cursor-default" : "hover:bg-white/10 cursor-pointer"
+                        ),
+                        children: /* @__PURE__ */ jsx2(Rotate3D, { className: "size-4 text-white" })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx2(
+                      "button",
+                      {
+                        onClick: () => choose("floorplan"),
+                        className: cn(
+                          "p-2.5 rounded-full pointer-events-auto transition-all duration-300 ease-out",
+                          mode === "floorplan" ? "bg-white/10 cursor-default" : "hover:bg-white/10 cursor-pointer"
+                        ),
+                        children: /* @__PURE__ */ jsx2(Icon, { iconNode: floorPlan, className: "size-4 text-white" })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx2(
+                      "button",
+                      {
+                        onClick: () => setMode("measure"),
+                        className: cn(
+                          "p-2.5 rounded-full pointer-events-auto transition-all duration-300 ease-out",
+                          mode === "measure" ? "bg-white/10 cursor-default" : "hover:bg-white/10 cursor-pointer"
+                        ),
+                        children: /* @__PURE__ */ jsx2(RulerDimensionLine, { className: "size-4 text-white" })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx2(
+                      "button",
+                      {
+                        onClick: () => setOpen(false),
+                        className: cn(
+                          "p-2.5 rounded-full pointer-events-auto delay-200 transition-opacity duration-200 ease-out cursor-pointer",
+                          open ? "opacity-100" : "opacity-0 pointer-events-none"
+                        ),
+                        children: /* @__PURE__ */ jsx2(X, { className: "size-4 text-white/60" })
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/react/controls/PGSGViewerSettings.tsx
+import * as React2 from "react";
+import { Settings } from "lucide-react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function PGSGViewerSettings({
+  viewer,
+  className
+}) {
+  const [open, setOpen] = React2.useState(false);
+  const [grid, setGrid] = React2.useState(false);
+  if (!viewer) return null;
+  return /* @__PURE__ */ jsx3(
+    "button",
+    {
+      onClick: () => setOpen(!open),
+      className: cn(glass, "p-2.5 rounded-full pointer-events-auto"),
+      children: /* @__PURE__ */ jsx3(Settings, { className: "size-4 text-white" })
+    }
+  );
+}
+
+// src/react/controls/PGSGViewer3DSheet.tsx
+import * as React3 from "react";
+import { Sparkles, X as X2 } from "lucide-react";
+import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function PGSGViewer3DSheet({
+  open,
+  setOpen,
+  viewer
+}) {
+  const [text, setText] = React3.useState("");
+  const [loading, setLoading] = React3.useState(false);
+  const [modelUrl, setModelUrl] = React3.useState(null);
+  const [previewImage, setPreviewImage] = React3.useState(null);
+  const handleTextChange = (e) => {
+    setText(e.target.value);
+  };
+  const handleGenerateModel = async () => {
+    if (!viewer) return;
+    const prompt = text.trim();
+    if (!prompt) return;
+    setLoading(true);
+    try {
+      const res = await fetch(`http://localhost:9999/v1/mesh/text-to-3d`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ prompt })
+      });
+      if (!res.ok) {
+        throw new Error("Failed to generate model");
+      }
+      const data = await res.json();
+      const modelUrl2 = `http://localhost:9999/v1/mesh/text-to-3d/${data.id}/model`;
+      const previewUrl = `http://localhost:9999/v1/mesh/text-to-3d/${data.id}/generated`;
+      setModelUrl(modelUrl2);
+      setPreviewImage(previewUrl);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handlePlaceModel = () => {
+    if (!viewer || !modelUrl) return;
+    viewer.enablePlacementMode(modelUrl);
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsx4(Fragment, { children: /* @__PURE__ */ jsxs2("div", { className: "h-full w-[360px] bg-[rgba(15,15,15,0.9)] border-l border-l-white/1 backdrop-blur-(10px) p-3.5 text-white/60 z-100", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between pb-2.5", children: [
+      /* @__PURE__ */ jsx4("h4", { className: "text-lg font-semibold", children: "Text to 3D Model" }),
+      /* @__PURE__ */ jsx4(
+        "button",
+        {
+          type: "button",
+          onClick: () => setOpen(false),
+          className: "p-2.5 rounded-full pointer-events-auto",
+          children: /* @__PURE__ */ jsx4(X2, { className: "size-4" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center px-2 py-1.5 max-h-[60px] rounded-md bg-white/10 text-sm", children: [
+      /* @__PURE__ */ jsx4("div", { className: "flex flex-1 h-full items-center relative", children: /* @__PURE__ */ jsx4(
+        "textarea",
+        {
+          rows: 1,
+          value: text,
+          onChange: handleTextChange,
+          placeholder: "Describe your 3D model",
+          className: "w-full resize-none outline-none bg-transparent text-white/60"
+        }
+      ) }),
+      /* @__PURE__ */ jsxs2(
+        "button",
+        {
+          type: "button",
+          onClick: handleGenerateModel,
+          className: cn(
+            "bg-linear-to-br from-white/20 to-white/5 border border-white/20 px-2 py-1 rounded-full pointer-events-none transition-all duration-300 ease-out flex items-center gap-1 disabled:opacity-50",
+            text.trim() && !loading && "pointer-events-auto hover:from-black/20 hover:to-transparent hover:border-black/10 cursor-pointer"
+          ),
+          disabled: !text.trim() || loading,
+          children: [
+            /* @__PURE__ */ jsx4(Sparkles, { className: "size-4 text-white" }),
+            /* @__PURE__ */ jsx4("span", { className: "text-white text-sm font-medium", children: loading ? "Generating..." : "Generate" })
+          ]
+        }
+      )
+    ] }),
+    modelUrl && /* @__PURE__ */ jsxs2("div", { className: "mt-4 flex flex-col gap-3", children: [
+      previewImage && /* @__PURE__ */ jsx4("div", { className: "rounded-md overflow-hidden border border-white/10", children: /* @__PURE__ */ jsx4("img", { src: previewImage, className: "w-full object-cover" }) }),
+      /* @__PURE__ */ jsxs2("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx4(
+          "button",
+          {
+            onClick: handleGenerateModel,
+            className: "flex-1 px-3 py-2 rounded-md bg-white/10 hover:bg-white/20 text-sm",
+            children: "Regenerate"
+          }
+        ),
+        /* @__PURE__ */ jsx4(
+          "button",
+          {
+            onClick: handlePlaceModel,
+            className: "flex-1 px-3 py-2 rounded-md bg-blue-500 hover:bg-blue-600 text-white text-sm",
+            children: "Place Model"
+          }
+        )
+      ] })
+    ] })
+  ] }) });
+}
+
+// src/react/PGSGViewControls.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function PGSGViewerControls({
+  viewer,
+  className
+}) {
+  const [open, setOpen] = React4.useState(false);
+  if (!viewer) return null;
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: cn(
+        "absolute top-0 right-0 h-full flex flex-row items-stretch z-50"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs3("div", { className: "flex flex-col justify-between items-end py-2 pr-2", children: [
+          /* @__PURE__ */ jsx5(PGSGViewerSettings, { viewer }),
+          /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsx5(PGSGViewer3D, { open, setOpen }),
+            /* @__PURE__ */ jsx5(PGSGViewerMode, { viewer })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx5(
+          "div",
+          {
+            className: cn(
+              "overflow-hidden transition-all duration-300 ease-out w-0",
+              open && "w-[360px]"
+            ),
+            children: /* @__PURE__ */ jsx5(
+              PGSGViewer3DSheet,
+              {
+                open,
+                setOpen,
+                viewer
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/react/PGSGCanvas.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
 function PGSGCanvas({
   src,
   type = "pgsg",
@@ -12,33 +411,36 @@ function PGSGCanvas({
   onReady,
   colliderSrc
 }) {
-  const ref = React.useRef(null);
-  const viewRef = React.useRef(null);
-  React.useEffect(() => {
+  const ref = React5.useRef(null);
+  const [viewer, setViewer] = React5.useState(null);
+  React5.useEffect(() => {
     if (!ref.current) return;
-    if (viewRef.current) return;
-    const viewer = new PGSGViewer({
+    const instance = new PGSGViewer({
       container: ref.current,
       source: { type, url: src },
       colliderSource: colliderSrc,
       debug: true,
       viewerType: "three"
     });
-    viewRef.current = viewer;
-    viewer.load().then(() => {
-      onReady?.(viewer);
+    setViewer(instance);
+    instance.load().then(() => {
+      onReady?.(instance);
     });
     return () => {
-      viewer.destroy();
-      viewRef.current = null;
+      instance.destroy();
+      setViewer(null);
     };
-  }, [src]);
-  return /* @__PURE__ */ jsx(
+  }, [src, type, colliderSrc]);
+  return /* @__PURE__ */ jsx6(
     "div",
     {
       ref,
-      className,
-      style: { width: "100%", height: "100%" }
+      className: cn("relative w-full h-full", className),
+      style: {
+        width: "100%",
+        height: "100%"
+      },
+      children: /* @__PURE__ */ jsx6(PGSGViewerControls, { viewer })
     }
   );
 }