fusee-framework 1.1.1 → 1.2.1

package/app/providers/ParentComponent.ts

@@ -0,0 +1,53 @@
+import { provide, inject } from '../../framework/index.js'
+import { ChildComponent } from './ChildComponent.js'
+
+interface UserData {
+    name: string
+    age: number
+}
+
+// ParentComponent - provides values to child components
+export const ParentComponent = defineComponent({
+    components: { ChildComponent },
+    setup() {
+        const count = signal(42)
+        const message = signal('Hello from Parent!')
+        const userData: UserData = { name: 'John', age: 30 }
+
+        // Provide values to descendant components
+        provide('count', count)
+        provide('message', message)
+        provide('userData', userData)
+        provide('appVersion', '1.0.0')
+
+        function updateCount(): void {
+            count(count() + 10)
+        }
+
+        return {
+            count,
+            message,
+            userData,
+            updateCount,
+            template: `
+                <div style="padding: 20px; border: 2px solid #4CAF50; border-radius: 8px; margin: 20px 0; color: #000;">
+                    <h2 style="color: #4CAF50;">Parent Component</h2>
+                    <p>I'm providing these values to my children:</p>
+                    <ul style="background: #333; padding: 15px; border-radius: 4px; color: #fff;">
+                        <li><strong>count:</strong> {{ count }}</li>
+                        <li><strong>message:</strong> {{ message }}</li>
+                        <li><strong>userData:</strong> {{ userData.name }} ({{ userData.age }} years)</li>
+                        <li><strong>appVersion:</strong> 1.0.0</li>
+                    </ul>
+                    <button @click="updateCount" style="margin-top: 10px; padding: 8px 16px; background: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer;">
+                        Update Count (+10)
+                    </button>
+                    
+                    <div style="margin-top: 20px;">
+                        {{ ChildComponent }}
+                    </div>
+                </div>
+            `
+        }
+    }
+})

package/app/providers/index.js

@@ -0,0 +1,3 @@
+export { ParentComponent } from './ParentComponent.js'
+export { ChildComponent } from './ChildComponent.js'
+export { GrandchildComponent } from './GrandchildComponent.js'

package/app/providers/index.ts

@@ -0,0 +1,3 @@
+export { ParentComponent } from './ParentComponent.js'
+export { ChildComponent } from './ChildComponent.js'
+export { GrandchildComponent } from './GrandchildComponent.js'

package/app/routes/About.js

@@ -2,6 +2,7 @@ export const About = defineComponent({
     props: [],
     setup() {
         const loaded = signal(false)
+        inspect(loaded)
 
         onMount(() => {
             setTimeout(() => loaded(true), 300)

package/app/routes/About.ts

@@ -1,4 +1,4 @@
-import { defineComponent, signal, onMount, type Signal, type EmptyProps } from '../../framework/index.js'
+import type { Signal, EmptyProps } from '../../framework/index.js'
 
 type AboutResult = {
     loaded: Signal<boolean>

package/app/routes/Home.js

@@ -1,13 +1,29 @@
 import { UserForm } from '../components/UserForm.js'
 import { CounterSection } from '../components/CounterSection.js'
+import { Card } from '../components/Card.js'
+import { EmitTest } from '../components/EmitTest.js'
+import { ParentComponent } from '../providers/index.js'
 
 export const Home = defineComponent({
-    components: { UserForm, CounterSection },
+    components: { UserForm, CounterSection, Card, EmitTest, ParentComponent },
     setup() {
         const title = signal('Welcome!')
+        inspect(title)
+        
         return {
             title,
             changeTitle: () => title('Changed Title!'),
+            
+            // 🧪 Emit Event Handlers
+            handleCounterChange: (value) => console.log('📢 Counter changed to:', value),
+            handleCounterReset: () => console.log('🔄 Counter reset requested!'),
+            handleCustomEvent: (count, multiplier) => console.log('🎯 Custom event:', { count, multiplier }),
+            
+            // 🧪 Emit Test Handlers
+            handleSimpleClick: () => console.log('✅ SIMPLE CLICK received from child!'),
+            handleClickWithData: (count, label, timestamp) => console.log('✅ CLICK WITH DATA:', { count, label, timestamp }),
+            handleObjectEvent: (data) => console.log('✅ OBJECT EVENT received:', data),
+            
             template: `
                 <div class="page">
                     <h1>{{ title.toUpperCase() }}</h1>
@@ -18,7 +34,35 @@ export const Home = defineComponent({
                     
                     {{ UserForm }}
                     
-                    {{ CounterSection :pageTitle="title" }}
+                    {{ CounterSection @counter-change="handleCounterChange" @counter-reset="handleCounterReset" @custom-event="handleCustomEvent" :pageTitle="title" }}
+                    
+                    <!-- 🧪 EMIT TEST - NEW SEPARATE COMPONENT -->
+                    <h3 style="margin-top: 40px; margin-bottom: 20px; color: #4da6ff;">🧪 EMIT EVENTS TEST LAB</h3>
+                    {{ EmitTest @simple-click="handleSimpleClick" @click-with-data="handleClickWithData" @object-event="handleObjectEvent" }}
+                    
+                    <!-- 🧪 Slots Test -->
+                    <h3 style="margin-top: 40px; margin-bottom: 20px;">🎴 Slots Test</h3>
+                    
+                    {{ Card title="Custom Card" }}
+                        <template slot="header">
+                            <p style="color: #10b981; font-weight: bold;">🎯 Custom header from parent!</p>
+                        </template>
+                        <p style="color: #f59e0b;">This is custom content passed through the default slot.</p>
+                        <p>You can pass any HTML content here!</p>
+                        <template slot="footer">
+                            <button style="background: #3b82f6; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer;">
+                                Custom Footer Button
+                            </button>
+                        </template>
+                    {{ /Card }}
+                    
+                    {{ Card title="Default Slots Card" }}
+                        <p>This card uses only the default slot - no named slots provided.</p>
+                    {{ /Card }}
+                    
+                    <!-- 🧪 PROVIDE / INJECT TEST -->
+                    <h3 style="margin-top: 40px; margin-bottom: 20px; color: #4CAF50;">🔗 PROVIDE / INJECT TEST</h3>
+                    {{ ParentComponent }}
                 </div>
             `
         }

package/app/routes/TestFor.js

@@ -5,6 +5,7 @@ export const TestFor = defineComponent({
             { id: 2, name: 'Item 2' },
             { id: 3, name: 'Item 3' }
         ])
+        inspect(items)
 
         return {
             items,

package/auto-imports.d.ts

@@ -10,10 +10,14 @@ declare global {
   const computed: typeof import('fusee-framework').computed
   const defineComponent: typeof import('fusee-framework').defineComponent
   const effect: typeof import('fusee-framework').effect
+  const emit: typeof import('fusee-framework').emit
+  const inject: typeof import('fusee-framework').inject
+  const inspect: typeof import('fusee-framework').inspect
   const mountOutlet: typeof import('fusee-framework').mountOutlet
   const mountTemplate: typeof import('fusee-framework').mountTemplate
   const onMount: typeof import('fusee-framework').onMount
   const onUnmount: typeof import('fusee-framework').onUnmount
+  const provide: typeof import('fusee-framework').provide
   const signal: typeof import('fusee-framework').signal
   const untrack: typeof import('fusee-framework').untrack
 }

package/framework/auto-import-preset.js

@@ -1,8 +1,8 @@
 export const FuseePreset = {
     'fusee-framework': [
         'signal', 'computed', 'effect',
-        'batch', 'untrack',
+        'batch', 'untrack', 'inspect',
         'defineComponent', 'onMount', 'onUnmount',
-        'mountOutlet', 'mountTemplate'
+        'mountOutlet', 'mountTemplate', 'emit'
     ]
 }

package/framework/core/compiler.js

@@ -1,5 +1,6 @@
 import { effect, batch } from './signal.js'
 import { processDirectives } from './directives.js'
+import { parseSlots } from './component.js'
 import {
     evaluateExpression,
     parseInterpolation,
@@ -12,24 +13,21 @@ export function mountTemplate(template, container, context, components) {
     let processed = template.replace(/(<[a-zA-Z0-9-]+\s[^>]*?)\s:([a-zA-Z][a-zA-Z0-9-]*)=/g, '$1 data-bind-$2=')
 
     for (const name of Object.keys(components)) {
-        const re = new RegExp(`\\{\\{\\s*${name}(\\s+.*?|\\s*)\\}\\}`, 'g')
-        processed = processed.replace(re, (match, propsStr) => {
-            let attrs = ''
-            if (propsStr && propsStr.trim()) {
-                const attrRegex = /(:?[a-zA-Z0-9-]+)="([^"]*)"/g
-                let attrMatch
-                while ((attrMatch = attrRegex.exec(propsStr)) !== null) {
-                    const attrName = attrMatch[1]
-                    const attrValue = attrMatch[2]
-
-                    if (attrName.startsWith(':')) {
-                        attrs += ` data-bind-prop-${attrName.slice(1).toLowerCase()}="${attrValue}"`
-                    } else {
-                        attrs += ` data-prop-${attrName.toLowerCase()}="${attrValue}"`
-                    }
-                }
-            }
-            return `<div data-component="${name}"${attrs}></div>`
+        const reWithSlot = new RegExp(
+            `\\{\\{\\s*${name}(\\s[^}]*?|\\s*)\\}\\}([\\s\\S]*?)\\{\\{\\s*\\/${name}\\s*\\}\\}`,
+            'g'
+        )
+        const reNoSlot = new RegExp(`\\{\\{\\s*${name}(\\s+.*?|\\s*)\\}\\}`, 'g')
+
+        processed = processed.replace(reWithSlot, (match, propsStr, slotContent) => {
+            const attrs = parseComponentAttrs(propsStr || '')
+            const encodedSlot = encodeURIComponent(slotContent.trim())
+            return `<div data-component="${name}"${attrs} data-slot="${encodedSlot}"></div>` 
+        })
+
+        processed = processed.replace(reNoSlot, (match, propsStr) => {
+            const attrs = parseComponentAttrs(propsStr || '')
+            return `<div data-component="${name}"${attrs}></div>` 
         })
     }
 
@@ -39,26 +37,47 @@ export function mountTemplate(template, container, context, components) {
     return { effects }
 }
 
+// Parses props string from component mustache into HTML attr string
+function parseComponentAttrs(propsStr) {
+    let attrs = ''
+    if (!propsStr || !propsStr.trim()) return attrs
+
+    const attrRegex = /(@?:?[a-zA-Z0-9-]+)="([^"]*)"/g
+    let attrMatch
+    while ((attrMatch = attrRegex.exec(propsStr)) !== null) {
+        const attrName = attrMatch[1]
+        const attrValue = attrMatch[2]
+
+        if (attrName.startsWith('@')) {
+            // Event listener: @change="handler" → data-on-change="handler"
+            attrs += ` data-on-${attrName.slice(1).toLowerCase()}="${attrValue}"` 
+        } else if (attrName.startsWith(':')) {
+            // Dynamic prop
+            attrs += ` data-bind-prop-${attrName.slice(1).toLowerCase()}="${attrValue}"` 
+        } else {
+            // Static prop
+            attrs += ` data-prop-${attrName.toLowerCase()}="${attrValue}"` 
+        }
+    }
+    return attrs
+}
+
 export function compileNode(node, context, components, effects) {
-    // Handle f-once (render once and discard reactive tracking for this subtree)
     if (node.nodeType === 1 && node.hasAttribute('f-once')) {
         node.removeAttribute('f-once')
         const temporaryEffects = []
 
-        // Process ONLY this node and its children ONCE
         processDirectives(node, context, components, temporaryEffects)
         processBindingAttrs(node, context, temporaryEffects)
         processMustaches(node, context, temporaryEffects)
         bindComponents(node, components, context, temporaryEffects)
 
-        // Recurse children but with temporary effects
         let child = node.firstChild
         while (child) {
             compileOnce(child, context, components, temporaryEffects)
             child = child.nextSibling
         }
 
-        // Cleanup immediately
         for (const cleanup of temporaryEffects) if (typeof cleanup === 'function') cleanup()
         return
     }
@@ -172,46 +191,71 @@ function bindComponents(el, components, context, effects) {
     const name = el.getAttribute('data-component')
     if (!name) return
 
-    // Remove the attribute immediately to prevent recursive compilers from 
-    // re-identifying this element as a component placeholder.
     el.removeAttribute('data-component')
 
     const ComponentFn = components[name]
-    if (ComponentFn) {
-        const props = {}
-        for (const attr of [...el.attributes]) {
-            const attrName = attr.name.toLowerCase()
-
-            if (attrName.startsWith('data-prop-')) {
-                props[attrName.slice(10)] = attr.value
-            } else if (attrName.startsWith('data-bind-prop-')) {
-                const propName = attrName.slice(15)
-                const expression = attr.value.trim()
-
-                if (expression in context) {
-                    Object.defineProperty(props, propName, {
-                        get() {
-                            const val = context[expression]
-                            return typeof val === 'function' && val.isSignal ? val() : val
-                        },
-                        enumerable: true,
-                        configurable: true
-                    })
+    if (!ComponentFn) return
+
+    // ── Props ────────────────────────────────────────────────────────────────
+    const props = {}
+    const listeners = {}
+
+    for (const attr of [...el.attributes]) {
+        const attrName = attr.name.toLowerCase()
+
+        if (attrName.startsWith('data-prop-')) {
+            props[attrName.slice(10)] = attr.value
+
+        } else if (attrName.startsWith('data-bind-prop-')) {
+            const propName = attrName.slice(15)
+            const expression = attr.value.trim()
+
+            if (expression in context) {
+                Object.defineProperty(props, propName, {
+                    get() {
+                        const val = context[expression]
+                        return typeof val === 'function' && val.isSignal ? val() : val
+                    },
+                    enumerable: true,
+                    configurable: true
+                })
+            } else {
+                Object.defineProperty(props, propName, {
+                    get() { return evaluateExpression(expression, context) },
+                    enumerable: true,
+                    configurable: true
+                })
+            }
+
+        } else if (attrName.startsWith('data-on-')) {
+            // ── Emit listeners ───────────────────────────────────────────────
+            // @change="handler" → data-on-change="handler"
+            // When child emits 'change', calls context.handler(value)
+            const eventName = attrName.slice(8)  // "data-on-" → eventName
+            const handlerExpr = attr.value.trim()
+
+            listeners[eventName] = (...args) => {
+                const handler = context[handlerExpr]
+                if (typeof handler === 'function') {
+                    handler(...args)
                 } else {
-                    Object.defineProperty(props, propName, {
-                        get() {
-                            return evaluateExpression(expression, context)
-                        },
-                        enumerable: true,
-                        configurable: true
-                    })
+                    // Support inline expressions: @change="count(count() + 1)"
+                    evaluateExpression(handlerExpr, context)
                 }
             }
         }
-        const childComponent = ComponentFn(props)
-        childComponent.render(el)
-        if (effects) {
-            effects.push(() => childComponent.unmount())
-        }
+    }
+
+    // ── Slots ────────────────────────────────────────────────────────────────
+    // data-slot attribute contains URI-encoded slot HTML from parent
+    const rawSlot = el.getAttribute('data-slot')
+    const slots = rawSlot ? parseSlots(decodeURIComponent(rawSlot)) : {}
+    el.removeAttribute('data-slot')
+
+    const childComponent = ComponentFn(props, { listeners, slots, parent: context._instance })
+    childComponent.render(el)
+
+    if (effects) {
+        effects.push(() => childComponent.unmount())
     }
 }

package/framework/core/component.js

@@ -68,6 +68,60 @@ function resolveProps(schema, received) {
     return resolved
 }
 
+// ── Emit ──────────────────────────────────────────────────────────────────────
+// listeners: { change: fn, submit: fn, ... }
+// emit('change', 42) → calls listeners.change(42)
+function createEmit(listeners) {
+    return function emit(eventName, ...args) {
+        const handler = listeners[eventName]
+        if (typeof handler === 'function') {
+            batch(() => handler(...args))
+        } else if (handler !== undefined) {
+            console.warn(`[framework] emit("${eventName}"): listener is not a function`)
+        }
+    }
+}
+
+// ── Slots ─────────────────────────────────────────────────────────────────────
+// Parses slot content from parent HTML string.
+// Named slots: <template slot="header">...</template>
+// Default slot: everything else
+export function parseSlots(slotHTML) {
+    const slots = { default: '' }
+    if (!slotHTML || !slotHTML.trim()) return slots
+
+    const namedSlotRe = /<template\s+slot="([^"]+)"[^>]*>([\s\S]*?)<\/template>/gi
+    let remaining = slotHTML
+    let match
+
+    while ((match = namedSlotRe.exec(slotHTML)) !== null) {
+        slots[match[1]] = match[2].trim()
+        remaining = remaining.replace(match[0], '')
+    }
+
+    const defaultContent = remaining.trim()
+    if (defaultContent) slots.default = defaultContent
+
+    return slots
+}
+
+// Replaces <slot> and <slot name="x"> in template with actual slot content
+function resolveSlots(template, slots) {
+    // Handle named slots with any content between tags (including default content)
+    let result = template.replace(/<slot\s+name="([^"]+)"\s*>[\s\S]*?<\/slot>/gi, (match, name) => {
+        return slots[name] ?? ''
+    })
+    // Handle default slots with any content between tags
+    result = result.replace(/<slot\s*>[\s\S]*?<\/slot>/gi, () => {
+        return slots.default ?? ''
+    })
+    // Handle self-closing named slots
+    result = result.replace(/<slot\s+name="([^"]+)"\s*\/>/gi, (_, name) => slots[name] ?? '')
+    // Handle self-closing default slots
+    result = result.replace(/<slot\s*\/>/gi, () => slots.default ?? '')
+    return result
+}
+
 export function onMount(fn) {
     if (currentInstance) currentInstance._mountHooks.push(fn)
 }
@@ -77,24 +131,38 @@ export function onUnmount(fn) {
 }
 
 export function defineComponent(options) {
-    return function ComponentFactory(props = {}) {
+    // ComponentFactory now accepts props + optional { listeners, slots, parent }
+    // listeners: event handlers from parent @eventName="handler"
+    // slots: parsed slot HTML from parent
+    // parent: parent component instance for provide/inject
+    return function ComponentFactory(props = {}, { listeners = {}, slots = {}, parent = null } = {}) {
         const instance = {
             props: options.props ? resolveProps(options.props, props) : props,
             _mountHooks: [],
             _unmountHooks: [],
             _effects: [],
             _element: null,
+            _provides: {},
+            _parent: parent,
         }
 
+        const emit = createEmit(listeners)
+
         currentInstance = instance
-        const result = options.setup(instance.props)
+        // setup() receives (props, { emit, slots })
+        const result = options.setup(instance.props, { emit, slots })
+        // Store instance reference on result for child component access
+        result._instance = instance
         currentInstance = null
 
         function render(container) {
             instance._element = container
 
+            // Resolve slot placeholders before mounting
+            const resolvedTemplate = resolveSlots(result.template, slots)
+
             const { effects } = mountTemplate(
-                result.template,
+                resolvedTemplate,
                 container,
                 result,
                 options.components || {}
@@ -116,4 +184,18 @@ export function defineComponent(options) {
 
         return { render, unmount, instance }
     }
+}
+
+export function provide(key, value) {
+    if(!currentInstance) return
+    currentInstance._provides[key] = value
+}
+
+export function inject(key) {
+    let parent = currentInstance?._parent
+    while(parent) {
+        if (key in parent._provides) return parent._provides[key];
+        parent = parent._parent;
+    }
+    return null;
 }

package/framework/core/evaluator.js

@@ -6,7 +6,10 @@ const DANGEROUS_SCHEMES = /^(javascript|data|vbscript|file):/i
 export function evaluateExpression(expr, context, extraContext = {}, unwrapSignals = true) {
     const keys = []
     const values = []
-    const identifiers = new Set(expr.match(/[a-zA-Z_$][a-zA-Z0-9_$]*/g) || [])
+    
+    // Remove string literals before extracting identifiers to avoid matching words inside strings
+    const exprWithoutStrings = expr.replace(/'[^']*'|"[^"]*"/g, ' ')
+    const identifiers = new Set(exprWithoutStrings.match(/[a-zA-Z_$][a-zA-Z0-9_$]*/g) || [])
 
     // Map global context (only what is used in expression)
     for (const k in context) {

package/framework/core/signal.js

@@ -84,6 +84,8 @@ export function computed(fn) {
     const computedNode = () => {
         if (!dirty) {
             dirty = true
+            for (const dep of computedNode.deps) dep.delete(computedNode)
+            computedNode.deps.clear()
             for (const sub of [...subscribers]) scheduleEffect(sub)
         }
     }
@@ -135,3 +137,23 @@ export function untrack(fn) {
         currentEffect = prevEffect
     }
 }
+
+/**
+ * Reactive log helper similar to Svelte 5's $inspect.
+ * Watches signals or functions and logs their current values on change.
+ * Only active in development mode.
+ */
+export function inspect(...args) {
+    const isDev = typeof import.meta.env !== 'undefined' ? !!import.meta.env.DEV : true
+    if (!isDev) return
+
+    return effect(() => {
+        const values = args.map(arg => {
+            if (typeof arg === 'function') {
+                return arg()
+            }
+            return arg
+        })
+        console.log('[inspect]', ...values)
+    })
+}

package/framework/index.js

@@ -1,5 +1,8 @@
 // ─── Framework Public API ─────────────────────────────────────────────────────
-export { signal, computed, effect, batch, untrack } from './core/signal.js'
-export { defineComponent, onMount, onUnmount } from './core/component.js'
+export { signal, computed, effect, batch, untrack, inspect } from './core/signal.js'
+export { defineComponent, onMount, onUnmount, parseSlots, provide, inject } from './core/component.js'
 export { createRouter, navigate, mountOutlet } from './router/router.js'
 export { mountTemplate } from './core/compiler.js'
+
+// Emit is a placeholder - actual emit function is created per component
+export const emit = () => console.warn('[framework] emit() can only be used inside component setup()')

package/framework/types/component.d.ts

@@ -12,12 +12,29 @@ export type PropConfig = {
     required?: boolean
 }
 
+// ── Emit ──────────────────────────────────────────────────────────────────────
+// emit('change', value) — calls parent listener registered with @change="handler"
+export type EmitFn = (eventName: string, ...args: any[]) => void
+
+// ── Slots ─────────────────────────────────────────────────────────────────────
+// slots.default — default slot HTML string
+// slots.header  — named slot HTML string
+export type Slots = Record<string, string>
+
+// ── Setup context ─────────────────────────────────────────────────────────────
+export type SetupContext = {
+    emit: EmitFn
+    slots: Slots
+}
+
 export type ComponentInstance = {
     props: ComponentProps
     _mountHooks: (() => void)[]
     _unmountHooks: (() => void)[]
     _effects: import('./signal').EffectRunner[]
     _element: HTMLElement | null
+    _provides: Record<string, any>
+    _parent: ComponentInstance | null
 }
 
 export type ComponentResult = {
@@ -28,10 +45,13 @@ export type ComponentResult = {
 export type ComponentOptions<TProps = ComponentProps> = {
     props?: PropSchema
     components?: Record<string, ComponentFactory<any>>
-    setup: (props: TProps) => ComponentResult
+    setup: (props: TProps, ctx: SetupContext) => ComponentResult
 }
 
-export type ComponentFactory<TProps = ComponentProps> = (props?: TProps) => ComponentApi
+export type ComponentFactory<TProps = ComponentProps> = (
+    props?: TProps,
+    options?: { listeners?: Record<string, Function>, slots?: Slots, parent?: ComponentInstance }
+) => ComponentApi
 
 export type ComponentApi = {
     render: (container: HTMLElement) => ComponentInstance
@@ -41,4 +61,12 @@ export type ComponentApi = {
 
 export declare function onMount(fn: () => void): void
 export declare function onUnmount(fn: () => void): void
-export declare function defineComponent<TProps = EmptyProps>(options: ComponentOptions<TProps>): ComponentFactory<TProps>
+export declare function parseSlots(slotHTML: string): Slots
+
+// ── Provide / Inject ───────────────────────────────────────────────────────────
+export declare function provide<T>(key: string, value: T): void
+export declare function inject<T>(key: string): T | null
+
+export declare function defineComponent<TProps = EmptyProps>(
+    options: ComponentOptions<TProps>
+): ComponentFactory<TProps>

package/framework/types/signal.d.ts

@@ -25,6 +25,7 @@ export declare function effect(fn: () => void): () => void
 export declare function computed<T>(fn: () => T): Computed<T>
 export declare function batch<T>(fn: () => T): T
 export declare function untrack<T>(fn: () => T): T
+export declare function inspect(...args: any[]): (() => void) | void
 
 declare function setEffectHook(fn: (eff: any) => void): void
 

package/index.html

@@ -31,7 +31,6 @@
 
     nav a {
       color: #ff3333;
-      /* Link-urile sunt acum roșii */
       text-decoration: none;
       font-weight: 500;
     }
@@ -172,9 +171,6 @@
   </nav>
   <div id="app"></div>
   <script type="module" src="./app/main.js"></script>
-  <!-- For TypeScript: compile with `npx tsc` then change to: -->
-  <!-- <script type="module" src="./dist/app/main.js"></script> -->
-
 </body>
 
 </html>