@jjlmoya/utils-tabletop 1.12.0 → 1.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-tabletop",
-    "version": "1.12.0",
+    "version": "1.14.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/tool/scatter-direction-selector/client.ts

@@ -180,11 +180,6 @@ class ScatterSelectorApp {
     const sp = this.root.querySelector('#sds-scatter-pointer') as HTMLElement;
     sp.style.display = 'none';
 
-    const st = this.root.querySelector('#sds-sigil-target') as HTMLElement;
-    const sw = this.root.querySelector('#sds-sigil-warning') as HTMLElement;
-    st.style.display = 'none';
-    sw.style.display = 'none';
-
     this.scatterAngle = this.settings.getMode() ? this.currentAngle : result.angle;
     const angleRad = (this.scatterAngle - 90) * (Math.PI / 180);
     const maxDist = this.getMaxDistance();
@@ -226,6 +221,8 @@ class ScatterSelectorApp {
       this.displayNums.textContent = `${result.distance}"`;
       core.classList.add('sds-warning-result');
       this.sound.play(180, 'sawtooth', 0.35);
+      const distLabel = this.root.querySelector('#sds-warning-dist');
+      if (distLabel) distLabel.textContent = `${result.distance}"`;
 
       sp.style.display = 'block';
       sp.style.transition = 'transform 0.3s ease-out';

package/src/tool/scatter-direction-selector/component.astro

@@ -33,7 +33,7 @@ const { ui } = Astro.props;
       <div class="sds-compass-wrapper">
         <div id="sds-compass" class="sds-compass">
           <div class="sds-compass-ring"></div>
-          <svg class="sds-compass-svg" viewBox="0 0 200 200">
+          <svg class="sds-compass-svg" viewBox="0 0 200 200" preserveAspectRatio="xMidYMid meet">
             <defs>
               <radialGradient id="compass-glow" cx="50%" cy="50%" r="50%">
                 <stop offset="0%" stop-color="var(--sds-glow-inner)" stop-opacity="0.15"></stop>
@@ -55,7 +55,7 @@ const { ui } = Astro.props;
             </svg>
           </div>
           <div class="sds-center-core">
-            <div id="sds-sigil-target" class="sds-sigil" style="display: none;">
+            <div id="sds-sigil-target" class="sds-sigil">
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                 <circle cx="12" cy="12" r="10"></circle>
                 <circle cx="12" cy="12" r="6"></circle>
@@ -64,11 +64,10 @@ const { ui } = Astro.props;
                 <line x1="1" y1="12" x2="23" y2="12"></line>
               </svg>
             </div>
-            <div id="sds-sigil-warning" class="sds-sigil" style="display: none;">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-                <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
-                <line x1="12" y1="9" x2="12" y2="13"></line>
-                <line x1="12" y1="17" x2="12.01" y2="17"></line>
+            <div id="sds-sigil-warning" class="sds-sigil">
+              <svg viewBox="0 0 24 24" fill="none">
+                <circle cx="12" cy="12" r="10.5" stroke="currentColor" stroke-width="0.5" opacity="0.25"></circle>
+                <text id="sds-warning-dist" x="12" y="13" text-anchor="middle" dominant-baseline="central" font-size="10" font-weight="900" stroke="none" fill="currentColor">2"</text>
               </svg>
             </div>
             <div id="sds-digital-display" class="sds-digital-display">

package/src/tool/scatter-direction-selector/scatter-direction-selector.css

@@ -3,6 +3,7 @@
   --sds-accent-rgb: 3, 105, 161;
   --sds-glow-inner: #0284c7;
   --sds-glow-outer: #0ea5e9;
+  --sds-border: #475569;
   --sds-border-glow: rgba(3, 105, 161, 0.2);
   --sds-success: #059669;
   --sds-success-rgb: 5, 150, 105;
@@ -20,6 +21,7 @@
   --sds-accent-rgb: 56, 189, 248;
   --sds-glow-inner: #7dd3fc;
   --sds-glow-outer: #38bdf8;
+  --sds-border: #64748b;
   --sds-border-glow: rgba(56, 189, 248, 0.25);
   --sds-success: #34d399;
   --sds-success-rgb: 52, 211, 153;
@@ -135,6 +137,8 @@
   position: relative;
   width: 300px;
   height: 300px;
+  max-width: 100%;
+  aspect-ratio: 1;
   margin: 0 auto;
 }
 
@@ -175,6 +179,7 @@
   width: 100%;
   height: 100%;
   pointer-events: none;
+  overflow: visible;
 }
 
 .sds-pointer {
@@ -388,36 +393,51 @@
   background: var(--bg-surface);
   border: 1px solid var(--border-color);
   color: var(--text-base);
-  font-size: 0.9rem;
-  padding: 0.65rem 1rem;
-  border-radius: 8px;
+  font-size: 0.85rem;
+  font-weight: 600;
+  padding: 0.7rem 2.5rem 0.7rem 1rem;
+  border-radius: 10px;
   outline: none;
   cursor: pointer;
   appearance: none;
-  transition: border-color 0.2s, box-shadow 0.2s;
+  letter-spacing: 0.3px;
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
+  transition: border-color 0.2s, box-shadow 0.25s, background 0.2s;
 }
 
 .sds-select:hover {
   border-color: var(--sds-accent);
+  background: var(--bg-page);
 }
 
 .sds-select:focus {
   border-color: var(--sds-accent);
-  box-shadow: 0 0 10px rgba(var(--sds-accent-rgb), 0.15);
+  box-shadow: 0 0 0 3px rgba(var(--sds-accent-rgb), 0.12), inset 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+.sds-select option {
+  background: var(--bg-surface);
+  color: var(--text-base);
+  font-weight: 500;
+  padding: 0.5rem;
 }
 
 .sds-select-wrapper::after {
-  content: '';
+  content: '\25BC';
   position: absolute;
-  right: 1rem;
+  right: 0.85rem;
   top: 50%;
   transform: translateY(-50%);
-  width: 0;
-  height: 0;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-  border-top: 5px solid var(--text-muted);
+  font-size: 0.55rem;
+  color: var(--sds-accent);
   pointer-events: none;
+  opacity: 0.7;
+  transition: opacity 0.2s, transform 0.2s;
+}
+
+.sds-select-wrapper:hover::after {
+  opacity: 1;
+  transform: translateY(-50%) scale(1.1);
 }
 
 .sds-input {