@xyd-js/atlas 0.1.0-xyd.15 → 0.1.0-xyd.18

package/dist/styles.css

@@ -0,0 +1,89 @@
+@layer overrides {
+    :root {
+        --oas-method-get-color: #15803d;
+        --oas-method-get-bg: rgba(74, 222, 128, .2);
+        --oas-method-get-color--active: var(--white);
+        --oas-method-get-bg--active: #2ab673;
+
+        --oas-method-post-color: #1D4ED8;
+        --oas-method-post-bg: rgba(96, 165, 250, .2);
+        --oas-method-post-color--active: var(--white);
+        --oas-method-post-bg--active: #3064e3;
+
+        --oas-method-put-color: #C28C30;
+        --oas-method-put-bg: rgba(250, 204, 21, .2);
+        --oas-method-put-color--active: var(--white);
+        --oas-method-put-bg--active: #C28C30;
+
+        --oas-method-delete-color: #B91C1C;
+        --oas-method-delete-bg: rgba(248, 114, 114, 0.2);
+        --oas-method-delete-color--active: var(--white);
+        --oas-method-delete-bg--active: #cb3a32;
+
+        --oas-method-patch-color: #c2410c;
+        --oas-method-patch-bg: rgba(251, 146, 60, .2);
+        --oas-method-patch-color--active: var(--white);
+        --oas-method-patch-bg--active: #DA622B;
+    }
+
+    /* HTTP Method Colors */
+    [atlas-oas-method="GET"] {
+        --method-color: var(--oas-method-get-color);
+        --method-bg: var(--oas-method-get-bg);
+
+        &[data-active="true"] {
+            --method-bg: var(--oas-method-get-bg--active);
+            --method-color: var(--oas-method-get-color--active);
+        }
+    }
+
+    [atlas-oas-method="POST"] {
+        --method-color: var(--oas-method-post-color);
+        --method-bg: var(--oas-method-post-bg);
+
+        &[data-active="true"] {
+            --method-bg: var(--oas-method-post-bg--active);
+            --method-color: var(--oas-method-post-color--active);
+        }
+    }
+
+    [atlas-oas-method="PUT"] {
+        --method-color: var(--oas-method-put-color);
+        --method-bg: var(--oas-method-put-bg);
+
+        &[data-active="true"] {
+            --method-bg: var(--oas-method-put-bg--active);
+            --method-color: var(--oas-method-put-color--active);
+        }
+    }
+
+    [atlas-oas-method="DELETE"] {
+        --method-color: var(--oas-method-delete-color);
+        --method-bg: var(--oas-method-delete-bg);
+
+        &[data-active="true"] {
+            --method-bg: var(--oas-method-delete-bg--active);
+            --method-color: var(--oas-method-delete-color--active);
+        }
+    }
+
+    [atlas-oas-method="PATCH"] {
+        --method-color: var(--oas-method-patch-color);
+        --method-bg: var(--oas-method-patch-bg);
+
+        &[data-active="true"] {
+            --method-bg: var(--oas-method-patch-bg--active);
+            --method-color: var(--oas-method-patch-color--active);
+        }
+    }
+
+    [atlas-oas-method] {
+        color: var(--method-color);
+    }
+
+    [atlas-oas-method] xyd-badge {
+        background-color: var(--method-bg);
+        color: var(--method-color);
+        font-weight: var(--xyd-font-weight-bold);
+    }
+}

package/dist/tokens.css

@@ -1,5 +1,7 @@
 :root {
   /* Ref tokens - Base values */
+  --XydAtlas-Ref-Palette-White: #FFFFFF;
+
   --XydAtlas-Ref-Palette-Primary-60: #7051d4;
   --XydAtlas-Ref-Palette-Primary-70: #6045b9;
   --XydAtlas-Ref-Palette-Primary-80: #4f399e;
@@ -40,6 +42,7 @@
   /* ApiRef Item */
   --XydAtlas-Component-ApiRef-Item__color-border: var(--XydAtlas-Sys-Color-Border);
   --XydAtlas-Component-ApiRef-Item__color-navbar: var(--XydAtlas-Sys-Color-Text-Secondary);
+  --XydAtlas-Component-ApiRef-Item__background-navbar: var(--XydAtlas-Ref-Palette-Neutral-10);
 
   /* Code Sample */
   --XydAtlas-Component-Code-Sample__color-border: var(--XydAtlas-Sys-Color-Border);
@@ -51,7 +54,7 @@
 
   /* Code Sample Buttons */
   --XydAtlas-Component-Code-SampleButtons__color-containerBackground: var(--XydAtlas-Sys-Color-Surface);
-  --XydAtlas-Component-Code-SampleButtons__color-background--active: var(--XydAtlas-Sys-Color-Surface--active);
-  --XydAtlas-Component-Code-SampleButtons__color: var(--XydAtlas-Sys-Color-Text-Secondary);
+  --XydAtlas-Component-Code-SampleButtons__color-background--active: var(--XydAtlas-Ref-Palette-White);
+  --XydAtlas-Component-Code-SampleButtons__color: var(--XydAtlas-Ref-Palette-Neutral-40);
   --XydAtlas-Component-Code-SampleButtons__color--active: var(--XydAtlas-Sys-Color-Text-Primary);
 } 

package/dist/xydPlugin.d.ts

@@ -0,0 +1,5 @@
+import { Plugin } from '@xyd-js/plugins';
+
+declare function XydAtlasPlugin(): Plugin;
+
+export { XydAtlasPlugin as default };

package/dist/xydPlugin.js

@@ -0,0 +1,2 @@
+import e from"react";import"radix-ui";import{a as t,c as r}from"./Update-D5e_yqty-COLbZvRj.js";import"lucide-react";"function"==typeof SuppressedError&&SuppressedError;var i=function(e){return e.NavRight="nav.right",e.SidebarTop="sidebar.top",e.PageFooterBottom="page.footer.bottom",e.SidebarItemLeft="sidebar.item.left",e.SidebarItemRight="sidebar.item.right",e}(i||{});function a(i){var a,o=(null===(a=null==i?void 0:i.pageMeta)||void 0===a?void 0:a.openapi)||"",n=o.includes("#")?o.split("#"):["",o],d=t(n,2);d[0];var s=d[1],u=(void 0===s?"":s).split(" "),p=t(u,1)[0],l=void 0===p?"":p;if(!l)return null;if(l.includes("components/schemas"))return null;var m=l.toUpperCase();return"DELETE"===l&&(m="DEL"),e.createElement("div",{"data-active":(null==i?void 0:i.active)?"true":void 0,"atlas-oas-method":l},e.createElement(r,{size:"xs"},m))}function o(){return function(e){return{name:"atlas-xyd-plugin",customComponents:{AtlasSidebarItemRight:{component:a,surface:i.SidebarItemRight}}}}}export{o as default};
+//# sourceMappingURL=xydPlugin.js.map

package/dist/xydPlugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xydPlugin.js","sources":["../../xyd-ui/dist/index.js","../packages/xyd-plugin/SidebarItem.tsx","../packages/xyd-plugin/index.ts"],"sourcesContent":["import e,{useRef as t,useEffect as r,useState as n,useCallback as a,createContext as c,useContext as i}from\"react\";import{Tabs as l}from\"radix-ui\";import{Link as o}from\"react-router\";function u(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=Array(t);r<t;r++)n[r]=e[r];return n}function s(e){if(Array.isArray(e))return e}function f(){throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\")}function d(e,t){return s(e)||function(e,t){var r=null==e?null:\"undefined\"!=typeof Symbol&&e[Symbol.iterator]||e[\"@@iterator\"];if(null!=r){var n,a,c,i,l=[],o=!0,u=!1;try{if(c=(r=r.call(e)).next,0===t);else for(;!(o=(n=c.call(r)).done)&&(l.push(n.value),l.length!==t);o=!0);}catch(e){u=!0,a=e}finally{try{if(!o&&null!=r.return&&(i=r.return(),Object(i)!==i))return}finally{if(u)throw a}}return l}}(e,t)||h(e,t)||f()}function m(e){return s(e)||function(e){if(\"undefined\"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e[\"@@iterator\"])return Array.from(e)}(e)||h(e)||f()}function h(e,t){if(e){if(\"string\"==typeof e)return u(e,t);var r={}.toString.call(e).slice(8,-1);return\"Object\"===r&&e.constructor&&(r=e.constructor.name),\"Map\"===r||\"Set\"===r?Array.from(e):\"Arguments\"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?u(e,t):void 0}}function v(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&\"function\"==typeof Object.getOwnPropertySymbols){var a=0;for(n=Object.getOwnPropertySymbols(e);a<n.length;a++)t.indexOf(n[a])<0&&Object.prototype.propertyIsEnumerable.call(e,n[a])&&(r[n[a]]=e[n[a]])}return r}\"function\"==typeof SuppressedError&&SuppressedError;function p(t){var r=t.children,n=t.value,a=t.onChange,c=t.logo,i=t.kind,o=t.className,u=t.rightSurface;return e.createElement(l.Root,{asChild:!0,value:n,onValueChange:a},e.createElement(\"xyd-nav\",{className:\"\".concat(\"n1vu90xp\",\" \").concat(o||\"\"),\"data-kind\":i},e.createElement(\"div\",{part:\"shadow\"}),e.createElement(\"nav\",{part:\"nav\"},e.createElement(\"div\",{part:\"logo\"},c),e.createElement(l.List,{asChild:!0},e.createElement(\"div\",{part:\"list\"},r)),(\"middle\"===i||u)&&e.createElement(\"div\",{part:\"right\"},u))))}function y(t){var r=t.children,n=v(t,[\"children\"]);return e.createElement(\"a\",Object.assign({},n),r)}p.Tab=function(t){var r=t.children,n=t.value,a=t.onChange;return e.createElement(l.Root,{asChild:!0,value:n,onValueChange:a},e.createElement(l.List,null,r))},p.Item=function(t){var r=t.children,n=t.value,a=t.href,c=t.as||y;return e.createElement(l.Trigger,{asChild:!0,value:n},e.createElement(\"xyd-nav-item\",{className:\"i1i2i14o\"},e.createElement(c,{href:a},e.createElement(\"span\",{part:\"title1\"},r),e.createElement(\"span\",{part:\"title2\"},r))))};function g(t){var r=t.className,n=t.isActive,a=void 0!==n&&n;return e.createElement(\"xyd-progressbar\",{\"data-active\":String(a),role:\"progressbar\",\"aria-hidden\":\"true\",\"aria-label\":\"loading bar\",className:\"\".concat(\"p1jzdbj3\",\" \").concat(r||\"\")},e.createElement(\"div\",{part:\"item\"}))}function E(n){var a=n.children,c=n.isOpen,i=n.horizontal,l=void 0!==i&&i,o=n.className,u=t(null),s=t(null),f=t(null),d=t(c),m=t(!0),h=t(null),v=function(){var e=u.current,t=s.current;if(e&&t){var r=t.querySelectorAll('[class*=\"collapse\"]'),n=[];if(r.forEach(function(e){e instanceof HTMLElement&&(n.push({element:e,height:e.style.height,overflow:e.style.overflow}),e.style.height=\"auto\",e.style.overflow=\"visible\")}),l){var a=t.scrollWidth;e.style.width=\"\".concat(a,\"px\"),t.style.width=\"\".concat(a,\"px\")}else{var c=t.scrollHeight;e.style.height=\"\".concat(c,\"px\"),t.style.height=\"\".concat(c,\"px\")}n.forEach(function(e){var t=e.element,r=e.height,n=e.overflow;t.style.height=r,t.style.overflow=n})}};return r(function(){var e=u.current,t=s.current;if(f.current&&clearTimeout(f.current),!m.current&&e&&t){if(h.current&&h.current.disconnect(),c)v(),h.current=new MutationObserver(function(e){e.some(function(e){var t;return\"childList\"===e.type||\"attributes\"===e.type||\"characterData\"===e.type&&(null===(t=e.target.parentElement)||void 0===t?void 0:t.closest('[class*=\"collapse\"]'))})&&v()}),h.current.observe(t,{childList:!0,subtree:!0,characterData:!0,attributes:!0}),f.current=window.setTimeout(function(){e.style.removeProperty(l?\"width\":\"height\"),t.style.removeProperty(l?\"width\":\"height\"),h.current&&h.current.disconnect()},300);else if(l){var r=e.scrollWidth;e.style.width=\"\".concat(r,\"px\"),e.offsetWidth,e.style.width=\"0px\"}else{var n=e.scrollHeight;e.style.height=\"\".concat(n,\"px\"),e.offsetHeight,e.style.height=\"0px\"}return function(){h.current&&h.current.disconnect(),f.current&&clearTimeout(f.current)}}},[l,c]),r(function(){m.current=!1},[]),e.createElement(\"xyd-collapse\",{\"data-open\":String(c),className:\"\".concat(\"c12fwmxc\",\" \").concat(o||\"\"),ref:u,style:d.current||l?void 0:{height:0}},e.createElement(\"div\",{part:\"child\",ref:s},a))}function b(n){var a=n.children,c=n.footerItems,i=n.className,l=t(null);return r(function(){if(l.current){var e=l.current.querySelector('[data-active=\"true\"]');if(e){var t=l.current.clientHeight,r=e.getBoundingClientRect().top,n=e.clientHeight,a=l.current.scrollTop+r-t/2+n/2;l.current.scrollTo({top:a,behavior:\"auto\"})}}},[]),e.createElement(\"xyd-sidebar\",{className:\"\".concat(\"sptag3l\",\" \").concat(i||\"\")},e.createElement(\"ul\",{part:\"list\",ref:l},a),c&&e.createElement(\"div\",{part:\"footer\"},e.createElement(\"ul\",null,c)))}function w(t){var r=t.children,n=v(t,[\"children\"]);return e.createElement(\"a\",Object.assign({},n),r)}b.Item=function(t){var r=t.children,n=t.button,a=t.href,c=t.active,i=t.activeTheme,l=t.isParentActive,u=t.anchor,s=t.icon,f=t.onClick,d=m(e.Children.toArray(r)),h=d[0],v=d.slice(1),p=n?\"button\":o,y=(null==a?void 0:a.endsWith(\"/\"))?a.slice(0,-1):a;return e.createElement(\"li\",{part:\"item\",className:\"iead4fo\",\"data-theme\":i,\"data-anchor\":u?String(u):void 0},e.createElement(p,{part:\"item-\".concat(n?\"button\":\"link\"),href:n?void 0:y,to:y,onClick:f},e.createElement(\"div\",{part:\"first-item\",\"data-parent-active\":l,\"data-active\":c,\"data-anchor\":u?String(u):void 0},e.createElement(e.Fragment,null,s,h))),v)},b.ItemHeader=function(t){var r=t.children,n=t.icon;return e.createElement(\"li\",{part:\"item-header\",className:\"i1btwdcv\"},n,r)},b.SubTree=function(t){var r=t.children,n=t.isOpen;return e.createElement(\"ul\",{part:\"subtree\",className:\"t1hrlfak\"},e.createElement(E,{isOpen:n||!1},r))},b.FooterItem=function(t){var r=t.children,n=t.href,a=t.icon,c=t.as||w;return e.createElement(\"li\",{part:\"footer-item\",className:\"f1801o7t\"},e.createElement(c,{part:\"footer-link\",href:n},a,r))};function x(t){var r=t.children,n=t.title,a=t.value,c=t.onChange,i=t.className;return e.createElement(l.Root,{asChild:!0,value:a,onValueChange:c},e.createElement(\"xyd-subnav\",{className:\"\".concat(\"s4ah3ok\",\" \").concat(i||\"\")},e.createElement(\"div\",{part:\"prefix\"},n),e.createElement(l.List,{asChild:!0},e.createElement(\"ul\",{part:\"list\"},r))))}function S(t){var r=t.children,n=v(t,[\"children\"]);return e.createElement(\"a\",Object.assign({},n),r)}x.Item=function(t){var r=t.children,n=t.value,a=t.href,c=t.as||S;return e.createElement(l.Trigger,{asChild:!0,value:n},e.createElement(\"xyd-subnav-item\",null,e.createElement(\"li\",{className:\"s1ncaln9\"},e.createElement(c,{part:\"link\",href:a},r))))};var C=c({value:\"\",onChange:function(){},registerActiveItem:function(){},unregisterActiveItem:function(){}});function A(c){var i=c.children,l=c.defaultValue,o=c.className,u=c.maxDepth,s=void 0===u?2:u,f=d(n(0),2),m=f[0],v=f[1],p=d(n(0),2),y=p[0],g=p[1],E=d(n(l||\"\"),2),b=E[0],w=E[1],x=t(new Map),S=t([]),A=t(!1),I=a(function(e,t){x.current.set(t,e)},[]),N=a(function(e){x.current.delete(e)},[]),O=a(function(e){w(e),A.current=!0},[]);function k(){var e=Array.from({length:s},function(e,t){return\"h\".concat(t+2)}).join(\",\");S.current=Array.from(document.querySelectorAll(e)).map(function(e){return e.id})}return r(function(){return k(),!l&&S.current.length&&w(S.current[0]),window.addEventListener(\"resize\",k),function(){return window.removeEventListener(\"resize\",k)}},[l]),r(function(){var e=window;function t(){if(A.current)A.current=!1;else{var t,r=e instanceof Window?window.pageYOffset:e.scrollTop,n=e instanceof Window?window.innerHeight:e.clientHeight,a=.2*n,c=S.current[0]||\"\",i=function(e,t){var r=\"undefined\"!=typeof Symbol&&e[Symbol.iterator]||e[\"@@iterator\"];if(!r){if(Array.isArray(e)||(r=h(e))||t){r&&(e=r);var n=0,a=function(){};return{s:a,n:function(){return n>=e.length?{done:!0}:{done:!1,value:e[n++]}},e:function(e){throw e},f:a}}throw new TypeError(\"Invalid attempt to iterate non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\")}var c,i=!0,l=!1;return{s:function(){r=r.call(e)},n:function(){var e=r.next();return i=e.done,e},e:function(e){l=!0,c=e},f:function(){try{i||null==r.return||r.return()}finally{if(l)throw c}}}}(S.current);try{for(i.s();!(t=i.n()).done;){var l=t.value,o=document.getElementById(l);if(o){if(!(o.getBoundingClientRect().top<=a))break;c=l}}}catch(e){i.e(e)}finally{i.f()}var u=e instanceof Window?document.documentElement.scrollHeight:e.scrollHeight;u>n&&r+n>=u-1&&(c=S.current[S.current.length-1]||c),c!==b&&w(c)}}return e.addEventListener(\"scroll\",t),t(),function(){return e.removeEventListener(\"scroll\",t)}},[b]),r(function(){var e;(null==(e=x.current.get(b))?void 0:e.current)&&(v(e.current.offsetHeight),g(e.current.offsetTop))},[b]),e.createElement(C.Provider,{value:{value:b,onChange:O,registerActiveItem:I,unregisterActiveItem:N}},e.createElement(\"xyd-toc\",{className:\"\".concat(\"t19g75q2\",\" \").concat(o||\"\")},e.createElement(\"div\",{part:\"scroller\"},e.createElement(\"div\",{part:\"scroll\",style:{\"--xyd-toc-active-track-height\":\"\".concat(m,\"px\"),\"--xyd-toc-active-track-top\":\"\".concat(y,\"px\")}})),e.createElement(\"ul\",{part:\"list\"},i)))}A.Item=function(n){var a=n.children,c=n.id,l=n.className,u=n.depth,s=i(C),f=s.value,d=s.onChange,m=s.registerActiveItem,h=s.unregisterActiveItem,v=t(null),p=f===c;return r(function(){return p&&v.current&&m(v,c),function(){return h(c)}},[p,c,m,h]),e.createElement(\"xyd-toc-item\",null,e.createElement(\"li\",{ref:v,className:\"\".concat(\"teg7kxf\",\" \").concat(l||\"\"),\"data-active\":String(p),\"data-depth\":u},e.createElement(o,{part:\"link\",to:\"\",onClick:function(e){var t;e.preventDefault(),d(c);var r=new URL(window.location.href);r.hash=c,history.replaceState(null,\"\",r.toString()),null===(t=document.getElementById(c))||void 0===t||t.scrollIntoView()}},a)))};export{p as Nav,g as ProgressBar,x as SubNav,A as Toc,b as UISidebar};\n//# sourceMappingURL=index.js.map\n","import React from \"react\"\n\nimport { Badge } from \"@xyd-js/components/writer\"\n\nexport function SidebarItemRight(props: any) {\n    const openapi = props?.pageMeta?.openapi || \"\"\n    const [_, region = \"\"] = openapi.includes(\"#\") ? openapi.split(\"#\") : [\"\", openapi]\n    const [method = \"\"] = region.split(\" \")\n\n    if (!method) {\n        return null\n    }\n    if (method.includes(\"components/schemas\")) {\n        return null\n    }\n\n    let methodText = method.toUpperCase()\n    if (method === \"DELETE\") {\n        methodText = \"DEL\"\n    }\n\n    return <div data-active={props?.active ? \"true\" : undefined} atlas-oas-method={method}>\n        <Badge size=\"xs\">\n            {methodText}\n        </Badge>\n    </div>\n}","import { Settings } from \"@xyd-js/core\"\nimport { Plugin } from \"@xyd-js/plugins\"\nimport { SurfaceTarget } from \"@xyd-js/framework/react\"\n\nimport { SidebarItemRight } from \"./SidebarItem\"\n\nexport default function XydAtlasPlugin(): Plugin {\n    return function (settings: Settings) {\n        return {\n            name: \"atlas-xyd-plugin\",\n            customComponents: {\n                AtlasSidebarItemRight: {\n                    component: SidebarItemRight,\n                    surface: SurfaceTarget.SidebarItemRight,\n                }\n            }\n        }\n    }\n}"],"names":["SuppressedError","SidebarItemRight","props","openapi","_a","pageMeta","_ref","includes","split","_ref2","_slicedToArray","_ref2$","_region$split","_region$split2$","method","methodText","toUpperCase","React","createElement","active","undefined","Badge","size","XydAtlasPlugin","settings","name","customComponents","AtlasSidebarItemRight","component","surface","SurfaceTarget"],"mappings":"oHAwUkD,mBAApBA,iBAAiCA,2NCpUzD,SAAUC,EAAiBC,SACvBC,GAAyB,QAAfC,EAAAF,aAAK,EAALA,EAAOG,gBAAQ,IAAAD,OAAA,EAAAA,EAAED,UAAW,GAC5CG,EAAyBH,EAAQI,SAAS,KAAOJ,EAAQK,MAAM,KAAO,CAAC,GAAIL,GAAQM,EAAAC,EAAAJ,EAAA,GAA3EG,EAAA,GAAAE,IAAAA,EAAAF,EAAA,GACRG,QADgB,IAAAD,EAAG,GAAEA,GACQH,MAAM,KAAIK,EAAAH,EAAAE,EAAA,GAAA,GAAhCE,OAAM,IAAAD,EAAG,GAAEA,EAElB,IAAKC,EACD,OAAO,KAEX,GAAIA,EAAOP,SAAS,sBAChB,OAAO,KAGX,IAAIQ,EAAaD,EAAOE,cAKxB,MAJe,WAAXF,IACAC,EAAa,OAGVE,EAAAC,cAAA,MAAA,CAAK,eAAahB,aAAK,EAALA,EAAOiB,QAAS,YAASC,EAAW,mBAAkBN,GAC3EG,EAAAC,cAACG,EAAK,CAACC,KAAK,MACPP,GAGb,CCpBc,SAAUQ,IACpB,OAAO,SAAUC,GACb,MAAO,CACHC,KAAM,mBACNC,iBAAkB,CACdC,sBAAuB,CACnBC,UAAW3B,EACX4B,QAASC,EAAc7B,oBAK3C"}

package/index.ts

@@ -1 +1,2 @@
-export * from "./src/components/Atlas"
+export * from "./src/components/Atlas"
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xyd-js/atlas",
-  "version": "0.1.0-xyd.15",
+  "version": "0.1.0-xyd.18",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -12,21 +12,26 @@
     ".": {
       "import": "./dist/index.js"
     },
-    "./atlas-index": {
-      "import": "./dist/atlas-index.js"
+    "./xydPlugin": {
+      "import": "./dist/xydPlugin.js"
     }
   },
   "dependencies": {
-    "@code-hike/lighter": "^1.0.0",
-    "@radix-ui/react-tabs": "^1.1.1",
+    "@code-hike/lighter": "^1.0.3",
+    "radix-ui": "^1.4.2",
     "codehike": "^1.0.2",
     "lucide-react": "^0.447.0",
-    "@xyd-js/uniform": "0.1.0-xyd.14"
+    "@xyd-js/components": "0.1.0-xyd.13",
+    "@xyd-js/uniform": "0.1.0-xyd.17"
   },
   "peerDependencies": {
-    "react": "^19.0.0"
+    "react": "^19.0.0",
+    "@xyd-js/framework": "0.1.0-xyd.34",
+    "@xyd-js/plugins": "0.1.0-xyd.2"
   },
   "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@linaria/atomic": "^6.2.0",
     "@linaria/core": "^6.2.0",
     "@babel/preset-typescript": "^7.26.0",
@@ -59,8 +64,7 @@
     "tsup": "^8.3.0",
     "rimraf": "^3.0.2",
     "prop-types": "^15.8.1",
-    "storybook": "^8.4.5",
-    "@xyd-js/gql": "0.1.0-xyd.12"
+    "storybook": "^8.4.5"
   },
   "scripts": {
     "clean": "rimraf build",

package/packages/xyd-plugin/SidebarItem.tsx

@@ -0,0 +1,27 @@
+import React from "react"
+
+import { Badge } from "@xyd-js/components/writer"
+
+export function SidebarItemRight(props: any) {
+    const openapi = props?.pageMeta?.openapi || ""
+    const [_, region = ""] = openapi.includes("#") ? openapi.split("#") : ["", openapi]
+    const [method = ""] = region.split(" ")
+
+    if (!method) {
+        return null
+    }
+    if (method.includes("components/schemas")) {
+        return null
+    }
+
+    let methodText = method.toUpperCase()
+    if (method === "DELETE") {
+        methodText = "DEL"
+    }
+
+    return <div data-active={props?.active ? "true" : undefined} atlas-oas-method={method}>
+        <Badge size="xs">
+            {methodText}
+        </Badge>
+    </div>
+}

package/packages/xyd-plugin/index.ts

@@ -0,0 +1,19 @@
+import { Settings } from "@xyd-js/core"
+import { Plugin } from "@xyd-js/plugins"
+import { SurfaceTarget } from "@xyd-js/framework/react"
+
+import { SidebarItemRight } from "./SidebarItem"
+
+export default function XydAtlasPlugin(): Plugin {
+    return function (settings: Settings) {
+        return {
+            name: "atlas-xyd-plugin",
+            customComponents: {
+                AtlasSidebarItemRight: {
+                    component: SidebarItemRight,
+                    surface: SurfaceTarget.SidebarItemRight,
+                }
+            }
+        }
+    }
+}

package/rollup.config.js

@@ -24,13 +24,15 @@ const external = [
 ];
 
 // Function to copy tokens.css to dist
-function copyTokensCss() {
+function copyCss(names) {
     return {
-        name: 'copy-tokens-css',
+        name: `copy-${names.join('-')}-css`,
         writeBundle() {
-            const tokensCss = fs.readFileSync('src/styles/tokens.css', 'utf8');
-            fs.mkdirSync('dist', { recursive: true });
-            fs.writeFileSync('dist/tokens.css', tokensCss);
+            names.forEach(name => {
+                const css = fs.readFileSync(`src/styles/${name}.css`, 'utf8');
+                fs.mkdirSync('dist', { recursive: true });
+                fs.writeFileSync(`dist/${name}.css`, css);
+            });
         }
     };
 }
@@ -39,7 +41,7 @@ export default [
     {
         input: {
             index: 'index.ts',
-            ["atlas-index"]: 'packages/atlas-index/index.ts'
+            xydPlugin: 'packages/xyd-plugin/index.ts',
         },
         output: [
             {
@@ -58,28 +60,28 @@ export default [
                         '@babel/preset-react'
                     ],
                 },
-                classNameSlug: (hash, title, {file}) => {
-                    // Get the full path after 'src/components/'
-                    const pathParts = file.split('/');
-                    const componentsIndex = pathParts.indexOf('components');
-                    if (componentsIndex === -1) return `XydAtlas-Component-${title}`;
+                // classNameSlug: (hash, title, {file}) => {
+                //     // Get the full path after 'src/components/'
+                //     const pathParts = file.split('/');
+                //     const componentsIndex = pathParts.indexOf('components');
+                //     if (componentsIndex === -1) return `XydAtlas-Component-${title}`;
                     
-                    // Get everything after 'components' directory
-                    const componentPath = pathParts
-                        .slice(componentsIndex + 1)
-                        .filter(part => !part.endsWith('.styles.tsx')) // Remove styles.tsx
-                        .join('-');
+                //     // Get everything after 'components' directory
+                //     const componentPath = pathParts
+                //         .slice(componentsIndex + 1)
+                //         .filter(part => !part.endsWith('.styles.tsx')) // Remove styles.tsx
+                //         .join('-');
                     
-                    // Use the title as the style name (it's already the variable name)
-                    const styleName = title.replace(/^\$/, ''); // Remove $ prefix if present
+                //     // Use the title as the style name (it's already the variable name)
+                //     const styleName = title.replace(/^\$/, ''); // Remove $ prefix if present
                     
-                    return `XydAtlas-Component-${componentPath}__${styleName}`;
-                }
+                //     return `XydAtlas-Component-${componentPath}__${styleName}`;
+                // }
             }),
             css({
                 output: 'index.css',
             }),
-            copyTokensCss(),
+            copyCss(['tokens', 'styles']),
             resolve(),
             commonjs(),
             typescript({
@@ -100,19 +102,19 @@ export default [
     {
         input: 'index.ts',
         output: {
-            dir: 'dist',
+            file: 'dist/index.d.ts',
             format: 'es',
         },
         plugins: [dts()],
         external
     },
     {
-        input: 'packages/atlas-index/index.ts',
+        input: 'packages/xyd-plugin/index.ts',
         output: {
-            file: 'dist/atlas-index.d.ts',
+            file: 'dist/xydPlugin.d.ts',
             format: 'es',
         },
         plugins: [dts()],
         external
-    },
+    }
 ];

package/src/components/ApiRef/ApiRefItem/ApiRefItem.styles.tsx

@@ -1,22 +1,24 @@
-import {css} from "@linaria/core";
+import { css } from "@linaria/core";
 
 export const ApiRefItemTitleHost = css`
-    font-size: 30px;
-    font-weight: 400;
+    font-weight: var(--xyd-font-weight-normal);
 `;
 
 export const ApiRefItemTitleLink = css`
 `;
 
 export const ApiRefItemNavbarHost = css`
+    margin: 20px 0px;
 `;
 
 export const ApiRefItemNavbarContainer = css`
-    background: linear-gradient(45deg, rgb(247, 247, 248) 0%, rgb(247, 247, 248) 100%);
+    background: linear-gradient(45deg, var(--XydAtlas-Component-ApiRef-Item__background-navbar) 0%, var(--XydAtlas-Component-ApiRef-Item__background-navbar) 100%);
     padding: 8px;
     border: 1px solid var(--XydAtlas-Component-ApiRef-Item__color-border);
     border-radius: 8px;
-    font-size: 13px;
+    display: flex;
+    gap: 4px;
+    overflow: scroll;
 `;
 
 export const ApiRefItemNavbarLabel = css`
@@ -24,36 +26,77 @@ export const ApiRefItemNavbarLabel = css`
     margin-right: 4px;
 `;
 
+export const ApiRefItemNavbarSubtitle = css`
+    display: flex;
+    letter-spacing: 1px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+`;
+
 export const ApiRefItemHost = css`
     display: flex;
     flex-direction: column;
     gap: 16px;
     padding-bottom: 25px;
+
+    &[data-has-examples="true"] {
+        atlas-apiref-item-showcase {
+            display: grid;
+            gap: 100px;
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+
+            @media (max-width: 767px) {
+                grid-template-columns: 1fr;
+            }
+        }
+    }
 `;
 
 export const ApiRefItemGrid = css`
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
     align-items: normal;
-    gap: 100px;
 `;
 
-export const ApiRefItemPropertiesHost = css`
+export const ApiRefItemDefinitionsHost = css`
 `;
 
-export const ApiRefItemPropertiesItem = css`
+export const ApiRefItemDefinitionsItem = css`
     display: flex;
     flex-direction: column;
     gap: 25px;
     margin-bottom: 25px;
-`;
 
-export const ApiRefItemSubtitleHost = css`
-    font-size: 15px;
-    font-weight: 600;
-`;
+    margin-top: var(--space-xxlarge);
 
-export const ApiRefItemSubtitleLink = css`
-    text-decoration: none;
+    [part="controls"] {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+    }
+
+    > [part="header"] {
+        h2, h3, h4, h5, h6 {
+            margin: 0;
+        }
+
+        border-bottom: 1px solid var(--XydAtlas-Component-ApiRef-Item__color-border);
+
+        display: grid;
+        grid-template-columns: 1fr auto;
+        align-items: center;
+        gap: 16px;
+
+        > :first-child {
+            justify-self: start;
+        }
+
+        > :not(:first-child) {
+            justify-self: end;
+        }
+    }
 `;
 
+export const DefinitionBody = css`
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+`