@open-press/core 0.3.0

package/src/openpress/workbenchPanels.tsx

@@ -0,0 +1,122 @@
+import { type CSSProperties, type MouseEvent as ReactMouseEvent } from "react";
+import type { BookmarkItem } from "./indexes";
+
+type BookmarkSelectOptions = {
+  behavior?: ScrollBehavior;
+};
+
+export function Bookmarks({
+  items,
+  currentPageIndex,
+  onSelectPage,
+}: {
+  items: BookmarkItem[];
+  currentPageIndex: number;
+  onSelectPage: (pageIndex: number, options?: BookmarkSelectOptions) => void;
+}) {
+  const goToPage = (event: ReactMouseEvent<HTMLButtonElement>, pageIndex: number) => {
+    event.preventDefault();
+    onSelectPage(pageIndex, { behavior: "smooth" });
+  };
+
+  if (items.length === 0) {
+    return <p className="openpress-asset-empty">尚無書籤</p>;
+  }
+
+  return (
+    <>
+      {items.map((item, index) => {
+        const groupActive = currentPageIndex >= item.pageIndex && currentPageIndex <= item.endPageIndex;
+        const activeSub = item.subs.find((sub) => currentPageIndex >= sub.pageIndex && currentPageIndex <= sub.endPageIndex);
+        const h2SelfActive = groupActive && !activeSub;
+        const itemLabel = item.label ?? String(index + 1).padStart(2, "0");
+        return (
+          <div className={`bookmark-group${groupActive ? " is-open" : ""}`} key={item.id}>
+            <button
+              type="button"
+              className={`bookmark-item bookmark-h2${h2SelfActive ? " is-active" : ""}`}
+              data-openpress-page-index={item.pageIndex}
+              onClick={(event) => goToPage(event, item.pageIndex)}
+            >
+              <span className="bookmark-index">{itemLabel}</span>
+              <span className="bookmark-title">{item.title}</span>
+            </button>
+            <div className="bookmark-subs">
+              {item.subs.map((sub, subIndex) => {
+                const subActive = currentPageIndex >= sub.pageIndex && currentPageIndex <= sub.endPageIndex;
+                const activeTopic = sub.subs.find((topic) => currentPageIndex >= topic.pageIndex && currentPageIndex <= topic.endPageIndex);
+                const subSelfActive = subActive && !activeTopic;
+                const subLabel = sub.label ?? `${itemLabel}.${subIndex + 1}`;
+                return (
+                  <div className="bookmark-subgroup" key={sub.id}>
+                    <button
+                      type="button"
+                      className={`bookmark-item bookmark-h3${subSelfActive ? " is-active" : ""}`}
+                      data-openpress-page-index={sub.pageIndex}
+                      onClick={(event) => goToPage(event, sub.pageIndex)}
+                    >
+                      <span className="bookmark-index">{subLabel}</span>
+                      <span className="bookmark-title">{sub.title}</span>
+                    </button>
+                    {sub.subs.map((topic, topicIndex) => {
+                      const topicActive = currentPageIndex >= topic.pageIndex && currentPageIndex <= topic.endPageIndex;
+                      const topicLabel = topic.label ?? `${subLabel}.${topicIndex + 1}`;
+                      return (
+                        <button
+                          type="button"
+                          className={`bookmark-item bookmark-h4${topicActive ? " is-active" : ""}`}
+                          data-openpress-page-index={topic.pageIndex}
+                          onClick={(event) => goToPage(event, topic.pageIndex)}
+                          key={topic.id}
+                        >
+                          <span className="bookmark-index">{topicLabel}</span>
+                          <span className="bookmark-title">{topic.title}</span>
+                        </button>
+                      );
+                    })}
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        );
+      })}
+    </>
+  );
+}
+
+export function CurrentPagePanel({
+  currentPageLabel,
+  totalPageLabel,
+  progressPercent,
+  title,
+  pageLabelPrefix,
+  showHeading = true,
+  showTitle = true,
+}: {
+  currentPageLabel: string;
+  totalPageLabel: string;
+  progressPercent: number;
+  title: string;
+  pageLabelPrefix?: string;
+  showHeading?: boolean;
+  showTitle?: boolean;
+}) {
+  return (
+    <section className="openpress-panel-section openpress-panel-section--current" aria-label="目前頁面">
+      {showHeading ? <div className="openpress-panel-heading">目前頁面</div> : null}
+      <div className="openpress-current-page-card">
+        <div className="openpress-current-page-card__number" aria-label="目前頁數">
+          {pageLabelPrefix ? <span className="openpress-current-page-card__prefix">{pageLabelPrefix}</span> : null}
+          <span data-openpress-current-page>{currentPageLabel}</span>
+          <span className="sep">/</span>
+          <span data-openpress-total-pages>{totalPageLabel}</span>
+        </div>
+        {showTitle ? <div className="openpress-current-page-card__title">{title}</div> : null}
+        <div className="openpress-current-page-card__progress" aria-hidden="true">
+          <span style={{ "--progress": `${progressPercent}%` } as CSSProperties} />
+        </div>
+      </div>
+    </section>
+  );
+}

package/src/openpress/workbenchTypes.ts

@@ -0,0 +1,4 @@
+import type { IndexedHtmlPage } from "./indexes";
+import type { HtmlPageBlock } from "./types";
+
+export type DisplayPage = IndexedHtmlPage & Pick<HtmlPageBlock, "source">;

package/src/styles/openpress/app-shell.css

@@ -0,0 +1,251 @@
+:root {
+  --openpress-scrollbar-track: #141414;
+  --openpress-scrollbar-track-sidebar: #171717;
+  --openpress-scrollbar-thumb: rgb(255 255 255 / 18%);
+  --openpress-scrollbar-thumb-hover: rgb(255 255 255 / 28%);
+
+  color-scheme: dark;
+  color: var(--openpress-text);
+  background: #141414;
+  font-family: var(--openpress-font-family);
+  scrollbar-color: var(--openpress-scrollbar-thumb) var(--openpress-scrollbar-track);
+  scrollbar-width: thin;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+*::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+  border: 3px solid transparent;
+  border-radius: 999px;
+  background-color: var(--openpress-scrollbar-thumb);
+  background-clip: content-box;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background-color: var(--openpress-scrollbar-thumb-hover);
+}
+
+*::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+body {
+  margin: 0;
+  overflow-x: hidden;
+  scrollbar-color: var(--openpress-scrollbar-thumb) var(--openpress-scrollbar-track);
+  scrollbar-width: thin;
+}
+
+/* ── Full-page loading screen ───────────────────────────────── */
+.openpress-loading-screen {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #141414;
+}
+
+.openpress-loading-screen__inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+}
+
+.openpress-loading-screen__label {
+  color: rgb(200 200 200 / 40%);
+  font-size: 12px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.openpress-loading-dots {
+  display: flex;
+  gap: 8px;
+}
+
+.openpress-loading-dots span {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--openpress-accent, #e5c97a);
+  animation: openpress-dot-pulse 1.2s ease-in-out infinite;
+}
+
+.openpress-loading-dots span:nth-child(2) { animation-delay: 0.2s; }
+.openpress-loading-dots span:nth-child(3) { animation-delay: 0.4s; }
+
+@keyframes openpress-dot-pulse {
+  0%, 80%, 100% { opacity: 0.15; transform: scale(0.8); }
+  40%           { opacity: 1;    transform: scale(1); }
+}
+
+.openpress-load-state {
+  position: fixed;
+  top: 16px;
+  left: 50%;
+  z-index: 20;
+  transform: translateX(-50%);
+  border: 1px solid rgb(255 255 255 / 14%);
+  padding: 8px 12px;
+  background: rgb(20 20 20 / 86%);
+  color: #d8dadd;
+  font-size: 13px;
+}
+
+/* ── Action Overlay（部署）──────────────────────────────────── */
+.openpress-action-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 200;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgb(10 10 10 / 72%);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  animation: openpress-overlay-in 0.18s ease both;
+}
+
+@keyframes openpress-overlay-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+.openpress-action-overlay__card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  border: 1px solid rgb(255 255 255 / 12%);
+  border-radius: 16px;
+  padding: 36px 48px;
+  background: rgb(22 22 22 / 96%);
+  box-shadow: 0 24px 64px rgb(0 0 0 / 60%);
+  text-align: center;
+  min-width: 220px;
+}
+
+.openpress-action-overlay__title {
+  margin: 0;
+  color: #f2f2f0;
+  font-size: 15px;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+}
+
+.openpress-action-overlay__sub {
+  margin: 0;
+  color: rgb(200 200 200 / 60%);
+  font-size: 12px;
+}
+
+/* ── Deploy Icon ─────────────────────────────────────────────── */
+.openpress-deploy-icon {
+  position: relative;
+  width: 80px;
+  height: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.openpress-deploy-icon--deploying { color: var(--openpress-accent, #e5c97a); }
+.openpress-deploy-icon--deployed  { color: #6ee7a0; }
+.openpress-deploy-icon--failed    { color: #f87171; }
+
+.openpress-deploy-rocket {
+  animation: openpress-rocket-fly 1.4s ease-in-out infinite alternate;
+}
+
+@keyframes openpress-rocket-fly {
+  from { transform: translateY(4px) rotate(-6deg); }
+  to   { transform: translateY(-6px) rotate(6deg); }
+}
+
+.openpress-deploy-orbit {
+  position: absolute;
+  inset: 0;
+  width: 80px;
+  height: 80px;
+  animation: openpress-orbit-spin 2.4s linear infinite;
+}
+
+@keyframes openpress-orbit-spin {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
+}
+
+/* ── Empty document state ───────────────────────────────────── */
+
+.openpress-empty-state {
+  display: grid;
+  place-items: center;
+  min-height: 100vh;
+  padding: 48px 24px;
+}
+
+.openpress-empty-state__panel {
+  max-width: 560px;
+  border: 1px solid var(--openpress-scrollbar-thumb);
+  border-radius: 8px;
+  padding: 36px 32px;
+  background: rgb(255 255 255 / 3%);
+  color: var(--openpress-text-on-dark, #f4f4f4);
+}
+
+.openpress-empty-state__eyebrow {
+  margin: 0 0 8px;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--openpress-text-secondary, #c6c6c6);
+}
+
+.openpress-empty-state__title {
+  margin: 0 0 16px;
+  font-size: 22px;
+  font-weight: 500;
+  line-height: 1.4;
+}
+
+.openpress-empty-state__body {
+  margin: 0 0 16px;
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--openpress-text-secondary, #c6c6c6);
+}
+
+.openpress-empty-state__body code,
+.openpress-empty-state__steps code {
+  padding: 1px 6px;
+  border-radius: 4px;
+  background: rgb(255 255 255 / 8%);
+  font-family: var(--openpress-font-mono, "SFMono-Regular", "Menlo", monospace);
+  font-size: 13px;
+}
+
+.openpress-empty-state__steps {
+  margin: 0;
+  padding-left: 1.2em;
+  font-size: 14px;
+  line-height: 1.7;
+  color: var(--openpress-text-secondary, #c6c6c6);
+}
+
+.openpress-empty-state__steps li {
+  margin-bottom: 4px;
+}

package/src/styles/openpress/media-workspace.css

@@ -0,0 +1,230 @@
+.openpress-media-assets {
+  display: grid;
+  grid-template-rows: auto minmax(120px, 1fr) auto auto auto;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.openpress-media-workspace-page {
+  position: absolute;
+  inset: 0;
+  z-index: 8;
+  padding: 28px clamp(24px, 4vw, 48px) 40px;
+  background: #141414;
+  color: #dfe1dd;
+  overflow: auto;
+}
+
+.openpress-media-workspace-header {
+  display: flex;
+  gap: 18px;
+  align-items: start;
+  justify-content: space-between;
+  border-bottom: 1px solid rgb(255 255 255 / 9%);
+  padding-bottom: 18px;
+}
+
+.openpress-media-workspace-header .openpress-panel-heading {
+  padding: 0 0 8px;
+}
+
+.openpress-media-workspace-header h2 {
+  margin: 0;
+  color: #f2f2f0;
+  font-size: 22px;
+  font-weight: 500;
+  line-height: 1.2;
+}
+
+.openpress-media-workspace-header p {
+  margin: 8px 0 0;
+  color: #858c93;
+  font-size: 12px;
+}
+
+.openpress-media-workspace-back {
+  flex: 0 0 auto;
+}
+
+.openpress-media-asset-list {
+  display: grid;
+  min-height: 0;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 10px;
+  overflow: auto;
+  padding: 18px 0;
+  scrollbar-width: none;
+}
+
+.openpress-media-asset-list::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  display: none;
+}
+
+.openpress-media-asset {
+  display: grid;
+  grid-template-columns: 54px minmax(0, 1fr);
+  gap: 12px;
+  align-items: center;
+  min-height: 66px;
+  border: 1px solid rgb(255 255 255 / 9%);
+  padding: 10px;
+  background: rgb(255 255 255 / 3%);
+  color: #a2a8ae;
+  text-decoration: none;
+  transition:
+    border-color 160ms ease,
+    background 160ms ease,
+    color 160ms ease;
+}
+
+.openpress-media-asset:hover {
+  border-color: rgb(255 255 255 / 18%);
+  background: rgb(255 255 255 / 6%);
+  color: #f3f3ef;
+}
+
+.openpress-media-asset__thumb {
+  display: grid;
+  width: 54px;
+  height: 54px;
+  place-items: center;
+  overflow: hidden;
+  border: 1px solid rgb(255 255 255 / 10%);
+  background: #101010;
+}
+
+.openpress-media-asset__thumb img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.openpress-media-asset--svg .openpress-media-asset__thumb img {
+  object-fit: contain;
+  padding: 5px;
+  background: #f4f4f0;
+}
+
+.openpress-media-asset__meta {
+  min-width: 0;
+}
+
+.openpress-media-asset__meta strong {
+  display: block;
+  overflow: hidden;
+  color: #e2e4e1;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.2;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.openpress-media-asset__meta small {
+  display: block;
+  overflow: hidden;
+  margin-top: 4px;
+  color: #6b7178;
+  font-size: 10px;
+  line-height: 1.2;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.openpress-media-dropzone {
+  display: grid;
+  gap: 7px;
+  margin: 0 0 14px;
+  border: 1px dashed rgb(255 255 255 / 18%);
+  padding: 12px;
+  background: rgb(255 255 255 / 2%);
+  color: #7f868d;
+  font-size: 11px;
+  line-height: 1.45;
+  transition:
+    border-color 160ms ease,
+    background 160ms ease,
+    color 160ms ease;
+}
+
+.openpress-media-dropzone[data-drag-active="true"] {
+  border-color: rgb(223 75 33 / 70%);
+  background: rgb(223 75 33 / 9%);
+  color: #ece7df;
+}
+
+.openpress-media-dropzone__action,
+.openpress-staged-asset button {
+  width: fit-content;
+  border: 1px solid rgb(255 255 255 / 14%);
+  padding: 6px 9px;
+  background: rgb(255 255 255 / 4%);
+  color: #ececea;
+  font: inherit;
+  font-size: 11px;
+  cursor: pointer;
+}
+
+.openpress-media-dropzone__action:hover,
+.openpress-staged-asset button:hover {
+  border-color: rgb(255 255 255 / 24%);
+  background: rgb(255 255 255 / 8%);
+}
+
+.openpress-staged-assets {
+  display: grid;
+  max-height: 180px;
+  gap: 8px;
+  overflow: auto;
+  padding: 0 0 12px;
+  scrollbar-width: none;
+}
+
+.openpress-staged-asset {
+  display: grid;
+  grid-template-columns: 34px minmax(0, 1fr) auto;
+  gap: 9px;
+  align-items: center;
+}
+
+.openpress-staged-asset img {
+  width: 34px;
+  height: 34px;
+  object-fit: cover;
+  border: 1px solid rgb(255 255 255 / 10%);
+  background: #111;
+}
+
+.openpress-staged-asset span {
+  min-width: 0;
+}
+
+.openpress-staged-asset strong,
+.openpress-staged-asset small {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.openpress-staged-asset strong {
+  color: #dedfdd;
+  font-size: 11px;
+  font-weight: 500;
+}
+
+.openpress-staged-asset small {
+  margin-top: 3px;
+  color: #70767d;
+  font-size: 10px;
+}
+
+body::-webkit-scrollbar,
+html::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  display: none;
+}