@contractspec/bundle.library 3.4.2 → 3.5.0

package/dist/components/docs/specs/SpecsOverviewPage.js

@@ -2,347 +2,347 @@
 // src/components/docs/specs/SpecsOverviewPage.tsx
 import Link from "@contractspec/lib.ui-link";
 import { ChevronRight } from "lucide-react";
-import { jsxDEV } from "react/jsx-dev-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 function SpecsOverviewPage() {
-  return /* @__PURE__ */ jsxDEV("div", {
+  return /* @__PURE__ */ jsxs("div", {
     className: "space-y-8",
     children: [
-      /* @__PURE__ */ jsxDEV("div", {
+      /* @__PURE__ */ jsxs("div", {
         className: "space-y-4",
         children: [
-          /* @__PURE__ */ jsxDEV("h1", {
+          /* @__PURE__ */ jsx("h1", {
             className: "text-4xl font-bold",
             children: "Specifications Overview"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV("p", {
+          }),
+          /* @__PURE__ */ jsxs("p", {
             className: "text-muted-foreground",
             children: [
               "ContractSpec is built on a ",
-              /* @__PURE__ */ jsxDEV("strong", {
+              /* @__PURE__ */ jsx("strong", {
                 children: "spec-first"
-              }, undefined, false, undefined, this),
+              }),
               " philosophy. You define declarative TypeScript specifications that describe what your application can do. Runtime adapters automatically serve these specs as type-safe API endpoints (REST, GraphQL, MCP), enforce policies, and validate inputs/outputs\u2014no code generation required."
             ]
-          }, undefined, true, undefined, this)
+          })
         ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV("div", {
+      }),
+      /* @__PURE__ */ jsxs("div", {
         className: "space-y-4",
         children: [
-          /* @__PURE__ */ jsxDEV("h2", {
+          /* @__PURE__ */ jsx("h2", {
             className: "text-2xl font-bold",
             children: "Why spec-first matters"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV("p", {
+          }),
+          /* @__PURE__ */ jsx("p", {
             className: "text-muted-foreground",
             children: "Traditional development requires writing and maintaining separate code for APIs, databases, UI components, validation logic, and access control. This approach leads to:"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV("ul", {
+          }),
+          /* @__PURE__ */ jsxs("ul", {
             className: "text-muted-foreground list-inside list-disc space-y-2",
             children: [
-              /* @__PURE__ */ jsxDEV("li", {
+              /* @__PURE__ */ jsx("li", {
                 children: "Duplication across front-end and back-end"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV("li", {
+              }),
+              /* @__PURE__ */ jsx("li", {
                 children: "Type mismatches and runtime errors"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV("li", {
+              }),
+              /* @__PURE__ */ jsx("li", {
                 children: "Security vulnerabilities from inconsistent policy enforcement"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV("li", {
+              }),
+              /* @__PURE__ */ jsx("li", {
                 children: "High maintenance burden when requirements change"
-              }, undefined, false, undefined, this)
+              })
             ]
-          }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV("p", {
+          }),
+          /* @__PURE__ */ jsxs("p", {
             className: "text-muted-foreground",
             children: [
               "With ContractSpec, you define your application's operations (Commands/Queries), workflows, and policies in pure TypeScript. Runtime adapters ensure consistency, type safety, and policy enforcement across your entire stack\u2014the spec ",
-              /* @__PURE__ */ jsxDEV("em", {
+              /* @__PURE__ */ jsx("em", {
                 children: "is"
-              }, undefined, false, undefined, this),
+              }),
               " the implementation."
             ]
-          }, undefined, true, undefined, this)
+          })
         ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV("div", {
+      }),
+      /* @__PURE__ */ jsxs("div", {
         className: "space-y-4",
         children: [
-          /* @__PURE__ */ jsxDEV("h2", {
+          /* @__PURE__ */ jsx("h2", {
             className: "text-2xl font-bold",
             children: "Specification types"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV("div", {
+          }),
+          /* @__PURE__ */ jsx("div", {
             className: "border-border/50 overflow-x-auto rounded-lg border",
-            children: /* @__PURE__ */ jsxDEV("table", {
+            children: /* @__PURE__ */ jsxs("table", {
               className: "w-full text-left text-sm",
               children: [
-                /* @__PURE__ */ jsxDEV("thead", {
+                /* @__PURE__ */ jsx("thead", {
                   className: "bg-card/50",
-                  children: /* @__PURE__ */ jsxDEV("tr", {
+                  children: /* @__PURE__ */ jsxs("tr", {
                     className: "border-border/50 border-b",
                     children: [
-                      /* @__PURE__ */ jsxDEV("th", {
+                      /* @__PURE__ */ jsx("th", {
                         className: "px-4 py-3 font-semibold",
                         children: "Spec Type"
-                      }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV("th", {
+                      }),
+                      /* @__PURE__ */ jsx("th", {
                         className: "px-4 py-3 font-semibold",
                         children: "Purpose"
-                      }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV("th", {
+                      }),
+                      /* @__PURE__ */ jsx("th", {
                         className: "px-4 py-3 font-semibold",
                         children: "Generates"
-                      }, undefined, false, undefined, this)
+                      })
                     ]
-                  }, undefined, true, undefined, this)
-                }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV("tbody", {
+                  })
+                }),
+                /* @__PURE__ */ jsxs("tbody", {
                   className: "divide-border/50 divide-y",
                   children: [
-                    /* @__PURE__ */ jsxDEV("tr", {
+                    /* @__PURE__ */ jsxs("tr", {
                       children: [
-                        /* @__PURE__ */ jsxDEV("td", {
+                        /* @__PURE__ */ jsx("td", {
                           className: "px-4 py-3 align-top",
-                          children: /* @__PURE__ */ jsxDEV(Link, {
+                          children: /* @__PURE__ */ jsx(Link, {
                             href: "/docs/specs/capabilities",
                             className: "text-violet-400 hover:text-violet-300",
-                            children: /* @__PURE__ */ jsxDEV("strong", {
+                            children: /* @__PURE__ */ jsx("strong", {
                               children: "CapabilitySpec"
-                            }, undefined, false, undefined, this)
-                          }, undefined, false, undefined, this)
-                        }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV("td", {
+                            })
+                          })
+                        }),
+                        /* @__PURE__ */ jsx("td", {
                           className: "px-4 py-3 align-top",
                           children: "Defines what your application can do: operations (Commands/Queries), their inputs, outputs, policies, and side effects."
-                        }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV("td", {
+                        }),
+                        /* @__PURE__ */ jsx("td", {
                           className: "px-4 py-3 align-top",
                           children: "Runtime-served REST/GraphQL/MCP endpoints, Zod validation, policy enforcement"
-                        }, undefined, false, undefined, this)
+                        })
                       ]
-                    }, undefined, true, undefined, this),
-                    /* @__PURE__ */ jsxDEV("tr", {
+                    }),
+                    /* @__PURE__ */ jsxs("tr", {
                       children: [
-                        /* @__PURE__ */ jsxDEV("td", {
+                        /* @__PURE__ */ jsx("td", {
                           className: "px-4 py-3 align-top",
-                          children: /* @__PURE__ */ jsxDEV("strong", {
+                          children: /* @__PURE__ */ jsx("strong", {
                             children: "DataViewSpec"
-                          }, undefined, false, undefined, this)
-                        }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV("td", {
+                          })
+                        }),
+                        /* @__PURE__ */ jsx("td", {
                           className: "px-4 py-3 align-top",
                           children: "Describes how data should be queried, filtered, sorted, and presented to users."
-                        }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV("td", {
+                        }),
+                        /* @__PURE__ */ jsx("td", {
                           className: "px-4 py-3 align-top",
                           children: "Database queries, list/detail views, search interfaces"
-                        }, undefined, false, undefined, this)
+                        })
                       ]
-                    }, undefined, true, undefined, this),
-                    /* @__PURE__ */ jsxDEV("tr", {
+                    }),
+                    /* @__PURE__ */ jsxs("tr", {
                       children: [
-                        /* @__PURE__ */ jsxDEV("td", {
+                        /* @__PURE__ */ jsx("td", {
                           className: "px-4 py-3 align-top",
-                          children: /* @__PURE__ */ jsxDEV(Link, {
+                          children: /* @__PURE__ */ jsx(Link, {
                             href: "/docs/specs/workflows",
                             className: "text-violet-400 hover:text-violet-300",
-                            children: /* @__PURE__ */ jsxDEV("strong", {
+                            children: /* @__PURE__ */ jsx("strong", {
                               children: "WorkflowSpec"
-                            }, undefined, false, undefined, this)
-                          }, undefined, false, undefined, this)
-                        }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV("td", {
+                            })
+                          })
+                        }),
+                        /* @__PURE__ */ jsx("td", {
                           className: "px-4 py-3 align-top",
                           children: "Orchestrates multi-step processes with retries, compensation, and monitoring."
-                        }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV("td", {
+                        }),
+                        /* @__PURE__ */ jsx("td", {
                           className: "px-4 py-3 align-top",
                           children: "Workflow engine, state machines, retry logic, observability hooks"
-                        }, undefined, false, undefined, this)
+                        })
                       ]
-                    }, undefined, true, undefined, this),
-                    /* @__PURE__ */ jsxDEV("tr", {
+                    }),
+                    /* @__PURE__ */ jsxs("tr", {
                       children: [
-                        /* @__PURE__ */ jsxDEV("td", {
+                        /* @__PURE__ */ jsx("td", {
                           className: "px-4 py-3 align-top",
-                          children: /* @__PURE__ */ jsxDEV("strong", {
+                          children: /* @__PURE__ */ jsx("strong", {
                             children: "PolicySpec"
-                          }, undefined, false, undefined, this)
-                        }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV("td", {
+                          })
+                        }),
+                        /* @__PURE__ */ jsx("td", {
                           className: "px-4 py-3 align-top",
                           children: "Defines who can do what, when, and under what conditions. Supports ABAC and PII rules."
-                        }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV("td", {
+                        }),
+                        /* @__PURE__ */ jsx("td", {
                           className: "px-4 py-3 align-top",
                           children: "Policy decision points, access control middleware, audit logs"
-                        }, undefined, false, undefined, this)
+                        })
                       ]
-                    }, undefined, true, undefined, this),
-                    /* @__PURE__ */ jsxDEV("tr", {
+                    }),
+                    /* @__PURE__ */ jsxs("tr", {
                       children: [
-                        /* @__PURE__ */ jsxDEV("td", {
+                        /* @__PURE__ */ jsx("td", {
                           className: "px-4 py-3 align-top",
-                          children: /* @__PURE__ */ jsxDEV("strong", {
+                          children: /* @__PURE__ */ jsx("strong", {
                             children: "OverlaySpec"
-                          }, undefined, false, undefined, this)
-                        }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV("td", {
+                          })
+                        }),
+                        /* @__PURE__ */ jsx("td", {
                           className: "px-4 py-3 align-top",
                           children: "Allows safe, signed customization of UI layouts and field visibility by tenants or users."
-                        }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV("td", {
+                        }),
+                        /* @__PURE__ */ jsx("td", {
                           className: "px-4 py-3 align-top",
                           children: "Personalized UI components, layout variations, conditional rendering"
-                        }, undefined, false, undefined, this)
+                        })
                       ]
-                    }, undefined, true, undefined, this),
-                    /* @__PURE__ */ jsxDEV("tr", {
+                    }),
+                    /* @__PURE__ */ jsxs("tr", {
                       children: [
-                        /* @__PURE__ */ jsxDEV("td", {
+                        /* @__PURE__ */ jsx("td", {
                           className: "px-4 py-3 align-top",
-                          children: /* @__PURE__ */ jsxDEV("strong", {
+                          children: /* @__PURE__ */ jsx("strong", {
                             children: "TelemetrySpec"
-                          }, undefined, false, undefined, this)
-                        }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV("td", {
+                          })
+                        }),
+                        /* @__PURE__ */ jsx("td", {
                           className: "px-4 py-3 align-top",
                           children: "Specifies what metrics, logs, and traces to collect for observability."
-                        }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV("td", {
+                        }),
+                        /* @__PURE__ */ jsx("td", {
                           className: "px-4 py-3 align-top",
                           children: "Instrumentation code, dashboards, alerting rules"
-                        }, undefined, false, undefined, this)
+                        })
                       ]
-                    }, undefined, true, undefined, this),
-                    /* @__PURE__ */ jsxDEV("tr", {
+                    }),
+                    /* @__PURE__ */ jsxs("tr", {
                       children: [
-                        /* @__PURE__ */ jsxDEV("td", {
+                        /* @__PURE__ */ jsx("td", {
                           className: "px-4 py-3 align-top",
-                          children: /* @__PURE__ */ jsxDEV(Link, {
+                          children: /* @__PURE__ */ jsx(Link, {
                             href: "/docs/safety/migrations",
                             className: "text-violet-400 hover:text-violet-300",
-                            children: /* @__PURE__ */ jsxDEV("strong", {
+                            children: /* @__PURE__ */ jsx("strong", {
                               children: "MigrationSpec"
-                            }, undefined, false, undefined, this)
-                          }, undefined, false, undefined, this)
-                        }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV("td", {
+                            })
+                          })
+                        }),
+                        /* @__PURE__ */ jsx("td", {
                           className: "px-4 py-3 align-top",
                           children: "Manages incremental, reversible schema and data migrations."
-                        }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV("td", {
+                        }),
+                        /* @__PURE__ */ jsx("td", {
                           className: "px-4 py-3 align-top",
                           children: "Migration scripts, rollback procedures, version tracking"
-                        }, undefined, false, undefined, this)
+                        })
                       ]
-                    }, undefined, true, undefined, this)
+                    })
                   ]
-                }, undefined, true, undefined, this)
+                })
               ]
-            }, undefined, true, undefined, this)
-          }, undefined, false, undefined, this)
+            })
+          })
         ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV("div", {
+      }),
+      /* @__PURE__ */ jsxs("div", {
         className: "space-y-4",
         children: [
-          /* @__PURE__ */ jsxDEV("h2", {
+          /* @__PURE__ */ jsx("h2", {
             className: "text-2xl font-bold",
             children: "How specs work together"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV("p", {
+          }),
+          /* @__PURE__ */ jsxs("p", {
             className: "text-muted-foreground",
             children: [
               "Specs compose naturally. A ",
-              /* @__PURE__ */ jsxDEV("strong", {
+              /* @__PURE__ */ jsx("strong", {
                 children: "WorkflowSpec"
-              }, undefined, false, undefined, this),
+              }),
               " can invoke multiple ",
-              /* @__PURE__ */ jsxDEV("strong", {
+              /* @__PURE__ */ jsx("strong", {
                 children: "CapabilitySpecs"
-              }, undefined, false, undefined, this),
+              }),
               ". A",
               " ",
-              /* @__PURE__ */ jsxDEV("strong", {
+              /* @__PURE__ */ jsx("strong", {
                 children: "DataViewSpec"
-              }, undefined, false, undefined, this),
+              }),
               " respects ",
-              /* @__PURE__ */ jsxDEV("strong", {
+              /* @__PURE__ */ jsx("strong", {
                 children: "PolicySpecs"
-              }, undefined, false, undefined, this),
+              }),
               " to filter sensitive fields. An ",
-              /* @__PURE__ */ jsxDEV("strong", {
+              /* @__PURE__ */ jsx("strong", {
                 children: "OverlaySpec"
-              }, undefined, false, undefined, this),
+              }),
               " can hide or rearrange UI elements generated from a ",
-              /* @__PURE__ */ jsxDEV("strong", {
+              /* @__PURE__ */ jsx("strong", {
                 children: "CapabilitySpec"
-              }, undefined, false, undefined, this),
+              }),
               ", but only within the bounds allowed by the underlying policy."
             ]
-          }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV("p", {
+          }),
+          /* @__PURE__ */ jsx("p", {
             className: "text-muted-foreground",
             children: "This composability means you can build complex applications from simple, reusable building blocks\u2014all while maintaining type safety and policy enforcement."
-          }, undefined, false, undefined, this)
+          })
         ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV("div", {
+      }),
+      /* @__PURE__ */ jsxs("div", {
         className: "space-y-4",
         children: [
-          /* @__PURE__ */ jsxDEV("h2", {
+          /* @__PURE__ */ jsx("h2", {
             className: "text-2xl font-bold",
             children: "Next steps"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV("p", {
+          }),
+          /* @__PURE__ */ jsx("p", {
             className: "text-muted-foreground",
             children: "Explore each specification type in detail using the links in the table above, or continue with the core concepts:"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV("div", {
+          }),
+          /* @__PURE__ */ jsxs("div", {
             className: "flex flex-wrap gap-4 pt-4",
             children: [
-              /* @__PURE__ */ jsxDEV(Link, {
+              /* @__PURE__ */ jsxs(Link, {
                 href: "/docs/specs/capabilities",
                 className: "btn-primary",
                 children: [
                   "Capabilities ",
-                  /* @__PURE__ */ jsxDEV(ChevronRight, {
+                  /* @__PURE__ */ jsx(ChevronRight, {
                     size: 16,
                     className: "inline"
-                  }, undefined, false, undefined, this)
+                  })
                 ]
-              }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV(Link, {
+              }),
+              /* @__PURE__ */ jsxs(Link, {
                 href: "/docs/specs/workflows",
                 className: "btn-ghost",
                 children: [
                   "Workflows ",
-                  /* @__PURE__ */ jsxDEV(ChevronRight, {
+                  /* @__PURE__ */ jsx(ChevronRight, {
                     size: 16,
                     className: "inline"
-                  }, undefined, false, undefined, this)
+                  })
                 ]
-              }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV(Link, {
+              }),
+              /* @__PURE__ */ jsxs(Link, {
                 href: "/docs/safety",
                 className: "btn-ghost",
                 children: [
                   "Safety Features ",
-                  /* @__PURE__ */ jsxDEV(ChevronRight, {
+                  /* @__PURE__ */ jsx(ChevronRight, {
                     size: 16,
                     className: "inline"
-                  }, undefined, false, undefined, this)
+                  })
                 ]
-              }, undefined, true, undefined, this)
+              })
             ]
-          }, undefined, true, undefined, this)
+          })
         ]
-      }, undefined, true, undefined, this)
+      })
     ]
-  }, undefined, true, undefined, this);
+  });
 }
 export {
   SpecsOverviewPage