test(proprietary): cover the usage meter and the policy-enforcement overlay

MeterBar's three states are the reason it exists, so each gets a story
rather than leaving the bar's fill to carry the meaning alone. The
overlay covers each progress case and the accent tones a policy can
carry.

Author: reecebrowne

frontend/editor/src/proprietary/billing/MeterBar.stories.tsx

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { MeterBar } from "@app/billing/MeterBar";
+
+/**
+ * Usage against a cap. The three states are the point: FULL is healthy,
+ * WARNED is approaching the cap, DEGRADED is over it — and each maps to a
+ * status tone rather than relying on the bar's fill to carry the meaning.
+ */
+const meta: Meta<typeof MeterBar> = {
+  title: "Proprietary/Billing/MeterBar",
+  component: MeterBar,
+  parameters: { layout: "padded" },
+  args: {
+    barLabel: "Documents used this period",
+    figure: "1,240",
+    capSuffix: " of 5,000",
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof MeterBar>;
+
+/** Comfortably inside the cap. */
+export const Full: Story = {
+  args: { state: "FULL", pct: 25, statusLabel: "Active" },
+};
+
+/** Approaching the cap. */
+export const Warned: Story = {
+  args: {
+    state: "WARNED",
+    pct: 86,
+    figure: "4,300",
+    statusLabel: "Approaching limit",
+  },
+};
+
+/** Over the cap — processing is degraded until the period rolls or the cap
+ *  is raised. */
+export const Degraded: Story = {
+  args: {
+    state: "DEGRADED",
+    pct: 100,
+    figure: "5,000",
+    statusLabel: "Limit reached",
+    meta: "Resets on 1 September",
+  },
+};
+
+/** Nothing used yet. */
+export const Empty: Story = {
+  args: { state: "FULL", pct: 0, figure: "0" },
+};
+
+/** Figure only, no bar — for a plan with no cap to draw against. */
+export const NoBar: Story = {
+  args: {
+    state: "FULL",
+    pct: 0,
+    figure: "18,402",
+    capSuffix: " this period",
+    showBar: false,
+    statusLabel: "Unlimited",
+  },
+};
+
+/** With supporting meta beneath. */
+export const WithMeta: Story = {
+  args: {
+    state: "WARNED",
+    pct: 72,
+    figure: "3,600",
+    statusLabel: "Approaching limit",
+    meta: "Averaging 240 documents a day",
+  },
+};

frontend/editor/src/proprietary/components/shared/PolicyEnforcingOverlay.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { PolicyEnforcingOverlay } from "@app/components/shared/PolicyEnforcingOverlay";
+
+/**
+ * Shown over a document while a policy runs against it. It renders into its
+ * nearest positioned ancestor, so the stories supply one — the same thing the
+ * viewer and the thumbnail cards do.
+ *
+ * `accentVar` exists so the spinner matches the enforcing policy's own badge
+ * rather than a fixed blue; the stories cover the tones a policy can carry.
+ */
+const meta: Meta<typeof PolicyEnforcingOverlay> = {
+  title: "Proprietary/Shared/PolicyEnforcingOverlay",
+  component: PolicyEnforcingOverlay,
+  parameters: { layout: "padded" },
+  args: { enforcing: true },
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          position: "relative",
+          width: 420,
+          height: 280,
+          border: "1px solid var(--c-border)",
+          borderRadius: 8,
+          background: "var(--c-surface)",
+          overflow: "hidden",
+        }}
+      >
+        <div style={{ padding: "1rem", color: "var(--c-text-muted)" }}>
+          Document content sits beneath the overlay.
+        </div>
+        <Story />
+      </div>
+    ),
+  ],
+};
+export default meta;
+
+type Story = StoryObj<typeof PolicyEnforcingOverlay>;
+
+/** Running, with no step counts to report. */
+export const Indeterminate: Story = {};
+
+/** Part-way through a run that reports progress. */
+export const WithProgress: Story = { args: { progress: 45 } };
+
+/** Nearly done. */
+export const AlmostComplete: Story = { args: { progress: 92 } };
+
+/** Dismissable — the × only appears when a handler is given. */
+export const Dismissable: Story = {
+  args: { progress: 30, onDismiss: () => {} },
+};
+
+/** Tinted to the enforcing policy's accent. */
+export const SecurityAccent: Story = {
+  args: { progress: 60, accentVar: "var(--c-danger-solid)" },
+};
+
+/** A different policy tone. */
+export const WarningAccent: Story = {
+  args: { progress: 60, accentVar: "var(--c-warning-solid)" },
+};
+
+/** Not enforcing — the overlay renders nothing, leaving the document clear. */
+export const NotEnforcing: Story = { args: { enforcing: false } };