foldkit 0.33.6 → 0.34.1

package/README.md

@@ -1,8 +1,8 @@
 <p align="center">
   <picture>
-    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/devinjameson/foldkit/main/packages/website/public/logo-dark.svg">
-    <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/devinjameson/foldkit/main/packages/website/public/logo.svg">
-    <img src="https://raw.githubusercontent.com/devinjameson/foldkit/main/packages/website/public/logo.svg" alt="Foldkit" width="350">
+    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/foldkit/foldkit/main/packages/website/public/logo-dark.svg">
+    <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/foldkit/foldkit/main/packages/website/public/logo.svg">
+    <img src="https://raw.githubusercontent.com/foldkit/foldkit/main/packages/website/public/logo.svg" alt="Foldkit" width="350">
   </picture>
 </p>
 
@@ -13,12 +13,12 @@
 <h3 align="center">The frontend framework for correctness.</h3>
 
 <p align="center">
-  <a href="https://foldkit.dev"><strong>Documentation</strong></a> · <a href="https://github.com/devinjameson/foldkit#examples"><strong>Examples</strong></a> · <a href="https://foldkit.dev/getting-started"><strong>Getting Started</strong></a>
+  <a href="https://foldkit.dev"><strong>Documentation</strong></a> · <a href="https://github.com/foldkit/foldkit#examples"><strong>Examples</strong></a> · <a href="https://foldkit.dev/getting-started"><strong>Getting Started</strong></a>
 </p>
 
 ---
 
-Foldkit is an [Elm Architecture](https://guide.elm-lang.org/architecture/) framework for TypeScript, powered by [Effect](https://effect.website/). One Model, one update function, one way to do things. No hooks, no local state, no hidden mutations.
+Foldkit is a frontend framework for TypeScript, built on [Effect](https://effect.website/), using [The Elm Architecture](https://guide.elm-lang.org/architecture/). One Model, one update function, one way to do things. No hooks, no local state, no hidden mutations.
 
 > [!NOTE]
 > Foldkit is pre-1.0. The core API is stable, but breaking changes may occur in minor releases. See the [changelog](./CHANGELOG.md) for details.
@@ -129,7 +129,7 @@ const element = Runtime.makeElement({
 Runtime.run(element)
 ```
 
-Source: [examples/counter/src/main.ts](https://github.com/devinjameson/foldkit/blob/main/examples/counter/src/main.ts)
+Source: [examples/counter/src/main.ts](https://github.com/foldkit/foldkit/blob/main/examples/counter/src/main.ts)
 
 ## What Ships With Foldkit
 
@@ -153,19 +153,19 @@ This is what makes Foldkit unusually AI-friendly. The same property that makes t
 
 ## Examples
 
-- **[Counter](https://github.com/devinjameson/foldkit/blob/main/examples/counter/src/main.ts)** — Increment/decrement with reset
-- **[Todo](https://github.com/devinjameson/foldkit/blob/main/examples/todo/src/main.ts)** — CRUD operations with localStorage persistence
-- **[Stopwatch](https://github.com/devinjameson/foldkit/blob/main/examples/stopwatch/src/main.ts)** — Timer with start/stop/reset
-- **[Error View](https://github.com/devinjameson/foldkit/blob/main/examples/error-view/src/main.ts)** — Custom error fallback UI
-- **[Form](https://github.com/devinjameson/foldkit/blob/main/examples/form/src/main.ts)** — Form validation with async email checking
-- **[Weather](https://github.com/devinjameson/foldkit/blob/main/examples/weather/src/main.ts)** — HTTP requests with async state handling
-- **[Routing](https://github.com/devinjameson/foldkit/blob/main/examples/routing/src/main.ts)** — URL routing with parser combinators
-- **[Query Sync](https://github.com/devinjameson/foldkit/blob/main/examples/query-sync/src/main.ts)** — URL query parameter sync with filtering and sorting
-- **[Snake](https://github.com/devinjameson/foldkit/blob/main/examples/snake/src/main.ts)** — Classic game built with Subscriptions
-- **[Auth](https://github.com/devinjameson/foldkit/blob/main/examples/auth/src/main.ts)** — Authentication flow with Submodels and OutMessage
-- **[Shopping Cart](https://github.com/devinjameson/foldkit/blob/main/examples/shopping-cart/src/main.ts)** — Nested models and complex state
-- **[WebSocket Chat](https://github.com/devinjameson/foldkit/blob/main/examples/websocket-chat/src/main.ts)** — Managed Resources with WebSocket integration
-- **[Typing Game](https://github.com/devinjameson/foldkit/tree/main/packages/typing-game)** — Multiplayer typing game with Effect RPC backend
+- **[Counter](https://github.com/foldkit/foldkit/blob/main/examples/counter/src/main.ts)** — Increment/decrement with reset
+- **[Todo](https://github.com/foldkit/foldkit/blob/main/examples/todo/src/main.ts)** — CRUD operations with localStorage persistence
+- **[Stopwatch](https://github.com/foldkit/foldkit/blob/main/examples/stopwatch/src/main.ts)** — Timer with start/stop/reset
+- **[Error View](https://github.com/foldkit/foldkit/blob/main/examples/error-view/src/main.ts)** — Custom error fallback UI
+- **[Form](https://github.com/foldkit/foldkit/blob/main/examples/form/src/main.ts)** — Form validation with async email checking
+- **[Weather](https://github.com/foldkit/foldkit/blob/main/examples/weather/src/main.ts)** — HTTP requests with async state handling
+- **[Routing](https://github.com/foldkit/foldkit/blob/main/examples/routing/src/main.ts)** — URL routing with parser combinators
+- **[Query Sync](https://github.com/foldkit/foldkit/blob/main/examples/query-sync/src/main.ts)** — URL query parameter sync with filtering and sorting
+- **[Snake](https://github.com/foldkit/foldkit/blob/main/examples/snake/src/main.ts)** — Classic game built with Subscriptions
+- **[Auth](https://github.com/foldkit/foldkit/blob/main/examples/auth/src/main.ts)** — Authentication flow with Submodels and OutMessage
+- **[Shopping Cart](https://github.com/foldkit/foldkit/blob/main/examples/shopping-cart/src/main.ts)** — Nested models and complex state
+- **[WebSocket Chat](https://github.com/foldkit/foldkit/blob/main/examples/websocket-chat/src/main.ts)** — Managed Resources with WebSocket integration
+- **[Typing Game](https://github.com/foldkit/foldkit/tree/main/packages/typing-game)** — Multiplayer typing game with Effect RPC backend
 
 ## License
 

package/dist/devtools/overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../src/devtools/overlay.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,MAAM,EAIN,MAAM,EAQP,MAAM,QAAQ,CAAA;AAOf,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAMxE,OAAO,EAAE,KAAK,aAAa,EAA+B,MAAM,SAAS,CAAA;AA4wCzE,eAAO,MAAM,aAAa,GACxB,OAAO,aAAa,EACpB,UAAU,gBAAgB,EAC1B,MAAM,YAAY,EAClB,aAAa,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,sCA4ChC,CAAA"}
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../src/devtools/overlay.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,MAAM,EAIN,MAAM,EAQP,MAAM,QAAQ,CAAA;AAOf,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAMxE,OAAO,EAAE,KAAK,aAAa,EAA+B,MAAM,SAAS,CAAA;AA2yCzE,eAAO,MAAM,aAAa,GACxB,OAAO,aAAa,EACpB,UAAU,gBAAgB,EAC1B,MAAM,YAAY,EAClB,aAAa,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,sCA4ChC,CAAA"}

package/dist/devtools/overlay.js

@@ -1,7 +1,7 @@
 import { clsx } from 'clsx';
 import { Array as Array_, Effect, HashSet, Match as M, Number as Number_, Option, Predicate, Record, Schema as S, Stream, String as String_, SubscriptionRef, pipe, } from 'effect';
 import { OptionExt } from '../effectExtensions';
-import { html } from '../html';
+import { createKeyedLazy, html } from '../html';
 import { m } from '../message';
 import { makeElement } from '../runtime/runtime';
 import { makeSubscriptions } from '../runtime/subscription';
@@ -352,6 +352,8 @@ const PANEL_POSITION_CLASS = {
 };
 const makeView = (position, mode, maybeBanner) => {
     const { div, header, span, ul, button, svg, path, keyed, Class, Style, OnClick, AriaHidden, Xmlns, Fill, ViewBox, StrokeWidth, Stroke, StrokeLinecap, StrokeLinejoin, D, } = html();
+    const lazyTreeNode = createKeyedLazy();
+    const lazyMessageRow = createKeyedLazy();
     // JSON TREE
     const leafValueView = (value) => M.value(value).pipe(M.when(Predicate.isNull, () => span([Class('json-null italic')], ['null'])), M.when(Predicate.isUndefined, () => span([Class('json-null italic')], ['undefined'])), M.when(Predicate.isString, stringValue => span([Class('json-string')], [`"${stringValue}"`])), M.when(Predicate.isNumber, numberValue => span([Class('json-number')], [String(numberValue)])), M.when(Predicate.isBoolean, booleanValue => span([Class('json-boolean')], [String(booleanValue)])), M.orElse(unknownValue => span([Class('json-null')], [String(unknownValue)])));
     const keyView = (key) => span([Class('json-key')], [`${key}:\u00a0`]);
@@ -375,72 +377,103 @@ const makeView = (position, mode, maybeBanner) => {
     const tagLabelView = (tag) => span([Class('json-tag')], [tag]);
     const diffDotView = span([Class('diff-dot')], []);
     const inlineDiffDotView = span([Class('diff-dot-inline')], []);
-    const flattenTree = (value, treePath, expandedPaths, changedPaths, affectedPaths, depth, maybeKey, accumulator, indentRootChildren) => {
+    const flattenTree = ({ value, treePath, depth, key, ...shared }) => {
+        const { expandedPaths, changedPaths, affectedPaths, accumulator, indentRootChildren, } = shared;
         const isRoot = treePath === 'root';
         const nodeIsExpandable = isExpandable(value);
         const isExpanded = nodeIsExpandable && (isRoot || HashSet.has(expandedPaths, treePath));
-        const maybeTag = pipe(value, Option.liftPredicate(isTagged), Option.map(({ _tag }) => _tag));
+        const tag = isTagged(value) ? value._tag : '';
         accumulator.push({
             value,
             treePath,
             depth,
-            maybeKey,
+            key,
             isExpandable: nodeIsExpandable,
             isExpanded,
             isChanged: HashSet.has(changedPaths, treePath),
             isAffected: HashSet.has(affectedPaths, treePath),
-            maybeTag,
+            tag,
         });
         if (!isExpanded) {
             return;
         }
         const childDepth = isRoot && !indentRootChildren ? depth : depth + 1;
         if (Array.isArray(value)) {
-            value.forEach((item, arrayIndex) => flattenTree(item, `${treePath}.${arrayIndex}`, expandedPaths, changedPaths, affectedPaths, childDepth, Option.some(String(arrayIndex)), accumulator, indentRootChildren));
+            value.forEach((item, arrayIndex) => flattenTree({
+                ...shared,
+                value: item,
+                treePath: `${treePath}.${arrayIndex}`,
+                depth: childDepth,
+                key: String(arrayIndex),
+            }));
         }
         else if (Predicate.isReadonlyRecord(value)) {
-            pipe(value, Record.toEntries, Array_.filter(([key]) => key !== '_tag'), Array_.forEach(([key, childValue]) => flattenTree(childValue, `${treePath}.${key}`, expandedPaths, changedPaths, affectedPaths, childDepth, Option.some(key), accumulator, indentRootChildren)));
+            pipe(value, Record.toEntries, Array_.filter(([entryKey]) => entryKey !== '_tag'), Array_.forEach(([entryKey, childValue]) => flattenTree({
+                ...shared,
+                value: childValue,
+                treePath: `${treePath}.${entryKey}`,
+                depth: childDepth,
+                key: entryKey,
+            })));
         }
     };
-    const flatNodeView = (node) => {
-        const indent = Style({ paddingLeft: `${node.depth * TREE_INDENT_PX}px` });
-        const hasDiffDot = node.isChanged || node.isAffected;
-        if (!node.isExpandable) {
+    const flatNodeView = (value, treePath, depth, key, nodeIsExpandable, isExpanded, isChanged, isAffected, tag) => {
+        const indent = Style({ paddingLeft: `${depth * TREE_INDENT_PX}px` });
+        const hasDiffDot = isChanged || isAffected;
+        if (!nodeIsExpandable) {
             return div([
-                Class(clsx('tree-row flex items-center gap-px font-mono text-2xs', node.isChanged && 'diff-changed')),
+                Class(clsx('tree-row flex items-center gap-px font-mono text-2xs', isChanged && 'diff-changed')),
                 indent,
             ], [
                 ...(hasDiffDot ? [diffDotView] : []),
-                ...Array_.getSomes([Option.map(node.maybeKey, keyView)]),
-                leafValueView(node.value),
+                ...(String_.isNonEmpty(key) ? [keyView(key)] : []),
+                leafValueView(value),
             ]);
         }
-        const isRoot = node.treePath === 'root';
-        const preview = node.isExpanded
-            ? Array.isArray(node.value)
-                ? `(${node.value.length})`
+        const isRoot = treePath === 'root';
+        const preview = isExpanded
+            ? Array.isArray(value)
+                ? `(${value.length})`
                 : ''
-            : collapsedPreview(node.value);
+            : collapsedPreview(value);
         return div([
-            Class(clsx('tree-row flex items-center gap-px font-mono text-2xs', !isRoot && 'tree-row-expandable cursor-pointer', node.isChanged && 'diff-changed')),
+            Class(clsx('tree-row flex items-center gap-px font-mono text-2xs', !isRoot && 'tree-row-expandable cursor-pointer', isChanged && 'diff-changed')),
             indent,
-            ...(isRoot ? [] : [OnClick(ToggledTreeNode({ path: node.treePath }))]),
+            ...(isRoot ? [] : [OnClick(ToggledTreeNode({ path: treePath }))]),
         ], [
-            ...(isRoot ? [] : [arrowView(node.isExpanded)]),
+            ...(isRoot ? [] : [arrowView(isExpanded)]),
             ...(!isRoot && hasDiffDot ? [diffDotView] : []),
-            ...Array_.getSomes([
-                Option.map(node.maybeKey, keyView),
-                Option.map(node.maybeTag, tagLabelView),
-            ]),
+            ...(String_.isNonEmpty(key) ? [keyView(key)] : []),
+            ...(String_.isNonEmpty(tag) ? [tagLabelView(tag)] : []),
             span([Class('json-preview')], [preview]),
         ]);
     };
     const treeView = (value, rootPath, expandedPaths, changedPaths, affectedPaths, maybeRootLabel, indentRootChildren) => {
         const nodes = [];
-        flattenTree(value, rootPath, expandedPaths, changedPaths, affectedPaths, 0, maybeRootLabel, nodes, indentRootChildren);
+        flattenTree({
+            value,
+            treePath: rootPath,
+            expandedPaths,
+            changedPaths,
+            affectedPaths,
+            depth: 0,
+            key: Option.getOrElse(maybeRootLabel, () => ''),
+            accumulator: nodes,
+            indentRootChildren,
+        });
         return div([
             Class('inspector-tree flex-1 overflow-auto min-h-0 min-w-0 overscroll-none'),
-        ], nodes.map(flatNodeView));
+        ], nodes.map(node => lazyTreeNode(node.treePath, flatNodeView, [
+            node.value,
+            node.treePath,
+            node.depth,
+            node.key,
+            node.isExpandable,
+            node.isExpanded,
+            node.isChanged,
+            node.isAffected,
+            node.tag,
+        ])));
     };
     const inspectedTimestamp = (model) => {
         const lastIndex = Array_.isEmptyReadonlyArray(model.entries)
@@ -490,12 +523,15 @@ const makeView = (position, mode, maybeBanner) => {
             model: model.inspectorTabs,
             toMessage: tabsMessage => GotInspectorTabsMessage({ message: tabsMessage }),
             tabs: INSPECTOR_TABS,
-            className: 'flex flex-col flex-1 min-h-0',
-            tabListClassName: 'flex border-b shrink-0',
+            tabListAriaLabel: 'Inspector tabs',
+            attributes: [Class('flex flex-col flex-1 min-h-0')],
+            tabListAttributes: [Class('flex border-b shrink-0')],
             tabToConfig: (tab, { isActive }) => ({
-                buttonClassName: clsx('dt-tab-button cursor-pointer text-base font-mono px-3 py-1', isActive ? 'text-dt dt-tab-active' : 'text-dt-muted'),
+                buttonAttributes: [
+                    Class(clsx('dt-tab-button cursor-pointer text-base font-mono px-3 py-1', isActive ? 'text-dt dt-tab-active' : 'text-dt-muted')),
+                ],
                 buttonContent: span([], [tab]),
-                panelClassName: 'flex flex-col flex-1 min-h-0 min-w-0',
+                panelAttributes: [Class('flex flex-col flex-1 min-h-0 min-w-0')],
                 panelContent: Option.match(model.maybeInspectedModel, {
                     onNone: () => emptyInspectorView,
                     onSome: inspectedModel => inspectorTabContent(model, tab, inspectedModel),
@@ -608,7 +644,14 @@ const makeView = (position, mode, maybeBanner) => {
             const absoluteIndex = model.startIndex + arrayIndex;
             const isSelected = selectedIndex === absoluteIndex;
             const isPausedHere = model.isPaused && model.pausedAtIndex === absoluteIndex;
-            return messageRowView(entry.tag, absoluteIndex, isSelected, isPausedHere, entry.timestamp - baseTimestamp, entry.isModelChanged);
+            return lazyMessageRow(String(absoluteIndex), messageRowView, [
+                entry.tag,
+                absoluteIndex,
+                isSelected,
+                isPausedHere,
+                entry.timestamp - baseTimestamp,
+                entry.isModelChanged,
+            ]);
         }), Array_.reverse);
         return ul([Class('message-list flex-1 overflow-y-auto min-h-0 overscroll-none')], [
             ...messageRows,