@zvoove/unity-ui 2.33.0 → 2.34.0

package/dist/bin/cli.mjs

@@ -3778,11 +3778,19 @@ function generateRulesContent() {
 - NEVER pass \`className\` or \`style\` to ANY Unity UI component \u2014 use their props API only; put token-based Tailwind on native HTML wrappers (\`div\`, \`section\`, etc.) when you need extra layout or chrome
 - Stack \`align\` defaults to \`baseline\` \u2014 always set \`align\` explicitly when centering or stretching is needed
 - Stack with a Divider needs \`width="100%"\` \u2014 otherwise the divider will not span the full container width
+- Stack with \`justify="space-between"\` (or any space distribution): the last child must have \`width="fit-content"\` \u2014 without it the child stretches to fill remaining space and the spacing effect is lost
 - Use Stack and Grid for layout \u2014 do not use Card, div, or CSS for layout
 - Card is a visual container, NOT a layout tool \u2014 use Stack/Grid INSIDE a Card
 - Use Typography for all text \u2014 never use raw \`<p>\`, \`<h1>\`, \`<span>\` etc.
 - Use the spacing scale for gap/padding/margin \u2014 never use arbitrary pixel values
 - Icons use semantic names as strings (e.g., \`"search"\`, \`"delete"\`, \`"edit"\`) \u2014 never import Phosphor icon components directly
+- Use \`List\` for any vertical sequence of rows \u2014 search results, activity feeds, notification lists, inbox items, dashboard widgets. Do NOT build this with \`Stack\` + manual \`Divider\` loops. Each item's \`content\` prop accepts any \`ReactNode\`, so rich layouts (icon + text + badge, avatar + metadata + action) all fit inside \`List\`
+- \`List\` items have horizontal padding (\`pl-sm pr-sm\`) on the row wrapper. If the design calls for additional horizontal inset on the content Stack (e.g. to align with card edges), add only \`padding={{ left: 'sm', right: 'sm' }}\` on the content Stack \u2014 **never top/bottom padding**, as vertical spacing is handled by \`spread\`
+- Section titles and header actions (e.g. "\u2192 Alle") belong OUTSIDE the \`Card\` that wraps list content \u2014 the \`Card\` contains only the list itself
+- Always add the \`interactive\` prop to \`Card\` whenever it has a link, \`onClick\`, or any click/keyboard interaction \u2014 this enables the correct hover and focus states
+- **Gap vs Padding**: Use \`Stack\` with \`gap\` to separate sibling elements from each other. Use \`padding\` only to add space between an element and its container boundary. Never use \`padding\` on a child element to create distance between siblings \u2014 that creates asymmetric spacing and fights with the container's own padding
+- **Always verify props before using them**: Before passing any prop to a Unity UI component, confirm it exists in the component's TypeScript type (e.g. \`ButtonProps\`, \`GridItemProps\`). Do NOT assume a prop exists because it exists on a similar component or seems logical. When in doubt, read the type definition or run a grep. Known traps: \`Button\` has no \`iconPosition\` prop; \`Grid.Item\` has no \`height\` prop (only \`Grid\` does)
+- **No markdown tables in MDX files**: Storybook uses MDX2/3 which does NOT support GitHub Flavored Markdown tables. Never use \`| col | col |\` pipe-table syntax in \`.mdx\` files \u2014 it will not render. Use HTML \`<table>\` elements instead. Markdown tables are fine in \`.md\` files (rules, profiles, skills) since those are only read by AI agents, not rendered by Storybook
 
 ## Skill Routing
 
@@ -3856,6 +3864,49 @@ Load the matching skill for full props, examples, and rules:
 | useClickOutside | \`unity-ui-use-click-outside\` |
 
 > If unsure which component to use, load \`unity-ui-index\` for the full equivalence table (shadcn/ui \u2192 Unity UI).
+
+## Component Aliases
+
+When a component is requested by a name not listed above, resolve it using this table before doing anything else. If you find a match, use the Unity UI component \u2014 never recreate it.
+
+| If asked for... | Use Unity UI component |
+|-----------------|------------------------|
+| Drawer, Side panel, Flyout, Slide-over, Panel, Offcanvas | **Sheet** |
+| Input, TextInput, FormInput, InputField, TextBox, Text field | **TextField** |
+| MultilineInput, TextareaInput, Multi-line text | **Textarea** |
+| Modal, Popup, Overlay, Alert dialog, Modal dialog, Lightbox | **Dialog** |
+| Dropdown, ComboBox, Picker, DropdownSelect, DropDown, Select input | **Select** |
+| Toast, Notification, Alert (temporary/dismissible) | **Snackbar** |
+| Header, AppBar, Navbar, Navigation bar, Toolbar, App header, Top navigation | **TopBar** |
+| Sidebar, Side menu, Nav, Navigation drawer, NavBar, Left nav | **SideNavigation** |
+| Spinner, Loader, Loading indicator, Loading spinner, Busy indicator | **ProgressIndicator** |
+| Context menu, Action menu, Kebab menu, More menu, Dropdown menu, Options menu | **PopUpMenu** |
+| Alert (inline/persistent), Warning banner, Info banner, Notice, Callout, Inline alert | **InfoBox** |
+| Collapsible, Collapse, CollapsePanel, Disclosure (single item) | **Expandable** |
+| Collapsible list, Expandable list, Collapsible sections (multiple items) | **Accordion** |
+| Segmented control, Button group, Toggle group, Radio tabs, Tab buttons | **Segment / SegmentGroup** |
+| File upload, Drop zone, Dropzone, File picker, Attachment uploader | **Uploader** |
+| Toggle, Toggle switch | **Switch** |
+| Date input, Date field, Calendar picker | **DatePicker** |
+| Shimmer, Loading placeholder, Content placeholder | **Skeleton** |
+| Confirm dialog, Confirmation panel, Confirm card, Delete confirmation | **ConfirmationCard** |
+| Profile picture, User icon, Profile icon, User avatar, Initials avatar | **Avatar / AvatarGroup** |
+| Hint, Help tooltip, Popover (read-only), Info bubble | **Tooltip** |
+| Breadcrumb, Path, Navigation path, Crumbs | **Breadcrumbs** |
+| Indicator, Status badge, Notification badge, Dot indicator, Counter badge | **Badge** |
+| Filter chip, Choice chip, Action chip, Removable tag | **Chip** |
+| Label tag, Status tag, Status label, Category label | **Tag** |
+| Flexbox container, HStack, VStack, Flex, Box | **Stack** |
+| Grid layout, CSS grid, Masonry (equal columns) | **Grid** |
+| Menu list, Navigation list, Action list, Vertical menu | **ListMenu** |
+| Tab navigation, Sub navigation, Section tabs, Tab bar (secondary) | **MidSectionMenus** |
+| Content section, Page section, Content container, Content area | **ContentBlock** |
+| Label, Field label, Input label, Form label | **FormLabel** |
+| Pager, Page navigation, Page controls | **Pagination** |
+| Tab bar, Tab panel, Tabbed interface | **Tabs** |
+| Separator, Horizontal rule, HR | **Divider** |
+| Code, Syntax highlighter, Code snippet | **CodeBlock** |
+| Text, Paragraph, Heading, Label text, Caption | **Typography** |
 `;
 }
 async function runRules({ output: outputDir } = {}) {

package/dist/theme.css

@@ -908,3 +908,20 @@
     font-family: 'Source Sans 3', sans-serif;
   }
 }
+
+@layer components {
+  .chat-container {
+    container-type: inline-size;
+  }
+
+  @container (max-width: 480px) {
+    [data-testid='chat-bubble'] {
+      grid-template-columns: 1fr;
+      --chat-content-measure: 90%;
+    }
+
+    [data-testid='chat-bubble'] > [data-slot='avatar'] {
+      display: none;
+    }
+  }
+}