chore(storybook): enforce runnable "Show code" SFC via shared helper

[HerbertJulio]

Problem

The Docs "Show code" panel emitted snippets a consumer could not copy-paste and run. Storybook's dynamic Vue source has two defects:

1. Lowercases / kebab-cases the tag — a <Skeleton> in the canvas is emitted as <skeleton>, which does not resolve to the imported component.
2. Already wraps in <template> — a naive transform wraps again, producing a nested <template><template>…</template></template>.

Observed (real "Show code" before this PR):

<script setup>
import Skeleton from '@aziontech/webkit/skeleton'
</script>

<template>
  <template>
    <skeleton animated height="100px" kind="shape" width="240px" />
  </template>
</template>

The snippet must express 100% of what the canvas renders and run as-is.

What this PR does

A single sanctioned path for "Show code", impossible to bypass without the hook blocking it:

• Shared helper — apps/storybook/src/stories/_shared/story-source.js
  • runnableDocs({ component, imports, components }) → spread into parameters.docs; sets description.component, source.transform, canvas.sourceState: 'shown'.
  • sfcTransform → unwraps the stray <template> and restores PascalCase tags.
  • toSfc(imports, body) → full SFC for composite stories' source.code.
• Rule — .claude/rules/storybook-source.md: the well-defined contract (single runnable SFC, PascalCase tags, no hand-rolled transform, no nested <template>, sourceState: 'shown').
• Enforcement hook — .claude/hooks/validate-story-source.mjs (registered PreToolUse) blocks hand-rolled transforms, lowercase/kebab tags of imported components, nested <template>, and new stories that bypass the helper. Only newly introduced violations block, so legacy stories are migrated as touched.
• Authoring docs — storybook-write skill + COMPONENT_REQUIREMENTS § 13 now mandate the helper (older "append the Usage block" guidance superseded).
• Migrated the three stories that had hand-rolled transforms: Skeleton, Badge, Chip.
• Tests — 5 cases for the hook in .claude/hooks/__tests__/run.mjs (all pass).

After:

<script setup>
import Skeleton from '@aziontech/webkit/skeleton'
</script>

<template>
  <Skeleton animated height="100px" kind="shape" width="240px" />
</template>

Notes

• The hooks test harness has 2 pre-existing failures (lib: legacy whitelist, enforce-spec-exists) in files this PR does not touch; the 5 new validate-story-source tests pass.
• The matching fix for the Divider story shipped in [ENG-46312] feat(webkit): add Divider (layout) #678 (that branch predates this helper; it will adopt the helper once it re-syncs dev).