fix: improve preset handling & fix container module name #8

ryu-man · 2025-10-22T22:51:26Z

No description provided.

…ustomization

netlify · 2025-10-22T22:51:32Z

✅ Deploy Preview for statuesque-boba-0fb888 ready!

Name	Link
🔨 Latest commit	`12ab00e`
🔍 Latest deploy log	https://app.netlify.com/projects/statuesque-boba-0fb888/deploys/68f9660e570537000825b4c0
😎 Deploy Preview	https://deploy-preview-8--statuesque-boba-0fb888.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copilot

Pull Request Overview

This PR refactors preset handling and customization across the component library to streamline how presets are applied. The main improvements include:

Centralized preset handling in HtmlAtom component with automatic class merging
Simplified component code by removing manual preset retrieval and class application
Introduced a $preset placeholder system for flexible preset styling
Renamed ModuleName to PresetModuleName for clarity and consistency

Reviewed Changes

Copilot reviewed 130 out of 130 changed files in this pull request and generated 11 comments.

Show a summary per file

File	Description
src/lib/context/preset.svelte.ts	Renamed `ModuleName` to `PresetModuleName` and updated `input.root` to `input`
src/lib/context/index.ts	Exported `PresetModuleName` as `ModuleName` for backward compatibility
src/lib/components/atom/html-atom.svelte	Added preset handling logic with `$preset` placeholder and automatic class merging
src/lib/components/atom/types.ts	Added `bond` and `preset` props to `HtmlAtomProps`
src/lib/components/element/types.ts	Updated type annotations for better type safety
src/stories/Theme.svelte	Updated accordion preset configuration and removed unused popover.trigger preset
Multiple component files	Removed manual preset retrieval, simplified class application using `$preset`, and added `bond` prop

Copilot · 2025-10-22T22:53:26Z

src/stories/Theme.svelte

+			class: function () {
+				const bond = this;
+				return [bond.state.isActive ? 'text-foreground/100' : 'text-foreground/50'];
+			}


[nitpick] Using function() syntax and reassigning this to bond is unnecessarily verbose. The original arrow function with bond parameter is clearer and follows modern JavaScript best practices.

Suggested change

class: function () {

const bond = this;

return [bond.state.isActive ? 'text-foreground/100' : 'text-foreground/50'];

}

class: (bond) => [

bond.state.isActive ? 'text-foreground/100' : 'text-foreground/50'

]

Using an arrow function, you cannot retrieve the value assigned to this arg.

Copilot · 2025-10-22T22:53:27Z

src/lib/components/input/input-value.svelte

+	class={[
+		'h-full w-full flex-1 bg-transparent px-2 leading-1 outline-none',
+		toClassValue.bind(bond, preset?.class),
+		toClassValue.bind(bond, klass)


Using .bind() instead of .apply() changes the behavior - .bind() returns a new function rather than calling it immediately. This will result in functions being added to the class array instead of resolved class values.

Suggested change

toClassValue.bind(bond, klass)

toClassValue(bond, klass)

Copilot · 2025-10-22T22:53:27Z

src/lib/components/checkbox/checkbox.svelte

+				enter={scale}
+				enterConfig={{ duration: DURATION.fast, easing: circOut, start: 0.6 }}


The transition was changed from transition:scale to enter={scale} with a separate enterConfig. Verify that the enter prop with enterConfig provides the same functionality as the original transition:scale directive, as these are different APIs.

Copilot · 2025-10-22T22:53:27Z

src/lib/components/combobox/compobox-item.svelte

-
 	let {
 		class: klass = '',
 		as = preset?.as ?? 'div',


The preset variable is used before it's defined. The line const preset = getPreset('combobox.item'); was removed but preset is still referenced, which will cause a runtime error.

Copilot · 2025-10-22T22:53:27Z

src/lib/components/dropdown/item/dropdown-item.svelte


 		if (item) {
-			return item;
+			return item as DropdownItemBond;


Added type assertion as DropdownItemBond suggests a potential type mismatch. Review the type definitions to ensure this cast is necessary and safe.

Copilot · 2025-10-22T22:53:28Z

src/lib/components/atom/html-atom.svelte

+			});
+		}
+
+		return [preset?.class ?? '', '$preset', klass].map((arg) => toClassValue.apply(bond, [arg]));


When no $preset placeholder is found, this code adds the preset class, a literal '$preset' string, and the custom class. The literal '$preset' string in the class array will be treated as a CSS class name, which is incorrect.

Suggested change

return [preset?.class ?? '', '$preset', klass].map((arg) => toClassValue.apply(bond, [arg]));

const presetClass = preset?.class ?? '';

const customClasses = Array.isArray(klass) ? klass : [klass];

return [presetClass, ...customClasses].map((arg) => toClassValue.apply(bond, [arg]));

Copilot · 2025-10-22T22:53:28Z

src/lib/components/drawer/drawer-root.svelte

+		'$preset',
+		klass


Missing {bond} prop even though the preset system now requires it. This inconsistency exists across multiple drawer components and could lead to preset not being properly resolved.

Copilot · 2025-10-22T22:53:29Z

src/lib/components/layer/layer-root.svelte

-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
-	]}
+	class={['pointer-events-none absolute inset-0', '$preset', klass]}


Missing preset and {bond} props. Without the preset prop, the $preset placeholder won't be replaced with actual preset classes.

Suggested change

class={['pointer-events-none absolute inset-0', '$preset', klass]}

class={['pointer-events-none absolute inset-0', preset, klass]}

Copilot · 2025-10-22T22:53:29Z

src/lib/components/drawer/drawer-header.svelte

-	{base}
-	class={[toClassValue.apply(bond, [preset?.class]), toClassValue.apply(bond, [klass])]}
+	{bond}
+	class={['$preset', klass]}


Missing preset prop specification. The $preset placeholder is used but no preset key is provided to resolve it.

Copilot · 2025-10-22T22:53:29Z

src/lib/components/container/container.stories.svelte

-						<div class="bg-foreground h-80 flex-1 rounded-lg"></div>
-					{/each}
-				</div>
+		<ContainerCmp class="flex flex-col items-center gap-4 w-full">


Corrected spelling of 'contaiener' to 'container' in the directory name would be consistent, but this change only updates the story file content.

…indicator

…onents

ryu-man added 2 commits October 23, 2025 06:43

feat: handle presets and introduce $preset placeholder for better c…

1c7b5e8

…ustomization

refactor: migrate components to use the new approach

5ba3f5c

ryu-man requested a review from Copilot October 22, 2025 22:51

Copilot AI reviewed Oct 22, 2025

View reviewed changes

ryu-man added 8 commits October 23, 2025 07:00

fix: correct binding syntax for class value

e75a6ff

refactor: remove unused props 'as' and 'base'

c263149

fix: simplify binding in accordion item header class function

342c946

refactor: reorder imports and update animation handling for checkbox …

4a64965

…indicator

fix: add base prop to ACombobox.Trigger for proper functionality

7313364

fix: bind bond to Teleport component for improved functionality

1194bea

fix: add preset prop to HtmlAtom in drawer-header and layer-root comp…

32d6fc5

…onents

feat: fix spelling issue in container module name

12ab00e

ryu-man changed the title ~~fix: improve preset handling n customization~~ fix: improve preset handling & fix container module spelling Oct 22, 2025

ryu-man changed the title ~~fix: improve preset handling & fix container module spelling~~ fix: improve preset handling & fix container module name Oct 22, 2025

ryu-man merged commit cbe21ed into main Oct 22, 2025
4 checks passed

ryu-man deleted the fix/improve-preset-handling-n-customization branch October 22, 2025 23:23

		enter={scale}
		enterConfig={{ duration: DURATION.fast, easing: circOut, start: 0.6 }}

-		return [preset?.class ?? '', '$preset', klass].map((arg) => toClassValue.apply(bond, [arg]));
+		const presetClass = preset?.class ?? '';
+		const customClasses = Array.isArray(klass) ? klass : [klass];
+		return [presetClass, ...customClasses].map((arg) => toClassValue.apply(bond, [arg]));

	class={['pointer-events-none absolute inset-0', '$preset', klass]}
	class={['pointer-events-none absolute inset-0', preset, klass]}

fix: improve preset handling & fix container module name #8

fix: improve preset handling & fix container module name #8

Uh oh!

Conversation

ryu-man commented Oct 22, 2025

Uh oh!

netlify bot commented Oct 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for statuesque-boba-0fb888 ready!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Oct 22, 2025

Choose a reason for hiding this comment

Uh oh!

ryu-man Oct 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 22, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

netlify bot commented Oct 22, 2025 •

edited

Loading