comark-code-notes 0.8.0 → 0.8.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{client-CCAee6bw.mjs → client-Cl1M_Rli.mjs} +1 -1
- package/dist/client.d.mts +1 -2
- package/dist/client.mjs +2 -2
- package/dist/html.mjs +1 -1
- package/dist/react.mjs +1 -1
- package/dist/style.css +1 -1
- package/dist/{styles-CF9cpN0K.mjs → styles-BsMSqaDf.mjs} +32 -8
- package/dist/vue.mjs +1 -1
- package/package.json +2 -2
package/dist/client.d.mts
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
//#region src/styles.d.ts
|
|
2
2
|
/**
|
|
3
|
-
* Round numbered markers at the ends of lines and before each note, as a soft tint of
|
|
4
|
-
* page has it, or of the foreground otherwise, with the number in that color, on the shared `--comark-*` tokens.
|
|
3
|
+
* Round numbered markers at the ends of lines and before each note, as a soft tint of the primary color, with the number in that color, on the shared `--comark-*` tokens.
|
|
5
4
|
* Override `--cn-marker` and `--cn-marker-text`. The number is drawn by CSS, so copying the code never takes it along.
|
|
6
5
|
* The rules sit in the `comark` layer, so any unlayered rule of the host's wins.
|
|
7
6
|
*/
|
package/dist/client.mjs
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { t as css } from "./styles-
|
|
2
|
-
import { t as addStyles } from "./client-
|
|
1
|
+
import { t as css } from "./styles-BsMSqaDf.mjs";
|
|
2
|
+
import { t as addStyles } from "./client-Cl1M_Rli.mjs";
|
|
3
3
|
export { addStyles, css };
|
package/dist/html.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { n as src_default, t as NOTES_TAG } from "./src-JYXNZqY7.mjs";
|
|
2
|
-
import { t as css } from "./styles-
|
|
2
|
+
import { t as css } from "./styles-BsMSqaDf.mjs";
|
|
3
3
|
//#region src/html.ts
|
|
4
4
|
const styled = /* @__PURE__ */ new WeakSet();
|
|
5
5
|
const notes = async ([, attrs, ...children], state) => {
|
package/dist/react.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { n as src_default, t as NOTES_TAG } from "./src-JYXNZqY7.mjs";
|
|
2
|
-
import { t as addStyles } from "./client-
|
|
2
|
+
import { t as addStyles } from "./client-Cl1M_Rli.mjs";
|
|
3
3
|
import { createElement, useEffect } from "react";
|
|
4
4
|
//#region src/react.ts
|
|
5
5
|
/** The notes under an annotated fence, for `@comark/react`. */
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer comark{:where(.cn-marker,.cn-notes){--_comark-background:var(--comark-background,var(--ui-bg,var(--background,#fff)));--_comark-foreground:var(--comark-foreground,var(--ui-text-highlighted,var(--foreground,#0a0a0a)));--_comark-muted:var(--comark-muted,var(--ui-text-muted,var(--muted-foreground,#737373)));--_comark-border:var(--comark-border,var(--ui-border,var(--border,#e5e5e5)));--_comark-accent:var(--comark-accent,var(--ui-bg-elevated,var(--accent,#f5f5f5)));--_comark-ring:var(--comark-ring,var(--ui-primary,var(--ring,#a1a1a1)));--_comark-radius:var(--comark-radius,calc(var(--ui-radius,calc(var(--radius,.625rem)/2))*2));--_comark-font:var(--comark-font,var(--font-sans,ui-sans-serif,system-ui,sans-serif))}@media (prefers-color-scheme:dark){:where(.cn-marker,.cn-notes){--_comark-background:var(--comark-background,var(--ui-bg,var(--background,#0a0a0a)));--_comark-foreground:var(--comark-foreground,var(--ui-text-highlighted,var(--foreground,#fafafa)));--_comark-muted:var(--comark-muted,var(--ui-text-muted,var(--muted-foreground,#a1a1a1)));--_comark-border:var(--comark-border,var(--ui-border,var(--border,rgb(255 255 255/.1))));--_comark-accent:var(--comark-accent,var(--ui-bg-elevated,var(--accent,#262626)));--_comark-ring:var(--comark-ring,var(--ui-primary,var(--ring,#737373)))}}:where(.cn-marker){--cn-marker:var(--
|
|
1
|
+
@layer comark{:where(.cn-marker,.cn-notes){--_comark-background:var(--comark-background,var(--ui-bg,var(--background,#fff)));--_comark-foreground:var(--comark-foreground,var(--ui-text-highlighted,var(--foreground,#0a0a0a)));--_comark-muted:var(--comark-muted,var(--ui-text-muted,var(--muted-foreground,#737373)));--_comark-border:var(--comark-border,var(--ui-border,var(--border,#e5e5e5)));--_comark-accent:var(--comark-accent,var(--ui-bg-elevated,var(--accent,#f5f5f5)));--_comark-ring:var(--comark-ring,var(--ui-primary,var(--ring,#a1a1a1)));--_comark-primary:var(--comark-primary,var(--ui-primary,var(--primary,var(--_comark-foreground))));--_comark-primary-foreground:var(--comark-primary-foreground,var(--ui-text-inverted,var(--primary-foreground,var(--_comark-background))));--_comark-secondary:var(--comark-secondary,var(--ui-secondary,var(--_comark-muted)));--_comark-radius:var(--comark-radius,calc(var(--ui-radius,calc(var(--radius,.625rem)/2))*2));--_comark-font:var(--comark-font,var(--font-sans,ui-sans-serif,system-ui,sans-serif))}@media (prefers-color-scheme:dark){:where(.cn-marker,.cn-notes){--_comark-background:var(--comark-background,var(--ui-bg,var(--background,#0a0a0a)));--_comark-foreground:var(--comark-foreground,var(--ui-text-highlighted,var(--foreground,#fafafa)));--_comark-muted:var(--comark-muted,var(--ui-text-muted,var(--muted-foreground,#a1a1a1)));--_comark-border:var(--comark-border,var(--ui-border,var(--border,rgb(255 255 255/.1))));--_comark-accent:var(--comark-accent,var(--ui-bg-elevated,var(--accent,#262626)));--_comark-ring:var(--comark-ring,var(--ui-primary,var(--ring,#737373)));--_comark-primary:var(--comark-primary,var(--ui-primary,var(--primary,var(--_comark-foreground))));--_comark-primary-foreground:var(--comark-primary-foreground,var(--ui-text-inverted,var(--primary-foreground,var(--_comark-background))));--_comark-secondary:var(--comark-secondary,var(--ui-secondary,var(--_comark-muted)))}}:where(.cn-marker){--cn-marker:var(--_comark-primary);--cn-marker-text:var(--cn-marker)}.cn-marker{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:1.25rem;height:1.25rem;margin-inline-start:.5rem;padding:0 .3rem;border-radius:9999px;background:color-mix(in srgb,var(--cn-marker) 10%,var(--_comark-background));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cn-marker) 22%,transparent);font:600 .6875rem/1 var(--_comark-font);font-variant-numeric:tabular-nums;vertical-align:.0625rem;user-select:none;transition:background-color .15s}.cn-marker{color:var(--cn-marker-text)!important;text-decoration:none!important;border:0!important}.cn-marker::after{content:attr(data-note)}a.cn-marker:hover{background:color-mix(in srgb,var(--cn-marker) 18%,var(--_comark-background))}a.cn-marker:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--_comark-ring) 50%,transparent)}.cn-marker:target{box-shadow:0 0 0 3px color-mix(in srgb,var(--_comark-ring) 60%,transparent)}.line:has(>.cn-marker:is(:target,:focus)){border-image:conic-gradient(color-mix(in srgb,var(--cn-marker,currentColor) 14%,transparent) 0 0) fill 0//.25em 100vw}.cn-notes{margin:.75rem 0 1.5rem}.cn-notes{padding:0!important;list-style:none!important}.cn-notes>li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:.625rem;margin:.375rem 0;padding:.125rem .375rem;border-radius:calc(var(--_comark-radius) - 4px)}.cn-notes>li>.cn-marker{margin:0}.cn-notes>li>div>:first-child{margin-top:0!important}.cn-notes>li>div>:last-child{margin-bottom:0!important}.cn-notes>li:target{background:var(--_comark-accent)}}
|
|
@@ -74,6 +74,29 @@ const groups = {
|
|
|
74
74
|
"#60a5fa"
|
|
75
75
|
]
|
|
76
76
|
}),
|
|
77
|
+
primary: [
|
|
78
|
+
[
|
|
79
|
+
"primary",
|
|
80
|
+
"ui-primary",
|
|
81
|
+
"primary",
|
|
82
|
+
"var(--_comark-foreground)",
|
|
83
|
+
"var(--_comark-foreground)"
|
|
84
|
+
],
|
|
85
|
+
[
|
|
86
|
+
"primary-foreground",
|
|
87
|
+
"ui-text-inverted",
|
|
88
|
+
"primary-foreground",
|
|
89
|
+
"var(--_comark-background)",
|
|
90
|
+
"var(--_comark-background)"
|
|
91
|
+
],
|
|
92
|
+
[
|
|
93
|
+
"secondary",
|
|
94
|
+
"ui-secondary",
|
|
95
|
+
"",
|
|
96
|
+
"var(--_comark-muted)",
|
|
97
|
+
"var(--_comark-muted)"
|
|
98
|
+
]
|
|
99
|
+
],
|
|
77
100
|
shadow: [[
|
|
78
101
|
"shadow",
|
|
79
102
|
"",
|
|
@@ -94,34 +117,35 @@ const resolve = (list, scheme) => list.map((token) => `--_comark-${token[0]}:${c
|
|
|
94
117
|
* They resolve on the component rather than `:root`, so a `.dark` class anywhere above it switches the theme, and a
|
|
95
118
|
* `--comark-*` set on any ancestor still inherits down. `:where()` keeps them at zero specificity.
|
|
96
119
|
*
|
|
97
|
-
* Every block gets the core tokens. Name `"status"` for `--comark-success`, `-danger`, `-warning`, and `-info`,
|
|
98
|
-
* `"
|
|
120
|
+
* Every block gets the core tokens. Name `"status"` for `--comark-success`, `-danger`, `-warning`, and `-info`,
|
|
121
|
+
* `"primary"` for `--comark-primary`, `-primary-foreground`, and `-secondary`, and `"shadow"` for `--comark-shadow`, so
|
|
122
|
+
* a block that never draws them doesn't carry them.
|
|
99
123
|
*/
|
|
100
124
|
function theme(selector, ...extras) {
|
|
101
125
|
const where = `:where(${selector})`;
|
|
102
126
|
const added = extras.flatMap((name) => groups[name]);
|
|
103
127
|
const list = [...tokens, ...added];
|
|
104
|
-
const
|
|
128
|
+
const schemed = added.filter((token) => token[3] !== token[4]);
|
|
129
|
+
const classes = schemed.length ? `:where(.light,.light *)${where}{${resolve(schemed, 3)}}:where(.dark,.dark *)${where}{${resolve(schemed, 4)}}` : "";
|
|
105
130
|
return `${where}{${resolve(list, 3)};--_comark-radius:var(--comark-radius,calc(var(--ui-radius,calc(var(--radius,.625rem)/2))*2));--_comark-font:var(--comark-font,var(--font-sans,ui-sans-serif,system-ui,sans-serif))}@media (prefers-color-scheme:dark){${where}{${resolve(list, 4)}}}` + classes;
|
|
106
131
|
}
|
|
107
132
|
//#endregion
|
|
108
133
|
//#region src/styles.ts
|
|
109
134
|
/**
|
|
110
|
-
* Round numbered markers at the ends of lines and before each note, as a soft tint of
|
|
111
|
-
* page has it, or of the foreground otherwise, with the number in that color, on the shared `--comark-*` tokens.
|
|
135
|
+
* Round numbered markers at the ends of lines and before each note, as a soft tint of the primary color, with the number in that color, on the shared `--comark-*` tokens.
|
|
112
136
|
* Override `--cn-marker` and `--cn-marker-text`. The number is drawn by CSS, so copying the code never takes it along.
|
|
113
137
|
* The rules sit in the `comark` layer, so any unlayered rule of the host's wins.
|
|
114
138
|
*/
|
|
115
139
|
const css = `@layer comark{${[
|
|
116
|
-
theme(".cn-marker,.cn-notes"),
|
|
117
|
-
":where(.cn-marker){--cn-marker:var(--
|
|
140
|
+
theme(".cn-marker,.cn-notes", "primary"),
|
|
141
|
+
":where(.cn-marker){--cn-marker:var(--_comark-primary);--cn-marker-text:var(--cn-marker)}",
|
|
118
142
|
".cn-marker{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:1.25rem;height:1.25rem;margin-inline-start:.5rem;padding:0 .3rem;border-radius:9999px;background:color-mix(in srgb,var(--cn-marker) 10%,var(--_comark-background));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cn-marker) 22%,transparent);font:600 .6875rem/1 var(--_comark-font);font-variant-numeric:tabular-nums;vertical-align:.0625rem;user-select:none;transition:background-color .15s}",
|
|
119
143
|
".cn-marker{color:var(--cn-marker-text)!important;text-decoration:none!important;border:0!important}",
|
|
120
144
|
".cn-marker::after{content:attr(data-note)}",
|
|
121
145
|
"a.cn-marker:hover{background:color-mix(in srgb,var(--cn-marker) 18%,var(--_comark-background))}",
|
|
122
146
|
"a.cn-marker:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--_comark-ring) 50%,transparent)}",
|
|
123
147
|
".cn-marker:target{box-shadow:0 0 0 3px color-mix(in srgb,var(--_comark-ring) 60%,transparent)}",
|
|
124
|
-
".line:has(>.cn-marker:is(:target,:focus)){border-image:conic-gradient(color-mix(in srgb,var(--cn-marker,
|
|
148
|
+
".line:has(>.cn-marker:is(:target,:focus)){border-image:conic-gradient(color-mix(in srgb,var(--cn-marker,currentColor) 14%,transparent) 0 0) fill 0//.25em 100vw}",
|
|
125
149
|
".cn-notes{margin:.75rem 0 1.5rem}",
|
|
126
150
|
".cn-notes{padding:0!important;list-style:none!important}",
|
|
127
151
|
".cn-notes>li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:.625rem;margin:.375rem 0;padding:.125rem .375rem;border-radius:calc(var(--_comark-radius) - 4px)}",
|
package/dist/vue.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { n as src_default, t as NOTES_TAG } from "./src-JYXNZqY7.mjs";
|
|
2
|
-
import { t as addStyles } from "./client-
|
|
2
|
+
import { t as addStyles } from "./client-Cl1M_Rli.mjs";
|
|
3
3
|
import { defineComponent, h, onMounted } from "vue";
|
|
4
4
|
//#region src/vue.ts
|
|
5
5
|
/** The notes under an annotated fence, for `@comark/vue`. */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "comark-code-notes",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.1",
|
|
4
4
|
"description": "Numbered notes on lines of code: a // <1> marker in a fence links to the numbered list after it. A Comark plugin.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"annotations",
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
"react-dom": "^19.3.1",
|
|
58
58
|
"svelte": "^5.57.2",
|
|
59
59
|
"vue": "^3.5.44",
|
|
60
|
-
"comark-zoom": "0.8.
|
|
60
|
+
"comark-zoom": "0.8.1"
|
|
61
61
|
},
|
|
62
62
|
"peerDependencies": {
|
|
63
63
|
"@comark/html": "^0.8.0",
|