@nuucognition/ncm-ui 0.1.0-dev.1

package/dist/styles/paper.css

@@ -0,0 +1,332 @@
+/*
+ * NCM UI — Paper theme
+ *
+ * Editorial typography ladder matching @nuucognition/paper-ui.
+ * Single sans family (Inter) for everything except code, four-tone text
+ * ladder, generous whitespace, reading-optimized line lengths.
+ *
+ * Inherits the same NUU CSS variables; switches automatically with `.dark`.
+ */
+
+[data-ncm-document].ncm-theme-paper {
+  font-family: var(--font-sans);
+  font-size: 0.8125rem;
+  line-height: 1.8;
+  color: var(--muted-foreground);
+}
+
+[data-ncm-document].ncm-theme-paper > * + * {
+  margin-top: 1rem;
+}
+
+/* Headings — Inter (not Geist), medium weight */
+[data-ncm-document].ncm-theme-paper [data-ncm-type="header"] {
+  font-family: var(--font-sans);
+  color: var(--foreground);
+  scroll-margin-top: 5rem;
+  margin-bottom: 0;
+}
+
+[data-ncm-document].ncm-theme-paper [data-ncm-type="header"][data-ncm-level="1"] {
+  font-size: 1.625rem;
+  line-height: 1.25;
+  font-weight: 500;
+  margin-top: 0;
+}
+
+[data-ncm-document].ncm-theme-paper [data-ncm-type="header"][data-ncm-level="1"]:first-child {
+  margin-top: 0;
+}
+
+[data-ncm-document].ncm-theme-paper [data-ncm-type="header"][data-ncm-level="2"] {
+  font-size: 1.125rem;
+  line-height: 1.375;
+  font-weight: 500;
+  margin-top: 2.5rem;
+}
+
+[data-ncm-document].ncm-theme-paper [data-ncm-type="header"][data-ncm-level="3"] {
+  font-size: 0.9375rem;
+  line-height: 1.375;
+  font-weight: 400;
+  margin-top: 1.5rem;
+}
+
+[data-ncm-document].ncm-theme-paper [data-ncm-type="header"][data-ncm-level="4"] {
+  font-size: 0.6875rem;
+  font-weight: 400;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: color-mix(in srgb, var(--muted-foreground) 60%, transparent);
+  margin-top: 1rem;
+}
+
+[data-ncm-document].ncm-theme-paper [data-ncm-type="header"][data-ncm-level="5"] {
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
+  font-weight: 400;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: color-mix(in srgb, var(--muted-foreground) 60%, transparent);
+  margin-top: 1rem;
+}
+
+/* Paragraph — body color is muted-foreground */
+[data-ncm-document].ncm-theme-paper [data-ncm-type="paragraph"] {
+  color: var(--muted-foreground);
+  line-height: 1.8;
+}
+
+/* Blockquote */
+[data-ncm-document].ncm-theme-paper [data-ncm-type="blockquote"] {
+  border-left: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
+  padding-left: 1rem;
+  color: var(--muted-foreground);
+  font-style: italic;
+  line-height: 1.8;
+}
+
+[data-ncm-document].ncm-theme-paper [data-ncm-type="blockquote"] p + p {
+  margin-top: 0.5rem;
+}
+
+/* Lists */
+[data-ncm-document].ncm-theme-paper [data-ncm-type="list_ordered"],
+[data-ncm-document].ncm-theme-paper [data-ncm-type="list_unordered"] {
+  padding-left: 1.25rem;
+  color: var(--muted-foreground);
+  line-height: 1.8;
+}
+
+[data-ncm-document].ncm-theme-paper [data-ncm-type="list_ordered"]::marker,
+[data-ncm-document].ncm-theme-paper [data-ncm-type="list_unordered"]::marker,
+[data-ncm-document].ncm-theme-paper [data-ncm-type="list_ordered"] li::marker,
+[data-ncm-document].ncm-theme-paper [data-ncm-type="list_unordered"] li::marker {
+  color: color-mix(in srgb, var(--muted-foreground) 60%, transparent);
+}
+
+[data-ncm-document].ncm-theme-paper [data-ncm-type="list_ordered"] {
+  list-style-type: decimal;
+}
+
+[data-ncm-document].ncm-theme-paper [data-ncm-type="list_unordered"] {
+  list-style-type: disc;
+}
+
+[data-ncm-document].ncm-theme-paper [data-ncm-type="list_ordered"] li + li,
+[data-ncm-document].ncm-theme-paper [data-ncm-type="list_unordered"] li + li {
+  margin-top: 0.25rem;
+}
+
+[data-ncm-document].ncm-theme-paper [data-ncm-type="list_ordered"] ol,
+[data-ncm-document].ncm-theme-paper [data-ncm-type="list_ordered"] ul,
+[data-ncm-document].ncm-theme-paper [data-ncm-type="list_unordered"] ol,
+[data-ncm-document].ncm-theme-paper [data-ncm-type="list_unordered"] ul {
+  margin-top: 0.25rem;
+  padding-left: 1.25rem;
+}
+
+[data-ncm-document].ncm-theme-paper [data-ncm-type="list_ordered"] ol {
+  list-style-type: decimal;
+}
+
+[data-ncm-document].ncm-theme-paper [data-ncm-type="list_ordered"] ul,
+[data-ncm-document].ncm-theme-paper [data-ncm-type="list_unordered"] ul {
+  list-style-type: disc;
+}
+
+[data-ncm-document].ncm-theme-paper [data-ncm-type="list_unordered"] ol {
+  list-style-type: decimal;
+}
+
+/* Tables */
+[data-ncm-document].ncm-theme-paper [data-ncm-type="table"] {
+  width: 100%;
+  overflow-x: auto;
+}
+
+[data-ncm-document].ncm-theme-paper [data-ncm-type="table"] table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.75rem;
+  line-height: 1.5;
+}
+
+[data-ncm-document].ncm-theme-paper [data-ncm-type="table"] th {
+  border-bottom: 1px solid var(--border);
+  padding: 0.5rem 0.75rem;
+  text-align: left;
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
+  font-weight: 400;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: color-mix(in srgb, var(--muted-foreground) 60%, transparent);
+  background-color: transparent;
+}
+
+[data-ncm-document].ncm-theme-paper [data-ncm-type="table"] td {
+  border-bottom: 1px solid var(--border);
+  padding: 0.5rem 0.75rem;
+  text-align: left;
+  color: var(--muted-foreground);
+}
+
+/* Code (block) */
+[data-ncm-document].ncm-theme-paper [data-ncm-type="code"] {
+  position: relative;
+}
+
+[data-ncm-document].ncm-theme-paper [data-ncm-type="code"] pre {
+  overflow-x: auto;
+  border: 1px solid var(--border);
+  border-radius: var(--radius, 0.625rem);
+  padding: 1rem;
+  background-color: color-mix(in srgb, var(--muted) 50%, transparent);
+  color: var(--foreground);
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  line-height: 1.6;
+}
+
+/* Inline code */
+[data-ncm-document].ncm-theme-paper [data-ncm-token="code"] {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  padding: 0.0625rem 0.25rem;
+  border: 1px solid var(--border);
+  border-radius: 0.25rem;
+  background-color: color-mix(in srgb, var(--muted) 50%, transparent);
+  color: var(--foreground);
+}
+
+/* Links */
+[data-ncm-document].ncm-theme-paper [data-ncm-token="link"],
+[data-ncm-document].ncm-theme-paper [data-ncm-token="wiki_link"][data-ncm-wikilink-status="resolved"],
+[data-ncm-document].ncm-theme-paper [data-ncm-token="wiki_embed"]:not([data-ncm-wikiembed-status]) {
+  color: var(--foreground);
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 3px;
+  font-weight: 400;
+}
+
+[data-ncm-document].ncm-theme-paper [data-ncm-token="wiki_link"][data-ncm-wikilink-status="missing"],
+[data-ncm-document].ncm-theme-paper [data-ncm-token="wiki_embed"][data-ncm-wikiembed-status="missing"] {
+  color: color-mix(in srgb, var(--muted-foreground) 60%, transparent);
+  text-decoration: underline dashed;
+  text-underline-offset: 3px;
+}
+
+[data-ncm-document].ncm-theme-paper [data-ncm-token="wiki_link"][data-ncm-wikilink-status="ambiguous"],
+[data-ncm-document].ncm-theme-paper [data-ncm-token="wiki_embed"][data-ncm-wikiembed-status="ambiguous"] {
+  color: var(--fire-text, var(--destructive));
+}
+
+/* Horizontal rule */
+[data-ncm-document].ncm-theme-paper [data-ncm-type="horizontal_rule"] {
+  border: 0;
+  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
+  margin-top: 2.5rem;
+  margin-bottom: 2.5rem;
+}
+
+/* Embeddings */
+[data-ncm-document].ncm-theme-paper [data-ncm-type="embedding"] img,
+[data-ncm-document].ncm-theme-paper [data-ncm-type="embedding"] video {
+  max-width: 100%;
+  border-radius: var(--radius, 0.625rem);
+}
+
+[data-ncm-document].ncm-theme-paper [data-ncm-type="embedding"] figcaption {
+  margin-top: 0.5rem;
+  text-align: left;
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: color-mix(in srgb, var(--muted-foreground) 60%, transparent);
+}
+
+/* LaTeX display */
+[data-ncm-document].ncm-theme-paper [data-ncm-type="latex_display"] {
+  overflow-x: auto;
+  color: var(--foreground);
+}
+
+/* Custom code fallback */
+[data-ncm-document].ncm-theme-paper [data-ncm-type="custom_code"] {
+  border: 1px dashed var(--border);
+  border-radius: var(--radius, 0.625rem);
+  padding: 1rem;
+  background-color: color-mix(in srgb, var(--muted) 50%, transparent);
+  color: var(--foreground);
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+}
+
+/* Inline references — ^[ref: …] (citation, [1]) and ^[footnote: …] (¹) */
+[data-ncm-document].ncm-theme-paper [data-ncm-token="reference"],
+[data-ncm-document].ncm-theme-paper [data-ncm-token="footnote"] {
+  position: relative;
+  white-space: nowrap;
+}
+
+[data-ncm-document].ncm-theme-paper [data-ncm-ref-marker] {
+  cursor: pointer;
+  color: var(--brand, var(--primary));
+  font-weight: 500;
+  border-radius: 0.1875rem;
+  outline: none;
+}
+
+[data-ncm-document].ncm-theme-paper [data-ncm-token="reference"] [data-ncm-ref-marker] {
+  font-size: 0.85em;
+  padding: 0 0.0625rem;
+}
+
+[data-ncm-document].ncm-theme-paper sup[data-ncm-ref-marker] {
+  font-size: 0.7em;
+  line-height: 0;
+  padding-left: 0.0625rem;
+}
+
+[data-ncm-document].ncm-theme-paper [data-ncm-ref-marker]:hover,
+[data-ncm-document].ncm-theme-paper [data-ncm-ref-marker]:focus-visible {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+/* Popover — content revealed on marker hover/focus */
+[data-ncm-document].ncm-theme-paper [data-ncm-ref-popover] {
+  position: absolute;
+  left: 0;
+  top: 1.6em;
+  z-index: 20;
+  width: max-content;
+  max-width: min(22rem, 80vw);
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius, 0.625rem);
+  background: var(--popover, var(--background, var(--muted)));
+  color: var(--popover-foreground, var(--foreground));
+  box-shadow: 0 4px 14px rgb(0 0 0 / 0.1);
+  font-family: var(--font-sans);
+  font-size: calc(0.8125rem * var(--surf-reading-scale, 1));
+  font-weight: 400;
+  line-height: 1.55;
+  white-space: normal;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.12s ease, visibility 0.12s ease;
+  pointer-events: none;
+}
+
+[data-ncm-document].ncm-theme-paper [data-ncm-token="reference"]:hover [data-ncm-ref-popover],
+[data-ncm-document].ncm-theme-paper [data-ncm-token="reference"]:focus-within [data-ncm-ref-popover],
+[data-ncm-document].ncm-theme-paper [data-ncm-token="footnote"]:hover [data-ncm-ref-popover],
+[data-ncm-document].ncm-theme-paper [data-ncm-token="footnote"]:focus-within [data-ncm-ref-popover] {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+}

package/dist/types/index.d.ts

@@ -0,0 +1,4 @@
+export { B as BlockRenderer, a as BlockRendererProps, b as BlockRendererRegistry, C as CompleteBlockRendererRegistry, E as EmbeddingRendererProps, c as EmbeddingRendererRegistry, K as KeyedBlockType } from '../renderers-C5f41FCy.js';
+export { B as BoldToken, C as CodeToken, I as ImageToken, a as InlineRefToken, b as InlineToken, c as ItalicToken, L as LatexToken, d as LinkToken, S as StrikethroughToken, T as TextToken, W as WikiEmbedToken, e as WikiLinkToken } from '../inline-DwUYUmk4.js';
+import 'react';
+import '@nuucognition/ncm';

package/dist/types/index.js

@@ -0,0 +1,2 @@
+"use client";
+

package/dist/use-ncm-config-D0doMYTH.d.ts

@@ -0,0 +1,114 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentType, ReactNode } from 'react';
+import { MeshResolveLinkResult, MeshHydrationContext } from '@nuucognition/mesh-core';
+import { EmbedType } from '@nuucognition/ncm';
+import { c as EmbeddingRendererRegistry, b as BlockRendererRegistry } from './renderers-C5f41FCy.js';
+
+/**
+ * Configuration for inline content rendering
+ */
+interface InlineConfig {
+    onLinkClick?: (href: string, event: React.MouseEvent) => void;
+    onWikiLinkClick?: (target: string, result: MeshResolveLinkResult, event: React.MouseEvent) => void;
+    resolveWikiLinkHref?: (target: string, result: MeshResolveLinkResult) => string | null;
+    resolveAssetPath?: (path: string) => string;
+    customLatexRenderer?: ComponentType<{
+        content: string;
+        display?: boolean;
+    }>;
+    /**
+     * Show a hover/focus popover with a reference's content for inline references
+     * (`^[ref: …]` / `^[footnote: …]`). Defaults to `true`; set `false` to render
+     * bare markers (e.g. when the host surfaces the content elsewhere).
+     */
+    referencePopover?: boolean;
+}
+/**
+ * Configuration for embedding rendering
+ */
+interface EmbeddingsConfig {
+    resolveUrl?: (target: string, embedType: EmbedType) => string;
+    renderers?: EmbeddingRendererRegistry;
+    imageClassName?: string;
+    videoClassName?: string;
+    audioClassName?: string;
+}
+/**
+ * Code rendering configuration
+ */
+interface CodeConfig {
+    renderer?: ComponentType<{
+        code: string;
+        language?: string;
+        className?: string;
+    }>;
+    lineNumbers?: boolean;
+    copyButton?: boolean;
+}
+/**
+ * Reading-experience configuration applied at the inline-renderer leaf.
+ * Currently exposes a "bionic" reading mode that bolds the first portion of
+ * each word; only plain text tokens are transformed — code, latex, links,
+ * and embeds pass through unchanged.
+ */
+interface ReadingConfig {
+    /** When true, render plain text with first-half-of-word bolding. */
+    bionic?: boolean;
+    /** Fraction of each word to bold (clamped to (0, 1]); defaults to 0.5. */
+    bionicRatio?: number;
+    /**
+     * When true, render the document with the OpenDyslexic3 typeface — the
+     * latest refined letterforms of the OpenDyslexic family, designed for
+     * dyslexic readers (weighted letter bottoms, distinctive shapes that
+     * resist mirror-letter confusion). The font files ship with this package
+     * — @font-face declarations live in `./styles/nuu.css`, so importing
+     * that stylesheet is enough.
+     */
+    dyslexicFont?: boolean;
+    /**
+     * When true, wrap every plain-text word in `<span data-ncm-beeline-word>`
+     * so a host-side colorize pass (e.g. `useBeelineColorize` in Surf) can
+     * paint a per-line color gradient across the body text — the BeeLine
+     * Reader trick. The NCM layer only marks word boundaries; color
+     * assignment is the host's responsibility because the palette (and the
+     * per-line direction flip) depends on layout that only exists after
+     * mount.
+     */
+    beeline?: boolean;
+}
+/**
+ * Main NCM configuration interface
+ *
+ * Theming and typography are owned by stylesheets (`@nuucognition/ncm-ui/styles/nuu.css`,
+ * `.../paper.css`) — selected via the `theme` prop on `NcmDocument`. The host
+ * controls light/dark via the `.dark` class on the document root.
+ */
+interface NcmConfig {
+    renderers?: BlockRendererRegistry;
+    inline?: InlineConfig;
+    embeddings?: EmbeddingsConfig;
+    code?: CodeConfig;
+    reading?: ReadingConfig;
+    /** Optional Mesh hydration context for Obsidian-style wikilinks/embeds */
+    mesh?: MeshHydrationContext;
+    /** Additional class name for the document container */
+    className?: string;
+}
+declare function useNcmConfig(): NcmConfig;
+interface NcmProviderProps {
+    config?: NcmConfig;
+    children: ReactNode;
+}
+/**
+ * Provider component for NCM configuration.
+ *
+ * @example
+ * ```tsx
+ * <NcmProvider config={{ mesh: meshContext, code: { lineNumbers: true } }}>
+ *   <NcmDocument blocks={blocks} theme="paper" />
+ * </NcmProvider>
+ * ```
+ */
+declare function NcmProvider({ config, children }: NcmProviderProps): react_jsx_runtime.JSX.Element;
+
+export { type CodeConfig as C, type EmbeddingsConfig as E, type InlineConfig as I, type NcmConfig as N, NcmProvider as a, type NcmProviderProps as b, useNcmConfig as u };

package/package.json

@@ -0,0 +1,99 @@
+{
+  "name": "@nuucognition/ncm-ui",
+  "version": "0.1.0-dev.1",
+  "description": "React renderers for NUU Cognition Markdown (NCM) blocks — a component library that renders parsed NCM Blocks to accessible, themeable markup.",
+  "type": "module",
+  "license": "MIT",
+  "keywords": [
+    "ncm",
+    "markdown",
+    "react",
+    "renderer",
+    "ui",
+    "katex",
+    "shiki",
+    "nuucognition"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "dependencies": {
+    "@nuucognition/mesh-core": "^1.0.0",
+    "clsx": "^2.1.1",
+    "katex": "^0.16.21",
+    "shiki": "^1.29.2",
+    "tailwind-merge": "^3.3.1",
+    "@nuucognition/ncm": "0.1.0-dev.2"
+  },
+  "devDependencies": {
+    "@types/katex": "^0.16.7",
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
+    "eslint": "^9.32.0",
+    "jsdom": "^26.1.0",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.2",
+    "vitest": "^2.1.9",
+    "@nuucognition/typescript-config": "0.0.0",
+    "@nuucognition/eslint-config": "0.0.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles/nuu.css": "./dist/styles/nuu.css",
+    "./styles/paper.css": "./dist/styles/paper.css",
+    "./components/*": {
+      "types": "./dist/components/*.d.ts",
+      "import": "./dist/components/*.js"
+    },
+    "./blocks/*": {
+      "types": "./dist/blocks/*/index.d.ts",
+      "import": "./dist/blocks/*/index.js"
+    },
+    "./inline": {
+      "types": "./dist/inline/index.d.ts",
+      "import": "./dist/inline/index.js"
+    },
+    "./context": {
+      "types": "./dist/context/index.d.ts",
+      "import": "./dist/context/index.js"
+    },
+    "./hooks/*": {
+      "types": "./dist/hooks/*.d.ts",
+      "import": "./dist/hooks/*.js"
+    },
+    "./lib/*": {
+      "types": "./dist/lib/*.d.ts",
+      "import": "./dist/lib/*.js"
+    },
+    "./types": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/types/index.js"
+    }
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint .",
+    "pretest": "pnpm --filter @nuucognition/ncm build",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  }
+}