@gemboss/ui 0.21.0 → 0.30.2

package/src/assistant/engine-mark-art.ts

@@ -0,0 +1,45 @@
+/**
+ * Each engine's MARK, the artwork only (0.29.0), moved from the admin (apps/admin/src/lib/engine-mark-art.ts, which now
+ * re-exports this file). No JSX and no stylesheet, so a node test and a server module can import it
+ * (`@gemboss/ui/assistant/engine-mark-art`); `EngineMark` (engine-mark.tsx) draws it.
+ *
+ * One shape per engine, never a shared one: a mark that is right for one engine and wrong for the other reads as evidence
+ * while naming the wrong thing.
+ */
+
+/** The Claude asterisk: eight tapered arms from one centre, generated (eight hand-typed arms are eight chances to be off). */
+function claudeAsterisk(): string {
+  const c = 12, root = 1.7, tip = 0.5, len = 9.6;
+  const f = (n: number) => Math.round(n * 100) / 100;
+  const p = (x: number, y: number) => `${f(x)} ${f(y)}`;
+  return Array.from({ length: 8 }, (_, i) => {
+    const a = (i * Math.PI) / 4;
+    const [dx, dy] = [Math.cos(a), Math.sin(a)];
+    const [px, py] = [-dy, dx];
+    return [
+      `M${p(c + px * root, c + py * root)}`,
+      `L${p(c + dx * len + px * tip, c + dy * len + py * tip)}`,
+      `Q${p(c + dx * (len + 0.6), c + dy * (len + 0.6))} ${p(c + dx * len - px * tip, c + dy * len - py * tip)}`,
+      `L${p(c - px * root, c - py * root)}`,
+      "Z",
+    ].join("");
+  }).join(" ");
+}
+
+/** Codex: a hexagonal ring. Not OpenAI's knot (no official asset here; one drawn from memory would be a wrong logo). */
+const CODEX_HEX = "M12 2.6 20.1 7.3V16.7L12 21.4 3.9 16.7V7.3ZM12 6.9 7.6 9.45v5.1L12 17.1l4.4-2.55v-5.1Z";
+
+/** NONZERO: the asterisk's eight subpaths all start at the centre, and under evenodd the overlaps cancel (measured in the
+ *  admin: the centre came back 0/400 inked, a hollow compass rose). */
+export const ENGINE_MARK_FILL_RULE = "nonzero" as const;
+
+export type EngineMarkId = "claude" | "codex";
+export interface EngineMarkArt { path: string; label: string }
+export const ENGINE_MARK_ART: Record<EngineMarkId, EngineMarkArt> = {
+  claude: { path: claudeAsterisk(), label: "Claude Code" },
+  codex: { path: CODEX_HEX, label: "Codex" },
+};
+
+export function isEngineMarkId(v: unknown): v is EngineMarkId {
+  return typeof v === "string" && Object.prototype.hasOwnProperty.call(ENGINE_MARK_ART, v);
+}

package/src/assistant/engine-mark.tsx

@@ -0,0 +1,39 @@
+/**
+ * Each engine's MARK (0.29.0), moved from the admin (apps/admin/src/lib/engine-mark-art.ts + components/chat/EngineMark.tsx).
+ *
+ * Where it shows: on the engine chip when the composer row is too narrow for the name (a name cut to "Clau…" says
+ * nothing; a mark still says whose model answers), and in a narration row that stands for the turn itself.
+ *
+ * One shape per engine, never a shared one: a mark that is right for one engine and wrong for the other reads as evidence
+ * while naming the wrong thing. An engine with no artwork draws NOTHING (silence rather than somebody else's logo), and
+ * the chip then keeps its name.
+ */
+import "../assistant-engine.css"; // the mark's size (`.gemboss-engine-mark`), with the chip that shows it
+import React from "react";
+
+import { ENGINE_MARK_ART, ENGINE_MARK_FILL_RULE, isEngineMarkId } from "./engine-mark-art";
+export { ENGINE_MARK_ART, ENGINE_MARK_FILL_RULE, isEngineMarkId, type EngineMarkArt, type EngineMarkId } from "./engine-mark-art";
+
+
+/** The mark as an image with a NAME (the hover text and the accessible name), or nothing when the engine has no artwork. */
+export function EngineMark({ engine, title, className = "gemboss-engine-mark", decorative = false }: {
+  engine: string;
+  title?: string;
+  className?: string;
+  /** Inside a control that already names the engine (the chip): hidden from assistive tech, no hover title. */
+  decorative?: boolean;
+}) {
+  if (!isEngineMarkId(engine)) return null;
+  const art = ENGINE_MARK_ART[engine];
+  const name = title || art.label;
+  return decorative ? (
+    <svg className={className} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false">
+      <path d={art.path} fillRule={ENGINE_MARK_FILL_RULE} />
+    </svg>
+  ) : (
+    <svg className={className} viewBox="0 0 24 24" fill="currentColor" role="img" aria-label={name}>
+      <title>{name}</title>
+      <path d={art.path} fillRule={ENGINE_MARK_FILL_RULE} />
+    </svg>
+  );
+}