@zerohive/hive-viewer 0.2.6 → 0.2.7

package/dist/index.mjs

@@ -840,49 +840,46 @@ function Toolbar(props) {
       role: "toolbar",
       "aria-label": t("a11y.toolbar", "Document toolbar"),
       children: [
-        /* @__PURE__ */ jsxs8("div", { className: "hv-toolbar__left space-x-1", children: [
+        /* @__PURE__ */ jsxs8("div", { className: "hv-toolbar__group", children: [
           /* @__PURE__ */ jsx8(
             "button",
             {
-              type: "button",
-              className: "hv-btn text-sm",
+              className: `hv-btn ${props.showThumbnails ? "hv-btn--active" : ""}`,
               onClick: props.onToggleThumbnails,
               "aria-pressed": props.showThumbnails,
-              children: t("toolbar.thumbs", "Thumbnails")
+              children: "Thumbnails"
             }
           ),
           props.mode !== "create" && /* @__PURE__ */ jsx8(
             "button",
             {
-              type: "button",
-              className: "hv-btn text-sm",
+              className: `hv-btn ${props.showSignatures ? "hv-btn--active" : ""}`,
               onClick: props.onToggleSignatures,
               "aria-pressed": props.showSignatures,
-              children: t("toolbar.signatures", "Signatures")
+              children: "Signatures"
             }
-          ),
-          /* @__PURE__ */ jsx8("span", { className: "hv-sep" }),
+          )
+        ] }),
+        /* @__PURE__ */ jsxs8("div", { className: "hv-toolbar__group hv-segment", children: [
           /* @__PURE__ */ jsx8(
             "button",
             {
-              type: "button",
-              className: props.layout === "single" ? "hv-btn hv-btn--active text-sm" : "hv-btn text-sm",
+              className: `hv-btn ${props.layout === "single" ? "hv-btn--active" : ""}`,
               onClick: () => props.onChangeLayout("single"),
-              children: t("toolbar.layout.single", "Single")
+              children: "Single page"
             }
           ),
           /* @__PURE__ */ jsx8(
             "button",
             {
-              type: "button",
-              className: props.layout === "side-by-side" ? "hv-btn hv-btn--active text-sm" : "hv-btn text-sm",
+              className: `hv-btn ${props.layout === "side-by-side" ? "hv-btn--active" : ""}`,
               onClick: () => props.onChangeLayout("side-by-side"),
-              children: t("toolbar.layout.two", "Two")
+              children: "Side-by-side"
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs8("div", { className: "hv-toolbar__right", children: [
-          props.showHeaderFooterToggle && /* @__PURE__ */ jsxs8("label", { className: "hv-toggle", children: [
+        /* @__PURE__ */ jsxs8("div", { className: "hv-toolbar__group hv-toolbar__actions", children: [
+          props.showHeaderFooterToggle && /* @__PURE__ */ jsxs8("label", { className: "hv-switch", children: [
             /* @__PURE__ */ jsx8(
               "input",
               {
@@ -891,36 +888,20 @@ function Toolbar(props) {
                 onChange: props.onToggleHeaderFooter
               }
             ),
-            /* @__PURE__ */ jsx8("span", { children: t("toolbar.letterhead", "Letterhead") })
+            /* @__PURE__ */ jsx8("span", { className: "hv-switch__slider" }),
+            /* @__PURE__ */ jsx8("span", { className: "hv-switch__label", children: t("toolbar.letterhead", "Letterhead") })
           ] }),
           props.allowSigning && /* @__PURE__ */ jsx8(
             "button",
             {
-              type: "button",
-              className: "hv-btn hv-btn--primary text-sm",
+              className: "hv-btn hv-btn--primary",
               onClick: props.onSign,
               disabled: props.signingDisabled,
-              children: t("toolbar.sign", "Sign Document")
-            }
-          ),
-          props.canExportPdf && /* @__PURE__ */ jsx8(
-            "button",
-            {
-              type: "button",
-              className: "hv-btn text-sm",
-              onClick: props.onExportPdf,
-              children: t("toolbar.exportPdf", "Export as PDF")
+              children: "Sign document"
             }
           ),
-          props.canSave && /* @__PURE__ */ jsx8(
-            "button",
-            {
-              type: "button",
-              className: "hv-btn hv-btn--primary text-sm",
-              onClick: props.onSave,
-              children: t("toolbar.save", "Save")
-            }
-          )
+          props.canExportPdf && /* @__PURE__ */ jsx8("button", { className: "hv-btn", onClick: props.onExportPdf, children: "Export PDF" }),
+          props.canSave && /* @__PURE__ */ jsx8("button", { className: "hv-btn hv-btn--primary", onClick: props.onSave, children: "Save" })
         ] })
       ]
     }

package/dist/styles.css

@@ -492,7 +492,8 @@
 	display: flex;
 	gap: 8px;
 	padding: 8px 12px;
-	background: #ffffff;
+	justify-content: space-around;
+	align-items: start;
 	border-bottom: 1px solid #e5e7eb;
 }
 
@@ -540,4 +541,137 @@
 
 .hv-editor.ro {
 	cursor: default;
+}
+
+/* === Toolbar container === */
+.hv-toolbar {
+	position: sticky;
+	top: 0;
+	z-index: 40;
+
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 12px;
+
+	padding: 10px 14px;
+	background: #ffffff;
+	border-bottom: 1px solid #e5e7eb;
+	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+}
+
+/* === Groups === */
+.hv-toolbar__group {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+}
+
+.hv-toolbar__actions {
+	gap: 8px;
+}
+
+/* === Buttons === */
+.hv-btn {
+	appearance: none;
+	border: 1px solid #d1d5db;
+	background: #fff;
+	color: #111827;
+
+	font-size: 13px;
+	font-weight: 500;
+	padding: 6px 12px;
+	border-radius: 8px;
+
+	cursor: pointer;
+	transition: all 0.15s ease;
+}
+
+.hv-btn:hover {
+	background: #f9fafb;
+}
+
+.hv-btn:disabled {
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+
+.hv-btn--active {
+	background: #eef2ff;
+	border-color: #6366f1;
+	color: #4338ca;
+}
+
+.hv-btn--primary {
+	background: #4f46e5;
+	border-color: #4f46e5;
+	color: white;
+}
+
+.hv-btn--primary:hover {
+	background: #4338ca;
+}
+
+/* === Segmented layout control === */
+.hv-segment {
+	background: #f3f4f6;
+	padding: 4px;
+	border-radius: 10px;
+}
+
+.hv-segment .hv-btn {
+	border: none;
+	background: transparent;
+}
+
+.hv-segment .hv-btn--active {
+	background: white;
+	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+}
+
+/* === Switch === */
+.hv-switch {
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+	cursor: pointer;
+	user-select: none;
+	font-size: 13px;
+}
+
+.hv-switch input {
+	display: none;
+}
+
+.hv-switch__slider {
+	width: 34px;
+	height: 18px;
+	background: #d1d5db;
+	border-radius: 999px;
+	position: relative;
+	transition: background 0.2s ease;
+}
+
+.hv-switch__slider::after {
+	content: "";
+	position: absolute;
+	top: 2px;
+	left: 2px;
+	width: 14px;
+	height: 14px;
+	background: white;
+	border-radius: 50%;
+	transition: transform 0.2s ease;
+}
+
+.hv-switch input:checked+.hv-switch__slider {
+	background: #4f46e5;
+}
+
+.hv-switch input:checked+.hv-switch__slider::after {
+	transform: translateX(16px);
+}
+
+.hv-switch__label {
+	color: #374151;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zerohive/hive-viewer",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",