Add Niteshift Dials SDK for runtime design prototyping

Introduces a complete design dials system that allows designers and PMs
to adjust UI parameters at runtime without code changes.

**Dials SDK (`packages/dials/`):**
- useDynamicColor: Color values with design system integration
- useDynamicSpacing: Spacing/padding/margin controls
- useDynamicVariant: Discrete choice selections
- useDynamicBoolean: Toggle/feature flag controls
- useDynamicNumber: Numeric values with min/max/step
- DialsOverlay: Compact Leva-inspired UI (Ctrl+D to toggle)
- DialsProvider: React context for dial state management
- Design manifest integration for design system tokens

**App Integration:**
- Added DialsProvider to app Providers
- Example dials on WebsitePage (metrics bar, panels, navigation)
- MetricCard component with adjustable typography dials
- TypeScript manifest at src/config/niteshift-manifest.ts

**Documentation:**
- Comprehensive CLAUDE.md section on dials usage
- Best practices for preserving original appearance
- Examples for all dial types

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

packages/dials/src/hooks/useDynamicVariant.ts

@@ -0,0 +1,29 @@
+/**
+ * React hook for creating a variant dial
+ */
+
+import { useDial } from './useDial';
+import type { VariantDialConfig } from '../types';
+
+/**
+ * Create a dynamic variant dial for discrete choices
+ *
+ * @example
+ * ```typescript
+ * const layout = useDynamicVariant('dashboard-layout', {
+ *   label: 'Layout Style',
+ *   default: 'grid',
+ *   options: ['grid', 'list', 'compact'] as const,
+ *   group: 'Dashboard'
+ * });
+ *
+ * {layout === 'grid' && <GridView />}
+ * {layout === 'list' && <ListView />}
+ * ```
+ */
+export function useDynamicVariant<T extends string>(
+  id: string,
+  config: Omit<VariantDialConfig<T>, 'type'>,
+): T {
+  return useDial<T>(id, 'variant', { ...config, type: 'variant' });
+}