From 7cf103c4d63561087bda8b90c9bea67a5d3f4820 Mon Sep 17 00:00:00 2001 From: Artfizer Date: Mon, 7 Sep 2026 01:04:53 +0300 Subject: [PATCH 1/8] doc: massive web-site and documentation update Signed-off-by: Artfizer --- components/Footer.tsx | 2 +- components/FragmentationDemo.tsx | 32 +- components/FragmentationSVG.tsx | 587 +++--- components/GTSValidator.tsx | 337 +++- components/GtsIdentifierDiagram.tsx | 464 +++++ components/GtsIdentifierOptions.tsx | 406 +++++ components/Header.tsx | 97 +- components/PipelineFlow.tsx | 54 +- data/docs.tsx | 2576 +++++++++++++++++++++++++-- package-lock.json | 714 ++++++++ package.json | 2 + pages/Landing.tsx | 1025 +++++++---- 12 files changed, 5265 insertions(+), 1031 deletions(-) create mode 100644 components/GtsIdentifierDiagram.tsx create mode 100644 components/GtsIdentifierOptions.tsx diff --git a/components/Footer.tsx b/components/Footer.tsx index 7616f8a..db3493a 100644 --- a/components/Footer.tsx +++ b/components/Footer.tsx @@ -81,7 +81,7 @@ export const Footer: React.FC = () => {
  • { - const [isUnified, setIsUnified] = useState(false); - return ( -
    -
    - -
    - - {/* Control button */} -
    - +
    +
    +
    ); diff --git a/components/FragmentationSVG.tsx b/components/FragmentationSVG.tsx index 9c409fe..76cefab 100644 --- a/components/FragmentationSVG.tsx +++ b/components/FragmentationSVG.tsx @@ -1,419 +1,246 @@ -import React, { useState, useEffect } from 'react'; - -interface FragmentationSVGProps { - isUnified?: boolean; +import React from 'react'; + +interface Block { + id: string; + label: string; + gradientId: string; + x: number; + y: number; } -export const FragmentationSVG: React.FC = ({ - isUnified = false, -}) => { - const [animationState, setAnimationState] = useState(isUnified); - - useEffect(() => { - setAnimationState(isUnified); - }, [isUnified]); - - // Language blocks data - const blocks = [ - { id: 'python', label: 'Python', color: '#3776ab', x: 120, y: 90 }, - { id: 'go', label: 'Go', color: '#00add8', x: 430, y: 80 }, - { id: 'rust', label: 'Rust', color: '#ce4e1f', x: 130, y: 310 }, - { id: 'typescript', label: 'TypeScript', color: '#3178c6', x: 450, y: 320 }, - { id: 'json', label: 'JSON Schema', color: '#000000', x: 300, y: 200 }, - ]; - - // Fixed positions for connection line endpoints (these never change) - const getLineEndPosition = (index: number) => { - const positions = [ - { x: 300, y: 80 }, // Python - Top - { x: 450, y: 130 }, // Go - Top-right - { x: 450, y: 270 }, // Rust - Bottom-right - { x: 150, y: 270 }, // TypeScript - Bottom-left - { x: 150, y: 130 }, // JSON Schema - Top-left - ]; - - return positions[index]; - }; - - // Calculate positions for visual blocks (you can adjust these independently) - const getBlockPosition = (index: number) => { - const positions = [ - { x: 240, y: 30 }, // Python - Top (shifted left) - { x: 400, y: 100 }, // Go - Top-right (shifted left) - { x: 400, y: 240 }, // Rust - Bottom-right (shifted left) - { x: 80, y: 240 }, // TypeScript - Bottom-left (shifted left) - { x: 80, y: 100 }, // JSON Schema - Top-left (shifted left) - ]; - - return positions[index]; - }; - - // Collision/conflict markers for fragmented state - const conflicts = [ - { x: 200, y: 150, size: 40 }, - { x: 350, y: 250, size: 35 }, - { x: 400, y: 150, size: 30 }, +// 10 blocks placed on an oval around center (500, 200). +// Horizontal radius is 50% wider than vertical for an oval shape. +// Angles spaced evenly at 36 deg starting from -90 (top). +const cx = 500; +const cy = 200; +const rx = 280; // horizontal radius (wider) +const ry = 165; // vertical radius +const angleOf = (i: number) => (-90 + i * 36) * (Math.PI / 180); +const px = (i: number) => Math.round(cx + rx * Math.cos(angleOf(i))); +const py = (i: number) => Math.round(cy + ry * Math.sin(angleOf(i))); + +// Color palette for block gradients - vibrant colors that work in both light and dark modes +const blockGradients = [ + { id: 'block-grad-0', from: '#3b82f6', to: '#1d4ed8' }, // Blue + { id: 'block-grad-1', from: '#8b5cf6', to: '#6d28d9' }, // Purple + { id: 'block-grad-2', from: '#ec4899', to: '#be185d' }, // Pink + { id: 'block-grad-3', from: '#f97316', to: '#c2410c' }, // Orange + { id: 'block-grad-4', from: '#eab308', to: '#a16207' }, // Yellow + { id: 'block-grad-5', from: '#22c55e', to: '#15803d' }, // Green + { id: 'block-grad-6', from: '#06b6d4', to: '#0e7490' }, // Cyan + { id: 'block-grad-7', from: '#6366f1', to: '#4338ca' }, // Indigo + { id: 'block-grad-8', from: '#a855f7', to: '#7e22ce' }, // Violet + { id: 'block-grad-9', from: '#14b8a6', to: '#0f766e' }, // Teal +]; + +export const FragmentationSVG: React.FC = () => { + const blocks: Block[] = [ + { + id: 'api-data-types', + label: 'API Data Types', + gradientId: 'block-grad-0', + x: px(0), + y: py(0), + }, + { + id: 'rpc-contracts', + label: 'RPC Contracts', + gradientId: 'block-grad-1', + x: px(1), + y: py(1), + }, + { + id: 'event-schemas', + label: 'Event Schemas', + gradientId: 'block-grad-2', + x: px(2), + y: py(2), + }, + { + id: 'custom-objects', + label: 'Custom Objects', + gradientId: 'block-grad-3', + x: px(3), + y: py(3), + }, + { + id: 'db-schemas', + label: 'DB Schemas', + gradientId: 'block-grad-4', + x: px(4), + y: py(4), + }, + { + id: 'workflows', + label: 'Workflows Definitions', + gradientId: 'block-grad-5', + x: px(5), + y: py(5), + }, + { + id: 'ui-widget', + label: 'UI Widget', + gradientId: 'block-grad-6', + x: px(6), + y: py(6), + }, + { + id: 'components', + label: 'Components Metadata', + gradientId: 'block-grad-7', + x: px(7), + y: py(7), + }, + { + id: 'ml-ai', + label: 'ML/AI Artifacts', + gradientId: 'block-grad-8', + x: px(8), + y: py(8), + }, + { + id: 'policy-settings', + label: 'Policy Settings', + gradientId: 'block-grad-9', + x: px(9), + y: py(9), + }, ]; return ( - {/* Gradient definitions */} + {/* Block gradients */} + {blockGradients.map((grad) => ( + + + + + ))} + + {/* GTS center gradient */} - {/* Glow filters */} + + + + + + + {/* Glow filter for GTS hub */} - + - - - - - - + {/* Subtle shadow for blocks */} + + - {/* Radial gradient for GTS center */} - - - - - - - {/* Animated dash pattern for connections */} - - - + + - {/* Background grid */} - - {Array.from({ length: 12 }).map((_, i) => ( - - ))} - {Array.from({ length: 8 }).map((_, i) => ( + {/* Connecting lines from GTS center to each block */} + {blocks.map((block, index) => { + const grad = blockGradients[index]; + return ( - ))} - - - {/* Conflict markers (only in fragmented state) */} - {!animationState && - conflicts.map((conflict, i) => ( - - - - - - - ⚠ - - - ))} - - {/* GTS Central Hub (only in unified state) */} - {animationState && ( - - {/* Pulsing glow background */} - - - - - - {/* Main hub circle */} - - - {/* Hub logo */} - -
    - {/* GTS Logo - theme aware */} - GTS -
    -     -     - )} - - {/* Connection lines from GTS hub to all blocks (only in unified state) */} - {animationState && - blocks.map((block, index) => { - const pos = getLineEndPosition(index); - return ( - - - - - {/* Data flow particles */} - - - - - ); - })} - - {/* Language blocks */} - {blocks.map((block, index) => { - const pos = animationState ? getBlockPosition(index) : block; - const scale = animationState ? 0.8 : 1; - - return ( - - {/* Block shadow */} - - - {/* Main block */} - - {!animationState && ( - <> - - - - )} - - - {/* Label */} - - {block.label} - - - {/* Status indicator */} - - {!animationState && ( - - )} - - ); })} - {/* Arrows showing incompatibility (only in fragmented state) */} - {!animationState && ( - - - - - - - - - - ( + + + - - + {block.label} + - )} - - {/* Status label */} - - + + - - {animationState - ? '✓ Unified & Interoperable' - : '⚠ Fragmented & Incompatible'} - + +
    + GTS +
    +     ); diff --git a/components/GTSValidator.tsx b/components/GTSValidator.tsx index 3cc5c30..15831a3 100644 --- a/components/GTSValidator.tsx +++ b/components/GTSValidator.tsx @@ -1,11 +1,24 @@ import React, { useState, useEffect } from 'react'; import { Check, X, AlertCircle, Copy, RotateCcw } from 'lucide-react'; +import { validateGtsID, parseGtsID } from '@globaltypesystem/gts-ts'; + +interface SegmentInfo { + segment: string; + vendor: string; + pkg: string; + namespace: string; + typeName: string; + version: string; + isType: boolean; + isUuidTail: boolean; +} interface ValidationResult { isValid: boolean; message: string; - segments?: string[]; - type?: 'schema' | 'instance'; + segmentInfos?: SegmentInfo[]; + kind?: 'base-type' | 'derived-type' | 'instance' | 'wildcard'; + typeRef?: string; } export const GTSValidator: React.FC = () => { @@ -14,84 +27,108 @@ export const GTSValidator: React.FC = () => { const [copied, setCopied] = useState(false); const examples = [ - { label: 'Schema', value: 'gts.x.core.events.type.v1~' }, + { label: 'Type', value: 'gts.x.core.events.type.v1~' }, { - label: 'Instance', - value: 'gts.x.core.events.topic.v1~x.commerce._.orders.v1.0', + label: 'Derived Type', + value: 'gts.x.core.events.type.v1~ven.app._.custom_event.v1~', }, { - label: 'Chain Schema', - value: 'gts.x.core.events.topic.v1~x.commerce._.orders.v1.0~', + label: 'Well-known Instance', + value: 'gts.x.core.events.topic.v1~x.commerce._.orders.v1.0', }, { - label: 'Chain Instance', - value: - 'gts.x.core.acm.user.v1~ven.app._.admin.v1.2~org.system._.permissions.v2.1', + label: 'Anonymous Instance', + value: 'gts.x.core.events.type.v1~123e4567-e89b-12d3-a456-426614174000', }, ]; - // GTS Validation Regexes from the spec - const SINGLE_SEGMENT_REGEX = - /^gts\.([a-z_][a-z0-9_]*)\.([a-z_][a-z0-9_]*)\.([a-z_][a-z0-9_]*)\.([a-z_][a-z0-9_]*)\.v(0|[1-9]\d*)(?:\.(0|[1-9]\d*))?~?$/; - const CHAINED_REGEX = - /^\s*gts\.[a-z_][a-z0-9_]*\.[a-z_][a-z0-9_]*\.[a-z_][a-z0-9_]*\.[a-z_][a-z0-9_]*\.v(0|[1-9]\d*)(?:\.(0|[1-9]\d*))?(?:~[a-z_][a-z0-9_]*\.[a-z_][a-z0-9_]*\.[a-z_][a-z0-9_]*\.[a-z_][a-z0-9_]*\.v(0|[1-9]\d*)(?:\.(0|[1-9]\d*))?)*~?\s*$/; - + // Validation is delegated to the official @globaltypesystem/gts-ts library + // (OP#1 - ID Validation, OP#3 - ID Parsing) so behaviour always tracks the spec. const validateGTS = (value: string): ValidationResult => { if (!value.trim()) { return { isValid: false, message: 'Please enter a GTS identifier' }; } const trimmed = value.trim(); + const validation = validateGtsID(trimmed); - // Check if it's a chained identifier - const isChained = - trimmed.includes('~') && trimmed.split('~').filter((s) => s).length > 1; + if (!validation.ok) { + return { + isValid: false, + message: validation.error || 'Invalid GTS identifier', + }; + } - if (isChained) { - if (CHAINED_REGEX.test(trimmed)) { - const segments = trimmed.split('~').filter((s) => s); - const endsWithTilde = trimmed.endsWith('~'); + if (validation.is_wildcard) { + return { + isValid: true, + message: 'Valid GTS wildcard pattern', + segmentInfos: [ + { + segment: trimmed, + vendor: '', + pkg: '', + namespace: '', + typeName: '', + version: '', + isType: false, + isUuidTail: false, + }, + ], + kind: 'wildcard', + }; + } - return { - isValid: true, - message: `Valid chained GTS identifier with ${segments.length} segment(s)`, - segments, - type: endsWithTilde ? 'schema' : 'instance', - }; - } else { - return { - isValid: false, - message: - 'Invalid chained identifier. All segments except the last must be type IDs (ending with ~)', - }; - } - } else { - if (SINGLE_SEGMENT_REGEX.test(trimmed)) { - const endsWithTilde = trimmed.endsWith('~'); + const parsed = parseGtsID(trimmed); + if (!parsed.ok) { + return { + isValid: false, + message: parsed.error || 'Failed to parse GTS identifier', + }; + } + + const segmentInfos: SegmentInfo[] = parsed.segments.map((s) => ({ + segment: s.segment, + vendor: s.vendor, + pkg: s.package, + namespace: s.namespace, + typeName: s.type, + version: + s.verMinor != null ? `v${s.verMajor}.${s.verMinor}` : `v${s.verMajor}`, + isType: s.isType, + isUuidTail: s.isUuidTail, + })); + + const isType = parsed.is_type_schema ?? trimmed.endsWith('~'); - // GTS v0.7: Reject single-segment instances - if (!endsWithTilde) { - return { - isValid: false, - message: - 'Single-segment instance identifiers are prohibited in GTS v0.7. Well-known instances MUST include a left-hand type segment in a chain (e.g., gts.x.core.events.topic.v1~x.commerce._.orders.v1.0)', - }; - } + let kind: ValidationResult['kind']; + let message: string; + let typeRef: string | undefined; - return { - isValid: true, - message: `Valid GTS ${endsWithTilde ? 'schema (type)' : 'instance'} identifier`, - segments: [trimmed.replace(/~$/, '')], - type: endsWithTilde ? 'schema' : 'instance', - }; + if (isType) { + if (segmentInfos.length === 1) { + kind = 'base-type'; + message = 'Valid GTS Base Type identifier'; } else { - return { - isValid: false, - message: - 'Invalid format. Expected: gts.....v[.][~]', - }; + kind = 'derived-type'; + const baseParts = segmentInfos + .slice(0, -1) + .map((s) => s.segment) + .join(''); + typeRef = baseParts; + message = 'Valid GTS Derived Type identifier'; } + } else { + kind = 'instance'; + const typeParts = segmentInfos + .filter((s) => s.isType) + .map((s) => s.segment) + .join(''); + typeRef = typeParts ? `gts.${typeParts}` : undefined; + message = 'Valid GTS Instance identifier'; } + + return { isValid: true, message, segmentInfos, kind, typeRef }; }; useEffect(() => { @@ -113,7 +150,7 @@ export const GTSValidator: React.FC = () => { }; return ( -
    +
    {/* Editor Header */}
    @@ -169,7 +206,7 @@ export const GTSValidator: React.FC = () => {