Add comprehensive UI component system (81 components) with mobile-first design

[Copilot]

Adds production-ready UI component specifications for enterprise management software. Components are designed mobile-first with WCAG 2.1 AA compliance.

Components Added (81 total)

Input (28): Text (single/multi-line, rich), Number (numeric, currency, slider, rating), Date/Time (picker, range), Select (dropdown, autocomplete, tags, cascader), Boolean (checkbox, switch, radio, toggle), File (upload, image w/ crop), Advanced (color, signature, location, code editor)

Display (23): Text (label, badge, tag, pill), Rich Content (HTML, Markdown, code block), Media (image, avatar, icon, video), Progress (bar, circle, spinner, skeleton), Stats (KPI, trend, gauge), Info (timeline, divider)

Layout (22): Containers (card, panel, section, well), Grids (12-col responsive, masonry, flex, stack, split-pane), Navigation (tabs, accordion, stepper, breadcrumb, pagination), Overlays (modal, drawer, popover, tooltip, toast, dropdown)

Specialized (8): Data (table w/ virtual scroll, tree, kanban), Feedback (alert, empty state), Mobile (bottom nav, FAB, pull-to-refresh)

Architecture

All components follow Zod-first pattern:

• Runtime validation via Zod schemas
• TypeScript types via z.infer<>
• JSON schemas auto-generated for IDE support
• Responsive breakpoints: xs (480), sm (640), md (768), lg (1024), xl (1280), 2xl (1536)

Usage

import { GridProps, KpiCardProps, TextInputProps } from '@objectstack/spec';

// Responsive grid adapts to screen size
const layout: GridProps = {
  columns: { xs: 1, md: 2, lg: 4 },  // Stack on mobile, grid on desktop
  gap: 'lg'
};

// KPI with trend indicator
const revenue: KpiCardProps = {
  title: 'Revenue',
  value: '$125K',
  trend: { value: 12.5, direction: 'up', label: 'vs last month' }
};

// Touch-optimized input (≥44px tap target)
const email: TextInputProps = {
  size: 'large',
  autocomplete: 'email',
  clearable: true
};

Files

• src/ui/input.zod.ts - Input components (700 LOC)
• src/ui/display.zod.ts - Display components (600 LOC)
• src/ui/layout.zod.ts - Layout components (600 LOC)
• src/ui/component.zod.ts - Master registry + specialized components
• src/ui/*.test.ts - Test coverage (58 new tests, 3,290 total passing)
• src/ui/README.md - Component reference guide

Design Principles

Mobile-first (touch targets ≥44px), accessible (WCAG 2.1 AA), performant (virtual scroll, lazy load), type-safe (Zod + TypeScript).

Original prompt

你是全球頂流的企業管理軟件界面設計師，掃描所有spec ui協議和當前項目代碼，對於所有可能用到的組件進行詳細的設計，要求做全球最好用最好看的企業管理軟件，同時兼顧手機端

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
spec	Ready	Preview, Comment	Feb 3, 2026 8:49pm

In general, to fix an unused import in TypeScript, remove the unused symbol from the import list (or, if the entire import is unused, delete the import statement). This eliminates dead code and satisfies the static analysis rule without changing runtime behavior.

Here, the best minimal fix is to edit packages/spec/src/ui/display.test.ts at the top of the file and remove TagPropsSchema from the named import on lines 2–12. All other imported schemas remain untouched because they are used in the tests. No additional code, methods, or imports are needed.

In general, to fix unused imports, you either remove them or start using them. Since this is a test file and the shown tests don’t use the flagged schemas, the safest fix that doesn’t change existing functionality is to delete just the unused names from the import list, leaving the used imports intact.

Concretely, in packages/spec/src/ui/input.test.ts on the multi-line import from ./input.zod, remove the following identifiers from the named import list: TextareaPropsSchema, DateTimePickerPropsSchema, TimePickerPropsSchema, DateRangePickerPropsSchema, CascaderPropsSchema, CheckboxPropsSchema, SwitchPropsSchema, RadioGroupPropsSchema, and SignaturePadPropsSchema. Do not add any new imports or change the remaining ones. No other code changes, methods, or definitions are needed.