feat: init

registry/ui/surface/index.ts

@@ -0,0 +1,5 @@
+import Root from './surface.svelte';
+import Cut from './surface-cut.svelte';
+
+export { Root, Cut, Root as Surface, Cut as SurfaceCut };
+export type { SurfaceProps, SurfaceVariant } from './surface.svelte';

registry/ui/surface/surface-cut.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { CladdColor } from '../button/button.svelte';
+
+	let {
+		ref = $bindable(null),
+		as = 'div',
+		outline = true,
+		hoverable = false,
+		color,
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> & {
+		as?: string;
+		outline?: boolean;
+		hoverable?: boolean;
+		color?: CladdColor;
+	} = $props();
+</script>
+
+<!-- A recessed well: sits below its parent surface instead of above it. -->
+<svelte:element
+	this={as}
+	bind:this={ref}
+	data-slot="surface-cut"
+	class={cn(
+		'cladd-cut text-cladd-fg',
+		!outline && 'shadow-none',
+		hoverable && 'cladd-hoverable',
+		color && `cladd-color-${color}`,
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</svelte:element>

registry/ui/surface/surface.svelte

@@ -0,0 +1,66 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { CladdColor } from '../button/button.svelte';
+
+	export type SurfaceVariant =
+		| 'solid'
+		| 'gradient'
+		| 'solid-fill'
+		| 'gradient-fill'
+		| 'transparent';
+
+	export type SurfaceProps = WithElementRef<HTMLAttributes<HTMLElement>> & {
+		as?: string;
+		variant?: SurfaceVariant;
+		outline?: boolean;
+		hoverable?: boolean;
+		clickable?: boolean;
+		level?: 1 | 2 | 3 | 4 | 5;
+		color?: CladdColor;
+	};
+</script>
+
+<script lang="ts">
+	let {
+		ref = $bindable(null),
+		as = 'div',
+		variant = 'solid',
+		outline = false,
+		hoverable = false,
+		clickable = false,
+		level,
+		color,
+		class: className,
+		children,
+		...restProps
+	}: SurfaceProps = $props();
+
+	const variantClass: Record<SurfaceVariant, string> = {
+		solid: 'cladd-surface',
+		gradient: 'cladd-surface cladd-gradient',
+		'solid-fill': 'cladd-surface cladd-fill',
+		'gradient-fill': 'cladd-surface cladd-gradient-fill',
+		transparent: 'cladd-ghost'
+	};
+</script>
+
+<!-- Nested surfaces step one level deeper automatically; `level` pins it. -->
+<svelte:element
+	this={as}
+	bind:this={ref}
+	data-slot="surface"
+	class={cn(
+		variantClass[variant],
+		outline && 'cladd-outline',
+		hoverable && 'cladd-hoverable',
+		clickable && 'cladd-clickable',
+		level && `cladd-level-${level}`,
+		color && `cladd-color-${color}`,
+		'text-cladd-fg',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</svelte:element>