@messagevisor/catalog 0.0.1 → 0.1.0

package/src/pages/HistoryPage.tsx

@@ -0,0 +1,26 @@
+import { useParams } from "react-router-dom";
+
+import { HistoryTimeline } from "../components/history/HistoryTimeline";
+import { encodeRouteSegment } from "../entityTypes";
+import { PageHeader } from "../components/layout/PageHeader";
+import { useCatalog } from "../context/CatalogContext";
+
+export function HistoryPage() {
+  const { manifest } = useCatalog();
+  const { setKey } = useParams();
+  const path = setKey
+    ? `/data/sets/${encodeRouteSegment(setKey)}/history`
+    : "/data/project/history";
+
+  return (
+    <div>
+      <PageHeader
+        title={setKey ? `History for ${setKey}` : "Project History"}
+        description="Recent Git changes for authored definitions."
+      />
+      <div className="px-6 pb-6">
+        <HistoryTimeline path={path} setKey={setKey} commitUrl={manifest.links?.commit} />
+      </div>
+    </div>
+  );
+}

package/src/pages/HomePage.tsx

@@ -0,0 +1,21 @@
+import { Navigate } from "react-router-dom";
+
+import { useCatalog } from "../context/CatalogContext";
+import { encodeRouteSegment } from "../entityTypes";
+
+export function HomePage() {
+  const { manifest } = useCatalog();
+
+  if (!manifest.sets) {
+    return <Navigate to="/messages" replace />;
+  }
+
+  const firstSetKey = manifest.setKeys[0];
+
+  return (
+    <Navigate
+      to={firstSetKey ? `/sets/${encodeRouteSegment(firstSetKey)}/messages` : "/history"}
+      replace
+    />
+  );
+}

package/src/pages/ListPage.tsx

@@ -0,0 +1,59 @@
+import * as React from "react";
+import { Navigate, useParams } from "react-router-dom";
+
+import { fetchIndex } from "../api";
+import { entityLabels, entityPathToType } from "../entityTypes";
+import type { CatalogIndex, EntityPath } from "../types";
+import { EntityList } from "../components/lists/EntityList";
+import { PageHeader } from "../components/layout/PageHeader";
+import { EmptyState } from "../components/ui/EmptyState";
+
+function isEntityPath(value: string | undefined): value is EntityPath {
+  return (
+    value === "locales" ||
+    value === "messages" ||
+    value === "attributes" ||
+    value === "segments" ||
+    value === "targets"
+  );
+}
+
+export function ListPage() {
+  const { entityPath, setKey } = useParams();
+  const [index, setIndex] = React.useState<CatalogIndex | null>(null);
+  const [error, setError] = React.useState<string | null>(null);
+
+  React.useEffect(() => {
+    setIndex(null);
+    setError(null);
+    fetchIndex(setKey)
+      .then(setIndex)
+      .catch((err: Error) => setError(err.message));
+  }, [setKey]);
+
+  if (!isEntityPath(entityPath)) {
+    return <Navigate to="locales" replace />;
+  }
+
+  const type = entityPathToType[entityPath];
+
+  if (error) {
+    return <EmptyState title="Unable to load catalog index" description={error} />;
+  }
+
+  if (!index) {
+    return <div className="text-muted">Loading {entityLabels[type].plural.toLowerCase()}...</div>;
+  }
+
+  return (
+    <div>
+      <PageHeader title={entityLabels[type].plural} />
+      <EntityList
+        type={type}
+        entities={index.entities[type]}
+        setKey={setKey}
+        allEntities={index.entities}
+      />
+    </div>
+  );
+}

package/src/styles.css

@@ -0,0 +1,95 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  color-scheme: light;
+
+  --mv-color-background: #e5e7eb;
+  --mv-color-surface: #ffffff;
+  --mv-color-elevated: #f8fafc;
+  --mv-color-border: #e5e7eb;
+  --mv-color-text: #374151;
+  --mv-color-muted: #6b7280;
+  --mv-color-primary: #475569;
+  --mv-color-success: #16a34a;
+  --mv-color-warning: #ea580c;
+  --mv-color-danger: #dc2626;
+  --mv-color-header: #1f2937;
+  --mv-color-header-active: #374151;
+  --mv-color-header-text: #f9fafb;
+  --mv-color-pill: #cbd5e1;
+
+  --mv-color-faint: #9ca3af;
+  --mv-color-placeholder: #9ca3af;
+
+  --mv-color-success-surface: #bbf7d0;
+  --mv-color-success-outline: #86efac;
+  --mv-color-warning-surface: #fed7aa;
+  --mv-color-warning-outline: #fdba74;
+  --mv-color-danger-surface: #fee2e2;
+  --mv-color-danger-outline: #fca5a5;
+
+  --mv-color-ring: rgb(71 85 105 / 0.45);
+
+  --mv-shadow-sm: 0 1px 2px 0 rgb(15 23 42 / 0.06);
+  --mv-shadow-md: 0 4px 6px -1px rgb(15 23 42 / 0.08), 0 2px 4px -2px rgb(15 23 42 / 0.06);
+  --mv-shadow: 0 1px 3px 0 rgb(15 23 42 / 0.1), 0 1px 2px -1px rgb(15 23 42 / 0.08);
+  --mv-shadow-soft: 0 10px 30px rgb(15 23 42 / 0.08);
+}
+
+/* Dark overrides only — default `:root` above is the light theme. */
+/* @media (prefers-color-scheme: dark) {
+  :root {
+    color-scheme: dark;
+
+    --mv-color-background: #18181b;
+    --mv-color-surface: #27272a;
+    --mv-color-elevated: #3f3f46;
+    --mv-color-border: #52525b;
+    --mv-color-text: #f4f4f5;
+    --mv-color-muted: #d4d4d8;
+    --mv-color-primary: #e4e4e7;
+    --mv-color-success: #86efac;
+    --mv-color-warning: #fdba74;
+    --mv-color-danger: #fca5a5;
+    --mv-color-header: #09090b;
+    --mv-color-header-active: #27272a;
+    --mv-color-header-text: #f4f4f5;
+    --mv-color-pill: #71717a;
+
+    --mv-color-faint: #a1a1aa;
+    --mv-color-placeholder: #71717a;
+
+    --mv-color-success-surface: rgb(34 197 94 / 0.16);
+    --mv-color-success-outline: #22c55e;
+    --mv-color-warning-surface: rgb(251 146 60 / 0.18);
+    --mv-color-warning-outline: #fb923c;
+    --mv-color-danger-surface: rgb(248 113 113 / 0.14);
+    --mv-color-danger-outline: #f87171;
+
+    --mv-color-ring: rgb(228 228 231 / 0.45);
+
+    --mv-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.28);
+    --mv-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.35), 0 2px 4px -2px rgb(0 0 0 / 0.28);
+    --mv-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.38), 0 1px 2px -1px rgb(0 0 0 / 0.32);
+    --mv-shadow-soft: 0 10px 30px rgb(0 0 0 / 0.45);
+  }
+} */
+
+body {
+  margin: 0;
+  background: var(--mv-color-background);
+  color: var(--mv-color-text);
+  font-family:
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    sans-serif;
+}
+
+a {
+  color: inherit;
+}

package/src/theme.ts

@@ -0,0 +1,36 @@
+export const themeTokens = {
+  color: {
+    background: "background",
+    surface: "surface",
+    elevated: "elevated",
+    border: "border",
+    text: "text",
+    muted: "muted",
+    faint: "faint",
+    placeholder: "placeholder",
+    primary: "primary",
+    success: "success",
+    warning: "warning",
+    danger: "danger",
+    header: "header",
+    headerActive: "header-active",
+    headerText: "header-text",
+    pill: "pill",
+    successSurface: "success-surface",
+    successOutline: "success-outline",
+    warningSurface: "warning-surface",
+    warningOutline: "warning-outline",
+    dangerSurface: "danger-surface",
+    dangerOutline: "danger-outline",
+    ring: "ring",
+  },
+} as const;
+
+export const themeClasses = {
+  page: "min-h-screen bg-background text-text",
+  pageShell: "m-8 mx-auto max-w-5xl",
+  panel: "rounded border border-border bg-surface shadow",
+  subtlePanel: "rounded border border-border bg-elevated",
+  link: "font-medium text-primary hover:underline",
+  muted: "text-muted",
+} as const;

package/src/types.ts

@@ -0,0 +1,127 @@
+export type EntityType = "locale" | "message" | "attribute" | "segment" | "target";
+
+export type EntityPath = "locales" | "messages" | "attributes" | "segments" | "targets";
+export type GitProvider = "github" | "gitlab" | "bitbucket";
+export type DevEditorId = "cursor" | "vscode";
+
+export interface DevEditor {
+  id: DevEditorId;
+  label: string;
+  icon: DevEditorId;
+}
+
+export interface LastModified {
+  commit: string;
+  author: string;
+  timestamp: string;
+}
+
+export interface EntitySummary {
+  key: string;
+  description?: string;
+  archived?: boolean;
+  deprecated?: boolean;
+  targets?: string[];
+  messageCount?: number;
+  locales?: string[];
+  overrideLocales?: string[];
+  lastModified?: LastModified;
+  href: string;
+}
+
+export type CatalogValueSource = "direct" | "inherited" | "target" | "missing";
+
+export interface FormatRow {
+  path: string;
+  value: unknown;
+  source: CatalogValueSource;
+  from?: string;
+  /** Sample output from Intl for `number` / `date` / `time` presets (catalog build). */
+  examplePreview?: string;
+}
+
+export interface TranslationRow {
+  locale: string;
+  value: string;
+  source: CatalogValueSource;
+  from?: string;
+}
+
+export interface DuplicateTranslationSource {
+  messageKey: string;
+  locale: string;
+}
+
+export interface DuplicateTranslationValue {
+  value: string;
+  messageKeys: string[];
+  sources: DuplicateTranslationSource[];
+}
+
+export interface LocaleDuplicates {
+  locale: string;
+  summary: {
+    duplicateValues: number;
+    duplicateMessageKeys: number;
+  };
+  duplicateValues: DuplicateTranslationValue[];
+}
+
+export interface CatalogIndex {
+  set: string;
+  counts: Record<EntityType, number>;
+  entities: Record<EntityType, EntitySummary[]>;
+}
+
+export interface CatalogManifest {
+  schemaVersion: string;
+  generatedAt: string;
+  router?: "hash" | "browser";
+  sets: boolean;
+  setKeys: string[];
+  dev?: {
+    editors: DevEditor[];
+  };
+  links?: {
+    provider?: GitProvider;
+    repository?: string;
+    source: string;
+    commit: string;
+  };
+  paths: {
+    projectHistory: string;
+    root?: string;
+    sets?: Record<string, string>;
+  };
+  counts: Record<string, Record<EntityType, number>>;
+}
+
+export interface HistoryEntity {
+  type: EntityType | "test";
+  key: string;
+  set?: string;
+}
+
+export interface HistoryEntry {
+  commit: string;
+  author: string;
+  timestamp: string;
+  entities: HistoryEntity[];
+}
+
+export interface HistoryPage {
+  page: number;
+  pageSize: number;
+  totalPages: number;
+  entries: HistoryEntry[];
+}
+
+export interface EntityDetail<T = Record<string, unknown>> {
+  type: EntityType;
+  key: string;
+  entity: T;
+  sourcePath?: string;
+  editLinks?: Partial<Record<DevEditorId, string>>;
+  lastModified?: LastModified;
+  [key: string]: unknown;
+}

package/src/utils/formatCatalogTimestamp.ts

@@ -0,0 +1,77 @@
+function getOrdinal(day: number) {
+  const remainder = day % 100;
+
+  if (remainder >= 11 && remainder <= 13) {
+    return `${day}th`;
+  }
+
+  switch (day % 10) {
+    case 1:
+      return `${day}st`;
+    case 2:
+      return `${day}nd`;
+    case 3:
+      return `${day}rd`;
+    default:
+      return `${day}th`;
+  }
+}
+
+function getLocalTimeZoneLabel(date: Date) {
+  const formatter = new Intl.DateTimeFormat(undefined, {
+    timeZoneName: "short",
+  });
+  const parts = formatter.formatToParts(date);
+  const timeZoneName = parts.find((part) => part.type === "timeZoneName")?.value;
+
+  if (timeZoneName && timeZoneName.trim()) {
+    return timeZoneName;
+  }
+
+  const localTimestamp = Date.UTC(
+    date.getFullYear(),
+    date.getMonth(),
+    date.getDate(),
+    date.getHours(),
+    date.getMinutes(),
+    date.getSeconds(),
+    date.getMilliseconds(),
+  );
+  const offset = Math.round((localTimestamp - date.getTime()) / 60000);
+  const sign = offset >= 0 ? "+" : "-";
+  const hours = String(Math.floor(Math.abs(offset) / 60)).padStart(2, "0");
+  const minutes = String(Math.abs(offset) % 60).padStart(2, "0");
+
+  return `UTC${sign}${hours}:${minutes}`;
+}
+
+export function formatCatalogTimestamp(value: string) {
+  const date = new Date(value);
+
+  if (Number.isNaN(date.getTime())) {
+    return value;
+  }
+
+  const parts = new Intl.DateTimeFormat(undefined, {
+    month: "long",
+    day: "numeric",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: false,
+  }).formatToParts(date);
+
+  const month = parts.find((part) => part.type === "month")?.value;
+  const day = parts.find((part) => part.type === "day")?.value;
+  const year = parts.find((part) => part.type === "year")?.value;
+  const hour = parts.find((part) => part.type === "hour")?.value;
+  const minute = parts.find((part) => part.type === "minute")?.value;
+  const second = parts.find((part) => part.type === "second")?.value;
+
+  if (!month || !day || !year || !hour || !minute || !second) {
+    return value;
+  }
+
+  return `${month} ${getOrdinal(Number(day))}, ${year} at ${hour}:${minute}:${second} ${getLocalTimeZoneLabel(date)}`;
+}

package/src/utils/hashTranslationValue.spec.ts

@@ -0,0 +1,20 @@
+import { hashTranslationValue } from "./hashTranslationValue";
+
+describe("hashTranslationValue", function () {
+  it("returns a stable alphanumeric hash for the same value", function () {
+    const value = "Hello, world!";
+
+    expect(hashTranslationValue(value)).toBe(hashTranslationValue(value));
+    expect(hashTranslationValue(value)).toMatch(/^dup[0-9a-z]+$/);
+  });
+
+  it("produces different hashes for whitespace differences", function () {
+    expect(hashTranslationValue("hello world")).not.toBe(hashTranslationValue("hello  world"));
+    expect(hashTranslationValue("hello")).not.toBe(hashTranslationValue("hello\n"));
+  });
+
+  it("produces different hashes for special-character differences", function () {
+    expect(hashTranslationValue("café")).not.toBe(hashTranslationValue("cafe"));
+    expect(hashTranslationValue("a&b")).not.toBe(hashTranslationValue("a b"));
+  });
+});

package/src/utils/hashTranslationValue.ts

@@ -0,0 +1,22 @@
+/** URL fragment prefix for locale duplicate translation values. */
+const DUPLICATE_VALUE_HASH_PREFIX = "dup";
+
+/**
+ * Deterministic alphanumeric hash of a translation value for permalink fragments.
+ * Hashes the full string (including whitespace and special characters).
+ */
+export function hashTranslationValue(value: string): string {
+  let h1 = 0xdeadbeef;
+  let h2 = 0x41c6ce57;
+
+  for (let index = 0; index < value.length; index += 1) {
+    const code = value.charCodeAt(index);
+    h1 = Math.imul(h1 ^ code, 2654435761);
+    h2 = Math.imul(h2 ^ code, 1597334677);
+  }
+
+  h1 = Math.imul(h1 ^ (h1 >>> 16), 2246822507) ^ Math.imul(h2 ^ (h2 >>> 13), 3266489909);
+  h2 = Math.imul(h2 ^ (h2 >>> 16), 2246822507) ^ Math.imul(h1 ^ (h1 >>> 13), 3266489909);
+
+  return `${DUPLICATE_VALUE_HASH_PREFIX}${(h1 >>> 0).toString(36)}${(h2 >>> 0).toString(36)}`;
+}

package/src/utils/searchQuery.ts

@@ -0,0 +1,46 @@
+/** Shared advanced search tokenization (used by entity lists, format tables, etc.). */
+
+export interface ParsedQuery {
+  freeText: string[];
+  qualifiers: Array<{ key: string; value: string }>;
+}
+
+export function tokenize(raw: string): string[] {
+  const tokens: string[] = [];
+  let current = "";
+  let inQuote = false;
+  for (const ch of raw) {
+    if (ch === '"') {
+      inQuote = !inQuote;
+      current += ch;
+    } else if (ch === " " && !inQuote) {
+      if (current) tokens.push(current);
+      current = "";
+    } else {
+      current += ch;
+    }
+  }
+  if (current) tokens.push(current);
+  return tokens;
+}
+
+export function parseQuery(raw: string): ParsedQuery {
+  const freeText: string[] = [];
+  const qualifiers: Array<{ key: string; value: string }> = [];
+
+  for (const token of tokenize(raw.trim())) {
+    const colonIdx = token.indexOf(":");
+    if (colonIdx > 0) {
+      const key = token.slice(0, colonIdx).toLowerCase();
+      let value = token.slice(colonIdx + 1);
+      if (value.startsWith('"') && value.endsWith('"') && value.length > 2) {
+        value = value.slice(1, -1);
+      }
+      if (value) qualifiers.push({ key, value });
+    } else {
+      freeText.push(token.toLowerCase());
+    }
+  }
+
+  return { freeText, qualifiers };
+}