@object-ui/plugin-detail 3.0.3 → 3.1.0

package/src/RelationshipGraph.tsx

@@ -0,0 +1,286 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as React from 'react';
+import { cn, Card, CardHeader, CardTitle, CardContent } from '@object-ui/components';
+import { Network } from 'lucide-react';
+
+export interface GraphNode {
+  id: string;
+  label: string;
+  type?: string;
+  relatedRecords?: GraphNode[];
+}
+
+export interface RelationshipGraphProps {
+  record: GraphNode;
+  relatedRecords: GraphNode[];
+  levels?: number;
+  onNodeClick?: (nodeId: string) => void;
+  className?: string;
+}
+
+interface LayoutNode {
+  id: string;
+  label: string;
+  type?: string;
+  x: number;
+  y: number;
+  level: number;
+}
+
+interface LayoutEdge {
+  fromId: string;
+  toId: string;
+  fromX: number;
+  fromY: number;
+  toX: number;
+  toY: number;
+}
+
+const NODE_RADIUS = 28;
+const LEVEL_COLORS = [
+  'fill-primary stroke-primary',
+  'fill-blue-500 stroke-blue-500',
+  'fill-emerald-500 stroke-emerald-500',
+  'fill-amber-500 stroke-amber-500',
+];
+const LEVEL_TEXT_COLORS = [
+  'fill-primary-foreground',
+  'fill-white',
+  'fill-white',
+  'fill-white',
+];
+
+/** Compute layout positions for nodes in concentric rings. */
+function computeLayout(
+  center: GraphNode,
+  relatedRecords: GraphNode[],
+  levels: number,
+  width: number,
+  height: number,
+): { nodes: LayoutNode[]; edges: LayoutEdge[] } {
+  const nodes: LayoutNode[] = [];
+  const edges: LayoutEdge[] = [];
+  const seen = new Set<string>();
+
+  const cx = width / 2;
+  const cy = height / 2;
+
+  // Center node
+  nodes.push({ id: center.id, label: center.label, type: center.type, x: cx, y: cy, level: 0 });
+  seen.add(center.id);
+
+  // Level 1: direct relations
+  const ringRadius1 = Math.min(width, height) * 0.32;
+  const level1Nodes = relatedRecords.filter((r) => !seen.has(r.id));
+
+  level1Nodes.forEach((node, i) => {
+    const angle = (2 * Math.PI * i) / level1Nodes.length - Math.PI / 2;
+    const x = cx + ringRadius1 * Math.cos(angle);
+    const y = cy + ringRadius1 * Math.sin(angle);
+    nodes.push({ id: node.id, label: node.label, type: node.type, x, y, level: 1 });
+    edges.push({ fromId: center.id, toId: node.id, fromX: cx, fromY: cy, toX: x, toY: y });
+    seen.add(node.id);
+  });
+
+  // Level 2+: related records of related records
+  if (levels >= 2) {
+    const ringRadius2 = Math.min(width, height) * 0.46;
+    const level2Nodes: { node: GraphNode; parentX: number; parentY: number; parentId: string }[] = [];
+
+    level1Nodes.forEach((parentNode) => {
+      const parentLayoutNode = nodes.find((n) => n.id === parentNode.id);
+      if (!parentLayoutNode) return;
+      const children = (parentNode.relatedRecords || []).filter((r) => !seen.has(r.id));
+      children.forEach((child) => {
+        level2Nodes.push({
+          node: child,
+          parentX: parentLayoutNode.x,
+          parentY: parentLayoutNode.y,
+          parentId: parentNode.id,
+        });
+        seen.add(child.id);
+      });
+    });
+
+    level2Nodes.forEach((item, i) => {
+      const angle = (2 * Math.PI * i) / Math.max(level2Nodes.length, 1) - Math.PI / 2;
+      const x = cx + ringRadius2 * Math.cos(angle);
+      const y = cy + ringRadius2 * Math.sin(angle);
+      nodes.push({
+        id: item.node.id,
+        label: item.node.label,
+        type: item.node.type,
+        x,
+        y,
+        level: 2,
+      });
+      edges.push({
+        fromId: item.parentId,
+        toId: item.node.id,
+        fromX: item.parentX,
+        fromY: item.parentY,
+        toX: x,
+        toY: y,
+      });
+    });
+  }
+
+  return { nodes, edges };
+}
+
+/** Truncate label to fit inside a node circle. */
+function truncateLabel(label: string, maxLen: number = 6): string {
+  if (label.length <= maxLen) return label;
+  return label.slice(0, maxLen - 1) + '…';
+}
+
+export const RelationshipGraph: React.FC<RelationshipGraphProps> = ({
+  record,
+  relatedRecords,
+  levels = 1,
+  onNodeClick,
+  className,
+}) => {
+  const svgRef = React.useRef<SVGSVGElement>(null);
+  const [dimensions, setDimensions] = React.useState({ width: 500, height: 400 });
+  const [hoveredNode, setHoveredNode] = React.useState<string | null>(null);
+
+  // Observe container size
+  React.useEffect(() => {
+    const svg = svgRef.current;
+    if (!svg) return;
+    const parent = svg.parentElement;
+    if (!parent) return;
+
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const { width } = entry.contentRect;
+        if (width > 0) {
+          setDimensions({ width, height: Math.max(300, width * 0.7) });
+        }
+      }
+    });
+    observer.observe(parent);
+    return () => observer.disconnect();
+  }, []);
+
+  const { nodes, edges } = React.useMemo(
+    () => computeLayout(record, relatedRecords, levels, dimensions.width, dimensions.height),
+    [record, relatedRecords, levels, dimensions],
+  );
+
+  return (
+    <Card className={cn('overflow-hidden', className)}>
+      <CardHeader className="pb-2">
+        <CardTitle className="flex items-center gap-2 text-base">
+          <Network className="h-4 w-4" />
+          Relationships
+          <span className="text-sm font-normal text-muted-foreground">
+            ({relatedRecords.length} related)
+          </span>
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="p-0">
+        <svg
+          ref={svgRef}
+          width="100%"
+          height={dimensions.height}
+          viewBox={`0 0 ${dimensions.width} ${dimensions.height}`}
+          className="select-none"
+        >
+          {/* Edges */}
+          {edges.map((edge, i) => (
+            <line
+              key={`edge-${i}`}
+              x1={edge.fromX}
+              y1={edge.fromY}
+              x2={edge.toX}
+              y2={edge.toY}
+              className="stroke-border"
+              strokeWidth={1.5}
+              strokeOpacity={0.5}
+            />
+          ))}
+
+          {/* Nodes */}
+          {nodes.map((node) => {
+            const isHovered = hoveredNode === node.id;
+            const levelColor = LEVEL_COLORS[Math.min(node.level, LEVEL_COLORS.length - 1)];
+            const textColor = LEVEL_TEXT_COLORS[Math.min(node.level, LEVEL_TEXT_COLORS.length - 1)];
+            const radius = node.level === 0 ? NODE_RADIUS + 6 : NODE_RADIUS;
+
+            return (
+              <g
+                key={node.id}
+                className={cn('cursor-pointer transition-transform', onNodeClick && 'hover:opacity-80')}
+                onClick={() => onNodeClick?.(node.id)}
+                onMouseEnter={() => setHoveredNode(node.id)}
+                onMouseLeave={() => setHoveredNode(null)}
+              >
+                <circle
+                  cx={node.x}
+                  cy={node.y}
+                  r={isHovered ? radius + 3 : radius}
+                  className={levelColor}
+                  fillOpacity={node.level === 0 ? 1 : 0.85}
+                  strokeWidth={2}
+                  strokeOpacity={0.3}
+                />
+                <text
+                  x={node.x}
+                  y={node.y}
+                  textAnchor="middle"
+                  dominantBaseline="central"
+                  className={cn('text-[10px] font-medium pointer-events-none', textColor)}
+                >
+                  {truncateLabel(node.label)}
+                </text>
+                {/* Type label below */}
+                {node.type && (
+                  <text
+                    x={node.x}
+                    y={node.y + radius + 12}
+                    textAnchor="middle"
+                    className="fill-muted-foreground text-[9px] pointer-events-none"
+                  >
+                    {node.type}
+                  </text>
+                )}
+                {/* Tooltip on hover */}
+                {isHovered && (
+                  <>
+                    <rect
+                      x={node.x - 50}
+                      y={node.y - radius - 28}
+                      width={100}
+                      height={20}
+                      rx={4}
+                      className="fill-popover stroke-border"
+                      strokeWidth={1}
+                    />
+                    <text
+                      x={node.x}
+                      y={node.y - radius - 16}
+                      textAnchor="middle"
+                      dominantBaseline="central"
+                      className="fill-popover-foreground text-[10px] pointer-events-none"
+                    >
+                      {node.label}
+                    </text>
+                  </>
+                )}
+              </g>
+            );
+          })}
+        </svg>
+      </CardContent>
+    </Card>
+  );
+};

package/src/RichTextCommentInput.tsx

@@ -0,0 +1,348 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as React from 'react';
+import { cn, Button } from '@object-ui/components';
+import {
+  Bold,
+  Italic,
+  List,
+  Code,
+  AtSign,
+  Eye,
+  Edit,
+  Send,
+} from 'lucide-react';
+
+export interface MentionSuggestion {
+  id: string;
+  label: string;
+  avatarUrl?: string;
+}
+
+export interface RichTextCommentInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  onSubmit?: () => void | Promise<void>;
+  mentionSuggestions?: MentionSuggestion[];
+  placeholder?: string;
+  className?: string;
+  disabled?: boolean;
+}
+
+/** Render minimal markdown to HTML for preview. */
+function renderMarkdown(text: string): string {
+  let html = text
+    // Escape HTML
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    // Code blocks (```)
+    .replace(/```([\s\S]*?)```/g, '<pre class="bg-muted rounded p-2 text-xs font-mono my-1 overflow-x-auto">$1</pre>')
+    // Inline code
+    .replace(/`([^`]+)`/g, '<code class="bg-muted rounded px-1 py-0.5 text-xs font-mono">$1</code>')
+    // Bold
+    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+    // Italic
+    .replace(/\*(.+?)\*/g, '<em>$1</em>')
+    // @mentions
+    .replace(/@(\w+)/g, '<span class="text-primary font-medium">@$1</span>')
+    // Unordered lists
+    .replace(/^- (.+)$/gm, '<li class="ml-4 list-disc">$1</li>')
+    // Line breaks
+    .replace(/\n/g, '<br/>');
+
+  // Wrap consecutive <li> in <ul>
+  html = html.replace(
+    /(<li[^>]*>.*?<\/li>(?:<br\/>)?)+/g,
+    (match) => `<ul class="my-1">${match.replace(/<br\/>/g, '')}</ul>`,
+  );
+
+  return html;
+}
+
+export const RichTextCommentInput: React.FC<RichTextCommentInputProps> = ({
+  value,
+  onChange,
+  onSubmit,
+  mentionSuggestions = [],
+  placeholder = 'Write a comment…',
+  className,
+  disabled = false,
+}) => {
+  const [isPreview, setIsPreview] = React.useState(false);
+  const [showMentions, setShowMentions] = React.useState(false);
+  const [mentionQuery, setMentionQuery] = React.useState('');
+  const [mentionIndex, setMentionIndex] = React.useState(0);
+  const textareaRef = React.useRef<HTMLTextAreaElement>(null);
+
+  const filteredMentions = React.useMemo(() => {
+    if (!mentionQuery) return mentionSuggestions;
+    const query = mentionQuery.toLowerCase();
+    return mentionSuggestions.filter((s) =>
+      s.label.toLowerCase().includes(query),
+    );
+  }, [mentionQuery, mentionSuggestions]);
+
+  const insertAtCursor = React.useCallback(
+    (before: string, after: string = '') => {
+      const textarea = textareaRef.current;
+      if (!textarea) return;
+      const start = textarea.selectionStart;
+      const end = textarea.selectionEnd;
+      const selected = value.slice(start, end);
+      const newValue =
+        value.slice(0, start) + before + selected + after + value.slice(end);
+      onChange(newValue);
+      // Restore cursor after the insertion
+      requestAnimationFrame(() => {
+        textarea.focus();
+        const cursorPos = start + before.length + selected.length;
+        textarea.setSelectionRange(cursorPos, cursorPos);
+      });
+    },
+    [value, onChange],
+  );
+
+  const handleBold = React.useCallback(() => insertAtCursor('**', '**'), [insertAtCursor]);
+  const handleItalic = React.useCallback(() => insertAtCursor('*', '*'), [insertAtCursor]);
+  const handleList = React.useCallback(() => insertAtCursor('\n- ', ''), [insertAtCursor]);
+  const handleCode = React.useCallback(() => insertAtCursor('`', '`'), [insertAtCursor]);
+
+  const handleMentionTrigger = React.useCallback(() => {
+    insertAtCursor('@', '');
+    setShowMentions(true);
+    setMentionQuery('');
+    setMentionIndex(0);
+  }, [insertAtCursor]);
+
+  const handleSelectMention = React.useCallback(
+    (suggestion: MentionSuggestion) => {
+      const textarea = textareaRef.current;
+      if (!textarea) return;
+      const cursorPos = textarea.selectionStart;
+      // Find the last '@' before cursor to replace the partial query
+      const textBefore = value.slice(0, cursorPos);
+      const atIndex = textBefore.lastIndexOf('@');
+      if (atIndex !== -1) {
+        const newValue =
+          value.slice(0, atIndex) + `@${suggestion.label} ` + value.slice(cursorPos);
+        onChange(newValue);
+      }
+      setShowMentions(false);
+      setMentionQuery('');
+      requestAnimationFrame(() => textarea.focus());
+    },
+    [value, onChange],
+  );
+
+  const handleTextChange = React.useCallback(
+    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      const newValue = e.target.value;
+      onChange(newValue);
+
+      // Detect @mention trigger
+      const cursorPos = e.target.selectionStart;
+      const textBefore = newValue.slice(0, cursorPos);
+      const lastAtIndex = textBefore.lastIndexOf('@');
+
+      if (lastAtIndex !== -1) {
+        const textAfterAt = textBefore.slice(lastAtIndex + 1);
+        // Only show if @ is at start or preceded by whitespace and no space in query
+        const charBeforeAt = lastAtIndex > 0 ? textBefore[lastAtIndex - 1] : ' ';
+        if (/\s/.test(charBeforeAt) && !/\s/.test(textAfterAt)) {
+          setShowMentions(true);
+          setMentionQuery(textAfterAt);
+          setMentionIndex(0);
+          return;
+        }
+      }
+      setShowMentions(false);
+    },
+    [onChange],
+  );
+
+  const handleKeyDown = React.useCallback(
+    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      if (showMentions && filteredMentions.length > 0) {
+        if (e.key === 'ArrowDown') {
+          e.preventDefault();
+          setMentionIndex((prev) =>
+            prev < filteredMentions.length - 1 ? prev + 1 : 0,
+          );
+          return;
+        }
+        if (e.key === 'ArrowUp') {
+          e.preventDefault();
+          setMentionIndex((prev) =>
+            prev > 0 ? prev - 1 : filteredMentions.length - 1,
+          );
+          return;
+        }
+        if (e.key === 'Enter' || e.key === 'Tab') {
+          e.preventDefault();
+          handleSelectMention(filteredMentions[mentionIndex]);
+          return;
+        }
+        if (e.key === 'Escape') {
+          setShowMentions(false);
+          return;
+        }
+      }
+
+      // Ctrl+Enter to submit
+      if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+        e.preventDefault();
+        onSubmit?.();
+      }
+    },
+    [showMentions, filteredMentions, mentionIndex, handleSelectMention, onSubmit],
+  );
+
+  return (
+    <div className={cn('border rounded-md', className)}>
+      {/* Toolbar */}
+      <div className="flex items-center gap-0.5 px-2 py-1.5 border-b bg-muted/30">
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-7 w-7"
+          onClick={handleBold}
+          disabled={disabled || isPreview}
+          title="Bold (Ctrl+B)"
+        >
+          <Bold className="h-3.5 w-3.5" />
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-7 w-7"
+          onClick={handleItalic}
+          disabled={disabled || isPreview}
+          title="Italic (Ctrl+I)"
+        >
+          <Italic className="h-3.5 w-3.5" />
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-7 w-7"
+          onClick={handleList}
+          disabled={disabled || isPreview}
+          title="List"
+        >
+          <List className="h-3.5 w-3.5" />
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-7 w-7"
+          onClick={handleCode}
+          disabled={disabled || isPreview}
+          title="Inline code"
+        >
+          <Code className="h-3.5 w-3.5" />
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-7 w-7"
+          onClick={handleMentionTrigger}
+          disabled={disabled || isPreview}
+          title="Mention someone"
+        >
+          <AtSign className="h-3.5 w-3.5" />
+        </Button>
+
+        <div className="flex-1" />
+
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-7 w-7"
+          onClick={() => setIsPreview(!isPreview)}
+          title={isPreview ? 'Edit' : 'Preview'}
+        >
+          {isPreview ? (
+            <Edit className="h-3.5 w-3.5" />
+          ) : (
+            <Eye className="h-3.5 w-3.5" />
+          )}
+        </Button>
+
+        {onSubmit && (
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-7 w-7"
+            onClick={onSubmit}
+            disabled={disabled || !value.trim()}
+            title="Submit (Ctrl+Enter)"
+          >
+            <Send className="h-3.5 w-3.5" />
+          </Button>
+        )}
+      </div>
+
+      {/* Editor / Preview */}
+      <div className="relative">
+        {isPreview ? (
+          <div
+            className="min-h-[80px] px-3 py-2 text-sm prose prose-sm max-w-none"
+            dangerouslySetInnerHTML={{ __html: renderMarkdown(value) }}
+          />
+        ) : (
+          <>
+            <textarea
+              ref={textareaRef}
+              className="w-full min-h-[80px] px-3 py-2 text-sm bg-transparent resize-none focus:outline-none placeholder:text-muted-foreground"
+              placeholder={placeholder}
+              value={value}
+              onChange={handleTextChange}
+              onKeyDown={handleKeyDown}
+              disabled={disabled}
+            />
+
+            {/* @mention dropdown */}
+            {showMentions && filteredMentions.length > 0 && (
+              <div className="absolute left-2 bottom-full mb-1 w-56 bg-popover border rounded-md shadow-md z-50 max-h-40 overflow-y-auto">
+                {filteredMentions.map((suggestion, index) => (
+                  <button
+                    key={suggestion.id}
+                    type="button"
+                    className={cn(
+                      'w-full text-left px-3 py-1.5 text-sm flex items-center gap-2 hover:bg-accent transition-colors',
+                      index === mentionIndex && 'bg-accent',
+                    )}
+                    onMouseDown={(e) => {
+                      e.preventDefault();
+                      handleSelectMention(suggestion);
+                    }}
+                  >
+                    {suggestion.avatarUrl ? (
+                      <img
+                        src={suggestion.avatarUrl}
+                        alt={suggestion.label}
+                        className="h-5 w-5 rounded-full object-cover"
+                      />
+                    ) : (
+                      <div className="h-5 w-5 rounded-full bg-muted flex items-center justify-center text-[10px] font-medium">
+                        {suggestion.label.charAt(0).toUpperCase()}
+                      </div>
+                    )}
+                    <span>{suggestion.label}</span>
+                  </button>
+                ))}
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/SubscriptionToggle.tsx

@@ -0,0 +1,60 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as React from 'react';
+import { cn, Button } from '@object-ui/components';
+import { Bell, BellOff } from 'lucide-react';
+import type { RecordSubscription } from '@object-ui/types';
+
+export interface SubscriptionToggleProps {
+  /** Current subscription state */
+  subscription: RecordSubscription;
+  /** Called when user toggles subscription */
+  onToggle?: (subscribed: boolean) => void | Promise<void>;
+  className?: string;
+}
+
+/**
+ * SubscriptionToggle — Bell icon toggle for record notification subscriptions.
+ * Aligned with @objectstack/spec RecordSubscriptionSchema.
+ */
+export const SubscriptionToggle: React.FC<SubscriptionToggleProps> = ({
+  subscription,
+  onToggle,
+  className,
+}) => {
+  const [isLoading, setIsLoading] = React.useState(false);
+
+  const handleToggle = React.useCallback(async () => {
+    if (!onToggle) return;
+    setIsLoading(true);
+    try {
+      await onToggle(!subscription.subscribed);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [onToggle, subscription.subscribed]);
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      className={cn('h-8 w-8', className)}
+      onClick={handleToggle}
+      disabled={isLoading || !onToggle}
+      aria-label={subscription.subscribed ? 'Unsubscribe from notifications' : 'Subscribe to notifications'}
+      title={subscription.subscribed ? 'Subscribed — click to unsubscribe' : 'Subscribe to notifications'}
+    >
+      {subscription.subscribed ? (
+        <Bell className="h-4 w-4 text-primary" />
+      ) : (
+        <BellOff className="h-4 w-4 text-muted-foreground" />
+      )}
+    </Button>
+  );
+};