@chuzi/shared 1.3.36 → 1.3.38

package/dist/realms/cosmos/components/index.d.ts

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
 import { AtomVisualProps } from '../../index.js';
-import { C as ConstellationAppearance } from '../../../appearance-DFP3Ymge.js';
-export { D as DEFAULT_CONSTELLATION_APPEARANCE, m as mergeConstellationAppearance } from '../../../appearance-DFP3Ymge.js';
+import { C as ConstellationAppearance } from '../../../appearance-CVHSA6Ql.js';
+export { D as DEFAULT_CONSTELLATION_APPEARANCE, m as mergeConstellationAppearance } from '../../../appearance-CVHSA6Ql.js';
 import { StoryListItem } from '../../../types/index.js';
 
 interface WorldProps {
@@ -51,6 +51,8 @@ interface ConstellationSceneEntry {
     locked?: boolean;
     /** Highlight this star's billboard (focused traversal). */
     focused?: boolean;
+    /** Control strip slot — rendered beneath preview when focused. */
+    controlsSlot?: ReactNode;
 }
 interface ConstellationEdgeEntry {
     source: string;
@@ -65,6 +67,8 @@ interface ConstellationProps {
     /** Explicit story-flow edges (goto + choice). No implicit sequential links. */
     edges?: ConstellationEdgeEntry[];
     appearance?: Partial<ConstellationAppearance>;
+    /** When false, hide Html billboards and arc title (e.g. while editor is open). */
+    showOverlays?: boolean;
     onSceneSelect?: (index: number) => void;
 }
 /**
@@ -72,7 +76,7 @@ interface ConstellationProps {
  * luminous gradient edges. This is the cosmos realm's `Group` component —
  * identical rendering for own and others' stories.
  */
-declare function Constellation({ scenes, storyTitle, edges, appearance: appearanceOverrides, onSceneSelect, }: ConstellationProps): react_jsx_runtime.JSX.Element;
+declare function Constellation({ scenes, storyTitle, edges, appearance: appearanceOverrides, showOverlays, onSceneSelect, }: ConstellationProps): react_jsx_runtime.JSX.Element;
 
 type ConstellationEdgeVariant = "solid" | "dotted";
 interface ConstellationEdgeProps {
@@ -142,11 +146,15 @@ interface ConstellationTitleProps {
     title: string;
     bounds: ConstellationBounds;
     appearance: ConstellationAppearance;
+    /** World position of the title (first) scene — arc starts here. */
+    arcFrom?: [number, number, number];
+    /** World position of the end scene — arc ends here. */
+    arcTo?: [number, number, number];
 }
 /**
- * Large ghostly film title draped across the constellation footprint.
+ * Vintage cartography-style ocean label arcing from title scene to end scene.
  */
-declare function ConstellationTitle({ title, bounds, appearance, }: ConstellationTitleProps): react_jsx_runtime.JSX.Element | null;
+declare function ConstellationTitle({ title, bounds, appearance, arcFrom, arcTo, }: ConstellationTitleProps): react_jsx_runtime.JSX.Element | null;
 
 interface StarBillboardProps {
     label: string;
@@ -155,11 +163,15 @@ interface StarBillboardProps {
     previewContent?: ReactNode;
     dimmed?: boolean;
     focused?: boolean;
+    visible?: boolean;
+    /** Control strip rendered flush beneath the preview when focused. */
+    controlsSlot?: ReactNode;
 }
 /**
- * Floating preview card and scene label above a star. Label sits beneath
- * the preview image, offset from the star sphere.
+ * Floating preview card and scene label above a star. Unfocused previews
+ * are dimmed; labels stay prominent. Anchor sits at preview bottom-center
+ * so attached controls align with the card edge.
  */
-declare function StarBillboard({ label, appearance, previewImageUrl, previewContent, dimmed, focused, }: StarBillboardProps): react_jsx_runtime.JSX.Element;
+declare function StarBillboard({ label, appearance, previewImageUrl, previewContent, dimmed, focused, visible, controlsSlot, }: StarBillboardProps): react_jsx_runtime.JSX.Element | null;
 
 export { Constellation, ConstellationAppearance, type ConstellationBounds, ConstellationEdge, type ConstellationEdgeEntry, type ConstellationEdgeProps, type ConstellationProps, type ConstellationSceneEntry, ConstellationTitle, type ConstellationTitleProps, CosmosSandbox, type CosmosSandboxProps, type DistributeOptions, Star, StarBillboard, type StarBillboardProps, type StarProps, type Vec3, World, type WorldProps, computeConstellationBounds, distributeStars };

package/dist/realms/cosmos/components/index.js

@@ -1,7 +1,7 @@
 import { Canvas, useFrame } from '@react-three/fiber';
-import { Stars, OrbitControls, Line, Text, Html } from '@react-three/drei';
+import { Stars, OrbitControls, Line, Billboard, Html } from '@react-three/drei';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useRef, useMemo } from 'react';
+import { useRef, useMemo, useId } from 'react';
 import * as THREE from 'three';
 
 // src/realms/cosmos/components/World.tsx
@@ -76,17 +76,20 @@ function Star({ visual, onSelect, dimmed, locked }) {
 
 // src/realms/cosmos/appearance.ts
 var DEFAULT_CONSTELLATION_APPEARANCE = {
-  titleFontSize: 2.8,
-  titleOpacity: 0.14,
-  titleColor: "#e8f0ff",
-  titleLetterSpacing: 0.35,
-  titleYOffset: 1.2,
+  titleFontSize: 34,
+  titleOpacity: 0.82,
+  titleColor: "#c8dce8",
+  titleLetterSpacing: 6,
+  titleYOffset: 8,
+  titleDistanceFactor: 12,
+  htmlZIndexRange: [8, 0],
   previewWidth: 148,
   previewHeight: 96,
   previewOffsetY: 2.4,
   labelFontSize: 13,
   labelLetterSpacing: 1.2,
-  labelGap: 14,
+  labelGap: 10,
+  controlsGridHeight: 92,
   billboardDistanceFactor: 10,
   cameraDefaultOffset: [0, 4, 12],
   cameraTargetOffset: [0, 0, 0],
@@ -179,30 +182,96 @@ function computeConstellationBounds(positions) {
     spanZ: Math.max(4, maxZ - minZ + 3)
   };
 }
+var WORLD_TO_SVG = 58;
 function ConstellationTitle({
   title,
   bounds,
-  appearance
+  appearance,
+  arcFrom,
+  arcTo
 }) {
+  const gradientId = useId().replace(/:/g, "");
+  const pathId = `arc-${gradientId}`;
   if (!title.trim()) return null;
+  const span = Math.max(bounds.spanX, bounds.spanZ);
+  const svgWidth = Math.max(420, Math.round(span * WORLD_TO_SVG + 80));
+  const svgHeight = 110;
+  const centerX = svgWidth / 2;
+  const arcY = svgHeight * 0.88;
+  const arcPeak = svgHeight * 0.06;
+  let arcStartX = svgWidth * 0.04;
+  let arcEndX = svgWidth * 0.96;
+  if (arcFrom && arcTo) {
+    const [fromX] = arcFrom;
+    const [toX] = arcTo;
+    arcStartX = centerX + (fromX - bounds.center[0]) * WORLD_TO_SVG;
+    arcEndX = centerX + (toX - bounds.center[0]) * WORLD_TO_SVG;
+    arcStartX = Math.max(12, Math.min(arcStartX, svgWidth - 12));
+    arcEndX = Math.max(12, Math.min(arcEndX, svgWidth - 12));
+    if (arcStartX > arcEndX) {
+      const swap = arcStartX;
+      arcStartX = arcEndX;
+      arcEndX = swap;
+    }
+  }
+  const arcMidX = (arcStartX + arcEndX) / 2;
+  const arcPath = `M ${arcStartX} ${arcY} Q ${arcMidX} ${arcPeak} ${arcEndX} ${arcY}`;
   return /* @__PURE__ */ jsx(
-    Text,
+    Billboard,
     {
       position: [
         bounds.center[0],
         bounds.center[1] + appearance.titleYOffset,
         bounds.center[2]
       ],
-      rotation: [-Math.PI / 2, 0, 0],
-      fontSize: appearance.titleFontSize,
-      color: appearance.titleColor,
-      fillOpacity: appearance.titleOpacity,
-      anchorX: "center",
-      anchorY: "middle",
-      maxWidth: Math.max(bounds.spanX, bounds.spanZ) * 1.35,
-      letterSpacing: appearance.titleLetterSpacing,
-      textAlign: "center",
-      children: title.toUpperCase()
+      children: /* @__PURE__ */ jsx(
+        Html,
+        {
+          center: true,
+          transform: true,
+          distanceFactor: appearance.titleDistanceFactor,
+          zIndexRange: appearance.htmlZIndexRange,
+          occlude: false,
+          style: { pointerEvents: "none", userSelect: "none" },
+          children: /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              width: svgWidth,
+              height: svgHeight,
+              viewBox: `0 0 ${svgWidth} ${svgHeight}`,
+              style: { overflow: "visible", display: "block" },
+              "aria-hidden": true,
+              children: [
+                /* @__PURE__ */ jsxs("defs", { children: [
+                  /* @__PURE__ */ jsxs("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
+                    /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#8ab4c8" }),
+                    /* @__PURE__ */ jsx("stop", { offset: "35%", stopColor: "#c8d8e4" }),
+                    /* @__PURE__ */ jsx("stop", { offset: "65%", stopColor: "#e8dcc8" }),
+                    /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#8ab4c8" })
+                  ] }),
+                  /* @__PURE__ */ jsx("path", { id: pathId, d: arcPath, fill: "none" })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "text",
+                  {
+                    fill: `url(#${gradientId})`,
+                    fontFamily: "'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif",
+                    fontSize: appearance.titleFontSize,
+                    fontWeight: 700,
+                    fontStyle: "italic",
+                    letterSpacing: appearance.titleLetterSpacing,
+                    opacity: appearance.titleOpacity,
+                    stroke: "rgba(20,40,60,0.35)",
+                    strokeWidth: 0.6,
+                    paintOrder: "stroke fill",
+                    children: /* @__PURE__ */ jsx("textPath", { href: `#${pathId}`, startOffset: "50%", textAnchor: "middle", children: title.toUpperCase() })
+                  }
+                )
+              ]
+            }
+          )
+        }
+      )
     }
   );
 }
@@ -212,93 +281,130 @@ function StarBillboard({
   previewImageUrl,
   previewContent,
   dimmed,
-  focused
+  focused,
+  visible = true,
+  controlsSlot
 }) {
-  const borderColor = focused ? "rgba(126,184,255,0.65)" : "rgba(126,184,255,0.28)";
-  const opacity = dimmed ? 0.45 : focused ? 1 : 0.88;
-  return /* @__PURE__ */ jsx(
+  if (!visible) return null;
+  const borderColor = focused ? "rgba(126,184,255,0.75)" : "rgba(126,184,255,0.22)";
+  const previewOpacity = focused ? 1 : dimmed ? 0.22 : 0.34;
+  const previewFilter = focused ? "brightness(1.08) saturate(1.1)" : "brightness(0.72) saturate(0.65)";
+  const hasControls = !!(focused && controlsSlot);
+  return /* @__PURE__ */ jsxs(
     Html,
     {
       position: [0, appearance.previewOffsetY, 0],
       center: true,
+      transform: true,
       distanceFactor: appearance.billboardDistanceFactor,
+      zIndexRange: appearance.htmlZIndexRange,
+      occlude: false,
       style: {
         pointerEvents: "none",
-        userSelect: "none",
-        opacity,
-        transition: "opacity 0.35s ease"
+        userSelect: "none"
       },
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          style: {
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            gap: appearance.labelGap
-          },
-          children: [
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                style: {
-                  width: appearance.previewWidth,
-                  height: appearance.previewHeight,
-                  borderRadius: 8,
-                  overflow: "hidden",
-                  border: `1px solid ${borderColor}`,
-                  background: "rgba(4,7,13,0.92)",
-                  boxShadow: focused ? "0 0 24px rgba(126,184,255,0.35)" : "0 4px 20px rgba(0,0,0,0.55)",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center"
-                },
-                children: previewImageUrl ? /* @__PURE__ */ jsx(
-                  "img",
-                  {
-                    src: previewImageUrl,
-                    alt: "",
-                    style: {
-                      width: "100%",
-                      height: "100%",
-                      objectFit: "cover",
-                      display: "block"
+      children: [
+        /* @__PURE__ */ jsx("style", { children: `
+        @keyframes chuziPreviewFocusIn {
+          0% { opacity: 0.4; transform: scale(0.9); filter: brightness(0.8) saturate(0.7); }
+          55% { opacity: 1; transform: scale(1.05); filter: brightness(1.12) saturate(1.15); }
+          100% { opacity: 1; transform: scale(1); filter: brightness(1.08) saturate(1.1); }
+        }
+        @keyframes chuziPreviewFocusOut {
+          0% { opacity: 1; transform: scale(1); }
+          100% { opacity: ${previewOpacity}; transform: scale(0.96); }
+        }
+      ` }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              transform: `translateY(-${appearance.previewHeight / 2}px)`
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    width: appearance.previewWidth,
+                    height: appearance.previewHeight,
+                    borderRadius: hasControls ? "8px 8px 0 0" : 8,
+                    overflow: "hidden",
+                    border: `1px solid ${borderColor}`,
+                    borderBottom: hasControls ? "none" : `1px solid ${borderColor}`,
+                    background: "rgba(4,7,13,0.92)",
+                    boxShadow: focused ? "0 0 28px rgba(126,184,255,0.45), 0 4px 24px rgba(0,0,0,0.5)" : "0 4px 20px rgba(0,0,0,0.55)",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    opacity: previewOpacity,
+                    filter: previewFilter,
+                    transition: "border-color 0.35s ease, box-shadow 0.35s ease",
+                    animation: focused ? "chuziPreviewFocusIn 0.48s cubic-bezier(0.34, 1.45, 0.64, 1) forwards" : "chuziPreviewFocusOut 0.32s ease forwards"
+                  },
+                  children: previewImageUrl ? /* @__PURE__ */ jsx(
+                    "img",
+                    {
+                      src: previewImageUrl,
+                      alt: "",
+                      style: {
+                        width: "100%",
+                        height: "100%",
+                        objectFit: "cover",
+                        display: "block"
+                      }
                     }
-                  }
-                ) : previewContent ?? /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    style: {
-                      width: "100%",
-                      height: "100%",
-                      background: "radial-gradient(ellipse at 30% 20%, rgba(80,120,200,0.2) 0%, rgba(10,14,30,0.95) 70%)"
+                  ) : previewContent ?? /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        width: "100%",
+                        height: "100%",
+                        background: "radial-gradient(ellipse at 30% 20%, rgba(80,120,200,0.2) 0%, rgba(10,14,30,0.95) 70%)"
+                      }
                     }
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                style: {
-                  fontSize: appearance.labelFontSize,
-                  fontWeight: 700,
-                  letterSpacing: appearance.labelLetterSpacing,
-                  textTransform: "uppercase",
-                  color: focused ? "rgba(232,240,255,0.95)" : "rgba(232,240,255,0.72)",
-                  textAlign: "center",
-                  textShadow: "0 2px 12px rgba(0,0,0,0.95)",
-                  whiteSpace: "nowrap",
-                  maxWidth: appearance.previewWidth + 40,
-                  overflow: "hidden",
-                  textOverflow: "ellipsis"
+                  )
                 },
-                children: label
-              }
-            )
-          ]
-        }
-      )
+                focused ? "focused" : "unfocused"
+              ),
+              hasControls ? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    width: appearance.previewWidth,
+                    pointerEvents: "auto",
+                    flexShrink: 0
+                  },
+                  children: controlsSlot
+                }
+              ) : null,
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    marginTop: appearance.labelGap,
+                    fontSize: appearance.labelFontSize,
+                    fontWeight: 700,
+                    letterSpacing: appearance.labelLetterSpacing,
+                    textTransform: "uppercase",
+                    color: "rgba(232,240,255,0.96)",
+                    textAlign: "center",
+                    textShadow: "0 0 18px rgba(0,0,0,0.95), 0 2px 12px rgba(0,0,0,0.95), 0 0 6px rgba(126,184,255,0.25)",
+                    whiteSpace: "nowrap",
+                    maxWidth: appearance.previewWidth + 48,
+                    overflow: "hidden",
+                    textOverflow: "ellipsis"
+                  },
+                  children: label
+                }
+              )
+            ]
+          }
+        )
+      ]
     }
   );
 }
@@ -307,6 +413,7 @@ function Constellation({
   storyTitle,
   edges = [],
   appearance: appearanceOverrides,
+  showOverlays = true,
   onSceneSelect
 }) {
   const appearance = mergeConstellationAppearance(appearanceOverrides);
@@ -323,12 +430,14 @@ function Constellation({
     }
   }
   return /* @__PURE__ */ jsxs("group", { children: [
-    storyTitle && bounds ? /* @__PURE__ */ jsx(
+    showOverlays && storyTitle && bounds ? /* @__PURE__ */ jsx(
       ConstellationTitle,
       {
         title: storyTitle,
         bounds,
-        appearance
+        appearance,
+        arcFrom: scenes[0]?.visual.position,
+        arcTo: scenes[scenes.length - 1]?.visual.position
       }
     ) : null,
     scenes.map((entry, i) => /* @__PURE__ */ jsxs("group", { position: entry.visual.position, children: [
@@ -341,7 +450,7 @@ function Constellation({
           onSelect: onSceneSelect ? () => onSceneSelect(i) : void 0
         }
       ),
-      entry.label || entry.previewImageUrl || entry.previewContent ? /* @__PURE__ */ jsx(
+      showOverlays && (entry.label || entry.previewImageUrl || entry.previewContent) ? /* @__PURE__ */ jsx(
         StarBillboard,
         {
           label: entry.label ?? "",
@@ -349,7 +458,9 @@ function Constellation({
           previewImageUrl: entry.previewImageUrl,
           previewContent: entry.previewContent,
           dimmed: entry.dimmed,
-          focused: entry.focused
+          focused: entry.focused,
+          controlsSlot: entry.controlsSlot,
+          visible: showOverlays
         }
       ) : null
     ] }, entry.id)),