@celestia-island/hikari 0.32.2 → 0.32.3

package/src/components/HkQrCode.tsx

@@ -0,0 +1,121 @@
+import {
+  computed,
+  defineComponent,
+  onMounted,
+  ref,
+  watch,
+  type PropType,
+} from "vue";
+
+import { useI18n } from "../i18n/context";
+import { qrMatrix, type QrErrorCorrectionLevel } from "../utils/qr/qrEncoder";
+import "./HkQrCode.scss";
+
+/**
+ * HkQrCode — render a scannable QR code from an arbitrary string value
+ * (typically an `otpauth://` URI).
+ *
+ * The QR is always rendered as dark modules on a white card (independent of
+ * the app theme) so it stays scannable in dark mode, matching the pattern of
+ * authenticator apps. Rendering goes to a `<canvas>` (crisp at any scale and
+ * device-pixel-ratio). Re-encodes whenever `value` changes.
+ *
+ * Contract:
+ *   - `value` is the payload (e.g. an otpauth URI); empty/whitespace renders
+ *     nothing.
+ *   - `size` is the rendered CSS size in px; the canvas backing store is
+ *     scaled by the device pixel ratio so module edges stay sharp.
+ *   - `inverse` swaps dark/light (advanced use; the default light card is the
+ *     high-contrast, always-scannable choice).
+ */
+export const HkQrCode = defineComponent({
+  name: "HkQrCode",
+  props: {
+    /** Payload to encode. Render nothing when empty. */
+    value: { type: String, default: "" },
+    /** Rendered CSS size in px (square). Default 168. */
+    size: { type: Number, default: 168 },
+    /** Quiet-zone width in modules. Default 2. */
+    margin: { type: Number, default: 2 },
+    /** Error-correction level. Default "M". */
+    level: { type: String as PropType<QrErrorCorrectionLevel>, default: "M" },
+    colorDark: { type: String, default: "#000000" },
+    colorLight: { type: String, default: "#ffffff" },
+    /** Swap dark/light (use with a dark card only). Default false. */
+    inverse: { type: Boolean, default: false },
+    /** Optional caption shown under the QR. */
+    label: { type: String, default: "" },
+    disabled: { type: Boolean, default: false },
+  },
+  setup(props) {
+    const { t } = useI18n();
+    const canvasRef = ref<HTMLCanvasElement | null>(null);
+
+    const dark = computed(() => (props.inverse ? props.colorLight : props.colorDark));
+    const light = computed(() => (props.inverse ? props.colorDark : props.colorLight));
+    const hasValue = computed(() => props.value.trim().length > 0);
+
+    function draw() {
+      if (!canvasRef.value || !hasValue.value) return;
+      if (typeof document === "undefined") return; // SSR guard
+      const canvas = canvasRef.value;
+      const matrix = qrMatrix(props.value, {
+        errorCorrectionLevel: props.level,
+      });
+      const count = matrix.length;
+      const totalModules = count + props.margin * 2;
+      const dpr = (typeof window !== "undefined" && window.devicePixelRatio) || 1;
+      const cssSize = props.size;
+      const backing = Math.round(cssSize * dpr);
+      canvas.width = backing;
+      canvas.height = backing;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      // Fill the quiet-zone / background.
+      ctx.fillStyle = light.value;
+      ctx.fillRect(0, 0, backing, backing);
+      const cell = backing / totalModules;
+      // Draw each dark module (quiet zone = margin offset).
+      for (let row = 0; row < count; row++) {
+        for (let col = 0; col < count; col++) {
+          if (matrix[row][col]) {
+            ctx.fillStyle = dark.value;
+            ctx.fillRect(
+              (props.margin + col) * cell,
+              (props.margin + row) * cell,
+              cell + 0.5, // slight overlap avoids hairline seams on scaled canvases
+              cell + 0.5,
+            );
+          }
+        }
+      }
+    }
+
+    onMounted(draw);
+    watch(
+      () => [props.value, props.size, props.margin, props.level, props.colorDark, props.colorLight, props.inverse],
+      draw,
+    );
+
+    const ariaLabel = computed(
+      () => props.label || t("hikari::qrCode.alt", "QR code"),
+    );
+
+    return () => (
+      <div class="hk-qr-card" data-empty={hasValue.value ? undefined : true}>
+        {hasValue.value ? (
+          <canvas
+            ref={canvasRef}
+            class="hk-qr-canvas"
+            role="img"
+            aria-label={ariaLabel.value}
+            style={{ width: `${props.size}px`, height: `${props.size}px` }}
+          />
+        ) : null}
+        {props.label ? <div class="hk-qr-label">{props.label}</div> : null}
+      </div>
+    );
+  },
+});
+
+export default HkQrCode;

package/src/data/dialCodes.test.ts

@@ -0,0 +1,93 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  DIAL_CODES,
+  entryByDialCode,
+  entryByIso,
+  flagEmoji,
+  formatE164,
+  normalizeDial,
+  parseE164,
+} from "./dialCodes";
+
+describe("dialCodes catalog", () => {
+  it("starts with China and contains the expected shape", () => {
+    expect(DIAL_CODES[0]).toMatchObject({ iso: "cn", dial: "86", en: "China", zh: "中国" });
+    for (const entry of DIAL_CODES) {
+      expect(entry.iso).toMatch(/^[a-z]{2}$/);
+      expect(entry.dial).toMatch(/^\d+$/);
+      expect(entry.en.length).toBeGreaterThan(0);
+      expect(entry.zh.length).toBeGreaterThan(0);
+    }
+  });
+
+  it("has no duplicate ISO codes and no dangling dial codes", () => {
+    const isos = new Set(DIAL_CODES.map((c) => c.iso));
+    expect(isos.size).toBe(DIAL_CODES.length);
+  });
+
+  it("derives flag emoji from ISO codes", () => {
+    expect(flagEmoji("cn")).toBe("🇨🇳");
+    expect(flagEmoji("us")).toBe("🇺🇸");
+    expect(flagEmoji("zz")).toBe("🇿🇿"); // any two letters map
+    expect(flagEmoji("")).toBe("");
+  });
+});
+
+describe("formatE164 / parseE164", () => {
+  it("composes E.164 from dial code and national number", () => {
+    expect(formatE164("+86", "13812345678")).toBe("+8613812345678");
+    expect(formatE164("86", "138 1234-5678")).toBe("+8613812345678");
+    expect(formatE164("0086", "13812345678")).toBe("+8613812345678");
+  });
+
+  it("returns empty for missing parts", () => {
+    expect(formatE164("", "138")).toBe("");
+    expect(formatE164("+86", "")).toBe("");
+    expect(formatE164("+86", "  ")).toBe("");
+  });
+
+  it("round-trips a parsed E.164", () => {
+    const parsed = parseE164("+8613812345678");
+    expect(parsed).toEqual({ dial: "86", national: "13812345678", iso: "cn" });
+    expect(formatE164(`+${parsed.dial}`, parsed.national)).toBe("+8613812345678");
+  });
+
+  it("resolves shared prefixes to the longest dial match", () => {
+    // +1 → United States (first catalog entry for dial 1).
+    const us = parseE164("+12125551234");
+    expect(us.dial).toBe("1");
+    expect(us.iso).toBe("us");
+    expect(us.national).toBe("2125551234");
+  });
+
+  it("splits +852 Hong Kong without confusing +85 prefixes", () => {
+    const hk = parseE164("+85291234567");
+    expect(hk).toEqual({ dial: "852", national: "91234567", iso: "hk" });
+  });
+
+  it("handles a bare number without a country match", () => {
+    const parsed = parseE164("99999999");
+    // "99" matches no catalog dial prefix (no entry starts 99), so the
+    // whole string stays national.
+    expect(parsed.national).toBe("99999999");
+    expect(parsed.dial).toBe("");
+    expect(parsed.iso).toBeUndefined();
+  });
+});
+
+describe("lookups", () => {
+  it("finds entries by iso and by dial", () => {
+    expect(entryByIso("JP")?.dial).toBe("81");
+    expect(entryByDialCode("+81")?.iso).toBe("jp");
+    expect(entryByDialCode("81")?.iso).toBe("jp");
+    expect(entryByDialCode("jp")?.dial).toBe("81");
+    expect(entryByDialCode("+999")).toBeUndefined();
+  });
+
+  it("normalizes dial shapes", () => {
+    expect(normalizeDial("+86")).toBe("86");
+    expect(normalizeDial("0086")).toBe("86");
+    expect(normalizeDial("+1 234")).toBe("1234");
+  });
+});

package/src/data/dialCodes.ts

@@ -0,0 +1,233 @@
+/**
+ * Country dial-code dictionary for phone inputs (SMS enrollment, contact
+ * forms, …). Deliberately NOT part of the locale JSON: it is a data
+ * catalog, not copy — locale JSON files stay small and this table stays
+ * machine-queryable.
+ *
+ * Every entry carries an ISO 3166-1 alpha-2 code (lowercase) plus
+ * localized country names in English and Simplified Chinese. The flag is
+ * derived from the ISO code at render time (`flagEmoji`), so the table
+ * never carries hand-typed emoji that can silently rot.
+ */
+
+export interface DialCodeEntry {
+  /** ISO 3166-1 alpha-2 country code, lowercase (e.g. "cn"). */
+  iso: string;
+  /** National dial code WITHOUT the leading "+" (e.g. "86"). */
+  dial: string;
+  /** English country name (index + fallback). */
+  en: string;
+  /** Simplified Chinese country name. */
+  zh: string;
+}
+
+/** Flag glyph for an ISO 3166-1 alpha-2 code (regional indicators). */
+export function flagEmoji(iso: string): string {
+  const upper = iso.toUpperCase();
+  if (!/^[A-Z]{2}$/.test(upper)) return "";
+  return String.fromCodePoint(
+    ...Array.from(upper, (c) => 0x1f1e6 + c.charCodeAt(0) - 65),
+  );
+}
+
+/** Localized country name: zh locales read the zh field, everything else
+ *  falls back to English (the dictionary ships en + zh only). */
+export function dialCodeName(entry: DialCodeEntry, locale: string): string {
+  return locale.toLowerCase().startsWith("zh") ? entry.zh : entry.en;
+}
+
+/**
+ * Ordered catalog. China first (the primary audience of the workspace),
+ * then Asia-Pacific neighbors, then the rest of the world. Order also
+ * drives parse ambiguity resolution (first match wins for shared dial
+ * prefixes like +1 / +7).
+ */
+export const DIAL_CODES: readonly DialCodeEntry[] = [
+  { iso: "cn", dial: "86", en: "China", zh: "中国" },
+  { iso: "hk", dial: "852", en: "Hong Kong (China)", zh: "中国香港" },
+  { iso: "mo", dial: "853", en: "Macau (China)", zh: "中国澳门" },
+  { iso: "tw", dial: "886", en: "Taiwan (China)", zh: "中国台湾" },
+  { iso: "jp", dial: "81", en: "Japan", zh: "日本" },
+  { iso: "kr", dial: "82", en: "South Korea", zh: "韩国" },
+  { iso: "sg", dial: "65", en: "Singapore", zh: "新加坡" },
+  { iso: "my", dial: "60", en: "Malaysia", zh: "马来西亚" },
+  { iso: "th", dial: "66", en: "Thailand", zh: "泰国" },
+  { iso: "vn", dial: "84", en: "Vietnam", zh: "越南" },
+  { iso: "ph", dial: "63", en: "Philippines", zh: "菲律宾" },
+  { iso: "id", dial: "62", en: "Indonesia", zh: "印度尼西亚" },
+  { iso: "in", dial: "91", en: "India", zh: "印度" },
+  { iso: "pk", dial: "92", en: "Pakistan", zh: "巴基斯坦" },
+  { iso: "bd", dial: "880", en: "Bangladesh", zh: "孟加拉国" },
+  { iso: "lk", dial: "94", en: "Sri Lanka", zh: "斯里兰卡" },
+  { iso: "np", dial: "977", en: "Nepal", zh: "尼泊尔" },
+  { iso: "kh", dial: "855", en: "Cambodia", zh: "柬埔寨" },
+  { iso: "la", dial: "856", en: "Laos", zh: "老挝" },
+  { iso: "mm", dial: "95", en: "Myanmar", zh: "缅甸" },
+  { iso: "bn", dial: "673", en: "Brunei", zh: "文莱" },
+  { iso: "mn", dial: "976", en: "Mongolia", zh: "蒙古" },
+  { iso: "us", dial: "1", en: "United States", zh: "美国" },
+  { iso: "ca", dial: "1", en: "Canada", zh: "加拿大" },
+  { iso: "gb", dial: "44", en: "United Kingdom", zh: "英国" },
+  { iso: "de", dial: "49", en: "Germany", zh: "德国" },
+  { iso: "fr", dial: "33", en: "France", zh: "法国" },
+  { iso: "it", dial: "39", en: "Italy", zh: "意大利" },
+  { iso: "es", dial: "34", en: "Spain", zh: "西班牙" },
+  { iso: "pt", dial: "351", en: "Portugal", zh: "葡萄牙" },
+  { iso: "nl", dial: "31", en: "Netherlands", zh: "荷兰" },
+  { iso: "be", dial: "32", en: "Belgium", zh: "比利时" },
+  { iso: "ch", dial: "41", en: "Switzerland", zh: "瑞士" },
+  { iso: "at", dial: "43", en: "Austria", zh: "奥地利" },
+  { iso: "ie", dial: "353", en: "Ireland", zh: "爱尔兰" },
+  { iso: "se", dial: "46", en: "Sweden", zh: "瑞典" },
+  { iso: "no", dial: "47", en: "Norway", zh: "挪威" },
+  { iso: "dk", dial: "45", en: "Denmark", zh: "丹麦" },
+  { iso: "fi", dial: "358", en: "Finland", zh: "芬兰" },
+  { iso: "is", dial: "354", en: "Iceland", zh: "冰岛" },
+  { iso: "pl", dial: "48", en: "Poland", zh: "波兰" },
+  { iso: "cz", dial: "420", en: "Czechia", zh: "捷克" },
+  { iso: "sk", dial: "421", en: "Slovakia", zh: "斯洛伐克" },
+  { iso: "hu", dial: "36", en: "Hungary", zh: "匈牙利" },
+  { iso: "ro", dial: "40", en: "Romania", zh: "罗马尼亚" },
+  { iso: "bg", dial: "359", en: "Bulgaria", zh: "保加利亚" },
+  { iso: "gr", dial: "30", en: "Greece", zh: "希腊" },
+  { iso: "hr", dial: "385", en: "Croatia", zh: "克罗地亚" },
+  { iso: "rs", dial: "381", en: "Serbia", zh: "塞尔维亚" },
+  { iso: "ua", dial: "380", en: "Ukraine", zh: "乌克兰" },
+  { iso: "ru", dial: "7", en: "Russia", zh: "俄罗斯" },
+  { iso: "kz", dial: "7", en: "Kazakhstan", zh: "哈萨克斯坦" },
+  { iso: "tr", dial: "90", en: "Türkiye", zh: "土耳其" },
+  { iso: "il", dial: "972", en: "Israel", zh: "以色列" },
+  { iso: "ae", dial: "971", en: "United Arab Emirates", zh: "阿联酋" },
+  { iso: "sa", dial: "966", en: "Saudi Arabia", zh: "沙特阿拉伯" },
+  { iso: "qa", dial: "974", en: "Qatar", zh: "卡塔尔" },
+  { iso: "kw", dial: "965", en: "Kuwait", zh: "科威特" },
+  { iso: "bh", dial: "973", en: "Bahrain", zh: "巴林" },
+  { iso: "om", dial: "968", en: "Oman", zh: "阿曼" },
+  { iso: "jo", dial: "962", en: "Jordan", zh: "约旦" },
+  { iso: "lb", dial: "961", en: "Lebanon", zh: "黎巴嫩" },
+  { iso: "iq", dial: "964", en: "Iraq", zh: "伊拉克" },
+  { iso: "ir", dial: "98", en: "Iran", zh: "伊朗" },
+  { iso: "af", dial: "93", en: "Afghanistan", zh: "阿富汗" },
+  { iso: "ge", dial: "995", en: "Georgia", zh: "格鲁吉亚" },
+  { iso: "am", dial: "374", en: "Armenia", zh: "亚美尼亚" },
+  { iso: "az", dial: "994", en: "Azerbaijan", zh: "阿塞拜疆" },
+  { iso: "uz", dial: "998", en: "Uzbekistan", zh: "乌兹别克斯坦" },
+  { iso: "eg", dial: "20", en: "Egypt", zh: "埃及" },
+  { iso: "ma", dial: "212", en: "Morocco", zh: "摩洛哥" },
+  { iso: "dz", dial: "213", en: "Algeria", zh: "阿尔及利亚" },
+  { iso: "tn", dial: "216", en: "Tunisia", zh: "突尼斯" },
+  { iso: "ng", dial: "234", en: "Nigeria", zh: "尼日利亚" },
+  { iso: "ke", dial: "254", en: "Kenya", zh: "肯尼亚" },
+  { iso: "et", dial: "251", en: "Ethiopia", zh: "埃塞俄比亚" },
+  { iso: "tz", dial: "255", en: "Tanzania", zh: "坦桑尼亚" },
+  { iso: "za", dial: "27", en: "South Africa", zh: "南非" },
+  { iso: "gh", dial: "233", en: "Ghana", zh: "加纳" },
+  { iso: "br", dial: "55", en: "Brazil", zh: "巴西" },
+  { iso: "mx", dial: "52", en: "Mexico", zh: "墨西哥" },
+  { iso: "ar", dial: "54", en: "Argentina", zh: "阿根廷" },
+  { iso: "cl", dial: "56", en: "Chile", zh: "智利" },
+  { iso: "co", dial: "57", en: "Colombia", zh: "哥伦比亚" },
+  { iso: "pe", dial: "51", en: "Peru", zh: "秘鲁" },
+  { iso: "ve", dial: "58", en: "Venezuela", zh: "委内瑞拉" },
+  { iso: "uy", dial: "598", en: "Uruguay", zh: "乌拉圭" },
+  { iso: "ec", dial: "593", en: "Ecuador", zh: "厄瓜多尔" },
+  { iso: "au", dial: "61", en: "Australia", zh: "澳大利亚" },
+  { iso: "nz", dial: "64", en: "New Zealand", zh: "新西兰" },
+  { iso: "fj", dial: "679", en: "Fiji", zh: "斐济" },
+];
+
+/** Normalize a dial-code input ("86", "+86", "0086") to bare digits. */
+export function normalizeDial(dial: string): string {
+  return dial.replace(/^\+/, "").replace(/^00/, "").replace(/\D/g, "");
+}
+
+/** Strip every non-digit from a national number (keeps leading zeros
+ *  where a country genuinely needs them, e.g. Italy). */
+export function normalizeNational(national: string): string {
+  return national.replace(/\D/g, "");
+}
+
+/** Find a catalog entry by lowercase ISO code. */
+export function entryByIso(iso: string, list: readonly DialCodeEntry[] = DIAL_CODES) {
+  return list.find((c) => c.iso === iso.toLowerCase());
+}
+
+/** Find the first catalog entry matching a dial code (order = priority
+ *  for shared prefixes like +1 / +7). */
+export function entryByDial(dial: string, list: readonly DialCodeEntry[] = DIAL_CODES) {
+  const bare = normalizeDial(dial);
+  return list.find((c) => c.dial === bare);
+}
+
+/** Resolve an entry from an ISO code OR dial code (dial wins when the
+ *  caller only knows the number). */
+export function entryByDialCode(
+  isoOrDial: string,
+  list: readonly DialCodeEntry[] = DIAL_CODES,
+) {
+  return entryByIso(isoOrDial, list) ?? entryByDial(isoOrDial, list);
+}
+
+/** Resolve an entry from a dial-code string in any shape ("+86" → CN). */
+export function resolveDial(
+  dial: string,
+  isoHint?: string,
+  list: readonly DialCodeEntry[] = DIAL_CODES,
+): DialCodeEntry | undefined {
+  const bare = normalizeDial(dial);
+  if (!bare) return undefined;
+  if (isoHint) {
+    const byIso = entryByIso(isoHint, list);
+    if (byIso && byIso.dial === bare) return byIso;
+  }
+  return list.find((c) => c.dial === bare);
+}
+
+/**
+ * Compose an E.164 number: national digits plus the selected dial code.
+ * Handles a national number that already carries a trunk prefix ("0…")
+ * only where the dial code demands it (kept simple: leading "0" is
+ * dropped for every country — trunk prefixes are caller territory).
+ *
+ * @returns full E.164 string ("+8613812345678") or "" when empty.
+ */
+export function formatE164(
+  dialCode: string,
+  national: string,
+  list: readonly DialCodeEntry[] = DIAL_CODES,
+): string {
+  const bare = normalizeDial(dialCode);
+  if (!bare) return "";
+  const digits = normalizeNational(national);
+  if (!digits) return "";
+  return `+${bare}${digits}`;
+}
+
+export interface ParsedE164 {
+  /** Bare dial digits (e.g. "86"), or "" when nothing parses. */
+  dial: string;
+  /** National digits after the dial code (e.g. "13812345678"). */
+  national: string;
+  /** Best-guess country (first catalog entry matching the dial). */
+  iso?: string;
+}
+
+/** Split an E.164 string ("+8613812345678") into dial code + national
+ *  digits. Longest dial prefix wins (so "+1" keeps US/CA whole). */
+export function parseE164(
+  e164: string,
+  list: readonly DialCodeEntry[] = DIAL_CODES,
+): ParsedE164 {
+  const digits = e164.replace(/^\+/, "").replace(/\D/g, "");
+  if (!digits) return { dial: "", national: "" };
+  const byLength = [...list]
+    .filter((c) => digits.startsWith(c.dial))
+    .sort((a, b) => b.dial.length - a.dial.length);
+  const best = byLength[0];
+  if (!best) return { dial: "", national: digits };
+  return {
+    dial: best.dial,
+    national: digits.slice(best.dial.length),
+    iso: best.iso,
+  };
+}

package/src/i18n/locales/en/components.json

@@ -146,6 +146,11 @@
     "hikari::statusBar.backend.ok": "OK",
     "hikari::statusBar.backend.warn": "Degraded",
     "hikari::statusBar.backend.error": "Error",
-    "hikari::statusBar.backend.unknown": "Unknown"
+    "hikari::statusBar.backend.unknown": "Unknown",
+    "hikari::qrCode.alt": "QR code",
+    "hikari::phoneInput.dialCode": "Code",
+    "hikari::phoneInput.chooseCountry": "Choose country code",
+    "hikari::phoneInput.searchCountries": "Search country or code",
+    "hikari::phoneInput.noMatches": "No matching country"
   }
 }

package/src/i18n/locales/zh-Hans/components.json

@@ -150,6 +150,11 @@
     "hikari::statusBar.region.CN": "中国大陆",
     "hikari::statusBar.region.TW": "中国台湾",
     "hikari::statusBar.region.HK": "中国香港",
-    "hikari::statusBar.region.MO": "中国澳门"
+    "hikari::statusBar.region.MO": "中国澳门",
+    "hikari::qrCode.alt": "二维码",
+    "hikari::phoneInput.dialCode": "区号",
+    "hikari::phoneInput.chooseCountry": "选择国家区号",
+    "hikari::phoneInput.searchCountries": "搜索国家或区号",
+    "hikari::phoneInput.noMatches": "没有匹配的国家"
   }
 }

package/src/i18n/locales/zh-Hant/components.json

@@ -150,6 +150,11 @@
     "hikari::statusBar.region.CN": "中國大陸",
     "hikari::statusBar.region.TW": "中國台灣",
     "hikari::statusBar.region.HK": "中國香港",
-    "hikari::statusBar.region.MO": "中國澳門"
+    "hikari::statusBar.region.MO": "中國澳門",
+    "hikari::qrCode.alt": "QR 碼",
+    "hikari::phoneInput.dialCode": "區碼",
+    "hikari::phoneInput.chooseCountry": "選擇國家區碼",
+    "hikari::phoneInput.searchCountries": "搜尋國家或區碼",
+    "hikari::phoneInput.noMatches": "沒有符合的國家"
   }
 }

package/src/index.ts

@@ -34,9 +34,11 @@ export { default as HModal } from "./components/HkModal";
 export { default as HNavItem } from "./components/HkNavItem";
 export { default as HNumberInput } from "./components/HkNumberInput";
 export { default as HPasswordInput } from "./components/HkPasswordInput";
+export { default as HPhoneInput } from "./components/HkPhoneInput";
 export { default as HPhaseTransition } from "./components/HkPhaseTransition";
 export { default as HGaugeRing } from "./components/HkGaugeRing";
 export { default as HProgressRing } from "./components/HkProgressRing";
+export { default as HQrCode } from "./components/HkQrCode";
 export { default as HRollingNumber } from "./components/HkRollingNumber";
 export { default as HLocalePickerPopup } from "./components/HkLocalePickerPopup";
 export { default as HHoverRevealAction } from "./components/HkHoverRevealAction";
@@ -357,3 +359,15 @@ export {
   formatMs,
   type RelativeTimeT,
 } from "./utils/format";
+
+export {
+  DIAL_CODES,
+  flagEmoji,
+  dialCodeName,
+  formatE164,
+  parseE164,
+  normalizeDial,
+  normalizeNational,
+  type DialCodeEntry,
+  type ParsedE164,
+} from "./data/dialCodes";

package/src/utils/qr/qrEncoder.test.ts

@@ -0,0 +1,53 @@
+import { describe, expect, it } from "vitest";
+
+import { qrMatrix } from "./qrEncoder";
+
+const OTPAUTH =
+  "otpauth://totp/Example:langyo%40example.com?secret=JBSWY3DPEHPK3PXP&issuer=Example";
+
+describe("qrMatrix", () => {
+  it("returns a square boolean matrix for a real otpauth URI", () => {
+    const m = qrMatrix(OTPAUTH);
+    expect(m.length).toBeGreaterThan(0);
+    for (const row of m) {
+      expect(row).toHaveLength(m.length);
+    }
+  });
+
+  it("is deterministic for the same payload", () => {
+    expect(qrMatrix(OTPAUTH)).toEqual(qrMatrix(OTPAUTH));
+  });
+
+  it("places three 7x7 finder patterns on the corners", () => {
+    const m = qrMatrix("HELLO WORLD");
+    const n = m.length;
+    // Finder pattern: dark border ring, light 1-module gap ring, dark 3x3
+    // core. Check the top-left corner box.
+    const expectFinderAt = (r0: number, c0: number) => {
+      for (let r = 0; r < 7; r++) {
+        for (let c = 0; c < 7; c++) {
+          const ring = r === 0 || r === 6 || c === 0 || c === 6;
+          const core = r >= 2 && r <= 4 && c >= 2 && c <= 4;
+          expect(m[r0 + r][c0 + c]).toBe(ring || core);
+        }
+      }
+    };
+    expectFinderAt(0, 0);
+    expectFinderAt(0, n - 7);
+    expectFinderAt(n - 7, 0);
+  });
+
+  it("encodes a balanced module population", () => {
+    const m = qrMatrix(OTPAUTH);
+    const dark = m.flat().filter(Boolean).length;
+    const total = m.length * m.length;
+    // QR data is error-corrected and masked; a healthy code lands well
+    // between an empty and a full grid.
+    expect(dark).toBeGreaterThan(total * 0.2);
+    expect(dark).toBeLessThan(total * 0.8);
+  });
+
+  it("throws when the payload overflows the largest version", () => {
+    expect(() => qrMatrix("x".repeat(5000))).toThrow();
+  });
+});

package/src/utils/qr/qrEncoder.ts

@@ -0,0 +1,38 @@
+// Thin TS wrapper over the vendored MIT qrcode-generator (Kazuhiko Arase).
+// Exposes a single `qrMatrix` helper used by HkQrCode to render a QR code
+// without any external dependency (the shared pnpm virtual-store layout
+// cannot install new packages in this workspace, so the encoder is vendored
+// as a self-contained ES module).
+
+import qrcode from "./qrcode-generator";
+
+export type QrErrorCorrectionLevel = "L" | "M" | "Q" | "H";
+
+export interface QrMatrixOptions {
+  /** Explicit QR version 1..40, or 0 for auto-detection. Default 0. */
+  typeNumber?: number;
+  /** Error-correction level. Default "M". */
+  errorCorrectionLevel?: QrErrorCorrectionLevel;
+}
+
+/**
+ * Encode `text` as a QR module matrix. `true` = dark module.
+ *
+ * When `typeNumber` is 0 (default), the vendored generator auto-selects the
+ * smallest version that fits the payload and the chosen ECC level.
+ */
+export function qrMatrix(text: string, opts: QrMatrixOptions = {}): boolean[][] {
+  const level = opts.errorCorrectionLevel ?? "M";
+  const typeNumber = opts.typeNumber ?? 0;
+  const qr = qrcode(typeNumber, level);
+  qr.addData(text);
+  qr.make();
+  const count = qr.getModuleCount();
+  const matrix: boolean[][] = [];
+  for (let row = 0; row < count; row++) {
+    const line: boolean[] = [];
+    for (let col = 0; col < count; col++) line.push(qr.isDark(row, col));
+    matrix.push(line);
+  }
+  return matrix;
+}

package/src/utils/qr/qrcode-generator.d.ts

@@ -0,0 +1,19 @@
+// Type declarations for the vendored MIT qrcode-generator (Kazuhiko Arase).
+// The implementation lives in ./qrcode-generator.js (ESM default export).
+export interface QRCodeModule {
+  /** Add a data segment (default mode "Byte"). */
+  addData(data: string, mode?: string): void;
+  /** Encode the added data and render the module matrix. */
+  make(): void;
+  /** Number of modules per side (the rendered matrix is count x count). */
+  getModuleCount(): number;
+  /** Whether the module at (row, col) is dark. */
+  isDark(row: number, col: number): boolean;
+}
+
+declare function qrcode(
+  typeNumber: number,
+  errorCorrectionLevel: "L" | "M" | "Q" | "H",
+): QRCodeModule;
+
+export default qrcode;