@likec4/diagram 1.35.0 → 1.36.1

package/dist/search/components/ElementsColumn.css.js

@@ -4,7 +4,7 @@ import { container } from '@likec4/styles/patterns';
 const whenContainerIsNarrow = `@container likec4-tree (max-width: 450px)`;
 const treeNode = css({
   outline: "none",
-  marginBottom: "8px"
+  marginBottom: "2"
 });
 const treeRoot = css(
   container.raw({
@@ -19,10 +19,10 @@ const treeLabel = css({
   display: "flex",
   alignItems: "baseline",
   outline: "none !important",
-  gap: "4px"
+  gap: "1"
 });
 const treeSubtree = css({
-  marginTop: "8px"
+  marginTop: "2"
 });
 const elementExpandIcon = css({
   color: "mantine.colors.dimmed"
@@ -31,7 +31,7 @@ const elementTitleAndId = css({
   [whenContainerIsNarrow]: {
     flexDirection: "column-reverse",
     alignItems: "flex-start",
-    gap: 2
+    gap: "0.5"
   }
 });
 const elementId = css({
@@ -41,7 +41,7 @@ const elementId = css({
   display: "block",
   fontWeight: 500,
   whiteSpace: "nowrap",
-  padding: "1px 5px",
+  padding: "[1px 5px]",
   borderRadius: "4px",
   background: `mantine.colors.dark[9]/30`,
   _light: {

package/dist/search/components/SearchByTags.js

@@ -29,7 +29,7 @@ function SearchByTags() {
       ref,
       css: {
         gap: "md",
-        paddingLeft: 48,
+        paddingLeft: "[48px]",
         flexWrap: "nowrap"
       },
       children: [
@@ -37,7 +37,8 @@ function SearchByTags() {
           HStack,
           {
             css: {
-              gap: 6,
+              gap: "1.5",
+              // 6px
               flexWrap: "wrap",
               opacity: isFiltered ? 1 : 0.3,
               grayscale: isFiltered ? 0 : 0.9,

package/dist/search/components/ViewsColum.js

@@ -28,7 +28,7 @@ const ViewsColumn = memo(() => {
         if (search.startsWith("#")) {
           return view.tags.some((tag) => tag.toLocaleLowerCase().includes(search.slice(1)));
         }
-        return (view.title ?? "" + view.$view.description ?? "").toLocaleLowerCase().includes(search);
+        return `${view.title} ${view.$view.description}`.toLocaleLowerCase().includes(search);
       });
     }
   }

package/dist/search/components/ViewsColumn.css.js

@@ -16,7 +16,7 @@ const viewButton = cx(
   _viewBtn
 );
 css({
-  marginTop: "4px",
+  marginTop: "1",
   // transition: transitions.fast,
   // color: `[var(${descriptionColor}, {colors.mantine.colors.dimmed})]`,
   fontSize: "13px",

package/dist/search/components/_shared.css.js

@@ -11,9 +11,9 @@ const button = css.raw({
   width: "100%",
   background: "mantine.colors.body",
   rounded: "sm",
-  padding: `12px 8px 12px 14px`,
+  padding: `[12px 8px 12px 14px]`,
   minHeight: "60px",
-  gap: 8,
+  gap: "2",
   // alignItems: 'flex-start',
   // transition: `all 50ms ${easings.inOut}`,
   border: `1px solid`,
@@ -126,7 +126,7 @@ const descriptionColor = css.raw({
   }
 });
 const description = css.raw(descriptionColor, {
-  marginTop: "4px",
+  marginTop: "1",
   fontSize: "12px",
   lineHeight: "1.4",
   [`:where([data-disabled]) &`]: {

package/dist/search/components/styles.css.js

@@ -16,7 +16,7 @@ const input = css({
 });
 const pickviewBackdrop = css({
   position: "absolute",
-  inset: 0,
+  inset: "0",
   width: "100%",
   height: "100%",
   backgroundColor: "[rgb(34 34 34 / 0.7)]",
@@ -29,8 +29,8 @@ const pickviewBackdrop = css({
 });
 const pickview = css({
   position: "absolute",
-  top: "2rem",
-  left: "50%",
+  top: "[2rem]",
+  left: "[50%]",
   width: "100%",
   maxWidth: "600px",
   minWidth: "200px",
@@ -38,9 +38,9 @@ const pickview = css({
   zIndex: 903
 });
 const pickviewGroup = css({
-  marginTop: "8px",
+  marginTop: "2",
   "& + &": {
-    marginTop: "32px"
+    marginTop: "[32px]"
   }
 });
 css({

package/dist/state/DiagramActorProvider.js

@@ -5,10 +5,9 @@ import { useStoreApi } from '@xyflow/react';
 import { shallowEqual, deepEqual } from 'fast-equals';
 import { useRef, useEffect, useState } from 'react';
 import { ErrorBoundary } from '../components/ErrorFallback.js';
-import { useDiagramEventHandlersRef } from '../context/DiagramEventHandlers.js';
+import { useDiagramEventHandlers } from '../context/DiagramEventHandlers.js';
 import { useEnabledFeatures, DiagramFeatures } from '../context/DiagramFeatures.js';
 import { DiagramActorContextProvider } from '../hooks/safeContext.js';
-import { useCurrentViewId } from '../hooks/useCurrentViewId.js';
 import { useViewToNodesEdges } from '../likec4diagram/useViewToNodesEdges.js';
 import { CurrentViewModelContext } from '../likec4model/LikeC4ModelContext.js';
 import { useLikeC4Model } from '../likec4model/useLikeC4Model.js';
@@ -33,24 +32,11 @@ function DiagramActorProvider({
   where,
   children
 }) {
-  const handlersRef = useDiagramEventHandlersRef();
+  const { handlersRef } = useDiagramEventHandlers();
   const xystore = useStoreApi();
   const machineRef = useRef(null);
   if (!machineRef.current) {
     machineRef.current = diagramMachine.provide({
-      actions: {
-        "trigger:NavigateTo": (_, { viewId }) => {
-          setTimeout(() => {
-            handlersRef.current.onNavigateTo?.(viewId);
-          }, 40);
-        },
-        "trigger:OnChange": (_, params) => {
-          handlersRef.current.onChange?.(params);
-        },
-        "trigger:OpenSource": (_, params) => {
-          handlersRef.current.onOpenSource?.(params);
-        }
-      },
       actors: {
         syncManualLayoutActorLogic: syncManualLayoutActorLogic.provide({
           actions: {
@@ -78,6 +64,7 @@ function DiagramActorProvider({
       }
     }
   );
+  useActorEventHandlers(actorRef);
   const features = useEnabledFeatures();
   useCustomCompareEffect(
     () => {
@@ -102,32 +89,63 @@ function DiagramActorProvider({
     actorRef.send({ type: "update.view", view, xyedges, xynodes });
   }, [view, xyedges, xynodes]);
   const toggledFeatures = useSelector(actorRef, selectToggledFeatures, shallowEqual);
-  return /* @__PURE__ */ jsx(DiagramActorContextProvider, { value: actorRef, children: /* @__PURE__ */ jsx(DiagramFeatures, { overrides: toggledFeatures, children: /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(CurrentViewModelProvider, { children }) }) }) });
+  return /* @__PURE__ */ jsx(DiagramActorContextProvider, { value: actorRef, children: /* @__PURE__ */ jsx(DiagramFeatures, { overrides: toggledFeatures, children: /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(CurrentViewModelProvider, { viewId: view.id, children }) }) }) });
 }
 function CurrentViewModelProvider({
-  children
+  children,
+  viewId
 }) {
-  const viewId = useCurrentViewId();
   const likec4model = useLikeC4Model();
-  const [viewmodel, setViewmodel] = useState(() => likec4model.view(viewId));
+  const [viewmodel, setViewmodel] = useState(() => likec4model.findView(viewId));
   useEffect(() => {
     setViewmodel((current) => {
       const nextviewmodel = likec4model.findView(viewId);
       if (!nextviewmodel) {
-        console.error(`View "${viewId}" not found in likec4model, current viewmodel: ${current.id}`, {
+        console.error(`View "${viewId}" not found in likec4model, current viewmodel: ${current?.id}`, {
           currentViewModel: current,
           likec4model
         });
         return current;
       }
+      if (!nextviewmodel.isDiagram()) {
+        console.warn(`View "${viewId}" is not diagram.
+Make sure you have LikeC4ModelProvider with layouted model.`);
+      }
       return nextviewmodel;
     });
   }, [likec4model, viewId]);
-  if (!viewmodel.isDiagram()) {
-    console.warn(`View "${viewId}" is not diagram.
-Make sure you have LikeC4ModelProvider with layouted model.`);
-  }
   return /* @__PURE__ */ jsx(CurrentViewModelContext.Provider, { value: viewmodel, children });
 }
+function useActorEventHandlers(actorRef) {
+  const {
+    onChange,
+    onNavigateTo,
+    onOpenSource
+  } = useDiagramEventHandlers();
+  useEffect(() => {
+    if (!onChange) return;
+    const subscription = actorRef.on("viewChange", ({ change }) => onChange({ change }));
+    return () => subscription.unsubscribe();
+  }, [actorRef, onChange]);
+  useEffect(() => {
+    if (!onNavigateTo) return;
+    let frame;
+    const subscription = actorRef.on("navigateTo", ({ viewId }) => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(() => {
+        onNavigateTo(viewId);
+      });
+    });
+    return () => {
+      cancelAnimationFrame(frame);
+      subscription.unsubscribe();
+    };
+  }, [actorRef, onNavigateTo]);
+  useEffect(() => {
+    if (!onOpenSource) return;
+    const subscription = actorRef.on("openSource", ({ params }) => onOpenSource(params));
+    return () => subscription.unsubscribe();
+  }, [actorRef, onOpenSource]);
+}
 
 export { DiagramActorProvider };

package/dist/state/diagram-machine.d.ts

@@ -1,8 +1,8 @@
-import { DiagramView, EdgeId, Fqn, NodeId, NodeNotation as ElementNotation, StepEdgeId, ViewChange, ViewId, XYPoint, BBox, NonEmptyArray, Point, Color, RelationshipArrowType, RelationshipLineType } from '@likec4/core';
+import { DiagramView, EdgeId, Fqn, NodeId, NodeNotation as ElementNotation, StepEdgeId, ViewChange, ViewId, XYPoint, BBox, NonEmptyArray, Point, Color, RelationshipArrowType, RelationshipLineType, MarkdownOrString } from '@likec4/core';
 import { ReactFlowInstance, useStoreApi } from '@xyflow/react';
 import { EdgeChange, NodeChange, Rect, Viewport, EdgeMarkerType, HandleType, XYPosition } from '@xyflow/system';
 import { PartialDeep } from 'type-fest';
-import { ActorLogicFrom, ActorRef, AnyEventObject, Snapshot, StateMachine, ActorRefFromLogic, Values, NonReducibleUnknown, EventObject, MetaObject, ConditionalRequired, InputFrom, RequiredActorOptions, IsNotNever, GetConcreteByKey, AnyActorLogic, RequiredLogicInput, MachineSnapshot, AnyActorRef, StateValue, ActionFunction, CancelAction, StopAction } from 'xstate';
+import { ActorLogicFrom, ActorRef, AnyEventObject, Snapshot, StateMachine, ActorRefFromLogic, Values, NonReducibleUnknown, MetaObject, ConditionalRequired, InputFrom, RequiredActorOptions, IsNotNever, GetConcreteByKey, AnyActorLogic, RequiredLogicInput, MachineSnapshot, AnyActorRef, StateValue, ActionFunction, CancelAction, StopAction } from 'xstate';
 import { Base } from '../base/types';
 import { EnabledFeatures, FeatureName } from '../context/DiagramFeatures';
 import { OpenSourceParams, ViewPadding } from '../LikeC4Diagram.props';
@@ -192,6 +192,16 @@ export type Events = HotKeyEvent | {
     feature: FeatureName;
     forceValue?: boolean;
 };
+export type EmittedEvents = {
+    type: 'navigateTo';
+    viewId: ViewId;
+} | {
+    type: 'viewChange';
+    change: ViewChange;
+} | {
+    type: 'openSource';
+    params: OpenSourceParams;
+};
 export type ActionArg = {
     context: Context;
     event: Events;
@@ -283,9 +293,7 @@ declare const _diagramMachine: StateMachine<Context, Events, {
     };
     "trigger:NavigateTo": {
         type: "trigger:NavigateTo";
-        params: {
-            viewId: ViewId;
-        };
+        params: NonReducibleUnknown;
     };
     "trigger:OpenSource": {
         type: "trigger:OpenSource";
@@ -419,7 +427,7 @@ declare const _diagramMachine: StateMachine<Context, Events, {
     };
 }>, never, "isReady" | "initializing" | "navigating" | {
     ready: "idle" | "walkthrough" | "focused";
-}, string, Input, NonReducibleUnknown, EventObject, MetaObject, {
+}, string, Input, NonReducibleUnknown, EmittedEvents, MetaObject, {
     readonly initial: "initializing";
     readonly context: ({ input }: {
         spawn: {
@@ -901,7 +909,7 @@ declare const _diagramMachine: StateMachine<Context, Events, {
                                         tail: RelationshipArrowType | undefined;
                                         labelBBox: BBox | null | undefined;
                                         navigateTo: ViewId<string> | null | undefined;
-                                        notes: string | undefined;
+                                        notes: MarkdownOrString | undefined;
                                         labelXY: XYPosition | null;
                                         controlPoints: XYPosition[] | undefined | null;
                                     };
@@ -951,7 +959,7 @@ declare const _diagramMachine: StateMachine<Context, Events, {
                                     tail: RelationshipArrowType | undefined;
                                     labelBBox: BBox | null | undefined;
                                     navigateTo: ViewId<string> | null | undefined;
-                                    notes: string | undefined;
+                                    notes: MarkdownOrString | undefined;
                                     labelXY: XYPosition | null;
                                     controlPoints: XYPosition[] | undefined | null;
                                 };
@@ -1008,7 +1016,7 @@ declare const _diagramMachine: StateMachine<Context, Events, {
                                         tail: RelationshipArrowType | undefined;
                                         labelBBox: BBox | null | undefined;
                                         navigateTo: ViewId<string> | null | undefined;
-                                        notes: string | undefined;
+                                        notes: MarkdownOrString | undefined;
                                         labelXY: XYPosition | null;
                                         controlPoints: XYPosition[] | undefined | null;
                                     };
@@ -1058,7 +1066,7 @@ declare const _diagramMachine: StateMachine<Context, Events, {
                                     tail: RelationshipArrowType | undefined;
                                     labelBBox: BBox | null | undefined;
                                     navigateTo: ViewId<string> | null | undefined;
-                                    notes: string | undefined;
+                                    notes: MarkdownOrString | undefined;
                                     labelXY: XYPosition | null;
                                     controlPoints: XYPosition[] | undefined | null;
                                 };
@@ -1355,9 +1363,7 @@ declare const _diagramMachine: StateMachine<Context, Events, {
                         };
                         "trigger:NavigateTo": {
                             type: "trigger:NavigateTo";
-                            params: {
-                                viewId: ViewId;
-                            };
+                            params: NonReducibleUnknown;
                         };
                         "trigger:OpenSource": {
                             type: "trigger:OpenSource";
@@ -1489,7 +1495,7 @@ declare const _diagramMachine: StateMachine<Context, Events, {
                             type: "click: selected edge";
                             params: unknown;
                         };
-                    }>, never, EventObject>;
+                    }>, never, EmittedEvents>;
                     readonly on: {
                         readonly 'xyflow.nodeClick': readonly [{
                             readonly guard: "click: focused node";
@@ -1729,9 +1735,7 @@ declare const _diagramMachine: StateMachine<Context, Events, {
                                 };
                                 "trigger:NavigateTo": {
                                     type: "trigger:NavigateTo";
-                                    params: {
-                                        viewId: ViewId;
-                                    };
+                                    params: NonReducibleUnknown;
                                 };
                                 "trigger:OpenSource": {
                                     type: "trigger:OpenSource";
@@ -1863,7 +1867,7 @@ declare const _diagramMachine: StateMachine<Context, Events, {
                                     type: "click: selected edge";
                                     params: unknown;
                                 };
-                            }>, never, EventObject>;
+                            }>, never, EmittedEvents>;
                         };
                         readonly 'xyflow.edgeClick': {
                             readonly actions: readonly [ ActionFunction<Context, {
@@ -1997,9 +2001,7 @@ declare const _diagramMachine: StateMachine<Context, Events, {
                         };
                         "trigger:NavigateTo": {
                             type: "trigger:NavigateTo";
-                            params: {
-                                viewId: ViewId;
-                            };
+                            params: NonReducibleUnknown;
                         };
                         "trigger:OpenSource": {
                             type: "trigger:OpenSource";
@@ -2131,229 +2133,13 @@ declare const _diagramMachine: StateMachine<Context, Events, {
                             type: "click: selected edge";
                             params: unknown;
                         };
-                    }>, never, EventObject>;
+                    }>, never, EmittedEvents>;
                 };
             };
         };
         readonly navigating: {
             readonly id: "navigating";
-            readonly entry: readonly ["closeAllOverlays", "closeSearch", "stopSyncLayout", ActionFunction<Context, Events, Events, undefined, Values<{
-                syncManualLayoutActorLogic: {
-                    src: "syncManualLayoutActorLogic";
-                    logic: SyncLayoutActorLogic;
-                    id: "syncLayout";
-                };
-                hotkeyActorLogic: {
-                    src: "hotkeyActorLogic";
-                    logic: HotkeyActorLogic;
-                    id: "hotkey";
-                };
-                overlaysActorLogic: {
-                    src: "overlaysActorLogic";
-                    logic: OverlaysActorLogic;
-                    id: "overlays";
-                };
-                searchActorLogic: {
-                    src: "searchActorLogic";
-                    logic: SearchActorLogic;
-                    id: "search";
-                };
-            }>, Values<{
-                onNodeMouseEnter: {
-                    type: "onNodeMouseEnter";
-                    params: {
-                        node: Types.Node;
-                    };
-                };
-                onNodeMouseLeave: {
-                    type: "onNodeMouseLeave";
-                    params: {
-                        node: Types.Node;
-                    };
-                };
-                onEdgeMouseEnter: {
-                    type: "onEdgeMouseEnter";
-                    params: {
-                        edge: Types.Edge;
-                    };
-                };
-                onEdgeMouseLeave: {
-                    type: "onEdgeMouseLeave";
-                    params: {
-                        edge: Types.Edge;
-                    };
-                };
-                "trigger:OnChange": {
-                    type: "trigger:OnChange";
-                    params: {
-                        change: ViewChange;
-                    };
-                };
-                "layout.align": {
-                    type: "layout.align";
-                    params: {
-                        mode: AlignmentMode;
-                    };
-                };
-                "notations.highlight": {
-                    type: "notations.highlight";
-                    params: {
-                        notation: ElementNotation;
-                        kind?: string;
-                    };
-                };
-                "tag.highlight": {
-                    type: "tag.highlight";
-                    params: NonReducibleUnknown;
-                };
-                "xyflow:fitDiagram": {
-                    type: "xyflow:fitDiagram";
-                    params: {
-                        duration?: number;
-                        bounds?: BBox;
-                    } | undefined;
-                };
-                closeAllOverlays: {
-                    type: "closeAllOverlays";
-                    params: NonReducibleUnknown;
-                };
-                "trigger:NavigateTo": {
-                    type: "trigger:NavigateTo";
-                    params: {
-                        viewId: ViewId;
-                    };
-                };
-                "trigger:OpenSource": {
-                    type: "trigger:OpenSource";
-                    params: OpenSourceParams;
-                };
-                "assign lastClickedNode": {
-                    type: "assign lastClickedNode";
-                    params: NonReducibleUnknown;
-                };
-                "open source of focused or last clicked node": {
-                    type: "open source of focused or last clicked node";
-                    params: NonReducibleUnknown;
-                };
-                "xyflow:fitFocusedBounds": {
-                    type: "xyflow:fitFocusedBounds";
-                    params: unknown;
-                };
-                "xyflow:setViewportCenter": {
-                    type: "xyflow:setViewportCenter";
-                    params: {
-                        x: number;
-                        y: number;
-                    };
-                };
-                "xyflow:setViewport": {
-                    type: "xyflow:setViewport";
-                    params: {
-                        viewport: Viewport;
-                        duration?: number;
-                    };
-                };
-                "xyflow:alignNodeFromToAfterNavigate": {
-                    type: "xyflow:alignNodeFromToAfterNavigate";
-                    params: {
-                        fromNode: NodeId;
-                        toPosition: XYPoint;
-                    };
-                };
-                "ensure overlays actor state": {
-                    type: "ensure overlays actor state";
-                    params: NonReducibleUnknown;
-                };
-                "ensure search actor state": {
-                    type: "ensure search actor state";
-                    params: NonReducibleUnknown;
-                };
-                updateFeatures: {
-                    type: "updateFeatures";
-                    params: NonReducibleUnknown;
-                };
-                closeSearch: {
-                    type: "closeSearch";
-                    params: NonReducibleUnknown;
-                };
-                startSyncLayout: {
-                    type: "startSyncLayout";
-                    params: NonReducibleUnknown;
-                };
-                stopSyncLayout: {
-                    type: "stopSyncLayout";
-                    params: NonReducibleUnknown;
-                };
-                "focus on nodes and edges": {
-                    type: "focus on nodes and edges";
-                    params: NonReducibleUnknown;
-                };
-                "undim everything": {
-                    type: "undim everything";
-                    params: NonReducibleUnknown;
-                };
-                "update active walkthrough": {
-                    type: "update active walkthrough";
-                    params: NonReducibleUnknown;
-                };
-            }>, Values<{
-                isReady: {
-                    type: "isReady";
-                    params: unknown;
-                };
-                "enabled: FitView": {
-                    type: "enabled: FitView";
-                    params: unknown;
-                };
-                "enabled: FocusMode": {
-                    type: "enabled: FocusMode";
-                    params: unknown;
-                };
-                "enabled: Readonly": {
-                    type: "enabled: Readonly";
-                    params: unknown;
-                };
-                "enabled: RelationshipDetails": {
-                    type: "enabled: RelationshipDetails";
-                    params: unknown;
-                };
-                "enabled: Search": {
-                    type: "enabled: Search";
-                    params: unknown;
-                };
-                "not readonly": {
-                    type: "not readonly";
-                    params: unknown;
-                };
-                "is dynamic view": {
-                    type: "is dynamic view";
-                    params: unknown;
-                };
-                "is another view": {
-                    type: "is another view";
-                    params: unknown;
-                };
-                "click: selected node": {
-                    type: "click: selected node";
-                    params: unknown;
-                };
-                "click: same node": {
-                    type: "click: same node";
-                    params: unknown;
-                };
-                "click: focused node": {
-                    type: "click: focused node";
-                    params: unknown;
-                };
-                "click: node has connections": {
-                    type: "click: node has connections";
-                    params: unknown;
-                };
-                "click: selected edge": {
-                    type: "click: selected edge";
-                    params: unknown;
-                };
-            }>, never, EventObject>];
+            readonly entry: readonly ["closeAllOverlays", "closeSearch", "stopSyncLayout", "trigger:NavigateTo"];
             readonly on: {
                 readonly 'update.view': {
                     readonly actions: ActionFunction<Context, {
@@ -2443,9 +2229,7 @@ declare const _diagramMachine: StateMachine<Context, Events, {
                         };
                         "trigger:NavigateTo": {
                             type: "trigger:NavigateTo";
-                            params: {
-                                viewId: ViewId;
-                            };
+                            params: NonReducibleUnknown;
                         };
                         "trigger:OpenSource": {
                             type: "trigger:OpenSource";
@@ -2577,7 +2361,7 @@ declare const _diagramMachine: StateMachine<Context, Events, {
                             type: "click: selected edge";
                             params: unknown;
                         };
-                    }>, never, EventObject>;
+                    }>, never, EmittedEvents>;
                     readonly target: "#idle";
                 };
             };
@@ -2841,9 +2625,7 @@ declare const _diagramMachine: StateMachine<Context, Events, {
                 };
                 "trigger:NavigateTo": {
                     type: "trigger:NavigateTo";
-                    params: {
-                        viewId: ViewId;
-                    };
+                    params: NonReducibleUnknown;
                 };
                 "trigger:OpenSource": {
                     type: "trigger:OpenSource";
@@ -2975,7 +2757,7 @@ declare const _diagramMachine: StateMachine<Context, Events, {
                     type: "click: selected edge";
                     params: unknown;
                 };
-            }>, never, EventObject>];
+            }>, never, EmittedEvents>];
         };
         readonly 'update.inputs': {
             readonly actions: ActionFunction<Context, {