@nolgard/svelte

License

Copyright (c) 2026 Johan Lindqvist. Use of material not already licensed requires prior written permission. See LICENSE.txt. Previously granted MIT and third-party rights remain unchanged.

Svelte components and utilities for Pinecone apps.

Config components

Component documentation lives in docs/components and is split into one file per component for easier maintenance.

Import from the config subpath:

<script>
  import { Panel, InputField, Checkbox, CheckboxGroup, CustomSelector } from '@nolgard/svelte/config'
</script>

InputField supports:

• id, label, description, type, name, required, disabled, readonly
• show, maxlength, maxlenght, pattern, rows, value

CustomSelector supports:

• id, label, description, name, placeholder
• options, searchable, removable, required, disabled, multiple, show, value

PageSelector uses the same field styling as CustomSelector, including --radius-sm, --control-min-height, --field-bg, --field-text, --field-border, --field-border-hover, --field-border-focus and --state-focus-ring. Page hierarchy, search and saved page values are unchanged.

ColorSelector reads system colors (including generated variants), active theme colors, or both through @nolgard/webapps-colors. Configure source, includeVariants, preview, and searchable. Search defaults to at least three Unicode characters with a 350 ms debounce. See ColorSelector for compatibility, API requirements, error handling and keyboard behavior.

In 0.2.38 the config API helpers no longer contain default API keys. Pinecone's editor supplies payload.runtimeApi in the same-origin config init message. Update the editor alongside this package. Standalone config forms must supply their key at runtime via component props or window.PINECONE_API_KEY (and optionally window.PINECONE_API_BASE). Do not put credentials in persisted addon configuration.

Example:

<Panel heading="Inställningar">
  <InputField name="text" label="Text" />

  <CustomSelector
    name="custom"
    label="Custom selector"
    options={[{ label: 'Värde 1', value: 'value1' }, { label: 'Värde 2', value: 'value2' }]}
  />
</Panel>

Label snippet:

<InputField name="text">
  {#snippet label()}
    Custom <strong>label</strong>
  {/snippet}
</InputField>

Description snippet:

<InputField name="text">
  {#snippet description()}
    Custom <strong>description</strong>
  {/snippet}
</InputField>

Option snippet:

<CustomSelector name="custom" options={[{ label: 'Värde 1', value: 'value1' }] }>
  {#snippet option({ option: item })}
    {item.label}
  {/snippet}
</CustomSelector>