@tangle-network/blueprint-ui 0.1.1 → 0.1.2

package/src/host/resolver.ts

@@ -0,0 +1,204 @@
+import type {
+  BlueprintAppEntry,
+  BlueprintAppResolvedView,
+  BlueprintExperienceTier,
+  BlueprintExternalAppTrust,
+  BlueprintPublisher,
+  BlueprintPublisherVerification,
+  BlueprintSlugPolicy,
+  BlueprintUiSurface,
+} from './types';
+
+const EXPERIENCE_TIER_LABELS: Record<BlueprintExperienceTier, string> = {
+  generic: 'Protocol fallback',
+  declarative: 'Declarative blueprint UI',
+  'curated-module': 'Curated app module',
+  'external-app': 'External app handoff',
+};
+
+const SLUG_POLICY_LABELS: Record<BlueprintSlugPolicy, string> = {
+  reserved: 'Reserved slug',
+  'publisher-scoped': 'Publisher-scoped slug',
+  'public-requested': 'Public requested slug',
+};
+
+const SURFACE_LABELS: Record<BlueprintUiSurface, string> = {
+  'generic-overview': 'Generic overview',
+  'service-explorer': 'Service explorer',
+  'service-console': 'Service console',
+  'actions-panel': 'Actions panel',
+  resources: 'Resources',
+  chat: 'Chat',
+  vaults: 'Vaults',
+  metrics: 'Metrics',
+  permissions: 'Permissions',
+};
+
+const PUBLISHER_VERIFICATION_LABELS: Record<
+  BlueprintPublisherVerification,
+  string
+> = {
+  'first-party': 'First-party publisher',
+  verified: 'Verified publisher',
+  unverified: 'Unverified publisher',
+};
+
+const EXTERNAL_APP_TRUST_LABELS: Record<BlueprintExternalAppTrust, string> = {
+  trusted: 'Trusted external app',
+  restricted: 'Restricted external app',
+};
+
+export function buildCanonicalBlueprintSlug(entry: BlueprintAppEntry): string {
+  if (entry.canonicalSlug) {
+    return entry.canonicalSlug;
+  }
+
+  if (entry.slugPolicy === 'reserved' || !entry.publisher.namespace) {
+    return entry.slug;
+  }
+
+  return `@${entry.publisher.namespace}/${entry.slug}`;
+}
+
+export function resolveBlueprintAppView(
+  entry: BlueprintAppEntry,
+): BlueprintAppResolvedView {
+  return {
+    slug: entry.slug,
+    canonicalSlug: buildCanonicalBlueprintSlug(entry),
+    blueprintId: entry.blueprintId,
+    publisher: entry.publisher,
+    tier: entry.tier,
+    slugPolicy: entry.slugPolicy,
+    manifest: entry.manifest,
+    module: entry.module,
+    fallbackEnabled: true,
+  };
+}
+
+export function toBlueprintAppEntry(
+  view: BlueprintAppResolvedView,
+): BlueprintAppEntry {
+  return {
+    slug: view.slug,
+    canonicalSlug: view.canonicalSlug,
+    blueprintId: view.blueprintId,
+    publisher: view.publisher,
+    tier: view.tier,
+    slugPolicy: view.slugPolicy,
+    manifest: view.manifest,
+    module: view.module,
+  };
+}
+
+export function getBlueprintExperienceTierLabel(
+  tier: BlueprintExperienceTier,
+): string {
+  return EXPERIENCE_TIER_LABELS[tier];
+}
+
+export function getBlueprintSlugPolicyLabel(policy: BlueprintSlugPolicy): string {
+  return SLUG_POLICY_LABELS[policy];
+}
+
+export function getBlueprintSurfaceLabel(surface: BlueprintUiSurface): string {
+  return SURFACE_LABELS[surface];
+}
+
+export function getBlueprintPublisherVerificationLabel(
+  verification: BlueprintPublisherVerification,
+): string {
+  return PUBLISHER_VERIFICATION_LABELS[verification];
+}
+
+export function getExternalAppTrustLabel(
+  trust: BlueprintExternalAppTrust,
+): string {
+  return EXTERNAL_APP_TRUST_LABELS[trust];
+}
+
+export function isVerifiedBlueprintPublisher(
+  publisher: BlueprintPublisher,
+): boolean {
+  return (
+    publisher.verification === 'first-party' ||
+    publisher.verification === 'verified'
+  );
+}
+
+export function canPublisherClaimSlug(
+  slug: string,
+  publisher?: Pick<BlueprintPublisher, 'namespace' | 'verification'>,
+  reservedSlugs: Set<string> = new Set(),
+): boolean {
+  if (reservedSlugs.has(slug)) {
+    return false;
+  }
+
+  return (
+    publisher?.namespace !== undefined &&
+    publisher.namespace.trim().length > 0 &&
+    (publisher.verification === 'verified' ||
+      publisher.verification === 'first-party')
+  );
+}
+
+export function isTrustedExternalAppHost(
+  host: string,
+  trustedHosts: readonly string[] = [],
+): boolean {
+  const normalizedHost = host.trim().toLowerCase();
+
+  return trustedHosts.some(
+    (trustedHost) =>
+      normalizedHost === trustedHost || normalizedHost.endsWith(`.${trustedHost}`),
+  );
+}
+
+export function getBlueprintPath(view: BlueprintAppResolvedView): string {
+  if (view.tier === 'curated-module' || view.tier === 'external-app') {
+    return `/blueprints/${view.canonicalSlug}`;
+  }
+
+  if (view.blueprintId !== undefined) {
+    return `/blueprints/${view.blueprintId.toString()}`;
+  }
+
+  return `/blueprints/${view.slug}`;
+}
+
+export function getBlueprintServicePath(
+  view: BlueprintAppResolvedView,
+  serviceId: string,
+): string {
+  if (view.tier === 'curated-module' || view.tier === 'external-app') {
+    return `${getBlueprintPath(view)}/${serviceId}`;
+  }
+
+  return `${getBlueprintPath(view)}/services/${serviceId}`;
+}
+
+export function sanitizeBlueprintSlugPart(value: string): string {
+  return value
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+    .replace(/-{2,}/g, '-');
+}
+
+export function deriveBlueprintRequestedSlug(
+  blueprint: Pick<{ name: string; author: string; id: bigint }, 'name' | 'author' | 'id'>,
+): string {
+  const fromName = sanitizeBlueprintSlugPart(blueprint.name);
+  if (fromName.length > 0) {
+    return fromName;
+  }
+
+  const fromAuthor = sanitizeBlueprintSlugPart(blueprint.author);
+  if (fromAuthor.length > 0) {
+    return `${fromAuthor}-${blueprint.id.toString()}`;
+  }
+
+  return `blueprint-${blueprint.id.toString()}`;
+}

package/src/host/types.ts

@@ -0,0 +1,111 @@
+export type BlueprintAppVisibility = 'first-party' | 'third-party';
+
+export type BlueprintPublisherVerification =
+  | 'first-party'
+  | 'verified'
+  | 'unverified';
+
+export type BlueprintExperienceTier =
+  | 'generic'
+  | 'declarative'
+  | 'curated-module'
+  | 'external-app';
+
+export type BlueprintSlugPolicy =
+  | 'reserved'
+  | 'publisher-scoped'
+  | 'public-requested';
+
+export type BlueprintUiSurface =
+  | 'generic-overview'
+  | 'service-explorer'
+  | 'service-console'
+  | 'actions-panel'
+  | 'resources'
+  | 'chat'
+  | 'vaults'
+  | 'metrics'
+  | 'permissions';
+
+export type BlueprintResourceRoute =
+  | 'bots'
+  | 'agents'
+  | 'runs'
+  | 'vault'
+  | 'chat'
+  | 'custom';
+
+export type BlueprintPermissionScope =
+  | 'blueprint'
+  | 'service'
+  | 'resource';
+
+export type BlueprintExternalAppMode = 'link' | 'iframe';
+export type BlueprintExternalAppTrust = 'trusted' | 'restricted';
+
+export type BlueprintPublisher = {
+  label: string;
+  namespace?: string;
+  visibility: BlueprintAppVisibility;
+  verification: BlueprintPublisherVerification;
+};
+
+export type BlueprintResourceModel = {
+  serviceNoun: string;
+  resourceNoun: string;
+  resourceRoute?: BlueprintResourceRoute;
+};
+
+export type BlueprintPermissionDescriptor = {
+  key: string;
+  label: string;
+  scope: BlueprintPermissionScope;
+  description?: string;
+};
+
+export type BlueprintExternalAppConfig = {
+  url: string;
+  mode: BlueprintExternalAppMode;
+  label?: string;
+  host: string;
+  trust: BlueprintExternalAppTrust;
+  reason?: string;
+};
+
+export type BlueprintUiManifest = {
+  displayName: string;
+  tagline: string;
+  description: string;
+  surfaces: BlueprintUiSurface[];
+  resources: BlueprintResourceModel;
+  permissions?: BlueprintPermissionDescriptor[];
+  externalApp?: BlueprintExternalAppConfig;
+};
+
+export type BlueprintAppModuleBinding = {
+  moduleId: string;
+  status: 'active' | 'planned';
+};
+
+export type BlueprintAppEntry = {
+  slug: string;
+  canonicalSlug?: string;
+  blueprintId?: bigint;
+  publisher: BlueprintPublisher;
+  tier: BlueprintExperienceTier;
+  slugPolicy: BlueprintSlugPolicy;
+  manifest: BlueprintUiManifest;
+  module?: BlueprintAppModuleBinding;
+};
+
+export type BlueprintAppResolvedView = {
+  slug: string;
+  canonicalSlug: string;
+  blueprintId?: bigint;
+  publisher: BlueprintPublisher;
+  tier: BlueprintExperienceTier;
+  slugPolicy: BlueprintSlugPolicy;
+  manifest: BlueprintUiManifest;
+  module?: BlueprintAppModuleBinding;
+  fallbackEnabled: boolean;
+};

package/src/index.ts

@@ -61,9 +61,49 @@ export {
   getJobById,
 } from './blueprints/registry';
 
+// ── Blueprint Host ──
+export type {
+  BlueprintAppVisibility,
+  BlueprintPublisherVerification,
+  BlueprintExperienceTier,
+  BlueprintSlugPolicy,
+  BlueprintUiSurface,
+  BlueprintResourceRoute,
+  BlueprintPermissionScope,
+  BlueprintExternalAppMode,
+  BlueprintExternalAppTrust,
+  BlueprintPublisher,
+  BlueprintResourceModel,
+  BlueprintPermissionDescriptor,
+  BlueprintExternalAppConfig,
+  BlueprintUiManifest,
+  BlueprintAppModuleBinding,
+  BlueprintAppEntry,
+  BlueprintAppResolvedView,
+} from './host';
+export {
+  buildCanonicalBlueprintSlug,
+  resolveBlueprintAppView,
+  toBlueprintAppEntry,
+  getBlueprintExperienceTierLabel,
+  getBlueprintSlugPolicyLabel,
+  getBlueprintSurfaceLabel,
+  getBlueprintPublisherVerificationLabel,
+  getExternalAppTrustLabel,
+  isVerifiedBlueprintPublisher,
+  canPublisherClaimSlug,
+  isTrustedExternalAppHost,
+  getBlueprintPath,
+  getBlueprintServicePath,
+  sanitizeBlueprintSlugPart,
+  deriveBlueprintRequestedSlug,
+} from './host';
+export type { BlueprintHostHeroProps, BlueprintHostPanelProps } from './host';
+export { BlueprintHostHero, BlueprintHostPanel } from './host';
+
 // ── Hooks ──
 export type { DiscoveredOperator } from './hooks/useOperators';
-export { useOperators } from './hooks/useOperators';
+export { discoverOperatorsWithClient, useOperators } from './hooks/useOperators';
 export type { JobFormState } from './hooks/useJobForm';
 export { useJobForm } from './hooks/useJobForm';
 export type { JobQuote, UseJobPriceResult, JobPriceEntry, UseJobPricesResult } from './hooks/useJobPrice';

package/src/stores/infra.ts

@@ -1,7 +1,8 @@
 import { persistedAtom } from './persistedAtom';
+import { getEnvVar } from '../utils/env';
 
-const defaultBlueprintId = import.meta.env.VITE_BLUEPRINT_ID ?? '0';
-const defaultServiceId = import.meta.env.VITE_SERVICE_ID ?? import.meta.env.VITE_SERVICE_IDS?.split(',')[0] ?? '0';
+const defaultBlueprintId = getEnvVar('VITE_BLUEPRINT_ID') ?? '0';
+const defaultServiceId = getEnvVar('VITE_SERVICE_ID') ?? getEnvVar('VITE_SERVICE_IDS')?.split(',')[0] ?? '0';
 
 export interface OperatorInfo {
   address: string;

package/src/styles.css

@@ -0,0 +1,128 @@
+:root,
+.bp-tone-cloud {
+  --bp-font-display: var(--font-display, 'Outfit', system-ui, sans-serif);
+  --bp-font-data: var(--font-data, 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace);
+
+  --bp-glass-bg: var(--glass-bg, transparent);
+  --bp-glass-bg-strong: var(--glass-bg-strong, var(--bp-glass-bg, transparent));
+  --bp-glass-border: var(--glass-border, transparent);
+  --bp-glass-border-hover: var(--glass-border-hover, var(--bp-glass-border, transparent));
+  --bp-glass-blur: var(--glass-blur, 0px);
+  --bp-glass-blur-strong: 24px;
+
+  --bp-elements-borderColor: var(--cloud-elements-borderColor, rgba(240, 240, 245, 0.06));
+  --bp-elements-borderColorActive: var(--cloud-elements-borderColorActive, #8B5CF6);
+
+  --bp-elements-bg-depth-1: var(--cloud-elements-bg-depth-1, #0A0A0F);
+  --bp-elements-bg-depth-2: var(--cloud-elements-bg-depth-2, #12121A);
+  --bp-elements-bg-depth-3: var(--cloud-elements-bg-depth-3, #1A1A25);
+  --bp-elements-bg-depth-4: var(--cloud-elements-bg-depth-4, #22222E);
+
+  --bp-elements-textPrimary: var(--cloud-elements-textPrimary, #F0F0F5);
+  --bp-elements-textSecondary: var(--cloud-elements-textSecondary, #8A8A9E);
+  --bp-elements-textTertiary: var(--cloud-elements-textTertiary, #5A5A6E);
+
+  --bp-elements-button-primary-background: var(--cloud-elements-button-primary-background, rgba(142, 89, 255, 0.14));
+  --bp-elements-button-primary-backgroundHover: var(--cloud-elements-button-primary-backgroundHover, rgba(142, 89, 255, 0.24));
+  --bp-elements-button-primary-text: var(--cloud-elements-button-primary-text, #A87BFF);
+
+  --bp-elements-button-secondary-background: var(--cloud-elements-button-secondary-background, rgba(240, 240, 245, 0.06));
+  --bp-elements-button-secondary-backgroundHover: var(--cloud-elements-button-secondary-backgroundHover, rgba(240, 240, 245, 0.10));
+  --bp-elements-button-secondary-text: var(--cloud-elements-button-secondary-text, #F0F0F5);
+
+  --bp-elements-button-danger-background: var(--cloud-elements-button-danger-background, rgba(255, 59, 92, 0.12));
+  --bp-elements-button-danger-backgroundHover: var(--cloud-elements-button-danger-backgroundHover, rgba(255, 59, 92, 0.20));
+  --bp-elements-button-danger-text: var(--cloud-elements-button-danger-text, #FF3B5C);
+
+  --bp-elements-icon-success: var(--cloud-elements-icon-success, #38B2AC);
+  --bp-elements-icon-error: var(--cloud-elements-icon-error, #FF4D6A);
+  --bp-elements-icon-warning: var(--cloud-elements-icon-warning, #FFB800);
+  --bp-elements-icon-primary: var(--cloud-elements-icon-primary, #F0F0F5);
+  --bp-elements-icon-secondary: var(--cloud-elements-icon-secondary, #5A5A6E);
+
+  --bp-elements-dividerColor: var(--cloud-elements-dividerColor, rgba(240, 240, 245, 0.06));
+  --bp-elements-item-backgroundHover: var(--cloud-elements-item-backgroundHover, rgba(240, 240, 245, 0.03));
+  --bp-elements-item-backgroundActive: var(--cloud-elements-item-backgroundActive, rgba(240, 240, 245, 0.06));
+  --bp-elements-focus: var(--cloud-elements-focus, #8B5CF6);
+}
+
+.bp-tone-arena {
+  --bp-elements-borderColor: var(--arena-elements-borderColor, var(--bp-elements-borderColor));
+  --bp-elements-borderColorActive: var(--arena-elements-borderColorActive, var(--bp-elements-borderColorActive));
+
+  --bp-elements-bg-depth-1: var(--arena-elements-bg-depth-1, var(--bp-elements-bg-depth-1));
+  --bp-elements-bg-depth-2: var(--arena-elements-bg-depth-2, var(--bp-elements-bg-depth-2));
+  --bp-elements-bg-depth-3: var(--arena-elements-bg-depth-3, var(--bp-elements-bg-depth-3));
+  --bp-elements-bg-depth-4: var(--arena-elements-bg-depth-4, var(--bp-elements-bg-depth-4));
+
+  --bp-elements-textPrimary: var(--arena-elements-textPrimary, var(--bp-elements-textPrimary));
+  --bp-elements-textSecondary: var(--arena-elements-textSecondary, var(--bp-elements-textSecondary));
+  --bp-elements-textTertiary: var(--arena-elements-textTertiary, var(--bp-elements-textTertiary));
+
+  --bp-elements-button-primary-background: var(--arena-elements-button-primary-background, var(--bp-elements-button-primary-background));
+  --bp-elements-button-primary-backgroundHover: var(--arena-elements-button-primary-backgroundHover, var(--bp-elements-button-primary-backgroundHover));
+  --bp-elements-button-primary-text: var(--arena-elements-button-primary-text, var(--bp-elements-button-primary-text));
+
+  --bp-elements-button-secondary-background: var(--arena-elements-button-secondary-background, var(--bp-elements-button-secondary-background));
+  --bp-elements-button-secondary-backgroundHover: var(--arena-elements-button-secondary-backgroundHover, var(--bp-elements-button-secondary-backgroundHover));
+  --bp-elements-button-secondary-text: var(--arena-elements-button-secondary-text, var(--bp-elements-button-secondary-text));
+
+  --bp-elements-button-danger-background: var(--arena-elements-button-danger-background, var(--bp-elements-button-danger-background));
+  --bp-elements-button-danger-backgroundHover: var(--arena-elements-button-danger-backgroundHover, var(--bp-elements-button-danger-backgroundHover));
+  --bp-elements-button-danger-text: var(--arena-elements-button-danger-text, var(--bp-elements-button-danger-text));
+
+  --bp-elements-icon-success: var(--arena-elements-icon-success, var(--bp-elements-icon-success));
+  --bp-elements-icon-error: var(--arena-elements-icon-error, var(--bp-elements-icon-error));
+  --bp-elements-icon-warning: var(--arena-elements-icon-warning, var(--bp-elements-icon-warning));
+  --bp-elements-icon-primary: var(--arena-elements-icon-primary, var(--bp-elements-icon-primary));
+  --bp-elements-icon-secondary: var(--arena-elements-icon-secondary, var(--bp-elements-icon-secondary));
+
+  --bp-elements-dividerColor: var(--arena-elements-dividerColor, var(--bp-elements-dividerColor));
+  --bp-elements-item-backgroundHover: var(--arena-elements-item-backgroundHover, var(--bp-elements-item-backgroundHover));
+  --bp-elements-item-backgroundActive: var(--arena-elements-item-backgroundActive, var(--bp-elements-item-backgroundActive));
+  --bp-elements-focus: var(--arena-elements-focus, var(--bp-elements-focus));
+}
+
+.font-display {
+  font-family: var(--bp-font-display);
+}
+
+.font-data {
+  font-family: var(--bp-font-data);
+  font-feature-settings: 'tnum' 1;
+}
+
+.glass {
+  background: var(--bp-glass-bg);
+  backdrop-filter: blur(var(--bp-glass-blur));
+  -webkit-backdrop-filter: blur(var(--bp-glass-blur));
+  border: 1px solid var(--bp-glass-border);
+}
+
+.glass-hover {
+  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
+}
+
+.glass-hover:hover {
+  background: var(--bp-glass-bg-strong);
+  border-color: var(--bp-glass-border-hover);
+}
+
+.glass-card {
+  background: var(--bp-glass-bg);
+  backdrop-filter: blur(var(--bp-glass-blur));
+  -webkit-backdrop-filter: blur(var(--bp-glass-blur));
+  border: 1px solid var(--bp-glass-border);
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.glass-card:hover {
+  border-color: var(--bp-glass-border-hover);
+}
+
+.glass-card-strong {
+  background: var(--bp-glass-bg-strong);
+  backdrop-filter: blur(var(--bp-glass-blur-strong));
+  -webkit-backdrop-filter: blur(var(--bp-glass-blur-strong));
+  border: 1px solid var(--bp-glass-border);
+}

package/src/utils/env.ts

@@ -0,0 +1,22 @@
+type ImportMetaEnvLike = {
+  DEV?: boolean;
+  VITE_RPC_URL?: string;
+  VITE_CHAIN_ID?: string;
+  VITE_BLUEPRINT_ID?: string;
+  VITE_SERVICE_ID?: string;
+  VITE_SERVICE_IDS?: string;
+  VITE_OPERATOR_API_URL?: string;
+};
+
+function readImportMetaEnv(): ImportMetaEnvLike {
+  return ((import.meta as ImportMeta & { env?: ImportMetaEnvLike }).env ?? {});
+}
+
+export function getEnvVar(key: keyof ImportMetaEnvLike): string | undefined {
+  const value = readImportMetaEnv()[key];
+  return typeof value === 'string' ? value : undefined;
+}
+
+export function isDevEnv(): boolean {
+  return Boolean(readImportMetaEnv().DEV);
+}