@teamblind-chorus/ui 1.0.1 → 1.2.0

package/agents/manifest.json

@@ -39,15 +39,15 @@
       "styles": "packages/ui/src/styles.css",
       "iconsExportSubpath": "@teamblind-chorus/ui/icons",
       "stylesExportSubpath": "@teamblind-chorus/ui/styles.css",
-      "published": false,
-      "distribution": "source",
-      "note": "Workspace-only, source-distributed. External tools either (a) read JSX directly from `entry` (compile JSX themselves) or (b) consume the structural contract via `schema/components/<family>/<sub>.spec.json` and re-render with their own renderer. Either path MUST also load `styles.css` once at the app entry — the JSX emits inline `--<component>-*` plumbing vars but expects the static rules in `styles.css` to receive them. The package is marked `private: true` and intentionally pinned at version `0.0.0` until a publishing decision is made."
+      "published": true,
+      "distribution": "npm",
+      "note": "Published to npm as `@teamblind-chorus/ui` (built `dist/` — compiled components, type declarations, and CSS). External tools either (a) install the package and import its components, or (b) consume the structural contract via `schema/components/<family>/<sub>.spec.json` and re-render with their own renderer. Either path MUST also load `@teamblind-chorus/ui/styles.css` once at the app entry — components emit inline `--<component>-*` plumbing vars but expect the static rules in `styles.css` to receive them."
     },
     "tokens": {
       "name": "@teamblind-chorus/tokens",
-      "published": false,
-      "distribution": "source",
-      "note": "Workspace-only. External tools should prefer the `tokens.resolved.*` bundles above over the three-tier source files unless they specifically need the reference graph."
+      "published": true,
+      "distribution": "npm",
+      "note": "Published to npm as `@teamblind-chorus/tokens`. External tools should prefer the `tokens.resolved.*` bundles above over the three-tier source files unless they specifically need the reference graph."
     }
   },
   "components": [
@@ -62,6 +62,7 @@
     { "family": "dialog",         "root": "components/dialog/dialog.family.json" },
     { "family": "divider",        "root": "components/divider/divider.family.json" },
     { "family": "directory-list", "root": "components/directory-list/directory-list.family.json" },
+    { "family": "empty-state",    "root": "components/empty-state/empty-state.family.json" },
     { "family": "feed",           "root": "components/feed/feed.family.json" },
     { "family": "form-field",     "root": "components/form-field/form-field.family.json" },
     { "family": "header",         "root": "components/header/header.family.json" },
@@ -71,11 +72,13 @@
     { "family": "nav-list",       "root": "components/nav-list/nav-list.family.json" },
     { "family": "navigation-bar", "root": "components/navigation-bar/navigation-bar.family.json" },
     { "family": "page-shell",     "root": "components/page-shell/page-shell.family.json" },
+    { "family": "pagination",     "root": "components/pagination/pagination.family.json" },
     { "family": "profile-header", "root": "components/profile-header/profile-header.family.json" },
     { "family": "progress",       "root": "components/progress/progress.family.json" },
     { "family": "carousel",       "root": "components/carousel/carousel.family.json" },
     { "family": "side-sheet",     "root": "components/side-sheet/side-sheet.family.json" },
     { "family": "skeleton",       "root": "components/skeleton/skeleton.family.json" },
+    { "family": "spinner",        "root": "components/spinner/spinner.family.json" },
     { "family": "status-tag",     "root": "components/status-tag/status-tag.family.json" },
     { "family": "switch",         "root": "components/switch/switch.family.json" },
     { "family": "tab-bar",        "root": "components/tab-bar/tab-bar.family.json" },

package/agents/patterns/README.md

@@ -1,5 +1,7 @@
 # Patterns
 
+> 🇰🇷 한국어: [`i18n/ko/patterns/README.md`](../i18n/ko/patterns/README.md)
+
 Canonical visual references for Chorus. Each pattern pairs an **image board** (`<slug>.png`) with a spec note (`<slug>.md`) covering intent, layout, tokens, and components. Boards are grouped by *what the surface does* — each `.png` is a montage of representative screens so an agent can learn a category's recurring patterns and visuals at a glance.
 
 Schemas say *what is allowed*; patterns say *what good looks like*.

package/agents/patterns/actions.md

@@ -4,6 +4,8 @@ image: ./actions.png
 status: canonical
 ---
 
+> 🇰🇷 한국어: [`i18n/ko/patterns/actions.md`](../i18n/ko/patterns/actions.md)
+
 ## Intent
 
 Task-completion surfaces — the user supplies input and commits. Verification forms, keyword/post registration, service-agreement checklists, comment composition, job filter settings, and the home content-creation shortcuts. Each surface is keyboard-first and terminates in **one** high-emphasis primary commit (a full-width or trailing blue `button / standard`), with neutral escapes parked around it. Reach here for the anatomy of "fill something in, then commit it".

package/agents/patterns/browsing.md

@@ -4,6 +4,8 @@ image: ./browsing.png
 status: canonical
 ---
 
+> 🇰🇷 한국어: [`i18n/ko/patterns/browsing.md`](../i18n/ko/patterns/browsing.md)
+
 ## Intent
 
 Entity discovery and navigation — channel drawers, all/followed channel lists, Explore trending rails, search empty/suggestion states, and the company feed. Lists of entities (channels, companies, posts) are the spine; the per-row commit is **Follow / Unfollow** (`button / toggle`), and the **whole row is the nav click target**. Reach here for "browse a set of things and follow/open one".

package/agents/patterns/communications.md

@@ -4,6 +4,8 @@ image: ./communications.png
 status: canonical
 ---
 
+> 🇰🇷 한국어: [`i18n/ko/patterns/communications.md`](../i18n/ko/patterns/communications.md)
+
 ## Intent
 
 Authored content and engagement — posts, embedded polls, gated previews, comment threads, the channel picker for posting, and offer/poll compose. `feed` is the spine for content streams; `list / radio` carries poll options; compose surfaces commit via a Cancel/Post action bar. Reach here for "read, react to, or author a post or comment".

package/agents/patterns/layout.md

@@ -4,6 +4,8 @@ image: ./layout.png
 status: canonical
 ---
 
+> 🇰🇷 한국어: [`i18n/ko/patterns/layout.md`](../i18n/ko/patterns/layout.md)
+
 ## Intent
 
 Page-level scaffolding and navigation chrome across the five main tab destinations — **Home, Company, Explore, Jobs, Notifications** — plus a channel profile. This board is the reference for *frame*, not content: how a screen seats its top bar, in-page tabs, filter rail, scrolling body, and bottom tab bar so every destination reads as one geometry. When composing any full screen, match the scaffold here before filling slots.

package/agents/patterns/modals.md

@@ -4,6 +4,8 @@ image: ./modals.png
 status: canonical
 ---
 
+> 🇰🇷 한국어: [`i18n/ko/patterns/modals.md`](../i18n/ko/patterns/modals.md)
+
 ## Intent
 
 Overlay surfaces that interrupt the flow for a commit or disclosure — confirmation Dialogs, info Dialogs, a full-screen disclosure panel, bottom-anchored confirmation CTAs, and BottomSheet purchase flows. These are the interaction-contract primitives: `dialog` and `bottom-sheet` are `visualReuse: "locked"` — chosen for behavior (scrim, focus trap, ARIA), never borrowed for shape. Reach here for "block the screen until the user decides".

package/agents/patterns/visual.md

@@ -4,6 +4,8 @@ image: ./visual.png
 status: canonical
 ---
 
+> 🇰🇷 한국어: [`i18n/ko/patterns/visual.md`](../i18n/ko/patterns/visual.md)
+
 ## Intent
 
 Image-bearing and expressive surfaces — empty-state illustrations, photo grids, media-rich cover cards, colorful category tiles, illustration banners, and gated-channel covers. This board is the reference for the **image-area contract**: every `assetType: "image"` slot fills with the universal `/placeholder.png` and swaps to a context image by changing only the `src`, never the slot's footprint. Reach here for "this surface carries pictures, not just text".

package/agents/usage.json

@@ -50,7 +50,7 @@
     "button": {
       "import": "Button",
       "from": "@teamblind-chorus/ui",
-      "note": "All button roles are the single `Button` export selected by the `variant` prop — there is NO `<Fab>`, `<IconButton>`, `<ToggleButton>`, or `<Toolbar>` export. An `import { Fab }` failure does NOT mean the family is missing; reach for `<Button variant=\"fab\">`.",
+      "note": "All button ROLES are the single `Button` export selected by the `variant` prop — there is NO `<Fab>`, `<IconButton>`, `<ToggleButton>`, or `<Toolbar>` export. An `import { Fab }` failure does NOT mean the family is missing; reach for `<Button variant=\"fab\">`. The one separate named export is `ButtonGroup` (the `group` sub) — a layout wrapper for two or more Buttons, NOT a Button variant.",
       "subs": {
         "standard": {
           "access": "variant",
@@ -58,6 +58,12 @@
           "variant": "standard",
           "example": "<Button variant=\"standard\" … />"
         },
+        "group": {
+          "access": "named",
+          "import": "ButtonGroup",
+          "example": "<ButtonGroup variant=\"docked\" label={<>선택한 직군: <strong>SW개발</strong></>}><Button appearance=\"outlined\" size=\"large\">연봉 정보</Button><Button appearance=\"primary\" size=\"large\">추천 채용공고</Button></ButtonGroup>",
+          "note": "Named export — NOT a Button variant (there is no `<Button variant=\"group\">`). Lays out adjacent Buttons; `variant=\"docked\"` is the bottom-pinned action bar (surface + 16px inset + 8px gap + upward `sys.elevation.sheet` shadow + optional `label`). Renders in flow — PageShell owns the pinning."
+        },
         "fab": {
           "access": "variant",
           "on": "Button",
@@ -150,6 +156,12 @@
       "note": "Rows are an `items` array of descriptors (name/followers/description/thumbnail/active/onToggle) — there are NO List or row children.",
       "example": "<DirectoryList label=\"…\" items={[{ value, name, followers, description, thumbnail: { src, alt }, active, onToggle }]} />"
     },
+    "empty-state": {
+      "import": "EmptyState",
+      "from": "@teamblind-chorus/ui",
+      "note": "Headline is the `headline` prop (required); `body` is the `body` prop; the CTA is the `action` object ({ label, href?/onClick? }) which renders a default-size primary Button — there is NO `cta` slot to fill with your own button. Pass an icon node to `illustration`.",
+      "example": "<EmptyState illustration={<ChatIcon />} headline=\"No posts yet\" body=\"Conversations you start or join will appear here.\" action={{ label: 'Start a post', onClick: () => {} }} />"
+    },
     "feed": {
       "import": "Feed",
       "from": "@teamblind-chorus/ui",
@@ -243,7 +255,7 @@
     "metadata": {
       "import": "Metadata",
       "from": "@teamblind-chorus/ui",
-      "note": "Both shapes are the single `Metadata` export — the one-line comment shape is `variant=\"compact\"`, NOT a separate `<MetadataCompact>`. Leading thumbnail is the `avatar` prop (NOT `thumbnail`); the secondary line is either a `subtitle` string or a `meta` string array — not children.",
+      "note": "Both shapes are the single `Metadata` export — the one-line channel-detail shape is `variant=\"compact\"`, NOT a separate `<MetadataCompact>`. Leading thumbnail is the `avatar` prop (NOT `thumbnail`) on both shapes; the secondary line is either a `subtitle` string or a `meta` string array — not children.",
       "subs": {
         "standard": {
           "access": "named",
@@ -254,7 +266,7 @@
           "access": "variant",
           "on": "Metadata",
           "variant": "compact",
-          "example": "<Metadata variant=\"compact\" meta={[\"Maple Mill Bakery\", \"ryestarter\"]} timestamp=\"35m\" />"
+          "example": "<Metadata variant=\"compact\" avatar={{ src, alt }} meta={[\"Maple Mill Bakery\", \"ryestarter\"]} timestamp=\"35m\" />"
         }
       }
     },
@@ -304,6 +316,12 @@
       "note": "Compose the bars INTO the shell — do NOT hand-roll a flex column, and do NOT add position:sticky/fixed to the bars (that double-applies their safe-area insets). The dev-only usePinnedBarGuard warns when a bar is rendered inside a scrolling region instead.",
       "example": "<PageShell nav={<NavigationBar variant=\"home\" … />} tabBar={<TabBar … />}>… scrolling screen content …</PageShell>"
     },
+    "pagination": {
+      "import": "Pagination",
+      "from": "@teamblind-chorus/ui",
+      "note": "Decorative only — the root is `aria-hidden` and dots are not buttons. An inline element with intrinsic width: the host owns horizontal placement (e.g. centering under its pager) as well as the active index (e.g. via IntersectionObserver on its snap targets), and MUST keep later pages keyboard-reachable on its own. Renders nothing when `count` < 2.",
+      "example": "<Pagination count={5} activeIndex={2} />"
+    },
     "profile-header": {
       "import": "ProfileHeader",
       "from": "@teamblind-chorus/ui",
@@ -351,6 +369,12 @@
       "note": "shape defaults to text; width/height are consumer-supplied. Stack multiples in SkeletonGroup to mirror the loading content's rhythm.",
       "example": "<Skeleton shape=\"block\" height={120} />"
     },
+    "spinner": {
+      "import": "Spinner",
+      "from": "@teamblind-chorus/ui",
+      "note": "indeterminate only — never bind it to a progress ratio (use Progress). Reserve to one Spinner per view. aria-label defaults to 'Loading'; pass a label child for visible loading copy beside the arc.",
+      "example": "<Spinner aria-label=\"Loading\" />"
+    },
     "status-tag": {
       "import": "StatusTag",
       "from": "@teamblind-chorus/ui",