@etamong-playground/ui 0.34.2

package/dist/helpers.cjs

@@ -0,0 +1,137 @@
+'use strict';
+
+// src/keywords.ts
+function crossLocaleKeywords(dicts, getter) {
+  return dicts.map(getter).filter(Boolean).join(" ");
+}
+function isInputTarget(e) {
+  const t = e.target;
+  if (!t) return false;
+  return t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.tagName === "SELECT" || t.isContentEditable;
+}
+var CODE_TO_KEY = {
+  Slash: "/",
+  KeyG: "g",
+  KeyH: "h",
+  KeyK: "k",
+  KeyS: "s",
+  KeyN: "n",
+  KeyT: "t",
+  KeyM: "m",
+  KeyP: "p"
+};
+function shortcutKey(e) {
+  const isAscii = e.key === "/" || e.key === "?" || /^[a-z]$/.test(e.key);
+  return isAscii ? e.key : CODE_TO_KEY[e.code] ?? e.key;
+}
+var COMMAND_PALETTE_OPEN_EVENT = "command-palette:open";
+function openCommandPalette() {
+  document.dispatchEvent(new CustomEvent(COMMAND_PALETTE_OPEN_EVENT));
+}
+
+// src/theme.ts
+function storageKey(appKey) {
+  return `${appKey}-theme`;
+}
+function noFlashThemeScript(appKey) {
+  return `(function(){try{var k=${JSON.stringify(storageKey(appKey))};var s=localStorage.getItem(k);var d=s;if(d!=="light"&&d!=="dark"){d=(window.matchMedia&&window.matchMedia("(prefers-color-scheme: light)").matches)?"light":"dark";}document.documentElement.setAttribute("data-theme",d);}catch(e){}})();`;
+}
+function getTheme(appKey) {
+  try {
+    const saved = localStorage.getItem(storageKey(appKey));
+    if (saved === "light" || saved === "dark") return saved;
+  } catch {
+  }
+  if (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: light)").matches) {
+    return "light";
+  }
+  return "dark";
+}
+function setTheme(appKey, theme) {
+  try {
+    localStorage.setItem(storageKey(appKey), theme);
+  } catch {
+  }
+  document.documentElement.setAttribute("data-theme", theme);
+}
+
+// src/i18nCore.ts
+var SUPPORTED_LOCALES = ["ko", "en"];
+function storageKey2(appKey) {
+  return `${appKey}-locale`;
+}
+function detectSystemLocale() {
+  if (typeof navigator === "undefined") return "en";
+  const candidates = [];
+  if (Array.isArray(navigator.languages)) {
+    candidates.push(...navigator.languages);
+  } else if (typeof navigator.language === "string") {
+    candidates.push(navigator.language);
+  }
+  for (const raw of candidates) {
+    const tag = raw.toLowerCase();
+    if (tag === "ko" || tag.startsWith("ko-")) return "ko";
+    if (tag === "en" || tag.startsWith("en-")) return "en";
+  }
+  return "en";
+}
+function getLocale(appKey) {
+  try {
+    const saved = localStorage.getItem(storageKey2(appKey));
+    if (saved === "ko" || saved === "en") return saved;
+  } catch {
+  }
+  return detectSystemLocale();
+}
+function setLocale(appKey, locale) {
+  try {
+    localStorage.setItem(storageKey2(appKey), locale);
+  } catch {
+  }
+  if (typeof document !== "undefined") {
+    document.documentElement.setAttribute("lang", locale);
+  }
+}
+function noFlashLocaleScript(appKey) {
+  return `(function(){try{var k=${JSON.stringify(storageKey2(appKey))};var s=localStorage.getItem(k);var l=s;if(l!=="ko"&&l!=="en"){l="en";var langs=(navigator.languages&&navigator.languages.length?navigator.languages:[navigator.language||""]);for(var i=0;i<langs.length;i++){var t=(langs[i]||"").toLowerCase();if(t==="ko"||t.indexOf("ko-")===0){l="ko";break;}if(t==="en"||t.indexOf("en-")===0){l="en";break;}}}document.documentElement.setAttribute("lang",l);}catch(e){}})();`;
+}
+function interpolate(template, vars) {
+  if (!vars) return template;
+  return template.replace(/\{(\w+)\}/g, (m, k) => {
+    const v = vars[k];
+    return v === void 0 || v === null ? m : String(v);
+  });
+}
+
+// src/viewportCore.ts
+var TABLET_MIN = 720;
+var DESKTOP_MIN = 1024;
+function tierForWidth(w) {
+  if (w >= DESKTOP_MIN) return "desktop";
+  if (w >= TABLET_MIN) return "tablet";
+  return "mobile";
+}
+function getViewport() {
+  if (typeof window === "undefined") return "desktop";
+  return tierForWidth(window.innerWidth);
+}
+var noFlashViewportScript = `(function(){try{var w=window.innerWidth||document.documentElement.clientWidth;var v="mobile";if(w>=${DESKTOP_MIN})v="desktop";else if(w>=${TABLET_MIN})v="tablet";document.documentElement.setAttribute("data-vp",v);}catch(e){}})();`;
+
+exports.CODE_TO_KEY = CODE_TO_KEY;
+exports.COMMAND_PALETTE_OPEN_EVENT = COMMAND_PALETTE_OPEN_EVENT;
+exports.DESKTOP_MIN = DESKTOP_MIN;
+exports.SUPPORTED_LOCALES = SUPPORTED_LOCALES;
+exports.TABLET_MIN = TABLET_MIN;
+exports.crossLocaleKeywords = crossLocaleKeywords;
+exports.getLocale = getLocale;
+exports.getTheme = getTheme;
+exports.getViewport = getViewport;
+exports.interpolate = interpolate;
+exports.isInputTarget = isInputTarget;
+exports.noFlashLocaleScript = noFlashLocaleScript;
+exports.noFlashThemeScript = noFlashThemeScript;
+exports.noFlashViewportScript = noFlashViewportScript;
+exports.openCommandPalette = openCommandPalette;
+exports.setLocale = setLocale;
+exports.setTheme = setTheme;
+exports.shortcutKey = shortcutKey;

package/dist/helpers.d.cts

@@ -0,0 +1,96 @@
+/**
+ * Concatenate one label across every locale dictionary so cmdk search matches
+ * regardless of the active language — a Korean user typing an English term (or
+ * vice-versa) still finds the item. This is mandatory in a ko-first ecosystem.
+ *
+ * @example
+ *   import ko from "./locales/ko";
+ *   import en from "./locales/en";
+ *   const dicts = [ko, en];
+ *   crossLocaleKeywords(dicts, (d) => d.nav.schedules) // "일정 Schedules"
+ */
+declare function crossLocaleKeywords<D>(dicts: readonly D[], getter: (dict: D) => string): string;
+/** True when the keyboard event originates from a text-entry control. */
+declare function isInputTarget(e: KeyboardEvent): boolean;
+/**
+ * Map physical key codes to logical keys so shortcuts survive a Korean IME:
+ * when an IME is active `e.key` is a Hangul syllable, not the Latin letter, so
+ * single-letter shortcuts must fall back to `e.code`.
+ */
+declare const CODE_TO_KEY: Readonly<Record<string, string>>;
+/**
+ * Resolve the logical shortcut key for an event. Prefers `e.key` when it is
+ * already an ASCII shortcut (`/`, `?`, or a–z); otherwise falls back to the
+ * physical-code map (covers IME output).
+ */
+declare function shortcutKey(e: KeyboardEvent): string;
+/** The custom DOM event any UI affordance can dispatch to open the palette. */
+declare const COMMAND_PALETTE_OPEN_EVENT = "command-palette:open";
+/** Dispatch `command-palette:open` so a button/menu can open the palette. */
+declare function openCommandPalette(): void;
+
+/**
+ * Theme helpers for the `[data-theme]` mechanism that styles.css implements.
+ *
+ * `data-theme` must be set on <html> BEFORE first paint, or the page flashes
+ * the default theme before flipping to the user's choice. Inject
+ * `noFlashThemeScript` synchronously in <head> — for Next, in a <script
+ * dangerouslySetInnerHTML>; for a Vite app, inline in index.html.
+ *
+ * Resolution order (matches the fleet rule in
+ * planning/wiki/concepts/theme-system-dark-fallback.md):
+ *
+ *   1. saved user choice in localStorage
+ *   2. OS preference via `prefers-color-scheme`
+ *   3. dark — the fleet-wide fallback when we can't tell
+ *
+ * Prior to v0.28 the fallback was "light"; the fleet now treats dark as
+ * the audience-of-record default (most surfaces are dark; designs assume
+ * dark first).
+ */
+type Theme = "light" | "dark";
+/**
+ * A self-contained <head> snippet (no deps) that sets `data-theme` from the
+ * saved choice, falling back to the OS preference, then dark. Pass the same
+ * `appKey` you pass to `getTheme`/`setTheme`.
+ */
+declare function noFlashThemeScript(appKey: string): string;
+/** Read the active theme (saved choice → OS preference → dark). */
+declare function getTheme(appKey: string): Theme;
+/** Persist and apply a theme to <html>. */
+declare function setTheme(appKey: string, theme: Theme): void;
+
+/**
+ * React-free i18n primitives — safe to import from `helpers.ts`, server
+ * runtimes, or the index.html-adjacent script that emits the no-flash
+ * snippet. The React provider/hooks live in `i18n.tsx` and re-export
+ * everything from here.
+ */
+type Locale = "ko" | "en";
+declare const SUPPORTED_LOCALES: Locale[];
+type Messages = Record<string, string>;
+type MessageBundle = Record<Locale, Messages>;
+/** Read the active locale (saved choice → system → "en"). */
+declare function getLocale(appKey: string): Locale;
+/** Persist and apply a locale to <html lang>. */
+declare function setLocale(appKey: string, locale: Locale): void;
+/**
+ * <head> snippet (no deps) that sets <html lang> from the saved choice,
+ * falling back to system languages, then "en".
+ */
+declare function noFlashLocaleScript(appKey: string): string;
+/** Render `{name}` placeholders. Unknown placeholders pass through. */
+declare function interpolate(template: string, vars?: Record<string, string | number>): string;
+
+/**
+ * React-free viewport primitives — safe to import from `helpers.ts`.
+ * React provider/hook lives in `viewport.tsx`.
+ */
+type ViewportTier = "mobile" | "tablet" | "desktop";
+declare const TABLET_MIN = 720;
+declare const DESKTOP_MIN = 1024;
+/** SSR-safe — returns "desktop" on the server. */
+declare function getViewport(): ViewportTier;
+declare const noFlashViewportScript: string;
+
+export { CODE_TO_KEY, COMMAND_PALETTE_OPEN_EVENT, DESKTOP_MIN, type Locale, type MessageBundle, type Messages, SUPPORTED_LOCALES, TABLET_MIN, type Theme, type ViewportTier, crossLocaleKeywords, getLocale, getTheme, getViewport, interpolate, isInputTarget, noFlashLocaleScript, noFlashThemeScript, noFlashViewportScript, openCommandPalette, setLocale, setTheme, shortcutKey };

package/dist/helpers.d.ts

@@ -0,0 +1,96 @@
+/**
+ * Concatenate one label across every locale dictionary so cmdk search matches
+ * regardless of the active language — a Korean user typing an English term (or
+ * vice-versa) still finds the item. This is mandatory in a ko-first ecosystem.
+ *
+ * @example
+ *   import ko from "./locales/ko";
+ *   import en from "./locales/en";
+ *   const dicts = [ko, en];
+ *   crossLocaleKeywords(dicts, (d) => d.nav.schedules) // "일정 Schedules"
+ */
+declare function crossLocaleKeywords<D>(dicts: readonly D[], getter: (dict: D) => string): string;
+/** True when the keyboard event originates from a text-entry control. */
+declare function isInputTarget(e: KeyboardEvent): boolean;
+/**
+ * Map physical key codes to logical keys so shortcuts survive a Korean IME:
+ * when an IME is active `e.key` is a Hangul syllable, not the Latin letter, so
+ * single-letter shortcuts must fall back to `e.code`.
+ */
+declare const CODE_TO_KEY: Readonly<Record<string, string>>;
+/**
+ * Resolve the logical shortcut key for an event. Prefers `e.key` when it is
+ * already an ASCII shortcut (`/`, `?`, or a–z); otherwise falls back to the
+ * physical-code map (covers IME output).
+ */
+declare function shortcutKey(e: KeyboardEvent): string;
+/** The custom DOM event any UI affordance can dispatch to open the palette. */
+declare const COMMAND_PALETTE_OPEN_EVENT = "command-palette:open";
+/** Dispatch `command-palette:open` so a button/menu can open the palette. */
+declare function openCommandPalette(): void;
+
+/**
+ * Theme helpers for the `[data-theme]` mechanism that styles.css implements.
+ *
+ * `data-theme` must be set on <html> BEFORE first paint, or the page flashes
+ * the default theme before flipping to the user's choice. Inject
+ * `noFlashThemeScript` synchronously in <head> — for Next, in a <script
+ * dangerouslySetInnerHTML>; for a Vite app, inline in index.html.
+ *
+ * Resolution order (matches the fleet rule in
+ * planning/wiki/concepts/theme-system-dark-fallback.md):
+ *
+ *   1. saved user choice in localStorage
+ *   2. OS preference via `prefers-color-scheme`
+ *   3. dark — the fleet-wide fallback when we can't tell
+ *
+ * Prior to v0.28 the fallback was "light"; the fleet now treats dark as
+ * the audience-of-record default (most surfaces are dark; designs assume
+ * dark first).
+ */
+type Theme = "light" | "dark";
+/**
+ * A self-contained <head> snippet (no deps) that sets `data-theme` from the
+ * saved choice, falling back to the OS preference, then dark. Pass the same
+ * `appKey` you pass to `getTheme`/`setTheme`.
+ */
+declare function noFlashThemeScript(appKey: string): string;
+/** Read the active theme (saved choice → OS preference → dark). */
+declare function getTheme(appKey: string): Theme;
+/** Persist and apply a theme to <html>. */
+declare function setTheme(appKey: string, theme: Theme): void;
+
+/**
+ * React-free i18n primitives — safe to import from `helpers.ts`, server
+ * runtimes, or the index.html-adjacent script that emits the no-flash
+ * snippet. The React provider/hooks live in `i18n.tsx` and re-export
+ * everything from here.
+ */
+type Locale = "ko" | "en";
+declare const SUPPORTED_LOCALES: Locale[];
+type Messages = Record<string, string>;
+type MessageBundle = Record<Locale, Messages>;
+/** Read the active locale (saved choice → system → "en"). */
+declare function getLocale(appKey: string): Locale;
+/** Persist and apply a locale to <html lang>. */
+declare function setLocale(appKey: string, locale: Locale): void;
+/**
+ * <head> snippet (no deps) that sets <html lang> from the saved choice,
+ * falling back to system languages, then "en".
+ */
+declare function noFlashLocaleScript(appKey: string): string;
+/** Render `{name}` placeholders. Unknown placeholders pass through. */
+declare function interpolate(template: string, vars?: Record<string, string | number>): string;
+
+/**
+ * React-free viewport primitives — safe to import from `helpers.ts`.
+ * React provider/hook lives in `viewport.tsx`.
+ */
+type ViewportTier = "mobile" | "tablet" | "desktop";
+declare const TABLET_MIN = 720;
+declare const DESKTOP_MIN = 1024;
+/** SSR-safe — returns "desktop" on the server. */
+declare function getViewport(): ViewportTier;
+declare const noFlashViewportScript: string;
+
+export { CODE_TO_KEY, COMMAND_PALETTE_OPEN_EVENT, DESKTOP_MIN, type Locale, type MessageBundle, type Messages, SUPPORTED_LOCALES, TABLET_MIN, type Theme, type ViewportTier, crossLocaleKeywords, getLocale, getTheme, getViewport, interpolate, isInputTarget, noFlashLocaleScript, noFlashThemeScript, noFlashViewportScript, openCommandPalette, setLocale, setTheme, shortcutKey };

package/dist/helpers.js

@@ -0,0 +1,118 @@
+// src/keywords.ts
+function crossLocaleKeywords(dicts, getter) {
+  return dicts.map(getter).filter(Boolean).join(" ");
+}
+function isInputTarget(e) {
+  const t = e.target;
+  if (!t) return false;
+  return t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.tagName === "SELECT" || t.isContentEditable;
+}
+var CODE_TO_KEY = {
+  Slash: "/",
+  KeyG: "g",
+  KeyH: "h",
+  KeyK: "k",
+  KeyS: "s",
+  KeyN: "n",
+  KeyT: "t",
+  KeyM: "m",
+  KeyP: "p"
+};
+function shortcutKey(e) {
+  const isAscii = e.key === "/" || e.key === "?" || /^[a-z]$/.test(e.key);
+  return isAscii ? e.key : CODE_TO_KEY[e.code] ?? e.key;
+}
+var COMMAND_PALETTE_OPEN_EVENT = "command-palette:open";
+function openCommandPalette() {
+  document.dispatchEvent(new CustomEvent(COMMAND_PALETTE_OPEN_EVENT));
+}
+
+// src/theme.ts
+function storageKey(appKey) {
+  return `${appKey}-theme`;
+}
+function noFlashThemeScript(appKey) {
+  return `(function(){try{var k=${JSON.stringify(storageKey(appKey))};var s=localStorage.getItem(k);var d=s;if(d!=="light"&&d!=="dark"){d=(window.matchMedia&&window.matchMedia("(prefers-color-scheme: light)").matches)?"light":"dark";}document.documentElement.setAttribute("data-theme",d);}catch(e){}})();`;
+}
+function getTheme(appKey) {
+  try {
+    const saved = localStorage.getItem(storageKey(appKey));
+    if (saved === "light" || saved === "dark") return saved;
+  } catch {
+  }
+  if (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: light)").matches) {
+    return "light";
+  }
+  return "dark";
+}
+function setTheme(appKey, theme) {
+  try {
+    localStorage.setItem(storageKey(appKey), theme);
+  } catch {
+  }
+  document.documentElement.setAttribute("data-theme", theme);
+}
+
+// src/i18nCore.ts
+var SUPPORTED_LOCALES = ["ko", "en"];
+function storageKey2(appKey) {
+  return `${appKey}-locale`;
+}
+function detectSystemLocale() {
+  if (typeof navigator === "undefined") return "en";
+  const candidates = [];
+  if (Array.isArray(navigator.languages)) {
+    candidates.push(...navigator.languages);
+  } else if (typeof navigator.language === "string") {
+    candidates.push(navigator.language);
+  }
+  for (const raw of candidates) {
+    const tag = raw.toLowerCase();
+    if (tag === "ko" || tag.startsWith("ko-")) return "ko";
+    if (tag === "en" || tag.startsWith("en-")) return "en";
+  }
+  return "en";
+}
+function getLocale(appKey) {
+  try {
+    const saved = localStorage.getItem(storageKey2(appKey));
+    if (saved === "ko" || saved === "en") return saved;
+  } catch {
+  }
+  return detectSystemLocale();
+}
+function setLocale(appKey, locale) {
+  try {
+    localStorage.setItem(storageKey2(appKey), locale);
+  } catch {
+  }
+  if (typeof document !== "undefined") {
+    document.documentElement.setAttribute("lang", locale);
+  }
+}
+function noFlashLocaleScript(appKey) {
+  return `(function(){try{var k=${JSON.stringify(storageKey2(appKey))};var s=localStorage.getItem(k);var l=s;if(l!=="ko"&&l!=="en"){l="en";var langs=(navigator.languages&&navigator.languages.length?navigator.languages:[navigator.language||""]);for(var i=0;i<langs.length;i++){var t=(langs[i]||"").toLowerCase();if(t==="ko"||t.indexOf("ko-")===0){l="ko";break;}if(t==="en"||t.indexOf("en-")===0){l="en";break;}}}document.documentElement.setAttribute("lang",l);}catch(e){}})();`;
+}
+function interpolate(template, vars) {
+  if (!vars) return template;
+  return template.replace(/\{(\w+)\}/g, (m, k) => {
+    const v = vars[k];
+    return v === void 0 || v === null ? m : String(v);
+  });
+}
+
+// src/viewportCore.ts
+var TABLET_MIN = 720;
+var DESKTOP_MIN = 1024;
+function tierForWidth(w) {
+  if (w >= DESKTOP_MIN) return "desktop";
+  if (w >= TABLET_MIN) return "tablet";
+  return "mobile";
+}
+function getViewport() {
+  if (typeof window === "undefined") return "desktop";
+  return tierForWidth(window.innerWidth);
+}
+var noFlashViewportScript = `(function(){try{var w=window.innerWidth||document.documentElement.clientWidth;var v="mobile";if(w>=${DESKTOP_MIN})v="desktop";else if(w>=${TABLET_MIN})v="tablet";document.documentElement.setAttribute("data-vp",v);}catch(e){}})();`;
+
+export { CODE_TO_KEY, COMMAND_PALETTE_OPEN_EVENT, DESKTOP_MIN, SUPPORTED_LOCALES, TABLET_MIN, crossLocaleKeywords, getLocale, getTheme, getViewport, interpolate, isInputTarget, noFlashLocaleScript, noFlashThemeScript, noFlashViewportScript, openCommandPalette, setLocale, setTheme, shortcutKey };