@realsee/atom-panorama-annotation 0.1.0

package/README.md

@@ -0,0 +1,9 @@
+# @realsee/atom-panorama-annotation
+
+全景图标签和标注的共享视觉组件。宿主负责坐标投影、数据读取，以及通过 `onClick` 绑定业务行为。
+
+```tsx
+<PanoramaAnnotation kind="label" title="前往客厅" description="了解客厅的设计" onClick={() => navigateToLivingRoom()} />
+```
+
+`kind` 只有 `label`（标签）和 `annotation`（标注）。标签收起时最多显示 15 字，超出或有描述时可点击右侧箭头展开；点击展开态标题收起，只有描述区可滚动且不显示滚动条。标注最多显示 30 字、两行，不展开。`style.color` 和 `style.opacity` 仅控制收起状态的面板背景。`style.icon` 可传入图标图片 URL，不传时不显示图标。展开标签使用设计稿中的半透明黑色面板。`style.scale` 控制整体缩放，`style.guideLine` 控制引导线。组件不处理跳转目标、编辑选中态或数据协议。

package/index.d.ts

@@ -0,0 +1,2 @@
+export { PanoramaAnnotation } from './lib/PanoramaAnnotation';
+export type { PanoramaAnnotationProps, PanoramaAnnotationStyle } from './lib/PanoramaAnnotation';

package/index.js

@@ -0,0 +1,2 @@
+(function(){"use strict";try{if(typeof document!="undefined"){var a=document.createElement("style");a.appendChild(document.createTextNode('.rs-panorama-annotation{position:absolute;top:0;left:0;z-index:0;transform:translate(-50%,-16px) scale(var(--rs-annotation-scale));transform-origin:top center;color:var(--rs-annotation-text-color, #fff);font-family:PingFang SC,sans-serif;text-align:left}.rs-panorama-annotation--with-guide{transform:translate(-50%,-76px) scale(var(--rs-annotation-scale))}.rs-panorama-annotation--expanded{z-index:1}.rs-panorama-annotation__panel{position:relative;box-sizing:border-box;width:var(--rs-annotation-collapsed-width);max-width:268px;height:32px;overflow:hidden;border-radius:20px;transition:width .3s ease,height .3s ease,border-radius .3s ease}.rs-panorama-annotation__panel:before{position:absolute;inset:0;border-radius:inherit;background:#000000b3;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);box-sizing:border-box;content:"";opacity:0;transition:opacity .24s ease}.rs-panorama-annotation__panel:after{position:absolute;z-index:4;inset:0;padding:.5px;border-radius:inherit;background:linear-gradient(128deg,#ffffff1a,#fff6 52%,#ffffff1a);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;box-sizing:border-box;content:"";opacity:0;pointer-events:none;transition:opacity .24s ease}.rs-panorama-annotation__capsule{position:absolute;z-index:1;top:0;left:0;box-sizing:border-box;width:100%;height:32px;border-radius:20px;background:color-mix(in srgb,var(--rs-annotation-panel-color) var(--rs-annotation-panel-opacity),transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);transition:top .3s ease,left .3s ease,width .3s ease,height .3s ease,border-radius .3s ease}.rs-panorama-annotation__capsule:after{position:absolute;inset:0;padding:.5px;border-radius:inherit;background:linear-gradient(135deg,#ffffff1a,#fff6 49%,#ffffff1a 96%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;box-sizing:border-box;content:"";pointer-events:none}.rs-panorama-annotation--annotation .rs-panorama-annotation__panel{width:max-content;max-width:264px;height:auto;min-height:32px;border-radius:6px;background:color-mix(in srgb,var(--rs-annotation-panel-color) var(--rs-annotation-panel-opacity),transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.rs-panorama-annotation--annotation .rs-panorama-annotation__panel:before{content:none}.rs-panorama-annotation--annotation .rs-panorama-annotation__panel:after{background:linear-gradient(140deg,#ffffff1a 4%,#fff6 55%,#ffffff1a);opacity:1}.rs-panorama-annotation--expanded .rs-panorama-annotation__panel{width:264px;height:var(--rs-annotation-expanded-height);max-height:251px;border-radius:8px}.rs-panorama-annotation--expanded .rs-panorama-annotation__panel:before{opacity:1}.rs-panorama-annotation--expanded .rs-panorama-annotation__panel:after{opacity:1}.rs-panorama-annotation--expanded .rs-panorama-annotation__capsule{top:12px;left:12px;width:24px;height:3px;border-radius:20px;-webkit-backdrop-filter:none;backdrop-filter:none}.rs-panorama-annotation--expanded .rs-panorama-annotation__capsule:after{background:linear-gradient(97.98deg,#ffffff1a .98%,#fff6 49%,#ffffff1a 96.1%)}.rs-panorama-annotation__collapsed{position:relative;z-index:2;display:flex;align-items:center;width:max-content;max-width:268px;min-height:31px;padding:0 8px 0 4px;box-sizing:border-box;opacity:1;transition:opacity .12s ease}.rs-panorama-annotation--expanded .rs-panorama-annotation__collapsed{opacity:0;pointer-events:none}.rs-panorama-annotation--annotation .rs-panorama-annotation__collapsed{width:auto;max-width:264px;min-height:31px;padding:5px 12px}.rs-panorama-annotation--without-icon .rs-panorama-annotation__collapsed{padding-left:12px;padding-right:8px}.rs-panorama-annotation--without-icon.rs-panorama-annotation--without-expand .rs-panorama-annotation__collapsed{padding-right:12px}.rs-panorama-annotation--without-icon .rs-panorama-annotation__capsule:after{background:linear-gradient(132deg,#ffffff1a 1%,#fff6,#ffffff1a 97%)}.rs-panorama-annotation--without-icon.rs-panorama-annotation--expanded .rs-panorama-annotation__capsule:after{background:linear-gradient(97.98deg,#ffffff1a .98%,#fff6 49%,#ffffff1a 96.1%)}.rs-panorama-annotation__icon{position:relative;display:grid;flex:none;width:24px;height:24px;place-items:center;margin-right:4px;border-radius:50%;background:#ffffff1a}.rs-panorama-annotation__icon:after{position:absolute;inset:0;padding:.5px;border-radius:inherit;background:linear-gradient(93.2deg,#ffffff0d,#fff6 50.48%,#ffffff0d);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;box-sizing:border-box;content:"";pointer-events:none}.rs-panorama-annotation__icon img{width:20px;height:20px;object-fit:contain}.rs-panorama-annotation__primary,.rs-panorama-annotation__expand{padding:0;border:0;color:inherit;background:none;font:inherit}.rs-panorama-annotation__primary{display:block;min-width:0;flex:1 1 auto;text-align:left}button.rs-panorama-annotation__primary,.rs-panorama-annotation__expand,.rs-panorama-annotation__detail-title{cursor:pointer}.rs-panorama-annotation__title{display:block;overflow:hidden;font-size:14px;font-weight:500;line-height:20px;text-overflow:ellipsis;white-space:nowrap}.rs-panorama-annotation--annotation .rs-panorama-annotation__title{display:-webkit-box;overflow:hidden;max-width:238px;max-height:40px;overflow-wrap:anywhere;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2}.rs-panorama-annotation__expand{display:grid;flex:none;width:16px;height:28px;place-items:center;margin-left:4px}.rs-panorama-annotation__expand svg{width:16px;height:16px}.rs-panorama-annotation__details{position:absolute;z-index:3;inset:0;box-sizing:border-box;display:flex;flex-direction:column;padding:12px;opacity:0;pointer-events:none;transition:opacity .14s ease}.rs-panorama-annotation--expanded .rs-panorama-annotation__details{opacity:1;pointer-events:auto;transition-delay:.13s}.rs-panorama-annotation__description-scroll{min-height:0;flex:1;margin-top:4px;overflow-x:hidden;overflow-y:auto;scrollbar-width:none;mask-image:linear-gradient(to bottom,#000 0%,#000 90%,transparent 100%)}.rs-panorama-annotation__description-scroll::-webkit-scrollbar{display:none}.rs-panorama-annotation__detail-title{margin-top:7px;padding:0;border:0;color:inherit;background:none;font-family:inherit;font-size:16px;font-weight:500;line-height:22px;overflow-wrap:anywhere;text-align:left}.rs-panorama-annotation__description{color:#fff9;font-size:12px;line-height:17px;overflow-wrap:anywhere}.rs-panorama-annotation__guide{position:absolute;top:100%;left:50%;width:2px;height:60px;border-radius:0 0 2px 2px;background:linear-gradient(to bottom,#fff 0%,#fff 50%,transparent 100%);pointer-events:none}@media (prefers-reduced-motion: reduce){.rs-panorama-annotation__panel,.rs-panorama-annotation__panel:before,.rs-panorama-annotation__capsule,.rs-panorama-annotation__collapsed,.rs-panorama-annotation__details{transition:none}}')),document.head.appendChild(a)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}})();
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),T=15,B=30,A=251;function P({kind:_,title:r,description:s,style:t={},onClick:h,className:H}){var g,b;const[I,E]=a.useState(!1),[O,w]=a.useState(A),[x,y]=a.useState(),i=a.useRef(null),d=a.useRef(null),p=a.useRef(null),e=_==="label",u=Array.from(r),N=e&&u.length>T,c=e&&!!(s!=null&&s.trim()),l=N||c,$=N?`${u.slice(0,T).join("")}…`:r,f=e?$:u.slice(0,B).join(""),o=l&&I,j=e?t.color||"#3366ff":t.background||"#000000",k=e?"#ffffff":t.color||"#ffffff",C=Math.max(0,Math.min(100,(g=t.opacity)!=null?g:e?70:20));return a.useLayoutEffect(()=>{if(!e||!i.current)return;const m=()=>{i.current&&y(Math.min(268,i.current.scrollWidth))};m();const n=typeof ResizeObserver=="undefined"?void 0:new ResizeObserver(m);return n==null||n.observe(i.current),()=>n==null?void 0:n.disconnect()},[e,f,l]),a.useLayoutEffect(()=>{if(!o||!d.current)return;const m=()=>{var v,L,R,M;const S=(L=(v=d.current)==null?void 0:v.scrollHeight)!=null?L:0,z=c&&(M=(R=p.current)==null?void 0:R.scrollHeight)!=null?M:0;w(Math.min(A,Math.max(32,31+S+(c?4+z:0))))};m();const n=typeof ResizeObserver=="undefined"?void 0:new ResizeObserver(m);return n==null||n.observe(d.current),p.current&&(n==null||n.observe(p.current)),()=>n==null?void 0:n.disconnect()},[o,r,s,c]),a.createElement("div",{className:["rs-panorama-annotation",`rs-panorama-annotation--${_}`,e&&!t.icon?"rs-panorama-annotation--without-icon":"",e&&!l?"rs-panorama-annotation--without-expand":"",t.guideLine?"rs-panorama-annotation--with-guide":"",o?"rs-panorama-annotation--expanded":"",H||""].filter(Boolean).join(" "),style:{"--rs-annotation-panel-color":j,"--rs-annotation-text-color":k,"--rs-annotation-panel-opacity":`${C}%`,"--rs-annotation-expanded-height":`${O}px`,"--rs-annotation-collapsed-width":x?`${x}px`:"max-content","--rs-annotation-scale":(b=t.scale)!=null?b:1}},a.createElement("div",{className:"rs-panorama-annotation__panel"},e&&a.createElement("span",{className:"rs-panorama-annotation__capsule","aria-hidden":"true"}),a.createElement("div",{ref:i,className:"rs-panorama-annotation__collapsed","aria-hidden":o},e&&t.icon&&a.createElement("span",{className:"rs-panorama-annotation__icon","aria-hidden":"true"},a.createElement("img",{src:t.icon,alt:""})),h?a.createElement("button",{type:"button",className:"rs-panorama-annotation__primary",onClick:h,title:r},a.createElement("span",{className:"rs-panorama-annotation__title"},f)):a.createElement("span",{className:"rs-panorama-annotation__primary",title:r},a.createElement("span",{className:"rs-panorama-annotation__title"},f)),l&&a.createElement("button",{type:"button",className:"rs-panorama-annotation__expand","aria-label":"展开标签","aria-expanded":o,onClick:()=>E(!0)},a.createElement("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true"},a.createElement("path",{d:"m6 3 5 5-5 5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})))),l&&a.createElement("div",{className:"rs-panorama-annotation__details","aria-hidden":!o},a.createElement("button",{type:"button",ref:d,className:"rs-panorama-annotation__detail-title","aria-label":`收起标签：${r}`,tabIndex:o?0:-1,onClick:()=>E(!1)},r),c&&a.createElement("div",{className:"rs-panorama-annotation__description-scroll",tabIndex:o?0:-1},a.createElement("div",{ref:p,className:"rs-panorama-annotation__description"},s)))),t.guideLine&&!o&&a.createElement("span",{className:"rs-panorama-annotation__guide","aria-hidden":"true"}))}exports.PanoramaAnnotation=P;

package/index.mjs

@@ -0,0 +1,93 @@
+(function(){"use strict";try{if(typeof document!="undefined"){var a=document.createElement("style");a.appendChild(document.createTextNode('.rs-panorama-annotation{position:absolute;top:0;left:0;z-index:0;transform:translate(-50%,-16px) scale(var(--rs-annotation-scale));transform-origin:top center;color:var(--rs-annotation-text-color, #fff);font-family:PingFang SC,sans-serif;text-align:left}.rs-panorama-annotation--with-guide{transform:translate(-50%,-76px) scale(var(--rs-annotation-scale))}.rs-panorama-annotation--expanded{z-index:1}.rs-panorama-annotation__panel{position:relative;box-sizing:border-box;width:var(--rs-annotation-collapsed-width);max-width:268px;height:32px;overflow:hidden;border-radius:20px;transition:width .3s ease,height .3s ease,border-radius .3s ease}.rs-panorama-annotation__panel:before{position:absolute;inset:0;border-radius:inherit;background:#000000b3;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);box-sizing:border-box;content:"";opacity:0;transition:opacity .24s ease}.rs-panorama-annotation__panel:after{position:absolute;z-index:4;inset:0;padding:.5px;border-radius:inherit;background:linear-gradient(128deg,#ffffff1a,#fff6 52%,#ffffff1a);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;box-sizing:border-box;content:"";opacity:0;pointer-events:none;transition:opacity .24s ease}.rs-panorama-annotation__capsule{position:absolute;z-index:1;top:0;left:0;box-sizing:border-box;width:100%;height:32px;border-radius:20px;background:color-mix(in srgb,var(--rs-annotation-panel-color) var(--rs-annotation-panel-opacity),transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);transition:top .3s ease,left .3s ease,width .3s ease,height .3s ease,border-radius .3s ease}.rs-panorama-annotation__capsule:after{position:absolute;inset:0;padding:.5px;border-radius:inherit;background:linear-gradient(135deg,#ffffff1a,#fff6 49%,#ffffff1a 96%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;box-sizing:border-box;content:"";pointer-events:none}.rs-panorama-annotation--annotation .rs-panorama-annotation__panel{width:max-content;max-width:264px;height:auto;min-height:32px;border-radius:6px;background:color-mix(in srgb,var(--rs-annotation-panel-color) var(--rs-annotation-panel-opacity),transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.rs-panorama-annotation--annotation .rs-panorama-annotation__panel:before{content:none}.rs-panorama-annotation--annotation .rs-panorama-annotation__panel:after{background:linear-gradient(140deg,#ffffff1a 4%,#fff6 55%,#ffffff1a);opacity:1}.rs-panorama-annotation--expanded .rs-panorama-annotation__panel{width:264px;height:var(--rs-annotation-expanded-height);max-height:251px;border-radius:8px}.rs-panorama-annotation--expanded .rs-panorama-annotation__panel:before{opacity:1}.rs-panorama-annotation--expanded .rs-panorama-annotation__panel:after{opacity:1}.rs-panorama-annotation--expanded .rs-panorama-annotation__capsule{top:12px;left:12px;width:24px;height:3px;border-radius:20px;-webkit-backdrop-filter:none;backdrop-filter:none}.rs-panorama-annotation--expanded .rs-panorama-annotation__capsule:after{background:linear-gradient(97.98deg,#ffffff1a .98%,#fff6 49%,#ffffff1a 96.1%)}.rs-panorama-annotation__collapsed{position:relative;z-index:2;display:flex;align-items:center;width:max-content;max-width:268px;min-height:31px;padding:0 8px 0 4px;box-sizing:border-box;opacity:1;transition:opacity .12s ease}.rs-panorama-annotation--expanded .rs-panorama-annotation__collapsed{opacity:0;pointer-events:none}.rs-panorama-annotation--annotation .rs-panorama-annotation__collapsed{width:auto;max-width:264px;min-height:31px;padding:5px 12px}.rs-panorama-annotation--without-icon .rs-panorama-annotation__collapsed{padding-left:12px;padding-right:8px}.rs-panorama-annotation--without-icon.rs-panorama-annotation--without-expand .rs-panorama-annotation__collapsed{padding-right:12px}.rs-panorama-annotation--without-icon .rs-panorama-annotation__capsule:after{background:linear-gradient(132deg,#ffffff1a 1%,#fff6,#ffffff1a 97%)}.rs-panorama-annotation--without-icon.rs-panorama-annotation--expanded .rs-panorama-annotation__capsule:after{background:linear-gradient(97.98deg,#ffffff1a .98%,#fff6 49%,#ffffff1a 96.1%)}.rs-panorama-annotation__icon{position:relative;display:grid;flex:none;width:24px;height:24px;place-items:center;margin-right:4px;border-radius:50%;background:#ffffff1a}.rs-panorama-annotation__icon:after{position:absolute;inset:0;padding:.5px;border-radius:inherit;background:linear-gradient(93.2deg,#ffffff0d,#fff6 50.48%,#ffffff0d);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;box-sizing:border-box;content:"";pointer-events:none}.rs-panorama-annotation__icon img{width:20px;height:20px;object-fit:contain}.rs-panorama-annotation__primary,.rs-panorama-annotation__expand{padding:0;border:0;color:inherit;background:none;font:inherit}.rs-panorama-annotation__primary{display:block;min-width:0;flex:1 1 auto;text-align:left}button.rs-panorama-annotation__primary,.rs-panorama-annotation__expand,.rs-panorama-annotation__detail-title{cursor:pointer}.rs-panorama-annotation__title{display:block;overflow:hidden;font-size:14px;font-weight:500;line-height:20px;text-overflow:ellipsis;white-space:nowrap}.rs-panorama-annotation--annotation .rs-panorama-annotation__title{display:-webkit-box;overflow:hidden;max-width:238px;max-height:40px;overflow-wrap:anywhere;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2}.rs-panorama-annotation__expand{display:grid;flex:none;width:16px;height:28px;place-items:center;margin-left:4px}.rs-panorama-annotation__expand svg{width:16px;height:16px}.rs-panorama-annotation__details{position:absolute;z-index:3;inset:0;box-sizing:border-box;display:flex;flex-direction:column;padding:12px;opacity:0;pointer-events:none;transition:opacity .14s ease}.rs-panorama-annotation--expanded .rs-panorama-annotation__details{opacity:1;pointer-events:auto;transition-delay:.13s}.rs-panorama-annotation__description-scroll{min-height:0;flex:1;margin-top:4px;overflow-x:hidden;overflow-y:auto;scrollbar-width:none;mask-image:linear-gradient(to bottom,#000 0%,#000 90%,transparent 100%)}.rs-panorama-annotation__description-scroll::-webkit-scrollbar{display:none}.rs-panorama-annotation__detail-title{margin-top:7px;padding:0;border:0;color:inherit;background:none;font-family:inherit;font-size:16px;font-weight:500;line-height:22px;overflow-wrap:anywhere;text-align:left}.rs-panorama-annotation__description{color:#fff9;font-size:12px;line-height:17px;overflow-wrap:anywhere}.rs-panorama-annotation__guide{position:absolute;top:100%;left:50%;width:2px;height:60px;border-radius:0 0 2px 2px;background:linear-gradient(to bottom,#fff 0%,#fff 50%,transparent 100%);pointer-events:none}@media (prefers-reduced-motion: reduce){.rs-panorama-annotation__panel,.rs-panorama-annotation__panel:before,.rs-panorama-annotation__capsule,.rs-panorama-annotation__collapsed,.rs-panorama-annotation__details{transition:none}}')),document.head.appendChild(a)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}})();
+import a, { useState as _, useRef as h, useLayoutEffect as T } from "react";
+const w = 15, X = 30, A = 251;
+function S({
+  kind: E,
+  title: r,
+  description: s,
+  style: t = {},
+  onClick: x,
+  className: O
+}) {
+  var v, L;
+  const [$, N] = _(!1), [k, C] = _(A), [g, j] = _(), i = h(null), d = h(null), p = h(null), e = E === "label", u = Array.from(r), b = e && u.length > w, c = e && !!(s != null && s.trim()), l = b || c, y = b ? `${u.slice(0, w).join("")}…` : r, f = e ? y : u.slice(0, X).join(""), o = l && $, z = e ? t.color || "#3366ff" : t.background || "#000000", B = e ? "#ffffff" : t.color || "#ffffff", W = Math.max(0, Math.min(100, (v = t.opacity) != null ? v : e ? 70 : 20));
+  return T(() => {
+    if (!e || !i.current)
+      return;
+    const m = () => {
+      i.current && j(Math.min(268, i.current.scrollWidth));
+    };
+    m();
+    const n = typeof ResizeObserver == "undefined" ? void 0 : new ResizeObserver(m);
+    return n == null || n.observe(i.current), () => n == null ? void 0 : n.disconnect();
+  }, [e, f, l]), T(() => {
+    if (!o || !d.current)
+      return;
+    const m = () => {
+      var R, H, I, M;
+      const D = (H = (R = d.current) == null ? void 0 : R.scrollHeight) != null ? H : 0, P = c && (M = (I = p.current) == null ? void 0 : I.scrollHeight) != null ? M : 0;
+      C(
+        Math.min(A, Math.max(32, 31 + D + (c ? 4 + P : 0)))
+      );
+    };
+    m();
+    const n = typeof ResizeObserver == "undefined" ? void 0 : new ResizeObserver(m);
+    return n == null || n.observe(d.current), p.current && (n == null || n.observe(p.current)), () => n == null ? void 0 : n.disconnect();
+  }, [o, r, s, c]), /* @__PURE__ */ a.createElement(
+    "div",
+    {
+      className: [
+        "rs-panorama-annotation",
+        `rs-panorama-annotation--${E}`,
+        e && !t.icon ? "rs-panorama-annotation--without-icon" : "",
+        e && !l ? "rs-panorama-annotation--without-expand" : "",
+        t.guideLine ? "rs-panorama-annotation--with-guide" : "",
+        o ? "rs-panorama-annotation--expanded" : "",
+        O || ""
+      ].filter(Boolean).join(" "),
+      style: {
+        "--rs-annotation-panel-color": z,
+        "--rs-annotation-text-color": B,
+        "--rs-annotation-panel-opacity": `${W}%`,
+        "--rs-annotation-expanded-height": `${k}px`,
+        "--rs-annotation-collapsed-width": g ? `${g}px` : "max-content",
+        "--rs-annotation-scale": (L = t.scale) != null ? L : 1
+      }
+    },
+    /* @__PURE__ */ a.createElement("div", { className: "rs-panorama-annotation__panel" }, e && /* @__PURE__ */ a.createElement("span", { className: "rs-panorama-annotation__capsule", "aria-hidden": "true" }), /* @__PURE__ */ a.createElement("div", { ref: i, className: "rs-panorama-annotation__collapsed", "aria-hidden": o }, e && t.icon && /* @__PURE__ */ a.createElement("span", { className: "rs-panorama-annotation__icon", "aria-hidden": "true" }, /* @__PURE__ */ a.createElement("img", { src: t.icon, alt: "" })), x ? /* @__PURE__ */ a.createElement("button", { type: "button", className: "rs-panorama-annotation__primary", onClick: x, title: r }, /* @__PURE__ */ a.createElement("span", { className: "rs-panorama-annotation__title" }, f)) : /* @__PURE__ */ a.createElement("span", { className: "rs-panorama-annotation__primary", title: r }, /* @__PURE__ */ a.createElement("span", { className: "rs-panorama-annotation__title" }, f)), l && /* @__PURE__ */ a.createElement(
+      "button",
+      {
+        type: "button",
+        className: "rs-panorama-annotation__expand",
+        "aria-label": "展开标签",
+        "aria-expanded": o,
+        onClick: () => N(!0)
+      },
+      /* @__PURE__ */ a.createElement("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, /* @__PURE__ */ a.createElement(
+        "path",
+        {
+          d: "m6 3 5 5-5 5",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ))
+    )), l && /* @__PURE__ */ a.createElement("div", { className: "rs-panorama-annotation__details", "aria-hidden": !o }, /* @__PURE__ */ a.createElement(
+      "button",
+      {
+        type: "button",
+        ref: d,
+        className: "rs-panorama-annotation__detail-title",
+        "aria-label": `收起标签：${r}`,
+        tabIndex: o ? 0 : -1,
+        onClick: () => N(!1)
+      },
+      r
+    ), c && /* @__PURE__ */ a.createElement("div", { className: "rs-panorama-annotation__description-scroll", tabIndex: o ? 0 : -1 }, /* @__PURE__ */ a.createElement("div", { ref: p, className: "rs-panorama-annotation__description" }, s)))),
+    t.guideLine && !o && /* @__PURE__ */ a.createElement("span", { className: "rs-panorama-annotation__guide", "aria-hidden": "true" })
+  );
+}
+export {
+  S as PanoramaAnnotation
+};

package/lib/PanoramaAnnotation.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+export interface PanoramaAnnotationStyle {
+    /** 标签背景色；文字标注的文字颜色。 */
+    color?: string;
+    /** 文字标注的背景色。 */
+    background?: string;
+    /** 面板背景不透明度，0–100；不影响文字、图标和引导线。 */
+    opacity?: number;
+    scale?: number;
+    /** 标签图标的图片 URL；未传入时不显示图标。 */
+    icon?: string;
+    guideLine?: boolean;
+}
+export interface PanoramaAnnotationProps {
+    kind: 'label' | 'annotation';
+    title: string;
+    description?: string;
+    style?: PanoramaAnnotationStyle;
+    onClick?: () => void;
+    className?: string;
+}
+/** 标签和标注的共享视觉组件；位置投影及点击后的业务行为由宿主负责。 */
+export declare function PanoramaAnnotation({ kind, title, description, style, onClick, className, }: PanoramaAnnotationProps): React.JSX.Element;

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@realsee/atom-panorama-annotation",
+  "version": "0.1.0",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.mjs",
+      "require": "./index.js"
+    }
+  },
+  "peerDependencies": {
+    "react": "^18.0.0"
+  }
+}