[feat]: Blok demo file explorer, tooltip updates, and CI pnpm migration

.github/actions/run-tests/action.yml

@@ -34,18 +34,30 @@ outputs:
 runs:
   using: 'composite'
   steps:
+    - name: Install pnpm
+      uses: pnpm/action-setup@v4
+      with:
+        package_json_file: ${{ inputs.tests-path }}/package.json
+
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+        cache: pnpm
+        cache-dependency-path: ${{ inputs.tests-path }}/pnpm-lock.yaml
+
     - name: Install test dependencies
       shell: bash
       working-directory: ./${{ inputs.tests-path }}
       run: |
-        npm ci
+        pnpm install --frozen-lockfile
         # Install GitHub Actions reporter for Playwright
-        npm install @estruyf/github-actions-reporter --save-dev
-    
+        pnpm add -D @estruyf/github-actions-reporter
+
     - name: Install Playwright Browsers
       shell: bash
       working-directory: ./${{ inputs.tests-path }}
-      run: npx playwright install --with-deps
+      run: pnpm exec playwright install --with-deps
 
     - name: Run Playwright tests
       id: run-tests
@@ -74,7 +86,7 @@ runs:
         fi
 
         # Run tests - GitHub Actions reporter will automatically create summaries
-        npx playwright test 2>&1 | tee test-output.log
+        pnpm exec playwright test 2>&1 | tee test-output.log
         TEST_EXIT_CODE=$?
         echo "exit-code=${TEST_EXIT_CODE}" >> $GITHUB_OUTPUT
 

.github/actions/setup-app/action.yml

@@ -10,6 +10,10 @@ inputs:
     description: 'Node.js version to use'
     required: false
     default: 'lts/*'
+  registry-url:
+    description: 'If set, run registry:update-urls before build'
+    required: false
+    default: ''
 
 outputs:
   build-status:
@@ -22,40 +26,56 @@ outputs:
 runs:
   using: 'composite'
   steps:
+    - name: Install pnpm
+      uses: pnpm/action-setup@v4
+      with:
+        package_json_file: ${{ inputs.app-path }}/package.json
+
     - name: Setup Node.js
       uses: actions/setup-node@v4
       with:
         node-version: ${{ inputs.node-version }}
-        cache: 'npm'
-        cache-dependency-path: ${{ inputs.app-path }}/package-lock.json
-    
+        cache: 'pnpm'
+        cache-dependency-path: ${{ inputs.app-path }}/pnpm-lock.yaml
+
     - name: Install app dependencies
       shell: bash
       working-directory: ./${{ inputs.app-path }}
-      run: npm ci
-
+      run: pnpm install --frozen-lockfile
+
+    - name: Update registry URLs
+      if: ${{ inputs.registry-url != '' }}
+      shell: bash
+      working-directory: ./${{ inputs.app-path }}
+      run: |
+        echo "Updating registry URLs to use: ${{ inputs.registry-url }}"
+        pnpm run registry:update-urls || pnpm exec tsx scripts/update-registry-urls.ts
+        echo "Registry URLs updated"
+      env:
+        NEXT_PUBLIC_REGISTRY_URL: ${{ inputs.registry-url }}
+
     - name: Clean up extra lockfiles
       shell: bash
       run: |
-        # Remove any package-lock.json in nested app/ subdirectory that might confuse Next.js
+        # Remove any pnpm-lock.yaml in nested app/ subdirectory that might confuse Next.js
         # Next.js detects multiple lockfiles and treats them as separate workspaces
         # This causes path resolution issues with Turbopack
-        if [ -f "${{ inputs.app-path }}/app/package-lock.json" ]; then
-          echo "⚠️ Found nested app/package-lock.json - removing to prevent Next.js workspace confusion"
-          rm -f "${{ inputs.app-path }}/app/package-lock.json"
+        if [ -f "${{ inputs.app-path }}/app/pnpm-lock.yaml" ]; then
+          echo "⚠️ Found nested app/pnpm-lock.yaml - removing to prevent Next.js workspace confusion"
+          rm -f "${{ inputs.app-path }}/app/pnpm-lock.yaml"
           echo "✅ Removed nested lockfile"
         else
           echo "✅ No nested lockfiles found"
         fi
-    
+
     - name: Build Next.js application
       id: build
       shell: bash
       working-directory: ./${{ inputs.app-path }}
       continue-on-error: true
       run: |
         set +e
-        npm run build
+        pnpm run build
         BUILD_EXIT_CODE=$?
         echo "build-exit-code=${BUILD_EXIT_CODE}" >> $GITHUB_OUTPUT
         if [ $BUILD_EXIT_CODE -eq 0 ]; then
@@ -65,9 +85,9 @@ runs:
           echo "build-status=failed" >> $GITHUB_OUTPUT
           echo "Build failed with exit code: $BUILD_EXIT_CODE"
           echo "=== Build Error Output ==="
-          npm run build 2>&1 | tail -50 || true
+          pnpm run build 2>&1 | tail -50 || true
         fi
         exit $BUILD_EXIT_CODE
       env:
         NODE_ENV: production
-
+        NEXT_PUBLIC_REGISTRY_URL: ${{ inputs.registry-url }}

.github/workflows/pr-build-check.yml

@@ -64,21 +64,12 @@ jobs:
           ref: ${{ inputs.pr-branch }}
           path: pr-branch
 
-      # Update registry URLs in the repository before building
-      - name: Update registry URLs
-        working-directory: .
-        run: |
-          echo "Updating registry URLs to use: ${{ steps.registry-url.outputs.url }}"
-          NEXT_PUBLIC_REGISTRY_URL="${{ steps.registry-url.outputs.url }}" npm run registry:update-urls || npx tsx scripts/update-registry-urls.ts
-          echo "Registry URLs updated"
-        env:
-          NEXT_PUBLIC_REGISTRY_URL: ${{ steps.registry-url.outputs.url }}
-
       - name: Setup and Build PR branch
         id: setup-and-build
         uses: ./.github/actions/setup-app
         with:
           app-path: pr-branch
+          registry-url: ${{ steps.registry-url.outputs.url }}
 
       - name: Send PR build status to Teams
         if: always()

src/app/(registry)/bloks/[name]/page.tsx

@@ -27,7 +27,7 @@ export default async function BlokItemPage({
   }
 
   return (
-    <div className="w-full max-w-[1250px] mx-auto bg-body-bg pb-10 px-5 md:px-10">
+    <div className="mx-auto w-full min-w-0 max-w-[1250px] overflow-x-hidden bg-body-bg px-5 pb-10 md:px-10">
       <div className="flex items-center justify-between">
         <div>
           <div className="py-10 flex flex-col gap-6">

src/app/(registry)/changelog/changelog-content/enhancement-editable-errorstate.tsx

@@ -0,0 +1,59 @@
+import type { ChangelogItem } from "../changelogs";
+
+const Thumb = ({ className }: { className?: string }) => (
+  <svg
+    width="100%"
+    height="100%"
+    viewBox="0 0 400 300"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    preserveAspectRatio="xMidYMid meet"
+  >
+    <rect
+      x="60"
+      y="126"
+      width="280"
+      height="49"
+      rx="8"
+      fill="var(--color-gray-50)"
+    />
+    <rect
+      x="54"
+      y="120"
+      width="292"
+      height="61"
+      rx="8"
+      stroke="var(--color-danger-400)"
+      strokeWidth="4"
+    />
+    <g transform="translate(-100, 0)">
+      <path
+        d="M287.211 161H286.404C286.181 161 286 160.795 286 160.543C286 160.291 286.181 160.087 286.404 160.087H287.212C287.88 160.087 288.423 159.472 288.423 158.717V142.283C288.423 141.528 287.88 140.913 287.212 140.913L286.404 140.913C286.181 140.913 286 140.709 286 140.457C286 140.204 286.181 140 286.404 140H287.212C288.325 140 289.231 141.024 289.231 142.283V158.717C289.231 159.975 288.324 161 287.211 161V161Z"
+        fill="var(--color-gray-600)"
+      />
+      <path
+        d="M291.25 161H290.442C289.329 161 288.423 159.975 288.423 158.717L288.423 142.283C288.423 141.025 289.329 140 290.442 140H291.25C291.473 140 291.654 140.205 291.654 140.457C291.654 140.709 291.473 140.913 291.25 140.913H290.442C289.774 140.913 289.231 141.528 289.231 142.283V158.717C289.231 159.473 289.774 160.087 290.442 160.087H291.25C291.473 160.087 291.654 160.291 291.654 160.543C291.654 160.795 291.473 161 291.25 161V161Z"
+        fill="var(--color-gray-600)"
+      />
+      <path
+        d="M290.442 150.956H287.211C286.988 150.956 286.807 150.752 286.807 150.5C286.807 150.248 286.988 150.043 287.211 150.043H290.442C290.665 150.043 290.846 150.248 290.846 150.5C290.846 150.752 290.665 150.956 290.442 150.956Z"
+        fill="var(--color-gray-600)"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M218 161C217.448 161 217 160.552 217 160L217 141C217 140.448 217.448 140 218 140C218.552 140 219 140.448 219 141L219 160C219 160.552 218.552 161 218 161Z"
+        fill="var(--color-gray-600)"
+      />
+    </g>
+  </svg>
+);
+
+const May2026EditableErrorState: ChangelogItem = {
+  description: `Error state handling has been added to editable components to improve form validation and user feedback. This update provides 
+    clearer validation states and a more consistent editing experience, helping users identify and resolve input errors more efficiently.`,
+  thumbnail: <Thumb />,
+};
+
+export default May2026EditableErrorState;

src/app/(registry)/changelog/changelog-content/enhancement-sidebar-rhs.tsx

@@ -0,0 +1,62 @@
+import type { ChangelogItem } from "../changelogs";
+
+const Thumb = ({ className }: { className?: string }) => (
+  <svg
+    width="400"
+    height="300"
+    viewBox="0 0 400 300"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    preserveAspectRatio="xMidYMid meet"
+  >
+    {/* Main content area (left side) */}
+    <path
+      d="M50 38C50 33.5817 53.5817 30 58 30H242V270H58C53.5817 270 50 266.418 50 262V38Z"
+      fill="white"
+    />
+    <rect x="60" y="59" width="87" height="22" rx="11" fill="#C6C6C6" />
+    <rect x="60" y="92" width="163" height="21" rx="10.5" fill="#E5E5E5" />
+    <rect x="60" y="124" width="152" height="21" rx="10.5" fill="#E5E5E5" />
+    <rect x="60" y="156" width="152" height="21" rx="10.5" fill="#E5E5E5" />
+
+    {/* Right sidebar */}
+    <path
+      d="M242 30H342C346.418 30 350 33.5817 350 38V262C350 266.418 346.418 270 342 270H242V30Z"
+      fill="#D9D4FF"
+    />
+    <rect x="252" y="59" width="70" height="22" rx="11" fill="#B8A9FF" />
+    <rect x="252" y="92" width="80" height="21" rx="10.5" fill="#E5E5E5" />
+    <rect x="252" y="124" width="80" height="21" rx="10.5" fill="#E5E5E5" />
+    <rect x="252" y="156" width="80" height="21" rx="10.5" fill="#E5E5E5" />
+
+    {/* Resize handle indicator */}
+    <rect x="240" y="120" width="2" height="60" rx="1" fill="#9373FF" />
+
+    {/* Collapse button indicator */}
+    <circle
+      cx="230"
+      cy="150"
+      r="8"
+      fill="white"
+      stroke="#9373FF"
+      strokeWidth="1.5"
+    />
+    <path
+      d="M226 146L230 150L226 154"
+      stroke="#9373FF"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      fill="none"
+    />
+  </svg>
+);
+
+const May2026SidebarRHS: ChangelogItem = {
+  description: `The Sidebar RHS Block has been updated to align with the latest theme and feature set, ensuring a more consistent visual 
+    experience across the platform while supporting the new functionality and interaction patterns introduced in recent updates.`,
+  thumbnail: <Thumb />,
+};
+
+export default May2026SidebarRHS;

src/app/(registry)/changelog/changelog-content/feature-virtualized-select.tsx

@@ -0,0 +1,94 @@
+import type { ChangelogItem } from "../changelogs";
+
+const Thumb = ({ className }: { className?: string }) => (
+  <svg
+    width="300"
+    height="225"
+    viewBox="0 0 400 300"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    preserveAspectRatio="xMidYMid meet"
+  >
+    <g clipPath="url(#clip0_3_103)" transform="scale(1.15) translate(0, -40)">
+      <rect x="53" y="128" width="294" height="45" rx="6" fill="white" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M71 150.5C71 148.015 73.0147 146 75.5 146H196.5C198.985 146 201 148.015 201 150.5C201 152.985 198.985 155 196.5 155H75.5C73.0147 155 71 152.985 71 150.5Z"
+        fill="var(--color-gray-400)"
+      />
+      <path
+        d="M328.59 147.59L324 152.17L319.41 147.59L318 149L324 155L330 149L328.59 147.59Z"
+        fill="var(--color-gray-500)"
+      />
+      <rect x="53" y="181" width="294" height="136" rx="6" fill="white" />
+      <rect
+        x="53"
+        y="228"
+        width="294"
+        height="42"
+        fill="var(--color-primary-50)"
+      />
+      <rect
+        x="335"
+        y="181"
+        width="12"
+        height="136"
+        fill="var(--color-gray-50)"
+      />
+      <rect
+        x="337"
+        y="214"
+        width="8"
+        height="36"
+        rx="4"
+        fill="var(--color-gray-300)"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M71 203.5C71 201.015 73.0147 199 75.5 199H206.5C208.985 199 211 201.015 211 203.5C211 205.985 208.985 208 206.5 208H75.5C73.0147 208 71 205.985 71 203.5Z"
+        fill="var(--color-gray-400)"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M71 248.5C71 246.015 73.0147 244 75.5 244H306.5C308.985 244 311 246.015 311 248.5C311 250.985 308.985 253 306.5 253H75.5C73.0147 253 71 250.985 71 248.5Z"
+        fill="var(--color-primary-400)"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M71 294.5C71 292.015 73.0147 290 75.5 290H246.5C248.985 290 251 292.015 251 294.5C251 296.985 248.985 299 246.5 299H75.5C73.0147 299 71 296.985 71 294.5Z"
+        fill="var(--color-gray-400)"
+      />
+      <path
+        d="M342.284 264.298C341.756 264.138 341.281 264.244 340.911 264.377C340.594 264.004 340.066 263.658 339.379 263.658C338.852 263.658 338.402 263.818 338.059 263.978C337.664 263.472 337.03 262.992 336.079 262.992C335.551 262.992 335.129 263.152 334.759 263.339V259.663C334.759 258.598 334.046 257 332.119 257C330.192 257 329.479 258.598 329.479 259.663V267.121L329.32 266.961C329.215 266.828 328.159 265.603 326.812 265.656C325.545 265.683 324.753 266.215 324.251 267.387C323.644 268.826 324.304 269.412 324.489 269.545C324.991 269.891 325.492 270.344 325.545 270.53C325.624 270.77 326.073 272.075 326.944 273.354C327.288 273.86 327.736 274.232 328.053 274.525C328.159 274.632 328.265 274.712 328.344 274.792C328.423 274.871 328.555 275.005 328.687 275.138C328.977 275.404 329.321 275.751 329.638 276.097C329.902 276.417 330.509 277.721 330.852 278.574C330.958 278.813 331.195 279 331.459 279H340.7C340.937 279 341.122 278.894 341.254 278.68C341.36 278.494 344 274.312 344 271.676V266.882C344 265.496 343.392 264.644 342.283 264.298L342.284 264.298ZM342.68 271.649C342.68 273.38 341.122 276.309 340.33 277.641H331.881C331.591 276.949 331.01 275.671 330.614 275.218C330.271 274.818 329.901 274.472 329.584 274.152C329.452 274.019 329.347 273.939 329.268 273.833C329.162 273.726 329.056 273.62 328.898 273.513C328.607 273.274 328.264 272.954 328.027 272.608C327.419 271.729 326.97 270.716 326.786 270.104C326.574 269.465 325.677 268.772 325.307 268.479C325.307 268.399 325.334 268.213 325.466 267.893C325.756 267.201 326.099 266.988 326.865 266.961H326.891C327.499 266.961 328.132 267.547 328.343 267.813L329.663 269.278C329.848 269.491 330.139 269.544 330.403 269.464C330.667 269.358 330.825 269.118 330.825 268.852L330.825 259.663C330.825 259.45 330.878 258.332 332.145 258.332C333.36 258.332 333.465 259.344 333.465 259.663V266.988C333.465 267.361 333.756 267.654 334.125 267.654C334.495 267.654 334.786 267.361 334.786 266.988V265.07C334.97 264.831 335.446 264.325 336.106 264.325C336.739 264.325 337.056 264.804 337.162 264.991V266.988C337.162 267.361 337.452 267.654 337.822 267.654C338.192 267.654 338.482 267.361 338.482 266.988V265.31C338.667 265.177 339.01 264.991 339.406 264.991C339.776 264.991 339.987 265.257 340.066 265.417V266.988C340.066 267.361 340.357 267.654 340.727 267.654C341.096 267.654 341.387 267.361 341.387 266.988V265.63C341.545 265.55 341.73 265.497 341.915 265.55C342.284 265.683 342.707 265.87 342.707 266.855V271.649L342.68 271.649Z"
+        fill="black"
+      />
+      <path
+        d="M332.007 257.002C332.004 257.002 332.001 257.002 331.998 257.002L332.003 257L332.007 257.002Z"
+        fill="white"
+      />
+      <path
+        d="M340.333 277.641C341.125 276.309 342.683 273.38 342.683 271.649L342.71 271.649V266.855C342.71 265.87 342.287 265.683 341.917 265.55C341.733 265.497 341.548 265.55 341.39 265.63V266.988C341.39 267.361 341.099 267.654 340.729 267.654C340.36 267.654 340.069 267.361 340.069 266.988V265.417C339.99 265.257 339.779 264.991 339.409 264.991C339.013 264.991 338.67 265.177 338.485 265.31V266.988C338.485 267.361 338.195 267.654 337.825 267.654C337.455 267.654 337.165 267.361 337.165 266.988V264.991C337.059 264.804 336.742 264.325 336.109 264.325C335.449 264.325 334.973 264.831 334.789 265.07V266.988C334.789 267.361 334.498 267.654 334.128 267.654C333.759 267.654 333.468 267.361 333.468 266.988V259.663C333.468 259.344 333.363 258.332 332.148 258.332C330.881 258.332 330.828 259.45 330.828 259.663L330.828 268.852C330.828 269.118 330.669 269.358 330.405 269.464C330.142 269.544 329.851 269.491 329.666 269.278L328.346 267.813C328.135 267.547 327.502 266.961 326.894 266.961H326.868C326.102 266.988 325.759 267.201 325.468 267.893C325.337 268.213 325.31 268.399 325.31 268.479C325.324 268.49 325.338 268.501 325.353 268.513C325.744 268.823 326.585 269.488 326.789 270.104C326.973 270.716 327.422 271.729 328.03 272.608C328.267 272.954 328.61 273.274 328.901 273.513C329.059 273.62 329.165 273.726 329.27 273.833C329.321 273.901 329.383 273.958 329.455 274.026C329.496 274.064 329.54 274.105 329.587 274.152C329.664 274.23 329.745 274.31 329.827 274.391C330.083 274.644 330.357 274.916 330.617 275.218C331.013 275.671 331.594 276.949 331.884 277.641H340.333Z"
+        fill="white"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_3_103">
+        <rect width="400" height="300" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+const May2026VirtualizedSelect: ChangelogItem = {
+  description: `A new Virtualized Select variant has been added to React Select, designed specifically for large option lists. 
+    By leveraging virtualization, it improves rendering performance and responsiveness when working with a high number of options.
+    The component is available as a separate Virtualized Select implementation, with configuration documented within the React Select documentation page.`,
+  thumbnail: <Thumb />,
+};
+
+export default May2026VirtualizedSelect;