npm - seemore - Versions diffs - 1.10.2 → 1.10.4 - Mend

seemore 1.10.2 → 1.10.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/package.json +1 -1
package/src/app/export/exportPage.ts +1 -1
package/src/app/export/standalone.ts +1 -1
package/src/app/index.html +9 -0
package/src/app/layout/Sidebar.tsx +19 -1
package/src/app/styles/globals.css +52 -7

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "seemore",
-  "version": "1.10.2",
+  "version": "1.10.4",
   "description": "Let AI write the Markdown. Let seemore show it better — zero config documentation framework.",
   "license": "MIT",
   "type": "module",

package/src/app/export/exportPage.ts CHANGED Viewed

@@ -305,7 +305,7 @@ const RUNTIME = `(function () {
   // Wide enough for the rail: open the collapsible so it reads as a list, not a disclosure.
   var tocDetails = document.querySelector('.seemore-export-toc details');
-  if (tocDetails && window.matchMedia('(min-width: 1440px)').matches) tocDetails.open = true;
+  if (tocDetails && window.matchMedia('(min-width: 1024px)').matches) tocDetails.open = true;
   var main = document.querySelector('main');
   var overlay = document.createElement('div');

package/src/app/export/standalone.ts CHANGED Viewed

@@ -124,7 +124,7 @@ function bindBehaviors(): void {
   // Wide enough for the rail: open the collapsible so it reads as a list, not a disclosure.
   const tocDetails = document.querySelector<HTMLDetailsElement>('.seemore-export-toc details');
-  if (tocDetails && window.matchMedia('(min-width: 1440px)').matches) tocDetails.open = true;
+  if (tocDetails && window.matchMedia('(min-width: 1024px)').matches) tocDetails.open = true;
   const overlay = document.createElement('div');
   overlay.className = 'seemore-export-overlay';

package/src/app/index.html CHANGED Viewed

@@ -9,6 +9,15 @@
          artwork the editor extension ships as its icon. Inlined rather than linked so the
          built site needs no extra request and no file in the user's folder. -->
     <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Crect width='128' height='128' rx='28' fill='%236D5EF5'/%3E%3Crect x='30' y='26' width='52' height='68' rx='8' fill='%23ffffff' opacity='0.35' transform='rotate(-8 56 60)'/%3E%3Crect x='38' y='22' width='52' height='68' rx='8' fill='%23ffffff' opacity='0.6' transform='rotate(-3 64 56)'/%3E%3Crect x='46' y='24' width='52' height='72' rx='8' fill='%23ffffff'/%3E%3Cg stroke-linecap='round'%3E%3Cline x1='56' y1='42' x2='82' y2='42' stroke='%236D5EF5' stroke-width='6'/%3E%3Cline x1='56' y1='56' x2='88' y2='56' stroke='%23C6C8E6' stroke-width='4'/%3E%3Cline x1='56' y1='66' x2='80' y2='66' stroke='%23C6C8E6' stroke-width='4'/%3E%3Cline x1='56' y1='76' x2='88' y2='76' stroke='%236D5EF5' stroke-width='4'/%3E%3Cline x1='56' y1='86' x2='74' y2='86' stroke='%23C6C8E6' stroke-width='4'/%3E%3C/g%3E%3C/svg%3E" />
+    <!-- Runs before body paints, so a remembered sidebar collapse applies on the very first
+         frame instead of flashing the rail open and then closing it once React hydrates. -->
+    <script>
+      try {
+        if (localStorage.getItem('seemore:sidebar-collapsed') === 'true') {
+          document.documentElement.dataset.sidebarCollapsed = 'true';
+        }
+      } catch {}
+    </script>
     <!--seemore-head-->
   </head>
   <body>

package/src/app/layout/Sidebar.tsx CHANGED Viewed

@@ -44,11 +44,23 @@ const styled = {
 const renderPageTree = createPageTreeRenderer(styled);
 const COLLAPSE_KEY = 'seemore:sidebar-collapsed';
+const COLLAPSE_ATTR = 'sidebarCollapsed';
 /* `useLayoutEffect` does nothing on the server and says so in a warning; the prerender pass
    takes `useEffect`, which it never runs either. */
 const useIsomorphicLayoutEffect = typeof document === 'undefined' ? useEffect : useLayoutEffect;
+/**
+ * Mirrors the collapse choice onto `<html data-sidebar-collapsed>`, the attribute the blocking
+ * script in `index.html` sets from `localStorage` before React ever runs. Once hydrated, this
+ * component's own state is authoritative and must keep that attribute in sync — otherwise a
+ * later un-collapse would leave the attribute (and the CSS rule keyed on it) stuck on `true`.
+ */
+function syncCollapseAttr(collapsed: boolean): void {
+  if (collapsed) document.documentElement.dataset[COLLAPSE_ATTR] = 'true';
+  else delete document.documentElement.dataset[COLLAPSE_ATTR];
+}
 /**
  * Hiding the rail is a reader's preference, like the theme, so it outlives the page rather
  * than resetting on the next load. fumadocs owns the state itself — every primitive reads
@@ -65,6 +77,7 @@ export function useSidebarCollapse(): { collapsed: boolean; toggle: () => void }
     } catch {
       // Storage blocked, private window: the choice just does not outlive the page.
     }
+    syncCollapseAttr(next);
     setCollapsed(next);
   }, [collapsed, setCollapsed]);
@@ -77,9 +90,14 @@ function useRestoreCollapse(): void {
   useIsomorphicLayoutEffect(() => {
     try {
-      if (localStorage.getItem(COLLAPSE_KEY) === 'true') setCollapsed(true);
+      const restored = localStorage.getItem(COLLAPSE_KEY) === 'true';
+      if (restored) setCollapsed(true);
+      // Reconciles the head script's guess with the real value — clears it if storage was
+      // wiped or disagrees, so a stale attribute never outlives the state it was priming.
+      syncCollapseAttr(restored);
     } catch {
       // Nothing readable is nothing to restore; the rail stays open.
+      syncCollapseAttr(false);
     }
   }, [setCollapsed]);
 }

package/src/app/styles/globals.css CHANGED Viewed

@@ -181,6 +181,13 @@
     @apply md:hidden;
   }
+  /* Matches the rule above but keyed off the attribute the blocking head script sets, so a
+     remembered collapse hides the rail on the very first paint, before React has hydrated and
+     taken over via `data-collapsed`. */
+  :root[data-sidebar-collapsed='true'] .seemore-sidebar-column {
+    @apply md:hidden;
+  }
   .seemore-sidebar-backdrop {
     @apply fixed inset-0 z-30 bg-black/40 md:hidden;
   }
@@ -622,15 +629,53 @@
   color: var(--color-fd-foreground, #111827);
 }
-/* From 1440px up there is room for both the reading column and the rail side by side;
-   below that the rail would ride over the text, so the collapsible stays in flow.
+/* From 1024px up — the live page's own `lg` breakpoint for showing its TOC rail — there is
+   enough room for the rail if the reading column gives up its centring and narrows to make
+   space; below that the rail would ride over the text at any column width, so the
+   collapsible stays in flow there.
+   Two tiers because a centred 56rem column plus the rail's 14rem + 2rem gap needs
+   1152px+ to coexist without narrowing: from 1024px the column is pinned to the left
+   with a right-hand reservation sized exactly for the rail, gap and outer margin; once
+   there is enough width (1440px) for the column to sit at its full 56rem *and* stay
+   centred with that same 2rem gap to the rail, it switches back to centred — matching
+   the live page's `md:px-8` column padding either way. */
+@media (min-width: 1024px) and (max-width: 1439.98px) {
+  .seemore-export-main {
+    margin-inline: 0;
+    max-width: none;
+    padding-inline-end: 18rem;
+    padding-inline-start: 2rem;
+  }
+  .seemore-export-toc {
+    inset-inline-end: 2rem;
+    margin-block: 0;
+    max-height: calc(100vh - 8rem);
+    overflow-y: auto;
+    position: fixed;
+    top: 5rem;
+    width: 14rem;
+    z-index: 40;
+  }
+  .seemore-export-toc summary {
+    cursor: default;
+    margin-bottom: 0.75rem;
+  }
+  .seemore-export-toc summary::after {
+    display: none;
+  }
+}
-   The rail's `inset-inline-end` is pinned to the article's own centring math (its
-   56rem/2 half-width) rather than a flat viewport offset, so the gap between the
-   article's right edge and the rail stays a fixed 2rem at any width above the
-   breakpoint — matching the live page's `md:px-8` column padding — instead of shrinking
-   toward zero as the viewport narrows toward the breakpoint. */
 @media (min-width: 1440px) {
+  .seemore-export-main {
+    margin-inline: auto;
+    max-width: 56rem;
+    padding-inline: 1rem;
+  }
   .seemore-export-toc {
     inset-inline-end: calc((100vw - 56rem) / 2 - 14rem - 2rem);
     margin-block: 0;