npm package: @intuix/core
Description: Next-Gen Living UI Components — 130+ components with AI-powered interactions, neumorphic design, CID patterns, and 3D scenes
Latest version: 1.0.2

# @intuix/core

Next-Gen Living UI Components for React — 130+ components with AI-powered interactions, neumorphic design, CID patterns, and 3D scenes.

[![npm](https://img.shields.io/npm/v/@intuix/core)](https://www.npmjs.com/package/@intuix/core)
[![license](https://img.shields.io/npm/l/@intuix/core)](https://github.com/HoshMe/intuix/blob/main/LICENSE)

## Install

```bash
npm install @intuix/core framer-motion
```

For 3D components (optional):
```bash
npm install three @react-three/fiber @react-three/drei
```

---

## Living UI Components

### MorphingBlob

Fluid action blob that replaces traditional buttons. Morphs shape on hover/click/loading.

```tsx
import { MorphingBlob } from '@intuix/core';

<MorphingBlob
  label="Create"
  color="#6366f1"
  size={120}
  onExecute={async () => { await saveProject(); }}
  actions={[
    { id: '1', label: 'Save', onClick: () => {} },
    { id: '2', label: 'Share', onClick: () => {} },
  ]}
/>
```

**Props:** `label` `color?` `size?` `onExecute?` `actions?: { id, label, onClick }[]` `aiSuggestedAction?` `theme?` `animation?`

### FlowSurface

Gravitational data dashboard — items float, attract by weight, cluster by tags.

```tsx
import { FlowSurface } from '@intuix/core';

<FlowSurface
  items={[
    { id: 'revenue', label: 'Revenue', value: '$45K', icon: <span>💰</span>,
      weight: 0.95, heat: 0.9, tags: ['finance'], color: '#10b981' },
    { id: 'users', label: 'Users', value: '1.2K', icon: <span>👥</span>,
      weight: 0.7, heat: 0.6, tags: ['growth'], color: '#6366f1' },
  ]}
  width={600}
  height={400}
  gravity={0.6}
  enableClustering
  enableAnomalyPulse
  onItemClick={(item) => console.log(item)}
  onItemDismiss={(item) => remove(item.id)}
/>
```

**Props:** `items: FlowItem[]` `width?` `height?` `gravity?` `decay?` `enableClustering?` `enableAnomalyPulse?` `enablePredictiveFocus?` `enableParallax?` `onItemClick?` `onItemDismiss?` `onClusterForm?`

### NeuralGrid

Interactive node-based data visualization with connections and AI insights.

```tsx
import { NeuralGrid } from '@intuix/core';

<NeuralGrid
  width={600}
  height={400}
  nodes={[
    { id: '1', label: 'Sales', value: '$12K', importance: 0.9,
      color: '#6366f1', connections: ['2', '3'] },
    { id: '2', label: 'Users', value: '1.2K', importance: 0.7,
      color: '#8b5cf6', connections: ['1'] },
    { id: '3', label: 'Revenue', value: '$45K', importance: 1,
      color: '#a78bfa', connections: ['1'] },
  ]}
  aiInsights={['Revenue is trending up']}
  onNodeClick={(node) => console.log(node)}
/>
```

**Props:** `nodes: NeuralNode[]` `width?` `height?` `aiInsights?` `highlightedNodes?` `onNodeClick?` `onNodeHover?` `theme?` `animation?`

### IntentSlider

Continuous intent-based range filter with step labels and preview.

```tsx
import { IntentSlider } from '@intuix/core';

const [value, setValue] = useState(0.5);

<IntentSlider
  range={{ min: 'Budget', max: 'Premium', color: ['#6366f1', '#ec4899'] }}
  value={value}
  onChange={setValue}
  size="lg"
  steps={['Budget', 'Standard', 'Premium']}
  showPreview={(v) => <span>{v < 0.5 ? '💰 Budget' : '✨ Premium'}</span>}
  onIntentChange={(intent, confidence) => console.log(intent, confidence)}
/>
```

**Props:** `range: { min, max, color? }` `value?` `onChange` `steps?` `size?: 'sm' | 'md' | 'lg'` `showPreview?` `onIntentChange?` `theme?` `animation?`

### MagneticField

Cursor-attracting action elements — items pull toward mouse based on priority.

```tsx
import { MagneticField } from '@intuix/core';

<MagneticField
  radius={250}
  strength={0.9}
  items={[
    { id: '1', label: 'Edit', icon: <span>✏️</span>, priority: 0.9,
      color: '#6366f1', onClick: () => {} },
    { id: '2', label: 'Share', icon: <span>📤</span>, priority: 0.7,
      color: '#8b5cf6', onClick: () => {} },
    { id: '3', label: 'Delete', icon: <span>🗑️</span>, priority: 0.3,
      color: '#ef4444', onClick: () => {} },
  ]}
/>
```

**Props:** `items: MagneticItem[]` `radius?` `strength?` `theme?` `animation?`

### PredictiveHover

Shows predicted outcomes when hovering over an action button.

```tsx
import { PredictiveHover } from '@intuix/core';

<PredictiveHover
  predictions={[
    { label: 'Removes 3 items', impact: 'negative', confidence: 0.9 },
    { label: 'Frees 2.4MB', impact: 'positive', confidence: 0.85 },
  ]}
  position="top"
>
  <button>🗑️ Delete All</button>
</PredictiveHover>
```

**Props:** `children` `predictions: HoverPrediction[]` `position?: 'top' | 'bottom' | 'left' | 'right'` `delay?` `onPredict?` `theme?` `animation?`

### GlassCommandCube

3D rotatable glass cube with actions on each face.

```tsx
import { GlassCommandCube } from '@intuix/core';

<GlassCommandCube
  size={160}
  faces={[
    { id: '1', label: 'Home', icon: <span>🏠</span>, color: '#6366f1', onClick: () => {} },
    { id: '2', label: 'Search', icon: <span>🔍</span>, color: '#8b5cf6', onClick: () => {} },
    { id: '3', label: 'Profile', icon: <span>👤</span>, color: '#a78bfa', onClick: () => {} },
    { id: '4', label: 'Settings', icon: <span>⚙️</span>, color: '#7c3aed', onClick: () => {} },
  ]}
/>
```

**Props:** `faces: CubeFace[]` `size?` `aiReorderByUsage?` `theme?` `animation?`

### OrbitNavigation

Orbital navigation with items rotating around a center point.

```tsx
import { OrbitNavigation } from '@intuix/core';

<OrbitNavigation
  radius={120}
  size={320}
  centerLabel="Menu"
  items={[
    { id: '1', label: 'Dashboard', icon: <span>📊</span>, frequency: 0.9,
      color: '#6366f1', onClick: () => {} },
    { id: '2', label: 'Projects', icon: <span>📁</span>, frequency: 0.7,
      color: '#8b5cf6', onClick: () => {} },
  ]}
/>
```

**Props:** `items: OrbitItem[]` `radius?` `size?` `centerLabel?` `centerIcon?` `onCenterClick?` `theme?` `animation?`

### AdaptivePanel

Self-rearranging panel — sections reorder based on usage patterns.

```tsx
import { AdaptivePanel } from '@intuix/core';

<AdaptivePanel
  aiAdapt={true}
  storageKey="my-panel"
  sections={[
    { id: 'analytics', title: 'Analytics', icon: <span>📊</span>,
      collapsible: true, color: '#6366f1', priority: 0.9,
      content: <Chart /> },
    { id: 'tasks', title: 'Tasks', icon: <span>✅</span>,
      collapsible: true, color: '#10b981',
      content: <TaskList /> },
  ]}
  onReorder={(sections) => console.log(sections)}
/>
```

**Props:** `sections: PanelSection[]` `aiAdapt?` `storageKey?` `onReorder?` `theme?` `animation?`

### GestureSurface

Canvas-based gesture recognition — draw patterns to trigger actions.

```tsx
import { GestureSurface } from '@intuix/core';

<GestureSurface
  width={300}
  height={300}
  color="#6366f1"
  showGuide
  gestures={[
    { name: 'circle', pattern: 'CW', label: 'Create', icon: <span>➕</span>,
      action: () => createItem() },
    { name: 'swipe-right', pattern: 'R', label: 'Next',
      action: () => nextPage() },
    { name: 'zigzag', pattern: 'RLR', label: 'Delete',
      action: () => deleteItem() },
  ]}
  onGestureRecognized={(g) => console.log(g.label)}
/>
```

**Props:** `gestures: GesturePattern[]` `width?` `height?` `color?` `showGuide?` `onGestureRecognized?` `theme?` `animation?`

### MoodScape

Sentiment-reactive background — analyzes content and adapts atmosphere.

```tsx
import { MoodScape } from '@intuix/core';

<MoodScape
  intensity={0.6}
  onMoodChange={(mood, score) => console.log(mood, score)}
>
  <div className="p-6">
    <h3>Project Approved! ✅</h3>
    <p>All systems verified and stable.</p>
  </div>
</MoodScape>

// Override mood manually
<MoodScape mood="urgent">
  <AlertBanner />
</MoodScape>
```

**Props:** `children` `mood?` `content?` `intensity?` `animated?` `onMoodChange?` `theme?` `animation?`

### GravityMenu

Usage-weighted menu — frequently clicked items sink to the top.

```tsx
import { GravityMenu } from '@intuix/core';

<GravityMenu
  storageKey="my-nav"
  gravity={0.8}
  showWeights
  items={[
    { id: 'home', label: 'Dashboard', icon: <span>📊</span>,
      color: '#6366f1', onClick: () => navigate('/') },
    { id: 'projects', label: 'Projects', icon: <span>📁</span>,
      color: '#8b5cf6', onClick: () => navigate('/projects') },
    { id: 'settings', label: 'Settings', icon: <span>⚙️</span>,
      color: '#64748b', onClick: () => navigate('/settings') },
  ]}
  onReorder={(sorted) => console.log(sorted)}
/>
```

**Props:** `items: GravityMenuItem[]` `storageKey?` `gravity?` `direction?: 'vertical' | 'horizontal'` `showWeights?` `onReorder?` `theme?` `animation?`

### PulseMetric

Heartbeat-synced live metric — pulse speed matches data velocity.

```tsx
import { PulseMetric } from '@intuix/core';

<PulseMetric
  value={45200}
  previousValue={44800}
  label="Revenue"
  format={(v) => '$' + (v / 1000).toFixed(1) + 'K'}
  color="#10b981"
  size="lg"
  showPulse
  showDelta
  anomalyDetection
/>
```

**Props:** `value` `label` `previousValue?` `format?` `color?` `size?: 'sm' | 'md' | 'lg'` `showPulse?` `showDelta?` `trend?` `anomalyDetection?` `theme?` `animation?`

---

## Neumorphic Design System (50+ components)

All neumorphic components accept `theme?: Partial<NeuTheme>` and `animation?: Partial<NeuAnimation>`.

### NeuButton

```tsx
import { NeuButton } from '@intuix/core';

<NeuButton variant="primary" size="md" onClick={() => {}}>
  Click me
</NeuButton>
<NeuButton variant="secondary" icon={<span>💾</span>}>Save</NeuButton>
<NeuButton variant="ghost" fullWidth disabled>Disabled</NeuButton>
```

**Props:** `children` `onClick?` `variant?: 'primary' | 'secondary' | 'ghost'` `size?: 'sm' | 'md' | 'lg'` `disabled?` `icon?` `fullWidth?`

### NeuCard

```tsx
import { NeuCard } from '@intuix/core';

<NeuCard padding={20} hoverable onClick={() => {}}>
  <h3>Card Title</h3>
  <p>Card content here</p>
</NeuCard>
<NeuCard inset>Inset card style</NeuCard>
```

**Props:** `children` `padding?` `hoverable?` `inset?` `onClick?` `theme?`

### NeuInput

```tsx
import { NeuInput } from '@intuix/core';

const [value, setValue] = useState('');

<NeuInput
  label="Email"
  value={value}
  onChange={(e) => setValue(e.target.value)}
  error="Invalid email"
  icon={<span>📧</span>}
  size="md"
/>
```

**Props:** `label?` `error?` `icon?` `size?: 'sm' | 'md' | 'lg'` + all standard `<input>` props

### NeuToggle

```tsx
import { NeuToggle } from '@intuix/core';

<NeuToggle checked={darkMode} onChange={setDarkMode} label="Dark Mode" />
```

**Props:** `checked` `onChange` `label?` `disabled?` `size?: 'sm' | 'md' | 'lg'`

### NeuTabs

```tsx
import { NeuTabs } from '@intuix/core';

<NeuTabs
  tabs={[
    { id: 'overview', label: 'Overview' },
    { id: 'analytics', label: 'Analytics', icon: <span>📊</span> },
    { id: 'settings', label: 'Settings' },
  ]}
  active="overview"
  onChange={(id) => setTab(id)}
/>
```

**Props:** `tabs: { id, label, icon? }[]` `active` `onChange`

### NeuNavbar

```tsx
import { NeuNavbar } from '@intuix/core';

<NeuNavbar
  logo={<span className="font-bold">Brand</span>}
  links={[
    { label: 'Home', href: '/', active: true },
    { label: 'About', href: '/about' },
    { label: 'Contact', href: '/contact' },
  ]}
  onLinkClick={(href) => router.push(href)}
/>
```

**Props:** `logo` `links: { label, href, active? }[]` `actions?` `onLinkClick?`

### NeuStatCard

```tsx
import { NeuStatCard } from '@intuix/core';

<NeuStatCard
  label="Revenue"
  value="$45.2K"
  icon={<span>💰</span>}
  trend={{ value: 12, label: 'vs last month' }}
  color="#10b981"
/>
```

**Props:** `label` `value` `icon?` `trend?: { value, label? }` `color?`

### NeuTable

```tsx
import { NeuTable } from '@intuix/core';

<NeuTable
  columns={[
    { key: 'name', label: 'Name', width: 2 },
    { key: 'price', label: 'Price', render: (v) => `$${v}` },
    { key: 'status', label: 'Status' },
  ]}
  data={[
    { name: 'Product A', price: 29, status: 'Active' },
    { name: 'Product B', price: 49, status: 'Draft' },
  ]}
  onRowClick={(row) => console.log(row)}
/>
```

**Props:** `columns: { key, label, width?, render? }[]` `data: Record[]` `onRowClick?`

### NeuModal

```tsx
import { NeuModal, NeuButton } from '@intuix/core';

<NeuModal open={isOpen} onClose={() => setOpen(false)} title="Confirm" width={480}>
  <p>Are you sure?</p>
  <footer>
    <NeuButton variant="ghost" onClick={() => setOpen(false)}>Cancel</NeuButton>
    <NeuButton onClick={handleConfirm}>Confirm</NeuButton>
  </footer>
</NeuModal>
```

**Props:** `open` `onClose` `title?` `children` `footer?` `width?`

### NeuAlert

```tsx
import { NeuAlert } from '@intuix/core';

<NeuAlert type="success" title="Saved!" dismissible>
  Your changes have been saved.
</NeuAlert>
<NeuAlert type="error">Something went wrong.</NeuAlert>
```

**Props:** `type?: 'success' | 'error' | 'warning' | 'info'` `title?` `children` `dismissible?` `icon?`

### NeuPricingCard

```tsx
import { NeuPricingCard } from '@intuix/core';

<NeuPricingCard
  name="Pro"
  price={29}
  period="/month"
  features={['Unlimited projects', 'Priority support', 'Custom themes']}
  featured
  cta="Get Started"
  onSelect={() => subscribe('pro')}
/>
```

**Props:** `name` `price` `period?` `features: string[]` `featured?` `cta?` `onSelect?`

### More Neumorphic Components

`NeuSlider` `NeuCheckbox` `NeuRadio` `NeuAvatar` `NeuBadge` `NeuSidebar` `NeuDropdown` `NeuTooltip` `NeuAccordion` `NeuBreadcrumb` `NeuProgress` `NeuCircularProgress` `NeuToast` `NeuSkeleton` `NeuTextarea` `NeuSelect` `NeuSwitch` `NeuRating` `NeuSearchBar` `NeuCalendar` `NeuTimePicker` `NeuFileUpload` `NeuColorPicker` `NeuStepper` `NeuClock` `NeuKnob` `NeuMusicPlayer` `NeuWeatherCard` `NeuNotificationBell` `NeuDivider` `NeuTag` `NeuSpinner` `NeuIconButton` `NeuTimeline` `NeuEmptyState` `NeuCounter` `NeuProfileCard` `NeuSwipeCard` `NeuPagination`

---

## CID Patterns (20+ components)

Contextual Inference Design — components that predict user intent.

### PredictiveFilter

```tsx
import { PredictiveFilter } from '@intuix/core';

<PredictiveFilter
  filters={[
    { id: 'f1', label: 'Electronics', value: 'electronics', count: 120 },
    { id: 'f2', label: 'Books', value: 'books', count: 85 },
  ]}
  onFilterChange={(selected) => setFilters(selected)}
  showPrecedent
/>
```

### SmartSearch

```tsx
import { SmartSearch } from '@intuix/core';

<SmartSearch
  suggestions={[
    { id: '1', text: 'laptop', category: 'devices' },
    { id: '2', text: 'laptop stand', category: 'accessories' },
  ]}
  onSearch={(query) => search(query)}
  onSuggestionSelect={(s) => navigate(s)}
  placeholder="Search..."
/>
```

### ContextualConfirm

```tsx
import { ContextualConfirm } from '@intuix/core';

<ContextualConfirm
  title="Delete Item?"
  message="This action cannot be undone."
  options={[
    { id: '1', label: 'Delete', action: () => deleteItem(), riskLevel: 'high' },
    { id: '2', label: 'Cancel', action: () => close(), riskLevel: 'low' },
  ]}
/>
```

### More CID Components

`ContextualSort` `FilterMemory` `QueryBuilder` `AdaptiveForm` `ContextualAutofill` `ConditionalInput` `SmartDefaults` `ConfirmationPreview` `PredictiveNav` `ContextualBreadcrumbs` `SmartSidebar` `IntentMenu` `PathSuggestion` `PredictiveAction` `SmartUndo` `ActionHistory` `RiskIndicator` `DecisionGraph` `CognitionMeter` `GhostPreview` `AttentionHeatmap` `FeedbackLoop` `ContextRadar` `AdaptiveGrid` `SentimentWave` `IntentTimeline` `CorrectionRipple`

---

## 3D Scenes (50+ components)

Requires: `npm install three @react-three/fiber @react-three/drei`

### StarField

```tsx
import { StarField } from '@intuix/core';

<StarField
  width="100%"
  height={400}
  count={5000}
  color="#ffffff"
  speed={0.3}
  bgColor="#000011"
/>
```

### CarConfigurator

```tsx
import { CarConfigurator } from '@intuix/core';

<CarConfigurator
  width="100%"
  height={400}
  bodyColor="#ef4444"
  wheelColor="#222222"
  glassColor="#88ccff"
  showLights
/>
```

### DNAHelix

```tsx
import { DNAHelix } from '@intuix/core';

<DNAHelix
  width="100%"
  height={400}
  pairs={20}
  speed={0.5}
  bgColor="#0a0a1a"
/>
```

### All 3D Components

**Space:** `StarField` `PlanetViewer` `GalaxySpiral` `BlackHole` `SolarSystem` `WarpTunnel` `NebulaClouds` `AsteroidBelt` `SpaceStation` `CosmicDust`

**Business:** `DataTower` `ProfitGlobe` `BoardroomTable` `OrgChart3D` `MetricCubes` `RevenueFlow` `MarketShare3D` `PipelineRings` `SalesFunnel3D` `DealRadar` `GrowthHelix` `NetworkGraph3D` `StockTerrain`

**E-commerce:** `ProductSpinner` `AddToCartBurst` `FlashSaleBadge` `TryOnMirror` `CheckoutFlow` `ProductExploder` `ShelfDisplay` `CouponWheel` `DeliveryTracker` `PackageUnbox` `InventoryGrid` `PriceOrbit` `ShoppingCart3D` `WishlistGalaxy`

**Education:** `DNAHelix` `MoleculeViewer` `BrainMap` `ChalkBoard3D` `PeriodicTable3D` `MathSurface` `AtomModel` `GlobeEarth` `Telescope3D` `LabFlask` `BookStack3D` `KnowledgeTree` `LessonPath` `QuizSphere` `TimelineRuins`

**Automotive:** `CarConfigurator` `SpeedGauge3D` `EngineExploder` `TireSpinner` `DashboardHUD` `WindTunnel` `SuspensionDemo` `GearMesh` `RacingLine` `FuelCell`

---

## Liquid Design System

A reactive design system where UI adapts like water — 7 principles: Flow, Absorption, Erosion, Pressure, Temperature, Surface Tension, Memory.

```tsx
import { LiquidProvider, LiquidSurface, LiquidText, useLiquid } from '@intuix/core';

function App() {
  return (
    <LiquidProvider tick={800}>
      <Dashboard />
    </LiquidProvider>
  );
}

function Dashboard() {
  const { tokens } = useLiquid();

  return (
    <div>
      <LiquidSurface id="revenue" importance={0.9}>
        <LiquidText as="label">Revenue</LiquidText>
        <LiquidText as="h2" mono>$45.2K</LiquidText>
        <LiquidText as="caption" importance={0.3}>+12.3% growth</LiquidText>
      </LiquidSurface>

      {/* Read live tokens */}
      <p>Flow speed: {tokens.flow.speed}</p>
      <p>Temperature: {tokens.temperature.value}</p>
      <p>Mood: {tokens.absorption.mood}</p>
    </div>
  );
}
```

---

## Theming

All components support theme customization:

```tsx
// Neumorphic theme
<NeuButton theme={{ accent: '#ec4899' }}>Pink Button</NeuButton>

// Living UI theme
<MorphingBlob theme={{ primaryColor: '#10b981' }} label="Go" />

// Global theme via CSS variables
:root {
  --ix-accent: #6366f1;
  --ix-bg: #0a0a0f;
  --ix-text: #e2e8f0;
}
```

---

## Requirements

| Dependency | Version | Required |
|-----------|---------|----------|
| react | ≥18.0.0 | ✅ Yes |
| react-dom | ≥18.0.0 | ✅ Yes |
| framer-motion | ≥10.0.0 | ✅ Yes |
| three | ≥0.160.0 | Optional (3D only) |
| @react-three/fiber | ≥8.0.0 | Optional (3D only) |
| @react-three/drei | ≥9.0.0 | Optional (3D only) |
| d3 | ≥7.0.0 | Optional (data viz) |

## License

MIT © [HoshMe](https://github.com/HoshMe)