feat(ui): add decorative style primitives

src/lib/ui/stories/CornerBracketFrame.stories.svelte

@@ -0,0 +1,22 @@
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import CornerBracketFrame from "../components/CornerBracketFrame.svelte";
+  import GridFrame from "../components/GridFrame.svelte";
+
+  const { Story } = defineMeta({
+    title: "Style Primitives/CornerBracketFrame",
+    component: CornerBracketFrame,
+    tags: ["autodocs"],
+  });
+</script>
+
+<Story name="Neutral Medium" args={{ tone: "neutral", size: "md" }} />
+<Story name="Accent Tight" args={{ tone: "accent", density: "tight" }} />
+<Story name="Large Danger" args={{ tone: "danger", size: "lg" }} />
+<Story name="Grid Set" asChild>
+  <GridFrame density="compact">
+    <CornerBracketFrame tone="neutral" size="sm" />
+    <CornerBracketFrame tone="accent" size="sm" />
+    <CornerBracketFrame tone="danger" size="sm" density="tight" />
+  </GridFrame>
+</Story>

src/lib/ui/stories/DiagonalStripeField.stories.svelte

@@ -0,0 +1,23 @@
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import DiagonalStripeField from "../components/DiagonalStripeField.svelte";
+  import Panel from "../components/Panel.svelte";
+  import SignalTrace from "../components/SignalTrace.svelte";
+
+  const { Story } = defineMeta({
+    title: "Style Primitives/DiagonalStripeField",
+    component: DiagonalStripeField,
+    tags: ["autodocs"],
+  });
+</script>
+
+<Story name="Accent Regular" args={{ density: "regular", tone: "accent", size: "md" }} />
+<Story name="Tight Warning" args={{ density: "tight", tone: "warning", direction: "backward" }} />
+<Story name="Large Danger" args={{ density: "open", tone: "danger", size: "lg" }} />
+<Story name="Composed Divider" asChild>
+  <Panel title="Generic Surface">
+    <DiagonalStripeField density="tight" size="sm" />
+    <SignalTrace tone="accent" />
+    <DiagonalStripeField direction="backward" tone="neutral" />
+  </Panel>
+</Story>

src/lib/ui/stories/ScanlineField.stories.svelte

@@ -0,0 +1,20 @@
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import ScanlineField from "../components/ScanlineField.svelte";
+  import Panel from "../components/Panel.svelte";
+
+  const { Story } = defineMeta({
+    title: "Style Primitives/ScanlineField",
+    component: ScanlineField,
+    tags: ["autodocs"],
+  });
+</script>
+
+<Story name="Soft Neutral" args={{ intensity: "soft", tone: "neutral", size: "md" }} />
+<Story name="Medium Accent" args={{ intensity: "medium", tone: "accent", size: "md" }} />
+<Story name="Hard Warning" args={{ intensity: "hard", tone: "warning", size: "lg" }} />
+<Story name="Panel Backdrop" asChild>
+  <Panel title="Signal Surface">
+    <ScanlineField intensity="hard" tone="accent" />
+  </Panel>
+</Story>

src/lib/ui/stories/SignalTrace.stories.svelte

@@ -0,0 +1,21 @@
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import SignalTrace from "../components/SignalTrace.svelte";
+  import Panel from "../components/Panel.svelte";
+
+  const { Story } = defineMeta({
+    title: "Style Primitives/SignalTrace",
+    component: SignalTrace,
+    tags: ["autodocs"],
+  });
+</script>
+
+<Story name="Horizontal Accent" args={{ tone: "accent", orientation: "horizontal" }} />
+<Story name="Horizontal Warning Tight" args={{ tone: "warning", density: "tight" }} />
+<Story name="Vertical Neutral" args={{ tone: "neutral", orientation: "vertical" }} />
+<Story name="Panel Trace" asChild>
+  <Panel title="Generic Flow">
+    <SignalTrace tone="accent" />
+    <SignalTrace tone="warning" density="tight" />
+  </Panel>
+</Story>