@nuucognition/ncm-ui 0.1.0-dev.1

package/dist/blocks/chart/index.js

@@ -0,0 +1,29 @@
+"use client";
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+// src/lib/utils.ts
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function ChartBlock({ block, className }) {
+  return /* @__PURE__ */ jsx(
+    "pre",
+    {
+      "data-ncm-block": block.id,
+      "data-ncm-stable": block.stableId,
+      "data-ncm-type": block.type,
+      "data-block-id": block.id,
+      "data-ncm-chart": "",
+      "data-ncm-chart-type": block.chartType ?? "unknown",
+      className: cn(
+        "overflow-x-auto rounded-lg border border-border bg-muted p-4 font-mono text-sm",
+        className
+      ),
+      children: /* @__PURE__ */ jsx("code", { children: block.content })
+    }
+  );
+}
+
+export { ChartBlock };

package/dist/blocks/code/index.d.ts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { CodeBlock as CodeBlock$1 } from '@nuucognition/ncm';
+import { a as BlockRendererProps } from '../../renderers-C5f41FCy.js';
+import 'react';
+
+type CodeBlockProps = BlockRendererProps<CodeBlock$1>;
+/**
+ * Code block renderer with built-in Shiki syntax highlighting.
+ *
+ * Highlights code by default using Shiki's web bundle (github-light/github-dark).
+ * Consumers can override with a custom renderer via NcmProvider config.code.renderer.
+ */
+declare function CodeBlock({ block, className }: CodeBlockProps): react_jsx_runtime.JSX.Element;
+
+export { CodeBlock, type CodeBlockProps };

package/dist/blocks/code/index.js

@@ -0,0 +1,163 @@
+"use client";
+import { createContext, useContext, useState, useCallback, useEffect, useMemo } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+// src/blocks/code/code.tsx
+var NcmContext = createContext(null);
+function useNcmConfig() {
+  return useContext(NcmContext) ?? {};
+}
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var highlighterPromise = import('shiki/bundle/web').then(async (shiki) => {
+  const highlighter = await shiki.createHighlighter({
+    themes: ["github-light", "github-dark"],
+    langs: Object.keys(shiki.bundledLanguages)
+  });
+  return highlighter;
+}).catch(() => null);
+function useIsDark() {
+  const [isDark, setIsDark] = useState(false);
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    const root = document.documentElement;
+    const update = () => setIsDark(root.classList.contains("dark"));
+    update();
+    const observer = new MutationObserver(update);
+    observer.observe(root, { attributes: true, attributeFilter: ["class"] });
+    return () => observer.disconnect();
+  }, []);
+  return isDark;
+}
+function DefaultShikiRenderer({
+  code,
+  language
+}) {
+  const isDark = useIsDark();
+  const [highlighter, setHighlighter] = useState(null);
+  const shikiTheme = isDark ? "github-dark" : "github-light";
+  useEffect(() => {
+    let active = true;
+    highlighterPromise.then((h) => {
+      if (active) setHighlighter(h);
+    });
+    return () => {
+      active = false;
+    };
+  }, []);
+  const tokens = useMemo(() => {
+    if (!highlighter) return null;
+    const loaded = highlighter.getLoadedLanguages();
+    const lang = language && loaded.includes(language) ? language : "text";
+    try {
+      return highlighter.codeToTokens(code, { lang, theme: shikiTheme }).tokens;
+    } catch {
+      return null;
+    }
+  }, [code, language, highlighter, shikiTheme]);
+  if (!tokens) {
+    return /* @__PURE__ */ jsx(Fragment, { children: code });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: tokens.map((line, lineIndex) => /* @__PURE__ */ jsx("span", { className: "block whitespace-pre", children: line.length === 0 ? " " : line.map((token, tokenIndex) => /* @__PURE__ */ jsx("span", { style: { color: token.color || "inherit" }, children: token.content }, tokenIndex)) }, lineIndex)) });
+}
+function CopyButton({ content }) {
+  const [copied, setCopied] = useState(false);
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(content);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch {
+      const textarea = document.createElement("textarea");
+      textarea.value = content;
+      document.body.appendChild(textarea);
+      textarea.select();
+      document.execCommand("copy");
+      document.body.removeChild(textarea);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    }
+  }, [content]);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: handleCopy,
+      "aria-label": copied ? "Copied!" : "Copy code",
+      "data-ncm-copy-button": "",
+      className: "absolute right-2 top-2 rounded-md bg-background/80 px-2 py-1 text-xs font-medium text-muted-foreground hover:bg-background hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring",
+      children: copied ? "Copied!" : "Copy"
+    }
+  );
+}
+function LineNumbers({ count }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      "data-ncm-line-numbers": "",
+      className: "select-none pr-4 text-right text-muted-foreground/60",
+      children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx("div", { children: i + 1 }, i + 1))
+    }
+  );
+}
+function CodeBlock({ block, className }) {
+  const config = useNcmConfig();
+  const { code: codeConfig } = config;
+  const lineCount = block.content.split("\n").length;
+  const languageLabel = block.language ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-ncm-code-language": "",
+      className: "absolute right-2 bottom-2 text-xs text-muted-foreground/60",
+      children: block.language
+    }
+  ) : null;
+  if (codeConfig?.renderer) {
+    const CustomRenderer = codeConfig.renderer;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "region",
+        "aria-label": block.language ? `Code block: ${block.language}` : "Code block",
+        "data-ncm-block": block.id,
+        "data-ncm-stable": block.stableId,
+        "data-ncm-type": block.type,
+        "data-block-id": block.id,
+        "data-ncm-language": block.language,
+        className: cn("relative", className),
+        children: [
+          codeConfig.copyButton !== false && /* @__PURE__ */ jsx(CopyButton, { content: block.content }),
+          /* @__PURE__ */ jsx(CustomRenderer, { code: block.content, language: block.language }),
+          languageLabel
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "region",
+      "aria-label": block.language ? `Code block: ${block.language}` : "Code block",
+      "data-ncm-block": block.id,
+      "data-ncm-stable": block.stableId,
+      "data-ncm-type": block.type,
+      "data-block-id": block.id,
+      "data-ncm-language": block.language,
+      className: cn("relative", className),
+      children: [
+        codeConfig?.copyButton !== false && /* @__PURE__ */ jsx(CopyButton, { content: block.content }),
+        /* @__PURE__ */ jsx("pre", { "data-ncm-code-pre": "", children: /* @__PURE__ */ jsxs("div", { className: "flex", children: [
+          codeConfig?.lineNumbers && /* @__PURE__ */ jsx(LineNumbers, { count: lineCount }),
+          /* @__PURE__ */ jsx("code", { "data-ncm-code": "", className: "flex-1", children: /* @__PURE__ */ jsx(DefaultShikiRenderer, { code: block.content, language: block.language }) })
+        ] }) }),
+        languageLabel
+      ]
+    }
+  );
+}
+
+export { CodeBlock };

package/dist/blocks/container/index.d.ts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ContainerBlock as ContainerBlock$1 } from '@nuucognition/ncm';
+import { a as BlockRendererProps } from '../../renderers-C5f41FCy.js';
+import 'react';
+
+type ContainerBlockProps = BlockRendererProps<ContainerBlock$1>;
+/**
+ * Generic container renderer — a `:::directive` fence that no promoter claimed.
+ *
+ * Renders the directive as a styled label (not raw `:::` syntax) above its
+ * verbatim inner content. Consumers that add directive-specific promoters
+ * (admonition, figure, tabs…) replace this by promoting upstream or overriding
+ * the `container` renderer key.
+ */
+declare function ContainerBlock({ block, className }: ContainerBlockProps): react_jsx_runtime.JSX.Element;
+
+export { ContainerBlock, type ContainerBlockProps };