@zenithbuild/core 0.1.0

package/.prettierrc

@@ -0,0 +1,21 @@
+{
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "printWidth": 80,
+  "overrides": [
+    {
+      "files": "*.zen",
+      "options": {
+        "parser": "html"
+      }
+    },
+    {
+      "files": "*.ts",
+      "options": {
+        "parser": "typescript"
+      }
+    }
+  ]
+}

package/.zen.d.ts

@@ -0,0 +1,15 @@
+// Type definitions for .zen files
+// This file tells the TypeScript linter that 'state' is a valid keyword in .zen files
+
+declare global {
+  // State declarations are valid in .zen script tags
+  // The compiler processes these at compile time
+  const state: never; // Prevent accidental use in regular TypeScript files
+}
+
+// Note: The 'state' keyword is processed by the Zenith compiler
+// and transformed into runtime code. Linter errors for 'state' in .zen files
+// are expected and can be ignored - the compiler handles them correctly.
+
+export {};
+

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Judah Sullivan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,55 @@
+
+# Zenith Framework
+
+---
+
+## README.md
+
+### What is Zenith?
+
+Zenith is an **HTML-first, web-native framework** focused on predictable rendering, persistent navigation state, and minimal JavaScript by default.
+
+Zenith treats HTML as the source of truth. Behavior is inferred through static analysis rather than developer flags like `use client` or `client-only`.
+
+The framework is currently **under active construction**. Core goals and constraints are intentionally defined early to avoid runtime complexity and hydration pitfalls seen in existing frameworks.
+
+### Core Principles (Locked In)
+
+* HTML-first authoring
+* `.zenith` file format
+* Optional `<script>` and `<style>` blocks
+* No required `<template>` wrapper
+* Automatic client/runtime detection
+* Navigation lifecycle as a first-class primitive
+* Persistent layouts across navigation
+* VDOM used intentionally (not everywhere)
+
+### What Zenith Is (Currently)
+
+* A compiler that transforms `.zenith` files into optimized runtime modules
+* A navigation-aware runtime with lifecycle hooks
+* A layout + document ownership system
+
+### What Zenith Is Not (Yet)
+
+* A finished production framework
+* A replacement for all React/Vue use-cases
+* An SSR platform (planned, not finalized)
+
+### High-Level Architecture
+
+```
+.zenith files
+   ↓
+Compiler (parse → analyze → compose → generate)
+   ↓
+Runtime (navigation + rendering)
+   ↓
+DOM
+```
+
+### Status
+
+Zenith is in the **foundation phase**. APIs may change rapidly.
+
+### [Contributing](./docs/CONTRIBUTING.md)

package/app/components/Button.zen

@@ -0,0 +1,46 @@
+<script>
+type Props = {
+  onClick?: (count: number) => void
+}
+
+state count = 0
+
+function handleClick() {
+  // Internal state mutation
+  count += 1
+  // Call parent callback prop if provided
+  if (onClick) {
+    onClick(count)
+  }
+}
+</script>
+
+<style>
+.btn {
+  padding: 8px 16px;
+  background: #007bff;
+  color: white;
+  border-radius: 4px;
+  cursor: pointer;
+  border: none;
+  margin: 4px;
+}
+
+.btn-clicked {
+  background: #0056b3;
+}
+
+.btn-large {
+  padding: 12px 24px;
+  font-size: 16px;
+}
+</style>
+
+<button
+  class="btn"
+  :class="{ 'btn-clicked': count > 0, 'btn-large': count > 5 }"
+  onclick="handleClick"
+>
+  Click Me { count }
+</button>
+

package/app/components/Link.zen

@@ -0,0 +1,11 @@
+<script>
+type Props = {
+  href: string;
+  label: string;
+}
+</script>
+
+<a href="{href}">
+  {label}
+</a>
+

package/app/layouts/Main.zen

@@ -0,0 +1,59 @@
+<html>
+<head>
+    <title>Zenith - Phase 3 Components</title>
+</head>
+<body>
+    <script>
+type Props = {
+  title?: string;
+}
+
+state title = props.title || 'My App'
+    </script>
+    <style>
+        * {
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+        }
+
+        .layout-header {
+            background: #f0f0f0;
+            padding: 16px;
+        }
+
+        .layout-footer {
+            background: #f0f0f0;
+            padding: 16px;
+            margin-top: 20px;
+        }
+
+        .layout-main {
+            min-height: calc(100vh - 120px);
+            width: 100%;
+        }
+        
+        /* Hide layout header/footer for pages that have their own full design */
+        .full-page ~ .layout-header,
+        .full-page ~ .layout-footer {
+            display: none;
+        }
+    </style>
+
+    <header class="layout-header">
+        <h1>{ title }</h1>
+    </header>
+
+    <main class="layout-main">
+        <Slot />
+    </main>
+
+    <footer class="layout-footer">Footer content here</footer>
+</body>
+
+</html>
+

package/app/pages/about.zen

@@ -0,0 +1,23 @@
+<Main title="About Us">
+  <div>
+    <h1>About Zenith</h1>
+    <p>Zenith is a modern web framework with file-based routing.</p>
+    
+    <div style="margin: 20px 0; padding: 20px; border: 1px solid #ccc; border-radius: 8px;">
+      <h3>Route Information</h3>
+      <p>This page is rendered from <code>pages/about.zen</code></p>
+      <p>Current path: <code>/about</code></p>
+    </div>
+    
+    <nav style="margin-top: 20px;">
+      <h3>Navigation</h3>
+      <ul style="list-style: none; padding: 0;">
+        <li><a href="/">Home</a></li>
+        <li><a href="/about">About (current)</a></li>
+        <li><a href="/blog">Blog</a></li>
+        <li><a href="/blog/123">Blog Post 123</a></li>
+        <li><a href="/posts/hello/world">Posts Catch-all</a></li>
+      </ul>
+    </nav>
+  </div>
+</Main>

package/app/pages/blog/[id].zen

@@ -0,0 +1,53 @@
+<script>
+// Access route params from the global route state
+const route = window.__zenith_route || { params: {} };
+const postId = route.params.id || 'unknown';
+
+// Update the display when route changes
+if (window.__zenith_router) {
+  window.__zenith_router.onRouteChange(function(newRoute) {
+    const idEl = document.getElementById('post-id');
+    if (idEl) {
+      idEl.textContent = newRoute.params.id || 'unknown';
+    }
+  });
+}
+</script>
+
+<Main title="Blog Post">
+  <div>
+    <h1>Blog Post</h1>
+    
+    <div style="margin: 20px 0; padding: 20px; background: #e8f4f8; border-radius: 8px;">
+      <h2>Post ID: <span id="post-id" data-zen-bind="postId"></span></h2>
+      <p>This is a dynamic route page!</p>
+    </div>
+    
+    <div style="margin: 20px 0; padding: 20px; border: 1px solid #ccc; border-radius: 8px;">
+      <h3>Route Information</h3>
+      <p>This page is rendered from <code>pages/blog/[id].zen</code></p>
+      <p>Route pattern: <code>/blog/:id</code></p>
+      <p>The <code>id</code> parameter is extracted from the URL.</p>
+    </div>
+    
+    <div style="margin: 20px 0;">
+      <h3>Try Different IDs</h3>
+      <ul>
+        <li><a href="/blog/1">Post 1</a></li>
+        <li><a href="/blog/42">Post 42</a></li>
+        <li><a href="/blog/hello-world">Post hello-world</a></li>
+        <li><a href="/blog/my-awesome-post">Post my-awesome-post</a></li>
+      </ul>
+    </div>
+    
+    <nav style="margin-top: 20px;">
+      <h3>Navigation</h3>
+      <ul style="list-style: none; padding: 0;">
+        <li><a href="/">Home</a></li>
+        <li><a href="/about">About</a></li>
+        <li><a href="/blog">Blog Index</a></li>
+      </ul>
+    </nav>
+  </div>
+</Main>
+

package/app/pages/blog/index.zen

@@ -0,0 +1,32 @@
+<Main title="Blog">
+  <div>
+    <h1>Blog</h1>
+    <p>Welcome to our blog! Here are some recent posts:</p>
+    
+    <div style="margin: 20px 0; padding: 20px; border: 1px solid #ccc; border-radius: 8px;">
+      <h3>Route Information</h3>
+      <p>This page is rendered from <code>pages/blog/index.zen</code></p>
+      <p>Current path: <code>/blog</code></p>
+    </div>
+    
+    <div style="margin: 20px 0;">
+      <h3>Recent Posts</h3>
+      <ul>
+        <li><a href="/blog/1">Getting Started with Zenith</a></li>
+        <li><a href="/blog/2">File-Based Routing Explained</a></li>
+        <li><a href="/blog/3">Building Components</a></li>
+        <li><a href="/blog/hello-world">Hello World Post</a></li>
+      </ul>
+    </div>
+    
+    <nav style="margin-top: 20px;">
+      <h3>Navigation</h3>
+      <ul style="list-style: none; padding: 0;">
+        <li><a href="/">Home</a></li>
+        <li><a href="/about">About</a></li>
+        <li><a href="/blog">Blog (current)</a></li>
+      </ul>
+    </nav>
+  </div>
+</Main>
+