DuskMoon workflow duskmoon implemented 5 demos

DmSplitter

DmSplitter documents the DmSplitter export from duskmoon.

Import @duskmoon-dev/components/dm-splitter

6 API sections

16 documented props

3 behavior scenarios

Key API

sizesdefaultSizespersistencegapcollapseBarOffsetTopmin

Usage

When to use

Use it in DuskMoon application screens that need a packaged, opinionated workflow component.
Reach for the lower-level standard component when the screen needs custom composition.

Implementation notes

Stylesheet Import @duskmoon-dev/components/styles.css once in the app or docs shell.

State Start with default props for static examples, then switch to controlled props when state must be shared.

Theme The preview inherits the active DuskMoon data-theme value from the docs layout.

Features

DuskMoon workflow wrapper

Wraps lower-level primitives into a higher-level DuskMoon-prefixed workflow API.

Application defaults

Examples show the defaults and composition points expected by internal DuskMoon app screens.

Primary API surface

DmSplitter is most often configured through `sizes`, `defaultSizes`, `persistence`, `gap`.

Covered behavior

Renders panels through the local Splitter primitive

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Preview

Navigation

Workspace

Basic usage

authored

Import the component stylesheet and DmSplitter from its package subpath, then render it with the core props.

Source

import "@duskmoon-dev/components/styles.css";
import { DmSplitter } from "@duskmoon-dev/components/dm-splitter";

export function Example() {
  return (<DmSplitter
  defaultSizes={[180, "1fr"]}
  gap={8}
  style={{ width: "100%" }}
>
  <DmSplitter.Panel>Navigation</DmSplitter.Panel>
  <DmSplitter.Panel>Workspace</DmSplitter.Panel>
</DmSplitter>);
}

Preview

Navigation

Workspace

Renders panels through the local Splitter primitive

test-backed

DmSplitter scenario from the component test coverage: renders panels through the local splitter primitive.

Source

import "@duskmoon-dev/components/styles.css";
import { DmSplitter } from "@duskmoon-dev/components/dm-splitter";

export function DmSplitterRendersPanelsThroughTheDemo() {
  return (<DmSplitter
  defaultSizes={[180, "1fr"]}
  gap={8}
  style={{ width: "100%" }}
>
  <DmSplitter.Panel>Navigation</DmSplitter.Panel>
  <DmSplitter.Panel>Workspace</DmSplitter.Panel>
</DmSplitter>);
}

Preview

Navigation

Workspace

Persists resized sizes to localStorage and restores them

test-backed

DmSplitter scenario from the component test coverage: persists resized sizes to localstorage and restores them.

Source

import "@duskmoon-dev/components/styles.css";
import { DmSplitter } from "@duskmoon-dev/components/dm-splitter";

export function DmSplitterPersistsResizedSizesToDemo() {
  return (<DmSplitter
  defaultSizes={[180, "1fr"]}
  gap={8}
  style={{ width: "100%" }}
>
  <DmSplitter.Panel>Navigation</DmSplitter.Panel>
  <DmSplitter.Panel>Workspace</DmSplitter.Panel>
</DmSplitter>);
}

Preview

Navigation

Workspace

Supports reset and panel collapse basics

test-backed

DmSplitter scenario from the component test coverage: supports reset and panel collapse basics.

Source

import "@duskmoon-dev/components/styles.css";
import { DmSplitter } from "@duskmoon-dev/components/dm-splitter";

export function DmSplitterSupportsResetAndPanelDemo() {
  return (<DmSplitter
  defaultSizes={[180, "1fr"]}
  gap={8}
  style={{ width: "100%" }}
>
  <DmSplitter.Panel>Navigation</DmSplitter.Panel>
  <DmSplitter.Panel>Workspace</DmSplitter.Panel>
</DmSplitter>);
}

Preview

Navigation

Workspace

Theme aware

authored

Docs previews inherit the DuskMoon data-theme value. Use the header switch to compare light and dark rendering.

Source

<div data-theme="sunshine">
  <DmSplitter
  defaultSizes={[180, "1fr"]}
  gap={8}
  style={{ width: "100%" }}
>
  <DmSplitter.Panel>Navigation</DmSplitter.Panel>
  <DmSplitter.Panel>Workspace</DmSplitter.Panel>
</DmSplitter>
</div>

<div data-theme="moonlight">
  <DmSplitter
  defaultSizes={[180, "1fr"]}
  gap={8}
  style={{ width: "100%" }}
>
  <DmSplitter.Panel>Navigation</DmSplitter.Panel>
  <DmSplitter.Panel>Workspace</DmSplitter.Panel>
</DmSplitter>
</div>

API

The API reference below lists every parsed exported type or interface for DmSplitter. Start with `sizes`, `defaultSizes`, `persistence`, `gap` for common usage.

Types: packages/components/src/components/dm-splitter/DmSplitter.types.ts Scenarios: packages/components/src/components/dm-splitter/DmSplitter.test.tsx

DmSplitterProps interface extends Omit< SplitterProps, "sizes" | "defaultSizes" | "onResize" >

Prop	Type	Required	Description
`children`	`ReactNode`	Yes	children configures DmSplitter.
`sizes`	`SplitterSize[]`	No	sizes configures DmSplitter.
`defaultSizes`	`SplitterSize[]`	No	defaultSizes configures DmSplitter.
`persistence`	`DmSplitterPersistence`	No	persistence configures DmSplitter.
`gap`	`number \| string`	No	gap configures DmSplitter.
`collapseBarOffsetTop`	`string`	No	collapseBarOffsetTop configures DmSplitter.
`min`	`SplitterSize[]`	No	min configures DmSplitter.
`max`	`SplitterSize[]`	No	max configures DmSplitter.
`resettable`	`boolean`	No	resettable configures DmSplitter.
`resetLabel`	`ReactNode`	No	resetLabel configures DmSplitter.
`onResize`	`(sizes: SplitterSize[]) => void`	No	onResize configures DmSplitter.

DmSplitterPersistenceAdapter interface

Prop	Type	Required	Description
`fetch`	`(`	Yes	fetch configures DmSplitter.
`key`	`string,`	Yes	key configures DmSplitter.
`update`	`(key: string, data: { sizes: SplitterSize[] }) => Promise<unknown>`	Yes	update configures DmSplitter.

DmSplitterPersistence interface

Prop	Type	Required	Description
`persistenceKey`	`string`	Yes	persistenceKey configures DmSplitter.
`persistenceType`	`"localStorage" \| DmSplitterPersistenceAdapter`	No	persistenceType configures DmSplitter.

DmSplitterPanelProps type

SplitterPanelProps

DmSplitterComponent type

ForwardRefExoticComponent< DmSplitterProps & RefAttributes<HTMLDivElement> > & { Panel: SplitterPanelComponent

DmSplitterElement type

ReactElement<DmSplitterProps>