/* 라이브러리 공용 헬퍼 — 잉크색(톤다운 블랙) · 더블클릭 편집 · 흰배경 템플릿 */
(function () { // module scope - Babel standalone runs scripts in shared global scope
const DMUTE = 'var(--cc-mute, #6f6878)'; // 보조 텍스트(그레이)
const INK = 'var(--cc-ink, #2b2630)'; // 본문 텍스트(톤다운 블랙)
window.DDayTweakCtx = React.createContext({});
/* 공통 브랜드 내용 공유 (행사명·날짜·장소·주최) */
window.GContentCtx = React.createContext({ brand: '제16회 한국잼버리', dateRange: '2026. 8. 5 – 8. 9', place: '강원 세계잼버리수련장', org: '한국스카우트연맹', openLine: '2026. 8. 5 개영' });
function Kicker({ children, c, style, ek }) {
const st = { fontWeight: 500, fontSize: 27, letterSpacing: '.14em', color: c, textTransform: 'uppercase', ...style };
return ek
? {children}
: {children}
;
}
/* 카테고리 컬러칩 — 기본: 솔리드 키컬러(본문 우상단, 표지색과 매칭) / dot: 흰 알약+점(표지용) */
const CHIP_LIGHT = ['#FFAE80', '#9FED8F', '#82E6DE', '#FF8DFF'];
/* 카테고리 칩 — 통일된 형태: 흰 알약 + 점(카테고리색) + 텍스트.
* 세트 공통 오버라이드: chipBg(알약 배경)·chipInk(글씨)·chipText(내용). */
function CategoryChip({ label, color, top, right, bottom, left, dot, ek }) {
const tw = React.useContext(window.DDayTweakCtx) || {};
const gBg = tw.chipBg || '', gInk = tw.chipInk || '', gText = tw.chipText || '';
// 기본: 흰 알약 + 칩 색 점 + 칩 색 글씨(글씨색=칩 색). 표지(dot): 글씨/배경 역배색(칩 색 알약 + 흰 글씨).
const inv = !!dot;
const pillBg = gBg || (inv ? color : '#fff');
const ink = gInk || (inv ? '#fff' : color);
const dotC = ink; // 점 색 = 글씨 색 (항상 일치)
const ds = { fontSize: 26, fontWeight: 700, color: ink, letterSpacing: '.01em' };
return (
{gText ? {gText}
: (ek ? {label}
: {label})}
);
}
/* 더블클릭 인라인 편집 + 우측 폼 자동등록 (둘 다 CCStore 텍스트로 공유)
* flabel: 우측 폼 라벨(짧게). 없으면 기본 텍스트를 라벨로 사용. */
function Editable({ ekey, tag = 'span', flabel, className, style, children, nowrap, shadow }) {
const Tag = tag;
const store = useCCStore();
const register = React.useContext(window.CCRegisterFieldCtx);
const K = React.useContext(window.CCScope) + ekey; // 덱 인스턴스 접두사
const ref = React.useRef(null);
const [editing, setEditing] = React.useState(false);
const stored = store.getText(K);
const display = stored != null ? stored : children;
const colOv = store.getProp('txtcol', K, ''); // 글자색 오버라이드(사진 위 텍스트 등)
const shOn = shadow || store.getProp('txtsh', K, '') === '1'; // 드롭섀도(사진 위 가독성)
React.useEffect(() => {
if (register) register(K, flabel || textOf(children), textOf(children));
}, [K]); // eslint-disable-line
// 글자크기 일괄 트윅: 숫자 px → calc(px * --cc-fz)로 변환 (내용 텍스트 전체 스케일)
const fz = (style && typeof style.fontSize === 'number') ? `calc(${style.fontSize}px * var(--cc-fz, 1))` : (style ? style.fontSize : undefined);
return (
{ e.stopPropagation(); setEditing(true); requestAnimationFrame(() => { const el = ref.current; if (!el) return; el.focus(); try { const r = document.createRange(); r.selectNodeContents(el); const s = getSelection(); s.removeAllRanges(); s.addRange(r); } catch (_) { } }); }}
onBlur={(e) => { store.setText(K, e.currentTarget.innerText.replace(/\n$/, '')); setEditing(false); }}
onKeyDown={(e) => { if (e.key === 'Escape') { e.preventDefault(); e.currentTarget.blur(); } }}
>{display}
);
}
function EdgeStitch({ fill, band = 36, top, bottom, style }) {
return
;
}
function FooterBand({ bg = PAL.midnight, color = '#fff', left, right, h = 146, style, brandFoot }) {
const gc = React.useContext(window.GContentCtx) || {};
const L = brandFoot ? gc.brand : left;
const R = brandFoot ? gc.openLine : right;
return (
{L}{R}
);
}
/* 흰배경 콘텐츠 — 도형아이콘 리스트 (편집 가능) */
function TopicList({ ek = 'list', kicker, title, kc = PAL.ocean, tab, items, cat }) {
return (
{cat && }
{tab && }
{kicker}
{title}
{items.map((x, i) => (
))}
{kicker}
{title}
{body}
);
}
/* 콘텐츠 자동 푸터 — 덱의 표지 기준 제목·색, 우측에 페이지번호. CCFooterCtx=null이면 숨김.
* 표지·D-피드(자체 푸터/레이아웃)에는 미장착, 본문/소식 카드에만 장착한다. */
function AutoFooter() {
const f = React.useContext(window.CCFooterCtx);
if (!f) return null;
return (
{f.title}
{f.page ? {f.page} / {f.total} : null}
);
}
Object.assign(window, { DMUTE, INK, Kicker, CategoryChip, Editable, EdgeStitch, FooterBand, TopicList, TopicIntro, AutoFooter });
})();