@akairos/myno 0.3.0 → 0.3.2

package/dist/styles/article.css

@@ -0,0 +1,646 @@
+/*
+ * @akairos/myno — article typography
+ *
+ * Consumers:
+ *   - zzhub-pipeline wechat-export (Juice inlines these rules)
+ *   - myno editor and Studio (live editor preview)
+ *
+ * Selectors stay on `.milkdown .editor` so both hosts share the same cascade.
+ * Prefer semantic tags; `data-wechat-node` hooks are export-only and safe to
+ * leave in place when the host never sets them.
+ *
+ * Theme tokens: tokens-default.css (live hosts); pipeline export also injects
+ * via themes.ts / buildWechatThemeCss.
+ */
+
+.milkdown .editor {
+  max-width: 100%;
+  margin: 0;
+  padding: 8px 4px 28px;
+  background: #ffffff;
+  box-sizing: border-box;
+  color: var(--wx-body-color);
+  font-family: var(--wx-font-family);
+  font-size: 16px;
+  font-weight: 400;
+  line-height: var(--wx-body-line-height);
+  letter-spacing: var(--wx-body-letter-spacing);
+  overflow-wrap: break-word;
+  word-break: break-word;
+  -webkit-text-size-adjust: 100%;
+}
+
+.milkdown .editor p {
+  margin: 0 0 1.18em;
+  color: var(--wx-body-color);
+  font-family: var(--wx-font-family);
+  font-size: 16px;
+  line-height: var(--wx-body-line-height);
+  letter-spacing: var(--wx-body-letter-spacing);
+  text-align: justify;
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
+
+/*
+ * Heading hierarchy (WeChat-safe):
+ * - Primary levers: asymmetric margin (far above / near below) + chroma steps.
+ * - Keep font-weight at 700 (600 often snaps to 700 on Android CJK faces).
+ * - Adjacent rules (h2+p, h2+h3) are evaluated at export by Juice and baked into
+ *   inline styles; WeChat runtime never re-runs selectors.
+ */
+.milkdown .editor h1,
+.milkdown .editor h2,
+.milkdown .editor h3,
+.milkdown .editor h4,
+.milkdown .editor h5,
+.milkdown .editor h6 {
+  font-family: var(--wx-font-family);
+  font-weight: 700;
+  text-align: left;
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
+
+.milkdown .editor h1 {
+  margin: 2.45em 0 0.85em;
+  color: var(--wx-h2-color, var(--wx-body-color));
+  font-size: 26px;
+  line-height: 1.38;
+  letter-spacing: -0.01em;
+}
+
+/* H2 = major section break: more air above, stick to following copy */
+.milkdown .editor h2 {
+  margin: 2.7em 0 0.7em;
+  padding-left: 0;
+  padding-bottom: 0;
+  border-left: 0;
+  border-bottom: none;
+  color: var(--wx-h2-color, #1f1b1c);
+  font-size: 20px;
+  line-height: 1.38;
+  letter-spacing: 0.005em;
+  text-decoration: none;
+}
+
+/* H3 = in-section label: near body size, mid chroma, less top air */
+.milkdown .editor h3 {
+  margin: 1.55em 0 0.4em;
+  padding-bottom: 0;
+  border-bottom: none;
+  color: var(--wx-h3-color, #5c5658);
+  font-size: 16px;
+  line-height: 1.48;
+  letter-spacing: 0.02em;
+  text-decoration: none;
+}
+
+.milkdown .editor h4,
+.milkdown .editor h5,
+.milkdown .editor h6 {
+  margin: 1.45em 0 0.45em;
+  color: var(--wx-h3-color, #5c5658);
+  font-size: 16px;
+  line-height: 1.55;
+  letter-spacing: 0.02em;
+}
+
+/* Opening heading should not dump a large white gap under chrome */
+.milkdown .editor > h1:first-child,
+.milkdown .editor > h2:first-child,
+.milkdown .editor > h3:first-child,
+.milkdown .editor > h4:first-child {
+  margin-top: 0.25em;
+}
+
+/* Title sticks to following paragraph (Juice bakes margin-top onto that p) */
+.milkdown .editor h1 + p,
+.milkdown .editor h2 + p,
+.milkdown .editor h3 + p,
+.milkdown .editor h4 + p {
+  margin-top: 0;
+}
+
+/* Avoid stacked air when a subsection title follows a section title */
+.milkdown .editor h2 + h3,
+.milkdown .editor h2 + h4,
+.milkdown .editor h3 + h4 {
+  margin-top: 1.1em;
+}
+
+.milkdown .editor strong,
+.milkdown .editor b {
+  color: var(--wx-body-color);
+  font-weight: 700;
+}
+
+.milkdown .editor em,
+.milkdown .editor i {
+  color: var(--wx-body-color);
+  font-style: italic;
+}
+
+.milkdown .editor s,
+.milkdown .editor del {
+  color: var(--wx-muted-color);
+  text-decoration: line-through;
+  text-decoration-color: var(--wx-muted-color);
+}
+
+.milkdown .editor a,
+.milkdown .editor [data-wechat-node="external-link"] {
+  border-bottom: 1px solid var(--wx-brand-accent);
+  color: var(--wx-brand-ink);
+  text-decoration: none;
+}
+
+.milkdown .editor [data-wechat-node="link-marker"] {
+  margin-left: 2px;
+  color: var(--wx-brand-ink);
+  font-size: 11px;
+  line-height: 1;
+  vertical-align: super;
+}
+
+/* Live editor uses bare <code>; export marks nodes with data-wechat-node. */
+.milkdown .editor code:not(pre code),
+.milkdown .editor [data-wechat-node="inline-code"] {
+  margin: 0 2px;
+  padding: 2px 5px;
+  border: 1px solid #ded9db;
+  border-radius: 4px;
+  background-color: #f7f5f6;
+  color: #4d484a;
+  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
+  font-size: 14px;
+  line-height: 1.55;
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
+
+.milkdown .editor [data-wechat-node="code-block"] {
+  margin: 1.55em 0;
+  border: 1px solid var(--wx-divider-color);
+  border-radius: 7px;
+  background-color: var(--wx-soft-surface);
+  overflow: hidden;
+}
+
+.milkdown .editor [data-wechat-node="code-language"] {
+  margin: 0;
+  padding: 7px 13px 6px;
+  border-bottom: 1px solid var(--wx-divider-color);
+  color: var(--wx-muted-color);
+  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1.4;
+  letter-spacing: 0.08em;
+  text-align: left;
+}
+
+/* Export wraps <pre> in [data-wechat-node="code-block"] (outer chrome).
+ * Live editors only have bare <pre> — give them the same chrome. */
+.milkdown .editor pre {
+  margin: 1.55em 0;
+  padding: 15px 14px 16px;
+  border: 1px solid var(--wx-divider-color);
+  border-radius: 7px;
+  background-color: var(--wx-soft-surface);
+  color: var(--wx-body-color);
+  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
+  font-size: 13px;
+  line-height: 1.72;
+  overflow-x: auto;
+  white-space: pre;
+  word-break: normal;
+}
+
+.milkdown .editor [data-wechat-node="code-block"] pre {
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+}
+
+.milkdown .editor pre code {
+  display: block;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--wx-body-color);
+  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
+  font-size: 13px;
+  line-height: 1.72;
+  overflow-wrap: normal;
+  white-space: pre;
+  word-break: normal;
+}
+
+.milkdown .editor figure,
+.milkdown .editor [data-wechat-node="image-block"] {
+  margin: 1.65em 0 1.8em;
+  text-align: center;
+}
+
+.milkdown .editor img {
+  display: block;
+  width: auto;
+  max-width: 100%;
+  height: auto;
+  margin: 0 auto;
+  border-radius: 4px;
+  box-sizing: border-box;
+}
+
+.milkdown .editor figcaption,
+.milkdown .editor [data-wechat-node="image-caption"] {
+  margin: 9px 0 0;
+  color: var(--wx-muted-color);
+  font-family: var(--wx-font-family);
+  font-size: 13px;
+  line-height: 1.62;
+  letter-spacing: 0.015em;
+  text-align: center;
+}
+
+.milkdown .editor blockquote {
+  margin: 1.48em 0;
+  padding: 0.82em 1em 0.82em 1.08em;
+  border-left: 3px solid var(--wx-blockquote-border, var(--wx-brand-accent));
+  border-radius: 0 5px 5px 0;
+  background-color: #fbfafb;
+  color: var(--wx-muted-color);
+}
+
+.milkdown .editor blockquote p {
+  margin: 0.35em 0;
+  color: var(--wx-muted-color);
+  font-size: 15px;
+  line-height: 1.78;
+  text-align: left;
+}
+
+.milkdown .editor ul,
+.milkdown .editor ol {
+  margin: 1.05em 0 1.3em;
+  padding-left: 1.55em;
+  color: var(--wx-body-color);
+  list-style-position: outside;
+}
+
+.milkdown .editor ul {
+  list-style-type: disc;
+}
+
+.milkdown .editor ol {
+  list-style-type: decimal;
+}
+
+.milkdown .editor li {
+  margin: 0.42em 0;
+  padding-left: 0.12em;
+  color: var(--wx-body-color);
+  font-size: 16px;
+  line-height: 1.78;
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
+
+.milkdown .editor li p {
+  margin: 0.18em 0;
+  line-height: 1.78;
+  text-align: left;
+}
+
+.milkdown .editor [data-wechat-node="task-list-item"] {
+  list-style: none;
+}
+
+.milkdown .editor [data-wechat-node="task-marker"] {
+  display: inline-block;
+  min-width: 1.35em;
+  color: var(--wx-brand-ink);
+  font-weight: 700;
+}
+
+.milkdown .editor table {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  margin: 1.5em 0;
+  border-collapse: collapse;
+  table-layout: auto;
+  overflow-x: auto;
+  box-sizing: border-box;
+  color: var(--wx-body-color);
+  font-size: 14px;
+  line-height: 1.62;
+}
+
+.milkdown .editor th,
+.milkdown .editor td {
+  padding: 8px 9px;
+  border: 1px solid var(--wx-divider-color);
+  color: var(--wx-body-color);
+  text-align: left;
+  vertical-align: top;
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
+
+.milkdown .editor th {
+  background-color: var(--wx-soft-surface);
+  color: var(--wx-brand-ink);
+  font-weight: 700;
+}
+
+.milkdown .editor th p,
+.milkdown .editor td p {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.62;
+  text-align: left;
+}
+
+.milkdown .editor th p {
+  color: var(--wx-brand-ink);
+}
+
+/* 表头保持单行，超宽表格通过自身横向滚动。 */
+.milkdown .editor th,
+.milkdown .editor th p {
+  white-space: nowrap;
+  overflow-wrap: normal;
+  word-break: normal;
+}
+
+.milkdown .editor td p {
+  color: var(--wx-body-color);
+}
+
+.milkdown .editor hr {
+  display: block;
+  height: 0;
+  margin: 2.15em 0;
+  padding: 0;
+  border: 0;
+  border-top: 1px solid var(--wx-divider-color);
+  background: transparent;
+}
+
+.milkdown .editor [data-wechat-node="references"] {
+  margin-top: 2.6em;
+  padding-top: 1.05em;
+  border-top: 1px solid var(--wx-divider-color);
+}
+
+.milkdown .editor [data-wechat-node="references-title"] {
+  margin: 0 0 0.65em;
+  color: var(--wx-body-color);
+  font-size: 15px;
+  font-weight: 700;
+  line-height: 1.55;
+  text-align: left;
+}
+
+.milkdown .editor [data-wechat-node="references-list"] {
+  margin: 0;
+  padding-left: 1.5em;
+}
+
+.milkdown .editor [data-wechat-node="reference-item"] {
+  margin: 0.42em 0;
+  color: var(--wx-muted-color);
+  font-size: 12px;
+  line-height: 1.62;
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
+
+.milkdown .editor [data-wechat-node="footer"] {
+  margin-top: 2.5em;
+  padding-top: 0.9em;
+  border-top: 1px solid var(--wx-divider-color);
+  text-align: center;
+}
+
+.milkdown .editor [data-wechat-node="footer-text"] {
+  margin: 0;
+  color: var(--wx-muted-color);
+  font-size: 12px;
+  line-height: 1.6;
+  letter-spacing: 0.08em;
+  text-align: center;
+}
+
+/*
+ * ==========================================================================
+ * Kairos Extended Article Components (Editorial Standard)
+ *
+ * 注：以下为作者 Kairos 个人公众号与 Milkdown 写作的标准组件排版样式。
+ * 宿主应用或用户可按需通过自定义 CSS 变量或选择器进行重写与覆盖。
+ * ==========================================================================
+ */
+
+/* 1. 高亮标记 (Highlight Mark) */
+.milkdown .editor mark {
+  background-color: #fef08a;
+  color: inherit;
+  padding: 0.1em 0.3em;
+  border-radius: 2px;
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+}
+
+/* 2. 提示卡片 (Callout GFM Alerts) */
+.milkdown .editor section[data-wechat-node="callout"],
+.milkdown .editor .wechat-callout {
+  margin: 1.6em 0;
+  padding: 14px 16px;
+  border-radius: 6px;
+  border-left-width: 4px;
+  border-left-style: solid;
+  border-left-color: #3b82f6;
+  background-color: rgba(59, 130, 246, 0.08);
+  box-sizing: border-box;
+}
+.milkdown .editor .wechat-callout-note,
+.milkdown .editor section[data-callout-type="note"] {
+  border-left-color: #3b82f6 !important;
+  background-color: rgba(59, 130, 246, 0.08) !important;
+}
+.milkdown .editor .wechat-callout-tip,
+.milkdown .editor section[data-callout-type="tip"] {
+  border-left-color: #10b981 !important;
+  background-color: rgba(16, 185, 129, 0.08) !important;
+}
+.milkdown .editor .wechat-callout-important,
+.milkdown .editor section[data-callout-type="important"] {
+  border-left-color: #8b5cf6 !important;
+  background-color: rgba(139, 92, 246, 0.08) !important;
+}
+.milkdown .editor .wechat-callout-warning,
+.milkdown .editor section[data-callout-type="warning"] {
+  border-left-color: #f59e0b !important;
+  background-color: rgba(245, 158, 11, 0.08) !important;
+}
+.milkdown .editor .wechat-callout-caution,
+.milkdown .editor section[data-callout-type="caution"] {
+  border-left-color: #ef4444 !important;
+  background-color: rgba(239, 68, 68, 0.08) !important;
+}
+.milkdown .editor section[data-wechat-node="callout-header"],
+.milkdown .editor .wechat-callout-header {
+  margin-bottom: 6px;
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--wx-h2-color, #1f1b1c);
+}
+.milkdown .editor .wechat-callout-icon {
+  margin-right: 6px;
+  font-size: 15px;
+  display: inline-block;
+  vertical-align: middle;
+}
+.milkdown .editor .wechat-callout-title {
+  display: inline-block;
+  vertical-align: middle;
+}
+.milkdown .editor .wechat-callout p {
+  margin: 0.3em 0;
+  font-size: 14.5px;
+  line-height: 1.68;
+}
+
+/* 3. 键盘按键 (Keyboard Key) */
+.milkdown .editor span[data-wechat-node="kbd"],
+.milkdown .editor .wechat-kbd {
+  display: inline-block;
+  padding: 1.5px 5.5px;
+  font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
+  font-size: 0.82em;
+  font-weight: 500;
+  line-height: 1.35;
+  color: var(--wx-text-mid, #3c4043);
+  background-color: #f3f4f6;
+  border: 1px solid #d1d5db;
+  border-bottom-width: 2px;
+  border-radius: 4px;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+  margin: 0 2px;
+  vertical-align: baseline;
+}
+
+/* 4. 状态徽章 (Status Badge) */
+.milkdown .editor span[data-wechat-node="badge"],
+.milkdown .editor .wechat-badge {
+  display: inline-block;
+  padding: 1.5px 7px;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1.3;
+  border-radius: 9999px;
+  margin: 0 3px;
+  vertical-align: middle;
+}
+.milkdown .editor .wechat-badge-brand {
+  background-color: rgba(202, 96, 147, 0.12);
+  color: var(--wx-brand-accent, #ca6093);
+}
+.milkdown .editor .wechat-badge-success {
+  background-color: #dcfce7;
+  color: #15803d;
+}
+.milkdown .editor .wechat-badge-warning {
+  background-color: #fef3c7;
+  color: #b45309;
+}
+.milkdown .editor .wechat-badge-danger {
+  background-color: #fee2e2;
+  color: #b91c1c;
+}
+.milkdown .editor .wechat-badge-info {
+  background-color: #e0f2fe;
+  color: #0369a1;
+}
+
+/* 5. 篇章结构卡片 (Article Cards: Intro & CTA) */
+.milkdown .editor section[data-wechat-node="article-card"],
+.milkdown .editor .wechat-article-card {
+  margin: 1.8em 0;
+  padding: 16px 20px;
+  border-radius: 10px;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+.milkdown .editor .wechat-article-card-intro {
+  background-color: var(--wx-soft-surface, #faf8f9);
+  border: 1px solid var(--wx-divider, #eae4e7);
+}
+.milkdown .editor .wechat-article-card-cta {
+  background-color: rgba(202, 96, 147, 0.04);
+  border: 1px dashed var(--wx-brand-accent, #ca6093);
+  text-align: center;
+}
+.milkdown .editor section[data-wechat-node="card-eyebrow"],
+.milkdown .editor .wechat-card-eyebrow {
+  margin-bottom: 10px;
+}
+.milkdown .editor .wechat-article-card-cta section[data-wechat-node="card-eyebrow"],
+.milkdown .editor .wechat-article-card-cta .wechat-card-eyebrow {
+  text-align: center;
+}
+.milkdown .editor span[data-wechat-node="card-eyebrow-badge"],
+.milkdown .editor .wechat-card-eyebrow-badge {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 4px;
+  background-color: rgba(202, 96, 147, 0.08);
+  color: var(--wx-brand-accent, #ca6093);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  line-height: 1.5;
+}
+.milkdown .editor .wechat-card-eyebrow-icon {
+  margin-right: 4px;
+  font-size: 12px;
+  display: inline-block;
+  vertical-align: middle;
+}
+.milkdown .editor .wechat-card-eyebrow-label {
+  display: inline-block;
+  vertical-align: middle;
+}
+.milkdown .editor .wechat-article-card p {
+  margin: 0.4em 0;
+  font-size: 13px;
+  line-height: 1.72;
+  color: var(--wx-text-soft, #555555);
+  letter-spacing: 0.02em;
+}
+.milkdown .editor p[data-wechat-node="intro-meta"],
+.milkdown .editor .wechat-intro-meta {
+  margin: 4px 0 10px 0 !important;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--wx-divider, #f0ebed);
+  font-size: 12px !important;
+  color: var(--wx-muted-color, #756b6e) !important;
+  line-height: 1.5 !important;
+}
+.milkdown .editor p[data-wechat-node="intro-meta"] strong,
+.milkdown .editor .wechat-intro-meta strong {
+  color: var(--wx-brand-accent, #ca6093);
+  font-weight: 600;
+}
+.milkdown .editor p[data-wechat-node="intro-guide"],
+.milkdown .editor .wechat-intro-guide {
+  margin-top: 10px !important;
+  padding-top: 8px;
+  border-top: 1px dashed rgba(202, 96, 147, 0.25);
+  font-size: 12px !important;
+  color: var(--wx-brand-accent, #ca6093) !important;
+  line-height: 1.6 !important;
+}

package/dist/styles/index.css

@@ -0,0 +1,2 @@
+@import "./tokens-default.css";
+@import "./article.css";

package/dist/styles/tokens-default.css

@@ -0,0 +1,30 @@
+/*
+ * Default editorial tokens (sage-journal / default account) by Kairos.
+ *
+ * Export path injects the same variables via buildWechatThemeCss(themes.ts).
+ * Live hosts (Nezus editor) should load this file so article.css resolves.
+ *
+ * Override by redefining --wx-* on a parent or on `.milkdown .editor`.
+ */
+
+.milkdown .editor {
+  --wx-font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
+    "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
+  --wx-body-color: #292526;
+  --wx-muted-color: #6f696b;
+  /* Heading chroma: H2 slightly deeper than body; H3 between body and muted.
+   * Prefer color hierarchy over font-weight 600 (unreliable on many CJK system fonts / WeChat). */
+  --wx-h2-color: #1f1b1c;
+  --wx-h3-color: #5c5658;
+  --wx-brand-ink: #a94473;
+  --wx-brand-accent: #ca6093;
+  --wx-brand-bg: rgba(202, 96, 147, 0.08);
+  --wx-divider-color: #e2dcdf;
+  --wx-divider: #eae4e7;
+  --wx-blockquote-border: #ca6093;
+  --wx-body-line-height: 1.84;
+  --wx-body-letter-spacing: 0.012em;
+  --wx-soft-surface: #faf8f9;
+  --wx-text-soft: #555555;
+  --wx-text-mid: #3c4043;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akairos/myno",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "WeChat article WYSIWYG editor & visual typography studio",
   "type": "module",
   "license": "MIT",
@@ -30,11 +30,15 @@
       "types": "./dist/editor/article-menu.d.ts",
       "default": "./dist/editor/article-menu.js"
     },
-    "./style": "./dist/style.css"
+    "./style": "./dist/styles/index.css",
+    "./article.css": "./dist/styles/article.css",
+    "./tokens-default.css": "./dist/styles/tokens-default.css"
   },
   "files": [
     "dist",
-    "README.md"
+    "README.md",
+    "LICENSE",
+    "CHANGELOG.md"
   ],
   "scripts": {
     "dev": "vite",
@@ -48,7 +52,6 @@
   },
   "dependencies": {
     "@akairos/milkdown-article-plugins": "^0.1.3",
-    "@akairos/milkdown-article-style": "^0.1.1",
     "juice": "^12.2.0"
   },
   "devDependencies": {