@ynor/ynor 1.0.2 → 1.0.3

package/README.md

@@ -14,3 +14,98 @@ A lightweight, next-generation JavaScript extension framework inspired by Svelte
 - **🌐 Cross-browser**: Works in all modern browsers
 
 ## Project Structure
+
+
+`📁 ynor/
+├── 📁 .svelte-kit/
+│   ├── 📁 generated/
+│   │   ├── 📁 client/
+│   │   │   ├── 📁 nodes/
+│   │   │   │   ├── 📄 0.js [.js] (1 lines)
+│   │   │   │   ├── 📄 1.js [.js] (1 lines)
+│   │   │   │   └── 📄 2.js [.js] (1 lines)
+│   │   │   ├── 📄 app.js [.js] (39 lines)
+│   │   │   └── 📄 matchers.js [.js] (1 lines)
+│   │   ├── 📁 server/
+│   │   │   └── 📄 internal.js [.js] (56 lines)
+│   │   ├── 📁 shared/
+│   │   │   └── 📄 error-template.js [.js] (1 lines)
+│   │   ├── 📄 root.js [.js] (3 lines)
+│   │   └── 📄 root.svelte [.svelte] (68 lines)
+│   ├── 📁 types/
+│   │   ├── 📁 src/
+│   │   │   └── 📁 routes/
+│   │   │       └── 📄 $types.d.ts [.ts] (23 lines)
+│   │   └── 📄 route_meta_data.json [.json] (3 lines)
+│   ├── 📄 ambient.d.ts [.ts] (361 lines)
+│   ├── 📄 env.d.ts [.ts] (1 lines)
+│   ├── 📄 non-ambient.d.ts [.ts] (43 lines)
+│   └── 📄 tsconfig.json [.json] (56 lines)
+├── 📁 .vscode/
+│   └── 📄 extensions.json [.json] (4 lines)
+├── 📁 scripts/
+│   ├── 📄 gen_readme.js [.js] (473 lines)
+│   ├── 📄 gen_tree.cjs [.cjs]
+│   ├── 📄 git_init.js [.js] (508 lines)
+│   └── 📄 git_update.js [.js] (565 lines)
+├── 📁 src/
+│   ├── 📁 lib/
+│   │   ├── 📁 assets/
+│   │   │   ├── 📄 favicon.ico [.ico]
+│   │   │   └── 📄 logo.png [.png]
+│   │   ├── 📁 components/
+│   │   │   ├── 📄 Counter.ynor [.ynor]
+│   │   │   ├── 📄 MyComponent.ynor [.ynor]
+│   │   │   └── 📄 TodoList.ynor [.ynor]
+│   │   └── 📁 core/
+│   │       ├── 📄 compiler.d.ts [.ts] (294 lines)
+│   │       ├── 📄 compiler.js [.js] (842 lines)
+│   │       ├── 📄 index.js [.js] (43 lines)
+│   │       ├── 📄 plugin.js [.js] (109 lines)
+│   │       └── 📄 runtime.js [.js] (102 lines)
+│   ├── 📁 routes/
+│   │   ├── 📄 +layout.svelte [.svelte] (22 lines)
+│   │   └── 📄 +page.svelte [.svelte] (54 lines)
+│   ├── 📁 styles/
+│   │   └── 📄 global.css [.css] (57 lines)
+│   ├── 📄 app.d.ts [.ts] (14 lines)
+│   ├── 📄 App.ynor [.ynor]
+│   └── 📄 main.js [.js] (28 lines)
+├── 📁 static/
+│   ├── 📄 favicon.ico [.ico]
+│   ├── 📄 logo.png [.png]
+│   └── 📄 robots.txt [.txt] (4 lines)
+├── 📄 .gitignore [(no extension)]
+├── 📄 .npmrc [(no extension)]
+├── 📄 index.html [.html] (30 lines)
+├── 📄 jsconfig.json [.json] (20 lines)
+├── 📄 package.json [.json] (53 lines)
+├── 📄 README.md [.md] (17 lines)
+├── 📄 svelte.config.js [.js] (15 lines)
+├── 📄 vite.config.js [.js] (27 lines)
+└── 📄 ynor.config.js [.js] (23 lines)
+
+📊 SUMMARY
+===========
+Total Directories: 19
+Total Files: 48
+Total Lines of Code: 3962
+
+📈 FILE EXTENSIONS
+==================
+.js: 19 files
+.ts: 6 files
+.json: 5 files
+.ynor: 4 files
+.svelte: 3 files
+no extension: 2 files
+.ico: 2 files
+.png: 2 files
+.html: 1 file
+.md: 1 file
+.cjs: 1 file
+.css: 1 file
+.txt: 1 file
+
+Generated: 29/06/2026, 11:57:18 am
+`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ynor/ynor",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "⚡ Lightweight next-gen JS extension framework like Svelte",
   "type": "module",
   "main": "./src/lib/core/index.js",
@@ -26,7 +26,7 @@
     "ynor": "./bin/ynor.js"
   },
   "files": [
-    "src/lib/core/",
+    "src/",
     "bin/",
     "README.md",
     "LICENSE",

package/src/App.ynor

@@ -0,0 +1,67 @@
+<!-- src/App.ynor -->
+<script>
+  // Define variables on 'this'
+  this.count = 0;
+  
+  // Define function - make sure it's properly bound
+  this.increment = function() {
+    this.count = this.count + 1;
+    console.log('Count:', this.count);
+    this._update();
+  };
+  
+  console.log('🔧 App.ynor script loaded');
+  console.log('🔧 this.increment:', this.increment);
+</script>
+
+<style>
+  .app {
+    padding: 40px;
+    text-align: center;
+    font-family: system-ui, sans-serif;
+    background: white;
+    border-radius: 20px;
+    max-width: 600px;
+    margin: 20px auto;
+    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
+  }
+  .app h1 {
+    color: #4f46e5;
+    font-size: 2.5rem;
+    margin-bottom: 10px;
+  }
+  .app p {
+    font-size: 1.2rem;
+    color: #1e293b;
+  }
+  .count {
+    font-size: 3rem;
+    font-weight: 700;
+    color: #4f46e5;
+    margin: 20px 0;
+  }
+  .app button {
+    padding: 10px 24px;
+    border: none;
+    border-radius: 40px;
+    background: #4f46e5;
+    color: white;
+    font-weight: 600;
+    cursor: pointer;
+    font-size: 16px;
+    transition: all 0.2s;
+  }
+  .app button:hover {
+    background: #4338ca;
+    transform: scale(1.02);
+  }
+</style>
+
+<template>
+  <div class="app">
+    <h1>⚡ .ynor</h1>
+    <p>Framework is working!</p>
+    <div class="count">{count}</div>
+    <button on:click={increment}>Increment</button>
+  </div>
+</template>

package/src/app.d.ts

@@ -0,0 +1,13 @@
+// See https://svelte.dev/docs/kit/types#app.d.ts
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {};

package/src/lib/components/Counter.ynor

@@ -0,0 +1,117 @@
+<!-- src/components/Counter.ynor -->
+<script>
+  let count = 0;
+  let step = 1;
+  
+  // Reactive statement
+  $: console.log(`Count is now: ${count}`);
+  
+  function increment() {
+    count += step;
+  }
+  
+  function decrement() {
+    count -= step;
+  }
+  
+  function reset() {
+    count = 0;
+  }
+  
+  export function setCount(value) {
+    count = value;
+  }
+</script>
+
+<style>
+  .counter-container {
+    background: white;
+    border-radius: 20px;
+    padding: 30px;
+    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
+    text-align: center;
+  }
+  
+  .counter-number {
+    font-size: 4rem;
+    font-weight: 700;
+    margin: 20px 0;
+    color: #4f46e5;
+  }
+  
+  .counter-controls {
+    display: flex;
+    gap: 12px;
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+  
+  .counter-controls button {
+    padding: 10px 24px;
+    border: none;
+    border-radius: 40px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+  
+  .btn-primary {
+    background: #4f46e5;
+    color: white;
+    box-shadow: 0 4px 12px rgba(79,70,229,0.25);
+  }
+  
+  .btn-secondary {
+    background: #e2e8f0;
+    color: #1e293b;
+  }
+  
+  .btn-primary:hover, .btn-secondary:hover {
+    transform: scale(1.05);
+  }
+  
+  .step-control {
+    margin-top: 20px;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    justify-content: center;
+  }
+  
+  .step-control input[type="range"] {
+    width: 200px;
+  }
+  
+  .badge {
+    background: #eef2ff;
+    color: #4f46e5;
+    padding: 4px 16px;
+    border-radius: 40px;
+    font-size: 0.9rem;
+    font-weight: 500;
+  }
+</style>
+
+<template>
+  <div class="counter-container">
+    <h2>Counter</h2>
+    <div class="counter-number">{count}</div>
+    
+    <div class="counter-controls">
+      <button class="btn-secondary" on:click={decrement}>-</button>
+      <button class="btn-primary" on:click={increment}>+</button>
+      <button class="btn-secondary" on:click={reset}>Reset</button>
+    </div>
+    
+    <div class="step-control">
+      <span>Step:</span>
+      <input 
+        type="range"
+        min="1"
+        max="10"
+        bind:value={step}
+      />
+      <span class="badge">+{step}</span>
+    </div>
+  </div>
+</template>

package/src/lib/components/MyComponent.ynor

@@ -0,0 +1,24 @@
+<!-- src/components/MyComponent.ynor -->
+<script>
+  let count = 0;
+  $: console.log(`Count: ${count}`);
+  
+  function increment() {
+    count++;
+  }
+</script>
+
+<style>
+  .my-component {
+    padding: 20px;
+    background: white;
+    border-radius: 10px;
+  }
+</style>
+
+<template>
+  <div class="my-component">
+    <h2>Count: {count}</h2>
+    <button on:click={increment}>+</button>
+  </div>
+</template>

package/src/lib/components/TodoList.ynor

@@ -0,0 +1,241 @@
+<!-- src/components/TodoList.ynor -->
+<script>
+  import { store } from '../lib/runtime.js';
+  
+  let newTodo = '';
+  let filter = 'all';
+  let todos = [];
+  
+  // Get store
+  const todosStore = store('todos', []);
+  
+  // Subscribe to store
+  todosStore.subscribe(value => {
+    todos = value;
+  });
+  
+  function addTodo() {
+    if (!newTodo.trim()) return;
+    const newTodos = [...todos, { 
+      id: Date.now(), 
+      text: newTodo.trim(), 
+      done: false 
+    }];
+    todosStore.set(newTodos);
+    newTodo = '';
+  }
+  
+  function toggleTodo(id) {
+    const newTodos = todos.map(t => 
+      t.id === id ? { ...t, done: !t.done } : t
+    );
+    todosStore.set(newTodos);
+  }
+  
+  function deleteTodo(id) {
+    const newTodos = todos.filter(t => t.id !== id);
+    todosStore.set(newTodos);
+  }
+  
+  function getFilteredTodos() {
+    if (filter === 'active') return todos.filter(t => !t.done);
+    if (filter === 'done') return todos.filter(t => t.done);
+    return todos;
+  }
+  
+  function getStats() {
+    const total = todos.length;
+    const done = todos.filter(t => t.done).length;
+    return { total, done };
+  }
+</script>
+
+<style>
+  .todo-container {
+    background: white;
+    border-radius: 20px;
+    padding: 30px;
+    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
+  }
+  
+  .todo-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+  }
+  
+  .todo-stats {
+    color: #64748b;
+    font-size: 0.9rem;
+  }
+  
+  .todo-input {
+    display: flex;
+    gap: 12px;
+    margin-bottom: 20px;
+  }
+  
+  .todo-input input {
+    flex: 1;
+    padding: 10px 18px;
+    border: 2px solid #e2e8f0;
+    border-radius: 40px;
+    font-size: 1rem;
+    outline: none;
+    transition: all 0.2s;
+  }
+  
+  .todo-input input:focus {
+    border-color: #4f46e5;
+    box-shadow: 0 0 0 4px rgba(79,70,229,0.15);
+  }
+  
+  .todo-input button {
+    padding: 10px 24px;
+    border: none;
+    border-radius: 40px;
+    background: #4f46e5;
+    color: white;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+  
+  .todo-input button:hover {
+    background: #4338ca;
+    transform: scale(1.02);
+  }
+  
+  .todo-filters {
+    display: flex;
+    gap: 8px;
+    margin-bottom: 20px;
+  }
+  
+  .todo-filters button {
+    padding: 6px 16px;
+    border: none;
+    border-radius: 40px;
+    background: #e2e8f0;
+    color: #1e293b;
+    cursor: pointer;
+    transition: all 0.2s;
+    font-size: 0.9rem;
+  }
+  
+  .todo-filters button.active {
+    background: #4f46e5;
+    color: white;
+  }
+  
+  .todo-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 0;
+    border-bottom: 1px solid #f1f5f9;
+  }
+  
+  .todo-item:last-child {
+    border-bottom: none;
+  }
+  
+  .todo-item-left {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+  
+  .todo-item input[type="checkbox"] {
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+  }
+  
+  .todo-item .todo-text {
+    font-size: 1rem;
+  }
+  
+  .todo-item .todo-text.done {
+    text-decoration: line-through;
+    color: #94a3b8;
+  }
+  
+  .todo-item .delete-btn {
+    padding: 4px 12px;
+    border: none;
+    border-radius: 40px;
+    background: #fee2e2;
+    color: #dc2626;
+    cursor: pointer;
+    transition: all 0.2s;
+    font-size: 0.8rem;
+  }
+  
+  .todo-item .delete-btn:hover {
+    background: #fecaca;
+  }
+  
+  .todo-empty {
+    text-align: center;
+    color: #94a3b8;
+    padding: 20px 0;
+  }
+</style>
+
+<template>
+  <div class="todo-container">
+    <div class="todo-header">
+      <h2>Todo List</h2>
+      <span class="todo-stats">{getStats().done} / {getStats().total} done</span>
+    </div>
+    
+    <div class="todo-input">
+      <input 
+        type="text"
+        placeholder="Add a new task..."
+        bind:value={newTodo}
+        on:keydown={(e) => e.key === 'Enter' && addTodo()}
+      />
+      <button on:click={addTodo}>Add</button>
+    </div>
+    
+    <div class="todo-filters">
+      {#each ['all', 'active', 'done'] as f}
+        <button 
+          class:active={filter === f}
+          on:click={() => filter = f}
+        >
+          {f.toUpperCase()}
+        </button>
+      {/each}
+    </div>
+    
+    <div class="todo-list">
+      {#each getFilteredTodos() as todo}
+        <div class="todo-item">
+          <div class="todo-item-left">
+            <input 
+              type="checkbox"
+              checked={todo.done}
+              on:change={() => toggleTodo(todo.id)}
+            />
+            <span class:done={todo.done} class="todo-text">
+              {todo.text}
+            </span>
+          </div>
+          <button class="delete-btn" on:click={() => deleteTodo(todo.id)}>
+            ✕
+          </button>
+        </div>
+      {/each}
+      
+      {#if getFilteredTodos().length === 0}
+        <div class="todo-empty">
+          No tasks in this filter
+        </div>
+      {/if}
+    </div>
+  </div>
+</template>

package/src/lib/core/index.js

@@ -3,7 +3,7 @@ import { VERSION, YnorCompiler, AST } from './compiler.js';
 import { YnorRuntime, YnorComponent, runtime, store, mount } from './runtime.js';
 import { ynorPlugin } from './plugin.js';
 
-// Error handling utilities
+// Error handling utilities - FIXED PATH
 import {
   YnorError,
   YnorCompilerError,
@@ -14,10 +14,7 @@ import {
   warn,
   info,
   success
-} from './utils/errors.js';
-
-// CLI utilities
-import { createProject, buildProject, devProject } from './cli.js';
+} from '../utils/errors.js';  // Changed from './src/utils/errors.js' to '../utils/errors.js'
 
 // Export everything
 export {
@@ -38,10 +35,7 @@ export {
   handleError,
   warn,
   info,
-  success,
-  createProject,
-  buildProject,
-  devProject
+  success
 };
 
 // Default export

package/src/main.js

@@ -0,0 +1,44 @@
+// src/main.js
+import { runtime, mount, store } from './lib/core/runtime.js';
+import App from './App.ynor';
+
+console.log('🚀 Starting .ynor application...');
+
+// Initialize stores (not using export inside try)
+const todos = store('todos', [
+  { id: 1, text: 'Learn .ynor', done: true },
+  { id: 2, text: 'Build something great', done: false },
+  { id: 3, text: 'Share with community', done: false }
+]);
+
+console.log('📦 Store initialized:', todos.get());
+
+// Mount app with error handling
+try {
+  const app = mount(App, document.getElementById('app'), {
+    todos: todos
+  });
+
+  console.log('⚡ .ynor framework initialized');
+  console.log('📁 Components loaded:', Array.from(runtime.components.keys()));
+
+  // Export for HMR
+  if (import.meta.hot) {
+    import.meta.hot.accept('./App.ynor', ({ default: NewApp }) => {
+      app.$destroy();
+      mount(NewApp, document.getElementById('app'), { todos });
+    });
+  }
+} catch (error) {
+  console.error('❌ Error starting .ynor application:', error);
+  document.getElementById('app').innerHTML = `
+    <div style="color: red; padding: 20px; font-family: system-ui;">
+      <h2>Error loading .ynor app</h2>
+      <pre style="background: #f1f1f1; padding: 10px; border-radius: 5px; overflow: auto;">${error.message}</pre>
+      <p>Check console for details</p>
+    </div>
+  `;
+}
+
+// Export todos for use in other modules if needed
+export { todos };

package/src/routes/+layout.svelte

@@ -0,0 +1,22 @@
+<!-- src/routes/+layout.svelte -->
+<script>
+  import '../styles/global.css';
+</script>
+
+<slot />
+
+<style>
+  /* Global layout styles */
+  :global(*) {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+  
+  :global(body) {
+    font-family: system-ui, -apple-system, sans-serif;
+    background: #f5f7fb;
+    color: #1e293b;
+    line-height: 1.6;
+  }
+</style>

package/src/routes/+page.svelte

@@ -0,0 +1,54 @@
+<!-- src/routes/+page.svelte -->
+<script>
+  import { onMount } from 'svelte';
+  import { mount } from '$lib/core/runtime.js';
+  import Counter from '$lib/components/Counter.ynor';
+  import TodoList from '$lib/components/TodoList.ynor';
+  
+  let counterInstance;
+  let todoInstance;
+  
+  onMount(() => {
+    // Mount .ynor components in SvelteKit
+    const counterContainer = document.getElementById('counter-container');
+    const todoContainer = document.getElementById('todo-container');
+    
+    if (counterContainer) {
+      counterInstance = mount(Counter, counterContainer);
+    }
+    
+    if (todoContainer) {
+      todoInstance = mount(TodoList, todoContainer);
+    }
+    
+    return () => {
+      if (counterInstance) counterInstance.$destroy();
+      if (todoInstance) todoInstance.$destroy();
+    };
+  });
+</script>
+
+<div class="container">
+  <h1>Welcome to .ynor + SvelteKit</h1>
+  
+  <div id="counter-container"></div>
+  <div id="todo-container"></div>
+</div>
+
+<style>
+  .container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+  }
+  
+  h1 {
+    color: #4f46e5;
+    margin-bottom: 30px;
+  }
+  
+  #counter-container,
+  #todo-container {
+    margin: 20px 0;
+  }
+</style>

package/src/styles/global.css

@@ -0,0 +1,57 @@
+/* src/styles/global.css */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: system-ui, -apple-system, sans-serif;
+  background: #f5f7fb;
+  color: #1e293b;
+  line-height: 1.6;
+}
+
+#app {
+  min-height: 100vh;
+  padding: 20px;
+}
+
+/* Utility classes */
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.mt-4 {
+  margin-top: 2rem;
+}
+
+.mb-4 {
+  margin-bottom: 2rem;
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8;
+}

package/src/utils/errors.js

@@ -0,0 +1,115 @@
+// src/utils/errors.js
+import chalk from 'chalk';
+
+export class YnorError extends Error {
+  constructor(message, code, details = {}) {
+    super(message);
+    this.name = 'YnorError';
+    this.code = code;
+    this.details = details;
+    Error.captureStackTrace(this, this.constructor);
+  }
+
+  toString() {
+    return `${chalk.red('❌')} ${chalk.bold(this.code)}: ${this.message}`;
+  }
+}
+
+export class YnorCompilerError extends YnorError {
+  constructor(message, details = {}) {
+    super(message, 'COMPILER_ERROR', details);
+    this.name = 'YnorCompilerError';
+  }
+}
+
+export class YnorRuntimeError extends YnorError {
+  constructor(message, details = {}) {
+    super(message, 'RUNTIME_ERROR', details);
+    this.name = 'YnorRuntimeError';
+  }
+}
+
+export class YnorTemplateError extends YnorError {
+  constructor(message, details = {}) {
+    super(message, 'TEMPLATE_ERROR', details);
+    this.name = 'YnorTemplateError';
+  }
+}
+
+export class YnorComponentError extends YnorError {
+  constructor(message, details = {}) {
+    super(message, 'COMPONENT_ERROR', details);
+    this.name = 'YnorComponentError';
+  }
+}
+
+export function handleError(error, context = {}) {
+  console.error('');
+  if (error instanceof YnorError) {
+    console.error(chalk.red('  ⚠️  ') + chalk.bold(error.code));
+    console.error(chalk.dim('  ──────────────────────────────'));
+    console.error('  ' + error.message);
+    
+    if (error.details && Object.keys(error.details).length > 0) {
+      console.error(chalk.dim('\n  📋 Details:'));
+      Object.entries(error.details).forEach(([key, value]) => {
+        console.error(`    ${chalk.dim(key)}: ${value}`);
+      });
+    }
+    
+    if (context.file) {
+      console.error(chalk.dim(`\n  📁 File: ${context.file}`));
+    }
+    if (context.line) {
+      console.error(chalk.dim(`  📍 Line: ${context.line}`));
+    }
+  } else {
+    console.error(chalk.red('  ❌  ') + chalk.bold('Unexpected Error'));
+    console.error(chalk.dim('  ──────────────────────────────'));
+    console.error('  ' + error.message);
+    if (error.stack) {
+      console.error(chalk.dim('\n  📚 Stack Trace:'));
+      console.error(error.stack.split('\n').slice(1, 5).join('\n'));
+    }
+  }
+  console.error('');
+}
+
+export function warn(message, details = {}) {
+  console.warn(chalk.yellow('  ⚠️  ') + chalk.bold('Warning'));
+  console.warn(chalk.dim('  ──────────────────────────────'));
+  console.warn('  ' + message);
+  if (Object.keys(details).length > 0) {
+    console.warn(chalk.dim('\n  📋 Details:'));
+    Object.entries(details).forEach(([key, value]) => {
+      console.warn(`    ${chalk.dim(key)}: ${value}`);
+    });
+  }
+  console.warn('');
+}
+
+export function info(message, details = {}) {
+  console.log(chalk.blue('  ℹ️  ') + chalk.bold('Info'));
+  console.log(chalk.dim('  ──────────────────────────────'));
+  console.log('  ' + message);
+  if (Object.keys(details).length > 0) {
+    console.log(chalk.dim('\n  📋 Details:'));
+    Object.entries(details).forEach(([key, value]) => {
+      console.log(`    ${chalk.dim(key)}: ${value}`);
+    });
+  }
+  console.log('');
+}
+
+export function success(message, details = {}) {
+  console.log(chalk.green('  ✅  ') + chalk.bold('Success'));
+  console.log(chalk.dim('  ──────────────────────────────'));
+  console.log('  ' + message);
+  if (Object.keys(details).length > 0) {
+    console.log(chalk.dim('\n  📋 Details:'));
+    Object.entries(details).forEach(([key, value]) => {
+      console.log(`    ${chalk.dim(key)}: ${value}`);
+    });
+  }
+  console.log('');
+}