@mostrom/app-shell 0.1.3 → 0.1.4

package/bun.lock

@@ -6,15 +6,13 @@
       "name": "@platform/app-shell",
       "dependencies": {
         "@base-ui/react": "^1.1.0",
-        "@cloudscape-design/components": "*",
-        "@cloudscape-design/global-styles": "*",
         "@dnd-kit/core": "^6.3.1",
         "@dnd-kit/modifiers": "^9.0.0",
         "@dnd-kit/sortable": "^10.0.0",
         "@dnd-kit/utilities": "^3.2.2",
         "@floating-ui/dom": "^1.7.5",
         "@hookform/resolvers": "^5.2.2",
-        "@platform/service-catalog": "file:../service-catalog",
+        "@platform/service-catalog": "npm:@mostrom/service-catalog@latest",
         "@radix-ui/react-dropdown-menu": "^2.1.4",
         "@tanstack/react-table": "^8.21.3",
         "class-variance-authority": "^0.7.1",
@@ -52,18 +50,6 @@
 
     "@base-ui/utils": ["@base-ui/utils@0.2.4", "", { "dependencies": { "@babel/runtime": "^7.28.4", "@floating-ui/utils": "^0.2.10", "reselect": "^5.1.1", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "@types/react": "^17 || ^18 || ^19", "react": "^17 || ^18 || ^19", "react-dom": "^17 || ^18 || ^19" }, "optionalPeers": ["@types/react"] }, "sha512-smZwpMhjO29v+jrZusBSc5T+IJ3vBb9cjIiBjtKcvWmRj9Z4DWGVR3efr1eHR56/bqY5a4qyY9ElkOY5ljo3ng=="],
 
-    "@cloudscape-design/collection-hooks": ["@cloudscape-design/collection-hooks@1.0.82", "", { "dependencies": { "@cloudscape-design/component-toolkit": "^1.0.0-beta" }, "peerDependencies": { "react": ">=16.8.0" } }, "sha512-e9l8aRGlwXuZ46lK3pSc7OsGj3eKiAzkNTGhTkjxSBa749K1dY/MZ001elJPWpq+ZI5rui5j5950cNPM5sG+sQ=="],
-
-    "@cloudscape-design/component-toolkit": ["@cloudscape-design/component-toolkit@1.0.0-beta.138", "", { "dependencies": { "tslib": "^2.3.1", "weekstart": "^2.0.0" }, "peerDependencies": { "react": ">=16.8.0" } }, "sha512-soKxjnmFvY5XroSVqsD0FkYI2ZclF0FipdM8cfrF+eGhuOe5Vs2kcVH+OJz4ZYJddgwaGHCbTO6s0iOA16yVeA=="],
-
-    "@cloudscape-design/components": ["@cloudscape-design/components@3.0.1200", "", { "dependencies": { "@cloudscape-design/collection-hooks": "^1.0.0", "@cloudscape-design/component-toolkit": "^1.0.0-beta", "@cloudscape-design/test-utils-core": "^1.0.0", "@cloudscape-design/theming-runtime": "^1.0.0", "@dnd-kit/core": "^6.0.8", "@dnd-kit/sortable": "^7.0.2", "@dnd-kit/utilities": "^3.2.1", "ace-builds": "^1.34.0", "clsx": "^1.1.0", "d3-shape": "^1.3.7", "date-fns": "^2.25.0", "intl-messageformat": "^10.3.1", "mnth": "^2.0.0", "react-keyed-flatten-children": "^2.2.1", "react-transition-group": "^4.4.2", "tslib": "^2.4.0", "weekstart": "^1.1.0" }, "peerDependencies": { "react": ">=16.8.0" } }, "sha512-V/2Ah+f2D4IbNTGu5gI+9dZTWf0V+CVpyKCVxSGlfiti/OLH5kjzeZTzFxSVVDH2ZzMm0CdZH1W8iw94wGnVvQ=="],
-
-    "@cloudscape-design/global-styles": ["@cloudscape-design/global-styles@1.0.50", "", {}, "sha512-IF/z6yhFvN+jWJeXgpHqvs5Eib52R3xOIzPkX/HcoXcDIO818IIwx9cFFgnt9ZHKyduIlmQ1wtBbCdIixMISHw=="],
-
-    "@cloudscape-design/test-utils-core": ["@cloudscape-design/test-utils-core@1.0.71", "", { "dependencies": { "css-selector-tokenizer": "^0.8.0", "css.escape": "^1.5.1" } }, "sha512-4rXQlsd6Rdg+KCNoltLa1+0wjgNugbduuK7L4nTa/Aw/gJIYqrTU78ip5A2VmbDhiE6fiGqtCFmU6LcKCMP//A=="],
-
-    "@cloudscape-design/theming-runtime": ["@cloudscape-design/theming-runtime@1.0.91", "", { "dependencies": { "@material/material-color-utilities": "^0.3.0", "tslib": "^2.4.0" } }, "sha512-umIE/M+tzrFo9c4Skrh4AFFtaDC4eANkjp+xYikUj7ng6wTXj6kkSzxbVbg2fBEmIUgLYAzMHYbyKUzQWuz0ag=="],
-
     "@date-fns/tz": ["@date-fns/tz@1.4.1", "", {}, "sha512-P5LUNhtbj6YfI3iJjw5EL9eUAG6OitD0W3fWQcpQjDRc/QIsL0tRNuO1PcDvPccWL1fSTXXdE1ds+l95DV/OFA=="],
 
     "@dnd-kit/accessibility": ["@dnd-kit/accessibility@3.1.1", "", { "dependencies": { "tslib": "^2.0.0" }, "peerDependencies": { "react": ">=16.8.0" } }, ""],
@@ -84,21 +70,9 @@
 
     "@floating-ui/utils": ["@floating-ui/utils@0.2.10", "", {}, "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ=="],
 
-    "@formatjs/ecma402-abstract": ["@formatjs/ecma402-abstract@2.3.6", "", { "dependencies": { "@formatjs/fast-memoize": "2.2.7", "@formatjs/intl-localematcher": "0.6.2", "decimal.js": "^10.4.3", "tslib": "^2.8.0" } }, "sha512-HJnTFeRM2kVFVr5gr5kH1XP6K0JcJtE7Lzvtr3FS/so5f1kpsqqqxy5JF+FRaO6H2qmcMfAUIox7AJteieRtVw=="],
-
-    "@formatjs/fast-memoize": ["@formatjs/fast-memoize@2.2.7", "", { "dependencies": { "tslib": "^2.8.0" } }, "sha512-Yabmi9nSvyOMrlSeGGWDiH7rf3a7sIwplbvo/dlz9WCIjzIQAfy1RMf4S0X3yG724n5Ghu2GmEl5NJIV6O9sZQ=="],
-
-    "@formatjs/icu-messageformat-parser": ["@formatjs/icu-messageformat-parser@2.11.4", "", { "dependencies": { "@formatjs/ecma402-abstract": "2.3.6", "@formatjs/icu-skeleton-parser": "1.8.16", "tslib": "^2.8.0" } }, "sha512-7kR78cRrPNB4fjGFZg3Rmj5aah8rQj9KPzuLsmcSn4ipLXQvC04keycTI1F7kJYDwIXtT2+7IDEto842CfZBtw=="],
-
-    "@formatjs/icu-skeleton-parser": ["@formatjs/icu-skeleton-parser@1.8.16", "", { "dependencies": { "@formatjs/ecma402-abstract": "2.3.6", "tslib": "^2.8.0" } }, "sha512-H13E9Xl+PxBd8D5/6TVUluSpxGNvFSlN/b3coUp0e0JpuWXXnQDiavIpY3NnvSp4xhEMoXyyBvVfdFX8jglOHQ=="],
-
-    "@formatjs/intl-localematcher": ["@formatjs/intl-localematcher@0.6.2", "", { "dependencies": { "tslib": "^2.8.0" } }, "sha512-XOMO2Hupl0wdd172Y06h6kLpBz6Dv+J4okPLl4LPtzbr8f66WbIoy4ev98EBuZ6ZK4h5ydTN6XneT4QVpD7cdA=="],
-
     "@hookform/resolvers": ["@hookform/resolvers@5.2.2", "", { "dependencies": { "@standard-schema/utils": "^0.3.0" }, "peerDependencies": { "react-hook-form": "^7.55.0" } }, "sha512-A/IxlMLShx3KjV/HeTcTfaMxdwy690+L/ZADoeaTltLx+CVuzkeVIPuybK3jrRfw7YZnmdKsVVHAlEPIAEUNlA=="],
 
-    "@material/material-color-utilities": ["@material/material-color-utilities@0.3.0", "", {}, "sha512-ztmtTd6xwnuh2/xu+Vb01btgV8SQWYCaK56CkRK8gEkWe5TuDyBcYJ0wgkMRn+2VcE9KUmhvkz+N9GHrqw/C0g=="],
-
-    "@platform/service-catalog": ["@platform/service-catalog@file:../service-catalog", {}],
+    "@platform/service-catalog": ["@mostrom/service-catalog@0.1.3", "", {}, "sha512-q3GMS6sz4+KTRSFrI5zOPYInCYqnNp6HdZ4yjNq8J6X8Pn2HyEih4QVfB/C4LtJ5g6Qa6P6GS9/GEzctkAnJzA=="],
 
     "@radix-ui/number": ["@radix-ui/number@1.1.1", "", {}, "sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g=="],
 
@@ -248,8 +222,6 @@
 
     "@types/react-dom": ["@types/react-dom@19.2.3", "", { "peerDependencies": { "@types/react": "^19.2.0" } }, "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ=="],
 
-    "ace-builds": ["ace-builds@1.43.6", "", {}, "sha512-L1ddibQ7F3vyXR2k2fg+I8TQTPWVA6CKeDQr/h2+8CeyTp3W6EQL8xNFZRTztuP8xNOAqL3IYPqdzs31GCjDvg=="],
-
     "aria-hidden": ["aria-hidden@1.2.6", "", { "dependencies": { "tslib": "^2.0.0" } }, "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA=="],
 
     "class-variance-authority": ["class-variance-authority@0.7.1", "", { "dependencies": { "clsx": "^2.1.1" } }, "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg=="],
@@ -258,12 +230,6 @@
 
     "cmdk": ["cmdk@1.1.1", "", { "dependencies": { "@radix-ui/react-compose-refs": "^1.1.1", "@radix-ui/react-dialog": "^1.1.6", "@radix-ui/react-id": "^1.1.0", "@radix-ui/react-primitive": "^2.0.2" }, "peerDependencies": { "react": "^18 || ^19 || ^19.0.0-rc", "react-dom": "^18 || ^19 || ^19.0.0-rc" } }, "sha512-Vsv7kFaXm+ptHDMZ7izaRsP70GgrW9NBNGswt9OZaVBLlE0SNpDq8eu/VGXyF9r7M0azK3Wy7OlYXsuyYLFzHg=="],
 
-    "css-selector-tokenizer": ["css-selector-tokenizer@0.8.0", "", { "dependencies": { "cssesc": "^3.0.0", "fastparse": "^1.1.2" } }, "sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg=="],
-
-    "css.escape": ["css.escape@1.5.1", "", {}, "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg=="],
-
-    "cssesc": ["cssesc@3.0.0", "", { "bin": { "cssesc": "bin/cssesc" } }, "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="],
-
     "csstype": ["csstype@3.2.3", "", {}, ""],
 
     "d3-array": ["d3-array@3.2.4", "", { "dependencies": { "internmap": "1 - 2" } }, "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg=="],
@@ -276,11 +242,11 @@
 
     "d3-interpolate": ["d3-interpolate@3.0.1", "", { "dependencies": { "d3-color": "1 - 3" } }, "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g=="],
 
-    "d3-path": ["d3-path@1.0.9", "", {}, "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg=="],
+    "d3-path": ["d3-path@3.1.0", "", {}, "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ=="],
 
     "d3-scale": ["d3-scale@4.0.2", "", { "dependencies": { "d3-array": "2.10.0 - 3", "d3-format": "1 - 3", "d3-interpolate": "1.2.0 - 3", "d3-time": "2.1.1 - 3", "d3-time-format": "2 - 4" } }, "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ=="],
 
-    "d3-shape": ["d3-shape@1.3.7", "", { "dependencies": { "d3-path": "1" } }, "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw=="],
+    "d3-shape": ["d3-shape@3.2.0", "", { "dependencies": { "d3-path": "^3.1.0" } }, "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA=="],
 
     "d3-time": ["d3-time@3.1.0", "", { "dependencies": { "d3-array": "2 - 3" } }, "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q=="],
 
@@ -292,8 +258,6 @@
 
     "date-fns-jalali": ["date-fns-jalali@4.1.0-0", "", {}, "sha512-hTIP/z+t+qKwBDcmmsnmjWTduxCg+5KfdqWQvb2X/8C9+knYY6epN/pfxdDuyVlSVeFz0sM5eEfwIUQ70U4ckg=="],
 
-    "decimal.js": ["decimal.js@10.6.0", "", {}, "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg=="],
-
     "decimal.js-light": ["decimal.js-light@2.5.1", "", {}, "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg=="],
 
     "detect-node-es": ["detect-node-es@1.1.0", "", {}, "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="],
@@ -304,14 +268,10 @@
 
     "fast-equals": ["fast-equals@5.4.0", "", {}, "sha512-jt2DW/aNFNwke7AUd+Z+e6pz39KO5rzdbbFCg2sGafS4mk13MI7Z8O5z9cADNn5lhGODIgLwug6TZO2ctf7kcw=="],
 
-    "fastparse": ["fastparse@1.1.2", "", {}, "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ=="],
-
     "get-nonce": ["get-nonce@1.0.1", "", {}, "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q=="],
 
     "internmap": ["internmap@2.0.3", "", {}, "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg=="],
 
-    "intl-messageformat": ["intl-messageformat@10.7.18", "", { "dependencies": { "@formatjs/ecma402-abstract": "2.3.6", "@formatjs/fast-memoize": "2.2.7", "@formatjs/icu-messageformat-parser": "2.11.4", "tslib": "^2.8.0" } }, "sha512-m3Ofv/X/tV8Y3tHXLohcuVuhWKo7BBq62cqY15etqmLxg2DZ34AGGgQDeR+SCta2+zICb1NX83af0GJmbQ1++g=="],
-
     "js-tokens": ["js-tokens@4.0.0", "", {}, ""],
 
     "lodash": ["lodash@4.17.23", "", {}, "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w=="],
@@ -320,8 +280,6 @@
 
     "lucide-react": ["lucide-react@0.563.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-8dXPB2GI4dI8jV4MgUDGBeLdGk8ekfqVZ0BdLcrRzocGgG75ltNEmWS+gE7uokKF/0oSUuczNDT+g9hFJ23FkA=="],
 
-    "mnth": ["mnth@2.0.0", "", { "dependencies": { "@babel/runtime": "^7.8.0" } }, "sha512-3ZH4UWBGpAwCKdfjynLQpUDVZWMe6vRHwarIpMdGLUp89CVR9hjzgyWERtMyqx+fPEqQ/PsAxFwvwPxLFxW40A=="],
-
     "next-themes": ["next-themes@0.4.6", "", { "peerDependencies": { "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc", "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc" } }, "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA=="],
 
     "object-assign": ["object-assign@4.1.1", "", {}, ""],
@@ -340,8 +298,6 @@
 
     "react-is": ["react-is@18.3.1", "", {}, ""],
 
-    "react-keyed-flatten-children": ["react-keyed-flatten-children@2.2.1", "", { "dependencies": { "react-is": "^18.2.0" }, "peerDependencies": { "react": ">=15.0.0" } }, "sha512-6yBLVO6suN8c/OcJk1mzIrUHdeEzf5rtRVBhxEXAHO49D7SlJ70cG4xrSJrBIAG7MMeQ+H/T151mM2dRDNnFaA=="],
-
     "react-remove-scroll": ["react-remove-scroll@2.7.2", "", { "dependencies": { "react-remove-scroll-bar": "^2.3.7", "react-style-singleton": "^2.2.3", "tslib": "^2.1.0", "use-callback-ref": "^1.3.3", "use-sidecar": "^1.1.3" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q=="],
 
     "react-remove-scroll-bar": ["react-remove-scroll-bar@2.3.8", "", { "dependencies": { "react-style-singleton": "^2.2.2", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q=="],
@@ -382,22 +338,8 @@
 
     "victory-vendor": ["victory-vendor@36.9.2", "", { "dependencies": { "@types/d3-array": "^3.0.3", "@types/d3-ease": "^3.0.0", "@types/d3-interpolate": "^3.0.1", "@types/d3-scale": "^4.0.2", "@types/d3-shape": "^3.1.0", "@types/d3-time": "^3.0.0", "@types/d3-timer": "^3.0.0", "d3-array": "^3.1.6", "d3-ease": "^3.0.1", "d3-interpolate": "^3.0.1", "d3-scale": "^4.0.2", "d3-shape": "^3.1.0", "d3-time": "^3.0.0", "d3-timer": "^3.0.1" } }, "sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ=="],
 
-    "weekstart": ["weekstart@1.1.0", "", {}, "sha512-ZO3I7c7J9nwGN1PZKZeBYAsuwWEsCOZi5T68cQoVNYrzrpp5Br0Bgi0OF4l8kH/Ez7nKfxa5mSsXjsgris3+qg=="],
-
     "zod": ["zod@4.3.6", "", {}, "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg=="],
 
-    "@cloudscape-design/component-toolkit/weekstart": ["weekstart@2.0.0", "", {}, "sha512-HjYc14IQUwDcnGICuc8tVtqAd6EFpoAQMqgrqcNtWWZB+F1b7iTq44GzwM1qvnH4upFgbhJsaNHuK93NOFheSg=="],
-
-    "@cloudscape-design/components/@dnd-kit/sortable": ["@dnd-kit/sortable@7.0.2", "", { "dependencies": { "@dnd-kit/utilities": "^3.2.0", "tslib": "^2.0.0" }, "peerDependencies": { "@dnd-kit/core": "^6.0.7", "react": ">=16.8.0" } }, "sha512-wDkBHHf9iCi1veM834Gbk1429bd4lHX4RpAwT0y2cHLf246GAvU2sVw/oxWNpPKQNQRQaeGXhAVgrOl1IT+iyA=="],
-
-    "@cloudscape-design/components/clsx": ["clsx@1.2.1", "", {}, "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg=="],
-
-    "@cloudscape-design/components/date-fns": ["date-fns@2.30.0", "", { "dependencies": { "@babel/runtime": "^7.21.0" } }, "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw=="],
-
     "prop-types/react-is": ["react-is@16.13.1", "", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],
-
-    "victory-vendor/d3-shape": ["d3-shape@3.2.0", "", { "dependencies": { "d3-path": "^3.1.0" } }, "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA=="],
-
-    "victory-vendor/d3-shape/d3-path": ["d3-path@3.1.0", "", {}, "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ=="],
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mostrom/app-shell",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "private": false,
   "type": "module",
   "exports": {
@@ -29,7 +29,7 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@floating-ui/dom": "^1.7.5",
     "@hookform/resolvers": "^5.2.2",
-    "@platform/service-catalog": "npm:@mostrom/service-catalog@^0.1.3",
+    "@platform/service-catalog": "npm:@mostrom/service-catalog@^0.1.4",
     "@radix-ui/react-dropdown-menu": "^2.1.4",
     "@tanstack/react-table": "^8.21.3",
     "class-variance-authority": "^0.7.1",

package/src/components/global-header/CategoriesButton.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import React from "react";
 import { Button } from "../ui/button";
 import {
   DropdownMenu,

package/src/components/layout/AppSidebar.tsx

@@ -225,4 +225,4 @@ export function AppSidebar({
   );
 }
 
-export { useSidebar, SidebarProvider, SidebarTrigger, SidebarInset } from "./ui/sidebar";
+export { useSidebar, SidebarProvider, SidebarTrigger, SidebarInset } from "../ui/sidebar";

package/src/components/patterns/p-navigation-menu-2.tsx

@@ -0,0 +1,69 @@
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+} from "@/components/ui/navigation-menu"
+
+const components = [
+  {
+    title: "Alert Dialog",
+    href: "#",
+    description:
+      "A modal dialog that interrupts the user with important content.",
+  },
+  {
+    title: "Hover Card",
+    href: "#",
+    description:
+      "For sighted users to preview content available behind a link.",
+  },
+  {
+    title: "Progress",
+    href: "#",
+    description:
+      "Displays an indicator showing the completion progress of a task.",
+  },
+  {
+    title: "Scroll-area",
+    href: "#",
+    description: "Visually or semantically separates content.",
+  },
+]
+
+export function Pattern() {
+  return (
+    <div className="flex items-center justify-center">
+      <NavigationMenu>
+        <NavigationMenuList>
+          <NavigationMenuItem>
+            <NavigationMenuTrigger>Components</NavigationMenuTrigger>
+            <NavigationMenuContent>
+              <ul className="grid w-[400px] gap-2 md:w-[500px] md:grid-cols-2">
+                {components.map((component) => (
+                  <li key={component.title}>
+                    <NavigationMenuLink
+                      asChild
+                      className="flex flex-col items-start gap-2 p-3"
+                    >
+                      <a href={component.href}>
+                        <div className="text-sm leading-none font-medium">
+                          {component.title}
+                        </div>
+                        <p className="text-muted-foreground line-clamp-2 text-sm leading-snug">
+                          {component.description}
+                        </p>
+                      </a>
+                    </NavigationMenuLink>
+                  </li>
+                ))}
+              </ul>
+            </NavigationMenuContent>
+          </NavigationMenuItem>
+        </NavigationMenuList>
+      </NavigationMenu>
+    </div>
+  )
+}

package/src/components/patterns/p-navigation-menu-4.tsx

@@ -0,0 +1,130 @@
+import { Button } from "@/components/ui/button"
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+} from "@/components/ui/navigation-menu"
+import { UserIcon, BuildingIcon, CircleDollarSignIcon, LayoutGridIcon, SparklesIcon, RadioIcon } from "lucide-react"
+
+const industries = [
+  {
+    title: "Individuals",
+    description: "Keep your finances organized.",
+    href: "#",
+    icon: (
+      <UserIcon
+      />
+    ),
+  },
+  {
+    title: "LLCs",
+    description: "Benefit from tax write-offs.",
+    href: "#",
+    icon: (
+      <BuildingIcon
+      />
+    ),
+  },
+  {
+    title: "Freelancers",
+    description: "For independent workers.",
+    href: "#",
+    icon: (
+      <CircleDollarSignIcon
+      />
+    ),
+  },
+  {
+    title: "Investors",
+    description: "Make and grow your money.",
+    href: "#",
+    icon: (
+      <LayoutGridIcon
+      />
+    ),
+  },
+  {
+    title: "Small businesses",
+    description: "We take care of your taxes.",
+    href: "#",
+    icon: (
+      <SparklesIcon
+      />
+    ),
+  },
+  {
+    title: "Crypto",
+    description: "For tech enthusiasts.",
+    href: "#",
+    icon: (
+      <CircleDollarSignIcon
+      />
+    ),
+  },
+  {
+    title: "Big companies",
+    description: "Run your finances easily.",
+    href: "#",
+    icon: (
+      <BuildingIcon
+      />
+    ),
+  },
+  {
+    title: "Investments",
+    description: "Launch your ideas worldwide.",
+    href: "#",
+    icon: (
+      <RadioIcon
+      />
+    ),
+  },
+]
+
+export function Pattern() {
+  return (
+    <div className="flex items-center justify-center">
+      <NavigationMenu>
+        <NavigationMenuList>
+          <NavigationMenuItem>
+            <NavigationMenuTrigger>Industries</NavigationMenuTrigger>
+            <NavigationMenuContent>
+              <div className="w-[500px]">
+                <ul className="grid grid-cols-2 gap-1">
+                  {industries.map((item) => (
+                    <li key={item.title}>
+                      <NavigationMenuLink
+                        asChild
+                        className="flex items-start gap-2 p-3"
+                      >
+                        <a href="#">
+                          {item.icon}
+                          <div className="flex flex-col gap-0.5">
+                            <div className="text-sm leading-none font-medium">
+                              {item.title}
+                            </div>
+                            <p className="text-muted-foreground text-xs leading-snug">
+                              {item.description}
+                            </p>
+                          </div>
+                        </a>
+                      </NavigationMenuLink>
+                    </li>
+                  ))}
+                </ul>
+                <div className="mt-2 px-1 pb-1">
+                  <Button className="w-full" asChild>
+                    <a href="#">Learn more</a>
+                  </Button>
+                </div>
+              </div>
+            </NavigationMenuContent>
+          </NavigationMenuItem>
+        </NavigationMenuList>
+      </NavigationMenu>
+    </div>
+  )
+}

package/src/components/reui/filters.tsx

@@ -251,10 +251,10 @@ function FilterInput<T = unknown>({
   className?: string
   field?: FilterFieldConfig<T>
 }) {
-  const context = useFilterContext()
   const [isValid, setIsValid] = useState(true)
   const [validationMessage, setValidationMessage] = useState("")
   const inputRef = useRef<HTMLInputElement>(null)
+  const context = useFilterContext()
 
   useEffect(() => {
     if (props.autoFocus) {
@@ -396,12 +396,6 @@ function FilterRemoveButton({
 }: FilterRemoveButtonProps) {
   const context = useFilterContext()
 
-  const sizeMap = {
-    sm: "sm" as const,
-    default: "sm" as const,
-    lg: "default" as const,
-  }
-
   return (
     <Button
       variant="outline"
@@ -984,7 +978,6 @@ function FilterValueSelector<T = unknown>({
   operator,
   autoFocus,
 }: FilterValueSelectorProps<T>) {
-  const context = useFilterContext()
 
   if (operator === "empty" || operator === "not_empty") {
     return null

package/src/components/reui/index.ts

@@ -1,7 +1,6 @@
 // ReUI Components
 export * from "./alert";
 export * from "./autocomplete";
-export * from "./badge";
 export * from "./date-selector";
 export * from "./filters";
 export * from "./frame";

package/src/components/ui/field.tsx

@@ -3,7 +3,7 @@
 import { useMemo } from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "../../lib/utils"
+import { cn } from "@/lib/utils"
 import { Label } from "@/components/ui/label"
 import { Separator } from "@/components/ui/separator"
 

package/src/components/ui/index.ts

@@ -23,6 +23,8 @@ export * from "./navigation-menu";
 export * from "./popover";
 export * from "./scroll-area";
 export * from "./select";
+export * from "./simple-select";
+export * from "./simple-input";
 export * from "./separator";
 export * from "./sheet";
 export * from "./space-between";

package/src/components/ui/label.tsx

@@ -1,7 +1,7 @@
 import * as React from "react"
 import { Label as LabelPrimitive } from "radix-ui"
 
-import { cn } from "../../lib/utils"
+import { cn } from "@/lib/utils"
 
 function Label({
   className,

package/src/components/ui/select.tsx

@@ -1,10 +1,8 @@
-"use client"
-
 import * as React from "react"
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
 import { Select as SelectPrimitive } from "radix-ui"
 
-import { cn } from "../../lib/utils"
+import { cn } from "@/lib/utils"
 
 function Select({
   ...props

package/src/components/ui/separator.tsx

@@ -1,7 +1,9 @@
+"use client"
+
 import * as React from "react"
 import { Separator as SeparatorPrimitive } from "radix-ui"
 
-import { cn } from "../../lib/utils"
+import { cn } from "@/lib/utils"
 
 function Separator({
   className,

package/src/components/ui/simple-input.tsx

@@ -0,0 +1,114 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../lib/utils"
+
+/** Props for SimpleInput component - Cloudscape-compatible API */
+export interface SimpleInputProps {
+  /** Current value of the input */
+  value: string
+  /** Callback when value changes - matches Cloudscape pattern */
+  onChange: (event: { detail: { value: string } }) => void
+  /** Input type */
+  type?: "text" | "number" | "search" | "email" | "url" | "password" | "tel"
+  /** Input mode for mobile keyboards */
+  inputMode?: "text" | "numeric" | "decimal" | "email" | "tel" | "url" | "search" | "none"
+  /** Placeholder text */
+  placeholder?: string
+  /** Whether the input is disabled */
+  disabled?: boolean
+  /** Whether the input is read-only */
+  readOnly?: boolean
+  /** Whether the input should auto-focus */
+  autoFocus?: boolean
+  /** Aria label for accessibility */
+  ariaLabel?: string
+  /** Additional className */
+  className?: string
+  /** Name attribute */
+  name?: string
+  /** Auto-complete attribute */
+  autoComplete?: string
+  /** Whether the input is invalid */
+  invalid?: boolean
+  /** Step for number inputs */
+  step?: number | string
+  /** Min value for number inputs */
+  min?: number | string
+  /** Max value for number inputs */
+  max?: number | string
+}
+
+/**
+ * SimpleInput - An input component with Cloudscape-compatible API.
+ *
+ * Provides a declarative API similar to Cloudscape Input while using
+ * the app-shell styling.
+ *
+ * @example
+ * ```tsx
+ * <SimpleInput
+ *   value={name}
+ *   onChange={({ detail }) => setName(detail.value)}
+ *   placeholder="Enter your name"
+ * />
+ * ```
+ *
+ * @example Number input
+ * ```tsx
+ * <SimpleInput
+ *   type="number"
+ *   value={String(amount)}
+ *   onChange={({ detail }) => setAmount(parseInt(detail.value, 10) || 0)}
+ *   placeholder="0"
+ * />
+ * ```
+ */
+export function SimpleInput({
+  value,
+  onChange,
+  type = "text",
+  inputMode,
+  placeholder,
+  disabled = false,
+  readOnly = false,
+  autoFocus = false,
+  ariaLabel,
+  className,
+  name,
+  autoComplete,
+  invalid = false,
+  step,
+  min,
+  max,
+}: SimpleInputProps) {
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    onChange({ detail: { value: event.target.value } })
+  }
+
+  return (
+    <input
+      type={type}
+      value={value}
+      onChange={handleChange}
+      placeholder={placeholder}
+      disabled={disabled}
+      readOnly={readOnly}
+      autoFocus={autoFocus}
+      aria-label={ariaLabel}
+      aria-invalid={invalid || undefined}
+      name={name}
+      autoComplete={autoComplete}
+      inputMode={inputMode}
+      step={step}
+      min={min}
+      max={max}
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+    />
+  )
+}

package/src/components/ui/simple-select.tsx

@@ -0,0 +1,310 @@
+"use client"
+
+import * as React from "react"
+import { CheckIcon, ChevronDownIcon, SearchIcon } from "lucide-react"
+import { cn } from "../../lib/utils"
+
+/** Option type for SimpleSelect */
+export interface SelectOption {
+  /** Display label for the option */
+  label: string
+  /** Value of the option */
+  value: string
+  /** Optional description shown below the label */
+  description?: string
+  /** Whether the option is disabled */
+  disabled?: boolean
+}
+
+/** Grouped options type for SimpleSelect */
+export interface SelectOptionGroup {
+  /** Group label */
+  label: string
+  /** Options in this group */
+  options: SelectOption[]
+}
+
+/** Props for SimpleSelect component */
+export interface SimpleSelectProps {
+  /** Currently selected option */
+  selectedOption: SelectOption | null
+  /** Callback when selection changes - matches Cloudscape pattern */
+  onChange: (event: { detail: { selectedOption: SelectOption } }) => void
+  /** Options to display - can be flat array or grouped */
+  options: (SelectOption | SelectOptionGroup)[]
+  /** Placeholder text when no option is selected */
+  placeholder?: string
+  /** Whether the select is disabled */
+  disabled?: boolean
+  /** Enable filtering/search - "auto" enables search */
+  filteringType?: "auto" | "none"
+  /** Additional className for the trigger */
+  className?: string
+  /** Trigger size */
+  size?: "sm" | "default"
+}
+
+/** Type guard to check if an option is a group */
+function isOptionGroup(option: SelectOption | SelectOptionGroup): option is SelectOptionGroup {
+  return "options" in option && Array.isArray(option.options)
+}
+
+/** Flatten grouped options into a flat list */
+function flattenOptions(options: (SelectOption | SelectOptionGroup)[]): SelectOption[] {
+  return options.flatMap((opt) => (isOptionGroup(opt) ? opt.options : [opt]))
+}
+
+/**
+ * SimpleSelect - A select component with Cloudscape-compatible API.
+ *
+ * Provides a declarative API similar to Cloudscape Select while using
+ * custom dropdown implementation for flexibility.
+ *
+ * @example
+ * ```tsx
+ * <SimpleSelect
+ *   selectedOption={selectedOption}
+ *   onChange={({ detail }) => setSelectedOption(detail.selectedOption)}
+ *   options={[
+ *     { label: "Option 1", value: "1" },
+ *     { label: "Option 2", value: "2" },
+ *   ]}
+ *   placeholder="Select an option"
+ * />
+ * ```
+ *
+ * @example With grouped options
+ * ```tsx
+ * <SimpleSelect
+ *   selectedOption={selectedTimezone}
+ *   onChange={({ detail }) => setSelectedTimezone(detail.selectedOption)}
+ *   options={[
+ *     { label: "Americas", options: [
+ *       { label: "New York", value: "America/New_York" },
+ *       { label: "Los Angeles", value: "America/Los_Angeles" },
+ *     ]},
+ *     { label: "Europe", options: [
+ *       { label: "London", value: "Europe/London" },
+ *       { label: "Paris", value: "Europe/Paris" },
+ *     ]},
+ *   ]}
+ *   filteringType="auto"
+ * />
+ * ```
+ */
+export function SimpleSelect({
+  selectedOption,
+  onChange,
+  options,
+  placeholder = "Select...",
+  disabled = false,
+  filteringType = "none",
+  className,
+  size = "default",
+}: SimpleSelectProps) {
+  const [isOpen, setIsOpen] = React.useState(false)
+  const [filterText, setFilterText] = React.useState("")
+  const containerRef = React.useRef<HTMLDivElement>(null)
+  const inputRef = React.useRef<HTMLInputElement>(null)
+
+  const isSearchable = filteringType === "auto"
+
+  // Close dropdown when clicking outside
+  React.useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsOpen(false)
+        setFilterText("")
+      }
+    }
+
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside)
+      return () => document.removeEventListener("mousedown", handleClickOutside)
+    }
+  }, [isOpen])
+
+  // Focus input when dropdown opens (for searchable selects)
+  React.useEffect(() => {
+    if (isOpen && isSearchable && inputRef.current) {
+      inputRef.current.focus()
+    }
+  }, [isOpen, isSearchable])
+
+  // Handle keyboard navigation
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (disabled) return
+
+    switch (event.key) {
+      case "Enter":
+      case " ":
+        if (!isOpen) {
+          event.preventDefault()
+          setIsOpen(true)
+        }
+        break
+      case "Escape":
+        setIsOpen(false)
+        setFilterText("")
+        break
+      case "ArrowDown":
+        if (!isOpen) {
+          event.preventDefault()
+          setIsOpen(true)
+        }
+        break
+    }
+  }
+
+  const handleSelect = (option: SelectOption) => {
+    onChange({ detail: { selectedOption: option } })
+    setIsOpen(false)
+    setFilterText("")
+  }
+
+  // Filter options based on search text
+  const getFilteredOptions = (): (SelectOption | SelectOptionGroup)[] => {
+    if (!filterText.trim()) return options
+
+    const searchLower = filterText.toLowerCase()
+
+    return options
+      .map((opt) => {
+        if (isOptionGroup(opt)) {
+          const filteredGroupOptions = opt.options.filter(
+            (o) =>
+              o.label.toLowerCase().includes(searchLower) ||
+              o.value.toLowerCase().includes(searchLower) ||
+              o.description?.toLowerCase().includes(searchLower)
+          )
+          if (filteredGroupOptions.length === 0) return null
+          return { ...opt, options: filteredGroupOptions }
+        }
+        const matches =
+          opt.label.toLowerCase().includes(searchLower) ||
+          opt.value.toLowerCase().includes(searchLower) ||
+          opt.description?.toLowerCase().includes(searchLower)
+        return matches ? opt : null
+      })
+      .filter(Boolean) as (SelectOption | SelectOptionGroup)[]
+  }
+
+  const filteredOptions = getFilteredOptions()
+  const allOptions = flattenOptions(options)
+
+  const renderOption = (option: SelectOption, index: number) => {
+    const isSelected = selectedOption?.value === option.value
+    return (
+      <div
+        key={`${option.value}-${index}`}
+        role="option"
+        aria-selected={isSelected}
+        className={cn(
+          "relative flex w-full cursor-pointer items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none select-none",
+          "hover:bg-accent hover:text-accent-foreground",
+          isSelected && "bg-accent/50",
+          option.disabled && "pointer-events-none opacity-50"
+        )}
+        onClick={() => !option.disabled && handleSelect(option)}
+      >
+        <span className="absolute right-2 flex size-3.5 items-center justify-center">
+          {isSelected && <CheckIcon className="size-4" />}
+        </span>
+        <div className="flex flex-col gap-0.5">
+          <span>{option.label}</span>
+          {option.description && (
+            <span className="text-muted-foreground text-xs">{option.description}</span>
+          )}
+        </div>
+      </div>
+    )
+  }
+
+  const renderOptions = () => {
+    if (filteredOptions.length === 0) {
+      return (
+        <div className="text-muted-foreground py-2 text-center text-sm">
+          {allOptions.length === 0 ? "No options available" : "No options found"}
+        </div>
+      )
+    }
+
+    return filteredOptions.map((opt, index) => {
+      if (isOptionGroup(opt)) {
+        return (
+          <div key={`group-${opt.label}-${index}`}>
+            <div className="text-muted-foreground px-2 py-1.5 text-xs font-medium">
+              {opt.label}
+            </div>
+            {opt.options.map((groupOpt, gIndex) => renderOption(groupOpt, gIndex))}
+          </div>
+        )
+      }
+      return renderOption(opt, index)
+    })
+  }
+
+  return (
+    <div ref={containerRef} className="relative w-full">
+      {/* Trigger Button */}
+      <button
+        type="button"
+        role="combobox"
+        aria-expanded={isOpen}
+        aria-haspopup="listbox"
+        disabled={disabled}
+        onClick={() => !disabled && setIsOpen(!isOpen)}
+        onKeyDown={handleKeyDown}
+        className={cn(
+          "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground",
+          "focus-visible:border-ring focus-visible:ring-ring/50",
+          "flex w-full items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm",
+          "whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px]",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          size === "default" ? "h-9" : "h-8",
+          className
+        )}
+      >
+        <span className={cn("truncate", !selectedOption && "text-muted-foreground")}>
+          {selectedOption?.label ?? placeholder}
+        </span>
+        <ChevronDownIcon className="size-4 shrink-0 opacity-50" />
+      </button>
+
+      {/* Dropdown */}
+      {isOpen && (
+        <div
+          role="listbox"
+          className={cn(
+            "bg-popover text-popover-foreground absolute z-50 mt-1 w-full min-w-[8rem] overflow-hidden rounded-md border shadow-md",
+            "animate-in fade-in-0 zoom-in-95"
+          )}
+        >
+          {/* Search Input */}
+          {isSearchable && (
+            <div className="border-b p-2">
+              <div className="relative">
+                <SearchIcon className="text-muted-foreground absolute left-2 top-1/2 size-4 -translate-y-1/2" />
+                <input
+                  ref={inputRef}
+                  type="text"
+                  value={filterText}
+                  onChange={(e) => setFilterText(e.target.value)}
+                  placeholder="Search..."
+                  className={cn(
+                    "border-input placeholder:text-muted-foreground focus-visible:ring-ring/50",
+                    "h-8 w-full rounded-md border bg-transparent py-1 pr-3 pl-8 text-sm outline-none",
+                    "focus-visible:border-ring focus-visible:ring-[3px]"
+                  )}
+                />
+              </div>
+            </div>
+          )}
+
+          {/* Options List */}
+          <div className="max-h-[300px] overflow-y-auto p-1">{renderOptions()}</div>
+        </div>
+      )}
+    </div>
+  )
+}

package/.claude/ralph-loop.local.md

@@ -1,9 +0,0 @@
----
-active: true
-iteration: 1
-max_iterations: 0
-completion_promise: null
-started_at: "2026-02-13T12:51:42Z"
----
-
-Without diverging from the drawer requirements in @docs/prompts/todo/drawer-fields.md ensure the drawer layout wise and style wise mimics this exact image docs/prompts/todo/Screenshot 2026-02-12 at 18.19.47.png and use playwright to take screenshots and do a comparison until the layouts match 100%