astro-tractstack 2.0.0-rc.9 → 2.0.1

package/templates/src/components/edit/widgets/ToggleWidget.tsx

@@ -12,28 +12,27 @@ export default function ToggleWidget({ node, onUpdate }: ToggleWidgetProps) {
   const [beliefs, setBeliefs] = useState<BeliefNode[]>([]);
   const [selectedBeliefTag, setSelectedBeliefTag] = useState<string>('');
   const [currentPrompt, setCurrentPrompt] = useState<string>('');
+  const [currentScale, setCurrentScale] = useState<string>('');
   const [isInitialized, setIsInitialized] = useState(false);
 
-  // Get parameter metadata from the widgetMeta constant
   const widgetInfo = widgetMeta.toggle;
 
   const params = node.codeHookParams || [];
   const beliefTag = String(params[0] || '');
   const prompt = String(params[1] || '');
+  const scale = String(params[2] || '');
 
-  // Check if beliefTag is the placeholder value
   const isPlaceholder = beliefTag === 'BeliefTag';
 
-  // Update local state when props change
   useEffect(() => {
     if (!isPlaceholder && beliefTag) {
       setSelectedBeliefTag(beliefTag);
     }
     setCurrentPrompt(prompt);
+    setCurrentScale(scale);
     setIsInitialized(true);
-  }, [beliefTag, prompt, isPlaceholder]);
+  }, [beliefTag, prompt, scale, isPlaceholder]);
 
-  // Fetch beliefs using new Go backend pattern
   useEffect(() => {
     const fetchData = async () => {
       try {
@@ -41,7 +40,6 @@ export default function ToggleWidget({ node, onUpdate }: ToggleWidgetProps) {
           import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
         const tenantId = import.meta.env.PUBLIC_TENANTID || 'default';
 
-        // Step 1: Get all belief IDs
         const idsResponse = await fetch(`${goBackend}/api/v1/nodes/beliefs`, {
           headers: {
             'X-Tenant-ID': tenantId,
@@ -60,7 +58,6 @@ export default function ToggleWidget({ node, onUpdate }: ToggleWidgetProps) {
           return;
         }
 
-        // Step 2: Get belief data by IDs
         const beliefsResponse = await fetch(
           `${goBackend}/api/v1/nodes/beliefs`,
           {
@@ -92,34 +89,30 @@ export default function ToggleWidget({ node, onUpdate }: ToggleWidgetProps) {
   const handleBeliefChange = (selectedValue: string) => {
     if (!isInitialized) return;
     setSelectedBeliefTag(selectedValue);
-    onUpdate([selectedValue, currentPrompt]);
+    const selectedBelief = beliefs.find((b) => b.slug === selectedValue);
+    const newScale = selectedBelief ? selectedBelief.scale || '' : '';
+    setCurrentScale(newScale);
+    onUpdate([selectedValue, currentPrompt, newScale]);
   };
 
   const handlePromptChange = (value: string) => {
     if (!isInitialized) return;
-    // Sanitize the input value (remove newlines and pipe characters)
     const sanitizedValue = value.replace(/[\n\r|]/g, '');
     setCurrentPrompt(sanitizedValue);
-
-    // Use the actual selected tag (from state) or the original belief tag as fallback
     const tagToUse = selectedBeliefTag || (isPlaceholder ? '' : beliefTag);
-    onUpdate([tagToUse, sanitizedValue]);
+    onUpdate([tagToUse, sanitizedValue, currentScale]);
   };
 
-  // Show beliefs that can be selected for the toggle
   const filteredBeliefs = beliefs.filter(
     (b) => b.scale === 'yn' || b.scale === 'tf'
   );
 
-  // Find the selected belief (if any)
   const selectedBelief = beliefs.find(
     (b) => b.slug === (selectedBeliefTag || (isPlaceholder ? '' : beliefTag))
   );
 
-  // Determine if we have a real selection - either from state or props
   const hasRealSelection = !!selectedBelief || (!isPlaceholder && !!beliefTag);
 
-  // Calculate the current value to show in the select dropdown
   const selectValue = selectedBeliefTag || (isPlaceholder ? '' : beliefTag);
 
   return (

package/templates/src/components/fields/ArtpackImage.tsx

@@ -351,7 +351,10 @@ const ArtpackImage = ({ paneId, onUpdate }: ArtpackImageProps) => {
             className="fixed inset-0 flex items-center justify-center p-4"
             style={{ zIndex: 10010 }}
           >
-            <Dialog.Content className="dialog-content">
+            <Dialog.Content
+              className="dialog-content overflow-y-auto"
+              style={{ maxHeight: '80vh' }}
+            >
               <Dialog.Title className="mb-4 text-lg font-bold">
                 Select Artpack Image
               </Dialog.Title>

package/templates/src/components/fields/BackgroundImage.tsx

@@ -504,7 +504,7 @@ const BackgroundImage = ({ paneId, onUpdate }: BackgroundImageProps) => {
                           />
                         </div>
                         <div className="flex-1">
-                          <div className="font-medium">
+                          <div className="font-bold">
                             {file.altDescription || file.filename}
                           </div>
                           {file.altDescription && (

package/templates/src/components/fields/BackgroundImageWrapper.tsx

@@ -1,10 +1,12 @@
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useMemo } from 'react';
 import { useStore } from '@nanostores/react';
+import { Select } from '@ark-ui/react/select';
+import { createListCollection } from '@ark-ui/react/collection';
 import BackgroundImage from './BackgroundImage';
 import ArtpackImage from './ArtpackImage';
 import ColorPickerCombo from './ColorPickerCombo';
 import { getCtx } from '@/stores/nodes';
-import { hasArtpacksStore } from '@/stores/storykeep';
+import { hasArtpacksStore, settingsPanelStore } from '@/stores/storykeep';
 import { cloneDeep } from '@/utils/helpers';
 import type { BrandConfig } from '@/types/tractstack';
 import type {
@@ -19,6 +21,36 @@ export interface BackgroundImageWrapperProps {
   config?: BrandConfig;
 }
 
+const CheckIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className="h-5 w-5"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+  >
+    <path
+      fillRule="evenodd"
+      d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+const ChevronDownIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className="h-5 w-5"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+  >
+    <path
+      fillRule="evenodd"
+      d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
 const BackgroundImageWrapper = ({
   paneId,
   config,
@@ -27,11 +59,8 @@ const BackgroundImageWrapper = ({
   const allNodes = useStore(ctx.allNodes);
   const $artpacks = useStore(hasArtpacksStore);
   const hasArtpacks = $artpacks && Object.keys($artpacks).length > 0;
-
-  // State to force re-renders when child components need it
   const [, setUpdateCounter] = useState(0);
 
-  // Using useCallback to create a stable reference to the update function
   const onUpdate = useCallback(() => {
     setUpdateCounter((prev) => prev + 1);
   }, []);
@@ -89,8 +118,47 @@ const BackgroundImageWrapper = ({
   const position = bgNode?.position || 'background';
   const size = bgNode?.size || 'equal';
 
+  const positionOptions = [
+    { label: 'Background', value: 'background' },
+    { label: 'Left', value: 'left' },
+    { label: 'Right', value: 'right' },
+    { label: 'Left Bleed', value: 'leftBleed' },
+    { label: 'Right Bleed', value: 'rightBleed' },
+  ];
+
+  const collection = useMemo(
+    () =>
+      createListCollection({
+        items: positionOptions,
+        itemToValue: (item) => item.value,
+        itemToString: (item) => item.label,
+      }),
+    []
+  );
+
+  const selectItemStyles = `
+    .position-item[data-highlighted] {
+      background-color: #0891b2; /* bg-cyan-600 */
+      color: white;
+    }
+    .position-item[data-highlighted] .position-indicator {
+      color: white;
+    }
+    .position-item[data-state="checked"] .position-indicator {
+      display: flex;
+    }
+    .position-item .position-indicator {
+      display: none;
+    }
+    .position-item[data-state="checked"] {
+      font-weight: bold;
+    }
+  `;
+
   return (
     <div className="w-full space-y-6">
+      <style>{selectItemStyles}</style>
+
       <h3 className="text-sm font-bold text-gray-700">Background</h3>
 
       <ColorPickerCombo
@@ -115,39 +183,64 @@ const BackgroundImageWrapper = ({
       )}
       {bgNode && (
         <div className="w-full space-y-6">
-          {/* Position Toggle */}
           <div className="space-y-2">
-            <label className="block text-sm font-bold text-gray-700">
-              Position
-            </label>
-            <div className="flex space-x-4">
-              {(
-                [
-                  'background',
-                  'left',
-                  'right',
-                  'leftBleed',
-                  'rightBleed',
-                ] as const
-              ).map((pos) => (
-                <label key={pos} className="inline-flex items-center">
-                  <input
-                    type="radio"
-                    name="position"
-                    value={pos}
-                    checked={position === pos}
-                    onChange={() => handlePositionChange(pos)}
-                    className="text-myblue focus:ring-myblue h-4 w-4 border-gray-300"
+            <Select.Root
+              collection={collection}
+              positioning={{ sameWidth: true }}
+              value={[position]}
+              onValueChange={(details) => {
+                const currentSignal = settingsPanelStore.get();
+                if (currentSignal) {
+                  settingsPanelStore.set({
+                    ...currentSignal,
+                    editLock: Date.now(),
+                  });
+                }
+                handlePositionChange(
+                  details.value[0] as
+                    | 'background'
+                    | 'left'
+                    | 'right'
+                    | 'leftBleed'
+                    | 'rightBleed'
+                );
+              }}
+            >
+              <Select.Label className="block text-sm font-bold text-gray-700">
+                Position
+              </Select.Label>
+              <Select.Control>
+                <Select.Trigger className="focus:border-myblue focus:ring-myblue flex w-full items-center justify-between rounded-md border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-1">
+                  <Select.ValueText
+                    className="capitalize"
+                    placeholder="Select a position"
                   />
-                  <span className="ml-2 text-sm capitalize text-gray-700">
-                    {pos}
-                  </span>
-                </label>
-              ))}
-            </div>
+                  <Select.Indicator>
+                    <ChevronDownIcon />
+                  </Select.Indicator>
+                </Select.Trigger>
+              </Select.Control>
+              <Select.Positioner>
+                <Select.Content className="z-10 mt-1 w-full rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+                  <Select.ItemGroup>
+                    {collection.items.map((item) => (
+                      <Select.Item
+                        key={item.value}
+                        item={item}
+                        className="position-item relative cursor-pointer select-none py-2 pl-10 pr-4 text-sm text-gray-900"
+                      >
+                        <Select.ItemText>{item.label}</Select.ItemText>
+                        <Select.ItemIndicator className="position-indicator absolute inset-y-0 left-0 flex items-center pl-3 text-cyan-600">
+                          <CheckIcon />
+                        </Select.ItemIndicator>
+                      </Select.Item>
+                    ))}
+                  </Select.ItemGroup>
+                </Select.Content>
+              </Select.Positioner>
+            </Select.Root>
           </div>
 
-          {/* Size Toggle - Only show when position is left or right */}
           {position !== 'background' && (
             <div className="space-y-2">
               <label className="block text-sm font-bold text-gray-700">
@@ -177,7 +270,6 @@ const BackgroundImageWrapper = ({
             </div>
           )}
 
-          {/* Render the appropriate image component */}
           {isArtpackImageNode(bgNode) ? (
             <ArtpackImage paneId={paneId} onUpdate={onUpdate} />
           ) : (

package/templates/src/components/fields/ColorPickerCombo.tsx

@@ -1,5 +1,6 @@
 import { useState, useCallback, useMemo, useEffect, useRef } from 'react';
 import { Combobox } from '@ark-ui/react';
+import { Portal } from '@ark-ui/react/portal';
 import { createListCollection } from '@ark-ui/react/collection';
 import ChevronUpDownIcon from '@heroicons/react/24/outline/ChevronUpDownIcon';
 import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';
@@ -42,7 +43,7 @@ const ColorPickerCombo = ({
 
   // Add ref and useDropdownDirection hook
   const comboboxRef = useRef<HTMLDivElement>(null);
-  const { openAbove, maxHeight } = useDropdownDirection(comboboxRef);
+  const { openAbove } = useDropdownDirection(comboboxRef);
 
   // Get all available Tailwind color options
   const allTailwindColorOptions = useMemo(() => {
@@ -59,19 +60,10 @@ const ColorPickerCombo = ({
   }, [allTailwindColorOptions, query]);
 
   // Create collection for combobox
-  const collection = useMemo(() => {
-    // Make sure all tailwind colors are included in the collection
-    const items = [...allTailwindColorOptions];
-
-    // Ensure the initial color is in the collection if it exists
-    if (initialTailwindColor && !items.includes(initialTailwindColor)) {
-      items.push(initialTailwindColor);
-    }
-
-    return createListCollection({
-      items,
-    });
-  }, [allTailwindColorOptions, initialTailwindColor]);
+  const collection = useMemo(
+    () => createListCollection({ items: filteredColors }),
+    [filteredColors]
+  );
 
   // Set default value during initial render
   useEffect(() => {
@@ -223,56 +215,68 @@ const ColorPickerCombo = ({
               onValueChange={handleTailwindColorChange}
               onInputValueChange={handleInputChange}
               selectionBehavior="replace"
+              loopFocus={true}
+              openOnKeyPress={true}
+              positioning={{
+                placement: openAbove ? 'top' : 'bottom',
+                gutter: 4,
+                sameWidth: true,
+              }}
             >
-              <div ref={comboboxRef} className="relative max-w-48">
-                <Combobox.Input
-                  className="border-mydarkgrey focus:border-myblue focus:ring-myblue xs:text-sm w-full rounded-md py-2 pl-3 pr-10 shadow-sm"
-                  placeholder="Search Tailwind colors..."
-                  autoComplete="off"
-                />
-                <Combobox.Trigger className="absolute inset-y-0 right-0 flex items-center pr-2">
-                  <ChevronUpDownIcon
-                    className="text-mydarkgrey h-5 w-5"
-                    aria-hidden="true"
+              <Combobox.Control ref={comboboxRef}>
+                <div className="relative">
+                  <Combobox.Input
+                    className="border-mydarkgrey focus:border-myblue focus:ring-myblue xs:text-sm w-full max-w-xl rounded-md py-2 pl-3 pr-10 shadow-sm"
+                    placeholder="Search Tailwind colors..."
+                    autoComplete="off"
                   />
-                </Combobox.Trigger>
-                <Combobox.Content
-                  className={`xs:text-sm absolute z-10 mt-1 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${
-                    openAbove ? 'bottom-full mb-1' : 'top-full'
-                  }`}
-                  style={{ maxHeight }}
-                >
-                  {filteredColors.length === 0 ? (
-                    <div className="relative cursor-default select-none py-2 pl-3 pr-4 text-black">
-                      Nothing found.
-                    </div>
-                  ) : (
-                    filteredColors.map((color) => (
-                      <Combobox.Item
-                        key={color}
-                        item={color}
-                        className="color-item relative cursor-default select-none py-2 pl-3 pr-4"
-                      >
-                        <div className="flex items-center">
-                          <div
-                            className="mr-3 h-6 w-6 flex-shrink-0 rounded"
-                            style={{
-                              backgroundColor: tailwindToHex(
-                                `bg-${color}`,
-                                config.BRAND_COLOURS || null
-                              ),
-                            }}
-                          />
-                          <span className="block truncate">{color}</span>
-                          <span className="color-indicator absolute inset-y-0 right-0 flex items-center pr-3 text-cyan-600">
-                            <CheckIcon className="h-5 w-5" aria-hidden="true" />
-                          </span>
-                        </div>
-                      </Combobox.Item>
-                    ))
-                  )}
-                </Combobox.Content>
-              </div>
+                  <Combobox.Trigger className="absolute inset-y-0 right-0 flex items-center pr-2">
+                    <ChevronUpDownIcon
+                      className="text-mydarkgrey h-5 w-5"
+                      aria-hidden="true"
+                    />
+                  </Combobox.Trigger>
+                </div>
+              </Combobox.Control>
+
+              <Portal>
+                <Combobox.Positioner style={{ zIndex: 1002 }}>
+                  <Combobox.Content className="xs:text-sm max-h-64 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+                    {filteredColors.length === 0 ? (
+                      <div className="relative cursor-default select-none py-2 pl-3 pr-4 text-black">
+                        Nothing found.
+                      </div>
+                    ) : (
+                      filteredColors.map((color) => (
+                        <Combobox.Item
+                          key={color}
+                          item={color}
+                          className="color-item relative cursor-default select-none py-2 pl-3 pr-4"
+                        >
+                          <div className="flex items-center">
+                            <div
+                              className="mr-3 h-6 w-6 flex-shrink-0 rounded"
+                              style={{
+                                backgroundColor: tailwindToHex(
+                                  `bg-${color}`,
+                                  config.BRAND_COLOURS || null
+                                ),
+                              }}
+                            />
+                            <span className="block truncate">{color}</span>
+                            <span className="color-indicator absolute inset-y-0 right-0 flex items-center pr-3 text-cyan-600">
+                              <CheckIcon
+                                className="h-5 w-5"
+                                aria-hidden="true"
+                              />
+                            </span>
+                          </div>
+                        </Combobox.Item>
+                      ))
+                    )}
+                  </Combobox.Content>
+                </Combobox.Positioner>
+              </Portal>
             </Combobox.Root>
           </div>
         )}

package/templates/src/components/fields/ImageUpload.tsx

@@ -323,7 +323,7 @@ export const ImageUpload = ({
       {isSelectingFile && (
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
           <div className="w-full max-w-md rounded-lg bg-white p-6 shadow-lg">
-            <h3 className="text-mydarkgrey mb-4 text-lg font-medium">
+            <h3 className="text-mydarkgrey mb-4 text-lg font-bold">
               Select an Image
             </h3>
 

package/templates/src/components/fields/ViewportComboBox.tsx

@@ -1,12 +1,11 @@
 import {
-  useRef,
   useState,
   useEffect,
   useCallback,
   useMemo,
   type ChangeEvent,
 } from 'react';
-import { Combobox } from '@ark-ui/react';
+import { Combobox, Portal } from '@ark-ui/react';
 import { createListCollection } from '@ark-ui/react/collection';
 import ChevronUpDownIcon from '@heroicons/react/20/solid/ChevronUpDownIcon';
 import CheckIcon from '@heroicons/react/24/outline/CheckIcon';
@@ -14,6 +13,7 @@ import DevicePhoneMobileIcon from '@heroicons/react/24/outline/DevicePhoneMobile
 import DeviceTabletIcon from '@heroicons/react/24/outline/DeviceTabletIcon';
 import ComputerDesktopIcon from '@heroicons/react/24/outline/ComputerDesktopIcon';
 import { classNames } from '@/utils/helpers';
+import { settingsPanelStore } from '@/stores/storykeep';
 import { tailwindToHex, colorValues } from '@/utils/compositor/tailwindColors';
 import type { BrandConfig } from '@/types/tractstack';
 
@@ -45,7 +45,6 @@ const ViewportComboBox = ({
   const [internalValue, setInternalValue] = useState(value);
   const [query, setQuery] = useState('');
   const [isNowNegative, setIsNowNegative] = useState(isNegative);
-  const inputRef = useRef<HTMLInputElement>(null);
 
   const Icon =
     viewport === 'mobile'
@@ -100,6 +99,13 @@ const ViewportComboBox = ({
       const selectedValue = details.value[0] || '';
       setInternalValue(selectedValue);
       setQuery('');
+      const currentSignal = settingsPanelStore.get();
+      if (currentSignal) {
+        settingsPanelStore.set({
+          ...currentSignal,
+          editLock: Date.now(),
+        });
+      }
       onFinalChange(selectedValue, viewport, isNowNegative);
     },
     [onFinalChange, viewport, isNowNegative]
@@ -154,8 +160,13 @@ const ViewportComboBox = ({
               loopFocus={true}
               openOnKeyPress={true}
               composite={true}
+              positioning={{
+                placement: 'bottom',
+                gutter: 4,
+                sameWidth: true,
+              }}
             >
-              <div className="relative">
+              <Combobox.Control>
                 <div className="relative flex items-center">
                   {isColorValue && (
                     <div
@@ -169,7 +180,6 @@ const ViewportComboBox = ({
                     />
                   )}
                   <Combobox.Input
-                    ref={inputRef}
                     className={classNames(
                       'border-mydarkgrey w-full rounded-md border py-2 text-xl leading-5 focus:border-cyan-600 focus:ring-1 focus:ring-cyan-600',
                       isInferred ? 'text-black/20' : 'text-black',
@@ -186,44 +196,51 @@ const ViewportComboBox = ({
                     />
                   </Combobox.Trigger>
                 </div>
-              </div>
-              <Combobox.Content className="absolute z-50 mt-1 max-h-32 w-full overflow-auto rounded-md bg-white py-1 text-xl shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-                {collection.items.length === 0 ? (
-                  <div className="text-mydarkgrey relative cursor-default select-none px-4 py-2">
-                    Nothing found.
-                  </div>
-                ) : (
-                  collection.items.map((item) => (
-                    <Combobox.Item
-                      key={item}
-                      item={item}
-                      className="viewport-item relative cursor-default select-none py-2"
-                    >
-                      <div className="flex items-center">
-                        {colorValues.includes(item) && (
-                          <div
-                            className="absolute left-3 top-1/2 h-6 w-6 -translate-y-1/2 rounded border border-black/10 shadow-sm"
-                            style={{
-                              backgroundColor: tailwindToHex(
-                                item,
-                                config.BRAND_COLOURS || null
-                              ),
-                            }}
-                          />
-                        )}
-                        <span
-                          className={`block truncate ${colorValues.includes(item) ? 'pl-12' : 'pl-6'} pr-9`}
-                        >
-                          {item}
-                        </span>
-                        <span className="viewport-indicator absolute inset-y-0 right-0 flex items-center pr-4 text-cyan-600">
-                          <CheckIcon className="h-5 w-5" aria-hidden="true" />
-                        </span>
+              </Combobox.Control>
+              <Portal>
+                <Combobox.Positioner style={{ zIndex: 1002 }}>
+                  <Combobox.Content className="max-h-64 w-full overflow-auto rounded-md bg-white py-1 text-xl shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+                    {collection.items.length === 0 ? (
+                      <div className="text-mydarkgrey relative cursor-default select-none px-4 py-2">
+                        Nothing found.
                       </div>
-                    </Combobox.Item>
-                  ))
-                )}
-              </Combobox.Content>
+                    ) : (
+                      collection.items.map((item) => (
+                        <Combobox.Item
+                          key={item}
+                          item={item}
+                          className="viewport-item relative cursor-default select-none py-2"
+                        >
+                          <div className="flex items-center">
+                            {colorValues.includes(item) && (
+                              <div
+                                className="absolute left-3 top-1/2 h-6 w-6 -translate-y-1/2 rounded border border-black/10 shadow-sm"
+                                style={{
+                                  backgroundColor: tailwindToHex(
+                                    item,
+                                    config.BRAND_COLOURS || null
+                                  ),
+                                }}
+                              />
+                            )}
+                            <span
+                              className={`block truncate ${colorValues.includes(item) ? 'pl-12' : 'pl-6'} pr-9`}
+                            >
+                              {item}
+                            </span>
+                            <span className="viewport-indicator absolute inset-y-0 right-0 flex items-center pr-4 text-cyan-600">
+                              <CheckIcon
+                                className="h-5 w-5"
+                                aria-hidden="true"
+                              />
+                            </span>
+                          </div>
+                        </Combobox.Item>
+                      ))
+                    )}
+                  </Combobox.Content>
+                </Combobox.Positioner>
+              </Portal>
             </Combobox.Root>
           </div>
           {allowNegative && (