@ihabdevteam/core 0.15.1 → 0.16.0

package/dist/ihabdevteam-core.d.ts

@@ -4952,7 +4952,7 @@ export declare const SHORT_STORIES: unknown[];
  * <ShortcutBadge keys={['Ctrl', 'S']} anchor="static" />
  * @public
  */
-export declare function ShortcutBadge({ keys, anchor, className, }: ShortcutBadgeProps): JSX.Element;
+export declare function ShortcutBadge({ keys, anchor, scale, className, }: ShortcutBadgeProps): JSX.Element;
 
 /** 부모 코너 배치. static 은 흐름 배치. @public */
 export declare type ShortcutBadgeAnchor = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'static';
@@ -4966,6 +4966,17 @@ export declare interface ShortcutBadgeProps {
      * 코너에서 살짝 안쪽으로 들어오게 얹힌다. static 이면 흐름 안에 배치.
      */
     anchor?: ShortcutBadgeAnchor;
+    /**
+     * 배지 크기 배율. 1 이 기본(키캡 한 변 24px).
+     *
+     * 배지는 고정 크기라, 큰 버튼 위에 얹으면 잃어버리고 작은 버튼 위에서는 덮는다.
+     * 그럴 때 부르는 쪽이 정한다.
+     *
+     * **`transform` 으로 키우지 말 것** — 배지가 모서리에 걸치는 `translate` 와 같은
+     * 속성이라 한쪽이 다른 쪽을 통째로 지운다. 이 prop 은 `--shortcut-badge-scale` 로
+     * 내려가고, 자리와 배율은 CSS 한 곳에서 합쳐 적힌다.
+     */
+    scale?: number;
     className?: string;
 }
 
@@ -5108,7 +5119,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, shortcutAnchor, }: SoundCompassProps): JSX.Element;
+export declare function SoundCompass({ speakers, size, viewT, activeSpeakerId, playedIds, selectedId, answerId, showFeedback, clickable, onSelectSpeaker, buttonSize, showIcon, shortcutAnchor, shortcutScale, }: SoundCompassProps): JSX.Element;
 
 export declare interface SoundCompassExam {
     /** `<SoundCompass {...bind} />` 로 펼쳐 넣는 제어 props */
@@ -5189,6 +5200,14 @@ export declare interface SoundCompassProps {
      * 배지 전부에 같이 걸린다 — 스피커마다 다른 자리에 두면 눈이 규칙을 못 잡는다.
      */
     shortcutAnchor?: ShortcutBadgeAnchor;
+    /**
+     * 배지 크기 배율. 안 주면 버튼 크기에서 스스로 정한다
+     * (`clamp(0.75, buttonSize / 56, 3)` — 묶이지 않는 동안 버튼 대비 0.43 으로 일정).
+     *
+     * 스스로 정하는 값이 안 맞는 자리가 있다. 상한에 붙으면 더 큰 버튼에서 배지가
+     * 작아지고, 상한을 올려도 다음 소비자가 또 그 끝에서 막힌다. 그럴 때 직접 준다.
+     */
+    shortcutScale?: number;
 }
 
 /**

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

@@ -10,6 +10,17 @@ export interface ShortcutBadgeProps {
      * 코너에서 살짝 안쪽으로 들어오게 얹힌다. static 이면 흐름 안에 배치.
      */
     anchor?: ShortcutBadgeAnchor;
+    /**
+     * 배지 크기 배율. 1 이 기본(키캡 한 변 24px).
+     *
+     * 배지는 고정 크기라, 큰 버튼 위에 얹으면 잃어버리고 작은 버튼 위에서는 덮는다.
+     * 그럴 때 부르는 쪽이 정한다.
+     *
+     * **`transform` 으로 키우지 말 것** — 배지가 모서리에 걸치는 `translate` 와 같은
+     * 속성이라 한쪽이 다른 쪽을 통째로 지운다. 이 prop 은 `--shortcut-badge-scale` 로
+     * 내려가고, 자리와 배율은 CSS 한 곳에서 합쳐 적힌다.
+     */
+    scale?: number;
     className?: string;
 }
 /**
@@ -28,4 +39,4 @@ export interface ShortcutBadgeProps {
  * <ShortcutBadge keys={['Ctrl', 'S']} anchor="static" />
  * @public
  */
-export default function ShortcutBadge({ keys, anchor, className, }: ShortcutBadgeProps): import("react").JSX.Element;
+export default function ShortcutBadge({ keys, anchor, scale, className, }: ShortcutBadgeProps): import("react").JSX.Element;

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

@@ -17,7 +17,7 @@ import './ShortcutBadge.css';
  * <ShortcutBadge keys={['Ctrl', 'S']} anchor="static" />
  * @public
  */
-export default function ShortcutBadge({ keys, anchor = 'top-right', className = '', }) {
+export default function ShortcutBadge({ keys, anchor = 'top-right', scale, className = '', }) {
     const list = Array.isArray(keys) ? keys : [keys];
-    return (_jsx("span", { className: cx('shortcut-badge', `shortcut-badge--${anchor}`, className), children: list.map((key, index) => (_jsxs("span", { className: "shortcut-badge__group", children: [index > 0 && _jsx("span", { className: "shortcut-badge__plus", children: "+" }), _jsx("kbd", { className: "shortcut-badge__key", children: key })] }, `${key}-${index}`))) }));
+    return (_jsx("span", { className: cx('shortcut-badge', `shortcut-badge--${anchor}`, className), style: scale === undefined ? undefined : { ['--shortcut-badge-scale']: String(scale) }, children: list.map((key, index) => (_jsxs("span", { className: "shortcut-badge__group", children: [index > 0 && _jsx("span", { className: "shortcut-badge__plus", children: "+" }), _jsx("kbd", { className: "shortcut-badge__key", children: key })] }, `${key}-${index}`))) }));
 }

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

@@ -44,6 +44,14 @@ export interface SoundCompassProps {
      * 배지 전부에 같이 걸린다 — 스피커마다 다른 자리에 두면 눈이 규칙을 못 잡는다.
      */
     shortcutAnchor?: ShortcutBadgeAnchor;
+    /**
+     * 배지 크기 배율. 안 주면 버튼 크기에서 스스로 정한다
+     * (`clamp(0.75, buttonSize / 56, 3)` — 묶이지 않는 동안 버튼 대비 0.43 으로 일정).
+     *
+     * 스스로 정하는 값이 안 맞는 자리가 있다. 상한에 붙으면 더 큰 버튼에서 배지가
+     * 작아지고, 상한을 올려도 다음 소비자가 또 그 끝에서 막힌다. 그럴 때 직접 준다.
+     */
+    shortcutScale?: number;
 }
 /** @public */
-export default function SoundCompass({ speakers, size, viewT, activeSpeakerId, playedIds, selectedId, answerId, showFeedback, clickable, onSelectSpeaker, buttonSize, showIcon, shortcutAnchor, }: SoundCompassProps): import("react").JSX.Element;
+export default function SoundCompass({ speakers, size, viewT, activeSpeakerId, playedIds, selectedId, answerId, showFeedback, clickable, onSelectSpeaker, buttonSize, showIcon, shortcutAnchor, shortcutScale, }: 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, shortcutAnchor = 'top-right', }) {
+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', shortcutScale, }) {
     const t = Math.max(0, Math.min(1, viewT));
     const CENTER = size / 2;
     // ── 탑뷰 좌표 ──────────────────────────────────────────────────────────
@@ -161,9 +161,13 @@ export default function SoundCompass({ speakers, size = 300, viewT = 0, activeSp
                         // 104~168px 을 쓰는 소비 앱에서 배지가 0.37 → 0.23 으로 다시 작아졌다.
                         // 3 이면 168px 까지 묶이지 않는다. 하한 0.75 는 배지가 읽히는 크기다.
                         //
+                        // 그래도 이 식이 안 맞는 자리는 남는다 — 상한을 올려도 다음 소비자가 또
+                        // 그 끝에서 막힌다. 그래서 `shortcutScale` 로 직접 줄 수 있게 열어 두고,
+                        // 안 주면 이 식이 그대로 쓰인다.
+                        //
                         // 배율은 transform 이 아니라 변수로 넘긴다 — 배지의 anchor 가 같은 속성에
                         // translate 를 걸고 있어, 여기서 transform 을 걸면 그것을 지운다.
-                        ['--shortcut-badge-scale']: String(Math.max(0.75, Math.min(3, buttonSize / 56))),
+                        ['--shortcut-badge-scale']: String(shortcutScale ?? Math.max(0.75, Math.min(3, buttonSize / 56))),
                         pointerEvents: (clickable ? 'auto' : 'none'),
                         cursor: clickable ? 'pointer' : 'default',
                         // 호출된(=idle이 아닌) 스피커를 다른 스피커 위로 끌어올렸다가, 초기화되면 다시 낮춘다

package/package.json

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