@jigs.design/react 0.1.1 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,19 +1,19 @@
1
1
  # @jigs.design/react
2
2
 
3
- The web renderer. `PickleView` runs a compiled program in a sandboxed frame and draws it with your registry. `usePickleSession` holds a conversation with the server and streams its latest program.
3
+ The web renderer. `JigsView` runs a compiled program in a sandboxed frame and draws it with your registry. `useJigsSession` holds a conversation with the server and streams its latest program.
4
4
 
5
5
  ```tsx
6
6
  import { components } from "@jigs.design/catalog/react";
7
- import { PickleView, usePickleSession } from "@jigs.design/react";
8
- import { client } from "./pickle-client";
7
+ import { JigsView, useJigsSession } from "@jigs.design/react";
8
+ import { client } from "./jigs-client";
9
9
 
10
10
  export function App() {
11
- const session = usePickleSession(client);
11
+ const session = useJigsSession(client);
12
12
  return (
13
13
  <>
14
14
  <button onClick={() => session.send("My open orders")}>Ask</button>
15
15
  {session.program && (
16
- <PickleView
16
+ <JigsView
17
17
  client={client}
18
18
  components={components}
19
19
  documentId={session.documentId}
@@ -25,28 +25,28 @@ export function App() {
25
25
  }
26
26
  ```
27
27
 
28
- The program runs in a worker inside a frame served by your Pickle route. The frame has no network: queries and mutations go through the client, and every prop is checked against the program's schema before it reaches your component. A new `program` replaces the running one and keeps the state it still declares. `onAction` handles the program's actions after the server checked their input. The view drops an `autoFocus` prop unless you pass `allowAutoFocus`, so a pickle streaming into a chat cannot take the focus. It checks what the worker asks for against the program, since the worker is not trusted.
28
+ The program runs in a worker inside a frame served by your Jigs route. The frame has no network: queries and mutations go through the client, and every prop is checked against the program's schema before it reaches your component. A new `program` replaces the running one and keeps the state it still declares. `onAction` handles the program's actions after the server checked their input. The view drops an `autoFocus` prop unless you pass `allowAutoFocus`, so a jig streaming into a chat cannot take the focus. It checks what the worker asks for against the program, since the worker is not trusted.
29
29
 
30
30
  ## Exports
31
31
 
32
- | Export | What it is |
33
- | ------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
34
- | `PickleView` | Runs one program and draws it. Takes `client`, `components`, `program`, `onAction`, `showIssues`, `allowAutoFocus` |
35
- | `usePickleSession` | The conversation and its latest program. `initialMessages` resumes one |
36
- | `useHandlerSettled` | For a registry control: changes once the program has answered its events, so it can drop an edit the program refused |
37
- | `useLocalValue`, `controlled` | For a controlled control: a local copy of the program's value that runs ahead of the round trip and drops a refused edit |
38
- | `Registry`, `RegistryFor` | The type of a map from catalog names to React components |
39
- | `SessionState`, `PickleSession` | The session's state and the hook's return value |
40
- | `ViewIssue` | What `onIssue` receives |
32
+ | Export | What it is |
33
+ | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
34
+ | `JigsView` | Runs one program and draws it. Takes `client`, `components`, `program`, `onAction`, `showIssues`, `allowAutoFocus` |
35
+ | `useJigsSession` | The conversation and its latest program. `initialMessages` resumes one |
36
+ | `useHandlerSettled` | For a registry control: changes once the program has answered its events, so it can drop an edit the program refused |
37
+ | `useLocalValue`, `controlled` | For a controlled control: a local copy of the program's value that runs ahead of the round trip and drops a refused edit |
38
+ | `Registry`, `RegistryFor` | The type of a map from catalog names to React components |
39
+ | `SessionState`, `JigsSession` | The session's state and the hook's return value |
40
+ | `ViewIssue` | What `onIssue` receives |
41
41
 
42
- It re-exports the shared types from `@jigs.design/runtime`. The frame, its messages and the calls through the client are `createViewController` in `@jigs.design/client`, which `PickleView` is built on; a renderer for another framework starts there.
42
+ It re-exports the shared types from `@jigs.design/runtime`. The frame, its messages and the calls through the client are `createViewController` in `@jigs.design/client`, which `JigsView` is built on; a renderer for another framework starts there.
43
43
 
44
44
  ## Source
45
45
 
46
- - `src/view/PickleView.tsx`: the view component, on the client's view controller.
46
+ - `src/view/JigsView.tsx`: the view component, on the client's view controller.
47
47
  - `src/view/registry.ts`, `src/view/settled.ts`: the registry types and `useHandlerSettled`.
48
48
  - `src/view/local-value.ts`: `useLocalValue` and `controlled`, for controls.
49
- - `src/view/session.ts`, `src/view/usePickleSession.ts`: the session store and its hook.
49
+ - `src/view/session.ts`, `src/view/useJigsSession.ts`: the session store and its hook.
50
50
 
51
51
  ## Docs
52
52
 
package/dist/index.d.ts CHANGED
@@ -1,9 +1,9 @@
1
1
  import { controlled, useLocalValue } from "./view/local-value.js";
2
2
  import { Registry, RegistryFor } from "./view/registry.js";
3
- import { PickleView } from "./view/PickleView.js";
3
+ import { JigsView } from "./view/JigsView.js";
4
4
  import { useHandlerSettled } from "./view/settled.js";
5
5
  import { SessionState } from "./view/session.js";
6
- import { PickleSession, usePickleSession } from "./view/usePickleSession.js";
6
+ import { JigsSession, useJigsSession } from "./view/useJigsSession.js";
7
7
  import { ConfirmFunction, ViewIssue } from "@jigs.design/client";
8
- import { Diagnostic, Message, PickleErrorCode, PickleErrorData, Program, SessionEvent, SessionOptions, Span } from "@jigs.design/runtime";
9
- export { type ConfirmFunction, type Diagnostic, type Message, type PickleErrorCode, type PickleErrorData, type PickleSession, PickleView, type Program, type Registry, type RegistryFor, type SessionEvent, type SessionOptions, type SessionState, type Span, type ViewIssue, controlled, useHandlerSettled, useLocalValue, usePickleSession };
8
+ import { Diagnostic, JigsErrorCode, JigsErrorData, Message, Program, SessionEvent, SessionOptions, Span } from "@jigs.design/runtime";
9
+ export { type ConfirmFunction, type Diagnostic, type JigsErrorCode, type JigsErrorData, type JigsSession, JigsView, type Message, type Program, type Registry, type RegistryFor, type SessionEvent, type SessionOptions, type SessionState, type Span, type ViewIssue, controlled, useHandlerSettled, useJigsSession, useLocalValue };
package/dist/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { useHandlerSettled } from "./view/settled.js";
2
2
  import { controlled, useLocalValue } from "./view/local-value.js";
3
- import { PickleView } from "./view/PickleView.js";
4
- import { usePickleSession } from "./view/usePickleSession.js";
5
- export { PickleView, controlled, useHandlerSettled, useLocalValue, usePickleSession };
3
+ import { JigsView } from "./view/JigsView.js";
4
+ import { useJigsSession } from "./view/useJigsSession.js";
5
+ export { JigsView, controlled, useHandlerSettled, useJigsSession, useLocalValue };
@@ -1,7 +1,7 @@
1
1
  import { Registry } from "./registry.js";
2
- import { ConfirmFunction, PickleClient, ViewIssue } from "@jigs.design/client";
2
+ import { ConfirmFunction, JigsClient, ViewIssue } from "@jigs.design/client";
3
3
  import { Program } from "@jigs.design/runtime";
4
- //#region src/view/PickleView.d.ts
4
+ //#region src/view/JigsView.d.ts
5
5
  /** An action as `onAction` receives it; type it with `ActionEvent<typeof host>`. */
6
6
  interface ActionLike {
7
7
  input: unknown;
@@ -13,14 +13,14 @@ interface ActionLike {
13
13
  * keeps its value, unless `documentId` changed with it. A new `client`
14
14
  * starts the program over on that client.
15
15
  */
16
- export declare function PickleView<TAction extends ActionLike = ActionLike>(props: {
16
+ export declare function JigsView<TAction extends ActionLike = ActionLike>(props: {
17
17
  /**
18
18
  * Let the program focus a control when it appears, through the
19
19
  * `autoFocus` prop. Default false: in a chat, a UI that streams in would
20
20
  * otherwise take the focus from the composer while the user types.
21
21
  */
22
22
  allowAutoFocus?: boolean;
23
- client: PickleClient;
23
+ client: JigsClient;
24
24
  components: Registry;
25
25
  /**
26
26
  * Which UI `program` is a version of. When it changes, the program starts
@@ -3,7 +3,7 @@ import { useEffect, useState, useSyncExternalStore } from "react";
3
3
  import { createViewController, missingComponents } from "@jigs.design/client";
4
4
  import { ROOT_ID } from "@jigs.design/runtime";
5
5
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
6
- //#region src/view/PickleView.tsx
6
+ //#region src/view/JigsView.tsx
7
7
  function TreeNodeView(props) {
8
8
  const { components, controller } = props;
9
9
  const getNode = () => controller.store.get(props.id);
@@ -37,7 +37,7 @@ const missingFromRegistry = (program, components) => missingComponents(program,
37
37
  * keeps its value, unless `documentId` changed with it. A new `client`
38
38
  * starts the program over on that client.
39
39
  */
40
- function PickleView(props) {
40
+ function JigsView(props) {
41
41
  const { program } = props;
42
42
  const [view, setView] = useState(() => ({
43
43
  client: props.client,
@@ -92,15 +92,15 @@ function PickleView(props) {
92
92
  id: ROOT_ID
93
93
  }),
94
94
  showIssues && status.notice !== null && /* @__PURE__ */ jsx("p", {
95
- className: "pickle-view-notice",
95
+ className: "jigs-view-notice",
96
96
  role: "status",
97
97
  children: status.notice
98
98
  }),
99
99
  errors.length + issues.length > 0 && /* @__PURE__ */ jsxs("ul", {
100
- className: "pickle-view-errors",
100
+ className: "jigs-view-errors",
101
101
  children: [errors.map((error, index) => /* @__PURE__ */ jsxs("li", { children: [error.line === null ? "" : `Line ${error.line}: `, error.message] }, `error:${index}:${error.message}`)), issues.map((issue) => /* @__PURE__ */ jsx("li", { children: issue }, `issue:${issue}`))]
102
102
  })
103
103
  ] });
104
104
  }
105
105
  //#endregion
106
- export { PickleView };
106
+ export { JigsView };
@@ -1,5 +1,5 @@
1
- import { PickleClient } from "@jigs.design/client";
2
- import { Diagnostic, Message, PickleErrorData, Program, SessionOptions } from "@jigs.design/runtime";
1
+ import { JigsClient } from "@jigs.design/client";
2
+ import { Diagnostic, JigsErrorData, Message, Program, SessionOptions } from "@jigs.design/runtime";
3
3
  //#region src/view/session.d.ts
4
4
  export interface SessionState {
5
5
  diagnostics: ReadonlyArray<Diagnostic>;
@@ -7,11 +7,11 @@ export interface SessionState {
7
7
  * Which UI `program` is a version of. It goes up when the model writes a
8
8
  * new UI rather than editing the last one, or a stored one is restored,
9
9
  * and goes back with the program when a turn is stopped. Pass it to
10
- * `PickleView` as `documentId`, so a new UI starts from fresh state.
10
+ * `JigsView` as `documentId`, so a new UI starts from fresh state.
11
11
  */
12
12
  documentId: number;
13
13
  /** `{ code, message }` when `status` is "error". */
14
- error: PickleErrorData | null;
14
+ error: JigsErrorData | null;
15
15
  /** The conversation, to store or render. Assistant entries hold checked source. */
16
16
  messages: ReadonlyArray<Message>;
17
17
  /** The latest program, or null before the first one arrives. */
@@ -5,7 +5,7 @@
5
5
  * component's latest events and its answer is on screen. A control that
6
6
  * runs ahead of the program, such as a text field showing what was typed,
7
7
  * can then go back to its value prop if the program kept another value.
8
- * Always 0 outside `PickleView`.
8
+ * Always 0 outside `JigsView`.
9
9
  */
10
10
  export declare function useHandlerSettled(): number;
11
11
  //#endregion
@@ -8,7 +8,7 @@ const SettledContext = createContext(0);
8
8
  * component's latest events and its answer is on screen. A control that
9
9
  * runs ahead of the program, such as a text field showing what was typed,
10
10
  * can then go back to its value prop if the program kept another value.
11
- * Always 0 outside `PickleView`.
11
+ * Always 0 outside `JigsView`.
12
12
  */
13
13
  function useHandlerSettled() {
14
14
  return useContext(SettledContext);
@@ -1,8 +1,8 @@
1
1
  import { SessionState } from "./session.js";
2
- import { PickleClient } from "@jigs.design/client";
2
+ import { JigsClient } from "@jigs.design/client";
3
3
  import { Message, SessionOptions } from "@jigs.design/runtime";
4
- //#region src/view/usePickleSession.d.ts
5
- export interface PickleSession<TOptions extends SessionOptions = SessionOptions> extends SessionState {
4
+ //#region src/view/useJigsSession.d.ts
5
+ export interface JigsSession<TOptions extends SessionOptions = SessionOptions> extends SessionState {
6
6
  /**
7
7
  * Stops any turn and starts over with `messages` (default none). Like
8
8
  * `initialMessages`, messages that end with an assistant message are
@@ -25,7 +25,7 @@ export interface PickleSession<TOptions extends SessionOptions = SessionOptions>
25
25
  * conversation later, call `reset(messages)`. A new `client` stops the turn
26
26
  * in flight and compiles the conversation's last answer again through it.
27
27
  */
28
- export declare function usePickleSession<TOptions extends SessionOptions = SessionOptions>(client: PickleClient, options?: {
28
+ export declare function useJigsSession<TOptions extends SessionOptions = SessionOptions>(client: JigsClient, options?: {
29
29
  initialMessages?: ReadonlyArray<Message>;
30
- }): PickleSession<TOptions>;
30
+ }): JigsSession<TOptions>;
31
31
  //#endregion
@@ -1,6 +1,6 @@
1
1
  import { createSessionStore } from "./session.js";
2
2
  import { useEffect, useState, useSyncExternalStore } from "react";
3
- //#region src/view/usePickleSession.ts
3
+ //#region src/view/useJigsSession.ts
4
4
  const NO_MESSAGES = [];
5
5
  /**
6
6
  * Holds a conversation with the server and its latest program. Pass
@@ -10,7 +10,7 @@ const NO_MESSAGES = [];
10
10
  * conversation later, call `reset(messages)`. A new `client` stops the turn
11
11
  * in flight and compiles the conversation's last answer again through it.
12
12
  */
13
- function usePickleSession(client, options) {
13
+ function useJigsSession(client, options) {
14
14
  const [store] = useState(() => createSessionStore(client, options?.initialMessages ?? NO_MESSAGES));
15
15
  const state = useSyncExternalStore(store.subscribe, store.getState, store.getState);
16
16
  useEffect(() => {
@@ -26,4 +26,4 @@ function usePickleSession(client, options) {
26
26
  };
27
27
  }
28
28
  //#endregion
29
- export { usePickleSession };
29
+ export { useJigsSession };
package/package.json CHANGED
@@ -1,11 +1,11 @@
1
1
  {
2
2
  "name": "@jigs.design/react",
3
- "version": "0.1.1",
4
- "description": "The web renderer: PickleView runs a compiled program in a sandbox and draws it with your registry; usePickleSession streams programs from the server.",
3
+ "version": "0.1.2",
4
+ "description": "The web renderer: JigsView runs a compiled program in a sandbox and draws it with your registry; useJigsSession streams programs from the server.",
5
5
  "license": "MIT",
6
6
  "repository": {
7
7
  "type": "git",
8
- "url": "git+https://github.com/yoamomonstruos/pickle.git",
8
+ "url": "git+https://github.com/yoamomonstruos/jigs.git",
9
9
  "directory": "packages/react"
10
10
  },
11
11
  "type": "module",
@@ -25,8 +25,8 @@
25
25
  "access": "public"
26
26
  },
27
27
  "dependencies": {
28
- "@jigs.design/runtime": "0.1.1",
29
- "@jigs.design/client": "0.1.1"
28
+ "@jigs.design/client": "0.1.2",
29
+ "@jigs.design/runtime": "0.1.2"
30
30
  },
31
31
  "peerDependencies": {
32
32
  "react": "^18.0.0 || ^19.0.0"