Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughThis pull request refactors documentation code samples across ~40 files to wrap TypeScript imports inside Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 10
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (8)
src/docs/data/progress.ts (1)
10-32: Sample won’t compile:Buttonanddynamicare undefined.The snippet uses
<Button>anddynamicbut doesn’t import/declare them, so the example breaks. Consider adding both to the script block.✅ Proposed fix
<script lang="ts"> - import { Progress } from 'kampsy-ui'; + import { Button, Progress } from 'kampsy-ui'; + + let dynamic = 80; </script>src/docs/data/menu.ts (1)
12-12: Text-action mismatch in menu item.The third
Menu.Itemdisplays "One" but logs'Three'. This appears to be a copy-paste error and will confuse users reading the documentation.Proposed fix
- <Menu.Item onClick={() => console.log('Three')}>One</Menu.Item> + <Menu.Item onClick={() => console.log('Three')}>Three</Menu.Item>src/docs/data/select.ts (1)
10-10: Typo: "friuit" should be "fruit".The placeholder text contains a typo that appears in multiple places. This is user-facing documentation, so it should be corrected.
Affected lines: 10, 42, 54, 76, 88, 100
Proposed fix
- <Select.Value placeholder="select a friuit" /> + <Select.Value placeholder="select a fruit" />Apply this fix to all 6 occurrences.
Also applies to: 42-42, 54-54, 76-76, 88-88, 100-100
src/docs/data/toggle.ts (2)
32-36: Inconsistent formatting:toggleCustomColorsmissing<script lang="ts">wrapper.The
toggleDefaultandtoggleSizessamples have been updated to wrap imports inside<script lang="ts">blocks, buttoggleCustomColorsstill has bare imports at the top level. For consistency across all samples in this file, this block should follow the same pattern.Proposed fix
export const toggleCustomColors = ` +<script lang="ts"> import { Toggle } from 'kampsy-ui'; import { LockClosedSmall, LockOpenSmall } from 'kampsy-ui/icons'; let checked = $state(false); +</script> - <div class="w-full space-y-4">
111-116: Inconsistent formatting:toggleWithLabelmissing<script lang="ts">wrapper.Same issue as
toggleCustomColors— this sample should also be wrapped in a<script lang="ts">block for consistency withtoggleDefaultandtoggleSizes.Proposed fix
export const toggleWithLabel = ` +<script lang="ts"> import { Toggle } from 'kampsy-ui'; import { LockClosedSmall, LockOpenSmall } from 'kampsy-ui/icons'; let withLabel = $state(false); +</script> <div class="w-full space-y-4">src/docs/data/tooltip.ts (1)
57-80: Missing imports forButton,Spinner, andBadgeintooltipComponents.The example uses
Button(line 65),Spinner(line 71), andBadge(line 77), but onlyTooltipis imported on line 59. Users copying this example will encounter errors.Proposed fix
<script lang="ts"> - import { Tooltip } from 'kampsy-ui'; + import { Badge, Button, Spinner, Tooltip } from 'kampsy-ui'; </script>src/docs/data/modal.ts (1)
52-56: Fix undefined state variables in click handlers.
activeSticky,activeSingleButton, andactiveDisabledare not defined. Useactive(or define those state variables) to keep the examples runnable.🛠️ Proposed fix
- <Button onclick={() => (activeSticky = false)} type="secondary">Cancel</Button> - <Button prefix={ArrowLeft} onclick={() => (activeSticky = false)} type="secondary">Previous</Button> + <Button onclick={() => (active = false)} type="secondary">Cancel</Button> + <Button prefix={ArrowLeft} onclick={() => (active = false)} type="secondary">Previous</Button> - <Button onclick={() => (activeSingleButton = false)} type="secondary" class="w-full"> + <Button onclick={() => (active = false)} type="secondary" class="w-full"> - <Button onclick={() => (activeDisabled = false)} type="secondary">Cancel</Button> - <Button disabled onclick={() => (activeDisabled = false)}>Submit</Button> + <Button onclick={() => (active = false)} type="secondary">Cancel</Button> + <Button disabled onclick={() => (active = false)}>Submit</Button>Also applies to: 79-80, 106-108
src/docs/data/project-banner.ts (1)
22-36: Broken snippet syntax:{#snippet}block is split across script boundary.The
{#snippetlabelSnip()}declaration on line 26 is placed inside the<script lang="ts">block, but Svelte snippets are template syntax, not JavaScript. The</script>tag closes on line 28 while the snippet content and closing{/snippet}are outside.This creates invalid Svelte syntax where the snippet opening is inside the script block and the rest is in the template.
Proposed fix
export const projectBannerWarning = ` <script lang="ts"> import { ProjectBanner, Tooltip } from 'kampsy-ui'; import { RotateCounterClockWise } from 'kampsy-ui/icons'; +</script> - {`#snippet` labelSnip()} -</script> - +{`#snippet` labelSnip()} This project was rolled back by <Tooltip class="underline decoration-dashed underline-offset-[5px]" text="Yesterday for project marketing-website" > `@johnphamous` </Tooltip> {/snippet}
🤖 Fix all issues with AI agents
In `@src/docs/data/installation.ts`:
- Around line 5-15: The exported string installationConfig contains a Tailwind
config example wrapped in a `<script lang="ts">` block which makes it invalid
for direct use; remove the `<script lang="ts">` and corresponding closing tag so
the string contains only the plain Tailwind config object (the export default
{...} with the presets array), and apply the same change to the other snippet in
this file (the block around lines 17-32) so both examples are plain
tailwind.config.(js|ts) fragments; update the string contents for
installationConfig (and the other exported snippet) accordingly.
In `@src/docs/data/modal.ts`:
- Around line 2-4: The modal example snippets import Modal and Text but omit
Button, causing the examples to break; update each snippet that declares "import
{ Modal, Text } from 'kampsy-ui';" (and the similar imports at the other
occurrences) to also import Button so they read "import { Modal, Text, Button }
from 'kampsy-ui';" ensuring every example that uses the <Button> component (in
the Modal examples around the occurrences at the top, lines ~31-33, ~62-64,
~88-90) includes Button in its import list.
In `@src/docs/data/note.ts`:
- Around line 60-67: The snippets for noteError, noteWarning, noteSecondary,
noteViolet, and noteCyan each have the snippet declaration placed inside the
<script> block and use Button without importing it; for each export (noteError,
noteWarning, noteSecondary, noteViolet, noteCyan) move the {`#snippet`
actionSnip()} declaration out of the <script lang="ts"> block and add Button to
the import line (e.g., import { Note, Button } from 'kampsy-ui'), ensuring the
Button usage remains in the template section and the snippet helper stays
outside the script block as done for the corrected export.
- Around line 31-38: The snippet block is incorrectly placed inside the <script>
section and the Button component is missing from imports; move the {`#snippet`
actionSnip()} ... {/snippet} fragment out of the script block into the
template/markup area and update the import line to include Button (e.g., import
{ Note, Button } from 'kampsy-ui') so that noteSuccess (or the component
rendering that snippet) uses a valid Button reference and the snippet renders
outside of the script.
- Around line 13-20: Move the Svelte snippet markers out of the <script
lang="ts"> block: remove {`#snippet` actionSnip()} from inside the script and
place the opening snippet tag directly in the template before the <Button
size="small">Upgrade</Button> markup, then close the snippet after the button
(e.g., {/snippet}); keep the existing import of Button in the script so the
component remains available for the snippet. Ensure there are no template tokens
left inside the script and that the snippet name/actionSnip matches the snippet
close tag.
In `@static/menu/llms.txt`:
- Line 24: The Menu.Item contains mismatched label and action: the JSX element
Menu.Item (with onClick={() => console.log('Three')}) displays "One" but logs
"Three"; update either the displayed text or the onClick payload so they match
(e.g., change the label from "One" to "Three" or change console.log('Three') to
console.log('One')) by editing the Menu.Item instance so its visible text and
onClick behavior are consistent.
In `@static/modal/llms.txt`:
- Around line 17-24: The example is missing the Button import which causes
runtime errors when using <Button> in the snippet; update the import statement
that currently imports Modal and Text to also import Button (e.g., add Button to
the import from 'kampsy-ui') so the component usage of Button (and its onclick
usage with the active/$state variable) resolves correctly.
In `@static/pagination/llms.txt`:
- Around line 27-31: Update the Installation command in the
static/pagination/llms.txt snippet to install kampsy-ui as a runtime dependency
instead of a devDependency: remove the -D flag and change the command from "pnpm
i -D kampsy-ui@latest" to "pnpm i kampsy-ui@latest" so the package is saved to
dependencies rather than devDependencies.
In `@static/select/llms.txt`:
- Line 22: Typo in the Select.Value placeholder: update the placeholder string
used in Select.Value from "select a friuit" to "select a fruit" so the UI reads
correctly; locate the Select.Value component in the file and correct the
placeholder prop value.
In `@static/split-button/llms.txt`:
- Line 38: Two closing div tags in the split-button example are indented with 4
spaces instead of tabs; locate the closing "</div>" occurrences within the
split-button/llms example and replace their 4-space indentation with a single
tab so they match the rest of the file's indentation style (apply the same
change to both occurrences).
🧹 Nitpick comments (5)
src/docs/data/avatar.ts (2)
1-4: Unused variables:titleanddescriptionare defined but not exported.These variables are declared but neither exported nor referenced elsewhere in this file. If they're intended for use, consider exporting them. Otherwise, they can be removed.
Option 1: Export the variables
-const title = "avatar" -const description = ` +export const title = "avatar" +export const description = ` Avatars represent a user or a team. Stacked avatars represent a group of people `Option 2: Remove if unused
-const title = "avatar" -const description = ` -Avatars represent a user or a team. Stacked avatars represent a group of people -` - export const avatarGroup = `
10-39: Misleading member names in sample data.All members are named
"Evil Rabbit"but use different avatar URLs (evilrabbit, sambecker, rauno). Consider using distinct names to better represent the different avatars in this documentation example.Suggested improvement
const members = [ { name: 'Evil Rabbit', imageLink: 'https://vercel.com/api/www/avatar?u=evilrabbit&s=64' }, { - name: 'Evil Rabbit', + name: 'Sam Becker', imageLink: 'https://vercel.com/api/www/avatar?u=sambecker&s=64' }, { - name: 'Evil Rabbit', + name: 'Rauno', imageLink: 'https://vercel.com/api/www/avatar?u=rauno&s=64' },static/modal/llms.txt (1)
54-54: Consider using HTTPS for the documentation URL.Using
https://instead ofhttp://is preferred for security.-Visit http://ui.kampsy.xyz/modal for full documentation and examples. +Visit https://ui.kampsy.xyz/modal for full documentation and examples.src/docs/data/checkbox.ts (1)
2-7: Unusedvaluevariable incheckboxDefault.The
valuevariable is declared on line 4 but never used. Line 7 usesbind:checkedwithout binding tovalue. Either remove the unused variable or update the binding.Option 1: Remove unused variable
<script lang="ts"> import { Checkbox } from 'kampsy-ui'; - let value = $state(false); </script> <Checkbox bind:checked aria-labelledby="checkbox">option 1</Checkbox>Option 2: Use the variable
<script lang="ts"> import { Checkbox } from 'kampsy-ui'; - let value = $state(false); + let checked = $state(false); </script> -<Checkbox bind:checked aria-labelledby="checkbox">option 1</Checkbox> +<Checkbox bind:checked={checked} aria-labelledby="checkbox">option 1</Checkbox>static/spinner/llms.txt (1)
1-29: Documentation looks good.The Spinner component documentation is complete with exports, usage example, installation, and license. The usage example correctly imports and uses the component.
Consider using
https://instead ofhttp://for the documentation URL on line 25 for consistency with security best practices.
| export const installationConfig = ` | ||
| import kampsyUI from 'kampsy-ui/preset'; | ||
| <script lang="ts"> | ||
| import kampsyUI from 'kampsy-ui/preset'; | ||
|
|
||
| /** @type {import('tailwindcss').Config} */ | ||
| export default { | ||
| presets: [kampsyUI] | ||
| }`; | ||
| /** @type {import('tailwindcss').Config} */ | ||
| export default { | ||
| presets: [kampsyUI] | ||
| } | ||
| </script> | ||
|
|
||
| `; |
There was a problem hiding this comment.
Tailwind config samples shouldn’t be wrapped in <script> tags.
These snippets are meant for tailwind.config.(js|ts); the <script lang="ts"> wrapper makes them invalid and confusing to copy/paste. Recommend keeping plain config blocks here.
🛠️ Proposed fix
export const installationConfig = `
-<script lang="ts">
import kampsyUI from 'kampsy-ui/preset';
/** `@type` {import('tailwindcss').Config} */
export default {
presets: [kampsyUI]
}
-</script>
`;
export const installationConfigLong = `
-<script lang="ts">
import kampsyUI from 'kampsy-ui/preset';
/** `@type` {import('tailwindcss').Config} */
export default {
content: kampsyUI.content,
presets: [kampsyUI],
theme: {
extend: {}
},
plugins: [],
}
-</script>
`;Also applies to: 17-32
🤖 Prompt for AI Agents
In `@src/docs/data/installation.ts` around lines 5 - 15, The exported string
installationConfig contains a Tailwind config example wrapped in a `<script
lang="ts">` block which makes it invalid for direct use; remove the `<script
lang="ts">` and corresponding closing tag so the string contains only the plain
Tailwind config object (the export default {...} with the presets array), and
apply the same change to the other snippet in this file (the block around lines
17-32) so both examples are plain tailwind.config.(js|ts) fragments; update the
string contents for installationConfig (and the other exported snippet)
accordingly.
| <script lang="ts"> | ||
| import { Modal, Text } from 'kampsy-ui'; | ||
|
|
There was a problem hiding this comment.
Import Button in each modal snippet.
<Button> is used but not imported, which breaks the example code.
🛠️ Proposed fix
- import { Modal, Text } from 'kampsy-ui';
+ import { Button, Modal, Text } from 'kampsy-ui';Also applies to: 31-33, 62-64, 88-90
🤖 Prompt for AI Agents
In `@src/docs/data/modal.ts` around lines 2 - 4, The modal example snippets import
Modal and Text but omit Button, causing the examples to break; update each
snippet that declares "import { Modal, Text } from 'kampsy-ui';" (and the
similar imports at the other occurrences) to also import Button so they read
"import { Modal, Text, Button } from 'kampsy-ui';" ensuring every example that
uses the <Button> component (in the Modal examples around the occurrences at the
top, lines ~31-33, ~62-64, ~88-90) includes Button in its import list.
| <script lang="ts"> | ||
| import { Note, Button } from 'kampsy-ui'; | ||
|
|
||
| {#snippet actionSnip()} | ||
| </script> | ||
|
|
||
| {#snippet actionSnip()} | ||
| <Button size="small">Upgrade</Button> | ||
| {/snippet} |
There was a problem hiding this comment.
Broken snippet syntax and missing import in noteAction.
- The
{#snippetactionSnip()}on line 16 is placed inside the<script>block, but Svelte snippets are template syntax, not JavaScript. - The
Buttoncomponent is used in the snippet but is correctly imported on line 14.
The snippet declaration should be moved outside the script block.
Proposed fix
export const noteAction = `
<script lang="ts">
import { Note, Button } from 'kampsy-ui';
+</script>
- {`#snippet` actionSnip()}
-</script>
-
+{`#snippet` actionSnip()}
<Button size="small">Upgrade</Button>
{/snippet}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <script lang="ts"> | |
| import { Note, Button } from 'kampsy-ui'; | |
| {#snippet actionSnip()} | |
| </script> | |
| {#snippet actionSnip()} | |
| <Button size="small">Upgrade</Button> | |
| {/snippet} | |
| <script lang="ts"> | |
| import { Note, Button } from 'kampsy-ui'; | |
| </script> | |
| {`#snippet` actionSnip()} | |
| <Button size="small">Upgrade</Button> | |
| {/snippet} |
🤖 Prompt for AI Agents
In `@src/docs/data/note.ts` around lines 13 - 20, Move the Svelte snippet markers
out of the <script lang="ts"> block: remove {`#snippet` actionSnip()} from inside
the script and place the opening snippet tag directly in the template before the
<Button size="small">Upgrade</Button> markup, then close the snippet after the
button (e.g., {/snippet}); keep the existing import of Button in the script so
the component remains available for the snippet. Ensure there are no template
tokens left inside the script and that the snippet name/actionSnip matches the
snippet close tag.
| <script lang="ts"> | ||
| import { Note } from 'kampsy-ui'; | ||
|
|
||
| {#snippet actionSnip()} | ||
| </script> | ||
|
|
||
| {#snippet actionSnip()} | ||
| <Button size="small">Upgrade</Button> | ||
| {/snippet} |
There was a problem hiding this comment.
Same broken snippet pattern and missing Button import in noteSuccess.
The snippet is incorrectly placed inside the script block. Additionally, Button is used but not imported (only Note is imported on line 32).
Proposed fix
export const noteSuccess = `
<script lang="ts">
- import { Note } from 'kampsy-ui';
-
- {`#snippet` actionSnip()}
+ import { Note, Button } from 'kampsy-ui';
</script>
+{`#snippet` actionSnip()}
<Button size="small">Upgrade</Button>
{/snippet}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <script lang="ts"> | |
| import { Note } from 'kampsy-ui'; | |
| {#snippet actionSnip()} | |
| </script> | |
| {#snippet actionSnip()} | |
| <Button size="small">Upgrade</Button> | |
| {/snippet} | |
| <script lang="ts"> | |
| import { Note, Button } from 'kampsy-ui'; | |
| </script> | |
| {`#snippet` actionSnip()} | |
| <Button size="small">Upgrade</Button> | |
| {/snippet} |
🤖 Prompt for AI Agents
In `@src/docs/data/note.ts` around lines 31 - 38, The snippet block is incorrectly
placed inside the <script> section and the Button component is missing from
imports; move the {`#snippet` actionSnip()} ... {/snippet} fragment out of the
script block into the template/markup area and update the import line to include
Button (e.g., import { Note, Button } from 'kampsy-ui') so that noteSuccess (or
the component rendering that snippet) uses a valid Button reference and the
snippet renders outside of the script.
| <script lang="ts"> | ||
| import { Note } from 'kampsy-ui'; | ||
|
|
||
| {#snippet actionSnip()} | ||
| </script> | ||
|
|
||
| {#snippet actionSnip()} | ||
| <Button size="small">Upgrade</Button> | ||
| {/snippet} |
There was a problem hiding this comment.
Same issues in remaining exports: noteError, noteWarning, noteSecondary, noteViolet, noteCyan.
All these exports have the same two issues:
{#snippetactionSnip()}is incorrectly placed inside the<script>blockButtonis used but not imported
Apply the same fix pattern as shown above for each: add Button to the import and move the snippet declaration outside the script block.
Also applies to: 89-96, 118-125, 147-154, 176-183
🤖 Prompt for AI Agents
In `@src/docs/data/note.ts` around lines 60 - 67, The snippets for noteError,
noteWarning, noteSecondary, noteViolet, and noteCyan each have the snippet
declaration placed inside the <script> block and use Button without importing
it; for each export (noteError, noteWarning, noteSecondary, noteViolet,
noteCyan) move the {`#snippet` actionSnip()} declaration out of the <script
lang="ts"> block and add Button to the import line (e.g., import { Note, Button
} from 'kampsy-ui'), ensuring the Button usage remains in the template section
and the snippet helper stays outside the script block as done for the corrected
export.
| <Menu.Content id="menu" aria-hidden="true" class="w-[200px]"> | ||
| <Menu.Item onClick={() => console.log('One')}>One</Menu.Item> | ||
| <Menu.Item onClick={() => console.log('Two')}>Two</Menu.Item> | ||
| <Menu.Item onClick={() => console.log('Three')}>One</Menu.Item> |
There was a problem hiding this comment.
Copy-paste error: Menu item text doesn't match its action.
The third menu item displays "One" but its onClick logs "Three". This appears to be a copy-paste oversight.
✏️ Suggested fix
- <Menu.Item onClick={() => console.log('Three')}>One</Menu.Item>
+ <Menu.Item onClick={() => console.log('Three')}>Three</Menu.Item>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <Menu.Item onClick={() => console.log('Three')}>One</Menu.Item> | |
| <Menu.Item onClick={() => console.log('Three')}>Three</Menu.Item> |
🤖 Prompt for AI Agents
In `@static/menu/llms.txt` at line 24, The Menu.Item contains mismatched label and
action: the JSX element Menu.Item (with onClick={() => console.log('Three')})
displays "One" but logs "Three"; update either the displayed text or the onClick
payload so they match (e.g., change the label from "One" to "Three" or change
console.log('Three') to console.log('One')) by editing the Menu.Item instance so
its visible text and onClick behavior are consistent.
| <script lang="ts"> | ||
| import { Modal, Text } from 'kampsy-ui'; | ||
|
|
||
| let active = $state(false); | ||
| </script> | ||
|
|
||
| <div> | ||
| <Button onclick={() => (active = true)} size="small">Open Modal</Button> |
There was a problem hiding this comment.
Missing Button import in the usage example.
The example uses Button on lines 24, 38, and 39, but it's not included in the import statement on line 18. This will cause errors if users copy this example directly.
Proposed fix
<script lang="ts">
- import { Modal, Text } from 'kampsy-ui';
+ import { Button, Modal, Text } from 'kampsy-ui';
let active = $state(false);
</script>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <script lang="ts"> | |
| import { Modal, Text } from 'kampsy-ui'; | |
| let active = $state(false); | |
| </script> | |
| <div> | |
| <Button onclick={() => (active = true)} size="small">Open Modal</Button> | |
| <script lang="ts"> | |
| import { Button, Modal, Text } from 'kampsy-ui'; | |
| let active = $state(false); | |
| </script> | |
| <div> | |
| <Button onclick={() => (active = true)} size="small">Open Modal</Button> |
🤖 Prompt for AI Agents
In `@static/modal/llms.txt` around lines 17 - 24, The example is missing the
Button import which causes runtime errors when using <Button> in the snippet;
update the import statement that currently imports Modal and Text to also import
Button (e.g., add Button to the import from 'kampsy-ui') so the component usage
of Button (and its onclick usage with the active/$state variable) resolves
correctly.
| ## Installation | ||
|
|
||
| ```bash | ||
| pnpm i -D kampsy-ui@latest | ||
| ``` |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# Search for any references to kampsy-ui in the codebase
rg "kampsy-ui" -iRepository: kampsy/ui
Length of output: 162
🏁 Script executed:
# Check if there's a package.json to understand project context
fd -t f "package.json" | head -5Repository: kampsy/ui
Length of output: 162
🏁 Script executed:
# Look for more context in the llms.txt file itself
cat static/pagination/llms.txtRepository: kampsy/ui
Length of output: 162
🌐 Web query:
kampsy-ui npm package purpose runtime dependency
💡 Result:
-
Purpose: Kampsy‑UI is a Svelte 5 component library (UI components / design system) for building consistent Svelte applications. [1][2]
-
Runtime dependency? Yes — when you use Kampsy‑UI components in a Svelte app they become part of your app bundle and run in the browser, so the package functions as a runtime dependency of that app (and typically lists Svelte as a peer dependency). It is not a CLI/tooling-only dev dependency. [1][2]
Sources:
[1] ui.kampsy.xyz — Kampsy‑UI documentation.
[2] Socket/npm package summary for kampsy‑ui.
Remove the -D flag from the install command.
kampsy-ui is a Svelte component library that runs in the browser as part of your application, making it a runtime dependency. It should not be installed as a dev dependency.
Documentation fix
-pnpm i -D kampsy-ui@latest
+pnpm i kampsy-ui@latest📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| ## Installation | |
| ```bash | |
| pnpm i -D kampsy-ui@latest | |
| ``` | |
| ## Installation | |
🤖 Prompt for AI Agents
In `@static/pagination/llms.txt` around lines 27 - 31, Update the Installation
command in the static/pagination/llms.txt snippet to install kampsy-ui as a
runtime dependency instead of a devDependency: remove the -D flag and change the
command from "pnpm i -D kampsy-ui@latest" to "pnpm i kampsy-ui@latest" so the
package is saved to dependencies rather than devDependencies.
|
|
||
| <Select.Root bind:value class="w-full lg:w-auto" > | ||
| <Select.Trigger class="w-full lg:w-[200px]"> | ||
| <Select.Value placeholder="select a friuit" /> |
There was a problem hiding this comment.
Typo in placeholder text.
"friuit" should be "fruit".
✏️ Suggested fix
- <Select.Value placeholder="select a friuit" />
+ <Select.Value placeholder="select a fruit" />📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <Select.Value placeholder="select a friuit" /> | |
| <Select.Value placeholder="select a fruit" /> |
🤖 Prompt for AI Agents
In `@static/select/llms.txt` at line 22, Typo in the Select.Value placeholder:
update the placeholder string used in Select.Value from "select a friuit" to
"select a fruit" so the UI reads correctly; locate the Select.Value component in
the file and correct the placeholder prop value.
| </SplitButton.Content> | ||
| </SplitButton.Root> | ||
| {/each} | ||
| </div> |
There was a problem hiding this comment.
Inconsistent indentation.
Lines 38 and 57 use 4-space indentation while the rest of the file uses tabs. This affects readability of the documentation example.
Proposed fix
- </div>
+ </div>Apply to both lines 38 and 57.
Also applies to: 57-57
🤖 Prompt for AI Agents
In `@static/split-button/llms.txt` at line 38, Two closing div tags in the
split-button example are indented with 4 spaces instead of tabs; locate the
closing "</div>" occurrences within the split-button/llms example and replace
their 4-space indentation with a single tab so they match the rest of the file's
indentation style (apply the same change to both occurrences).
1 participant
This pr exposes an LLMs.txt that helps AI models understand how to integrate and interact with kampsy-ui
Summary by CodeRabbit
<script lang="ts">blocks.✏️ Tip: You can customize this high-level summary in your review settings.