@fragments-sdk/ui 0.8.5 → 0.8.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fragments-sdk/ui",
-  "version": "0.8.5",
+  "version": "0.8.7",
   "license": "MIT",
   "description": "Customizable UI components built on Base UI headless primitives",
   "author": "Conan McNicholl",
@@ -113,7 +113,7 @@
     "@tanstack/react-table": "^8.21.3",
     "vitest": "^2.1.8",
     "vitest-axe": "^0.1.0",
-    "@fragments-sdk/cli": "0.7.7"
+    "@fragments-sdk/cli": "0.7.10"
   },
   "files": [
     "src",

package/src/blocks/AccountSettings.block.ts

@@ -1,4 +1,4 @@
-import { defineBlock } from '@fragments/core';
+import { defineBlock } from '@fragments-sdk/cli/core';
 
 export default defineBlock({
   name: 'Account Settings',

package/src/blocks/ActivityFeed.block.ts

@@ -1,4 +1,4 @@
-import { defineBlock } from '@fragments/core';
+import { defineBlock } from '@fragments-sdk/cli/core';
 
 export default defineBlock({
   name: 'Activity Feed',

package/src/blocks/ChatInterface.block.ts

@@ -1,4 +1,4 @@
-import { defineBlock } from '@fragments/core';
+import { defineBlock } from '@fragments-sdk/cli/core';
 
 export default defineBlock({
   name: 'Chat Interface',

package/src/blocks/ChatMessages.block.ts

@@ -1,4 +1,4 @@
-import { defineBlock } from '@fragments/core';
+import { defineBlock } from '@fragments-sdk/cli/core';
 
 export default defineBlock({
   name: 'Chat Messages',

package/src/blocks/CheckoutForm.block.ts

@@ -1,4 +1,4 @@
-import { defineBlock } from '@fragments/core';
+import { defineBlock } from '@fragments-sdk/cli/core';
 
 export default defineBlock({
   name: 'Checkout Form',

package/src/blocks/ContactForm.block.ts

@@ -1,4 +1,4 @@
-import { defineBlock } from '@fragments/core';
+import { defineBlock } from '@fragments-sdk/cli/core';
 
 export default defineBlock({
   name: 'Contact Form',

package/src/blocks/DashboardLayout.block.ts

@@ -1,4 +1,4 @@
-import { defineBlock } from '@fragments/core';
+import { defineBlock } from '@fragments-sdk/cli/core';
 
 export default defineBlock({
   name: 'Dashboard Layout',

package/src/blocks/DashboardPage.block.ts

@@ -1,4 +1,4 @@
-import { defineBlock } from '@fragments/core';
+import { defineBlock } from '@fragments-sdk/cli/core';
 
 export default defineBlock({
   name: 'Dashboard Page',

package/src/blocks/DataTable.block.ts

@@ -1,4 +1,4 @@
-import { defineBlock } from '@fragments/core';
+import { defineBlock } from '@fragments-sdk/cli/core';
 
 export default defineBlock({
   name: 'Data Table',

package/src/blocks/EmptyState.block.ts

@@ -1,4 +1,4 @@
-import { defineBlock } from '@fragments/core';
+import { defineBlock } from '@fragments-sdk/cli/core';
 
 export default defineBlock({
   name: 'Empty State',

package/src/blocks/FAQSection.block.ts

@@ -1,4 +1,4 @@
-import { defineBlock } from '@fragments/core';
+import { defineBlock } from '@fragments-sdk/cli/core';
 
 export default defineBlock({
   name: 'FAQ Section',

package/src/blocks/FeatureGrid.block.ts

@@ -1,4 +1,4 @@
-import { defineBlock } from '@fragments/core';
+import { defineBlock } from '@fragments-sdk/cli/core';
 
 export default defineBlock({
   name: 'Feature Grid',

package/src/blocks/HeroSection.block.ts

@@ -1,4 +1,4 @@
-import { defineBlock } from '@fragments/core';
+import { defineBlock } from '@fragments-sdk/cli/core';
 
 export default defineBlock({
   name: 'Hero Section',

package/src/blocks/LoginForm.block.ts

@@ -1,4 +1,4 @@
-import { defineBlock } from '@fragments/core';
+import { defineBlock } from '@fragments-sdk/cli/core';
 
 export default defineBlock({
   name: 'Login Form',

package/src/blocks/NavigationHeader.block.ts

@@ -1,4 +1,4 @@
-import { defineBlock } from '@fragments/core';
+import { defineBlock } from '@fragments-sdk/cli/core';
 
 export default defineBlock({
   name: 'Navigation Header',

package/src/blocks/PricingComparison.block.ts

@@ -1,4 +1,4 @@
-import { defineBlock } from '@fragments/core';
+import { defineBlock } from '@fragments-sdk/cli/core';
 
 export default defineBlock({
   name: 'Pricing Comparison',

package/src/blocks/ProductCard.block.ts

@@ -1,4 +1,4 @@
-import { defineBlock } from '@fragments/core';
+import { defineBlock } from '@fragments-sdk/cli/core';
 
 export default defineBlock({
   name: 'Product Card',

package/src/blocks/RegistrationForm.block.ts

@@ -1,4 +1,4 @@
-import { defineBlock } from '@fragments/core';
+import { defineBlock } from '@fragments-sdk/cli/core';
 
 export default defineBlock({
   name: 'Registration Form',

package/src/blocks/SettingsPanel.block.ts

@@ -1,4 +1,4 @@
-import { defineBlock } from '@fragments/core';
+import { defineBlock } from '@fragments-sdk/cli/core';
 
 export default defineBlock({
   name: 'Settings Panel',

package/src/blocks/ShoppingCart.block.ts

@@ -1,4 +1,4 @@
-import { defineBlock } from '@fragments/core';
+import { defineBlock } from '@fragments-sdk/cli/core';
 
 export default defineBlock({
   name: 'Shopping Cart',

package/src/blocks/StatsCard.block.ts

@@ -1,4 +1,4 @@
-import { defineBlock } from '@fragments/core';
+import { defineBlock } from '@fragments-sdk/cli/core';
 
 export default defineBlock({
   name: 'Stats Card',

package/src/blocks/ThinkingStates.block.ts

@@ -1,4 +1,4 @@
-import { defineBlock } from '@fragments/core';
+import { defineBlock } from '@fragments-sdk/cli/core';
 
 export default defineBlock({
   name: 'Thinking States',

package/src/components/Accordion/Accordion.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { Accordion } from '.';
 
 export default defineFragment({

package/src/components/Alert/Alert.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { Alert } from '.';
 
 export default defineFragment({

package/src/components/AppShell/AppShell.fragment.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ChartBar, Gear, House, MagnifyingGlass } from '@phosphor-icons/react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { AppShell } from '.';
 import { Box } from '../Box';
 import { Header } from '../Header';
@@ -85,7 +85,7 @@ import { Stack } from '@/components/Stack';
 import { Text } from '@/components/Text';
 import { ThemeToggle } from '@/components/Theme';
 
-<Box height="400px" overflow="hidden" border rounded="md">
+<Box minHeight="100vh" overflow="hidden" border rounded="md">
   <AppShell layout="default">
     <AppShell.Header>
       <Header>
@@ -123,7 +123,7 @@ import { ThemeToggle } from '@/components/Theme';
   </AppShell>
 </Box>`,
       render: () => (
-        <Box height="400px" overflow="hidden" border rounded="md">
+        <Box minHeight="100vh" overflow="hidden" border rounded="md">
           <AppShell layout="default">
             <AppShell.Header>
               <Header>
@@ -175,7 +175,7 @@ import { Stack } from '@/components/Stack';
 import { Text } from '@/components/Text';
 import { ThemeToggle } from '@/components/Theme';
 
-<Box height="400px" overflow="hidden" border rounded="md">
+<Box minHeight="100vh" overflow="hidden" border rounded="md">
   <AppShell layout="sidebar">
     <AppShell.Header>
       <Header>
@@ -220,7 +220,7 @@ import { ThemeToggle } from '@/components/Theme';
   </AppShell>
 </Box>`,
       render: () => (
-        <Box height="400px" overflow="hidden" border rounded="md">
+        <Box minHeight="100vh" overflow="hidden" border rounded="md">
           <AppShell layout="sidebar">
             <AppShell.Header>
               <Header>
@@ -279,7 +279,7 @@ import { Stack } from '@/components/Stack';
 import { Text } from '@/components/Text';
 import { ThemeToggle } from '@/components/Theme';
 
-<Box height="400px" overflow="hidden" border rounded="md">
+<Box minHeight="100vh" overflow="hidden" border rounded="md">
   <AppShell layout="default">
     <AppShell.Header>
       <Header>
@@ -320,7 +320,7 @@ import { ThemeToggle } from '@/components/Theme';
   </AppShell>
 </Box>`,
       render: () => (
-        <Box height="400px" overflow="hidden" border rounded="md">
+        <Box minHeight="100vh" overflow="hidden" border rounded="md">
           <AppShell layout="default">
             <AppShell.Header>
               <Header>
@@ -374,7 +374,7 @@ import { Sidebar } from '@/components/Sidebar';
 import { Text } from '@/components/Text';
 import { ThemeToggle } from '@/components/Theme';
 
-<Box height="400px" overflow="hidden" border rounded="md">
+<Box minHeight="100vh" overflow="hidden" border rounded="md">
   <AppShell layout="sidebar">
     <AppShell.Header>
       <Header>
@@ -410,7 +410,7 @@ import { ThemeToggle } from '@/components/Theme';
   </AppShell>
 </Box>`,
       render: () => (
-        <Box height="400px" overflow="hidden" border rounded="md">
+        <Box minHeight="100vh" overflow="hidden" border rounded="md">
           <AppShell layout="sidebar">
             <AppShell.Header>
               <Header>
@@ -460,7 +460,7 @@ import { Stack } from '@/components/Stack';
 import { Text } from '@/components/Text';
 import { ThemeToggle } from '@/components/Theme';
 
-<Box height="400px" overflow="hidden" border rounded="md">
+<Box minHeight="100vh" overflow="hidden" border rounded="md">
   <AppShell layout="sidebar-floating">
     <AppShell.Header>
       <Header>
@@ -505,7 +505,7 @@ import { ThemeToggle } from '@/components/Theme';
   </AppShell>
 </Box>`,
       render: () => (
-        <Box height="400px" overflow="hidden" border rounded="md">
+        <Box minHeight="100vh" overflow="hidden" border rounded="md">
           <AppShell layout="sidebar-floating">
             <AppShell.Header>
               <Header>

package/src/components/Avatar/Avatar.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { Avatar } from '.';
 import { Stack } from '../Stack';
 

package/src/components/Avatar/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import styles from './Avatar.module.scss';
 // Import globals to ensure CSS variables are defined
@@ -109,11 +111,16 @@ const AvatarBase = React.forwardRef<HTMLDivElement, AvatarProps>(
     },
     ref
   ) {
+    const imgRef = React.useRef<HTMLImageElement>(null);
     const [imageError, setImageError] = React.useState(false);
 
-    // Reset error state when src changes
+    // Reset error state when src changes; check if already-loaded image failed
     React.useEffect(() => {
       setImageError(false);
+      const img = imgRef.current;
+      if (img && img.complete && img.naturalWidth === 0) {
+        setImageError(true);
+      }
     }, [src]);
 
     const showFallback = !src || imageError;
@@ -150,6 +157,7 @@ const AvatarBase = React.forwardRef<HTMLDivElement, AvatarProps>(
       >
         {!showFallback && (
           <img
+            ref={imgRef}
             src={src}
             alt={alt}
             className={styles.image}

package/src/components/Badge/Badge.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { Badge } from '.';
 import { Stack } from '../Stack';
 

package/src/components/Box/Box.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { Box } from '.';
 
 export default defineFragment({

package/src/components/Breadcrumbs/Breadcrumbs.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { Breadcrumbs } from '.';
 
 export default defineFragment({

package/src/components/Button/Button.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { Button } from '.';
 
 export default defineFragment({

package/src/components/ButtonGroup/ButtonGroup.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { ButtonGroup } from '.';
 import { Button } from '../Button';
 

package/src/components/Card/Card.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { Card } from '.';
 
 export default defineFragment({

package/src/components/Chart/Chart.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import {
   LineChart,
   Line,

package/src/components/Checkbox/Checkbox.fragment.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { Checkbox } from '.';
 
 // Stateful wrapper for interactive demos

package/src/components/Chip/Chip.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { Chip } from '.';
 
 export default defineFragment({

package/src/components/Chip/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import styles from './Chip.module.scss';
 import '../../styles/globals.scss';

package/src/components/CodeBlock/CodeBlock.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { CodeBlock } from '.';
 
 export default defineFragment({

package/src/components/Collapsible/Collapsible.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { Collapsible } from '.';
 
 export default defineFragment({

package/src/components/ColorPicker/ColorPicker.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { ColorPicker } from '.';
 
 export default defineFragment({

package/src/components/ColorPicker/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { Popover as BasePopover } from '@base-ui/react/popover';
 

package/src/components/Combobox/Combobox.fragment.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { Combobox } from '.';
 
 // Stateful wrapper for interactive demos

package/src/components/Combobox/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { Combobox as BaseCombobox } from '@base-ui/react/combobox';
 import styles from './Combobox.module.scss';

package/src/components/ConversationList/ConversationList.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { ConversationList } from '.';
 import { Message } from '../Message';
 

package/src/components/DatePicker/DatePicker.fragment.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { DatePicker } from '.';
 import type { DateRange } from '.';
 import { subDays } from 'date-fns';
@@ -87,17 +87,18 @@ export default defineFragment({
       required: true,
     },
     mode: {
-      type: "'single' | 'range'",
+      type: 'enum',
+      values: ['single', 'range'],
       description: 'Selection mode',
       default: "'single'",
     },
     selected: {
-      type: 'Date | null',
-      description: 'Controlled date (single mode)',
+      type: 'custom',
+      description: 'Controlled date (single mode). Type: Date | null',
     },
     selectedRange: {
-      type: 'DateRange | null',
-      description: 'Controlled range (range mode)',
+      type: 'custom',
+      description: 'Controlled range (range mode). Type: DateRange | null',
     },
     onSelect: {
       type: 'function',
@@ -118,8 +119,8 @@ export default defineFragment({
       default: 'false',
     },
     disabledDates: {
-      type: 'Matcher | Matcher[]',
-      description: 'Dates to disable (react-day-picker Matcher)',
+      type: 'custom',
+      description: 'Dates to disable (react-day-picker Matcher | Matcher[])',
     },
     placeholder: {
       type: 'string',
@@ -130,7 +131,7 @@ export default defineFragment({
   relations: [
     { component: 'Select', relationship: 'alternative', note: 'Use Select for choosing from a list of options' },
     { component: 'Input', relationship: 'sibling', note: 'Use Input for free-form text date entry' },
-    { component: 'Popover', relationship: 'uses', note: 'DatePicker uses Popover for the calendar dropdown' },
+    { component: 'Popover', relationship: 'composition', note: 'DatePicker uses Popover for the calendar dropdown' },
   ],
 
   contract: {

package/src/components/DatePicker/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { Popover as BasePopover } from '@base-ui/react/popover';
 import styles from './DatePicker.module.scss';

package/src/components/Dialog/Dialog.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { Dialog } from '.';
 import { Button } from '../Button';
 

package/src/components/EmptyState/EmptyState.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { EmptyState } from '.';
 import { Button } from '../Button';
 

package/src/components/Field/Field.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { Field } from '.';
 import { Input } from '../Input';
 import { Grid } from '../Grid';

package/src/components/Fieldset/Fieldset.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { Fieldset } from '.';
 import { Field } from '../Field';
 import { Input } from '../Input';

package/src/components/Form/Form.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { Form } from '.';
 import { Field } from '../Field';
 import { Fieldset } from '../Fieldset';

package/src/components/Grid/Grid.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { Grid } from '.';
 
 export default defineFragment({

package/src/components/Header/Header.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { Header } from '.';
 import { NavigationMenu } from '../NavigationMenu';
 import { ThemeToggle, ThemeProvider } from '../Theme';

package/src/components/Icon/Icon.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { Icon } from '.';
 import { Heart, Star, Check, Warning, Info } from '@phosphor-icons/react';
 

package/src/components/Image/Image.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { Image } from '.';
 
 export default defineFragment({

package/src/components/Image/index.tsx

@@ -43,8 +43,17 @@ const ImageRoot = React.forwardRef<HTMLDivElement, ImageProps>(
     },
     ref
   ) {
+    const imgRef = React.useRef<HTMLImageElement>(null);
     const [status, setStatus] = React.useState<'loading' | 'loaded' | 'error'>('loading');
 
+    // Handle images that are already cached/loaded before hydration
+    React.useEffect(() => {
+      const img = imgRef.current;
+      if (img && img.complete) {
+        setStatus(img.naturalWidth > 0 ? 'loaded' : 'error');
+      }
+    }, [src]);
+
     const handleLoad = () => setStatus('loaded');
     const handleError = () => setStatus('error');
 
@@ -80,6 +89,7 @@ const ImageRoot = React.forwardRef<HTMLDivElement, ImageProps>(
               <div className={styles.fallback}>{fallback}</div>
             )}
             <img
+              ref={imgRef}
               src={src}
               alt={alt}
               className={imgClasses}

package/src/components/Input/Input.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { Input } from '.';
 
 export default defineFragment({