create-nativecore 0.1.0 → 0.2.0

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

@@ -0,0 +1,143 @@
+/**
+ * NcTooltip Component
+ *
+ * Wraps any element and shows a tooltip on hover/focus.
+ *
+ * Attributes:
+ *   - tip: string — tooltip text (required)
+ *   - placement: 'top'|'bottom'|'left'|'right' (default: 'top')
+ *   - delay: number — ms before showing (default: 200)
+ *   - variant: 'default'|'light' (default: 'default')
+ *
+ * Usage:
+ *   <nc-tooltip tip="Save your changes">
+ *     <nc-button>Save</nc-button>
+ *   </nc-tooltip>
+ */
+
+import { Component, defineComponent } from '@core/component.js';
+
+export class NcTooltip extends Component {
+    static useShadowDOM = true;
+
+    static get observedAttributes() {
+        return ['tip', 'placement', 'delay', 'variant'];
+    }
+
+    private _showTimer: ReturnType<typeof setTimeout> | null = null;
+    private _visible = false;
+
+    template() {
+        const placement = this.getAttribute('placement') || 'top';
+        const variant = this.getAttribute('variant') || 'default';
+        const tip = this.getAttribute('tip') || '';
+
+        return `
+            <style>
+                :host { display: inline-flex; position: relative; }
+
+                .tip {
+                    position: absolute;
+                    z-index: 9999;
+                    padding: 5px 10px;
+                    border-radius: var(--nc-radius-sm, 4px);
+                    font-family: var(--nc-font-family);
+                    font-size: var(--nc-font-size-xs);
+                    line-height: 1.4;
+                    white-space: nowrap;
+                    pointer-events: none;
+                    opacity: 0;
+                    transform: ${placement === 'top' ? 'translateY(4px)' : placement === 'bottom' ? 'translateY(-4px)' : placement === 'left' ? 'translateX(4px)' : 'translateX(-4px)'};
+                    transition: opacity var(--nc-transition-fast), transform var(--nc-transition-fast);
+                    max-width: 220px;
+                    overflow-wrap: break-word;
+                    white-space: normal;
+                    text-align: center;
+                }
+
+                .tip--default { background: var(--nc-gray-900, #111); color: #fff; }
+                .tip--light   { background: var(--nc-bg); color: var(--nc-text); border: 1px solid var(--nc-border); box-shadow: var(--nc-shadow-md); }
+
+                /* Placement */
+                .tip[data-placement="top"]    { bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); }
+                .tip[data-placement="bottom"] { top: calc(100% + 8px);    left: 50%; transform: translateX(-50%) translateY(-4px); }
+                .tip[data-placement="left"]   { right: calc(100% + 8px);  top: 50%;  transform: translateY(-50%) translateX(4px); }
+                .tip[data-placement="right"]  { left: calc(100% + 8px);   top: 50%;  transform: translateY(-50%) translateX(-4px); }
+
+                .tip.visible {
+                    opacity: 1;
+                }
+                .tip[data-placement="top"].visible    { transform: translateX(-50%) translateY(0); }
+                .tip[data-placement="bottom"].visible { transform: translateX(-50%) translateY(0); }
+                .tip[data-placement="left"].visible   { transform: translateY(-50%) translateX(0); }
+                .tip[data-placement="right"].visible  { transform: translateY(-50%) translateX(0); }
+
+                /* Arrow */
+                .tip::after {
+                    content: '';
+                    position: absolute;
+                    border: 5px solid transparent;
+                }
+                .tip--default[data-placement="top"]::after    { top: 100%;   left: 50%; transform: translateX(-50%); border-top-color: var(--nc-gray-900, #111); }
+                .tip--default[data-placement="bottom"]::after { bottom: 100%; left: 50%; transform: translateX(-50%); border-bottom-color: var(--nc-gray-900, #111); }
+                .tip--default[data-placement="left"]::after   { left: 100%;  top: 50%;  transform: translateY(-50%); border-left-color: var(--nc-gray-900, #111); }
+                .tip--default[data-placement="right"]::after  { right: 100%; top: 50%;  transform: translateY(-50%); border-right-color: var(--nc-gray-900, #111); }
+
+                .tip--light[data-placement="top"]::after { display: none; }
+
+                ::slotted(*) { display: inline-flex; }
+            </style>
+            <slot></slot>
+            <div
+                class="tip tip--${variant}"
+                data-placement="${placement}"
+                role="tooltip"
+                aria-hidden="true"
+            >${tip}</div>
+        `;
+    }
+
+    onMount() {
+        const tip = this.$<HTMLElement>('.tip')!;
+        const delay = Number(this.getAttribute('delay') ?? 200);
+
+        const show = () => {
+            if (this._showTimer) clearTimeout(this._showTimer);
+            this._showTimer = setTimeout(() => {
+                tip.classList.add('visible');
+                tip.setAttribute('aria-hidden', 'false');
+                this._visible = true;
+            }, delay);
+        };
+
+        const hide = () => {
+            if (this._showTimer) { clearTimeout(this._showTimer); this._showTimer = null; }
+            tip.classList.remove('visible');
+            tip.setAttribute('aria-hidden', 'true');
+            this._visible = false;
+        };
+
+        this.addEventListener('mouseenter', show);
+        this.addEventListener('mouseleave', hide);
+        this.addEventListener('focusin', show);
+        this.addEventListener('focusout', hide);
+
+        // Hide on Escape
+        this.addEventListener('keydown', (e: KeyboardEvent) => {
+            if (e.key === 'Escape' && this._visible) hide();
+        });
+    }
+
+    onUnmount() {
+        if (this._showTimer) clearTimeout(this._showTimer);
+    }
+
+    attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+        if (oldValue !== newValue && this._mounted) {
+            this.render();
+            this.onMount();
+        }
+    }
+}
+
+defineComponent('nc-tooltip', NcTooltip);

package/template/src/components/frameworkRegistry.ts

@@ -0,0 +1,68 @@
+import { componentRegistry } from '@core/lazyComponents.js';
+
+export function registerFrameworkComponents(): void {
+    componentRegistry.register('loading-spinner', './core/loading-spinner.js');
+    componentRegistry.register('nc-scroll-top', './core/nc-scroll-top.js');
+    componentRegistry.register('nc-snackbar', './core/nc-snackbar.js');
+    componentRegistry.register('nc-a', './core/nc-a.js');
+    componentRegistry.register('nc-accordion-item', './core/nc-accordion.js');
+    componentRegistry.register('nc-accordion', './core/nc-accordion.js');
+    componentRegistry.register('nc-alert', './core/nc-alert.js');
+    componentRegistry.register('nc-animation', './core/nc-animation.js');
+    componentRegistry.register('nc-autocomplete', './core/nc-autocomplete.js');
+    componentRegistry.register('nc-avatar-group', './core/nc-avatar-group.js');
+    componentRegistry.register('nc-avatar', './core/nc-avatar.js');
+    componentRegistry.register('nc-badge', './core/nc-badge.js');
+    componentRegistry.register('nc-bottom-nav-item', './core/nc-bottom-nav.js');
+    componentRegistry.register('nc-bottom-nav', './core/nc-bottom-nav.js');
+    componentRegistry.register('nc-breadcrumb', './core/nc-breadcrumb.js');
+    componentRegistry.register('nc-button', './core/nc-button.js');
+    componentRegistry.register('nc-card', './core/nc-card.js');
+    componentRegistry.register('nc-checkbox', './core/nc-checkbox.js');
+    componentRegistry.register('nc-chip', './core/nc-chip.js');
+    componentRegistry.register('nc-code', './core/nc-code.js');
+    componentRegistry.register('nc-collapsible', './core/nc-collapsible.js');
+    componentRegistry.register('nc-color-picker', './core/nc-color-picker.js');
+    componentRegistry.register('nc-copy-button', './core/nc-copy-button.js');
+    componentRegistry.register('nc-date-picker', './core/nc-date-picker.js');
+    componentRegistry.register('nc-div', './core/nc-div.js');
+    componentRegistry.register('nc-divider', './core/nc-divider.js');
+    componentRegistry.register('nc-drawer', './core/nc-drawer.js');
+    componentRegistry.register('nc-dropdown', './core/nc-dropdown.js');
+    componentRegistry.register('nc-empty-state', './core/nc-empty-state.js');
+    componentRegistry.register('nc-file-upload', './core/nc-file-upload.js');
+    componentRegistry.register('nc-field', './core/nc-form.js');
+    componentRegistry.register('nc-form', './core/nc-form.js');
+    componentRegistry.register('nc-image', './core/nc-image.js');
+    componentRegistry.register('nc-input', './core/nc-input.js');
+    componentRegistry.register('nc-kbd', './core/nc-kbd.js');
+    componentRegistry.register('nc-menu-item', './core/nc-menu-item.js');
+    componentRegistry.register('nc-menu', './core/nc-menu.js');
+    componentRegistry.register('nc-modal', './core/nc-modal.js');
+    componentRegistry.register('nc-nav-item', './core/nc-nav-item.js');
+    componentRegistry.register('nc-number-input', './core/nc-number-input.js');
+    componentRegistry.register('nc-otp-input', './core/nc-otp-input.js');
+    componentRegistry.register('nc-pagination', './core/nc-pagination.js');
+    componentRegistry.register('nc-popover', './core/nc-popover.js');
+    componentRegistry.register('nc-progress-circular', './core/nc-progress-circular.js');
+    componentRegistry.register('nc-progress', './core/nc-progress.js');
+    componentRegistry.register('nc-radio', './core/nc-radio.js');
+    componentRegistry.register('nc-rating', './core/nc-rating.js');
+    componentRegistry.register('nc-rich-text', './core/nc-rich-text.js');
+    componentRegistry.register('nc-select', './core/nc-select.js');
+    componentRegistry.register('nc-skeleton', './core/nc-skeleton.js');
+    componentRegistry.register('nc-slider', './core/nc-slider.js');
+    componentRegistry.register('nc-splash', './core/nc-splash.js');
+    componentRegistry.register('nc-step', './core/nc-stepper.js');
+    componentRegistry.register('nc-stepper', './core/nc-stepper.js');
+    componentRegistry.register('nc-switch', './core/nc-switch.js');
+    componentRegistry.register('nc-tab-item', './core/nc-tab-item.js');
+    componentRegistry.register('nc-table', './core/nc-table.js');
+    componentRegistry.register('nc-tabs', './core/nc-tabs.js');
+    componentRegistry.register('nc-tag-input', './core/nc-tag-input.js');
+    componentRegistry.register('nc-textarea', './core/nc-textarea.js');
+    componentRegistry.register('nc-time-picker', './core/nc-time-picker.js');
+    componentRegistry.register('nc-timeline-item', './core/nc-timeline.js');
+    componentRegistry.register('nc-timeline', './core/nc-timeline.js');
+    componentRegistry.register('nc-tooltip', './core/nc-tooltip.js');
+}

package/template/src/components/preloadRegistry.ts

@@ -0,0 +1,28 @@
+/**
+ * Preload Registry
+ * 
+ * Components imported here are loaded immediately when the app starts,
+ * rather than lazy-loading on first use.
+ * 
+ * Only import critical components that are needed on initial page load:
+ * - Layout components (header, footer, sidebar)
+ * - Components used on the home/landing page
+ * - Core UI components used everywhere
+ * 
+ * Generated components with preload=Y will be added here automatically.
+ */
+
+// Core layout components used directly in the HTML shells.
+import './core/app-header.js';
+import './core/app-sidebar.js';
+import './core/app-footer.js';
+
+// Initial route components used on first paint.
+import './core/loading-spinner.js';
+import './core/nc-a.js';
+import './core/nc-splash.js';
+import './core/nc-scroll-top.js';
+import './core/nc-snackbar.js';
+
+// Other critical components
+// Add your preloaded components here

package/template/src/components/registry.ts

@@ -0,0 +1,8 @@
+/**
+ * Component Registry
+ */
+import { registerAppComponents } from './appRegistry.js';
+import { registerFrameworkComponents } from './frameworkRegistry.js';
+
+registerFrameworkComponents();
+registerAppComponents();

package/template/src/components/ui/dashboard-signal-lab.ts

@@ -0,0 +1,284 @@
+import { Component, defineComponent } from '@core/component.js';
+import { useState, computed } from '@core/state.js';
+import type { State, ComputedState } from '@core/state.js';
+import { html } from '@utils/templates.js';
+
+export class DashboardSignalLab extends Component {
+    static useShadowDOM = true;
+    completedItems: State<number>;
+    totalItems: State<number>;
+    completionPercent: ComputedState<number>;
+    remainingItems: ComputedState<number>;
+    statusLabel: ComputedState<string>;
+
+    private _unwatchCompleted?: () => void;
+    private _unwatchTotal?: () => void;
+    private _unwatchCompletionPercent?: () => void;
+    private _unwatchRemainingItems?: () => void;
+    private _unwatchStatusLabel?: () => void;
+    private readonly _handleClick = (event: Event) => {
+        const target = event.target as HTMLElement;
+
+        if (target.closest('[data-action="add-item"]')) {
+            this.totalItems.value += 1;
+        }
+
+        if (target.closest('[data-action="complete-item"]') && this.completedItems.value < this.totalItems.value) {
+            this.completedItems.value += 1;
+        }
+
+        if (target.closest('[data-action="reset-items"]')) {
+            this.totalItems.value = 18;
+            this.completedItems.value = 14;
+        }
+    };
+    
+    constructor() {
+        super();
+
+        this.completedItems = useState(14);
+        this.totalItems = useState(18);
+        this.completionPercent = computed(() => Math.round((this.completedItems.value / this.totalItems.value) * 100));
+        this.remainingItems = computed(() => Math.max(this.totalItems.value - this.completedItems.value, 0));
+        this.statusLabel = computed(() => {
+            if (this.completionPercent.value >= 90) return 'Release ready';
+            if (this.completionPercent.value >= 70) return 'On track';
+            return 'Needs focus';
+        });
+    }
+    
+    template() {
+        return html`
+            <style>
+                :host {
+                    display: block;
+                }
+
+                .signal-lab {
+                    padding: 1.4rem;
+                    border-radius: 24px;
+                    background: linear-gradient(180deg, #0f172a, #111827);
+                    color: #f8fafc;
+                    border: 1px solid rgba(148, 163, 184, 0.22);
+                    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.22);
+                }
+
+                .signal-lab__eyebrow {
+                    display: inline-flex;
+                    align-items: center;
+                    padding: 0.35rem 0.7rem;
+                    border-radius: 999px;
+                    background: rgba(16, 185, 129, 0.18);
+                    color: #86efac;
+                    font-size: 0.72rem;
+                    font-weight: 700;
+                    letter-spacing: 0.08em;
+                    text-transform: uppercase;
+                }
+
+                .signal-lab__title {
+                    margin: 1rem 0 0.4rem;
+                    font-size: 1.35rem;
+                    line-height: 1.15;
+                }
+
+                .signal-lab__copy {
+                    margin: 0;
+                    color: rgba(226, 232, 240, 0.76);
+                    line-height: 1.65;
+                }
+
+                .signal-lab__stats {
+                    display: grid;
+                    grid-template-columns: repeat(3, minmax(0, 1fr));
+                    gap: 0.85rem;
+                    margin: 1.25rem 0;
+                }
+
+                .signal-lab__stat {
+                    padding: 0.9rem;
+                    border-radius: 18px;
+                    background: rgba(15, 23, 42, 0.6);
+                    border: 1px solid rgba(148, 163, 184, 0.16);
+                }
+
+                .signal-lab__stat-label {
+                    display: block;
+                    color: rgba(148, 163, 184, 0.9);
+                    font-size: 0.74rem;
+                    font-weight: 700;
+                    text-transform: uppercase;
+                    letter-spacing: 0.08em;
+                    margin-bottom: 0.45rem;
+                }
+
+                .signal-lab__stat-value {
+                    display: block;
+                    font-size: 1.7rem;
+                    font-weight: 700;
+                    color: #ffffff;
+                }
+
+                .signal-lab__bar {
+                    position: relative;
+                    height: 10px;
+                    border-radius: 999px;
+                    background: rgba(148, 163, 184, 0.18);
+                    overflow: hidden;
+                }
+
+                .signal-lab__bar-fill {
+                    position: absolute;
+                    inset: 0 auto 0 0;
+                    width: ${this.completionPercent.value}%;
+                    background: linear-gradient(90deg, #10b981, #34d399);
+                    border-radius: inherit;
+                    transition: width 180ms ease;
+                }
+
+                .signal-lab__status {
+                    margin: 0.85rem 0 0;
+                    color: #e2e8f0;
+                    font-size: 0.94rem;
+                }
+
+                .signal-lab__actions {
+                    display: flex;
+                    flex-wrap: wrap;
+                    gap: 0.75rem;
+                    margin-top: 1rem;
+                }
+
+                .signal-lab__button {
+                    border: none;
+                    border-radius: 12px;
+                    padding: 0.75rem 1rem;
+                    font: inherit;
+                    font-weight: 600;
+                    cursor: pointer;
+                    transition: transform 0.15s ease, opacity 0.15s ease, background 0.15s ease;
+                }
+
+                .signal-lab__button:hover {
+                    transform: translateY(-1px);
+                }
+
+                .signal-lab__button--primary {
+                    background: #10b981;
+                    color: #052e16;
+                }
+
+                .signal-lab__button--secondary {
+                    background: rgba(255, 255, 255, 0.08);
+                    color: #f8fafc;
+                    border: 1px solid rgba(148, 163, 184, 0.24);
+                }
+
+                .signal-lab__code {
+                    margin-top: 1.25rem;
+                    padding: 0.95rem 1rem;
+                    border-radius: 18px;
+                    background: rgba(2, 6, 23, 0.88);
+                    border: 1px solid rgba(148, 163, 184, 0.14);
+                    overflow-x: auto;
+                    color: #cbd5e1;
+                    font-size: 0.82rem;
+                    line-height: 1.7;
+                    white-space: pre;
+                }
+
+                @media (max-width: 640px) {
+                    .signal-lab__stats {
+                        grid-template-columns: 1fr;
+                    }
+
+                    .signal-lab__code {
+                        white-space: pre-wrap;
+                    }
+                }
+            </style>
+
+            <div class="signal-lab">
+                <span class="signal-lab__eyebrow">Live Signals</span>
+                <h3 class="signal-lab__title">useState + computed without a view-layer rerender loop</h3>
+                <p class="signal-lab__copy">Update scoped values and derived metrics in place to show how NativeCore keeps interaction logic simple.</p>
+
+                <div class="signal-lab__stats">
+                    <div class="signal-lab__stat">
+                        <span class="signal-lab__stat-label">Completed</span>
+                        <span class="signal-lab__stat-value" id="completed-count">${this.completedItems.value}</span>
+                    </div>
+                    <div class="signal-lab__stat">
+                        <span class="signal-lab__stat-label">Remaining</span>
+                        <span class="signal-lab__stat-value" id="remaining-count">${this.remainingItems.value}</span>
+                    </div>
+                    <div class="signal-lab__stat">
+                        <span class="signal-lab__stat-label">Completion</span>
+                        <span class="signal-lab__stat-value" id="completion-percent">${this.completionPercent.value}%</span>
+                    </div>
+                </div>
+
+                <div class="signal-lab__bar" aria-hidden="true">
+                    <div class="signal-lab__bar-fill" id="completion-bar"></div>
+                </div>
+
+                <p class="signal-lab__status">Current status: <strong id="status-label">${this.statusLabel.value}</strong></p>
+
+                <div class="signal-lab__actions">
+                    <button class="signal-lab__button signal-lab__button--primary" type="button" data-action="complete-item">Complete item</button>
+                    <button class="signal-lab__button signal-lab__button--secondary" type="button" data-action="add-item">Add scope</button>
+                    <button class="signal-lab__button signal-lab__button--secondary" type="button" data-action="reset-items">Reset demo</button>
+                </div>
+
+                <div class="signal-lab__code">const completed = useState(14);
+const total = useState(18);
+const completion = computed(() =&gt; Math.round((completed.value / total.value) * 100));</div>
+            </div>
+        `;
+    }
+
+    onMount() {
+        this.shadowRoot.addEventListener('click', this._handleClick);
+
+        this._unwatchCompleted = this.completedItems.watch(value => {
+            const target = this.shadowRoot.querySelector('#completed-count');
+            if (target) target.textContent = String(value);
+        });
+
+        this._unwatchTotal = this.totalItems.watch(() => {
+            const percent = this.shadowRoot.querySelector('#completion-percent');
+            if (percent) percent.textContent = `${this.completionPercent.value}%`;
+        });
+
+        this._unwatchCompletionPercent = this.completionPercent.watch(value => {
+            const percent = this.shadowRoot.querySelector('#completion-percent');
+            const bar = this.shadowRoot.querySelector<HTMLElement>('#completion-bar');
+            if (percent) percent.textContent = `${value}%`;
+            if (bar) bar.style.width = `${value}%`;
+        });
+
+        this._unwatchRemainingItems = this.remainingItems.watch(value => {
+            const target = this.shadowRoot.querySelector('#remaining-count');
+            if (target) target.textContent = String(value);
+        });
+
+        this._unwatchStatusLabel = this.statusLabel.watch(value => {
+            const target = this.shadowRoot.querySelector('#status-label');
+            if (target) target.textContent = value;
+        });
+    }
+
+    onUnmount() {
+        this.shadowRoot?.removeEventListener('click', this._handleClick);
+        this._unwatchCompleted?.();
+        this._unwatchTotal?.();
+        this._unwatchCompletionPercent?.();
+        this._unwatchRemainingItems?.();
+        this._unwatchStatusLabel?.();
+        this.completionPercent.dispose();
+        this.remainingItems.dispose();
+        this.statusLabel.dispose();
+    }
+}
+
+defineComponent('dashboard-signal-lab', DashboardSignalLab);

package/template/src/constants/apiEndpoints.ts

@@ -0,0 +1,27 @@
+/**
+ * API Endpoint Constants
+ */
+
+export const API_ENDPOINTS = {
+    AUTH: {
+        LOGIN: '/auth/login',
+        LOGOUT: '/auth/logout',
+        REFRESH: '/auth/refresh',
+        VERIFY: '/auth/verify',
+    },
+    
+    DASHBOARD: {
+        STATS: '/dashboard/stats',
+        ACTIVITY: '/dashboard/activity',
+    },
+    
+    USERS: {
+        LIST: '/users',
+        DETAIL: (id: string | number) => `/users/${id}`,
+        CREATE: '/users',
+        UPDATE: (id: string | number) => `/users/${id}`,
+        DELETE: (id: string | number) => `/users/${id}`,
+    },
+} as const;
+
+export default API_ENDPOINTS;

package/template/src/constants/errorMessages.ts

@@ -0,0 +1,23 @@
+/**
+ * Error Message Constants
+ */
+
+export const ERROR_MESSAGES = {
+    NETWORK_ERROR: 'Unable to connect to the server. Please check your internet connection.',
+    TIMEOUT: 'Request timed out. Please try again.',
+    SERVER_ERROR: 'Something went wrong on our end. Please try again later.',
+    
+    UNAUTHORIZED: 'Your session has expired. Please log in again.',
+    FORBIDDEN: 'You do not have permission to access this resource.',
+    INVALID_CREDENTIALS: 'Invalid email or password.',
+    
+    REQUIRED_FIELD: (field: string) => `${field} is required.`,
+    INVALID_EMAIL: 'Please enter a valid email address.',
+    PASSWORD_TOO_SHORT: 'Password must be at least 8 characters long.',
+    PASSWORDS_DONT_MATCH: 'Passwords do not match.',
+    
+    NOT_FOUND: 'The requested resource was not found.',
+    UNKNOWN_ERROR: 'An unexpected error occurred. Please try again.',
+} as const;
+
+export default ERROR_MESSAGES;

package/template/src/constants/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Constants Index
+ */
+
+export { ROUTES } from './routePaths.js';
+export { API_ENDPOINTS } from './apiEndpoints.js';
+export { STORAGE_KEYS } from './storageKeys.js';
+export { ERROR_MESSAGES } from './errorMessages.js';

package/template/src/constants/routePaths.ts

@@ -0,0 +1,15 @@
+/**
+ * Application Routes
+ */
+
+export const ROUTES = {
+    HOME: '/',
+    ABOUT: '/about',
+    LOGIN: '/login',
+    
+    DASHBOARD: '/dashboard',
+    USER_DETAIL: '/users/:id',
+    PROFILE: '/profile',
+} as const;
+
+export default ROUTES;

package/template/src/constants/storageKeys.ts

@@ -0,0 +1,18 @@
+/**
+ * Storage Key Constants
+ */
+
+export const STORAGE_KEYS = {
+    ACCESS_TOKEN: 'access_token',
+    REFRESH_TOKEN: 'refresh_token',
+    USER_DATA: 'user_data',
+    
+    SIDEBAR_COLLAPSED: 'sidebar-collapsed',
+    THEME: 'theme',
+    LANGUAGE: 'language',
+    
+    CACHE_PREFIX: 'cache_',
+    CACHE_TIMESTAMP: 'cache_timestamp',
+} as const;
+
+export default STORAGE_KEYS;