@ihabdevteam/core 0.15.0 → 0.15.1

package/dist/ihabdevteam-core.d.ts

@@ -5108,7 +5108,7 @@ export declare interface SliderProps {
 export declare function sortToValue(key: string, asc: boolean): string | undefined;
 
 /** @public */
-export declare function SoundCompass({ speakers, size, viewT, activeSpeakerId, playedIds, selectedId, answerId, showFeedback, clickable, onSelectSpeaker, buttonSize, showIcon, }: SoundCompassProps): JSX.Element;
+export declare function SoundCompass({ speakers, size, viewT, activeSpeakerId, playedIds, selectedId, answerId, showFeedback, clickable, onSelectSpeaker, buttonSize, showIcon, shortcutAnchor, }: SoundCompassProps): JSX.Element;
 
 export declare interface SoundCompassExam {
     /** `<SoundCompass {...bind} />` 로 펼쳐 넣는 제어 props */
@@ -5183,6 +5183,12 @@ export declare interface SoundCompassProps {
     buttonSize?: number;
     /** 스피커 버튼에 아이콘을 표시할지 여부. false면 숫자만 가운데 표시. 기본 true */
     showIcon?: boolean;
+    /**
+     * `speakers[].shortcut` 배지가 버튼의 어느 모서리에 붙을지. 기본 우상단.
+     *
+     * 배지 전부에 같이 걸린다 — 스피커마다 다른 자리에 두면 눈이 규칙을 못 잡는다.
+     */
+    shortcutAnchor?: ShortcutBadgeAnchor;
 }
 
 /**

package/dist/packages/core/src/components/ShortcutBadge.css

@@ -9,29 +9,35 @@
 }
 
 /* 코너 배치 — 중심이 부모 코너에서 살짝 안쪽(25%)으로 들어오게 얹힌다. */
+/* 배지를 키우려면 `--shortcut-badge-scale` 을 부모에 얹는다.
+   **transform 을 따로 걸면 안 된다** — 자리를 잡는 translate 와 같은 속성이라
+   뒤에 오는 쪽이 앞의 것을 통째로 지운다. 실제로 그 사고가 났다: SoundCompass 가
+   배지에 scale 을 따로 걸었더니 anchor 의 translate 가 사라져 배지가 모서리에
+   걸치지 않고 버튼 안으로 들어왔다(실측: 걸침 +6px → -3px). 그래서 배율을
+   변수로 받아 **여기 한 곳에서** 합쳐 적는다. */
 .shortcut-badge--top-left {
   position: absolute;
   left: 0;
   top: 0;
-  transform: translate(-25%, -25%);
+  transform: translate(-25%, -25%) scale(var(--shortcut-badge-scale, 1));
 }
 .shortcut-badge--top-right {
   position: absolute;
   right: 0;
   top: 0;
-  transform: translate(25%, -25%);
+  transform: translate(25%, -25%) scale(var(--shortcut-badge-scale, 1));
 }
 .shortcut-badge--bottom-left {
   position: absolute;
   left: 0;
   bottom: 0;
-  transform: translate(-25%, 25%);
+  transform: translate(-25%, 25%) scale(var(--shortcut-badge-scale, 1));
 }
 .shortcut-badge--bottom-right {
   position: absolute;
   right: 0;
   bottom: 0;
-  transform: translate(25%, 25%);
+  transform: translate(25%, 25%) scale(var(--shortcut-badge-scale, 1));
 }
 /* static — 흐름 안에 배치(별도 규칙 없음, position: static 기본). */
 

package/dist/packages/core/src/components/SoundCompass.css

@@ -162,9 +162,8 @@
 .sound-compass__speaker-shortcut {
   pointer-events: none;
   z-index: 2;
-  /* 모서리에 걸친 채로 자라도록 가운데를 기준으로 키운다. */
-  transform: scale(var(--sc-shortcut-scale, 1));
-  transform-origin: center;
+  /* 배율은 `--shortcut-badge-scale` 로 넘긴다. 여기서 transform 을 걸면 배지가
+     자리를 잡는 translate 를 지운다 — 같은 속성이라 뒤에 오는 쪽이 이긴다. */
 }
 
 .sound-compass__speaker-pos {

package/dist/packages/core/src/components/SoundCompass.d.ts

@@ -1,3 +1,4 @@
+import { type ShortcutBadgeAnchor } from './ShortcutBadge';
 import type { SpeakerPos } from '../types/audio';
 import './SoundCompass.css';
 /** @public */
@@ -37,6 +38,12 @@ export interface SoundCompassProps {
     buttonSize?: number;
     /** 스피커 버튼에 아이콘을 표시할지 여부. false면 숫자만 가운데 표시. 기본 true */
     showIcon?: boolean;
+    /**
+     * `speakers[].shortcut` 배지가 버튼의 어느 모서리에 붙을지. 기본 우상단.
+     *
+     * 배지 전부에 같이 걸린다 — 스피커마다 다른 자리에 두면 눈이 규칙을 못 잡는다.
+     */
+    shortcutAnchor?: ShortcutBadgeAnchor;
 }
 /** @public */
-export default function SoundCompass({ speakers, size, viewT, activeSpeakerId, playedIds, selectedId, answerId, showFeedback, clickable, onSelectSpeaker, buttonSize, showIcon, }: SoundCompassProps): import("react").JSX.Element;
+export default function SoundCompass({ speakers, size, viewT, activeSpeakerId, playedIds, selectedId, answerId, showFeedback, clickable, onSelectSpeaker, buttonSize, showIcon, shortcutAnchor, }: SoundCompassProps): import("react").JSX.Element;

package/dist/packages/core/src/components/SoundCompass.js

@@ -14,7 +14,7 @@ import ShortcutBadge from './ShortcutBadge';
 import './SoundCompass.css';
 const lerp = (a, b, t) => a + (b - a) * t;
 /** @public */
-export default function SoundCompass({ speakers, size = 300, viewT = 0, activeSpeakerId = null, playedIds, selectedId = null, answerId = null, showFeedback = false, clickable = false, onSelectSpeaker, buttonSize = 40, showIcon = true, }) {
+export default function SoundCompass({ speakers, size = 300, viewT = 0, activeSpeakerId = null, playedIds, selectedId = null, answerId = null, showFeedback = false, clickable = false, onSelectSpeaker, buttonSize = 40, showIcon = true, shortcutAnchor = 'top-right', }) {
     const t = Math.max(0, Math.min(1, viewT));
     const CENTER = size / 2;
     // ── 탑뷰 좌표 ──────────────────────────────────────────────────────────
@@ -152,12 +152,18 @@ export default function SoundCompass({ speakers, size = 300, viewT = 0, activeSp
                     const state = getSpeakerState(sp);
                     const pulse = shouldPulse(sp);
                     const baseStyle = {
-                        // 배지는 24px 고정인데 버튼은 40~112px 을 오간다. 그대로 두면 버튼 대비
-                        // 0.60배에서 0.21배까지 세 배가 흔들려, 작은 버튼에서는 배지가 버튼을 덮고
-                        // 큰 버튼에서는 잃어버린다(실측). 버튼과 함께 자라게 하되 양끝을 묶어
-                        // 0.34~0.45배 안에 머문다. ShortcutBadge 는 style 을 받지 않으므로
-                        // 감싼 자리에 변수를 얹고 CSS 가 읽어 간다.
-                        ['--sc-shortcut-scale']: String(Math.max(0.75, Math.min(1.6, buttonSize / 56))),
+                        // 배지는 24px 고정인데 버튼은 크게 오간다. 그대로 두면 버튼 대비 비율이
+                        // 세 배씩 흔들려, 작은 버튼에서는 배지가 버튼을 덮고 큰 버튼에서는
+                        // 잃어버린다(실측). 버튼과 함께 키운다 — 24/56 이라 묶이지 않는 구간에서는
+                        // 비율이 0.43 으로 **일정하다**.
+                        //
+                        // 상한은 3 이다. 처음엔 1.6 이었는데 buttonSize 89.6px 부터 붙어버려,
+                        // 104~168px 을 쓰는 소비 앱에서 배지가 0.37 → 0.23 으로 다시 작아졌다.
+                        // 3 이면 168px 까지 묶이지 않는다. 하한 0.75 는 배지가 읽히는 크기다.
+                        //
+                        // 배율은 transform 이 아니라 변수로 넘긴다 — 배지의 anchor 가 같은 속성에
+                        // translate 를 걸고 있어, 여기서 transform 을 걸면 그것을 지운다.
+                        ['--shortcut-badge-scale']: String(Math.max(0.75, Math.min(3, buttonSize / 56))),
                         pointerEvents: (clickable ? 'auto' : 'none'),
                         cursor: clickable ? 'pointer' : 'default',
                         // 호출된(=idle이 아닌) 스피커를 다른 스피커 위로 끌어올렸다가, 초기화되면 다시 낮춘다
@@ -169,6 +175,6 @@ export default function SoundCompass({ speakers, size = 300, viewT = 0, activeSp
                     const iconSize = Math.round(Math.max(10, Math.min(56, BTN * 0.38)));
                     const numberSize = Math.round(Math.max(7, Math.min(18, BTN * 0.2)));
                     const numberOnlySize = Math.round(Math.max(10, Math.min(56, BTN * 0.4)));
-                    return (_jsxs("div", { className: "sound-compass__speaker-pos", style: { ...baseStyle, left: x - BTN / 2, top: y - BTN / 2 }, children: [pulse && _jsx("div", { className: "sound-compass__pulse", style: { width: BTN, height: BTN } }), _jsxs("button", { type: "button", tabIndex: clickable ? 0 : -1, "aria-disabled": clickable ? undefined : true, onClick: clickable ? () => onSelectSpeaker?.(sp.id) : undefined, className: `sound-compass__speaker-btn sound-compass__speaker-btn--${state}`, style: { width: BTN, height: BTN }, "aria-label": sp.label, children: [showIcon && getStateIcon(state, iconSize), _jsx("span", { className: "sound-compass__speaker-number", style: { fontSize: showIcon ? numberSize : numberOnlySize }, children: idx + 1 })] }), sp.shortcut && (_jsx(ShortcutBadge, { keys: sp.shortcut, anchor: "top-right", className: "sound-compass__speaker-shortcut" }))] }, sp.id));
+                    return (_jsxs("div", { className: "sound-compass__speaker-pos", style: { ...baseStyle, left: x - BTN / 2, top: y - BTN / 2 }, children: [pulse && _jsx("div", { className: "sound-compass__pulse", style: { width: BTN, height: BTN } }), _jsxs("button", { type: "button", tabIndex: clickable ? 0 : -1, "aria-disabled": clickable ? undefined : true, onClick: clickable ? () => onSelectSpeaker?.(sp.id) : undefined, className: `sound-compass__speaker-btn sound-compass__speaker-btn--${state}`, style: { width: BTN, height: BTN }, "aria-label": sp.label, children: [showIcon && getStateIcon(state, iconSize), _jsx("span", { className: "sound-compass__speaker-number", style: { fontSize: showIcon ? numberSize : numberOnlySize }, children: idx + 1 })] }), sp.shortcut && (_jsx(ShortcutBadge, { keys: sp.shortcut, anchor: shortcutAnchor, className: "sound-compass__speaker-shortcut" }))] }, sp.id));
                 })] }) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ihabdevteam/core",
-  "version": "0.15.0",
+  "version": "0.15.1",
   "private": false,
   "main": "dist/ihabdevteam-core.cjs.js",
   "module": "dist/ihabdevteam-core.esm.js",