rip-lang 3.13.92 → 3.13.94

package/CHANGELOG.md

@@ -386,13 +386,13 @@ Rip UI hash routing and static demo. See `packages/ui/CHANGELOG.md` v0.3.1.
 ### Rip Types — Optional Type System
 
 - **Type annotations** (`::`) on variables, parameters, and return types — compile-time only, stripped from JS output.
-- **Type aliases** (`::=`) for named types, structural types, union types.
+- **Type aliases** (`type Name =`) for named types, structural types, union types.
 - **Interfaces** with `extends` support.
 - **Enums** with runtime JS generation and `.d.ts` emission.
 - **Generics** (`<T>`) for reusable type definitions.
 - **`.d.ts` emission** — `emitTypes()` generates TypeScript declaration files directly from annotated token stream.
 - **CLI flag** — `-d`/`--dts` generates `.d.ts` files alongside compiled JS.
-- **Architecture** — All type logic consolidated in `src/types.js` (lexer sidecar), minimal changes to lexer and compiler. Added `::` and `::=` operators to lexer.
+- **Architecture** — All type logic consolidated in `src/types.js` (lexer sidecar), minimal changes to lexer and compiler. Added `::` annotations and `type` keyword to lexer.
 
 ## [3.1.0] - 2026-02-08
 

package/README.md

@@ -9,7 +9,7 @@
 </p>
 
 <p align="center">
-  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/version-3.13.92-blue.svg" alt="Version"></a>
+  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/version-3.13.94-blue.svg" alt="Version"></a>
   <a href="#zero-dependencies"><img src="https://img.shields.io/badge/dependencies-ZERO-brightgreen.svg" alt="Dependencies"></a>
   <a href="#"><img src="https://img.shields.io/badge/tests-1%2C436%2F1%2C436-brightgreen.svg" alt="Tests"></a>
   <a href="LICENSE"><img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License"></a>
@@ -40,7 +40,7 @@ get '/users/:id' ->                 # RESTful API endpoint, comma-less
 - **Modern output** — ES2022 with native classes, `?.`, `??`, modules
 - **New operators** — `!`, `!?`, `//`, `%%`, `=~`, `|>`, `.new()`, and more
 - **Reactive operators** — `:=`, `~=`, `~>` as language syntax
-- **Optional types** — `::` annotations, `::=` aliases, `.d.ts` emission
+- **Optional types** — `::` annotations, `type` aliases, `.d.ts` emission
 - **Zero dependencies** — everything included, even the parser generator
 - **Self-hosting** — `bun run parser` rebuilds the compiler from source
 
@@ -162,7 +162,7 @@ Type annotations are erased at compile time — zero runtime cost:
 def greet(name:: string):: string        # Typed function
   "Hello, #{name}!"
 
-User ::= type                            # Structural type
+type User =                              # Structural type
   id: number
   name: string
 

package/bin/rip

@@ -40,6 +40,7 @@ Options:
   -s, --sexpr         Show s-expressions (only, unless -c also specified)
   -t, --tokens        Show token stream (only, unless -c also specified)
   -v, --version       Show version number
+  --shadow            Show virtual TypeScript content (what rip check sees)
 
 Subcommands:
   rip server [flags] [app]      Start server (watches *.rip, HTTPS, mDNS)
@@ -68,6 +69,7 @@ Examples:
   rip -d example.rip            # Show type declarations
   rip -m example.rip            # Compile with inline source map
   rip -cd example.rip           # Show compiled JS and type declarations
+  rip --shadow example.rip      # Show shadow TypeScript (for type-check debugging)
   rip -q -c example.rip         # Just the JS, no headers (for piping)
   echo 'p 1 + 2' | rip          # Execute from stdin
   echo 'x = 1 + 2' | rip -c     # Compile from stdin
@@ -167,6 +169,7 @@ async function main() {
   const showCompiled = ripOptions.includes('-c') || ripOptions.includes('--compile');
   const generateDts = ripOptions.includes('-d') || ripOptions.includes('--dts');
   const generateMap = ripOptions.includes('-m') || ripOptions.includes('--map');
+  const showShadow = ripOptions.includes('--shadow');
   const quiet = ripOptions.includes('-q') || ripOptions.includes('--quiet');
 
   let inputFile = scriptFileIndex === -1 ? null : args[scriptFileIndex];
@@ -179,7 +182,7 @@ async function main() {
   }
 
   // Stdin handling — read into memory; only write temp file for the execute path
-  const hasCompileFlag = showCompiled || showTokens || showSExpr || generateDts || generateMap || outputFile;
+  const hasCompileFlag = showCompiled || showTokens || showSExpr || generateDts || generateMap || showShadow || outputFile;
   let source;
 
   if (!inputFile) {
@@ -277,6 +280,13 @@ async function main() {
       if (!quiet) console.log(`// == Type declarations == //\n`);
       console.log(result.dts);
     }
+
+    if (showShadow) {
+      const { compileForCheck } = await import('../src/typecheck.js');
+      const entry = compileForCheck(inputFile || '<stdin>', source, new Compiler());
+      if (!quiet) console.log(`// == Shadow TypeScript (what \`rip check\` sees) == //\n`);
+      console.log(entry.tsContent);
+    }
   } catch (error) {
     console.error('Compilation Error:', error.message);
     if (error.stack) console.error(error.stack);

package/docs/AGENTS.md

@@ -0,0 +1,43 @@
+# Browser Runtime — Agent Guide
+
+These HTML files use Rip's browser runtime. The bundle is an IIFE loaded with `<script defer>`, not `type="module"`, so `file://` demos work without CORS issues.
+
+## Shared-Scope Model
+
+All `<script type="text/rip">` tags, inline or external, compile and run together in one shared async IIFE.
+
+- `export` makes components visible across tags
+- `skipExports` strips those exports to plain `const` declarations in the shared scope
+
+## Runtime Script Attributes
+
+| Attribute      | Purpose                                                   |
+| -------------- | --------------------------------------------------------- |
+| `data-src`     | whitespace-separated source URLs or bundle URLs           |
+| `data-mount`   | component to mount after compilation                      |
+| `data-target`  | CSS selector for mount target                             |
+| `data-state`   | JSON stash seed                                           |
+| `data-router`  | enables history mode or `"hash"` routing                  |
+| `data-persist` | persists stash in session storage or `"local"` storage    |
+| `data-reload`  | connects to `/watch`; CSS changes can refresh styles only |
+
+## Component Mounting
+
+Every component has a static `mount(target)` helper:
+
+```coffee
+App.mount '#app'
+App.mount()
+```
+
+`data-mount` is declarative; `App.mount(...)` is the code-based alternative.
+
+## Playground and Demos
+
+- `index.html` — playground
+- `demo.html` and `charts.html` — dashboard demos
+- `sierpinski.html` — CDN demo
+- `example/index.html` and `results/index.html` — app launchers / examples
+- `ui/index.html` — widget gallery
+
+Static demos can be opened via `file://`. The playground and example app require `bun run serve`.

package/docs/RIP-LANG.md

@@ -1813,9 +1813,9 @@ count:: number = 0
 def greet(name:: string):: string
   "Hello, #{name}!"
 
-# Type aliases (::=)
-ID ::= number
-User ::= type
+# Type aliases (type keyword)
+type ID = number
+type User =
   id: number
   name: string
 

package/docs/RIP-TYPES.md

@@ -35,7 +35,7 @@ Both compile to identical JavaScript.
 
 1. [Type Sigil Reference](#type-sigil-reference)
 2. [Type Annotations (`::`)](#type-annotations-)
-3. [Type Aliases (`::=`)](#type-aliases-)
+3. [Type Aliases (`type`)](#type-aliases-type)
 4. [Structural Types](#structural-types)
 5. [Optionality Modifiers](#optionality-modifiers)
 6. [Union Types](#union-types)
@@ -58,7 +58,7 @@ Both compile to identical JavaScript.
 | Sigil | Meaning | Example |
 |-------|---------|---------|
 | `::` | Type annotation | `count:: number = 0` |
-| `::=` | Type alias | `ID ::= number` |
+| `type` | Type alias | `type ID = number` |
 | `?` | Optional value (`T \| undefined`) | `email:: string?` |
 | `??` | Nullable value (`T \| null \| undefined`) | `middle:: string??` |
 | `!` | Non-nullable (`NonNullable<T>`) | `id:: ID!` |
@@ -172,20 +172,20 @@ const doubled = __computed<number>(() => count * 2);  // ~= emits const
 
 ---
 
-## Type Aliases (`::=`)
+## Type Aliases (`type`)
 
-The `::=` operator declares a named type, mapping directly to TypeScript's
+The `type` keyword declares a named type, mapping directly to TypeScript's
 `type X = ...`.
 
 ```coffee
 # Simple aliases
-ID ::= number
-Name ::= string
+type ID = number
+type Name = string
 
 # Complex types
-UserID ::= number | string
-Callback ::= (error:: Error?, data:: any) => void
-Handler ::= (req:: Request, res:: Response) => Promise<void>
+type UserID = number | string
+type Callback = (error:: Error?, data:: any) => void
+type Handler = (req:: Request, res:: Response) => Promise<void>
 ```
 
 **Emits:**
@@ -203,16 +203,16 @@ type Handler = (req: Request, res: Response) => Promise<void>;
 
 ## Structural Types
 
-Define object shapes using the `type` keyword followed by a block:
+Define object shapes using the `type` keyword with an indented block:
 
 ```coffee
-User ::= type
+type User =
   id: number
   name: string
   email?: string
   createdAt: Date
 
-Config ::= type
+type Config =
   host: string
   port: number
   ssl?: boolean
@@ -240,7 +240,7 @@ type Config = {
 ### Nesting, Readonly, and Index Signatures
 
 ```coffee
-Response ::= type
+type Response =
   data: type
     users: User[]
     total: number
@@ -248,11 +248,11 @@ Response ::= type
     page: number
     limit: number
 
-ImmutableConfig ::= type
+type ImmutableConfig =
   readonly host: string
   readonly port: number
 
-Dictionary ::= type
+type Dictionary =
   [key: string]: any
 ```
 
@@ -361,7 +361,7 @@ In structural types, `?` after the property name makes it optional (the
 property itself may be absent), distinct from value optionality:
 
 ```coffee
-User ::= type
+type User =
   id: number
   name: string
   email?: string      # Optional property — may be absent
@@ -392,8 +392,8 @@ type User = {
 ### Inline
 
 ```coffee
-Status ::= "pending" | "active" | "done"
-Result ::= Success | Error
+type Status = "pending" | "active" | "done"
+type Result = Success | Error
 ```
 
 ### Block Form (Preferred)
@@ -401,14 +401,14 @@ Result ::= Success | Error
 Vertical form is diff-friendly and encourages domain-first modeling:
 
 ```coffee
-HttpMethod ::=
+type HttpMethod =
   | "GET"
   | "POST"
   | "PUT"
   | "PATCH"
   | "DELETE"
 
-Result ::=
+type Result =
   | { success: true, data: Data }
   | { success: false, error: Error }
 ```
@@ -437,8 +437,8 @@ numeric values.
 
 ```coffee
 # Type aliases for function signatures
-Comparator ::= (a:: any, b:: any) => number
-AsyncFetcher ::= (url:: string) => Promise<Response>
+type Comparator = (a:: any, b:: any) => number
+type AsyncFetcher = (url:: string) => Promise<Response>
 
 # Overloads
 def toHtml(content:: string):: string
@@ -481,16 +481,16 @@ class UserService {
 
 ```coffee
 # Simple generic
-Container<T> ::= type
+type Container<T> =
   value: T
 
 # Multiple parameters
-Pair<K, V> ::= type
+type Pair<K, V> =
   key: K
   value: V
 
 # With constraints
-Comparable<T extends Ordered> ::= type
+type Comparable<T extends Ordered> =
   value: T
   compareTo: (other:: T) => number
 
@@ -555,7 +555,7 @@ interface Dog extends Animal {
 }
 ```
 
-Use `::= type` by default. Use `interface` when you need declaration merging.
+Use `type Name =` by default. Use `interface` when you need declaration merging.
 
 ---
 
@@ -564,7 +564,7 @@ Use `::= type` by default. Use `interface` when you need declaration merging.
 ### Zero-Runtime (Preferred)
 
 ```coffee
-Size ::=
+type Size =
   | "xs"
   | "sm"
   | "md"
@@ -687,12 +687,12 @@ Override per-file with a directive:
 | `file.rip` | `file.d.ts` | Type declarations (when `emit` or `check`) |
 
 Type aliases and annotations are stripped from `.js` output and preserved
-in `.d.ts` output. Type-only declarations (`::=` aliases, unions) appear
+in `.d.ts` output. Type-only declarations (`type` aliases, unions) appear
 only in `.d.ts`.
 
 ```coffee
 # user.rip
-export User ::= type
+export type User =
   id: number
   name: string
 
@@ -732,7 +732,7 @@ UserSchema = z.object
   email: z.string().email()
 
 # Derive type from schema
-User ::= z.infer<typeof UserSchema>
+type User = z.infer<typeof UserSchema>
 
 # Validate at API boundary
 def createUser(req:: Request):: User
@@ -819,7 +819,7 @@ Components added `src/components.js` alongside the compiler — types add
 
 | File | Role | Scope |
 |------|------|-------|
-| `src/lexer.js` | Detect `::` and `::=` tokens, import `installTypeSupport` from `types.js` | Small inline changes |
+| `src/lexer.js` | Detect `::` and `type` keyword, import `installTypeSupport` from `types.js` | Small inline changes |
 | `src/types.js` | Lexer sidecar: `installTypeSupport(Lexer)`, `emitTypes(tokens)`, `generateEnum()` | New file, bulk of logic |
 | `src/compiler.js` | Call `emitTypes()` before parsing, wire `generateEnum()` | ~8 lines |
 | `src/grammar/grammar.rip` | Add `Enum` rule to `Expression` | 1 rule + 1 export |
@@ -878,31 +878,21 @@ unchanged — types are invisible to everything except `rewriteTypes()` and
 
 #### 1.1 Lexer: Token Detection
 
-**Add `::=` and `::` to `OPERATOR_RE`** (in `src/lexer.js`, near line 215).
-
-The current regex:
-
-```js
-let OPERATOR_RE = /^(?:<=>|[-=]>|~>|~=|:=|=!|===|!==|...)/;
-```
+**Add `::` to `OPERATOR_RE`** (in `src/lexer.js`, near line 215).
 
-Add `::=` and `::` with longest-match-first ordering (`::=` before `::`).
-Also note that `IDENTIFIER_RE` already avoids matching `:` when followed by
-`=` or `:` (the `(?![=:])` lookahead), so `::` after an identifier will fall
-through to `literalToken()` where `OPERATOR_RE` picks it up.
+The `type` keyword is contextual — it is not in `RIP_KEYWORDS` and
+remains a plain `IDENTIFIER`. The `rewriteTypes()` pass in `types.js`
+detects `IDENTIFIER("type")` at statement position followed by another
+`IDENTIFIER` and `=`, and knows a type alias follows.
+The `::` operator is added to the operator regex for type annotations.
 
-**Tag the operators** (in the operator tagging section of `literalToken()`,
-near lines 1095-1100, alongside the reactive operators):
+**Tag the annotation operator** (in the operator tagging section of
+`literalToken()`, near lines 1095-1100, alongside the reactive operators):
 
 ```js
-else if (val === '::=') tag = 'TYPE_ALIAS';
 else if (val === '::')  tag = 'TYPE_ANNOTATION';
 ```
 
-These must be checked **before** the `([-+:])\1` pattern in the regex, which
-currently matches `::` as a repeated `:`. The `::=` three-character match must
-come first.
-
 #### 1.2 Rewriter: `rewriteTypes()`
 
 **Add the pass to the rewrite pipeline** (in the `rewrite()` method, after
@@ -1052,7 +1042,7 @@ rewriteTypes() {
       return 0;  // Re-examine current position
     }
 
-    // --- Handle ::= (type aliases) ---
+    // --- Handle type keyword (type aliases) ---
     // Described in Phase 2 below
 
     return 1;
@@ -1388,9 +1378,9 @@ No changes to `classifyKeyword()` are needed — the existing fallback
 `if (RIP_KEYWORDS.has(id)) return upper` (line 618) automatically tags
 `enum` as `ENUM` and `interface` as `INTERFACE`.
 
-#### 2.2 Type Aliases (`::=`) — Unified typeText
+#### 2.2 Type Aliases (`type` keyword) — Unified typeText
 
-The `::=` operator declares a named type. The `rewriteTypes()` pass handles
+The `type` keyword declares a named type. The `rewriteTypes()` pass handles
 it by collecting the right-hand side, converting it to a TypeScript-compatible
 type string, and packaging it into a single `TYPE_DECL` marker token. All
 three forms (simple alias, structural type, block union) produce the same
@@ -1400,35 +1390,27 @@ emits `type ${name} = ${typeText};` for all of them.
 **Simple alias:**
 
 ```coffee
-ID ::= number
-UserID ::= number | string
+type ID = number
+type UserID = number | string
 ```
 
-When `rewriteTypes()` encounters `TYPE_ALIAS` (`::=`):
+When `rewriteTypes()` encounters `IDENTIFIER("type") IDENTIFIER(name) =`:
 
-1. Record the preceding `IDENTIFIER` token as the type name
+1. Record the name `IDENTIFIER` token as the type name
 2. Collect all following tokens as the type body (same boundary rules as `::`)
-3. Replace the entire sequence (`IDENTIFIER`, `TYPE_ALIAS`, type tokens) with
+3. Replace the entire sequence (`type`, name, `=`, type tokens) with
    a single `TYPE_DECL` marker token
 
 ```js
-// Inside rewriteTypes(), handling TYPE_ALIAS:
-if (tag === 'TYPE_ALIAS') {
-  let nameToken = tokens[i - 1];
+// Inside rewriteTypes(), handling contextual type keyword:
+if (tag === 'IDENTIFIER' && token[1] === 'type') {
+  // Verify statement position and name follows
+  let nameToken = tokens[i + 1];
+  if (!nameToken || nameToken[0] !== 'IDENTIFIER') return 1;
   let name = nameToken[1];
 
-  // Collect type body tokens (same boundary logic as ::)
-  let typeTokens = [];
-  let j = i + 1;
-  let depth = 0;
-  // ... same collection loop as for TYPE_ANNOTATION ...
-
-  let typeStr = /* join collected tokens */;
-
-  // Replace name + ::= + type tokens with TYPE_DECL marker
-  let declToken = gen('TYPE_DECL', name, nameToken);
-  declToken.data = { name, typeText: typeStr };
-  tokens.splice(i - 1, 2 + typeTokens.length, declToken);
+  // Must have = after name (handles generics too)
+  // ... collect type body, create TYPE_DECL marker ...
   return 0;
 }
 ```
@@ -1443,15 +1425,14 @@ the token stream** before parsing. No grammar rule is needed.
 **Structural type:**
 
 ```coffee
-User ::= type
+type User =
   id: number
   name: string
   email?: string
 ```
 
-When `rewriteTypes()` sees `TYPE_ALIAS` followed by `IDENTIFIER("type")` and
-then `INDENT`, it collects the block body and converts it to a TypeScript
-object type string:
+When `rewriteTypes()` sees `type Name =` followed by `INDENT`, it
+collects the block body and converts it to a TypeScript object type string:
 
 1. Consume the `INDENT`
 2. Collect property declarations line by line until `OUTDENT`
@@ -1481,15 +1462,15 @@ type User = {
 **Block union:**
 
 ```coffee
-HttpMethod ::=
+type HttpMethod =
   | "GET"
   | "POST"
   | "PUT"
   | "DELETE"
 ```
 
-When `rewriteTypes()` sees `TYPE_ALIAS` followed by `TERMINATOR` or `INDENT`
-with leading `|` tokens, it collects union members and joins them:
+When `rewriteTypes()` sees `type Name =` followed by `TERMINATOR` or
+`INDENT` with leading `|` tokens, it collects union members and joins them:
 
 ```js
 declToken.data = {
@@ -1672,12 +1653,12 @@ if (tag === 'IDENTIFIER' && i >= 1 && tokens[i - 1]?.[0] === 'DEF') {
 Generic parameters on type aliases work the same way:
 
 ```coffee
-Container<T> ::= type
+type Container<T> =
   value: T
 ```
 
-The `rewriteTypes()` pass detects `IDENTIFIER` + unspaced `<...>` +
-`TYPE_ALIAS` and collects the generic params before processing the `::=`.
+The `rewriteTypes()` pass detects `type` + `IDENTIFIER` + unspaced `<...>` +
+`=` and collects the generic params before processing the type body.
 
 .d.ts:
 ```ts
@@ -1823,7 +1804,7 @@ directive before tokenizing.
 #### Export of Type-Only Declarations
 
 ```coffee
-export User ::= type
+export type User =
   id: number
   name: string
 
@@ -1831,7 +1812,7 @@ export def getUser(id:: number):: User?
   db.find(id)
 ```
 
-The rewriter detects `EXPORT` before `::=` sequences and marks the
+The rewriter detects `EXPORT` before `type` sequences and marks the
 `TYPE_DECL` marker accordingly. The `emitTypes()` function prepends
 `export` to the declaration. No grammar rule is involved for type-only
 exports — the `TYPE_DECL` marker is removed before parsing.
@@ -1864,16 +1845,16 @@ Each row is a test case. Verify both .js and .d.ts output.
 | 4 | `doubled:: number ~= x * 2` | `const doubled = __computed(...)` | `declare const doubled: Computed<number>;` |
 | 5 | `def f(a:: number):: string` | `function f(a) { ... }` | `declare function f(a: number): string;` |
 | 6 | `(x:: number):: number -> x + 1` | `(x) => x + 1` | `(x: number) => number` |
-| 7 | `ID ::= number` | *(empty)* | `type ID = number;` |
-| 8 | `User ::= type` (+ block) | *(empty)* | `type User = { id: number; ... };` |
-| 9 | `Status ::= \| "a" \| "b"` | *(empty)* | `type Status = "a" \| "b";` |
+| 7 | `type ID = number` | *(empty)* | `type ID = number;` |
+| 8 | `type User =` (+ block) | *(empty)* | `type User = { id: number; ... };` |
+| 9 | `type Status = \| "a" \| "b"` | *(empty)* | `type Status = "a" \| "b";` |
 | 10 | `interface Foo` (+ block) | *(empty)* | `interface Foo { ... }` |
 | 11 | `enum Code` (+ block) | `const Code = { ... }` | `enum Code { ... }` |
 | 12 | `items:: Map<string, number> = x` | `items = x` | `let items: Map<string, number>;` |
 | 13 | `email:: string?` | — | `let email: string \| undefined;` |
 | 14 | `id:: ID!` | — | `let id: NonNullable<ID>;` |
 | 15 | `def identity<T>(v:: T):: T` | `function identity(v) { ... }` | `declare function identity<T>(v: T): T;` |
-| 16 | `export User ::= type` (+ block) | *(empty)* | `export type User = { ... };` |
+| 16 | `export type User =` (+ block) | *(empty)* | `export type User = { ... };` |
 | 17 | `export def f(x:: number):: number` | `export function f(x) { ... }` | `export function f(x: number): number;` |
 
 ---
@@ -1926,9 +1907,9 @@ The type system uses a two-phase approach:
 
 | Rip Input | .d.ts Output |
 |-----------|-------------|
-| `Name ::= type { id: number }` | `type Name = { id: number; };` |
-| `Name ::= number` | `type Name = number;` |
-| Block union `::= \| "a" \| "b"` | `type Name = "a" \| "b";` |
+| `type Name =` (+ block `id: number`) | `type Name = { id: number; };` |
+| `type Name = number` | `type Name = number;` |
+| Block union `type Name = \| "a" \| "b"` | `type Name = "a" \| "b";` |
 | `interface Name { ... }` | `interface Name { ... }` |
 | `interface X extends Y` | `interface X extends Y { ... }` |
 | Function types `read: => string` | `read: () => string` |

package/docs/charts.html

@@ -869,21 +869,21 @@ export Dashboard = component
 
     p class: 'section', "Core Charts"
     .grid
-      ChartCard title: 'Monthly Revenue',               subtitle: 'Total recurring revenue by month',              chartId: 'line'
-      ChartCard title: 'Revenue by Product',             subtitle: 'Stacked area breakdown across product lines',   chartId: 'area'
-      ChartCard title: 'Quarterly Revenue',              subtitle: 'Quarter-over-quarter comparison',               chartId: 'bar'
-      ChartCard title: 'Revenue by Product × Quarter', subtitle: 'Stacked bar with product breakdown',         chartId: 'stackedBar'
-      ChartCard title: 'Revenue & Margin',               subtitle: 'Revenue bars with gross margin % line overlay', chartId: 'combo'
+      ChartCard title: 'Monthly Revenue',                subtitle: 'Total recurring revenue by month',                 chartId: 'line'
+      ChartCard title: 'Revenue by Product',             subtitle: 'Stacked area breakdown across product lines',      chartId: 'area'
+      ChartCard title: 'Quarterly Revenue',              subtitle: 'Quarter-over-quarter comparison',                  chartId: 'bar'
+      ChartCard title: 'Revenue by Product × Quarter',   subtitle: 'Stacked bar with product breakdown',               chartId: 'stackedBar'
+      ChartCard title: 'Revenue & Margin',               subtitle: 'Revenue bars with gross margin % line overlay',    chartId: 'combo'
       ChartCard title: 'Revenue & Growth Rate',          subtitle: 'Dual-axis: revenue (left) and YoY growth (right)', chartId: 'multiAxis'
-      ChartCard title: 'Customers by Segment',           subtitle: 'Distribution across customer tiers',            chartId: 'pie'
-      ChartCard title: 'Deal Size vs. Close Rate',       subtitle: 'Each bubble represents a sales rep',            chartId: 'scatter'
-      ChartCard title: 'Feature Usage Heatmap',          subtitle: 'Active sessions by day of week and hour',       chartId: 'heatmap'
-      ChartCard title: 'Sales Pipeline',                 subtitle: 'Conversion through funnel stages',              chartId: 'funnel'
-      ChartCard title: 'Customer Acquisition Flow',      subtitle: 'Channel attribution from source to conversion', chartId: 'sankey', wide: true
+      ChartCard title: 'Customers by Segment',           subtitle: 'Distribution across customer tiers',               chartId: 'pie'
+      ChartCard title: 'Deal Size vs. Close Rate',       subtitle: 'Each bubble represents a sales rep',               chartId: 'scatter'
+      ChartCard title: 'Feature Usage Heatmap',          subtitle: 'Active sessions by day of week and hour',          chartId: 'heatmap'
+      ChartCard title: 'Sales Pipeline',                 subtitle: 'Conversion through funnel stages',                 chartId: 'funnel'
+      ChartCard title: 'Customer Acquisition Flow',      subtitle: 'Channel attribution from source to conversion',    chartId: 'sankey', wide: true
 
     p class: 'section', "Geographic"
     .grid
-      ChartCard title: 'Revenue by State',    subtitle: 'Annual revenue across US states',               chartId: 'choropleth', tall: true
+      ChartCard title: 'Revenue by State',    subtitle: 'Annual revenue across US states',                chartId: 'choropleth', tall: true
       ChartCard title: 'Customer Locations',  subtitle: 'Purchase origins clustered by region (k-means)', chartId: 'scatterMap', tall: true
 
     p class: 'section', "KPI Gauges"
@@ -904,10 +904,10 @@ export Dashboard = component
     p class: 'section', "Analytical"
     .grid
       ChartCard title: 'Product Comparison',       subtitle: 'Multi-metric radar across product lines',          chartId: 'radar'
-      ChartCard title: 'Revenue Bridge',           subtitle: 'Waterfall from Q1 baseline through Q4',           chartId: 'waterfall'
-      ChartCard title: 'Deal Size Distribution',   subtitle: 'Boxplot of closed deal values by quarter ($k)',   chartId: 'boxplot'
-      ChartCard title: 'Product Metrics',          subtitle: 'Parallel coordinates across key dimensions',      chartId: 'parallel'
-      ChartCard title: 'Daily Platform Activity',  subtitle: 'Login volume over the past year',                 chartId: 'calendar', wide: true
+      ChartCard title: 'Revenue Bridge',           subtitle: 'Waterfall from Q1 baseline through Q4',            chartId: 'waterfall'
+      ChartCard title: 'Deal Size Distribution',   subtitle: 'Boxplot of closed deal values by quarter ($k)',    chartId: 'boxplot'
+      ChartCard title: 'Product Metrics',          subtitle: 'Parallel coordinates across key dimensions',       chartId: 'parallel'
+      ChartCard title: 'Daily Platform Activity',  subtitle: 'Login volume over the past year',                  chartId: 'calendar', wide: true
 
     p class: 'section', "Additional Chart Types"
     .grid