chaeditor 0.1.0

package/dist/toolbar-preset-B9ttTEol.d.ts

@@ -0,0 +1,236 @@
+import React, { ReactNode } from 'react';
+import { a as EditorContentType, E as EditorAttachment, b as EditorImageUploadKind } from './image-upload-kind-BJqItE_C.js';
+
+type LinkEmbedData = {
+    description: string;
+    favicon: string | null;
+    image: string | null;
+    siteName: string;
+    title: string;
+    url: string;
+};
+
+type PreviewImageSource = string | {
+    src: string;
+};
+/**
+ * Shared image render props passed to a host-provided image renderer.
+ */
+type HostImageRenderProps = {
+    /** Accessible image alternative text. */
+    alt: string;
+    /** Optional class name applied by the package surface. */
+    className?: string;
+    /** Whether the image is expected to fill an absolutely positioned frame. */
+    fill?: boolean;
+    /** Optional responsive sizes hint forwarded to the host image primitive. */
+    sizes?: string;
+    /** Source value generated by the editor or renderer. */
+    src: PreviewImageSource;
+};
+/**
+ * Renders an image node with a host-specific image primitive.
+ *
+ * When omitted, the package falls back to its default <img>-based renderer.
+ */
+type HostImageRenderer = (props: HostImageRenderProps) => React.ReactNode;
+/**
+ * Label overrides used by the built-in image viewer UI.
+ */
+type MarkdownImageViewerLabels = {
+    actionBarAriaLabel: string;
+    closeAriaLabel: string;
+    fitToScreenAriaLabel: string;
+    imageViewerAriaLabel?: string;
+    locateSourceAriaLabel: string;
+    nextAriaLabel: string;
+    openAriaLabel: string;
+    previousAriaLabel: string;
+    selectForFrameAriaLabel: string;
+    selectForFrameLabel: string;
+    thumbnailListAriaLabel: string;
+    zoomInAriaLabel: string;
+    zoomOutAriaLabel: string;
+};
+/**
+ * Uploads an editor image and returns the final public URL.
+ *
+ * When this adapter is omitted, image upload flows stay available only if the caller
+ * injects a different upload implementation through the relevant UI surface.
+ */
+type UploadEditorImage = (payload: {
+    /** Logical content type that scopes the upload target. */
+    contentType: EditorContentType;
+    /** Raw browser file selected by the user. */
+    file: File;
+    /** Upload intent used by the host to optimize the image differently when needed. */
+    imageKind: EditorImageUploadKind;
+}) => Promise<string>;
+/**
+ * Uploads an editor attachment and returns the uploaded file metadata.
+ *
+ * When omitted, attachment upload UI can still render but should disable upload-specific actions.
+ */
+type UploadEditorFile = (payload: {
+    /** Logical content type that scopes the upload target. */
+    contentType: EditorContentType;
+    /** Raw browser file selected by the user. */
+    file: File;
+}) => Promise<EditorAttachment>;
+/**
+ * Uploads an editor video and returns the final public URL.
+ *
+ * When omitted, video helpers can fall back to URL-only insertion flows.
+ */
+type UploadEditorVideo = (payload: {
+    /** Logical content type that scopes the upload target. */
+    contentType: EditorContentType;
+    /** Raw browser file selected by the user. */
+    file: File;
+    /** Optional progress callback that receives a 0-100 percentage. */
+    onProgress?: (percentage: number) => void;
+    /** Optional abort signal for cancelable uploads. */
+    signal?: AbortSignal;
+}) => Promise<string>;
+/**
+ * Resolves the final attachment href in the host application.
+ *
+ * When omitted, the renderer uses the original href from markdown content.
+ */
+type ResolveAttachmentHref = (payload: {
+    fileName: string;
+    href: string;
+}) => string | null;
+/**
+ * Fetches metadata used by link preview cards.
+ *
+ * When omitted, link preview components fall back to plain link rendering.
+ */
+type FetchLinkPreviewMeta = (url: string, signal?: AbortSignal) => Promise<LinkEmbedData | null>;
+/**
+ * Host-level adapters used by the markdown renderer and related UI.
+ */
+type MarkdownRendererHostAdapters = {
+    /** Optional metadata fetcher for rich link preview cards. */
+    fetchLinkPreviewMeta?: FetchLinkPreviewMeta;
+    /** Optional label overrides for the built-in image viewer. */
+    imageViewerLabels?: Partial<MarkdownImageViewerLabels>;
+    /** Optional image renderer override for framework-specific image primitives. */
+    renderImage?: HostImageRenderer;
+    /** Optional attachment href resolver. */
+    resolveAttachmentHref?: ResolveAttachmentHref;
+};
+/**
+ * Host-level adapters used by the editor toolbar, embed modals, and renderer.
+ */
+type MarkdownEditorHostAdapters = MarkdownRendererHostAdapters & {
+    /** Optional attachment upload implementation. */
+    uploadFile?: UploadEditorFile;
+    /** Optional image upload implementation. */
+    uploadImage?: UploadEditorImage;
+    /** Optional video upload implementation. */
+    uploadVideo?: UploadEditorVideo;
+};
+
+type MarkdownImageViewerItem = {
+    alt: string;
+    src: string;
+    viewerId: string;
+};
+/**
+ * Collects markdown image nodes into a viewer-friendly item list.
+ */
+declare const collectMarkdownImages: (markdown: string) => MarkdownImageViewerItem[];
+
+type MarkdownFragmentRenderer = (markdown: string, key: string) => ReactNode;
+type ToggleHeadingLevel = 1 | 2 | 3 | 4 | null;
+type MarkdownSegment = {
+    markdown: string;
+    type: 'markdown';
+} | {
+    align: 'center' | 'left' | 'right';
+    content: string;
+    type: 'align';
+} | {
+    content: string;
+    type: 'subtext';
+} | {
+    content: string;
+    headingLevel: ToggleHeadingLevel;
+    title: string;
+    type: 'toggle';
+} | {
+    contentType?: string;
+    fileName: string;
+    fileSize?: number;
+    href: string;
+    type: 'attachment';
+} | {
+    formula: string;
+    isBlock: boolean;
+    type: 'math';
+} | {
+    items: ReturnType<typeof collectMarkdownImages>;
+    type: 'gallery';
+} | {
+    provider: 'upload' | 'youtube';
+    src?: string;
+    type: 'video';
+    videoId?: string;
+};
+type RichMarkdownRenderArgs = {
+    markdown: string;
+    renderMarkdownFragment: MarkdownFragmentRenderer;
+};
+/**
+ * Restores HTML entities escaped inside custom tag attributes.
+ *
+ * @param value Raw attribute value.
+ * @returns A decoded string.
+ */
+declare const decodeHtmlAttributeEntities: (value: string) => string;
+/**
+ * Splits a toggle title into heading level metadata and visible text.
+ *
+ * @param rawTitle Raw title text after the toggle marker.
+ * @returns Parsed heading level and title.
+ */
+declare const parseToggleTitle: (rawTitle: string) => {
+    headingLevel: ToggleHeadingLevel;
+    title: string;
+};
+/**
+ * Splits markdown into plain fragments and custom block segments.
+ *
+ * @param markdown Raw markdown string that may contain custom syntax.
+ * @returns Parsed segment list for rendering.
+ */
+declare const parseRichMarkdownSegments: (markdown: string) => MarkdownSegment[];
+
+type MarkdownToolbarSectionKey = 'heading-and-subtext' | 'text-emphasis' | 'highlight-and-alignment' | 'block-syntax' | 'embed-and-media';
+type MarkdownToolbarPresetItemKey = 'heading-popover' | 'subtext' | 'bold' | 'italic' | 'strike' | 'underline' | 'text-color' | 'background-color' | 'align' | 'horizontal-rule' | 'quote' | 'code-block' | 'table' | 'spoiler' | 'toggle-popover' | 'math-embed' | 'file-embed' | 'image-embed' | 'link-embed' | 'video-embed';
+type MarkdownToolbarPresetSection = {
+    itemKeys: MarkdownToolbarPresetItemKey[];
+    key: MarkdownToolbarSectionKey;
+};
+type MarkdownToolbarResolvedSection<TItem> = {
+    items: TItem[];
+    key: MarkdownToolbarSectionKey;
+};
+/**
+ * Default toolbar preset expressed as pure section and item keys.
+ */
+declare const DEFAULT_MARKDOWN_TOOLBAR_PRESET: MarkdownToolbarPresetSection[];
+/**
+ * Resolves the final toolbar sections from a preset and an item registry.
+ *
+ * @param itemRegistry Map from toolbar item keys to concrete section items.
+ * @param preset Optional toolbar preset.
+ * @returns Resolved toolbar sections.
+ */
+declare const resolveMarkdownToolbarPresetSections: <TItem>({ itemRegistry, preset, }: {
+    itemRegistry: Partial<Record<MarkdownToolbarPresetItemKey, TItem>>;
+    preset?: MarkdownToolbarPresetSection[];
+}) => MarkdownToolbarResolvedSection<TItem>[];
+
+export { DEFAULT_MARKDOWN_TOOLBAR_PRESET as D, type FetchLinkPreviewMeta as F, type HostImageRenderProps as H, type MarkdownEditorHostAdapters as M, type PreviewImageSource as P, type ResolveAttachmentHref as R, type UploadEditorFile as U, type HostImageRenderer as a, type MarkdownImageViewerLabels as b, type MarkdownRendererHostAdapters as c, type MarkdownSegment as d, type MarkdownToolbarPresetItemKey as e, type MarkdownToolbarPresetSection as f, type MarkdownToolbarResolvedSection as g, type MarkdownToolbarSectionKey as h, type RichMarkdownRenderArgs as i, type UploadEditorImage as j, type UploadEditorVideo as k, decodeHtmlAttributeEntities as l, parseToggleTitle as m, parseRichMarkdownSegments as p, resolveMarkdownToolbarPresetSections as r };

package/dist/toolbar-preset-DIsQN390.d.mts

@@ -0,0 +1,236 @@
+import React, { ReactNode } from 'react';
+import { a as EditorContentType, E as EditorAttachment, b as EditorImageUploadKind } from './image-upload-kind-BJqItE_C.mjs';
+
+type LinkEmbedData = {
+    description: string;
+    favicon: string | null;
+    image: string | null;
+    siteName: string;
+    title: string;
+    url: string;
+};
+
+type PreviewImageSource = string | {
+    src: string;
+};
+/**
+ * Shared image render props passed to a host-provided image renderer.
+ */
+type HostImageRenderProps = {
+    /** Accessible image alternative text. */
+    alt: string;
+    /** Optional class name applied by the package surface. */
+    className?: string;
+    /** Whether the image is expected to fill an absolutely positioned frame. */
+    fill?: boolean;
+    /** Optional responsive sizes hint forwarded to the host image primitive. */
+    sizes?: string;
+    /** Source value generated by the editor or renderer. */
+    src: PreviewImageSource;
+};
+/**
+ * Renders an image node with a host-specific image primitive.
+ *
+ * When omitted, the package falls back to its default <img>-based renderer.
+ */
+type HostImageRenderer = (props: HostImageRenderProps) => React.ReactNode;
+/**
+ * Label overrides used by the built-in image viewer UI.
+ */
+type MarkdownImageViewerLabels = {
+    actionBarAriaLabel: string;
+    closeAriaLabel: string;
+    fitToScreenAriaLabel: string;
+    imageViewerAriaLabel?: string;
+    locateSourceAriaLabel: string;
+    nextAriaLabel: string;
+    openAriaLabel: string;
+    previousAriaLabel: string;
+    selectForFrameAriaLabel: string;
+    selectForFrameLabel: string;
+    thumbnailListAriaLabel: string;
+    zoomInAriaLabel: string;
+    zoomOutAriaLabel: string;
+};
+/**
+ * Uploads an editor image and returns the final public URL.
+ *
+ * When this adapter is omitted, image upload flows stay available only if the caller
+ * injects a different upload implementation through the relevant UI surface.
+ */
+type UploadEditorImage = (payload: {
+    /** Logical content type that scopes the upload target. */
+    contentType: EditorContentType;
+    /** Raw browser file selected by the user. */
+    file: File;
+    /** Upload intent used by the host to optimize the image differently when needed. */
+    imageKind: EditorImageUploadKind;
+}) => Promise<string>;
+/**
+ * Uploads an editor attachment and returns the uploaded file metadata.
+ *
+ * When omitted, attachment upload UI can still render but should disable upload-specific actions.
+ */
+type UploadEditorFile = (payload: {
+    /** Logical content type that scopes the upload target. */
+    contentType: EditorContentType;
+    /** Raw browser file selected by the user. */
+    file: File;
+}) => Promise<EditorAttachment>;
+/**
+ * Uploads an editor video and returns the final public URL.
+ *
+ * When omitted, video helpers can fall back to URL-only insertion flows.
+ */
+type UploadEditorVideo = (payload: {
+    /** Logical content type that scopes the upload target. */
+    contentType: EditorContentType;
+    /** Raw browser file selected by the user. */
+    file: File;
+    /** Optional progress callback that receives a 0-100 percentage. */
+    onProgress?: (percentage: number) => void;
+    /** Optional abort signal for cancelable uploads. */
+    signal?: AbortSignal;
+}) => Promise<string>;
+/**
+ * Resolves the final attachment href in the host application.
+ *
+ * When omitted, the renderer uses the original href from markdown content.
+ */
+type ResolveAttachmentHref = (payload: {
+    fileName: string;
+    href: string;
+}) => string | null;
+/**
+ * Fetches metadata used by link preview cards.
+ *
+ * When omitted, link preview components fall back to plain link rendering.
+ */
+type FetchLinkPreviewMeta = (url: string, signal?: AbortSignal) => Promise<LinkEmbedData | null>;
+/**
+ * Host-level adapters used by the markdown renderer and related UI.
+ */
+type MarkdownRendererHostAdapters = {
+    /** Optional metadata fetcher for rich link preview cards. */
+    fetchLinkPreviewMeta?: FetchLinkPreviewMeta;
+    /** Optional label overrides for the built-in image viewer. */
+    imageViewerLabels?: Partial<MarkdownImageViewerLabels>;
+    /** Optional image renderer override for framework-specific image primitives. */
+    renderImage?: HostImageRenderer;
+    /** Optional attachment href resolver. */
+    resolveAttachmentHref?: ResolveAttachmentHref;
+};
+/**
+ * Host-level adapters used by the editor toolbar, embed modals, and renderer.
+ */
+type MarkdownEditorHostAdapters = MarkdownRendererHostAdapters & {
+    /** Optional attachment upload implementation. */
+    uploadFile?: UploadEditorFile;
+    /** Optional image upload implementation. */
+    uploadImage?: UploadEditorImage;
+    /** Optional video upload implementation. */
+    uploadVideo?: UploadEditorVideo;
+};
+
+type MarkdownImageViewerItem = {
+    alt: string;
+    src: string;
+    viewerId: string;
+};
+/**
+ * Collects markdown image nodes into a viewer-friendly item list.
+ */
+declare const collectMarkdownImages: (markdown: string) => MarkdownImageViewerItem[];
+
+type MarkdownFragmentRenderer = (markdown: string, key: string) => ReactNode;
+type ToggleHeadingLevel = 1 | 2 | 3 | 4 | null;
+type MarkdownSegment = {
+    markdown: string;
+    type: 'markdown';
+} | {
+    align: 'center' | 'left' | 'right';
+    content: string;
+    type: 'align';
+} | {
+    content: string;
+    type: 'subtext';
+} | {
+    content: string;
+    headingLevel: ToggleHeadingLevel;
+    title: string;
+    type: 'toggle';
+} | {
+    contentType?: string;
+    fileName: string;
+    fileSize?: number;
+    href: string;
+    type: 'attachment';
+} | {
+    formula: string;
+    isBlock: boolean;
+    type: 'math';
+} | {
+    items: ReturnType<typeof collectMarkdownImages>;
+    type: 'gallery';
+} | {
+    provider: 'upload' | 'youtube';
+    src?: string;
+    type: 'video';
+    videoId?: string;
+};
+type RichMarkdownRenderArgs = {
+    markdown: string;
+    renderMarkdownFragment: MarkdownFragmentRenderer;
+};
+/**
+ * Restores HTML entities escaped inside custom tag attributes.
+ *
+ * @param value Raw attribute value.
+ * @returns A decoded string.
+ */
+declare const decodeHtmlAttributeEntities: (value: string) => string;
+/**
+ * Splits a toggle title into heading level metadata and visible text.
+ *
+ * @param rawTitle Raw title text after the toggle marker.
+ * @returns Parsed heading level and title.
+ */
+declare const parseToggleTitle: (rawTitle: string) => {
+    headingLevel: ToggleHeadingLevel;
+    title: string;
+};
+/**
+ * Splits markdown into plain fragments and custom block segments.
+ *
+ * @param markdown Raw markdown string that may contain custom syntax.
+ * @returns Parsed segment list for rendering.
+ */
+declare const parseRichMarkdownSegments: (markdown: string) => MarkdownSegment[];
+
+type MarkdownToolbarSectionKey = 'heading-and-subtext' | 'text-emphasis' | 'highlight-and-alignment' | 'block-syntax' | 'embed-and-media';
+type MarkdownToolbarPresetItemKey = 'heading-popover' | 'subtext' | 'bold' | 'italic' | 'strike' | 'underline' | 'text-color' | 'background-color' | 'align' | 'horizontal-rule' | 'quote' | 'code-block' | 'table' | 'spoiler' | 'toggle-popover' | 'math-embed' | 'file-embed' | 'image-embed' | 'link-embed' | 'video-embed';
+type MarkdownToolbarPresetSection = {
+    itemKeys: MarkdownToolbarPresetItemKey[];
+    key: MarkdownToolbarSectionKey;
+};
+type MarkdownToolbarResolvedSection<TItem> = {
+    items: TItem[];
+    key: MarkdownToolbarSectionKey;
+};
+/**
+ * Default toolbar preset expressed as pure section and item keys.
+ */
+declare const DEFAULT_MARKDOWN_TOOLBAR_PRESET: MarkdownToolbarPresetSection[];
+/**
+ * Resolves the final toolbar sections from a preset and an item registry.
+ *
+ * @param itemRegistry Map from toolbar item keys to concrete section items.
+ * @param preset Optional toolbar preset.
+ * @returns Resolved toolbar sections.
+ */
+declare const resolveMarkdownToolbarPresetSections: <TItem>({ itemRegistry, preset, }: {
+    itemRegistry: Partial<Record<MarkdownToolbarPresetItemKey, TItem>>;
+    preset?: MarkdownToolbarPresetSection[];
+}) => MarkdownToolbarResolvedSection<TItem>[];
+
+export { DEFAULT_MARKDOWN_TOOLBAR_PRESET as D, type FetchLinkPreviewMeta as F, type HostImageRenderProps as H, type MarkdownEditorHostAdapters as M, type PreviewImageSource as P, type ResolveAttachmentHref as R, type UploadEditorFile as U, type HostImageRenderer as a, type MarkdownImageViewerLabels as b, type MarkdownRendererHostAdapters as c, type MarkdownSegment as d, type MarkdownToolbarPresetItemKey as e, type MarkdownToolbarPresetSection as f, type MarkdownToolbarResolvedSection as g, type MarkdownToolbarSectionKey as h, type RichMarkdownRenderArgs as i, type UploadEditorImage as j, type UploadEditorVideo as k, decodeHtmlAttributeEntities as l, parseToggleTitle as m, parseRichMarkdownSegments as p, resolveMarkdownToolbarPresetSections as r };

package/package.json

@@ -0,0 +1,151 @@
+{
+  "name": "chaeditor",
+  "description": "Composable markdown editor toolkit for React applications.",
+  "license": "MIT",
+  "homepage": "https://github.com/pcwadarong/chaeditor#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pcwadarong/chaeditor.git"
+  },
+  "bugs": {
+    "url": "https://github.com/pcwadarong/chaeditor/issues"
+  },
+  "keywords": [
+    "editor",
+    "markdown",
+    "react",
+    "storybook",
+    "toolbar",
+    "renderer"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./core": {
+      "types": "./dist/core.d.ts",
+      "import": "./dist/core.mjs",
+      "require": "./dist/core.cjs"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.mjs",
+      "require": "./dist/react.cjs"
+    },
+    "./default-host": {
+      "types": "./dist/default-host.d.ts",
+      "import": "./dist/default-host.mjs",
+      "require": "./dist/default-host.cjs"
+    },
+    "./panda-primitives": {
+      "types": "./dist/panda-primitives.d.ts",
+      "import": "./dist/panda-primitives.mjs",
+      "require": "./dist/panda-primitives.cjs"
+    },
+    "./styles.css": "./styled-system/styles.css",
+    "./package.json": "./package.json"
+  },
+  "packageManager": "pnpm@10.18.3",
+  "files": [
+    "dist",
+    "recipes/host-presets",
+    "styled-system/styles.css",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "pnpm run prepare && pnpm run clean && tsup",
+    "clean": "rm -rf dist",
+    "commit": "cz",
+    "format": "prettier --check .",
+    "format:write": "prettier --write .",
+    "lint": "eslint .",
+    "postinstall": "husky",
+    "prepack": "pnpm run build",
+    "prepare": "panda codegen && panda cssgen --outfile styled-system/styles.css",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "check-types": "tsc --noEmit",
+    "typecheck": "tsc --noEmit",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "chromatic": "npx chromatic --project-token=chpt_e7dfd62937e7687",
+    "verify:package-surface": "node ./scripts/verify-package-surface.mjs"
+  },
+  "version": "0.1.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "./styled-system/styles.css"
+  ],
+  "config": {
+    "commitizen": {
+      "path": "cz-customizable",
+      "config": ".cz-config.js"
+    }
+  },
+  "dependencies": {
+    "katex": "^0.16.44",
+    "mermaid": "^11.13.0",
+    "react-markdown": "^10.1.0",
+    "rehype-pretty-code": "^0.14.3",
+    "remark-breaks": "^4.0.0",
+    "remark-gfm": "^4.0.1",
+    "shiki": "^4.0.1",
+    "zod": "^4.3.6"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.35.0",
+    "@pandacss/dev": "^1.9.0",
+    "@storybook/addon-docs": "10.3.3",
+    "@storybook/nextjs-vite": "^10.3.3",
+    "@testing-library/jest-dom": "^6.8.0",
+    "@testing-library/react": "^16.3.0",
+    "@types/node": "^24.4.0",
+    "@types/react": "^19.1.13",
+    "@types/react-dom": "^19.1.9",
+    "autoprefixer": "^10.4.27",
+    "chromatic": "^16.0.0",
+    "commitizen": "^4.3.1",
+    "cz-customizable": "^7.5.1",
+    "esbuild": "^0.27.4",
+    "eslint": "^9.35.0",
+    "eslint-config-next": "^15.5.3",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "eslint-plugin-storybook": "^10.3.3",
+    "husky": "^9.1.7",
+    "jsdom": "^27.0.0",
+    "lint-staged": "^16.1.6",
+    "next": "^15.5.3",
+    "prettier": "^3.6.2",
+    "storybook": "^10.3.3",
+    "tsup": "^8.5.0",
+    "typescript": "^5.9.2",
+    "typescript-eslint": "^8.43.0",
+    "vite": "^8.0.3",
+    "vite-plugin-svgr": "^5.0.0",
+    "vitest": "^3.2.4"
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx,mjs,cjs}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "*.{json,md,yml,yaml,css,scss}": [
+      "prettier --write"
+    ]
+  }
+}

package/recipes/host-presets/README.md

@@ -0,0 +1,16 @@
+# Host Preset Templates
+
+이 폴더는 `chaeditor`를 host app 디자인 시스템에 연결할 때 바로 참고하거나 복사해서 시작할 수 있는 wrapper preset 초안을 모아둔 곳입니다.
+
+포함된 템플릿:
+
+- `tailwind-host-preset.tsx.template`
+- `emotion-host-preset.tsx.template`
+- `styled-components-host-preset.tsx.template`
+- `vanilla-extract-host-preset.tsx.template`
+
+공통 원칙:
+
+- `createChaeditorThemeVars()`로 semantic theme variables를 먼저 주입합니다.
+- `primitiveRegistry`로 `Button`, `Input`, `Textarea`, `Popover`, `Modal`, `Tooltip` shell을 교체합니다.
+- 실제 서비스 코드에서는 파일명과 import 경로를 프로젝트 구조에 맞게 조정하면 됩니다.