create-inox-app 0.1.0

package/dist/templates/claude-config/app/.agents/skills/streamdown/assets/examples/basic-streaming.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { useChat } from "@ai-sdk/react";
+import { Streamdown } from "streamdown";
+
+export default function ChatPage() {
+  const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat();
+
+  return (
+    <div className="flex h-screen flex-col">
+      <div className="flex-1 space-y-4 overflow-y-auto p-4">
+        {messages.map((message) => (
+          <div className={message.role === "user" ? "text-right" : "text-left"} key={message.id}>
+            <div className="inline-block max-w-2xl">
+              <Streamdown isAnimating={isLoading && message.role === "assistant"}>
+                {message.content}
+              </Streamdown>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <form className="border-t p-4" onSubmit={handleSubmit}>
+        <input
+          className="w-full rounded-lg border px-4 py-2"
+          disabled={isLoading}
+          onChange={handleInputChange}
+          placeholder="Ask me anything..."
+          value={input}
+        />
+      </form>
+    </div>
+  );
+}

package/dist/templates/claude-config/app/.agents/skills/streamdown/assets/examples/custom-security.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { code } from "@streamdown/code";
+import { defaultRehypePlugins, Streamdown } from "streamdown";
+
+// Strict security config for AI-generated content
+const rehypePlugins = [
+  defaultRehypePlugins.raw,
+  defaultRehypePlugins.sanitize,
+  [
+    defaultRehypePlugins.harden[0],
+    {
+      allowedProtocols: ["https", "mailto"],
+      allowedLinkPrefixes: ["https://your-domain.com", "https://docs.your-domain.com"],
+      allowedImagePrefixes: ["https://cdn.your-domain.com"],
+      allowDataImages: false,
+    },
+  ],
+];
+
+export default function SecureChat({ content }: { content: string }) {
+  return (
+    <Streamdown
+      linkSafety={{
+        enabled: true,
+        onLinkCheck: (url) => {
+          const trusted = ["your-domain.com"];
+          const hostname = new URL(url).hostname;
+          return trusted.some((d) => hostname.endsWith(d));
+        },
+      }}
+      plugins={{ code }}
+      rehypePlugins={rehypePlugins}
+    >
+      {content}
+    </Streamdown>
+  );
+}

package/dist/templates/claude-config/app/.agents/skills/streamdown/assets/examples/full-featured.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { useChat } from "@ai-sdk/react";
+import { code } from "@streamdown/code";
+import { math } from "@streamdown/math";
+import { mermaid } from "@streamdown/mermaid";
+import { Streamdown } from "streamdown";
+import "katex/dist/katex.min.css";
+
+export default function FullFeaturedChat() {
+  const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat();
+
+  return (
+    <div className="flex h-screen flex-col">
+      <div className="flex-1 space-y-4 overflow-y-auto p-4">
+        {messages.map((message, index) => (
+          <div key={message.id}>
+            <Streamdown
+              caret="block"
+              controls={{
+                code: true,
+                table: true,
+                mermaid: {
+                  download: true,
+                  copy: true,
+                  fullscreen: true,
+                  panZoom: true,
+                },
+              }}
+              isAnimating={
+                isLoading && index === messages.length - 1 && message.role === "assistant"
+              }
+              linkSafety={{
+                enabled: true,
+                onLinkCheck: (url) => {
+                  const trusted = ["github.com", "npmjs.com"];
+                  const hostname = new URL(url).hostname;
+                  return trusted.some((d) => hostname.endsWith(d));
+                },
+              }}
+              plugins={{ code, mermaid, math }}
+            >
+              {message.content}
+            </Streamdown>
+          </div>
+        ))}
+      </div>
+
+      <form className="border-t p-4" onSubmit={handleSubmit}>
+        <input
+          className="w-full rounded-lg border px-4 py-2"
+          disabled={isLoading}
+          onChange={handleInputChange}
+          placeholder="Ask me anything..."
+          value={input}
+        />
+      </form>
+    </div>
+  );
+}

package/dist/templates/claude-config/app/.agents/skills/streamdown/assets/examples/static-mode.tsx

@@ -0,0 +1,17 @@
+import { code } from "@streamdown/code";
+import { math } from "@streamdown/math";
+import { Streamdown } from "streamdown";
+import "katex/dist/katex.min.css";
+
+export default function BlogPost({ content }: { content: string }) {
+  return (
+    <Streamdown
+      linkSafety={{ enabled: false }}
+      mode="static"
+      plugins={{ code, math }}
+      shikiTheme={["github-light", "github-dark"]}
+    >
+      {content}
+    </Streamdown>
+  );
+}

package/dist/templates/claude-config/app/.agents/skills/streamdown/assets/examples/with-caret.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { useChat } from "@ai-sdk/react";
+import { code } from "@streamdown/code";
+import { Streamdown } from "streamdown";
+
+export default function ChatWithCaret() {
+  const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat();
+
+  return (
+    <div className="flex h-screen flex-col">
+      <div className="flex-1 space-y-4 overflow-y-auto p-4">
+        {messages.map((message, index) => (
+          <div key={message.id}>
+            <Streamdown
+              caret="block"
+              isAnimating={
+                isLoading && index === messages.length - 1 && message.role === "assistant"
+              }
+              plugins={{ code }}
+            >
+              {message.content}
+            </Streamdown>
+          </div>
+        ))}
+      </div>
+
+      <form className="border-t p-4" onSubmit={handleSubmit}>
+        <input
+          className="w-full rounded-lg border px-4 py-2"
+          disabled={isLoading}
+          onChange={handleInputChange}
+          placeholder="Ask me anything..."
+          value={input}
+        />
+      </form>
+    </div>
+  );
+}

package/dist/templates/claude-config/app/.agents/skills/streamdown/references/api.md

@@ -0,0 +1,278 @@
+# Streamdown API Reference
+
+## Table of Contents
+
+- [StreamdownProps](#streamdownprops)
+- [PluginConfig](#pluginconfig)
+- [RemendOptions](#remendoptions)
+- [ControlsConfig](#controlsconfig)
+- [LinkSafetyConfig](#linksafetyconfig)
+- [MermaidOptions](#mermaidoptions)
+- [Default Exports](#default-exports)
+
+## StreamdownProps
+
+```tsx
+interface StreamdownProps {
+  // Core
+  children: string;
+  mode?: "streaming" | "static"; // default: "streaming"
+  parseIncompleteMarkdown?: boolean; // default: true
+  remend?: RemendOptions;
+  isAnimating?: boolean; // default: false
+  className?: string;
+
+  // Styling
+  shikiTheme?: [BundledTheme, BundledTheme]; // default: ['github-light', 'github-dark']
+  components?: Components; // Custom element overrides
+  allowedTags?: Record<string, string[]>; // Custom HTML tags (only with default rehype plugins)
+
+  // Plugins
+  plugins?: PluginConfig;
+  rehypePlugins?: Pluggable[]; // default: [rehype-raw, rehype-sanitize, rehype-harden]
+  remarkPlugins?: Pluggable[]; // default: [remark-gfm]
+
+  // Element Filtering (react-markdown compatible)
+  allowedElements?: string[]; // Tag names to allow (cannot combine with disallowedElements)
+  disallowedElements?: string[]; // Tag names to disallow (cannot combine with allowedElements)
+  allowElement?: AllowElement; // Custom filter callback
+  unwrapDisallowed?: boolean; // default: false — replace disallowed with children
+  skipHtml?: boolean; // default: false — ignore raw HTML
+  urlTransform?: UrlTransform; // default: defaultUrlTransform — transform/sanitize URLs
+
+  // Features
+  caret?: "block" | "circle";
+  controls?: ControlsConfig; // default: true
+  mermaid?: MermaidOptions;
+  linkSafety?: LinkSafetyConfig; // default: { enabled: true }
+  cdnUrl?: string | null; // default: 'https://streamdown.ai/cdn'
+
+  // Advanced
+  BlockComponent?: React.ComponentType<BlockProps>;
+  parseMarkdownIntoBlocksFn?: (markdown: string) => string[];
+}
+```
+
+## PluginConfig
+
+```tsx
+interface PluginConfig {
+  code?: CodeHighlighterPlugin;
+  mermaid?: DiagramPlugin;
+  math?: MathPlugin;
+  cjk?: CjkPlugin;
+}
+```
+
+### CodeHighlighterPlugin (@streamdown/code)
+
+```tsx
+import { code } from '@streamdown/code';
+import { createCodePlugin } from '@streamdown/code';
+
+const code = createCodePlugin({
+  themes: ['github-light', 'github-dark'], // [light, dark]
+});
+
+// Methods:
+code.highlight(options, callback?);
+code.supportsLanguage(language: string): boolean;
+code.getSupportedLanguages(): string[];
+code.getThemes(): [BundledTheme, BundledTheme];
+```
+
+### DiagramPlugin (@streamdown/mermaid)
+
+```tsx
+import { mermaid } from '@streamdown/mermaid';
+import { createMermaidPlugin } from '@streamdown/mermaid';
+
+const mermaid = createMermaidPlugin({
+  config: {
+    theme: 'dark', // 'default' | 'dark' | 'forest' | 'neutral' | 'base'
+    fontFamily: 'monospace',
+  },
+});
+```
+
+### MathPlugin (@streamdown/math)
+
+```tsx
+import { math } from '@streamdown/math';
+import { createMathPlugin } from '@streamdown/math';
+
+const math = createMathPlugin({
+  singleDollarTextMath: true, // default: false
+  errorColor: '#ff0000',
+});
+
+math.getStyles(); // Returns "katex/dist/katex.min.css"
+```
+
+**Math requires CSS import:**
+```tsx
+import 'katex/dist/katex.min.css';
+```
+
+### CjkPlugin (@streamdown/cjk)
+
+```tsx
+import { cjk } from '@streamdown/cjk';
+import { createCjkPlugin } from '@streamdown/cjk';
+
+const cjk = createCjkPlugin();
+// Provides remarkPluginsBefore and remarkPluginsAfter
+```
+
+## RemendOptions
+
+Controls how incomplete Markdown is completed during streaming.
+
+```tsx
+interface RemendOptions {
+  links?: boolean; // default: true
+  images?: boolean; // default: true
+  bold?: boolean; // default: true
+  italic?: boolean; // default: true
+  boldItalic?: boolean; // default: true
+  inlineCode?: boolean; // default: true
+  strikethrough?: boolean; // default: true
+  katex?: boolean; // default: true
+  setextHeadings?: boolean; // default: true
+  linkMode?: 'protocol' | 'text-only'; // default: 'protocol'
+  handlers?: RemendHandler[]; // Custom handlers
+}
+```
+
+## ControlsConfig
+
+```tsx
+type ControlsConfig = boolean | {
+  table?: boolean;
+  code?: boolean;
+  mermaid?: boolean | {
+    download?: boolean;
+    copy?: boolean;
+    fullscreen?: boolean;
+    panZoom?: boolean;
+  };
+};
+```
+
+## LinkSafetyConfig
+
+```tsx
+interface LinkSafetyConfig {
+  enabled: boolean;
+  onLinkCheck?: (url: string) => Promise<boolean> | boolean;
+  renderModal?: (props: LinkSafetyModalProps) => React.ReactNode;
+}
+
+interface LinkSafetyModalProps {
+  url: string;
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+}
+```
+
+## MermaidOptions
+
+```tsx
+interface MermaidOptions {
+  config?: MermaidConfig;
+  errorComponent?: React.ComponentType<MermaidErrorComponentProps>;
+}
+
+interface MermaidErrorComponentProps {
+  error: string;
+  chart: string;
+  retry: () => void;
+}
+```
+
+## Element Filtering Types
+
+```tsx
+type AllowElement = (
+  element: Readonly<Element>,
+  index: number,
+  parent: Readonly<Parents> | undefined
+) => boolean | null | undefined;
+
+type UrlTransform = (
+  url: string,
+  key: string,
+  node: Readonly<Element>
+) => string | null | undefined;
+```
+
+### defaultUrlTransform
+
+Passthrough function that returns URLs unchanged. URL security is handled by `rehype-sanitize` and `rehype-harden` instead. Use `urlTransform` when you need custom URL rewriting.
+
+```tsx
+import { defaultUrlTransform } from 'streamdown';
+
+defaultUrlTransform('https://example.com', 'href', node); // 'https://example.com'
+defaultUrlTransform('/relative/path', 'href', node);      // '/relative/path'
+```
+
+## Default Exports
+
+```tsx
+import {
+  Streamdown,
+  defaultUrlTransform,    // URL passthrough (security handled by rehype plugins)
+  defaultRemarkPlugins,   // { gfm: [remarkGfm, {}] }
+  defaultRehypePlugins,   // { raw: rehypeRaw, sanitize: [rehypeSanitize, {}], harden: [harden, {...}] }
+} from 'streamdown';
+
+// Types
+import type {
+  AllowElement,
+  Components,
+  ExtraProps,
+  UrlTransform,
+} from 'streamdown';
+```
+
+## Overridable Components
+
+Pass via `components` prop:
+
+| Element | Props |
+|---------|-------|
+| `h1`-`h6` | children, className, node |
+| `p` | children, className, node |
+| `strong`, `em` | children, className, node |
+| `ul`, `ol` | children, className, node |
+| `li` | children, className, node |
+| `a` | children, className, href, node |
+| `code`, `pre` | children, className, node |
+| `blockquote` | children, className, node |
+| `table`, `thead`, `tbody`, `tr`, `th`, `td` | children, className, node |
+| `img` | src, alt, className, node |
+| `hr` | className, node |
+| `sup`, `sub` | children, className, node |
+| `section` | children, className, node |
+
+## Custom HTML Tags
+
+```tsx
+<Streamdown
+  allowedTags={{
+    source: ["id"],
+    mention: ["user_id", "type"],
+    widget: ["data*"], // wildcard: all data-* attributes
+  }}
+  components={{
+    source: (props) => <Badge>{props.id}</Badge>,
+    mention: (props) => <UserMention userId={props.user_id} />,
+  }}
+>
+  {markdown}
+</Streamdown>
+```
+
+**Note:** `allowedTags` only works when using default rehype plugins.

package/dist/templates/claude-config/app/.agents/skills/streamdown/references/features.md

@@ -0,0 +1,201 @@
+# Streamdown Features Reference
+
+## Table of Contents
+
+- [Streaming Mode vs Static Mode](#streaming-mode-vs-static-mode)
+- [Carets](#carets)
+- [Remend (Incomplete Markdown)](#remend)
+- [Interactive Controls](#interactive-controls)
+- [GFM Features](#gfm-features)
+- [Memoization & Performance](#memoization--performance)
+- [Troubleshooting](#troubleshooting)
+
+## Streaming Mode vs Static Mode
+
+**Streaming (default):** Splits markdown into blocks, applies remend, supports carets, memoizes blocks individually.
+
+```tsx
+<Streamdown isAnimating={isLoading}>{streamingContent}</Streamdown>
+```
+
+**Static:** Renders as single unit, skips streaming optimizations. Use for blog posts, docs, pre-generated content.
+
+```tsx
+<Streamdown mode="static">{completeContent}</Streamdown>
+```
+
+All props (plugins, components, themes) work in both modes.
+
+## Carets
+
+Visual cursor at end of streaming content.
+
+```tsx
+// Block caret (▋) - terminal style
+<Streamdown caret="block" isAnimating={isLoading}>{content}</Streamdown>
+
+// Circle caret (●) - subtle style
+<Streamdown caret="circle" isAnimating={isLoading}>{content}</Streamdown>
+```
+
+**Requirements:** Both `caret` prop AND `isAnimating={true}` must be set. Caret disappears when streaming stops.
+
+**Per-message in chat:**
+```tsx
+{messages.map((msg, i) => (
+  <Streamdown
+    key={msg.id}
+    caret="block"
+    isAnimating={isLoading && i === messages.length - 1 && msg.role === 'assistant'}
+  >
+    {msg.content}
+  </Streamdown>
+))}
+```
+
+## Remend
+
+Preprocessor that completes incomplete Markdown during streaming.
+
+**What it handles:**
+| Pattern | Completion |
+|---------|-----------|
+| `**text` | `**text**` |
+| `*text` | `*text*` |
+| `` `code `` | `` `code` `` |
+| `~~text` | `~~text~~` |
+| `[text` | `[text](streamdown:incomplete-link)` or `text` |
+| `![alt` | Removed entirely |
+| `$$\n math` | `$$\n math $$` |
+
+**Disable:**
+```tsx
+<Streamdown parseIncompleteMarkdown={false}>{content}</Streamdown>
+```
+
+**Configure:**
+```tsx
+<Streamdown
+  remend={{
+    bold: true,
+    italic: true,
+    links: true,
+    images: true,
+    inlineCode: true,
+    strikethrough: true,
+    katex: true,
+    linkMode: 'text-only', // 'protocol' | 'text-only'
+  }}
+>
+```
+
+**Custom handlers:**
+```tsx
+<Streamdown
+  remend={{
+    handlers: [{
+      name: 'custom-syntax',
+      handle: (text) => {
+        if (text.endsWith('<<')) return text + '>>';
+        return null; // Return null to skip
+      },
+      priority: 100, // Lower = earlier (built-ins use 0-70)
+    }],
+  }}
+>
+```
+
+## Interactive Controls
+
+Auto-added buttons for images, tables, code, and Mermaid.
+
+**Disable all:**
+```tsx
+<Streamdown controls={false}>{markdown}</Streamdown>
+```
+
+**Selective:**
+```tsx
+<Streamdown
+  controls={{
+    table: true,
+    code: false, // No copy/download on code blocks
+    mermaid: {
+      download: true,
+      copy: true,
+      fullscreen: true,
+      panZoom: false,
+    },
+  }}
+>
+```
+
+**Button types by element:**
+- **Images:** Download (auto-detected format, alt text as filename)
+- **Tables:** Copy (CSV/TSV/HTML), Download (CSV/Markdown)
+- **Code blocks:** Copy (raw code), Download (with correct extension)
+- **Mermaid:** Copy (source), Download (SVG), Fullscreen, Pan/zoom
+
+All buttons disabled during streaming when `isAnimating={true}`.
+
+## GFM Features
+
+Included by default via `remark-gfm`:
+
+**Tables:**
+```markdown
+| Left | Center | Right |
+|:-----|:------:|------:|
+| A    | B      | C     |
+```
+
+**Task lists:**
+```markdown
+- [x] Completed
+- [ ] Pending
+```
+
+**Strikethrough:** `~~deleted~~`
+
+**Autolinks:** URLs and emails auto-linked.
+
+**Footnotes:** `[^1]` reference, `[^1]:` definition.
+
+## Memoization & Performance
+
+- **Component-level:** `React.memo` on Streamdown, re-renders only on children/shikiTheme/isAnimating changes
+- **Block-level:** Content split into blocks, each memoized individually
+- **Syntax highlighting:** Cached tokens, lazy-loaded languages, shared highlighter instance
+- **Plugin arrays:** Created once at module level
+
+## Troubleshooting
+
+### Shiki external package warning (Next.js)
+```bash
+npm install shiki
+```
+```js
+// next.config.js
+{ transpilePackages: ['shiki'] }
+```
+
+### Vite SSR CSS loading error
+```js
+// vite.config.js
+{ ssr: { noExternal: ['streamdown'] } }
+```
+
+### vscode-jsonrpc bundling errors (Next.js)
+```js
+// next.config.js
+{
+  serverComponentsExternalPackages: ['vscode-jsonrpc'],
+  webpack: (config) => {
+    config.resolve.alias['vscode-jsonrpc'] = false;
+    return config;
+  },
+}
+```
+
+### Tailwind styles not applied
+Ensure Streamdown dist files are included in Tailwind content scanning. See the Tailwind setup in SKILL.md.