{"_id":"@01.works/dashboard-pattern","name":"@01.works/dashboard-pattern","dist-tags":{"next":"0.1.0-beta.0","latest":"0.1.0-beta.0"},"versions":{"0.1.0-beta.0":{"name":"@01.works/dashboard-pattern","description":"Opt-in application-owned dashboard layout pattern for Design Context consumers.","version":"0.1.0-beta.0","type":"module","engines":{"node":">=22.12.0"},"main":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js"},"./styles.css":{"types":"./dist/styles.css.d.ts","default":"./dist/styles.css"}},"sideEffects":["./dist/styles.css"],"repository":{"type":"git","url":"git+https://github.com/01-office/design-context.git","directory":"packages/dashboard-pattern"},"bugs":{"url":"https://github.com/01-office/design-context/issues"},"homepage":"https://github.com/01-office/design-context/tree/main/packages/dashboard-pattern#readme","keywords":["dashboard","application-shell","react","design-system","developer-tools"],"publishConfig":{"access":"public"},"license":"SEE LICENSE IN LICENSE","peerDependencies":{"react":">=19"},"devDependencies":{"@vitest/browser-playwright":"4.1.11","@types/react":"19.2.18","@types/react-dom":"19.2.4","playwright":"1.62.1","publint":"0.3.24","react":"19.2.8","react-dom":"19.2.8","typescript":"6.0.2","vite":"8.2.2","vitest":"4.1.11"},"scripts":{"clean":"node scripts/clean.mjs","build":"pnpm run clean && tsc -p tsconfig.build.json && node scripts/copy-css.mjs","test":"vitest --run --config vitest.config.mts","test:package":"pnpm run build && node --test test/package-smoke.test.mjs","typecheck":"tsc --noEmit","lint:package":"pnpm run build && publint","verify":"pnpm run typecheck && pnpm run test && pnpm run test:package && pnpm run lint:package"},"_id":"@01.works/dashboard-pattern@0.1.0-beta.0","_integrity":"sha512-YENGMPOLGTTYJ8798D0x9Xaw9icBA40ItZFMWFNIFymEaoPCYLKSGhFqvfbVLEGwrDAq46smQcMk6WwgF6+gmQ==","_resolved":"/private/tmp/01.works-dashboard-pattern-0.1.0-beta.0.tgz","_from":"file:/private/tmp/01.works-dashboard-pattern-0.1.0-beta.0.tgz","_nodeVersion":"24.18.0","_npmVersion":"11.16.0","dist":{"integrity":"sha512-YENGMPOLGTTYJ8798D0x9Xaw9icBA40ItZFMWFNIFymEaoPCYLKSGhFqvfbVLEGwrDAq46smQcMk6WwgF6+gmQ==","shasum":"8aa298ceb12a4ecbc21e34f07c6bf11bbee88f35","tarball":"https://registry.npmjs.org/@01.works/dashboard-pattern/-/dashboard-pattern-0.1.0-beta.0.tgz","fileCount":11,"unpackedSize":23138,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIGc4TM6g7Zin/njU2lKUVT3qvlOn2Z08zzoJqSzkiiD+AiAltr7icYsaEctqT4RUmM74bgn3ux4hVmhwjbJI+SpESQ=="}]},"_npmUser":{"name":"kdnhyk","email":"kdnhyk@gmail.com"},"directories":{},"maintainers":[{"name":"kdnhyk","email":"kdnhyk@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/dashboard-pattern_0.1.0-beta.0_1788351741844_0.6344140812502039"},"_hasShrinkwrap":false}},"time":{"created":"2026-09-02T12:22:21.642Z","0.1.0-beta.0":"2026-09-02T12:22:21.967Z","modified":"2026-09-02T12:22:22.158Z"},"maintainers":[{"name":"kdnhyk","email":"kdnhyk@gmail.com"}],"description":"Opt-in application-owned dashboard layout pattern for Design Context consumers.","homepage":"https://github.com/01-office/design-context/tree/main/packages/dashboard-pattern#readme","keywords":["dashboard","application-shell","react","design-system","developer-tools"],"repository":{"type":"git","url":"git+https://github.com/01-office/design-context.git","directory":"packages/dashboard-pattern"},"bugs":{"url":"https://github.com/01-office/design-context/issues"},"license":"SEE LICENSE IN LICENSE","readme":"# `@01.works/dashboard-pattern`\n\n명시적으로 대시보드 스타일을 요청한 화면에서만 선택하는 application-owned 레이아웃 패턴이다. Design Context foundation의 일부가 아니며 `design-system init`이나 component profile에 자동으로 포함되지 않는다.\n\n첫 공개 릴리즈 후보는 `0.1.0-beta.0` prerelease다. API와 스타일 계약은 실제 dashboard consumer 검증에 따라 바뀔 수 있다.\n\n## 설치와 사용\n\n`0.1.0-beta.0`이 `next`로 공개된 뒤 설치한다.\n\n```bash\npnpm add @01.works/dashboard-pattern@next react\n```\n\n```tsx\nimport {\n  DashboardHeader,\n  DashboardNavigation,\n  DashboardNavigationItem,\n  DashboardShell,\n} from \"@01.works/dashboard-pattern\"\nimport \"@01.works/dashboard-pattern/styles.css\"\n\nexport function OperationsDashboard() {\n  return (\n    <DashboardShell\n      appearance=\"developer-dark\"\n      brand=\"Operations\"\n      navigation={\n        <DashboardNavigation>\n          <DashboardNavigationItem active label=\"Overview\" />\n        </DashboardNavigation>\n      }\n      header={<DashboardHeader leading=\"Overview\" />}\n    >\n      {/* 앱이 소유하는 panel, table, route를 조합한다. */}\n    </DashboardShell>\n  )\n}\n```\n\n스타일은 package root import에 자동 주입되지 않는다. dashboard를 선택한 consumer만 `@01.works/dashboard-pattern/styles.css`를 명시적으로 가져와야 한다.\n\n## 사용 경계\n\n- 사용자가 대시보드, 운영 콘솔, 관리 화면처럼 정보 밀도가 높은 제품 화면을 명시적으로 원할 때만 사용한다.\n- 일반 웹사이트, Catalogue 화면, 마케팅 페이지에 기본값으로 적용하지 않는다.\n- 검증된 대시보드 reference가 있으면 그 reference의 layout evidence를 우선하고, 이 패턴은 reference가 없을 때의 opt-in fallback으로만 사용한다.\n- palette와 typeface는 Design Context foundation을 따른다. radius는 이 패턴이 선택된 범위 안에서만 개발 도구형 `4px / 6px / 8px` 계층을 사용한다.\n\n이 패키지는 shell, sidebar, header와 반응형 전환의 공간 규칙만 소유한다. grid, panel, metric, table과 업무별 pane은 consumer가 기존 디자인 시스템 primitive와 앱 markup으로 조합한다. route, 권한, 메뉴 정보, 데이터 로딩과 업무 상태도 consumer가 소유한다. 내비게이션 항목은 `as`로 router link를 주입할 수 있고, 선택 상태는 `aria-current=\"page\"`로 노출한다.\n\n`DashboardShell`의 `appearance=\"developer-dark\"`는 Paseo 계열의 연속 pane UI가 필요한 dashboard consumer가 명시적으로 선택하는 지역 appearance다. shell 내부에서만 surface와 interaction token을 덮어쓰며 일반 페이지와 foundation token은 변경하지 않는다. 기본값은 `foundation`이다.\n\n개발 도구형 화면에서는 그룹화된 compact navigation, 얕은 surface 계층, 작업 상태와 pane 중심 구성을 권장한다. 이는 선택 가능한 예시 composition이며 dashboard pattern의 전역 시각 기본값은 아니다.\n\n## 상태와 시각 계약\n\n현재 상태는 `experimental`이다. 실제 dashboard consumer 두 곳 이상에서 같은 규칙이 반복되기 전에는 foundation이나 자동 설치 profile로 승격하지 않는다.\n\n| Viewport | Sidebar | Header | Content padding |\n| --- | ---: | ---: | ---: |\n| wide (≥960px) | 248px rail | 40px | 16px |\n| narrow (≤959px) | stacked navigation | 40px | 16px |\n\n`DASHBOARD_PATTERN_USAGE`는 `explicit-dashboard-only`로 고정되어 있다. `DASHBOARD_PATTERN_VIEWPORT_CONTRACT`와 `resolveDashboardPatternViewport`가 breakpoint와 geometry의 단일 source다.\n\n`DASHBOARD_PATTERN_STYLE_CONTRACT`는 compact element `4px`, navigation/control `6px`, 앱 소유 pane surface `8px`의 곡률을 고정한다. Paseo의 `base/md/lg` 계층과 Orca의 `rounded-md/lg` 사용 방식에서 공통분모만 취한 값이며, dashboard shell 밖의 foundation radius에는 영향을 주지 않는다.\n\n## 구현 근거\n\n- Paseo `78f7796`: [`theme.ts`](https://github.com/getpaseo/paseo/blob/78f7796eb44223c7fa252d3c537263e3a0b34875/packages/app/src/styles/theme.ts)의 `BORDER_RADIUS`, `SPACING`, surface token과 [`left-sidebar.tsx`](https://github.com/getpaseo/paseo/blob/78f7796eb44223c7fa252d3c537263e3a0b34875/packages/app/src/components/left-sidebar.tsx)의 `md/lg/full` 적용 위치를 확인했다.\n- Orca `f1ba7e4`: [`index.css`](https://github.com/Haroon966/Orca/blob/f1ba7e4a040f25aa7b60f74ebc53536483adb90f/src/index.css)의 `--radius: 0.5rem`과 [`SidebarContent.tsx`](https://github.com/Haroon966/Orca/blob/f1ba7e4a040f25aa7b60f74ebc53536483adb90f/src/components/sidebar/view/subcomponents/SidebarContent.tsx)의 `rounded-md/lg/xl`, layered card 사용을 확인했다.\n- 페이지 composition은 Paseo [`workspace-screen.tsx`](https://github.com/getpaseo/paseo/blob/78f7796eb44223c7fa252d3c537263e3a0b34875/packages/app/src/screens/workspace/workspace-screen.tsx)의 header/tab/split-pane 흐름과 Orca [`MainContent.tsx`](https://github.com/Haroon966/Orca/blob/f1ba7e4a040f25aa7b60f74ebc53536483adb90f/src/components/main-content/view/MainContent.tsx), [`SidePanel.tsx`](https://github.com/Haroon966/Orca/blob/f1ba7e4a040f25aa7b60f74ebc53536483adb90f/src/components/main-content/view/SidePanel.tsx), [`PillBar.tsx`](https://github.com/Haroon966/Orca/blob/f1ba7e4a040f25aa7b60f74ebc53536483adb90f/src/shared/view/ui/PillBar.tsx)의 primary-pane/inspector 구조를 근거로 한다.\n\n외부 프로젝트의 클래스나 구현을 복사하지 않고, 반복되는 수치와 계층만 이 패턴의 독립 토큰으로 재정의한다.\n\n## 검증\n\n```bash\npnpm --filter @01.works/dashboard-pattern verify\n```\n\nChromium 계약 테스트가 1440×900과 390×844에서 shell, sidebar, header, content padding과 navigation의 반응형 전환을 확인한다. package smoke test는 실제 tarball을 임시 consumer에 설치해 Node SSR, strict TypeScript, 공개 CSS export, 라이선스와 `dist` 전용 구성을 검증한다.\n\n릴리즈는 저장소의 npm Trusted Publishing workflow에서만 수행한다. 로컬에서 `npm publish`나 `pnpm publish`를 직접 실행하지 않는다.\n","readmeFilename":"README.md","_rev":"1-c3338f89ffef867f311a77de1c121de8"}