@react-fabric/core 1.0.0-beta.0

package/dist/esm/context/NotificationCenter.js

@@ -0,0 +1,254 @@
+'use client';
+
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
+import { uuid, isString, isObject } from '@react-fabric/utilities';
+import { useRef, useState, useEffect, Fragment } from 'react';
+import { createPortal } from 'react-dom';
+import { Alert } from '../overlays/alert/Alert.js';
+import { Message } from '../overlays/message/Message.js';
+import { Toast } from '../overlays/toast/Toast.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/** ***************** refactor props *******************/
+var makeProps = function makeProps(obj) {
+  if (isString(obj)) {
+    return {
+      message: obj
+    };
+  } else if (isObject(obj)) {
+    return _objectSpread({}, obj);
+  }
+  return {
+    message: ""
+  };
+};
+var NotificationManager = function NotificationManager(_ref) {
+  var onLoad = _ref.onLoad;
+  var refItems = useRef({
+    toasts: {},
+    messages: {},
+    alerts: {}
+  });
+  var _useState = useState({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    messages = _useState2[0],
+    setMessages = _useState2[1];
+  var _useState3 = useState({}),
+    _useState4 = _slicedToArray(_useState3, 2),
+    toasts = _useState4[0],
+    setToasts = _useState4[1];
+  var _useState5 = useState({}),
+    _useState6 = _slicedToArray(_useState5, 2),
+    alerts = _useState6[0],
+    setAlerts = _useState6[1];
+  var updateMessages = useRef(function () {
+    setMessages(_objectSpread({}, refItems.current.messages));
+  });
+  var updateToasts = useRef(function () {
+    setToasts(_objectSpread({}, refItems.current.toasts));
+  });
+  var updateAlerts = useRef(function () {
+    setAlerts(_objectSpread({}, refItems.current.alerts));
+  });
+  var handleCloseAll = useRef(function () {
+    Object.values(refItems.current.messages).forEach(function (msg) {
+      var _msg$;
+      return (_msg$ = msg[1]) === null || _msg$ === void 0 ? void 0 : _msg$.call(msg, false);
+    });
+    Object.values(refItems.current.toasts).forEach(function (msg) {
+      var _msg$2;
+      return (_msg$2 = msg[1]) === null || _msg$2 === void 0 ? void 0 : _msg$2.call(msg, false);
+    });
+    Object.values(refItems.current.alerts).forEach(function (msg) {
+      var _msg$3;
+      return (_msg$3 = msg[1]) === null || _msg$3 === void 0 ? void 0 : _msg$3.call(msg, false);
+    });
+    refItems.current.messages = {};
+    refItems.current.toasts = {};
+    refItems.current.alerts = {};
+    updateMessages.current();
+    updateToasts.current();
+    updateAlerts.current();
+  });
+  var openNotification = useRef( /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(map, update, Notif, props) {
+      var timeout,
+        timerRef,
+        obj,
+        _args = arguments;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            timeout = _args.length > 4 && _args[4] !== undefined ? _args[4] : 5000;
+            timerRef = null;
+            obj = makeProps(props);
+            _context.next = 5;
+            return new Promise(function (resolve) {
+              var key = uuid();
+              var handleClose = function handleClose() {
+                var b = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+                clearTimeout(timerRef);
+                setTimeout(function () {
+                  // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+                  delete map[key];
+                  update();
+                  resolve(b);
+                }, 250);
+              };
+              map[key] = [/*#__PURE__*/jsx("div", {
+                children: /*#__PURE__*/jsx(Notif, _objectSpread(_objectSpread({}, obj), {}, {
+                  onClose: handleClose,
+                  onCloseAll: handleCloseAll.current
+                }))
+              }, key), handleClose];
+              update();
+              if (obj.type !== "confirm" && timeout > 0) {
+                timerRef = setTimeout(handleClose, timeout);
+              }
+            });
+          case 5:
+            return _context.abrupt("return", _context.sent);
+          case 6:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x, _x2, _x3, _x4) {
+      return _ref2.apply(this, arguments);
+    };
+  }());
+  var showMessage = useRef( /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(props) {
+      var timeout,
+        _args2 = arguments;
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            timeout = _args2.length > 1 && _args2[1] !== undefined ? _args2[1] : 5000;
+            _context2.next = 3;
+            return openNotification.current(refItems.current.messages, updateMessages.current, Message, props, timeout);
+          case 3:
+            return _context2.abrupt("return", _context2.sent);
+          case 4:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function (_x5) {
+      return _ref3.apply(this, arguments);
+    };
+  }());
+  var showToast = useRef( /*#__PURE__*/function () {
+    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(props) {
+      var timeout,
+        _args3 = arguments;
+      return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
+          case 0:
+            timeout = _args3.length > 1 && _args3[1] !== undefined ? _args3[1] : 5000;
+            _context3.next = 3;
+            return openNotification.current(refItems.current.toasts, updateToasts.current, Toast, props, timeout);
+          case 3:
+            return _context3.abrupt("return", _context3.sent);
+          case 4:
+          case "end":
+            return _context3.stop();
+        }
+      }, _callee3);
+    }));
+    return function (_x6) {
+      return _ref4.apply(this, arguments);
+    };
+  }());
+  var showAlert = useRef( /*#__PURE__*/function () {
+    var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(props) {
+      return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+        while (1) switch (_context4.prev = _context4.next) {
+          case 0:
+            _context4.next = 2;
+            return openNotification.current(refItems.current.alerts, updateAlerts.current, Alert, props, 0);
+          case 2:
+            return _context4.abrupt("return", _context4.sent);
+          case 3:
+          case "end":
+            return _context4.stop();
+        }
+      }, _callee4);
+    }));
+    return function (_x7) {
+      return _ref5.apply(this, arguments);
+    };
+  }());
+  var showError = useRef( /*#__PURE__*/function () {
+    var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5(props) {
+      return _regeneratorRuntime.wrap(function _callee5$(_context5) {
+        while (1) switch (_context5.prev = _context5.next) {
+          case 0:
+            _context5.next = 3;
+            return openNotification.current(refItems.current.toasts, Toast, _objectSpread(_objectSpread({}, makeProps(props)), {}, {
+              color: "danger"
+            }), 0);
+          case 3:
+            return _context5.abrupt("return", _context5.sent);
+          case 4:
+          case "end":
+            return _context5.stop();
+        }
+      }, _callee5);
+    }));
+    return function (_x8) {
+      return _ref6.apply(this, arguments);
+    };
+  }());
+  useEffect(function () {
+    onLoad({
+      showMessage: showMessage.current,
+      showToast: showToast.current,
+      showAlert: showAlert.current,
+      showError: showError.current,
+      closeAll: handleCloseAll.current
+    });
+  }, []);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/createPortal( /*#__PURE__*/jsx("div", {
+      style: {
+        zIndex: "var(--z-overlay)"
+      },
+      className: "ruf-container__overlays pointer-events-none fixed inset-0 p-4 bg-transparent",
+      children: Object.values(alerts).map(function (_ref7) {
+        var _ref8 = _slicedToArray(_ref7, 1),
+          el = _ref8[0];
+        return el;
+      })
+    }), document.body), /*#__PURE__*/createPortal( /*#__PURE__*/jsx("div", {
+      style: {
+        zIndex: "var(--z-notifications)"
+      },
+      className: "ruf-container__notifs flex flex-nowrap pointer-events-none fixed inset-0 p-2 bg-transparent flex-col-reverse items-center justify-end",
+      children: Object.values(messages).map(function (_ref9) {
+        var _ref10 = _slicedToArray(_ref9, 1),
+          el = _ref10[0];
+        return el;
+      })
+    }), document.body), /*#__PURE__*/createPortal( /*#__PURE__*/jsx("div", {
+      style: {
+        zIndex: "var(--z-notifications)"
+      },
+      className: "ruf-container__toasts flex flex-nowrap pointer-events-none fixed inset-0 p-4 bg-transparent flex-col items-end justify-end overflow-auto scroll-hide",
+      children: Object.values(toasts).map(function (_ref11) {
+        var _ref12 = _slicedToArray(_ref11, 1),
+          el = _ref12[0];
+        return el;
+      })
+    }), document.body)]
+  });
+};
+
+export { NotificationManager };

package/dist/esm/core/aside/Aside.js

@@ -0,0 +1,152 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import classNames from 'classnames';
+import { useRef, useState, useEffect, useCallback, useMemo } from 'react';
+import { Loading } from '../../components/animations/Animations.js';
+import { Icon } from '../../components/icon/Icon.js';
+import { useLayoutEffectDebugger } from '../../hooks/useEffectDebugger.js';
+import { usePropToggle } from '../../hooks/usePropToggle.js';
+import { useResize } from '../../hooks/useResize.js';
+import { CoreIcons } from '../../types/icons.js';
+import { ErrorBoundary } from '../boundary/ErrorBoundary.js';
+import classes from './Aside.module.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * Side panel
+ */
+var Aside = function Aside(_ref) {
+  var children = _ref.children,
+    title = _ref.title,
+    icon = _ref.icon,
+    iconBg = _ref.iconBg,
+    iconColor = _ref.iconColor,
+    rtlFlip = _ref.rtlFlip,
+    headerClassName = _ref.headerClassName,
+    resizeable = _ref.resizeable,
+    flyout = _ref.flyout,
+    onFlyout = _ref.onFlyout,
+    collapsed = _ref.collapsed,
+    collapsable = _ref.collapsable,
+    onCollapse = _ref.onCollapse,
+    actions = _ref.actions,
+    loading = _ref.loading,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? "start" : _ref$align,
+    _ref$width = _ref.width,
+    wd = _ref$width === void 0 ? "20rem" : _ref$width,
+    _ref$minWidth = _ref.minWidth,
+    minWidth = _ref$minWidth === void 0 ? "2rem" : _ref$minWidth,
+    _ref$maxWidth = _ref.maxWidth,
+    maxWidth = _ref$maxWidth === void 0 ? "30vw" : _ref$maxWidth,
+    testId = _ref["data-testid"],
+    testValue = _ref["data-test-value"];
+  var elementRef = useRef(null);
+  var _useState = useState(wd),
+    _useState2 = _slicedToArray(_useState, 2),
+    width = _useState2[0],
+    setWidth = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    peek = _useState4[0],
+    setPeek = _useState4[1];
+  var _usePropToggle = usePropToggle(collapsed, onCollapse),
+    _usePropToggle2 = _slicedToArray(_usePropToggle, 2),
+    isCollapsed = _usePropToggle2[0],
+    toggleCollapse = _usePropToggle2[1];
+  useEffect(function () {
+    setWidth(wd);
+  }, [wd]);
+  var handleResize = useRef(function (_ref2) {
+    var x = _ref2.x;
+    if (elementRef.current != null) {
+      setWidth(elementRef.current.offsetWidth + x);
+    }
+  });
+  var resizeHandleProps = useResize(handleResize.current, {
+    isReverse: align === "end"
+  });
+  var tryPeek = useCallback(function () {
+    if (isCollapsed) {
+      if (flyout) {
+        setPeek(!peek);
+        !peek && (onFlyout === null || onFlyout === void 0 ? void 0 : onFlyout());
+      } else {
+        void toggleCollapse();
+      }
+    }
+  }, [peek, flyout, isCollapsed, onFlyout, toggleCollapse]);
+  useLayoutEffectDebugger(function () {
+    if (peek) {
+      var handler = function handler(e) {
+        if (e.target.closest("[data-ref=\"asideBody\"]") == null && e.target.closest("[data-ref=\"asidePlaceholder\"]") == null) {
+          setPeek(false);
+        }
+      };
+      document.addEventListener("mouseup", handler);
+      return function () {
+        return document.removeEventListener("mouseup", handler);
+      };
+    }
+  }, [peek], "Aside peek");
+  var widthStyles = useMemo(function () {
+    return {
+      width: width,
+      minWidth: minWidth,
+      maxWidth: maxWidth
+    };
+  }, [width, minWidth, maxWidth]);
+  return /*#__PURE__*/jsxs("aside", {
+    className: classNames(classes.aside, "overflow-hidden grid"),
+    "data-align": align,
+    "data-flyout": peek,
+    "data-collapsed": isCollapsed,
+    style: isCollapsed ? undefined : widthStyles,
+    "data-testid": testId,
+    "data-test-value": testValue,
+    children: [/*#__PURE__*/jsxs("header", {
+      className: classNames(classes.asideHeader, headerClassName, "grid area-head items-center"),
+      children: [title && /*#__PURE__*/jsx("div", {
+        className: classNames(classes.asideTitle, "truncate py-0.5 px-1 select-none pointer-events-none"),
+        children: title
+      }), collapsable && /*#__PURE__*/jsx(Icon, {
+        "aria-label": isCollapsed ? "expand" : "collapse",
+        className: classNames(classes.asideCollapse, "p-2 select-none"),
+        icon: CoreIcons.chevronLeft,
+        rtlFlip: true,
+        onClick: toggleCollapse,
+        "data-ref": "asideToggle"
+      }), icon && /*#__PURE__*/jsx(Icon, {
+        icon: icon,
+        bg: iconBg,
+        color: iconColor,
+        rtlFlip: rtlFlip,
+        className: classNames(classes.asideIcon, "p-1 text-lg select-none pointer-events-none")
+      }), actions && /*#__PURE__*/jsx("div", {
+        className: classes.asideActions,
+        children: actions
+      })]
+    }), loading && /*#__PURE__*/jsx(Loading, {}), isCollapsed && /*#__PURE__*/jsx("div", {
+      role: "none",
+      onClick: tryPeek,
+      "data-ref": "asidePlaceholder",
+      className: classes.asidePlaceholder
+    }), /*#__PURE__*/jsx("section", {
+      ref: elementRef,
+      "data-ref": "asideBody",
+      className: classNames(classes.asideBody, "overflow-hidden grid"),
+      style: isCollapsed ? widthStyles : undefined,
+      children: /*#__PURE__*/jsx(ErrorBoundary, {
+        children: children
+      })
+    }), resizeable && /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({}, resizeHandleProps), {}, {
+      className: classNames(classes.asideResizer, "before:absolute before:inset-0 before:w-1 before:top-1/2 before:-translate-y-1/2 before:transition-all")
+    }))]
+  });
+};
+
+export { Aside };

package/dist/esm/core/aside/Aside.module.css

@@ -0,0 +1 @@
+@layer comp{.aside{--aside-bg:color-mix(in lab,var(--fabric-bg) 95%,var(--tint));--aside-border:color-mix(in lab,var(--fabric-bg) 75%,var(--tint));background-color:var(--aside-bg);&[data-align=start]{border-inline-end:1px solid var(--aside-border);grid-area:side-s;grid-template:"head resizer" auto "loader resizer" auto "content resizer" 1fr/1fr auto;& .asideHeader{grid-template-areas:"icon title actions collapse";grid-template-columns:auto 1fr auto auto}}&[data-align=end]{border-inline-start:1px solid var(--aside-border);grid-area:side-e;grid-template:"resizer head" auto "resizer loader" auto "resizer content" 1fr/auto 1fr;& .asideHeader{grid-template-areas:"collapse icon title actions";grid-template-columns:auto auto 1fr auto}& .asideCollapse{transform:scaleX(-1)}}& .asideBody{grid-area:content;grid-template:"head" auto "content" 1fr "foot" auto/1fr;&>[data-ref=content]{background-color:transparent}}& .asideHeader{color:theme(colors.primary.600);font-weight:500;&:not(:empty){border-bottom:1px solid var(--aside-border)}}& .asideTitle{grid-area:title}& .asideIcon{grid-area:icon}.asideActions{grid-area:actions}& .asideCollapse{grid-area:collapse;&:hover{background-color:color-mix(in lab,var(--fabric-text) 10%,#0000)}}& .asidePlaceholder{background-color:var(--aside-bg);grid-area:content;z-index:4}& .asideResizer{cursor:col-resize;grid-area:resizer;position:relative;width:.25rem;&:before{border:1px solid theme(colors.tint.700);border-width:0 1.5px;height:32px}&:active:before,&:hover:before{background-color:theme(colors.primary.600);border-color:theme(backgroundColor.base);border-width:0 1.25px;height:100%}}}}@layer util{.asideBody,.asideHeader{height:unset;margin:unset;width:unset}.asideBody{&>[data-ref=content]{background-color:transparent}}.aside[data-collapsed=true]{overflow:visible;position:relative;width:2rem;& .asideBody{background-color:var(--aside-bg);inset:0;position:absolute;transition:transform .15s cubic-bezier(.4,0,.2,1);z-index:-1}& .asideHeader{position:absolute;width:2rem;z-index:5}& .asideTitle{font-size:1rem;grid-area:unset;position:absolute;top:1rem}.asideIcon{margin-inline:2px}& .asideCollapse+.asideIcon,& .asideResizer{display:none}}[dir=ltr] .aside[data-align=start][data-collapsed=true],[dir=rtl] .aside[data-align=end][data-collapsed=true]{& .asideBody{grid-area:unset;right:unset;transform:translateX(-100%)}& .asideTitle{right:calc(2rem + 2px);transform:rotate(-90deg) translateY(2rem);transform-origin:100% 100%}& .asideCollapse{transform:scaleX(-1)}&[data-flyout=true] .asideBody{box-shadow:0 0 1rem 0 var(--fabric-shadow);transform:translateX(2rem);z-index:3}}[dir=ltr] .aside[data-align=end][data-collapsed=true],[dir=rtl] .aside[data-align=start][data-collapsed=true]{& .asideBody{grid-area:unset;left:unset;transform:translateX(100%)}& .asideTitle{left:calc(2rem + 2px);transform:rotate(90deg) translateY(2rem);transform-origin:0 100%}& .asideCollapse{transform:scaleX(1)}&[data-flyout=true] .asideBody{box-shadow:0 0 1rem 0 var(--fabric-shadow);transform:translateX(-2rem);z-index:3}}}

package/dist/esm/core/boundary/ErrorBoundary.js

@@ -0,0 +1,140 @@
+'use client';
+
+import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
+import _createClass from '@babel/runtime/helpers/createClass';
+import _possibleConstructorReturn from '@babel/runtime/helpers/possibleConstructorReturn';
+import _getPrototypeOf from '@babel/runtime/helpers/getPrototypeOf';
+import _inherits from '@babel/runtime/helpers/inherits';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useLogger } from '@react-fabric/utilities';
+import classNames from 'classnames';
+import { Component } from 'react';
+import { useTranslation } from 'react-i18next';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useMemoDebugger } from '../../hooks/useEffectDebugger.js';
+import { usePropToggle } from '../../hooks/usePropToggle.js';
+import classes from './ErrorBoundary.module.css';
+import { ErrorIcon } from './ErrorIcon.js';
+import { useGlobals } from '../../context/Global.js';
+
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var DefaultError = function DefaultError(_ref) {
+  var error = _ref.error;
+  var _useTranslation = useTranslation("core"),
+    t = _useTranslation.t;
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx("h6", {
+      children: t("error.title")
+    }), /*#__PURE__*/jsx("p", {
+      className: "line-clamp-4",
+      children: error
+    })]
+  });
+};
+var ErrorMessage = function ErrorMessage(_ref2) {
+  var error = _ref2.error,
+    errorElement = _ref2.errorElement;
+  var _useGlobals = useGlobals(),
+    globalError = _useGlobals.errorElement;
+  var EE = useMemoDebugger(function () {
+    var _ref3;
+    return (_ref3 = errorElement !== null && errorElement !== void 0 ? errorElement : globalError) !== null && _ref3 !== void 0 ? _ref3 : DefaultError;
+  }, [], "ErrorBoundary element");
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(ErrorIcon, {}), /*#__PURE__*/jsx("div", {
+      className: classNames(classes.boundaryMessage, "p-2"),
+      children: /*#__PURE__*/jsx(EE, {
+        error: error
+      })
+    })]
+  });
+};
+var ErrorStack = function ErrorStack(_ref4) {
+  var error = _ref4.error,
+    stack = _ref4.stack;
+  var _usePropToggle = usePropToggle(false),
+    _usePropToggle2 = _slicedToArray(_usePropToggle, 2),
+    show = _usePropToggle2[0],
+    toggleShow = _usePropToggle2[1];
+  useLogger().error(error, {}, stack);
+  return /*#__PURE__*/jsxs("div", {
+    className: classNames(classes.boundaryDetail, "overflow-hidden grid"),
+    children: [/*#__PURE__*/jsx("div", {
+      className: classNames(classes.boundaryLink, "px-2 py-1 text-xs text-end"),
+      children: /*#__PURE__*/jsx("span", {
+        role: "link",
+        tabIndex: 0,
+        className: "link",
+        onClick: toggleShow,
+        children: show ? "Hide Detail" : "Show Detail"
+      })
+    }), show && /*#__PURE__*/jsx("div", {
+      className: classNames(classes.boundaryStack, "overflow-auto p-2 text-xs border-t"),
+      children: /*#__PURE__*/jsx("pre", {
+        className: "whitespace-pre-wrap",
+        children: stack
+      })
+    })]
+  });
+};
+
+/**
+ * An error boundary wrapper higher-order component designed to provide consistent error display across the application will trap runtime errors
+ */
+var ErrorBoundary = /*#__PURE__*/function (_Component) {
+  function ErrorBoundary(props) {
+    var _this;
+    _classCallCheck(this, ErrorBoundary);
+    _this = _callSuper(this, ErrorBoundary, [props]);
+    _this.state = {
+      hasError: false
+    };
+    return _this;
+  }
+  _inherits(ErrorBoundary, _Component);
+  return _createClass(ErrorBoundary, [{
+    key: "componentDidCatch",
+    value: function componentDidCatch(error) {
+      this.setState({
+        hasError: true,
+        error: error.message,
+        stack: error.stack
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var env = process.env.NODE_ENV;
+      if (this.state.hasError) {
+        var E = this.props.errorElement;
+        // You can render any custom fallback UI
+        return /*#__PURE__*/jsx("div", {
+          className: classNames(classes.errorBoundary, "grid grid-rows-1 overflow-hidden p-0.5 rounded-capped"),
+          children: /*#__PURE__*/jsxs("div", {
+            className: classNames(classes.boundaryContent, "overflow-hidden grid rounded-capped"),
+            children: [/*#__PURE__*/jsx(ErrorMessage, {
+              error: this.state.error,
+              errorElement: E
+            }), env === "development" && /*#__PURE__*/jsx(ErrorStack, {
+              error: this.state.error,
+              stack: this.state.stack
+            })]
+          })
+        });
+      }
+      return this.props.children;
+    }
+  }], [{
+    key: "getDerivedStateFromError",
+    value: function getDerivedStateFromError(error) {
+      return {
+        hasError: true,
+        error: error.message,
+        stack: error.stack
+      };
+    }
+  }]);
+}(Component);
+
+export { ErrorBoundary };

package/dist/esm/core/boundary/ErrorBoundary.module.css

@@ -0,0 +1 @@
+@layer comp{.errorBoundary{align-self:flex-start;background-color:theme(colors.danger.500);background-image:repeating-linear-gradient(135deg,hsla(0,0%,100%,.5) 0 4px,hsla(0,0%,100%,.2) 4px 8px);grid-area:inherit;margin:1rem;max-height:calc(100% - 2rem);& .boundaryContent{background-color:var(--fabric-bg);grid-template:"icon message" auto "detail detail" auto/auto 1fr}& .boundaryIcon{grid-area:icon}& .boundaryMessage{grid-area:message}& .boundaryDetail{grid-area:detail;grid-template-rows:auto 1fr}}}

package/dist/esm/core/boundary/ErrorIcon.js

@@ -0,0 +1,51 @@
+'use client';
+
+import classNames from 'classnames';
+import classes from './ErrorBoundary.module.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * 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.
+ */
+
+var ErrorIcon = function ErrorIcon() {
+  return /*#__PURE__*/jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 64 64",
+    className: classNames(classes.boundaryIcon, "size-6 m-2"),
+    children: [/*#__PURE__*/jsx("path", {
+      fill: "#808080",
+      d: "M64 32c0 17.673-14.327 32-32 32s-32-14.327-32-32 14.327-32 32-32 32 14.327 32 32z"
+    }), /*#__PURE__*/jsx("path", {
+      fill: "#fff",
+      d: "M63.5 32c0 17.397-14.103 31.5-31.5 31.5s-31.5-14.103-31.5-31.5 14.103-31.5 31.5-31.5 31.5 14.103 31.5 31.5z"
+    }), /*#__PURE__*/jsx("path", {
+      fill: "#f44336",
+      d: "M60 32c0 15.464-12.536 28-28 28s-28-12.536-28-28c0-15.464 12.536-28 28-28s28 12.536 28 28z"
+    }), /*#__PURE__*/jsx("path", {
+      fill: "#fff",
+      d: "M50.667 35.733h-37.333c-1.031 0-1.867-0.835-1.867-1.867v-3.733c0-1.031 0.835-1.867 1.867-1.867h37.333c1.031 0 1.867 0.835 1.867 1.867v3.733c0 1.031-0.835 1.867-1.867 1.867z"
+    })]
+  });
+};
+
+export { ErrorIcon };

package/dist/esm/core/content/Content.js

@@ -0,0 +1,70 @@
+'use client';
+
+import classNames from 'classnames';
+import { useImperativeHandle } from 'react';
+import { useDebounce } from '../../hooks/useDebounce.js';
+import { useResizeObserver } from '../../hooks/useResizeObserver.js';
+import { ErrorBoundary } from '../boundary/ErrorBoundary.js';
+import classes from './Content.module.css';
+import { jsx } from 'react/jsx-runtime';
+
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * 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.
+ */
+
+/**
+ * Scrollable content element
+ */
+var Content = function Content(_ref) {
+  var ref = _ref.ref,
+    children = _ref.children,
+    className = _ref.className,
+    onScroll = _ref.onScroll,
+    onResize = _ref.onResize,
+    testId = _ref["data-testid"],
+    testValue = _ref["data-test-value"];
+  var resizeHandle = useResizeObserver(onResize);
+  var scrollHandler = useDebounce(function (e) {
+    onScroll === null || onScroll === void 0 || onScroll({
+      // @ts-expect-error ignore
+      left: e.target.scrollLeft,
+      // @ts-expect-error ignore
+      top: e.target.scrollTop
+    });
+  }, [onScroll]);
+  useImperativeHandle(ref, function () {
+    return resizeHandle.current;
+  }, []);
+  return /*#__PURE__*/jsx("section", {
+    "data-ref": "content",
+    "data-testid": testId,
+    "data-test-value": testValue,
+    ref: resizeHandle,
+    onScroll: scrollHandler,
+    className: classNames(classes.content, "area-content", className),
+    children: /*#__PURE__*/jsx(ErrorBoundary, {
+      children: children
+    })
+  });
+};
+
+export { Content };

package/dist/esm/core/content/Content.module.css

@@ -0,0 +1 @@
+@layer comp{.content{--fabric-content:color-mix(in lab,var(--fabric-bg) 97%,var(--tint));background-color:var(--fabric-content);overflow:auto;padding:1rem}}@layer util{.content{height:unset;margin:unset;width:unset}}