typewritingclass 0.2.1 → 0.2.3

package/src/utilities/layout.ts

@@ -1,1194 +0,0 @@
-import type { StyleRule } from '../types.ts'
-import type { DynamicValue } from '../dynamic.ts'
-import { createRule, createDynamicRule } from '../rule.ts'
-import { resolveSpacing } from '../theme/spacing.ts'
-import { isDynamic } from '../dynamic.ts'
-import { maxWidths } from '../theme/sizes.ts'
-
-const sizeMap: Record<string, string> = {
-  full: '100%',
-  auto: 'auto',
-  min: 'min-content',
-  max: 'max-content',
-  fit: 'fit-content',
-  '1/2': '50%',
-  '1/3': '33.333333%',
-  '2/3': '66.666667%',
-  '1/4': '25%',
-  '2/4': '50%',
-  '3/4': '75%',
-  '1/5': '20%',
-  '2/5': '40%',
-  '3/5': '60%',
-  '4/5': '80%',
-  '1/6': '16.666667%',
-  '2/6': '33.333333%',
-  '3/6': '50%',
-  '4/6': '66.666667%',
-  '5/6': '83.333333%',
-  '1/12': '8.333333%',
-  '2/12': '16.666667%',
-  '3/12': '25%',
-  '4/12': '33.333333%',
-  '5/12': '41.666667%',
-  '6/12': '50%',
-  '7/12': '58.333333%',
-  '8/12': '66.666667%',
-  '9/12': '75%',
-  '10/12': '83.333333%',
-  '11/12': '91.666667%',
-}
-
-const widthSizeMap: Record<string, string> = { ...sizeMap, screen: '100vw' }
-const heightSizeMap: Record<string, string> = { ...sizeMap, screen: '100vh' }
-const maxWidthMap: Record<string, string> = { ...sizeMap, ...maxWidths }
-
-function resolveSize(value: number | string | DynamicValue, nameMap?: Record<string, string>): string | DynamicValue {
-  if (isDynamic(value)) return value
-  if (typeof value === 'string') return (nameMap && nameMap[value]) ?? sizeMap[value] ?? value
-  return resolveSpacing(value)
-}
-
-function sizeRule(prop: string, value: number | string | DynamicValue, nameMap?: Record<string, string>): StyleRule {
-  const v = resolveSize(value, nameMap)
-  if (isDynamic(v)) {
-    return createDynamicRule(
-      { [prop]: `var(${v.__id})` },
-      { [v.__id]: String(v.__value) },
-    )
-  }
-  return createRule({ [prop]: v as string })
-}
-
-function sizeRuleMulti(props: string[], value: number | string | DynamicValue, nameMap?: Record<string, string>): StyleRule {
-  const v = resolveSize(value, nameMap)
-  if (isDynamic(v)) {
-    const decls: Record<string, string> = {}
-    for (const prop of props) decls[prop] = `var(${v.__id})`
-    return createDynamicRule(decls, { [v.__id]: String(v.__value) })
-  }
-  const decls: Record<string, string> = {}
-  for (const prop of props) decls[prop] = v as string
-  return createRule(decls)
-}
-
-/**
- * Sets the element to `display: flex`.
- *
- * Takes no arguments and produces a single flex display declaration.
- *
- * @returns A {@link StyleRule} that sets `display: flex`.
- *
- * @example
- * ```ts
- * import { cx, flex } from 'typewritingclass'
- *
- * cx(flex())
- * // CSS: display: flex;
- * ```
- */
-export function flex(): StyleRule {
-  return createRule({ display: 'flex' })
-}
-
-/**
- * Sets `flex-direction: column` on a flex container.
- *
- * Takes no arguments. Use with `flex()` to create a column-oriented flex container.
- *
- * @returns A {@link StyleRule} that sets `flex-direction: column`.
- *
- * @example
- * ```ts
- * import { cx, flex, flexCol } from 'typewritingclass'
- *
- * cx(flex(), flexCol())
- * // CSS: display: flex; flex-direction: column;
- * ```
- */
-export function flexCol(): StyleRule {
-  return createRule({ 'flex-direction': 'column' })
-}
-
-/**
- * Sets `flex-direction: row` on a flex container.
- *
- * Takes no arguments. Use with `flex()` to create a row-oriented flex container.
- *
- * @returns A {@link StyleRule} that sets `flex-direction: row`.
- *
- * @example
- * ```ts
- * import { cx, flex, flexRow } from 'typewritingclass'
- *
- * cx(flex(), flexRow())
- * // CSS: display: flex; flex-direction: row;
- * ```
- */
-export function flexRow(): StyleRule {
-  return createRule({ 'flex-direction': 'row' })
-}
-
-/**
- * Sets `flex-wrap: wrap` on a flex container to allow children to wrap.
- *
- * Takes no arguments.
- *
- * @returns A {@link StyleRule} that sets `flex-wrap: wrap`.
- *
- * @example
- * ```ts
- * import { cx, flexWrap } from 'typewritingclass'
- *
- * cx(flexWrap())
- * // CSS: flex-wrap: wrap;
- * ```
- */
-export function flexWrap(): StyleRule {
-  return createRule({ 'flex-wrap': 'wrap' })
-}
-
-/**
- * Sets the element to `display: inline-flex`.
- *
- * Takes no arguments and produces an inline-level flex container.
- *
- * @returns A {@link StyleRule} that sets `display: inline-flex`.
- *
- * @example
- * ```ts
- * import { cx, inlineFlex } from 'typewritingclass'
- *
- * cx(inlineFlex())
- * // CSS: display: inline-flex;
- * ```
- */
-export function inlineFlex(): StyleRule {
-  return createRule({ display: 'inline-flex' })
-}
-
-/**
- * Sets the element to `display: grid`, optionally defining equal-width columns.
- *
- * When called without arguments, sets only `display: grid`. When called with a
- * column count, also sets `grid-template-columns` with equal-width `1fr` columns.
- *
- * @param cols - Optional number of equal-width columns.
- * @returns A {@link StyleRule} that sets `display: grid` and optionally `grid-template-columns`.
- *
- * @example Grid without columns
- * ```ts
- * import { cx, grid } from 'typewritingclass'
- *
- * cx(grid())
- * // CSS: display: grid;
- * ```
- *
- * @example Grid with columns
- * ```ts
- * cx(grid(3))
- * // CSS: display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
- * ```
- */
-export function grid(cols?: number): StyleRule {
-  const decls: Record<string, string> = { display: 'grid' }
-  if (cols !== undefined) {
-    decls['grid-template-columns'] = `repeat(${cols}, minmax(0, 1fr))`
-  }
-  return createRule(decls)
-}
-
-/**
- * Sets the number of equal-width grid columns.
- *
- * @param n - The number of columns.
- * @returns A {@link StyleRule} that sets `grid-template-columns`.
- *
- * @example
- * ```ts
- * import { cx, gridCols } from 'typewritingclass'
- *
- * cx(gridCols(4))
- * // CSS: grid-template-columns: repeat(4, minmax(0, 1fr));
- * ```
- */
-export function gridCols(n: number): StyleRule {
-  return createRule({ 'grid-template-columns': `repeat(${n}, minmax(0, 1fr))` })
-}
-
-/**
- * Sets the number of equal-height grid rows.
- *
- * @param n - The number of rows.
- * @returns A {@link StyleRule} that sets `grid-template-rows`.
- *
- * @example
- * ```ts
- * import { cx, gridRows } from 'typewritingclass'
- *
- * cx(gridRows(3))
- * // CSS: grid-template-rows: repeat(3, minmax(0, 1fr));
- * ```
- */
-export function gridRows(n: number): StyleRule {
-  return createRule({ 'grid-template-rows': `repeat(${n}, minmax(0, 1fr))` })
-}
-
-/**
- * Sets the width of an element.
- *
- * Accepts a theme spacing scale number (maps to the spacing scale), a raw CSS string,
- * or a {@link DynamicValue} for runtime values.
- *
- * @param value - Spacing scale number (`4` -> `1rem`), raw string (`'100%'`), or `dynamic()` value.
- * @returns A {@link StyleRule} that sets `width`.
- *
- * @example Theme scale
- * ```ts
- * import { cx, w } from 'typewritingclass'
- *
- * cx(w(64))
- * // CSS: width: 16rem;
- * ```
- *
- * @example Raw value
- * ```ts
- * cx(w('100%'))
- * // CSS: width: 100%;
- * ```
- *
- * @example Dynamic value
- * ```ts
- * import { dcx, w, dynamic } from 'typewritingclass'
- *
- * const { className, style } = dcx(w(dynamic(width)))
- * // CSS: width: var(--twc-d0);
- * // style: { '--twc-d0': width }
- * ```
- */
-export function w(value: number | string | DynamicValue): StyleRule {
-  return sizeRule('width', value, widthSizeMap)
-}
-
-/**
- * Sets the height of an element.
- *
- * Accepts a theme spacing scale number (maps to the spacing scale), a raw CSS string,
- * or a {@link DynamicValue} for runtime values.
- *
- * @param value - Spacing scale number (`4` -> `1rem`), raw string (`'100vh'`), or `dynamic()` value.
- * @returns A {@link StyleRule} that sets `height`.
- *
- * @example Theme scale
- * ```ts
- * import { cx, h } from 'typewritingclass'
- *
- * cx(h(12))
- * // CSS: height: 3rem;
- * ```
- *
- * @example Raw value
- * ```ts
- * cx(h('100vh'))
- * // CSS: height: 100vh;
- * ```
- *
- * @example Dynamic value
- * ```ts
- * import { dcx, h, dynamic } from 'typewritingclass'
- *
- * const { className, style } = dcx(h(dynamic(height)))
- * // CSS: height: var(--twc-d0);
- * // style: { '--twc-d0': height }
- * ```
- */
-export function h(value: number | string | DynamicValue): StyleRule {
-  return sizeRule('height', value, heightSizeMap)
-}
-
-/**
- * Sets both width and height of an element to the same value.
- *
- * Accepts a theme spacing scale number (maps to the spacing scale), a raw CSS string,
- * or a {@link DynamicValue} for runtime values.
- *
- * @param value - Spacing scale number (`4` -> `1rem`), raw string (`'48px'`), or `dynamic()` value.
- * @returns A {@link StyleRule} that sets both `width` and `height`.
- *
- * @example Theme scale
- * ```ts
- * import { cx, size } from 'typewritingclass'
- *
- * cx(size(10))
- * // CSS: width: 2.5rem; height: 2.5rem;
- * ```
- *
- * @example Raw value
- * ```ts
- * cx(size('48px'))
- * // CSS: width: 48px; height: 48px;
- * ```
- *
- * @example Dynamic value
- * ```ts
- * import { dcx, size, dynamic } from 'typewritingclass'
- *
- * const { className, style } = dcx(size(dynamic(dim)))
- * // CSS: width: var(--twc-d0); height: var(--twc-d0);
- * // style: { '--twc-d0': dim }
- * ```
- */
-export function size(value: number | string | DynamicValue): StyleRule {
-  return sizeRuleMulti(['width', 'height'], value)
-}
-
-/**
- * Sets the minimum width of an element.
- *
- * Accepts a theme spacing scale number (maps to the spacing scale), a raw CSS string,
- * or a {@link DynamicValue} for runtime values.
- *
- * @param value - Spacing scale number (`4` -> `1rem`), raw string (`'200px'`), or `dynamic()` value.
- * @returns A {@link StyleRule} that sets `min-width`.
- *
- * @example Theme scale
- * ```ts
- * import { cx, minW } from 'typewritingclass'
- *
- * cx(minW(48))
- * // CSS: min-width: 12rem;
- * ```
- *
- * @example Raw value
- * ```ts
- * cx(minW('0'))
- * // CSS: min-width: 0;
- * ```
- *
- * @example Dynamic value
- * ```ts
- * import { dcx, minW, dynamic } from 'typewritingclass'
- *
- * const { className, style } = dcx(minW(dynamic(minWidth)))
- * // CSS: min-width: var(--twc-d0);
- * // style: { '--twc-d0': minWidth }
- * ```
- */
-export function minW(value: number | string | DynamicValue): StyleRule {
-  return sizeRule('min-width', value)
-}
-
-/**
- * Sets the minimum height of an element.
- *
- * Accepts a theme spacing scale number (maps to the spacing scale), a raw CSS string,
- * or a {@link DynamicValue} for runtime values.
- *
- * @param value - Spacing scale number (`4` -> `1rem`), raw string (`'100vh'`), or `dynamic()` value.
- * @returns A {@link StyleRule} that sets `min-height`.
- *
- * @example Theme scale
- * ```ts
- * import { cx, minH } from 'typewritingclass'
- *
- * cx(minH(96))
- * // CSS: min-height: 24rem;
- * ```
- *
- * @example Raw value
- * ```ts
- * cx(minH('100vh'))
- * // CSS: min-height: 100vh;
- * ```
- *
- * @example Dynamic value
- * ```ts
- * import { dcx, minH, dynamic } from 'typewritingclass'
- *
- * const { className, style } = dcx(minH(dynamic(minHeight)))
- * // CSS: min-height: var(--twc-d0);
- * // style: { '--twc-d0': minHeight }
- * ```
- */
-export function minH(value: number | string | DynamicValue): StyleRule {
-  return sizeRule('min-height', value, heightSizeMap)
-}
-
-/**
- * Sets the maximum width of an element.
- *
- * Accepts a theme spacing scale number (maps to the spacing scale), a raw CSS string,
- * or a {@link DynamicValue} for runtime values.
- *
- * @param value - Spacing scale number (`4` -> `1rem`), raw string (`'768px'`), or `dynamic()` value.
- * @returns A {@link StyleRule} that sets `max-width`.
- *
- * @example Theme scale
- * ```ts
- * import { cx, maxW } from 'typewritingclass'
- *
- * cx(maxW(80))
- * // CSS: max-width: 20rem;
- * ```
- *
- * @example Raw value
- * ```ts
- * cx(maxW('768px'))
- * // CSS: max-width: 768px;
- * ```
- *
- * @example Dynamic value
- * ```ts
- * import { dcx, maxW, dynamic } from 'typewritingclass'
- *
- * const { className, style } = dcx(maxW(dynamic(maxWidth)))
- * // CSS: max-width: var(--twc-d0);
- * // style: { '--twc-d0': maxWidth }
- * ```
- */
-export function maxW(value: number | string | DynamicValue): StyleRule {
-  return sizeRule('max-width', value, maxWidthMap)
-}
-
-/**
- * Sets the maximum height of an element.
- *
- * Accepts a theme spacing scale number (maps to the spacing scale), a raw CSS string,
- * or a {@link DynamicValue} for runtime values.
- *
- * @param value - Spacing scale number (`4` -> `1rem`), raw string (`'100vh'`), or `dynamic()` value.
- * @returns A {@link StyleRule} that sets `max-height`.
- *
- * @example Theme scale
- * ```ts
- * import { cx, maxH } from 'typewritingclass'
- *
- * cx(maxH(40))
- * // CSS: max-height: 10rem;
- * ```
- *
- * @example Raw value
- * ```ts
- * cx(maxH('100vh'))
- * // CSS: max-height: 100vh;
- * ```
- *
- * @example Dynamic value
- * ```ts
- * import { dcx, maxH, dynamic } from 'typewritingclass'
- *
- * const { className, style } = dcx(maxH(dynamic(maxHeight)))
- * // CSS: max-height: var(--twc-d0);
- * // style: { '--twc-d0': maxHeight }
- * ```
- */
-export function maxH(value: number | string | DynamicValue): StyleRule {
-  return sizeRule('max-height', value, heightSizeMap)
-}
-
-/**
- * Sets the CSS `display` property of an element.
- *
- * Accepts any valid CSS display value as a string.
- *
- * @param value - A CSS display value (`'block'`, `'none'`, `'inline-block'`, etc.).
- * @returns A {@link StyleRule} that sets `display`.
- *
- * @example Block display
- * ```ts
- * import { cx, display } from 'typewritingclass'
- *
- * cx(display('block'))
- * // CSS: display: block;
- * ```
- *
- * @example Hide element
- * ```ts
- * cx(display('none'))
- * // CSS: display: none;
- * ```
- */
-export function display(value: string): StyleRule {
-  return createRule({ display: value })
-}
-
-/**
- * Sets the `align-items` property on a flex or grid container.
- *
- * Accepts any valid CSS align-items value as a string.
- *
- * @param value - A CSS align-items value (`'center'`, `'flex-start'`, `'stretch'`, etc.).
- * @returns A {@link StyleRule} that sets `align-items`.
- *
- * @example Center alignment
- * ```ts
- * import { cx, items } from 'typewritingclass'
- *
- * cx(items('center'))
- * // CSS: align-items: center;
- * ```
- *
- * @example Start alignment
- * ```ts
- * cx(items('flex-start'))
- * // CSS: align-items: flex-start;
- * ```
- */
-export function items(value: string): StyleRule {
-  return createRule({ 'align-items': value })
-}
-
-/**
- * Sets the `justify-content` property on a flex or grid container.
- *
- * Accepts any valid CSS justify-content value as a string.
- *
- * @param value - A CSS justify-content value (`'center'`, `'space-between'`, `'flex-end'`, etc.).
- * @returns A {@link StyleRule} that sets `justify-content`.
- *
- * @example Center justification
- * ```ts
- * import { cx, justify } from 'typewritingclass'
- *
- * cx(justify('center'))
- * // CSS: justify-content: center;
- * ```
- *
- * @example Space between
- * ```ts
- * cx(justify('space-between'))
- * // CSS: justify-content: space-between;
- * ```
- */
-export function justify(value: string): StyleRule {
-  return createRule({ 'justify-content': value })
-}
-
-/**
- * Sets the `align-self` property on a flex or grid child.
- *
- * Accepts any valid CSS align-self value as a string.
- *
- * @param value - A CSS align-self value (`'center'`, `'flex-start'`, `'stretch'`, etc.).
- * @returns A {@link StyleRule} that sets `align-self`.
- *
- * @example Center self-alignment
- * ```ts
- * import { cx, self } from 'typewritingclass'
- *
- * cx(self('center'))
- * // CSS: align-self: center;
- * ```
- *
- * @example End self-alignment
- * ```ts
- * cx(self('flex-end'))
- * // CSS: align-self: flex-end;
- * ```
- */
-export function self(value: string): StyleRule {
-  return createRule({ 'align-self': value })
-}
-
-/**
- * Sets the `overflow` behavior on both axes of an element.
- *
- * Accepts any valid CSS overflow value as a string.
- *
- * @param value - A CSS overflow value (`'hidden'`, `'auto'`, `'scroll'`, `'visible'`).
- * @returns A {@link StyleRule} that sets `overflow`.
- *
- * @example Hidden overflow
- * ```ts
- * import { cx, overflow } from 'typewritingclass'
- *
- * cx(overflow('hidden'))
- * // CSS: overflow: hidden;
- * ```
- *
- * @example Auto overflow
- * ```ts
- * cx(overflow('auto'))
- * // CSS: overflow: auto;
- * ```
- */
-export function overflow(value: string): StyleRule {
-  return createRule({ overflow: value })
-}
-
-/**
- * Sets the horizontal overflow behavior of an element.
- *
- * Accepts any valid CSS overflow-x value as a string.
- *
- * @param value - A CSS overflow-x value (`'hidden'`, `'auto'`, `'scroll'`, `'visible'`).
- * @returns A {@link StyleRule} that sets `overflow-x`.
- *
- * @example Auto horizontal scroll
- * ```ts
- * import { cx, overflowX } from 'typewritingclass'
- *
- * cx(overflowX('auto'))
- * // CSS: overflow-x: auto;
- * ```
- *
- * @example Hidden horizontal overflow
- * ```ts
- * cx(overflowX('hidden'))
- * // CSS: overflow-x: hidden;
- * ```
- */
-export function overflowX(value: string): StyleRule {
-  return createRule({ 'overflow-x': value })
-}
-
-/**
- * Sets the vertical overflow behavior of an element.
- *
- * Accepts any valid CSS overflow-y value as a string.
- *
- * @param value - A CSS overflow-y value (`'hidden'`, `'auto'`, `'scroll'`, `'visible'`).
- * @returns A {@link StyleRule} that sets `overflow-y`.
- *
- * @example Scrollable vertical overflow
- * ```ts
- * import { cx, overflowY } from 'typewritingclass'
- *
- * cx(overflowY('scroll'))
- * // CSS: overflow-y: scroll;
- * ```
- *
- * @example Hidden vertical overflow
- * ```ts
- * cx(overflowY('hidden'))
- * // CSS: overflow-y: hidden;
- * ```
- */
-export function overflowY(value: string): StyleRule {
-  return createRule({ 'overflow-y': value })
-}
-
-/**
- * Sets the element to `position: relative`.
- *
- * Takes no arguments. Creates a positioning context for absolutely positioned children.
- *
- * @returns A {@link StyleRule} that sets `position: relative`.
- *
- * @example
- * ```ts
- * import { cx, relative } from 'typewritingclass'
- *
- * cx(relative())
- * // CSS: position: relative;
- * ```
- */
-export function relative(): StyleRule {
-  return createRule({ position: 'relative' })
-}
-
-/**
- * Sets the element to `position: absolute`.
- *
- * Takes no arguments. Removes the element from normal flow and positions it
- * relative to its nearest positioned ancestor.
- *
- * @returns A {@link StyleRule} that sets `position: absolute`.
- *
- * @example
- * ```ts
- * import { cx, absolute } from 'typewritingclass'
- *
- * cx(absolute())
- * // CSS: position: absolute;
- * ```
- */
-export function absolute(): StyleRule {
-  return createRule({ position: 'absolute' })
-}
-
-/**
- * Sets the element to `position: fixed`.
- *
- * Takes no arguments. Removes the element from normal flow and positions it
- * relative to the viewport.
- *
- * @returns A {@link StyleRule} that sets `position: fixed`.
- *
- * @example
- * ```ts
- * import { cx, fixed } from 'typewritingclass'
- *
- * cx(fixed())
- * // CSS: position: fixed;
- * ```
- */
-export function fixed(): StyleRule {
-  return createRule({ position: 'fixed' })
-}
-
-/**
- * Sets the element to `position: sticky`.
- *
- * Takes no arguments. The element is treated as relative until it crosses a
- * specified threshold, then treated as fixed.
- *
- * @returns A {@link StyleRule} that sets `position: sticky`.
- *
- * @example
- * ```ts
- * import { cx, sticky } from 'typewritingclass'
- *
- * cx(sticky())
- * // CSS: position: sticky;
- * ```
- */
-export function sticky(): StyleRule {
-  return createRule({ position: 'sticky' })
-}
-
-/**
- * Sets the `top` position offset of a positioned element.
- *
- * Accepts a theme spacing scale number (maps to the spacing scale), a raw CSS string,
- * or a {@link DynamicValue} for runtime values.
- *
- * @param value - Spacing scale number (`4` -> `1rem`), raw string (`'0'`), or `dynamic()` value.
- * @returns A {@link StyleRule} that sets `top`.
- *
- * @example Theme scale
- * ```ts
- * import { cx, top } from 'typewritingclass'
- *
- * cx(top(0))
- * // CSS: top: 0px;
- * ```
- *
- * @example Raw value
- * ```ts
- * cx(top('50%'))
- * // CSS: top: 50%;
- * ```
- *
- * @example Dynamic value
- * ```ts
- * import { dcx, top, dynamic } from 'typewritingclass'
- *
- * const { className, style } = dcx(top(dynamic(offset)))
- * // CSS: top: var(--twc-d0);
- * // style: { '--twc-d0': offset }
- * ```
- */
-export function top(value: number | string | DynamicValue): StyleRule {
-  return sizeRule('top', value)
-}
-
-/**
- * Sets the `right` position offset of a positioned element.
- *
- * Accepts a theme spacing scale number (maps to the spacing scale), a raw CSS string,
- * or a {@link DynamicValue} for runtime values.
- *
- * @param value - Spacing scale number (`4` -> `1rem`), raw string (`'0'`), or `dynamic()` value.
- * @returns A {@link StyleRule} that sets `right`.
- *
- * @example Theme scale
- * ```ts
- * import { cx, right } from 'typewritingclass'
- *
- * cx(right(4))
- * // CSS: right: 1rem;
- * ```
- *
- * @example Raw value
- * ```ts
- * cx(right('0'))
- * // CSS: right: 0;
- * ```
- *
- * @example Dynamic value
- * ```ts
- * import { dcx, right, dynamic } from 'typewritingclass'
- *
- * const { className, style } = dcx(right(dynamic(offset)))
- * // CSS: right: var(--twc-d0);
- * // style: { '--twc-d0': offset }
- * ```
- */
-export function right(value: number | string | DynamicValue): StyleRule {
-  return sizeRule('right', value)
-}
-
-/**
- * Sets the `bottom` position offset of a positioned element.
- *
- * Accepts a theme spacing scale number (maps to the spacing scale), a raw CSS string,
- * or a {@link DynamicValue} for runtime values.
- *
- * @param value - Spacing scale number (`4` -> `1rem`), raw string (`'0'`), or `dynamic()` value.
- * @returns A {@link StyleRule} that sets `bottom`.
- *
- * @example Theme scale
- * ```ts
- * import { cx, bottom } from 'typewritingclass'
- *
- * cx(bottom(0))
- * // CSS: bottom: 0px;
- * ```
- *
- * @example Raw value
- * ```ts
- * cx(bottom('2rem'))
- * // CSS: bottom: 2rem;
- * ```
- *
- * @example Dynamic value
- * ```ts
- * import { dcx, bottom, dynamic } from 'typewritingclass'
- *
- * const { className, style } = dcx(bottom(dynamic(offset)))
- * // CSS: bottom: var(--twc-d0);
- * // style: { '--twc-d0': offset }
- * ```
- */
-export function bottom(value: number | string | DynamicValue): StyleRule {
-  return sizeRule('bottom', value)
-}
-
-/**
- * Sets the `left` position offset of a positioned element.
- *
- * Accepts a theme spacing scale number (maps to the spacing scale), a raw CSS string,
- * or a {@link DynamicValue} for runtime values.
- *
- * @param value - Spacing scale number (`4` -> `1rem`), raw string (`'0'`), or `dynamic()` value.
- * @returns A {@link StyleRule} that sets `left`.
- *
- * @example Theme scale
- * ```ts
- * import { cx, left } from 'typewritingclass'
- *
- * cx(left(4))
- * // CSS: left: 1rem;
- * ```
- *
- * @example Raw value
- * ```ts
- * cx(left('50%'))
- * // CSS: left: 50%;
- * ```
- *
- * @example Dynamic value
- * ```ts
- * import { dcx, left, dynamic } from 'typewritingclass'
- *
- * const { className, style } = dcx(left(dynamic(offset)))
- * // CSS: left: var(--twc-d0);
- * // style: { '--twc-d0': offset }
- * ```
- */
-export function left(value: number | string | DynamicValue): StyleRule {
-  return sizeRule('left', value)
-}
-
-/**
- * Sets the `inset` shorthand property (top, right, bottom, left) on a positioned element.
- *
- * Accepts a theme spacing scale number (maps to the spacing scale), a raw CSS string,
- * or a {@link DynamicValue} for runtime values.
- *
- * @param value - Spacing scale number (`0` -> `0px`), raw string (`'0'`), or `dynamic()` value.
- * @returns A {@link StyleRule} that sets `inset`.
- *
- * @example Theme scale
- * ```ts
- * import { cx, inset } from 'typewritingclass'
- *
- * cx(inset(0))
- * // CSS: inset: 0px;
- * ```
- *
- * @example Raw value
- * ```ts
- * cx(inset('0'))
- * // CSS: inset: 0;
- * ```
- *
- * @example Dynamic value
- * ```ts
- * import { dcx, inset, dynamic } from 'typewritingclass'
- *
- * const { className, style } = dcx(inset(dynamic(offset)))
- * // CSS: inset: var(--twc-d0);
- * // style: { '--twc-d0': offset }
- * ```
- */
-export function inset(value: number | string | DynamicValue): StyleRule {
-  return sizeRule('inset', value)
-}
-
-/**
- * Sets the `z-index` stacking order of an element.
- *
- * Accepts a numeric z-index value, a raw string, or a {@link DynamicValue}
- * for runtime values. Numeric values are converted to strings.
- *
- * @param value - A z-index number (`10`, `50`), raw string (`'auto'`), or `dynamic()` value.
- * @returns A {@link StyleRule} that sets `z-index`.
- *
- * @example Numeric z-index
- * ```ts
- * import { cx, z } from 'typewritingclass'
- *
- * cx(z(10))
- * // CSS: z-index: 10;
- * ```
- *
- * @example String z-index
- * ```ts
- * cx(z('auto'))
- * // CSS: z-index: auto;
- * ```
- *
- * @example Dynamic value
- * ```ts
- * import { dcx, z, dynamic } from 'typewritingclass'
- *
- * const { className, style } = dcx(z(dynamic(zIndex)))
- * // CSS: z-index: var(--twc-d0);
- * // style: { '--twc-d0': zIndex }
- * ```
- */
-export function z(value: number | string | DynamicValue): StyleRule {
-  if (isDynamic(value)) {
-    return createDynamicRule(
-      { 'z-index': `var(${value.__id})` },
-      { [value.__id]: String(value.__value) },
-    )
-  }
-  return createRule({ 'z-index': String(value) })
-}
-
-// --- Additional layout utilities ---
-
-const aspectRatioMap: Record<string, string> = {
-  auto: 'auto',
-  square: '1 / 1',
-  video: '16 / 9',
-}
-
-export function aspectRatio(value: string): StyleRule {
-  return createRule({ 'aspect-ratio': aspectRatioMap[value] ?? value })
-}
-
-export function columns(value: string | number): StyleRule {
-  return createRule({ columns: String(value) })
-}
-
-export function breakAfter(value: string): StyleRule {
-  return createRule({ 'break-after': value })
-}
-
-export function breakBefore(value: string): StyleRule {
-  return createRule({ 'break-before': value })
-}
-
-export function breakInside(value: string): StyleRule {
-  return createRule({ 'break-inside': value })
-}
-
-export function boxDecorationBreak(value: string): StyleRule {
-  return createRule({ 'box-decoration-break': value })
-}
-
-export function boxSizing(value: string): StyleRule {
-  return createRule({ 'box-sizing': value })
-}
-
-export function float_(value: string): StyleRule {
-  return createRule({ float: value })
-}
-
-export function clear_(value: string): StyleRule {
-  return createRule({ clear: value })
-}
-
-export function isolate(): StyleRule {
-  return createRule({ isolation: 'isolate' })
-}
-
-export function isolationAuto(): StyleRule {
-  return createRule({ isolation: 'auto' })
-}
-
-export function objectFit(value: string): StyleRule {
-  return createRule({ 'object-fit': value })
-}
-
-export function objectPosition(value: string): StyleRule {
-  return createRule({ 'object-position': value })
-}
-
-export function overscrollBehavior(value: string): StyleRule {
-  return createRule({ 'overscroll-behavior': value })
-}
-
-export function overscrollX(value: string): StyleRule {
-  return createRule({ 'overscroll-behavior-x': value })
-}
-
-export function overscrollY(value: string): StyleRule {
-  return createRule({ 'overscroll-behavior-y': value })
-}
-
-export function static_(): StyleRule {
-  return createRule({ position: 'static' })
-}
-
-export function insetX(value: number | string | DynamicValue): StyleRule {
-  return sizeRuleMulti(['left', 'right'], value)
-}
-
-export function insetY(value: number | string | DynamicValue): StyleRule {
-  return sizeRuleMulti(['top', 'bottom'], value)
-}
-
-export function start(value: number | string | DynamicValue): StyleRule {
-  return sizeRule('inset-inline-start', value)
-}
-
-export function end(value: number | string | DynamicValue): StyleRule {
-  return sizeRule('inset-inline-end', value)
-}
-
-export function visible(): StyleRule {
-  return createRule({ visibility: 'visible' })
-}
-
-export function invisible(): StyleRule {
-  return createRule({ visibility: 'hidden' })
-}
-
-export function collapse_(): StyleRule {
-  return createRule({ visibility: 'collapse' })
-}
-
-export function flexBasis(value: number | string | DynamicValue): StyleRule {
-  return sizeRule('flex-basis', value)
-}
-
-export function flexRowReverse(): StyleRule {
-  return createRule({ 'flex-direction': 'row-reverse' })
-}
-
-export function flexColReverse(): StyleRule {
-  return createRule({ 'flex-direction': 'column-reverse' })
-}
-
-export function flexWrapReverse(): StyleRule {
-  return createRule({ 'flex-wrap': 'wrap-reverse' })
-}
-
-export function flexNowrap(): StyleRule {
-  return createRule({ 'flex-wrap': 'nowrap' })
-}
-
-export function flex1(): StyleRule {
-  return createRule({ flex: '1 1 0%' })
-}
-
-export function flexAuto(): StyleRule {
-  return createRule({ flex: '1 1 auto' })
-}
-
-export function flexInitial(): StyleRule {
-  return createRule({ flex: '0 1 auto' })
-}
-
-export function flexNone(): StyleRule {
-  return createRule({ flex: 'none' })
-}
-
-export function grow(value: string | number = 1): StyleRule {
-  return createRule({ 'flex-grow': String(value) })
-}
-
-export function shrink(value: string | number = 1): StyleRule {
-  return createRule({ 'flex-shrink': String(value) })
-}
-
-export function order(value: number | string | DynamicValue): StyleRule {
-  if (isDynamic(value)) {
-    return createDynamicRule(
-      { order: `var(${value.__id})` },
-      { [value.__id]: String(value.__value) },
-    )
-  }
-  return createRule({ order: String(value) })
-}
-
-export function colSpan(value: number | string): StyleRule {
-  if (value === 'full') return createRule({ 'grid-column': '1 / -1' })
-  return createRule({ 'grid-column': `span ${value} / span ${value}` })
-}
-
-export function colStart(value: number | string): StyleRule {
-  return createRule({ 'grid-column-start': String(value) })
-}
-
-export function colEnd(value: number | string): StyleRule {
-  return createRule({ 'grid-column-end': String(value) })
-}
-
-export function rowSpan(value: number | string): StyleRule {
-  if (value === 'full') return createRule({ 'grid-row': '1 / -1' })
-  return createRule({ 'grid-row': `span ${value} / span ${value}` })
-}
-
-export function rowStart(value: number | string): StyleRule {
-  return createRule({ 'grid-row-start': String(value) })
-}
-
-export function rowEnd(value: number | string): StyleRule {
-  return createRule({ 'grid-row-end': String(value) })
-}
-
-export function gridFlow(value: string): StyleRule {
-  return createRule({ 'grid-auto-flow': value })
-}
-
-export function autoCols(value: string): StyleRule {
-  return createRule({ 'grid-auto-columns': value })
-}
-
-export function autoRows(value: string): StyleRule {
-  return createRule({ 'grid-auto-rows': value })
-}
-
-export function justifyItems(value: string): StyleRule {
-  return createRule({ 'justify-items': value })
-}
-
-export function justifySelf(value: string): StyleRule {
-  return createRule({ 'justify-self': value })
-}
-
-export function alignContent(value: string): StyleRule {
-  return createRule({ 'align-content': value })
-}
-
-export function placeContent(value: string): StyleRule {
-  return createRule({ 'place-content': value })
-}
-
-export function placeItems(value: string): StyleRule {
-  return createRule({ 'place-items': value })
-}
-
-export function placeSelf(value: string): StyleRule {
-  return createRule({ 'place-self': value })
-}
-
-export function container(): StyleRule {
-  return createRule({ width: '100%' })
-}