Initial commit

docs/dial/overview.md

@@ -0,0 +1,60 @@
+# Dial: A Schema-Driven Menu System
+
+## Overview
+
+Dial represents a system that generates user interface controls automatically from TypeScript interfaces using JSDoc annotations. This approach eliminates manual UI creation by defining control properties directly in code comments.
+
+## Core Annotation Syntax
+
+The system uses JSDoc comments to specify UI behavior:
+
+**Grouping Controls:**
+- `@dial <grouping>` organizes related properties
+- `@dial <grouping> @dial-no-wrap` applies group-level settings
+
+**Property Configuration:**
+- `@dial-<property> <value>` sets control attributes using hyphen notation
+- `@dial-col-<n>` arranges elements in n-column layouts
+- `@dial-dtype <type>` specifies data types (vector3, euler, boolean, int, etc.)
+- `@dial-min <number>` and `@dial-max <number>` establish value bounds
+- `@dial-step <number>` defines increment sizes
+- `@dial-options [...]` provides preset values
+- `@dial-icon <name>` assigns Lucide icon names
+- `@dial-label <text>` customizes property display names
+- `@dial-ignore` excludes properties from schema generation
+
+## Example Implementation
+
+A TypeScript interface can be annotated to define a 3D box geometry with transformation controls:
+
+```typescript
+interface ExampleBoxProps {
+  args: ExampleBoxArgs;
+  position: number[] | null;
+  rotation: number[] | null;
+  scale: number[] | null;
+  hide: boolean;
+  alphaTest: boolean;
+  depthTest: boolean;
+  renderOrder: number;
+  _internalState?: any;
+}
+```
+
+Annotations specify constraints, groupings, and visual representation for each property.
+
+## Key Features
+
+**Schema-Driven Architecture:** UI controls generate automatically from annotated TypeScript code, eliminating manual interface creation.
+
+**Grouped Layout System:** Properties organize automatically into sections based on their grouping annotations.
+
+**Integrated State Management:** Built-in state tracking with value change callbacks enables seamless application integration.
+
+## Next Steps
+
+- **Tutorial:** Step-by-step guide for using dial-cli
+- **Input Types:** Complete reference of supported input types
+- **Controlled Dials:** Advanced usage patterns
+- **API Notes:** Detailed API reference
+- **CLI Details:** Advanced command-line options