@fieldia/chatter 0.8.0

package/src/lib/source.d.ts

@@ -0,0 +1,114 @@
+/**
+ * How the chatter reaches the server: an object the app writes for its own
+ * backend, as it writes a data source. Reading and posting messages are all a
+ * chatter needs; each other method adds a part (uploads, reactions, mentions,
+ * activities, followers), and a part whose method is missing is not shown.
+ */
+export type ChatterId = string | number;
+/** The record the conversation is about. */
+export interface RecordRef {
+    model: string;
+    id: ChatterId;
+}
+export interface Person {
+    id: ChatterId;
+    name: string;
+    /** An image address; without one, the person's initials stand in. */
+    avatar?: string | null;
+}
+export interface Attachment {
+    id: ChatterId;
+    name: string;
+    /** Its media type, such as `image/png`: an image gets a preview. */
+    type: string;
+    size: number;
+    /** Where to open or download it. */
+    url?: string | null;
+}
+export interface Reaction {
+    emoji: string;
+    count: number;
+    /** Whether the person using the chatter is among those who reacted. */
+    mine: boolean;
+}
+/** A field's change, as a record's history keeps it. */
+export interface TrackedChange {
+    field: string;
+    label: string;
+    from: string | null;
+    to: string | null;
+}
+export interface ChatterMessage {
+    id: ChatterId;
+    /** A message the record's followers get, a note for the team only, or an event such as a tracked change. */
+    kind: 'message' | 'note' | 'event';
+    author: Person | null;
+    /** When it was posted, as an ISO date and time. */
+    date: string;
+    /** HTML. The chatter cleans it before it shows it. */
+    body: string;
+    tracking?: TrackedChange[];
+    attachments?: Attachment[];
+    reactions?: Reaction[];
+    /** The message this one answers. */
+    parentId?: ChatterId | null;
+    /** The people it @mentions. */
+    mentions?: Person[];
+}
+export interface NewMessage {
+    kind: 'message' | 'note';
+    /** HTML made from what was typed, every character escaped. */
+    body: string;
+    attachments?: Attachment[];
+    parentId?: ChatterId | null;
+    /** The people @mentioned. */
+    mentions?: Person[];
+}
+export interface ActivityType {
+    id: ChatterId;
+    name: string;
+    /** An icon by name, one of Fieldia's own or the app's. */
+    icon?: string;
+    /** Days from today an activity of this type is due, unless a date is chosen. */
+    daysUntilDue?: number;
+}
+export interface Activity {
+    id: ChatterId;
+    type: ActivityType;
+    summary?: string | null;
+    note?: string | null;
+    /** The day it is due: `YYYY-MM-DD`. */
+    due: string;
+    assignee: Person;
+}
+export interface NewActivity {
+    typeId: ChatterId;
+    summary?: string;
+    note?: string;
+    due: string;
+    assigneeId: ChatterId;
+}
+export interface Follower {
+    id: ChatterId;
+    person: Person;
+}
+export interface ChatterSource {
+    /** The record's messages, notes and events, newest first. */
+    messages(record: RecordRef): Promise<ChatterMessage[]>;
+    post(record: RecordRef, message: NewMessage): Promise<ChatterMessage>;
+    /** Store a file, to send with a message. */
+    upload?(record: RecordRef, file: File): Promise<Attachment>;
+    /** Add the person's reaction, or take it away when it is there already. Returns the message's reactions. */
+    react?(record: RecordRef, messageId: ChatterId, emoji: string): Promise<Reaction[]>;
+    /** People to @mention, to give an activity to, or to add as followers. */
+    people?(query: string): Promise<Person[]>;
+    activityTypes?(): Promise<ActivityType[]>;
+    activities?(record: RecordRef): Promise<Activity[]>;
+    schedule?(record: RecordRef, activity: NewActivity): Promise<Activity>;
+    /** Done, with what came of it: the backend usually posts it as a message. */
+    markDone?(record: RecordRef, activityId: ChatterId, feedback?: string): Promise<void>;
+    cancel?(record: RecordRef, activityId: ChatterId): Promise<void>;
+    followers?(record: RecordRef): Promise<Follower[]>;
+    follow?(record: RecordRef, personId: ChatterId): Promise<Follower>;
+    unfollow?(record: RecordRef, followerId: ChatterId): Promise<void>;
+}

package/src/lib/source.js

@@ -0,0 +1,9 @@
+"use strict";
+/**
+ * How the chatter reaches the server: an object the app writes for its own
+ * backend, as it writes a data source. Reading and posting messages are all a
+ * chatter needs; each other method adds a part (uploads, reactions, mentions,
+ * activities, followers), and a part whose method is missing is not shown.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=source.js.map

package/src/lib/source.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"source.js","sourceRoot":"","sources":["../../../../../libs/chatter/src/lib/source.ts"],"names":[],"mappings":";AAAA;;;;;GAKG"}

package/src/lib/source.mjs

@@ -0,0 +1,8 @@
+/**
+ * How the chatter reaches the server: an object the app writes for its own
+ * backend, as it writes a data source. Reading and posting messages are all a
+ * chatter needs; each other method adds a part (uploads, reactions, mentions,
+ * activities, followers), and a part whose method is missing is not shown.
+ */
+export {};
+//# sourceMappingURL=source.mjs.map

package/src/lib/source.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"source.mjs","sourceRoot":"","sources":["../../../../../libs/chatter/src/lib/source.ts"],"names":[],"mappings":"AAAA;;;;;GAKG"}

package/src/lib/styles.d.mts

@@ -0,0 +1,4 @@
+/** The chatter's look, on the same tokens as the form beside it. */
+export declare const CHATTER_STYLES = "\n.fd-chatter { display: grid; gap: 14px; font-family: var(--fd-font); color: var(--fd-text); font-size: 14px; min-width: 0; }\n.fd-chatter [hidden] { display: none !important; }\n.fd-chatter-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }\n.fd-chatter-bar .fd-spacer { flex: 1; }\n.fd-chatter-waiting, .fd-chatter-empty { margin: 0; color: var(--fd-muted); }\n.fd-composer { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--fd-border); border-radius: var(--fd-radius); background: var(--fd-surface); }\n.fd-composer textarea { resize: vertical; min-height: 64px; font: inherit; }\n.fd-composer-note { background: var(--fd-warning-soft); }\n.fd-composer-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }\n.fd-chatter-problem { margin: 0; color: var(--fd-error); font-size: 13px; }\n.fd-chatter-messages { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }\n.fd-message { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; padding: 8px; border-radius: var(--fd-radius); }\n.fd-message-note { background: var(--fd-warning-soft); }\n.fd-message-event { color: var(--fd-muted); font-size: 13px; }\n.fd-avatar-image, .fd-avatar-initials { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }\n.fd-avatar-initials { display: grid; place-items: center; background: var(--fd-accent-soft); color: var(--fd-accent); font-weight: 650; font-size: 13px; }\n.fd-message-content { display: grid; gap: 4px; min-width: 0; }\n.fd-message-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }\n.fd-message-author { font-weight: 650; }\n.fd-message-head time { color: var(--fd-muted); font-size: 12.5px; }\n.fd-message-kind { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fd-warning); }\n.fd-message-body { overflow-wrap: anywhere; line-height: 1.5; }\n.fd-message-body p { margin: 0 0 6px; }\n.fd-message-body p:last-child { margin-bottom: 0; }\n.fd-message-body img { max-width: 100%; height: auto; }\n.fd-tracking { margin: 0; padding-inline-start: 18px; color: var(--fd-text); }\n.fd-composer-actions .fd-spacer { flex: 1; }\n.fd-attach .fd-icon { width: 1.1em; height: 1.1em; margin-inline-end: 0.35em; vertical-align: -0.2em; }\n.fd-attachments { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }\n.fd-attachment { position: relative; display: flex; align-items: center; gap: 4px; }\n.fd-attachment-image img { display: block; width: 120px; height: 90px; object-fit: cover; border-radius: var(--fd-radius); border: 1px solid var(--fd-border); }\n.fd-attachment-file {\n  display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--fd-border); border-radius: var(--fd-radius);\n  background: var(--fd-surface); color: var(--fd-text); text-decoration: none; max-width: 240px;\n}\na.fd-attachment-file:hover { border-color: var(--fd-accent); }\n.fd-attachment-file .fd-icon { width: 20px; height: 20px; color: var(--fd-muted); flex: none; }\n.fd-attachment-words { display: grid; min-width: 0; }\n.fd-attachment-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }\n.fd-attachment-size { color: var(--fd-muted); font-size: 12px; }\n.fd-attachment-remove { border: none; background: none; cursor: pointer; color: var(--fd-muted); font-size: 16px; line-height: 1; padding: 2px 4px; border-radius: 4px; }\n.fd-attachment-remove:hover { color: var(--fd-text); background: var(--fd-page); }\n.fd-replying, .fd-message-parent { margin: 0; color: var(--fd-muted); font-size: 12.5px; }\n.fd-message-parent::before, .fd-replying::before { content: \"\u21A9 \"; }\n.fd-message-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }\n.fd-reactions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; position: relative; }\n.fd-reaction, .fd-reaction-add, .fd-message-reply, .fd-reaction-picker button {\n  font: inherit; font-size: 13px; line-height: 1; padding: 4px 8px; border-radius: 999px; cursor: pointer;\n  border: 1px solid var(--fd-border); background: var(--fd-surface); color: var(--fd-muted);\n}\n.fd-reaction[aria-pressed=\"true\"] { border-color: var(--fd-accent); background: var(--fd-accent-soft); color: var(--fd-text); }\n.fd-reaction-add, .fd-message-reply { opacity: 0.75; }\n.fd-message:hover .fd-reaction-add, .fd-message:hover .fd-message-reply, .fd-reaction-add:focus-visible, .fd-message-reply:focus-visible { opacity: 1; }\n.fd-reaction-picker { display: flex; gap: 2px; padding: 4px; border: 1px solid var(--fd-border); border-radius: 999px; background: var(--fd-surface); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }\n.fd-reaction-picker button { border: none; padding: 4px 6px; font-size: 16px; }\n.fd-reaction-picker button:hover { background: var(--fd-page); }\n.fd-mentions { list-style: none; margin: 0; padding: 4px 0; border: 1px solid var(--fd-border); border-radius: var(--fd-radius); background: var(--fd-surface); max-width: 280px; box-shadow: 0 6px 18px rgba(0,0,0,0.1); }\n.fd-mentions [role=option] { padding: 6px 12px; cursor: pointer; }\n.fd-mentions [role=option].fd-active, .fd-mentions [role=option]:hover { background: var(--fd-accent-soft); }\n.fd-mentions .fd-empty { padding: 6px 12px; color: var(--fd-muted); }\n.fd-activities { display: grid; gap: 8px; }\n.fd-activity-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }\n.fd-activity { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 2px 10px; align-items: start; padding: 8px 10px; border: 1px solid var(--fd-border); border-radius: var(--fd-radius); background: var(--fd-surface); }\n.fd-activity-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; background: var(--fd-success); }\n.fd-activity[data-when=\"overdue\"] .fd-activity-icon { background: var(--fd-error); }\n.fd-activity[data-when=\"today\"] .fd-activity-icon { background: #d97706; }\n.fd-activity-icon .fd-icon { width: 16px; height: 16px; }\n.fd-activity-content { display: grid; min-width: 0; }\n.fd-activity-summary { font-weight: 600; }\n.fd-activity-meta { color: var(--fd-muted); font-size: 12.5px; }\n.fd-activity[data-when=\"overdue\"] .fd-activity-due { color: var(--fd-error); font-weight: 600; }\n.fd-activity[data-when=\"today\"] .fd-activity-due { color: #b45309; font-weight: 600; }\n/* Under the summary, where a narrow side panel has room for them. */\n.fd-activity-actions { grid-column: 2; display: flex; gap: 2px 12px; flex-wrap: wrap; }\n.fd-activity-actions .fd-button-link { padding: 0; min-height: 0; font-size: 13px; }\n.fd-activity-finish { grid-column: 2; display: grid; gap: 6px; margin-block-start: 4px; }\n.fd-activity-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; padding: 12px; border: 1px solid var(--fd-border); border-radius: var(--fd-radius); background: var(--fd-surface); }\n.fd-activity-form .fd-composer-actions { grid-column: 1 / -1; }\n.fd-activity-field { display: grid; gap: 4px; font-size: 13px; color: var(--fd-muted); }\n.fd-followers-toggle { display: inline-flex; align-items: center; gap: 6px; }\n.fd-followers-toggle .fd-icon { width: 1.1em; height: 1.1em; }\n.fd-followers { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--fd-border); border-radius: var(--fd-radius); background: var(--fd-surface); }\n.fd-follower-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }\n.fd-follower { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; }\n.fd-followers-none { margin: 0; color: var(--fd-muted); }\n.fd-followers-add { display: grid; gap: 6px; border-block-start: 1px solid var(--fd-border); padding-block-start: 8px; }\n.fd-followers-add-title { font-size: 12.5px; color: var(--fd-muted); }\n.fd-follower-candidates { list-style: none; margin: 0; padding: 0; }\n.fd-follower-candidates [role=option] { padding: 6px 8px; border-radius: 4px; cursor: pointer; }\n.fd-follower-candidates [role=option]:hover { background: var(--fd-accent-soft); }\n.fd-follower-candidates .fd-empty { padding: 6px 8px; color: var(--fd-muted); }\n";
+/** Puts the chatter's look in the document once. */
+export declare function installChatterStyles(doc: Document): void;

package/src/lib/styles.d.ts

@@ -0,0 +1,4 @@
+/** The chatter's look, on the same tokens as the form beside it. */
+export declare const CHATTER_STYLES = "\n.fd-chatter { display: grid; gap: 14px; font-family: var(--fd-font); color: var(--fd-text); font-size: 14px; min-width: 0; }\n.fd-chatter [hidden] { display: none !important; }\n.fd-chatter-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }\n.fd-chatter-bar .fd-spacer { flex: 1; }\n.fd-chatter-waiting, .fd-chatter-empty { margin: 0; color: var(--fd-muted); }\n.fd-composer { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--fd-border); border-radius: var(--fd-radius); background: var(--fd-surface); }\n.fd-composer textarea { resize: vertical; min-height: 64px; font: inherit; }\n.fd-composer-note { background: var(--fd-warning-soft); }\n.fd-composer-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }\n.fd-chatter-problem { margin: 0; color: var(--fd-error); font-size: 13px; }\n.fd-chatter-messages { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }\n.fd-message { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; padding: 8px; border-radius: var(--fd-radius); }\n.fd-message-note { background: var(--fd-warning-soft); }\n.fd-message-event { color: var(--fd-muted); font-size: 13px; }\n.fd-avatar-image, .fd-avatar-initials { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }\n.fd-avatar-initials { display: grid; place-items: center; background: var(--fd-accent-soft); color: var(--fd-accent); font-weight: 650; font-size: 13px; }\n.fd-message-content { display: grid; gap: 4px; min-width: 0; }\n.fd-message-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }\n.fd-message-author { font-weight: 650; }\n.fd-message-head time { color: var(--fd-muted); font-size: 12.5px; }\n.fd-message-kind { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fd-warning); }\n.fd-message-body { overflow-wrap: anywhere; line-height: 1.5; }\n.fd-message-body p { margin: 0 0 6px; }\n.fd-message-body p:last-child { margin-bottom: 0; }\n.fd-message-body img { max-width: 100%; height: auto; }\n.fd-tracking { margin: 0; padding-inline-start: 18px; color: var(--fd-text); }\n.fd-composer-actions .fd-spacer { flex: 1; }\n.fd-attach .fd-icon { width: 1.1em; height: 1.1em; margin-inline-end: 0.35em; vertical-align: -0.2em; }\n.fd-attachments { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }\n.fd-attachment { position: relative; display: flex; align-items: center; gap: 4px; }\n.fd-attachment-image img { display: block; width: 120px; height: 90px; object-fit: cover; border-radius: var(--fd-radius); border: 1px solid var(--fd-border); }\n.fd-attachment-file {\n  display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--fd-border); border-radius: var(--fd-radius);\n  background: var(--fd-surface); color: var(--fd-text); text-decoration: none; max-width: 240px;\n}\na.fd-attachment-file:hover { border-color: var(--fd-accent); }\n.fd-attachment-file .fd-icon { width: 20px; height: 20px; color: var(--fd-muted); flex: none; }\n.fd-attachment-words { display: grid; min-width: 0; }\n.fd-attachment-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }\n.fd-attachment-size { color: var(--fd-muted); font-size: 12px; }\n.fd-attachment-remove { border: none; background: none; cursor: pointer; color: var(--fd-muted); font-size: 16px; line-height: 1; padding: 2px 4px; border-radius: 4px; }\n.fd-attachment-remove:hover { color: var(--fd-text); background: var(--fd-page); }\n.fd-replying, .fd-message-parent { margin: 0; color: var(--fd-muted); font-size: 12.5px; }\n.fd-message-parent::before, .fd-replying::before { content: \"\u21A9 \"; }\n.fd-message-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }\n.fd-reactions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; position: relative; }\n.fd-reaction, .fd-reaction-add, .fd-message-reply, .fd-reaction-picker button {\n  font: inherit; font-size: 13px; line-height: 1; padding: 4px 8px; border-radius: 999px; cursor: pointer;\n  border: 1px solid var(--fd-border); background: var(--fd-surface); color: var(--fd-muted);\n}\n.fd-reaction[aria-pressed=\"true\"] { border-color: var(--fd-accent); background: var(--fd-accent-soft); color: var(--fd-text); }\n.fd-reaction-add, .fd-message-reply { opacity: 0.75; }\n.fd-message:hover .fd-reaction-add, .fd-message:hover .fd-message-reply, .fd-reaction-add:focus-visible, .fd-message-reply:focus-visible { opacity: 1; }\n.fd-reaction-picker { display: flex; gap: 2px; padding: 4px; border: 1px solid var(--fd-border); border-radius: 999px; background: var(--fd-surface); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }\n.fd-reaction-picker button { border: none; padding: 4px 6px; font-size: 16px; }\n.fd-reaction-picker button:hover { background: var(--fd-page); }\n.fd-mentions { list-style: none; margin: 0; padding: 4px 0; border: 1px solid var(--fd-border); border-radius: var(--fd-radius); background: var(--fd-surface); max-width: 280px; box-shadow: 0 6px 18px rgba(0,0,0,0.1); }\n.fd-mentions [role=option] { padding: 6px 12px; cursor: pointer; }\n.fd-mentions [role=option].fd-active, .fd-mentions [role=option]:hover { background: var(--fd-accent-soft); }\n.fd-mentions .fd-empty { padding: 6px 12px; color: var(--fd-muted); }\n.fd-activities { display: grid; gap: 8px; }\n.fd-activity-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }\n.fd-activity { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 2px 10px; align-items: start; padding: 8px 10px; border: 1px solid var(--fd-border); border-radius: var(--fd-radius); background: var(--fd-surface); }\n.fd-activity-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; background: var(--fd-success); }\n.fd-activity[data-when=\"overdue\"] .fd-activity-icon { background: var(--fd-error); }\n.fd-activity[data-when=\"today\"] .fd-activity-icon { background: #d97706; }\n.fd-activity-icon .fd-icon { width: 16px; height: 16px; }\n.fd-activity-content { display: grid; min-width: 0; }\n.fd-activity-summary { font-weight: 600; }\n.fd-activity-meta { color: var(--fd-muted); font-size: 12.5px; }\n.fd-activity[data-when=\"overdue\"] .fd-activity-due { color: var(--fd-error); font-weight: 600; }\n.fd-activity[data-when=\"today\"] .fd-activity-due { color: #b45309; font-weight: 600; }\n/* Under the summary, where a narrow side panel has room for them. */\n.fd-activity-actions { grid-column: 2; display: flex; gap: 2px 12px; flex-wrap: wrap; }\n.fd-activity-actions .fd-button-link { padding: 0; min-height: 0; font-size: 13px; }\n.fd-activity-finish { grid-column: 2; display: grid; gap: 6px; margin-block-start: 4px; }\n.fd-activity-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; padding: 12px; border: 1px solid var(--fd-border); border-radius: var(--fd-radius); background: var(--fd-surface); }\n.fd-activity-form .fd-composer-actions { grid-column: 1 / -1; }\n.fd-activity-field { display: grid; gap: 4px; font-size: 13px; color: var(--fd-muted); }\n.fd-followers-toggle { display: inline-flex; align-items: center; gap: 6px; }\n.fd-followers-toggle .fd-icon { width: 1.1em; height: 1.1em; }\n.fd-followers { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--fd-border); border-radius: var(--fd-radius); background: var(--fd-surface); }\n.fd-follower-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }\n.fd-follower { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; }\n.fd-followers-none { margin: 0; color: var(--fd-muted); }\n.fd-followers-add { display: grid; gap: 6px; border-block-start: 1px solid var(--fd-border); padding-block-start: 8px; }\n.fd-followers-add-title { font-size: 12.5px; color: var(--fd-muted); }\n.fd-follower-candidates { list-style: none; margin: 0; padding: 0; }\n.fd-follower-candidates [role=option] { padding: 6px 8px; border-radius: 4px; cursor: pointer; }\n.fd-follower-candidates [role=option]:hover { background: var(--fd-accent-soft); }\n.fd-follower-candidates .fd-empty { padding: 6px 8px; color: var(--fd-muted); }\n";
+/** Puts the chatter's look in the document once. */
+export declare function installChatterStyles(doc: Document): void;

package/src/lib/styles.js

@@ -0,0 +1,108 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CHATTER_STYLES = void 0;
+exports.installChatterStyles = installChatterStyles;
+/** The chatter's look, on the same tokens as the form beside it. */
+exports.CHATTER_STYLES = `
+.fd-chatter { display: grid; gap: 14px; font-family: var(--fd-font); color: var(--fd-text); font-size: 14px; min-width: 0; }
+.fd-chatter [hidden] { display: none !important; }
+.fd-chatter-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
+.fd-chatter-bar .fd-spacer { flex: 1; }
+.fd-chatter-waiting, .fd-chatter-empty { margin: 0; color: var(--fd-muted); }
+.fd-composer { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--fd-border); border-radius: var(--fd-radius); background: var(--fd-surface); }
+.fd-composer textarea { resize: vertical; min-height: 64px; font: inherit; }
+.fd-composer-note { background: var(--fd-warning-soft); }
+.fd-composer-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
+.fd-chatter-problem { margin: 0; color: var(--fd-error); font-size: 13px; }
+.fd-chatter-messages { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
+.fd-message { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; padding: 8px; border-radius: var(--fd-radius); }
+.fd-message-note { background: var(--fd-warning-soft); }
+.fd-message-event { color: var(--fd-muted); font-size: 13px; }
+.fd-avatar-image, .fd-avatar-initials { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
+.fd-avatar-initials { display: grid; place-items: center; background: var(--fd-accent-soft); color: var(--fd-accent); font-weight: 650; font-size: 13px; }
+.fd-message-content { display: grid; gap: 4px; min-width: 0; }
+.fd-message-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
+.fd-message-author { font-weight: 650; }
+.fd-message-head time { color: var(--fd-muted); font-size: 12.5px; }
+.fd-message-kind { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fd-warning); }
+.fd-message-body { overflow-wrap: anywhere; line-height: 1.5; }
+.fd-message-body p { margin: 0 0 6px; }
+.fd-message-body p:last-child { margin-bottom: 0; }
+.fd-message-body img { max-width: 100%; height: auto; }
+.fd-tracking { margin: 0; padding-inline-start: 18px; color: var(--fd-text); }
+.fd-composer-actions .fd-spacer { flex: 1; }
+.fd-attach .fd-icon { width: 1.1em; height: 1.1em; margin-inline-end: 0.35em; vertical-align: -0.2em; }
+.fd-attachments { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
+.fd-attachment { position: relative; display: flex; align-items: center; gap: 4px; }
+.fd-attachment-image img { display: block; width: 120px; height: 90px; object-fit: cover; border-radius: var(--fd-radius); border: 1px solid var(--fd-border); }
+.fd-attachment-file {
+  display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--fd-border); border-radius: var(--fd-radius);
+  background: var(--fd-surface); color: var(--fd-text); text-decoration: none; max-width: 240px;
+}
+a.fd-attachment-file:hover { border-color: var(--fd-accent); }
+.fd-attachment-file .fd-icon { width: 20px; height: 20px; color: var(--fd-muted); flex: none; }
+.fd-attachment-words { display: grid; min-width: 0; }
+.fd-attachment-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
+.fd-attachment-size { color: var(--fd-muted); font-size: 12px; }
+.fd-attachment-remove { border: none; background: none; cursor: pointer; color: var(--fd-muted); font-size: 16px; line-height: 1; padding: 2px 4px; border-radius: 4px; }
+.fd-attachment-remove:hover { color: var(--fd-text); background: var(--fd-page); }
+.fd-replying, .fd-message-parent { margin: 0; color: var(--fd-muted); font-size: 12.5px; }
+.fd-message-parent::before, .fd-replying::before { content: "↩ "; }
+.fd-message-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
+.fd-reactions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; position: relative; }
+.fd-reaction, .fd-reaction-add, .fd-message-reply, .fd-reaction-picker button {
+  font: inherit; font-size: 13px; line-height: 1; padding: 4px 8px; border-radius: 999px; cursor: pointer;
+  border: 1px solid var(--fd-border); background: var(--fd-surface); color: var(--fd-muted);
+}
+.fd-reaction[aria-pressed="true"] { border-color: var(--fd-accent); background: var(--fd-accent-soft); color: var(--fd-text); }
+.fd-reaction-add, .fd-message-reply { opacity: 0.75; }
+.fd-message:hover .fd-reaction-add, .fd-message:hover .fd-message-reply, .fd-reaction-add:focus-visible, .fd-message-reply:focus-visible { opacity: 1; }
+.fd-reaction-picker { display: flex; gap: 2px; padding: 4px; border: 1px solid var(--fd-border); border-radius: 999px; background: var(--fd-surface); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
+.fd-reaction-picker button { border: none; padding: 4px 6px; font-size: 16px; }
+.fd-reaction-picker button:hover { background: var(--fd-page); }
+.fd-mentions { list-style: none; margin: 0; padding: 4px 0; border: 1px solid var(--fd-border); border-radius: var(--fd-radius); background: var(--fd-surface); max-width: 280px; box-shadow: 0 6px 18px rgba(0,0,0,0.1); }
+.fd-mentions [role=option] { padding: 6px 12px; cursor: pointer; }
+.fd-mentions [role=option].fd-active, .fd-mentions [role=option]:hover { background: var(--fd-accent-soft); }
+.fd-mentions .fd-empty { padding: 6px 12px; color: var(--fd-muted); }
+.fd-activities { display: grid; gap: 8px; }
+.fd-activity-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
+.fd-activity { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 2px 10px; align-items: start; padding: 8px 10px; border: 1px solid var(--fd-border); border-radius: var(--fd-radius); background: var(--fd-surface); }
+.fd-activity-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; background: var(--fd-success); }
+.fd-activity[data-when="overdue"] .fd-activity-icon { background: var(--fd-error); }
+.fd-activity[data-when="today"] .fd-activity-icon { background: #d97706; }
+.fd-activity-icon .fd-icon { width: 16px; height: 16px; }
+.fd-activity-content { display: grid; min-width: 0; }
+.fd-activity-summary { font-weight: 600; }
+.fd-activity-meta { color: var(--fd-muted); font-size: 12.5px; }
+.fd-activity[data-when="overdue"] .fd-activity-due { color: var(--fd-error); font-weight: 600; }
+.fd-activity[data-when="today"] .fd-activity-due { color: #b45309; font-weight: 600; }
+/* Under the summary, where a narrow side panel has room for them. */
+.fd-activity-actions { grid-column: 2; display: flex; gap: 2px 12px; flex-wrap: wrap; }
+.fd-activity-actions .fd-button-link { padding: 0; min-height: 0; font-size: 13px; }
+.fd-activity-finish { grid-column: 2; display: grid; gap: 6px; margin-block-start: 4px; }
+.fd-activity-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; padding: 12px; border: 1px solid var(--fd-border); border-radius: var(--fd-radius); background: var(--fd-surface); }
+.fd-activity-form .fd-composer-actions { grid-column: 1 / -1; }
+.fd-activity-field { display: grid; gap: 4px; font-size: 13px; color: var(--fd-muted); }
+.fd-followers-toggle { display: inline-flex; align-items: center; gap: 6px; }
+.fd-followers-toggle .fd-icon { width: 1.1em; height: 1.1em; }
+.fd-followers { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--fd-border); border-radius: var(--fd-radius); background: var(--fd-surface); }
+.fd-follower-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
+.fd-follower { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; }
+.fd-followers-none { margin: 0; color: var(--fd-muted); }
+.fd-followers-add { display: grid; gap: 6px; border-block-start: 1px solid var(--fd-border); padding-block-start: 8px; }
+.fd-followers-add-title { font-size: 12.5px; color: var(--fd-muted); }
+.fd-follower-candidates { list-style: none; margin: 0; padding: 0; }
+.fd-follower-candidates [role=option] { padding: 6px 8px; border-radius: 4px; cursor: pointer; }
+.fd-follower-candidates [role=option]:hover { background: var(--fd-accent-soft); }
+.fd-follower-candidates .fd-empty { padding: 6px 8px; color: var(--fd-muted); }
+`;
+/** Puts the chatter's look in the document once. */
+function installChatterStyles(doc) {
+    if (doc.getElementById('fd-chatter-styles'))
+        return;
+    const style = doc.createElement('style');
+    style.id = 'fd-chatter-styles';
+    style.textContent = exports.CHATTER_STYLES;
+    doc.head.append(style);
+}
+//# sourceMappingURL=styles.js.map

package/src/lib/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../libs/chatter/src/lib/styles.ts"],"names":[],"mappings":";;;AAgGA,oDAMC;AAtGD,oEAAoE;AACvD,QAAA,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4F7B,CAAC;AAEF,oDAAoD;AACpD,SAAgB,oBAAoB,CAAC,GAAa;IAChD,IAAI,GAAG,CAAC,cAAc,CAAC,mBAAmB,CAAC;QAAE,OAAO;IACpD,MAAM,KAAK,GAAG,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACzC,KAAK,CAAC,EAAE,GAAG,mBAAmB,CAAC;IAC/B,KAAK,CAAC,WAAW,GAAG,sBAAc,CAAC;IACnC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AACzB,CAAC"}

package/src/lib/styles.mjs

@@ -0,0 +1,104 @@
+/** The chatter's look, on the same tokens as the form beside it. */
+export const CHATTER_STYLES = `
+.fd-chatter { display: grid; gap: 14px; font-family: var(--fd-font); color: var(--fd-text); font-size: 14px; min-width: 0; }
+.fd-chatter [hidden] { display: none !important; }
+.fd-chatter-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
+.fd-chatter-bar .fd-spacer { flex: 1; }
+.fd-chatter-waiting, .fd-chatter-empty { margin: 0; color: var(--fd-muted); }
+.fd-composer { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--fd-border); border-radius: var(--fd-radius); background: var(--fd-surface); }
+.fd-composer textarea { resize: vertical; min-height: 64px; font: inherit; }
+.fd-composer-note { background: var(--fd-warning-soft); }
+.fd-composer-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
+.fd-chatter-problem { margin: 0; color: var(--fd-error); font-size: 13px; }
+.fd-chatter-messages { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
+.fd-message { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; padding: 8px; border-radius: var(--fd-radius); }
+.fd-message-note { background: var(--fd-warning-soft); }
+.fd-message-event { color: var(--fd-muted); font-size: 13px; }
+.fd-avatar-image, .fd-avatar-initials { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
+.fd-avatar-initials { display: grid; place-items: center; background: var(--fd-accent-soft); color: var(--fd-accent); font-weight: 650; font-size: 13px; }
+.fd-message-content { display: grid; gap: 4px; min-width: 0; }
+.fd-message-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
+.fd-message-author { font-weight: 650; }
+.fd-message-head time { color: var(--fd-muted); font-size: 12.5px; }
+.fd-message-kind { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fd-warning); }
+.fd-message-body { overflow-wrap: anywhere; line-height: 1.5; }
+.fd-message-body p { margin: 0 0 6px; }
+.fd-message-body p:last-child { margin-bottom: 0; }
+.fd-message-body img { max-width: 100%; height: auto; }
+.fd-tracking { margin: 0; padding-inline-start: 18px; color: var(--fd-text); }
+.fd-composer-actions .fd-spacer { flex: 1; }
+.fd-attach .fd-icon { width: 1.1em; height: 1.1em; margin-inline-end: 0.35em; vertical-align: -0.2em; }
+.fd-attachments { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
+.fd-attachment { position: relative; display: flex; align-items: center; gap: 4px; }
+.fd-attachment-image img { display: block; width: 120px; height: 90px; object-fit: cover; border-radius: var(--fd-radius); border: 1px solid var(--fd-border); }
+.fd-attachment-file {
+  display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--fd-border); border-radius: var(--fd-radius);
+  background: var(--fd-surface); color: var(--fd-text); text-decoration: none; max-width: 240px;
+}
+a.fd-attachment-file:hover { border-color: var(--fd-accent); }
+.fd-attachment-file .fd-icon { width: 20px; height: 20px; color: var(--fd-muted); flex: none; }
+.fd-attachment-words { display: grid; min-width: 0; }
+.fd-attachment-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
+.fd-attachment-size { color: var(--fd-muted); font-size: 12px; }
+.fd-attachment-remove { border: none; background: none; cursor: pointer; color: var(--fd-muted); font-size: 16px; line-height: 1; padding: 2px 4px; border-radius: 4px; }
+.fd-attachment-remove:hover { color: var(--fd-text); background: var(--fd-page); }
+.fd-replying, .fd-message-parent { margin: 0; color: var(--fd-muted); font-size: 12.5px; }
+.fd-message-parent::before, .fd-replying::before { content: "↩ "; }
+.fd-message-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
+.fd-reactions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; position: relative; }
+.fd-reaction, .fd-reaction-add, .fd-message-reply, .fd-reaction-picker button {
+  font: inherit; font-size: 13px; line-height: 1; padding: 4px 8px; border-radius: 999px; cursor: pointer;
+  border: 1px solid var(--fd-border); background: var(--fd-surface); color: var(--fd-muted);
+}
+.fd-reaction[aria-pressed="true"] { border-color: var(--fd-accent); background: var(--fd-accent-soft); color: var(--fd-text); }
+.fd-reaction-add, .fd-message-reply { opacity: 0.75; }
+.fd-message:hover .fd-reaction-add, .fd-message:hover .fd-message-reply, .fd-reaction-add:focus-visible, .fd-message-reply:focus-visible { opacity: 1; }
+.fd-reaction-picker { display: flex; gap: 2px; padding: 4px; border: 1px solid var(--fd-border); border-radius: 999px; background: var(--fd-surface); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
+.fd-reaction-picker button { border: none; padding: 4px 6px; font-size: 16px; }
+.fd-reaction-picker button:hover { background: var(--fd-page); }
+.fd-mentions { list-style: none; margin: 0; padding: 4px 0; border: 1px solid var(--fd-border); border-radius: var(--fd-radius); background: var(--fd-surface); max-width: 280px; box-shadow: 0 6px 18px rgba(0,0,0,0.1); }
+.fd-mentions [role=option] { padding: 6px 12px; cursor: pointer; }
+.fd-mentions [role=option].fd-active, .fd-mentions [role=option]:hover { background: var(--fd-accent-soft); }
+.fd-mentions .fd-empty { padding: 6px 12px; color: var(--fd-muted); }
+.fd-activities { display: grid; gap: 8px; }
+.fd-activity-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
+.fd-activity { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 2px 10px; align-items: start; padding: 8px 10px; border: 1px solid var(--fd-border); border-radius: var(--fd-radius); background: var(--fd-surface); }
+.fd-activity-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; background: var(--fd-success); }
+.fd-activity[data-when="overdue"] .fd-activity-icon { background: var(--fd-error); }
+.fd-activity[data-when="today"] .fd-activity-icon { background: #d97706; }
+.fd-activity-icon .fd-icon { width: 16px; height: 16px; }
+.fd-activity-content { display: grid; min-width: 0; }
+.fd-activity-summary { font-weight: 600; }
+.fd-activity-meta { color: var(--fd-muted); font-size: 12.5px; }
+.fd-activity[data-when="overdue"] .fd-activity-due { color: var(--fd-error); font-weight: 600; }
+.fd-activity[data-when="today"] .fd-activity-due { color: #b45309; font-weight: 600; }
+/* Under the summary, where a narrow side panel has room for them. */
+.fd-activity-actions { grid-column: 2; display: flex; gap: 2px 12px; flex-wrap: wrap; }
+.fd-activity-actions .fd-button-link { padding: 0; min-height: 0; font-size: 13px; }
+.fd-activity-finish { grid-column: 2; display: grid; gap: 6px; margin-block-start: 4px; }
+.fd-activity-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; padding: 12px; border: 1px solid var(--fd-border); border-radius: var(--fd-radius); background: var(--fd-surface); }
+.fd-activity-form .fd-composer-actions { grid-column: 1 / -1; }
+.fd-activity-field { display: grid; gap: 4px; font-size: 13px; color: var(--fd-muted); }
+.fd-followers-toggle { display: inline-flex; align-items: center; gap: 6px; }
+.fd-followers-toggle .fd-icon { width: 1.1em; height: 1.1em; }
+.fd-followers { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--fd-border); border-radius: var(--fd-radius); background: var(--fd-surface); }
+.fd-follower-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
+.fd-follower { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; }
+.fd-followers-none { margin: 0; color: var(--fd-muted); }
+.fd-followers-add { display: grid; gap: 6px; border-block-start: 1px solid var(--fd-border); padding-block-start: 8px; }
+.fd-followers-add-title { font-size: 12.5px; color: var(--fd-muted); }
+.fd-follower-candidates { list-style: none; margin: 0; padding: 0; }
+.fd-follower-candidates [role=option] { padding: 6px 8px; border-radius: 4px; cursor: pointer; }
+.fd-follower-candidates [role=option]:hover { background: var(--fd-accent-soft); }
+.fd-follower-candidates .fd-empty { padding: 6px 8px; color: var(--fd-muted); }
+`;
+/** Puts the chatter's look in the document once. */
+export function installChatterStyles(doc) {
+    if (doc.getElementById('fd-chatter-styles'))
+        return;
+    const style = doc.createElement('style');
+    style.id = 'fd-chatter-styles';
+    style.textContent = CHATTER_STYLES;
+    doc.head.append(style);
+}
+//# sourceMappingURL=styles.mjs.map

package/src/lib/styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.mjs","sourceRoot":"","sources":["../../../../../libs/chatter/src/lib/styles.ts"],"names":[],"mappings":"AAAA,oEAAoE;AACpE,MAAM,CAAC,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4F7B,CAAC;AAEF,oDAAoD;AACpD,MAAM,UAAU,oBAAoB,CAAC,GAAa;IAChD,IAAI,GAAG,CAAC,cAAc,CAAC,mBAAmB,CAAC;QAAE,OAAO;IACpD,MAAM,KAAK,GAAG,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACzC,KAAK,CAAC,EAAE,GAAG,mBAAmB,CAAC;IAC/B,KAAK,CAAC,WAAW,GAAG,cAAc,CAAC;IACnC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AACzB,CAAC"}