@northslopetech/altitude-ui-references 2.6.4 → 2.7.0

package/dist/manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "2.6.4",
-  "generatedAt": "2025-12-08T18:10:09.684Z",
+  "version": "2.7.0",
+  "generatedAt": "2026-01-16T16:50:48.564Z",
   "components": [
     "Badge",
     "Button",

package/dist/references/PdfViewer.md

@@ -16,8 +16,8 @@ import workerUrl from "@northslopetech/altitude-ui/pdf.worker.min.mjs?url";
 import { initializePdfWorker } from "@northslopetech/altitude-ui";
 initializePdfWorker(workerUrl);
 
-// Sample PDF URL for testing
-const SAMPLE_PDF_URL = "https://pdfobject.com/pdf/sample.pdf";
+const SAMPLE_PDF_URL =
+  "https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf";
 
 const meta: Meta<PdfViewerProps> = {
   title: "Components/PdfViewer",
@@ -27,7 +27,7 @@ const meta: Meta<PdfViewerProps> = {
     docs: {
       description: {
         component:
-          "A PDF document viewer component with multi-page support. Renders all pages of a PDF document with automatic width adjustment and loading states.",
+          "A PDF document viewer component with multi-page support. Uses virtualization to render visible pages plus a configurable buffer for efficient large PDF handling. Features automatic width adjustment, loading states, page navigation, zoom controls, and configurable view and scroll behavior.",
       },
     },
   },
@@ -49,11 +49,37 @@ const meta: Meta<PdfViewerProps> = {
       control: { type: "boolean" },
       description: "Enable text selection (impacts performance)",
     },
+    showControls: {
+      control: { type: "boolean" },
+      description: "Show/hide the controls bar (page navigation and zoom)",
+    },
+    viewportBuffer: {
+      control: { type: "number", min: 0 },
+      description:
+        "Number of pages to render above and below the viewport for virtualization",
+    },
+    page: {
+      control: { type: "number", min: 1 },
+      description: "Current page number (1-indexed) for controlled mode",
+    },
+    scrollBehavior: {
+      control: { type: "select" },
+      options: ["smooth", "instant"],
+      description:
+        "Scroll behavior when navigating to a page (smooth animation or instant jump)",
+    },
+    viewMode: {
+      control: { type: "select" },
+      options: ["continuous", "single"],
+      description:
+        "View mode: continuous (scrollable with virtualization) or single (one page at a time)",
+    },
   },
   args: {
     file: SAMPLE_PDF_URL,
     title: "Sample_Document",
     enableTextLayer: false,
+    showControls: true,
   },
 };
 
@@ -71,8 +97,9 @@ export const Default: Story = {
           PDF Viewer
         </Typography>
         <Typography variant="body-sm" className="text-secondary">
-          A PDF viewer that displays all pages of a document with automatic
-          width adjustment and smooth scrolling.
+          A PDF viewer that displays pages with automatic width adjustment,
+          smooth scrolling, page navigation, and zoom controls. Uses
+          virtualization for efficient rendering of large documents.
         </Typography>
       </div>
       <div style={{ height: "600px" }}>
@@ -82,6 +109,143 @@ export const Default: Story = {
   ),
 };
 
+export const SinglePageView: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <div className="mb-8">
+        <Typography
+          variant="label-xs-bold"
+          className="inline-block px-4 py-2 mb-6 uppercase bg-dark text-light"
+        >
+          Single Page View
+        </Typography>
+        <Typography variant="body-sm" className="text-secondary">
+          Displays one page at a time. Use the navigation controls to move
+          between pages. No scrolling required.
+        </Typography>
+      </div>
+      <div style={{ height: "600px" }}>
+        <PdfViewer
+          file={SAMPLE_PDF_URL}
+          title="Single Page Mode"
+          viewMode="single"
+        />
+      </div>
+    </div>
+  ),
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      description: {
+        story:
+          'Single page view mode (viewMode="single") shows one page at a time. Use the navigation controls to move between pages.',
+      },
+    },
+  },
+};
+
+export const ControlledPage: Story = {
+  render: () => {
+    const [page, setPage] = useState(1);
+
+    return (
+      <div className="space-y-8">
+        <div className="mb-8">
+          <Typography
+            variant="label-xs-bold"
+            className="inline-block px-4 py-2 mb-6 uppercase bg-dark text-light"
+          >
+            Controlled Page State
+          </Typography>
+          <Typography variant="body-sm" className="text-secondary">
+            The page state is controlled externally via the `page` prop. Use the
+            buttons below to change pages programmatically.
+          </Typography>
+        </div>
+        <div className="mb-4 flex items-center gap-2">
+          <button
+            onClick={() => setPage(1)}
+            disabled={page === 1}
+            className="px-3 py-1.5 bg-primary text-light rounded text-sm disabled:opacity-50"
+          >
+            Page 1
+          </button>
+          <button
+            onClick={() => setPage(7)}
+            disabled={page === 7}
+            className="px-3 py-1.5 bg-primary text-light rounded text-sm disabled:opacity-50"
+          >
+            Page 7
+          </button>
+          <button
+            onClick={() => setPage(14)}
+            disabled={page === 14}
+            className="px-3 py-1.5 bg-primary text-light rounded text-sm disabled:opacity-50"
+          >
+            Page 14
+          </button>
+          <Typography variant="body-sm" className="text-secondary ml-4">
+            Current: page = {page}
+          </Typography>
+        </div>
+        <div style={{ height: "600px" }}>
+          <PdfViewer
+            file={SAMPLE_PDF_URL}
+            title="Controlled Mode"
+            page={page}
+            onPageChange={setPage}
+          />
+        </div>
+      </div>
+    );
+  },
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      description: {
+        story:
+          "Demonstrates controlled mode where the page state is managed externally via the `page` prop. Clicking the buttons smoothly scrolls to the target page. Scrolling or using navigation controls updates the external state via `onPageChange`.",
+      },
+    },
+  },
+};
+
+export const SmoothScroll: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <div className="mb-8">
+        <Typography
+          variant="label-xs-bold"
+          className="inline-block px-4 py-2 mb-6 uppercase bg-dark text-light"
+        >
+          Smooth Scroll Behavior
+        </Typography>
+        <Typography variant="body-sm" className="text-secondary">
+          When navigating via controls, the page smoothly animates instead of
+          jumping instantly. Use the page navigation controls to see the
+          difference.
+        </Typography>
+      </div>
+      <div style={{ height: "600px" }}>
+        <PdfViewer
+          file={SAMPLE_PDF_URL}
+          title="Smooth Scroll"
+          scrollBehavior="smooth"
+        />
+      </div>
+    </div>
+  ),
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      description: {
+        story:
+          'Uses scrollBehavior="smooth" for animated page transitions instead of instant jumps.',
+      },
+    },
+  },
+};
+
 export const WithCallbacks: Story = {
   render: () => {
     const [action, setAction] = useState<string>("No action yet");

package/dist/references/Sidebar.md

@@ -45,8 +45,8 @@ const meta: Meta<typeof SidebarProvider> = {
         component:
           "A collapsible sidebar navigation component with expanded and icon-only states. Features tooltip support when collapsed, smooth transitions, and flexible content organization.\n\n" +
           "## Related Resources\n\n" +
-          "- [AppSidebar Implementation](https://github.com/northslopetech/osdk-cli/blob/main/templates/default/src/components/layout/AppSidebar.tsx) - Full implementation example showing how to compose the Sidebar primitive components into an application-level sidebar component\n" +
-          "- [Usage in Application Routes](https://github.com/northslopetech/osdk-cli/blob/main/templates/default/src/routes/__root.tsx#L37) - Real-world usage of AppSidebar integrated into a TanStack Router root layout with SidebarProvider",
+          "- [AppSidebar Implementation](https://github.com/northslopetech/ns-cli/blob/main/templates/default/src/components/layout/AppSidebar.tsx) - Full implementation example showing how to compose the Sidebar primitive components into an application-level sidebar component\n" +
+          "- [Usage in Application Routes](https://github.com/northslopetech/ns-cli/blob/main/templates/default/src/routes/__root.tsx#L37) - Real-world usage of AppSidebar integrated into a TanStack Router root layout with SidebarProvider",
       },
     },
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@northslopetech/altitude-ui-references",
-  "version": "2.6.4",
+  "version": "2.7.0",
   "private": false,
   "description": "Markdown reference documentation generated from Altitude UI Storybook stories",
   "author": "Northslope",