polen 0.11.0-next.2 → 0.11.0-next.20

package/src/lib/swiss/types.ts

@@ -0,0 +1,353 @@
+import type { LayoutProps, MarginProps } from '@radix-ui/themes/props'
+import type { CSSProperties, ReactNode } from 'react'
+
+/**
+ * Responsive value type that matches Radix UI Themes breakpoint pattern.
+ * Allows values to change at different viewport sizes.
+ */
+export type ResponsiveValue<T> = T | {
+  initial?: T
+  xs?: T // 520px
+  sm?: T // 768px
+  md?: T // 1024px
+  lg?: T // 1280px
+  xl?: T // 1640px
+}
+
+/**
+ * Grid span zones for content placement.
+ */
+export type GridSpan = 'body' | 'extended' | 'viewport'
+
+/**
+ * Number of columns (1-12) for grid items.
+ */
+export type GridColumns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+
+/**
+ * Grid column positions including the end position (13) for 12-column grids.
+ */
+export type GridPosition = GridColumns | 13
+
+/**
+ * String literal types for explicit grid column positioning.
+ * Provides type-safe CSS grid-column values.
+ */
+export type GridColumnString =
+  | `${GridPosition}` // Start position: "1" through "13"
+  | `${GridPosition} / ${GridPosition}` // Start / End: "1 / 3", "3 / 11", etc.
+  | `${GridPosition} / span ${GridColumns}` // Start / Span: "1 / span 2", "3 / span 8"
+  | `span ${GridColumns}` // Just span: "span 1" through "span 12"
+  | 'auto'
+
+/**
+ * Props for the main Swiss Grid container component.
+ * Creates a 12-column grid system with semantic zones for content placement.
+ *
+ * The grid defines three content zones:
+ * - **Viewport**: Full viewport width
+ * - **Extended**: Slightly wider than body, for emphasis
+ * - **Body**: Main content area with 12 columns
+ *
+ * @example
+ * ```tsx
+ * <Swiss.Grid
+ *   maxWidth={1440}
+ *   gutter="var(--space-4)"
+ *   margins="var(--space-5)"
+ *   debug={true}
+ * >
+ *   <Swiss.Body>Main content</Swiss.Body>
+ *   <Swiss.Extended>Featured image</Swiss.Extended>
+ *   <Swiss.Viewport>Full-width hero</Swiss.Viewport>
+ * </Swiss.Grid>
+ * ```
+ */
+export interface GridProps extends LayoutProps, MarginProps {
+  children: ReactNode
+  /**
+   * Gap between grid columns.
+   * Typically uses Radix space variables for consistent spacing.
+   *
+   * @default "var(--space-4, 1.5rem)"
+   *
+   * @example
+   * ```tsx
+   * // Using Radix space scale
+   * <Swiss.Grid gutter="var(--space-3)">
+   *
+   * // Responsive gaps
+   * <Swiss.Grid gutter={{ initial: "var(--space-2)", md: "var(--space-4)" }}>
+   * ```
+   */
+  gutter?: ResponsiveValue<string>
+  /**
+   * Minimum margins on either side of the grid.
+   * These margins ensure content doesn't touch viewport edges.
+   *
+   * @default "var(--space-5, 2rem)"
+   *
+   * @example
+   * ```tsx
+   * // Consistent margins
+   * <Swiss.Grid margins="var(--space-6)">
+   *
+   * // Responsive margins - tighter on mobile
+   * <Swiss.Grid margins={{ initial: "var(--space-3)", md: "var(--space-5)" }}>
+   * ```
+   */
+  margins?: ResponsiveValue<string>
+  /**
+   * Number of columns in the grid.
+   * Defaults to 12 for desktop, automatically adjusts for tablet (8) and mobile (4).
+   *
+   * @default 12
+   *
+   * @example
+   * ```tsx
+   * // Custom column count
+   * <Swiss.Grid columns={16}>
+   *
+   * // Responsive columns
+   * <Swiss.Grid columns={{ initial: 4, sm: 8, md: 12 }}>
+   * ```
+   */
+  columns?: ResponsiveValue<number>
+  /**
+   * Enable debug mode to show grid overlay.
+   * Displays a visual grid to help with layout development.
+   *
+   * @default false
+   */
+  debug?: boolean
+  /**
+   * Additional CSS class names.
+   */
+  className?: string
+  /**
+   * Additional inline styles.
+   */
+  style?: CSSProperties
+}
+
+/**
+ * Props for semantic grid zone components (Body, Viewport, Extended).
+ * These components automatically span their respective grid zones.
+ *
+ * @example
+ * ```tsx
+ * // Body zone - main content area
+ * <Swiss.Body>
+ *   <article>Article content constrained to body width</article>
+ * </Swiss.Body>
+ *
+ * // Extended zone - slightly wider than body
+ * <Swiss.Extended>
+ *   <img src="feature.jpg" alt="Featured image breaks out slightly" />
+ * </Swiss.Extended>
+ *
+ * // Viewport zone - full width
+ * <Swiss.Viewport>
+ *   <section>Full-width hero section</section>
+ * </Swiss.Viewport>
+ * ```
+ */
+export interface GridItemProps extends LayoutProps, MarginProps {
+  children: ReactNode
+  /**
+   * Whether to merge props onto immediate child element.
+   * When true, the component doesn't render its own element but merges
+   * its props (including grid zone positioning) onto the child element.
+   * Useful for maintaining semantic HTML while benefiting from grid zones.
+   *
+   * @default false
+   *
+   * @example
+   * ```tsx
+   * // Merges Body zone onto existing section element
+   * <Swiss.Body asChild>
+   *   <section>Content respects body zone without extra div</section>
+   * </Swiss.Body>
+   * ```
+   */
+  asChild?: boolean
+  /**
+   * Enable subgrid to propagate parent grid tracks to children.
+   * When true, this item becomes a grid container with `grid-template-columns: subgrid`,
+   * allowing its children to align with the parent grid columns.
+   *
+   * @default false
+   *
+   * @example
+   * ```tsx
+   * // Navbar that aligns its children to parent grid
+   * <Swiss.Viewport subgrid flow="row">
+   *   <Logo />        // Aligns to grid columns
+   *   <Navigation />  // Aligns to grid columns
+   *   <Actions />     // Aligns to grid columns
+   * </Swiss.Viewport>
+   * ```
+   */
+  subgrid?: boolean
+  /**
+   * Controls the layout direction when subgrid is enabled.
+   * Uses Flexbox-like semantics for intuitive API.
+   * - `'row'`: Horizontal layout (items placed left to right)
+   * - `'column'`: Vertical layout (items placed top to bottom)
+   * - `undefined`: Defaults to 'row' (horizontal) when subgrid is true
+   *
+   * Only applies when `subgrid=true`.
+   *
+   * @example
+   * ```tsx
+   * // Horizontal navbar (default)
+   * <Swiss.Body subgrid>
+   *   <Item cols={2}>Logo</Item>
+   *   <Item cols={8}>Nav</Item>
+   *   <Item cols={2}>Actions</Item>
+   * </Swiss.Body>
+   *
+   * // Vertical sidebar
+   * <Swiss.Extended subgrid flow="column">
+   *   <Item>Home</Item>
+   *   <Item>About</Item>
+   *   <Item>Contact</Item>
+   * </Swiss.Extended>
+   * ```
+   */
+  flow?: 'row' | 'column'
+  /**
+   * Additional CSS class names for custom styling.
+   */
+  className?: string
+  /**
+   * Additional inline styles.
+   * Useful for one-off adjustments.
+   */
+  style?: CSSProperties
+}
+
+/**
+ * Props for the flexible Item component.
+ * Provides intelligent column spanning with auto-placement or explicit positioning.
+ * Inherits subgrid and flow capabilities from GridItemProps.
+ */
+export interface ItemProps extends GridItemProps {
+  /**
+   * Semantic grid zone to span.
+   * - `'body'`: Main content area (12 columns)
+   * - `'extended'`: Slightly wider than body
+   * - `'viewport'`: Full viewport width
+   *
+   * @default 'body'
+   *
+   * @example
+   * ```tsx
+   * <Swiss.Item span="viewport">Full-width hero</Swiss.Item>
+   * <Swiss.Item span="body">Article content</Swiss.Item>
+   * <Swiss.Item span="extended">Featured image</Swiss.Item>
+   * ```
+   */
+  span?: ResponsiveValue<GridSpan>
+  /**
+   * Column specification - intelligently handles both auto-placement and explicit positioning.
+   *
+   * **Number values** (1-12): Span that many columns in auto-flow
+   * **String values**: Explicit CSS grid-column positioning
+   *
+   * When used with `start` prop, number values specify the span from the start position.
+   *
+   * @example
+   * ```tsx
+   * // Auto-placement - just specify size
+   * <Swiss.Item cols={6}>Half width</Swiss.Item>
+   *
+   * // With start position
+   * <Swiss.Item cols={7} start={5}>Start at col 5, span 7 columns</Swiss.Item>
+   *
+   * // Explicit placement - exact position
+   * <Swiss.Item cols="3 / 11">Columns 3-10</Swiss.Item>
+   * <Swiss.Item cols="1 / span 4">Start at 1, span 4</Swiss.Item>
+   *
+   * // Responsive
+   * <Swiss.Item cols={{ initial: 12, md: 6, lg: "3 / 7" }}>
+   *   Full width mobile, half tablet, cols 3-6 desktop
+   * </Swiss.Item>
+   * ```
+   */
+  cols?: ResponsiveValue<GridColumns | GridColumnString>
+  /**
+   * Starting column position (1-13) for explicit grid placement.
+   * When used with numeric `cols`, creates `grid-column: start / span cols`.
+   * Ignored when `cols` is a string value with explicit positioning.
+   *
+   * @example
+   * ```tsx
+   * // Start at column 5, span 7 columns
+   * <Swiss.Item start={5} cols={7}>Content</Swiss.Item>
+   *
+   * // Responsive start position
+   * <Swiss.Item start={{ initial: 1, md: 5 }} cols={7}>
+   *   Start at col 1 mobile, col 5 desktop
+   * </Swiss.Item>
+   * ```
+   */
+  start?: ResponsiveValue<GridPosition>
+}
+
+/**
+ * Props for the Swiss Grid SubGrid component.
+ * SubGrid inherits grid tracks from its parent grid, enabling perfect alignment.
+ */
+export interface SubGridProps extends React.HTMLAttributes<HTMLDivElement>, LayoutProps {
+  /**
+   * Whether to merge props onto immediate child element.
+   * When true, SubGrid doesn't render its own element.
+   * @default false
+   */
+  asChild?: boolean
+  /**
+   * Number of parent grid columns this subgrid should span.
+   * Supports responsive values for different breakpoints.
+   *
+   * @example
+   * ```tsx
+   * // Span 12 columns on mobile, 8 on desktop
+   * <Swiss.SubGrid cols={{ initial: 12, md: 8 }}>
+   * ```
+   */
+  cols?: ResponsiveValue<number>
+  /**
+   * Number of rows to span (optional).
+   * If not provided, inherits all rows from parent grid.
+   */
+  rows?: ResponsiveValue<number>
+  /**
+   * Controls the layout direction of auto-placed items, using Flexbox-like semantics.
+   * - `'row'`: Horizontal layout (items placed left to right)
+   * - `'column'`: Vertical layout (items placed top to bottom)
+   * - `undefined`: Don't set flow direction (inherit from parent or use CSS default)
+   *
+   * Note: Internally maps to CSS grid-auto-flow with inverted values for intuitive API:
+   * - `'row'` → `grid-auto-flow: column` (fills columns first for horizontal appearance)
+   * - `'column'` → `grid-auto-flow: row` (fills rows first for vertical appearance)
+   *
+   * @example
+   * ```tsx
+   * // Horizontal navbar layout
+   * <Swiss.SubGrid flow="row">
+   *   <Swiss.Item cols={2}>Logo</Swiss.Item>
+   *   <Swiss.Item cols={8}>Navigation</Swiss.Item>
+   *   <Swiss.Item cols={2}>Actions</Swiss.Item>
+   * </Swiss.SubGrid>
+   *
+   * // Vertical sidebar layout
+   * <Swiss.SubGrid flow="column">
+   *   <Swiss.Item>Home</Swiss.Item>
+   *   <Swiss.Item>About</Swiss.Item>
+   *   <Swiss.Item>Contact</Swiss.Item>
+   * </Swiss.SubGrid>
+   * ```
+   */
+  flow?: 'row' | 'column'
+}

package/src/lib/swiss/utils.ts

@@ -0,0 +1,144 @@
+import { extractProps } from '@radix-ui/themes/helpers'
+import { layoutPropDefs, marginPropDefs, paddingPropDefs } from '@radix-ui/themes/props'
+import type { GridColumns, GridSpan, ResponsiveValue } from './types.js'
+
+/**
+ * Convert a value to pixels if it's a number, otherwise return as-is.
+ */
+const toPx = (value: number | string): string => {
+  return typeof value === 'number' ? `${value}px` : value
+}
+
+/**
+ * Generate CSS variables from responsive props.
+ */
+export const generateCSSVars = (props: {
+  maxWidth?: ResponsiveValue<number | string>
+  gutter?: ResponsiveValue<string>
+  margins?: ResponsiveValue<string>
+  columns?: ResponsiveValue<number>
+}): Record<string, string | undefined> => {
+  const vars: Record<string, string | undefined> = {}
+
+  // Handle maxWidth
+  if (props.maxWidth !== undefined) {
+    if (typeof props.maxWidth === 'object') {
+      if (props.maxWidth.initial !== undefined) vars['--swiss-max'] = toPx(props.maxWidth.initial)
+      if (props.maxWidth.xs !== undefined) vars['--swiss-max-xs'] = toPx(props.maxWidth.xs)
+      if (props.maxWidth.sm !== undefined) vars['--swiss-max-sm'] = toPx(props.maxWidth.sm)
+      if (props.maxWidth.md !== undefined) vars['--swiss-max-md'] = toPx(props.maxWidth.md)
+      if (props.maxWidth.lg !== undefined) vars['--swiss-max-lg'] = toPx(props.maxWidth.lg)
+      if (props.maxWidth.xl !== undefined) vars['--swiss-max-xl'] = toPx(props.maxWidth.xl)
+    } else {
+      vars['--swiss-max'] = toPx(props.maxWidth)
+    }
+  }
+
+  // Handle gutter
+  if (props.gutter !== undefined) {
+    if (typeof props.gutter === 'object') {
+      if (props.gutter.initial !== undefined) vars['--swiss-gutter'] = props.gutter.initial
+      if (props.gutter.xs !== undefined) vars['--swiss-gutter-xs'] = props.gutter.xs
+      if (props.gutter.sm !== undefined) vars['--swiss-gutter-sm'] = props.gutter.sm
+      if (props.gutter.md !== undefined) vars['--swiss-gutter-md'] = props.gutter.md
+      if (props.gutter.lg !== undefined) vars['--swiss-gutter-lg'] = props.gutter.lg
+      if (props.gutter.xl !== undefined) vars['--swiss-gutter-xl'] = props.gutter.xl
+    } else {
+      vars['--swiss-gutter'] = props.gutter
+    }
+  }
+
+  // Handle margins
+  if (props.margins !== undefined) {
+    if (typeof props.margins === 'object') {
+      if (props.margins.initial !== undefined) vars['--swiss-margins'] = props.margins.initial
+      if (props.margins.xs !== undefined) vars['--swiss-margins-xs'] = props.margins.xs
+      if (props.margins.sm !== undefined) vars['--swiss-margins-sm'] = props.margins.sm
+      if (props.margins.md !== undefined) vars['--swiss-margins-md'] = props.margins.md
+      if (props.margins.lg !== undefined) vars['--swiss-margins-lg'] = props.margins.lg
+      if (props.margins.xl !== undefined) vars['--swiss-margins-xl'] = props.margins.xl
+    } else {
+      vars['--swiss-margins'] = props.margins
+    }
+  }
+
+  // Handle columns
+  if (props.columns !== undefined) {
+    if (typeof props.columns === 'object') {
+      if (props.columns.initial !== undefined) vars['--swiss-columns'] = String(props.columns.initial)
+      if (props.columns.xs !== undefined) vars['--swiss-columns-xs'] = String(props.columns.xs)
+      if (props.columns.sm !== undefined) vars['--swiss-columns-sm'] = String(props.columns.sm)
+      if (props.columns.md !== undefined) vars['--swiss-columns-md'] = String(props.columns.md)
+      if (props.columns.lg !== undefined) vars['--swiss-columns-lg'] = String(props.columns.lg)
+      if (props.columns.xl !== undefined) vars['--swiss-columns-xl'] = String(props.columns.xl)
+    } else {
+      vars['--swiss-columns'] = String(props.columns)
+    }
+  }
+
+  return vars
+}
+
+/**
+ * Generate data attributes for responsive grid item behavior.
+ */
+export const generateDataAttributes = (props: {
+  span?: ResponsiveValue<GridSpan>
+  cols?: ResponsiveValue<GridColumns>
+}): Record<string, string> => {
+  const attrs: Record<string, string> = {}
+
+  // Handle span
+  if (props.span !== undefined) {
+    if (typeof props.span === 'object') {
+      if (props.span.initial !== undefined) attrs['data-span'] = props.span.initial
+      if (props.span.xs !== undefined) attrs['data-span-xs'] = props.span.xs
+      if (props.span.sm !== undefined) attrs['data-span-sm'] = props.span.sm
+      if (props.span.md !== undefined) attrs['data-span-md'] = props.span.md
+      if (props.span.lg !== undefined) attrs['data-span-lg'] = props.span.lg
+      if (props.span.xl !== undefined) attrs['data-span-xl'] = props.span.xl
+    } else {
+      attrs['data-span'] = props.span
+    }
+  }
+
+  // Handle cols
+  if (props.cols !== undefined) {
+    if (typeof props.cols === 'object') {
+      if (props.cols.initial !== undefined) attrs['data-cols'] = String(props.cols.initial)
+      if (props.cols.xs !== undefined) attrs['data-cols-xs'] = String(props.cols.xs)
+      if (props.cols.sm !== undefined) attrs['data-cols-sm'] = String(props.cols.sm)
+      if (props.cols.md !== undefined) attrs['data-cols-md'] = String(props.cols.md)
+      if (props.cols.lg !== undefined) attrs['data-cols-lg'] = String(props.cols.lg)
+      if (props.cols.xl !== undefined) attrs['data-cols-xl'] = String(props.cols.xl)
+    } else {
+      attrs['data-cols'] = String(props.cols)
+    }
+  }
+
+  return attrs
+}
+
+/**
+ * Combine class names, filtering out undefined values.
+ */
+export const cx = (...classes: (string | undefined | false)[]): string => {
+  return classes.filter(Boolean).join(' ')
+}
+
+/**
+ * Extract layout props (margin, padding, position, etc.) from component props.
+ * Uses Radix UI Themes' extractProps to generate classNames and styles.
+ */
+export const extractLayoutProps = <T extends Record<string, any>>(props: T) => {
+  // Use Radix's extractProps with layout and margin prop definitions
+  // Note: layoutPropDefs already includes padding, width, and height internally
+  const extracted = extractProps(props, layoutPropDefs, marginPropDefs)
+
+  return extracted
+}
+
+/**
+ * @deprecated Use extractLayoutProps instead
+ */
+export const extractSpacingProps = extractLayoutProps

package/src/lib/theme/$$.ts

@@ -0,0 +1 @@
+export * from './theme.js'

package/src/lib/theme/$.ts

@@ -1,2 +1,2 @@
 // Namespace export
-export * as Theme from './theme.js'
+export * as Theme from './$$.js'

package/src/lib/theme/theme.test.ts

@@ -1,4 +1,5 @@
 import { beforeEach, describe, expect, test, vi } from 'vitest'
+import { Test } from '../../../tests/unit/helpers/test.js'
 import { createThemeManager } from './theme.js'
 
 // Mock document and window
@@ -45,50 +46,29 @@ describe('Theme', () => {
     })
   })
 
-  describe('readCookie', () => {
-    test('reads theme from cookie string', () => {
-      const manager = createThemeManager()
-
-      expect(manager.readCookie('theme=dark')).toBe('dark')
-      expect(manager.readCookie('theme=light')).toBe('light')
-      expect(manager.readCookie('other=value; theme=dark; more=stuff')).toBe('dark')
-    })
-
-    test('returns null for invalid theme values', () => {
-      const manager = createThemeManager()
-
-      expect(manager.readCookie('theme=invalid')).toBe(null)
-      expect(manager.readCookie('theme=')).toBe(null)
-      expect(manager.readCookie('other=value')).toBe(null)
-      expect(manager.readCookie('')).toBe(null)
-    })
-
-    test('handles custom cookie name', () => {
-      const manager = createThemeManager({ cookieName: 'my-theme' })
-
-      expect(manager.readCookie('my-theme=dark')).toBe('dark')
-      expect(manager.readCookie('theme=dark')).toBe(null) // wrong name
-    })
+  // dprint-ignore
+  Test.suite<{ cookieString: string; cookieName?: string; expected: 'dark' | 'light' | null }>('readCookie', [
+    { name: 'reads dark theme from cookie',                cookieString: 'theme=dark',                         expected: 'dark' },
+    { name: 'reads light theme from cookie',               cookieString: 'theme=light',                        expected: 'light' },
+    { name: 'reads theme from middle of cookie string',    cookieString: 'other=value; theme=dark; more=stuff', expected: 'dark' },
+    { name: 'returns null for invalid theme value',        cookieString: 'theme=invalid',                      expected: null },
+    { name: 'returns null for empty theme value',          cookieString: 'theme=',                             expected: null },
+    { name: 'returns null when theme not in cookie',       cookieString: 'other=value',                        expected: null },
+    { name: 'returns null for empty cookie string',        cookieString: '',                                   expected: null },
+    { name: 'handles custom cookie name (found)',          cookieString: 'my-theme=dark',  cookieName: 'my-theme', expected: 'dark' },
+    { name: 'handles custom cookie name (not found)',      cookieString: 'theme=dark',     cookieName: 'my-theme', expected: null },
+  ], ({ cookieString, cookieName, expected }) => {
+    const manager = cookieName ? createThemeManager({ cookieName }) : createThemeManager()
+    expect(manager.readCookie(cookieString)).toBe(expected)
   })
 
-  describe('writeCookie', () => {
-    test('returns properly formatted cookie string', () => {
-      const manager = createThemeManager()
-
-      const cookie = manager.writeCookie('dark')
-      expect(cookie).toBe('theme=dark; Max-Age=31536000; Path=/; SameSite=Strict')
-    })
-
-    test('uses custom options in cookie string', () => {
-      const manager = createThemeManager({
-        cookieName: 'app-theme',
-        maxAge: 3600,
-        path: '/app',
-      })
-
-      const cookie = manager.writeCookie('light')
-      expect(cookie).toBe('app-theme=light; Max-Age=3600; Path=/app; SameSite=Strict')
-    })
+  // dprint-ignore
+  Test.suite<{ theme: 'dark' | 'light'; options?: { cookieName?: string; maxAge?: number; path?: string }; expected: string }>('writeCookie', [
+    { name: 'returns properly formatted cookie string',     theme: 'dark',  expected: 'theme=dark; Max-Age=31536000; Path=/; SameSite=Strict' },
+    { name: 'uses custom options in cookie string',        theme: 'light', options: { cookieName: 'app-theme', maxAge: 3600, path: '/app' }, expected: 'app-theme=light; Max-Age=3600; Path=/app; SameSite=Strict' },
+  ], ({ theme, options, expected }) => {
+    const manager = options ? createThemeManager(options) : createThemeManager()
+    expect(manager.writeCookie(theme)).toBe(expected)
   })
 
   describe('applyToDOM', () => {
@@ -129,39 +109,25 @@ describe('Theme', () => {
     })
   })
 
-  describe('getCurrentFromDOM', () => {
-    test('returns theme based on DOM classes', () => {
-      // @ts-expect-error - mocking document
-      global.document = mockDocument
-
-      const manager = createThemeManager()
-
-      mockDocument.documentElement.classList.contains.mockImplementation((className) => className === 'dark')
-      expect(manager.getCurrentFromDOM()).toBe('dark')
-
-      mockDocument.documentElement.classList.contains.mockImplementation((className) => className === 'light')
-      expect(manager.getCurrentFromDOM()).toBe('light')
-    })
-
-    test('returns null when no theme class present', () => {
-      // @ts-expect-error - mocking document
-      global.document = mockDocument
-
-      const manager = createThemeManager()
-
+  // dprint-ignore
+  Test.suite<{ mockClass?: string; classPrefix?: string; expected: 'dark' | 'light' | null }>('getCurrentFromDOM', [
+    { name: 'returns dark theme based on DOM class',       mockClass: 'dark',                          expected: 'dark' },
+    { name: 'returns light theme based on DOM class',      mockClass: 'light',                         expected: 'light' },
+    { name: 'returns null when no theme class present',                                                expected: null },
+    { name: 'handles custom class prefix',                 mockClass: 'theme-dark', classPrefix: 'theme-', expected: 'dark' },
+  ], ({ mockClass, classPrefix, expected }) => {
+    // @ts-expect-error - mocking document
+    global.document = mockDocument
+    
+    const manager = classPrefix ? createThemeManager({ classPrefix }) : createThemeManager()
+    
+    if (mockClass) {
+      mockDocument.documentElement.classList.contains.mockImplementation((className) => className === mockClass)
+    } else {
       mockDocument.documentElement.classList.contains.mockReturnValue(false)
-      expect(manager.getCurrentFromDOM()).toBe(null)
-    })
-
-    test('handles custom class prefix', () => {
-      // @ts-expect-error - mocking document
-      global.document = mockDocument
-
-      const manager = createThemeManager({ classPrefix: 'theme-' })
-
-      mockDocument.documentElement.classList.contains.mockImplementation((className) => className === 'theme-dark')
-      expect(manager.getCurrentFromDOM()).toBe('dark')
-    })
+    }
+    
+    expect(manager.getCurrentFromDOM()).toBe(expected)
   })
 
   // Toggle behavior is tested via integration tests with Playwright

package/src/lib/version/$$.ts

@@ -0,0 +1 @@
+export * from './version.js'