@nuucognition/ncm-ui 0.1.1-beta.0 → 0.1.1-beta.1

package/dist/index.js

@@ -813,7 +813,8 @@ function ChartBlock({ block, className }) {
       "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",
+        // `overflow-y-hidden` pairs with `overflow-x-auto` on purpose — see the note in `lib/defaults.ts`.
+        "overflow-x-auto overflow-y-hidden rounded-lg border border-border bg-muted p-4 font-mono text-sm",
         className
       ),
       children: /* @__PURE__ */ jsx("code", { children: block.content })
@@ -993,7 +994,8 @@ function DataviewBlock({ block, className }) {
       "data-ncm-dataview": "",
       "data-ncm-query-type": block.queryType,
       className: cn(
-        "overflow-x-auto rounded-lg border border-border bg-muted p-4 font-mono text-sm",
+        // `overflow-y-hidden` pairs with `overflow-x-auto` on purpose — see the note in `lib/defaults.ts`.
+        "overflow-x-auto overflow-y-hidden rounded-lg border border-border bg-muted p-4 font-mono text-sm",
         className
       ),
       children: /* @__PURE__ */ jsx("code", { children: block.query })
@@ -1332,7 +1334,8 @@ function HtmlBlock({ block, className }) {
       "data-block-id": block.id,
       "data-ncm-html": "",
       className: cn(
-        "overflow-x-auto rounded-lg border border-border bg-muted p-4 font-mono text-sm",
+        // `overflow-y-hidden` pairs with `overflow-x-auto` on purpose — see the note in `lib/defaults.ts`.
+        "overflow-x-auto overflow-y-hidden rounded-lg border border-border bg-muted p-4 font-mono text-sm",
         className
       ),
       children: /* @__PURE__ */ jsx("code", { children: block.content })
@@ -1393,7 +1396,7 @@ function LatexDisplayBlock({ block, className }) {
         "data-ncm-type": block.type,
         "data-block-id": block.id,
         "data-ncm-latex-display": "",
-        className: cn("overflow-x-auto", className),
+        className: cn("overflow-x-auto overflow-y-hidden", className),
         dangerouslySetInnerHTML: { __html: html }
       }
     );
@@ -1408,7 +1411,7 @@ function LatexDisplayBlock({ block, className }) {
       "data-ncm-type": block.type,
       "data-block-id": block.id,
       "data-ncm-latex-display": "",
-      className: cn("overflow-x-auto rounded-lg border border-border bg-muted p-4 font-mono text-sm", className),
+      className: cn("overflow-x-auto overflow-y-hidden rounded-lg border border-border bg-muted p-4 font-mono text-sm", className),
       children: /* @__PURE__ */ jsx("code", { children: block.content })
     }
   );
@@ -1528,7 +1531,7 @@ function MathBlock({ block, className }) {
         "data-ncm-type": block.type,
         "data-block-id": block.id,
         "data-ncm-math": "",
-        className: cn("overflow-x-auto", className),
+        className: cn("overflow-x-auto overflow-y-hidden", className),
         dangerouslySetInnerHTML: { __html: html }
       }
     );
@@ -1544,7 +1547,8 @@ function MathBlock({ block, className }) {
       "data-block-id": block.id,
       "data-ncm-math": "",
       className: cn(
-        "overflow-x-auto rounded-lg border border-border bg-muted p-4 font-mono text-sm",
+        // `overflow-y-hidden` pairs with `overflow-x-auto` on purpose — see the note in `lib/defaults.ts`.
+        "overflow-x-auto overflow-y-hidden rounded-lg border border-border bg-muted p-4 font-mono text-sm",
         className
       ),
       children: /* @__PURE__ */ jsx("code", { children: block.content })
@@ -1562,7 +1566,8 @@ function MermaidBlock({ block, className }) {
       "data-ncm-mermaid": "",
       "data-ncm-diagram-type": block.diagramType,
       className: cn(
-        "overflow-x-auto rounded-lg border border-border bg-muted p-4 font-mono text-sm",
+        // `overflow-y-hidden` pairs with `overflow-x-auto` on purpose — see the note in `lib/defaults.ts`.
+        "overflow-x-auto overflow-y-hidden rounded-lg border border-border bg-muted p-4 font-mono text-sm",
         className
       ),
       children: /* @__PURE__ */ jsx("code", { children: block.content })
@@ -1623,7 +1628,7 @@ function TableBlock({ block, className }) {
       "data-ncm-type": block.type,
       "data-block-id": block.id,
       "data-ncm-table": "",
-      className: cn("w-full overflow-x-auto", className),
+      className: cn("w-full overflow-x-auto overflow-y-hidden", className),
       children: /* @__PURE__ */ jsxs("table", { role: "table", "data-ncm-table-element": "", children: [
         /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { "data-ncm-table-row": "", children: block.headers.map((header, index) => /* @__PURE__ */ jsx("th", { "data-ncm-table-header": "", children: /* @__PURE__ */ jsx(InlineContent, { content: header }) }, index)) }) }),
         /* @__PURE__ */ jsx("tbody", { children: block.rows.map((row, rowIndex) => {
@@ -1709,7 +1714,7 @@ function FallbackBlock({ block, className }) {
       "data-block-id": block.id,
       "data-ncm-fallback": "",
       className: cn(
-        "overflow-x-auto rounded-lg border border-border bg-muted p-4 font-mono text-sm",
+        "overflow-x-auto overflow-y-hidden rounded-lg border border-border bg-muted p-4 font-mono text-sm",
         className
       )
     },
@@ -1765,7 +1770,7 @@ function CustomCodeBlock({ block, className }) {
       "data-block-id": block.id,
       "data-ncm-custom-code": "",
       "data-ncm-language": block.language,
-      className: cn("overflow-x-auto", className),
+      className: cn("overflow-x-auto overflow-y-hidden", className),
       children: [
         /* @__PURE__ */ jsx("div", { className: "mb-2 text-xs font-medium text-muted-foreground", children: block.language }),
         /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { children: block.content }) })

package/dist/lib/defaults.js

@@ -22,7 +22,7 @@ function CustomCodeBlock({ block, className }) {
       "data-block-id": block.id,
       "data-ncm-custom-code": "",
       "data-ncm-language": block.language,
-      className: cn("overflow-x-auto", className),
+      className: cn("overflow-x-auto overflow-y-hidden", className),
       children: [
         /* @__PURE__ */ jsx("div", { className: "mb-2 text-xs font-medium text-muted-foreground", children: block.language }),
         /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { children: block.content }) })
@@ -843,7 +843,8 @@ function ChartBlock({ block, className }) {
       "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",
+        // `overflow-y-hidden` pairs with `overflow-x-auto` on purpose — see the note in `lib/defaults.ts`.
+        "overflow-x-auto overflow-y-hidden rounded-lg border border-border bg-muted p-4 font-mono text-sm",
         className
       ),
       children: /* @__PURE__ */ jsx("code", { children: block.content })
@@ -1023,7 +1024,8 @@ function DataviewBlock({ block, className }) {
       "data-ncm-dataview": "",
       "data-ncm-query-type": block.queryType,
       className: cn(
-        "overflow-x-auto rounded-lg border border-border bg-muted p-4 font-mono text-sm",
+        // `overflow-y-hidden` pairs with `overflow-x-auto` on purpose — see the note in `lib/defaults.ts`.
+        "overflow-x-auto overflow-y-hidden rounded-lg border border-border bg-muted p-4 font-mono text-sm",
         className
       ),
       children: /* @__PURE__ */ jsx("code", { children: block.query })
@@ -1362,7 +1364,8 @@ function HtmlBlock({ block, className }) {
       "data-block-id": block.id,
       "data-ncm-html": "",
       className: cn(
-        "overflow-x-auto rounded-lg border border-border bg-muted p-4 font-mono text-sm",
+        // `overflow-y-hidden` pairs with `overflow-x-auto` on purpose — see the note in `lib/defaults.ts`.
+        "overflow-x-auto overflow-y-hidden rounded-lg border border-border bg-muted p-4 font-mono text-sm",
         className
       ),
       children: /* @__PURE__ */ jsx("code", { children: block.content })
@@ -1400,7 +1403,7 @@ function LatexDisplayBlock({ block, className }) {
         "data-ncm-type": block.type,
         "data-block-id": block.id,
         "data-ncm-latex-display": "",
-        className: cn("overflow-x-auto", className),
+        className: cn("overflow-x-auto overflow-y-hidden", className),
         dangerouslySetInnerHTML: { __html: html }
       }
     );
@@ -1415,7 +1418,7 @@ function LatexDisplayBlock({ block, className }) {
       "data-ncm-type": block.type,
       "data-block-id": block.id,
       "data-ncm-latex-display": "",
-      className: cn("overflow-x-auto rounded-lg border border-border bg-muted p-4 font-mono text-sm", className),
+      className: cn("overflow-x-auto overflow-y-hidden rounded-lg border border-border bg-muted p-4 font-mono text-sm", className),
       children: /* @__PURE__ */ jsx("code", { children: block.content })
     }
   );
@@ -1535,7 +1538,7 @@ function MathBlock({ block, className }) {
         "data-ncm-type": block.type,
         "data-block-id": block.id,
         "data-ncm-math": "",
-        className: cn("overflow-x-auto", className),
+        className: cn("overflow-x-auto overflow-y-hidden", className),
         dangerouslySetInnerHTML: { __html: html }
       }
     );
@@ -1551,7 +1554,8 @@ function MathBlock({ block, className }) {
       "data-block-id": block.id,
       "data-ncm-math": "",
       className: cn(
-        "overflow-x-auto rounded-lg border border-border bg-muted p-4 font-mono text-sm",
+        // `overflow-y-hidden` pairs with `overflow-x-auto` on purpose — see the note in `lib/defaults.ts`.
+        "overflow-x-auto overflow-y-hidden rounded-lg border border-border bg-muted p-4 font-mono text-sm",
         className
       ),
       children: /* @__PURE__ */ jsx("code", { children: block.content })
@@ -1569,7 +1573,8 @@ function MermaidBlock({ block, className }) {
       "data-ncm-mermaid": "",
       "data-ncm-diagram-type": block.diagramType,
       className: cn(
-        "overflow-x-auto rounded-lg border border-border bg-muted p-4 font-mono text-sm",
+        // `overflow-y-hidden` pairs with `overflow-x-auto` on purpose — see the note in `lib/defaults.ts`.
+        "overflow-x-auto overflow-y-hidden rounded-lg border border-border bg-muted p-4 font-mono text-sm",
         className
       ),
       children: /* @__PURE__ */ jsx("code", { children: block.content })
@@ -1630,7 +1635,7 @@ function TableBlock({ block, className }) {
       "data-ncm-type": block.type,
       "data-block-id": block.id,
       "data-ncm-table": "",
-      className: cn("w-full overflow-x-auto", className),
+      className: cn("w-full overflow-x-auto overflow-y-hidden", className),
       children: /* @__PURE__ */ jsxs("table", { role: "table", "data-ncm-table-element": "", children: [
         /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { "data-ncm-table-row": "", children: block.headers.map((header, index) => /* @__PURE__ */ jsx("th", { "data-ncm-table-header": "", children: /* @__PURE__ */ jsx(InlineContent, { content: header }) }, index)) }) }),
         /* @__PURE__ */ jsx("tbody", { children: block.rows.map((row, rowIndex) => {
@@ -1716,7 +1721,7 @@ function FallbackBlock({ block, className }) {
       "data-block-id": block.id,
       "data-ncm-fallback": "",
       className: cn(
-        "overflow-x-auto rounded-lg border border-border bg-muted p-4 font-mono text-sm",
+        "overflow-x-auto overflow-y-hidden rounded-lg border border-border bg-muted p-4 font-mono text-sm",
         className
       )
     },

package/dist/styles/nuu.css

@@ -15,7 +15,7 @@
  * 1rem body at 1.65, headings 1.75 / 1.56 / 1.39 / 1.24 / 1.1em. Switching
  * view must not resize a single glyph. Since the flow-block rhythm pass, the
  * MARGINS are part of the same contract: the editor states this file's block
- * gaps (1rem between siblings, per-level rem heading margins, the 1.25rem /
+ * gaps (1rem between siblings, per-level rem heading margins, the 1.5rem /
  * 0.125rem list geometry) per element on its side. If one side of that pair
  * moves, move the other in the same change.
  *
@@ -105,13 +105,16 @@
 }
 
 /*
- * Callout (admonition) — minimalist: sharp corners, 1px hairline border, a
- * 2px colored left edge (the blockquote's own weight), tight padding. The
- * type supplies only colors, through the `--ncm-callout-*` hooks; a host
- * assigns them per `data-ncm-admonition-type` (Onyx does, from its palette
+ * Callout (admonition) — a quiet card: rounded `md` corners (the NUU chrome
+ * step, stated as radius × 0.8 so a host's `--radius` carries through), 1px
+ * hairline border, a 2px colored left edge (the blockquote's own weight),
+ * tight padding. Rounded since (Task) 581, superseding the sharp-corner line
+ * of the minimalist pass — everything else from that pass stands. The type
+ * supplies only colors, through the `--ncm-callout-*` hooks; a host assigns
+ * them per `data-ncm-admonition-type` (Onyx does, from its palette
  * families). Unset, every hook falls back to the neutral hairline card, so
  * a host with no callout stylesheet — and any type a host does not cover —
- * renders the same minimalist shell with no color.
+ * renders the same quiet shell with no color.
  *
  * These rules override the component's own rounded-card utilities
  * (`rounded-lg bg-card p-4`): this file is unlayered and Tailwind utilities
@@ -122,9 +125,18 @@
 [data-ncm-document].ncm-theme-nuu [data-ncm-admonition] {
   border: 1px solid var(--ncm-callout-border, var(--border));
   border-left: 2px solid var(--ncm-callout-edge, var(--border));
-  border-radius: 0;
+  border-radius: calc(var(--radius, 0.625rem) * 0.8);
   padding: 0.625rem 0.875rem;
   background-color: var(--ncm-callout-tint, transparent);
+  /*
+   * An unbroken word must stay inside the card. Hosts lay the title out as a
+   * flex row (glyph + text), and a flex item's min-content size is the whole
+   * unbreakable word — the text ran past the card edge. `anywhere`, not
+   * `break-word`: only `anywhere` lets the break point count toward the
+   * min-content size, which is what the flex layout measures. Inherited, so
+   * the title and every content paragraph get it. ((Task) 581)
+   */
+  overflow-wrap: anywhere;
 }
 
 /*
@@ -157,9 +169,14 @@
 }
 
 /* Lists */
+/*
+ * 1.5rem is the ONE marker-slot width all three list kinds share — disc,
+ * decimal, and the task checkbox (1em box + 0.5rem gap) — so the text column
+ * is identical across them at every depth.
+ */
 [data-ncm-document].ncm-theme-nuu [data-ncm-type="list_ordered"],
 [data-ncm-document].ncm-theme-nuu [data-ncm-type="list_unordered"] {
-  padding-left: 1.25rem;
+  padding-left: 1.5rem;
   color: var(--foreground);
   line-height: 1.65;
 }
@@ -182,7 +199,7 @@
 [data-ncm-document].ncm-theme-nuu [data-ncm-type="list_unordered"] ol,
 [data-ncm-document].ncm-theme-nuu [data-ncm-type="list_unordered"] ul {
   margin-top: 0.125rem;
-  padding-left: 1.25rem;
+  padding-left: 1.5rem;
 }
 
 [data-ncm-document].ncm-theme-nuu [data-ncm-type="list_ordered"] li::marker,
@@ -206,11 +223,14 @@
 /*
  * Task list — one spec with the editor's `ul[data-type="taskList"]` block in
  * `@nuucognition/nuu-editor` (`src/nuu-editor/nuu-editor.scss`): flush-left
- * rows 0.125rem apart, a 1em sharp-cornered checkbox drawn from theme tokens
- * (border-token box, foreground fill when checked, background-coloured check),
- * 0.5rem to the text, checked text dimmed to the muted tone with NO
- * strike-through, nested lists indented 1.5rem so they start at the text
- * column. If one side of that pair moves, move the other in the same change.
+ * rows 0.125rem apart, a 1em checkbox rounded 0.25rem (the nuu-ui Checkbox
+ * radius) drawn from theme tokens (border-token box, foreground fill when
+ * checked, background-coloured check), 0.5rem to the text — 1em + 0.5rem =
+ * the shared 1.5rem marker slot that lines task text up with disc and
+ * decimal text. Checked text dims to the muted tone with NO strike-through.
+ * A nested task list carries NO indent of its own: the checkbox slot IS the
+ * indent, the same 1.5rem step the other list kinds get from padding. If one
+ * side of that pair moves, move the other in the same change.
  *
  * The checkbox is drawn with `appearance: none` because the native control
  * neither themes nor matches the editor's; the input stays a real (disabled)
@@ -233,7 +253,9 @@
 }
 
 [data-ncm-document].ncm-theme-nuu [data-ncm-task-list] [data-ncm-list-nested] {
-  margin-left: 1.5rem;
+  /* No margin: the nested row's own checkbox slot (1em + 0.5rem) is the
+     1.5rem indent, the same step disc and decimal get from padding. */
+  margin-left: 0;
   margin-top: 0.125rem;
 }
 
@@ -252,7 +274,8 @@
   height: 1em;
   margin: 0.375rem 0 0;
   border: 1px solid var(--border);
-  border-radius: 0;
+  /* nuu-ui's Checkbox radius (rounded-[4px]). */
+  border-radius: 0.25rem;
   background-color: transparent;
   position: relative;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuucognition/ncm-ui",
-  "version": "0.1.1-beta.0",
+  "version": "0.1.1-beta.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",
@@ -18,8 +18,7 @@
     "*.css"
   ],
   "publishConfig": {
-    "access": "public",
-    "tag": "beta"
+    "access": "public"
   },
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -30,7 +29,7 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@nuucognition/mesh-core": "1.0.1-beta.1",
+    "@nuucognition/mesh-core": "1.0.1-beta.2",
     "clsx": "^2.1.1",
     "katex": "^0.16.21",
     "shiki": "^1.29.2",
@@ -46,8 +45,8 @@
     "tsup": "^8.5.1",
     "typescript": "^5.9.2",
     "vitest": "^2.1.9",
-    "@nuucognition/typescript-config": "0.0.0",
-    "@nuucognition/eslint-config": "0.0.0"
+    "@nuucognition/eslint-config": "0.0.0",
+    "@nuucognition/typescript-config": "0.0.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",