# Stub Object

## Essence

Generic placeholder/debug component.

`Stub Object` represents abstract, replaceable, or not-yet-defined content when the real component or page content does not exist yet.

## Hook

Use when a Design System example needs a visible stand-in for undefined, abstract, or replaceable content.

## Internal Rules

- Represents placeholder content, not production UI.
- Uses `--color-debug` as its background.
- Uses white label text centered horizontally.
- Uses `space-4` padding on all sides.
- Width fills the parent.
- Height wraps content.
- Label should stay short and obvious.

## Use When

- A preview needs to show the component content area before the actual component exists.
- A page-template preview needs to show replaceable content.
- A template composition needs a visual debug object to make layout behavior readable.

## Do Not Use When

- A real component exists and can be rendered.
- The placeholder would appear in production content.
- The object needs behavior, states, or semantic meaning beyond "placeholder".
- A skeleton/loading component is needed.

## Edge Cases

- If the placeholder starts needing real behavior, create a dedicated component instead of expanding Stub Object.
- If the label needs more than a short phrase, the preview probably needs real content instead.
- Do not style other components with debug color unless they are also explicitly placeholder/debug objects.

## Accessibility Notes

- Stub Object is visual documentation content, not an interactive control.
- The label should be readable against `--color-debug`.
- Do not use Stub Object as a semantic replacement for the component it represents.

## Related Components And Patterns

- `Preview`: may use Stub Object for abstract component examples.
- `Page Template`: may use Stub Object to represent replaceable content.
- `Component Page Template`: may use Stub Object through Preview when documented content is abstract.
- Debug color token: marks placeholder or undefined component content.

## Code Paths

- `packages/design-system/src/components/StubObject.astro`
- `apps/portfolio-site/src/pages/design-system/index.astro`