layout — wyrd.component.split

Split

Resizable two-pane workbench splitter with controlled ratio support and keyboard-accessible divider semantics.

Install @wyrd-company/react or the Flutter package and use it directly — your DESIGN.md does the styling.

catalog/contracts/split.yml source of truth · verbatim

$schema: https://thewyrdingway.dev/schemas/component-contract.schema.ymlcontractVersion: 0.1.0identity:  name: Split  tag: wyrd-split  package: wyrd.component.split  title: Split  summary: Resizable two-pane workbench splitter with controlled ratio support and keyboard-accessible divider semantics.relationships:  related-to:    - quality-parity-and-gatesclassification:  category: layout  composition: multi-slot  interactive: truetarget-strategy:  react: required  flutter: requiredsurface:  properties:    - name: direction      type:        kind: enum        values:          - row          - column      required: false      default: row      reflects: true      serializable: true      summary: Split axis; row places panes side-by-side, column stacks panes vertically.    - name: ratio      type:        kind: integer        minimum: 10        maximum: 90      required: false      controlled: true      serializable: true      summary: Controlled first-pane share as a percentage.    - name: default-ratio      type:        kind: integer        minimum: 10        maximum: 90      required: false      default: 50      serializable: true      summary: Initial uncontrolled first-pane share as a percentage.    - name: min-ratio      type:        kind: integer        minimum: 5        maximum: 45      required: false      default: 20      serializable: true      summary: Minimum first-pane share enforced by implementations.    - name: max-ratio      type:        kind: integer        minimum: 55        maximum: 95      required: false      default: 80      serializable: true      summary: Maximum first-pane share enforced by implementations.  slots:    - name: start      required: true      cardinality: exactly-one      accepts:        - component      summary: First pane content sized by the ratio.    - name: end      required: true      cardinality: exactly-one      accepts:        - component      summary: Second pane content sized to the remaining share.  events:    - name: ratio-change      payload:        ratio:          kind: integer      bubbles: true      composed: true      cancelable: false      summary: Emitted from drag and keyboard resizing with the clamped first-pane ratio.  states:    - name: default      source: platform      summary: Enabled row splitter.    - name: column      source: property      summary: Column direction derived from direction.    - name: focus-visible      source: platform      summary: Keyboard-visible focus on the divider.    - name: dragging      source: platform      summary: Pointer drag is actively resizing panes.  parts:    - name: root      summary: Split flex container.      slots:        - start        - end    - name: start      summary: First pane.      slots:        - start    - name: divider      summary: Focusable ARIA separator used to resize panes.    - name: end      summary: Second pane.      slots:        - end  tokens:    divider:      color: color.outline      hover-color: color.primary      thickness: 1px      hit-area: spacing.mdmessages: []obligations:  accessibility:    role: separator    keyboard:      - Tab moves focus to the divider.      - ArrowLeft and ArrowRight adjust row splits by 1 following visual direction, so RTL reverses the physical-key effect.      - ArrowUp and ArrowDown adjust column splits by 1.      - Home moves the ratio to min-ratio.      - End moves the ratio to max-ratio.    semantics:      - Divider is focusable with tabindex=0.      - Divider exposes aria-orientation vertical for row direction and horizontal for column direction.      - Divider exposes aria-valuenow from the clamped ratio and aria-valuemin/aria-valuemax from min-ratio/max-ratio.      - The splitter is unnamed in v1; surrounding workbench chrome owns contextual labeling.  behavior:    model: input    interactions:      - Dragging the divider computes ratio from pointer position inside the split container.      - Keyboard resizing emits ratio-change using the same clamp behavior as dragging.      - Controlled ratio wins over default-ratio; uncontrolled implementations track the latest emitted ratio locally.      - Implementations clamp ratio into the resolved min-ratio/max-ratio range.    hostEffects:      - Dispatch ratio-change event.  conditions:    - rtl    - density-compact    - text-expansion  sdui:    status: blocked    serializableProperties: []    serializableSlots: []    eventBindings: []    notes: Split is workbench chrome, not a Layout DSL node. Static SDUI splits are served by Grid and Stack; revisit if authored UIs need resizable split panes.examples:  - name: row-default    state: default    properties:      default-ratio: 50    slots:      start: Navigation      end: Editor  - name: column    state: column    properties:      direction: column      default-ratio: 35    slots:      start: Editor      end: Console  - name: constrained    state: default    properties:      default-ratio: 60      min-ratio: 20      max-ratio: 80    slots:      start: Outline      end: Preview

Examples

Generated from the contract's examples block. Previews are the published @wyrd-company/react component, themed by the brand's role tokens — flip the site's light/dark toggle and they follow.

Code target React Flutter Applies to every example on component pages.

row-default state: default

Navigation

Editor

Usage

import { WyrdSplit } from "@wyrd-company/react";

<WyrdSplit defaultRatio={50} start="Navigation" end="Editor" />

// events: onRatioChange

import 'package:wyrd_flutter/wyrd_flutter.dart';

WyrdSplit(
  defaultRatio: 50,
  start: Text('Navigation'),
  end: Text('Editor'),
)

// events: onRatioChange

column state: column

Editor

Console

Usage

import { WyrdSplit } from "@wyrd-company/react";

<WyrdSplit direction="column" defaultRatio={35} start="Editor" end="Console" />

// events: onRatioChange

import 'package:wyrd_flutter/wyrd_flutter.dart';

WyrdSplit(
  direction: 'column',
  defaultRatio: 35,
  start: Text('Editor'),
  end: Text('Console'),
)

// events: onRatioChange

constrained state: default

Outline

Preview

Usage

import { WyrdSplit } from "@wyrd-company/react";

<WyrdSplit defaultRatio={60} minRatio={20} maxRatio={80} start="Outline" end="Preview" />

// events: onRatioChange

import 'package:wyrd_flutter/wyrd_flutter.dart';

WyrdSplit(
  defaultRatio: 60,
  minRatio: 20,
  maxRatio: 80,
  start: Text('Outline'),
  end: Text('Preview'),
)

// events: onRatioChange

Properties

Name	Type	Default	Summary
`direction`	`row \| column`	`row`	Split axis; row places panes side-by-side, column stacks panes vertically.
`ratio`	`integer`	`undefined`	Controlled first-pane share as a percentage.
`default-ratio`	`integer`	`50`	Initial uncontrolled first-pane share as a percentage.
`min-ratio`	`integer`	`20`	Minimum first-pane share enforced by implementations.
`max-ratio`	`integer`	`80`	Maximum first-pane share enforced by implementations.

Slots & events

Slot	Cardinality	Accepts	Summary
`start`	exactly-one	`component`	First pane content sized by the ratio.
`end`	exactly-one	`component`	Second pane content sized to the remaining share.

Event	Payload	Summary
`ratio-change`	`ratio`	Emitted from drag and keyboard resizing with the clamped first-pane ratio.

Tokens

The contract's token bindings. Open the shared contextual sidebar from any example; primary swatches reflect the color you pick there. Error swatches show the active preset's values; editing any knob switches to custom and resets error to TWW · Ink.

Binding	Token
`divider.color`	`color.outline`
`divider.hover-color`	`color.primary`
`divider.thickness`	`1px`
`divider.hit-area`	`spacing.md`

States

State	Source	Summary
`default`	platform	Enabled row splitter.
`column`	property	Column direction derived from direction.
`focus-visible`	platform	Keyboard-visible focus on the divider.
`dragging`	platform	Pointer drag is actively resizing panes.

SDUI

Status: blocked. Split is workbench chrome, not a Layout DSL node. Static SDUI splits are served by Grid and Stack; revisit if authored UIs need resizable split panes.

Serializable	Members
Properties	`—`
Slots	`—`
Events	`—`

  The Wyrding Way — a contract-first design system. © Wyrd Company 
   Pipeline demo
 Choose an example to inspect its pipeline context.
 Explore the shape of a brand's pipeline input: presets and knobs regenerate the illustrative excerpt below — not a compilable DESIGN.md (see the format reference). Primary swatches update live; accent, shape, density, and ground are excerpt-only; error swatches are preset-derived until any edit switches to custom (TWW · Ink errors). Component previews use the published brand package and the site's light/dark toggle.
 
  Start from
       
 * homages — shown for range, not affiliation.
 
  Tokens
 Primary updates live swatches. Accent, shape, density, and ground appear in the excerpt only. Error swatches follow the preset until you edit a knob — then they reset to TWW · Ink.
  color.primary   #26221A    color.accent   #9C7C14    rounded.md   2px    density   1.0×    ground     
 
   DESIGN.md excerpt illustrative

Examples

Properties

Slots & events

Tokens

States

Accessibility

SDUI