riteway

Riteway enforces a layered architecture to manage module dependencies. The hierarchy flows from high-level UI components down to low-level types. When organizing code, follow this dependency direction:

types ← services ← plugins ← components

Key Dependency Constraints:

• Components may depend on plugins (specifically Observe<Data> and void actions) and types. They must never depend on services.
• Plugins may depend on services, types, and other plugins.
• Services may depend on other services and types. They must never depend on components or plugins.
• Types may only depend on other types. They must never depend on any other layer.

Use these rules when creating new folders, moving files, or adding imports to ensure architectural integrity.

DependencyRules [
  { layer: "components", mayDependOn: ["plugins (Observe<Data>, void actions)", "types"], mustNotDependOn: ["services"] },
  { layer: "plugins", mayDependOn: ["services", "types", "other plugins"], mustNotDependOn: [] },
  { layer: "services", mayDependOn: ["other services", "types"], mustNotDependOn: ["components", "plugins"] },
  { layer: "types", mayDependOn: ["other types"], mustNotDependOn: ["everything else"] }
]

To maintain UI efficiency and predictable styling, every component must be classified as either a TerminalComponent or a LayoutComponent. There is no overlap between these two types.

Terminal Components

Terminal components are the leaves of the component tree. They are responsible for rendering actual UI elements and their visual appearance.

• Renders: Own UI (e.g., buttons, inputs, cards, text).
• Styling: Contains CSS for appearance.
• Constraint: Must never contain any external margin.

Layout Components

Layout components are structural containers used to organize other components.

• Renders: Does not render any UI themselves; composed of other layout or terminal components only.
• Responsibility: Manages interior gaps between children.
• Constraint: Must never contain any external margin.
• Styling: Should use standard layout tokens and should not require custom CSS 90% of the time.
• Performance: Should generally contain no business logic and should never re-render. This keeps re-renders localized to the terminal levels.
• Exceptions: Layout components that explicitly manage layout-specific state (e.g., animating, tabs, accordions) may contain logic and re-render.

TerminalComponent {
  renders: "own UI (buttons, inputs, cards, text, etc.)"
  contains: "CSS for appearance"
  never: "contain any external margin"
  role: "leaves of the component tree; own visual styling and content"
}

LayoutComponent {
  doesNotRender: "any UI themselves"
  composedOf: "other layout or terminal components only"
  responsibleFor: "interior gaps between children"
  never: "contain any external margin"
  css: "Should not need CSS 90% of the time or more — use standard layout tokens"
  reRender: "Generally no business logic; should never re-render — keeps re-renders at terminal levels"
  exception: "Some layout components explicitly manage state (animating, tabs, accordions) — those have logic and may re-render"
}

After running /aidd-namespace on a file like src/types/point.ts, the tool generates a directory structure that follows this pattern:

1. The Namespace Entry Point: src/types/point/point.ts contains the main type definitions and re-exports everything from public.js under the namespace name.
2. The Public Aggregator: src/types/point/public.ts re-exports all logic from the individual implementation files.
3. Individual Implementation Files: Each exported member (e.g., length.ts, add.ts) is moved to its own file for better modularity.

// Resulting structure for src/types/point.ts:

// src/types/point/point.ts
export type Point = { x: number, y: number };
export * as Point from "./public.js";

// src/types/point/public.ts
export * from "./length.js";
export * from "./add.js";

// src/types/point/length.ts
export const length = ({ x, y }: Point) => Math.hypot(x, y);

// src/types/point/add.ts
export const add = ({ x: x1, y: y1 }: Point, { x: x2, y: y2 }: Point): Point => ({ x: x1 + x2, y: y1 + y2 });