@noirmd/previewer 1.0.2 → 1.1.0

package/dist/index.d.cts

@@ -1,48 +1,10 @@
 import React from 'react';
 
-interface NRpreviewerProps {
-    /** Markdown string to render */
-    content?: string;
-    /** Raw HTML string to render (used when content is not provided) */
-    html?: string;
-    /** Inject Tailwind v4 browser CDN at runtime for directive styling. Default: false */
-    tailwindCDN?: boolean;
-    /** Additional CSS class on the wrapper element */
-    className?: string;
-    /** Inline styles on the wrapper element */
-    style?: React.CSSProperties;
-}
 /**
- * NRpreviewer — drop-in markdown/HTML preview component.
- *
- * @example
- * ```tsx
- * import { NRpreviewer } from '@noirmd/previewer';
- * import '@noirmd/previewer/markdown.css';
- *
- * <NRpreviewer content="# Hello **world**" />
- * <NRpreviewer content=":::note Title\nContent\n:::" tailwindCDN />
- * <NRpreviewer html="<h1>Raw HTML</h1>" />
- * ```
- */
-declare const NRpreviewer: React.FC<NRpreviewerProps>;
-
-interface CustomMarkdownRendererProps {
-    content: string;
-}
-/**
- * V2 CustomMarkdownRenderer — main orchestrator.
- *
- * Pipeline:
- *   content (string)
- *     → parseMarkdown() → allElements (Token[])
- *     → processAndRenderElements() → React tree
- *
- * Note: Tailwind CDN injection is NOT handled here.
- * Use NRpreviewer (which wraps this) or call useLazyTailwindCDN yourself.
+ * Generic CSSProperties — framework-agnostic equivalent of React.CSSProperties.
+ * Used for inline styles on tokens (e.g. images).
  */
-declare const CustomMarkdownRenderer: React.FC<CustomMarkdownRendererProps>;
-
+type CSSProperties = Record<string, string | number>;
 interface HeaderToken {
     type: 'header';
     level: number;
@@ -85,7 +47,7 @@ interface ImageToken {
     type: 'image';
     alt: string;
     src: string;
-    style: React.CSSProperties;
+    style: CSSProperties;
 }
 interface TableToken {
     type: 'table';
@@ -108,41 +70,96 @@ interface TocToken {
     type: 'toc';
 }
 type Token = HeaderToken | ParagraphToken | CodeblockToken | DirectiveToken | HtmlToken | HtmlBlockToken | ImageToken | TableToken | ListToken | BlockquoteToken | HrToken | TocToken;
-interface RenderContext {
-    modals: Record<string, boolean>;
-    setModals: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
-    articleClass: string;
-    allElements: Token[];
-    parseMarkdown: (md: string) => Token[];
-    renderElement: (element: Token, index: number, depth?: number) => React.ReactNode;
-    renderInline: (text: string) => React.ReactNode;
-    processAndRenderElements: (elements: Token[], depth?: number) => React.ReactNode[];
-}
-type DirectiveComponent = React.FC<DirectiveComponentProps>;
-interface DirectiveComponentProps {
-    /** The directive type string, e.g. 'card', 'note', 'modal' */
-    directiveType: string;
-    /** Parsed key="value" attributes from the {props} block */
-    props: Record<string, string>;
-    /** Named slots → raw content strings (to be parsed recursively) */
-    slots: Record<string, string>;
-    /** Convenience: render a named slot as parsed markdown */
-    renderSlot: (name: string) => React.ReactNode;
-    /** Full render context access */
-    context: RenderContext;
-    /** Position index in the parent element list */
-    index: string | number;
-    /** Full parsed AST */
-    allElements: Token[];
-    /** Extra flags from the orchestrator */
-    options?: Record<string, any>;
-}
 
 /**
- * V2 Markdown Parser — line-by-line state machine.
+ * V2 Markdown Parser — line-by-line state machine (framework-agnostic).
  */
 declare function parseMarkdown(markdown: string): Token[];
 
+/**
+ * Parse an inline CSS string (e.g. "color: red; padding: 1rem") into a CSSProperties object.
+ */
+declare function parseCssString(cssText: string): CSSProperties;
+/**
+ * Generate a URL-safe slug from text (NFD decomposition, strip accents, lowercase, hyphenate).
+ */
+declare function generateId(text: string): string;
+/**
+ * Smooth-scroll to an element by its ID.
+ */
+declare function scrollToId(id: string): void;
+/**
+ * Parse attribute suffix like `##{.my-class #my-id}` from a text line.
+ * Returns the cleaned text, extracted classes, and id.
+ */
+declare function extractAttributes(text: string): {
+    text: string;
+    classes: string;
+    id: string;
+};
+declare function resetScopeCounter(): void;
+/**
+ * Generate a unique scope ID for CSS isolation.
+ */
+declare function generateScopeId(): string;
+/**
+ * Parse props from a `{key="value" key2="value2"}` string.
+ * Also supports `.className` shorthand → adds to `class` prop.
+ * Also supports `#id` shorthand → adds to `id` prop.
+ */
+declare function parseProps(propsString: string): Record<string, string>;
+/**
+ * Parse raw HTML attributes string (e.g. `class="..." style="..." data-foo="..."`)
+ * into a plain props object.
+ *
+ * NOTE: This does NOT rename `class` → `className`. Framework adapters
+ * (React, Vue, etc.) should handle their own attribute name mapping.
+ */
+declare function parseHtmlAttrs(attrsString: string): Record<string, any>;
+
+interface NRpreviewerProps {
+    /** Markdown string to render */
+    content?: string;
+    /** Raw HTML string to render (used when content is not provided) */
+    html?: string;
+    /** Inject Tailwind v4 browser CDN at runtime for directive styling. Default: false */
+    tailwindCDN?: boolean;
+    /** Additional CSS class on the wrapper element */
+    className?: string;
+    /** Inline styles on the wrapper element */
+    style?: React.CSSProperties;
+}
+/**
+ * NRpreviewer — drop-in markdown/HTML preview component.
+ *
+ * @example
+ * ```tsx
+ * import { NRpreviewer } from '@noirmd/previewer';
+ * import '@noirmd/previewer/markdown.css';
+ *
+ * <NRpreviewer content="# Hello **world**" />
+ * <NRpreviewer content=":::note Title\nContent\n:::" tailwindCDN />
+ * <NRpreviewer html="<h1>Raw HTML</h1>" />
+ * ```
+ */
+declare const NRpreviewer: React.FC<NRpreviewerProps>;
+
+interface CustomMarkdownRendererProps {
+    content: string;
+}
+/**
+ * V2 CustomMarkdownRenderer — main orchestrator.
+ *
+ * Pipeline:
+ *   content (string)
+ *     → parseMarkdown() → allElements (Token[])
+ *     → processAndRenderElements() → React tree
+ *
+ * Note: Tailwind CDN injection is NOT handled here.
+ * Use NRpreviewer (which wraps this) or call useLazyTailwindCDN yourself.
+ */
+declare const CustomMarkdownRenderer: React.FC<CustomMarkdownRendererProps>;
+
 /**
  * Extract all header tokens from an AST for TOC generation.
  */
@@ -216,4 +233,34 @@ declare function scanTailwindCDN(): void;
  */
 declare function preloadTailwindCDN(): void;
 
-export { Admonition, CodeBlock, CustomMarkdownRenderer, Details, type DirectiveComponent, type DirectiveComponentProps, IconRenderer, Modal, NRpreviewer, type NRpreviewerProps, type RenderContext, type Token, extractHeaders, parseMarkdown, preloadTailwindCDN, scanTailwindCDN, useDebounce, useLazyTailwindCDN };
+interface RenderContext {
+    modals: Record<string, boolean>;
+    setModals: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
+    articleClass: string;
+    allElements: Token[];
+    parseMarkdown: (md: string) => Token[];
+    renderElement: (element: Token, index: number, depth?: number) => React.ReactNode;
+    renderInline: (text: string) => React.ReactNode;
+    processAndRenderElements: (elements: Token[], depth?: number) => React.ReactNode[];
+}
+type DirectiveComponent = React.FC<DirectiveComponentProps>;
+interface DirectiveComponentProps {
+    /** The directive type string, e.g. 'card', 'note', 'modal' */
+    directiveType: string;
+    /** Parsed key="value" attributes from the {props} block */
+    props: Record<string, string>;
+    /** Named slots → raw content strings (to be parsed recursively) */
+    slots: Record<string, string>;
+    /** Convenience: render a named slot as parsed markdown */
+    renderSlot: (name: string) => React.ReactNode;
+    /** Full render context access */
+    context: RenderContext;
+    /** Position index in the parent element list */
+    index: string | number;
+    /** Full parsed AST */
+    allElements: Token[];
+    /** Extra flags from the orchestrator */
+    options?: Record<string, any>;
+}
+
+export { Admonition, type BlockquoteToken, type CSSProperties, CodeBlock, type CodeblockToken, CustomMarkdownRenderer, Details, type DirectiveComponent, type DirectiveComponentProps, type DirectiveToken, type HeaderToken, type HrToken, type HtmlBlockToken, type HtmlToken, IconRenderer, type ImageToken, type ListToken, Modal, NRpreviewer, type NRpreviewerProps, type ParagraphToken, type RenderContext, type TableToken, type TocToken, type Token, extractAttributes, extractHeaders, generateId, generateScopeId, parseCssString, parseHtmlAttrs, parseMarkdown, parseProps, preloadTailwindCDN, resetScopeCounter, scanTailwindCDN, scrollToId, useDebounce, useLazyTailwindCDN };

package/dist/index.d.ts

@@ -1,48 +1,10 @@
 import React from 'react';
 
-interface NRpreviewerProps {
-    /** Markdown string to render */
-    content?: string;
-    /** Raw HTML string to render (used when content is not provided) */
-    html?: string;
-    /** Inject Tailwind v4 browser CDN at runtime for directive styling. Default: false */
-    tailwindCDN?: boolean;
-    /** Additional CSS class on the wrapper element */
-    className?: string;
-    /** Inline styles on the wrapper element */
-    style?: React.CSSProperties;
-}
 /**
- * NRpreviewer — drop-in markdown/HTML preview component.
- *
- * @example
- * ```tsx
- * import { NRpreviewer } from '@noirmd/previewer';
- * import '@noirmd/previewer/markdown.css';
- *
- * <NRpreviewer content="# Hello **world**" />
- * <NRpreviewer content=":::note Title\nContent\n:::" tailwindCDN />
- * <NRpreviewer html="<h1>Raw HTML</h1>" />
- * ```
- */
-declare const NRpreviewer: React.FC<NRpreviewerProps>;
-
-interface CustomMarkdownRendererProps {
-    content: string;
-}
-/**
- * V2 CustomMarkdownRenderer — main orchestrator.
- *
- * Pipeline:
- *   content (string)
- *     → parseMarkdown() → allElements (Token[])
- *     → processAndRenderElements() → React tree
- *
- * Note: Tailwind CDN injection is NOT handled here.
- * Use NRpreviewer (which wraps this) or call useLazyTailwindCDN yourself.
+ * Generic CSSProperties — framework-agnostic equivalent of React.CSSProperties.
+ * Used for inline styles on tokens (e.g. images).
  */
-declare const CustomMarkdownRenderer: React.FC<CustomMarkdownRendererProps>;
-
+type CSSProperties = Record<string, string | number>;
 interface HeaderToken {
     type: 'header';
     level: number;
@@ -85,7 +47,7 @@ interface ImageToken {
     type: 'image';
     alt: string;
     src: string;
-    style: React.CSSProperties;
+    style: CSSProperties;
 }
 interface TableToken {
     type: 'table';
@@ -108,41 +70,96 @@ interface TocToken {
     type: 'toc';
 }
 type Token = HeaderToken | ParagraphToken | CodeblockToken | DirectiveToken | HtmlToken | HtmlBlockToken | ImageToken | TableToken | ListToken | BlockquoteToken | HrToken | TocToken;
-interface RenderContext {
-    modals: Record<string, boolean>;
-    setModals: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
-    articleClass: string;
-    allElements: Token[];
-    parseMarkdown: (md: string) => Token[];
-    renderElement: (element: Token, index: number, depth?: number) => React.ReactNode;
-    renderInline: (text: string) => React.ReactNode;
-    processAndRenderElements: (elements: Token[], depth?: number) => React.ReactNode[];
-}
-type DirectiveComponent = React.FC<DirectiveComponentProps>;
-interface DirectiveComponentProps {
-    /** The directive type string, e.g. 'card', 'note', 'modal' */
-    directiveType: string;
-    /** Parsed key="value" attributes from the {props} block */
-    props: Record<string, string>;
-    /** Named slots → raw content strings (to be parsed recursively) */
-    slots: Record<string, string>;
-    /** Convenience: render a named slot as parsed markdown */
-    renderSlot: (name: string) => React.ReactNode;
-    /** Full render context access */
-    context: RenderContext;
-    /** Position index in the parent element list */
-    index: string | number;
-    /** Full parsed AST */
-    allElements: Token[];
-    /** Extra flags from the orchestrator */
-    options?: Record<string, any>;
-}
 
 /**
- * V2 Markdown Parser — line-by-line state machine.
+ * V2 Markdown Parser — line-by-line state machine (framework-agnostic).
  */
 declare function parseMarkdown(markdown: string): Token[];
 
+/**
+ * Parse an inline CSS string (e.g. "color: red; padding: 1rem") into a CSSProperties object.
+ */
+declare function parseCssString(cssText: string): CSSProperties;
+/**
+ * Generate a URL-safe slug from text (NFD decomposition, strip accents, lowercase, hyphenate).
+ */
+declare function generateId(text: string): string;
+/**
+ * Smooth-scroll to an element by its ID.
+ */
+declare function scrollToId(id: string): void;
+/**
+ * Parse attribute suffix like `##{.my-class #my-id}` from a text line.
+ * Returns the cleaned text, extracted classes, and id.
+ */
+declare function extractAttributes(text: string): {
+    text: string;
+    classes: string;
+    id: string;
+};
+declare function resetScopeCounter(): void;
+/**
+ * Generate a unique scope ID for CSS isolation.
+ */
+declare function generateScopeId(): string;
+/**
+ * Parse props from a `{key="value" key2="value2"}` string.
+ * Also supports `.className` shorthand → adds to `class` prop.
+ * Also supports `#id` shorthand → adds to `id` prop.
+ */
+declare function parseProps(propsString: string): Record<string, string>;
+/**
+ * Parse raw HTML attributes string (e.g. `class="..." style="..." data-foo="..."`)
+ * into a plain props object.
+ *
+ * NOTE: This does NOT rename `class` → `className`. Framework adapters
+ * (React, Vue, etc.) should handle their own attribute name mapping.
+ */
+declare function parseHtmlAttrs(attrsString: string): Record<string, any>;
+
+interface NRpreviewerProps {
+    /** Markdown string to render */
+    content?: string;
+    /** Raw HTML string to render (used when content is not provided) */
+    html?: string;
+    /** Inject Tailwind v4 browser CDN at runtime for directive styling. Default: false */
+    tailwindCDN?: boolean;
+    /** Additional CSS class on the wrapper element */
+    className?: string;
+    /** Inline styles on the wrapper element */
+    style?: React.CSSProperties;
+}
+/**
+ * NRpreviewer — drop-in markdown/HTML preview component.
+ *
+ * @example
+ * ```tsx
+ * import { NRpreviewer } from '@noirmd/previewer';
+ * import '@noirmd/previewer/markdown.css';
+ *
+ * <NRpreviewer content="# Hello **world**" />
+ * <NRpreviewer content=":::note Title\nContent\n:::" tailwindCDN />
+ * <NRpreviewer html="<h1>Raw HTML</h1>" />
+ * ```
+ */
+declare const NRpreviewer: React.FC<NRpreviewerProps>;
+
+interface CustomMarkdownRendererProps {
+    content: string;
+}
+/**
+ * V2 CustomMarkdownRenderer — main orchestrator.
+ *
+ * Pipeline:
+ *   content (string)
+ *     → parseMarkdown() → allElements (Token[])
+ *     → processAndRenderElements() → React tree
+ *
+ * Note: Tailwind CDN injection is NOT handled here.
+ * Use NRpreviewer (which wraps this) or call useLazyTailwindCDN yourself.
+ */
+declare const CustomMarkdownRenderer: React.FC<CustomMarkdownRendererProps>;
+
 /**
  * Extract all header tokens from an AST for TOC generation.
  */
@@ -216,4 +233,34 @@ declare function scanTailwindCDN(): void;
  */
 declare function preloadTailwindCDN(): void;
 
-export { Admonition, CodeBlock, CustomMarkdownRenderer, Details, type DirectiveComponent, type DirectiveComponentProps, IconRenderer, Modal, NRpreviewer, type NRpreviewerProps, type RenderContext, type Token, extractHeaders, parseMarkdown, preloadTailwindCDN, scanTailwindCDN, useDebounce, useLazyTailwindCDN };
+interface RenderContext {
+    modals: Record<string, boolean>;
+    setModals: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
+    articleClass: string;
+    allElements: Token[];
+    parseMarkdown: (md: string) => Token[];
+    renderElement: (element: Token, index: number, depth?: number) => React.ReactNode;
+    renderInline: (text: string) => React.ReactNode;
+    processAndRenderElements: (elements: Token[], depth?: number) => React.ReactNode[];
+}
+type DirectiveComponent = React.FC<DirectiveComponentProps>;
+interface DirectiveComponentProps {
+    /** The directive type string, e.g. 'card', 'note', 'modal' */
+    directiveType: string;
+    /** Parsed key="value" attributes from the {props} block */
+    props: Record<string, string>;
+    /** Named slots → raw content strings (to be parsed recursively) */
+    slots: Record<string, string>;
+    /** Convenience: render a named slot as parsed markdown */
+    renderSlot: (name: string) => React.ReactNode;
+    /** Full render context access */
+    context: RenderContext;
+    /** Position index in the parent element list */
+    index: string | number;
+    /** Full parsed AST */
+    allElements: Token[];
+    /** Extra flags from the orchestrator */
+    options?: Record<string, any>;
+}
+
+export { Admonition, type BlockquoteToken, type CSSProperties, CodeBlock, type CodeblockToken, CustomMarkdownRenderer, Details, type DirectiveComponent, type DirectiveComponentProps, type DirectiveToken, type HeaderToken, type HrToken, type HtmlBlockToken, type HtmlToken, IconRenderer, type ImageToken, type ListToken, Modal, NRpreviewer, type NRpreviewerProps, type ParagraphToken, type RenderContext, type TableToken, type TocToken, type Token, extractAttributes, extractHeaders, generateId, generateScopeId, parseCssString, parseHtmlAttrs, parseMarkdown, parseProps, preloadTailwindCDN, resetScopeCounter, scanTailwindCDN, scrollToId, useDebounce, useLazyTailwindCDN };