@ziyarago/ui 0.1.1 → 0.3.0

package/src/meta/media.js

@@ -9,6 +9,11 @@ export default {
     props: {
       name: { type: 'string', description: 'Full name. Shown as the tooltip and used for up to two initials; "?" when empty.' },
       src: { type: 'string', description: 'Image URL. Initials are shown without it.' },
+      initials: { type: 'string', description: 'Explicit initials (up to 3 characters, uppercased) instead of the ones derived from name.' },
+      tone: { type: "'brand' | 'sky' | 'success' | 'warning' | 'danger' | 'neutral'", values: ['brand', 'sky', 'success', 'warning', 'danger', 'neutral'], default: 'brand', description: 'Background color of the initials avatar.' },
+      shape: { type: "'circle' | 'rounded'", values: ['circle', 'rounded'], default: 'circle', description: 'rounded gives a squircle with a 30% corner radius.' },
+      ring: { type: 'boolean', default: false, description: 'Adds a background-colored ring so overlapping avatars stay separated.' },
+      status: { type: "'online' | 'offline' | 'away' | 'busy'", values: ['online', 'offline', 'away', 'busy'], description: 'Shows a presence dot in the bottom corner.' },
       size: { type: "'xs' | 'sm' | 'md' | 'lg' | 'xl' | number", values: SZ, default: 'md', description: 'Diameter: xs 24, sm 32, md 40, lg 56, xl 72 px. A number is used directly as px.' },
     },
     notes: ['Avatar sizes differ from other components (lg 56, xl 72), and a number gives any custom size.'],
@@ -74,8 +79,8 @@ export default {
       label: { type: 'string', default: 'Map', description: 'aria-label of the map region.' },
       labels: { type: '{ zoomIn?: string; zoomOut?: string }', default: "{ zoomIn: 'Zoom in', zoomOut: 'Zoom out' }", description: 'Accessible names of the zoom buttons.' },
     },
-    events: { select: 'Called with the marker object when a marker is clicked.' },
-    notes: ['The center and zoom props are initial values; user panning and zooming is kept in internal state.', 'Tiles come from a third-party CDN, so it needs network access.'],
+    events: { select: 'Called with the marker object when a marker is clicked.', move: 'Called with { lat, lon, zoom } while the user pans or zooms (drag, touch, wheel, double click or the +/- buttons).', zoom: 'Called with the new zoom level when it changes.' },
+    notes: ['The center and zoom props are initial values; user panning and zooming is kept in internal state. Listen to move/zoom to track it.','Drag or touch to pan, wheel or double click to zoom around the pointer. The tile theme follows the page data-theme after mount (light tiles on the server render) unless theme or style is set.', 'Tiles come from a third-party CDN, so it needs network access.'],
   },
 
   ProfileHeader: {

package/src/meta/navigation.js

@@ -72,6 +72,7 @@ export default {
     props: {
       items: { type: '{ label: string; href?: string }[]', default: '[]', description: 'Trail from root to current. All but the last render as links (href defaults to "#"); the last is bold with aria-current="page".' },
       size: size('text and separator size'),
+      separator: { type: "'chevron' | 'slash' | 'dot'", values: ['chevron', 'slash', 'dot'], default: 'chevron', description: 'Glyph between items.' },
     },
   },
 
@@ -82,6 +83,8 @@ export default {
       pages: { type: 'number', default: 1, description: 'Total number of pages.' },
       siblings: { type: 'number', default: 1, description: 'Page buttons shown on each side of the current page. First and last page are always shown; gaps become an ellipsis.' },
       label: { type: 'string', default: 'Pagination', description: 'Accessible name of the navigation landmark.' },
+      hideArrows: { type: 'boolean', default: false, description: 'Hides the previous and next buttons.' },
+      labels: { type: '{ prev?: string; next?: string; page?: string }', default: "{ prev: 'Previous page', next: 'Next page', page: 'Page' }", description: 'Accessible names of the arrow buttons and of each page button ("Page 3").' },
       size: size('button size and text'),
     },
     events: { change: 'Called with the clicked page number (also from the previous and next buttons).' },

package/src/meta/overlay.js

@@ -17,9 +17,14 @@ export default {
     props: {
       open: open('dialog'),
       title: { type: 'string', description: 'Header text and aria-label of the dialog.' },
+      subtitle: { type: 'string', description: 'Muted line under the title in the header.' },
+      closable: { type: 'boolean', default: true, description: 'false hides the close (x) button in the header.' },
+      closeOnBackdrop: { type: 'boolean', default: true, description: 'false ignores clicks on the scrim.' },
+      closeOnEsc: { type: 'boolean', default: true, description: 'false ignores the Escape key (focus trap stays active).' },
+      width: { type: 'string', description: 'CSS max-width of the dialog, for example "960px". Overrides the width of size.' },
       size: size('width (320 to 720 px max), padding and text'),
     },
-    slots: { default: 'Dialog body.', footer: 'Footer area, usually action buttons. Rendered only when provided.' },
+    slots: { default: 'Dialog body.', footer: 'Footer area, usually action buttons. Rendered only when provided.', title: 'Replaces the title prop with custom header content.', subtitle: 'Replaces the subtitle prop.' },
     events: { close: 'Called on the close button, a click on the scrim or the Escape key. Set open to false in the handler.' },
     notes: ['Has role="dialog" and aria-modal. Escape calls close; on open focus moves into the dialog, Tab is trapped inside it and focus returns to the previously focused element on close.', 'Put data-autofocus on an element to choose which one receives initial focus (default: first focusable).', 'Closed state renders nothing, so inner state is lost on close.'],
   },
@@ -146,10 +151,11 @@ export default {
     description: 'Short text bubble shown on hover or focus of the wrapped element; use for icon-only controls and hints.',
     props: {
       text: { type: 'string', required: true, description: 'Tooltip text.' },
+      placement: { type: "'top' | 'bottom' | 'left' | 'right'", values: ['top', 'bottom', 'left', 'right'], default: 'top', description: 'Side of the wrapped element where the bubble appears.' },
       size: size('bubble padding and font'),
     },
     slots: { default: 'The element the tooltip is attached to.' },
-    notes: ['Pure CSS bubble with fixed placement; it cannot contain markup. For rich content use HoverCard.'],
+    notes: ['Pure CSS bubble; it cannot contain markup. For rich content use HoverCard.'],
   },
 
   Dropdown: {

package/src/nuxt/module.mjs

@@ -5,7 +5,7 @@ import { themeInitScript } from '../theme.js';
 
 export default defineNuxtModule({
   meta: { name: '@ziyarago/ui', configKey: 'ziyarago', compatibility: { nuxt: '>=3.0.0' } },
-  defaults: { css: true, prefix: 'Ui', theme: { theme: 'dark', palette: 'gold', dir: 'ltr' } },
+  defaults: { css: true, prefix: 'Ui', theme: { theme: 'dark', palette: 'gold', dir: 'ltr', bg: 'none', locale: 'en' } },
   setup(opts, nuxt) {
     const { resolve } = createResolver(import.meta.url);
     if (opts.css) nuxt.options.css.push('@ziyarago/ui/style.css');
@@ -21,7 +21,7 @@ export default defineNuxtModule({
     if (opts.theme) {
       nuxt.options.runtimeConfig.public.ziyarago = opts.theme;
       const head = nuxt.options.app.head ||= {};
-      head.htmlAttrs = { ...(head.htmlAttrs || {}), 'data-theme': opts.theme.theme, 'data-palette': opts.theme.palette, dir: opts.theme.dir };
+      head.htmlAttrs = { ...(head.htmlAttrs || {}), 'data-theme': opts.theme.theme, 'data-palette': opts.theme.palette, 'data-bg': opts.theme.bg || 'none', dir: opts.theme.dir };
       addPlugin(resolve('./plugin.mjs'));
       head.script = [...(head.script || []), { innerHTML: themeInitScript, tagPosition: 'head' }];
     }

package/src/nuxt/plugin.mjs

@@ -1,9 +1,10 @@
 import { defineNuxtPlugin, useRuntimeConfig } from '#imports';
-import { useUiTheme } from '../theme.js';
+import { applySavedLocale, configureTheme, useUiTheme } from '../theme.js';
+import { setUiLocale } from '../i18n/index.js';
 
-export default defineNuxtPlugin(() => {
-  const ui = useUiTheme();
+export default defineNuxtPlugin(nuxtApp => {
   const d = useRuntimeConfig().public.ziyarago || {};
-  const saved = (() => { try { return localStorage.getItem('zg-ui'); } catch { return null; } })();
-  if (!saved) { ui.setTheme(d.theme || 'dark'); ui.setPalette(d.palette || 'gold'); ui.setDir(d.dir || 'ltr'); }
+  configureTheme({ theme: d.theme || 'dark', palette: d.palette || 'gold', dir: d.dir || 'ltr', bg: d.bg || 'none', locale: d.locale || 'en' });
+  useUiTheme();
+  nuxtApp.hook('app:mounted', () => { if (d.locale) setUiLocale(d.locale); applySavedLocale(); });
 });

package/src/react/index.js

@@ -1,12 +1,14 @@
+'use client';
 // React 18+ adapter. Usage: import { UiButton, UiAppShell } from '@ziyarago/ui/react'
-import React, { useState, createElement, cloneElement, isValidElement } from 'react';
+import React, { useState, useRef, useEffect, useLayoutEffect, useSyncExternalStore, createElement, cloneElement, isValidElement } from 'react';
 import { createPortal } from 'react-dom';
-import { components } from '../core/index.js';
+import { components, subscribeUiLocale, getUiVersion } from '../core/index.js';
 
 const C = {};
-const EV = { keydown: 'KeyDown', keyup: 'KeyUp', dragenter: 'DragEnter', dragover: 'DragOver', dragleave: 'DragLeave', pointerdown: 'PointerDown', pointerup: 'PointerUp', pointermove: 'PointerMove', mousedown: 'MouseDown', mouseup: 'MouseUp', mouseenter: 'MouseEnter', mouseleave: 'MouseLeave' };
+const useIsoLayoutEffect = typeof document === 'undefined' ? useEffect : useLayoutEffect;
+const EV = { keydown: 'KeyDown', keyup: 'KeyUp', dragenter: 'DragEnter', dragover: 'DragOver', dragleave: 'DragLeave', pointerdown: 'PointerDown', pointerup: 'PointerUp', pointermove: 'PointerMove', mousedown: 'MouseDown', mouseup: 'MouseUp', mouseenter: 'MouseEnter', mouseleave: 'MouseLeave', mousemove: 'MouseMove', mouseover: 'MouseOver', mouseout: 'MouseOut', dragstart: 'DragStart', dragend: 'DragEnd', dblclick: 'DoubleClick', contextmenu: 'ContextMenu', pointerenter: 'PointerEnter', pointerleave: 'PointerLeave', pointercancel: 'PointerCancel', touchstart: 'TouchStart', touchend: 'TouchEnd', touchmove: 'TouchMove', focusin: 'FocusIn', focusout: 'FocusOut' };
 const hh = (t, p, ...k) => {
-  if (p && typeof t === 'string') { const q = {}; for (const key in p) { const m = /^on([a-z]+)$/.exec(key); q[m && EV[m[1]] ? 'on' + EV[m[1]] : key] = p[key]; } p = q; }
+  if (p && typeof t === 'string') { const q = {}; for (const key in p) { const m = /^on([A-Za-z]+)$/.exec(key), n = m && EV[m[1].toLowerCase()]; q[n ? 'on' + n : key] = p[key]; } p = q; }
   if (p && 'class' in p) { const { class: cls, ...rest } = p; p = { ...rest, className: cls }; }
   if (p) { const q = {}; for (const key in p) q[/^(aria|data)-/.test(key) || !key.includes('-') ? key : key.replace(/-(\w)/g, (_, c) => c.toUpperCase())] = p[key]; p = q; }
   if (p && typeof p.innerHTML === 'string') { const { innerHTML, ...rest } = p; p = { ...rest, dangerouslySetInnerHTML: { __html: innerHTML }, suppressContentEditableWarning: true }; }
@@ -14,18 +16,210 @@ const hh = (t, p, ...k) => {
 };
 const wrap = (name, def) => {
   const Comp = ({ children, ...props }) => {
+    useSyncExternalStore(subscribeUiLocale, getUiVersion, () => 0);
     const [state, setState] = useState({ ...(def.state || {}) });
     const set = o => setState(s => ({ ...s, ...o }));
+    // Portals must not render on the server pass or during hydration (React throws a hydration mismatch): the first render returns null
+    // and, only if portal() was asked for, a layout effect re-renders once mounted.
+    const mounted = useRef(false), wantPortal = useRef(false), [, bump] = useState(0);
+    useIsoLayoutEffect(() => { mounted.current = true; if (wantPortal.current) bump(n => n + 1); }, []);
     const slots = {}; for (const k of [...(def.slots || []), 'actions', 'footer']) if (props[k] !== undefined) slots[k] = props[k];
     if (props.onChange === undefined && props.onValueChange) props.onChange = props.onValueChange;
-    const out = def.render({ C, h: hh, props, children: React.Children.toArray(children), slots, state, set, portal: (kids, to) => typeof document === 'undefined' ? null : createPortal(kids, (typeof to === 'string' ? document.querySelector(to) : to) || document.body) });
-    return props.size && isValidElement(out) && typeof out.type === 'string' ? cloneElement(out, { 'data-size': props.size }) : out;
+    const out = def.render({ C, h: hh, props, children: React.Children.toArray(children), slots, state, set, portal: (kids, to) => { if (!mounted.current) { wantPortal.current = true; return null; } return createPortal(kids, (typeof to === 'string' ? document.querySelector(to) : to) || document.body); } });
+    if (!isValidElement(out) || typeof out.type !== 'string') return out;
+    const root = {}; for (const k in props) if (/^(aria|data)-|^id$/.test(k)) root[k] = props[k];
+    if (props.size) root['data-size'] = props.size;
+    if (props.className) root.className = [out.props.className, props.className].filter(Boolean).join(' ');
+    if (props.style && typeof props.style === 'object') root.style = { ...out.props.style, ...props.style };
+    return Object.keys(root).length ? cloneElement(out, root) : out;
   };
   Comp.displayName = 'Ui' + name;
   return Comp;
 };
 for (const [name, def] of Object.entries(components)) C[name] = wrap(name, def);
 
-export const { Button: UiButton, IconButton: UiIconButton, Badge: UiBadge, Avatar: UiAvatar, Switch: UiSwitch, Checkbox: UiCheckbox, SegmentedControl: UiSegmentedControl, Tabs: UiTabs, FilterChips: UiFilterChips, TextField: UiTextField, Select: UiSelect, CodeInput: UiCodeInput, Stepper: UiStepper, Card: UiCard, Modal: UiModal, Drawer: UiDrawer, Toast: UiToast, Breadcrumbs: UiBreadcrumbs, Pagination: UiPagination, Progress: UiProgress, Ring: UiRing, KpiTile: UiKpiTile, DataTable: UiDataTable, KanbanColumn: UiKanbanColumn, KanbanCard: UiKanbanCard, Timeline: UiTimeline, TopNav: UiTopNav, SideNav: UiSideNav, AppShell: UiAppShell, PageHeader: UiPageHeader, AuthLayout: UiAuthLayout, LeadCard: UiLeadCard, HotelCard: UiHotelCard, TourCard: UiTourCard, PrayerTimes: UiPrayerTimes, RamadanTracker: UiRamadanTracker, CallRow: UiCallRow, Alert: UiAlert, Banner: UiBanner, Accordion: UiAccordion, Skeleton: UiSkeleton, Spinner: UiSpinner, Divider: UiDivider, EmptyState: UiEmptyState, ErrorPage: UiErrorPage, DataState: UiDataState, LoadingOverlay: UiLoadingOverlay, ConfirmDialog: UiConfirmDialog, Popconfirm: UiPopconfirm, Carousel: UiCarousel, Gallery: UiGallery, Code: UiCode, PricingCard: UiPricingCard, IntegrationCard: UiIntegrationCard, IncomingCall: UiIncomingCall, CallCard: UiCallCard, Dropdown: UiDropdown, Menu: UiMenu, Tooltip: UiTooltip, HoverCard: UiHoverCard, Popover: UiPopover, CopyButton: UiCopyButton, CommandBar: UiCommandBar, CommandPalette: UiCommandPalette, NotificationBell: UiNotificationBell, ToggleGroup: UiToggleGroup, Fab: UiFab, Textarea: UiTextarea, NumberInput: UiNumberInput, PasswordInput: UiPasswordInput, SearchInput: UiSearchInput, RadioGroup: UiRadioGroup, Slider: UiSlider, Rating: UiRating, ChipInput: UiChipInput, InlineEdit: UiInlineEdit, ColorPicker: UiColorPicker, FileUpload: UiFileUpload, Combobox: UiCombobox, MultiSelect: UiMultiSelect, GroupedSelect: UiGroupedSelect, PhoneInput: UiPhoneInput, Calendar: UiCalendar, DatePicker: UiDatePicker, TimePicker: UiTimePicker, FormField: UiFormField, LoginForm: UiLoginForm, StepForm: UiStepForm, Tag: UiTag, Kbd: UiKbd, StatsCard: UiStatsCard, KpiInline: UiKpiInline, MiniChart: UiMiniChart, Descriptions: UiDescriptions, LazyImage: UiLazyImage, SystemStatus: UiSystemStatus, TreeView: UiTreeView, CalendarView: UiCalendarView, SubNav: UiSubNav, ActionRail: UiActionRail, SplitLayout: UiSplitLayout, SettingsSection: UiSettingsSection, ScrollArea: UiScrollArea, DealCard: UiDealCard, PipelineBoard: UiPipelineBoard, ContactPanel: UiContactPanel, SalesFunnel: UiSalesFunnel, BookingCard: UiBookingCard, GuestCard: UiGuestCard, RoomGrid: UiRoomGrid, RoomCalendar: UiRoomCalendar, OccupancyChart: UiOccupancyChart, Chip: UiChip, IconTile: UiIconTile, StatusIcon: UiStatusIcon, UserCell: UiUserCell, StatRow: UiStatRow, CountryRow: UiCountryRow, StatLine: UiStatLine, StatStrip: UiStatStrip, VersusBar: UiVersusBar, SegBar: UiSegBar, HeroBanner: UiHeroBanner, TabTiles: UiTabTiles, PillTabs: UiPillTabs, PillSelect: UiPillSelect, ChartCard: UiChartCard, ActionCard: UiActionCard, Snackbar: UiSnackbar, TourPopover: UiTourPopover, ProfileHeader: UiProfileHeader, AuthSplit: UiAuthSplit, StatusPage: UiStatusPage, ValidatedField: UiValidatedField, Footer: UiFooter, DataGroup: UiDataGroup, OptionCard: UiOptionCard, OptionCards: UiOptionCards, RichEditor: UiRichEditor, RangeSlider: UiRangeSlider, RangeCalendar: UiRangeCalendar, StepDialog: UiStepDialog, FullscreenDialog: UiFullscreenDialog, PageDashboard: UiPageDashboard, PagePatterns: UiPagePatterns, PageCrm: UiPageCrm, PageBookings: UiPageBookings, PageCatalog: UiPageCatalog, PageDetail: UiPageDetail, PageSettings: UiPageSettings, PageUserList: UiPageUserList, PageProfile: UiPageProfile, PageForm: UiPageForm, PageOrder: UiPageOrder, PageAccount: UiPageAccount, PagePricing: UiPagePricing, PageFaq: UiPageFaq, PageAuth: UiPageAuth, PageStatus: UiPageStatus, TreeSelect: UiTreeSelect, ContextMenu: UiContextMenu, Sortable: UiSortable, Map: UiMap, ImageUpload: UiImageUpload, Screensaver: UiScreensaver, Tour: UiTour, Heading: UiHeading, Text: UiText, Box: UiBox, Center: UiCenter, HStack: UiHStack, VStack: UiVStack, Grid: UiGrid, Link: UiLink, Pressable: UiPressable, Icon: UiIcon, Portal: UiPortal, LiquidGlass: UiLiquidGlass, BottomSheet: UiBottomSheet, Actionsheet: UiActionsheet, ImageViewer: UiImageViewer, ChatAi: UiChatAi } = C;
-export { fmt, setIconBase, rules } from '../core/index.js';
+// Explicit named exports (not destructuring): Next.js reads the export names of a 'use client' module statically.
+export const UiButton = C.Button;
+export const UiIconButton = C.IconButton;
+export const UiBadge = C.Badge;
+export const UiAvatar = C.Avatar;
+export const UiSwitch = C.Switch;
+export const UiCheckbox = C.Checkbox;
+export const UiSegmentedControl = C.SegmentedControl;
+export const UiTabs = C.Tabs;
+export const UiFilterChips = C.FilterChips;
+export const UiTextField = C.TextField;
+export const UiSelect = C.Select;
+export const UiCodeInput = C.CodeInput;
+export const UiStepper = C.Stepper;
+export const UiCard = C.Card;
+export const UiModal = C.Modal;
+export const UiDrawer = C.Drawer;
+export const UiToast = C.Toast;
+export const UiBreadcrumbs = C.Breadcrumbs;
+export const UiPagination = C.Pagination;
+export const UiProgress = C.Progress;
+export const UiRing = C.Ring;
+export const UiKpiTile = C.KpiTile;
+export const UiDataTable = C.DataTable;
+export const UiKanbanColumn = C.KanbanColumn;
+export const UiKanbanCard = C.KanbanCard;
+export const UiTimeline = C.Timeline;
+export const UiTopNav = C.TopNav;
+export const UiSideNav = C.SideNav;
+export const UiAppShell = C.AppShell;
+export const UiPageHeader = C.PageHeader;
+export const UiAuthLayout = C.AuthLayout;
+export const UiLeadCard = C.LeadCard;
+export const UiHotelCard = C.HotelCard;
+export const UiTourCard = C.TourCard;
+export const UiPrayerTimes = C.PrayerTimes;
+export const UiRamadanTracker = C.RamadanTracker;
+export const UiCallRow = C.CallRow;
+export const UiAlert = C.Alert;
+export const UiBanner = C.Banner;
+export const UiAccordion = C.Accordion;
+export const UiSkeleton = C.Skeleton;
+export const UiSpinner = C.Spinner;
+export const UiDivider = C.Divider;
+export const UiEmptyState = C.EmptyState;
+export const UiErrorPage = C.ErrorPage;
+export const UiDataState = C.DataState;
+export const UiLoadingOverlay = C.LoadingOverlay;
+export const UiConfirmDialog = C.ConfirmDialog;
+export const UiPopconfirm = C.Popconfirm;
+export const UiCarousel = C.Carousel;
+export const UiGallery = C.Gallery;
+export const UiCode = C.Code;
+export const UiPricingCard = C.PricingCard;
+export const UiIntegrationCard = C.IntegrationCard;
+export const UiIncomingCall = C.IncomingCall;
+export const UiCallCard = C.CallCard;
+export const UiDropdown = C.Dropdown;
+export const UiMenu = C.Menu;
+export const UiTooltip = C.Tooltip;
+export const UiHoverCard = C.HoverCard;
+export const UiPopover = C.Popover;
+export const UiCopyButton = C.CopyButton;
+export const UiCommandBar = C.CommandBar;
+export const UiCommandPalette = C.CommandPalette;
+export const UiNotificationBell = C.NotificationBell;
+export const UiToggleGroup = C.ToggleGroup;
+export const UiFab = C.Fab;
+export const UiTextarea = C.Textarea;
+export const UiNumberInput = C.NumberInput;
+export const UiPasswordInput = C.PasswordInput;
+export const UiSearchInput = C.SearchInput;
+export const UiRadioGroup = C.RadioGroup;
+export const UiSlider = C.Slider;
+export const UiRating = C.Rating;
+export const UiChipInput = C.ChipInput;
+export const UiInlineEdit = C.InlineEdit;
+export const UiColorPicker = C.ColorPicker;
+export const UiFileUpload = C.FileUpload;
+export const UiCombobox = C.Combobox;
+export const UiMultiSelect = C.MultiSelect;
+export const UiGroupedSelect = C.GroupedSelect;
+export const UiPhoneInput = C.PhoneInput;
+export const UiCalendar = C.Calendar;
+export const UiDatePicker = C.DatePicker;
+export const UiTimePicker = C.TimePicker;
+export const UiFormField = C.FormField;
+export const UiLoginForm = C.LoginForm;
+export const UiStepForm = C.StepForm;
+export const UiTag = C.Tag;
+export const UiKbd = C.Kbd;
+export const UiStatsCard = C.StatsCard;
+export const UiKpiInline = C.KpiInline;
+export const UiMiniChart = C.MiniChart;
+export const UiDescriptions = C.Descriptions;
+export const UiLazyImage = C.LazyImage;
+export const UiSystemStatus = C.SystemStatus;
+export const UiTreeView = C.TreeView;
+export const UiCalendarView = C.CalendarView;
+export const UiSubNav = C.SubNav;
+export const UiActionRail = C.ActionRail;
+export const UiSplitLayout = C.SplitLayout;
+export const UiSettingsSection = C.SettingsSection;
+export const UiScrollArea = C.ScrollArea;
+export const UiDealCard = C.DealCard;
+export const UiPipelineBoard = C.PipelineBoard;
+export const UiContactPanel = C.ContactPanel;
+export const UiSalesFunnel = C.SalesFunnel;
+export const UiBookingCard = C.BookingCard;
+export const UiGuestCard = C.GuestCard;
+export const UiRoomGrid = C.RoomGrid;
+export const UiRoomCalendar = C.RoomCalendar;
+export const UiOccupancyChart = C.OccupancyChart;
+export const UiChip = C.Chip;
+export const UiIconTile = C.IconTile;
+export const UiStatusIcon = C.StatusIcon;
+export const UiUserCell = C.UserCell;
+export const UiStatRow = C.StatRow;
+export const UiCountryRow = C.CountryRow;
+export const UiStatLine = C.StatLine;
+export const UiStatStrip = C.StatStrip;
+export const UiVersusBar = C.VersusBar;
+export const UiSegBar = C.SegBar;
+export const UiHeroBanner = C.HeroBanner;
+export const UiTabTiles = C.TabTiles;
+export const UiPillTabs = C.PillTabs;
+export const UiPillSelect = C.PillSelect;
+export const UiChartCard = C.ChartCard;
+export const UiActionCard = C.ActionCard;
+export const UiSnackbar = C.Snackbar;
+export const UiTourPopover = C.TourPopover;
+export const UiProfileHeader = C.ProfileHeader;
+export const UiAuthSplit = C.AuthSplit;
+export const UiStatusPage = C.StatusPage;
+export const UiValidatedField = C.ValidatedField;
+export const UiFooter = C.Footer;
+export const UiDataGroup = C.DataGroup;
+export const UiOptionCard = C.OptionCard;
+export const UiOptionCards = C.OptionCards;
+export const UiRichEditor = C.RichEditor;
+export const UiRangeSlider = C.RangeSlider;
+export const UiRangeCalendar = C.RangeCalendar;
+export const UiStepDialog = C.StepDialog;
+export const UiFullscreenDialog = C.FullscreenDialog;
+export const UiPageDashboard = C.PageDashboard;
+export const UiPagePatterns = C.PagePatterns;
+export const UiPageCrm = C.PageCrm;
+export const UiPageBookings = C.PageBookings;
+export const UiPageCatalog = C.PageCatalog;
+export const UiPageDetail = C.PageDetail;
+export const UiPageSettings = C.PageSettings;
+export const UiPageUserList = C.PageUserList;
+export const UiPageProfile = C.PageProfile;
+export const UiPageForm = C.PageForm;
+export const UiPageOrder = C.PageOrder;
+export const UiPageAccount = C.PageAccount;
+export const UiPagePricing = C.PagePricing;
+export const UiPageFaq = C.PageFaq;
+export const UiPageAuth = C.PageAuth;
+export const UiPageStatus = C.PageStatus;
+export const UiTreeSelect = C.TreeSelect;
+export const UiContextMenu = C.ContextMenu;
+export const UiSortable = C.Sortable;
+export const UiMap = C.Map;
+export const UiImageUpload = C.ImageUpload;
+export const UiScreensaver = C.Screensaver;
+export const UiTour = C.Tour;
+export const UiHeading = C.Heading;
+export const UiText = C.Text;
+export const UiBox = C.Box;
+export const UiCenter = C.Center;
+export const UiHStack = C.HStack;
+export const UiVStack = C.VStack;
+export const UiGrid = C.Grid;
+export const UiLink = C.Link;
+export const UiPressable = C.Pressable;
+export const UiIcon = C.Icon;
+export const UiPortal = C.Portal;
+export const UiLiquidGlass = C.LiquidGlass;
+export const UiBottomSheet = C.BottomSheet;
+export const UiActionsheet = C.Actionsheet;
+export const UiImageViewer = C.ImageViewer;
+export const UiChatAi = C.ChatAi;
+export { fmt, setIconBase, rules, LOCALES, setUiLocale, getUiLocale, setUiMessages, isRtlLocale } from '../core/index.js';
 export { useUiTheme } from '../theme.js';

package/src/resolver.js

@@ -0,0 +1,33 @@
+// Auto-import resolver for unplugin-vue-components (Vite, Webpack, Rollup, Rspack).
+//   import Components from 'unplugin-vue-components/vite'
+//   import { ZiyaragoUiResolver } from '@ziyarago/ui/resolver'
+//   Components({ resolvers: [ZiyaragoUiResolver()] })
+// Zero dependencies: it only maps <UiButton> to { name: 'UiButton', from: '@ziyarago/ui/vue' }.
+import { components } from './core/index.js';
+
+const NAMES = new Set(Object.keys(components));
+
+/**
+ * @param {{ prefix?: string, css?: boolean | string, exclude?: string[], from?: string }} [options]
+ *   prefix  component prefix, default 'Ui' (must match the registered names, which are always Ui*)
+ *   css     true: import '@ziyarago/ui/style.css' as a side effect together with the first resolved component (once per module that uses one);
+ *           a string: import that path instead (for example your own entry that imports the css inside a Tailwind @layer). Default false.
+ *   exclude component names (without prefix) that must not be auto-imported, e.g. ['Button'] if you keep your own UiButton.
+ *   from    module the components are imported from, default '@ziyarago/ui/vue'
+ */
+export function ZiyaragoUiResolver(options = {}) {
+  const { prefix = 'Ui', css = false, exclude = [], from = '@ziyarago/ui/vue' } = options;
+  const skip = new Set(exclude.map(n => n.replace(/^Ui/, '')));
+  const sideEffects = css ? (css === true ? '@ziyarago/ui/style.css' : css) : undefined;
+  return {
+    type: 'component',
+    resolve(name) {
+      if (!name.startsWith(prefix)) return;
+      const bare = name.slice(prefix.length);
+      if (!NAMES.has(bare) || skip.has(bare)) return;
+      return { name: 'Ui' + bare, from, ...(sideEffects ? { sideEffects } : {}) };
+    },
+  };
+}
+
+export default ZiyaragoUiResolver;

package/src/styles/components.css

@@ -1,6 +1,13 @@
 /* @ziyarago/ui · components. Every class is zg-*; no global resets except .zg-root */
 .zg-root{font-family:var(--zg-font);color:var(--zg-text-1);background:var(--zg-bg);-webkit-font-smoothing:antialiased}
 .zg-root *,.zg-root *::before,.zg-root *::after{box-sizing:border-box}
+/* Host-CSS robustness. Zero specificity (:where), so any zg-* rule, utility class or app rule wins. Makes a component look the same with or without
+   Tailwind preflight / a CSS reset: form controls inherit font and color, no UA padding, border-box, normal line-height, svg without a baseline gap. */
+:where(.zg-root,[class*="zg-"]){line-height:normal}
+:where([class*="zg-"]),:where([class*="zg-"])::before,:where([class*="zg-"])::after,:where(.zg-root,[class*="zg-"]) :where(*,*::before,*::after){box-sizing:border-box}
+:where(.zg-root,[class*="zg-"]) :where(button,input,select,textarea),:where(button,input,select,textarea):where([class*="zg-"]){font:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0;background-color:transparent}
+:where(.zg-root,[class*="zg-"]) a:where(:not([class])){text-decoration:underline}
+:where(.zg-root,[class*="zg-"]) svg,svg:where([class*="zg-"]){vertical-align:middle}
 .zg-glass{background:var(--zg-s1);backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5);box-shadow:var(--zg-rim),var(--zg-shadow-1)}
 .zg-icon:not([style*="--zg-icon"]){visibility:hidden}
 .zg-icon{display:inline-block;flex:none;width:1em;height:1em;background:currentColor;-webkit-mask:var(--zg-icon) center/contain no-repeat;mask:var(--zg-icon) center/contain no-repeat}

package/src/styles/components6.css

@@ -11,6 +11,8 @@
 .zg-saver__c{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}.zg-saver__m{width:72px;height:72px;background:center/contain no-repeat;opacity:.9}
 .zg-tourov{position:fixed;inset:0;z-index:250}.zg-tourov__full{position:absolute;inset:0;background:oklch(0.1 0 0 / .7)}.zg-tourov__cut{position:absolute;border-radius:14px;box-shadow:0 0 0 9999px oklch(0.1 0 0 / .7),0 0 0 2px var(--zg-brand);pointer-events:none}
 .zg-rte__c blockquote{margin:8px 0;padding:4px 14px;border-inline-start:3px solid var(--zg-brand);color:var(--zg-text-2)}.zg-rte__c pre{margin:8px 0;padding:12px 14px;border-radius:12px;background:oklch(0.17 0.006 240);color:oklch(0.9 0.01 240);font:500 13px var(--zg-font-mono);overflow:auto;direction:ltr;text-align:left}
+/* Rich text defaults that a CSS reset (Tailwind preflight) would remove; :where keeps them overridable. */
+:where(.zg-rte__c) :where(p){margin:0 0 .6em}:where(.zg-rte__c) :where(ul,ol){margin:.5em 0;padding-inline-start:1.5em}:where(.zg-rte__c) ul{list-style:disc}:where(.zg-rte__c) ol{list-style:decimal}:where(.zg-rte__c) :where(h1,h2,h3){font-weight:700;margin:.8em 0 .4em}:where(.zg-rte__c) h1{font-size:1.5em}:where(.zg-rte__c) h2{font-size:1.25em}:where(.zg-rte__c) h3{font-size:1.1em}:where(.zg-rte__c) a{color:var(--zg-brand-text);text-decoration:underline}
 /* focus + disabled audit */
 .zg-btn:focus-visible,.zg-ibtn:focus-visible,.zg-chip:focus-visible,.zg-chip2 button:focus-visible,.zg-tt__i:focus-visible,.zg-pt button:focus-visible,.zg-navitem:focus-visible,.zg-menu__i:focus-visible,.zg-check:focus-visible,.zg-switch:focus-visible,.zg-cal__d:focus-visible,.zg-acc__h:focus-visible,.zg-tree__n:focus-visible,.zg-room:focus-visible,.zg-pin:focus-visible,.zg-sort__i:focus-visible,.zg-inline:focus-visible{outline:3px solid var(--zg-brand-soft);outline-offset:2px}
 .zg-btn:disabled,.zg-ibtn:disabled,.zg-chip:disabled,[aria-disabled="true"]{opacity:.45;cursor:not-allowed;pointer-events:none}.zg-tt__i:hover,.zg-chip:hover:not([aria-pressed="true"]){background:var(--zg-s2)}.zg-room:hover,.zg-hotel:hover,.zg-lead:hover{box-shadow:var(--zg-rim),var(--zg-shadow-1)}.zg-table tbody tr:hover{background:var(--zg-s1)}

package/src/styles/effects.css

@@ -10,8 +10,8 @@
 [data-fx="lite"] .zg-glass{background:var(--zg-pop)}
 
 /* ── page backgrounds ── set data-bg on <html> (useUiTheme().setBackground) or on any element with class zg-bg ── */
-:root{--zg-bgL:.62;--zg-bgC:.16;--zg-bgA:26%}
-[data-theme="light"]{--zg-bgL:.8;--zg-bgC:.11;--zg-bgA:34%}
+:root{--zg-bgL:.62;--zg-bgC:.2;--zg-bgA:42%}
+[data-theme="light"]{--zg-bgL:.8;--zg-bgC:.14;--zg-bgA:50%}
 [data-bg="aurora"]{--zg-bg-image:radial-gradient(60% 50% at 12% 8%,color-mix(in oklch,var(--zg-brand) var(--zg-bgA),transparent),transparent 70%),radial-gradient(50% 45% at 88% 18%,color-mix(in oklch,oklch(var(--zg-bgL) var(--zg-bgC) 250) var(--zg-bgA),transparent),transparent 70%),radial-gradient(65% 55% at 50% 105%,color-mix(in oklch,oklch(var(--zg-bgL) var(--zg-bgC) 320) var(--zg-bgA),transparent),transparent 70%)}
 [data-bg="sunset"]{--zg-bg-image:radial-gradient(70% 55% at 10% 0%,color-mix(in oklch,oklch(var(--zg-bgL) var(--zg-bgC) 55) var(--zg-bgA),transparent),transparent 70%),radial-gradient(60% 50% at 95% 25%,color-mix(in oklch,oklch(var(--zg-bgL) var(--zg-bgC) 15) var(--zg-bgA),transparent),transparent 70%),radial-gradient(70% 60% at 40% 110%,color-mix(in oklch,oklch(var(--zg-bgL) var(--zg-bgC) 340) var(--zg-bgA),transparent),transparent 70%)}
 [data-bg="ocean"]{--zg-bg-image:radial-gradient(70% 55% at 85% 0%,color-mix(in oklch,oklch(var(--zg-bgL) var(--zg-bgC) 230) var(--zg-bgA),transparent),transparent 70%),radial-gradient(60% 55% at 5% 40%,color-mix(in oklch,oklch(var(--zg-bgL) var(--zg-bgC) 200) var(--zg-bgA),transparent),transparent 70%),radial-gradient(70% 55% at 60% 110%,color-mix(in oklch,oklch(var(--zg-bgL) var(--zg-bgC) 265) var(--zg-bgA),transparent),transparent 70%)}
@@ -21,8 +21,10 @@
 html[data-bg]:not([data-bg="none"]),.zg-bg:not([data-bg="none"]){background-color:var(--zg-bg);background-image:var(--zg-bg-image);background-attachment:fixed}
 .zg-bg:not([data-bg="none"]){background-attachment:scroll}
 html[data-bg]:not([data-bg="none"]) .zg-root{background:transparent}
-html[data-fx="full"][data-motion="on"][data-bg]:not([data-bg="none"]){background-size:140% 140%;animation:zg-bg-drift 48s ease-in-out infinite alternate}
-@keyframes zg-bg-drift{from{background-position:0% 0%}to{background-position:100% 100%}}
+html[data-motion="on"][data-bg]:not([data-bg="none"]){background-image:none}
+html[data-motion="on"][data-bg]:not([data-bg="none"])::before{content:"";position:fixed;inset:-25%;z-index:-1;pointer-events:none;background-image:var(--zg-bg-image);background-repeat:no-repeat;animation:zg-bg-float 18s ease-in-out infinite alternate,zg-bg-hue 40s linear infinite;will-change:transform,filter}
+@keyframes zg-bg-hue{from{filter:hue-rotate(0deg) saturate(1.15)}to{filter:hue-rotate(360deg) saturate(1.15)}}
+@keyframes zg-bg-float{0%{transform:translate3d(-3%,-2%,0) scale(1) rotate(0deg)}50%{transform:translate3d(4%,3%,0) scale(1.18) rotate(3deg)}100%{transform:translate3d(-2%,5%,0) scale(1.08) rotate(-3deg)}}
 
 /* ── gradient cards ── <UiCard variant="gradient" tone="sky" intensity="soft|vivid"> ── */
 .zg-card--grad{--t:var(--zg-brand);--tv:var(--zg-brand);--on:var(--zg-on-brand)}

package/src/styles/extras.css

@@ -0,0 +1,55 @@
+/* Additions for parity with older UI kits (icon-only buttons, avatar status, card slots, tooltip placement, ...). Plain classes, no size selectors. */
+.zg-req{color:var(--zg-red)}
+.zg-btn--sq{width:var(--h);padding:0}
+.zg-ta--fixed{resize:none}.zg-ta--auto{field-sizing:content}.zg-ta__count{align-self:flex-end}
+.zg-select__trigger--error{box-shadow:var(--zg-rim),inset 0 0 0 1.5px var(--zg-red)}
+.zg-check--error .zg-check__box{box-shadow:inset 0 0 0 1.5px var(--zg-red)}
+.zg-check[aria-checked="mixed"] .zg-check__box{background:var(--zg-brand);box-shadow:none}
+.zg-seg--block{display:flex;width:100%}.zg-seg--block button{flex:1}
+.zg-seg button{display:inline-flex;align-items:center;justify-content:center;gap:6px}.zg-seg button[disabled]{opacity:.45;cursor:not-allowed}
+.zg-alert__act{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
+.zg-badge--sq{border-radius:8px}.zg-badge--inverse{background:var(--zg-inv-bg);color:var(--zg-inv-fg)}
+.zg-avatar--sq{border-radius:30%}
+.zg-avatar--ring{box-shadow:var(--zg-rim),0 0 0 2px var(--zg-bg)}
+.zg-avatar--st{position:relative;overflow:visible}.zg-avatar--st img{border-radius:inherit}
+.zg-avatar__st{position:absolute;inset-inline-end:0;bottom:0;width:max(8px,calc(var(--s)*.26));height:max(8px,calc(var(--s)*.26));border-radius:50%;background:var(--zg-text-3);box-shadow:0 0 0 2px var(--zg-bg)}
+.zg-avatar__st--online{background:var(--zg-green)}.zg-avatar__st--away{background:var(--zg-amber)}.zg-avatar__st--busy{background:var(--zg-red)}
+.zg-avatar--sky{background:var(--zg-sky);color:var(--zg-bg)}.zg-avatar--success{background:var(--zg-green);color:var(--zg-bg)}.zg-avatar--warning{background:var(--zg-amber);color:var(--zg-bg)}.zg-avatar--danger{background:var(--zg-red);color:var(--zg-bg)}.zg-avatar--neutral{background:var(--zg-s3);color:var(--zg-text-1)}
+.zg-card.zg-card--outline{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:inset 0 0 0 1px var(--zg-stroke)}
+.zg-card.zg-card--flush{padding:0}
+.zg-card--click{cursor:pointer;transition:transform .2s var(--zg-ease)}.zg-card--click:hover{transform:translateY(-2px)}.zg-card--click:focus-visible{outline:2px solid var(--zg-brand);outline-offset:2px}
+.zg-card__foot{display:flex;align-items:center;gap:8px;padding-top:14px;box-shadow:0 -1px 0 var(--zg-stroke)}
+.zg-modal__sub{font-size:13px;font-weight:500;color:var(--zg-text-3);margin-top:2px}
+.zg-crumbs__sep{color:var(--zg-text-3)}
+.zg-tr--click{cursor:pointer}
+.zg-tip--bottom::after{bottom:auto;top:calc(100% + 8px);transform:translateX(-50%) translateY(-4px)}
+.zg-tip--bottom:hover::after,.zg-tip--bottom:focus-visible::after{transform:translateX(-50%) translateY(0)}
+.zg-tip--left::after,.zg-tip--right::after{bottom:auto;top:50%;inset-inline-start:auto}
+.zg-tip--left::after{left:auto;right:calc(100% + 8px);transform:translateY(-50%) translateX(4px)}
+.zg-tip--right::after{right:auto;left:calc(100% + 8px);transform:translateY(-50%) translateX(-4px)}
+.zg-tip--left:hover::after,.zg-tip--left:focus-visible::after,.zg-tip--right:hover::after,.zg-tip--right:focus-visible::after{transform:translateY(-50%) translateX(0)}
+.zg-rg{display:flex;flex-direction:column;gap:10px}.zg-rg--row{flex-direction:row;flex-wrap:wrap;gap:10px 22px}
+/* compat layer (@ziyarago/ui/compat): compound components that have no counterpart in the new kit */
+.zg-dd-trig{display:inline-block}.zg-dd__panel{position:fixed;z-index:var(--zg-z-pop,60);animation:zg-pop-in .16s var(--zg-ease) both}
+.zg-menu__lbl{padding:10px 12px 4px;font:700 11px var(--zg-font);letter-spacing:.1em;text-transform:uppercase;color:var(--zg-text-3)}
+.zg-avgroup{display:flex}.zg-avgroup>*+*{margin-inline-start:-8px}.zg-avgroup--tight>*+*{margin-inline-start:-12px}.zg-avgroup--loose>*+*{margin-inline-start:-4px}
+.zg-avgroup>.zg-avatar{box-shadow:var(--zg-rim),0 0 0 2px var(--zg-bg)}.zg-avgroup--rev{flex-direction:row-reverse;justify-content:flex-end}
+.zg-toasts{position:fixed;z-index:calc(var(--zg-z-modal,200) + 20);display:flex;flex-direction:column;gap:10px;padding:16px;max-width:100vw;pointer-events:none}
+.zg-toasts--top-right{top:0;right:0;align-items:flex-end}.zg-toasts--top-left{top:0;left:0;align-items:flex-start}.zg-toasts--top-center{top:0;left:50%;transform:translateX(-50%);align-items:center}
+.zg-toasts--bottom-right{bottom:0;right:0;align-items:flex-end;flex-direction:column-reverse}.zg-toasts--bottom-left{bottom:0;left:0;align-items:flex-start;flex-direction:column-reverse}.zg-toasts--bottom-center{bottom:0;left:50%;transform:translateX(-50%);align-items:center;flex-direction:column-reverse}
+.zg-toasts__i{position:relative;pointer-events:auto}.zg-toasts__x{position:absolute;top:6px;inset-inline-end:6px}.zg-toasts__act{margin-top:6px}
+.zg-sidenav--compat{position:fixed;inset-block:0;inset-inline-start:0;z-index:60;width:min(288px,80vw);height:100vh;transform:translateX(-100%);transition:transform .3s var(--zg-ease),width .3s var(--zg-ease);background-color:var(--sidebar-bg,oklch(0.108 0.022 50));color:var(--zg-text-2)}
+[dir="rtl"] .zg-sidenav--compat{transform:translateX(100%)}.zg-sidenav--compat.is-open{transform:none}
+.zg-sidenav__nav{flex:1;min-height:0;display:flex;flex-direction:column;gap:18px;overflow-y:auto;overflow-x:hidden;padding:8px 0}.zg-sidenav__sec{display:flex;flex-direction:column;gap:2px}
+.zg-sidenav__foot{padding-top:12px;box-shadow:0 -1px 0 var(--zg-stroke)}
+.zg-sidenav-scrim{position:fixed;inset:0;z-index:55;background:oklch(0.12 0.005 40 / .45);backdrop-filter:blur(4px)}
+@media (min-width:1024px){.zg-sidenav--compat{position:sticky;top:12px;margin:12px 0 12px 12px;height:calc(100vh - 24px);width:var(--w);transform:none;border-radius:24px;flex:none}[dir="rtl"] .zg-sidenav--compat{margin:12px 12px 12px 0}.zg-sidenav-scrim{display:none}}
+.zg-sidenav--collapsed .zg-sidenav__group{display:none}
+.zg-topnav--compat{padding-inline:clamp(16px,3vw,32px);min-height:64px}.zg-topnav--compat.zg-topnav--md{min-height:56px}.zg-topnav__mid{flex:1;min-width:0;display:flex;justify-content:center}
+.zg-topnav--compat .zg-topnav__brand{gap:12px}
+.zg-subnav--compat .zg-navitem{text-decoration:none;width:100%}.zg-subnav--compat .zg-sidenav__group{display:flex;align-items:center;gap:8px}
+@media (min-width:1024px){.zg-subnav--compat{position:sticky;top:16px;align-self:flex-start}}
+.zg-check,.zg-switch{text-align:start}
+.zg-sidenav__close{position:absolute;top:12px;inset-inline-end:12px}@media (min-width:1024px){.zg-sidenav__close{display:none}}
+.zg-cal__d:disabled{opacity:.35;cursor:not-allowed;background:none}
+.zg-tipbox{position:fixed;z-index:calc(var(--zg-z-modal,200) + 40);max-width:min(320px,90vw);padding:6px 10px;border-radius:10px;font:600 12px var(--zg-font);background:var(--zg-inv-bg);color:var(--zg-inv-fg);box-shadow:var(--zg-shadow-1);pointer-events:none}.zg-tipbox--glass{background:var(--zg-pop);color:var(--zg-text-1);box-shadow:var(--zg-rim),var(--zg-shadow-1)}

package/src/styles/index.css

@@ -18,4 +18,5 @@
 @import './sizes/navigation.css';
 @import './sizes/media.css';
 @import './sizes/domain.css';
+@import './extras.css';
 @import './effects.css';

package/src/theme.js

@@ -1,10 +1,16 @@
+import { setUiLocale, isRtlLocale, LOCALES } from './i18n/index.js';
 // Framework-free theme controller: palette, theme, direction, motion, effects, background → attributes on <html>. Persists to localStorage.
 const KEY = 'zg-ui';
 export const PALETTES = ['gold', 'tamam'];
 export const BACKGROUNDS = ['none', 'aurora', 'sunset', 'ocean', 'emerald', 'rose', 'mesh'];
-const DEFAULTS = { theme: 'dark', palette: 'gold', dir: 'ltr', motion: 'auto', effects: 'auto', bg: 'none' };
+const DEFAULTS = { theme: 'dark', palette: 'gold', dir: 'ltr', motion: 'auto', effects: 'auto', bg: 'none', locale: 'en' };
 const read = () => { try { return JSON.parse(localStorage.getItem(KEY) || '{}'); } catch { return {}; } };
 let cur = typeof localStorage === 'undefined' ? { ...DEFAULTS } : { ...DEFAULTS, ...read() };
+
+/** Set the app defaults (used when the visitor has no saved choice). Call before the first useUiTheme(). */
+export function configureTheme(defaults = {}) {
+  cur = typeof localStorage === 'undefined' ? { ...DEFAULTS, ...defaults } : { ...DEFAULTS, ...defaults, ...read() };
+}
 const subs = new Set();
 
 export const capable = () => {
@@ -22,14 +28,17 @@ export const resolve = (s = cur) => ({
 const apply = () => {
   if (typeof document === 'undefined') return;
   const r = document.documentElement, v = resolve();
-  r.dataset.theme = cur.theme; r.dataset.palette = cur.palette; r.dir = cur.dir;
+  r.dataset.theme = cur.theme; r.dataset.palette = cur.palette; r.dir = cur.dir; r.lang = cur.locale;
   r.dataset.motion = v.motion; r.dataset.fx = v.effects; r.dataset.bg = cur.bg;
   try { localStorage.setItem(KEY, JSON.stringify(cur)); } catch {}
   subs.forEach(f => f({ ...cur }));
 };
 
 /** Inline script for <head>: applies the saved settings before first paint (no flash). */
-export const themeInitScript = `try{var s=JSON.parse(localStorage.getItem('${KEY}')||'{}'),r=document.documentElement,d=r.dataset;if(s.theme)d.theme=s.theme;if(s.palette)d.palette=s.palette;if(s.dir)r.dir=s.dir;if(s.bg)d.bg=s.bg;var m=s.motion||'auto',f=s.effects||'auto';d.motion=m==='auto'?(matchMedia('(prefers-reduced-motion: reduce)').matches?'off':'on'):m;d.fx=f==='auto'?((CSS.supports('backdrop-filter','blur(1px)')&&(navigator.deviceMemory||8)>=4&&(navigator.hardwareConcurrency||8)>=4)?'full':'lite'):f}catch(e){}`;
+export const themeInitScript = `try{var s=JSON.parse(localStorage.getItem('${KEY}')||'{}'),r=document.documentElement,d=r.dataset;if(s.theme)d.theme=s.theme;if(s.palette)d.palette=s.palette;if(s.dir)r.dir=s.dir;if(s.locale)r.lang=s.locale;if(s.bg)d.bg=s.bg;var m=s.motion||'auto',f=s.effects||'auto';d.motion=m==='auto'?(matchMedia('(prefers-reduced-motion: reduce)').matches?'off':'on'):m;d.fx=f==='auto'?((CSS.supports('backdrop-filter','blur(1px)')&&(navigator.deviceMemory||8)>=4&&(navigator.hardwareConcurrency||8)>=4)?'full':'lite'):f}catch(e){}`;
+
+/** Apply the saved language to the built-in strings. Call AFTER the first render/hydration (the Nuxt module does it on app:mounted). */
+export function applySavedLocale() { if (cur.locale && cur.locale !== 'en') setUiLocale(cur.locale); }
 
 export function useUiTheme() {
   if (typeof document !== 'undefined') apply();
@@ -40,7 +49,10 @@ export function useUiTheme() {
     get resolved() { return resolve(); },
     palettes: PALETTES, backgrounds: BACKGROUNDS,
     setTheme: t => set({ theme: t }), toggleTheme: () => set({ theme: cur.theme === 'dark' ? 'light' : 'dark' }),
-    setPalette: p => set({ palette: p }), setDir: d => set({ dir: d }), setLocale: l => set({ dir: l === 'ar' ? 'rtl' : 'ltr' }),
+    setPalette: p => set({ palette: p }), setDir: d => set({ dir: d }),
+    /** Language of the built-in component strings. Also sets dir (rtl for Arabic) and <html lang>. */
+    get locale() { return cur.locale; }, locales: LOCALES,
+    setLocale: l => { setUiLocale(l); set({ locale: String(l).toLowerCase().split(/[-_]/)[0], dir: isRtlLocale(l) ? 'rtl' : 'ltr' }); },
     /** 'auto' follows prefers-reduced-motion, 'on' enables animations, 'off' disables them */
     setMotion: m => set({ motion: m }),
     /** 'auto' picks by browser capability, 'full' = blur, glow and animated backgrounds, 'lite' = flat and fast */

package/src/vue/global.js

@@ -0,0 +1,2 @@
+// Types-only entry: import '@ziyarago/ui/vue/global' to register Ui* in GlobalComponents. See types/vue-global.d.ts.
+export {};

package/src/vue/index.js

@@ -1,6 +1,7 @@
 // Vue 3 adapter. Usage: import { UiButton, UiAppShell } from '@ziyarago/ui/vue'
-import { h, ref, reactive, defineComponent, Teleport, cloneVNode, isVNode } from 'vue';
-import { components } from '../core/index.js';
+import { h, ref, reactive, defineComponent, onMounted, onBeforeUnmount, Teleport, cloneVNode, isVNode } from 'vue';
+import { components, subscribeUiLocale } from '../core/index.js';
+import { BOOL_PROPS } from '../core/bools.js';
 
 const C = {};
 const vh = (t, p, ...k) => { const kids = k.flat(); if (p && typeof t === 'string') for (const key of Object.keys(p)) if (/^on[A-Z]/.test(key) && !key.startsWith('onVnode')) { const nk = 'on' + key[2] + key.slice(3).toLowerCase(); if (nk !== key) { p[nk] = p[key]; delete p[key]; } } return typeof t === 'string' || !kids.length ? h(t, p, kids.length ? kids : undefined) : h(t, p, { default: () => kids }); };
@@ -9,14 +10,20 @@ const wrap = (name, def) => defineComponent({
   setup(_, { attrs, slots, emit }) {
     const state = reactive({ ...(def.state || {}) });
     const set = o => Object.assign(state, o);
+    // Teleports are client-only: during SSR and hydration portal() renders nothing (a teleport to <body> cannot hydrate), then appears once mounted.
+    const mounted = ref(false), localeTick = ref(0); let offLocale; onMounted(() => { mounted.value = true; offLocale = subscribeUiLocale(() => { localeTick.value++; }); }); onBeforeUnmount(() => offLocale && offLocale());
     return () => {
-      const props = { ...attrs, onChange: v => { emit('update:modelValue', v); emit('change', v); } };
+      void localeTick.value;
+      const props = {}, root = {};
+      for (const k in attrs) { if (/^(aria|data)-|^(class|style|id)$/.test(k)) root[k] = attrs[k]; const pk = k.includes('-') && !/^(aria|data)-/.test(k) ? k.replace(/-([a-z])/g, (_, c) => c.toUpperCase()) : k; props[pk] = attrs[k] === '' && BOOL_PROPS.has(pk) ? true : attrs[k]; }
+      props.onChange = v => { emit('update:modelValue', v); emit('change', v); };
       if (attrs.modelValue === undefined) delete props.modelValue;
       const named = {}; for (const k of Object.keys(slots)) if (k !== 'default') named[k] = slots[k]();
       const children = slots.default ? slots.default() : [];
-      const out = def.render({ C, h: vh, props, children, slots: named, state, set, portal: (kids, to) => h(Teleport, { to: to || 'body' }, kids) });
+      const out = def.render({ C, h: vh, props, children, slots: named, state, set, portal: (kids, to) => mounted.value ? h(Teleport, { to: to || 'body' }, kids) : null });
       const sz = attrs.size;
-      return sz && isVNode(out) && typeof out.type === 'string' ? cloneVNode(out, { 'data-size': sz }) : out;
+      if (sz) root['data-size'] = sz;
+      return isVNode(out) && typeof out.type === 'string' && Object.keys(root).length ? cloneVNode(out, root) : out;
     };
   },
 });
@@ -27,3 +34,4 @@ export const install = app => { for (const [n, c] of Object.entries(C)) app.comp
 export { fmt, setIconBase, rules } from '../core/index.js';
 export { useUiTheme } from '../theme.js';
 export default { install };
+export { LOCALES, setUiLocale, getUiLocale, setUiMessages, isRtlLocale } from '../core/index.js';

package/types/compat-resolver.d.ts

@@ -0,0 +1,12 @@
+export interface ZiyaragoCompatResolverOptions {
+  /** Module the compat components come from. Default '@ziyarago/ui/compat'. */
+  from?: string;
+  /** Full component names (with the Ui prefix) to leave to other resolvers or local files, for example ['UiTable']. */
+  exclude?: string[];
+  /** true: also import '@ziyarago/ui/style.css'; a string: import that module instead. Default false. */
+  css?: boolean | string;
+}
+export interface ZiyaragoCompatResolverResult { name: string; from: string; sideEffects?: string }
+export interface ZiyaragoCompatResolver { type: 'component'; resolve(name: string): ZiyaragoCompatResolverResult | undefined }
+export function ZiyaragoCompatResolver(options?: ZiyaragoCompatResolverOptions): ZiyaragoCompatResolver;
+export default ZiyaragoCompatResolver;