react-blockkit 0.1.0

package/docs/slack-style-baseline.md

@@ -0,0 +1,260 @@
+# react-blockkit Slack Builder style baseline
+
+Observed July 20, 2026 in the authenticated
+[Block Kit Builder](https://app.slack.com/block-kit-builder/) desktop message
+preview. The fixture contained sections, section image accessories, dividers,
+mrkdwn, and action buttons.
+
+These are measurements for `react-blockkit`, not estimates.
+
+## Message content
+
+| Target | Light | Dark |
+| --- | --- | --- |
+| Body font | `Slack-Lato, Slack-Fractions, appleLogo, sans-serif` | same |
+| Body size / weight | `15px` / `400` | same |
+| Body line height | `22.0002px` | same |
+| Body color | `rgb(29, 28, 29)` | `rgb(209, 210, 211)` |
+| Renderer width in Builder fixture | `580px` | `580px` |
+
+The renderer root itself is transparent inside Slack's message preview card.
+
+## Block geometry
+
+| Target | Computed values |
+| --- | --- |
+| Section | `display:flex`; `margin: 0 0 4px`; no padding or border |
+| Divider | `height:1px`; `border-bottom:1px solid`; `margin:4px 0 8px` |
+| Actions | `display:flex`; `margin:0 0 8px`; no padding |
+| Section accessory wrapper | `margin:0 0 4px 8px`; width `92px` |
+| Section image | `88px × 88px`; radius `8px`; internal inline margin `4px` |
+
+## Outline button
+
+| Property | Light | Dark |
+| --- | --- | --- |
+| Height | `28px` | `28px` |
+| Font | `13px`, weight `700` | same |
+| Padding | `0 8px 1px` | same |
+| Radius | `4px` | `4px` |
+| Background | `rgb(255, 255, 255)` | `rgb(26, 29, 33)` |
+| Foreground | `rgb(29, 28, 29)` | `rgb(248, 248, 248)` |
+| Border | `rgba(94, 93, 96, 0.45)` | `rgba(121, 124, 129, 0.5)` |
+
+## Builder design tokens
+
+Relevant computed CSS custom properties:
+
+| Token | Light | Dark |
+| --- | --- | --- |
+| `--dt_color-content-pry` | `#1d1c1d` | `#f8f8f8` |
+| `--dt_color-content-sec` | `#454447` | `#b9babd` |
+| `--dt_color-content-hgl-1` | `#1264a3` | `#2ba5ce` |
+| `--dt_color-ctr-pry` | `#fff` | `#212428` |
+| `--dt_color-ctr-sec` | `#f8f8f8` | `#212428` |
+| `--dt_color-otl-sec` | `#5e5d6073` | `#797c8180` |
+| `--dt_static_radius-xlarge` | `12px` | `12px` |
+| `--dt_static_type-size-caption` | `13px` | `13px` |
+| `--dt_static_type-weight-bold` | `700` | `700` |
+
+## DOM landmarks
+
+The Builder's preview structure at this point was:
+
+```text
+.p-bkb_preview__message
+  .p-bkb_preview__app_icon
+  .p-bkb_preview__content
+    .p-bkb_preview__app
+    .p-block_kit_renderer
+      .p-block_kit_renderer__block_wrapper
+        .p-section_block | .p-divider_block | .p-actions_block
+```
+
+Slack's generated class names are observation landmarks only. The package uses
+semantic StyleX tokens and does not copy those names.
+
+## Charts, tables, and spacing (observed July 21, 2026)
+
+Harvested from the authenticated Builder desktop message preview in Chrome 150
+at renderer widths 380px, 580px, and 900px (900px forced with a CSS override
+on the Builder preview column; Slack's chart component reflows to whatever
+container it is given, so the responsive behavior is still Slack's own).
+Fixtures: pie charts with 2/5/12 segments, bar/line/area charts with 1/3/6
+series over six categories, `table` with alignment and wrap settings,
+`data_table` with pagination, a header→rich_text→table→section→divider→
+section→chart→context spacing sequence, header levels 1–4, rich-text lists,
+quote, preformatted, and context. 100 captures total (50 per theme). All
+values below are computed-style observations unless marked inferred.
+
+### data_visualization card
+
+| Target | Light | Dark |
+| --- | --- | --- |
+| Card border | `1px solid rgba(94, 93, 96, 0.13)` | `1px solid rgba(121, 124, 129, 0.3)` |
+| Card radius | `12px` | same |
+| Card background | `rgb(255, 255, 255)` | `rgb(26, 29, 33)` |
+| Card width rule | `clamp(400px, container, 624px)`; horizontal scroll below 400 | same |
+| Content padding / layout | `12px` all sides; flex column; `gap: 8px` | same |
+| Title | `h3`, `18px/24px`, weight `900`, body font | same, `rgb(248, 248, 248)` |
+| Block margin (scroll wrapper) | `8px 0` | same |
+
+### Chart plot geometry (SVG, no viewBox — redrawn per width)
+
+| Target | Observed |
+| --- | --- |
+| Drawing tech | Inline SVG, absolute pixel coordinates, `width = card − 26`, `height: 360` fixed |
+| Responsiveness | Reflow: coordinates recomputed per width; tick count and legend unchanged at 380/580/900; no label rotation or truncation with short labels |
+| Plot x-range | `[74, svgWidth]` (74px left gutter for y ticks + y label) |
+| Plot y-range | `[9, 334]`; grid lines drawn at `round(y) + 0.5` |
+| Gridlines | Horizontal only, `#5e5d6021` light / `#797c814d` dark, from `x=74` to `svgWidth` |
+| Y ticks | ~5 "nice" ticks (0/20/40/60/80 for max 83); labels right-anchored at `x=66`, vertically centered |
+| X ticks | Bar charts: one per category at band centers of `[74, svgWidth]`. Line/area charts: at the point positions themselves. Baseline `y=351`; anchor middle |
+| Tick text | `13px`, `Lato, Slack-Lato, appleLogo, sans-serif`, fill `#5e5d60` light / `#9a9b9e` dark |
+| X axis label | Below ticks: `text-align: center`, `13px` weight `700`, content color, `padding: 8px 0 0 74px`. Cartesian charts always reserve this strip (8px tall when `x_label` is absent) |
+| Y axis label | Absolute strip `left: 0, top: 8, width: 18px, height: 326px`, flex-centered, text rotated to read bottom-up, `13px` weight `700` |
+| Bars | Rounded top corners `4px`; flat bottom at `y=334`; grouped per category |
+| Bar group padding | Outer margin per band: `12.4px` (1 series), `9.2px` (3), `6px` (6) of an 80px band; gap between bars `= 0.1 × bar width`. Interpolation for other counts is inferred: `outer = band × clamp(0.175 − 0.02 × series, 0.075, 0.155)` |
+| Lines | `stroke-width: 2`, `stroke-linejoin: bevel`, no fill; smooth cubic curve with zeroed end tangents (exact spline formula not identified — see open questions); points span `[74, svgWidth − 13]` |
+| Areas | Same curve closed to the baseline; fill is a per-series pastel tint at `fill-opacity: 0.7`, plus the 2px stroke on top |
+| Pie | Center `(svgWidth/2, 180)`, radius `144`; slices clockwise from 12 o'clock in data order; slice stroke `2px` in card background color, `stroke-linejoin: round`; no data labels |
+| Legend | Below plot; flex, wrap, `justify-content: center`, `gap: 8px`, `padding: 8px 0 0 74px` (cartesian) / `8px 0 0 0` (pie) |
+| Legend item | Swatch `10px × 10px`, fully rounded; label `13px/18px`; swatch–label gap `8px`; 12 segments wrap to 2 rows at 580px |
+
+### Chart series palette (fill/stroke by series index)
+
+| Index | Light | Dark | Area tint light | Area tint dark |
+| --- | --- | --- | --- | --- |
+| 1 | `rgb(233, 104, 37)` | `rgb(213, 106, 55)` | `rgb(255, 237, 229)` | `rgb(56, 16, 0)` |
+| 2 | `rgb(32, 162, 113)` | `rgb(37, 155, 105)` | `rgb(227, 255, 243)` | `rgb(5, 36, 27)` |
+| 3 | `rgb(196, 116, 211)` | `rgb(178, 110, 195)` | `rgb(249, 237, 255)` | `rgb(32, 2, 33)` |
+| 4 | `rgb(14, 157, 211)` | `rgb(22, 153, 202)` | `rgb(227, 248, 255)` | `rgb(0, 26, 45)` |
+| 5 | `rgb(239, 62, 117)` | `rgb(217, 76, 117)` | `rgb(255, 232, 239)` | `rgb(48, 0, 5)` |
+| 6 | `rgb(72, 100, 210)` | `rgb(77, 101, 197)` | `rgb(240, 243, 252)` | `rgb(4, 11, 61)` |
+| 7 | `rgb(200, 70, 0)` | `rgb(228, 160, 127)` | not observed | not observed |
+| 8 | `rgb(14, 103, 77)` | `rgb(141, 210, 181)` | not observed | not observed |
+| 9 | `rgb(97, 31, 105)` | `rgb(216, 186, 225)` | not observed | not observed |
+| 10 | `rgb(0, 113, 164)` | `rgb(88, 189, 222)` | not observed | not observed |
+| 11 | `rgb(158, 11, 46)` | `rgb(230, 167, 186)` | not observed | not observed |
+| 12 | `rgb(40, 64, 169)` | `rgb(137, 155, 220)` | not observed | not observed |
+
+Area tints 7–12 were not observable (max 6 series captured); the renderer
+falls back to the stroke color at low opacity for those indices (inferred).
+
+### table block
+
+| Target | Light | Dark |
+| --- | --- | --- |
+| Table sizing | Auto layout, content width (not stretched); horizontal scroll wrapper when overflowing | same |
+| Table vertical padding | `4px 0` on the table box | same |
+| Grid lines | Every cell `border-right` + `border-bottom`; header adds `border-top`; first column adds `border-left`; all `1px solid rgba(94, 93, 96, 0.13)` | `rgba(121, 124, 129, 0.3)` |
+| Cell padding | `2px 12px 0` with cell height `28px` acting as a min-height (single line renders 28px tall; wrapped content grows to `2px + N × 22px + 1px`) | same |
+| Cell font | `15px/22px`; header weight `700`, body `400` | same |
+| Header background | none (transparent — no fill) | same |
+| Row striping | none | same |
+| Alignment | `column_settings[].align` maps to `text-align` | same |
+| Wrapping | default `white-space: nowrap`; `is_wrapped: true` → `normal` (no min-width) | same |
+| Corner radius | none | same |
+
+### data_table block
+
+| Target | Light | Dark |
+| --- | --- | --- |
+| Outer margin | `4px 0` | same |
+| Header bar | flex, `gap: 8px`, `padding: 8px 4px`; title `15px` weight `900` | same |
+| Filter input | `28px` tall, radius `8px`, border `rgba(94, 93, 96, 0.45)`, background `#fff`, `13px`, ~`188px` wide, search icon | border `rgba(121, 124, 129, 0.5)`, bg `rgb(26, 29, 33)` |
+| Icon buttons | `28px × 28px`, radius `8px`, border same as filter input, transparent bg | same |
+| Grid container | radius `12px`, background `rgba(29, 28, 29, 0.06)`, `padding: 0 4px` | `rgba(248, 248, 248, 0.06)` |
+| Header row | `36px` tall, transparent on container band; cells `13px/18px` weight `700`, color `rgb(69, 68, 71)`; sort buttons `padding: 0 12px`, radius `8px` | color `rgb(185, 186, 189)` |
+| Body rows | `48px` tall; cells on `#fff` card | `rgb(26, 29, 33)` |
+| Body row card | first row top corners / last row bottom corners radius `8px`; rows separated by `1px solid rgba(94, 93, 96, 0.45)` top borders | `rgba(121, 124, 129, 0.5)` |
+| Pagination | inside container: chevron buttons `20px`, radius `8px`; page buttons `20px`, radius `4px`, `padding: 0 6px`, `13px`; active page `background: rgb(0, 122, 90)`, white text; inactive `rgba(29, 28, 29, 0.7)` | inactive `rgba(232, 232, 232, 0.7)` |
+| Unpaginated | a `4px` strip remains under the last row when no pagination renders (container `136px` for a header plus two rows) | same |
+
+### Inter-block spacing rhythm
+
+The Builder separates consecutive block wrappers by exactly `4px` (its drag
+wrapper applies `padding: 4px 0; margin: -4px 0`, which the renderer already
+mirrors via the shared block frame). On top of that rhythm each block type
+carries its own margins:
+
+| Block | Margin (within wrapper) |
+| --- | --- |
+| header | `15px 0 4px`; first block in payload: `4px 0 4px` |
+| rich_text | `0` |
+| table | `0` (the `4px 0` lives on the table box) |
+| section | `8px 0 4px` (first block: top `0`, per earlier baseline) |
+| divider | `4px 0 8px` |
+| data_visualization | `8px 0 8px` |
+| data_table | `4px 0 4px` |
+| context | `4px 0 4px` |
+
+### header block levels
+
+| Level | Element | Font | Weight |
+| --- | --- | --- | --- |
+| none (default) | `h2` (flat scale) | `15px/22px` | `900` |
+| 1 | `h1` | `18px/24px` | `900` |
+| 2 | `h2` | `15px/22px` | `900` |
+| 3 | `h3` | `15px/22px` | `700` |
+| 4 | `h4` | `15px/22px` | `700` |
+
+### Rich text details
+
+| Target | Light | Dark |
+| --- | --- | --- |
+| Bullet list | `ul` has no padding; `li` margin-left `28px`; bullets are "Slack v2" icon-font glyphs in an inline-block `::before` (`22px × 15px`, `margin: 0 6px 0 -28px`); measured glyphs: `6.5px` disc, `7.5px` ring, `7px` square, cycling by depth. The renderer reproduces them with background gradients | same |
+| Ordered list | `li` margin-left `20px` + padding-left `8px`; native markers decimal/lower-alpha/lower-roman by depth | same |
+| Adjacent lists | no vertical gap between sibling lists | same |
+| Quote | `padding-left: 16px`, margin `4px 0`; `::before` bar `4px` wide, full height, radius `8px`, background `rgb(221, 221, 221)` | bar `rgb(185, 186, 189)` |
+| Preformatted | `padding: 8px`, radius `4px`, border `1px solid rgba(29, 28, 29, 0.13)`, background `rgba(29, 28, 29, 0.04)`, `12px/18px` mono, margin `4px 0`, `tab-size: 4` | border `rgba(232, 232, 232, 0.13)`, bg `rgba(232, 232, 232, 0.04)` |
+| Context text | `13px/18px`, `rgb(97, 96, 97)`; element row is a `22px` line box; `16px` spacer between elements | `rgb(209, 210, 211)` wrapper color (text tone unchanged) |
+
+### Builder-vs-client divergences (observed; renderer keeps documented Slack semantics)
+
+- `table` block `raw_number` cells render blank in the Builder (its table
+  renderer only knows `raw_text`/`rich_text`, matching the docs); the
+  renderer intentionally keeps showing the number.
+- Adjacent `rich_text_list` elements are merged by the Builder into a single
+  list using the first list's style, and the documented ordered `offset`
+  field never produces a `start`; the renderer keeps separate lists and
+  honors `offset`.
+- The Builder's dark message surface is `rgb(26, 29, 33)` (`#1a1d21`), one
+  digit off the earlier `#1b1d21` estimate; button/raised surfaces measured
+  the same value.
+- Overflowing tables composite at half-pixel offsets in the Builder page
+  (anti-aliased hairlines split across rows) and show a subtle rounded
+  corner on the outer grid; the wrapped-table parity fixture carries a small
+  diff budget for this and geometry was verified equal in the DOM.
+- Scrollbar rendering (macOS overlay vs classic) flips between sessions, so
+  the renderer hides scroller scrollbars and the goldens are captured with
+  scrollbars hidden.
+
+### Open questions (not measurable in this pass)
+
+- `container` block: the Builder preview fails to mount for any payload
+  containing `type: "container"` (renderer never appears). Container chrome
+  remains unmeasured; current styling is retained as-is. The same applies to
+  the workflow-button, multi-select, file/rich-text-input, video/file media,
+  and agent-block fixtures.
+- Chart line/area spline: control points show zeroed end tangents and
+  non-uniform interior tangent factors (~0.21–0.29 of the neighbor chord);
+  the exact algorithm was not identified. The renderer approximates it with a
+  cardinal-style curve; chart parity fixtures allow a small diff budget for
+  this.
+- Area tints for series 7–12 (max 6 series captured).
+- Bar group outer padding for series counts other than 1/3/6 (formula above
+  is a fit through the three observed counts).
+- Y-axis gutter width with no `y_label`, very wide tick values, long/rotated
+  category labels, hover states, and `data_table` sort affordances (hover
+  interactions were out of scope).
+- Ordered-list `offset` produced no `start` attribute in the Builder DOM; the
+  renderer keeps honoring the documented `offset` field.
+
+## Next harvest slices
+
+The baseline does not establish pixel parity for every permutation. Continue
+with isolated fixtures for text styles, all interactive elements, remaining
+rich text inline elements, cards/carousels, containers, agent blocks,
+modal/Home chrome, and every interaction state. Follow the repository
+`block-kit-style-harvest` skill for each slice.

package/package.json

@@ -0,0 +1,83 @@
+{
+  "name": "react-blockkit",
+  "version": "0.1.0",
+  "description": "React components that render Slack Block Kit JSON exactly as Slack does.",
+  "keywords": [
+    "block kit",
+    "blockkit",
+    "gfm",
+    "markdown",
+    "mrkdwn",
+    "react",
+    "renderer",
+    "slack",
+    "slack-blocks"
+  ],
+  "license": "MIT",
+  "author": "Siraj",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/SirajChokshi/slackmark.git",
+    "directory": "packages/react-renderer"
+  },
+  "style": "./dist/styles.css",
+  "files": [
+    "dist",
+    "docs",
+    "LICENSE",
+    "README.md"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@slack/types": "^3.0.0",
+    "@stylexjs/stylex": "^0.19.0"
+  },
+  "devDependencies": {
+    "@stylexjs/unplugin": "^0.19.0",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^19.2.10",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.3",
+    "jsdom": "^29.1.1",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "vite": "^8.1.5",
+    "vitest": "^4.1.7",
+    "slackmark": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.2.0 <20",
+    "react-dom": ">=18.2.0 <20"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "scripts": {
+    "build": "vite build && tsc -p tsconfig.build.json",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc -p tsconfig.json --noEmit && tsc -p tsconfig.test.json --noEmit"
+  }
+}