DEV Community: John Yaghobieh

The ForgeStack Release Wave: Four New Libraries and the Missing Pieces for Real-Time, AI-Powered Apps

John Yaghobieh — Sun, 12 Jul 2026 20:34:44 +0000

Source and repos: github.com/yaghobieh · Portal: forgedevstack.com
On July 12, 2026 we pushed the largest coordinated release in ForgeStack's history to npm: four brand-new libraries and updates across seven existing ones. The theme is simple. Until today, you could build most of an app on ForgeStack — UI with Bear, routing with Compass, state with Synapse, data with Forge Query, backend with Harbor. But the moment your app needed live updates, real authentication, or an AI feature, you had to leave the stack. This wave closes those gaps.

Here is what we shipped and why.

The Problem We Kept Hitting

Every modern product brief now includes the same three requirements: it should update in real time, it should have proper login, and it should have some AI in it. A chat app. A live dashboard. A document Q&A feature. Building these on ForgeStack meant wiring in Socket.IO, an auth SaaS, and a LangChain-sized dependency tree — three ecosystems with three different philosophies bolted onto a stack whose whole point is coherence.

So we built the missing pillars ourselves, the ForgeStack way: TypeScript-first, minimal or zero dependencies, and small APIs that compose with the rest of the stack.

Pillar 1: Real Time — Harbor WS Hub + Forge Socket

Harbor 1.6.3 (github.com/yaghobieh/Harbor, npm) adds a first-class WebSocket Hub under a new @forgedevstack/harbor/ws subpath. It handles the parts that are annoying to get right: authentication runs before the upgrade is accepted (rejected clients get a proper HTTP 401 and never open a socket), all traffic uses a typed { event, payload } envelope, rooms clean up after themselves, heartbeats terminate dead connections, and a pub/sub adapter contract lets you fan out across multiple instances (in-memory by default, Redis-compatible by contract).

import { createServer } from '@forgedevstack/harbor';
import { createWsHub } from '@forgedevstack/harbor/ws';

const server = createServer();
server.listen(3000);

const hub = createWsHub({
  path: '/chat',
  authenticate: async (request) => {
    const token = new URL(request.url ?? '', 'http://localhost').searchParams.get('token');
    const user = await verifyToken(token);
    if (!user) return { accept: false, status: 401 };
    return { accept: true, context: { userId: user.id } };
  },
  onMessage: (connection, message) => {
    if (message.event === 'chat:send') {
      void hub.broadcastToRoom('lobby', 'chat:new', {
        from: connection.context.userId,
        text: message.payload,
      });
    }
  },
});

On the other side of the wire sits the brand-new Forge Socket 1.0.0 (github.com/yaghobieh/forge-socket, npm) — a typed WebSocket client for the browser and Node with zero runtime dependencies. It speaks the same envelope protocol as the hub and handles reconnection with capped exponential backoff and jitter, heartbeat keepalive, room membership that automatically rejoins after a reconnect, and an offline queue for messages sent while the connection is down.

import { ForgeSocket } from '@forgedevstack/forge-socket';

interface Incoming {
  'chat:new': { from: string; text: string };
}
interface Outgoing {
  'chat:send': { text: string };
}

const socket = new ForgeSocket<Incoming, Outgoing>({ url: 'wss://example.com/chat' });
socket.on('chat:new', (payload) => render(payload));
socket.connect();
socket.join('lobby');
socket.send('chat:send', { text: 'hello' }, 'lobby');

Server and client were designed as twins. You define your event map once and both ends are typed.

And to complete the loop into the UI layer, Forge Query 1.0.1 (github.com/yaghobieh/forge-query) adds useSubscription — a hook that keeps a cached query updated from any push source. It is adapter-based, so the library has zero transport dependencies: hand it a subscribe(listener) => cleanup source (a Forge Socket handler fits naturally), give it an onEvent reducer, and events fold into the cache. The same release brings declarative optimistic updates to useMutation, with automatic snapshot and rollback on error.

Harbor 1.6.3 also ships streaming multipart uploads (@forgedevstack/harbor/upload): file bytes flow straight to a storage adapter without buffering whole files in memory, with per-file size limits, mime allowlists, and a built-in local disk adapter.

Pillar 2: Auth — Forge Auth 2.0.0

Forge Auth (github.com/yaghobieh/forge-auth, npm) is an auth toolkit for Node.js built entirely on node:crypto — zero runtime dependencies. It covers HMAC-SHA256 signed session tokens with TTL, scrypt password hashing with self-describing hash strings, API key generation and timing-safe verification, and OIDC authorization-code helpers with PKCE (S256).

The design bet is framework-agnostic guards: plain functions over a minimal { headers } request shape that return { authorized, context }. They work with Harbor, Express, Fastify, or raw node:http — and the same session guard that protects an HTTP route can protect a WebSocket upgrade in the WS Hub's authenticate hook.

import { createSession, createSessionGuard } from '@forgedevstack/forge-auth';

const token = createSession({ userId: 'user-1', role: 'admin' }, secret, { ttlSeconds: 3600 });

const guard = createSessionGuard<{ userId: string; role: string }>({ secret });
const result = await guard({ headers: req.headers });
if (!result.authorized) return res.status(401).json({ error: result.reason });

Pillar 3: AI — Forge AI 1.0.0

Forge AI (github.com/yaghobieh/forge-ai, npm) is deliberately a thin RAG toolkit, not a framework. It gives you text chunking (fixed-size or sentence-boundary strategies with overlap), provider-agnostic embeddings (a built-in client for any OpenAI-compatible endpoint, or implement the EmbeddingProvider interface for anything else), and pgvector SQL helpers for table creation and cosine-similarity queries. Document extraction for pdf/docx/xlsx is defined as a contract with an extractor registry — parsers like pdf-parse, mammoth, and xlsx are optional peer dependencies you register yourself, so the core stays at zero runtime dependencies.

import { chunkText, createOpenAiEmbeddingProvider, buildSimilarityQuerySql, formatVectorLiteral } from '@forgedevstack/forge-ai';

const chunks = chunkText(documentText, { strategy: 'sentence', chunkSize: 512, overlap: 64 });
const provider = createOpenAiEmbeddingProvider({
  baseUrl: 'https://api.openai.com/v1',
  apiKey: process.env.OPENAI_API_KEY ?? '',
});
const embeddings = await provider.embed(chunks.map((chunk) => chunk.text));

const [queryEmbedding] = await provider.embed(['What is ForgeStack?']);
const results = await db.query(
  buildSimilarityQuerySql({ table: 'documents', topK: 5 }),
  [formatVectorLiteral(queryEmbedding)],
);

If you have ever wanted RAG without adopting an entire orchestration framework, this is the shape we wanted it to have: functions you call, SQL you can read, and your own database.

Pillar 4: MCP — Forge MCP 1.0.0

Forge MCP (github.com/yaghobieh/forge-mcp, npm) is a tiny helper for building API-key-protected stdio MCP servers — the protocol that lets agents like Cursor and Claude Desktop call your tools. It wraps the official SDK so you define tools with plain JSON schemas (no zod, no boilerplate) and get a working server from one createMcpServer call. The API key resolves eagerly so a misconfigured server fails at startup, not on the first tool call. If you are shipping a product in 2026, an MCP server is becoming as standard as a REST API; this makes it a twenty-line task.

Grid Table Grows Up

Grid Table 1.1.1 (github.com/yaghobieh/grid-table, npm) is the biggest single-library drop in the wave, and it moves the grid firmly into AG-Grid territory:

Set filters (checkbox lists) and date range filters in the filter popup
Expandable group rows with collapse/expand on group headers
Excel-style range selection with drag-to-select, plus clipboard paste of tab-separated data into a selected range
SSRM-style infinite scroll with block loading (onLoadBlock, blockSize, totalRowCount)
Multi-row column group headers with real colspan
Delta row updates via an applyTransaction utility for { add, update, remove } batches, with flash cells highlighting what changed
A fill handle and bulk edit config for spreadsheet-style editing
Export scope control (all / filtered / sorted / selected) and saved views synced to the URL

Pair delta updates and flash cells with Forge Socket and you have a live-updating dashboard grid without a commercial grid license.

The Supporting Cast

The rest of the stack kept pace:

Bear 1.2.5 (github.com/yaghobieh/bear) adds MessageList — a chat message list with consecutive-author grouping, day separators, auto-scroll, and a "new messages" affordance — plus pauseOnHover and maxToasts for toasts, a multiline mode for MentionsInput, and full light-mode support for CommandPalette. Notice a pattern? The chat-app UI pieces landed in the same wave as the socket layer.
Synapse 1.2.1 (github.com/yaghobieh/synapse) wires persistence directly into createNucleus (hydrate on creation, debounced writes, versioned migrations), ships storage adapters for local/session/memory, makes the middleware pipeline functional with a new interceptor, and adds a zero-dependency Redux DevTools connector.
Forge Query 1.0.1 — live subscriptions and optimistic updates, covered above.
Forge Compass 1.0.3 (github.com/yaghobieh/compass) — browser back/forward now behaves exactly as users expect on popstate.
Kiln 1.0.6 (github.com/yaghobieh/kiln) — our Storybook alternative keeps maturing, with URL-addressable story routes and a docs-first tab option.

What This Adds Up To

Take stock of what a ForgeStack app can now be, end to end: Harbor serving the API and the WebSocket hub, Forge Auth guarding both, Forge Socket and Forge Query streaming server events into the cache, Synapse persisting client state, Bear rendering the chat with MessageList, Grid Table flashing delta updates into a live dashboard, Forge AI powering document Q&A over pgvector, and Forge MCP exposing the whole thing to AI agents. Every package is MIT licensed, TypeScript-first, and deliberately small.

Getting Started

npm install @forgedevstack/forge-socket @forgedevstack/forge-auth @forgedevstack/forge-ai @forgedevstack/forge-mcp

Docs and live examples are on the portal at forgedevstack.com, and every repo lives under github.com/yaghobieh. If you build something with the new pillars — a chat app, a live grid, a RAG feature — we would genuinely like to see it.

How I'm Preventing Most of the Bugs Before They Ship — Bear UI 1.2.4

John Yaghobieh — Sun, 14 Jun 2026 15:58:57 +0000

Repository: https://github.com/yaghobieh/bear

Most bugs in a component library don't come from bad logic. They come from a component page crashing silently, a dark-mode toggle being forgotten on one surface, or a refactor that quietly broke onChange wiring three files away.

Bear UI 1.2.4 ships a full automated sanity layer that catches those before a single line of source code is committed.

The problem with "it worked on my machine"

Bear has over 100 components and a full documentation portal. Every release I was manually clicking through pages, toggling dark mode, and checking the console — the same ritual every time, for every component.

It was slow, inconsistent, and easy to forget. So I automated it.

What the sanity layer does

Every git commit now triggers a 4-step gate before the commit is allowed through:

Step 1 — ESLint  (code review gates G1–G10)
Step 2 — TypeScript  (tsc --noEmit)
Step 3 — Vitest  (unit tests)
Step 4 — Playwright  (275 e2e tests)
→ Generates: Sanity/sanity-release-1.2.4.md

If any step fails, the commit is blocked with a clear summary and the report is updated.

The three Playwright suites

1. Render sanity (135 tests)

Every page in the portal — from / to /components/watermark — is visited headlessly. The test asserts:

Page returns a non-400 response
body is visible
.doc-preview playground exists on component pages
PropsTable headers are present on component pages
Zero console errors

That last check is the most valuable. It catches React prop warnings, missing onChange handlers, broken imports — things that render visually but scream in the DevTools console.

page.on('console', (msg) => {
  if (msg.type() === 'error') consoleErrors.push(msg.text());
});
// after page load:
expect(consoleErrors).toHaveLength(0);

2. Interaction checks (119 tests)

Every component page gets clicked. Each test finds the first interactive Bear element inside the demo preview and clicks it. For key components, a specific interaction map defines the exact selector and expected state:

'/components/switch': [
  { selector: '.doc-preview__stage .Bear-Switch', action: 'click' },
],
'/components/select': [
  { selector: '.Bear-Select__trigger', action: 'click',
    expectVisible: '.Bear-Select__dropdown' },
],

The test only asserts that no JavaScript error is thrown after interaction. No crash = pass.

3. Dark mode (21 tests)

A sample of 10 representative routes are tested in both modes:

await page.evaluate(() => {
  localStorage.setItem('bear-portal-theme', 'dark');
});
await page.reload();
const dark = await page.evaluate(() =>
  document.documentElement.classList.contains('dark')
);
expect(dark).toBe(true);

An extra test verifies the theme persists across navigation — not just within a single page reload.

The code review gates

The ESLint step enforces 10 structural gates defined in the Bear code review skill:

Gate	Rule
G1	No magic strings or numbers
G3	No HTML comments in JSX
G4	No bare `<>` for layout
G7	One component per `.tsx` file
G10	1 const + 1 types file per folder

Gates that can't be automated yet (G2, G5, G6, G8, G9) are flagged as 🔍 Manual in the report and stay in the structured code review checklist.

The sanity report

Every run generates a markdown file at Sanity/sanity-release-{version}.md:

# Bear Portal Sanity Report — release/1.2.4

**Overall Status:** ✅ PASSED

## Code Review Gates
| Gate | Rule          | Status |
|------|---------------|--------|
| G1   | No magic strings | ✅  |
| G3   | No HTML comments | ✅  |

## Playwright Sanity Results
| Suite        | Passed | Failed | Total |
|--------------|--------|--------|-------|
| Page Render  |   135  |    0   |  135  |
| Interactions |   119  |    0   |  119  |
| Dark Mode    |    21  |    0   |   21  |

The file is committed alongside source changes so every release has a traceable record of what passed.

It already found a real bug

On the first run, all 275 tests failed — the Playwright suite caught a console.error from React on every page:

Warning: You provided a value prop to a form field without an onChange handler...
at Sidebar.tsx:331

The Sidebar component had a <select value={...}> with no onChange. It rendered fine visually. Zero user-facing symptoms. But the hook was in the global layout, so React logged the error on every single page.

The suite caught it before the branch was merged.

Setting it up

The full setup uses:

Husky for the pre-commit hook
@playwright/test for e2e (runs Chromium headlessly)
Playwright webServer option to auto-start/stop the portal dev server during tests
A Node.js report generator script (generate-report.mjs) that reads the Playwright JSON output and combines it with ESLint and TypeScript results

npm run sanity   # run the full check at any time without committing

The Playwright config uses a .cjs extension to work around the "type": "module" in the project's package.json, with a separate e2e/package.json setting "type": "commonjs" so TypeScript spec files are loaded correctly on Node 18.

What's next

The remaining manual gates (G2, G5, G8, G9) are good candidates for custom ESLint rules in LintForge. Once those are automated, the entire Bear code review can run without a human in the loop.

Bear UI 1.2.4 is available now:

npm install @forgedevstack/bear

Repo and full code: https://github.com/yaghobieh/bear

Bear UI 1.2.3: Goodbye Tailwind, Hello AeroCraft

John Yaghobieh — Wed, 20 May 2026 21:01:58 +0000

Repo: github.com/yaghobieh/bear

Docs: bearui.com

npm: @forgedevstack/bear@1.2.3

Bear UI 1.2.3 is a foundation release. The headline change is not another component — it is how the library is styled and built. We migrated the entire CSS pipeline from Tailwind CSS to AeroCraft (@forgedevstack/aerocraft), the utility engine we ship across ForgeStack.

If you only install Bear and import styles.css, your app keeps working the same way. If you maintain Bear or customize themes, this release is worth reading end to end.

Why we moved off Tailwind

Bear grew on Tailwind for years. It worked, but three problems kept showing up as the library and ForgeStack ecosystem scaled:

Stack alignment — AeroCraft, AeroCraft Portal, Grid Table, and other ForgeStack libs share one styling model. Keeping Bear on Tailwind meant two utility dialects, two configs, and duplicated mental overhead for contributors.
Class noise at scale — Hundreds of components with long bear-* utility chains are hard to review and easy to drift. AeroCraft gives us config-driven shortcuts, component recipes, and the same bear- prefix without Tailwind as a middle layer.
Build ownership — We wanted a PostCSS pipeline we control end to end: theme tokens, dark mode selectors, responsive groups, and future VS Code tooling (the AeroCraft plugin) tied to the same config Bear ships.

We did not move because Tailwind is bad. We moved because one CSS engine for the whole stack is simpler for maintainers and more predictable for consumers.

What AeroCraft changes under the hood

Before (Tailwind)

@tailwind base;
@tailwind components;
@tailwind utilities;

Build: tailwindcss CLI + tailwind.config.js + autoprefixer.

After (AeroCraft)

@aerocraft all;

Build: postcss-cli + @forgedevstack/aerocraft/postcss + aerocraft.config.js.

Bear keeps the same class prefix consumers already know:

// aerocraft.config.js (simplified)
export default {
  prefix: 'bear',
  separator: '-',
  mode: 'standalone',
  groups: 'all',
  responsive: true,
  content: ['./src/**/*.{ts,tsx}'],
  theme: { colors: { bear: { /* pink scale */ }, zinc: { /* ... */ } } },
};

PostCSS wires AeroCraft with Bear’s dark-mode convention:

import { aerocraftPlugin } from '@forgedevstack/aerocraft/postcss';
import config from './aerocraft.config.js';

export default {
  plugins: [
    postcssImport(),
    aerocraftPlugin({
      ...config,
      darkSelector: '.dark, .bear-dark',
    }),
  ],
};

_base.css now ships full semantic scales (secondary, success, warning, danger, info, neutral) as CSS variables, so theming stays consistent in light and dark mode.

What this means for your app

You are…	Action
Using Bear via npm and `import '@forgedevstack/bear/styles.css'`	No change required. Styles are pre-built in `dist/styles.css`.
Customizing Bear colors via `BearProvider`	No change required. CSS variables still drive variants.
Forking Bear or running `npm run build` in the repo	Install `@forgedevstack/aerocraft` as a devDependency; Tailwind is removed.
Want your own utility layer on top	Optional: add `aerocraft.config.js` + PostCSS plugin (see portal Installation page).

Publishing @forgedevstack/bear@1.2.3 to npm does not force you to install AeroCraft in your app unless you build Bear from source.

Component updates in 1.2.3

The CSS migration shipped alongside practical API improvements on high-traffic primitives.

Button

New props for dense, branded, and interactive UIs:

radius — default | pill | square | none
ripple — Material-style click ripple
gradient + gradientDirection — two-color backgrounds
compact — tighter padding for toolbars
prefix / suffix — badges, shortcuts, status dots
tooltip — shorthand hover hint

Example:

<Button
  gradient={['#ec4899', '#8b5cf6']}
  radius="pill"
  ripple
  spotlight
  leftIcon={<BearIcons.RocketIcon size={16} />}
  tooltip="Launch"
>
  Launch
</Button>

Input

prefix / suffix — inline static text ($, https://, units)
loading — spinner inside the field
copyable + onCopy — one-click copy
floatingLabel + required — denser form layouts
variant / radius — aligned with other Bear inputs

Dropdown

searchable + searchPlaceholder + filterFn
multiSelect + selectedKeys + onSelectionChange
loading / loadingText / emptyText
header / footer — composition slots
renderItem — custom row rendering
virtualized — large lists

Drawer

Internal refactor: size/position/transform maps moved to Drawer.const.ts, scroll locking to Drawer.utils.ts — no intentional breaking API changes.

Ecosystem context (1.2.2 → 1.2.3)

1.2.2 added a large batch of display components (GlowCard, Heatmap, TagCloud, MediaPlayer, AnimatedCounter, CurrencyInput, TimelineChart, ImageAnnotation, and more). 1.2.3 stabilizes how they are styled going forward on AeroCraft.

The portal also teases Torch (@forgedevstack/player) — playlists, subtitles, PiP, and streaming built to pair with Bear layouts.

Upgrade

npm install @forgedevstack/bear@1.2.3

import '@forgedevstack/bear/styles.css';
import { BearProvider, Button, Input, Dropdown } from '@forgedevstack/bear';

Explore live docs: bearui.com

AeroCraft: Less CSS, Faster UI Delivery

John Yaghobieh — Sat, 25 Apr 2026 11:09:56 +0000

Repo: https://github.com/yaghobieh/aerocraft

Package: https://www.npmjs.com/package/@forgedevstack/aerocraft

AeroCraft is a utility and shortcut CSS engine for teams that want the speed of utility classes with better readability and stronger design consistency.

Instead of repeating 8-12 classes for every button, card, and shell, you compose higher-level shortcuts (and component recipes) from your config, then reuse them everywhere.

Why AeroCraft?

Most teams hit the same pain points with CSS utility workflows:

Long class strings are hard to scan in code reviews
Repeated patterns drift across pages
Design tokens live in one place, but UI classes don’t
Migration between projects/frameworks gets noisy

AeroCraft addresses this by generating reusable shortcuts from config, with optional responsive variants and typed design tokens.

Advantages vs Typical Utility-First Setup

1) Shorter, clearer class names

You can collapse repeated utility combinations into one semantic shortcut.

Instead of:

<button class="flex-row-center gap-2 px-5 py-3 rounded-lg font-semibold cursor-pointer w-full transition-fast color-white">
  Buy now
</button>

You can define recipe classes and use:

<button class="button-core button-touch-48 button-primary-rounded">
  Buy now
</button>

2) Config-driven design system

Your styles are generated from a single source of truth:

theme for colors, spacing, fonts, radii, shadows
customShortcuts for reusable layout/semantic helpers
componentRecipes for real component-like classes

3) Framework-agnostic output

AeroCraft emits plain CSS. Use it with React, Vue, Angular, Svelte, or vanilla HTML without runtime lock-in.

4) Responsive-ready utilities

Enable responsive: true and get breakpoint variants from your config breakpoints.

5) Better scaling for teams

Teams get consistent naming and less copy-paste CSS noise in JSX/HTML.

Quick Start

npm i @forgedevstack/aerocraft postcss

`postcss.config.js`

import { aerocraftPlugin } from '@forgedevstack/aerocraft/postcss';
import config from './aerocraft.config.js';

export default {
  plugins: [aerocraftPlugin(config)],
};

`src/styles/aerocraft.css`

@aerocraft;

`src/main.tsx` (or equivalent entry)

import './styles/aerocraft.css';

Real Config Example

import { defineConfig } from '@forgedevstack/aerocraft';

export default defineConfig({
  responsive: true,
  theme: {
    colors: {
      brand: { DEFAULT: '#2563eb', 500: '#3b82f6', 600: '#1d4ed8' },
      accent: '#ff8a3c',
    },
    fontFamily: {
      display: ['Plus Jakarta Sans', 'ui-sans-serif', 'system-ui', 'sans-serif'],
    },
    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
    },
  },
  customShortcuts: {
    'background-brand-gradient': {
      group: 'background',
      css: { 'background-image': 'linear-gradient(90deg,#3b82f6,#6366f1)' },
    },
  },
  componentRecipes: {
    'button-core': {
      display: 'inline-flex',
      'align-items': 'center',
      'justify-content': 'center',
      gap: '0.5rem',
      width: '100%',
      'font-weight': '600',
      cursor: 'pointer',
      transition: 'all 180ms ease',
      border: '0',
    },
    'button-touch-48': {
      'min-height': '48px',
      padding: '0.75rem 1.25rem',
    },
    'button-primary-rounded': {
      color: '#ffffff',
      'border-radius': '0.75rem',
      'background-image': 'linear-gradient(90deg,#3b82f6,#6366f1)',
      border: '0',
    },
  },
});

Usage Patterns

A) Utility composition

<section class="flex-col gap-4 p-4 rounded-xl">
  <h2 class="font-bold">Utility composition</h2>
  <p class="color-brand-500">Readable and fast.</p>
</section>

B) Component-style composition

<button class="button-core button-touch-48 button-primary-rounded">
  Continue
</button>

C) Responsive usage

<div class="flex-col md:flex-row gap-3">
  <aside class="w-full md:w-[280px]">Filters</aside>
  <main class="w-full">Results</main>
</div>

When AeroCraft Fits Best

You want utility-class speed without unreadable markup
You need a config-driven bridge between design tokens and classes
You ship across multiple frameworks and want one CSS strategy
You want to define once and reuse patterns (componentRecipes)

Summary

AeroCraft keeps the productivity of utility CSS, but adds structure where teams need it most: naming, reuse, and config-driven consistency.

If your class strings are getting repetitive, AeroCraft gives you a clean path to shorter markup and scalable styling.

Repo: https://github.com/yaghobieh/aerocraft

Rail: We’re Proud to Open-Source the Motion Layer We Always Wanted for React

John Yaghobieh — Thu, 09 Apr 2026 20:27:21 +0000

There is a peculiar pride in shipping something you felt before you could name it: the conviction that carousels in real products deserve better than brittle hacks, copy-pasted snippets, and “good enough” sliders that break the moment you need accessibility, touch, or a second row of thumbnails.

Today we’re proud to open-source Rail — a modular carousel engine for React — and to place it squarely in the ForgeStack ecosystem alongside Bear, our UI kit, and the rest of the tools we actually build with.

This is not a humble brag. It’s an invitation: the code is yours, the docs are live, and the playground is waiting.

Why Rail exists (the short, loud version)

Modern interfaces move. Hero strips, onboarding tours, story-style sequences, image galleries, and data-heavy carousels are not edge cases — they are the spine of how users scan and decide. Yet the developer experience around “a slider that doesn’t embarrass you in production” has lagged behind the rest of the React stack.

Rail exists because we refused to accept that trade-off.

We wanted:

Physics that feel intentional — snap, momentum, loop, and responsive breakpoints without sacrificing control.
Modularity that scales — navigation, pagination, autoplay, keyboard, thumbs, virtual slides, and dozens of other concerns as opt-in modules, not a monolithic bundle you fight in tree-shaking purgatory.
Effects that belong in product UI — fade, cube, coverflow, Story Mode, and more, when marketing and product actually ask for them.
Accessibility as a first-class module, not a footnote.

Rail is our answer: opinionated where it matters, composable everywhere else.

Part of ForgeStack — and built to sit next to Bear

Rail is not an island. It is the motion layer in the same story as Bear — our React component library for interfaces that need to look and behave like serious software.

Bear gives you structure: buttons, cards, typography, layout, inputs, overlays — the vocabulary of the UI.
Rail gives that UI motion and narrative: the carousel in the hero, the gallery beside the form, the story strip above the fold.

We use the same design discipline: TypeScript-first, explicit APIs, and a path from “demo pretty” to “production boring” (in the best sense — boring because it works).

If you already reach for Bear when you start a ForgeStack-flavored app, Rail is the natural companion when the design says swipe, slide, or tell a sequence.

Bear: github.com/yaghobieh/bear · bearui.com

ForgeStack hub: github.com/yaghobieh/ForgeStack

The portal, the API surface, and Rail Studio

We didn’t stop at the package. The Rail Portal is the public home for narrative, examples, and deep reference:

Site: railjs.com
Portal source (fork, deploy, theme): github.com/yaghobieh/rail-portal

Inside the portal, Rail Studio is where pride meets play: tweak presets, spacing, effects, and navigation, then copy production-ready JSX. No ceremony — just a tight loop between imagination and code.

Open Studio directly: railjs.com/studio

A taste of the API

Install:

npm install @forgedevstack/rail

Minimal usage (modules are explicit — you only pay for what you import):

import { Rail, RailSlide, Navigation, Pagination } from '@forgedevstack/rail';
import '@forgedevstack/rail/styles.css';

export function HeroCarousel() {
  return (
    <Rail
      slidesPerView={1}
      spaceBetween={24}
      navigation
      pagination={{ clickable: true }}
      modules={[Navigation, Pagination]}
    >
      <RailSlide>Slide 1</RailSlide>
      <RailSlide>Slide 2</RailSlide>
      <RailSlide>Slide 3</RailSlide>
    </Rail>
  );
}

The real story is in the module matrix — virtual slides for huge lists, thumbs for galleries, autoplay with sane pause rules, and effects when the brand demands drama. That’s all documented on railjs.com.

What we’re asking of you

If Rail solves even one carousel you were dreading, we’ve earned the star. If it doesn’t yet, open an issue — we ship in the open because the next great default behavior probably has your name on the report.

Star the repo: github.com/yaghobieh/rail
Try the Studio: railjs.com/studio
Read the docs: railjs.com

Link sheet (copy for anywhere)

What	URL
Rail (library)	https://github.com/yaghobieh/rail
Rail Portal (docs + demos)	https://railjs.com
Rail Studio	https://railjs.com/studio
npm package	https://www.npmjs.com/package/@forgedevstack/rail
Rail Portal (source)	https://github.com/yaghobieh/rail-portal
Bear (UI kit)	https://github.com/yaghobieh/bear
Bear site	https://bearui.com
ForgeStack	https://github.com/yaghobieh/ForgeStack

dev.to publishing checklist

Title: use the H1 above or shorten for feed (e.g. “Rail: an open-source carousel engine for React — ForgeStack + Bear”).
Cover image: upload a wide hero in the dev.to editor (recommended over a small SVG for social cards).
Tags: react, typescript, opensource, carousel, ui, webdev, forgestack (add bear if allowed).
Canonical: point to dev.to or cross-post from your blog with canonical_url in front matter if you use it.

LinkedIn companion (paste below the fold or as a short article)

Hook (first line — make them click “see more”):

We just open-sourced Rail — the React carousel engine we built so we’d never again ship a “temporary” slider that became permanent technical debt.

Body (short):

Rail is modular (25+ opt-in modules), touch-ready, accessibility-aware, and packed with effects from fade to Story Mode. It sits next to Bear in the ForgeStack ecosystem: Bear is your UI vocabulary; Rail is motion and narrative. Docs and live demos live at railjs.com, and railjs.com/studio lets you configure a carousel and copy JSX in seconds.

Links:

Library → https://github.com/yaghobieh/rail

Docs → https://railjs.com

Studio → https://railjs.com/studio

npm → https://www.npmjs.com/package/@forgedevstack/rail

Bear → https://bearui.com

Hashtags (optional, end of post):

OpenSource #React #TypeScript #WebDev #UI #ForgeStack #JavaScript #FrontEnd

Rail is MIT licensed. Built with conviction, documented with care, released with pride.

Grid Table v1.0.8: Mobile Layout Control + Server Pagination

John Yaghobieh — Tue, 07 Apr 2026 06:37:02 +0000

@forgedevstack/grid-table just shipped v1.0.8, and this release is all about production workflows.

Instead of adding random surface area, we focused on what usually breaks first in real products:

mobile table behavior
server-driven data paging
UX polish for high-density grids
docs/demos that are actually implementation-ready

Highlights

1) New `mobileLayout` prop

You can now choose mobile behavior explicitly:

"scroll" (default): keep full table semantics with horizontal scroll
"stacked": card-like row layout for narrow viewports

<GridTable
  data={rows}
  columns={columns}
  mobileBreakpoint="tablet"
  mobileLayout="stacked"
/>

This gives product teams control instead of forcing one “mobile table” opinion.

2) Manual pagination for API slices

Server paging is now first-class:

paginationConfig.manualPagination
paginationConfig.totalRowCount

<GridTable
  data={rowsFromApi}
  columns={columns}
  paginationConfig={{
    manualPagination: true,
    totalRowCount: totalFromApi,
    initialPage: 1,
    initialPageSize: 10
  }}
  onPageChange={(page, pageSize) => refetch(page, pageSize)}
/>

You keep client UX, while pagination math reflects backend totals correctly.

3) UX + stability improvements

hover effect toned down for cleaner scanability
toolbar icon size tuned for touch layouts
computed totals aligned with manual paging
hook-order loading fix in GridTableContent (no more render mismatch edge case)

4) Portal got much better

The portal now includes practical demos for:

accessibility
master-detail rows
persisted pagination
server-driven pagination
column grouping band
lazy/large lists
theme + playground hub

Plus copy-ready demo snippets, so adoption is much faster.

Why this matters

Most grid demos look fine with static arrays and desktop-only assumptions.

v1.0.8 is about teams shipping real apps:

complex states
backend pagination
mobile decisions
high-interaction UX

Ecosystem fit

Grid Table is part of Forge Dev Stack and pairs naturally with:

Bear UI
Forge Compass
Synapse
Harbor
Forge CLI

Try it

npm i @forgedevstack/grid-table

Wedsite: https://grid-table.com
GitHub: https://github.com/yaghobieh/grid-table
Changelog: https://github.com/yaghobieh/grid-table/blob/main/CHANGELOG.md

If you want, I can share a follow-up post with concrete patterns for:

API paging + optimistic edits
stacked mobile cards for operations apps
tree data + master-detail hybrid views

Bear UI v1.1.5: PropsPlayground, PageNav, Button Refactor, and a Polished Portal

John Yaghobieh — Sun, 15 Mar 2026 20:06:53 +0000

@forgedevstack/bear is a Tailwind-powered React UI library — TypeScript-first, zero config, dark/light theming out of the box. Version 1.1.5 brings two new components, a new hook, bear-themed icons, a major Button refactor, controlled Tabs, and a set of portal improvements that make browsing the docs faster.

Explore all components at Bear UI Portal.

What's in 1.1.5?

New components

PropsPlayground — An interactive prop editor panel you can embed in any documentation page. Define a config object with boolean, select, number, or string controls, pass a render function, and you get a collapsible control panel above a live preview. Supports a reset button, configurable column count, and three sizes.

import { PropsPlayground, Button } from '@forgedevstack/bear';

<PropsPlayground
  config={{
    variant: { type: 'select', default: 'primary', options: [
      { label: 'Primary', value: 'primary' },
      { label: 'Outline', value: 'outline' },
      { label: 'Ghost', value: 'ghost' },
    ]},
    loading: { type: 'boolean', default: false },
    label: { type: 'string', default: 'Click me' },
  }}
  render={(props) => (
    <Button variant={props.variant} loading={props.loading}>
      {props.label}
    </Button>
  )}
/>

PageNav — Previous/next navigation links for documentation or multi-page flows. Three variants (default, outlined, filled), five sizes, and optional icons.

import { PageNav } from '@forgedevstack/bear';

<PageNav
  prev={{ label: 'Button', href: '/components/button' }}
  next={{ label: 'Tabs', href: '/components/tabs' }}
  variant="outlined"
/>

New hook: useResizeObserver

A lightweight wrapper around the browser's ResizeObserver. Pass a ref, get width, height, and the full contentRect back. Useful for responsive component logic without media queries.

import { useRef } from 'react';
import { useResizeObserver } from '@forgedevstack/bear';

function ResponsiveBox() {
  const ref = useRef<HTMLDivElement>(null);
  const { width, height } = useResizeObserver(ref);

  return (
    <div ref={ref}>
      {width} x {height}
    </div>
  );
}

Bear-themed icons

Eight new SVG icons with a nature/bear theme: HoneycombIcon, ClawIcon, ForestIcon, DenIcon, SalmonIcon, CampfireIcon, PineTreeIcon, MountainIcon. Use them like any other Bear icon:

import { BearIcons } from '@forgedevstack/bear';

<BearIcons.ForestIcon size={24} />
<BearIcons.CampfireIcon size={24} />

Button refactor

The Button component got a significant cleanup:

Spotlight logic extracted into a reusable useSpotlight hook — the same mouse-follow glow effect is now available for other components.
iconOnly prop — Renders a square button sized for icons, without needing to manually adjust padding.
Smaller file — Helper functions and variant checks moved to Button.utils.ts and Button.constants.ts. The main component file dropped by ~40 lines with no API changes.

<Button iconOnly variant="ghost" size="sm">
  <BearIcons.SearchIcon size={16} />
</Button>

Tabs: controlled mode

Tabs now accept an optional value prop for controlled mode. When value is provided, the component is fully controlled from outside; when omitted, it falls back to the existing defaultTab uncontrolled behavior.

const [activeTab, setActiveTab] = useState('overview');

<Tabs value={activeTab} defaultTab="overview" onChange={setActiveTab}>
  <TabList>
    <Tab id="overview">Overview</Tab>
    <Tab id="api">API</Tab>
  </TabList>
  {/* panels */}
</Tabs>

Portal improvements

The documentation portal got four additions that improve day-to-day use:

Sidebar Search — Live filter in the sidebar. Type to instantly find any component, hook, or guide. Auto-expands matching groups.
Copy Import — A one-click button on every component page that copies import { ComponentName } from '@forgedevstack/bear' to your clipboard.
Breadcrumbs — Navigation breadcrumbs on component and doc pages so you always know where you are.
Doc Page Navigation — Previous/next links at the bottom of every page (using the new PageNav component internally).
Accessibility Docs — A new guide covering focus management, ARIA attributes, keyboard navigation, and color contrast.

CSS and code quality

Plain CSS for base utilities — .bear-focus-ring and .bear-transition now use plain CSS instead of Tailwind @apply directives, improving compatibility with non-Tailwind setups.
Utility extraction — Anchor, Autocomplete, ContextMenu, CountdownTimer, Dock, FileTree, MentionsInput, Skeleton, SliderRange, and Spotlight all had logic moved into .utils.ts files.
New docs — A CONTRIBUTING.md guide covers branch workflow, how to add components, and coding rules. The README now includes a comparison table vs MUI, Ant Design, and Chakra UI.

Quick start

npm install @forgedevstack/bear

import '@forgedevstack/bear/styles.css';
import { BearProvider, Button, PropsPlayground, PageNav } from '@forgedevstack/bear';

function App() {
  return (
    <BearProvider defaultMode="light">
      <Button variant="primary" spotlight>
        Try Bear
      </Button>
    </BearProvider>
  );
}

Where to go from here

Portal: bearui.com — all components, live examples, and API docs.
npm: @forgedevstack/bear
Changelog: GitHub CHANGELOG.md for the full diff.

Bear UI v1.1.5 focuses on developer experience — a playground for testing props, better portal navigation, a cleaner Button, and controlled Tabs. The library now exports 100+ components with the same Tailwind-powered, zero-config approach.

Part of ForgeStack — React, Compass, Synapse, Harbor, Grid Table, Lingo, and more.

Bear UI v1.1.4: 22+ New Components, LOC Badges, and a Better Docs Experience

John Yaghobieh — Wed, 11 Mar 2026 21:19:50 +0000

@forgedevstack/bear is a React UI library built with Tailwind CSS — zero config, TypeScript-first, and part of the ForgeStack ecosystem. Version 1.1.4 adds over 22 new components, improves docs with lines-of-code badges, and keeps dark/light theming and customization front and center.

Explore all components at Bear UI Portal.

What’s in 1.1.4?

New components (high level)

Feedback & overlays: Popconfirm, Result (success/error/404/403/500), LoadingOverlay
Data & layout: Descriptions (key-value), Anchor (scroll-spy TOC), Affix (sticky), RingProgress, Spoiler
Form & selection: CheckboxCard, RadioCard, Fieldset
UI primitives: Blockquote, Indicator (badge/dot), ActionIcon (icon-only button)
Already in 1.1.3: DateRangePicker, TreeSelect, ImageGallery/Lightbox, ContextMenu, NumberFormatter, InfiniteScroll, ColorSwatch, SplitButton

All of these support BearProvider (dark/light, custom colors/variants) and use Typography for text so you can control appearance via props.

Docs: lines-of-code badges

Component docs now show a small lines-of-code (LOC) badge next to each component name — same idea as the HoverCard screenshot below. Green = smaller footprint; the badge helps you see at a glance how much code each piece adds.

Component pages use the same LOC badge pattern across the portal.

Quick start

npm install @forgedevstack/bear

// App or main entry
import '@forgedevstack/bear/styles.css';

import { Button, Card, CardHeader, CardBody, Popconfirm, Result } from '@forgedevstack/bear';

function App() {
  return (
    <Card>
      <CardHeader>Welcome</CardHeader>
      <CardBody>
        <Popconfirm title="Delete this?" onConfirm={() => console.log('Deleted')}>
          <Button variant="outline">Delete</Button>
        </Popconfirm>
      </CardBody>
    </Card>
  );
}

New components in action

Popconfirm — inline confirmation

Use instead of a heavy modal for simple “Are you sure?” flows.

<Popconfirm
  title="Delete this item?"
  description="This cannot be undone."
  variant="danger"
  onConfirm={handleDelete}
>
  <Button variant="outline">Remove</Button>
</Popconfirm>

Result — full-page feedback

Ideal for success, error, 404, 403, or 500 pages.

<Result
  status="404"
  title="Page Not Found"
  subtitle="The page you're looking for doesn't exist."
  extra={<Button onClick={goHome}>Go Home</Button>}
/>

Anchor — scroll-spy navigation

Table-of-contents style nav that highlights the active section.

<Anchor
  links={[
    { id: 'overview', label: 'Overview' },
    { id: 'api', label: 'API', children: [
      { id: 'props', label: 'Props' },
      { id: 'events', label: 'Events' },
    ]},
  ]}
/>

CheckboxCard & RadioCard

Cards that act as checkboxes or radios — great for plans, options, or multi/single selection.

<RadioCardGroup value={plan} onChange={setPlan} columns={3}>
  <RadioCard value="free" label="Free" description="$0/mo" />
  <RadioCard value="pro" label="Pro" description="$19/mo" />
  <RadioCard value="enterprise" label="Enterprise" description="Custom" />
</RadioCardGroup>

RingProgress, Spoiler, Blockquote, and more

RingProgress — SVG ring with one or more segments and optional center label.
Spoiler — “Show more / Show less” with a configurable max height.
Blockquote — Styled quote with left border and color variants.
ActionIcon — Icon-only button with variants and loading state.
Fieldset — Semantic grouping with legend and description.
Indicator — Small dot/badge on any element (e.g. status, count).

Theming (dark/light + custom)

Wrap your app in BearProvider to get dark/light mode and optional custom colors/variants:

import { BearProvider, Button } from '@forgedevstack/bear';

<BearProvider
  defaultMode="dark"
  customVariants={{
    brand: { bg: '#6366f1', text: '#fff', hoverBg: '#4f46e5' },
  }}
>
  <Button variant="brand">Custom variant</Button>
</BearProvider>

Modular CSS with @BearInclude

If you don’t want the full bundle, use the PostCSS plugin and import only what you need:

@BearIncludeAll; /* or */
@BearInclude 'base';
@BearInclude 'buttons';
@BearInclude 'alerts';

See the portal Installation page for setup.

Where to go from here

Portal: bearui.com — all components, live examples, and API.
npm: @forgedevstack/bear
Changelog: GitHub CHANGELOG.md for the full 1.1.4 list.

Bear UI v1.1.4 keeps the same “strong, reliable, Tailwind-powered” approach while adding a lot of new building blocks and a clearer docs experience with LOC badges. If you’re building a React app and want a single design system with dark mode and room to customize, Bear is worth a look.

Part of ForgeStack — React, Compass, Synapse, Grid Table, and more.

Modernizing Web Applications with React 19+ Internals

John Yaghobieh — Mon, 09 Mar 2026 12:34:05 +0000

1. Concurrent Rendering & `@use` (Data Fetching & Suspension)

We are replacing all imperative useEffect based fetching and manually managed loading states with declarative @use(Promise). This moves the complexity of data orchestration from user code directly into the Fiber Reconciler.

How @use works under the hood (The Suspense Mechanism): When the Fiber Reconciler processes a component that reads a Promise via @use (e.g., <UserProfile />), it checks if the Promise is already resolved. If not, the Fiber Node representing <UserProfile /> is marked as Suspended and the Reconciler "throws" the Promise up the tree to be caught by the nearest <Suspense> boundary. A Fallback Fiber Node is then committed to the visual DOM to show a loading skeleton. When the promise is resolved, the Reconciler is notified and it automatically schedules an Update Fiber Update to re-render the <UserProfile /> with the resolved data.

Expanded Real Code Example:

import { use, Suspense } from 'react';

// Unified Harbor API wrapper returning a stable Promise
// @use is integrated into our data fetching layer
import { fetchUserProfile } from './api';

export function UserProfile({ id }: { id: string }) {
  // 1. Declarative, suspended resource reading
  // Throws if pending, catching nearby Suspense boundary
  const user = use(fetchUserProfile(id)); 

  return (
    <div className="user-profile">
      <h2>Welcome, {user.name}</h2>
      <p>Email: {user.email}</p>
      {/* (Other profile components can also use "@use" concurrently) */}
    </div>
  );
}

// Parent implementation (standard Forge Stack pattern)
export default function App() {
  return (
    <div className="app-container">
      <BearHeader />
      {/* 2. Catch suspended children with non-blocking fallback */}
      <Suspense fallback={<BearUserProfileSkeleton />}> 
        <UserProfile id="user_123" />
      </Suspense>
    </div>
  );
}

2. Actions & `useActionState` (Native Form Interception & Lifecycle)

We are moving away from manual isSubmitting tracking and validation error propagation. By integrating with React 19's useActionState, we let React's Fiber Reconciler handle the entire form submission lifecycle natively.

How useActionState works under the hood (Interception and Lifecycle): When we use a <form action={dispatch}> connected to useActionState, React intercepts the native form submission event (preventing the default full-page reload). It then extracts the FormData from the event target and dispatches an internal Action Fiber Update. This update is marked with specific priorities in the Fiber Lanes. React then initiates the Action Lifecycle, providing three key states natively:
Pending: The initial, synchronous response, setting isPending to true while the server action promise is running. The Reconciler knows this update is linked to the form element and updates only the relevant Fiber Node.
Success: When the server promise resolves, the Reconciler commits the Action State Update with the successful result (or a clean form state).
Error: If the promise fails, the Reconciler captures the failure and commits the Action State Update with the error details.

Expanded Real Code Example:

import { useActionState } from 'react';

// Synchronous and asynchronous server action wrapper (Harbor backend integration)
import { signUpServerAction, ActionState } from './actions';

export function BearSignUpForm() {
  // useActionState returns [currentState, dispatch, isPending]
  // prevState is automatically propagated for form resets or corrections
  const [state, dispatchAction, isPending] = useActionState<ActionState, FormData>(
    signUpServerAction,
    { error: null, success: false } // Initial state
  );

  return (
    <form 
      className="bear-form"
      action={dispatchAction} // Connect directly to native action
    >
      <div className="form-group">
        <BearInput label="Email" name="email" type="email" required />
        <BearInput label="Password" name="password" type="password" required />
      </div>

      {/* useActionState handles error and success propagation natively */}
      {state.error && <p className="form-error" role="alert">{state.error}</p>}
      {state.success && <p className="form-success">Successfully registered!</p>}

      {/* 3. Automatic "isPending" state tracking (no manual useState required) */}
      <BearButton type="submit" disabled={isPending}>
        {isPending ? 'Forging Account...' : 'Sign Up'}
      </BearButton>
    </form>
  );
}

3. Optimistic Updates & `useOptimistic` (Zero-Lag UI & Rollback Mechanics)

We are implementing useOptimistic to provide zero-lag user feedback for critical interactions like chat, liking posts, or adding to carts, without waiting for the server roundtrip.

How useOptimistic works under the hood (Predicted vs. Real Commitments): When useOptimistic is called (e.g., addOptimisticMessage('hello')), React instantly creates a Predicted Fiber Update on a highly prioritized, concurrent Fiber Lane. This update is committed immediately, updating only the relevant UI part to show the "temporary" message. In parallel, the real asynchronous server action (Harbor API call) is dispatched as a separate concurrent Fiber Update on a later lane. This is effectively a Race Condition where React manages the prediction vs. the reality. The Magic of automatic Rollback: If the server action fails, the Reconciler simply discards the Predicted Lane Commitment. Since the Predicted Update was never the real, final committed state (pre-optimistic), discarding it automatically reverts the Fiber Tree to its last known real committed state (pre-optimistic), removing the optimistic message from the user's view with zero lag or manual state reset logic.

Expanded Real Code Example:

import { useState, useOptimistic } from 'react';

// Native Harbor async message action (Server Action)
import { sendMessageAction } from './actions';

export function BearChatInput() {
  const [messages, setMessages] = useState<Message[]>([]);

  // Defines temporary optimistic state to be shown before server confirmation
  // useOptimistic(state, updateFn)
  const [optimisticMessages, addOptimisticMessage] = useOptimistic(
    messages,
    (state, newMessageText: string) => [
      ...state, 
      // Predicting success and showing bubble instantly
      { text: newMessageText, pending: true, id: 'temp-' + Date.now() } 
    ]
  );

  async function handleSubmit(formData: FormData) {
    const text = formData.get('message') as string;

    // 4. URGENT: Show optimistic message instantly (Zero-Lag UI)
    addOptimisticMessage(text); 

    // 5. Async Server call (Harbor backend integration)
    try {
      // (This promise is slow)
      const confirmedMessage = await sendMessageAction(text); 

      // 6a. Update 'real' state on success. Optimistic value removed.
      setMessages(prev => [...prev, confirmedMessage]); 
    } catch {
      // 6b. Automatic rollback on failure. Optimistic value discarded.
      // (We can show a toast here to inform the user)
    }
  }

  return (
    <div className="chat-container">
      {/* BearList renders 'optimisticMessages' concurrently */}
      <BearMessageList items={optimisticMessages} />
      <form 
        className="chat-input"
        action={handleSubmit} // Standard async action handler
      >
        <input name="message" required placeholder="Type a message..." />
        <button type="submit">Send</button>
      </form>
    </div>
  );
}

Ecosystem Validation Visuals

This detailed visual presentation summarizes the comprehensive integration across all Forge Stack foundational components. The light-mode infographic clearly labels the interconnected pathways where startTransition (Urgent vs. Non-Urgent Lanes), @use Suspension and Rehydration, useActionState Lifecycle, and useOptimistic predicted vs. committed state synchronize data flow.

We have included additional detailed diagrams within each section to show how the React Scheduler and Fiber Reconciler operate under the hood to manage these complex scenarios, ensuring per-default non-blocking perceived performance.

State Management is Dead. Long Live the Neural Layer: Introducing Synapse 1.1.0

John Yaghobieh — Sun, 08 Mar 2026 11:18:14 +0000

State Management is Dead. Long Live the Neural Layer: Introducing Synapse 1.1.0

The "State Management Wars" are over, and the developers won. Over the last decade, we've swung from the highly structured (but brutal boilerplate) world of Redux to the beautiful (but sometimes dangerously simple) world of Zustand. Now, we are entering a new era.

State management is no longer just about where you put your data; it's about how your components perceive that data, instantly and efficiently.

Introducing @forgedevstack/synapse, the definitive Neural State Layer—specifically designed to bridge the gap between structured scalability and lightning-fast developer experience.

Why Synapse? Our Motivation

The motivation behind Synapse wasn't to build yet another state manager. It was to build a state perception system that harmonizes performance with developer experience.

We were fatigued by:

The Selector optimization trap: Having to manually write selectors to prevent massive re-renders.
The "Loose" State Problem: Simple state solutions often leave complex state logic scattered and unmanaged as the app scales.
Boilerplate Burnout: Redux taught us great patterns, but the sheer cost of wiring a new feature is unsustainable.

Synapse vs. The Giants

Synapse is built on a Structured Signal System. We take the rigid, predictable architecture concepts of Redux and the lightweight, minimal-API philosophy of Zustand, then add the performance of Signals.

Feature	Redux	Zustand	Synapse
Boilerplate	High	Low	Zero
Learning Curve	Steep	Shallow	Instant
Reactivity	Manual (Selectors)	Selectors	Automatic (Signals)
State Structure	Imposed (Single Tree)	Loose (Multiple Stores)	Flexible (Nuclei)
Ecosystem	Generic	Generic	ForgeStack Native

The Synapse Edge: We don't use selectors to prevent re-renders. Synapse uses Nuclei. Components become "Observers" of a specific Nucleus. When that Nucleus changes, only that component updates. It’s automatic, optimized, and invisible.

Visualizing the Complexity Gap

Here is a side-by-side comparison. Left (Redux): A cluttered, industrial, steam-punk dashboard of buttons, levers, and tangled code. Right (Synapse): A clean, sleek, minimalist panel with a few glowing touch-interfaces. Minimal, elegant code examples are embedded in the screen interfaces.

[invalid URL removed]

Technical Deep Dive: The Synapse Quick Start

You don't need actions, reducers, or creators. You just need a Nucleus.

import { createNucleus, useNucleus } from '@forgedevstack/synapse';

// 1. Create your Structured Nucleus (state)
const counterNucleus = createNucleus({ count: 0 });

// 2. Observer Component
function Counter() {
  //useNucleus turns this component into a direct observer of counterNucleus
  const [{ count }, setCounter] = useNucleus(counterNucleus);

  // Directly mutation-free updates. 
  const increment = () => setCounter((prev) => ({ count: prev.count + 1 }));

  return (
    <button onClick={increment}>
      Count is {count}
    </button>
  );
}

What’s New in Version 1.1.0?

The latest release makes Synapse the smartest connection in the Forge ecosystem.

1. Time-Travel Debugging 2.0 (Native DevTools)
Our professional-grade DevTools are now native and can be dropped into your app. This UI features a video-player-like "scrubber" that lets you move back and forth through your entire state history with zero overhead.

Slide 2: Time-Travel Debugging in Action

A modern dark-mode interface dashboard of the Synapse Native DevTools. A prominent Time-Travel video scrubber is active at the bottom, with small state-snapshot icons along the timeline. The main view displays a hierarchical state tree.

[invalid URL removed]

2. Atomic Persistence
You can now mark specific Nuclei to be stored and rehydrated automatically. Synapse handles the synchronization to localStorage or sessionStorage in the background.

// Persists automatically to localStorage under key 'theme_state'
const themeNucleus = createNucleus('light', { persist: 'localStorage' });

3. Computed Nuclei (Derived State)
Define state that depends on other Nuclei. Computed values update only when their source dependencies change.

4. Forge-Compass Sync
Directly sync your Synapse state with your URL. Perfect for filtering, sorting, or pagination where the state must live in the URL but react like an in-memory Signal.

Redux to Synapse Migration Guide

If you are fatigued by boilerplate, migrating to Synapse is straightforward. We use the same conceptual mental model—predictable state flow—but remove the manual wiring.

Step 1: Replace the Redux Store

Instead of a single store, you create independent Nuclei based on your domains.

From Redux:

// redux/store.ts
const store = configureStore({ reducer: { user: userReducer } });
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

// redux/userSlice.ts
const userSlice = createSlice({
  name: 'user',
  initialState: { profile: null },
  reducers: { setProfile: (state, action) => { state.profile = action.payload; } }
});

To Synapse:

// synapse/nuclei.ts
import { createNucleus } from '@forgedevstack/synapse';

export const userNucleus = createNucleus({ profile: null });

// Updates are performed mutation-free in-place
export const setProfile = (profile: User) => userNucleus.set({ profile });

Step 2: Connect the UI

Replace selectors and dispatch with useNucleus.

From Redux:

function UserProfile() {
  const dispatch = useDispatch();
  // Selector prevents re-renders (manually optimized)
  const profile = useSelector((state: RootState) => state.user.profile);

  useEffect(() => {
    fetchProfile().then((data) => dispatch(setProfile(data)));
  }, [dispatch]);

  if (!profile) return <div>Loading...</div>;
  return <div>Welcome, {profile.name}</div>;
}

To Synapse:

function UserProfile() {
  // Directly observing the userNucleus (automatically optimized)
  const [{ profile }] = useNucleus(userNucleus);

  // We perform the set externally, no dispatch needed
  useEffect(() => {
    fetchProfile().then(setProfile);
  }, []);

  if (!profile) return <div>Loading...</div>;
  return <div>Welcome, {profile.name}</div>;
}

By removing the slice, actions, reducers, and dispatch wiring, we reduced the complexity of this feature by ~70%.

The Forge Ecosystem: Why It Matters

Synapse isn't a generic library; it is the Connective Neural Tissue of the Forge Stack.

The Forge ecosystem is a "harmony" of specialized tools. Bear UI defines the visual layer, Harbor handles the database and API pipeline, and Synapse is the state brain that connects them.

Visualizing the Synapse Neural Ecosystem

An architectural overview map. A glowing digital human brain (Synapse) acts as a central neural network hub. Glowing neon cyan and teal network lines connect outwards to distinct glowing icons representing: Bear UI, Grid Table, Harbor Server, and Lingo Portal. The entire ecosystem is alive, flowing with data.

[invalid URL removed]

When used with Forge Studio, this integration goes to the next level. The Forge Agent (our dedicated AI assistant) can take your database schema from Harbor and automatically forge your entire Synapse state layer, including persistence and type-safety, in seconds.

Stop managing state. Start Forging it.

Learn More & Get Started:

Documentation: forgedevstack.com/synapse

Social Media Posts (Adapting the Article)

Reddit Post (e.g., r/ReactJS, r/WebDev)

Title: State Management Wars are Dead. Meet Synapse: The boilerplate-free Neural Layer with Native DevTools.

Hey r/ReactJS,

State management Fatigue is real. We’ve all felt it: the Redux boilerplate slowdown, or the Zustand scaling anxiety. I felt it too, which is why I built Synapse, and it just hit v1.1.0.

Synapse is a Structured Signal System. It’s not just about where data lives; it’s about how your components perceive it.

Synapse Key Selling Points:

OBSERVER SYSTEM: We don't use selectors. Components become automatically optimized 'observers' of a 'Nucleus'. When that specific Nucleus changes, only that component updates. Period. Zero manual optimization.
TIME-TRAVEL DEBUGGING 2.0: The DevTools are native and look like a video player. You can just drop the UI in and start scrubbing history.
ATOMIC PERSISTENCE: mark a Nucleus for persistence (localStorage/sessionStorage) in one line. Synapse handles rehydration and sync in the background.
ZERO BOILERPLATE: No slices, no creators, no reducers. Create state in one line, use it in one line.

What the Migration Looks Like:
(Redux: ~70 lines of boilerplate vs. Synapse: ~10 lines of clean code.)

I built this specifically to integrate with our larger ForgeStack ecosystem, but Synapse is framework-agnostic (React adapter included). We are looking for performance, feedback, and optimization critiques.

GitHub: https://github.com/forgedevstack/forge-synapse
NPM: npm install @forgedevstack/synapse

Give it a try and tell me why I’m right (or wrong) about the end of the boilerplate era.

Stop managing state. Start Forging it.

🚀 Get Started: https://forgedevstack.com/synapse

WebPerformance #EnterpriseScale #ForgeStack #DevDX #SynapseState

Grid Table — 1.0.7

John Yaghobieh — Thu, 05 Mar 2026 19:51:29 +0000

@forgedevstack/grid-table is a powerful, feature-rich React data grid with 30+ features: cell editing, multi-format export, keyboard navigation, context menu, tree data, row reordering, frozen rows, undo/redo, and print mode. Zero-config SCSS styling. Part of ForgeStack.

Live site: grid-table.com
npm: @forgedevstack/grid-table · Version: 1.0.7
License: MIT

What We Have
New in 1.0.7
Benefits
Screenshots from grid-table.com
Quick Start
Links & Resources

What We Have

Core Features

Feature	Description
Cell editing	Inline edit with validation (text, number, select, date, boolean). Double-click to edit, Enter to save, Escape to cancel.
Dark / light theme	Built-in theme support with customizable colors.
Filtering	Column-level and global filtering with multiple operators (equals, contains, startsWith, etc.).
Sorting	Single and multi-column sorting with custom sort functions.
Drag & drop	Reorder columns by dragging headers.
Column resize	Adjust column widths by dragging the resize handle.
Pagination	Built-in pagination with configurable page sizes.
Row selection	Single and multi-select with select-all / deselect-all.
Row expansion	Expandable rows with custom content (`renderRowExpansion`).
Responsive	Mobile-first design; optional mobile drawer for filters/sorting.

Display & UX

Feature	Description
Table effects	Sort animations, row entry effects, hover highlights via `tableEffects`.
Lazy load	Infinite scroll with configurable batch size.
Skeleton loading	Loading states that match table structure.
Overflow tooltip	Full cell content on hover when truncated.
Expandable sub-cell	Extra content per cell (double-click or arrow).
Studio panel	Dev/prototyping panel for inspecting data and props.
Context API	No prop drilling; access state via `useTable` and context.
TypeScript	Full type safety and generics for row data.
Accessibility	ARIA attributes and keyboard navigation.

v1.0.7 Feature Set (see New in 1.0.7)

Keyboard navigation, context menu, tree data, status bar, row reordering, Excel/PDF/CSV/JSON export, copy to clipboard, undo/redo, column pinning, column auto-fit, frozen rows, print mode.

New in 1.0.7

Release: 2026-02-24. Highlights:

Added

Keyboard navigation — Arrow keys to move between cells, Enter to edit, Escape to cancel, Tab, Home/End, PageUp/PageDown. Configure via keyboardNavigation prop.
Context menu — Right-click any cell for copy, filter by value, pin column, hide column. Custom actions via contextMenu.actions.
Tree data — Hierarchical rows with expand/collapse, indent, and toggle arrows. treeData with childrenField, expandAll, etc.
Status bar — Footer with row count, filtered/selected count, and column aggregations (sum, avg, min, max, count). Configure via statusBar.
Row reordering — Drag-and-drop rows with visual handle. rowReorder and onRowReorder.
Excel export — SpreadsheetML XML (.xls) via exportToExcel(). No extra dependencies.
PDF export — PDF via print dialog with exportToPDF(). Styled HTML table.
Copy to clipboard — Tab-separated copy with copyToClipboard() and enableCopy toolbar button.
Undo/redo — Edit history for cell edits (Ctrl+Z / Ctrl+Y). undoRedo, onUndo/onRedo, configurable max history.
Column pinning — Runtime pin/unpin columns (left/right) via context menu or context action.
Column auto-fit — Double-click column edge to auto-fit; optional global auto-fit via autoFit.
Frozen rows — Pin rows to top or bottom via frozenRows (e.g. totals). Stay visible while scrolling.
Print mode — printConfig adds print button; styled printable view with title and date.

New types, hooks, components

Types: ContextMenuConfig, StatusBarConfig, FrozenRowsConfig, TreeConfig, KeyboardNavConfig, RowReorderConfig, UndoRedoConfig, PrintConfig, AutoFitConfig, etc.
Hooks: useKeyboardNavigation, useRowReorder, useUndoRedo, useTreeData.
Components: ContextMenu, StatusBar.

Benefits

One dependency — React 16.8+ and optional Bear UI for controls. No heavy grid framework.
Zero-config styling — SCSS compiled to CSS; import one CSS file. Works with or without Bear.
Fully typed — TypeScript generics for rows and columns; full IntelliSense.
Composable — Use TableProvider + hooks for custom layouts and toolbars.
Export out of the box — CSV, JSON, Excel, PDF, copy, and print without extra libs.
Accessible — ARIA and keyboard support for better a11y.
Portal & docs — Live demos, playground, theme builder, and docs at grid-table.com.
ForgeStack ecosystem — Fits with Bear UI, Forge Compass, and other ForgeStack packages.

Screenshots from grid-table.com

Screenshots below are from the live demos at https://grid-table.com/.-

1. Basic Demo — full-featured table

Full table with pagination, filters, export, context menu, status bar, frozen row, and loading test.

URL: https://grid-table.com/demos/basic

2. Features Demo — v1.0.7 highlights

Four sections: Context Menu + Status Bar + Export; Row Reorder + Undo/Redo + Keyboard Nav; Tree Data; Frozen Rows + Print.

URL: https://grid-table.com/demos/features context menu and status bar
- docs/screenshots/features-row-reorder.png — Task table with row reorder and status bar
- docs/screenshots/features-tree.png — Tree data (hierarchical employees)
- docs/screenshots/features-frozen-print.png — Frozen rows and print

3. Finance Demo — live data

Live-updating table with sparklines (if applicable).

URL: https://grid-table.com/demos/finance

4. HR Demo — tree view

Hierarchical HR tree with expand/collapse.

URL: https://grid-table.com/demos/hr

5. Theme Builder

Interactive theme customization and code export.

URL: https://grid-table.com/theme-builder

6. Playground

Toggle props live and see generated code.

URL: https://grid-table.com/playground

Quick Start

Install

npm i @forgedevstack/grid-table

Import CSS (required)

import '@forgedevstack/grid-table/grid-table.css';

Minimal example

import { GridTable } from '@forgedevstack/grid-table';
import type { ColumnDefinition } from '@forgedevstack/grid-table';
import '@forgedevstack/grid-table/grid-table.css';

interface User {
  id: number;
  name: string;
  email: string;
  role: string;
  [key: string]: unknown;
}

const columns: ColumnDefinition<User>[] = [
  { id: 'name', accessor: 'name', header: 'Name', sortable: true, filterable: true },
  { id: 'email', accessor: 'email', header: 'Email', sortable: true },
  { id: 'role', accessor: 'role', header: 'Role', filterType: 'select', filterOptions: [
    { value: 'admin', label: 'Admin' },
    { value: 'user', label: 'User' },
  ]},
];

const data: User[] = [
  { id: 1, name: 'John Doe', email: 'john@example.com', role: 'admin' },
  { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'user' },
];

function App() {
  return (
    <GridTable
      data={data}
      columns={columns}
      enableRowSelection
      showPagination
      showFilter
      enableExport={['csv', 'json', 'excel', 'pdf']}
      tableEffects={{ hover: true, sort: true, row: true }}
    />
  );
}

Links & Resources

Resource	URL
Live portal	grid-table.com
Basic demo	grid-table.com/demos/basic
Features demo (1.0.7)	grid-table.com/demos/features
Finance demo	grid-table.com/demos/finance
HR demo	grid-table.com/demos/hr
Theme builder	grid-table.com/theme-builder
Playground	grid-table.com/playground
npm	npmjs.com/package/@forgedevstack/grid-table
GitHub	github.com/yaghobieh/grid-table
ForgeStack	forgedevstack.com

Grid Table v1.0.7 — part of the ForgeStack ecosystem.

Bear UI 1.1.2 + ForgeStack Ecosystem Update (Kiln, Crucible, CLI)

John Yaghobieh — Fri, 27 Feb 2026 21:59:25 +0000

The ForgeStack ecosystem just got a major quality pass, and Bear UI 1.1.2 is the center of it.

This update is not only about new components — it also improves docs, theming control, release flow, and the developer experience across tools like Kiln, Crucible, and the ForgeStack CLI.

What’s New in Bear UI 1.1.2

New components

FormField (TextField-style behavior)
- outlined, filled, and standard
- label starts inside, floats on focus/value
AspectRatio
- clean media/layout ratio container
PasswordInput
- visibility toggle
- shift/caps indicator option
- custom icon props
AlertDialog
- confirmation flows with a11y defaults
InputGroup
- grouped field labels, helper/error structure

Existing component upgrades

Input
- clearable, onClear, success, aria-invalid
- character counter support
Button
- loadingText, aria-busy
- icon size consistency fixes
ResizableTextarea / RichEditor
- improved counter/label/error behavior

Theming Improvements (Big One)

A key goal was making components truly themeable through BearProvider.

Now you can centrally override styles (like border, color, font size) for more field-level components, including FormField and Input, instead of styling each usage manually.

Example:

<BearProvider
  components={{
    FormField: {
      input: { borderColor: '#ec4899', fontSize: '15px' },
      label: { color: '#ec4899' },
      outlined: { borderColor: '#f472b6' },
    },
    Input: {
      input: { borderColor: '#ec4899' },
      label: { color: '#ec4899' },
    },
  }}
>
  <App />
</BearProvider>

Portal Updates (bearui.com)

Reworked nav structure
New Theming & Customization documentation sections
Better Store presentation (MUI-inspired structure, no payment flow)
Improved topbar UX:
- command-palette style search trigger (⌘K / Ctrl+K)
- release/notification updates
- settings and cookie preferences
Added Spanish-ready UI strings foundation for key sections

ForgeStack Ecosystem News

Kiln

Kiln direction is being refined around publishing workflow and better integration patterns with the broader stack.

Crucible

Crucible continues to evolve as part of the ecosystem roadmap, with focus on practical developer workflows and interoperability.

ForgeStack CLI

Template flow is expanding and becoming more visible in the portal:

npx create-forge my-app --template react

This is the fastest way to bootstrap with Bear + ForgeStack conventions.

Why this release matters

1.1.2 is a “developer quality” release:

better component behavior parity with familiar UI patterns
cleaner theming system
stronger docs and discoverability
tighter ecosystem story (Bear + CLI + tools)

If you already use Bear, this release removes friction.

If you are new, it makes the first-run experience much smoother.

DEV Community: John Yaghobieh

The ForgeStack Release Wave: Four New Libraries and the Missing Pieces for Real-Time, AI-Powered Apps

The Problem We Kept Hitting

Pillar 1: Real Time — Harbor WS Hub + Forge Socket

Pillar 2: Auth — Forge Auth 2.0.0

Pillar 3: AI — Forge AI 1.0.0

Pillar 4: MCP — Forge MCP 1.0.0

Grid Table Grows Up

The Supporting Cast

What This Adds Up To

Getting Started

How I'm Preventing Most of the Bugs Before They Ship — Bear UI 1.2.4

The problem with "it worked on my machine"

What the sanity layer does

The three Playwright suites

1. Render sanity (135 tests)

2. Interaction checks (119 tests)

3. Dark mode (21 tests)

The code review gates

The sanity report

It already found a real bug

Setting it up

What's next

Bear UI 1.2.3: Goodbye Tailwind, Hello AeroCraft

Why we moved off Tailwind

What AeroCraft changes under the hood

Before (Tailwind)

After (AeroCraft)

What this means for your app

Component updates in 1.2.3

Button

Input

Dropdown

Drawer

Ecosystem context (1.2.2 → 1.2.3)

Upgrade

Links

AeroCraft: Less CSS, Faster UI Delivery

Why AeroCraft?

Advantages vs Typical Utility-First Setup

1) Shorter, clearer class names

2) Config-driven design system

3) Framework-agnostic output

4) Responsive-ready utilities

5) Better scaling for teams

Quick Start

postcss.config.js

src/styles/aerocraft.css

src/main.tsx (or equivalent entry)

Real Config Example

Usage Patterns

A) Utility composition

B) Component-style composition

C) Responsive usage

When AeroCraft Fits Best

Summary

Rail: We’re Proud to Open-Source the Motion Layer We Always Wanted for React

Why Rail exists (the short, loud version)

Part of ForgeStack — and built to sit next to Bear

The portal, the API surface, and Rail Studio

A taste of the API

What we’re asking of you

Link sheet (copy for anywhere)

dev.to publishing checklist

LinkedIn companion (paste below the fold or as a short article)

OpenSource #React #TypeScript #WebDev #UI #ForgeStack #JavaScript #FrontEnd

Grid Table v1.0.8: Mobile Layout Control + Server Pagination

Highlights

1) New mobileLayout prop

2) Manual pagination for API slices

3) UX + stability improvements

4) Portal got much better

Why this matters

Ecosystem fit

Try it

Bear UI v1.1.5: PropsPlayground, PageNav, Button Refactor, and a Polished Portal

What's in 1.1.5?

New components

New hook: useResizeObserver

Bear-themed icons

`postcss.config.js`

`src/styles/aerocraft.css`

`src/main.tsx` (or equivalent entry)

1) New `mobileLayout` prop

1. Concurrent Rendering & `@use` (Data Fetching & Suspension)

2. Actions & `useActionState` (Native Form Interception & Lifecycle)

3. Optimistic Updates & `useOptimistic` (Zero-Lag UI & Rollback Mechanics)