@ciderpress/ui 1.0.0-rc.16 → 1.0.0-rc.17

package/dist/theme/components/openapi/openapi.css

@@ -8,7 +8,7 @@
 /* ── Two-column operation layout ───────────────────────────── */
 .cp-oas-operation {
   display: grid;
-  grid-template-columns: 55% 45%;
+  grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
   gap: 2rem;
   padding: 1rem 0;
 }
@@ -24,7 +24,7 @@
   min-width: 0;
 }
 
-@media (max-width: 960px) {
+@media (max-width: 1280px) {
   .cp-oas-operation {
     grid-template-columns: 1fr;
   }
@@ -119,6 +119,11 @@
 }
 
 /* ── Sidebar method badge + path ───────────────────────────── */
+.rp-sidebar-item__left:has(.cp-oas-sidebar-badge) {
+  /* Preserve the active row while tightening Rspress's depth-2 inline indent. */
+  margin-left: -12px;
+}
+
 .cp-oas-sidebar-badge {
   display: inline-block;
   padding: 1px 6px;
@@ -194,10 +199,22 @@
   margin: 1rem 0 0.5rem;
 }
 
-.cp-oas-parameters__table {
+.rp-doc .cp-oas-parameters__table {
   width: 100%;
+  table-layout: fixed;
   border-collapse: collapse;
   font-size: 0.875rem;
+  margin: 0;
+}
+
+.cp-oas-parameters__table-scroll {
+  overflow-x: auto;
+}
+
+@media (max-width: 640px) {
+  .rp-doc .cp-oas-parameters__table {
+    min-width: 36rem;
+  }
 }
 
 .cp-oas-parameters__table th {
@@ -214,6 +231,7 @@
   color: var(--cp-c-text-1);
   border-bottom: 1px solid var(--cp-c-divider);
   vertical-align: top;
+  overflow-wrap: anywhere;
 }
 
 .cp-oas-parameters__name {

package/dist/theme/components/openapi/overview.tsx

@@ -113,7 +113,7 @@ function ServerList({
       P.when((s): s is readonly Record<string, unknown>[] => s.length > 0),
       (s) => (
         <div className="cp-oas-servers">
-          <div className="cp-oas-overview__section-title">Servers</div>
+          <h2 className="cp-oas-overview__section-title">Servers</h2>
           {s.map((server) => {
             const url = String(server['url'] ?? '')
             const description = server['description'] as string | undefined
@@ -153,7 +153,7 @@ function AuthSchemes({
       P.when((e): e is [string, Record<string, unknown>][] => e.length > 0),
       (e) => (
         <div className="cp-oas-auth-schemes">
-          <div className="cp-oas-overview__section-title">Authentication</div>
+          <h2 className="cp-oas-overview__section-title">Authentication</h2>
           {e.map(([name, scheme]) => (
             <div key={name} className="cp-oas-auth-scheme">
               <LockIcon />
@@ -180,7 +180,7 @@ function TagGroups({ tags }: { readonly tags: readonly TagInfo[] }): React.React
       P.when((t): t is readonly TagInfo[] => t.length > 0),
       (t) => (
         <div className="cp-oas-tags">
-          <div className="cp-oas-overview__section-title">Operations</div>
+          <h2 className="cp-oas-overview__section-title">Operations</h2>
           {t.map((tag) => {
             const descEl = match(tag.description)
               .with(

package/dist/theme/components/openapi/parameters-table.tsx

@@ -29,7 +29,7 @@ export function ParametersTable({ parameters }: ParametersTableProps): React.Rea
       P.when((g): g is readonly ParameterGroup[] => g.length > 0),
       (g) => (
         <div className="cp-oas-parameters">
-          <div className="cp-oas-parameters__title">Parameters</div>
+          <h2 className="cp-oas-parameters__title">Parameters</h2>
           {g.map(renderGroup)}
         </div>
       )
@@ -131,19 +131,21 @@ function renderRow(param: Record<string, unknown>): React.ReactElement {
 function renderGroup(group: ParameterGroup): React.ReactElement {
   return (
     <div key={group.label}>
-      <div className="cp-oas-parameters__group-label">{group.label}</div>
-      <table className="cp-oas-parameters__table">
-        <thead>
-          <tr>
-            <th>Name</th>
-            <th>Type</th>
-            <th>Required</th>
-            <th>Description</th>
-            <th>Default</th>
-          </tr>
-        </thead>
-        <tbody>{group.items.map(renderRow)}</tbody>
-      </table>
+      <h3 className="cp-oas-parameters__group-label">{group.label}</h3>
+      <div className="cp-oas-parameters__table-scroll">
+        <table className="cp-oas-parameters__table">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Type</th>
+              <th>Required</th>
+              <th>Description</th>
+              <th>Default</th>
+            </tr>
+          </thead>
+          <tbody>{group.items.map(renderRow)}</tbody>
+        </table>
+      </div>
     </div>
   )
 }

package/dist/theme/components/openapi/request-body.tsx

@@ -54,7 +54,7 @@ export function RequestBody({ requestBody }: RequestBodyProps): React.ReactEleme
 
   return (
     <div className="cp-oas-request-body">
-      <div className="cp-oas-request-body__title">Request Body</div>
+      <h2 className="cp-oas-request-body__title">Request Body</h2>
       {descEl}
       {bodyEl}
       {exampleEl}

package/dist/theme/components/openapi/response-list.tsx

@@ -26,7 +26,7 @@ export function ResponseList({ responses }: ResponseListProps): React.ReactEleme
 
   return (
     <div className="cp-oas-responses">
-      <div className="cp-oas-responses__title">Responses</div>
+      <h2 className="cp-oas-responses__title">Responses</h2>
       {entries.map(renderResponseItem)}
     </div>
   )

package/dist/theme/components/openapi/security-badges.tsx

@@ -26,7 +26,7 @@ export function SecurityBadges({ securities }: SecurityBadgesProps): React.React
       P.when((s): s is readonly Record<string, unknown>[] => s.length > 0),
       (s) => (
         <div className="cp-oas-security">
-          <div className="cp-oas-security__title">Authentication</div>
+          <h2 className="cp-oas-security__title">Authentication</h2>
           <div className="cp-oas-security__list">
             {s.map((requirement, idx) => (
               <span key={String(idx)} className="cp-oas-security__badge">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ciderpress/ui",
-  "version": "1.0.0-rc.16",
+  "version": "1.0.0-rc.17",
   "description": "Rspress plugin, theme components, and styles for ciderpress",
   "keywords": [
     "ciderpress",
@@ -60,6 +60,7 @@
     "@rspress/plugin-client-redirects": "^2.0.21",
     "@rspress/plugin-sitemap": "^2.0.21",
     "clsx": "^2.1.1",
+    "katex": "^0.18.9",
     "massaman": "^0.5.1",
     "mermaid": "^11.17.2",
     "react-aria-components": "^1.20.0",

package/src/theme/components/openapi/openapi.css

@@ -8,7 +8,7 @@
 /* ── Two-column operation layout ───────────────────────────── */
 .cp-oas-operation {
   display: grid;
-  grid-template-columns: 55% 45%;
+  grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
   gap: 2rem;
   padding: 1rem 0;
 }
@@ -24,7 +24,7 @@
   min-width: 0;
 }
 
-@media (max-width: 960px) {
+@media (max-width: 1280px) {
   .cp-oas-operation {
     grid-template-columns: 1fr;
   }
@@ -119,6 +119,11 @@
 }
 
 /* ── Sidebar method badge + path ───────────────────────────── */
+.rp-sidebar-item__left:has(.cp-oas-sidebar-badge) {
+  /* Preserve the active row while tightening Rspress's depth-2 inline indent. */
+  margin-left: -12px;
+}
+
 .cp-oas-sidebar-badge {
   display: inline-block;
   padding: 1px 6px;
@@ -194,10 +199,22 @@
   margin: 1rem 0 0.5rem;
 }
 
-.cp-oas-parameters__table {
+.rp-doc .cp-oas-parameters__table {
   width: 100%;
+  table-layout: fixed;
   border-collapse: collapse;
   font-size: 0.875rem;
+  margin: 0;
+}
+
+.cp-oas-parameters__table-scroll {
+  overflow-x: auto;
+}
+
+@media (max-width: 640px) {
+  .rp-doc .cp-oas-parameters__table {
+    min-width: 36rem;
+  }
 }
 
 .cp-oas-parameters__table th {
@@ -214,6 +231,7 @@
   color: var(--cp-c-text-1);
   border-bottom: 1px solid var(--cp-c-divider);
   vertical-align: top;
+  overflow-wrap: anywhere;
 }
 
 .cp-oas-parameters__name {

package/src/theme/components/openapi/overview.tsx

@@ -113,7 +113,7 @@ function ServerList({
       P.when((s): s is readonly Record<string, unknown>[] => s.length > 0),
       (s) => (
         <div className="cp-oas-servers">
-          <div className="cp-oas-overview__section-title">Servers</div>
+          <h2 className="cp-oas-overview__section-title">Servers</h2>
           {s.map((server) => {
             const url = String(server['url'] ?? '')
             const description = server['description'] as string | undefined
@@ -153,7 +153,7 @@ function AuthSchemes({
       P.when((e): e is [string, Record<string, unknown>][] => e.length > 0),
       (e) => (
         <div className="cp-oas-auth-schemes">
-          <div className="cp-oas-overview__section-title">Authentication</div>
+          <h2 className="cp-oas-overview__section-title">Authentication</h2>
           {e.map(([name, scheme]) => (
             <div key={name} className="cp-oas-auth-scheme">
               <LockIcon />
@@ -180,7 +180,7 @@ function TagGroups({ tags }: { readonly tags: readonly TagInfo[] }): React.React
       P.when((t): t is readonly TagInfo[] => t.length > 0),
       (t) => (
         <div className="cp-oas-tags">
-          <div className="cp-oas-overview__section-title">Operations</div>
+          <h2 className="cp-oas-overview__section-title">Operations</h2>
           {t.map((tag) => {
             const descEl = match(tag.description)
               .with(

package/src/theme/components/openapi/parameters-table.tsx

@@ -29,7 +29,7 @@ export function ParametersTable({ parameters }: ParametersTableProps): React.Rea
       P.when((g): g is readonly ParameterGroup[] => g.length > 0),
       (g) => (
         <div className="cp-oas-parameters">
-          <div className="cp-oas-parameters__title">Parameters</div>
+          <h2 className="cp-oas-parameters__title">Parameters</h2>
           {g.map(renderGroup)}
         </div>
       )
@@ -131,19 +131,21 @@ function renderRow(param: Record<string, unknown>): React.ReactElement {
 function renderGroup(group: ParameterGroup): React.ReactElement {
   return (
     <div key={group.label}>
-      <div className="cp-oas-parameters__group-label">{group.label}</div>
-      <table className="cp-oas-parameters__table">
-        <thead>
-          <tr>
-            <th>Name</th>
-            <th>Type</th>
-            <th>Required</th>
-            <th>Description</th>
-            <th>Default</th>
-          </tr>
-        </thead>
-        <tbody>{group.items.map(renderRow)}</tbody>
-      </table>
+      <h3 className="cp-oas-parameters__group-label">{group.label}</h3>
+      <div className="cp-oas-parameters__table-scroll">
+        <table className="cp-oas-parameters__table">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Type</th>
+              <th>Required</th>
+              <th>Description</th>
+              <th>Default</th>
+            </tr>
+          </thead>
+          <tbody>{group.items.map(renderRow)}</tbody>
+        </table>
+      </div>
     </div>
   )
 }

package/src/theme/components/openapi/request-body.tsx

@@ -54,7 +54,7 @@ export function RequestBody({ requestBody }: RequestBodyProps): React.ReactEleme
 
   return (
     <div className="cp-oas-request-body">
-      <div className="cp-oas-request-body__title">Request Body</div>
+      <h2 className="cp-oas-request-body__title">Request Body</h2>
       {descEl}
       {bodyEl}
       {exampleEl}

package/src/theme/components/openapi/response-list.tsx

@@ -26,7 +26,7 @@ export function ResponseList({ responses }: ResponseListProps): React.ReactEleme
 
   return (
     <div className="cp-oas-responses">
-      <div className="cp-oas-responses__title">Responses</div>
+      <h2 className="cp-oas-responses__title">Responses</h2>
       {entries.map(renderResponseItem)}
     </div>
   )

package/src/theme/components/openapi/security-badges.tsx

@@ -26,7 +26,7 @@ export function SecurityBadges({ securities }: SecurityBadgesProps): React.React
       P.when((s): s is readonly Record<string, unknown>[] => s.length > 0),
       (s) => (
         <div className="cp-oas-security">
-          <div className="cp-oas-security__title">Authentication</div>
+          <h2 className="cp-oas-security__title">Authentication</h2>
           <div className="cp-oas-security__list">
             {s.map((requirement, idx) => (
               <span key={String(idx)} className="cp-oas-security__badge">