create-nativecore 0.1.0 → 0.2.0

package/template/src/components/core/nc-rating.ts

@@ -0,0 +1,266 @@
+/**
+ * NcRating Component
+ *
+ * NativeCore Framework Core Component
+ *
+ * Attributes:
+ *   - name: string — form field name
+ *   - value: number — current rating (0 = none)
+ *   - max: number — total stars (default: 5)
+ *   - readonly: boolean — display only, no interaction
+ *   - disabled: boolean — disabled state
+ *   - size: 'sm' | 'md' | 'lg' (default: 'md')
+ *   - variant: 'star' | 'heart' | 'circle' (default: 'star')
+ *   - allow-clear: boolean — clicking the active star clears the value
+ *
+ * Events:
+ *   - change: CustomEvent<{ value: number; name: string }>
+ *
+ * Usage:
+ *   <nc-rating name="score" value="3"></nc-rating>
+ *   <nc-rating name="score" value="4" max="10" size="lg" allow-clear></nc-rating>
+ *   <nc-rating name="mood" variant="heart" value="2"></nc-rating>
+ */
+
+import { Component, defineComponent } from '@core/component.js';
+
+const ICONS: Record<string, { filled: string; empty: string }> = {
+    star: {
+        filled: `<svg class="icon-filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="1em" height="1em"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>`,
+        empty:  `<svg class="icon-empty"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="1em" height="1em"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>`,
+    },
+    heart: {
+        filled: `<svg class="icon-filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="1em" height="1em"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg>`,
+        empty:  `<svg class="icon-empty"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="1em" height="1em"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg>`,
+    },
+    circle: {
+        filled: `<svg class="icon-filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="1em" height="1em"><circle cx="12" cy="12" r="10"/></svg>`,
+        empty:  `<svg class="icon-empty"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="1em" height="1em"><circle cx="12" cy="12" r="10"/></svg>`,
+    },
+};
+
+export class NcRating extends Component {
+    static useShadowDOM = true;
+
+    static attributeOptions = {
+        variant: ['star', 'heart', 'circle'],
+        size: ['sm', 'md', 'lg']
+    };
+
+    static get observedAttributes() {
+        // 'value' excluded — managed via _value to prevent base-class re-render on every pick
+        return ['name', 'max', 'readonly', 'disabled', 'size', 'variant', 'allow-clear'];
+    }
+
+    private _value = 0;
+    private _hovered = 0;
+
+    constructor() {
+        super();
+    }
+
+    private _getMax() { return Number(this.getAttribute('max') || 5); }
+    private _getValue() { return this._value; }
+
+    template() {
+        // Seed from attribute only on first mount
+        if (!this._mounted) {
+            this._value = Number(this.getAttribute('value') || 0);
+        }
+        const value = this._getValue();
+        const max = this._getMax();
+        const variant = this.getAttribute('variant') || 'star';
+        const icon = ICONS[variant] ?? ICONS.star;
+        const readonly = this.hasAttribute('readonly');
+        const disabled = this.hasAttribute('disabled');
+        const interactive = !readonly && !disabled;
+
+        // Both icons are always in the DOM — visibility toggled by CSS class only.
+        // This prevents _applyHover from ever replacing innerHTML, which would
+        // trigger spurious mouseover events and break the saved-state display.
+        const items = Array.from({ length: max }, (_, i) => {
+            const pos = i + 1;
+            const filled = pos <= value;
+            return `<span
+                class="item${filled ? ' filled' : ''}"
+                data-pos="${pos}"
+                role="${interactive ? 'radio' : 'presentation'}"
+                aria-checked="${filled}"
+                aria-label="${pos} of ${max}"
+                tabindex="${interactive ? '0' : '-1'}"
+            >${icon.filled}${icon.empty}</span>`;
+        }).join('');
+
+        return `
+            <style>
+                :host {
+                    display: inline-flex;
+                    align-items: center;
+                    font-family: var(--nc-font-family);
+                }
+
+                .items {
+                    display: inline-flex;
+                    align-items: center;
+                    gap: 2px;
+                }
+
+                :host,
+                :host([size="md"]) { font-size: 1.5rem; }
+                :host([size="sm"]) { font-size: 1rem; }
+                :host([size="lg"]) { font-size: 2rem; }
+
+                .item {
+                    display: inline-flex;
+                    align-items: center;
+                    justify-content: center;
+                    cursor: ${interactive ? 'pointer' : 'default'};
+                    color: var(--nc-gray-300);
+                    transition: color var(--nc-transition-fast), transform var(--nc-transition-fast);
+                    opacity: ${disabled ? '0.4' : '1'};
+                    line-height: 1;
+                    pointer-events: ${interactive ? 'auto' : 'none'};
+                }
+
+                /* SVGs are siblings inside .item — show one at a time */
+                .item .icon-filled { display: none; }
+                .item .icon-empty  { display: block; }
+
+                .item.filled .icon-filled { display: block; }
+                .item.filled .icon-empty  { display: none; }
+
+                /* Hover/active state */
+                .item.filled,
+                .item.hovered {
+                    color: var(--nc-warning, #f59e0b);
+                }
+
+                .item.hovered {
+                    transform: scale(1.2);
+                }
+
+                /* During hover preview, preview-filled shows filled icon */
+                .item.preview-filled .icon-filled { display: block; }
+                .item.preview-filled .icon-empty  { display: none; }
+                .item.preview-empty  .icon-filled { display: none; }
+                .item.preview-empty  .icon-empty  { display: block; }
+
+                .item:focus-visible {
+                    outline: 2px solid var(--nc-primary);
+                    outline-offset: 2px;
+                    border-radius: 2px;
+                }
+            </style>
+
+            <div
+                class="items"
+                role="${interactive ? 'radiogroup' : 'img'}"
+                aria-label="Rating: ${value} of ${max}"
+            >${items}</div>
+            <input type="hidden" name="${this.getAttribute('name') || ''}" value="${value}" />
+        `;
+    }
+
+    onMount() {
+        this._bindEvents();
+    }
+
+    private _bindEvents() {
+        if (this.hasAttribute('readonly') || this.hasAttribute('disabled')) return;
+
+        const container = this.$<HTMLElement>('.items')!;
+
+        container.addEventListener('mouseover', (e) => {
+            const item = (e.target as HTMLElement).closest<HTMLElement>('.item');
+            if (!item) return;
+            this._hovered = Number(item.dataset.pos);
+            this._applyState();
+        });
+
+        container.addEventListener('mouseleave', () => {
+            this._hovered = 0;
+            this._applyState();
+        });
+
+        container.addEventListener('click', (e) => {
+            const item = (e.target as HTMLElement).closest<HTMLElement>('.item');
+            if (!item) return;
+            const pos = Number(item.dataset.pos);
+            const next = this.hasAttribute('allow-clear') && pos === this._getValue() ? 0 : pos;
+            this._hovered = 0;
+            this._commit(next);
+        });
+
+        this.$$<HTMLElement>('.item').forEach(item => {
+            item.addEventListener('keydown', (e: KeyboardEvent) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    item.click();
+                }
+                if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {
+                    e.preventDefault();
+                    this._commit(Math.min(this._getMax(), this._getValue() + 1));
+                }
+                if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {
+                    e.preventDefault();
+                    this._commit(Math.max(0, this._getValue() - 1));
+                }
+            });
+        });
+    }
+
+    // Applies the current hover/selected state to the DOM via classes only — no innerHTML changes
+    private _applyState() {
+        const value = this._getValue();
+        const hovered = this._hovered;
+
+        this.$$<HTMLElement>('.item').forEach(item => {
+            const pos = Number(item.dataset.pos);
+
+            if (hovered > 0) {
+                // Preview mode: override fill display with preview classes
+                const previewFilled = pos <= hovered;
+                item.classList.toggle('hovered', previewFilled);
+                item.classList.toggle('preview-filled', previewFilled);
+                item.classList.toggle('preview-empty', !previewFilled);
+                item.setAttribute('aria-checked', String(pos <= value));
+            } else {
+                // Committed state: remove all preview classes, rely on .filled
+                item.classList.remove('hovered', 'preview-filled', 'preview-empty');
+                item.classList.toggle('filled', pos <= value);
+                item.setAttribute('aria-checked', String(pos <= value));
+            }
+        });
+    }
+
+    private _commit(value: number) {
+        this._value = value;
+        // setAttribute is safe — 'value' is not in observedAttributes, no re-render triggered
+        this.setAttribute('value', String(value));
+
+        const hidden = this.$<HTMLInputElement>('input[type="hidden"]');
+        if (hidden) hidden.value = String(value);
+
+        const container = this.$('.items');
+        if (container) container.setAttribute('aria-label', `Rating: ${value} of ${this._getMax()}`);
+
+        // Re-sync .filled classes to match the new committed value
+        this.$$<HTMLElement>('.item').forEach(item => {
+            item.classList.toggle('filled', Number(item.dataset.pos) <= value);
+        });
+
+        this.dispatchEvent(new CustomEvent('change', {
+            bubbles: true,
+            composed: true,
+            detail: { value, name: this.getAttribute('name') || '' }
+        }));
+    }
+
+    attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+        if (oldValue === newValue || !this._mounted) return;
+        this.render();
+        this._bindEvents();
+    }
+}
+
+defineComponent('nc-rating', NcRating);

package/template/src/components/core/nc-rich-text.ts

@@ -0,0 +1,283 @@
+/**
+ * NcRichText Component
+ *
+ * A lightweight rich text editor built on contenteditable + execCommand,
+ * with a toolbar, HTML output, and zero external dependencies.
+ *
+ * Attributes:
+ *   - name: string — for use in nc-form (emits HTML string as value)
+ *   - value: string — initial HTML content
+ *   - placeholder: string (default: 'Start typing...')
+ *   - disabled: boolean
+ *   - readonly: boolean
+ *   - toolbar: string — comma-separated list of toolbar buttons to show.
+ *       Full list: 'bold,italic,underline,strike,|,h1,h2,h3,|,ul,ol,|,blockquote,code,|,link,|,align-left,align-center,align-right,|,clear'
+ *       Default: all of the above
+ *   - min-height: string — CSS min-height of editable area (default: '120px')
+ *   - max-height: string — CSS max-height of editable area (default: '400px')
+ *
+ * Events:
+ *   - input:  CustomEvent<{ value: string; name: string }>
+ *   - change: CustomEvent<{ value: string; name: string }>
+ *
+ * Usage:
+ *   <nc-rich-text name="body" placeholder="Write something..." min-height="200px"></nc-rich-text>
+ *   <nc-rich-text name="notes" toolbar="bold,italic,underline,|,ul,ol"></nc-rich-text>
+ */
+
+import { Component, defineComponent } from '@core/component.js';
+
+const ICONS: Record<string, string> = {
+    bold:         `<svg viewBox="0 0 16 16" fill="none" width="14" height="14"><text x="3" y="13" font-family="Georgia,serif" font-size="13" font-weight="bold" fill="currentColor">B</text></svg>`,
+    italic:       `<svg viewBox="0 0 16 16" fill="none" width="14" height="14"><text x="4" y="13" font-family="Georgia,serif" font-size="13" font-style="italic" fill="currentColor">I</text></svg>`,
+    underline:    `<svg viewBox="0 0 16 16" fill="none" width="14" height="14"><text x="3" y="11" font-family="Arial,sans-serif" font-size="12" text-decoration="underline" fill="currentColor">U</text><line x1="2" y1="14" x2="14" y2="14" stroke="currentColor" stroke-width="1.5"/></svg>`,
+    strike:       `<svg viewBox="0 0 16 16" fill="none" width="14" height="14"><line x1="2" y1="8" x2="14" y2="8" stroke="currentColor" stroke-width="1.5"/><text x="3" y="7" font-family="Arial" font-size="9" fill="currentColor">S</text></svg>`,
+    h1:           `<svg viewBox="0 0 20 16" fill="none" width="18" height="14"><text x="1" y="13" font-family="Arial" font-size="13" font-weight="bold" fill="currentColor">H1</text></svg>`,
+    h2:           `<svg viewBox="0 0 20 16" fill="none" width="18" height="14"><text x="1" y="13" font-family="Arial" font-size="13" font-weight="bold" fill="currentColor">H2</text></svg>`,
+    h3:           `<svg viewBox="0 0 20 16" fill="none" width="18" height="14"><text x="1" y="13" font-family="Arial" font-size="13" font-weight="bold" fill="currentColor">H3</text></svg>`,
+    ul:           `<svg viewBox="0 0 16 16" fill="none" width="14" height="14" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"><circle cx="3" cy="5" r="1" fill="currentColor" stroke="none"/><line x1="6" y1="5" x2="14" y2="5"/><circle cx="3" cy="9" r="1" fill="currentColor" stroke="none"/><line x1="6" y1="9" x2="14" y2="9"/><circle cx="3" cy="13" r="1" fill="currentColor" stroke="none"/><line x1="6" y1="13" x2="14" y2="13"/></svg>`,
+    ol:           `<svg viewBox="0 0 16 16" fill="none" width="14" height="14" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"><text x="1" y="6" font-family="Arial" font-size="5" fill="currentColor" stroke="none">1.</text><line x1="6" y1="5" x2="14" y2="5"/><text x="1" y="10" font-family="Arial" font-size="5" fill="currentColor" stroke="none">2.</text><line x1="6" y1="9" x2="14" y2="9"/><text x="1" y="14" font-family="Arial" font-size="5" fill="currentColor" stroke="none">3.</text><line x1="6" y1="13" x2="14" y2="13"/></svg>`,
+    blockquote:   `<svg viewBox="0 0 16 16" fill="none" width="14" height="14"><text x="1" y="13" font-family="Georgia,serif" font-size="16" fill="currentColor" opacity=".6">"</text></svg>`,
+    code:         `<svg viewBox="0 0 16 16" fill="none" width="14" height="14" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"><path d="M5 4L1 8l4 4M11 4l4 4-4 4"/></svg>`,
+    link:         `<svg viewBox="0 0 16 16" fill="none" width="14" height="14" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"><path d="M6.5 9.5a3.5 3.5 0 005 0l2-2a3.5 3.5 0 00-5-5l-1 1"/><path d="M9.5 6.5a3.5 3.5 0 00-5 0l-2 2a3.5 3.5 0 005 5l1-1"/></svg>`,
+    'align-left':   `<svg viewBox="0 0 16 16" fill="none" width="14" height="14" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"><line x1="2" y1="4" x2="14" y2="4"/><line x1="2" y1="8" x2="10" y2="8"/><line x1="2" y1="12" x2="14" y2="12"/></svg>`,
+    'align-center': `<svg viewBox="0 0 16 16" fill="none" width="14" height="14" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"><line x1="2" y1="4" x2="14" y2="4"/><line x1="4" y1="8" x2="12" y2="8"/><line x1="2" y1="12" x2="14" y2="12"/></svg>`,
+    'align-right':  `<svg viewBox="0 0 16 16" fill="none" width="14" height="14" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"><line x1="2" y1="4" x2="14" y2="4"/><line x1="6" y1="8" x2="14" y2="8"/><line x1="2" y1="12" x2="14" y2="12"/></svg>`,
+    clear:          `<svg viewBox="0 0 16 16" fill="none" width="14" height="14" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"><path d="M3 3l10 10M13 3L3 13"/></svg>`,
+};
+
+export class NcRichText extends Component {
+    static useShadowDOM = true;
+
+    static get observedAttributes() {
+        return ['name', 'value', 'placeholder', 'disabled', 'readonly', 'toolbar', 'min-height', 'max-height'];
+    }
+
+    private _value = '';
+
+    constructor() { super(); }
+
+    private _getToolbarItems(): string[] {
+        const raw = this.getAttribute('toolbar');
+        if (raw) return raw.split(',').map(s => s.trim());
+        return ['bold','italic','underline','strike','|','h1','h2','h3','|','ul','ol','|','blockquote','code','|','link','|','align-left','align-center','align-right','|','clear'];
+    }
+
+    template() {
+        if (!this._mounted) {
+            this._value = this.getAttribute('value') || '';
+        }
+        const placeholder = this.getAttribute('placeholder') || 'Start typing...';
+        const disabled = this.hasAttribute('disabled');
+        const readonly = this.hasAttribute('readonly');
+        const minHeight = this.getAttribute('min-height') || '120px';
+        const maxHeight = this.getAttribute('max-height') || '400px';
+        const items = this._getToolbarItems();
+
+        const toolbarHtml = items.map(id => {
+            if (id === '|') return `<span class="tb-sep"></span>`;
+            const icon = ICONS[id] ?? '';
+            return `<button class="tb-btn" type="button" data-cmd="${id}" title="${id}" tabindex="-1">${icon}</button>`;
+        }).join('');
+
+        return `
+            <style>
+                :host { display: block; font-family: var(--nc-font-family); }
+
+                .editor-wrap {
+                    border: var(--nc-input-border);
+                    border-radius: var(--nc-input-radius);
+                    background: var(--nc-bg);
+                    overflow: hidden;
+                    opacity: ${disabled ? '0.5' : '1'};
+                    pointer-events: ${disabled ? 'none' : 'auto'};
+                    transition: border-color var(--nc-transition-fast), box-shadow var(--nc-transition-fast);
+                }
+                .editor-wrap:focus-within { border-color: var(--nc-input-focus-border); box-shadow: 0 0 0 3px rgba(16,185,129,.15); }
+
+                .toolbar {
+                    display: flex;
+                    flex-wrap: wrap;
+                    align-items: center;
+                    gap: 2px;
+                    padding: 6px 8px;
+                    border-bottom: 1px solid var(--nc-border);
+                    background: var(--nc-bg-secondary);
+                    user-select: none;
+                }
+
+                .tb-btn {
+                    display: inline-flex;
+                    align-items: center;
+                    justify-content: center;
+                    background: none;
+                    border: none;
+                    cursor: pointer;
+                    padding: 4px 6px;
+                    border-radius: var(--nc-radius-sm, 4px);
+                    color: var(--nc-text);
+                    transition: background var(--nc-transition-fast), color var(--nc-transition-fast);
+                    line-height: 1;
+                }
+                .tb-btn:hover { background: var(--nc-bg-tertiary); }
+                .tb-btn.active { background: var(--nc-primary); color: #fff; }
+
+                .tb-sep {
+                    width: 1px;
+                    height: 18px;
+                    background: var(--nc-border);
+                    margin: 0 4px;
+                    flex-shrink: 0;
+                }
+
+                .editable {
+                    padding: var(--nc-spacing-md);
+                    min-height: ${minHeight};
+                    max-height: ${maxHeight};
+                    overflow-y: auto;
+                    outline: none;
+                    font-size: var(--nc-font-size-base);
+                    line-height: var(--nc-line-height-relaxed, 1.7);
+                    color: var(--nc-text);
+                    word-break: break-word;
+                }
+
+                .editable:empty::before {
+                    content: attr(data-placeholder);
+                    color: var(--nc-text-muted);
+                    pointer-events: none;
+                }
+
+                /* Content styles */
+                .editable h1 { font-size: 1.8em; font-weight: 700; margin: 0.5em 0 0.25em; }
+                .editable h2 { font-size: 1.4em; font-weight: 700; margin: 0.5em 0 0.25em; }
+                .editable h3 { font-size: 1.1em; font-weight: 700; margin: 0.5em 0 0.25em; }
+                .editable ul, .editable ol { padding-left: 1.5em; margin: 0.4em 0; }
+                .editable blockquote { border-left: 3px solid var(--nc-primary); padding-left: var(--nc-spacing-md); margin: 0.4em 0; color: var(--nc-text-muted); font-style: italic; }
+                .editable code, .editable pre { background: var(--nc-bg-tertiary); border-radius: 4px; font-family: monospace; font-size: 0.9em; padding: 1px 5px; }
+                .editable a { color: var(--nc-primary); text-decoration: underline; }
+            </style>
+            <div class="editor-wrap">
+                <div class="toolbar">${toolbarHtml}</div>
+                <div
+                    class="editable"
+                    contenteditable="${!disabled && !readonly ? 'true' : 'false'}"
+                    data-placeholder="${placeholder}"
+                    role="textbox"
+                    aria-multiline="true"
+                    aria-label="${placeholder}"
+                >${this._value}</div>
+            </div>
+            <input type="hidden" name="${this.getAttribute('name') || ''}" value="" />
+        `;
+    }
+
+    onMount() {
+        this._bindEvents();
+        // Sync hidden input with initial value
+        const hidden = this.$<HTMLInputElement>('input[type="hidden"]')!;
+        hidden.value = this._value;
+    }
+
+    private _exec(cmd: string) {
+        const editable = this.$<HTMLElement>('.editable')!;
+        editable.focus();
+
+        switch (cmd) {
+            case 'bold':         document.execCommand('bold', false); break;
+            case 'italic':       document.execCommand('italic', false); break;
+            case 'underline':    document.execCommand('underline', false); break;
+            case 'strike':       document.execCommand('strikeThrough', false); break;
+            case 'h1':           document.execCommand('formatBlock', false, 'h1'); break;
+            case 'h2':           document.execCommand('formatBlock', false, 'h2'); break;
+            case 'h3':           document.execCommand('formatBlock', false, 'h3'); break;
+            case 'ul':           document.execCommand('insertUnorderedList', false); break;
+            case 'ol':           document.execCommand('insertOrderedList', false);  break;
+            case 'blockquote':   document.execCommand('formatBlock', false, 'blockquote'); break;
+            case 'code':         document.execCommand('formatBlock', false, 'pre'); break;
+            case 'align-left':   document.execCommand('justifyLeft', false); break;
+            case 'align-center': document.execCommand('justifyCenter', false); break;
+            case 'align-right':  document.execCommand('justifyRight', false); break;
+            case 'clear':        document.execCommand('removeFormat', false); break;
+            case 'link': {
+                const url = prompt('Enter URL:');
+                if (url) document.execCommand('createLink', false, url);
+                break;
+            }
+        }
+        this._onContentChange();
+        this._updateToolbarState();
+    }
+
+    private _onContentChange() {
+        const editable = this.$<HTMLElement>('.editable')!;
+        const html = editable.innerHTML;
+        this._value = html;
+        const hidden = this.$<HTMLInputElement>('input[type="hidden"]');
+        if (hidden) hidden.value = html;
+        const name = this.getAttribute('name') || '';
+        this.dispatchEvent(new CustomEvent('input', {
+            bubbles: true, composed: true,
+            detail: { value: html, name }
+        }));
+    }
+
+    private _updateToolbarState() {
+        this.shadowRoot!.querySelectorAll<HTMLButtonElement>('.tb-btn').forEach(btn => {
+            const cmd = btn.dataset.cmd ?? '';
+            let active = false;
+            switch (cmd) {
+                case 'bold':      active = document.queryCommandState('bold'); break;
+                case 'italic':    active = document.queryCommandState('italic'); break;
+                case 'underline': active = document.queryCommandState('underline'); break;
+                case 'strike':    active = document.queryCommandState('strikeThrough'); break;
+            }
+            btn.classList.toggle('active', active);
+        });
+    }
+
+    private _bindEvents() {
+        const toolbar = this.$<HTMLElement>('.toolbar')!;
+        const editable = this.$<HTMLElement>('.editable')!;
+
+        toolbar.addEventListener('mousedown', (e) => {
+            // Prevent losing selection when clicking toolbar buttons
+            e.preventDefault();
+        });
+        toolbar.addEventListener('click', (e) => {
+            const btn = (e.target as HTMLElement).closest<HTMLButtonElement>('[data-cmd]');
+            if (btn) this._exec(btn.dataset.cmd!);
+        });
+
+        editable.addEventListener('input', () => this._onContentChange());
+        editable.addEventListener('blur', () => {
+            this.dispatchEvent(new CustomEvent('change', {
+                bubbles: true, composed: true,
+                detail: { value: this._value, name: this.getAttribute('name') || '' }
+            }));
+        });
+        editable.addEventListener('keyup', () => this._updateToolbarState());
+        editable.addEventListener('mouseup', () => this._updateToolbarState());
+    }
+
+    getValue(): string { return this._value; }
+
+    setValue(html: string) {
+        this._value = html;
+        const editable = this.$<HTMLElement>('.editable');
+        if (editable) editable.innerHTML = html;
+        const hidden = this.$<HTMLInputElement>('input[type="hidden"]');
+        if (hidden) hidden.value = html;
+    }
+
+    attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+        if (oldValue === newValue) return;
+        if (name === 'value' && this._mounted) {
+            this.setValue(newValue || '');
+            return;
+        }
+        if (this._mounted) { this.render(); this._bindEvents(); }
+    }
+}
+
+defineComponent('nc-rich-text', NcRichText);

package/template/src/components/core/nc-scroll-top.ts

@@ -0,0 +1,116 @@
+/**
+ * NcScrollTop Component — floating "back to top" button
+ *
+ * Appends itself to document.body so it always sits over all content.
+ * Becomes visible after the user scrolls past `threshold` px.
+ *
+ * Attributes:
+ *   threshold  — scroll distance in px before appearing (default: 300)
+ *   position   — 'bottom-right'(default)|'bottom-left'|'bottom-center'
+ *   smooth     — boolean — use smooth scrolling (default: true)
+ *   label      — accessible aria-label (default: 'Back to top')
+ *   offset     — distance from screen edge in px (default: 24)
+ *   target     — optional CSS selector for the scroll container (default: window)
+ *
+ * Usage:
+ *   <nc-scroll-top></nc-scroll-top>
+ */
+import { Component, defineComponent } from '@core/component.js';
+import { addPassiveListener } from '@core/gpu-animation.js';
+import { dom } from '@utils/dom.js';
+
+export class NcScrollTop extends Component {
+    static useShadowDOM = true;
+
+    private _visible = false;
+    private _removeScroll: (() => void) | null = null;
+    private _scrollTarget: HTMLElement | Window = window;
+
+    template() {
+        const pos    = this.getAttribute('position') ?? 'bottom-right';
+        const offset = parseInt(this.getAttribute('offset') ?? '24', 10);
+        const label  = this.getAttribute('label') ?? 'Back to top';
+        const v      = this._visible;
+
+        const posStyle =
+            pos === 'bottom-left'   ? `left:${offset}px;right:auto;` :
+            pos === 'bottom-center' ? `left:50%;transform:translateX(-50%);` :
+            `right:${offset}px;left:auto;`;
+
+        return `
+            <style>
+                :host { display: contents; }
+                button {
+                    position: fixed;
+                    bottom: ${offset}px;
+                    ${posStyle}
+                    z-index: 900;
+                    width: 44px;
+                    height: 44px;
+                    border-radius: 50%;
+                    background: var(--nc-primary);
+                    color: var(--nc-white);
+                    border: none;
+                    cursor: pointer;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    box-shadow: var(--nc-shadow-md);
+                    opacity: ${v ? '1' : '0'};
+                    visibility: ${v ? 'visible' : 'hidden'};
+                    transform: ${v ? 'translateY(0) scale(1)' : 'translateY(12px) scale(0.9)'};
+                    pointer-events: ${v ? 'auto' : 'none'};
+                    transition:
+                        opacity var(--nc-transition-base),
+                        transform var(--nc-transition-base);
+                    outline: none;
+                }
+                button:hover  { opacity: 0.85; }
+                button:active { transform: scale(0.94); }
+                button:focus-visible { outline: 2px solid var(--nc-primary); outline-offset: 3px; }
+            </style>
+            <button type="button" aria-label="${label}" tabindex="${v ? '0' : '-1'}">
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
+                     fill="none" stroke="currentColor" stroke-width="2.5"
+                     stroke-linecap="round" stroke-linejoin="round">
+                    <polyline points="18 15 12 9 6 15"/>
+                </svg>
+            </button>
+        `;
+    }
+
+    onMount() {
+        const threshold = parseInt(this.getAttribute('threshold') ?? '300', 10);
+        const targetSelector = this.getAttribute('target');
+        this._scrollTarget = targetSelector
+            ? dom.query<HTMLElement>(targetSelector) ?? window
+            : window;
+
+        const updateVisibility = () => {
+            const currentScroll = this._scrollTarget instanceof Window
+                ? this._scrollTarget.scrollY
+                : this._scrollTarget.scrollTop;
+            const shouldShow = currentScroll > threshold;
+            if (shouldShow !== this._visible) {
+                this._visible = shouldShow;
+                this.render();
+            }
+        };
+
+        this._removeScroll = addPassiveListener(this._scrollTarget, 'scroll', updateVisibility);
+        updateVisibility();
+
+        this.shadowRoot!.addEventListener('click', () => this._scrollTop());
+    }
+
+    private _scrollTop() {
+        const smooth = this.getAttribute('smooth') !== 'false';
+        this._scrollTarget.scrollTo({ top: 0, behavior: smooth ? 'smooth' : 'auto' });
+    }
+
+    onUnmount() {
+        this._removeScroll?.();
+    }
+}
+
+defineComponent('nc-scroll-top', NcScrollTop);