@papyrus-sdk/ui-react 0.2.17 → 0.2.19

package/base.css

@@ -1,45 +1,86 @@
 .papyrus-theme {
-  --papyrus-bg: #f3f4f6;
-  --papyrus-surface: #ffffff;
-  --papyrus-surface-2: #f9fafb;
-  --papyrus-border: #e5e7eb;
-  --papyrus-border-strong: #d1d5db;
-  --papyrus-text: #111827;
-  --papyrus-text-muted: #6b7280;
-  --papyrus-icon: #6b7280;
-  --papyrus-focus: #93c5fd;
-  --papyrus-canvas: #f3f4f6;
-  --papyrus-hover: #e5e7eb;
-  --papyrus-popover: #ffffff;
-  --papyrus-shadow: rgba(15, 23, 42, 0.08);
-  --papyrus-selection-bg: rgba(30, 64, 175, 0.5);
-  color: var(--papyrus-text);
+  --papyrus-bg-fallback: #f3f4f6;
+  --papyrus-surface-fallback: #ffffff;
+  --papyrus-surface-2-fallback: #f9fafb;
+  --papyrus-border-fallback: #e5e7eb;
+  --papyrus-border-strong-fallback: #d1d5db;
+  --papyrus-text-fallback: #111827;
+  --papyrus-text-muted-fallback: #6b7280;
+  --papyrus-icon-fallback: #6b7280;
+  --papyrus-focus-fallback: #93c5fd;
+  --papyrus-canvas-fallback: #f3f4f6;
+  --papyrus-hover-fallback: #e5e7eb;
+  --papyrus-popover-fallback: #ffffff;
+  --papyrus-shadow-fallback: rgba(15, 23, 42, 0.08);
+  --papyrus-selection-bg-fallback: rgba(30, 64, 175, 0.5);
+  --papyrus-bg-resolved: var(--papyrus-bg, var(--papyrus-bg-fallback));
+  --papyrus-surface-resolved: var(
+    --papyrus-surface,
+    var(--papyrus-surface-fallback)
+  );
+  --papyrus-surface-2-resolved: var(
+    --papyrus-surface-2,
+    var(--papyrus-surface-2-fallback)
+  );
+  --papyrus-border-resolved: var(
+    --papyrus-border,
+    var(--papyrus-border-fallback)
+  );
+  --papyrus-border-strong-resolved: var(
+    --papyrus-border-strong,
+    var(--papyrus-border-strong-fallback)
+  );
+  --papyrus-text-resolved: var(--papyrus-text, var(--papyrus-text-fallback));
+  --papyrus-text-muted-resolved: var(
+    --papyrus-text-muted,
+    var(--papyrus-text-muted-fallback)
+  );
+  --papyrus-icon-resolved: var(--papyrus-icon, var(--papyrus-icon-fallback));
+  --papyrus-focus-resolved: var(--papyrus-focus, var(--papyrus-focus-fallback));
+  --papyrus-canvas-resolved: var(
+    --papyrus-canvas,
+    var(--papyrus-canvas-fallback)
+  );
+  --papyrus-hover-resolved: var(--papyrus-hover, var(--papyrus-hover-fallback));
+  --papyrus-popover-resolved: var(
+    --papyrus-popover,
+    var(--papyrus-popover-fallback)
+  );
+  --papyrus-shadow-resolved: var(
+    --papyrus-shadow,
+    var(--papyrus-shadow-fallback)
+  );
+  --papyrus-selection-bg-resolved: var(
+    --papyrus-selection-bg,
+    var(--papyrus-selection-bg-fallback)
+  );
+  color: var(--papyrus-text-resolved);
   font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
 }
 
 .papyrus-theme[data-papyrus-theme="dark"] {
-  --papyrus-bg: #0f1115;
-  --papyrus-surface: #1a1a1a;
-  --papyrus-surface-2: #222222;
-  --papyrus-border: #333333;
-  --papyrus-border-strong: #444444;
-  --papyrus-text: #f3f4f6;
-  --papyrus-text-muted: #9ca3af;
-  --papyrus-icon: #9ca3af;
-  --papyrus-focus: #2563eb;
-  --papyrus-canvas: #121212;
-  --papyrus-hover: rgba(255, 255, 255, 0.08);
-  --papyrus-popover: #1f1f1f;
-  --papyrus-shadow: rgba(0, 0, 0, 0.4);
-  --papyrus-selection-bg: rgba(96, 165, 250, 0.5);
+  --papyrus-bg-fallback: #0f1115;
+  --papyrus-surface-fallback: #1a1a1a;
+  --papyrus-surface-2-fallback: #222222;
+  --papyrus-border-fallback: #333333;
+  --papyrus-border-strong-fallback: #444444;
+  --papyrus-text-fallback: #f3f4f6;
+  --papyrus-text-muted-fallback: #9ca3af;
+  --papyrus-icon-fallback: #9ca3af;
+  --papyrus-focus-fallback: #2563eb;
+  --papyrus-canvas-fallback: #121212;
+  --papyrus-hover-fallback: rgba(255, 255, 255, 0.08);
+  --papyrus-popover-fallback: #1f1f1f;
+  --papyrus-shadow-fallback: rgba(0, 0, 0, 0.4);
+  --papyrus-selection-bg-fallback: rgba(96, 165, 250, 0.5);
 }
 
 .papyrus-topbar,
 .papyrus-sidebar-left,
 .papyrus-sidebar-right {
-  background: var(--papyrus-surface) !important;
-  border-color: var(--papyrus-border) !important;
-  color: var(--papyrus-text) !important;
+  background: var(--papyrus-surface-resolved) !important;
+  border-color: var(--papyrus-border-resolved) !important;
+  color: var(--papyrus-text-resolved) !important;
   box-sizing: border-box;
   font-size: 13px;
   line-height: 1.4;
@@ -54,6 +95,33 @@
   font-size: 14px;
 }
 
+/* Fallback responsive display helpers for hosts that don't emit dependency Tailwind utilities. */
+.papyrus-topbar .hidden {
+  display: none;
+}
+
+@media (min-width: 640px) {
+  .papyrus-topbar .sm\:inline {
+    display: inline !important;
+  }
+
+  .papyrus-topbar .sm\:inline-flex {
+    display: inline-flex !important;
+  }
+
+  .papyrus-topbar .sm\:block {
+    display: block !important;
+  }
+
+  .papyrus-topbar .sm\:flex {
+    display: flex !important;
+  }
+
+  .papyrus-topbar .sm\:hidden {
+    display: none !important;
+  }
+}
+
 @media (max-width: 720px) {
   .papyrus-topbar {
     flex-wrap: wrap;
@@ -72,33 +140,33 @@
 }
 
 .papyrus-viewer {
-  background: var(--papyrus-canvas) !important;
+  background: var(--papyrus-canvas-resolved) !important;
   box-sizing: border-box;
   flex: 1 1 auto;
   overflow-x: hidden;
   overflow-y: scroll;
   scrollbar-gutter: stable;
-  color: var(--papyrus-text);
+  color: var(--papyrus-text-resolved);
 }
 
 .papyrus-control,
 .papyrus-input,
 .papyrus-popover {
-  background: var(--papyrus-surface-2) !important;
-  border-color: var(--papyrus-border) !important;
-  color: var(--papyrus-text) !important;
+  background: var(--papyrus-surface-2-resolved) !important;
+  border-color: var(--papyrus-border-resolved) !important;
+  color: var(--papyrus-text-resolved) !important;
 }
 
 .papyrus-popover {
-  background: var(--papyrus-popover) !important;
-  box-shadow: 0 20px 40px var(--papyrus-shadow);
+  background: var(--papyrus-popover-resolved) !important;
+  box-shadow: 0 20px 40px var(--papyrus-shadow-resolved);
 }
 
 .papyrus-topbar button,
 .papyrus-sidebar-left button,
 .papyrus-sidebar-right button {
-  background: var(--papyrus-surface-2);
-  border: 1px solid var(--papyrus-border);
+  background: var(--papyrus-surface-2-resolved);
+  border: 1px solid var(--papyrus-border-resolved);
   border-radius: 8px;
   color: inherit;
   cursor: pointer;
@@ -119,11 +187,11 @@
 .papyrus-topbar select,
 .papyrus-sidebar-left select,
 .papyrus-sidebar-right select {
-  background: var(--papyrus-surface);
-  border: 1px solid var(--papyrus-border);
+  background: var(--papyrus-surface-resolved);
+  border: 1px solid var(--papyrus-border-resolved);
   border-radius: 6px;
   box-sizing: border-box;
-  color: var(--papyrus-text);
+  color: var(--papyrus-text-resolved);
   font: inherit;
   padding: 6px 8px;
 }
@@ -131,8 +199,8 @@
 .papyrus-topbar button:hover,
 .papyrus-sidebar-left button:hover,
 .papyrus-sidebar-right button:hover {
-  background: var(--papyrus-hover);
-  border-color: var(--papyrus-border-strong);
+  background: var(--papyrus-hover-resolved);
+  border-color: var(--papyrus-border-strong-resolved);
 }
 
 .papyrus-topbar svg,
@@ -147,7 +215,7 @@
 .papyrus-topbar select:focus,
 .papyrus-sidebar-left select:focus,
 .papyrus-sidebar-right select:focus {
-  outline: 2px solid var(--papyrus-focus);
+  outline: 2px solid var(--papyrus-focus-resolved);
   outline-offset: 1px;
 }
 
@@ -163,7 +231,7 @@
 }
 
 .papyrus-viewer .textLayer ::selection {
-  background: var(--papyrus-selection-bg);
+  background: var(--papyrus-selection-bg-resolved);
 }
 
 .papyrus-viewer .textLayer {

package/dist/index.d.mts

@@ -6,6 +6,7 @@ interface TopbarProps {
     showBrand?: boolean;
     brand?: React.ReactNode;
     title?: React.ReactNode;
+    style?: React.CSSProperties;
     showSidebarLeftToggle?: boolean;
     showPageControls?: boolean;
     showZoomControls?: boolean;
@@ -18,16 +19,19 @@ declare const Topbar: React.FC<TopbarProps>;
 
 interface SidebarLeftProps {
     engine: DocumentEngine;
+    style?: React.CSSProperties;
 }
 declare const SidebarLeft: React.FC<SidebarLeftProps>;
 
 interface SidebarRightProps {
     engine: DocumentEngine;
+    style?: React.CSSProperties;
 }
 declare const SidebarRight: React.FC<SidebarRightProps>;
 
 interface ViewerProps {
     engine: DocumentEngine;
+    style?: React.CSSProperties;
 }
 declare const Viewer: React.FC<ViewerProps>;
 

package/dist/index.d.ts

@@ -6,6 +6,7 @@ interface TopbarProps {
     showBrand?: boolean;
     brand?: React.ReactNode;
     title?: React.ReactNode;
+    style?: React.CSSProperties;
     showSidebarLeftToggle?: boolean;
     showPageControls?: boolean;
     showZoomControls?: boolean;
@@ -18,16 +19,19 @@ declare const Topbar: React.FC<TopbarProps>;
 
 interface SidebarLeftProps {
     engine: DocumentEngine;
+    style?: React.CSSProperties;
 }
 declare const SidebarLeft: React.FC<SidebarLeftProps>;
 
 interface SidebarRightProps {
     engine: DocumentEngine;
+    style?: React.CSSProperties;
 }
 declare const SidebarRight: React.FC<SidebarRightProps>;
 
 interface ViewerProps {
     engine: DocumentEngine;
+    style?: React.CSSProperties;
 }
 declare const Viewer: React.FC<ViewerProps>;
 

package/dist/index.js

@@ -37,6 +37,7 @@ var Topbar = ({
   showBrand = false,
   brand,
   title,
+  style,
   showSidebarLeftToggle = true,
   showPageControls = true,
   showZoomControls = true,
@@ -383,6 +384,7 @@ var Topbar = ({
     {
       "data-papyrus-theme": uiTheme,
       className: `papyrus-topbar papyrus-theme relative h-14 border-b flex items-center px-3 sm:px-4 z-50 transition-colors duration-200 ${isDark ? "bg-[#1a1a1a] border-[#333] text-white" : "bg-white border-gray-200 text-gray-800"}`,
+      style,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2 min-w-0 z-10", children: [
           showSidebarLeftToggle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -915,7 +917,7 @@ var OutlineNode = ({ item, engine, isDark, accentColor, depth = 0 }) => {
     )) })
   ] });
 };
-var SidebarLeft = ({ engine }) => {
+var SidebarLeft = ({ engine, style }) => {
   const {
     pageCount,
     currentPage,
@@ -937,6 +939,7 @@ var SidebarLeft = ({ engine }) => {
     {
       "data-papyrus-theme": uiTheme,
       className: `papyrus-sidebar-left papyrus-theme absolute left-0 top-0 bottom-0 z-[120] w-[85vw] max-w-72 border-r flex flex-col h-full overflow-hidden transition-colors duration-200 ${isDark ? "bg-[#2a2a2a] border-[#3a3a3a]" : "bg-[#fcfcfc] border-gray-200"}`,
+      style,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
           "div",
@@ -1077,7 +1080,7 @@ var withAlpha2 = (hex, alpha) => {
   const b = parseInt(value.slice(4, 6), 16);
   return `rgba(${r}, ${g}, ${b}, ${alpha})`;
 };
-var SidebarRight = ({ engine }) => {
+var SidebarRight = ({ engine, style }) => {
   const {
     sidebarRightOpen,
     sidebarRightTab,
@@ -1114,6 +1117,7 @@ var SidebarRight = ({ engine }) => {
     {
       "data-papyrus-theme": uiTheme,
       className: `papyrus-sidebar-right papyrus-theme absolute right-0 top-0 bottom-0 z-[120] w-[88vw] max-w-80 border-l flex flex-col h-full transition-colors duration-200 shadow-2xl ${isDark ? "bg-[#1a1a1a] border-[#333]" : "bg-white border-gray-200"}`,
+      style,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
           "div",
@@ -2106,7 +2110,7 @@ var MIN_ZOOM = 0.2;
 var MAX_ZOOM = 5;
 var WIDTH_SNAP_PX = 4;
 var WIDTH_HYSTERESIS_PX = 6;
-var Viewer = ({ engine }) => {
+var Viewer = ({ engine, style }) => {
   const {
     pageCount,
     currentPage,
@@ -2449,6 +2453,7 @@ var Viewer = ({ engine }) => {
       onTouchEnd: handleTouchEnd,
       onTouchCancel: handleTouchEnd,
       className: `papyrus-viewer papyrus-theme min-w-0 w-full flex-1 overflow-y-scroll overflow-x-hidden flex flex-col items-center ${paddingY} relative custom-scrollbar scroll-smooth ${isDark ? "bg-[#121212]" : "bg-[#e9ecef]"}`,
+      style,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex flex-col items-center gap-6 w-full min-w-0", children: pages.map((idx) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "div",