@owomark/view 0.1.4 → 0.1.5

package/dist/static.d.ts

@@ -1,220 +0,0 @@
-import * as react from 'react';
-import { ReactNode } from 'react';
-import { BlockContent, Root } from 'mdast';
-import { Root as Root$1 } from 'hast';
-
-/**
- * Rehype plugin: unwrap display math from `<pre><code>` wrappers.
- *
- * remark-math + remark-rehype produce `<pre><code class="language-math math-display">`.
- * rehype-katex renders the KaTeX HTML inside that `<code>`, but the outer
- * `<pre>` triggers code-block styling and suppresses block-level math display.
- * This plugin hoists the rendered KaTeX content out of `<pre><code>`.
- */
-declare function rehypeMathDisplayFix(): (tree: any) => void;
-
-/**
- * Remark plugin: convert paragraph-level soft line breaks into hard break nodes.
- *
- * Only rewrites inline phrasing content inside paragraphs, so fenced code,
- * tables, math blocks, and other block structures keep their original
- * Markdown semantics.
- */
-declare function remarkConvertSoftBreaksToHardBreaks(): (tree: any) => void;
-
-/**
- * remark-side-annotation — OwoMark Side Annotation syntax plugin.
- *
- * Parses four tiers of side annotation syntax and produces SideAnnotation
- * container nodes in the mdast tree:
- *
- * - Tier 1:  `text (>} annotation)`         — single-block inline
- * - Tier 1+: `text (>} anno)` + `(>+)`      — 2-3 block continuation
- * - Tier 2:  `:::side (>} anno) ... :::`     — 4+ block container
- * - Tier 3:  `:::side [>id] ... :::` + def   — long-content reference
- *
- * @see docs/pitch/owomark-side-annotation.md
- * @see docs/adr/ADR-010-owomark-side-annotation-syntax-design.md
- */
-
-/**
- * Custom mdast node for side annotations.
- * Discriminant: `type: 'sideAnnotation'` — use this for type guards
- * (e.g. `node.type === 'sideAnnotation'`).
- * Bridged to rehype via `data.hName`/`data.hProperties`.
- */
-interface SideAnnotationNode {
-    /** Discriminant — always `'sideAnnotation'`. */
-    type: 'sideAnnotation';
-    data: {
-        hName: 'div';
-        hProperties: {
-            className: string[];
-            'data-side-type': string;
-            'data-side-text'?: string;
-            'data-side-orphan'?: string;
-        };
-    };
-    sideType: string;
-    sideTypeSymbol: string;
-    noteRef: string | null;
-    inlineText: string | null;
-    orphan?: boolean;
-    children: BlockContent[];
-}
-declare function remarkSideAnnotation(): (tree: Root) => void;
-
-/**
- * rehype-side-annotation — Transforms remark-side-annotation output into
- * full HTML structure with CSS Grid layout and SVG decorations.
- *
- * After remark-rehype, SideAnnotation nodes become `<div>` elements with
- * `data-side-type` attributes. This plugin detects them and injects the
- * two-column grid structure (main content + annotation aside).
- *
- * SVG decorations use segmented rendering (ADR-014): fixed-height SVG
- * caps/beaks + flex-stretch line divs. This prevents curve distortion
- * at any container height.
- *
- * @see docs/adr/ADR-014-side-annotation-segmented-svg-rendering.md
- * @see docs/pitch/owomark-side-annotation.md §R4
- */
-
-declare function rehypeSideAnnotation(): (tree: Root$1) => void;
-
-type ProcessorMode = 'preview' | 'production';
-/** A single plugin or a [plugin, ...options] tuple accepted by unified. */
-type PluginEntry = unknown | [unknown, ...unknown[]];
-/** Minimal processor contract shared by unified and MDX engines. */
-interface OwoMarkProcessor {
-    process(source: string): Promise<{
-        toString(): string;
-        value: string;
-    }>;
-}
-/** React component map for MDX rendering. */
-type MdxComponentMap = Record<string, React.ComponentType<any>>;
-type OwoMarkProcessorOptions = {
-    /** Rendering mode. Defaults to 'preview'. */
-    mode?: ProcessorMode;
-    /**
-     * When false (default), plain newlines in paragraphs become `<br>`.
-     * When true, CommonMark soft-break semantics are preserved.
-     */
-    preserveSoftLineBreaks?: boolean;
-    /** Shiki theme for code highlighting. Defaults to 'vitesse-light'. */
-    codeTheme?: string;
-    /**
-     * Additional rehype plugins injected after the core chain but before
-     * rehype-stringify. Use this for host-specific plugins like
-     * rehypeSourceLines (scroll-sync anchors).
-     */
-    extraRehypePlugins?: PluginEntry[];
-    /**
-     * Additional remark plugins injected after the core remark chain but
-     * before remark-rehype. Use for host-specific remark transformations.
-     */
-    extraRemarkPlugins?: PluginEntry[];
-    /** Enable side annotation syntax. Defaults to true. */
-    enableSideAnnotation?: boolean;
-    /** Enable math (KaTeX) rendering. Defaults to true. */
-    enableMath?: boolean;
-    /** Enable fenced markdown sandbox rendering. Defaults to true. */
-    enableMarkdownSandbox?: boolean;
-    /** Markdown sandbox configuration. */
-    markdownSandbox?: {
-        outerFenceTicks?: number;
-    };
-    /**
-     * Enable MDX rendering via @mdx-js/mdx evaluate().
-     * When true, the processor delegates to evaluate() + renderToStaticMarkup()
-     * instead of the unified pipeline. Defaults to false.
-     */
-    enableMdx?: boolean;
-    /**
-     * Additional or override React components for MDX rendering.
-     * Merged on top of the built-in defaults (Callout, CodeDemo).
-     * Only used when enableMdx is true.
-     */
-    mdxComponents?: MdxComponentMap;
-};
-/**
- * Create a fully configured processor (Gold Processor).
- *
- * When `enableMdx` is false (default), returns a unified Processor.
- * When `enableMdx` is true, returns an MDX-aware processor that delegates to
- * `@mdx-js/mdx` evaluate() + renderToStaticMarkup(). Both share the same
- * `process(source) → HTML string` contract.
- */
-declare function createOwoMarkProcessor(options?: OwoMarkProcessorOptions): OwoMarkProcessor;
-declare function getOwoMarkPlugins(options?: OwoMarkProcessorOptions): {
-    remarkPlugins: PluginEntry[];
-    rehypePlugins: PluginEntry[];
-};
-
-declare function Callout({ type, children }: {
-    type?: string;
-    children?: ReactNode;
-}): react.DetailedReactHTMLElement<{
-    className: string;
-    'data-callout-type': string;
-}, HTMLElement>;
-
-declare function CodeDemo({ title, language, code }: {
-    title?: string;
-    language?: string;
-    code: string;
-}): react.DetailedReactHTMLElement<{
-    className: string;
-    'data-code-demo': string;
-}, HTMLElement>;
-
-declare function Steps({ children }: {
-    children?: ReactNode;
-}): react.DetailedReactHTMLElement<{
-    className: string;
-}, HTMLElement>;
-declare function Step({ title, children }: {
-    title?: string;
-    children?: ReactNode;
-}): react.DetailedReactHTMLElement<{
-    className: string;
-}, HTMLElement>;
-
-declare function Tabs({ children }: {
-    children?: ReactNode;
-}): react.DetailedReactHTMLElement<{
-    className: string;
-}, HTMLElement>;
-declare function Tab({ label: _label, children }: {
-    label?: string;
-    children?: ReactNode;
-}): react.DetailedReactHTMLElement<react.HTMLAttributes<HTMLElement>, HTMLElement>;
-
-declare function FileTree({ children }: {
-    children?: ReactNode;
-}): react.DetailedReactHTMLElement<{
-    className: string;
-}, HTMLElement>;
-
-declare function Kbd({ children }: {
-    children?: ReactNode;
-}): react.DetailedReactHTMLElement<{
-    className: string;
-}, HTMLElement>;
-
-/**
- * Built-in MDX components shipped with owomark-view.
- *
- * These are the default components available when `enableMdx: true`.
- * Users can override any of these or add new ones via the `mdxComponents` option.
- */
-
-declare const DEFAULT_MDX_COMPONENTS: MdxComponentMap;
-
-declare const THEME_LIGHT_CLASS = "owo-theme-light";
-declare const THEME_DARK_CLASS = "owo-theme-dark";
-type OwoMarkThemeName = 'light' | 'dark' | string;
-declare function getThemeClassName(theme: OwoMarkThemeName): string;
-
-export { Callout, CodeDemo, DEFAULT_MDX_COMPONENTS, FileTree, Kbd, type MdxComponentMap, type OwoMarkProcessor, type OwoMarkProcessorOptions, type OwoMarkThemeName, type PluginEntry, type ProcessorMode, type SideAnnotationNode, Step, Steps, THEME_DARK_CLASS, THEME_LIGHT_CLASS, Tab, Tabs, createOwoMarkProcessor, getOwoMarkPlugins, getThemeClassName, rehypeMathDisplayFix, rehypeSideAnnotation, remarkConvertSoftBreaksToHardBreaks, remarkSideAnnotation };

package/dist/static.js

@@ -1,40 +0,0 @@
-import {
-  Callout,
-  CodeDemo,
-  DEFAULT_MDX_COMPONENTS,
-  FileTree,
-  Kbd,
-  Step,
-  Steps,
-  THEME_DARK_CLASS,
-  THEME_LIGHT_CLASS,
-  Tab,
-  Tabs,
-  createOwoMarkProcessor,
-  getOwoMarkPlugins,
-  getThemeClassName,
-  rehypeMathDisplayFix,
-  rehypeSideAnnotation,
-  remarkConvertSoftBreaksToHardBreaks,
-  remarkSideAnnotation
-} from "./chunk-DHRAXGIK.js";
-export {
-  Callout,
-  CodeDemo,
-  DEFAULT_MDX_COMPONENTS,
-  FileTree,
-  Kbd,
-  Step,
-  Steps,
-  THEME_DARK_CLASS,
-  THEME_LIGHT_CLASS,
-  Tab,
-  Tabs,
-  createOwoMarkProcessor,
-  getOwoMarkPlugins,
-  getThemeClassName,
-  rehypeMathDisplayFix,
-  rehypeSideAnnotation,
-  remarkConvertSoftBreaksToHardBreaks,
-  remarkSideAnnotation
-};

package/src/mdx-components/mdx-components.css

@@ -1,336 +0,0 @@
-/* @owomark/view built-in MDX component styles.
- * Import this in your app:  import '@owomark/view/mdx-components.css'
- * All classes are prefixed with `mdx-` to avoid collisions.
- * Colors reference --owo-* base tokens with hardcoded fallbacks for zero-config use. */
-
-/* --- Callout --- */
-
-.mdx-callout {
-  display: flex;
-  gap: 0.75rem;
-  padding: 0.875rem 1rem;
-  border-radius: 8px;
-  border: 1px solid;
-  margin-bottom: 1.25rem;
-}
-
-.mdx-callout-icon {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.5rem;
-  height: 1.5rem;
-  border-radius: 9999px;
-  font-weight: 700;
-  font-size: 0.8rem;
-  line-height: 1;
-}
-
-.mdx-callout-content > :first-child { margin-top: 0; }
-.mdx-callout-content > :last-child  { margin-bottom: 0; }
-
-.mdx-callout-info {
-  background-color: color-mix(in srgb, var(--owo-brand, #3b82f6) 6%, transparent);
-  border-color: color-mix(in srgb, var(--owo-brand, #3b82f6) 24%, transparent);
-}
-.mdx-callout-info .mdx-callout-icon { background-color: var(--owo-brand, #3b82f6); color: white; }
-
-.mdx-callout-warn {
-  background-color: color-mix(in srgb, var(--owo-warning, #f59e0b) 6%, transparent);
-  border-color: color-mix(in srgb, var(--owo-warning, #f59e0b) 24%, transparent);
-}
-.mdx-callout-warn .mdx-callout-icon { background-color: var(--owo-warning, #f59e0b); color: white; }
-
-.mdx-callout-error {
-  background-color: color-mix(in srgb, var(--owo-error, #ef4444) 6%, transparent);
-  border-color: color-mix(in srgb, var(--owo-error, #ef4444) 24%, transparent);
-}
-.mdx-callout-error .mdx-callout-icon { background-color: var(--owo-error, #ef4444); color: white; }
-
-.mdx-callout-success {
-  background-color: color-mix(in srgb, var(--owo-success, #22c55e) 6%, transparent);
-  border-color: color-mix(in srgb, var(--owo-success, #22c55e) 24%, transparent);
-}
-.mdx-callout-success .mdx-callout-icon { background-color: var(--owo-success, #22c55e); color: white; }
-
-/* --- CodeDemo --- */
-
-.mdx-code-demo { margin-bottom: 1.5rem; }
-.mdx-code-demo figcaption {
-  font-size: 0.85rem;
-  opacity: 0.7;
-  margin-bottom: 0.5rem;
-  font-weight: 500;
-}
-
-/* --- Steps --- */
-
-.mdx-steps { margin-bottom: 1.5rem; }
-
-.mdx-steps-item {
-  display: flex;
-  gap: 1rem;
-}
-
-.mdx-steps-indicator {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  flex-shrink: 0;
-}
-
-.mdx-steps-number {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.75rem;
-  height: 1.75rem;
-  border-radius: 9999px;
-  background-color: var(--owo-brand, #3b82f6);
-  color: white;
-  font-weight: 700;
-  font-size: 0.8rem;
-  line-height: 1;
-  flex-shrink: 0;
-}
-
-.mdx-steps-line {
-  width: 2px;
-  flex: 1;
-  background-color: var(--owo-border, #e2e8f0);
-  min-height: 1rem;
-}
-
-.mdx-steps-content {
-  flex: 1;
-  padding-bottom: 1.5rem;
-  min-width: 0;
-}
-
-.mdx-steps-item:last-child .mdx-steps-content { padding-bottom: 0; }
-
-.mdx-step-title {
-  font-size: 1rem;
-  font-weight: 600;
-  margin: 0 0 0.5rem;
-}
-
-.mdx-step-body > :first-child { margin-top: 0; }
-.mdx-step-body > :last-child  { margin-bottom: 0; }
-
-/* --- Tabs --- */
-
-.mdx-tabs {
-  margin-bottom: 1.5rem;
-  border: 1px solid var(--owo-border, #e2e8f0);
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.mdx-tabs-list {
-  display: flex;
-  border-bottom: 1px solid var(--owo-border, #e2e8f0);
-  background-color: var(--owo-surface-raised, #f8fafc);
-}
-
-.mdx-tabs-trigger {
-  padding: 0.5rem 1rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  cursor: pointer;
-  color: var(--owo-text-muted, #64748b);
-  border-bottom: 2px solid transparent;
-  margin-bottom: -1px;
-  transition: color 0.15s, border-color 0.15s;
-}
-
-.mdx-tabs-radio { display: none; }
-
-.mdx-tabs-trigger:has(.mdx-tabs-radio:checked) {
-  border-bottom-color: var(--owo-brand, #3b82f6);
-  color: var(--owo-brand, #3b82f6);
-}
-
-.mdx-tabs-panel {
-  display: none;
-  padding: 1rem;
-}
-
-.mdx-tabs-panel > :first-child { margin-top: 0; }
-.mdx-tabs-panel > :last-child  { margin-bottom: 0; }
-
-/* CSS-only tab switching via :has() */
-.mdx-tabs-list:has(.mdx-tabs-trigger:nth-child(1) .mdx-tabs-radio:checked) ~ .mdx-tabs-panel:nth-of-type(1),
-.mdx-tabs-list:has(.mdx-tabs-trigger:nth-child(2) .mdx-tabs-radio:checked) ~ .mdx-tabs-panel:nth-of-type(2),
-.mdx-tabs-list:has(.mdx-tabs-trigger:nth-child(3) .mdx-tabs-radio:checked) ~ .mdx-tabs-panel:nth-of-type(3),
-.mdx-tabs-list:has(.mdx-tabs-trigger:nth-child(4) .mdx-tabs-radio:checked) ~ .mdx-tabs-panel:nth-of-type(4),
-.mdx-tabs-list:has(.mdx-tabs-trigger:nth-child(5) .mdx-tabs-radio:checked) ~ .mdx-tabs-panel:nth-of-type(5) {
-  display: block;
-}
-
-/* --- FileTree --- */
-
-.mdx-file-tree {
-  font-family: var(--owo-font-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace);
-  font-size: 0.875rem;
-  background-color: var(--owo-surface-raised, #f8fafc);
-  border: 1px solid var(--owo-border, #e2e8f0);
-  border-radius: 8px;
-  padding: 0.75rem 0;
-  margin-bottom: 1.5rem;
-  overflow-x: auto;
-}
-
-.mdx-file-tree-entry {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.15rem 0.75rem;
-  line-height: 1.6;
-}
-
-.mdx-file-tree-icon { flex-shrink: 0; font-size: 0.85em; }
-.mdx-file-tree-dir .mdx-file-tree-name { font-weight: 600; }
-
-/* --- Kbd --- */
-
-.mdx-kbd {
-  display: inline-block;
-  padding: 0.1em 0.45em;
-  font-family: var(--owo-font-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace);
-  font-size: 0.85em;
-  line-height: 1.4;
-  color: var(--owo-text, #1e293b);
-  background-color: var(--owo-surface-raised, #f1f5f9);
-  border: 1px solid var(--owo-border-strong, #cbd5e1);
-  border-bottom-width: 2px;
-  border-radius: 4px;
-  box-shadow: 0 1px 0 var(--owo-border, #e2e8f0);
-  vertical-align: baseline;
-}
-
-/* --- Unregistered component fallback --- */
-
-[data-mdx-missing] {
-  padding: 0.5rem 1rem;
-  background-color: color-mix(in srgb, var(--owo-warning, #f59e0b) 8%, transparent);
-  border: 1px dashed color-mix(in srgb, var(--owo-warning, #f59e0b) 40%, transparent);
-  border-radius: 4px;
-  margin-bottom: 1rem;
-}
-
-[data-mdx-missing]::before {
-  content: "Missing component: " attr(data-mdx-missing);
-  display: block;
-  font-size: 0.75rem;
-  color: var(--owo-warning, #f59e0b);
-  font-weight: 600;
-  margin-bottom: 0.25rem;
-}
-
-/* --- Markdown Sandbox --- */
-
-.owo-markdown-sandbox {
-  margin: 1.5rem 0;
-  border: 1px solid color-mix(in srgb, var(--owo-border, #e2e8f0) 88%, white);
-  border-radius: 12px;
-  overflow: clip;
-  background:
-    linear-gradient(180deg, color-mix(in srgb, var(--owo-surface-raised, #f8fafc) 92%, white), #ffffff);
-  box-shadow: 0 10px 30px color-mix(in srgb, #0f172a 8%, transparent);
-}
-
-.owo-markdown-sandbox__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem;
-  padding: 0.85rem 1rem;
-  border-bottom: 1px solid color-mix(in srgb, var(--owo-border, #e2e8f0) 88%, white);
-  background: color-mix(in srgb, var(--owo-surface-raised, #f8fafc) 72%, white);
-  list-style: none;
-  cursor: default;
-}
-
-.owo-markdown-sandbox__details > .owo-markdown-sandbox__header::-webkit-details-marker {
-  display: none;
-}
-
-.owo-markdown-sandbox__title {
-  font-size: 0.95rem;
-  font-weight: 600;
-  color: var(--owo-text, #0f172a);
-}
-
-.owo-markdown-sandbox__status {
-  flex-shrink: 0;
-  padding: 0.2rem 0.55rem;
-  border-radius: 999px;
-  font-size: 0.72rem;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  color: var(--owo-brand, #2563eb);
-  background: color-mix(in srgb, var(--owo-brand, #2563eb) 10%, white);
-}
-
-.owo-markdown-sandbox__body {
-  isolation: isolate;
-  padding: 1.1rem 1.15rem;
-  color: var(--owo-text, #0f172a);
-  font-family: var(--owo-font-sans, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif);
-  line-height: 1.75;
-}
-
-.owo-markdown-sandbox__body :where(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, pre, table, figure) {
-  margin-block: 0 1rem;
-}
-
-.owo-markdown-sandbox__body :where(h1, h2, h3, h4, h5, h6) {
-  color: var(--owo-text, #0f172a);
-  line-height: 1.25;
-}
-
-.owo-markdown-sandbox__body :where(pre) {
-  overflow-x: auto;
-}
-
-.owo-markdown-sandbox__body :where(code, pre code) {
-  font-family: var(--owo-font-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace);
-}
-
-.owo-markdown-sandbox__source-panel {
-  border-top: 1px solid color-mix(in srgb, var(--owo-border, #e2e8f0) 88%, white);
-  background: color-mix(in srgb, var(--owo-surface-raised, #f8fafc) 55%, white);
-}
-
-.owo-markdown-sandbox__source-panel > summary {
-  cursor: pointer;
-  padding: 0.8rem 1rem;
-  font-size: 0.82rem;
-  font-weight: 600;
-  color: var(--owo-text-muted, #475569);
-}
-
-.owo-markdown-sandbox__source {
-  margin: 0;
-  padding: 0 1rem 1rem;
-  overflow-x: auto;
-  font-size: 0.88rem;
-}
-
-.owo-markdown-sandbox__source code {
-  font-family: var(--owo-font-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace);
-}
-
-.owo-markdown-sandbox--error .owo-markdown-sandbox__status {
-  color: var(--owo-error, #dc2626);
-  background: color-mix(in srgb, var(--owo-error, #dc2626) 10%, white);
-}
-
-.owo-markdown-sandbox__error-message {
-  margin: 0 0 0.85rem;
-  color: var(--owo-error, #b91c1c);
-  font-weight: 500;
-}