@cere/cere-design-system 0.0.9 → 0.0.13

package/README.md

@@ -5,7 +5,7 @@ Cere Network Design System built with Material UI and React.
 ## Installation
 
 ```bash
-npm install @cere-network/cere-design-system
+npm install @cere/cere-design-system
 ```
 
 ## Usage
@@ -201,10 +201,204 @@ npm run lint
 - **Warning**: Orange/Yellow (#F59E0B)
 - **Tertiary**: Orange/Yellow (#F59E0B)
 
+## Spec-Driven Development
+
+This project uses [GitHub Spec Kit](https://github.com/github/spec-kit) (`specify-cli`) for spec-driven development - a methodology where every feature starts with a specification document before implementation.
+
+### What is Spec-Driven Development?
+
+Spec-Driven Development (SDD) is a structured approach to software development where:
+1. **Specs define features** - Write clear specifications before coding
+2. **Plans outline architecture** - Technical designs guide implementation
+3. **Tasks break down work** - Granular checklists ensure completeness
+4. **AI agents assist** - Specs provide context for AI-powered development
+
+This ensures consistency, clarity, and maintainability across the entire design system.
+
+### Using Specify CLI
+
+Install `specify-cli` (recommended via `uv`):
+```bash
+uv tool install specify-cli
+```
+
+Or with pipx/npm:
+```bash
+pipx install specify-cli
+# or
+npm install -g specify-cli
+```
+
+### Development Workflow
+
+#### 1. **Create a Specification**
+Use AI agents (Cursor, Warp, Claude, etc.) with the `/speckit.specify` command:
+```bash
+/speckit.specify Create a [ComponentName] component that [does something]
+```
+
+This creates:
+- New git branch: `001-component-name`
+- Spec file: `specs/001-component-name/spec.md`
+- Populated template with requirements, APIs, and acceptance criteria
+
+#### 2. **Generate Implementation Plan**
+After spec approval:
+```bash
+/speckit.plan
+```
+
+Creates `specs/001-component-name/plan.md` with:
+- Technical architecture decisions
+- Implementation phases
+- Dependencies and considerations
+
+#### 3. **Break Down into Tasks**
+After plan approval:
+```bash
+/speckit.tasks
+```
+
+Creates `specs/001-component-name/tasks.md` with:
+- Granular implementation checklist
+- Testing requirements
+- Documentation updates
+
+#### 4. **Implement & Validate**
+Follow the tasks checklist and validate:
+```bash
+npm run type-check && npm run lint && npm test && npm run build
+```
+
+### Key Files
+
+- `.specify/memory/constitution.md` - Project governing principles
+- `.specify/memory/components-reference.md` - Complete component API reference
+- `.specify/memory/workflow.md` - Step-by-step development workflow
+- `.specify/memory/package-usage-guide.md` - How to use this package in other projects
+- `.specify/templates/` - Spec, plan, and task templates
+- `specs/` - Feature specifications and implementation plans
+
+### Using This Package in Your Application's SpecKit
+
+If you're building an application that uses this design system and also uses Spec Kit, you can reference the design system's component documentation in your specs and AI agent context.
+
+#### Method 1: Reference in Your Constitution
+
+Add to your application's `.specify/memory/constitution.md`:
+
+```markdown
+## Article: UI Component Standards
+
+### Design System Requirement
+All UI components MUST use the Cere Design System (@cere/cere-design-system).
+
+### Component Reference
+Available components and their APIs are documented at:
+`node_modules/@cere/cere-design-system/.specify/memory/components-reference.md`
+
+All developers and AI agents MUST consult this reference before implementing UI features.
+```
+
+#### Method 2: Create a Design System Memory File
+
+Create `.specify/memory/design-system.md` in your application:
+
+```markdown
+# Cere Design System Reference
+
+This application uses @cere/cere-design-system
+
+## Quick Reference
+See complete component reference:
+`node_modules/@cere/cere-design-system/.specify/memory/components-reference.md`
+
+Also see package usage guide:
+`node_modules/@cere/cere-design-system/.specify/memory/package-usage-guide.md`
+
+## Installation & Setup
+```tsx
+import { ThemeProvider, theme } from '@cere/cere-design-system';
+import { Button, TextField, Card } from '@cere/cere-design-system';
+
+<ThemeProvider theme={theme}>
+  <App />
+</ThemeProvider>
+```
+```
+
+#### AI Agent Instructions
+
+When AI agents work on your application specs:
+1. They can reference `components-reference.md` for complete component APIs
+2. They should follow design system patterns and use existing components
+3. They get TypeScript types and usage examples from the reference
+
+See `.specify/memory/package-usage-guide.md` (included in the npm package) for detailed integration instructions.
+
 ## Documentation
 
 - [Full Components Reference](./COMPONENTS.md) - Complete API documentation
 - [Integration Guide](./INTEGRATION.md) - Step-by-step integration instructions
+- **[AI Agent Context](./.agent/README.md)** - Component reference optimized for AI agents (Claude, GPT-4, Cursor, etc.)
+
+## AI-Assisted Development
+
+This design system includes comprehensive AI agent context to accelerate development with AI coding assistants.
+
+### For AI Agents (Cursor, Claude, GPT-4, etc.)
+
+The package includes a complete component reference optimized for AI agents at `.agent/rules/COMPONENTS.md`.
+
+**Quick Start:**
+```bash
+# After installing the package
+cat node_modules/@cere/cere-design-system/.agent/rules/COMPONENTS.md
+```
+
+Paste the output into your AI conversation to give the agent complete knowledge of:
+- All 70+ available components
+- Props and TypeScript types
+- Usage examples and patterns
+- Theme configuration
+- Best practices
+
+**Setup Methods:**
+
+1. **Direct reference** - Copy the file content into your AI conversation
+2. **Project rules** - Add to `.cursorrules` or `.agent/rules/`
+3. **Auto-inject** - Use a postinstall script to copy to your project
+
+See [.agent/README.md](./.agent/README.md) for detailed setup instructions and examples.
+
+## AI-Assisted Development
+
+This design system includes comprehensive AI agent context to accelerate development with AI coding assistants.
+
+### For AI Agents (Cursor, Claude, GPT-4, etc.)
+
+The package includes a complete component reference optimized for AI agents at `.agent/rules/COMPONENTS.md`.
+
+**Quick Start:**
+```bash
+# After installing the package
+cat node_modules/@cere/cere-design-system/.agent/rules/COMPONENTS.md
+```
+
+Paste the output into your AI conversation to give the agent complete knowledge of:
+- All 70+ available components
+- Props and TypeScript types
+- Usage examples and patterns
+- Theme configuration
+- Best practices
+
+**Setup Methods:**
+
+1. **Direct reference** - Copy the file content into your AI conversation
+2. **Project rules** - Add to `.cursorrules` or `.agent/rules/`
+3. **Auto-inject** - Use a postinstall script to copy to your project
+
+See [.agent/README.md](./.agent/README.md) for detailed setup instructions and examples.
 
 ## Integration with Existing Projects
 
@@ -224,8 +418,8 @@ To use this package in `dynamic-indexer-client` or other projects:
 
 3. Use in your app:
    ```tsx
-   import { theme } from '@cere-network/cere-design-system';
-   import { Button, Dialog, Sidebar } from '@cere-network/cere-design-system';
+   import { theme } from '@cere/cere-design-system';
+   import { Button, Dialog, Sidebar } from '@cere/cere-design-system';
    ```
 
 See [INTEGRATION.md](./INTEGRATION.md) for detailed migration guide.

package/dist/index.css

@@ -0,0 +1,79 @@
+/* src/assets/fonts/human-sans-font.css */
+@font-face {
+  font-family: "HumanSans";
+  font-weight: 200;
+  font-style: normal;
+  font-display: swap;
+  src: url("./HumanSans-ExtraLight-VL7DEKQ4.otf") format("opentype");
+}
+@font-face {
+  font-family: "HumanSans";
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+  src: url("./HumanSans-Light-YV7AFKRB.otf") format("opentype");
+}
+@font-face {
+  font-family: "HumanSans";
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+  src: url("./HumanSans-Regular-QMFEP3F6.otf") format("opentype");
+}
+@font-face {
+  font-family: "HumanSans";
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+  src: url("./HumanSans-Medium-UULJ3PIR.otf") format("opentype");
+}
+@font-face {
+  font-family: "HumanSans";
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+  src: url("./HumanSans-Bold-4EAJ3L3T.otf") format("opentype");
+}
+@font-face {
+  font-family: "HumanSans";
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+  src: url("./HumanSans-Black-C4YJONK7.otf") format("opentype");
+}
+@font-face {
+  font-family: "HumanSans";
+  font-weight: 200;
+  font-style: oblique;
+  font-display: swap;
+  src: url("./HumanSans-ExtraLightOblique-VK2JTUXF.otf") format("opentype");
+}
+@font-face {
+  font-family: "HumanSans";
+  font-weight: 300;
+  font-style: oblique;
+  font-display: swap;
+  src: url("./HumanSans-LightOblique-VIXV7QA6.otf") format("opentype");
+}
+@font-face {
+  font-family: "HumanSans";
+  font-weight: 400;
+  font-style: oblique;
+  font-display: swap;
+  src: url("./HumanSans-RegularOblique-YPKQJAAM.otf") format("opentype");
+}
+@font-face {
+  font-family: "HumanSans";
+  font-weight: 500;
+  font-style: oblique;
+  font-display: swap;
+  src: url("./HumanSans-MediumOblique-M7FHDZRS.otf") format("opentype");
+}
+@font-face {
+  font-family: "HumanSans";
+  font-weight: 700;
+  font-style: oblique;
+  font-display: swap;
+  src: url("./HumanSans-BoldOblique-4D325T4F.otf") format("opentype");
+}
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/assets/fonts/human-sans-font.css"],"sourcesContent":["@font-face {\n  font-family: 'HumanSans';\n  font-weight: 200;\n  font-style: normal;\n  font-display: swap;\n  src: url('./HumanSans-ExtraLight.otf') format('opentype');\n}\n\n@font-face {\n  font-family: 'HumanSans';\n  font-weight: 300;\n  font-style: normal;\n  font-display: swap;\n  src: url('./HumanSans-Light.otf') format('opentype');\n}\n\n@font-face {\n  font-family: 'HumanSans';\n  font-weight: 400;\n  font-style: normal;\n  font-display: swap;\n  src: url('./HumanSans-Regular.otf') format('opentype');\n}\n\n@font-face {\n  font-family: 'HumanSans';\n  font-weight: 500;\n  font-style: normal;\n  font-display: swap;\n  src: url('./HumanSans-Medium.otf') format('opentype');\n}\n\n@font-face {\n  font-family: 'HumanSans';\n  font-weight: 700;\n  font-style: normal;\n  font-display: swap;\n  src: url('./HumanSans-Bold.otf') format('opentype');\n}\n\n@font-face {\n  font-family: 'HumanSans';\n  font-weight: 900;\n  font-style: normal;\n  font-display: swap;\n  src: url('./HumanSans-Black.otf') format('opentype');\n}\n\n@font-face {\n  font-family: 'HumanSans';\n  font-weight: 200;\n  font-style: oblique;\n  font-display: swap;\n  src: url('./HumanSans-ExtraLightOblique.otf') format('opentype');\n}\n\n@font-face {\n  font-family: 'HumanSans';\n  font-weight: 300;\n  font-style: oblique;\n  font-display: swap;\n  src: url('./HumanSans-LightOblique.otf') format('opentype');\n}\n\n@font-face {\n  font-family: 'HumanSans';\n  font-weight: 400;\n  font-style: oblique;\n  font-display: swap;\n  src: url('./HumanSans-RegularOblique.otf') format('opentype');\n}\n\n@font-face {\n  font-family: 'HumanSans';\n  font-weight: 500;\n  font-style: oblique;\n  font-display: swap;\n  src: url('./HumanSans-MediumOblique.otf') format('opentype');\n}\n\n@font-face {\n  font-family: 'HumanSans';\n  font-weight: 700;\n  font-style: oblique;\n  font-display: swap;\n  src: url('./HumanSans-BoldOblique.otf') format('opentype');\n}\n\n"],"mappings":";AAAA;AACE,eAAa;AACb,eAAa;AACb,cAAY;AACZ,gBAAc;AACd,OAAK,2CAAkC,OAAO;AAChD;AAEA;AACE,eAAa;AACb,eAAa;AACb,cAAY;AACZ,gBAAc;AACd,OAAK,sCAA6B,OAAO;AAC3C;AAEA;AACE,eAAa;AACb,eAAa;AACb,cAAY;AACZ,gBAAc;AACd,OAAK,wCAA+B,OAAO;AAC7C;AAEA;AACE,eAAa;AACb,eAAa;AACb,cAAY;AACZ,gBAAc;AACd,OAAK,uCAA8B,OAAO;AAC5C;AAEA;AACE,eAAa;AACb,eAAa;AACb,cAAY;AACZ,gBAAc;AACd,OAAK,qCAA4B,OAAO;AAC1C;AAEA;AACE,eAAa;AACb,eAAa;AACb,cAAY;AACZ,gBAAc;AACd,OAAK,sCAA6B,OAAO;AAC3C;AAEA;AACE,eAAa;AACb,eAAa;AACb,cAAY;AACZ,gBAAc;AACd,OAAK,kDAAyC,OAAO;AACvD;AAEA;AACE,eAAa;AACb,eAAa;AACb,cAAY;AACZ,gBAAc;AACd,OAAK,6CAAoC,OAAO;AAClD;AAEA;AACE,eAAa;AACb,eAAa;AACb,cAAY;AACZ,gBAAc;AACd,OAAK,+CAAsC,OAAO;AACpD;AAEA;AACE,eAAa;AACb,eAAa;AACb,cAAY;AACZ,gBAAc;AACd,OAAK,8CAAqC,OAAO;AACnD;AAEA;AACE,eAAa;AACb,eAAa;AACb,cAAY;AACZ,gBAAc;AACd,OAAK,4CAAmC,OAAO;AACjD;","names":[]}