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

package/node_modules/@hyeonse/design-system/licenses/DM-Sans-LICENSE.txt

@@ -0,0 +1,93 @@
+Copyright 2014 The DM Sans Project Authors (https://github.com/googlefonts/dm-fonts) DMSans-Italic[opsz,wght].ttf: Copyright 2014 The DM Sans Project Authors (https://github.com/googlefonts/dm-fonts)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/node_modules/@hyeonse/design-system/licenses/Noto-Sans-KR-LICENSE.txt

@@ -0,0 +1,93 @@
+Google Inc.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/node_modules/@hyeonse/design-system/licenses/arla6ka-MIT.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Arlan Marat
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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

@@ -0,0 +1,35 @@
+{
+  "name": "@hyeonse/design-system",
+  "version": "0.1.0",
+  "license": "MIT",
+  "repository": { "type": "git", "url": "https://github.com/hyeonse-swing/hyeonse-design-system.git" },
+  "type": "module",
+  "sideEffects": ["./dist/tokens.css", "./dist/components.css"],
+  "files": ["dist", "scripts/audit-tokens.mjs", "THIRD_PARTY_NOTICES.md", "licenses"],
+  "bin": { "hds-audit": "./scripts/audit-tokens.mjs" },
+  "exports": {
+    "./tokens.css": "./dist/tokens.css",
+    "./components.css": "./dist/components.css",
+    "./preferences": {
+      "types": "./dist/preferences.d.ts",
+      "default": "./dist/preferences.js"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "default": "./dist/react.js"
+    }
+  },
+  "scripts": {
+    "build": "node scripts/build.mjs",
+    "check": "tsc --noEmit",
+    "test": "node --test tests/*.test.mjs"
+  },
+  "peerDependencies": { "react": ">=19 <20" },
+  "peerDependenciesMeta": { "react": { "optional": true } },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "react": "19.3.0",
+    "react-dom": "19.3.0",
+    "typescript": "~5.9.3"
+  }
+}

package/node_modules/@hyeonse/design-system/scripts/audit-tokens.mjs

@@ -0,0 +1,48 @@
+#!/usr/bin/env node
+import { readFile, readdir } from 'node:fs/promises';
+import { resolve, relative } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+// Audit CSS values, including new files. Material colors need counted, documented exceptions.
+const root = resolve(process.argv[2] || '.');
+const configPath = resolve(root, process.argv[3] || 'design-system.audit.json');
+const config = JSON.parse(await readFile(configPath, 'utf8'));
+const tokenPath = fileURLToPath(new URL('../dist/tokens.css', import.meta.url));
+const withoutComments = source => source.replace(/\/\*[\s\S]*?\*\//g, '');
+const tokenSource = withoutComments(await readFile(tokenPath, 'utf8'));
+const systemTokens = new Set([...tokenSource.matchAll(/(--[\w-]+)\s*:/g)].map(match => match[1]));
+const rawColors = /#[\da-f]{8}\b|#[\da-f]{6}\b|#[\da-f]{4}\b|#[\da-f]{3}\b|\b(?:rgba?|hsla?|oklch|oklab|lab|lch|color)\([^)]*\)/gi;
+const errors = [];
+const files = [];
+async function walk(directory) {
+  for (const entry of await readdir(directory, { withFileTypes: true })) {
+    if (entry.name.startsWith('.') || entry.name === 'node_modules') continue;
+    const path = resolve(directory, entry.name);
+    if (entry.isDirectory()) await walk(path);
+    else if (entry.name.endsWith('.css')) files.push(path);
+  }
+}
+for (const directory of config.paths || ['src']) await walk(resolve(root, directory));
+for (const file of files) {
+  const path = relative(root, file).replaceAll('\\', '/');
+  const source = withoutComments(await readFile(file, 'utf8'));
+  const exception = config.exceptions?.[path];
+  if (exception && !exception.reason?.trim()) errors.push(`${path}: exception needs a reason`);
+  const counts = {};
+  for (const match of source.matchAll(rawColors)) {
+    const value = match[0].toLowerCase().replace(/\s+/g, ' ');
+    counts[value] = (counts[value] || 0) + 1;
+  }
+  for (const [value, count] of Object.entries(counts)) {
+    if (count > (exception?.colors?.[value] || 0)) errors.push(`${path}: raw color ${value} (${count} uses; allowed ${exception?.colors?.[value] || 0})`);
+  }
+  for (const match of source.matchAll(/(--[\w-]+)\s*:/g)) {
+    if (systemTokens.has(match[1]) && !config.overrideTokens?.[path]?.includes(match[1])) {
+      errors.push(`${path}: shared token ${match[1]} must be changed in the design system`);
+    }
+  }
+}
+if (errors.length) {
+  console.error(errors.join('\n'));
+  process.exitCode = 1;
+} else console.log(`Design-system CSS audit passed: ${files.length} files, ${systemTokens.size} shared tokens.`);

package/node_modules/@hyeonse/design-system/scripts/build.mjs

@@ -0,0 +1,12 @@
+import { cpSync, mkdirSync, rmSync } from 'node:fs';
+import { execFileSync } from 'node:child_process';
+import { fileURLToPath } from 'node:url';
+import { dirname, resolve } from 'node:path';
+
+const root = resolve(dirname(fileURLToPath(import.meta.url)), '..');
+rmSync(resolve(root, 'dist'), { recursive: true, force: true });
+mkdirSync(resolve(root, 'dist'), { recursive: true });
+execFileSync(resolve(root, 'node_modules/.bin/tsc'), ['-p', resolve(root, 'tsconfig.json')], { stdio: 'inherit' });
+for (const name of ['tokens.css', 'components.css']) {
+  cpSync(resolve(root, 'src', name), resolve(root, 'dist', name));
+}

package/node_modules/@hyeonse/design-system/showcase.css

@@ -0,0 +1,75 @@
+@font-face{font-family:'DM Sans';src:url('./docs/assets/fonts/dm-sans.woff2') format('woff2');font-display:swap;font-weight:100 900}
+@font-face{font-family:'Noto Sans KR';src:url('./docs/assets/fonts/noto-kr-subset.woff2') format('woff2');font-display:swap;font-weight:100 900}
+*,*::before,*::after{box-sizing:border-box}
+html{scroll-behavior:smooth}
+body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans','Noto Sans KR',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
+button,input{font:inherit}
+a{color:inherit}
+button{cursor:pointer}
+button:disabled{cursor:not-allowed}
+:focus-visible{outline:3px solid var(--accent-text);outline-offset:3px}
+::selection{background:var(--accent-solid);color:var(--on-accent)}
+.skip-link{position:absolute;z-index:20;left:16px;top:-60px;padding:12px 18px;background:var(--accent-solid);color:var(--on-accent)}
+.skip-link:focus{top:12px}
+.catalog-shell{max-width:1680px;margin:auto;padding:0 clamp(22px,4vw,72px)}
+.masthead{height:98px;display:flex;align-items:center;gap:48px;border-bottom:1px solid var(--line)}
+.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-size:10px;line-height:1.2;font-weight:800;letter-spacing:.1em}
+.brand-mark{display:flex;align-items:center;justify-content:center;width:35px;height:35px;border:2px solid var(--ink);font-size:20px;font-weight:800;letter-spacing:-.12em}
+.brand-mark span{color:var(--accent-text)}
+.masthead nav{display:flex;gap:clamp(18px,2.5vw,40px);margin-left:auto}
+.masthead nav a{text-decoration:none;font-size:12px;font-weight:700}
+.masthead nav a:hover,.text-action:hover,.footer a:hover{color:var(--accent-text)}
+.masthead-version,.hero-index{font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--muted);white-space:nowrap}
+.hero{min-height:720px;position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:47px 0 0;overflow:hidden}
+.hero::after{content:'';position:absolute;right:-12%;top:7%;width:46%;aspect-ratio:1;border:1px solid var(--line);border-radius:50%;box-shadow:0 0 0 95px color-mix(in srgb,var(--accent-solid) 4%,transparent),0 0 0 190px color-mix(in srgb,var(--accent-solid) 3%,transparent);pointer-events:none}
+.hero-top,.hero-bottom,.hero-grid{position:relative;z-index:1;display:flex;justify-content:space-between;gap:20px}
+.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:10px;font-weight:800;letter-spacing:.16em;color:var(--accent-text)}
+.signal-dot{width:7px;height:7px;border-radius:50%;background:var(--accent-solid)}
+.hero h1{position:relative;z-index:1;margin:84px 0 42px;font-size:clamp(64px,10.8vw,172px);line-height:.93;letter-spacing:-.09em;font-weight:800}
+.hero h1 em{font-style:normal;color:var(--accent-text)}
+.hero-bottom{align-items:end;padding-bottom:62px}
+.hero-bottom p{max-width:530px;margin:0;color:var(--muted);font-size:clamp(16px,1.4vw,20px);line-height:1.7;word-break:keep-all}
+.text-action{min-width:168px;display:flex;justify-content:space-between;align-items:center;gap:30px;border-bottom:1px solid var(--ink);padding-bottom:10px;text-decoration:none;font-size:12px;font-weight:800}
+.hero-grid{padding:22px 0;border-top:1px solid var(--line);font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--muted)}
+.catalog-section{padding:clamp(85px,9vw,150px) 0;border-bottom:1px solid var(--line);scroll-margin-top:20px}
+.section-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:50px}
+.section-heading h2{margin:16px 0 0;font-size:clamp(38px,5.3vw,76px);line-height:1;letter-spacing:-.075em}
+.section-heading>p{max-width:335px;margin:0 0 3px;color:var(--muted);font-size:14px;line-height:1.7;word-break:keep-all}
+.foundation-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
+.sample-panel{min-width:0;min-height:520px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);padding:clamp(25px,3vw,46px);display:flex;flex-direction:column}
+.panel-top,.control-card-head{display:flex;justify-content:space-between;gap:15px;font-size:10px;letter-spacing:.12em;font-weight:800;color:var(--muted)}
+.type-display{margin:auto 0 25px;font-size:clamp(130px,16vw,250px);font-weight:700;line-height:.9;letter-spacing:-.12em}
+.type-dot{color:var(--accent-text)}
+.type-panel h3,.control-card h3{margin:0 0 13px;font-size:clamp(24px,2.5vw,38px);line-height:1.16;letter-spacing:-.065em}
+.type-panel>p{max-width:455px;margin:0;color:var(--muted);font-size:14px;line-height:1.75;word-break:keep-all}
+.type-meta{display:flex;gap:24px;margin-top:32px;font-size:10px;letter-spacing:.1em;font-weight:800;color:var(--muted)}
+.swatch-stack{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(2,minmax(150px,1fr));gap:8px;margin:42px 0 22px;flex:1}
+.swatch{min-width:0;display:flex;flex-direction:column;justify-content:space-between;padding:18px;border:1px solid var(--line);font-size:20px;font-weight:700;letter-spacing:-.04em;border-radius:var(--radius-control)}
+.swatch code{font-family:inherit;font-size:10px;letter-spacing:0;font-weight:700}
+.swatch-paper{background:var(--paper);color:var(--ink)}.swatch-surface{background:var(--surface-raised);color:var(--ink)}.swatch-accent{background:var(--accent-solid);color:var(--on-accent);border-color:transparent}.swatch-inverse{background:var(--inverse-surface);color:var(--inverse-ink);border-color:transparent}
+.sample-note{margin:0;color:var(--muted);font-size:12px;line-height:1.65}
+.token-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:16px;border:1px solid var(--line);border-radius:var(--radius-card)}
+.token-strip>div{min-width:0;display:grid;grid-template-columns:17px 1fr;gap:4px 10px;padding:20px 24px;border-right:1px solid var(--line)}
+.token-strip>div:last-child{border-right:0}.token-strip code{font-family:inherit;font-size:11px;font-weight:800}.token-strip small{grid-column:2;color:var(--muted);font-size:11px}
+.token-chip{width:16px;height:16px;display:block;border-radius:50%;border:1px solid var(--line)}.token-ink{background:var(--ink)}.token-muted{background:var(--muted)}.token-line{background:var(--line)}.token-accent{background:var(--accent-text)}
+.control-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
+.control-card{min-width:0;min-height:335px;padding:clamp(24px,3vw,40px);border:1px solid var(--line);border-radius:var(--radius-card);background:var(--surface-raised)}
+.control-card h3{margin:35px 0 30px;font-size:28px}
+.button-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.sample-button{min-height:44px;padding:12px 17px;border-radius:var(--radius-control);font-size:12px;font-weight:800}.sample-button.primary{background:var(--accent-solid);color:var(--on-accent);border:1px solid var(--accent-solid)}.sample-button.primary:not(:disabled):hover{filter:brightness(.88)}.sample-button.secondary{color:var(--ink);background:transparent;border:1px solid var(--line)}.sample-button.secondary:hover{border-color:var(--accent-text);color:var(--accent-text)}.sample-button:disabled{opacity:.42}.sample-button span{padding-left:15px}
+.control-feedback,.form-card p{margin:22px 0 0;color:var(--muted);font-size:12px;line-height:1.6}
+.sample-fieldset{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}.sample-fieldset legend{width:100%;margin-bottom:10px;color:var(--muted);font-size:12px}.sample-choice{position:relative}.sample-choice input,.segmented input,.accent-choices input{position:absolute;opacity:0;width:100%;height:100%;inset:0;margin:0;cursor:pointer}.sample-choice span{display:block;padding:11px 16px;min-height:44px;border:1px solid var(--line);border-radius:var(--radius-control);font-size:12px;font-weight:700}.sample-choice input:checked+span{border-color:var(--accent-text);color:var(--accent-text);box-shadow:inset 0 0 0 1px var(--accent-text)}.sample-choice input:focus-visible+span,.segmented input:focus-visible+span,.accent-choices input:focus-visible+span{outline:3px solid var(--accent-text);outline-offset:3px}
+.check-row{display:flex;align-items:center;gap:10px;margin-top:25px;font-size:12px;font-weight:700}.check-row input{width:18px;height:18px;accent-color:var(--accent-solid)}
+.form-card label{display:block;font-size:12px;font-weight:800;margin:16px 0 8px}.form-card input{width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-control);background:var(--paper);color:var(--ink);outline:none}.form-card input:focus{border-color:var(--accent-text);box-shadow:0 0 0 2px var(--accent-text)}.form-card input:disabled{opacity:.5;background:var(--surface)}.form-card p{margin:8px 0 20px}
+.status-line{display:flex;flex-wrap:wrap;gap:8px}.status-pill{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:5px 10px;border:1px solid var(--line);border-radius:999px;font-size:11px;font-weight:800}.status-pill.selected{border-color:var(--accent-text);color:var(--accent-text)}.status-pill i{width:6px;height:6px;border-radius:50%;background:currentColor}.status-pill.muted{color:var(--muted);opacity:.55}.status-preview{margin-top:25px;padding:24px;background:var(--inverse-surface);color:var(--inverse-ink);border-radius:var(--radius-card)}.status-preview span{font-size:10px;font-weight:800;letter-spacing:.14em;opacity:.65}.status-preview strong{display:block;margin-top:16px;font-size:24px;letter-spacing:-.06em}.status-preview p{font-size:12px;opacity:.72;margin:5px 0 0}
+.preferences-section{padding-bottom:145px}.settings-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,7vw,120px);align-items:start}.settings-intro{position:sticky;top:40px}.index-large{font-size:clamp(80px,12vw,170px);font-weight:800;letter-spacing:-.1em;line-height:1;color:var(--accent-text)}.index-large span{font-size:18px;letter-spacing:0;color:var(--muted)}.settings-intro p{max-width:410px;margin:30px 0;color:var(--muted);font-size:18px;line-height:1.7;word-break:keep-all}.settings-current{display:inline-block;border-left:3px solid var(--accent-solid);padding:8px 0 8px 14px;font-size:12px;font-weight:800}
+.settings-form{border-top:1px solid var(--line)}.settings-form fieldset{border:0;border-bottom:1px solid var(--line);margin:0;padding:26px 0 28px}.settings-form legend{width:100%;display:flex;justify-content:space-between;margin-bottom:16px;font-size:14px;font-weight:800}.settings-form legend span{font-size:11px;color:var(--muted)}.segmented,.accent-choices{display:flex;flex-wrap:wrap;gap:8px}.segmented label,.accent-choices label{position:relative;cursor:pointer}.segmented span{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;border:1px solid var(--line);border-radius:var(--radius-control);font-size:12px;font-weight:700}.segmented input:checked+span{border-color:var(--accent-text);box-shadow:inset 0 0 0 1px var(--accent-text);color:var(--accent-text)}.segmented label:hover span,.accent-choices label:hover>span:last-child{border-color:var(--accent-text)}
+.accent-choices label{display:flex;align-items:center;gap:8px;min-height:44px;padding:6px 12px;border:1px solid var(--line);border-radius:var(--radius-control);font-size:12px;font-weight:700}.accent-choices label:has(input:checked){border-color:var(--accent-text);box-shadow:inset 0 0 0 1px var(--accent-text)}.accent-choices label:has(input:focus-visible){outline:3px solid var(--accent-text);outline-offset:3px}.accent-circle{width:22px;height:22px;border-radius:50%}.cobalt{background:#204cfc}.forest{background:#087451}.coral{background:#b93d20}
+.reset-button{margin-top:20px;display:flex;justify-content:space-between;width:100%;padding:15px 0;border:0;border-bottom:1px solid var(--ink);background:none;color:var(--ink);font-size:12px;font-weight:800}.reset-button:hover{color:var(--accent-text);border-color:var(--accent-text)}
+.footer{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:34px 0 50px;font-size:11px}.footer>span{font-weight:800;letter-spacing:.1em}.footer p{color:var(--muted)}.footer a{text-decoration:none;font-weight:800}
+:root[data-density='compact'] .catalog-section{padding-top:calc(clamp(85px,9vw,150px)*var(--space-factor));padding-bottom:calc(clamp(85px,9vw,150px)*var(--space-factor))}:root[data-density='compact'] .sample-panel,:root[data-density='compact'] .control-card{padding:calc(clamp(24px,3vw,40px)*var(--space-factor))}
+:root[data-motion='reduced'] *, :root[data-motion='reduced'] *::before, :root[data-motion='reduced'] *::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}
+@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
+@media(max-width:900px){.masthead-version{display:none}.foundation-grid,.control-grid,.settings-layout{grid-template-columns:1fr}.settings-intro{position:static}.hero{min-height:640px}.hero::after{right:-25%;width:65%}.sample-panel{min-height:450px}.settings-intro p{font-size:16px}}
+@media(max-width:650px){.catalog-shell{padding:0 20px}.masthead{height:auto;min-height:80px;flex-wrap:wrap;gap:8px 20px;padding:16px 0}.masthead nav{order:2;width:100%;margin:0;justify-content:space-between;padding:8px 0}.masthead nav a{font-size:11px}.hero{min-height:650px}.hero h1{margin:100px 0 30px;font-size:clamp(58px,13vw,90px)}.hero-bottom{display:block}.hero-bottom p{font-size:15px}.text-action{margin-top:28px;max-width:200px}.hero-grid span:last-child{display:none}.section-heading{display:block}.section-heading>p{margin-top:24px}.sample-panel{min-height:420px}.swatch-stack{grid-template-rows:repeat(2,120px)}.token-strip{grid-template-columns:repeat(2,1fr)}.token-strip>div:nth-child(2){border-right:0}.token-strip>div:nth-child(-n+2){border-bottom:1px solid var(--line)}.control-card{min-height:0}.control-card-head{font-size:9px}.footer{align-items:start;flex-direction:column}.footer p{margin:0}}
+
+.component-specimen{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}.component-specimen>span{width:100%;font-size:10px;letter-spacing:.1em;font-weight:800;color:var(--muted)}.component-specimen small{color:var(--muted);font-size:11px}

package/node_modules/@hyeonse/design-system/showcase.mjs

@@ -0,0 +1,63 @@
+import {
+  defaultPreferences, effectiveMotion, parsePreferences, preferencesKey,
+  resolvedTheme, serializePreferences, validatePreferences,
+} from './dist/preferences.js';
+
+const root = document.documentElement;
+const form = document.getElementById('settings-form');
+const current = document.getElementById('settings-current');
+const themeQuery = window.matchMedia('(prefers-color-scheme: dark)');
+const motionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+
+function read() {
+  try { return parsePreferences(localStorage.getItem(preferencesKey)); }
+  catch { return { ...defaultPreferences }; }
+}
+
+let preferences = read();
+
+function apply() {
+  root.dataset.theme = resolvedTheme(preferences.theme, themeQuery.matches);
+  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, motionQuery.matches);
+  for (const [key, value] of Object.entries(preferences)) {
+    const input = form.querySelector(`input[name="${key}"][value="${value}"]`);
+    if (input) input.checked = true;
+  }
+  const labels = { theme: { system: '기기 설정', light: '밝게', dark: '어둡게' }, accent: { cobalt: '코발트', forest: '포레스트', coral: '코랄' } };
+  current.textContent = `${labels.theme[preferences.theme]} · ${labels.accent[preferences.accent]} · ${preferences.density === 'compact' ? '촘촘한 간격' : '기본 간격'}`;
+  document.getElementById('theme-toggle-label').textContent = labels.theme[preferences.theme];
+  document.getElementById('theme-toggle-specimen').setAttribute('aria-label', `현재 테마 ${labels.theme[preferences.theme]}. 다음 모드로 변경`);
+}
+
+function save(next) {
+  preferences = validatePreferences(next);
+  apply();
+  try { localStorage.setItem(preferencesKey, serializePreferences(preferences)); }
+  catch { /* Controls still work in this tab. */ }
+}
+
+form.addEventListener('change', event => {
+  const input = event.target;
+  if (!(input instanceof HTMLInputElement)) return;
+  save({ ...preferences, [input.name]: input.value });
+});
+document.getElementById('reset-preferences').addEventListener('click', () => save(defaultPreferences));
+document.getElementById('theme-toggle-specimen').addEventListener('click', () => {
+  const themes = ['system', 'light', 'dark'];
+  save({ ...preferences, theme: themes[(themes.indexOf(preferences.theme) + 1) % themes.length] });
+});
+document.getElementById('action-button').addEventListener('click', () => {
+  document.getElementById('action-feedback').textContent = '동작 확인 완료 · 버튼이 활성화되어 있습니다.';
+});
+window.addEventListener('storage', event => {
+  if (event.key !== preferencesKey && event.key !== null) return;
+  preferences = read();
+  apply();
+});
+themeQuery.addEventListener('change', apply);
+motionQuery.addEventListener('change', apply);
+apply();

package/node_modules/@hyeonse/design-system/skills/hyeonse-design-system/SKILL.md

@@ -0,0 +1,18 @@
+---
+name: hyeonse-design-system
+description: Build, extend, map, migrate, review, or document interfaces using Hyeonse Design System in personal projects. Use for design-system work; skip unrelated routine code edits.
+---
+
+# Hyeonse Design System
+
+Use the installed package and this skill's [visual contract](references/foundations.md) as the visual contract. Inspect the target app and the user's requested scope before choosing an operation. Preserve existing behavior and purpose; do not expand a screen request into an app-wide migration.
+
+## Route the request
+
+- New screen or system foundation: read [build](references/build.md).
+- Extend an existing pattern or component: read [build](references/build.md) and the affected source/call sites.
+- Map hardcoded values to tokens: read [mapping](references/mapping.md).
+- Move an app onto the system: read [migration](references/migration.md).
+- Review a screen or document a component: read [review and docs](references/review-docs.md).
+
+Read only the relevant reference. Start from the role and purpose of each element, then select tokens and states. Check the rendered result at relevant widths and input states when a browser is available. Report what was actually checked and any unavailable proof. Commit, push, publish, deploy, install a global skill, or message others only when the user explicitly authorizes that action.

package/node_modules/@hyeonse/design-system/skills/hyeonse-design-system/references/api.md

@@ -0,0 +1,7 @@
+# Package contract
+
+The public package is `@hyeonse/design-system` with `./tokens.css`, `./components.css`, `./preferences`, and `./react` exports. Import the two CSS files for tokens and the current React preference UI styles. `.hds-*` currently styles `ThemeToggle` and `PreferencesPanel`; the package does not export general Button or Input React components.
+
+`./preferences` exports `preferencesKey`, `defaultPreferences`, validation/parse/serialize helpers, `resolvedTheme`, `effectiveMotion`, `createPreferenceScript(storageKey?)`, and `preferenceScript`. Place the initial script in the document head before CSS paints. Its default storage key is `hyeonse-site-preferences`.
+
+`./react` exports `PreferencesProvider`, `usePreferences`, `ThemeToggle`, and `PreferencesPanel`. The Provider accepts `storageKey?` and `eventName?` (default `hyeonse:preferences`) and offers `preferences`, `setPreference`, and `resetPreferences` through the hook. The two controls accept `locale='ko'|'en'`. Match a custom initial-script storage key with the Provider key. Inspect installed package types and actual target framework integration before coding against this contract.

package/node_modules/@hyeonse/design-system/skills/hyeonse-design-system/references/build.md

@@ -0,0 +1,7 @@
+# Build or extend
+
+Inspect the target route, its neighboring patterns, and [the package contract](api.md). Name the screen's purpose and primary action. Use `--paper`, `--ink`, `--surface`, `--line`, and role-appropriate accent tokens before adding new values. Keep typography and whitespace hierarchy recognizable: large editorial heading, compact labels, clear content measure, crisp controls.
+
+For a new control, define its actual states: idle, hover, focus, selected, disabled, and any loading or error state that the behavior needs. Use semantic HTML and keyboard behavior. Do not describe a visual CSS sample as a packaged React component. Extend the package only when the requested use case needs a reusable contract; otherwise implement a local screen.
+
+Verify the changed screen in light/dark, relevant accents, narrow/wide widths, keyboard focus, and reduced motion when those states are affected. Compare the rendered result with the purpose and user request, not a generic aesthetic score.

package/node_modules/@hyeonse/design-system/skills/hyeonse-design-system/references/foundations.md

@@ -0,0 +1,7 @@
+# Visual contract
+
+The default is white paper (`--paper: #fff`), dark ink (`--ink: #101114`), and cobalt (`--accent-solid: #204cfc`). Forest (`#087451`) and coral (`#b93d20`) are alternate accents. Dark mode uses `#111318` paper and separate lighter `--accent-text` values for readable text and focus. Use `--accent-solid` with `--on-accent` for filled actions; use `--accent-text` for links, selected outlines, and focus. `--surface` groups content, `--surface-raised` elevates a card, `--line` divides, and `--muted` carries supporting information.
+
+Use DM Sans for English and Noto Sans KR for Korean when those font assets are available in the consumer app. The package does not ship fonts. Prefer large editorial headings, compact labels, readable body measure, and crisp controls. Base radii are 0px for cards and 2px for controls; the soft preference changes them to 20px and 12px. Density is expressed through `--space-factor` (1 or .8), which components must actually use for spacing to change.
+
+Preferences: theme `system/light/dark`, accent `cobalt/forest/coral`, density `comfortable/compact`, corners `crisp/soft`, motion `full/reduced`. The root receives resolved `data-theme` plus `data-accent`, `data-density`, `data-corners`, and effective `data-motion`. System reduced motion takes priority. Preserve keyboard access, visible focus, and text labels; never convey a state only by color or motion.

package/node_modules/@hyeonse/design-system/skills/hyeonse-design-system/references/mapping.md

@@ -0,0 +1,7 @@
+# Token mapping
+
+Inventory the requested file, screen, or diff. For each hardcoded style, record its element, purpose, current value, candidate role token, and whether replacement preserves contrast and meaning. `--accent-solid` is for filled emphasis; `--accent-text` is for readable text, borders, and focus on ordinary surfaces. `--surface` groups content; `--surface-raised` separates a foreground card. A similar hex value alone does not justify a mapping.
+
+For a read-only audit, report candidates and uncertain cases without editing. For an authorized migration, change only the agreed scope and check the actual render across supported settings. Propose a new token only for a recurring semantic role that current tokens cannot express.
+
+For CSS enforcement in a consumer app, use the `hds-audit <consumer-root> [config-relative-path]` CLI when available. Keep exceptions file-specific with a stated reason and expected count. Its CSS-only scope does not prove that script or 3D colors conform.

package/node_modules/@hyeonse/design-system/skills/hyeonse-design-system/references/migration.md

@@ -0,0 +1,5 @@
+# Migrate a screen or app
+
+Inventory routes, existing theme storage, CSS variables, fonts, and controls. Compare the target's current behavior with [the package contract](api.md). Migrate in the requested unit of work: introduce tokens and CSS, connect preferences only where needed, then replace local styling in a bounded area. Keep the target app's data flow, routes, and product language intact.
+
+If preference persistence already exists, plan the storage key and event integration so existing users do not silently lose a choice. Check first paint, cross-tab changes, system theme, narrow layout, keyboard access, and reduced motion where affected. Record remaining unmigrated areas explicitly rather than claiming complete adoption.

package/node_modules/@hyeonse/design-system/skills/hyeonse-design-system/references/review-docs.md

@@ -0,0 +1,5 @@
+# Review or document
+
+For review, inspect the rendered screen and its actual interactions. Rank findings by impact on task completion, readability, access, and consistency. Give an element, trigger, observed effect, and actionable correction. Distinguish an observed defect from a code-only suspicion and do not invent browser proof.
+
+For component documentation, read implementation and real call sites first. State purpose, when to use, public API, meaningful states, keyboard behavior, responsive behavior, and known limits. Include an example that compiles against the exported API. If the element is only showcase markup or a local app pattern, label it that way instead of documenting it as a package export.

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

@@ -0,0 +1,105 @@
+.hds-themeToggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 9px;
+  min-width: 44px;
+  min-height: var(--control-min-size);
+  padding: 8px 12px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-control);
+  color: var(--ink);
+  background: var(--paper);
+  font: inherit;
+  font-size: var(--text-control);
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.hds-themeToggle svg { display: block; width: 19px; height: 19px; flex: none; }
+.hds-themeToggle:hover { border-color: var(--accent-text); color: var(--accent-text); }
+.hds-themeToggle:focus-visible, .hds-panel button:focus-visible, .hds-radioOption input:focus-visible + span {
+  outline: 3px solid var(--accent-text);
+  outline-offset: 3px;
+}
+
+.hds-panel {
+  box-sizing: border-box;
+  width: 100%;
+  padding: clamp(20px, 4vw, 48px);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-card);
+  color: var(--ink);
+  background: var(--surface);
+  font-family: var(--font-sans);
+}
+
+.hds-heading {
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+  gap: 24px;
+  padding-bottom: 26px;
+  border-bottom: 1px solid var(--line);
+}
+
+.hds-heading h2 { margin: 10px 0 0; font-size: clamp(30px, 4vw, 54px); line-height: 1.1; letter-spacing: -.06em; }
+.hds-heading p { margin: 0 0 3px; color: var(--muted); font-size: 13px; }
+.hds-kicker { color: var(--accent-text); font-size: 10px; font-weight: 800; letter-spacing: .13em; }
+.hds-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(18px, 4vw, 48px); }
+.hds-group { min-width: 0; margin: 0; padding: 22px 0 26px; border: 0; border-bottom: 1px solid var(--line); }
+.hds-group legend { display: block; float: left; width: 100%; margin: 0 0 13px; padding: 0; font-size: 13px; font-weight: 800; }
+.hds-group legend + * { clear: both; }
+.hds-options, .hds-accents { display: flex; flex-wrap: wrap; gap: 8px; }
+.hds-radioOption { position: relative; display: inline-flex; min-height: var(--control-min-size); cursor: pointer; }
+.hds-radioOption input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
+.hds-radioOption span, .hds-accentButton {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--control-min-size);
+  padding: 8px 14px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-control);
+  color: var(--ink);
+  background: var(--surface-raised);
+  font: inherit;
+  font-size: var(--text-control);
+  font-weight: 700;
+  line-height: 1.3;
+  white-space: nowrap;
+}
+.hds-radioOption input:checked + span { border-color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent-text); color: var(--accent-text); }
+.hds-radioOption:hover span, .hds-accentButton:hover { border-color: var(--accent-text); }
+.hds-accentButton { gap: 9px; cursor: pointer; }
+.hds-accentButton[aria-pressed='true'] { border-color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent-text); }
+.hds-swatch { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; color: var(--on-accent); font-size: 14px; font-weight: 900; }
+.hds-cobalt .hds-swatch { background: var(--palette-cobalt); }
+.hds-forest .hds-swatch { background: var(--palette-forest); }
+.hds-coral .hds-swatch { background: var(--palette-coral); }
+
+.hds-footer { display: flex; justify-content: space-between; align-items: center; gap: 22px; padding-top: 28px; }
+.hds-footer p { margin: 0; color: var(--muted); font-size: var(--text-control); line-height: 1.65; }
+.hds-footer button {
+  flex: none;
+  min-height: var(--control-min-size);
+  padding: 8px 0;
+  border: 0;
+  border-bottom: 1px solid currentColor;
+  border-radius: 0;
+  color: var(--ink);
+  background: transparent;
+  font: inherit;
+  font-size: var(--text-control);
+  font-weight: 800;
+  cursor: pointer;
+}
+.hds-footer button:hover { color: var(--accent-text); }
+
+@media (max-width: 720px) {
+  .hds-heading { display: block; }
+  .hds-heading p { margin-top: 16px; }
+  .hds-groups { grid-template-columns: 1fr; }
+  .hds-footer { align-items: start; flex-direction: column; gap: 14px; }
+}