@orcestr/ui 0.0.3 → 0.1.1

package/dist/example/codeSamples.js

@@ -1,10 +1,10 @@
 export const codeSamples = {
-    typography: `import {Badge, Box, Flex, Stack, Text} from '@orcestr/ui';
+    text: `import {Badge, Box, Flex, Stack, Text} from '@orcestr/ui';
 
 <Stack g={3}>
     <Stack g={1}>
         <Text as='h1' fs='28px' fw={780} lh={1.1}>
-            Workflow review
+            Operations review
         </Text>
         <Text as='h2' fs='20px' fw={720} lh={1.2}>
             Review window and status
@@ -21,22 +21,22 @@ export const codeSamples = {
     </Stack>
 
     <Flex g={2} wrap>
-        <Text tone='brand' fw={700}>Brand</Text>
+        <Text tone='primary' fw={700}>Primary</Text>
         <Text tone='success' fw={700}>Success</Text>
         <Text tone='warning' fw={700}>Warning</Text>
         <Text tone='danger' fw={700}>Danger</Text>
         <Text tone='info' fw={700}>Info</Text>
     </Flex>
 
-    <Box w='100%' p={2} r={3}>
+    <Box w='100%' p={2} r={3} style={{background: 'var(--oui-gray-a3)'}}>
         <Text display='block' truncate>
-            This is a long single line value that truncates cleanly.
+            This is a long single line value that truncates cleanly inside a constrained row.
         </Text>
     </Box>
 
     <Flex g={2} wrap>
         <Badge>Neutral</Badge>
-        <Badge tone='brand'>Brand</Badge>
+        <Badge tone='primary'>Primary</Badge>
         <Badge tone='success'>Success</Badge>
         <Badge tone='warning'>Warning</Badge>
         <Badge tone='danger'>Danger</Badge>
@@ -50,57 +50,143 @@ export const codeSamples = {
     <Skeleton h={16} w='64%' />
     <Skeleton h={36} />
 </Stack>`,
-    appShell: `import {
+    appShell: `import {useState} from 'react';
+import {
     AppShell,
     AppShellContent,
     AppShellHeader,
-    AppShellNav,
-    AppShellSidebar,
+    type AppShellSide,
+    AppSidebar,
     Button,
-    OrcestrUiProvider,
-    Stack,
-    Text,
+    Flex,
+    IconButton,
+    IconTextButton,
+    Menu,
+    PageTitleBlock,
+    SpecialModal,
+    Tooltip,
+    type MenuItem,
 } from '@orcestr/ui';
+import {LuArrowLeft, LuArrowLeftRight, LuBell, LuBox, LuCalendar, LuCheck, LuClipboardList, LuEllipsis, LuLanguages, LuMessageSquare, LuSearch, LuTruck} from 'react-icons/lu';
 
-<OrcestrUiProvider surface='operations' locale='ru'>
-    <AppShell
-        sidebarOpen={mobileOpen}
-        onSidebarOpenChange={setMobileOpen}
-        header={
-            <AppShellHeader
-                visibility='mobile'
-                title='Operations'
+const [open, setOpen] = useState(false);
+const [mobileOpen, setMobileOpen] = useState(false);
+const [previewMode, setPreviewMode] = useState<'desktop' | 'phone'>('desktop');
+const [sidebarSide, setSidebarSide] = useState<AppShellSide>('left');
+const [activeKey, setActiveKey] = useState('requests');
+const [locale, setLocale] = useState<'ru' | 'en'>('en');
+const isPhone = previewMode === 'phone';
+const isRight = sidebarSide === 'right';
+const toggleSidebarSide = () => {
+    setSidebarSide((side) => side === 'left' ? 'right' : 'left');
+};
+
+const groups = [
+    {
+        key: 'demand',
+        items: [
+            {key: 'requests', label: 'Requests', icon: <LuTruck />, active: activeKey === 'requests'},
+            {key: 'orders', label: 'Supplier orders', icon: <LuClipboardList />, active: activeKey === 'orders'},
+        ],
+    },
+    {
+        key: 'operations',
+        items: [
+            {key: 'products', label: 'Products', icon: <LuBox />, active: activeKey === 'products'},
+            {key: 'calendar', label: 'Calendar', icon: <LuCalendar />, active: activeKey === 'calendar'},
+        ],
+    },
+];
+const languageItems: MenuItem[] = [
+    {key: 'ru', label: 'RU', icon: locale === 'ru' ? <LuCheck /> : undefined, onSelect: () => setLocale('ru')},
+    {key: 'en', label: 'EN', icon: locale === 'en' ? <LuCheck /> : undefined, onSelect: () => setLocale('en')},
+];
+
+<>
+    <Button onClick={() => setOpen(true)}>Open AppShell preview</Button>
+    <SpecialModal open={open} onOpenChange={setOpen} size='full' scroll='body'>
+        <SpecialModal.Header
+            title='AppShell preview'
+            actions={(
+                <>
+                    <Button size={2} v='surface' onClick={() => setPreviewMode((mode) => mode === 'desktop' ? 'phone' : 'desktop')}>
+                        Toggle preview
+                    </Button>
+                    <SpecialModal.Close />
+                </>
+            )}
+        />
+        <SpecialModal.Body>
+            <AppShell
+                sidebarMode={isPhone ? 'mobile' : 'desktop'}
+                sidebarSide={sidebarSide}
                 sidebarOpen={mobileOpen}
+                desktopSidebarOpen
                 onSidebarOpenChange={setMobileOpen}
-                actions={<Button size={1}>Create</Button>}
-            />
-        }
-        sidebar={
-            <AppShellSidebar
-                title='Operations'
-                description='Operational module shell with themed navigation.'
-                onClose={() => setMobileOpen(false)}
-                footer={<Button fullWidth v='surface'>Settings</Button>}
+                sidebarWidth={300}
+                contentInset={0}
+                maxWidth='100%'
+                header={(
+                    <AppShellHeader
+                        visibility='always'
+                        sidebarOpen={mobileOpen}
+                        onSidebarOpenChange={setMobileOpen}
+                        navigationVisibility='mobile'
+                        actions={(
+                            <Flex a='c' g={1}>
+                                <IconTextButton size={2} v='soft' tone='neutral' icon={<LuSearch />}>Quick jump</IconTextButton>
+                                <IconButton size={2} v='ghost' icon={<LuBell />} badge={64} aria-label='Notifications' />
+                                <IconButton size={2} v='ghost' icon={<LuMessageSquare />} badge={99} aria-label='Messages' />
+                                <Menu
+                                    align='end'
+                                    items={languageItems}
+                                    trigger={<IconButton size={2} v='ghost' icon={<LuLanguages />} aria-label={'Language: ' + locale.toUpperCase()} />}
+                                />
+                            </Flex>
+                        )}
+                    />
+                )}
+                sidebar={(
+                    <AppSidebar
+                        side={sidebarSide}
+                        header={(
+                            <>
+                                <div className='oui-app-sidebar-brand'><span className='oui-app-sidebar-logo'>O</span><span className='oui-app-sidebar-title'>Deliveries</span></div>
+                                <div className='oui-app-sidebar-actions'>
+                                    <Tooltip content='Back'>
+                                        <IconButton size={2} v='ghost' icon={<LuArrowLeft />} aria-label='Back' />
+                                    </Tooltip>
+                                    <Tooltip content={isRight ? 'Move sidebar left' : 'Move sidebar right'}>
+                                        <IconButton size={2} v='ghost' icon={<LuArrowLeftRight />} aria-label={isRight ? 'Move sidebar left' : 'Move sidebar right'} onClick={toggleSidebarSide} />
+                                    </Tooltip>
+                                    <IconButton size={2} v='ghost' icon={<LuEllipsis />} aria-label='Sidebar actions' />
+                                </div>
+                            </>
+                        )}
+                        itemH={38}
+                        onNavigate={(item) => setActiveKey(item.key)}
+                        groups={groups}
+                    />
+                )}
             >
-                <AppShellNav items={navigationItems} />
-            </AppShellSidebar>
-        }
-    >
-        <AppShellContent>
-            <Stack g={1}>
-                <Text as='h1' fs='22px' fw={760}>Queue</Text>
-                <Text tone='muted'>Daily workspace operations and status movement.</Text>
-            </Stack>
-            {children}
-        </AppShellContent>
-    </AppShell>
-</OrcestrUiProvider>`,
+                <AppShellContent scroll={false}>
+                    <PageTitleBlock
+                        title='Requests'
+                        caption='Module workspace with responsive header and AppSidebar navigation.'
+                        action={<IconButton size={2} v='pad' icon={<LuEllipsis />} aria-label='More actions' />}
+                    />
+                    {children}
+                </AppShellContent>
+            </AppShell>
+        </SpecialModal.Body>
+    </SpecialModal>
+</>`,
     layoutFlex: `import {Badge, Button, Flex, Text} from '@orcestr/ui';
 
 <Flex col g={3}>
     <Flex row g={2} a='c' j='sb' wrap>
         <Flex row g={2} a='c' wrap>
-            <Badge tone='brand'>status</Badge>
+            <Badge tone='primary'>status</Badge>
             <Text fw={700}>Task TASK-2048</Text>
         </Flex>
         <Flex row g={1} a='c'>
@@ -110,23 +196,50 @@ export const codeSamples = {
     </Flex>
     <Flex row g={2} wrap>
         {['Intake', 'Review', 'Complete'].map((item, index) => (
-            <Flex key={item} col g={1} p={2} r={3} flex='1 1 150px'>
+            <Flex
+                key={item}
+                col
+                g={1}
+                p={2}
+                r={3}
+                flex='1 1 150px'
+                style={{background: 'var(--oui-gray-a3)'}}
+            >
                 <Text fs='12px' tone='muted'>Step {index + 1}</Text>
                 <Text fw={700}>{item}</Text>
             </Flex>
         ))}
     </Flex>
 </Flex>`,
-    layoutStack: `import {Box, Flex, Stack, Text} from '@orcestr/ui';
+    layoutStack: `import {Flex, Stack, Text} from '@orcestr/ui';
 
 <Stack g={2}>
     {[
-        ['Created', 'Draft created from intake'],
-        ['Reserved', 'Capacity is reserved for review'],
-        ['Scheduled', 'Review window is confirmed'],
-    ].map(([title, description]) => (
-        <Flex key={title} row g={2} p={2} r={3} a='s'>
-            <Box size={8} r={7} mt={1} />
+        ['/gallery/cyberpunk-rain.webp', 'Created', 'Draft created from intake'],
+        ['/gallery/hollywood-star.webp', 'Reserved', 'Capacity is reserved for review'],
+        ['/gallery/ice-cave.webp', 'Scheduled', 'Review window is confirmed'],
+    ].map(([image, title, description]) => (
+        <Flex
+            key={title}
+            row
+            g={2}
+            a='c'
+            w='min(100%, 360px)'
+            p='8px 10px'
+            r={2}
+            style={{background: 'var(--oui-gray-a3)'}}
+        >
+            <img
+                src={image}
+                alt=''
+                style={{
+                    width: 34,
+                    height: 34,
+                    flex: '0 0 34px',
+                    borderRadius: 999,
+                    objectFit: 'cover',
+                }}
+            />
             <Stack g={0}>
                 <Text fs='13px' fw={700}>{title}</Text>
                 <Text fs='12px' tone='muted' lh={1.45}>{description}</Text>
@@ -147,7 +260,7 @@ const [detailsOpen, setDetailsOpen] = useState(true);
         </Button>
     </Flex>
     <Collapse open={detailsOpen}>
-        <Stack g={2} p={2} r={3}>
+        <Stack g={2} p={2} r={3} style={{background: 'var(--oui-gray-a3)'}}>
             <Flex row g={2} j='sb'>
                 <Text tone='muted'>Owner</Text>
                 <Text fw={700}>Core team</Text>
@@ -167,7 +280,7 @@ const [detailsOpen, setDetailsOpen] = useState(true);
 
 <Grid columns='repeat(3, minmax(0, 1fr))' g={2}>
     {['A', 'B', 'C', 'D', 'E', 'F'].map((item) => (
-        <Box key={item} p={2} r={3} ta='center'>
+        <Box key={item} p={2} r={3} ta='center' style={{background: 'var(--oui-gray-a3)'}}>
             <Text fs='13px' fw={700}>{item}</Text>
         </Box>
     ))}
@@ -193,11 +306,29 @@ const [detailsOpen, setDetailsOpen] = useState(true);
         position='absolute'
     />
 </div>`,
-    scrollArea: `import {Badge, Flex, ScrollArea, Stack, Text} from '@orcestr/ui';
+    scrollArea: `import {Badge, Box, Flex, ScrollArea, Stack, Text} from '@orcestr/ui';
+
+const scrollRows = Array.from({length: 10}, (_, index) => index + 1);
+const richRows = [
+    ['Queued', 'No top shade at the initial position.'],
+    ['Reserved', 'The top shade starts after 50px.'],
+    ['Packed', 'Opacity reaches maximum over 160px.'],
+    ['Labeled', 'Bottom shade fades near the end.'],
+    ['Reviewed', 'Each edge has its own configuration.'],
+    ['Delivered', 'The gradient uses the solid surface color.'],
+    ['Checked', 'Content remains readable under the fade.'],
+    ['Archived', 'The bottom edge disappears at the end.'],
+];
 
 <Stack g={2}>
     <ScrollArea h={116} pr={1}>
-        <Stack g={1}>{rows}</Stack>
+        <Stack g={1}>
+            {scrollRows.map((row) => (
+                <Box key={row} p={2} r={3} style={{background: 'var(--oui-gray-a3)'}}>
+                    <Text fs='13px'>Scroll row {row}</Text>
+                </Box>
+            ))}
+        </Stack>
     </ScrollArea>
 
     <ScrollArea
@@ -208,7 +339,13 @@ const [detailsOpen, setDetailsOpen] = useState(true);
         highlightTop={{h: 28, mode: 'static', maxOpacity: 0.96}}
         highlightBottom={{h: 28, mode: 'static', maxOpacity: 0.96}}
     >
-        <Stack g={1}>{rows}</Stack>
+        <Stack g={1}>
+            {scrollRows.slice(0, 8).map((row) => (
+                <Box key={row} p={2} r={3} style={{background: 'var(--oui-gray-a3)'}}>
+                    <Text fs='13px'>Both edges row {row}</Text>
+                </Box>
+            ))}
+        </Stack>
     </ScrollArea>
 
     <ScrollArea
@@ -232,14 +369,22 @@ const [detailsOpen, setDetailsOpen] = useState(true);
         }}
     >
         <Stack g={1}>
-            {rows.map((row, index) => (
-                <Flex key={row.id} row g={2} p={2} r={3} a='c'>
-                    <Badge tone={index < 3 ? 'brand' : 'info'}>
+            {richRows.map(([title, description], index) => (
+                <Flex
+                    key={title}
+                    row
+                    g={2}
+                    p={2}
+                    r={3}
+                    a='c'
+                    style={{background: 'var(--oui-gray-a3)'}}
+                >
+                    <Badge tone={index < 3 ? 'primary' : 'info'}>
                         {index + 1}
                     </Badge>
                     <Stack g={0}>
-                        <Text fs='13px' fw={700}>{row.title}</Text>
-                        <Text fs='12px' tone='muted'>{row.description}</Text>
+                        <Text fs='13px' fw={700}>{title}</Text>
+                        <Text fs='12px' tone='muted'>{description}</Text>
                     </Stack>
                 </Flex>
             ))}
@@ -250,15 +395,51 @@ const [detailsOpen, setDetailsOpen] = useState(true);
 
 <Flex g={2} a='c' wrap>
     {[0, 2, 4, 6, 7].map((radius) => (
-        <Box key={radius} size={32} r={radius} display='flex' a='c' j='c'>
-            <Text fs='12px'>{radius}</Text>
+        <Box
+            key={radius}
+            size={32}
+            r={radius}
+            display='flex'
+            a='c'
+            j='c'
+            style={{background: 'var(--oui-gray-a3)'}}
+        >
+            <Text fs='12px' fw={700}>{radius}</Text>
         </Box>
     ))}
 </Flex>
 <Button mt={2} v='pad' r={7}>
     Button r=7
 </Button>`,
-    buttons: `import {Button, Spinner} from '@orcestr/ui';
+    surfaces: `import {Alert, Button, Card, Grid, Section, Separator, Stack, Text} from '@orcestr/ui';
+
+<Section g={3}>
+    <Grid columns='repeat(auto-fit, minmax(min(100%, 180px), 1fr))' g={2}>
+        <Card v='surface' interactive>
+            <Stack g={1}>
+                <Text fw={760}>Surface card</Text>
+                <Text fs='12px' tone='muted'>Default operational surface.</Text>
+            </Stack>
+        </Card>
+        <Card v='soft'>
+            <Stack g={1}>
+                <Text fw={760}>Soft card</Text>
+                <Text fs='12px' tone='muted'>Quiet grouped content.</Text>
+            </Stack>
+        </Card>
+        <Card v='classic'>
+            <Stack g={1}>
+                <Text fw={760}>Classic card</Text>
+                <Text fs='12px' tone='muted'>More explicit border and background.</Text>
+            </Stack>
+        </Card>
+    </Grid>
+    <Separator />
+    <Alert title='Inventory sync delayed' action={<Button size={1} v='surface'>Retry</Button>}>
+        Check this status before creating the next shipment.
+    </Alert>
+</Section>`,
+    buttons: `import {Button, CopyButton, CopyIconButton, Spinner} from '@orcestr/ui';
 import {LuCheck, LuInfo, LuTrash2, LuTriangleAlert} from 'react-icons/lu';
 
 <Button size={3}>Solid</Button>
@@ -290,27 +471,58 @@ import {LuCheck, LuInfo, LuTrash2, LuTriangleAlert} from 'react-icons/lu';
 <Button v='surface' pressAnimation='soft'>Press soft</Button>
 <Button v='surface' pressAnimation='none'>Press none</Button>
 
+<CopyButton
+    text='https://orcestr.dev/requests/PR-2026-0900'
+    label='Copy link'
+    successMessage='Link copied'
+    v='surface'
+/>
+<CopyIconButton
+    text='PR-2026-0900'
+    label='Copy request number'
+    successMessage='Request number copied'
+    v='surface'
+/>
+
 <Button size={3} loading>Loading</Button>
 <Button size={3} v='surface' loading leftIcon={<LuCheck size={16} />}>Save</Button>
 <Button size={3} tone='success' loading leftIcon={<LuCheck size={16} />}>Success</Button>
 <Spinner />`,
     iconButtons: `import {Button, IconButton, Menu, Tooltip} from '@orcestr/ui';
-import {LuBell, LuCheck, LuCommand, LuEllipsis, LuInfo} from 'react-icons/lu';
+import {
+    LuBell,
+    LuCheck,
+    LuCommand,
+    LuDownload,
+    LuEllipsis,
+    LuInfo,
+    LuMessageSquare,
+    LuRefreshCw,
+    LuSearch,
+    LuSettings,
+    LuShield,
+    LuUpload,
+} from 'react-icons/lu';
 
 <IconButton v='solid' icon={<LuCheck size={17} />} aria-label='Solid icon' />
-<IconButton v='soft' icon={<LuBell size={17} />} aria-label='Soft icon' />
-<IconButton v='surface' icon={<LuBell size={17} />} aria-label='Surface icon' />
-<IconButton v='pad' icon={<LuBell size={17} />} aria-label='Pad icon' />
+<IconButton v='soft' icon={<LuSearch size={17} />} aria-label='Search icon' />
+<IconButton v='surface' icon={<LuUpload size={17} />} aria-label='Upload icon' />
+<IconButton v='pad' icon={<LuShield size={17} />} aria-label='Security icon' />
 <IconButton v='outline' icon={<LuInfo size={17} />} aria-label='Outline icon' />
 <IconButton v='ghost' icon={<LuEllipsis size={17} />} aria-label='Ghost icon' />
 
-<IconButton size={1} v='surface' icon={<LuBell size={13} />} aria-label='Size 1 icon' />
-<IconButton size={2} v='surface' icon={<LuBell size={15} />} aria-label='Size 2 icon' />
-<IconButton size={3} v='surface' icon={<LuBell size={17} />} aria-label='Size 3 icon' />
-<IconButton size={4} v='surface' icon={<LuBell size={19} />} aria-label='Size 4 icon' />
+<IconButton size={1} v='surface' icon={<LuSearch size={13} />} aria-label='Size 1 search' />
+<IconButton size={2} v='surface' icon={<LuDownload size={15} />} aria-label='Size 2 download' />
+<IconButton size={3} v='surface' icon={<LuRefreshCw size={17} />} aria-label='Size 3 refresh' />
+<IconButton size={4} v='surface' icon={<LuSettings size={19} />} aria-label='Size 4 settings' />
 
 <IconButton size={3} v='pad' round={false} r={3} icon={<LuCommand size={17} />} aria-label='Square pad icon' />
-<IconButton size={3} v='outline' loading icon={<LuBell size={17} />} aria-label='Loading icon' />
+<IconButton size={3} v='outline' loading icon={<LuRefreshCw size={17} />} aria-label='Loading icon' />
+
+<IconButton v='surface' icon={<LuBell size={17} />} badge={64} aria-label='Notifications' />
+<IconButton v='surface' icon={<LuMessageSquare size={17} />} badge={99} aria-label='Unread chats' />
+<IconButton v='pad' icon={<LuShield size={17} />} badge={3} badgeTone='warning' aria-label='Security warnings' />
+<IconButton v='ghost' icon={<LuDownload size={17} />} badge='new' badgeTone='info' aria-label='New export' />
 
 <IconButton size={1} v='ghost' icon={<LuEllipsis size={13} />} aria-label='Ghost size 1' />
 <IconButton size={2} v='ghost' icon={<LuEllipsis size={15} />} aria-label='Ghost size 2' />
@@ -318,10 +530,10 @@ import {LuBell, LuCheck, LuCommand, LuEllipsis, LuInfo} from 'react-icons/lu';
 <IconButton size={4} v='ghost' icon={<LuEllipsis size={19} />} aria-label='Ghost size 4' />
 
 <Tooltip content='Notifications'>
-    <IconButton v='surface' icon={<LuBell size={17} />} aria-label='Notifications' />
+    <IconButton v='surface' icon={<LuBell size={17} />} badge={8} aria-label='Notifications' />
 </Tooltip>
-<IconButton v='surface' loading icon={<LuBell size={17} />} aria-label='Loading action' />
-<IconButton v='pad' icon={<LuBell size={17} />} aria-label='Pad action' />
+<IconButton v='surface' loading icon={<LuRefreshCw size={17} />} aria-label='Loading action' />
+<IconButton v='pad' icon={<LuSettings size={17} />} aria-label='Pad action' />
 <Menu
     trigger={<IconButton v='surface' icon={<LuEllipsis size={17} />} aria-label='Actions' />}
     items={menuItems}
@@ -329,6 +541,35 @@ import {LuBell, LuCheck, LuCommand, LuEllipsis, LuInfo} from 'react-icons/lu';
 <Button v='surface' leftIcon={<LuCommand size={16} />} onClick={openPalette}>
     Commands
 </Button>`,
+    iconTextButton: `import {IconTextButton} from '@orcestr/ui';
+import {LuCopy, LuExternalLink, LuPackagePlus} from 'react-icons/lu';
+
+<IconTextButton icon={<LuPackagePlus size={16} />}>
+    Create PO
+</IconTextButton>
+<IconTextButton v='soft' tone='info' icon={<LuCopy size={16} />}>
+    Duplicate
+</IconTextButton>
+<IconTextButton href='/requests' v='surface' icon={<LuExternalLink size={16} />}>
+    Link action
+</IconTextButton>
+<IconTextButton v='outline' iconSide='end' icon={<LuExternalLink size={16} />}>
+    Open details
+</IconTextButton>`,
+    contextMenu: `import {ContextMenu, Text, type MenuItem} from '@orcestr/ui';
+
+const items: MenuItem[] = [
+    {key: 'open', label: 'Open'},
+    {key: 'copy', label: 'Copy link'},
+    {key: 'delete', label: 'Delete', tone: 'danger', separatorBefore: true},
+];
+
+<ContextMenu items={items}>
+    <div className='row'>
+        <Text fs='13px' fw={760}>Right-click this row</Text>
+        <Text fs='12px' tone='muted'>Context menu reuses Menu item styling.</Text>
+    </div>
+</ContextMenu>`,
     textFields: `import {Button, Flex, Field, TextArea, TextField} from '@orcestr/ui';
 import {LuSearch} from 'react-icons/lu';
 
@@ -346,6 +587,120 @@ import {LuSearch} from 'react-icons/lu';
 <Field label='Comment'>
     <TextArea rows={4} placeholder='Internal note' />
 </Field>`,
+    inlineEdit: `import {useState} from 'react';
+import {Badge, Field, IconButton, InlineEditField, InlineEditMultiField, Listbox, Popover, Stack} from '@orcestr/ui';
+import {LuCheck, LuPencil} from 'react-icons/lu';
+
+const [supplierOpen, setSupplierOpen] = useState(false);
+const [paymentOpen, setPaymentOpen] = useState(false);
+const [supplierKey, setSupplierKey] = useState('northwind');
+const [paymentTermKey, setPaymentTermKey] = useState('net30');
+const [ownerOpen, setOwnerOpen] = useState(false);
+const [ownerKeys, setOwnerKeys] = useState(['michael', 'team']);
+const supplier = suppliers.find((item) => item.key === supplierKey);
+const paymentTerm = paymentTerms.find((item) => item.key === paymentTermKey);
+const selectedOwners = owners.filter((item) => ownerKeys.includes(item.key));
+const toggleOwner = (key) => {
+    setOwnerKeys((current) =>
+        current.includes(key)
+            ? current.filter((item) => item !== key)
+            : [...current, key],
+    );
+};
+
+<Stack g={3}>
+    <Field label='Single value'>
+        <InlineEditField
+            label={supplier?.label ?? 'Choose supplier'}
+            meta='Supplier'
+            onOpen={() => setSupplierOpen(true)}
+            action={
+                <Popover
+                    open={supplierOpen}
+                    onOpenChange={setSupplierOpen}
+                    trigger={<IconButton size={1} v='ghost' icon={<LuPencil size={13} />} />}
+                    className='oui-combobox-content'
+                >
+                    <Listbox
+                        className='oui-combobox-options'
+                        items={suppliers.map((item) => ({value: item.key, label: item.label}))}
+                        value={supplierKey}
+                        onValueChange={(next) => {
+                            setSupplierKey(next);
+                            setSupplierOpen(false);
+                        }}
+                    />
+                </Popover>
+            }
+        />
+    </Field>
+    <Field label='Single value without meta'>
+        <InlineEditField
+            label={paymentTerm?.label ?? 'Choose payment terms'}
+            onOpen={() => setPaymentOpen(true)}
+            action={
+                <Popover
+                    open={paymentOpen}
+                    onOpenChange={setPaymentOpen}
+                    trigger={<IconButton size={1} v='ghost' icon={<LuPencil size={13} />} />}
+                    className='oui-combobox-content'
+                >
+                    <Listbox
+                        className='oui-combobox-options'
+                        items={paymentTerms.map((item) => ({value: item.key, label: item.label}))}
+                        value={paymentTermKey}
+                        onValueChange={(next) => {
+                            setPaymentTermKey(next);
+                            setPaymentOpen(false);
+                        }}
+                    />
+                </Popover>
+            }
+        />
+    </Field>
+    <Field label='Multiple values'>
+        <InlineEditMultiField
+            onOpen={() => setOwnerOpen(true)}
+            action={(
+                <span onClick={(event) => event.stopPropagation()}>
+                    <Popover
+                        open={ownerOpen}
+                        onOpenChange={setOwnerOpen}
+                        trigger={<IconButton size={1} v='ghost' icon={<LuPencil size={13} />} />}
+                        className='oui-combobox-content'
+                    >
+                        <Stack g={1} p={1}>
+                            {owners.map((item) => {
+                                const selected = ownerKeys.includes(item.key);
+                                return (
+                                    <button
+                                        key={item.key}
+                                        type='button'
+                                        className='oui-combobox-option'
+                                        data-selected={selected ? 'true' : 'false'}
+                                        onClick={() => toggleOwner(item.key)}
+                                    >
+                                        <span className='oui-multi-select-check'>
+                                            {selected ? <LuCheck size={13} /> : null}
+                                        </span>
+                                        <span className='oui-combobox-option-main'>
+                                            {item.label}
+                                        </span>
+                                    </button>
+                                );
+                            })}
+                        </Stack>
+                    </Popover>
+                </span>
+            )}
+            col
+        >
+            {selectedOwners.map((item) => (
+                <Badge key={item.key} tone='neutral' v='soft'>{item.label}</Badge>
+            ))}
+        </InlineEditMultiField>
+    </Field>
+</Stack>`,
     groupedFields: `import {Button, Flex, Field, Grid, Section, Stack, Text, TextArea, TextField} from '@orcestr/ui';
 
 <Section g={3}>
@@ -391,7 +746,7 @@ import {LuSearch} from 'react-icons/lu';
     today='2026-06-26'
     onValueChange={setDateRange}
 />`,
-    selection: `import {Combobox, EntityPicker, MultiSelect, Select, SegmentedControl} from '@orcestr/ui';
+    selection: `import {Combobox, EntityPicker, MultiSelect, PaginatedCombobox, Select, SegmentedControl} from '@orcestr/ui';
 import {LuPlus} from 'react-icons/lu';
 
 <Select items={items} value={status} onValueChange={setStatus} clearable />
@@ -454,6 +809,27 @@ import {LuPlus} from 'react-icons/lu';
         onClick: addEntity,
     }}
 />
+<PaginatedCombobox
+    value={paginatedValue}
+    onChange={setPaginatedValue}
+    loadPage={(page, search) => loadEntityPage(locale, page, search)}
+    getItemId={(item) => item.id}
+    renderSelectedLabel={(item) => item.article}
+    renderOption={(item) => (
+        <span className='oui-entity-option-main'>
+            <span className='oui-entity-option-code'>{item.article}</span>
+            <span className='oui-entity-option-meta'>{item.name}</span>
+        </span>
+    )}
+    placeholder='Paginated combobox'
+    clearable
+    searchAction={{label: 'Create entity from search', onClick: createEntity}}
+    optionAction={{
+        icon: <LuPlus size={14} />,
+        label: (item) => 'Add ' + item.article,
+        onClick: addEntity,
+    }}
+/>
 <SegmentedControl
     items={[
         {value: 'active', label: 'Active'},
@@ -566,7 +942,7 @@ import {LuChevronDown} from 'react-icons/lu';
     overlayColor='transparent'
     overlayOpacity={0}
     overlayBlur={10}
-    borderColor='color-mix(in srgb, var(--oui-brand) 34%, var(--oui-border))'
+    borderColor='color-mix(in srgb, var(--oui-primary-base) 34%, var(--oui-border))'
     radius={10}
     shadow='0 24px 90px rgb(0 0 0 / 44%)'
     footer={
@@ -595,7 +971,7 @@ import {LuChevronDown} from 'react-icons/lu';
     overlayColor='transparent'
     overlayOpacity={0}
     overlayBlur={8}
-    borderColor='color-mix(in srgb, var(--oui-brand) 38%, var(--oui-border))'
+    borderColor='color-mix(in srgb, var(--oui-primary-base) 38%, var(--oui-border))'
     radius={10}
     footer={
         <Flex g={2} j='e' w='100%'>
@@ -619,7 +995,7 @@ import {LuChevronDown} from 'react-icons/lu';
     overlayColor='transparent'
     overlayOpacity={0}
     overlayBlur={6}
-    borderColor='color-mix(in srgb, var(--oui-brand) 42%, var(--oui-border))'
+    borderColor='color-mix(in srgb, var(--oui-primary-base) 42%, var(--oui-border))'
     radius={10}
 >
     <Stack g={3}>
@@ -657,7 +1033,7 @@ import {LuChevronDown} from 'react-icons/lu';
     overlayOpacity={0}
     overlayBlur={14}
     animationDuration='1200ms'
-    borderColor='color-mix(in srgb, var(--oui-brand) 42%, var(--oui-border))'
+    borderColor='color-mix(in srgb, var(--oui-primary-base) 42%, var(--oui-border))'
     radius={10}
 >
     <Stack g={3}>
@@ -692,7 +1068,7 @@ import {LuChevronDown} from 'react-icons/lu';
     overlayColor='#3b0712'
     overlayOpacity={0.48}
     overlayBlur={3}
-    borderColor='color-mix(in srgb, var(--oui-danger) 46%, var(--oui-border))'
+    borderColor='color-mix(in srgb, var(--oui-danger-base) 46%, var(--oui-border))'
     radius={8}
     footer={
         <Flex g={2} j='e' w='100%'>
@@ -714,10 +1090,10 @@ import {LuChevronDown} from 'react-icons/lu';
         {
             key: 'create-record',
             label: 'Create record',
-            description: 'Start a workflow.',
+            description: 'Start a new record.',
             shortcut: 'C',
             group: 'Create',
-            keywords: ['new', 'workflow'],
+            keywords: ['new', 'record'],
             onSelect: () => toast.info('Create record action'),
         },
     ]}
@@ -740,6 +1116,19 @@ const toast = useToast();
 >
     Success
 </Button>
+<Button
+    onClick={() =>
+        toast.success({
+            title: 'Endless',
+            message: 'This success toast stays until you click it.',
+            position: 'bottom-right',
+            duration: null,
+            dedupeKey: 'endless-success-toast',
+        })
+    }
+>
+    Endless
+</Button>
 <Button
     onClick={() =>
         toast.warning({
@@ -784,31 +1173,14 @@ const toast = useToast();
     onClick={() =>
         toast.info({
             title: 'Glass background',
-            message: 'Custom blur and translucent background.',
+            message: 'Theme blur and translucent background.',
             position: 'bottom-right',
-            background: 'rgb(18 24 34 / 72%)',
-            blur: 18,
-            borderColor: 'rgb(255 255 255 / 18%)',
             duration: 5200,
         })
     }
 >
     Glass
 </Button>
-<Button
-    onClick={() =>
-        toast.info({
-            title: 'Static background',
-            message: 'Blur can be disabled per toast.',
-            position: 'bottom-left',
-            background: 'var(--oui-floating-bg)',
-            blur: false,
-            duration: 5200,
-        })
-    }
->
-    Static
-</Button>
 
 const toastPositions: Array<{position: ToastPosition; label: string}> = [
     {position: 'top-left', label: 'Top left'},
@@ -824,51 +1196,42 @@ const toastPositionVariants: Array<{
     label: string;
     tone: ToastTone;
     message: string;
-    background?: string;
-    blur?: number | string | false;
 }> = [
     {
         position: 'top-left',
         label: 'Status synced',
         tone: 'success',
-        message: 'Glass toast from the left edge.',
-        blur: 14,
+        message: 'Default glass toast from the left edge.',
     },
     {
         position: 'top-center',
         label: 'Command ready',
         tone: 'info',
-        message: 'Centered toast drops from the top.',
-        background: 'rgb(18 28 42 / 88%)',
-        blur: 10,
+        message: 'Centered toast uses the same glass surface.',
     },
     {
         position: 'top-right',
         label: 'Needs attention',
         tone: 'warning',
-        message: 'Right edge bubble animation.',
-        blur: 12,
+        message: 'Right edge toast keeps the same translucent surface.',
     },
     {
         position: 'bottom-left',
         label: 'Import queued',
         tone: 'info',
-        message: 'Static background, no blur.',
-        blur: false,
+        message: 'Bottom left toast keeps the same theme blur.',
     },
     {
         position: 'bottom-center',
         label: 'Batch completed',
         tone: 'success',
-        message: 'Bottom center rises into place.',
-        blur: 16,
+        message: 'Bottom center toast uses the theme defaults.',
     },
     {
         position: 'bottom-right',
         label: 'Export failed',
         tone: 'danger',
         message: 'Actionable toast from the right edge.',
-        blur: 12,
     },
 ];
 
@@ -880,7 +1243,7 @@ const toastPositionVariants: Array<{
         onClick={() =>
             toast.info({
                 title: item.label,
-                message: 'Positioned toast with directional bubble animation.',
+                message: 'Positioned toast with the default glass surface.',
                 position: item.position,
                 duration: 3600,
             })
@@ -902,8 +1265,6 @@ const toastPositionVariants: Array<{
                     message: item.message,
                     position: item.position,
                     tone: item.tone,
-                    background: item.background,
-                    blur: item.blur,
                     duration: 4200 + index * 220,
                 });
             }, index * 120);
@@ -929,6 +1290,116 @@ const toastPositionVariants: Array<{
 </Modal>
 
 <Button onClick={() => setOpen(true)}>Open modal</Button>`,
+    tablePagination: `import {Badge, Flex, Pagination, Stack, Table, Text} from '@orcestr/ui';
+
+<Stack g={3}>
+    <Table v='surface' w='100%'>
+        <Table.Header>
+            <Table.Row>
+                <Table.ColumnHeaderCell>Document</Table.ColumnHeaderCell>
+                <Table.ColumnHeaderCell>Status</Table.ColumnHeaderCell>
+                <Table.ColumnHeaderCell align='right'>Qty</Table.ColumnHeaderCell>
+            </Table.Row>
+        </Table.Header>
+        <Table.Body>
+            {rows.map((row) => (
+                <Table.Row key={row.name}>
+                    <Table.RowHeaderCell>{row.name}</Table.RowHeaderCell>
+                    <Table.Cell><Badge>{row.status}</Badge></Table.Cell>
+                    <Table.Cell align='right'>{row.quantity}</Table.Cell>
+                </Table.Row>
+            ))}
+        </Table.Body>
+    </Table>
+    <Flex j='sb' a='c' wrap g={2}>
+        <Text fs='13px' tone='muted'>Showing 25 items per page</Text>
+        <Pagination page={page} pageCount={4} onPageChange={setPage} />
+    </Flex>
+</Stack>`,
+    appSidebar: `import {useState} from 'react';
+import {AppSidebar, Flex, IconButton, Text} from '@orcestr/ui';
+import {LuBell, LuBox, LuLayoutDashboard, LuSettings, LuTruck} from 'react-icons/lu';
+
+const [activeKey, setActiveKey] = useState('requests');
+
+<AppSidebar
+    header={(
+        <>
+            <div className='oui-app-sidebar-brand'>
+                <span className='oui-app-sidebar-logo'>O</span>
+                <span className='oui-app-sidebar-title'>Deliveries</span>
+            </div>
+            <div className='oui-app-sidebar-actions'>
+                <IconButton size={2} v='ghost' icon={<LuSettings />} />
+            </div>
+        </>
+    )}
+    itemH={38}
+    onNavigate={(item) => setActiveKey(item.key)}
+    groups={[
+        {
+            key: 'main',
+            items: [
+                {
+                    key: 'overview',
+                    label: 'Overview',
+                    icon: <LuLayoutDashboard />,
+                    active: activeKey === 'overview',
+                },
+                {
+                    key: 'requests',
+                    label: 'Requests',
+                    icon: <LuTruck />,
+                    active: activeKey === 'requests',
+                },
+                {
+                    key: 'products',
+                    label: 'Products',
+                    icon: <LuBox />,
+                    active: activeKey === 'products',
+                },
+            ],
+        },
+    ]}
+    footer={(
+        <Flex col g={2}>
+            <Flex g={1}>
+                <IconButton size={2} v='ghost' icon={<LuBell />} badge={64} />
+                <IconButton size={2} v='ghost' icon={<LuSettings />} />
+            </Flex>
+            <Text fs='12px' tone='muted'>Admin workspace</Text>
+        </Flex>
+    )}
+/>`,
+    specialModal: `import {Badge, Button, Flex, SpecialModal, Stack, Text} from '@orcestr/ui';
+
+<SpecialModal open={open} onOpenChange={setOpen} size='lg' scroll='body'>
+    <SpecialModal.Header
+        title='Request PR-2026-0900'
+        meta={<Badge tone='success'>Closed</Badge>}
+        actions={<SpecialModal.Close />}
+    />
+    <SpecialModal.Body>
+        <Stack g={3}>
+            <Flex g={4} wrap>
+                <Stack g={0} w='min(100%, 220px)'>
+                    <Text fs='12px' tone='muted'>Supplier</Text>
+                    <Text fw={760}>Northwind Trading LLC</Text>
+                </Stack>
+                <Stack g={0} w='min(100%, 180px)'>
+                    <Text fs='12px' tone='muted'>Plan arrival</Text>
+                    <Text fw={760}>25.06.2026</Text>
+                </Stack>
+            </Flex>
+        </Stack>
+    </SpecialModal.Body>
+    <SpecialModal.Footer>
+        <Flex g={2} j='e' w='100%'>
+            <Button v='surface' onClick={() => setOpen(false)}>Close</Button>
+            <Button>Save</Button>
+        </Flex>
+    </SpecialModal.Footer>
+</SpecialModal>`,
     data: `import {Button, DataTable, TextField, type DataTableSort} from '@orcestr/ui';
 
 const [sort, setSort] = useState<DataTableSort | null>({key: 'name', direction: 'asc'});