chore: release

[github-actions]

This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.

Releases

@nexcraft/[email protected]

Patch Changes

• 24e826f: feat(ssr): comprehensive fallback CSS for styled SSR components

  Critical Fix for Unstyled Forms:

  • ✅ New fallback CSS file provides styling for all SSR fallback components
  • ✅ Fixes issue where components rendered as unstyled HTML inputs
  • ✅ Matches web component visual appearance during SSR

  What's Included:

  • Comprehensive styles for all form components (Input, Select, Checkbox, Switch, DatePicker)
  • Button variants and sizes (primary, secondary, outline, ghost)
  • UI components (Card, Badge, LoadingSpinner)
  • Responsive and accessible design

  How to Use:

  // Add to your app layout or root component
  import '@nexcraft/forge-react/fallbacks.css';

  Styled Components:

  • .forge-input - Text inputs with variants and sizes
  • .forge-checkbox - Checkbox with focus states
  • .forge-switch - Toggle switch with animations
  • .forge-select - Select dropdown with custom arrow
  • .forge-date-picker - Date input styling
  • .forge-button - Button variants (primary, secondary, outline, ghost)
  • .forge-card - Card with shadow and hover effects
  • .forge-badge - Badge variants (primary, success, warning, error)
  • .forge-loading-spinner - Animated spinner with sizes

  Impact:

  • ✅ Forms look styled immediately during SSR
  • ✅ No flash of unstyled content (FOUC)
  • ✅ Components visually upgrade when web components load
  • ✅ Better UX for users on slow connections

  Related Issues Fixed:

  • Gaming Highlight Reel unstyled forms (http://localhost:9001/register)
  • Multiple client reports of "blank/unstyled components"

• 24e826f: fix(ssr): improve hydration timing with customElements.whenDefined()

  Critical Timing Fix:

  • ✅ Components now properly upgrade from fallback to web component when loaded
  • ✅ Fixes issue where components stayed as fallback HTML indefinitely
  • ✅ Handles race condition between component render and web component registration

  What Changed:

  • Added customElements.whenDefined() detection in createUnifiedWrapper
  • Components wait for web component definition before upgrading
  • Graceful fallback if web components never load

  Technical Details:

  // Before: Only checked if component was already defined
  const shouldUpgrade = customElements.get(tagName) !== undefined;
  
  // After: Waits for component to be defined
  if (shouldUpgrade) {
    upgradeToWebComponent();
  } else {
    customElements.whenDefined(tagName).then(() => {
      upgradeToWebComponent();
    });
  }

  Impact:

  • ✅ Components upgrade correctly after web components load
  • ✅ Handles dynamic import scenarios
  • ✅ Handles Next.js Script with beforeInteractive strategy
  • ✅ No hydration mismatches or warnings

  Related Issues Fixed:

  • "Components stay as fallbacks" - now properly upgrade
  • Race condition with dynamic import('@nexcraft/forge')
  • Timing issues with Next.js Script loading

• 24e826f: feat(ssr): automatic 'use client' directive for Next.js App Router compatibility

  Critical SSR Fix:

  • ✅ Automatic 'use client' directive added to all React components during build
  • ✅ Components work in Next.js App Router without manual 'use client' directives
  • ✅ Zero-config SSR support for all React frameworks

  What Changed:

  • Build script automatically prepends 'use client'; to all compiled components
  • 40 component files now have 'use client' directive
  • No changes needed in source files (framework-agnostic)

  Impact:

  • ✅ Next.js App Router: Components work automatically
  • ✅ Remix: Full SSR support
  • ✅ Gatsby: No changes needed
  • ✅ No breaking changes - existing code works better

  Before (v1.0.3):

  'use client'; // User must add this
  import { ForgeButton } from '@nexcraft/forge-react';
  
  export function MyComponent() {
    return <ForgeButton>Click</ForgeButton>;
  }

  After (v1.0.4):

  // No 'use client' needed - package handles it!
  import { ForgeButton } from '@nexcraft/forge-react';
  
  export function MyComponent() {
    return <ForgeButton>Click</ForgeButton>;
  }

  Technical Details:

  • Post-build script: packages/forge-react/scripts/add-use-client.js
  • Build command updated: tsc && node scripts/add-use-client.js
  • Follows industry standard pattern (Material UI approach)
  • @nexcraft/[email protected]