pipeup 0.0.1 → 0.3.0

package/dist/types/ui/styles.d.ts

@@ -0,0 +1,2 @@
+/** Pipeup's stylesheet, scoped to its shadow root. Light by default; `.dark` follows a dark page. */
+export declare const STYLES = "\n/* Inherited page styles are reset on .layer below; custom properties pass through all:initial. */\n:host{all:initial}\n*{box-sizing:border-box}\nbutton{-webkit-appearance:none;appearance:none;font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}\nsvg{display:block}\n.layer{all:initial;display:block;position:fixed;inset:0;pointer-events:none;font:13px/1.5 var(--pu-font,system-ui,sans-serif);color:var(--pu-ink);\n--pu-ink:#2C2C2A;--pu-muted:#5F5E5A;--pu-faint:#888780;--pu-line:#E5E3DA;--pu-rule:#ECEAE2;--pu-soft:#FAFAF7;--pu-surface:#FFFFFF;--pu-hover:#F1EFE8;\n--pu-accent-soft:color-mix(in srgb,var(--pu-accent,#534AB7) 12%,transparent);\n--pu-shadow:0 8px 28px rgba(44,44,42,.10);\n--pu-enter:.26s;--pu-move:.34s;--pu-exit:.2s;--pu-pulse:1.2s;\n--pu-eo:cubic-bezier(.22,.61,.36,1);--pu-eio:cubic-bezier(.4,0,.2,1);--pu-ei:cubic-bezier(.4,0,1,1)}\n.layer.dark{--pu-ink:#ECEBE6;--pu-muted:#B4B2A9;--pu-faint:#8D8B84;--pu-line:#3A3936;--pu-rule:#34332F;--pu-soft:#22221F;--pu-surface:#1B1B19;--pu-hover:#2C2C29;--pu-shadow:0 8px 28px rgba(0,0,0,.45)}\n.layer.hidden .bub,.layer.hidden .col,.layer.hidden .pop,.layer.hidden .tip,.layer.hidden .mark,.layer.hidden .selbar{opacity:0!important;pointer-events:none!important}\n\n.tx{font-size:14px;line-height:1.5;color:var(--pu-ink);white-space:pre-wrap;overflow-wrap:anywhere}\n.tx.del,.who,.rest,.ctx{color:var(--pu-faint)}\n.who,.rest{font-size:12px}\n/* Long names are cut short on one line, never wrapped. */\n.who{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n.rft>.who{display:block}\n.ctx[hidden]{display:none}\n.ctx{font-size:12px;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n.clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}\n.tx a{color:var(--pu-accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}\n\n/* Footers: details take no space until hovered, then ease open beneath the words. */\n.ft,.rft{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows var(--pu-enter) var(--pu-eo),opacity var(--pu-enter) var(--pu-eo)}\n.ft>*,.rft>*{overflow:hidden;min-height:0;display:flex;align-items:center}\n.root:hover>.ft,.root:focus-within>.ft,.it:hover>.rft,.it:focus-within>.rft{grid-template-rows:1fr;opacity:1}\n.ft.has-rest{grid-template-rows:1fr;opacity:1}\n.ft.has-rest>*{grid-area:1/1}\n.ft .hover{opacity:0;transition:opacity var(--pu-enter) var(--pu-eo)}\n.ft .rest{transition:opacity var(--pu-enter) var(--pu-eo)}\n.root:hover>.ft .hover,.root:focus-within>.ft .hover,.ft:not(.has-rest) .hover{opacity:1}\n.root:hover>.ft .rest,.root:focus-within>.ft .rest{opacity:0}\n.acts{margin-left:6px;display:flex;flex:none}\n.ib{width:24px;height:22px;display:grid;place-items:center;border-radius:6px;color:var(--pu-muted);transition:background-color .2s var(--pu-eo),color .2s var(--pu-eo)}\n.ib:hover,.ib:focus-visible{background:var(--pu-hover);color:var(--pu-ink);outline:none}\n\n/* Replies: one level in, oldest first; the reply line ends the thread at the same indent. */\n.rps,.rbox{padding-left:14px}\n.rps .it{padding-top:6px}\n.more{display:grid;grid-template-rows:1fr;transition:grid-template-rows var(--pu-move) var(--pu-eio)}\n.more>div{overflow:hidden;min-height:0}\n.th:not(.on) .more{grid-template-rows:0fr}\n\n.row{display:flex;align-items:center;gap:8px;padding:8px 0 2px;cursor:text}\n.input{flex:1;min-width:0;height:27px;display:block;border:0;border-bottom:1px solid var(--pu-line);outline:none;resize:none;overflow:hidden;\nfont:inherit;font-size:14px;line-height:1.5;padding:3px 0;color:var(--pu-ink);background:transparent;transition:border-color var(--pu-enter) var(--pu-eo)}\n.row:hover .input,.input:hover{border-bottom-color:var(--pu-muted)}\n.input:focus{border-bottom-color:var(--pu-accent)}\n.name{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--pu-faint);padding-top:6px}\n.name .input{font-size:13px;height:24px}\n\n/* Avatars: a squircle with the writer's animal (or initial) on a soft colour. Each comment keeps a fixed area\nat its top right for one, so its words are the same width with or without it. */\n.root,.it{position:relative;padding-right:30px}\n.av{display:grid;place-items:center;width:22px;height:22px;border-radius:32%;\nfont-size:12px;font-weight:600;line-height:1;opacity:0;transform:scale(.85);transition:opacity var(--pu-enter) var(--pu-eo),transform var(--pu-enter) var(--pu-eo)}\n.av.in{opacity:1;transform:none}\n.av svg{width:80%;height:80%}\n.root>.av,.it>.av{position:absolute;top:0;right:0}\n.it>.av{top:6px}\n/* Ten colours (.c0 Red to .c9 Grey, as COLOURS): a soft tint and a dark drawing, swapped round on dark pages. */\n.av{--av-l:92%;--av-d:30%;--s:60%;background:hsl(var(--h) var(--s) var(--av-l));color:hsl(var(--h) var(--s) var(--av-d))}\n.dark .av{--av-l:20%;--av-d:78%}\n.c0{--h:0}.c1{--h:25}.c2{--h:50}.c3{--h:130}.c4{--h:175}.c5{--h:215}.c6{--h:270}.c7{--h:330}.c8{--h:28;--s:35%}.c9{--h:220;--s:8%}\n.me{flex:none;display:grid}\n.me>.av{grid-area:1/1;width:26px;height:26px;font-size:13px}\n/* Who you are, under the comment line; a name field eases open in its place. */\n.you{display:grid;padding:0 34px;min-height:24px;font-size:12px;color:var(--pu-faint)}\n.you>*{grid-area:1/1;display:flex;align-items:center;min-width:0;transition:opacity var(--pu-enter) var(--pu-eo),transform var(--pu-enter) var(--pu-eo)}\n.say{white-space:pre;overflow:hidden}\n.nm{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n.say button{flex:none}\n.say button{color:var(--pu-muted);text-decoration:underline;text-decoration-color:var(--pu-line);text-underline-offset:2px;transition:color .2s var(--pu-eo)}\n.say button:hover,.say button:focus-visible{color:var(--pu-accent);outline:none}\n.nf{opacity:0;transform:translateY(-4px);pointer-events:none}\n.nf .input{font-size:13px;height:24px}\n.you.naming .nf{opacity:1;transform:none;pointer-events:auto}\n.you.naming .say{opacity:0;pointer-events:none}\n.send{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:var(--pu-accent);flex:none;opacity:0;pointer-events:none;\ntransition:opacity var(--pu-enter) var(--pu-eo),background-color .2s var(--pu-eo)}\n.send.show{opacity:1;pointer-events:auto}\n.send:hover{background:var(--pu-accent-soft)}\n\n/* Bubbles, tips, popovers, marks, pulses. */\n.bub{position:fixed;left:0;top:0;width:20px;height:20px;margin:-20px 0 0 -2px;border-radius:50% 50% 50% 0;background:var(--pu-accent);\nborder:2px solid var(--pu-surface);box-shadow:0 1px 4px rgba(0,0,0,.2);pointer-events:auto;opacity:0;transform:translateY(-6px) scale(.9);transform-origin:2px 20px;\ntransition:opacity var(--pu-exit) var(--pu-ei),transform var(--pu-exit) var(--pu-ei)}\n.bub.in{opacity:1;transform:none;transition:opacity var(--pu-enter) var(--pu-eo),transform var(--pu-enter) var(--pu-eo)}\n.bub.in:hover,.bub.on{transform:scale(1.18)}\n.bub.done{background:var(--pu-faint)}\n.bub.ghost{pointer-events:none}\n.tip,.pop,.menu,.all,.toast,.selbar{background:var(--pu-surface);border:1px solid var(--pu-line);box-shadow:var(--pu-shadow)}\n.tip{position:fixed;max-width:260px;border-radius:10px;padding:7px 10px;opacity:0;transform:translateY(3px);\ntransition:opacity .22s var(--pu-eo),transform .26s var(--pu-eo)}\n.tip.show{opacity:1;transform:none;pointer-events:auto;cursor:pointer;\ntransition:opacity .22s var(--pu-eo),transform .26s var(--pu-eo),left var(--pu-move) var(--pu-eio),top var(--pu-move) var(--pu-eio)}\n.pop{position:fixed;width:var(--pu-pop);border-radius:12px;padding:10px 12px 8px;pointer-events:none;opacity:0;transform:translateY(6px) scale(.98);\ntransition:opacity var(--pu-exit) var(--pu-ei),transform var(--pu-exit) var(--pu-ei)}\n.pop.show{opacity:1;transform:none;pointer-events:auto;transition:opacity var(--pu-enter) var(--pu-eo),transform var(--pu-move) var(--pu-eo)}\n.pop.show.glide{transition:opacity var(--pu-enter) var(--pu-eo),transform var(--pu-move) var(--pu-eo),left var(--pu-move) var(--pu-eio),top var(--pu-move) var(--pu-eio)}\n.mark{position:fixed;border:2px solid color-mix(in srgb,var(--pu-accent) 50%,transparent);background:var(--pu-accent-soft);border-radius:8px;opacity:0;\ntransition:opacity .3s var(--pu-eo)}\n.mark.show{opacity:1}\n.pulse{position:fixed;border:2px solid var(--pu-accent);border-radius:8px;background:var(--pu-accent-soft);animation:pu-pulse var(--pu-pulse) var(--pu-eio) forwards}\n@keyframes pu-pulse{0%{opacity:0;transform:scale(.985)}35%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(1.02)}}\n\n/* Document column. */\n.col{position:fixed;left:0;top:0;pointer-events:none;transition:opacity var(--pu-enter) var(--pu-eo)}\n.th{position:absolute;left:0;right:0;top:0;padding:4px 4px 4px 12px;pointer-events:auto;cursor:pointer;box-shadow:inset 2px 0 0 transparent;\ntransition:transform var(--pu-move) var(--pu-eio),box-shadow var(--pu-enter) var(--pu-eo),opacity var(--pu-enter) var(--pu-eo)}\n.th.hot{box-shadow:inset 2px 0 0 var(--pu-line)}\n.th.on{box-shadow:inset 2px 0 0 var(--pu-accent);cursor:default}\n.th.dim{opacity:.45}\n.th.resolved:not(.on):not(.hot){opacity:.6}\n.th.lost .ctx{white-space:normal}\n.th.wait{opacity:0!important;pointer-events:none}\n.th.out{opacity:0!important;pointer-events:none;transition:opacity var(--pu-exit) var(--pu-ei)}\n\n/* Selection bar. */\n.selbar{position:fixed;display:flex;border-radius:10px;padding:2px;opacity:0;transform:translateY(4px);pointer-events:none;\ntransition:opacity var(--pu-enter) var(--pu-eo),transform .3s var(--pu-eo)}\n.selbar.show{opacity:1;transform:none;pointer-events:auto}\n.selbar button{width:32px;height:30px;display:grid;place-items:center;border-radius:8px;color:var(--pu-accent);transition:background-color .2s var(--pu-eo)}\n.selbar button:hover,.selbar button:focus-visible{background:var(--pu-accent-soft);outline:none}\n\n/* Comment mode's outline: glides between blocks; solid accent once chosen. */\n.pick{position:fixed;left:0;top:0;border:2px solid color-mix(in srgb,var(--pu-accent) 70%,transparent);background:color-mix(in srgb,var(--pu-accent) 6%,transparent);\nborder-radius:8px;pointer-events:none;opacity:0;transition:opacity var(--pu-exit) var(--pu-ei),border-color var(--pu-exit) var(--pu-ei)}\n.pick.show{opacity:1;transition-duration:var(--pu-enter);transition-timing-function:var(--pu-eo)}\n.pick.show.glide{transition-property:all;transition-duration:var(--pu-move);transition-timing-function:var(--pu-eio)}\n.pick.on{border-color:var(--pu-accent)}\n.namebar{position:fixed;left:0;top:0;display:flex;align-items:center;gap:2px;padding:2px 2px 2px 10px;border-radius:10px;font-size:12px;color:var(--pu-muted);\nwhite-space:nowrap;background:var(--pu-surface);border:1px solid var(--pu-line);box-shadow:var(--pu-shadow);pointer-events:none;opacity:0;transform:translateY(4px);\ntransition:opacity var(--pu-exit) var(--pu-ei),transform var(--pu-exit) var(--pu-ei)}\n.namebar.show{opacity:1;transform:none;pointer-events:auto;transition:opacity var(--pu-enter) var(--pu-eo),transform .3s var(--pu-eo)}\n.namebar.show.glide{transition-property:all;transition-duration:var(--pu-move);transition-timing-function:var(--pu-eio)}\n.namebar .lbl{margin-right:6px;max-width:260px;overflow:hidden;text-overflow:ellipsis}\n.namebar .nb{padding:4px;display:grid;place-items:center;border-radius:7px;transition:background-color .2s var(--pu-eo),color .2s var(--pu-eo)}\n.namebar .nb:hover,.namebar .nb:focus-visible{background:var(--pu-hover);color:var(--pu-ink);outline:none}\n.namebar .nb[hidden]{display:none}\n\n/* The comment control: one round button; the open count sits inside a comment bubble. Nothing about it\ngrows or slides: its layers and numbers cross-fade in place. */\n.launch{position:fixed;right:20px;bottom:20px;pointer-events:auto}\n.launch .mode{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--pu-surface);border:1px solid var(--pu-line);\nbox-shadow:var(--pu-shadow);transition:background-color .3s var(--pu-eo),color .3s var(--pu-eo)}\n.mode>*,.cnt>*{grid-area:1/1}\n.mode>*{display:grid;place-items:center;transition:opacity var(--pu-enter) var(--pu-eo)}\n.cnt,.has>.plus{opacity:0}\n.has>.cnt{opacity:1}\n.n{font-size:12px;font-weight:500;line-height:1;margin:-1.4px 0 0 1.4px;font-variant-numeric:tabular-nums;opacity:0;transition:opacity var(--pu-enter) var(--pu-eo)}\n.n.s{font-size:9.5px;letter-spacing:-.04em}\n.n.on{opacity:1}\n.launch .mode:hover,.launch .mode[aria-expanded=true]{background:var(--pu-hover)}\n.launch .mode.on{background:var(--pu-accent);color:#fff}\n/* The tooltip eases in after a moment, above the button, and never moves it. */\n.ttip{position:absolute;right:0;bottom:54px;white-space:nowrap;border-radius:8px;padding:4px 9px;font-size:12px;background:var(--pu-surface);border:1px solid var(--pu-line);\nbox-shadow:var(--pu-shadow);pointer-events:none;opacity:0;transform:translateY(3px);transition:opacity var(--pu-exit) var(--pu-ei),transform var(--pu-exit) var(--pu-ei)}\n.ttip small{margin-left:8px}\n.ttip small,.mi .kc{font-size:12px;color:var(--pu-faint)}\n.mode:hover+.ttip,.mode:focus-visible+.ttip{opacity:1;transform:none;transition:opacity var(--pu-enter) var(--pu-eo) .5s,transform var(--pu-enter) var(--pu-eo) .5s}\n.launch .mode[aria-expanded=true]+.ttip{opacity:0;transition:opacity var(--pu-exit) var(--pu-ei)}\n@media (hover:none){.ttip,.tt{display:none}}\n.menu{position:fixed;right:20px;bottom:76px;width:290px;border-radius:12px;padding:4px;pointer-events:none;opacity:0;transform:translateY(6px);\ntransition:opacity var(--pu-exit) var(--pu-ei),transform var(--pu-exit) var(--pu-ei)}\n.menu.show{opacity:1;transform:none;pointer-events:auto;transition:opacity var(--pu-enter) var(--pu-eo),transform var(--pu-move) var(--pu-eo)}\n/* Menu rows: one line each; the explanation is a tooltip beside the menu that eases in after a moment. */\n.mi{position:relative;display:flex;gap:10px;align-items:center;width:100%;min-height:34px;text-align:left;padding:6px 10px;border-radius:8px;transition:background-color .2s var(--pu-eo)}\n.mi:hover,.mi:focus-visible{background:var(--pu-soft);outline:none}\n.mi svg{color:var(--pu-muted);flex:none}\n.mi small{display:block;color:var(--pu-faint);font-size:12px}\n.lb{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n.ma{flex:none;display:grid;margin:-2px 0}\n.ma .av{width:20px;height:20px;font-size:11px}\n.mi .av svg{color:inherit}\n.sep{height:1px;margin:4px 10px;background:var(--pu-rule)}\n.tt{position:absolute;right:calc(100% + 14px);top:50%;translate:0 -50%;width:max-content;max-width:220px;padding:4px 9px;border-radius:8px;font-size:12px;line-height:1.4;\ncolor:var(--pu-muted);background:var(--pu-surface);border:1px solid var(--pu-line);box-shadow:var(--pu-shadow);pointer-events:none;opacity:0;transform:translateX(3px);\ntransition:opacity var(--pu-exit) var(--pu-ei),transform var(--pu-exit) var(--pu-ei)}\n.mi:hover>.tt,.mi:focus-visible>.tt{opacity:1;transform:none;transition:opacity var(--pu-enter) var(--pu-eo) .5s,transform var(--pu-enter) var(--pu-eo) .5s}\n@media (max-width:600px){.tt{right:8px;top:auto;bottom:100%;translate:none;transform:translateY(3px)}}\n/* Switches: a track and a knob that slides (cross-fades with reduced motion). */\n.sw{position:relative;flex:none;width:26px;height:16px;border-radius:8px;background:var(--pu-line);transition:background-color var(--pu-move) var(--pu-eio)}\n.sw::before,.sw::after{content:\"\";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);\ntransition:transform var(--pu-move) var(--pu-eio),opacity var(--pu-move) var(--pu-eio)}\n.sw::before{opacity:0;transform:translateX(10px)}\n[aria-checked=true]>.sw{background:var(--pu-accent)}\n[aria-checked=true]>.sw::after{transform:translateX(10px)}\n/* All comments: a full-height panel on the right that slides in (fades, with reduced motion). */\n.all{position:fixed;top:0;right:0;bottom:0;width:var(--pu-panel);display:flex;flex-direction:column;border-width:0 0 0 1px;opacity:0;transform:translateX(100%);\ntransition:transform var(--pu-exit) var(--pu-ei),opacity var(--pu-exit) var(--pu-ei)}\n.all.show{opacity:1;transform:none;pointer-events:auto;transition:transform var(--pu-move) var(--pu-eo),opacity var(--pu-enter) var(--pu-eo)}\n.all.full{width:100%}\n.hd{display:flex;align-items:center;gap:8px;padding:12px 10px 8px 16px;font-weight:600}\n.pn{font-weight:400;color:var(--pu-faint)}\n.hs{margin-left:auto;display:flex;align-items:center;gap:6px;padding:3px 4px 3px 6px;border-radius:6px;font-size:12px;font-weight:400;color:var(--pu-muted);\ntransition:background-color .2s var(--pu-eo)}\n.hs:hover,.hs:focus-visible{background:var(--pu-hover);outline:none}\n.list{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:4px}\n.all .mi{align-items:flex-start}\n.all .mi>.av{flex:none}\n.all .mi>span:last-child{flex:1;min-width:0}\n.all .mi small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n.all .mi .av svg{margin:0}\n.all .mi.done{opacity:.6}\n.layer.listing .col{opacity:0;transition:opacity var(--pu-exit) var(--pu-ei)}\n.sec{padding:8px 10px 2px;font-size:12px;color:var(--pu-faint)}\n.toast{position:fixed;left:50%;bottom:28px;border-radius:10px;padding:8px 14px;font-size:13px;opacity:0;transform:translate(-50%,6px);\ntransition:opacity .3s var(--pu-eo),transform .36s var(--pu-eo)}\n.toast.show{opacity:1;transform:translate(-50%,0)}\n\n@media (prefers-reduced-motion: reduce){\n.bub,.bub.in,.bub.in:hover,.bub.on,.tip,.pop,.selbar,.menu,.all,.ttip,.tt,.toast{transform:none!important}\n.sw::after{transform:none!important;transition-property:opacity}\n[aria-checked=true]>.sw::after{opacity:0}\n[aria-checked=true]>.sw::before{opacity:1}\n.th{transition-property:opacity,box-shadow}\n.tip.show{transition-property:opacity}\n.pick,.pick.show{transition:opacity .16s ease-in-out}\n.all,.all.show{transition-property:opacity}\n.namebar,.namebar.show{transform:none!important;transition:opacity .16s ease-in-out}\n.av,.nf{transform:none!important}\n@keyframes pu-pulse{0%{opacity:0}35%{opacity:.85}100%{opacity:0}}\n}\n";

package/dist/types/ui/theme.d.ts

@@ -0,0 +1,19 @@
+export interface Theme {
+    font: string;
+    accent: string;
+    dark: boolean;
+}
+export declare function parseRgb(value: string): {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+} | null;
+export declare function luminance(c: {
+    r: number;
+    g: number;
+    b: number;
+}): number;
+/** The page's font, accent colour and light/dark appearance, so Pipeup reads as part of the page. */
+export declare function readTheme(root: Element): Theme;
+export declare function applyTheme(layer: HTMLElement, theme: Theme): void;

package/dist/types/ui/thread-view.d.ts

@@ -0,0 +1,29 @@
+import type { Thread } from "../model/types";
+export interface ThreadActions {
+    reply(parentId: string, text: string): Promise<void>;
+    resolve(threadId: string): Promise<void>;
+    reopen(threadId: string): Promise<void>;
+    copy(threadId: string): void;
+    /** Esc in the reply line: closes the thread. */
+    close(): void;
+}
+export interface ThreadViewOptions {
+    variant: "column" | "popover";
+    quote?: string | null;
+    /** Snapshot of content that is no longer on the page. */
+    lost?: string | null;
+    now?: () => number;
+}
+export interface ThreadView {
+    readonly element: HTMLElement;
+    /** Shows a newer copy of the thread. The reply line is kept, so what's being typed in it (and focus) survives. */
+    update(t: Thread, o?: {
+        quote?: string | null;
+        lost?: string | null;
+    }): void;
+}
+/**
+ * One thread: the words first; who, when and actions ease open beneath them on hover. Replies sit one level
+ * in beneath the comment, oldest first, and the thread ends with its reply line at the same indent.
+ */
+export declare function threadView(first: Thread, actions: ThreadActions, options: ThreadViewOptions): ThreadView;

package/dist/types/util/encoding.d.ts

@@ -0,0 +1,11 @@
+/** Unpadded, URL-safe base64. */
+export declare function toB64u(bytes: Uint8Array): string;
+export declare function fromB64u(text: string): Uint8Array<ArrayBuffer>;
+/** A random, URL-safe identifier. 16 bytes → 22 characters. */
+export declare function randomId(bytes?: number): string;
+export declare function utf8(text: string): Uint8Array<ArrayBuffer>;
+/** JSON with sorted keys and undefined fields dropped, so the same value always signs the same way. */
+export declare function canonicalJson(value: unknown): string;
+export declare function normalizeText(text: string): string;
+/** FNV-1a over whitespace-normalised text. Detects change, not tampering. */
+export declare function fingerprint(text: string): string;

package/package.json

@@ -1,7 +1,75 @@
 {
   "name": "pipeup",
-  "version": "0.0.1",
-  "description": "Comments, feedback and live presence for shared HTML documents and slide decks. Coming soon.",
-  "license": "UNLICENSED",
-  "files": ["README.md"]
+  "version": "0.3.0",
+  "description": "Comments and feedback right on any HTML page: documents, slide decks and whole sites.",
+  "keywords": [
+    "comments",
+    "feedback",
+    "review",
+    "annotations",
+    "html",
+    "ai",
+    "agents"
+  ],
+  "license": "MIT",
+  "author": "Pipeup contributors",
+  "homepage": "https://pipeup-ai.github.io/pipeup/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pipeup-ai/pipeup.git",
+    "directory": "libs/ts/pipeup"
+  },
+  "bugs": {
+    "url": "https://github.com/pipeup-ai/pipeup/issues"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/pipeup.esm.js",
+  "module": "./dist/pipeup.esm.js",
+  "types": "./dist/types/index.d.ts",
+  "jsdelivr": "dist/pipeup.min.js",
+  "unpkg": "dist/pipeup.min.js",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/pipeup.esm.js"
+    },
+    "./core": {
+      "types": "./dist/types/core.d.ts",
+      "import": "./dist/pipeup.core.js"
+    }
+  },
+  "files": [
+    "dist/*.js",
+    "dist/types",
+    "README.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=20"
+  },
+  "scripts": {
+    "build": "node scripts/build.mjs && tsc -p tsconfig.build.json",
+    "test": "vitest run",
+    "lint": "eslint src test e2e && prettier --check src test e2e",
+    "format": "prettier --write src test e2e",
+    "check": "tsc --noEmit && tsc -p tsconfig.e2e.json --noEmit && npm run lint && vitest run && npm run build && node scripts/size.mjs && npm run e2e",
+    "e2e": "playwright test"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.55.0",
+    "@types/node": "^20.19.43",
+    "esbuild": "^0.25.0",
+    "eslint": "^9.0.0",
+    "fake-indexeddb": "^6.0.0",
+    "jsdom": "^26.0.0",
+    "prettier": "^3.0.0",
+    "typescript": "^5.9.0",
+    "typescript-eslint": "^8.0.0",
+    "vitest": "^3.0.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  }
 }