@tidecloak/ui-framework 0.0.1

package/src/theme.ts

@@ -0,0 +1,185 @@
+/**
+ * Theme constants for consistent styling across components.
+ * Use CSS variables for runtime theming, constants for TypeScript type safety.
+ */
+
+// Color palette
+export const colors = {
+  // Backgrounds
+  background: {
+    primary: "var(--tc-bg-primary, #ffffff)",
+    secondary: "var(--tc-bg-secondary, #f9fafb)",
+    muted: "var(--tc-bg-muted, #f3f4f6)",
+    overlay: "var(--tc-bg-overlay, rgba(0, 0, 0, 0.5))",
+  },
+  // Foregrounds (text)
+  foreground: {
+    primary: "var(--tc-fg-primary, #111827)",
+    secondary: "var(--tc-fg-secondary, #374151)",
+    muted: "var(--tc-fg-muted, #6b7280)",
+    disabled: "var(--tc-fg-disabled, #9ca3af)",
+  },
+  // Borders
+  border: {
+    default: "var(--tc-border, #e5e7eb)",
+    focus: "var(--tc-border-focus, #3b82f6)",
+    error: "var(--tc-border-error, #dc2626)",
+  },
+  // Status colors
+  status: {
+    success: "var(--tc-success, #16a34a)",
+    successBg: "var(--tc-success-bg, #dcfce7)",
+    error: "var(--tc-error, #dc2626)",
+    errorBg: "var(--tc-error-bg, #fef2f2)",
+    warning: "var(--tc-warning, #f59e0b)",
+    warningBg: "var(--tc-warning-bg, #fef3c7)",
+    info: "var(--tc-info, #3b82f6)",
+    infoBg: "var(--tc-info-bg, #eff6ff)",
+    pending: "var(--tc-pending, #6b7280)",
+    pendingBg: "var(--tc-pending-bg, #f3f4f6)",
+  },
+  // Action colors
+  action: {
+    primary: "var(--tc-action-primary, #3b82f6)",
+    primaryHover: "var(--tc-action-primary-hover, #2563eb)",
+    danger: "var(--tc-action-danger, #dc2626)",
+    dangerHover: "var(--tc-action-danger-hover, #b91c1c)",
+  },
+} as const;
+
+// Spacing scale
+export const spacing = {
+  xs: "0.25rem",
+  sm: "0.5rem",
+  md: "1rem",
+  lg: "1.5rem",
+  xl: "2rem",
+  "2xl": "3rem",
+} as const;
+
+// Border radius
+export const radius = {
+  sm: "0.25rem",
+  md: "0.375rem",
+  lg: "0.5rem",
+  full: "9999px",
+} as const;
+
+// Font sizes
+export const fontSize = {
+  xs: "0.75rem",
+  sm: "0.875rem",
+  base: "1rem",
+  lg: "1.125rem",
+  xl: "1.25rem",
+  "2xl": "1.5rem",
+} as const;
+
+// Z-index scale
+export const zIndex = {
+  dropdown: 50,
+  sticky: 100,
+  modal: 200,
+  overlay: 300,
+  toast: 400,
+} as const;
+
+// Animation durations
+export const duration = {
+  fast: "150ms",
+  normal: "200ms",
+  slow: "300ms",
+} as const;
+
+// Focus ring style (consistent across all interactive elements)
+export const focusRing = {
+  outline: `2px solid ${colors.border.focus}`,
+  outlineOffset: "2px",
+} as const;
+
+// Shadow styles
+export const shadow = {
+  sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+  md: "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
+  lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1)",
+} as const;
+
+// CSS to inject for theming support
+export const themeCSS = `
+  :root {
+    --tc-bg-primary: #ffffff;
+    --tc-bg-secondary: #f9fafb;
+    --tc-bg-muted: #f3f4f6;
+    --tc-bg-overlay: rgba(0, 0, 0, 0.5);
+    --tc-fg-primary: #111827;
+    --tc-fg-secondary: #374151;
+    --tc-fg-muted: #6b7280;
+    --tc-fg-disabled: #9ca3af;
+    --tc-border: #e5e7eb;
+    --tc-border-focus: #3b82f6;
+    --tc-border-error: #dc2626;
+    --tc-success: #16a34a;
+    --tc-success-bg: #dcfce7;
+    --tc-error: #dc2626;
+    --tc-error-bg: #fef2f2;
+    --tc-warning: #f59e0b;
+    --tc-warning-bg: #fef3c7;
+    --tc-info: #3b82f6;
+    --tc-info-bg: #eff6ff;
+    --tc-pending: #6b7280;
+    --tc-pending-bg: #f3f4f6;
+    --tc-action-primary: #3b82f6;
+    --tc-action-primary-hover: #2563eb;
+    --tc-action-danger: #dc2626;
+    --tc-action-danger-hover: #b91c1c;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --tc-bg-primary: #1f2937;
+      --tc-bg-secondary: #111827;
+      --tc-bg-muted: #374151;
+      --tc-bg-overlay: rgba(0, 0, 0, 0.7);
+      --tc-fg-primary: #f9fafb;
+      --tc-fg-secondary: #e5e7eb;
+      --tc-fg-muted: #9ca3af;
+      --tc-fg-disabled: #6b7280;
+      --tc-border: #374151;
+      --tc-border-focus: #60a5fa;
+      --tc-border-error: #f87171;
+      --tc-success: #22c55e;
+      --tc-success-bg: #14532d;
+      --tc-error: #f87171;
+      --tc-error-bg: #7f1d1d;
+      --tc-warning: #fbbf24;
+      --tc-warning-bg: #78350f;
+      --tc-info: #60a5fa;
+      --tc-info-bg: #1e3a8a;
+      --tc-pending: #9ca3af;
+      --tc-pending-bg: #374151;
+      --tc-action-primary: #60a5fa;
+      --tc-action-primary-hover: #3b82f6;
+      --tc-action-danger: #f87171;
+      --tc-action-danger-hover: #dc2626;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+    }
+  }
+`;
+
+// Helper to inject theme CSS (call once at app init)
+export function injectThemeCSS(): void {
+  if (typeof document === "undefined") return;
+  if (document.getElementById("tidecloak-theme")) return;
+
+  const style = document.createElement("style");
+  style.id = "tidecloak-theme";
+  style.textContent = themeCSS;
+  document.head.appendChild(style);
+}

package/src/tide/index.ts

@@ -0,0 +1,19 @@
+/**
+ * Tide Policy Workflow Exports
+ *
+ * These helpers provide the default Tide-based policy creation workflow.
+ * Requires heimdall-tide and asgard-tide libraries to be installed.
+ */
+
+export {
+  loadTideLibs,
+  areTideLibsAvailable,
+  computeContractId,
+  createTidePolicyRequest,
+  createTidePolicyHandler,
+  rolePolicyToTideConfig,
+  DEFAULT_MODEL_IDS,
+  DEFAULT_ROLE_CONTRACT,
+  type TidePolicyConfig,
+  type TideContextMethods,
+} from "./tidePolicy";

package/src/tide/tidePolicy.ts

@@ -0,0 +1,270 @@
+/**
+ * Tide Policy Workflow Helpers
+ *
+ * Provides functions for creating Tide policy requests that can be signed
+ * by the TideCloak context. Uses heimdall-tide and asgard-tide libraries.
+ *
+ * This is the default policy creation workflow used by RolesPage when
+ * Tide libraries are available.
+ */
+
+import type { RolePolicy } from "../components/pages/connected/RolesPage";
+
+// Lazy imports for optional dependencies
+let Policy: any;
+let PolicySignRequest: any;
+let TideMemory: any;
+let ApprovalType: any;
+let ExecutionType: any;
+
+let tideLibsLoaded = false;
+let tideLibsAvailable = false;
+
+/**
+ * Attempts to load the Tide libraries (heimdall-tide and asgard-tide).
+ * Returns true if both libraries are available, false otherwise.
+ */
+export async function loadTideLibs(): Promise<boolean> {
+  if (tideLibsLoaded) return tideLibsAvailable;
+
+  try {
+    const heimdall = await import("heimdall-tide");
+    const asgard = await import("asgard-tide");
+
+    Policy = heimdall.Policy;
+    PolicySignRequest = heimdall.PolicySignRequest;
+    TideMemory = heimdall.TideMemory;
+    ApprovalType = asgard.ApprovalType;
+    ExecutionType = asgard.ExecutionType;
+
+    tideLibsAvailable = true;
+  } catch {
+    tideLibsAvailable = false;
+  }
+
+  tideLibsLoaded = true;
+  return tideLibsAvailable;
+}
+
+/**
+ * Checks if Tide libraries are available without loading them.
+ * Must call loadTideLibs() first.
+ */
+export function areTideLibsAvailable(): boolean {
+  return tideLibsAvailable;
+}
+
+// Default model IDs for different contract types
+export const DEFAULT_MODEL_IDS = {
+  BASIC: "BasicCustom<Role>:BasicCustom<1>",
+  DYNAMIC: "DynamicCustom<Role>:DynamicCustom<1>",
+  DYNAMIC_APPROVED: "DynamicApprovedCustom<Role>:DynamicApprovedCustom<1>",
+} as const;
+
+/**
+ * Default Forseti contract for role-based access control.
+ * This is a simple contract that validates approvers and executors have the required role.
+ */
+export const DEFAULT_ROLE_CONTRACT = `using Ork.Forseti.Sdk;
+using System;
+using System.Collections.Generic;
+
+/// <summary>
+/// Default Role-Based Access Policy.
+/// Validates that approvers and executors have the required role for a resource.
+/// </summary>
+public class RolePolicy : IAccessPolicy
+{
+    [PolicyParam(Required = true, Description = "Role required for access")]
+    public string Role { get; set; }
+
+    [PolicyParam(Required = true, Description = "Resource identifier for role check")]
+    public string Resource { get; set; }
+
+    public PolicyDecision ValidateData(DataContext ctx)
+    {
+        // No data validation needed for role-based policies
+        return PolicyDecision.Allow();
+    }
+
+    public PolicyDecision ValidateApprovers(ApproversContext ctx)
+    {
+        var approvers = DokenDto.WrapAll(ctx.Dokens);
+        return Decision
+            .Require(approvers != null && approvers.Count > 0, "No approver dokens provided")
+            .RequireAnyWithRole(approvers, Resource, Role);
+    }
+
+    public PolicyDecision ValidateExecutor(ExecutorContext ctx)
+    {
+        var executor = new DokenDto(ctx.Doken);
+        return Decision
+            .RequireNotExpired(executor)
+            .RequireRole(executor, Resource, Role);
+    }
+}`;
+
+export interface TidePolicyConfig {
+  roleName: string;
+  threshold: number;
+  approvalType: "implicit" | "explicit";
+  executionType: "public" | "private";
+  modelId?: string;
+  resource: string;
+  vendorId: string;
+  contractCode?: string;
+}
+
+export interface TideContextMethods {
+  initializeTideRequest: <T extends { encode: () => Uint8Array }>(request: T) => Promise<T>;
+  getVendorId: () => string;
+  getResource: () => string;
+}
+
+/**
+ * Computes the contract ID (SHA512 hash) for a Forseti contract source.
+ * This must match what the Ork server computes.
+ */
+export async function computeContractId(source: string): Promise<string> {
+  const encoder = new TextEncoder();
+  const data = encoder.encode(source);
+  const hashBuffer = await crypto.subtle.digest("SHA-512", data);
+  const hashArray = Array.from(new Uint8Array(hashBuffer));
+  return hashArray.map((b) => b.toString(16).padStart(2, "0")).join("");
+}
+
+/**
+ * Creates a Tide PolicySignRequest for a role policy.
+ *
+ * @param config - Policy configuration
+ * @param context - TideCloak context methods for signing
+ * @returns The signed PolicySignRequest
+ * @throws Error if Tide libraries are not available
+ */
+export async function createTidePolicyRequest(
+  config: TidePolicyConfig,
+  context: TideContextMethods
+): Promise<any> {
+  if (!tideLibsAvailable) {
+    throw new Error(
+      "Tide libraries (heimdall-tide, asgard-tide) are not available. " +
+        "Install them or provide a custom onCreatePolicy handler."
+    );
+  }
+
+  const contractCode = config.contractCode || DEFAULT_ROLE_CONTRACT;
+  const contractId = await computeContractId(contractCode);
+
+  // Detect entry type from contract code
+  const entryType = detectEntryType(contractCode) || "RolePolicy";
+
+  // Create policy params
+  const policyParams = new Map<string, any>();
+  policyParams.set("role", config.roleName);
+  policyParams.set("threshold", config.threshold);
+  policyParams.set("resource", config.resource);
+  policyParams.set("approval_type", config.approvalType);
+  policyParams.set("execution_type", config.executionType);
+
+  // Create the Policy object
+  const policy = new Policy({
+    version: "2",
+    modelId: config.modelId || DEFAULT_MODEL_IDS.DYNAMIC_APPROVED,
+    contractId: contractId,
+    keyId: config.vendorId,
+    approvalType: config.approvalType === "explicit" ? ApprovalType.EXPLICIT : ApprovalType.IMPLICIT,
+    executionType: config.executionType === "private" ? ExecutionType.PRIVATE : ExecutionType.PUBLIC,
+    params: policyParams,
+  });
+
+  // Create the PolicySignRequest
+  const policyRequest = PolicySignRequest.New(policy);
+  const policyBytes = policy.toBytes();
+
+  // Create contract transport
+  // Structure: forsetiData[1] = innerPayload = [source, entryType]
+  const contractTypeBytes = new TextEncoder().encode("forseti");
+  const sourceCodeBytes = new TextEncoder().encode(contractCode);
+  const entryTypeBytes = new TextEncoder().encode(entryType);
+  const innerPayload = TideMemory.CreateFromArray([sourceCodeBytes, entryTypeBytes]);
+  const forsetiData = TideMemory.CreateFromArray([new Uint8Array(0), innerPayload]);
+  const contractTransport = TideMemory.CreateFromArray([contractTypeBytes, forsetiData]);
+
+  const draftWithContract = TideMemory.CreateFromArray([policyBytes, contractTransport]);
+  policyRequest.draft = draftWithContract;
+  policyRequest.setCustomExpiry(604800); // 7 days
+
+  // Initialize (sign) the request using TideCloak context
+  const signedRequest = await context.initializeTideRequest(policyRequest);
+
+  return signedRequest;
+}
+
+/**
+ * Detects the entry type (class name) from C# source code.
+ * Looks for a public class implementing IAccessPolicy.
+ */
+function detectEntryType(source: string): string | null {
+  const match = source.match(/public\s+class\s+(\w+)\s*:\s*IAccessPolicy/);
+  return match ? match[1] : null;
+}
+
+/**
+ * Creates a policy creation handler that uses the Tide workflow.
+ * This is used as the default onCreatePolicy in RolesPage when Tide libs are available.
+ *
+ * @param context - TideCloak context methods
+ * @param onRequestCreated - Optional callback when request is created (for custom handling)
+ * @returns Policy creation handler function
+ */
+export function createTidePolicyHandler(
+  context: TideContextMethods,
+  onRequestCreated?: (request: any, roleName: string) => Promise<void>
+) {
+  return async (params: {
+    roleName: string;
+    policyConfig: any;
+    templateId?: string;
+    templateParams?: Record<string, any>;
+    threshold: number;
+    contractCode?: string;
+  }) => {
+    const config: TidePolicyConfig = {
+      roleName: params.roleName,
+      threshold: params.threshold,
+      approvalType: params.policyConfig?.approvalType || "explicit",
+      executionType: params.policyConfig?.executionType || "private",
+      resource: context.getResource(),
+      vendorId: context.getVendorId(),
+      contractCode: params.contractCode,
+      modelId: params.policyConfig?.modelId,
+    };
+
+    const signedRequest = await createTidePolicyRequest(config, context);
+
+    // Call the callback if provided (e.g., to submit to backend)
+    if (onRequestCreated) {
+      await onRequestCreated(signedRequest, params.roleName);
+    }
+
+    return signedRequest;
+  };
+}
+
+/**
+ * Converts a RolePolicy to TidePolicyConfig.
+ * Useful when loading existing policies for re-signing or updates.
+ */
+export function rolePolicyToTideConfig(
+  policy: RolePolicy,
+  context: TideContextMethods
+): TidePolicyConfig {
+  return {
+    roleName: policy.roleName,
+    threshold: policy.threshold,
+    approvalType: policy.approvalType,
+    executionType: policy.executionType,
+    resource: context.getResource(),
+    vendorId: context.getVendorId(),
+  };
+}