framer-api 0.1.1 → 0.1.2-alpha.0

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
@@ -46,9 +46,11 @@ type LintIssueSeverityValue = "error" | "warning";
46
46
  /** @deprecated The lintCode API was removed. This type will be removed in the near future. */
47
47
  type LintConfig = Record<LintRuleNameValue, LintIssueSeverityValue>;
48
48
  interface DiagnosticBase {
49
+ /** The error or warning message describing the diagnostic. */
49
50
  message: string;
50
51
  span?: DiagnosticSpan;
51
52
  }
53
+ /** A span of characters in a code file, used to locate a diagnostic. */
52
54
  interface DiagnosticSpan {
53
55
  /** The first character, counted from the beginning of the file, 0-based. */
54
56
  offset: number;
@@ -67,18 +69,23 @@ interface LintLink {
67
69
  interface LintDiagnostic extends DiagnosticBase {
68
70
  /** The span of the invalid code in the file. */
69
71
  span: DiagnosticSpan;
72
+ /** Issue severity: `"error"` or `"warning"`. */
70
73
  severity: LintIssueSeverityValue;
74
+ /** Optional documentation link for the diagnostic issue. */
71
75
  link?: LintLink;
72
76
  }
77
+ /** A diagnostic produced by type-checking a code file. */
73
78
  interface TypecheckDiagnostic extends DiagnosticBase {
74
79
  /**
75
80
  * The span of the invalid code in the file.
76
81
  * Could be undefined if the diagnostic is system-level (and not file-specific), like e.g. an error about invalid TS options.
77
82
  */
78
83
  span?: DiagnosticSpan;
79
- /** Could be undefined if the diagnostic is system-level (and not file-specific), like e.g. an error about invalid TS options */
84
+ /** Source file name. Could be undefined if the diagnostic is system-level (and not file-specific), like e.g. an error about invalid TS options. */
80
85
  fileName?: string;
86
+ /** TypeScript error code. */
81
87
  code: number;
88
+ /** Error category from the TypeScript compiler. */
82
89
  category: ts.DiagnosticCategory;
83
90
  }
84
91
 
@@ -108,40 +115,76 @@ declare const getHTMLForNodeMessageType = "INTERNAL_getHTMLForNode";
108
115
  declare const setHTMLForNodeMessageType = "INTERNAL_setHTMLForNode";
109
116
 
110
117
  type LocaleId = string;
118
+ /**
119
+ * A locale configured in the project for localization. Locales represent
120
+ * a language paired with an optional region (e.g. English, or English (Canada)).
121
+ */
111
122
  interface Locale {
123
+ /** A unique identifier for the locale. */
112
124
  id: LocaleId;
125
+ /** The BCP 47 language code, e.g. `"en-US"` or `"nl"`. */
113
126
  code: string;
127
+ /** The display name of the locale, e.g. `"English (US)"`. */
114
128
  name: string;
129
+ /** The URL slug used for this locale, e.g. `"en"`. */
115
130
  slug: string;
131
+ /**
132
+ * The ID of the fallback locale. When a Localization Source does not have
133
+ * a localized value set for this locale, Framer will fall back to the value
134
+ * defined in the fallback locale.
135
+ */
116
136
  fallbackLocaleId?: string;
117
137
  }
118
138
  interface LocalizationValueBase {
119
- /** A `value` of `null` means that the value explicitly falls back to the fallback locale */
139
+ /**
140
+ * The actual text of the localized value. A `value` of `null` means that
141
+ * the value will fall back to the value set in the fallback locale.
142
+ */
120
143
  value: string | null;
144
+ /** The timestamp (in milliseconds since epoch) of when this localized value was last edited. */
121
145
  lastEdited: number;
122
146
  /**
123
147
  * Whether the value is read only and therefore cannot be updated.
124
148
  *
125
149
  * For example, this is the case for localized values that were set
126
150
  * when syncing a managed collection. To update these values, you must
127
- * sync using the plugin that manages the collection.
151
+ * provide them when syncing the plugin that manages the collection.
128
152
  */
129
153
  readonly: boolean;
130
154
  }
155
+ /** A localization value that has not been set yet. */
131
156
  interface LocalizationValueNew {
157
+ /** Always `null` for new (unset) localization values. */
132
158
  value: null;
159
+ /** Indicates this value is currently not set. */
133
160
  status: "new";
134
161
  }
162
+ /** A localization value that has been set but needs review, either manually flagged or because the default locale value changed. */
135
163
  interface LocalizationValueNeedsReview extends LocalizationValueBase {
164
+ /** Indicates this value needs review. */
136
165
  status: "needsReview";
137
166
  }
167
+ /** A localization value that has been set and is considered complete. */
138
168
  interface LocalizationValueDone extends LocalizationValueBase {
169
+ /** Indicates this value has been set. */
139
170
  status: "done";
140
171
  }
172
+ /** A localization value that has been set but has warnings. */
141
173
  interface LocalizationValueWarning extends LocalizationValueBase {
174
+ /** Indicates this value has warnings. */
142
175
  status: "warning";
176
+ /** A message describing why the localized value has a warning status. Only set when status is `"warning"`. */
143
177
  warning: string;
144
178
  }
179
+ /**
180
+ * The localized value and associated metadata for a specific locale. Use the `status`
181
+ * discriminator to narrow the type:
182
+ *
183
+ * - `"new"` - A value that is currently not set.
184
+ * - `"needsReview"` - A value that has been set but marked as needing review.
185
+ * - `"warning"` - A value that has been set but has warnings.
186
+ * - `"done"` - A value that has been set and is complete.
187
+ */
145
188
  type LocalizationValue = LocalizationValueNew | LocalizationValueNeedsReview | LocalizationValueDone | LocalizationValueWarning;
146
189
  type LocalizationValueByLocale = Record<LocaleId, LocalizationValue>;
147
190
  type InlineLocalizationValueByLocale = Record<LocaleId, LocalizationValue>;
@@ -149,24 +192,45 @@ type LocalizationGroupId = string;
149
192
  type LocalizationSourceId = string;
150
193
  type LocalizedValueStatus = LocalizationValue["status"];
151
194
  type LocalizationSourceType = "string" | "formattedText" | "altText" | "slug" | "link";
195
+ /**
196
+ * A localizable string on your site. Localization sources are the actual
197
+ * translatable strings from your site, along with their localized values.
198
+ */
152
199
  interface LocalizationSource {
153
- /** A stable ID of the localization source that can be used for updating and synchronizing */
200
+ /** A unique identifier for the localization source, stable across syncs. */
154
201
  id: LocalizationSourceId;
155
- /** The type of value for this source */
202
+ /** The type of value for this source, such as `"string"`, `"formattedText"`, `"altText"`, `"slug"`, or `"link"`. */
156
203
  type: LocalizationSourceType;
157
- /** Current Source value */
204
+ /** The current value of the localization source in the default locale. */
158
205
  value: string;
159
- /** Localized values and metadata for each locale */
206
+ /** Localized values and metadata for each locale, keyed by locale ID. */
160
207
  valueByLocale: LocalizationValueByLocale;
161
208
  }
162
209
  type LocalizationGroupStatus = "excluded" | "ready";
163
210
  type LocalizationGroupStatusByLocale = Record<LocaleId, LocalizationGroupStatus>;
211
+ /**
212
+ * A group of related localization sources, such as all translatable content for a
213
+ * page or collection item. Localization groups are things like pages or CMS items
214
+ * that contain one or more localization sources.
215
+ *
216
+ * A group can have a different status in each locale. For example, you may want to
217
+ * show a blog post in your French locale but exclude it in your Dutch locale.
218
+ */
164
219
  interface LocalizationGroup {
220
+ /** A unique identifier for the localization group. */
165
221
  id: LocalizationGroupId;
222
+ /** The name of the localization group. */
166
223
  name: string;
224
+ /** The kind of content this group represents. */
167
225
  type: "collection" | "collection-item" | "component" | "page" | "settings" | "template";
226
+ /** Whether this group supports the `"excluded"` status for locales. */
168
227
  supportsExcludedStatus: boolean;
228
+ /** The localization sources within this group. */
169
229
  sources: LocalizationSource[];
230
+ /**
231
+ * The status of each locale for this group. A localization group can have
232
+ * a different status in each locale (`"excluded"` or `"ready"`).
233
+ */
170
234
  statusByLocale: LocalizationGroupStatusByLocale;
171
235
  }
172
236
  type LocalizedValueUpdate = {
@@ -270,6 +334,7 @@ declare const fontWeights: readonly [100, 200, 300, 400, 500, 600, 700, 800, 900
270
334
  * - `900` - Black (Heavy)
271
335
  * */
272
336
  type FontWeight = (typeof fontWeights)[number];
337
+ /** A font available in the project, including custom uploaded fonts. */
273
338
  declare class Font {
274
339
  /** An identifier used internally for differentiating fonts. */
275
340
  readonly selector: string;
@@ -546,9 +611,13 @@ interface WithReplicaInfoTrait {
546
611
  readonly originalId: string | null;
547
612
  }
548
613
  interface WithComponentVariantTrait {
614
+ /** Whether this is a component variant. Supported by FrameNode. */
549
615
  readonly isVariant: boolean;
616
+ /** Whether this is the primary variant. Supported by FrameNode. */
550
617
  readonly isPrimaryVariant: boolean;
618
+ /** Gesture state for component variants: `"hover"`, `"pressed"`, `"loading"`, or `"error"`. Supported by FrameNode. */
551
619
  readonly gesture: Gesture | null;
620
+ /** ID of the node this variant inherits from. Supported by FrameNode. */
552
621
  readonly inheritsFromId: string | null;
553
622
  }
554
623
  interface IsComponentVariant {
@@ -560,16 +629,31 @@ interface IsComponentGestureVariant extends IsComponentVariant {
560
629
  readonly gesture: Gesture;
561
630
  }
562
631
  interface WithNameTrait {
632
+ /**
633
+ * The name of the node displayed in the layers panel.
634
+ * Supported by FrameNode, TextNode, SVGNode, ComponentInstanceNode,
635
+ * ComponentNode, VectorSetNode, VectorSetItemNode.
636
+ */
563
637
  readonly name: string | null;
564
638
  }
565
639
  interface WithVisibleTrait {
640
+ /**
641
+ * Whether the node is visible on the canvas. Defaults to `true`.
642
+ * Supported by FrameNode, TextNode, SVGNode, ComponentInstanceNode, VectorSetItemNode.
643
+ */
566
644
  readonly visible: boolean;
567
645
  }
568
646
  interface WithLockedTrait {
647
+ /**
648
+ * Whether the node is locked for editing. Defaults to `false`.
649
+ * Supported by FrameNode, TextNode, SVGNode, ComponentInstanceNode, VectorSetItemNode.
650
+ */
569
651
  readonly locked: boolean;
570
652
  }
571
653
  interface WithBreakpointTrait {
654
+ /** Whether this is a breakpoint. Supported by FrameNode. */
572
655
  readonly isBreakpoint: boolean;
656
+ /** Whether this is the primary breakpoint. Supported by FrameNode. */
573
657
  readonly isPrimaryBreakpoint: boolean;
574
658
  }
575
659
  interface IsBreakpoint {
@@ -577,23 +661,41 @@ interface IsBreakpoint {
577
661
  readonly isPrimaryBreakpoint: boolean;
578
662
  }
579
663
  interface WithBackgroundColorTrait<T extends TraitVariant> {
580
- /** Color of the frame in RGBA format, e.g `rgba(242, 59, 57, 1)`, or as a `ColorStyle` instance. */
664
+ /**
665
+ * Background color in RGBA format (e.g. `rgba(242, 59, 57, 1)`) or as a {@link ColorStyle} instance.
666
+ * Setting to `null` removes the background color. Supported by FrameNode.
667
+ */
581
668
  readonly backgroundColor: (T extends TraitVariantData ? ColorStyleData : ColorStyle) | string | null;
582
669
  }
583
670
  interface WithBackgroundImageTrait<T extends TraitVariant> {
671
+ /** Background image asset. Supported by FrameNode. */
584
672
  readonly backgroundImage: (T extends TraitVariantData ? ImageAssetData : ImageAsset) | null;
585
673
  }
586
674
  interface WithBackgroundGradientTrait<T extends TraitVariant> {
675
+ /** Background gradient (linear, radial, or conic). Supported by FrameNode. */
587
676
  readonly backgroundGradient: (T extends TraitVariantData ? GradientData : Gradient) | null;
588
677
  }
589
678
  interface WithRotationTrait {
679
+ /**
680
+ * Rotation angle in degrees. Defaults to `0`.
681
+ * Supported by FrameNode, TextNode, SVGNode, ComponentInstanceNode.
682
+ */
590
683
  readonly rotation: number;
591
684
  }
592
685
  interface WithOpacityTrait {
686
+ /**
687
+ * Opacity of the node, from `0` (fully transparent) to `1` (fully opaque). Defaults to `1`.
688
+ * Supported by FrameNode, TextNode, SVGNode, ComponentInstanceNode.
689
+ */
593
690
  readonly opacity: number;
594
691
  }
595
692
  type BorderRadius = CSSDimension<CSSUnit.Percentage | CSSUnit.Pixel> | `${CSSDimension<CSSUnit.Pixel>} ${CSSDimension<CSSUnit.Pixel>} ${CSSDimension<CSSUnit.Pixel>} ${CSSDimension<CSSUnit.Pixel>}` | null;
596
693
  interface WithBorderRadiusTrait {
694
+ /**
695
+ * Border radius for rounded corners. Single value (e.g. `"10px"` or `"50%"`)
696
+ * or per-corner (e.g. `"10px 20px 30px 40px"` for top-left, top-right, bottom-right, bottom-left).
697
+ * Setting to `null` removes the border radius. Supported by FrameNode.
698
+ */
597
699
  readonly borderRadius: BorderRadius;
598
700
  }
599
701
  type BorderWidth = CSSDimension<CSSUnit.Pixel> | `${CSSDimension<CSSUnit.Pixel>} ${CSSDimension<CSSUnit.Pixel>} ${CSSDimension<CSSUnit.Pixel>} ${CSSDimension<CSSUnit.Pixel>}`;
@@ -604,123 +706,271 @@ interface Border {
604
706
  style: BorderStyle;
605
707
  }
606
708
  interface WithBorderTrait<T extends TraitVariant> {
709
+ /**
710
+ * Border properties including width, color, and style.
711
+ * Styles: `"solid"`, `"dashed"`, `"dotted"`, `"double"`.
712
+ * Width can be per-side (e.g. `"1px 2px 3px 4px"`).
713
+ * Setting to `null` removes the border. Supported by FrameNode.
714
+ */
607
715
  readonly border: (T extends TraitVariantData ? Marshaled<Border> : Border) | null;
608
716
  }
717
+ /** Controls how images are rendered. Use `"pixelated"` for pixel art. */
609
718
  type ImageRendering = "auto" | "pixelated";
610
719
  interface WithImageRenderingTrait {
720
+ /**
721
+ * How images should be rendered when scaled: `"auto"` or `"pixelated"`.
722
+ * Only applies to frames with image backgrounds.
723
+ * Setting to `null` uses default rendering. Supported by FrameNode.
724
+ */
611
725
  readonly imageRendering: ImageRendering | null;
612
726
  }
727
+ /** Controls whether content that overflows the frame is clipped. */
613
728
  type Overflow = "visible" | "hidden" | "auto" | "clip";
614
729
  type AxisOverflow = Overflow;
615
730
  interface WithOverflowTrait {
731
+ /**
732
+ * Controls how content that exceeds the element's box is handled.
733
+ * Setting to `null` removes the overflow property. Will overwrite `overflowX` or `overflowY`.
734
+ * Supported by FrameNode, TextNode.
735
+ */
616
736
  readonly overflow: Overflow | null;
737
+ /**
738
+ * Controls horizontal overflow behavior.
739
+ * Setting to `null` removes the overflow X property. Supported by FrameNode, TextNode.
740
+ */
617
741
  readonly overflowX: AxisOverflow | null;
742
+ /**
743
+ * Controls vertical overflow behavior.
744
+ * Setting to `null` removes the overflow Y property. Supported by FrameNode, TextNode.
745
+ */
618
746
  readonly overflowY: AxisOverflow | null;
619
747
  }
620
748
  interface WithTextTruncationTrait {
749
+ /**
750
+ * Maximum number of lines a text node can display before being truncated with an ellipsis.
751
+ * Must be used alongside `overflow`. Setting to `null` removes the text truncation property.
752
+ * Supported by TextNode.
753
+ */
621
754
  readonly textTruncation: number | null;
622
755
  }
623
756
  interface WithZIndexTrait {
757
+ /**
758
+ * Stacking order of positioned elements. Higher values appear on top of lower values.
759
+ * Setting to `null` removes the z-index property. Supported by FrameNode, TextNode.
760
+ */
624
761
  readonly zIndex: number | null;
625
762
  }
626
763
  interface WithRequiredComponentInfoTrait {
764
+ /** Identifier of the component. Supported by ComponentInstanceNode, ComponentNode. */
627
765
  readonly componentIdentifier: string;
628
766
  }
629
767
  interface WithNullableComponentInfoTrait {
630
768
  readonly insertURL: string | null;
769
+ /** Name of the component. Supported by ComponentInstanceNode, ComponentNode. */
631
770
  readonly componentName: string | null;
632
771
  }
633
772
  interface WithComponentInfoTrait extends WithRequiredComponentInfoTrait, WithNullableComponentInfoTrait {
634
773
  }
635
774
  interface WithWebPageInfoTrait {
775
+ /** URL path for the web page. Supported by WebPageNode. */
636
776
  readonly path: string | null;
777
+ /** Collection ID for the web page. Supported by WebPageNode. */
637
778
  readonly collectionId: string | null;
638
779
  }
639
780
  interface WithLinkTrait {
781
+ /**
782
+ * URL or internal page link. External: `"https://example.com"`, internal: `"/about"`,
783
+ * email: `"mailto:user@example.com"`. Setting to `null` removes the link.
784
+ * Supported by FrameNode, TextNode.
785
+ */
640
786
  readonly link: string | null;
787
+ /**
788
+ * Whether to open the link in a new tab. Default is automatically determined based on link type.
789
+ * Supported by FrameNode, TextNode.
790
+ */
641
791
  readonly linkOpenInNewTab: boolean | null;
642
792
  }
643
793
  type ControlAttributes = Record<string, unknown>;
644
794
  interface WithControlAttributesTrait {
795
+ /** Property control values for code components. Supported by ComponentInstanceNode. */
645
796
  readonly controls: ControlAttributes;
646
797
  }
647
798
  interface WithSVGTrait {
799
+ /** SVG markup content. Supported by SVGNode. */
648
800
  readonly svg: string;
649
801
  }
802
+ /** The CSS position property for a node. */
650
803
  type Position = "relative" | "absolute" | "fixed" | "sticky";
651
804
  interface WithPositionTrait {
805
+ /**
806
+ * Positioning behavior of the node.
807
+ * - `"relative"`: Default for nodes in stack/grid layouts
808
+ * - `"absolute"`: Positioned relative to parent
809
+ * - `"fixed"`: Positioned relative to viewport
810
+ * - `"sticky"`: Sticks to viewport edges when scrolling
811
+ *
812
+ * Supported by FrameNode, TextNode, SVGNode, ComponentInstanceNode.
813
+ */
652
814
  position: Position;
653
815
  }
654
816
  type FitContent = "fit-content";
655
817
  type FitImage = "fit-image";
656
818
  interface WithPinsTrait {
819
+ /**
820
+ * Distance from top edge when using absolute/fixed positioning.
821
+ * Only applies when position is not `"relative"`.
822
+ * Supported by FrameNode, TextNode, SVGNode, ComponentInstanceNode, VectorSetItemNode.
823
+ */
657
824
  top: CSSDimension<CSSUnit.Pixel> | null;
825
+ /**
826
+ * Distance from right edge when using absolute/fixed positioning.
827
+ * Only applies when position is not `"relative"`.
828
+ * Supported by FrameNode, TextNode, SVGNode, ComponentInstanceNode, VectorSetItemNode.
829
+ */
658
830
  right: CSSDimension<CSSUnit.Pixel> | null;
831
+ /**
832
+ * Distance from bottom edge when using absolute/fixed positioning.
833
+ * Only applies when position is not `"relative"`.
834
+ * Supported by FrameNode, TextNode, SVGNode, ComponentInstanceNode, VectorSetItemNode.
835
+ */
659
836
  bottom: CSSDimension<CSSUnit.Pixel> | null;
837
+ /**
838
+ * Distance from left edge when using absolute/fixed positioning.
839
+ * Only applies when position is not `"relative"`.
840
+ * Supported by FrameNode, TextNode, SVGNode, ComponentInstanceNode, VectorSetItemNode.
841
+ */
660
842
  left: CSSDimension<CSSUnit.Pixel> | null;
843
+ /**
844
+ * Center anchor horizontal position as percentage (e.g. `"50%"`).
845
+ * Used when pins are not set.
846
+ * Supported by FrameNode, TextNode, SVGNode, ComponentInstanceNode, VectorSetItemNode.
847
+ */
661
848
  centerX: CSSDimension<CSSUnit.Percentage> | null;
849
+ /**
850
+ * Center anchor vertical position as percentage (e.g. `"50%"`).
851
+ * Used when pins are not set.
852
+ * Supported by FrameNode, TextNode, SVGNode, ComponentInstanceNode, VectorSetItemNode.
853
+ */
662
854
  centerY: CSSDimension<CSSUnit.Percentage> | null;
663
855
  }
664
856
  type Length = CSSDimension<CSSUnit.Pixel | CSSUnit.Percentage | CSSUnit.Fraction>;
665
857
  type WidthLength = Length | FitContent | FitImage;
666
858
  type HeightLength = Length | FitContent | CSSDimension<CSSUnit.ViewportHeight> | FitImage;
667
859
  interface WithSizeTrait {
860
+ /**
861
+ * Width of the node. Accepts pixel, percentage, fraction values, or `"fit-content"`.
862
+ * Supported by FrameNode, TextNode, SVGNode, ComponentInstanceNode, VectorSetItemNode.
863
+ */
668
864
  width: WidthLength | null;
865
+ /**
866
+ * Height of the node. Accepts pixel, percentage, fraction, viewport-height values, or `"fit-content"`.
867
+ * Supported by FrameNode, TextNode, SVGNode, ComponentInstanceNode, VectorSetItemNode.
868
+ */
669
869
  height: HeightLength | null;
670
870
  }
671
871
  interface WithAspectRatioTrait {
872
+ /**
873
+ * Width-to-height ratio (e.g. `1.5` for 3:2).
874
+ * Setting to `null` removes the aspect ratio constraint.
875
+ * Supported by FrameNode, ComponentInstanceNode.
876
+ */
672
877
  aspectRatio: number | null;
673
878
  }
674
879
  type WidthConstraint = CSSDimension<CSSUnit.Pixel | CSSUnit.Percentage>;
675
880
  type HeightConstraint = CSSDimension<CSSUnit.Pixel | CSSUnit.Percentage | CSSUnit.ViewportHeight>;
676
881
  interface WithSizeConstraintsTrait {
882
+ /** Maximum width constraint. Supported by FrameNode, TextNode, ComponentInstanceNode. */
677
883
  maxWidth: WidthConstraint | null;
884
+ /** Minimum width constraint. Supported by FrameNode, TextNode, ComponentInstanceNode. */
678
885
  minWidth: WidthConstraint | null;
886
+ /** Maximum height constraint. Supported by FrameNode, TextNode, ComponentInstanceNode. */
679
887
  maxHeight: HeightConstraint | null;
888
+ /** Minimum height constraint. Supported by FrameNode, TextNode, ComponentInstanceNode. */
680
889
  minHeight: HeightConstraint | null;
681
890
  }
682
891
  interface WithInlineTextStyleTrait<T extends TraitVariant> {
892
+ /**
893
+ * Apply a text style preset. Setting to `null` removes the text style.
894
+ * Supported by TextNode.
895
+ */
683
896
  readonly inlineTextStyle: (T extends TraitVariantData ? TextStyleData : TextStyle) | null;
684
897
  }
685
898
  interface WithFontTrait<T extends TraitVariant> {
899
+ /** Font selection for text. Supported by TextNode. */
686
900
  readonly font: (T extends TraitVariantData ? FontData : Font) | null;
687
901
  }
688
902
  type TraitVariantData = "data";
689
903
  type TraitVariantNode = "node";
904
+ /** The direction children are laid out in a stack. */
690
905
  type StackDirection = "horizontal" | "vertical";
906
+ /** How children are distributed along the main axis of a stack. */
691
907
  type StackDistribution = "start" | "center" | "end" | "space-between" | "space-around" | "space-evenly";
908
+ /** How children are aligned along the cross axis of a stack. */
692
909
  type StackAlignment = "start" | "center" | "end";
910
+ /** The layout type for a frame: `"stack"` (flex) or `"grid"` (CSS grid). */
693
911
  type LayoutType = "stack" | "grid";
694
912
  interface StackLayout {
913
+ /** Direction of items in a stack layout. Requires `layout: "stack"`. Supported by FrameNode. */
695
914
  stackDirection: StackDirection | null;
915
+ /** How items are distributed in a stack layout. Requires `layout: "stack"`. Supported by FrameNode. */
696
916
  stackDistribution: StackDistribution | null;
917
+ /** How items are aligned perpendicular to the stack direction. Requires `layout: "stack"`. Supported by FrameNode. */
697
918
  stackAlignment: StackAlignment | null;
919
+ /** Whether items should wrap to the next line. Requires `layout: "stack"`. Supported by FrameNode. */
698
920
  stackWrapEnabled: boolean | null;
699
921
  }
700
922
  type GridContentAlignment = "start" | "center" | "end";
701
923
  interface GridLayout {
924
+ /** Number of columns in the grid. Requires `layout: "grid"`. Supported by FrameNode. */
702
925
  gridColumnCount: number | "auto-fill" | null;
926
+ /** Number of rows in the grid. Requires `layout: "grid"`. Supported by FrameNode. */
703
927
  gridRowCount: number | null;
928
+ /** How items are aligned within the grid. Requires `layout: "grid"`. Supported by FrameNode. */
704
929
  gridAlignment: GridContentAlignment | null;
930
+ /** Type of column width sizing: `"fixed"` or `"minmax"`. Requires `layout: "grid"`. Supported by FrameNode. */
705
931
  gridColumnWidthType: "fixed" | "minmax" | null;
932
+ /** Width of grid columns in pixels. Requires `layout: "grid"`. Supported by FrameNode. */
706
933
  gridColumnWidth: number | null;
934
+ /** Minimum width of grid columns in pixels. Requires `layout: "grid"`. Supported by FrameNode. */
707
935
  gridColumnMinWidth: number | null;
936
+ /** Type of row height sizing: `"fixed"`, `"auto"`, or `"fit"`. Requires `layout: "grid"`. Supported by FrameNode. */
708
937
  gridRowHeightType: "fixed" | "auto" | "fit" | null;
938
+ /** Height of grid rows in pixels. Requires `layout: "grid"`. Supported by FrameNode. */
709
939
  gridRowHeight: number | null;
710
940
  }
711
941
  interface WithLayoutTrait extends StackLayout, GridLayout {
942
+ /**
943
+ * Enables stack or grid layout. Setting to `null` disables any applied layout.
944
+ * Operation is deferred and applied after the current update cycle. Supported by FrameNode.
945
+ */
712
946
  layout: LayoutType | null;
947
+ /**
948
+ * Spacing between items in a layout. Single value (e.g. `"10px"`) applies to both axes;
949
+ * two values (e.g. `"10px 20px"`) set horizontal and vertical separately.
950
+ * Only works with layout enabled. Supported by FrameNode.
951
+ */
713
952
  gap: CSSDimension<CSSUnit.Pixel> | `${CSSDimension<CSSUnit.Pixel>} ${CSSDimension<CSSUnit.Pixel>}` | null;
953
+ /**
954
+ * Inner spacing of a container with layout. Single value (e.g. `"10px"`) applies to all sides;
955
+ * four values (e.g. `"10px 20px 30px 40px"`) set top, right, bottom, left.
956
+ * Only works with layout enabled. Supported by FrameNode.
957
+ */
714
958
  padding: CSSDimension<CSSUnit.Pixel> | `${CSSDimension<CSSUnit.Pixel>} ${CSSDimension<CSSUnit.Pixel>} ${CSSDimension<CSSUnit.Pixel>} ${CSSDimension<CSSUnit.Pixel>}` | null;
715
959
  }
716
960
  type GridItemAlignment = "start" | "center" | "end";
717
961
  type GridItemColumnSpan = number | "all";
718
962
  interface WithGridItemTrait {
963
+ /** Whether to fill the grid cell width. For nodes inside a grid container. Defaults to `true`. Supported by FrameNode, TextNode. */
719
964
  gridItemFillCellWidth: boolean | null;
965
+ /** Whether to fill the grid cell height. For nodes inside a grid container. Defaults to `true`. Supported by FrameNode, TextNode. */
720
966
  gridItemFillCellHeight: boolean | null;
967
+ /** Horizontal alignment within grid cell. For nodes inside a grid container. Defaults to `"center"`. Supported by FrameNode, TextNode. */
721
968
  gridItemHorizontalAlignment: GridItemAlignment | null;
969
+ /** Vertical alignment within grid cell. For nodes inside a grid container. Defaults to `"center"`. Supported by FrameNode, TextNode. */
722
970
  gridItemVerticalAlignment: GridItemAlignment | null;
971
+ /** Number of columns to span, or `"all"` for all columns. For nodes inside a grid container. Defaults to `1`. Supported by FrameNode, TextNode. */
723
972
  gridItemColumnSpan: GridItemColumnSpan | null;
973
+ /** Number of rows to span. For nodes inside a grid container. Defaults to `1`. Supported by FrameNode, TextNode. */
724
974
  gridItemRowSpan: number | null;
725
975
  }
726
976
  type TraitVariant = TraitVariantData | TraitVariantNode;
@@ -789,8 +1039,42 @@ interface ColorStyleData extends RequiredColorStyleAttributes, OptionalColorStyl
789
1039
  path: string;
790
1040
  }
791
1041
  type ColorStyleAttributes = Prettify<RequiredColorStyleAttributes & Partial<OptionalColorStyleAttributes> & AssetPath>;
1042
+ /**
1043
+ * A reusable color style defined in the project. Supports light and dark
1044
+ * theme variants. Color styles let you manage color appearances from one
1045
+ * place in a project. In the UI, you can find them in the Assets panel.
1046
+ * Plugins can use these styles to do things like sync design systems or
1047
+ * check accessibility.
1048
+ *
1049
+ * Colors are stored in RGBA format, e.g. `rgba(242, 59, 57, 1)`. The
1050
+ * `light` attribute is the default color used in light theme. The `dark`
1051
+ * attribute is an optional color used in the dark theme.
1052
+ *
1053
+ * To organize color styles into folders, use `/` as a separator in the
1054
+ * name, e.g. `"My Plugin/My Cool Color"`.
1055
+ *
1056
+ * @example
1057
+ * ```ts
1058
+ * // Create a new color style with light and dark variants.
1059
+ * const colorStyle = await framer.createColorStyle({
1060
+ * name: "My Cool Color",
1061
+ * light: "rgba(242, 59, 57, 1)",
1062
+ * dark: "rgba(120, 22, 11, 1)"
1063
+ * })
1064
+ *
1065
+ * // Update an existing color style.
1066
+ * await colorStyle.setAttributes({ dark: "rgba(10, 10, 10, 0.2)" })
1067
+ *
1068
+ * // Remove a color style from the project.
1069
+ * await colorStyle.remove()
1070
+ *
1071
+ * // Store plugin data on a color style.
1072
+ * await colorStyle.setPluginData("key", "value")
1073
+ * ```
1074
+ */
792
1075
  declare class ColorStyle {
793
1076
  #private;
1077
+ /** A unique identifier for the color style. */
794
1078
  readonly id: NodeId;
795
1079
  readonly name: string;
796
1080
  /**
@@ -807,29 +1091,57 @@ declare class ColorStyle {
807
1091
  static [$framerInternal.unmarshal](engine: PluginEngine, data: ColorStyleData): ColorStyle;
808
1092
  [$framerInternal.marshal](): ColorStyleData;
809
1093
  /**
810
- * Set the attributes of a color style.
1094
+ * Set the attributes of a color style. Attributes are merged with existing
1095
+ * values, so only the provided attributes are updated.
1096
+ *
1097
+ * @param update - The attributes to update.
1098
+ * @returns The updated color style, or `null` if the style was not found.
811
1099
  *
812
1100
  * Use `"ColorStyle.setAttributes"` to check if this method is allowed.
1101
+ *
1102
+ * @example
1103
+ * ```ts
1104
+ * await colorStyle.setAttributes({ dark: "rgba(10, 10, 10, 0.2)" })
1105
+ * ```
813
1106
  */
814
1107
  setAttributes(update: Partial<ColorStyleAttributes>): Promise<ColorStyle | null>;
815
1108
  /**
816
1109
  * Get plugin data for this color style by key.
1110
+ *
1111
+ * @param key - The plugin data key.
1112
+ * @returns The stored value, or `null` if no data exists for the key.
817
1113
  */
818
1114
  getPluginData(key: string): Promise<string | null>;
819
1115
  /**
820
1116
  * Set plugin data on this color style by key.
821
1117
  *
1118
+ * @param key - The plugin data key.
1119
+ * @param value - The value to set, or `null` to remove.
1120
+ *
822
1121
  * Use `"ColorStyle.setPluginData"` to check if this method is allowed.
1122
+ *
1123
+ * @example
1124
+ * ```ts
1125
+ * await colorStyle.setPluginData("key", "value")
1126
+ * ```
823
1127
  */
824
1128
  setPluginData(key: string, value: string | null): Promise<void>;
825
1129
  /**
826
1130
  * Get all plugin data keys for this color style.
1131
+ *
1132
+ * @returns An array of all plugin data keys set on this color style.
827
1133
  */
828
1134
  getPluginDataKeys(): Promise<string[]>;
829
1135
  /**
830
- * Deletes the color style from the project.
1136
+ * Deletes the color style from the project. You need a reference to the
1137
+ * style to call this method.
831
1138
  *
832
1139
  * Use `"ColorStyle.remove"` to check if this method is allowed.
1140
+ *
1141
+ * @example
1142
+ * ```ts
1143
+ * await colorStyle.remove()
1144
+ * ```
833
1145
  */
834
1146
  remove(): Promise<void>;
835
1147
  }
@@ -885,6 +1197,60 @@ type TextStyleAttributes = Prettify<Partial<Omit<TextStyleData, "id" | "color" |
885
1197
  boldItalicFont: Font | null;
886
1198
  breakpoints: TextStyleBreakpointAttributes[];
887
1199
  }> & AssetPath>;
1200
+ /**
1201
+ * A reusable text style defined in the project, including font, size,
1202
+ * color, and responsive breakpoints. Text styles let you manage text
1203
+ * appearances from one place in a project. In the UI, you can find them
1204
+ * in the Assets panel.
1205
+ *
1206
+ * Text styles support responsive breakpoints that apply different values
1207
+ * at different window widths. A maximum of four breakpoints can be added.
1208
+ * Breakpoints are automatically ordered from largest to smallest `minWidth`.
1209
+ * Each breakpoint must have a unique `minWidth` value.
1210
+ *
1211
+ * By default, text styles use a built-in font. Use
1212
+ * {@link Font} to customize a text style's typeface. All font variants
1213
+ * (bold, italic, boldItalic) must share the same font family as the base
1214
+ * font.
1215
+ *
1216
+ * To organize text styles into folders, use `/` as a separator in the
1217
+ * name, e.g. `"My Plugin/Heading"`.
1218
+ *
1219
+ * @example
1220
+ * ```ts
1221
+ * // Create a new text style.
1222
+ * const textStyle = await framer.createTextStyle({
1223
+ * name: "Heading",
1224
+ * tag: "h1",
1225
+ * fontSize: "30px",
1226
+ * lineHeight: "1.6em",
1227
+ * })
1228
+ *
1229
+ * // Create a text style with responsive breakpoints.
1230
+ * const textStyle = await framer.createTextStyle({
1231
+ * fontSize: "24px",
1232
+ * minWidth: 1280,
1233
+ * breakpoints: [
1234
+ * { minWidth: 1024, fontSize: "18px" },
1235
+ * { minWidth: 320, fontSize: "16px" }
1236
+ * ]
1237
+ * })
1238
+ *
1239
+ * // Update an existing text style.
1240
+ * await textStyle.setAttributes({
1241
+ * color: "rgba(242, 59, 57, 1)"
1242
+ * })
1243
+ *
1244
+ * // Create a text style with a custom font.
1245
+ * const font = await framer.getFont("Open Sans")
1246
+ * if (font) {
1247
+ * const textStyle = await framer.createTextStyle({ font })
1248
+ * }
1249
+ *
1250
+ * // Remove a text style from the project.
1251
+ * await textStyle.remove()
1252
+ * ```
1253
+ */
888
1254
  declare class TextStyle {
889
1255
  #private;
890
1256
  readonly id: NodeId;
@@ -980,33 +1346,85 @@ declare class TextStyle {
980
1346
  static [$framerInternal.unmarshal](engine: PluginEngine, data: TextStyleData): TextStyle;
981
1347
  [$framerInternal.marshal](): TextStyleData;
982
1348
  /**
983
- * Set the attributes of the text style.
1349
+ * Set the attributes of the text style. All attributes except
1350
+ * `breakpoints` are merged with existing values. When setting
1351
+ * `breakpoints`, the provided array replaces any existing breakpoints
1352
+ * entirely. To update breakpoints without overriding them all, iterate
1353
+ * over the existing breakpoints and merge them.
984
1354
  *
1355
+ * @param attributes - The attributes to update.
1356
+ * @returns The updated text style, or `null` if the style was not found.
985
1357
  * @throws If the number of breakpoints is bigger than the limit of 4.
986
1358
  * @throws If any of the font families used for `boldFont`, `italicFont` and
987
1359
  * `boldItalicFont` do not match the family of `font`.
988
1360
  *
989
1361
  * Use `"TextStyle.setAttributes"` to check if this method is allowed.
1362
+ *
1363
+ * @example
1364
+ * ```ts
1365
+ * // Update the color of a text style.
1366
+ * const textStyle = await framer.getTextStyle("text-style-id")
1367
+ * if (textStyle) {
1368
+ * await textStyle.setAttributes({
1369
+ * color: "rgba(242, 59, 57, 1)"
1370
+ * })
1371
+ * }
1372
+ *
1373
+ * // Replace breakpoints on a text style.
1374
+ * await textStyle.setAttributes({
1375
+ * breakpoints: [
1376
+ * { minWidth: 320, fontSize: "24px" }
1377
+ * ]
1378
+ * })
1379
+ *
1380
+ * // Scale font sizes across all breakpoints without losing them.
1381
+ * await textStyle.setAttributes({
1382
+ * fontSize: parseInt(textStyle.fontSize) * 0.8 + "px",
1383
+ * breakpoints: textStyle.breakpoints.map((bp) => ({
1384
+ * ...bp,
1385
+ * fontSize: parseInt(bp.fontSize) * 0.8 + "px"
1386
+ * }))
1387
+ * })
1388
+ * ```
990
1389
  */
991
1390
  setAttributes(attributes: TextStyleAttributes): Promise<TextStyle | null>;
992
1391
  /**
993
1392
  * Get plugin data for this text style by key.
1393
+ *
1394
+ * @param key - The plugin data key.
1395
+ * @returns The stored value, or `null` if no data exists for the key.
994
1396
  */
995
1397
  getPluginData(key: string): Promise<string | null>;
996
1398
  /**
997
1399
  * Set plugin data on this text style by key.
998
1400
  *
1401
+ * @param key - The plugin data key.
1402
+ * @param value - The value to set, or `null` to remove.
1403
+ *
999
1404
  * Use `"TextStyle.setPluginData"` to check if this method is allowed.
1405
+ *
1406
+ * @example
1407
+ * ```ts
1408
+ * await textStyle.setPluginData("key", "value")
1409
+ * ```
1000
1410
  */
1001
1411
  setPluginData(key: string, value: string | null): Promise<void>;
1002
1412
  /**
1003
1413
  * Get all plugin data keys for this text style.
1414
+ *
1415
+ * @returns An array of all plugin data keys set on this text style.
1004
1416
  */
1005
1417
  getPluginDataKeys(): Promise<string[]>;
1006
1418
  /**
1007
- * Deletes the text style from the project.
1419
+ * Deletes the text style from the project. You need a reference to
1420
+ * the style to call this method.
1008
1421
  *
1009
1422
  * Use `"TextStyle.remove"` to check if this method is allowed.
1423
+ *
1424
+ * @example
1425
+ * ```ts
1426
+ * await textStyle.remove()
1427
+ * ```
1010
1428
  */
1011
1429
  remove(): Promise<void>;
1012
1430
  }
@@ -1303,20 +1721,49 @@ interface EnumCaseData extends WithId, WithName, WithNameByLocale {
1303
1721
  }
1304
1722
  interface UpdateEnumCase extends Partial<WithName>, Partial<WithNameByLocaleUpdate> {
1305
1723
  }
1724
+ /** An individual case (option) within an Enum Field or Enum Variable. */
1306
1725
  declare class EnumCase {
1307
1726
  #private;
1727
+ /** A unique identifier for the enum case. */
1308
1728
  get id(): string;
1729
+ /** The display name of the enum case. */
1309
1730
  get name(): string;
1731
+ /**
1732
+ * Localized values for the name of this enum case.
1733
+ *
1734
+ * @example
1735
+ * ```ts
1736
+ * const dutchName = enumCase.nameByLocale[dutchLocale.id] // "Naam"
1737
+ * ```
1738
+ */
1310
1739
  get nameByLocale(): InlineLocalizationValueByLocale;
1311
1740
  constructor(engine: PluginEngine, nodeId: string, variableId: string, enumCaseData: EnumCaseData);
1312
1741
  /**
1313
- * Update a mutable enum case property, for example the name.
1742
+ * Update the attributes of this enum case.
1743
+ *
1744
+ * @example
1745
+ * ```ts
1746
+ * enumCase.setAttributes({
1747
+ * name: "New Name",
1748
+ * nameByLocale: {
1749
+ * nl: { action: "set", value: "Nieuwe naam" }
1750
+ * }
1751
+ * })
1752
+ * ```
1753
+ *
1754
+ * @param attributes - The attributes to update: `name` and/or `nameByLocale`.
1755
+ * @returns The updated `EnumCase`, or `null` if the case was removed before the update.
1314
1756
  *
1315
1757
  * Use `"EnumCase.setAttributes"` to check if this method is allowed.
1316
1758
  */
1317
1759
  setAttributes(attributes: UpdateEnumCase): Promise<EnumCase | null>;
1318
1760
  /**
1319
- * Remove the enum case.
1761
+ * Remove this enum case from its parent enum field.
1762
+ *
1763
+ * @example
1764
+ * ```ts
1765
+ * enumCase.remove()
1766
+ * ```
1320
1767
  *
1321
1768
  * Use `"EnumCase.remove"` to check if this method is allowed.
1322
1769
  */
@@ -1574,10 +2021,16 @@ type UpdateFieldAttributes<T extends {
1574
2021
  }>, // This is NOT the same as Extract<UpdateField, T>
1575
2022
  // This is NOT the same as Extract<UpdateField, T>
1576
2023
  "id" | "type">;
2024
+ /**
2025
+ * Base class for all CMS Collection field types. Use the `type` property
2026
+ * to narrow to a specific field class.
2027
+ */
1577
2028
  declare abstract class FieldBase {
1578
2029
  #private;
1579
2030
  abstract readonly type: FieldDefinitionData["type"];
2031
+ /** The unique identifier of the field. */
1580
2032
  get id(): string;
2033
+ /** The display name of the field as shown in the UI. */
1581
2034
  get name(): string;
1582
2035
  constructor(engine: PluginEngine, collectionId: string, data: FieldDefinitionBase);
1583
2036
  /**
@@ -1597,6 +2050,8 @@ declare abstract class FieldBase {
1597
2050
  * Returns the updated field on success, and `null` in the unlikely event of it being removed
1598
2051
  * between getting it and calling this method.
1599
2052
  *
2053
+ * @param attributes - The attributes to update.
2054
+ *
1600
2055
  * Use `"Field.setAttributes"` to check if this method is allowed.
1601
2056
  */
1602
2057
  setAttributes(attributes: UpdateFieldAttributes<typeof this>): Promise<typeof this | null>;
@@ -1609,88 +2064,143 @@ declare abstract class FieldBase {
1609
2064
  }
1610
2065
  declare abstract class FieldBaseWithRequired extends FieldBase implements WithFieldRequired {
1611
2066
  #private;
2067
+ /** Whether this field is required. Required fields must have a value set on every CMS item. */
1612
2068
  get required(): boolean;
1613
2069
  constructor(engine: PluginEngine, collectionId: string, data: FieldDefinitionBase & WithFieldRequired);
1614
2070
  }
2071
+ /** A CMS Collection field that stores a boolean (true or false) value. */
1615
2072
  declare class BooleanField extends FieldBase {
1616
2073
  readonly type = "boolean";
1617
2074
  }
2075
+ /** A CMS Collection field that stores a color value (RGBA/HSL/HEX format). */
1618
2076
  declare class ColorField extends FieldBase {
1619
2077
  readonly type = "color";
1620
2078
  }
2079
+ /** A CMS Collection field that stores a numeric value. */
1621
2080
  declare class NumberField extends FieldBase {
1622
2081
  readonly type = "number";
1623
2082
  }
2083
+ /** A CMS Collection field that stores a text string value. */
1624
2084
  declare class StringField extends FieldBaseWithRequired implements WithFieldBasedOn {
1625
2085
  #private;
1626
2086
  readonly type = "string";
1627
2087
  constructor(engine: PluginEngine, collectionId: string, data: StringFieldDefinitionData);
1628
2088
  get basedOn(): string | null;
1629
2089
  }
2090
+ /** A CMS Collection field that stores HTML-formatted text content (H1-H6, P, and other standard content elements). */
1630
2091
  declare class FormattedTextField extends FieldBaseWithRequired {
1631
2092
  readonly type = "formattedText";
1632
2093
  }
2094
+ /** A CMS Collection field that stores an image asset (`ImageAsset`). */
1633
2095
  declare class ImageField extends FieldBaseWithRequired {
1634
2096
  readonly type = "image";
1635
2097
  }
2098
+ /** A CMS Collection field that stores a URL in string format. */
1636
2099
  declare class LinkField extends FieldBaseWithRequired {
1637
2100
  readonly type = "link";
1638
2101
  }
2102
+ /** A CMS Collection field that stores a date in UTC format. Optionally displays time. */
1639
2103
  declare class DateField extends FieldBaseWithRequired {
1640
2104
  #private;
1641
2105
  readonly type = "date";
2106
+ /** Controls whether time is enabled on this date field. */
1642
2107
  get displayTime(): boolean | undefined;
1643
2108
  constructor(engine: PluginEngine, collectionId: string, data: DateFieldDefinitionData);
1644
2109
  }
2110
+ /** A visual divider between fields in the CMS UI. Not a data field. */
1645
2111
  declare class FieldDivider extends FieldBase {
1646
2112
  readonly type = "divider";
1647
2113
  }
2114
+ /**
2115
+ * A field type that is not yet supported by the plugin API.
2116
+ * Returned when Framer uses a field type that the plugin API does not recognize.
2117
+ */
1648
2118
  declare class UnsupportedField extends FieldBase {
1649
2119
  readonly type = "unsupported";
1650
2120
  }
2121
+ /** A CMS Collection field that stores a file asset (`FileAsset`). */
1651
2122
  declare class FileField extends FieldBaseWithRequired implements WithAllowedFileTypes {
1652
2123
  #private;
1653
2124
  readonly type = "file";
1654
- /** @inheritdoc */
2125
+ /** The file extensions that are allowed for uploads to this field, e.g. `["pdf", "txt"]`. */
1655
2126
  get allowedFileTypes(): string[];
1656
2127
  constructor(engine: PluginEngine, collectionId: string, data: FileFieldDefinitionData);
1657
2128
  }
2129
+ /**
2130
+ * A CMS Collection field with a fixed set of enum cases (options) that the user
2131
+ * can choose from. Enum cases must be defined as options before they can be
2132
+ * assigned to CMS items.
2133
+ */
1658
2134
  declare class EnumField extends FieldBase {
1659
2135
  #private;
1660
2136
  readonly type = "enum";
2137
+ /** The available enum cases for this field. */
1661
2138
  get cases(): readonly EnumCase[];
1662
2139
  constructor(engine: PluginEngine, collectionId: string, data: EnumFieldDefinitionData);
1663
2140
  /**
1664
- * Add a new enum case.
2141
+ * Add a new enum case to this field.
2142
+ *
2143
+ * @example
2144
+ * ```ts
2145
+ * await enumField.addCase({
2146
+ * name: "Name",
2147
+ * nameByLocale: {
2148
+ * nl: { action: "set", value: "Naam" }
2149
+ * }
2150
+ * })
2151
+ * ```
2152
+ *
2153
+ * @param attributes - An object with the enum case name and optional localized names.
2154
+ * @returns The newly created `EnumCase`, or `null` if the case could not be added.
1665
2155
  *
1666
2156
  * Use `"EnumField.addCase"` to check if this method is allowed.
1667
2157
  */
1668
2158
  addCase(attributes: CreateEnumCase): Promise<EnumCase | null>;
1669
2159
  /**
1670
- * Arrange enum cases in a specific order.
2160
+ * Set the order of the enum field's cases.
2161
+ *
2162
+ * @example
2163
+ * ```ts
2164
+ * const alphabeticalCaseOrder = enumField.cases
2165
+ * .toSorted((a, b) => a.name.localeCompare(b.name))
2166
+ * .map(({ id }) => id)
2167
+ * await enumField.setCaseOrder(alphabeticalCaseOrder)
2168
+ * ```
2169
+ *
2170
+ * @param caseIds - An array of the IDs of all enum cases, in the desired new order.
1671
2171
  *
1672
2172
  * Use `"EnumField.setCaseOrder"` to check if this method is allowed.
1673
2173
  */
1674
2174
  setCaseOrder(caseIds: string[]): Promise<void>;
1675
2175
  }
2176
+ /** A field that references an item in another collection. */
1676
2177
  declare class CollectionReferenceField extends FieldBaseWithRequired implements WithFieldCollectionId {
1677
2178
  #private;
1678
2179
  readonly type = "collectionReference";
2180
+ /** The ID of the referenced collection. */
1679
2181
  get collectionId(): string;
1680
2182
  constructor(engine: PluginEngine, collectionId: string, data: CollectionReferenceFieldDefinitionData);
1681
2183
  }
2184
+ /** A field that references multiple items in another collection. */
1682
2185
  declare class MultiCollectionReferenceField extends FieldBaseWithRequired implements WithFieldCollectionId {
1683
2186
  #private;
1684
2187
  readonly type = "multiCollectionReference";
2188
+ /** The ID of the referenced collection. */
1685
2189
  get collectionId(): string;
1686
2190
  constructor(engine: PluginEngine, collectionId: string, data: MultiCollectionReferenceFieldDefinitionData);
1687
2191
  }
1688
2192
  type ArrayItemField = ImageField;
2193
+ /**
2194
+ * A CMS Collection field that stores an array of nested fields. Currently only
2195
+ * supports a single image field, which creates a Gallery in the CMS.
2196
+ */
1689
2197
  declare class ArrayField extends FieldBaseWithRequired {
1690
2198
  readonly type = "array";
2199
+ /** The nested fields within this array field. Currently limited to a single image field. */
1691
2200
  readonly fields: readonly [ArrayItemField];
1692
2201
  constructor(engine: PluginEngine, collectionId: string, data: ArrayFieldDefinitionData);
1693
2202
  }
2203
+ /** Union of all CMS Collection field types. */
1694
2204
  type Field = BooleanField | ColorField | NumberField | StringField | FormattedTextField | ImageField | LinkField | DateField | FieldDivider | UnsupportedField | FileField | EnumField | CollectionReferenceField | MultiCollectionReferenceField | ArrayField;
1695
2205
  declare function isField(value: unknown): value is FieldBase;
1696
2206
 
@@ -2253,6 +2763,18 @@ interface WithUserEditable {
2253
2763
  type ManagedCollectionField = SupportedFieldDefinitionData & WithUserEditable;
2254
2764
  /** @deprecated Use `ManagedCollectionFieldInput` instead. */
2255
2765
  type EditableManagedCollectionField = ManagedCollectionFieldInputData;
2766
+ /**
2767
+ * A CMS Collection that is fully controlled by a plugin. Managed Collections
2768
+ * allow plugins to define fields and sync items programmatically. Fields and
2769
+ * items can only be added, edited, and deleted by the owning plugin, not by
2770
+ * the user (unless a field is marked `userEditable`).
2771
+ *
2772
+ * A Managed Collection plugin becomes available within the CMS when it supports
2773
+ * both `configureManagedCollection` and `syncManagedCollection` modes.
2774
+ *
2775
+ * Use `framer.getManagedCollection()` to obtain an instance when the plugin is
2776
+ * launched in either of those modes.
2777
+ */
2256
2778
  declare class ManagedCollection implements Navigable {
2257
2779
  #private;
2258
2780
  readonly id: NodeId;
@@ -2264,54 +2786,161 @@ declare class ManagedCollection implements Navigable {
2264
2786
  */
2265
2787
  readonly readonly: boolean;
2266
2788
  /**
2267
- * Collections managed by other plugins should are read-only.
2789
+ * Returns who manages this Collection.
2790
+ *
2791
+ * - `"thisPlugin"` if the Collection is managed by the current plugin.
2792
+ * - `"anotherPlugin"` if the Collection is managed by a different plugin.
2793
+ *
2794
+ * Collections managed by other plugins are read-only.
2268
2795
  */
2269
2796
  readonly managedBy: ManagedCollectionManagedBy;
2270
2797
  constructor(data: CollectionData, engine: PluginEngine);
2271
2798
  /**
2272
- * Get item keys in their set order.
2799
+ * Retrieve all item IDs in this Managed Collection, in their current order.
2800
+ *
2801
+ * @returns An array of item IDs.
2802
+ *
2803
+ * @example
2804
+ * ```ts
2805
+ * const itemIds = await collection.getItemIds()
2806
+ * ```
2273
2807
  */
2274
2808
  getItemIds(): Promise<string[]>;
2275
2809
  /**
2276
- * Arrange items in a specific order.
2810
+ * Arrange CMS items in a specific order.
2277
2811
  *
2278
2812
  * Use `"ManagedCollection.setItemOrder"` to check if this method is allowed.
2813
+ *
2814
+ * @param ids - An array of item IDs in the desired order. Unknown IDs are ignored.
2815
+ *
2816
+ * @example
2817
+ * ```ts
2818
+ * await collection.setItemOrder([item3.id, item1.id, item2.id])
2819
+ * ```
2279
2820
  */
2280
2821
  setItemOrder(ids: string[]): Promise<void>;
2281
2822
  /**
2282
- * Get all fields.
2823
+ * Get all fields defined on this Managed Collection.
2824
+ *
2825
+ * @returns An array of managed collection field definitions.
2826
+ *
2827
+ * @example
2828
+ * ```ts
2829
+ * const fields = await collection.getFields()
2830
+ * ```
2283
2831
  */
2284
2832
  getFields(): Promise<ManagedCollectionField[]>;
2285
2833
  /**
2286
- * Create, update or remove all fields in one go.
2834
+ * Add, update, or remove Collection fields. Fields not included in the
2835
+ * array will be removed. You can configure up to 30 custom fields.
2836
+ *
2837
+ * Each field requires an `id`, `name`, and `type`. For the `id`, use a
2838
+ * unique identifier that stays the same across future synchronizations.
2839
+ * Any change in `id` can break data assignments on the canvas. The maximum
2840
+ * length for an `id` is 64 characters.
2841
+ *
2842
+ * By default, managed collection fields set by a plugin are not editable by
2843
+ * users. Set `userEditable: true` on a field to allow user editing. Note
2844
+ * that fields marked as `userEditable` can no longer have their values set
2845
+ * by the plugin when using `addItems`.
2287
2846
  *
2288
2847
  * Use `"ManagedCollection.setFields"` to check if this method is allowed.
2848
+ *
2849
+ * @param fields - The array of fields that should be used for the collection.
2850
+ *
2851
+ * @example
2852
+ * ```ts
2853
+ * await collection.setFields([
2854
+ * { id: "1", type: "string", name: "Name" },
2855
+ * { id: "2", type: "number", name: "Age" },
2856
+ * { id: "3", type: "string", name: "Description", userEditable: true },
2857
+ * ])
2858
+ * ```
2289
2859
  */
2290
2860
  setFields(fields: ManagedCollectionFieldInput[]): Promise<void>;
2291
2861
  /**
2292
- * Add new items or update existing ones if their IDs match.
2862
+ * Add new items or update existing ones if their IDs match. This method
2863
+ * performs an upsert: items with matching IDs are updated, new IDs are
2864
+ * inserted.
2865
+ *
2866
+ * Each item requires an `id` and `slug`. Custom field data is provided via
2867
+ * the `fieldData` object, using field IDs as keys.
2868
+ *
2869
+ * Currently, calling `addItems` with existing item IDs merges the provided
2870
+ * field data with the existing items' current field data, meaning any
2871
+ * omitted fields remain unchanged. In version 4.0.0, this behavior will
2872
+ * change to fully replace items, removing any fields not explicitly
2873
+ * included. Always include all fields when updating existing items to avoid
2874
+ * unexpected behavior.
2293
2875
  *
2294
2876
  * Use `"ManagedCollection.addItems"` to check if this method is allowed.
2877
+ *
2878
+ * @param items - An array of items to add or update.
2879
+ *
2880
+ * @example
2881
+ * ```ts
2882
+ * await collection.addItems([
2883
+ * {
2884
+ * id: "1",
2885
+ * slug: "item-1",
2886
+ * fieldData: {
2887
+ * [nameField.id]: { type: "string", value: "Eric" },
2888
+ * [ageField.id]: { type: "number", value: 47 },
2889
+ * },
2890
+ * },
2891
+ * ])
2892
+ * ```
2295
2893
  */
2296
2894
  addItems(items: ManagedCollectionItemInput[]): Promise<void>;
2297
2895
  /**
2298
- * Remove items by their ID.
2896
+ * Remove CMS items by their ID.
2299
2897
  *
2300
2898
  * Use `"ManagedCollection.removeItems"` to check if this method is allowed.
2899
+ *
2900
+ * @param itemIds - The IDs of the items to remove.
2901
+ *
2902
+ * @example
2903
+ * ```ts
2904
+ * await collection.removeItems([item1.id, item5.id])
2905
+ * ```
2301
2906
  */
2302
2907
  removeItems(itemIds: string[]): Promise<void>;
2303
2908
  /**
2304
- * Make this the active collection.
2909
+ * Open this Collection in the Editor, making it the active selection in
2910
+ * the Framer UI.
2911
+ *
2912
+ * @example
2913
+ * ```ts
2914
+ * await collection.setAsActive()
2915
+ * ```
2305
2916
  */
2306
2917
  setAsActive(): Promise<void>;
2307
2918
  /**
2308
- * Set plugin data by key.
2919
+ * Set plugin data by key. Similar to local storage, you can store custom
2920
+ * data on the Managed Collection (e.g., the last synchronization date or a
2921
+ * connected database ID).
2309
2922
  *
2310
2923
  * Use `"ManagedCollection.setPluginData"` to check if this method is allowed.
2924
+ *
2925
+ * @param key - The plugin data key.
2926
+ * @param value - The value to set, or `null` to remove.
2927
+ *
2928
+ * @example
2929
+ * ```ts
2930
+ * const currentDate = new Date().toISOString()
2931
+ * await collection.setPluginData("lastSynchronizedAt", currentDate)
2932
+ * ```
2311
2933
  */
2312
2934
  setPluginData(key: string, value: string | null): Promise<void>;
2313
2935
  /**
2314
2936
  * Get plugin data by key.
2937
+ *
2938
+ * @param key - The plugin data key.
2939
+ *
2940
+ * @example
2941
+ * ```ts
2942
+ * const lastSynchronized = await collection.getPluginData("lastSynchronizedAt")
2943
+ * ```
2315
2944
  */
2316
2945
  getPluginData(key: string): Promise<string | null>;
2317
2946
  /**
@@ -2323,93 +2952,222 @@ declare class ManagedCollection implements Navigable {
2323
2952
  */
2324
2953
  navigateTo(opts?: NavigableOptions): Promise<void>;
2325
2954
  }
2955
+ /**
2956
+ * A CMS Collection in the project. Collections can be created by users or
2957
+ * managed by plugins. Use `managedBy` to check the owner.
2958
+ *
2959
+ * Any kind of Collection can be read from. Unmanaged Collections are those
2960
+ * created and updated by people. Use the `collection` mode to access CMS
2961
+ * data from your plugin.
2962
+ */
2326
2963
  declare class Collection implements Navigable {
2327
2964
  #private;
2328
2965
  readonly id: NodeId;
2329
2966
  readonly name: string;
2967
+ /**
2968
+ * The name of the field used as the slug.
2969
+ *
2970
+ * - Only Collections that are not managed by a Plugin will have this value set.
2971
+ */
2330
2972
  readonly slugFieldName: string | null;
2973
+ /**
2974
+ * The ID of the field the slug is based on.
2975
+ *
2976
+ * - Only Collections that are not managed by a Plugin will have this value set.
2977
+ */
2331
2978
  readonly slugFieldBasedOn: string | null;
2332
2979
  /**
2980
+ * Whether this Collection is read-only.
2981
+ *
2982
+ * A Collection is considered read-only if:
2983
+ * - The plugin operates in a view-only mode (e.g., user does not have
2984
+ * permission to edit content).
2985
+ * - The Collection is managed by another plugin.
2986
+ *
2987
+ * Read-only Collections cannot be modified via the API.
2988
+ *
2333
2989
  * @deprecated Use `managedBy` instead and the [Permissions
2334
2990
  * API](https://www.framer.com/developers/plugins-permissions) to check if users can edit the
2335
2991
  * collection.
2336
2992
  */
2337
2993
  readonly readonly: boolean;
2338
2994
  /**
2339
- * Collections managed by plugins are read-only. To be able to modify them use
2340
- * `ManagedCollection` (which is only possible in `configureManagedCollection` or
2995
+ * Returns who manages this Collection.
2996
+ *
2997
+ * - `"user"` if the Collection is user-created.
2998
+ * - `"thisPlugin"` if the Collection is managed by the current plugin.
2999
+ * - `"anotherPlugin"` if the Collection is managed by another plugin.
3000
+ *
3001
+ * Collections managed by plugins are read-only. To modify them, use
3002
+ * `ManagedCollection` (only possible in `configureManagedCollection` or
2341
3003
  * `syncManagedCollection` modes).
3004
+ *
3005
+ * Note: the plugin still needs to check if the user has permission to edit
3006
+ * content via `framer.isAllowedTo`.
3007
+ *
3008
+ * @example
3009
+ * ```ts
3010
+ * const collection = await framer.getActiveCollection()
3011
+ *
3012
+ * if (framer.mode === "collection" && collection.managedBy !== "user") {
3013
+ * framer.notify("This Collection cannot be modified.", { variant: "warning" })
3014
+ * }
3015
+ * ```
2342
3016
  */
2343
3017
  readonly managedBy: CollectionManagedBy;
2344
3018
  constructor(data: CollectionData, engine: PluginEngine);
2345
3019
  /**
2346
- * Arrange items in a specific order.
3020
+ * Reorder the items in this Collection based on an array of item IDs.
3021
+ * Unknown item IDs are ignored.
2347
3022
  *
2348
3023
  * Use `"Collection.setItemOrder"` to check if this method is allowed.
2349
- */
2350
- setItemOrder(ids: NodeId[]): Promise<void>;
2351
- /**
2352
- * Get all fields.
3024
+ *
3025
+ * @param ids - An array of item IDs representing the desired order.
3026
+ *
3027
+ * @example
3028
+ * ```ts
3029
+ * await collection.setItemOrder([item3.id, item1.id, item2.id])
3030
+ * ```
3031
+ */
3032
+ setItemOrder(ids: NodeId[]): Promise<void>;
3033
+ /**
3034
+ * Fetch all fields defined on this Collection, including dividers.
3035
+ *
3036
+ * Some fields might not be fully supported by the API; unsupported fields
3037
+ * will be returned with an `unsupported` field type.
3038
+ *
3039
+ * @returns An array of Field instances.
3040
+ *
3041
+ * @example
3042
+ * ```ts
3043
+ * const fields = await collection.getFields()
3044
+ * ```
2353
3045
  */
2354
3046
  getFields(): Promise<Field[]>;
2355
3047
  /**
2356
- * Create new fields. Use `Field.setAttributes` to update.
3048
+ * Create new unmanaged Collection fields. Use `Field.setAttributes` to
3049
+ * update existing fields.
2357
3050
  *
2358
3051
  * Use `"Collection.addFields"` to check if this method is allowed.
3052
+ *
3053
+ * @param fields - The array of fields that should be added to the collection.
3054
+ * @returns The newly created Field instances.
3055
+ *
3056
+ * @example
3057
+ * ```ts
3058
+ * const createdFields = await collection.addFields([
3059
+ * { type: "string", name: "Name" },
3060
+ * { type: "enum", name: "Status", cases: [{ name: "New" }, { name: "Done" }] },
3061
+ * { type: "file", name: "Text", allowedFileTypes: ["md"] },
3062
+ * { type: "collectionReference", name: "Author", collectionId: "ASh5SZOh" },
3063
+ * ])
3064
+ * ```
2359
3065
  */
2360
3066
  addFields(fields: CreateField[]): Promise<Field[]>;
2361
3067
  /**
2362
- * Remove fields by their ID.
3068
+ * Remove fields from this Collection by their IDs.
2363
3069
  *
2364
3070
  * Use `"Collection.removeFields"` to check if this method is allowed.
3071
+ *
3072
+ * @param fieldIds - An array of field IDs to remove.
3073
+ *
3074
+ * @example
3075
+ * ```ts
3076
+ * await collection.removeFields([field3.id, field4.id])
3077
+ * ```
2365
3078
  */
2366
3079
  removeFields(fieldIds: string[]): Promise<void>;
2367
3080
  /**
2368
- * Arrange fields in a specific order.
3081
+ * Reorder the fields in this Collection based on an array of field IDs.
3082
+ * Unknown field IDs are ignored.
2369
3083
  *
2370
3084
  * Use `"Collection.setFieldOrder"` to check if this method is allowed.
3085
+ *
3086
+ * @param fieldIds - An array of field IDs representing the desired order.
3087
+ *
3088
+ * @example
3089
+ * ```ts
3090
+ * await collection.setFieldOrder([nameField.id, ageField.id])
3091
+ * ```
2371
3092
  */
2372
3093
  setFieldOrder(fieldIds: string[]): Promise<void>;
2373
3094
  /**
2374
- * Get all items in their set order.
3095
+ * Retrieve all items within this Collection, in their current order.
3096
+ * Items may include drafts (unpublished items).
3097
+ *
3098
+ * @returns An array of CollectionItem instances.
3099
+ *
3100
+ * @example
3101
+ * ```ts
3102
+ * const items = await collection.getItems()
3103
+ * ```
2375
3104
  */
2376
3105
  getItems(): Promise<CollectionItem[]>;
2377
3106
  /**
2378
- * Add new items or update existing ones if their IDs are provided.
3107
+ * Add new items to this Collection, or update existing ones if their IDs
3108
+ * match.
2379
3109
  *
2380
- * This creates a new item with "foo" as its slug:
3110
+ * - If an `id` is provided and matches an existing item, that item will be
3111
+ * updated.
3112
+ * - Items without an `id` are created as new records.
3113
+ * - `slug` should be unique.
2381
3114
  *
2382
- * ```ts
2383
- * collection.addItems([{ slug: "foo" }])
2384
- * ```
3115
+ * Use `"Collection.addItems"` to check if this method is allowed.
2385
3116
  *
2386
- * This updates an existing item with ID "aBc123" to have "bar" as its slug:
3117
+ * @param items - An array of items to add or update.
2387
3118
  *
3119
+ * @example
2388
3120
  * ```ts
2389
- * collection.addItems([{ id: "aBc123", slug: "bar" }])
2390
- * ```
3121
+ * // Create a new item
3122
+ * await collection.addItems([{
3123
+ * slug: "eric",
3124
+ * fieldData: {
3125
+ * [nameField.id]: { type: "string", value: "Eric" },
3126
+ * [ageField.id]: { type: "number", value: 47 },
3127
+ * },
3128
+ * }])
2391
3129
  *
2392
- * Use `"Collection.addItems"` to check if this method is allowed.
3130
+ * // Update an existing item
3131
+ * await collection.addItems([{ id: "aBc123", slug: "bar" }])
3132
+ * ```
2393
3133
  */
2394
3134
  addItems(items: CollectionItemInput[]): Promise<void>;
2395
3135
  /**
2396
- * Remove items by their ID.
3136
+ * Remove items from this Collection by their IDs.
2397
3137
  *
2398
3138
  * Use `"Collection.removeItems"` to check if this method is allowed.
3139
+ *
3140
+ * @param itemIds - An array of item IDs to remove.
3141
+ *
3142
+ * @example
3143
+ * ```ts
3144
+ * await collection.removeItems([item3.id, item4.id])
3145
+ * ```
2399
3146
  */
2400
3147
  removeItems(itemIds: NodeId[]): Promise<void>;
2401
3148
  /**
2402
- * Make this the active collection.
3149
+ * Set this Collection as active, changing the selected Collection in the
3150
+ * Framer UI.
3151
+ *
3152
+ * @example
3153
+ * ```ts
3154
+ * await collection.setAsActive()
3155
+ * ```
2403
3156
  */
2404
3157
  setAsActive(): Promise<void>;
2405
3158
  /**
2406
3159
  * Set plugin data by key.
2407
3160
  *
2408
3161
  * Use `"Collection.setPluginData"` to check if this method is allowed.
3162
+ *
3163
+ * @param key - The plugin data key.
3164
+ * @param value - The value to set, or `null` to remove.
2409
3165
  */
2410
3166
  setPluginData(key: string, value: string | null): Promise<void>;
2411
3167
  /**
2412
3168
  * Get plugin data by key.
3169
+ *
3170
+ * @param key - The plugin data key.
2413
3171
  */
2414
3172
  getPluginData(key: string): Promise<string | null>;
2415
3173
  /**
@@ -2421,36 +3179,77 @@ declare class Collection implements Navigable {
2421
3179
  */
2422
3180
  navigateTo(opts?: NavigableOptions): Promise<void>;
2423
3181
  }
3182
+ /**
3183
+ * An item (row) in a CMS Collection. Each item contains field data keyed by
3184
+ * field ID, a unique slug, and a draft status.
3185
+ */
2424
3186
  declare class CollectionItem implements Navigable {
2425
3187
  #private;
3188
+ /** A unique identifier for this Collection item. */
2426
3189
  readonly id: NodeId;
2427
3190
  /** External ID for managed collections, unique node ID otherwise. */
2428
3191
  readonly nodeId: NodeId;
3192
+ /** Slug value of the CMS item. Slugs should be unique within a Collection. */
2429
3193
  readonly slug: string;
2430
3194
  readonly slugByLocale: InlineLocalizationValueByLocale;
3195
+ /** Drafts are excluded from publishing. */
2431
3196
  readonly draft: boolean;
3197
+ /**
3198
+ * The fields and corresponding values of this Collection item. Field data
3199
+ * uses the field `id` as keys in an object.
3200
+ *
3201
+ * @example
3202
+ * ```ts
3203
+ * const titleFieldData = collectionItem.fieldData[titleField.id]
3204
+ * console.log(titleFieldData.value) // "Getting Started"
3205
+ * ```
3206
+ */
2432
3207
  readonly fieldData: Readonly<FieldData>;
2433
3208
  constructor(collectionItemData: CollectionItemSerializableData, engine: PluginEngine);
2434
3209
  /**
2435
- * Remove this item.
3210
+ * Remove this item from the Collection.
2436
3211
  *
2437
3212
  * Use `"CollectionItem.remove"` to check if this method is allowed.
3213
+ *
3214
+ * @example
3215
+ * ```ts
3216
+ * await collectionItem.remove()
3217
+ * ```
2438
3218
  */
2439
3219
  remove(): Promise<void>;
2440
3220
  /**
2441
- * Update the item.
3221
+ * Set the values of the fields of this CMS item. May return `null` if the
3222
+ * item was deleted before this method was called.
2442
3223
  *
2443
3224
  * Use `"CollectionItem.setAttributes"` to check if this method is allowed.
3225
+ *
3226
+ * @param update - The updated attributes for the collection item.
3227
+ * @returns The updated CollectionItem, or `null` if the item no longer exists.
3228
+ *
3229
+ * @example
3230
+ * ```ts
3231
+ * const updatedItem = await collectionItem.setAttributes({
3232
+ * slug: "new-slug",
3233
+ * fieldData: {
3234
+ * [ageField.id]: { type: "number", value: 48 },
3235
+ * },
3236
+ * })
3237
+ * ```
2444
3238
  */
2445
3239
  setAttributes(update: EditableCollectionItemAttributes): Promise<CollectionItem | null>;
2446
3240
  /**
2447
3241
  * Set plugin data by key.
2448
3242
  *
2449
3243
  * Use `"CollectionItem.setPluginData"` to check if this method is allowed.
3244
+ *
3245
+ * @param key - The plugin data key.
3246
+ * @param value - The value to set, or `null` to remove.
2450
3247
  */
2451
3248
  setPluginData(key: string, value: string | null): Promise<void>;
2452
3249
  /**
2453
3250
  * Get plugin data by key.
3251
+ *
3252
+ * @param key - The plugin data key.
2454
3253
  */
2455
3254
  getPluginData(key: string): Promise<string | null>;
2456
3255
  /**
@@ -2458,11 +3257,23 @@ declare class CollectionItem implements Navigable {
2458
3257
  */
2459
3258
  getPluginDataKeys(): Promise<string[]>;
2460
3259
  /**
2461
- * Navigate to this collection item. May switch modes to reveal the relevant view.
3260
+ * Navigate the UI to this Collection item. May switch modes to reveal the
3261
+ * relevant view, such as the CMS editor.
3262
+ *
3263
+ * @param opts - Optional navigation options, such as scrolling to a
3264
+ * specific field.
3265
+ *
3266
+ * @example
3267
+ * ```ts
3268
+ * await collectionItem.navigateTo({
3269
+ * scrollTo: { collectionFieldId: fieldId },
3270
+ * })
3271
+ * ```
2462
3272
  */
2463
3273
  navigateTo(opts?: NavigableOptions): Promise<void>;
2464
3274
  }
2465
3275
 
3276
+ /** Options for controlling the `zoomIntoView` behavior. */
2466
3277
  interface ZoomIntoViewOptions {
2467
3278
  /**
2468
3279
  * Set a percentage limit for the maximum zoom level.
@@ -2505,6 +3316,34 @@ interface NodeClassToEditableAttributes {
2505
3316
  VectorSetItemNode: EditableVectorSetItemNodeAttributes;
2506
3317
  UnknownNode: object;
2507
3318
  }
3319
+ /**
3320
+ * Base class providing common methods shared by all node types. Nodes are
3321
+ * the building blocks that make up the content in a project. They are
3322
+ * represented as "layers" in the editor UI.
3323
+ *
3324
+ * Every node has a unique {@link NodeMethods.id | id}. Nodes support
3325
+ * plugin data storage, tree traversal (parent/children), cloning,
3326
+ * removal, and attribute updates.
3327
+ *
3328
+ * Every node has an {@link NodeMethods.isReplica | isReplica} property
3329
+ * that indicates if the node is a replica. Replica nodes are used within
3330
+ * non-primary breakpoints and component variants, and inherit attributes
3331
+ * from the primary variant or breakpoint. Once a specific attribute is
3332
+ * overridden on a replica node, it is no longer inherited from the
3333
+ * primary node.
3334
+ *
3335
+ * @example
3336
+ * ```ts
3337
+ * // Get selected nodes.
3338
+ * const selection = await framer.getSelection()
3339
+ *
3340
+ * // Get a node by ID.
3341
+ * const node = await framer.getNode("some-node-id")
3342
+ *
3343
+ * // Get all frame nodes in a project.
3344
+ * const frameNodes = await framer.getNodesWithType("FrameNode")
3345
+ * ```
3346
+ */
2508
3347
  declare abstract class NodeMethods implements WithIdTrait, Navigable {
2509
3348
  #private;
2510
3349
  abstract readonly [classKey]: PluginNodeClass;
@@ -2513,33 +3352,45 @@ declare abstract class NodeMethods implements WithIdTrait, Navigable {
2513
3352
  constructor(data: SomeNodeData, engine: PluginEngine);
2514
3353
  get isReplica(): boolean;
2515
3354
  /**
2516
- * Remove this node.
3355
+ * Remove this node from the canvas tree.
2517
3356
  *
2518
3357
  * Use `"Node.remove"` to check if this method is allowed.
2519
3358
  */
2520
3359
  remove(): Promise<void>;
2521
3360
  /**
2522
- * Select this node.
3361
+ * Select this node on the canvas.
2523
3362
  */
2524
3363
  select(): Promise<void>;
2525
3364
  /**
2526
- * Clone this node.
3365
+ * Clone this node, creating a duplicate in the canvas tree.
3366
+ *
3367
+ * @returns The cloned node, or `null` if the clone failed.
3368
+ * @throws If the node is an `UnknownNode`.
2527
3369
  *
2528
3370
  * Use `"Node.clone"` to check if this method is allowed.
2529
3371
  */
2530
3372
  clone(): Promise<(typeof this)[ClassKey] extends "UnknownNode" ? never : typeof this | null>;
2531
3373
  /**
2532
- * Set the attributes of this node.
3374
+ * Set the attributes of this node. Attributes are merged with existing
3375
+ * values, so only the provided attributes are updated.
3376
+ *
3377
+ * @param update - The attributes to update.
3378
+ * @returns The updated node, or `null` if the node was not found.
3379
+ * @throws If the node is an `UnknownNode`.
2533
3380
  *
2534
3381
  * Use `"Node.setAttributes"` to check if this method is allowed.
2535
3382
  */
2536
3383
  setAttributes(update: Partial<NodeClassToEditableAttributes[(typeof this)[ClassKey]]>): Promise<(typeof this)[ClassKey] extends "UnknownNode" ? never : typeof this | null>;
2537
3384
  /**
2538
3385
  * Get the bounding box of this node.
3386
+ *
3387
+ * @returns The bounding rectangle, or `null` if unavailable.
2539
3388
  */
2540
3389
  getRect(): Promise<Rect$1 | null>;
2541
3390
  /**
2542
3391
  * Pans and zooms the viewport to center the node.
3392
+ *
3393
+ * @param options - Options like `maxZoom` and `skipIfVisible`.
2543
3394
  */
2544
3395
  zoomIntoView(options?: ZoomIntoViewOptions): Promise<void>;
2545
3396
  /**
@@ -2547,15 +3398,35 @@ declare abstract class NodeMethods implements WithIdTrait, Navigable {
2547
3398
  */
2548
3399
  navigateTo(opts?: Pick<NavigableOptions, "select" | "zoomIntoView">): Promise<void>;
2549
3400
  /**
2550
- * Get the parent of this node.
3401
+ * Get the parent of this node in the canvas tree.
3402
+ *
3403
+ * @returns The parent node, or `null` if this is a root node.
2551
3404
  */
2552
3405
  getParent(): Promise<AnyNode | null>;
2553
3406
  /**
2554
- * Get the children of this node.
3407
+ * Get the children of this node in the canvas tree.
3408
+ *
3409
+ * @returns An array of child nodes. Returns an empty array for `UnknownNode`.
2555
3410
  */
2556
3411
  getChildren(): Promise<CanvasNode[]>;
2557
3412
  /**
2558
- * Get `type` descendants of this node.
3413
+ * Get descendants of this node that match the given type. This can
3414
+ * also be used to query within a selection subtree.
3415
+ *
3416
+ * @param type - The node type to search for.
3417
+ * @returns An array of matching descendant nodes.
3418
+ *
3419
+ * @example
3420
+ * ```ts
3421
+ * // Get all frame nodes in a project.
3422
+ * const frameNodes = await framer.getNodesWithType("FrameNode")
3423
+ *
3424
+ * // Query within a selection subtree.
3425
+ * const selection = await framer.getSelection()
3426
+ * if (selection.length === 1) {
3427
+ * const frameNodes = await selection[0].getNodesWithType("FrameNode")
3428
+ * }
3429
+ * ```
2559
3430
  */
2560
3431
  getNodesWithType(type: "FrameNode"): Promise<FrameNode[]>;
2561
3432
  getNodesWithType(type: "TextNode"): Promise<TextNode[]>;
@@ -2565,29 +3436,61 @@ declare abstract class NodeMethods implements WithIdTrait, Navigable {
2565
3436
  getNodesWithType(type: "WebPageNode"): Promise<WebPageNode[]>;
2566
3437
  getNodesWithType(type: "ComponentNode"): Promise<ComponentNode[]>;
2567
3438
  /**
2568
- * Get the descendants of this node that support `attribute`.
3439
+ * Get the descendants of this node that support `attribute`. This
3440
+ * returns nodes that have the given attribute defined in their type,
3441
+ * regardless of whether it has been set.
3442
+ *
3443
+ * @param attribute - The attribute name to filter by.
3444
+ * @returns An array of nodes that support the attribute.
3445
+ *
3446
+ * @example
3447
+ * ```ts
3448
+ * // Get any kind of node that has a background color attribute.
3449
+ * const nodes = await framer.getNodesWithAttribute("backgroundColor")
3450
+ * ```
2569
3451
  */
2570
3452
  getNodesWithAttribute<T extends NodeAttributeKey, Node = NodeWithAttribute<T>>(attribute: T): Promise<Node[]>;
2571
3453
  /**
2572
- * Get the descendants of this node that have `attribute` set.
3454
+ * Get the descendants of this node that have `attribute` set to a
3455
+ * non-null value.
3456
+ *
3457
+ * @param attribute - The attribute name to filter by.
3458
+ * @returns An array of nodes that have the attribute set.
3459
+ *
3460
+ * @example
3461
+ * ```ts
3462
+ * // Get all nodes with a background image set.
3463
+ * const nodes = await framer.getNodesWithAttributeSet("backgroundImage")
3464
+ * ```
2573
3465
  */
2574
3466
  getNodesWithAttributeSet<T extends NodeAttributeKey, Node = NodeWithAttribute<T>>(attribute: T): Promise<Node[]>;
2575
3467
  /**
2576
- * Walk this node and its descendants recursively.
3468
+ * Walk this node and its descendants recursively using an async
3469
+ * generator. Yields nodes depth-first.
2577
3470
  */
2578
3471
  walk(this: AnyNode): AsyncGenerator<AnyNode>;
2579
3472
  /**
2580
- * Get plugin data by key.
3473
+ * Get plugin data by key. Plugin data lets you store arbitrary
3474
+ * string values on individual nodes, scoped to your plugin.
3475
+ *
3476
+ * @param key - The plugin data key.
3477
+ * @returns The stored value, or `null` if no data exists for the key.
2581
3478
  */
2582
3479
  getPluginData(key: string): Promise<string | null>;
2583
3480
  /**
2584
- * Set plugin data by key.
3481
+ * Set plugin data by key. Plugin data lets you store arbitrary
3482
+ * string values on individual nodes, scoped to your plugin.
3483
+ *
3484
+ * @param key - The plugin data key.
3485
+ * @param value - The value to set, or `null` to remove.
2585
3486
  *
2586
3487
  * Use `"Node.setPluginData"` to check if this method is allowed.
2587
3488
  */
2588
3489
  setPluginData(key: string, value: string | null): Promise<void>;
2589
3490
  /**
2590
- * Get all plugin data keys.
3491
+ * Get all plugin data keys stored on this node.
3492
+ *
3493
+ * @returns An array of all plugin data keys.
2591
3494
  */
2592
3495
  getPluginDataKeys(): Promise<string[]>;
2593
3496
  }
@@ -2598,6 +3501,11 @@ interface EditableFrameNodeAttributes extends DrawableNode, WithPositionTrait, W
2598
3501
  interface FrameNodeData extends CommonNodeData, Partial<DrawableNode>, WithPositionTrait, Partial<WithComponentVariantTrait>, Partial<WithPinsTrait>, Partial<WithSizeTrait>, Partial<WithSizeConstraintsTrait>, Partial<WithAspectRatioTrait>, Partial<WithZIndexTrait>, Partial<WithOverflowTrait>, Partial<WithBackgroundColorTrait<TraitVariantData>>, Partial<WithBackgroundImageTrait<TraitVariantData>>, Partial<WithBackgroundGradientTrait<TraitVariantData>>, Partial<WithRotationTrait>, Partial<WithLinkTrait>, Partial<WithBorderRadiusTrait>, Partial<WithBorderTrait<TraitVariantData>>, Partial<WithLayoutTrait>, Partial<WithGridItemTrait>, Partial<WithBreakpointTrait>, Partial<WithImageRenderingTrait> {
2599
3502
  [classKey]: "FrameNode";
2600
3503
  }
3504
+ /**
3505
+ * A frame layer on the canvas, the most common container node. Frames
3506
+ * can contain children, have layout settings, backgrounds, borders, and
3507
+ * can serve as breakpoint or component variants.
3508
+ */
2601
3509
  declare class FrameNode extends NodeMethods implements EditableFrameNodeAttributes, WithBreakpointTrait {
2602
3510
  readonly [classKey]: FrameNodeData[ClassKey];
2603
3511
  readonly name: string | null;
@@ -2665,6 +3573,22 @@ interface EditableTextNodeAttributes extends DrawableNode, WithPositionTrait, Wi
2665
3573
  interface TextNodeData extends CommonNodeData, Partial<DrawableNode>, WithPositionTrait, Partial<WithPinsTrait>, Partial<WithSizeTrait>, Partial<WithSizeConstraintsTrait>, Partial<WithRotationTrait>, Partial<WithZIndexTrait>, Partial<WithLinkTrait>, Partial<WithOverflowTrait>, Partial<WithTextTruncationTrait>, Partial<WithFontTrait<TraitVariantData>>, Partial<WithInlineTextStyleTrait<TraitVariantData>>, Partial<WithGridItemTrait> {
2666
3574
  [classKey]: "TextNode";
2667
3575
  }
3576
+ /**
3577
+ * A text layer on the canvas. Use {@link TextNode.setText | setText} and
3578
+ * {@link TextNode.getText | getText} to work with plain text, or
3579
+ * {@link TextNode.setHTML | setHTML} and {@link TextNode.getHTML | getHTML}
3580
+ * for rich text content.
3581
+ *
3582
+ * @example
3583
+ * ```ts
3584
+ * const selection = await framer.getSelection()
3585
+ * for (const node of selection) {
3586
+ * if (isTextNode(node)) {
3587
+ * node.setText("Hello!")
3588
+ * }
3589
+ * }
3590
+ * ```
3591
+ */
2668
3592
  declare class TextNode extends NodeMethods implements EditableTextNodeAttributes {
2669
3593
  #private;
2670
3594
  readonly [classKey]: TextNodeData[ClassKey];
@@ -2730,6 +3654,10 @@ interface EditableSVGNodeAttributes extends DrawableNode, WithPositionTrait, Wit
2730
3654
  interface SVGNodeData extends CommonNodeData, Partial<DrawableNode>, WithPositionTrait, Partial<WithPinsTrait>, Partial<WithSizeTrait>, WithSVGTrait, Partial<WithRotationTrait> {
2731
3655
  [classKey]: "SVGNode";
2732
3656
  }
3657
+ /**
3658
+ * An SVG graphic layer on the canvas. Contains the raw SVG string and
3659
+ * supports positioning, sizing, rotation, and visibility.
3660
+ */
2733
3661
  declare class SVGNode extends NodeMethods implements EditableSVGNodeAttributes {
2734
3662
  readonly [classKey]: SVGNodeData[ClassKey];
2735
3663
  readonly name: string | null;
@@ -2754,6 +3682,7 @@ interface EditableVectorSetItemNodeAttributes extends WithNameTrait, WithVisible
2754
3682
  interface VectorSetItemNodeData extends CommonNodeData, Partial<WithNameTrait>, Partial<WithVisibleTrait>, Partial<WithLockedTrait>, Partial<WithPinsTrait>, Partial<WithSizeTrait> {
2755
3683
  [classKey]: "VectorSetItemNode";
2756
3684
  }
3685
+ /** An individual item within a VectorSet node. */
2757
3686
  declare class VectorSetItemNode extends NodeMethods implements EditableVectorSetItemNodeAttributes {
2758
3687
  #private;
2759
3688
  readonly [classKey]: VectorSetItemNodeData[ClassKey];
@@ -2776,6 +3705,21 @@ interface EditableComponentInstanceNodeAttributes extends DrawableNode, WithPosi
2776
3705
  interface ComponentInstanceNodeData extends CommonNodeData, Partial<DrawableNode>, WithPositionTrait, Partial<WithPinsTrait>, Partial<WithSizeTrait>, Partial<WithSizeConstraintsTrait>, Partial<WithAspectRatioTrait>, Partial<WithControlAttributesTrait>, Partial<WithTypedControlsTrait>, WithRequiredComponentInfoTrait, Partial<WithNullableComponentInfoTrait>, Partial<WithRotationTrait> {
2777
3706
  [classKey]: "ComponentInstanceNode";
2778
3707
  }
3708
+ /**
3709
+ * An instance of a code or design component on the canvas. Component
3710
+ * instances are identified by their {@link ComponentInstanceNode.componentIdentifier | componentIdentifier}
3711
+ * and can have their control properties updated via
3712
+ * {@link NodeMethods.setAttributes | setAttributes}.
3713
+ *
3714
+ * @example
3715
+ * ```ts
3716
+ * if (isCodeComponentNode(selection)) {
3717
+ * selection.setAttributes({
3718
+ * controls: { radius: 10 }
3719
+ * })
3720
+ * }
3721
+ * ```
3722
+ */
2779
3723
  declare class ComponentInstanceNode extends NodeMethods implements EditableComponentInstanceNodeAttributes, WithComponentInfoTrait {
2780
3724
  #private;
2781
3725
  readonly [classKey]: ComponentInstanceNodeData[ClassKey];
@@ -2816,6 +3760,11 @@ type EditableWebPageNodeAttributes = object;
2816
3760
  interface WebPageNodeData extends CommonNodeData, Partial<WithWebPageInfoTrait> {
2817
3761
  [classKey]: "WebPageNode";
2818
3762
  }
3763
+ /**
3764
+ * A web page in the project's site map. Web pages have a
3765
+ * {@link WebPageNode.path | path} and may be associated with a CMS
3766
+ * collection when used as a detail page.
3767
+ */
2819
3768
  declare class WebPageNode extends NodeMethods implements EditableWebPageNodeAttributes, WithWebPageInfoTrait {
2820
3769
  #private;
2821
3770
  readonly [classKey]: WebPageNodeData[ClassKey];
@@ -2854,6 +3803,11 @@ type EditableComponentNodeAttributes = WithNameTrait;
2854
3803
  interface ComponentNodeData extends CommonNodeData, Partial<WithNameTrait>, WithRequiredComponentInfoTrait, Partial<WithNullableComponentInfoTrait> {
2855
3804
  [classKey]: "ComponentNode";
2856
3805
  }
3806
+ /**
3807
+ * A reusable design component definition. Component nodes contain
3808
+ * variants, gesture states, and variables. They can be inserted as
3809
+ * instances via their module URL.
3810
+ */
2857
3811
  declare class ComponentNode extends NodeMethods implements EditableComponentNodeAttributes, WithComponentInfoTrait {
2858
3812
  #private;
2859
3813
  readonly [classKey]: ComponentNodeData[ClassKey];
@@ -2920,6 +3874,7 @@ type EditableVectorSetNodeAttributes = WithNameTrait;
2920
3874
  interface VectorSetNodeData extends CommonNodeData, Partial<WithNameTrait> {
2921
3875
  [classKey]: "VectorSetNode";
2922
3876
  }
3877
+ /** A container node for a set of vector icons. */
2923
3878
  declare class VectorSetNode extends NodeMethods implements EditableVectorSetNodeAttributes {
2924
3879
  readonly [classKey]: VectorSetNodeData[ClassKey];
2925
3880
  readonly name: string | null;
@@ -2929,6 +3884,7 @@ type EditableDesignPageNodeAttributes = WithNameTrait;
2929
3884
  interface DesignPageNodeData extends CommonNodeData, Partial<WithNameTrait> {
2930
3885
  [classKey]: "DesignPageNode";
2931
3886
  }
3887
+ /** A design page (non-web canvas) in the project. */
2932
3888
  declare class DesignPageNode extends NodeMethods implements EditableDesignPageNodeAttributes {
2933
3889
  readonly [classKey]: DesignPageNodeData[ClassKey];
2934
3890
  readonly name: string | null;
@@ -2937,6 +3893,11 @@ declare class DesignPageNode extends NodeMethods implements EditableDesignPageNo
2937
3893
  interface UnknownNodeData extends CommonNodeData {
2938
3894
  [classKey]: "UnknownNode";
2939
3895
  }
3896
+ /**
3897
+ * A node whose type is not recognized by the current plugin API version.
3898
+ * Unknown nodes cannot be cloned, have their attributes set, or return
3899
+ * children.
3900
+ */
2940
3901
  declare class UnknownNode extends NodeMethods {
2941
3902
  readonly [classKey]: UnknownNodeData[ClassKey];
2942
3903
  constructor(rawData: UnknownNodeData, engine: PluginEngine);
@@ -2989,27 +3950,37 @@ interface ApiVersion1User {
2989
3950
  /** Hashed user id */
2990
3951
  id: string;
2991
3952
  }
3953
+ /** Information about a Framer user. */
2992
3954
  interface User extends ApiVersion1User {
2993
3955
  /** Hashed user id served by API version 1, use for migration only */
2994
3956
  apiVersion1Id: string;
3957
+ /** URL to the user's avatar image, if available. */
2995
3958
  avatarUrl?: string | undefined;
2996
- /** For when there is no avatar. */
3959
+ /** Initials of the user's name, for use when no avatar is available. */
2997
3960
  initials: string;
2998
3961
  }
2999
3962
 
3000
3963
  interface CodeExportCommon {
3964
+ /** The export name. */
3001
3965
  name: string;
3966
+ /** Whether this is the default export of the file. */
3002
3967
  isDefaultExport: boolean;
3003
3968
  }
3969
+ /** A component export from a code file. */
3004
3970
  interface CodeFileComponentExport extends CodeExportCommon {
3971
+ /** URL that can be used with `addComponentInstance` to insert this export onto the canvas. */
3005
3972
  insertURL: string;
3973
+ /** Discriminator indicating this is a component export. */
3006
3974
  type: "component";
3007
3975
  }
3976
+ /** An override export from a code file. */
3008
3977
  interface CodeFileOverrideExport extends CodeExportCommon {
3978
+ /** Discriminator indicating this is an override export. */
3009
3979
  type: "override";
3010
3980
  }
3011
3981
  declare function isCodeFileComponentExport(exportItem: CodeFileExport): exportItem is CodeFileComponentExport;
3012
3982
  declare function isCodeFileOverrideExport(exportItem: CodeFileExport): exportItem is CodeFileOverrideExport;
3983
+ /** Union of possible code file export types: component or override. */
3013
3984
  type CodeFileExport = CodeFileComponentExport | CodeFileOverrideExport;
3014
3985
  /** @alpha */
3015
3986
  type ShowProgressOnInstancesAttributes = Pick<ComponentInstancePlaceholderAttributes, "title" | "codePreview">;
@@ -3026,44 +3997,103 @@ interface CodeFileVersionData extends Pick<CodeFileData, "id" | "name"> {
3026
3997
  createdAt: string;
3027
3998
  createdBy: User;
3028
3999
  }
4000
+ /**
4001
+ * A saved version (snapshot) of a code file.
4002
+ */
3029
4003
  declare class CodeFileVersion {
3030
4004
  #private;
4005
+ /** The unique identifier of the version. */
3031
4006
  get id(): string;
4007
+ /** The file name at this version. */
3032
4008
  get name(): string;
4009
+ /** The ISO 8601 timestamp of when the version was created. */
3033
4010
  get createdAt(): string;
4011
+ /** The user who created this version. */
3034
4012
  get createdBy(): Readonly<User>;
3035
4013
  constructor(data: CodeFileVersionData, engine: PluginEngine);
4014
+ /**
4015
+ * Retrieve the source code content of this version.
4016
+ *
4017
+ * @example
4018
+ * ```ts
4019
+ * const previousContent = await version.getContent()
4020
+ * ```
4021
+ *
4022
+ * @returns The file content as a string.
4023
+ */
3036
4024
  getContent(): Promise<string>;
3037
4025
  }
4026
+ /**
4027
+ * Represents a code file in the Framer project, such as a code component
4028
+ * or code override.
4029
+ */
3038
4030
  declare class CodeFile implements Navigable {
3039
4031
  #private;
4032
+ /** The unique identifier of the code file. */
3040
4033
  get id(): string;
4034
+ /** The name of the code file (e.g., `"MyComponent.tsx"`). */
3041
4035
  get name(): string;
4036
+ /** The file system path of the code file within the project. */
3042
4037
  get path(): string;
4038
+ /** The current source code content of the file. */
3043
4039
  get content(): string;
4040
+ /** The array of exports available in this code file (components and overrides). */
3044
4041
  get exports(): readonly CodeFileExport[];
3045
4042
  get versionId(): string;
3046
4043
  constructor(data: CodeFileData, engine: PluginEngine);
3047
4044
  /**
3048
- * Set the content of this code file.
4045
+ * Set the content of this code file. Creates a new version.
4046
+ *
4047
+ * @example
4048
+ * ```ts
4049
+ * const updatedFile = await codeFile.setFileContent(
4050
+ * `export default function MyComponent() {
4051
+ * return <div>Hello World</div>
4052
+ * }`
4053
+ * )
4054
+ * ```
3049
4055
  *
3050
4056
  * Use `"CodeFile.setFileContent"` to check if this method is allowed.
4057
+ *
4058
+ * @param code - The new source code content.
4059
+ * @returns The updated CodeFile instance.
3051
4060
  */
3052
4061
  setFileContent(code: string): Promise<CodeFile>;
3053
4062
  /**
3054
4063
  * Rename this code file.
3055
4064
  *
4065
+ * @example
4066
+ * ```ts
4067
+ * const renamedFile = await codeFile.rename("NewComponentName.tsx")
4068
+ * ```
4069
+ *
3056
4070
  * Use `"CodeFile.rename"` to check if this method is allowed.
4071
+ *
4072
+ * @param newName - The new name for the file.
4073
+ * @returns The updated CodeFile instance.
3057
4074
  */
3058
4075
  rename(newName: string): Promise<CodeFile>;
3059
4076
  /**
3060
- * Remove this code file.
4077
+ * Remove this code file from the project.
4078
+ *
4079
+ * @example
4080
+ * ```ts
4081
+ * await codeFile.remove()
4082
+ * ```
3061
4083
  *
3062
4084
  * Use `"CodeFile.remove"` to check if this method is allowed.
3063
4085
  */
3064
4086
  remove(): Promise<void>;
3065
4087
  /**
3066
- * Get all versions of this code file.
4088
+ * Get all versions (history) of this code file.
4089
+ *
4090
+ * @example
4091
+ * ```ts
4092
+ * const versions = await codeFile.getVersions()
4093
+ * console.log(`File has ${versions.length} versions`)
4094
+ * ```
4095
+ *
4096
+ * @returns An array of CodeFileVersion instances.
3067
4097
  */
3068
4098
  getVersions(): Promise<readonly CodeFileVersion[]>;
3069
4099
  /** @alpha */
@@ -3074,18 +4104,41 @@ declare class CodeFile implements Navigable {
3074
4104
  * @deprecated The implementation of this method was removed. The method will always return an empty array. The method will be removed in the near future.
3075
4105
  */
3076
4106
  lint(_rules: LintConfig): Promise<LintDiagnostic[]>;
4107
+ /**
4108
+ * Run TypeScript type checking on this code file.
4109
+ *
4110
+ * @example
4111
+ * ```ts
4112
+ * const typeErrors = await codeFile.typecheck({
4113
+ * strict: true
4114
+ * })
4115
+ * ```
4116
+ *
4117
+ * @param compilerOptions - Optional TypeScript compiler options. See the TypeScript
4118
+ * CompilerOptions reference for all available options.
4119
+ * @returns An array of `TypecheckDiagnostic` results.
4120
+ */
3077
4121
  typecheck(compilerOptions?: ts.server.protocol.CompilerOptions): Promise<TypecheckDiagnostic[]>;
3078
4122
  /**
3079
- * Navigate to this code file. May switch modes to reveal the relevant view.
4123
+ * Navigate to this code file in the Code Editor. May switch modes to
4124
+ * reveal the relevant view.
4125
+ *
4126
+ * @example
4127
+ * ```ts
4128
+ * await codeFile.navigateTo()
4129
+ * ```
3080
4130
  */
3081
4131
  navigateTo(): Promise<void>;
3082
4132
  }
3083
4133
 
4134
+ /** Where in the HTML document the custom code is injected. */
3084
4135
  type CustomCodeLocation = "headStart" | "headEnd" | "bodyStart" | "bodyEnd";
4136
+ /** Options for setting custom HTML code on the site. A plugin can only set custom code once per location. */
3085
4137
  interface SetCustomCodeOptions {
3086
4138
  html: string | null;
3087
4139
  location: CustomCodeLocation;
3088
4140
  }
4141
+ /** Custom HTML code settings for all injection locations, including disabled state. */
3089
4142
  type CustomCode = Record<CustomCodeLocation, {
3090
4143
  disabled: boolean;
3091
4144
  html: string | null;
@@ -3118,6 +4171,16 @@ interface DetachedComponentLayersDragData extends WithOptionalName$1, WithOption
3118
4171
  layout?: boolean;
3119
4172
  attributes?: Partial<EditableComponentInstanceNodeAttributes>;
3120
4173
  }
4174
+ /**
4175
+ * Data describing what is being dragged onto the canvas. Different types
4176
+ * of drag data result in different canvas insertions.
4177
+ *
4178
+ * Supported drag types:
4179
+ * - `"image"` - An image with an optional preview image, alt text, and resolution.
4180
+ * - `"svg"` - An SVG string with an optional preview image. Use `invertInDarkMode` to invert the drag preview in dark mode.
4181
+ * - `"componentInstance"` - A component instance identified by its module URL.
4182
+ * - `"detachedComponentLayers"` - Detached layers from a component designed in Framer. Use `layout: true` to insert as a layout block.
4183
+ */
3121
4184
  type DragData = SvgDragData | ImageDragData | ComponentInstanceDragData | DetachedComponentLayersDragData;
3122
4185
  interface Point {
3123
4186
  x: number;
@@ -3146,16 +4209,37 @@ type DragEndInfo = DragSessionId & {
3146
4209
  interface DragCompleteSuccess {
3147
4210
  /** Whether the drag was successful or not. */
3148
4211
  status: "success";
3149
- /** The inserted node id. */
4212
+ /** The ID of the node that was inserted. Only available when the drag succeeded. */
3150
4213
  nodeId: NodeId;
3151
4214
  }
3152
4215
  interface DragCompleteError {
3153
4216
  /** Whether the drag was successful or not. */
3154
4217
  status: "error";
3155
- /** Reason for the error, if available. */
4218
+ /** The reason why the drag failed. Only available when the drag failed. */
3156
4219
  reason?: string;
3157
4220
  }
4221
+ /**
4222
+ * The result of a drag operation, indicating success or failure.
4223
+ *
4224
+ * @example
4225
+ * ```ts
4226
+ * onDragComplete={(result) => {
4227
+ * if (result.status === "error") {
4228
+ * framer.notify(result.reason ?? "Unknown error");
4229
+ * return;
4230
+ * }
4231
+ *
4232
+ * framer.notify("Image uploaded successfully");
4233
+ * }}
4234
+ * ```
4235
+ */
3158
4236
  type DragCompleteResult = DragCompleteSuccess | DragCompleteError;
4237
+ /**
4238
+ * Callback invoked when a drag operation completes. Receives a
4239
+ * {@link DragCompleteResult} indicating whether the drag was successful
4240
+ * or not, including the inserted node ID on success or an error reason
4241
+ * on failure.
4242
+ */
3159
4243
  type DragCompleteCallback = (result: DragCompleteResult) => void;
3160
4244
 
3161
4245
  declare const publish: unique symbol;
@@ -3198,14 +4282,29 @@ interface VectorSetItemVariable {
3198
4282
  id: string;
3199
4283
  name: string;
3200
4284
  }
4285
+ /**
4286
+ * A set of vector icons available in the project.
4287
+ *
4288
+ * @alpha
4289
+ */
3201
4290
  declare class VectorSet {
3202
4291
  #private;
3203
4292
  id: string;
3204
4293
  name: string;
3205
4294
  owner: Ownership;
3206
4295
  constructor(data: VectorSetData, engine: PluginEngine);
4296
+ /**
4297
+ * Get all vector items in this set.
4298
+ *
4299
+ * @returns An array of VectorSetItem instances.
4300
+ */
3207
4301
  getItems(): Promise<VectorSetItem[]>;
3208
4302
  }
4303
+ /**
4304
+ * An individual vector icon within a VectorSet.
4305
+ *
4306
+ * @alpha
4307
+ */
3209
4308
  declare class VectorSetItem {
3210
4309
  #private;
3211
4310
  id: string;
@@ -3213,6 +4312,11 @@ declare class VectorSetItem {
3213
4312
  insertUrl: string;
3214
4313
  iconUrl: string;
3215
4314
  constructor(data: VectorSetItemData, engine: PluginEngine);
4315
+ /**
4316
+ * Get the customizable variables (e.g. color, stroke width) for this vector item.
4317
+ *
4318
+ * @returns An array of variable definitions.
4319
+ */
3216
4320
  getVariables(): Promise<VectorSetItemVariable[]>;
3217
4321
  }
3218
4322
 
@@ -3527,25 +4631,65 @@ interface UpdateRedirect extends Partial<RedirectAttributes>, Partial<WithToFiel
3527
4631
  id: string;
3528
4632
  }
3529
4633
  type RedirectInput = Prettify<CreateRedirect | UpdateRedirect>;
4634
+ /**
4635
+ * A URL redirect configured in the project. Redirects are applied when
4636
+ * the site is published.
4637
+ */
3530
4638
  declare class Redirect {
3531
4639
  #private;
3532
- /** The id of the redirect. */
4640
+ /** A unique identifier for the redirect. */
3533
4641
  get id(): string;
3534
- /** The source path to redirect from. */
4642
+ /** The source path of the redirect. */
3535
4643
  get from(): string;
3536
- /** The destination path to redirect to. */
4644
+ /**
4645
+ * The destination path of the redirect.
4646
+ *
4647
+ * When a redirect points to an existing page, the `to` value will
4648
+ * always point to that page. This property will be set to `null` if
4649
+ * the page it points to was removed.
4650
+ */
3537
4651
  get to(): string | null;
3538
- /** Whether to expand the redirect to all locales. */
4652
+ /**
4653
+ * Whether the redirect is expanded to all locales. When enabled, the
4654
+ * redirect will apply not only in the base locale, but also in all
4655
+ * other locales in the project.
4656
+ *
4657
+ * For example, for a project with a Spanish locale, the following
4658
+ * would redirect both `/business` to `/enterprise`, and
4659
+ * `/es/business` to `/es/enterprise`.
4660
+ *
4661
+ * @example
4662
+ * ```ts
4663
+ * await framer.addRedirects([
4664
+ * { from: "/business", to: "/enterprise", expandToAllLocales: true }
4665
+ * ])
4666
+ * ```
4667
+ */
3539
4668
  get expandToAllLocales(): boolean;
3540
4669
  constructor(data: RedirectData, engine: PluginEngine);
3541
4670
  /**
3542
4671
  * Remove the redirect.
4672
+ *
4673
+ * @returns A promise that resolves when the redirect is removed.
4674
+ *
4675
+ * @example
4676
+ * ```ts
4677
+ * await redirect.remove()
4678
+ * ```
3543
4679
  */
3544
4680
  remove(): Promise<void>;
3545
4681
  /**
3546
- * Update the redirect attributes.
4682
+ * Set the attributes of a redirect.
3547
4683
  *
4684
+ * @param attributes - The updated attributes and their new values.
3548
4685
  * @returns The updated redirect, or `null` if the redirect was not found.
4686
+ * @throws When the current user does not have permission to edit Site Settings, a `FramerPluginError` is thrown.
4687
+ * @throws When the current project is not on a plan that includes redirects, a `FramerPluginError` is thrown.
4688
+ *
4689
+ * @example
4690
+ * ```ts
4691
+ * await redirect.setAttributes({ from: "/new-url" })
4692
+ * ```
3549
4693
  */
3550
4694
  setAttributes(attributes: Partial<CreateRedirect>): Promise<Redirect | null>;
3551
4695
  }
@@ -3679,9 +4823,11 @@ type InitialState = {
3679
4823
  intent: "collection/add";
3680
4824
  };
3681
4825
 
4826
+ /** A visual separator between menu items. */
3682
4827
  interface SeparatorMenuItem {
3683
4828
  type: "separator";
3684
4829
  }
4830
+ /** An actionable menu item with a label and optional submenu. */
3685
4831
  interface NormalMenuItem {
3686
4832
  type?: never;
3687
4833
  label: string;
@@ -3692,6 +4838,7 @@ interface NormalMenuItem {
3692
4838
  submenu?: MenuItem[];
3693
4839
  onAction?: () => void;
3694
4840
  }
4841
+ /** A menu item, either a normal action item or a separator. */
3695
4842
  type MenuItem = NormalMenuItem | SeparatorMenuItem;
3696
4843
  type NormalMenuItemSerializable = Omit<NormalMenuItem, "onAction" | "submenu"> & {
3697
4844
  actionId?: number;
@@ -3701,6 +4848,7 @@ type MenuItemSerializable = NormalMenuItemSerializable | SeparatorMenuItem;
3701
4848
  type MenuPlacementVertical = "top" | "bottom";
3702
4849
  type MenuPlacementHorizontal = "left" | "right";
3703
4850
  type MenuPlacement = MenuPlacementVertical | MenuPlacementHorizontal | `${MenuPlacementVertical}-${MenuPlacementHorizontal}`;
4851
+ /** Configuration for positioning and sizing a context menu. */
3704
4852
  interface ContextMenuConfig {
3705
4853
  /**
3706
4854
  * Coordinates of the anchor point.
@@ -3725,6 +4873,7 @@ interface NotifyOptionsBase {
3725
4873
  variant?: NotificationVariant;
3726
4874
  durationMs?: number;
3727
4875
  }
4876
+ /** Options for customizing a notification. */
3728
4877
  interface NotifyOptions extends NotifyOptionsBase {
3729
4878
  /** A button to be displayed on the notification */
3730
4879
  button?: {
@@ -3740,10 +4889,12 @@ interface NotifyOptionsData extends NotifyOptionsBase {
3740
4889
  buttonText?: string;
3741
4890
  notificationId: string;
3742
4891
  }
4892
+ /** A handle to an active notification, allowing it to be closed programmatically. */
3743
4893
  interface Notification {
3744
4894
  close: () => Promise<void>;
3745
4895
  }
3746
4896
  type NotificationCloseReason = "timeoutReachedOrDismissed" | "actionButtonClicked";
4897
+ /** Function signature for displaying a notification message. */
3747
4898
  type Notify = (message: string, options?: NotifyOptions) => Notification;
3748
4899
 
3749
4900
  /**
@@ -3751,7 +4902,8 @@ type Notify = (message: string, options?: NotifyOptions) => Notification;
3751
4902
  */
3752
4903
  interface NavigableOptions {
3753
4904
  /**
3754
- * Selects the item after navigation (e.g., opens the editor for a CollectionItem or selects it on the canvas).
4905
+ * Selects the item after navigation. Selects the item on the canvas or opens
4906
+ * the editor sidebar on a collection item.
3755
4907
  * @default true
3756
4908
  */
3757
4909
  select?: boolean | undefined;
@@ -3800,7 +4952,19 @@ interface AiServiceInfo {
3800
4952
  declare class FramerPluginAPI {
3801
4953
  #private;
3802
4954
  constructor(engine: PluginEngine);
3803
- /** Get the current mode. A plugin can launch in a special mode where only a subset of the API is allowed. */
4955
+ /**
4956
+ * Get the current mode. A plugin can launch in a special mode where only a
4957
+ * subset of the API is allowed. The mode is set when the plugin launches
4958
+ * and never changes while the plugin is active.
4959
+ *
4960
+ * @example
4961
+ * ```ts
4962
+ * if (framer.mode === "image" || framer.mode === "editImage") {
4963
+ * // Do image mode specific logic
4964
+ * return
4965
+ * }
4966
+ * ```
4967
+ */
3804
4968
  get mode(): Mode;
3805
4969
  /**
3806
4970
  * Find out if user's permissions allow them to execute all of `methods`:
@@ -3810,8 +4974,18 @@ declare class FramerPluginAPI {
3810
4974
  * if (framer.isAllowedTo("Collection.setItemOrder")) await collection.setItemOrder(...)
3811
4975
  * ```
3812
4976
  *
4977
+ * For class instance methods (e.g., `CollectionItem.remove`), prefix with
4978
+ * the class name. Multiple methods can be checked at once; the result is
4979
+ * `true` only if all are allowed.
4980
+ *
3813
4981
  * Note that when the result of the permission check affects the UI, it's better to use the
3814
4982
  * `subscribeToIsAllowedTo` method, or `useIsAllowedTo` if using React.
4983
+ *
4984
+ * A `FramerPluginError` is thrown if a protected method is called without
4985
+ * sufficient permissions.
4986
+ *
4987
+ * @param methods - The methods to check, at least one.
4988
+ * @returns `true` if all of `methods` can be executed, `false` otherwise.
3815
4989
  */
3816
4990
  isAllowedTo(...methods: [ProtectedMethod, ...ProtectedMethod[]]): boolean;
3817
4991
  /**
@@ -3825,21 +4999,80 @@ declare class FramerPluginAPI {
3825
4999
  * ```
3826
5000
  *
3827
5001
  * Refer to `useIsAllowedTo` for a React hook version of this.
5002
+ *
5003
+ * @param methods - The methods to check, at least one.
5004
+ * @param callback - Called every time the isAllowed result changes, where `isAllowed` is `true` if all of `methods` can be executed.
5005
+ * @returns A function to call to unsubscribe.
3828
5006
  */
3829
5007
  subscribeToIsAllowedTo(...args: [...methods: [ProtectedMethod, ...ProtectedMethod[]], callback: (isAllowed: boolean) => void]): Unsubscribe$1;
3830
- /** Show the plugin UI. */
5008
+ /**
5009
+ * Show the plugin window.
5010
+ *
5011
+ * @param options - The options for how to show the UI.
5012
+ *
5013
+ * @example
5014
+ * ```ts
5015
+ * framer.showUI({
5016
+ * position: "center",
5017
+ * height: 300,
5018
+ * width: 220
5019
+ * })
5020
+ * ```
5021
+ */
3831
5022
  showUI(options?: UIOptions): Promise<void>;
3832
- /** Hide the plugin window, without stopping the plugin. */
5023
+ /**
5024
+ * Hide the plugin window, without stopping the plugin.
5025
+ *
5026
+ * The plugin continues to run in the background after hiding. Use
5027
+ * `setBackgroundMessage` to communicate status while hidden.
5028
+ *
5029
+ * @example
5030
+ * ```ts
5031
+ * framer.hideUI()
5032
+ * ```
5033
+ */
3833
5034
  hideUI(): Promise<void>;
3834
- /** Update the background status text shown while the plugin UI is hidden. */
5035
+ /**
5036
+ * Update the background status text shown while the plugin UI is hidden.
5037
+ * This allows plugins running in the background to communicate their current
5038
+ * status to users.
5039
+ *
5040
+ * Set to `null` to clear the message.
5041
+ *
5042
+ * @param status - The message to display, or `null` to clear.
5043
+ *
5044
+ * @example
5045
+ * ```ts
5046
+ * await framer.hideUI()
5047
+ * await framer.setBackgroundMessage("Syncing data...")
5048
+ *
5049
+ * // Clear the status message
5050
+ * await framer.setBackgroundMessage(null)
5051
+ * ```
5052
+ */
3835
5053
  setBackgroundMessage(status: string | null): Promise<void>;
3836
5054
  /**
3837
- * Stop the plugin. Throws `FramerPluginClosedError`, which should be ignored.
5055
+ * Close and terminate the plugin. Throws `FramerPluginClosedError`, which should be ignored.
5056
+ *
3838
5057
  * @param message - Optional message to show in the notification (ignored if options.silent is true)
3839
5058
  * @param options - Options to control the close behaviour
5059
+ *
5060
+ * @example
5061
+ * ```ts
5062
+ * await framer.closePlugin("Synchronization successful", {
5063
+ * variant: "success",
5064
+ * })
5065
+ * ```
3840
5066
  */
3841
5067
  closePlugin(message?: string, options?: ClosePluginOptions): never;
3842
- /** Get the current user info like name and id. */
5068
+ /**
5069
+ * Get information about the user that's interacting with the plugin.
5070
+ *
5071
+ * @example
5072
+ * ```ts
5073
+ * const user = await framer.getCurrentUser();
5074
+ * ```
5075
+ */
3843
5076
  getCurrentUser(): Promise<User>;
3844
5077
  /** Get the project info like name and id. */
3845
5078
  getProjectInfo(): Promise<ProjectInfo>;
@@ -3853,9 +5086,33 @@ declare class FramerPluginAPI {
3853
5086
  getCanvasRoot(): Promise<CanvasRootNode>;
3854
5087
  /** Subscribe to canvas root changes */
3855
5088
  subscribeToCanvasRoot(rootUpdate: (root: CanvasRootNode) => void): Unsubscribe$1;
3856
- /** Get the current publish info. */
5089
+ /**
5090
+ * Get information about the published website, such as the time of the most
5091
+ * recent deploy, or the URL of the current page. Provides information about
5092
+ * both `staging` and `production` environments (either may be `null` if the
5093
+ * site has never been published).
5094
+ *
5095
+ * @returns The current publish info for both staging and production.
5096
+ */
3857
5097
  getPublishInfo(): Promise<PublishInfo>;
3858
- /** Subscribe to publish info changes. */
5098
+ /**
5099
+ * Subscribe to publish info changes. The callback is called whenever
5100
+ * publish info is updated (e.g., after a new deployment).
5101
+ *
5102
+ * @param publishInfoUpdate - Called when publish info changes.
5103
+ * @returns A function to unsubscribe from updates.
5104
+ *
5105
+ * @example
5106
+ * ```ts
5107
+ * function usePublishInfo() {
5108
+ * const [publishInfo, setPublishInfo] = useState<PublishInfo>()
5109
+ * useEffect(() => {
5110
+ * return framer.subscribeToPublishInfo(setPublishInfo)
5111
+ * }, [])
5112
+ * return publishInfo
5113
+ * }
5114
+ * ```
5115
+ */
3859
5116
  subscribeToPublishInfo(publishInfoUpdate: (info: PublishInfo) => void): Unsubscribe$1;
3860
5117
  /** Create a new node on the canvas. */
3861
5118
  createFrameNode(attributes: Partial<EditableFrameNodeAttributes>, parentId?: string): Promise<FrameNode | null>;
@@ -3873,7 +5130,21 @@ declare class FramerPluginAPI {
3873
5130
  getChildren(nodeId: NodeId): Promise<CanvasNode[]>;
3874
5131
  /** Get the rect of a node */
3875
5132
  getRect(nodeId: NodeId): Promise<Rect$1 | null>;
3876
- /** Pans and zooms the viewport to center a single or group of nodes. */
5133
+ /**
5134
+ * Pans and zooms the viewport to center a single or group of nodes.
5135
+ *
5136
+ * @param nodeIds - Node ID or array of node IDs to zoom into.
5137
+ * @param options - Options like `maxZoom` and `skipIfVisible`.
5138
+ *
5139
+ * @example
5140
+ * ```ts
5141
+ * // Scroll and zoom the viewport to show a specific node.
5142
+ * await framer.zoomIntoView("node-id")
5143
+ *
5144
+ * // Scroll and zoom to fit multiple nodes into the viewport.
5145
+ * await framer.zoomIntoView(["node-id-1", "node-id-2"])
5146
+ * ```
5147
+ */
3877
5148
  zoomIntoView(nodeIds: NodeId | Iterable<NodeId>, options?: ZoomIntoViewOptions): Promise<void>;
3878
5149
  /** Set the attributes of a node. */
3879
5150
  setAttributes(nodeId: NodeId, attributes: Partial<AnyEditableAttributes>): Promise<AnyNode | null>;
@@ -3891,13 +5162,23 @@ declare class FramerPluginAPI {
3891
5162
  getNodesWithAttribute<T extends NodeAttributeKey, Node = NodeWithAttribute<T>>(attribute: T): Promise<Node[]>;
3892
5163
  /** Get all nodes with a certain attribute which value is set. */
3893
5164
  getNodesWithAttributeSet<T extends NodeAttributeKey, Node = NodeWithAttribute<T>>(attribute: T): Promise<Node[]>;
3894
- /** Get the image of the current selection or null if there is no image. */
5165
+ /**
5166
+ * Get the image of the current selection or `null` if there is no image.
5167
+ *
5168
+ * In `editImage` mode, this returns the image the user already has set,
5169
+ * which your plugin can then modify.
5170
+ */
3895
5171
  getImage(): Promise<ImageAsset | null>;
3896
5172
  /** Subscribe to single image selection changes. */
3897
5173
  subscribeToImage(imageUpdate: (image: ImageAsset | null) => void): Unsubscribe$1;
3898
5174
  /** Upload an image, and insert on the canvas. */
3899
5175
  addImage(image: NamedImageAssetInput | File): Promise<void>;
3900
- /** Upload an image, and set on the selected node. */
5176
+ /**
5177
+ * Upload an image and set it on the selected node.
5178
+ *
5179
+ * In `image` or `editImage` mode, this is the primary method to send the
5180
+ * selected or edited image back to Framer.
5181
+ */
3901
5182
  setImage(image: NamedImageAssetInput | File): Promise<void>;
3902
5183
  /** Upload an image without assigning it to a property. */
3903
5184
  uploadImage(image: NamedImageAssetInput | File): Promise<ImageAsset>;
@@ -3911,7 +5192,14 @@ declare class FramerPluginAPI {
3911
5192
  uploadFiles(files: readonly NamedFileAssetInput[]): Promise<FileAsset[]>;
3912
5193
  /** Add an SVG, replacing the selected SVG, or insert on the canvas. */
3913
5194
  addSVG(svg: SVGData): Promise<void>;
3914
- /** Add a component instance by module URL. */
5195
+ /**
5196
+ * Add a component instance by module URL.
5197
+ *
5198
+ * @param url - The component module URL. Can be copied from the components panel.
5199
+ * @param attributes - Optional component attributes.
5200
+ *
5201
+ * @returns The newly created component instance node.
5202
+ */
3915
5203
  addComponentInstance({ url, attributes, parentId, }: AddComponentInstanceOptions): Promise<ComponentInstanceNode>;
3916
5204
  /** Adds the layers of a component by module URL. */
3917
5205
  addDetachedComponentLayers({ url, layout, attributes }: AddDetachedComponentLayersOptions): Promise<FrameNode>;
@@ -3926,13 +5214,50 @@ declare class FramerPluginAPI {
3926
5214
  /** Add a new text node to the canvas. */
3927
5215
  addText(text: string, options?: AddTextOptions): Promise<void>;
3928
5216
  /**
3929
- * Set Custom HTML to be loaded in the document. A plugin can only set custom HTML once per
3930
- * location.
5217
+ * Install a custom code snippet in the user's website via `<script>` tags.
5218
+ * A plugin can only set custom HTML once per location. Custom code should be
5219
+ * valid HTML. Setting `html` to `null` clears the installed code snippet.
5220
+ *
5221
+ * @param options - The custom code options including `html` and `location`.
5222
+ *
5223
+ * @example
5224
+ * ```ts
5225
+ * framer.setCustomCode({
5226
+ * html: '<script src="https://example.com/script.js"></script>',
5227
+ * location: "bodyEnd"
5228
+ * })
5229
+ * ```
3931
5230
  */
3932
5231
  setCustomCode(options: SetCustomCodeOptions): Promise<void>;
3933
- /** Get custom HTML settings set by the plugin. */
5232
+ /**
5233
+ * Get custom code settings set by the plugin. Your plugin can detect if
5234
+ * custom code was set and whether the user has disabled it.
5235
+ *
5236
+ * @example
5237
+ * ```ts
5238
+ * const customCode = await framer.getCustomCode()
5239
+ * if (customCode.bodyStart.disabled) {
5240
+ * // Custom code was disabled by the user in settings
5241
+ * }
5242
+ * ```
5243
+ */
3934
5244
  getCustomCode(): Promise<CustomCode>;
3935
- /** Subscribe to custom HTML changes set by the plugin. */
5245
+ /**
5246
+ * Subscribe to custom code changes. Called when custom code is registered
5247
+ * or when changes to the settings are made.
5248
+ *
5249
+ * @param callback - Called when custom code settings change.
5250
+ * @returns A function to unsubscribe from updates.
5251
+ *
5252
+ * @example
5253
+ * ```ts
5254
+ * function useCustomCode() {
5255
+ * const [customCode, setCustomCode] = useState<CustomCode | null>(null)
5256
+ * useEffect(() => framer.subscribeToCustomCode(setCustomCode), [])
5257
+ * return customCode
5258
+ * }
5259
+ * ```
5260
+ */
3936
5261
  subscribeToCustomCode(callback: (customHTML: CustomCode) => void): Unsubscribe$1;
3937
5262
  /** Subscribe to the current text selection. */
3938
5263
  subscribeToText(callback: (text: string | null) => void): Unsubscribe$1;
@@ -3942,23 +5267,75 @@ declare class FramerPluginAPI {
3942
5267
  * all of the added listeners.
3943
5268
  */
3944
5269
  makeDraggable(element: HTMLElement, getDragData: () => DragData, onDragComplete?: DragCompleteCallback): Cleanup;
3945
- /** Get the managed collection that is currently active and selected in the UI. */
5270
+ /**
5271
+ * Retrieve the currently active managed Collection from the UI.
5272
+ *
5273
+ * - Only applies when the Plugin is operating in a mode that supports managed Collections.
5274
+ *
5275
+ * @example
5276
+ * ```ts
5277
+ * const collection = await framer.getActiveManagedCollection();
5278
+ * ```
5279
+ */
3946
5280
  getActiveManagedCollection(): Promise<ManagedCollection>;
3947
5281
  /** @deprecated Use `getActiveManagedCollection` */
3948
5282
  getManagedCollection(): Promise<ManagedCollection>;
3949
- /** Get all collections managed by your plugin. */
5283
+ /**
5284
+ * Retrieve Collections that are managed by the current Plugin.
5285
+ *
5286
+ * - Only Collections created or controlled by your Plugin appear in this list.
5287
+ * - These Collections can be modified without the restrictions placed on user-created Collections.
5288
+ *
5289
+ * @example
5290
+ * ```ts
5291
+ * const managedCollections = await framer.getManagedCollections();
5292
+ * ```
5293
+ */
3950
5294
  getManagedCollections(): Promise<ManagedCollection[]>;
3951
5295
  /** Get a collection by its id. */
3952
5296
  getCollection(id: NodeId): Promise<Collection | null>;
3953
- /** Get the collection that is currently selected in the UI. */
5297
+ /**
5298
+ * Retrieve the Collection currently active (selected) in the Framer UI.
5299
+ *
5300
+ * - If the active Collection is managed by a Plugin, you may want to use `getActiveManagedCollection()` instead.
5301
+ * - The selection may change if the user interacts with the UI.
5302
+ *
5303
+ * @returns The active Collection or `null` if none is selected.
5304
+ *
5305
+ * @example
5306
+ * ```ts
5307
+ * const collection = await framer.getActiveCollection();
5308
+ * ```
5309
+ */
3954
5310
  getActiveCollection(): Promise<Collection | null>;
3955
5311
  /**
3956
- * Get all collections in the project. This includes collections created by the user or a
3957
- * plugin.
5312
+ * Get all Collections in the project, both managed and unmanaged.
5313
+ *
5314
+ * @example
5315
+ * ```ts
5316
+ * const collections = await framer.getCollections()
5317
+ * ```
3958
5318
  */
3959
5319
  getCollections(): Promise<Collection[]>;
3960
5320
  /**
3961
5321
  * Display a notification message. The message will be truncated if longer than 120 characters.
5322
+ *
5323
+ * @param message - The message to display. Truncated if longer than 120 characters.
5324
+ * @param options - Options like `variant` (`"info"`, `"success"`, `"warning"`, `"error"`), `durationMs`, `button`, and `onDisappear`.
5325
+ *
5326
+ * @returns A Notification handle that can be used to close the notification programmatically.
5327
+ *
5328
+ * @example
5329
+ * ```ts
5330
+ * const notification = framer.notify("An action was completed", {
5331
+ * button: { text: "Undo", onClick: handleUndo },
5332
+ * durationMs: 3000,
5333
+ * variant: "info",
5334
+ * })
5335
+ *
5336
+ * // Close the notification programmatically
5337
+ * notification.close()
5338
+ * ```
3962
5339
  */
3963
5340
  notify: Notify;
3964
5341
  /** Get plugin data by key. */
@@ -3983,43 +5360,226 @@ declare class FramerPluginAPI {
3983
5360
  createTextStyle(attributes: TextStyleAttributes): Promise<TextStyle>;
3984
5361
  /** Fired when a text style is added, edited or removed. */
3985
5362
  subscribeToTextStyles(callback: (styles: TextStyle[]) => void): Unsubscribe$1;
3986
- /** Get a specific font via it's family name, and optionally weight and style. */
5363
+ /**
5364
+ * Get a specific font from a family by name. This is not case sensitive.
5365
+ * By default, returns a font with normal weight and style. Returns `null`
5366
+ * if the font does not exist or lacks the requested weight/style combination.
5367
+ *
5368
+ * Note: Custom fonts are not available to plugins.
5369
+ *
5370
+ * @param family - The font family name (e.g., `"Noto Sans"`).
5371
+ * @param attributes - Optional weight and style attributes.
5372
+ * @returns The matched font or `null` if not found.
5373
+ *
5374
+ * @example
5375
+ * ```ts
5376
+ * // Get Noto Sans with default weight (400) and normal style
5377
+ * const font = await framer.getFont("Noto Sans")
5378
+ *
5379
+ * // Get Noto Sans with a specific weight and style
5380
+ * const font = await framer.getFont("Noto Sans", {
5381
+ * weight: 800,
5382
+ * style: "italic"
5383
+ * })
5384
+ * ```
5385
+ */
3987
5386
  getFont(family: string, attributes?: FontAttributes): Promise<Font | null>;
3988
- /** Get all available fonts. */
5387
+ /**
5388
+ * Get all available fonts. Unlike the Font Picker which groups fonts by
5389
+ * typeface, this lists individual fonts for each weight and style (each
5390
+ * representing a separate font file).
5391
+ *
5392
+ * Note: Custom fonts are not available to plugins.
5393
+ *
5394
+ * @returns An array of all available fonts.
5395
+ *
5396
+ * @example
5397
+ * ```ts
5398
+ * const fonts = await framer.getFonts()
5399
+ * ```
5400
+ */
3989
5401
  getFonts(): Promise<Font[]>;
3990
- /** Get all locales in the current Project */
5402
+ /**
5403
+ * Get all Locales in the project.
5404
+ *
5405
+ * Does not include the default Locale. See `getDefaultLocale`.
5406
+ *
5407
+ * @example
5408
+ * ```ts
5409
+ * const locales = await framer.getLocales()
5410
+ * ```
5411
+ */
3991
5412
  getLocales(): Promise<readonly Locale[]>;
3992
- /** Get the default locale of the current Project */
5413
+ /**
5414
+ * Get the default locale of the project.
5415
+ *
5416
+ * @example
5417
+ * ```ts
5418
+ * const defaultLocale = await framer.getDefaultLocale()
5419
+ * ```
5420
+ */
3993
5421
  getDefaultLocale(): Promise<Locale>;
3994
5422
  /**
3995
5423
  * Get the currently active locale.
3996
5424
  *
3997
5425
  * - In "localization" mode, the active locale is the locale selected in the Localizations panel.
3998
5426
  * - In "canvas" mode, the active locale is the locale selected in the toolbar.
3999
- * - Otherwise, the active locale is null.
5427
+ * - Otherwise, the active locale is `null`.
5428
+ *
5429
+ * @example
5430
+ * ```ts
5431
+ * const activeLocale = await framer.getActiveLocale()
5432
+ * ```
4000
5433
  */
4001
5434
  getActiveLocale(): Promise<Locale | null>;
4002
- /** Get all localization groups in the current Project */
5435
+ /**
5436
+ * Get all Localization Groups in the project.
5437
+ *
5438
+ * @example
5439
+ * ```ts
5440
+ * const groups = await framer.getLocalizationGroups()
5441
+ *
5442
+ * for (const group of groups) {
5443
+ * console.log(`Group: ${group.name}`)
5444
+ *
5445
+ * for (const source of group.sources) {
5446
+ * console.log(`Source: ${source.value}`)
5447
+ * }
5448
+ * }
5449
+ * ```
5450
+ */
4003
5451
  getLocalizationGroups(): Promise<readonly LocalizationGroup[]>;
4004
- /** Update localization data */
5452
+ /**
5453
+ * Update localization data.
5454
+ *
5455
+ * @param update - An object representing the localization update.
5456
+ *
5457
+ * @example
5458
+ * ```ts
5459
+ * await framer.setLocalizationData({
5460
+ * valuesBySource: {
5461
+ * [titleSourceId]: {
5462
+ * [dutchLocaleId]: { action: "set", value: "Hallo Wereld" }
5463
+ * }
5464
+ * },
5465
+ * statusByLocaleByGroup: {
5466
+ * [blogPostGroupId]: {
5467
+ * [dutchLocaleId]: "ready",
5468
+ * [frenchLocaleId]: "excluded"
5469
+ * }
5470
+ * }
5471
+ * })
5472
+ * ```
5473
+ */
4005
5474
  setLocalizationData(update: LocalizationData): Promise<SetLocalizationDataResult>;
4006
- /** Get all redirects in the project */
5475
+ /**
5476
+ * Get all Redirects in the project.
5477
+ *
5478
+ * @returns All of the Redirects in the project.
5479
+ *
5480
+ * @example
5481
+ * ```ts
5482
+ * const redirects = await framer.getRedirects()
5483
+ * ```
5484
+ */
4007
5485
  getRedirects(): Promise<readonly Redirect[]>;
4008
- /** Add new redirects or update existing ones if their IDs match */
5486
+ /** Subscribe to redirect changes. */
4009
5487
  subscribeToRedirects(callback: (redirects: Redirect[]) => void): Unsubscribe$1;
4010
- /** Add new redirects or update existing ones if their IDs match */
5488
+ /**
5489
+ * Add new redirects or update existing ones if their IDs match
5490
+ *
5491
+ * `from` paths can contain wildcards (`*`) which match any string, and
5492
+ * captured groups can be referenced in the `to` path using `:1`, `:2`,
5493
+ * etc.
5494
+ *
5495
+ * Throws a `FramerPluginError` when the user lacks Site Settings permissions,
5496
+ * when the project plan does not include Redirects, or when the maximum
5497
+ * redirect count (2500) is reached.
5498
+ *
5499
+ * @param redirects - An array of redirect objects to add.
5500
+ * @returns The added Redirects.
5501
+ *
5502
+ * @example
5503
+ * ```ts
5504
+ * await framer.addRedirects([
5505
+ * { from: "/business", to: "/enterprise", expandToAllLocales: true },
5506
+ * { from: "/posts/*", to: "/blog/:1", expandToAllLocales: false },
5507
+ * ])
5508
+ * ```
5509
+ */
4011
5510
  addRedirects(redirects: RedirectInput[]): Promise<Redirect[]>;
4012
- /** Remove a redirect from the project */
5511
+ /**
5512
+ * Remove Redirects from the project. Unknown Redirect IDs are ignored.
5513
+ *
5514
+ * Throws a `FramerPluginError` when the user lacks Site Settings permissions
5515
+ * or when the project plan does not include Redirects.
5516
+ *
5517
+ * @param redirectIds - An array of Redirect IDs to remove.
5518
+ *
5519
+ * @example
5520
+ * ```ts
5521
+ * await framer.removeRedirects([aboutPageRedirect.id, blogPageRedirect.id])
5522
+ * ```
5523
+ */
4013
5524
  removeRedirects(redirectIds: string[]): Promise<void>;
4014
- /** Set the order of redirects */
5525
+ /**
5526
+ * Set the order of Redirects in the list. Unknown Redirect IDs are ignored.
5527
+ *
5528
+ * Throws a `FramerPluginError` when the user lacks Site Settings permissions
5529
+ * or when the project plan does not include Redirects.
5530
+ *
5531
+ * @param redirectIds - An array of Redirect IDs representing the desired order.
5532
+ *
5533
+ * @example
5534
+ * ```ts
5535
+ * await framer.setRedirectOrder([aboutPageRedirect.id, blogPageRedirect.id])
5536
+ * ```
5537
+ */
4015
5538
  setRedirectOrder(redirectIds: string[]): Promise<void>;
4016
- /** Create a new code file */
5539
+ /**
5540
+ * Create a new code file in the project.
5541
+ *
5542
+ * @param name - The name of the code file (including extension).
5543
+ * @param code - The initial content of the code file.
5544
+ * @param options - Optional settings. `editViaPlugin`: when `true`, the "Edit Code" UI action will open the plugin which created the code file.
5545
+ * @returns The newly created code file instance.
5546
+ *
5547
+ * @example
5548
+ * ```ts
5549
+ * const newFile = await framer.createCodeFile(
5550
+ * "MyComponent",
5551
+ * `export default function MyComponent() {
5552
+ * return <div>Hello World</div>
5553
+ * }`
5554
+ * )
5555
+ * ```
5556
+ */
4017
5557
  createCodeFile(name: string, code: string, options?: {
4018
5558
  editViaPlugin?: boolean;
4019
5559
  }): Promise<CodeFile>;
4020
- /** Get an array of all code files */
5560
+ /**
5561
+ * Get all code files in the project.
5562
+ *
5563
+ * @returns An array of all CodeFile instances.
5564
+ *
5565
+ * @example
5566
+ * ```ts
5567
+ * const allFiles = await framer.getCodeFiles()
5568
+ * console.log(`Project has ${allFiles.length} code files`)
5569
+ * ```
5570
+ */
4021
5571
  getCodeFiles(): Promise<readonly CodeFile[]>;
4022
- /** Get a specific code file */
5572
+ /**
5573
+ * Get a specific code file by its ID.
5574
+ *
5575
+ * @param id - The unique identifier of the code file.
5576
+ * @returns The CodeFile instance or `null` if not found.
5577
+ *
5578
+ * @example
5579
+ * ```ts
5580
+ * const codeFile = await framer.getCodeFile("code-file-id")
5581
+ * ```
5582
+ */
4023
5583
  getCodeFile(id: string): Promise<CodeFile | null>;
4024
5584
  /**
4025
5585
  * Lint a code file and return the diagnostics.
@@ -4041,17 +5601,77 @@ declare class FramerPluginAPI {
4041
5601
  */
4042
5602
  typecheckCode(fileName: string, content: string, compilerOptions?: ts.server.protocol.CompilerOptions, sessionId?: string): Promise<TypecheckDiagnostic[]>;
4043
5603
  /**
4044
- * Subscribe to changes in code files.
4045
- * This will be called when code files are added, removed, or updated and will return an array of
4046
- * all code files in the project.
5604
+ * Subscribe to changes in code files across the project. The callback is
5605
+ * called when code files are added, removed, or updated, and receives an
5606
+ * array of all code files in the project.
5607
+ *
5608
+ * @param callback - Function called when code files change.
5609
+ * @returns A function to stop listening to changes.
5610
+ *
5611
+ * @example
5612
+ * ```ts
5613
+ * const unsubscribe = framer.subscribeToCodeFiles((codeFiles) => {
5614
+ * console.log(`Code files updated: ${codeFiles.length} total files`)
5615
+ * })
5616
+ *
5617
+ * // Later, stop listening
5618
+ * unsubscribe()
5619
+ * ```
4047
5620
  */
4048
5621
  subscribeToCodeFiles(callback: (codeFiles: readonly CodeFile[]) => void): Unsubscribe$1;
4049
5622
  /**
4050
5623
  * Set the plugin's menu, which is shown in the plugin window header.
5624
+ *
5625
+ * @param items - The entries to add to the menu.
5626
+ *
5627
+ * @example
5628
+ * ```ts
5629
+ * await framer.setMenu([
5630
+ * {
5631
+ * label: "New",
5632
+ * onAction: newFile,
5633
+ * },
5634
+ * {
5635
+ * type: "separator",
5636
+ * },
5637
+ * {
5638
+ * label: "Log Out",
5639
+ * onAction: logOut,
5640
+ * },
5641
+ * ])
5642
+ * ```
4051
5643
  */
4052
5644
  setMenu(menuItems: MenuItem[]): Promise<void>;
4053
5645
  /**
4054
5646
  * Show a context menu at the given location.
5647
+ *
5648
+ * Placement is relative to the location.
5649
+ *
5650
+ * @param menuItems - The entries to add to the context menu.
5651
+ * @param config - Configuration for positioning the context menu.
5652
+ *
5653
+ * @example
5654
+ * ```ts
5655
+ * await framer.showContextMenu(
5656
+ * [
5657
+ * {
5658
+ * label: "Edit",
5659
+ * enabled: item.isEditable,
5660
+ * onAction: () => editItem(item)
5661
+ * },
5662
+ * { type: "separator" },
5663
+ * {
5664
+ * label: "Remove",
5665
+ * onAction: () => removeItem(item),
5666
+ * },
5667
+ * ],
5668
+ * {
5669
+ * location: { x: event.clientX, y: event.clientY },
5670
+ * placement: "bottom-left",
5671
+ * width: 220,
5672
+ * }
5673
+ * )
5674
+ * ```
4055
5675
  */
4056
5676
  showContextMenu(menuItems: MenuItem[], config: ContextMenuConfig): Promise<void>;
4057
5677
  /**
@@ -4062,18 +5682,37 @@ declare class FramerPluginAPI {
4062
5682
  */
4063
5683
  unstable_ensureMinimumDependencyVersion(packageName: string, version: string): Promise<void>;
4064
5684
  /**
4065
- * Navigate to a node by ID with optional selection and zoom behaviour.
5685
+ * Navigate the Framer UI to a target by its ID. When the target isn't in the
5686
+ * current mode, it might terminate or restart the plugin in the new mode.
4066
5687
  *
4067
5688
  * @param nodeId - The ID of the node to navigate to.
4068
5689
  * @param opts - The options for the navigation.
4069
5690
  * @returns A promise that resolves when the navigation is complete.
5691
+ *
5692
+ * @example
5693
+ * ```ts
5694
+ * await framer.navigateTo(nodeId, opts)
5695
+ * ```
4070
5696
  */
4071
5697
  navigateTo(nodeId: string, opts?: NavigableOptions): Promise<void>;
4072
5698
  /**
4073
- * Subscribe to the currently open code file in the Code Editor.
5699
+ * Subscribe to changes in the Code Editor's active file. This function is
5700
+ * primarily useful when the plugin's mode is `"code"`.
5701
+ *
5702
+ * @param callback - Function called when the active code file changes.
5703
+ * @returns A function to stop listening to changes.
5704
+ *
5705
+ * @example
5706
+ * ```ts
5707
+ * const unsubscribe = framer.subscribeToOpenCodeFile((codeFile) => {
5708
+ * if (codeFile) {
5709
+ * console.log(`Currently open code file: ${codeFile.id}`)
5710
+ * }
5711
+ * })
4074
5712
  *
4075
- * @param callback - The callback to call when the code file changes.
4076
- * @returns A function to unsubscribe from the subscription.
5713
+ * // Later, stop listening
5714
+ * unsubscribe()
5715
+ * ```
4077
5716
  */
4078
5717
  subscribeToOpenCodeFile(callback: (codeFile: CodeFile | null) => void): Unsubscribe$1;
4079
5718
  /**
@@ -4081,6 +5720,8 @@ declare class FramerPluginAPI {
4081
5720
  *
4082
5721
  * If you want to open the newly created design page, you can `.navigateTo()` the page after creation.
4083
5722
  *
5723
+ * @param pageName - The name for the new design page.
5724
+ *
4084
5725
  * @example
4085
5726
  * ```ts
4086
5727
  * const designPage = await framer.createDesignPage("About")
@@ -4093,6 +5734,8 @@ declare class FramerPluginAPI {
4093
5734
  *
4094
5735
  * If you want to open the newly created web page, you can `.navigateTo()` the page after creation.
4095
5736
  *
5737
+ * @param pagePath - The path for the new web page (e.g., "/about").
5738
+ *
4096
5739
  * @example
4097
5740
  * ```ts
4098
5741
  * const webPage = await framer.createWebPage("/about")
@@ -4102,17 +5745,39 @@ declare class FramerPluginAPI {
4102
5745
  createWebPage(pagePath: string): Promise<WebPageNode>;
4103
5746
  /**
4104
5747
  * Create a new collection.
5748
+ *
5749
+ * @param name - The name to give the new collection.
4105
5750
  */
4106
5751
  createCollection(name: string): Promise<Collection>;
4107
5752
  /**
4108
- * Create a new managed collection.
5753
+ * Add a new plugin-managed CMS Collection.
5754
+ *
5755
+ * If a name is provided which matches an existing Collection, the promise will reject.
5756
+ *
5757
+ * @param name - The name to give the new collection.
5758
+ *
5759
+ * @example
5760
+ * ```ts
5761
+ * const newCollection = await framer.createManagedCollection(name)
5762
+ * ```
4109
5763
  */
4110
5764
  createManagedCollection(name: string): Promise<ManagedCollection>;
4111
5765
  /**
4112
- * Set a warning message to show when the user attempts to close the plugin. Set to false to disable.
4113
- * - `string` to enable with a custom message.
4114
- * - `false` to disable.
4115
- * */
5766
+ * When enabled, a modal confirmation will appear before close to confirm the action.
5767
+ *
5768
+ * Pass `false` to disable the warning.
5769
+ *
5770
+ * @param message - The message to show when attempting to close the plugin. `false` disables the warning.
5771
+ *
5772
+ * @example
5773
+ * ```ts
5774
+ * // Show a close warning when the user attempts to close the plugin
5775
+ * await framer.setCloseWarning("Are you sure?")
5776
+ *
5777
+ * // Remove the close warning
5778
+ * await framer.setCloseWarning(false)
5779
+ * ```
5780
+ */
4116
5781
  setCloseWarning(message: string | false): Promise<void>;
4117
5782
  /**
4118
5783
  * Initial state data passed from Vekter during handshake.
@@ -4581,6 +6246,7 @@ declare const fileAssetDiscriminator: "FileAsset";
4581
6246
  interface FileAssetData extends AssetIdentifier, FileAssetDataFields {
4582
6247
  [classKey]: typeof fileAssetDiscriminator;
4583
6248
  }
6249
+ /** A file asset uploaded to the Framer project. */
4584
6250
  declare class FileAsset implements AssetIdentifier, FileAssetDataFields {
4585
6251
  readonly id: AssetId;
4586
6252
  readonly url: string;
@@ -4620,6 +6286,10 @@ interface Size {
4620
6286
  */
4621
6287
  height: number;
4622
6288
  }
6289
+ /**
6290
+ * An image that has been uploaded to the Framer project. Provides methods
6291
+ * to access image data, measure dimensions, and load as bitmap or HTML element.
6292
+ */
4623
6293
  declare class ImageAsset implements ImageDataFields, AssetIdentifier {
4624
6294
  #private;
4625
6295
  readonly id: AssetId;
@@ -4631,11 +6301,14 @@ declare class ImageAsset implements ImageDataFields, AssetIdentifier {
4631
6301
  static [$framerInternal.unmarshal](engine: PluginEngine, data: ImageAssetData): ImageAsset;
4632
6302
  [$framerInternal.marshal](): ImageAssetData;
4633
6303
  /**
4634
- * Clone this image, optionally overriding its attributes.
6304
+ * Clone this image asset, optionally overriding `altText` or `resolution`.
6305
+ * The clone shares the same underlying image data.
4635
6306
  */
4636
6307
  cloneWithAttributes({ altText, resolution, }: Prettify<Partial<Pick<ImageAssetData, "altText" | "resolution">>>): ImageAsset;
4637
6308
  /**
4638
- * Measure this image.
6309
+ * Measure this image's natural dimensions.
6310
+ *
6311
+ * @returns The width and height in pixels. Warning: values may be zero.
4639
6312
  */
4640
6313
  measure(): Promise<Size>;
4641
6314
  /**