@nac3/forge-cli 1.0.51 → 1.0.53

package/yujin-design-system/components/dropdown.yujin.json

@@ -0,0 +1,26 @@
+{
+  "slug": "dropdown",
+  "category": "control",
+  "nac3_id": "yujin.dropdown",
+  "description": "dropdown -- Yujin Design System default control component",
+  "html": "<div class=\"yj-dropdown\" data-nac-id=\"yujin.dropdown\" data-nac-role=\"dropdown\">\n  <button class=\"yj-dropdown-trigger\" data-nac-role=\"trigger\">{{label}}</button>\n  <ul class=\"yj-dropdown-menu\" data-nac-role=\"menu\">{{items}}</ul>\n</div>",
+  "css": ".yj-dropdown{position:relative;display:inline-block}\n.yj-dropdown-menu{position:absolute;top:100%;background:var(--color-bg-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-md);padding:var(--space-2);list-style:none;margin:var(--space-1) 0 0 0}",
+  "variants": [
+    "default",
+    "menu",
+    "submenu"
+  ],
+  "props": [
+    "label",
+    "items",
+    "open?"
+  ],
+  "token_refs": [
+    "color-bg-surface",
+    "color-border-subtle",
+    "radius-md",
+    "shadow-md",
+    "space-"
+  ],
+  "sumie_icon_hint": null
+}

package/yujin-design-system/components/file-upload.yujin.json

@@ -0,0 +1,25 @@
+{
+  "slug": "file-upload",
+  "category": "control",
+  "nac3_id": "yujin.file-upload",
+  "description": "file-upload -- Yujin Design System default control component",
+  "html": "<div class=\"yj-upload\" data-nac-id=\"yujin.file-upload\" data-nac-role=\"upload\" data-nac-action=\"upload_file\">\n  <input type=\"file\" />\n  <p>{{label}}</p>\n</div>",
+  "css": ".yj-upload{border:2px dashed var(--color-border-default);padding:var(--space-6);text-align:center;border-radius:var(--radius-md);background:var(--color-bg-subtle);cursor:pointer}",
+  "variants": [
+    "default",
+    "drag-drop",
+    "multi"
+  ],
+  "props": [
+    "label",
+    "accept?",
+    "multi?"
+  ],
+  "token_refs": [
+    "color-border-default",
+    "space-",
+    "radius-md",
+    "color-bg-subtle"
+  ],
+  "sumie_icon_hint": null
+}

package/yujin-design-system/components/form-field.yujin.json

@@ -0,0 +1,29 @@
+{
+  "slug": "form-field",
+  "category": "control",
+  "nac3_id": "yujin.form-field",
+  "description": "form-field -- Yujin Design System default control component",
+  "html": "<div class=\"yj-field\" data-nac-id=\"yujin.form-field\" data-nac-role=\"field\">\n  <label class=\"yj-field-label\" data-nac-role=\"label\">{{label}}</label>\n  <div class=\"yj-field-control\" data-nac-role=\"control\">{{children}}</div>\n  <p class=\"yj-field-hint\" data-nac-role=\"hint\">{{hint}}</p>\n  <p class=\"yj-field-error\" data-nac-role=\"error\">{{error}}</p>\n</div>",
+  "css": ".yj-field{margin-bottom:var(--space-3)}\n.yj-field-label{display:block;font:500 var(--font-size-xs)/1.3 var(--font-family-sans);color:var(--color-text-secondary);margin-bottom:var(--space-1)}\n.yj-field-hint{font:400 var(--font-size-xs)/1.3 var(--font-family-sans);color:var(--color-text-tertiary);margin-top:var(--space-1)}\n.yj-field-error{font:500 var(--font-size-xs)/1.3 var(--font-family-sans);color:var(--color-coral-600);margin-top:var(--space-1)}",
+  "variants": [
+    "default",
+    "inline",
+    "compact"
+  ],
+  "props": [
+    "label",
+    "hint",
+    "error",
+    "children",
+    "required?"
+  ],
+  "token_refs": [
+    "space-",
+    "font-size-xs",
+    "font-family-sans",
+    "color-text-secondary",
+    "color-text-tertiary",
+    "color-coral-"
+  ],
+  "sumie_icon_hint": null
+}

package/yujin-design-system/components/input.yujin.json

@@ -0,0 +1,32 @@
+{
+  "slug": "input",
+  "category": "control",
+  "nac3_id": "yujin.input",
+  "description": "input -- Yujin Design System default control component",
+  "html": "<input class=\"yj-input\" type=\"{{type}}\" placeholder=\"{{placeholder}}\" data-nac-id=\"yujin.input\" data-nac-role=\"input\" />",
+  "css": ".yj-input{padding:var(--space-2) var(--space-3);border:1px solid var(--color-border-default);border-radius:var(--radius-md);background:var(--color-bg-surface);font:400 var(--font-size-sm)/1.4 var(--font-family-sans);color:var(--color-text-primary);width:100%}\n.yj-input:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-light)}",
+  "variants": [
+    "default",
+    "small",
+    "large",
+    "invalid"
+  ],
+  "props": [
+    "type",
+    "placeholder",
+    "value?",
+    "invalid?"
+  ],
+  "token_refs": [
+    "space-",
+    "color-border-default",
+    "radius-md",
+    "color-bg-surface",
+    "font-size-sm",
+    "font-family-sans",
+    "color-text-primary",
+    "color-accent",
+    "color-accent-light"
+  ],
+  "sumie_icon_hint": null
+}

package/yujin-design-system/components/kanban-card.yujin.json

@@ -0,0 +1,32 @@
+{
+  "slug": "kanban-card",
+  "category": "data",
+  "nac3_id": "yujin.kanban-card",
+  "description": "kanban-card -- Yujin Design System default data component",
+  "html": "<article class=\"yj-kanban-card\" draggable=\"true\" data-nac-id=\"yujin.kanban-card\" data-nac-role=\"kanban-card\">\n  <header class=\"yj-kanban-card-title\">{{title}}</header>\n  <p class=\"yj-kanban-card-body\">{{body}}</p>\n  <footer class=\"yj-kanban-card-meta\">{{meta}}</footer>\n</article>",
+  "css": ".yj-kanban-card{background:var(--color-bg-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);padding:var(--space-3);margin-bottom:var(--space-2);cursor:grab;box-shadow:var(--shadow-sm)}\n.yj-kanban-card-title{font:600 var(--font-size-sm)/1.3 var(--font-family-sans);color:var(--color-text-primary);margin-bottom:var(--space-2)}\n.yj-kanban-card-body{font:400 var(--font-size-xs)/1.4 var(--font-family-sans);color:var(--color-text-secondary);margin:0 0 var(--space-2) 0}",
+  "variants": [
+    "default",
+    "compact",
+    "highlighted"
+  ],
+  "props": [
+    "title",
+    "body",
+    "meta",
+    "variant?"
+  ],
+  "token_refs": [
+    "color-bg-surface",
+    "color-border-subtle",
+    "radius-md",
+    "space-",
+    "shadow-sm",
+    "font-size-sm",
+    "font-family-sans",
+    "color-text-primary",
+    "font-size-xs",
+    "color-text-secondary"
+  ],
+  "sumie_icon_hint": null
+}

package/yujin-design-system/components/modal.yujin.json

@@ -0,0 +1,28 @@
+{
+  "slug": "modal",
+  "category": "surface",
+  "nac3_id": "yujin.modal",
+  "description": "modal -- Yujin Design System default surface component",
+  "html": "<div class=\"yj-modal-overlay\" data-nac-id=\"yujin.modal-overlay\" data-nac-role=\"overlay\">\n  <div class=\"yj-modal\" role=\"dialog\" aria-modal=\"true\" data-nac-role=\"dialog\">\n    <header class=\"yj-modal-header\" data-nac-role=\"header\">\n      <h2 data-nac-role=\"title\">{{title}}</h2>\n      <button class=\"yj-modal-close\" data-nac-role=\"close\" data-nac-action=\"close_modal\">x</button>\n    </header>\n    <div class=\"yj-modal-body\" data-nac-role=\"body\">{{children}}</div>\n    <footer class=\"yj-modal-footer\" data-nac-role=\"footer\">{{footer}}</footer>\n  </div>\n</div>",
+  "css": ".yj-modal-overlay{position:fixed;inset:0;background:rgba(26,24,21,.55);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:300}\n.yj-modal{background:var(--color-bg-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);max-width:560px;width:100%;max-height:80vh;display:flex;flex-direction:column;overflow:hidden}\n.yj-modal-header{background:var(--color-indigo-600);color:var(--color-warm-0);padding:var(--space-3) var(--space-4);display:flex;justify-content:space-between;align-items:center}\n.yj-modal-body{flex:1;overflow-y:auto;padding:var(--space-4)}",
+  "variants": [
+    "default",
+    "wide",
+    "fullscreen"
+  ],
+  "props": [
+    "title",
+    "children",
+    "footer",
+    "open?"
+  ],
+  "token_refs": [
+    "color-bg-surface",
+    "radius-lg",
+    "shadow-lg",
+    "color-indigo-",
+    "color-warm-",
+    "space-"
+  ],
+  "sumie_icon_hint": null
+}

package/yujin-design-system/components/pagination.yujin.json

@@ -0,0 +1,24 @@
+{
+  "slug": "pagination",
+  "category": "data",
+  "nac3_id": "yujin.pagination",
+  "description": "pagination -- Yujin Design System default data component",
+  "html": "<nav class=\"yj-pagination\" data-nac-id=\"yujin.pagination\" data-nac-role=\"pagination\">\n  <button data-nac-action=\"prev_page\">prev</button>\n  <span>{{current}} / {{total}}</span>\n  <button data-nac-action=\"next_page\">next</button>\n</nav>",
+  "css": ".yj-pagination{display:flex;align-items:center;gap:var(--space-2);justify-content:center;padding:var(--space-3)}\n.yj-pagination button{padding:var(--space-2) var(--space-3);border:1px solid var(--color-border-default);background:var(--color-bg-surface);border-radius:var(--radius-md);cursor:pointer}",
+  "variants": [
+    "default",
+    "with-jump",
+    "simple"
+  ],
+  "props": [
+    "current",
+    "total"
+  ],
+  "token_refs": [
+    "space-",
+    "color-border-default",
+    "color-bg-surface",
+    "radius-md"
+  ],
+  "sumie_icon_hint": null
+}

package/yujin-design-system/components/progress.yujin.json

@@ -0,0 +1,23 @@
+{
+  "slug": "progress",
+  "category": "display",
+  "nac3_id": "yujin.progress",
+  "description": "progress -- Yujin Design System default display component",
+  "html": "<div class=\"yj-progress\" role=\"progressbar\" data-nac-id=\"yujin.progress\" data-nac-role=\"progress\"><div class=\"yj-progress-fill\" style=\"width:{{value}}%\"></div></div>",
+  "css": ".yj-progress{height:8px;background:var(--color-bg-subtle);border-radius:999px;overflow:hidden}\n.yj-progress-fill{height:100%;background:var(--color-accent);transition:width 200ms}",
+  "variants": [
+    "default",
+    "striped",
+    "indeterminate"
+  ],
+  "props": [
+    "value",
+    "max?",
+    "variant?"
+  ],
+  "token_refs": [
+    "color-bg-subtle",
+    "color-accent"
+  ],
+  "sumie_icon_hint": null
+}

package/yujin-design-system/components/radio.yujin.json

@@ -0,0 +1,24 @@
+{
+  "slug": "radio",
+  "category": "control",
+  "nac3_id": "yujin.radio",
+  "description": "radio -- Yujin Design System default control component",
+  "html": "<label class=\"yj-radio\" data-nac-id=\"yujin.radio\" data-nac-role=\"radio\">\n  <input type=\"radio\" name=\"{{name}}\" />\n  <span>{{label}}</span>\n</label>",
+  "css": ".yj-radio{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer;font:400 var(--font-size-sm)/1.4 var(--font-family-sans)}\n.yj-radio input{accent-color:var(--color-accent)}",
+  "variants": [
+    "default"
+  ],
+  "props": [
+    "name",
+    "label",
+    "value",
+    "checked?"
+  ],
+  "token_refs": [
+    "space-",
+    "font-size-sm",
+    "font-family-sans",
+    "color-accent"
+  ],
+  "sumie_icon_hint": null
+}

package/yujin-design-system/components/search-bar.yujin.json

@@ -0,0 +1,26 @@
+{
+  "slug": "search-bar",
+  "category": "control",
+  "nac3_id": "yujin.search-bar",
+  "description": "search-bar -- Yujin Design System default control component",
+  "html": "<div class=\"yj-search\" data-nac-id=\"yujin.search-bar\" data-nac-role=\"search\">\n  <input type=\"search\" placeholder=\"{{placeholder}}\" />\n</div>",
+  "css": ".yj-search input{width:100%;padding:var(--space-2) var(--space-3);border:1px solid var(--color-border-default);border-radius:var(--radius-md);background:var(--color-bg-surface);font:400 var(--font-size-sm)/1.4 var(--font-family-sans)}",
+  "variants": [
+    "default",
+    "with-icon",
+    "compact"
+  ],
+  "props": [
+    "placeholder",
+    "value?"
+  ],
+  "token_refs": [
+    "space-",
+    "color-border-default",
+    "radius-md",
+    "color-bg-surface",
+    "font-size-sm",
+    "font-family-sans"
+  ],
+  "sumie_icon_hint": null
+}

package/yujin-design-system/components/select.yujin.json

@@ -0,0 +1,25 @@
+{
+  "slug": "select",
+  "category": "control",
+  "nac3_id": "yujin.select",
+  "description": "select -- Yujin Design System default control component",
+  "html": "<select class=\"yj-select\" data-nac-id=\"yujin.select\" data-nac-role=\"select\">{{options}}</select>",
+  "css": ".yj-select{padding:var(--space-2) var(--space-3);border:1px solid var(--color-border-default);border-radius:var(--radius-md);background:var(--color-bg-surface);font:400 var(--font-size-sm)/1.4 var(--font-family-sans)}",
+  "variants": [
+    "default",
+    "multi"
+  ],
+  "props": [
+    "options",
+    "value?"
+  ],
+  "token_refs": [
+    "space-",
+    "color-border-default",
+    "radius-md",
+    "color-bg-surface",
+    "font-size-sm",
+    "font-family-sans"
+  ],
+  "sumie_icon_hint": null
+}

package/yujin-design-system/components/sidebar.yujin.json

@@ -0,0 +1,28 @@
+{
+  "slug": "sidebar",
+  "category": "surface",
+  "nac3_id": "yujin.sidebar",
+  "description": "sidebar -- Yujin Design System default surface component",
+  "html": "<aside class=\"yj-sidebar\" data-nac-id=\"yujin.sidebar\" data-nac-role=\"navigation\">\n  <header class=\"yj-sidebar-brand\" data-nac-role=\"brand\">{{brand}}</header>\n  <nav class=\"yj-sidebar-nav\" data-nac-role=\"nav\">{{items}}</nav>\n  <footer class=\"yj-sidebar-footer\" data-nac-role=\"footer\">{{footer}}</footer>\n</aside>",
+  "css": ".yj-sidebar{background:var(--color-bg-subtle);border-right:1px solid var(--color-border-subtle);width:240px;display:flex;flex-direction:column;height:100vh}\n.yj-sidebar-brand{padding:var(--space-4);font:600 var(--font-size-md)/1.3 var(--font-family-sans);color:var(--color-text-primary)}\n.yj-sidebar-nav{flex:1;overflow-y:auto;padding:var(--space-2)}",
+  "variants": [
+    "default",
+    "collapsed",
+    "minimal"
+  ],
+  "props": [
+    "brand",
+    "items",
+    "footer",
+    "collapsed?"
+  ],
+  "token_refs": [
+    "color-bg-subtle",
+    "color-border-subtle",
+    "space-",
+    "font-size-md",
+    "font-family-sans",
+    "color-text-primary"
+  ],
+  "sumie_icon_hint": null
+}

package/yujin-design-system/components/skeleton.yujin.json

@@ -0,0 +1,23 @@
+{
+  "slug": "skeleton",
+  "category": "display",
+  "nac3_id": "yujin.skeleton",
+  "description": "skeleton -- Yujin Design System default display component",
+  "html": "<div class=\"yj-skeleton\" data-nac-id=\"yujin.skeleton\" data-nac-role=\"skeleton\" aria-busy=\"true\"></div>",
+  "css": ".yj-skeleton{background:linear-gradient(90deg,var(--color-warm-100) 25%,var(--color-warm-150) 50%,var(--color-warm-100) 75%);background-size:200% 100%;animation:yj-skeleton 1.5s infinite;border-radius:var(--radius-sm);min-height:16px}\n@keyframes yj-skeleton{0%{background-position:200% 0}100%{background-position:-200% 0}}",
+  "variants": [
+    "line",
+    "circle",
+    "card"
+  ],
+  "props": [
+    "variant?",
+    "width?",
+    "height?"
+  ],
+  "token_refs": [
+    "color-warm-",
+    "radius-sm"
+  ],
+  "sumie_icon_hint": null
+}

package/yujin-design-system/components/slider.yujin.json

@@ -0,0 +1,22 @@
+{
+  "slug": "slider",
+  "category": "control",
+  "nac3_id": "yujin.slider",
+  "description": "slider -- Yujin Design System default control component",
+  "html": "<input class=\"yj-slider\" type=\"range\" data-nac-id=\"yujin.slider\" data-nac-role=\"slider\" />",
+  "css": ".yj-slider{accent-color:var(--color-accent);width:100%}",
+  "variants": [
+    "default",
+    "range"
+  ],
+  "props": [
+    "min",
+    "max",
+    "step?",
+    "value?"
+  ],
+  "token_refs": [
+    "color-accent"
+  ],
+  "sumie_icon_hint": null
+}

package/yujin-design-system/components/switch.yujin.json

@@ -0,0 +1,23 @@
+{
+  "slug": "switch",
+  "category": "control",
+  "nac3_id": "yujin.switch",
+  "description": "switch -- Yujin Design System default control component",
+  "html": "<label class=\"yj-switch\" data-nac-id=\"yujin.switch\" data-nac-role=\"switch\">\n  <input type=\"checkbox\" />\n  <span class=\"yj-switch-track\"><span class=\"yj-switch-knob\"></span></span>\n  <span>{{label}}</span>\n</label>",
+  "css": ".yj-switch{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer}\n.yj-switch-track{width:36px;height:20px;border-radius:999px;background:var(--color-warm-300);position:relative;transition:background 150ms}\n.yj-switch-knob{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--color-warm-0);transition:transform 150ms}\n.yj-switch input:checked + .yj-switch-track{background:var(--color-accent)}\n.yj-switch input:checked + .yj-switch-track .yj-switch-knob{transform:translateX(16px)}",
+  "variants": [
+    "default",
+    "small"
+  ],
+  "props": [
+    "label",
+    "checked?",
+    "disabled?"
+  ],
+  "token_refs": [
+    "space-",
+    "color-warm-",
+    "color-accent"
+  ],
+  "sumie_icon_hint": null
+}

package/yujin-design-system/components/table.yujin.json

@@ -0,0 +1,28 @@
+{
+  "slug": "table",
+  "category": "data",
+  "nac3_id": "yujin.table",
+  "description": "table -- Yujin Design System default data component",
+  "html": "<table class=\"yj-table\" data-nac-id=\"yujin.table\" data-nac-role=\"table\">\n  <thead>{{header}}</thead>\n  <tbody>{{body}}</tbody>\n</table>",
+  "css": ".yj-table{width:100%;border-collapse:collapse;font:400 var(--font-size-sm)/1.4 var(--font-family-sans)}\n.yj-table th{text-align:left;padding:var(--space-2) var(--space-3);background:var(--color-bg-subtle);font-weight:600;border-bottom:1px solid var(--color-border-default)}\n.yj-table td{padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--color-border-subtle)}\n.yj-table tbody tr:hover{background:var(--color-bg-subtle)}",
+  "variants": [
+    "default",
+    "striped",
+    "compact",
+    "bordered"
+  ],
+  "props": [
+    "header",
+    "body",
+    "variant?"
+  ],
+  "token_refs": [
+    "font-size-sm",
+    "font-family-sans",
+    "space-",
+    "color-bg-subtle",
+    "color-border-default",
+    "color-border-subtle"
+  ],
+  "sumie_icon_hint": null
+}

package/yujin-design-system/components/tabs.yujin.json

@@ -0,0 +1,28 @@
+{
+  "slug": "tabs",
+  "category": "surface",
+  "nac3_id": "yujin.tabs",
+  "description": "tabs -- Yujin Design System default surface component",
+  "html": "<div class=\"yj-tabs\" data-nac-id=\"yujin.tabs\" data-nac-role=\"tabs\">\n  <div class=\"yj-tabs-list\" role=\"tablist\" data-nac-role=\"tablist\">{{tabs}}</div>\n  <div class=\"yj-tabs-panels\" data-nac-role=\"panels\">{{panels}}</div>\n</div>",
+  "css": ".yj-tabs-list{display:flex;border-bottom:1px solid var(--color-border-subtle)}\n.yj-tabs-list button{padding:var(--space-3) var(--space-4);border:0;background:transparent;font:500 var(--font-size-sm)/1.4 var(--font-family-sans);color:var(--color-text-secondary);cursor:pointer;border-bottom:2px solid transparent}\n.yj-tabs-list button[aria-selected=\"true\"]{color:var(--color-text-primary);border-bottom-color:var(--color-accent)}",
+  "variants": [
+    "default",
+    "pills",
+    "underline"
+  ],
+  "props": [
+    "tabs",
+    "panels",
+    "active?"
+  ],
+  "token_refs": [
+    "color-border-subtle",
+    "space-",
+    "font-size-sm",
+    "font-family-sans",
+    "color-text-secondary",
+    "color-text-primary",
+    "color-accent"
+  ],
+  "sumie_icon_hint": null
+}

package/yujin-design-system/components/toast.yujin.json

@@ -0,0 +1,28 @@
+{
+  "slug": "toast",
+  "category": "display",
+  "nac3_id": "yujin.toast",
+  "description": "toast -- Yujin Design System default display component",
+  "html": "<div class=\"yj-toast yj-toast-{{variant}}\" role=\"status\" data-nac-id=\"yujin.toast\" data-nac-role=\"toast\">{{message}}</div>",
+  "css": ".yj-toast{position:fixed;bottom:var(--space-4);right:var(--space-4);background:var(--color-warm-800);color:var(--color-warm-0);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);font:500 var(--font-size-sm)/1.4 var(--font-family-sans);z-index:400}",
+  "variants": [
+    "info",
+    "success",
+    "warning",
+    "danger"
+  ],
+  "props": [
+    "message",
+    "variant",
+    "duration?"
+  ],
+  "token_refs": [
+    "space-",
+    "color-warm-",
+    "radius-md",
+    "shadow-lg",
+    "font-size-sm",
+    "font-family-sans"
+  ],
+  "sumie_icon_hint": null
+}

package/yujin-design-system/components/tooltip.yujin.json

@@ -0,0 +1,27 @@
+{
+  "slug": "tooltip",
+  "category": "display",
+  "nac3_id": "yujin.tooltip",
+  "description": "tooltip -- Yujin Design System default display component",
+  "html": "<span class=\"yj-tooltip\" data-nac-id=\"yujin.tooltip\" data-nac-role=\"tooltip\" data-tooltip=\"{{text}}\">{{children}}</span>",
+  "css": ".yj-tooltip{position:relative;display:inline-block}\n.yj-tooltip[data-tooltip]:hover::after{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background:var(--color-warm-800);color:var(--color-warm-0);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);font-size:var(--font-size-xs);white-space:nowrap}",
+  "variants": [
+    "default",
+    "top",
+    "bottom",
+    "left",
+    "right"
+  ],
+  "props": [
+    "text",
+    "children",
+    "placement?"
+  ],
+  "token_refs": [
+    "color-warm-",
+    "space-",
+    "radius-sm",
+    "font-size-xs"
+  ],
+  "sumie_icon_hint": null
+}

package/yujin-design-system/components/topbar.yujin.json

@@ -0,0 +1,23 @@
+{
+  "slug": "topbar",
+  "category": "surface",
+  "nac3_id": "yujin.topbar",
+  "description": "topbar -- Yujin Design System default surface component",
+  "html": "<header class=\"yj-topbar\" data-nac-id=\"yujin.topbar\" data-nac-role=\"topbar\">\n  <div class=\"yj-topbar-left\" data-nac-role=\"left\">{{left}}</div>\n  <div class=\"yj-topbar-right\" data-nac-role=\"right\">{{right}}</div>\n</header>",
+  "css": ".yj-topbar{display:flex;justify-content:space-between;align-items:center;padding:var(--space-2) var(--space-4);background:var(--color-bg-surface);border-bottom:1px solid var(--color-border-subtle);height:56px}",
+  "variants": [
+    "default",
+    "sticky",
+    "transparent"
+  ],
+  "props": [
+    "left",
+    "right"
+  ],
+  "token_refs": [
+    "space-",
+    "color-bg-surface",
+    "color-border-subtle"
+  ],
+  "sumie_icon_hint": null
+}

package/yujin-design-system/components/view.yujin.json

@@ -0,0 +1,24 @@
+{
+  "slug": "view",
+  "category": "surface",
+  "nac3_id": "yujin.view",
+  "description": "view -- Yujin Design System default surface component",
+  "html": "<main class=\"yj-view\" data-nac-id=\"yujin.view\" data-nac-role=\"view\">\n  <header class=\"yj-view-header\" data-nac-role=\"header\">{{header}}</header>\n  <div class=\"yj-view-body\" data-nac-role=\"body\">{{children}}</div>\n</main>",
+  "css": ".yj-view{background:var(--color-bg-page);min-height:100vh;display:flex;flex-direction:column}\n.yj-view-header{padding:var(--space-4);border-bottom:1px solid var(--color-border-subtle);background:var(--color-bg-surface)}\n.yj-view-body{flex:1;padding:var(--space-4);overflow-y:auto}",
+  "variants": [
+    "default",
+    "split",
+    "centered"
+  ],
+  "props": [
+    "header",
+    "children"
+  ],
+  "token_refs": [
+    "color-bg-page",
+    "space-",
+    "color-border-subtle",
+    "color-bg-surface"
+  ],
+  "sumie_icon_hint": null
+}

package/yujin-design-system/fonts/README.md

@@ -0,0 +1,31 @@
+# Yujin Design System -- fonts
+
+Reference-only. We do NOT bundle font binaries. Consumers fetch
+from Google Fonts CDN:
+
+| Family | CDN |
+|---|---|
+| Inter (primary) | `https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap` |
+| Noto Sans JP (japanese) | `https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap` |
+| JetBrains Mono (code) | `https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap` |
+
+## Why no bundle
+
+- Noto Sans JP alone is ~2 MB. Bundling it doubles the package
+  size + every adopter pays for it.
+- CDN is cached cross-origin so most users already have it.
+- Bandwidth + cold-start latency drops for the adopter app.
+
+## Offline fallback
+
+If your project must run offline, override locally via
+`tokens/yujin-tokens.css`:
+
+```css
+:root {
+  --font-family-sans: 'YourLocalFont', -apple-system, sans-serif;
+}
+```
+
+The component templates reference `--font-family-sans` not
+`Inter`, so a single token swap covers every component.

package/yujin-design-system/icons/sumie/abacus-soroban.svg

@@ -0,0 +1 @@
+<svg class="yj-sumie" viewBox="0 0 40 40" aria-hidden="true"><path d="M6 6 L34 6 L34 34 L6 34 z"/><path d="M6 18 L34 18"/><circle cx="12" cy="12" r="2" class="ink-fill"/><circle cx="20" cy="12" r="2"/><circle cx="28" cy="12" r="2"/><circle cx="14" cy="26" r="2"/><circle cx="22" cy="26" r="2" class="ink-fill"/><circle cx="30" cy="26" r="2"/></svg>

package/yujin-design-system/icons/sumie/antenna-signal.svg

@@ -0,0 +1 @@
+<svg class="yj-sumie" viewBox="0 0 40 40" aria-hidden="true"><path d="M20 32 L20 18"/><path d="M16 36 L24 36"/><path d="M20 18 L8 8"/><path d="M20 18 L32 8"/><path d="M14 12 Q20 6 26 12"/></svg>

package/yujin-design-system/icons/sumie/anvil-block.svg

@@ -0,0 +1 @@
+<svg class="yj-sumie" viewBox="0 0 40 40" aria-hidden="true"><path d="M4 14 L36 14 L32 20 L28 20 L28 26 L34 30 L34 34 L6 34 L6 30 L12 26 L12 20 L8 20 z"/></svg>

package/yujin-design-system/icons/sumie/arrow-down-trend.svg

@@ -0,0 +1 @@
+<svg class="yj-sumie" viewBox="0 0 40 40" aria-hidden="true"><path d="M4 12 L14 20 L20 14 L34 32"/><path d="M28 32 L34 32 L34 26"/></svg>

package/yujin-design-system/icons/sumie/arrow-up-trend.svg

@@ -0,0 +1 @@
+<svg class="yj-sumie" viewBox="0 0 40 40" aria-hidden="true"><path d="M4 30 L14 22 L20 26 L34 8"/><path d="M28 8 L34 8 L34 14"/></svg>

package/yujin-design-system/icons/sumie/aurora-band.svg

@@ -0,0 +1 @@
+<svg class="yj-sumie" viewBox="0 0 40 40" aria-hidden="true"><path d="M4 30 Q12 12 20 14 Q28 16 36 6"/><path d="M4 34 Q12 18 20 20 Q28 22 36 14"/></svg>

package/yujin-design-system/icons/sumie/badge-id.svg

@@ -0,0 +1 @@
+<svg class="yj-sumie" viewBox="0 0 40 40" aria-hidden="true"><path d="M10 6 L30 6 L30 34 L10 34 z"/><circle cx="20" cy="14" r="3"/><path d="M14 22 Q20 18 26 22"/><path d="M14 28 L26 28"/></svg>

package/yujin-design-system/icons/sumie/badge-medal.svg

@@ -0,0 +1 @@
+<svg class="yj-sumie" viewBox="0 0 40 40" aria-hidden="true"><path d="M14 4 L20 16 L26 4"/><circle cx="20" cy="26" r="10"/><circle cx="20" cy="26" r="5"/></svg>

package/yujin-design-system/icons/sumie/bamboo-stalk.svg

@@ -0,0 +1 @@
+<svg class="yj-sumie" viewBox="0 0 40 40" aria-hidden="true"><path d="M16 4 L16 36"/><path d="M22 4 L22 36"/><path d="M14 14 L24 14"/><path d="M14 24 L24 24"/></svg>