fix automerge call-sties

code/ext/ext.lib.automerge/src/ui/common/types.ts

@@ -5,10 +5,12 @@ export type {
   CssEdgesInput,
   CssValue,
   DevCtxState,
+  GetLabelItem,
   LabelItem,
   LabelItemRendererArgs,
   LabelItemRenderers,
   LabelItemState,
+  LabelListDispatch,
   LabelListState,
   PropListProps,
   RenderCountProps,

code/ext/ext.lib.automerge/src/ui/ui.RepoList/-SPEC.tsx

@@ -24,13 +24,17 @@ export default Dev.describe(name, (e) => {
       .size([330, null])
       .display('grid')
       .render<T>((e) => {
-        const current = model.list.current;
+        const renderCount: t.RenderCountProps = {
+          absolute: [-20, 2, null, null],
+          opacity: 0.2,
+          prefix: 'list.render-',
+        };
         return (
-          <List
-            list={current.state}
-            items={current.items}
+          <RepoList
+            //
+            list={model.list}
             renderers={model.renderers}
-            renderCount={{ absolute: [-20, 2, null, null], opacity: 0.2, prefix: 'list.render-' }}
+            renderCount={renderCount}
           />
         );
       });

code/ext/ext.lib.automerge/src/ui/ui.RepoList/Model.Item.ts

@@ -38,7 +38,7 @@ export const ItemModel = {
     /**
      * Behavior.
      */
-    const add = () => {
+    const add = async () => {
       const ctx = args.ctx();
       console.log('add', store);
       state.change((d) => {
@@ -49,9 +49,12 @@ export const ItemModel = {
       dispatch.redraw();
 
       ctx.list.change((d) => {
-        const next = ItemModel.state(args);
-        d.items.push(next);
+        // const items = d.items || (d.items = []);
+        // const next = ItemModel.state(args);
+        // items.push(next);
       });
+
+      ctx.dispatch.redraw();
     };
 
     const mode = () => Data.item(state).mode;

code/ext/ext.lib.automerge/src/ui/ui.RepoList/Model.List.ts

@@ -1,19 +1,35 @@
 import { PatchState, Model, type t } from './common';
 import { ItemModel } from './Model.Item';
+import { renderers } from './Model.Item.render';
 
 export const List = {
   /**
    * Initialise a new state model for a Repo.
    */
   init(store: t.Store) {
-    const ctx: t.GetRepoListCtx = () => ({ list });
+    const ctx: t.GetRepoListCtx = () => ({ list, dispatch });
     const first = ItemModel.init({ store, ctx });
-    const renderers = first.renderers;
-    const initial: t.RepoList = {
-      state: Model.List.state(),
-      items: [first.state],
+
+    const getItem: t.GetLabelItem = (target) => {
+      if (typeof target === 'number') {
+        const index = target;
+        if (index === 0) return [first.state, index];
+      } else {
+        /**
+         * TODO 🐷
+         */
+      }
+
+      return [undefined, -1];
     };
-    const list = PatchState.init<t.RepoList>({ initial });
-    return { list, renderers };
+
+    const list = Model.List.state({ total: 1, getItem });
+    const dispatch = Model.List.commands(list);
+
+    return {
+      ctx,
+      list,
+      renderers: renderers({ ctx }),
+    } as const;
   },
 } as const;

code/ext/ext.lib.automerge/src/ui/ui.RepoList/types.ts

@@ -4,14 +4,17 @@ import { type t } from './common';
  * <Component>
  */
 export type RepoListProps = {
+  list?: t.RepoListState;
+  renderers?: t.RepoItemRenderers;
+  renderCount?: t.RenderCountProps;
   style?: t.CssValue;
 };
 
 /**
  * Model: Context
  */
 export type GetRepoListCtx = () => RepoListCtx;
-export type RepoListCtx = { list: RepoListState };
+export type RepoListCtx = { list: RepoListState; dispatch: t.LabelListDispatch };
 
 /**
  * Model: Item
@@ -24,8 +27,7 @@ export type RepoItemRenderers = t.LabelItemRenderers<t.RepoListAction>;
 /**
  * Model: List
  */
-export type RepoListState = t.PatchState<t.RepoList>;
-export type RepoList = { state: t.LabelListState; items: t.RepoItemState[] };
+export type RepoListState = t.LabelListState;
 
 /**
  * Model: Data

code/ext/ext.lib.automerge/src/ui/ui.RepoList/ui.List.tsx

@@ -2,40 +2,40 @@ import { LabelItem, RenderCount, css, type t } from './common';
 
 export type ListProps = {
   list?: t.LabelListState;
-  items?: t.RepoItemState[];
   renderers?: t.RepoItemRenderers;
   style?: t.CssValue;
   renderCount?: t.RenderCountProps;
 };
 
 export const List: React.FC<ListProps> = (props) => {
-  const { list, items = [] } = props;
-  const controller = LabelItem.Stateful.useListController({ list, items });
+  const { list } = props;
+  const { ref, Provider } = LabelItem.Stateful.useListController({ list });
 
   /**
    * [Render]
    */
   const styles = {
-    base: css({ position: 'relative', outline: 'none' }),
+    base: css({ position: 'relative' }),
   };
 
-  const elements = items.map((item, i) => {
+  const elements = LabelItem.Model.List.map(list, (item, i) => {
     return (
       <LabelItem.Stateful
-        key={`item.${i}`}
+        key={item.instance}
         index={i}
-        total={length}
-        list={controller.list}
+        list={list}
         item={item}
         renderers={props.renderers}
       />
     );
   });
 
   return (
-    <div ref={controller.ref} {...css(styles.base, props.style)} tabIndex={0}>
-      {props.renderCount && <RenderCount {...props.renderCount} />}
-      <div>{elements}</div>
-    </div>
+    <Provider>
+      <div ref={ref} {...css(styles.base, props.style)}>
+        {props.renderCount && <RenderCount {...props.renderCount} />}
+        <div>{elements}</div>
+      </div>
+    </Provider>
   );
 };

code/ext/ext.lib.automerge/src/ui/ui.RepoList/ui.tsx

@@ -1,19 +1,22 @@
-import { useEffect, useRef, useState } from 'react';
-import { Color, COLORS, css, DEFAULTS, FC, rx, type t } from './common';
+import { css, type t } from './common';
+import { List } from './ui.List';
 
 export const View: React.FC<t.RepoListProps> = (props) => {
+  const { list, renderers } = props;
+
   /**
-   * [Render]
+   * Render
    */
   const styles = {
-    base: css({
-      backgroundColor: 'rgba(255, 0, 0, 0.1)' /* RED */,
-    }),
+    base: css({ position: 'relative' }),
   };
 
   return (
-    <div {...css(styles.base, props.style)}>
-      <div>{`🐷 Store List`}</div>
-    </div>
+    <List
+      //
+      list={list}
+      renderers={renderers}
+      renderCount={props.renderCount}
+    />
   );
 };

code/ext/ext.lib.peerjs/src/ui/ui.Connector/Model.List.ts

@@ -14,6 +14,9 @@ export const List = {
         if (index === 0) return [self, index];
         if (index === 1) return [first, index];
       } else {
+        /**
+         * TODO 🐷
+         */
       }
 
       return [undefined, -1];