@arcanejs/toolkit-frontend 0.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Sam Lanning
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,43 @@
+# `@arcanejs/diff`
+
+[![NPM Version](https://img.shields.io/npm/v/%40arcanejs%2Fdiff)](https://www.npmjs.com/package/@arcanejs/diff)
+
+This package provides an easy way to:
+
+- Create diffs by comparing objects
+- Update objects by applying diffs
+
+This library is written in TypeScript,
+and produces diffs that are type-safe,
+and can only be applied to objects that match the type
+of the objects being compared.
+
+This package is part of the
+[`arcanejs` project](https://github.com/arcanejs/arcanejs#arcanejs),
+and is used to maintain a copy of a JSON tree in downstream clients in real-time
+via websockets.
+
+## Usage
+
+```ts
+import { diffJson, Diff } from '@arcanejs/diff/diff';
+import { patchJson } from '@arcanejs/diff/patch';
+
+type E = {
+  foo: string;
+  bar?: number[];
+};
+
+const a: E = { foo: 'bar' };
+const b: E = { foo: 'baz', bar: [1] };
+
+const diffA: Diff<E> = diffJson(a, b);
+
+const resultA = patchJson(a, diffA);
+
+console.log(resultB); // { foo: 'baz', bar: [1] }
+
+const c = { baz: 'foo' };
+
+const resultB = patchJson(c, diffA); // TypeScript Type Error: Property 'baz' is missing in type '{ foo: string; bar?: number[] | undefined; }' but required in type '{ baz: string; }'
+```

package/dist/chunk-35U577MM.mjs

@@ -0,0 +1,75 @@
+// src/util/touch.ts
+import { useState } from "react";
+function switchToMouseMode(ev) {
+  if (ev.movementX === 0 && ev.movementY === 0) return;
+  document.body.classList.remove("touch-mode");
+}
+function switchToTouchMode() {
+  document.body.classList.add("touch-mode");
+}
+function initialiseListeners() {
+  window.addEventListener("mousemove", switchToMouseMode);
+  window.addEventListener("touchstart", switchToTouchMode, { passive: false });
+  window.addEventListener("contextmenu", (e) => {
+    if (e.pointerType === "touch") {
+      e.preventDefault();
+    }
+  });
+}
+var usePressable = (click) => {
+  const [touching, setTouching] = useState(false);
+  return {
+    touching,
+    handlers: {
+      onClick: click,
+      onTouchStart: () => {
+        setTouching(true);
+      },
+      onTouchMove: () => {
+        setTouching(false);
+      },
+      onTouchEnd: (event) => {
+        if (touching) {
+          event.preventDefault();
+          setTouching(false);
+          click();
+        }
+      }
+    }
+  };
+};
+function trackTouch(touch, move, end) {
+  const touchMove = (ev) => {
+    ev.preventDefault();
+    for (const t of Array.from(ev.changedTouches)) {
+      if (t.identifier === touch.identifier) {
+        move({ pageX: t.pageX, pageY: t.pageY });
+      }
+    }
+  };
+  const touchEnd = (ev) => {
+    for (const t of Array.from(ev.changedTouches)) {
+      if (t.identifier === touch.identifier) {
+        end({ pageX: t.pageX, pageY: t.pageY });
+        window.removeEventListener("touchmove", touchMove);
+        window.removeEventListener("touchend", touchEnd);
+        window.removeEventListener("touchcancel", touchEnd);
+      }
+    }
+  };
+  window.addEventListener("touchmove", touchMove, { passive: false });
+  window.addEventListener("touchend", touchEnd);
+  window.addEventListener("touchcancel", touchEnd);
+}
+
+// src/util/index.ts
+var calculateClass = (...args) => args.filter((a) => !!a).join(" ");
+
+export {
+  switchToMouseMode,
+  switchToTouchMode,
+  initialiseListeners,
+  usePressable,
+  trackTouch,
+  calculateClass
+};

package/dist/chunk-6Z2ACPNM.mjs

@@ -0,0 +1,155 @@
+// src/styling.ts
+import { createGlobalStyle, css } from "styled-components";
+var GlobalStyle = createGlobalStyle`
+body {
+  &.touch-mode * {
+    cursor: none !important;
+  }
+}
+`;
+var THEME = {
+  colorGreen: "#98c379",
+  colorRed: "#e06c75",
+  colorAmber: "#d19a66",
+  bgDark1: "#252524",
+  bg: "#2a2a2b",
+  bgLight1: "#353638",
+  borderDark: "#151516",
+  borderLight: "#1c1d1d",
+  borderLighter: "#252524",
+  borderLighterer: "#6b6b67",
+  hint: "#4286f4",
+  hintRGB: "66, 134, 244",
+  hintDark1: "#2a77f3",
+  textNormal: "#F3F3F5",
+  textMuted: "#777777",
+  sizingPx: {
+    spacing: 15,
+    unitHeight: 40
+  }
+};
+var BaseStyle = createGlobalStyle`
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background: #333;
+  margin: 0;
+  padding: 0;
+  font-size: 14px;
+  font-family: sans-serif;
+}
+`;
+var buttonStateNormal = css`
+  color: ${(p) => p.theme.textNormal};
+  background: linear-gradient(to bottom, #4f5053, #343436);
+  text-shadow: 0 -1px rgba(0, 0, 0, 0.7);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.15),
+    0 1px 0 0 rgba(0, 0, 0, 0.25);
+`;
+var buttonStateNormalHover = css`
+  color: ${(p) => p.theme.textNormal};
+  outline-color: rgba(243, 243, 245, 0.3);
+  background: linear-gradient(to bottom, #5e6064, #393a3b);
+  text-shadow: 0 -1px rgba(0, 0, 0, 0.7);
+`;
+var buttonStateNormalActive = css`
+  color: #ffffff;
+  outline-color: rgba(255, 255, 255, 0.3);
+  background: linear-gradient(to bottom, #242525, #37383a);
+  text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
+  box-shadow:
+    inset 0 1px 2px rgba(0, 0, 0, 0.2),
+    0 1px 0 0 rgba(255, 255, 255, 0.15);
+  transition-duration: 50ms;
+`;
+var buttonStatePressed = css`
+  ${buttonStateNormalActive}
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 0 0 rgba(255,255,255,0.15);
+`;
+var buttonStatePressedHover = css`
+  ${buttonStateNormalActive}
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 0 0 rgba(255,255,255,0.15);
+  background: linear-gradient(to bottom, #282929, #414243);
+`;
+var buttonStatePressedActive = buttonStateNormalActive;
+var buttonStateDisabled = css`
+  ${buttonStateNormal}
+
+  cursor: default;
+  background: ${(p) => p.theme.bg} !important;
+  color: rgba(${(p) => p.theme.textNormal}, 0.4);
+`;
+var button = css`
+  position: relative;
+  box-sizing: border-box;
+  cursor: pointer;
+  transition: all 200ms;
+  border-radius: 3px;
+  border: 1px solid ${(p) => p.theme.borderDark};
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  outline-color: transparent;
+  ${buttonStateNormal}
+
+  &:hover {
+    ${buttonStateNormalHover}
+  }
+
+  &:active {
+    ${buttonStateNormalActive}
+  }
+`;
+var buttonPressed = css`
+  ${buttonStatePressed}
+
+  &:hover {
+    ${buttonStatePressedHover}
+  }
+
+  &:active {
+    ${buttonStatePressedActive}
+  }
+`;
+var buttonDisabled = css`
+  ${buttonStateDisabled}
+
+  &:hover, &:active {
+    ${buttonStateDisabled}
+  }
+`;
+var rectButton = button;
+var touchIndicatorNormal = css`
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  left: -6px;
+  bottom: -6px;
+  border-radius: 6px;
+  border: 2px solid rgba(0, 0, 0, 0);
+  background-color: none;
+  transition: border-color 300ms;
+`;
+var touchIndicatorTouching = css`
+  border-color: ${(p) => p.theme.hint};
+  background-color: rgba(${(p) => p.theme.hintRGB}, 0.2);
+  transition: border-color 0s;
+`;
+
+export {
+  GlobalStyle,
+  THEME,
+  BaseStyle,
+  buttonStateNormal,
+  buttonStateNormalHover,
+  buttonStateNormalActive,
+  buttonPressed,
+  buttonDisabled,
+  rectButton,
+  touchIndicatorNormal,
+  touchIndicatorTouching
+};

package/dist/chunk-7P6ASYW6.mjs

@@ -0,0 +1,9 @@
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+export {
+  __export
+};

package/dist/chunk-KNYDA6D6.js

@@ -0,0 +1,53 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunkXEIKOLS2js = require('./chunk-XEIKOLS2.js');
+
+
+var _chunkMLKGABMKjs = require('./chunk-MLKGABMK.js');
+
+// src/components/core/index.ts
+var core_exports = {};
+_chunkMLKGABMKjs.__export.call(void 0, core_exports, {
+  Icon: () => Icon,
+  TRANSPARENCY_SVG: () => TRANSPARENCY_SVG,
+  TRANSPARENCY_SVG_URI: () => TRANSPARENCY_SVG_URI
+});
+
+// src/components/core/icon.tsx
+var _styledcomponents = require('styled-components');
+var _jsxruntime = require('react/jsx-runtime');
+var ICON_CLASS = "icon";
+var Span = _styledcomponents.styled.span`
+  font-family: 'Material Symbols Outlined';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 22px;
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  font-variation-settings:
+    'wght' 300,
+    'GRAD' -25;
+`;
+var Icon = ({ icon, ...props }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Span, { className: _chunkXEIKOLS2js.calculateClass.call(void 0, props.className, ICON_CLASS), ...props, children: icon });
+
+// src/components/core/index.ts
+var TRANSPARENCY_SVG = `
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
+  <rect width="10px" height="10px" fill="#333" />
+  <rect width="5px" height="5px" fill="#ddd" y="5"/>
+  <rect width="5px" height="5px" fill="#ddd" x="5"/>
+</svg>
+`;
+var TRANSPARENCY_SVG_URI = `data:image/svg+xml,${encodeURIComponent(TRANSPARENCY_SVG)}`;
+
+
+
+
+
+
+exports.Icon = Icon; exports.TRANSPARENCY_SVG = TRANSPARENCY_SVG; exports.TRANSPARENCY_SVG_URI = TRANSPARENCY_SVG_URI; exports.core_exports = core_exports;

package/dist/chunk-MLKGABMK.js

@@ -0,0 +1,9 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+
+
+exports.__export = __export;

package/dist/chunk-UJVH3PQF.mjs

@@ -0,0 +1,53 @@
+import {
+  calculateClass
+} from "./chunk-35U577MM.mjs";
+import {
+  __export
+} from "./chunk-7P6ASYW6.mjs";
+
+// src/components/core/index.ts
+var core_exports = {};
+__export(core_exports, {
+  Icon: () => Icon,
+  TRANSPARENCY_SVG: () => TRANSPARENCY_SVG,
+  TRANSPARENCY_SVG_URI: () => TRANSPARENCY_SVG_URI
+});
+
+// src/components/core/icon.tsx
+import { styled } from "styled-components";
+import { jsx } from "react/jsx-runtime";
+var ICON_CLASS = "icon";
+var Span = styled.span`
+  font-family: 'Material Symbols Outlined';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 22px;
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  font-variation-settings:
+    'wght' 300,
+    'GRAD' -25;
+`;
+var Icon = ({ icon, ...props }) => /* @__PURE__ */ jsx(Span, { className: calculateClass(props.className, ICON_CLASS), ...props, children: icon });
+
+// src/components/core/index.ts
+var TRANSPARENCY_SVG = `
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
+  <rect width="10px" height="10px" fill="#333" />
+  <rect width="5px" height="5px" fill="#ddd" y="5"/>
+  <rect width="5px" height="5px" fill="#ddd" x="5"/>
+</svg>
+`;
+var TRANSPARENCY_SVG_URI = `data:image/svg+xml,${encodeURIComponent(TRANSPARENCY_SVG)}`;
+
+export {
+  Icon,
+  TRANSPARENCY_SVG,
+  TRANSPARENCY_SVG_URI,
+  core_exports
+};

package/dist/chunk-XEIKOLS2.js

@@ -0,0 +1,75 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/util/touch.ts
+var _react = require('react');
+function switchToMouseMode(ev) {
+  if (ev.movementX === 0 && ev.movementY === 0) return;
+  document.body.classList.remove("touch-mode");
+}
+function switchToTouchMode() {
+  document.body.classList.add("touch-mode");
+}
+function initialiseListeners() {
+  window.addEventListener("mousemove", switchToMouseMode);
+  window.addEventListener("touchstart", switchToTouchMode, { passive: false });
+  window.addEventListener("contextmenu", (e) => {
+    if (e.pointerType === "touch") {
+      e.preventDefault();
+    }
+  });
+}
+var usePressable = (click) => {
+  const [touching, setTouching] = _react.useState.call(void 0, false);
+  return {
+    touching,
+    handlers: {
+      onClick: click,
+      onTouchStart: () => {
+        setTouching(true);
+      },
+      onTouchMove: () => {
+        setTouching(false);
+      },
+      onTouchEnd: (event) => {
+        if (touching) {
+          event.preventDefault();
+          setTouching(false);
+          click();
+        }
+      }
+    }
+  };
+};
+function trackTouch(touch, move, end) {
+  const touchMove = (ev) => {
+    ev.preventDefault();
+    for (const t of Array.from(ev.changedTouches)) {
+      if (t.identifier === touch.identifier) {
+        move({ pageX: t.pageX, pageY: t.pageY });
+      }
+    }
+  };
+  const touchEnd = (ev) => {
+    for (const t of Array.from(ev.changedTouches)) {
+      if (t.identifier === touch.identifier) {
+        end({ pageX: t.pageX, pageY: t.pageY });
+        window.removeEventListener("touchmove", touchMove);
+        window.removeEventListener("touchend", touchEnd);
+        window.removeEventListener("touchcancel", touchEnd);
+      }
+    }
+  };
+  window.addEventListener("touchmove", touchMove, { passive: false });
+  window.addEventListener("touchend", touchEnd);
+  window.addEventListener("touchcancel", touchEnd);
+}
+
+// src/util/index.ts
+var calculateClass = (...args) => args.filter((a) => !!a).join(" ");
+
+
+
+
+
+
+
+
+exports.switchToMouseMode = switchToMouseMode; exports.switchToTouchMode = switchToTouchMode; exports.initialiseListeners = initialiseListeners; exports.usePressable = usePressable; exports.trackTouch = trackTouch; exports.calculateClass = calculateClass;

package/dist/chunk-Y5UYS6EX.js

@@ -0,0 +1,155 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/styling.ts
+var _styledcomponents = require('styled-components');
+var GlobalStyle = _styledcomponents.createGlobalStyle`
+body {
+  &.touch-mode * {
+    cursor: none !important;
+  }
+}
+`;
+var THEME = {
+  colorGreen: "#98c379",
+  colorRed: "#e06c75",
+  colorAmber: "#d19a66",
+  bgDark1: "#252524",
+  bg: "#2a2a2b",
+  bgLight1: "#353638",
+  borderDark: "#151516",
+  borderLight: "#1c1d1d",
+  borderLighter: "#252524",
+  borderLighterer: "#6b6b67",
+  hint: "#4286f4",
+  hintRGB: "66, 134, 244",
+  hintDark1: "#2a77f3",
+  textNormal: "#F3F3F5",
+  textMuted: "#777777",
+  sizingPx: {
+    spacing: 15,
+    unitHeight: 40
+  }
+};
+var BaseStyle = _styledcomponents.createGlobalStyle`
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background: #333;
+  margin: 0;
+  padding: 0;
+  font-size: 14px;
+  font-family: sans-serif;
+}
+`;
+var buttonStateNormal = _styledcomponents.css`
+  color: ${(p) => p.theme.textNormal};
+  background: linear-gradient(to bottom, #4f5053, #343436);
+  text-shadow: 0 -1px rgba(0, 0, 0, 0.7);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.15),
+    0 1px 0 0 rgba(0, 0, 0, 0.25);
+`;
+var buttonStateNormalHover = _styledcomponents.css`
+  color: ${(p) => p.theme.textNormal};
+  outline-color: rgba(243, 243, 245, 0.3);
+  background: linear-gradient(to bottom, #5e6064, #393a3b);
+  text-shadow: 0 -1px rgba(0, 0, 0, 0.7);
+`;
+var buttonStateNormalActive = _styledcomponents.css`
+  color: #ffffff;
+  outline-color: rgba(255, 255, 255, 0.3);
+  background: linear-gradient(to bottom, #242525, #37383a);
+  text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
+  box-shadow:
+    inset 0 1px 2px rgba(0, 0, 0, 0.2),
+    0 1px 0 0 rgba(255, 255, 255, 0.15);
+  transition-duration: 50ms;
+`;
+var buttonStatePressed = _styledcomponents.css`
+  ${buttonStateNormalActive}
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 0 0 rgba(255,255,255,0.15);
+`;
+var buttonStatePressedHover = _styledcomponents.css`
+  ${buttonStateNormalActive}
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 0 0 rgba(255,255,255,0.15);
+  background: linear-gradient(to bottom, #282929, #414243);
+`;
+var buttonStatePressedActive = buttonStateNormalActive;
+var buttonStateDisabled = _styledcomponents.css`
+  ${buttonStateNormal}
+
+  cursor: default;
+  background: ${(p) => p.theme.bg} !important;
+  color: rgba(${(p) => p.theme.textNormal}, 0.4);
+`;
+var button = _styledcomponents.css`
+  position: relative;
+  box-sizing: border-box;
+  cursor: pointer;
+  transition: all 200ms;
+  border-radius: 3px;
+  border: 1px solid ${(p) => p.theme.borderDark};
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  outline-color: transparent;
+  ${buttonStateNormal}
+
+  &:hover {
+    ${buttonStateNormalHover}
+  }
+
+  &:active {
+    ${buttonStateNormalActive}
+  }
+`;
+var buttonPressed = _styledcomponents.css`
+  ${buttonStatePressed}
+
+  &:hover {
+    ${buttonStatePressedHover}
+  }
+
+  &:active {
+    ${buttonStatePressedActive}
+  }
+`;
+var buttonDisabled = _styledcomponents.css`
+  ${buttonStateDisabled}
+
+  &:hover, &:active {
+    ${buttonStateDisabled}
+  }
+`;
+var rectButton = button;
+var touchIndicatorNormal = _styledcomponents.css`
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  left: -6px;
+  bottom: -6px;
+  border-radius: 6px;
+  border: 2px solid rgba(0, 0, 0, 0);
+  background-color: none;
+  transition: border-color 300ms;
+`;
+var touchIndicatorTouching = _styledcomponents.css`
+  border-color: ${(p) => p.theme.hint};
+  background-color: rgba(${(p) => p.theme.hintRGB}, 0.2);
+  transition: border-color 0s;
+`;
+
+
+
+
+
+
+
+
+
+
+
+
+
+exports.GlobalStyle = GlobalStyle; exports.THEME = THEME; exports.BaseStyle = BaseStyle; exports.buttonStateNormal = buttonStateNormal; exports.buttonStateNormalHover = buttonStateNormalHover; exports.buttonStateNormalActive = buttonStateNormalActive; exports.buttonPressed = buttonPressed; exports.buttonDisabled = buttonDisabled; exports.rectButton = rectButton; exports.touchIndicatorNormal = touchIndicatorNormal; exports.touchIndicatorTouching = touchIndicatorTouching;

package/dist/components/core/index.d.mts

@@ -0,0 +1,2 @@
+export { I as Icon, T as TRANSPARENCY_SVG, a as TRANSPARENCY_SVG_URI } from '../../index-Db4cPoyC.mjs';
+import 'react';

package/dist/components/core/index.d.ts

@@ -0,0 +1,2 @@
+export { I as Icon, T as TRANSPARENCY_SVG, a as TRANSPARENCY_SVG_URI } from '../../index-Db4cPoyC.js';
+import 'react';

package/dist/components/core/index.js

@@ -0,0 +1,12 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+
+
+var _chunkKNYDA6D6js = require('../../chunk-KNYDA6D6.js');
+require('../../chunk-XEIKOLS2.js');
+require('../../chunk-MLKGABMK.js');
+
+
+
+
+exports.Icon = _chunkKNYDA6D6js.Icon; exports.TRANSPARENCY_SVG = _chunkKNYDA6D6js.TRANSPARENCY_SVG; exports.TRANSPARENCY_SVG_URI = _chunkKNYDA6D6js.TRANSPARENCY_SVG_URI;

package/dist/components/core/index.mjs

@@ -0,0 +1,12 @@
+import {
+  Icon,
+  TRANSPARENCY_SVG,
+  TRANSPARENCY_SVG_URI
+} from "../../chunk-UJVH3PQF.mjs";
+import "../../chunk-35U577MM.mjs";
+import "../../chunk-7P6ASYW6.mjs";
+export {
+  Icon,
+  TRANSPARENCY_SVG,
+  TRANSPARENCY_SVG_URI
+};