@oksigenia/access-panel 0.7.1 → 0.7.2

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @oksigenia/access-panel
 
+## 0.7.2
+
+### Patch Changes
+
+- Two fixes:
+
+  - **The open panel no longer overflows short desktop viewports.** The panel was capped at a flat `90vh` while sitting 80–100px from its anchored edge, so at 1280×720 or on a 1366×768 laptop a `bottom-*` panel ran past the top of the screen and took the header with the close button with it (`top-*` panels overflowed the bottom the same way). Each anchor now caps the panel to the room it actually has (`calc(100dvh - <offset> - 20px)`, with a `vh` fallback), and the content area scrolls inside. Mobile is unchanged: it stays full-screen.
+  - **Blocked storage no longer breaks the panel.** `typeof localStorage` sat outside the `try`, and when storage is denied (all cookies blocked, sandboxed iframe) merely reading `window.localStorage` throws — the component lost its behaviour and the trigger did nothing. The check now lives inside the guard; the panel works and simply doesn't persist settings.
+
 ## 0.7.1
 
 ### Patch Changes

package/dist/index.js

@@ -256,29 +256,32 @@ function escapeAttr(s) {
 function positionRules(position) {
   switch (position) {
     case "top-left":
-      return { wrap: "top: 20px; left: 20px;", panel: "top: 80px; left: 20px;" };
+      return { wrap: "top: 20px; left: 20px;", panel: "top: 80px; left: 20px;", reserve: 100 };
     case "top-center":
-      return { wrap: "top: 20px; left: 50%; transform: translateX(-50%);", panel: "top: 80px; left: 50%; transform: translateX(-50%);" };
+      return { wrap: "top: 20px; left: 50%; transform: translateX(-50%);", panel: "top: 80px; left: 50%; transform: translateX(-50%);", reserve: 100 };
     case "top-right":
-      return { wrap: "top: 20px; right: 20px;", panel: "top: 80px; right: 20px;" };
+      return { wrap: "top: 20px; right: 20px;", panel: "top: 80px; right: 20px;", reserve: 100 };
     case "mid-left":
-      return { wrap: "top: 50%; left: 20px; transform: translateY(-50%);", panel: "top: 50%; left: 90px; transform: translateY(-50%);" };
+      return { wrap: "top: 50%; left: 20px; transform: translateY(-50%);", panel: "top: 50%; left: 90px; transform: translateY(-50%);", reserve: 40 };
     case "mid-center":
-      return { wrap: "top: 50%; left: 50%; transform: translate(-50%, -50%);", panel: "top: 50%; left: 50%; transform: translate(-50%, -50%);" };
+      return { wrap: "top: 50%; left: 50%; transform: translate(-50%, -50%);", panel: "top: 50%; left: 50%; transform: translate(-50%, -50%);", reserve: 40 };
     case "mid-right":
-      return { wrap: "top: 50%; right: 20px; transform: translateY(-50%);", panel: "top: 50%; right: 90px; transform: translateY(-50%);" };
+      return { wrap: "top: 50%; right: 20px; transform: translateY(-50%);", panel: "top: 50%; right: 90px; transform: translateY(-50%);", reserve: 40 };
     case "bottom-left":
-      return { wrap: "bottom: 20px; left: 20px;", panel: "bottom: 100px; left: 20px;" };
+      return { wrap: "bottom: 20px; left: 20px;", panel: "bottom: 100px; left: 20px;", reserve: 120 };
     case "bottom-center":
-      return { wrap: "bottom: 20px; left: 50%; transform: translateX(-50%);", panel: "bottom: 100px; left: 50%; transform: translateX(-50%);" };
+      return { wrap: "bottom: 20px; left: 50%; transform: translateX(-50%);", panel: "bottom: 100px; left: 50%; transform: translateX(-50%);", reserve: 120 };
     case "bottom-right":
-      return { wrap: "bottom: 20px; right: 20px;", panel: "bottom: 100px; right: 20px;" };
+      return { wrap: "bottom: 20px; right: 20px;", panel: "bottom: 100px; right: 20px;", reserve: 120 };
   }
 }
+function panelMaxHeight(reserve) {
+  return `max-height: calc(100vh - ${reserve}px); max-height: calc(100dvh - ${reserve}px);`;
+}
 function positionCss(position, mobile) {
   const d = positionRules(position);
   let css = `.oks-access-wrapper { ${d.wrap} }`;
-  css += `@media (min-width: 769px) { .oks-access-panel { ${d.panel} } }`;
+  css += `@media (min-width: 769px) { .oks-access-panel { ${d.panel} ${panelMaxHeight(d.reserve)} } }`;
   if (mobile && mobile !== position) {
     const m = positionRules(mobile);
     css += `@media (max-width: 768px) { .oks-access-wrapper { top: auto; right: auto; bottom: auto; left: auto; transform: none; ${m.wrap} } }`;
@@ -307,8 +310,8 @@ var DEFAULT_STATE = Object.freeze({
   bigTargets: false
 });
 function loadState(key) {
-  if (typeof localStorage === "undefined") return { ...DEFAULT_STATE };
   try {
+    if (typeof localStorage === "undefined") return { ...DEFAULT_STATE };
     const raw = localStorage.getItem(key);
     if (!raw) return { ...DEFAULT_STATE };
     const parsed = JSON.parse(raw);
@@ -319,8 +322,8 @@ function loadState(key) {
   }
 }
 function saveState(key, state) {
-  if (typeof localStorage === "undefined") return;
   try {
+    if (typeof localStorage === "undefined") return;
     const out = {};
     for (const [k, v] of Object.entries(state)) {
       if (typeof v === "number" && v > 0) out[k] = v;