@ihyeon/flow-qa 0.0.0-stage → 0.1.0-alpha.2

package/node_modules/@hyeonse/design-system/src/preferences.ts

@@ -0,0 +1,87 @@
+export type ThemePreference = 'system' | 'light' | 'dark';
+export type AccentPreference = 'cobalt' | 'forest' | 'coral';
+export type DensityPreference = 'comfortable' | 'compact';
+export type CornersPreference = 'crisp' | 'soft';
+export type MotionPreference = 'full' | 'reduced';
+
+export type Preferences = {
+  theme: ThemePreference;
+  accent: AccentPreference;
+  density: DensityPreference;
+  corners: CornersPreference;
+  motion: MotionPreference;
+};
+
+export const preferencesKey = 'hyeonse-site-preferences';
+export const defaultPreferences: Preferences = {
+  theme: 'system',
+  accent: 'cobalt',
+  density: 'comfortable',
+  corners: 'crisp',
+  motion: 'full',
+};
+
+const options = {
+  theme: ['system', 'light', 'dark'],
+  accent: ['cobalt', 'forest', 'coral'],
+  density: ['comfortable', 'compact'],
+  corners: ['crisp', 'soft'],
+  motion: ['full', 'reduced'],
+} as const;
+
+export function validatePreferences(value: unknown): Preferences {
+  const input = value && typeof value === 'object' && !Array.isArray(value)
+    ? value as Record<string, unknown>
+    : {};
+  return {
+    theme: options.theme.includes(input.theme as ThemePreference) ? input.theme as ThemePreference : defaultPreferences.theme,
+    accent: options.accent.includes(input.accent as AccentPreference) ? input.accent as AccentPreference : defaultPreferences.accent,
+    density: options.density.includes(input.density as DensityPreference) ? input.density as DensityPreference : defaultPreferences.density,
+    corners: options.corners.includes(input.corners as CornersPreference) ? input.corners as CornersPreference : defaultPreferences.corners,
+    motion: options.motion.includes(input.motion as MotionPreference) ? input.motion as MotionPreference : defaultPreferences.motion,
+  };
+}
+
+export function parsePreferences(raw: string | null): Preferences {
+  if (!raw) return { ...defaultPreferences };
+  try { return validatePreferences(JSON.parse(raw)); }
+  catch { return { ...defaultPreferences }; }
+}
+
+export function serializePreferences(value: Preferences): string {
+  return JSON.stringify(validatePreferences(value));
+}
+
+export function resolvedTheme(theme: ThemePreference, systemDark: boolean): 'light' | 'dark' {
+  return theme === 'system' ? (systemDark ? 'dark' : 'light') : theme;
+}
+
+export function effectiveMotion(motion: MotionPreference, systemReduced: boolean): MotionPreference {
+  return systemReduced ? 'reduced' : motion;
+}
+
+// Root layout inserts this in <head> before CSS paints and suppresses hydration warnings on <html>.
+export function createPreferenceScript(storageKey = preferencesKey): string {
+  // A JSON string literal is used inside an inline script; escape HTML syntax too.
+  const safeKey = JSON.stringify(storageKey).replace(/[<>&\u2028\u2029]/g, character =>
+    `\\u${character.charCodeAt(0).toString(16).padStart(4, '0')}`);
+  return `(function(){
+  var defaults={theme:'system',accent:'cobalt',density:'comfortable',corners:'crisp',motion:'full'};
+  var allowed={theme:['system','light','dark'],accent:['cobalt','forest','coral'],density:['comfortable','compact'],corners:['crisp','soft'],motion:['full','reduced']};
+  var stored={};
+  try { var value=JSON.parse(localStorage.getItem(${safeKey})||'{}'); if(value&&typeof value==='object'&&!Array.isArray(value))stored=value; } catch(e) {}
+  var p={};
+  for(var key in defaults)p[key]=allowed[key].includes(stored[key])?stored[key]:defaults[key];
+  var dark=window.matchMedia&&window.matchMedia('(prefers-color-scheme: dark)').matches;
+  var reduced=window.matchMedia&&window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  var root=document.documentElement;
+  root.dataset.theme=p.theme==='system'?(dark?'dark':'light'):p.theme;
+  root.dataset.themePreference=p.theme;
+  root.dataset.accent=p.accent;
+  root.dataset.density=p.density;
+  root.dataset.corners=p.corners;
+  root.dataset.motion=reduced?'reduced':p.motion;
+})();`;
+}
+
+export const preferenceScript = createPreferenceScript();

package/node_modules/@hyeonse/design-system/src/react.tsx

@@ -0,0 +1,161 @@
+'use client';
+
+import { createContext, useCallback, useContext, useId, useLayoutEffect, useRef, useState } from 'react';
+import type { ReactNode } from 'react';
+import {
+  defaultPreferences, effectiveMotion, parsePreferences, preferencesKey,
+  resolvedTheme, serializePreferences, validatePreferences,
+} from './preferences.js';
+import type { Preferences, ThemePreference } from './preferences.js';
+export type Locale = 'ko' | 'en';
+const defaultEventName = 'hyeonse:preferences';
+
+type PreferenceContext = {
+  preferences: Preferences;
+  setPreference: <K extends keyof Preferences>(key: K, value: Preferences[K]) => void;
+  resetPreferences: () => void;
+};
+
+const Context = createContext<PreferenceContext | null>(null);
+
+function applyPreferences(preferences: Preferences, eventName: string) {
+  const root = document.documentElement;
+  const dark = window.matchMedia?.('(prefers-color-scheme: dark)').matches ?? false;
+  const reduced = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;
+  root.dataset.theme = resolvedTheme(preferences.theme, dark);
+  root.dataset.themePreference = preferences.theme;
+  root.dataset.accent = preferences.accent;
+  root.dataset.density = preferences.density;
+  root.dataset.corners = preferences.corners;
+  root.dataset.motion = effectiveMotion(preferences.motion, reduced);
+  window.dispatchEvent(new CustomEvent(eventName, { detail: preferences }));
+}
+
+function readPreferences(storageKey: string): Preferences {
+  try { return parsePreferences(window.localStorage.getItem(storageKey)); }
+  catch { return { ...defaultPreferences }; }
+}
+
+export function PreferencesProvider({ children, storageKey = preferencesKey, eventName = defaultEventName }: {
+  children: ReactNode; storageKey?: string; eventName?: string;
+}) {
+  const [preferences, setPreferences] = useState<Preferences>(defaultPreferences);
+  const preferencesRef = useRef<Preferences>(defaultPreferences);
+
+  useLayoutEffect(() => {
+    const stored = readPreferences(storageKey);
+    preferencesRef.current = stored;
+    setPreferences(stored);
+    applyPreferences(stored, eventName);
+
+    const themeQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const motionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+    const onSystemChange = () => applyPreferences(preferencesRef.current, eventName);
+    const onStorage = (event: StorageEvent) => {
+      if (event.key !== storageKey && event.key !== null) return;
+      const next = readPreferences(storageKey);
+      preferencesRef.current = next;
+      setPreferences(next);
+      applyPreferences(next, eventName);
+    };
+    themeQuery.addEventListener('change', onSystemChange);
+    motionQuery.addEventListener('change', onSystemChange);
+    window.addEventListener('storage', onStorage);
+    return () => {
+      themeQuery.removeEventListener('change', onSystemChange);
+      motionQuery.removeEventListener('change', onSystemChange);
+      window.removeEventListener('storage', onStorage);
+    };
+  }, [storageKey, eventName]);
+
+  const save = useCallback((next: Preferences) => {
+    const safe = validatePreferences(next);
+    preferencesRef.current = safe;
+    setPreferences(safe);
+    applyPreferences(safe, eventName);
+    try { window.localStorage.setItem(storageKey, serializePreferences(safe)); }
+    catch { /* Settings still work for this tab when storage is unavailable. */ }
+  }, [storageKey, eventName]);
+
+  const setPreference = useCallback(<K extends keyof Preferences>(key: K, value: Preferences[K]) => {
+    save({ ...preferencesRef.current, [key]: value });
+  }, [save]);
+
+  const resetPreferences = useCallback(() => save({ ...defaultPreferences }), [save]);
+
+  return <Context.Provider value={{ preferences, setPreference, resetPreferences }}>{children}</Context.Provider>;
+}
+
+export function usePreferences() {
+  const context = useContext(Context);
+  if (!context) throw new Error('PreferencesProvider가 필요합니다.');
+  return context;
+}
+
+const themeOptions: Record<Locale, { value: ThemePreference; label: string }[]> = {
+  ko: [{ value: 'system', label: '기기 설정' }, { value: 'light', label: '밝게' }, { value: 'dark', label: '어둡게' }],
+  en: [{ value: 'system', label: 'System' }, { value: 'light', label: 'Light' }, { value: 'dark', label: 'Dark' }],
+};
+
+export function ThemeToggle({ locale = 'ko' }: { locale?: Locale }) {
+  const { preferences, setPreference } = usePreferences();
+  const options = themeOptions[locale];
+  const current = options.find(option => option.value === preferences.theme)!;
+  const next = options[(options.findIndex(option => option.value === preferences.theme) + 1) % options.length]!;
+  return <button
+    type="button"
+    className={'hds-themeToggle'}
+    onClick={() => setPreference('theme', next.value)}
+    aria-label={locale === 'ko' ? `현재 테마 ${current.label}. ${next.label} 모드로 변경` : `Current theme: ${current.label}. Switch to ${next.label} mode`}
+    title={locale === 'ko' ? `현재 ${current.label} · 다음 ${next.label}` : `Current: ${current.label} · Next: ${next.label}`}
+  >
+    <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
+      {preferences.theme === 'system' && <><rect x="3" y="4" width="18" height="13" rx="1" /><path d="M8 21h8M12 17v4" /></>}
+      {preferences.theme === 'light' && <><circle cx="12" cy="12" r="4" /><path d="M12 2v2m0 16v2M2 12h2m16 0h2M4.9 4.9l1.4 1.4m11.4 11.4 1.4 1.4m0-14.2-1.4 1.4M6.3 17.7l-1.4 1.4" /></>}
+      {preferences.theme === 'dark' && <path d="M20.3 15.7A8.5 8.5 0 0 1 8.3 3.7a8.5 8.5 0 1 0 12 12Z" />}
+    </svg>
+    <span aria-hidden="true">{current.label}</span>
+  </button>;
+}
+
+type Choice<K extends keyof Preferences> = { value: Preferences[K]; label: string };
+
+function RadioGroup<K extends 'theme' | 'density' | 'corners' | 'motion'>({
+  field, legend, choices, name,
+}: { field: K; legend: string; choices: Choice<K>[]; name: string }) {
+  const { preferences, setPreference } = usePreferences();
+  return <fieldset className={'hds-group'}>
+    <legend>{legend}</legend>
+    <div className={'hds-options'}>
+      {choices.map(choice => <label className={'hds-radioOption'} key={choice.value}>
+        <input type="radio" name={`${name}-${field}`} value={choice.value} checked={preferences[field] === choice.value} onChange={() => setPreference(field, choice.value)} />
+        <span>{choice.label}</span>
+      </label>)}
+    </div>
+  </fieldset>;
+}
+
+export function PreferencesPanel({ locale = 'ko' }: { locale?: Locale }) {
+  const { preferences, setPreference, resetPreferences } = usePreferences();
+  const panelId = useId();
+  const en = locale === 'en';
+  const accentOptions = en
+    ? [{ value: 'cobalt', label: 'Cobalt' }, { value: 'forest', label: 'Forest' }, { value: 'coral', label: 'Coral' }] as const
+    : [{ value: 'cobalt', label: '코발트' }, { value: 'forest', label: '포레스트' }, { value: 'coral', label: '코랄' }] as const;
+  return <section className={'hds-panel'} aria-labelledby={`${panelId}-title`}>
+    <div className={'hds-heading'}><div><span className={'hds-kicker'}>DISPLAY / CONTROL</span><h2 id={`${panelId}-title`}>{en ? 'Display settings' : '화면 설정'}</h2></div><p>{en ? 'Adjust the display for comfortable reading.' : '읽기 편한 화면으로 바꿔 보세요.'}</p></div>
+    <div className={'hds-groups'}>
+      <RadioGroup field="theme" legend={en ? 'Theme' : '테마'} choices={themeOptions[locale]} name={panelId} />
+      <fieldset className={'hds-group'}>
+        <legend>{en ? 'Accent color' : '강조 색상'}</legend>
+        <div className={'hds-accents'}>
+          {accentOptions.map(({ value, label }) => <button type="button" key={value} className={`${'hds-accentButton'} ${`hds-${value}`}`} aria-pressed={preferences.accent === value} aria-label={en ? `${label} accent color${preferences.accent === value ? ', selected' : ''}` : `${label} 강조 색상${preferences.accent === value ? ', 선택됨' : ''}`} onClick={() => setPreference('accent', value)}><span className={'hds-swatch'} aria-hidden="true">{preferences.accent === value ? '✓' : ''}</span><span>{label}</span></button>)}
+        </div>
+      </fieldset>
+      <RadioGroup field="density" legend={en ? 'Spacing' : '간격'} choices={en ? [{ value: 'comfortable', label: 'Default' }, { value: 'compact', label: 'Compact' }] : [{ value: 'comfortable', label: '기본' }, { value: 'compact', label: '촘촘하게' }]} name={panelId} />
+      <RadioGroup field="corners" legend={en ? 'Corners' : '모서리'} choices={en ? [{ value: 'crisp', label: 'Sharp' }, { value: 'soft', label: 'Rounded' }] : [{ value: 'crisp', label: '각지게' }, { value: 'soft', label: '부드럽게' }]} name={panelId} />
+      <RadioGroup field="motion" legend={en ? 'Motion' : '움직임'} choices={en ? [{ value: 'full', label: 'Default' }, { value: 'reduced', label: 'Reduced' }] : [{ value: 'full', label: '기본' }, { value: 'reduced', label: '줄이기' }]} name={panelId} />
+    </div>
+    <div className={'hds-footer'}><p role="status" aria-live="polite">{en ? 'Current settings: ' : '현재 설정: '}{themeOptions[locale].find(option => option.value === preferences.theme)?.label}, {accentOptions.find(option => option.value === preferences.accent)?.label}, {en ? (preferences.density === 'compact' ? 'compact spacing' : 'default spacing') : (preferences.density === 'compact' ? '촘촘한 간격' : '기본 간격')}, {en ? (preferences.corners === 'soft' ? 'rounded corners' : 'sharp corners') : (preferences.corners === 'soft' ? '부드러운 모서리' : '각진 모서리')}, {en ? (preferences.motion === 'reduced' ? 'reduced motion' : 'default motion') : (preferences.motion === 'reduced' ? '움직임 줄이기' : '기본 움직임')}</p><button type="button" onClick={resetPreferences}>{en ? 'Reset to defaults' : '기본값으로 되돌리기'}</button></div>
+  </section>;
+}

package/node_modules/@hyeonse/design-system/src/tokens.css

@@ -0,0 +1,75 @@
+:root {
+  color-scheme: light;
+  --ink: #101114;
+  --paper: #ffffff;
+  --muted: #5a606b;
+  --line: #d8dbe3;
+  --surface: #f3f5f8;
+  --surface-raised: #ffffff;
+  --accent-solid: #204cfc;
+  --accent-text: #204cfc;
+  --palette-cobalt: #204cfc;
+  --palette-forest: #087451;
+  --palette-coral: #b93d20;
+  --on-accent: #ffffff;
+  --blue: var(--accent-text);
+  --about-surface: var(--accent-solid);
+  --about-ink: #ffffff;
+  --about-muted: #dce3ff;
+  --inverse-surface: #101114;
+  --inverse-ink: #ffffff;
+  --radius-card: 0px;
+  --radius-control: 2px;
+  --space-factor: 1;
+  --font-sans: 'DM Sans', 'Noto Sans KR', sans-serif;
+  --gutter: clamp(22px, 4.1vw, 72px);
+  --control-min-size: 44px;
+  --text-control: 12px;
+}
+
+@media (max-width: 700px) {
+  :root { --gutter: 22px; }
+}
+
+:root[data-accent='forest'] { --accent-solid: #087451; --accent-text: #087451; --about-muted: #d4f5e8; }
+:root[data-accent='coral'] { --accent-solid: #b93d20; --accent-text: #b93d20; --about-muted: #ffe1d9; }
+:root[data-density='compact'] { --space-factor: .8; }
+:root[data-corners='soft'] { --radius-card: 20px; --radius-control: 12px; }
+
+:root[data-theme='dark'] {
+  color-scheme: dark;
+  --ink: #f2f4f8;
+  --paper: #111318;
+  --muted: #b2b8c4;
+  --line: #444a56;
+  --surface: #1c2028;
+  --surface-raised: #282d37;
+  --accent-text: #9aafff;
+  --about-surface: #1b2540;
+  --about-ink: #f5f7ff;
+  --about-muted: #c1c9de;
+  --inverse-surface: #f2f4f8;
+  --inverse-ink: #101114;
+}
+
+:root[data-theme='dark'][data-accent='forest'] { --accent-text: #68dfb1; --about-surface: #173029; --about-muted: #b7e1d1; }
+:root[data-theme='dark'][data-accent='coral'] { --accent-text: #ffa58e; --about-surface: #35231f; --about-muted: #e7c1b8; }
+
+/* CSS alone follows the OS when scripting is disabled and no resolved theme is set. */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    color-scheme: dark;
+    --ink: #f2f4f8;
+    --paper: #111318;
+    --muted: #b2b8c4;
+    --line: #444a56;
+    --surface: #1c2028;
+    --surface-raised: #282d37;
+    --accent-text: #9aafff;
+    --about-surface: #1b2540;
+    --about-ink: #f5f7ff;
+    --about-muted: #c1c9de;
+    --inverse-surface: #f2f4f8;
+    --inverse-ink: #101114;
+  }
+}

package/node_modules/@hyeonse/design-system/tests/audit.test.mjs

@@ -0,0 +1,30 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import {mkdtemp, mkdir, writeFile, rm} from 'node:fs/promises';
+import {tmpdir} from 'node:os';
+import {join} from 'node:path';
+import {fileURLToPath} from 'node:url';
+import {spawnSync} from 'node:child_process';
+const cli=fileURLToPath(new URL('../scripts/audit-tokens.mjs',import.meta.url));
+test('CSS audit catches new drift and bounds material exceptions by count',async()=>{
+ const root=await mkdtemp(join(tmpdir(),'hds-audit-'));
+ try{
+  await mkdir(join(root,'src'));
+  const config={paths:['src']};
+  const writeConfig=()=>writeFile(join(root,'design-system.audit.json'),JSON.stringify(config));
+  const css=join(root,'src','sample.css');
+  const run=()=>spawnSync(process.execPath,[cli,root],{encoding:'utf8'});
+  await writeConfig();
+  await writeFile(css,'.card {color:var(--ink);background:var(--paper)} /* #abcdef is a note */');
+  assert.equal(run().status,0);
+  await writeFile(css,'.card {color:#ff00ff}');
+  assert.equal(run().status,1);assert.match(run().stderr,/raw color/);
+  config.exceptions={'src/sample.css':{reason:'Illustration material',colors:{'#ff00ff':1}}};
+  await writeConfig();assert.equal(run().status,0);
+  await writeFile(css,'.card {color:#ff00ff; border-color:#ff00ff}');assert.equal(run().status,1);
+  await writeFile(css,':root {--ink:var(--accent-text)}');assert.match(run().stderr,/shared token --ink/);
+  await writeFile(css,'.card {color:var(--ink)}');
+  await writeFile(join(root,'src','new-file.css'),'.new {background:rgb(0 0 0)}');
+  assert.match(run().stderr,/new-file\.css: raw color/);
+ }finally{await rm(root,{recursive:true,force:true});}
+});

package/node_modules/@hyeonse/design-system/tests/preferences.test.mjs

@@ -0,0 +1,86 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import vm from 'node:vm';
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import {
+  createPreferenceScript, defaultPreferences, effectiveMotion, parsePreferences,
+  preferenceScript, preferencesKey, resolvedTheme, serializePreferences, validatePreferences,
+} from '../dist/preferences.js';
+import { PreferencesPanel, PreferencesProvider, ThemeToggle } from '../dist/react.js';
+
+test('malformed and untrusted preferences fall back field by field', () => {
+  assert.deepEqual(parsePreferences('{bad'), defaultPreferences);
+  assert.deepEqual(parsePreferences('[]'), defaultPreferences);
+  assert.deepEqual(validatePreferences({ theme: 'dark', accent: 'unknown', motion: 'reduced' }), {
+    ...defaultPreferences, theme: 'dark', motion: 'reduced',
+  });
+  assert.deepEqual(JSON.parse(serializePreferences({ ...defaultPreferences, theme: 'dark', accent: 'bad' })), {
+    ...defaultPreferences, theme: 'dark',
+  });
+  assert.equal(resolvedTheme('system', true), 'dark');
+  assert.equal(resolvedTheme('system', false), 'light');
+  assert.equal(resolvedTheme('light', true), 'light');
+  assert.equal(effectiveMotion('full', true), 'reduced');
+  assert.equal(effectiveMotion('full', false), 'full');
+});
+
+function runInitialScript({ key = preferencesKey, stored, dark = false, reduced = false, storageThrows = false } = {}) {
+  const dataset = {};
+  const requestedKeys = [];
+  const context = {
+    document: { documentElement: { dataset } },
+    localStorage: { getItem(requested) {
+      requestedKeys.push(requested);
+      if (storageThrows) throw new Error('blocked');
+      return stored ?? null;
+    } },
+    window: { matchMedia(query) {
+      return { matches: query.includes('color-scheme') ? dark : reduced };
+    } },
+  };
+  vm.runInNewContext(createPreferenceScript(key), context);
+  return { dataset, requestedKeys };
+}
+
+test('initial script uses the same defaults, validation and OS overrides', () => {
+  assert.equal(preferenceScript, createPreferenceScript());
+  const stored = JSON.stringify({ theme: 'system', accent: 'forest', density: 'invalid', corners: 'soft', motion: 'full' });
+  assert.deepEqual(runInitialScript({ stored, dark: true, reduced: true }).dataset, {
+    theme: 'dark', themePreference: 'system', accent: 'forest', density: 'comfortable', corners: 'soft', motion: 'reduced',
+  });
+  assert.deepEqual(runInitialScript({ stored: '{bad', dark: true }).dataset, {
+    theme: 'dark', themePreference: 'system', accent: 'cobalt', density: 'comfortable', corners: 'crisp', motion: 'full',
+  });
+  assert.deepEqual(runInitialScript({ storageThrows: true }).dataset, {
+    theme: 'light', themePreference: 'system', accent: 'cobalt', density: 'comfortable', corners: 'crisp', motion: 'full',
+  });
+});
+
+test('custom storage key is honored and safe inside inline HTML', () => {
+  const key = '</script><script>alert(1)</script>\u2028';
+  const script = createPreferenceScript(key);
+  assert.equal(script.includes('</script>'), false);
+  assert.equal(script.includes('<script>'), false);
+  assert.equal(script.includes('\u2028'), false);
+  assert.deepEqual(runInitialScript({ key }).requestedKeys, [key]);
+});
+
+test('SSR retains localized semantics and isolates multiple panels', () => {
+  const html = renderToStaticMarkup(React.createElement(PreferencesProvider, null,
+    React.createElement(React.Fragment, null,
+      React.createElement(ThemeToggle, { locale: 'en' }),
+      React.createElement(PreferencesPanel, { locale: 'ko' }),
+      React.createElement(PreferencesPanel, { locale: 'en' }),
+    )));
+  assert.match(html, /Current theme: System\. Switch to Light mode/);
+  assert.match(html, /화면 설정/);
+  assert.match(html, /Display settings/);
+  const ids = [...html.matchAll(/<h2 id="([^"]+)"/g)].map(match => match[1]);
+  assert.equal(ids.length, 2);
+  assert.notEqual(ids[0], ids[1]);
+  assert.ok(ids.every(id => html.includes(`aria-labelledby="${id}"`)));
+  const themeNames = [...html.matchAll(/name="([^"]+-theme)"/g)].map(match => match[1]);
+  assert.equal(new Set(themeNames).size, 2);
+  assert.match(html, /hds-panel/);
+});

package/node_modules/@hyeonse/design-system/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["DOM", "ES2020"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "react-jsx",
+    "declaration": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmitOnError": true,
+    "rootDir": "src",
+    "outDir": "dist"
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"]
+}

package/package.json

@@ -1,6 +1,75 @@
 {
   "name": "@ihyeon/flow-qa",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0-alpha.2",
+  "license": "MIT",
+  "author": "Hyeonse Im",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hyeonse-swing/flow-qa.git"
+  },
+  "homepage": "https://github.com/hyeonse-swing/flow-qa#readme",
+  "bugs": {
+    "url": "https://github.com/hyeonse-swing/flow-qa/issues"
+  },
+  "keywords": [
+    "qa",
+    "e2e",
+    "testing",
+    "cli",
+    "ai",
+    "local-first"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "tag": "alpha",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "files": [
+    "dist",
+    "licenses",
+    "docs/*.md",
+    "LICENSE",
+    "THIRD_PARTY_NOTICES.md",
+    "README.ko.md"
+  ],
+  "bundleDependencies": [
+    "@hyeonse/design-system"
+  ],
+  "description": "Turn user flows into repeatable tests and evidence-backed QA reports.",
+  "type": "module",
+  "engines": {
+    "node": ">=24"
+  },
+  "bin": {
+    "flow-qa": "./dist/bin/flow-qa.mjs"
+  },
+  "scripts": {
+    "qa": "node bin/flow-qa.mjs",
+    "ui": "node src/ui/entry.ts",
+    "ui:demo": "node src/ui/entry.ts --demo",
+    "test": "node --test tests/*.test.ts",
+    "typecheck": "tsc --noEmit",
+    "build": "node scripts/build.mjs",
+    "prepack": "npm run build",
+    "check:package": "npm run build && node scripts/check-package.mjs",
+    "smoke:package": "node scripts/package-smoke.mjs",
+    "check": "npm run typecheck && npm test && npm run check:ui",
+    "check:ui": "node --check src/ui/public/app.js && node --check src/ui/public/display.js && node --check src/ui/public/i18n.js && hds-audit .",
+    "demo:serve": "node examples/demo/server.ts",
+    "demo:smoke": "node scripts/demo-smoke.ts",
+    "smoke:ui": "node scripts/ui-i18n-smoke.mjs"
+  },
+  "dependencies": {
+    "@ai-sdk/openai-compatible": "3.0.53",
+    "@e2e-dev/web": "0.11.1",
+    "@hyeonse/design-system": "https://codeload.github.com/hyeonse-swing/hyeonse-design-system/tar.gz/38978c6a86f422fc0e63e919f600bc2dd3451e5c",
+    "ai": "7.0.107",
+    "e2e": "0.16.0",
+    "playwright": "1.63.0",
+    "zod": "4.6.1"
+  },
+  "devDependencies": {
+    "@types/node": "^24.0.0",
+    "typescript": "^5.9.3"
+  }
+}