annotate-kit 0.1.0

package/src/styles/annotate.css

@@ -0,0 +1,211 @@
+/* annotate-kit — self-contained stylesheet.
+   The overlay keeps HRMS's Tailwind class names; this file compiles JUST the utilities it uses,
+   with the design tokens given concrete values. Tailwind's global reset (preflight) is deliberately
+   NOT imported — instead a tiny reset scoped to [data-annot-ui] runs, so dropping this CSS into ANY
+   app (Tailwind or not, tokens or not) styles the widget correctly and touches nothing else. */
+
+@layer theme, base, components, utilities;
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities);
+
+/* Only scan the widget's own source for class names. */
+@source "../Annotate.tsx";
+@source "../constants.ts";
+
+/* ── Design tokens (values lifted verbatim from the HRMS "Trust Enterprise Light" system) ── */
+@theme {
+  --color-canvas: #f6f8fb;
+  --color-surface: #ffffff;
+  --color-elevated: #ffffff;
+  --color-sunken: #f1f5f9;
+  --color-sidebar: #fbfcfe;
+  --color-table-head: #f3f6fa;
+  --color-row-alt: #fafbfd;
+
+  --color-fg: #0f172a;
+  --color-fg-secondary: #334155;
+  --color-fg-muted: #64748b;
+  --color-fg-disabled: #94a3b8;
+  --color-ink-hover: #334155;
+
+  --color-line: #e9eef5;
+  --color-line-strong: #d8e0ea;
+  --color-line-brand: #e0e3ff;
+
+  --color-brand: #6366f1;
+  --color-brand-strong: #4f46e5;
+  --color-brand-deep: #4338ca;
+  --color-brand-2: #8b5cf6;
+  --color-brand-tint: #eef0ff;
+  --color-brand-hairline: #e0e3ff;
+
+  --color-accent: #f59e0b;
+  --color-accent-text: #b45309;
+  --color-accent-tint: #fffbeb;
+  --color-accent-hairline: #fde68a;
+
+  --color-success: #059669;
+  --color-success-text: #047857;
+  --color-success-tint: #ecfdf5;
+  --color-success-hairline: #a7f3d0;
+  --color-warning: #f59e0b;
+  --color-warning-text: #b45309;
+  --color-warning-tint: #fffbeb;
+  --color-warning-hairline: #fde68a;
+  --color-danger: #dc2626;
+  --color-danger-text: #b91c1c;
+  --color-danger-tint: #fef2f2;
+  --color-danger-hairline: #fecaca;
+  --color-info: #2563eb;
+  --color-info-text: #1d4ed8;
+  --color-info-tint: #eff6ff;
+  --color-info-hairline: #bfdbfe;
+  --color-neutral-tint: #f1f5f9;
+
+  --radius-input: 0.625rem;
+  --radius-control: 0.625rem;
+  --radius-card: 0.875rem;
+  --radius-modal: 1.25rem;
+
+  --shadow-e1: 0 1px 2px rgba(16, 24, 40, 0.05);
+  --shadow-e2: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.06);
+  --shadow-e3: 0 8px 24px -6px rgba(16, 24, 40, 0.12);
+  --shadow-e4: 0 20px 48px -16px rgba(16, 24, 40, 0.28);
+  --shadow-brand: 0 10px 28px -10px rgba(99, 102, 241, 0.45);
+}
+
+/* ── Scoped reset — replaces preflight, ONLY inside the overlay ──────────────────────────────
+   Re-pinning the token vars here means the widget looks identical even if the host app happens to
+   define its own --color-surface / --color-fg-* etc. at :root. */
+[data-annot-ui] {
+  box-sizing: border-box;
+  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
+  line-height: 1.4;
+  -webkit-font-smoothing: antialiased;
+  color: var(--color-fg-secondary);   /* base text colour — inputs inherit this, so typed text stays readable in every theme */
+
+  --color-canvas: #f6f8fb;
+  --color-surface: #ffffff;
+  --color-sunken: #f1f5f9;
+  --color-row-alt: #fafbfd;
+  --color-fg: #0f172a;
+  --color-fg-secondary: #334155;
+  --color-fg-muted: #64748b;
+  --color-fg-disabled: #94a3b8;
+  --color-ink-hover: #334155;
+  --color-line: #e9eef5;
+  --color-line-strong: #d8e0ea;
+  --color-brand: #6366f1;
+  --color-brand-strong: #4f46e5;
+  --color-brand-tint: #eef0ff;
+  --color-brand-hairline: #e0e3ff;
+  --color-success: #059669;
+  --color-success-text: #047857;
+  --color-success-tint: #ecfdf5;
+  --color-success-hairline: #a7f3d0;
+  --color-warning: #f59e0b;
+  --color-warning-text: #b45309;
+  --color-warning-tint: #fffbeb;
+  --color-warning-hairline: #fde68a;
+  --color-danger: #dc2626;
+  --color-danger-text: #b91c1c;
+  --color-danger-tint: #fef2f2;
+  --color-danger-hairline: #fecaca;
+}
+
+/* ── Dark theme — overrides the token vars when data-annot-theme="dark" (or "auto" + OS is dark).
+   --color-fg stays dark ON PURPOSE: it backs the inverted chrome (dock header, tooltips, scrims),
+   which keep white text in both themes. Text tokens (fg-secondary/muted) flip to light. ────────── */
+[data-annot-ui][data-annot-theme="dark"],
+[data-annot-theme="dark"] [data-annot-ui] {
+  --color-canvas: #0b1120;
+  --color-surface: #1e293b;
+  --color-sunken: #0f172a;
+  --color-row-alt: #263449;
+  --color-fg-secondary: #e2e8f0;
+  --color-fg-muted: #94a3b8;
+  --color-fg-disabled: #64748b;
+  --color-line: #334155;
+  --color-line-strong: #475569;
+  --color-brand-strong: #a5b4fc;
+  --color-brand-tint: #312e81;
+  --color-brand-hairline: #4338ca;
+  --color-success-text: #6ee7b7;
+  --color-success-tint: #064e3b;
+  --color-success-hairline: #065f46;
+  --color-warning-text: #fcd34d;
+  --color-warning-tint: #422006;
+  --color-warning-hairline: #78350f;
+  --color-danger-text: #fca5a5;
+  --color-danger-tint: #450a0a;
+  --color-danger-hairline: #7f1d1d;
+}
+@media (prefers-color-scheme: dark) {
+  [data-annot-ui][data-annot-theme="auto"],
+  [data-annot-theme="auto"] [data-annot-ui] {
+    --color-canvas: #0b1120;
+    --color-surface: #1e293b;
+    --color-sunken: #0f172a;
+    --color-row-alt: #263449;
+    --color-fg-secondary: #e2e8f0;
+    --color-fg-muted: #94a3b8;
+    --color-fg-disabled: #64748b;
+    --color-line: #334155;
+    --color-line-strong: #475569;
+    --color-brand-strong: #a5b4fc;
+    --color-brand-tint: #312e81;
+    --color-brand-hairline: #4338ca;
+    --color-success-text: #6ee7b7;
+    --color-success-tint: #064e3b;
+    --color-success-hairline: #065f46;
+    --color-warning-text: #fcd34d;
+    --color-warning-tint: #422006;
+    --color-warning-hairline: #78350f;
+    --color-danger-text: #fca5a5;
+    --color-danger-tint: #450a0a;
+    --color-danger-hairline: #7f1d1d;
+  }
+}
+[data-annot-ui] *,
+[data-annot-ui] *::before,
+[data-annot-ui] *::after {
+  box-sizing: border-box;
+}
+[data-annot-ui] button {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  font: inherit;
+  color: inherit;
+  line-height: inherit;
+  cursor: pointer;
+}
+[data-annot-ui] button:disabled {
+  cursor: default;
+}
+[data-annot-ui] input,
+[data-annot-ui] textarea,
+[data-annot-ui] select {
+  font: inherit;
+  color: inherit;
+  margin: 0;
+}
+[data-annot-ui] textarea {
+  line-height: 1.4;
+}
+[data-annot-ui] p,
+[data-annot-ui] pre {
+  margin: 0;
+}
+[data-annot-ui] svg {
+  display: inline-block;
+  vertical-align: middle;
+  flex-shrink: 0;
+}
+[data-annot-ui] a {
+  color: inherit;
+}
+[data-annot-ui] kbd {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+}

package/src/types.ts

@@ -0,0 +1,71 @@
+// Data shapes for a single annotation. Kept identical to the HRMS "Live Annotate" model so rows
+// migrate 1:1, but with zero backend/framework coupling — this file is pure types.
+
+export type AnnType = 'change' | 'add' | 'remove' | 'bug' | 'style' | 'question'
+export type AnnPriority = 'low' | 'med' | 'high'
+export type AnnStatus = 'open' | 'in_progress' | 'done' | 'dismissed'
+export type AnnKind = 'pin' | 'shape'
+export type AnnShape = 'rect' | 'arrow' | 'circle' | 'freehand'
+export type AnnVisibility = 'public' | 'private'
+
+export type AnnReply = { note: string; author?: string; at?: string }
+export type AnnPoint = { x: number; y: number }
+export type AnnMeta = { browser?: string; os?: string; device?: string; viewport?: string; screen?: string; dpr?: number; url?: string; ua?: string }
+export type AnnLog = { level: string; text: string; at?: string }
+export type AnnNetLog = { method: string; url: string; status?: number; ms?: number; ok?: boolean; at?: string }
+
+export type Annotation = {
+  id: number
+  page_route: string
+  page_title: string
+  target_selector: string
+  target_text: string
+  pos_x: number
+  pos_y: number
+  viewport_w: number
+  viewport_h: number
+  note: string
+  type: AnnType
+  priority: AnnPriority
+  status: AnnStatus
+  screenshot_path?: string | null
+  screenshot_url?: string | null
+  replies?: AnnReply[]
+  created_by?: string
+  created_at?: string
+  updated_at?: string
+  // shapes + visibility + author snapshot + captured element styles
+  kind?: AnnKind
+  shape_type?: AnnShape | null
+  x2?: number | null
+  y2?: number | null
+  points?: AnnPoint[] | null
+  color?: string | null
+  visibility?: AnnVisibility
+  created_by_role?: string | null
+  created_by_name?: string | null
+  styles?: Record<string, string> | null
+  el_context?: string[] | null
+  // auto technical context + captured console/JS errors (reproducible bug reports)
+  meta?: AnnMeta | null
+  console_logs?: AnnLog[] | null
+  network_logs?: AnnNetLog[] | null
+  dom_snapshot?: string | null
+}
+
+// What the overlay hands the adapter to persist a new mark (server assigns id/timestamps/author).
+export type NewAnnotation = Omit<Annotation, 'id' | 'status' | 'created_at' | 'updated_at' | 'screenshot_url' | 'created_by' | 'created_by_role' | 'created_by_name'> & {
+  screenshot_path?: string | null
+}
+
+// A partial edit (status / note / type / priority) applied by id.
+export type AnnotationPatch = { id: number } & Partial<Pick<Annotation, 'note' | 'status' | 'type' | 'priority'>>
+
+// The current viewer + their permission envelope, resolved by the adapter.
+export type AnnotateAccess = {
+  enabled: boolean          // global toggle: is the tool shown to all users, or ADMIN-only?
+  isAdmin: boolean          // can flip the global toggle + clear-resolved
+  canUse: boolean           // may see/use the tool at all (enabled || isAdmin)
+  seeAll: boolean           // sees everyone's marks + can edit them (else own + public only)
+  me?: { email?: string; name?: string; role?: string }
+}