@fluid-app/rep-core 0.1.0 → 0.1.2

package/dist/chunk-5NYM4UTW.cjs

@@ -0,0 +1,58 @@
+'use strict';
+
+var react = require('react');
+
+// src/shell/use-mobile.ts
+var MOBILE_BREAKPOINT = 768;
+var TABLET_BREAKPOINT = 1024;
+function useIsMobile() {
+  const [isMobile, setIsMobile] = react.useState(false);
+  react.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+  return isMobile;
+}
+function useIsTablet() {
+  const [isTablet, setIsTablet] = react.useState(false);
+  react.useEffect(() => {
+    const mql = window.matchMedia(
+      `(min-width: ${MOBILE_BREAKPOINT}px) and (max-width: ${TABLET_BREAKPOINT - 1}px)`
+    );
+    const onChange = () => {
+      setIsTablet(
+        window.innerWidth >= MOBILE_BREAKPOINT && window.innerWidth < TABLET_BREAKPOINT
+      );
+    };
+    mql.addEventListener("change", onChange);
+    setIsTablet(
+      window.innerWidth >= MOBILE_BREAKPOINT && window.innerWidth < TABLET_BREAKPOINT
+    );
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+  return isTablet;
+}
+function useIsMobileOrTablet() {
+  const [isMobileOrTablet, setIsMobileOrTablet] = react.useState(false);
+  react.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${TABLET_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobileOrTablet(window.innerWidth < TABLET_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobileOrTablet(window.innerWidth < TABLET_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+  return isMobileOrTablet;
+}
+
+exports.useIsMobile = useIsMobile;
+exports.useIsMobileOrTablet = useIsMobileOrTablet;
+exports.useIsTablet = useIsTablet;
+//# sourceMappingURL=chunk-5NYM4UTW.cjs.map
+//# sourceMappingURL=chunk-5NYM4UTW.cjs.map

package/dist/chunk-5NYM4UTW.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/shell/use-mobile.ts"],"names":["useState","useEffect"],"mappings":";;;;;AAEA,IAAM,iBAAA,GAAoB,GAAA;AAC1B,IAAM,iBAAA,GAAoB,IAAA;AAEnB,SAAS,WAAA,GAAc;AAC5B,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIA,eAAkB,KAAK,CAAA;AAEvD,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,MAAM,MAAA,CAAO,UAAA,CAAW,CAAA,YAAA,EAAe,iBAAA,GAAoB,CAAC,CAAA,GAAA,CAAK,CAAA;AACvE,IAAA,MAAM,WAAW,MAAM;AACrB,MAAA,WAAA,CAAY,MAAA,CAAO,aAAa,iBAAiB,CAAA;AAAA,IACnD,CAAA;AACA,IAAA,GAAA,CAAI,gBAAA,CAAiB,UAAU,QAAQ,CAAA;AACvC,IAAA,WAAA,CAAY,MAAA,CAAO,aAAa,iBAAiB,CAAA;AACjD,IAAA,OAAO,MAAM,GAAA,CAAI,mBAAA,CAAoB,QAAA,EAAU,QAAQ,CAAA;AAAA,EACzD,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,OAAO,QAAA;AACT;AAEO,SAAS,WAAA,GAAc;AAC5B,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAID,eAAkB,KAAK,CAAA;AAEvD,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,MAAM,MAAA,CAAO,UAAA;AAAA,MACjB,CAAA,YAAA,EAAe,iBAAiB,CAAA,oBAAA,EAAuB,iBAAA,GAAoB,CAAC,CAAA,GAAA;AAAA,KAC9E;AACA,IAAA,MAAM,WAAW,MAAM;AACrB,MAAA,WAAA;AAAA,QACE,MAAA,CAAO,UAAA,IAAc,iBAAA,IACnB,MAAA,CAAO,UAAA,GAAa;AAAA,OACxB;AAAA,IACF,CAAA;AACA,IAAA,GAAA,CAAI,gBAAA,CAAiB,UAAU,QAAQ,CAAA;AACvC,IAAA,WAAA;AAAA,MACE,MAAA,CAAO,UAAA,IAAc,iBAAA,IACnB,MAAA,CAAO,UAAA,GAAa;AAAA,KACxB;AACA,IAAA,OAAO,MAAM,GAAA,CAAI,mBAAA,CAAoB,QAAA,EAAU,QAAQ,CAAA;AAAA,EACzD,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,OAAO,QAAA;AACT;AAEO,SAAS,mBAAA,GAAsB;AACpC,EAAA,MAAM,CAAC,gBAAA,EAAkB,mBAAmB,CAAA,GAAID,eAAkB,KAAK,CAAA;AAEvE,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,MAAM,MAAA,CAAO,UAAA,CAAW,CAAA,YAAA,EAAe,iBAAA,GAAoB,CAAC,CAAA,GAAA,CAAK,CAAA;AACvE,IAAA,MAAM,WAAW,MAAM;AACrB,MAAA,mBAAA,CAAoB,MAAA,CAAO,aAAa,iBAAiB,CAAA;AAAA,IAC3D,CAAA;AACA,IAAA,GAAA,CAAI,gBAAA,CAAiB,UAAU,QAAQ,CAAA;AACvC,IAAA,mBAAA,CAAoB,MAAA,CAAO,aAAa,iBAAiB,CAAA;AACzD,IAAA,OAAO,MAAM,GAAA,CAAI,mBAAA,CAAoB,QAAA,EAAU,QAAQ,CAAA;AAAA,EACzD,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,OAAO,gBAAA;AACT","file":"chunk-5NYM4UTW.cjs","sourcesContent":["import { useState, useEffect } from \"react\";\n\nconst MOBILE_BREAKPOINT = 768;\nconst TABLET_BREAKPOINT = 1024;\n\nexport function useIsMobile() {\n  const [isMobile, setIsMobile] = useState<boolean>(false);\n\n  useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n    };\n    mql.addEventListener(\"change\", onChange);\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n    return () => mql.removeEventListener(\"change\", onChange);\n  }, []);\n\n  return isMobile;\n}\n\nexport function useIsTablet() {\n  const [isTablet, setIsTablet] = useState<boolean>(false);\n\n  useEffect(() => {\n    const mql = window.matchMedia(\n      `(min-width: ${MOBILE_BREAKPOINT}px) and (max-width: ${TABLET_BREAKPOINT - 1}px)`,\n    );\n    const onChange = () => {\n      setIsTablet(\n        window.innerWidth >= MOBILE_BREAKPOINT &&\n          window.innerWidth < TABLET_BREAKPOINT,\n      );\n    };\n    mql.addEventListener(\"change\", onChange);\n    setIsTablet(\n      window.innerWidth >= MOBILE_BREAKPOINT &&\n        window.innerWidth < TABLET_BREAKPOINT,\n    );\n    return () => mql.removeEventListener(\"change\", onChange);\n  }, []);\n\n  return isTablet;\n}\n\nexport function useIsMobileOrTablet() {\n  const [isMobileOrTablet, setIsMobileOrTablet] = useState<boolean>(false);\n\n  useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${TABLET_BREAKPOINT - 1}px)`);\n    const onChange = () => {\n      setIsMobileOrTablet(window.innerWidth < TABLET_BREAKPOINT);\n    };\n    mql.addEventListener(\"change\", onChange);\n    setIsMobileOrTablet(window.innerWidth < TABLET_BREAKPOINT);\n    return () => mql.removeEventListener(\"change\", onChange);\n  }, []);\n\n  return isMobileOrTablet;\n}\n"]}

package/dist/chunk-BWHUEED3.cjs

@@ -0,0 +1,32 @@
+'use strict';
+
+var chunkCMXYKDHC_cjs = require('./chunk-CMXYKDHC.cjs');
+require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function AppShellLayout({
+  sidebarContent,
+  headerContent,
+  children,
+  sidebarHeader,
+  sidebarFooter,
+  afterContent,
+  useBottomNav = false
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(chunkCMXYKDHC_cjs.SidebarProvider, { useBottomNav, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex max-h-dvh w-full overflow-hidden bg-muted", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(chunkCMXYKDHC_cjs.Sidebar, { children: [
+      sidebarHeader && /* @__PURE__ */ jsxRuntime.jsx(chunkCMXYKDHC_cjs.SidebarHeader, { children: sidebarHeader }),
+      /* @__PURE__ */ jsxRuntime.jsx(chunkCMXYKDHC_cjs.SidebarContent, { className: "p-4", children: sidebarContent }),
+      sidebarFooter && /* @__PURE__ */ jsxRuntime.jsx(chunkCMXYKDHC_cjs.SidebarFooter, { children: sidebarFooter })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(chunkCMXYKDHC_cjs.SidebarInset, { className: "flex flex-1 flex-col overflow-hidden", children: [
+      headerContent,
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-hidden bg-muted md:pr-4 md:pb-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "scrollbar-none h-full overflow-auto rounded-xl bg-background text-foreground shadow-lg", children }) })
+    ] }),
+    afterContent
+  ] }) });
+}
+
+exports.AppShellLayout = AppShellLayout;
+//# sourceMappingURL=chunk-BWHUEED3.cjs.map
+//# sourceMappingURL=chunk-BWHUEED3.cjs.map

package/dist/chunk-BWHUEED3.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/shell/AppShellLayout.tsx"],"names":["SidebarProvider","jsxs","Sidebar","jsx","SidebarHeader","SidebarContent","SidebarFooter","SidebarInset"],"mappings":";;;;;;AAqCO,SAAS,cAAA,CAAe;AAAA,EAC7B,cAAA;AAAA,EACA,aAAA;AAAA,EACA,QAAA;AAAA,EACA,aAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,YAAA,GAAe;AACjB,CAAA,EAAwB;AACtB,EAAA,sCACGA,iCAAA,EAAA,EAAgB,YAAA,EACf,QAAA,kBAAAC,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,yDAAA,EAEb,QAAA,EAAA;AAAA,oBAAAA,eAAA,CAACC,yBAAA,EAAA,EACE,QAAA,EAAA;AAAA,MAAA,aAAA,oBAAiBC,cAAA,CAACC,mCAAe,QAAA,EAAA,aAAA,EAAc,CAAA;AAAA,sBAChDD,cAAA,CAACE,gCAAA,EAAA,EAAe,SAAA,EAAU,KAAA,EAAO,QAAA,EAAA,cAAA,EAAe,CAAA;AAAA,MAC/C,aAAA,oBAAiBF,cAAA,CAACG,+BAAA,EAAA,EAAe,QAAA,EAAA,aAAA,EAAc;AAAA,KAAA,EAClD,CAAA;AAAA,oBAGAL,eAAA,CAACM,8BAAA,EAAA,EAAa,SAAA,EAAU,sCAAA,EAErB,QAAA,EAAA;AAAA,MAAA,aAAA;AAAA,sBAGDJ,cAAA,CAAC,SAAI,SAAA,EAAU,iDAAA,EACb,yCAAC,KAAA,EAAA,EAAI,SAAA,EAAU,wFAAA,EACZ,QAAA,EACH,CAAA,EACF;AAAA,KAAA,EACF,CAAA;AAAA,IAGC;AAAA,GAAA,EACH,CAAA,EACF,CAAA;AAEJ","file":"chunk-BWHUEED3.cjs","sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarInset,\n  SidebarProvider,\n} from \"./sidebar\";\n\nexport interface AppShellLayoutProps {\n  /** Navigation content rendered inside the sidebar's scrollable area */\n  sidebarContent: React.ReactNode;\n  /** Header content rendered above the main content area */\n  headerContent: React.ReactNode;\n  /** Main page content */\n  children: React.ReactNode;\n  /** Optional slot at the top of the sidebar (e.g. logo, search) */\n  sidebarHeader?: React.ReactNode;\n  /** Optional slot at the bottom of the sidebar (e.g. user info) */\n  sidebarFooter?: React.ReactNode;\n  /** Content rendered after SidebarInset (e.g. MobileBottomNav) */\n  afterContent?: React.ReactNode;\n  /** Enable bottom nav mode (hides sidebar on mobile, adds bottom padding) */\n  useBottomNav?: boolean;\n}\n\n/**\n * Pure visual frame that replicates the RepApp layout:\n * - 13rem collapsible sidebar\n * - 52px header area\n * - rounded-xl bg-background shadow-lg content area with bg-muted gutters\n *\n * This component handles zero business logic — it simply provides the visual shell.\n */\nexport function AppShellLayout({\n  sidebarContent,\n  headerContent,\n  children,\n  sidebarHeader,\n  sidebarFooter,\n  afterContent,\n  useBottomNav = false,\n}: AppShellLayoutProps) {\n  return (\n    <SidebarProvider useBottomNav={useBottomNav}>\n      <div className=\"relative flex max-h-dvh w-full overflow-hidden bg-muted\">\n        {/* Navigation Sidebar */}\n        <Sidebar>\n          {sidebarHeader && <SidebarHeader>{sidebarHeader}</SidebarHeader>}\n          <SidebarContent className=\"p-4\">{sidebarContent}</SidebarContent>\n          {sidebarFooter && <SidebarFooter>{sidebarFooter}</SidebarFooter>}\n        </Sidebar>\n\n        {/* Main Content Area */}\n        <SidebarInset className=\"flex flex-1 flex-col overflow-hidden\">\n          {/* Header */}\n          {headerContent}\n\n          {/* Screen Content */}\n          <div className=\"flex-1 overflow-hidden bg-muted md:pr-4 md:pb-4\">\n            <div className=\"scrollbar-none h-full overflow-auto rounded-xl bg-background text-foreground shadow-lg\">\n              {children}\n            </div>\n          </div>\n        </SidebarInset>\n\n        {/* After content (e.g. MobileBottomNav) */}\n        {afterContent}\n      </div>\n    </SidebarProvider>\n  );\n}\n"]}