diff --git a/package-lock.json b/package-lock.json index d8ede58..6cf2a5a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,13 +16,12 @@ "@mediapipe/tasks-genai": "^0.10.14", "ai": "^5.0.76", "dedent": "^1.7.0", - "react-basic-contenteditable": "^1.0.6", "react-markdown": "^10.1.0" }, "devDependencies": { "@alcalzone/esm2cjs": "^1.4.1", "@eslint/js": "^9.28.0", - "@samvera/clover-iiif": "^2.19.2", + "@samvera/clover-iiif": "^3.0.0", "@storybook/addon-a11y": "^9.0.9", "@storybook/addon-docs": "^9.0.9", "@storybook/react-vite": "^9.0.9", @@ -42,8 +41,8 @@ "eslint-plugin-storybook": "^9.0.9", "jsdom": "^26.1.0", "prettier-plugin-organize-imports": "^4.1.0", - "react": "^18.3.1", - "react-dom": "^18.3.1", + "react": "^19.0.0", + "react-dom": "^19.0.0", "storybook": "^9.0.9", "storybook-css-modules": "^1.0.8", "tsc-alias": "^1.8.16", @@ -55,9 +54,9 @@ "peerDependencies": { "@iiif/parser": "^2.2.0", "@iiif/presentation-3": "^2.2.3", - "@samvera/clover-iiif": "^2.19.2", - "react": "^18.3.1", - "react-dom": "^18.3.1" + "@samvera/clover-iiif": "^3.0.0", + "react": "^18.2.0 || ^19.0.0", + "react-dom": "^18.2.0 || ^19.0.0" } }, "node_modules/@adobe/css-tools": { @@ -1674,34 +1673,34 @@ } }, "node_modules/@floating-ui/core": { - "version": "1.7.0", - "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.0.tgz", - "integrity": "sha512-FRdBLykrPPA6P76GGGqlex/e7fbe0F1ykgxHYNXQsH/iTEtjMj/f9bpY5oQqbjt5VgZvgz/uKXbGuROijh3VLA==", + "version": "1.7.3", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.3.tgz", + "integrity": "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==", "dev": true, "license": "MIT", "dependencies": { - "@floating-ui/utils": "^0.2.9" + "@floating-ui/utils": "^0.2.10" } }, "node_modules/@floating-ui/dom": { - "version": "1.7.0", - "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.0.tgz", - "integrity": "sha512-lGTor4VlXcesUMh1cupTUTDoCxMb0V6bm3CnxHzQcw8Eaf1jQbgQX4i02fYgT0vJ82tb5MZ4CZk1LRGkktJCzg==", + "version": "1.7.4", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.4.tgz", + "integrity": "sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==", "dev": true, "license": "MIT", "dependencies": { - "@floating-ui/core": "^1.7.0", - "@floating-ui/utils": "^0.2.9" + "@floating-ui/core": "^1.7.3", + "@floating-ui/utils": "^0.2.10" } }, "node_modules/@floating-ui/react-dom": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz", - "integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==", + "version": "2.1.6", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.6.tgz", + "integrity": "sha512-4JX6rEatQEvlmgU80wZyq9RT96HZJa88q8hp0pBd+LrczeDI4o6uA2M+uvxngVHo4Ihr8uibXxH6+70zhAFrVw==", "dev": true, "license": "MIT", "dependencies": { - "@floating-ui/dom": "^1.0.0" + "@floating-ui/dom": "^1.7.4" }, "peerDependencies": { "react": ">=16.8.0", @@ -1709,9 +1708,9 @@ } }, "node_modules/@floating-ui/utils": { - "version": "0.2.9", - "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.9.tgz", - "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==", + "version": "0.2.10", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz", + "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==", "dev": true, "license": "MIT" }, @@ -2089,24 +2088,6 @@ "node": ">= 8" } }, - "node_modules/@nulib/use-markdown": { - "version": "0.2.3", - "resolved": "https://registry.npmjs.org/@nulib/use-markdown/-/use-markdown-0.2.3.tgz", - "integrity": "sha512-gQRrLQtHIpqsBkX2ny+zwXBYP6ysyNqhqSgXRt2h2qh8b1ibn6/31tCRqOEyWllrt8GpjCjpD0pKHcISEQINGQ==", - "dev": true, - "dependencies": { - "rehype-raw": "^7.0.0", - "rehype-stringify": "^10.0.0", - "remark-gfm": "^4.0.0", - "remark-parse": "^11.0.0", - "remark-rehype": "^11.1.0", - "unified": "^11.0.4" - }, - "peerDependencies": { - "react": "^18.2.0", - "react-dom": "^18.2.0" - } - }, "node_modules/@opentelemetry/api": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-1.9.0.tgz", @@ -2134,13 +2115,6 @@ "dev": true, "license": "MIT" }, - "node_modules/@radix-ui/primitive": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.2.tgz", - "integrity": "sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==", - "dev": true, - "license": "MIT" - }, "node_modules/@radix-ui/react-arrow": { "version": "1.1.7", "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz", @@ -2190,16 +2164,16 @@ } }, "node_modules/@radix-ui/react-checkbox": { - "version": "1.3.2", - "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.3.2.tgz", - "integrity": "sha512-yd+dI56KZqawxKZrJ31eENUwqc1QSqg4OZ15rybGjF2ZNwMO+wCyHzAVLRp9qoYJf7kYy0YpZ2b0JCzJ42HZpA==", + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.3.3.tgz", + "integrity": "sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw==", "dev": true, "license": "MIT", "dependencies": { - "@radix-ui/primitive": "1.1.2", + "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", - "@radix-ui/react-presence": "1.1.4", + "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-previous": "1.1.1", @@ -2220,18 +2194,25 @@ } } }, + "node_modules/@radix-ui/react-checkbox/node_modules/@radix-ui/primitive": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz", + "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==", + "dev": true, + "license": "MIT" + }, "node_modules/@radix-ui/react-collapsible": { - "version": "1.1.11", - "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.11.tgz", - "integrity": "sha512-2qrRsVGSCYasSz1RFOorXwl0H7g7J1frQtgpQgYrt+MOidtPAINHn9CPovQXb83r8ahapdx3Tu0fa/pdFFSdPg==", + "version": "1.1.12", + "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.12.tgz", + "integrity": "sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA==", "dev": true, "license": "MIT", "dependencies": { - "@radix-ui/primitive": "1.1.2", + "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-id": "1.1.1", - "@radix-ui/react-presence": "1.1.4", + "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-layout-effect": "1.1.1" @@ -2251,6 +2232,13 @@ } } }, + "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/primitive": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz", + "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==", + "dev": true, + "license": "MIT" + }, "node_modules/@radix-ui/react-collection": { "version": "1.1.7", "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz", @@ -2327,13 +2315,13 @@ } }, "node_modules/@radix-ui/react-dismissable-layer": { - "version": "1.1.10", - "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.10.tgz", - "integrity": "sha512-IM1zzRV4W3HtVgftdQiiOmA0AdJlCtMLe00FXaHwgt3rAnNsIyDqshvkIW3hj/iu5hu8ERP7KIYki6NkqDxAwQ==", + "version": "1.1.11", + "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.11.tgz", + "integrity": "sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==", "dev": true, "license": "MIT", "dependencies": { - "@radix-ui/primitive": "1.1.2", + "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", @@ -2354,10 +2342,17 @@ } } }, + "node_modules/@radix-ui/react-dismissable-layer/node_modules/@radix-ui/primitive": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz", + "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==", + "dev": true, + "license": "MIT" + }, "node_modules/@radix-ui/react-focus-guards": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.2.tgz", - "integrity": "sha512-fyjAACV62oPV925xFCrH8DR5xWhg9KYtJT4s3u54jxp+L/hbpTY2kIeEFFbFe+a/HCE94zGQMZLIpVTPVZDhaA==", + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.3.tgz", + "integrity": "sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==", "dev": true, "license": "MIT", "peerDependencies": { @@ -2416,22 +2411,22 @@ } }, "node_modules/@radix-ui/react-popover": { - "version": "1.1.14", - "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.14.tgz", - "integrity": "sha512-ODz16+1iIbGUfFEfKx2HTPKizg2MN39uIOV8MXeHnmdd3i/N9Wt7vU46wbHsqA0xoaQyXVcs0KIlBdOA2Y95bw==", + "version": "1.1.15", + "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.15.tgz", + "integrity": "sha512-kr0X2+6Yy/vJzLYJUPCZEc8SfQcf+1COFoAqauJm74umQhta9M7lNJHP7QQS3vkvcGLQUbWpMzwrXYwrYztHKA==", "dev": true, "license": "MIT", "dependencies": { - "@radix-ui/primitive": "1.1.2", + "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", - "@radix-ui/react-dismissable-layer": "1.1.10", - "@radix-ui/react-focus-guards": "1.1.2", + "@radix-ui/react-dismissable-layer": "1.1.11", + "@radix-ui/react-focus-guards": "1.1.3", "@radix-ui/react-focus-scope": "1.1.7", "@radix-ui/react-id": "1.1.1", - "@radix-ui/react-popper": "1.2.7", + "@radix-ui/react-popper": "1.2.8", "@radix-ui/react-portal": "1.1.9", - "@radix-ui/react-presence": "1.1.4", + "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-controllable-state": "1.2.2", @@ -2453,10 +2448,17 @@ } } }, + "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/primitive": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz", + "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==", + "dev": true, + "license": "MIT" + }, "node_modules/@radix-ui/react-popper": { - "version": "1.2.7", - "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.7.tgz", - "integrity": "sha512-IUFAccz1JyKcf/RjB552PlWwxjeCJB8/4KxT7EhBHOJM+mN7LdW+B3kacJXILm32xawcMMjb2i0cIZpo+f9kiQ==", + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.8.tgz", + "integrity": "sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==", "dev": true, "license": "MIT", "dependencies": { @@ -2512,9 +2514,9 @@ } }, "node_modules/@radix-ui/react-presence": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.4.tgz", - "integrity": "sha512-ueDqRbdc4/bkaQT3GIpLQssRlFgWaL/U2z/S31qRwwLWoxHLgry3SIfCwhxeQNbirEUXFa+lq3RL3oBYXtcmIA==", + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.5.tgz", + "integrity": "sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==", "dev": true, "license": "MIT", "dependencies": { @@ -2561,19 +2563,19 @@ } }, "node_modules/@radix-ui/react-radio-group": { - "version": "1.3.7", - "resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.3.7.tgz", - "integrity": "sha512-9w5XhD0KPOrm92OTTE0SysH3sYzHsSTHNvZgUBo/VZ80VdYyB5RneDbc0dKpURS24IxkoFRu/hI0i4XyfFwY6g==", + "version": "1.3.8", + "resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.3.8.tgz", + "integrity": "sha512-VBKYIYImA5zsxACdisNQ3BjCBfmbGH3kQlnFVqlWU4tXwjy7cGX8ta80BcrO+WJXIn5iBylEH3K6ZTlee//lgQ==", "dev": true, "license": "MIT", "dependencies": { - "@radix-ui/primitive": "1.1.2", + "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", - "@radix-ui/react-presence": "1.1.4", + "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", - "@radix-ui/react-roving-focus": "1.1.10", + "@radix-ui/react-roving-focus": "1.1.11", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-previous": "1.1.1", "@radix-ui/react-use-size": "1.1.1" @@ -2593,14 +2595,21 @@ } } }, + "node_modules/@radix-ui/react-radio-group/node_modules/@radix-ui/primitive": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz", + "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==", + "dev": true, + "license": "MIT" + }, "node_modules/@radix-ui/react-roving-focus": { - "version": "1.1.10", - "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.10.tgz", - "integrity": "sha512-dT9aOXUen9JSsxnMPv/0VqySQf5eDQ6LCk5Sw28kamz8wSOW2bJdlX2Bg5VUIIcV+6XlHpWTIuTPCf/UNIyq8Q==", + "version": "1.1.11", + "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.11.tgz", + "integrity": "sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==", "dev": true, "license": "MIT", "dependencies": { - "@radix-ui/primitive": "1.1.2", + "@radix-ui/primitive": "1.1.3", "@radix-ui/react-collection": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", @@ -2625,24 +2634,31 @@ } } }, + "node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/primitive": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz", + "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==", + "dev": true, + "license": "MIT" + }, "node_modules/@radix-ui/react-select": { - "version": "2.2.5", - "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.2.5.tgz", - "integrity": "sha512-HnMTdXEVuuyzx63ME0ut4+sEMYW6oouHWNGUZc7ddvUWIcfCva/AMoqEW/3wnEllriMWBa0RHspCYnfCWJQYmA==", + "version": "2.2.6", + "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.2.6.tgz", + "integrity": "sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ==", "dev": true, "license": "MIT", "dependencies": { "@radix-ui/number": "1.1.1", - "@radix-ui/primitive": "1.1.2", + "@radix-ui/primitive": "1.1.3", "@radix-ui/react-collection": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", - "@radix-ui/react-dismissable-layer": "1.1.10", - "@radix-ui/react-focus-guards": "1.1.2", + "@radix-ui/react-dismissable-layer": "1.1.11", + "@radix-ui/react-focus-guards": "1.1.3", "@radix-ui/react-focus-scope": "1.1.7", "@radix-ui/react-id": "1.1.1", - "@radix-ui/react-popper": "1.2.7", + "@radix-ui/react-popper": "1.2.8", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3", @@ -2669,6 +2685,13 @@ } } }, + "node_modules/@radix-ui/react-select/node_modules/@radix-ui/primitive": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz", + "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==", + "dev": true, + "license": "MIT" + }, "node_modules/@radix-ui/react-slot": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz", @@ -2689,13 +2712,13 @@ } }, "node_modules/@radix-ui/react-switch": { - "version": "1.2.5", - "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.2.5.tgz", - "integrity": "sha512-5ijLkak6ZMylXsaImpZ8u4Rlf5grRmoc0p0QeX9VJtlrM4f5m3nCTX8tWga/zOA8PZYIR/t0p2Mnvd7InrJ6yQ==", + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.2.6.tgz", + "integrity": "sha512-bByzr1+ep1zk4VubeEVViV592vu2lHE2BZY5OnzehZqOOgogN80+mNtCqPkhn2gklJqOpxWgPoYTSnhBCqpOXQ==", "dev": true, "license": "MIT", "dependencies": { - "@radix-ui/primitive": "1.1.2", + "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", @@ -2718,20 +2741,27 @@ } } }, + "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/primitive": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz", + "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==", + "dev": true, + "license": "MIT" + }, "node_modules/@radix-ui/react-tabs": { - "version": "1.1.12", - "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.12.tgz", - "integrity": "sha512-GTVAlRVrQrSw3cEARM0nAx73ixrWDPNZAruETn3oHCNP6SbZ/hNxdxp+u7VkIEv3/sFoLq1PfcHrl7Pnp0CDpw==", + "version": "1.1.13", + "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.13.tgz", + "integrity": "sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A==", "dev": true, "license": "MIT", "dependencies": { - "@radix-ui/primitive": "1.1.2", + "@radix-ui/primitive": "1.1.3", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-id": "1.1.1", - "@radix-ui/react-presence": "1.1.4", + "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", - "@radix-ui/react-roving-focus": "1.1.10", + "@radix-ui/react-roving-focus": "1.1.11", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { @@ -2749,6 +2779,13 @@ } } }, + "node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/primitive": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz", + "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==", + "dev": true, + "license": "MIT" + }, "node_modules/@radix-ui/react-use-callback-ref": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz", @@ -3235,9 +3272,9 @@ ] }, "node_modules/@samvera/clover-iiif": { - "version": "2.19.2", - "resolved": "https://registry.npmjs.org/@samvera/clover-iiif/-/clover-iiif-2.19.2.tgz", - "integrity": "sha512-pOTMLBi7VM9HsyqMZxq2Se8bkTGaRtyAG1WUf5QZy5nK5/jAkepHPfTN8o+CjR651vTnanoTaeWJFYLR9E6a4g==", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@samvera/clover-iiif/-/clover-iiif-3.0.3.tgz", + "integrity": "sha512-jDy7tpMY+v0CnDpgb53qUVULUUjDD7Bvm64ZR3lV0RIAFua13P/8taJImOM9SjAe2zVFOy299FzMoOOKIIw5Cg==", "dev": true, "license": "ISC", "dependencies": { @@ -3267,12 +3304,33 @@ "swiper": "^9.0.0", "uuid": "^9.0.1" }, + "engines": { + "node": ">=20.10.0" + }, "peerDependencies": { - "react": ">=18.2.0 <20", - "react-dom": ">=18.2.0 <20", + "react": "^18.2.0 || ^19.0.0", + "react-dom": "^18.2.0 || ^19.0.0", "swiper": "^9.0.0" } }, + "node_modules/@samvera/clover-iiif/node_modules/@nulib/use-markdown": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/@nulib/use-markdown/-/use-markdown-0.2.3.tgz", + "integrity": "sha512-gQRrLQtHIpqsBkX2ny+zwXBYP6ysyNqhqSgXRt2h2qh8b1ibn6/31tCRqOEyWllrt8GpjCjpD0pKHcISEQINGQ==", + "dev": true, + "dependencies": { + "rehype-raw": "^7.0.0", + "rehype-stringify": "^10.0.0", + "remark-gfm": "^4.0.0", + "remark-parse": "^11.0.0", + "remark-rehype": "^11.1.0", + "unified": "^11.0.4" + }, + "peerDependencies": { + "react": "^18.2.0", + "react-dom": "^18.2.0" + } + }, "node_modules/@samvera/clover-iiif/node_modules/@radix-ui/primitive": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz", @@ -3283,7 +3341,37 @@ "@babel/runtime": "^7.13.10" } }, - "node_modules/@samvera/clover-iiif/node_modules/@radix-ui/react-compose-refs": { + "node_modules/@samvera/clover-iiif/node_modules/@radix-ui/react-form": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-form/-/react-form-0.0.3.tgz", + "integrity": "sha512-kgE+Z/haV6fxE5WqIXj05KkaXa3OkZASoTDy25yX2EIp/x0c54rOH/vFr5nOZTg7n7T1z8bSyXmiVIFP9bbhPQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-id": "1.0.1", + "@radix-ui/react-label": "2.0.2", + "@radix-ui/react-primitive": "1.0.3" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@samvera/clover-iiif/node_modules/@radix-ui/react-form/node_modules/@radix-ui/react-compose-refs": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz", "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==", @@ -3302,7 +3390,7 @@ } } }, - "node_modules/@samvera/clover-iiif/node_modules/@radix-ui/react-context": { + "node_modules/@samvera/clover-iiif/node_modules/@radix-ui/react-form/node_modules/@radix-ui/react-context": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.1.tgz", "integrity": "sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==", @@ -3321,45 +3409,34 @@ } } }, - "node_modules/@samvera/clover-iiif/node_modules/@radix-ui/react-form": { - "version": "0.0.3", - "resolved": "https://registry.npmjs.org/@radix-ui/react-form/-/react-form-0.0.3.tgz", - "integrity": "sha512-kgE+Z/haV6fxE5WqIXj05KkaXa3OkZASoTDy25yX2EIp/x0c54rOH/vFr5nOZTg7n7T1z8bSyXmiVIFP9bbhPQ==", + "node_modules/@samvera/clover-iiif/node_modules/@radix-ui/react-form/node_modules/@radix-ui/react-id": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz", + "integrity": "sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==", "dev": true, "license": "MIT", "dependencies": { "@babel/runtime": "^7.13.10", - "@radix-ui/primitive": "1.0.1", - "@radix-ui/react-compose-refs": "1.0.1", - "@radix-ui/react-context": "1.0.1", - "@radix-ui/react-id": "1.0.1", - "@radix-ui/react-label": "2.0.2", - "@radix-ui/react-primitive": "1.0.3" + "@radix-ui/react-use-layout-effect": "1.0.1" }, "peerDependencies": { "@types/react": "*", - "@types/react-dom": "*", - "react": "^16.8 || ^17.0 || ^18.0", - "react-dom": "^16.8 || ^17.0 || ^18.0" + "react": "^16.8 || ^17.0 || ^18.0" }, "peerDependenciesMeta": { "@types/react": { "optional": true - }, - "@types/react-dom": { - "optional": true } } }, - "node_modules/@samvera/clover-iiif/node_modules/@radix-ui/react-id": { + "node_modules/@samvera/clover-iiif/node_modules/@radix-ui/react-form/node_modules/@radix-ui/react-id/node_modules/@radix-ui/react-use-layout-effect": { "version": "1.0.1", - "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz", - "integrity": "sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz", + "integrity": "sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==", "dev": true, "license": "MIT", "dependencies": { - "@babel/runtime": "^7.13.10", - "@radix-ui/react-use-layout-effect": "1.0.1" + "@babel/runtime": "^7.13.10" }, "peerDependencies": { "@types/react": "*", @@ -3371,7 +3448,7 @@ } } }, - "node_modules/@samvera/clover-iiif/node_modules/@radix-ui/react-label": { + "node_modules/@samvera/clover-iiif/node_modules/@radix-ui/react-form/node_modules/@radix-ui/react-label": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.0.2.tgz", "integrity": "sha512-N5ehvlM7qoTLx7nWPodsPYPgMzA5WM8zZChQg8nyFJKnDO5WHdba1vv5/H6IO5LtJMfD2Q3wh1qHFGNtK0w3bQ==", @@ -3396,7 +3473,7 @@ } } }, - "node_modules/@samvera/clover-iiif/node_modules/@radix-ui/react-primitive": { + "node_modules/@samvera/clover-iiif/node_modules/@radix-ui/react-form/node_modules/@radix-ui/react-primitive": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz", "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==", @@ -3421,7 +3498,7 @@ } } }, - "node_modules/@samvera/clover-iiif/node_modules/@radix-ui/react-slot": { + "node_modules/@samvera/clover-iiif/node_modules/@radix-ui/react-form/node_modules/@radix-ui/react-primitive/node_modules/@radix-ui/react-slot": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz", "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==", @@ -3441,25 +3518,6 @@ } } }, - "node_modules/@samvera/clover-iiif/node_modules/@radix-ui/react-use-layout-effect": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz", - "integrity": "sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==", - "dev": true, - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.13.10" - }, - "peerDependencies": { - "@types/react": "*", - "react": "^16.8 || ^17.0 || ^18.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, "node_modules/@standard-schema/spec": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.0.0.tgz", @@ -3561,9 +3619,9 @@ "license": "MIT" }, "node_modules/@storybook/icons": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/@storybook/icons/-/icons-1.4.0.tgz", - "integrity": "sha512-Td73IeJxOyalzvjQL+JXx72jlIYHgs+REaHiREOqfpo3A2AYYG71AUbcv+lg7mEDIweKVCxsMQ0UKo634c8XeA==", + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/@storybook/icons/-/icons-1.6.0.tgz", + "integrity": "sha512-hcFZIjW8yQz8O8//2WTIXylm5Xsgc+lW9ISLgUk1xGmptIJQRdlhVIXCpSyLrQaaRiyhQRaVg7l3BD9S216BHw==", "dev": true, "license": "MIT", "engines": { @@ -8949,6 +9007,7 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", + "dev": true, "license": "MIT" }, "node_modules/js-yaml": { @@ -9241,6 +9300,7 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "dev": true, "license": "MIT", "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" @@ -11491,27 +11551,14 @@ } }, "node_modules/react": { - "version": "18.3.1", - "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", - "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", + "version": "19.2.0", + "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz", + "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==", "license": "MIT", - "dependencies": { - "loose-envify": "^1.1.0" - }, "engines": { "node": ">=0.10.0" } }, - "node_modules/react-basic-contenteditable": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/react-basic-contenteditable/-/react-basic-contenteditable-1.0.6.tgz", - "integrity": "sha512-6TV0ZHaL+996sLyGFfoNxfUpGD+568V/dajBjYDJoskzukR4lUa/p4y4d0rNrZ47pfeBb+Yw+0v+GWcdja9T7Q==", - "license": "MIT", - "peerDependencies": { - "react": "^18.2.0", - "react-dom": "^18.2.0" - } - }, "node_modules/react-docgen": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/react-docgen/-/react-docgen-8.0.0.tgz", @@ -11579,16 +11626,16 @@ } }, "node_modules/react-dom": { - "version": "18.3.1", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", - "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", + "version": "19.2.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz", + "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==", + "dev": true, "license": "MIT", "dependencies": { - "loose-envify": "^1.1.0", - "scheduler": "^0.23.2" + "scheduler": "^0.27.0" }, "peerDependencies": { - "react": "^18.3.1" + "react": "^19.2.0" } }, "node_modules/react-error-boundary": { @@ -12648,13 +12695,11 @@ } }, "node_modules/scheduler": { - "version": "0.23.2", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", - "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==", - "license": "MIT", - "dependencies": { - "loose-envify": "^1.1.0" - } + "version": "0.27.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz", + "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==", + "dev": true, + "license": "MIT" }, "node_modules/semver": { "version": "6.3.1", diff --git a/package.json b/package.json index a5b36dd..5a84fb1 100644 --- a/package.json +++ b/package.json @@ -57,9 +57,9 @@ "peerDependencies": { "@iiif/parser": "^2.2.0", "@iiif/presentation-3": "^2.2.3", - "@samvera/clover-iiif": "^2.19.2", - "react": "^18.3.1", - "react-dom": "^18.3.1" + "@samvera/clover-iiif": "^3.0.0", + "react": "^18.2.0 || ^19.0.0", + "react-dom": "^18.2.0 || ^19.0.0" }, "dependencies": { "@ai-sdk/anthropic": "^2.0.35", @@ -69,13 +69,12 @@ "@mediapipe/tasks-genai": "^0.10.14", "ai": "^5.0.76", "dedent": "^1.7.0", - "react-basic-contenteditable": "^1.0.6", "react-markdown": "^10.1.0" }, "devDependencies": { "@alcalzone/esm2cjs": "^1.4.1", "@eslint/js": "^9.28.0", - "@samvera/clover-iiif": "^2.19.2", + "@samvera/clover-iiif": "^3.0.0", "@storybook/addon-a11y": "^9.0.9", "@storybook/addon-docs": "^9.0.9", "@storybook/react-vite": "^9.0.9", @@ -95,8 +94,8 @@ "eslint-plugin-storybook": "^9.0.9", "jsdom": "^26.1.0", "prettier-plugin-organize-imports": "^4.1.0", - "react": "^18.3.1", - "react-dom": "^18.3.1", + "react": "^19.0.0", + "react-dom": "^19.0.0", "storybook": "^9.0.9", "storybook-css-modules": "^1.0.8", "tsc-alias": "^1.8.16", diff --git a/src/components/Figure/style.module.css b/src/components/Figure/style.module.css index 2664afd..5065712 100644 --- a/src/components/Figure/style.module.css +++ b/src/components/Figure/style.module.css @@ -2,6 +2,10 @@ margin: 0; display: grid; + &:has(img) { + width: min-content; + } + /* configurable styles */ --figure-border-radius: var(--clover-ai-radii-2); --figure-caption-color: var(--clover-ai-colors-primaryMuted); diff --git a/src/components/Input/style.module.css b/src/components/Input/style.module.css index 65d4fcb..2debb7d 100644 --- a/src/components/Input/style.module.css +++ b/src/components/Input/style.module.css @@ -19,8 +19,7 @@ --input-border-radius: var(--clover-ai-sizes-2); border-radius: var(--input-border-radius); - --input-border-width: 1px; - border-width: var(--input-border-width); + border-width: calc(var(--clover-ai-sizes-1) / calc(var(--golden-ratio) * 2)); --input-border-style: solid; border-style: var(--input-border-style); @@ -37,10 +36,12 @@ &:focus { --input-box-shadow-color: color-mix(in srgb, var(--input-border-color) 10%, transparent); --input-box-shadow: 0 0 0 var(--clover-ai-sizes-1) var(--input-box-shadow-color); + --input-border-color: var(--clover-ai-colors-accent); box-shadow: var(--input-box-shadow); } - &:user-invalid { + &:user-invalid, + &[aria-invalid="true"] { --input-border-color: var(--clover-ai-colors-error); } } diff --git a/src/components/PromptInput/index.tsx b/src/components/PromptInput/index.tsx new file mode 100644 index 0000000..ba4338c --- /dev/null +++ b/src/components/PromptInput/index.tsx @@ -0,0 +1,30 @@ +import type { FC } from "react"; +import React from "react"; +import styles from "./style.module.css"; + +export interface PromptInputProps extends React.TextareaHTMLAttributes { + error?: string; + placeholder?: string; + children?: React.ReactNode; +} + +export const PromptInput: FC = ({ + error, + placeholder = "What would you like to know?", + children, + ...rest +}) => { + return ( +
+ {error &&
{error}
} +
+ + {children &&
{children}
} +
+
+ ); +}; diff --git a/src/components/PromptInput/style.module.css b/src/components/PromptInput/style.module.css new file mode 100644 index 0000000..3e5117a --- /dev/null +++ b/src/components/PromptInput/style.module.css @@ -0,0 +1,88 @@ +.promptInputContainer { + width: 100%; + display: flex; + flex-direction: column; + gap: var(--clover-ai-sizes-1); +} + +.errorMessage { + margin-top: 0.25rem; + font-size: 0.875rem; + color: var(--clover-ai-colors-error); +} + +.promptInput { + display: flex; + flex-direction: column; + gap: var(--clover-ai-sizes-2); + padding: var(--clover-ai-sizes-2); + border-radius: 0.5rem; + outline: none; + transition: + border-color 0.2s ease-in-out, + box-shadow 0.2s ease-in-out; + font-family: inherit; + font-size: inherit; + resize: none; + overflow-wrap: break-word; + word-wrap: break-word; + border-width: calc(var(--clover-ai-sizes-1) / calc(var(--golden-ratio) * 2)); + border-style: solid; + background-color: transparent; + margin-block-end: var(--clover-ai-sizes-1); + + /* configurable styles */ + --textarea-border-color: var(--clover-ai-colors-accentMuted); + border-color: var(--textarea-border-color); + + --textarea-box-shadow-color: color-mix( + in srgb, + var(--clover-ai-colors-accentMuted) 10%, + transparent + ); + --textarea-box-shadow: 0 0 0 var(--clover-ai-sizes-1) var(--textarea-box-shadow-color); + + &:has(textarea:focus) { + --textarea-border-color: var(--clover-ai-colors-accent); + box-shadow: var(--textarea-box-shadow); + } +} + +.promptInput[data-error="true"] { + --textarea-border-color: var(--clover-ai-colors-error); + &:has(textarea:focus) { + --textarea-border-color: var(--clover-ai-colors-error); + --textarea-box-shadow-color: color-mix(in srgb, var(--clover-ai-colors-error) 10%, transparent); + } +} + +textarea { + cursor: pointer; + margin: 0; + padding: 0; + white-space: pre-wrap; + border: none; + width: 100%; + font-family: inherit; + resize: none; + field-sizing: content; + min-height: 2em; + max-height: 4em; + scrollbar-color: var(--clover-ai-colors-secondaryAlt) transparent; + overflow-y: scroll; +} + +textarea:focus { + outline: none; +} + +.childrenContainer { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + > * { + display: flex; + gap: 0.5rem; + } +} diff --git a/src/components/TextArea/index.tsx b/src/components/TextArea/index.tsx deleted file mode 100644 index fa9eec8..0000000 --- a/src/components/TextArea/index.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import type { ComponentProps, FC } from "react"; -import React from "react"; -import ContentEditable from "react-basic-contenteditable"; -import styles from "./style.module.css"; - -type ContentEditableProps = ComponentProps; - -export interface TextareaProps extends ContentEditableProps { - label?: string; - labelDisplay?: "hidden" | "visible"; - error?: string; - helperText?: string; - variant?: "default" | "bordered" | "filled"; - size?: "small" | "medium" | "large"; - id?: string; - children?: React.ReactNode; -} - -export const Textarea: FC = ({ - label, - labelDisplay = "visible", - error, - helperText, - variant = "default", - size = "medium", - children, - ...rest -}) => { - const textareaId = `textarea-contenteditable-container`; - const labelId = `textarea-label`; - const helperId = `textarea-helper`; - - return ( -
- {label && ( - - )} -
- - {children &&
{children}
} -
- {(error || helperText) && ( -
- {error || helperText} -
- )} -
- ); -}; diff --git a/src/components/TextArea/style.module.css b/src/components/TextArea/style.module.css deleted file mode 100644 index 949f85a..0000000 --- a/src/components/TextArea/style.module.css +++ /dev/null @@ -1,138 +0,0 @@ -:root { - --content-editable-padding: 0.85rem; -} -/* Container styles */ -.container { - width: 100%; -} - -/* Label styles */ -.label { - display: block; - margin-bottom: 0.5rem; - font-size: 0.875rem; - font-weight: 500; - color: inherit; -} - -.label[data-error="true"] { - color: #ef4444; -} - -/* Visually hidden but accessible to screen readers */ -.visuallyHidden { - position: absolute !important; - width: 1px !important; - height: 1px !important; - padding: 0 !important; - margin: -1px !important; - overflow: hidden !important; - clip: rect(0, 0, 0, 0) !important; - white-space: nowrap !important; - border: 0 !important; -} - -/* Base textarea styles */ -.textarea { - display: flex; - flex-direction: column; - gap: var(--clover-ai-sizes-2); - border-radius: 0.5rem; - outline: none; - transition: - border-color 0.2s ease-in-out, - box-shadow 0.2s ease-in-out; - font-family: inherit; - font-size: inherit; - resize: none; - overflow-wrap: break-word; - word-wrap: break-word; - border-width: calc(var(--clover-ai-sizes-1) / calc(var(--golden-ratio) * 2)); - border-style: solid; - background-color: transparent; - - /* configurable styles */ - --textarea-border-color: var(--clover-ai-colors-accent, #e6e8eb); - border-color: var(--textarea-border-color); - - &:has(*:focus) { - --textarea-border-color: var(--clover-ai-colors-accentMuted); - box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); - } -} - -.textarea[data-error="true"] { - --textarea-border-color: var(--clover-ai-colors-error); -} - -/* Variant styles */ -.textarea[data-variant="bordered"] { - border: 2px solid var(--colors-border, #e5e7eb); - background-color: transparent; -} - -.textarea[data-variant="filled"] { - border: 1px solid transparent; - background-color: var(--colors-background, #f9fafb); -} - -/* Size styles */ -.textarea[data-size="small"] { - padding: 0.5rem; - font-size: 0.875rem; - min-height: 1.5rem; -} - -.textarea[data-size="medium"] { - padding: 0.618rem; - font-size: 1rem; - min-height: 3rem; -} - -.textarea[data-size="large"] { - padding: 0.75rem; - font-size: 1.125rem; - min-height: 3.5rem; -} - -.contentEditableContainer { - cursor: pointer; - margin: 0; - - & > *[contenteditable] { - white-space: pre-wrap; - outline: 0px solid transparent; - padding: 0; - width: 100%; - } -} - -.placeholder { - color: var(--colors-text-placeholder, #9ca3af); - pointer-events: none; - /* the ContentEditable injects inline styles, this number helps the placeholder line up */ - padding-inline-start: var(--content-editable-padding); -} - -.childrenContainer { - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - /* the ContentEditable injects inline styles, this number helps the placeholder line up */ - padding-inline: var(--content-editable-padding); - > * { - display: flex; - gap: 0.5rem; - } -} - -.helperText { - margin-top: 0.25rem; - font-size: 0.875rem; - color: var(--colors-text-secondary, #6b7280); -} - -.helperText[data-error="true"] { - color: var(--clover-ai-colors-error); -} diff --git a/src/components/index.ts b/src/components/index.ts index ed3f636..919b326 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,8 +1,8 @@ export { Button } from "./Button"; export type { ButtonProps } from "./Button"; -export { Textarea } from "./TextArea"; -export type { TextareaProps } from "./TextArea"; +export { PromptInput } from "./PromptInput"; +export type { PromptInputProps } from "./PromptInput"; export { Message } from "./Messages/Message"; diff --git a/src/plugin/Panel/ChatInput/index.tsx b/src/plugin/Panel/ChatInput/index.tsx index 297e072..8eaca1c 100644 --- a/src/plugin/Panel/ChatInput/index.tsx +++ b/src/plugin/Panel/ChatInput/index.tsx @@ -1,4 +1,4 @@ -import { Button, Textarea } from "@components"; +import { Button, PromptInput } from "@components"; import { usePlugin } from "@context"; import { Add, ArrowUp, Clear } from "@icons"; import { MediaContent, UserMessage } from "@types"; @@ -10,7 +10,6 @@ export const ChatInput: FC = () => { const { dispatch, state } = usePlugin(); const [textareaValue, setTextareaValue] = useState(""); const [textareaError, setTextareaError] = useState(""); - const [formState, setFormState] = useState<"idle" | "loading" | "error" | "success">("idle"); function clearConversation() { @@ -28,6 +27,7 @@ export const ChatInput: FC = () => { } setTextareaError(""); + setTextareaValue(""); setFormState("loading"); const userMessage: UserMessage = { @@ -60,7 +60,6 @@ export const ChatInput: FC = () => { try { await state?.provider?.generate_response([userMessage], state.messages); - setTextareaValue(""); } catch (error) { // eslint-disable-next-line no-console console.error("Error sending message:", error); @@ -91,16 +90,12 @@ export const ChatInput: FC = () => { handleSubmit(e); }} > - + ); }; diff --git a/src/plugin/Panel/index.test.tsx b/src/plugin/Panel/index.test.tsx index 388caa5..09f2b4c 100644 --- a/src/plugin/Panel/index.test.tsx +++ b/src/plugin/Panel/index.test.tsx @@ -13,26 +13,29 @@ vi.mock("@components", async (importOriginal) => { const original = (await importOriginal()) as Record; return { ...original, - Textarea: ({ + PromptInput: ({ onChange, + value, + error, children, }: { + value?: string; + error?: string; children: React.ReactNode; - onChange: (value: string) => void; + onChange: React.ChangeEventHandler; }) => { - const [value, setValue] = React.useState(""); return (
- { - setValue(e.target.value); - onChange(e.target.value); - }} - /> - {children} + {error &&
{error}
} +
+