refactor(snippets): adopt alias/title model and markdown UX

- rename snippet identity from name to alias and add required title fields

- migrate snippet API, forms, cards, and detail views to alias/title semantics

- render markdown descriptions with short card previews and split vendor chunks

client/src/ui/MarkdownContent/MarkdownContent.module.css

@@ -0,0 +1,113 @@
+.markdown {
+  color: var(--color-text);
+  line-height: 1.65;
+  font-size: var(--font-size-sm);
+}
+
+.markdown > :first-child {
+  margin-top: 0;
+}
+
+.markdown > :last-child {
+  margin-bottom: 0;
+}
+
+.markdown h1,
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  line-height: 1.25;
+  margin: var(--space-5) 0 var(--space-3);
+}
+
+.markdown h1 {
+  font-size: var(--font-size-lg);
+}
+
+.markdown h2 {
+  font-size: var(--font-size-md);
+}
+
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  font-size: var(--font-size-sm);
+}
+
+.markdown p {
+  margin: 0 0 var(--space-3);
+}
+
+.markdown ul,
+.markdown ol {
+  margin: 0 0 var(--space-3);
+  padding-left: 1.35rem;
+}
+
+.markdown li + li {
+  margin-top: var(--space-1);
+}
+
+.markdown blockquote {
+  margin: 0 0 var(--space-3);
+  padding: var(--space-2) var(--space-3);
+  border-left: 3px solid var(--color-primary);
+  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
+  border-radius: var(--radius-sm);
+}
+
+.markdown pre {
+  margin: 0 0 var(--space-3);
+  padding: var(--space-3);
+  border-radius: var(--radius-md);
+  background: var(--color-code-bg, var(--color-bg-raised));
+  border: var(--border-width) solid var(--color-border);
+  overflow-x: auto;
+}
+
+.markdown code {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 0.92em;
+}
+
+.markdown :not(pre) > code {
+  padding: 0.12em 0.4em;
+  border-radius: var(--radius-sm);
+  background: color-mix(in srgb, var(--color-bg-raised) 60%, var(--color-secondary) 40%);
+  border: 1px solid var(--color-border);
+}
+
+.markdown table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 0 0 var(--space-3);
+}
+
+.markdown th,
+.markdown td {
+  border: var(--border-width) solid var(--color-border);
+  padding: var(--space-2) var(--space-3);
+  text-align: left;
+  vertical-align: top;
+}
+
+.markdown th {
+  background: color-mix(in srgb, var(--color-bg-raised) 85%, var(--color-secondary) 15%);
+}
+
+.markdown a {
+  color: var(--color-link);
+}
+
+.markdown a:hover {
+  color: var(--color-link-hover);
+}
+
+.markdown hr {
+  border: 0;
+  border-top: var(--border-width) solid var(--color-border);
+  margin: var(--space-4) 0;
+}

client/src/ui/MarkdownContent/MarkdownContent.tsx

@@ -0,0 +1,16 @@
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import styles from './MarkdownContent.module.css';
+
+export interface MarkdownContentProps {
+  content: string;
+  className?: string;
+}
+
+export function MarkdownContent({ content, className }: MarkdownContentProps) {
+  return (
+    <div className={`${styles.markdown}${className ? ` ${className}` : ''}`}>
+      <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
+    </div>
+  );
+}

client/src/ui/index.ts

@@ -45,6 +45,9 @@ export type { CodeBlockProps } from './CodeBlock/CodeBlock';
 export { CodeEditor } from './CodeEditor/CodeEditor';
 export type { CodeEditorProps } from './CodeEditor/CodeEditor';
 
+export { MarkdownContent } from './MarkdownContent/MarkdownContent';
+export type { MarkdownContentProps } from './MarkdownContent/MarkdownContent';
+
 export { ContextMenu } from './ContextMenu/ContextMenu';
 export type { ContextMenuProps, ContextMenuItem } from './ContextMenu/ContextMenu';