@lightspeed/crane-api 2.3.3-rc.0 → 2.3.3-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference path="../types.d.ts" />
2
2
  import * as vue from 'vue';
3
- import { Reactive, ComputedRef, Component, App, Ref } from 'vue';
3
+ import { Reactive, ComputedRef, Component, App, Ref, CSSProperties, StyleValue } from 'vue';
4
4
  import { z } from 'zod';
5
5
 
6
6
  /**
@@ -389,9 +389,9 @@ declare const DescriptorSchema: z.ZodObject<{
389
389
  color: z.ZodOptional<z.ZodCustom<string, string>>;
390
390
  }, z.core.$strict>>;
391
391
  capitalization: z.ZodOptional<z.ZodEnum<{
392
+ small: "small";
392
393
  none: "none";
393
394
  all: "all";
394
- small: "small";
395
395
  }>>;
396
396
  }, z.core.$strict>, z.ZodObject<{
397
397
  type: z.ZodLiteral<"DIVIDER">;
@@ -466,9 +466,9 @@ declare const DescriptorSchema: z.ZodObject<{
466
466
  color: z.ZodOptional<z.ZodCustom<string, string>>;
467
467
  }, z.core.$strict>>;
468
468
  capitalization: z.ZodOptional<z.ZodEnum<{
469
+ small: "small";
469
470
  none: "none";
470
471
  all: "all";
471
- small: "small";
472
472
  }>>;
473
473
  }, z.core.$strict>, z.ZodObject<{
474
474
  type: z.ZodLiteral<"DIVIDER">;
@@ -892,9 +892,9 @@ declare const CollectionDescriptorSchema: z.ZodObject<{
892
892
  color: z.ZodOptional<z.ZodCustom<string, string>>;
893
893
  }, z.core.$strict>>;
894
894
  capitalization: z.ZodOptional<z.ZodEnum<{
895
+ small: "small";
895
896
  none: "none";
896
897
  all: "all";
897
- small: "small";
898
898
  }>>;
899
899
  }, z.core.$strict>, z.ZodObject<{
900
900
  type: z.ZodLiteral<"DIVIDER">;
@@ -969,9 +969,9 @@ declare const CollectionDescriptorSchema: z.ZodObject<{
969
969
  color: z.ZodOptional<z.ZodCustom<string, string>>;
970
970
  }, z.core.$strict>>;
971
971
  capitalization: z.ZodOptional<z.ZodEnum<{
972
+ small: "small";
972
973
  none: "none";
973
974
  all: "all";
974
- small: "small";
975
975
  }>>;
976
976
  }, z.core.$strict>, z.ZodObject<{
977
977
  type: z.ZodLiteral<"DIVIDER">;
@@ -1351,7 +1351,7 @@ interface CategorySelectorContent {
1351
1351
  hasCategories: boolean;
1352
1352
  /** Array of selected category IDs */
1353
1353
  categoryIds: Array<number>;
1354
- /** `true` if selector data exists */
1354
+ /** `true` if there are categories to render */
1355
1355
  hasContent: boolean;
1356
1356
  }
1357
1357
 
@@ -1687,7 +1687,7 @@ interface InternalColor {
1687
1687
  *
1688
1688
  * @see {@link asStructuredColor}
1689
1689
  */
1690
- declare class Color implements InternalColor {
1690
+ declare class Color$1 implements InternalColor {
1691
1691
  readonly type: "STRUCTURED_COLOR";
1692
1692
  readonly raw: string;
1693
1693
  readonly hex: string;
@@ -1711,7 +1711,7 @@ declare class Color implements InternalColor {
1711
1711
  * // structured?.type === 'STRUCTURED_COLOR'
1712
1712
  * ```
1713
1713
  */
1714
- declare function asStructuredColor(color: Omit<InternalColor, 'type'> | undefined): Color | undefined;
1714
+ declare function asStructuredColor(color: Omit<InternalColor, 'type'> | undefined): Color$1 | undefined;
1715
1715
  /**
1716
1716
  * Solid color configuration.
1717
1717
  *
@@ -1719,7 +1719,7 @@ declare function asStructuredColor(color: Omit<InternalColor, 'type'> | undefine
1719
1719
  */
1720
1720
  interface SolidColor {
1721
1721
  /** The solid color value (StructuredColor post-resolution, or GlobalColor pre-resolution) */
1722
- color: Color | undefined;
1722
+ color: Color$1 | undefined;
1723
1723
  }
1724
1724
  /**
1725
1725
  * Gradient color configuration.
@@ -1728,9 +1728,9 @@ interface SolidColor {
1728
1728
  */
1729
1729
  interface GradientColor {
1730
1730
  /** Gradient start color (StructuredColor post-resolution, or GlobalColor pre-resolution) */
1731
- fromColor: Color | undefined;
1731
+ fromColor: Color$1 | undefined;
1732
1732
  /** Gradient end color (StructuredColor post-resolution, or GlobalColor pre-resolution) */
1733
- toColor: Color | undefined;
1733
+ toColor: Color$1 | undefined;
1734
1734
  }
1735
1735
  interface SolidColorTransformed {
1736
1736
  color: InternalColor | undefined;
@@ -1831,9 +1831,9 @@ declare const LogoDesignEditorDefaultsSchema: z.ZodObject<{
1831
1831
  color: z.ZodOptional<z.ZodCustom<string, string>>;
1832
1832
  }, z.core.$strict>>;
1833
1833
  capitalization: z.ZodOptional<z.ZodEnum<{
1834
+ small: "small";
1834
1835
  none: "none";
1835
1836
  all: "all";
1836
- small: "small";
1837
1837
  }>>;
1838
1838
  }, z.core.$strict>;
1839
1839
  declare const LogoDesignEditorSchema: z.ZodObject<{
@@ -1856,9 +1856,9 @@ declare const LogoDesignEditorSchema: z.ZodObject<{
1856
1856
  color: z.ZodOptional<z.ZodCustom<string, string>>;
1857
1857
  }, z.core.$strict>>;
1858
1858
  capitalization: z.ZodOptional<z.ZodEnum<{
1859
+ small: "small";
1859
1860
  none: "none";
1860
1861
  all: "all";
1861
- small: "small";
1862
1862
  }>>;
1863
1863
  }, z.core.$strict>>;
1864
1864
  }, z.core.$strict>;
@@ -2151,7 +2151,7 @@ interface ProductSelectorContent {
2151
2151
  categories: CategoryListComponentItem[];
2152
2152
  /** Selected category ID (when using category selection) */
2153
2153
  categoryId?: number;
2154
- /** `true` if selector data exists */
2154
+ /** `true` if there are products to render */
2155
2155
  hasContent: boolean;
2156
2156
  }
2157
2157
 
@@ -4467,9 +4467,9 @@ declare const DesignEditorDefaultsSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
4467
4467
  color: z.ZodOptional<z.ZodCustom<string, string>>;
4468
4468
  }, z.core.$strict>>;
4469
4469
  capitalization: z.ZodOptional<z.ZodEnum<{
4470
+ small: "small";
4470
4471
  none: "none";
4471
4472
  all: "all";
4472
- small: "small";
4473
4473
  }>>;
4474
4474
  }, z.core.$strict>, z.ZodObject<{
4475
4475
  type: z.ZodLiteral<"DIVIDER">;
@@ -4544,9 +4544,9 @@ declare const DesignEditorDefaultsSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
4544
4544
  color: z.ZodOptional<z.ZodCustom<string, string>>;
4545
4545
  }, z.core.$strict>>;
4546
4546
  capitalization: z.ZodOptional<z.ZodEnum<{
4547
+ small: "small";
4547
4548
  none: "none";
4548
4549
  all: "all";
4549
- small: "small";
4550
4550
  }>>;
4551
4551
  }, z.core.$strict>, z.ZodObject<{
4552
4552
  type: z.ZodLiteral<"DIVIDER">;
@@ -4664,9 +4664,9 @@ declare const AccordionShowcaseItemSchema: z.ZodObject<{
4664
4664
  color: z.ZodOptional<z.ZodCustom<string, string>>;
4665
4665
  }, z.core.$strict>>;
4666
4666
  capitalization: z.ZodOptional<z.ZodEnum<{
4667
+ small: "small";
4667
4668
  none: "none";
4668
4669
  all: "all";
4669
- small: "small";
4670
4670
  }>>;
4671
4671
  }, z.core.$strict>, z.ZodObject<{
4672
4672
  type: z.ZodLiteral<"DIVIDER">;
@@ -4750,9 +4750,9 @@ declare const AccordionShowcaseDesignEditorDefaultsSchema: z.ZodObject<{
4750
4750
  color: z.ZodOptional<z.ZodCustom<string, string>>;
4751
4751
  }, z.core.$strict>>;
4752
4752
  capitalization: z.ZodOptional<z.ZodEnum<{
4753
+ small: "small";
4753
4754
  none: "none";
4754
4755
  all: "all";
4755
- small: "small";
4756
4756
  }>>;
4757
4757
  }, z.core.$strict>, z.ZodObject<{
4758
4758
  type: z.ZodLiteral<"DIVIDER">;
@@ -4897,9 +4897,9 @@ declare const AccordionDesignItemSchema: z.ZodObject<{
4897
4897
  color: z.ZodOptional<z.ZodCustom<string, string>>;
4898
4898
  }, z.core.$strict>>;
4899
4899
  capitalization: z.ZodOptional<z.ZodEnum<{
4900
+ small: "small";
4900
4901
  none: "none";
4901
4902
  all: "all";
4902
- small: "small";
4903
4903
  }>>;
4904
4904
  }, z.core.$strict>>;
4905
4905
  }, z.core.$strict>, z.ZodObject<{
@@ -5060,9 +5060,9 @@ declare const AccordionDesignEditorSchema: z.ZodObject<{
5060
5060
  color: z.ZodOptional<z.ZodCustom<string, string>>;
5061
5061
  }, z.core.$strict>>;
5062
5062
  capitalization: z.ZodOptional<z.ZodEnum<{
5063
+ small: "small";
5063
5064
  none: "none";
5064
5065
  all: "all";
5065
- small: "small";
5066
5066
  }>>;
5067
5067
  }, z.core.$strict>>;
5068
5068
  }, z.core.$strict>, z.ZodObject<{
@@ -5323,9 +5323,9 @@ declare const DesignEditorSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
5323
5323
  color: z.ZodOptional<z.ZodCustom<string, string>>;
5324
5324
  }, z.core.$strict>>;
5325
5325
  capitalization: z.ZodOptional<z.ZodEnum<{
5326
+ small: "small";
5326
5327
  none: "none";
5327
5328
  all: "all";
5328
- small: "small";
5329
5329
  }>>;
5330
5330
  }, z.core.$strict>>;
5331
5331
  }, z.core.$strict>, z.ZodObject<{
@@ -5468,9 +5468,9 @@ declare const DesignEditorSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
5468
5468
  color: z.ZodOptional<z.ZodCustom<string, string>>;
5469
5469
  }, z.core.$strict>>;
5470
5470
  capitalization: z.ZodOptional<z.ZodEnum<{
5471
+ small: "small";
5471
5472
  none: "none";
5472
5473
  all: "all";
5473
- small: "small";
5474
5474
  }>>;
5475
5475
  }, z.core.$strict>>;
5476
5476
  }, z.core.$strict>, z.ZodObject<{
@@ -5645,9 +5645,9 @@ declare const DesignSettingsSchema: z.ZodRecord<z.ZodString, z.ZodDiscriminatedU
5645
5645
  color: z.ZodOptional<z.ZodCustom<string, string>>;
5646
5646
  }, z.core.$strict>>;
5647
5647
  capitalization: z.ZodOptional<z.ZodEnum<{
5648
+ small: "small";
5648
5649
  none: "none";
5649
5650
  all: "all";
5650
- small: "small";
5651
5651
  }>>;
5652
5652
  }, z.core.$strict>>;
5653
5653
  }, z.core.$strict>, z.ZodObject<{
@@ -5790,9 +5790,9 @@ declare const DesignSettingsSchema: z.ZodRecord<z.ZodString, z.ZodDiscriminatedU
5790
5790
  color: z.ZodOptional<z.ZodCustom<string, string>>;
5791
5791
  }, z.core.$strict>>;
5792
5792
  capitalization: z.ZodOptional<z.ZodEnum<{
5793
+ small: "small";
5793
5794
  none: "none";
5794
5795
  all: "all";
5795
- small: "small";
5796
5796
  }>>;
5797
5797
  }, z.core.$strict>>;
5798
5798
  }, z.core.$strict>, z.ZodObject<{
@@ -6063,6 +6063,23 @@ interface BackgroundTransformed {
6063
6063
  /** Gradient color configuration */
6064
6064
  gradient: GradientColorTransformed | undefined;
6065
6065
  }
6066
+ /**
6067
+ * Options for `useBackgroundStyle` and `getBackgroundStyle` utils.
6068
+ *
6069
+ * @see {@link BackgroundDesignData}
6070
+ */
6071
+ interface BackgroundStyleOptions {
6072
+ /**
6073
+ * Direction of the gradient
6074
+ * @default 'to right'
6075
+ */
6076
+ direction?: 'to bottom' | 'to right' | 'to left' | 'to top' | string;
6077
+ /**
6078
+ * Fallback color if no background is defined
6079
+ * @default ''
6080
+ */
6081
+ fallbackColor?: string;
6082
+ }
6066
6083
 
6067
6084
  /** Button fill style */
6068
6085
  type ButtonAppearance = 'solid-button' | 'outline-button' | 'text-link';
@@ -6080,7 +6097,7 @@ type ButtonStyle = 'round-corner' | 'rectangle' | 'pill';
6080
6097
  * @see {@link ButtonSize}
6081
6098
  * @see {@link ButtonStyle}
6082
6099
  */
6083
- interface ButtonDesignData {
6100
+ interface ButtonDesignData$1 {
6084
6101
  /** Button fill style: 'solid-button', 'outline-button', or 'text-link' */
6085
6102
  appearance: ButtonAppearance | undefined;
6086
6103
  /** Font family name (resolved from global reference) */
@@ -6090,10 +6107,32 @@ interface ButtonDesignData {
6090
6107
  /** Button shape: 'round-corner', 'rectangle', or 'pill' */
6091
6108
  style: ButtonStyle | undefined;
6092
6109
  /** Button color */
6093
- color: Color | undefined;
6110
+ color: Color$1 | undefined;
6094
6111
  /** `true` if button should be displayed */
6095
6112
  visible: boolean;
6096
6113
  }
6114
+ /**
6115
+ * Size style configuration for a single button size.
6116
+ *
6117
+ * @see {@link UseButtonStylesOptions}
6118
+ */
6119
+ interface ButtonSizeStyles {
6120
+ fontSize: string;
6121
+ padding: string;
6122
+ }
6123
+ /**
6124
+ * Options for `useButtonStyles` helper composable.
6125
+ *
6126
+ * @see {@link ButtonDesignData}
6127
+ * @see {@link ButtonSizeStyles}
6128
+ */
6129
+ interface UseButtonStylesOptions {
6130
+ /**
6131
+ * Custom size styles for each button size.
6132
+ * Override defaults for specific sizes or provide all three.
6133
+ */
6134
+ sizes?: Partial<Record<ButtonSize, ButtonSizeStyles>>;
6135
+ }
6097
6136
 
6098
6137
  type AccordionItem = z.infer<typeof AccordionDesignItemSchema>;
6099
6138
  type ShowcaseAccordionItem = z.infer<typeof AccordionShowcaseItemSchema>;
@@ -6193,7 +6232,7 @@ interface TextDesignData$1 {
6193
6232
  /** `true` if text should be italic */
6194
6233
  italic: boolean | undefined;
6195
6234
  /** Text color */
6196
- color: Color | undefined;
6235
+ color: Color$1 | undefined;
6197
6236
  /** `true` if element should be displayed */
6198
6237
  visible: boolean;
6199
6238
  }
@@ -6209,6 +6248,33 @@ interface TextareaDesignData$1 extends TextDesignData$1 {
6209
6248
  /** Always 'pre-wrap' to preserve line breaks */
6210
6249
  readonly whiteSpace: string;
6211
6250
  }
6251
+ /**
6252
+ * Options for `createTextStyle` helper utility.
6253
+ *
6254
+ * @see {@link TextDesignData}
6255
+ */
6256
+ interface TextStyleOptions {
6257
+ /**
6258
+ * Default font family if not specified in design
6259
+ * @default 'inherit'
6260
+ */
6261
+ defaultFont?: string;
6262
+ /**
6263
+ * Default font size in pixels if not specified in design
6264
+ * @default 16
6265
+ */
6266
+ defaultSize?: number;
6267
+ /**
6268
+ * Default color if not specified in design
6269
+ * @default '#000000'
6270
+ */
6271
+ defaultColor?: string;
6272
+ /**
6273
+ * Default font weight if not bold
6274
+ * @default 'normal'
6275
+ */
6276
+ defaultWeight?: string;
6277
+ }
6212
6278
 
6213
6279
  /**
6214
6280
  * Return type for `useToggleElementDesign` composable.
@@ -6267,7 +6333,7 @@ interface LogoDesignData$1 {
6267
6333
  /** `true` if text should be italic */
6268
6334
  italic: boolean | undefined;
6269
6335
  /** Text/logo color */
6270
- color: Color | undefined;
6336
+ color: Color$1 | undefined;
6271
6337
  /** `true` if logo should be displayed */
6272
6338
  visible: boolean | undefined;
6273
6339
  /** Letter spacing value */
@@ -6379,9 +6445,9 @@ declare const LayoutDesignOverrideSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
6379
6445
  color: z.ZodOptional<z.ZodCustom<string, string>>;
6380
6446
  }, z.core.$strict>>;
6381
6447
  capitalization: z.ZodOptional<z.ZodEnum<{
6448
+ small: "small";
6382
6449
  none: "none";
6383
6450
  all: "all";
6384
- small: "small";
6385
6451
  }>>;
6386
6452
  }, z.core.$strict>>;
6387
6453
  }, z.core.$strict>, z.ZodObject<{
@@ -6599,9 +6665,9 @@ declare const LayoutSettingsSchema: z.ZodObject<{
6599
6665
  color: z.ZodOptional<z.ZodCustom<string, string>>;
6600
6666
  }, z.core.$strict>>;
6601
6667
  capitalization: z.ZodOptional<z.ZodEnum<{
6668
+ small: "small";
6602
6669
  none: "none";
6603
6670
  all: "all";
6604
- small: "small";
6605
6671
  }>>;
6606
6672
  }, z.core.$strict>>;
6607
6673
  }, z.core.$strict>, z.ZodObject<{
@@ -7304,9 +7370,9 @@ declare const ManifestSchema: z.ZodObject<{
7304
7370
  color: z.ZodOptional<z.ZodCustom<string, string>>;
7305
7371
  }, z.core.$strict>>;
7306
7372
  capitalization: z.ZodOptional<z.ZodEnum<{
7373
+ small: "small";
7307
7374
  none: "none";
7308
7375
  all: "all";
7309
- small: "small";
7310
7376
  }>>;
7311
7377
  }, z.core.$strict>>;
7312
7378
  }, z.core.$strict>, z.ZodObject<{
@@ -7449,9 +7515,9 @@ declare const ManifestSchema: z.ZodObject<{
7449
7515
  color: z.ZodOptional<z.ZodCustom<string, string>>;
7450
7516
  }, z.core.$strict>>;
7451
7517
  capitalization: z.ZodOptional<z.ZodEnum<{
7518
+ small: "small";
7452
7519
  none: "none";
7453
7520
  all: "all";
7454
- small: "small";
7455
7521
  }>>;
7456
7522
  }, z.core.$strict>>;
7457
7523
  }, z.core.$strict>, z.ZodObject<{
@@ -7689,9 +7755,9 @@ declare const ManifestSchema: z.ZodObject<{
7689
7755
  color: z.ZodOptional<z.ZodCustom<string, string>>;
7690
7756
  }, z.core.$strict>>;
7691
7757
  capitalization: z.ZodOptional<z.ZodEnum<{
7758
+ small: "small";
7692
7759
  none: "none";
7693
7760
  all: "all";
7694
- small: "small";
7695
7761
  }>>;
7696
7762
  }, z.core.$strict>>;
7697
7763
  }, z.core.$strict>, z.ZodObject<{
@@ -8079,9 +8145,9 @@ declare const ManifestSchema: z.ZodObject<{
8079
8145
  color: z.ZodOptional<z.ZodCustom<string, string>>;
8080
8146
  }, z.core.$strict>>;
8081
8147
  capitalization: z.ZodOptional<z.ZodEnum<{
8148
+ small: "small";
8082
8149
  none: "none";
8083
8150
  all: "all";
8084
- small: "small";
8085
8151
  }>>;
8086
8152
  }, z.core.$strict>, z.ZodObject<{
8087
8153
  type: z.ZodLiteral<"DIVIDER">;
@@ -8156,9 +8222,9 @@ declare const ManifestSchema: z.ZodObject<{
8156
8222
  color: z.ZodOptional<z.ZodCustom<string, string>>;
8157
8223
  }, z.core.$strict>>;
8158
8224
  capitalization: z.ZodOptional<z.ZodEnum<{
8225
+ small: "small";
8159
8226
  none: "none";
8160
8227
  all: "all";
8161
- small: "small";
8162
8228
  }>>;
8163
8229
  }, z.core.$strict>, z.ZodObject<{
8164
8230
  type: z.ZodLiteral<"DIVIDER">;
@@ -8584,9 +8650,9 @@ declare const ManifestSchema: z.ZodObject<{
8584
8650
  color: z.ZodOptional<z.ZodCustom<string, string>>;
8585
8651
  }, z.core.$strict>>;
8586
8652
  capitalization: z.ZodOptional<z.ZodEnum<{
8653
+ small: "small";
8587
8654
  none: "none";
8588
8655
  all: "all";
8589
- small: "small";
8590
8656
  }>>;
8591
8657
  }, z.core.$strict>, z.ZodObject<{
8592
8658
  type: z.ZodLiteral<"DIVIDER">;
@@ -8661,9 +8727,9 @@ declare const ManifestSchema: z.ZodObject<{
8661
8727
  color: z.ZodOptional<z.ZodCustom<string, string>>;
8662
8728
  }, z.core.$strict>>;
8663
8729
  capitalization: z.ZodOptional<z.ZodEnum<{
8730
+ small: "small";
8664
8731
  none: "none";
8665
8732
  all: "all";
8666
- small: "small";
8667
8733
  }>>;
8668
8734
  }, z.core.$strict>, z.ZodObject<{
8669
8735
  type: z.ZodLiteral<"DIVIDER">;
@@ -9031,9 +9097,9 @@ declare const ManifestSchema: z.ZodObject<{
9031
9097
  color: z.ZodOptional<z.ZodCustom<string, string>>;
9032
9098
  }, z.core.$strict>>;
9033
9099
  capitalization: z.ZodOptional<z.ZodEnum<{
9100
+ small: "small";
9034
9101
  none: "none";
9035
9102
  all: "all";
9036
- small: "small";
9037
9103
  }>>;
9038
9104
  }, z.core.$strict>, z.ZodObject<{
9039
9105
  type: z.ZodLiteral<"DIVIDER">;
@@ -9108,9 +9174,9 @@ declare const ManifestSchema: z.ZodObject<{
9108
9174
  color: z.ZodOptional<z.ZodCustom<string, string>>;
9109
9175
  }, z.core.$strict>>;
9110
9176
  capitalization: z.ZodOptional<z.ZodEnum<{
9177
+ small: "small";
9111
9178
  none: "none";
9112
9179
  all: "all";
9113
- small: "small";
9114
9180
  }>>;
9115
9181
  }, z.core.$strict>, z.ZodObject<{
9116
9182
  type: z.ZodLiteral<"DIVIDER">;
@@ -9483,9 +9549,9 @@ declare const ManifestSchema: z.ZodObject<{
9483
9549
  color: z.ZodOptional<z.ZodCustom<string, string>>;
9484
9550
  }, z.core.$strict>>;
9485
9551
  capitalization: z.ZodOptional<z.ZodEnum<{
9552
+ small: "small";
9486
9553
  none: "none";
9487
9554
  all: "all";
9488
- small: "small";
9489
9555
  }>>;
9490
9556
  }, z.core.$strict>, z.ZodObject<{
9491
9557
  type: z.ZodLiteral<"DIVIDER">;
@@ -9560,9 +9626,9 @@ declare const ManifestSchema: z.ZodObject<{
9560
9626
  color: z.ZodOptional<z.ZodCustom<string, string>>;
9561
9627
  }, z.core.$strict>>;
9562
9628
  capitalization: z.ZodOptional<z.ZodEnum<{
9629
+ small: "small";
9563
9630
  none: "none";
9564
9631
  all: "all";
9565
- small: "small";
9566
9632
  }>>;
9567
9633
  }, z.core.$strict>, z.ZodObject<{
9568
9634
  type: z.ZodLiteral<"DIVIDER">;
@@ -10256,9 +10322,9 @@ declare const ManifestSchema: z.ZodObject<{
10256
10322
  color: z.ZodOptional<z.ZodCustom<string, string>>;
10257
10323
  }, z.core.$strict>>;
10258
10324
  capitalization: z.ZodOptional<z.ZodEnum<{
10325
+ small: "small";
10259
10326
  none: "none";
10260
10327
  all: "all";
10261
- small: "small";
10262
10328
  }>>;
10263
10329
  }, z.core.$strict>>;
10264
10330
  }, z.core.$strict>, z.ZodObject<{
@@ -10401,9 +10467,9 @@ declare const ManifestSchema: z.ZodObject<{
10401
10467
  color: z.ZodOptional<z.ZodCustom<string, string>>;
10402
10468
  }, z.core.$strict>>;
10403
10469
  capitalization: z.ZodOptional<z.ZodEnum<{
10470
+ small: "small";
10404
10471
  none: "none";
10405
10472
  all: "all";
10406
- small: "small";
10407
10473
  }>>;
10408
10474
  }, z.core.$strict>>;
10409
10475
  }, z.core.$strict>, z.ZodObject<{
@@ -10642,9 +10708,9 @@ declare const ManifestSchema: z.ZodObject<{
10642
10708
  color: z.ZodOptional<z.ZodCustom<string, string>>;
10643
10709
  }, z.core.$strict>>;
10644
10710
  capitalization: z.ZodOptional<z.ZodEnum<{
10711
+ small: "small";
10645
10712
  none: "none";
10646
10713
  all: "all";
10647
- small: "small";
10648
10714
  }>>;
10649
10715
  }, z.core.$strict>>;
10650
10716
  }, z.core.$strict>, z.ZodObject<{
@@ -11064,9 +11130,9 @@ declare const ManifestSchema: z.ZodObject<{
11064
11130
  color: z.ZodOptional<z.ZodCustom<string, string>>;
11065
11131
  }, z.core.$strict>>;
11066
11132
  capitalization: z.ZodOptional<z.ZodEnum<{
11133
+ small: "small";
11067
11134
  none: "none";
11068
11135
  all: "all";
11069
- small: "small";
11070
11136
  }>>;
11071
11137
  }, z.core.$strict>, z.ZodObject<{
11072
11138
  type: z.ZodLiteral<"DIVIDER">;
@@ -11141,9 +11207,9 @@ declare const ManifestSchema: z.ZodObject<{
11141
11207
  color: z.ZodOptional<z.ZodCustom<string, string>>;
11142
11208
  }, z.core.$strict>>;
11143
11209
  capitalization: z.ZodOptional<z.ZodEnum<{
11210
+ small: "small";
11144
11211
  none: "none";
11145
11212
  all: "all";
11146
- small: "small";
11147
11213
  }>>;
11148
11214
  }, z.core.$strict>, z.ZodObject<{
11149
11215
  type: z.ZodLiteral<"DIVIDER">;
@@ -11550,9 +11616,9 @@ declare const CustomSectionSchema: z.ZodObject<{
11550
11616
  color: z.ZodOptional<z.ZodCustom<string, string>>;
11551
11617
  }, z.core.$strict>>;
11552
11618
  capitalization: z.ZodOptional<z.ZodEnum<{
11619
+ small: "small";
11553
11620
  none: "none";
11554
11621
  all: "all";
11555
- small: "small";
11556
11622
  }>>;
11557
11623
  }, z.core.$strict>, z.ZodObject<{
11558
11624
  type: z.ZodLiteral<"DIVIDER">;
@@ -11627,9 +11693,9 @@ declare const CustomSectionSchema: z.ZodObject<{
11627
11693
  color: z.ZodOptional<z.ZodCustom<string, string>>;
11628
11694
  }, z.core.$strict>>;
11629
11695
  capitalization: z.ZodOptional<z.ZodEnum<{
11696
+ small: "small";
11630
11697
  none: "none";
11631
11698
  all: "all";
11632
- small: "small";
11633
11699
  }>>;
11634
11700
  }, z.core.$strict>, z.ZodObject<{
11635
11701
  type: z.ZodLiteral<"DIVIDER">;
@@ -12001,9 +12067,9 @@ declare const SectionSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
12001
12067
  color: z.ZodOptional<z.ZodCustom<string, string>>;
12002
12068
  }, z.core.$strict>>;
12003
12069
  capitalization: z.ZodOptional<z.ZodEnum<{
12070
+ small: "small";
12004
12071
  none: "none";
12005
12072
  all: "all";
12006
- small: "small";
12007
12073
  }>>;
12008
12074
  }, z.core.$strict>, z.ZodObject<{
12009
12075
  type: z.ZodLiteral<"DIVIDER">;
@@ -12078,9 +12144,9 @@ declare const SectionSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
12078
12144
  color: z.ZodOptional<z.ZodCustom<string, string>>;
12079
12145
  }, z.core.$strict>>;
12080
12146
  capitalization: z.ZodOptional<z.ZodEnum<{
12147
+ small: "small";
12081
12148
  none: "none";
12082
12149
  all: "all";
12083
- small: "small";
12084
12150
  }>>;
12085
12151
  }, z.core.$strict>, z.ZodObject<{
12086
12152
  type: z.ZodLiteral<"DIVIDER">;
@@ -12455,9 +12521,9 @@ declare const TemplatePageSchema: z.ZodObject<{
12455
12521
  color: z.ZodOptional<z.ZodCustom<string, string>>;
12456
12522
  }, z.core.$strict>>;
12457
12523
  capitalization: z.ZodOptional<z.ZodEnum<{
12524
+ small: "small";
12458
12525
  none: "none";
12459
12526
  all: "all";
12460
- small: "small";
12461
12527
  }>>;
12462
12528
  }, z.core.$strict>, z.ZodObject<{
12463
12529
  type: z.ZodLiteral<"DIVIDER">;
@@ -12532,9 +12598,9 @@ declare const TemplatePageSchema: z.ZodObject<{
12532
12598
  color: z.ZodOptional<z.ZodCustom<string, string>>;
12533
12599
  }, z.core.$strict>>;
12534
12600
  capitalization: z.ZodOptional<z.ZodEnum<{
12601
+ small: "small";
12535
12602
  none: "none";
12536
12603
  all: "all";
12537
- small: "small";
12538
12604
  }>>;
12539
12605
  }, z.core.$strict>, z.ZodObject<{
12540
12606
  type: z.ZodLiteral<"DIVIDER">;
@@ -12910,9 +12976,9 @@ declare const TemplatePageNamedSchema: z.ZodObject<{
12910
12976
  color: z.ZodOptional<z.ZodCustom<string, string>>;
12911
12977
  }, z.core.$strict>>;
12912
12978
  capitalization: z.ZodOptional<z.ZodEnum<{
12979
+ small: "small";
12913
12980
  none: "none";
12914
12981
  all: "all";
12915
- small: "small";
12916
12982
  }>>;
12917
12983
  }, z.core.$strict>, z.ZodObject<{
12918
12984
  type: z.ZodLiteral<"DIVIDER">;
@@ -12987,9 +13053,9 @@ declare const TemplatePageNamedSchema: z.ZodObject<{
12987
13053
  color: z.ZodOptional<z.ZodCustom<string, string>>;
12988
13054
  }, z.core.$strict>>;
12989
13055
  capitalization: z.ZodOptional<z.ZodEnum<{
13056
+ small: "small";
12990
13057
  none: "none";
12991
13058
  all: "all";
12992
- small: "small";
12993
13059
  }>>;
12994
13060
  }, z.core.$strict>, z.ZodObject<{
12995
13061
  type: z.ZodLiteral<"DIVIDER">;
@@ -13425,9 +13491,9 @@ declare const TemplateConfigurationSectionSchema: z.ZodDiscriminatedUnion<[z.Zod
13425
13491
  color: z.ZodOptional<z.ZodCustom<string, string>>;
13426
13492
  }, z.core.$strict>>;
13427
13493
  capitalization: z.ZodOptional<z.ZodEnum<{
13494
+ small: "small";
13428
13495
  none: "none";
13429
13496
  all: "all";
13430
- small: "small";
13431
13497
  }>>;
13432
13498
  }, z.core.$strict>, z.ZodObject<{
13433
13499
  type: z.ZodLiteral<"DIVIDER">;
@@ -13502,9 +13568,9 @@ declare const TemplateConfigurationSectionSchema: z.ZodDiscriminatedUnion<[z.Zod
13502
13568
  color: z.ZodOptional<z.ZodCustom<string, string>>;
13503
13569
  }, z.core.$strict>>;
13504
13570
  capitalization: z.ZodOptional<z.ZodEnum<{
13571
+ small: "small";
13505
13572
  none: "none";
13506
13573
  all: "all";
13507
- small: "small";
13508
13574
  }>>;
13509
13575
  }, z.core.$strict>, z.ZodObject<{
13510
13576
  type: z.ZodLiteral<"DIVIDER">;
@@ -13929,9 +13995,9 @@ declare const TemplateConfigurationSchema: z.ZodObject<{
13929
13995
  color: z.ZodOptional<z.ZodCustom<string, string>>;
13930
13996
  }, z.core.$strict>>;
13931
13997
  capitalization: z.ZodOptional<z.ZodEnum<{
13998
+ small: "small";
13932
13999
  none: "none";
13933
14000
  all: "all";
13934
- small: "small";
13935
14001
  }>>;
13936
14002
  }, z.core.$strict>, z.ZodObject<{
13937
14003
  type: z.ZodLiteral<"DIVIDER">;
@@ -14006,9 +14072,9 @@ declare const TemplateConfigurationSchema: z.ZodObject<{
14006
14072
  color: z.ZodOptional<z.ZodCustom<string, string>>;
14007
14073
  }, z.core.$strict>>;
14008
14074
  capitalization: z.ZodOptional<z.ZodEnum<{
14075
+ small: "small";
14009
14076
  none: "none";
14010
14077
  all: "all";
14011
- small: "small";
14012
14078
  }>>;
14013
14079
  }, z.core.$strict>, z.ZodObject<{
14014
14080
  type: z.ZodLiteral<"DIVIDER">;
@@ -14376,9 +14442,9 @@ declare const TemplateConfigurationSchema: z.ZodObject<{
14376
14442
  color: z.ZodOptional<z.ZodCustom<string, string>>;
14377
14443
  }, z.core.$strict>>;
14378
14444
  capitalization: z.ZodOptional<z.ZodEnum<{
14445
+ small: "small";
14379
14446
  none: "none";
14380
14447
  all: "all";
14381
- small: "small";
14382
14448
  }>>;
14383
14449
  }, z.core.$strict>, z.ZodObject<{
14384
14450
  type: z.ZodLiteral<"DIVIDER">;
@@ -14453,9 +14519,9 @@ declare const TemplateConfigurationSchema: z.ZodObject<{
14453
14519
  color: z.ZodOptional<z.ZodCustom<string, string>>;
14454
14520
  }, z.core.$strict>>;
14455
14521
  capitalization: z.ZodOptional<z.ZodEnum<{
14522
+ small: "small";
14456
14523
  none: "none";
14457
14524
  all: "all";
14458
- small: "small";
14459
14525
  }>>;
14460
14526
  }, z.core.$strict>, z.ZodObject<{
14461
14527
  type: z.ZodLiteral<"DIVIDER">;
@@ -14887,9 +14953,9 @@ declare const TemplateSchema: z.ZodObject<{
14887
14953
  color: z.ZodOptional<z.ZodCustom<string, string>>;
14888
14954
  }, z.core.$strict>>;
14889
14955
  capitalization: z.ZodOptional<z.ZodEnum<{
14956
+ small: "small";
14890
14957
  none: "none";
14891
14958
  all: "all";
14892
- small: "small";
14893
14959
  }>>;
14894
14960
  }, z.core.$strict>, z.ZodObject<{
14895
14961
  type: z.ZodLiteral<"DIVIDER">;
@@ -14964,9 +15030,9 @@ declare const TemplateSchema: z.ZodObject<{
14964
15030
  color: z.ZodOptional<z.ZodCustom<string, string>>;
14965
15031
  }, z.core.$strict>>;
14966
15032
  capitalization: z.ZodOptional<z.ZodEnum<{
15033
+ small: "small";
14967
15034
  none: "none";
14968
15035
  all: "all";
14969
- small: "small";
14970
15036
  }>>;
14971
15037
  }, z.core.$strict>, z.ZodObject<{
14972
15038
  type: z.ZodLiteral<"DIVIDER">;
@@ -15334,9 +15400,9 @@ declare const TemplateSchema: z.ZodObject<{
15334
15400
  color: z.ZodOptional<z.ZodCustom<string, string>>;
15335
15401
  }, z.core.$strict>>;
15336
15402
  capitalization: z.ZodOptional<z.ZodEnum<{
15403
+ small: "small";
15337
15404
  none: "none";
15338
15405
  all: "all";
15339
- small: "small";
15340
15406
  }>>;
15341
15407
  }, z.core.$strict>, z.ZodObject<{
15342
15408
  type: z.ZodLiteral<"DIVIDER">;
@@ -15411,9 +15477,9 @@ declare const TemplateSchema: z.ZodObject<{
15411
15477
  color: z.ZodOptional<z.ZodCustom<string, string>>;
15412
15478
  }, z.core.$strict>>;
15413
15479
  capitalization: z.ZodOptional<z.ZodEnum<{
15480
+ small: "small";
15414
15481
  none: "none";
15415
15482
  all: "all";
15416
- small: "small";
15417
15483
  }>>;
15418
15484
  }, z.core.$strict>, z.ZodObject<{
15419
15485
  type: z.ZodLiteral<"DIVIDER">;
@@ -15786,9 +15852,9 @@ declare const TemplateSchema: z.ZodObject<{
15786
15852
  color: z.ZodOptional<z.ZodCustom<string, string>>;
15787
15853
  }, z.core.$strict>>;
15788
15854
  capitalization: z.ZodOptional<z.ZodEnum<{
15855
+ small: "small";
15789
15856
  none: "none";
15790
15857
  all: "all";
15791
- small: "small";
15792
15858
  }>>;
15793
15859
  }, z.core.$strict>, z.ZodObject<{
15794
15860
  type: z.ZodLiteral<"DIVIDER">;
@@ -15863,9 +15929,9 @@ declare const TemplateSchema: z.ZodObject<{
15863
15929
  color: z.ZodOptional<z.ZodCustom<string, string>>;
15864
15930
  }, z.core.$strict>>;
15865
15931
  capitalization: z.ZodOptional<z.ZodEnum<{
15932
+ small: "small";
15866
15933
  none: "none";
15867
15934
  all: "all";
15868
- small: "small";
15869
15935
  }>>;
15870
15936
  }, z.core.$strict>, z.ZodObject<{
15871
15937
  type: z.ZodLiteral<"DIVIDER">;
@@ -15952,6 +16018,17 @@ type TemplateConfiguration = z.infer<typeof TemplateConfigurationSchema>;
15952
16018
 
15953
16019
  type TranslationSettings = Record<string, Record<string, string>>;
15954
16020
 
16021
+ /**
16022
+ * Return type for `useCurrentLanguage` composable.
16023
+ */
16024
+ interface UseCurrentLanguageReturn {
16025
+ /**
16026
+ * Current language code (e.g., 'en', 'nl', 'fr').
16027
+ * Falls back to main language, then to 'en' if no language is selected.
16028
+ */
16029
+ currentLanguage: ComputedRef<Language['code']>;
16030
+ }
16031
+
15955
16032
  interface AppBaseContext {
15956
16033
  readonly appName: string;
15957
16034
  readonly blockName: string;
@@ -15986,72 +16063,6 @@ declare function createVueClientApp<C, D>(appComponent: Component, extensions?:
15986
16063
  };
15987
16064
  };
15988
16065
 
15989
- interface InstantsiteTilePromise {
15990
- add(callback: (id: string) => void): void;
15991
- }
15992
- interface InstantsiteJSAPI {
15993
- /**
15994
- * Retrieves the current site ID.
15995
- *
15996
- * @returns {number} The site ID.
15997
- */
15998
- getSiteId: () => number;
15999
- /**
16000
- * Retrieves the public token for a given app.
16001
- *
16002
- * @param {string} appId - The ID of the app.
16003
- * @returns {string | undefined} The app's public token, or `undefined` if not found.
16004
- */
16005
- getAppPublicToken: (appId: string) => string | undefined;
16006
- /**
16007
- * Retrieves the public configuration for a given app.
16008
- *
16009
- * @param {string} appId - The ID of the app.
16010
- * @returns {string | undefined} The app's public configuration, or `undefined` if not found.
16011
- */
16012
- getAppPublicConfig: (appId: string) => string | undefined;
16013
- /**
16014
- * An event that triggers when a tile is loaded.
16015
- *
16016
- * @type {InstantsiteTilePromise}
16017
- *
16018
- * @example
16019
- * ```ts
16020
- * const tileLoadedPromise = instantsiteJsApi?.onTileLoaded;
16021
- *
16022
- * tileLoadedPromise?.add((tileId) => {
16023
- * console.log('Tile loaded:', tileId);
16024
- * });
16025
- * ```
16026
- */
16027
- onTileLoaded: InstantsiteTilePromise;
16028
- /**
16029
- * An event that triggers when a tile is unloaded.
16030
- *
16031
- * @type {InstantsiteTilePromise}
16032
- *
16033
- * @example
16034
- * ```ts
16035
- * const tileUnloadedPromise = instantsiteJsApi?.onTileUnloaded;
16036
- *
16037
- * tileUnloadedPromise?.add((tileId) => {
16038
- * console.log('Tile unloaded:', tileId);
16039
- * });
16040
- * ```
16041
- */
16042
- onTileUnloaded: InstantsiteTilePromise;
16043
- /**
16044
- * Opens the search page with the specified keyword.
16045
- *
16046
- * @param {string | undefined} keyword - The keyword to search for.
16047
- * @returns {void}
16048
- */
16049
- openSearchPage: (keyword: string | undefined) => void;
16050
- }
16051
-
16052
- /** Composable for Instantsite JS API. Returns `window.instantsite` for platform interaction. */
16053
- declare function useInstantsiteJsApi(): InstantsiteJSAPI | undefined;
16054
-
16055
16066
  declare function createLayoutApp<C, D>(component: Component): {
16056
16067
  component: Component;
16057
16068
  initState(app: App<Element>, content: C, design: D, defaults: Record<string, unknown>): void;
@@ -16059,11 +16070,11 @@ declare function createLayoutApp<C, D>(component: Component): {
16059
16070
  };
16060
16071
 
16061
16072
  interface GlobalColors {
16062
- title?: Color;
16063
- body?: Color;
16064
- button?: Color;
16065
- link?: Color;
16066
- background?: Color;
16073
+ title?: Color$1;
16074
+ body?: Color$1;
16075
+ button?: Color$1;
16076
+ link?: Color$1;
16077
+ background?: Color$1;
16067
16078
  }
16068
16079
  interface GlobalFonts {
16069
16080
  title: string;
@@ -16124,6 +16135,302 @@ declare function createVueServerApp<C, D>(appComponent: Component, extensions?:
16124
16135
  };
16125
16136
  };
16126
16137
 
16138
+ /**
16139
+ * Color Utilities
16140
+ *
16141
+ * Utilities for working with Crane Color objects and color calculations.
16142
+ * Includes hex extraction and contrast color calculation.
16143
+ */
16144
+ /**
16145
+ * Safely extracts hex color from a Color object or string
16146
+ *
16147
+ * Handles multiple input types:
16148
+ * - Color object with hex property
16149
+ * - String (returned as-is)
16150
+ * - undefined/null (returns fallback)
16151
+ *
16152
+ * @param color - The color value (Color object, string, or undefined)
16153
+ * @param fallback - Fallback color if extraction fails
16154
+ * @returns Hex color string
16155
+ *
16156
+ * @example
16157
+ * ```typescript
16158
+ * // With Color object
16159
+ * const hex = getColorHex(titleDesign.color, '#FFFFFF')
16160
+ *
16161
+ * // With string
16162
+ * const hex = getColorHex('#FF0000', '#000000') // Returns '#FF0000'
16163
+ *
16164
+ * // With undefined
16165
+ * const hex = getColorHex(undefined, '#000000') // Returns '#000000'
16166
+ * ```
16167
+ */
16168
+ declare function getColorHex(color: Color | string | undefined | null, fallback?: string): string;
16169
+ /**
16170
+ * Returns true if background color is dark enough to require light text.
16171
+ * Uses WCAG relative luminance formula for accurate contrast calculation.
16172
+ *
16173
+ * @param backgroundColor - Hex color string (e.g., '#FF0000')
16174
+ * @returns `true` for dark colors, `false` for light colors
16175
+ */
16176
+ declare function isColorDark(backgroundColor: string): boolean;
16177
+ /**
16178
+ * Returns the best contrast text color for a given background.
16179
+ *
16180
+ * @param backgroundColorHex - Hex color string
16181
+ * @param darkTextColorHex - Color used on light backgrounds
16182
+ * @param lightTextColorHex - Color used on dark backgrounds
16183
+ */
16184
+ declare function getContrastTextColor(backgroundColorHex: string, darkTextColorHex?: string, lightTextColorHex?: string): string;
16185
+
16186
+ /**
16187
+ * Text Style Utilities
16188
+ *
16189
+ * Utilities for creating CSS styles from Crane TextDesignData.
16190
+ */
16191
+
16192
+ /**
16193
+ * Creates CSS properties from Crane TextDesignData
16194
+ *
16195
+ * Handles:
16196
+ * - Font family
16197
+ * - Font size (number to px conversion)
16198
+ * - Color (Color object to hex)
16199
+ * - Bold/Italic styles
16200
+ * - Visibility (returns display: none if not visible)
16201
+ *
16202
+ * @param design - TextDesignData from useTextElementDesign
16203
+ * @param options - Default values for missing design properties
16204
+ * @returns CSS properties object for Vue style binding
16205
+ *
16206
+ * @example
16207
+ * ```typescript
16208
+ * import { createTextStyle } from '@lightspeed/crane-api'
16209
+ * import { useTextElementDesign } from '@lightspeed/crane-api'
16210
+ *
16211
+ * const titleDesign = useTextElementDesign<Design>('title')
16212
+ * const titleStyle = computed(() => createTextStyle(titleDesign, {
16213
+ * defaultFont: 'Inter',
16214
+ * defaultSize: 24,
16215
+ * defaultColor: '#333333',
16216
+ * }))
16217
+ *
16218
+ * // In template:
16219
+ * // <h1 :style="titleStyle">{{ title }}</h1>
16220
+ * ```
16221
+ */
16222
+ declare function createTextStyle(design: TextDesignData | undefined, options?: TextStyleOptions): CSSProperties;
16223
+
16224
+ /**
16225
+ * useBackgroundStyle Composable
16226
+ *
16227
+ * Creates reactive CSS background styles from Crane BackgroundDesignData.
16228
+ * Supports solid colors and gradients.
16229
+ *
16230
+ * @example
16231
+ * ```typescript
16232
+ * import { useBackgroundStyle } from '@lightspeed/crane-api'
16233
+ * import { useBackgroundElementDesign } from '@lightspeed/crane-api'
16234
+ *
16235
+ * const backgroundDesign = useBackgroundElementDesign<Design>('background')
16236
+ * const backgroundStyle = useBackgroundStyle(backgroundDesign)
16237
+ *
16238
+ * // In template:
16239
+ * // <div :style="backgroundStyle">...</div>
16240
+ * ```
16241
+ */
16242
+
16243
+ /**
16244
+ * Extracts background styles from BackgroundDesignData.
16245
+ *
16246
+ * Returns a style object suitable for CSS `:style` bindings.
16247
+ *
16248
+ * **Gradient fallback behaviour:**
16249
+ * When `background.type === 'gradient'`, each of `fromColor` and `toColor` is resolved
16250
+ * independently via `getColorHex`. If a color is missing/undefined and `fallbackColor` is
16251
+ * an empty string (the default), `getColorHex` returns `''` and the whole style object is
16252
+ * returned as `{}`. If `fallbackColor` is a non-empty string, the missing color is replaced
16253
+ * by that fallback, which may result in a gradient where both stops are the same colour
16254
+ * (e.g. `linear-gradient(to right, #FFFFFF, #FFFFFF)`). This is valid CSS and visually
16255
+ * equivalent to a solid colour, but it is worth being aware of when debugging gradient output.
16256
+ *
16257
+ * @param backgroundDesign - BackgroundDesignData from useBackgroundElementDesign
16258
+ * @param options - Configuration options
16259
+ * @returns CSS background style object
16260
+ *
16261
+ * @example
16262
+ * ```typescript
16263
+ * const backgroundDesign = useBackgroundElementDesign<Design>('background')
16264
+ * const bgStyle = getBackgroundStyle(backgroundDesign, { fallbackColor: '#FFFFFF' })
16265
+ * // Returns: { backgroundColor: '#FF0000' } or { backgroundImage: 'linear-gradient(...)' }
16266
+ * // If one gradient colour is missing and fallbackColor is '#FFFFFF':
16267
+ * // Returns: { backgroundImage: 'linear-gradient(to right, #FFFFFF, #FFFFFF)' }
16268
+ * ```
16269
+ */
16270
+ declare function getBackgroundStyle(backgroundDesign: BackgroundDesignData | undefined, options?: BackgroundStyleOptions): StyleValue;
16271
+ /**
16272
+ * Creates reactive background styles from Crane BackgroundDesignData
16273
+ *
16274
+ * Supports solid colors and gradients. Returns a computed style object
16275
+ * that can be bound directly to :style attribute.
16276
+ *
16277
+ * @param backgroundDesign - Reactive BackgroundDesignData from useBackgroundElementDesign.
16278
+ * Must be a reactive object (not a plain snapshot) for changes to be tracked.
16279
+ * @param options - Configuration options
16280
+ * @returns Computed style object with backgroundColor or backgroundImage
16281
+ *
16282
+ * @example
16283
+ * ```typescript
16284
+ * const backgroundDesign = useBackgroundElementDesign<Design>('background')
16285
+ * const backgroundStyle = useBackgroundStyle(backgroundDesign)
16286
+ *
16287
+ * // In template:
16288
+ * // <div :style="backgroundStyle">...</div>
16289
+ * ```
16290
+ */
16291
+ declare function useBackgroundStyle(backgroundDesign: Reactive<BackgroundDesignData> | BackgroundDesignData | undefined, options?: BackgroundStyleOptions): ComputedRef<StyleValue>;
16292
+
16293
+ /**
16294
+ * useButtonStyles Composable
16295
+ *
16296
+ * Generates dynamic button styles based on Crane's ButtonDesignData.
16297
+ * Handles size, appearance, shape, and automatic contrast text color.
16298
+ *
16299
+ * @example
16300
+ * ```typescript
16301
+ * import { useButtonStyles } from '@lightspeed/crane-api'
16302
+ * import { useButtonElementDesign } from '@lightspeed/crane-api'
16303
+ *
16304
+ * const ctaButtonDesign = useButtonElementDesign<Design>('cta_button')
16305
+ * const ctaButtonStyle = useButtonStyles(ctaButtonDesign)
16306
+ *
16307
+ * // In template:
16308
+ * // <button :style="ctaButtonStyle">Click me</button>
16309
+ * ```
16310
+ */
16311
+
16312
+ /**
16313
+ * Generates dynamic button styles based on Crane's button design data
16314
+ *
16315
+ * Handles:
16316
+ * - Size: 'small', 'medium', 'large' (configurable via options)
16317
+ * - Appearance: 'solid-button', 'outline-button', 'text-link'
16318
+ * - Style (shape): 'rectangle', 'round-corner', 'pill'
16319
+ *
16320
+ * @param buttonDesign - Reactive button design data from useButtonElementDesign.
16321
+ * Must be a reactive object (not a plain snapshot) for changes to be tracked.
16322
+ * @param options - Optional configuration (e.g., custom size styles)
16323
+ * @returns Computed style object for inline application
16324
+ */
16325
+ declare function useButtonStyles(buttonDesign: Reactive<ButtonDesignData> | Partial<ButtonDesignData> | undefined, options?: UseButtonStylesOptions): ComputedRef<Record<string, string>>;
16326
+
16327
+ /**
16328
+ * useCurrentLanguage Composable
16329
+ *
16330
+ * Provides access to the current language from site context.
16331
+ * Useful for i18n, API calls with language parameter, and conditional rendering.
16332
+ *
16333
+ * @example
16334
+ * ```typescript
16335
+ * import { useCurrentLanguage } from '@lightspeed/crane-api'
16336
+ *
16337
+ * const { currentLanguage } = useCurrentLanguage()
16338
+ *
16339
+ * // Use in API calls
16340
+ * fetchProducts({ lang: currentLanguage.value })
16341
+ *
16342
+ * // Use in computed
16343
+ * const greeting = computed(() =>
16344
+ * currentLanguage.value === 'fr' ? 'Bonjour' : 'Hello'
16345
+ * )
16346
+ * ```
16347
+ */
16348
+
16349
+ /**
16350
+ * Get current selected language code from site languages.
16351
+ *
16352
+ * Fallback chain: selected language → main language → 'en'.
16353
+ *
16354
+ * @param languages - Array of available languages from site content (global Language type)
16355
+ * @returns Current language code (e.g., 'en', 'nl', 'fr')
16356
+ */
16357
+ declare function getCurrentLanguageCode(languages: Language[] | undefined): Language['code'];
16358
+ /**
16359
+ * Composable to get current language from site context.
16360
+ *
16361
+ * Uses the global Language type from types.d.ts.
16362
+ * Fallback chain: selected language → main language → 'en'.
16363
+ *
16364
+ * @returns Object containing currentLanguage computed ref
16365
+ */
16366
+ declare function useCurrentLanguage(): UseCurrentLanguageReturn;
16367
+
16368
+ interface InstantsiteTilePromise {
16369
+ add(callback: (id: string) => void): void;
16370
+ }
16371
+ interface InstantsiteJSAPI {
16372
+ /**
16373
+ * Retrieves the current site ID.
16374
+ *
16375
+ * @returns {number} The site ID.
16376
+ */
16377
+ getSiteId: () => number;
16378
+ /**
16379
+ * Retrieves the public token for a given app.
16380
+ *
16381
+ * @param {string} appId - The ID of the app.
16382
+ * @returns {string | undefined} The app's public token, or `undefined` if not found.
16383
+ */
16384
+ getAppPublicToken: (appId: string) => string | undefined;
16385
+ /**
16386
+ * Retrieves the public configuration for a given app.
16387
+ *
16388
+ * @param {string} appId - The ID of the app.
16389
+ * @returns {string | undefined} The app's public configuration, or `undefined` if not found.
16390
+ */
16391
+ getAppPublicConfig: (appId: string) => string | undefined;
16392
+ /**
16393
+ * An event that triggers when a tile is loaded.
16394
+ *
16395
+ * @type {InstantsiteTilePromise}
16396
+ *
16397
+ * @example
16398
+ * ```ts
16399
+ * const tileLoadedPromise = instantsiteJsApi?.onTileLoaded;
16400
+ *
16401
+ * tileLoadedPromise?.add((tileId) => {
16402
+ * console.log('Tile loaded:', tileId);
16403
+ * });
16404
+ * ```
16405
+ */
16406
+ onTileLoaded: InstantsiteTilePromise;
16407
+ /**
16408
+ * An event that triggers when a tile is unloaded.
16409
+ *
16410
+ * @type {InstantsiteTilePromise}
16411
+ *
16412
+ * @example
16413
+ * ```ts
16414
+ * const tileUnloadedPromise = instantsiteJsApi?.onTileUnloaded;
16415
+ *
16416
+ * tileUnloadedPromise?.add((tileId) => {
16417
+ * console.log('Tile unloaded:', tileId);
16418
+ * });
16419
+ * ```
16420
+ */
16421
+ onTileUnloaded: InstantsiteTilePromise;
16422
+ /**
16423
+ * Opens the search page with the specified keyword.
16424
+ *
16425
+ * @param {string | undefined} keyword - The keyword to search for.
16426
+ * @returns {void}
16427
+ */
16428
+ openSearchPage: (keyword: string | undefined) => void;
16429
+ }
16430
+
16431
+ /** Composable for Instantsite JS API. Returns `window.instantsite` for platform interaction. */
16432
+ declare function useInstantsiteJsApi(): InstantsiteJSAPI | undefined;
16433
+
16127
16434
  /**
16128
16435
  * Composable for accessing BUTTON content with action link.
16129
16436
  *
@@ -16182,7 +16489,7 @@ declare function useButtonElementContent<CONTENT>(elementName: string, externalC
16182
16489
  * @returns `Reactive<CategorySelector>` — reactive object with:
16183
16490
  * - `categories: ComputedRef<CategoryListComponentItem[]>` — array of category objects with `id`, `name`, `url`, `imageUrl`, etc.
16184
16491
  * - `categoryIds: ComputedRef<Array<number>>` — array of selected category IDs
16185
- * - `hasContent: ComputedRef<boolean>` — `true` if selector data exists
16492
+ * - `hasContent: ComputedRef<boolean>` — `true` if there are categories to render
16186
16493
  * - `hasCategories: ComputedRef<boolean>` — `true` if at least one category is selected
16187
16494
  *
16188
16495
  * @see {@link CategorySelectorContent}
@@ -16408,7 +16715,7 @@ declare function useNavigationMenuElementContent<CONTENT>(): {
16408
16715
  * - `products: ComputedRef<ProductListComponentItem[]>` — array of product objects with `id`, `name`, `price`, `imageUrl`, etc.
16409
16716
  * - `categories: ComputedRef<CategoryListComponentItem[]>` — array of categories (when using category selection)
16410
16717
  * - `categoryId: ComputedRef<number>` — selected category ID (when using category selection)
16411
- * - `hasContent: ComputedRef<boolean>` — `true` if selector data exists
16718
+ * - `hasContent: ComputedRef<boolean>` — `true` if there are products to render
16412
16719
  * - `hasProducts: ComputedRef<boolean>` — `true` if at least one product is selected
16413
16720
  *
16414
16721
  * @see {@link ProductSelectorContent}
@@ -16695,7 +17002,7 @@ declare function useBackgroundElementDesign<DESIGN>(elementName: keyof DESIGN):
16695
17002
  * </button>
16696
17003
  * ```
16697
17004
  */
16698
- declare function useButtonElementDesign<DESIGN>(elementName: keyof DESIGN): Reactive<ButtonDesignData>;
17005
+ declare function useButtonElementDesign<DESIGN>(elementName: keyof DESIGN): Reactive<ButtonDesignData$1>;
16699
17006
 
16700
17007
  /**
16701
17008
  * Composable for accessing IMAGE design settings.
@@ -17765,5 +18072,5 @@ declare const translation: {
17765
18072
  readonly init: (config: TranslationSettings) => TranslationSettings;
17766
18073
  };
17767
18074
 
17768
- export { ActionLinkTypeEnum, BackgroundStyleEnum, ButtonAppearanceEnum, ButtonShapeEnum, ButtonSizeEnum, ButtonTypeEnum, CatalogLayoutSlot, CategoryLayoutSlot, Color, ConfigTypeEnum, DesignEditorType, EditorTypes, ImageSet, InstantsiteJsEvent, LogoTypeEnum, OverlayType, OverlayTypeEnum, PluginTypeEnum, ProductLayoutSlot, SectionTypeEnum, TemplateCategoriesList, ValidationTypeEnum, asStructuredColor, collection, content, createLayoutApp, createVueClientApp, createVueServerApp, design, layout, section, showcase, template, translation, useAccordionElementDesign, useBackgroundElementDesign, useButtonElementContent, useButtonElementDesign, useCategorySelectorElementContent, useDeckElementContent, useImageElementContent, useImageElementDesign, useInputboxElementContent, useInstantsiteJsApi, useLayoutElementDesign, useLogoElementContent, useLogoElementDesign, useMenuElementContent, useNavigationMenuElementContent, useProductSelectorElementContent, useSelectboxElementContent, useSelectboxElementDesign, useTextElementDesign, useTextareaElementContent, useTextareaElementDesign, useToggleElementContent, useToggleElementDesign, useTranslation, useVueBaseProps };
17769
- export type { AccordionDesignData, AccordionDesignEditor, AccordionDesignEditorDefaults, AccordionDesignItemData, AccordionItem, AccordionShowcaseDesignEditorDefaults, ActionLink, AppBaseContext, AppBaseData, AppBaseState, Background, BackgroundDesignData$1 as BackgroundDesignData, BackgroundDesignEditor, BackgroundDesignEditorDefaults, BackgroundDesignEditorDefaultsTransformed, BackgroundTransformed, BackgroundType, ButtonAppearance, ButtonContentData, ButtonContentEditor, ButtonContentEditorDefaults, ButtonDesignData, ButtonDesignEditor, ButtonDesignEditorDefaults, ButtonDesignEditorDefaultsTransformed, ButtonSize, ButtonStyle, CapitalizationType, Card, CategorySelectorContent, CategorySelectorContentEditor, CategorySelectorContentEditorDefaults, CategorySelectorData, CollectionDescriptor, CollectionDescriptorContent, CollectionDescriptorMetadata, ColorPickerDesignEditor, ColorPickerDesignEditorDefaults, ColorPickerDesignEditorDefaultsTransformed, ContentEditor, ContentEditorDefaults, ContentSettings, CustomSection, Deck, DeckContent, DeckContentEditor, DefaultSection, DesignEditor, DesignEditorDefaults, DesignEditorDefaultsTransformed, DesignSettings, DividerContentEditor, DividerContentEditorDefaults, DividerDesignEditor, Font, Frame, GlobalColorsString, GlobalDesign$1 as GlobalDesign, GlobalFontsString, GlobalTextSizeString, GradientColor, GradientColorTransformed, HSLColor, ImageBorderInfoData, ImageContent, ImageContentData, ImageContentEditor, ImageContentEditorDefaults, ImageDesignData$1 as ImageDesignData, ImageDesignEditor, ImageDesignEditorDefaults, ImageDesignEditorDefaultsTransformed, ImageInfoData, InfoContentEditor, InfoContentEditorDefaults, InfoDesignEditor, InfoDesignEditorDefaults, InputBoxContent, InputboxContentEditor, InputboxContentEditorDefaults, InstantsiteJSAPI$1 as InstantsiteJSAPI, InstantsiteTilePromise$1 as InstantsiteTilePromise, InternalColor, LayoutDesignData, LayoutDesignOverride, LayoutSettings, LogoContent, LogoContentData, LogoContentEditor, LogoContentEditorDefaults, LogoDesignData$1 as LogoDesignData, LogoDesignEditor, LogoDesignEditorDefaults, LogoDesignEditorDefaultsTransformed, LogoType, MandatoryContentSettings, MandatoryDesignSettings, Manifest, MenuContent, MenuContentData, MenuContentEditor, MenuItem, NavigationMenuContentEditor, Overlay, OverlayTransformed, ProductSelectorContent, ProductSelectorContentEditor, ProductSelectorContentEditorDefaults, ProductSelectorData, RGBAColor, Section, SelectBoxContent, SelectboxContentEditor, SelectboxContentEditorDefaults, SelectboxContentOption, SelectboxDesignData, SelectboxDesignEditor, SelectboxDesignEditorDefaults, SelectboxDesignEditorDefaultsTransformed, Showcase, ShowcaseAccordionItem, ShowcaseContentEditorsDefaults, ShowcaseDeckContentEditorDefaults, ShowcaseImageContentEditorDefaults, ShowcaseInputboxContentEditorDefaults, ShowcaseLogoContentEditorDefaults, ShowcaseMenuContentEditorDefaults, ShowcaseNavigationMenuContentEditorDefaults, ShowcaseOverride, ShowcaseTextareaContentEditorDefaults, SolidColor, SolidColorTransformed, StorePageConfiguration, StorefrontSection, StorefrontSectionId, Template, TemplateConfiguration, TemplateConfigurationSection, TemplateCustomSection, TemplateDefaultSection, TemplateMetadata, TemplatePage, TemplatePageNamed, TemplateStorefrontSection, TextAreaContent, TextDesignData$1 as TextDesignData, TextDesignEditor, TextDesignEditorDefaults, TextDesignEditorDefaultsTransformed, TextSize, TextareaContentEditor, TextareaContentEditorDefaults, TextareaDesignData$1 as TextareaDesignData, ToggleContent, ToggleContentData, ToggleContentEditor, ToggleContentEditorDefaults, ToggleDesignData, ToggleDesignEditor, ToggleDesignEditorDefaults, ToggleDesignEditorDefaultsTransformed, TransformedFrame, TranslationSettings, VuegaPageId };
18075
+ export { ActionLinkTypeEnum, BackgroundStyleEnum, ButtonAppearanceEnum, ButtonShapeEnum, ButtonSizeEnum, ButtonTypeEnum, CatalogLayoutSlot, CategoryLayoutSlot, Color$1 as Color, ConfigTypeEnum, DesignEditorType, EditorTypes, ImageSet, InstantsiteJsEvent, LogoTypeEnum, OverlayType, OverlayTypeEnum, PluginTypeEnum, ProductLayoutSlot, SectionTypeEnum, TemplateCategoriesList, ValidationTypeEnum, asStructuredColor, collection, content, createLayoutApp, createTextStyle, createVueClientApp, createVueServerApp, design, getBackgroundStyle, getColorHex, getContrastTextColor, getCurrentLanguageCode, isColorDark, layout, section, showcase, template, translation, useAccordionElementDesign, useBackgroundElementDesign, useBackgroundStyle, useButtonElementContent, useButtonElementDesign, useButtonStyles, useCategorySelectorElementContent, useCurrentLanguage, useDeckElementContent, useImageElementContent, useImageElementDesign, useInputboxElementContent, useInstantsiteJsApi, useLayoutElementDesign, useLogoElementContent, useLogoElementDesign, useMenuElementContent, useNavigationMenuElementContent, useProductSelectorElementContent, useSelectboxElementContent, useSelectboxElementDesign, useTextElementDesign, useTextareaElementContent, useTextareaElementDesign, useToggleElementContent, useToggleElementDesign, useTranslation, useVueBaseProps };
18076
+ export type { AccordionDesignData, AccordionDesignEditor, AccordionDesignEditorDefaults, AccordionDesignItemData, AccordionItem, AccordionShowcaseDesignEditorDefaults, ActionLink, AppBaseContext, AppBaseData, AppBaseState, Background, BackgroundDesignData$1 as BackgroundDesignData, BackgroundDesignEditor, BackgroundDesignEditorDefaults, BackgroundDesignEditorDefaultsTransformed, BackgroundStyleOptions, BackgroundTransformed, BackgroundType, ButtonAppearance, ButtonContentData, ButtonContentEditor, ButtonContentEditorDefaults, ButtonDesignData$1 as ButtonDesignData, ButtonDesignEditor, ButtonDesignEditorDefaults, ButtonDesignEditorDefaultsTransformed, ButtonSize, ButtonSizeStyles, ButtonStyle, CapitalizationType, Card, CategorySelectorContent, CategorySelectorContentEditor, CategorySelectorContentEditorDefaults, CategorySelectorData, CollectionDescriptor, CollectionDescriptorContent, CollectionDescriptorMetadata, ColorPickerDesignEditor, ColorPickerDesignEditorDefaults, ColorPickerDesignEditorDefaultsTransformed, ContentEditor, ContentEditorDefaults, ContentSettings, CustomSection, Deck, DeckContent, DeckContentEditor, DefaultSection, DesignEditor, DesignEditorDefaults, DesignEditorDefaultsTransformed, DesignSettings, DividerContentEditor, DividerContentEditorDefaults, DividerDesignEditor, Font, Frame, GlobalColorsString, GlobalDesign$1 as GlobalDesign, GlobalFontsString, GlobalTextSizeString, GradientColor, GradientColorTransformed, HSLColor, ImageBorderInfoData, ImageContent, ImageContentData, ImageContentEditor, ImageContentEditorDefaults, ImageDesignData$1 as ImageDesignData, ImageDesignEditor, ImageDesignEditorDefaults, ImageDesignEditorDefaultsTransformed, ImageInfoData, InfoContentEditor, InfoContentEditorDefaults, InfoDesignEditor, InfoDesignEditorDefaults, InputBoxContent, InputboxContentEditor, InputboxContentEditorDefaults, InstantsiteJSAPI$1 as InstantsiteJSAPI, InstantsiteTilePromise$1 as InstantsiteTilePromise, InternalColor, LayoutDesignData, LayoutDesignOverride, LayoutSettings, LogoContent, LogoContentData, LogoContentEditor, LogoContentEditorDefaults, LogoDesignData$1 as LogoDesignData, LogoDesignEditor, LogoDesignEditorDefaults, LogoDesignEditorDefaultsTransformed, LogoType, MandatoryContentSettings, MandatoryDesignSettings, Manifest, MenuContent, MenuContentData, MenuContentEditor, MenuItem, NavigationMenuContentEditor, Overlay, OverlayTransformed, ProductSelectorContent, ProductSelectorContentEditor, ProductSelectorContentEditorDefaults, ProductSelectorData, RGBAColor, Section, SelectBoxContent, SelectboxContentEditor, SelectboxContentEditorDefaults, SelectboxContentOption, SelectboxDesignData, SelectboxDesignEditor, SelectboxDesignEditorDefaults, SelectboxDesignEditorDefaultsTransformed, Showcase, ShowcaseAccordionItem, ShowcaseContentEditorsDefaults, ShowcaseDeckContentEditorDefaults, ShowcaseImageContentEditorDefaults, ShowcaseInputboxContentEditorDefaults, ShowcaseLogoContentEditorDefaults, ShowcaseMenuContentEditorDefaults, ShowcaseNavigationMenuContentEditorDefaults, ShowcaseOverride, ShowcaseTextareaContentEditorDefaults, SolidColor, SolidColorTransformed, StorePageConfiguration, StorefrontSection, StorefrontSectionId, Template, TemplateConfiguration, TemplateConfigurationSection, TemplateCustomSection, TemplateDefaultSection, TemplateMetadata, TemplatePage, TemplatePageNamed, TemplateStorefrontSection, TextAreaContent, TextDesignData$1 as TextDesignData, TextDesignEditor, TextDesignEditorDefaults, TextDesignEditorDefaultsTransformed, TextSize, TextStyleOptions, TextareaContentEditor, TextareaContentEditorDefaults, TextareaDesignData$1 as TextareaDesignData, ToggleContent, ToggleContentData, ToggleContentEditor, ToggleContentEditorDefaults, ToggleDesignData, ToggleDesignEditor, ToggleDesignEditorDefaults, ToggleDesignEditorDefaultsTransformed, TransformedFrame, TranslationSettings, UseButtonStylesOptions, UseCurrentLanguageReturn, VuegaPageId };