{
"$schema": "https://ui.shadcn.com/schema/registry.json",
"homepage": "https://mzizi.dev",
"items": [
{
"dependencies": [],
"description": "N8 assurance probe that validates WCAG compliance and color-blindness safety across every semantic-color pair. Runs daily via pg_cron, detects regressions, and files a Fundi issue for each. Uses Machado/Oliveira/Fernandes (2009) linear-RGB simulation matrices for protanopia, deuteranopia, tritanopia, and achromatopsia. Includes an audit_exempt flag so decorative borders covered by WCAG 1.4.11 non-text-contrast exemption are correctly skipped.",
"files": [
{
"path": "docs/accessibility-audit-pipeline.md",
"type": "registry:file"
}
],
"name": "accessibility-audit",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [
"radix-ui"
],
"description": "A vertically stacked set of interactive headings that reveal content.",
"files": [
{
"path": "components/ui/accordion.tsx",
"type": "registry:ui"
}
],
"name": "accordion",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Chronological action list with timeline pattern for dashboards and profiles.",
"files": [
{
"path": "components/ui/activity-feed.tsx",
"type": "registry:ui"
}
],
"name": "activity-feed",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Structured address form with street, city, state, postal code, and country fields with African countries prioritized.",
"files": [
{
"path": "components/ui/address-input.tsx",
"type": "registry:ui"
}
],
"name": "address-input",
"registryDependencies": [
"input"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Admin/back-office page. Tabbed admin interface with sidebar navigation, content area, and action bar. For Mukoko Console admin, B2B partner dashboards, org management.",
"files": [
{
"path": "components/ui/admin-page.tsx",
"type": "registry:ui"
}
],
"name": "admin-page",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Chronological event list grouped by date.",
"files": [
{
"path": "components/ui/agenda-view.tsx",
"type": "registry:ui"
}
],
"name": "agenda-view",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Complete AI conversation interface with message history, streaming, and suggested prompts.",
"files": [
{
"path": "components/ui/ai-chat.tsx",
"type": "registry:ui"
}
],
"name": "ai-chat",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Thumbs up/down rating for AI responses with optional text feedback.",
"files": [
{
"path": "components/ui/ai-feedback.tsx",
"type": "registry:ui"
}
],
"name": "ai-feedback",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Structured AI output card with markdown rendering and action buttons.",
"files": [
{
"path": "components/ui/ai-response-card.tsx",
"type": "registry:ui"
}
],
"name": "ai-response-card",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "AI safety utilities: input validation, prompt injection detection, and rate limiting.",
"files": [
{
"path": "lib/ai-safety.ts",
"type": "registry:lib"
}
],
"name": "ai-safety",
"registryDependencies": [
"observability"
],
"type": "registry:lib"
},
{
"dependencies": [],
"description": "Displays a callout for important information.",
"files": [
{
"path": "components/ui/alert.tsx",
"type": "registry:ui"
}
],
"name": "alert",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [
"radix-ui"
],
"description": "A modal dialog that interrupts the user with important content and expects a response.",
"files": [
{
"path": "components/ui/alert-dialog.tsx",
"type": "registry:ui"
}
],
"name": "alert-dialog",
"registryDependencies": [
"button"
],
"type": "registry:ui"
},
{
"dependencies": [
"recharts"
],
"description": "KPI metric card with sparkline chart, period comparison (vs last week/month/year), and drill-down action. The standard analytics widget for the Nyuchi Console and all 7 Nyuchi product dashboards.",
"files": [
{
"path": "components/ui/analytics-dashboard-card.tsx",
"type": "registry:ui"
}
],
"name": "analytics-dashboard-card",
"registryDependencies": [
"card",
"chart"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Analytics dashboard page. KPI cards, time-series charts, data tables, date range picker, export controls. Used by Mukoko Console, Nyuchi Web Services, and B2B partners. Open data compatible — sections can be made public. Competitors: Grafana, Google Analytics, Metabase.",
"files": [
{
"path": "components/ui/analytics-dashboard-page.tsx",
"type": "registry:ui"
}
],
"name": "analytics-dashboard-page",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Ancestral MIT display for deceased community members. Shows the person's fixed age, memorial badge, heritage data contribution status, and ancestral pool participation. Implements the visual layer of the MIT Ancestral Lifecycle Protocol.",
"files": [
{
"path": "components/ui/ancestry-memorial.tsx",
"type": "registry:ui"
}
],
"name": "ancestry-memorial",
"registryDependencies": [
"card",
"avatar",
"badge"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Dismissible top-of-page banner for announcements with mineral-colored variants.",
"files": [
{
"path": "components/ui/announcement-bar.tsx",
"type": "registry:ui"
}
],
"name": "announcement-bar",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "API explorer/playground page. Endpoint browser, request builder, response viewer, auth token input. For Nyuchi Web Services API docs. Competitors: Swagger UI, Postman, Stripe API Reference.",
"files": [
{
"path": "components/ui/api-explorer-page.tsx",
"type": "registry:ui"
}
],
"name": "api-explorer-page",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Masked/revealable API key with copy and regenerate actions.",
"files": [
{
"path": "components/ui/api-key-display.tsx",
"type": "registry:ui"
}
],
"name": "api-key-display",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "API quota visualization with current usage, rate limit status, and throttling indicator. Shows requests/second, daily quota, and monthly billing period. Used in Nyuchi API Platform dashboard and developer portal.",
"files": [
{
"path": "components/ui/api-usage-meter.tsx",
"type": "registry:ui"
}
],
"name": "api-usage-meter",
"registryDependencies": [
"card",
"progress"
],
"type": "registry:ui"
},
{
"dependencies": [
"radix-ui"
],
"description": "Ecosystem app selector popover with grid of Nyuchi app icons.",
"files": [
{
"path": "components/ui/app-switcher.tsx",
"type": "registry:ui"
}
],
"name": "app-switcher",
"registryDependencies": [
"popover",
"button",
"https://mzizi.dev/api/v1/ui/nyuchi-harness"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Medical appointment card showing provider name, specialty, date/time, location, and join/cancel actions. Maps to health.medical_appointment (Schema.org ScheduleAction). Used in Health mini-app and Nyuchi Medical provider views.",
"files": [
{
"path": "components/ui/appointment-card.tsx",
"type": "registry:ui"
}
],
"name": "appointment-card",
"registryDependencies": [
"card",
"avatar",
"button",
"badge"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "SVG radial arc gauge (270° sweep, open at bottom). Displays a percentage value as a filled arc with the value text centered inside. Uses stroke-dasharray animation. Proper role=\"meter\" with aria-valuenow/min/max. Used for UV index, trust scores, completion percentages, health metrics, battery levels — any bounded numeric value. Production-proven in mukoko-weather MetricCard.",
"files": [
{
"path": "components/ui/arc-gauge.tsx",
"type": "registry:ui"
}
],
"name": "arc-gauge",
"registryDependencies": [
"utils"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Nyuchi ecosystem architecture specification — local-first data strategy and sovereignty assessment.",
"files": [
{
"path": "lib/architecture.ts",
"type": "registry:lib"
}
],
"name": "architecture",
"registryDependencies": [],
"type": "registry:lib"
},
{
"dependencies": [],
"description": "Article/news reading page. Hero image, headline, author, read time, content body, source badge, related articles. Competitors: Medium, BBC, Al Jazeera.",
"files": [
{
"path": "components/ui/article-page.tsx",
"type": "registry:ui"
}
],
"name": "article-page",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [
"radix-ui"
],
"description": "Displays content within a desired ratio.",
"files": [
{
"path": "components/ui/aspect-ratio.tsx",
"type": "registry:ui"
}
],
"name": "aspect-ratio",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "User/team member selector for task assignment. Shows avatar, name, and availability indicator. Supports single and multi-select. Used in task assignment, event organiser roles, Circle admin assignment, and any workflow where items are assigned to people.",
"files": [
{
"path": "components/ui/assignee-picker.tsx",
"type": "registry:ui"
}
],
"name": "assignee-picker",
"registryDependencies": [
"combobox",
"avatar",
"badge"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Audio playback with progress bar, play/pause, and speed control.",
"files": [
{
"path": "components/ui/audio-player.tsx",
"type": "registry:ui"
}
],
"name": "audio-player",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Waveform visualization for audio recording, playback, and editing. Shows amplitude over time with playhead position. Used for voice notes in Campfire, audio content in Bytes, and podcast previews.",
"files": [
{
"path": "components/ui/audio-waveform.tsx",
"type": "registry:ui"
}
],
"name": "audio-waveform",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Audit event display with actor, action, target, timestamp.",
"files": [
{
"path": "components/ui/audit-log-entry.tsx",
"type": "registry:ui"
}
],
"name": "audit-log-entry",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Author profile card with avatar, bio, works count, subscriber count, revenue sharing indicator, and follow button. Maps to identity.person + novels.work tables. Used on novel detail pages and author directory.",
"files": [
{
"path": "components/ui/author-bio-card.tsx",
"type": "registry:ui"
}
],
"name": "author-bio-card",
"registryDependencies": [
"card",
"avatar",
"button",
"https://mzizi.dev/api/v1/ui/nyuchi-verified-badge"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Text input with async suggestion dropdown, loading states, and keyboard navigation.",
"files": [
{
"path": "components/ui/autocomplete.tsx",
"type": "registry:ui"
}
],
"name": "autocomplete",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [
"radix-ui"
],
"description": "An image element with a fallback for representing the user.",
"files": [
{
"path": "components/ui/avatar.tsx",
"type": "registry:ui"
}
],
"name": "avatar",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Overlapping avatar stack with +N overflow indicator for team displays.",
"files": [
{
"path": "components/ui/avatar-group.tsx",
"type": "registry:ui"
}
],
"name": "avatar-group",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [
"class-variance-authority"
],
"description": "Displays a badge or a component that looks like a badge.",
"files": [
{
"path": "components/ui/badge.tsx",
"type": "registry:ui"
}
],
"name": "badge",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Multi-select action toolbar that appears when items are selected in a table or list. Shows selected count with approve-all, reject-all, export, and custom action buttons. Used across all Nyuchi Console moderation and management views.",
"files": [
{
"path": "components/ui/batch-action-bar.tsx",
"type": "registry:ui"
}
],
"name": "batch-action-bar",
"registryDependencies": [
"button-group",
"badge"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Asymmetric grid layout with varying tile sizes. Japanese-inspired content layout pattern for dashboards, feature showcases, and landing pages. Supports responsive breakpoint-aware tile resizing. Audit flagged as missing UX pattern. ALPHA — awaiting frontend implementation.",
"files": [
{
"path": "components/ui/bento-grid.tsx",
"type": "registry:ui"
}
],
"name": "bento-grid",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Billing & subscription management page. Current plan, usage meters, invoices, payment methods, upgrade CTA. Used by Nyuchi Web Services, B2B partners, and Mukoko premium subscribers.",
"files": [
{
"path": "components/ui/billing-page.tsx",
"type": "registry:ui"
}
],
"name": "billing-page",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Date/time availability grid for bookings. Shows available, partially available, and unavailable slots with mineral color coding. Used for vehicle booking (Transport), venue booking (Nhimbe), and appointment scheduling (Health).",
"files": [
{
"path": "components/ui/booking-calendar.tsx",
"type": "registry:ui"
}
],
"name": "booking-calendar",
"registryDependencies": [
"calendar",
"time-slot-picker"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Booking success card with full details, QR code, calendar-add button, and share action. The standard post-booking confirmation pattern across Nhimbe events, Transport bookings, and Health appointments. Maps to planner.reservation table.",
"files": [
{
"path": "components/ui/booking-confirmation.tsx",
"type": "registry:ui"
}
],
"name": "booking-confirmation",
"registryDependencies": [
"card",
"button",
"separator",
"badge"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Booking/reservation page. Service/ride selection, date/time picker, provider selection, confirmation. Used by transport, health, events.",
"files": [
{
"path": "components/ui/booking-page.tsx",
"type": "registry:ui"
}
],
"name": "booking-page",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Mobile slide-up panel with drag handle, backdrop, and slide-up animation.",
"files": [
{
"path": "components/ui/bottom-sheet.tsx",
"type": "registry:ui"
}
],
"name": "bottom-sheet",
"registryDependencies": [
"button"
],
"type": "registry:ui"
},
{
"dependencies": [
"radix-ui"
],
"description": "Displays the path to the current resource using a hierarchy of links.",
"files": [
{
"path": "components/ui/breadcrumb.tsx",
"type": "registry:ui"
}
],
"name": "breadcrumb",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Concurrency isolation pattern inspired by Resilience4j Bulkhead. Limits how many concurrent calls can hit a single dependency so one slow service cannot consume all available connections and starve other operations. Named after ship bulkheads that prevent a single hull breach from sinking the whole vessel. Supports both semaphore-style (max concurrent) and queue-style (max waiting) isolation. Integrates with observability for tracking concurrent call counts and rejection rates.",
"files": [
{
"path": "lib/bulkhead.ts",
"type": "registry:lib"
}
],
"name": "bulkhead",
"registryDependencies": [
"observability"
],
"type": "registry:lib"
},
{
"dependencies": [
"radix-ui",
"class-variance-authority"
],
"description": "Displays a button or a component that looks like a button.",
"files": [
{
"path": "components/ui/button.tsx",
"type": "registry:ui"
}
],
"name": "button",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [
"class-variance-authority"
],
"description": "Groups related buttons together.",
"files": [
{
"path": "components/ui/button-group.tsx",
"type": "registry:ui"
}
],
"name": "button-group",
"registryDependencies": [
"separator"
],
"type": "registry:ui"
},
{
"dependencies": [
"react-day-picker"
],
"description": "A date field component that allows users to enter and edit dates.",
"files": [
{
"path": "components/ui/calendar.tsx",
"type": "registry:ui"
}
],
"name": "calendar",
"registryDependencies": [
"button"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Single-day time grid with hourly slots and event blocks.",
"files": [
{
"path": "components/ui/calendar-day-view.tsx",
"type": "registry:ui"
}
],
"name": "calendar-day-view",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Full month calendar grid with event dots, today indicator, and day cell click handler. Complements calendar-day-view and calendar-week-view to complete the three standard calendar views. The month grid is the most common calendar entry point across all apps.",
"files": [
{
"path": "components/ui/calendar-month-view.tsx",
"type": "registry:ui"
}
],
"name": "calendar-month-view",
"registryDependencies": [
"calendar"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "7-column weekly calendar view with hourly time slots.",
"files": [
{
"path": "components/ui/calendar-week-view.tsx",
"type": "registry:ui"
}
],
"name": "calendar-week-view",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Camera preview overlay with branded recording indicator, timer display, and effects panel trigger. The creation entry point for Bytes short-form video and Campfire media messages. Pill-shaped record button with malachite accent.",
"files": [
{
"path": "components/ui/camera-viewfinder.tsx",
"type": "registry:ui"
}
],
"name": "camera-viewfinder",
"registryDependencies": [
"button"
],
"type": "registry:ui"
},
{
"dependencies": [
"chart.js",
"react-chartjs-2"
],
"description": "Chart.js Canvas-based chart renderer for data-heavy dashboards. Use INSTEAD of the Recharts chart when you have 100+ data points per chart or multiple charts per page. Canvas renders everything to a single DOM element regardless of data volume, while SVG (Recharts) creates a DOM node per data point. Includes CSS variable resolution for Canvas 2D context (which cannot read var() natively), theme-aware color fallbacks, mobile performance optimisation (reduced DPR, disabled animations), and automatic Chart.js instance cleanup on unmount to prevent canvas memory leaks. Production-proven in mukoko-weather with 7 charts × 365 data points.",
"files": [
{
"path": "components/ui/canvas-chart.tsx",
"type": "registry:ui"
}
],
"name": "canvas-chart",
"registryDependencies": [
"https://mzizi.dev/api/v1/ui/nyuchi-tokens"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Overlay text editor for video captions and story text. Supports font selection (Noto Sans/Serif), text color from mineral palette, position dragging, and size adjustment. Used in Bytes and story creation.",
"files": [
{
"path": "components/ui/caption-editor.tsx",
"type": "registry:ui"
}
],
"name": "caption-editor",
"registryDependencies": [
"input",
"color-picker"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Displays a card with header, content, and footer.",
"files": [
{
"path": "components/ui/card.tsx",
"type": "registry:ui"
}
],
"name": "card",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [
"embla-carousel-react"
],
"description": "A carousel with motion and swipe built using Embla.",
"files": [
{
"path": "components/ui/carousel.tsx",
"type": "registry:ui"
}
],
"name": "carousel",
"registryDependencies": [
"button"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Shopping cart line item with quantity controls and remove action.",
"files": [
{
"path": "components/ui/cart-item.tsx",
"type": "registry:ui"
}
],
"name": "cart-item",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Grid of browsable categories with icons, counts, and mineral-colored accents.",
"files": [
{
"path": "components/ui/category-browser.tsx",
"type": "registry:ui"
}
],
"name": "category-browser",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Version update card with categorized changes.",
"files": [
{
"path": "components/ui/changelog-entry.tsx",
"type": "registry:ui"
}
],
"name": "changelog-entry",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Chaos testing utilities for injecting random errors and latency to test resilience.",
"files": [
{
"path": "lib/chaos.ts",
"type": "registry:lib"
}
],
"name": "chaos",
"registryDependencies": [
"observability"
],
"type": "registry:lib"
},
{
"dependencies": [],
"description": "Table of contents / chapter navigation for serialized works. Shows chapter titles, word counts, publish dates, and locked/unlocked status for subscription-gated content. Maps to novels.chapter table.",
"files": [
{
"path": "components/ui/chapter-list.tsx",
"type": "registry:ui"
}
],
"name": "chapter-list",
"registryDependencies": [
"accordion"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Optimized long-form reading view with page/scroll modes, bookmark, highlight, and note-in-margin functionality. Adjustable Noto Serif typography. The core reading experience for Novels, competing with Wattpad and Tapas reader quality.",
"files": [
{
"path": "components/ui/chapter-reader.tsx",
"type": "registry:ui"
}
],
"name": "chapter-reader",
"registryDependencies": [
"scroll-area"
],
"type": "registry:ui"
},
{
"dependencies": [
"recharts"
],
"description": "Beautiful charts built using Recharts. Copy and paste into your apps.",
"files": [
{
"path": "components/ui/chart.tsx",
"type": "registry:ui"
}
],
"name": "chart",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [
"recharts"
],
"description": "Area chart — axes variant.",
"files": [
{
"path": "components/blocks/charts/chart-area-axes.tsx",
"type": "registry:block"
}
],
"name": "chart-area-axes",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Area chart — default variant.",
"files": [
{
"path": "components/blocks/charts/chart-area-default.tsx",
"type": "registry:block"
}
],
"name": "chart-area-default",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Area chart — gradient variant.",
"files": [
{
"path": "components/blocks/charts/chart-area-gradient.tsx",
"type": "registry:block"
}
],
"name": "chart-area-gradient",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Area chart — icons variant.",
"files": [
{
"path": "components/blocks/charts/chart-area-icons.tsx",
"type": "registry:block"
}
],
"name": "chart-area-icons",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Area chart — interactive variant.",
"files": [
{
"path": "components/blocks/charts/chart-area-interactive.tsx",
"type": "registry:block"
}
],
"name": "chart-area-interactive",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Area chart — legend variant.",
"files": [
{
"path": "components/blocks/charts/chart-area-legend.tsx",
"type": "registry:block"
}
],
"name": "chart-area-legend",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Area chart — linear variant.",
"files": [
{
"path": "components/blocks/charts/chart-area-linear.tsx",
"type": "registry:block"
}
],
"name": "chart-area-linear",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Area chart — stacked variant.",
"files": [
{
"path": "components/blocks/charts/chart-area-stacked.tsx",
"type": "registry:block"
}
],
"name": "chart-area-stacked",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Area chart — stacked expand variant.",
"files": [
{
"path": "components/blocks/charts/chart-area-stacked-expand.tsx",
"type": "registry:block"
}
],
"name": "chart-area-stacked-expand",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Area chart — step variant.",
"files": [
{
"path": "components/blocks/charts/chart-area-step.tsx",
"type": "registry:block"
}
],
"name": "chart-area-step",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Bar chart — active variant.",
"files": [
{
"path": "components/blocks/charts/chart-bar-active.tsx",
"type": "registry:block"
}
],
"name": "chart-bar-active",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Bar chart — default variant.",
"files": [
{
"path": "components/blocks/charts/chart-bar-default.tsx",
"type": "registry:block"
}
],
"name": "chart-bar-default",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Bar chart — horizontal variant.",
"files": [
{
"path": "components/blocks/charts/chart-bar-horizontal.tsx",
"type": "registry:block"
}
],
"name": "chart-bar-horizontal",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Bar chart — interactive variant.",
"files": [
{
"path": "components/blocks/charts/chart-bar-interactive.tsx",
"type": "registry:block"
}
],
"name": "chart-bar-interactive",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Bar chart — label variant.",
"files": [
{
"path": "components/blocks/charts/chart-bar-label.tsx",
"type": "registry:block"
}
],
"name": "chart-bar-label",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Bar chart — label custom variant.",
"files": [
{
"path": "components/blocks/charts/chart-bar-label-custom.tsx",
"type": "registry:block"
}
],
"name": "chart-bar-label-custom",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Bar chart — mixed variant.",
"files": [
{
"path": "components/blocks/charts/chart-bar-mixed.tsx",
"type": "registry:block"
}
],
"name": "chart-bar-mixed",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Bar chart — multiple variant.",
"files": [
{
"path": "components/blocks/charts/chart-bar-multiple.tsx",
"type": "registry:block"
}
],
"name": "chart-bar-multiple",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Bar chart — negative variant.",
"files": [
{
"path": "components/blocks/charts/chart-bar-negative.tsx",
"type": "registry:block"
}
],
"name": "chart-bar-negative",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Bar chart — stacked variant.",
"files": [
{
"path": "components/blocks/charts/chart-bar-stacked.tsx",
"type": "registry:block"
}
],
"name": "chart-bar-stacked",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Line chart — default variant.",
"files": [
{
"path": "components/blocks/charts/chart-line-default.tsx",
"type": "registry:block"
}
],
"name": "chart-line-default",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Line chart — dots variant.",
"files": [
{
"path": "components/blocks/charts/chart-line-dots.tsx",
"type": "registry:block"
}
],
"name": "chart-line-dots",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Line chart — dots colors variant.",
"files": [
{
"path": "components/blocks/charts/chart-line-dots-colors.tsx",
"type": "registry:block"
}
],
"name": "chart-line-dots-colors",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Line chart — dots custom variant.",
"files": [
{
"path": "components/blocks/charts/chart-line-dots-custom.tsx",
"type": "registry:block"
}
],
"name": "chart-line-dots-custom",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Line chart — interactive variant.",
"files": [
{
"path": "components/blocks/charts/chart-line-interactive.tsx",
"type": "registry:block"
}
],
"name": "chart-line-interactive",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Line chart — label variant.",
"files": [
{
"path": "components/blocks/charts/chart-line-label.tsx",
"type": "registry:block"
}
],
"name": "chart-line-label",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Line chart — label custom variant.",
"files": [
{
"path": "components/blocks/charts/chart-line-label-custom.tsx",
"type": "registry:block"
}
],
"name": "chart-line-label-custom",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Line chart — linear variant.",
"files": [
{
"path": "components/blocks/charts/chart-line-linear.tsx",
"type": "registry:block"
}
],
"name": "chart-line-linear",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Line chart — multiple variant.",
"files": [
{
"path": "components/blocks/charts/chart-line-multiple.tsx",
"type": "registry:block"
}
],
"name": "chart-line-multiple",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Line chart — step variant.",
"files": [
{
"path": "components/blocks/charts/chart-line-step.tsx",
"type": "registry:block"
}
],
"name": "chart-line-step",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Pie chart — donut variant.",
"files": [
{
"path": "components/blocks/charts/chart-pie-donut.tsx",
"type": "registry:block"
}
],
"name": "chart-pie-donut",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Pie chart — donut active variant.",
"files": [
{
"path": "components/blocks/charts/chart-pie-donut-active.tsx",
"type": "registry:block"
}
],
"name": "chart-pie-donut-active",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Pie chart — donut text variant.",
"files": [
{
"path": "components/blocks/charts/chart-pie-donut-text.tsx",
"type": "registry:block"
}
],
"name": "chart-pie-donut-text",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Pie chart — interactive variant.",
"files": [
{
"path": "components/blocks/charts/chart-pie-interactive.tsx",
"type": "registry:block"
}
],
"name": "chart-pie-interactive",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Pie chart — label variant.",
"files": [
{
"path": "components/blocks/charts/chart-pie-label.tsx",
"type": "registry:block"
}
],
"name": "chart-pie-label",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Pie chart — label custom variant.",
"files": [
{
"path": "components/blocks/charts/chart-pie-label-custom.tsx",
"type": "registry:block"
}
],
"name": "chart-pie-label-custom",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Pie chart — label list variant.",
"files": [
{
"path": "components/blocks/charts/chart-pie-label-list.tsx",
"type": "registry:block"
}
],
"name": "chart-pie-label-list",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Pie chart — legend variant.",
"files": [
{
"path": "components/blocks/charts/chart-pie-legend.tsx",
"type": "registry:block"
}
],
"name": "chart-pie-legend",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Pie chart — separator none variant.",
"files": [
{
"path": "components/blocks/charts/chart-pie-separator-none.tsx",
"type": "registry:block"
}
],
"name": "chart-pie-separator-none",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Pie chart — simple variant.",
"files": [
{
"path": "components/blocks/charts/chart-pie-simple.tsx",
"type": "registry:block"
}
],
"name": "chart-pie-simple",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Pie chart — stacked variant.",
"files": [
{
"path": "components/blocks/charts/chart-pie-stacked.tsx",
"type": "registry:block"
}
],
"name": "chart-pie-stacked",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Radar chart — default variant.",
"files": [
{
"path": "components/blocks/charts/chart-radar-default.tsx",
"type": "registry:block"
}
],
"name": "chart-radar-default",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Radar chart — dots variant.",
"files": [
{
"path": "components/blocks/charts/chart-radar-dots.tsx",
"type": "registry:block"
}
],
"name": "chart-radar-dots",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Radar chart — grid circle variant.",
"files": [
{
"path": "components/blocks/charts/chart-radar-grid-circle.tsx",
"type": "registry:block"
}
],
"name": "chart-radar-grid-circle",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Radar chart — grid circle fill variant.",
"files": [
{
"path": "components/blocks/charts/chart-radar-grid-circle-fill.tsx",
"type": "registry:block"
}
],
"name": "chart-radar-grid-circle-fill",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Radar chart — grid circle no lines variant.",
"files": [
{
"path": "components/blocks/charts/chart-radar-grid-circle-no-lines.tsx",
"type": "registry:block"
}
],
"name": "chart-radar-grid-circle-no-lines",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Radar chart — grid custom variant.",
"files": [
{
"path": "components/blocks/charts/chart-radar-grid-custom.tsx",
"type": "registry:block"
}
],
"name": "chart-radar-grid-custom",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Radar chart — grid fill variant.",
"files": [
{
"path": "components/blocks/charts/chart-radar-grid-fill.tsx",
"type": "registry:block"
}
],
"name": "chart-radar-grid-fill",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Radar chart — grid none variant.",
"files": [
{
"path": "components/blocks/charts/chart-radar-grid-none.tsx",
"type": "registry:block"
}
],
"name": "chart-radar-grid-none",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Radar chart — icons variant.",
"files": [
{
"path": "components/blocks/charts/chart-radar-icons.tsx",
"type": "registry:block"
}
],
"name": "chart-radar-icons",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Radar chart — label custom variant.",
"files": [
{
"path": "components/blocks/charts/chart-radar-label-custom.tsx",
"type": "registry:block"
}
],
"name": "chart-radar-label-custom",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Radar chart — legend variant.",
"files": [
{
"path": "components/blocks/charts/chart-radar-legend.tsx",
"type": "registry:block"
}
],
"name": "chart-radar-legend",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Radar chart — lines only variant.",
"files": [
{
"path": "components/blocks/charts/chart-radar-lines-only.tsx",
"type": "registry:block"
}
],
"name": "chart-radar-lines-only",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Radar chart — multiple variant.",
"files": [
{
"path": "components/blocks/charts/chart-radar-multiple.tsx",
"type": "registry:block"
}
],
"name": "chart-radar-multiple",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Radar chart — radius variant.",
"files": [
{
"path": "components/blocks/charts/chart-radar-radius.tsx",
"type": "registry:block"
}
],
"name": "chart-radar-radius",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Radial chart — grid variant.",
"files": [
{
"path": "components/blocks/charts/chart-radial-grid.tsx",
"type": "registry:block"
}
],
"name": "chart-radial-grid",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Radial chart — label variant.",
"files": [
{
"path": "components/blocks/charts/chart-radial-label.tsx",
"type": "registry:block"
}
],
"name": "chart-radial-label",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Radial chart — shape variant.",
"files": [
{
"path": "components/blocks/charts/chart-radial-shape.tsx",
"type": "registry:block"
}
],
"name": "chart-radial-shape",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Radial chart — simple variant.",
"files": [
{
"path": "components/blocks/charts/chart-radial-simple.tsx",
"type": "registry:block"
}
],
"name": "chart-radial-simple",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Radial chart — stacked variant.",
"files": [
{
"path": "components/blocks/charts/chart-radial-stacked.tsx",
"type": "registry:block"
}
],
"name": "chart-radial-stacked",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Radial chart — text variant.",
"files": [
{
"path": "components/blocks/charts/chart-radial-text.tsx",
"type": "registry:block"
}
],
"name": "chart-radial-text",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Tooltip chart — advanced variant.",
"files": [
{
"path": "components/blocks/charts/chart-tooltip-advanced.tsx",
"type": "registry:block"
}
],
"name": "chart-tooltip-advanced",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Tooltip chart — default variant.",
"files": [
{
"path": "components/blocks/charts/chart-tooltip-default.tsx",
"type": "registry:block"
}
],
"name": "chart-tooltip-default",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Tooltip chart — formatter variant.",
"files": [
{
"path": "components/blocks/charts/chart-tooltip-formatter.tsx",
"type": "registry:block"
}
],
"name": "chart-tooltip-formatter",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Tooltip chart — icons variant.",
"files": [
{
"path": "components/blocks/charts/chart-tooltip-icons.tsx",
"type": "registry:block"
}
],
"name": "chart-tooltip-icons",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Tooltip chart — indicator line variant.",
"files": [
{
"path": "components/blocks/charts/chart-tooltip-indicator-line.tsx",
"type": "registry:block"
}
],
"name": "chart-tooltip-indicator-line",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Tooltip chart — indicator none variant.",
"files": [
{
"path": "components/blocks/charts/chart-tooltip-indicator-none.tsx",
"type": "registry:block"
}
],
"name": "chart-tooltip-indicator-none",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Tooltip chart — label custom variant.",
"files": [
{
"path": "components/blocks/charts/chart-tooltip-label-custom.tsx",
"type": "registry:block"
}
],
"name": "chart-tooltip-label-custom",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Tooltip chart — label formatter variant.",
"files": [
{
"path": "components/blocks/charts/chart-tooltip-label-formatter.tsx",
"type": "registry:block"
}
],
"name": "chart-tooltip-label-formatter",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [
"recharts"
],
"description": "Tooltip chart — label none variant.",
"files": [
{
"path": "components/blocks/charts/chart-tooltip-label-none.tsx",
"type": "registry:block"
}
],
"name": "chart-tooltip-label-none",
"registryDependencies": [
"chart"
],
"type": "registry:block"
},
{
"dependencies": [],
"description": "Single message display with sent/received variants, avatar, timestamp, and status.",
"files": [
{
"path": "components/ui/chat-bubble.tsx",
"type": "registry:ui"
}
],
"name": "chat-bubble",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Message composer with auto-growing textarea, send button, and keyboard shortcuts.",
"files": [
{
"path": "components/ui/chat-input.tsx",
"type": "registry:ui"
}
],
"name": "chat-input",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Full chat page layout with sidebar conversations and main chat area.",
"files": [
{
"path": "components/ui/chat-layout.tsx",
"type": "registry:ui"
}
],
"name": "chat-layout",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Scrollable conversation list with unread counts and active highlight.",
"files": [
{
"path": "components/ui/chat-list.tsx",
"type": "registry:ui"
}
],
"name": "chat-list",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Chat/messaging page composition. Conversation list or active chat with message input, media attachments, read receipts. Competitors: WhatsApp, Telegram, WeChat.",
"files": [
{
"path": "components/ui/chat-page.tsx",
"type": "registry:ui"
}
],
"name": "chat-page",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [
"radix-ui"
],
"description": "A control that allows the user to toggle between checked and not checked.",
"files": [
{
"path": "components/ui/checkbox.tsx",
"type": "registry:ui"
}
],
"name": "checkbox",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Interactive checklist with add, reorder, and completion tracking.",
"files": [
{
"path": "components/ui/checklist.tsx",
"type": "registry:ui"
}
],
"name": "checklist",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Checkout/order page. Cart summary, shipping, payment method selection, order confirmation. Multi-step with progress indicator.",
"files": [
{
"path": "components/ui/checkout-page.tsx",
"type": "registry:ui"
}
],
"name": "checkout-page",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Netflix Hystrix-inspired circuit breaker with CLOSED/OPEN/HALF_OPEN state machine.",
"files": [
{
"path": "lib/circuit-breaker.ts",
"type": "registry:lib"
}
],
"name": "circuit-breaker",
"registryDependencies": [
"timeout",
"observability"
],
"type": "registry:lib"
},
{
"dependencies": [],
"description": "Multi-author display showing all co-authors with their revenue split percentages. Compact inline strip for novel headers and detail pages. Maps to novels.work_contributor with revenue_share_pct.",
"files": [
{
"path": "components/ui/co-author-strip.tsx",
"type": "registry:ui"
}
],
"name": "co-author-strip",
"registryDependencies": [
"avatar-group",
"tooltip"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Enhanced code display with language badge, line numbers, copy button, and filename.",
"files": [
{
"path": "components/ui/code-block.tsx",
"type": "registry:ui"
}
],
"name": "code-block",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Code input with line numbers, monospace font, and tab key support.",
"files": [
{
"path": "components/ui/code-editor.tsx",
"type": "registry:ui"
}
],
"name": "code-editor",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Tabbed code display for multiple languages/frameworks.",
"files": [
{
"path": "components/ui/code-tabs.tsx",
"type": "registry:ui"
}
],
"name": "code-tabs",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [
"radix-ui"
],
"description": "An interactive component which expands and collapses a panel.",
"files": [
{
"path": "components/ui/collapsible.tsx",
"type": "registry:ui"
}
],
"name": "collapsible",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Color selector with hex input and preset swatches including Five African Minerals.",
"files": [
{
"path": "components/ui/color-picker.tsx",
"type": "registry:ui"
}
],
"name": "color-picker",
"registryDependencies": [
"input"
],
"type": "registry:ui"
},
{
"dependencies": [
"@base-ui/react"
],
"description": "Autocomplete input and command palette with a list of suggestions.",
"files": [
{
"path": "components/ui/combobox.tsx",
"type": "registry:ui"
}
],
"name": "combobox",
"registryDependencies": [
"button",
"input-group"
],
"type": "registry:ui"
},
{
"dependencies": [
"cmdk"
],
"description": "Fast, composable, unstyled command menu for React.",
"files": [
{
"path": "components/ui/command.tsx",
"type": "registry:ui"
}
],
"name": "command",
"registryDependencies": [
"dialog",
"input-group"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Spotlight-style command palette with search, grouped results, and keyboard hints.",
"files": [
{
"path": "components/blocks/command-center.tsx",
"type": "registry:block"
}
],
"name": "command-center",
"registryDependencies": [
"command"
],
"type": "registry:block"
},
{
"dependencies": [],
"description": "Inline paragraph-level commenting — the Medium-style annotation pattern. Users highlight text in a chapter and leave comments anchored to that specific passage. Maps to a future comments schema on novels.chapter.",
"files": [
{
"path": "components/ui/comment-on-paragraph.tsx",
"type": "registry:ui"
}
],
"name": "comment-on-paragraph",
"registryDependencies": [
"popover",
"textarea",
"avatar"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Threaded comments with nested replies and actions.",
"files": [
{
"path": "components/ui/comment-thread.tsx",
"type": "registry:ui"
}
],
"name": "comment-thread",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Nyuchi Console main dashboard. Project overview, resource usage, API traffic, deploy status, quick actions. The control center for Nyuchi Web Services. Competitors: Vercel Dashboard, AWS Console, Cloudflare Dashboard.",
"files": [
{
"path": "components/ui/console-dashboard-page.tsx",
"type": "registry:ui"
}
],
"name": "console-dashboard-page",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Contact information card with avatar, details, and action links for call and email.",
"files": [
{
"path": "components/ui/contact-card.tsx",
"type": "registry:ui"
}
],
"name": "contact-card",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Editorial calendar showing scheduled content across a week or month view. Drag-and-drop scheduling, content type color coding, and publish status indicators. Used in Mukoko News editorial management and Bytes creator scheduling.",
"files": [
{
"path": "components/ui/content-calendar.tsx",
"type": "registry:ui"
}
],
"name": "content-calendar",
"registryDependencies": [
"calendar-week-view",
"card",
"badge"
],
"type": "registry:ui"
},
{
"dependencies": [
"radix-ui"
],
"description": "Displays a menu to the user triggered by a right click.",
"files": [
{
"path": "components/ui/context-menu.tsx",
"type": "registry:ui"
}
],
"name": "context-menu",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Accessibility mode switcher supporting light, dark, high-contrast, and system-preference modes. Goes beyond simple dark mode to include APCA 3.0 AAA high-contrast for users with visual impairments.",
"files": [
{
"path": "components/ui/contrast-mode-toggle.tsx",
"type": "registry:ui"
}
],
"name": "contrast-mode-toggle",
"registryDependencies": [
"toggle-group",
"button"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "GDPR/POPIA-compliant consent banner with accept, decline, and manage options.",
"files": [
{
"path": "components/ui/cookie-consent.tsx",
"type": "registry:ui"
}
],
"name": "cookie-consent",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "A button that copies text to the clipboard with visual feedback on success.",
"files": [
{
"path": "components/ui/copy-button.tsx",
"type": "registry:ui"
}
],
"name": "copy-button",
"registryDependencies": [
"button"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Multi-currency numeric input with currency switcher supporting MXT, ZWL, USD, ZAR, KES, and mobile money codes. Formats values per locale with proper decimal handling. The standard financial input for all payment flows across the ecosystem.",
"files": [
{
"path": "components/ui/currency-input.tsx",
"type": "registry:ui"
}
],
"name": "currency-input",
"registryDependencies": [
"input",
"select"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Governance proposal card with title, description, proposer, voting progress bar (for/against/abstain), deadline countdown, quorum status, and vote action. Maps to ubuntu.dao_proposals table. Used in the governance section of the Mukoko Foundation interface.",
"files": [
{
"path": "components/ui/dao-proposal-card.tsx",
"type": "registry:ui"
}
],
"name": "dao-proposal-card",
"registryDependencies": [
"card",
"progress",
"badge",
"button",
"avatar"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Full dashboard layout with stats, chart section, and activity feed.",
"files": [
{
"path": "components/blocks/dashboard-01.tsx",
"type": "registry:block"
}
],
"name": "dashboard-01",
"registryDependencies": [
"button",
"card",
"input",
"label"
],
"type": "registry:block"
},
{
"dependencies": [],
"description": "Data explorer page for open data. Table browser, SQL/filter builder, column selection, pagination, CSV/JSON export. Used by Nyuchi Open Data platform and B2B partners. Competitors: Metabase, data.gov, Socrata.",
"files": [
{
"path": "components/ui/data-explorer-page.tsx",
"type": "registry:ui"
}
],
"name": "data-explorer-page",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [
"@tanstack/react-table"
],
"description": "A powerful table with sorting, filtering, pagination, and column visibility powered by TanStack Table.",
"files": [
{
"path": "components/ui/data-table.tsx",
"type": "registry:ui"
}
],
"name": "data-table",
"registryDependencies": [
"button",
"dropdown-menu",
"input",
"table"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Smart date display that shows relative time for recent dates (\"2 hours ago\", \"yesterday\") and absolute dates for older ones (\"15 May 2026\"). Respects locale from nyuchi-locale. A micro-primitive used everywhere — message timestamps, card metadata, activity feeds, task due dates.",
"files": [
{
"path": "components/ui/date-label.tsx",
"type": "registry:ui"
}
],
"name": "date-label",
"registryDependencies": [
"tooltip"
],
"type": "registry:ui"
},
{
"dependencies": [
"date-fns"
],
"description": "A date picker component with calendar popover, supporting single date and date range selection.",
"files": [
{
"path": "components/ui/date-picker.tsx",
"type": "registry:ui"
}
],
"name": "date-picker",
"registryDependencies": [
"button",
"calendar",
"popover"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Dual-calendar popover for selecting date ranges with preset quick-selects.",
"files": [
{
"path": "components/ui/date-range-picker.tsx",
"type": "registry:ui"
}
],
"name": "date-range-picker",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Visual dependency/relationship display between items — task depends on task, event requires event, etc. Shows directed edges between nodes. Used in project planning (Planner), workflow visualization (Console), and content relationship mapping.",
"files": [
{
"path": "components/ui/dependency-graph.tsx",
"type": "registry:ui"
}
],
"name": "dependency-graph",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Service health card showing uptime percentage, error rate, response time (p50/p95/p99), and last deploy timestamp. Mineral color coding: malachite=healthy, gold=degraded, terracotta=down. Used in the Nyuchi Console infrastructure dashboard.",
"files": [
{
"path": "components/ui/deployment-status-card.tsx",
"type": "registry:ui"
}
],
"name": "deployment-status-card",
"registryDependencies": [
"card",
"badge",
"status-indicator"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Semantic key-value display using dl/dt/dd elements.",
"files": [
{
"path": "components/ui/description-list.tsx",
"type": "registry:ui"
}
],
"name": "description-list",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [
"radix-ui"
],
"description": "A window overlaid on the primary window, rendering content underneath inert.",
"files": [
{
"path": "components/ui/dialog.tsx",
"type": "registry:ui"
}
],
"name": "dialog",
"registryDependencies": [
"button"
],
"type": "registry:ui"
},
{
"dependencies": [
"radix-ui"
],
"description": "A provider to set the text direction for the application.",
"files": [
{
"path": "components/ui/direction.tsx",
"type": "registry:ui"
}
],
"name": "direction",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Grip indicator for drag-and-drop reordering.",
"files": [
{
"path": "components/ui/drag-handle.tsx",
"type": "registry:ui"
}
],
"name": "drag-handle",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [
"vaul"
],
"description": "A drawer component for React built on top of Vaul.",
"files": [
{
"path": "components/ui/drawer.tsx",
"type": "registry:ui"
}
],
"name": "drawer",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Driver/operator card with photo, rating, vehicle info, verification badge, and trip count. Maps to identity.person + transport tables via Nyuchi Logistics. Used in Transport booking confirmation and ride-matching.",
"files": [
{
"path": "components/ui/driver-profile-card.tsx",
"type": "registry:ui"
}
],
"name": "driver-profile-card",
"registryDependencies": [
"card",
"avatar",
"rating",
"https://mzizi.dev/api/v1/ui/nyuchi-verified-badge"
],
"type": "registry:ui"
},
{
"dependencies": [
"radix-ui"
],
"description": "Displays a menu to the user triggered by a button.",
"files": [
{
"path": "components/ui/dropdown-menu.tsx",
"type": "registry:ui"
}
],
"name": "dropdown-menu",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [
"class-variance-authority"
],
"description": "Displays an empty state with an icon, title, and description.",
"files": [
{
"path": "components/ui/empty.tsx",
"type": "registry:ui"
}
],
"name": "empty",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Raw empty state primitive with icon, title, description, and call-to-action slots. No brand opinion. Use nyuchi-empty-state (Layer 3) for the branded ecosystem version with mineral accents.",
"files": [
{
"path": "components/blocks/empty-state.tsx",
"type": "registry:block"
}
],
"name": "empty-state",
"registryDependencies": [
"button"
],
"type": "registry:block"
},
{
"dependencies": [],
"description": "API endpoint display with method badge, path, and description.",
"files": [
{
"path": "components/ui/endpoint-card.tsx",
"type": "registry:ui"
}
],
"name": "endpoint-card",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Key-value environment variable editor with secret masking.",
"files": [
{
"path": "components/ui/env-editor.tsx",
"type": "registry:ui"
}
],
"name": "env-editor",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "A React error boundary component that catches render errors and displays a fallback.",
"files": [
{
"path": "components/error-boundary.tsx",
"type": "registry:ui"
}
],
"name": "error-boundary",
"registryDependencies": [
"observability"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Standard error page for 404, 500, and 503 states with mineral accent.",
"files": [
{
"path": "components/blocks/error-page.tsx",
"type": "registry:block"
}
],
"name": "error-page",
"registryDependencies": [
"button"
],
"type": "registry:block"
},
{
"dependencies": [],
"description": "BushTrade escrow payment status tracker. Shows payment lifecycle stages: initiated → held → released/disputed. Maps to wallet.payment_intents with escrow state. Used in BushTrade transaction views and seller dashboards.",
"files": [
{
"path": "components/ui/escrow-status.tsx",
"type": "registry:ui"
}
],
"name": "escrow-status",
"registryDependencies": [
"stepper",
"card",
"badge"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Time-ranged event block for rendering inside calendar day/week grids. Shows title, time span, and color category. Supports overlapping events with column stacking. The visual unit that populates calendar-day-view and calendar-week-view slots.",
"files": [
{
"path": "components/ui/event-block.tsx",
"type": "registry:ui"
}
],
"name": "event-block",
"registryDependencies": [
"badge"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "In-chat event RSVP card shared in Campfire conversations. Compact event preview with date, venue, and quick RSVP buttons (Going/Maybe/Decline). Maps to events.rsvp_action. Bridges Nhimbe events into the Campfire messaging flow.",
"files": [
{
"path": "components/ui/event-rsvp-inline.tsx",
"type": "registry:ui"
}
],
"name": "event-rsvp-inline",
"registryDependencies": [
"card",
"button-group",
"badge"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Currency pair display with live rate, conversion calculator, and trend indicator. Supports MXT ↔ fiat pairs across 42 African currencies. Used in Wallet swap interface and BushTrade cross-border commerce.",
"files": [
{
"path": "components/ui/exchange-rate.tsx",
"type": "registry:ui"
}
],
"name": "exchange-rate",
"registryDependencies": [
"card",
"currency-input"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Sequential fallback strategy — try stages in order, return first success.",
"files": [
{
"path": "lib/fallback-chain.ts",
"type": "registry:lib"
}
],
"name": "fallback-chain",
"registryDependencies": [
"timeout",
"observability"
],
"type": "registry:lib"
},
{
"dependencies": [],
"description": "Route fare display with breakdown by segment, applicable discounts, and total. Supports multi-currency display. Used in Transport for route cost estimation before booking.",
"files": [
{
"path": "components/ui/fare-calculator.tsx",
"type": "registry:ui"
}
],
"name": "fare-calculator",
"registryDependencies": [
"card",
"separator",
"currency-input"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Feature flag row with name, description, environment toggles (dev/staging/production), and rollout percentage slider. Used in the Nyuchi Console feature management dashboard.",
"files": [
{
"path": "components/ui/feature-flag-toggle.tsx",
"type": "registry:ui"
}
],
"name": "feature-flag-toggle",
"registryDependencies": [
"switch",
"slider",
"badge"
],
"type": "registry:ui"
},
{
"dependencies": [
"class-variance-authority"
],
"description": "A form field component with label, description, and message.",
"files": [
{
"path": "components/ui/field.tsx",
"type": "registry:ui"
}
],
"name": "field",
"registryDependencies": [
"label",
"separator"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "File preview card with icon, name, and size display.",
"files": [
{
"path": "components/ui/file-preview.tsx",
"type": "registry:ui"
}
],
"name": "file-preview",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "A drag-and-drop file upload zone with file list, size validation, and remove actions.",
"files": [
{
"path": "components/ui/file-upload.tsx",
"type": "registry:ui"
}
],
"name": "file-upload",
"registryDependencies": [
"button"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "A horizontal bar of toggleable filter chips with optional counts and a clear button.",
"files": [
{
"path": "components/ui/filter-bar.tsx",
"type": "registry:ui"
}
],
"name": "filter-bar",
"registryDependencies": [
"badge",
"button"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Reader customization panel for font size, line height, theme (light/dark/sepia), font family (Noto Sans/Serif/system), and text alignment. Persisted per-user in the Digital Twin preferences. Used in Novels reader and News article reader mode.",
"files": [
{
"path": "components/ui/font-settings-panel.tsx",
"type": "registry:ui"
}
],
"name": "font-settings-panel",
"registryDependencies": [
"slider",
"radio-group",
"card"
],
"type": "registry:ui"
},
{
"dependencies": [
"@radix-ui/react-label",
"@radix-ui/react-slot",
"react-hook-form"
],
"description": "Building forms with React Hook Form and Zod.",
"files": [
{
"path": "components/ui/form.tsx",
"type": "registry:ui"
}
],
"name": "form",
"registryDependencies": [
"label"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Transaction cost preview showing estimated gas fee in NHC with fiat equivalent. Highlights that MIT holders have static gas prices per Honeycomb protocol. Used before any on-chain transaction in Wallet.",
"files": [
{
"path": "components/ui/gas-estimator.tsx",
"type": "registry:ui"
}
],
"name": "gas-estimator",
"registryDependencies": [
"card"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Circle/group info header with cover image, name, description, member count, privacy status, rules summary, and admin list. Used at the top of Circle detail pages and group settings. Maps to circles.circle table.",
"files": [
{
"path": "components/ui/group-info-card.tsx",
"type": "registry:ui"
}
],
"name": "group-info-card",
"registryDependencies": [
"card",
"avatar-group",
"badge"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Health dashboard page. Vitals overview, activity rings, medication reminders, upcoming appointments, health score. Competitors: Apple Health, MyFitnessPal, Babylon.",
"files": [
{
"path": "components/ui/health-dashboard-page.tsx",
"type": "registry:ui"
}
],
"name": "health-dashboard-page",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Encrypted health record summary card showing recent visits, active prescriptions, allergies, and conditions. Data sourced from the sovereign Digital Twin pod — NEVER from Supabase. Respects Covenant One.",
"files": [
{
"path": "components/ui/health-record-summary.tsx",
"type": "registry:ui"
}
],
"name": "health-record-summary",
"registryDependencies": [
"card",
"accordion",
"badge"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Horizontal scroll container with CSS scroll-snap for mobile-friendly card browsing. Hides scrollbar, supports snap-to-item alignment. Used for hourly forecast cards, category browsers, story rings, product carousels, and any horizontal list that should swipe naturally on mobile. Proper role=\"list\" with keyboard navigation.",
"files": [
{
"path": "components/ui/horizontal-scroll.tsx",
"type": "registry:ui"
}
],
"name": "horizontal-scroll",
"registryDependencies": [
"utils"
],
"type": "registry:ui"
},
{
"dependencies": [
"radix-ui"
],
"description": "For sighted users to preview content available behind a link.",
"files": [
{
"path": "components/ui/hover-card.tsx",
"type": "registry:ui"
}
],
"name": "hover-card",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Individual user profile page. Avatar, bio, verification tier, trust score, activity stats, content tabs (posts, media, listings, reviews). Competitors: LinkedIn, Instagram, WeChat.",
"files": [
{
"path": "components/ui/individual-profile-page.tsx",
"type": "registry:ui"
}
],
"name": "individual-profile-page",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "IntersectionObserver-based scroll sentinel for loading more content.",
"files": [
{
"path": "components/ui/infinite-scroll.tsx",
"type": "registry:ui"
}
],
"name": "infinite-scroll",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Simple label + value display row with optional icon. Used on detail pages for key-value information: \"Temperature: 28°C\", \"Location: Harare\", \"Status: Active\". Compact single-line layout with icon left, label middle, value right-aligned. Production-proven in mukoko-weather for atmospheric details.",
"files": [
{
"path": "components/ui/info-row.tsx",
"type": "registry:ui"
}
],
"name": "info-row",
"registryDependencies": [
"utils"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Infrastructure monitoring page. Service health grid, deployment history, resource utilization gauges, incident timeline. For Nyuchi Web Services ops. Competitors: Datadog, New Relic.",
"files": [
{
"path": "components/ui/infrastructure-page.tsx",
"type": "registry:ui"
}
],
"name": "infrastructure-page",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Click-to-edit text field that transforms from display mode to input mode on interaction. Pattern for low-friction editing in admin tables, settings pages, and profile fields. Supports validation, optimistic save, and revert on escape. Audit flagged as missing UX pattern. ALPHA — awaiting frontend implementation.",
"files": [
{
"path": "components/ui/inline-edit.tsx",
"type": "registry:ui"
}
],
"name": "inline-edit",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Displays a form input field.",
"files": [
{
"path": "components/ui/input.tsx",
"type": "registry:ui"
}
],
"name": "input",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [
"class-variance-authority"
],
"description": "Groups input, button, and addon elements together.",
"files": [
{
"path": "components/ui/input-group.tsx",
"type": "registry:ui"
}
],
"name": "input-group",
"registryDependencies": [
"button",
"input",
"textarea"
],
"type": "registry:ui"
},
{
"dependencies": [
"input-otp"
],
"description": "Accessible one-time password component with copy paste functionality.",
"files": [
{
"path": "components/ui/input-otp.tsx",
"type": "registry:ui"
}
],
"name": "input-otp",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Shareable invite card with QR code, copyable link, expiry countdown, and usage count. Used for Circle invitations, event invites (Nhimbe), and referral links. Mineral-colored QR code.",
"files": [
{
"path": "components/ui/invite-link.tsx",
"type": "registry:ui"
}
],
"name": "invite-link",
"registryDependencies": [
"card",
"copy-button"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Invoice line item with date, amount, status badge, and download.",
"files": [
{
"path": "components/ui/invoice-row.tsx",
"type": "registry:ui"
}
],
"name": "invoice-row",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [
"class-variance-authority",
"radix-ui"
],
"description": "A flexible item component for lists, menus, and settings.",
"files": [
{
"path": "components/ui/item.tsx",
"type": "registry:ui"
}
],
"name": "item",
"registryDependencies": [
"separator"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Multi-leg journey planner view showing sequential stops with transport modes, transfer points, and timing. Used in Transport for commute planning and in Planner for multi-event day views.",
"files": [
{
"path": "components/ui/itinerary-timeline.tsx",
"type": "registry:ui"
}
],
"name": "itinerary-timeline",
"registryDependencies": [
"timeline",
"badge",
"separator"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Job board/listings page. Search, filters (location, type, salary, industry), list of job cards. Competitors: LinkedIn, Indeed, Glassdoor.",
"files": [
{
"path": "components/ui/job-board-page.tsx",
"type": "registry:ui"
}
],
"name": "job-board-page",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Collapsible JSON tree view with syntax coloring and type indicators.",
"files": [
{
"path": "components/ui/json-viewer.tsx",
"type": "registry:ui"
}
],
"name": "json-viewer",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Column-based board for organizing items by status with drag indicators.",
"files": [
{
"path": "components/ui/kanban-board.tsx",
"type": "registry:ui"
}
],
"name": "kanban-board",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Displays a keyboard shortcut or key combination.",
"files": [
{
"path": "components/ui/kbd.tsx",
"type": "registry:ui"
}
],
"name": "kbd",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Key Performance Indicator card. Displays a metric label, large value, optional change percentage with trend direction. Extracted from analytics-dashboard-page, console-dashboard-page, and wallet-page where the same pattern was repeated inline. Brand-agnostic — uses semantic CSS vars only.",
"files": [
{
"path": "components/ui/kpi-card.tsx",
"type": "registry:ui"
}
],
"name": "kpi-card",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [
"radix-ui"
],
"description": "Renders an accessible label associated with controls.",
"files": [
{
"path": "components/ui/label.tsx",
"type": "registry:ui"
}
],
"name": "label",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "In-app language selector with locale display. Prioritizes the 16 Zimbabwean official languages (Shona, Ndebele first), then African languages, then global. Shows current language with flag/code indicator. Critical for a platform serving 54 countries and 2000+ languages.",
"files": [
{
"path": "components/ui/language-switcher.tsx",
"type": "registry:ui"
}
],
"name": "language-switcher",
"registryDependencies": [
"select",
"button"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "TikTok-style progressive lazy section with sequential mount queue and bidirectional visibility. Only ONE section mounts at a time via a global FIFO queue, preventing DOM/Canvas surges that OOM mobile browsers. Sections unmount when scrolled far off-screen (1500px margin) to cap peak memory. Adaptive timing: 150ms settle on mobile, 50ms on desktop. Production-proven in mukoko-weather with 7 Chart.js sections. The design portal's most critical performance primitive.",
"files": [
{
"path": "components/lazy-section.tsx",
"type": "registry:ui"
}
],
"name": "lazy-section",
"registryDependencies": [
"use-mobile",
"observability"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Learning/education page. Course content, lesson progress, quiz area, notes. Competitors: Duolingo, Coursera, Khan Academy.",
"files": [
{
"path": "components/ui/learning-page.tsx",
"type": "registry:ui"
}
],
"name": "learning-page",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Full-screen image viewer with gallery navigation.",
"files": [
{
"path": "components/ui/lightbox.tsx",
"type": "registry:ui"
}
],
"name": "lightbox",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Interactive map-based location selection form control. User taps/clicks map to set coordinates, with search input for address lookup. Returns lat/lng and formatted address. Used in event creation (Nhimbe), business listing (BushTrade/Places), and any form that needs a geographic input.",
"files": [
{
"path": "components/ui/location-picker.tsx",
"type": "registry:ui"
}
],
"name": "location-picker",
"registryDependencies": [
"map-view",
"input"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Live/static location sharing card in chat. Shows a mini map preview with pin, address, and share duration (for live). Used in Campfire for meeting coordination, Transport for pickup points, and Places for recommendations.",
"files": [
{
"path": "components/ui/location-share.tsx",
"type": "registry:ui"
}
],
"name": "location-share",
"registryDependencies": [
"map-view",
"card"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Scrollable filterable log output with severity coloring and auto-scroll.",
"files": [
{
"path": "components/ui/log-viewer.tsx",
"type": "registry:ui"
}
],
"name": "log-viewer",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Centered card login with email/password and mineral accent stripe.",
"files": [
{
"path": "components/blocks/login-01.tsx",
"type": "registry:block"
}
],
"name": "login-01",
"registryDependencies": [
"button",
"card",
"input",
"label",
"https://mzizi.dev/api/v1/ui/nyuchi-harness"
],
"type": "registry:block"
},
{
"dependencies": [],
"description": "Split layout login with brand image left, form right.",
"files": [
{
"path": "components/blocks/login-02.tsx",
"type": "registry:block"
}
],
"name": "login-02",
"registryDependencies": [
"button",
"card",
"input",
"label",
"https://mzizi.dev/api/v1/ui/nyuchi-harness"
],
"type": "registry:block"
},
{
"dependencies": [],
"description": "Social login buttons (Google, GitHub) plus email/password form.",
"files": [
{
"path": "components/blocks/login-03.tsx",
"type": "registry:block"
}
],
"name": "login-03",
"registryDependencies": [
"button",
"card",
"input",
"label",
"https://mzizi.dev/api/v1/ui/nyuchi-harness"
],
"type": "registry:block"
},
{
"dependencies": [],
"description": "OTP/magic link style login with code input.",
"files": [
{
"path": "components/blocks/login-04.tsx",
"type": "registry:block"
}
],
"name": "login-04",
"registryDependencies": [
"button",
"card",
"input",
"label",
"https://mzizi.dev/api/v1/ui/nyuchi-harness"
],
"type": "registry:block"
},
{
"dependencies": [],
"description": "Two-column login with brand showcase and mineral colors.",
"files": [
{
"path": "components/blocks/login-05.tsx",
"type": "registry:block"
}
],
"name": "login-05",
"registryDependencies": [
"button",
"card",
"input",
"label",
"https://mzizi.dev/api/v1/ui/nyuchi-harness"
],
"type": "registry:block"
},
{
"dependencies": [],
"description": "Logs viewer page. Real-time log stream, severity filters, search, time range, structured log expansion. For Nyuchi Web Services debugging and compliance audit trails.",
"files": [
{
"path": "components/ui/logs-page.tsx",
"type": "registry:ui"
}
],
"name": "logs-page",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Full-page maintenance mode display with estimated return time.",
"files": [
{
"path": "components/ui/maintenance-page.tsx",
"type": "registry:ui"
}
],
"name": "maintenance-page",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Floating preview card that appears on map marker interaction. Shows a compact listing-card inside the map context with image, title, category, and action. Bridges the map view to the listing detail flow.",
"files": [
{
"path": "components/ui/map-card.tsx",
"type": "registry:ui"
}
],
"name": "map-card",
"registryDependencies": [
"map-view",
"card"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Grouped marker display for high-density map areas. Shows count badge with mineral accent and expands on interaction. Used when multiple listings/places overlap at the current zoom level.",
"files": [
{
"path": "components/ui/map-cluster.tsx",
"type": "registry:ui"
}
],
"name": "map-cluster",
"registryDependencies": [
"map-view",
"map-marker"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Custom branded map pin with mineral-colored variants and verification tier indicators. Supports default, verified, featured, and cluster states. The pin shape uses the Nyuchi pill radius for consistency. Maps to places.places and events.event tables.",
"files": [
{
"path": "components/ui/map-marker.tsx",
"type": "registry:ui"
}
],
"name": "map-marker",
"registryDependencies": [
"map-view"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Map/navigation page. Full-screen map with search, pin details, route overlay, bottom sheet for location info. Competitors: Google Maps, Uber, Bolt.",
"files": [
{
"path": "components/ui/map-page.tsx",
"type": "registry:ui"
}
],
"name": "map-page",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Route visualization overlay for map with waypoints, distance, and estimated time. Supports driving, walking, transit, and cycling modes. Used by Transport mini-app for commute planning and route display.",
"files": [
{
"path": "components/ui/map-route.tsx",
"type": "registry:ui"
}
],
"name": "map-route",
"registryDependencies": [
"map-view"
],
"type": "registry:ui"
},
{
"dependencies": [
"mapbox-gl"
],
"description": "Embeddable map container with design system tokens, mineral-colored controls, and branded attribution. Wraps Mapbox GL JS with Nyuchi theme integration. Supports tile layers, zoom controls, geolocation, and fullscreen toggle. The foundational map primitive for Places, Transport, BushTrade, Nhimbe, and any app that shows a geographic context.",
"files": [
{
"path": "components/ui/map-view.tsx",
"type": "registry:ui"
}
],
"name": "map-view",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Themed markdown-to-HTML renderer with design system typography and colors.",
"files": [
{
"path": "components/ui/markdown-renderer.tsx",
"type": "registry:ui"
}
],
"name": "markdown-renderer",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Marketplace/storefront browsing page. Search, category filters, grid/list toggle, product cards. Competitors: Jumia, Amazon, Alibaba, Facebook Marketplace.",
"files": [
{
"path": "components/ui/marketplace-page.tsx",
"type": "registry:ui"
}
],
"name": "marketplace-page",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "CSS columns-based variable-height grid layout.",
"files": [
{
"path": "components/ui/masonry-grid.tsx",
"type": "registry:ui"
}
],
"name": "masonry-grid",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Horizontal scrollable filter/effect picker — the TikTok/Instagram paradigm. Shows filter previews as circular thumbnails with names. Applies visual effects to camera preview or captured media. Used in Bytes creation flow.",
"files": [
{
"path": "components/ui/media-filter-strip.tsx",
"type": "registry:ui"
}
],
"name": "media-filter-strip",
"registryDependencies": [
"scroll-area"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Full-screen media player page. Video/audio player with controls, comments, related content. Competitors: YouTube, TikTok, Netflix, Spotify.",
"files": [
{
"path": "components/ui/media-player-page.tsx",
"type": "registry:ui"
}
],
"name": "media-player-page",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Medication schedule card with drug name, dosage, timing intervals, adherence tracking, and snooze/take actions. Maps to health.medication_reminder table. Stores reminders in the sovereign Digital Twin pod.",
"files": [
{
"path": "components/ui/medication-reminder.tsx",
"type": "registry:ui"
}
],
"name": "medication-reminder",
"registryDependencies": [
"card",
"badge",
"button",
"progress"
],
"type": "registry:ui"
},
{
"dependencies": [
"radix-ui"
],
"description": "Full-width flyout navigation with columns of links grouped by section.",
"files": [
{
"path": "components/ui/mega-menu.tsx",
"type": "registry:ui"
}
],
"name": "mega-menu",
"registryDependencies": [
"popover",
"button"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Scrollable member directory with role badges (admin/moderator/member), online status dots, join date, and search filtering. Used in Circle member management and event attendee lists. Maps to circles.circle_membership table.",
"files": [
{
"path": "components/ui/member-list.tsx",
"type": "registry:ui"
}
],
"name": "member-list",
"registryDependencies": [
"avatar",
"badge",
"search-bar",
"virtual-list"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "User/member display row with avatar, name, email/subtitle, role badge, and status indicator. Extracted from team-management-page and chat-page. Brand-agnostic primitive.",
"files": [
{
"path": "components/ui/member-row.tsx",
"type": "registry:ui"
}
],
"name": "member-row",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Text input with @mention autocomplete for users.",
"files": [
{
"path": "components/ui/mention-input.tsx",
"type": "registry:ui"
}
],
"name": "mention-input",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [
"radix-ui"
],
"description": "A visually persistent menu common in desktop applications.",
"files": [
{
"path": "components/ui/menubar.tsx",
"type": "registry:ui"
}
],
"name": "menubar",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Nested reply thread with indentation and collapse/expand.",
"files": [
{
"path": "components/ui/message-thread.tsx",
"type": "registry:ui"
}
],
"name": "message-thread",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "MFA enrollment card with QR code and verification step.",
"files": [
{
"path": "components/ui/mfa-setup.tsx",
"type": "registry:ui"
}
],
"name": "mfa-setup",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Payment method picker for African mobile money services — EcoCash, MTN MoMo, Airtel Money, M-Pesa, and Innbucks. Shows provider logo, phone number input, and USSD code reference. This is HOW Africa pays — the primary payment primitive for the continent.",
"files": [
{
"path": "components/ui/mobile-money-selector.tsx",
"type": "registry:ui"
}
],
"name": "mobile-money-selector",
"registryDependencies": [
"card",
"radio-group"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Content review item showing flagged content preview, report reason, reporter info, and approve/reject/escalate action buttons. Maps to system.content_moderation. Used in the Nyuchi Console moderation dashboard.",
"files": [
{
"path": "components/ui/moderation-queue-item.tsx",
"type": "registry:ui"
}
],
"name": "moderation-queue-item",
"registryDependencies": [
"card",
"button-group",
"badge",
"avatar"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Audio track browser and selector for video creation. Search, preview, and attach music tracks to Bytes content. Shows track name, artist, duration, and waveform preview. Used in Bytes post-capture editing.",
"files": [
{
"path": "components/ui/music-selector.tsx",
"type": "registry:ui"
}
],
"name": "music-selector",
"registryDependencies": [
"search-bar",
"audio-waveform"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Runtime accessibility compliance checker. Scans rendered DOM for WCAG violations: missing ARIA labels, insufficient contrast, missing alt text, broken focus order, touch target sizes. Can run on-demand or continuously in development. Competitors: Lighthouse, axe-core.",
"files": [
{
"path": "lib/mzizi-a11y-audit.ts",
"type": "registry:lib"
}
],
"name": "mzizi-a11y-audit",
"registryDependencies": [],
"type": "registry:lib"
},
{
"dependencies": [],
"description": "Adaptive Bitrate Content — adjusts content quality based on network conditions. Serves lower-resolution images, compressed text, and deferred media on slow connections. Based on TikTok ABR streaming but applied to all content types, not just video. Critical for Africa where 2G/3G is common.",
"files": [
{
"path": "components/ui/mzizi-abr-content.tsx",
"type": "registry:ui"
}
],
"name": "mzizi-abr-content",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "SLO/SLA tracking and threshold-based alerting with escalation. Defines budgets (error budget, latency budget), monitors them, and fires alerts when thresholds are breached. Supports severity escalation: warn → page → incident. Competitors: PagerDuty, Grafana Alerting.",
"files": [
{
"path": "lib/mzizi-alert-engine.ts",
"type": "registry:lib"
}
],
"name": "mzizi-alert-engine",
"registryDependencies": [],
"type": "registry:lib"
},
{
"dependencies": [],
"description": "API endpoint health checker. Pings all design portal API endpoints (from component_backlinks) and reports status codes, latency, and error rates. Feeds into nyuchi-platform-health. Uses the backlinks system built in v4.8.0.",
"files": [
{
"path": "lib/mzizi-api-probe.ts",
"type": "registry:lib"
}
],
"name": "mzizi-api-probe",
"registryDependencies": [],
"type": "registry:lib"
},
{
"dependencies": [],
"description": "Blockchain network verification gate. Checks which chain the user is connected to before rendering chain-dependent features. Supports Nyuchi Network (Cosmos SDK), Polygon, and Ethereum. Shows branded switch-network CTA with chain logos.",
"files": [
{
"path": "components/ui/mzizi-chain-gate.tsx",
"type": "registry:ui"
}
],
"name": "mzizi-chain-gate",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Blockchain RPC failure handler. Handles chain disconnections, RPC timeouts, reorganizations, and wallet disconnections without crashing the UI. Auto-retries with exponential backoff. Shows branded chain status with recovery actions.",
"files": [
{
"path": "components/ui/mzizi-chain-resilience.tsx",
"type": "registry:ui"
}
],
"name": "mzizi-chain-resilience",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Reactive chaos diagnostics — N8 Assurance (Z-axis/depth). Runs through the entire 3D architecture, able to inject failures at any component on any horizontal layer, through any vertical spine. Two modes: (1) Injection — random error/latency at configurable probability per layer intersection. (2) Reactive — when a real error is caught anywhere in the 3D space, probe adjacent systems for blast radius. The depth dimension that proves X and Y axes work.",
"files": [
{
"path": "lib/mzizi-chaos.tsx",
"type": "registry:lib"
}
],
"name": "mzizi-chaos",
"registryDependencies": [],
"type": "registry:lib"
},
{
"dependencies": [],
"description": "Conformity monkey — verifies deployed components match the design registry. Scans the DOM for data-slot/data-portal attributes and cross-references with the component database. Flags: unregistered components, outdated versions, missing backlinks, components using deprecated patterns. Inspired by Netflix Conformity Monkey.",
"files": [
{
"path": "lib/mzizi-conformity-check.ts",
"type": "registry:lib"
}
],
"name": "mzizi-conformity-check",
"registryDependencies": [],
"type": "registry:lib"
},
{
"dependencies": [],
"description": "Content access gate with age verification, location restrictions, and content sensitivity filters. Renders children when all checks pass. Shows a branded explanation with the specific restriction reason when blocked. Supports multiple gate types that can be composed.",
"files": [
{
"path": "components/ui/mzizi-content-gate.tsx",
"type": "registry:ui"
}
],
"name": "mzizi-content-gate",
"registryDependencies": [
"https://mzizi.dev/api/v1/ui/nyuchi-harness",
"utils"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Post-quantum cryptography fallback handler. When PQC verification fails (library not loaded, algorithm not supported on device), falls back to classical verification with a \"reduced security\" visual indicator. Based on the QuantZen overlay pattern — adds quantum-safe layer without breaking existing UX.",
"files": [
{
"path": "components/ui/mzizi-crypto-fallback.tsx",
"type": "registry:ui"
}
],
"name": "mzizi-crypto-fallback",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Quantum-safe cryptographic verification gate. Validates signature strength — in quantum-ready mode requires PQC dual-signature (CRYSTALS-Dilithium + classical ECDSA). Degrades gracefully showing \"reduced security\" indicator when only classical signatures are available. Based on the QuantZen dual-signature pattern.",
"files": [
{
"path": "components/ui/mzizi-crypto-gate.tsx",
"type": "registry:ui"
}
],
"name": "mzizi-crypto-gate",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Configurable degradation fallback chain: personalized → cached → trending → default → static. Each level renders when the previous fails. Based on Netflix graceful degradation — the \"bookmark service\" pattern applied across all mini-apps.",
"files": [
{
"path": "components/ui/mzizi-degradation-chain.tsx",
"type": "registry:ui"
}
],
"name": "mzizi-degradation-chain",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Decentralized Identifier (DID) credential gate. Verifies W3C Verifiable Credentials from the Nyuchi Honeycomb pod. Works offline by checking the local credential store first, then validates against the server when connectivity returns. Shows \"locally verified\" vs \"server confirmed\" status.",
"files": [
{
"path": "components/ui/mzizi-did-gate.tsx",
"type": "registry:ui"
}
],
"name": "mzizi-did-gate",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Brand error and resilience states for the Nyuchi ecosystem. Exports ErrorCard (inline error within feeds), NotFound (brand 404 page), OfflineBanner (local-first connection status indicator), SectionFallback (section-level error with retry). NOTE: PermissionGate is also currently exported here but architecturally belongs at Layer 4 (Safety & Trust) and should be extracted into a separate component in a future refactor. Each state uses mineral accents, brand typography, and matches the Nyuchi identity system.",
"files": [
{
"path": "components/ui/mzizi-error-set.tsx",
"type": "registry:ui"
}
],
"name": "mzizi-error-set",
"registryDependencies": [
"button",
"badge",
"https://mzizi.dev/api/v1/ui/nyuchi-verified-badge",
"https://mzizi.dev/api/v1/ui/nyuchi-harness"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Structured error collection, deduplication, and blast radius analysis. Catches errors from L5 error boundaries, enriches them with component backlinks (data-portal), calculates which mini-apps and layers are affected. Competitors: Sentry, Datadog Error Tracking.",
"files": [
{
"path": "lib/mzizi-error-tracker.ts",
"type": "registry:lib"
}
],
"name": "mzizi-error-tracker",
"registryDependencies": [],
"type": "registry:lib"
},
{
"dependencies": [],
"description": "Feature flag gate. Instantly show/hide features based on remote config without deployment. Supports kill switch for instant feature disable. Based on Netflix feature flag pattern + OpenFeature standard. Checks local flag cache first (device-first), then remote config.",
"files": [
{
"path": "components/ui/mzizi-feature-gate.tsx",
"type": "registry:ui"
}
],
"name": "mzizi-feature-gate",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Data sovereignty and jurisdiction gate. Ensures content and features comply with the user's local data protection laws (GDPR, POPIA, Zimbabwe DPRA). Blocks region-restricted content with branded explanation and jurisdiction info.",
"files": [
{
"path": "components/ui/mzizi-geo-gate.tsx",
"type": "registry:ui"
}
],
"name": "mzizi-geo-gate",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Incident lifecycle management: detect → triage → mitigate → resolve → postmortem. Tracks incidents with severity, affected components (via backlinks), timeline of actions, and generates postmortem templates. Competitors: PagerDuty, incident.io.",
"files": [
{
"path": "lib/mzizi-incident-manager.ts",
"type": "registry:lib"
}
],
"name": "mzizi-incident-manager",
"registryDependencies": [],
"type": "registry:lib"
},
{
"dependencies": [],
"description": "Prioritized load shedding. Under pressure, critical requests (auth, payment) survive while non-critical (analytics, recommendations, media enrichment) are shed first. Shows degraded mode indicator. Based on Netflix prioritized load shedding.",
"files": [
{
"path": "components/ui/mzizi-load-shedder.tsx",
"type": "registry:ui"
}
],
"name": "mzizi-load-shedder",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Content moderation status gate. Blocks rendering until content passes the Shamwari AI safety pipeline. Shows branded \"under review\" state with estimated wait time. Supports on-device moderation check (CoreML/NNAPI) before cloud verification. Based on TikTok two-stage AI moderation.",
"files": [
{
"path": "components/ui/mzizi-moderation-gate.tsx",
"type": "registry:ui"
}
],
"name": "mzizi-moderation-gate",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Offline feature availability gate. Determines if a feature works offline, with cached data, or requires a connection. Shows branded \"available offline\" or \"requires connection\" state. Critical for local-first architecture — treats connectivity as a gradient, not a binary. Based on WhatsApp offline queuing but for all feature types.",
"files": [
{
"path": "components/ui/mzizi-offline-gate.tsx",
"type": "registry:ui"
}
],
"name": "mzizi-offline-gate",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Web Vitals and performance monitoring. Tracks LCP, FID, CLS, INP, TTFB per page and per component (using data-portal backlinks). Reports to analytics. Competitors: Lighthouse, Web Vitals library, Vercel Analytics.",
"files": [
{
"path": "lib/mzizi-perf-probe.ts",
"type": "registry:lib"
}
],
"name": "mzizi-perf-probe",
"registryDependencies": [],
"type": "registry:lib"
},
{
"dependencies": [],
"description": "Verification tier gate. Checks the user's verification tier against the required tier before rendering children. Shows a branded mineral-colored upgrade CTA if insufficient. Maps to system.verification_tier (5 tiers: unverified, community, OTP, government, licensed). Renders children when check passes, branded explanation when it doesn't.",
"files": [
{
"path": "components/ui/mzizi-permission-gate.tsx",
"type": "registry:ui"
}
],
"name": "mzizi-permission-gate",
"registryDependencies": [
"https://mzizi.dev/api/v1/ui/nyuchi-harness",
"utils"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Transparent platform health dashboard — N8 Assurance (Z-axis/depth). Observes the full 3D architecture: every horizontal layer (L2-L7), every vertical spine (L1 tokens, L4 safety, L5 resilience), and reports which intersections are operational, degraded, or in outage. The depth view into the system.",
"files": [
{
"path": "components/ui/mzizi-platform-health.tsx",
"type": "registry:ui"
}
],
"name": "mzizi-platform-health",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Pre-loads the next screen critical data and components while user is on current screen. TikTok seamless swipe pattern for all navigation. Respects Save-Data header and low battery.",
"files": [
{
"path": "components/ui/mzizi-prefetch-boundary.tsx",
"type": "registry:ui"
}
],
"name": "mzizi-prefetch-boundary",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Client-side rate limiting gate. Shows \"too many attempts\" with cooldown timer BEFORE requests leave the device. Prevents unnecessary server load and gives immediate feedback. Based on WeChat gateway rate limiting pattern.",
"files": [
{
"path": "components/ui/mzizi-rate-gate.tsx",
"type": "registry:ui"
}
],
"name": "mzizi-rate-gate",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Real User Monitoring. Collects page load timing, interaction delays, network quality, and navigation patterns from actual users. Aggregates by mini-app, page, device, and connection type. Privacy-respecting — no PII, only performance metrics. Competitors: Datadog RUM, Vercel Analytics.",
"files": [
{
"path": "lib/mzizi-rum.ts",
"type": "registry:lib"
}
],
"name": "mzizi-rum",
"registryDependencies": [],
"type": "registry:lib"
},
{
"dependencies": [],
"description": "The workhorse section wrapper for every page. Combines error boundary, loading skeleton, health reporting, and optional lazy mounting into a single component. Every section of every page is wrapped in NyuchiSection. If one section fails, the rest keep working. Reports health status (healthy/degraded/error/loading) to the global health monitor. The architecture doc says: \"Every section of every page is wrapped in resilience.\"",
"files": [
{
"path": "components/ui/mzizi-section.tsx",
"type": "registry:ui"
}
],
"name": "mzizi-section",
"registryDependencies": [
"https://mzizi.dev/api/v1/ui/nyuchi-harness",
"utils",
"error-boundary",
"section-error-boundary"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "DEPRECATED — Loading states are built into each component from Layer 2 up via the loading prop. Every component renders its own shaped skeleton matching its exact proportions. This top-down skeleton set is a legacy pattern. Use instead of . Will be removed in the next major version.",
"files": [
{
"path": "components/ui/mzizi-skeleton-set.tsx",
"type": "registry:ui"
}
],
"name": "mzizi-skeleton-set",
"registryDependencies": [
"skeleton",
"https://mzizi.dev/api/v1/ui/nyuchi-harness"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "CouchDB sync state indicator. Shows sync progress, conflict count, and resolution status. The bridge between local-first data and cloud truth. Displays: synced, syncing (with progress), conflicts pending, sync error, and offline-queued states.",
"files": [
{
"path": "components/ui/mzizi-sync-status.tsx",
"type": "registry:ui"
}
],
"name": "mzizi-sync-status",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Synthetic user journey probes that run on schedule. Defines step-by-step user flows (login → navigate → action → verify) and executes them against live or staging environments. Reports pass/fail with latency per step. Competitors: Datadog Synthetic Monitoring, Checkly.",
"files": [
{
"path": "lib/mzizi-synthetic-probe.ts",
"type": "registry:lib"
}
],
"name": "mzizi-synthetic-probe",
"registryDependencies": [],
"type": "registry:lib"
},
{
"dependencies": [],
"description": "Trust score threshold gate. Blocks features that require a minimum trust score. Shows the user's current score, the required threshold, and actionable steps to improve. Maps to the Ubuntu Layer trust model: Status × Verification Tier → Trust Score. Used for: posting requires > 0.1, selling requires > 0.3, moderating requires > 0.5.",
"files": [
{
"path": "components/ui/mzizi-trust-gate.tsx",
"type": "registry:ui"
}
],
"name": "mzizi-trust-gate",
"registryDependencies": [
"https://mzizi.dev/api/v1/ui/nyuchi-harness",
"utils"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Web3 wallet connection gate. Verifies wallet is connected and optionally checks token balance (MIT soulbound, MXT transferable, NST storage, NHC utility). Shows branded connect CTA with mineral-colored wallet icon when not connected. Supports Cosmos SDK (Nyuchi Network), Polygon, and Ethereum wallets.",
"files": [
{
"path": "components/ui/mzizi-wallet-gate.tsx",
"type": "registry:ui"
}
],
"name": "mzizi-wallet-gate",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "A native HTML select element styled to match the design system.",
"files": [
{
"path": "components/ui/native-select.tsx",
"type": "registry:ui"
}
],
"name": "native-select",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [
"class-variance-authority",
"radix-ui"
],
"description": "A collection of links for navigating websites.",
"files": [
{
"path": "components/ui/navigation-menu.tsx",
"type": "registry:ui"
}
],
"name": "navigation-menu",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Proximity-sorted results list designed to pair with a map view. Shows distance, direction indicator, and listing preview. Standard split-view pattern for BushTrade browse, Places discovery, Nhimbe nearby events, and Transport nearby stops.",
"files": [
{
"path": "components/ui/nearby-list.tsx",
"type": "registry:ui"
}
],
"name": "nearby-list",
"registryDependencies": [
"map-view",
"https://mzizi.dev/api/v1/ui/nyuchi-listing-card"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "NFT display card showing media (image/video), title, collection, owner, and marketplace actions. Used for Nhimbe ERC-1155 tickets, Novels chapter NFTs, Ubuntu badge NFTs, and creator content NFTs. Maps to wallet.nft_holdings.",
"files": [
{
"path": "components/ui/nft-card.tsx",
"type": "registry:ui"
}
],
"name": "nft-card",
"registryDependencies": [
"card",
"badge",
"button"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Honeycomb node health and earnings display. Shows node type (consumer/business/infrastructure), uptime, storage contributed, NHC earned, and peer count. Used in the Honeycomb network dashboard.",
"files": [
{
"path": "components/ui/node-status-card.tsx",
"type": "registry:ui"
}
],
"name": "node-status-card",
"registryDependencies": [
"card",
"badge",
"status-indicator",
"progress"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Compact note display with title, excerpt, and timestamp.",
"files": [
{
"path": "components/ui/note-card.tsx",
"type": "registry:ui"
}
],
"name": "note-card",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Rich note editing interface with title, body (markdown or rich text), tags, and auto-save indicator. Supports inline images, checklists, and code blocks. The creation/editing counterpart to note-card (display). Reusable in any app that needs structured note capture.",
"files": [
{
"path": "components/ui/note-editor.tsx",
"type": "registry:ui"
}
],
"name": "note-editor",
"registryDependencies": [
"rich-text-editor",
"tag-input",
"input"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "A notification bell icon with unread count badge and a popover panel listing notifications.",
"files": [
{
"path": "components/ui/notification-bell.tsx",
"type": "registry:ui"
}
],
"name": "notification-bell",
"registryDependencies": [
"button",
"popover",
"scroll-area",
"separator"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Notification center with tabs for all, unread, and mentions with grouped items.",
"files": [
{
"path": "components/blocks/notification-center.tsx",
"type": "registry:block"
}
],
"name": "notification-center",
"registryDependencies": [
"badge",
"button",
"card",
"scroll-area",
"separator",
"tabs"
],
"type": "registry:block"
},
{
"dependencies": [],
"description": "Full-screen or drawer notification management surface. Extends notification-center (existing Layer 2 component) with filter/search, archive, bulk actions, and grouped conversations view. Audit flagged as missing UX pattern for mature notification UX. ALPHA — awaiting frontend implementation.",
"files": [
{
"path": "components/ui/notification-center-full.tsx",
"type": "registry:ui"
}
],
"name": "notification-center-full",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Notification feed with read/unread states, timestamps, and date grouping.",
"files": [
{
"path": "components/ui/notification-list.tsx",
"type": "registry:ui"
}
],
"name": "notification-list",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Book/manga cover display with genre badge, rating, chapter count, and status indicator (ongoing/completed/hiatus). Aspect ratio optimized for book covers (2:3). Maps to novels.work table.",
"files": [
{
"path": "components/ui/novel-cover.tsx",
"type": "registry:ui"
}
],
"name": "novel-cover",
"registryDependencies": [
"card",
"badge",
"rating"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Numeric input with increment and decrement buttons, min/max/step support.",
"files": [
{
"path": "components/ui/number-input.tsx",
"type": "registry:ui"
}
],
"name": "number-input",
"registryDependencies": [
"button"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Accessibility infrastructure for the Nyuchi ecosystem. Exports FocusTrap (modal/overlay focus containment), LiveRegion (screen reader announcements for dynamic content), SkipNav (keyboard skip-to-content link), VisuallyHidden (screen-reader-only text), and a11y token definitions (focus ring styles, minimum touch targets, contrast-safe mineral pairings). Also exports useAnnounce hook for imperatively announcing trust score changes, notification arrivals, loading completions, and other dynamic updates to screen readers. Target: Rust compiled to WebAssembly. wasm-bindgen exposes the interface to SvelteKit. One Rust codebase compiles to both WASM (browser) and native binary (server).",
"files": [
{
"path": "lib/a11y/index.tsx",
"type": "registry:lib"
}
],
"name": "nyuchi-a11y",
"registryDependencies": [
"https://mzizi.dev/api/v1/ui/nyuchi-tokens"
],
"type": "registry:lib"
},
{
"dependencies": [],
"description": "Universal branded bottom action sheet for contextual actions on any content across the ecosystem. Share, save, report, copy link, block, follow — the standard set of actions available on listings, posts, profiles, and messages. Renders as a bottom sheet on mobile with mineral accent on destructive/primary actions. Composes sheet and share-dialog primitives.",
"files": [
{
"path": "components/ui/nyuchi-action-sheet.tsx",
"type": "registry:ui"
}
],
"name": "nyuchi-action-sheet",
"registryDependencies": [
"sheet",
"https://mzizi.dev/api/v1/ui/nyuchi-harness"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "AI context provider for N10. Generates context windows for AI assistants (Claude, Cursor, Copilot, Windsurf) with current ecosystem model, node architecture, and coding rules. No hardcoded counts — always accepts live values from get_system_counts(). Used by the MCP server and IDE integrations.",
"files": [
{
"path": "lib/nyuchi-ai-context.ts",
"type": "registry:lib"
}
],
"name": "nyuchi-ai-context",
"registryDependencies": [],
"type": "registry:lib"
},
{
"dependencies": [],
"description": "Universal branded alert banner with mineral-coded severity levels. Used across all ecosystem apps for weather alerts, system notifications, security warnings, trust advisories, and any time-sensitive information. Severity maps to minerals: watch=cobalt, moderate=terracotta, severe=gold. Renders as a prominent banner with dismiss, detail action, and safety instructions.",
"files": [
{
"path": "components/ui/nyuchi-alert-banner.tsx",
"type": "registry:ui"
}
],
"name": "nyuchi-alert-banner",
"registryDependencies": [
"alert",
"https://mzizi.dev/api/v1/ui/nyuchi-harness"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Branded job application status timeline showing application stages (applied, reviewed, interview, offer, rejected) with timestamps and employer feedback. Gold mineral accent. Used in Jobs dashboard.",
"files": [
{
"path": "components/ui/nyuchi-application-tracker.tsx",
"type": "registry:ui"
}
],
"name": "nyuchi-application-tracker",
"registryDependencies": [
"card",
"https://mzizi.dev/api/v1/ui/nyuchi-harness"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "News article card extending nyuchi-listing-card with factcheck badge, source attribution, journalist byline, and read time. Maps to news.news_article (67 columns) and news.feed_source. Used in Mukoko News feeds, Pulse aggregation, and content discovery.",
"files": [
{
"path": "components/ui/nyuchi-article-card.tsx",
"type": "registry:ui"
}
],
"name": "nyuchi-article-card",
"registryDependencies": [
"https://mzizi.dev/api/v1/ui/nyuchi-listing-card",
"badge",
"https://mzizi.dev/api/v1/ui/nyuchi-verified-badge",
"https://mzizi.dev/api/v1/ui/nyuchi-harness"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": null,
"files": [
{
"path": "agentic/nyuchi-auth-card.tsx",
"type": "registry:ui"
}
],
"name": "nyuchi-auth-card",
"registryDependencies": [
"https://mzizi.dev/api/v1/ui/nyuchi-harness",
"utils"
],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Default auth screen layout that services all login, signup, and onboarding flows. Provides the branded container: centered card with mineral gradient background, Mukoko logo, language selector, and legal links. Individual auth flows (login-01..05, signup-01..05) render inside this layout as children.",
"files": [
{
"path": "components/ui/nyuchi-auth-layout.tsx",
"type": "registry:ui"
}
],
"name": "nyuchi-auth-layout",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"description": "Overlapping +N social-proof avatar stack — the going/attendee cue. Ring-separated avatars overlap with negative margin, each an image or an initials fallback, showing up to `max` before a +N overflow bubble, with an optional trailing